build(#10336): Storybook & Chromatic & msw

packages/frontend/.gitignore

@@ -0,0 +1 @@
+/storybook-static

packages/frontend/.storybook/.gitignore

@@ -0,0 +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

@@ -0,0 +1,234 @@
+import { existsSync, readFileSync } from 'node:fs';
+import { writeFile } from 'node:fs/promises';
+import { basename, dirname } 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): string {
+	const msw = `${component.slice(0, -'.vue'.length)}.msw`;
+	const implStories = `${component.slice(0, -'.vue'.length)}.stories.impl`;
+	const hasMsw = existsSync(`${msw}.ts`);
+	const hasImplStories = existsSync(`${implStories}.ts`);
+	const base = basename(component);
+	const dir = dirname(component);
+	const literal = (
+		<literal value={component.slice('src/'.length, -'.vue'.length)} />
+	) as unknown as estree.Literal;
+	const identifier = (
+		<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/') ? 'fullscreen' : 'centered'} />}
+					kind="init"
+				/>,
+				...hasMsw
+					? [
+							<property
+								key={<identifier name="msw" />}
+								value={<identifier name="msw" />}
+								kind="init"
+								shorthand
+							/>,
+						]
+					: [],
+			]}
+		/>
+	);
+	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" />}
+						/>,
+					]}
+				/>,
+				...hasMsw
+					? [
+							<import-declaration
+								source={<literal value={`./${basename(msw)}`} />}
+								specifiers={[
+									<import-namespace-specifier
+										local={<identifier name="msw" />}
+									/>,
+								]}
+							/>,
+						]
+					: [],
+				<import-declaration
+					source={<literal value={`./${base}`} />}
+					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"
+										/>,
+									]}
+								/>
+							}
+						/>,
+					]}
+				/>,
+				...hasImplStories
+					? [
+						]
+					: [
+							<export-named-declaration
+								declaration={
+									<variable-declaration
+										kind="const"
+										declarations={[
+											<variable-declarator
+												id={<identifier name="Default" />}
+												init={
+													<object-expression
+														properties={[
+															<property
+																key={<identifier name="render" />}
+																value={
+																	<function-expression
+																		id={<identifier name="render" />}
+																		params={[
+																			<identifier name="args" />,
+																			<object-pattern
+																				properties={[
+																					<property
+																						key={<identifier name="argTypes" />}
+																						value={<identifier name="argTypes" />}
+																						kind="init"
+																						shorthand
+																					/>,
+																				]}
+																			/>,
+																		]}
+																		body={
+																			<block-statement
+																				body={[
+																					<return-statement
+																						argument={
+																							<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="props" />}
+																										value={
+																											<call-expression
+																												callee={
+																													<member-expression
+																														object={<identifier name="Object" />}
+																														property={<identifier name="keys" />}
+																													/>
+																												}
+																												arguments={[
+																													<identifier name="argTypes" />,
+																												]}
+																											/>
+																										}
+																										kind="init"
+																									/>,
+																									<property
+																										key={<identifier name="template" />}
+																										value={<literal value={`<${identifier.name} v-bind="$props" />`} />}
+																										kind="init"
+																									/>,
+																								]}
+																							/>
+																						}
+																					/>,
+																				]}
+																			/>
+																		}
+																	/>
+																}
+																method
+																kind="init"
+															/>,
+															<property
+																key={<identifier name="parameters" />}
+																value={parameters}
+																kind="init"
+															/>,
+														]}
+													/>
+												}
+											/>,
+										]}
+									/>
+								}
+							/>,
+						],
+				<export-default-declaration
+					declaration={<identifier name="meta" />}
+				/>,
+			]}
+		/>
+	) as unknown as estree.Program;
+	return format(
+		generate(program) + (hasImplStories ? readFileSync(`${implStories}.ts`, 'utf-8') : ''),
+		{
+			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');
+		return writeFile(stories, toStories(component));
+	})
+));

packages/frontend/.storybook/main.ts

@@ -0,0 +1,30 @@
+import type { StorybookConfig } from '@storybook/vue3-vite';
+import { mergeConfig } from 'vite';
+import { getConfig } from '../vite.config';
+const config = {
+	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',
+	},
+	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/manager.ts

@@ -0,0 +1,12 @@
+import { addons } from '@storybook/manager-api';
+import { create } from '@storybook/theming/create';
+
+addons.setConfig({
+	theme: create({
+		base: 'dark',
+		brandTitle: 'Misskey Storybook',
+		brandUrl: 'https://misskey-hub.net',
+		brandImage: 'https://github.com/misskey-dev/assets/blob/main/misskey.svg?raw=true',
+		brandTarget: '_blank',
+	}),
+});

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/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,38 @@
+import { type Preview, setup } from '@storybook/vue3';
+import { initialize, mswDecorator } from 'msw-storybook-addon';
+import locale from './locale';
+import theme from './theme';
+import '../src/style.scss';
+
+initialize();
+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 = {
+	decorators: [
+		mswDecorator,
+	],
+	parameters: {
+		layout: 'centered',
+	},
+	argTypes: {
+		default: {
+			control: {
+				type: 'text',
+			},
+		},
+	},
+} satisfies Preview;
+
+export default preview;