fix: move all storybook decorators into one (#14)

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

.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},