diff --git a/code/frameworks/nextjs/README.md b/code/frameworks/nextjs/README.md index 0a0bb0ee0bfa..497b8ec9ddfb 100644 --- a/code/frameworks/nextjs/README.md +++ b/code/frameworks/nextjs/README.md @@ -16,9 +16,9 @@ - [Remote Images](#remote-images) - [AVIF](#avif) - [Next.js Font Optimization](#nextjs-font-optimization) - - [@next/font/google](#nextfontgoogle) - - [@next/font/local](#nextfontlocal) - - [Not supported features of @next/font](#not-supported-features-of-nextfont) + - [next/font/google](#nextfontgoogle) + - [next/font/local](#nextfontlocal) + - [Not supported features of next/font](#not-supported-features-of-nextfont) - [Next.js Routing](#nextjs-routing) - [Overriding defaults](#overriding-defaults) - [Global Defaults](#global-defaults) @@ -221,13 +221,13 @@ This format is not supported by this framework yet. Feel free to [open up an iss ### Next.js Font Optimization -[@next/font](https://nextjs.org/docs/basic-features/font-optimization) is partially supported in Storybook. The packages `@next/font/google` and `@next/font/local` are supported. +[next/font](https://nextjs.org/docs/basic-features/font-optimization) is partially supported in Storybook. The packages `next/font/google` and `next/font/local` are supported. -#### @next/font/google +#### next/font/google -You don't have to do anything. `@next/font/google` is supported out of the box. +You don't have to do anything. `next/font/google` is supported out of the box. -#### @next/font/local +#### next/font/local For local fonts you have to define the [src](https://nextjs.org/docs/api-reference/next/font#src) property. The path is relative to the directory where the font loader function is called. @@ -236,7 +236,7 @@ If the following component defines your localFont like this: ```js // src/components/MyComponent.js -import localFont from '@next/font/local'; +import localFont from 'next/font/local'; const localRubikStorm = localFont({ src: './fonts/RubikStorm-Regular.ttf' }); ``` @@ -256,7 +256,7 @@ export default { } ``` -#### Not supported features of @next/font +#### Not supported features of next/font The following features are not supported (yet). Support for these features might be planned for the future: diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index a2562d59b139..bf26683bedb1 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -71,7 +71,6 @@ "@babel/preset-react": "^7.18.6", "@babel/preset-typescript": "^7.21.0", "@babel/runtime": "^7.21.0", - "@next/font": "^13.0.7", "@storybook/addon-actions": "7.0.0-beta.59", "@storybook/builder-webpack5": "7.0.0-beta.59", "@storybook/core-common": "7.0.0-beta.59", @@ -100,15 +99,17 @@ "devDependencies": { "@babel/core": "^7.20.5", "@babel/types": "^7.20.5", + "@next/font": "^13.2.0", "@types/babel__core": "^7", "@types/babel__plugin-transform-runtime": "^7", "@types/babel__preset-env": "^7", - "next": "^13.0.5", + "next": "^13.2.0", "typescript": "^4.9.3", "webpack": "^5.65.0" }, "peerDependencies": { "@babel/core": "^7.11.5", + "@next/font": "^13.0.0", "next": "^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0", "react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", @@ -118,6 +119,9 @@ "@babel/core": { "optional": true }, + "@next/font": { + "optional": true + }, "@storybook/addon-actions": { "optional": true }, diff --git a/code/frameworks/nextjs/src/babel/plugins/next-font-unsupported.ts b/code/frameworks/nextjs/src/babel/plugins/next-font-unsupported.ts deleted file mode 100644 index 510e0b24c152..000000000000 --- a/code/frameworks/nextjs/src/babel/plugins/next-font-unsupported.ts +++ /dev/null @@ -1,21 +0,0 @@ -import type { NodePath, PluginObj, types } from '@babel/core'; - -/** - * Source: https://github.com/vercel/next.js/blob/canary/packages/next/src/build/babel/plugins/next-font-unsupported.ts - */ -export default function NextPageDisallowReExportAllExports(): PluginObj { - return { - visitor: { - ImportDeclaration(path: NodePath) { - if (['@next/font/local', '@next/font/google'].includes(path.node.source.value)) { - const err = new SyntaxError( - `"@next/font" requires SWC although Babel is being used due to a custom babel config being present.\nRead more: https://nextjs.org/docs/messages/babel-font-loader-conflict` - ); - (err as any).code = 'BABEL_PARSE_ERROR'; - (err as any).loc = path.node.loc?.start ?? path.node.loc?.end ?? path.node.loc; - throw err; - } - }, - }, - }; -} diff --git a/code/frameworks/nextjs/src/babel/plugins/next-page-disallow-re-export-all-exports.ts b/code/frameworks/nextjs/src/babel/plugins/next-page-disallow-re-export-all-exports.ts deleted file mode 100644 index 10a7b635eff2..000000000000 --- a/code/frameworks/nextjs/src/babel/plugins/next-page-disallow-re-export-all-exports.ts +++ /dev/null @@ -1,20 +0,0 @@ -/** - * Source: https://github.com/vercel/next.js/blob/canary/packages/next/src/build/babel/plugins/next-page-disallow-re-export-all-exports.ts - */ -import type { NodePath, PluginObj, types } from '@babel/core'; - -export default function NextPageDisallowReExportAllExports(): PluginObj { - return { - visitor: { - ExportAllDeclaration(path: NodePath) { - const err = new SyntaxError( - `Using \`export * from '...'\` in a page is disallowed. Please use \`export { default } from '...'\` instead.\n` + - `Read more: https://nextjs.org/docs/messages/export-all-in-page` - ); - (err as any).code = 'BABEL_PARSE_ERROR'; - (err as any).loc = path.node.loc?.start ?? path.node.loc?.end ?? path.node.loc; - throw err; - }, - }, - }; -} diff --git a/code/frameworks/nextjs/src/font/babel/helpers.ts b/code/frameworks/nextjs/src/font/babel/helpers.ts index ba66d2df401d..f964f17022f7 100644 --- a/code/frameworks/nextjs/src/font/babel/helpers.ts +++ b/code/frameworks/nextjs/src/font/babel/helpers.ts @@ -10,7 +10,7 @@ export type VariableMeta = { /** * Variable Declaration name of the assigned function call * @example - * import { Roboto } from '@next/font/google' + * import { Roboto } from 'next/font/google' * const robotoName = Roboto({ * weight: '400' * }) @@ -21,7 +21,7 @@ export type VariableMeta = { /** * Properties of the assigned function call * @example - * import { Roboto } from '@next/font/google' + * import { Roboto } from 'next/font/google' * const robotoName = Roboto({ * weight: '400' * }) @@ -30,9 +30,9 @@ export type VariableMeta = { */ properties: JSReturnValue; /** - * Function name of the imported @next/font/google function + * Function name of the imported next/font/google function * @example - * import { Roboto } from '@next/font/google' + * import { Roboto } from 'next/font/google' * const robotoName = Roboto({ * weight: '400' * }) @@ -110,7 +110,7 @@ export function isDefined(value: T): value is Exclude { * Removes transformed variable declarations, which were already replaced with parameterized imports * @example * // AST - * import { Roboto, Inter } from '@next/font/google' + * import { Roboto, Inter } from 'next/font/google' * const interName = Inter({ * subsets: ['latin'], * }) @@ -119,7 +119,7 @@ export function isDefined(value: T): value is Exclude { * }) * * // Result - * import { Roboto, Inter } from '@next/font/google' + * import { Roboto, Inter } from 'next/font/google' * * // Variable declarations are removed */ @@ -172,10 +172,10 @@ export function removeTransformedVariableDeclarations( } /** - * Replaces `@next/font` import with a parameterized import + * Replaces `next/font` import with a parameterized import * @example * // AST of src/example.js - * import { Roboto, Inter } from '@next/font/google' + * import { Roboto, Inter } from 'next/font/google' * const interName = Inter({ * subsets: ['latin'], * }) @@ -184,8 +184,8 @@ export function removeTransformedVariableDeclarations( * }) * * // Result - * import interName from 'storybook-nextjs-font-loader?{filename: "src/example.js", source: "@next/font/google", fontFamily: "Inter", props: {"subsets":["latin"]}}!@next/font/google' - * import robotoName from 'storybook-nextjs-font-loader?{filename: "src/example.js", source: "@next/font/google", fontFamily: "Roboto", props: {"weight": "400"}}!@next/font/google' + * import interName from 'storybook-nextjs-font-loader?{filename: "src/example.js", source: "next/font/google", fontFamily: "Inter", props: {"subsets":["latin"]}}!next/font/google' + * import robotoName from 'storybook-nextjs-font-loader?{filename: "src/example.js", source: "next/font/google", fontFamily: "Roboto", props: {"weight": "400"}}!next/font/google' * * // Following code will be removed from removeUnusedVariableDeclarations function * const interName = Inter({ @@ -225,7 +225,7 @@ export function replaceImportWithParamterImport( * Get meta information for the provided import specifier * @example * // AST - * import { Roboto, Inter } from '@next/font/google' + * import { Roboto, Inter } from 'next/font/google' * const interName = Inter({ * subsets: ['latin'], * }) @@ -297,14 +297,14 @@ export function getVariableMetasBySpecifier( if (!types.isObjectExpression(options)) { throw program.buildCodeFrameError( - 'Please pass an options object to the call expression of @next/font functions' + 'Please pass an options object to the call expression of next/font functions' ); } options.properties.forEach((property) => { if (types.isSpreadElement(property)) { throw program.buildCodeFrameError( - 'Please do not use spread elements in the options object in @next/font function calls' + 'Please do not use spread elements in the options object in next/font function calls' ); } }); diff --git a/code/frameworks/nextjs/src/font/babel/index.test.ts b/code/frameworks/nextjs/src/font/babel/index.test.ts index 3fc81f33876c..45a0de5c8bb4 100644 --- a/code/frameworks/nextjs/src/font/babel/index.test.ts +++ b/code/frameworks/nextjs/src/font/babel/index.test.ts @@ -3,6 +3,23 @@ import { transform } from '@babel/core'; import TransformFontImports from '.'; const example = ` +import { Inter, Roboto } from 'next/font/google' +import localFont from 'next/font/local' + +const myFont = localFont({ src: './my-font.woff2' }) + +const roboto = Roboto({ + weight: '400', +}) + +const inter = Inter({ + subsets: ['latin'], +}); + +const randomObj = {} +`; + +const exampleLegacy = ` import { Inter, Roboto } from '@next/font/google' import localFont from '@next/font/local' @@ -19,8 +36,18 @@ const inter = Inter({ const randomObj = {} `; -it('should transform AST properly', () => { +it('should transform next/font AST properly', () => { const { code } = transform(example, { plugins: [TransformFontImports] })!; + expect(code).toMatchInlineSnapshot(` + "import inter from \\"storybook-nextjs-font-loader?{\\\\\\"source\\\\\\":\\\\\\"next/font/google\\\\\\",\\\\\\"props\\\\\\":{\\\\\\"subsets\\\\\\":[\\\\\\"latin\\\\\\"]},\\\\\\"fontFamily\\\\\\":\\\\\\"Inter\\\\\\",\\\\\\"filename\\\\\\":\\\\\\"\\\\\\"}!next/font/google\\"; + import roboto from \\"storybook-nextjs-font-loader?{\\\\\\"source\\\\\\":\\\\\\"next/font/google\\\\\\",\\\\\\"props\\\\\\":{\\\\\\"weight\\\\\\":\\\\\\"400\\\\\\"},\\\\\\"fontFamily\\\\\\":\\\\\\"Roboto\\\\\\",\\\\\\"filename\\\\\\":\\\\\\"\\\\\\"}!next/font/google\\"; + import myFont from \\"storybook-nextjs-font-loader?{\\\\\\"source\\\\\\":\\\\\\"next/font/local\\\\\\",\\\\\\"props\\\\\\":{\\\\\\"src\\\\\\":\\\\\\"./my-font.woff2\\\\\\"},\\\\\\"fontFamily\\\\\\":\\\\\\"localFont\\\\\\",\\\\\\"filename\\\\\\":\\\\\\"\\\\\\"}!next/font/local\\"; + const randomObj = {};" + `); +}); + +it('should transform @next/font AST properly', () => { + const { code } = transform(exampleLegacy, { plugins: [TransformFontImports] })!; expect(code).toMatchInlineSnapshot(` "import inter from \\"storybook-nextjs-font-loader?{\\\\\\"source\\\\\\":\\\\\\"@next/font/google\\\\\\",\\\\\\"props\\\\\\":{\\\\\\"subsets\\\\\\":[\\\\\\"latin\\\\\\"]},\\\\\\"fontFamily\\\\\\":\\\\\\"Inter\\\\\\",\\\\\\"filename\\\\\\":\\\\\\"\\\\\\"}!@next/font/google\\"; import roboto from \\"storybook-nextjs-font-loader?{\\\\\\"source\\\\\\":\\\\\\"@next/font/google\\\\\\",\\\\\\"props\\\\\\":{\\\\\\"weight\\\\\\":\\\\\\"400\\\\\\"},\\\\\\"fontFamily\\\\\\":\\\\\\"Roboto\\\\\\",\\\\\\"filename\\\\\\":\\\\\\"\\\\\\"}!@next/font/google\\"; diff --git a/code/frameworks/nextjs/src/font/babel/index.ts b/code/frameworks/nextjs/src/font/babel/index.ts index 2685ff8257d9..6c45b791e765 100644 --- a/code/frameworks/nextjs/src/font/babel/index.ts +++ b/code/frameworks/nextjs/src/font/babel/index.ts @@ -9,12 +9,12 @@ import { type Babel = typeof BabelCoreNamespace; /** - * Transforms "@next/font" imports and usages to a webpack loader friendly format with parameters + * Transforms "next/font" imports and usages to a webpack loader friendly format with parameters * @example * // src/example.js * // Turns this code: - * import { Inter, Roboto } from '@next/font/google' - * import localFont from '@next/font/local' + * import { Inter, Roboto } from 'next/font/google' + * import localFont from 'next/font/local' * * const myFont = localFont({ src: './my-font.woff2' }) * const roboto = Roboto({ @@ -26,9 +26,9 @@ type Babel = typeof BabelCoreNamespace; * }); * * // Into this code: - * import inter from 'storybook-nextjs-font-loader?{filename: "src/example.js", source: "@next/font/google", fontFamily: "Inter", props: {"subsets":["latin"]}}!@next/font/google' - * import roboto from 'storybook-nextjs-font-loader?{filename: "src/example.js", source: "@next/font/google", fontFamily: "Roboto", props: {"weight": "400"}}!@next/font/google' - * import myFont from 'storybook-nextjs-font-loader?{filename: "src/example.js", source: "@next/font/local", props: {"src": "./my-font.woff2"}}!@next/font/local' + * import inter from 'storybook-nextjs-font-loader?{filename: "src/example.js", source: "next/font/google", fontFamily: "Inter", props: {"subsets":["latin"]}}!next/font/google' + * import roboto from 'storybook-nextjs-font-loader?{filename: "src/example.js", source: "next/font/google", fontFamily: "Roboto", props: {"weight": "400"}}!next/font/google' + * import myFont from 'storybook-nextjs-font-loader?{filename: "src/example.js", source: "next/font/local", props: {"src": "./my-font.woff2"}}!next/font/local' * * This Plugin tries to adopt the functionality which is provided by the nextjs swc plugin * https://github.com/vercel/next.js/pull/40221 @@ -42,10 +42,10 @@ export default function TransformFontImports({ types }: Babel): BabelCoreNamespa const { source } = node; const { filename = '' } = state; - if (source.value === '@next/font/local') { + if (source.value === 'next/font/local' || source.value === '@next/font/local') { const { specifiers } = node; - // @next/font/local only provides a default export + // next/font/local only provides a default export const specifier = specifiers[0]; if (!path.parentPath.isProgram()) { @@ -60,7 +60,7 @@ export default function TransformFontImports({ types }: Babel): BabelCoreNamespa replaceImportWithParamterImport(path, types, source, variableMetas, filename); } - if (source.value === '@next/font/google') { + if (source.value === 'next/font/google' || source.value === '@next/font/google') { const { specifiers } = node; const variableMetas = specifiers diff --git a/code/frameworks/nextjs/src/font/webpack/loader/google/get-font-face-declarations.ts b/code/frameworks/nextjs/src/font/webpack/loader/google/get-font-face-declarations.ts index f21e5572715c..9526072fe0bf 100644 --- a/code/frameworks/nextjs/src/font/webpack/loader/google/get-font-face-declarations.ts +++ b/code/frameworks/nextjs/src/font/webpack/loader/google/get-font-face-declarations.ts @@ -1,18 +1,18 @@ // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-expect-error import loaderUtils from 'next/dist/compiled/loader-utils3'; -import { - fetchCSSFromGoogleFonts, - getFontAxes, - getUrl, - validateData, -} from '@next/font/dist/google/utils'; - import type { LoaderOptions } from '../types'; const cssCache = new Map>(); export async function getFontFaceDeclarations(options: LoaderOptions) { + const { + fetchCSSFromGoogleFonts, + getFontAxes, + getUrl, + validateData, + } = require('../utils/google-font-utils'); + const { fontFamily, weights, styles, selectedVariableAxes, display, variable } = validateData( options.fontFamily, [options.props], diff --git a/code/frameworks/nextjs/src/font/webpack/loader/local/get-font-face-declarations.ts b/code/frameworks/nextjs/src/font/webpack/loader/local/get-font-face-declarations.ts index a690d1e060e6..2e0ddeefc53c 100644 --- a/code/frameworks/nextjs/src/font/webpack/loader/local/get-font-face-declarations.ts +++ b/code/frameworks/nextjs/src/font/webpack/loader/local/get-font-face-declarations.ts @@ -1,7 +1,6 @@ // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-expect-error import loaderUtils from 'next/dist/compiled/loader-utils3'; -import { validateData } from '@next/font/dist/local/utils'; import path from 'path'; import type { LoaderOptions } from '../types'; @@ -14,6 +13,7 @@ export async function getFontFaceDeclarations(options: LoaderOptions, rootContex // Parent folder relative to the root context const parentFolder = options.filename.split('/').slice(0, -1).join('/').replace(rootContext, ''); + const { validateData } = require('../utils/local-font-utils'); const { weight, style, variable } = validateData('', options.props); const id = `font-${loaderUtils.getHashDigest( diff --git a/code/frameworks/nextjs/src/font/webpack/loader/storybook-nextjs-font-loader.ts b/code/frameworks/nextjs/src/font/webpack/loader/storybook-nextjs-font-loader.ts index b25f2857a75a..85076ecd7201 100644 --- a/code/frameworks/nextjs/src/font/webpack/loader/storybook-nextjs-font-loader.ts +++ b/code/frameworks/nextjs/src/font/webpack/loader/storybook-nextjs-font-loader.ts @@ -21,11 +21,11 @@ export default async function storybookNextjsFontLoader(this: any) { let fontFaceDeclaration: FontFaceDeclaration | undefined; - if (options.source === '@next/font/google') { + if (options.source === 'next/font/google' || options.source === '@next/font/google') { fontFaceDeclaration = await getGoogleFontFaceDeclarations(options); } - if (options.source === '@next/font/local') { + if (options.source === 'next/font/local' || options.source === '@next/font/local') { fontFaceDeclaration = await getLocalFontFaceDeclarations(options, rootCtx); } diff --git a/code/frameworks/nextjs/src/font/webpack/loader/types.ts b/code/frameworks/nextjs/src/font/webpack/loader/types.ts index 237e0cfb942d..77fe407ee00a 100644 --- a/code/frameworks/nextjs/src/font/webpack/loader/types.ts +++ b/code/frameworks/nextjs/src/font/webpack/loader/types.ts @@ -1,10 +1,10 @@ export type LoaderOptions = { /** - * Initial import name. Can be `@next/font/google` or `@next/font/local` + * Initial import name. Can be `next/font/google` or `next/font/local` */ source: string; /** - * Props passed to the `@next/font` function call + * Props passed to the `next/font` function call */ props: Record; /** @@ -12,7 +12,7 @@ export type LoaderOptions = { */ fontFamily: string; /** - * Filename of the issuer file, which imports `@next/font/google` or `@next/font/local + * Filename of the issuer file, which imports `next/font/google` or `next/font/local */ filename: string; }; diff --git a/code/frameworks/nextjs/src/font/webpack/loader/utils/google-font-utils.ts b/code/frameworks/nextjs/src/font/webpack/loader/utils/google-font-utils.ts new file mode 100644 index 000000000000..39fe3ddf2d3c --- /dev/null +++ b/code/frameworks/nextjs/src/font/webpack/loader/utils/google-font-utils.ts @@ -0,0 +1,54 @@ +/* eslint-disable import/no-mutable-exports */ +type FontOptions = { + fontFamily: string; + weights: string[]; + styles: string[]; + display: string; + preload: boolean; + selectedVariableAxes?: string[]; + fallback?: string[]; + adjustFontFallback: boolean; + variable?: string; + subsets: string[]; +}; + +let validateData: (functionName: string, fontData: any, config: any) => FontOptions; + +let getUrl: ( + fontFamily: string, + axes: { + wght?: string[]; + ital?: string[]; + variableAxes?: [string, string][]; + }, + display: string +) => string; + +let getFontAxes: ( + fontFamily: string, + weights: string[], + styles: string[], + selectedVariableAxes?: string[] +) => { + wght?: string[]; + ital?: string[]; + variableAxes?: [string, string][]; +}; + +let fetchCSSFromGoogleFonts: (url: string, fontFamily: string) => Promise; + +try { + const fontUtils = require('@next/font/dist/google/utils'); + validateData = fontUtils.validateData; + getUrl = fontUtils.getUrl; + getFontAxes = fontUtils.getFontAxes; + fetchCSSFromGoogleFonts = fontUtils.fetchCSSFromGoogleFonts; +} catch (e) { + const fontUtils = require('next/dist/compiled/@next/font/dist/google/utils'); + validateData = fontUtils.validateData; + getUrl = fontUtils.getUrl; + getFontAxes = fontUtils.getFontAxes; + fetchCSSFromGoogleFonts = fontUtils.fetchCSSFromGoogleFonts; +} + +export { validateData, getUrl, getFontAxes, fetchCSSFromGoogleFonts }; diff --git a/code/frameworks/nextjs/src/font/webpack/loader/utils/local-font-utils.ts b/code/frameworks/nextjs/src/font/webpack/loader/utils/local-font-utils.ts new file mode 100644 index 000000000000..4e2e972b62b7 --- /dev/null +++ b/code/frameworks/nextjs/src/font/webpack/loader/utils/local-font-utils.ts @@ -0,0 +1,33 @@ +/* eslint-disable import/no-mutable-exports */ +type FontOptions = { + src: Array<{ + path: string; + weight?: string; + style?: string; + ext: string; + format: string; + }>; + display: string; + weight?: string; + style?: string; + fallback?: string[]; + preload: boolean; + variable?: string; + adjustFontFallback?: string | false; + declarations?: Array<{ + prop: string; + value: string; + }>; +}; + +let validateData: (functionName: string, fontData: any) => FontOptions; + +try { + const fontUtils = require('@next/font/dist/local/utils'); + validateData = fontUtils.validateData; +} catch (e) { + const fontUtils = require('next/dist/compiled/@next/font/dist/local/utils'); + validateData = fontUtils.validateData; +} + +export { validateData }; diff --git a/code/frameworks/nextjs/src/routing/app-router-provider.tsx b/code/frameworks/nextjs/src/routing/app-router-provider.tsx index 20633be32718..cda802a41075 100644 --- a/code/frameworks/nextjs/src/routing/app-router-provider.tsx +++ b/code/frameworks/nextjs/src/routing/app-router-provider.tsx @@ -82,6 +82,7 @@ const AppRouterProvider: React.FC = ({ children, action, childNodes: new Map(), tree: [pathname, { children: getParallelRoutes([...segments]) }], url: pathname, + headRenderedAboveThisLevel: true, }} > {children} diff --git a/code/frameworks/nextjs/template/stories_default-js/Font.jsx b/code/frameworks/nextjs/template/stories_default-js/Font.jsx index 228c81efc03d..11c7d4def183 100644 --- a/code/frameworks/nextjs/template/stories_default-js/Font.jsx +++ b/code/frameworks/nextjs/template/stories_default-js/Font.jsx @@ -1,6 +1,6 @@ /* eslint-disable react/prop-types */ -import { Rubik_Puddles } from '@next/font/google'; -import localFont from '@next/font/local'; +import { Rubik_Puddles } from 'next/font/google'; +import localFont from 'next/font/local'; import React from 'react'; diff --git a/code/yarn.lock b/code/yarn.lock index 321fd677e1b8..a7e8991828a4 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -3619,107 +3619,107 @@ __metadata: languageName: node linkType: hard -"@next/env@npm:13.1.6": - version: 13.1.6 - resolution: "@next/env@npm:13.1.6" - checksum: c10c6820788f97eabd2292280d3c730a9afaed446d57545ad6388fb0f7295449679d75be6bfb954c71b429a084d5a1773fe7cd552969b13a1a0174f06880bb33 +"@next/env@npm:13.2.3": + version: 13.2.3 + resolution: "@next/env@npm:13.2.3" + checksum: 02f059d4fde230782e7bededffd68e284f009c220ae59910f5902806930cfae400a82d082966cce93c1ae5028645ef83a9a31d328864dcb7a80dffa9054edb8d languageName: node linkType: hard -"@next/font@npm:^13.0.7": - version: 13.1.6 - resolution: "@next/font@npm:13.1.6" - checksum: 91c94fe421339d145a7aea0107255b34b52940ff69edf47a256b71c9595c214673059edabb61ded91f514b7977e8f6cfdaed3c1ca905e88960f5683b9fb4cdb5 +"@next/font@npm:^13.2.0": + version: 13.2.1 + resolution: "@next/font@npm:13.2.1" + checksum: 30a826c8915013dd966b67f3f30a23e3052e5964d9b257e968f2645661983040f7effea604d816495305413ce52902b1fd77ee654e7c4168d8d5cdc58be4f8e5 languageName: node linkType: hard -"@next/swc-android-arm-eabi@npm:13.1.6": - version: 13.1.6 - resolution: "@next/swc-android-arm-eabi@npm:13.1.6" +"@next/swc-android-arm-eabi@npm:13.2.3": + version: 13.2.3 + resolution: "@next/swc-android-arm-eabi@npm:13.2.3" conditions: os=android & cpu=arm languageName: node linkType: hard -"@next/swc-android-arm64@npm:13.1.6": - version: 13.1.6 - resolution: "@next/swc-android-arm64@npm:13.1.6" +"@next/swc-android-arm64@npm:13.2.3": + version: 13.2.3 + resolution: "@next/swc-android-arm64@npm:13.2.3" conditions: os=android & cpu=arm64 languageName: node linkType: hard -"@next/swc-darwin-arm64@npm:13.1.6": - version: 13.1.6 - resolution: "@next/swc-darwin-arm64@npm:13.1.6" +"@next/swc-darwin-arm64@npm:13.2.3": + version: 13.2.3 + resolution: "@next/swc-darwin-arm64@npm:13.2.3" conditions: os=darwin & cpu=arm64 languageName: node linkType: hard -"@next/swc-darwin-x64@npm:13.1.6": - version: 13.1.6 - resolution: "@next/swc-darwin-x64@npm:13.1.6" +"@next/swc-darwin-x64@npm:13.2.3": + version: 13.2.3 + resolution: "@next/swc-darwin-x64@npm:13.2.3" conditions: os=darwin & cpu=x64 languageName: node linkType: hard -"@next/swc-freebsd-x64@npm:13.1.6": - version: 13.1.6 - resolution: "@next/swc-freebsd-x64@npm:13.1.6" +"@next/swc-freebsd-x64@npm:13.2.3": + version: 13.2.3 + resolution: "@next/swc-freebsd-x64@npm:13.2.3" conditions: os=freebsd & cpu=x64 languageName: node linkType: hard -"@next/swc-linux-arm-gnueabihf@npm:13.1.6": - version: 13.1.6 - resolution: "@next/swc-linux-arm-gnueabihf@npm:13.1.6" +"@next/swc-linux-arm-gnueabihf@npm:13.2.3": + version: 13.2.3 + resolution: "@next/swc-linux-arm-gnueabihf@npm:13.2.3" conditions: os=linux & cpu=arm languageName: node linkType: hard -"@next/swc-linux-arm64-gnu@npm:13.1.6": - version: 13.1.6 - resolution: "@next/swc-linux-arm64-gnu@npm:13.1.6" +"@next/swc-linux-arm64-gnu@npm:13.2.3": + version: 13.2.3 + resolution: "@next/swc-linux-arm64-gnu@npm:13.2.3" conditions: os=linux & cpu=arm64 & libc=glibc languageName: node linkType: hard -"@next/swc-linux-arm64-musl@npm:13.1.6": - version: 13.1.6 - resolution: "@next/swc-linux-arm64-musl@npm:13.1.6" +"@next/swc-linux-arm64-musl@npm:13.2.3": + version: 13.2.3 + resolution: "@next/swc-linux-arm64-musl@npm:13.2.3" conditions: os=linux & cpu=arm64 & libc=musl languageName: node linkType: hard -"@next/swc-linux-x64-gnu@npm:13.1.6": - version: 13.1.6 - resolution: "@next/swc-linux-x64-gnu@npm:13.1.6" +"@next/swc-linux-x64-gnu@npm:13.2.3": + version: 13.2.3 + resolution: "@next/swc-linux-x64-gnu@npm:13.2.3" conditions: os=linux & cpu=x64 & libc=glibc languageName: node linkType: hard -"@next/swc-linux-x64-musl@npm:13.1.6": - version: 13.1.6 - resolution: "@next/swc-linux-x64-musl@npm:13.1.6" +"@next/swc-linux-x64-musl@npm:13.2.3": + version: 13.2.3 + resolution: "@next/swc-linux-x64-musl@npm:13.2.3" conditions: os=linux & cpu=x64 & libc=musl languageName: node linkType: hard -"@next/swc-win32-arm64-msvc@npm:13.1.6": - version: 13.1.6 - resolution: "@next/swc-win32-arm64-msvc@npm:13.1.6" +"@next/swc-win32-arm64-msvc@npm:13.2.3": + version: 13.2.3 + resolution: "@next/swc-win32-arm64-msvc@npm:13.2.3" conditions: os=win32 & cpu=arm64 languageName: node linkType: hard -"@next/swc-win32-ia32-msvc@npm:13.1.6": - version: 13.1.6 - resolution: "@next/swc-win32-ia32-msvc@npm:13.1.6" +"@next/swc-win32-ia32-msvc@npm:13.2.3": + version: 13.2.3 + resolution: "@next/swc-win32-ia32-msvc@npm:13.2.3" conditions: os=win32 & cpu=ia32 languageName: node linkType: hard -"@next/swc-win32-x64-msvc@npm:13.1.6": - version: 13.1.6 - resolution: "@next/swc-win32-x64-msvc@npm:13.1.6" +"@next/swc-win32-x64-msvc@npm:13.2.3": + version: 13.2.3 + resolution: "@next/swc-win32-x64-msvc@npm:13.2.3" conditions: os=win32 & cpu=x64 languageName: node linkType: hard @@ -6402,7 +6402,7 @@ __metadata: "@babel/preset-typescript": ^7.21.0 "@babel/runtime": ^7.21.0 "@babel/types": ^7.20.5 - "@next/font": ^13.0.7 + "@next/font": ^13.2.0 "@storybook/addon-actions": 7.0.0-beta.59 "@storybook/builder-webpack5": 7.0.0-beta.59 "@storybook/core-common": 7.0.0-beta.59 @@ -6419,7 +6419,7 @@ __metadata: fs-extra: ^11.1.0 image-size: ^1.0.0 loader-utils: ^3.2.0 - next: ^13.0.5 + next: ^13.2.0 pnp-webpack-plugin: ^1.7.0 postcss: ^8.4.21 postcss-loader: ^7.0.2 @@ -6435,6 +6435,7 @@ __metadata: webpack: ^5.65.0 peerDependencies: "@babel/core": ^7.11.5 + "@next/font": ^13.0.0 next: ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 @@ -6442,6 +6443,8 @@ __metadata: peerDependenciesMeta: "@babel/core": optional: true + "@next/font": + optional: true "@storybook/addon-actions": optional: true typescript: @@ -22628,29 +22631,30 @@ __metadata: languageName: node linkType: hard -"next@npm:^13.0.5": - version: 13.1.6 - resolution: "next@npm:13.1.6" - dependencies: - "@next/env": 13.1.6 - "@next/swc-android-arm-eabi": 13.1.6 - "@next/swc-android-arm64": 13.1.6 - "@next/swc-darwin-arm64": 13.1.6 - "@next/swc-darwin-x64": 13.1.6 - "@next/swc-freebsd-x64": 13.1.6 - "@next/swc-linux-arm-gnueabihf": 13.1.6 - "@next/swc-linux-arm64-gnu": 13.1.6 - "@next/swc-linux-arm64-musl": 13.1.6 - "@next/swc-linux-x64-gnu": 13.1.6 - "@next/swc-linux-x64-musl": 13.1.6 - "@next/swc-win32-arm64-msvc": 13.1.6 - "@next/swc-win32-ia32-msvc": 13.1.6 - "@next/swc-win32-x64-msvc": 13.1.6 +"next@npm:^13.2.0": + version: 13.2.3 + resolution: "next@npm:13.2.3" + dependencies: + "@next/env": 13.2.3 + "@next/swc-android-arm-eabi": 13.2.3 + "@next/swc-android-arm64": 13.2.3 + "@next/swc-darwin-arm64": 13.2.3 + "@next/swc-darwin-x64": 13.2.3 + "@next/swc-freebsd-x64": 13.2.3 + "@next/swc-linux-arm-gnueabihf": 13.2.3 + "@next/swc-linux-arm64-gnu": 13.2.3 + "@next/swc-linux-arm64-musl": 13.2.3 + "@next/swc-linux-x64-gnu": 13.2.3 + "@next/swc-linux-x64-musl": 13.2.3 + "@next/swc-win32-arm64-msvc": 13.2.3 + "@next/swc-win32-ia32-msvc": 13.2.3 + "@next/swc-win32-x64-msvc": 13.2.3 "@swc/helpers": 0.4.14 caniuse-lite: ^1.0.30001406 postcss: 8.4.14 styled-jsx: 5.1.1 peerDependencies: + "@opentelemetry/api": ^1.4.0 fibers: ">= 3.1.0" node-sass: ^6.0.0 || ^7.0.0 react: ^18.2.0 @@ -22684,6 +22688,8 @@ __metadata: "@next/swc-win32-x64-msvc": optional: true peerDependenciesMeta: + "@opentelemetry/api": + optional: true fibers: optional: true node-sass: @@ -22692,7 +22698,7 @@ __metadata: optional: true bin: next: dist/bin/next - checksum: c859d97f89b48e344affbd6a30a08829d61eabe5d7b263f445121ae1b92a913bd5b7fc1872780e99fc7c4fd912a60b5583227bf85343c6605272c84a0197a792 + checksum: 9beee5f4dcc5d62e78a2d98abc3891a7ee5b0a8850738b4f4cf5c4306fdfaca8b5f3e03bf6bf22a6b17f0f7823b7808ed465d34dc78380addfec3b1f3ea5b27d languageName: node linkType: hard