@umituz/web-design-system 5.0.0 → 5.2.0

package/src/__tests__/plan-picker.test.tsx

@@ -0,0 +1,81 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { PlanPicker } from '../presentation/organisms/PlanPicker';
+import type { PlanPickerPlan } from '../presentation/organisms/PlanPicker';
+
+afterEach(cleanup);
+
+const plans: PlanPickerPlan[] = [
+  { id: 'starter', name: 'Starter', price: '$0', priceNote: '/ forever', ctaLabel: 'Downgrade' },
+  { id: 'pro', name: 'Pro', price: '$29', priceNote: '/ mo', badge: 'Popular', highlight: true, ctaLabel: 'Choose Pro' },
+  { id: 'master', name: 'Master', price: '$59', priceNote: '/ mo', current: true, ctaLabel: 'Current tier' },
+];
+
+describe('PlanPicker cycle switch', () => {
+  it('renders the cycle options and reports changes', () => {
+    const onCycleChange = vi.fn();
+    render(
+      <PlanPicker
+        plans={plans}
+        cycles={[
+          { value: 'monthly' as const, label: 'Monthly' },
+          { value: 'yearly' as const, label: 'Yearly', hint: '-17%' },
+        ]}
+        cycle="monthly"
+        onCycleChange={onCycleChange}
+      />,
+    );
+    expect(screen.getByRole('button', { name: /monthly/i }).className).toContain('bg-background');
+    expect(screen.getByRole('button', { name: /yearly/i }).className).not.toContain('bg-background');
+    fireEvent.click(screen.getByRole('button', { name: /yearly/i }));
+    expect(onCycleChange).toHaveBeenCalledWith('yearly');
+  });
+});
+
+describe('PlanPicker plan cards', () => {
+  it('fires the per-plan CTA and marks the selected card', () => {
+    const onPlanSelect = vi.fn();
+    const proSelect = vi.fn();
+    render(
+      <PlanPicker
+        plans={plans.map((p) => (p.id === 'pro' ? { ...p, onSelect: proSelect } : p))}
+        selectedId="pro"
+        onPlanSelect={onPlanSelect}
+      />,
+    );
+    const proCard = screen.getByRole('radio', { name: /choose pro/i });
+    expect(proCard.getAttribute('aria-checked')).toBe('true');
+    fireEvent.click(screen.getByRole('button', { name: 'Choose Pro' }));
+    expect(proSelect).toHaveBeenCalledTimes(1);
+    expect(onPlanSelect).not.toHaveBeenCalled();
+    fireEvent.click(screen.getByRole('radio', { name: /downgrade/i }));
+    expect(onPlanSelect).toHaveBeenCalledWith('starter');
+  });
+
+  it('renders the current plan as a static marker, not a button', () => {
+    render(<PlanPicker plans={plans} onPlanSelect={() => {}} />);
+    expect(screen.queryByRole('button', { name: /current tier/i })).toBeNull();
+    const marker = screen.getByText('Current tier');
+    expect(marker.className).toContain('bg-success/10');
+  });
+
+  it('busy locks every CTA', () => {
+    render(
+      <PlanPicker
+        plans={[{ id: 'a', name: 'A', price: '$1', ctaLabel: 'Buy', onSelect: () => {} }]}
+        busy
+      />,
+    );
+    const cta = screen.getByRole('button', { name: /buy/i }) as HTMLButtonElement;
+    expect(cta.disabled).toBe(true);
+  });
+
+  it('maps the columns prop onto the grid', () => {
+    const { container, rerender } = render(<PlanPicker plans={plans} columns={2} />);
+    const grid = container.querySelector('.grid') as HTMLElement;
+    expect(grid.className).toContain('sm:grid-cols-2');
+    expect(grid.className).not.toContain('lg:grid-cols-3');
+    rerender(<PlanPicker plans={plans} columns={4} />);
+    expect(grid.className).toContain('lg:grid-cols-4');
+  });
+});

package/src/__tests__/stepper.test.tsx

@@ -0,0 +1,100 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { Stepper } from '../presentation/organisms/Stepper';
+
+afterEach(cleanup);
+
+const steps = [
+  { id: 'a', label: 'Account' },
+  { id: 'b', label: 'Profile' },
+  { id: 'c', label: 'Review' },
+];
+
+describe('Stepper status derivation', () => {
+  it('marks only the current step with aria-current', () => {
+    render(<Stepper steps={steps} currentStep={1} ariaLabel="Progress" />);
+    const list = screen.getByRole('list', { name: 'Progress' });
+    const current = list.querySelectorAll('[aria-current="step"]');
+    expect(current).toHaveLength(1);
+    expect(current[0]?.textContent).toContain('Profile');
+  });
+
+  it('shows a check icon for completed steps and numbers for the rest', () => {
+    render(<Stepper steps={steps} currentStep={1} />);
+    const items = screen.getAllByRole('listitem');
+    expect(items[0]?.querySelector('svg')).not.toBeNull();
+    expect(items[1]?.querySelector('svg')).toBeNull();
+    expect(items[1]?.textContent).toContain('2');
+    expect(items[2]?.textContent).toContain('3');
+  });
+
+  it('lets step.status override the derived status', () => {
+    render(<Stepper steps={[{ ...steps[0]!, status: 'error' }, steps[1]!]} currentStep={0} />);
+    const items = screen.getAllByRole('listitem');
+    expect(items[0]?.textContent).toContain('Account');
+    const dot = items[0]?.querySelector('span');
+    expect(dot?.className).toContain('border-destructive');
+  });
+});
+
+describe('Stepper selection gating', () => {
+  it('fires onStepSelect only for completed steps by default', () => {
+    const onSelect = vi.fn();
+    render(<Stepper steps={steps} currentStep={2} onStepSelect={onSelect} />);
+    const buttons = screen.getAllByRole('button');
+    expect(buttons).toHaveLength(2);
+    fireEvent.click(screen.getByRole('button', { name: /account/i }));
+    expect(onSelect).toHaveBeenCalledWith(0);
+    expect(screen.queryByRole('button', { name: /review/i })).toBeNull();
+  });
+
+  it('canSelect gates forward jumps', () => {
+    const onSelect = vi.fn();
+    render(
+      <Stepper steps={steps} currentStep={0} onStepSelect={onSelect} canSelect={(i) => i <= 1} />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: /profile/i }));
+    expect(onSelect).toHaveBeenCalledWith(1);
+    expect(screen.queryByRole('button', { name: /review/i })).toBeNull();
+  });
+
+  it('locked steps never render as buttons', () => {
+    render(
+      <Stepper
+        steps={[steps[0]!, { ...steps[1]!, locked: true }, steps[2]!]}
+        currentStep={2}
+        onStepSelect={() => {}}
+      />,
+    );
+    expect(screen.queryByRole('button', { name: /profile/i })).toBeNull();
+    expect(screen.getByRole('button', { name: /account/i })).toBeTruthy();
+  });
+
+  it('renders no buttons without onStepSelect', () => {
+    render(<Stepper steps={steps} currentStep={1} />);
+    expect(screen.queryAllByRole('button')).toHaveLength(0);
+  });
+});
+
+describe('Stepper orientation', () => {
+  it('stacks vertically with a rail segment between steps', () => {
+    const { container } = render(<Stepper steps={steps} currentStep={1} orientation="vertical" />);
+    const list = container.querySelector('ol');
+    expect(list?.className).toContain('flex-col');
+    const rail = container.querySelectorAll('ol > li > span.w-px');
+    expect(rail).toHaveLength(2);
+    expect(rail[0]?.className).toContain('bg-primary/60');
+    expect(rail[1]?.className).toContain('bg-border');
+  });
+
+  it('renders descriptions and the optional marker', () => {
+    render(
+      <Stepper
+        steps={[{ id: 'a', label: 'Account', description: 'Your details', optional: true }]}
+        currentStep={0}
+      />,
+    );
+    expect(screen.getByText('Your details')).toBeTruthy();
+    expect(screen.getByText('(optional)')).toBeTruthy();
+  });
+});

package/src/presentation/molecules/MarkdownText.tsx

@@ -0,0 +1,171 @@
+import { Fragment, type ReactNode } from 'react';
+import { cn } from '../../infrastructure/utils';
+import type { BaseProps } from '../../domain/types';
+
+export interface MarkdownTextProps extends BaseProps {
+  children: string;
+}
+
+const INLINE_PATTERN =
+  /(\*\*([^*]+)\*\*)|(\*([^*\n]+)\*)|(`([^`\n]+)`)|(\[([^\]]+)\]\((https?:\/\/[^)\s]+)\))/g;
+
+const FENCE_OPEN = /^```/;
+const HEADING_PATTERN = /^(#{1,3})\s+(.*)$/;
+const UNORDERED_ITEM = /^[-•]\s+(.*)$/;
+const ORDERED_ITEM = /^\d+[.)]\s+(.*)$/;
+
+function renderInline(text: string, keyPrefix: string): ReactNode[] {
+  const nodes: ReactNode[] = [];
+  let cursor = 0;
+  let match: RegExpExecArray | null;
+  let seq = 0;
+  INLINE_PATTERN.lastIndex = 0;
+
+  while ((match = INLINE_PATTERN.exec(text)) !== null) {
+    if (match.index > cursor) {
+      nodes.push(text.slice(cursor, match.index));
+    }
+    const key = `${keyPrefix}-i${seq++}`;
+    if (match[2] !== undefined) {
+      nodes.push(<strong key={key}>{match[2]}</strong>);
+    } else if (match[4] !== undefined) {
+      nodes.push(<em key={key}>{match[4]}</em>);
+    } else if (match[6] !== undefined) {
+      nodes.push(
+        <code key={key} className="rounded bg-muted px-1 py-0.5 font-mono text-[0.85em]">
+          {match[6]}
+        </code>
+      );
+    } else if (match[8] !== undefined && match[9] !== undefined) {
+      nodes.push(
+        <a
+          key={key}
+          href={match[9]}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="font-medium text-primary underline underline-offset-2"
+        >
+          {match[8]}
+        </a>
+      );
+    }
+    cursor = match.index + match[0].length;
+  }
+
+  if (cursor < text.length) {
+    nodes.push(text.slice(cursor));
+  }
+  return nodes;
+}
+
+function renderParagraphLines(lines: string[], key: string): ReactNode {
+  return (
+    <p key={key}>
+      {lines.map((line, index) => (
+        <Fragment key={`${key}-l${index}`}>
+          {index > 0 && <br />}
+          {renderInline(line, `${key}-l${index}`)}
+        </Fragment>
+      ))}
+    </p>
+  );
+}
+
+export const MarkdownText = ({ children, className }: MarkdownTextProps) => {
+  const lines = children.replace(/\r\n/g, '\n').split('\n');
+  const blocks: ReactNode[] = [];
+  let index = 0;
+  let seq = 0;
+
+  while (index < lines.length) {
+    const line = lines[index] ?? '';
+
+    if (line.trim().length === 0) {
+      index += 1;
+      continue;
+    }
+
+    if (FENCE_OPEN.test(line.trim())) {
+      const codeLines: string[] = [];
+      index += 1;
+      while (index < lines.length && !FENCE_OPEN.test((lines[index] ?? '').trim())) {
+        codeLines.push(lines[index] ?? '');
+        index += 1;
+      }
+      index += 1;
+      blocks.push(
+        <pre
+          key={`b${seq++}`}
+          className="overflow-x-auto rounded-lg border border-border bg-card p-3 font-mono text-xs leading-relaxed"
+        >
+          <code>{codeLines.join('\n')}</code>
+        </pre>
+      );
+      continue;
+    }
+
+    const headingMatch = HEADING_PATTERN.exec(line);
+    if (headingMatch) {
+      const level = headingMatch[1]?.length ?? 3;
+      const content = headingMatch[2] ?? '';
+      const key = `b${seq++}`;
+      if (level === 1) {
+        blocks.push(<h3 key={key} className="text-base font-semibold">{renderInline(content, key)}</h3>);
+      } else if (level === 2) {
+        blocks.push(<h4 key={key} className="text-sm font-semibold">{renderInline(content, key)}</h4>);
+      } else {
+        blocks.push(<h5 key={key} className="text-xs font-semibold uppercase tracking-wide">{renderInline(content, key)}</h5>);
+      }
+      index += 1;
+      continue;
+    }
+
+    if (UNORDERED_ITEM.test(line)) {
+      const items: string[] = [];
+      while (index < lines.length && UNORDERED_ITEM.test(lines[index] ?? '')) {
+        items.push((UNORDERED_ITEM.exec(lines[index] ?? '')?.[1] ?? '').trim());
+        index += 1;
+      }
+      blocks.push(
+        <ul key={`b${seq++}`} className="list-disc space-y-1 pl-5">
+          {items.map((item, itemIndex) => (
+            <li key={`li${itemIndex}`}>{renderInline(item, `b${seq}-li${itemIndex}`)}</li>
+          ))}
+        </ul>
+      );
+      continue;
+    }
+
+    if (ORDERED_ITEM.test(line)) {
+      const items: string[] = [];
+      while (index < lines.length && ORDERED_ITEM.test(lines[index] ?? '')) {
+        items.push((ORDERED_ITEM.exec(lines[index] ?? '')?.[1] ?? '').trim());
+        index += 1;
+      }
+      blocks.push(
+        <ol key={`b${seq++}`} className="list-decimal space-y-1 pl-5">
+          {items.map((item, itemIndex) => (
+            <li key={`li${itemIndex}`}>{renderInline(item, `b${seq}-li${itemIndex}`)}</li>
+          ))}
+        </ol>
+      );
+      continue;
+    }
+
+    const paragraphLines: string[] = [];
+    while (
+      index < lines.length &&
+      (lines[index] ?? '').trim().length > 0 &&
+      !FENCE_OPEN.test((lines[index] ?? '').trim()) &&
+      !HEADING_PATTERN.test(lines[index] ?? '') &&
+      !UNORDERED_ITEM.test(lines[index] ?? '') &&
+      !ORDERED_ITEM.test(lines[index] ?? '')
+    ) {
+      paragraphLines.push(lines[index] ?? '');
+      index += 1;
+    }
+    blocks.push(renderParagraphLines(paragraphLines, `b${seq++}`));
+  }
+
+  return <div className={cn('space-y-3 text-sm leading-relaxed', className)}>{blocks}</div>;
+};

package/src/presentation/molecules/index.ts

@@ -67,3 +67,6 @@ export type { BookmarkButtonProps, BookmarkTone } from './BookmarkButton';
 
 export { TagInput } from './TagInput';
 export type { TagInputProps } from './TagInput';
+
+export { MarkdownText } from './MarkdownText';
+export type { MarkdownTextProps } from './MarkdownText';

package/src/presentation/organisms/Modal.tsx

@@ -15,7 +15,7 @@ import {
   DialogTitle,
 } from './Dialog';
 
-export type ModalSize = 'sm' | 'md' | 'lg';
+export type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 
 export interface ModalProps {
   open: boolean;
@@ -25,6 +25,7 @@ export interface ModalProps {
   subtitle?: ReactNode;
   size?: ModalSize;
   danger?: boolean;
+  scrollable?: boolean;
   footer?: ReactNode;
   children?: ReactNode;
   className?: string;
@@ -35,6 +36,8 @@ const sizeWidths: Record<ModalSize, string> = {
   sm: 'max-w-sm',
   md: 'max-w-lg',
   lg: 'max-w-2xl',
+  xl: 'max-w-4xl',
+  '2xl': 'max-w-5xl',
 };
 
 export function Modal({
@@ -45,6 +48,7 @@ export function Modal({
   subtitle,
   size = 'md',
   danger = false,
+  scrollable = false,
   footer,
   children,
   className,
@@ -52,7 +56,15 @@ export function Modal({
 }: ModalProps) {
   return (
     <Dialog open={open} onOpenChange={(next) => { if (!next) onClose(); }}>
-      <DialogContent className={cn(sizeWidths[size], danger && 'border-destructive', className)} {...contentProps}>
+      <DialogContent
+        className={cn(
+          sizeWidths[size],
+          danger && 'border-destructive',
+          scrollable && 'flex max-h-[92vh] flex-col overflow-hidden',
+          className,
+        )}
+        {...contentProps}
+      >
         {(title !== undefined || description !== undefined || subtitle !== undefined) && (
           <DialogHeader>
             {title !== undefined && (
@@ -64,7 +76,7 @@ export function Modal({
             {(subtitle ?? description) !== undefined && <DialogDescription>{subtitle ?? description}</DialogDescription>}
           </DialogHeader>
         )}
-        {children}
+        {scrollable ? <div className="min-h-0 flex-1 overflow-y-auto">{children}</div> : children}
         {footer !== undefined && <DialogFooter>{footer}</DialogFooter>}
       </DialogContent>
     </Dialog>

package/src/presentation/organisms/PlanPicker.tsx

@@ -0,0 +1,202 @@
+/**
+ * PlanPicker Component (Organism)
+ * @description Pricing plan card group with an optional billing cycle switch;
+ * money stays caller-computed — price and features are plain nodes
+ */
+
+import type { KeyboardEvent, ReactNode } from 'react';
+import { Check } from 'lucide-react';
+import { cn } from '../../infrastructure/utils';
+import { Button } from '../atoms/Button';
+import { Segmented } from '../molecules/Segmented';
+
+export interface PlanPickerCycle<T extends string = string> {
+  value: T;
+  label: ReactNode;
+  hint?: ReactNode;
+}
+
+export interface PlanPickerPlan {
+  id: string;
+  name: ReactNode;
+  badge?: ReactNode;
+  description?: ReactNode;
+  price: ReactNode;
+  priceNote?: ReactNode;
+  meta?: ReactNode;
+  features?: ReactNode[];
+  current?: boolean;
+  highlight?: boolean;
+  ctaLabel?: ReactNode;
+  disabled?: boolean;
+  onSelect?: () => void;
+}
+
+export interface PlanPickerProps<T extends string = string> {
+  plans: readonly PlanPickerPlan[];
+  cycle?: T;
+  cycles?: readonly PlanPickerCycle<T>[];
+  onCycleChange?: (value: T) => void;
+  selectedId?: string;
+  onPlanSelect?: (id: string) => void;
+  busy?: boolean;
+  columns?: 2 | 3 | 4;
+  className?: string;
+}
+
+const gridColumns: Record<2 | 3 | 4, string> = {
+  2: 'grid-cols-1 sm:grid-cols-2',
+  3: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
+  4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
+};
+
+function PlanCard({
+  plan,
+  selected,
+  selectable,
+  busy,
+  onSelect,
+}: {
+  plan: PlanPickerPlan;
+  selected: boolean;
+  selectable: boolean;
+  busy: boolean;
+  onSelect: (id: string) => void;
+}) {
+  const handleKeyDown = (event: KeyboardEvent<HTMLElement>) => {
+    if (selectable && (event.key === 'Enter' || event.key === ' ')) {
+      event.preventDefault();
+      onSelect(plan.id);
+    }
+  };
+  return (
+    <article
+      role={selectable ? 'radio' : undefined}
+      aria-checked={selectable ? selected : undefined}
+      tabIndex={selectable ? 0 : undefined}
+      onClick={() => selectable && onSelect(plan.id)}
+      onKeyDown={handleKeyDown}
+      className={cn(
+        'relative flex flex-col gap-4 rounded-xl border bg-card p-5 text-left transition',
+        plan.highlight ? 'border-2 border-primary shadow-lg shadow-primary/5' : 'border-border',
+        selected && !plan.highlight && 'border-primary bg-primary/5',
+        plan.current && 'bg-muted/30',
+        selectable && 'cursor-pointer hover:border-primary/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+      )}
+    >
+      {plan.badge !== undefined && (
+        <span
+          className={cn(
+            'absolute -top-2.5 left-1/2 -translate-x-1/2 rounded-full px-2.5 py-0.5 text-[11px] font-bold shadow-xs',
+            plan.highlight ? 'bg-primary text-primary-foreground' : 'bg-muted text-foreground',
+          )}
+        >
+          {plan.badge}
+        </span>
+      )}
+      <div className="flex flex-col gap-1">
+        <span className="text-xs font-bold uppercase tracking-wider text-muted-foreground">{plan.name}</span>
+        <span className="flex flex-wrap items-baseline gap-1">
+          <span className="text-3xl font-extrabold tracking-tight text-foreground">{plan.price}</span>
+          {plan.priceNote !== undefined && (
+            <span className="text-xs text-muted-foreground">{plan.priceNote}</span>
+          )}
+        </span>
+        {plan.description !== undefined && (
+          <p className="text-xs text-muted-foreground">{plan.description}</p>
+        )}
+      </div>
+      {plan.meta !== undefined && (
+        <div className="flex items-center gap-2 rounded-lg bg-muted/60 px-2.5 py-2 text-xs text-muted-foreground">
+          {plan.meta}
+        </div>
+      )}
+      {plan.features !== undefined && plan.features.length > 0 && (
+        <ul className="flex flex-col gap-2 text-xs text-foreground/80">
+          {plan.features.map((feature, index) => (
+            <li key={index} className="flex items-start gap-2">
+              <Check className="mt-0.5 size-3.5 shrink-0 text-primary" aria-hidden="true" />
+              <span>{feature}</span>
+            </li>
+          ))}
+        </ul>
+      )}
+      <div className="mt-auto pt-1">
+        {plan.current ? (
+          <div
+            aria-disabled="true"
+            className="w-full rounded-lg bg-success/10 px-3 py-2 text-center text-xs font-semibold text-success"
+          >
+            {plan.ctaLabel ?? 'Current plan'}
+          </div>
+        ) : (
+          <Button
+            variant={plan.highlight ? 'primary' : 'secondary'}
+            size="sm"
+            block
+            disabled={plan.disabled}
+            loading={busy}
+            onClick={(event) => {
+              event.stopPropagation();
+              plan.onSelect?.();
+            }}
+          >
+            {plan.ctaLabel ?? 'Select'}
+          </Button>
+        )}
+      </div>
+    </article>
+  );
+}
+
+export function PlanPicker<T extends string = string>({
+  plans,
+  cycle,
+  cycles,
+  onCycleChange,
+  selectedId,
+  onPlanSelect,
+  busy = false,
+  columns = 3,
+  className,
+}: PlanPickerProps<T>) {
+  const showCycles = cycles !== undefined && cycles.length > 0 && cycle !== undefined && onCycleChange !== undefined;
+  return (
+    <div className={className}>
+      {showCycles && (
+        <div className="mb-5 flex justify-center">
+          <Segmented
+            aria-label="Billing cycle"
+            options={cycles.map((entry) => ({
+              value: entry.value,
+              label: (
+                <span className="flex items-center gap-1.5">
+                  {entry.label}
+                  {entry.hint !== undefined && (
+                    <span className="rounded bg-success/15 px-1 py-0.5 text-[10px] font-bold text-success">
+                      {entry.hint}
+                    </span>
+                  )}
+                </span>
+              ),
+            }))}
+            value={cycle}
+            onChange={onCycleChange}
+          />
+        </div>
+      )}
+      <div className={cn('grid gap-4', gridColumns[columns])}>
+        {plans.map((plan) => (
+          <PlanCard
+            key={plan.id}
+            plan={plan}
+            selected={selectedId === plan.id}
+            selectable={onPlanSelect !== undefined && !plan.current && !plan.disabled}
+            busy={busy}
+            onSelect={onPlanSelect ?? (() => {})}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}