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>
+  )
+}