From b4cfb3d2aba76b2bf3b183b6ad38c1486740e365 Mon Sep 17 00:00:00 2001 From: cylewaitforit Date: Thu, 12 Mar 2026 08:39:50 -0500 Subject: [PATCH 1/4] docs(ui): add dark theme for storybook docs --- .storybook/manager.ts | 8 ++------ .storybook/preview-head.html | 6 ++++++ .storybook/preview.ts | 5 +++++ .storybook/theme.ts | 13 +++++++++++++ 4 files changed, 26 insertions(+), 6 deletions(-) create mode 100644 .storybook/preview-head.html create mode 100644 .storybook/theme.ts diff --git a/.storybook/manager.ts b/.storybook/manager.ts index 023e4fd21d..b0934a3f4e 100644 --- a/.storybook/manager.ts +++ b/.storybook/manager.ts @@ -1,11 +1,7 @@ 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, }) diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html new file mode 100644 index 0000000000..49c5636054 --- /dev/null +++ b/.storybook/preview-head.html @@ -0,0 +1,6 @@ + diff --git a/.storybook/preview.ts b/.storybook/preview.ts index 3242f7788a..0d62d33be0 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -4,6 +4,8 @@ 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 @@ -25,6 +27,9 @@ const preview: Preview = { date: /Date$/i, }, }, + docs: { + theme: npmxDark, + }, }, // Provides toolbars to switch things like theming and language globalTypes: { diff --git a/.storybook/theme.ts b/.storybook/theme.ts new file mode 100644 index 0000000000..10816b91cb --- /dev/null +++ b/.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 From a51d2c014cb0ab316fa8358fdbbeb5b17949323f Mon Sep 17 00:00:00 2001 From: cylewaitforit Date: Tue, 17 Mar 2026 17:07:51 -0500 Subject: [PATCH 2/4] docs(ui): add storybook welcome page --- .storybook/main.ts | 2 +- .storybook/storybook-welcome.mdx | 7 +++++++ 2 files changed, 8 insertions(+), 1 deletion(-) create mode 100644 .storybook/storybook-welcome.mdx diff --git a/.storybook/main.ts b/.storybook/main.ts index 04f806021c..c49f8f460b 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -1,7 +1,7 @@ import type { StorybookConfig } from '@storybook-vue/nuxt' const config = { - stories: ['../app/**/*.stories.@(js|ts)'], + stories: ['../.storybook/*.mdx', '../app/**/*.stories.@(js|ts)'], addons: ['@storybook/addon-a11y', '@storybook/addon-docs', '@storybook/addon-themes'], framework: '@storybook-vue/nuxt', staticDirs: ['./.public'], diff --git a/.storybook/storybook-welcome.mdx b/.storybook/storybook-welcome.mdx new file mode 100644 index 0000000000..2a5744edcf --- /dev/null +++ b/.storybook/storybook-welcome.mdx @@ -0,0 +1,7 @@ +import { Meta } from '@storybook/addon-docs/blocks'; + + + +# Welcome + +Welcome to the npmx Storybook. From c0cf1839b11674eb50d74885c2f4c71c30785210 Mon Sep 17 00:00:00 2001 From: cylewaitforit Date: Wed, 18 Mar 2026 17:15:57 -0500 Subject: [PATCH 3/4] fix: hide toolbar on storybook welcome doc page --- .storybook/manager.ts | 12 ++++++++++++ .storybook/storybook-welcome.mdx | 2 +- 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/.storybook/manager.ts b/.storybook/manager.ts index b0934a3f4e..82475f197f 100644 --- a/.storybook/manager.ts +++ b/.storybook/manager.ts @@ -4,4 +4,16 @@ import npmxDark from './theme' addons.setConfig({ 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 + }, + }, }) diff --git a/.storybook/storybook-welcome.mdx b/.storybook/storybook-welcome.mdx index 2a5744edcf..d8c738ad11 100644 --- a/.storybook/storybook-welcome.mdx +++ b/.storybook/storybook-welcome.mdx @@ -1,6 +1,6 @@ import { Meta } from '@storybook/addon-docs/blocks'; - + # Welcome From 2f3996dbc31191b3f36eb1e26fd356415ceff759 Mon Sep 17 00:00:00 2001 From: cylewaitforit Date: Fri, 20 Mar 2026 10:43:16 -0500 Subject: [PATCH 4/4] fix: storybook-vue/nuxt compat --- .storybook/main.ts | 27 ++++++++++ pnpm-lock.yaml | 128 ++++++++++++++++++++++---------------------- pnpm-workspace.yaml | 10 ++-- 3 files changed, 96 insertions(+), 69 deletions(-) diff --git a/.storybook/main.ts b/.storybook/main.ts index c49f8f460b..b3d43469b4 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -11,6 +11,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 = ` +` + return html.replace(/