feat: checkbox fixes

apps/frontend/src/components/launches/providers/tiktok/tiktok.provider.tsx

@@ -130,6 +130,7 @@ const TikTokSettings: FC<{ values?: any }> = (props) => {
       <div className="text-[14px] mb-[10px]">Allow User To:</div>
       <div className="flex gap-[40px]">
         <Checkbox
+          variant="hollow"
           label="Duet"
           {...register('duet', {
             value: false,
@@ -137,12 +138,14 @@ const TikTokSettings: FC<{ values?: any }> = (props) => {
         />
         <Checkbox
           label="Stitch"
+          variant="hollow"
           {...register('stitch', {
             value: false,
           })}
         />
         <Checkbox
           label="Comments"
+          variant="hollow"
           {...register('comment', {
             value: false,
           })}
@@ -151,6 +154,7 @@ const TikTokSettings: FC<{ values?: any }> = (props) => {
       <hr className="my-[15px] mb-[25px] border-tableBorder" />
       <div className="flex flex-col">
         <Checkbox
+          variant="hollow"
           label="Disclose Video Content"
           {...register('disclose', {
             value: false,
@@ -185,8 +189,9 @@ const TikTokSettings: FC<{ values?: any }> = (props) => {
         </div>
       </div>
 
-      <div className={clsx(!disclose && 'invisible')}>
+      <div className={clsx(!disclose && 'invisible', 'mt-[20px]')}>
         <Checkbox
+          variant="hollow"
           label="Your brand"
           {...register('brand_organic_toggle', {
             value: false,
@@ -198,6 +203,7 @@ const TikTokSettings: FC<{ values?: any }> = (props) => {
           This video will be classified as Brand Organic.
         </div>
         <Checkbox
+          variant="hollow"
           label="Branded content"
           {...register('brand_content_toggle', {
             value: false,

libraries/react-shared-libraries/src/form/checkbox.tsx

@@ -1,50 +1,75 @@
 'use client';
+import { FC, forwardRef, useCallback, useState } from 'react';
+import clsx from 'clsx';
+import { useFormContext, useWatch } from 'react-hook-form';
 
-import { DetailedHTMLProps, FC, InputHTMLAttributes, useMemo } from 'react';
-import { clsx } from 'clsx';
-import { useFormContext } from 'react-hook-form';
-import interClass from '../helpers/inter.font';
-import { RegisterOptions } from 'react-hook-form/dist/types/validator';
-
-export const Checkbox: FC<
-  DetailedHTMLProps<
-    InputHTMLAttributes<HTMLInputElement>,
-    HTMLInputElement
-  > & {
-    error?: any;
-    extraForm?: RegisterOptions<any>;
+export const Checkbox = forwardRef<
+  null,
+  {
+    checked?: boolean;
     disableForm?: boolean;
-    label: string;
-    name: string;
-    hideErrors?: boolean;
+    name?: string;
+    className?: string;
+    label?: string;
+    onChange?: (event: { target: { name?: string; value: boolean } }) => void;
+    variant?: 'default' | 'hollow';
   }
-> = (props) => {
-  const {
-    label,
-    className,
-    hideErrors,
-    disableForm,
-    error,
-    extraForm,
-    name,
-    ...rest
-  } = props;
+>((props, ref: any) => {
+  const { checked, className, label, disableForm, variant } = props;
   const form = useFormContext();
+  const register = disableForm ? {} : form.register(props.name!);
+
+  const watch = disableForm
+    ? undefined
+    : useWatch({
+        name: props.name!,
+      });
+
+  const [currentStatus, setCurrentStatus] = useState(watch || checked);
+  const changeStatus = useCallback(() => {
+    setCurrentStatus(!currentStatus);
+    props?.onChange?.({ target: { name: props.name!, value: !currentStatus } });
+    if (!disableForm) {
+      // @ts-ignore
+      register?.onChange?.({
+        target: { name: props.name!, value: !currentStatus },
+      });
+    }
+  }, [currentStatus]);
 
   return (
-    <div className={clsx("flex flex-col", label ? 'gap-[6px]' : '')}>
-      <label className="flex items-center gap-[8px]">
-        <input
-          type="checkbox"
-          {...(disableForm ? {} : form.register(name, extraForm))}
-          className={clsx(
-            'bg-input outline-none border-fifth border rounded-[4px]',
-            className
-          )}
-          {...rest}
-        />
-        <span className={`${interClass} text-[14px]`}>{label}</span>
-      </label>
+    <div className="flex gap-[10px]">
+      <div
+        ref={ref}
+        {...register}
+        onClick={changeStatus}
+        className={clsx(
+          'cursor-pointer rounded-[4px] select-none w-[24px] h-[24px] justify-center items-center flex',
+          variant === 'default' || !variant
+            ? 'bg-forth'
+            : 'border-customColor1 border-2 bg-customColor2',
+          className
+        )}
+      >
+        {currentStatus && (
+          <div>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              width="20"
+              height="20"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <polyline points="20 6 9 17 4 12"></polyline>
+            </svg>
+          </div>
+        )}
+      </div>
+      {!!label && <div>{label}</div>}
     </div>
   );
-};
+});