Merge pull request #53 from kunai-consulting/DS-77

DS-77 Headless Checkbox

apps/docs/src/routes/legacy/checkbox/examples/checkbox-list.tsx

@@ -0,0 +1,27 @@
+// import { component$, useContextProvider, useSignal } from '@builder.io/qwik';
+// import { Checkbox } from '@kunai-consulting/qwik-components';
+
+// export const CheckboxList = component$(() => {
+//   // Initialize an array of signals for each checkbox's checked state
+//   const checkboxes = Array.from({ length: 5 }, () => useSignal(false));
+
+//   // Provide the CheckListContext with the array of checkbox signals
+//   // useContextProvider(CheckListContext, {
+//   //   checkboxes: checkboxes,
+//   //   checklistSig: useSignal('indeterminate'), // Initial state
+//   // });
+
+//   return (
+//     <div>
+//       {checkboxes.map((checkboxSignal, index) => (
+//         <Checkbox.Root
+//           key={`checkbox-${index}${new Date().getTime()}`}
+//           bind:checked={checkboxSignal}
+//           _useCheckListContext={true}
+//         >
+//           Checkbox {index + 1}
+//         </Checkbox.Root>
+//       ))}
+//     </div>
+//   );
+// });

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

@@ -0,0 +1,23 @@
+// import { component$, useSignal } from '@builder.io/qwik';
+// import { Checkbox } from '@kunai-consulting/qwik-components';
+
+// export default component$(() => {
+//   const isChecked = useSignal<boolean>(false);
+
+//   return (
+//     <div class="flex gap-8">
+//       <div class="flex flex-col gap-3">
+//         <Checkbox.TwoState
+//           bind:checked={isChecked}
+//           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.TwoState>
+//       </div>
+//     </div>
+//   );
+// });

apps/docs/src/routes/legacy/checkbox/examples/independent.tsx

@@ -0,0 +1,40 @@
+// import { component$, useSignal } 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/legacy/checkbox/examples/mixed.tsx

@@ -0,0 +1,72 @@
+// import { component$, useSignal, useTask$, $ } from '@builder.io/qwik';
+// import { Checkbox } from '@kunai-consulting/qwik-components';
+
+// export default component$(() => {
+//   const checkboxes = useSignal([
+//     { id: 1, checked: useSignal(false) },
+//     { id: 2, checked: useSignal(false) },
+//     { id: 3, checked: useSignal(false) },
+//   ]);
+
+//   const allChecked = useSignal(false);
+//   const mixedState = useSignal(false);
+//   const checked = useSignal(false);
+
+//   useTask$(({ track }) => {
+//     track(() => {
+//       for (const checkbox of checkboxes.value) {
+//         checkbox.checked.value;
+//       }
+//     });
+//     const allCheckedValues = checkboxes.value.map((c) => c.checked.value);
+//     allChecked.value = allCheckedValues.every(Boolean);
+//     mixedState.value =
+//       allCheckedValues.some(Boolean) && !allCheckedValues.every(Boolean);
+//   });
+//   console.log('allChecked', allChecked.value);
+//   console.log('mixedState', mixedState.value);
+//   const toggleCheckbox$ = $((index: number) => {
+//     checkboxes.value[index].checked.value =
+//       !checkboxes.value[index].checked.value;
+//   });
+//   const toggleAllCheckboxes$ = $(() => {
+//     const newState = checked.value; // Determine the new state based on the current state of `allChecked`
+//     allChecked.value = newState;
+
+//     for (const checkbox of checkboxes.value) {
+//       checkbox.checked.value = newState;
+//     }
+//   });
+
+//   return (
+//     <>
+//       <Checkbox.Root
+//         // bind:checked={checked}
+//         id="test"
+//         checklist // This tells CheckboxRoot to render MixedStateCheckbox
+//         class="flex items-center gap-3 border-2 border-black p-2"
+//         onClick$={toggleAllCheckboxes$} // This is the event that will trigger the toggle
+//       >
+//         <Checkbox.Indicator class="flex h-[25px] w-[25px] items-center justify-center bg-slate-600">
+//           ✅
+//         </Checkbox.Indicator>
+//         Toggle All
+//       </Checkbox.Root>
+//       {checkboxes.value.map((checkbox, index) => (
+//         <div key={checkbox.id}>
+//           <Checkbox.Root
+//             checklist
+//             bind:checked={checkbox.checked}
+//             id={`checkbox-${checkbox.id}`}
+//             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.checked.value ? '✅' : ''}
+//             </Checkbox.Indicator>
+//             Checkbox {checkbox.id}
+//           </Checkbox.Root>
+//         </div>
+//       ))}
+//     </>
+//   );
+// });

apps/docs/src/routes/legacy/checkbox/index.mdx

@@ -0,0 +1,13 @@
+# Checkbox
+
+## Controlled Checkbox
+
+<Showcase name="hero" />
+
+## Independent State Checkbox
+
+<Showcase name="independent" />
+
+## Mixed State Checkbox
+
+<Showcase name="mixed" />

libs/components/src/index.ts

@@ -1 +1,2 @@
-export * as Otp from "./otp";
+export * as Otp from './otp';
+// export * as Checkbox from './checkbox';

libs/components/src/legacy/checkbox/checkbox-indicator.tsx

@@ -0,0 +1,20 @@
+import { component$, useContext, type PropsOf, Slot } from '@builder.io/qwik';
+import { CheckboxContext } from './context-id';
+
+export type CheckboxIndicatorProps = PropsOf<'div'>;
+
+export const CheckboxIndicator = component$<CheckboxIndicatorProps>((props) => {
+  const checkSig = useContext(CheckboxContext);
+  // I need the below because tailwind isn't working here
+  const hidden = checkSig.value === false;
+
+  return (
+    <div {...props}>
+      {/* {checkSig.value && ( */}
+      <div hidden={hidden} aria-hidden={!checkSig.value}>
+        <Slot />
+      </div>
+      {/* )} */}
+    </div>
+  );
+});