From d8e8900aef1794e845df0b984a80de070fb96843 Mon Sep 17 00:00:00 2001 From: piratetaco <145042187+piratetaco@users.noreply.github.com> Date: Wed, 24 Jan 2024 10:43:24 -0600 Subject: [PATCH 01/11] fix(next): forward Image exports through mock to support getImageProps --- code/frameworks/nextjs/src/images/next-image.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/code/frameworks/nextjs/src/images/next-image.tsx b/code/frameworks/nextjs/src/images/next-image.tsx index f2e2d9d1467c..aaf617b85813 100644 --- a/code/frameworks/nextjs/src/images/next-image.tsx +++ b/code/frameworks/nextjs/src/images/next-image.tsx @@ -1,6 +1,6 @@ // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore import is aliased in webpack config -import OriginalNextImage from 'sb-original/next/image'; +import * as NextImage from 'sb-original/next/image'; import type * as _NextImage from 'next/image'; import React from 'react'; @@ -11,6 +11,7 @@ import { ImageContext as ImageContextValue } from '@storybook/nextjs/dist/image- import { type ImageContext as ImageContextType } from '../image-context'; import { defaultLoader } from './next-image-default-loader'; +const OriginalNextImage = NextImage.default const ImageContext = ImageContextValue as typeof ImageContextType; const MockedNextImage = React.forwardRef( @@ -30,4 +31,5 @@ const MockedNextImage = React.forwardRef Date: Wed, 24 Jan 2024 11:02:19 -0600 Subject: [PATCH 02/11] fix: short and sweet cleaner reexport --- code/frameworks/nextjs/src/images/next-image.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/code/frameworks/nextjs/src/images/next-image.tsx b/code/frameworks/nextjs/src/images/next-image.tsx index aaf617b85813..4d3229265085 100644 --- a/code/frameworks/nextjs/src/images/next-image.tsx +++ b/code/frameworks/nextjs/src/images/next-image.tsx @@ -1,6 +1,6 @@ // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore import is aliased in webpack config -import * as NextImage from 'sb-original/next/image'; +import OriginalNextImage from 'sb-original/next/image'; import type * as _NextImage from 'next/image'; import React from 'react'; @@ -11,7 +11,6 @@ import { ImageContext as ImageContextValue } from '@storybook/nextjs/dist/image- import { type ImageContext as ImageContextType } from '../image-context'; import { defaultLoader } from './next-image-default-loader'; -const OriginalNextImage = NextImage.default const ImageContext = ImageContextValue as typeof ImageContextType; const MockedNextImage = React.forwardRef( @@ -31,5 +30,5 @@ const MockedNextImage = React.forwardRef Date: Wed, 24 Jan 2024 11:43:05 -0600 Subject: [PATCH 03/11] fix: apply defaultLoader to getImageProps mock --- code/frameworks/nextjs/src/images/next-image.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/code/frameworks/nextjs/src/images/next-image.tsx b/code/frameworks/nextjs/src/images/next-image.tsx index 4d3229265085..36dde69cecac 100644 --- a/code/frameworks/nextjs/src/images/next-image.tsx +++ b/code/frameworks/nextjs/src/images/next-image.tsx @@ -1,7 +1,8 @@ // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore import is aliased in webpack config -import OriginalNextImage from 'sb-original/next/image'; +import * as NextImageNamespace from 'sb-original/next/image'; import type * as _NextImage from 'next/image'; + import React from 'react'; // eslint-disable-next-line @typescript-eslint/ban-ts-comment @@ -11,6 +12,8 @@ import { ImageContext as ImageContextValue } from '@storybook/nextjs/dist/image- import { type ImageContext as ImageContextType } from '../image-context'; import { defaultLoader } from './next-image-default-loader'; +const OriginalNextImage = NextImageNamespace.default +const { getImageProps: originalGetImageProps } = NextImageNamespace const ImageContext = ImageContextValue as typeof ImageContextType; const MockedNextImage = React.forwardRef( @@ -30,5 +33,6 @@ const MockedNextImage = React.forwardRef originalGetImageProps?.({ loader: defaultLoader, ...props}) + export default MockedNextImage; -export * from 'sb-original/next/image'; From 01a1de380000325ef4bfad49dca21029a4967d14 Mon Sep 17 00:00:00 2001 From: piratetaco <145042187+piratetaco@users.noreply.github.com> Date: Wed, 24 Jan 2024 12:00:36 -0600 Subject: [PATCH 04/11] type mock getImageProps --- code/frameworks/nextjs/src/images/next-image.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/frameworks/nextjs/src/images/next-image.tsx b/code/frameworks/nextjs/src/images/next-image.tsx index 36dde69cecac..1511acb640e0 100644 --- a/code/frameworks/nextjs/src/images/next-image.tsx +++ b/code/frameworks/nextjs/src/images/next-image.tsx @@ -33,6 +33,6 @@ const MockedNextImage = React.forwardRef originalGetImageProps?.({ loader: defaultLoader, ...props}) +export const getImageProps = (props: _NextImage.ImageProps) => originalGetImageProps?.({ loader: defaultLoader, ...props}) export default MockedNextImage; From 16e22d10629efaf3e0bc0394abbbe47f1b2be256 Mon Sep 17 00:00:00 2001 From: piratetaco <145042187+piratetaco@users.noreply.github.com> Date: Thu, 25 Jan 2024 09:39:37 -0600 Subject: [PATCH 05/11] docs: create get-image-props.stories.tsx --- .../get-image-props.stories.tsx | 34 +++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 code/frameworks/nextjs/template/stories_nextjs-default-ts/get-image-props.stories.tsx diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/get-image-props.stories.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-ts/get-image-props.stories.tsx new file mode 100644 index 000000000000..fcd8d15f5a9c --- /dev/null +++ b/code/frameworks/nextjs/template/stories_nextjs-default-ts/get-image-props.stories.tsx @@ -0,0 +1,34 @@ +import { type ImageProps, getImageProps } from 'next/image'; +import React from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; + +import Accessibility from '../../assets/accessibility.svg'; +import Testing from '../../assets/testing.png'; + +// referenced from https://nextjs.org/docs/pages/api-reference/components/image#theme-detection-picture +const Component = (props: Omit) => { + const { + props: { srcSet: dark }, + } = getImageProps({ src: Accessibility, ...props }); + const { + // capture rest on one to spread to img as default; it doesn't matter which barring art direction + props: { srcSet: light, ...rest }, + } = getImageProps({ src: Testing, ...props }); + + return ( + + + + + + ); +}; + +export default { + component: Component, + args: { + alt: 'getImageProps Example', + } +} as Meta; + +export const Default: StoryObj = {}; From 5568ae341c83cf00829fab3bf191442534732c9c Mon Sep 17 00:00:00 2001 From: piratetaco <145042187+piratetaco@users.noreply.github.com> Date: Thu, 25 Jan 2024 11:13:36 -0600 Subject: [PATCH 06/11] Update next-image.tsx semi-colons --- code/frameworks/nextjs/src/images/next-image.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/code/frameworks/nextjs/src/images/next-image.tsx b/code/frameworks/nextjs/src/images/next-image.tsx index 1511acb640e0..dde5fc6c03d3 100644 --- a/code/frameworks/nextjs/src/images/next-image.tsx +++ b/code/frameworks/nextjs/src/images/next-image.tsx @@ -12,8 +12,8 @@ import { ImageContext as ImageContextValue } from '@storybook/nextjs/dist/image- import { type ImageContext as ImageContextType } from '../image-context'; import { defaultLoader } from './next-image-default-loader'; -const OriginalNextImage = NextImageNamespace.default -const { getImageProps: originalGetImageProps } = NextImageNamespace +const OriginalNextImage = NextImageNamespace.default; +const { getImageProps: originalGetImageProps } = NextImageNamespace; const ImageContext = ImageContextValue as typeof ImageContextType; const MockedNextImage = React.forwardRef( @@ -33,6 +33,7 @@ const MockedNextImage = React.forwardRef originalGetImageProps?.({ loader: defaultLoader, ...props}) +export const getImageProps = (props: _NextImage.ImageProps) => + originalGetImageProps?.({ loader: defaultLoader, ...props}) export default MockedNextImage; From d197a176a1705352547a4fe9be584a34173806d2 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 31 Jan 2024 15:14:29 +0100 Subject: [PATCH 07/11] Fix linting --- code/frameworks/nextjs/src/images/next-image.tsx | 2 +- .../stories_nextjs-default-ts/get-image-props.stories.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/code/frameworks/nextjs/src/images/next-image.tsx b/code/frameworks/nextjs/src/images/next-image.tsx index dde5fc6c03d3..ea1e1f2eb844 100644 --- a/code/frameworks/nextjs/src/images/next-image.tsx +++ b/code/frameworks/nextjs/src/images/next-image.tsx @@ -34,6 +34,6 @@ const MockedNextImage = React.forwardRef - originalGetImageProps?.({ loader: defaultLoader, ...props}) + originalGetImageProps?.({ loader: defaultLoader, ...props }); export default MockedNextImage; diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/get-image-props.stories.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-ts/get-image-props.stories.tsx index fcd8d15f5a9c..97802c57d203 100644 --- a/code/frameworks/nextjs/template/stories_nextjs-default-ts/get-image-props.stories.tsx +++ b/code/frameworks/nextjs/template/stories_nextjs-default-ts/get-image-props.stories.tsx @@ -28,7 +28,7 @@ export default { component: Component, args: { alt: 'getImageProps Example', - } + }, } as Meta; export const Default: StoryObj = {}; From 02094d214824204b61e4526af27d4f988e6d3584 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 31 Jan 2024 15:14:35 +0100 Subject: [PATCH 08/11] Update Next.js --- code/frameworks/nextjs/package.json | 2 +- code/yarn.lock | 106 +++++++++++++++------------- 2 files changed, 57 insertions(+), 51 deletions(-) diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 7922773e700a..de9ffba159b7 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -128,7 +128,7 @@ "@types/babel__preset-env": "^7", "@types/loader-utils": "^2.0.5", "@types/react-refresh": "^0", - "next": "^14.0.2", + "next": "^14.1.0", "typescript": "^5.3.2", "webpack": "^5.65.0" }, diff --git a/code/yarn.lock b/code/yarn.lock index 7ba452bc433f..71daa18e2e13 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -3683,72 +3683,72 @@ __metadata: languageName: node linkType: hard -"@next/env@npm:14.0.4": - version: 14.0.4 - resolution: "@next/env@npm:14.0.4" - checksum: 59b893d30aea0556379a24f6e4eac830677feb149bd8416b72383ea2600ce194fa22a79b2dd86e0b295c4a8f0702e461f48edaff1ac9173eddef42a4cce7fd98 +"@next/env@npm:14.1.0": + version: 14.1.0 + resolution: "@next/env@npm:14.1.0" + checksum: f45ce1e3dad87cdbddc58b06bd411f44a6d21dfc2c344d02a5e1b07f56fbc9a39e192c0b0917df9f2e9e4e2156306a8c78f173ca4b53932c2793e67797462a23 languageName: node linkType: hard -"@next/swc-darwin-arm64@npm:14.0.4": - version: 14.0.4 - resolution: "@next/swc-darwin-arm64@npm:14.0.4" +"@next/swc-darwin-arm64@npm:14.1.0": + version: 14.1.0 + resolution: "@next/swc-darwin-arm64@npm:14.1.0" conditions: os=darwin & cpu=arm64 languageName: node linkType: hard -"@next/swc-darwin-x64@npm:14.0.4": - version: 14.0.4 - resolution: "@next/swc-darwin-x64@npm:14.0.4" +"@next/swc-darwin-x64@npm:14.1.0": + version: 14.1.0 + resolution: "@next/swc-darwin-x64@npm:14.1.0" conditions: os=darwin & cpu=x64 languageName: node linkType: hard -"@next/swc-linux-arm64-gnu@npm:14.0.4": - version: 14.0.4 - resolution: "@next/swc-linux-arm64-gnu@npm:14.0.4" +"@next/swc-linux-arm64-gnu@npm:14.1.0": + version: 14.1.0 + resolution: "@next/swc-linux-arm64-gnu@npm:14.1.0" conditions: os=linux & cpu=arm64 & libc=glibc languageName: node linkType: hard -"@next/swc-linux-arm64-musl@npm:14.0.4": - version: 14.0.4 - resolution: "@next/swc-linux-arm64-musl@npm:14.0.4" +"@next/swc-linux-arm64-musl@npm:14.1.0": + version: 14.1.0 + resolution: "@next/swc-linux-arm64-musl@npm:14.1.0" conditions: os=linux & cpu=arm64 & libc=musl languageName: node linkType: hard -"@next/swc-linux-x64-gnu@npm:14.0.4": - version: 14.0.4 - resolution: "@next/swc-linux-x64-gnu@npm:14.0.4" +"@next/swc-linux-x64-gnu@npm:14.1.0": + version: 14.1.0 + resolution: "@next/swc-linux-x64-gnu@npm:14.1.0" conditions: os=linux & cpu=x64 & libc=glibc languageName: node linkType: hard -"@next/swc-linux-x64-musl@npm:14.0.4": - version: 14.0.4 - resolution: "@next/swc-linux-x64-musl@npm:14.0.4" +"@next/swc-linux-x64-musl@npm:14.1.0": + version: 14.1.0 + resolution: "@next/swc-linux-x64-musl@npm:14.1.0" conditions: os=linux & cpu=x64 & libc=musl languageName: node linkType: hard -"@next/swc-win32-arm64-msvc@npm:14.0.4": - version: 14.0.4 - resolution: "@next/swc-win32-arm64-msvc@npm:14.0.4" +"@next/swc-win32-arm64-msvc@npm:14.1.0": + version: 14.1.0 + resolution: "@next/swc-win32-arm64-msvc@npm:14.1.0" conditions: os=win32 & cpu=arm64 languageName: node linkType: hard -"@next/swc-win32-ia32-msvc@npm:14.0.4": - version: 14.0.4 - resolution: "@next/swc-win32-ia32-msvc@npm:14.0.4" +"@next/swc-win32-ia32-msvc@npm:14.1.0": + version: 14.1.0 + resolution: "@next/swc-win32-ia32-msvc@npm:14.1.0" conditions: os=win32 & cpu=ia32 languageName: node linkType: hard -"@next/swc-win32-x64-msvc@npm:14.0.4": - version: 14.0.4 - resolution: "@next/swc-win32-x64-msvc@npm:14.0.4" +"@next/swc-win32-x64-msvc@npm:14.1.0": + version: 14.1.0 + resolution: "@next/swc-win32-x64-msvc@npm:14.1.0" conditions: os=win32 & cpu=x64 languageName: node linkType: hard @@ -5973,7 +5973,7 @@ __metadata: fs-extra: "npm:^11.1.0" image-size: "npm:^1.0.0" loader-utils: "npm:^3.2.1" - next: "npm:^14.0.2" + next: "npm:^14.1.0" node-polyfill-webpack-plugin: "npm:^2.0.1" pnp-webpack-plugin: "npm:^1.7.0" postcss: "npm:^8.4.21" @@ -11141,13 +11141,20 @@ __metadata: languageName: node linkType: hard -"caniuse-lite@npm:^1.0.30001406, caniuse-lite@npm:^1.0.30001538, caniuse-lite@npm:^1.0.30001565": +"caniuse-lite@npm:^1.0.30001538, caniuse-lite@npm:^1.0.30001565": version: 1.0.30001570 resolution: "caniuse-lite@npm:1.0.30001570" checksum: e47230d2016edea56e002fa462a5289f697b48dcfbf703fb01aecc6c98ad4ecaf945ab23c253cb7af056c2d05f266e4e4cbebf45132100e2c9367439cb95b95b languageName: node linkType: hard +"caniuse-lite@npm:^1.0.30001579": + version: 1.0.30001581 + resolution: "caniuse-lite@npm:1.0.30001581" + checksum: 34b048156514eab5932212807428905cbecdef918f7c3d2153d5e8b6885d929e5c0b649f9e135cb1e03e413fbad8e00d1f24ed04cbcca52adc660ef98cad9032 + languageName: node + linkType: hard + "case-sensitive-paths-webpack-plugin@npm:^2.4.0": version: 2.4.0 resolution: "case-sensitive-paths-webpack-plugin@npm:2.4.0" @@ -21310,27 +21317,26 @@ __metadata: languageName: node linkType: hard -"next@npm:^14.0.2": - version: 14.0.4 - resolution: "next@npm:14.0.4" +"next@npm:^14.1.0": + version: 14.1.0 + resolution: "next@npm:14.1.0" dependencies: - "@next/env": "npm:14.0.4" - "@next/swc-darwin-arm64": "npm:14.0.4" - "@next/swc-darwin-x64": "npm:14.0.4" - "@next/swc-linux-arm64-gnu": "npm:14.0.4" - "@next/swc-linux-arm64-musl": "npm:14.0.4" - "@next/swc-linux-x64-gnu": "npm:14.0.4" - "@next/swc-linux-x64-musl": "npm:14.0.4" - "@next/swc-win32-arm64-msvc": "npm:14.0.4" - "@next/swc-win32-ia32-msvc": "npm:14.0.4" - "@next/swc-win32-x64-msvc": "npm:14.0.4" + "@next/env": "npm:14.1.0" + "@next/swc-darwin-arm64": "npm:14.1.0" + "@next/swc-darwin-x64": "npm:14.1.0" + "@next/swc-linux-arm64-gnu": "npm:14.1.0" + "@next/swc-linux-arm64-musl": "npm:14.1.0" + "@next/swc-linux-x64-gnu": "npm:14.1.0" + "@next/swc-linux-x64-musl": "npm:14.1.0" + "@next/swc-win32-arm64-msvc": "npm:14.1.0" + "@next/swc-win32-ia32-msvc": "npm:14.1.0" + "@next/swc-win32-x64-msvc": "npm:14.1.0" "@swc/helpers": "npm:0.5.2" busboy: "npm:1.6.0" - caniuse-lite: "npm:^1.0.30001406" + caniuse-lite: "npm:^1.0.30001579" graceful-fs: "npm:^4.2.11" postcss: "npm:8.4.31" styled-jsx: "npm:5.1.1" - watchpack: "npm:2.4.0" peerDependencies: "@opentelemetry/api": ^1.1.0 react: ^18.2.0 @@ -21362,7 +21368,7 @@ __metadata: optional: true bin: next: dist/bin/next - checksum: e6c829fd473d8c3605b2b62d15e1bf41e9d90cf59a2c213b4adeadff2846999bc9a653ffef18f6aa13cc9f5d6de02469c222acf5a4184901a4690a4504bd468f + checksum: dbb1ef8d22eec29a9127d28ed46eb34f14e3f7f7b4e4b91dc96027feb4d9ead554a804275484d9a54026e6e55d632d3997561e598c1fb8e8956e77614f39765f languageName: node linkType: hard @@ -29335,7 +29341,7 @@ __metadata: languageName: node linkType: hard -"watchpack@npm:2.4.0, watchpack@npm:^2.2.0, watchpack@npm:^2.4.0": +"watchpack@npm:^2.2.0, watchpack@npm:^2.4.0": version: 2.4.0 resolution: "watchpack@npm:2.4.0" dependencies: From 512dfb8f81f04c54899b1e583d32685ab8c35fb9 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 31 Jan 2024 15:20:28 +0100 Subject: [PATCH 09/11] Rename ImageProps Story --- .../{get-image-props.stories.tsx => GetImageProps.stories.tsx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename code/frameworks/nextjs/template/stories_nextjs-default-ts/{get-image-props.stories.tsx => GetImageProps.stories.tsx} (100%) diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/get-image-props.stories.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-ts/GetImageProps.stories.tsx similarity index 100% rename from code/frameworks/nextjs/template/stories_nextjs-default-ts/get-image-props.stories.tsx rename to code/frameworks/nextjs/template/stories_nextjs-default-ts/GetImageProps.stories.tsx From 88b781002eaa5d7cf0a6c964eb70fe340311061f Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 31 Jan 2024 15:37:49 +0100 Subject: [PATCH 10/11] Fix type issues --- code/frameworks/nextjs/src/swc/next-swc-loader-patch.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/code/frameworks/nextjs/src/swc/next-swc-loader-patch.ts b/code/frameworks/nextjs/src/swc/next-swc-loader-patch.ts index 0d47f4cc64e2..d70579d8fc72 100644 --- a/code/frameworks/nextjs/src/swc/next-swc-loader-patch.ts +++ b/code/frameworks/nextjs/src/swc/next-swc-loader-patch.ts @@ -92,6 +92,8 @@ async function loaderTransform(this: any, parentTrace: any, source?: string, inp swcCacheDir, relativeFilePathFromRoot, serverComponents, + // @ts-expect-error Relevant for Next.js < 14.1 + // TODO: Remove this when Next.js < 14.1 is no longer supported isReactServerLayer, }); From d2147cc914f83f3d091614fbee36e10d114be664 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 1 Feb 2024 14:47:47 +0100 Subject: [PATCH 11/11] Add GetImageProps.stories.jsx file --- .../GetImageProps.stories.jsx} | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) rename code/frameworks/nextjs/template/{stories_nextjs-default-ts/GetImageProps.stories.tsx => stories_nextjs-default-js/GetImageProps.stories.jsx} (76%) diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/GetImageProps.stories.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-js/GetImageProps.stories.jsx similarity index 76% rename from code/frameworks/nextjs/template/stories_nextjs-default-ts/GetImageProps.stories.tsx rename to code/frameworks/nextjs/template/stories_nextjs-default-js/GetImageProps.stories.jsx index 97802c57d203..7c8e75a09083 100644 --- a/code/frameworks/nextjs/template/stories_nextjs-default-ts/GetImageProps.stories.tsx +++ b/code/frameworks/nextjs/template/stories_nextjs-default-js/GetImageProps.stories.jsx @@ -1,12 +1,11 @@ -import { type ImageProps, getImageProps } from 'next/image'; +import { getImageProps } from 'next/image'; import React from 'react'; -import type { Meta, StoryObj } from '@storybook/react'; import Accessibility from '../../assets/accessibility.svg'; import Testing from '../../assets/testing.png'; // referenced from https://nextjs.org/docs/pages/api-reference/components/image#theme-detection-picture -const Component = (props: Omit) => { +const Component = (props) => { const { props: { srcSet: dark }, } = getImageProps({ src: Accessibility, ...props }); @@ -29,6 +28,6 @@ export default { args: { alt: 'getImageProps Example', }, -} as Meta; +}; -export const Default: StoryObj = {}; +export const Default = {};