@umituz/web-design-system 6.2.0 → 6.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/web-design-system",
-  "version": "6.2.0",
+  "version": "6.4.0",
   "private": false,
   "type": "module",
   "description": "Web Design System - Tailwind v4 authored, precompiled CSS shipped. Atomic Design components (Atoms, Molecules, Organisms, Templates) for React applications.",

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

@@ -0,0 +1,77 @@
+import { afterEach, describe, expect, it } from 'vitest';
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { ConfirmProvider, useConfirm } from '../presentation/organisms/ConfirmProvider';
+
+afterEach(cleanup);
+
+function Probe({ onResult }: { onResult: (value: boolean) => void }) {
+  const confirm = useConfirm();
+  return (
+    <button
+      type="button"
+      onClick={() => {
+        void confirm({ title: 'Delete item?', body: 'This cannot be undone.' }).then(onResult);
+      }}
+    >
+      ask
+    </button>
+  );
+}
+
+describe('ConfirmProvider', () => {
+  it('resolves true when confirmed and closes the dialog', async () => {
+    let result: boolean | undefined;
+    render(
+      <ConfirmProvider>
+        <Probe onResult={(v) => { result = v; }} />
+      </ConfirmProvider>,
+    );
+    expect(screen.queryByRole('dialog')).toBeNull();
+    fireEvent.click(screen.getByRole('button', { name: 'ask' }));
+    expect(screen.getByRole('dialog')).toBeTruthy();
+    expect(screen.getByText('This cannot be undone.')).toBeTruthy();
+    fireEvent.click(screen.getByRole('button', { name: 'Confirm' }));
+    await waitFor(() => expect(result).toBe(true));
+    await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull());
+  });
+
+  it('resolves false when cancelled', async () => {
+    let result: boolean | undefined;
+    render(
+      <ConfirmProvider>
+        <Probe onResult={(v) => { result = v; }} />
+      </ConfirmProvider>,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'ask' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Cancel' }));
+    await waitFor(() => expect(result).toBe(false));
+  });
+
+  it('honors custom labels and tone', () => {
+    function LabelledProbe() {
+      const confirm = useConfirm();
+      return (
+        <button
+          type="button"
+          onClick={() => {
+            void confirm({ title: 'Leave page?', tone: 'danger', confirmLabel: 'Leave', cancelLabel: 'Stay' });
+          }}
+        >
+          go
+        </button>
+      );
+    }
+    render(
+      <ConfirmProvider>
+        <LabelledProbe />
+      </ConfirmProvider>,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'go' }));
+    expect(screen.getByRole('button', { name: 'Leave' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Stay' })).toBeTruthy();
+  });
+
+  it('throws when used outside the provider', () => {
+    expect(() => render(<Probe onResult={() => undefined} />)).toThrow(/ConfirmProvider/);
+  });
+});

package/src/__tests__/name.test.ts

@@ -0,0 +1,45 @@
+import { describe, expect, it } from 'vitest';
+import { initialsOf, nameHue } from '../infrastructure/utils';
+
+describe('initialsOf', () => {
+  it('takes first and last word initials', () => {
+    expect(initialsOf('Kemal Sunal')).toBe('KS');
+  });
+
+  it('uses the first two letters of a single word', () => {
+    expect(initialsOf('Suna')).toBe('SU');
+  });
+
+  it('skips middle words', () => {
+    expect(initialsOf('Ada Lovelace Byron')).toBe('AB');
+  });
+
+  it('collapses repeated whitespace and trims', () => {
+    expect(initialsOf('  Yasar   Kemal ')).toBe('YK');
+  });
+
+  it('returns empty for blank input', () => {
+    expect(initialsOf('   ')).toBe('');
+    expect(initialsOf('')).toBe('');
+  });
+});
+
+describe('nameHue', () => {
+  it('stays within the hue range', () => {
+    for (const seed of ['a', 'b', 'buildora', 'x-y-z', 'Zeynep Hoca']) {
+      const hue = nameHue(seed);
+      expect(hue).toBeGreaterThanOrEqual(0);
+      expect(hue).toBeLessThan(360);
+      expect(Number.isInteger(hue)).toBe(true);
+    }
+  });
+
+  it('is deterministic for the same seed', () => {
+    expect(nameHue('petvia')).toBe(nameHue('petvia'));
+  });
+
+  it('spreads different seeds across the wheel', () => {
+    const hues = new Set(['aa', 'ab', 'ba', 'bb', 'cc'].map(nameHue));
+    expect(hues.size).toBeGreaterThan(1);
+  });
+});

package/src/__tests__/time-ago.test.ts

@@ -0,0 +1,41 @@
+import { describe, expect, it } from 'vitest';
+import { timeAgo } from '../infrastructure/utils';
+
+const now = new Date('2026-11-09T12:00:00Z');
+const at = (offsetSeconds: number) => new Date(now.getTime() + offsetSeconds * 1000);
+
+describe('timeAgo', () => {
+  it('returns now inside the 45s window', () => {
+    expect(timeAgo(at(-20), { now })).toBe('now');
+    expect(timeAgo(at(10), { now })).toBe('now');
+  });
+
+  it('formats past minutes and hours', () => {
+    expect(timeAgo(at(-5 * 60), { now })).toBe('5 minutes ago');
+    expect(timeAgo(at(-3 * 3600), { now })).toBe('3 hours ago');
+  });
+
+  it('uses auto numerics for single units', () => {
+    expect(timeAgo(at(-86400), { now })).toBe('yesterday');
+    expect(timeAgo(at(86400), { now })).toBe('tomorrow');
+  });
+
+  it('formats days and weeks', () => {
+    expect(timeAgo(at(-4 * 86400), { now })).toBe('4 days ago');
+    expect(timeAgo(at(-14 * 86400), { now })).toBe('2 weeks ago');
+  });
+
+  it('caps into months and years', () => {
+    expect(timeAgo(at(-70 * 86400), { now })).toBe('2 months ago');
+    expect(timeAgo(at(-800 * 86400), { now })).toBe('2 years ago');
+  });
+
+  it('compacts with narrow style', () => {
+    expect(timeAgo(at(-3 * 3600), { now, compact: true })).toBe('3h ago');
+  });
+
+  it('accepts iso strings and timestamps', () => {
+    expect(timeAgo('2026-11-09T11:00:00Z', { now })).toBe('1 hour ago');
+    expect(timeAgo(now.getTime() - 7200_000, { now })).toBe('2 hours ago');
+  });
+});

package/src/infrastructure/utils/index.ts

@@ -28,6 +28,11 @@ export type { PageBounds } from './calculation.utils';
 
 export { hashSeed } from './hash.util';
 
+export { initialsOf, nameHue } from './name.util';
+
+export { timeAgo } from './time.util';
+export type { TimeAgoOptions } from './time.util';
+
 export { formatCount } from './format.util';
 
 export { uniqueId } from './id.util';

package/src/infrastructure/utils/name.util.ts

@@ -0,0 +1,12 @@
+import { hashSeed } from './hash.util';
+
+export const initialsOf = (name: string): string => {
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return '';
+  const first = parts[0] ?? '';
+  const last = parts[parts.length - 1] ?? '';
+  if (parts.length === 1) return first.slice(0, 2).toUpperCase();
+  return (first.charAt(0) + last.charAt(0)).toUpperCase();
+};
+
+export const nameHue = (seed: string): number => hashSeed(seed) % 360;

package/src/infrastructure/utils/time.util.ts

@@ -0,0 +1,27 @@
+export interface TimeAgoOptions {
+  now?: Date;
+  locale?: string;
+  compact?: boolean;
+}
+
+const MINUTE = 60;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+const WEEK = 7 * DAY;
+const MONTH = 30.44 * DAY;
+const YEAR = 365.25 * DAY;
+
+export const timeAgo = (input: Date | string | number, options: TimeAgoOptions = {}): string => {
+  const { now = new Date(), locale = 'en', compact = false } = options;
+  const date = input instanceof Date ? input : new Date(input);
+  const deltaSeconds = Math.round((date.getTime() - now.getTime()) / 1000);
+  const formatter = new Intl.RelativeTimeFormat(locale, { numeric: 'auto', style: compact ? 'narrow' : 'long' });
+  const abs = Math.abs(deltaSeconds);
+  if (abs < 45) return formatter.format(0, 'second');
+  if (abs < HOUR) return formatter.format(Math.round(deltaSeconds / MINUTE), 'minute');
+  if (abs < DAY) return formatter.format(Math.round(deltaSeconds / HOUR), 'hour');
+  if (abs < WEEK) return formatter.format(Math.round(deltaSeconds / DAY), 'day');
+  if (abs < MONTH) return formatter.format(Math.round(deltaSeconds / WEEK), 'week');
+  if (abs < YEAR) return formatter.format(Math.round(deltaSeconds / MONTH), 'month');
+  return formatter.format(Math.round(deltaSeconds / YEAR), 'year');
+};

package/src/presentation/molecules/Avatar.tsx

@@ -1,6 +1,6 @@
 
 import { forwardRef, type HTMLAttributes, type ComponentPropsWithoutRef } from 'react';
-import { cn } from '../../infrastructure/utils';
+import { cn, initialsOf } from '../../infrastructure/utils';
 import type { BaseProps } from '../../domain/types';
 import type { ExtendedSizes } from '../../infrastructure/constants';
 
@@ -27,15 +27,6 @@ const nameTones = [
   'bg-secondary text-secondary-foreground',
 ];
 
-const initialsOf = (name: string): string => {
-  const parts = name.trim().split(/\s+/).filter(Boolean);
-  if (parts.length === 0) return '';
-  const first = parts[0] ?? '';
-  const last = parts[parts.length - 1] ?? '';
-  if (parts.length === 1) return first.slice(0, 2).toUpperCase();
-  return (first.charAt(0) + last.charAt(0)).toUpperCase();
-};
-
 const toneIndexOf = (name: string): number => {
   let hash = 0;
   for (let i = 0; i < name.length; i += 1) {

package/src/presentation/organisms/ConfirmProvider.tsx

@@ -0,0 +1,56 @@
+
+import { createContext, useCallback, useContext, useRef, useState } from 'react';
+import type { ReactNode } from 'react';
+import { ConfirmDialog } from './ConfirmDialog';
+
+export interface ConfirmOptions {
+  title: ReactNode;
+  body?: ReactNode;
+  tone?: 'danger' | 'primary' | 'success';
+  confirmLabel?: string;
+  cancelLabel?: string;
+}
+
+export type ConfirmFn = (options: ConfirmOptions) => Promise<boolean>;
+
+const ConfirmContext = createContext<ConfirmFn | null>(null);
+
+export function useConfirm(): ConfirmFn {
+  const confirm = useContext(ConfirmContext);
+  if (!confirm) throw new Error('useConfirm must be used within ConfirmProvider');
+  return confirm;
+}
+
+export function ConfirmProvider({ children }: { children: ReactNode }) {
+  const [options, setOptions] = useState<ConfirmOptions | null>(null);
+  const resolver = useRef<((value: boolean) => void) | null>(null);
+
+  const confirm = useCallback<ConfirmFn>((next) => {
+    setOptions(next);
+    return new Promise<boolean>((resolve) => {
+      resolver.current = resolve;
+    });
+  }, []);
+
+  const settle = (value: boolean) => {
+    resolver.current?.(value);
+    resolver.current = null;
+    setOptions(null);
+  };
+
+  return (
+    <ConfirmContext.Provider value={confirm}>
+      {children}
+      <ConfirmDialog
+        open={options !== null}
+        title={options?.title ?? ''}
+        body={options?.body}
+        tone={options?.tone ?? 'primary'}
+        confirmLabel={options?.confirmLabel}
+        cancelLabel={options?.cancelLabel}
+        onConfirm={() => settle(true)}
+        onClose={() => settle(false)}
+      />
+    </ConfirmContext.Provider>
+  );
+}

package/src/presentation/organisms/index.ts

@@ -170,6 +170,9 @@ export type {
 export { ConfirmDialog } from './ConfirmDialog';
 export type { ConfirmDialogProps } from './ConfirmDialog';
 
+export { ConfirmProvider, useConfirm } from './ConfirmProvider';
+export type { ConfirmOptions, ConfirmFn } from './ConfirmProvider';
+
 export { Stepper } from './Stepper';
 export type { StepperProps, StepperStep, StepperStepStatus } from './Stepper';