feat: enhance browser translation with dynamic translation hook

.eslintrc.json

@@ -1,12 +1,12 @@
 {
-    "extends": [
-        "next/core-web-vitals",
-        "plugin:storybook/recommended",
-        "prettier" // Should be last to override eslint config.
-    ],
-    "plugins": [],
-    "rules": {
-        "prefer-template": "warn",
-        "jsx-a11y/alt-text": "off"
-    }
+  "extends": [
+    "next/core-web-vitals",
+    "plugin:storybook/recommended",
+    "prettier" // Should be last to override eslint config.
+  ],
+  "plugins": [],
+  "rules": {
+    "prefer-template": "warn",
+    "jsx-a11y/alt-text": "off"
+  }
 }

.storybook/main.ts

@@ -6,66 +6,66 @@ import { mergeConfig } from 'vite'
 let createMockResolverPlugin: any
 
 export default defineConfig({
-    stories: [
-        '../app/**/*.stories.@(js|jsx|mjs|ts|tsx)',
-        '../components/**/*.stories.@(js|jsx|mjs|ts|tsx)',
-        '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
-        '../src/stories/**/*.mdx',
-    ],
-    addons: [
-        'msw-storybook-addon',
-        '@chromatic-com/storybook',
-        '@storybook/addon-docs',
-        '@storybook/addon-vitest',
-    ],
-    framework: '@storybook/nextjs-vite',
-    staticDirs: ['../src/assets'],
-    // Inject base tag for manager (navigation/toolbar) when deploying to /_storybook/
-    managerHead:
-        process.env.CHROMATIC !== 'true'
-            ? (head) => `
+  stories: [
+    '../app/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+    '../components/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+    '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+    '../src/stories/**/*.mdx',
+  ],
+  addons: [
+    'msw-storybook-addon',
+    '@chromatic-com/storybook',
+    '@storybook/addon-docs',
+    '@storybook/addon-vitest',
+  ],
+  framework: '@storybook/nextjs-vite',
+  staticDirs: ['../src/assets'],
+  // Inject base tag for manager (navigation/toolbar) when deploying to /_storybook/
+  managerHead:
+    process.env.CHROMATIC !== 'true'
+      ? (head) => `
         ${head}
         <base href="/_storybook/" />
       `
-            : undefined,
-    // Inject base tag for preview (iframe where components render) when deploying to /_storybook/
-    previewHead:
-        process.env.CHROMATIC !== 'true'
-            ? (head) => `
+      : undefined,
+  // Inject base tag for preview (iframe where components render) when deploying to /_storybook/
+  previewHead:
+    process.env.CHROMATIC !== 'true'
+      ? (head) => `
         ${head}
         <base href="/_storybook/" />
       `
-            : undefined,
-    viteFinal: async (c, { configType }) => {
-        // Dynamically import the plugin to avoid build issues
-        if (!createMockResolverPlugin) {
-            const mockPlugin = await import('./mockResolverPlugin.js')
-            createMockResolverPlugin = mockPlugin.createMockResolverPlugin
-        }
+      : undefined,
+  viteFinal: async (c, { configType }) => {
+    // Dynamically import the plugin to avoid build issues
+    if (!createMockResolverPlugin) {
+      const mockPlugin = await import('./mockResolverPlugin.js')
+      createMockResolverPlugin = mockPlugin.createMockResolverPlugin
+    }
 
-        return mergeConfig(c, {
-            // Only set custom base path for production builds (not for Chromatic)
-            base:
-                configType === 'PRODUCTION' && process.env.CHROMATIC !== 'true'
-                    ? '/_storybook/'
-                    : c.base,
-            server: {
-                allowedHosts: true,
-                hmr: { clientPort: 443 },
-            },
-            plugins: [await createMockResolverPlugin()],
-            resolve: {
-                alias: {
-                    '@/src/hooks/useFirebaseUser': path.resolve(
-                        __dirname,
-                        '../src/hooks/useFirebaseUser.mock.ts'
-                    ),
-                },
-            },
-        })
-    },
+    return mergeConfig(c, {
+      // Only set custom base path for production builds (not for Chromatic)
+      base:
+        configType === 'PRODUCTION' && process.env.CHROMATIC !== 'true'
+          ? '/_storybook/'
+          : c.base,
+      server: {
+        allowedHosts: true,
+        hmr: { clientPort: 443 },
+      },
+      plugins: [await createMockResolverPlugin()],
+      resolve: {
+        alias: {
+          '@/src/hooks/useFirebaseUser': path.resolve(
+            __dirname,
+            '../src/hooks/useFirebaseUser.mock.ts'
+          ),
+        },
+      },
+    })
+  },
 })
 
 function defineConfig<T extends StorybookConfig>(v: T): T {
-    return v
+  return v
 }

.storybook/mockResolverPlugin.js

@@ -6,44 +6,42 @@ import { watch } from '@snomiao/glob-watch'
  * Scans for all .mock.ts files and creates redirect rules
  */
 export async function createMockResolverPlugin() {
-    // Scan for all .mock.ts files
-    const mockMap = new Map()
-    const glob = '**/*.mock.{ts,tsx}'
-    const id = (path) => path.replace(/\.mock(\.tsx?)$/, '')
+  // Scan for all .mock.ts files
+  const mockMap = new Map()
+  const glob = '**/*.mock.{ts,tsx}'
+  const id = (path) => path.replace(/\.mock(\.tsx?)$/, '')
 
-    const _destroy = await watch(
-        glob,
-        ({ added, deleted }) => {
-            added.forEach(({ path }) => {
-                mockMap.set(id(path), path)
-                console.log(`+ Mock ${path}`)
-            })
-            deleted.forEach(({ path }) => {
-                mockMap.delete(id(path))
-                console.log(`- Mock ${path}`)
-            })
-        },
-        {
-            cwd: process.cwd(),
-            ignore: ['node_modules/**'],
-            mode: 'fast-glob',
-        }
-    )
-
-    return {
-        name: 'mock-resolver',
-        enforce: 'pre',
-        resolveId(id, importer) {
-            // Normalize the import ID by removing relative path prefixes
-            const normalizedId = id.replace(/^(?:\.\.\/)+/, '')
-            if (mockMap.has(normalizedId)) {
-                const mockPath = mockMap.get(normalizedId)
-                const resolvedPath = path.resolve(process.cwd(), mockPath)
-                console.log(
-                    `⚒️  Mocking ${mockPath} in ${importer || 'unknown'}`
-                )
-                return resolvedPath
-            }
-        },
+  const _destroy = await watch(
+    glob,
+    ({ added, deleted }) => {
+      added.forEach(({ path }) => {
+        mockMap.set(id(path), path)
+        console.log(`+ Mock ${path}`)
+      })
+      deleted.forEach(({ path }) => {
+        mockMap.delete(id(path))
+        console.log(`- Mock ${path}`)
+      })
+    },
+    {
+      cwd: process.cwd(),
+      ignore: ['node_modules/**'],
+      mode: 'fast-glob',
     }
+  )
+
+  return {
+    name: 'mock-resolver',
+    enforce: 'pre',
+    resolveId(id, importer) {
+      // Normalize the import ID by removing relative path prefixes
+      const normalizedId = id.replace(/^(?:\.\.\/)+/, '')
+      if (mockMap.has(normalizedId)) {
+        const mockPath = mockMap.get(normalizedId)
+        const resolvedPath = path.resolve(process.cwd(), mockPath)
+        console.log(`⚒️  Mocking ${mockPath} in ${importer || 'unknown'}`)
+        return resolvedPath
+      }
+    },
+  }
 }

.storybook/preview.tsx

@@ -4,84 +4,84 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { initialize, mswLoader } from 'msw-storybook-addon'
 import '../src/firebase' // Initialize Firebase for Storybook
 import {
-    mockFirebaseUser,
-    useFirebaseUser,
+  mockFirebaseUser,
+  useFirebaseUser,
 } from '@/src/hooks/useFirebaseUser.mock'
 
 const _mswApp = initialize({
-    onUnhandledRequest: 'bypass',
+  onUnhandledRequest: 'bypass',
 })
 
 const languageName = (lang: string) =>
-    new Intl.DisplayNames(lang, { type: 'language' }).of(lang)
+  new Intl.DisplayNames(lang, { type: 'language' }).of(lang)
 
 const preview: Preview = {
-    parameters: {
-        controls: {
-            matchers: {
-                color: /(background|color)$/i,
-                date: /Date$/i,
-            },
-        },
-        msw: {
-            handlers: [],
-        },
-        docs: {
-            toc: true,
-        },
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
     },
-    beforeEach: async () => {
-        useFirebaseUser.mockReturnValue([mockFirebaseUser, false, undefined])
+    msw: {
+      handlers: [],
     },
-    loaders: [mswLoader],
-    decorators: [
-        (Story) => {
-            const queryClient = new QueryClient({
-                defaultOptions: {
-                    queries: {
-                        retry: false,
-                        staleTime: 0,
-                    },
-                },
-            })
-            return (
-                <QueryClientProvider client={queryClient}>
-                    <Story />
-                </QueryClientProvider>
-            )
-        },
-    ],
-    globalTypes: {
-        darkMode: {
-            description: 'Toggle dark mode',
-            defaultValue: 'dark',
-            toolbar: {
-                icon: 'circlehollow',
-                items: [
-                    { value: 'light', right: '☀️', title: 'Light Mode' },
-                    { value: 'dark', right: '🌙', title: 'Dark Mode' },
-                ],
-            },
-        },
-        locale: {
-            description: 'Internationalization locale',
-            toolbar: {
-                icon: 'globe',
-                items: [
-                    { value: 'en', right: '🇺🇸', title: languageName('en') },
-                    { value: 'es', right: '🇪🇸', title: languageName('es') },
-                    { value: 'fr', right: '🇫🇷', title: languageName('fr') },
-                    { value: 'ja', right: '🇯🇵', title: languageName('ja') },
-                    { value: 'kr', right: '🇰🇷', title: languageName('kr') },
-                    { value: 'zh', right: '🇨🇳', title: languageName('zh') },
-                ],
-            },
+    docs: {
+      toc: true,
+    },
+  },
+  beforeEach: async () => {
+    useFirebaseUser.mockReturnValue([mockFirebaseUser, false, undefined])
+  },
+  loaders: [mswLoader],
+  decorators: [
+    (Story) => {
+      const queryClient = new QueryClient({
+        defaultOptions: {
+          queries: {
+            retry: false,
+            staleTime: 0,
+          },
         },
+      })
+      return (
+        <QueryClientProvider client={queryClient}>
+          <Story />
+        </QueryClientProvider>
+      )
+    },
+  ],
+  globalTypes: {
+    darkMode: {
+      description: 'Toggle dark mode',
+      defaultValue: 'dark',
+      toolbar: {
+        icon: 'circlehollow',
+        items: [
+          { value: 'light', right: '☀️', title: 'Light Mode' },
+          { value: 'dark', right: '🌙', title: 'Dark Mode' },
+        ],
+      },
     },
-    initialGlobals: {
-        locale: 'en',
+    locale: {
+      description: 'Internationalization locale',
+      toolbar: {
+        icon: 'globe',
+        items: [
+          { value: 'en', right: '🇺🇸', title: languageName('en') },
+          { value: 'es', right: '🇪🇸', title: languageName('es') },
+          { value: 'fr', right: '🇫🇷', title: languageName('fr') },
+          { value: 'ja', right: '🇯🇵', title: languageName('ja') },
+          { value: 'kr', right: '🇰🇷', title: languageName('kr') },
+          { value: 'zh', right: '🇨🇳', title: languageName('zh') },
+        ],
+      },
     },
-    tags: ['autodocs'],
+  },
+  initialGlobals: {
+    locale: 'en',
+  },
+  tags: ['autodocs'],
 }
 
 export default preview

.vscode/extensions.json

@@ -1,3 +1,3 @@
 {
-    "recommendations": ["biomejs.biome"]
+  "recommendations": ["biomejs.biome"]
 }