diff --git a/CHANGELOG.md b/CHANGELOG.md index f0b60008f0fb..06520612a48a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,11 @@ +## 8.4.2 + +- Addon Test: Fix post-install logic for Next.js Vite framework support - [#29524](https://github.com/storybookjs/storybook/pull/29524), thanks @valentinpalkovic! +- Addon Test: Only render the TestingModule component in development mode - [#29501](https://github.com/storybookjs/storybook/pull/29501), thanks @yannbf! +- CLI: Fix Solid init by installing `@storybook/test` - [#29514](https://github.com/storybookjs/storybook/pull/29514), thanks @shilman! +- Core: Shim CJS-only globals in ESM output - [#29157](https://github.com/storybookjs/storybook/pull/29157), thanks @valentinpalkovic! +- Next.js: Fix bundled react and react-dom in monorepos - [#29444](https://github.com/storybookjs/storybook/pull/29444), thanks @sentience! + ## 8.4.1 - Core: Relax peer dep constraint of shim packages - [#29503](https://github.com/storybookjs/storybook/pull/29503), thanks @kasperpeulen! diff --git a/code/addons/test/src/postinstall.ts b/code/addons/test/src/postinstall.ts index f7b5efe8521c..90595b0e15d6 100644 --- a/code/addons/test/src/postinstall.ts +++ b/code/addons/test/src/postinstall.ts @@ -58,7 +58,9 @@ export default async function postInstall(options: PostinstallOptions) { '@storybook/experimental-nextjs-vite', '@storybook/sveltekit', ].includes(info.frameworkPackageName) - ? info.frameworkPackageName + ? info.frameworkPackageName === '@storybook/nextjs' + ? '@storybook/experimental-nextjs-vite' + : info.frameworkPackageName : info.rendererPackageName && ['@storybook/react', '@storybook/svelte', '@storybook/vue3'].includes( info.rendererPackageName @@ -431,7 +433,7 @@ const getVitestPluginInfo = (framework: string) => { let frameworkPluginCall = ''; let frameworkPluginDocs = ''; - if (framework === '@storybook/nextjs') { + if (framework === '@storybook/nextjs' || framework === '@storybook/experimental-nextjs-vite') { frameworkPluginImport = "import { storybookNextJsPlugin } from '@storybook/experimental-nextjs-vite/vite-plugin';"; frameworkPluginDocs = diff --git a/code/core/src/manager/components/sidebar/Sidebar.stories.tsx b/code/core/src/manager/components/sidebar/Sidebar.stories.tsx index d4698f53e6df..dcc6b06096c2 100644 --- a/code/core/src/manager/components/sidebar/Sidebar.stories.tsx +++ b/code/core/src/manager/components/sidebar/Sidebar.stories.tsx @@ -85,6 +85,7 @@ const meta = { refs: {}, status: {}, showCreateStoryButton: true, + isDevelopment: true, }, decorators: [ (storyFn) => ( diff --git a/code/core/src/manager/components/sidebar/Sidebar.tsx b/code/core/src/manager/components/sidebar/Sidebar.tsx index 6f4cec12e686..bb3be73f425d 100644 --- a/code/core/src/manager/components/sidebar/Sidebar.tsx +++ b/code/core/src/manager/components/sidebar/Sidebar.tsx @@ -109,7 +109,6 @@ const useCombination = ( return useMemo(() => ({ hash, entries: Object.entries(hash) }), [hash]); }; -const isDevelopment = global.CONFIG_TYPE === 'DEVELOPMENT'; const isRendererReact = global.STORYBOOK_RENDERER === 'react'; export interface SidebarProps extends API_LoadedRefData { @@ -124,6 +123,7 @@ export interface SidebarProps extends API_LoadedRefData { onMenuClick?: HeadingProps['onMenuClick']; showCreateStoryButton?: boolean; indexJson?: StoryIndex; + isDevelopment?: boolean; } export const Sidebar = React.memo(function Sidebar({ // @ts-expect-error (non strict) @@ -138,6 +138,7 @@ export const Sidebar = React.memo(function Sidebar({ extra, menuHighlighted = false, enableShortcuts = true, + isDevelopment = global.CONFIG_TYPE === 'DEVELOPMENT', refs = {}, onMenuClick, showCreateStoryButton = isDevelopment && isRendererReact, @@ -229,7 +230,7 @@ export const Sidebar = React.memo(function Sidebar({ )} - {isMobile || isLoading ? null : } + {isMobile || isLoading ? null : } ); diff --git a/code/core/src/manager/components/sidebar/SidebarBottom.stories.tsx b/code/core/src/manager/components/sidebar/SidebarBottom.stories.tsx index 18a9a83db9fb..8d7d2c42f488 100644 --- a/code/core/src/manager/components/sidebar/SidebarBottom.stories.tsx +++ b/code/core/src/manager/components/sidebar/SidebarBottom.stories.tsx @@ -6,6 +6,7 @@ import { SidebarBottomBase } from './SidebarBottom'; export default { component: SidebarBottomBase, args: { + isDevelopment: true, api: { clearNotification: fn(), emit: fn(), diff --git a/code/core/src/manager/components/sidebar/SidebarBottom.tsx b/code/core/src/manager/components/sidebar/SidebarBottom.tsx index b25defd9c4bd..f6aae845bee3 100644 --- a/code/core/src/manager/components/sidebar/SidebarBottom.tsx +++ b/code/core/src/manager/components/sidebar/SidebarBottom.tsx @@ -92,9 +92,15 @@ interface SidebarBottomProps { api: API; notifications: State['notifications']; status: State['status']; + isDevelopment?: boolean; } -export const SidebarBottomBase = ({ api, notifications = [], status = {} }: SidebarBottomProps) => { +export const SidebarBottomBase = ({ + api, + notifications = [], + status = {}, + isDevelopment, +}: SidebarBottomProps) => { const spacerRef = useRef(null); const wrapperRef = useRef(null); const [warningsActive, setWarningsActive] = useState(false); @@ -228,27 +234,36 @@ export const SidebarBottomBase = ({ api, notifications = [], status = {} }: Side
- + {isDevelopment && ( + + )}
); }; -export const SidebarBottom = () => { +export const SidebarBottom = ({ isDevelopment }: { isDevelopment?: boolean }) => { const api = useStorybookApi(); const { notifications, status } = useStorybookState(); - return ; + return ( + + ); }; diff --git a/code/core/src/manager/components/sidebar/TestingModule.tsx b/code/core/src/manager/components/sidebar/TestingModule.tsx index 5ca7bc8aa972..c020ebe53f09 100644 --- a/code/core/src/manager/components/sidebar/TestingModule.tsx +++ b/code/core/src/manager/components/sidebar/TestingModule.tsx @@ -229,7 +229,12 @@ export const TestingModule = ({ const testing = testProviders.length > 0; return ( - 0}> + 0} + > { let scopedModulePath; @@ -74,9 +92,15 @@ export const scopedResolve = (id: string): string => { scopedModulePath = require.resolve(id); } - const moduleFolderStrPosition = scopedModulePath.lastIndexOf( - id.replace(/\//g /* all '/' occurances */, sep) - ); + const idWithNativePathSep = id.replace(/\//g /* all '/' occurrences */, sep); + + // If the id referenced the file specifically, return the full module path & filename + if (scopedModulePath.endsWith(idWithNativePathSep)) { + return scopedModulePath; + } + + // Otherwise, return just the path to the module folder or named export + const moduleFolderStrPosition = scopedModulePath.lastIndexOf(idWithNativePathSep); const beginningOfMainScriptPath = moduleFolderStrPosition + id.length; return scopedModulePath.substring(0, beginningOfMainScriptPath); }; diff --git a/code/frameworks/sveltekit/src/plugins/mock-sveltekit-stores.ts b/code/frameworks/sveltekit/src/plugins/mock-sveltekit-stores.ts index 8831e9217052..98ceb6cc7e5c 100644 --- a/code/frameworks/sveltekit/src/plugins/mock-sveltekit-stores.ts +++ b/code/frameworks/sveltekit/src/plugins/mock-sveltekit-stores.ts @@ -1,16 +1,21 @@ -import { resolve } from 'node:path'; +import { dirname, resolve } from 'node:path'; +import { fileURLToPath } from 'node:url'; import type { Plugin } from 'vite'; +// @ts-expect-error We are building for CJS and ESM, so we have to use import.meta.url for the ESM output +const filename = __filename ?? fileURLToPath(import.meta.url); +const dir = dirname(filename); + export async function mockSveltekitStores() { return { name: 'storybook:sveltekit-mock-stores', config: () => ({ resolve: { alias: { - '$app/forms': resolve(__dirname, '../src/mocks/app/forms.ts'), - '$app/navigation': resolve(__dirname, '../src/mocks/app/navigation.ts'), - '$app/stores': resolve(__dirname, '../src/mocks/app/stores.ts'), + '$app/forms': resolve(dir, '../src/mocks/app/forms.ts'), + '$app/navigation': resolve(dir, '../src/mocks/app/navigation.ts'), + '$app/stores': resolve(dir, '../src/mocks/app/stores.ts'), }, }, }), diff --git a/code/lib/create-storybook/src/generators/baseGenerator.ts b/code/lib/create-storybook/src/generators/baseGenerator.ts index 814cea8a956d..4ba6db064da3 100644 --- a/code/lib/create-storybook/src/generators/baseGenerator.ts +++ b/code/lib/create-storybook/src/generators/baseGenerator.ts @@ -245,7 +245,7 @@ export async function baseGenerator( ].filter(Boolean); // TODO: migrate template stories in solid and qwik to use @storybook/test - if (['solid', 'qwik'].includes(rendererId)) { + if (['qwik'].includes(rendererId)) { addonPackages.push('@storybook/testing-library'); } else { addonPackages.push('@storybook/test'); diff --git a/code/package.json b/code/package.json index a84b56c107cb..b9f9c6df135b 100644 --- a/code/package.json +++ b/code/package.json @@ -293,5 +293,6 @@ "Dependency Upgrades" ] ] - } + }, + "deferredNextVersion": "8.4.2" } diff --git a/docs/versions/latest.json b/docs/versions/latest.json index 85c8a9e9a5a0..6e4199f0fd46 100644 --- a/docs/versions/latest.json +++ b/docs/versions/latest.json @@ -1 +1 @@ -{"version":"8.4.1","info":{"plain":"- Core: Relax peer dep constraint of shim packages - [#29503](https://github.com/storybookjs/storybook/pull/29503), thanks @kasperpeulen!"}} +{"version":"8.4.2","info":{"plain":"- Addon Test: Fix post-install logic for Next.js Vite framework support - [#29524](https://github.com/storybookjs/storybook/pull/29524), thanks @valentinpalkovic!\n- Addon Test: Only render the TestingModule component in development mode - [#29501](https://github.com/storybookjs/storybook/pull/29501), thanks @yannbf!\n- CLI: Fix Solid init by installing `@storybook/test` - [#29514](https://github.com/storybookjs/storybook/pull/29514), thanks @shilman!\n- Core: Shim CJS-only globals in ESM output - [#29157](https://github.com/storybookjs/storybook/pull/29157), thanks @valentinpalkovic!\n- Next.js: Fix bundled react and react-dom in monorepos - [#29444](https://github.com/storybookjs/storybook/pull/29444), thanks @sentience!"}} diff --git a/docs/versions/next.json b/docs/versions/next.json index f7ae322dcdb2..641189d11f4c 100644 --- a/docs/versions/next.json +++ b/docs/versions/next.json @@ -1 +1 @@ -{"version":"8.5.0-alpha.1","info":{"plain":"- Core: Relax peer dep constraint of shim packages - [#29503](https://github.com/storybookjs/storybook/pull/29503), thanks @kasperpeulen!"}} +{"version":"8.5.0-alpha.2","info":{"plain":"- Addon Test: Only render the TestingModule component in development mode - [#29501](https://github.com/storybookjs/storybook/pull/29501), thanks @yannbf!\n- CLI: Fix Solid init by installing `@storybook/test` - [#29514](https://github.com/storybookjs/storybook/pull/29514), thanks @shilman!\n- Core: Add bun support with npm fallback - [#29267](https://github.com/storybookjs/storybook/pull/29267), thanks @stephenjason89!\n- Core: Shim CJS-only globals in ESM output - [#29157](https://github.com/storybookjs/storybook/pull/29157), thanks @valentinpalkovic!\n- Next.js: Fix bundled react and react-dom in monorepos - [#29444](https://github.com/storybookjs/storybook/pull/29444), thanks @sentience!\n- Next.js: Upgrade sass-loader from ^13.2.0 to ^14.2.1 - [#29264](https://github.com/storybookjs/storybook/pull/29264), thanks @HoncharenkoZhenya!\n- UI: Add support for groups to `TooltipLinkList` and use it in main menu - [#29507](https://github.com/storybookjs/storybook/pull/29507), thanks @ghengeveld!"}}