Skip to content

Commit 2fd9ae0

Browse files
ntatoudntatoud
committed
docs: stories for RadioGroup and FieldRadioGroup
1 parent f0388f9 commit 2fd9ae0

File tree

2 files changed

+179
-26
lines changed

2 files changed

+179
-26
lines changed

‎app/components/form/field-radio-group/docs.stories.tsx

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
import { zodResolver } from '@hookform/resolvers/zod';
2+
import { useForm } from 'react-hook-form';
3+
import { z } from 'zod';
4+
5+
import { zu } from '@/lib/zod/zod-utils';
6+
7+
import { FormFieldController } from '@/components/form';
8+
import { onSubmit } from '@/components/form/docs.utils';
9+
import { Button } from '@/components/ui/button';
10+
11+
import { Form, FormField, FormFieldHelper, FormFieldLabel } from '../';
12+
13+
export default {
14+
title: 'Form/FieldRadioGroup',
15+
};
16+
17+
const zFormSchema = () =>
18+
z.object({
19+
bear: zu.string.nonEmpty(z.string(), {
20+
required_error: 'Please select your favorite bearstronaut',
21+
}),
22+
});
23+
24+
const formOptions = {
25+
mode: 'onBlur',
26+
resolver: zodResolver(zFormSchema()),
27+
defaultValues: {
28+
bear: '',
29+
},
30+
} as const;
31+
32+
const options = [
33+
{ value: 'bearstrong', label: 'Bearstrong' },
34+
{ value: 'pawdrin', label: 'Buzz Pawdrin' },
35+
{ value: 'grizzlyrin', label: 'Yuri Grizzlyrin' },
36+
];
37+
38+
export const Default = () => {
39+
const form = useForm(formOptions);
40+
41+
return (
42+
<Form {...form} onSubmit={onSubmit}>
43+
<div className="flex flex-col gap-4">
44+
<FormField>
45+
<FormFieldLabel>Bearstronaut</FormFieldLabel>
46+
<FormFieldHelper>Select your favorite bearstronaut</FormFieldHelper>
47+
<FormFieldController
48+
type="radio-group"
49+
control={form.control}
50+
name="bear"
51+
options={options}
52+
/>
53+
</FormField>
54+
<div>
55+
<Button type="submit">Submit</Button>
56+
</div>
57+
</div>
58+
</Form>
59+
);
60+
};
61+
62+
export const DefaultValue = () => {
63+
const form = useForm({
64+
...formOptions,
65+
defaultValues: {
66+
bear: 'pawdrin',
67+
},
68+
});
69+
70+
return (
71+
<Form {...form} onSubmit={onSubmit}>
72+
<div className="flex flex-col gap-4">
73+
<FormField>
74+
<FormFieldLabel>Bearstronaut</FormFieldLabel>
75+
<FormFieldHelper>Select your favorite bearstronaut</FormFieldHelper>
76+
<FormFieldController
77+
control={form.control}
78+
type="radio-group"
79+
name="bear"
80+
options={options}
81+
/>
82+
</FormField>
83+
<div>
84+
<Button type="submit">Submit</Button>
85+
</div>
86+
</div>
87+
</Form>
88+
);
89+
};
90+
91+
export const Disabled = () => {
92+
const form = useForm({
93+
...formOptions,
94+
defaultValues: {
95+
bear: 'pawdrin',
96+
},
97+
});
98+
99+
return (
100+
<Form {...form} onSubmit={onSubmit}>
101+
<div className="flex flex-col gap-4">
102+
<FormField>
103+
<FormFieldLabel>Bearstronaut</FormFieldLabel>
104+
<FormFieldHelper>Select your favorite bearstronaut</FormFieldHelper>
105+
<FormFieldController
106+
control={form.control}
107+
type="radio-group"
108+
name="bear"
109+
options={options}
110+
disabled
111+
/>
112+
</FormField>
113+
<div>
114+
<Button type="submit">Submit</Button>
115+
</div>
116+
</div>
117+
</Form>
118+
);
119+
};
120+
121+
export const Row = () => {
122+
const form = useForm(formOptions);
123+
124+
return (
125+
<Form {...form} onSubmit={onSubmit}>
126+
<div className="flex flex-col gap-4">
127+
<FormField>
128+
<FormFieldLabel>Bearstronaut</FormFieldLabel>
129+
<FormFieldHelper>Select your favorite bearstronaut</FormFieldHelper>
130+
<FormFieldController
131+
control={form.control}
132+
type="radio-group"
133+
name="bear"
134+
options={options}
135+
className="flex-row gap-4"
136+
/>
137+
</FormField>
138+
<div>
139+
<Button type="submit">Submit</Button>
140+
</div>
141+
</div>
142+
</Form>
143+
);
144+
};
145+
146+
export const WithDisabledOption = () => {
147+
const form = useForm(formOptions);
148+
149+
const optionsWithDisabled = [
150+
{ value: 'bearstrong', label: 'Bearstrong' },
151+
{ value: 'pawdrin', label: 'Buzz Pawdrin' },
152+
{ value: 'grizzlyrin', label: 'Yuri Grizzlyrin', disabled: true },
153+
];
154+
155+
return (
156+
<Form {...form} onSubmit={onSubmit}>
157+
<div className="flex flex-col gap-4">
158+
<FormField>
159+
<FormFieldLabel>Bearstronaut</FormFieldLabel>
160+
<FormFieldHelper>Select your favorite bearstronaut</FormFieldHelper>
161+
<FormFieldController
162+
control={form.control}
163+
type="radio-group"
164+
name="bear"
165+
options={optionsWithDisabled}
166+
className="flex-row gap-4"
167+
/>
168+
</FormField>
169+
<div>
170+
<Button type="submit">Submit</Button>
171+
</div>
172+
</div>
173+
</Form>
174+
);
175+
};

‎app/components/ui/radio-group.stories.tsx

Lines changed: 4 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -3,35 +3,13 @@ import type { Meta } from '@storybook/react';
33
import { Radio, RadioGroup } from '@/components/ui/radio-group';
44

55
export default {
6-
title: 'Radio Group',
6+
title: 'RadioGroup',
77
} satisfies Meta<typeof RadioGroup>;
88

99
const astrobears = [
10-
{
11-
value: 'bearstrong',
12-
label: 'Bearstrong',
13-
},
14-
{
15-
value: 'pawdrin',
16-
label: 'Buzz Pawdrin',
17-
},
18-
{
19-
value: 'grizzlyrin',
20-
label: 'Yuri Grizzlyrin',
21-
},
22-
{
23-
value: 'jemibear',
24-
label: 'Mae Jemibear',
25-
disabled: true,
26-
},
27-
{
28-
value: 'ridepaw',
29-
label: 'Sally Ridepaw',
30-
},
31-
{
32-
value: 'michaelpawanderson',
33-
label: 'Michael Paw Anderson',
34-
},
10+
{ value: 'bearstrong', label: 'Bearstrong' },
11+
{ value: 'pawdrin', label: 'Buzz Pawdrin' },
12+
{ value: 'grizzlyrin', label: 'Yuri Grizzlyrin' },
3513
] as const;
3614

3715
export const Default = () => {

0 commit comments

Comments
 (0)