feat(client): add storybook custom decorators for theme and i18n

Jozwiaczek · Mar 21, 2021 · 60c5ccd · 60c5ccd
1 parent 731d4d0
commit 60c5ccd
Show file tree

Hide file tree

Showing 7 changed files with 142 additions and 112 deletions.
diff --git a/packages/client/.storybook/decorators/I18nDecorator.jsx b/packages/client/.storybook/decorators/I18nDecorator.jsx
@@ -0,0 +1,17 @@
+import React, { useEffect } from 'react';
+import i18n from '../../src/i18n';
+import { I18nextProvider } from 'react-i18next';
+
+const I18nDecorator = (StoryFn, { globals }) => {
+  useEffect(() => {
+    i18n.changeLanguage(globals.locale);
+  }, [i18n, globals]);
+
+  return (
+    <I18nextProvider i18n={i18n}>
+      <StoryFn />
+    </I18nextProvider>
+  );
+};
+
+export default I18nDecorator;
diff --git a/packages/client/.storybook/decorators/ThemeDecorator.jsx b/packages/client/.storybook/decorators/ThemeDecorator.jsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import styled, { ThemeProvider } from 'styled-components';
+import { getTheme, ThemeType } from '../../src/theme/Theme';
+import GlobalStyles from '../../src/theme/GlobalStyles';
+
+const ThemeBlock = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 50vw;
+  width: 50vw;
+  height: 100vh;
+  bottom: 0;
+  overflow: auto;
+  padding: 10px;
+  ${({ side }) =>
+    side === 'left'
+      ? `
+          left: 0;
+          right: 50vw;
+        `
+      : `
+          right: 0;
+          left: 50vw;
+        `}
+`;
+
+const ThemeStack = styled.div`
+  position: relative;
+  min-height: calc(50vh - 15px);
+`;
+
+const ThemeDecorator = (StoryFn, { globals: { theme } }) => {
+  switch (theme) {
+    case 'side-by-side': {
+      return (
+        <>
+          <ThemeProvider theme={getTheme(ThemeType.light)}>
+            <GlobalStyles />
+            <ThemeBlock side="left" data-side="left">
+              <StoryFn />
+            </ThemeBlock>
+          </ThemeProvider>
+          <ThemeProvider theme={getTheme(ThemeType.dark)}>
+            <GlobalStyles />
+            <ThemeBlock side="right" data-side="right">
+              <StoryFn />
+            </ThemeBlock>
+          </ThemeProvider>
+        </>
+      );
+    }
+    case 'stacked': {
+      return (
+        <>
+          <ThemeProvider theme={getTheme(ThemeType.light)}>
+            <GlobalStyles />
+            <ThemeStack side="left" data-side="left">
+              <StoryFn />
+            </ThemeStack>
+          </ThemeProvider>
+          <ThemeProvider theme={getTheme(ThemeType.dark)}>
+            <GlobalStyles />
+            <ThemeStack side="right" data-side="right">
+              <StoryFn />
+            </ThemeStack>
+          </ThemeProvider>
+        </>
+      );
+    }
+    default: {
+      return (
+        <ThemeProvider theme={getTheme(theme)}>
+          <GlobalStyles />
+          <StoryFn />
+        </ThemeProvider>
+      );
+    }
+  }
+};
+
+export default ThemeDecorator;
diff --git a/packages/client/.storybook/decorators/index.js b/packages/client/.storybook/decorators/index.js
@@ -0,0 +1,2 @@
+export { default as ThemeDecorator } from './ThemeDecorator';
+export { default as I18nDecorator } from './I18nDecorator';
diff --git a/packages/client/.storybook/main.js b/packages/client/.storybook/main.js
@@ -1,8 +1,7 @@
 module.exports = {
+  reactOptions: {
+    fastRefresh: true,
+  },
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    'storybook-addon-styled-component-theme/dist/preset',
-  ],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
 };
diff --git a/packages/client/.storybook/preview.js b/packages/client/.storybook/preview.js
@@ -1,22 +1,38 @@
-import GlobalStyles from '../src/theme/GlobalStyles';
-import { getTheme, ThemeType } from '../src/theme/Theme';
-import { addDecorator } from '@storybook/react';
-import { withThemesProvider } from 'storybook-addon-styled-component-theme';
-import i18n from '../src/i18n';
-import { I18nextProvider } from 'react-i18next';
 import React from 'react';
+import { ThemeDecorator, I18nDecorator } from './decorators';
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
   layout: 'centered',
 };
 
-addDecorator((story) => (
-  <I18nextProvider i18n={i18n}>
-    <GlobalStyles />
-    {story()}
-  </I18nextProvider>
-));
+export const globalTypes = {
+  theme: {
+    name: 'Theme',
+    description: 'Global theme for components',
+    defaultValue: 'dark',
+    toolbar: {
+      icon: 'circlehollow',
+      items: [
+        { value: 'light', icon: 'circlehollow', title: 'Light' },
+        { value: 'dark', icon: 'circle', title: 'Dark' },
+        { value: 'side-by-side', icon: 'sidebar', title: 'Side by side' },
+        { value: 'stacked', icon: 'bottombar', title: 'Stacked' },
+      ],
+    },
+  },
+  locale: {
+    name: 'Locale',
+    description: 'Internationalization locale',
+    defaultValue: 'en',
+    toolbar: {
+      icon: 'globe',
+      items: [
+        { value: 'en', right: '🇺🇸', title: 'English' },
+        { value: 'pl', right: '🇵🇱', title: 'Polski' },
+      ],
+    },
+  },
+};
 
-const themes = [getTheme(ThemeType.dark), getTheme(ThemeType.light)];
-addDecorator(withThemesProvider(themes));
+export const decorators = [ThemeDecorator, I18nDecorator];
diff --git a/packages/client/package.json b/packages/client/package.json
@@ -52,8 +52,8 @@
     "@storybook/addon-essentials": "^6.1.20",
     "@storybook/addon-links": "^6.1.20",
     "@storybook/react": "^6.1.20",
-    "storybook-addon-styled-component-theme": "^2.0.0",
     "@testing-library/jest-dom": "^5.11.4",
+    "@storybook/components": "^6.1.21",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "@types/animejs": "^3.1.2",
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export { default as ThemeDecorator } from './ThemeDecorator';
		export { default as I18nDecorator } from './I18nDecorator';