build(#10336): load locales and vite config

packages/frontend/.storybook/.gitignore

@@ -1,5 +1,8 @@
 # (cd .; pnpm tsc --jsx react --jsxFactory h ./generate.tsx && node ./generate.js)
 /generate.js
+# (cd .; pnpm tsc ./preload-locale.ts && node ./preload-locale.js)
+/preload-locale.js
+/locale.ts
 # (cd .; pnpm tsc ./preload-theme.ts && node ./preload-theme.js)
 /preload-theme.js
 /theme.ts

packages/frontend/.storybook/generate.tsx

@@ -11,13 +11,26 @@ function h<T extends estree.Node>(component: T['type'], props: Omit<T, 'type'>):
 	return Object.assign(props, { type }) as T;
 }
 
-function toStories(component: string, location: string): string {
+function toStories(component: string): string {
+	const base = basename(component);
+	const dir = dirname(component);
 	const literal = (
-		<literal value={join(location, component).slice(4, -4)} />
+		<literal value={component.slice('src/'.length, -'.vue'.length)} />
 	) as unknown as estree.Literal;
 	const identifier = (
-		<identifier name={component.slice(0, -4).replace(/[-.]|^(?=\d)/g, '_')} />
+		<identifier name={base.slice(0, -'.vue'.length).replace(/[-.]|^(?=\d)/g, '_')} />
 	) as unknown as estree.Identifier;
+	const parameters = (
+		<object-expression
+			properties={[
+				<property
+					key={<identifier name="layout" />}
+					value={<literal value={`${dir}/`.startsWith('src/pages/') || base === 'MkAnalogClock.vue' ? 'fullscreen' : 'centered'} />}
+					kind="init"
+				/>
+			]}
+		/>
+	);
 	const program = (
 		<program
 			body={[
@@ -35,7 +48,7 @@ function toStories(component: string, location: string): string {
 					]}
 				/>,
 				<import-declaration
-					source={<literal value={`./${component}`} />}
+					source={<literal value={`./${base}`} />}
 					specifiers={[
 						<import-default-specifier
 							local={identifier}
@@ -98,6 +111,11 @@ function toStories(component: string, location: string): string {
 													value={<literal value={`<${identifier.name} />`} />}
 													kind="init"
 												/>,
+												<property
+													key={<identifier name="parameters" />}
+													value={parameters}
+													kind="init"
+												/>,
 											]}
 										/>
 									}
@@ -128,7 +146,7 @@ promisify(glob)('src/{components,pages,ui,widgets}/**/*.vue').then((components)
 		fs.stat(stories).then(
 			() => {},
 			() => {
-				fs.writeFile(stories, toStories(basename(component), dirname(component)));
+				fs.writeFile(stories, toStories(component));
 			}
 		);
 	})

packages/frontend/.storybook/main.ts

@@ -1,5 +1,7 @@
 import type { StorybookConfig } from '@storybook/vue3-vite';
-const config: StorybookConfig = {
+import { mergeConfig } from 'vite';
+import { getConfig } from '../vite.config';
+const config = {
 	stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
 	addons: [
 		'@storybook/addon-links',
@@ -13,5 +15,16 @@ const config: StorybookConfig = {
 	docs: {
 		autodocs: 'tag',
 	},
-};
+	core: {
+		disableTelemetry: true,
+	},
+	async viteFinal(config, options) {
+		const { plugins, build: { rollupOptions, ...build }, ...original } = getConfig();
+		const x = mergeConfig(config, {
+			...original,
+			build,
+		});
+		return x;
+	},
+} satisfies StorybookConfig;
 export default config;

packages/frontend/.storybook/preload-locale.ts

@@ -0,0 +1,9 @@
+import { writeFile } from 'node:fs/promises';
+import { resolve } from 'node:path';
+import * as locales from '../../../locales';
+
+writeFile(
+	resolve(__dirname, 'locale.ts'),
+	`export default ${JSON.stringify(locales['ja-JP'], undefined, 2)} as const;`,
+	'utf8',
+)

packages/frontend/.storybook/preview.ts

@@ -1,9 +1,21 @@
-import type { Preview } from '@storybook/vue3';
-import { applyTheme } from '../src/scripts/theme';
+import { type Preview, setup } from '@storybook/vue3';
+import locale from './locale';
 import theme from './theme';
 import '../src/style.scss';
 
-applyTheme(theme);
+localStorage.setItem("locale", JSON.stringify(locale));
+Promise.all([
+	import('../src/components'),
+	import('../src/directives'),
+	import('../src/widgets'),
+	import('../src/scripts/theme').then(({ applyTheme }) => applyTheme(theme)),
+]).then(([{ default: components }, { default: directives }, { default: widgets }]) => {
+	setup((app) => {
+		components(app);
+		directives(app);
+		widgets(app);
+	});
+})
 
 const preview = {
 	parameters: {