feat: migrate storybook to TS (#375)

.storybook/main.js → .storybook/main.ts

@@ -1,4 +1,6 @@
-module.exports = {
+import { StorybookConfig } from '@storybook/nextjs';
+
+const config: StorybookConfig = {
   framework: {
     name: '@storybook/nextjs',
     options: {},
@@ -9,11 +11,10 @@ module.exports = {
     '@storybook/addon-essentials',
     'storybook-dark-mode',
   ],
-  features: {
-    emotionAlias: false,
-  },
-  staticDir: ['../public'],
+  staticDirs: ['../public'],
   docs: {
     autodocs: true,
   },
 };
+
+export default config;

.storybook/preview.tsx

@@ -0,0 +1,110 @@
+import React, { useEffect } from 'react';
+
+import { Box, useColorMode } from '@chakra-ui/react';
+import { Preview } from '@storybook/react';
+import { themes } from '@storybook/theming';
+import { useTranslation } from 'react-i18next';
+import { MemoryRouter } from 'react-router-dom';
+import { useDarkMode } from 'storybook-dark-mode';
+
+import { Providers } from '../src/app/Providers';
+import i18nGlobal from '../src/lib/i18n/config';
+import {
+  AVAILABLE_LANGUAGES,
+  DEFAULT_LANGUAGE_KEY,
+} from '../src/lib/i18n/constants';
+// @ts-ignore don't want to implement a d.ts declaration for storybook only
+import logoReversed from './logo-reversed.svg';
+// @ts-ignore don't want to implement a d.ts declaration for storybook only
+import logo from './logo.svg';
+
+const DocumentationWrapper = ({ children, context }) => {
+  const { i18n } = useTranslation();
+  const isDarkMode = useDarkMode();
+  const { colorMode, setColorMode } = useColorMode();
+
+  // Update color mode
+  useEffect(() => {
+    // Add timeout to prevent unsync color mode between docs and classic modes
+    const timer = setTimeout(() => {
+      if (isDarkMode) {
+        setColorMode('dark');
+      } else {
+        setColorMode('light');
+      }
+    });
+    return () => clearTimeout(timer);
+  }, [isDarkMode]);
+
+  // Update language
+  useEffect(() => {
+    i18n.changeLanguage(context.globals.locale);
+  }, [context.globals.locale]);
+
+  return (
+    <Box
+      id="start-ui-storybook-wrapper"
+      p="4"
+      pb="8"
+      bg={colorMode === 'dark' ? 'gray.900' : 'white'}
+      flex="1"
+    >
+      {children}
+    </Box>
+  );
+};
+
+const preview: Preview = {
+  globalTypes: {
+    locale: {
+      name: 'Locale',
+      description: 'Internationalization locale',
+      defaultValue: DEFAULT_LANGUAGE_KEY,
+      toolbar: {
+        icon: 'globe',
+        items: AVAILABLE_LANGUAGES.map(({ key }) => ({
+          value: key,
+          title: i18nGlobal.t(`languages.${String(key)}`),
+        })),
+      },
+    },
+  },
+  parameters: {
+    options: {
+      storySort: {
+        order: ['StyleGuide', 'Components', 'Fields', 'App Layout'],
+      },
+    },
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    darkMode: {
+      dark: {
+        ...themes.dark,
+        brandImage: logoReversed.src,
+        brandTitle: 'Start UI',
+      },
+      light: {
+        ...themes.light,
+        brandImage: logo.src,
+        brandTitle: 'Start UI',
+      },
+    },
+    layout: 'fullscreen',
+    backgrounds: { disable: true, grid: { disable: true } },
+  },
+  decorators: [
+    (story, context) => (
+      <Providers>
+        <MemoryRouter>
+          <DocumentationWrapper context={context}>
+            {/* Calling as a function to avoid errors. Learn more at:
+             * https://github.com/storybookjs/storybook/issues/15223#issuecomment-1092837912
+             */}
+            {story(context)}
+          </DocumentationWrapper>
+        </MemoryRouter>
+      </Providers>
+    ),
+  ],
+};
+
+export default preview;

package.json

@@ -76,13 +76,13 @@
     "@babel/parser": "7.21.8",
     "@chakra-ui/cli": "2.4.1",
     "@next/eslint-plugin-next": "13.4.3",
-    "@storybook/addon-actions": "7.0.10",
-    "@storybook/addon-essentials": "7.0.10",
-    "@storybook/addon-links": "7.0.10",
+    "@storybook/addon-actions": "7.0.18",
+    "@storybook/addon-essentials": "7.0.18",
+    "@storybook/addon-links": "7.0.18",
     "@storybook/addon-postcss": "2.0.0",
-    "@storybook/nextjs": "7.0.10",
-    "@storybook/react": "7.0.10",
-    "@storybook/theming": "7.0.10",
+    "@storybook/nextjs": "7.0.18",
+    "@storybook/react": "7.0.18",
+    "@storybook/theming": "7.0.18",
     "@svgr/cli": "8.0.1",
     "@trivago/prettier-plugin-sort-imports": "4.1.1",
     "@types/bcrypt": "5.0.0",
@@ -103,7 +103,7 @@
     "lint-staged": "13.2.2",
     "prettier": "2.8.8",
     "prisma": "4.14.0",
-    "storybook": "7.0.10",
+    "storybook": "7.0.18",
     "storybook-dark-mode": "3.0.0",
     "tsx": "3.12.7",
     "typescript": "5.0.4"