@umituz/web-design-system 4.7.1 → 4.7.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/web-design-system",
-  "version": "4.7.1",
+  "version": "4.7.3",
   "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__/components.smoke.test.tsx

@@ -32,6 +32,7 @@ import { Drawer } from '../presentation/organisms/Drawer';
 import { Timeline } from '../presentation/organisms/Timeline';
 import { Checklist } from '../presentation/organisms/Checklist';
 import { FormModal } from '../presentation/organisms/FormModal';
+import { ConfirmDialog } from '../presentation/organisms/ConfirmDialog';
 import { BatteryPill } from '../presentation/atoms/BatteryPill';
 import { Kbd } from '../presentation/atoms/Kbd';
 
@@ -880,4 +881,53 @@ describe('accessia supersets', () => {
     fireEvent.click(screen.getByRole('button', { name: 'Create' }));
     expect(onSubmit).toHaveBeenCalledWith({ welcome: true });
   });
+
+  it('FormModal honours custom button and validation labels', () => {
+    const onSubmit = vi.fn();
+    render(
+      <FormModal
+        title="FM i18n"
+        cancelLabel="Vazgeç"
+        continueLabel="Devam"
+        backLabel="Geri"
+        submitLabel="Kaydet"
+        requiredMessage="Zorunlu alan."
+        steps={[
+          {
+            title: 'Kimlik',
+            fields: [
+              { name: 'name', label: 'Ad', type: 'text', required: true },
+            ],
+          },
+          { title: 'İletişim', fields: [{ name: 'email', label: 'E-posta', type: 'email' }] },
+        ]}
+        onSubmit={onSubmit}
+        onClose={() => {}}
+      />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Devam' }));
+    expect(screen.getByText('Zorunlu alan.')).toBeTruthy();
+    fireEvent.change(screen.getByLabelText(/Ad/), { target: { value: 'Ada' } });
+    fireEvent.click(screen.getByRole('button', { name: 'Devam' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Geri' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Devam' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Kaydet' }));
+    expect(onSubmit).toHaveBeenCalledWith({ name: 'Ada', email: '' });
+  });
+
+  it('ConfirmDialog confirms and closes, cancel only closes', () => {
+    const onConfirm = vi.fn();
+    const onClose = vi.fn();
+    render(
+      <ConfirmDialog title="Delete row?" body="This cannot be undone." confirmLabel="Delete" onConfirm={onConfirm} onClose={onClose} />,
+    );
+    expect(screen.getByRole('dialog')).toBeTruthy();
+    expect(screen.getByText('This cannot be undone.')).toBeTruthy();
+    fireEvent.click(screen.getByRole('button', { name: 'Cancel' }));
+    expect(onClose).toHaveBeenCalledTimes(1);
+    expect(onConfirm).not.toHaveBeenCalled();
+    fireEvent.click(screen.getByRole('button', { name: 'Delete' }));
+    expect(onConfirm).toHaveBeenCalledTimes(1);
+    expect(onClose).toHaveBeenCalledTimes(2);
+  });
 });

package/src/presentation/organisms/ConfirmDialog.tsx

@@ -0,0 +1,42 @@
+/**
+ * ConfirmDialog Component (Organism)
+ * @description Destructive/primary confirmation built on Modal: title, body and
+ * Cancel + confirm actions; unmounts itself after confirming
+ */
+
+import type { ReactNode } from 'react';
+import { Button } from '../atoms/Button';
+import { Modal } from './Modal';
+
+export interface ConfirmDialogProps {
+  title: ReactNode;
+  body?: ReactNode;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  /** Visual weight of the confirm action; defaults to danger. */
+  tone?: 'danger' | 'primary';
+  onConfirm: () => void;
+  onClose: () => void;
+}
+
+export function ConfirmDialog({ title, body, confirmLabel = 'Confirm', cancelLabel = 'Cancel', tone = 'danger', onConfirm, onClose }: ConfirmDialogProps) {
+  return (
+    <Modal
+      open
+      danger={tone === 'danger'}
+      title={title}
+      description={body}
+      onClose={onClose}
+      footer={
+        <>
+          <Button variant="secondary" size="sm" onClick={onClose}>
+            {cancelLabel}
+          </Button>
+          <Button variant={tone === 'danger' ? 'danger' : 'default'} size="sm" onClick={() => { onConfirm(); onClose(); }}>
+            {confirmLabel}
+          </Button>
+        </>
+      }
+    />
+  );
+}

package/src/presentation/organisms/FormModal.tsx

@@ -1,10 +1,3 @@
-/**
- * FormModal Component (Organism)
- * @description Schema-driven multi-step form inside a modal (or embedded card).
- * Steps declare typed fields; the engine renders controls, validates per step
- * and submits the collected values as a flat record.
- */
-
 import { useState } from 'react';
 import type { ReactNode } from 'react';
 import { ChevronLeft } from 'lucide-react';
@@ -32,7 +25,6 @@ export interface FormModalField {
   hint?: string;
   placeholder?: string;
   options?: FormModalOption[];
-  /** Span both grid columns on wide layouts. */
   span?: boolean;
   min?: number;
   max?: number;
@@ -54,8 +46,21 @@ export interface FormModalProps {
   onClose: () => void;
   submitLabel?: string;
   wide?: boolean;
-  /** Render as an inline card instead of an overlay dialog. */
   embedded?: boolean;
+  cancelLabel?: string;
+  backLabel?: string;
+  continueLabel?: string;
+  requiredMessage?: string;
+  invalidEmailMessage?: string;
+  invalidTelMessage?: string;
+  invalidNumberMessage?: string;
+}
+
+export interface FormModalMessages {
+  required: string;
+  invalidEmail: string;
+  invalidTel: string;
+  invalidNumber: string;
 }
 
 function initialValues(steps: FormStep[]): FormModalValues {
@@ -69,15 +74,18 @@ function initialValues(steps: FormStep[]): FormModalValues {
   return v;
 }
 
-function validateField(f: FormModalField, val: string | number | boolean | undefined): string {
-  if (f.required && (val === '' || val === undefined || val === null)) return 'This field is required.';
-  if (f.type === 'email' && val && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(String(val))) return 'Enter a valid email address.';
-  if (f.type === 'tel' && val && !/[\d+()-\s]{7,}/.test(String(val))) return 'Enter a valid phone number.';
-  if (f.type === 'number' && val !== '' && isNaN(Number(val))) return 'Enter a number.';
+function validateField(f: FormModalField, val: string | number | boolean | undefined, m: FormModalMessages): string {
+  if (f.required && (val === '' || val === undefined || val === null)) return m.required;
+  if (f.type === 'email' && val && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(String(val))) return m.invalidEmail;
+  if (f.type === 'tel' && val && !/[\d+()-\s]{7,}/.test(String(val))) return m.invalidTel;
+  if (f.type === 'number' && val !== '' && isNaN(Number(val))) return m.invalidNumber;
   return '';
 }
 
-export function FormModal({ title, steps, onSubmit, onClose, submitLabel = 'Save', wide, embedded }: FormModalProps) {
+export function FormModal(
+  { title, steps, onSubmit, onClose, submitLabel = 'Save', wide, embedded, cancelLabel = 'Cancel', backLabel = 'Back', continueLabel = 'Continue', requiredMessage = 'This field is required.', invalidEmailMessage = 'Enter a valid email address.', invalidTelMessage = 'Enter a valid phone number.', invalidNumberMessage = 'Enter a number.' }: FormModalProps
+) {
+  const messages: FormModalMessages = { required: requiredMessage, invalidEmail: invalidEmailMessage, invalidTel: invalidTelMessage, invalidNumber: invalidNumberMessage };
   const [values, setValues] = useState<FormModalValues>(() => initialValues(steps));
   const [errors, setErrors] = useState<Record<string, string>>({});
   const [step, setStep] = useState(0);
@@ -93,7 +101,7 @@ export function FormModal({ title, steps, onSubmit, onClose, submitLabel = 'Save
   const validateStep = (idx: number): boolean => {
     const errs: Record<string, string> = {};
     for (const f of steps[idx]!.fields) {
-      const err = validateField(f, values[f.name]);
+      const err = validateField(f, values[f.name], messages);
       if (err) errs[f.name] = err;
     }
     setErrors(errs);
@@ -108,7 +116,7 @@ export function FormModal({ title, steps, onSubmit, onClose, submitLabel = 'Save
     }
     for (let i = 0; i < total; i++) {
       for (const f of steps[i]!.fields) {
-        const err = validateField(f, values[f.name]);
+        const err = validateField(f, values[f.name], messages);
         if (err) {
           setStep(i);
           setErrors({ [f.name]: err });
@@ -129,14 +137,14 @@ export function FormModal({ title, steps, onSubmit, onClose, submitLabel = 'Save
       )}
       {step > 0 && (
         <Button variant="secondary" size="sm" onClick={() => setStep(step - 1)}>
-          Back
+          {backLabel}
         </Button>
       )}
       <Button variant="secondary" size="sm" onClick={onClose}>
-        Cancel
+        {cancelLabel}
       </Button>
       <Button size="sm" onClick={submit}>
-        {step < total - 1 ? 'Continue' : submitLabel}
+        {step < total - 1 ? continueLabel : submitLabel}
       </Button>
     </>
   );

package/src/presentation/organisms/index.ts

@@ -137,3 +137,6 @@ export type {
   FormModalValues,
   FormStep,
 } from './FormModal';
+
+export { ConfirmDialog } from './ConfirmDialog';
+export type { ConfirmDialogProps } from './ConfirmDialog';