kelt-ui-kit-react 1.2.0 → 1.2.1

package/src/index.ts

@@ -1,33 +1,33 @@
-import "bootstrap-icons/font/bootstrap-icons.css";
-import "./index.css";
-export { useIsMobile } from "./_core/hooks/useIsMobile";
-export { ButtonAction } from "./action/ButtonAction";
-export { Badge } from "./badge/Badge";
-export { Button } from "./button/Button";
-export { ButtonActions } from "./button/buttonActions/ButtonActions";
-export { Card } from "./card/Card";
-export { Carousel } from "./carousel/Carousel";
-export { Damier } from "./damier/Damier";
-export { DataTable } from "./dataTable/DataTable";
-export { DatePicker } from "./datePicker/DatePicker";
-export { Expands } from "./expands/Expands";
-export { FilAriane } from "./filAriane/FilAriane";
-export { DynamicForm } from "./form/Form";
-export { TypeInputEnum } from "./form/form.enum";
-export { TextArea } from "./form/textArea/TextArea";
-export { Grid } from "./grid/Grid";
-export { Header } from "./header/Header";
-export { Icon } from "./icon/Icon";
-export { IconSizeEnum } from "./icon/iconSize.enum";
-export { Loader } from "./loader/Loader";
-export { Menus } from "./menus/Menus";
-export { Modal } from "./modal/Modal";
-export { OverlayProvider } from "./overlayPanel/overlay.context";
-export { OverlayPanel } from "./overlayPanel/OverlayPanel";
-export { Quantity } from "./quantity/Quantity";
-export { Search } from "./search/Search";
-export { Select } from "./select/Select";
-export { Sidebar } from "./sidebar/Sidebar";
-export { SidebarData } from "./sidebarData/SidebarData";
-export { useToasterStore } from "./toaster/store/useToasterStore";
-export { Toaster } from "./toaster/Toaster";
+import "bootstrap-icons/font/bootstrap-icons.css";
+import "./index.css";
+export { useIsMobile } from "./_core/hooks/useIsMobile";
+export { ButtonAction } from "./action/ButtonAction";
+export { Badge } from "./badge/Badge";
+export { Button } from "./button/Button";
+export { ButtonActions } from "./button/buttonActions/ButtonActions";
+export { Card } from "./card/Card";
+export { Carousel } from "./carousel/Carousel";
+export { Damier } from "./damier/Damier";
+export { DataTable } from "./dataTable/DataTable";
+export { DatePicker } from "./datePicker/DatePicker";
+export { Expands } from "./expands/Expands";
+export { FilAriane } from "./filAriane/FilAriane";
+export { DynamicForm } from "./form/Form";
+export { TypeInputEnum } from "./form/form.enum";
+export { TextArea } from "./form/textArea/TextArea";
+export { Grid } from "./grid/Grid";
+export { Header } from "./header/Header";
+export { Icon } from "./icon/Icon";
+export { IconSizeEnum } from "./icon/iconSize.enum";
+export { Loader } from "./loader/Loader";
+export { Menus } from "./menus/Menus";
+export { Modal } from "./modal/Modal";
+export { OverlayProvider } from "./overlayPanel/overlay.context";
+export { OverlayPanel } from "./overlayPanel/OverlayPanel";
+export { Quantity } from "./quantity/Quantity";
+export { Search } from "./search/Search";
+export { Select } from "./select/Select";
+export { Sidebar } from "./sidebar/Sidebar";
+export { SidebarData } from "./sidebarData/SidebarData";
+export { useToasterStore } from "./toaster/store/useToasterStore";
+export { Toaster } from "./toaster/Toaster";

package/src/loader/Loader.tsx

@@ -1,37 +1,37 @@
-import { createPortal } from "react-dom";
-import { IconSizeEnum } from "../icon/iconSize.enum";
-import "./loader.css";
-export type LoaderProps = {
-  display: boolean;
-  message?: string;
-  size?: IconSizeEnum;
-  full?: true;
-};
-export const Loader = ({ display, full, message }: LoaderProps) => (
-  <>
-    {display && !full && (
-      <div className={`d-flex flex-column align-items-center`}>
-        {message && <span className="mb-3">{message}</span>}
-        <div className="position-relative">
-          <span className="loader"></span>
-        </div>
-      </div>
-    )}
-
-    {display &&
-      full &&
-      createPortal(
-        <div className="loader-overlay">
-          <div>
-            <div className={`d-flex flex-column align-items-center`}>
-              {message && <span className="mb-3">{message}</span>}
-              <div className="position-relative">
-                <span className="loader"></span>
-              </div>
-            </div>
-          </div>
-        </div>,
-        document.body
-      )}
-  </>
-);
+import { createPortal } from "react-dom";
+import { IconSizeEnum } from "../icon/iconSize.enum";
+import "./loader.css";
+export type LoaderProps = {
+  display: boolean;
+  message?: string;
+  size?: IconSizeEnum;
+  full?: true;
+};
+export const Loader = ({ display, full, message }: LoaderProps) => (
+  <>
+    {display && !full && (
+      <div className={`d-flex flex-column align-items-center`}>
+        {message && <span className="mb-3">{message}</span>}
+        <div className="position-relative">
+          <span className="loader"></span>
+        </div>
+      </div>
+    )}
+
+    {display &&
+      full &&
+      createPortal(
+        <div className="loader-overlay">
+          <div>
+            <div className={`d-flex flex-column align-items-center`}>
+              {message && <span className="mb-3">{message}</span>}
+              <div className="position-relative">
+                <span className="loader"></span>
+              </div>
+            </div>
+          </div>
+        </div>,
+        document.body
+      )}
+  </>
+);

package/src/loader/Loader.view.tsx

@@ -1,20 +1,20 @@
-import { useState } from "react";
-import { Button } from "../button/Button";
-import { IconSizeEnum } from "../icon/iconSize.enum";
-import { Loader } from "./Loader";
-
-export const LoaderView = () => {
-  const [display, setDisplay] = useState(false);
-
-  return (
-    <>
-      <Button title={"loader-overlay"} onClick={() => setDisplay(!display)} />
-      <Loader
-        size={IconSizeEnum.EXTRA_LARGE}
-        display={!display}
-        message={"Loading..."}
-      />
-      <Loader display={display} message={"Loading..."} full={true} />
-    </>
-  );
-};
+import { useState } from "react";
+import { Button } from "../button/Button";
+import { IconSizeEnum } from "../icon/iconSize.enum";
+import { Loader } from "./Loader";
+
+export const LoaderView = () => {
+  const [display, setDisplay] = useState(false);
+
+  return (
+    <>
+      <Button title={"loader-overlay"} onClick={() => setDisplay(!display)} />
+      <Loader
+        size={IconSizeEnum.EXTRA_LARGE}
+        display={!display}
+        message={"Loading..."}
+      />
+      <Loader display={display} message={"Loading..."} full={true} />
+    </>
+  );
+};

package/src/loader/loader.css

@@ -1,30 +1,30 @@
-.loader {
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
-  display: inline-block;
-  border-top: 3px solid var(--primary-color);
-  border-right: 3px solid transparent;
-  -webkit-animation: rotation 1s linear infinite;
-  animation: rotation 1s linear infinite;
-}
-.loader-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 1000;
-}
-@keyframes rotation {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
+.loader {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: inline-block;
+  border-top: 3px solid var(--primary-color);
+  border-right: 3px solid transparent;
+  -webkit-animation: rotation 1s linear infinite;
+  animation: rotation 1s linear infinite;
+}
+.loader-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/src/main.tsx

@@ -1,10 +1,10 @@
-import "bootstrap-icons/font/bootstrap-icons.css";
-import React from "react";
-import ReactDOM from "react-dom/client";
-import App from "./App";
-import "./index.css";
-ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
+import "bootstrap-icons/font/bootstrap-icons.css";
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import "./index.css";
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

package/src/menus/Menus.tsx

@@ -1,42 +1,42 @@
-import { useCallback, useState } from "react";
-import { Menu } from "./menu/Menu";
-import { MenuInterface } from "./menu/menu.interface";
-import "./menus.css";
-
-export type ExpandProps = {
-  items: MenuInterface[];
-  className?: string;
-};
-
-export const Menus = (props: ExpandProps) => {
-  const [currentItem, setCurrentItem] = useState<MenuInterface | null>(null);
-
-  const onChange = useCallback((item: MenuInterface) => {
-    setCurrentItem(item);
-  }, []);
-
-  const renderMenuItems = (items: MenuInterface[]) => (
-    <ul>
-      {items.map((item) => (
-        <li key={item.id}>
-          <Menu
-            item={item}
-            onChange={onChange}
-            active={currentItem?.id === item.id}
-          />
-          {item.subMenu && item.subMenu.length > 0 && (
-            <div className="ml-3 mt-1 submenu">
-              {renderMenuItems(item.subMenu)}
-            </div>
-          )}
-        </li>
-      ))}
-    </ul>
-  );
-
-  return (
-    <div className={`menu ${props.className || ""}`}>
-      {renderMenuItems(props.items)}
-    </div>
-  );
-};
+import { useCallback, useState } from "react";
+import { Menu } from "./menu/Menu";
+import { MenuInterface } from "./menu/menu.interface";
+import "./menus.css";
+
+export type ExpandProps = {
+  items: MenuInterface[];
+  className?: string;
+};
+
+export const Menus = (props: ExpandProps) => {
+  const [currentItem, setCurrentItem] = useState<MenuInterface | null>(null);
+
+  const onChange = useCallback((item: MenuInterface) => {
+    setCurrentItem(item);
+  }, []);
+
+  const renderMenuItems = (items: MenuInterface[]) => (
+    <ul>
+      {items.map((item) => (
+        <li key={item.id}>
+          <Menu
+            item={item}
+            onChange={onChange}
+            active={currentItem?.id === item.id}
+          />
+          {item.subMenu && item.subMenu.length > 0 && (
+            <div className="ml-3 mt-1 submenu">
+              {renderMenuItems(item.subMenu)}
+            </div>
+          )}
+        </li>
+      ))}
+    </ul>
+  );
+
+  return (
+    <div className={`menu ${props.className || ""}`}>
+      {renderMenuItems(props.items)}
+    </div>
+  );
+};

package/src/menus/Menus.view.tsx

@@ -1,39 +1,39 @@
-import { NavLink } from "react-router-dom";
-import { MenuInterface } from "./menu/menu.interface";
-import { Menus } from "./Menus";
-import { Button } from "../button/Button";
-import { useCallback } from "react";
-
-export const MenusView = (): JSX.Element => {
-  const buttonAction = useCallback((e: React.MouseEvent) => {
-    console.log("Button clicked", e);
-  }, []);
-  const mockItems: MenuInterface[] = [
-    {
-      id: 1,
-      name: "Menu 1",
-      children: "Menu 1",
-      active: true,
-      subMenu : [{
-          id: 1,
-        name: "Menu 1",
-        children: <NavLink to="/expands">Menu 1</NavLink>,
-        active: true,
-      }]
-    },
-    {
-      id: 2,
-      name: "Menu 2",
-      children: <Button onClick={buttonAction} title={"deconnexion"} />,
-      active: false,
-    },
-    {
-      id: 3,
-      children: <NavLink to="/expands">Menu 1</NavLink>,
-      name: "Menu 3",
-      active: false,
-    },
-  ];
-
-  return <Menus items={mockItems} />;
-};
+import { NavLink } from "react-router-dom";
+import { MenuInterface } from "./menu/menu.interface";
+import { Menus } from "./Menus";
+import { Button } from "../button/Button";
+import { useCallback } from "react";
+
+export const MenusView = (): JSX.Element => {
+  const buttonAction = useCallback((e: React.MouseEvent) => {
+    console.log("Button clicked", e);
+  }, []);
+  const mockItems: MenuInterface[] = [
+    {
+      id: 1,
+      name: "Menu 1",
+      children: "Menu 1",
+      active: true,
+      subMenu : [{
+          id: 1,
+        name: "Menu 1",
+        children: <NavLink to="/expands">Menu 1</NavLink>,
+        active: true,
+      }]
+    },
+    {
+      id: 2,
+      name: "Menu 2",
+      children: <Button onClick={buttonAction} title={"deconnexion"} />,
+      active: false,
+    },
+    {
+      id: 3,
+      children: <NavLink to="/expands">Menu 1</NavLink>,
+      name: "Menu 3",
+      active: false,
+    },
+  ];
+
+  return <Menus items={mockItems} />;
+};

package/src/menus/menu/Menu.tsx

@@ -1,17 +1,17 @@
-import { MenuInterface } from "./menu.interface";
-
-export type MenuProps = {
-  active: boolean;
-  item: MenuInterface;
-  onChange: (item: MenuInterface) => void;
-};
-export const Menu = (props: MenuProps): JSX.Element => {
-  return (
-    <div
-      onClick={() => props.onChange(props.item)}
-      className={props.active ? "expand expand--active" : "expand"}
-    >
-      {props.item.children}
-    </div>
-  );
-};
+import { MenuInterface } from "./menu.interface";
+
+export type MenuProps = {
+  active: boolean;
+  item: MenuInterface;
+  onChange: (item: MenuInterface) => void;
+};
+export const Menu = (props: MenuProps): JSX.Element => {
+  return (
+    <div
+      onClick={() => props.onChange(props.item)}
+      className={props.active ? "expand expand--active" : "expand"}
+    >
+      {props.item.children}
+    </div>
+  );
+};

package/src/menus/menu/menu.interface.tsx

@@ -1,9 +1,9 @@
-export interface MenuInterface {
-  id?: number;
-  name: string;
-  icon?: string;
-  active?: boolean;
-  disabled?: boolean;
-  children?: React.ReactNode;
-  subMenu?: MenuInterface[];
-}
+export interface MenuInterface {
+  id?: number;
+  name: string;
+  icon?: string;
+  active?: boolean;
+  disabled?: boolean;
+  children?: React.ReactNode;
+  subMenu?: MenuInterface[];
+}

package/src/menus/menus.css

@@ -1,47 +1,47 @@
-.menu {
-  width: 200px;
-  padding: 2rem;
-  .submenu{
-    li{
-      a{
-        font-size : 0.9rem;
-      }
-    }
-  }
-  ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    justify-content: center;
-
-    li {
-      button {
-        background: transparent;
-        color: #000;
-        font-weight: 300;
-        padding: 0px;
-        border-radius: 0px;
-        min-width: auto;
-        margin: 0;
-        justify-content: normal;
-
-        &:hover {
-          color: #f00;
-        }
-      }
-
-      a {
-        text-decoration: none;
-        color: #000;
-        font-weight: 300;
-
-        &:hover {
-          color: #f00;
-        }
-      }
-    }
-  }
-}
+.menu {
+  width: 200px;
+  padding: 2rem;
+  .submenu{
+    li{
+      a{
+        font-size : 0.9rem;
+      }
+    }
+  }
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    li {
+      button {
+        background: transparent;
+        color: #000;
+        font-weight: 300;
+        padding: 0px;
+        border-radius: 0px;
+        min-width: auto;
+        margin: 0;
+        justify-content: normal;
+
+        &:hover {
+          color: #f00;
+        }
+      }
+
+      a {
+        text-decoration: none;
+        color: #000;
+        font-weight: 300;
+
+        &:hover {
+          color: #f00;
+        }
+      }
+    }
+  }
+}