kelt-ui-kit-react 2.0.8 → 2.1.0

package/src/carousel/Carousel.css

@@ -1,44 +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;
-    }
-  }
-}
+.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/src/carousel/Carousel.tsx

@@ -1,115 +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>
-  );
-};
+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/src/carousel/Carousel.view.tsx

@@ -1,13 +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>
-  );
-};
+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/src/damier/Damier.tsx

@@ -1,64 +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>
-  );
-};
+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/src/damier/Damier.view.tsx

@@ -1,31 +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} />
-    </>
-  );
-};
+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/src/damier/damier.css

@@ -1,51 +1,51 @@
-.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 {
-    box-sizing: border-box;
-    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(--damier-offset, 0px)) / var(--rows));
-    }
-
-    .cell {
-      height: calc((100vh - var(--damier-offset, 0px)) / var(--rows));
-    }
-  }
+.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 {
+    box-sizing: border-box;
+    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(--damier-offset, 0px)) / var(--rows));
+    }
+
+    .cell {
+      height: calc((100vh - var(--damier-offset, 0px)) / var(--rows));
+    }
+  }
 }

package/src/damier/damierCell/DamierCell.tsx

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