kelt-ui-kit-react 2.0.6 → 2.0.9

package/src/button/buttonFile/ButtonFile.tsx

@@ -1,59 +1,59 @@
-import { ChangeEvent, useRef } from "react";
-import { Button } from "../Button";
-
-interface ButtonFileProps {
-  onFileSelected?: (file: File, buffer: ArrayBuffer) => void;
-  accept?: string;
-  buttonText?: string;
-  buttonClassName?: string;
-  containerClassName?: string;
-}
-
-export const ButtonFile = ({
-  onFileSelected,
-  accept = "*",
-  buttonText = "Choisir un fichier",
-  buttonClassName,
-  containerClassName,
-}: ButtonFileProps) => {
-  const fileInputRef = useRef<HTMLInputElement>(null);
-
-  const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-
-    if (file && onFileSelected) {
-      const reader = new FileReader();
-
-      reader.onload = (event: ProgressEvent<FileReader>) => {
-        const buffer = event.target?.result as ArrayBuffer;
-        onFileSelected(file, buffer);
-      };
-
-      reader.readAsArrayBuffer(file);
-    }
-  };
-
-  const handleButtonClick = () => {
-    fileInputRef.current?.click();
-  };
-
-  return (
-    <div className={containerClassName}>
-      <input
-        type="file"
-        ref={fileInputRef}
-        onChange={handleFileChange}
-        className="hidden"
-        accept={accept}
-      />
-      <Button
-        onClick={handleButtonClick}
-        className={
-          buttonClassName ||
-          "bg-green-500 hover:bg-green-600 text-white font-medium py-3 px-6 rounded-lg transition-colors duration-200"
-        }
-        title={buttonText || "Choisir un fichier"}
-      />
-    </div>
-  );
-};
+import { ChangeEvent, useRef } from "react";
+import { Button } from "../Button";
+
+interface ButtonFileProps {
+  onFileSelected?: (file: File, buffer: ArrayBuffer) => void;
+  accept?: string;
+  buttonText?: string;
+  buttonClassName?: string;
+  containerClassName?: string;
+}
+
+export const ButtonFile = ({
+  onFileSelected,
+  accept = "*",
+  buttonText = "Choisir un fichier",
+  buttonClassName,
+  containerClassName,
+}: ButtonFileProps) => {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+
+    if (file && onFileSelected) {
+      const reader = new FileReader();
+
+      reader.onload = (event: ProgressEvent<FileReader>) => {
+        const buffer = event.target?.result as ArrayBuffer;
+        onFileSelected(file, buffer);
+      };
+
+      reader.readAsArrayBuffer(file);
+    }
+  };
+
+  const handleButtonClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  return (
+    <div className={containerClassName}>
+      <input
+        type="file"
+        ref={fileInputRef}
+        onChange={handleFileChange}
+        className="hidden"
+        accept={accept}
+      />
+      <Button
+        onClick={handleButtonClick}
+        className={
+          buttonClassName ||
+          "bg-green-500 hover:bg-green-600 text-white font-medium py-3 px-6 rounded-lg transition-colors duration-200"
+        }
+        title={buttonText || "Choisir un fichier"}
+      />
+    </div>
+  );
+};

package/src/button/buttonFile/ButtonFile.view.tsx

@@ -1,70 +1,70 @@
-import { ButtonFile } from "./ButtonFile";
-
-export const ButtonFileView = () => {
-  const handleZipFile = (file: File, buffer: ArrayBuffer) => {
-    console.log("Fichier sélectionné:", file.name);
-    console.log("Type:", file.type);
-    console.log("Taille:", file.size);
-    console.log("Buffer:", buffer);
-    console.log("Taille du buffer:", buffer.byteLength);
-
-    // Convertir en Uint8Array si nécessaire
-    const uint8Array = new Uint8Array(buffer);
-    console.log("Uint8Array:", uint8Array);
-
-    // Faites ce que vous voulez avec le buffer ici
-  };
-
-  return (
-    <div className="min-h-screen bg-gray-50 p-8">
-      <div className="max-w-2xl mx-auto space-y-6">
-        <div className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center bg-white">
-          <h2 className="text-2xl font-semibold mb-6 text-gray-800">
-            Exemple 1 : Fichier ZIP
-          </h2>
-          <ButtonFile
-            onFileSelected={handleZipFile}
-            accept=".zip"
-            buttonText="Sélectionner un ZIP"
-          />
-        </div>
-
-        <div className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center bg-white">
-          <h2 className="text-2xl font-semibold mb-6 text-gray-800">
-            Exemple 2 : Tout type de fichier
-          </h2>
-          <ButtonFile
-            onFileSelected={(file: File, buffer: ArrayBuffer) => {
-              console.log(
-                "Fichier:",
-                file.name,
-                "Buffer size:",
-                buffer.byteLength,
-              );
-            }}
-            buttonText="Sélectionner n'importe quel fichier"
-            buttonClassName="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded"
-          />
-        </div>
-
-        <div className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center bg-white">
-          <h2 className="text-2xl font-semibold mb-6 text-gray-800">
-            Exemple 3 : Images uniquement
-          </h2>
-          <ButtonFile
-            onFileSelected={(file: File, buffer: ArrayBuffer) => {
-              console.log("Image:", file.name);
-              // Créer une URL pour prévisualiser l'image
-              const blob = new Blob([buffer], { type: file.type });
-              const url = URL.createObjectURL(blob);
-              console.log("URL de prévisualisation:", url);
-            }}
-            accept="image/*"
-            buttonText="Sélectionner une image"
-            buttonClassName="bg-purple-500 hover:bg-purple-600 text-white font-medium py-3 px-6 rounded-lg"
-          />
-        </div>
-      </div>
-    </div>
-  );
-};
+import { ButtonFile } from "./ButtonFile";
+
+export const ButtonFileView = () => {
+  const handleZipFile = (file: File, buffer: ArrayBuffer) => {
+    console.log("Fichier sélectionné:", file.name);
+    console.log("Type:", file.type);
+    console.log("Taille:", file.size);
+    console.log("Buffer:", buffer);
+    console.log("Taille du buffer:", buffer.byteLength);
+
+    // Convertir en Uint8Array si nécessaire
+    const uint8Array = new Uint8Array(buffer);
+    console.log("Uint8Array:", uint8Array);
+
+    // Faites ce que vous voulez avec le buffer ici
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-50 p-8">
+      <div className="max-w-2xl mx-auto space-y-6">
+        <div className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center bg-white">
+          <h2 className="text-2xl font-semibold mb-6 text-gray-800">
+            Exemple 1 : Fichier ZIP
+          </h2>
+          <ButtonFile
+            onFileSelected={handleZipFile}
+            accept=".zip"
+            buttonText="Sélectionner un ZIP"
+          />
+        </div>
+
+        <div className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center bg-white">
+          <h2 className="text-2xl font-semibold mb-6 text-gray-800">
+            Exemple 2 : Tout type de fichier
+          </h2>
+          <ButtonFile
+            onFileSelected={(file: File, buffer: ArrayBuffer) => {
+              console.log(
+                "Fichier:",
+                file.name,
+                "Buffer size:",
+                buffer.byteLength,
+              );
+            }}
+            buttonText="Sélectionner n'importe quel fichier"
+            buttonClassName="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded"
+          />
+        </div>
+
+        <div className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center bg-white">
+          <h2 className="text-2xl font-semibold mb-6 text-gray-800">
+            Exemple 3 : Images uniquement
+          </h2>
+          <ButtonFile
+            onFileSelected={(file: File, buffer: ArrayBuffer) => {
+              console.log("Image:", file.name);
+              // Créer une URL pour prévisualiser l'image
+              const blob = new Blob([buffer], { type: file.type });
+              const url = URL.createObjectURL(blob);
+              console.log("URL de prévisualisation:", url);
+            }}
+            accept="image/*"
+            buttonText="Sélectionner une image"
+            buttonClassName="bg-purple-500 hover:bg-purple-600 text-white font-medium py-3 px-6 rounded-lg"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/button/buttonFilters/ButtonFilters.tsx

@@ -1,102 +1,102 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-import { DynamicForm } from "../../form/Form";
-import { FormInterface, FormValuesInterface } from "../../form/form.interface";
-import { Icon } from "../../icon/Icon";
-import { IconSizeEnum } from "../../icon/iconSize.enum";
-import "./buttonFilters.css";
-export type ButtonActionsProps<
-  T extends { [key: string]: string | number | boolean | Date | string[] },
-> = {
-  className?: string;
-  onClick?: (e: React.MouseEvent) => void;
-  title: string;
-  classIcon?: string;
-  sizeIcon?: IconSizeEnum;
-  dataForm: FormInterface[];
-  onChange?: (values: FormValuesInterface<T>) => void;
-  disabled?: boolean;
-  id?: string;
-};
-export const ButtonFilters = <
-  T extends { [key: string]: string | number | boolean | Date | string[] },
->({
-  className,
-  onClick,
-  title,
-  classIcon,
-  sizeIcon,
-  disabled = false,
-  id,
-  dataForm,
-  onChange,
-}: ButtonActionsProps<T>) => {
-  const buttonRef = useRef<HTMLButtonElement | null>(null);
-  const [openFilters, setOpenFilters] = useState(false);
-  const handleClick = (e: React.MouseEvent) => {
-    e.preventDefault();
-    setOpenFilters(!openFilters);
-    if (onClick) {
-      onClick(e);
-    }
-  };
-  const handleClickOutside = useCallback(
-    (event: MouseEvent) => {
-      if (
-        buttonRef.current &&
-        !buttonRef.current.contains(event.target as Node)
-      ) {
-        setOpenFilters(false);
-      }
-    },
-    [setOpenFilters],
-  );
-
-  useEffect(() => {
-    if (openFilters) {
-      document.addEventListener("mousedown", handleClickOutside);
-    } else {
-      document.removeEventListener("mousedown", handleClickOutside);
-    }
-
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [openFilters, handleClickOutside]);
-
-  return (
-    <>
-      <button
-        ref={buttonRef}
-        id={id ?? ""}
-        disabled={disabled}
-        type="button"
-        onClick={(e) => handleClick(e)}
-        className={` ${className} button--filters button--transparent `}
-      >
-        {classIcon && (
-          <span>
-            <Icon
-              classIcon={classIcon}
-              size={sizeIcon || IconSizeEnum.EXTRA_SMALL}
-            />
-          </span>
-        )}
-        <span className=" flex-1">{title}</span>
-        {openFilters && (
-          <div
-            className="button--filters-overlay"
-            onClick={(e) => e.stopPropagation()}
-          >
-            <div className="button--filters-overlay-content">
-              <DynamicForm
-                onChange={onChange as any}
-                initialForm={dataForm}
-                hideSubmit
-              />
-            </div>
-          </div>
-        )}
-      </button>
-    </>
-  );
-};
+import { useCallback, useEffect, useRef, useState } from "react";
+import { DynamicForm } from "../../form/Form";
+import { FormInterface, FormValuesInterface } from "../../form/form.interface";
+import { Icon } from "../../icon/Icon";
+import { IconSizeEnum } from "../../icon/iconSize.enum";
+import "./buttonFilters.css";
+export type ButtonActionsProps<
+  T extends { [key: string]: string | number | boolean | Date | string[] },
+> = {
+  className?: string;
+  onClick?: (e: React.MouseEvent) => void;
+  title: string;
+  classIcon?: string;
+  sizeIcon?: IconSizeEnum;
+  dataForm: FormInterface[];
+  onChange?: (values: FormValuesInterface<T>) => void;
+  disabled?: boolean;
+  id?: string;
+};
+export const ButtonFilters = <
+  T extends { [key: string]: string | number | boolean | Date | string[] },
+>({
+  className,
+  onClick,
+  title,
+  classIcon,
+  sizeIcon,
+  disabled = false,
+  id,
+  dataForm,
+  onChange,
+}: ButtonActionsProps<T>) => {
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+  const [openFilters, setOpenFilters] = useState(false);
+  const handleClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    setOpenFilters(!openFilters);
+    if (onClick) {
+      onClick(e);
+    }
+  };
+  const handleClickOutside = useCallback(
+    (event: MouseEvent) => {
+      if (
+        buttonRef.current &&
+        !buttonRef.current.contains(event.target as Node)
+      ) {
+        setOpenFilters(false);
+      }
+    },
+    [setOpenFilters],
+  );
+
+  useEffect(() => {
+    if (openFilters) {
+      document.addEventListener("mousedown", handleClickOutside);
+    } else {
+      document.removeEventListener("mousedown", handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [openFilters, handleClickOutside]);
+
+  return (
+    <>
+      <button
+        ref={buttonRef}
+        id={id ?? ""}
+        disabled={disabled}
+        type="button"
+        onClick={(e) => handleClick(e)}
+        className={` ${className} button--filters button--transparent `}
+      >
+        {classIcon && (
+          <span>
+            <Icon
+              classIcon={classIcon}
+              size={sizeIcon || IconSizeEnum.EXTRA_SMALL}
+            />
+          </span>
+        )}
+        <span className=" flex-1">{title}</span>
+        {openFilters && (
+          <div
+            className="button--filters-overlay"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="button--filters-overlay-content">
+              <DynamicForm
+                onChange={onChange as any}
+                initialForm={dataForm}
+                hideSubmit
+              />
+            </div>
+          </div>
+        )}
+      </button>
+    </>
+  );
+};

package/src/button/buttonFilters/buttonFilters.css

@@ -1,22 +1,22 @@
-.button--filters {
-  position: relative;
-  .button--filters-overlay {
-    position: absolute;
-    margin-top: 0.25rem;
-    top: 100%;
-    left: 0;
-    background-color: white;
-    border: 1px solid #ccc;
-    padding: 10px;
-    z-index: 1000;
-    border-radius: 4px;
-    width: 100%;
-    .button--filters-overlay-content {
-      display: flex;
-      gap: 0.5rem;
-      label {
-        color: #333;
-      }
-    }
-  }
-}
+.button--filters {
+  position: relative;
+  .button--filters-overlay {
+    position: absolute;
+    margin-top: 0.25rem;
+    top: 100%;
+    left: 0;
+    background-color: white;
+    border: 1px solid #ccc;
+    padding: 10px;
+    z-index: 1000;
+    border-radius: 4px;
+    width: 100%;
+    .button--filters-overlay-content {
+      display: flex;
+      gap: 0.5rem;
+      label {
+        color: #333;
+      }
+    }
+  }
+}