kelt-ui-kit-react 1.8.2 → 1.8.3

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.view.tsx

@@ -0,0 +1,17 @@
+import { useCallback, useState } from "react";
+import { Button } from "../button/Button";
+import { Sidebar } from "./Sidebar";
+
+export const SidebarView = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const onClick = useCallback(() => {
+    setIsOpen(true);
+  }, [setIsOpen]);
+
+  return (
+    <>
+      <Button title={"open me"} onClick={onClick}></Button>
+      <Sidebar onClose={setIsOpen} title="Menu" open={isOpen} />
+    </>
+  );
+};

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/src/sidebarData/SidebarData.tsx

@@ -0,0 +1,19 @@
+import { Sidebar, SidebarProps } from "../sidebar/Sidebar";
+import "./sidebarData.css";
+
+interface SidebarDataProps extends SidebarProps {
+  children?: React.ReactNode;
+  classNameContent?: string;
+}
+
+export const SidebarData = (props: SidebarDataProps) => {
+  return (
+    <Sidebar {...props} className={`full sidebar-data ${props.className}`}>
+      {props.children && (
+        <div className={`sidebar-data-content ${props.classNameContent} `}>
+          {props.children}
+        </div>
+      )}
+    </Sidebar>
+  );
+};

package/package/src/sidebarData/SidebarData.view.tsx

@@ -0,0 +1,19 @@
+import { useCallback, useState } from "react";
+import { Button } from "../button/Button";
+import { SidebarData } from "./SidebarData";
+
+export const SidebarDataView = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const onClick = useCallback(() => {
+    setIsOpen(true);
+  }, [setIsOpen]);
+  const onClose = useCallback(() => {
+    setIsOpen(false);
+  }, [setIsOpen]);
+  return (
+    <>
+      <Button title={"open me"} onClick={onClick}></Button>
+      <SidebarData onClose={onClose} width="20vw" title="Infos" open={isOpen} />
+    </>
+  );
+};

package/package/src/sidebarData/sidebarData.css

@@ -0,0 +1,27 @@
+.sidebar {
+  &.sidebar-data {
+    background-color: #fff;
+    box-shadow: -4px 0 15px rgba(0, 0, 0, 0.3);
+    color: #333;
+    display: flex;
+    flex-direction: column;
+    &.closed {
+      transform: translateX(100vw);
+    }
+
+    .toggle-btn {
+      color: #333;
+    }
+
+    .sidebar-data-content {
+      padding: 1rem;
+    }
+  }
+}
+@media screen and (max-width: 992px) {
+  .sidebar {
+    &.sidebar-data {
+      width: 100% !important;
+    }
+  }
+}

package/package/src/tabs/Tabs.tsx

@@ -0,0 +1,90 @@
+import React, { useEffect, useRef, useState } from "react";
+import "./tabs.css";
+export type TabItem = {
+  key: string;
+  title: React.ReactNode;
+  panel: React.ReactNode;
+  disabled?: boolean;
+};
+
+export type TabsProps = {
+  items: TabItem[];
+  defaultIndex?: number;
+  index?: number; // if provided, component is controlled
+  onChange?: (nextIndex: number) => void;
+  className?: string;
+  tabClassName?: string;
+  panelClassName?: string;
+};
+
+export const Tabs = ({
+  items,
+  defaultIndex = 0,
+  index,
+  onChange,
+  className = "",
+  tabClassName = "",
+  panelClassName = "",
+}: TabsProps) => {
+  const isControlled = typeof index === "number";
+  const [active, setActive] = useState<number>(defaultIndex);
+  const current = isControlled ? (index as number) : active;
+
+  useEffect(() => {
+    // clamp
+    if (!isControlled && (defaultIndex < 0 || defaultIndex >= items.length)) {
+      setActive(0);
+    }
+  }, [defaultIndex, items.length, isControlled]);
+
+  const tabsRef = useRef<Array<HTMLButtonElement | null>>([]);
+
+  const activate = (next: number) => {
+    if (items[next]?.disabled) return;
+    if (isControlled) {
+      onChange?.(next);
+    } else {
+      setActive(next);
+      onChange?.(next);
+    }
+    tabsRef.current[next]?.focus();
+  };
+
+  return (
+    <div className={`tabs-root ${className}`}>
+      <div role="tablist" className="tabs-header">
+        {items.map((t, i) => (
+          <button
+            key={`tab-${t.key}`}
+            ref={(r) => (tabsRef.current[i] = r)}
+            role="tab"
+            id={`tab-${t.key}`}
+            aria-selected={current === i}
+            aria-controls={`panel-${t.key}`}
+            tabIndex={current === i ? 0 : -1}
+            disabled={t.disabled}
+            onClick={() => activate(i)}
+            className={`${tabClassName} tab-button ${
+              current === i ? "tab-button--active" : ""
+            } ${t.disabled ? "tab-button--disabled" : ""}`}
+          >
+            {t.title}
+          </button>
+        ))}
+      </div>
+
+      {items.map((t, i) => (
+        <div
+          key={`panel-${t.key}`}
+          role="tabpanel"
+          id={`panel-${t.key}`}
+          aria-labelledby={`tab-${t.key}`}
+          hidden={current !== i}
+          className={`${panelClassName} mt-3`}
+        >
+          {current === i && t.panel}
+        </div>
+      ))}
+    </div>
+  );
+};

package/package/src/tabs/Tabs.view.tsx

@@ -0,0 +1,20 @@
+import { TabItem, Tabs } from "./Tabs";
+
+export const TabsView = () => {
+  const items: TabItem[] = [
+    { key: "first", title: "Info", panel: <div>Contenu 1</div> },
+    { key: "second", title: "Détails", panel: <div>Contenu 2</div> },
+    {
+      key: "third",
+      title: "Paramètres",
+      panel: <div>Contenu 3</div>,
+      disabled: false,
+    },
+  ];
+  return (
+    <div>
+      <h2 className="text-xl mb-4">Exemple de Tabs</h2>
+      <Tabs items={items} defaultIndex={0} />
+    </div>
+  );
+};

package/package/src/tabs/tabs.css

@@ -0,0 +1,24 @@
+.tabs-root {
+  height: 100%;
+  .tabs-header {
+    display: flex;
+    border-bottom: 1px solid #b2a1a1;
+    .tab-button {
+      padding: 0.5rem 0.75rem;
+      border: 0px;
+      outline: none;
+      background-color: transparent;
+      color: #1e293b; /* slate-800 */
+      cursor: pointer;
+
+      &.tab-button--active {
+        border-bottom: 2px solid var(--primary-color); /* slate-800 */
+        border-radius: 0px;
+      }
+      &.tab-button--disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+    }
+  }
+}

package/package/src/toaster/Toaster.tsx

@@ -0,0 +1,55 @@
+import { useCallback, useEffect } from "react";
+import ReactDOM from "react-dom";
+import { Icon } from "../icon/Icon";
+import { useToasterStore } from "./store/useToasterStore";
+import "./toaster.css";
+
+export const Toaster = () => {
+  const {
+    title,
+    description,
+    severity = "info",
+    visible,
+    children,
+    duration,
+    hideToast,
+    close,
+  } = useToasterStore();
+  const onClose = useCallback(() => {
+    hideToast();
+  }, [hideToast]);
+  useEffect(() => {
+    if (!visible) return;
+    const timer = setTimeout(() => {
+      hideToast();
+    }, duration);
+    return () => clearTimeout(timer);
+  }, [visible, duration, hideToast]);
+
+  if (!visible) return null;
+
+  const toasterRoot = document.getElementById("toaster-root");
+  if (!toasterRoot) return null;
+
+  return ReactDOM.createPortal(
+    <div className={`toaster toaster-${severity}`}>
+      {close && (
+        <div className="toaster--close" onClick={onClose}>
+          <Icon classIcon="bi-x" />
+        </div>
+      )}
+      <div>
+        {severity === "info" && <Icon classIcon="bi-info-circle" />}
+        {severity === "success" && <Icon classIcon="bi-check-circle" />}
+        {severity === "error" && <Icon classIcon="bi-x-circle" />}
+        {severity === "warning" && <Icon classIcon="bi-exclamation-triangle" />}
+      </div>
+      <div>
+        <div className={`title title-${severity}`}>{title}</div>
+        {description && <div className="subtitle">{description}</div>}
+        {children}
+      </div>
+    </div>,
+    toasterRoot
+  );
+};

package/package/src/toaster/Toaster.view.tsx

@@ -0,0 +1,24 @@
+import { useCallback } from "react";
+import { Button } from "../button/Button";
+import { useToasterStore } from "./store/useToasterStore";
+
+export const ToasterView = (): JSX.Element => {
+  const { showToast } = useToasterStore();
+  const handleClickToast = useCallback(() => {
+    showToast("This is a toast message", {
+      description: "This is a description for the toast message.",
+      severity: "warning",
+      duration: 10000,
+      children: <div>Additional content can go here.</div>,
+    });
+  }, [showToast]);
+  return (
+    <div>
+      <Button
+        title="Show Toast"
+        onClick={handleClickToast}
+        className="btn btn-primary"
+      />
+    </div>
+  );
+};

package/package/src/toaster/store/useToasterStore.tsx

@@ -0,0 +1,41 @@
+import { create } from "zustand";
+
+type ToasterState = {
+  title: string;
+  description?: string;
+  severity?: "info" | "success" | "error" | "warning";
+  children?: React.ReactNode;
+  visible: boolean;
+  duration: number;
+  close?: boolean;
+  showToast: (
+    title: string,
+    options?: {
+      description?: string;
+      severity?: "info" | "success" | "error" | "warning";
+      duration?: number;
+      children?: React.ReactNode;
+    }
+  ) => void;
+  hideToast: () => void;
+};
+
+export const useToasterStore = create<ToasterState>((set) => ({
+  title: "",
+  description: "",
+  severity: "info",
+  visible: false,
+  duration: 2500,
+  close: true,
+  children: null,
+  showToast: (title, options = {}) =>
+    set(() => ({
+      title,
+      description: options.description,
+      severity: options.severity || "info",
+      duration: options.duration || 2500,
+      visible: true,
+      children: options.children || null,
+    })),
+  hideToast: () => set(() => ({ visible: false })),
+}));