@yuno-payments/dashboard-design-system 0.0.1

package/src/components/atoms/button/index.tsx

@@ -0,0 +1,80 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+  label?: React.ReactNode
+  startIcon?: React.ReactNode
+  endIcon?: React.ReactNode
+}
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      className,
+      variant,
+      size,
+      asChild = false,
+      label,
+      startIcon,
+      endIcon,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        ref={ref}
+        data-slot="button"
+        className={cn(buttonVariants({ variant, size, className }))}
+        {...props}
+      >
+        <>
+          {startIcon ? <span className="inline-flex">{startIcon}</span> : null}
+          <span>{children ?? label}</span>
+          {endIcon ? <span className="inline-flex">{endIcon}</span> : null}
+        </>
+      </Comp>
+    )
+  }
+)
+
+Button.displayName = "Button"

package/src/components/atoms/checkbox/checkbox.stories.tsx

@@ -0,0 +1,314 @@
+/* eslint-disable storybook/no-renderer-packages */
+import type { Meta, StoryObj } from '@storybook/react'
+import { Checkbox } from './index'
+
+const meta: Meta<typeof Checkbox> = {
+  title: 'Atoms/Checkbox',
+  component: Checkbox,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'The size of the checkbox',
+    },
+    checked: {
+      control: 'boolean',
+      description: 'Whether the checkbox is checked',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the checkbox is disabled',
+    },
+    invalid: {
+      control: 'boolean',
+      description: 'Whether the checkbox is in an invalid state',
+    },
+    name: {
+      control: 'text',
+      description: 'The name attribute for the checkbox',
+    },
+    value: {
+      control: 'text',
+      description: 'The value attribute for the checkbox',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Basic: Story = {
+  args: {
+    size: 'md',
+    checked: false,
+    disabled: false,
+    invalid: false,
+  },
+}
+
+export const Checked: Story = {
+  args: {
+    size: 'md',
+    checked: true,
+    disabled: false,
+    invalid: false,
+  },
+}
+
+export const Unchecked: Story = {
+  args: {
+    size: 'md',
+    checked: false,
+    disabled: false,
+    invalid: false,
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    size: 'md',
+    checked: false,
+    disabled: true,
+    invalid: false,
+  },
+}
+
+export const DisabledChecked: Story = {
+  args: {
+    size: 'md',
+    checked: true,
+    disabled: true,
+    invalid: false,
+  },
+}
+
+export const Invalid: Story = {
+  args: {
+    size: 'md',
+    checked: false,
+    disabled: false,
+    invalid: true,
+  },
+}
+
+export const InvalidChecked: Story = {
+  args: {
+    size: 'md',
+    checked: true,
+    disabled: false,
+    invalid: true,
+  },
+}
+
+export const AllSizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <div className="flex flex-col items-center gap-2">
+        <Checkbox size="sm" checked={false} />
+        <span className="text-xs text-muted-foreground">Small</span>
+      </div>
+      <div className="flex flex-col items-center gap-2">
+        <Checkbox size="md" checked={false} />
+        <span className="text-xs text-muted-foreground">Medium</span>
+      </div>
+      <div className="flex flex-col items-center gap-2">
+        <Checkbox size="lg" checked={false} />
+        <span className="text-xs text-muted-foreground">Large</span>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Checkbox component in different sizes: small (14px), medium (16px), and large (20px).',
+      },
+    },
+  },
+}
+
+export const CheckboxGroup: Story = {
+  render: () => (
+    <div className="space-y-3">
+      <div className="flex items-center gap-2">
+        <Checkbox name="options" value="option1" checked={true} />
+        <label className="text-sm">Option 1 (Selected)</label>
+      </div>
+      <div className="flex items-center gap-2">
+        <Checkbox name="options" value="option2" checked={false} />
+        <label className="text-sm">Option 2</label>
+      </div>
+      <div className="flex items-center gap-2">
+        <Checkbox name="options" value="option3" checked={true} />
+        <label className="text-sm">Option 3 (Selected)</label>
+      </div>
+      <div className="flex items-center gap-2">
+        <Checkbox name="options" value="option4" checked={false} disabled />
+        <label className="text-sm text-muted-foreground">Option 4 (Disabled)</label>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Example of checkboxes used in a group with labels.',
+      },
+    },
+  },
+}
+
+export const AllStates: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div>
+        <h3 className="text-sm font-medium mb-2">Normal States</h3>
+        <div className="flex items-center gap-4">
+          <div className="flex items-center gap-2">
+            <Checkbox checked={false} />
+            <span className="text-sm">Unchecked</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <Checkbox checked={true} />
+            <span className="text-sm">Checked</span>
+          </div>
+        </div>
+      </div>
+      
+      <div>
+        <h3 className="text-sm font-medium mb-2">Disabled States</h3>
+        <div className="flex items-center gap-4">
+          <div className="flex items-center gap-2">
+            <Checkbox checked={false} disabled />
+            <span className="text-sm text-muted-foreground">Disabled Unchecked</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <Checkbox checked={true} disabled />
+            <span className="text-sm text-muted-foreground">Disabled Checked</span>
+          </div>
+        </div>
+      </div>
+      
+      <div>
+        <h3 className="text-sm font-medium mb-2">Invalid States</h3>
+        <div className="flex items-center gap-4">
+          <div className="flex items-center gap-2">
+            <Checkbox checked={false} invalid />
+            <span className="text-sm">Invalid Unchecked</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <Checkbox checked={true} invalid />
+            <span className="text-sm">Invalid Checked</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Comprehensive overview of all checkbox states including normal, disabled, and invalid variations.',
+      },
+    },
+  },
+}
+
+export const Docs: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-lg font-semibold mb-3">Checkbox Component</h2>
+        <p className="text-sm text-muted-foreground mb-4">
+          Checkboxes allow users to select one or more options from a set. The Checkbox component 
+          provides a custom-styled checkbox input that integrates seamlessly with Shadcn design 
+          tokens and supports various sizes, states, and accessibility features.
+        </p>
+      </div>
+
+      <div>
+        <h3 className="text-base font-medium mb-2">Sizes</h3>
+        <div className="space-y-2">
+          <div className="flex items-center gap-2">
+            <Checkbox size="sm" checked={false} />
+            <span className="text-sm text-muted-foreground">Small (14px) - Compact layouts</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <Checkbox size="md" checked={false} />
+            <span className="text-sm text-muted-foreground">Medium (16px) - Default size</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <Checkbox size="lg" checked={false} />
+            <span className="text-sm text-muted-foreground">Large (20px) - Prominent selections</span>
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <h3 className="text-base font-medium mb-2">States</h3>
+        <div className="grid grid-cols-2 gap-2">
+          <div className="flex items-center gap-2">
+            <Checkbox checked={false} />
+            <span className="text-xs text-muted-foreground">Unchecked</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <Checkbox checked={true} />
+            <span className="text-xs text-muted-foreground">Checked</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <Checkbox checked={false} disabled />
+            <span className="text-xs text-muted-foreground">Disabled</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <Checkbox checked={false} invalid />
+            <span className="text-xs text-muted-foreground">Invalid</span>
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <h3 className="text-base font-medium mb-2">Usage</h3>
+        <div className="space-y-2">
+          <p className="text-sm text-muted-foreground">
+            • Use checkboxes when users can select multiple options from a list
+          </p>
+          <p className="text-sm text-muted-foreground">
+            • For single selection, use radio buttons instead
+          </p>
+          <p className="text-sm text-muted-foreground">
+            • Always provide clear labels for accessibility
+          </p>
+          <p className="text-sm text-muted-foreground">
+            • Use the `invalid` prop to indicate validation errors
+          </p>
+        </div>
+      </div>
+
+      <div>
+        <h3 className="text-base font-medium mb-2">Accessibility</h3>
+        <div className="space-y-2">
+          <p className="text-sm text-muted-foreground">
+            • Supports keyboard navigation (Tab, Space)
+          </p>
+          <p className="text-sm text-muted-foreground">
+            • Proper ARIA attributes for screen readers
+          </p>
+          <p className="text-sm text-muted-foreground">
+            • Focus indicators for keyboard users
+          </p>
+          <p className="text-sm text-muted-foreground">
+            • Semantic HTML input element for form integration
+          </p>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Complete documentation and usage guidelines for the Checkbox component.',
+      },
+    },
+  },
+}

package/src/components/atoms/checkbox/checkbox.test.tsx

@@ -0,0 +1,278 @@
+import { render } from '@testing-library/react'
+import { describe, it, expect, vi } from 'vitest'
+import '@testing-library/jest-dom'
+import { Checkbox } from './index'
+
+function renderComponent(props = {}) {
+  const result = render(<Checkbox {...props} />)
+  const container = result.container
+  const root = container.firstChild as HTMLElement
+  return { container, root }
+}
+
+function getByTestId(container: HTMLElement, testId: string) {
+  const el = container.querySelector(`[data-testid="${testId}"]`)
+  if (!el) throw new Error(`Element with data-testid="${testId}" not found`)
+  return el as HTMLElement
+}
+
+describe('Checkbox', () => {
+  it('renders correctly', () => {
+    const { container } = renderComponent()
+    const checkbox = getByTestId(container, 'checkbox')
+    const input = getByTestId(container, 'checkbox-input')
+    
+    expect(checkbox).toBeInTheDocument()
+    expect(input).toBeInTheDocument()
+    expect(input).toHaveAttribute('type', 'checkbox')
+  })
+
+  it('renders with default size', () => {
+    const { container } = renderComponent()
+    const checkbox = getByTestId(container, 'checkbox')
+    
+    expect(checkbox).toHaveClass('size-4')
+  })
+
+  it('renders with small size', () => {
+    const { container } = renderComponent({ size: 'sm' })
+    const checkbox = getByTestId(container, 'checkbox')
+    
+    expect(checkbox).toHaveClass('size-3.5')
+  })
+
+  it('renders with medium size', () => {
+    const { container } = renderComponent({ size: 'md' })
+    const checkbox = getByTestId(container, 'checkbox')
+    
+    expect(checkbox).toHaveClass('size-4')
+  })
+
+  it('renders with large size', () => {
+    const { container } = renderComponent({ size: 'lg' })
+    const checkbox = getByTestId(container, 'checkbox')
+    
+    expect(checkbox).toHaveClass('size-5')
+  })
+
+  it('renders unchecked state', () => {
+    const { container } = renderComponent({ checked: false })
+    const input = getByTestId(container, 'checkbox-input')
+    
+    expect(input).not.toBeChecked()
+  })
+
+  it('renders checked state', () => {
+    const { container } = renderComponent({ checked: true })
+    const input = getByTestId(container, 'checkbox-input')
+    const checkbox = getByTestId(container, 'checkbox')
+    
+    expect(input).toBeChecked()
+    expect(checkbox).toHaveClass('border-primary', 'bg-primary', 'text-primary-foreground')
+  })
+
+  it('renders disabled state', () => {
+    const { container } = renderComponent({ disabled: true })
+    const input = getByTestId(container, 'checkbox-input')
+    const checkbox = getByTestId(container, 'checkbox')
+    
+    expect(input).toBeDisabled()
+    expect(checkbox).toHaveClass('pointer-events-none', 'opacity-50')
+  })
+
+  it('renders invalid state', () => {
+    const { container } = renderComponent({ invalid: true })
+    const checkbox = getByTestId(container, 'checkbox')
+    
+    expect(checkbox).toHaveClass('border-destructive')
+  })
+
+  it('renders invalid and checked state', () => {
+    const { container } = renderComponent({ invalid: true, checked: true })
+    const checkbox = getByTestId(container, 'checkbox')
+    
+    expect(checkbox).toHaveClass('border-destructive')
+    expect(checkbox).toHaveClass('bg-destructive', 'text-destructive-foreground')
+  })
+
+  it('forwards ref correctly', () => {
+    const ref = vi.fn()
+    renderComponent({ ref })
+    
+    expect(ref).toHaveBeenCalled()
+  })
+
+  it('applies custom className', () => {
+    const { container } = renderComponent({ className: 'custom-class' })
+    const checkbox = getByTestId(container, 'checkbox')
+    
+    expect(checkbox).toHaveClass('custom-class')
+  })
+
+  it('passes through HTML input attributes', () => {
+    const { container } = renderComponent({ 
+      name: 'test-checkbox',
+      value: 'test-value',
+      'data-custom': 'test'
+    })
+    const input = getByTestId(container, 'checkbox-input')
+    
+    expect(input).toHaveAttribute('name', 'test-checkbox')
+    expect(input).toHaveAttribute('value', 'test-value')
+    expect(input).toHaveAttribute('data-custom', 'test')
+  })
+
+  it('handles onChange event', () => {
+    const handleChange = vi.fn()
+    const { container } = renderComponent({ onChange: handleChange })
+    const input = getByTestId(container, 'checkbox-input')
+    
+    input.click()
+    expect(handleChange).toHaveBeenCalled()
+  })
+
+  it('does not trigger onChange when disabled', () => {
+    const handleChange = vi.fn()
+    const { container } = renderComponent({ onChange: handleChange, disabled: true })
+    const input = getByTestId(container, 'checkbox-input')
+    
+    input.click()
+    expect(handleChange).not.toHaveBeenCalled()
+  })
+
+  it('renders Square icon when unchecked', () => {
+    const { container } = renderComponent({ checked: false })
+    const checkbox = getByTestId(container, 'checkbox')
+    const squareIcon = checkbox.querySelector('svg')
+    
+    expect(squareIcon).toBeInTheDocument()
+  })
+
+  it('renders CheckSquare icon when checked', () => {
+    const { container } = renderComponent({ checked: true })
+    const checkbox = getByTestId(container, 'checkbox')
+    const checkSquareIcon = checkbox.querySelector('svg')
+    
+    expect(checkSquareIcon).toBeInTheDocument()
+  })
+
+  it('applies correct icon size for small variant', () => {
+    const { container } = renderComponent({ size: 'sm' })
+    const checkbox = getByTestId(container, 'checkbox')
+    const icon = checkbox.querySelector('svg')
+    
+    expect(icon).toHaveClass('size-3.5')
+  })
+
+  it('applies correct icon size for medium variant', () => {
+    const { container } = renderComponent({ size: 'md' })
+    const checkbox = getByTestId(container, 'checkbox')
+    const icon = checkbox.querySelector('svg')
+    
+    expect(icon).toHaveClass('size-4')
+  })
+
+  it('applies correct icon size for large variant', () => {
+    const { container } = renderComponent({ size: 'lg' })
+    const checkbox = getByTestId(container, 'checkbox')
+    const icon = checkbox.querySelector('svg')
+    
+    expect(icon).toHaveClass('size-5')
+  })
+
+  it('applies destructive color to icon when invalid and unchecked', () => {
+    const { container } = renderComponent({ invalid: true, checked: false })
+    const checkbox = getByTestId(container, 'checkbox')
+    const icon = checkbox.querySelector('svg')
+    
+    expect(icon).toHaveClass('text-destructive')
+  })
+
+  it('applies muted foreground color to icon when normal and unchecked', () => {
+    const { container } = renderComponent({ invalid: false, checked: false })
+    const checkbox = getByTestId(container, 'checkbox')
+    const icon = checkbox.querySelector('svg')
+    
+    expect(icon).toHaveClass('text-muted-foreground')
+  })
+
+  it('applies primary foreground color to icon when checked', () => {
+    const { container } = renderComponent({ checked: true })
+    const checkbox = getByTestId(container, 'checkbox')
+    const icon = checkbox.querySelector('svg')
+    
+    expect(icon).toHaveClass('text-primary-foreground')
+  })
+
+  it('applies destructive foreground color to icon when invalid and checked', () => {
+    const { container } = renderComponent({ invalid: true, checked: true })
+    const checkbox = getByTestId(container, 'checkbox')
+    const icon = checkbox.querySelector('svg')
+    
+    expect(icon).toHaveClass('text-destructive-foreground')
+  })
+
+  it('has proper accessibility attributes', () => {
+    const { container } = renderComponent()
+    const input = getByTestId(container, 'checkbox-input')
+    
+    expect(input).toHaveAttribute('type', 'checkbox')
+    expect(input).toHaveClass('sr-only')
+  })
+
+  it('supports focus states', () => {
+    const { container } = renderComponent()
+    const checkbox = getByTestId(container, 'checkbox')
+    
+    expect(checkbox).toHaveClass('focus-visible:border-ring', 'focus-visible:ring-ring/50', 'focus-visible:ring-[3px]')
+  })
+
+  it('combines multiple states correctly', () => {
+    const { container } = renderComponent({ 
+      size: 'lg',
+      checked: true,
+      invalid: true,
+      className: 'custom-class'
+    })
+    const checkbox = getByTestId(container, 'checkbox')
+    const input = getByTestId(container, 'checkbox-input')
+    
+    expect(checkbox).toHaveClass('size-5')
+    expect(checkbox).toHaveClass('border-destructive', 'bg-destructive', 'text-destructive-foreground')
+    expect(checkbox).toHaveClass('custom-class')
+    expect(input).toBeChecked()
+  })
+
+  it('renders with indeterminate state when checked is undefined', () => {
+    const { container } = renderComponent({ checked: undefined })
+    const input = getByTestId(container, 'checkbox-input') as HTMLInputElement
+    
+    expect(input.checked).toBe(false)
+  })
+
+  it('applies correct styling for all size variants', () => {
+    const sizes = ['sm', 'md', 'lg'] as const
+    const expectedClasses = ['size-3.5', 'size-4', 'size-5']
+    
+    sizes.forEach((size, index) => {
+      const { container } = renderComponent({ size })
+      const checkbox = getByTestId(container, 'checkbox')
+      
+      expect(checkbox).toHaveClass(expectedClasses[index])
+    })
+  })
+
+  it('maintains proper border styling across states', () => {
+    const { container: normalContainer } = renderComponent({ checked: false })
+    const normalCheckbox = getByTestId(normalContainer, 'checkbox')
+    expect(normalCheckbox).toHaveClass('border-input')
+
+    const { container: checkedContainer } = renderComponent({ checked: true })
+    const checkedCheckbox = getByTestId(checkedContainer, 'checkbox')
+    expect(checkedCheckbox).toHaveClass('border-primary')
+
+    const { container: invalidContainer } = renderComponent({ invalid: true })
+    const invalidCheckbox = getByTestId(invalidContainer, 'checkbox')
+    expect(invalidCheckbox).toHaveClass('border-destructive')
+  })
+})