kelt-ui-kit-react 2.0.1 → 2.0.3

package/dist/tabs/Tabs.d.ts

@@ -14,5 +14,6 @@ export type TabsProps = {
     className?: string;
     tabClassName?: string;
     panelClassName?: string;
+    keepMountedVisited?: boolean;
 };
-export declare const Tabs: ({ items, defaultIndex, index, onChange, className, tabClassName, panelClassName, }: TabsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tabs: ({ items, defaultIndex, index, onChange, className, tabClassName, panelClassName, keepMountedVisited, }: TabsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/toaster/store/useToasterStore.d.ts

@@ -12,7 +12,6 @@ type ToasterState = {
         severity?: "info" | "success" | "error" | "warning";
         duration?: number;
         children?: React.ReactNode;
-        close?: boolean;
     }) => void;
     hideToast: () => void;
 };

package/index.html

@@ -5,7 +5,8 @@
   <meta charset="UTF-8" />
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap"
+    rel="stylesheet">
   <link rel="icon" type="image/svg+xml" href="/vite.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Vite + React + TS</title>

package/package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "kelt-ui-kit-react",
+  "type": "module",
+  "version": "1.8.2",
+  "private": false,
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "dependencies": {
+    "@types/node": "^22.5.5",
+    "@vitejs/plugin-react": "^4.3.1",
+    "bootstrap-icons": "^1.11.3",
+    "jwt-decode": "^4.0.0",
+    "react-date-picker": "^11.0.0",
+    "styled-components": "^6.1.13",
+    "vite": "^5.4.6",
+    "vite-plugin-dts": "^4.2.2",
+    "vite-plugin-eslint": "^1.8.1",
+    "web-vitals": "^2.1.4",
+    "zustand": "^5.0.5"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.2"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@types/react-dom": "^18.3.0",
+    "@types/react-router-dom": "^5.3.3",
+    "typescript": "^4.9.5",
+    "vite-plugin-checker": "^0.8.0"
+  }
+}

package/package/src/sidebar/Sidebar.tsx

@@ -0,0 +1,208 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import ReactDOM from "react-dom";
+import { Icon } from "../icon/Icon";
+import "./sidebar.css";
+
+export interface SidebarProps {
+  id?: string;
+  open?: boolean;
+  title?: string;
+  children?: React.ReactNode;
+  className?: string;
+  width?: string;
+  displayOverlay?: boolean;
+  closeOnClickOutside?: boolean;
+  onClose?: (close: boolean) => void;
+}
+
+const SWIPE_CLOSE_THRESHOLD = 60; // px à parcourir pour fermer
+const SWIPE_AXIS_LOCK_THRESHOLD = 10; // px pour déterminer l'axe du geste
+
+export const Sidebar = ({
+  open,
+  children,
+  title,
+  onClose,
+  className,
+  id,
+  width,
+  closeOnClickOutside = true,
+  displayOverlay = true,
+}: SidebarProps): JSX.Element => {
+  const [isOpen, setIsOpen] = useState(open || false);
+  const [dragX, setDragX] = useState(0);
+  const [isDragging, setIsDragging] = useState(false);
+  const sidebarRef = useRef<HTMLDivElement | null>(null);
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const touchStartX = useRef(0);
+  const touchStartY = useRef(0);
+  const axisLocked = useRef<"x" | "y" | null>(null);
+
+  // Créer le conteneur une seule fois
+  useEffect(() => {
+    if (!rootRef.current) {
+      rootRef.current = document.createElement("div");
+      rootRef.current.id = `sidebar-root-${id || crypto.randomUUID()}`;
+      document.body.appendChild(rootRef.current);
+    }
+
+    return () => {
+      // Nettoyage lors du démontage
+      if (rootRef.current && rootRef.current.parentNode) {
+        document.body.removeChild(rootRef.current);
+        rootRef.current = null;
+      }
+    };
+  }, [id]);
+
+  // Synchroniser l'état `isOpen` avec la prop `open`
+  useEffect(() => {
+    setIsOpen(open || false);
+  }, [open]);
+
+  const toggleSidebar = useCallback(() => {
+    setIsOpen(false);
+    if (onClose) {
+      onClose(false);
+    }
+  }, [onClose]);
+
+  const handleClickOutside = useCallback(
+    (event: MouseEvent | TouchEvent) => {
+      if (!closeOnClickOutside) return;
+      if (
+        sidebarRef.current &&
+        !sidebarRef.current.contains(event.target as Node)
+      ) {
+        toggleSidebar();
+      }
+    },
+    [toggleSidebar, closeOnClickOutside],
+  );
+
+  const handleTouchStart = useCallback((event: React.TouchEvent) => {
+    const touch = event.touches[0];
+    touchStartX.current = touch.clientX;
+    touchStartY.current = touch.clientY;
+    axisLocked.current = null;
+    setIsDragging(false);
+    setDragX(0);
+  }, []);
+
+  const handleTouchMove = useCallback(
+    (event: React.TouchEvent) => {
+      if (!isOpen) return;
+
+      const touch = event.touches[0];
+      const deltaX = touch.clientX - touchStartX.current;
+      const deltaY = touch.clientY - touchStartY.current;
+
+      // Détermine l'axe du geste une seule fois, dès qu'on a un déplacement suffisant
+      if (!axisLocked.current) {
+        if (
+          Math.abs(deltaX) < SWIPE_AXIS_LOCK_THRESHOLD &&
+          Math.abs(deltaY) < SWIPE_AXIS_LOCK_THRESHOLD
+        ) {
+          return; // pas encore assez de mouvement pour trancher
+        }
+        axisLocked.current = Math.abs(deltaX) > Math.abs(deltaY) ? "x" : "y";
+      }
+
+      if (axisLocked.current !== "x") return; // c'est un scroll vertical, on laisse faire
+
+      // On gère le swipe horizontal nous-mêmes : on empêche le scroll natif
+      // et on bloque le bounce/scroll de la page pendant le drag
+      event.preventDefault();
+
+      setIsDragging(true);
+      // On ne permet que le swipe vers la droite (fermeture), pas de drag négatif
+      setDragX(Math.max(0, deltaX));
+    },
+    [isOpen],
+  );
+
+  const handleTouchEnd = useCallback(
+    (event: React.TouchEvent) => {
+      if (!isOpen) {
+        return;
+      }
+
+      if (axisLocked.current === "x") {
+        const touch = event.changedTouches[0];
+        const deltaX = touch.clientX - touchStartX.current;
+
+        if (deltaX > SWIPE_CLOSE_THRESHOLD) {
+          toggleSidebar();
+        }
+      }
+
+      setIsDragging(false);
+      setDragX(0);
+      axisLocked.current = null;
+    },
+    [isOpen, toggleSidebar],
+  );
+
+  const handleOverlayTouchEnd = useCallback(
+    (event: React.TouchEvent) => {
+      event.preventDefault();
+      toggleSidebar();
+    },
+    [toggleSidebar],
+  );
+
+  useEffect(() => {
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      document.addEventListener("touchstart", handleClickOutside, {
+        passive: true,
+      });
+    } else {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("touchstart", handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("touchstart", handleClickOutside);
+    };
+  }, [isOpen, handleClickOutside]);
+
+  if (!rootRef.current) {
+    return <></>; // Ne pas tenter de rendre si le conteneur n'existe pas
+  }
+
+  return ReactDOM.createPortal(
+    <>
+      {isOpen && displayOverlay && (
+        <div
+          className="overlay"
+          onClick={toggleSidebar}
+          onTouchEnd={handleOverlayTouchEnd}
+        ></div>
+      )}
+      <div
+        ref={sidebarRef}
+        style={{
+          ...(width ? { width } : {}),
+          transform: dragX ? `translateX(${dragX}px)` : undefined,
+          transition: isDragging ? "none" : undefined,
+        }}
+        className={`sidebar ${isOpen ? "open" : "closed"} ${className ?? ""}`}
+        onTouchStart={handleTouchStart}
+        onTouchMove={handleTouchMove}
+        onTouchEnd={handleTouchEnd}
+      >
+        <div className="sidebar-header">
+          {title && <h2 className="flex-1">{title}</h2>}
+          <button className="toggle-btn" onClick={toggleSidebar}>
+            <Icon classIcon="bi-x-lg" />
+          </button>
+        </div>
+
+        {children && children}
+      </div>
+    </>,
+    rootRef.current,
+  );
+};

package/package/src/sidebar/sidebar.css

@@ -0,0 +1,104 @@
+.sidebar {
+  touch-action: pan-y;
+  /* laisse le scroll vertical natif, gère le X nous-même */
+  will-change: transform;
+}
+
+.overlay {
+  touch-action: none;
+}
+
+.toggle-btn {
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+}
+
+.sidebar {
+  width: 200px;
+  height: 100vh;
+  background-color: var(--primary-color);
+  color: white;
+  transition: width 0.3s;
+  overflow: hidden;
+  position: fixed;
+  transition: transform 0.3s ease-in-out;
+  transform: translateX(0);
+  z-index: 2;
+
+
+
+  &:not(.full) {
+    inset: 0;
+  }
+
+  &.full {
+    width: 100%;
+    right: 0px;
+    top: 0;
+  }
+
+  .sidebar-header {
+    display: flex;
+    align-items: center;
+    padding: 1rem;
+  }
+
+  &.closed {
+    transform: translateX(-100vw);
+  }
+
+  .sidebar-items {
+    list-style-type: none;
+    padding: 0;
+
+    .sidebar-item {
+      padding: 10px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+
+      .item-icon {
+        margin-right: 10px;
+      }
+
+      &:hover {
+        background-color: #34495e;
+      }
+    }
+  }
+
+  .toggle-btn {
+    display: flex;
+    width: 100%;
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    justify-content: flex-end;
+    background-color: transparent;
+    border: none;
+    color: white;
+    cursor: pointer;
+    font-size: 18px;
+    margin: 0;
+    min-width: 10px;
+    width: auto;
+    padding: 0px;
+  }
+}
+
+.overlay {
+  background-color: #0006;
+  opacity: 30%;
+  width: 100%;
+  position: fixed;
+  inset: 0;
+  z-index: 1;
+}
+
+@media screen and (min-width: 992px) {
+  .sidebar {
+    &.full {
+      width: 40vw;
+    }
+  }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kelt-ui-kit-react",
   "type": "module",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/_core/type/generiqueType.tsx

@@ -0,0 +1,4 @@
+export interface EnumerableType {
+  label: string;
+  value: string;
+}

package/src/badge/Badge.tsx

@@ -6,13 +6,17 @@ export type BadgeInterface = {
   className?: string;
   onClick?: (e: React.MouseEvent) => void;
   title?: string;
+  color?: string;
+  onRemove?: (e: React.MouseEvent) => void;
   sizeIcon?: IconSizeEnum;
   classIcon?: string;
 };
 export const Badge = ({
   className,
   onClick,
+  color,
   title,
+  onRemove,
   sizeIcon,
   classIcon,
 }: BadgeInterface) => {
@@ -25,10 +29,14 @@ export const Badge = ({
   return (
     <div
       onClick={handleClick}
-      className={`badge ${className ? className : ""}`}
+      style={{
+        ...(color ? { backgroundColor: color } : {}),
+      }}
+      className={`badge ${className ? className : ""} ${onRemove && "cursor-pointer"}`}
     >
       {classIcon && <Icon size={sizeIcon} classIcon={classIcon}></Icon>}
       <span>{title}</span>
+      {onRemove && <Icon classIcon="bi-x" onClick={onRemove} />}
     </div>
   );
 };

package/src/badge/badge.css

@@ -15,6 +15,10 @@
     font-size: 0.8rem;
     margin-right: 0.25rem;
   }
+  .bi-x {
+    font-size: 1rem;
+    margin-right: 0;
+  }
   &.badge-primary {
     background-color: var(--primary-color);
     border-color: var(--primary-color);

package/src/button/Button.tsx

@@ -13,9 +13,8 @@ export const Button = ({
   classIcon,
   positionicon = 1,
   disabled = false,
-  style,
 }: ButtonInterface) => {
-  const handleClick = (e: React.MouseEvent) => {
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
     if (onClick) {
       onClick(e);
@@ -29,7 +28,6 @@ export const Button = ({
       type="submit"
       onClick={(e) => handleClick(e)}
       className={className}
-      style={style}
     >
       {badge && <Badge {...badge} />}
       {classIcon && positionicon == 1 && (

package/src/button/button.css

@@ -5,7 +5,7 @@ button {
   padding: 10px;
   border-radius: 5px;
   cursor: pointer;
-  font-size: 18px;
+  font-size: 16px;
   font-weight: 500;
   transition: background-color 0.3s;
   display: flex;
@@ -14,7 +14,7 @@ button {
   position: relative;
   align-items: center;
   justify-content: center;
-  font-family: "Lexend", sans-serif;
+  font-family: "Raleway", sans-serif !important;
   .badge {
     position: absolute;
     right: 10px;

package/src/button/button.interface.tsx

@@ -5,13 +5,12 @@ export interface ButtonInterface {
   className?: string;
   badge?: BadgeInterface;
   id?: string;
-  onClick?: (e: React.MouseEvent) => void;
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
   title: string;
   classIcon?: string;
   positionicon?: number;
   disabled?: boolean;
   sizeIcon?: IconSizeEnum;
-  style?: React.CSSProperties;
 }
 export interface buttonActionInterface {
   icon?: string;

package/src/card/card.css

@@ -19,9 +19,12 @@
     bottom: 0;
     pointer-events: none;
   }
-  .bi-three-dots-vertical {
+
+  .bi-three-dots-vertical,
+  .bi-filter {
     display: none;
   }
+
   .card-custom-action {
     display: flex;
     flex: 1;
@@ -32,21 +35,25 @@
   .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;
     }
@@ -60,11 +67,13 @@
       width: calc(100% - 20px);
       margin-bottom: 1rem;
     }
+
     .card-action {
       position: absolute;
       right: 10px;
       top: 10px;
     }
+
     .card-prix {
       flex: 1;
       display: flex;
@@ -87,54 +96,65 @@
   }
 
   .card-title {
-    font-size: 16px;
+    font-size: 14px;
     font-weight: 600;
   }
 
   .card-content {
-    font-size: 16px;
+    font-size: 14px;
     font-weight: 400;
     display: none;
   }
 }
+
 @container (min-width: 992px) {
   .card {
     .card-custom-action {
       justify-content: end;
     }
-    .bi-three-dots-vertical {
+
+    .bi-three-dots-vertical,
+    .bi-filter {
       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;
@@ -142,4 +162,4 @@
       }
     }
   }
-}
+}

package/src/card/cardAction/CardAction.tsx

@@ -36,7 +36,7 @@ export const CardAction = ({
     setCoords?: (coords: { top: number; left: number }) => void;
   }>(null);
   const [position, setPosition] = useState<PositionOverlay | undefined>(
-    positionOverlay
+    positionOverlay,
   );
   const refButton = useRef<HTMLDivElement>(null);
   const [openOverlay, setOpenOverlay] = useState(openActions ?? false);
@@ -56,7 +56,7 @@ export const CardAction = ({
         setOpenActions(openOverlay);
       }
     },
-    [setPosition, setOpenActions]
+    [setPosition, setOpenActions],
   );
 
   const closeOverlay = useCallback(() => {
@@ -107,11 +107,11 @@ export const CardAction = ({
       >
         <Icon
           size={IconSizeEnum.MEDIUM}
-          classIcon={"bi-three-dots-vertical cursor-pointer"}
+          classIcon={"bi-filter cursor-pointer"}
         />
         <Icon
           size={IconSizeEnum.MEDIUM}
-          classIcon={"bi-three-dots cursor-pointer"}
+          classIcon={"bi-filter cursor-pointer"}
         />
       </div>