feat: upgrade to Storybook v5 [SL-2026] (#3)

* feat: upgrade to Storybook v5

* refactor: use hooks in themes addon

* chore: install missing deps

* fix: don't import Toaster

* style: btn paddings

* style: btn background

jest.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   preset: '@stoplight/scripts',
   testEnvironment: 'jsdom',
-  setupTestFrameworkScriptFile: './setupTests.ts',
+  setupFilesAfterEnv: ['./setupTests.ts'],
   snapshotSerializers: ['enzyme-to-json/serializer'],
 };

package.json

@@ -35,33 +35,41 @@
     "test.watch": "yarn test --watch"
   },
   "peerDependencies": {
-    "react": ">=16",
-    "react-dom": ">=16"
+    "react": ">=16.8",
+    "react-dom": ">=16.8"
   },
   "dependencies": {
-    "@babel/core": "7.x.x",
-    "@storybook/addon-actions": "4.0.x",
-    "@storybook/addon-knobs": "4.0.x",
-    "@storybook/addon-links": "4.0.x",
-    "@storybook/addon-options": "4.0.x",
-    "@storybook/addons": "4.0.x",
-    "@storybook/core": "4.0.x",
-    "@storybook/react": "4.0.x",
+    "@babel/core": "7.3.4",
+    "@stoplight/ui-kit": "^1.45.0",
+    "@storybook/addon-actions": "5.0.1",
+    "@storybook/addon-knobs": "5.0.1",
+    "@storybook/addon-links": "5.0.1",
+    "@storybook/addon-options": "5.0.1",
+    "@storybook/addons": "5.0.1",
+    "@storybook/core": "5.0.1",
+    "@storybook/react": "5.0.1",
     "@types/storybook__addon-actions": "3.4.x",
-    "@types/storybook__addon-info": "3.4.x",
-    "@types/storybook__addon-knobs": "3.4.x",
+    "@types/storybook__addon-knobs": "4.0.x",
     "@types/storybook__addon-links": "3.3.x",
     "@types/storybook__addon-options": "4.0.x",
     "@types/storybook__react": "4.0.x",
     "babel-loader": "8.x.x",
     "ts-loader": "5.3.x",
-    "webpack": "4.x.x"
+    "webpack": "4.29.6"
   },
   "devDependencies": {
-    "@stoplight/scripts": "4.x.x",
-    "react": ">=16",
-    "react-dom": ">=16",
-    "typescript": "3.2.x"
+    "@stoplight/scripts": "5.x.x",
+    "enzyme": "^3.9.0",
+    "enzyme-adapter-react-16": "^1.10.0",
+    "enzyme-to-json": "^3.3.5",
+    "jest": "24.3.1",
+    "jest-enzyme": "^7.0.2",
+    "lodash": "4.17.11",
+    "react": "16.8.4",
+    "react-dom": "16.8.4",
+    "ts-jest": "24.0.0",
+    "tslint": "5.13.1",
+    "typescript": "3.3.3333"
   },
   "lint-staged": {
     "*.{ts,tsx}$": [

src/addons.ts

@@ -2,4 +2,4 @@ require('@storybook/addon-knobs/register');
 require('@storybook/addon-actions/register');
 require('@storybook/addon-links/register');
 require('@storybook/addon-options/register');
-require('./custom-addons/withThemes/register');
+require('./addons/withThemes/register');

src/addons/withThemes/Panel.tsx

@@ -0,0 +1,68 @@
+import { Box } from '@stoplight/ui-kit/Box';
+import { Button } from '@stoplight/ui-kit/Button';
+import Channel from '@storybook/channels';
+import * as React from 'react';
+
+interface IPanel {
+  active: boolean;
+  channel: Channel;
+}
+
+export const Panel: React.FunctionComponent<IPanel> = ({ active, channel }) => {
+  const [themeName, setThemeName] = React.useState(sessionStorage.themeName || 'light');
+  const [themes, setThemes] = React.useState<string[]>([]);
+
+  const setTheme = React.useCallback<(theme: string) => void>(
+    theme => {
+      setThemeName(theme);
+      sessionStorage.themeName = theme;
+    },
+    [setThemeName]
+  );
+
+  React.useEffect(
+    () => {
+      channel.on('themes/list', setThemes);
+
+      return () => {
+        channel.removeListener('themes/list', setThemes);
+      };
+    },
+    [channel, setThemes]
+  );
+
+  React.useEffect(
+    () => {
+      channel.on('themes/setTheme', setTheme);
+
+      return () => {
+        channel.removeListener('themes/setTheme', setTheme);
+      };
+    },
+    [channel, setTheme]
+  );
+
+  if (!active) return null;
+
+  return (
+    <Box m="25px" width="100%" overflow="auto">
+      {themes.map((theme: string) => (
+        <Button
+          key={theme}
+          onClick={() => channel.emit('themes/setTheme', theme)}
+          display="inline-block"
+          py={2}
+          px={3}
+          fontWeight={700}
+          mr={3}
+          borderRadius={3}
+          color={theme === themeName ? 'green' : undefined}
+          cursor={theme === themeName ? 'default' : 'pointer'}
+          backgroundColor={theme === themeName ? 'eee' : 'transparent'}
+        >
+          {theme}
+        </Button>
+      ))}
+    </Box>
+  );
+};

src/addons/withThemes/index.tsx

@@ -0,0 +1,45 @@
+import addons, { makeDecorator, StoryContext } from '@storybook/addons';
+import Channel from '@storybook/channels';
+import * as React from 'react';
+
+interface IThemeContainer {
+  channel: Channel;
+  children: React.ReactElement;
+  themes: string[];
+}
+
+export const withThemes = ({ ThemeProvider, themes, zones }: any) =>
+  makeDecorator({
+    name: 'withThemes',
+    wrapper: (story: (context: StoryContext) => React.ReactNode, context: StoryContext) => (
+      <ThemeContainer channel={addons.getChannel()} themes={themes}>
+        <ThemeProvider zones={zones}>{story(context)}</ThemeProvider>
+      </ThemeContainer>
+    ),
+  });
+
+const ThemeContainer: React.FunctionComponent<IThemeContainer> = ({ channel, themes, children }) => {
+  const [themeName, setThemeName] = React.useState(sessionStorage.themeName || 'light');
+
+  React.useEffect(
+    () => {
+      channel.emit('themes/list', themes);
+    },
+    [themes]
+  );
+
+  React.useEffect(
+    () => {
+      channel.on('themes/setTheme', setThemeName);
+
+      return () => {
+        channel.removeListener('themes/setTheme', setThemeName);
+      };
+    },
+    [channel, setThemeName]
+  );
+
+  return React.cloneElement(children, {
+    theme: { base: themeName },
+  });
+};

src/config.tsx → src/config.ts

@@ -1,14 +1,10 @@
-// @ts-ignore
 import { withOptions } from '@storybook/addon-options';
 import { addDecorator, configure } from '@storybook/react';
-import * as React from 'react';
-import { withThemes } from './custom-addons/withThemes';
+import { withThemes } from './addons/withThemes';
 
 addDecorator(
   withOptions({
-    // @ts-ignore
     name: pkg.name || 'Stoplight UI-Kit',
-    // @ts-ignore
     url: pkg.url || 'https://github.com/stoplightio/ui-kit',
     goFullScreen: false,
     showStoriesPanel: true,
@@ -22,11 +18,9 @@ addDecorator(
   })
 );
 
-addDecorator(withThemes);
+addDecorator(withThemes(require('@project/theme')));
 
-addDecorator(storyFn => <div>{storyFn()}</div>);
-
-// configure(require('@project/stories'), module);
+configure(require('@project/stories'), module);
 
 function loadStories() {
   require('@project/stories');

src/webpack.config.ts

@@ -7,7 +7,7 @@ const pkg = require.resolve('package.json', {
   paths: [process.cwd()],
 }) as any;
 
-module.exports = (baseConfig: any, env: any, config: any) => {
+module.exports = ({ config }: any) => {
   config.context = cwd;
   config.mode = 'development';
   config.resolve.alias['@project/stories'] = require.resolve('src/__stories__/index.ts', { paths: [cwd] });