kelt-ui-kit-react 1.8.3 → 1.8.4

package/package/src/sidebar/Sidebar.tsx

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

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

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

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

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

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

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

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

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

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

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

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