Merge branch 'npmx-dev:main' into feat-i18n/adding-dutch

Author: WilcoSp

.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@57e3a136b779b570ffcdbf80b3bdc90e7fab3de2 # v6
         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@57e3a136b779b570ffcdbf80b3bdc90e7fab3de2 # v6
         env:
           CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
 

.github/workflows/welcome.yml .github/workflows/welcome-close.yml.github/workflows/welcome.yml renamed to .github/workflows/welcome-close.yml

@@ -1,4 +1,4 @@
-name: welcome
+name: Claim Contributor Message
 
 on:
   pull_request_target:

.github/workflows/welcome-open.yml

@@ -0,0 +1,32 @@
+name: Welcome Message
+
+on:
+  pull_request_target:
+    branches: [main]
+    types: [opened]
+
+permissions:
+  pull-requests: write
+
+jobs:
+  greeting:
+    name: Greet First-Time Contributors
+    if: github.repository == 'npmx-dev/npmx.dev'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: zephyrproject-rtos/action-first-interaction@58853996b1ac504b8e0f6964301f369d2bb22e5c
+        with:
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          pr-opened-message: |
+            Hello! Thank you for opening your **first PR** to npmx, @${{ github.event.pull_request.user.login }}! 🚀
+
+            Here’s what will happen next:
+
+            1. Our GitHub bots will run to check your changes.
+               If they spot any issues you will see some error messages on this PR.
+               Don’t hesitate to ask any questions if you’re not sure what these mean!
+
+            2. In a few minutes, you’ll be able to see a preview of your changes on Vercel
+
+            3. One or more of our maintainers will take a look and may ask you to make changes.
+               We try to be responsive, but don’t worry if this takes a few days.

.storybook/main.ts

@@ -1,16 +1,48 @@
 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'],
+  staticDirs: ['./.public', { from: '../public', to: '/' }],
   features: {
     backgrounds: false,
   },
   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,63 @@
+<style>
+  /* Load Geist fonts to match the production app (normally handled by @nuxt/fonts,
+     which is disabled in Storybook at this time) */
+  @font-face {
+    font-family: 'Geist';
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+    src: url('/fonts/Geist-Regular.ttf') format('truetype');
+  }
+  @font-face {
+    font-family: 'Geist';
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+    src: url('/fonts/Geist-Medium.ttf') format('truetype');
+  }
+  @font-face {
+    font-family: 'Geist';
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+    src: url('/fonts/Geist-SemiBold.ttf') format('truetype');
+  }
+  @font-face {
+    font-family: 'Geist';
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+    src: url('/fonts/Geist-Bold.ttf') format('truetype');
+  }
+  @font-face {
+    font-family: 'Geist Mono';
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+    src: url('/fonts/GeistMono-Regular.ttf') format('truetype');
+  }
+  @font-face {
+    font-family: 'Geist Mono';
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+    src: url('/fonts/GeistMono-Medium.ttf') format('truetype');
+  }
+  @font-face {
+    font-family: 'Geist Mono';
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+    src: url('/fonts/GeistMono-Bold.ttf') format('truetype');
+  }
+  html {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+  }
+
+  /* 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