Checkbox: support indeterminate state (#640)

* feat(Checkbox): support indeterminate state

* docs: include radix-ui props into storybook autogeneration

* docs(Checkbox): improve storybook

* refactor(Checkbox): move default values to declaration

Author: ariser

.storybook/main.ts

@@ -1,18 +1,18 @@
 import type { StorybookConfig } from "@storybook/react-vite";
 const config: StorybookConfig = {
   core: {
-    disableTelemetry: true
+    disableTelemetry: true,
   },
   stories: [
-    "../src/Introduction.mdx", 
+    "../src/Introduction.mdx",
     "../src/components/icons/Icons.mdx",
     "../src/**/*.stories.@(js|jsx|ts|tsx)",
   ],
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     {
-      name: '@storybook/addon-storysource',
+      name: "@storybook/addon-storysource",
       options: {
         loaderOptions: {
           prettierConfig: { printWidth: 80, singleQuote: false },
@@ -31,5 +31,18 @@ const config: StorybookConfig = {
     autodocs: "tag",
   },
   staticDirs: ["../public"],
+  typescript: {
+    reactDocgen: "react-docgen-typescript",
+    reactDocgenTypescriptOptions: {
+      compilerOptions: {
+        allowSyntheticDefaultImports: false,
+        esModuleInterop: false,
+      },
+      shouldRemoveUndefinedFromOptional: true,
+      shouldExtractLiteralValuesFromEnum: true,
+      propFilter: prop =>
+        prop.parent ? !/node_modules\/(?!@radix-ui)/.test(prop.parent.fileName) : true,
+    },
+  },
 };
 export default config;

src/components/Checkbox/Checkbox.stories.tsx

@@ -1,41 +1,38 @@
+import { useEffect, useState } from "react";
+
+import { Meta, StoryObj } from "@storybook/react";
+
 import { Checkbox } from "./Checkbox";
 
-const CheckboxComponent = ({
-  checked,
-  ...props
-}: {
-  checked: "default" | "checked" | "unchecked";
-  disabled: boolean;
-  label?: string;
-}) => {
-  return (
-    <Checkbox
-      checked={checked === "default" ? undefined : checked === "checked"}
-      {...props}
-    />
-  );
-};
-export default {
-  component: CheckboxComponent,
+const meta: Meta<typeof Checkbox> = {
+  component: Checkbox,
   title: "Forms/Checkbox",
   tags: ["checkbox", "autodocs"],
   argTypes: {
-    checked: { control: "radio", options: ["default", "checked", "unchecked"] },
-    disabled: { control: "boolean" },
-    label: { control: "text" },
-    orientation: { control: "inline-radio", options: ["horizontal", "vertical"] },
-    dir: { control: "inline-radio", options: ["start", "end"] },
-    variant: {
-      control: "radio",
-      options: ["default", "var1", "var2", "var3", "var4", "var5", "var6"],
-    },
+    checked: { control: "radio", options: [true, false, "indeterminate"] },
+    defaultChecked: { control: "radio", options: [true, false, "indeterminate"] },
+  },
+  render: ({ checked, ...props }) => {
+    const [checkedState, setCheckedState] = useState(checked);
+
+    useEffect(() => {
+      setCheckedState(checked);
+    }, [checked]);
+
+    return (
+      <Checkbox
+        {...props}
+        checked={checkedState}
+        onCheckedChange={setCheckedState}
+      />
+    );
   },
 };
 
-export const Playground = {
+export default meta;
+
+export const Playground: StoryObj<typeof Checkbox> = {
   args: {
     label: "Accept terms and conditions",
-    disabled: false,
-    checked: "default",
   },
 };

src/components/Checkbox/Checkbox.tsx

@@ -28,29 +28,31 @@ const Wrapper = styled(FormRoot)`
 export const Checkbox = ({
   id,
   label,
-  variant,
+  variant = "default",
   disabled,
-  orientation,
-  dir,
+  orientation = "horizontal",
+  dir = "end",
+  checked,
   ...delegated
 }: CheckboxProps) => {
   const defaultId = useId();
   return (
     <Wrapper
-      $orientation={orientation ?? "horizontal"}
-      $dir={dir ?? "end"}
+      $orientation={orientation}
+      $dir={dir}
     >
       <CheckInput
         id={id ?? defaultId}
         data-testid="checkbox"
-        variant={variant ?? "default"}
+        variant={variant}
         disabled={disabled}
         aria-label={`${label}`}
+        checked={checked}
         {...delegated}
       >
         <CheckIconWrapper>
           <Icon
-            name="check"
+            name={checked === "indeterminate" ? "minus" : "check"}
             size="sm"
           />
         </CheckIconWrapper>
@@ -75,7 +77,7 @@ const CheckInput = styled(RadixCheckbox.Root)<{
   justify-content: center;
   flex-shrink: 0;
 
-  ${({ theme, variant = "default" }) => `
+  ${({ theme, variant }) => `
     border-radius: ${theme.click.checkbox.radii.all};
     width: ${theme.click.checkbox.size.all};
     height: ${theme.click.checkbox.size.all};
@@ -86,15 +88,17 @@ const CheckInput = styled(RadixCheckbox.Root)<{
     &:hover {
       background: ${theme.click.checkbox.color.variations[variant].background.hover};
     }
-    &[data-state="checked"] {
+    &[data-state="checked"],
+    &[data-state="indeterminate"] {
       border-color: ${theme.click.checkbox.color.variations[variant].stroke.active};
       background: ${theme.click.checkbox.color.variations[variant].background.active};
     }
     &[data-disabled] {
       background: ${theme.click.checkbox.color.background.disabled};
       border-color: ${theme.click.checkbox.color.stroke.disabled};
       cursor: not-allowed;
-      &[data-state="checked"] {
+      &[data-state="checked"],
+      &[data-state="indeterminate"] {
         background: ${theme.click.checkbox.color.background.disabled};
         border-color: ${theme.click.checkbox.color.stroke.disabled};
       }