kelt-ui-kit-react 1.2.0 → 1.2.2

package/src/select/Select.view.tsx

@@ -1,71 +1,71 @@
-import { useMemo } from "react";
-import { Select } from "./Select";
-
-export const SelectView = () => {
-  const selectData = useMemo(() => {
-    return [
-      {
-        id: "select",
-        title: "Select",
-        className: "select-component",
-        options: [
-          { value: "option1", label: "Option 1" },
-          { value: "option2", label: "Option 2" },
-          { value: "option3", label: "Option 3" },
-        ],
-      },
-      {
-        id: "select-disabled",
-        title: "Select Disabled",
-        className: "select-component",
-        disabled: true,
-        options: [
-          { value: "option1", label: "Option 1" },
-          { value: "option2", label: "Option 2" },
-          { value: "option3", label: "Option 3" },
-        ],
-      },
-      {
-        id: "select-placeholder",
-        title: "Select Placeholder",
-        className: "select-component",
-        placeholder: "Select an option",
-        options: [
-          { value: "option1", label: "Option 1" },
-          { value: "option2", label: "Option 2" },
-          { value: "option3", label: "Option 3" },
-        ],
-      },
-      {
-        id: "select-default-value",
-        title: "Select Default Value",
-        className: "select-component",
-        defaultValue: "option2",
-        options: [
-          { value: "option1", label: "Option 1" },
-          { value: "option2", label: "Option 2" },
-          { value: "option3", label: "Option 3" },
-        ],
-      },
-      {
-        id: "select-value",
-        title: "Select Value",
-        className: "select-component",
-        value: "option3",
-        options: [
-          { value: "option1", label: "Option 1" },
-          { value: "option2", label: "Option 2" },
-          { value: "option3", label: "Option 3" },
-        ],
-      },
-    ];
-  }, []);
-
-  return (
-    <>
-      {selectData.map((data) => (
-        <Select {...data} />
-      ))}
-    </>
-  );
-};
+import { useMemo } from "react";
+import { Select } from "./Select";
+
+export const SelectView = () => {
+  const selectData = useMemo(() => {
+    return [
+      {
+        id: "select",
+        title: "Select",
+        className: "select-component",
+        options: [
+          { value: "option1", label: "Option 1" },
+          { value: "option2", label: "Option 2" },
+          { value: "option3", label: "Option 3" },
+        ],
+      },
+      {
+        id: "select-disabled",
+        title: "Select Disabled",
+        className: "select-component",
+        disabled: true,
+        options: [
+          { value: "option1", label: "Option 1" },
+          { value: "option2", label: "Option 2" },
+          { value: "option3", label: "Option 3" },
+        ],
+      },
+      {
+        id: "select-placeholder",
+        title: "Select Placeholder",
+        className: "select-component",
+        placeholder: "Select an option",
+        options: [
+          { value: "option1", label: "Option 1" },
+          { value: "option2", label: "Option 2" },
+          { value: "option3", label: "Option 3" },
+        ],
+      },
+      {
+        id: "select-default-value",
+        title: "Select Default Value",
+        className: "select-component",
+        defaultValue: "option2",
+        options: [
+          { value: "option1", label: "Option 1" },
+          { value: "option2", label: "Option 2" },
+          { value: "option3", label: "Option 3" },
+        ],
+      },
+      {
+        id: "select-value",
+        title: "Select Value",
+        className: "select-component",
+        value: "option3",
+        options: [
+          { value: "option1", label: "Option 1" },
+          { value: "option2", label: "Option 2" },
+          { value: "option3", label: "Option 3" },
+        ],
+      },
+    ];
+  }, []);
+
+  return (
+    <>
+      {selectData.map((data) => (
+        <Select {...data} />
+      ))}
+    </>
+  );
+};

package/src/select/select.css

@@ -1,51 +1,51 @@
-.select-container {
-  position: relative;
-  &::after,
-  &::before {
-    --size: 0.3rem;
-    content: "";
-    position: absolute;
-    right: 1rem;
-    pointer-events: none;
-  }
-
-  &::before {
-    border-left: var(--size) solid transparent;
-    border-right: var(--size) solid transparent;
-    border-bottom: var(--size) solid black;
-    top: 40%;
-  }
-
-  &::after {
-    border-left: var(--size) solid transparent;
-    border-right: var(--size) solid transparent;
-    border-top: var(--size) solid black;
-    top: 55%;
-  }
-  .select-container-label {
-    font-weight: bold;
-    color: #333;
-    margin-bottom: 2px;
-  }
-  .select-container-select {
-    appearance: none;
-    width: 100%;
-    font-size: 1rem;
-    padding: 0.675em 6em 0.675em 1em;
-    background-color: #fff;
-    border: 1px solid #caced1;
-    border-radius: 0.25rem;
-    color: #000;
-    cursor: pointer;
-    &:disabled {
-      background-color: #e9ecef;
-      color: #6c757d;
-      cursor: not-allowed;
-    }
-    &:focus {
-      border-color: #007bff;
-      outline: none;
-      background-color: #fff;
-    }
-  }
-}
+.select-container {
+  position: relative;
+  &::after,
+  &::before {
+    --size: 0.3rem;
+    content: "";
+    position: absolute;
+    right: 1rem;
+    pointer-events: none;
+  }
+
+  &::before {
+    border-left: var(--size) solid transparent;
+    border-right: var(--size) solid transparent;
+    border-bottom: var(--size) solid black;
+    top: 40%;
+  }
+
+  &::after {
+    border-left: var(--size) solid transparent;
+    border-right: var(--size) solid transparent;
+    border-top: var(--size) solid black;
+    top: 55%;
+  }
+  .select-container-label {
+    font-weight: bold;
+    color: #333;
+    margin-bottom: 2px;
+  }
+  .select-container-select {
+    appearance: none;
+    width: 100%;
+    font-size: 1rem;
+    padding: 0.675em 6em 0.675em 1em;
+    background-color: #fff;
+    border: 1px solid #caced1;
+    border-radius: 0.25rem;
+    color: #000;
+    cursor: pointer;
+    &:disabled {
+      background-color: #e9ecef;
+      color: #6c757d;
+      cursor: not-allowed;
+    }
+    &:focus {
+      border-color: #007bff;
+      outline: none;
+      background-color: #fff;
+    }
+  }
+}

package/src/select/selectOption.interface.ts

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

package/src/sidebar/Sidebar.tsx

@@ -1,111 +1,111 @@
-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;
-}
-
-export const Sidebar = ({
-  open,
-  children,
-  title,
-  onClose,
-  className,
-  id,
-  width,
-  closeOnClickOutside = true,
-  displayOverlay = true,
-}: SidebarProps): JSX.Element => {
-  const [isOpen, setIsOpen] = useState(open || false);
-  const sidebarRef = useRef<HTMLDivElement | null>(null);
-  const rootRef = useRef<HTMLDivElement | 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) => {
-      if (!closeOnClickOutside) return;
-      if (
-        sidebarRef.current &&
-        !sidebarRef.current.contains(event.target as Node)
-      ) {
-        toggleSidebar();
-      }
-    },
-    [toggleSidebar, closeOnClickOutside]
-  );
-
-  useEffect(() => {
-    if (isOpen) {
-      document.addEventListener("mousedown", handleClickOutside);
-    } else {
-      document.removeEventListener("mousedown", handleClickOutside);
-    }
-
-    return () => {
-      document.removeEventListener("mousedown", 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"></div>}
-      <div
-        ref={sidebarRef}
-        style={width ? { width: width } : {}}
-        className={`sidebar ${isOpen ? "open" : "closed"} ${className ?? ""}`}
-      >
-        <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
-  );
-};
+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;
+}
+
+export const Sidebar = ({
+  open,
+  children,
+  title,
+  onClose,
+  className,
+  id,
+  width,
+  closeOnClickOutside = true,
+  displayOverlay = true,
+}: SidebarProps): JSX.Element => {
+  const [isOpen, setIsOpen] = useState(open || false);
+  const sidebarRef = useRef<HTMLDivElement | null>(null);
+  const rootRef = useRef<HTMLDivElement | 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) => {
+      if (!closeOnClickOutside) return;
+      if (
+        sidebarRef.current &&
+        !sidebarRef.current.contains(event.target as Node)
+      ) {
+        toggleSidebar();
+      }
+    },
+    [toggleSidebar, closeOnClickOutside]
+  );
+
+  useEffect(() => {
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    } else {
+      document.removeEventListener("mousedown", handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener("mousedown", 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"></div>}
+      <div
+        ref={sidebarRef}
+        style={width ? { width: width } : {}}
+        className={`sidebar ${isOpen ? "open" : "closed"} ${className ?? ""}`}
+      >
+        <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/src/sidebar/Sidebar.view.tsx

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