build(#10336): avoid intrinsic component names

packages/frontend/.storybook/generate.tsx

@@ -90,7 +90,7 @@ function toStories(component: string): string {
 		<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, '_')} />
+		<identifier name={base.slice(0, -'.vue'.length).replace(/[-.]|^(?=\d)/g, '_').replace(/(?<=^[^A-Z_]*$)/, '_')} />
 	) as unknown as estree.Identifier;
 	const parameters = (
 		<object-expression
@@ -262,7 +262,7 @@ function toStories(component: string): string {
 																											/>,
 																											<property
 																												key={<identifier name='template' />}
-																												value={<literal value={`<${identifier.name} v-bind='$props' />`} />}
+																												value={<literal value={`<${identifier.name} v-bind="$props" />`} />}
 																												kind={'init' as const}
 																											/>,
 																										]}

packages/frontend/src/components/form/link.stories.ts

@@ -1,21 +1,21 @@
 import { Meta, StoryObj } from '@storybook/vue3';
-import link from './link.vue';
+import link_ from './link.vue';
 const meta = {
 	title: 'components/form/link',
-	component: link,
-} satisfies Meta<typeof link>;
+	component: link_,
+} satisfies Meta<typeof link_>;
 export const Default = {
 	render(args, { argTypes }) {
 		return {
 			components: {
-				link,
+				link_,
 			},
 			props: Object.keys(argTypes),
-			template: '<link v-bind="$props" />',
+			template: '<link_ v-bind="$props" />',
 		};
 	},
 	parameters: {
 		layout: 'centered',
 	},
-} satisfies StoryObj<typeof link>;
+} satisfies StoryObj<typeof link_>;
 export default meta;

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

@@ -1,21 +1,21 @@
 import { Meta, StoryObj } from '@storybook/vue3';
-import section from './section.vue';
+import section_ from './section.vue';
 const meta = {
 	title: 'components/form/section',
-	component: section,
-} satisfies Meta<typeof section>;
+	component: section_,
+} satisfies Meta<typeof section_>;
 export const Default = {
 	render(args, { argTypes }) {
 		return {
 			components: {
-				section,
+				section_,
 			},
 			props: Object.keys(argTypes),
-			template: '<section v-bind="$props" />',
+			template: '<section_ v-bind="$props" />',
 		};
 	},
 	parameters: {
 		layout: 'centered',
 	},
-} satisfies StoryObj<typeof section>;
+} satisfies StoryObj<typeof section_>;
 export default meta;

packages/frontend/src/components/form/slot.stories.ts

@@ -1,21 +1,21 @@
 import { Meta, StoryObj } from '@storybook/vue3';
-import slot from './slot.vue';
+import slot_ from './slot.vue';
 const meta = {
 	title: 'components/form/slot',
-	component: slot,
-} satisfies Meta<typeof slot>;
+	component: slot_,
+} satisfies Meta<typeof slot_>;
 export const Default = {
 	render(args, { argTypes }) {
 		return {
 			components: {
-				slot,
+				slot_,
 			},
 			props: Object.keys(argTypes),
-			template: '<slot v-bind="$props" />',
+			template: '<slot_ v-bind="$props" />',
 		};
 	},
 	parameters: {
 		layout: 'centered',
 	},
-} satisfies StoryObj<typeof slot>;
+} satisfies StoryObj<typeof slot_>;
 export default meta;

packages/frontend/src/components/form/split.stories.ts

@@ -1,21 +1,21 @@
 import { Meta, StoryObj } from '@storybook/vue3';
-import split from './split.vue';
+import split_ from './split.vue';
 const meta = {
 	title: 'components/form/split',
-	component: split,
-} satisfies Meta<typeof split>;
+	component: split_,
+} satisfies Meta<typeof split_>;
 export const Default = {
 	render(args, { argTypes }) {
 		return {
 			components: {
-				split,
+				split_,
 			},
 			props: Object.keys(argTypes),
-			template: '<split v-bind="$props" />',
+			template: '<split_ v-bind="$props" />',
 		};
 	},
 	parameters: {
 		layout: 'centered',
 	},
-} satisfies StoryObj<typeof split>;
+} satisfies StoryObj<typeof split_>;
 export default meta;

packages/frontend/src/components/form/suspense.stories.ts

@@ -1,21 +1,21 @@
 import { Meta, StoryObj } from '@storybook/vue3';
-import suspense from './suspense.vue';
+import suspense_ from './suspense.vue';
 const meta = {
 	title: 'components/form/suspense',
-	component: suspense,
-} satisfies Meta<typeof suspense>;
+	component: suspense_,
+} satisfies Meta<typeof suspense_>;
 export const Default = {
 	render(args, { argTypes }) {
 		return {
 			components: {
-				suspense,
+				suspense_,
 			},
 			props: Object.keys(argTypes),
-			template: '<suspense v-bind="$props" />',
+			template: '<suspense_ v-bind="$props" />',
 		};
 	},
 	parameters: {
 		layout: 'centered',
 	},
-} satisfies StoryObj<typeof suspense>;
+} satisfies StoryObj<typeof suspense_>;
 export default meta;

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

@@ -1,21 +1,21 @@
 import { Meta, StoryObj } from '@storybook/vue3';
-import page from './page.vue';
+import page_ from './page.vue';
 const meta = {
 	title: 'components/page/page',
-	component: page,
-} satisfies Meta<typeof page>;
+	component: page_,
+} satisfies Meta<typeof page_>;
 export const Default = {
 	render(args, { argTypes }) {
 		return {
 			components: {
-				page,
+				page_,
 			},
 			props: Object.keys(argTypes),
-			template: '<page v-bind="$props" />',
+			template: '<page_ v-bind="$props" />',
 		};
 	},
 	parameters: {
 		layout: 'centered',
 	},
-} satisfies StoryObj<typeof page>;
+} satisfies StoryObj<typeof page_>;
 export default meta;

packages/frontend/src/pages/about.stories.ts

@@ -1,21 +1,21 @@
 import { Meta, StoryObj } from '@storybook/vue3';
-import about from './about.vue';
+import about_ from './about.vue';
 const meta = {
 	title: 'pages/about',
-	component: about,
-} satisfies Meta<typeof about>;
+	component: about_,
+} satisfies Meta<typeof about_>;
 export const Default = {
 	render(args, { argTypes }) {
 		return {
 			components: {
-				about,
+				about_,
 			},
 			props: Object.keys(argTypes),
-			template: '<about v-bind="$props" />',
+			template: '<about_ v-bind="$props" />',
 		};
 	},
 	parameters: {
 		layout: 'fullscreen',
 	},
-} satisfies StoryObj<typeof about>;
+} satisfies StoryObj<typeof about_>;
 export default meta;

packages/frontend/src/pages/achievements.stories.ts

@@ -1,21 +1,21 @@
 import { Meta, StoryObj } from '@storybook/vue3';
-import achievements from './achievements.vue';
+import achievements_ from './achievements.vue';
 const meta = {
 	title: 'pages/achievements',
-	component: achievements,
-} satisfies Meta<typeof achievements>;
+	component: achievements_,
+} satisfies Meta<typeof achievements_>;
 export const Default = {
 	render(args, { argTypes }) {
 		return {
 			components: {
-				achievements,
+				achievements_,
 			},
 			props: Object.keys(argTypes),
-			template: '<achievements v-bind="$props" />',
+			template: '<achievements_ v-bind="$props" />',
 		};
 	},
 	parameters: {
 		layout: 'fullscreen',
 	},
-} satisfies StoryObj<typeof achievements>;
+} satisfies StoryObj<typeof achievements_>;
 export default meta;

packages/frontend/src/pages/admin/abuses.stories.ts

@@ -1,21 +1,21 @@
 import { Meta, StoryObj } from '@storybook/vue3';
-import abuses from './abuses.vue';
+import abuses_ from './abuses.vue';
 const meta = {
 	title: 'pages/admin/abuses',
-	component: abuses,
-} satisfies Meta<typeof abuses>;
+	component: abuses_,
+} satisfies Meta<typeof abuses_>;
 export const Default = {
 	render(args, { argTypes }) {
 		return {
 			components: {
-				abuses,
+				abuses_,
 			},
 			props: Object.keys(argTypes),
-			template: '<abuses v-bind="$props" />',
+			template: '<abuses_ v-bind="$props" />',
 		};
 	},
 	parameters: {
 		layout: 'fullscreen',
 	},
-} satisfies StoryObj<typeof abuses>;
+} satisfies StoryObj<typeof abuses_>;
 export default meta;

packages/frontend/src/pages/admin/ads.stories.ts

@@ -1,21 +1,21 @@
 import { Meta, StoryObj } from '@storybook/vue3';
-import ads from './ads.vue';
+import ads_ from './ads.vue';
 const meta = {
 	title: 'pages/admin/ads',
-	component: ads,
-} satisfies Meta<typeof ads>;
+	component: ads_,
+} satisfies Meta<typeof ads_>;
 export const Default = {
 	render(args, { argTypes }) {
 		return {
 			components: {
-				ads,
+				ads_,
 			},
 			props: Object.keys(argTypes),
-			template: '<ads v-bind="$props" />',
+			template: '<ads_ v-bind="$props" />',
 		};
 	},
 	parameters: {
 		layout: 'fullscreen',
 	},
-} satisfies StoryObj<typeof ads>;
+} satisfies StoryObj<typeof ads_>;
 export default meta;

packages/frontend/src/pages/admin/announcements.stories.ts

@@ -1,21 +1,21 @@
 import { Meta, StoryObj } from '@storybook/vue3';
-import announcements from './announcements.vue';
+import announcements_ from './announcements.vue';
 const meta = {
 	title: 'pages/admin/announcements',
-	component: announcements,
-} satisfies Meta<typeof announcements>;
+	component: announcements_,
+} satisfies Meta<typeof announcements_>;
 export const Default = {
 	render(args, { argTypes }) {
 		return {
 			components: {
-				announcements,
+				announcements_,
 			},
 			props: Object.keys(argTypes),
-			template: '<announcements v-bind="$props" />',
+			template: '<announcements_ v-bind="$props" />',
 		};
 	},
 	parameters: {
 		layout: 'fullscreen',
 	},
-} satisfies StoryObj<typeof announcements>;
+} satisfies StoryObj<typeof announcements_>;
 export default meta;

packages/frontend/src/pages/admin/database.stories.ts

@@ -1,21 +1,21 @@
 import { Meta, StoryObj } from '@storybook/vue3';
-import database from './database.vue';
+import database_ from './database.vue';
 const meta = {
 	title: 'pages/admin/database',
-	component: database,
-} satisfies Meta<typeof database>;
+	component: database_,
+} satisfies Meta<typeof database_>;
 export const Default = {
 	render(args, { argTypes }) {
 		return {
 			components: {
-				database,
+				database_,
 			},
 			props: Object.keys(argTypes),
-			template: '<database v-bind="$props" />',
+			template: '<database_ v-bind="$props" />',
 		};
 	},
 	parameters: {
 		layout: 'fullscreen',
 	},
-} satisfies StoryObj<typeof database>;
+} satisfies StoryObj<typeof database_>;
 export default meta;

packages/frontend/src/pages/admin/federation.stories.ts

@@ -1,21 +1,21 @@
 import { Meta, StoryObj } from '@storybook/vue3';
-import federation from './federation.vue';
+import federation_ from './federation.vue';
 const meta = {
 	title: 'pages/admin/federation',
-	component: federation,
-} satisfies Meta<typeof federation>;
+	component: federation_,
+} satisfies Meta<typeof federation_>;
 export const Default = {
 	render(args, { argTypes }) {
 		return {
 			components: {
-				federation,
+				federation_,
 			},
 			props: Object.keys(argTypes),
-			template: '<federation v-bind="$props" />',
+			template: '<federation_ v-bind="$props" />',
 		};
 	},
 	parameters: {
 		layout: 'fullscreen',
 	},
-} satisfies StoryObj<typeof federation>;
+} satisfies StoryObj<typeof federation_>;
 export default meta;