kelt-ui-kit-react 2.0.8 → 2.1.0

package/src/App.menu.tsx

@@ -1,257 +1,277 @@
-import { NavLink } from "react-router-dom";
-import { ActionView } from "./action/Action.view";
-import { AddressSearchView } from "./addressSearch/AddressSearch.view";
-import { BadgeView } from "./badge/Badge.view";
-import { ButtonView } from "./button/Button.view";
-import { ButtonFileView } from "./button/buttonFile/ButtonFile.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 { InputNumberView } from "./form/inputNumber/InputNumber.view";
-import { InputPriceView } from "./form/inputPrice/InputPrice.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 { MessageView } from "./message/Message.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 { TabsView } from "./tabs/Tabs.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 />,
-  },
-  {
-    id: 25,
-    name: "Tabs",
-    link: "/tabs",
-    children: <NavLink to="/tabs">Tabs</NavLink>,
-    element: <TabsView />,
-  },
-  {
-    id: 26,
-    name: "Messages",
-    link: "/messages",
-    children: <NavLink to="/messages">Messages</NavLink>,
-    element: <MessageView />,
-  },
-  {
-    id: 27,
-    name: "Input Number",
-    link: "/input-number",
-    children: <NavLink to="/input-number">Input Number</NavLink>,
-    element: <InputNumberView />,
-  },
-  {
-    id: 28,
-    name: "Input Price",
-    link: "/input-price",
-    children: <NavLink to="/input-price">Input Price</NavLink>,
-    element: <InputPriceView />,
-  },
-  {
-    id: 29,
-    name: "Button File",
-    link: "/button-file",
-    children: <NavLink to="/button-file">Button File</NavLink>,
-    element: <ButtonFileView />,
-  },
-  {
-    id: 30,
-    name: "Address search",
-    link: "/address-search",
-    children: <NavLink to="/address-search">Address search</NavLink>,
-    element: <AddressSearchView />,
-  },
-];
-
-export const AppMenu = (): JSX.Element => {
-  return <Menus items={MenuList} className="main-layout-menu" />;
-};
+import { NavLink } from "react-router-dom";
+import { useState } from "react";
+import { catalog, categories, matchesSearch } from "./docs/catalog";
+import { ActionView } from "./action/Action.view";
+import { AddressSearchView } from "./addressSearch/AddressSearch.view";
+import { BadgeView } from "./badge/Badge.view";
+import { ButtonView } from "./button/Button.view";
+import { ButtonFileView } from "./button/buttonFile/ButtonFile.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 { InputNumberView } from "./form/inputNumber/InputNumber.view";
+import { InputPriceView } from "./form/inputPrice/InputPrice.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 { MenusView } from "./menus/Menus.view";
+import { MessageView } from "./message/Message.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 { TabsView } from "./tabs/Tabs.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 />,
+  },
+  {
+    id: 25,
+    name: "Tabs",
+    link: "/tabs",
+    children: <NavLink to="/tabs">Tabs</NavLink>,
+    element: <TabsView />,
+  },
+  {
+    id: 26,
+    name: "Messages",
+    link: "/messages",
+    children: <NavLink to="/messages">Messages</NavLink>,
+    element: <MessageView />,
+  },
+  {
+    id: 27,
+    name: "Input Number",
+    link: "/input-number",
+    children: <NavLink to="/input-number">Input Number</NavLink>,
+    element: <InputNumberView />,
+  },
+  {
+    id: 28,
+    name: "Input Price",
+    link: "/input-price",
+    children: <NavLink to="/input-price">Input Price</NavLink>,
+    element: <InputPriceView />,
+  },
+  {
+    id: 29,
+    name: "Button File",
+    link: "/button-file",
+    children: <NavLink to="/button-file">Button File</NavLink>,
+    element: <ButtonFileView />,
+  },
+  {
+    id: 30,
+    name: "Address search",
+    link: "/address-search",
+    children: <NavLink to="/address-search">Address search</NavLink>,
+    element: <AddressSearchView />,
+  },
+];
+
+export const AppMenu = (): JSX.Element => {
+  const [search, setSearch] = useState("");
+  const filtered = MenuList.filter((menu) => matchesSearch(`${menu.name} ${catalog[menu.link].description}`, search));
+  return (
+    <aside className="docs-sidebar">
+      <NavLink to="/" className="docs-brand"><span className="docs-brand-mark">k.</span><span>Kelt UI<span className="docs-brand-subtitle">Component explorer</span></span></NavLink>
+      <label className="docs-search"><i className="bi bi-search" aria-hidden="true" /><span className="docs-sr-only">Rechercher un composant</span><input placeholder="Rechercher..." value={search} onChange={(event) => setSearch(event.target.value)} /></label>
+      <nav aria-label="Documentation du kit">
+        <NavLink to="/" end className="docs-overview-link"><i className="bi bi-house" aria-hidden="true" />Vue d'ensemble</NavLink>
+        {categories.map((category) => {
+          const items = filtered.filter((menu) => catalog[menu.link].category === category).sort((a, b) => a.name.localeCompare(b.name));
+          return items.length > 0 && <div className="docs-nav-group" key={category}>
+            <h2>{category}<span>{items.length}</span></h2>
+            {items.map((menu) => <NavLink key={menu.id} to={menu.link}><i className={`bi bi-${catalog[menu.link].icon}`} aria-hidden="true" /><span>{menu.name}</span><i className="bi bi-chevron-right docs-nav-arrow" aria-hidden="true" /></NavLink>)}
+          </div>;
+        })}
+        {filtered.length === 0 && <p className="docs-empty" role="status">Aucun composant trouvé.</p>}
+      </nav>
+      <div className="docs-sidebar-footer"><span className="docs-status-dot" />API typée · Démos interactives</div>
+    </aside>
+  );
+};

package/src/App.routes.tsx

@@ -1,16 +1,21 @@
-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";
+import { ComponentDocs } from "./docs/ComponentDocs";
+
+export const AppRoutes = (): JSX.Element => {
+  return (
+    <Routes>
+      {MenuList.map((menu) => (
+        <Route key={menu.id} path={menu.link} element={
+          <ComponentDocs key={menu.link} path={menu.link} name={menu.name}>
+            {menu.element}
+          </ComponentDocs>
+        } />
+      ))}
+      <Route path="/" element={<Home />} />
+      <Route path="*" element={<NotFound />} />
+    </Routes>
+  );
+};

package/src/App.tsx

@@ -1,30 +1,31 @@
-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";
-import { Toaster } from "./toaster/Toaster";
-
-const App: React.FC = () => (
-  <StrictMode>
-    <OverlayProvider>
-      <Router>
-        <div className="main-layout">
-          <Toaster />
-          <Header showBackNavigation={true} />
-          <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 { Link } from "react-router-dom";
+import { OverlayProvider } from "./overlayPanel/overlay.context";
+import { Toaster } from "./toaster/Toaster";
+
+const App: React.FC = () => (
+  <StrictMode>
+    <OverlayProvider>
+      <Router>
+        <div className="docs-app">
+          <Toaster />
+          <a className="docs-skip-link" href="#docs-content">Aller au contenu</a>
+          <AppMenu />
+          <div className="docs-main">
+            <header className="docs-topbar"><span>DESIGN SYSTEM <span className="docs-topbar-divider">/</span> DOCUMENTATION</span><Link to="/buttons"><i className="bi bi-code-square" aria-hidden="true" />Explorer les composants<i className="bi bi-arrow-up-right" aria-hidden="true" /></Link></header>
+            <main id="docs-content" className="docs-content" tabIndex={-1}>
+              <AppRoutes />
+            </main>
+          </div>
+        </div>
+      </Router>
+    </OverlayProvider>
+  </StrictMode>
+);
+
+export default App;