diff options
author | Thomas F. K. Jorna <[email protected]> | 2021-07-14 15:10:31 +0200 |
---|---|---|
committer | Thomas F. K. Jorna <[email protected]> | 2021-07-14 15:10:31 +0200 |
commit | e5021187e96b78b53203bd95d08d6818aea47d17 (patch) | |
tree | 37ec45d00eb963db53cd4bb4f04a770414b351cc /storybook/views |
New Ignite 7.0.6 app
Diffstat (limited to 'storybook/views')
-rw-r--r-- | storybook/views/index.ts | 3 | ||||
-rw-r--r-- | storybook/views/story-screen.tsx | 15 | ||||
-rw-r--r-- | storybook/views/story.tsx | 16 | ||||
-rw-r--r-- | storybook/views/use-case.tsx | 69 |
4 files changed, 103 insertions, 0 deletions
diff --git a/storybook/views/index.ts b/storybook/views/index.ts new file mode 100644 index 0000000..a722e53 --- /dev/null +++ b/storybook/views/index.ts @@ -0,0 +1,3 @@ +export * from "./story-screen" +export * from "./story" +export * from "./use-case" diff --git a/storybook/views/story-screen.tsx b/storybook/views/story-screen.tsx new file mode 100644 index 0000000..d83f6f5 --- /dev/null +++ b/storybook/views/story-screen.tsx @@ -0,0 +1,15 @@ +import * as React from "react" +import { ViewStyle, KeyboardAvoidingView, Platform } from "react-native" + +const ROOT: ViewStyle = { backgroundColor: "#f0f0f0", flex: 1 } + +export interface StoryScreenProps { + children?: React.ReactNode +} + +const behavior = Platform.OS === "ios" ? "padding" : undefined +export const StoryScreen = (props: StoryScreenProps) => ( + <KeyboardAvoidingView style={ROOT} behavior={behavior} keyboardVerticalOffset={50}> + {props.children} + </KeyboardAvoidingView> +) diff --git a/storybook/views/story.tsx b/storybook/views/story.tsx new file mode 100644 index 0000000..c85f7f0 --- /dev/null +++ b/storybook/views/story.tsx @@ -0,0 +1,16 @@ +import * as React from "react" +import { ScrollView, View, ViewStyle } from "react-native" + +export interface StoryProps { + children?: React.ReactNode +} + +const ROOT: ViewStyle = { flex: 1 } + +export function Story(props: StoryProps) { + return ( + <View style={ROOT}> + <ScrollView keyboardShouldPersistTaps="handled">{props.children}</ScrollView> + </View> + ) +} diff --git a/storybook/views/use-case.tsx b/storybook/views/use-case.tsx new file mode 100644 index 0000000..08b04b9 --- /dev/null +++ b/storybook/views/use-case.tsx @@ -0,0 +1,69 @@ +import * as React from "react" +import { View, Text, TextStyle, ViewStyle } from "react-native" + +const ROOT: ViewStyle = { backgroundColor: "#eee" } +const TITLE: TextStyle = { fontWeight: "600", color: "#3d3d3d" } +const TITLE_WRAPPER: ViewStyle = {} +const USE_CASE_WRAPPER: ViewStyle = { + position: "absolute", + top: 0, + left: 0, + right: 0, + borderTopColor: "#e6e6e6", + borderTopWidth: 1, + flexDirection: "row", +} +const USE_CASE: TextStyle = { + fontSize: 10, + color: "#666", + paddingHorizontal: 4, + paddingBottom: 2, +} +const USAGE: TextStyle = { color: "#666", fontSize: 10, paddingTop: 0 } +const HEADER: ViewStyle = { + paddingTop: 20, + paddingBottom: 10, + paddingHorizontal: 10, + borderBottomColor: "#e6e6e6", + borderBottomWidth: 1, +} +const COMPONENT: ViewStyle = { backgroundColor: "#fff" } + +export interface UseCaseProps { + /** The title. */ + text: string + /** When should we be using this? */ + usage?: string + /** The component use case. */ + children: React.ReactNode + /** A style override. Rarely used. */ + style?: ViewStyle + /** Don't use any padding because it's important to see the spacing. */ + noPad?: boolean + /** Don't use background color because it's important to see the color. */ + noBackground?: boolean +} + +export function UseCase(props: UseCaseProps) { + const style: ViewStyle = { + ...COMPONENT, + ...{ padding: props.noPad ? 0 : 10 }, + ...{ backgroundColor: props.noBackground ? "rgba(0,0,0,0)" : COMPONENT.backgroundColor }, + ...props.style, + } + + return ( + <View style={ROOT}> + <View style={HEADER}> + <View style={USE_CASE_WRAPPER}> + <Text style={USE_CASE}>Use Case</Text> + </View> + <View style={TITLE_WRAPPER}> + <Text style={TITLE}>{props.text}</Text> + </View> + {props.usage ? <Text style={USAGE}>{props.usage}</Text> : null} + </View> + <View style={style}>{props.children}</View> + </View> + ) +} |