wip: CheckboxGroup

Author: ntatoud

app/components/ui/checkbox-group.stories.tsx

@@ -3,7 +3,6 @@ import { useState } from 'react';
 
 import { Checkbox } from '@/components/ui/checkbox';
 import { CheckboxGroup } from '@/components/ui/checkbox-group';
-
 export default {
   title: 'CheckboxGroup',
   component: CheckboxGroup,
@@ -67,101 +66,24 @@ export const DisabledOption = () => {
   );
 };
 
-const nestedBears = [
-  {
-    label: 'Bear 1',
-    value: 'bear-1',
-    children: null,
-  },
-  {
-    label: 'Bear 2',
-    value: 'bear-2',
-    children: null,
-  },
-  {
-    label: 'Bear 3',
-    value: 'bear-3',
-    children: [
-      {
-        label: 'Little bear 1',
-        value: 'little-bear-1',
-      },
-      {
-        label: 'Little bear 2',
-        value: 'little-bear-2',
-      },
-      {
-        label: 'Little bear 3',
-        value: 'little-bear-3',
-      },
-    ],
-  },
-] as const;
-
-const bears = nestedBears.map((bear) => bear.value);
-const littleBears = nestedBears[2].children.map((bear) => bear.value);
-export const WithNestedGroups = () => {
-  const [bearsValue, setBearsValue] = useState<string[]>([]);
-  const [littleBearsValue, setLittleBearsValue] = useState<string[]>([]);
+export const ParentCheckbox = () => {
+  const [value, setValue] = useState<string[]>([]);
 
   return (
     <CheckboxGroup
-      value={bearsValue}
-      onValueChange={(value) => {
-        if (value.includes('bear-3')) {
-          setLittleBearsValue(littleBears);
-        } else if (littleBearsValue.length === littleBears.length) {
-          setLittleBearsValue([]);
-        }
-        setBearsValue(value);
-      }}
-      allValues={bears}
-      defaultValue={[]}
+      value={value}
+      onValueChange={setValue}
+      allValues={astrobears.map((bear) => bear.value)}
     >
-      <Checkbox parent>Astrobears</Checkbox>
+      <Checkbox name="astrobears" parent>
+        Astrobears
+      </Checkbox>
       <div className="pl-4">
-        {nestedBears.map((option) => {
-          if (!option.children) {
-            return (
-              <Checkbox key={option.value} value={option.value}>
-                {option.label}
-              </Checkbox>
-            );
-          }
-
-          return (
-            <CheckboxGroup
-              key={option.value}
-              value={littleBearsValue}
-              onValueChange={(value) => {
-                if (value.length === littleBears.length) {
-                  setBearsValue((prev) =>
-                    Array.from(new Set([...prev, 'bear-3']))
-                  );
-                } else {
-                  setBearsValue((prev) => prev.filter((v) => v !== 'bear-3'));
-                }
-                setLittleBearsValue(value);
-              }}
-              allValues={option.children.map((bear) => bear.value)}
-              defaultValue={[]}
-            >
-              <Checkbox parent>{option.label}</Checkbox>
-              <div className="pl-4">
-                {option.children.map((nestedOption) => {
-                  return (
-                    <Checkbox
-                      key={nestedOption.value}
-                      value={nestedOption.value}
-                    >
-                      {nestedOption.label}
-                    </Checkbox>
-                  );
-                })}
-              </div>
-            </CheckboxGroup>
-          );
-        })}
+        {astrobears.map((option) => (
+          <Checkbox key={option.value} value={option.value}>
+            {option.label}
+          </Checkbox>
+        ))}
       </div>
     </CheckboxGroup>
   );

app/components/ui/checkbox-group.tsx

@@ -2,9 +2,9 @@ import { CheckboxGroup as CheckboxGroupPrimitive } from '@base-ui-components/rea
 
 import { cn } from '@/lib/tailwind/utils';
 
-export type CheckboxGroupProps = CheckboxGroupPrimitive.Props;
+export type BaseCheckboxGroupProps = CheckboxGroupPrimitive.Props;
 
-export function CheckboxGroup(props: CheckboxGroupProps) {
+export function CheckboxGroup(props: BaseCheckboxGroupProps) {
   return (
     <CheckboxGroupPrimitive
       {...props}

app/components/ui/checkbox.tsx

@@ -19,7 +19,7 @@ const labelVariants = cva('flex items-start gap-2.5 text-primary', {
 });
 
 const checkboxVariants = cva(
-  'flex flex-none cursor-pointer items-center justify-center rounded-sm outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-muted-foreground disabled:opacity-20 data-checked:bg-primary data-checked:text-primary-foreground data-indeterminate:border data-indeterminate:border-primary/20 data-unchecked:border data-unchecked:border-primary/20',
+  'flex flex-none cursor-pointer items-center justify-center rounded-sm outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-muted-foreground disabled:opacity-20 aria-invalid:focus-visible:ring-destructive/50 data-checked:bg-primary data-checked:text-primary-foreground data-indeterminate:border data-indeterminate:border-primary/20 data-unchecked:border data-unchecked:border-primary/20 aria-invalid:data-unchecked:border-destructive',
   {
     variants: {
       size: {