@umituz/web-design-system 4.7.2 → 4.7.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/web-design-system",
-  "version": "4.7.2",
+  "version": "4.7.4",
   "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

@@ -882,6 +882,39 @@ describe('accessia supersets', () => {
     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();

package/src/presentation/organisms/Card.tsx

@@ -37,17 +37,21 @@ Card.displayName = 'Card';
 export interface CardHeaderProps extends Omit<CardProps, 'title'> {
   title?: React.ReactNode;
   subtitle?: React.ReactNode;
+  eyebrow?: React.ReactNode;
+  icon?: React.ReactNode;
   actions?: React.ReactNode;
+  bordered?: boolean;
 }
 
 export const CardHeader = React.memo(forwardRef<HTMLDivElement, CardHeaderProps>(
-  ({ className, title, subtitle, actions, children, ...props }, ref) => {
-    const hasStructuralProps = title !== undefined || subtitle !== undefined || actions !== undefined;
+  ({ className, title, subtitle, eyebrow, icon, actions, bordered = false, children, ...props }, ref) => {
+    const hasStructuralProps =
+      title !== undefined || subtitle !== undefined || actions !== undefined || eyebrow !== undefined || icon !== undefined;
     if (!hasStructuralProps) {
       return (
         <div
           ref={ref}
-          className={cn('flex flex-col space-y-1.5 p-6', className)}
+          className={cn('flex flex-col space-y-1.5 p-6', bordered && 'border-b border-border', className)}
           {...props}
         >
           {children}
@@ -57,11 +61,19 @@ export const CardHeader = React.memo(forwardRef<HTMLDivElement, CardHeaderProps>
     return (
       <div
         ref={ref}
-        className={cn('flex items-start justify-between gap-4 p-6', className)}
+        className={cn('flex items-start justify-between gap-4 p-6', bordered && 'border-b border-border', className)}
         {...props}
       >
-        <div className="flex flex-col space-y-1.5">
-          {title !== undefined && <CardTitle>{title}</CardTitle>}
+        <div className="flex min-w-0 flex-col space-y-1.5">
+          {eyebrow !== undefined && (
+            <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">{eyebrow}</p>
+          )}
+          {title !== undefined && (
+            <div className="flex items-center gap-2">
+              {icon}
+              <CardTitle>{title}</CardTitle>
+            </div>
+          )}
           {subtitle !== undefined && <CardDescription>{subtitle}</CardDescription>}
           {children}
         </div>

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

@@ -5,7 +5,7 @@
  */
 
 export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './Card';
-export type { CardProps } from './Card';
+export type { CardProps, CardHeaderProps } from './Card';
 
 export { Alert, AlertTitle, AlertDescription } from './Alert';
 export type { AlertProps } from './Alert';