@umituz/web-design-system 6.13.0 → 6.15.0

package/src/__tests__/entity-row.test.tsx

@@ -0,0 +1,72 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router';
+import { EntityRow } from '../presentation/molecules/EntityRow';
+import { PlaceholderPanel } from '../presentation/molecules/PlaceholderPanel';
+
+describe('EntityRow', () => {
+  it('renders title, icon, meta and aside correctly', () => {
+    render(
+      <MemoryRouter>
+        <ul>
+          <EntityRow
+            icon={<span data-testid="icon">ICON</span>}
+            title="Comprehensive Auto"
+            meta={['Renewal date: 2026-12-01', 'Policy #A-9928']}
+            badge={<span data-testid="badge">Active</span>}
+            aside={<span data-testid="aside">$120/mo</span>}
+          />
+        </ul>
+      </MemoryRouter>
+    );
+
+    expect(screen.getByText('Comprehensive Auto')).toBeDefined();
+    expect(screen.getByTestId('icon')).toBeDefined();
+    expect(screen.getByText('Renewal date: 2026-12-01')).toBeDefined();
+    expect(screen.getByText('Policy #A-9928')).toBeDefined();
+    expect(screen.getByTestId('badge')).toBeDefined();
+    expect(screen.getByTestId('aside')).toBeDefined();
+  });
+
+  it('renders as a link when to prop is provided', () => {
+    render(
+      <MemoryRouter>
+        <ul>
+          <EntityRow
+            icon={<span>ICON</span>}
+            title="Homeowners Plus"
+            to="/policies/123"
+            highlight={true}
+          />
+        </ul>
+      </MemoryRouter>
+    );
+
+    const link = screen.getByRole('link');
+    expect(link.getAttribute('href')).toBe('/policies/123');
+    expect(link.className).toContain('highlight');
+    expect(screen.getByRole('img', { name: 'Unread' })).toBeDefined();
+  });
+});
+
+describe('PlaceholderPanel', () => {
+  it('renders step, title, description and capabilities', () => {
+    render(
+      <PlaceholderPanel
+        step="Step 4"
+        title="Automated Claims"
+        description="Submit photos and get instant estimates."
+        capabilities={['Direct damage upload', 'Fast adjuster review']}
+      >
+        <div data-testid="extra-child">Extra content</div>
+      </PlaceholderPanel>
+    );
+
+    expect(screen.getByText('Roadmap · Step 4')).toBeDefined();
+    expect(screen.getByText('Automated Claims')).toBeDefined();
+    expect(screen.getByText('Submit photos and get instant estimates.')).toBeDefined();
+    expect(screen.getByText('Direct damage upload')).toBeDefined();
+    expect(screen.getByText('Fast adjuster review')).toBeDefined();
+    expect(screen.getByTestId('extra-child')).toBeDefined();
+  });
+});

package/src/__tests__/theme-provider.test.tsx

@@ -14,6 +14,7 @@ import {
   editorialTheme,
   oceanTheme,
   defaultTheme,
+  forestTheme,
 } from '../infrastructure/themes';
 import type { ThemeConfig } from '../domain/types';
 
@@ -30,6 +31,7 @@ describe('Theme System and Provider', () => {
     expect(getTheme('midnight').name).toBe('midnight');
     expect(getTheme('editorial').name).toBe('editorial');
     expect(getTheme('ocean').name).toBe('ocean');
+    expect(getTheme('forest').name).toBe('forest');
     expect(getTheme('default').name).toBe('default');
     expect(getTheme('non-existent').name).toBe('default');
   });
@@ -114,6 +116,11 @@ describe('Theme System and Provider', () => {
 
     const defaultCss = themeToCssVariables(defaultTheme);
     expect(defaultCss).toContain('--color-primary: #2563eb;');
+
+    const forestCss = themeToCssVariables(forestTheme);
+    expect(forestCss).toContain('--color-primary: #14705f;');
+    expect(forestCss).toContain('--color-background: #faf9f7;');
+    expect(forestCss).toContain('--color-brand-600: #14705f;');
   });
 
   it('applies theme variables to document head', () => {

package/src/index.ts

@@ -147,4 +147,8 @@ export { MarkdownText } from './presentation/molecules/MarkdownText';
 export type { MarkdownTextProps } from './presentation/molecules/MarkdownText';
 export { FilterSelect } from './presentation/molecules/FilterSelect';
 export type { FilterSelectProps, FilterSelectOption } from './presentation/molecules/FilterSelect';
+export { EntityRow } from './presentation/molecules/EntityRow';
+export type { EntityRowProps } from './presentation/molecules/EntityRow';
+export { PlaceholderPanel } from './presentation/molecules/PlaceholderPanel';
+export type { PlaceholderPanelProps } from './presentation/molecules/PlaceholderPanel';
 

package/src/infrastructure/themes/forest.theme.ts

@@ -0,0 +1,145 @@
+import type { ThemeConfig } from '../../domain/types';
+
+export const forestTheme: ThemeConfig = {
+  name: 'forest',
+  mode: 'light',
+  colors: {
+    background: '#faf9f7',
+    foreground: '#101c19',
+    card: '#ffffff',
+    cardForeground: '#1a2723',
+    popover: '#ffffff',
+    popoverForeground: '#1a2723',
+    primary: '#14705f',
+    primaryForeground: '#ffffff',
+    primarySoft: '#eef5f2',
+    secondary: '#f3f2ee',
+    secondaryForeground: '#33413d',
+    muted: '#f3f2ee',
+    mutedForeground: '#5c6b66',
+    accent: '#f4ead4',
+    accentForeground: '#9a7328',
+    border: '#e7e5df',
+    input: '#d5d2ca',
+    destructive: '#a32d22',
+    destructiveForeground: '#ffffff',
+    ring: 'rgba(20, 112, 95, 0.45)',
+    success: '#1d6b46',
+    successForeground: '#ffffff',
+    warning: '#8a5a00',
+    warningForeground: '#ffffff',
+    info: '#1c5a80',
+    infoForeground: '#ffffff',
+  },
+  darkColors: {
+    background: '#0c1916',
+    foreground: '#e6ece9',
+    card: '#10221e',
+    cardForeground: '#e6ece9',
+    popover: '#10221e',
+    popoverForeground: '#e6ece9',
+    primary: '#4f9c86',
+    primaryForeground: '#0c1916',
+    secondary: '#16332d',
+    secondaryForeground: '#a3ada9',
+    muted: '#16332d',
+    mutedForeground: '#a3ada9',
+    accent: '#16332d',
+    accentForeground: '#e6ece9',
+    border: '#1c423a',
+    input: '#245248',
+    destructive: '#c2665c',
+    destructiveForeground: '#2a1210',
+    ring: 'rgba(79, 156, 134, 0.45)',
+    success: '#5ea184',
+    successForeground: '#0e1f17',
+    warning: '#c98f4a',
+    warningForeground: '#221607',
+    info: '#7f92cc',
+    infoForeground: '#0e1424',
+  },
+  typography: {
+    fontSans: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+    fontDisplay: "'Fraunces', Georgia, 'Times New Roman', serif",
+  },
+  radii: {
+    sm: '6px',
+    md: '10px',
+    lg: '16px',
+    xl: '999px',
+  },
+  customVars: {
+    'color-brand-50': '#eef5f2',
+    'color-brand-100': '#d9eae3',
+    'color-brand-200': '#b3d5c8',
+    'color-brand-400': '#4f9c86',
+    'color-brand-500': '#2c8268',
+    'color-brand-600': '#14705f',
+    'color-brand-700': '#11574b',
+    'color-brand-800': '#0f463d',
+    'color-brand-900': '#0c3b33',
+    'color-ink-950': '#101c19',
+    'color-ink-900': '#1a2723',
+    'color-ink-700': '#33413d',
+    'color-ink-500': '#5c6b66',
+    'color-ink-400': '#7d8a85',
+    'color-ink-300': '#a3ada9',
+    'color-paper': '#faf9f7',
+    'color-surface': '#ffffff',
+    'color-surface-subtle': '#f3f2ee',
+    'color-line': '#e7e5df',
+    'color-line-strong': '#d5d2ca',
+    'color-inverse': '#0f2e28',
+    'color-scrim': 'rgba(16, 28, 25, 0.4)',
+    'color-hairline-inverse': 'rgba(238, 245, 242, 0.14)',
+    'color-accent-600': '#9a7328',
+    'color-accent-100': '#f4ead4',
+    'color-success-700': '#1d6b46',
+    'color-success-100': '#e0f0e6',
+    'color-warning-700': '#8a5a00',
+    'color-warning-100': '#f9eed3',
+    'color-danger-700': '#a32d22',
+    'color-danger-100': '#f9e3df',
+    'color-info-700': '#1c5a80',
+    'color-info-100': '#e1eef6',
+    'space-1': '0.25rem',
+    'space-2': '0.5rem',
+    'space-3': '0.75rem',
+    'space-4': '1rem',
+    'space-5': '1.5rem',
+    'space-6': '2rem',
+    'space-8': '3rem',
+    'space-10': '4rem',
+    'space-12': '5rem',
+    'space-16': '7rem',
+    'radius-pill': '999px',
+    'shadow-sm': '0 1px 2px rgba(16, 28, 25, 0.05)',
+    'shadow-md': '0 10px 30px rgba(16, 28, 25, 0.08)',
+    'container-max': '72rem',
+    'container-narrow': '48rem',
+    'header-height': '4rem',
+    'duration-fast': '140ms',
+    'duration-slow': '240ms',
+    'ease-out': 'cubic-bezier(0.2, 0.7, 0.3, 1)',
+    'focus-ring': '0 0 0 2px #faf9f7, 0 0 0 4px #2c8268',
+    'text-xs': '0.75rem',
+    'text-sm': '0.875rem',
+    'text-base': '1rem',
+    'text-lg': '1.125rem',
+    'text-xl': '1.375rem',
+    'text-2xl': '1.75rem',
+    'text-3xl': '2.125rem',
+    'text-4xl': '2.75rem',
+    'text-hero': 'clamp(2.625rem, 6vw, 4.25rem)',
+    'leading-tight': '1.15',
+    'leading-snug': '1.35',
+    'leading-normal': '1.55',
+    'leading-relaxed': '1.7',
+    'tracking-tight': '-0.02em',
+    'tracking-display': '-0.025em',
+    'tracking-wide': '0.08em',
+    'weight-regular': '400',
+    'weight-medium': '500',
+    'weight-semibold': '600',
+  },
+};

package/src/infrastructure/themes/index.ts

@@ -2,6 +2,7 @@ export { defaultTheme } from './default.theme';
 export { oceanTheme } from './ocean.theme';
 export { midnightTheme } from './midnight.theme';
 export { editorialTheme } from './editorial.theme';
+export { forestTheme } from './forest.theme';
 export { createTheme } from './create-theme';
 export type { ThemeOverrides } from './create-theme';
 export { registerTheme, getTheme, hasTheme, listThemes } from './registry';

package/src/infrastructure/themes/registry.ts

@@ -3,12 +3,14 @@ import { defaultTheme } from './default.theme';
 import { oceanTheme } from './ocean.theme';
 import { midnightTheme } from './midnight.theme';
 import { editorialTheme } from './editorial.theme';
+import { forestTheme } from './forest.theme';
 
 const themeRegistry = new Map<string, ThemeConfig>([
   ['default', defaultTheme],
   ['ocean', oceanTheme],
   ['midnight', midnightTheme],
   ['editorial', editorialTheme],
+  ['forest', forestTheme],
 ]);
 
 export function registerTheme(theme: ThemeConfig): void {

package/src/presentation/molecules/EntityRow.tsx

@@ -0,0 +1,76 @@
+import { forwardRef, type ReactNode } from 'react';
+import { Link } from 'react-router';
+import { cn } from '../../infrastructure/utils';
+
+export interface EntityRowProps {
+  icon: ReactNode;
+  title: ReactNode;
+  meta?: ReactNode[];
+  badge?: ReactNode;
+  aside?: ReactNode;
+  to?: string;
+  highlight?: boolean;
+  className?: string;
+  onClick?: () => void;
+  children?: ReactNode;
+}
+
+export const EntityRow = forwardRef<HTMLLIElement, EntityRowProps>(
+  (
+    {
+      icon,
+      title,
+      meta,
+      badge,
+      aside,
+      to,
+      highlight = false,
+      className,
+      onClick,
+      children,
+    },
+    ref
+  ) => {
+    const content = (
+      <>
+        <span className="entity-row-icon" aria-hidden="true">
+          {icon}
+        </span>
+        <span className="entity-row-main">
+          <span className={cn('entity-row-title', highlight && 'highlight')}>
+            {title}
+            {highlight && <span className="entity-row-dot" role="img" aria-label="Unread" />}
+          </span>
+          {meta?.map((line, index) => (
+            <span key={index} className="entity-row-meta">
+              {line}
+            </span>
+          ))}
+          {children}
+        </span>
+        {badge && <span className="entity-row-badge">{badge}</span>}
+        {aside && <span className="entity-row-aside">{aside}</span>}
+      </>
+    );
+
+    const rowClasses = cn('entity-row', highlight && 'highlight', className);
+
+    if (to) {
+      return (
+        <li ref={ref} className="list-none">
+          <Link to={to} className={rowClasses} onClick={onClick}>
+            {content}
+          </Link>
+        </li>
+      );
+    }
+
+    return (
+      <li ref={ref} className={rowClasses} onClick={onClick}>
+        {content}
+      </li>
+    );
+  }
+);
+
+EntityRow.displayName = 'EntityRow';

package/src/presentation/molecules/PlaceholderPanel.tsx

@@ -0,0 +1,40 @@
+import type { ReactNode } from 'react';
+import { Check } from 'lucide-react';
+import { cn } from '../../infrastructure/utils';
+
+export interface PlaceholderPanelProps {
+  step: string;
+  title: string;
+  description: string;
+  capabilities: string[];
+  children?: ReactNode;
+  className?: string;
+}
+
+export function PlaceholderPanel({
+  step,
+  title,
+  description,
+  capabilities,
+  children,
+  className,
+}: PlaceholderPanelProps) {
+  return (
+    <section className={cn('placeholder-panel', className)} aria-label={title}>
+      <div>
+        <span className="placeholder-panel-step">Roadmap · {step}</span>
+        <h2 className="placeholder-panel-title">{title}</h2>
+        <p className="placeholder-panel-desc">{description}</p>
+      </div>
+      <ul className="placeholder-panel-caps">
+        {capabilities.map((capability) => (
+          <li key={capability} className="placeholder-panel-cap">
+            <Check size={15} className="placeholder-panel-check" aria-hidden="true" />
+            {capability}
+          </li>
+        ))}
+      </ul>
+      {children}
+    </section>
+  );
+}

package/src/presentation/molecules/index.ts

@@ -93,3 +93,9 @@ export type { TabNavProps, TabNavItem } from './TabNav';
 
 export { FilterSelect } from './FilterSelect';
 export type { FilterSelectProps, FilterSelectOption } from './FilterSelect';
+
+export { EntityRow } from './EntityRow';
+export type { EntityRowProps } from './EntityRow';
+
+export { PlaceholderPanel } from './PlaceholderPanel';
+export type { PlaceholderPanelProps } from './PlaceholderPanel';

package/src/styles/compile.css

@@ -3,6 +3,7 @@
 @import "tw-animate-css";
 @import "./theme.css";
 @import "./charts.css";
+@import "./console.css";
 @source "../src";
 
 @media (max-width: 767.98px) {