Merge branch 'main' into refactor/remove-npms

Author: trueberryless

.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"

app/components/AppFooter.vue

@@ -35,6 +35,9 @@ const closeModal = () => modalRef.value?.close?.()
             <LinkBase :to="{ name: 'accessibility' }">
               {{ $t('a11y.footer_title') }}
             </LinkBase>
+            <LinkBase :to="{ name: 'translation-status' }">
+              {{ $t('translation_status.title') }}
+            </LinkBase>
             <button
               type="button"
               class="cursor-pointer group inline-flex gap-x-1 items-center justify-center underline-offset-[0.2rem] underline decoration-1 decoration-fg/30 font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200"

app/components/AppHeader.vue

@@ -84,6 +84,14 @@ const mobileLinks = computed<NavigationConfigWithGroups>(() => [
         external: false,
         iconClass: 'i-custom:a11y',
       },
+      {
+        name: 'Translation Status',
+        label: $t('translation_status.title'),
+        to: { name: 'translation-status' },
+        type: 'link',
+        external: false,
+        iconClass: 'i-lucide:languages',
+      },
     ],
   },
   {
@@ -235,16 +243,18 @@ onKeyStroke(
             {{ env === 'release' ? 'alpha' : env }}
           </span>
         </NuxtLink>
-        <NuxtLink
-          v-if="prNumber"
-          :to="`https://github.com/npmx-dev/npmx.dev/pull/${prNumber}`"
-          :aria-label="`Open GitHub pull request ${prNumber}`"
-        >
-          <span class="text-xs px-1.5 py-0.5 rounded badge-green font-sans font-medium ms-2">
-            PR #{{ prNumber }}
-          </span>
-        </NuxtLink>
       </div>
+
+      <NuxtLink
+        v-if="showLogo && !isSearchExpanded && prNumber"
+        :to="`https://github.com/npmx-dev/npmx.dev/pull/${prNumber}`"
+        :aria-label="$t('header.pr', { prNumber })"
+      >
+        <span class="text-xs px-1.5 py-0.5 rounded badge-green font-sans font-medium">
+          PR #{{ prNumber }}
+        </span>
+      </NuxtLink>
+
       <!-- Spacer when logo is hidden on desktop -->
       <span v-else class="hidden sm:block w-1" />
 

app/components/BackButton.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const router = useRouter()
+const canGoBack = useCanGoBack()
+</script>
+
+<template>
+  <button
+    v-if="canGoBack"
+    type="button"
+    class="inline-flex items-center gap-2 p-1.5 -mx-1.5 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"
+    @click="router.back()"
+  >
+    <span class="i-lucide:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
+    <span class="sr-only sm:not-sr-only">{{ $t('nav.back') }}</span>
+  </button>
+</template>