@geo2france/api-dashboard 1.21.0 → 1.22.0

package/dist/components/Layout/DashboardApp.d.ts

@@ -1,12 +1,24 @@
 import { ThemeConfig } from "antd";
 import { Partner, RouteConfig } from "../../types";
+import { ReactElement, ReactNode } from "react";
+export declare const default_theme: ThemeConfig;
 interface AppContextProps {
     title?: string;
     subtitle?: string;
     logo?: string;
 }
+export interface PageProps {
+    title?: string;
+    /** Icône de la page.
+     * Composant ou nom (iconify) de l'icone */
+    icon?: ReactElement | string;
+    hidden?: boolean;
+    children?: ReactNode;
+}
 export declare const AppContext: import("react").Context<AppContextProps>;
 export interface DashboardConfig {
+    /** Pages de dashboard. La première page sera également l'index (homepage) */
+    children?: ReactElement<PageProps> | ReactElement<PageProps>[];
     /**
     * Titre principal du tableau de bord (affiché dans le header ou le titre de page).
     */
@@ -17,16 +29,18 @@ export interface DashboardConfig {
     subtitle?: string;
     /**
      * Liste des routes de l'application (chaque route correspond à une page du tableau de bord).
+     * @deprecated since 1.22. Use DashboardApp childrens.
     */
-    routes: RouteConfig[];
+    routes?: RouteConfig[];
     /**
      * Configuration du thème Ant Design (permet de personnaliser les couleurs, la typographie, etc.).
+     * Voir : https://ant.design/docs/react/customize-theme#theme
     */
     theme?: ThemeConfig;
     /**
      * URL ou chemin du logo à afficher dans le tableau de bord.
     */
-    logo: string;
+    logo?: string;
     /**
      * Liste optionnelle de partenaires ou marques à afficher dans le footer ou ailleurs.
     */
@@ -40,5 +54,12 @@ export interface DashboardConfig {
      */
     disablePoweredBy?: boolean;
 }
+/** Composant principal de l'application.
+ *
+ * Les enfants de l'application sont les différentes pages de tableau de bord.
+ * La configuration globale de l'application (nom, style, etc.) se fait via les propriétés.
+ */
 declare const DashboardApp: React.FC<DashboardConfig>;
 export default DashboardApp;
+/** Regrouper des pages dans le menu */
+export declare const PagesGroup: React.FC<PageProps>;

package/dist/components/Layout/DashboardApp.js

@@ -2,19 +2,22 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ConfigProvider, Layout } from "antd";
 import { HashRouter, Outlet, Route, Routes } from "react-router-dom";
-import { generateRoutes } from "../../utils/route_utils";
+//import { generateRoutes } from "../../utils/route_utils";
 import DashboardSider from "./Sider";
 import { Content } from "antd/es/layout/layout";
 import { ErrorComponent } from "./Error";
 import { DasbhoardFooter } from "./Footer";
-import { createContext } from "react";
+import { Children, createContext, isValidElement } from "react";
 import { HelmetProvider } from "react-helmet-async";
 import { createDatasetRegistry } from "../Dataset/hooks";
 import { DatasetRegistryContext } from "../Dataset/context";
 import { ControlContext, CreateControlesRegistry } from "../Control/Control";
+import slug from 'slug';
+import { generateRoutes, getFirstValidElement } from "../../utils/route_utils";
+import renderIcon from "../../utils/icon";
 //import '../../index.css' //TODO a intégrer en jsx
 const queryClient = new QueryClient();
-const default_theme = {
+export const default_theme = {
     token: {
         colorPrimary: "#95c11f",
         linkHoverDecoration: 'underline',
@@ -33,8 +36,47 @@ const default_theme = {
     }
 };
 export const AppContext = createContext({});
-const DashboardApp = ({ routes, theme, logo, brands, footerSlider, title, subtitle, disablePoweredBy = false }) => {
+/** Composant principal de l'application.
+ *
+ * Les enfants de l'application sont les différentes pages de tableau de bord.
+ * La configuration globale de l'application (nom, style, etc.) se fait via les propriétés.
+ */
+const DashboardApp = ({ children, theme, routes: routes_legacy, logo, brands, footerSlider, title, subtitle, disablePoweredBy = false }) => {
     const context_values = { title, subtitle, logo };
-    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(ConfigProvider, { theme: theme || default_theme /* Merger plutôt ?*/, children: _jsx(HelmetProvider, { children: _jsx(AppContext.Provider, { value: context_values, children: _jsx(DatasetRegistryContext.Provider, { value: createDatasetRegistry(), children: _jsx(ControlContext.Provider, { value: CreateControlesRegistry(), children: _jsx(HashRouter, { children: _jsx(Routes, { children: _jsxs(Route, { element: _jsxs(Layout, { hasSider: true, style: { minHeight: '100vh' }, children: [_jsx(DashboardSider, { route_config: routes, poweredBy: !disablePoweredBy }), _jsxs(Layout, { children: [_jsx(Content, { style: { width: "100%" }, children: _jsx(Outlet, {}) }), _jsx(DasbhoardFooter, { brands: brands, slider: footerSlider })] })] }), children: [generateRoutes(routes), _jsx(Route, { path: "*", element: _jsx(ErrorComponent, {}) })] }) }) }) }) }) }) }) }) }));
+    const pages = Children.toArray(children)
+        .filter(isValidElement);
+    const routes = pages.length >= 1 ? pages.map((page, idx) => {
+        if (typeof (page.type) != 'string' && page.type.name == PagesGroup.name) { // Groupe
+            return ({
+                label: page.props.title ?? String(idx),
+                path: slug(page.props.title ?? String(idx)),
+                element: undefined, // Pas de route pour les groupes
+                hidden: page.props.hidden ?? false,
+                icon: renderIcon(page.props.icon),
+                children: Children.toArray(page.props.children)?.map((c, idx) => ({
+                    label: c.props.title, // A factoriser avec les pages hors groupes
+                    path: slug(c.props.title ?? idx),
+                    element: c,
+                    hidden: c.props.hidden ?? false,
+                    icon: renderIcon(c.props.icon)
+                }))
+            });
+        }
+        else { //Pages directes (sans groupe)
+            return ({
+                label: page.props.title ?? String(idx),
+                path: slug(page.props.title ?? String(idx)),
+                element: page,
+                hidden: page.props.hidden ?? false,
+                icon: renderIcon(page.props.icon)
+            });
+        }
+    }) : routes_legacy ?? []; // Pour rétro-compatibiltié
+    const route_tree = generateRoutes(routes);
+    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(ConfigProvider, { theme: theme || default_theme /* Merger plutôt ?*/, children: _jsx(HelmetProvider, { children: _jsx(AppContext.Provider, { value: context_values, children: _jsx(DatasetRegistryContext.Provider, { value: createDatasetRegistry(), children: _jsx(ControlContext.Provider, { value: CreateControlesRegistry(), children: _jsx(HashRouter, { children: _jsx(Routes, { children: _jsxs(Route, { element: _jsxs(Layout, { hasSider: true, style: { minHeight: '100vh' }, children: [_jsx(DashboardSider, { route_config: routes, poweredBy: !disablePoweredBy }), _jsxs(Layout, { children: [_jsx(Content, { style: { width: "100%" }, children: _jsx(Outlet, {}) }), _jsx(DasbhoardFooter, { brands: brands, slider: footerSlider })] })] }), children: [_jsx(Route, { index: true, element: getFirstValidElement(route_tree) }), route_tree, _jsx(Route, { path: "*", element: _jsx(ErrorComponent, {}) })] }) }) }) }) }) }) }) }) }));
 };
 export default DashboardApp;
+/** Regrouper des pages dans le menu */
+export const PagesGroup = ({ children }) => {
+    return children;
+};

package/dist/index.d.ts

@@ -16,11 +16,11 @@ import NextPrevSelect from "./components/NextPrevSelect/NextPrevSelect";
 import Control from "./components/Control/Control";
 import DashboardChart from "./components/DashboardChart/DashboardChart";
 import MapLegend from "./components/MapLegend/MapLegend";
-import DashboardApp from "./components/Layout/DashboardApp";
+import DashboardApp, { PagesGroup } from "./components/Layout/DashboardApp";
 import DashboardSider from "./components/Layout/Sider";
 import DashboardPage from "./components/DashboardPage/Page";
 import DashboardElement from "./components/DashboardElement/DashboardElement";
-export { KeyFigure, DashboardElement, LoadingContainer, FlipCard, Attribution, NextPrevSelect, Control, DashboardChart, DashboardPage, MapLegend, DashboardSider, DashboardApp, };
+export { KeyFigure, DashboardElement, LoadingContainer, FlipCard, Attribution, NextPrevSelect, Control, DashboardChart, DashboardPage, MapLegend, DashboardSider, DashboardApp, PagesGroup, };
 import { dataProvider as WfsProvider } from "./data_providers/wfs";
 import { dataProvider as DatafairProvider } from "./data_providers/datafair";
 import { dataProvider as FileProvider } from "./data_providers/file";
@@ -29,5 +29,6 @@ export type { SimpleRecord, Partner, RouteConfig } from "./types";
 export type { LegendItem } from "./components/MapLegend/MapLegend";
 export type { DashboardConfig } from "./components/Layout/DashboardApp";
 export type { datasetInput } from "./components/Dataset/hooks";
+export type { PageProps } from "./components/Layout/DashboardApp";
 import * as DSL from './dsl';
 export { DSL };

package/dist/index.js

@@ -20,11 +20,11 @@ import Control from "./components/Control/Control";
 import DashboardChart from "./components/DashboardChart/DashboardChart";
 import MapLegend from "./components/MapLegend/MapLegend";
 // Layout
-import DashboardApp from "./components/Layout/DashboardApp";
+import DashboardApp, { PagesGroup } from "./components/Layout/DashboardApp";
 import DashboardSider from "./components/Layout/Sider";
 import DashboardPage from "./components/DashboardPage/Page";
 import DashboardElement from "./components/DashboardElement/DashboardElement";
-export { KeyFigure, DashboardElement, LoadingContainer, FlipCard, Attribution, NextPrevSelect, Control, DashboardChart, DashboardPage, MapLegend, DashboardSider, DashboardApp, };
+export { KeyFigure, DashboardElement, LoadingContainer, FlipCard, Attribution, NextPrevSelect, Control, DashboardChart, DashboardPage, MapLegend, DashboardSider, DashboardApp, PagesGroup, };
 // DataProviders
 import { dataProvider as WfsProvider } from "./data_providers/wfs";
 import { dataProvider as DatafairProvider } from "./data_providers/datafair";

package/dist/utils/icon.d.ts

@@ -0,0 +1,3 @@
+import { ReactNode } from "react";
+declare const renderIcon: (input: ReactNode | String) => number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export default renderIcon;

package/dist/utils/icon.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Icon } from "@iconify/react";
+const renderIcon = (input) => {
+    return typeof (input) === 'string' ? _jsx(Icon, { icon: input }) : input;
+};
+export default renderIcon;

package/dist/utils/route_utils.d.ts

@@ -1,6 +1,12 @@
 import { RouteConfig } from "../types";
 import type { MenuProps } from 'antd';
+import React from "react";
 type MenuItem = Required<MenuProps>['items'][number];
 export declare const generateRoutes: (routes: RouteConfig[]) => import("react/jsx-runtime").JSX.Element[];
 export declare const generateMenuItems: (routes: RouteConfig[], parentPath?: string) => MenuItem[];
+/** AI Generated,
+ * Get first "viewable" route (aka "not a group")
+ * Used for index route
+ */
+export declare function getFirstValidElement(routes: React.ReactElement[]): React.ReactElement | null;
 export {};

package/dist/utils/route_utils.js

@@ -1,14 +1,70 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 //Retourne les routes et le menu
-import { NavLink, Route } from "react-router-dom";
-export const generateRoutes = (routes) => routes.map((route) => (_jsx(Route, { path: route.path, element: !route.children && route.element, children: route.children && generateRoutes(route.children) }, route.path)));
-export const generateMenuItems = (routes, parentPath = "") => routes.filter((route) => route.hidden != true).map((route) => {
-    const fullPath = `${parentPath}/${route.path}`;
-    const menuItem = {
-        key: fullPath,
-        label: route.children ? _jsxs(_Fragment, { children: [" ", route.label || route.path] }) : _jsx(NavLink, { to: fullPath, children: route.label || route.path }),
-        icon: route.icon,
-        ...(route.children && { children: generateMenuItems(route.children, fullPath) }), // Ajout conditionnel des enfants
-    };
-    return menuItem;
-});
+import { NavLink, Outlet, Route } from "react-router-dom";
+import React from "react";
+export const generateRoutes = (routes) => routes.map((route) => (_jsx(Route, { path: route.path, element: route.children ? _jsx(Outlet, {}) : route.element, children: route.children && generateRoutes(route.children) }, route.path)));
+export const generateMenuItems = (routes, parentPath = "") => {
+    const out = routes.filter((route) => route.hidden != true).map((route) => {
+        const fullPath = `${parentPath}/${route.path}`;
+        const menuItem = {
+            key: fullPath,
+            label: route.children ? _jsxs(_Fragment, { children: [" ", route.label || route.path] }) : _jsx(NavLink, { to: fullPath, children: route.label || route.path }),
+            icon: route.icon,
+            ...(route.children && { children: generateMenuItems(route.children, fullPath) }), // Ajout conditionnel des enfants. Legacy
+        };
+        return menuItem;
+    });
+    return buildMenuTree(out);
+};
+/** AI generated function */
+function buildMenuTree(items) {
+    // Trier par profondeur de path
+    const sorted = [...items].sort((a, b) => 
+    //@ts-ignore
+    a.key.split("/").filter(Boolean).length - b.key.split("/").filter(Boolean).length);
+    const menuMap = new Map();
+    const roots = [];
+    for (const item of sorted) {
+        //@ts-ignore
+        const normalizedKey = item.key.replace(/\/$/, "") || "/";
+        const segments = normalizedKey.split("/").filter(Boolean);
+        const parentKey = segments.length > 0
+            ? "/" + segments.slice(0, -1).join("/")
+            : null;
+        const parent = parentKey ? menuMap.get(parentKey) : null;
+        // On clone l'item pour ne pas muter l'original
+        const menuItem = { ...item, key: normalizedKey };
+        menuMap.set(normalizedKey, menuItem);
+        if (parent) {
+            parent.children = parent.children ?? [];
+            parent.children.push(menuItem);
+        }
+        else {
+            roots.push(menuItem);
+        }
+    }
+    return roots;
+}
+/** AI Generated,
+ * Get first "viewable" route (aka "not a group")
+ * Used for index route
+ */
+export function getFirstValidElement(routes) {
+    function isEmptyOutlet(el) {
+        return React.isValidElement(el) && el.type === Outlet;
+    }
+    for (const route of routes) {
+        const el = route.props.element;
+        if (el && !isEmptyOutlet(el)) { // Page
+            return el;
+        }
+        //Group
+        const children = React.Children.toArray(route.props.children).filter(React.isValidElement);
+        if (children.length > 0) {
+            const firstChild = getFirstValidElement(children);
+            if (firstChild)
+                return firstChild;
+        }
+    }
+    return null;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geo2france/api-dashboard",
-  "version": "1.21.0",
+  "version": "1.22.0",
   "private": false,
   "description": "Build dashboards with JSX/TSX",
   "main": "dist/index.js",
@@ -64,17 +64,18 @@
     "react-helmet": "^6.1.0",
     "react-helmet-async": "^2.0.5",
     "slick-carousel": "^1.8.1",
+    "slug": "^11.0.1",
     "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz"
   },
   "devDependencies": {
     "@ant-design/icons": "^6.0.2",
-    "@chromatic-com/storybook": "^5.0.0",
+    "@chromatic-com/storybook": "^5.0.1",
     "@iconify/json": "^2.2.382",
-    "@storybook/addon-a11y": "^10.2.1",
-    "@storybook/addon-docs": "^10.2.1",
-    "@storybook/addon-onboarding": "^10.2.1",
-    "@storybook/addon-vitest": "^10.2.1",
-    "@storybook/react-vite": "^10.2.1",
+    "@storybook/addon-a11y": "^10.2.13",
+    "@storybook/addon-docs": "^10.2.13",
+    "@storybook/addon-onboarding": "^10.2.13",
+    "@storybook/addon-vitest": "^10.2.13",
+    "@storybook/react-vite": "^10.2.13",
     "@tanstack/react-query": "^5.51.11",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.5.0",
@@ -88,6 +89,7 @@
     "@types/react-dom": "^18.3.1",
     "@types/react-helmet-async": "^1.0.1",
     "@types/react-icons": "^2.2.7",
+    "@types/slug": "^5.0.9",
     "@typescript-eslint/eslint-plugin": "^7.16.1",
     "@typescript-eslint/parser": "^7.16.1",
     "@vitejs/plugin-react": "^4.3.1",
@@ -101,7 +103,7 @@
     "react": "^18.3.1",
     "react-map-gl": "^7.1.9",
     "react-router-dom": "^7.13.0",
-    "storybook": "^10.2.1",
+    "storybook": "^10.2.13",
     "ts-jest": "^29.2.5",
     "ts-node": "^10.9.2",
     "tsup": "^8.5.0",