kelt-ui-kit-react 1.8.3 → 1.8.4

package/package/src/form/Form.tsx

@@ -1,279 +0,0 @@
-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

@@ -1,59 +0,0 @@
-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

@@ -1,62 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

@@ -1,106 +0,0 @@
-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

@@ -1,26 +0,0 @@
-.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;
-  }
-}