[Dev] Storybook refactor

src/lib/components/consignments/__stories__/consignments-bottom-aligned.story.tsx

@@ -1,37 +1,27 @@
 import * as React from "react"
-import { View } from "react-native"
+import { Text, View } from "react-native"
 
-import { storiesOf } from "@storybook/react-native"
-import { camelCase } from "lodash"
+import Search from "../components/artist-search-results"
+import BottomAlignedButton, { BottomAlignedProps } from "../components/bottom-aligned-button"
 
-import Search, { ArtistQueryData } from "../components/artist-search-results"
+export const name = "Consignments - bottom aligned"
+export const component = BottomAlignedButton
 
+interface States {
+  [name: string]: BottomAlignedProps
+}
 
-const query4Results: ArtistQueryData = {
-  query: "bank",
-  searching: false,
-  results: [
-    artistGen("Ada Van Hoorebeke"), artistGen("Kathleen Adair Brown"),
-    artistGen("Linda Adair"), artistGen("Hector Adalid"),
-  ],
+const withText = {
+  children: [<Text>hi</Text>],
+  onPress: () => "" ,
 }
 
-export const allStates = [
-  { "No query" : noQuery },
-  { "Looking for new results" : queryNoResultsSearching },
-  { "Found no results" : queryNoResults },
-  { "Found one result" : query1Result },
-  { "Found one result, and searching" : query1ResultSearching },
-  { "Found two results" : query2Results },
-  { "Found four results" : query4Results },
-]
+const withSearchResults = {
+  children: [<Search searching={false} query="Bank" results={null} />],
+  onPress: () => "",
+}
 
-const stories = storiesOf("Consignments - Search")
-allStates.forEach(element => {
-  const name = Object.keys(element)[0]
-  stories.add(name, () =>
-  <View style={{flex: 1, backgroundColor: "black", padding: 20, marginTop: 60}}>
-    <Search {...element[name]} />
-  </View>,
-  )
-})
+export const allStates: States[] = [
+  { "With a Text element" : withText },
+  { "With an Artist Search Results Component" : withSearchResults },
+]

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

@@ -1,11 +1,13 @@
 import * as React from "react"
 import { View } from "react-native"
 
-import { storiesOf } from "@storybook/react-native"
 import { camelCase } from "lodash"
 
 import Search, { ArtistQueryData } from "../components/artist-search-results"
 
+export const name = "Consignments - Search"
+export const component = Search
+
 const noQuery: ArtistQueryData = {
   query: null,
   searching: false,
@@ -65,9 +67,9 @@ const query2Results: ArtistQueryData = {
   ],
 }
 
-const artistGen = (name: string) => ({
-    name,
-    id: camelCase(name),
+const artistGen = (artistName: string) => ({
+    name: artistName,
+    id: camelCase(artistName),
     image: { url: "https://d32dm0rphc51dk.cloudfront.net/X9vVvod7QY73ZwLDSZzljw/square.jpg" },
 
 })
@@ -90,13 +92,3 @@ export const allStates = [
   { "Found two results" : query2Results },
   { "Found four results" : query4Results },
 ]
-
-const stories = storiesOf("Consignments - Search")
-allStates.forEach(element => {
-  const name = Object.keys(element)[0]
-  stories.add(name, () =>
-  <View style={{flex: 1, backgroundColor: "black", padding: 20, marginTop: 60}}>
-    <Search {...element[name]} />
-  </View>,
-  )
-})

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

@@ -4,13 +4,22 @@ import * as React from "react"
 import TODO from "../components/artwork-consignment-todo"
 import { ConsignmentMetadata, ConsignmentSetup } from "../index"
 
-const withArtist: ConsignmentSetup = { artist: { name: "Glenn Brown" } }
-const withOnePhoto: ConsignmentSetup = {
+export const name = "Consignments - TODO"
+export const component = TODO
+
+interface States {
+  [name: string]: ConsignmentSetup;
+}
+
+const withArtist = { artist: { name: "Glenn Brown" } }
+const withOnePhoto = {
   ...withArtist,
-  photos: ["https://d32dm0rphc51dk.cloudfront.net/VFiyokWNcBZNlfglZND_3g/small_square.jpg"],
+  photos: [
+    "https://d32dm0rphc51dk.cloudfront.net/VFiyokWNcBZNlfglZND_3g/small_square.jpg",
+  ],
 }
 
-const withPhotos: ConsignmentSetup = {
+const withPhotos = {
   ...withArtist,
   photos: [
     "https://d32dm0rphc51dk.cloudfront.net/VFiyokWNcBZNlfglZND_3g/small_square.jpg",
@@ -30,38 +39,32 @@ const metadata: ConsignmentMetadata = {
   displayString: "5/5",
 }
 
-const withMetadata: ConsignmentSetup = {
+const withMetadata = {
   ...withPhotos,
   metadata,
 }
 
-const withLocation: ConsignmentSetup = {
+const withLocation = {
   ...withMetadata,
   location: "Huddersfield, UK",
 }
 
-const withProvenance: ConsignmentSetup = {
+const withProvenance = {
   ...withLocation,
   provenance: "This work has seen many hands.",
 }
 
-export const allStates = {
-  withArtist,
-  withPhotos,
-  withMetadata,
-  withLocation,
-  withProvenance,
-}
-
-const longProv = "This is a long long long run on sentence that should break correctly."
+const longProv =
+  "This is a long long long run on sentence that should break correctly."
 
-storiesOf("Consignments - TODO")
-  .add("Empty", () => <TODO />)
-  .add("With Artist", () => <TODO {...withArtist} />)
-  .add("With Photos", () => <TODO {...withPhotos} />)
-  .add("With Metadata", () => <TODO {...withMetadata} />)
-  .add("With Location", () => <TODO {...withLocation} />)
-  .add("With Provenance", () => <TODO {...withProvenance} />)
-  .add("With Just Metadata", () => <TODO metadata={metadata} />)
-  .add("With One Photo", () => <TODO {...withOnePhoto} />)
-  .add("With Long Provenance", () => <TODO provenance={longProv} />)
+export const allStates: States[] = [
+  { "Empty Metadata": {} },
+  { "With Artist": withArtist },
+  { "With Photos": withPhotos },
+  { "With Metadata": withMetadata },
+  { "With Location": withMetadata },
+  { "With Provenance": withProvenance },
+  { "With Just Metadata": { metadata } },
+  { "With One": withOnePhoto },
+  { "With Long": { provenance: longProv } },
+]

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

@@ -0,0 +1,45 @@
+import "./consignments.story"
+import "./typography.story"
+
+import { storiesOf } from "@storybook/react-native"
+import * as React from "react"
+import { View } from "react-native"
+
+import * as bottomAlignedButton from "./consignments-bottom-aligned.story"
+import * as search from  "./consignments-search.story"
+import * as todo from  "./consignments-todo.story"
+
+// Just a quick interface so you know the API
+interface AutoStory {
+  name: string,
+  allStates: any[],
+  component: any
+}
+
+// Converts a set of state and a component type into a set of stories
+const autoStories: AutoStory[] = [
+  search,
+  bottomAlignedButton,
+  todo,
+]
+
+const Wrapper = (props) =>
+  <View style={{flex: 1, backgroundColor: "black", padding: 20, marginTop: 60}}>
+    {props.children}
+  </View>
+
+// Allows stories to strictly be about their state and the
+// component itself.
+
+autoStories.forEach(storybook => {
+  const stories = storiesOf(storybook.name)
+
+  storybook.allStates.forEach(element => {
+    const name = Object.keys(element)[0]
+    stories.add(name, () =>
+      <Wrapper>
+        <storybook.component {...element[name]} />
+      </Wrapper>,
+    )
+  })
+})

src/lib/components/consignments/components/artist-search-results.tsx

@@ -100,11 +100,6 @@ const render = (props: ArtistQueryData) =>
     <ScrollView style={{height: 182, paddingTop: 16}} scrollEnabled={props.results && !!props.results.length}>
       {props.results && props.results.length ? props.results.map(rowForResult) : noResults(props) }
     </ScrollView>
-
-    <Separator/>
-    <View style={{height: 40}}>
-      <Button text="DONE" />
-    </View>
   </View>
 
 // Export a pure component version

src/lib/components/consignments/components/bottom-aligned-button.tsx

@@ -32,7 +32,7 @@ const Separator = styled.View`
   height: 1
 `
 
-interface BottomAlignedProps {
+export interface BottomAlignedProps {
   onPress: () => void,
   children: any[]
 }
@@ -41,7 +41,7 @@ const render = (props: BottomAlignedProps) =>
   <View>
     {props.children}
     <Separator />
-    <View style={{ backgroundColor: "black", color: "white" }}>
+    <View style={{ backgroundColor: "black", color: "white", height: 40 }}>
       <Button title="DONE" onPress={props.onPress} />
     </View>
   </View>