kelt-ui-kit-react 1.8.2 → 1.8.3

package/package/src/form/Form.tsx

@@ -0,0 +1,279 @@
+import React, {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react";
+import { Button } from "../button/Button";
+import { Icon } from "../icon/Icon";
+import { Select } from "../select/Select"; // <--- ton composant
+import "./form.css";
+import { FormInterface, FormValuesInterface } from "./form.interface";
+import { Input } from "./input/Input";
+import { TextArea } from "./textArea/TextArea";
+
+export type FormProps<
+  T extends { [key: string]: string | number | boolean | Date | string[] }
+> = {
+  id?: string;
+  className?: string;
+  title?: string;
+  hideSubmit?: boolean;
+  autoComplete?: string;
+  children?: React.ReactNode;
+  initialForm: FormInterface[];
+  disabledSubmit?: boolean;
+  onSubmit?: (values: FormValuesInterface<T>) => void;
+  onChange?: (values: FormValuesInterface<T>) => void;
+};
+
+export const DynamicForm = forwardRef(
+  <T extends { [key: string]: string | number | boolean | Date | string[] }>(
+    {
+      initialForm,
+      title,
+      onSubmit,
+      id,
+      children,
+      autoComplete,
+      onChange,
+      hideSubmit,
+      disabledSubmit = false,
+      className,
+    }: FormProps<T>,
+    ref: React.Ref<{
+      clearInput?: (name: string) => void;
+      resetForm?: () => void;
+      focusInitialElement?: () => void;
+      getValues?: () => FormValuesInterface<T>;
+      updateFormValue?: (values: FormValuesInterface<T>) => void;
+      setBtnDisabledSubmit?: (disabled: boolean) => void;
+    }>
+  ) => {
+    const [btnDisabledSubmit, setBtnDisabledSubmit] = useState(disabledSubmit);
+    const [values, setValues] = useState<FormValuesInterface<T>>(() => {
+      const initialValues: FormValuesInterface<T> =
+        {} as FormValuesInterface<T>;
+      initialForm.forEach((field) => {
+        (initialValues as any)[field.name] = field.value ?? "";
+      });
+      return initialValues;
+    });
+
+    const inputRefs = useRef<{ [key: string]: HTMLInputElement | null }>({});
+
+    /** Gestion des <input> */
+    const handleChangeInput = useCallback(
+      (
+        event: React.ChangeEvent<HTMLInputElement>,
+        forminterface: FormInterface
+      ) => {
+        const { name, type, checked, value } = event.target;
+        const newValue = type === "checkbox" ? checked : value;
+
+        if (forminterface.onChange) {
+          forminterface.onChange(newValue, name);
+        }
+
+        setValues((prevValues) => {
+          const updatedValues = { ...prevValues, [name]: newValue };
+          if (onChange) {
+            onChange(updatedValues);
+          }
+          return updatedValues;
+        });
+      },
+      [onChange]
+    );
+    const handleChangeTextArea = useCallback(
+      (name: string, value: string, forminterface: FormInterface) => {
+        if (forminterface.onChange) {
+          forminterface.onChange(value, name);
+        }
+
+        setValues((prevValues) => {
+          const updatedValues = { ...prevValues, [name]: value };
+          if (onChange) {
+            onChange(updatedValues);
+          }
+          return updatedValues;
+        });
+      },
+      [onChange]
+    );
+    /** Gestion des <select> */
+    const handleChangeSelect = useCallback(
+      (
+        newValue: string | string[],
+        name: string,
+        forminterface: FormInterface
+      ) => {
+        if (forminterface.onChange) {
+          forminterface.onChange(newValue, name);
+        }
+
+        setValues((prevValues) => {
+          const updatedValues = { ...prevValues, [name]: newValue };
+          if (onChange) onChange(updatedValues);
+          return updatedValues;
+        });
+      },
+      [onChange]
+    );
+
+    const handleSubmit = useCallback(
+      (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        if (onSubmit) {
+          onSubmit(values);
+        }
+      },
+      [onSubmit, values]
+    );
+
+    const resetForm = () => {
+      setValues(() => {
+        const resetValues: FormValuesInterface<T> =
+          {} as FormValuesInterface<T>;
+        initialForm.forEach((field) => {
+          (resetValues as any)[field.name] = field.value ?? "";
+        });
+        return resetValues;
+      });
+    };
+
+    const clearInput = useCallback((name: string) => {
+      setValues((prevValues) => ({
+        ...prevValues,
+        [name]: "",
+      }));
+    }, []);
+
+    const focusInitialElement = () => {
+      const focusedField = initialForm.find((field) => field.focus);
+      if (focusedField && inputRefs.current[focusedField.name]) {
+        setTimeout(() => {
+          inputRefs.current[focusedField.name]?.select();
+        }, 500);
+      }
+    };
+
+    const getValues = () => values;
+
+    const updateFormValue: (values: FormValuesInterface<T>) => void = (
+      values
+    ) => {
+      setValues((prevValues) => ({
+        ...prevValues,
+        ...values,
+      }));
+    };
+
+    useImperativeHandle(ref, () => ({
+      resetForm,
+      clearInput,
+      focusInitialElement,
+      getValues,
+      updateFormValue,
+      setBtnDisabledSubmit,
+    }));
+
+    return (
+      <form
+        autoComplete={autoComplete ?? "off"}
+        onSubmit={handleSubmit}
+        className={className ?? ""}
+      >
+        <div className="form-content">
+          {initialForm.map((v, key) => {
+            const required = v.onRequired
+              ? v.onRequired(v.value)
+              : v.required ?? false;
+            const disabled = v.onDisabled
+              ? v.onDisabled(v.value)
+              : v.disabled ?? false;
+
+            return (
+              <div
+                key={key}
+                className={`d-flex flex-column ${
+                  v.className ?? ""
+                } form-group form-group-${v.type}`}
+              >
+                {v.label && <label>{v.label}</label>}
+                {v.icon && <Icon classIcon={v.icon} />}
+
+                {v.type === "select" ? (
+                  <Select
+                    id={v.id ?? v.name}
+                    label={undefined}
+                    name={v.name}
+                    options={v.options ?? []}
+                    disabled={disabled}
+                    multiple={v.multiple}
+                    value={values[v.name] as any}
+                    required={required}
+                    defaultValue={v.value as string | string[]}
+                    placeholder={v.placeholder}
+                    onChangeMultiple={(newValue) =>
+                      handleChangeSelect(newValue, v.name, v)
+                    }
+                    onChange={(newValue) =>
+                      handleChangeSelect(newValue, v.name, v)
+                    }
+                  />
+                ) : v.type === "textarea" ? (
+                  <TextArea
+                    id={v.id ?? v.name}
+                    name={v.name}
+                    className="textarea-input"
+                    placeholder={v.placeholder ?? ""}
+                    disabled={disabled}
+                    required={required}
+                    value={values[v.name] as string}
+                    onChange={(value, name) =>
+                      handleChangeTextArea(name, value, v)
+                    }
+                  />
+                ) : (
+                  <Input
+                    id={v.id ?? v.name}
+                    ref={(el) => (inputRefs.current[v.name] = el)}
+                    name={v.name}
+                    type={v.type}
+                    placeholder={v.placeholder ?? ""}
+                    autoComplete={v.autoComplete}
+                    tabIndex={0}
+                    disabled={disabled}
+                    autoFocus={v.focus ?? false}
+                    required={required}
+                    step={v.step ?? "0.01"}
+                    value={values[v.name] as string | number}
+                    checked={
+                      v.type === "checkbox" ? !!values[v.name] : undefined
+                    }
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                      handleChangeInput(e, v)
+                    }
+                    onInvalid={v.onInvalid ? v.onInvalid : undefined}
+                  />
+                )}
+              </div>
+            );
+          })}
+          {children}
+        </div>
+        <div className="d-flex justify-content-end form-footer">
+          {!hideSubmit && (
+            <Button
+              id={`button-${id}`}
+              disabled={btnDisabledSubmit}
+              title={title || "submit"}
+            />
+          )}
+        </div>
+      </form>
+    );
+  }
+);

package/package/src/form/Form.view.tsx

@@ -0,0 +1,59 @@
+import { DynamicForm } from "./Form";
+import { TypeInputEnum } from "./form.enum";
+
+import { FormInterface, FormValuesInterface } from "./form.interface";
+interface FormData {
+  nom: string;
+  age: number;
+  validate: boolean;
+  password: string;
+  [key: string]: string | number | boolean | Date | string[]; // Signature d'index ajoutée
+}
+export const FormView = (): JSX.Element => {
+  const initialValues: FormInterface[] = [
+    {
+      value: "Alexandre",
+      label: "Nom",
+      focus: true,
+      name: "nom",
+      type: TypeInputEnum.PASSWORD,
+      required: true,
+    },
+    {
+      value: 30,
+      label: "Age",
+      name: "age",
+      type: TypeInputEnum.NUMBER,
+    },
+    {
+      value: false,
+      name: "validate",
+      label: "Validate",
+      type: TypeInputEnum.CHECKBOX,
+    },
+    {
+      value: "password",
+      name: "password",
+      label: "Password",
+      type: TypeInputEnum.PASSWORD,
+    },
+    {
+      value: "",
+      name: "selectOption",
+      label: "Select Option",
+      placeholder: "Choose an option",
+      type: TypeInputEnum.SELECT,
+      options: [
+        { value: "option1", label: "Option 1" },
+        { value: "option2", label: "Option 2" },
+        { value: "option3", label: "Option 3" },
+      ],
+    },
+  ];
+
+  // Fonction qui sera appelée lors de la soumission du formulaire
+  const handleSubmit = (values: FormValuesInterface<FormData>) => {
+    console.log("Form Submitted: ", values);
+  };
+  return <DynamicForm onSubmit={handleSubmit} initialForm={initialValues} />;
+};

package/package/src/form/form.css

@@ -0,0 +1,62 @@
+input {
+  border: 1px solid #b2a1a1;
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  margin: 0.25rem 0 0.25rem 0;
+  min-width: 250px;
+  &:focus-visible {
+    outline: 1px solid #9696a7;
+  }
+}
+input[type="checkbox"],
+input[type="radio"] {
+  min-width: auto;
+  padding: 0;
+  margin: 0;
+  height: 18px;
+  width: 18px;
+}
+form {
+  &.form-row {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    .form-group {
+      margin-right: 1rem;
+      flex: 1;
+      padding: 0;
+      .input-container {
+        min-width: auto;
+        input {
+          min-width: auto;
+        }
+      }
+    }
+  }
+  label {
+    font-weight: 600;
+    font-size: 0.85rem;
+    padding-bottom: 0.15rem;
+  }
+  .form-group-checkbox {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-top: 0.5rem;
+    label {
+      margin-right: 1rem;
+      padding: 0;
+    }
+    input {
+      min-width: auto;
+      padding: 0;
+      margin: 0;
+      height: 18px;
+      width: 18px;
+    }
+  }
+  button {
+    margin-top: 1rem;
+  }
+}

package/package/src/form/form.enum.ts

@@ -0,0 +1,13 @@
+export enum TypeInputEnum {
+  TEXT = "text",
+  BUTTON = "button",
+  EMAIL = "email",
+  HIDDEN = "hidden",
+  PASSWORD = "password",
+  NUMBER = "number",
+  CHECKBOX = "checkbox",
+  RADIO = "radio",
+  DATE = "date",
+  SELECT = "select",
+  TEXTAREA = "textarea",
+}

package/package/src/form/form.interface.tsx

@@ -0,0 +1,37 @@
+import { TypeInputEnum } from "./form.enum";
+
+export type FormValuesInterface<
+  T extends { [key: string]: string | number | boolean | Date | string[] }
+> = Partial<{
+  [K in keyof T]: T[K];
+}>;
+export interface FormCondition {
+  errorMessage: string;
+  regex: string;
+}
+
+export interface FormInterface {
+  value: string | number | boolean | Date;
+  id?: string;
+  label?: string;
+  focus?: boolean;
+  type: TypeInputEnum;
+  placeholder?: string;
+  name: string;
+  disabled?: boolean;
+  required?: boolean;
+  condition?: FormCondition;
+  icon?: string;
+  multiple?: boolean;
+  options?: { value: string; label: string }[]; // <--- pour les <option>
+  className?: string;
+  autoComplete?: string;
+  step?: string;
+  onChange?: (
+    value: string | number | boolean | Date | string[],
+    name?: string
+  ) => void;
+  onRequired?: (value: string | number | boolean | Date) => boolean;
+  onDisabled?: (value: string | number | boolean | Date) => boolean;
+  onInvalid?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}

package/package/src/form/input/Input.tsx

@@ -0,0 +1,106 @@
+import { forwardRef, useState } from "react";
+import { Icon } from "../../icon/Icon";
+import { TypeInputEnum } from "../form.enum";
+import "./input.css";
+
+export interface InputProps {
+  id: string; // obligatoire pour le label for
+  name: string;
+  type?: TypeInputEnum;
+  onInvalid?: (e: React.FocusEvent<HTMLInputElement>) => void;
+  value?: string | number;
+  placeholder?: string;
+  className?: string;
+  inputMode?: "text" | "numeric" | "decimal" | "email" | "tel" | "search";
+  disabled?: boolean;
+  autoFocus?: boolean;
+  required?: boolean;
+  minLength?: number;
+  maxLength?: number;
+  autoComplete?: string;
+  step?: string;
+  tabIndex?: number;
+  checked?: boolean;
+  handleKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+  onClick?: (e: React.MouseEvent<HTMLInputElement>) => void;
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      id,
+      name,
+      type = TypeInputEnum.TEXT,
+      value,
+      onInvalid,
+      placeholder,
+      className,
+      inputMode,
+      minLength,
+      maxLength,
+      autoFocus = false,
+      disabled = false,
+      required = false,
+      autoComplete,
+      tabIndex = 0,
+      step,
+      checked,
+      onChange,
+      onBlur,
+      onClick,
+      handleKeyDown,
+    },
+    ref
+  ) => {
+    // Si le type est password, on utilise l'input de type password
+    const [showPassword, setShowPassword] = useState(false);
+
+    return (
+      <div className={`input-container ${`input-container-${type}`} `}>
+        <input name={`hide-${name}`} type="text" style={{ display: "none" }} />
+
+        <input
+          ref={ref} // 👈 le vrai ref est bien transmis au HTMLInputElement
+          id={id}
+          name={name}
+          inputMode={inputMode ?? (type === "number" ? "numeric" : "text")}
+          type={showPassword ? TypeInputEnum.TEXT : type}
+          spellCheck="false"
+          value={value}
+          placeholder={placeholder}
+          disabled={disabled}
+          required={required}
+          autoComplete={autoComplete ?? "new-password"}
+          step={step}
+          tabIndex={tabIndex}
+          autoFocus={autoFocus}
+          minLength={minLength}
+          maxLength={maxLength}
+          onChange={onChange}
+          checked={checked}
+          onKeyDown={handleKeyDown}
+          onBlur={onBlur}
+          onClick={(e) => {
+            e.stopPropagation();
+            onClick && onClick(e);
+          }}
+          className={`input-field ${className ?? ""}`}
+          onInvalid={onInvalid}
+        />
+
+        {type === TypeInputEnum.PASSWORD && (
+          <div
+            onClick={() => setShowPassword(!showPassword)}
+            className="input-password-icon"
+          >
+            <Icon classIcon={showPassword ? "bi-eye-slash" : "bi-eye"} />
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+Input.displayName = "Input";

package/package/src/form/input/input.css

@@ -0,0 +1,26 @@
+.input-container {
+  position: relative;
+  min-width: 250px;
+  width: 100%;
+  &.input-container-radio,
+  &.input-container-checkbox {
+    min-width: 10px;
+    width: 10px;
+    input {
+      width: 10px;
+      min-width: 10px;
+    }
+  }
+  .input-password-icon {
+    position: absolute;
+    right: 10px;
+    height: 100%;
+    top: 0;
+    display: flex;
+    align-items: center;
+  }
+  input {
+    width: 100%;
+    font-size: 0.8rem;
+  }
+}