From de1e8e90325142e41ece8edc785119440b49fa0c Mon Sep 17 00:00:00 2001
From: "Mr.Dr.Professor Patrick" <alaev89@yandex-team.ru>
Date: Fri, 1 Jul 2022 12:33:05 +0300
Subject: [PATCH] fix: move all storybook decorators into one (#14)

---
 .storybook/contextDecorator.tsx      | 42 ++++++++++++++++++++++++++++
 .storybook/decorators/withLang.tsx   | 11 --------
 .storybook/decorators/withMobile.tsx | 14 ----------
 .storybook/decorators/withTheme.tsx  | 16 -----------
 .storybook/preview.js                | 28 ++-----------------
 5 files changed, 44 insertions(+), 67 deletions(-)
 create mode 100644 .storybook/contextDecorator.tsx
 delete mode 100644 .storybook/decorators/withLang.tsx
 delete mode 100644 .storybook/decorators/withMobile.tsx
 delete mode 100644 .storybook/decorators/withTheme.tsx

diff --git a/.storybook/contextDecorator.tsx b/.storybook/contextDecorator.tsx
new file mode 100644
index 00000000..8f9cac97
--- /dev/null
+++ b/.storybook/contextDecorator.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import {Story as StoryType, StoryContext} from '@storybook/react';
+import {ThemeProvider, MobileProvider, useTheme, useMobile} from '@yandex-cloud/uikit';
+import {settings} from '../src/libs';
+
+export function withContext(Story: StoryType, context: StoryContext) {
+    const [theme, setTheme] = useTheme();
+    const [mobile, setMobile] = useMobile();
+    const themeValue = context.globals.theme;
+    const mobileValue = context.globals.platform === 'mobile';
+    const lang = context.globals.lang;
+
+    // storybook environment theme setting
+    context.parameters.backgrounds.default = theme;
+    context.globals.backgrounds = {
+        value: theme === 'light' ? 'white' : 'black',
+    };
+
+    React.useEffect(() => {
+        if (theme !== themeValue) {
+            setTheme(themeValue);
+        }
+    }, [theme, themeValue, setTheme]);
+
+    React.useEffect(() => {
+        if (mobile !== mobileValue) {
+            setMobile(mobileValue);
+        }
+    }, [mobile, mobileValue, setMobile]);
+
+    React.useEffect(() => {
+        settings.set({lang});
+    }, [lang]);
+
+    return (
+        <ThemeProvider theme={themeValue}>
+            <MobileProvider mobile={mobile}>
+                <Story {...context} />
+            </MobileProvider>
+        </ThemeProvider>
+    );
+}
diff --git a/.storybook/decorators/withLang.tsx b/.storybook/decorators/withLang.tsx
deleted file mode 100644
index b37ad05e..00000000
--- a/.storybook/decorators/withLang.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-import {Story as StoryType, StoryContext} from '@storybook/react';
-import {settings} from '../../src/libs';
-
-export function withLang(Story: StoryType, context: StoryContext) {
-    const lang = context.globals.lang;
-
-    settings.set({lang});
-
-    return <Story key={lang} {...context} />;
-}
diff --git a/.storybook/decorators/withMobile.tsx b/.storybook/decorators/withMobile.tsx
deleted file mode 100644
index b96c9c0d..00000000
--- a/.storybook/decorators/withMobile.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import {Story as StoryType, StoryContext} from '@storybook/react';
-import {useMobile} from '@yandex-cloud/uikit';
-
-export function withMobile(Story: StoryType, context: StoryContext) {
-    const mobileValue = context.globals.platform === 'mobile';
-    const [, setMobile] = useMobile();
-
-    React.useEffect(() => {
-        setMobile(mobileValue);
-    }, [mobileValue]);
-
-    return <Story {...context} />;
-}
diff --git a/.storybook/decorators/withTheme.tsx b/.storybook/decorators/withTheme.tsx
deleted file mode 100644
index 88043381..00000000
--- a/.storybook/decorators/withTheme.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import {Story as StoryType, StoryContext} from '@storybook/react';
-import {useTheme} from '@yandex-cloud/uikit';
-
-export function withTheme(Story: StoryType, context: StoryContext) {
-    const themeValue = context.globals.theme;
-    const [theme, setTheme] = useTheme();
-
-    React.useEffect(() => {
-        if (theme !== themeValue) {
-            setTheme(themeValue);
-        }
-    }, [theme, themeValue, setTheme]);
-
-    return <Story {...context} />;
-}
diff --git a/.storybook/preview.js b/.storybook/preview.js
index 9a89ba02..bda58332 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,33 +1,9 @@
-import React from 'react';
 import {MINIMAL_VIEWPORTS} from '@storybook/addon-viewport';
-import {withTheme} from './decorators/withTheme';
-import {withMobile} from './decorators/withMobile';
-import {withLang} from './decorators/withLang';
-import {ThemeProvider, MobileProvider} from '@yandex-cloud/uikit';
+import {withContext} from './contextDecorator';
 
 import '@yandex-cloud/uikit/styles/styles.scss';
 
-const withContextProvider = (Story, context) => {
-    const theme = context.globals.theme;
-
-    // dark theme for documentation hack
-    context.parameters.backgrounds.default = theme;
-    context.globals.backgrounds = {
-        value: theme === 'light' ? 'white' : 'black',
-    };
-
-    context.globals.background = theme;
-
-    return (
-        <ThemeProvider theme={theme}>
-            <MobileProvider>
-                <Story {...context} />
-            </MobileProvider>
-        </ThemeProvider>
-    );
-};
-
-export const decorators = [withTheme, withMobile, withLang, withContextProvider];
+export const decorators = [withContext];
 
 export const parameters = {
     jsx: {showFunctions: true},