@umituz/web-design-system 6.3.0 → 6.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/web-design-system",
-  "version": "6.3.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/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';