admin_lsac 2.0.32 → 2.0.33

package/README.md

@@ -56,6 +56,156 @@ You will need to create an array of schemas (if more than one schema) for your o
 ) : null}
 ```
 
+## More info
+
+<details>
+<summary>Declarative Mode (Standard SPA)</summary>
+
+## Declarative Mode (Standard SPA)
+
+This mode represents the classic Single Page Application (SPA) approach, using standard JSX components to define the routing context. It is the most straightforward way to integrate the admin panel into an existing React application.
+
+### How to Implement
+
+To set up the Declarative Mode, you must wrap your component tree (or just the admin section) inside a `<BrowserRouter>`. The `AdminPage` component requires four main props to function correctly:
+
+- `pages`: An array of your data schemas.
+- `selectedPage`: The specific schema object to render.
+- `basePath`: The URL prefix where the admin panel will reside (e.g., `/admin`).
+- `apiURL`: The base URL of your backend API.
+
+The `AdminPage` will automatically handle internal navigation and path matching based on these props.
+
+### Implementation Example
+
+Below is a minimal setup showing how to wrap the `AdminPage` and pass the required configuration:
+
+```tsx
+import { BrowserRouter } from 'react-router';
+import { AdminPage } from 'admin_lsac';
+// Import your defined schemas
+import { coursesPage } from './testSchemas/course';
+
+export default function App() {
+  return (
+    <BrowserRouter>
+      <AdminPage
+        apiURL="http://localhost:3001/"
+        basePath="/admin"
+        pages="{[coursesPage]}"
+        selectedPage="{coursesPage}"
+      />
+    </BrowserRouter>
+  );
+}
+```
+
+</details>
+
+<details>
+<summary>Data Mode (Data Router)</summary>
+
+## Data Mode (Data Router)
+
+This mode utilizes an object-based routing configuration rather than a declarative JSX component tree. It is the recommended approach for modern React applications, as it decouples the route definitions from the UI, enabling advanced data fetching and performance optimizations.
+
+### How to Implement
+
+To implement Data Mode, you will transition away from `<BrowserRouter>`. Instead, you define your routes as an array of objects using the `createBrowserRouter` function. This router instance is then passed to a `<RouterProvider>` component at the root of your application.
+
+The `AdminPage` must be assigned to the `element` property of a route object. It is crucial to append a wildcard (`*`) to the `path` string (e.g., `/admin/*`) so the admin panel can successfully catch and manage its own internal sub-routes.
+
+### Implementation Example
+
+Below is the standard setup for integrating the admin panel using the Data Router approach:
+
+```tsx
+import { createBrowserRouter, RouterProvider } from 'react-router';
+import { AdminPage } from 'admin_lsac';
+// Import your defined schemas
+import { coursesPage } from './testSchemas/course';
+
+const router = createBrowserRouter([
+  {
+    path: '/admin/*', // The wildcard (*) is required for internal navigation
+    element: (
+      <AdminPage
+        apiURL="http://localhost:3001/"
+        basePath="/admin"
+        pages="{[coursesPage]}"
+        selectedPage="{coursesPage}"
+      />
+    ),
+  },
+]);
+
+export default function App() {
+  // Provide the router configuration to the application
+  return <RouterProvider router="{router}" />;
+}
+```
+
+</details>
+
+<details>
+<summary>Framework Mode (Vite Plugin / App Directory)</summary>
+
+## Framework Mode (Vite Plugin / App Directory)
+
+This mode is used when your project takes advantage of React Router v7's framework capabilities, utilizing the Vite plugin and file-based routing within an `app/` directory.
+
+### How to Implement
+
+To integrate the admin panel in Framework Mode, you need to configure file-based routing. You achieve this by defining a wildcard route in your route configuration file (`routes.ts`) that delegates traffic to a dedicated wrapper component.
+
+The wrapper component is responsible for extracting the dynamic URL parameters (using the `useParams` hook) and determining which schema to render before returning the `AdminPage` component.
+
+### Implementation Example
+
+Below are the two files required to set up the Framework Mode:
+
+**1. Define the Route Configuration (`app/routes.ts`)**  
+Map the base path followed by a wildcard (`*`) directly to your wrapper component.
+
+```tsx
+import { type RouteConfig, route } from '@react-router/dev/routes';
+
+export default [route('admin/*', './wrapper.tsx')] satisfies RouteConfig;
+```
+
+**2. Create the Wrapper Component (`app/wrapper.tsx`)**  
+This component handles the logic for matching the URL to your data schema.
+
+```tsx
+import { useParams } from 'react-router';
+import { AdminPage, pageToUrl } from 'admin_lsac';
+// Import your defined schemas
+import { coursesPage } from '../src/testSchemas/course';
+
+export default function AdminWrapper() {
+  const params = useParams();
+  const splitPath = params['*'];
+
+  const pages = [coursesPage];
+  const basePath = '/admin';
+
+  // Dynamically resolve the selected page or fallback to the first one
+  const selectedPage = pages.find((page) => pageToUrl(page) === splitPath);
+  const currentPage = selectedPage || pages[0];
+
+  return (
+    <AdminPage
+      pages={pages}
+      selectedPage={currentPage}
+      basePath={basePath}
+      apiURL="http://localhost:3001/"
+    />
+  );
+}
+```
+
+</details>
+
 ## What is a schema?
 
 ```

package/app/routes.ts

@@ -0,0 +1,5 @@
+import { type RouteConfig, route } from "@react-router/dev/routes";
+
+export default [
+  route("admin/*", "./wrapper.tsx")
+] satisfies RouteConfig;

package/app/wrapper.tsx

@@ -0,0 +1,26 @@
+import { useParams } from "react-router";
+import { AdminPage, pageToUrl } from "../src/components/AdminPage";
+import { coursesPage } from "../src/testSchemas/course";
+
+// React Router v7 - Framework Mode 
+function AdminWrapper() {
+    const params = useParams();
+    const splitPath = params["*"];
+
+    const pages = [coursesPage];
+    const basePath = "/admin";
+
+    const selectedPage = pages.find((page) => pageToUrl(page) === splitPath);
+    const currentPage = selectedPage || pages[0];
+
+    return (
+        <AdminPage
+            pages={pages}
+            selectedPage={currentPage}
+            basePath={basePath}
+            apiURL="http://localhost:3001/"
+        />
+    );
+}
+
+export default AdminWrapper;

package/dist/esm/app/entry.client.d.ts

@@ -0,0 +1 @@
+import "../src/index.css";

package/dist/esm/app/entry.client.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { HydratedRouter } from "react-router/dom";
+import "../src/index.css";
+ReactDOM.hydrateRoot(document, _jsx(React.StrictMode, { children: _jsx(HydratedRouter, {}) }));

package/dist/esm/app/entry.server.d.ts

@@ -0,0 +1,2 @@
+import type { EntryContext } from "react-router";
+export default function handleRequest(request: Request, responseStatusCode: number, responseHeaders: Headers, routerContext: EntryContext): Response;

package/dist/esm/app/entry.server.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { renderToString } from "react-dom/server";
+import { ServerRouter } from "react-router";
+export default function handleRequest(request, responseStatusCode, responseHeaders, routerContext) {
+    const markup = renderToString(_jsx(ServerRouter, { context: routerContext, url: request.url }));
+    responseHeaders.set("Content-Type", "text/html");
+    return new Response(`<!DOCTYPE html>${markup}`, {
+        status: responseStatusCode,
+        headers: responseHeaders,
+    });
+}

package/dist/esm/app/root.d.ts

@@ -0,0 +1 @@
+export default function Root(): import("react/jsx-runtime").JSX.Element;

package/dist/esm/app/root.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Outlet } from "react-router";
+export default function Root() {
+    return _jsx(Outlet, {});
+}

package/dist/esm/app/routes.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("@react-router/dev/routes").RouteConfigEntry[];
+export default _default;

package/dist/esm/app/routes.js

@@ -0,0 +1,4 @@
+import { route } from "@react-router/dev/routes";
+export default [
+    route("admin/*", "./wrapper.tsx")
+];

package/dist/esm/app/wrapper.d.ts

@@ -0,0 +1,2 @@
+declare function AdminWrapper(): import("react/jsx-runtime").JSX.Element;
+export default AdminWrapper;

package/dist/esm/app/wrapper.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useParams } from "react-router";
+import { AdminPage, pageToUrl } from "../src/components/AdminPage";
+import { coursesPage } from "../src/testSchemas/course";
+// React Router v7 - Framework Mode 
+function AdminWrapper() {
+    const params = useParams();
+    const splitPath = params["*"];
+    const pages = [coursesPage];
+    const basePath = "/admin";
+    const selectedPage = pages.find((page) => pageToUrl(page) === splitPath);
+    const currentPage = selectedPage || pages[0];
+    return (_jsx(AdminPage, { pages: pages, selectedPage: currentPage, basePath: basePath, apiURL: "http://localhost:3001/" }));
+}
+export default AdminWrapper;

package/dist/esm/src/App.js

@@ -1,8 +1,46 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import { AdminPage } from './components/AdminPage';
 import { pageToUrl } from './components/AdminPage';
 import './App.css';
+// React Router v7 - Data Mode 
+/*
+import { createBrowserRouter, RouterProvider } from "react-router";
+
+function AppDataMode({ pages, basePath }: { pages: PageSchema[]; basePath: string }) {
+  const dataRouter = createBrowserRouter([
+    ...pages.map((page) => (
+      {
+        path: `${basePath}/${pageToUrl(page)}`,
+        element:
+          <AdminPage
+            pages={pages}
+            selectedPage={page}
+            basePath={basePath}
+            apiURL="http://localhost:3001/"
+          />
+      }
+    )),
+
+    {
+      path: `${basePath}/*`,
+      element: pages[0] ? (
+        <AdminPage
+          pages={pages}
+          selectedPage={pages[0]}
+          basePath={basePath}
+          apiURL="http://localhost:3001/"
+        />
+      ) : null
+    }
+  ]);
+
+  return <RouterProvider router={dataRouter}/>
+}
+
+export default AppDataMode;
+*/
+// React Router v7 - Declarative Mode 
+import { BrowserRouter, Route, Routes } from 'react-router';
 function App({ pages, basePath }) {
     return (_jsx(BrowserRouter, { children: _jsxs(Routes, { children: [pages.map((page, index) => (_jsx(Route, { path: `${basePath}/${pageToUrl(page)}`, element: _jsx(AdminPage, { pages: pages, selectedPage: page, basePath: basePath, apiURL: "http://localhost:3001/" }) }, index))), pages[0] ? (_jsx(Route, { path: `${basePath}/*`, element: _jsx(AdminPage, { pages: pages, selectedPage: pages[0], basePath: basePath, apiURL: "http://localhost:3001/" }) })) : null] }) }));
 }

package/dist/esm/src/entry.client.d.ts

@@ -0,0 +1 @@
+import "./index.css";

package/dist/esm/src/entry.client.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { HydratedRouter } from "react-router/dom";
+import "./index.css";
+ReactDOM.hydrateRoot(document, _jsx(React.StrictMode, { children: _jsx(HydratedRouter, {}) }));

package/package.json

@@ -1,8 +1,13 @@
 {
   "name": "admin_lsac",
   "private": false,
-  "version": "2.0.32",
+  "version": "2.0.33",
   "description": "Generic Admin Panel created for storing events' data",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/LSAC-ONG/Generic-Admin.git",
+    "directory": "admin"
+  },
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
@@ -29,12 +34,14 @@
     "material-react-table": "^2.13.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^6.24.0",
+    "react-router": "^7.18.0",
+    "react-router-dom": "^7.18.0",
     "socket.io-client": "^4.7.5",
     "sweetalert2": "^11.12.0",
     "yup": "^1.4.0"
   },
   "devDependencies": {
+    "@react-router/dev": "^7.18.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^7.13.1",