@umituz/web-design-system 4.34.0 → 5.1.0

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/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>
+  );
+}

package/src/presentation/organisms/Stepper.tsx

@@ -0,0 +1,146 @@
+/**
+ * Stepper Component (Organism)
+ * @description Horizontal or vertical step indicator with derived status,
+ * optional click navigation and per-step override/lock control
+ */
+
+import type { ReactNode } from 'react';
+import { Check } from 'lucide-react';
+import { cn } from '../../infrastructure/utils';
+
+export type StepperStepStatus = 'completed' | 'current' | 'upcoming' | 'error';
+
+export interface StepperStep {
+  id: string;
+  label: ReactNode;
+  description?: ReactNode;
+  icon?: ReactNode;
+  status?: StepperStepStatus;
+  locked?: boolean;
+  optional?: boolean;
+}
+
+export interface StepperProps {
+  steps: readonly StepperStep[];
+  currentStep: number;
+  orientation?: 'horizontal' | 'vertical';
+  onStepSelect?: (index: number) => void;
+  canSelect?: (index: number) => boolean;
+  ariaLabel?: string;
+  className?: string;
+}
+
+function deriveStatus(step: StepperStep, index: number, currentStep: number): StepperStepStatus {
+  if (step.status !== undefined) return step.status;
+  if (index < currentStep) return 'completed';
+  if (index === currentStep) return 'current';
+  return 'upcoming';
+}
+
+const dotClasses: Record<StepperStepStatus, string> = {
+  completed: 'flex size-7 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground',
+  current: 'flex size-7 shrink-0 items-center justify-center rounded-full border-2 border-primary bg-background text-primary ring-4 ring-primary/15',
+  error: 'flex size-7 shrink-0 items-center justify-center rounded-full border-2 border-destructive bg-background text-destructive ring-4 ring-destructive/15',
+  upcoming: 'flex size-7 shrink-0 items-center justify-center rounded-full border border-border bg-muted text-muted-foreground',
+};
+
+const labelClasses: Record<StepperStepStatus, string> = {
+  completed: 'text-xs font-semibold text-foreground',
+  current: 'text-xs font-bold text-foreground',
+  error: 'text-xs font-bold text-destructive',
+  upcoming: 'text-xs font-medium text-muted-foreground',
+};
+
+function StepperNode({ step, index, status }: { step: StepperStep; index: number; status: StepperStepStatus }) {
+  return (
+    <>
+      <span className={dotClasses[status]}>
+        {status === 'completed' && step.icon === undefined ? (
+          <Check className="size-4" aria-hidden="true" />
+        ) : (
+          step.icon ?? <span className="text-[11px] font-bold">{index + 1}</span>
+        )}
+      </span>
+      <span className="flex min-w-0 flex-col gap-0.5 text-left">
+        <span className={cn(labelClasses[status], 'flex items-center gap-1.5')}>
+          {step.label}
+          {step.optional && <span className="font-normal text-muted-foreground">(optional)</span>}
+        </span>
+        {step.description !== undefined && (
+          <span className="text-[11px] leading-snug text-muted-foreground">{step.description}</span>
+        )}
+      </span>
+    </>
+  );
+}
+
+export function Stepper({
+  steps,
+  currentStep,
+  orientation = 'horizontal',
+  onStepSelect,
+  canSelect,
+  ariaLabel,
+  className,
+}: StepperProps) {
+  const interactive = onStepSelect !== undefined;
+  return (
+    <ol
+      aria-label={ariaLabel}
+      className={cn(
+        orientation === 'horizontal' ? 'flex w-full items-start gap-2' : 'flex w-full flex-col',
+        className,
+      )}
+    >
+      {steps.map((step, index) => {
+        const status = deriveStatus(step, index, currentStep);
+        const clickable =
+          interactive && !step.locked && (canSelect ? canSelect(index) : index < currentStep);
+        const last = index === steps.length - 1;
+        return (
+          <li
+            key={step.id}
+            aria-current={status === 'current' ? 'step' : undefined}
+            className={cn(
+              orientation === 'horizontal'
+                ? 'flex min-w-0 flex-1 items-center gap-2'
+                : cn('relative flex items-start gap-3', !last && 'pb-5'),
+            )}
+          >
+            {orientation === 'vertical' && !last && (
+              <span
+                aria-hidden="true"
+                className={cn(
+                  'absolute bottom-1 left-3.5 top-9 w-px',
+                  status === 'completed' ? 'bg-primary/60' : 'bg-border',
+                )}
+              />
+            )}
+            {clickable ? (
+              <button
+                type="button"
+                onClick={() => onStepSelect?.(index)}
+                className="flex min-w-0 cursor-pointer items-center gap-2 rounded-md p-0.5 text-left transition-colors hover:bg-muted/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              >
+                <StepperNode step={step} index={index} status={status} />
+              </button>
+            ) : (
+              <div className="flex min-w-0 items-center gap-2">
+                <StepperNode step={step} index={index} status={status} />
+              </div>
+            )}
+            {orientation === 'horizontal' && !last && (
+              <span
+                aria-hidden="true"
+                className={cn(
+                  'hidden h-px min-w-4 flex-1 sm:block',
+                  status === 'completed' ? 'bg-primary/60' : 'bg-border',
+                )}
+              />
+            )}
+          </li>
+        );
+      })}
+    </ol>
+  );
+}

package/src/presentation/organisms/index.ts

@@ -177,14 +177,12 @@ export type {
 
 export { ConfirmDialog } from './ConfirmDialog';
 export type { ConfirmDialogProps } from './ConfirmDialog';
-export { CalendarBoard } from './CalendarBoard';
-export type {
-  CalendarBoardProps,
-  CalendarEvent,
-  CalendarEventTone,
-  CalendarLegendItem,
-  CalendarView,
-} from './CalendarBoard';
+
+export { Stepper } from './Stepper';
+export type { StepperProps, StepperStep, StepperStepStatus } from './Stepper';
+
+export { PlanPicker } from './PlanPicker';
+export type { PlanPickerProps, PlanPickerPlan, PlanPickerCycle } from './PlanPicker';
 
 export { CoverArt } from './CoverArt';
 export type { CoverArtProps } from './CoverArt';