diff options
author | Thomas F. K. Jorna <[email protected]> | 2021-07-18 21:25:14 +0200 |
---|---|---|
committer | Thomas F. K. Jorna <[email protected]> | 2021-07-18 21:25:14 +0200 |
commit | fdfb0e4e7a145b2b4dfd6abe3200f9d9c9650763 (patch) | |
tree | 4d188893f400d353ae48c68b3a03fdaaef34079b /app/components/local | |
parent | 75a0973d017f86020ea05255b87bcc0eaf962896 (diff) |
include build
Diffstat (limited to 'app/components/local')
-rw-r--r-- | app/components/local/local.story.tsx | 15 | ||||
-rw-r--r-- | app/components/local/local.tsx | 37 |
2 files changed, 52 insertions, 0 deletions
diff --git a/app/components/local/local.story.tsx b/app/components/local/local.story.tsx new file mode 100644 index 0000000..b161f0e --- /dev/null +++ b/app/components/local/local.story.tsx @@ -0,0 +1,15 @@ +import * as React from "react" +import { storiesOf } from "@storybook/react-native" +import { StoryScreen, Story, UseCase } from "../../../storybook/views" +import { color } from "../../theme" +import { Local } from "./local" + +storiesOf("Local", module) + .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>) + .add("Style Presets", () => ( + <Story> + <UseCase text="Primary" usage="The primary."> + <Local style={{ backgroundColor: color.error }} /> + </UseCase> + </Story> + )) diff --git a/app/components/local/local.tsx b/app/components/local/local.tsx new file mode 100644 index 0000000..82ea0ee --- /dev/null +++ b/app/components/local/local.tsx @@ -0,0 +1,37 @@ +import * as React from "react" +import { StyleProp, TextStyle, View, ViewStyle } from "react-native" +import { observer } from "mobx-react-lite" +import { color, typography } from "../../theme" +import { Text } from "../" +import { flatten } from "ramda" + +const CONTAINER: ViewStyle = { + justifyContent: "center", +} + +const TEXT: TextStyle = { + fontFamily: typography.primary, + fontSize: 14, + color: color.primary, +} + +export interface LocalProps { + /** + * An optional style override useful for padding & margin. + */ + style?: StyleProp<ViewStyle> +} + +/** + * Describe your component here + */ +export const Local = observer(function Local(props: LocalProps) { + const { style } = props + const styles = flatten([CONTAINER, style]) + + return ( + <View style={styles}> + <Text style={TEXT}>Hello</Text> + </View> + ) +}) |