Merge branch 'main' into optimize-searching-page-ux

Author: ghostdevv

.github/workflows/chromatic.yml

@@ -37,7 +37,7 @@ jobs:
         run: pnpm install
 
       - name: 🧪 Run Chromatic Visual and Accessibility Tests
-        uses: chromaui/action@0794e6939fe40ce46a88963f818092afc427da5b # v15.3.0
+        uses: chromaui/action@f191a0224b10e1a38b2091cefb7b7a2337009116 # v16.0.0
         env:
           CHROMATIC_BRANCH: ${{ github.event.pull_request.head.ref || github.ref_name }}
           CHROMATIC_SHA: ${{ github.event.pull_request.head.sha || github.sha }}

.github/workflows/ci.yml

@@ -111,14 +111,14 @@ jobs:
         run: pnpm vp test --project nuxt --coverage --reporter=default --reporter=junit --outputFile=test-report.junit.xml
 
       - name: ⬆︎ Upload coverage reports to Codecov
-        uses: codecov/codecov-action@671740ac38dd9b0130fbe1cec585b89eea48d3de # v5
+        uses: codecov/codecov-action@1af58845a975a7985b0beb0cbe6fbbb71a41dbad # v5
         with:
           report_type: test_results
         env:
           CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
 
       - name: ⬆︎ Upload coverage reports to Codecov
-        uses: codecov/codecov-action@671740ac38dd9b0130fbe1cec585b89eea48d3de # v5
+        uses: codecov/codecov-action@1af58845a975a7985b0beb0cbe6fbbb71a41dbad # v5
         env:
           CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
 

.storybook/main.ts

@@ -1,8 +1,13 @@
 import type { StorybookConfig } from '@storybook-vue/nuxt'
 
 const config = {
-  stories: ['../app/**/*.stories.@(js|ts)'],
-  addons: ['@storybook/addon-a11y', '@storybook/addon-docs', '@storybook/addon-themes'],
+  stories: ['../.storybook/*.mdx', '../app/**/*.stories.@(js|ts)'],
+  addons: [
+    '@storybook/addon-a11y',
+    '@storybook/addon-docs',
+    '@storybook/addon-themes',
+    'storybook-i18n',
+  ],
   framework: '@storybook-vue/nuxt',
   staticDirs: ['./.public'],
   features: {
@@ -11,6 +16,33 @@ const config = {
   async viteFinal(newConfig) {
     newConfig.plugins ??= []
 
+    // Bridge compatibility between Storybook v10 core and v9 @storybook-vue/nuxt
+    // v10 expects module federation globals that v9 doesn't provide
+    newConfig.plugins.push({
+      name: 'storybook-v10-compat',
+      transformIndexHtml: {
+        order: 'pre',
+        handler(html) {
+          const script = `
+<script>
+  // Minimal shims for Storybook v10 module federation system
+  // These will be replaced when Storybook runtime loads
+  window.__STORYBOOK_MODULE_GLOBAL__ = { global: window };
+  window.__STORYBOOK_MODULE_CLIENT_LOGGER__ = {
+    deprecate: console.warn.bind(console, '[deprecated]'),
+    once: console.log.bind(console),
+    logger: console
+  };
+  window.__STORYBOOK_MODULE_CHANNELS__ = {
+    Channel: class { on() {} off() {} emit() {} once() {} },
+    createBrowserChannel: () => new window.__STORYBOOK_MODULE_CHANNELS__.Channel()
+  };
+</script>`
+          return html.replace(/<script>/, script + '<script>')
+        },
+      },
+    })
+
     newConfig.plugins.push({
       name: 'ignore-internals',
       transform(_, id) {

.storybook/manager.ts

@@ -1,11 +1,19 @@
 import { addons } from 'storybook/manager-api'
-import { create } from 'storybook/theming'
 
-const npmxTheme = create({
-  brandTitle: 'npmx Storybook',
-  brandImage: '/npmx-storybook.svg',
-})
+import npmxDark from './theme'
 
 addons.setConfig({
-  theme: npmxTheme,
+  theme: npmxDark,
+  layoutCustomisations: {
+    showToolbar: (state, defaultValue) => {
+      if (state.viewMode === 'docs' && state.storyId) {
+        const story = state.index?.[state.storyId]
+        const tags = story?.tags || []
+        if (tags.includes('hide-toolbar')) {
+          return false
+        }
+      }
+      return defaultValue
+    },
+  },
 })

.storybook/preview-head.html

@@ -0,0 +1,6 @@
+<style>
+  /* Override docs story canvas background to match npmx theme */
+  .docs-story {
+    background-color: var(--bg, oklch(0.171 0 0)) !important;
+  }
+</style>

.storybook/preview.ts

@@ -1,9 +1,12 @@
 import type { Preview } from '@storybook-vue/nuxt'
 import { withThemeByDataAttribute } from '@storybook/addon-themes'
+import { addons } from 'storybook/preview-api'
 import { currentLocales } from '../config/i18n'
 import { fn } from 'storybook/test'
 import { ACCENT_COLORS } from '../shared/utils/constants'
 
+import npmxDark from './theme'
+
 // related: https://github.com/npmx-dev/npmx.dev/blob/1431d24be555bca5e1ae6264434d49ca15173c43/test/nuxt/setup.ts#L12-L26
 // Stub Nuxt specific globals
 // @ts-expect-error - dynamic global name
@@ -17,6 +20,12 @@ globalThis['__NUXT_COLOR_MODE__'] ??= {
 // @ts-expect-error - dynamic global name
 globalThis.defineOgImageComponent = fn()
 
+// Subscribe to locale changes from storybook-i18n addon (once, outside decorator)
+let currentI18nInstance: any = null
+addons.getChannel().on('LOCALE_CHANGED', (newLocale: string) => {
+  currentI18nInstance?.setLocale(newLocale)
+})
+
 const preview: Preview = {
   parameters: {
     controls: {
@@ -25,25 +34,22 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    docs: {
+      theme: npmxDark,
+    },
+  },
+  initialGlobals: {
+    locale: 'en-US',
+    locales: currentLocales.reduce(
+      (acc, locale) => {
+        acc[locale.code] = locale.name
+        return acc
+      },
+      {} as Record<string, string>,
+    ),
   },
   // Provides toolbars to switch things like theming and language
   globalTypes: {
-    locale: {
-      name: 'Locale',
-      description: 'UI language',
-      defaultValue: 'en-US',
-      toolbar: {
-        icon: 'globe',
-        dynamicTitle: true,
-        items: [
-          // English is at the top so it's easier to reset to it
-          { value: 'en-US', title: 'English (US)' },
-          ...currentLocales
-            .filter(locale => locale.code !== 'en-US')
-            .map(locale => ({ value: locale.code, title: locale.name })),
-        ],
-      },
-    },
     accentColor: {
       name: 'Accent Color',
       description: 'Accent color',
@@ -70,9 +76,9 @@ const preview: Preview = {
       attributeName: 'data-theme',
     }),
     (story, context) => {
-      const { locale, accentColor } = context.globals as {
-        locale: string
+      const { accentColor, locale } = context.globals as {
         accentColor?: string
+        locale?: string
       }
 
       // Set accent color from globals
@@ -84,14 +90,12 @@ const preview: Preview = {
 
       return {
         template: '<story />',
-        // Set locale from globals
         created() {
-          if (this.$i18n) {
-            this.$i18n.setLocale(locale)
-          }
-        },
-        updated() {
-          if (this.$i18n) {
+          // Store i18n instance for LOCALE_CHANGED events
+          currentI18nInstance = this.$i18n
+
+          // Set initial locale when component is created
+          if (locale && this.$i18n) {
             this.$i18n.setLocale(locale)
           }
         },

.storybook/storybook-welcome.mdx

@@ -0,0 +1,7 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+ 
+<Meta title="Welcome" tags={['hide-toolbar']}/>
+
+# Welcome
+
+Welcome to the npmx Storybook.

.storybook/theme.ts

@@ -0,0 +1,13 @@
+import { create } from 'storybook/theming'
+
+const npmxDark = create({
+  base: 'dark',
+
+  brandTitle: 'npmx Storybook',
+  brandImage: '/npmx-storybook.svg',
+
+  // UI
+  appContentBg: '#101010', // oklch(0.171 0 0)
+})
+
+export default npmxDark

.vscode/settings.json

@@ -3,7 +3,7 @@
   "editor.formatOnSave": true,
   "i18n-ally.keystyle": "nested",
   "i18n-ally.localesPaths": ["./i18n/locales"],
-  "typescript.tsdk": "node_modules/typescript/lib",
+  "js/ts.tsdk.path": "node_modules/typescript/lib",
   "explorer.fileNesting.enabled": true,
   "explorer.fileNesting.patterns": {
     "*.vue": "${capture}.stories.ts"

CONTRIBUTING.md

@@ -752,6 +752,23 @@ pnpm test:browser:ui     # Run with Playwright UI
 
 Make sure to read about [Playwright best practices](https://playwright.dev/docs/best-practices) and don't rely on classes/IDs but try to follow user-replicable behaviour (like selecting an element based on text content instead).
 
+#### Updating snapshots
+
+Some tests use image snapshots that must match the CI environment (Linux). If you need to update them, and aren't running Linux, you can use Docker to run in the same environment:
+
+```bash
+docker run --rm \
+  -e CI=true \
+  -e NODE_OPTIONS="--max-old-space-size=4096" \
+  -v $(pwd):/work \
+  -w /work \
+  mcr.microsoft.com/playwright:v1.58.2-noble \
+  sh -c "npm install -g pnpm && pnpm install && pnpm vp run build:test && pnpm vp run test:browser:prebuilt --update-snapshots"
+```
+
+> [!NOTE]
+> If the build runs out of memory, increase `--max-old-space-size` to `8192`.
+
 ### Test fixtures (mocking external APIs)
 
 E2E tests use a fixture system to mock external API requests, ensuring tests are deterministic and don't hit real APIs. This is handled at two levels: