@djangocfg/ui-core 2.1.440 → 2.1.442

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.440",
+  "version": "2.1.442",
   "description": "Pure React UI component library without Next.js dependencies - for Electron, Vite, CRA apps",
   "keywords": [
     "ui-components",
@@ -53,6 +53,16 @@
       "import": "./src/hooks/router/adapters/nextjs.tsx",
       "require": "./src/hooks/router/adapters/nextjs.tsx"
     },
+    "./adapters/react-router": {
+      "types": "./src/hooks/router/adapters/react-router.tsx",
+      "import": "./src/hooks/router/adapters/react-router.tsx",
+      "require": "./src/hooks/router/adapters/react-router.tsx"
+    },
+    "./chart": {
+      "types": "./src/components/data/chart/index.tsx",
+      "import": "./src/components/data/chart/index.tsx",
+      "require": "./src/components/data/chart/index.tsx"
+    },
     "./lib": {
       "types": "./src/lib/index.ts",
       "import": "./src/lib/index.ts",
@@ -106,7 +116,7 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.440",
+    "@djangocfg/i18n": "^2.1.442",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
     "moment": "^2.30.1",
@@ -115,6 +125,7 @@
     "react-device-detect": "^2.2.3",
     "react-dom": "^19.2.4",
     "react-hook-form": "^7.69.0",
+    "react-router": ">=7",
     "tailwindcss": "^4.1.18",
     "zod": "^4.3.6",
     "zustand": "^5.0.0"
@@ -122,6 +133,9 @@
   "peerDependenciesMeta": {
     "next": {
       "optional": true
+    },
+    "react-router": {
+      "optional": true
     }
   },
   "dependencies": {
@@ -180,8 +194,8 @@
     "@chenglou/pretext": "*"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.440",
-    "@djangocfg/typescript-config": "^2.1.440",
+    "@djangocfg/i18n": "^2.1.442",
+    "@djangocfg/typescript-config": "^2.1.442",
     "@types/node": "^25.2.3",
     "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",

package/src/components/index.ts

@@ -199,7 +199,13 @@ export type { BalancedTextProps, BalancedFont } from './data/BalancedText';
 // ─────────────────────────────────────────────────────────────────────────────
 // Chart Components
 // ─────────────────────────────────────────────────────────────────────────────
-export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle } from './data/chart';
+// Charts are NOT re-exported from this main barrel ON PURPOSE: they pull in the
+// heavy `recharts` dependency (which imports CJS `lodash/get`), and dragging
+// that into every `import { Button } from "@djangocfg/ui-core"` both bloats the
+// graph and breaks Vite dev (native-ESM) CJS-interop on consumers that never use
+// charts. Import charts from the dedicated subpath instead — same pay-for-what-
+// you-use pattern as `@djangocfg/ui-core/lib/dialog-service`:
+//   import { ChartContainer, ChartTooltip, … } from "@djangocfg/ui-core/chart";
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Feedback

package/src/hooks/router/README.md

@@ -47,7 +47,30 @@ import { NextRouterAdapter, NextLinkProvider } from '@djangocfg/ui-core/adapters
 > Using `@djangocfg/layouts`? `BaseApp` already mounts both adapters — you don't
 > need this manual wiring.
 
-`next` is an **optional peer dependency** — the package never imports from `next/*` from the main entry. The Next adapter lives behind the `/adapters/nextjs` sub-path entry, so non-Next consumers don't pull `next` into their bundle.
+For a **React-Router v7** SPA (Vite / CRA) — mount the React-Router adapter once,
+**inside** the router context (e.g. in the layout-route element, not around
+`<RouterProvider>`). It bridges the router hooks to `useNavigate` and `<Link>` to
+React-Router's `<Link>`, so ui-core navigation drives the data router instead of
+the bare-`pushState` fallback (which would desync the router):
+
+```tsx
+// the layout-route element (rendered inside <RouterProvider>)
+import { ReactRouterProvider } from '@djangocfg/ui-core/adapters/react-router';
+
+<ReactRouterProvider>
+  {/* sidebar / top-bar / <Outlet/> */}
+</ReactRouterProvider>
+```
+
+`ReactRouterProvider` composes `ReactRouterAdapter` (router hooks) +
+`ReactRouterLinkProvider` (`<Link>`); mount either individually if you only need
+one. RR's `<Link>` has no `prefetch`-boolean / `scroll` prop, so those ui-core
+`<Link>` props are ignored by this adapter (by design).
+
+Both `next` and `react-router` are **optional peer dependencies** — the package
+never imports from `next/*` or `react-router` from the main entry. Each adapter
+lives behind its own sub-path (`/adapters/nextjs`, `/adapters/react-router`), so a
+consumer only pulls in the framework it actually mounts.
 
 For other routers (TanStack Router, wouter, Remix, custom transports) — write a ~20-line custom adapter:
 

package/src/hooks/router/adapters/react-router.tsx

@@ -0,0 +1,149 @@
+'use client';
+
+/**
+ * React-Router (v7) adapter — bridges our framework-agnostic router hooks
+ * to `react-router` so SPA navigations flow through the data router
+ * (`createBrowserRouter`) instead of the bare History API fallback.
+ *
+ * USAGE:
+ *   Mount once INSIDE the router context — i.e. inside an element that
+ *   `RouterProvider` renders (a layout-route element / `<Outlet/>` parent),
+ *   NOT around `<RouterProvider>` itself (that subtree has no router context,
+ *   so `useNavigate` would throw):
+ *
+ *   ```tsx
+ *   import { ReactRouterProvider } from '@djangocfg/ui-core/adapters/react-router';
+ *
+ *   function Shell() {
+ *     return (
+ *       <ReactRouterProvider>
+ *         <Layout><Outlet /></Layout>
+ *       </ReactRouterProvider>
+ *     );
+ *   }
+ *   ```
+ *
+ *   Without this provider, our hooks fall back to the History API adapter —
+ *   which mutates `window.history` directly and bypasses React-Router's
+ *   `<Outlet/>` swap, so programmatic `useNavigate` / `<Link>` clicks desync
+ *   from the router. Mount it in any Vite / React-Router SPA.
+ *
+ * PEER DEPENDENCY:
+ *   `react-router` is an OPTIONAL peer of @djangocfg/ui-core. The base package
+ *   never imports from `react-router`. This sub-path entry does — so it only
+ *   loads when the consumer explicitly imports `/adapters/react-router`.
+ *   Next.js / non-RR consumers: don't import this file and `react-router` is
+ *   never resolved.
+ */
+
+import { forwardRef, useMemo, type ReactNode } from 'react';
+import { Link as RouterLink, useNavigate } from 'react-router';
+
+import {
+  RouterAdapterProvider,
+  type RouterAdapter,
+  type RouterLocation,
+} from '../adapter';
+import {
+  LinkProvider,
+  type LinkComponent,
+  type LinkComponentProps,
+} from '../../../components/navigation/link';
+
+const SSR_LOCATION: RouterLocation = Object.freeze({
+  pathname: '/',
+  search: '',
+  hash: '',
+});
+
+export interface ReactRouterAdapterProps {
+  children: ReactNode;
+}
+
+/**
+ * Wraps a subtree so all `@djangocfg/ui-core/hooks` router calls go through
+ * React-Router's data router. `back`/`forward` use the numeric-delta overload
+ * of `useNavigate`; `getLocation` reads `window.location` (SSR-guarded).
+ *
+ * Must be rendered inside the router context (under `RouterProvider`), since
+ * `useNavigate` requires it.
+ */
+export function ReactRouterAdapter({ children }: ReactRouterAdapterProps) {
+  const navigate = useNavigate();
+
+  const adapter = useMemo<RouterAdapter>(
+    () => ({
+      push(url) {
+        navigate(url);
+      },
+      replace(url) {
+        navigate(url, { replace: true });
+      },
+      back() {
+        navigate(-1);
+      },
+      forward() {
+        navigate(1);
+      },
+      getLocation() {
+        if (typeof window === 'undefined') return SSR_LOCATION;
+        return {
+          pathname: window.location.pathname,
+          search: window.location.search,
+          hash: window.location.hash,
+        };
+      },
+    }),
+    [navigate]
+  );
+
+  return (
+    <RouterAdapterProvider value={adapter}>{children}</RouterAdapterProvider>
+  );
+}
+
+/**
+ * Maps our agnostic Link API → react-router `<Link>` props. Lives at module
+ * scope so the component identity is stable (avoids tree remounts on every
+ * render). `href` → `to`; `replace` is forwarded; `prefetch` (a Next-shaped
+ * boolean) and `scroll` have no `react-router` equivalent and are dropped.
+ */
+const ReactRouterLinkAdapter: LinkComponent = forwardRef<HTMLAnchorElement, LinkComponentProps>(
+  function ReactRouterLinkAdapter({ href, replace, scroll: _scroll, prefetch: _prefetch, children, ...rest }, ref) {
+    return (
+      <RouterLink to={href} replace={replace} ref={ref} {...rest}>
+        {children}
+      </RouterLink>
+    );
+  }
+);
+
+export interface ReactRouterLinkProviderProps {
+  children: ReactNode;
+}
+
+/**
+ * Wires `<Link>` from `@djangocfg/ui-core/components` to react-router's
+ * `<Link>`. Mount alongside `ReactRouterAdapter` (inside the router context)
+ * so every ui-core `<Link>` drives client-side routing.
+ */
+export function ReactRouterLinkProvider({ children }: ReactRouterLinkProviderProps) {
+  return <LinkProvider value={ReactRouterLinkAdapter}>{children}</LinkProvider>;
+}
+
+export interface ReactRouterProviderProps {
+  children: ReactNode;
+}
+
+/**
+ * Convenience composition of `ReactRouterAdapter` (navigation backend) and
+ * `ReactRouterLinkProvider` (link component) — mount this ONE component inside
+ * the router context to wire ui-core's whole navigation seam to React-Router.
+ */
+export function ReactRouterProvider({ children }: ReactRouterProviderProps) {
+  return (
+    <ReactRouterAdapter>
+      <ReactRouterLinkProvider>{children}</ReactRouterLinkProvider>
+    </ReactRouterAdapter>
+  );
+}