Storybook (#1620)

* added storybook. doesnt work

* storybook configuration

* babel-loader version

* more providers for storybook

* mdx integration

* added a start page

* reorderd start page

* fixed typo in paragraph story

* linted

* linted

f2/.storybook/formDecorator.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import { Form } from 'react-final-form'
+
+const FormDecorator = storyFn => (
+  <Form
+    initialValues={''}
+    onSubmit={values => {
+      props.onSubmit(values)
+    }}
+    validate={''}
+    render={values => storyFn()}
+  />
+)
+
+export default FormDecorator

f2/.storybook/main.js

@@ -0,0 +1,16 @@
+module.exports = {
+  stories: ['../src/**/*.stories.(js|mdx)'],
+  addons: [
+    '@storybook/preset-create-react-app',
+    '@storybook/addon-actions',
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        configureJSX: true,
+        babelOptions: {},
+      },
+    },
+    '@storybook/addon-links',
+    '@storybook/addon-knobs',
+  ],
+}

f2/.storybook/manager.js

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/addons'
+import theme from './theme'
+
+addons.setConfig({
+  theme: theme,
+})

f2/.storybook/preview.js

@@ -0,0 +1,15 @@
+import { configure, addDecorator, addParameters } from '@storybook/react'
+import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks'
+
+addParameters({
+  docs: {
+    container: DocsContainer,
+    page: DocsPage,
+  },
+  options: {
+    storySort: (a, b) =>
+      a[1].kind === b[1].kind
+        ? 0
+        : a[1].id.localeCompare(b[1].id, undefined, { numeric: true }),
+  },
+})

f2/.storybook/theme.js

@@ -0,0 +1,36 @@
+import { create } from '@storybook/theming/create'
+
+export default create({
+  base: 'light',
+
+  colorPrimary: 'white',
+  colorSecondary: '#2C5282',
+
+  // UI
+  appBg: 'white',
+  appContentBg: 'white',
+  appBorderColor: '#D5D5D5',
+  appBorderRadius: 4,
+
+  // Typography
+  fontBase: '"Noto Sans", sans-serif',
+  fontCode: 'monospace',
+
+  // Text colors
+  textColor: 'black',
+  textInverseColor: 'rgba(255,255,255,0.9)',
+
+  // Toolbar default and active colors
+  barTextColor: 'black',
+  barSelectedColor: '#2C5282',
+  barBg: '#F2F2F2',
+
+  // Form colors
+  inputBg: 'white',
+  inputBorder: 'silver',
+  inputTextColor: 'black',
+  inputBorderRadius: 4,
+
+  brandTitle: 'Canada',
+  brandUrl: '/',
+})

f2/.storybook/themeDecorator.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import { ThemeProvider, CSSReset, Box } from '@chakra-ui/core'
+import theme from '../src/theme/canada'
+import { Global, css } from '@emotion/core'
+import { MemoryRouter } from 'react-router-dom'
+import { I18nProvider, useLingui } from '@lingui/react'
+import { i18n } from '@lingui/core'
+import en from '../src/locales/en.json'
+
+const ThemeDecorator = storyFn => {
+  i18n.load('en', en)
+  i18n.activate('en')
+  return (
+    <MemoryRouter>
+      <I18nProvider i18n={i18n}>
+        <ThemeProvider theme={theme}>
+          <CSSReset />
+          <Global
+            styles={css`
+              @import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700,700i&display=swap');
+            `}
+          />
+          {storyFn()}
+        </ThemeProvider>
+      </I18nProvider>
+    </MemoryRouter>
+  )
+}
+
+export default ThemeDecorator