Merge branch 'main' into fix/blog-ui-and-comment-redesign

Author: Adebesin-Cell

.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/Chart/PatternSlot.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+/**
+ * This component is designed to create various patterns from seeds, and included
+ * inside vue-data-ui charts in the #pattern slots.
+ * Using patterns helps users with vision deficency (like achromatopsia) to distinguish
+ * series in the context of data visualisation.
+ */
+import { computed } from 'vue'
+import { createSeededSvgPattern, type ChartPatternSlotProps } from '~/utils/charts'
+
+const props = defineProps<ChartPatternSlotProps>()
+
+const pattern = computed(() =>
+  createSeededSvgPattern(props.seed, {
+    foregroundColor: props.foregroundColor,
+    backgroundColor: props.color ?? props.fallbackColor,
+    minimumSize: props.minSize,
+    maximumSize: props.maxSize,
+  }),
+)
+</script>
+
+<template>
+  <pattern
+    :id
+    patternUnits="userSpaceOnUse"
+    :width="pattern.width"
+    :height="pattern.height"
+    :patternTransform="`rotate(${pattern.rotation})`"
+    v-html="pattern.contentMarkup"
+  />
+</template>

app/components/Compare/FacetBarChart.vue

@@ -3,7 +3,9 @@ import { ref, computed } from 'vue'
 import { VueUiHorizontalBar } from 'vue-data-ui/vue-ui-horizontal-bar'
 import type { VueUiHorizontalBarConfig, VueUiHorizontalBarDatasetItem } from 'vue-data-ui'
 import { getFrameworkColor, isListedFramework } from '~/utils/frameworks'
+import { createChartPatternSlotMarkup } from '~/utils/charts'
 import { drawSmallNpmxLogoAndTaglineWatermark } from '~/composables/useChartWatermark'
+
 import {
   loadFile,
   insertLineBreaks,
@@ -213,13 +215,40 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
           backdropFilter: false,
           backgroundColor: 'transparent',
           customFormat: ({ datapoint }) => {
-            const name = datapoint?.name?.replace(/\n/g, '<br>')
+            const name = datapoint?.name?.replace(/\n/g, '<br>') ?? ''
+            const safeSeriesIndex = (datapoint?.absoluteIndex as number) ?? 0
+            const patternId = `tooltip-pattern-${safeSeriesIndex}`
+            const usePattern = safeSeriesIndex !== 0
+
+            const patternMarkup = usePattern
+              ? createChartPatternSlotMarkup({
+                  id: patternId,
+                  seed: safeSeriesIndex,
+                  foregroundColor: colors.value.bg!,
+                  fallbackColor: 'transparent',
+                  maxSize: 24,
+                  minSize: 16,
+                })
+              : ''
+
+            const markerMarkup = usePattern
+              ? `
+              <rect x="0" y="0" width="20" height="20" rx="3" fill="${datapoint?.color ?? 'transparent'}" />
+              <rect x="0" y="0" width="20" height="20" rx="3" fill="url(#${patternId})" />
+            `
+              : `
+              <rect x="0" y="0" width="20" height="20" rx="3" fill="${datapoint?.color ?? 'transparent'}" />
+            `
+
             return `
             <div class="font-mono p-3 border border-border rounded-md bg-[var(--bg)]/10 backdrop-blur-md">
               <div class="grid grid-cols-[12px_minmax(0,1fr)_max-content] items-center gap-x-3">
                 <div class="w-3 h-3">
-                  <svg viewBox="0 0 2 2" class="w-full h-full">
-                    <rect x="0" y="0" width="2" height="2" rx="0.3" fill="${datapoint?.color}" />
+                  <svg viewBox="0 0 20 20" class="w-full h-full" aria-hidden="true">
+                    <defs>
+                      ${patternMarkup}
+                    </defs>
+                    ${markerMarkup}
                   </svg>
                 </div>
                 <span class="text-3xs uppercase tracking-wide text-[var(--fg)]/70 truncate">
@@ -230,7 +259,7 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
                 </span>
               </div>
             </div>
-            `
+          `
           },
         },
       },
@@ -243,8 +272,19 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
   <div class="font-mono facet-bar">
     <ClientOnly v-if="dataset.length">
       <VueUiHorizontalBar :key="chartKey" :dataset :config class="[direction:ltr]">
+        <template #pattern="{ patternId, seriesIndex }">
+          <ChartPatternSlot
+            v-if="seriesIndex != 0"
+            :id="patternId"
+            :seed="seriesIndex"
+            :foreground-color="colors.bg!"
+            fallback-color="transparent"
+            :max-size="24"
+            :min-size="16"
+          />
+        </template>
+
         <template #svg="{ svg }">
-          <!-- Inject npmx logo & tagline during SVG and PNG print -->
           <g
             v-if="svg.isPrintingSvg || svg.isPrintingImg"
             v-html="
@@ -261,15 +301,19 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
           <span v-if="isOpen" class="i-lucide:x w-6 h-6" aria-hidden="true" />
           <span v-else class="i-lucide:ellipsis-vertical w-6 h-6" aria-hidden="true" />
         </template>
+
         <template #optionCsv>
           <span class="text-fg-subtle font-mono pointer-events-none">CSV</span>
         </template>
+
         <template #optionImg>
           <span class="text-fg-subtle font-mono pointer-events-none">PNG</span>
         </template>
+
         <template #optionSvg>
           <span class="text-fg-subtle font-mono pointer-events-none">SVG</span>
         </template>
+
         <template #optionAltCopy>
           <span
             class="w-6 h-6"

app/components/Link/Link.stories.ts

@@ -5,14 +5,17 @@ const meta = {
   component: LinkBase,
   args: {
     to: '/',
-    default: 'Click me',
   },
 } satisfies Meta<typeof LinkBase>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {}
+export const Default: Story = {
+  args: {
+    default: 'Click me',
+  },
+}
 
 export const ExternalLink: Story = {
   args: {
@@ -75,16 +78,28 @@ export const WithIconButton: Story = {
   args: {
     variant: 'button-primary',
     classicon: 'i-lucide:copy',
-    default: 'Copy',
   },
+  render: args => ({
+    components: { LinkBase },
+    setup() {
+      return { args }
+    },
+    template: `<LinkBase v-bind="args">{{ $t("package.readme.copy_as_markdown") }}</LinkBase>`,
+  }),
 }
 
 export const WithKeyboardShortcut: Story = {
   args: {
     variant: 'button-secondary',
     ariaKeyshortcuts: 's',
-    default: 'Search',
   },
+  render: args => ({
+    components: { LinkBase },
+    setup() {
+      return { args }
+    },
+    template: `<LinkBase v-bind="args">{{ $t("search.button") }}</LinkBase>`,
+  }),
 }
 
 export const BlockLink: Story = {