fix: Removed the nextjs dependency

Author: fergusbissetnhs

dist/src/nextjs.js

@@ -673,14 +673,6 @@
     "react-dom": "19.2.1",
     "sass": "^1.94.2"
   },
-  "peerDependencies": {
-    "next": ">=13.4.0 || ^14 || ^15"
-  },
-  "peerDependenciesMeta": {
-    "next": {
-      "optional": true
-    }
-  },
   "eslintConfig": {
     "extends": [
       "plugin:storybook/recommended"

dist/src/nextjs.js.map

@@ -1,8 +1,14 @@
-// Deprecated wrapper kept for backward compatibility. Preferred import path:
-// import { useNavigationSplitNextUrlSync } from '@nhsdigital/fdp-design-system/nextjs'
-// This wrapper avoids static imports of next/navigation and delegates to the
-// real implementation only when available.
-// (React not required directly in wrapper)
+/**
+ * @deprecated This hook is deprecated and will be removed in a future version.
+ * 
+ * Use the framework-agnostic `useNavigationSplitUrlSync` instead:
+ * ```ts
+ * import { useNavigationSplitUrlSync } from '@nhsdigital/fdp-design-system';
+ * ```
+ * 
+ * For Next.js App Router integration, create your own wrapper - see the
+ * JSDoc in src/nextjs/useNavigationSplitNextUrlSync.ts for an example.
+ */
 
 function tryLoad<T = any>(mod: string): T | null {
   try {
@@ -21,20 +27,30 @@ export interface UseNavigationSplitNextUrlSyncOptions {
 }
 
 /**
- * useNavigationSplitNextUrlSync
+ * @deprecated Use `useNavigationSplitUrlSync` from the main entry instead.
+ * This Next.js-specific hook will be removed in a future version.
+ * 
  * Integrates NavigationSplitView state with the Next.js App Router.
  * Keeps selection + drill (three-column) state in the query string using
  * router.replace (default) or router.push. Scroll is suppressed by default.
  */
 export function useNavigationSplitNextUrlSync<ID = string>(options: UseNavigationSplitNextUrlSyncOptions = {}) {
+  // Emit deprecation warning
+  if (typeof console !== 'undefined' && process.env.NODE_ENV !== 'production') {
+    console.warn(
+      '[useNavigationSplitNextUrlSync] DEPRECATED: This hook will be removed in a future version. ' +
+      'Use useNavigationSplitUrlSync from the main entry, or create your own Next.js wrapper.'
+    );
+  }
+
   const impl = tryLoad('@nhsdigital/fdp-design-system/dist/src/nextjs/useNavigationSplitNextUrlSync.js')
     || tryLoad('@nhsdigital/fdp-design-system/src/nextjs/useNavigationSplitNextUrlSync');
   if (impl && typeof impl.useNavigationSplitNextUrlSync === 'function') {
-  // Invoke underlying implementation (loss of generic inference acceptable for wrapper)
-  return (impl.useNavigationSplitNextUrlSync as (o: UseNavigationSplitNextUrlSyncOptions)=>any)(options);
+    // Invoke underlying implementation (loss of generic inference acceptable for wrapper)
+    return (impl.useNavigationSplitNextUrlSync as (o: UseNavigationSplitNextUrlSyncOptions)=>any)(options);
   }
   if (process.env.NODE_ENV !== 'production') {
-    console.warn('[useNavigationSplitNextUrlSync] Loaded legacy wrapper without Next.js context. Switch to importing from /nextjs entry for full functionality.');
+    console.warn('[useNavigationSplitNextUrlSync] Loaded legacy wrapper without Next.js context. Switch to using useNavigationSplitUrlSync from the main entry.');
   }
   return {
     selectedId: undefined as ID | undefined,

package.json

@@ -1,5 +1,38 @@
-// NHS FDP Design System - Next.js Style Loader
-// Optimised CSS loading for Next.js applications
+/**
+ * NHS FDP Design System - Next.js Entry Point
+ * 
+ * @deprecated This entry point is deprecated and will be removed in a future version.
+ * 
+ * Migration guide:
+ * 
+ * 1. For URL sync hooks, use the framework-agnostic version:
+ *    ```ts
+ *    import { useNavigationSplitUrlSync } from '@nhsdigital/fdp-design-system';
+ *    ```
+ *    Or create your own Next.js-specific wrapper (see useNavigationSplitNextUrlSync.ts for example).
+ * 
+ * 2. For behaviour initialization, create your own client component:
+ *    ```tsx
+ *    // app/components/BehavioursInit.tsx
+ *    "use client";
+ *    import { useEffect } from "react";
+ *    
+ *    export function BehavioursInit() {
+ *      useEffect(() => {
+ *        import("@nhsdigital/fdp-design-system/behaviours").then(({ initAll }) => {
+ *          if (typeof initAll === "function") initAll(document);
+ *        });
+ *      }, []);
+ *      return null;
+ *    }
+ *    ```
+ * 
+ * 3. For core components and styles, import from the main entry:
+ *    ```ts
+ *    import { Button, Card } from '@nhsdigital/fdp-design-system';
+ *    import '@nhsdigital/fdp-design-system/css';
+ *    ```
+ */
 
 // Core styles (load in layout.tsx)
 // Align path with core.ts which imports from styles folder
@@ -8,10 +41,12 @@ import './styles/core.scss';
 // Re-export core components for convenience
 export * from './core';
 
-// Next.js-specific hooks (sourced from dedicated nextjs folder)
+// Next.js-specific hooks (deprecated - use useNavigationSplitUrlSync from main entry)
+/** @deprecated Use useNavigationSplitUrlSync from main entry instead */
 export { useNavigationSplitNextUrlSync } from './nextjs/useNavigationSplitNextUrlSync';
 
-// Next.js-specific behaviour initialization (no "use client" required)
+// Next.js-specific behaviour initialization (deprecated - create your own)
+/** @deprecated Create your own BehavioursInit component in your app */
 export { InitBehaviours, InitBehavioursInline } from './nextjs/InitBehaviours';
-// Client-side behaviours initializer (use in a small client island)
+/** @deprecated Create your own BehavioursInit component in your app */
 export { NHSBehavioursInit } from './nextjs/NHSBehavioursInit';

src/hooks/useNavigationSplitNextUrlSync.ts

@@ -1,36 +1,24 @@
 /**
- * DEPRECATED: Use <NHSBehavioursInit /> instead.
- * This wrapper forwards to the client-only component to ensure bundler-safe behaviour loading.
+ * @deprecated These components are deprecated and will be removed in a future version.
+ * 
+ * Create your own BehavioursInit component in your Next.js app instead.
+ * See NHSBehavioursInit.tsx for migration guidance and example code.
  */
 import { NHSBehavioursInit } from './NHSBehavioursInit';
 
-/** @deprecated Use <NHSBehavioursInit /> instead. */
+/**
+ * @deprecated Use your own BehavioursInit component instead.
+ * See NHSBehavioursInit.tsx for migration guidance.
+ */
 export function InitBehaviours() {
 	// Forward to the client component. This avoids brittle inline script imports.
 	return <NHSBehavioursInit />;
 }
 
 /**
- * Alternative: Direct inline initialization (no dynamic import)
- * Use this if you want behaviours bundled with your app bundle
- * 
- * @example
- * ```tsx
- * import { InitBehavioursInline } from '@nhsdigital/fdp-design-system/nextjs'
- * 
- * export default function RootLayout({ children }) {
- *   return (
- *     <html>
- *       <body>
- *         {children}
- *         <InitBehavioursInline />
- *       </body>
- *     </html>
- *   )
- * }
- * ```
+ * @deprecated Use your own BehavioursInit component instead.
+ * See NHSBehavioursInit.tsx for migration guidance.
  */
-/** @deprecated Use <NHSBehavioursInit /> instead. */
 export function InitBehavioursInline() {
 	return <NHSBehavioursInit />;
 }

src/nextjs.ts

@@ -1,26 +1,71 @@
 "use client";
 
 /**
- * Client-only behaviours initializer for Next.js apps.
- *
- * Purpose:
- * - Ensures the behaviours bundle is included in the consuming app's client build
- * - Exposes expected globals for the SSR header inline script
- * - Triggers initialisation after hydration
- *
- * Usage (App Router):
- *   import { NHSBehavioursInit } from '@nhsdigital/fdp-design-system/nextjs';
- *   // in app/layout.tsx (Server Component)
- *   <body>
- *     <NHSBehavioursInit />
- *     <HeaderServer ... />
- *     {children}
- *   </body>
+ * @deprecated This component is deprecated and will be removed in a future version.
+ * 
+ * Instead, create your own client-side behaviours initializer in your Next.js app:
+ * 
+ * ```tsx
+ * // app/components/BehavioursInit.tsx
+ * "use client";
+ * import { useEffect } from "react";
+ * 
+ * export function BehavioursInit() {
+ *   useEffect(() => {
+ *     let cancelled = false;
+ *     (async () => {
+ *       try {
+ *         const { initAll } = await import("@nhsdigital/fdp-design-system/behaviours");
+ *         if (!cancelled && typeof initAll === "function") {
+ *           initAll(document);
+ *         }
+ *       } catch (err) {
+ *         console.error("Failed to load behaviours", err);
+ *       }
+ *     })();
+ *     return () => { cancelled = true; };
+ *   }, []);
+ *   return null;
+ * }
+ * ```
+ * 
+ * Then use it in your layout:
+ * ```tsx
+ * // app/layout.tsx
+ * import { BehavioursInit } from "./components/BehavioursInit";
+ * 
+ * export default function RootLayout({ children }) {
+ *   return (
+ *     <html>
+ *       <body>
+ *         {children}
+ *         <BehavioursInit />
+ *       </body>
+ *     </html>
+ *   );
+ * }
+ * ```
+ * 
+ * This approach removes the Next.js dependency from the design system while
+ * giving you full control over when and how behaviours are initialized.
  */
 import { useEffect } from "react";
 
+/**
+ * @deprecated Create your own BehavioursInit component in your app instead.
+ * See the JSDoc above for migration guidance.
+ */
 export function NHSBehavioursInit() {
 	useEffect(() => {
+		// Emit deprecation warning once
+		if (process.env.NODE_ENV !== 'production') {
+			console.warn(
+				'[NHSBehavioursInit] DEPRECATED: This component will be removed in a future version. ' +
+				'Create your own BehavioursInit component in your app instead. ' +
+				'See the JSDoc comments for migration guidance.'
+			);
+		}
+
 		let cancelled = false;
 
 		(async () => {