feat(storybook): add locale selction & theme selection

.storybook/main.ts

@@ -7,7 +7,8 @@ const config: StorybookConfig = {
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-onboarding',
-    '@storybook/addon-interactions'
+    '@storybook/addon-interactions',
+    'storybook-dark-mode'
   ],
   webpackFinal: async (config) => {
     if (config.resolve) {

.storybook/preview.ts

-import '@/styles/globals.css';
-import type { Preview } from '@storybook/react';
-
-const preview: Preview = {
-  parameters: {
-    actions: { argTypesRegex: '^on[A-Z].*' },
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i
-      }
-    }
-  }
-};
-
-export default preview;

.storybook/preview.tsx

+import React from 'react';
+import { themes } from '@storybook/theming';
+import { NextUIProvider } from '@nextui-org/react';
+
+import './style.css';
+import '@/styles/globals.css';
+
+import type { Preview } from '@storybook/react';
+
+const decorators: Preview['decorators'] = [
+  (Story, { globals: { locale, disableAnimation } }) => {
+    const direction =
+      // @ts-ignore
+      locale && new Intl.Locale(locale)?.textInfo?.direction === 'rtl'
+        ? 'rtl'
+        : undefined;
+
+    return (
+      <NextUIProvider locale={locale} disableAnimation={disableAnimation}>
+        <div className="bg-dark" lang={locale} dir={direction}>
+          <Story />
+        </div>
+      </NextUIProvider>
+    );
+  }
+];
+
+const parameters: Preview['parameters'] = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/i
+    }
+  },
+  darkMode: {
+    current: 'dark',
+    stylePreview: true,
+    darkClass: 'dark',
+    lightClass: 'light',
+    classTarget: 'html',
+    dark: {
+      ...themes.dark,
+      appBg: '#161616',
+      barBg: 'black',
+      background: 'black',
+      appContentBg: 'black',
+      appBorderRadius: 14
+    },
+    light: {
+      ...themes.light
+    }
+  }
+};
+
+const globalTypes: Preview['globalTypes'] = {
+  locale: {
+    toolbar: {
+      icon: 'globe',
+      items: ['en', 'ar'].map((locale) => ({
+        value: locale,
+        title: new Intl.DisplayNames(undefined, { type: 'language' }).of(
+          locale
+        ),
+        right:
+          // @ts-ignore
+          new Intl.Locale(locale)?.textInfo?.direction === 'rtl'
+            ? 'Right to Left'
+            : undefined
+      }))
+    }
+  },
+  disableAnimation: {
+    name: 'Disable Animation',
+    description: 'Disable all animations in the stories',
+    toolbar: {
+      icon: 'photodrag',
+      items: [
+        { value: true, title: 'True' },
+        { value: false, title: 'False' }
+      ]
+    }
+  }
+};
+
+const preview: Preview = {
+  decorators,
+  parameters,
+  globalTypes
+};
+
+export default preview;

.storybook/style.css

+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+h1 {
+  @apply text-4xl font-bold !text-foreground;
+}
+
+h2 {
+  @apply text-2xl font-bold !text-foreground !border-none;
+}
+
+h3 {
+  @apply text-xl font-bold !text-neutral-600;
+}
+
+.dark .sbdocs-wrapper,
+.dark .sbdocs-preview {
+  background-color: #000000;
+  color: #fff;
+}
+
+.dark .sbdocs-preview {
+  border: 1px solid #292929;
+}
+
+.dark .docblock-code-toggle {
+  background: transparent;
+  color: #d4d4d4;
+}
+
+.dark div:has(.docblock-code-toggle) {
+  background: transparent;
+}
+
+.dark .os-theme-dark {
+  background: #161616;
+  color: #fff;
+}
+
+.dark .sbdocs-title {
+  color: #fff;
+}
+
+.dark .docblock-argstable-head {
+  background: #161616;
+}
+
+.dark .docblock-argstable-head th {
+  color: #bcbcbc;
+  border-bottom: 1px solid #292929 !important;
+}
+
+.dark .docblock-argstable-head th span {
+  color: #bcbcbc;
+}
+
+.dark #docs-root tbody td {
+  background: #161616 !important;
+  color: #bcbcbc !important;
+}
+
+.dark #docs-root tbody tr:first-child td:first-child {
+  border-top-left-radius: 0 !important;
+}
+
+.dark #docs-root tbody tr:first-child td:last-child {
+  border-top-right-radius: 0 !important;
+}
+
+.dark #docs-root tbody tr:not(:first-child) {
+  border-top: 1px solid #292929 !important;
+}

package.json

@@ -36,6 +36,7 @@
     "@storybook/nextjs": "^8.1.4",
     "@storybook/react": "8.1.4",
     "@storybook/test": "8.1.4",
+    "@storybook/theming": "^8.1.5",
     "@types/eslint": "^8.56.10",
     "cross-env": "^7.0.3",
     "cz-conventional-changelog": "^3.3.0",
@@ -46,6 +47,7 @@
     "prettier": "^3.2.5",
     "pretty-quick": "^4.0.0",
     "storybook": "^8.1.4",
+    "storybook-dark-mode": "^4.0.1",
     "webpack-bundle-analyzer": "^4.10.2"
   }
 }

pnpm-lock.yaml

@@ -78,6 +78,9 @@ importers:
       '@storybook/test':
         specifier: 8.1.4
         version: 8.1.4
+      '@storybook/theming':
+        specifier: ^8.1.5
+        version: 8.1.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@types/eslint':
         specifier: ^8.56.10
         version: 8.56.10
@@ -108,6 +111,9 @@ importers:
       storybook:
         specifier: ^8.1.4
         version: 8.1.4(@babel/preset-env@7.24.6(@babel/core@7.24.6))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      storybook-dark-mode:
+        specifier: ^4.0.1
+        version: 4.0.1(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       webpack-bundle-analyzer:
         specifier: ^4.10.2
         version: 4.10.2
@@ -2625,6 +2631,9 @@ packages:
   '@storybook/client-logger@8.1.4':
     resolution: {integrity: sha512-I0PqDoNZf4rqrJYwFHhCwuXumpxvzyTzI5qI5R2JT93i49QShI3pLXY31C9VemVBJmS+pBWVOm6RTIdkQiKVWw==}
 
+  '@storybook/client-logger@8.1.5':
+    resolution: {integrity: sha512-zd+aENXnOHsxBATppELmhw/UywLzCxQjz/8i/xkUjeTRB4Ggp0hJlOUdJUEdIJz631ydyytfvM70ktBj9gMl1w==}
+
   '@storybook/codemod@8.1.4':
     resolution: {integrity: sha512-glPwKFc07h3h4ZhakEZIF/8fq3fGGM19hpB+RZRHU3dz4NL/TiZXwboxa61wNZe1ehWqbGDaecwANK45DWsNuA==}
 
@@ -2766,6 +2775,17 @@ packages:
       react-dom:
         optional: true
 
+  '@storybook/theming@8.1.5':
+    resolution: {integrity: sha512-E4z1t49fMbVvd/t2MSL0Ecp5zbqsU/QfWBX/eorJ+m+Xc9skkwwG5qf/FnP9x4RZ9KaX8U8+862t0eafVvf4Tw==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
   '@storybook/types@8.1.4':
     resolution: {integrity: sha512-QfTJg5Hu3c0eiD38Z75bZsw0iCIpruOTGV5O65vCpNun7D6WUyyMM0aUJN3ytujGiHfjsWVgiSe+WoHxdy/fEA==}
 
@@ -6349,6 +6369,9 @@ packages:
   store2@2.14.3:
     resolution: {integrity: sha512-4QcZ+yx7nzEFiV4BMLnr/pRa5HYzNITX2ri0Zh6sT9EyQHbBHacC6YigllUPU9X3D0f/22QCgfokpKs52YRrUg==}
 
+  storybook-dark-mode@4.0.1:
+    resolution: {integrity: sha512-9l3qY8NdgwZnY+NlO1XHB3eUb6FmZo9GazJeUSeFkjRqwA5FmnMSeq0YVqEOqfwniM/TvQwOiTYd5g/hC2wugA==}
+
   storybook@8.1.4:
     resolution: {integrity: sha512-HPrpoRGmxNfseGeWu06AQbEifI+uZq4yC1c89BFRJ8/llkJwCCCreLGHULZqw4YHylGkUXxhg0Hv36wJGCqxCw==}
     hasBin: true
@@ -10656,6 +10679,10 @@ snapshots:
     dependencies:
       '@storybook/global': 5.0.0
 
+  '@storybook/client-logger@8.1.5':
+    dependencies:
+      '@storybook/global': 5.0.0
+
   '@storybook/codemod@8.1.4':
     dependencies:
       '@babel/core': 7.24.6
@@ -11122,6 +11149,16 @@ snapshots:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
+  '@storybook/theming@8.1.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.3.1)
+      '@storybook/client-logger': 8.1.5
+      '@storybook/global': 5.0.0
+      memoizerific: 1.11.3
+    optionalDependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   '@storybook/types@8.1.4':
     dependencies:
       '@storybook/channels': 8.1.4
@@ -15190,6 +15227,22 @@ snapshots:
 
   store2@2.14.3: {}
 
+  storybook-dark-mode@4.0.1(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      '@storybook/components': 8.1.4(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@storybook/core-events': 8.1.4
+      '@storybook/global': 5.0.0
+      '@storybook/icons': 1.2.9(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@storybook/manager-api': 8.1.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@storybook/theming': 8.1.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      fast-deep-equal: 3.1.3
+      memoizerific: 1.11.3
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+      - react
+      - react-dom
+
   storybook@8.1.4(@babel/preset-env@7.24.6(@babel/core@7.24.6))(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       '@storybook/cli': 8.1.4(@babel/preset-env@7.24.6(@babel/core@7.24.6))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)