Skip to content

Commit 7f3bda4

Browse files
ntatoudntatoud
authored
feat(v3): CheckboxGroup, FieldCheckboxGroup (#602)
* feat(wip/FieldCheckboxGroup): CheckboxGroup, stories and small style adjustments * wip: CheckboxGroup * fix: improve checkbox-group api * wip: working version * feat: wip: Easy to use version * fix: remove FieldCheckboxGroup for now * refactor: simple checkbox group * feat(field-checkbox-group): add stories and tests * fix: small issues * fix: remove unused types
1 parent d04bdfd commit 7f3bda4

File tree

9 files changed

+661
-5
lines changed

9 files changed

+661
-5
lines changed

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

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

0 commit comments

Comments
 (0)