feat(docs): configure Storybook Docs (#495)

* cleanup warnings + more deps updates

Co-authored-by: Dmitri Voronianski <[email protected]>

* remove deprecacted storybook methods

* feat(docs): upgrade to Storybook 5.2

* feat(docs): update Storybook config and tweak theme

* feat(docs): configure addon-docs

Co-authored-by: lucent1090 <[email protected]>

* feat(docs): remove Storybook group enums

* feat(docs): run codemod to add component parameter

https://github.com/storybookjs/storybook/blob/next/lib/codemod/README.md#add-component-parameters

* feat(docs): run codemod to transform stories to CSF

https://github.com/storybookjs/storybook/blob/next/lib/codemod/README.md#storiesof-to-csf

* feat(docs): simplify Storybook configs

* fix(components): update snapshots

* fix(docs): update image paths

* feat(docs): add a11y and viewport addons

.storybook/.babelrc

@@ -0,0 +1,18 @@
+{
+  "plugins": [
+    "@babel/plugin-proposal-class-properties",
+    "lodash",
+    "inline-react-svg"
+  ],
+  "presets": [
+    ["@babel/preset-env", { "loose": true }],
+    "@babel/preset-react",
+    [
+      "@emotion/babel-preset-css-prop",
+      {
+        "autoLabel": false,
+        "labelFormat": "[filename]--[local]"
+      }
+    ]
+  ]
+}

.storybook/addons.js

@@ -1,6 +1,7 @@
-import '@storybook/addon-options/register';
 import '@storybook/addon-storysource/register';
 import '@storybook/addon-actions/register';
 import '@storybook/addon-links/register';
 import '@storybook/addon-jest/register';
 import '@storybook/addon-knobs/register';
+import '@storybook/addon-a11y/register';
+import '@storybook/addon-viewport/register';

.storybook/config.js

@@ -1,26 +1,37 @@
 import React from 'react';
-import { configure, addDecorator } from '@storybook/react';
-import { setDefaults } from '@storybook/addon-info';
+import { configure, addDecorator, addParameters } from '@storybook/react';
 import { withKnobs } from '@storybook/addon-knobs';
-import { setOptions } from '@storybook/addon-options';
+import { withA11y } from '@storybook/addon-a11y';
 import { ThemeProvider } from 'emotion-theming';
+import styled from '@emotion/styled';
 
 import { circuit } from '../src/themes';
 import BaseStyles from '../src/components/BaseStyles';
-
-// Sets the info addon's options.
-setDefaults({
-  header: false
+import withTests from './withTests';
+import storybookTheme from './theme';
+
+addParameters({
+  options: {
+    theme: storybookTheme,
+    isFullscreen: false,
+    panelPosition: 'bottom',
+    isToolshown: true
+  }
 });
 
-setOptions({
-  hierarchySeparator: /\//,
-  hierarchyRootSeparator: /\|/,
-  name: 'Circuit UI',
-  url: 'https://github.com/sumup/circuit-ui'
-});
+const Story = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  .sbdocs & {
+    min-height: auto;
+  }
+`;
 
-const req = require.context('../src/components', true, /\.story\.js$/);
+const withStoryStyles = storyFn => {
+  return <Story>{storyFn()}</Story>;
+};
 
 const withThemeProvider = storyFn => (
   <ThemeProvider theme={circuit}>
@@ -31,26 +42,13 @@ const withThemeProvider = storyFn => (
   </ThemeProvider>
 );
 
-const withStoryStyles = storyFn => {
-  return (
-    <div
-      style={{
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        height: '100vh'
-      }}
-    >
-      {storyFn()}
-    </div>
-  );
-};
+addDecorator(withA11y);
+addDecorator(withTests);
+addDecorator(withKnobs);
+addDecorator(withStoryStyles);
+addDecorator(withThemeProvider);
 
-const loadStories = () => {
-  addDecorator(withKnobs);
-  addDecorator(withStoryStyles);
-  addDecorator(withThemeProvider);
-  req.keys().forEach(filename => req(filename));
-};
-
-configure(loadStories, module);
+configure(
+  require.context('../src', true, /\.(stories|story)\.(js|ts|tsx|mdx)$/),
+  module
+);

.storybook/manager-head.html

@@ -0,0 +1,24 @@
+<link rel="icon" type="image/png" href="/storybook/images/logo-icon.png" />
+<style>
+  @font-face {
+    font-family: 'aktiv-grotesk';
+    font-weight: 400;
+    src: url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-400.woff2')
+        format('woff2'),
+      url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-400.woff')
+        format('woff'),
+      url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-400.eot')
+        format('embedded-opentype');
+  }
+
+  @font-face {
+    font-family: 'aktiv-grotesk';
+    font-weight: 700;
+    src: url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-700.woff2')
+        format('woff2'),
+      url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-700.woff')
+        format('woff'),
+      url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-700.eot')
+        format('embedded-opentype');
+  }
+</style>

.storybook/presets.js

@@ -0,0 +1 @@
+module.exports = ['@storybook/addon-docs/react/preset'];

.storybook/preview-head.html

@@ -1,2 +1,22 @@
-<link rel="preload" href="https://use.typekit.net/dxb5kvg.css" as="style" crossorigin>
-<style >@import url("https://use.typekit.net/dxb5kvg.css");</style>
+<style>
+  @font-face {
+    font-family: 'aktiv-grotesk';
+    font-weight: 400;
+    src: url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-400.woff2')
+        format('woff2'),
+      url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-400.woff')
+        format('woff'),
+      url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-400.eot')
+        format('embedded-opentype');
+  }
+  @font-face {
+    font-family: 'aktiv-grotesk';
+    font-weight: 700;
+    src: url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-700.woff2')
+        format('woff2'),
+      url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-700.woff')
+        format('woff'),
+      url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-700.eot')
+        format('embedded-opentype');
+  }
+</style>

.storybook/theme.js

@@ -0,0 +1,15 @@
+import { create } from '@storybook/theming';
+import { circuit } from '../src/themes';
+
+const theme = create({
+  base: 'light',
+  brandTitle: 'Circuit UI',
+  brandUrl: 'https://github.com/sumup/circuit-ui',
+  brandImage: '/storybook/images/logo-name.svg',
+  fontBase: circuit.fontStack.default,
+  colorPrimary: circuit.colors.p500,
+  colorSecondary: circuit.colors.p500,
+  appBg: circuit.colors.n100
+});
+
+export default theme;

.storybook/webpack.config.js

@@ -1,55 +1,15 @@
-const path = require('path');
 const webpack = require('webpack');
 
 module.exports = ({ config, mode }) => {
-  const isProduction = mode === 'PRODUCTION';
-
-  // modify storybook's file-loader rule to avoid conflicts with svgr
-  config.module.rules.find(rule =>
-    rule.test.test('.svg')
-  ).exclude = path.resolve(__dirname, '../src/');
-
-  config.module.rules.push({
-    test: /\.story\.jsx?$/,
-    loaders: [require.resolve('@storybook/addon-storysource/loader')],
-    enforce: 'pre'
-  });
-
-  config.module.rules.push({
-    test: /.svg$/,
-    use: [
-      {
-        loader: '@svgr/webpack',
-        options: {
-          svgoConfig: {
-            plugins: {
-              removeViewBox: false
-            }
-          }
-        }
-      },
-      'url-loader'
-    ]
-  });
-
   config.plugins.push(
     new webpack.DefinePlugin({
       STORYBOOK: JSON.stringify(true),
-      PRODUCTION: JSON.stringify(isProduction),
       __TEST__: JSON.stringify(false),
-      // Show deprecation warnings in storybook
-      __DEV__: JSON.stringify(true),
-      __PRODUCTION__: JSON.stringify(false)
+      __PRODUCTION__: JSON.stringify(true),
+      // Show deprecation warnings in Storybook
+      __DEV__: JSON.stringify(true)
     })
   );
 
-  if (isProduction) {
-    config.module.rules.push({
-      test: /\.css$/,
-      loaders: ['style-loader', 'css-loader'],
-      include: path.resolve(__dirname)
-    });
-  }
-
   return config;
 };

src/util/withTests.js → .storybook/withTests.js

@@ -1,6 +1,6 @@
-/* eslint-disable */
 import { withTests } from '@storybook/addon-jest';
-import results from '../../jest-test-results.json';
+
+import results from '../jest-test-results.json';
 
 export default withTests(
   {

README.md

@@ -1,6 +1,6 @@
 <div align="center">
 
-[![Circuit UI Logo](./.github/logo.png)](https://circuit.sumup.com)
+[![Circuit UI Logo](https://circuit.sumup.com/storybook/images/logo-header.png)](https://circuit.sumup.com)
 
 [Circuit UI](https://circuit.sumup.com) is the web incarnation of the [SumUp](https://sumup.com) Circuit Design System. Our primary goal is to create a system that can be used to build a wide variety of SumUp websites and apps, while providing a consistent user experience to our end users. In addition, the design system and component library should be easy to use for developers and designers.
 

docs/content/index.mdx

@@ -36,6 +36,6 @@ Here are a few helpful links for getting started with Circuit UI:
 ## Contributing
 
 <img
-  src="public/images/logo.png"
+  src="/storybook/images/logo-header.png"
   style={{ margin: '0 auto', display: 'block' }}
 />

docs/index.html

@@ -15,7 +15,11 @@
     <meta name="description" content="{{ description }}" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <link rel="icon" type="image/png" href="/public/images/circuit-logo.png" />
+    <link
+      rel="icon"
+      type="image/png"
+      href="/storybook/images/circuit-logo.png"
+    />
     <style>
       @font-face {
         font-family: 'aktiv-grotesk';

package.json

@@ -21,12 +21,11 @@
     "test:unit:output": "jest --json --outputFile=jest-test-results.json",
     "create-component": "foundry run plop component",
     "static-styles": "cross-env BABEL_ENV=static babel-node ./scripts/static-styles/cli.js",
-    "prestart": "yarn test:unit",
-    "start": "start-storybook -p 6006",
-    "prebuild": "yarn test:unit:output",
+    "prestart": "yarn test:unit:output",
+    "start": "start-storybook -p 6006 -s .storybook/public",
     "build": "yarn docz:build && yarn build:stylesheets && yarn build:storybook",
     "prebuild:storybook": "yarn test:unit:output",
-    "build:storybook": "build-storybook -c .storybook -o dist/storybook",
+    "build:storybook": "build-storybook -c .storybook -o dist/storybook -s .storybook/public",
     "build:stylesheets": "yarn static-styles --global --filePath=./dist/static/circuit-ui-v1.css",
     "build:js": "yarn clean:js && yarn build:js:cjs && yarn build:js:es",
     "build:js:cjs": "cross-env BABEL_ENV=cjs babel src --out-dir lib --ignore *.spec.js,*.story.js",
@@ -69,16 +68,17 @@
     "@emotion/babel-preset-css-prop": "^10.0.9",
     "@emotion/cache": "^10.0.19",
     "@emotion/stylis": "^0.8.4",
-    "@storybook/addon-a11y": "^5.0.5",
-    "@storybook/addon-actions": "^5.0.5",
-    "@storybook/addon-info": "^5.0.5",
-    "@storybook/addon-jest": "^5.0.5",
-    "@storybook/addon-knobs": "^5.0.5",
-    "@storybook/addon-links": "^5.0.5",
-    "@storybook/addon-options": "^5.0.5",
-    "@storybook/addon-storysource": "^5.0.5",
-    "@storybook/addons": "^5.0.5",
-    "@storybook/react": "^5.0.5",
+    "@storybook/addon-a11y": "^5.2.0",
+    "@storybook/addon-actions": "^5.2.0",
+    "@storybook/addon-docs": "^5.2.4",
+    "@storybook/addon-jest": "^5.2.0",
+    "@storybook/addon-knobs": "^5.2.0",
+    "@storybook/addon-links": "^5.2.0",
+    "@storybook/addon-storysource": "^5.2.0",
+    "@storybook/addon-viewport": "^5.2.4",
+    "@storybook/addons": "^5.2.0",
+    "@storybook/react": "^5.2.0",
+    "@storybook/source-loader": "^5.2.4",
     "@sumup/foundry": "^1.5.0",
     "@testing-library/jest-dom": "^4.1.0",
     "@testing-library/react": "^9.1.4",
@@ -113,9 +113,7 @@
     "postcss-object-fit-images": "^1.1.2",
     "prettier": "1.16.4",
     "prettier-eslint": "^8.8.2",
-    "react-svg-loader": "^2.1.0",
     "react-test-renderer": "^16.8.6",
-    "storybook-addon-smart-knobs": "^4.1.0",
     "style-loader": "^0.23.1",
     "webpack-merge": "^4.2.1",
     "yargs": "^14.0.0"
@@ -124,7 +122,6 @@
     "@emotion/core": "^10.0.10",
     "@emotion/is-prop-valid": "^0.8.2",
     "@emotion/styled": "^10.0.10",
-    "@svgr/webpack": "^4.1.0",
     "babel-plugin-inline-react-svg": "^1.1.0",
     "commitizen": "^3.0.5",
     "css-loader": "^2.1.1",