Checkbox component with testing and storybook

2025-10-08 17:49:13 -06:00
parent 2835fac38b
commit 0b9e918fd0
12 changed files with 6187 additions and 4527 deletions
@@ -0,0 +1,78 @@
+"use client";
+
+import React, { useState } from "react";
+import Checkbox from "../components/Checkbox";
+
+export default function FormsPlayground() {
+  const [standardChecked, setStandardChecked] = useState(false);
+  const [inverseChecked, setInverseChecked] = useState(true);
+
+  const variations = [
+    { title: "Standard / Default", mode: "standard", state: "default" },
+    { title: "Standard / Hover", mode: "standard", state: "hover" },
+    { title: "Standard / Focus", mode: "standard", state: "focus" },
+    { title: "Inverse / Default", mode: "inverse", state: "default" },
+    { title: "Inverse / Hover", mode: "inverse", state: "hover" },
+    { title: "Inverse / Focus", mode: "inverse", state: "focus" },
+  ];
+
+  return (
+    <div className="p-[24px] space-y-[24px]">
+      <h1 className="font-bricolage text-[24px]">
+        Forms Playground — Checkbox
+      </h1>
+
+      <section className="space-y-[12px]">
+        <h2 className="font-space text-[18px]">Interactive examples</h2>
+        <div className="flex flex-col gap-[12px] max-w-[520px]">
+          <Checkbox
+            label="Standard (controlled)"
+            checked={standardChecked}
+            mode="standard"
+            state="default"
+            onChange={({ checked }) => setStandardChecked(checked)}
+          />
+          <Checkbox
+            label="Inverse (controlled)"
+            checked={inverseChecked}
+            mode="inverse"
+            state="default"
+            onChange={({ checked }) => setInverseChecked(checked)}
+          />
+        </div>
+      </section>
+
+      <section className="space-y-[12px]">
+        <h2 className="font-space text-[18px]">Static states</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[16px]">
+          {variations.map((v) => (
+            <div
+              key={`${v.mode}-${v.state}`}
+              className="border border-[color:var(--border-color-default-tertiary)] rounded-[8px] p-[12px]"
+            >
+              <div className="text-[12px] mb-[8px] opacity-70">{v.title}</div>
+              <div>
+                <div className="flex items-center gap-[12px]">
+                  <Checkbox
+                    checked={false}
+                    mode={v.mode}
+                    state={v.state}
+                    label="Unchecked"
+                    onChange={() => {}}
+                  />
+                  <Checkbox
+                    checked
+                    mode={v.mode}
+                    state={v.state}
+                    label="Checked"
+                    onChange={() => {}}
+                  />
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </section>
+    </div>
+  );
+}