kelt-ui-kit-react 1.8.2 → 1.8.3

package/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/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/package/src/button/buttonFilters/ButtonFilters.tsx

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

package/package/src/button/buttonFilters/buttonFilters.css

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

package/package/src/card/Card.tsx

@@ -0,0 +1,125 @@
+import { useCallback, useState } from "react";
+import { Icon } from "../icon/Icon";
+import { PositionOverlay } from "../overlayPanel/OverlayPanel";
+import "./card.css";
+import { CardInterface } from "./card.interface";
+import { CardActionInterface } from "./cardAction.interface";
+import { CardAction } from "./cardAction/CardAction";
+type CardProps = {
+  item: CardInterface;
+  actions?: CardActionInterface[];
+  className?: string;
+  handleClick?: (item: CardInterface) => void;
+  onClose?: (item: CardInterface) => void;
+  children?: JSX.Element;
+  customAction?: JSX.Element;
+  positionOverlay?: PositionOverlay;
+};
+
+// Composant Card modifié
+export const Card = ({
+  item,
+  actions,
+  className,
+  handleClick,
+  onClose,
+  customAction,
+  positionOverlay,
+  children,
+}: CardProps): JSX.Element => {
+  const [cliqueAction, setCliqueAction] = useState(false);
+  const [openActions, setOpenActions] = useState(false);
+  const [positions, setPositions] = useState<{ top: number; left: number }>();
+  const onClickClose = (e: React.MouseEvent, item: CardInterface) => {
+    e.stopPropagation();
+    if (onClose) {
+      onClose(item);
+    }
+  };
+  const onClickCard = useCallback(
+    (e: React.MouseEvent, item: CardInterface) => {
+      e.stopPropagation();
+      if (openActions) {
+        setPositions(undefined);
+        return setOpenActions(false);
+      }
+      if (
+        (e.target as HTMLElement).closest(".qte") ||
+        (e.target as HTMLElement).closest(".card-action-menu button") ||
+        (e.target as HTMLElement).closest(".card-actions")
+      ) {
+        return; // Ne propage pas l'événement si le clic est dans Quantity
+      }
+
+      setCliqueAction(!cliqueAction);
+
+      if (handleClick && e.button !== 2) {
+        handleClick(item);
+      } else {
+        setPositions({ top: e.clientY, left: e.clientX });
+        setOpenActions(true);
+      }
+    },
+    [
+      setCliqueAction,
+      setPositions,
+      handleClick,
+      openActions,
+      setOpenActions,
+      cliqueAction,
+    ]
+  );
+
+  return (
+    <div
+      onContextMenu={(e) => e.preventDefault()}
+      onMouseDown={(e) => onClickCard(e, item)}
+      className={`card ${className ?? ""} ${
+        cliqueAction ? "card--active" : ""
+      } `}
+    >
+      {children}
+      {!children && (
+        <>
+          <div className="card-text d-flex">
+            {item.image && (
+              <div className="card-img">
+                <img src={item.image} alt={"card-image"} />
+              </div>
+            )}
+            {item.title && <div className="card-title">{item.title}</div>}
+            {item.description && (
+              <div className="card-content">{item.description}</div>
+            )}
+          </div>
+          <div className="card-footer">
+            {customAction && (
+              <div className="card-custom-action">{customAction}</div>
+            )}
+            <div className="d-flex flex-1 align-items-center">
+              {item.prix && <div className="card-prix">{item.prix}</div>}
+            </div>
+          </div>
+          {onClose && (
+            <div
+              className="ml-2 cursor-pointer"
+              onClick={(e) => onClickClose(e, item)}
+            >
+              <Icon classIcon="bi-trash3" />
+            </div>
+          )}
+          {actions && (
+            <CardAction
+              openActions={openActions}
+              setOpenActions={setOpenActions}
+              actions={actions}
+              item={item}
+              positions={positions}
+              positionOverlay={positionOverlay}
+            />
+          )}
+        </>
+      )}
+    </div>
+  );
+};

package/package/src/card/Card.view.tsx

@@ -0,0 +1,73 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Grid } from "../grid/Grid";
+import { GridInterface } from "../grid/grid.interface";
+import { Quantity } from "../quantity/Quantity";
+import { Card } from "./Card";
+import { CardInterface } from "./card.interface";
+import { CardActionInterface } from "./cardAction.interface";
+export const CardView = (): JSX.Element => {
+  const [actions, setActions] = useState<GridInterface[]>([]);
+  const mockItems: CardInterface[] = [
+    {
+      title: "Client",
+      image:
+        "https://www.papapiqueetmamancoud.fr/media/cache/app_product_small_thumbnail_listing_cropped/41/a2/e90184ab12b765859580b529d2ec.jpg",
+      description: "Description 1",
+      prix: "59.18 €",
+      quantity: 12,
+    },
+    {
+      title: "Produits",
+      prix: "59.18 €",
+      quantity: 1,
+    },
+    {
+      title: "Total",
+      description: "Description 3",
+      quantity: 1,
+    },
+  ];
+  const actionsCard: CardActionInterface[] = useMemo(() => {
+    return [
+      {
+        icon: "bi-trash3",
+        label: "Supprimer la transaction",
+        type: "menu",
+        onClick: (item: CardInterface) => console.log(item),
+      },
+      {
+        icon: "bi-trash3",
+        label: "Editer la transaction",
+        type: "menu",
+        onClick: (item: CardInterface) => console.log(item),
+      },
+      {
+        icon: "bi-pencil",
+        label: "Editer",
+        onClick: (item: CardInterface) => console.log(item),
+      },
+    ];
+  }, []);
+
+  const setQuantity = useCallback((item: CardInterface, qte: number) => {
+    console.log(qte, item);
+  }, []);
+  useEffect(() => {
+    const initActions: GridInterface[] = mockItems.map((item) => {
+      return {
+        children: (
+          <Card
+            className="card--horizontal"
+            item={item}
+            actions={actionsCard}
+            customAction={
+              <Quantity pas={1} item={item} setQuantity={setQuantity} />
+            }
+          />
+        ),
+      };
+    });
+    setActions(initActions);
+  }, [setActions, setQuantity]);
+  return <Grid items={actions} />;
+};

package/package/src/card/card.css

@@ -0,0 +1,145 @@
+.card {
+  border: 1px solid #cfbdbd;
+  border-radius: 10px;
+  padding: 1rem;
+  max-width: 200px;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+  flex-wrap: wrap;
+
+  .card-overlay {
+    display: none;
+    position: absolute;
+    background-color: rgba(0, 0, 0, 0.1);
+    width: 100%;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    pointer-events: none;
+  }
+  .bi-three-dots-vertical {
+    display: none;
+  }
+  .card-custom-action {
+    display: flex;
+    flex: 1;
+    justify-content: start;
+    align-items: center;
+  }
+
+  .bi-trash3 {
+    font-size: 1rem;
+  }
+  .card-text {
+    width: 100%;
+  }
+  .card-footer {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: space-between;
+  }
+  &.card--horizontal {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    min-height: 56px;
+    max-width: initial;
+    .card-img {
+      margin-right: 0.5rem;
+    }
+
+    .card-content {
+      flex: 1;
+      min-width: 200px;
+    }
+
+    .card-title {
+      width: calc(100% - 20px);
+      margin-bottom: 1rem;
+    }
+    .card-action {
+      position: absolute;
+      right: 10px;
+      top: 10px;
+    }
+    .card-prix {
+      flex: 1;
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
+
+  &:not(.card--horizontal) {
+    .card-title {
+      margin-bottom: 1rem;
+    }
+  }
+
+  .card-img {
+    width: 30px;
+
+    img {
+      width: 100%;
+    }
+  }
+
+  .card-title {
+    font-size: 14px;
+    font-weight: 600;
+  }
+
+  .card-content {
+    font-size: 14px;
+    font-weight: 400;
+    display: none;
+  }
+}
+@container (min-width: 992px) {
+  .card {
+    .card-custom-action {
+      justify-content: end;
+    }
+    .bi-three-dots-vertical {
+      display: block;
+    }
+    .bi-three-dots {
+      display: none;
+    }
+    &.card--horizontal {
+      .card-actions {
+        margin-left: 0.5rem;
+      }
+      .card-footer {
+        display: flex;
+        flex: 1;
+        justify-content: space-between;
+      }
+      .card-text {
+        width: 300px;
+        display: flex;
+        align-items: center;
+      }
+      .card-content {
+        display: flex;
+      }
+      .card-title {
+        min-width: auto;
+        width: auto;
+        margin-right: 1rem;
+        margin-bottom: 0;
+      }
+      .card-prix {
+        flex: inherit;
+        min-width: auto;
+      }
+      .card-action {
+        position: relative;
+        right: initial;
+        top: initial;
+      }
+    }
+  }
+}

package/package/src/card/card.interface.tsx

@@ -0,0 +1,9 @@
+export interface CardInterface {
+  id?: number | string;
+  uuid?: string;
+  title: string | JSX.Element;
+  description?: string | JSX.Element;
+  image?: string;
+  prix?: string | JSX.Element;
+  quantity?: number;
+}