Checkbox Component with Tailwind (#654)

* Created Checkbox Component with Tailwind

* Deleted .scss file and refactored away old Checkbox component

* Updated Checkbox

* Installed tailwind-merge and implemented cn function

* Updated Checkbox with twmerge

* Update frontend/src/tw-components/Checkbox.tsx

Co-authored-by: Terence Lo <[email protected]>

* Update frontend/src/tw-components/Checkbox.tsx

Co-authored-by: Terence Lo <[email protected]>

* Update frontend/tests/components/Checkbox.test.tsx

Co-authored-by: Terence Lo <[email protected]>

* Feat/qualifier pages (#668)

* update qualifier page 1

- aligned qualifier nav
- use grid system instead of flex box for items

* Refactor: update button styles for primary-dark theme

* Feat: add ProgressIndicator component and integrate it into QualifierPage2

* Refactor: update border style in QualifierNav component

* Refactor: dynamic grid layout in QualifierPage1 for responsive design

* Feat: enhance RadioButtonForm to support skill selection callback

* Feat: update RadioButtonForm dynamically render skill & experience levels

* Add selectCOP and experience levels props to qualifiers

* Feat: use context in QualiferPage2 to keep track of chosen experience level

* Feat: integrate qualifiers context to manage selected COP in QualifierPage1

* Feat: refactor QualifierPage2 layout and improve skill selection handling

* Refactor:

- renamed experienceLevels to skills_matrix
- refactored to use tw-components/Buttons.tsx & added second style
- Ran npm run lint in frontend directory

* update tech stack

* feat: use new tw-button variant, fix merge

---------

Co-authored-by: Terence Lo <[email protected]>

* Fixed className syntax

---------

Co-authored-by: Terence Lo <[email protected]>
Co-authored-by: Benny <[email protected]>

Author: 3 people

frontend/src/components/Inputs/Checkbox.tsx

@@ -1,5 +1,4 @@
 @forward "Calendar";
-@forward "Checkbox";
 @forward "Chip";
 @forward "Dropdown";
 @forward "Textfield";

frontend/src/components/Inputs/_Checkbox.scss

@@ -2,7 +2,6 @@ import { Button } from "./Buttons/Button";
 import { IconButton } from "./Buttons/IconButton";
 import { ScrollCarousel } from "./Carousel/ScrollCarousel";
 import { Calendar } from "./Inputs/Calendar";
-import { Checkbox } from "./Inputs/Checkbox";
 import { Chip } from "./Inputs/Chip";
 import { Dropdown, DropdownOption } from "./Inputs/Dropdown";
 import { TextField } from "./Inputs/Textfield";
@@ -18,7 +17,6 @@ export {
   // Dialog
   // Inputs
   Calendar,
-  Checkbox,
   Chip,
   Dropdown,
   DropdownOption,

frontend/src/components/Inputs/_index.scss

@@ -3,7 +3,6 @@ import React, { Fragment, useState } from "react";
 
 // Internal Imports
 import {
-  Checkbox,
   Chip,
   TextField,
   Notification,
@@ -22,9 +21,6 @@ function Demo() {
     console.log(e.target.value);
   }
 
-  function checkboxOnChange(e: React.ChangeEvent<HTMLInputElement>) {
-    console.log(e.target.checked);
-  }
   return (
     <Fragment>
       <Notification closable fade>
@@ -121,17 +117,6 @@ function Demo() {
               );
             })}
           </div>
-          <h2>Checkboxes</h2>
-          <Checkbox label="Enabled selected" defaultChecked />
-          <Checkbox label="Enabled unselected" />
-          <Checkbox label="Disabled selected" defaultChecked disabled />
-          <Checkbox label="Disabled unselected" disabled />
-          <Checkbox
-            label="Enabled selected"
-            defaultChecked
-            labelHidden={true}
-            onChange={checkboxOnChange}
-          />
           <h2>Textfields</h2>
           <TextField
             type="email"

frontend/src/components/components.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
 import Typography from "tw-components/Typography";
 import { Button, IconButton } from "tw-components/Buttons";
+import { Checkbox } from "tw-components/Checkbox";
 
 const DemoTailwind = () => {
   // Add a setDarkMode for testing dark mode styles
@@ -14,8 +15,25 @@ const DemoTailwind = () => {
     }
   }, [darkMode]);
 
+  function checkboxOnChange(e: React.ChangeEvent<HTMLInputElement>) {
+    console.log(e.target.checked);
+  }
+
   return (
     <div className="min-h-screen bg-grey-light p-8">
+      <div className="mx-auto max-w-4xl rounded-lg bg-white p-6 shadow-md transition-colors duration-300 dark:bg-[#030D2D]">
+        <Typography.Title2 className="mb-4">Checkboxes</Typography.Title2>
+        <Checkbox label="Enabled selected" defaultChecked />
+        <Checkbox label="Enabled unselected" />
+        <Checkbox label="Disabled selected" defaultChecked disabled />
+        <Checkbox label="Disabled unselected" disabled />
+        <Checkbox
+          label="Enabled selected"
+          defaultChecked
+          labelHidden
+          onChange={checkboxOnChange}
+        />
+      </div>
       <div className="mx-auto max-w-4xl rounded-lg bg-white p-6 shadow-md transition-colors duration-300 dark:bg-[#030D2D]">
         <Typography.Title1 className="mb-4 text-blue-dark dark:text-white">
           Buttons

frontend/src/pages/Demo/Demo.tsx

@@ -0,0 +1,89 @@
+import React, { useId, useRef, useState, useEffect } from "react";
+import { IconCheckboxY, IconCheckboxN } from "assets/images/images";
+import { cn } from "lib/utils";
+
+// Type declaration for props
+interface CheckboxProps {
+  className?: string;
+  defaultChecked?: boolean;
+  disabled?: boolean;
+  label: string;
+  labelHidden?: boolean;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+function Checkbox({
+  defaultChecked = false,
+  disabled = false,
+  labelHidden = false,
+  ...props
+}: CheckboxProps) {
+  const checkboxId = useId();
+  const checkboxRef = useRef<HTMLInputElement>(null);
+  const [isChecked, setIsChecked] = useState(defaultChecked);
+
+  useEffect(() => {
+    if (checkboxRef.current) {
+      checkboxRef.current.checked = isChecked;
+    }
+  }, [isChecked]);
+
+  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+    if (!disabled) {
+      setIsChecked(e.target.checked);
+    }
+    if (props.onChange) {
+      props.onChange(e);
+    }
+  }
+
+  return (
+    <div className={cn("relative flex items-center", props.className)}>
+      <input
+        id={checkboxId}
+        type="checkbox"
+        defaultChecked={defaultChecked}
+        disabled={disabled}
+        ref={checkboxRef}
+        onChange={handleChange}
+        className="peer sr-only"
+      />
+
+      {/* Circle Effect */}
+      <span className="absolute h-10 w-10 rounded-full opacity-0 peer-focus:bg-blue-dark peer-focus:opacity-[.16] peer-active:bg-blue-dark peer-active:opacity-[.32]"></span>
+
+      {/* Label & Checkbox Icon */}
+      <label
+        htmlFor={checkboxId}
+        className={`relative flex select-none items-center ${
+          disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
+        }`}
+      >
+        <span className="relative flex h-10 w-10 items-center justify-center">
+          {isChecked ? (
+            <IconCheckboxY
+              height="24"
+              width="24"
+              fill={disabled ? "#C1C1C1" : "#3450A1"}
+              stroke={disabled ? "#C1C1C1" : "#3450A1"}
+              viewBox="0 0 24 24"
+              aria-hidden="true"
+            />
+          ) : (
+            <IconCheckboxN
+              height="24"
+              width="24"
+              fill="#fff"
+              stroke={disabled ? "#C1C1C1" : "#585858"}
+              viewBox="0 0 24 24"
+              aria-hidden="true"
+            />
+          )}
+        </span>
+        <span className={labelHidden ? "sr-only" : "ml-1"}>{props.label}</span>
+      </label>
+    </div>
+  );
+}
+
+export { Checkbox };

frontend/src/pages/Demo/DemoTailwind.tsx

@@ -6,3 +6,4 @@ export { default as TextField } from "./TextField";
 export { default as Dialog } from "./Dialog";
 export { default as Typography } from "./Typography";
 export { CircleCard } from "./CircleCard";
+export { Checkbox } from "./Checkbox";

frontend/src/tw-components/Checkbox.tsx

@@ -7,7 +7,7 @@ import "regenerator-runtime/runtime";
 import { config } from "react-transition-group";
 
 // Internal imports
-import { Checkbox } from "components/components";
+import { Checkbox } from "tw-components/Checkbox";
 
 config.disabled = true;