@yuno-payments/dashboard-design-system 0.0.1

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

@@ -0,0 +1,176 @@
+import { describe, it, expect, vi } from 'vitest'
+import * as React from 'react'
+import { createRoot } from 'react-dom/client'
+import { act } from 'react-dom/test-utils'
+import { ArrowRight, ExternalLink } from 'lucide-react'
+import { Link } from './index'
+
+function render(ui: React.ReactElement) {
+  const container = document.createElement('div')
+  document.body.appendChild(container)
+  const root = createRoot(container)
+  act(() => {
+    root.render(ui)
+  })
+  return { container, root }
+}
+
+function getByRole(container: HTMLElement, role: string) {
+  const el = Array.from(container.querySelectorAll('*')).find((n) => n.getAttribute('role') === role || n.tagName.toLowerCase() === role)
+  if (!el) throw new Error(`Element with role ${role} not found`)
+  return el as HTMLElement
+}
+
+function getByTestId(container: HTMLElement, testId: string) {
+  const el = container.querySelector(`[data-testid="${testId}"]`)
+  if (!el) throw new Error(`Element with testid ${testId} not found`)
+  return el as HTMLElement
+}
+
+describe('Link', () => {
+  it('renders children correctly', () => {
+    const { container } = render(<Link href="#">Test Link</Link>)
+    expect(container.textContent).toContain('Test Link')
+  })
+
+  it('renders with default variant and size', () => {
+    const { container } = render(<Link href="#">Default Link</Link>)
+    const link = getByRole(container, 'a')
+    expect(link.className).toMatch(/text-primary/)
+    expect(link.className).toMatch(/text-\[var\(--font-size-tiny\)\]/)
+  })
+
+  it('applies small size correctly', () => {
+    const { container } = render(<Link href="#" size="small">Small Link</Link>)
+    const link = getByRole(container, 'a')
+    expect(link.className).toMatch(/text-\[var\(--font-size-tiny\)\]/)
+    expect(link.className).toMatch(/leading-\[var\(--line-height-tiny\)\]/)
+  })
+
+  it('applies medium size correctly', () => {
+    const { container } = render(<Link href="#" size="medium">Medium Link</Link>)
+    const link = getByRole(container, 'a')
+    expect(link.className).toMatch(/text-\[var\(--font-size-small\)\]/)
+    expect(link.className).toMatch(/leading-\[var\(--line-height-small\)\]/)
+  })
+
+  it('applies inline variant correctly', () => {
+    const { container } = render(<Link href="#" inline>Inline Link</Link>)
+    const link = getByRole(container, 'a')
+    expect(link.className).toMatch(/underline/)
+    expect(link.className).toMatch(/underline-offset-4/)
+    expect(link.className).toMatch(/font-bold/)
+  })
+
+  it('applies disabled state correctly', () => {
+    const { container } = render(<Link href="#" disabled>Disabled Link</Link>)
+    const link = getByRole(container, 'a')
+    expect(link.className).toMatch(/pointer-events-none/)
+    expect(link.className).toMatch(/opacity-50/)
+    expect(link.className).toMatch(/text-muted-foreground/)
+    expect(link.getAttribute('aria-disabled')).toBe('true')
+  })
+
+  it('renders start icon correctly', () => {
+    const { container } = render(
+      <Link href="#" startIcon={<ExternalLink data-testid="start-icon" />}>
+        Link with Start Icon
+      </Link>
+    )
+    expect(getByTestId(container, 'start-icon')).toBeTruthy()
+    expect(container.textContent).toContain('Link with Start Icon')
+  })
+
+  it('renders end icon correctly', () => {
+    const { container } = render(
+      <Link href="#" endIcon={<ArrowRight data-testid="end-icon" />}>
+        Link with End Icon
+      </Link>
+    )
+    expect(getByTestId(container, 'end-icon')).toBeTruthy()
+    expect(container.textContent).toContain('Link with End Icon')
+  })
+
+  it('renders both start and end icons correctly', () => {
+    const { container } = render(
+      <Link 
+        href="#" 
+        startIcon={<ExternalLink data-testid="start-icon" />}
+        endIcon={<ArrowRight data-testid="end-icon" />}
+      >
+        Link with Both Icons
+      </Link>
+    )
+    expect(getByTestId(container, 'start-icon')).toBeTruthy()
+    expect(getByTestId(container, 'end-icon')).toBeTruthy()
+    expect(container.textContent).toContain('Link with Both Icons')
+  })
+
+  it('applies custom className', () => {
+    const { container } = render(<Link href="#" className="custom-class">Custom Link</Link>)
+    const link = getByRole(container, 'a')
+    expect(link.className).toMatch(/custom-class/)
+  })
+
+  it('forwards ref correctly', () => {
+    const ref = vi.fn()
+    render(<Link href="#" ref={ref}>Ref Link</Link>)
+    expect(ref).toHaveBeenCalled()
+  })
+
+  it('handles href attribute correctly', () => {
+    const { container } = render(<Link href="https://example.com">External Link</Link>)
+    const link = getByRole(container, 'a')
+    expect(link.getAttribute('href')).toBe('https://example.com')
+  })
+
+  it('handles target attribute correctly', () => {
+    const { container } = render(<Link href="#" target="_blank">Target Link</Link>)
+    const link = getByRole(container, 'a')
+    expect(link.getAttribute('target')).toBe('_blank')
+  })
+
+  it('combines inline and size variants correctly', () => {
+    const { container } = render(<Link href="#" inline size="medium">Medium Inline Link</Link>)
+    const link = getByRole(container, 'a')
+    expect(link.className).toMatch(/underline/)
+    expect(link.className).toMatch(/font-bold/)
+    expect(link.className).toMatch(/text-\[var\(--font-size-small\)\]/)
+  })
+
+  it('handles disabled inline links correctly', () => {
+    const { container } = render(<Link href="#" inline disabled>Disabled Inline Link</Link>)
+    const link = getByRole(container, 'a')
+    expect(link.className).toMatch(/underline/)
+    expect(link.className).toMatch(/pointer-events-none/)
+    expect(link.className).toMatch(/opacity-50/)
+  })
+
+  it('applies all size variants correctly', () => {
+    const { container } = render(<Link href="#" size="small">Small</Link>)
+    let link = getByRole(container, 'a')
+    expect(link.className).toMatch(/text-\[var\(--font-size-tiny\)\]/)
+
+    const { container: container2 } = render(<Link href="#" size="medium">Medium</Link>)
+    link = getByRole(container2, 'a')
+    expect(link.className).toMatch(/text-\[var\(--font-size-small\)\]/)
+  })
+
+  it('handles all HTML anchor attributes', () => {
+    const { container } = render(
+      <Link 
+        href="https://example.com" 
+        target="_blank" 
+        rel="noopener noreferrer"
+        title="Example Link"
+      >
+        Full Link
+      </Link>
+    )
+    const link = getByRole(container, 'a')
+    expect(link.getAttribute('href')).toBe('https://example.com')
+    expect(link.getAttribute('target')).toBe('_blank')
+    expect(link.getAttribute('rel')).toBe('noopener noreferrer')
+    expect(link.getAttribute('title')).toBe('Example Link')
+  })
+})

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

@@ -0,0 +1,103 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Circle, CircleDot } from "lucide-react"
+import { cn } from "../../../lib/utils"
+
+const radioButtonVariants = cva(
+  "peer relative inline-flex items-center justify-center rounded-full border-2 transition-all outline-none disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      size: {
+        sm: "size-3.5",
+        md: "size-4", 
+        lg: "size-5",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  }
+)
+
+const radioIconVariants = cva(
+  "transition-all",
+  {
+    variants: {
+      size: {
+        sm: "size-3.5",
+        md: "size-4",
+        lg: "size-5", 
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  }
+)
+
+export interface RadioButtonProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,
+    VariantProps<typeof radioButtonVariants> {
+  invalid?: boolean
+}
+
+const RadioButton = React.forwardRef<HTMLInputElement, RadioButtonProps>(
+  (
+    {
+      className,
+      size,
+      invalid = false,
+      disabled = false,
+      checked,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <div className="relative inline-flex items-center">
+        <input
+          ref={ref}
+          type="radio"
+          className="sr-only"
+          disabled={disabled}
+          checked={checked}
+          data-testid="radiobutton-input"
+          {...props}
+        />
+        <div
+          className={cn(
+            radioButtonVariants({ size }),
+            "border-input bg-background",
+            "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+            checked && !invalid && "border-primary bg-primary text-primary-foreground",
+            invalid && "border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
+            invalid && checked && "border-destructive bg-destructive text-destructive-foreground",
+            disabled && "pointer-events-none opacity-50",
+            className
+          )}
+          data-testid="radiobutton"
+        >
+          {checked ? (
+            <CircleDot 
+              className={cn(
+                radioIconVariants({ size }),
+                invalid ? "text-destructive-foreground" : "text-primary-foreground"
+              )}
+            />
+          ) : (
+            <Circle 
+              className={cn(
+                radioIconVariants({ size }),
+                invalid ? "text-destructive" : "text-muted-foreground"
+              )}
+            />
+          )}
+        </div>
+      </div>
+    )
+  }
+)
+
+RadioButton.displayName = "RadioButton"
+
+export { RadioButton }

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

@@ -0,0 +1,314 @@
+/* eslint-disable storybook/no-renderer-packages */
+import type { Meta, StoryObj } from '@storybook/react'
+import { RadioButton } from './index'
+
+const meta: Meta<typeof RadioButton> = {
+  title: 'Atoms/RadioButton',
+  component: RadioButton,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'The size of the radio button',
+    },
+    checked: {
+      control: 'boolean',
+      description: 'Whether the radio button is checked',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the radio button is disabled',
+    },
+    invalid: {
+      control: 'boolean',
+      description: 'Whether the radio button is in an invalid state',
+    },
+    name: {
+      control: 'text',
+      description: 'The name attribute for the radio button group',
+    },
+    value: {
+      control: 'text',
+      description: 'The value attribute for the radio button',
+    },
+  },
+}
+
+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">
+        <RadioButton size="sm" checked={false} />
+        <span className="text-xs text-muted-foreground">Small</span>
+      </div>
+      <div className="flex flex-col items-center gap-2">
+        <RadioButton size="md" checked={false} />
+        <span className="text-xs text-muted-foreground">Medium</span>
+      </div>
+      <div className="flex flex-col items-center gap-2">
+        <RadioButton size="lg" checked={false} />
+        <span className="text-xs text-muted-foreground">Large</span>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'RadioButton component in different sizes: small (14px), medium (16px), and large (20px).',
+      },
+    },
+  },
+}
+
+export const RadioGroup: Story = {
+  render: () => (
+    <div className="space-y-3">
+      <div className="flex items-center gap-2">
+        <RadioButton name="option" value="option1" checked={true} />
+        <label className="text-sm">Option 1 (Selected)</label>
+      </div>
+      <div className="flex items-center gap-2">
+        <RadioButton name="option" value="option2" checked={false} />
+        <label className="text-sm">Option 2</label>
+      </div>
+      <div className="flex items-center gap-2">
+        <RadioButton name="option" value="option3" checked={false} />
+        <label className="text-sm">Option 3</label>
+      </div>
+      <div className="flex items-center gap-2">
+        <RadioButton name="option" value="option4" checked={false} disabled />
+        <label className="text-sm text-muted-foreground">Option 4 (Disabled)</label>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Example of radio buttons 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">
+            <RadioButton checked={false} />
+            <span className="text-sm">Unchecked</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <RadioButton 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">
+            <RadioButton checked={false} disabled />
+            <span className="text-sm text-muted-foreground">Disabled Unchecked</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <RadioButton 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">
+            <RadioButton checked={false} invalid />
+            <span className="text-sm">Invalid Unchecked</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <RadioButton checked={true} invalid />
+            <span className="text-sm">Invalid Checked</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Comprehensive overview of all radio button 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">RadioButton Component</h2>
+        <p className="text-sm text-muted-foreground mb-4">
+          Radio buttons allow users to select one option from a set of mutually exclusive options. 
+          The RadioButton component provides a custom-styled radio 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">
+            <RadioButton size="sm" checked={false} />
+            <span className="text-sm text-muted-foreground">Small (14px) - Compact layouts</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <RadioButton size="md" checked={false} />
+            <span className="text-sm text-muted-foreground">Medium (16px) - Default size</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <RadioButton 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">
+            <RadioButton checked={false} />
+            <span className="text-xs text-muted-foreground">Unchecked</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <RadioButton checked={true} />
+            <span className="text-xs text-muted-foreground">Checked</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <RadioButton checked={false} disabled />
+            <span className="text-xs text-muted-foreground">Disabled</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <RadioButton 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 radio buttons when users need to select exactly one option from a list
+          </p>
+          <p className="text-sm text-muted-foreground">
+            • Group related radio buttons using the same `name` attribute
+          </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, Arrow keys)
+          </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 RadioButton component.',
+      },
+    },
+  },
+}