fix: Storybook stories issues

Bedrock-im · Nov 4, 2024 · 2e98b4c · 2e98b4c
1 parent 3706454
commit 2e98b4c
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 39 deletions.
diff --git a/front/src/components/ui/checkbox.stories.tsx b/front/src/components/ui/checkbox.stories.tsx
@@ -1,12 +1,13 @@
 import { Meta, StoryObj } from "@storybook/react";
 
 import { Checkbox, CheckboxProps } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
 
 const meta: Meta<CheckboxProps> = {
 	component: Checkbox,
 	title: "Checkbox",
 	args: {
-		children: "Enable checkbox",
+		disabled: false,
 		className: "",
 	},
 	argTypes: {
@@ -22,7 +23,12 @@ const meta: Meta<CheckboxProps> = {
 };
 type Story = StoryObj<CheckboxProps>;
 
-const Render = (args: CheckboxProps) => <Checkbox {...args} />;
+const Render = (args: CheckboxProps) => (
+	<div className="flex items-center gap-x-2">
+		<Checkbox id="enable" {...args} />
+		<Label htmlFor="enable">Enable cookies</Label>
+	</div>
+);
 
 export const LightMode: Story = {
 	args: {

diff --git a/front/src/components/ui/input.stories.tsx b/front/src/components/ui/input.stories.tsx
@@ -6,15 +6,10 @@ const meta: Meta<InputProps> = {
 	component: Input,
 	title: "Input",
 	args: {
-		value: "Text input",
 		disabled: false,
 		className: "",
 	},
 	argTypes: {
-		value: {
-			type: "string",
-			control: "text",
-		},
 		disabled: {
 			type: "boolean",
 			control: "boolean",
@@ -27,11 +22,10 @@ const meta: Meta<InputProps> = {
 };
 type Story = StoryObj<InputProps>;
 
-const Render = (args: InputProps) => <Input {...args} />;
+const Render = (args: InputProps) => <Input {...args} defaultValue="Text value" />;
 
 export const LightMode: Story = {
 	args: {
-		value: "Text input",
 		disabled: false,
 		className: "",
 	},
@@ -45,7 +39,6 @@ export const LightMode: Story = {
 
 export const DarkMode: Story = {
 	args: {
-		value: "Text input",
 		disabled: false,
 		className: "",
 	},

diff --git a/front/src/components/ui/slider.stories.tsx b/front/src/components/ui/slider.stories.tsx
@@ -1,34 +1,15 @@
 import { Meta, StoryObj } from "@storybook/react";
 
-import { Slider, SliderProps as DefaultSliderProps } from "@/components/ui/slider";
+import { Slider, SliderProps } from "@/components/ui/slider";
 
-type SliderProps = Omit<DefaultSliderProps, "value"> & {
-	value: number;
-};
-
-const meta: Meta<DefaultSliderProps> = {
+const meta: Meta<SliderProps> = {
 	component: Slider,
 	title: "Slider",
 	args: {
-		value: [20],
-		min: 0,
-		max: 100,
 		disabled: false,
 		className: "",
 	},
 	argTypes: {
-		value: {
-			type: "number",
-			control: "number",
-		},
-		min: {
-			type: "number",
-			control: "number",
-		},
-		max: {
-			type: "number",
-			control: "number",
-		},
 		disabled: {
 			type: "boolean",
 			control: "boolean",
@@ -41,13 +22,10 @@ const meta: Meta<DefaultSliderProps> = {
 };
 type Story = StoryObj<SliderProps>;
 
-const Render = (args: SliderProps) => <Slider {...args} value={[args.value]} />;
+const Render = (args: SliderProps) => <Slider {...args} defaultValue={[20]} min={0} max={100} />;
 
 export const LightMode: Story = {
 	args: {
-		value: 20,
-		min: 0,
-		max: 100,
 		disabled: false,
 		className: "",
 	},
@@ -61,9 +39,6 @@ export const LightMode: Story = {
 
 export const DarkMode: Story = {
 	args: {
-		value: 20,
-		min: 0,
-		max: 100,
 		disabled: false,
 		className: "",
 	},

diff --git a/front/src/components/ui/switch.stories.tsx b/front/src/components/ui/switch.stories.tsx
@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from "@storybook/react";
 
+import { Label } from "@/components/ui/label";
 import { Switch, SwitchProps } from "@/components/ui/switch";
 
 const meta: Meta<SwitchProps> = {
@@ -22,7 +23,12 @@ const meta: Meta<SwitchProps> = {
 };
 type Story = StoryObj<SwitchProps>;
 
-const Render = (args: SwitchProps) => <Switch {...args} />;
+const Render = (args: SwitchProps) => (
+	<div className="flex items-center gap-x-2">
+		<Switch id="enable" {...args} />
+		<Label htmlFor="enable">Enable cookies</Label>
+	</div>
+);
 
 export const LightMode: Story = {
 	args: {