Checkbox Implementation

apps/component-tests/package.json

@@ -6,7 +6,9 @@
   },
   "engines-annotation": "Mostly required by sharp which needs a Node-API v9 compatible runtime",
   "private": true,
-  "trustedDependencies": ["sharp"],
+  "trustedDependencies": [
+    "sharp"
+  ],
   "trustedDependencies-annotation": "Needed for bun to allow running install scripts",
   "type": "module",
   "scripts": {
@@ -15,7 +17,7 @@
     "build.preview": "vite build --ssr src/entry.preview.tsx",
     "build.types": "tsc --incremental --noEmit",
     "deploy": "echo 'Run \"npm run qwik add\" to install a server adapter'",
-    "dev": "vite --mode ssr",
+    "dev": "vite --mode ssr --host",
     "dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force",
     "fmt": "prettier --write .",
     "fmt.check": "prettier --check .",

apps/component-tests/src/entry.ssr.tsx

@@ -10,21 +10,30 @@
  * - npm run build
  *
  */
-import { type RenderToStreamOptions, renderToStream } from "@builder.io/qwik/server";
-import { manifest } from "@qwik-client-manifest";
-import Root from "./root";
+import {
+  type RenderToStreamOptions,
+  renderToStream,
+} from '@builder.io/qwik/server';
+import { manifest } from '@qwik-client-manifest';
+import Root from './root';
 
 export default function (opts: RenderToStreamOptions) {
   return renderToStream(<Root />, {
     manifest,
     ...opts,
     // Use container attributes to set attributes on the html tag.
     containerAttributes: {
-      lang: "en-us",
-      ...opts.containerAttributes
+      lang: 'en-us',
+      ...opts.containerAttributes,
     },
     serverData: {
-      ...opts.serverData
-    }
+      ...opts.serverData,
+    },
+    prefetchStrategy: {
+      implementation: {
+        linkInsert: 'html-append',
+        linkRel: 'modulepreload',
+      },
+    },
   });
 }

apps/docs/src/routes/checkbox/examples/checklist.tsx

@@ -0,0 +1,28 @@
+import { component$ } from '@builder.io/qwik';
+
+import { Checklist } from '@kunai-consulting/qwik-components';
+
+export default component$(() => {
+  return (
+    <Checklist.Root initialStates={[false, false, false]}>
+      <Checklist.SelectAll class="flex h-[25px] w-[25px] items-center justify-center  border-2 border-black p-2">
+        <div class="flex h-[25px] w-[25px] items-center justify-center border-2 border-black p-2">
+          <Checklist.ItemIndicator>✅</Checklist.ItemIndicator>
+        </div>{' '}
+        Select All
+      </Checklist.SelectAll>
+
+      {Array.from({ length: 2 }, (_, index) => {
+        const uniqueKey = `cl-${index}-${Date.now()}`;
+        return (
+          <Checklist.Item key={uniqueKey} _index={index}>
+            <div class="flex h-[25px] w-[25px] items-center justify-center  border-2 border-black p-2">
+              <Checklist.ItemIndicator>✅</Checklist.ItemIndicator>
+            </div>
+            {`item ${index}`}
+          </Checklist.Item>
+        );
+      })}
+    </Checklist.Root>
+  );
+});

apps/docs/src/routes/checkbox/examples/controlled-values.tsx

@@ -0,0 +1,42 @@
+import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
+import { Checkbox } from '@kunai-consulting/qwik-components';
+export default component$(() => {
+  const initialVal1 = false;
+  const controlledSig1 = useSignal(initialVal1);
+  const initialVal2 = true;
+  const controlledSig2 = useSignal(initialVal2);
+  return (
+    <>
+      <div class="flex gap-8">
+        <div class="flex flex-col gap-3">
+          <Checkbox.Root
+            bind:checked={controlledSig1}
+            id="test"
+            class="flex items-center gap-3 border-2 border-black p-2 "
+          >
+            <Checkbox.Indicator class="flex h-[25px] w-[25px] items-center justify-center bg-slate-600">
+              ✅
+            </Checkbox.Indicator>
+            Toggle Value
+          </Checkbox.Root>
+          <p>The initial value was: {`${initialVal1}`}</p>
+          <p>The current value is: {`${controlledSig1.value}`}</p>
+        </div>
+        <div class="flex flex-col gap-3">
+          <Checkbox.Root
+            bind:checked={controlledSig2}
+            id="test"
+            class="flex items-center gap-3 border-2 border-black p-2 "
+          >
+            <Checkbox.Indicator class="flex h-[25px] w-[25px] items-center justify-center bg-slate-600">
+              ✅
+            </Checkbox.Indicator>
+            Toggle Value
+          </Checkbox.Root>
+          <p>The initial value was: {`${initialVal2}`}</p>
+          <p>The current value is: {`${controlledSig2.value}`}</p>
+        </div>
+      </div>
+    </>
+  );
+});

apps/docs/src/routes/checkbox/examples/controlled.tsx

@@ -0,0 +1,24 @@
+import { component$, useSignal } from '@builder.io/qwik';
+import { Checkbox } from '@kunai-consulting/qwik-components';
+export default component$(() => {
+  const initialVal1 = false;
+  const controlledSig1 = useSignal(initialVal1);
+  return (
+    <>
+      <div class="flex gap-8">
+        <div class="flex flex-col gap-3">
+          <Checkbox.Root
+            bind:checked={controlledSig1}
+            id="test"
+            class="flex items-center gap-3 border-2 border-black p-2 "
+          >
+            <Checkbox.Indicator class="flex h-[25px] w-[25px] items-center justify-center bg-slate-600">
+              ✅
+            </Checkbox.Indicator>
+            Toggle Value
+          </Checkbox.Root>
+        </div>
+      </div>
+    </>
+  );
+});

apps/docs/src/routes/checkbox/examples/hero.tsx

@@ -0,0 +1,18 @@
+import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
+import { Checkbox } from '@kunai-consulting/qwik-components';
+export default component$(() => {
+  const isCheckedSig = useSignal(false);
+
+  return (
+    <Checkbox.Root
+      bind:checked={isCheckedSig}
+      id="test"
+      class="flex items-center gap-3 border-2 border-black p-2"
+    >
+      <div class="flex h-[25px] w-[25px] items-center justify-center bg-slate-600">
+        <Checkbox.Indicator>✅</Checkbox.Indicator>
+      </div>
+      <p> I have read the README</p>
+    </Checkbox.Root>
+  );
+});

apps/docs/src/routes/checkbox/examples/pizza.tsx

@@ -0,0 +1,42 @@
+// import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
+// import { Checkbox, Checklist } from '@kunai-consulting/qwik-components';
+// const toppingNames = ['hot peppers', 'ham', 'pineaple', 'mushroom'];
+// const toppingImages = ['🌶️', '🍗', '🍍', '🍄'];
+// export default component$(() => {
+//   return (
+//     <>
+//       <h3 id="pizza-toppings">Pizza toppings</h3>
+//       <Checklist.Root
+//         ariaLabeledBy="pizza-toppings"
+//         class="flex flex-col gap-4"
+//       >
+//         <Checkbox.Root
+//           class="flex items-center gap-3 border-2 border-black  p-2"
+//           checklist={true}
+//         >
+//           <Checklist.Indicator class="flex h-[25px] w-[25px] items-center justify-center bg-slate-600">
+//             <div q:slot="true" id="true-img">
+//               🍕
+//             </div>
+
+//             <div q:slot="mixed" id="mixed-img">
+//               ➖
+//             </div>
+//           </Checklist.Indicator>
+//           Pick all toppings
+//         </Checkbox.Root>
+
+//         {toppingNames.map((name, i) => {
+//           return (
+//             <Checkbox.Root class="ml-8 flex items-center gap-3 border-2  border-black p-2">
+//               <Checkbox.Indicator class="flex h-[25px] w-[25px] items-center justify-center bg-slate-600">
+//                 {toppingImages[i]}
+//               </Checkbox.Indicator>
+//               {name}
+//             </Checkbox.Root>
+//           );
+//         })}
+//       </Checklist.Root>
+//     </>
+//   );
+// });

apps/docs/src/routes/checkbox/examples/reactive.tsx

@@ -0,0 +1,27 @@
+import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
+import { Checkbox } from '@kunai-consulting/qwik-components';
+export default component$(() => {
+  const isCheckedSig = useSignal(false);
+
+  return (
+    <>
+      <Checkbox.Root
+        bind:checked={isCheckedSig}
+        id="test"
+        class="flex items-center gap-3 border-2 border-black p-2"
+      >
+        <div class="flex h-[25px] w-[25px] items-center justify-center bg-slate-600">
+          <Checkbox.Indicator>✅</Checkbox.Indicator>
+        </div>
+        <p> I have read the README</p>
+      </Checkbox.Root>
+      <button
+        type="button"
+        // biome-ignore lint/suspicious/noAssignInExpressions: <explanation>
+        onClick$={() => (isCheckedSig.value = !isCheckedSig.value)}
+      >
+        Check the checkbox above
+      </button>
+    </>
+  );
+});

apps/docs/src/routes/checkbox/examples/test-controlled-list-false.tsx

@@ -0,0 +1,49 @@
+import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
+import { Checkbox, Checklist } from '@kunai-consulting/qwik-components';
+// TODO: add logic to handle user passed sigs with trues
+// this test basically ensures that the sig passed to the checklist controlls trumps all its children
+export default component$(() => {
+  const checklistSig = useSignal(false);
+  return (
+    <>
+      <h3 id="test123">Pick a cat</h3>
+      <Checklist.Root initialStates={[false, false, false]}>
+        <Checkbox.Root
+          class="flex items-center gap-3 bg-slate-900  text-white"
+          // checklist={true}
+          bind:checked={checklistSig}
+          id="checklist"
+        >
+          <Checklist.Indicator class="w-fit">
+            <div q:slot="true" id="true-img">
+              ✅
+            </div>
+
+            <div q:slot="mixed" id="mixed-img">
+              ➖
+            </div>
+          </Checklist.Indicator>
+          <p>Controlls all</p>
+        </Checkbox.Root>
+        <Checkbox.Root
+          id="child-1"
+          class="flex items-center gap-3 bg-slate-900 pr-2 text-white"
+        >
+          <Checkbox.Indicator class="w-fit bg-slate-600">✅</Checkbox.Indicator>
+          <p>No other stuff is needed here</p>
+        </Checkbox.Root>
+
+        <Checkbox.Root id="child-2" class="bg-slate-900 text-white">
+          <div class="flex items-center gap-3">
+            <Checkbox.Indicator class="w-fit bg-slate-600">
+              ✅
+            </Checkbox.Indicator>
+            <p>Im a true.tsx</p>
+          </div>
+        </Checkbox.Root>
+      </Checklist.Root>
+      <p>You signal is: </p>
+      <p id="signal-to-text">{`${checklistSig.value}`}</p>
+    </>
+  );
+});

apps/docs/src/routes/checkbox/examples/test-controlled-list-falses.tsx

@@ -0,0 +1,28 @@
+import { component$ } from '@builder.io/qwik';
+
+import { Checklist } from '@kunai-consulting/qwik-components';
+
+export default component$(() => {
+  return (
+    <Checklist.Root initialStates={[true, false, false]}>
+      <Checklist.SelectAll class="flex h-[25px] w-[25px] items-center justify-center  border-2 border-black p-2">
+        <div class="flex h-[25px] w-[25px] items-center justify-center border-2 border-black p-2">
+          <Checklist.ItemIndicator>✅</Checklist.ItemIndicator>
+        </div>{' '}
+        Select All
+      </Checklist.SelectAll>
+
+      {Array.from({ length: 2 }, (_, index) => {
+        const uniqueKey = `cl-${index}-${Date.now()}`;
+        return (
+          <Checklist.Item key={uniqueKey} _index={index}>
+            <div class="flex h-[25px] w-[25px] items-center justify-center  border-2 border-black p-2">
+              <Checklist.ItemIndicator>✅</Checklist.ItemIndicator>
+            </div>
+            {`item ${index}`}
+          </Checklist.Item>
+        );
+      })}
+    </Checklist.Root>
+  );
+});

apps/docs/src/routes/checkbox/examples/test-controlled-list-mixed.tsx

@@ -0,0 +1,46 @@
+// import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
+// import { Checkbox, Checklist } from '@kunai-consulting/qwik-components';
+// export default component$(() => {
+//   const firstUserSig = useSignal(false);
+//   const secondUserSig = useSignal(true);
+//   return (
+//     <>
+//       <h3 id="test123">Pick a cat</h3>
+//       <Checklist.Root class="flex flex-col gap-3" ariaLabeledBy="test123">
+//         <Checkbox.Root
+//           class="flex items-center gap-3 bg-slate-900 p-2 text-white"
+//           checklist={true}
+//         >
+//           <Checklist.Indicator class="w-fit">
+//             <div q:slot="true" id="true-img">
+//               ✅
+//             </div>
+//             <div q:slot="mixed" id="mixed-img">
+//               ➖
+//             </div>
+//           </Checklist.Indicator>
+//           <p>Controlls all</p>
+//         </Checkbox.Root>
+//         <Checkbox.Root
+//           bind:checked={firstUserSig}
+//           class="flex items-center gap-3 bg-slate-900 pr-2 text-white"
+//         >
+//           <Checkbox.Indicator class="w-fit bg-slate-600">✅</Checkbox.Indicator>
+//           <p>No other stuff is needed here</p>
+//         </Checkbox.Root>
+
+//         <Checkbox.Root
+//           bind:checked={secondUserSig}
+//           class="bg-slate-900 text-white"
+//         >
+//           <div class="flex items-center gap-3">
+//             <Checkbox.Indicator class="w-fit bg-slate-600">
+//               ✅
+//             </Checkbox.Indicator>
+//             <p>No other stuff is needed here</p>
+//           </div>
+//         </Checkbox.Root>
+//       </Checklist.Root>
+//     </>
+//   );
+// });

apps/docs/src/routes/checkbox/examples/test-controlled-list-true.tsx

@@ -0,0 +1,19 @@
+import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
+import { Checkbox, Checklist } from '@kunai-consulting/qwik-components';
+// this test basically ensures that the sig passed to the checklist controlls trumps all its children
+export default component$(() => {
+  // const checklistSig = useSignal(true);
+  return (
+    <Checklist.Root initialStates={[true, true]}>
+      <Checklist.SelectAll>
+        <Checklist.Indicator>✅</Checklist.Indicator>
+      </Checklist.SelectAll>
+      <Checklist.Item>
+        <Checklist.ItemIndicator>✅</Checklist.ItemIndicator> first item
+      </Checklist.Item>
+      <Checklist.Item>
+        <Checklist.ItemIndicator>✅</Checklist.ItemIndicator> second item
+      </Checklist.Item>
+    </Checklist.Root>
+  );
+});