Skip to content

Commit b09e2ec

Browse files
cyber937cyber937
committed
Stories
1 parent b826266 commit b09e2ec

File tree

8 files changed

+493
-31
lines changed

8 files changed

+493
-31
lines changed

‎src/components/FormExample.stories.tsx‎

Lines changed: 32 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -14,36 +14,41 @@ type FormValues = {
1414
lastName: string;
1515
isStudent: boolean;
1616
comment: string;
17-
gender: string;
18-
fruit: string | undefined;
17+
fruit: string;
18+
language: string;
1919
taggle: boolean;
2020
phoneNumber: string;
2121
};
2222

23-
const MyForm = () => {
23+
const Form = () => {
2424
const methods = useForm<FormValues>({
25-
defaultValues: { lastName: "" },
25+
defaultValues: {
26+
lastName: "",
27+
firstName: "",
28+
isStudent: false,
29+
comment: "",
30+
fruit: "",
31+
language: "",
32+
taggle: false,
33+
phoneNumber: ""
34+
},
2635
});
2736

28-
const isStudent = methods.watch("isStudent");
29-
const fruit = methods.watch("fruit");
30-
const taggle = methods.watch("taggle");
31-
3237
const onSubmit = (data: FormValues) => {
3338
console.log("Submitted:", data);
3439
};
3540

3641
const radioButtonOptions = [
37-
{ label: "男性", value: "male" },
38-
{ label: "女性", value: "female" },
39-
{ label: "その他", value: "other" },
42+
{ label: "Apple", value: "apple" },
43+
{ label: "Banana", value: "banana" },
44+
{ label: "Orange", value: "orange" },
4045
];
4146

4247
const selectOptions = [
43-
{ label: "選んでください", value: undefined },
44-
{ label: "りんご", value: "apple" },
45-
{ label: "みかん", value: "orange" },
46-
{ label: "バナナ", value: "banana" },
48+
{ label: "Please select", value: "" },
49+
{ label: "English", value: "english" },
50+
{ label: "Spanish", value: "spanish" },
51+
{ label: "French", value: "french" },
4752
];
4853

4954
return (
@@ -74,7 +79,6 @@ const MyForm = () => {
7479
name="isStudent"
7580
control={methods.control}
7681
/>
77-
{isStudent && <div>Yes, Student</div>}
7882
<div>
7983
<RHFTextArea
8084
label="Comment"
@@ -87,29 +91,26 @@ const MyForm = () => {
8791
<div>
8892
<RHFRadioGroup
8993
options={radioButtonOptions}
90-
name="gender"
91-
defaultValue="female"
92-
rules={{ required: "Gender is required" }}
94+
name="fruit"
95+
rules={{ required: "Fruite is required" }}
9396
control={methods.control}
9497
/>
9598
</div>
9699
<div>
97100
<RHFSelect
98101
options={selectOptions}
99-
name="fruit"
100-
rules={{ required: "Fruit is required" }}
102+
name="language"
103+
rules={{ validate: (value) => value !== "" || "Please select a language" }}
101104
control={methods.control}
102105
/>
103-
<div>{fruit}</div>
104106
</div>
105107
<div>
106108
<RHFSwitch
107109
name="taggle"
108110
control={methods.control}
109-
onLable="オン"
110-
offLable="オフ"
111+
onLable="On"
112+
offLable="Off"
111113
/>
112-
<div>{taggle}</div>
113114
</div>
114115
<div>
115116
<RHFPhoneInput
@@ -125,18 +126,18 @@ const MyForm = () => {
125126
);
126127
};
127128

128-
const meta: Meta<typeof RHFInput> = {
129-
title: "Components/Form",
130-
component: RHFInput,
129+
const meta: Meta<typeof Form> = {
130+
title: "Form",
131+
component: Form,
131132
};
132133

133134
export default meta;
134-
type Story = StoryObj<typeof RHFInput>;
135+
type Story = StoryObj<typeof Form>;
135136

136137
export const Default: Story = {
137138
render: () => (
138-
<UIColorProvider initialColor="yellow">
139-
<MyForm />
139+
<UIColorProvider initialColor="red">
140+
<Form />
140141
</UIColorProvider>
141142
),
142143
};

‎src/components/RHFCheckbox/RHFCheckbox.stories.tsx‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import type { Meta, StoryObj } from "@storybook/react-vite";
2+
import { Button, GroupBox } from "cyberseeds-ui";
3+
import { useEffect, useState } from "react";
4+
import { FormProvider, useForm } from "react-hook-form";
5+
import { RHFCheckbox } from "./RHFCheckbox";
6+
7+
type FormValues = {
8+
isStudent: boolean;
9+
};
10+
11+
const MyForm = () => {
12+
13+
const [formResult, setFormResult] = useState<FormValues>({ isStudent: false })
14+
15+
useEffect(() => {
16+
}, [formResult])
17+
18+
const methods = useForm<FormValues>({
19+
defaultValues: { isStudent: false },
20+
});
21+
22+
const isStudent = methods.watch("isStudent");
23+
24+
const onSubmit = (data: FormValues) => {
25+
setFormResult(data)
26+
console.log("Submitted:", data);
27+
};
28+
29+
return (
30+
<div className="space-y-5">
31+
<FormProvider {...methods}>
32+
<form onSubmit={methods.handleSubmit(onSubmit)} className="space-y-3">
33+
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2 sm:gap-4">
34+
<RHFCheckbox
35+
label="Is Student?"
36+
name="isStudent"
37+
control={methods.control}
38+
/>
39+
</div>
40+
<Button type="submit">Submit</Button>
41+
</form>
42+
</FormProvider>
43+
<GroupBox label="Form Result:">
44+
<p>isStudent: {formResult.isStudent ? "true" : "false"}</p>
45+
</GroupBox>
46+
</div>
47+
)
48+
}
49+
50+
const meta: Meta<typeof RHFCheckbox> = {
51+
title: "Components/RHFCheckbox",
52+
component: RHFCheckbox,
53+
};
54+
55+
export default meta;
56+
type Story = StoryObj<typeof RHFCheckbox>;
57+
58+
export const Default: Story = {
59+
render: () => (
60+
<MyForm />
61+
),
62+
};

‎src/components/RHFInput/RHFInput.stories.tsx‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import type { Meta, StoryObj } from "@storybook/react-vite";
2+
import { Button, GroupBox } from "cyberseeds-ui";
3+
import { useEffect, useState } from "react";
4+
import { FormProvider, useForm } from "react-hook-form";
5+
import { RHFInput } from "./RHFInput";
6+
7+
type FormValues = {
8+
firstName: string;
9+
lastName: string;
10+
};
11+
12+
const MyForm = () => {
13+
14+
const [formResult, setFormResult] = useState<FormValues>({ firstName: "", lastName: "" })
15+
16+
useEffect(() => {
17+
}, [formResult])
18+
19+
const methods = useForm<FormValues>({
20+
defaultValues: { firstName: "", lastName: "" },
21+
});
22+
23+
const onSubmit = (data: FormValues) => {
24+
setFormResult(data)
25+
};
26+
27+
return (
28+
<div className="space-y-5">
29+
<FormProvider {...methods}>
30+
<form onSubmit={methods.handleSubmit(onSubmit)} className="space-y-3">
31+
<div className="space-y-3">
32+
<div>
33+
<RHFInput
34+
label="First Name"
35+
name="firstName"
36+
control={methods.control}
37+
rules={{ required: "First Name is required" }}
38+
placeholder="First Name"
39+
/>
40+
</div>
41+
<div>
42+
<RHFInput
43+
label="Last Name"
44+
name="lastName"
45+
control={methods.control}
46+
rules={{ required: "Last Name is required" }}
47+
placeholder="Last Name"
48+
/>
49+
</div>
50+
</div>
51+
<Button type="submit">Submit</Button>
52+
</form>
53+
</FormProvider>
54+
<GroupBox label="Form Result:">
55+
<p>firstName: {formResult.firstName}</p>
56+
<p>lastName: {formResult.lastName}</p>
57+
</GroupBox>
58+
</div>
59+
)
60+
}
61+
62+
const meta: Meta<typeof RHFInput> = {
63+
title: "Components/RHFInput",
64+
component: RHFInput,
65+
};
66+
67+
export default meta;
68+
type Story = StoryObj<typeof RHFInput>;
69+
70+
export const Default: Story = {
71+
render: () => (
72+
<MyForm />
73+
),
74+
};

‎src/components/RHFPhoneInput/RHFPhoneInput.stories.tsx‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import type { Meta, StoryObj } from "@storybook/react-vite";
2+
import { Button, GroupBox } from "cyberseeds-ui";
3+
import { useEffect, useState } from "react";
4+
import { FormProvider, useForm } from "react-hook-form";
5+
import { RHFPhoneInput } from "./RHFPhoneInput";
6+
7+
type FormValues = {
8+
phoneNumber: string;
9+
};
10+
11+
const MyForm = () => {
12+
13+
const [formResult, setFormResult] = useState<FormValues>({ phoneNumber: "" })
14+
15+
useEffect(() => {
16+
}, [formResult])
17+
18+
const methods = useForm<FormValues>({
19+
defaultValues: { phoneNumber: "" },
20+
});
21+
22+
const onSubmit = (data: FormValues) => {
23+
setFormResult(data)
24+
};
25+
26+
return (
27+
<div className="space-y-5">
28+
<FormProvider {...methods}>
29+
<form onSubmit={methods.handleSubmit(onSubmit)} className="space-y-3">
30+
<div className="space-y-3">
31+
<div>
32+
<RHFPhoneInput
33+
label="Phone Number"
34+
name="phoneNumber"
35+
rules={{ required: "Phone Number is required" }}
36+
control={methods.control}
37+
/>
38+
</div>
39+
</div>
40+
<Button type="submit">Submit</Button>
41+
</form>
42+
</FormProvider>
43+
<GroupBox label="Form Result:">
44+
<p>phoneNumber: {formResult.phoneNumber}</p>
45+
</GroupBox>
46+
</div>
47+
)
48+
}
49+
50+
const meta: Meta<typeof RHFPhoneInput> = {
51+
title: "Components/RHFPhoneInput",
52+
component: RHFPhoneInput,
53+
};
54+
55+
export default meta;
56+
type Story = StoryObj<typeof RHFPhoneInput>;
57+
58+
export const Default: Story = {
59+
render: () => (
60+
<MyForm />
61+
),
62+
};

0 commit comments

Comments
 (0)