Skip to content

Commit b541ee2

Browse files
docs(ui): add stories for Settings page (#2545)
Co-authored-by: Willow (GHOST) <git@willow.sh>
1 parent ca5e399 commit b541ee2

File tree

5 files changed

+138
-11
lines changed

5 files changed

+138
-11
lines changed

.storybook/handlers.ts

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,3 +91,68 @@ export const pdsUsersHandler = http.get('/api/atproto/pds-users', () => {
9191
},
9292
])
9393
})
94+
95+
export const i18nStatusHandler = http.get('/lunaria/status.json', () => {
96+
return HttpResponse.json({
97+
generatedAt: '2026-01-22T10:07:07.000Z',
98+
sourceLocale: {
99+
lang: 'en',
100+
label: 'English',
101+
totalKeys: 500,
102+
},
103+
locales: [
104+
{
105+
lang: 'en-GB',
106+
label: 'English (UK)',
107+
dir: 'ltr',
108+
totalKeys: 500,
109+
completedKeys: 423,
110+
percentComplete: 84,
111+
missingKeys: [
112+
'settings.background_themes.label',
113+
'settings.enable_graph_pulse_loop',
114+
'settings.enable_graph_pulse_loop_description',
115+
'settings.data_source.algolia_description',
116+
'settings.data_source.npm_description',
117+
'i18n.contribute_hint',
118+
'i18n.copy_keys',
119+
],
120+
githubEditUrl: 'https://github.com/npmx-dev/npmx.dev/edit/main/i18n/locales/en-GB.json',
121+
githubHistoryUrl:
122+
'https://github.com/npmx-dev/npmx.dev/commits/main/i18n/locales/en-GB.json',
123+
},
124+
{
125+
lang: 'fr-FR',
126+
label: 'Français',
127+
dir: 'ltr',
128+
totalKeys: 500,
129+
completedKeys: 423,
130+
percentComplete: 84,
131+
missingKeys: [
132+
'settings.background_themes.label',
133+
'settings.enable_graph_pulse_loop',
134+
'settings.enable_graph_pulse_loop_description',
135+
'settings.data_source.algolia_description',
136+
'settings.data_source.npm_description',
137+
'i18n.contribute_hint',
138+
'i18n.copy_keys',
139+
],
140+
githubEditUrl: 'https://github.com/npmx-dev/npmx.dev/edit/main/i18n/locales/fr-FR.json',
141+
githubHistoryUrl:
142+
'https://github.com/npmx-dev/npmx.dev/commits/main/i18n/locales/fr-FR.json',
143+
},
144+
{
145+
lang: 'de-DE',
146+
label: 'Deutsch',
147+
dir: 'ltr',
148+
totalKeys: 500,
149+
completedKeys: 500,
150+
percentComplete: 100,
151+
missingKeys: [],
152+
githubEditUrl: 'https://github.com/npmx-dev/npmx.dev/edit/main/i18n/locales/de-DE.json',
153+
githubHistoryUrl:
154+
'https://github.com/npmx-dev/npmx.dev/commits/main/i18n/locales/de-DE.json',
155+
},
156+
],
157+
})
158+
})

.storybook/preview-head.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,3 +61,19 @@
6161
background-color: var(--bg, oklch(0.171 0 0)) !important;
6262
}
6363
</style>
64+
<script>
65+
// related: https://github.com/npmx-dev/npmx.dev/blob/1431d24be555bca5e1ae6264434d49ca15173c43/test/nuxt/setup.ts#L12-L26
66+
// Stub Nuxt specific globals
67+
// @nuxtjs/color-mode's plugin.client.js reads window[globalName] at module
68+
// evaluation time — before any Storybook setup() callback runs — so the
69+
// global must exist in the HTML head, not in preview.ts.
70+
window.__NUXT_COLOR_MODE__ ??= {
71+
preference: 'system',
72+
value: 'dark',
73+
getColorScheme: function () {
74+
return 'dark'
75+
},
76+
addColorScheme: function () {},
77+
removeColorScheme: function () {},
78+
}
79+
</script>

.storybook/preview.ts

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,16 +10,6 @@ import npmxDark from './theme'
1010

1111
initialize()
1212

13-
// related: https://github.com/npmx-dev/npmx.dev/blob/1431d24be555bca5e1ae6264434d49ca15173c43/test/nuxt/setup.ts#L12-L26
14-
// Stub Nuxt specific globals
15-
// @ts-expect-error - dynamic global name
16-
globalThis['__NUXT_COLOR_MODE__'] ??= {
17-
preference: 'system',
18-
value: 'dark',
19-
getColorScheme: fn(() => 'dark'),
20-
addColorScheme: fn(),
21-
removeColorScheme: fn(),
22-
}
2313
// @ts-expect-error - dynamic global name
2414
globalThis.defineOgImageComponent = fn()
2515

app/pages/settings.stories.ts

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import Settings from './settings.vue'
2+
import type { Meta, StoryObj } from '@storybook-vue/nuxt'
3+
import { userEvent, expect } from 'storybook/test'
4+
import { pageDecorator } from '../../.storybook/decorators'
5+
import { i18nStatusHandler } from '../../.storybook/handlers'
6+
7+
const meta = {
8+
component: Settings,
9+
globals: {
10+
locale: 'en-US',
11+
},
12+
beforeEach: () => localStorage.removeItem('npmx-settings'),
13+
parameters: {
14+
layout: 'fullscreen',
15+
msw: {
16+
handlers: [i18nStatusHandler],
17+
},
18+
},
19+
decorators: [pageDecorator],
20+
} satisfies Meta<typeof Settings>
21+
22+
export default meta
23+
type Story = StoryObj<typeof meta>
24+
25+
/** English locale (default). The Language section shows a GitHub link to help translate the site. */
26+
export const Default: Story = {}
27+
28+
export const NpmRegistryDataSource: Story = {
29+
play: async ({ canvas, step }) => {
30+
await step('Select npm registry as the data source', async () => {
31+
const select = await canvas.findByRole('combobox', { name: /data source/i })
32+
await userEvent.selectOptions(select, 'npm')
33+
await expect(select).toHaveValue('npm')
34+
})
35+
},
36+
}
37+
38+
/** Non-English locale with incomplete translations. The Language section shows `SettingsTranslationHelper` with a progress bar and list of missing translation keys. `/lunaria/status.json` is intercepted by MSW to provide mock translation status data. */
39+
export const NonEnglishTranslationHelper: Story = {
40+
globals: {
41+
locale: 'fr-FR',
42+
},
43+
}
44+
45+
/** Non-English locale without translations API response. The Language section shows a GitHub link to help translate the site. */
46+
export const WithoutTranslationHelper: Story = {
47+
globals: {
48+
locale: 'fr-FR',
49+
},
50+
parameters: {
51+
msw: {
52+
handlers: [],
53+
},
54+
},
55+
}

nuxt.config.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@ export default defineNuxtConfig({
1515
'@vite-pwa/nuxt',
1616
'@vueuse/nuxt',
1717
'@nuxtjs/i18n',
18-
...(isStorybook ? [] : ['@nuxt/fonts', '@nuxtjs/color-mode']),
18+
'@nuxtjs/color-mode',
19+
...(isStorybook ? [] : ['@nuxt/fonts']),
1920
],
2021

2122
$test: {

0 commit comments

Comments
 (0)