@legalplace/wizardx-core 4.42.9 → 4.42.10-nightly.20251125115613

package/README.md

@@ -1 +1,376 @@
-# Wizardx-Core
+# @legalplace/wizardx-core
+
+Core library for WizardX - A powerful, themeable, and extensible wizard framework for React applications.
+
+## ✨ Features
+
+- 🎨 **Themeable**: Fully customizable UI with multiple theme support
+- 🔌 **Plugin System**: Extensible architecture with dynamic plugin loading
+- 📱 **Responsive**: Mobile-first design
+- 🔄 **State Management**: Redux-based state management with sagas
+- 🎯 **Type-Safe**: Full TypeScript support
+- 🚀 **Multi-Router Support**: Works with React Router (CRA) and Next.js App Router
+- 📦 **Tree-Shakeable**: Optimized bundle size
+
+## 🆕 NEW: Multi-Router Support
+
+WizardX Core now supports multiple routing solutions! Use it with:
+- ✅ **React Router v5** (CRA) - Existing implementation
+- ✅ **Next.js 15 App Router** - New support
+- 🔮 Extensible to other routers (Remix, Tanstack Router, etc.)
+
+## 📦 Installation
+
+```bash
+pnpm add @legalplace/wizardx-core
+```
+
+## 🚀 Quick Start
+
+### For Create React App (existing)
+
+```tsx
+import { App } from "@legalplace/wizardx-core";
+import { createRoot } from "react-dom/client";
+
+const root = createRoot(document.getElementById("root"));
+root.render(
+  <App
+    historyType="browser"
+    loadPlugin={loadPlugin}
+    loadTheme={loadTheme}
+    wizardParams={wizardParams}
+  />
+);
+```
+
+### For Next.js 15 (new)
+
+```tsx
+'use client';
+import { WizardCore } from "@legalplace/wizardx-core";
+import { createNextJSAdapter } from "@legalplace/wizardx-core/routing";
+import { useRouter, usePathname, useSearchParams, useParams } from "next/navigation";
+
+export default function WizardPage() {
+  const adapter = createNextJSAdapter(
+    useRouter(),
+    usePathname(),
+    useSearchParams(),
+    useParams()
+  );
+
+  return (
+    <WizardCore
+      routerAdapter={adapter}
+      loadPlugin={loadPlugin}
+      loadTheme={loadTheme}
+      wizardParams={wizardParams}
+    />
+  );
+}
+```
+
+## 📚 Documentation
+
+### Getting Started
+- **[Quick Start - Next.js](./QUICK-START-NEXTJS.md)** - 5-minute setup guide for Next.js
+- **[Migration Guide](./MIGRATION-NEXTJS.md)** - Complete migration guide from CRA to Next.js
+- **[Examples](./examples/)** - Working examples and code samples
+
+### Architecture & Technical Details
+- **[Routing Guide](./README-ROUTING.md)** - In-depth routing architecture
+- **[Architecture Diagram](./ARCHITECTURE-DIAGRAM.md)** - Visual architecture overview
+- **[Changelog - Routing](./CHANGELOG-ROUTING.md)** - Multi-router feature changelog
+- **[Solution Summary](./ROUTING-SOLUTION-SUMMARY.md)** - Complete solution overview
+
+## 🎯 Core Concepts
+
+### Components
+
+#### `App` Component
+The original React Router-based component. Use this for CRA applications.
+
+```tsx
+import { App } from "@legalplace/wizardx-core";
+
+<App
+  historyType="browser" // or "memory"
+  loadPlugin={loadPlugin}
+  loadTheme={loadTheme}
+  wizardParams={wizardParams}
+  model={initialModel}
+  user={user}
+/>
+```
+
+#### `WizardCore` Component (New)
+Router-agnostic component that works with any routing solution.
+
+```tsx
+import { WizardCore } from "@legalplace/wizardx-core";
+import { createNextJSAdapter } from "@legalplace/wizardx-core/routing";
+
+<WizardCore
+  routerAdapter={adapter}  // or use 'routing' prop for manual control
+  loadPlugin={loadPlugin}
+  loadTheme={loadTheme}
+  wizardParams={wizardParams}
+/>
+```
+
+### Themes
+
+Themes control the visual appearance of the wizard. Load themes dynamically:
+
+```tsx
+const loadTheme = async (theme: string) => {
+  switch(theme) {
+    case 'legacy':
+      return import('./themes/legacy');
+    case 'qonto':
+      return import('./themes/qonto');
+    default:
+      throw new Error(`Theme "${theme}" not found`);
+  }
+};
+```
+
+### Plugins
+
+Plugins extend wizard functionality. Load plugins dynamically:
+
+```tsx
+const loadPlugin = async (plugin: string) => {
+  switch(plugin) {
+    case 'checkoutX':
+      return import('./plugins/checkoutX');
+    case 'authentication':
+      return import('./plugins/authentication');
+    default:
+      throw new Error(`Plugin "${plugin}" not found`);
+  }
+};
+```
+
+### Configuration
+
+```tsx
+const wizardParams = {
+  apiEndpoint: "https://api.example.com/v1",
+  
+  router: {
+    wizardPath: "/contrats/:prefix?/:permalink/creer/:page?",
+    wizardInstancePath: "/contrats/:prefix?/:permalink/continuer/:uniqid/:page?",
+    notFoundPath: "/404",
+    smartscriptPath: "/contrats/:permalink/smartscript/:uniqid?",
+  },
+  
+  plugins: {
+    checkoutX: "1.0.0",
+    authentication: "1.0.0",
+  },
+  
+  theme: {
+    name: "legacy",
+    params: {
+      ui: { topbar: { previewBtn: true } }
+    },
+  },
+  
+  appStates: ["wizard", "email", "termsheet"],
+};
+```
+
+## 🔌 Router Adapters
+
+### React Router Adapter
+
+```tsx
+import { createReactRouterAdapter } from "@legalplace/wizardx-core/routing";
+
+const adapter = createReactRouterAdapter();
+```
+
+### Next.js Adapter
+
+```tsx
+import { createNextJSAdapter } from "@legalplace/wizardx-core/routing";
+import { useRouter, usePathname, useSearchParams, useParams } from "next/navigation";
+
+const adapter = createNextJSAdapter(
+  useRouter(),
+  usePathname(),
+  useSearchParams(),
+  useParams()
+);
+```
+
+### Custom Adapter
+
+Implement the `IRouterAdapter` interface:
+
+```tsx
+interface IRouterAdapter {
+  useParams: <T = any>() => T;
+  useNavigate: () => (path: string) => void;
+  useLocation: () => { pathname: string; search: string };
+  Link: ComponentType<LinkProps>;
+}
+```
+
+## 📦 Exports
+
+```typescript
+// Components
+export { App } from "@legalplace/wizardx-core";
+export { WizardCore } from "@legalplace/wizardx-core";
+
+// Routing
+export {
+  createReactRouterAdapter,
+  createNextJSAdapter,
+  RouterProvider,
+  useRouterAdapter,
+  useParams,
+  useNavigate,
+  useLocation,
+} from "@legalplace/wizardx-core/routing";
+
+// Configuration
+export { getConfig, updateConfig } from "@legalplace/wizardx-core";
+
+// Redux
+export { getStore, createAppStore } from "@legalplace/wizardx-core";
+
+// Theme & Plugins
+export { loadThemeComponent, addOnThemeLoadCallback } from "@legalplace/wizardx-core";
+export { loadPlugin, clearPlugins } from "@legalplace/wizardx-core";
+
+// ... and many more
+```
+
+## 🏗️ Architecture
+
+```
+┌─────────────────────────────────────┐
+│    Application (CRA or Next.js)    │
+└──────────────┬──────────────────────┘
+               │
+               ▼
+┌─────────────────────────────────────┐
+│       Router Adapter (Optional)     │
+│  React Router | Next.js | Custom    │
+└──────────────┬──────────────────────┘
+               │
+               ▼
+┌─────────────────────────────────────┐
+│          WizardCore / App           │
+│      (Business Logic Layer)         │
+└──────────────┬──────────────────────┘
+               │
+               ▼
+┌─────────────────────────────────────┐
+│         Redux Store + Sagas         │
+└──────────────┬──────────────────────┘
+               │
+               ▼
+┌─────────────────────────────────────┐
+│      Themes & Plugins (Dynamic)     │
+└─────────────────────────────────────┘
+```
+
+## 🔄 State Management
+
+WizardX Core uses Redux for state management with the following slices:
+
+- `app`: Application state (meta, instance, pagination)
+- `user`: User information
+- `inputs`: Variables and options
+- `conditions`: Conditional logic
+- `references`: External references
+- `mandatories`: Required fields validation
+- `smartscript`: SmartScript state
+
+## 🎨 Available Themes
+
+- `legacy` - Classic theme
+- `qonto` - Qonto-styled theme
+- `kpmg` - KPMG-styled theme
+- `shine` - Shine-styled theme
+- `social` - Social-styled theme
+- `compact` - Compact theme
+
+## 🔌 Available Plugins
+
+- `checkoutX` - Checkout flow
+- `authentication` - User authentication
+- `b2c_actions` - B2C specific actions
+- `datalayer` - Analytics data layer
+- `kanoon` - Kanoon integration
+- And more...
+
+## 🧪 Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Build
+pnpm build
+
+# Watch mode
+pnpm start
+
+# Lint
+pnpm lint
+
+# Type check
+pnpm tsc --noEmit
+```
+
+## 📝 TypeScript
+
+Full TypeScript support with exported types:
+
+```typescript
+import type {
+  AppProps,
+  WizardCoreProps,
+  IWizardParams,
+  IRouterAdapter,
+  StateType,
+} from "@legalplace/wizardx-core";
+```
+
+## 🤝 Contributing
+
+1. Create a feature branch
+2. Make your changes
+3. Run tests and linting
+4. Submit a pull request
+
+## 📄 License
+
+MIT
+
+## 🔗 Related Packages
+
+- `@legalplace/wizardx-app` - Main application using wizardx-core
+- `@legalplace/storybook` - UI components library
+- `@legalplace/typeorm-entities` - Database entities
+- `@legalplace/types` - Shared TypeScript types
+
+## 📞 Support
+
+For issues and questions:
+1. Check the [documentation](./QUICK-START-NEXTJS.md)
+2. Review [examples](./examples/)
+3. Open an issue on GitLab
+
+---
+
+**Version**: 4.42.9+  
+**Last Updated**: Nov 25, 2025  
+**Status**: ✅ Production Ready  
+**Multi-Router Support**: ✅ Stable

package/dist/App.d.ts

@@ -1,10 +1,5 @@
 import React from "react";
 import type { ModelV3 } from "@legalplace/models-v3-types";
-import "@legalplace/storybook/assets/inter.css";
-import "@legalplace/storybook/assets/circularstd.css";
-import "@legalplace/storybook/assets/polysans.css";
-import "@legalplace/storybook/assets/rebondgrotesk.css";
-import "@legalplace/storybook/assets/rubik.css";
 import type { StateType } from "./types/State.type";
 import type { IWizardParams } from "./types/config.type";
 export interface AppProps {
@@ -24,6 +19,6 @@ declare class WizardXCore extends React.Component<AppProps, {
     constructor(props: AppProps);
     componentDidMount(): void;
     componentWillUnmount(): void;
-    render(): JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }
 export default WizardXCore;

package/dist/App.js

@@ -3,11 +3,6 @@ import React from "react";
 import { Route, Switch, Redirect } from "react-router-dom";
 import { Provider } from "react-redux";
 import { ConnectedRouter } from "connected-react-router";
-import "@legalplace/storybook/assets/inter.css";
-import "@legalplace/storybook/assets/circularstd.css";
-import "@legalplace/storybook/assets/polysans.css";
-import "@legalplace/storybook/assets/rebondgrotesk.css";
-import "@legalplace/storybook/assets/rubik.css";
 import { getStore, createAppStore } from "./redux/store";
 import { getHistory } from "./redux/routerHistory";
 import Globals, { setGlobals } from "./Globals";
@@ -32,7 +27,7 @@ const RedirectHandler = () => {
     else {
         window.location.href = NOT_FOUND_PAGE_LINK;
     }
-    return _jsx(Redirect, { to: getConfig().router.notFoundPath }, void 0);
+    return _jsx(Redirect, { to: getConfig().router.notFoundPath });
 };
 class WizardXCore extends React.Component {
     constructor(props) {
@@ -82,7 +77,7 @@ class WizardXCore extends React.Component {
         getStore().dispatch(resetStateAction());
     }
     render() {
-        return (_jsx(Provider, Object.assign({ store: getStore() }, { children: _jsx(ConnectedRouter, Object.assign({ history: getHistory() }, { children: _jsxs(Switch, { children: [_jsx(Route, { path: "/p/:path", component: PluginRoute }, void 0), _jsx(Route, { path: getConfig().router.smartscriptPath, exact: true, strict: true, component: SmartScriptComponent }, void 0), _jsx(Route, { path: getConfig().router.wizardInstancePath, component: ViewComponent }, void 0), _jsx(Route, { path: getConfig().router.wizardPath, component: ViewComponent }, void 0), !window.location.href.includes("smartscript") && (_jsx(Route, { component: RedirectHandler }, void 0))] }, void 0) }), void 0) }), void 0));
+        return (_jsx(Provider, { store: getStore(), children: _jsx(ConnectedRouter, { history: getHistory(), children: _jsxs(Switch, { children: [_jsx(Route, { path: "/p/:path", component: PluginRoute }), _jsx(Route, { path: getConfig().router.smartscriptPath, exact: true, strict: true, component: SmartScriptComponent }), _jsx(Route, { path: getConfig().router.wizardInstancePath, component: ViewComponent }), _jsx(Route, { path: getConfig().router.wizardPath, component: ViewComponent }), !window.location.href.includes("smartscript") && (_jsx(Route, { component: RedirectHandler }))] }) }) }));
     }
 }
 export default WizardXCore;

package/dist/Loader.d.ts

@@ -1 +1 @@
-export declare const Loader: () => JSX.Element;
+export declare const Loader: () => import("react/jsx-runtime").JSX.Element;

package/dist/Loader.js

@@ -1,2 +1,2 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const Loader = () => (_jsx("div", Object.assign({ className: "lps-container" }, { children: _jsxs("div", Object.assign({ className: "lds-ripple" }, { children: [_jsx("div", {}, void 0), _jsx("div", {}, void 0)] }), void 0) }), void 0));
+export const Loader = () => (_jsx("div", { className: "lps-container", children: _jsxs("div", { className: "lds-ripple", children: [_jsx("div", {}), _jsx("div", {})] }) }));

package/dist/PluginLoader.d.ts

@@ -1,46 +1,31 @@
-import type { Props } from "react";
 import React from "react";
-import type { LoadableComponent } from "@loadable/component";
-import type { Action, AnyAction, CombinedState, Reducer } from "redux";
+import type { Reducer } from "redux";
 import type { Saga } from "redux-saga";
-declare let pluginsStoreReducers: Record<string, Reducer<CombinedState<Record<string, any>>, AnyAction>>;
-declare const pluginsStoreSagas: Record<string, Saga[]>;
-export declare const getPluginsStoreReducers: () => Readonly<typeof pluginsStoreReducers>;
-export declare const getPluginsStoreSagas: () => Readonly<typeof pluginsStoreSagas>;
-export declare type PluginAppStatesRegisterFunction = (currentAppStates: string[]) => string[];
-export declare type PluginsPageAppStatesType = Record<string, string>;
-export declare type actionOverrideFunction = (action: Action) => Action;
-export interface IPluginsAppStatesComponents {
-    [key: string]: LoadableComponent<any>;
-}
-export interface PluginsAppStatesDeclarations {
-    register: PluginAppStatesRegisterFunction;
-    pageAppState: PluginsPageAppStatesType;
-    components: IPluginsAppStatesComponents;
-    additionalRoutes?: Record<string, ReactComponent<any>>[];
-}
-declare let PluginsPageAppStates: PluginsPageAppStatesType;
-export declare const registerPluginsAppStates: PluginAppStatesRegisterFunction;
-export declare const loadPluginComponent: (name: string) => LoadableComponent<any> | undefined;
-export declare const pluginPageAppState: (page: string) => string | false;
-export declare const getPluginsPageAppStates: () => Readonly<typeof PluginsPageAppStates>;
-export declare const loadPlugins: (plugins?: Record<string, string> | undefined) => Promise<void>;
-export declare const pluginsLoaded: () => boolean;
+import type { IPlugin, IPluginConfig } from "./types/PluginConfig.type";
+type TPluginLoader = React.FC<PluginLoaderProps>;
 export interface PluginLoaderProps {
     anchor: string[];
-    props?: Props<null>;
+    props?: Record<string, any>;
+    children?: React.ReactNode;
 }
-export declare type ReactComponent<T> = React.ComponentClass<T> | React.FC<T>;
-export declare type TPluginLoader<T = {}> = React.FC<T & PluginLoaderProps>;
+export type ReactComponent<T> = React.ComponentClass<T> | React.FC<T>;
 export declare const PluginLoader: TPluginLoader;
-export declare function replaceComponent<T = {}>(replacerName: string | string[], OriginalComponent: ReactComponent<T>, componentName?: string): React.MemoExoticComponent<any>;
-export declare type ReplaceFragmentPropsType = {
+export declare function replaceComponent<T = {}>(replacerName: string | string[], OriginalComponent: ReactComponent<T>, componentName?: string): any;
+export type ReplaceFragmentPropsType = {
     replacerName: string | string[];
     fragmentName?: string;
+    children?: React.ReactNode;
 };
-export declare const ReplaceFragment: React.FC<ReplaceFragmentPropsType>;
-export declare function RunActionAnchor(anchor: string, ...args: any[]): void;
-export declare function RunOverrideActionAnchor(action: Action): Action<any>;
-export declare const getPluginsAdditionalRoutes: () => Record<string, ReactComponent<any>>;
-export declare const clearPlugins: () => void;
+export declare const ReplaceFragment: ({ replacerName, fragmentName, children, }: ReplaceFragmentPropsType) => import("react/jsx-runtime").JSX.Element;
+export declare function registerReplacer(replacerName: string, Replacer: ReactComponent<any>): void;
+export declare function loadPlugins(plugins: Record<string, () => Promise<IPlugin>>): Promise<any>;
+export declare function getPluginsReducers(): Record<string, Reducer<Record<string, any>, any>>;
+export declare function getPluginsAdditionalRoutes(): IPluginConfig[];
+export declare function getPluginsSagas(): Saga[];
+export declare function clearPlugins(): void;
+export declare const RunActionAnchor: () => void;
+export declare const RunOverrideActionAnchor: () => void;
+export declare const registerPluginsAppStates: () => void;
+export declare const getPluginsStoreReducers: typeof getPluginsReducers;
+export declare const getPluginsStoreSagas: typeof getPluginsSagas;
 export {};