build(#10336): separate definitions and generated codes

packages/frontend/src/ui/_common_/common.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: common,
 };
 export const Default = {
-	components: {
-		common,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				common,
+			},
+			props: Object.keys(argTypes),
+			template: '<common v-bind="$props" />',
+		};
 	},
-	template: '<common />',
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/ui/_common_/navbar-for-mobile.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: navbar_for_mobile,
 };
 export const Default = {
-	components: {
-		navbar_for_mobile,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				navbar_for_mobile,
+			},
+			props: Object.keys(argTypes),
+			template: '<navbar_for_mobile v-bind="$props" />',
+		};
 	},
-	template: '<navbar_for_mobile />',
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/ui/_common_/navbar.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: navbar,
 };
 export const Default = {
-	components: {
-		navbar,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				navbar,
+			},
+			props: Object.keys(argTypes),
+			template: '<navbar v-bind="$props" />',
+		};
 	},
-	template: '<navbar />',
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/ui/_common_/notification.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: notification,
 };
 export const Default = {
-	components: {
-		notification,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				notification,
+			},
+			props: Object.keys(argTypes),
+			template: '<notification v-bind="$props" />',
+		};
 	},
-	template: '<notification />',
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/ui/_common_/statusbar-federation.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: statusbar_federation,
 };
 export const Default = {
-	components: {
-		statusbar_federation,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				statusbar_federation,
+			},
+			props: Object.keys(argTypes),
+			template: '<statusbar_federation v-bind="$props" />',
+		};
 	},
-	template: '<statusbar_federation />',
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/ui/_common_/statusbar-rss.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: statusbar_rss,
 };
 export const Default = {
-	components: {
-		statusbar_rss,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				statusbar_rss,
+			},
+			props: Object.keys(argTypes),
+			template: '<statusbar_rss v-bind="$props" />',
+		};
 	},
-	template: '<statusbar_rss />',
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/ui/_common_/statusbar-user-list.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: statusbar_user_list,
 };
 export const Default = {
-	components: {
-		statusbar_user_list,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				statusbar_user_list,
+			},
+			props: Object.keys(argTypes),
+			template: '<statusbar_user_list v-bind="$props" />',
+		};
 	},
-	template: '<statusbar_user_list />',
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/ui/_common_/statusbars.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: statusbars,
 };
 export const Default = {
-	components: {
-		statusbars,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				statusbars,
+			},
+			props: Object.keys(argTypes),
+			template: '<statusbars v-bind="$props" />',
+		};
 	},
-	template: '<statusbars />',
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/ui/_common_/stream-indicator.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: stream_indicator,
 };
 export const Default = {
-	components: {
-		stream_indicator,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				stream_indicator,
+			},
+			props: Object.keys(argTypes),
+			template: '<stream_indicator v-bind="$props" />',
+		};
 	},
-	template: '<stream_indicator />',
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/ui/_common_/upload.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: upload,
 };
 export const Default = {
-	components: {
-		upload,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				upload,
+			},
+			props: Object.keys(argTypes),
+			template: '<upload v-bind="$props" />',
+		};
 	},
-	template: '<upload />',
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/ui/classic.header.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: classic_header,
 };
 export const Default = {
-	components: {
-		classic_header,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				classic_header,
+			},
+			props: Object.keys(argTypes),
+			template: '<classic_header v-bind="$props" />',
+		};
 	},
-	template: '<classic_header />',
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/ui/classic.sidebar.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: classic_sidebar,
 };
 export const Default = {
-	components: {
-		classic_sidebar,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				classic_sidebar,
+			},
+			props: Object.keys(argTypes),
+			template: '<classic_sidebar v-bind="$props" />',
+		};
 	},
-	template: '<classic_sidebar />',
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/ui/classic.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: classic,
 };
 export const Default = {
-	components: {
-		classic,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				classic,
+			},
+			props: Object.keys(argTypes),
+			template: '<classic v-bind="$props" />',
+		};
 	},
-	template: '<classic />',
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/ui/deck.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: deck,
 };
 export const Default = {
-	components: {
-		deck,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				deck,
+			},
+			props: Object.keys(argTypes),
+			template: '<deck v-bind="$props" />',
+		};
 	},
-	template: '<deck />',
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/ui/deck/antenna-column.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: antenna_column,
 };
 export const Default = {
-	components: {
-		antenna_column,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				antenna_column,
+			},
+			props: Object.keys(argTypes),
+			template: '<antenna_column v-bind="$props" />',
+		};
 	},
-	template: '<antenna_column />',
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/ui/deck/channel-column.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: channel_column,
 };
 export const Default = {
-	components: {
-		channel_column,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				channel_column,
+			},
+			props: Object.keys(argTypes),
+			template: '<channel_column v-bind="$props" />',
+		};
 	},
-	template: '<channel_column />',
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/ui/deck/column-core.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: column_core,
 };
 export const Default = {
-	components: {
-		column_core,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				column_core,
+			},
+			props: Object.keys(argTypes),
+			template: '<column_core v-bind="$props" />',
+		};
 	},
-	template: '<column_core />',
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/ui/deck/column.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: column,
 };
 export const Default = {
-	components: {
-		column,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				column,
+			},
+			props: Object.keys(argTypes),
+			template: '<column v-bind="$props" />',
+		};
 	},
-	template: '<column />',
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/ui/deck/direct-column.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: direct_column,
 };
 export const Default = {
-	components: {
-		direct_column,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				direct_column,
+			},
+			props: Object.keys(argTypes),
+			template: '<direct_column v-bind="$props" />',
+		};
 	},
-	template: '<direct_column />',
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/ui/deck/list-column.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: list_column,
 };
 export const Default = {
-	components: {
-		list_column,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				list_column,
+			},
+			props: Object.keys(argTypes),
+			template: '<list_column v-bind="$props" />',
+		};
 	},
-	template: '<list_column />',
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/ui/deck/main-column.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: main_column,
 };
 export const Default = {
-	components: {
-		main_column,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				main_column,
+			},
+			props: Object.keys(argTypes),
+			template: '<main_column v-bind="$props" />',
+		};
 	},
-	template: '<main_column />',
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/ui/deck/mentions-column.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: mentions_column,
 };
 export const Default = {
-	components: {
-		mentions_column,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				mentions_column,
+			},
+			props: Object.keys(argTypes),
+			template: '<mentions_column v-bind="$props" />',
+		};
 	},
-	template: '<mentions_column />',
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/ui/deck/notifications-column.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: notifications_column,
 };
 export const Default = {
-	components: {
-		notifications_column,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				notifications_column,
+			},
+			props: Object.keys(argTypes),
+			template: '<notifications_column v-bind="$props" />',
+		};
 	},
-	template: '<notifications_column />',
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/ui/deck/tl-column.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: tl_column,
 };
 export const Default = {
-	components: {
-		tl_column,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				tl_column,
+			},
+			props: Object.keys(argTypes),
+			template: '<tl_column v-bind="$props" />',
+		};
 	},
-	template: '<tl_column />',
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/ui/deck/widgets-column.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: widgets_column,
 };
 export const Default = {
-	components: {
-		widgets_column,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				widgets_column,
+			},
+			props: Object.keys(argTypes),
+			template: '<widgets_column v-bind="$props" />',
+		};
 	},
-	template: '<widgets_column />',
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/ui/universal.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: universal,
 };
 export const Default = {
-	components: {
-		universal,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				universal,
+			},
+			props: Object.keys(argTypes),
+			template: '<universal v-bind="$props" />',
+		};
 	},
-	template: '<universal />',
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/ui/universal.widgets.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: universal_widgets,
 };
 export const Default = {
-	components: {
-		universal_widgets,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				universal_widgets,
+			},
+			props: Object.keys(argTypes),
+			template: '<universal_widgets v-bind="$props" />',
+		};
 	},
-	template: '<universal_widgets />',
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/ui/visitor.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: visitor,
 };
 export const Default = {
-	components: {
-		visitor,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				visitor,
+			},
+			props: Object.keys(argTypes),
+			template: '<visitor v-bind="$props" />',
+		};
 	},
-	template: '<visitor />',
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/ui/visitor/a.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: a,
 };
 export const Default = {
-	components: {
-		a,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				a,
+			},
+			props: Object.keys(argTypes),
+			template: '<a v-bind="$props" />',
+		};
 	},
-	template: '<a />',
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/ui/visitor/b.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: b,
 };
 export const Default = {
-	components: {
-		b,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				b,
+			},
+			props: Object.keys(argTypes),
+			template: '<b v-bind="$props" />',
+		};
 	},
-	template: '<b />',
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/ui/visitor/header.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: header,
 };
 export const Default = {
-	components: {
-		header,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				header,
+			},
+			props: Object.keys(argTypes),
+			template: '<header v-bind="$props" />',
+		};
 	},
-	template: '<header />',
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/ui/visitor/kanban.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: kanban,
 };
 export const Default = {
-	components: {
-		kanban,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				kanban,
+			},
+			props: Object.keys(argTypes),
+			template: '<kanban v-bind="$props" />',
+		};
 	},
-	template: '<kanban />',
 	parameters: {
 		layout: 'centered',
 	},

packages/frontend/src/ui/zen.stories.ts

@@ -5,10 +5,15 @@ const meta = {
 	component: zen,
 };
 export const Default = {
-	components: {
-		zen,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				zen,
+			},
+			props: Object.keys(argTypes),
+			template: '<zen v-bind="$props" />',
+		};
 	},
-	template: '<zen />',
 	parameters: {
 		layout: 'centered',
 	},