fix: storybook

Author: eugeneshulga869

apps/csk-marketing-site/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/csk-marketing-site",
-  "version": "7.0.0",
+  "version": "7.0.1",
   "private": true,
   "engines": {
     "yarn": "please-use-npm",

apps/csk-storybook/.storybook/main.ts

@@ -1,7 +1,7 @@
 import { createRequire } from 'node:module';
 import { dirname, join } from 'node:path';
 import { fileURLToPath } from 'node:url';
-import type { Configuration } from 'webpack';
+import webpack, { type Configuration } from 'webpack';
 import type { StorybookConfig } from '@storybook/nextjs';
 
 const require = createRequire(import.meta.url);
@@ -38,6 +38,16 @@ const config: StorybookConfig = {
 
     config.resolve.modules = [...modulesArray, join(appDir, 'node_modules'), join(rootDir, 'node_modules')];
 
+    // Inject fake Uniform credentials so the SDK's ApiClient constructs without a real key.
+    // The manifest request these would authenticate is mocked in .storybook/preview.ts.
+    config.plugins = config.plugins ?? [];
+    config.plugins.push(
+      new webpack.DefinePlugin({
+        'process.env.UNIFORM_API_KEY': JSON.stringify('storybook-fake-key'),
+        'process.env.UNIFORM_PROJECT_ID': JSON.stringify('storybook-fake-project'),
+      })
+    );
+
     return config;
   },
 };

apps/csk-storybook/.storybook/preview.ts

@@ -5,8 +5,38 @@ import '../src/styles/dimensions.css';
 import '../src/styles/fonts.css';
 import '../src/styles/borders.css';
 
+// The Uniform SDK's UniformContext fetches the Context manifest while rendering a composition.
+// Stories use fake data and no real API key, so intercept that request and return an empty
+// manifest. All other requests pass through untouched.
+type MockableFetch = typeof window.fetch & { __uniformMock?: boolean };
+
+if (typeof window !== 'undefined' && !(window.fetch as MockableFetch).__uniformMock) {
+  const originalFetch = window.fetch.bind(window);
+  const mockFetch: MockableFetch = (input, init) => {
+    const url = typeof input === 'string' ? input : input instanceof Request ? input.url : String(input);
+    if (url.includes('/api/v2/manifest')) {
+      return Promise.resolve(
+        new Response(JSON.stringify({ project: { pz: { sig: {}, enr: {}, agg: {} }, test: {} } }), {
+          status: 200,
+          headers: { 'content-type': 'application/json' },
+        })
+      );
+    }
+    return originalFetch(input, init);
+  };
+  mockFetch.__uniformMock = true;
+  window.fetch = mockFetch;
+}
+
 const preview: Preview = {
   parameters: {
+    // Components rendered via UniformComposition use App Router hooks (next/navigation).
+    // appDirectory: true makes @storybook/nextjs initialize the navigation mock for every
+    // story — required for the production build, where it is otherwise not created in time.
+    nextjs: {
+      appDirectory: true,
+      navigation: { pathname: '/', query: {} },
+    },
     controls: {
       matchers: {
         color: /(background|color)$/i,

apps/csk-storybook/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/csk-storybook",
-  "version": "7.0.0",
+  "version": "7.0.1",
   "description": "CSK vNext Storybook is an interactive Storybook build showcasing components from the CSK vNext component starter kit. It provides detailed documentation, live previews, and testing capabilities for easy integration into your projects.",
   "main": "index.js",
   "scripts": {
@@ -23,6 +23,7 @@
     "@uniformdev/csk-components": "*",
     "@uniformdev/design-extensions-tools": "*",
     "@uniformdev/next-app-router": "^20.66.2",
+    "@uniformdev/next-app-router-shared": "^20.66.2",
     "eslint-plugin-storybook": "^10.4.0",
     "next": "^16.2.6",
     "next-themes": "^0.4.6",

apps/csk-storybook/src/utils/index.ts

@@ -1,6 +1,7 @@
 import { ComponentInstance } from '@uniformdev/canvas';
 
-import { resolveRouteFromCode } from '@uniformdev/next-app-router';
+import { ResolveRouteFunction, resolveRouteFromCode } from '@uniformdev/next-app-router';
+import { serializeEvaluationResult } from '@uniformdev/next-app-router-shared';
 
 interface UniformMockParam {
   type: string;
@@ -25,15 +26,22 @@ export const createFakeCompositionData = (
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   params: Record<string, any>,
   slots?: Record<string, ComponentInstance[]>
-): Awaited<ReturnType<typeof resolveRouteFromCode>> => {
-  return {
-    pageState: {
-      compositionState: 64,
-      routePath: 'fake-route-path',
-      components: {},
-      keys: {},
-      releaseId: 'fake-release-id',
-    },
+): { code: string; resolveRoute: ResolveRouteFunction } => {
+  const pageState = {
+    compositionState: 64,
+    routePath: 'fake-route-path',
+    components: {},
+    keys: {},
+    releaseId: 'fake-release-id',
+    rules: undefined,
+    defaultConsent: undefined,
+    previewMode: undefined,
+    locale: undefined,
+    isPrefetch: undefined,
+  };
+
+  const result: Awaited<ReturnType<typeof resolveRouteFromCode>> = {
+    pageState,
     route: {
       type: 'composition',
       matchedRoute: '/',
@@ -54,6 +62,11 @@ export const createFakeCompositionData = (
         pattern: false,
       },
     },
-    code: 'fake-code',
+    code: serializeEvaluationResult({ payload: pageState }),
+  };
+
+  return {
+    code: result.code,
+    resolveRoute: async () => result,
   };
 };

apps/csk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/component-starter-kit",
-  "version": "7.0.0",
+  "version": "7.0.1",
   "private": true,
   "engines": {
     "yarn": "please-use-npm",