@tsiky/components-r19 1.0.0

package/src/components/DynamicForm/DynamicForm.module.css

@@ -0,0 +1,468 @@
+/* DynamicForm.module.css - corrected for overlap & textarea sizing */
+
+/* ===== Variables (facile à ajuster) ===== */
+/* :root {
+  --bg: #ffffff;
+  --card-border: rgba(15, 23, 42, 0.04);
+  --muted: #6b7280;
+  --text: #111827;
+  --primary-600: #6b21a8;
+  --primary-700: #5b21a6;
+  --focus-ring: rgba(107, 33, 168, 0.08);
+  --error: #dc3545;
+  --success: #198754;
+  --radius: 10px;
+  --gap: 16px;
+  --field-height: 44px;
+  --font-stack: Inter, 'Helvetica Neue', Arial, sans-serif;
+} */
+
+/* Global box-sizing for the form to avoid width calculation issues */
+.formContainer,
+.formContainer * {
+  box-sizing: border-box;
+}
+
+/* ===== Form container & header ===== */
+.formContainer {
+  background: var(--bg);
+  border-radius: var(--radius);
+  padding: 28px;
+  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.06);
+  border: 1px solid var(--card-border);
+  color: var(--text);
+  line-height: 1.35;
+  width: 100%;
+  overflow: visible;
+}
+
+/* header */
+.headerLine {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+/* ... (conserve tes autres styles d'en-tête) ... */
+.formTitle {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--text);
+  margin: 0;
+}
+.formDescription {
+  margin: 8px 0 18px 0;
+  color: var(--muted);
+  font-size: 13px;
+}
+
+/* ===== Sections & helper text ===== */
+.sectionTitle {
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--text);
+  margin: 20px 0 8px 0;
+}
+.sectionHelp {
+  margin: 0 0 12px 0;
+  color: var(--muted);
+  font-size: 13px;
+}
+.fieldHelp {
+  display: block;
+  margin-top: 6px;
+  color: var(--muted);
+  font-size: 12px;
+}
+
+/* ===== Grid (container) ===== */
+.gridContainer {
+  display: grid;
+  gap: var(--gap);
+  align-items: start;
+  margin-bottom: 12px;
+  /* gridTemplateColumns set inline from React; recommend using minmax(0,1fr) there */
+  grid-auto-flow: row;
+  /* critical: allow cells to shrink (avoid overflow) */
+  min-width: 0;
+}
+
+/* each grid cell must be able to shrink */
+.gridContainer > .fieldGridItem {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 0; /* prevents children from forcing cell wider than available */
+}
+
+/* Ensure any element inside a grid cell can shrink */
+.gridContainer > .fieldGridItem * {
+  min-width: 0;
+}
+
+/* Optional: equalize sibling fields when you can add wrapper .equalize-group */
+.equalize-group {
+  display: flex;
+  gap: var(--gap);
+  align-items: stretch;
+  width: 100%;
+}
+.equalize-group > .fieldGridItem {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+/* Field item */
+.fieldGridItem {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+}
+
+/* Section full width */
+.sectionFull {
+  grid-column: 1 / -1;
+}
+
+/* ===== Form footer ===== */
+.formFooter {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-top: 20px;
+}
+.footerLeft,
+.footerRight {
+  display: flex;
+  align-items: center;
+}
+
+/* cancel link / submit button keep same styles as before */
+.cancelLink {
+  background: none;
+  border: none;
+  color: #374151;
+  font-size: 14px;
+  cursor: pointer;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+}
+.submitButton {
+  background: linear-gradient(180deg, var(--primary-600) 0%, var(--primary-700) 100%);
+  border: none;
+  color: #fff !important;
+  padding: 10px 20px;
+  border-radius: 10px;
+  box-shadow: 0 6px 12px rgba(107, 33, 168, 0.12);
+  font-weight: 700;
+  letter-spacing: 0.4px;
+}
+
+/* ===== Labels ===== */
+.fieldLabel {
+  font-weight: 600;
+  color: var(--text);
+  margin-bottom: 8px;
+  display: block;
+  font-size: 14px;
+}
+.fieldLabel.required::after {
+  content: ' *';
+  color: var(--error);
+  font-weight: 700;
+  margin-left: 2px;
+}
+
+/* ===== Input general layout ===== */
+.inputWrapper {
+  display: block;
+  width: 100%;
+  min-width: 0;
+}
+.controlRow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.controlRow .fieldLabel {
+  width: 160px;
+  margin-bottom: 0;
+  text-align: right;
+}
+.controlRow .inputWrapper {
+  flex: 1;
+  width: auto;
+}
+
+/* ===== Input inner: icon + input positioning ===== */
+.inputInner {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+}
+
+/* ensure padding for prefix/suffix */
+.inputInner.hasPrefix .inputBase {
+  padding-left: 40px;
+}
+.inputInner.hasSuffix .inputBase {
+  padding-right: 40px;
+}
+
+/* ===== Input base (text/select/textarea/file) ===== */
+.inputBase,
+.selectBase,
+.textareaBase {
+  width: 100%;
+  max-width: 100%;
+  min-height: var(--field-height);
+  padding: 10px 12px;
+  border: 1px solid #e6e6e9;
+  border-radius: 10px;
+  font-size: 14px;
+  transition:
+    border-color 160ms ease,
+    box-shadow 160ms ease,
+    transform 120ms ease;
+  background: #fff;
+  color: var(--text);
+  -webkit-appearance: none;
+  min-width: 0; /* critical */
+  box-sizing: border-box;
+}
+
+/* placeholder color */
+.inputBase::placeholder,
+.textareaBase::placeholder {
+  color: #9ca3af;
+}
+
+/* focus / hover states */
+.inputBase:focus,
+.selectBase:focus,
+.textareaBase:focus {
+  outline: none;
+  border-color: var(--primary-600);
+  box-shadow: 0 6px 18px var(--focus-ring);
+  transform: translateY(-1px);
+}
+.inputBase:hover,
+.selectBase:hover,
+.textareaBase:hover {
+  border-color: #dcdce0;
+}
+
+/* textarea specifics - prevent it overflowing its grid cell */
+.textareaBase {
+  min-height: 120px;
+  resize: vertical;
+  padding-top: 12px;
+  padding-bottom: 12px;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  overflow: auto;
+  box-sizing: border-box;
+}
+
+/* select specifics */
+.selectBase {
+  min-height: var(--field-height);
+  padding-right: 36px;
+}
+
+/* file input */
+.fileWrap {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.fileButton {
+  padding: 8px 12px;
+  border-radius: 8px;
+  background: #f3f4f6;
+  border: 1px solid #e6e6e9;
+  cursor: pointer;
+  font-size: 14px;
+}
+.fileName {
+  color: var(--muted);
+  font-size: 13px;
+}
+
+/* disabled state */
+.inputBase:disabled,
+.selectBase:disabled,
+.textareaBase:disabled {
+  background: #f8f9fb;
+  color: #6b7280;
+  cursor: not-allowed;
+  opacity: 0.95;
+}
+
+/* ===== Icons (prefix/suffix & password toggle) ===== */
+.iconPrefix,
+.iconSuffix {
+  position: absolute;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--muted);
+  padding: 6px;
+  border-radius: 6px;
+  transition:
+    background 120ms ease,
+    color 120ms ease;
+}
+.iconPrefix {
+  left: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.iconSuffix {
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+/* password toggle */
+.passwordToggle {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  color: var(--muted);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* ensure padding if suffix icon present */
+.inputInner .iconSuffix ~ .inputBase,
+.inputInner .passwordToggle ~ .inputBase {
+  padding-right: 44px;
+}
+
+/* ===== Choice controls ===== */
+.choiceGroup {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  flex-wrap: wrap;
+  margin-top: 6px;
+}
+.choiceItem {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  color: var(--text);
+}
+.choiceItem input {
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  accent-color: var(--primary-600);
+}
+
+/* ===== Error / valid states ===== */
+.fieldError {
+  color: var(--error);
+  font-size: 13px;
+  margin-top: 8px;
+  display: block;
+}
+.fieldInvalid .inputBase,
+.fieldInvalid .selectBase,
+.fieldInvalid .textareaBase,
+.inputBase.fieldInvalid,
+.selectBase.fieldInvalid {
+  border-color: var(--error) !important;
+  box-shadow: 0 6px 18px rgba(220, 53, 69, 0.06);
+}
+.fieldValid .inputBase,
+.fieldValid .selectBase {
+  border-color: var(--success) !important;
+  box-shadow: 0 6px 18px rgba(25, 135, 84, 0.04);
+}
+
+/* subtle label hint */
+.optionalHint {
+  font-weight: 400;
+  color: #9ca3af;
+  font-size: 12px;
+  margin-left: 6px;
+}
+
+/* ===== Non-grid fallback (bootstrap .row override) =====
+   We keep columns flexible but ensure min-width:0 to avoid overflow & overlap.
+*/
+.formContainer > .row {
+  display: flex;
+  gap: var(--gap);
+  flex-wrap: wrap;
+  align-items: flex-start;
+  margin-bottom: 12px;
+  min-width: 0;
+}
+.formContainer > .row > [class*='col-'] {
+  flex: 1 1 0;
+  max-width: none !important;
+  min-width: 0; /* critical to allow shrinking */
+  box-sizing: border-box;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+.formContainer > .row > [class*='col-'] .inputWrapper {
+  width: 100%;
+  min-width: 0;
+}
+
+/* keep ability to allow static width columns if you want */
+.formContainer > .row > .allow-static {
+  flex: 0 0 auto;
+  max-width: none;
+}
+
+/* ===== small screens: responsive stacking ===== */
+@media (max-width: 768px) {
+  .formContainer {
+    padding: 18px;
+  }
+  .gridContainer {
+    grid-template-columns: 1fr !important;
+  }
+  .formContainer > .row {
+    display: block;
+  }
+  .formContainer > .row > [class*='col-'] {
+    width: 100%;
+    max-width: 100% !important;
+    padding-left: 0;
+    padding-right: 0;
+    margin-bottom: 12px;
+  }
+  .controlRow .fieldLabel {
+    width: auto;
+    text-align: left;
+    margin-bottom: 6px;
+  }
+  .formFooter {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 10px;
+  }
+  .footerRight {
+    justify-content: flex-end;
+  }
+}

package/src/components/DynamicForm/DynamicForm.tsx

@@ -0,0 +1,224 @@
+/* DynamicForm.tsx */
+import React, { useState, useEffect, useRef } from 'react';
+import type { FormSchema, FieldMetadata } from './tools/form-metadata';
+import { validateField, validateForm } from './tools/validation';
+import { DynamicInput } from '../DynamicInput/DynamicInput';
+import isEqual from 'lodash/isEqual';
+import Button from '../Button/Button';
+import styles from './DynamicForm.module.css';
+import * as Icons from 'lucide-react';
+
+export interface DynamicFormProps {
+  schema: FormSchema;
+  initialData?: Record<string, unknown>;
+  onSubmit: (data: Record<string, unknown>) => Promise<unknown> | void;
+  submitLabel?: string;
+  submitIcon?: string; // nom de l'icône lucide-react (ex: "Check", "Send", "Save")
+  submitIconPosition?: 'left' | 'right';
+  onCancel?: () => void;
+  cancelLabel?: string;
+  cancelIcon?: string;
+}
+
+export const DynamicForm: React.FC<DynamicFormProps> = ({
+  schema,
+  initialData = {},
+  onSubmit,
+  submitLabel,
+  submitIcon,
+  submitIconPosition = 'left',
+  onCancel,
+  cancelLabel = 'Retour',
+  cancelIcon,
+}) => {
+  const [formData, setFormData] = useState<Record<string, unknown>>(initialData);
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [touched, setTouched] = useState<Record<string, boolean>>({});
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const initialDataRef = useRef(initialData);
+
+  useEffect(() => {
+    if (!isEqual(initialDataRef.current, initialData)) {
+      setFormData(initialData);
+      initialDataRef.current = initialData;
+    }
+  }, [initialData]);
+
+  const handleFieldChange = (fieldName: string, value: unknown) => {
+    const newData = { ...formData, [fieldName]: value };
+    setFormData(newData);
+
+    if (touched[fieldName]) {
+      const field = schema.fields.find((f) => f.name === fieldName);
+      if (field) {
+        const validationResult = validateField(value, field);
+        setErrors((prev) => ({
+          ...prev,
+          [fieldName]: validationResult.isValid ? '' : validationResult.error!,
+        }));
+      }
+    }
+  };
+
+  const handleFieldBlur = (fieldName: string) => {
+    if (!touched[fieldName]) {
+      setTouched((prev) => ({ ...prev, [fieldName]: true }));
+
+      const field = schema.fields.find((f) => f.name === fieldName);
+      if (field) {
+        const validationResult = validateField(formData[fieldName], field);
+        setErrors((prev) => ({
+          ...prev,
+          [fieldName]: validationResult.isValid ? '' : validationResult.error!,
+        }));
+      }
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsSubmitting(true);
+
+    const newTouched = schema.fields.reduce(
+      (acc, field) => {
+        if (field.type !== 'section') acc[field.name] = true;
+        return acc;
+      },
+      {} as Record<string, boolean>
+    );
+
+    setTouched(newTouched);
+
+    const validation = validateForm(
+      formData,
+      schema.fields.filter((f) => f.type !== 'section')
+    );
+    setErrors(validation.errors);
+
+    if (validation.isValid) {
+      try {
+        await onSubmit(formData);
+      } catch (error) {
+        console.error('Erreur lors de la soumission:', error);
+        setErrors((prev) => ({
+          ...prev,
+          __global: 'Une erreur est survenue lors de la soumission',
+        }));
+      }
+    }
+
+    setIsSubmitting(false);
+  };
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const CancelIconComp = cancelIcon ? (Icons as any)[cancelIcon] : null;
+
+  // Submit icon resolution (prop > schema > none)
+
+  const SubmitIconComp =
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (submitIcon && (Icons as any)[submitIcon]) ||
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (schema.submitIcon && (Icons as any)[schema.submitIcon]) ||
+    null;
+
+  // layout config
+  const columns = schema.columns && schema.columns > 0 ? Math.floor(schema.columns) : 12;
+
+  return (
+    <div className={styles.formContainer}>
+      <div className={styles.headerLine}>
+        <h2 className={styles.formTitle}>{schema.title}</h2>
+      </div>
+
+      {schema.description && <p className={styles.formDescription}>{schema.description}</p>}
+
+      {errors.__global && (
+        <div className={`alert alert-danger ${styles.globalError}`}>{errors.__global}</div>
+      )}
+
+      <form onSubmit={handleSubmit}>
+        {/* Unified grid: utilisé pour layout:grid et pour le fallback "classic" */}
+        <div
+          className={styles.gridContainer}
+          // important: use minmax(0,1fr) to allow shrinking and avoid overflow
+          style={{ gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }}
+        >
+          {schema.fields.map((field: FieldMetadata) => {
+            if (field.type === 'section') {
+              return (
+                <div key={field.name} className={styles.sectionFull}>
+                  <h5 className={styles.sectionTitle}>{field.label}</h5>
+                  {field.help && <p className={styles.sectionHelp}>{field.help}</p>}
+                </div>
+              );
+            }
+
+            // clamp gridCol pour éviter span > columns
+            const span = Math.max(1, Math.min(columns, field.gridCol ?? columns));
+            const gridStyle: React.CSSProperties = { gridColumn: `span ${span}` };
+
+            return (
+              <div key={field.name} className={styles.fieldGridItem} style={gridStyle}>
+                <DynamicInput
+                  field={field}
+                  value={formData[field.name]}
+                  onChange={(value) => handleFieldChange(field.name, value)}
+                  onBlur={() => handleFieldBlur(field.name)}
+                  error={errors[field.name]}
+                  touched={touched[field.name]}
+                />
+                {field.help && <small className={styles.fieldHelp}>{field.help}</small>}
+              </div>
+            );
+          })}
+        </div>
+
+        <div className={styles.formFooter}>
+          <div className={styles.footerLeft}>
+            {onCancel && (
+              <button type='button' className={styles.cancelLink} onClick={onCancel}>
+                {CancelIconComp && <CancelIconComp size={16} className='me-2' />} {cancelLabel}
+              </button>
+            )}
+          </div>
+
+          <div className={styles.footerRight}>
+            <Button
+              type='submit'
+              variant='primary'
+              size='md'
+              className={styles.submitButton}
+              disabled={isSubmitting}
+            >
+              {isSubmitting ? (
+                <>
+                  <span className='spinner-border spinner-border-sm me-2' role='status' />
+                  Validation...
+                </>
+              ) : (
+                <>
+                  {/* icon left */}
+                  {SubmitIconComp &&
+                    (submitIconPosition === 'left' || schema.submitIconPosition === 'left') && (
+                      <SubmitIconComp size={16} className='me-2' />
+                    )}
+
+                  {submitLabel || schema.submitText || 'Valider'}
+
+                  {/* icon right */}
+                  {SubmitIconComp &&
+                    (submitIconPosition === 'right' || schema.submitIconPosition === 'right') && (
+                      <SubmitIconComp size={16} className='ms-2' />
+                    )}
+                </>
+              )}
+            </Button>
+          </div>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default DynamicForm;

package/src/components/DynamicForm/index.ts

@@ -0,0 +1,3 @@
+export * from './DynamicForm';
+export * from './tools/validation';
+export * from './tools/form-metadata';