kelt-ui-kit-react 1.8.3 → 1.8.4

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

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

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

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

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

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

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

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

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