From 2d21e3a7d9f5a09953c71c63f2224d9c22bc4fa8 Mon Sep 17 00:00:00 2001
From: Tom Kirkpatrick <tkp@kirkdesigns.co.uk>
Date: Tue, 6 Nov 2018 16:01:59 +0100
Subject: [PATCH] feat(storybook): build our storybook cover page

---
 .storybook/config.js         |  12 ++-
 .storybook/preview-head.html |  29 +++--
 stories/_welcome.stories.js  | 204 ++++++++++++++++++++++++++++++++++-
 3 files changed, 233 insertions(+), 12 deletions(-)

diff --git a/.storybook/config.js b/.storybook/config.js
index 8f23abf6..dbb67490 100644
--- a/.storybook/config.js
+++ b/.storybook/config.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import { addDecorator, configure, setAddon } from '@storybook/react'
 import { withThemes } from 'storybook-styled-components'
+import { withTheme } from 'styled-components'
 import { themes } from '@storybook/components'
 import { withOptions } from '@storybook/addon-options'
 import { withInfo } from '@storybook/addon-info'
@@ -14,6 +15,12 @@ import { dark, light } from 'themes'
 import { getDefaultLocale, locales } from 'lib/i18n'
 import { BackgroundDark, GlobalStyle } from 'components/UI'
 
+const BackgroundDarkWithTheme = withTheme(({ theme, ...rest }) => (
+  <div className={theme.name}>
+    <BackgroundDark p={3} css={{ height: '100vh', 'overflow-y': 'scroll !important' }} {...rest} />
+  </div>
+))
+
 // Register supported locales.
 import '../app/lib/i18n/locale'
 
@@ -66,9 +73,7 @@ addDecorator(
 addDecorator(story => (
   <React.Fragment>
     <GlobalStyle />
-    <BackgroundDark p={3} css={{ height: '100vh', 'overflow-y': 'scroll !important' }}>
-      {story()}
-    </BackgroundDark>
+    <BackgroundDarkWithTheme>{story()}</BackgroundDarkWithTheme>
   </React.Fragment>
 ))
 
@@ -77,6 +82,7 @@ addDecorator(withThemes({ Dark: dark, Light: light }))
 
 // Chapters
 setAddon(chaptersAddon)
+
 setDefaults({
   sectionOptions: {
     showSource: false,
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index da1548cc..d8a3a070 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -1,10 +1,25 @@
 <style>
-  .story-title,
-  .story-subtitle,
-  .chapter-header,
-  .section-header,
-  .section-subsection,
-  .section-button-container {
-    filter: invert(100%);
+  .dark .story-title,
+  .dark .story-subtitle,
+  .dark .chapter-header,
+  .dark .section-header,
+  .dark .section-subsection,
+  .dark .section-button-container {
+    color: white !important;
+    display: block;
+  }
+
+  .light .story-title,
+  .light .story-subtitle,
+  .light .chapter-header,
+  .light .section-header,
+  .light .section-subsection,
+  .light .section-button-container {
+    color: black !important;
+    display: block;
+  }
+
+  .story-header p {
+    margin-bottom: 1em;
   }
 </style>
diff --git a/stories/_welcome.stories.js b/stories/_welcome.stories.js
index e1020429..7d5e7e5e 100644
--- a/stories/_welcome.stories.js
+++ b/stories/_welcome.stories.js
@@ -1,5 +1,205 @@
+import React from 'react'
+import PropTypes from 'prop-types'
 import { storiesOf } from '@storybook/react'
+import { StateDecorator, Store } from '@sambego/storybook-state'
+import { Box, Flex } from 'rebass'
+import {
+  Bar,
+  Button,
+  Dropdown,
+  Form,
+  Heading,
+  Input,
+  Label,
+  LightningInvoiceInput,
+  Message,
+  Notification,
+  Range,
+  TextArea,
+  Toggle
+} from 'components/UI'
 
-storiesOf('Welcome', module).addWithChapters('Zap Style Guide', {
-  subtitle: 'Reusable components for Zap Desktop.'
+const Column = props => <Box width={1 / 4} mr={5} {...props} />
+const Group = ({ title, children }) => (
+  <Box mb={4}>
+    <Heading.h3 mb={2} fontWeight="normal">
+      {title}
+    </Heading.h3>
+    <Bar mb={3} />
+    {children}
+  </Box>
+)
+Group.propTypes = {
+  title: PropTypes.string,
+  children: PropTypes.node
+}
+const Element = props => <Box py={1} {...props} />
+
+const store = new Store({
+  crypto: 'btc',
+  fiat: 'usd',
+  cryptoCurrencies: [
+    {
+      key: 'btc',
+      name: 'BTC'
+    },
+    {
+      key: 'bits',
+      name: 'bits'
+    },
+    {
+      key: 'sats',
+      name: 'satoshis'
+    }
+  ],
+  fiatCurrencies: [
+    {
+      key: 'usd',
+      name: 'USD'
+    },
+    {
+      key: 'eur',
+      name: 'EUR'
+    },
+    {
+      key: 'gbp',
+      name: 'GBP'
+    }
+  ]
 })
+
+storiesOf('Welcome', module)
+  .addDecorator(StateDecorator(store))
+  .addWithChapters('Zap Style Guide', {
+    subtitle: 'Reusable components for Zap Desktop.',
+    info: `The Zap style guide showcases and documents our library of reusable React components. Below is a sample of
+    three components. You can can full details of each component using the navigation on the left.
+
+    Use the Theme Picker in the bottom panel to view components in one of our alternate themes.`,
+    chapters: [
+      {
+        sections: [
+          {
+            options: {
+              showSource: false,
+              allowSourceToggling: false,
+              showPropTables: false,
+              allowPropTablesToggling: false
+            },
+            sectionFn: () => (
+              <Flex>
+                <Column>
+                  <Group title="Message">
+                    <Element>
+                      <Message variant="error">Error message</Message>
+                    </Element>
+                    <Element>
+                      <Message variant="success">Success message</Message>
+                    </Element>
+                    <Element>
+                      <Message variant="warning">Warning message</Message>
+                    </Element>
+                  </Group>
+
+                  <Group title="Notification">
+                    <Element>
+                      <Notification variant="error">Error message</Notification>
+                    </Element>
+                    <Element>
+                      <Notification variant="success">Success message</Notification>
+                    </Element>
+                    <Element>
+                      <Notification variant="warning">Warning message</Notification>
+                    </Element>
+                  </Group>
+                </Column>
+
+                <Column>
+                  <Group title="Input with Label">
+                    <Form>
+                      <Label htmlFor="input">Input Label</Label>
+                      <Input field="input" />
+                    </Form>
+                  </Group>
+
+                  <Group title="TextArea with Label">
+                    <Form>
+                      <Label htmlFor="input">Input Label</Label>
+                      <TextArea field="input" />
+                    </Form>
+                  </Group>
+
+                  <Group title="Lightning Invoice Input">
+                    <Form>
+                      <LightningInvoiceInput
+                        field="input"
+                        chain="bitcoin"
+                        network="testnet"
+                        rows={7}
+                        validateOnBlur
+                        validateOnChange
+                        /* eslint-disable max-len */
+                        initialValue="lntb100u1pdaxza7pp5x73t3j7xgvkzgcdvzgpdg74k4pn0uhwuxlxu9qssytjn77x7zs4qdqqcqzysxqyz5vqd20eaq5uferzgzwasu5te3pla7gv8tzk8gcdxlj7lpkygvfdwndhwtl3ezn9ltjejl3hsp36ps3z3e5pp4rzp2hgqjqql80ec3hyzucq4d9axl"
+                      />
+                    </Form>
+                  </Group>
+                </Column>
+
+                <Column>
+                  <Group title="Button">
+                    <Element>
+                      <Button>Text</Button>
+                    </Element>
+                    <Element>
+                      <Button size="small">Text</Button>
+                    </Element>
+                  </Group>
+
+                  <Group title="Secondary Button">
+                    <Element>
+                      <Button variant="secondary">Text</Button>
+                    </Element>
+                  </Group>
+
+                  <Group title="Loading Button">
+                    <Element>
+                      <Button>Send 0.1235 BTC</Button>
+                    </Element>
+                    <Element>
+                      <Button processing disabled>
+                        Send 0.1235 BTC
+                      </Button>
+                    </Element>
+                  </Group>
+                </Column>
+
+                <Column>
+                  <Group title="Dropdown">
+                    <Element>
+                      <Dropdown
+                        activeKey={store.get('fiat')}
+                        items={store.get('fiatCurrencies')}
+                        onChange={fiat => store.set({ fiat })}
+                      />
+                    </Element>
+                  </Group>
+
+                  <Group title="Toggle">
+                    <Form>
+                      <Toggle field="input" />
+                    </Form>
+                  </Group>
+
+                  <Group title="Range">
+                    <Form>
+                      <Range field="input" />
+                    </Form>
+                  </Group>
+                </Column>
+              </Flex>
+            )
+          }
+        ]
+      }
+    ]
+  })