build(#10336): init

packages/frontend/.storybook/.gitignore

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

packages/frontend/.storybook/generate.tsx

@@ -0,0 +1,135 @@
+import * as fs from 'node:fs/promises';
+import { basename, dirname, join } from 'node:path/posix';
+import { promisify } from 'node:util';
+import { generate } from 'astring';
+import type * as estree from 'estree';
+import * as glob from 'glob';
+import { format } from 'prettier';
+
+function h<T extends estree.Node>(component: T['type'], props: Omit<T, 'type'>): T {
+	const type = component.replace(/(?:^|-)([a-z])/g, (_, c) => c.toUpperCase());
+	return Object.assign(props, { type }) as T;
+}
+
+function toStories(component: string, location: string): string {
+	const literal = (
+		<literal value={join(location, component).slice(4, -4)} />
+	) as unknown as estree.Literal;
+	const identifier = (
+		<identifier name={component.slice(0, -4).replace(/[-.]|^(?=\d)/g, '_')} />
+	) as unknown as estree.Identifier;
+	const program = (
+		<program
+			body={[
+				<import-declaration
+					source={<literal value="@storybook/vue3" />}
+					specifiers={[
+						<import-specifier
+							local={<identifier name="Meta" />}
+							imported={<identifier name="Meta" />}
+						/>,
+						<import-specifier
+							local={<identifier name="Story" />}
+							imported={<identifier name="Story" />}
+						/>,
+					]}
+				/>,
+				<import-declaration
+					source={<literal value={`./${component}`} />}
+					specifiers={[
+						<import-default-specifier
+							local={identifier}
+							imported={identifier}
+						/>,
+					]}
+				/>,
+				<variable-declaration
+					kind="const"
+					declarations={[
+						<variable-declarator
+							id={<identifier name="meta" />}
+							init={
+								<object-expression
+									properties={[
+										<property
+											key={<identifier name="title" />}
+											value={literal}
+											kind="init"
+										/>,
+										<property
+											key={<identifier name="component" />}
+											value={identifier}
+											kind="init"
+										/>,
+									]}
+								/>
+							}
+						/>,
+					]}
+				/>,
+				<export-named-declaration
+					declaration={
+						<variable-declaration
+							kind="const"
+							declarations={[
+								<variable-declarator
+									id={<identifier name="Default" />}
+									init={
+										<object-expression
+											properties={[
+												<property
+													key={<identifier name="components" />}
+													value={
+														<object-expression
+															properties={[
+																<property
+																	key={identifier}
+																	value={identifier}
+																	kind="init"
+																	shorthand
+																/>,
+															]}
+														/>
+													}
+													kind="init"
+												/>,
+												<property
+													key={<identifier name="template" />}
+													value={<literal value={`<${component.slice(0, -4)} />`} />}
+													kind="init"
+												/>,
+											]}
+										/>
+									}
+								/>,
+							]}
+						/>
+					}
+				/>,
+				<export-default-declaration
+					declaration={<identifier name="meta" />}
+				/>,
+			]}
+		/>
+	) as unknown as estree.Program;
+	return format(
+		generate(program),
+		{
+			parser: 'babel-ts',
+			singleQuote: true,
+			useTabs: true,
+		}
+	);
+}
+
+promisify(glob)('src/{components,pages,ui,widgets}/**/*.vue').then((components) => Promise.all(
+	components.map((component) => {
+		const stories = component.replace(/\.vue$/, '.stories.ts');
+		fs.stat(stories).then(
+			() => {},
+			() => {
+				fs.writeFile(stories, toStories(basename(component), dirname(component)));
+			}
+		);
+	})
+));

packages/frontend/.storybook/main.ts

@@ -0,0 +1,17 @@
+import type { StorybookConfig } from '@storybook/vue3-vite';
+const config: StorybookConfig = {
+	stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+	addons: [
+		'@storybook/addon-links',
+		'@storybook/addon-essentials',
+		'@storybook/addon-interactions',
+	],
+	framework: {
+		name: '@storybook/vue3-vite',
+		options: {},
+	},
+	docs: {
+		autodocs: 'tag',
+	},
+};
+export default config;

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

@@ -0,0 +1,23 @@
+import { readFile, writeFile } from 'node:fs/promises';
+import { resolve } from 'node:path';
+import * as JSON5 from 'json5';
+
+Promise.all([
+	readFile(resolve(__dirname, '../src/themes/_light.json5'), 'utf8'),
+	readFile(resolve(__dirname, '../src/themes/l-light.json5'), 'utf8'),
+]).then((sources) => {
+	const base = JSON5.parse(sources[0]);
+	const theme = JSON5.parse(sources[1]);
+	writeFile(
+		resolve(__dirname, './theme.ts'),
+		`export default ${JSON.stringify(
+			Object.assign(theme, {
+				base: undefined,
+				props: Object.assign(base.props, theme.props),
+			}),
+			undefined,
+			2,
+		)} as const;`,
+		'utf8'
+	);
+});

packages/frontend/.storybook/preview-head.html

@@ -0,0 +1,3 @@
+<script>
+  window.global = window;
+</script>

packages/frontend/.storybook/preview.ts

@@ -0,0 +1,14 @@
+import type { Preview } from '@storybook/vue3';
+import { applyTheme } from '../src/scripts/theme';
+import theme from './theme';
+import '../src/style.scss';
+
+applyTheme(theme);
+
+const preview = {
+	parameters: {
+		layout: 'centered',
+	},
+} satisfies Preview;
+
+export default preview;