diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json index 88b89cc58fb0..3df803987dac 100644 --- a/code/addons/actions/package.json +++ b/code/addons/actions/package.json @@ -64,13 +64,9 @@ }, "dependencies": { "@storybook/global": "^5.0.0", - "@types/lodash": "^4.14.167", "@types/uuid": "^9.0.1", "dequal": "^2.0.2", - "lodash": "^4.17.21", "polished": "^4.2.2", - "telejson": "^7.2.0", - "ts-dedent": "^2.0.0", "uuid": "^9.0.0" }, "devDependencies": { @@ -81,10 +77,10 @@ "@storybook/preview-api": "workspace:*", "@storybook/theming": "workspace:*", "@storybook/types": "workspace:*", - "prop-types": "^15.7.2", "react": "^16.8.0", "react-dom": "^16.8.0", "react-inspector": "^6.0.0", + "telejson": "^7.2.0", "typescript": "~4.9.3" }, "publishConfig": { diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 99a3da9d8fb5..356b2eb48b0c 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -36,11 +36,7 @@ "types": "./dist/preset.d.ts", "require": "./dist/preset.js" }, - "./preview.js": { - "types": "./dist/preview.d.ts", - "require": "./dist/preview.js", - "import": "./dist/preview.mjs" - }, + "./dist/preview.mjs": "./dist/preview.mjs", "./next-image-loader-stub.js": { "types": "./dist/next-image-loader-stub.d.ts", "require": "./dist/next-image-loader-stub.js", @@ -136,9 +132,6 @@ "@next/font": { "optional": true }, - "@storybook/addon-actions": { - "optional": true - }, "typescript": { "optional": true }, diff --git a/code/frameworks/nextjs/src/nextImport/webpack.ts b/code/frameworks/nextjs/src/nextImport/webpack.ts index fc5d359ef8e2..35f39a7069ed 100644 --- a/code/frameworks/nextjs/src/nextImport/webpack.ts +++ b/code/frameworks/nextjs/src/nextImport/webpack.ts @@ -24,7 +24,8 @@ export function configureNextImport(baseConfig: WebpackConfig) { baseConfig.plugins.push( new IgnorePlugin({ // ignore next/dist/shared/lib/hooks-client-context and next/legacy/image imports - resourceRegExp: /(next\/dist\/shared\/lib\/hooks-client-context|next\/legacy\/image)$/, + resourceRegExp: + /(next\/dist\/shared\/lib\/hooks-client-context|next\/dist\/shared\/lib\/hooks-client-context\.shared-runtime|next\/legacy\/image)$/, }) ); } diff --git a/code/frameworks/nextjs/src/preset.ts b/code/frameworks/nextjs/src/preset.ts index fd726835293c..7b0e150f735a 100644 --- a/code/frameworks/nextjs/src/preset.ts +++ b/code/frameworks/nextjs/src/preset.ts @@ -69,7 +69,7 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = []) => [ ...entry, - require.resolve('@storybook/nextjs/preview.js'), + join(dirname(require.resolve('@storybook/nextjs/package.json')), 'dist/preview.mjs'), ]; // Not even sb init - automigrate - running dev diff --git a/code/frameworks/nextjs/src/routing/app-router-provider.tsx b/code/frameworks/nextjs/src/routing/app-router-provider.tsx index a7f0bd326f9b..c8b1c96c80a3 100644 --- a/code/frameworks/nextjs/src/routing/app-router-provider.tsx +++ b/code/frameworks/nextjs/src/routing/app-router-provider.tsx @@ -1,48 +1,16 @@ import React from 'react'; -import type { - LayoutRouterContext as TLayoutRouterContext, - AppRouterContext as TAppRouterContext, - GlobalLayoutRouterContext as TGlobalLayoutRouterContext, +import { + LayoutRouterContext, + AppRouterContext, + GlobalLayoutRouterContext, } from 'next/dist/shared/lib/app-router-context.shared-runtime'; -import type { - PathnameContext as TPathnameContext, - SearchParamsContext as TSearchParamsContext, +import { + PathnameContext, + SearchParamsContext, } from 'next/dist/shared/lib/hooks-client-context.shared-runtime'; import type { FlightRouterState } from 'next/dist/server/app-render/types'; import type { RouteParams } from './types'; -/** - * Normally dynamic imports are necessary because otherwise - * older versions of Next.js will throw an error - * because AppRouterProviders only exists in Next.js > v13 - * Using React.lazy though is currently not supported in SB decorators - * therefore using the try/catch workaround - */ -let AppRouterContext: typeof TAppRouterContext; -let LayoutRouterContext: typeof TLayoutRouterContext; -let PathnameContext: typeof TPathnameContext; -let SearchParamsContext: typeof TSearchParamsContext; -let GlobalLayoutRouterContext: typeof TGlobalLayoutRouterContext; - -try { - AppRouterContext = - require('next/dist/shared/lib/app-router-context.shared-runtime').AppRouterContext; - LayoutRouterContext = - require('next/dist/shared/lib/app-router-context.shared-runtime').LayoutRouterContext; - PathnameContext = - require('next/dist/shared/lib/hooks-client-context.shared-runtime').PathnameContext; - SearchParamsContext = - require('next/dist/shared/lib/hooks-client-context.shared-runtime').SearchParamsContext; - GlobalLayoutRouterContext = - require('next/dist/shared/lib/app-router-context.shared-runtime').GlobalLayoutRouterContext; -} catch { - AppRouterContext = React.Fragment as any; - LayoutRouterContext = React.Fragment as any; - PathnameContext = React.Fragment as any; - SearchParamsContext = React.Fragment as any; - GlobalLayoutRouterContext = React.Fragment as any; -} - type AppRouterProviderProps = { action: (name: string) => (...args: any[]) => void; routeParams: RouteParams; @@ -58,7 +26,11 @@ const getParallelRoutes = (segmentsList: Array): FlightRouterState => { return [] as any; }; -const AppRouterProvider: React.FC = ({ children, action, routeParams }) => { +export const AppRouterProvider: React.FC = ({ + children, + action, + routeParams, +}) => { const { pathname, query, segments = [], ...restRouteParams } = routeParams; const tree: FlightRouterState = [pathname, { children: getParallelRoutes([...segments]) }]; @@ -121,5 +93,3 @@ const AppRouterProvider: React.FC = ({ children, action, ); }; - -export default AppRouterProvider; diff --git a/code/frameworks/nextjs/src/routing/decorator.tsx b/code/frameworks/nextjs/src/routing/decorator.tsx index 8312b8e9d80c..059e378c2521 100644 --- a/code/frameworks/nextjs/src/routing/decorator.tsx +++ b/code/frameworks/nextjs/src/routing/decorator.tsx @@ -1,20 +1,10 @@ import * as React from 'react'; -// this will be aliased by webpack at runtime (this is just for typing) -import type { action as originalAction } from '@storybook/addon-actions'; import type { Addon_StoryContext } from '@storybook/types'; -import AppRouterProvider from './app-router-provider'; - -import PageRouterProvider from './page-router-provider'; +import { action } from '@storybook/addon-actions'; +import { PageRouterProvider } from './page-router-provider'; +import type { AppRouterProvider as TAppRouterProvider } from './app-router-provider'; import type { RouteParams, NextAppDirectory } from './types'; -let action: typeof originalAction; - -try { - action = require('@storybook/addon-actions').action; -} catch { - action = () => () => {}; -} - const defaultRouterParams: RouteParams = { pathname: '/', query: {}, @@ -27,7 +17,23 @@ export const RouterDecorator = ( const nextAppDirectory = (parameters.nextjs?.appDirectory as NextAppDirectory | undefined) ?? false; + const [AppRouterProvider, setAppRouterProvider] = React.useState< + typeof TAppRouterProvider | undefined + >(); + + React.useEffect(() => { + if (!nextAppDirectory) { + return; + } + import('./app-router-provider').then((exports) => + setAppRouterProvider(() => exports.AppRouterProvider) + ); + }, [nextAppDirectory]); + if (nextAppDirectory) { + if (!AppRouterProvider) { + return null; + } return ( = ({ +export const PageRouterProvider: React.FC = ({ children, action, routeParams, @@ -66,5 +66,3 @@ const PageRouterProvider: React.FC = ({ {children} ); - -export default PageRouterProvider; diff --git a/code/yarn.lock b/code/yarn.lock index 6cc2650da012..bd945338259f 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5373,17 +5373,13 @@ __metadata: "@storybook/preview-api": "workspace:*" "@storybook/theming": "workspace:*" "@storybook/types": "workspace:*" - "@types/lodash": "npm:^4.14.167" "@types/uuid": "npm:^9.0.1" dequal: "npm:^2.0.2" - lodash: "npm:^4.17.21" polished: "npm:^4.2.2" - prop-types: "npm:^15.7.2" react: "npm:^16.8.0" react-dom: "npm:^16.8.0" react-inspector: "npm:^6.0.0" telejson: "npm:^7.2.0" - ts-dedent: "npm:^2.0.0" typescript: "npm:~4.9.3" uuid: "npm:^9.0.0" languageName: unknown @@ -6820,8 +6816,6 @@ __metadata: peerDependenciesMeta: "@next/font": optional: true - "@storybook/addon-actions": - optional: true typescript: optional: true webpack: