fix: update FieldCheckbox and FieldSwitch API

BearStudio · Jul 22, 2024 · 2eccbc8 · 2eccbc8
1 parent 0b07555
commit 2eccbc8
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 71 deletions.
diff --git a/src/components/Form/FieldCheckbox/FieldCheckbox.spec.tsx b/src/components/Form/FieldCheckbox/FieldCheckbox.spec.tsx
@@ -26,9 +26,7 @@ test('update value', async () => {
  type="checkbox"
  control={form.control}
  name="doit"
- checkboxProps={{
- children: 'Yes, do it!',
- }}
+ label="Yes, do it!"
  />
  </FormField>
  )}
@@ -57,9 +55,7 @@ test('double click', async () => {
  type="checkbox"
  control={form.control}
  name="doit"
- checkboxProps={{
- children: 'Yes, do it!',
- }}
+ label="Yes, do it!"
  />
  </FormField>
  )}
@@ -90,9 +86,7 @@ test('default value', async () => {
  type="checkbox"
  control={form.control}
  name="doit"
- checkboxProps={{
- children: 'Yes, do it!',
- }}
+ label="Yes, do it!"
  />
  </FormField>
  )}
@@ -123,7 +117,7 @@ test('disabled', async () => {
  control={form.control}
  name="doit"
  isDisabled
- checkboxProps={{ children: 'Yes, do it!' }}
+ label="Yes, do it!"
  />
  </FormField>
  )}

diff --git a/src/components/Form/FieldCheckbox/docs.stories.tsx b/src/components/Form/FieldCheckbox/docs.stories.tsx
@@ -1,4 +1,5 @@
 import { Box, Button, Stack } from '@chakra-ui/react';
+import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
@@ -17,11 +18,16 @@ export default {
 type FormSchema = z.infer<ReturnType<typeof zFormSchema>>;
 const zFormSchema = () =>
  z.object({
- doit: z.boolean().default(false),
+ doit: z.literal(true),
  });
 
+const formOptions = {
+ mode: 'onBlur',
+ resolver: zodResolver(zFormSchema()),
+} as const;
+
 export const Default = () => {
- const form = useForm<FormSchema>();
+ const form = useForm<FormSchema>(formOptions);
 
  return (
  <Form {...form} onSubmit={(values) => console.log(values)}>
@@ -32,9 +38,7 @@ export const Default = () => {
  control={form.control}
  type="checkbox"
  name="doit"
- checkboxProps={{
- children: 'Yes, do it!',
- }}
+ label="Yes, do it!"
  />
  <FormFieldHelper>Helper</FormFieldHelper>
  </FormField>
@@ -50,6 +54,7 @@ export const Default = () => {
 
 export const DefaultValues = () => {
  const form = useForm<FormSchema>({
+ ...formOptions,
  defaultValues: {
  doit: true,
  },
@@ -64,9 +69,7 @@ export const DefaultValues = () => {
  control={form.control}
  type="checkbox"
  name="doit"
- checkboxProps={{
- children: 'Yes, do it!',
- }}
+ label="Yes, do it!"
  />
  <FormFieldHelper>Helper</FormFieldHelper>
  </FormField>
@@ -81,7 +84,7 @@ export const DefaultValues = () => {
 };
 
 export const Disabled = () => {
- const form = useForm<FormSchema>();
+ const form = useForm<FormSchema>(formOptions);
 
  return (
  <Form {...form} onSubmit={(values) => console.log(values)}>
@@ -93,9 +96,7 @@ export const Disabled = () => {
  type="checkbox"
  name="doit"
  isDisabled
- checkboxProps={{
- children: 'Yes, do it!',
- }}
+ label="Yes, do it!"
  />
  <FormFieldHelper>Helper</FormFieldHelper>
  </FormField>
@@ -111,6 +112,7 @@ export const Disabled = () => {
 
 export const DisabledDefaultValues = () => {
  const form = useForm<FormSchema>({
+ ...formOptions,
  defaultValues: {
  doit: true,
  },
@@ -126,9 +128,7 @@ export const DisabledDefaultValues = () => {
  type="checkbox"
  name="doit"
  isDisabled
- checkboxProps={{
- children: 'Yes, do it!',
- }}
+ label="Yes, do it!"
  />
  <FormFieldHelper>Helper</FormFieldHelper>
  </FormField>

diff --git a/src/components/Form/FieldCheckbox/index.tsx b/src/components/Form/FieldCheckbox/index.tsx
@@ -1,4 +1,6 @@
-import { Checkbox, CheckboxProps, Flex } from '@chakra-ui/react';
+import { ReactNode } from 'react';
+
+import { Checkbox, CheckboxProps, Flex, FlexProps } from '@chakra-ui/react';
 import {
  Controller,
  ControllerRenderProps,
@@ -16,13 +18,15 @@ export type FieldCheckboxProps<
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 > = {
  type: 'checkbox';
+ label?: ReactNode;
  checkboxProps?: RemoveFromType<
  RemoveFromType<
- Omit<CheckboxProps, 'isChecked' | 'isDisabled'>,
+ Omit<CheckboxProps, 'isChecked' | 'isDisabled' | 'children'>,
  CheckboxRootProps
  >,
  ControllerRenderProps
  >;
+ containerProps?: FlexProps;
 } & CheckboxRootProps &
  FieldCommonProps<TFieldValues, TName>;
 
@@ -36,13 +40,16 @@ export const FieldCheckbox = <
  <Controller
  {...props}
  render={({ field: { value, ...field } }) => (
- <Flex direction="column" gap={1.5}>
+ <Flex flexDirection="column" gap={1} flex={1} {...props.containerProps}>
  <Checkbox
+ size={props.size}
  isChecked={!!value}
  isDisabled={props.isDisabled}
  {...props.checkboxProps}
  {...field}
- />
+ >
+ {props.label}
+ </Checkbox>
  <FormFieldError />
  </Flex>
  )}

diff --git a/src/components/Form/FieldSwitch/FieldSwitch.spec.tsx b/src/components/Form/FieldSwitch/FieldSwitch.spec.tsx
@@ -26,7 +26,7 @@ test('update value', async () => {
  type="switch"
  control={form.control}
  name="doit"
- switchProps={{ children: 'Yes, do it!' }}
+ label="Yes, do it!"
  />
  </FormField>
  )}
@@ -55,7 +55,7 @@ test('double click', async () => {
  type="switch"
  control={form.control}
  name="doit"
- switchProps={{ children: 'Yes, do it!' }}
+ label="Yes, do it!"
  />
  </FormField>
  )}
@@ -86,7 +86,7 @@ test('default value', async () => {
  type="switch"
  control={form.control}
  name="doit"
- switchProps={{ children: 'Yes, do it!' }}
+ label="Yes, do it!"
  />
  </FormField>
  )}
@@ -117,7 +117,7 @@ test('disabled', async () => {
  control={form.control}
  name="doit"
  isDisabled
- switchProps={{ children: 'Yes, do it!' }}
+ label="Yes, do it!"
  />
  </FormField>
  )}

diff --git a/src/components/Form/FieldSwitch/docs.stories.tsx b/src/components/Form/FieldSwitch/docs.stories.tsx
@@ -1,4 +1,5 @@
 import { Box, Button, Stack } from '@chakra-ui/react';
+import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
@@ -8,7 +9,7 @@ import {
  FormFieldController,
  FormFieldHelper,
  FormFieldLabel,
-} from '..';
+} from '../';
 
 export default {
  title: 'Form/FieldSwitch',
@@ -17,11 +18,16 @@ export default {
 type FormSchema = z.infer<ReturnType<typeof zFormSchema>>;
 const zFormSchema = () =>
  z.object({
- doit: z.boolean().default(false),
+ doit: z.literal(true),
  });
 
+const formOptions = {
+ mode: 'onBlur',
+ resolver: zodResolver(zFormSchema()),
+} as const;
+
 export const Default = () => {
- const form = useForm<FormSchema>();
+ const form = useForm<FormSchema>(formOptions);
 
  return (
  <Form {...form} onSubmit={(values) => console.log(values)}>
@@ -32,7 +38,7 @@ export const Default = () => {
  control={form.control}
  type="switch"
  name="doit"
- switchProps={{ children: 'Yes, do it!' }}
+ label="Yes, do it!"
  />
  <FormFieldHelper>Helper</FormFieldHelper>
  </FormField>
@@ -48,6 +54,7 @@ export const Default = () => {
 
 export const DefaultValues = () => {
  const form = useForm<FormSchema>({
+ ...formOptions,
  defaultValues: {
  doit: true,
  },
@@ -62,7 +69,7 @@ export const DefaultValues = () => {
  control={form.control}
  type="switch"
  name="doit"
- switchProps={{ children: 'Yes, do it!' }}
+ label="Yes, do it!"
  />
  <FormFieldHelper>Helper</FormFieldHelper>
  </FormField>
@@ -77,7 +84,7 @@ export const DefaultValues = () => {
 };
 
 export const Disabled = () => {
- const form = useForm<FormSchema>();
+ const form = useForm<FormSchema>(formOptions);
 
  return (
  <Form {...form} onSubmit={(values) => console.log(values)}>
@@ -88,8 +95,8 @@ export const Disabled = () => {
  control={form.control}
  type="switch"
  name="doit"
- switchProps={{ children: 'Yes, do it!' }}
  isDisabled
+ label="Yes, do it!"
  />
  <FormFieldHelper>Helper</FormFieldHelper>
  </FormField>
@@ -105,6 +112,7 @@ export const Disabled = () => {
 
 export const DisabledDefaultValues = () => {
  const form = useForm<FormSchema>({
+ ...formOptions,
  defaultValues: {
  doit: true,
  },
@@ -119,34 +127,8 @@ export const DisabledDefaultValues = () => {
  control={form.control}
  type="switch"
  name="doit"
- switchProps={{ children: 'Yes, do it!' }}
  isDisabled
- />
- <FormFieldHelper>Helper</FormFieldHelper>
- </FormField>
- <Box>
- <Button type="submit" variant="@primary">
- Submit
- </Button>
- </Box>
- </Stack>
- </Form>
- );
-};
-
-export const SwitchProps = () => {
- const form = useForm<FormSchema>();
-
- return (
- <Form {...form} onSubmit={(values) => console.log(values)}>
- <Stack spacing={4}>
- <FormField>
- <FormFieldLabel>Should I do something?</FormFieldLabel>
- <FormFieldController
- control={form.control}
- type="switch"
- name="doit"
- switchProps={{ children: 'Yes, do it!', colorScheme: 'purple' }}
+ label="Yes, do it!"
  />
  <FormFieldHelper>Helper</FormFieldHelper>
  </FormField>

diff --git a/src/components/Form/FieldSwitch/index.tsx b/src/components/Form/FieldSwitch/index.tsx
@@ -1,4 +1,6 @@
-import { Flex, Switch, SwitchProps } from '@chakra-ui/react';
+import { ReactNode } from 'react';
+
+import { Flex, FlexProps, Switch, SwitchProps } from '@chakra-ui/react';
 import {
  Controller,
  ControllerRenderProps,
@@ -16,13 +18,15 @@ export type FieldSwitchProps<
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 > = {
  type: 'switch';
+ label?: ReactNode;
  switchProps?: RemoveFromType<
  RemoveFromType<
- Omit<SwitchProps, 'isChecked' | 'isDisabled'>,
+ Omit<SwitchProps, 'isChecked' | 'isDisabled' | 'children'>,
  SwitchRootProps
  >,
  ControllerRenderProps
  >;
+ containerProps?: FlexProps;
 } & SwitchRootProps &
  FieldCommonProps<TFieldValues, TName>;
 
@@ -36,7 +40,7 @@ export const FieldSwitch = <
  <Controller
  {...props}
  render={({ field: { value, ...field } }) => (
- <Flex direction="column" gap={1.5}>
+ <Flex flexDirection="column" gap={1} flex={1} {...props.containerProps}>
  <Switch
  display="flex"
  alignItems="center"
@@ -45,7 +49,9 @@ export const FieldSwitch = <
  isDisabled={props.isDisabled}
  {...props.switchProps}
  {...field}
- />
+ >
+ {props.label}
+ </Switch>
  <FormFieldError />
  </Flex>
  )}