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

.storybook/decorators/globalStyle.js → .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 → .storybook/main.ts

@@ -1,5 +1,8 @@
-/** @type import('@storybook/react/types').StorybookConfig */
-module.exports = {
+import { StorybookConfig } from '@storybook/react/types';
+import { PropItem } from 'react-docgen-typescript';
+import path from 'path';
+
+const storybookConfig: StorybookConfig = {
   stories: ['../src/**/*.stories.@(js|jsx|tsx|mdx)'],
   addons: [
     {
@@ -11,7 +14,7 @@ module.exports = {
       }
     },
     '@storybook/addon-storysource',
-    'storybook-addon-styled-component-theme/dist/register'
+    './theme-picker/register'
   ],
   features: {
     postcss: false
@@ -22,8 +25,21 @@ module.exports = {
     reactDocgen: 'react-docgen-typescript',
     reactDocgenTypescriptOptions: {
       shouldExtractLiteralValuesFromEnum: true,
-      propFilter: prop =>
+      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;
   }
 };
+
+export default storybookConfig;

.storybook/preview.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/theme-picker/ThemeButton.tsx

@@ -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/theme-picker/ThemeList.tsx

@@ -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/theme-picker/ThemeProvider.tsx

@@ -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>
+  );
+};

.storybook/theme-picker/register.tsx

@@ -0,0 +1,21 @@
+import addons, { makeDecorator, types } from '@storybook/addons';
+import React from 'react';
+import { ThemeList } from './ThemeList';
+
+export const THEMES_ID = 'storybook/themes';
+
+addons.register(THEMES_ID, () => {
+  addons.addPanel(`${THEMES_ID}/panel`, {
+    title: 'Themes',
+    type: types.PANEL,
+    render: ({ active }) => {
+      return <ThemeList key='react95-themes' active={active} />;
+    }
+  });
+});
+
+export default makeDecorator({
+  name: 'withThemesProvider',
+  parameterName: 'theme',
+  wrapper: (getStory, context) => getStory(context)
+});

package.json

@@ -108,7 +108,6 @@
     "rollup-plugin-node-resolve": "^4.2.4",
     "rollup-plugin-replace": "^2.2.0",
     "semantic-release": "^19.0.3",
-    "storybook-addon-styled-component-theme": "^2.0.0",
     "styled-components": "^5.3.5",
     "ts-jest": "^28.0.7",
     "typescript": "^4.7.4"

tsconfig.json

@@ -12,7 +12,7 @@
       "ESNext",
       "DOM"
     ],
-    "module": "ESNext",
+    "module": "CommonJS",
     "moduleResolution": "Node",
     "noEmitOnError": true,
     "noFallthroughCasesInSwitch": true,
@@ -35,7 +35,7 @@
     "strictFunctionTypes": true,
     "strictNullChecks": true,
     "strictPropertyInitialization": true,
-    "target": "ESNext",
+    "target": "ES2018"
   },
   "include": [
     "**/*.ts",