kioku-project · Julian702 · Jun 14, 2024 · Jun 19, 2024 · Jun 19, 2024
@@ -13,6 +13,7 @@ const config: StorybookConfig = {
 		"@storybook/addon-essentials",
 		"@storybook/addon-interactions",
 		"@storybook/addon-a11y",
+		"@chromatic-com/storybook",
 	],
 	async babel(config) {
 		config.plugins?.push("macros");
@@ -31,9 +32,10 @@ const config: StorybookConfig = {
 		name: "@storybook/nextjs",
 		options: {},
 	},
-	docs: {
-		autodocs: "tag",
-	},
 	staticDirs: ["../public"],
+	typescript: {
+		reactDocgen: "react-docgen",
+	},
+	docs: {},
 };
 export default config;
@@ -29,7 +29,6 @@ export const preview = {
 		},
 		mswDecorator,
 	],
-	actions: { argTypesRegex: "^on[A-Z].*" },
 	controls: {
 		matchers: {
 			color: /(background|color)$/i,
@@ -65,5 +64,6 @@ export const preview = {
 			},
 		},
 	},
+	tags: ["autodocs"],
 };
 export default preview;
@@ -5,7 +5,6 @@ import { Text } from "@/components/Text";
 const meta: Meta<typeof Text> = {
 	title: "Components/Text",
 	component: Text,
-	tags: ["autodocs"],
 	args: {},
 };
 

@@ -5,7 +5,6 @@ import { Deck } from "@/components/deck/Deck";
 const meta: Meta<typeof Deck> = {
 	title: "Components/Deck",
 	component: Deck,
-	tags: ["autodocs"],
 	args: {},
 };
 

@@ -1,12 +1,11 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { userEvent, within } from "@storybook/testing-library";
+import { userEvent, within } from "@storybook/test";
 
 import { Card } from "@/components/flashcard/Card";
 
 const meta: Meta<typeof Card> = {
 	title: "Components/Card",
 	component: Card,
-	tags: ["autodocs"],
 	args: {
 		card: {
 			cardID: "C-12345678",
@@ -39,17 +38,7 @@ export const Delete: Story = {
 	},
 	play: async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
-		const deleteButton = await canvas.getByTestId("deleteCardButtonId");
+		const deleteButton = canvas.getByTestId("deleteCardButtonId");
 		await userEvent.click(deleteButton);
 	},
 };
-
-export const Placeholder: Story = {
-	args: {
-		card: {
-			cardID: "",
-			sides: [],
-			deckID: "D-1234567",
-		},
-	},
-};
@@ -5,7 +5,6 @@ import { Flashcard } from "@/components/flashcard/Flashcard";
 const meta: Meta<typeof Flashcard> = {
 	title: "Components/Flashcard",
 	component: Flashcard,
-	tags: ["autodocs"],
 	args: {
 		card: {
 			cardID: "C-12345678",

@@ -1,12 +1,11 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { userEvent, within } from "@storybook/testing-library";
+import { userEvent, within } from "@storybook/test";
 
 import { InputField } from "@/components/form/InputField";
 
 const meta: Meta<typeof InputField> = {
 	title: "Form/InputField",
 	component: InputField,
-	tags: ["autodocs"],
 	args: {
 		id: "InputFieldId",
 	},
@@ -99,7 +98,7 @@ export const PasswordShown: Story = {
 	},
 	play: async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
-		const icon = await canvas.getByTestId("inputFieldIconId");
+		const icon = canvas.getByTestId("inputFieldIconId");
 		await userEvent.click(icon);
 	},
 };

@@ -5,7 +5,6 @@ import { TextArea } from "@/components/form/TextArea";
 const meta: Meta<typeof TextArea> = {
 	title: "Form/TextArea",
 	component: TextArea,
-	tags: ["autodocs"],
 	args: {
 		id: "TextAreaId",
 	},

@@ -5,7 +5,6 @@ import { Badge } from "@/components/graphics/Badge";
 const meta: Meta<typeof Badge> = {
 	title: "Components/Badge",
 	component: Badge,
-	tags: ["autodocs"],
 	args: {},
 };
 

@@ -5,7 +5,6 @@ import { IconLabel } from "@/components/graphics/IconLabel";
 const meta: Meta<typeof IconLabel> = {
 	title: "Graphics/IconLabel",
 	component: IconLabel,
-	tags: ["autodocs"],
 	args: {},
 };
 

@@ -5,7 +5,6 @@ import LoadingSpinner from "@/components/graphics/LoadingSpinner";
 const meta: Meta<typeof LoadingSpinner> = {
 	title: "Graphics/LoadingSpinner",
 	component: LoadingSpinner,
-	tags: ["autodocs"],
 	args: {
 		className: "w-16",
 	},

@@ -5,8 +5,9 @@ import { Logo } from "@/components/graphics/Logo";
 const meta: Meta<typeof Logo> = {
 	title: "Graphics/Logo",
 	component: Logo,
-	tags: ["autodocs"],
-	args: {},
+	args: {
+		href: "/",
+	},
 };
 
 export default meta;

@@ -1,12 +1,11 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { userEvent, within } from "@storybook/testing-library";
+import { userEvent, within } from "@storybook/test";
 
 import Member from "@/components/group/Member";
 
 const meta: Meta<typeof Member> = {
 	title: "Components/Member",
 	component: Member,
-	tags: ["autodocs"],
 	args: {},
 };
 
@@ -57,7 +56,7 @@ export const Delete: Story = {
 	},
 	play: async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
-		const deleteButton = await canvas.getByTestId("deleteUserButtonId");
+		const deleteButton = canvas.getByTestId("deleteUserButtonId");
 		await userEvent.click(deleteButton);
 	},
 };

@@ -5,7 +5,6 @@ import { Button } from "@/components/input/Button";
 const meta: Meta<typeof Button> = {
 	title: "Input/Button",
 	component: Button,
-	tags: ["autodocs"],
 	args: {
 		id: "ButtonId",
 	},

@@ -5,7 +5,6 @@ import { DangerAction } from "@/components/input/DangerAction";
 const meta: Meta<typeof DangerAction> = {
 	title: "Input/DangerAction",
 	component: DangerAction,
-	tags: ["autodocs"],
 	args: {
 		id: "dangerActionId",
 	},

@@ -5,7 +5,6 @@ import { InputAction } from "@/components/input/InputAction";
 const meta: Meta<typeof InputAction> = {
 	title: "Input/InputAction",
 	component: InputAction,
-	tags: ["autodocs"],
 	args: {
 		id: "inputActionId",
 	},

@@ -5,7 +5,6 @@ import { SelectionField } from "@/components/input/SelectionField";
 const meta: Meta<typeof SelectionField> = {
 	title: "Input/SelectionField",
 	component: SelectionField,
-	tags: ["autodocs"],
 	args: {},
 };
 

@@ -5,7 +5,6 @@ import { ToggleAction } from "@/components/input/ToggleAction";
 const meta: Meta<typeof ToggleAction> = {
 	title: "Input/ToggleAction",
 	component: ToggleAction,
-	tags: ["autodocs"],
 	args: {
 		id: "toggleActionId",
 		choices: ["ONE", "TWO", "THREE"],

@@ -5,7 +5,6 @@ import { ToggleButtonGroup } from "@/components/input/ToggleButtonGroup";
 const meta: Meta<typeof ToggleButtonGroup> = {
 	title: "Input/ToggleButtonGroup",
 	component: ToggleButtonGroup,
-	tags: ["autodocs"],
 	args: {
 		id: "ButtonId",
 		choices: ["ONE", "TWO", "THREE"],

@@ -5,7 +5,6 @@ import { Header } from "@/components/layout/Header";
 const meta: Meta<typeof Header> = {
 	title: "Layout/Header",
 	component: Header,
-	tags: ["autodocs"],
 	args: {},
 };
 

@@ -5,7 +5,6 @@ import { Section } from "@/components/layout/Section";
 const meta: Meta<typeof Section> = {
 	title: "Layout/Section",
 	component: Section,
-	tags: ["autodocs"],
 	args: {
 		id: "sectionId",
 	},

@@ -5,7 +5,6 @@ import { Navbar } from "@/components/navigation/Navbar";
 const meta: Meta<typeof Navbar> = {
 	title: "Navigation/NavBar",
 	component: Navbar,
-	tags: ["autodocs"],
 	args: {},
 };
 

@@ -5,7 +5,6 @@ import { TabHeader } from "@/components/navigation/Tabs/TabHeader";
 const meta: Meta<typeof TabHeader> = {
 	title: "Navigation/Tabs/TabHeader",
 	component: TabHeader,
-	tags: ["autodocs"],
 	args: {
 		id: "TabHeaderId",
 	},

@@ -5,7 +5,6 @@ import { Statistic } from "@/components/statistics/Statistic";
 const meta: Meta<typeof Statistic> = {
 	title: "Statistics/Statistic",
 	component: Statistic,
-	tags: ["autodocs"],
 	args: {
 		id: "StatisticId",
 	},

@@ -5,7 +5,6 @@ import { StatisticOverview } from "@/components/statistics/StatisticOverview";
 const meta: Meta<typeof StatisticOverview> = {
 	title: "Statistics/StatisticOverview",
 	component: StatisticOverview,
-	tags: ["autodocs"],
 	args: {
 		id: "StatisticId",
 	},