feat(storybook): Reimplement "Themes" add on with React95 style

This also upgrades many dependencies and removes storybook-addon-styled-component-theme.

Author: WesSouza

.babelrc

@@ -1,24 +1,6 @@
 {
   "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false
-      }
-    ],
-    "@babel/preset-react"
-  ],
-  "plugins": [
-    "babel-plugin-styled-components",
-    "@babel/plugin-proposal-class-properties",
-    "@babel/plugin-transform-runtime"
-  ],
-  "env": {
-    "test": {
-      "presets": ["@babel/preset-env"],
-      "plugins": [
-        ["babel-plugin-styled-components", { "ssr": false, "displayName": false }]
-      ]
-    }
-  }
+    "@babel/preset-env",
+    "@babel/preset-typescript"
+  ]
 }

.storybook/decorators/globalStyle.js renamed to .storybook/decorators/withGlobalStyle.tsx

@@ -1,10 +1,10 @@
+import { DecoratorFn } from '@storybook/react';
 import React from 'react';
 import { createGlobalStyle } from 'styled-components';
 
-import styleReset from '../../src/common/styleReset';
-// TODO is there a way to keep import paths consistent with what end user will get?
 import ms_sans_serif from '../../src/assets/fonts/dist/ms_sans_serif.woff2';
 import ms_sans_serif_bold from '../../src/assets/fonts/dist/ms_sans_serif_bold.woff2';
+import styleReset from '../../src/common/styleReset';
 
 const GlobalStyle = createGlobalStyle`
   ${styleReset}
@@ -25,9 +25,9 @@ const GlobalStyle = createGlobalStyle`
   }
 `;
 
-export default storyFn => (
+export const withGlobalStyle: DecoratorFn = story => (
   <>
     <GlobalStyle />
-    {storyFn()}
+    {story()}
   </>
 );

.storybook/main.js

@@ -0,0 +1,49 @@
+import type { StorybookConfig } from '@storybook/react/types';
+import type { PropItem } from 'react-docgen-typescript';
+
+const path = require('path');
+
+const storybookConfig: StorybookConfig = {
+  stories: ['../src/**/*.stories.@(tsx|mdx)'],
+  addons: [
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        sourceLoaderOptions: {
+          injectStoryParameters: false
+        }
+      }
+    },
+    '@storybook/addon-storysource',
+    './theme-picker/register'
+  ],
+  core: {
+    builder: 'webpack5'
+  },
+  features: {
+    postcss: false
+  },
+  typescript: {
+    check: false,
+    checkOptions: {},
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      shouldExtractLiteralValuesFromEnum: true,
+      propFilter: (prop: PropItem) =>
+        prop.parent ? !/node_modules/.test(prop.parent.fileName) : true
+    }
+  },
+  webpackFinal: config => {
+    config.resolve = {
+      ...config.resolve,
+      alias: {
+        ...config.resolve?.alias,
+        react95: path.resolve(__dirname, '../src/index')
+      }
+    };
+
+    return config;
+  }
+};
+
+module.exports = storybookConfig;

.storybook/main.ts

@@ -0,0 +1,9 @@
+import { DecoratorFn, Parameters } from '@storybook/react';
+import { withGlobalStyle } from './decorators/withGlobalStyle';
+import { withThemesProvider } from './theme-picker/ThemeProvider';
+
+export const decorators: DecoratorFn[] = [withGlobalStyle, withThemesProvider];
+
+export const parameters: Parameters = {
+  layout: 'fullscreen'
+};

.storybook/manager.js renamed to .storybook/manager.ts

@@ -0,0 +1,26 @@
+import React, { useCallback } from 'react';
+import { ThemeProvider } from 'styled-components';
+import { Button } from '../../src/Button/Button';
+import { Theme } from '../../src/types';
+
+export function ThemeButton({
+  active,
+  onChoose,
+  theme
+}: {
+  active: boolean;
+  onChoose: (themeName: string) => void;
+  theme: Theme;
+}) {
+  const handleClick = useCallback(() => {
+    onChoose(theme.name);
+  }, []);
+
+  return (
+    <ThemeProvider theme={theme}>
+      <Button active={active} onClick={handleClick}>
+        {theme.name}
+      </Button>
+    </ThemeProvider>
+  );
+}

.storybook/preview.js

@@ -0,0 +1,77 @@
+import { useAddonState } from '@storybook/api';
+import React, { useCallback } from 'react';
+import styled from 'styled-components';
+
+import themes from '../../src/common/themes';
+import { Theme } from '../../src/types';
+import { THEMES_ID } from './register';
+import { ThemeButton } from './ThemeButton';
+
+const {
+  original,
+  rainyDay,
+  vaporTeal,
+  theSixtiesUSA,
+  olive,
+  tokyoDark,
+  rose,
+  plum,
+  matrix,
+  travel,
+  ...otherThemes
+} = themes;
+
+const themeList = [
+  original,
+  rainyDay,
+  vaporTeal,
+  theSixtiesUSA,
+  olive,
+  tokyoDark,
+  rose,
+  plum,
+  matrix,
+  travel,
+  ...Object.values(otherThemes)
+];
+
+type ThemesProps = {
+  active?: boolean;
+};
+
+const Wrapper = styled.div<{ theme: Theme }>`
+  display: grid;
+  padding: 1em;
+  gap: 1em;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  grid-template-rows: repeat(auto-fill, 40px);
+  background-color: ${({ theme }) => theme.material};
+`;
+
+export function ThemeList({ active }: ThemesProps) {
+  const [themeName, setThemeName] = useAddonState(THEMES_ID, 'original');
+
+  const handleChoose = useCallback(
+    (newThemeName: string) => {
+      setThemeName(newThemeName);
+    },
+    [setThemeName]
+  );
+
+  if (!active) {
+    return null;
+  }
+
+  return (
+    <Wrapper theme={themes.original}>
+      {themeList.map(theme => (
+        <ThemeButton
+          active={themeName === theme.name}
+          key={theme.name}
+          onChoose={handleChoose}
+          theme={theme}
+        />
+      ))}
+    </Wrapper>
+  );
+}

.storybook/preview.ts

@@ -0,0 +1,17 @@
+import { useAddonState } from '@storybook/client-api';
+import { DecoratorFn } from '@storybook/react';
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+
+import themes from '../../src/common/themes/index';
+import { THEMES_ID } from './register';
+
+export const withThemesProvider: DecoratorFn = story => {
+  const [themeName] = useAddonState(THEMES_ID, 'original');
+
+  return (
+    <ThemeProvider theme={themes[themeName] ?? themes.original}>
+      {story()}
+    </ThemeProvider>
+  );
+};