fix: small issues

Author: ntatoud

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

@@ -16,14 +16,14 @@ export default {
 
 const zFormSchema = () =>
   z.object({
-    bear: zu.array.nonEmpty(z.string().array()),
+    bears: zu.array.nonEmpty(z.string().array(), 'Select at least one answer.'),
   });
 
 const formOptions = {
   mode: 'onBlur',
   resolver: zodResolver(zFormSchema()),
   defaultValues: {
-    bear: [],
+    bears: [],
   } as z.infer<ReturnType<typeof zFormSchema>>,
 } as const;
 
@@ -45,7 +45,7 @@ export const Default = () => {
           <FormFieldController
             type="checkbox-group"
             control={form.control}
-            name="bear"
+            name="bears"
             options={options}
           />
         </FormField>
@@ -61,7 +61,7 @@ export const DefaultValue = () => {
   const form = useForm({
     ...formOptions,
     defaultValues: {
-      bear: ['pawdrin'],
+      bears: ['pawdrin'],
     },
   });
 
@@ -74,7 +74,7 @@ export const DefaultValue = () => {
           <FormFieldController
             control={form.control}
             type="checkbox-group"
-            name="bear"
+            name="bears"
             options={options}
           />
         </FormField>
@@ -90,7 +90,7 @@ export const Disabled = () => {
   const form = useForm({
     ...formOptions,
     defaultValues: {
-      bear: ['pawdrin'],
+      bears: ['pawdrin'],
     },
   });
 
@@ -103,7 +103,7 @@ export const Disabled = () => {
           <FormFieldController
             control={form.control}
             type="checkbox-group"
-            name="bear"
+            name="bears"
             options={options}
             disabled
           />
@@ -128,7 +128,7 @@ export const Row = () => {
           <FormFieldController
             control={form.control}
             type="checkbox-group"
-            name="bear"
+            name="bears"
             options={options}
             className="flex-row gap-6"
           />
@@ -159,7 +159,7 @@ export const WithDisabledOption = () => {
           <FormFieldController
             control={form.control}
             type="checkbox-group"
-            name="bear"
+            name="bears"
             options={optionsWithDisabled}
           />
         </FormField>

app/components/form/field-checkbox-group/index.tsx

@@ -46,7 +46,6 @@ export const FieldCheckboxGroup = <
   } = props;
   const ctx = useFormField();
 
-  console.log(options);
   return (
     <Controller
       name={name}
@@ -75,30 +74,24 @@ export const FieldCheckboxGroup = <
                   : `${ctx.descriptionId} ${ctx.errorId}`
               }
               value={value}
-              size={size}
               onValueChange={(value, event) => {
                 onChange?.(value);
                 rest.onValueChange?.(value, event);
               }}
               {...rest}
             >
-              {options.map(({ label, ...option }) => {
-                const checkboxId = `${ctx.id}-${option.value}`;
-
-                return (
-                  <Checkbox
-                    key={checkboxId}
-                    aria-invalid={isInvalid}
-                    size={size}
-                    {...field}
-                    {...option}
-                  >
-                    {label}
-                  </Checkbox>
-                );
-              })}
+              {options.map(({ label, ...option }) => (
+                <Checkbox
+                  key={`${ctx.id}-${option.value}`}
+                  aria-invalid={isInvalid}
+                  size={size}
+                  {...field}
+                  {...option}
+                >
+                  {label}
+                </Checkbox>
+              ))}
             </CheckboxGroup>
-            [{value}]
             <FormFieldError />
           </div>
         );

app/components/ui/checkbox-group.tsx

@@ -1,40 +1,13 @@
 import { CheckboxGroup as CheckboxGroupPrimitive } from '@base-ui-components/react/checkbox-group';
-import { cva, VariantProps } from 'class-variance-authority';
 
-const checkboxGroupVariants = cva('flex flex-col items-start gap-1', {
-  variants: {
-    size: {
-      // TODO
-      default: '',
-      sm: '',
-      lg: '',
-    },
-  },
-  defaultVariants: {
-    size: 'default',
-  },
-});
+import { cn } from '@/lib/tailwind/utils';
 
-type BaseCheckboxGroupProps = CheckboxGroupPrimitive.Props;
-
-export type CheckboxGroupProps = BaseCheckboxGroupProps &
-  VariantProps<typeof checkboxGroupVariants>;
-
-export function CheckboxGroup({
-  children,
-  className,
-  size,
-  ...props
-}: CheckboxGroupProps) {
+type CheckboxGroupProps = CheckboxGroupPrimitive.Props;
+export function CheckboxGroup({ className, ...props }: CheckboxGroupProps) {
   return (
     <CheckboxGroupPrimitive
-      className={checkboxGroupVariants({
-        size,
-        className,
-      })}
+      className={cn('flex flex-col gap-2', className)}
       {...props}
-    >
-      {children}
-    </CheckboxGroupPrimitive>
+    />
   );
 }