kelt-ui-kit-react 1.2.0 → 1.2.1

package/src/App.menu.tsx

@@ -1,209 +1,209 @@
-import { NavLink } from "react-router-dom";
-import { ActionView } from "./action/Action.view";
-import { BadgeView } from "./badge/Badge.view";
-import { ButtonView } from "./button/Button.view";
-import { CardView } from "./card/Card.view";
-import { CarouselView } from "./carousel/Carousel.view";
-import { DamierView } from "./damier/Damier.view";
-import { DataTableView } from "./dataTable/DataTable.view";
-import { DatePickerView } from "./datePicker/DatePicker.view";
-import { ExpandsView } from "./expands/Expands.view";
-import { FilArianeView } from "./filAriane/FilAriane.view";
-import { FormView } from "./form/Form.view";
-import { TextAreaView } from "./form/textArea/TextArea.view";
-import { GridView } from "./grid/Grid.view";
-import { HeaderView } from "./header/Header.view";
-import { IconsView } from "./icon/Icons.view";
-import { LoaderView } from "./loader/Loader.view";
-import { Menus } from "./menus/Menus";
-import { MenusView } from "./menus/Menus.view";
-import { ModalView } from "./modal/Modal.view";
-import { OverlayPanelView } from "./overlayPanel/OverlayPanel.view";
-import { SearchView } from "./search/Search.view";
-import { SelectView } from "./select/Select.view";
-import { SidebarView } from "./sidebar/Sidebar.view";
-import { SidebarDataView } from "./sidebarData/SidebarData.view";
-import { ToasterView } from "./toaster/Toaster.view";
-export type MenuProps = {
-  id: number;
-  name: string;
-  children: JSX.Element;
-  link: string;
-  element: JSX.Element;
-};
-export const MenuList: MenuProps[] = [
-  {
-    id: 1,
-    name: "Expands",
-    link: "/expands",
-    children: <NavLink to="/expands">Expands</NavLink>,
-    element: <ExpandsView />,
-  },
-  {
-    id: 2,
-    name: "Menus",
-    link: "/menus",
-    children: <NavLink to="/menus">Menus</NavLink>,
-    element: <MenusView />,
-  },
-  {
-    id: 3,
-    name: "Buttons",
-    link: "/buttons",
-    children: <NavLink to="/buttons">Buttons</NavLink>,
-    element: <ButtonView />,
-  },
-  {
-    id: 4,
-    name: "Toasters",
-    link: "/toasters",
-    children: <NavLink to="/toasters">Toasters</NavLink>,
-    element: <ToasterView />,
-  },
-  {
-    id: 5,
-    name: "Form",
-    link: "/form",
-    children: <NavLink to="/form">Form</NavLink>,
-    element: <FormView />,
-  },
-  {
-    id: 6,
-    name: "Icons",
-    link: "/icons",
-    children: <NavLink to="/icons">Icons</NavLink>,
-    element: <IconsView />,
-  },
-  {
-    id: 7,
-    name: "Header",
-    link: "/headers",
-    children: <NavLink to="/headers">Header</NavLink>,
-    element: <HeaderView />,
-  },
-  {
-    id: 8,
-    name: "Sidebar",
-    link: "/sidebar",
-    children: <NavLink to="/sidebar">Sidebar</NavLink>,
-    element: <SidebarView />,
-  },
-
-  {
-    id: 9,
-    name: "Grid",
-    link: "/grid",
-    children: <NavLink to="/grid">Grid</NavLink>,
-    element: <GridView />,
-  },
-  {
-    id: 10,
-    name: "Overlay Panel",
-    link: "/overlay",
-    children: <NavLink to="/overlay">Overlay Panel</NavLink>,
-    element: <OverlayPanelView />,
-  },
-  {
-    id: 11,
-    name: "Data search",
-    link: "/search",
-    children: <NavLink to="/search">Data search</NavLink>,
-    element: <SearchView />,
-  },
-
-  {
-    id: 12,
-    name: "Card",
-    link: "/card",
-    children: <NavLink to="/card">Card</NavLink>,
-    element: <CardView />,
-  },
-  {
-    id: 13,
-    name: "Sidebar Data",
-    link: "/sidebar-data",
-    children: <NavLink to="/sidebar-data">Sidebar Data</NavLink>,
-    element: <SidebarDataView />,
-  },
-  {
-    id: 14,
-    name: "Damier",
-    link: "/damier",
-    children: <NavLink to="/damier">Damier</NavLink>,
-    element: <DamierView />,
-  },
-  {
-    id: 15,
-    name: "Fil Ariane",
-    link: "/fil-ariane",
-    children: <NavLink to="/fil-ariane">Fil Ariane</NavLink>,
-    element: <FilArianeView />,
-  },
-  {
-    id: 16,
-    name: "Loader",
-    link: "/loader",
-    children: <NavLink to="/loader">Loader</NavLink>,
-    element: <LoaderView />,
-  },
-  {
-    id: 17,
-    name: "Carousel",
-    link: "/carousel",
-    children: <NavLink to="/carousel">Carousel</NavLink>,
-    element: <CarouselView />,
-  },
-  {
-    id: 18,
-    name: "Action",
-    link: "/action",
-    children: <NavLink to="/action">Action</NavLink>,
-    element: <ActionView />,
-  },
-  {
-    id: 19,
-    name: "Modal",
-    link: "/modal",
-    children: <NavLink to="/modal">Modal</NavLink>,
-    element: <ModalView />,
-  },
-  {
-    id: 20,
-    name: "Badge",
-    link: "/badge",
-    children: <NavLink to="/badge">Badge</NavLink>,
-    element: <BadgeView />,
-  },
-  {
-    id: 21,
-    name: "Data table",
-    link: "/data-table",
-    children: <NavLink to="/data-table">Data table</NavLink>,
-    element: <DataTableView />,
-  },
-  {
-    id: 22,
-    name: "Select",
-    link: "/select",
-    children: <NavLink to="/select">Select</NavLink>,
-    element: <SelectView />,
-  },
-  {
-    id: 23,
-    name: "TextArea",
-    link: "/text-area",
-    children: <NavLink to="/text-area">Text</NavLink>,
-    element: <TextAreaView />,
-  },
-  {
-    id: 24,
-    name: "Date picker",
-    link: "/date-picker",
-    children: <NavLink to="/date-picker">Date picker</NavLink>,
-    element: <DatePickerView />,
-  },
-];
-
-export const AppMenu = (): JSX.Element => {
-  return <Menus items={MenuList} className="main-layout-menu" />;
-};
+import { NavLink } from "react-router-dom";
+import { ActionView } from "./action/Action.view";
+import { BadgeView } from "./badge/Badge.view";
+import { ButtonView } from "./button/Button.view";
+import { CardView } from "./card/Card.view";
+import { CarouselView } from "./carousel/Carousel.view";
+import { DamierView } from "./damier/Damier.view";
+import { DataTableView } from "./dataTable/DataTable.view";
+import { DatePickerView } from "./datePicker/DatePicker.view";
+import { ExpandsView } from "./expands/Expands.view";
+import { FilArianeView } from "./filAriane/FilAriane.view";
+import { FormView } from "./form/Form.view";
+import { TextAreaView } from "./form/textArea/TextArea.view";
+import { GridView } from "./grid/Grid.view";
+import { HeaderView } from "./header/Header.view";
+import { IconsView } from "./icon/Icons.view";
+import { LoaderView } from "./loader/Loader.view";
+import { Menus } from "./menus/Menus";
+import { MenusView } from "./menus/Menus.view";
+import { ModalView } from "./modal/Modal.view";
+import { OverlayPanelView } from "./overlayPanel/OverlayPanel.view";
+import { SearchView } from "./search/Search.view";
+import { SelectView } from "./select/Select.view";
+import { SidebarView } from "./sidebar/Sidebar.view";
+import { SidebarDataView } from "./sidebarData/SidebarData.view";
+import { ToasterView } from "./toaster/Toaster.view";
+export type MenuProps = {
+  id: number;
+  name: string;
+  children: JSX.Element;
+  link: string;
+  element: JSX.Element;
+};
+export const MenuList: MenuProps[] = [
+  {
+    id: 1,
+    name: "Expands",
+    link: "/expands",
+    children: <NavLink to="/expands">Expands</NavLink>,
+    element: <ExpandsView />,
+  },
+  {
+    id: 2,
+    name: "Menus",
+    link: "/menus",
+    children: <NavLink to="/menus">Menus</NavLink>,
+    element: <MenusView />,
+  },
+  {
+    id: 3,
+    name: "Buttons",
+    link: "/buttons",
+    children: <NavLink to="/buttons">Buttons</NavLink>,
+    element: <ButtonView />,
+  },
+  {
+    id: 4,
+    name: "Toasters",
+    link: "/toasters",
+    children: <NavLink to="/toasters">Toasters</NavLink>,
+    element: <ToasterView />,
+  },
+  {
+    id: 5,
+    name: "Form",
+    link: "/form",
+    children: <NavLink to="/form">Form</NavLink>,
+    element: <FormView />,
+  },
+  {
+    id: 6,
+    name: "Icons",
+    link: "/icons",
+    children: <NavLink to="/icons">Icons</NavLink>,
+    element: <IconsView />,
+  },
+  {
+    id: 7,
+    name: "Header",
+    link: "/headers",
+    children: <NavLink to="/headers">Header</NavLink>,
+    element: <HeaderView />,
+  },
+  {
+    id: 8,
+    name: "Sidebar",
+    link: "/sidebar",
+    children: <NavLink to="/sidebar">Sidebar</NavLink>,
+    element: <SidebarView />,
+  },
+
+  {
+    id: 9,
+    name: "Grid",
+    link: "/grid",
+    children: <NavLink to="/grid">Grid</NavLink>,
+    element: <GridView />,
+  },
+  {
+    id: 10,
+    name: "Overlay Panel",
+    link: "/overlay",
+    children: <NavLink to="/overlay">Overlay Panel</NavLink>,
+    element: <OverlayPanelView />,
+  },
+  {
+    id: 11,
+    name: "Data search",
+    link: "/search",
+    children: <NavLink to="/search">Data search</NavLink>,
+    element: <SearchView />,
+  },
+
+  {
+    id: 12,
+    name: "Card",
+    link: "/card",
+    children: <NavLink to="/card">Card</NavLink>,
+    element: <CardView />,
+  },
+  {
+    id: 13,
+    name: "Sidebar Data",
+    link: "/sidebar-data",
+    children: <NavLink to="/sidebar-data">Sidebar Data</NavLink>,
+    element: <SidebarDataView />,
+  },
+  {
+    id: 14,
+    name: "Damier",
+    link: "/damier",
+    children: <NavLink to="/damier">Damier</NavLink>,
+    element: <DamierView />,
+  },
+  {
+    id: 15,
+    name: "Fil Ariane",
+    link: "/fil-ariane",
+    children: <NavLink to="/fil-ariane">Fil Ariane</NavLink>,
+    element: <FilArianeView />,
+  },
+  {
+    id: 16,
+    name: "Loader",
+    link: "/loader",
+    children: <NavLink to="/loader">Loader</NavLink>,
+    element: <LoaderView />,
+  },
+  {
+    id: 17,
+    name: "Carousel",
+    link: "/carousel",
+    children: <NavLink to="/carousel">Carousel</NavLink>,
+    element: <CarouselView />,
+  },
+  {
+    id: 18,
+    name: "Action",
+    link: "/action",
+    children: <NavLink to="/action">Action</NavLink>,
+    element: <ActionView />,
+  },
+  {
+    id: 19,
+    name: "Modal",
+    link: "/modal",
+    children: <NavLink to="/modal">Modal</NavLink>,
+    element: <ModalView />,
+  },
+  {
+    id: 20,
+    name: "Badge",
+    link: "/badge",
+    children: <NavLink to="/badge">Badge</NavLink>,
+    element: <BadgeView />,
+  },
+  {
+    id: 21,
+    name: "Data table",
+    link: "/data-table",
+    children: <NavLink to="/data-table">Data table</NavLink>,
+    element: <DataTableView />,
+  },
+  {
+    id: 22,
+    name: "Select",
+    link: "/select",
+    children: <NavLink to="/select">Select</NavLink>,
+    element: <SelectView />,
+  },
+  {
+    id: 23,
+    name: "TextArea",
+    link: "/text-area",
+    children: <NavLink to="/text-area">Text</NavLink>,
+    element: <TextAreaView />,
+  },
+  {
+    id: 24,
+    name: "Date picker",
+    link: "/date-picker",
+    children: <NavLink to="/date-picker">Date picker</NavLink>,
+    element: <DatePickerView />,
+  },
+];
+
+export const AppMenu = (): JSX.Element => {
+  return <Menus items={MenuList} className="main-layout-menu" />;
+};

package/src/App.routes.tsx

@@ -1,16 +1,16 @@
-import { Route, Routes } from "react-router-dom";
-import { MenuList } from "./App.menu";
-import { Home } from "./home/Home";
-import { NotFound } from "./notFound/NotFound";
-
-export const AppRoutes = (): JSX.Element => {
-  return (
-    <Routes>
-      {MenuList.map((menu) => (
-        <Route key={menu.id} path={menu.link} element={menu.element} />
-      ))}
-      <Route path="/" element={<Home />} />
-      <Route path="*" element={<NotFound />} />
-    </Routes>
-  );
-};
+import { Route, Routes } from "react-router-dom";
+import { MenuList } from "./App.menu";
+import { Home } from "./home/Home";
+import { NotFound } from "./notFound/NotFound";
+
+export const AppRoutes = (): JSX.Element => {
+  return (
+    <Routes>
+      {MenuList.map((menu) => (
+        <Route key={menu.id} path={menu.link} element={menu.element} />
+      ))}
+      <Route path="/" element={<Home />} />
+      <Route path="*" element={<NotFound />} />
+    </Routes>
+  );
+};

package/src/App.tsx

@@ -1,28 +1,28 @@
-import { StrictMode } from "react";
-import { BrowserRouter as Router } from "react-router-dom";
-import "./App.css";
-
-import { AppMenu } from "./App.menu";
-import { AppRoutes } from "./App.routes";
-import { Header } from "./header/Header";
-import { OverlayProvider } from "./overlayPanel/overlay.context";
-
-const App: React.FC = () => (
-  <StrictMode>
-    <OverlayProvider>
-      <Router>
-        <div className="main-layout">
-          <Header />
-          <div className="d-flex h-100">
-            <AppMenu />
-            <div className="main-layout-content">
-              <AppRoutes />
-            </div>
-          </div>
-        </div>
-      </Router>
-    </OverlayProvider>
-  </StrictMode>
-);
-
-export default App;
+import { StrictMode } from "react";
+import { BrowserRouter as Router } from "react-router-dom";
+import "./App.css";
+
+import { AppMenu } from "./App.menu";
+import { AppRoutes } from "./App.routes";
+import { Header } from "./header/Header";
+import { OverlayProvider } from "./overlayPanel/overlay.context";
+
+const App: React.FC = () => (
+  <StrictMode>
+    <OverlayProvider>
+      <Router>
+        <div className="main-layout">
+          <Header />
+          <div className="d-flex h-100">
+            <AppMenu />
+            <div className="main-layout-content">
+              <AppRoutes />
+            </div>
+          </div>
+        </div>
+      </Router>
+    </OverlayProvider>
+  </StrictMode>
+);
+
+export default App;

package/src/_core/hooks/ImageChecker.tsx

@@ -1,26 +1,26 @@
-import React, { useEffect, useState } from "react";
-
-interface ImageCheckerProps {
-  imageUrl: string;
-}
-
-export const ImageChecker: React.FC<ImageCheckerProps> = ({ imageUrl }) => {
-  const [imageExists, setImageExists] = useState<boolean | null>(null);
-  const testImg = async (path: string) => {
-    try {
-      const response = await fetch(path, { method: "HEAD" });
-      console.log(response);
-      return response.ok;
-    } catch {
-      return false;
-    }
-  };
-  useEffect(() => {
-    testImg(imageUrl).then((res) => setImageExists(res));
-  }, [imageUrl]);
-
-  if (imageExists === null) return <p>Vérification en cours...</p>;
-  if (!imageExists) return <p>L'image n'existe pas.</p>;
-
-  return <img src={imageUrl} alt="Vérifiée" />;
-};
+import React, { useEffect, useState } from "react";
+
+interface ImageCheckerProps {
+  imageUrl: string;
+}
+
+export const ImageChecker: React.FC<ImageCheckerProps> = ({ imageUrl }) => {
+  const [imageExists, setImageExists] = useState<boolean | null>(null);
+  const testImg = async (path: string) => {
+    try {
+      const response = await fetch(path, { method: "HEAD" });
+      console.log(response);
+      return response.ok;
+    } catch {
+      return false;
+    }
+  };
+  useEffect(() => {
+    testImg(imageUrl).then((res) => setImageExists(res));
+  }, [imageUrl]);
+
+  if (imageExists === null) return <p>Vérification en cours...</p>;
+  if (!imageExists) return <p>L'image n'existe pas.</p>;
+
+  return <img src={imageUrl} alt="Vérifiée" />;
+};

package/src/_core/hooks/useIsMobile.ts

@@ -1,18 +1,18 @@
-import { useEffect, useState } from "react";
-
-export const useIsMobile = (maxWidth: number = 768) => {
-  const [isMobile, setIsMobile] = useState(
-    typeof window !== "undefined" ? window.innerWidth <= maxWidth : false
-  );
-
-  useEffect(() => {
-    const handleResize = () => {
-      setIsMobile(window.innerWidth <= maxWidth);
-    };
-
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
-  }, [maxWidth]);
-
-  return isMobile;
-};
+import { useEffect, useState } from "react";
+
+export const useIsMobile = (maxWidth: number = 768) => {
+  const [isMobile, setIsMobile] = useState(
+    typeof window !== "undefined" ? window.innerWidth <= maxWidth : false
+  );
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth <= maxWidth);
+    };
+
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [maxWidth]);
+
+  return isMobile;
+};

package/src/action/Action.view.tsx

@@ -1,21 +1,21 @@
-import { ButtonAction } from "./ButtonAction";
-
-export const ActionView = (): JSX.Element => {
-  return (
-    <div className="d-flex">
-      <ButtonAction
-        className="mr-2"
-        onClick={() => console.log("Envoyer")}
-        title="Envoyer"
-        classIcon="bi-send"
-        badge={{
-          className: "badge--primary",
-          title: "Badge",
-          sizeIcon: undefined,
-          classIcon: "bi-check-circle",
-          onClick: () => console.log("Badge clicked"),
-        }}
-      />
-    </div>
-  );
-};
+import { ButtonAction } from "./ButtonAction";
+
+export const ActionView = (): JSX.Element => {
+  return (
+    <div className="d-flex">
+      <ButtonAction
+        className="mr-2"
+        onClick={() => console.log("Envoyer")}
+        title="Envoyer"
+        classIcon="bi-send"
+        badge={{
+          className: "badge--primary",
+          title: "Badge",
+          sizeIcon: undefined,
+          classIcon: "bi-check-circle",
+          onClick: () => console.log("Badge clicked"),
+        }}
+      />
+    </div>
+  );
+};