@yuno-payments/dashboard-design-system 0.0.1

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

@@ -0,0 +1,281 @@
+/* eslint-disable storybook/no-renderer-packages */
+import type { Meta, StoryObj } from '@storybook/react'
+import { Tag } from './index'
+import { Flag, Clock, Ban, CheckCircle, Minus, Circle, ArrowLeft } from 'lucide-react'
+
+const meta: Meta<typeof Tag> = {
+  title: 'Atoms/Tag',
+  component: Tag,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['primary', 'secondary', 'outlined'],
+      description: 'The visual style variant of the tag',
+    },
+    color: {
+      control: 'select',
+      options: ['neutral', 'positive', 'negative', 'attentive', 'informative', 'warning'],
+      description: 'The semantic color of the tag',
+    },
+    label: {
+      control: 'text',
+      description: 'The text content of the tag',
+    },
+    startIcon: {
+      control: false,
+      description: 'Icon to display at the start of the tag',
+    },
+    endIcon: {
+      control: false,
+      description: 'Icon to display at the end of the tag',
+    },
+    onDelete: {
+      control: false,
+      description: 'Callback function when delete button is clicked. When provided, shows delete button.',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the tag is disabled',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Basic: Story = {
+  args: {
+    label: 'Basic Tag',
+    variant: 'primary',
+    color: 'neutral',
+  },
+}
+
+export const WithStartIcon: Story = {
+  args: {
+    label: 'With Icon',
+    variant: 'primary',
+    color: 'informative',
+    startIcon: <Flag />,
+  },
+}
+
+export const WithEndIcon: Story = {
+  args: {
+    label: 'With End Icon',
+    variant: 'secondary',
+    color: 'positive',
+    endIcon: <CheckCircle />,
+  },
+}
+
+export const WithDelete: Story = {
+  args: {
+    label: 'Deletable Tag',
+    variant: 'outlined',
+    color: 'negative',
+    onDelete: () => console.log('Tag deleted'),
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    label: 'Disabled Tag',
+    variant: 'primary',
+    color: 'neutral',
+    disabled: true,
+    onDelete: () => console.log('Tag deleted'),
+  },
+}
+
+export const StatusExamples: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-2">
+      <Tag label="Created" variant="secondary" color="positive" startIcon={<CheckCircle />} />
+      <Tag label="Pending" variant="secondary" color="attentive" startIcon={<Clock />} />
+      <Tag label="Expired" variant="secondary" color="negative" startIcon={<Ban />} />
+      <Tag label="Processing" variant="primary" color="informative" startIcon={<Circle />} />
+      <Tag label="Cancelled" variant="outlined" color="negative" startIcon={<Minus />} />
+      <Tag label="Returned" variant="outlined" color="warning" startIcon={<ArrowLeft />} />
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Examples of tags used for different status indicators with appropriate colors and icons.',
+      },
+    },
+  },
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div>
+        <h3 className="text-sm font-medium mb-2">Primary Variants</h3>
+        <div className="flex flex-wrap gap-2">
+          <Tag label="Neutral" variant="primary" color="neutral" />
+          <Tag label="Positive" variant="primary" color="positive" />
+          <Tag label="Negative" variant="primary" color="negative" />
+          <Tag label="Attentive" variant="primary" color="attentive" />
+          <Tag label="Informative" variant="primary" color="informative" />
+          <Tag label="Warning" variant="primary" color="warning" />
+        </div>
+      </div>
+      
+      <div>
+        <h3 className="text-sm font-medium mb-2">Secondary Variants</h3>
+        <div className="flex flex-wrap gap-2">
+          <Tag label="Neutral" variant="secondary" color="neutral" />
+          <Tag label="Positive" variant="secondary" color="positive" />
+          <Tag label="Negative" variant="secondary" color="negative" />
+          <Tag label="Attentive" variant="secondary" color="attentive" />
+          <Tag label="Informative" variant="secondary" color="informative" />
+          <Tag label="Warning" variant="secondary" color="warning" />
+        </div>
+      </div>
+      
+      <div>
+        <h3 className="text-sm font-medium mb-2">Outlined Variants</h3>
+        <div className="flex flex-wrap gap-2">
+          <Tag label="Neutral" variant="outlined" color="neutral" />
+          <Tag label="Positive" variant="outlined" color="positive" />
+          <Tag label="Negative" variant="outlined" color="negative" />
+          <Tag label="Attentive" variant="outlined" color="attentive" />
+          <Tag label="Informative" variant="outlined" color="informative" />
+          <Tag label="Warning" variant="outlined" color="warning" />
+        </div>
+      </div>
+      
+      <div>
+        <h3 className="text-sm font-medium mb-2">With Icons and Delete</h3>
+        <div className="flex flex-wrap gap-2">
+          <Tag 
+            label="With Start Icon" 
+            variant="primary" 
+            color="informative" 
+            startIcon={<Flag />} 
+          />
+          <Tag 
+            label="With End Icon" 
+            variant="secondary" 
+            color="positive" 
+            endIcon={<CheckCircle />} 
+          />
+          <Tag 
+            label="Deletable" 
+            variant="outlined" 
+            color="negative" 
+            onDelete={() => console.log('Deleted')} 
+          />
+          <Tag 
+            label="Full Featured" 
+            variant="primary" 
+            color="attentive" 
+            startIcon={<Clock />} 
+            onDelete={() => console.log('Deleted')} 
+          />
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Comprehensive overview of all tag variants, colors, and features including icons and delete functionality.',
+      },
+    },
+  },
+}
+
+export const Docs: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-lg font-semibold mb-3">Tag Component</h2>
+        <p className="text-sm text-muted-foreground mb-4">
+          Tags are compact elements that represent an input, attribute, or action. They can be used to display status, 
+          categories, or any other metadata. The Tag component supports multiple variants, semantic colors, icons, 
+          and delete functionality.
+        </p>
+      </div>
+
+      <div>
+        <h3 className="text-base font-medium mb-2">Variants</h3>
+        <div className="space-y-2">
+          <div className="flex items-center gap-2">
+            <Tag label="Primary" variant="primary" color="neutral" />
+            <span className="text-sm text-muted-foreground">Solid background, high emphasis</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <Tag label="Secondary" variant="secondary" color="neutral" />
+            <span className="text-sm text-muted-foreground">Light background, medium emphasis</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <Tag label="Outlined" variant="outlined" color="neutral" />
+            <span className="text-sm text-muted-foreground">Border only, low emphasis</span>
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <h3 className="text-base font-medium mb-2">Semantic Colors</h3>
+        <div className="grid grid-cols-2 gap-2">
+          <div className="flex items-center gap-2">
+            <Tag label="Neutral" variant="secondary" color="neutral" />
+            <span className="text-xs text-muted-foreground">Default state</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <Tag label="Positive" variant="secondary" color="positive" />
+            <span className="text-xs text-muted-foreground">Success, approved</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <Tag label="Negative" variant="secondary" color="negative" />
+            <span className="text-xs text-muted-foreground">Error, rejected</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <Tag label="Attentive" variant="secondary" color="attentive" />
+            <span className="text-xs text-muted-foreground">Warning, attention needed</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <Tag label="Informative" variant="secondary" color="informative" />
+            <span className="text-xs text-muted-foreground">Information, neutral</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <Tag label="Warning" variant="secondary" color="warning" />
+            <span className="text-xs text-muted-foreground">Caution, important</span>
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <h3 className="text-base font-medium mb-2">Features</h3>
+        <div className="space-y-2">
+          <div className="flex items-center gap-2">
+            <Tag label="With Icon" variant="primary" color="informative" startIcon={<Flag />} />
+            <span className="text-sm text-muted-foreground">Start and end icons supported</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <Tag label="Deletable" variant="outlined" color="negative" onDelete={() => {}} />
+            <span className="text-sm text-muted-foreground">Delete functionality with X button</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <Tag label="Disabled" variant="primary" color="neutral" disabled />
+            <span className="text-sm text-muted-foreground">Disabled state with reduced opacity</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Complete documentation and usage examples for the Tag component.',
+      },
+    },
+  },
+}

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

@@ -0,0 +1,282 @@
+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 { Tag } 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 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
+}
+
+function getByText(container: HTMLElement, text: string) {
+  const el = Array.from(container.querySelectorAll('*')).find((n) => n.textContent?.includes(text))
+  if (!el) throw new Error(`Element with text "${text}" not found`)
+  return el as HTMLElement
+}
+
+describe('Tag', () => {
+  it('renders with label', () => {
+    const { container } = render(<Tag label="Test Tag" />)
+    expect(getByText(container, 'Test Tag')).toBeTruthy()
+  })
+
+  it('renders with default variant and color', () => {
+    const { container } = render(<Tag label="Test" />)
+    const tag = getByTestId(container, 'tag')
+    expect(tag.className).toMatch(/bg-primary/)
+  })
+
+  it('renders with primary variant', () => {
+    const { container } = render(<Tag label="Test" variant="primary" color="neutral" />)
+    const tag = getByTestId(container, 'tag')
+    expect(tag.className).toMatch(/bg-primary/)
+  })
+
+  it('renders with secondary variant', () => {
+    const { container } = render(<Tag label="Test" variant="secondary" color="neutral" />)
+    const tag = getByTestId(container, 'tag')
+    expect(tag.className).toMatch(/bg-secondary/)
+  })
+
+  it('renders with outlined variant', () => {
+    const { container } = render(<Tag label="Test" variant="outlined" color="neutral" />)
+    const tag = getByTestId(container, 'tag')
+    expect(tag.className).toMatch(/border-border/)
+  })
+
+  it('renders with positive color', () => {
+    const { container } = render(<Tag label="Test" variant="secondary" color="positive" />)
+    const tag = getByTestId(container, 'tag')
+    expect(tag.className).toMatch(/bg-green-50/)
+  })
+
+  it('renders with negative color', () => {
+    const { container } = render(<Tag label="Test" variant="secondary" color="negative" />)
+    const tag = getByTestId(container, 'tag')
+    expect(tag.className).toMatch(/bg-destructive/)
+  })
+
+  it('renders with attentive color', () => {
+    const { container } = render(<Tag label="Test" variant="secondary" color="attentive" />)
+    const tag = getByTestId(container, 'tag')
+    expect(tag.className).toMatch(/bg-amber-50/)
+  })
+
+  it('renders with informative color', () => {
+    const { container } = render(<Tag label="Test" variant="secondary" color="informative" />)
+    const tag = getByTestId(container, 'tag')
+    expect(tag.className).toMatch(/bg-blue-50/)
+  })
+
+  it('renders with warning color', () => {
+    const { container } = render(<Tag label="Test" variant="secondary" color="warning" />)
+    const tag = getByTestId(container, 'tag')
+    expect(tag.className).toMatch(/bg-orange-50/)
+  })
+
+  it('renders start icon when provided', () => {
+    const Icon = () => <span data-testid="start-icon">icon</span>
+    const { container } = render(<Tag label="Test" startIcon={<Icon />} />)
+    expect(getByTestId(container, 'start-icon')).toBeTruthy()
+  })
+
+  it('renders end icon when provided', () => {
+    const Icon = () => <span data-testid="end-icon">icon</span>
+    const { container } = render(<Tag label="Test" endIcon={<Icon />} />)
+    expect(getByTestId(container, 'end-icon')).toBeTruthy()
+  })
+
+  it('renders delete button when onDelete is provided', () => {
+    const handleDelete = vi.fn()
+    const { container } = render(<Tag label="Test" onDelete={handleDelete} />)
+    expect(getByTestId(container, 'tag-delete')).toBeTruthy()
+  })
+
+  it('does not render delete button when onDelete is not provided', () => {
+    const { container } = render(<Tag label="Test" />)
+    expect(() => getByTestId(container, 'tag-delete')).toThrow()
+  })
+
+  it('calls onDelete when delete button is clicked', () => {
+    const handleDelete = vi.fn()
+    const { container } = render(<Tag label="Test" onDelete={handleDelete} />)
+    const deleteButton = getByTestId(container, 'tag-delete')
+    
+    act(() => {
+      deleteButton.click()
+    })
+    
+    expect(handleDelete).toHaveBeenCalledTimes(1)
+  })
+
+  it('prevents event propagation when delete button is clicked', () => {
+    const handleDelete = vi.fn()
+    const handleTagClick = vi.fn()
+    const { container } = render(
+      <Tag label="Test" onDelete={handleDelete} onClick={handleTagClick} />
+    )
+    const deleteButton = getByTestId(container, 'tag-delete')
+    
+    act(() => {
+      deleteButton.click()
+    })
+    
+    expect(handleDelete).toHaveBeenCalledTimes(1)
+    expect(handleTagClick).not.toHaveBeenCalled()
+  })
+
+  it('applies disabled state correctly', () => {
+    const { container } = render(<Tag label="Test" disabled />)
+    const tag = getByTestId(container, 'tag')
+    expect(tag.className).toMatch(/pointer-events-none/)
+    expect(tag.className).toMatch(/opacity-50/)
+  })
+
+  it('disables delete button when disabled', () => {
+    const handleDelete = vi.fn()
+    const { container } = render(<Tag label="Test" onDelete={handleDelete} disabled />)
+    const deleteButton = getByTestId(container, 'tag-delete') as HTMLButtonElement
+    expect(deleteButton.disabled).toBe(true)
+  })
+
+  it('forwards ref correctly', () => {
+    const ref = { current: null }
+    render(<Tag ref={ref} label="Test" />)
+    expect(ref.current).toBeTruthy()
+  })
+
+  it('applies custom className', () => {
+    const { container } = render(<Tag label="Test" className="custom-class" />)
+    const tag = getByTestId(container, 'tag')
+    expect(tag.className).toMatch(/custom-class/)
+  })
+
+  it('passes through HTML div attributes', () => {
+    const { container } = render(<Tag label="Test" data-custom="value" />)
+    const tag = getByTestId(container, 'tag')
+    expect(tag.getAttribute('data-custom')).toBe('value')
+  })
+
+  it('handles all variant and color combinations', () => {
+    const variants = ['primary', 'secondary', 'outlined'] as const
+    const colors = ['neutral', 'positive', 'negative', 'attentive', 'informative', 'warning'] as const
+    
+    variants.forEach(variant => {
+      colors.forEach(color => {
+        const { container } = render(<Tag label="Test" variant={variant} color={color} />)
+        const tag = getByTestId(container, 'tag')
+        expect(tag).toBeTruthy()
+      })
+    })
+  })
+
+  it('renders with both start icon and end icon', () => {
+    const StartIcon = () => <span data-testid="start-icon">start</span>
+    const EndIcon = () => <span data-testid="end-icon">end</span>
+    const { container } = render(
+      <Tag label="Test" startIcon={<StartIcon />} endIcon={<EndIcon />} />
+    )
+    
+    expect(getByTestId(container, 'start-icon')).toBeTruthy()
+    expect(getByTestId(container, 'end-icon')).toBeTruthy()
+  })
+
+  it('renders with start icon and delete button', () => {
+    const StartIcon = () => <span data-testid="start-icon">start</span>
+    const handleDelete = vi.fn()
+    const { container } = render(
+      <Tag label="Test" startIcon={<StartIcon />} onDelete={handleDelete} />
+    )
+    
+    expect(getByTestId(container, 'start-icon')).toBeTruthy()
+    expect(getByTestId(container, 'tag-delete')).toBeTruthy()
+  })
+
+  it('renders with end icon and delete button', () => {
+    const EndIcon = () => <span data-testid="end-icon">end</span>
+    const handleDelete = vi.fn()
+    const { container } = render(
+      <Tag label="Test" endIcon={<EndIcon />} onDelete={handleDelete} />
+    )
+    
+    expect(getByTestId(container, 'end-icon')).toBeTruthy()
+    expect(getByTestId(container, 'tag-delete')).toBeTruthy()
+  })
+
+  it('renders complex label content', () => {
+    const complexLabel = (
+      <span>
+        Complex <strong>Label</strong>
+      </span>
+    )
+    const { container } = render(<Tag label={complexLabel} />)
+    expect(getByText(container, 'Complex')).toBeTruthy()
+    expect(container.querySelector('strong')).toBeTruthy()
+  })
+
+  it('handles click events on the tag', () => {
+    const handleClick = vi.fn()
+    const { container } = render(<Tag label="Test" onClick={handleClick} />)
+    const tag = getByTestId(container, 'tag')
+    
+    act(() => {
+      tag.click()
+    })
+    
+    expect(handleClick).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not call click handler when disabled', () => {
+    const handleClick = vi.fn()
+    const { container } = render(<Tag label="Test" onClick={handleClick} disabled />)
+    const tag = getByTestId(container, 'tag')
+    
+    act(() => {
+      tag.click()
+    })
+    
+    expect(handleClick).not.toHaveBeenCalled()
+  })
+
+  it('renders with all features combined', () => {
+    const StartIcon = () => <span data-testid="start-icon">start</span>
+    const EndIcon = () => <span data-testid="end-icon">end</span>
+    const handleDelete = vi.fn()
+    const handleClick = vi.fn()
+    
+    const { container } = render(
+      <Tag 
+        label="Full Featured Tag"
+        variant="primary"
+        color="informative"
+        startIcon={<StartIcon />}
+        endIcon={<EndIcon />}
+        onDelete={handleDelete}
+        onClick={handleClick}
+        className="custom-class"
+        data-custom="value"
+      />
+    )
+    
+    expect(getByText(container, 'Full Featured Tag')).toBeTruthy()
+    expect(getByTestId(container, 'start-icon')).toBeTruthy()
+    expect(getByTestId(container, 'end-icon')).toBeTruthy()
+    expect(getByTestId(container, 'tag-delete')).toBeTruthy()
+    
+    const tag = getByTestId(container, 'tag')
+    expect(tag.className).toMatch(/custom-class/)
+    expect(tag.getAttribute('data-custom')).toBe('value')
+  })
+})

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

@@ -0,0 +1,62 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+const typographyVariants = cva(
+  "font-[var(--font-family-inter)]",
+  {
+    variants: {
+      variant: {
+        h1: "text-[var(--font-size-h1)] leading-[var(--line-height-h1)] tracking-[var(--letter-spacing-h1)]",
+        h2: "text-[var(--font-size-h2)] leading-[var(--line-height-h2)] tracking-[var(--letter-spacing-h2)]",
+        h3: "text-[var(--font-size-h3)] leading-[var(--line-height-h3)] tracking-[var(--letter-spacing-h3)]",
+        h4: "text-[var(--font-size-h4)] leading-[var(--line-height-h4)] tracking-[var(--letter-spacing-h4)]",
+        h5: "text-[var(--font-size-h5)] leading-[var(--line-height-h5)] tracking-[var(--letter-spacing-h5)]",
+        subtitle: "text-[var(--font-size-subtitle)] leading-[var(--line-height-subtitle)]",
+        body: "text-[var(--font-size-body)] leading-[var(--line-height-body)]",
+        small: "text-[var(--font-size-small)] leading-[var(--line-height-small)]",
+        tiny: "text-[var(--font-size-tiny)] leading-[var(--line-height-tiny)]",
+        "9xl": "text-[var(--font-size-9xl)] leading-[var(--line-height-9xl)] tracking-[var(--letter-spacing-9xl)]",
+        "8xl": "text-[var(--font-size-8xl)] leading-[var(--line-height-8xl)] tracking-[var(--letter-spacing-8xl)]",
+        "7xl": "text-[var(--font-size-7xl)] leading-[var(--line-height-7xl)] tracking-[var(--letter-spacing-7xl)]",
+        "6xl": "text-[var(--font-size-6xl)] leading-[var(--line-height-6xl)] tracking-[var(--letter-spacing-6xl)]",
+        "5xl": "text-[var(--font-size-5xl)] leading-[var(--line-height-5xl)] tracking-[var(--letter-spacing-5xl)]",
+        "4xl": "text-[var(--font-size-4xl)] leading-[var(--line-height-4xl)] tracking-[var(--letter-spacing-4xl)]",
+        "3xl": "text-[var(--font-size-3xl)] leading-[var(--line-height-3xl)]",
+        "2xl": "text-[var(--font-size-2xl)] leading-[var(--line-height-2xl)]",
+        xl: "text-[var(--font-size-xl)] leading-[var(--line-height-xl)]",
+        l: "text-[var(--font-size-l)] leading-[var(--line-height-l)]",
+        m: "text-[var(--font-size-m)] leading-[var(--line-height-m)]",
+        base: "text-[var(--font-size-base)] leading-[var(--line-height-base)]",
+      },
+      weight: {
+        regular: "font-normal",
+        bold: "font-bold",
+      },
+    },
+    defaultVariants: {
+      variant: "body",
+      weight: "regular",
+    },
+  }
+)
+
+export interface TypographyProps
+  extends React.HTMLAttributes<HTMLElement>,
+    VariantProps<typeof typographyVariants> {
+  as?: keyof React.JSX.IntrinsicElements
+}
+
+const Typography = React.forwardRef<HTMLElement, TypographyProps>(
+  ({ className, variant, weight, as: Component = "p", ...props }, ref) => {
+    return React.createElement(Component, {
+      className: cn(typographyVariants({ variant, weight, className })),
+      ref,
+      ...props,
+    })
+  }
+)
+
+Typography.displayName = "Typography"
+
+export { Typography }