From b3e8ea8650027824f42488d6b52555f810e91d2f Mon Sep 17 00:00:00 2001 From: yatishgoel <58841989+yatishgoel@users.noreply.github.com> Date: Sun, 27 Apr 2025 03:50:44 +0530 Subject: [PATCH 1/5] feat: Update Storybook Header component and related configurations --- code/frameworks/nextjs/package.json | 4 ++++ .../nextjs/src/export-mocks/link/index.tsx | 13 +++++++++++++ code/frameworks/nextjs/src/export-mocks/webpack.ts | 1 + 3 files changed, 18 insertions(+) create mode 100644 code/frameworks/nextjs/src/export-mocks/link/index.tsx diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index dfe5d35447b8..861192da92a1 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -41,6 +41,10 @@ "types": "./dist/export-mocks/headers/index.d.ts", "default": "./dist/export-mocks/headers/index.js" }, + "./link.mock": { + "types": "./dist/export-mocks/link/index.d.ts", + "default": "./dist/export-mocks/link/index.js" + }, "./image-context": "./dist/image-context.js", "./images/next-image": "./dist/images/next-image.js", "./images/next-legacy-image": "./dist/images/next-legacy-image.js", diff --git a/code/frameworks/nextjs/src/export-mocks/link/index.tsx b/code/frameworks/nextjs/src/export-mocks/link/index.tsx new file mode 100644 index 000000000000..a0ea88e0c3a8 --- /dev/null +++ b/code/frameworks/nextjs/src/export-mocks/link/index.tsx @@ -0,0 +1,13 @@ +import React from 'react'; + +import { fn } from 'storybook/test'; + +// Mock implementation for next/link +const mockLink = fn().mockName('next/link::Link'); + +const linkExports = { + default: mockLink, +}; + +export default linkExports.default; +export { mockLink as Link }; diff --git a/code/frameworks/nextjs/src/export-mocks/webpack.ts b/code/frameworks/nextjs/src/export-mocks/webpack.ts index b5a813535737..9daaecee3a76 100644 --- a/code/frameworks/nextjs/src/export-mocks/webpack.ts +++ b/code/frameworks/nextjs/src/export-mocks/webpack.ts @@ -7,6 +7,7 @@ const mapping = { 'next/navigation': '@storybook/nextjs/navigation.mock', 'next/router': '@storybook/nextjs/router.mock', 'next/cache': '@storybook/nextjs/cache.mock', + 'next/link': '@storybook/nextjs/link.mock', ...getCompatibilityAliases(), }; From e9b5ab17dc751c0ff7d69d4726e9d325e504f1d1 Mon Sep 17 00:00:00 2001 From: yatishgoel Date: Thu, 5 Feb 2026 11:20:23 +0530 Subject: [PATCH 2/5] Update Next.js package.json to include code path for link mock --- code/frameworks/nextjs/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 824757645710..05fc7173b858 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -46,6 +46,7 @@ }, "./link.mock": { "types": "./dist/export-mocks/link/index.d.ts", + "code": "./src/export-mocks/link/index.tsx", "default": "./dist/export-mocks/link/index.js" }, "./image-context": "./dist/image-context.js", From 41d88568b89033ad4cf2f4ae5a7b284b10e98dfc Mon Sep 17 00:00:00 2001 From: yatishgoel Date: Sat, 7 Feb 2026 15:02:46 +0530 Subject: [PATCH 3/5] Enhance Next.js build configuration by adding link mock entry and updating package.json to include new export mappings for link mock and related images. --- code/frameworks/nextjs/build-config.ts | 4 ++++ code/frameworks/nextjs/package.json | 6 +++--- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/code/frameworks/nextjs/build-config.ts b/code/frameworks/nextjs/build-config.ts index e7c8f55e43c4..bcc08973d6d9 100644 --- a/code/frameworks/nextjs/build-config.ts +++ b/code/frameworks/nextjs/build-config.ts @@ -28,6 +28,10 @@ const config: BuildEntries = { exportEntries: ['./navigation.mock'], entryPoint: './src/export-mocks/navigation/index.ts', }, + { + exportEntries: ['./link.mock'], + entryPoint: './src/export-mocks/link/index.tsx', + }, { exportEntries: ['./router.mock'], entryPoint: './src/export-mocks/router/index.ts', diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 4f3dd65b1652..2e92cca7391d 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -44,14 +44,14 @@ "code": "./src/export-mocks/headers/index.ts", "default": "./dist/export-mocks/headers/index.js" }, + "./image-context": "./dist/image-context.js", + "./images/next-image": "./dist/images/next-image.js", + "./images/next-legacy-image": "./dist/images/next-legacy-image.js", "./link.mock": { "types": "./dist/export-mocks/link/index.d.ts", "code": "./src/export-mocks/link/index.tsx", "default": "./dist/export-mocks/link/index.js" }, - "./image-context": "./dist/image-context.js", - "./images/next-image": "./dist/images/next-image.js", - "./images/next-legacy-image": "./dist/images/next-legacy-image.js", "./navigation.mock": { "types": "./dist/export-mocks/navigation/index.d.ts", "code": "./src/export-mocks/navigation/index.ts", From 7bc1553fb5c00446766221422fdde8ecf7e70748 Mon Sep 17 00:00:00 2001 From: yatishgoel Date: Mon, 9 Feb 2026 18:52:40 +0530 Subject: [PATCH 4/5] Refactor Next.js link mock implementation to enhance functionality and improve click handling. The MockLink component now constructs href strings from object types and prevents default link behavior while invoking the mock action. --- .../nextjs/src/export-mocks/link/index.tsx | 47 +++++++++++++++---- 1 file changed, 39 insertions(+), 8 deletions(-) diff --git a/code/frameworks/nextjs/src/export-mocks/link/index.tsx b/code/frameworks/nextjs/src/export-mocks/link/index.tsx index a0ea88e0c3a8..f52293429549 100644 --- a/code/frameworks/nextjs/src/export-mocks/link/index.tsx +++ b/code/frameworks/nextjs/src/export-mocks/link/index.tsx @@ -1,13 +1,44 @@ import React from 'react'; - import { fn } from 'storybook/test'; -// Mock implementation for next/link -const mockLink = fn().mockName('next/link::Link'); +const linkAction = fn().mockName('next/link::Link'); + +const MockLink = React.forwardRef(function MockLink( + { + href, + as: _as, + replace, + scroll, + shallow, + prefetch, + passHref, + legacyBehavior, + locale, + onClick, + children, + ...rest + }, + ref +) { + const hrefString = + typeof href === 'object' + ? `${href.pathname || ''}${href.query ? '?' + new URLSearchParams(href.query).toString() : ''}${href.hash || ''}` + : href; + + const handleClick = (e: React.MouseEvent) => { + e.preventDefault(); + onClick?.(e); + linkAction(hrefString, { replace, scroll, shallow, prefetch, locale }); + }; + + return ( + + {children} + + ); +}); -const linkExports = { - default: mockLink, -}; +MockLink.displayName = 'NextLink'; -export default linkExports.default; -export { mockLink as Link }; +export default MockLink; +export { MockLink as Link }; From 27628cd03d2f2688a11919947e0bc15bc76a2705 Mon Sep 17 00:00:00 2001 From: yatishgoel Date: Mon, 9 Feb 2026 20:02:29 +0530 Subject: [PATCH 5/5] Fix: Add missing import statement in Next.js link mock implementation to ensure proper functionality of the mock action. --- code/frameworks/nextjs/src/export-mocks/link/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/code/frameworks/nextjs/src/export-mocks/link/index.tsx b/code/frameworks/nextjs/src/export-mocks/link/index.tsx index f52293429549..2237a67f7cc6 100644 --- a/code/frameworks/nextjs/src/export-mocks/link/index.tsx +++ b/code/frameworks/nextjs/src/export-mocks/link/index.tsx @@ -1,4 +1,5 @@ import React from 'react'; + import { fn } from 'storybook/test'; const linkAction = fn().mockName('next/link::Link');