kelt-ui-kit-react 1.8.3 → 1.8.5

package/package/src/card/cardAction/CardAction.tsx

@@ -1,135 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Button } from "../../button/Button";
-import { Icon } from "../../icon/Icon";
-import { IconSizeEnum } from "../../icon/iconSize.enum";
-import { MenuInterface } from "../../menus/menu/menu.interface";
-import { Menus } from "../../menus/Menus";
-import { OverlayPanel } from "../../overlayPanel/OverlayPanel";
-import { CardInterface } from "../card.interface";
-import { CardActionInterface } from "../cardAction.interface";
-import "./cardAction.css";
-export type PositionOverlay =
-  | "left"
-  | "right"
-  | "topLeft"
-  | "topRight"
-  | "bottomLeft"
-  | "bottomRight";
-export type CardActionProps = {
-  actions: CardActionInterface[];
-  item?: CardInterface;
-  openActions?: boolean;
-  positions?: { top: number; left: number };
-  positionOverlay?: PositionOverlay;
-  setOpenActions?: (open: boolean) => void;
-};
-
-export const CardAction = ({
-  actions,
-  openActions,
-  item,
-  positions,
-  positionOverlay,
-  setOpenActions,
-}: CardActionProps) => {
-  const overlaypanelRef = useRef<{
-    setCoords?: (coords: { top: number; left: number }) => void;
-  }>(null);
-  const [position, setPosition] = useState<PositionOverlay | undefined>(
-    positionOverlay
-  );
-  const refButton = useRef<HTMLDivElement>(null);
-  const [openOverlay, setOpenOverlay] = useState(openActions ?? false);
-  useEffect(() => {
-    if (openActions) {
-      setOpenOverlay(openActions);
-    }
-  }, [openActions]);
-
-  const handleChangeOverlay = useCallback(
-    (e: any, openOverlay: boolean) => {
-      if (actions.length === 0) return;
-      e.preventDefault();
-      setPosition("bottomRight");
-
-      if (setOpenActions) {
-        setOpenActions(openOverlay);
-      }
-    },
-    [setPosition, setOpenActions]
-  );
-
-  const closeOverlay = useCallback(() => {
-    setPosition(undefined);
-    setOpenOverlay(false);
-    if (setOpenActions) {
-      setOpenActions(false);
-    }
-  }, [setOpenOverlay, setPosition, setOpenActions]);
-
-  const overlayMenu: MenuInterface[] = useMemo(() => {
-    return actions
-      ?.filter((a) => a.type === "menu")
-      .map((a, index) => {
-        let label = a.label || "";
-        if (a.setLabel && item) {
-          label = a.setLabel(item);
-        }
-        return {
-          id: index,
-          icon: a.icon,
-          name: a.label,
-          children: (
-            <Button
-              classIcon={a.icon}
-              key={index}
-              disabled={item && a.disabled ? a.disabled(item) : false}
-              sizeIcon={IconSizeEnum.LARGE}
-              onClick={(e) => {
-                e.stopPropagation();
-                closeOverlay();
-                a.onClick && item && a.onClick(item);
-              }}
-              title={label}
-            />
-          ),
-        };
-      }) as MenuInterface[];
-  }, [actions]);
-  return (
-    <div className="card-actions">
-      <div
-        ref={refButton}
-        className={`card-action ${
-          actions.filter((a) => a.type === "menu").length ? "visible" : "hidden"
-        }`}
-        onClick={(e) => handleChangeOverlay(e, !openOverlay)}
-      >
-        <Icon
-          size={IconSizeEnum.MEDIUM}
-          classIcon={"bi-three-dots-vertical cursor-pointer"}
-        />
-        <Icon
-          size={IconSizeEnum.MEDIUM}
-          classIcon={"bi-three-dots cursor-pointer"}
-        />
-      </div>
-
-      {openOverlay && refButton.current && (
-        <OverlayPanel
-          position={position}
-          show={openOverlay}
-          ref={overlaypanelRef}
-          closeOverlay={closeOverlay}
-          coordonnees={positions}
-          referenceElement={refButton.current}
-          children={
-            <div>
-              <Menus className="card-action-menu" items={overlayMenu} />
-            </div>
-          }
-        />
-      )}
-    </div>
-  );
-};

package/package/src/card/cardAction/cardAction.css

@@ -1,10 +0,0 @@
-.card-action-menu {
-  min-width: 150px;
-  max-width: 300px;
-  padding: 0.25rem;
-
-  button {
-    font-size: 0.85rem;
-    padding: 1rem 0rem !important;
-  }
-}

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

@@ -1,10 +0,0 @@
-import { CardInterface } from "./card.interface";
-
-export interface CardActionInterface {
-  icon: string;
-  label?: string;
-  disabled?: (item: CardInterface) => boolean;
-  onClick: (item: CardInterface) => void;
-  setLabel?: (item: CardInterface) => string;
-  type?: "menu" | "link";
-}

package/package/src/card/hook/useCardInteractions.tsx

@@ -1,30 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-
-// Hook personnalisé pour détecter les clics en dehors et le survol
-export const useCardInteractions = (callback: () => void) => {
-  const ref = useRef<HTMLDivElement>(null);
-  const [isHovered, setIsHovered] = useState(false);
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (ref.current && !ref.current.contains(event.target as Node)) {
-        callback();
-      }
-    };
-
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [callback]);
-
-  const mouseHandlers = {
-    onMouseEnter: () => setIsHovered(true),
-    onMouseLeave: () => {
-      setIsHovered(false);
-      callback(); // Déclenche le callback quand la souris quitte la carte
-    },
-  };
-
-  return { ref, isHovered, mouseHandlers };
-};

package/package/src/carousel/Carousel.css

@@ -1,44 +0,0 @@
-.carousel {
-  display: flex;
-  align-items: center;
-  .carousel-container {
-    position: relative;
-    width: 100%;
-    overflow: hidden;
-  }
-
-  .carousel-slides-wrapper {
-    display: flex;
-    transition: transform 0.5s ease-in-out;
-  }
-
-  .carousel-slide {
-    min-width: 100%;
-    box-sizing: border-box;
-  }
-
-  .carousel-control {
-    border-radius: 50%;
-    border: 1px solid #696868;
-    width: 34px;
-    display: flex;
-    height: 30px;
-    align-items: center;
-    cursor: pointer;
-    justify-content: center;
-    &.disabled {
-      opacity: 0.5;
-      pointer-events: none;
-    }
-    .bi {
-      color: #696868;
-      font-size: 1rem;
-    }
-    &.prev {
-      margin-right: 0.5rem;
-    }
-    &.next {
-      margin-left: 0.5rem;
-    }
-  }
-}

package/package/src/carousel/Carousel.tsx

@@ -1,115 +0,0 @@
-import React, { ReactNode, useCallback, useEffect, useState } from "react";
-import { Icon } from "../icon/Icon";
-import "./Carousel.css";
-interface Breakpoints {
-  sm?: number;
-  md?: number;
-  lg?: number;
-  xl?: number;
-}
-interface CarouselProps {
-  children: ReactNode[];
-  showControls?: boolean; // Afficher les boutons précédent/suivant
-  itemsToScroll?: number; // Nombre d'éléments à défiler par mouvement
-  breakpoints?: Breakpoints; // Nombre d'éléments à afficher en fonction de la largeur de l'écran
-}
-
-export const Carousel: React.FC<CarouselProps> = ({
-  children,
-  showControls = true,
-  itemsToScroll = 1,
-  breakpoints = {
-    sm: 2,
-    md: 3,
-    lg: 4,
-    xl: 5,
-  },
-}) => {
-  const [currentIndex, setCurrentIndex] = useState(0);
-  const totalItems = children.length;
-  const [itemsToShow, setItemsToShow] = useState(1);
-  useEffect(() => {
-    const updateItemsToShow = () => {
-      const width = window.innerWidth;
-      if (breakpoints.xl && width >= 1200) {
-        return setItemsToShow(breakpoints.xl);
-      }
-      if (breakpoints.lg && width >= 992) {
-        return setItemsToShow(breakpoints.lg);
-      }
-      if (breakpoints.md && width >= 768) {
-        return setItemsToShow(breakpoints.md);
-      }
-      if (breakpoints.sm && width >= 576) {
-        return setItemsToShow(breakpoints.sm);
-      }
-    };
-
-    updateItemsToShow();
-    window.addEventListener("resize", updateItemsToShow);
-    return () => window.removeEventListener("resize", updateItemsToShow);
-  }, [breakpoints]);
-  const nextSlide = useCallback(
-    (e: React.MouseEvent) => {
-      e.preventDefault();
-      setCurrentIndex((prevIndex) =>
-        Math.min(prevIndex + itemsToScroll, totalItems - itemsToShow)
-      );
-    },
-    [setCurrentIndex]
-  );
-
-  const prevSlide = useCallback(
-    (e: React.MouseEvent) => {
-      e.preventDefault();
-      setCurrentIndex((prevIndex) => Math.max(prevIndex - itemsToScroll, 0));
-    },
-    [setCurrentIndex]
-  );
-  const isNextDisabled =
-    currentIndex + itemsToScroll >= totalItems - itemsToShow + 1;
-  const allItemsVisible = totalItems <= itemsToShow;
-  const isPrevDisabled = currentIndex <= 0;
-  return (
-    <div className="carousel">
-      {showControls && !allItemsVisible && (
-        <div
-          className={`carousel-control prev ${isPrevDisabled && `disabled`}`}
-          onClick={prevSlide}
-        >
-          <Icon classIcon="bi-chevron-left" />
-        </div>
-      )}
-      <div className="carousel-container">
-        <div
-          className="carousel-slides-wrapper"
-          style={{
-            display: "flex",
-            transform: `translateX(-${(currentIndex * 100) / itemsToShow}%)`,
-            transition: "transform 0.5s ease-in-out",
-          }}
-        >
-          {React.Children.map(children, (child) => (
-            <div
-              className="carousel-slide"
-              style={{
-                minWidth: `${100 / itemsToShow}%`,
-                boxSizing: "border-box",
-              }}
-            >
-              {child}
-            </div>
-          ))}
-        </div>
-      </div>
-      {showControls && !allItemsVisible && (
-        <div
-          className={`carousel-control next ${isNextDisabled && `disabled`}`}
-          onClick={nextSlide}
-        >
-          <Icon classIcon="bi-chevron-right" />
-        </div>
-      )}
-    </div>
-  );
-};

package/package/src/carousel/Carousel.view.tsx

@@ -1,13 +0,0 @@
-import { Carousel } from "./Carousel";
-
-export const CarouselView = () => {
-  return (
-    <Carousel showControls>
-      <div style={{ background: "red" }}>Slide 1</div>
-      <div style={{ background: "blue" }}>Slide 2</div>
-      <div style={{ background: "green" }}>Slide 3</div>
-      <div style={{ background: "orange" }}>Slide 4</div>
-      <div style={{ background: "purple" }}>Slide 5</div>
-    </Carousel>
-  );
-};

package/package/src/damier/Damier.tsx

@@ -1,64 +0,0 @@
-import { CSSProperties, useEffect, useMemo, useState } from "react";
-import "./damier.css";
-import { DamierCell } from "./damierCell/DamierCell";
-import { DamierCellInterface } from "./damierCell/damierCell.interface";
-interface DamierProps {
-  cols?: number;
-  rows?: number;
-  page?: number;
-  damierCells?: DamierCellInterface[];
-  onClick?: (cell: DamierCellInterface) => void;
-}
-export const Damier = ({
-  cols,
-  rows,
-  damierCells = [],
-  page = 1,
-  onClick,
-}: DamierProps) => {
-  const nbCols = useMemo(() => cols ?? 9, [cols]);
-  const nbRows = useMemo(() => Math.max(1, rows ?? 9), [rows]);
-  const [currentPage, setCurrentPage] = useState(1);
-  useEffect(() => {
-    setCurrentPage(page);
-  }, [page]);
-  // Génération des cases du damier
-  const grid = useMemo(() => {
-    const rowsArray = [];
-    for (let row = 0; row < nbRows; row++) {
-      const colsArray = [];
-      for (let col = 0; col < nbCols; col++) {
-        const position = col + row * nbCols;
-        const cell = damierCells?.find(
-          (cell) => cell.position === position + 1,
-        );
-        if (!cell) {
-          colsArray.push(
-            <div key={`${row}-${col}`} className="cell cell--empty"></div>,
-          );
-        } else {
-          colsArray.push(
-            <DamierCell onClick={onClick} key={`${row}-${col}`} cell={cell} />,
-          );
-        }
-      }
-      rowsArray.push(
-        <div key={row} className="row">
-          {colsArray}
-        </div>,
-      );
-    }
-    return rowsArray;
-  }, [nbCols, nbRows, currentPage]);
-
-  const damierStyle = useMemo(
-    () => ({ "--rows": String(nbRows) }) as CSSProperties,
-    [nbRows],
-  );
-
-  return (
-    <div className="damier" style={damierStyle}>
-      {grid}
-    </div>
-  );
-};

package/package/src/damier/Damier.view.tsx

@@ -1,31 +0,0 @@
-import { useState } from "react";
-import { Button } from "../button/Button";
-import { Damier } from "./Damier";
-import { DamierCellInterface } from "./damierCell/damierCell.interface";
-
-export const DamierView = () => {
-  const [page, setPage] = useState(1);
-  const items: DamierCellInterface[] = [
-    {
-      position: 2,
-      child: <div>2</div>,
-    },
-    {
-      position: 12,
-      child: <div>12</div>,
-    },
-    {
-      position: 83,
-      child: <div>82</div>,
-    },
-  ];
-
-  return (
-    <>
-      <Button onClick={() => setPage(page - 1)} title="previous" />
-      <Button onClick={() => setPage(page + 1)} title="next" />
-
-      <Damier damierCells={items} page={page} />
-    </>
-  );
-};

package/package/src/damier/damier.css

@@ -1,50 +0,0 @@
-.damier {
-  display: flex;
-  flex-direction: column;
-  width: fit-content;
-  margin-bottom: 1rem;
-  width: 100%;
-  --sizeDamier: 630;
-  --rows: 9;
-
-  .row {
-    display: flex;
-    height: 90px;
-    width: calc(var(--sizeDamier) / var(--rows));
-    min-height: 40px;
-  }
-
-  .cell {
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    border: 1px solid #d1c1c1;
-    margin: 0.15rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: #fff;
-
-    &.cell--empty {
-      background: #f9f9f9;
-    }
-
-    &:not(.cell--empty) {
-      cursor: pointer;
-    }
-  }
-}
-
-@media (min-width: 768px) {
-  .damier {
-    --sizeDamier: 990;
-
-    .row {
-      height: calc(100vh / var(--rows));
-    }
-
-    .cell {
-      height: calc((100vh / var(--rows)) - 1px);
-    }
-  }
-}

package/package/src/damier/damierCell/DamierCell.tsx

@@ -1,18 +0,0 @@
-import { DamierCellInterface } from "./damierCell.interface";
-
-interface DamierCellProps {
-  cell: DamierCellInterface;
-  onClick?: (cell: DamierCellInterface) => void;
-}
-export const DamierCell = ({ cell, onClick }: DamierCellProps) => {
-  const handleClick = () => {
-    if (onClick) {
-      onClick(cell);
-    }
-  };
-  return (
-    <div className="cell" onClick={handleClick}>
-      {cell.child}
-    </div>
-  );
-};

package/package/src/damier/damierCell/damierCell.interface.tsx

@@ -1,5 +0,0 @@
-export interface DamierCellInterface {
-  child?: JSX.Element;
-  position?: number;
-  id?: number;
-}