diff --git a/.gitignore b/.gitignore index 5805f77ea769..acfc54475076 100644 --- a/.gitignore +++ b/.gitignore @@ -57,3 +57,4 @@ code/.nx/cache code/.vite-inspect .nx/cache !**/fixtures/**/yarn.lock +code/core/report diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md index bade8a334b3a..cdf788cb9219 100644 --- a/CHANGELOG.prerelease.md +++ b/CHANGELOG.prerelease.md @@ -1,3 +1,29 @@ +## 8.3.0-beta.1 + +- ConfigFile: Fix `as const satisfies` modifiers - [#29000](https://github.com/storybookjs/storybook/pull/29000), thanks @shilman! +- Core: Move `util` to regular dependency - [#29008](https://github.com/storybookjs/storybook/pull/29008), thanks @ndelangen! +- Next.js-Vite: Streamline Next.js dir option - [#28995](https://github.com/storybookjs/storybook/pull/28995), thanks @valentinpalkovic! +- Next.js: Fix wrong Next.js framework reference - [#28992](https://github.com/storybookjs/storybook/pull/28992), thanks @valentinpalkovic! +- Vue3: Add vite plugin for portable stories - [#29004](https://github.com/storybookjs/storybook/pull/29004), thanks @yannbf! + +## 8.3.0-beta.0 + +Empty release identical to `v8.3.0-alpha.11` + +## 8.3.0-alpha.11 + +- Addon Vitest: Fix tests potentially not existing in non-isolate mode - [#28993](https://github.com/storybookjs/storybook/pull/28993), thanks @yannbf! +- Builder-Vite: Fix 'condition node never be used' warning - [#28989](https://github.com/storybookjs/storybook/pull/28989), thanks @valentinpalkovic! +- CLI: Update spawn options in proxy.ts to support Windows - [#28990](https://github.com/storybookjs/storybook/pull/28990), thanks @valentinpalkovic! +- Next.js-Vite: Update next and vite-plugin-storybook-nextjs dependencies - [#28994](https://github.com/storybookjs/storybook/pull/28994), thanks @valentinpalkovic! + +## 8.3.0-alpha.10 + +- Addon Vitest: Fix postinstall file types - [#28978](https://github.com/storybookjs/storybook/pull/28978), thanks @shilman! +- CLI: Fix dedent import in package managers - [#28980](https://github.com/storybookjs/storybook/pull/28980), thanks @shilman! +- Core: De-duplicate babel use in core - [#28972](https://github.com/storybookjs/storybook/pull/28972), thanks @ndelangen! +- Vitest: Fix add command - [#28975](https://github.com/storybookjs/storybook/pull/28975), thanks @ghengeveld! + ## 8.3.0-alpha.9 - Addon Viewport: Add default options via parameters - [#28944](https://github.com/storybookjs/storybook/pull/28944), thanks @ndelangen! diff --git a/MIGRATION.md b/MIGRATION.md index 72fd9adff5f0..d63cd568816f 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -105,17 +105,17 @@ - [Tab addons cannot manually route, Tool addons can filter their visibility via tabId](#tab-addons-cannot-manually-route-tool-addons-can-filter-their-visibility-via-tabid) - [Removed `config` preset](#removed-config-preset-1) - [From version 7.5.0 to 7.6.0](#from-version-750-to-760) - - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated) - - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated) - - [typescript.skipBabel deprecated](#typescriptskipbabel-deprecated) - - [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop) - - [Addons no longer need a peer dependency on React](#addons-no-longer-need-a-peer-dependency-on-react) + - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated) + - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated) + - [typescript.skipBabel deprecated](#typescriptskipbabel-deprecated) + - [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop) + - [Addons no longer need a peer dependency on React](#addons-no-longer-need-a-peer-dependency-on-react) - [From version 7.4.0 to 7.5.0](#from-version-740-to-750) - - [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated) - - [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers) + - [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated) + - [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers) - [From version 7.0.0 to 7.2.0](#from-version-700-to-720) - - [Addon API is more type-strict](#addon-api-is-more-type-strict) - - [Addon-controls hideNoControlsWarning parameter is deprecated](#addon-controls-hidenocontrolswarning-parameter-is-deprecated) + - [Addon API is more type-strict](#addon-api-is-more-type-strict) + - [Addon-controls hideNoControlsWarning parameter is deprecated](#addon-controls-hidenocontrolswarning-parameter-is-deprecated) - [From version 6.5.x to 7.0.0](#from-version-65x-to-700) - [7.0 breaking changes](#70-breaking-changes) - [Dropped support for Node 15 and below](#dropped-support-for-node-15-and-below) @@ -141,7 +141,7 @@ - [Deploying build artifacts](#deploying-build-artifacts) - [Dropped support for file URLs](#dropped-support-for-file-urls) - [Serving with nginx](#serving-with-nginx) - - [Ignore story files from node_modules](#ignore-story-files-from-node_modules) + - [Ignore story files from node\_modules](#ignore-story-files-from-node_modules) - [7.0 Core changes](#70-core-changes) - [7.0 feature flags removed](#70-feature-flags-removed) - [Story context is prepared before for supporting fine grained updates](#story-context-is-prepared-before-for-supporting-fine-grained-updates) @@ -155,7 +155,7 @@ - [Addon-interactions: Interactions debugger is now default](#addon-interactions-interactions-debugger-is-now-default) - [7.0 Vite changes](#70-vite-changes) - [Vite builder uses Vite config automatically](#vite-builder-uses-vite-config-automatically) - - [Vite cache moved to node_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook) + - [Vite cache moved to node\_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook) - [7.0 Webpack changes](#70-webpack-changes) - [Webpack4 support discontinued](#webpack4-support-discontinued) - [Babel mode v7 exclusively](#babel-mode-v7-exclusively) @@ -205,7 +205,7 @@ - [Dropped addon-docs manual babel configuration](#dropped-addon-docs-manual-babel-configuration) - [Dropped addon-docs manual configuration](#dropped-addon-docs-manual-configuration) - [Autoplay in docs](#autoplay-in-docs) - - [Removed STORYBOOK_REACT_CLASSES global](#removed-storybook_react_classes-global) + - [Removed STORYBOOK\_REACT\_CLASSES global](#removed-storybook_react_classes-global) - [7.0 Deprecations and default changes](#70-deprecations-and-default-changes) - [storyStoreV7 enabled by default](#storystorev7-enabled-by-default) - [`Story` type deprecated](#story-type-deprecated) @@ -428,35 +428,45 @@ These APIs allowed addons to render arbitrary content in the Storybook sidebar. ### New parameters format for addon backgrounds -The `addon-backgrounds` addon now uses a new format for parameters. The `backgrounds` parameter is now an object with a `values` key that contains the background values. +> [!NOTE] +> You need to set the feature flag `backgroundsStoryGlobals` to `true` in your `.storybook/main.ts` to use the new format and set the value with `globals`. +> +> See here how to set feature flags: https://storybook.js.org/docs/api/main-config/main-config-features -> ! You need to set the feature flag `backgroundsStoryGlobals` to `true` in your `.storybook/main.ts` to use the new format. +The `addon-backgrounds` addon now uses a new format for configuring its list of selectable backgrounds. +The `backgrounds` parameter is now an object with an `options` property. +This `options` object is a key-value pair where the key is used when setting the global value, the value is an object with a `name` and `value` property. ```diff // .storybook/preview.js export const parameters = { backgrounds: { -- values: [ -- { name: 'twitter', value: '#00aced' }, -- { name: 'facebook', value: '#3b5998' }, -- ], -+ options: { -+ twitter: { name: 'twitter', value: '#00aced' }, -+ facebook: { name: 'facebook', value: '#3b5998' }, -+ }, +- values: [ +- { name: 'twitter', value: '#00aced' }, +- { name: 'facebook', value: '#3b5998' }, +- ], ++ options: { ++ twitter: { name: 'Twitter', value: '#00aced' }, ++ facebook: { name: 'Facebook', value: '#3b5998' }, ++ }, }, }; ``` Setting an override value should now be done via a `globals` property on your component/meta or story itself: -```ts +```diff // Button.stories.ts export default { component: Button, - globals: { - backgrounds: { value: "twitter" }, - }, +- parameters: { +- backgrounds: { +- default: "twitter", +- }, +- }, ++ globals: { ++ backgrounds: { value: "twitter" }, ++ }, }; ``` @@ -464,49 +474,65 @@ This locks that story to the `twitter` background, it cannot be changed by the a ### New parameters format for addon viewport -> ! You need to set the feature flag `viewportStoryGlobals` to `true` in your `.storybook/main.ts` to use the new format. +> [!NOTE] +> You need to set the feature flag `viewportStoryGlobals` to `true` in your `.storybook/main.ts` to use the new format and set the value with `globals`. +> +> See here how to set feature flags: https://storybook.js.org/docs/api/main-config/main-config-features -The `addon-viewport` addon now uses a new format for parameters. The `viewport` parameter is now an object with a `viewports` key that contains the viewport values. +The `addon-viewport` addon now uses a new format for configuring its list of selectable viewports. +The `viewport` parameter is now an object with an `options` property. +This `options` object is a key-value pair where the key is used when setting the global value, the value is an object with a `name` and `styles` property. +The `styles` property is an object with a `width` and a `height` property. ```diff // .storybook/preview.js export const parameters = { viewport: { -- viewports: { -- iphone5: { -- name: 'phone', -- styles: { -- width: '320px', -- height: '568px', -- }, -- }, +- viewports: { +- iphone5: { +- name: 'phone', +- styles: { +- width: '320px', +- height: '568px', +- }, - }, -+ options: { -+ iphone5: { -+ name: 'phone', -+ styles: { -+ width: '320px', -+ height: '568px', -+ }, -+ }, -+ }, +- }, ++ options: { ++ iphone5: { ++ name: 'phone', ++ styles: { ++ width: '320px', ++ height: '568px', ++ }, ++ }, ++ }, }, }; ``` -Setting an override value should now be done via a `globals` property on your component/meta or story itself: +Setting an override value should now be done via a `globals` property on your component/meta or story itself. +Also note the change from `defaultOrientation: "landscape"` to `isRotated: true`. -```ts +```diff // Button.stories.ts export default { component: Button, - globals: { - viewport: { value: "phone" }, - }, +- parameters: { +- viewport: { +- defaultViewport: "iphone5", +- defaultOrientation: "landscape", +- }, +- }, ++ globals: { ++ viewport: { ++ value: "iphone5", ++ isRotated: true, ++ }, ++ }, }; ``` -This locks that story to the `phone` viewport, it cannot be changed by the addon UI. +This locks that story to the `iphone5` viewport in landscape orientation, it cannot be changed by the addon UI. ## From version 8.1.x to 8.2.x @@ -2497,13 +2523,13 @@ This means also, that there is no root ngModule anymore. Previously you were abl For example, if you want to configure BrowserAnimationModule in your stories, please extract the necessary providers the following way and provide them via the `applicationConfig` decorator: ```js -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { importProvidersFrom } from '@angular/core'; -import { applicationConfig, Meta, StoryObj } from '@storybook/angular'; -import {ExampleComponent} from './example.component'; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { importProvidersFrom } from "@angular/core"; +import { applicationConfig, Meta, StoryObj } from "@storybook/angular"; +import { ExampleComponent } from "./example.component"; const meta: Meta = { - title: 'Example', + title: "Example", component: ExampleComponent, decorators: [ // Define application-wide providers with the applicationConfig decorator @@ -2519,14 +2545,14 @@ const meta: Meta = { export default meta; -type Story = StoryObj +type Story = StoryObj; export const Default: Story = { render: () => ({ // Define application-wide providers directly in the render function applicationConfig: { providers: [importProvidersFrom(BrowserAnimationsModule)], - } + }, }), }; ``` diff --git a/code/.eslintignore b/code/.eslintignore index 8ae7c73cc7fd..5efb1ab25edc 100644 --- a/code/.eslintignore +++ b/code/.eslintignore @@ -18,4 +18,5 @@ ember-output !.eslintrc-markdown.js !.storybook core/assets -core/src/core-server/utils/__search-files-tests__ \ No newline at end of file +core/src/core-server/utils/__search-files-tests__ +core/report diff --git a/code/.prettierignore b/code/.prettierignore index 78c3a20024a4..0e000200275b 100644 --- a/code/.prettierignore +++ b/code/.prettierignore @@ -1,3 +1,4 @@ *.mdx -/.nx/cache \ No newline at end of file +/.nx/cache +core/report diff --git a/code/.yarn/patches/@types-babel__traverse-npm-7.20.6-fac4243243.patch b/code/.yarn/patches/@types-babel__traverse-npm-7.20.6-fac4243243.patch new file mode 100644 index 000000000000..e4026310e882 --- /dev/null +++ b/code/.yarn/patches/@types-babel__traverse-npm-7.20.6-fac4243243.patch @@ -0,0 +1,13 @@ +diff --git a/index.d.ts b/index.d.ts +index d6cccce88c306f0bd3c2ff529b0cdbda86a0d3e1..1d3f1b3f1c6a19cf8dffe490aaa097939d6f7f9a 100644 +--- a/index.d.ts ++++ b/index.d.ts +@@ -1,6 +1,6 @@ + import * as t from "@babel/types"; +-export import Node = t.Node; +-export import RemovePropertiesOptions = t.RemovePropertiesOptions; ++import { Node, RemovePropertiesOptions } from "@babel/types"; ++export { Node, RemovePropertiesOptions } + + declare const traverse: { + (parent: Node, opts: TraverseOptions, scope: Scope | undefined, state: S, parentPath?: NodePath): void; diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index c78453b24ccb..56215ebf83f4 100644 --- a/code/addons/a11y/package.json +++ b/code/addons/a11y/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-a11y", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Test component compliance with web accessibility standards", "keywords": [ "a11y", @@ -29,8 +29,7 @@ ".": { "types": "./dist/index.d.ts", "import": "./dist/index.mjs", - "require": "./dist/index.js", - "node": "./dist/index.js" + "require": "./dist/index.js" }, "./preview": { "types": "./dist/preview.d.ts", diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json index 2278d3a84e0a..b4f1a9b2b5c6 100644 --- a/code/addons/actions/package.json +++ b/code/addons/actions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-actions", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Get UI feedback when an action is performed on an interactive element", "keywords": [ "storybook", @@ -25,8 +25,7 @@ ".": { "types": "./dist/index.d.ts", "import": "./dist/index.mjs", - "require": "./dist/index.js", - "node": "./dist/index.js" + "require": "./dist/index.js" }, "./decorator": { "types": "./dist/decorator.d.ts", diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json index 85307e348033..cfc3a09a9f2d 100644 --- a/code/addons/backgrounds/package.json +++ b/code/addons/backgrounds/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-backgrounds", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Switch backgrounds to view components in different settings", "keywords": [ "addon", @@ -29,8 +29,7 @@ ".": { "types": "./dist/index.d.ts", "import": "./dist/index.mjs", - "require": "./dist/index.js", - "node": "./dist/index.js" + "require": "./dist/index.js" }, "./preview": { "types": "./dist/preview.d.ts", diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json index 4fdb76e8b0ec..344788289325 100644 --- a/code/addons/controls/package.json +++ b/code/addons/controls/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-controls", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Interact with component inputs dynamically in the Storybook UI", "keywords": [ "addon", @@ -29,8 +29,7 @@ ".": { "types": "./dist/index.d.ts", "import": "./dist/index.mjs", - "require": "./dist/index.js", - "node": "./dist/index.js" + "require": "./dist/index.js" }, "./manager": "./dist/manager.js", "./register": "./dist/manager.js", diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json index fa0bc583a9e1..9606ce5633e8 100644 --- a/code/addons/docs/package.json +++ b/code/addons/docs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-docs", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Document component usage and properties in Markdown", "keywords": [ "addon", @@ -28,8 +28,7 @@ ".": { "types": "./dist/index.d.ts", "import": "./dist/index.mjs", - "require": "./dist/index.js", - "node": "./dist/index.js" + "require": "./dist/index.js" }, "./preview": { "types": "./dist/preview.d.ts", diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json index 7cb5c79da826..a8678f6b4890 100644 --- a/code/addons/essentials/package.json +++ b/code/addons/essentials/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-essentials", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Curated addons to bring out the best of Storybook", "keywords": [ "addon", @@ -25,8 +25,7 @@ ".": { "types": "./dist/index.d.ts", "import": "./dist/index.mjs", - "require": "./dist/index.js", - "node": "./dist/index.js" + "require": "./dist/index.js" }, "./actions/preview": { "types": "./dist/actions/preview.d.ts", diff --git a/code/addons/gfm/package.json b/code/addons/gfm/package.json index 10855f148550..d90d7ac35e5c 100644 --- a/code/addons/gfm/package.json +++ b/code/addons/gfm/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-mdx-gfm", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "GitHub Flavored Markdown in Storybook", "keywords": [ "addon", diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json index 0d36651dc97e..38e59643d009 100644 --- a/code/addons/highlight/package.json +++ b/code/addons/highlight/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-highlight", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Highlight DOM nodes within your stories", "keywords": [ "storybook-addons", @@ -27,8 +27,7 @@ ".": { "types": "./dist/index.d.ts", "import": "./dist/index.mjs", - "require": "./dist/index.js", - "node": "./dist/index.js" + "require": "./dist/index.js" }, "./preview": { "types": "./dist/preview.d.ts", diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json index ff45389bb1a6..138bdde17f80 100644 --- a/code/addons/interactions/package.json +++ b/code/addons/interactions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-interactions", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Automate, test and debug user interactions", "keywords": [ "storybook-addons", @@ -25,8 +25,7 @@ ".": { "types": "./dist/index.d.ts", "import": "./dist/index.mjs", - "require": "./dist/index.js", - "node": "./dist/index.js" + "require": "./dist/index.js" }, "./preview": { "types": "./dist/preview.d.ts", diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json index 95f9acc57422..121802212948 100644 --- a/code/addons/jest/package.json +++ b/code/addons/jest/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-jest", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "React storybook addon that show component jest report", "keywords": [ "addon", @@ -31,8 +31,7 @@ ".": { "types": "./dist/index.d.ts", "import": "./dist/index.mjs", - "require": "./dist/index.js", - "node": "./dist/index.js" + "require": "./dist/index.js" }, "./manager": "./dist/manager.js", "./register": "./dist/manager.js", diff --git a/code/addons/links/package.json b/code/addons/links/package.json index 66cdb0d3f049..905ece4bba80 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-links", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Link stories together to build demos and prototypes with your UI components", "keywords": [ "addon", @@ -25,8 +25,7 @@ ".": { "types": "./dist/index.d.ts", "import": "./dist/index.mjs", - "require": "./dist/index.js", - "node": "./dist/index.js" + "require": "./dist/index.js" }, "./react": { "types": "./dist/react/index.d.ts", diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json index c5ddf6ca37e6..7300033feb85 100644 --- a/code/addons/measure/package.json +++ b/code/addons/measure/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-measure", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Inspect layouts by visualizing the box model", "keywords": [ "storybook-addons", @@ -28,8 +28,7 @@ ".": { "types": "./dist/index.d.ts", "import": "./dist/index.mjs", - "require": "./dist/index.js", - "node": "./dist/index.js" + "require": "./dist/index.js" }, "./preview": { "types": "./dist/preview.d.ts", diff --git a/code/addons/onboarding/package.json b/code/addons/onboarding/package.json index eac8d4bd2485..143e9c4da186 100644 --- a/code/addons/onboarding/package.json +++ b/code/addons/onboarding/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-onboarding", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Storybook Addon Onboarding - Introduces a new onboarding experience", "keywords": [ "storybook-addons", @@ -24,8 +24,7 @@ ".": { "types": "./dist/index.d.ts", "import": "./dist/index.mjs", - "require": "./dist/index.js", - "node": "./dist/index.js" + "require": "./dist/index.js" }, "./manager": "./dist/manager.js", "./preset": "./dist/preset.js", diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json index d28d030433f3..2414b8d60329 100644 --- a/code/addons/outline/package.json +++ b/code/addons/outline/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-outline", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Outline all elements with CSS to help with layout placement and alignment", "keywords": [ "storybook-addons", @@ -31,8 +31,7 @@ ".": { "types": "./dist/index.d.ts", "import": "./dist/index.mjs", - "require": "./dist/index.js", - "node": "./dist/index.js" + "require": "./dist/index.js" }, "./preview": { "types": "./dist/preview.d.ts", diff --git a/code/addons/storysource/package.json b/code/addons/storysource/package.json index 0ddabfc47a61..d0aba301c8c8 100644 --- a/code/addons/storysource/package.json +++ b/code/addons/storysource/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storysource", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "View a story’s source code to see how it works and paste into your app", "keywords": [ "addon", @@ -25,8 +25,7 @@ ".": { "types": "./dist/index.d.ts", "import": "./dist/index.mjs", - "require": "./dist/index.js", - "node": "./dist/index.js" + "require": "./dist/index.js" }, "./preset": "./dist/preset.js", "./manager": "./dist/manager.js", diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json index c590219d1516..05744f2a5c65 100644 --- a/code/addons/themes/package.json +++ b/code/addons/themes/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-themes", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Switch between multiple themes for you components in Storybook", "keywords": [ "css", @@ -30,8 +30,7 @@ ".": { "types": "./dist/index.d.ts", "import": "./dist/index.mjs", - "require": "./dist/index.js", - "node": "./dist/index.js" + "require": "./dist/index.js" }, "./preview": { "types": "./dist/preview.d.ts", diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json index 200ad64dc4b2..1c93389fc376 100644 --- a/code/addons/toolbars/package.json +++ b/code/addons/toolbars/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-toolbars", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Create your own toolbar items that control story rendering", "keywords": [ "addon", @@ -29,8 +29,7 @@ ".": { "types": "./dist/index.d.ts", "import": "./dist/index.mjs", - "require": "./dist/index.js", - "node": "./dist/index.js" + "require": "./dist/index.js" }, "./manager": "./dist/manager.js", "./register": "./dist/manager.js", diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json index 90cdbfd2c610..f130b71ed410 100644 --- a/code/addons/viewport/package.json +++ b/code/addons/viewport/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-viewport", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Build responsive components by adjusting Storybook’s viewport size and orientation", "keywords": [ "addon", @@ -26,8 +26,7 @@ ".": { "types": "./dist/index.d.ts", "import": "./dist/index.mjs", - "require": "./dist/index.js", - "node": "./dist/index.js" + "require": "./dist/index.js" }, "./preview": { "types": "./dist/preview.d.ts", diff --git a/code/addons/vitest/package.json b/code/addons/vitest/package.json index 3e248705f024..efad1c346f50 100644 --- a/code/addons/vitest/package.json +++ b/code/addons/vitest/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/experimental-addon-vitest", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Integrate Vitest with Storybook", "keywords": [ "storybook-addons", @@ -27,8 +27,7 @@ ".": { "types": "./dist/index.d.ts", "import": "./dist/index.js", - "require": "./dist/index.cjs", - "node": "./dist/index.cjs" + "require": "./dist/index.cjs" }, "./plugin": { "types": "./dist/plugin/index.d.ts", diff --git a/code/addons/vitest/postinstall.cjs b/code/addons/vitest/postinstall.cjs index 4a50bbe539e3..29374d2a9382 100644 --- a/code/addons/vitest/postinstall.cjs +++ b/code/addons/vitest/postinstall.cjs @@ -1 +1 @@ -module.exports = require('./dist/postinstall.js'); +module.exports = require('./dist/postinstall.cjs'); diff --git a/code/addons/vitest/preset.cjs b/code/addons/vitest/preset.cjs index 87f1602c2f26..4c4e36fbb3bb 100644 --- a/code/addons/vitest/preset.cjs +++ b/code/addons/vitest/preset.cjs @@ -1,8 +1,3 @@ -function managerEntries(entry = []) { - return [...entry, require.resolve('./dist/manager.js')]; -} - module.exports = { - managerEntries, - ...require('./dist/preset'), + ...require('./dist/preset.cjs'), }; diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts index 53361975704b..3ffcd813628e 100644 --- a/code/addons/vitest/src/postinstall.ts +++ b/code/addons/vitest/src/postinstall.ts @@ -19,7 +19,7 @@ import dedent from 'ts-dedent'; import { type PostinstallOptions } from '../../../lib/cli-storybook/src/add'; -const extensions = ['.ts', '.mts', '.cts', '.js', '.mjs', '.cjs']; +const extensions = ['.js', '.jsx', '.ts', '.tsx', '.cts', '.mts', '.cjs', '.mjs']; export default async function postInstall(options: PostinstallOptions) { const packageManager = JsPackageManagerFactory.getPackageManager({ @@ -60,16 +60,16 @@ export default async function postInstall(options: PostinstallOptions) { const packages = ['vitest@latest', '@vitest/browser@latest', 'playwright@latest']; - logger.info( - dedent` - We detected that you're using Next.js. - We will configure the vite-plugin-storybook-nextjs plugin to allow you to run tests in Vitest. - ` - ); - if (info.frameworkPackageName === '@storybook/nextjs') { + logger.info( + dedent` + We detected that you're using Next.js. + We will configure the vite-plugin-storybook-nextjs plugin to allow you to run tests in Vitest. + ` + ); packages.push('vite-plugin-storybook-nextjs@latest'); } + logger.info(c.bold('Installing packages...')); logger.info(packages.join(', ')); await packageManager.addDependencies({ installAsDevDependencies: true }, packages); @@ -83,7 +83,7 @@ export default async function postInstall(options: PostinstallOptions) { logger.info(c.bold('Writing .storybook/vitest.setup.ts file...')); const previewExists = extensions - .map((ext) => path.resolve(path.join(options.configDir, `preview${ext}`))) + .map((ext) => path.resolve(options.configDir, `preview${ext}`)) .some((config) => existsSync(config)); await writeFile( @@ -92,21 +92,22 @@ export default async function postInstall(options: PostinstallOptions) { import { beforeAll } from 'vitest' import { setProjectAnnotations } from '${annotationsImport}' ${previewExists ? `import * as projectAnnotations from './preview'` : ''} - + const project = setProjectAnnotations(${previewExists ? 'projectAnnotations' : '[]'}) - + beforeAll(project.beforeAll) ` ); - const configFiles = extensions.map((ext) => 'vitest.config' + ext); - - const rootConfig = await findUp(configFiles, { - cwd: process.cwd(), - }); + // Check for an existing config file. Can be from Vitest (preferred) or Vite (with `test` option). + const viteConfigFiles = extensions.map((ext) => 'vite.config' + ext); + const viteConfig = await findUp(viteConfigFiles, { cwd: process.cwd() }); + const vitestConfigFiles = extensions.map((ext) => 'vitest.config' + ext); + const rootConfig = (await findUp(vitestConfigFiles, { cwd: process.cwd() })) || viteConfig; if (rootConfig) { - const extname = rootConfig ? path.extname(rootConfig) : '.ts'; + // If there's an existing config, we create a workspace file so we can run Storybook tests alongside. + const extname = path.extname(rootConfig); const browserWorkspaceFile = resolve(dirname(rootConfig), `vitest.workspace${extname}`); if (existsSync(browserWorkspaceFile)) { logger.info( @@ -121,66 +122,62 @@ export default async function postInstall(options: PostinstallOptions) { await writeFile( browserWorkspaceFile, dedent` - import { defineWorkspace } from 'vitest/config'; - import { storybookTest } from '@storybook/experimental-addon-vitest/plugin'; - ${vitestInfo.frameworkPluginImport ? vitestInfo.frameworkPluginImport + '\n' : ''} - export default defineWorkspace([ - '${relative(dirname(browserWorkspaceFile), rootConfig)}', - { - plugins: [ - storybookTest(),${vitestInfo.frameworkPluginCall ? '\n' + vitestInfo.frameworkPluginCall : ''} - ], - test: { - include: ['**/*.stories.?(m)[jt]s?(x)'], - browser: { - enabled: true, - name: 'chromium', - provider: 'playwright', - headless: true, + import { defineWorkspace } from 'vitest/config'; + import { storybookTest } from '@storybook/experimental-addon-vitest/plugin'; + ${vitestInfo.frameworkPluginImport ? vitestInfo.frameworkPluginImport + '\n' : ''} + export default defineWorkspace([ + '${relative(dirname(browserWorkspaceFile), rootConfig)}', + { + extends: '${viteConfig ? relative(dirname(browserWorkspaceFile), viteConfig) : ''}', + plugins: [ + storybookTest(),${vitestInfo.frameworkPluginCall ? '\n' + vitestInfo.frameworkPluginCall : ''} + ], + test: { + browser: { + enabled: true, + headless: true, + name: 'chromium', + provider: 'playwright', + }, + include: ['**/*.stories.?(m)[jt]s?(x)'], + setupFiles: ['./.storybook/vitest.setup.ts'], }, - // Disabling isolation is faster and is similar to how tests are isolated in storybook itself. - // Consider removing this if you are seeing problems with your tests. - isolate: false, - setupFiles: ['./.storybook/vitest.setup.ts'], }, - }, - ]); - ` + ]); + `.replace(/\s+extends: '',/, '') ); } } else { + // If there's no existing Vitest/Vite config, we create a new Vitest config file. logger.info(c.bold('Writing vitest.config.ts file...')); await writeFile( resolve('vitest.config.ts'), dedent` - import { defineConfig } from "vitest/config"; - import { storybookTest } from "@storybook/experimental-addon-vitest/plugin"; - ${vitestInfo.frameworkPluginImport ? vitestInfo.frameworkPluginImport + '\n' : ''} - export default defineConfig({ - plugins: [ - storybookTest(),${vitestInfo.frameworkPluginCall ? '\n' + vitestInfo.frameworkPluginCall : ''} - ], - test: { - include: ['**/*.stories.?(m)[jt]s?(x)'], - browser: { - enabled: true, - name: 'chromium', - provider: 'playwright', - headless: true, + import { defineConfig } from "vitest/config"; + import { storybookTest } from "@storybook/experimental-addon-vitest/plugin"; + ${vitestInfo.frameworkPluginImport ? vitestInfo.frameworkPluginImport + '\n' : ''} + export default defineConfig({ + plugins: [ + storybookTest(),${vitestInfo.frameworkPluginCall ? '\n' + vitestInfo.frameworkPluginCall : ''} + ], + test: { + browser: { + enabled: true, + headless: true, + name: 'chromium', + provider: 'playwright', + }, + include: ['**/*.stories.?(m)[jt]s?(x)'], + setupFiles: ['./.storybook/vitest.setup.ts'], }, - // Disabling isolation is faster and is similar to how tests are isolated in storybook itself. - // Consider removing this, if you have flaky tests. - isolate: false, - setupFiles: ['./.storybook/vitest.setup.ts'], - }, - }); - ` + }); + ` ); } logger.info( dedent` - The Vitest addon is now configured and you're ready to run your tests! + The Vitest addon is now configured and you're ready to run your tests! Check the documentation for more information about its features and options at: https://storybook.js.org/docs/writing-tests/test-runner-with-vitest ` @@ -201,6 +198,11 @@ const getVitestPluginInfo = (framework: string) => { frameworkPluginCall = 'storybookSveltekitPlugin()'; } + if (framework === '@storybook/vue3-vite') { + frameworkPluginImport = "import { storybookVuePlugin } from '@storybook/vue3-vite/vite'"; + frameworkPluginCall = 'storybookVuePlugin()'; + } + return { frameworkPluginImport, frameworkPluginCall }; }; @@ -215,7 +217,6 @@ async function getFrameworkInfo({ configDir, packageManager: pkgMgr }: Postinsta validateFrameworkName(frameworkName); const frameworkPackageName = extractProperFrameworkName(frameworkName); - console.log(configDir); const presets = await loadAllPresets({ corePresets: [join(frameworkName, 'preset')], overridePresets: [ diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json index 6d569d4a3bfd..30ff59d8515c 100644 --- a/code/builders/builder-vite/package.json +++ b/code/builders/builder-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-vite", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "A plugin to run and build Storybooks with Vite", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/builders/builder-vite/#readme", "bugs": { diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json index 1d93c339e041..129e26c391cf 100644 --- a/code/builders/builder-webpack5/package.json +++ b/code/builders/builder-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-webpack5", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/core/package.json b/code/core/package.json index d755d3e7396e..b8fe407038fd 100644 --- a/code/core/package.json +++ b/code/core/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" @@ -157,6 +157,11 @@ "import": "./dist/cli/index.js", "require": "./dist/cli/index.cjs" }, + "./babel": { + "types": "./dist/babel/index.d.ts", + "import": "./dist/babel/index.js", + "require": "./dist/babel/index.cjs" + }, "./cli/bin": { "types": "./dist/cli/bin/index.d.ts", "import": "./dist/cli/bin/index.js", @@ -253,6 +258,9 @@ "cli": [ "./dist/cli/index.d.ts" ], + "babel": [ + "./dist/babel/index.d.ts" + ], "cli/bin": [ "./dist/cli/bin/index.d.ts" ] @@ -278,6 +286,7 @@ "process": "^0.11.10", "recast": "^0.23.5", "semver": "^7.6.2", + "util": "^0.12.5", "ws": "^8.2.3" }, "devDependencies": { @@ -410,7 +419,6 @@ "typescript": "^5.3.2", "unique-string": "^3.0.0", "use-resize-observer": "^9.1.0", - "util": "^0.12.4", "watchpack": "^2.2.0" }, "publishConfig": { diff --git a/code/core/scripts/entries.ts b/code/core/scripts/entries.ts index a7062abf9a6c..afe8acddd84d 100644 --- a/code/core/scripts/entries.ts +++ b/code/core/scripts/entries.ts @@ -37,6 +37,7 @@ export const getEntries = (cwd: string) => { define('src/manager/globals.ts', ['node'], true), define('src/preview/globals.ts', ['node'], true), define('src/cli/index.ts', ['node'], true), + define('src/babel/index.ts', ['node'], true), define('src/cli/bin/index.ts', ['node'], true), ]; }; diff --git a/code/core/scripts/prep.ts b/code/core/scripts/prep.ts index a9605232991c..49c2bd00cfa0 100644 --- a/code/core/scripts/prep.ts +++ b/code/core/scripts/prep.ts @@ -1,8 +1,10 @@ /* eslint-disable local-rules/no-uncategorized-errors */ import { watch } from 'node:fs'; -import { mkdir, rm } from 'node:fs/promises'; +import { mkdir, rm, writeFile } from 'node:fs/promises'; import { dirname, join } from 'node:path'; +import { ensureDir } from 'fs-extra'; + import { chalk, dedent, @@ -307,25 +309,24 @@ async function run() { }); } else { await Promise.all( - compile.map(async (context) => { + compile.map(async (context, index) => { const out = await context.rebuild(); await context.dispose(); - /** - * I'm leaving this in place, because I want to start utilizing it in the future. I'm - * imagining a github action that shows the bundle analysis in the PR. I didn't have the - * project-scope to make that happen now, but I want expose this very rich useful data - * accessible, for the next person investigating bundle size issues. - */ + if (out.metafile) { + const { outputs } = out.metafile; + const keys = Object.keys(outputs); + const format = keys.every((key) => key.endsWith('.js')) ? 'esm' : 'cjs'; + const outName = + keys.length === 1 ? dirname(keys[0]).replace('dist/', '') : `meta-${format}-${index}`; - // if (out.metafile) { - // await writeFile('report/meta.json', JSON.stringify(out.metafile, null, 2)); - // await writeFile( - // 'report/meta.txt', - // await esbuild.analyzeMetafile(out.metafile, { color: false, verbose: false }) - // ); - // console.log(await esbuild.analyzeMetafile(out.metafile, { color: true })); - // } + await ensureDir('report'); + await writeFile(`report/${outName}.json`, JSON.stringify(out.metafile, null, 2)); + await writeFile( + `report/${outName}.txt`, + await esbuild.analyzeMetafile(out.metafile, { color: false, verbose: false }) + ); + } }) ); } diff --git a/code/core/src/csf-tools/babelParse.ts b/code/core/src/babel/babelParse.ts similarity index 80% rename from code/core/src/csf-tools/babelParse.ts rename to code/core/src/babel/babelParse.ts index c802734ef675..d65aa4db65f3 100644 --- a/code/core/src/csf-tools/babelParse.ts +++ b/code/core/src/babel/babelParse.ts @@ -1,15 +1,13 @@ -import * as babelParser from '@babel/parser'; +import * as parser from '@babel/parser'; import type { ParserOptions } from '@babel/parser'; import type * as t from '@babel/types'; import * as recast from 'recast'; -function parseWithFlowOrTypescript(source: string, parserOptions: babelParser.ParserOptions) { +function parseWithFlowOrTypescript(source: string, parserOptions: parser.ParserOptions) { const flowCommentPattern = /^\s*\/\/\s*@flow/; const useFlowPlugin = flowCommentPattern.test(source); - const parserPlugins: babelParser.ParserOptions['plugins'] = useFlowPlugin - ? ['flow'] - : ['typescript']; + const parserPlugins: parser.ParserOptions['plugins'] = useFlowPlugin ? ['flow'] : ['typescript']; // Merge the provided parserOptions with the custom parser plugins const mergedParserOptions = { @@ -17,7 +15,7 @@ function parseWithFlowOrTypescript(source: string, parserOptions: babelParser.Pa plugins: [...(parserOptions.plugins ?? []), ...parserPlugins], }; - return babelParser.parse(source, mergedParserOptions); + return parser.parse(source, mergedParserOptions); } export const parserOptions: ParserOptions = { @@ -52,5 +50,5 @@ export const babelPrint = (ast: ASTNode): string => { }; export const babelParseExpression = (code: string) => { - return babelParser.parseExpression(code, parserOptions); + return parser.parseExpression(code, parserOptions); }; diff --git a/code/core/src/babel/index.ts b/code/core/src/babel/index.ts new file mode 100644 index 000000000000..8aee3d8f5391 --- /dev/null +++ b/code/core/src/babel/index.ts @@ -0,0 +1,41 @@ +/** + * This entry is to ensure we use a single version of Babel across the codebase. This is to prevent + * issues with multiple versions of Babel being used in the same project. It also prevents us from + * bundling babel multiple times in the final bundles. + */ +import { transformSync } from '@babel/core'; +import * as core from '@babel/core'; +// @ts-expect-error File is not yet exposed, see https://github.com/babel/babel/issues/11350#issuecomment-644118606 +import { File } from '@babel/core'; +import bg from '@babel/generator'; +import * as parser from '@babel/parser'; +import bt from '@babel/traverse'; +import * as types from '@babel/types'; +import * as recast from 'recast'; + +export * from './babelParse'; + +// @ts-expect-error (needed due to it's use of `exports.default`) +const traverse = (bt.default || bt) as typeof bt; +// @ts-expect-error (needed due to it's use of `exports.default`) +const generate = (bg.default || bg) as typeof bg; + +const BabelFileClass = File as any; + +export { + // main + core, + generate, + traverse, + types, + parser, + transformSync, + BabelFileClass, + + // other + recast, +}; + +export type { BabelFile, NodePath } from '@babel/core'; +export type { GeneratorOptions } from '@babel/generator'; +export type { Options as RecastOptions } from 'recast'; diff --git a/code/core/src/common/js-package-manager/NPMProxy.ts b/code/core/src/common/js-package-manager/NPMProxy.ts index 44bccfdb4cb9..2c534dfc0427 100644 --- a/code/core/src/common/js-package-manager/NPMProxy.ts +++ b/code/core/src/common/js-package-manager/NPMProxy.ts @@ -7,7 +7,7 @@ import { FindPackageVersionsError } from '@storybook/core/server-errors'; import { findUp } from 'find-up'; import sort from 'semver/functions/sort.js'; -import dedent from 'ts-dedent'; +import { dedent } from 'ts-dedent'; import { createLogStream } from '../utils/cli'; import { JsPackageManager } from './JsPackageManager'; diff --git a/code/core/src/common/js-package-manager/PNPMProxy.ts b/code/core/src/common/js-package-manager/PNPMProxy.ts index 8256926e35b6..f8df230d0fe6 100644 --- a/code/core/src/common/js-package-manager/PNPMProxy.ts +++ b/code/core/src/common/js-package-manager/PNPMProxy.ts @@ -5,7 +5,7 @@ import { FindPackageVersionsError } from '@storybook/core/server-errors'; import { findUpSync } from 'find-up'; import { pathExistsSync } from 'fs-extra'; -import dedent from 'ts-dedent'; +import { dedent } from 'ts-dedent'; import { createLogStream } from '../utils/cli'; import { JsPackageManager } from './JsPackageManager'; diff --git a/code/core/src/common/js-package-manager/Yarn1Proxy.ts b/code/core/src/common/js-package-manager/Yarn1Proxy.ts index 8922a581ce55..3bbe338c0767 100644 --- a/code/core/src/common/js-package-manager/Yarn1Proxy.ts +++ b/code/core/src/common/js-package-manager/Yarn1Proxy.ts @@ -4,7 +4,7 @@ import { join } from 'node:path'; import { FindPackageVersionsError } from '@storybook/core/server-errors'; import { findUp } from 'find-up'; -import dedent from 'ts-dedent'; +import { dedent } from 'ts-dedent'; import { createLogStream } from '../utils/cli'; import { JsPackageManager } from './JsPackageManager'; diff --git a/code/core/src/common/utils/formatter.ts b/code/core/src/common/utils/formatter.ts index b3493fa719ea..83b0e6d72ba8 100644 --- a/code/core/src/common/utils/formatter.ts +++ b/code/core/src/common/utils/formatter.ts @@ -1,39 +1,9 @@ -import semver from 'semver'; -import { dedent } from 'ts-dedent'; - -type Prettier = typeof import('prettier'); -type PrettierVersion = 3; - -let prettierInstance: Prettier | undefined; -let prettierVersion: 3 | null = null; - -const getPrettier = async (): Promise< - { instance: undefined; version: null } | { instance: typeof import('prettier'); version: 3 } -> => { - if (!prettierInstance) { - try { - prettierInstance = (await import('prettier')) as unknown as Prettier | undefined; - prettierVersion = prettierInstance?.version - ? (semver.major(prettierInstance.version) as PrettierVersion) - : null; - - return { - version: prettierVersion, - instance: prettierInstance, - } as any; - } catch (err) { - return { - instance: undefined, - version: null, - }; - } - } - - return { - instance: prettierInstance, - version: prettierVersion, - } as any; -}; +async function getPrettier() { + return import('prettier').catch((e) => ({ + resolveConfig: async () => null, + format: (content: string) => content, + })); +} /** * Format the content of a file using prettier. If prettier is not available in the user's project, @@ -42,49 +12,34 @@ const getPrettier = async (): Promise< */ export async function formatFileContent(filePath: string, content: string): Promise { try { - const prettier = await getPrettier(); - - switch (prettier.version) { - case 3: - const config = await prettier.instance.resolveConfig(filePath); + const { resolveConfig, format } = await getPrettier(); + const config = await resolveConfig(filePath); - if (!config || Object.keys(config).length === 0) { - return await formatWithEditorConfig(filePath, content); - } + if (!config || Object.keys(config).length === 0) { + return await formatWithEditorConfig(filePath, content); + } - const result = await prettier.instance.format(content, { - ...(config as any), - filepath: filePath, - }); + const result = await format(content, { + ...(config as any), + filepath: filePath, + }); - return result; - case null: - case undefined: - return await formatWithEditorConfig(filePath, content); - default: - console.warn(dedent` - Your prettier version ${ - (prettier as any).version - } is not supported to format files which were edited by Storybook. - Please raise an issue on the Storybook GitHub repository. - Falling back to EditorConfig settings, if available. - `); - return await formatWithEditorConfig(filePath, content); - } + return result; } catch (error) { return content; } } async function formatWithEditorConfig(filePath: string, content: string) { - const prettier = await import('prettier'); - const config = await prettier.resolveConfig(filePath, { editorconfig: true }); + const { resolveConfig, format } = await getPrettier(); + + const config = await resolveConfig(filePath, { editorconfig: true }); if (!config || Object.keys(config).length === 0) { return content; } - return prettier.format(content, { + return format(content, { ...(config as any), filepath: filePath, }); diff --git a/code/core/src/common/versions.ts b/code/core/src/common/versions.ts index 46e8f0eecbf6..672aeb1089ae 100644 --- a/code/core/src/common/versions.ts +++ b/code/core/src/common/versions.ts @@ -1,87 +1,87 @@ // auto generated file, do not edit export default { - '@storybook/addon-a11y': '8.3.0-alpha.9', - '@storybook/addon-actions': '8.3.0-alpha.9', - '@storybook/addon-backgrounds': '8.3.0-alpha.9', - '@storybook/addon-controls': '8.3.0-alpha.9', - '@storybook/addon-docs': '8.3.0-alpha.9', - '@storybook/addon-essentials': '8.3.0-alpha.9', - '@storybook/addon-mdx-gfm': '8.3.0-alpha.9', - '@storybook/addon-highlight': '8.3.0-alpha.9', - '@storybook/addon-interactions': '8.3.0-alpha.9', - '@storybook/addon-jest': '8.3.0-alpha.9', - '@storybook/addon-links': '8.3.0-alpha.9', - '@storybook/addon-measure': '8.3.0-alpha.9', - '@storybook/addon-onboarding': '8.3.0-alpha.9', - '@storybook/addon-outline': '8.3.0-alpha.9', - '@storybook/addon-storysource': '8.3.0-alpha.9', - '@storybook/addon-themes': '8.3.0-alpha.9', - '@storybook/addon-toolbars': '8.3.0-alpha.9', - '@storybook/addon-viewport': '8.3.0-alpha.9', - '@storybook/experimental-addon-vitest': '8.3.0-alpha.9', - '@storybook/builder-vite': '8.3.0-alpha.9', - '@storybook/builder-webpack5': '8.3.0-alpha.9', - '@storybook/core': '8.3.0-alpha.9', - '@storybook/builder-manager': '8.3.0-alpha.9', - '@storybook/channels': '8.3.0-alpha.9', - '@storybook/client-logger': '8.3.0-alpha.9', - '@storybook/components': '8.3.0-alpha.9', - '@storybook/core-common': '8.3.0-alpha.9', - '@storybook/core-events': '8.3.0-alpha.9', - '@storybook/core-server': '8.3.0-alpha.9', - '@storybook/csf-tools': '8.3.0-alpha.9', - '@storybook/docs-tools': '8.3.0-alpha.9', - '@storybook/manager': '8.3.0-alpha.9', - '@storybook/manager-api': '8.3.0-alpha.9', - '@storybook/node-logger': '8.3.0-alpha.9', - '@storybook/preview': '8.3.0-alpha.9', - '@storybook/preview-api': '8.3.0-alpha.9', - '@storybook/router': '8.3.0-alpha.9', - '@storybook/telemetry': '8.3.0-alpha.9', - '@storybook/theming': '8.3.0-alpha.9', - '@storybook/types': '8.3.0-alpha.9', - '@storybook/angular': '8.3.0-alpha.9', - '@storybook/ember': '8.3.0-alpha.9', - '@storybook/experimental-nextjs-vite': '8.3.0-alpha.9', - '@storybook/html-vite': '8.3.0-alpha.9', - '@storybook/html-webpack5': '8.3.0-alpha.9', - '@storybook/nextjs': '8.3.0-alpha.9', - '@storybook/preact-vite': '8.3.0-alpha.9', - '@storybook/preact-webpack5': '8.3.0-alpha.9', - '@storybook/react-vite': '8.3.0-alpha.9', - '@storybook/react-webpack5': '8.3.0-alpha.9', - '@storybook/server-webpack5': '8.3.0-alpha.9', - '@storybook/svelte-vite': '8.3.0-alpha.9', - '@storybook/svelte-webpack5': '8.3.0-alpha.9', - '@storybook/sveltekit': '8.3.0-alpha.9', - '@storybook/vue3-vite': '8.3.0-alpha.9', - '@storybook/vue3-webpack5': '8.3.0-alpha.9', - '@storybook/web-components-vite': '8.3.0-alpha.9', - '@storybook/web-components-webpack5': '8.3.0-alpha.9', - '@storybook/blocks': '8.3.0-alpha.9', - storybook: '8.3.0-alpha.9', - sb: '8.3.0-alpha.9', - '@storybook/cli': '8.3.0-alpha.9', - '@storybook/codemod': '8.3.0-alpha.9', - '@storybook/core-webpack': '8.3.0-alpha.9', - 'create-storybook': '8.3.0-alpha.9', - '@storybook/csf-plugin': '8.3.0-alpha.9', - '@storybook/instrumenter': '8.3.0-alpha.9', - '@storybook/react-dom-shim': '8.3.0-alpha.9', - '@storybook/source-loader': '8.3.0-alpha.9', - '@storybook/test': '8.3.0-alpha.9', - '@storybook/preset-create-react-app': '8.3.0-alpha.9', - '@storybook/preset-html-webpack': '8.3.0-alpha.9', - '@storybook/preset-preact-webpack': '8.3.0-alpha.9', - '@storybook/preset-react-webpack': '8.3.0-alpha.9', - '@storybook/preset-server-webpack': '8.3.0-alpha.9', - '@storybook/preset-svelte-webpack': '8.3.0-alpha.9', - '@storybook/preset-vue3-webpack': '8.3.0-alpha.9', - '@storybook/html': '8.3.0-alpha.9', - '@storybook/preact': '8.3.0-alpha.9', - '@storybook/react': '8.3.0-alpha.9', - '@storybook/server': '8.3.0-alpha.9', - '@storybook/svelte': '8.3.0-alpha.9', - '@storybook/vue3': '8.3.0-alpha.9', - '@storybook/web-components': '8.3.0-alpha.9', + '@storybook/addon-a11y': '8.3.0-beta.1', + '@storybook/addon-actions': '8.3.0-beta.1', + '@storybook/addon-backgrounds': '8.3.0-beta.1', + '@storybook/addon-controls': '8.3.0-beta.1', + '@storybook/addon-docs': '8.3.0-beta.1', + '@storybook/addon-essentials': '8.3.0-beta.1', + '@storybook/addon-mdx-gfm': '8.3.0-beta.1', + '@storybook/addon-highlight': '8.3.0-beta.1', + '@storybook/addon-interactions': '8.3.0-beta.1', + '@storybook/addon-jest': '8.3.0-beta.1', + '@storybook/addon-links': '8.3.0-beta.1', + '@storybook/addon-measure': '8.3.0-beta.1', + '@storybook/addon-onboarding': '8.3.0-beta.1', + '@storybook/addon-outline': '8.3.0-beta.1', + '@storybook/addon-storysource': '8.3.0-beta.1', + '@storybook/addon-themes': '8.3.0-beta.1', + '@storybook/addon-toolbars': '8.3.0-beta.1', + '@storybook/addon-viewport': '8.3.0-beta.1', + '@storybook/experimental-addon-vitest': '8.3.0-beta.1', + '@storybook/builder-vite': '8.3.0-beta.1', + '@storybook/builder-webpack5': '8.3.0-beta.1', + '@storybook/core': '8.3.0-beta.1', + '@storybook/builder-manager': '8.3.0-beta.1', + '@storybook/channels': '8.3.0-beta.1', + '@storybook/client-logger': '8.3.0-beta.1', + '@storybook/components': '8.3.0-beta.1', + '@storybook/core-common': '8.3.0-beta.1', + '@storybook/core-events': '8.3.0-beta.1', + '@storybook/core-server': '8.3.0-beta.1', + '@storybook/csf-tools': '8.3.0-beta.1', + '@storybook/docs-tools': '8.3.0-beta.1', + '@storybook/manager': '8.3.0-beta.1', + '@storybook/manager-api': '8.3.0-beta.1', + '@storybook/node-logger': '8.3.0-beta.1', + '@storybook/preview': '8.3.0-beta.1', + '@storybook/preview-api': '8.3.0-beta.1', + '@storybook/router': '8.3.0-beta.1', + '@storybook/telemetry': '8.3.0-beta.1', + '@storybook/theming': '8.3.0-beta.1', + '@storybook/types': '8.3.0-beta.1', + '@storybook/angular': '8.3.0-beta.1', + '@storybook/ember': '8.3.0-beta.1', + '@storybook/experimental-nextjs-vite': '8.3.0-beta.1', + '@storybook/html-vite': '8.3.0-beta.1', + '@storybook/html-webpack5': '8.3.0-beta.1', + '@storybook/nextjs': '8.3.0-beta.1', + '@storybook/preact-vite': '8.3.0-beta.1', + '@storybook/preact-webpack5': '8.3.0-beta.1', + '@storybook/react-vite': '8.3.0-beta.1', + '@storybook/react-webpack5': '8.3.0-beta.1', + '@storybook/server-webpack5': '8.3.0-beta.1', + '@storybook/svelte-vite': '8.3.0-beta.1', + '@storybook/svelte-webpack5': '8.3.0-beta.1', + '@storybook/sveltekit': '8.3.0-beta.1', + '@storybook/vue3-vite': '8.3.0-beta.1', + '@storybook/vue3-webpack5': '8.3.0-beta.1', + '@storybook/web-components-vite': '8.3.0-beta.1', + '@storybook/web-components-webpack5': '8.3.0-beta.1', + '@storybook/blocks': '8.3.0-beta.1', + storybook: '8.3.0-beta.1', + sb: '8.3.0-beta.1', + '@storybook/cli': '8.3.0-beta.1', + '@storybook/codemod': '8.3.0-beta.1', + '@storybook/core-webpack': '8.3.0-beta.1', + 'create-storybook': '8.3.0-beta.1', + '@storybook/csf-plugin': '8.3.0-beta.1', + '@storybook/instrumenter': '8.3.0-beta.1', + '@storybook/react-dom-shim': '8.3.0-beta.1', + '@storybook/source-loader': '8.3.0-beta.1', + '@storybook/test': '8.3.0-beta.1', + '@storybook/preset-create-react-app': '8.3.0-beta.1', + '@storybook/preset-html-webpack': '8.3.0-beta.1', + '@storybook/preset-preact-webpack': '8.3.0-beta.1', + '@storybook/preset-react-webpack': '8.3.0-beta.1', + '@storybook/preset-server-webpack': '8.3.0-beta.1', + '@storybook/preset-svelte-webpack': '8.3.0-beta.1', + '@storybook/preset-vue3-webpack': '8.3.0-beta.1', + '@storybook/html': '8.3.0-beta.1', + '@storybook/preact': '8.3.0-beta.1', + '@storybook/react': '8.3.0-beta.1', + '@storybook/server': '8.3.0-beta.1', + '@storybook/svelte': '8.3.0-beta.1', + '@storybook/vue3': '8.3.0-beta.1', + '@storybook/web-components': '8.3.0-beta.1', }; diff --git a/code/core/src/core-server/utils/parser/generic-parser.ts b/code/core/src/core-server/utils/parser/generic-parser.ts index 72173375b1e3..b4229b726636 100644 --- a/code/core/src/core-server/utils/parser/generic-parser.ts +++ b/code/core/src/core-server/utils/parser/generic-parser.ts @@ -1,5 +1,4 @@ -import { types } from '@babel/core'; -import * as babelParser from '@babel/parser'; +import { parser, types as t } from '@storybook/core/babel'; import type { Parser, ParserResult } from './types'; @@ -12,7 +11,7 @@ export class GenericParser implements Parser { * @returns The exports of the file */ async parse(content: string): Promise { - const ast = babelParser.parse(content, { + const ast = parser.parse(content, { allowImportExportEverywhere: true, allowAwaitOutsideFunction: true, allowNewTargetOutsideFunction: true, @@ -66,19 +65,16 @@ export class GenericParser implements Parser { const exports: ParserResult['exports'] = []; ast.program.body.forEach(function traverse(node) { - if (types.isExportNamedDeclaration(node)) { + if (t.isExportNamedDeclaration(node)) { // Handles function declarations: `export function a() {}` - if ( - types.isFunctionDeclaration(node.declaration) && - types.isIdentifier(node.declaration.id) - ) { + if (t.isFunctionDeclaration(node.declaration) && t.isIdentifier(node.declaration.id)) { exports.push({ name: node.declaration.id.name, default: false, }); } // Handles class declarations: `export class A {}` - if (types.isClassDeclaration(node.declaration) && types.isIdentifier(node.declaration.id)) { + if (t.isClassDeclaration(node.declaration) && t.isIdentifier(node.declaration.id)) { exports.push({ name: node.declaration.id.name, default: false, @@ -87,7 +83,7 @@ export class GenericParser implements Parser { // Handles export specifiers: `export { a }` if (node.declaration === null && node.specifiers.length > 0) { node.specifiers.forEach((specifier) => { - if (types.isExportSpecifier(specifier) && types.isIdentifier(specifier.exported)) { + if (t.isExportSpecifier(specifier) && t.isIdentifier(specifier.exported)) { exports.push({ name: specifier.exported.name, default: false, @@ -95,10 +91,10 @@ export class GenericParser implements Parser { } }); } - if (types.isVariableDeclaration(node.declaration)) { + if (t.isVariableDeclaration(node.declaration)) { node.declaration.declarations.forEach((declaration) => { // Handle variable declarators: `export const a = 1;` - if (types.isVariableDeclarator(declaration) && types.isIdentifier(declaration.id)) { + if (t.isVariableDeclarator(declaration) && t.isIdentifier(declaration.id)) { exports.push({ name: declaration.id.name, default: false, @@ -106,7 +102,7 @@ export class GenericParser implements Parser { } }); } - } else if (types.isExportDefaultDeclaration(node)) { + } else if (t.isExportDefaultDeclaration(node)) { exports.push({ name: 'default', default: true, diff --git a/code/core/src/core-server/utils/save-story/duplicate-story-with-new-name.ts b/code/core/src/core-server/utils/save-story/duplicate-story-with-new-name.ts index 25e634a0faf4..fe85e2cb6aa0 100644 --- a/code/core/src/core-server/utils/save-story/duplicate-story-with-new-name.ts +++ b/code/core/src/core-server/utils/save-story/duplicate-story-with-new-name.ts @@ -1,14 +1,10 @@ /* eslint-disable no-underscore-dangle */ -import type { CsfFile } from '@storybook/core/csf-tools'; +import { types as t, traverse } from '@storybook/core/babel'; -import bt from '@babel/traverse'; -import * as t from '@babel/types'; +import type { CsfFile } from '@storybook/core/csf-tools'; import { SaveStoryError } from './utils'; -// @ts-expect-error (needed due to it's use of `exports.default`) -const traverse = (bt.default || bt) as typeof bt; - type In = ReturnType; export const duplicateStoryWithNewName = (csfFile: In, storyName: string, newStoryName: string) => { diff --git a/code/core/src/core-server/utils/save-story/update-args-in-csf-file.ts b/code/core/src/core-server/utils/save-story/update-args-in-csf-file.ts index 9f7466ccfc07..7e1f30e7e961 100644 --- a/code/core/src/core-server/utils/save-story/update-args-in-csf-file.ts +++ b/code/core/src/core-server/utils/save-story/update-args-in-csf-file.ts @@ -1,12 +1,8 @@ -import bt from '@babel/traverse'; -import * as t from '@babel/types'; +import { types as t, traverse } from '@storybook/core/babel'; import { SaveStoryError } from './utils'; import { valueToAST } from './valueToAST'; -// @ts-expect-error (needed due to it's use of `exports.default`) -const traverse = (bt.default || bt) as typeof bt; - export const updateArgsInCsfFile = async (node: t.Node, input: Record) => { let found = false; const args = Object.fromEntries( @@ -93,7 +89,6 @@ export const updateArgsInCsfFile = async (node: t.Node, input: Record(literal: T): any { if (literal === null) { @@ -7,7 +6,7 @@ export function valueToAST(literal: T): any { } switch (typeof literal) { case 'function': - const ast = babylon.parse(literal.toString(), { + const ast = parser.parse(literal.toString(), { allowReturnOutsideFunction: true, allowSuperOutsideMethod: true, }); diff --git a/code/core/src/core-server/utils/warnWhenUsingArgTypesRegex.ts b/code/core/src/core-server/utils/warnWhenUsingArgTypesRegex.ts index 207e762ede60..dd543bff54bc 100644 --- a/code/core/src/core-server/utils/warnWhenUsingArgTypesRegex.ts +++ b/code/core/src/core-server/utils/warnWhenUsingArgTypesRegex.ts @@ -1,9 +1,8 @@ +import { type BabelFile, core } from '@storybook/core/babel'; import type { StorybookConfig } from '@storybook/core/types'; import { babelParse } from '@storybook/core/csf-tools'; -import * as babel from '@babel/core'; -import type { BabelFile } from '@babel/core'; import chalk from 'chalk'; import { readFile } from 'fs-extra'; import { dedent } from 'ts-dedent'; @@ -23,7 +22,7 @@ export async function warnWhenUsingArgTypesRegex( if (hasVisualTestAddon && previewConfigPath && previewContent.includes('argTypesRegex')) { // @ts-expect-error File is not yet exposed, see https://github.com/babel/babel/issues/11350#issuecomment-644118606 - const file: BabelFile = new babel.File( + const file: BabelFile = new core.File( { filename: previewConfigPath }, { code: previewContent, ast: babelParse(previewContent) } ); diff --git a/code/core/src/csf-tools/ConfigFile.test.ts b/code/core/src/csf-tools/ConfigFile.test.ts index 9846837cac44..fe841c49f488 100644 --- a/code/core/src/csf-tools/ConfigFile.test.ts +++ b/code/core/src/csf-tools/ConfigFile.test.ts @@ -1,9 +1,10 @@ import { describe, expect, it } from 'vitest'; +import { babelPrint } from '@storybook/core/babel'; + import { dedent } from 'ts-dedent'; import { loadConfig, printConfig } from './ConfigFile'; -import { babelPrint } from './babelParse'; expect.addSnapshotSerializer({ serialize: (val: any) => (typeof val === 'string' ? val : val.toString()), @@ -794,6 +795,26 @@ describe('ConfigFile', () => { export default preview; `); }); + + it('root globals as const satisfies as variable', () => { + expect( + removeField( + ['globals'], + dedent` + const preview = { + globals: { a: 1 }, + bar: { a: 1 } + } as const satisfies Foo; + export default preview; + ` + ) + ).toMatchInlineSnapshot(` + const preview = { + bar: { a: 1 } + } as const satisfies Foo; + export default preview; + `); + }); }); describe('quotes', () => { diff --git a/code/core/src/csf-tools/ConfigFile.ts b/code/core/src/csf-tools/ConfigFile.ts index 6d09bf51a986..5cb0d28234eb 100644 --- a/code/core/src/csf-tools/ConfigFile.ts +++ b/code/core/src/csf-tools/ConfigFile.ts @@ -1,20 +1,18 @@ /* eslint-disable no-underscore-dangle */ import { readFile, writeFile } from 'node:fs/promises'; -import bg from '@babel/generator'; -import bt from '@babel/traverse'; -import * as t from '@babel/types'; -import type { Options } from 'recast'; -import * as recast from 'recast'; +import { + type RecastOptions, + babelParse, + generate, + recast, + types as t, + traverse, +} from '@storybook/core/babel'; + import { dedent } from 'ts-dedent'; import type { PrintResultType } from './PrintResultType'; -import { babelParse } from './babelParse'; - -// @ts-expect-error (needed due to it's use of `exports.default`) -const traverse = (bt.default || bt) as typeof bt; -// @ts-expect-error (needed due to it's use of `exports.default`) -const generate = (bg.default || bg) as typeof bg; const logger = console; @@ -53,6 +51,13 @@ const propKey = (p: t.ObjectProperty) => { return null; }; +const unwrap = (node: t.Node | undefined | null): any => { + if (t.isTSAsExpression(node) || t.isTSSatisfiesExpression(node)) { + return unwrap(node.expression); + } + return node; +}; + // eslint-disable-next-line @typescript-eslint/naming-convention const _getPath = (path: string[], node: t.Node): t.Node | undefined => { if (path.length === 0) { @@ -193,9 +198,7 @@ export class ConfigFile { ? _findVarInitialization(node.declaration.name, parent) : node.declaration; - if (t.isTSAsExpression(decl) || t.isTSSatisfiesExpression(decl)) { - decl = decl.expression; - } + decl = unwrap(decl); if (t.isObjectExpression(decl)) { self._exportsObject = decl; @@ -277,9 +280,7 @@ export class ConfigFile { exportObject = _findVarInitialization(right.name, parent as t.Program) as any; } - if (t.isTSAsExpression(exportObject) || t.isTSSatisfiesExpression(exportObject)) { - exportObject = exportObject.expression; - } + exportObject = unwrap(exportObject); if (t.isObjectExpression(exportObject)) { self._exportsObject = exportObject; @@ -323,7 +324,7 @@ export class ConfigFile { return _getPath(rest, exported); } - getFieldProperties(path: string[]) { + getFieldProperties(path: string[]): ReturnType { const [root, ...rest] = path; const exported = this._exports[root]; @@ -365,7 +366,7 @@ export class ConfigFile { const decl = this._exportDecls[path[0]]; decl.init = _makeObjectExpression([], expr); } else if (this.hasDefaultExport) { - // This means the main.js of the user has a default export that is not an object expression, therefore we can't change the AST. + // This means the main.js of the user has a default export that is not an object expression, therefore we can'types change the AST. throw new Error( `Could not set the "${path.join( '.' @@ -499,7 +500,7 @@ export class ConfigFile { properties.splice(index, 1); } }; - // the structure of this._exports doesn't work for this use case + // the structure of this._exports doesn'types work for this use case // so we have to manually bypass it here if (path.length === 1) { let removedRootProperty = false; @@ -519,9 +520,8 @@ export class ConfigFile { if (t.isIdentifier(decl)) { decl = _findVarInitialization(decl.name, this._ast.program); } - if (t.isTSAsExpression(decl) || t.isTSSatisfiesExpression(decl)) { - decl = decl.expression; - } + + decl = unwrap(decl); if (t.isObjectExpression(decl)) { const properties = decl.properties as t.ObjectProperty[]; removeProperty(properties, path[0]); @@ -624,10 +624,10 @@ export class ConfigFile { return this._quotes; } - valueToNode(value: any) { + valueToNode(value: any): t.Expression | undefined { const quotes = this._inferQuotes(); let valueNode; - // we do this rather than t.valueToNode because apparently + // we do this rather than types.valueToNode because apparently // babel only preserves quotes if they are parsed from the original code. if (quotes === 'single') { const { code } = generate(t.valueToNode(value), { jsescOption: { quotes } }); @@ -661,7 +661,7 @@ export class ConfigFile { this.setFieldNode(path, valueNode); } - getBodyDeclarations() { + getBodyDeclarations(): t.Statement[] { return this._ast.program.body; } @@ -750,10 +750,10 @@ export class ConfigFile { if (requireDeclaration) { if (!hasDefaultRequireSpecifier(requireDeclaration, importSpecifier)) { - // If the import declaration hasn't the specified default identifier, we add a new variable declaration + // If the import declaration hasn'types the specified default identifier, we add a new variable declaration addDefaultRequireSpecifier(); } - // If the import declaration with the given source doesn't exist + // If the import declaration with the given source doesn'types exist } else { // Add the import declaration to the top of the file addDefaultRequireSpecifier(); @@ -846,12 +846,12 @@ export class ConfigFile { // If the import declaration with the given source exists if (importDeclaration) { if (!hasDefaultImportSpecifier(importDeclaration, importSpecifier)) { - // If the import declaration hasn't a default specifier, we add it + // If the import declaration hasn'types a default specifier, we add it importDeclaration.specifiers.push( t.importDefaultSpecifier(t.identifier(importSpecifier)) ); } - // If the import declaration with the given source doesn't exist + // If the import declaration with the given source doesn'types exist } else { // Add the import declaration to the top of the file this._ast.program.body.unshift( @@ -890,7 +890,7 @@ export const formatConfig = (config: ConfigFile): string => { return printConfig(config).code; }; -export const printConfig = (config: ConfigFile, options: Options = {}): PrintResultType => { +export const printConfig = (config: ConfigFile, options: RecastOptions = {}): PrintResultType => { return recast.print(config._ast, options); }; diff --git a/code/core/src/csf-tools/CsfFile.ts b/code/core/src/csf-tools/CsfFile.ts index 6dd4bb93af2f..d9859da5cecb 100644 --- a/code/core/src/csf-tools/CsfFile.ts +++ b/code/core/src/csf-tools/CsfFile.ts @@ -1,6 +1,16 @@ /* eslint-disable no-underscore-dangle */ import { readFile, writeFile } from 'node:fs/promises'; +import { + BabelFileClass, + type GeneratorOptions, + type RecastOptions, + babelParse, + generate, + recast, + types as t, + traverse, +} from '@storybook/core/babel'; import type { ComponentAnnotations, IndexInput, @@ -11,24 +21,11 @@ import type { } from '@storybook/core/types'; import { isExportStory, storyNameFromExport, toId } from '@storybook/csf'; -// @ts-expect-error File is not yet exposed, see https://github.com/babel/babel/issues/11350#issuecomment-644118606 -import { File as BabelFileClass } from '@babel/core'; -import bg, { type GeneratorOptions } from '@babel/generator'; -import bt from '@babel/traverse'; -import * as t from '@babel/types'; -import * as recast from 'recast'; -import type { Options } from 'recast'; import { dedent } from 'ts-dedent'; import type { PrintResultType } from './PrintResultType'; -import { babelParse } from './babelParse'; import { findVarInitialization } from './findVarInitialization'; -// @ts-expect-error (needed due to it's use of `exports.default`) -const traverse = (bt.default || bt) as typeof bt; -// @ts-expect-error (needed due to it's use of `exports.default`) -const generate = (bg.default || bg) as typeof bg; - const logger = console; // We add this BabelFile as a temporary workaround to deal with a BabelFileClass "ImportEquals should have a literal source" issue in no link mode with tsup @@ -734,7 +731,7 @@ export const formatCsf = ( csf: CsfFile, options: GeneratorOptions & { inputSourceMap?: any } = { sourceMaps: false }, code?: string -) => { +): ReturnType | string => { const result = generate(csf._ast, options, code); if (options.sourceMaps) { return result; @@ -743,7 +740,7 @@ export const formatCsf = ( }; /** Use this function, if you want to preserve styles. Uses recast under the hood. */ -export const printCsf = (csf: CsfFile, options: Options = {}): PrintResultType => { +export const printCsf = (csf: CsfFile, options: RecastOptions = {}): PrintResultType => { return recast.print(csf._ast, options); }; diff --git a/code/core/src/csf-tools/enrichCsf.ts b/code/core/src/csf-tools/enrichCsf.ts index 107415f61929..aa4a205e6bf3 100644 --- a/code/core/src/csf-tools/enrichCsf.ts +++ b/code/core/src/csf-tools/enrichCsf.ts @@ -1,12 +1,8 @@ /* eslint-disable no-underscore-dangle */ -import bg from '@babel/generator'; -import * as t from '@babel/types'; +import { generate, types as t } from '@storybook/core/babel'; import type { CsfFile } from './CsfFile'; -// @ts-expect-error (needed due to it's use of `exports.default`) -const generate = (bg.default || bg) as typeof bg; - export interface EnrichCsfOptions { disableSource?: boolean; disableDescription?: boolean; diff --git a/code/core/src/csf-tools/findVarInitialization.ts b/code/core/src/csf-tools/findVarInitialization.ts index 843519369ea7..78a3cfe9a9f9 100644 --- a/code/core/src/csf-tools/findVarInitialization.ts +++ b/code/core/src/csf-tools/findVarInitialization.ts @@ -1,6 +1,6 @@ -import * as t from '@babel/types'; +import { types as t } from '@storybook/core/babel'; -export const findVarInitialization = (identifier: string, program: t.Program) => { +export const findVarInitialization = (identifier: string, program: t.Program): t.Expression => { let init: t.Expression = null as any; let declarations: t.VariableDeclarator[] = null as any; program.body.find((node: t.Node) => { diff --git a/code/core/src/csf-tools/getStorySortParameter.ts b/code/core/src/csf-tools/getStorySortParameter.ts index a5b577495555..4615ca64ce0e 100644 --- a/code/core/src/csf-tools/getStorySortParameter.ts +++ b/code/core/src/csf-tools/getStorySortParameter.ts @@ -1,16 +1,9 @@ -import bg from '@babel/generator'; -import bt from '@babel/traverse'; -import * as t from '@babel/types'; +import { babelParse, generate, types as t, traverse } from '@storybook/core/babel'; + import { dedent } from 'ts-dedent'; -import { babelParse } from './babelParse'; import { findVarInitialization } from './findVarInitialization'; -// @ts-expect-error (needed due to it's use of `exports.default`) -const traverse = (bt.default || bt) as typeof bt; -// @ts-expect-error (needed due to it's use of `exports.default`) -const generate = (bg.default || bg) as typeof bg; - const logger = console; const getValue = (obj: t.ObjectExpression, key: string) => { diff --git a/code/core/src/csf-tools/index.ts b/code/core/src/csf-tools/index.ts index 6cc00f61f7c3..57605310e9f1 100644 --- a/code/core/src/csf-tools/index.ts +++ b/code/core/src/csf-tools/index.ts @@ -2,5 +2,5 @@ export * from './CsfFile'; export * from './ConfigFile'; export * from './getStorySortParameter'; export * from './enrichCsf'; -export * from './babelParse'; +export { babelParse } from '@storybook/core/babel'; export { vitestTransform } from './vitest-plugin/transformer'; diff --git a/code/core/src/csf-tools/vitest-plugin/transformer.test.ts b/code/core/src/csf-tools/vitest-plugin/transformer.test.ts index a92af8c4cc2f..a96833accaf4 100644 --- a/code/core/src/csf-tools/vitest-plugin/transformer.test.ts +++ b/code/core/src/csf-tools/vitest-plugin/transformer.test.ts @@ -80,7 +80,7 @@ describe('transformer', () => { }; export default _meta; export const Story = {}; - const _isRunningFromThisFile = import.meta.url.includes(_expect.getState().testPath ?? globalThis.__vitest_worker__.filepath); + const _isRunningFromThisFile = import.meta.url.includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath); if (_isRunningFromThisFile) { _test("Story", _testStory("Story", Story, _meta, [])); } @@ -109,7 +109,7 @@ describe('transformer', () => { }; export default _meta; export const Story = {}; - const _isRunningFromThisFile = import.meta.url.includes(_expect.getState().testPath ?? globalThis.__vitest_worker__.filepath); + const _isRunningFromThisFile = import.meta.url.includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath); if (_isRunningFromThisFile) { _test("Story", _testStory("Story", Story, _meta, [])); } @@ -139,7 +139,7 @@ describe('transformer', () => { }; export default meta; export const Story = {}; - const _isRunningFromThisFile = import.meta.url.includes(_expect.getState().testPath ?? globalThis.__vitest_worker__.filepath); + const _isRunningFromThisFile = import.meta.url.includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath); if (_isRunningFromThisFile) { _test("Story", _testStory("Story", Story, meta, [])); } @@ -170,7 +170,7 @@ describe('transformer', () => { }; export default meta; export const Story = {}; - const _isRunningFromThisFile = import.meta.url.includes(_expect.getState().testPath ?? globalThis.__vitest_worker__.filepath); + const _isRunningFromThisFile = import.meta.url.includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath); if (_isRunningFromThisFile) { _test("Story", _testStory("Story", Story, meta, [])); } @@ -206,7 +206,7 @@ describe('transformer', () => { label: 'Primary Button' } }; - const _isRunningFromThisFile = import.meta.url.includes(_expect.getState().testPath ?? globalThis.__vitest_worker__.filepath); + const _isRunningFromThisFile = import.meta.url.includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath); if (_isRunningFromThisFile) { _test("Primary", _testStory("Primary", Primary, _meta, [])); } @@ -240,7 +240,7 @@ describe('transformer', () => { } }; export { Primary }; - const _isRunningFromThisFile = import.meta.url.includes(_expect.getState().testPath ?? globalThis.__vitest_worker__.filepath); + const _isRunningFromThisFile = import.meta.url.includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath); if (_isRunningFromThisFile) { _test("Primary", _testStory("Primary", Primary, _meta, [])); } @@ -276,7 +276,7 @@ describe('transformer', () => { }; export const Secondary = {}; export { Primary }; - const _isRunningFromThisFile = import.meta.url.includes(_expect.getState().testPath ?? globalThis.__vitest_worker__.filepath); + const _isRunningFromThisFile = import.meta.url.includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath); if (_isRunningFromThisFile) { _test("Secondary", _testStory("Secondary", Secondary, _meta, [])); _test("Primary", _testStory("Primary", Primary, _meta, [])); @@ -308,7 +308,7 @@ describe('transformer', () => { export default _meta; export const Story = {}; export const nonStory = 123; - const _isRunningFromThisFile = import.meta.url.includes(_expect.getState().testPath ?? globalThis.__vitest_worker__.filepath); + const _isRunningFromThisFile = import.meta.url.includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath); if (_isRunningFromThisFile) { _test("Story", _testStory("Story", Story, _meta, [])); } @@ -365,7 +365,7 @@ describe('transformer', () => { tags: ['include-me'] }; export const NotIncluded = {}; - const _isRunningFromThisFile = import.meta.url.includes(_expect.getState().testPath ?? globalThis.__vitest_worker__.filepath); + const _isRunningFromThisFile = import.meta.url.includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath); if (_isRunningFromThisFile) { _test("Included", _testStory("Included", Included, _meta, [])); } @@ -396,7 +396,7 @@ describe('transformer', () => { export const NotIncluded = { tags: ['exclude-me'] }; - const _isRunningFromThisFile = import.meta.url.includes(_expect.getState().testPath ?? globalThis.__vitest_worker__.filepath); + const _isRunningFromThisFile = import.meta.url.includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath); if (_isRunningFromThisFile) { _test("Included", _testStory("Included", Included, _meta, [])); } @@ -424,7 +424,7 @@ describe('transformer', () => { export const Skipped = { tags: ['skip-me'] }; - const _isRunningFromThisFile = import.meta.url.includes(_expect.getState().testPath ?? globalThis.__vitest_worker__.filepath); + const _isRunningFromThisFile = import.meta.url.includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath); if (_isRunningFromThisFile) { _test("Skipped", _testStory("Skipped", Skipped, _meta, ["skip-me"])); } @@ -456,7 +456,7 @@ describe('transformer', () => { }; export default meta; export const Primary = {}; - const _isRunningFromThisFile = import.meta.url.includes(_expect.getState().testPath ?? globalThis.__vitest_worker__.filepath); + const _isRunningFromThisFile = import.meta.url.includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath); if (_isRunningFromThisFile) { _test("Primary", _testStory("Primary", Primary, meta, [])); } diff --git a/code/core/src/csf-tools/vitest-plugin/transformer.ts b/code/core/src/csf-tools/vitest-plugin/transformer.ts index 98ce9635f4eb..b2c66693b228 100644 --- a/code/core/src/csf-tools/vitest-plugin/transformer.ts +++ b/code/core/src/csf-tools/vitest-plugin/transformer.ts @@ -1,11 +1,11 @@ /* eslint-disable local-rules/no-uncategorized-errors */ /* eslint-disable no-underscore-dangle */ +import { types as t } from '@storybook/core/babel'; import { getStoryTitle } from '@storybook/core/common'; import type { StoriesEntry, Tag } from '@storybook/core/types'; import { combineTags } from '@storybook/csf'; -import * as t from '@babel/types'; import { dedent } from 'ts-dedent'; import { formatCsf, loadCsf } from '../CsfFile'; @@ -25,6 +25,11 @@ const isValidTest = (storyTags: string[], tagsFilter: TagsFilter) => { return isIncluded && isNotExcluded; }; +/** + * TODO: the functionality in this file can be moved back to the vitest plugin itself It can use + * `storybook/internal/babel` for all it's babel needs, without duplicating babel embedding in our + * bundles. + */ export async function vitestTransform({ code, @@ -40,7 +45,7 @@ export async function vitestTransform({ tagsFilter: TagsFilter; stories: StoriesEntry[]; previewLevelTags: Tag[]; -}) { +}): Promise> { const isStoryFile = /\.stor(y|ies)\./.test(fileName); if (!isStoryFile) { return code; @@ -167,8 +172,10 @@ export async function vitestTransform({ // Combine testPath and filepath using the ?? operator const nullishCoalescingExpression = t.logicalExpression( '??', - testPathProperty, - filePathProperty + // TODO: switch order of testPathProperty and filePathProperty when the bug is fixed + // https://github.com/vitest-dev/vitest/issues/6367 (or probably just use testPathProperty) + filePathProperty, + testPathProperty ); // Create the final expression: import.meta.url.includes(...) @@ -199,7 +206,7 @@ export async function vitestTransform({ }: { exportName: string; node: t.Node; - }) => { + }): t.ExpressionStatement => { // Create the _test expression directly using the exportName identifier const testStoryCall = t.expressionStatement( t.callExpression(vitestTestId, [ diff --git a/code/core/src/docs-tools/argTypes/convert/convert.test.ts b/code/core/src/docs-tools/argTypes/convert/convert.test.ts index e88f8d00a226..25d1b04f01aa 100644 --- a/code/core/src/docs-tools/argTypes/convert/convert.test.ts +++ b/code/core/src/docs-tools/argTypes/convert/convert.test.ts @@ -2,7 +2,8 @@ import { readFileSync } from 'node:fs'; import { describe, expect, it } from 'vitest'; -import { transformSync } from '@babel/core'; +import { transformSync } from '@storybook/core/babel'; + import mapValues from 'lodash/mapValues.js'; import requireFromString from 'require-from-string'; diff --git a/code/core/src/manager-api/version.ts b/code/core/src/manager-api/version.ts index fcfb97d79bc9..1fc810bc4d82 100644 --- a/code/core/src/manager-api/version.ts +++ b/code/core/src/manager-api/version.ts @@ -1 +1 @@ -export const version = '8.3.0-alpha.9'; +export const version = '8.3.0-beta.1'; diff --git a/code/deprecated/builder-manager/package.json b/code/deprecated/builder-manager/package.json index 741de015ffc6..0f3dd9fffd4a 100644 --- a/code/deprecated/builder-manager/package.json +++ b/code/deprecated/builder-manager/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-manager", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Storybook manager builder", "keywords": [ "storybook" diff --git a/code/deprecated/channels/package.json b/code/deprecated/channels/package.json index 31b1c2ecc0e7..c2b0a686b718 100644 --- a/code/deprecated/channels/package.json +++ b/code/deprecated/channels/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channels", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/client-logger/package.json b/code/deprecated/client-logger/package.json index 8cdce6b2835e..331af9bb326a 100644 --- a/code/deprecated/client-logger/package.json +++ b/code/deprecated/client-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/client-logger", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/components/package.json b/code/deprecated/components/package.json index 53030804ea28..ebfebc6bb317 100644 --- a/code/deprecated/components/package.json +++ b/code/deprecated/components/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/components", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Core Storybook Components", "keywords": [ "storybook" diff --git a/code/deprecated/core-common/package.json b/code/deprecated/core-common/package.json index 8bd55dac1b0d..cb3de1bafca9 100644 --- a/code/deprecated/core-common/package.json +++ b/code/deprecated/core-common/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-common", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/deprecated/core-events/package.json b/code/deprecated/core-events/package.json index 4606ab7891c1..43865958f8bd 100644 --- a/code/deprecated/core-events/package.json +++ b/code/deprecated/core-events/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-events", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Event names used in storybook core", "keywords": [ "storybook" diff --git a/code/deprecated/core-server/package.json b/code/deprecated/core-server/package.json index 675f2f9bef16..9990b3b81027 100644 --- a/code/deprecated/core-server/package.json +++ b/code/deprecated/core-server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-server", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/deprecated/csf-tools/package.json b/code/deprecated/csf-tools/package.json index e1fff9e1ec56..ee91347bbbdf 100644 --- a/code/deprecated/csf-tools/package.json +++ b/code/deprecated/csf-tools/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/csf-tools", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Parse and manipulate CSF and Storybook config files", "keywords": [ "storybook" @@ -24,8 +24,7 @@ ".": { "types": "./shim.d.ts", "import": "./shim.mjs", - "require": "./shim.js", - "node": "./shim.js" + "require": "./shim.js" }, "./package.json": "./package.json" }, diff --git a/code/deprecated/docs-tools/package.json b/code/deprecated/docs-tools/package.json index 4057026a9b8a..5c169099592e 100644 --- a/code/deprecated/docs-tools/package.json +++ b/code/deprecated/docs-tools/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/docs-tools", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Shared utility functions for frameworks to implement docs", "keywords": [ "storybook" diff --git a/code/deprecated/manager-api/package.json b/code/deprecated/manager-api/package.json index eae2b11b9dd1..fea689b4d157 100644 --- a/code/deprecated/manager-api/package.json +++ b/code/deprecated/manager-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/manager-api", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Core Storybook Manager API & Context", "keywords": [ "storybook" diff --git a/code/deprecated/manager/package.json b/code/deprecated/manager/package.json index 8515a7e70ed7..98e983f3c053 100644 --- a/code/deprecated/manager/package.json +++ b/code/deprecated/manager/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/manager", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Core Storybook UI", "keywords": [ "storybook" diff --git a/code/deprecated/node-logger/package.json b/code/deprecated/node-logger/package.json index 849141c5a115..44f206bd250a 100644 --- a/code/deprecated/node-logger/package.json +++ b/code/deprecated/node-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/node-logger", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/preview-api/package.json b/code/deprecated/preview-api/package.json index fd6a3923f1a5..2ffb83dd9f25 100644 --- a/code/deprecated/preview-api/package.json +++ b/code/deprecated/preview-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preview-api", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/preview/package.json b/code/deprecated/preview/package.json index 11834442b277..1e0f1a5a759f 100644 --- a/code/deprecated/preview/package.json +++ b/code/deprecated/preview/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preview", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/router/package.json b/code/deprecated/router/package.json index 9476923475b5..1dfaf0a34a77 100644 --- a/code/deprecated/router/package.json +++ b/code/deprecated/router/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/router", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Core Storybook Router", "keywords": [ "storybook" @@ -24,8 +24,7 @@ ".": { "types": "./shim.d.ts", "import": "./shim.mjs", - "require": "./shim.js", - "node": "./shim.js" + "require": "./shim.js" }, "./utils": { "types": "./utils.d.ts", diff --git a/code/deprecated/telemetry/package.json b/code/deprecated/telemetry/package.json index 9ae7c8f46091..196c3e1eb769 100644 --- a/code/deprecated/telemetry/package.json +++ b/code/deprecated/telemetry/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/telemetry", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Telemetry logging for crash reports and usage statistics", "keywords": [ "storybook" diff --git a/code/deprecated/theming/package.json b/code/deprecated/theming/package.json index 67729f9a9cce..ad046f293f20 100644 --- a/code/deprecated/theming/package.json +++ b/code/deprecated/theming/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/theming", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Core Storybook Components", "keywords": [ "storybook" @@ -24,8 +24,7 @@ ".": { "types": "./shim.d.ts", "import": "./shim.mjs", - "require": "./shim.js", - "node": "./shim.js" + "require": "./shim.js" }, "./create": { "types": "./create.d.ts", diff --git a/code/deprecated/types/package.json b/code/deprecated/types/package.json index 475ca5046827..9c4a6385adbc 100644 --- a/code/deprecated/types/package.json +++ b/code/deprecated/types/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/types", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Core Storybook TS Types", "keywords": [ "storybook" diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json index 84da83fbc535..c3f4476fd6e9 100644 --- a/code/frameworks/angular/package.json +++ b/code/frameworks/angular/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/angular", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.", "keywords": [ "storybook", diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json index 685a9a48b933..fcf70bad1ce0 100644 --- a/code/frameworks/ember/package.json +++ b/code/frameworks/ember/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/ember", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/ember", "bugs": { diff --git a/code/frameworks/experimental-nextjs-vite/package.json b/code/frameworks/experimental-nextjs-vite/package.json index 9055435fa679..e9580cdf4b84 100644 --- a/code/frameworks/experimental-nextjs-vite/package.json +++ b/code/frameworks/experimental-nextjs-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/experimental-nextjs-vite", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Storybook for Next.js and Vite", "keywords": [ "storybook", @@ -102,12 +102,12 @@ "vite-plugin-storybook-nextjs": "^1.0.0" }, "peerDependencies": { - "next": "^14.2.5", + "next": "^14.1.0", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", "storybook": "workspace:^", "vite": "^5.0.0", - "vite-plugin-storybook-nextjs": "^1.0.0" + "vite-plugin-storybook-nextjs": "^1.0.8" }, "peerDependenciesMeta": { "typescript": { diff --git a/code/frameworks/experimental-nextjs-vite/src/export-mocks/headers/cookies.ts b/code/frameworks/experimental-nextjs-vite/src/export-mocks/headers/cookies.ts index 02e335834b8a..b1eb6a692ef0 100644 --- a/code/frameworks/experimental-nextjs-vite/src/export-mocks/headers/cookies.ts +++ b/code/frameworks/experimental-nextjs-vite/src/export-mocks/headers/cookies.ts @@ -1,10 +1,11 @@ // We need this import to be a singleton, and because it's used in multiple entrypoints // both in ESM and CJS, importing it via the package name instead of having a local import // is the only way to achieve it actually being a singleton +import { fn } from '@storybook/test'; + // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore we must ignore types here as during compilation they are not generated yet -import { headers } from '@storybook/nextjs/headers.mock'; -import { fn } from '@storybook/test'; +import { headers } from '@storybook/experimental-nextjs-vite/headers.mock'; import { RequestCookies } from 'next/dist/compiled/@edge-runtime/cookies'; diff --git a/code/frameworks/experimental-nextjs-vite/src/preset.ts b/code/frameworks/experimental-nextjs-vite/src/preset.ts index af5deabf2b87..6af7f9a877f0 100644 --- a/code/frameworks/experimental-nextjs-vite/src/preset.ts +++ b/code/frameworks/experimental-nextjs-vite/src/preset.ts @@ -1,4 +1,6 @@ // https://storybook.js.org/docs/react/addons/writing-presets +import path from 'node:path'; + import type { PresetProperty } from 'storybook/internal/types'; import type { StorybookConfigVite } from '@storybook/builder-vite'; @@ -7,7 +9,7 @@ import { dirname, join } from 'path'; // @ts-expect-error - tsconfig settings have to be moduleResolution=Bundler and module=Preserve import vitePluginStorybookNextjs from 'vite-plugin-storybook-nextjs'; -import type { StorybookConfig } from './types'; +import type { FrameworkOptions } from './types'; export const core: PresetProperty<'core'> = async (config, options) => { const framework = await options.presets.apply('framework'); @@ -34,14 +36,10 @@ export const previewAnnotations: PresetProperty<'previewAnnotations'> = (entry = export const viteFinal: StorybookConfigVite['viteFinal'] = async (config, options) => { config.plugins = config.plugins || []; - const framework = (await options.presets.apply( - 'framework', - {}, - options - )) as StorybookConfig['framework']; - - const nextAppDir = typeof framework !== 'string' ? framework.options.nextAppDir : undefined; - config.plugins.push(vitePluginStorybookNextjs({ dir: nextAppDir })); + const { nextConfigPath } = await options.presets.apply('frameworkOptions'); + + const nextDir = nextConfigPath ? path.dirname(nextConfigPath) : undefined; + config.plugins.push(vitePluginStorybookNextjs({ dir: nextDir })); return config; }; diff --git a/code/frameworks/experimental-nextjs-vite/src/types.ts b/code/frameworks/experimental-nextjs-vite/src/types.ts index cb8ebb737b02..8de91a4430d9 100644 --- a/code/frameworks/experimental-nextjs-vite/src/types.ts +++ b/code/frameworks/experimental-nextjs-vite/src/types.ts @@ -9,12 +9,8 @@ type FrameworkName = CompatibleString<'@storybook/experimental-nextjs-vite'>; type BuilderName = CompatibleString<'@storybook/builder-vite'>; export type FrameworkOptions = { - /** - * The directory where the Next.js app is located. - * - * @default process.cwd() - */ - nextAppDir?: string; + /** The path to the Next.js configuration file. */ + nextConfigPath?: string; builder?: BuilderOptions; }; diff --git a/code/frameworks/html-vite/package.json b/code/frameworks/html-vite/package.json index a375655767e3..9a31f4d47d6e 100644 --- a/code/frameworks/html-vite/package.json +++ b/code/frameworks/html-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html-vite", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Storybook for HTML and Vite: Develop HTML in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/html-webpack5/package.json b/code/frameworks/html-webpack5/package.json index e0ace579f3e8..200cc5860933 100644 --- a/code/frameworks/html-webpack5/package.json +++ b/code/frameworks/html-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html-webpack5", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 38d94fd6f8d3..94f05713c1e6 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/nextjs", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Storybook for Next.js", "keywords": [ "storybook", diff --git a/code/frameworks/nextjs/src/preview.tsx b/code/frameworks/nextjs/src/preview.tsx index a88ae1f705b7..9796a5dcddcd 100644 --- a/code/frameworks/nextjs/src/preview.tsx +++ b/code/frameworks/nextjs/src/preview.tsx @@ -5,7 +5,6 @@ import type { Addon_DecoratorFunction, Addon_LoaderFunction } from 'storybook/in // is the only way to achieve it actually being a singleton // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore we must ignore types here as during compilation they are not generated yet -import { cookies, headers } from '@storybook/nextjs/headers.mock'; // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore we must ignore types here as during compilation they are not generated yet import { createNavigation } from '@storybook/nextjs/navigation.mock'; diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json index 1696c25ea413..13a2de4ead95 100644 --- a/code/frameworks/preact-vite/package.json +++ b/code/frameworks/preact-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact-vite", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Storybook for Preact and Vite: Develop Preact components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/preact-webpack5/package.json b/code/frameworks/preact-webpack5/package.json index c5fde21aca41..8bb05a56b9bd 100644 --- a/code/frameworks/preact-webpack5/package.json +++ b/code/frameworks/preact-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact-webpack5", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json index 37aee2e2bb69..b136cf306d77 100644 --- a/code/frameworks/react-vite/package.json +++ b/code/frameworks/react-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-vite", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Storybook for React and Vite: Develop React components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/react-webpack5/package.json b/code/frameworks/react-webpack5/package.json index 5ceece70c284..e2b5e9cead81 100644 --- a/code/frameworks/react-webpack5/package.json +++ b/code/frameworks/react-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-webpack5", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/server-webpack5/package.json b/code/frameworks/server-webpack5/package.json index 872588c98882..5394ed2105e7 100644 --- a/code/frameworks/server-webpack5/package.json +++ b/code/frameworks/server-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server-webpack5", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json index db8d8a6da5a8..26cc93c8ffa4 100644 --- a/code/frameworks/svelte-vite/package.json +++ b/code/frameworks/svelte-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte-vite", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Storybook for Svelte and Vite: Develop Svelte components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/svelte-webpack5/package.json b/code/frameworks/svelte-webpack5/package.json index fe6edb61d145..fd0a7e937f97 100644 --- a/code/frameworks/svelte-webpack5/package.json +++ b/code/frameworks/svelte-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte-webpack5", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json index 69d34b05bf5c..c1ee266605e7 100644 --- a/code/frameworks/sveltekit/package.json +++ b/code/frameworks/sveltekit/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/sveltekit", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Storybook for SvelteKit", "keywords": [ "storybook", diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json index b3db60cc8ed3..0c7260727a53 100644 --- a/code/frameworks/vue3-vite/package.json +++ b/code/frameworks/vue3-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3-vite", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Storybook for Vue3 and Vite: Develop Vue3 components in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -30,6 +30,11 @@ "types": "./dist/preset.d.ts", "require": "./dist/preset.js" }, + "./vite": { + "types": "./dist/vite.d.ts", + "require": "./dist/vite.js", + "import": "./dist/vite.mjs" + }, "./package.json": "./package.json" }, "main": "dist/index.js", @@ -74,7 +79,8 @@ "bundler": { "entries": [ "./src/index.ts", - "./src/preset.ts" + "./src/preset.ts", + "./src/vite.ts" ], "platform": "node" }, diff --git a/code/frameworks/vue3-vite/src/plugins/vue-template.ts b/code/frameworks/vue3-vite/src/plugins/vue-template.ts new file mode 100644 index 000000000000..325bc20341b4 --- /dev/null +++ b/code/frameworks/vue3-vite/src/plugins/vue-template.ts @@ -0,0 +1,14 @@ +import type { Plugin } from 'vite'; + +export async function templateCompilation() { + return { + name: 'storybook:vue-template-compilation', + config: () => ({ + resolve: { + alias: { + vue: 'vue/dist/vue.esm-bundler.js', + }, + }, + }), + } satisfies Plugin; +} diff --git a/code/frameworks/vue3-vite/src/preset.ts b/code/frameworks/vue3-vite/src/preset.ts index 057b9a3d92a1..574ab0a04ad3 100644 --- a/code/frameworks/vue3-vite/src/preset.ts +++ b/code/frameworks/vue3-vite/src/preset.ts @@ -6,6 +6,7 @@ import type { PluginOption } from 'vite'; import { vueComponentMeta } from './plugins/vue-component-meta'; import { vueDocgen } from './plugins/vue-docgen'; +import { templateCompilation } from './plugins/vue-template'; import type { FrameworkOptions, StorybookConfig, VueDocgenPlugin } from './types'; const getAbsolutePath = (input: I): I => @@ -17,7 +18,7 @@ export const core: PresetProperty<'core'> = { }; export const viteFinal: StorybookConfig['viteFinal'] = async (config, options) => { - const plugins: PluginOption[] = []; + const plugins: PluginOption[] = [templateCompilation()]; const framework = await options.presets.apply('framework'); const frameworkOptions: FrameworkOptions = @@ -35,11 +36,6 @@ export const viteFinal: StorybookConfig['viteFinal'] = async (config, options) = const { mergeConfig } = await import('vite'); return mergeConfig(config, { plugins, - resolve: { - alias: { - vue: 'vue/dist/vue.esm-bundler.js', - }, - }, }); }; diff --git a/code/frameworks/vue3-vite/src/vite.ts b/code/frameworks/vue3-vite/src/vite.ts new file mode 100644 index 000000000000..eb2a3345e937 --- /dev/null +++ b/code/frameworks/vue3-vite/src/vite.ts @@ -0,0 +1,5 @@ +import { templateCompilation } from './plugins/vue-template'; + +export const storybookVuePlugin = () => { + return [templateCompilation()]; +}; diff --git a/code/frameworks/vue3-webpack5/package.json b/code/frameworks/vue3-webpack5/package.json index f4d98fd007d4..d19ba842169e 100644 --- a/code/frameworks/vue3-webpack5/package.json +++ b/code/frameworks/vue3-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3-webpack5", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/web-components-vite/package.json b/code/frameworks/web-components-vite/package.json index f04a629d0b98..a579932345aa 100644 --- a/code/frameworks/web-components-vite/package.json +++ b/code/frameworks/web-components-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components-vite", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Storybook for web-components and Vite: Develop Web Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/web-components-webpack5/package.json b/code/frameworks/web-components-webpack5/package.json index a4349120c5eb..23b87f95fb89 100644 --- a/code/frameworks/web-components-webpack5/package.json +++ b/code/frameworks/web-components-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components-webpack5", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.", "keywords": [ "lit", diff --git a/code/lib/blocks/package.json b/code/lib/blocks/package.json index b25daeccad76..ca93d32dbf8b 100644 --- a/code/lib/blocks/package.json +++ b/code/lib/blocks/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/blocks", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Storybook Doc Blocks", "keywords": [ "storybook" @@ -24,8 +24,7 @@ ".": { "types": "./dist/index.d.ts", "import": "./dist/index.mjs", - "require": "./dist/index.js", - "node": "./dist/index.js" + "require": "./dist/index.js" }, "./package.json": "./package.json" }, diff --git a/code/lib/cli-sb/package.json b/code/lib/cli-sb/package.json index e3d7f4792719..6419e58b9e47 100644 --- a/code/lib/cli-sb/package.json +++ b/code/lib/cli-sb/package.json @@ -1,6 +1,6 @@ { "name": "sb", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Storybook CLI", "keywords": [ "storybook" diff --git a/code/lib/cli-storybook/package.json b/code/lib/cli-storybook/package.json index 7a310545aa47..cbb122294f78 100644 --- a/code/lib/cli-storybook/package.json +++ b/code/lib/cli-storybook/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/cli", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Storybook CLI", "keywords": [ "storybook" diff --git a/code/lib/cli-storybook/src/automigrate/fixes/wrap-require-utils.ts b/code/lib/cli-storybook/src/automigrate/fixes/wrap-require-utils.ts index 4fddbf0faac3..4b27b2bf98e5 100644 --- a/code/lib/cli-storybook/src/automigrate/fixes/wrap-require-utils.ts +++ b/code/lib/cli-storybook/src/automigrate/fixes/wrap-require-utils.ts @@ -1,7 +1,6 @@ +import { types as t } from 'storybook/internal/babel'; import type { ConfigFile } from 'storybook/internal/csf-tools'; -import * as t from '@babel/types'; - const defaultRequireWrapperName = 'getAbsolutePath'; /** diff --git a/code/lib/cli/core/babel/index.cjs b/code/lib/cli/core/babel/index.cjs new file mode 100644 index 000000000000..08406d9e434c --- /dev/null +++ b/code/lib/cli/core/babel/index.cjs @@ -0,0 +1 @@ +module.exports = require('@storybook/core/babel'); diff --git a/code/lib/cli/core/babel/index.d.ts b/code/lib/cli/core/babel/index.d.ts new file mode 100644 index 000000000000..83441bd766c9 --- /dev/null +++ b/code/lib/cli/core/babel/index.d.ts @@ -0,0 +1,2 @@ +export * from '@storybook/core/babel'; +export type * from '@storybook/core/babel'; diff --git a/code/lib/cli/core/babel/index.js b/code/lib/cli/core/babel/index.js new file mode 100644 index 000000000000..670e11702916 --- /dev/null +++ b/code/lib/cli/core/babel/index.js @@ -0,0 +1 @@ +export * from '@storybook/core/babel'; diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json index a4a7fee38213..1fa96eeee55d 100644 --- a/code/lib/cli/package.json +++ b/code/lib/cli/package.json @@ -1,6 +1,6 @@ { "name": "storybook", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Storybook's CLI - install, dev, build, upgrade, and more", "keywords": [ "cli", @@ -182,6 +182,11 @@ "types": "./core/manager/globals.d.ts", "import": "./core/manager/globals.js", "require": "./core/manager/globals.cjs" + }, + "./internal/babel": { + "types": "./core/babel/index.d.ts", + "import": "./core/babel/index.js", + "require": "./core/babel/index.cjs" } }, "main": "dist/index.cjs", @@ -192,6 +197,9 @@ "internal/*": [ "./core/index.d.ts" ], + "internal/babel": [ + "./core/babel/index.d.ts" + ], "internal/builder-manager": [ "./core/builder-manager/index.d.ts" ], diff --git a/code/lib/cli/src/proxy.ts b/code/lib/cli/src/proxy.ts index 33feae172bbe..12cac7558ae5 100644 --- a/code/lib/cli/src/proxy.ts +++ b/code/lib/cli/src/proxy.ts @@ -12,7 +12,7 @@ if (['dev', 'build'].includes(args[0])) { ? [`create-storybook@${versions.storybook}`, ...args.slice(1)] : [`@storybook/cli@${versions.storybook}`, ...args]; const command = ['npx', '--yes', ...proxiedArgs]; - const child = spawn(command[0], command.slice(1), { stdio: 'inherit' }); + const child = spawn(command[0], command.slice(1), { stdio: 'inherit', shell: true }); child.on('exit', (code) => { if (code != null) { process.exit(code); diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index 6dfc57fde0b0..39bb0f629a4c 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/codemod", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "A collection of codemod scripts written with JSCodeshift", "keywords": [ "storybook" diff --git a/code/lib/codemod/src/transforms/csf-2-to-3.ts b/code/lib/codemod/src/transforms/csf-2-to-3.ts index c435ae2c413c..5383188978b5 100644 --- a/code/lib/codemod/src/transforms/csf-2-to-3.ts +++ b/code/lib/codemod/src/transforms/csf-2-to-3.ts @@ -1,17 +1,18 @@ /* eslint-disable no-underscore-dangle */ +import type { BabelFile, NodePath } from '@storybook/core/babel'; +import { core as babel, types as t } from '@storybook/core/babel'; + import type { CsfFile } from '@storybook/core/csf-tools'; import { loadCsf, printCsf } from '@storybook/core/csf-tools'; -import type { BabelFile, NodePath } from '@babel/core'; -import * as babel from '@babel/core'; -import * as t from '@babel/types'; -import { isIdentifier, isTSTypeAnnotation, isTSTypeReference } from '@babel/types'; import type { API, FileInfo } from 'jscodeshift'; import prettier from 'prettier'; import invariant from 'tiny-invariant'; import { upgradeDeprecatedTypes } from './upgrade-deprecated-types'; +const { isIdentifier, isTSTypeAnnotation, isTSTypeReference } = t; + const logger = console; const renameAnnotation = (annotation: string) => { diff --git a/code/lib/codemod/src/transforms/mdx-to-csf.ts b/code/lib/codemod/src/transforms/mdx-to-csf.ts index 1416a018521c..15a6ae49e7b4 100644 --- a/code/lib/codemod/src/transforms/mdx-to-csf.ts +++ b/code/lib/codemod/src/transforms/mdx-to-csf.ts @@ -2,11 +2,15 @@ import { existsSync, renameSync, writeFileSync } from 'node:fs'; import { basename, join, parse } from 'node:path'; -import { babelParse, babelParseExpression } from '@storybook/core/csf-tools'; +import { + type BabelFile, + core as babel, + babelParse, + babelParseExpression, + recast, + types as t, +} from '@storybook/core/babel'; -import type { BabelFile } from '@babel/core'; -import * as babel from '@babel/core'; -import * as t from '@babel/types'; import type { FileInfo } from 'jscodeshift'; import camelCase from 'lodash/camelCase'; import type { MdxFlowExpression } from 'mdast-util-mdx-expression'; @@ -18,7 +22,6 @@ import type { } from 'mdast-util-mdx-jsx'; import type { MdxjsEsm } from 'mdast-util-mdxjs-esm'; import prettier from 'prettier'; -import * as recast from 'recast'; import { remark } from 'remark'; import remarkMdx from 'remark-mdx'; import { is } from 'unist-util-is'; diff --git a/code/lib/codemod/src/transforms/migrate-to-test-package.ts b/code/lib/codemod/src/transforms/migrate-to-test-package.ts index d6e457401acc..1128be36d5d0 100644 --- a/code/lib/codemod/src/transforms/migrate-to-test-package.ts +++ b/code/lib/codemod/src/transforms/migrate-to-test-package.ts @@ -1,9 +1,8 @@ /* eslint-disable no-underscore-dangle */ +import { type BabelFile, core as babel, types as t } from '@storybook/core/babel'; + import { loadCsf, printCsf } from '@storybook/core/csf-tools'; -import type { BabelFile } from '@babel/core'; -import * as babel from '@babel/core'; -import * as t from '@babel/types'; import type { FileInfo } from 'jscodeshift'; import prettier from 'prettier'; diff --git a/code/lib/codemod/src/transforms/upgrade-deprecated-types.ts b/code/lib/codemod/src/transforms/upgrade-deprecated-types.ts index 71f455eaa087..a8fe8f951718 100644 --- a/code/lib/codemod/src/transforms/upgrade-deprecated-types.ts +++ b/code/lib/codemod/src/transforms/upgrade-deprecated-types.ts @@ -1,9 +1,8 @@ /* eslint-disable no-underscore-dangle */ +import { type BabelFile, type NodePath, core as babel, types as t } from '@storybook/core/babel'; + import { loadCsf, printCsf } from '@storybook/core/csf-tools'; -import type { BabelFile, NodePath } from '@babel/core'; -import * as babel from '@babel/core'; -import * as t from '@babel/types'; import type { API, FileInfo } from 'jscodeshift'; import prettier from 'prettier'; diff --git a/code/lib/core-webpack/package.json b/code/lib/core-webpack/package.json index c6168f02a895..8b447255679e 100644 --- a/code/lib/core-webpack/package.json +++ b/code/lib/core-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-webpack", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/lib/create-storybook/package.json b/code/lib/create-storybook/package.json index ff5ced6f0b14..4728b045f45e 100644 --- a/code/lib/create-storybook/package.json +++ b/code/lib/create-storybook/package.json @@ -1,6 +1,6 @@ { "name": "create-storybook", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Initialize Storybook into your project", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/lib/create-storybook", "bugs": { diff --git a/code/lib/csf-plugin/package.json b/code/lib/csf-plugin/package.json index 261ab9b253ef..9ad3f0a5b4ca 100644 --- a/code/lib/csf-plugin/package.json +++ b/code/lib/csf-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/csf-plugin", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Enrich CSF files via static analysis", "keywords": [ "storybook" diff --git a/code/lib/instrumenter/package.json b/code/lib/instrumenter/package.json index 947eb7ec83ef..72facd06e467 100644 --- a/code/lib/instrumenter/package.json +++ b/code/lib/instrumenter/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/instrumenter", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "", "keywords": [ "storybook" @@ -24,8 +24,7 @@ ".": { "types": "./dist/index.d.ts", "import": "./dist/index.mjs", - "require": "./dist/index.js", - "node": "./dist/index.js" + "require": "./dist/index.js" }, "./package.json": "./package.json" }, diff --git a/code/lib/react-dom-shim/package.json b/code/lib/react-dom-shim/package.json index ac162d6e4787..114c00c77259 100644 --- a/code/lib/react-dom-shim/package.json +++ b/code/lib/react-dom-shim/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-dom-shim", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "", "keywords": [ "storybook" diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json index d6d4c41d140b..b0b41d4f5d34 100644 --- a/code/lib/source-loader/package.json +++ b/code/lib/source-loader/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/source-loader", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Source loader", "keywords": [ "lib", @@ -25,8 +25,7 @@ ".": { "types": "./dist/index.d.ts", "import": "./dist/index.mjs", - "require": "./dist/index.js", - "node": "./dist/index.js" + "require": "./dist/index.js" }, "./package.json": "./package.json" }, diff --git a/code/lib/test/package.json b/code/lib/test/package.json index b671628cebcd..c17193429ed0 100644 --- a/code/lib/test/package.json +++ b/code/lib/test/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/test", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "", "keywords": [ "storybook" @@ -48,7 +48,7 @@ "@storybook/global": "^5.0.0", "@storybook/instrumenter": "workspace:*", "@testing-library/dom": "10.4.0", - "@testing-library/jest-dom": "6.4.8", + "@testing-library/jest-dom": "6.5.0", "@testing-library/user-event": "14.5.2", "@vitest/expect": "2.0.5", "@vitest/spy": "2.0.5", diff --git a/code/package.json b/code/package.json index 8a8c3bc09300..426a5cb0850f 100644 --- a/code/package.json +++ b/code/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/root", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "private": true, "description": "Storybook root", "homepage": "https://storybook.js.org/", @@ -78,6 +78,8 @@ ], "resolutions": { "@playwright/test": "1.46.0", + "@types/babel__traverse@npm:*": "patch:@types/babel__traverse@npm%3A7.20.6#~/.yarn/patches/@types-babel__traverse-npm-7.20.6-fac4243243.patch", + "@types/babel__traverse@npm:^7.18.0": "patch:@types/babel__traverse@npm%3A7.20.6#~/.yarn/patches/@types-babel__traverse-npm-7.20.6-fac4243243.patch", "@types/node": "^22.0.0", "@vitest/expect@npm:2.0.5": "patch:@vitest/expect@npm%3A2.0.5#~/.yarn/patches/@vitest-expect-npm-2.0.5-8933466cce.patch", "esbuild": "^0.23.0", @@ -161,7 +163,7 @@ "@storybook/web-components-vite": "workspace:*", "@storybook/web-components-webpack5": "workspace:*", "@testing-library/dom": "^10.4.0", - "@testing-library/jest-dom": "^6.4.8", + "@testing-library/jest-dom": "^6.5.0", "@testing-library/react": "^16.0.0", "@testing-library/user-event": "^14.5.2", "@trivago/prettier-plugin-sort-imports": "^4.3.0", diff --git a/code/presets/create-react-app/package.json b/code/presets/create-react-app/package.json index 2b3e21bfab37..8742ed3fc60e 100644 --- a/code/presets/create-react-app/package.json +++ b/code/presets/create-react-app/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-create-react-app", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Storybook for Create React App preset", "keywords": [ "storybook" diff --git a/code/presets/html-webpack/package.json b/code/presets/html-webpack/package.json index ee625d26b5b7..f6c56280e550 100644 --- a/code/presets/html-webpack/package.json +++ b/code/presets/html-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-html-webpack", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/preact-webpack/package.json b/code/presets/preact-webpack/package.json index b1791283456e..3f7b9fe380a3 100644 --- a/code/presets/preact-webpack/package.json +++ b/code/presets/preact-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-preact-webpack", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" diff --git a/code/presets/react-webpack/package.json b/code/presets/react-webpack/package.json index a37637d8c26f..53ba0abec1d2 100644 --- a/code/presets/react-webpack/package.json +++ b/code/presets/react-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-react-webpack", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading", "keywords": [ "storybook" diff --git a/code/presets/server-webpack/package.json b/code/presets/server-webpack/package.json index 98a3bcc52e87..5ed9d86e5404 100644 --- a/code/presets/server-webpack/package.json +++ b/code/presets/server-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-server-webpack", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/svelte-webpack/package.json b/code/presets/svelte-webpack/package.json index f43c3b2e68c6..2201860d3dc7 100644 --- a/code/presets/svelte-webpack/package.json +++ b/code/presets/svelte-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-svelte-webpack", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/vue3-webpack/package.json b/code/presets/vue3-webpack/package.json index 717912268650..8c1e5e001b1a 100644 --- a/code/presets/vue3-webpack/package.json +++ b/code/presets/vue3-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-vue3-webpack", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/renderers/html/package.json b/code/renderers/html/package.json index 6ed98418062e..d2c564df5610 100644 --- a/code/renderers/html/package.json +++ b/code/renderers/html/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Storybook HTML renderer", "keywords": [ "storybook" @@ -23,8 +23,7 @@ ".": { "types": "./dist/index.d.ts", "import": "./dist/index.mjs", - "require": "./dist/index.js", - "node": "./dist/index.js" + "require": "./dist/index.js" }, "./preset": "./preset.js", "./dist/entry-preview.mjs": "./dist/entry-preview.mjs", diff --git a/code/renderers/preact/package.json b/code/renderers/preact/package.json index c16c248ec584..56c33a2df8c0 100644 --- a/code/renderers/preact/package.json +++ b/code/renderers/preact/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Storybook Preact renderer", "keywords": [ "storybook" @@ -23,8 +23,7 @@ ".": { "types": "./dist/index.d.ts", "import": "./dist/index.mjs", - "require": "./dist/index.js", - "node": "./dist/index.js" + "require": "./dist/index.js" }, "./preset": "./preset.js", "./dist/entry-preview.mjs": "./dist/entry-preview.mjs", diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json index e10377849d98..7cdac74908bb 100644 --- a/code/renderers/react/package.json +++ b/code/renderers/react/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Storybook React renderer", "keywords": [ "storybook" @@ -23,14 +23,12 @@ ".": { "types": "./dist/index.d.ts", "import": "./dist/index.mjs", - "require": "./dist/index.js", - "node": "./dist/index.js" + "require": "./dist/index.js" }, "./experimental-playwright": { "types": "./dist/playwright.d.ts", "import": "./dist/playwright.mjs", - "require": "./dist/playwright.js", - "node": "./dist/playwright.js" + "require": "./dist/playwright.js" }, "./preset": "./preset.js", "./dist/entry-preview.mjs": "./dist/entry-preview.mjs", diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json index 0bf575ea30fa..9bf8ee426c64 100644 --- a/code/renderers/server/package.json +++ b/code/renderers/server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Storybook Server renderer", "keywords": [ "storybook" @@ -23,8 +23,7 @@ ".": { "types": "./dist/index.d.ts", "import": "./dist/index.mjs", - "require": "./dist/index.js", - "node": "./dist/index.js" + "require": "./dist/index.js" }, "./preset": "./preset.js", "./dist/entry-preview.mjs": "./dist/entry-preview.mjs", diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json index a9138e9aac82..da248efd0e4b 100644 --- a/code/renderers/svelte/package.json +++ b/code/renderers/svelte/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Storybook Svelte renderer", "keywords": [ "storybook" @@ -23,14 +23,12 @@ ".": { "types": "./dist/index.d.ts", "import": "./dist/index.mjs", - "require": "./dist/index.js", - "node": "./dist/index.js" + "require": "./dist/index.js" }, "./experimental-playwright": { "types": "./dist/playwright.d.ts", "import": "./dist/playwright.mjs", - "require": "./dist/playwright.js", - "node": "./dist/playwright.js" + "require": "./dist/playwright.js" }, "./preset": "./preset.js", "./dist/entry-preview.mjs": "./dist/entry-preview.mjs", @@ -68,7 +66,6 @@ }, "devDependencies": { "@sveltejs/vite-plugin-svelte": "^3.0.2", - "@testing-library/jest-dom": "^6.4.1", "@testing-library/svelte": "patch:@testing-library/svelte@npm%3A4.1.0#~/.yarn/patches/@testing-library-svelte-npm-4.1.0-34b7037bc0.patch", "expect-type": "^0.15.0", "fs-extra": "^11.1.0", diff --git a/code/renderers/vue3/package.json b/code/renderers/vue3/package.json index 3e9522273cf9..07457a7e50b8 100644 --- a/code/renderers/vue3/package.json +++ b/code/renderers/vue3/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Storybook Vue 3 renderer", "keywords": [ "storybook" @@ -23,14 +23,12 @@ ".": { "types": "./dist/index.d.ts", "import": "./dist/index.mjs", - "require": "./dist/index.js", - "node": "./dist/index.js" + "require": "./dist/index.js" }, "./experimental-playwright": { "types": "./dist/playwright.d.ts", "import": "./dist/playwright.mjs", - "require": "./dist/playwright.js", - "node": "./dist/playwright.js" + "require": "./dist/playwright.js" }, "./preset": "./preset.js", "./dist/entry-preview.mjs": "./dist/entry-preview.mjs", diff --git a/code/renderers/web-components/package.json b/code/renderers/web-components/package.json index 17b987295abf..b886c2e10b50 100644 --- a/code/renderers/web-components/package.json +++ b/code/renderers/web-components/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components", - "version": "8.3.0-alpha.9", + "version": "8.3.0-beta.1", "description": "Storybook web-components renderer", "keywords": [ "lit", @@ -26,8 +26,7 @@ ".": { "types": "./dist/index.d.ts", "import": "./dist/index.mjs", - "require": "./dist/index.js", - "node": "./dist/index.js" + "require": "./dist/index.js" }, "./preset": "./preset.js", "./dist/entry-preview.mjs": "./dist/entry-preview.mjs", diff --git a/code/yarn.lock b/code/yarn.lock index 9a26af3780c1..e7023fe8c13f 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -2229,7 +2229,7 @@ __metadata: languageName: node linkType: hard -"@babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.22.15, @babel/runtime@npm:^7.22.6, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.24.4, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2": +"@babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.22.15, @babel/runtime@npm:^7.22.6, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.24.4, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7": version: 7.24.7 resolution: "@babel/runtime@npm:7.24.7" dependencies: @@ -6034,7 +6034,7 @@ __metadata: typescript: "npm:^5.3.2" unique-string: "npm:^3.0.0" use-resize-observer: "npm:^9.1.0" - util: "npm:^0.12.4" + util: "npm:^0.12.5" watchpack: "npm:^2.2.0" ws: "npm:^8.2.3" languageName: unknown @@ -6157,12 +6157,12 @@ __metadata: typescript: "npm:^5.3.2" vite-plugin-storybook-nextjs: "npm:^1.0.0" peerDependencies: - next: ^14.2.5 + next: ^14.1.0 react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta storybook: "workspace:^" vite: ^5.0.0 - vite-plugin-storybook-nextjs: ^1.0.0 + vite-plugin-storybook-nextjs: ^1.0.8 dependenciesMeta: sharp: optional: true @@ -6757,7 +6757,7 @@ __metadata: "@storybook/web-components-vite": "workspace:*" "@storybook/web-components-webpack5": "workspace:*" "@testing-library/dom": "npm:^10.4.0" - "@testing-library/jest-dom": "npm:^6.4.8" + "@testing-library/jest-dom": "npm:^6.5.0" "@testing-library/react": "npm:^16.0.0" "@testing-library/user-event": "npm:^14.5.2" "@trivago/prettier-plugin-sort-imports": "npm:^4.3.0" @@ -6943,7 +6943,6 @@ __metadata: "@storybook/preview-api": "workspace:^" "@storybook/theming": "workspace:^" "@sveltejs/vite-plugin-svelte": "npm:^3.0.2" - "@testing-library/jest-dom": "npm:^6.4.1" "@testing-library/svelte": "patch:@testing-library/svelte@npm%3A4.1.0#~/.yarn/patches/@testing-library-svelte-npm-4.1.0-34b7037bc0.patch" expect-type: "npm:^0.15.0" fs-extra: "npm:^11.1.0" @@ -6993,7 +6992,7 @@ __metadata: "@storybook/global": "npm:^5.0.0" "@storybook/instrumenter": "workspace:*" "@testing-library/dom": "npm:10.4.0" - "@testing-library/jest-dom": "npm:6.4.8" + "@testing-library/jest-dom": "npm:6.5.0" "@testing-library/user-event": "npm:14.5.2" "@vitest/expect": "npm:2.0.5" "@vitest/spy": "npm:2.0.5" @@ -7260,19 +7259,18 @@ __metadata: languageName: node linkType: hard -"@testing-library/jest-dom@npm:6.4.8, @testing-library/jest-dom@npm:^6.4.1, @testing-library/jest-dom@npm:^6.4.8": - version: 6.4.8 - resolution: "@testing-library/jest-dom@npm:6.4.8" +"@testing-library/jest-dom@npm:6.5.0, @testing-library/jest-dom@npm:^6.5.0": + version: 6.5.0 + resolution: "@testing-library/jest-dom@npm:6.5.0" dependencies: "@adobe/css-tools": "npm:^4.4.0" - "@babel/runtime": "npm:^7.9.2" aria-query: "npm:^5.0.0" chalk: "npm:^3.0.0" css.escape: "npm:^1.5.1" dom-accessibility-api: "npm:^0.6.3" lodash: "npm:^4.17.21" redent: "npm:^3.0.0" - checksum: 10c0/8eececcac1ec7728c038b9d9eabfc8b8dcf4dc1e997c959450bff16d946e3344275862b84bfe0e1d1beb3817368e782464816aca47ab5c94f0ebf66db71df55d + checksum: 10c0/fd5936a547f04608d8de15a7de3ae26516f21023f8f45169b10c8c8847015fd20ec259b7309f08aa1031bcbc37c6e5e6f532d1bb85ef8f91bad654193ec66a4c languageName: node linkType: hard @@ -7496,12 +7494,21 @@ __metadata: languageName: node linkType: hard -"@types/babel__traverse@npm:*, @types/babel__traverse@npm:^7.18.0": - version: 7.20.3 - resolution: "@types/babel__traverse@npm:7.20.3" +"@types/babel__traverse@npm:7.20.6": + version: 7.20.6 + resolution: "@types/babel__traverse@npm:7.20.6" + dependencies: + "@babel/types": "npm:^7.20.7" + checksum: 10c0/7ba7db61a53e28cac955aa99af280d2600f15a8c056619c05b6fc911cbe02c61aa4f2823299221b23ce0cce00b294c0e5f618ec772aa3f247523c2e48cf7b888 + languageName: node + linkType: hard + +"@types/babel__traverse@patch:@types/babel__traverse@npm%3A7.20.6#~/.yarn/patches/@types-babel__traverse-npm-7.20.6-fac4243243.patch": + version: 7.20.6 + resolution: "@types/babel__traverse@patch:@types/babel__traverse@npm%3A7.20.6#~/.yarn/patches/@types-babel__traverse-npm-7.20.6-fac4243243.patch::version=7.20.6&hash=1460c3" dependencies: "@babel/types": "npm:^7.20.7" - checksum: 10c0/295ed9b837e62e17ee43be0df45d90fff5208986bd43af593c9020d152d3b2c55328e038c2f8585926b63cc22f887f28bf3f4c805aa881e2dd0bdd5ead92ece0 + checksum: 10c0/0d350f7d22b422db04911a6844daeaad57279a0d1fe2c2b6b66ba3899c1390d66b728ca3a844a4f01da48f1541dcfdf4adc2d2d9f4ed32f4f7435f457da3240a languageName: node linkType: hard @@ -22996,7 +23003,7 @@ __metadata: languageName: node linkType: hard -"prettier@npm:*, prettier@npm:^3.1.1, prettier@npm:^3.2.5": +"prettier@npm:*, prettier@npm:^3.1.1": version: 3.2.5 resolution: "prettier@npm:3.2.5" bin: @@ -23005,6 +23012,15 @@ __metadata: languageName: node linkType: hard +"prettier@npm:^3.2.5": + version: 3.3.3 + resolution: "prettier@npm:3.3.3" + bin: + prettier: bin/prettier.cjs + checksum: 10c0/b85828b08e7505716324e4245549b9205c0cacb25342a030ba8885aba2039a115dbcf75a0b7ca3b37bc9d101ee61fab8113fc69ca3359f2a226f1ecc07ad2e26 + languageName: node + linkType: hard + "pretty-bytes@npm:^5.3.0": version: 5.6.0 resolution: "pretty-bytes@npm:5.6.0" diff --git a/docs/_snippets/storybook-addon-backgrounds-global-api.md b/docs/_snippets/addon-backgrounds-define-default.md similarity index 55% rename from docs/_snippets/storybook-addon-backgrounds-global-api.md rename to docs/_snippets/addon-backgrounds-define-default.md index bdf01ca550f5..b0b8205499f1 100644 --- a/docs/_snippets/storybook-addon-backgrounds-global-api.md +++ b/docs/_snippets/addon-backgrounds-define-default.md @@ -7,9 +7,8 @@ const meta: Meta