Issue 64 add checkbox group component

client/package.json

@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-popover": "^1.1.15",

client/src/app/test/checkbox/page.tsx

@@ -0,0 +1,65 @@
+"use client";
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { CheckboxGroup, CheckboxItem } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+
+const DATES = [
+  "Monday",
+  "Tuesday",
+  "Wednesday",
+  "Thursday",
+  "Friday",
+  "Saturday",
+  "Sunday",
+];
+
+export default function CheckboxTestPage() {
+  const [acceptTerms, setAcceptTerms] = useState<boolean>(false);
+  const [dates, setDates] = useState<string[]>([]);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    alert(
+      `Submitted data:\nacceptCondition: ${acceptTerms.toString()}\ndates: ${JSON.stringify(dates)}`,
+    );
+  };
+
+  return (
+    <div className="min-h-screen p-8">
+      <div className="mx-auto my-5 flex w-full max-w-lg flex-col items-center justify-center">
+        <form onSubmit={handleSubmit} className="w-full rounded-md border p-4">
+          {/* a single checkbox */}
+          <p className="title mb-3">A single checkbox</p>
+          <CheckboxItem
+            id="acceptTerms"
+            name="acceptTerms"
+            checked={acceptTerms}
+            onCheckedChange={(checked) => setAcceptTerms(checked === true)} // Radix Output can be true | false | "indeterminate"
+          >
+            <Label htmlFor="acceptTerms"> Accept terms and conditions. </Label>
+          </CheckboxItem>
+          {/* a checkbox group */}
+          <p className="title mb-3 mt-5">A checkbox group</p>
+          <CheckboxGroup value={dates} onValueChange={setDates}>
+            {DATES.map((date) => (
+              <CheckboxItem key={date} value={date} id={date}>
+                <Label htmlFor={date}> {date} </Label>
+              </CheckboxItem>
+            ))}
+          </CheckboxGroup>
+          <Button type="submit" className="mx-auto mt-4">
+            Submit
+          </Button>
+        </form>
+        <p className="mt-4 text-center">
+          Current acceptTerms value: {acceptTerms.toString()}
+        </p>
+        <p className="mt-4 text-center">
+          Current dates message: {JSON.stringify(dates, null, 1)}
+        </p>
+      </div>
+    </div>
+  );
+}

client/src/components/ui/checkbox.tsx

@@ -0,0 +1,127 @@
+// Usage:
+// A single checkbox: use [checked, setChecked] = useState<boolean>(initialValue) to get the checkbox status
+// <CheckboxItem
+//   checked={checked}
+//   onCheckedChange={(checked) => setChecked(checked === true)} // As Radix Output can be true | false | "indeterminate", simple pass setChecked will cause Typescript complaint
+//   // optional props can be passed as in standard html checkbox
+// >
+// {children}   // add label here
+//</CheckboxItem>
+
+// A group of checkbox: use [value, setValue] = useState<string[]>(initialValue) to get the selected value
+// <CheckboxGroup value={value} onValueChange={setValue}>
+//   <CheckboxItem value={value1}>{children}</CheckboxItem>  // value is a necessary field in this case
+//   <CheckboxItem value={value2}>{children}</CheckboxItem>
+// </CheckboxGroup>
+
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import React, { useCallback, useContext } from "react";
+import { FaCheck } from "react-icons/fa";
+
+import { cn } from "@/lib/utils";
+
+type CheckboxGroupContextValue = {
+  value: string[];
+  onChange: (itemValue: string, checked: boolean) => void;
+};
+const CheckboxGroupContext =
+  React.createContext<CheckboxGroupContextValue | null>(null);
+
+interface CheckboxGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  value: string[];
+  onValueChange: (value: string[]) => void;
+}
+
+const CheckboxGroup = React.forwardRef<HTMLDivElement, CheckboxGroupProps>(
+  ({ className, value, onValueChange, children, ...props }, ref) => {
+    const onItemValueChange = useCallback(
+      (itemValue: string, checked: boolean) => {
+        if (checked) {
+          onValueChange([...value, itemValue]);
+        } else {
+          onValueChange(value.filter((v) => v !== itemValue));
+        }
+      },
+      [value, onValueChange],
+    );
+
+    return (
+      <CheckboxGroupContext.Provider
+        value={{ value, onChange: onItemValueChange }}
+      >
+        <div ref={ref} className={cn("grid gap-2", className)} {...props}>
+          {children}
+        </div>
+      </CheckboxGroupContext.Provider>
+    );
+  },
+);
+
+CheckboxGroup.displayName = "CheckboxGroup";
+
+interface CheckboxItemProps
+  extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {
+  value?: string;
+}
+
+// checkbox item
+const CheckboxItem = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  CheckboxItemProps
+>(
+  (
+    {
+      className,
+      id: propsId,
+      value,
+      checked,
+      onCheckedChange,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const context = useContext(CheckboxGroupContext);
+    const id = propsId || value;
+
+    // if checkbox is used in a group, value must be provided
+    if (context && !value) {
+      throw new Error("Value is required when checkbox is put in a group");
+    }
+
+    // if checkbox is not used in a group, use the default checked and onCheckedChange
+    const isGrouped = !!value && !!context;
+    const isChecked = isGrouped ? context.value.includes(value) : checked;
+    const handleCheckedChange = isGrouped
+      ? (checked: boolean) => context.onChange(value, checked)
+      : onCheckedChange;
+
+    return (
+      <div className="flex items-center gap-1">
+        <CheckboxPrimitive.Root
+          ref={ref}
+          id={id}
+          className={cn(
+            "h-6 w-6 rounded-sm",
+            "border-2 border-gray-300",
+            "data-[state=checked]:border-none data-[state=checked]:bg-bloom-orbit data-[state=checked]:text-primary-foreground",
+            "disabled:cursor-not-allowed disabled:opacity-50",
+            className,
+          )}
+          checked={isChecked}
+          onCheckedChange={handleCheckedChange}
+          {...props}
+        >
+          <CheckboxPrimitive.Indicator className="flex items-center justify-center">
+            <FaCheck className="h-4 w-4 text-white" />
+          </CheckboxPrimitive.Indicator>
+        </CheckboxPrimitive.Root>
+        {children}
+      </div>
+    );
+  },
+);
+
+CheckboxItem.displayName = "CheckboxItem";
+
+export { CheckboxGroup, CheckboxItem };