feat: add modals stories

.eslintrc.js

@@ -51,4 +51,14 @@ module.exports = {
     globals: {
         __IS_DEV__: true,
     },
+    overrides: [
+        {
+            files: ['**/src/**/*.{test,stories}.{ts,tsx}'],
+            rules: {
+                'i18next/no-literal-string': 'off',
+                'max-len': 'off',
+            },
+        },
+    ],
+
 };

src/app/providers/ThemeProvider/ui/ThemeProvider.tsx

@@ -3,8 +3,14 @@ import { LOCAL_STORAGE_THEME_KEY, Theme, ThemeContext } from '../lib/ThemeContex
 
 const defaultTheme = localStorage.getItem(LOCAL_STORAGE_THEME_KEY) as Theme || Theme.LIGHT;
 
-const ThemeProvider: FC = ({ children }) => {
-    const [theme, setTheme] = useState<Theme>(defaultTheme);
+interface ThemeProviderProps {
+	initialTheme?: Theme
+}
+
+const ThemeProvider: FC<ThemeProviderProps> = (props) => {
+    const { initialTheme, children } = props;
+
+    const [theme, setTheme] = useState<Theme>(initialTheme || defaultTheme);
 
     const defaultProps = useMemo(() => ({
         theme,

src/shared/config/i18n/i18n.ts

@@ -10,7 +10,8 @@ i18n
     .use(initReactI18next)
     .init({
         fallbackLng: 'en',
-        debug: __IS_DEV__,
+        // debug: __IS_DEV__,
+        debug: false,
 
         interpolation: {
             escapeValue: false, // not needed for react as it escapes by default

src/shared/config/storybook/ThemeDecorator/ThemeDecorator.tsx

@@ -1,8 +1,10 @@
 import { Story } from '@storybook/react';
-import { Theme } from 'app/providers/ThemeProvider';
+import { Theme, ThemeProvider } from 'app/providers/ThemeProvider';
 
 export const ThemeDecorator = (theme: Theme) => (StoryComponent: Story) => (
-    <div className={`app ${theme}`}>
-        <StoryComponent />
-    </div>
+    <ThemeProvider initialTheme={theme}>
+        <div className={`app ${theme}`}>
+            <StoryComponent />
+        </div>
+    </ThemeProvider>
 );

src/shared/ui/Modal/Modal.stories.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Modal } from 'shared/ui/Modal/Modal';
+import { ThemeDecorator } from 'shared/config/storybook/ThemeDecorator/ThemeDecorator';
+import { Theme } from 'app/providers/ThemeProvider';
+
+export default {
+    title: 'shared/Modal',
+    component: Modal,
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+} as ComponentMeta<typeof Modal>;
+
+const Template: ComponentStory<typeof Modal> = (args) => <Modal {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {
+    children: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ab\n'
+		+ '                accusantium aliquid architecto autem consequuntur debitis et facere,\n'
+		+ '                laudantium modi nostrum nulla obcaecati odit quas quod sapiente,\n'
+		+ '                veritatis? Illo, veritatis.',
+    isOpen: true,
+};
+
+export const Dark = Template.bind({});
+Dark.args = {
+    children: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ab\n'
+	+ '                accusantium aliquid architecto autem consequuntur debitis et facere,\n'
+	+ '                laudantium modi nostrum nulla obcaecati odit quas quod sapiente,\n'
+	+ '                veritatis? Illo, veritatis.',
+    isOpen: true,
+};
+
+Dark.decorators = [ThemeDecorator(Theme.DARK)];