kelt-ui-kit-react 1.6.2 → 1.6.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kelt-ui-kit-react",
   "type": "module",
-  "version": "1.6.2",
+  "version": "1.6.3",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/App.menu.tsx

@@ -2,6 +2,7 @@ import { NavLink } from "react-router-dom";
 import { ActionView } from "./action/Action.view";
 import { BadgeView } from "./badge/Badge.view";
 import { ButtonView } from "./button/Button.view";
+import { ButtonFileView } from "./button/buttonFile/ButtonFile.view";
 import { CardView } from "./card/Card.view";
 import { CarouselView } from "./carousel/Carousel.view";
 import { DamierView } from "./damier/Damier.view";
@@ -234,6 +235,13 @@ export const MenuList: MenuProps[] = [
     children: <NavLink to="/input-price">Input Price</NavLink>,
     element: <InputPriceView />,
   },
+  {
+    id: 29,
+    name: "Button File",
+    link: "/button-file",
+    children: <NavLink to="/button-file">Button File</NavLink>,
+    element: <ButtonFileView />,
+  },
 ];
 
 export const AppMenu = (): JSX.Element => {

package/src/button/buttonFile/ButtonFile.tsx

@@ -0,0 +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>
+  );
+};

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

@@ -0,0 +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>
+  );
+};

package/src/index.ts

@@ -18,6 +18,7 @@ export { ButtonAction } from "./action/ButtonAction";
 export { Badge } from "./badge/Badge";
 export { Button } from "./button/Button";
 export { ButtonActions } from "./button/buttonActions/ButtonActions";
+export { ButtonFile } from "./button/buttonFile/ButtonFile";
 export { Card } from "./card/Card";
 export { Carousel } from "./carousel/Carousel";
 export { Damier } from "./damier/Damier";