build(#10336): init

packages/frontend/.storybook/.gitignore

+# (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

+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

+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

+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

+<script>
+  window.global = window;
+</script>

packages/frontend/.storybook/preview.ts

+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;

packages/frontend/package.json

@@ -72,8 +72,16 @@
 		"vuedraggable": "next"
 	},
 	"devDependencies": {
+		"@storybook/addon-essentials": "^7.0.0-rc.4",
+		"@storybook/addon-interactions": "^7.0.0-rc.4",
+		"@storybook/addon-links": "^7.0.0-rc.4",
+		"@storybook/blocks": "^7.0.0-rc.4",
+		"@storybook/testing-library": "^0.0.14-next.1",
+		"@storybook/vue3": "^7.0.0-rc.4",
+		"@storybook/vue3-vite": "^7.0.0-rc.4",
 		"@testing-library/vue": "^6.6.1",
 		"@types/escape-regexp": "0.0.1",
+		"@types/estree": "^1.0.0",
 		"@types/gulp": "4.0.10",
 		"@types/gulp-rename": "2.0.1",
 		"@types/matter-js": "0.18.2",
@@ -90,13 +98,18 @@
 		"@typescript-eslint/parser": "5.54.1",
 		"@vitest/coverage-c8": "^0.29.2",
 		"@vue/runtime-core": "3.2.47",
+		"astring": "^1.8.4",
 		"cross-env": "7.0.3",
 		"cypress": "12.7.0",
 		"eslint": "8.35.0",
 		"eslint-plugin-import": "2.27.5",
 		"eslint-plugin-vue": "9.9.0",
 		"happy-dom": "8.9.0",
+		"prettier": "^2.8.4",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
 		"start-server-and-test": "2.0.0",
+		"storybook": "^7.0.0-rc.4",
 		"summaly": "github:misskey-dev/summaly",
 		"vitest": "^0.29.2",
 		"vitest-fetch-mock": "^0.2.2",

packages/frontend/src/components/MkAbuseReport.stories.ts

+import { Meta, Story } from '@storybook/vue3';
+import MkAbuseReport from './MkAbuseReport.vue';
+const meta = {
+	title: 'components/MkAbuseReport',
+	component: MkAbuseReport,
+};
+export const Default = {
+	components: {
+		MkAbuseReport,
+	},
+	template: '<MkAbuseReport />',
+};
+export default meta;

packages/frontend/src/components/MkAbuseReportWindow.stories.ts

+import { Meta, Story } from '@storybook/vue3';
+import MkAbuseReportWindow from './MkAbuseReportWindow.vue';
+const meta = {
+	title: 'components/MkAbuseReportWindow',
+	component: MkAbuseReportWindow,
+};
+export const Default = {
+	components: {
+		MkAbuseReportWindow,
+	},
+	template: '<MkAbuseReportWindow />',
+};
+export default meta;

packages/frontend/src/components/MkAchievements.stories.ts

+import { Meta, Story } from '@storybook/vue3';
+import MkAchievements from './MkAchievements.vue';
+const meta = {
+	title: 'components/MkAchievements',
+	component: MkAchievements,
+};
+export const Default = {
+	components: {
+		MkAchievements,
+	},
+	template: '<MkAchievements />',
+};
+export default meta;

packages/frontend/src/components/MkAnalogClock.stories.ts

+import { Meta, Story } from '@storybook/vue3';
+import MkAnalogClock from './MkAnalogClock.vue';
+const meta = {
+	title: 'components/MkAnalogClock',
+	component: MkAnalogClock,
+};
+export const Default = {
+	components: {
+		MkAnalogClock,
+	},
+	template: '<MkAnalogClock />',
+};
+export default meta;

packages/frontend/src/components/MkAsUi.stories.ts

+import { Meta, Story } from '@storybook/vue3';
+import MkAsUi from './MkAsUi.vue';
+const meta = {
+	title: 'components/MkAsUi',
+	component: MkAsUi,
+};
+export const Default = {
+	components: {
+		MkAsUi,
+	},
+	template: '<MkAsUi />',
+};
+export default meta;

packages/frontend/src/components/MkAutocomplete.stories.ts

+import { Meta, Story } from '@storybook/vue3';
+import MkAutocomplete from './MkAutocomplete.vue';
+const meta = {
+	title: 'components/MkAutocomplete',
+	component: MkAutocomplete,
+};
+export const Default = {
+	components: {
+		MkAutocomplete,
+	},
+	template: '<MkAutocomplete />',
+};
+export default meta;

packages/frontend/src/components/MkAvatars.stories.ts

+import { Meta, Story } from '@storybook/vue3';
+import MkAvatars from './MkAvatars.vue';
+const meta = {
+	title: 'components/MkAvatars',
+	component: MkAvatars,
+};
+export const Default = {
+	components: {
+		MkAvatars,
+	},
+	template: '<MkAvatars />',
+};
+export default meta;

packages/frontend/src/components/MkButton.stories.ts

+import { Meta, Story } from '@storybook/vue3';
+import MkButton from './MkButton.vue';
+const meta = {
+	title: 'components/MkButton',
+	component: MkButton,
+};
+export const Default = {
+	components: {
+		MkButton,
+	},
+	template: '<MkButton />',
+};
+export default meta;

packages/frontend/src/components/MkCaptcha.stories.ts

+import { Meta, Story } from '@storybook/vue3';
+import MkCaptcha from './MkCaptcha.vue';
+const meta = {
+	title: 'components/MkCaptcha',
+	component: MkCaptcha,
+};
+export const Default = {
+	components: {
+		MkCaptcha,
+	},
+	template: '<MkCaptcha />',
+};
+export default meta;

packages/frontend/src/components/MkChannelFollowButton.stories.ts

+import { Meta, Story } from '@storybook/vue3';
+import MkChannelFollowButton from './MkChannelFollowButton.vue';
+const meta = {
+	title: 'components/MkChannelFollowButton',
+	component: MkChannelFollowButton,
+};
+export const Default = {
+	components: {
+		MkChannelFollowButton,
+	},
+	template: '<MkChannelFollowButton />',
+};
+export default meta;

packages/frontend/src/components/MkChannelPreview.stories.ts

+import { Meta, Story } from '@storybook/vue3';
+import MkChannelPreview from './MkChannelPreview.vue';
+const meta = {
+	title: 'components/MkChannelPreview',
+	component: MkChannelPreview,
+};
+export const Default = {
+	components: {
+		MkChannelPreview,
+	},
+	template: '<MkChannelPreview />',
+};
+export default meta;

packages/frontend/src/components/MkChart.stories.ts

+import { Meta, Story } from '@storybook/vue3';
+import MkChart from './MkChart.vue';
+const meta = {
+	title: 'components/MkChart',
+	component: MkChart,
+};
+export const Default = {
+	components: {
+		MkChart,
+	},
+	template: '<MkChart />',
+};
+export default meta;

packages/frontend/src/components/MkChartLegend.stories.ts

+import { Meta, Story } from '@storybook/vue3';
+import MkChartLegend from './MkChartLegend.vue';
+const meta = {
+	title: 'components/MkChartLegend',
+	component: MkChartLegend,
+};
+export const Default = {
+	components: {
+		MkChartLegend,
+	},
+	template: '<MkChartLegend />',
+};
+export default meta;