feat: Checkbox component & story (#1487)

* feat: `Checkbox` component & story

* fix: fine-tune styling & use blue color for now

package.json

@@ -8,7 +8,7 @@
     "dev:turbo": "next dev --turbo",
     "build": "NODE_OPTIONS='--max-old-space-size=4096' TS_CONFIG_PATH='./tsconfig.build.json' next build",
     "start": "next start",
-    "type-check": "tsc --pretty --noEmit --incremental false --project './tsconfig.build.json'",
+    "type-check": "NODE_OPTIONS='--max-old-space-size=4096' tsc --pretty --noEmit --incremental false --project './tsconfig.build.json'",
     "write-check": "npx @biomejs/biome check --write --unsafe .",
     "snyk-protect": "snyk-protect",
     "postinstall": "npx dotenv-cli -e .env.local -- bash -c 'npm i --no-save --ignore-scripts $WAAS_WEB_URL $WAAS_VIEM_URL'",
@@ -48,6 +48,7 @@
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-alert-dialog": "^1.1.1",
     "@radix-ui/react-avatar": "^1.1.0",
+    "@radix-ui/react-checkbox": "^1.1.1",
     "@radix-ui/react-collapsible": "^1.1.0",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",

src/v2/components/ui/Checkbox.stories.tsx

@@ -0,0 +1,33 @@
+import { Meta, StoryObj } from "@storybook/react"
+import { Checkbox, CheckboxProps } from "./Checkbox"
+import { Label } from "./Label"
+
+const CheckboxExample = (props: CheckboxProps) => {
+  return (
+    <div className="flex items-center space-x-2">
+      <Checkbox id="terms" {...props} />
+      <Label htmlFor="terms">Accept terms and conditions</Label>
+    </div>
+  )
+}
+
+const meta: Meta<typeof CheckboxExample> = {
+  title: "Design system/Checkbox",
+  component: CheckboxExample,
+}
+
+export default meta
+
+type Story = StoryObj<typeof CheckboxExample>
+
+export const Default: Story = {
+  args: {
+    disabled: false,
+  },
+  argTypes: {
+    disabled: {
+      type: "boolean",
+      control: "boolean",
+    },
+  },
+}

src/v2/components/ui/Checkbox.tsx

@@ -0,0 +1,30 @@
+"use client"
+
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+
+import { cn } from "@/lib/utils"
+import { Check } from "@phosphor-icons/react/dist/ssr"
+import { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react"
+
+export type CheckboxProps = ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+
+const Checkbox = forwardRef<
+  ElementRef<typeof CheckboxPrimitive.Root>,
+  CheckboxProps
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative size-4 shrink-0 rounded-sm border-2 border-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-0 data-[state=checked]:bg-info data-[state=checked]:text-info-foreground [&~label]:cursor-pointer [&~label]:disabled:cursor-not-allowed [&~label]:disabled:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator className="absolute inset-0 flex items-center justify-center rounded-full bg-info">
+      <Check className="size-[75%]" weight="bold" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }