docs: storybook add dark mode and lang (#1077)

Author: AvivAbachi

.storybook/preview.tsx

@@ -1,5 +1,6 @@
 import type { Preview } from '@storybook/react'
-import React from 'react'
+import { Suspense, useEffect } from 'react'
+import { ThemeProvider, useTheme } from 'src/layout/ThemeContext'
 import i18n from 'src/locale/allTranslations'
 
 const preview: Preview = {
@@ -13,15 +14,73 @@ const preview: Preview = {
     },
   },
   decorators: [
-    (Story) => {
-      i18n
+    (Story, context) => {
+      const { locale, darkMode } = context.globals
+
       return (
-        <div style={{ direction: 'rtl' }}>
-          <Story />
-        </div>
+        <Suspense>
+          <ThemeProvider>
+            <StoryBookWrapper locale={locale} darkMode={darkMode}>
+              <Story />
+            </StoryBookWrapper>
+          </ThemeProvider>
+        </Suspense>
       )
     },
   ],
 }
 
+export const globalTypes = {
+  locale: {
+    name: 'Locale',
+    description: 'Internationalization locale',
+    defaultValue: 'he',
+    toolbar: {
+      icon: 'globe',
+      items: [
+        { value: 'he', title: 'עברית' },
+        { value: 'en', title: 'English' },
+      ],
+      showName: true,
+    },
+  },
+  darkMode: {
+    name: 'Dark Mode',
+    description: 'Enable dark mode',
+    defaultValue: false,
+    toolbar: {
+      icon: 'paintbrush',
+      items: [
+        { value: false, title: 'Light' },
+        { value: true, title: 'Dark' },
+      ],
+      showName: true,
+    },
+  },
+}
+
 export default preview
+
+const StoryBookWrapper = ({
+  darkMode,
+  locale,
+  children,
+}: {
+  darkMode?: boolean
+  locale?: string
+  children: React.ReactNode
+}) => {
+  const { isDarkTheme, toggleTheme } = useTheme()
+
+  useEffect(() => {
+    if (isDarkTheme !== darkMode) {
+      toggleTheme()
+    }
+  }, [darkMode, isDarkTheme, toggleTheme])
+
+  useEffect(() => {
+    i18n.changeLanguage(locale)
+  }, [locale])
+
+  return children
+}