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;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

packages/frontend/src/components/MkCode.core.stories.ts

@@ -0,0 +1,13 @@
+import { Meta, Story } from '@storybook/vue3';
+import MkCode_core from './MkCode.core.vue';
+const meta = {
+	title: 'components/MkCode.core',
+	component: MkCode_core,
+};
+export const Default = {
+	components: {
+		MkCode_core,
+	},
+	template: '<MkCode.core />',
+};
+export default meta;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

packages/frontend/src/components/MkDrive.file.stories.ts

@@ -0,0 +1,13 @@
+import { Meta, Story } from '@storybook/vue3';
+import MkDrive_file from './MkDrive.file.vue';
+const meta = {
+	title: 'components/MkDrive.file',
+	component: MkDrive_file,
+};
+export const Default = {
+	components: {
+		MkDrive_file,
+	},
+	template: '<MkDrive.file />',
+};
+export default meta;

packages/frontend/src/components/MkDrive.folder.stories.ts

@@ -0,0 +1,13 @@
+import { Meta, Story } from '@storybook/vue3';
+import MkDrive_folder from './MkDrive.folder.vue';
+const meta = {
+	title: 'components/MkDrive.folder',
+	component: MkDrive_folder,
+};
+export const Default = {
+	components: {
+		MkDrive_folder,
+	},
+	template: '<MkDrive.folder />',
+};
+export default meta;

packages/frontend/src/components/MkDrive.navFolder.stories.ts

@@ -0,0 +1,13 @@
+import { Meta, Story } from '@storybook/vue3';
+import MkDrive_navFolder from './MkDrive.navFolder.vue';
+const meta = {
+	title: 'components/MkDrive.navFolder',
+	component: MkDrive_navFolder,
+};
+export const Default = {
+	components: {
+		MkDrive_navFolder,
+	},
+	template: '<MkDrive.navFolder />',
+};
+export default meta;

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

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

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

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

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

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

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

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

packages/frontend/src/components/MkEmojiPicker.section.stories.ts

@@ -0,0 +1,13 @@
+import { Meta, Story } from '@storybook/vue3';
+import MkEmojiPicker_section from './MkEmojiPicker.section.vue';
+const meta = {
+	title: 'components/MkEmojiPicker.section',
+	component: MkEmojiPicker_section,
+};
+export const Default = {
+	components: {
+		MkEmojiPicker_section,
+	},
+	template: '<MkEmojiPicker.section />',
+};
+export default meta;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

packages/frontend/src/components/MkMenu.child.stories.ts

@@ -0,0 +1,13 @@
+import { Meta, Story } from '@storybook/vue3';
+import MkMenu_child from './MkMenu.child.vue';
+const meta = {
+	title: 'components/MkMenu.child',
+	component: MkMenu_child,
+};
+export const Default = {
+	components: {
+		MkMenu_child,
+	},
+	template: '<MkMenu.child />',
+};
+export default meta;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

packages/frontend/src/components/MkObjectView.value.stories.ts

@@ -0,0 +1,13 @@
+import { Meta, Story } from '@storybook/vue3';
+import MkObjectView_value from './MkObjectView.value.vue';
+const meta = {
+	title: 'components/MkObjectView.value',
+	component: MkObjectView_value,
+};
+export const Default = {
+	components: {
+		MkObjectView_value,
+	},
+	template: '<MkObjectView.value />',
+};
+export default meta;

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

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

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

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

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

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

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

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

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

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

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

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

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

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