build(#10336): load locales and vite config

packages/frontend/.gitignore

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

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 { type Preview, setup } from '@storybook/vue3';
-import { applyTheme } from '../src/scripts/theme';
+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: {

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkAbuseReport,
 	},
 	template: '<MkAbuseReport />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkAbuseReportWindow,
 	},
 	template: '<MkAbuseReportWindow />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkAchievements,
 	},
 	template: '<MkAchievements />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkAnalogClock,
 	},
 	template: '<MkAnalogClock />',
+	parameters: {
+		layout: 'fullscreen',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkAsUi,
 	},
 	template: '<MkAsUi />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkAutocomplete,
 	},
 	template: '<MkAutocomplete />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkAvatars,
 	},
 	template: '<MkAvatars />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkButton,
 	},
 	template: '<MkButton />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkCaptcha,
 	},
 	template: '<MkCaptcha />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkChannelFollowButton,
 	},
 	template: '<MkChannelFollowButton />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkChannelPreview,
 	},
 	template: '<MkChannelPreview />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkChart,
 	},
 	template: '<MkChart />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkChartLegend,
 	},
 	template: '<MkChartLegend />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkChartTooltip,
 	},
 	template: '<MkChartTooltip />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkCheckbox,
 	},
 	template: '<MkCheckbox />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkClickerGame,
 	},
 	template: '<MkClickerGame />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkClipPreview,
 	},
 	template: '<MkClipPreview />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkCode_core,
 	},
 	template: '<MkCode_core />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkCode,
 	},
 	template: '<MkCode />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkContainer,
 	},
 	template: '<MkContainer />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkContextMenu,
 	},
 	template: '<MkContextMenu />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkCropperDialog,
 	},
 	template: '<MkCropperDialog />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkCwButton,
 	},
 	template: '<MkCwButton />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkDateSeparatedList,
 	},
 	template: '<MkDateSeparatedList />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkDialog,
 	},
 	template: '<MkDialog />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkDigitalClock,
 	},
 	template: '<MkDigitalClock />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkDonation,
 	},
 	template: '<MkDonation />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkDrive_file,
 	},
 	template: '<MkDrive_file />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkDrive_folder,
 	},
 	template: '<MkDrive_folder />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkDrive_navFolder,
 	},
 	template: '<MkDrive_navFolder />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkDrive,
 	},
 	template: '<MkDrive />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkDriveFileThumbnail,
 	},
 	template: '<MkDriveFileThumbnail />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkDriveSelectDialog,
 	},
 	template: '<MkDriveSelectDialog />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkDriveWindow,
 	},
 	template: '<MkDriveWindow />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkEmojiPicker_section,
 	},
 	template: '<MkEmojiPicker_section />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkEmojiPicker,
 	},
 	template: '<MkEmojiPicker />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkEmojiPickerDialog,
 	},
 	template: '<MkEmojiPickerDialog />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkEmojiPickerWindow,
 	},
 	template: '<MkEmojiPickerWindow />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkFeaturedPhotos,
 	},
 	template: '<MkFeaturedPhotos />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkFileCaptionEditWindow,
 	},
 	template: '<MkFileCaptionEditWindow />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkFileListForAdmin,
 	},
 	template: '<MkFileListForAdmin />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkFlashPreview,
 	},
 	template: '<MkFlashPreview />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkFoldableSection,
 	},
 	template: '<MkFoldableSection />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkFolder,
 	},
 	template: '<MkFolder />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkFollowButton,
 	},
 	template: '<MkFollowButton />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkForgotPassword,
 	},
 	template: '<MkForgotPassword />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkFormDialog,
 	},
 	template: '<MkFormDialog />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkGalleryPostPreview,
 	},
 	template: '<MkGalleryPostPreview />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkGoogle,
 	},
 	template: '<MkGoogle />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkHeatmap,
 	},
 	template: '<MkHeatmap />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkImageViewer,
 	},
 	template: '<MkImageViewer />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkImgWithBlurhash,
 	},
 	template: '<MkImgWithBlurhash />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkInfo,
 	},
 	template: '<MkInfo />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkInput,
 	},
 	template: '<MkInput />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkInstanceCardMini,
 	},
 	template: '<MkInstanceCardMini />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkInstanceStats,
 	},
 	template: '<MkInstanceStats />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkInstanceTicker,
 	},
 	template: '<MkInstanceTicker />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkKeyValue,
 	},
 	template: '<MkKeyValue />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkLaunchPad,
 	},
 	template: '<MkLaunchPad />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkLink,
 	},
 	template: '<MkLink />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkMarquee,
 	},
 	template: '<MkMarquee />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkMediaBanner,
 	},
 	template: '<MkMediaBanner />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkMediaImage,
 	},
 	template: '<MkMediaImage />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkMediaList,
 	},
 	template: '<MkMediaList />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkMediaVideo,
 	},
 	template: '<MkMediaVideo />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkMention,
 	},
 	template: '<MkMention />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkMenu_child,
 	},
 	template: '<MkMenu_child />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkMenu,
 	},
 	template: '<MkMenu />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkMiniChart,
 	},
 	template: '<MkMiniChart />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkModal,
 	},
 	template: '<MkModal />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkModalPageWindow,
 	},
 	template: '<MkModalPageWindow />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkModalWindow,
 	},
 	template: '<MkModalWindow />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkNote,
 	},
 	template: '<MkNote />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkNoteDetailed,
 	},
 	template: '<MkNoteDetailed />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkNoteHeader,
 	},
 	template: '<MkNoteHeader />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkNotePreview,
 	},
 	template: '<MkNotePreview />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkNoteSimple,
 	},
 	template: '<MkNoteSimple />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkNoteSub,
 	},
 	template: '<MkNoteSub />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkNotes,
 	},
 	template: '<MkNotes />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkNotification,
 	},
 	template: '<MkNotification />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkNotificationSettingWindow,
 	},
 	template: '<MkNotificationSettingWindow />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkNotifications,
 	},
 	template: '<MkNotifications />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkNumber,
 	},
 	template: '<MkNumber />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkNumberDiff,
 	},
 	template: '<MkNumberDiff />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkObjectView,
 	},
 	template: '<MkObjectView />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkObjectView_value,
 	},
 	template: '<MkObjectView_value />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkOmit,
 	},
 	template: '<MkOmit />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkPagePreview,
 	},
 	template: '<MkPagePreview />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkPageWindow,
 	},
 	template: '<MkPageWindow />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkPagination,
 	},
 	template: '<MkPagination />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkPlusOneEffect,
 	},
 	template: '<MkPlusOneEffect />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkPoll,
 	},
 	template: '<MkPoll />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkPollEditor,
 	},
 	template: '<MkPollEditor />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;

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

@@ -9,5 +9,8 @@ export const Default = {
 		MkPopupMenu,
 	},
 	template: '<MkPopupMenu />',
+	parameters: {
+		layout: 'centered',
+	},
 };
 export default meta;