diff --git a/.circleci/config.yml b/.circleci/config.yml index 801c5a6a69a6..70b387f58cb5 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -6,6 +6,14 @@ parameters: type: enum enum: ["normal", "merged", "daily", "skipped", "docs"] default: "skipped" + ghPrNumber: + description: The PR number + type: string + default: "" + ghBaseBranch: + description: The name of the base branch (the target of the PR) + type: string + default: "next" executors: sb_node_18_classic: @@ -500,7 +508,7 @@ jobs: command: yarn task --task bench --template $(yarn get-template --cadence << pipeline.parameters.workflow >> --task bench) --no-link --start-from=never --junit - run: name: Uploading results - command: yarn upload-bench $(yarn get-template --cadence << pipeline.parameters.workflow >> --task bench) + command: yarn upload-bench $(yarn get-template --cadence << pipeline.parameters.workflow >> --task bench) << pipeline.parameters.ghPrNumber >> << pipeline.parameters.ghBaseBranch >> - report-workflow-on-failure: template: $(yarn get-template --cadence << pipeline.parameters.workflow >> --task bench) test-empty-init: @@ -833,6 +841,10 @@ workflows: # --smoke-test is not supported for the angular builder right now # - "angular-cli" - "lit-vite-ts" + - bench: + parallelism: 5 + requires: + - build-sandboxes # TODO: reenable once we find out the source of flakyness # - test-runner-dev: diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 954092e8d2e2..e56e437088eb 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -72,3 +72,6 @@ This PR does not have a canary release associated. You can request a canary rele _core team members can create a canary release [here](https://github.com/storybookjs/storybook/actions/workflows/canary-release-pr.yml) or locally with `gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=`_ + + + \ No newline at end of file diff --git a/.github/workflows/trigger-circle-ci-workflow.yml b/.github/workflows/trigger-circle-ci-workflow.yml index 66bcc0f1a7ce..c4c280dc8c40 100644 --- a/.github/workflows/trigger-circle-ci-workflow.yml +++ b/.github/workflows/trigger-circle-ci-workflow.yml @@ -36,79 +36,31 @@ jobs: outputs: branch: ${{ env.branch }} - trigger-normal-tests: + get-parameters: runs-on: ubuntu-latest - needs: get-branch - if: github.event_name == 'pull_request_target' && ((github.event.action == 'labeled' && github.event.label.name == 'ci:normal') || (github.event.action != 'labeled' && contains(github.event.pull_request.labels.*.name, 'ci:normal'))) steps: - - name: Trigger Normal tests - run: > - curl -X POST --location "https://circleci.com/api/v2/project/gh/storybookjs/storybook/pipeline" \ - -H "Content-Type: application/json" \ - -H "Circle-Token: $CIRCLE_CI_TOKEN" \ - -d '{ - "branch": "'"$BRANCH"'", - "parameters": { - "workflow": "normal" - } - }' - env: - CIRCLE_CI_TOKEN: ${{ secrets.CIRCLE_CI_TOKEN }} - BRANCH: ${{ needs.get-branch.outputs.branch }} - trigger-docs-tests: - runs-on: ubuntu-latest - needs: get-branch - if: github.event_name == 'pull_request_target' && ((github.event.action == 'labeled' && github.event.label.name == 'ci:docs') || (github.event.action != 'labeled' && contains(github.event.pull_request.labels.*.name, 'ci:docs'))) - steps: - - name: Trigger docs tests - run: > - curl -X POST --location "https://circleci.com/api/v2/project/gh/storybookjs/storybook/pipeline" \ - -H "Content-Type: application/json" \ - -H "Circle-Token: $CIRCLE_CI_TOKEN" \ - -d '{ - "branch": "'"$BRANCH"'", - "parameters": { - "workflow": "docs" - } - }' - env: - CIRCLE_CI_TOKEN: ${{ secrets.CIRCLE_CI_TOKEN }} - BRANCH: ${{ needs.get-branch.outputs.branch }} - trigger-merged-tests: - runs-on: ubuntu-latest - needs: get-branch - if: github.event_name == 'push' || (github.event.action == 'labeled' && github.event.label.name == 'ci:merged') || (github.event.action != 'labeled' && contains(github.event.pull_request.labels.*.name, 'ci:merged')) - steps: - - name: Trigger merged tests - run: > - curl -X POST --location "https://circleci.com/api/v2/project/gh/storybookjs/storybook/pipeline" \ - -H "Content-Type: application/json" \ - -H "Circle-Token: $CIRCLE_CI_TOKEN" \ - -d '{ - "branch": "'"$BRANCH"'", - "parameters": { - "workflow": "merged" - } - }' - env: - CIRCLE_CI_TOKEN: ${{ secrets.CIRCLE_CI_TOKEN }} - BRANCH: ${{ needs.get-branch.outputs.branch }} - trigger-daily-tests: + - if: github.event_name == 'pull_request_target' && ((github.event.action == 'labeled' && github.event.label.name == 'ci:normal') || (github.event.action != 'labeled' && contains(github.event.pull_request.labels.*.name, 'ci:normal'))) + run: echo "workflow=normal" >> $GITHUB_ENV + - if: github.event_name == 'pull_request_target' && ((github.event.action == 'labeled' && github.event.label.name == 'ci:docs') || (github.event.action != 'labeled' && contains(github.event.pull_request.labels.*.name, 'ci:docs'))) + run: echo "workflow=docs" >> $GITHUB_ENV + - if: github.event_name == 'push' || (github.event.action == 'labeled' && github.event.label.name == 'ci:merged') || (github.event.action != 'labeled' && contains(github.event.pull_request.labels.*.name, 'ci:merged')) + run: echo "workflow=merged" >> $GITHUB_ENV + - if: github.event_name == 'pull_request_target' && ((github.event.action == 'labeled' && github.event.label.name == 'ci:daily') || (github.event.action != 'labeled' && contains(github.event.pull_request.labels.*.name, 'ci:daily'))) + run: echo "workflow=daily" >> $GITHUB_ENV + outputs: + workflow: ${{ env.workflow }} + ghBaseBranch: ${{ github.event.pull_request.base.ref }} + ghPrNumber: ${{ github.event.pull_request.number }} + + trigger-circle-ci-workflow: runs-on: ubuntu-latest - needs: get-branch - if: github.event_name == 'pull_request_target' && ((github.event.action == 'labeled' && github.event.label.name == 'ci:daily') || (github.event.action != 'labeled' && contains(github.event.pull_request.labels.*.name, 'ci:daily'))) + needs: [get-branch, get-parameters] + if: needs.get-parameters.outputs.workflow != '' steps: - - name: Trigger the daily tests - run: > - curl -X POST --location "https://circleci.com/api/v2/project/gh/storybookjs/storybook/pipeline" \ - -H "Content-Type: application/json" \ - -H "Circle-Token: $CIRCLE_CI_TOKEN" \ - -d '{ - "branch": "'"$BRANCH"'", - "parameters": { - "workflow": "daily" - } - }' - env: - CIRCLE_CI_TOKEN: ${{ secrets.CIRCLE_CI_TOKEN }} - BRANCH: ${{ needs.get-branch.outputs.branch }} + - name: Trigger Normal tests + uses: fjogeleit/http-request-action@v1 + with: + url: 'https://circleci.com/api/v2/project/gh/storybookjs/storybook/pipeline' + method: 'POST' + customHeaders: '{"Content-Type": "application/json", "Circle-Token": "${{ secrets.CIRCLE_CI_TOKEN }}"}' + data: '{ "branch": "${{needs.get-branch.outputs.branch}}", "parameters": ${{toJson(needs.get-parameters.outputs)}} }' diff --git a/CHANGELOG.md b/CHANGELOG.md index f2a07504e271..7b3dd726dbd7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,26 @@ +## 8.2.4 + +- CLI: Add diagnostic when the `storybook` package is missing - [#28604](https://github.com/storybookjs/storybook/pull/28604), thanks @kasperpeulen! +- CLI: Make a few automigrations run on all version upgrades - [#28601](https://github.com/storybookjs/storybook/pull/28601), thanks @yannbf! +- CPC: Direct dependencies on shim packages in renderers - [#28599](https://github.com/storybookjs/storybook/pull/28599), thanks @ndelangen! + +## 8.2.3 + +- Bug: Fix invalid docs links in Configure.mdx template page - [#28560](https://github.com/storybookjs/storybook/pull/28560), thanks @kylegach! +- CLI: Add "missing-storybook-dependencies" automigration - [#28579](https://github.com/storybookjs/storybook/pull/28579), thanks @yannbf! +- CPC: Add `theming/create` aliases in docs preset - [#28570](https://github.com/storybookjs/storybook/pull/28570), thanks @ndelangen! +- CPC: Fix incorrect re-export in `core-events` - [#28573](https://github.com/storybookjs/storybook/pull/28573), thanks @ndelangen! +- CPC: Fix Vite builder had wrong conditions - [#28581](https://github.com/storybookjs/storybook/pull/28581), thanks @ndelangen! +- CSF: Fix small typing issue - [#28587](https://github.com/storybookjs/storybook/pull/28587), thanks @valentinpalkovic! +- Portable stories: Remove unused types - [#28548](https://github.com/storybookjs/storybook/pull/28548), thanks @kasperpeulen! +- Webpack: Fix sourceMap generation in csf-tools - [#28585](https://github.com/storybookjs/storybook/pull/28585), thanks @valentinpalkovic! + +## 8.2.2 + +- CPC: Add `ESM` export to `docs-tools` & `node-logger` packages - [#28539](https://github.com/storybookjs/storybook/pull/28539), thanks @ndelangen! +- CPC: Fix missing dependency in `@storybook/addon-interactions` - [#28518](https://github.com/storybookjs/storybook/pull/28518), thanks @ndelangen! +- CPC: Revert renames of panels, addon_ids - [#28524](https://github.com/storybookjs/storybook/pull/28524), thanks @ndelangen! + ## 8.2.1 - CPC: Fix type generation - [#28507](https://github.com/storybookjs/storybook/pull/28507), thanks @ndelangen! diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md index 1fa61452d5e9..452768602a10 100644 --- a/CHANGELOG.prerelease.md +++ b/CHANGELOG.prerelease.md @@ -1,3 +1,18 @@ +## 8.3.0-alpha.1 + +- Bug: Fix invalid docs links in Configure.mdx template page - [#28560](https://github.com/storybookjs/storybook/pull/28560), thanks @kylegach! +- CLI: Add "missing-storybook-dependencies" automigration - [#28579](https://github.com/storybookjs/storybook/pull/28579), thanks @yannbf! +- CLI: Add diagnostic when the `storybook` package is missing - [#28604](https://github.com/storybookjs/storybook/pull/28604), thanks @kasperpeulen! +- CLI: Make a few automigrations run on all version upgrades - [#28601](https://github.com/storybookjs/storybook/pull/28601), thanks @yannbf! +- CPC: Add `theming/create` aliases in docs preset - [#28570](https://github.com/storybookjs/storybook/pull/28570), thanks @ndelangen! +- CPC: Direct dependencies on shim packages in renderers - [#28599](https://github.com/storybookjs/storybook/pull/28599), thanks @ndelangen! +- CPC: Fix Vite builder had wrong conditions - [#28581](https://github.com/storybookjs/storybook/pull/28581), thanks @ndelangen! +- CPC: Fix incorrect re-export in `core-events` - [#28573](https://github.com/storybookjs/storybook/pull/28573), thanks @ndelangen! +- CSF: Fix small typing issue - [#28587](https://github.com/storybookjs/storybook/pull/28587), thanks @valentinpalkovic! +- Core: Upgrade docs-mdx for smaller install - [#28552](https://github.com/storybookjs/storybook/pull/28552), thanks @shilman! +- Portable stories: Remove unused types - [#28548](https://github.com/storybookjs/storybook/pull/28548), thanks @kasperpeulen! +- Webpack: Fix sourceMap generation in csf-tools - [#28585](https://github.com/storybookjs/storybook/pull/28585), thanks @valentinpalkovic! + ## 8.3.0-alpha.0 diff --git a/CODEOWNERS b/CODEOWNERS index 9d8ca4f6c5b9..7c7aee5e09ed 100644 --- a/CODEOWNERS +++ b/CODEOWNERS @@ -6,7 +6,7 @@ # .yarnrc.yml @ndelangen @JReinhold # Docs -# /docs/ @kylegach @jonniebigodes +/docs/ @kylegach @jonniebigodes # Scripts # /scripts/ @ndelangen @kasperpeulen diff --git a/MIGRATION.md b/MIGRATION.md index 33dfe17f0532..3dd1311dd620 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -1,6 +1,7 @@

Migration

- [From version 8.1.x to 8.2.x](#from-version-81x-to-82x) + - [Failed to resolve import "@storybook/X" error](#failed-to-resolve-import-storybookx-error) - [Preview.js globals renamed to initialGlobals](#previewjs-globals-renamed-to-initialglobals) - [From version 8.0.x to 8.1.x](#from-version-80x-to-81x) - [Portable stories](#portable-stories) @@ -415,6 +416,26 @@ ## From version 8.1.x to 8.2.x +### Failed to resolve import "@storybook/X" error + +Storybook's package structure changed in 8.2. It is a non-breaking change, but can expose missing project dependencies. + +This happens when `@storybook/X` is missing in your `package.json`, but your project references `@storybook/X` in your source code (typically in a story file or in a `.storybook` config file). This is a problem with your project, and if it worked in earlier versions of Storybook, it was purely accidental. + +Now in Storybook 8.2, that incorrect project configuration no longer works. The solution is to install `@storybook/X` as a dev dependency and re-run. + +Example errors: + +```sh +Cannot find module @storybook/preview-api or its corresponding type declarations +``` + +```sh +Internal server error: Failed to resolve import "@storybook/theming/create" from ".storybook/theme.ts". Does the file exist? +``` + +To protect your project from missing dependencies, try the `no-extraneous-dependencies` rule in [eslint-plugin-import](https://www.npmjs.com/package/eslint-plugin-import). + ### Preview.js globals renamed to initialGlobals Starting in 8.2 `preview.js` `globals` are deprecated and have been renamed to `initialGlobals`. We will remove `preview.js` `globals` in 9.0. diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index ebaea076514c..513c725828a3 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.0", + "version": "8.3.0-alpha.1", "description": "Test component compliance with web accessibility standards", "keywords": [ "a11y", diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json index dc1cc04c3558..f20ab02aaafc 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.0", + "version": "8.3.0-alpha.1", "description": "Get UI feedback when an action is performed on an interactive element", "keywords": [ "storybook", diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json index 7199d6d903cb..984c607d6bee 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.0", + "version": "8.3.0-alpha.1", "description": "Switch backgrounds to view components in different settings", "keywords": [ "addon", diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json index 8d2460f22c6b..bf4b6d98eab4 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.0", + "version": "8.3.0-alpha.1", "description": "Interact with component inputs dynamically in the Storybook UI", "keywords": [ "addon", diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json index 8edc0d1a8063..954078a0e8f7 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.0", + "version": "8.3.0-alpha.1", "description": "Document component usage and properties in Markdown", "keywords": [ "addon", diff --git a/code/addons/docs/src/preset.ts b/code/addons/docs/src/preset.ts index 9f50f7d9a254..0ad19b34bd58 100644 --- a/code/addons/docs/src/preset.ts +++ b/code/addons/docs/src/preset.ts @@ -70,6 +70,8 @@ async function webpack( */ const cliPath = require.resolve('storybook/package.json'); const themingPath = join(cliPath, '..', 'core', 'theming', 'index.js'); + const themingCreatePath = join(cliPath, 'core', 'theming', 'create.js'); + const componentsPath = join(cliPath, '..', 'core', 'components', 'index.js'); const blocksPath = dirname(require.resolve('@storybook/blocks/package.json')); if (Array.isArray(webpackConfig.resolve?.alias)) { @@ -87,6 +89,10 @@ async function webpack( name: '@mdx-js/react', alias: mdx, }, + { + name: '@storybook/theming/create', + alias: themingCreatePath, + }, { name: '@storybook/theming', alias: themingPath, @@ -104,6 +110,7 @@ async function webpack( alias = { ...webpackConfig.resolve?.alias, react, + '@storybook/theming/create': themingCreatePath, '@storybook/theming': themingPath, '@storybook/components': componentsPath, '@storybook/blocks': blocksPath, @@ -168,6 +175,7 @@ export const viteFinal = async (config: any, options: Options) => { const cliPath = dirname(require.resolve('storybook/package.json')); const themingPath = join(cliPath, 'core', 'theming', 'index.js'); + const themingCreatePath = join(cliPath, 'core', 'theming', 'create.js'); const componentsPath = join(cliPath, 'core', 'components', 'index.js'); const blocksPath = dirname(require.resolve('@storybook/blocks/package.json')); @@ -187,6 +195,7 @@ export const viteFinal = async (config: any, options: Options) => { * * In the future the `@storybook/theming` and `@storybook/components` can be removed, as they should be singletons in the future due to the peerDependency on `storybook` package. */ + '@storybook/theming/create': themingCreatePath, '@storybook/theming': themingPath, '@storybook/components': componentsPath, '@storybook/blocks': blocksPath, diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json index d4ddbcff684d..4c13e5ccfd38 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.0", + "version": "8.3.0-alpha.1", "description": "Curated addons to bring out the best of Storybook", "keywords": [ "addon", diff --git a/code/addons/gfm/package.json b/code/addons/gfm/package.json index dd4ff4c3d8ee..124357c1b712 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.0", + "version": "8.3.0-alpha.1", "description": "GitHub Flavored Markdown in Storybook", "keywords": [ "addon", diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json index 39c938c555c1..1a8971be5ae0 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.0", + "version": "8.3.0-alpha.1", "description": "Highlight DOM nodes within your stories", "keywords": [ "storybook-addons", diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json index 380f82dae2f8..8f600495e3fb 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.0", + "version": "8.3.0-alpha.1", "description": "Automate, test and debug user interactions", "keywords": [ "storybook-addons", diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json index ee2c153f25cc..4f64c432f345 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.0", + "version": "8.3.0-alpha.1", "description": "React storybook addon that show component jest report", "keywords": [ "addon", diff --git a/code/addons/links/package.json b/code/addons/links/package.json index ffdc2edc3b0b..6f93d4ee197c 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.0", + "version": "8.3.0-alpha.1", "description": "Link stories together to build demos and prototypes with your UI components", "keywords": [ "addon", diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json index b31b31e8b2ee..18ee6189da68 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.0", + "version": "8.3.0-alpha.1", "description": "Inspect layouts by visualizing the box model", "keywords": [ "storybook-addons", diff --git a/code/addons/onboarding/package.json b/code/addons/onboarding/package.json index bb22179dbc1a..e43b9b07e903 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.0", + "version": "8.3.0-alpha.1", "description": "Storybook Addon Onboarding - Introduces a new onboarding experience", "keywords": [ "storybook-addons", diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json index c5d87b4333c5..63baf2e64b62 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.0", + "version": "8.3.0-alpha.1", "description": "Outline all elements with CSS to help with layout placement and alignment", "keywords": [ "storybook-addons", diff --git a/code/addons/storysource/package.json b/code/addons/storysource/package.json index a5ad958fa003..91aaeceb7582 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.0", + "version": "8.3.0-alpha.1", "description": "View a storyโ€™s source code to see how it works and paste into your app", "keywords": [ "addon", diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json index 20776833b488..a0e05d999a1e 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.0", + "version": "8.3.0-alpha.1", "description": "Switch between multiple themes for you components in Storybook", "keywords": [ "css", diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json index 614745a5f46d..6f1da7c0666e 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.0", + "version": "8.3.0-alpha.1", "description": "Create your own toolbar items that control story rendering", "keywords": [ "addon", diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json index 32b29f79e6a1..13ab30a42045 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.0", + "version": "8.3.0-alpha.1", "description": "Build responsive components by adjusting Storybookโ€™s viewport size and orientation", "keywords": [ "addon", diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json index 9db90a1648ae..d1b6bfe7ecad 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.0", + "version": "8.3.0-alpha.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-vite/src/vite-config.ts b/code/builders/builder-vite/src/vite-config.ts index dd06ce60155a..2a965dbacffc 100644 --- a/code/builders/builder-vite/src/vite-config.ts +++ b/code/builders/builder-vite/src/vite-config.ts @@ -65,7 +65,7 @@ export async function commonConfig( base: './', plugins: await pluginConfig(options), resolve: { - conditions: ['storybook', 'stories', 'test', 'browser', 'import', 'module', 'default'], + conditions: ['storybook', 'stories', 'test'], preserveSymlinks: isPreservingSymlinks(), alias: { assert: require.resolve('browser-assert'), diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json index f6c854d55ed4..e640cb1ce9ea 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.0", + "version": "8.3.0-alpha.1", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/core/package.json b/code/core/package.json index 49a46f20a7d4..5fd58d2a95fc 100644 --- a/code/core/package.json +++ b/code/core/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core", - "version": "8.3.0-alpha.0", + "version": "8.3.0-alpha.1", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" @@ -277,7 +277,7 @@ "@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-scroll-area": "^1.0.5", "@radix-ui/react-slot": "^1.0.2", - "@storybook/docs-mdx": "3.1.0-next.0", + "@storybook/docs-mdx": "4.0.0-next.0", "@storybook/global": "^5.0.0", "@storybook/icons": "^1.2.5", "@tanstack/react-virtual": "^3.3.0", diff --git a/code/core/src/common/js-package-manager/JsPackageManager.ts b/code/core/src/common/js-package-manager/JsPackageManager.ts index 66ac85860e72..1000cc7bf174 100644 --- a/code/core/src/common/js-package-manager/JsPackageManager.ts +++ b/code/core/src/common/js-package-manager/JsPackageManager.ts @@ -500,6 +500,10 @@ export abstract class JsPackageManager { stdio?: 'inherit' | 'pipe' ): string; public abstract findInstallations(pattern?: string[]): Promise; + public abstract findInstallations( + pattern?: string[], + options?: { depth: number } + ): Promise; public abstract parseErrorFromLogs(logs?: string): string; public executeCommandSync({ diff --git a/code/core/src/common/js-package-manager/NPMProxy.ts b/code/core/src/common/js-package-manager/NPMProxy.ts index 09379285d276..ff77aedfa95a 100644 --- a/code/core/src/common/js-package-manager/NPMProxy.ts +++ b/code/core/src/common/js-package-manager/NPMProxy.ts @@ -132,12 +132,12 @@ export class NPMProxy extends JsPackageManager { }); } - public async findInstallations(pattern: string[]) { - const exec = async ({ depth }: { depth: number }) => { + public async findInstallations(pattern: string[], { depth = 99 }: { depth?: number } = {}) { + const exec = async ({ packageDepth }: { packageDepth: number }) => { const pipeToNull = platform() === 'win32' ? '2>NUL' : '2>/dev/null'; return this.executeCommand({ command: 'npm', - args: ['ls', '--json', `--depth=${depth}`, pipeToNull], + args: ['ls', '--json', `--depth=${packageDepth}`, pipeToNull], env: { FORCE_COLOR: 'false', }, @@ -145,7 +145,7 @@ export class NPMProxy extends JsPackageManager { }; try { - const commandResult = await exec({ depth: 99 }); + const commandResult = await exec({ packageDepth: depth }); const parsedOutput = JSON.parse(commandResult); return this.mapDependencies(parsedOutput, pattern); @@ -153,7 +153,7 @@ export class NPMProxy extends JsPackageManager { // when --depth is higher than 0, npm can return a non-zero exit code // in case the user's project has peer dependency issues. So we try again with no depth try { - const commandResult = await exec({ depth: 0 }); + const commandResult = await exec({ packageDepth: 0 }); const parsedOutput = JSON.parse(commandResult); return this.mapDependencies(parsedOutput, pattern); diff --git a/code/core/src/common/js-package-manager/PNPMProxy.ts b/code/core/src/common/js-package-manager/PNPMProxy.ts index c44172aebb86..41c2858763c8 100644 --- a/code/core/src/common/js-package-manager/PNPMProxy.ts +++ b/code/core/src/common/js-package-manager/PNPMProxy.ts @@ -98,16 +98,16 @@ export class PNPMProxy extends JsPackageManager { }); } - public async findInstallations(pattern: string[]) { - const commandResult = await this.executeCommand({ - command: 'pnpm', - args: ['list', pattern.map((p) => `"${p}"`).join(' '), '--json', '--depth=99'], - env: { - FORCE_COLOR: 'false', - }, - }); - + public async findInstallations(pattern: string[], { depth = 99 }: { depth?: number } = {}) { try { + const commandResult = await this.executeCommand({ + command: 'pnpm', + args: ['list', pattern.map((p) => `"${p}"`).join(' '), '--json', `--depth=${depth}`], + env: { + FORCE_COLOR: 'false', + }, + }); + const parsedOutput = JSON.parse(commandResult); return this.mapDependencies(parsedOutput, pattern); } catch (e) { diff --git a/code/core/src/common/js-package-manager/Yarn1Proxy.ts b/code/core/src/common/js-package-manager/Yarn1Proxy.ts index 9924afd0fb91..b193d4db4f15 100644 --- a/code/core/src/common/js-package-manager/Yarn1Proxy.ts +++ b/code/core/src/common/js-package-manager/Yarn1Proxy.ts @@ -83,16 +83,22 @@ export class Yarn1Proxy extends JsPackageManager { return JSON.parse(readFileSync(packageJsonPath, 'utf-8')) as Record; } - public async findInstallations(pattern: string[]) { - const commandResult = await this.executeCommand({ - command: 'yarn', - args: ['list', '--pattern', pattern.map((p) => `"${p}"`).join(' '), '--recursive', '--json'], - env: { - FORCE_COLOR: 'false', - }, - }); + public async findInstallations(pattern: string[], { depth = 99 }: { depth?: number } = {}) { + const yarnArgs = ['list', '--pattern', pattern.map((p) => `"${p}"`).join(' '), '--json']; + + if (depth !== 0) { + yarnArgs.push('--recursive'); + } try { + const commandResult = await this.executeCommand({ + command: 'yarn', + args: yarnArgs.concat(pattern), + env: { + FORCE_COLOR: 'false', + }, + }); + const parsedOutput = JSON.parse(commandResult); return this.mapDependencies(parsedOutput, pattern); } catch (e) { diff --git a/code/core/src/common/js-package-manager/Yarn2Proxy.ts b/code/core/src/common/js-package-manager/Yarn2Proxy.ts index 0f824262df21..7917bc7e1ebd 100644 --- a/code/core/src/common/js-package-manager/Yarn2Proxy.ts +++ b/code/core/src/common/js-package-manager/Yarn2Proxy.ts @@ -120,16 +120,22 @@ export class Yarn2Proxy extends JsPackageManager { return this.executeCommand({ command: 'yarn', args: [command, ...args], cwd }); } - public async findInstallations(pattern: string[]) { - const commandResult = await this.executeCommand({ - command: 'yarn', - args: ['info', '--name-only', '--recursive', ...pattern], - env: { - FORCE_COLOR: 'false', - }, - }); + public async findInstallations(pattern: string[], { depth = 99 }: { depth?: number } = {}) { + const yarnArgs = ['info', '--name-only']; + + if (depth !== 0) { + yarnArgs.push('--recursive'); + } try { + const commandResult = await this.executeCommand({ + command: 'yarn', + args: yarnArgs.concat(pattern), + env: { + FORCE_COLOR: 'false', + }, + }); + return this.mapDependencies(commandResult, pattern); } catch (e) { return undefined; diff --git a/code/core/src/common/versions.ts b/code/core/src/common/versions.ts index 44bb49ad6e5c..4da42abaacc2 100644 --- a/code/core/src/common/versions.ts +++ b/code/core/src/common/versions.ts @@ -1,84 +1,84 @@ // auto generated file, do not edit export default { - '@storybook/addon-a11y': '8.3.0-alpha.0', - '@storybook/addon-actions': '8.3.0-alpha.0', - '@storybook/addon-backgrounds': '8.3.0-alpha.0', - '@storybook/addon-controls': '8.3.0-alpha.0', - '@storybook/addon-docs': '8.3.0-alpha.0', - '@storybook/addon-essentials': '8.3.0-alpha.0', - '@storybook/addon-mdx-gfm': '8.3.0-alpha.0', - '@storybook/addon-highlight': '8.3.0-alpha.0', - '@storybook/addon-interactions': '8.3.0-alpha.0', - '@storybook/addon-jest': '8.3.0-alpha.0', - '@storybook/addon-links': '8.3.0-alpha.0', - '@storybook/addon-measure': '8.3.0-alpha.0', - '@storybook/addon-onboarding': '8.3.0-alpha.0', - '@storybook/addon-outline': '8.3.0-alpha.0', - '@storybook/addon-storysource': '8.3.0-alpha.0', - '@storybook/addon-themes': '8.3.0-alpha.0', - '@storybook/addon-toolbars': '8.3.0-alpha.0', - '@storybook/addon-viewport': '8.3.0-alpha.0', - '@storybook/builder-vite': '8.3.0-alpha.0', - '@storybook/builder-webpack5': '8.3.0-alpha.0', - '@storybook/core': '8.3.0-alpha.0', - '@storybook/builder-manager': '8.3.0-alpha.0', - '@storybook/channels': '8.3.0-alpha.0', - '@storybook/client-logger': '8.3.0-alpha.0', - '@storybook/components': '8.3.0-alpha.0', - '@storybook/core-common': '8.3.0-alpha.0', - '@storybook/core-events': '8.3.0-alpha.0', - '@storybook/core-server': '8.3.0-alpha.0', - '@storybook/csf-tools': '8.3.0-alpha.0', - '@storybook/docs-tools': '8.3.0-alpha.0', - '@storybook/manager': '8.3.0-alpha.0', - '@storybook/manager-api': '8.3.0-alpha.0', - '@storybook/node-logger': '8.3.0-alpha.0', - '@storybook/preview': '8.3.0-alpha.0', - '@storybook/preview-api': '8.3.0-alpha.0', - '@storybook/router': '8.3.0-alpha.0', - '@storybook/telemetry': '8.3.0-alpha.0', - '@storybook/theming': '8.3.0-alpha.0', - '@storybook/types': '8.3.0-alpha.0', - '@storybook/angular': '8.3.0-alpha.0', - '@storybook/ember': '8.3.0-alpha.0', - '@storybook/html-vite': '8.3.0-alpha.0', - '@storybook/html-webpack5': '8.3.0-alpha.0', - '@storybook/nextjs': '8.3.0-alpha.0', - '@storybook/preact-vite': '8.3.0-alpha.0', - '@storybook/preact-webpack5': '8.3.0-alpha.0', - '@storybook/react-vite': '8.3.0-alpha.0', - '@storybook/react-webpack5': '8.3.0-alpha.0', - '@storybook/server-webpack5': '8.3.0-alpha.0', - '@storybook/svelte-vite': '8.3.0-alpha.0', - '@storybook/svelte-webpack5': '8.3.0-alpha.0', - '@storybook/sveltekit': '8.3.0-alpha.0', - '@storybook/vue3-vite': '8.3.0-alpha.0', - '@storybook/vue3-webpack5': '8.3.0-alpha.0', - '@storybook/web-components-vite': '8.3.0-alpha.0', - '@storybook/web-components-webpack5': '8.3.0-alpha.0', - '@storybook/blocks': '8.3.0-alpha.0', - storybook: '8.3.0-alpha.0', - sb: '8.3.0-alpha.0', - '@storybook/cli': '8.3.0-alpha.0', - '@storybook/codemod': '8.3.0-alpha.0', - '@storybook/core-webpack': '8.3.0-alpha.0', - '@storybook/csf-plugin': '8.3.0-alpha.0', - '@storybook/instrumenter': '8.3.0-alpha.0', - '@storybook/react-dom-shim': '8.3.0-alpha.0', - '@storybook/source-loader': '8.3.0-alpha.0', - '@storybook/test': '8.3.0-alpha.0', - '@storybook/preset-create-react-app': '8.3.0-alpha.0', - '@storybook/preset-html-webpack': '8.3.0-alpha.0', - '@storybook/preset-preact-webpack': '8.3.0-alpha.0', - '@storybook/preset-react-webpack': '8.3.0-alpha.0', - '@storybook/preset-server-webpack': '8.3.0-alpha.0', - '@storybook/preset-svelte-webpack': '8.3.0-alpha.0', - '@storybook/preset-vue3-webpack': '8.3.0-alpha.0', - '@storybook/html': '8.3.0-alpha.0', - '@storybook/preact': '8.3.0-alpha.0', - '@storybook/react': '8.3.0-alpha.0', - '@storybook/server': '8.3.0-alpha.0', - '@storybook/svelte': '8.3.0-alpha.0', - '@storybook/vue3': '8.3.0-alpha.0', - '@storybook/web-components': '8.3.0-alpha.0', + '@storybook/addon-a11y': '8.3.0-alpha.1', + '@storybook/addon-actions': '8.3.0-alpha.1', + '@storybook/addon-backgrounds': '8.3.0-alpha.1', + '@storybook/addon-controls': '8.3.0-alpha.1', + '@storybook/addon-docs': '8.3.0-alpha.1', + '@storybook/addon-essentials': '8.3.0-alpha.1', + '@storybook/addon-mdx-gfm': '8.3.0-alpha.1', + '@storybook/addon-highlight': '8.3.0-alpha.1', + '@storybook/addon-interactions': '8.3.0-alpha.1', + '@storybook/addon-jest': '8.3.0-alpha.1', + '@storybook/addon-links': '8.3.0-alpha.1', + '@storybook/addon-measure': '8.3.0-alpha.1', + '@storybook/addon-onboarding': '8.3.0-alpha.1', + '@storybook/addon-outline': '8.3.0-alpha.1', + '@storybook/addon-storysource': '8.3.0-alpha.1', + '@storybook/addon-themes': '8.3.0-alpha.1', + '@storybook/addon-toolbars': '8.3.0-alpha.1', + '@storybook/addon-viewport': '8.3.0-alpha.1', + '@storybook/builder-vite': '8.3.0-alpha.1', + '@storybook/builder-webpack5': '8.3.0-alpha.1', + '@storybook/core': '8.3.0-alpha.1', + '@storybook/builder-manager': '8.3.0-alpha.1', + '@storybook/channels': '8.3.0-alpha.1', + '@storybook/client-logger': '8.3.0-alpha.1', + '@storybook/components': '8.3.0-alpha.1', + '@storybook/core-common': '8.3.0-alpha.1', + '@storybook/core-events': '8.3.0-alpha.1', + '@storybook/core-server': '8.3.0-alpha.1', + '@storybook/csf-tools': '8.3.0-alpha.1', + '@storybook/docs-tools': '8.3.0-alpha.1', + '@storybook/manager': '8.3.0-alpha.1', + '@storybook/manager-api': '8.3.0-alpha.1', + '@storybook/node-logger': '8.3.0-alpha.1', + '@storybook/preview': '8.3.0-alpha.1', + '@storybook/preview-api': '8.3.0-alpha.1', + '@storybook/router': '8.3.0-alpha.1', + '@storybook/telemetry': '8.3.0-alpha.1', + '@storybook/theming': '8.3.0-alpha.1', + '@storybook/types': '8.3.0-alpha.1', + '@storybook/angular': '8.3.0-alpha.1', + '@storybook/ember': '8.3.0-alpha.1', + '@storybook/html-vite': '8.3.0-alpha.1', + '@storybook/html-webpack5': '8.3.0-alpha.1', + '@storybook/nextjs': '8.3.0-alpha.1', + '@storybook/preact-vite': '8.3.0-alpha.1', + '@storybook/preact-webpack5': '8.3.0-alpha.1', + '@storybook/react-vite': '8.3.0-alpha.1', + '@storybook/react-webpack5': '8.3.0-alpha.1', + '@storybook/server-webpack5': '8.3.0-alpha.1', + '@storybook/svelte-vite': '8.3.0-alpha.1', + '@storybook/svelte-webpack5': '8.3.0-alpha.1', + '@storybook/sveltekit': '8.3.0-alpha.1', + '@storybook/vue3-vite': '8.3.0-alpha.1', + '@storybook/vue3-webpack5': '8.3.0-alpha.1', + '@storybook/web-components-vite': '8.3.0-alpha.1', + '@storybook/web-components-webpack5': '8.3.0-alpha.1', + '@storybook/blocks': '8.3.0-alpha.1', + storybook: '8.3.0-alpha.1', + sb: '8.3.0-alpha.1', + '@storybook/cli': '8.3.0-alpha.1', + '@storybook/codemod': '8.3.0-alpha.1', + '@storybook/core-webpack': '8.3.0-alpha.1', + '@storybook/csf-plugin': '8.3.0-alpha.1', + '@storybook/instrumenter': '8.3.0-alpha.1', + '@storybook/react-dom-shim': '8.3.0-alpha.1', + '@storybook/source-loader': '8.3.0-alpha.1', + '@storybook/test': '8.3.0-alpha.1', + '@storybook/preset-create-react-app': '8.3.0-alpha.1', + '@storybook/preset-html-webpack': '8.3.0-alpha.1', + '@storybook/preset-preact-webpack': '8.3.0-alpha.1', + '@storybook/preset-react-webpack': '8.3.0-alpha.1', + '@storybook/preset-server-webpack': '8.3.0-alpha.1', + '@storybook/preset-svelte-webpack': '8.3.0-alpha.1', + '@storybook/preset-vue3-webpack': '8.3.0-alpha.1', + '@storybook/html': '8.3.0-alpha.1', + '@storybook/preact': '8.3.0-alpha.1', + '@storybook/react': '8.3.0-alpha.1', + '@storybook/server': '8.3.0-alpha.1', + '@storybook/svelte': '8.3.0-alpha.1', + '@storybook/vue3': '8.3.0-alpha.1', + '@storybook/web-components': '8.3.0-alpha.1', }; diff --git a/code/core/src/core-server/utils/StoryIndexGenerator.ts b/code/core/src/core-server/utils/StoryIndexGenerator.ts index 29f71429bf95..dfcf2d4a5f51 100644 --- a/code/core/src/core-server/utils/StoryIndexGenerator.ts +++ b/code/core/src/core-server/utils/StoryIndexGenerator.ts @@ -23,7 +23,6 @@ import { commonGlobOptions, normalizeStoryPath } from '@storybook/core/common'; import { logger, once } from '@storybook/core/node-logger'; import { getStorySortParameter, loadConfig } from '@storybook/core/csf-tools'; import { storyNameFromExport, toId, combineTags } from '@storybook/csf'; -import { analyze } from '@storybook/docs-mdx'; import { dedent } from 'ts-dedent'; import { autoName } from './autoName'; import { IndexingError, MultipleIndexingError } from './IndexingError'; @@ -408,7 +407,8 @@ export class StoryIndexGenerator { const content = await fs.readFile(absolutePath, 'utf8'); - const result = analyze(content); + const { analyze } = await import('@storybook/docs-mdx'); + const result = await analyze(content); // Templates are not indexed if (result.isTemplate) return false; diff --git a/code/core/src/csf-tools/CsfFile.ts b/code/core/src/csf-tools/CsfFile.ts index f748d1d2d4ba..2ab3bfa27408 100644 --- a/code/core/src/csf-tools/CsfFile.ts +++ b/code/core/src/csf-tools/CsfFile.ts @@ -3,7 +3,7 @@ import { readFile, writeFile } from 'node:fs/promises'; import { dedent } from 'ts-dedent'; import * as t from '@babel/types'; -import bg from '@babel/generator'; +import bg, { type GeneratorOptions } from '@babel/generator'; import bt from '@babel/traverse'; import * as recast from 'recast'; @@ -599,15 +599,9 @@ export const loadCsf = (code: string, options: CsfOptions) => { return new CsfFile(ast, options); }; -interface FormatOptions { - sourceMaps?: boolean; - preserveStyle?: boolean; - inputSourceMap?: any; -} - export const formatCsf = ( csf: CsfFile, - options: FormatOptions = { sourceMaps: false }, + options: GeneratorOptions & { inputSourceMap?: any } = { sourceMaps: false }, code?: string ) => { const result = generate(csf._ast, options, code); diff --git a/code/core/src/manager-api/version.ts b/code/core/src/manager-api/version.ts index 2010c80e09ee..192f4ad7ab11 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.0'; +export const version = '8.3.0-alpha.1'; diff --git a/code/core/src/preview-api/modules/store/csf/portable-stories.ts b/code/core/src/preview-api/modules/store/csf/portable-stories.ts index 647fa492a0e1..37893aa4c035 100644 --- a/code/core/src/preview-api/modules/store/csf/portable-stories.ts +++ b/code/core/src/preview-api/modules/store/csf/portable-stories.ts @@ -263,10 +263,7 @@ type UnwrappedJSXStoryRef = { __pw_type: 'jsx'; type: UnwrappedImportStoryRef; }; -type UnwrappedImportStoryRef = ComposedStoryFn & { - playPromise?: Promise; - renderingEnded?: PromiseWithResolvers; -}; +type UnwrappedImportStoryRef = ComposedStoryFn; declare global { function __pwUnwrapObject( diff --git a/code/deprecated/builder-manager/package.json b/code/deprecated/builder-manager/package.json index c23a94632c3d..ba50c441a605 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.0", + "version": "8.3.0-alpha.1", "description": "Storybook manager builder", "keywords": [ "storybook" diff --git a/code/deprecated/channels/package.json b/code/deprecated/channels/package.json index 5e355be150c0..fa2c478a58d3 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.0", + "version": "8.3.0-alpha.1", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/client-logger/package.json b/code/deprecated/client-logger/package.json index 3ee33658fc74..e294478cbf45 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.0", + "version": "8.3.0-alpha.1", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/components/package.json b/code/deprecated/components/package.json index b072d5bd9955..af7ff6ba77ee 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.0", + "version": "8.3.0-alpha.1", "description": "Core Storybook Components", "keywords": [ "storybook" diff --git a/code/deprecated/core-common/package.json b/code/deprecated/core-common/package.json index 5da58e0d0c0d..0b399bb74ae5 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.0", + "version": "8.3.0-alpha.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 b99a130b55d5..58c9499b84b2 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.0", + "version": "8.3.0-alpha.1", "description": "Event names used in storybook core", "keywords": [ "storybook" diff --git a/code/deprecated/core-events/shim.js b/code/deprecated/core-events/shim.js index 4c4b44a5716d..217389a630ed 100644 --- a/code/deprecated/core-events/shim.js +++ b/code/deprecated/core-events/shim.js @@ -1 +1 @@ -module.exports = require('storybook/internal/core-errors'); +module.exports = require('storybook/internal/core-events'); diff --git a/code/deprecated/core-server/package.json b/code/deprecated/core-server/package.json index 5837d5034869..ec8266f6ac4c 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.0", + "version": "8.3.0-alpha.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 29bfaee4b142..dd9af935811d 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.0", + "version": "8.3.0-alpha.1", "description": "Parse and manipulate CSF and Storybook config files", "keywords": [ "storybook" diff --git a/code/deprecated/docs-tools/package.json b/code/deprecated/docs-tools/package.json index ba08a4da8fae..efb88bdda298 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.0", + "version": "8.3.0-alpha.1", "description": "Shared utility functions for frameworks to implement docs", "keywords": [ "storybook" @@ -23,11 +23,13 @@ "exports": { ".": { "types": "./shim.d.ts", + "import": "./shim.mjs", "require": "./shim.js" }, "./package.json": "./package.json" }, "main": "./shim.js", + "module": "./shim.mjs", "types": "./shim.d.ts", "files": [ "README.md", diff --git a/code/deprecated/docs-tools/shim.mjs b/code/deprecated/docs-tools/shim.mjs new file mode 100644 index 000000000000..a6a642d3273f --- /dev/null +++ b/code/deprecated/docs-tools/shim.mjs @@ -0,0 +1 @@ +export * from 'storybook/internal/docs-tools'; diff --git a/code/deprecated/manager-api/package.json b/code/deprecated/manager-api/package.json index 028caf13d0b6..4f2b39cfd4a0 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.0", + "version": "8.3.0-alpha.1", "description": "Core Storybook Manager API & Context", "keywords": [ "storybook" diff --git a/code/deprecated/manager/package.json b/code/deprecated/manager/package.json index a52d06df9842..ffee99ef38f7 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.0", + "version": "8.3.0-alpha.1", "description": "Core Storybook UI", "keywords": [ "storybook" diff --git a/code/deprecated/node-logger/package.json b/code/deprecated/node-logger/package.json index 2258fe6b581b..042ca88507a9 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.0", + "version": "8.3.0-alpha.1", "description": "", "keywords": [ "storybook" @@ -23,11 +23,13 @@ "exports": { ".": { "types": "./shim.d.ts", + "module": "./shim.mjs", "require": "./shim.js" }, "./package.json": "./package.json" }, "main": "./shim.js", + "module": "./shim.mjs", "types": "./shim.d.ts", "files": [ "README.md", diff --git a/code/deprecated/node-logger/shim.mjs b/code/deprecated/node-logger/shim.mjs new file mode 100644 index 000000000000..1c35c8624ddf --- /dev/null +++ b/code/deprecated/node-logger/shim.mjs @@ -0,0 +1 @@ +export * from 'storybook/internal/node-logger'; diff --git a/code/deprecated/preview-api/package.json b/code/deprecated/preview-api/package.json index f2744ff9215d..d0230ee9421a 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.0", + "version": "8.3.0-alpha.1", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/preview/package.json b/code/deprecated/preview/package.json index b19e7fd1a362..f88764cf7f41 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.0", + "version": "8.3.0-alpha.1", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/router/package.json b/code/deprecated/router/package.json index c5569f52f46e..440d518d151b 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.0", + "version": "8.3.0-alpha.1", "description": "Core Storybook Router", "keywords": [ "storybook" diff --git a/code/deprecated/telemetry/package.json b/code/deprecated/telemetry/package.json index b8552ca62b66..ec0006e0b243 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.0", + "version": "8.3.0-alpha.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 3d79a749fb7e..f0a24385c90b 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.0", + "version": "8.3.0-alpha.1", "description": "Core Storybook Components", "keywords": [ "storybook" diff --git a/code/deprecated/types/package.json b/code/deprecated/types/package.json index 52b9096ee28b..5cd30acfcdf5 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.0", + "version": "8.3.0-alpha.1", "description": "Core Storybook TS Types", "keywords": [ "storybook" diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json index 120fa1d8bb20..0e3b36be1e81 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.0", + "version": "8.3.0-alpha.1", "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.", "keywords": [ "storybook", @@ -38,8 +38,12 @@ }, "dependencies": { "@storybook/builder-webpack5": "workspace:*", + "@storybook/components": "workspace:^", "@storybook/core-webpack": "workspace:*", "@storybook/global": "^5.0.0", + "@storybook/manager-api": "workspace:^", + "@storybook/preview-api": "workspace:^", + "@storybook/theming": "workspace:^", "@types/node": "^18.0.0", "@types/react": "^18.0.37", "@types/react-dom": "^18.0.11", diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json index dde834c496d5..60f7e7465772 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.0", + "version": "8.3.0-alpha.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/html-vite/package.json b/code/frameworks/html-vite/package.json index bbfe01fb992e..29838adda26e 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.0", + "version": "8.3.0-alpha.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 19433e8b8f07..ebd7aded72dd 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.0", + "version": "8.3.0-alpha.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 0818278761e1..21548ab9ebfd 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.0", + "version": "8.3.0-alpha.1", "description": "Storybook for Next.js", "keywords": [ "storybook", diff --git a/code/frameworks/nextjs/template/cli/js/Configure.mdx b/code/frameworks/nextjs/template/cli/js/Configure.mdx index 055a3c564efc..cc3292373f73 100644 --- a/code/frameworks/nextjs/template/cli/js/Configure.mdx +++ b/code/frameworks/nextjs/template/cli/js/Configure.mdx @@ -52,7 +52,7 @@ export const RightArrow = () => Add styling and CSS

Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.

Learn more @@ -67,7 +67,7 @@ export const RightArrow = () => Provide context and mocking

Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available.

Learn more @@ -85,7 +85,7 @@ export const RightArrow = () => Learn more @@ -113,7 +113,7 @@ export const RightArrow = () => Auto-generate living, interactive reference documentation from your components and stories.

Learn more @@ -128,7 +128,7 @@ export const RightArrow = () => Publish to Chromatic

Publish your Storybook to review and collaborate with your entire team.

Learn more @@ -144,7 +144,7 @@ export const RightArrow = () => Embed your stories into Figma to cross-reference the design and live implementation in one place.

Learn more @@ -160,7 +160,7 @@ export const RightArrow = () => Use stories to test a component in all its variations, no matter how complex.

Learn more @@ -175,7 +175,7 @@ export const RightArrow = () => Accessibility

Automatically test your components for a11y issues as you develop.

Learn more @@ -190,7 +190,7 @@ export const RightArrow = () => Theming

Theme Storybook's UI to personalize it to your project.

Learn more @@ -202,7 +202,7 @@ export const RightArrow = () => Addons

Integrate your tools with Storybook to connect workflows.

Discover all addons diff --git a/code/frameworks/nextjs/template/cli/ts-3-8/Configure.mdx b/code/frameworks/nextjs/template/cli/ts-3-8/Configure.mdx index 055a3c564efc..cc3292373f73 100644 --- a/code/frameworks/nextjs/template/cli/ts-3-8/Configure.mdx +++ b/code/frameworks/nextjs/template/cli/ts-3-8/Configure.mdx @@ -52,7 +52,7 @@ export const RightArrow = () => Add styling and CSS

Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.

Learn more @@ -67,7 +67,7 @@ export const RightArrow = () => Provide context and mocking

Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available.

Learn more @@ -85,7 +85,7 @@ export const RightArrow = () => Learn more @@ -113,7 +113,7 @@ export const RightArrow = () => Auto-generate living, interactive reference documentation from your components and stories.

Learn more @@ -128,7 +128,7 @@ export const RightArrow = () => Publish to Chromatic

Publish your Storybook to review and collaborate with your entire team.

Learn more @@ -144,7 +144,7 @@ export const RightArrow = () => Embed your stories into Figma to cross-reference the design and live implementation in one place.

Learn more @@ -160,7 +160,7 @@ export const RightArrow = () => Use stories to test a component in all its variations, no matter how complex.

Learn more @@ -175,7 +175,7 @@ export const RightArrow = () => Accessibility

Automatically test your components for a11y issues as you develop.

Learn more @@ -190,7 +190,7 @@ export const RightArrow = () => Theming

Theme Storybook's UI to personalize it to your project.

Learn more @@ -202,7 +202,7 @@ export const RightArrow = () => Addons

Integrate your tools with Storybook to connect workflows.

Discover all addons diff --git a/code/frameworks/nextjs/template/cli/ts-4-9/Configure.mdx b/code/frameworks/nextjs/template/cli/ts-4-9/Configure.mdx index 055a3c564efc..cc3292373f73 100644 --- a/code/frameworks/nextjs/template/cli/ts-4-9/Configure.mdx +++ b/code/frameworks/nextjs/template/cli/ts-4-9/Configure.mdx @@ -52,7 +52,7 @@ export const RightArrow = () => Add styling and CSS

Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.

Learn more @@ -67,7 +67,7 @@ export const RightArrow = () => Provide context and mocking

Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available.

Learn more @@ -85,7 +85,7 @@ export const RightArrow = () => Learn more @@ -113,7 +113,7 @@ export const RightArrow = () => Auto-generate living, interactive reference documentation from your components and stories.

Learn more @@ -128,7 +128,7 @@ export const RightArrow = () => Publish to Chromatic

Publish your Storybook to review and collaborate with your entire team.

Learn more @@ -144,7 +144,7 @@ export const RightArrow = () => Embed your stories into Figma to cross-reference the design and live implementation in one place.

Learn more @@ -160,7 +160,7 @@ export const RightArrow = () => Use stories to test a component in all its variations, no matter how complex.

Learn more @@ -175,7 +175,7 @@ export const RightArrow = () => Accessibility

Automatically test your components for a11y issues as you develop.

Learn more @@ -190,7 +190,7 @@ export const RightArrow = () => Theming

Theme Storybook's UI to personalize it to your project.

Learn more @@ -202,7 +202,7 @@ export const RightArrow = () => Addons

Integrate your tools with Storybook to connect workflows.

Discover all addons diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json index d7344558a421..605d751e3b7a 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.0", + "version": "8.3.0-alpha.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 413179dc6fd1..8ffe8ecad7b4 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.0", + "version": "8.3.0-alpha.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 320b99cb3005..746a310a7f42 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.0", + "version": "8.3.0-alpha.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 9be13bf40f80..bda584aa4ba3 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.0", + "version": "8.3.0-alpha.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 20c7176ad11c..29a98960cff6 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.0", + "version": "8.3.0-alpha.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 7382460efc65..d5872a468da5 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.0", + "version": "8.3.0-alpha.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 a26b09f0e119..3f58160bd940 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.0", + "version": "8.3.0-alpha.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 07428f493a0d..be4aed6684ce 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.0", + "version": "8.3.0-alpha.1", "description": "Storybook for SvelteKit", "keywords": [ "storybook", diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json index f9361e7b775b..bf70101f1701 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.0", + "version": "8.3.0-alpha.1", "description": "Storybook for Vue3 and Vite: Develop Vue3 components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/vue3-webpack5/package.json b/code/frameworks/vue3-webpack5/package.json index 41e17adba7a3..f8cc68b8cd74 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.0", + "version": "8.3.0-alpha.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 a18fc4d66d45..6dca8fe1e879 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.0", + "version": "8.3.0-alpha.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 7a3d01a09011..f210eaa12fad 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.0", + "version": "8.3.0-alpha.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 f6a998875bec..ebc7b9ca88aa 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.0", + "version": "8.3.0-alpha.1", "description": "Storybook Doc Blocks", "keywords": [ "storybook" diff --git a/code/lib/cli-sb/package.json b/code/lib/cli-sb/package.json index 1f8b0cda1a5f..973525ffe4e8 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.0", + "version": "8.3.0-alpha.1", "description": "Storybook CLI", "keywords": [ "storybook" diff --git a/code/lib/cli-storybook/package.json b/code/lib/cli-storybook/package.json index 4f28285772e4..2a1dbc51a0a1 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.0", + "version": "8.3.0-alpha.1", "description": "Storybook CLI", "keywords": [ "storybook" diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json index 3b7f10bf0838..7f78b60ee29b 100644 --- a/code/lib/cli/package.json +++ b/code/lib/cli/package.json @@ -1,6 +1,6 @@ { "name": "storybook", - "version": "8.3.0-alpha.0", + "version": "8.3.0-alpha.1", "description": "Storybook's CLI - install, dev, build, upgrade, and more", "keywords": [ "cli", diff --git a/code/lib/cli/rendererAssets/common/Configure.mdx b/code/lib/cli/rendererAssets/common/Configure.mdx index a3d3c80985fb..54813ea1f8c3 100644 --- a/code/lib/cli/rendererAssets/common/Configure.mdx +++ b/code/lib/cli/rendererAssets/common/Configure.mdx @@ -48,7 +48,7 @@ export const RightArrow = () => Add styling and CSS

Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.

Learn more @@ -60,7 +60,7 @@ export const RightArrow = () => Provide context and mocking

Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available.

Learn more @@ -72,7 +72,7 @@ export const RightArrow = () => Learn more @@ -94,7 +94,7 @@ export const RightArrow = () => Auto-generate living, interactive reference documentation from your components and stories.

Learn more @@ -103,7 +103,7 @@ export const RightArrow = () => Publish to Chromatic

Publish your Storybook to review and collaborate with your entire team.

Learn more @@ -113,7 +113,7 @@ export const RightArrow = () => Embed your stories into Figma to cross-reference the design and live implementation in one place.

Learn more @@ -123,7 +123,7 @@ export const RightArrow = () => Use stories to test a component in all its variations, no matter how complex.

Learn more @@ -132,7 +132,7 @@ export const RightArrow = () => Accessibility

Automatically test your components for a11y issues as you develop.

Learn more @@ -141,7 +141,7 @@ export const RightArrow = () => Theming

Theme Storybook's UI to personalize it to your project.

Learn more @@ -153,7 +153,7 @@ export const RightArrow = () => Addons

Integrate your tools with Storybook to connect workflows.

Discover all addons diff --git a/code/lib/cli/src/automigrate/fixes/addon-postcss.ts b/code/lib/cli/src/automigrate/fixes/addon-postcss.ts index f8d134183c0b..0b9e9095d336 100644 --- a/code/lib/cli/src/automigrate/fixes/addon-postcss.ts +++ b/code/lib/cli/src/automigrate/fixes/addon-postcss.ts @@ -10,7 +10,7 @@ interface AddonPostcssRunOptions { export const addonPostCSS: Fix = { id: 'addon-postcss', - versionRange: ['<7', '>=7'], + versionRange: ['*', '*'], promptType: 'notification', diff --git a/code/lib/cli/src/automigrate/fixes/addons-api.ts b/code/lib/cli/src/automigrate/fixes/addons-api.ts index f193898aa82f..69d0f3284b03 100644 --- a/code/lib/cli/src/automigrate/fixes/addons-api.ts +++ b/code/lib/cli/src/automigrate/fixes/addons-api.ts @@ -9,7 +9,7 @@ interface AddonsAPIRunOptions { export const addonsAPI: Fix = { id: 'addons-api', - versionRange: ['<8', '>=8'], + versionRange: ['*', '*'], promptType: 'notification', diff --git a/code/lib/cli/src/automigrate/fixes/index.ts b/code/lib/cli/src/automigrate/fixes/index.ts index 3d68c5eec7c7..531606a6d095 100644 --- a/code/lib/cli/src/automigrate/fixes/index.ts +++ b/code/lib/cli/src/automigrate/fixes/index.ts @@ -30,10 +30,12 @@ import { vta } from './vta'; import { upgradeStorybookRelatedDependencies } from './upgrade-storybook-related-dependencies'; import { autodocsTags } from './autodocs-tags'; import { initialGlobals } from './initial-globals'; +import { missingStorybookDependencies } from './missing-storybook-dependencies'; export * from '../types'; export const allFixes: Fix[] = [ + missingStorybookDependencies, addonsAPI, newFrameworks, cra5, diff --git a/code/lib/cli/src/automigrate/fixes/missing-storybook-dependencies.test.ts b/code/lib/cli/src/automigrate/fixes/missing-storybook-dependencies.test.ts new file mode 100644 index 000000000000..52f0e42d8ff0 --- /dev/null +++ b/code/lib/cli/src/automigrate/fixes/missing-storybook-dependencies.test.ts @@ -0,0 +1,123 @@ +import { describe, expect, vi, it, beforeEach } from 'vitest'; +import type { JsPackageManager } from '@storybook/core/common'; +import stripAnsi from 'strip-ansi'; + +import { missingStorybookDependencies } from './missing-storybook-dependencies'; + +vi.mock('globby', () => ({ + __esModule: true, + globby: vi.fn().mockResolvedValue(['.storybook/manager.ts', 'path/to/file.stories.tsx']), +})); + +vi.mock('node:fs/promises', () => ({ + __esModule: true, + readFile: vi.fn().mockResolvedValue(` + // these are NOT installed, will be reported + import { someFunction } from '@storybook/preview-api'; + import { anotherFunction } from '@storybook/manager-api'; + import { SomeError } from '@storybook/core-events/server-errors'; + // this IS installed, will not be reported + import { yetAnotherFunction } from '@storybook/theming'; + `), +})); + +vi.mock('../../helpers', () => ({ + getStorybookVersionSpecifier: vi.fn().mockReturnValue('^8.1.10'), +})); + +const check = async ({ + packageManager, + storybookVersion = '8.1.10', +}: { + packageManager: JsPackageManager; + storybookVersion?: string; +}) => { + return missingStorybookDependencies.check({ + packageManager, + mainConfig: {} as any, + storybookVersion, + }); +}; + +describe('missingStorybookDependencies', () => { + const mockPackageManager = { + findInstallations: vi.fn().mockResolvedValue({ + dependencies: { + '@storybook/react': '8.1.0', + '@storybook/theming': '8.1.0', + }, + }), + retrievePackageJson: vi.fn().mockResolvedValue({ + dependencies: { + '@storybook/core': '8.1.0', + }, + }), + addDependencies: vi.fn().mockResolvedValue(undefined), + } as Partial; + + describe('check function', () => { + it('should identify missing dependencies', async () => { + const result = await check({ + packageManager: mockPackageManager as JsPackageManager, + }); + + expect(Object.keys(result!.packageUsage)).not.includes('@storybook/theming'); + expect(result).toEqual({ + packageUsage: { + '@storybook/preview-api': ['.storybook/manager.ts', 'path/to/file.stories.tsx'], + '@storybook/manager-api': ['.storybook/manager.ts', 'path/to/file.stories.tsx'], + '@storybook/core-events': ['.storybook/manager.ts', 'path/to/file.stories.tsx'], + }, + }); + }); + }); + + describe('prompt function', () => { + it('should provide a proper message with the missing dependencies', () => { + const packageUsage = { + '@storybook/preview-api': ['.storybook/manager.ts'], + '@storybook/manager-api': ['path/to/file.stories.tsx'], + }; + + const message = missingStorybookDependencies.prompt({ packageUsage }); + + expect(stripAnsi(message)).toMatchInlineSnapshot(` + "Found the following Storybook packages used in your project, but they are missing from your project dependencies: + - @storybook/manager-api: (1 file) + - @storybook/preview-api: (1 file) + + Referencing missing packages can cause your project to crash. We can automatically add them to your dependencies. + + More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#failed-to-resolve-import-storybookx-error" + `); + }); + }); + + describe('run function', () => { + it('should add missing dependencies', async () => { + const dryRun = false; + const packageUsage = { + '@storybook/preview-api': ['.storybook/manager.ts'], + '@storybook/manager-api': ['path/to/file.stories.tsx'], + }; + + await missingStorybookDependencies.run!({ + result: { packageUsage }, + dryRun, + packageManager: mockPackageManager as JsPackageManager, + mainConfigPath: 'path/to/main-config.js', + }); + + expect(mockPackageManager.addDependencies).toHaveBeenNthCalledWith( + 1, + { installAsDevDependencies: true }, + ['@storybook/preview-api@8.1.10', '@storybook/manager-api@8.1.10'] + ); + expect(mockPackageManager.addDependencies).toHaveBeenNthCalledWith( + 2, + { installAsDevDependencies: true, skipInstall: true, packageJson: expect.anything() }, + ['@storybook/preview-api@^8.1.10', '@storybook/manager-api@^8.1.10'] + ); + }); + }); +}); diff --git a/code/lib/cli/src/automigrate/fixes/missing-storybook-dependencies.ts b/code/lib/cli/src/automigrate/fixes/missing-storybook-dependencies.ts new file mode 100644 index 000000000000..cdc9bf0fe505 --- /dev/null +++ b/code/lib/cli/src/automigrate/fixes/missing-storybook-dependencies.ts @@ -0,0 +1,157 @@ +import chalk from 'chalk'; +import { readFile } from 'node:fs/promises'; +import { dedent } from 'ts-dedent'; + +import type { Fix } from '../types'; +import { getStorybookVersionSpecifier } from '../../helpers'; +import type { InstallationMetadata, JsPackageManager } from '@storybook/core/common'; + +const logger = console; + +type PackageUsage = Record; + +interface MissingStorybookDependenciesOptions { + packageUsage: PackageUsage; +} + +const consolidatedPackages = [ + '@storybook/channels', + '@storybook/client-logger', + '@storybook/core-common', + '@storybook/core-events', + '@storybook/csf-tools', + '@storybook/docs-tools', + '@storybook/node-logger', + '@storybook/preview-api', + '@storybook/router', + '@storybook/telemetry', + '@storybook/theming', + '@storybook/types', + '@storybook/manager-api', + '@storybook/manager', + '@storybook/preview', + '@storybook/core-server', + '@storybook/builder-manager', + '@storybook/components', +]; + +async function checkInstallations( + packageManager: JsPackageManager, + packages: string[] +): Promise { + let result: Record = {}; + + // go through each package and get installation info at depth 0 to make sure + // the dependency is directly installed, else they could come from other dependencies + const promises = packages.map((pkg) => packageManager.findInstallations([pkg], { depth: 0 })); + + const analyses = await Promise.all(promises); + + analyses.forEach((analysis) => { + if (analysis?.dependencies) { + result = { + ...result, + ...analysis.dependencies, + }; + } + }); + + return result; +} + +/** + * Find usage of Storybook packages in the project files which are not present in the dependencies. + */ +export const missingStorybookDependencies: Fix = { + id: 'missingStorybookDependencies', + promptType: 'auto', + versionRange: ['<8.2', '>=8.2'], + + async check({ packageManager }) { + // Dynamically import globby because it is a pure ESM module + const { globby } = await import('globby'); + + const result = await checkInstallations(packageManager, consolidatedPackages); + if (!result) { + return null; + } + + const installedDependencies = Object.keys(result).sort(); + const dependenciesToCheck = consolidatedPackages.filter( + (pkg) => !installedDependencies.includes(pkg) + ); + + const patterns = ['**/.storybook/*', '**/*.stories.*', '**/*.story.*']; + + const files = await globby(patterns, { + ignore: ['**/node_modules/**'], + }); + const packageUsage: PackageUsage = {}; + + for (const file of files) { + const content = await readFile(file, 'utf-8'); + dependenciesToCheck.forEach((pkg) => { + // match imports like @storybook/theming or @storybook/theming/create + const regex = new RegExp(`['"]${pkg}(/[^'"]*)?['"]`); + if (regex.test(content)) { + if (!packageUsage[pkg]) { + packageUsage[pkg] = []; + } + packageUsage[pkg].push(file); + } + }); + } + + return Object.keys(packageUsage).length > 0 ? { packageUsage } : null; + }, + + prompt({ packageUsage }) { + return dedent` + Found the following Storybook packages used in your project, but they are missing from your project dependencies: + ${Object.entries(packageUsage) + .map( + ([pkg, files]) => + `- ${chalk.cyan(pkg)}: (${files.length} ${files.length === 1 ? 'file' : 'files'})` + ) + .sort() + .join('\n')} + + Referencing missing packages can cause your project to crash. We can automatically add them to your dependencies. + + More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#failed-to-resolve-import-storybookx-error + `; + }, + + async run({ result: { packageUsage }, dryRun, packageManager }) { + logger.info( + `โœ… Installing the following packages as devDependencies: ${Object.keys(packageUsage)}` + ); + if (!dryRun) { + const dependenciesToInstall = Object.keys(packageUsage); + const versionToInstall = getStorybookVersionSpecifier( + await packageManager.retrievePackageJson() + ); + + const versionToInstallWithoutModifiers = versionToInstall?.replace(/[\^~]/, ''); + + /** + * WORKAROUND: necessary for the following scenario: + * Storybook latest is currently at 8.2.2 + * User has all Storybook deps at ^8.2.1 + * We run e.g. npm install with the dependency@^8.2.1 + * The package.json will have ^8.2.1 but install 8.2.2 + * So we first install the exact version, then run code again + * to write to package.json to add the caret back, but without running install + */ + await packageManager.addDependencies( + { installAsDevDependencies: true }, + dependenciesToInstall.map((pkg) => `${pkg}@${versionToInstallWithoutModifiers}`) + ); + const packageJson = await packageManager.retrievePackageJson(); + await packageManager.addDependencies( + { installAsDevDependencies: true, skipInstall: true, packageJson }, + dependenciesToInstall.map((pkg) => `${pkg}@${versionToInstall}`) + ); + } + }, +}; diff --git a/code/lib/cli/src/automigrate/fixes/sb-binary.test.ts b/code/lib/cli/src/automigrate/fixes/sb-binary.test.ts index e51e919eb88a..34df12d717b6 100644 --- a/code/lib/cli/src/automigrate/fixes/sb-binary.test.ts +++ b/code/lib/cli/src/automigrate/fixes/sb-binary.test.ts @@ -18,32 +18,12 @@ const checkStorybookBinary = async ({ describe('storybook-binary fix', () => { describe('sb >= 7.0', () => { - it('should no-op in NX projects', async () => { + it('should add storybook dependency if not present', async () => { const packageManager = { getPackageVersion: (packageName) => { switch (packageName) { - case '@storybook/react': - return Promise.resolve('7.0.0'); case '@nrwl/storybook': return Promise.resolve('15.7.1'); - default: - return null; - } - }, - retrievePackageJson: () => Promise.resolve({}), - } as Partial; - - await expect( - checkStorybookBinary({ - packageManager, - }) - ).resolves.toBeFalsy(); - }); - - it('should add storybook dependency if not present', async () => { - const packageManager = { - getPackageVersion: (packageName) => { - switch (packageName) { case '@storybook/react': return Promise.resolve('7.0.0-alpha.0'); default: diff --git a/code/lib/cli/src/automigrate/fixes/sb-binary.ts b/code/lib/cli/src/automigrate/fixes/sb-binary.ts index 09ee16bd5d84..798655f1e28a 100644 --- a/code/lib/cli/src/automigrate/fixes/sb-binary.ts +++ b/code/lib/cli/src/automigrate/fixes/sb-binary.ts @@ -23,20 +23,14 @@ const logger = console; export const sbBinary: Fix = { id: 'storybook-binary', - versionRange: ['<7', '>=7'], + versionRange: ['*', '*'], async check({ packageManager, storybookVersion }) { const packageJson = await packageManager.retrievePackageJson(); - const nrwlStorybookVersion = await packageManager.getPackageVersion('@nrwl/storybook'); const sbBinaryVersion = await packageManager.getPackageVersion('sb'); const storybookBinaryVersion = await packageManager.getPackageVersion('storybook'); - // Nx provides their own binary, so we don't need to do anything - if (nrwlStorybookVersion) { - return null; - } - const hasSbBinary = !!sbBinaryVersion; const hasStorybookBinary = !!storybookBinaryVersion; diff --git a/code/lib/cli/src/automigrate/fixes/sb-scripts.ts b/code/lib/cli/src/automigrate/fixes/sb-scripts.ts index ec0fcbc158e4..c9a941de206f 100644 --- a/code/lib/cli/src/automigrate/fixes/sb-scripts.ts +++ b/code/lib/cli/src/automigrate/fixes/sb-scripts.ts @@ -78,7 +78,7 @@ export const getStorybookScripts = (allScripts: NonNullable = { id: 'sb-scripts', - versionRange: ['<7', '>=7'], + versionRange: ['*', '*'], async check({ packageManager, storybookVersion }) { const packageJson = await packageManager.retrievePackageJson(); diff --git a/code/lib/cli/src/automigrate/fixes/wrap-require.ts b/code/lib/cli/src/automigrate/fixes/wrap-require.ts index 829d42ee352f..0334d4b82f33 100644 --- a/code/lib/cli/src/automigrate/fixes/wrap-require.ts +++ b/code/lib/cli/src/automigrate/fixes/wrap-require.ts @@ -22,7 +22,7 @@ interface WrapRequireRunOptions { export const wrapRequire: Fix = { id: 'wrap-require', - versionRange: ['<7.2.0-rc.0', '>=7.2.0-rc.0'], + versionRange: ['*', '*'], async check({ packageManager, storybookVersion, mainConfigPath }) { const isStorybookInMonorepo = await packageManager.isStorybookInMonorepo(); diff --git a/code/lib/cli/src/automigrate/index.test.ts b/code/lib/cli/src/automigrate/index.test.ts index b7fc079655cd..7e5c7dacfb94 100644 --- a/code/lib/cli/src/automigrate/index.test.ts +++ b/code/lib/cli/src/automigrate/index.test.ts @@ -1,8 +1,7 @@ -import { vi, it, expect, describe, beforeEach } from 'vitest'; +import { vi, it, expect, describe, beforeEach, afterEach } from 'vitest'; import { runFixes } from './index'; import type { Fix } from './types'; import type { JsPackageManager, PackageJsonWithDepsAndDevDeps } from '@storybook/core/common'; -import { afterEach } from 'node:test'; const check1 = vi.fn(); const run1 = vi.fn(); diff --git a/code/lib/cli/src/doctor/index.ts b/code/lib/cli/src/doctor/index.ts index 6aab5507b21a..0e2f0747aa7a 100644 --- a/code/lib/cli/src/doctor/index.ts +++ b/code/lib/cli/src/doctor/index.ts @@ -105,6 +105,15 @@ export const doctor = async ({ const allDependencies = (await packageManager.getAllDependencies()) as Record; + if (!('storybook' in allDependencies)) { + logDiagnostic( + `Package ${chalk.cyan('storybook')} not found`, + dedent` + The ${chalk.cyan('storybook')} package was not found in your package.json. + Installing ${chalk.cyan('storybook')} as a direct dev dependency in your package.json is required. + ` + ); + } const incompatibleStorybookPackagesList = await getIncompatibleStorybookPackages({ currentStorybookVersion: storybookVersion, }); diff --git a/code/lib/cli/src/helpers.ts b/code/lib/cli/src/helpers.ts index cffea359a871..f2256e11c2b8 100644 --- a/code/lib/cli/src/helpers.ts +++ b/code/lib/cli/src/helpers.ts @@ -221,7 +221,9 @@ export async function copyTemplateFiles({ await fse.copy(await templatePath(), destinationPath, { overwrite: true }); if (includeCommonAssets) { - const rendererType = frameworkToRenderer[renderer] || 'react'; + let rendererType = frameworkToRenderer[renderer] || 'react'; + // This is only used for docs links and the docs site uses `vue` for both `vue` & `vue3` renderers + if (rendererType === 'vue3') rendererType = 'vue'; await adjustTemplate(join(destinationPath, 'Configure.mdx'), { renderer: rendererType }); } } diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts index 30773df41ea6..e7a55f4ba360 100644 --- a/code/lib/cli/src/sandbox-templates.ts +++ b/code/lib/cli/src/sandbox-templates.ts @@ -514,7 +514,7 @@ const baseTemplates = { }, 'qwik-vite/default-ts': { name: 'Qwik CLI Latest (Vite | TypeScript)', - script: 'npm create qwik basic {{beforeDir}}', + script: 'npm create qwik playground {{beforeDir}}', // TODO: The community template does not provide standard stories, which is required for e2e tests. Reenable once it does. inDevelopment: true, expected: { diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index 6e55584c100d..33f47d4d70e8 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.0", + "version": "8.3.0-alpha.1", "description": "A collection of codemod scripts written with JSCodeshift", "keywords": [ "storybook" diff --git a/code/lib/core-webpack/package.json b/code/lib/core-webpack/package.json index 1e95304dbf0f..4b5d823b5653 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.0", + "version": "8.3.0-alpha.1", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/lib/csf-plugin/package.json b/code/lib/csf-plugin/package.json index 447d677386e5..30a0c1882532 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.0", + "version": "8.3.0-alpha.1", "description": "Enrich CSF files via static analysis", "keywords": [ "storybook" diff --git a/code/lib/csf-plugin/src/webpack-loader.ts b/code/lib/csf-plugin/src/webpack-loader.ts index a4c7aeb825eb..1d27053918b1 100644 --- a/code/lib/csf-plugin/src/webpack-loader.ts +++ b/code/lib/csf-plugin/src/webpack-loader.ts @@ -20,7 +20,11 @@ async function loader(this: LoaderContext, content: string, map: any) { const csf = loadCsf(content, { makeTitle }).parse(); const csfSource = loadCsf(sourceCode, { makeTitle }).parse(); enrichCsf(csf, csfSource, options); - const formattedCsf = formatCsf(csf, { sourceMaps: true, inputSourceMap: map }, content); + const formattedCsf = formatCsf( + csf, + { sourceMaps: true, inputSourceMap: map, sourceFileName: id }, + content + ); if (typeof formattedCsf === 'string') { return callback(null, formattedCsf, map); diff --git a/code/lib/instrumenter/package.json b/code/lib/instrumenter/package.json index ba29f5151f1c..8c1d9af126fa 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.0", + "version": "8.3.0-alpha.1", "description": "", "keywords": [ "storybook" diff --git a/code/lib/react-dom-shim/package.json b/code/lib/react-dom-shim/package.json index 29af1e282b9a..39f37f3b2eaf 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.0", + "version": "8.3.0-alpha.1", "description": "", "keywords": [ "storybook" diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json index 3e052e22090b..cdd281fc63a6 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.0", + "version": "8.3.0-alpha.1", "description": "Source loader", "keywords": [ "lib", diff --git a/code/lib/test/package.json b/code/lib/test/package.json index ec3ed55f79cd..e8a45299549d 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.0", + "version": "8.3.0-alpha.1", "description": "", "keywords": [ "storybook" diff --git a/code/package.json b/code/package.json index 68d4921aa9c3..8b3f199748e1 100644 --- a/code/package.json +++ b/code/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/root", - "version": "8.3.0-alpha.0", + "version": "8.3.0-alpha.1", "private": true, "description": "Storybook root", "homepage": "https://storybook.js.org/", @@ -54,7 +54,7 @@ }, "husky": { "hooks": { - "pre-commit": "yarn lint-staged" + "pre-commit": "if [ -z \"$SKIP_STORYBOOK_GIT_HOOKS\" ]; then yarn lint-staged; fi" } }, "lint-staged": { @@ -86,7 +86,7 @@ "type-fest": "~2.19" }, "dependencies": { - "@chromatic-com/storybook": "^1.3.2", + "@chromatic-com/storybook": "^1.6.1", "@happy-dom/global-registrator": "^14.12.0", "@nx/eslint": "18.0.6", "@nx/vite": "18.0.6", diff --git a/code/presets/create-react-app/package.json b/code/presets/create-react-app/package.json index 2241500c2450..b45def35ba59 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.0", + "version": "8.3.0-alpha.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 704f6d59d308..7dd8843c1e19 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.0", + "version": "8.3.0-alpha.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 6a1e0a280a15..bb2ad46d54a8 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.0", + "version": "8.3.0-alpha.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 771b67e795c7..9c55e89a4b22 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.0", + "version": "8.3.0-alpha.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 b516d0b928bf..e67ab81926ca 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.0", + "version": "8.3.0-alpha.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 a2e60dd2a774..411ac6fbdefe 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.0", + "version": "8.3.0-alpha.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 b122128b6ee6..ac6ce9139059 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.0", + "version": "8.3.0-alpha.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 c2d343158949..86a3cb06529a 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.0", + "version": "8.3.0-alpha.1", "description": "Storybook HTML renderer", "keywords": [ "storybook" @@ -47,7 +47,11 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { + "@storybook/components": "workspace:^", "@storybook/global": "^5.0.0", + "@storybook/manager-api": "workspace:^", + "@storybook/preview-api": "workspace:^", + "@storybook/theming": "workspace:^", "ts-dedent": "^2.0.0" }, "devDependencies": { diff --git a/code/renderers/preact/package.json b/code/renderers/preact/package.json index a0b2eaab393c..fcf82aa276c1 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.0", + "version": "8.3.0-alpha.1", "description": "Storybook Preact renderer", "keywords": [ "storybook" @@ -47,7 +47,11 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { + "@storybook/components": "workspace:^", "@storybook/global": "^5.0.0", + "@storybook/manager-api": "workspace:^", + "@storybook/preview-api": "workspace:^", + "@storybook/theming": "workspace:^", "ts-dedent": "^2.0.0" }, "devDependencies": { diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json index a6d18e19fe71..16bd63698d2c 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.0", + "version": "8.3.0-alpha.1", "description": "Storybook React renderer", "keywords": [ "storybook" @@ -64,8 +64,12 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { + "@storybook/components": "workspace:^", "@storybook/global": "^5.0.0", + "@storybook/manager-api": "workspace:^", + "@storybook/preview-api": "workspace:^", "@storybook/react-dom-shim": "workspace:*", + "@storybook/theming": "workspace:^", "@types/escodegen": "^0.0.6", "@types/estree": "^0.0.51", "@types/node": "^18.0.0", diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json index 6de70a27ee24..704655e2cc58 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.0", + "version": "8.3.0-alpha.1", "description": "Storybook Server renderer", "keywords": [ "storybook" @@ -46,8 +46,12 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { + "@storybook/components": "workspace:^", "@storybook/csf": "0.1.11", "@storybook/global": "^5.0.0", + "@storybook/manager-api": "workspace:^", + "@storybook/preview-api": "workspace:^", + "@storybook/theming": "workspace:^", "@types/fs-extra": "^11.0.1", "fs-extra": "^11.1.0", "ts-dedent": "^2.0.0", diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json index 259b7e982f9b..99c7cb1ebe71 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.0", + "version": "8.3.0-alpha.1", "description": "Storybook Svelte renderer", "keywords": [ "storybook" @@ -57,7 +57,11 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { + "@storybook/components": "workspace:^", "@storybook/global": "^5.0.0", + "@storybook/manager-api": "workspace:^", + "@storybook/preview-api": "workspace:^", + "@storybook/theming": "workspace:^", "sveltedoc-parser": "^4.2.1", "ts-dedent": "^2.0.0", "type-fest": "~2.19" diff --git a/code/renderers/vue3/package.json b/code/renderers/vue3/package.json index 4f3e08eacd5f..c2db348acce1 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.0", + "version": "8.3.0-alpha.1", "description": "Storybook Vue 3 renderer", "keywords": [ "storybook" @@ -63,7 +63,11 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { + "@storybook/components": "workspace:^", "@storybook/global": "^5.0.0", + "@storybook/manager-api": "workspace:^", + "@storybook/preview-api": "workspace:^", + "@storybook/theming": "workspace:^", "@vue/compiler-core": "^3.0.0", "lodash": "^4.17.21", "ts-dedent": "^2.0.0", diff --git a/code/renderers/web-components/package.json b/code/renderers/web-components/package.json index d6815d095dac..05c585126c7b 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.0", + "version": "8.3.0-alpha.1", "description": "Storybook web-components renderer", "keywords": [ "lit", @@ -50,7 +50,11 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { + "@storybook/components": "workspace:^", "@storybook/global": "^5.0.0", + "@storybook/manager-api": "workspace:^", + "@storybook/preview-api": "workspace:^", + "@storybook/theming": "workspace:^", "tiny-invariant": "^1.3.1", "ts-dedent": "^2.0.0" }, diff --git a/code/yarn.lock b/code/yarn.lock index 80c0d55d57e7..7c563aac8e27 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -2292,16 +2292,16 @@ __metadata: languageName: node linkType: hard -"@chromatic-com/storybook@npm:^1.3.2": - version: 1.3.2 - resolution: "@chromatic-com/storybook@npm:1.3.2" +"@chromatic-com/storybook@npm:^1.6.1": + version: 1.6.1 + resolution: "@chromatic-com/storybook@npm:1.6.1" dependencies: - chromatic: "npm:^11.3.0" + chromatic: "npm:^11.4.0" filesize: "npm:^10.0.12" jsonfile: "npm:^6.1.0" react-confetti: "npm:^6.1.0" strip-ansi: "npm:^7.1.0" - checksum: 10c0/30f7d946e41d031d45991ea8cf2f42b64330a12ddb1330a5a0bfe9734511e36f0691f897b0075c41c4c9fa5de6382598e98179a5ac2f9139bd619fc46487bbeb + checksum: 10c0/411a2c9f44542c4940e6452846f1c2b71f4529640cefcf60396c1eb0a16cd2a4d27ba648523c73a7ca9b5b64f2a67b19159281add6730d0a237336a3856c8f37 languageName: node linkType: hard @@ -5437,8 +5437,12 @@ __metadata: "@angular/platform-browser": "npm:^17.3.0" "@angular/platform-browser-dynamic": "npm:^17.3.0" "@storybook/builder-webpack5": "workspace:*" + "@storybook/components": "workspace:^" "@storybook/core-webpack": "workspace:*" "@storybook/global": "npm:^5.0.0" + "@storybook/manager-api": "workspace:^" + "@storybook/preview-api": "workspace:^" + "@storybook/theming": "workspace:^" "@types/cross-spawn": "npm:^6.0.2" "@types/node": "npm:^18.0.0" "@types/react": "npm:^18.0.37" @@ -5688,7 +5692,7 @@ __metadata: languageName: unknown linkType: soft -"@storybook/components@workspace:deprecated/components": +"@storybook/components@workspace:^, @storybook/components@workspace:deprecated/components": version: 0.0.0-use.local resolution: "@storybook/components@workspace:deprecated/components" peerDependencies: @@ -5758,7 +5762,7 @@ __metadata: "@radix-ui/react-scroll-area": "npm:^1.0.5" "@radix-ui/react-slot": "npm:^1.0.2" "@storybook/csf": "npm:0.1.11" - "@storybook/docs-mdx": "npm:3.1.0-next.0" + "@storybook/docs-mdx": "npm:4.0.0-next.0" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" "@tanstack/react-virtual": "npm:^3.3.0" @@ -5911,10 +5915,12 @@ __metadata: languageName: node linkType: hard -"@storybook/docs-mdx@npm:3.1.0-next.0": - version: 3.1.0-next.0 - resolution: "@storybook/docs-mdx@npm:3.1.0-next.0" - checksum: 10c0/7622d7c6318e842c90a71c1836d68531236c31fff7081c885803eddfafb7e3f8998689f612eaa0292209ada8352a36657dcacb5d3ef4632b8e8b8a283c39602e +"@storybook/docs-mdx@npm:4.0.0-next.0": + version: 4.0.0-next.0 + resolution: "@storybook/docs-mdx@npm:4.0.0-next.0" + dependencies: + acorn: "npm:^8.12.1" + checksum: 10c0/6253361e4e3c6c716c4f4c8cc30c082bcdab66b35b30183f6574d94720d875e28927916be8bda0bff4987090c3e50d348ca898160b1812a90c5afa845400414e languageName: node linkType: hard @@ -5998,7 +6004,11 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/html@workspace:renderers/html" dependencies: + "@storybook/components": "workspace:^" "@storybook/global": "npm:^5.0.0" + "@storybook/manager-api": "workspace:^" + "@storybook/preview-api": "workspace:^" + "@storybook/theming": "workspace:^" ts-dedent: "npm:^2.0.0" typescript: "npm:^5.3.2" peerDependencies: @@ -6056,7 +6066,7 @@ __metadata: languageName: node linkType: hard -"@storybook/manager-api@workspace:deprecated/manager-api": +"@storybook/manager-api@workspace:^, @storybook/manager-api@workspace:deprecated/manager-api": version: 0.0.0-use.local resolution: "@storybook/manager-api@workspace:deprecated/manager-api" peerDependencies: @@ -6185,7 +6195,11 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/preact@workspace:renderers/preact" dependencies: + "@storybook/components": "workspace:^" "@storybook/global": "npm:^5.0.0" + "@storybook/manager-api": "workspace:^" + "@storybook/preview-api": "workspace:^" + "@storybook/theming": "workspace:^" preact: "npm:^10.5.13" ts-dedent: "npm:^2.0.0" typescript: "npm:^5.3.2" @@ -6325,7 +6339,7 @@ __metadata: languageName: unknown linkType: soft -"@storybook/preview-api@workspace:deprecated/preview-api": +"@storybook/preview-api@workspace:^, @storybook/preview-api@workspace:deprecated/preview-api": version: 0.0.0-use.local resolution: "@storybook/preview-api@workspace:deprecated/preview-api" peerDependencies: @@ -6418,9 +6432,13 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/react@workspace:renderers/react" dependencies: + "@storybook/components": "workspace:^" "@storybook/global": "npm:^5.0.0" + "@storybook/manager-api": "workspace:^" + "@storybook/preview-api": "workspace:^" "@storybook/react-dom-shim": "workspace:*" "@storybook/test": "workspace:*" + "@storybook/theming": "workspace:^" "@types/babel-plugin-react-docgen": "npm:^4" "@types/escodegen": "npm:^0.0.6" "@types/estree": "npm:^0.0.51" @@ -6457,7 +6475,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/root@workspace:." dependencies: - "@chromatic-com/storybook": "npm:^1.3.2" + "@chromatic-com/storybook": "npm:^1.6.1" "@happy-dom/global-registrator": "npm:^14.12.0" "@nx/eslint": "npm:18.0.6" "@nx/vite": "npm:18.0.6" @@ -6624,8 +6642,12 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/server@workspace:renderers/server" dependencies: + "@storybook/components": "workspace:^" "@storybook/csf": "npm:0.1.11" "@storybook/global": "npm:^5.0.0" + "@storybook/manager-api": "workspace:^" + "@storybook/preview-api": "workspace:^" + "@storybook/theming": "workspace:^" "@types/fs-extra": "npm:^11.0.1" fs-extra: "npm:^11.1.0" ts-dedent: "npm:^2.0.0" @@ -6694,7 +6716,11 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/svelte@workspace:renderers/svelte" dependencies: + "@storybook/components": "workspace:^" "@storybook/global": "npm:^5.0.0" + "@storybook/manager-api": "workspace:^" + "@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" @@ -6771,7 +6797,7 @@ __metadata: languageName: node linkType: hard -"@storybook/theming@workspace:*, @storybook/theming@workspace:deprecated/theming": +"@storybook/theming@workspace:*, @storybook/theming@workspace:^, @storybook/theming@workspace:deprecated/theming": version: 0.0.0-use.local resolution: "@storybook/theming@workspace:deprecated/theming" peerDependencies: @@ -6830,7 +6856,11 @@ __metadata: resolution: "@storybook/vue3@workspace:renderers/vue3" dependencies: "@digitak/esrun": "npm:^3.2.2" + "@storybook/components": "workspace:^" "@storybook/global": "npm:^5.0.0" + "@storybook/manager-api": "workspace:^" + "@storybook/preview-api": "workspace:^" + "@storybook/theming": "workspace:^" "@testing-library/vue": "npm:^8.0.0" "@types/prettier": "npm:^3.0.0" "@vitejs/plugin-vue": "npm:^4.4.0" @@ -6881,7 +6911,11 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/web-components@workspace:renderers/web-components" dependencies: + "@storybook/components": "workspace:^" "@storybook/global": "npm:^5.0.0" + "@storybook/manager-api": "workspace:^" + "@storybook/preview-api": "workspace:^" + "@storybook/theming": "workspace:^" "@types/cross-spawn": "npm:^6.0.2" "@types/node": "npm:^18.0.0" cross-spawn: "npm:^7.0.3" @@ -9241,7 +9275,7 @@ __metadata: languageName: node linkType: hard -"acorn@npm:^8.0.0, acorn@npm:^8.10.0, acorn@npm:^8.11.2, acorn@npm:^8.11.3, acorn@npm:^8.4.1, acorn@npm:^8.6.0, acorn@npm:^8.7.1, acorn@npm:^8.8.2, acorn@npm:^8.9.0": +"acorn@npm:^8.0.0, acorn@npm:^8.10.0, acorn@npm:^8.11.2, acorn@npm:^8.11.3, acorn@npm:^8.12.1, acorn@npm:^8.4.1, acorn@npm:^8.6.0, acorn@npm:^8.7.1, acorn@npm:^8.8.2, acorn@npm:^8.9.0": version: 8.12.1 resolution: "acorn@npm:8.12.1" bin: @@ -11255,9 +11289,9 @@ __metadata: languageName: node linkType: hard -"chromatic@npm:^11.3.0": - version: 11.3.0 - resolution: "chromatic@npm:11.3.0" +"chromatic@npm:^11.4.0": + version: 11.5.5 + resolution: "chromatic@npm:11.5.5" peerDependencies: "@chromatic-com/cypress": ^0.*.* || ^1.0.0 "@chromatic-com/playwright": ^0.*.* || ^1.0.0 @@ -11270,7 +11304,7 @@ __metadata: chroma: dist/bin.js chromatic: dist/bin.js chromatic-cli: dist/bin.js - checksum: 10c0/e977ef43a43ebb0250ec8fc46f5751c8cb9b798f75fcf9ec52485c1127caf9d6cef0346a9dd1660a8967faf1a7cde579571a0ac130cfaf475d6f22e4929003b6 + checksum: 10c0/3d812122548f9c29ab7116f7054e03cbf523b30ddde7e3142017cd23c42b6b99b3023e0146ef3afcfe4245a8cbb2ed97cedecca4e2cf9e5f6e8666db84a827d4 languageName: node linkType: hard diff --git a/docs/_assets/api/doc-block-argtypes.png b/docs/_assets/api/doc-block-argtypes.png index b555f8b7b2eb..579b1d69059a 100644 Binary files a/docs/_assets/api/doc-block-argtypes.png and b/docs/_assets/api/doc-block-argtypes.png differ diff --git a/docs/_assets/get-started/example-onboarding-wizard.png b/docs/_assets/get-started/example-onboarding-wizard.png index 45eeb599a3e2..b290bcd6bc91 100644 Binary files a/docs/_assets/get-started/example-onboarding-wizard.png and b/docs/_assets/get-started/example-onboarding-wizard.png differ diff --git a/docs/_snippets/button-story-baseline.md b/docs/_snippets/button-story-baseline.md index b26bdca7ea47..e6862198b815 100644 --- a/docs/_snippets/button-story-baseline.md +++ b/docs/_snippets/button-story-baseline.md @@ -10,7 +10,7 @@ const meta: Meta