diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index d4e3346a826b..98dac28cf842 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/frameworks/nextjs/src/images/next-image.tsx b/code/frameworks/nextjs/src/images/next-image.tsx index f2e2d9d1467c..ea1e1f2eb844 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,4 +33,7 @@ const MockedNextImage = React.forwardRef + originalGetImageProps?.({ loader: defaultLoader, ...props }); + export default MockedNextImage; 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, }); diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-js/GetImageProps.stories.jsx b/code/frameworks/nextjs/template/stories_nextjs-default-js/GetImageProps.stories.jsx new file mode 100644 index 000000000000..7c8e75a09083 --- /dev/null +++ b/code/frameworks/nextjs/template/stories_nextjs-default-js/GetImageProps.stories.jsx @@ -0,0 +1,33 @@ +import { getImageProps } from 'next/image'; +import React from '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) => { + 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', + }, +}; + +export const Default = {}; diff --git a/code/yarn.lock b/code/yarn.lock index 4e3563021869..2c786bd21e03 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -3658,72 +3658,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 @@ -5956,7 +5956,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" @@ -11116,13 +11116,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" @@ -21276,27 +21283,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 @@ -21328,7 +21334,7 @@ __metadata: optional: true bin: next: dist/bin/next - checksum: e6c829fd473d8c3605b2b62d15e1bf41e9d90cf59a2c213b4adeadff2846999bc9a653ffef18f6aa13cc9f5d6de02469c222acf5a4184901a4690a4504bd468f + checksum: dbb1ef8d22eec29a9127d28ed46eb34f14e3f7f7b4e4b91dc96027feb4d9ead554a804275484d9a54026e6e55d632d3997561e598c1fb8e8956e77614f39765f languageName: node linkType: hard @@ -29301,7 +29307,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: