[Consignments] Adds Storyboards and some typography helpers

.vscode/settings.json

@@ -8,6 +8,7 @@
         "*.snap": "javascriptreact"
     },
     "eslint.enable": false,
+    "flow.enabled": false,
     "files.trimTrailingWhitespace": true,
     "editor.renderWhitespace": "boundary",
     "editor.rulers": [120],

Example/Emission/index.storybooks.js

@@ -3,7 +3,7 @@ import { getStorybookUI, configure } from '@kadira/react-native-storybook';
 
 // import your stories
 configure(() => {
-  require("../../src/storiesRoot")
+  require("../../src/storiesRegistry")
 }, module);
 
 const StorybookUI = getStorybookUI({port: 9001, host: 'localhost'});

src/data/colors.ts

@@ -1,3 +1,6 @@
+// In TypeScript 2.4 this can turn into an Enum
+// https://github.com/Microsoft/TypeScript/pull/15486
+
 export default {
   "gray-light": "#f8f8f8",
   "gray-regular": "#e5e5e5",

src/data/fonts.ts

@@ -0,0 +1,8 @@
+// In TypeScript 2.4 this can turn into an Enum
+// https://github.com/Microsoft/TypeScript/pull/15486
+
+export default {
+  "garamond-regular": "AGaramondPro-Regular",
+  "garamond-italic": "AGaramondPro-Italic",
+  "avant-garde-regular": "Avant Garde Gothic ITCW01Dm",
+}

src/lib/components/buttons/__stories__/buttons.story.tsx

@@ -12,7 +12,7 @@ import NavigationButton from "../navigation_button"
 const smallButton = { height: 26, width: 320, marginBottom: 20 }
 const largeButton = { height: 26, width: 320, marginBottom: 20 }
 
-storiesOf("Buttons")
+storiesOf("🎨 Buttons")
   .addDecorator((story) => (
     <View style={{ marginTop: 60, marginLeft: 20, marginRight: 20 }}>{story()}</View>
   ))

src/lib/components/consignments/__stories__/consignments.story.tsx

@@ -0,0 +1,17 @@
+import { storiesOf } from "@kadira/react-native-storybook"
+import * as React from "react"
+import { RootContainer } from "react-relay"
+
+import Info from "../setup/info"
+import Welcome from "../setup/welcome"
+
+const nav = {} as any
+const route = {} as any
+
+storiesOf("Consignments")
+  .add("Welcome Page", () => {
+    return <Welcome navigator={nav} route={route} />
+  })
+  .add("Info Page", () => {
+    return <Info navigator={nav} route={route} />
+  })

src/lib/components/consignments/__stories__/typography.story.tsx

@@ -0,0 +1,24 @@
+import { storiesOf } from "@kadira/react-native-storybook"
+import * as React from "react"
+import { View } from "react-native"
+
+import Consignment from "../"
+import * as T from "../typography"
+
+const Wrapper = (p) => <View style={{backgroundColor: "black", flex: 1, paddingTop: 20}}>{p.children}</View>
+
+storiesOf("Consignments - Type")
+
+  .add("Type Reference", () =>
+    <Wrapper>
+      <T.LargeHeadline>Large Headline</T.LargeHeadline>
+      <T.SmallHeadline>Small Headline</T.SmallHeadline>
+      <T.Subtitle>Subtitle</T.Subtitle>
+    </Wrapper>,
+  )
+
+  .add("blank", () =>
+    <Wrapper>
+      <T.Subtitle>Subtitle</T.Subtitle>
+    </Wrapper>,
+  )

src/lib/components/consignments/typography/index.tsx

@@ -0,0 +1,71 @@
+import * as React from "react"
+import { StyleSheet, Text, TextProperties, TextStyle } from "react-native"
+
+import colors from "../../../../data/colors"
+import fonts from "../../../../data/fonts"
+
+const LargeHeadline = (props: TextProperties) => {
+  const children: string = (props as any).children
+  const style = [styles.largeDefault, props.style || {}, styles.largeRequired]
+  return <Text key={children} style ={style}>{children}</Text>
+}
+
+const SmallHeadline = (props: TextProperties) => {
+  const children: string = (props as any).children
+  const style = [styles.smallDefault, props.style || {}, styles.smallRequired]
+  return <Text key={children} style ={style}>{children}</Text>
+}
+
+const Subtitle = (props: TextProperties) => {
+  const children: string = (props as any).children
+  const style = [styles.subtitleDefault, props.style || {}, styles.subtitleRequired]
+  return <Text key={children} style ={style}>{children}</Text>
+}
+
+export  {
+  LargeHeadline,
+  SmallHeadline,
+  Subtitle
+}
+
+interface Styles {
+  largeRequired: TextStyle
+  largeDefault: TextStyle
+  smallRequired: TextStyle
+  smallDefault: TextStyle
+  subtitleRequired: TextStyle
+  subtitleDefault: TextStyle
+}
+
+const styles = StyleSheet.create<Styles>({
+  largeDefault: {
+    fontSize:  30,
+    color: "white",
+    textAlign: "center",
+  },
+
+  largeRequired: {
+    fontFamily: fonts["garamond-regular"],
+  },
+
+  smallDefault: {
+    fontSize:  30,
+    color: "white",
+    textAlign: "center",
+  },
+
+  smallRequired: {
+    fontFamily: fonts["garamond-regular"],
+  },
+
+ subtitleDefault: {
+    fontSize:  20,
+    color: colors["gray-medium"],
+    paddingLeft: 25,
+    paddingRight: 25,
+  },
+
+  subtitleRequired: {
+    fontFamily: fonts["garamond-italic"],
+  },
+})

src/lib/components/text/__stories__/typography.story.tsx

@@ -0,0 +1,14 @@
+import { storiesOf } from "@kadira/react-native-storybook"
+import * as React from "react"
+import { RootContainer } from "react-relay"
+
+import Headline from "../headline"
+import Serif from "../serif"
+
+storiesOf("🎨 Typography")
+  .add("App Headline", () => {
+    return <Headline>This is a balnk headline</Headline>
+  })
+  .add("App Serif Text", () => {
+    return <Serif>This is a blank serif</Serif>
+  })

src/storiesRegistry.js

@@ -0,0 +1,8 @@
+
+import "./lib/components/text/__stories__/typography.story"
+import "./lib/components/buttons/__stories__/buttons.story"
+
+import "./lib/containers/__stories__"
+import "./lib/components/artist/__stories__"
+import "./lib/components/consignments/__stories__/consignments.story"
+import "./lib/components/consignments/__stories__/typography.story"