@yuno-payments/dashboard-design-system 0.0.1

package/src/components/molecules/popover/popover.stories.tsx

@@ -0,0 +1,241 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { Copy, Download, Settings } from 'lucide-react'
+import { Popover } from './index'
+
+const meta: Meta<typeof Popover> = {
+  title: 'Molecules/Popover',
+  component: Popover,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Popover content text',
+    },
+    shortcut: {
+      control: 'text',
+      description: 'Optional keyboard shortcut to display',
+    },
+    children: {
+      control: 'text',
+      description: 'Trigger element content',
+    },
+    showOn: {
+      control: 'select',
+      options: ['hover', 'click'],
+      description: 'Trigger behavior for showing popover',
+    },
+    side: {
+      control: 'select',
+      options: ['top', 'bottom', 'left', 'right'],
+      description: 'Popover position relative to trigger',
+    },
+    isAvailable: {
+      control: 'boolean',
+      description: 'Whether the popover is available',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    label: 'This is a popover',
+    children: 'Hover me',
+    showOn: 'hover',
+    side: 'bottom',
+    isAvailable: true,
+  },
+}
+
+export const WithShortcut: Story = {
+  args: {
+    label: 'Copy ID',
+    shortcut: '⌘C',
+    children: 'Hover for shortcut',
+    showOn: 'hover',
+    side: 'bottom',
+  },
+}
+
+export const ClickTrigger: Story = {
+  args: {
+    label: 'Click to see this popover',
+    children: 'Click me',
+    showOn: 'click',
+    side: 'bottom',
+  },
+}
+
+export const WithIcon: Story = {
+  args: {
+    label: 'Download file',
+    shortcut: '⌘D',
+    children: (
+      <div className="flex items-center gap-2 p-2 border rounded hover:bg-accent">
+        <Download size={16} />
+        <span>Download</span>
+      </div>
+    ),
+    showOn: 'hover',
+    side: 'top',
+  },
+}
+
+export const Positions: Story = {
+  render: () => (
+    <div className="grid grid-cols-2 gap-8 p-8">
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold">Hover Triggers</h3>
+        <div className="space-y-4">
+          <Popover label="Top position" side="top" showOn="hover">
+            <button className="px-4 py-2 bg-primary text-primary-foreground rounded">
+              Top
+            </button>
+          </Popover>
+          
+          <Popover label="Bottom position" side="bottom" showOn="hover">
+            <button className="px-4 py-2 bg-primary text-primary-foreground rounded">
+              Bottom
+            </button>
+          </Popover>
+          
+          <Popover label="Left position" side="left" showOn="hover">
+            <button className="px-4 py-2 bg-primary text-primary-foreground rounded">
+              Left
+            </button>
+          </Popover>
+          
+          <Popover label="Right position" side="right" showOn="hover">
+            <button className="px-4 py-2 bg-primary text-primary-foreground rounded">
+              Right
+            </button>
+          </Popover>
+        </div>
+      </div>
+      
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold">Click Triggers</h3>
+        <div className="space-y-4">
+          <Popover label="Click popover with shortcut" shortcut="⌘K" side="top" showOn="click">
+            <button className="px-4 py-2 bg-secondary text-secondary-foreground rounded">
+              Click Top
+            </button>
+          </Popover>
+          
+          <Popover label="Another click popover" side="bottom" showOn="click">
+            <button className="px-4 py-2 bg-secondary text-secondary-foreground rounded">
+              Click Bottom
+            </button>
+          </Popover>
+        </div>
+      </div>
+    </div>
+  ),
+}
+
+export const WithComplexContent: Story = {
+  args: {
+    label: 'Settings panel',
+    shortcut: '⌘,',
+    children: (
+      <div className="flex items-center gap-2 p-3 border rounded-lg hover:bg-accent cursor-pointer">
+        <Settings size={20} />
+        <div>
+          <div className="font-medium">Settings</div>
+          <div className="text-sm text-muted-foreground">Configure your preferences</div>
+        </div>
+      </div>
+    ),
+    showOn: 'hover',
+    side: 'right',
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    label: 'This popover is disabled',
+    children: 'Disabled popover',
+    isAvailable: false,
+  },
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="space-y-8 p-4">
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Basic Popovers</h3>
+        <div className="flex gap-4">
+          <Popover label="Simple hover popover" showOn="hover">
+            <span className="px-3 py-1 bg-muted rounded">Hover me</span>
+          </Popover>
+          
+          <Popover label="Simple click popover" showOn="click">
+            <span className="px-3 py-1 bg-muted rounded cursor-pointer">Click me</span>
+          </Popover>
+        </div>
+      </div>
+      
+      <div>
+        <h3 className="text-lg font-semibold mb-4">With Shortcuts</h3>
+        <div className="flex gap-4">
+          <Popover label="Copy" shortcut="⌘C" showOn="hover">
+            <button className="flex items-center gap-2 px-3 py-1 border rounded hover:bg-accent">
+              <Copy size={14} />
+              Copy
+            </button>
+          </Popover>
+          
+          <Popover label="Download file" shortcut="⌘D" showOn="hover">
+            <button className="flex items-center gap-2 px-3 py-1 border rounded hover:bg-accent">
+              <Download size={14} />
+              Download
+            </button>
+          </Popover>
+        </div>
+      </div>
+      
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Different Positions</h3>
+        <div className="grid grid-cols-4 gap-4 place-items-center">
+          <Popover label="Top tooltip" side="top" showOn="hover">
+            <div className="px-4 py-2 bg-primary text-primary-foreground rounded text-center">
+              Top
+            </div>
+          </Popover>
+          
+          <Popover label="Bottom tooltip" side="bottom" showOn="hover">
+            <div className="px-4 py-2 bg-primary text-primary-foreground rounded text-center">
+              Bottom
+            </div>
+          </Popover>
+          
+          <Popover label="Left tooltip" side="left" showOn="hover">
+            <div className="px-4 py-2 bg-primary text-primary-foreground rounded text-center">
+              Left
+            </div>
+          </Popover>
+          
+          <Popover label="Right tooltip" side="right" showOn="hover">
+            <div className="px-4 py-2 bg-primary text-primary-foreground rounded text-center">
+              Right
+            </div>
+          </Popover>
+        </div>
+      </div>
+      
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Disabled State</h3>
+        <Popover label="This won't show" isAvailable={false}>
+          <span className="px-3 py-1 bg-muted text-muted-foreground rounded">
+            Disabled popover
+          </span>
+        </Popover>
+      </div>
+    </div>
+  ),
+}

package/src/components/molecules/popover/popover.test.tsx

@@ -0,0 +1,191 @@
+import { describe, it, expect } from 'vitest'
+import * as React from 'react'
+import { createRoot } from 'react-dom/client'
+import { act } from 'react-dom/test-utils'
+import { Popover } 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 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('Popover', () => {
+  it('renders trigger element correctly', () => {
+    const { container } = render(
+      <Popover label="Test popover">
+        <span>Trigger</span>
+      </Popover>
+    )
+    expect(getByText(container, 'Trigger')).toBeTruthy()
+  })
+
+  it('renders default children when no children provided', () => {
+    const { container } = render(<Popover label="Test popover" />)
+    expect(getByText(container, 'Hover this to see the popover')).toBeTruthy()
+  })
+
+  it('renders only children when isAvailable is false', () => {
+    const { container } = render(
+      <Popover label="Test popover" isAvailable={false}>
+        <span>Trigger</span>
+      </Popover>
+    )
+    
+    expect(getByText(container, 'Trigger')).toBeTruthy()
+    expect(container.querySelector('[role="tooltip"]')).toBeFalsy()
+  })
+
+  it('forwards ref correctly', () => {
+    const ref = { current: null }
+    render(
+      <Popover ref={ref} label="Test">
+        <span>Trigger</span>
+      </Popover>
+    )
+    
+    expect(ref.current).toBeTruthy()
+  })
+
+  it('applies showOn prop correctly', () => {
+    const { container: hoverContainer } = render(
+      <Popover label="Test popover" showOn="hover">
+        <span>Hover Trigger</span>
+      </Popover>
+    )
+    
+    const { container: clickContainer } = render(
+      <Popover label="Test popover" showOn="click">
+        <span>Click Trigger</span>
+      </Popover>
+    )
+    
+    expect(getByText(hoverContainer, 'Hover Trigger')).toBeTruthy()
+    expect(getByText(clickContainer, 'Click Trigger')).toBeTruthy()
+  })
+
+  it('applies side prop correctly', () => {
+    const { container } = render(
+      <Popover label="Test popover" side="top">
+        <span>Trigger</span>
+      </Popover>
+    )
+    
+    expect(getByText(container, 'Trigger')).toBeTruthy()
+  })
+
+  it('handles shortcut prop', () => {
+    const { container } = render(
+      <Popover label="Test popover" shortcut="⌘C">
+        <span>Trigger</span>
+      </Popover>
+    )
+    
+    expect(getByText(container, 'Trigger')).toBeTruthy()
+  })
+
+  it('handles complex children elements', () => {
+    const { container } = render(
+      <Popover label="Complex popover">
+        <div>
+          <span>Complex</span>
+          <button>Button</button>
+        </div>
+      </Popover>
+    )
+    
+    expect(getByText(container, 'Complex')).toBeTruthy()
+    expect(getByText(container, 'Button')).toBeTruthy()
+  })
+
+  it('applies custom className to container', () => {
+    const { container } = render(
+      <Popover label="Test popover" className="custom-class">
+        <span>Trigger</span>
+      </Popover>
+    )
+    
+    const popoverContainer = container.firstChild as HTMLElement
+    expect(popoverContainer.className).toMatch(/relative inline-block/)
+  })
+
+  it('sets correct aria attributes on trigger', () => {
+    const { container } = render(
+      <Popover label="Test popover">
+        <span>Trigger</span>
+      </Popover>
+    )
+    
+    const trigger = getByText(container, 'Trigger').parentElement!
+    expect(trigger.getAttribute('aria-describedby')).toBeFalsy()
+  })
+
+  it('renders with all size variants', () => {
+    const { container: topContainer } = render(
+      <Popover label="Top popover" side="top">
+        <span>Top</span>
+      </Popover>
+    )
+    
+    const { container: bottomContainer } = render(
+      <Popover label="Bottom popover" side="bottom">
+        <span>Bottom</span>
+      </Popover>
+    )
+    
+    const { container: leftContainer } = render(
+      <Popover label="Left popover" side="left">
+        <span>Left</span>
+      </Popover>
+    )
+    
+    const { container: rightContainer } = render(
+      <Popover label="Right popover" side="right">
+        <span>Right</span>
+      </Popover>
+    )
+    
+    expect(getByText(topContainer, 'Top')).toBeTruthy()
+    expect(getByText(bottomContainer, 'Bottom')).toBeTruthy()
+    expect(getByText(leftContainer, 'Left')).toBeTruthy()
+    expect(getByText(rightContainer, 'Right')).toBeTruthy()
+  })
+
+  it('handles HTML attributes correctly', () => {
+    const { container } = render(
+      <Popover label="Test popover" data-testid="popover-test">
+        <span>Trigger</span>
+      </Popover>
+    )
+    
+    expect(getByText(container, 'Trigger')).toBeTruthy()
+  })
+
+  it('renders with different trigger behaviors', () => {
+    const { container: hoverContainer } = render(
+      <Popover label="Hover popover" showOn="hover">
+        <span>Hover me</span>
+      </Popover>
+    )
+    
+    const { container: clickContainer } = render(
+      <Popover label="Click popover" showOn="click">
+        <span>Click me</span>
+      </Popover>
+    )
+    
+    expect(getByText(hoverContainer, 'Hover me')).toBeTruthy()
+    expect(getByText(clickContainer, 'Click me')).toBeTruthy()
+  })
+})

package/src/components/molecules/textfield/index.tsx

@@ -0,0 +1,154 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+const textFieldVariants = cva(
+  "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+  {
+    variants: {
+      variant: {
+        default: "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        error: "border-destructive focus-visible:border-destructive focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
+      },
+      hasStartIcon: {
+        true: "pl-9",
+        false: "",
+      },
+      hasEndIcon: {
+        true: "pr-9",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      hasStartIcon: false,
+      hasEndIcon: false,
+    },
+  }
+)
+
+export interface TextFieldProps
+  extends Omit<React.ComponentProps<"input">, "size">,
+    VariantProps<typeof textFieldVariants> {
+  label?: string | React.ReactNode
+  helperText?: string
+  optionalHelperText?: string
+  startIcon?: React.ReactNode
+  endIcon?: React.ReactNode
+  onClickEnd?: () => void
+  onClickStart?: () => void
+  error?: boolean
+  iconWithHover?: boolean
+}
+
+const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
+  (
+    {
+      className,
+      type,
+      label,
+      helperText,
+      optionalHelperText,
+      startIcon,
+      endIcon,
+      onClickEnd,
+      onClickStart,
+      error = false,
+      iconWithHover = true,
+      disabled,
+      ...props
+    },
+    ref
+  ) => {
+    const variant = error ? "error" : "default"
+    const hasStartIcon = !!startIcon
+    const hasEndIcon = !!endIcon
+
+    const renderStartIcon = () => {
+      if (!startIcon) return null
+      return (
+        <div
+          className={cn(
+            "absolute left-3 top-1/2 -translate-y-1/2 flex items-center justify-center",
+            onClickStart && "cursor-pointer",
+            iconWithHover && onClickStart && "hover:opacity-70 transition-opacity",
+            disabled && "opacity-50"
+          )}
+          onClick={onClickStart}
+        >
+          <div className="w-4 h-4 text-muted-foreground">
+            {startIcon}
+          </div>
+        </div>
+      )
+    }
+
+    const renderEndIcon = () => {
+      if (!endIcon) return null
+      return (
+        <div
+          className={cn(
+            "absolute right-3 top-1/2 -translate-y-1/2 flex items-center justify-center",
+            onClickEnd && "cursor-pointer",
+            iconWithHover && onClickEnd && "hover:opacity-70 transition-opacity",
+            disabled && "opacity-50"
+          )}
+          onClick={onClickEnd}
+        >
+          <div className="w-4 h-4 text-muted-foreground">
+            {endIcon}
+          </div>
+        </div>
+      )
+    }
+
+    return (
+      <div className="w-full">
+        {label && (
+          <label className={cn(
+            "block text-sm font-medium mb-1",
+            disabled ? "text-muted-foreground" : "text-foreground",
+            error && "text-destructive"
+          )}>
+            <span>{label}</span>
+            {optionalHelperText && (
+              <span className={cn(
+                "ml-2 font-normal",
+                disabled ? "text-muted-foreground" : "text-muted-foreground"
+              )}>
+                ({optionalHelperText})
+              </span>
+            )}
+          </label>
+        )}
+        <div className="relative">
+          <input
+            type={type}
+            data-slot="input"
+            className={cn(
+              textFieldVariants({ variant, hasStartIcon, hasEndIcon, className })
+            )}
+            ref={ref}
+            disabled={disabled}
+            aria-invalid={error}
+            {...props}
+          />
+          {renderStartIcon()}
+          {renderEndIcon()}
+        </div>
+        {helperText && (
+          <p className={cn(
+            "mt-1 text-sm",
+            error ? "text-destructive" : "text-muted-foreground"
+          )}>
+            {helperText}
+          </p>
+        )}
+      </div>
+    )
+  }
+)
+
+TextField.displayName = "TextField"
+
+export { TextField }