kelt-ui-kit-react 2.0.3 → 2.0.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.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/src/_core/type/generiqueType.tsx

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

package/src/dataTable/dataTableColumn/dataTableColumnFilter/DataTableColumnFilter.tsx

@@ -1,36 +0,0 @@
-import { Icon } from "../../../icon/Icon";
-import { DataTableColumnsInterface } from "../../dataTable.interface";
-import "./dataTableColumnFilter.css";
-
-type DataTableColumnFilterProps<T> = {
-  className?: string;
-  column: DataTableColumnsInterface<T>;
-  isFilterVisible?: boolean;
-  onToggleVisibility?: (column: DataTableColumnsInterface<T>) => void;
-};
-export const DataTableColumnFilter = <T,>({
-  className,
-  column,
-  isFilterVisible = false,
-  onToggleVisibility,
-}: DataTableColumnFilterProps<T>) => {
-  return (
-    <div
-      className={`data-table-column-filter ${
-        isFilterVisible ? "active" : ""
-      } ${className ?? ""}`}
-    >
-      <span>
-        <Icon
-          onClick={(e) => {
-            e.stopPropagation();
-            onToggleVisibility?.(column);
-          }}
-          classIcon={`bi-filter cursor-pointer ${
-            isFilterVisible ? "data-table-column-filter-active" : ""
-          }`}
-        />
-      </span>
-    </div>
-  );
-};

package/src/dataTable/dataTableColumn/dataTableColumnFilter/dataTableColumnFilterDate/DataTableColumnFilterDate.tsx

@@ -1,39 +0,0 @@
-import { useState } from "react";
-
-import { TypeInputEnum } from "../../../../form/form.enum";
-import { Input } from "../../../../form/input/Input";
-
-type DataTableColumnFilterDateProps = {
-  id: string;
-  name: string;
-  label: string;
-  onChange: (value: string) => void;
-  currentValue?: string;
-};
-export const DataTableColumnFilterDate = ({
-  id,
-  name,
-  label,
-  onChange,
-  currentValue,
-}: DataTableColumnFilterDateProps) => {
-  const [selectedValue, setSelectedValue] = useState<string>(
-    currentValue ?? "",
-  );
-  const handleChange = (value: string) => {
-    setSelectedValue(value);
-    onChange(value);
-  };
-  return (
-    <div>
-      <p>{label}</p>
-      <Input
-        id={id}
-        name={name}
-        type={TypeInputEnum.DATE}
-        value={selectedValue}
-        onChange={(e) => handleChange(e.target.value)}
-      />
-    </div>
-  );
-};

package/src/dataTable/dataTableColumn/dataTableColumnFilter/dataTableColumnFilterDateRange/dataTableColumnFilterDateRange.tsx

@@ -1,80 +0,0 @@
-import { useEffect, useState } from "react";
-
-import { TypeInputEnum } from "../../../../form/form.enum";
-import { Input } from "../../../../form/input/Input";
-
-type DataTableColumnFilterDateRangeProps = {
-  id: string;
-  name: string;
-  onChange: (startDate: string, endDate: string) => void;
-  currentStartValue?: string;
-  currentEndValue?: string;
-};
-
-export const DataTableColumnFilterDateRange = ({
-  id,
-  name,
-  onChange,
-  currentStartValue,
-  currentEndValue,
-}: DataTableColumnFilterDateRangeProps) => {
-  const [startDate, setStartDate] = useState<string>(currentStartValue ?? "");
-  const [endDate, setEndDate] = useState<string>(currentEndValue ?? "");
-
-  useEffect(() => {
-    setStartDate(currentStartValue ?? "");
-  }, [currentStartValue]);
-
-  useEffect(() => {
-    setEndDate(currentEndValue ?? "");
-  }, [currentEndValue]);
-
-  const handleStartDateChange = (value: string) => {
-    setStartDate(value);
-    onChange(value, endDate);
-  };
-
-  const handleEndDateChange = (value: string) => {
-    setEndDate(value);
-    onChange(startDate, value);
-  };
-
-  return (
-    <div>
-      <div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
-        <div>
-          <label
-            htmlFor={`${id}-start`}
-            style={{ display: "block", marginBottom: "4px" }}
-          >
-            Date début
-          </label>
-          <Input
-            id={`${id}-start`}
-            name={`${name}-start`}
-            type={TypeInputEnum.DATE}
-            value={startDate}
-            onClick={(e) => e.stopPropagation()}
-            onChange={(e) => handleStartDateChange(e.target.value)}
-          />
-        </div>
-        <div>
-          <label
-            htmlFor={`${id}-end`}
-            style={{ display: "block", marginBottom: "4px" }}
-          >
-            Date fin
-          </label>
-          <Input
-            id={`${id}-end`}
-            name={`${name}-end`}
-            type={TypeInputEnum.DATE}
-            value={endDate}
-            onClick={(e) => e.stopPropagation()}
-            onChange={(e) => handleEndDateChange(e.target.value)}
-          />
-        </div>
-      </div>
-    </div>
-  );
-};

package/src/dataTable/dataTableColumn/dataTableColumnFilter/dataTableColumnFilterEnum/DataTableColumnFilterEnum.tsx

@@ -1,89 +0,0 @@
-import { useEffect, useState } from "react";
-import { Button } from "../../../..";
-import { EnumerableType } from "../../../../_core/type/generiqueType";
-import { TypeInputEnum } from "../../../../form/form.enum";
-import { Input } from "../../../../form/input/Input";
-
-type DataTableColumnFilterEnumProps = {
-  type: TypeInputEnum;
-  id: string;
-  name?: string;
-  data: EnumerableType[];
-  onChange: (value: string) => void;
-  currentValue?: string;
-};
-export const DataTableColumnFilterEnum = ({
-  type,
-  id,
-  onChange,
-  name,
-  data,
-  currentValue = "",
-}: DataTableColumnFilterEnumProps) => {
-  const [selectedValue, setSelectedValue] = useState<string[]>(() => {
-    return currentValue ? currentValue.split(",") : [];
-  });
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    let newSelectedValue: string[];
-
-    if (type === TypeInputEnum.RADIO) {
-      newSelectedValue = [e.target.value];
-    } else {
-      if (selectedValue.includes(e.target.value)) {
-        newSelectedValue = selectedValue.filter(
-          (val) => val !== e.target.value,
-        );
-      } else {
-        newSelectedValue = [...selectedValue, e.target.value];
-      }
-    }
-
-    setSelectedValue(newSelectedValue);
-    onChange(newSelectedValue.join(","));
-  };
-  const allSelected = () => {
-    if (selectedValue.length === data.length) {
-      setSelectedValue([]);
-      onChange("");
-    } else {
-      const allValues = data.map((d) => d.value);
-      setSelectedValue(allValues);
-      onChange(allValues.join(","));
-    }
-  };
-  useEffect(() => {
-    const newValue = currentValue ? currentValue.split(",") : [];
-    setSelectedValue(newValue);
-  }, [currentValue]);
-  return (
-    <>
-      {data?.map((opt) => (
-        <div
-          style={{
-            width: "150px",
-          }}
-          className="d-flex align-items-center"
-          key={opt.value}
-        >
-          <Input
-            id={id}
-            name={`${name}-${opt.value}-filter`}
-            value={opt.value}
-            onChange={handleChange}
-            type={type}
-            checked={selectedValue.includes(opt.value)}
-          />
-          <label className="ml-2" htmlFor={`${name}-${opt.value}-filter`}>
-            {opt.label}
-          </label>
-        </div>
-      ))}
-      <Button
-        className="mt-2"
-        onClick={allSelected}
-        id={`${id}-select-all`}
-        title="Tout sélectionner"
-      />
-    </>
-  );
-};

package/src/dataTable/dataTableColumn/dataTableColumnFilter/dataTableColumnFilterString/DataTableColumnFilterString.tsx

@@ -1,37 +0,0 @@
-import { useState } from "react";
-
-import { Input } from "../../../../form/input/Input";
-
-type DataTableColumnFilterStringProps = {
-  id: string;
-  name: string;
-  label: string;
-  onChange: (value: string) => void;
-  currentValue?: string;
-};
-export const DataTableColumnFilterString = ({
-  id,
-  name,
-  label,
-  onChange,
-  currentValue,
-}: DataTableColumnFilterStringProps) => {
-  const [selectedValue, setSelectedValue] = useState<string>(
-    currentValue ?? "",
-  );
-  const handleChange = (value: string) => {
-    setSelectedValue(value);
-    onChange(value);
-  };
-  return (
-    <div>
-      <p>{label}</p>
-      <Input
-        id={id}
-        name={name}
-        value={selectedValue}
-        onChange={(e) => handleChange(e.target.value)}
-      />
-    </div>
-  );
-};

package/src/dataTable/dataTableColumn/dataTableColumnSort/DataTableColumnSort.tsx

@@ -1,42 +0,0 @@
-import { Icon } from "../../../icon/Icon";
-import { DataTableSortDirection } from "../../DataTable";
-import { DataTableColumnsInterface } from "../../dataTable.interface";
-
-type DataTableColumnSortProps<T> = {
-  className?: string;
-  column: DataTableColumnsInterface<T>;
-  sortDirection?: DataTableSortDirection | null;
-  onToggleSort?: (column: DataTableColumnsInterface<T>) => void;
-};
-
-export const DataTableColumnSort = <T,>({
-  className,
-  column,
-  sortDirection,
-  onToggleSort,
-}: DataTableColumnSortProps<T>) => {
-  const iconClass =
-    sortDirection === "asc"
-      ? "bi-sort-up"
-      : sortDirection === "desc"
-        ? "bi-sort-down"
-        : "bi-arrow-down-up";
-
-  return (
-    <div
-      className={`data-table-column-sort ${sortDirection ? "active" : ""} ${className ?? ""}`}
-    >
-      <span>
-        <Icon
-          onClick={(e) => {
-            e.stopPropagation();
-            onToggleSort?.(column);
-          }}
-          classIcon={`${iconClass} cursor-pointer ${
-            sortDirection ? "data-table-column-sort-active" : ""
-          }`}
-        />
-      </span>
-    </div>
-  );
-};