feat/TanStack-Form (#18346)

web/app/components/base/checkbox/assets/indeterminate-icon.tsx

@@ -0,0 +1,11 @@
+const IndeterminateIcon = () => {
+  return (
+    <div data-testid='indeterminate-icon'>
+      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
+        <path d="M2.5 6H9.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
+      </svg>
+    </div>
+  )
+}
+
+export default IndeterminateIcon

web/app/components/base/checkbox/assets/mixed.svg

@@ -1,5 +0,0 @@
-<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="check">
-<path id="Vector 1" d="M2.5 6H9.5" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
-</g>
-</svg>

web/app/components/base/checkbox/index.module.css

@@ -1,10 +0,0 @@
-.mixed {
-  background: var(--color-components-checkbox-bg) url(./assets/mixed.svg) center center no-repeat;
-  background-size: 12px 12px;
-  border: none;
-}
-
-.checked.disabled {
-  background-color: #d0d5dd;
-  border-color: #d0d5dd;
-}

web/app/components/base/checkbox/index.spec.tsx

@@ -0,0 +1,67 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import Checkbox from './index'
+
+describe('Checkbox Component', () => {
+  const mockProps = {
+    id: 'test',
+  }
+
+  it('renders unchecked checkbox by default', () => {
+    render(<Checkbox {...mockProps} />)
+    const checkbox = screen.getByTestId('checkbox-test')
+    expect(checkbox).toBeInTheDocument()
+    expect(checkbox).not.toHaveClass('bg-components-checkbox-bg')
+  })
+
+  it('renders checked checkbox when checked prop is true', () => {
+    render(<Checkbox {...mockProps} checked />)
+    const checkbox = screen.getByTestId('checkbox-test')
+    expect(checkbox).toHaveClass('bg-components-checkbox-bg')
+    expect(screen.getByTestId('check-icon-test')).toBeInTheDocument()
+  })
+
+  it('renders indeterminate state correctly', () => {
+    render(<Checkbox {...mockProps} indeterminate />)
+    expect(screen.getByTestId('indeterminate-icon')).toBeInTheDocument()
+  })
+
+  it('handles click events when not disabled', () => {
+    const onCheck = jest.fn()
+    render(<Checkbox {...mockProps} onCheck={onCheck} />)
+    const checkbox = screen.getByTestId('checkbox-test')
+
+    fireEvent.click(checkbox)
+    expect(onCheck).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not handle click events when disabled', () => {
+    const onCheck = jest.fn()
+    render(<Checkbox {...mockProps} disabled onCheck={onCheck} />)
+    const checkbox = screen.getByTestId('checkbox-test')
+
+    fireEvent.click(checkbox)
+    expect(onCheck).not.toHaveBeenCalled()
+    expect(checkbox).toHaveClass('cursor-not-allowed')
+  })
+
+  it('applies custom className when provided', () => {
+    const customClass = 'custom-class'
+    render(<Checkbox {...mockProps} className={customClass} />)
+    const checkbox = screen.getByTestId('checkbox-test')
+    expect(checkbox).toHaveClass(customClass)
+  })
+
+  it('applies correct styles for disabled checked state', () => {
+    render(<Checkbox {...mockProps} checked disabled />)
+    const checkbox = screen.getByTestId('checkbox-test')
+    expect(checkbox).toHaveClass('bg-components-checkbox-bg-disabled-checked')
+    expect(checkbox).toHaveClass('cursor-not-allowed')
+  })
+
+  it('applies correct styles for disabled unchecked state', () => {
+    render(<Checkbox {...mockProps} disabled />)
+    const checkbox = screen.getByTestId('checkbox-test')
+    expect(checkbox).toHaveClass('bg-components-checkbox-bg-disabled')
+    expect(checkbox).toHaveClass('cursor-not-allowed')
+  })
+})

web/app/components/base/checkbox/index.tsx

@@ -1,48 +1,49 @@
 import { RiCheckLine } from '@remixicon/react'
-import s from './index.module.css'
 import cn from '@/utils/classnames'
+import IndeterminateIcon from './assets/indeterminate-icon'
 
 type CheckboxProps = {
+  id?: string
   checked?: boolean
   onCheck?: () => void
   className?: string
   disabled?: boolean
-  mixed?: boolean
+  indeterminate?: boolean
 }
 
-const Checkbox = ({ checked, onCheck, className, disabled, mixed }: CheckboxProps) => {
-  if (!checked) {
-    return (
-      <div
-        className={cn(
-          'h-4 w-4 cursor-pointer rounded-[4px] border border-components-checkbox-border bg-components-checkbox-bg-unchecked shadow-xs hover:border-components-checkbox-border-hover',
-          mixed ? s.mixed : 'hover:bg-components-checkbox-bg-unchecked-hover',
-          disabled && 'cursor-not-allowed border-components-checkbox-border-disabled bg-components-checkbox-bg-disabled hover:border-components-checkbox-border-disabled hover:bg-components-checkbox-bg-disabled',
-          className,
-        )}
-        onClick={() => {
-          if (disabled)
-            return
-          onCheck?.()
-        }}
-      ></div>
-    )
-  }
+const Checkbox = ({
+    id,
+    checked,
+    onCheck,
+    className,
+    disabled,
+    indeterminate,
+}: CheckboxProps) => {
+  const checkClassName = (checked || indeterminate)
+    ? 'bg-components-checkbox-bg text-components-checkbox-icon hover:bg-components-checkbox-bg-hover'
+    : 'border border-components-checkbox-border bg-components-checkbox-bg-unchecked hover:bg-components-checkbox-bg-unchecked-hover hover:border-components-checkbox-border-hover'
+  const disabledClassName = (checked || indeterminate)
+    ? 'cursor-not-allowed bg-components-checkbox-bg-disabled-checked text-components-checkbox-icon-disabled hover:bg-components-checkbox-bg-disabled-checked'
+    : 'cursor-not-allowed border-components-checkbox-border-disabled bg-components-checkbox-bg-disabled hover:border-components-checkbox-border-disabled hover:bg-components-checkbox-bg-disabled'
+
   return (
     <div
+      id={id}
       className={cn(
-        'flex h-4 w-4 cursor-pointer items-center justify-center rounded-[4px] bg-components-checkbox-bg text-components-checkbox-icon shadow-xs hover:bg-components-checkbox-bg-hover',
-        disabled && 'cursor-not-allowed bg-components-checkbox-bg-disabled-checked text-components-checkbox-icon-disabled hover:bg-components-checkbox-bg-disabled-checked',
+        'flex h-4 w-4 cursor-pointer items-center justify-center rounded-[4px] shadow-xs shadow-shadow-shadow-3',
+        checkClassName,
+        disabled && disabledClassName,
         className,
       )}
       onClick={() => {
         if (disabled)
           return
-
         onCheck?.()
       }}
+      data-testid={`checkbox-${id}`}
     >
-      <RiCheckLine className={cn('h-3 w-3')} />
+      {!checked && indeterminate && <IndeterminateIcon />}
+      {checked && <RiCheckLine className='h-3 w-3' data-testid={`check-icon-${id}`} />}
     </div>
   )
 }