kelt-ui-kit-react 1.2.0 → 1.2.1

package/src/form/Form.tsx

@@ -1,175 +1,175 @@
-import React, {
-  forwardRef,
-  useCallback,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from "react";
-import { Button } from "../button/Button";
-import { Icon } from "../icon/Icon";
-import "./form.css";
-import { FormInterface, FormValuesInterface } from "./form.interface";
-
-export type FormProps<
-  T extends { [key: string]: string | number | boolean | Date }
-> = {
-  className?: string;
-  title?: string;
-  hideSubmit?: boolean;
-  initialForm: FormInterface[];
-  onSubmit?: (values: FormValuesInterface<T>) => void;
-  onChange?: (values: FormValuesInterface<T>) => void;
-};
-
-export const DynamicForm = forwardRef(
-  <T extends { [key: string]: string | number | boolean | Date }>(
-    {
-      initialForm,
-      title,
-      onSubmit,
-      onChange,
-      hideSubmit,
-      className,
-    }: FormProps<T>,
-    ref: React.Ref<{
-      clearInput?: (name: string) => void;
-      resetForm?: () => void;
-      focusInitialElement?: () => void;
-      getValues?: () => FormValuesInterface<T>;
-      updateFormValue?: (values: FormValuesInterface<T>) => void;
-    }>
-  ) => {
-    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;
-    });
-
-    // Stocker les références des inputs
-    const inputRefs = useRef<{ [key: string]: HTMLInputElement | null }>({});
-
-    const handleChange = useCallback(
-      (
-        event: React.ChangeEvent<HTMLInputElement>,
-        forminterface: FormInterface
-      ) => {
-        const { name, value, type, checked } = event.target;
-        if (forminterface.onChange) {
-          forminterface.onChange(value, name);
-        }
-        setValues((prevValues) => {
-          const currentValues = prevValues || {};
-          const updatedValues = {
-            ...currentValues,
-            [name]: type === "checkbox" ? checked : value,
-          };
-          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]: "",
-      }));
-    }, []);
-
-    // Fonction pour donner le focus à l'élément qui devait initialement l'avoir
-    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,
-    }));
-
-    return (
-      <form onSubmit={handleSubmit} className={className ?? ""}>
-        {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-${v.type}`}
-            >
-              {v.label && <label>{v.label}</label>}
-              {v.icon && <Icon classIcon={v.icon} />}
-
-              <input
-                ref={(el) => (inputRefs.current[v.name] = el)}
-                name={v.name}
-                type={v.type}
-                placeholder={v.placeholder ?? ""}
-                autoComplete={v.autoComplete ?? "on"}
-                tabIndex={0}
-                disabled={disabled}
-                autoFocus={v.focus ?? false}
-                required={required}
-                value={values && (values[v.name] as string | number)}
-                checked={v.type === "checkbox" ? !!values[v.name] : undefined}
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                  handleChange(e, v)
-                }
-                onInvalid={v.onInvalid ? v.onInvalid : undefined}
-              />
-            </div>
-          );
-        })}
-        <div className="d-flex justify-content-end">
-          {!hideSubmit && <Button title={title || "submit"} />}
-        </div>
-      </form>
-    );
-  }
-);
+import React, {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react";
+import { Button } from "../button/Button";
+import { Icon } from "../icon/Icon";
+import "./form.css";
+import { FormInterface, FormValuesInterface } from "./form.interface";
+
+export type FormProps<
+  T extends { [key: string]: string | number | boolean | Date }
+> = {
+  className?: string;
+  title?: string;
+  hideSubmit?: boolean;
+  initialForm: FormInterface[];
+  onSubmit?: (values: FormValuesInterface<T>) => void;
+  onChange?: (values: FormValuesInterface<T>) => void;
+};
+
+export const DynamicForm = forwardRef(
+  <T extends { [key: string]: string | number | boolean | Date }>(
+    {
+      initialForm,
+      title,
+      onSubmit,
+      onChange,
+      hideSubmit,
+      className,
+    }: FormProps<T>,
+    ref: React.Ref<{
+      clearInput?: (name: string) => void;
+      resetForm?: () => void;
+      focusInitialElement?: () => void;
+      getValues?: () => FormValuesInterface<T>;
+      updateFormValue?: (values: FormValuesInterface<T>) => void;
+    }>
+  ) => {
+    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;
+    });
+
+    // Stocker les références des inputs
+    const inputRefs = useRef<{ [key: string]: HTMLInputElement | null }>({});
+
+    const handleChange = useCallback(
+      (
+        event: React.ChangeEvent<HTMLInputElement>,
+        forminterface: FormInterface
+      ) => {
+        const { name, value, type, checked } = event.target;
+        if (forminterface.onChange) {
+          forminterface.onChange(value, name);
+        }
+        setValues((prevValues) => {
+          const currentValues = prevValues || {};
+          const updatedValues = {
+            ...currentValues,
+            [name]: type === "checkbox" ? checked : value,
+          };
+          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]: "",
+      }));
+    }, []);
+
+    // Fonction pour donner le focus à l'élément qui devait initialement l'avoir
+    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,
+    }));
+
+    return (
+      <form onSubmit={handleSubmit} className={className ?? ""}>
+        {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-${v.type}`}
+            >
+              {v.label && <label>{v.label}</label>}
+              {v.icon && <Icon classIcon={v.icon} />}
+
+              <input
+                ref={(el) => (inputRefs.current[v.name] = el)}
+                name={v.name}
+                type={v.type}
+                placeholder={v.placeholder ?? ""}
+                autoComplete={v.autoComplete ?? "on"}
+                tabIndex={0}
+                disabled={disabled}
+                autoFocus={v.focus ?? false}
+                required={required}
+                value={values && (values[v.name] as string | number)}
+                checked={v.type === "checkbox" ? !!values[v.name] : undefined}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                  handleChange(e, v)
+                }
+                onInvalid={v.onInvalid ? v.onInvalid : undefined}
+              />
+            </div>
+          );
+        })}
+        <div className="d-flex justify-content-end">
+          {!hideSubmit && <Button title={title || "submit"} />}
+        </div>
+      </form>
+    );
+  }
+);

package/src/form/Form.view.tsx

@@ -1,47 +1,47 @@
-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; // Signature d'index ajoutée
-}
-export const FormView = (): JSX.Element => {
-  const initialValues: FormInterface[] = [
-    {
-      value: "Alexandre",
-      label: "Nom",
-      focus: true,
-      name: "nom",
-      type: TypeInputEnum.TEXT,
-      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,
-    },
-  ];
-
-  // 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} />;
-};
+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; // Signature d'index ajoutée
+}
+export const FormView = (): JSX.Element => {
+  const initialValues: FormInterface[] = [
+    {
+      value: "Alexandre",
+      label: "Nom",
+      focus: true,
+      name: "nom",
+      type: TypeInputEnum.TEXT,
+      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,
+    },
+  ];
+
+  // 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/src/form/form.css

@@ -1,37 +1,37 @@
-input {
-  border: 1px solid #cfbdbd;
-  padding: 0.5rem 1rem;
-  border-radius: 4px;
-  margin: 0.25rem 0 0.25rem 0;
-  min-width: 250px;
-  &:focus-visible {
-    outline: 1px solid #9696a7;
-  }
-}
-form {
-  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;
-  }
-}
+input {
+  border: 1px solid #cfbdbd;
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  margin: 0.25rem 0 0.25rem 0;
+  min-width: 250px;
+  &:focus-visible {
+    outline: 1px solid #9696a7;
+  }
+}
+form {
+  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/src/form/form.enum.ts

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

package/src/form/form.interface.tsx

@@ -1,31 +1,31 @@
-import { TypeInputEnum } from "./form.enum";
-
-export type FormValuesInterface<
-  T extends { [key: string]: string | number | boolean | Date }
-> = Partial<{
-  [K in keyof T]: T[K];
-}>;
-export interface FormCondition {
-  errorMessage: string;
-  regex: string;
-}
-export type autoCompleteType = "off" | "on";
-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;
-  className?: string;
-  autoComplete?: autoCompleteType;
-  onChange?: (value: string | number | boolean | Date, name?: string) => void;
-  onRequired?: (value: string | number | boolean | Date) => boolean;
-  onDisabled?: (value: string | number | boolean | Date) => boolean;
-  onInvalid?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-}
+import { TypeInputEnum } from "./form.enum";
+
+export type FormValuesInterface<
+  T extends { [key: string]: string | number | boolean | Date }
+> = Partial<{
+  [K in keyof T]: T[K];
+}>;
+export interface FormCondition {
+  errorMessage: string;
+  regex: string;
+}
+export type autoCompleteType = "off" | "on";
+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;
+  className?: string;
+  autoComplete?: autoCompleteType;
+  onChange?: (value: string | number | boolean | Date, name?: string) => void;
+  onRequired?: (value: string | number | boolean | Date) => boolean;
+  onDisabled?: (value: string | number | boolean | Date) => boolean;
+  onInvalid?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}