Cleanup Storybook (codesandbox#2278)

Author: MichaelDeBoey

packages/common/.storybook/addons.js

@@ -0,0 +1,2 @@
+import '@storybook/addon-actions/register';
+import '@storybook/addon-knobs/register';

packages/common/.storybook/addons.ts

@@ -0,0 +1,25 @@
+import { withKnobs } from '@storybook/addon-knobs';
+import { addDecorator, addParameters, configure } from '@storybook/react';
+import { themes } from '@storybook/theming';
+
+import { ThemeDecorator, withGlobal } from '../src/stories/decorators';
+
+addDecorator(withKnobs);
+addDecorator(withGlobal);
+addDecorator(ThemeDecorator);
+
+// Option defaults.
+addParameters({
+  options: {
+    theme: themes.dark,
+  },
+});
+
+// automatically import all files ending in *.stories.tsx
+const req = require.context('../src', true, /.stories.tsx$/);
+
+const loadStories = () => {
+  req.keys().forEach(req);
+};
+
+configure(loadStories, module);

packages/common/.storybook/config.js

@@ -57,6 +57,7 @@
     "@types/lodash": "^4.14.123",
     "@types/react": "^16.8.12",
     "@types/react-icons": "^2.2.7",
+    "@types/storybook__addon-actions": "^3.4.3",
     "@types/storybook__addon-knobs": "^5.0.3",
     "@types/storybook__react": "^4.0.2",
     "@types/styled-components": "^4.1.13",

packages/common/.storybook/config.tsx

@@ -1,6 +1,7 @@
-import * as React from 'react';
+import React from 'react';
 import { ThemeProvider } from 'styled-components';
-import theme from '../theme';
+
+import theme from '../../theme';
 
 export const ThemeDecorator = (fn: () => JSX.Element) => (
   <ThemeProvider theme={theme}>{fn()}</ThemeProvider>

packages/common/package.json

@@ -0,0 +1,2 @@
+export * from './ThemeDecorator';
+export * from './withGlobal';

…ckages/common/src/stories/decorators.tsx …rc/stories/decorators/ThemeDecorator.tsxpackages/common/src/stories/decorators.tsx renamed to packages/common/src/stories/decorators/ThemeDecorator.tsx packages/common/src/stories/decorators.tsx renamed to packages/common/src/stories/decorators/ThemeDecorator.tsx

@@ -0,0 +1,16 @@
+import React, { Fragment } from 'react';
+import { createGlobalStyle } from 'styled-components';
+
+import global from '../../global.css';
+
+const GlobalStyle = createGlobalStyle`
+  ${global}
+`;
+
+export const withGlobal = cb => (
+  <Fragment>
+    <GlobalStyle />
+
+    {cb()}
+  </Fragment>
+);

packages/common/src/stories/decorators/index.ts

@@ -4456,6 +4456,11 @@
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
   integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==
 
+"@types/storybook__addon-actions@^3.4.3":
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/@types/storybook__addon-actions/-/storybook__addon-actions-3.4.3.tgz#bb0c3fd066e1f495d3f2b724487e2b99194b3f1a"
+  integrity sha512-RSFFfruUHL7La4CZpuiKZ0mZvr5orjenFA2jc31tfPwvA3fYNH4/9XSfA2MB08IpJbF3aErtYWT5Dtigkxnltg==
+
 "@types/storybook__addon-knobs@^5.0.3":
   version "5.0.3"
   resolved "https://registry.yarnpkg.com/@types/storybook__addon-knobs/-/storybook__addon-knobs-5.0.3.tgz#a6366877d7b21f9fa2cc9eb23650304388393350"