@tsiky/components-r19 1.3.0 → 1.3.2

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

@@ -1,468 +0,0 @@
-/* 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

@@ -1,224 +0,0 @@
-/* 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;