kelt-ui-kit-react 1.8.2 → 1.8.3

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

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

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

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

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

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

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

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

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

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

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

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

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