diff --git a/.circleci/config.yml b/.circleci/config.yml index fd1e7376567a..7899e9201574 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -124,6 +124,7 @@ jobs: command: | yarn task --task compile --start-from=auto --no-link --debug git diff --exit-code + yarn dedupe --check - run: name: Publish to Verdaccio command: | diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml index 871971bac231..90f09cc9f0d3 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.yml +++ b/.github/ISSUE_TEMPLATE/bug_report.yml @@ -19,18 +19,19 @@ body: attributes: label: To Reproduce description: >- - We prioritize bug reports that have a reproduction. You can create a reproduction using [storybook.new](https://storybook.new), or by running `npx sb@next sandbox` and - following the instructions. Read our - [documentation](https://storybook.js.org/docs/react/contribute/how-to-reproduce) - to learn more about creating reproductions. + Due to the high volume of reports we receive, we can only prioritize bug reports that include a clear reproduction of the problem. Please use [storybook.new](https://storybook.new) to create one, and consult our [documentation](https://storybook.js.org/docs/react/contribute/how-to-reproduce) for guidance. Thank you for your understanding! placeholder: >- - Paste a link to your reproduction here. We prioritize issues with reproductions over those without. + Please provide a link to your reproduction here. If creating a reproduction really isn't feasible, let us know and be sure to include as much detail as you can to help us understand the issue. + validations: + required: true - type: textarea id: system attributes: label: System description: Please paste the results of `npx storybook@latest info` here. render: bash + validations: + required: true - type: textarea id: context attributes: diff --git a/.github/workflows/canary-release-pr.yml b/.github/workflows/canary-release-pr.yml index 659765318fe5..557a0331fe2d 100644 --- a/.github/workflows/canary-release-pr.yml +++ b/.github/workflows/canary-release-pr.yml @@ -49,18 +49,18 @@ jobs: echo "timestamp=$(date +%s)" >> $GITHUB_OUTPUT - name: Checkout - uses: actions/checkout@v3 + uses: actions/checkout@v4 with: repository: ${{ steps.info.outputs.isFork == 'true' && steps.info.outputs.repository || null }} ref: ${{ steps.info.outputs.sha }} token: ${{ secrets.GH_TOKEN }} - name: Setup Node.js - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: node-version-file: ".nvmrc" - name: Cache dependencies - uses: actions/cache@v3 + uses: actions/cache@v4 with: path: | ~/.yarn/berry/cache diff --git a/.github/workflows/cron-weekly.yml b/.github/workflows/cron-weekly.yml index 898d10ace803..07026c97fb8a 100644 --- a/.github/workflows/cron-weekly.yml +++ b/.github/workflows/cron-weekly.yml @@ -2,21 +2,21 @@ name: Markdown Links Check # runs every monday at 9 am on: schedule: - - cron: '0 9 * * 1' + - cron: "0 9 * * 1" jobs: check-links: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 - uses: gaurav-nelson/github-action-markdown-link-check@v1 # checks all markdown files from important folders including all subfolders with: # only show errors that occur instead of successful links + errors - use-quiet-mode: 'yes' + use-quiet-mode: "yes" # output full HTTP info for broken links - use-verbose-mode: 'yes' - config-file: '.github/workflows/markdown-link-check-config.json' + use-verbose-mode: "yes" + config-file: ".github/workflows/markdown-link-check-config.json" # Notify to Discord channel on failure - name: Send Discord Notification if: failure() # Only run this step if previous steps failed diff --git a/.github/workflows/danger-js.yml b/.github/workflows/danger-js.yml index eddb5dee1fe7..a9ef5d65affe 100644 --- a/.github/workflows/danger-js.yml +++ b/.github/workflows/danger-js.yml @@ -21,10 +21,10 @@ jobs: name: Danger JS runs-on: ubuntu-latest steps: - - uses: actions/checkout@v3 - - uses: actions/setup-node@v3 + - uses: actions/checkout@v4 + - uses: actions/setup-node@v4 with: - node-version-file: '.nvmrc' + node-version-file: ".nvmrc" - name: Danger JS uses: danger/danger-js@11.2.6 env: diff --git a/.github/workflows/handle-release-branches.yml b/.github/workflows/handle-release-branches.yml index e1eb20e97adb..84cebf0aee54 100644 --- a/.github/workflows/handle-release-branches.yml +++ b/.github/workflows/handle-release-branches.yml @@ -23,7 +23,7 @@ jobs: if: ${{ needs.branch-checks.outputs.is-latest-branch == 'true' }} runs-on: ubuntu-latest steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 - run: curl -X POST "https://api.netlify.com/build_hooks/${{ secrets.FRONTPAGE_HOOK }}" @@ -32,7 +32,7 @@ jobs: if: ${{ needs.branch-checks.outputs.is-next-branch == 'true' || needs.branch-checks.outputs.is-release-branch == 'true' }} runs-on: ubuntu-latest steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 with: ref: next path: next @@ -54,7 +54,7 @@ jobs: if: ${{ needs.branch-checks.outputs.is-next-branch == 'true' }} runs-on: ubuntu-latest steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 with: fetch-depth: 0 @@ -88,7 +88,8 @@ jobs: request-create-frontpage-branch: if: ${{ always() }} - needs: [branch-checks, next-release-branch-check, create-next-release-branch] + needs: + [branch-checks, next-release-branch-check, create-next-release-branch] runs-on: ubuntu-latest steps: - if: ${{ needs.branch-checks.outputs.is-actionable-branch == 'true' && needs.branch-checks.outputs.is-latest-branch == 'false' && needs.next-release-branch-check.outputs.check == 'false' }} diff --git a/.github/workflows/prepare-non-patch-release.yml b/.github/workflows/prepare-non-patch-release.yml index 0b4163251bdd..3cbf8f8b1fc9 100644 --- a/.github/workflows/prepare-non-patch-release.yml +++ b/.github/workflows/prepare-non-patch-release.yml @@ -8,9 +8,9 @@ on: workflow_dispatch: inputs: release-type: - description: 'Which release type to use for bumping the version' + description: "Which release type to use for bumping the version" required: true - default: 'prerelease' + default: "prerelease" type: choice options: - prerelease @@ -43,7 +43,7 @@ jobs: working-directory: scripts steps: - name: Checkout next - uses: actions/checkout@v3 + uses: actions/checkout@v4 with: ref: next # this needs to be set to a high enough number that it will contain the last version tag @@ -52,12 +52,12 @@ jobs: token: ${{ secrets.GH_TOKEN }} - name: Setup Node.js - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: - node-version-file: '.nvmrc' + node-version-file: ".nvmrc" - name: Cache dependencies - uses: actions/cache@v3 + uses: actions/cache@v4 with: path: | ~/.yarn/berry/cache @@ -123,7 +123,7 @@ jobs: run: | yarn release:write-changelog ${{ steps.bump-version.outputs.next-version }} --verbose - - name: 'Commit changes to branch: version-non-patch-from-${{ steps.bump-version.outputs.current-version }}' + - name: "Commit changes to branch: version-non-patch-from-${{ steps.bump-version.outputs.current-version }}" working-directory: . run: | git config --global user.name 'storybook-bot' @@ -180,4 +180,4 @@ jobs: DISCORD_WEBHOOK: ${{ secrets.DISCORD_MONITORING_URL }} uses: Ilshidur/action-discord@master with: - args: 'The GitHub Action for preparing the release pull request bumping from v${{ steps.bump-version.outputs.current-version }} to v${{ steps.bump-version.outputs.next-version }} (triggered by ${{ github.triggering_actor }}) failed! See run at: https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}' + args: "The GitHub Action for preparing the release pull request bumping from v${{ steps.bump-version.outputs.current-version }} to v${{ steps.bump-version.outputs.next-version }} (triggered by ${{ github.triggering_actor }}) failed! See run at: https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}" diff --git a/.github/workflows/prepare-patch-release.yml b/.github/workflows/prepare-patch-release.yml index 91be3acf6f92..f66258c0d836 100644 --- a/.github/workflows/prepare-patch-release.yml +++ b/.github/workflows/prepare-patch-release.yml @@ -25,18 +25,18 @@ jobs: working-directory: scripts steps: - name: Checkout main - uses: actions/checkout@v3 + uses: actions/checkout@v4 with: ref: main token: ${{ secrets.GH_TOKEN }} - name: Setup Node.js - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: node-version-file: ".nvmrc" - name: Cache dependencies - uses: actions/cache@v3 + uses: actions/cache@v4 with: path: | ~/.yarn/berry/cache diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index bd9c892e3310..cc88ce6182fd 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -37,18 +37,18 @@ jobs: gh run watch ${{ github.run_id }} - name: Checkout ${{ github.ref_name }} - uses: actions/checkout@v3 + uses: actions/checkout@v4 with: fetch-depth: 100 token: ${{ secrets.GH_TOKEN }} - name: Setup Node.js - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: - node-version-file: '.nvmrc' + node-version-file: ".nvmrc" - name: Cache dependencies - uses: actions/cache@v3 + uses: actions/cache@v4 with: path: | ~/.yarn/berry/cache @@ -197,4 +197,4 @@ jobs: DISCORD_WEBHOOK: ${{ secrets.DISCORD_MONITORING_URL }} uses: Ilshidur/action-discord@master with: - args: 'The GitHub Action for publishing version ${{ steps.version.outputs.current-version }} (triggered by ${{ github.triggering_actor }}) failed! See run at: https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}' + args: "The GitHub Action for publishing version ${{ steps.version.outputs.current-version }} (triggered by ${{ github.triggering_actor }}) failed! See run at: https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}" diff --git a/.github/workflows/stale.yml b/.github/workflows/stale.yml index 1418c69695f3..29afdd8ce196 100644 --- a/.github/workflows/stale.yml +++ b/.github/workflows/stale.yml @@ -1,18 +1,18 @@ -name: 'Close stale issues that need reproduction or more info from OP' +name: "Close stale issues that need reproduction or more info from OP" on: schedule: - - cron: '30 1 * * *' + - cron: "30 1 * * *" jobs: stale: runs-on: ubuntu-latest steps: - - uses: actions/stale@v8 + - uses: actions/stale@v9 with: stale-issue-message: "Hi there! Thank you for opening this issue, but it has been marked as `stale` because we need more information to move forward. Could you please provide us with the requested reproduction or additional information that could help us better understand the problem? We'd love to resolve this issue, but we can't do it without your help!" close-issue-message: "I'm afraid we need to close this issue for now, since we can't take any action without the requested reproduction or additional information. But please don't hesitate to open a new issue if the problem persists – we're always happy to help. Thanks so much for your understanding." - any-of-labels: 'needs reproduction,needs more info' - exempt-issue-labels: 'needs triage' - labels-to-add-when-unstale: 'needs triage' + any-of-labels: "needs reproduction,needs more info" + exempt-issue-labels: "needs triage" + labels-to-add-when-unstale: "needs triage" days-before-stale: 21 days-before-pr-stale: -1 diff --git a/.github/workflows/tests-unit.yml b/.github/workflows/tests-unit.yml index dbb4f498ab6e..103bb8196fa4 100644 --- a/.github/workflows/tests-unit.yml +++ b/.github/workflows/tests-unit.yml @@ -16,11 +16,11 @@ jobs: os: [windows-latest] runs-on: ${{ matrix.os }} steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 - name: Set node version - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: - node-version-file: '.nvmrc' + node-version-file: ".nvmrc" - name: install and compile run: yarn task --task compile --start-from=auto --no-link - name: test diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md index aec117765b12..3474586b1d3f 100644 --- a/CHANGELOG.prerelease.md +++ b/CHANGELOG.prerelease.md @@ -1,3 +1,20 @@ +## 8.1.0-alpha.2 + +- CLI: Automigrate improve upgrade storybook related packages - [#26497](https://github.com/storybookjs/storybook/pull/26497), thanks @ndelangen! +- CLI: Improve `vite-config-file.ts` - [#26375](https://github.com/storybookjs/storybook/pull/26375), thanks @joevaugh4n! +- Controls: Fix number controls do not reset - [#26372](https://github.com/storybookjs/storybook/pull/26372), thanks @jiyiru! +- Core: Optimize clearNotification - [#26415](https://github.com/storybookjs/storybook/pull/26415), thanks @ndelangen! +- Portable stories: Make setProjectAnnotations accept multiple types of imports - [#26316](https://github.com/storybookjs/storybook/pull/26316), thanks @yannbf! +- UI: Add key property to list children in Highlight component - [#26471](https://github.com/storybookjs/storybook/pull/26471), thanks @valentinpalkovic! +- UI: Fix search result color contrast - [#26287](https://github.com/storybookjs/storybook/pull/26287), thanks @winchesHe! + +## 8.1.0-alpha.1 + +- Maintenance: Fix performance regressions - [#26411](https://github.com/storybookjs/storybook/pull/26411), thanks @kasperpeulen! + +## 8.1.0-alpha.0 + + ## 8.0.0-rc.5 - CLI: Automigration fix version detection of upgrading related packages - [#26410](https://github.com/storybookjs/storybook/pull/26410), thanks @ndelangen! diff --git a/MIGRATION.md b/MIGRATION.md index 561a9a61b899..2d6f1d834ecf 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -510,8 +510,8 @@ For migrating to CSF, see: [`storyStoreV6` and `storiesOf` is deprecated](#story In Storybook 7, these packages existed for backwards compatibility, but were marked as deprecated: - `@storybook/addons` - this package has been split into 2 packages: `@storybook/preview-api` and `@storybook/manager-api`, see more here: [New Addons API](#new-addons-api). -- `@storybook/channel-postmessage` - this package has been merged into `@storybook/channel`. -- `@storybook/channel-websocket` - this package has been merged into `@storybook/channel`. +- `@storybook/channel-postmessage` - this package has been merged into `@storybook/channels`. +- `@storybook/channel-websocket` - this package has been merged into `@storybook/channels`. - `@storybook/client-api` - this package has been merged into `@storybook/preview-api`. - `@storybook/core-client` - this package has been merged into `@storybook/preview-api`. - `@storybook/preview-web` - this package has been merged into `@storybook/preview-api`. @@ -554,7 +554,7 @@ export default defineConfig({ ```ts import { defineConfig } from "vite"; -import svelte from "@sveltejs/vite-plugin-svelte"; +import { svelte } from "@sveltejs/vite-plugin-svelte"; export default defineConfig({ plugins: [svelte()], diff --git a/code/.yarn/patches/@vitest-expect-npm-1.1.3-2062bf533f.patch b/code/.yarn/patches/@vitest-expect-npm-1.3.1-973071a540.patch similarity index 85% rename from code/.yarn/patches/@vitest-expect-npm-1.1.3-2062bf533f.patch rename to code/.yarn/patches/@vitest-expect-npm-1.3.1-973071a540.patch index 9a1b74e203bd..b2028a85b1ff 100644 --- a/code/.yarn/patches/@vitest-expect-npm-1.1.3-2062bf533f.patch +++ b/code/.yarn/patches/@vitest-expect-npm-1.3.1-973071a540.patch @@ -1,10 +1,10 @@ diff --git a/dist/index.js b/dist/index.js -index 974d6b26f626024fc9904908100c9ecaa54f43e1..5d9d92a0796e02630ccdd1174d4fd25e016d2b06 100644 +index 640839e4b9fef0f25d08d055d4350845a8a29791..844f3d5834147848b5fa54276e96e665bcc675f9 100644 --- a/dist/index.js +++ b/dist/index.js -@@ -6,28 +6,35 @@ import { processError } from '@vitest/utils/error'; +@@ -6,26 +6,32 @@ import { processError } from '@vitest/utils/error'; import { util } from 'chai'; - + const MATCHERS_OBJECT = Symbol.for("matchers-object"); -const JEST_MATCHERS_OBJECT = Symbol.for("$$jest-matchers-object"); +// Patched this symbol for storybook, so that @storybook/test can be used in a jest environment as well. @@ -12,10 +12,11 @@ index 974d6b26f626024fc9904908100c9ecaa54f43e1..5d9d92a0796e02630ccdd1174d4fd25e +const JEST_MATCHERS_OBJECT = Symbol.for("$$jest-matchers-object-storybook"); const GLOBAL_EXPECT = Symbol.for("expect-global"); const ASYMMETRIC_MATCHERS_OBJECT = Symbol.for("asymmetric-matchers-object"); - + if (!Object.prototype.hasOwnProperty.call(globalThis, MATCHERS_OBJECT)) { const globalState = /* @__PURE__ */ new WeakMap(); - const matchers = /* @__PURE__ */ Object.create(null); +- const customEqualityTesters = []; - const assymetricMatchers = /* @__PURE__ */ Object.create(null); Object.defineProperty(globalThis, MATCHERS_OBJECT, { get: () => globalState @@ -23,12 +24,14 @@ index 974d6b26f626024fc9904908100c9ecaa54f43e1..5d9d92a0796e02630ccdd1174d4fd25e +} +if (!Object.prototype.hasOwnProperty.call(globalThis, JEST_MATCHERS_OBJECT)) { + const matchers = /* @__PURE__ */ Object.create(null); ++ const customEqualityTesters = []; Object.defineProperty(globalThis, JEST_MATCHERS_OBJECT, { configurable: true, get: () => ({ - state: globalState.get(globalThis[GLOBAL_EXPECT]), + state: globalThis[MATCHERS_OBJECT].get(globalThis[GLOBAL_EXPECT]), - matchers + matchers, + customEqualityTesters }) }); +} @@ -37,8 +40,3 @@ index 974d6b26f626024fc9904908100c9ecaa54f43e1..5d9d92a0796e02630ccdd1174d4fd25e Object.defineProperty(globalThis, ASYMMETRIC_MATCHERS_OBJECT, { get: () => assymetricMatchers }); - } -+ - function getState(expect) { - return globalThis[MATCHERS_OBJECT].get(expect); - } diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index 73f802106851..2dc509c9a535 100644 --- a/code/addons/a11y/package.json +++ b/code/addons/a11y/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-a11y", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.2", "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 2f13f8e98a15..3daab0e6523b 100644 --- a/code/addons/actions/package.json +++ b/code/addons/actions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-actions", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.2", "description": "Get UI feedback when an action is performed on an interactive element", "keywords": [ "storybook", diff --git a/code/addons/actions/src/runtime/action.ts b/code/addons/actions/src/runtime/action.ts index a647a8eb0d1b..fab9e8aae1d4 100644 --- a/code/addons/actions/src/runtime/action.ts +++ b/code/addons/actions/src/runtime/action.ts @@ -21,10 +21,9 @@ const isReactSyntheticEvent = (e: unknown): e is SyntheticEvent => findProto(e, (proto) => /^Synthetic(?:Base)?Event$/.test(proto.constructor.name)) && typeof (e as SyntheticEvent).persist === 'function' ); -const serializeArg = (a: T) => { +const serializeArg = (a: T) => { if (isReactSyntheticEvent(a)) { const e: SyntheticEvent = Object.create( - // @ts-expect-error (Converted from ts-ignore) a.constructor.prototype, Object.getOwnPropertyDescriptors(a) ); diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json index 08ea5529d139..e1628ec59e9c 100644 --- a/code/addons/backgrounds/package.json +++ b/code/addons/backgrounds/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-backgrounds", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.2", "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 d59821722737..1ef789220bb4 100644 --- a/code/addons/controls/package.json +++ b/code/addons/controls/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-controls", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.2", "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 3c6eaa0d625a..74e561e9f36b 100644 --- a/code/addons/docs/package.json +++ b/code/addons/docs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-docs", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.2", "description": "Document component usage and properties in Markdown", "keywords": [ "addon", diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json index 3b9143837d78..bd5e7c1d3042 100644 --- a/code/addons/essentials/package.json +++ b/code/addons/essentials/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-essentials", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.2", "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 b35c226de305..c667a4e101a0 100644 --- a/code/addons/gfm/package.json +++ b/code/addons/gfm/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-mdx-gfm", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.2", "description": "GitHub Flavored Markdown in Storybook", "keywords": [ "addon", diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json index bae6a544048d..4a5d8848e411 100644 --- a/code/addons/highlight/package.json +++ b/code/addons/highlight/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-highlight", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.2", "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 dbb88085b22b..f39a3065e103 100644 --- a/code/addons/interactions/package.json +++ b/code/addons/interactions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-interactions", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.2", "description": "Automate, test and debug user interactions", "keywords": [ "storybook-addons", @@ -50,8 +50,9 @@ }, "dependencies": { "@storybook/global": "^5.0.0", + "@storybook/instrumenter": "workspace:*", + "@storybook/test": "workspace:*", "@storybook/types": "workspace:*", - "jest-mock": "^27.0.6", "polished": "^4.2.2", "ts-dedent": "^2.2.0" }, @@ -62,10 +63,8 @@ "@storybook/core-common": "workspace:*", "@storybook/core-events": "workspace:*", "@storybook/icons": "^1.2.5", - "@storybook/instrumenter": "workspace:*", "@storybook/manager-api": "workspace:*", "@storybook/preview-api": "workspace:*", - "@storybook/test": "workspace:*", "@storybook/theming": "workspace:*", "@types/node": "^18.0.0", "formik": "^2.2.9", diff --git a/code/addons/interactions/src/components/InteractionsPanel.stories.tsx b/code/addons/interactions/src/components/InteractionsPanel.stories.tsx index 89f7ef115b59..5f8dd331935b 100644 --- a/code/addons/interactions/src/components/InteractionsPanel.stories.tsx +++ b/code/addons/interactions/src/components/InteractionsPanel.stories.tsx @@ -3,7 +3,7 @@ import type { StoryObj, Meta } from '@storybook/react'; import { CallStates } from '@storybook/instrumenter'; import { styled } from '@storybook/theming'; import { userEvent, within, waitFor, expect } from '@storybook/test'; -import isChromatic from 'chromatic/isChromatic'; +import { isChromatic } from '../../../../ui/.storybook/isChromatic'; import { getCalls, getInteractions } from '../mocks'; import { InteractionsPanel } from './InteractionsPanel'; diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json index bd511b8e0b5c..7177f576cf1b 100644 --- a/code/addons/jest/package.json +++ b/code/addons/jest/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-jest", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.2", "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 686c684f829b..4effdb357a7c 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-links", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.2", "description": "Link stories together to build demos and prototypes with your UI components", "keywords": [ "addon", diff --git a/code/addons/links/src/utils.ts b/code/addons/links/src/utils.ts index 51d8c09c5fc4..651183a9df66 100644 --- a/code/addons/links/src/utils.ts +++ b/code/addons/links/src/utils.ts @@ -37,9 +37,7 @@ export const hrefTo = (title: ComponentTitle, name: StoryName): Promise return new Promise((resolve) => { const { location } = document; const query = parseQuery(location.search); - // @ts-expect-error (Converted from ts-ignore) - const existingId = [].concat(query.id)[0]; - // @ts-expect-error (Converted from ts-ignore) + const existingId = query.id; const titleToLink = title || existingId.split('--', 2)[0]; const id = toId(titleToLink, name); const path = `/story/${id}`; diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json index 1985366f670c..71616e30727c 100644 --- a/code/addons/measure/package.json +++ b/code/addons/measure/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-measure", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.2", "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 72726fb3726f..807075ae94ae 100644 --- a/code/addons/onboarding/package.json +++ b/code/addons/onboarding/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-onboarding", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.2", "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 f8db2b4ea149..96f83f0b4b15 100644 --- a/code/addons/outline/package.json +++ b/code/addons/outline/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-outline", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.2", "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 c7326a263ad1..660ee804e658 100644 --- a/code/addons/storysource/package.json +++ b/code/addons/storysource/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storysource", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.2", "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 a3599f8288e2..2724c1b9450b 100644 --- a/code/addons/themes/package.json +++ b/code/addons/themes/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-themes", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.2", "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 ec4a11506175..b0b429dd7d82 100644 --- a/code/addons/toolbars/package.json +++ b/code/addons/toolbars/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-toolbars", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.2", "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 92208b361584..eecdb09fb296 100644 --- a/code/addons/viewport/package.json +++ b/code/addons/viewport/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-viewport", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.2", "description": "Build responsive components by adjusting Storybook’s viewport size and orientation", "keywords": [ "addon", diff --git a/code/builders/builder-manager/package.json b/code/builders/builder-manager/package.json index a31a2e91a374..aa5a0b24edb4 100644 --- a/code/builders/builder-manager/package.json +++ b/code/builders/builder-manager/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-manager", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.2", "description": "Storybook manager builder", "keywords": [ "storybook" diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json index 1d0dd1b7610c..a890bdc9f8d8 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.1.0-alpha.0", + "version": "8.1.0-alpha.2", "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/optimizeDeps.ts b/code/builders/builder-vite/src/optimizeDeps.ts index 1972fde8e8e7..7d38b61cb747 100644 --- a/code/builders/builder-vite/src/optimizeDeps.ts +++ b/code/builders/builder-vite/src/optimizeDeps.ts @@ -3,6 +3,8 @@ import type { InlineConfig as ViteInlineConfig, UserConfig } from 'vite'; import type { Options } from '@storybook/types'; import { listStories } from './list-stories'; +// It ensures that vite converts cjs deps into esm without vite having to find them during startup and then having to log a message about them and restart +// TODO: Many of the deps might be prebundled now though, so probably worth trying to remove and see what happens const INCLUDE_CANDIDATES = [ '@base2/pretty-print-object', '@emotion/core', @@ -27,7 +29,6 @@ const INCLUDE_CANDIDATES = [ 'fast-deep-equal', 'html-tags', 'isobject', - 'jest-mock', 'loader-utils', 'lodash/camelCase.js', 'lodash/camelCase', diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json index 31d47498ee40..92e784322294 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.1.0-alpha.0", + "version": "8.1.0-alpha.2", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/chromatic.config.json b/code/chromatic.config.json index 01493ceba46a..77130b818b6d 100644 --- a/code/chromatic.config.json +++ b/code/chromatic.config.json @@ -3,6 +3,7 @@ "projectToken": "80b312430ec4", "buildScriptName": "storybook:ui:build", "onlyChanged": true, - "storybookConfigDir": "./ui/.storybook", - "storybookBaseDir": "./code" + "storybookConfigDir": "ui/.storybook", + "storybookBaseDir": "./code", + "zip": true } diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json index 9ffa620ac401..4b092e00a771 100644 --- a/code/frameworks/angular/package.json +++ b/code/frameworks/angular/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/angular", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.2", "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.", "keywords": [ "storybook", diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json index 9c796b2f5b7c..d1497db30bb5 100644 --- a/code/frameworks/ember/package.json +++ b/code/frameworks/ember/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/ember", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.2", "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 26bcfa5687c7..373f427ec596 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.1.0-alpha.0", + "version": "8.1.0-alpha.2", "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 7c6e27ae25e1..3a85be3262a6 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.1.0-alpha.0", + "version": "8.1.0-alpha.2", "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 f3a10ee4210d..e20925a884dc 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/nextjs", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.2", "description": "Storybook for Next.js", "keywords": [ "storybook", diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json index b8b67128ef22..b165b0164ba2 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.1.0-alpha.0", + "version": "8.1.0-alpha.2", "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 51bdc48718ad..e7fda5da9f47 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.1.0-alpha.0", + "version": "8.1.0-alpha.2", "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 da08584b7625..ac8d8647ae42 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.1.0-alpha.0", + "version": "8.1.0-alpha.2", "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 3d5ceb3ba80c..11aafe32b6c0 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.1.0-alpha.0", + "version": "8.1.0-alpha.2", "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 6aa05a0c122d..a7ef06bbb39e 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.1.0-alpha.0", + "version": "8.1.0-alpha.2", "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 9090da475670..f95ec88b2fd0 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.1.0-alpha.0", + "version": "8.1.0-alpha.2", "description": "Storybook for Svelte and Vite: Develop Svelte components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/svelte-webpack5/README.md b/code/frameworks/svelte-webpack5/README.md index d490ff6af11c..fa37e5b2e74b 100644 --- a/code/frameworks/svelte-webpack5/README.md +++ b/code/frameworks/svelte-webpack5/README.md @@ -1,32 +1,3 @@ -# Storybook for Svelte +# Storybook for Svelte & Webpack -Storybook for Svelte is a UI development environment for your Svelte components. -With it, you can visualize different states of your UI components and develop them interactively. - -![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/main/media/storybook-intro.gif) - -Storybook runs outside of your app. -So you can develop UI components in isolation without worrying about app specific dependencies and requirements. - -## Getting Started - -```sh -cd my-svelte-app -npx storybook@latest init -``` - -For more information visit: [storybook.js.org](https://storybook.js.org) - ---- - -Storybook also comes with a lot of [addons](https://storybook.js.org/addons) and a great API to customize as you wish. -You can also build a [static version](https://storybook.js.org/docs/svelte/sharing/publish-storybook) of your Storybook and deploy it anywhere you want. - -## TODOs - -- Support `addon-info` -- Support Svelte markup directly in stories -- Add Svelte storybook generator -- Provide stories that show advanced Svelte use cases -- Hydratable -- Advanced mount options +See [documentation](https://storybook.js.org/docs/8.0/get-started/svelte-webpack5?renderer=svelte) for installation instructions, usage examples, APIs, and more. diff --git a/code/frameworks/svelte-webpack5/package.json b/code/frameworks/svelte-webpack5/package.json index db4ed258f40c..6ebda301a4ff 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.1.0-alpha.0", + "version": "8.1.0-alpha.2", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/sveltekit/README.md b/code/frameworks/sveltekit/README.md index 0243fde57b23..8bb8789a879d 100644 --- a/code/frameworks/sveltekit/README.md +++ b/code/frameworks/sveltekit/README.md @@ -1,190 +1,6 @@ -# Storybook for SvelteKit +# Storybook for SvelteKit -Our goal is to help you use the tools you love together with Storybook. That’s why Storybook has zero-config support for SvelteKit with the `@storybook/sveltekit` package. - -Check out our [Frameworks API](https://storybook.js.org/blog/framework-api/) announcement for what this all means for you and our continued efforts to make Storybook a seamless integration for any project. - -## Table of Contents - -- [Supported features](#supported-features) -- [Requirements](#requirements) -- [Getting Started](#getting-started) - - [In a project without Storybook](#in-a-project-without-storybook) - - [In a project with Storybook](#in-a-project-with-storybook) - - [Automatic migration](#automatic-migration) - - [Manual migration](#manual-migration) -- [How to mock](#how-to-mock) - - [Mocking links](#mocking-links) -- [Troubleshooting](#troubleshooting) - - [Error: `ERR! SyntaxError: Identifier '__esbuild_register_import_meta_url__' has already been declared` when starting Storybook](#error-err-syntaxerror-identifier-__esbuild_register_import_meta_url__-has-already-been-declared-when-starting-storybook) -- [Acknowledgements](#acknowledgements) - -## Supported features - -All Svelte language features are supported out of the box, as Storybook uses the Svelte compiler underneath. -However SvelteKit has some [Kit-specific modules](https://kit.svelte.dev/docs/modules) that currently aren't supported. It's on our roadmap to support most of them soon: - -| **Module** | **Status** | **Note** | -| ---------------------------------------------------------------------------------- | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | -| [`$app/environment`](https://kit.svelte.dev/docs/modules#$app-environment) | ✅ Supported | `version` is always empty in Storybook. | -| [`$app/forms`](https://kit.svelte.dev/docs/modules#$app-forms) | ✅ Supported | See [How to mock](#how-to-mock) | -| [`$app/navigation`](https://kit.svelte.dev/docs/modules#$app-navigation) | ✅ Supported | See [How to mock](#how-to-mock) | -| [`$app/paths`](https://kit.svelte.dev/docs/modules#$app-paths) | ✅ Supported | Requires SvelteKit 1.4.0 or newer | -| [`$app/stores`](https://kit.svelte.dev/docs/modules#$app-stores) | ✅ Supported | See [How to mock](#how-to-mock) | -| [`$env/dynamic/private`](https://kit.svelte.dev/docs/modules#$env-dynamic-private) | ⛔ Not supported | They are meant to only be available server-side, and Storybook renders all components on the client. | -| [`$env/dynamic/public`](https://kit.svelte.dev/docs/modules#$env-dynamic-public) | 🚧 Partially supported | Only supported in development mode. Storybook is built as a static app with no server-side API so cannot dynamically serve content. | -| [`$env/static/private`](https://kit.svelte.dev/docs/modules#$env-static-private) | ⛔ Not supported | They are meant to only be available server-side, and Storybook renders all components on the client. | -| [`$env/static/public`](https://kit.svelte.dev/docs/modules#$env-static-public) | ✅ Supported | | -| [`$lib`](https://kit.svelte.dev/docs/modules#$lib) | ✅ Supported | | -| [`$service-worker`](https://kit.svelte.dev/docs/modules#$service-worker) | ⛔ Not supported | They are only meant to be used in service workers | -| [`@sveltejs/kit/*`](https://kit.svelte.dev/docs/modules#sveltejs-kit) | ✅ Supported | | - -This is just the beginning. We're close to adding basic support for many of the SvelteKit features. Longer term we're planning on making it an even better experience to [build](https://storybook.js.org/docs/svelte/writing-stories), [test](https://storybook.js.org/docs/svelte/writing-tests) and [document](https://storybook.js.org/docs/svelte/writing-docs) all the SvelteKit goodies like [pages](https://kit.svelte.dev/docs/routing), [forms](https://kit.svelte.dev/docs/form-actions) and [layouts](https://kit.svelte.dev/docs/routing#layout) in Storybook, while still integrating with all the addons and workflows you know and love. - -## Requirements - -- [SvelteKit](https://kit.svelte.dev/) >= 1.0.0 (not including beta versions) -- [Storybook](https://storybook.js.org/) >= 7.x - -## Getting Started - -### In a project without Storybook - -Run the following command in your SvelteKit project's root directory, and follow the prompts: - -```bash -npx storybook@latest init -``` - -[More on getting started with Storybook](https://storybook.js.org/docs/svelte/get-started/install) - -### In a project with Storybook - -This framework is designed to work with Storybook 7. If you’re not already using v7, upgrade with this command: - -```bash -npx storybook@latest upgrade -``` - -#### Automatic migration - -When running the `upgrade` command above you should get a prompt asking you to migrate to `@storybook/sveltekit`, which should handle everything for you. In some cases it can't migrate for you, eg. if your existing Storybook setup is based on Webpack. In such cases, refer to the manual migration below. - -Storybook 7.0 automatically loads your Vite config, and by extension your Svelte config. If you had a `svelteOptions` property in `.storybook/main.js` the automigration will have removed it, as it is no longer supported. - -#### Manual migration - -Install the framework: - -```bash -yarn add -D @storybook/sveltekit -``` - -Update your `main.js` to change the framework property: - -```js -// .storybook/main.js -export default { - ... - framework: '@storybook/sveltekit', -}; -``` - -Storybook 7.0 automatically loads your Vite config, and by extension your Svelte config. If you have a `svelteOptions` property in `.storybook/main.js` you need to remove that. See [Troubleshooting](#error-about-__esbuild_register_import_meta_url__-when-starting-storybook) below. - -Remove any redundant dependencies, if you have them: - -```bash -yarn remove @storybook/svelte-vite -yarn remove @storybook/svelte-webpack5 -yarn remove storybook-builder-vite -yarn remove @storybook/builder-vite -``` - -## How to mock - -To mock a SvelteKit import you can set it on `parameters.sveltekit_experimental`: - -```ts -export const MyStory = { - parameters: { - sveltekit_experimental: { - stores: { - page: { - data: { - test: 'passed', - }, - }, - navigating: { - route: { - id: '/storybook', - }, - }, - updated: true, - }, - }, - }, -}; -``` - -You can add the name of the module you want to mock to `parameters.sveltekit_experimental` (in the example above we are mocking the `stores` module which correspond to `$app/stores`) and then pass the following kind of objects: - -| Module | Path in parameters | Kind of objects | -| ------------------------------------------------- | ------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------- | -| `import { page } from "$app/stores"` | `parameters.sveltekit_experimental.stores.page` | A Partial of the page store | -| `import { navigating } from "$app/stores"` | `parameters.sveltekit_experimental.stores.navigating` | A Partial of the navigating store | -| `import { updated } from "$app/stores"` | `parameters.sveltekit_experimental.stores.updated` | A boolean representing the value of updated (you can also access `check()` which will be a noop) | -| `import { goto } from "$app/navigation"` | `parameters.sveltekit_experimental.navigation.goto` | A callback that will be called whenever goto is called, in no function is provided an action will be logged to the Actions panel | -| `import { pushState } from "$app/navigation"` | `parameters.sveltekit_experimental.navigation.pushState` | A callback that will be called whenever pushState is called, in no function is provided an action will be logged to the Actions panel | -| `import { replaceState } from "$app/navigation"` | `parameters.sveltekit_experimental.navigation.replaceState` | A callback that will be called whenever replaceState is called, in no function is provided an action will be logged to the Actions panel | -| `import { invalidate } from "$app/navigation"` | `parameters.sveltekit_experimental.navigation.invalidate` | A callback that will be called whenever invalidate is called, in no function is provided an action will be logged to the Actions panel | -| `import { invalidateAll } from "$app/navigation"` | `parameters.sveltekit_experimental.navigation.invalidateAll` | A callback that will be called whenever invalidateAll is called, in no function is provided an action will be logged to the Actions panel | -| `import { afterNavigate } from "$app/navigation"` | `parameters.sveltekit_experimental.navigation.afterNavigate` | An object that will be passed to the afterNavigate function (which will be invoked onMount) called | -| `import { enhance } from "$app/forms"` | `parameters.sveltekit_experimental.forms.enhance` | A callback that will called when a form with `use:enhance` is submitted | - -All the other functions are still exported as `noop` from the mocked modules so that your application will still work. - -### Mocking links - -The default link-handling behavior (ie. clicking an `` tag with an `href` attribute) is to log an action to the Actions panel. - -You can override this by setting an object on `parameter.sveltekit_experimental.hrefs`, where the keys are strings representing an href and the values are objects typed as `{ callback: (href, event) => void, asRegex?: boolean }`. - -If you have an `` tag inside your code with the `href` attribute that matches one or more of the links defined (treated as regex based on the `asRegex` property) the corresponding `callback` will be called. - -Example: - -```ts -export const MyStory = { - parameters: { - sveltekit_experimental: { - hrefs: { - '/basic-href': (to, event) => { - console.log(to, event); - }, - '/root.*': { - callback: (to, event) => { - console.log(to, event); - }, - asRegex: true, - }, - }, - }, - }, -}; -``` - -## Troubleshooting - -### Error: `ERR! SyntaxError: Identifier '__esbuild_register_import_meta_url__' has already been declared` when starting Storybook - -> When starting Storybook after upgrading to v7.0, it breaks with the following error: -> -> ``` -> ERR! SyntaxError: Identifier '__esbuild_register_import_meta_url__' has already been declared -> ``` - -You'll get this error when manually upgrading from 6.5 to 7.0. You need to remove the `svelteOptions` property in `.storybook/main.js`, as that is not supported by Storybook 7.0 + SvelteKit. The property is also not necessary anymore because the Vite and Svelte configurations are loaded automatically in Storybook 7.0. +See [documentation](https://storybook.js.org/docs/8.0/get-started/sveltekit?renderer=svelte) for installation instructions, usage examples, APIs, and more. ## Acknowledgements diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json index 2acf401c3f24..d9b9add4d64c 100644 --- a/code/frameworks/sveltekit/package.json +++ b/code/frameworks/sveltekit/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/sveltekit", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.2", "description": "Storybook for SvelteKit", "keywords": [ "storybook", diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json index 44297c5a4047..6e16a27e77f9 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.1.0-alpha.0", + "version": "8.1.0-alpha.2", "description": "Storybook for Vue3 and Vite: Develop Vue3 components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/vue3-webpack5/README.md b/code/frameworks/vue3-webpack5/README.md index 2e365a8a7f8e..79644c76e821 100644 --- a/code/frameworks/vue3-webpack5/README.md +++ b/code/frameworks/vue3-webpack5/README.md @@ -1,44 +1,3 @@ # Storybook for Vue 3 and Webpack -Storybook for Vue 3 is a UI development environment for your Vue 3 components. -With it, you can visualize different states of your UI components and develop them interactively. - -![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/main/media/storybook-intro.gif) - -Storybook runs outside of your app. -So you can develop UI components in isolation without worrying about app specific dependencies and requirements. - -## Getting Started - -```sh -cd my-vue3-app -npx storybook@latest init -``` - -For more information visit: [storybook.js.org](https://storybook.js.org) - ---- - -Storybook also comes with a lot of [addons](https://storybook.js.org/addons) and a great API to customize as you wish. -You can also build a [static version](https://storybook.js.org/docs/sharing/publish-storybook) of your Storybook and deploy it anywhere you want. - -## Extending the Vue application - -Storybook creates a [Vue 3 application](https://vuejs.org/api/application.html#application-api) for your component preview. -When using global custom components (`app.component`), directives (`app.directive`), extensions (`app.use`), or other application methods, you will need to configure those in the `./storybook/preview.js` file. - -Therefore, Storybook provides you with a `setup` function exported from this package, which receives as a callback your Storybook instance, which you can interact with and add your custom configuration. - -```js -// .storybook/preview.js - -import { setup } from '@storybook/vue3'; - -setup((app) => { - app.use(MyPlugin); - app.component('my-component', MyComponent); - app.mixin({ - /* My mixin */ - }); -}); -``` +See [documentation](https://storybook.js.org/docs/8.0/get-started/vue3-webpack5?renderer=vue) for installation instructions, usage examples, APIs, and more. diff --git a/code/frameworks/vue3-webpack5/package.json b/code/frameworks/vue3-webpack5/package.json index 094fb5103f2d..18d24a887cf3 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.1.0-alpha.0", + "version": "8.1.0-alpha.2", "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/web-components-vite/README.md b/code/frameworks/web-components-vite/README.md index 9c68eca98041..af1a9ffaa853 100644 --- a/code/frameworks/web-components-vite/README.md +++ b/code/frameworks/web-components-vite/README.md @@ -1 +1,3 @@ -# Storybook for Web components +# Storybook for Web components & Vite + +See [documentation](https://storybook.js.org/docs/8.0/get-started/web-components-vite?renderer=web-components) for installation instructions, usage examples, APIs, and more. diff --git a/code/frameworks/web-components-vite/package.json b/code/frameworks/web-components-vite/package.json index cbe4ffdc247d..fd88e3065c0e 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.1.0-alpha.0", + "version": "8.1.0-alpha.2", "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/README.md b/code/frameworks/web-components-webpack5/README.md index 4562b5dc35ee..d9ee9b9fd385 100644 --- a/code/frameworks/web-components-webpack5/README.md +++ b/code/frameworks/web-components-webpack5/README.md @@ -1,71 +1,3 @@ -# Storybook for web-components +# Storybook for Web components & Webpack ---- - -Storybook for web-components is a UI development environment for your plain web-component snippets. -With it, you can visualize different states of your UI components and develop them interactively. - -![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/main/media/storybook-intro.gif) - -Storybook runs outside of your app. -So you can develop UI components in isolation without worrying about app specific dependencies and requirements. - -## Getting Started - -```sh -cd my-app -npx storybook@latest init -t web_components -``` - -For more information visit: [storybook.js.org](https://storybook.js.org) - ---- - -Storybook also comes with a lot of [addons](https://storybook.js.org/addons) and a great API to customize as you wish. -You can also build a [static version](https://storybook.js.org/docs/web-components/sharing/publish-storybook) of your storybook and deploy it anywhere you want. - -# Hot Module Reloading (HMR) - -As web components register on a global registry which only accepts a certain name/class once it can lead to errors when using classical HMR. There are ideas on how to archive HMR with a static registry but there is no proven solution yet. Therefore the best approach for now is to do full page reloads. If you keep your stories to specific states of components (which we would recommend anyways) this usually means it is fast. - -# Setup es6/7 dependencies - -By default storybook only works with precompiled ES5 code but as most web components themselves and their libs are distributed as ES2017 you will need to manually mark those packages as "needs transpilation". - -For example if you have a library called `my-library` which is in ES2017 then you can add it like so - -```js -// .storybook/main.js - -export default { - webpackFinal: async (config) => { - // find web-components rule for extra transpilation - const webComponentsRule = config.module.rules.find( - (rule) => rule.use && rule.use.options && rule.use.options.babelrc === false - ); - // add your own `my-library` - webComponentsRule.test.push(new RegExp(`node_modules(\\/|\\\\)my-library(.*)\\.js$`)); - - return config; - }, -}; -``` - -By default the following folders are included - -- `src/*.js` -- `packages/*/src/*.js` -- `node_modules/lit-html/*.js` -- `node_modules/lit-element/*.js` -- `node_modules/@open-wc/*.js` -- `node_modules/@polymer/*.js` -- `node_modules/@vaadin/*.js` - -As you can see the `src` folder is also included. -The reason for that is as it has some extra configuration to allow for example `import.meta`. -If you use a different folder you will need to make sure webpack/babel can handle it. - -# FAQ - -- While working on my component I get the error `Failed to execute 'define' on 'CustomElementRegistry': the name "..." has already been used with this registry` - => please see Setup page reload via HMR +See [documentation](https://storybook.js.org/docs/8.0/get-started/web-components-webpack5?renderer=web-components) for installation instructions, usage examples, APIs, and more. diff --git a/code/frameworks/web-components-webpack5/package.json b/code/frameworks/web-components-webpack5/package.json index 866ab3d35e5d..bc6f2203394d 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.1.0-alpha.0", + "version": "8.1.0-alpha.2", "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.", "keywords": [ "lit", diff --git a/code/lib/channels/package.json b/code/lib/channels/package.json index 1f583dc9865d..71dd7ba71571 100644 --- a/code/lib/channels/package.json +++ b/code/lib/channels/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channels", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.2", "description": "", "keywords": [ "storybook" diff --git a/code/lib/cli-sb/package.json b/code/lib/cli-sb/package.json index e707547191dd..c892bf210a83 100644 --- a/code/lib/cli-sb/package.json +++ b/code/lib/cli-sb/package.json @@ -1,6 +1,6 @@ { "name": "sb", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.2", "description": "Storybook CLI", "keywords": [ "storybook" diff --git a/code/lib/cli-storybook/package.json b/code/lib/cli-storybook/package.json index 3eb1547fccc0..6c2b0b5139ed 100644 --- a/code/lib/cli-storybook/package.json +++ b/code/lib/cli-storybook/package.json @@ -1,6 +1,6 @@ { "name": "storybook", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.2", "description": "Storybook CLI", "keywords": [ "storybook" diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json index 01d064068c60..0e589f1c3844 100644 --- a/code/lib/cli/package.json +++ b/code/lib/cli/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/cli", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.2", "description": "Storybook's CLI - install, dev, build, upgrade, and more", "keywords": [ "cli", diff --git a/code/lib/cli/src/automigrate/fixes/upgrade-storybook-related-dependencies.test.ts b/code/lib/cli/src/automigrate/fixes/upgrade-storybook-related-dependencies.test.ts index 0c16309647bd..7a8beeba0f76 100644 --- a/code/lib/cli/src/automigrate/fixes/upgrade-storybook-related-dependencies.test.ts +++ b/code/lib/cli/src/automigrate/fixes/upgrade-storybook-related-dependencies.test.ts @@ -52,7 +52,7 @@ describe('upgrade-storybook-related-dependencies fix', () => { { packageName: 'storybook', packageVersion: '8.0.0', - availableUpgrade: undefined, + availableUpgrade: '8.0.0', hasIncompatibleDependencies: true, }, ]; @@ -60,14 +60,18 @@ describe('upgrade-storybook-related-dependencies fix', () => { await expect( check({ packageManager: { - getAllDependencies: async () => ({ - '@chromatic-com/storybook': '1.2.9', - '@storybook/jest': '0.2.3', - '@storybook/preset-create-react-app': '3.2.0', - storybook: '8.0.0', - }), + getAllDependencies: async () => + analyzedPackages.reduce( + (acc, { packageName, packageVersion }) => { + acc[packageName] = packageVersion; + return acc; + }, + {} as Record + ), latestVersion: async (pkgName) => analyzedPackages.find((pkg) => pkg.packageName === pkgName)?.availableUpgrade || '', + getInstalledVersion: async (pkgName) => + analyzedPackages.find((pkg) => pkg.packageName === pkgName)?.packageVersion || null, }, }) ).resolves.toMatchInlineSnapshot(` diff --git a/code/lib/cli/src/automigrate/fixes/upgrade-storybook-related-dependencies.ts b/code/lib/cli/src/automigrate/fixes/upgrade-storybook-related-dependencies.ts index 5614b7e35ad0..c5a9d4218bb5 100644 --- a/code/lib/cli/src/automigrate/fixes/upgrade-storybook-related-dependencies.ts +++ b/code/lib/cli/src/automigrate/fixes/upgrade-storybook-related-dependencies.ts @@ -1,6 +1,6 @@ import { dedent } from 'ts-dedent'; import { cyan, yellow } from 'chalk'; -import { valid, coerce } from 'semver'; +import { gt } from 'semver'; import type { JsPackageManager } from '@storybook/core-common'; import { isCorePackage } from '@storybook/core-common'; import type { Fix } from '../types'; @@ -21,24 +21,14 @@ async function getLatestVersions( packages: [string, string][] ): Promise { return Promise.all( - packages.map(async ([packageName, beforeVersion]) => ({ + packages.map(async ([packageName]) => ({ packageName, - beforeVersion: coerce(beforeVersion)?.toString() || null, + beforeVersion: await packageManager.getInstalledVersion(packageName).catch(() => null), afterVersion: await packageManager.latestVersion(packageName).catch(() => null), })) ); } -function isPackageUpgradable( - afterVersion: string, - packageName: string, - allDependencies: Record -) { - const installedVersion = coerce(allDependencies[packageName])?.toString(); - - return valid(afterVersion) && afterVersion !== installedVersion; -} - /** * Is the user upgrading to the `latest` version of Storybook? * Let's try to pull along some of the storybook related dependencies to `latest` as well! @@ -75,15 +65,13 @@ export const upgradeStorybookRelatedDependencies = { const packageVersions = await getLatestVersions(packageManager, uniquePackages); - const upgradablePackages = packageVersions.filter( - ({ packageName, afterVersion, beforeVersion }) => { - if (beforeVersion === null || afterVersion === null) { - return false; - } - - return isPackageUpgradable(afterVersion, packageName, allDependencies); + const upgradablePackages = packageVersions.filter(({ afterVersion, beforeVersion }) => { + if (beforeVersion === null || afterVersion === null) { + return false; } - ); + + return gt(afterVersion, beforeVersion); + }); return upgradablePackages.length > 0 ? { upgradable: upgradablePackages } : null; }, diff --git a/code/lib/cli/src/automigrate/fixes/vite-config-file.ts b/code/lib/cli/src/automigrate/fixes/vite-config-file.ts index 9203b45f225f..e81637dc6cb2 100644 --- a/code/lib/cli/src/automigrate/fixes/vite-config-file.ts +++ b/code/lib/cli/src/automigrate/fixes/vite-config-file.ts @@ -97,12 +97,12 @@ export const viteConfigFile = { prompt({ existed, plugins }) { if (existed) { return dedent` - Since version 8.0.0, Storybook no longer ships with a Vite config build-in. + Since version 8.0.0, Storybook no longer ships with an in-built Vite config. We've detected you do have a Vite config, but you may be missing the following plugins in it. ${plugins.map((plugin) => ` - ${plugin}`).join('\n')} - If you do already have these plugins, you can ignore this message. + If you already have these plugins, you can ignore this message. You can find more information on how to do this here: https://storybook.js.org/docs/8.0/migration-guide/#missing-viteconfigjs-file @@ -111,7 +111,7 @@ export const viteConfigFile = { `; } return dedent` - Since version 8.0.0, Storybook no longer ships with a Vite config build-in. + Since version 8.0.0, Storybook no longer ships with an in-built Vite config. Please add a vite.config.js file to your project root. You can find more information on how to do this here: diff --git a/code/lib/cli/src/generate.ts b/code/lib/cli/src/generate.ts index 53c6259dc35b..6830aea3d1c2 100644 --- a/code/lib/cli/src/generate.ts +++ b/code/lib/cli/src/generate.ts @@ -59,7 +59,7 @@ command('init') .option('-b --builder ', 'Builder library') .option('-l --linkable', 'Prepare installation for link (contributor helper)') .action((options: CommandOptions) => { - initiate(options, pkg).catch(() => process.exit(1)); + initiate(options).catch(() => process.exit(1)); }); command('add ') @@ -155,7 +155,7 @@ command('sandbox [filterValue]') .option('-o --output ', 'Define an output directory') .option('--no-init', 'Whether to download a template without an initialized Storybook', false) .action((filterValue, options) => - sandbox({ filterValue, ...options }, pkg).catch((e) => { + sandbox({ filterValue, ...options }).catch((e) => { logger.error(e); process.exit(1); }) diff --git a/code/lib/cli/src/initiate.ts b/code/lib/cli/src/initiate.ts index b5504f2f751e..4d83666780b2 100644 --- a/code/lib/cli/src/initiate.ts +++ b/code/lib/cli/src/initiate.ts @@ -1,5 +1,4 @@ import { appendFile, readFile } from 'fs/promises'; -import type { PackageJson } from 'read-pkg-up'; import findUp from 'find-up'; import chalk from 'chalk'; import prompts from 'prompts'; @@ -228,10 +227,7 @@ const projectTypeInquirer = async ( process.exit(0); }; -export async function doInitiate( - options: CommandOptions, - pkg: PackageJson -): Promise< +export async function doInitiate(options: CommandOptions): Promise< | { shouldRunDev: true; projectType: ProjectType; @@ -242,7 +238,7 @@ export async function doInitiate( > { const { packageManager: pkgMgr } = options; - const packageManager = JsPackageManagerFactory.getPackageManager({ + let packageManager = JsPackageManagerFactory.getPackageManager({ force: pkgMgr, }); @@ -276,6 +272,13 @@ export async function doInitiate( // Check if the current directory is empty. if (options.force !== true && currentDirectoryIsEmpty(packageManager.type)) { + // Initializing Storybook in an empty directory with yarn1 + // will very likely fail due to different kind of hoisting issues + // which doesn't get fixed anymore in yarn1. + // We will fallback to npm in this case. + if (packageManager.type === 'yarn1') { + packageManager = JsPackageManagerFactory.getPackageManager({ force: 'npm' }); + } // Prompt the user to create a new project from our list. await scaffoldNewProject(packageManager.type, options); @@ -409,14 +412,14 @@ export async function doInitiate( }; } -export async function initiate(options: CommandOptions, pkg: PackageJson): Promise { +export async function initiate(options: CommandOptions): Promise { const initiateResult = await withTelemetry( 'init', { cliOptions: options, printError: (err) => !err.handled && logger.error(err), }, - () => doInitiate(options, pkg) + () => doInitiate(options) ); if (initiateResult?.shouldRunDev) { diff --git a/code/lib/cli/src/sandbox.ts b/code/lib/cli/src/sandbox.ts index d7d5892abd5b..d06c633c1a4d 100644 --- a/code/lib/cli/src/sandbox.ts +++ b/code/lib/cli/src/sandbox.ts @@ -10,7 +10,7 @@ import invariant from 'tiny-invariant'; import { lt, prerelease } from 'semver'; import type { Template, TemplateKey } from './sandbox-templates'; import { allTemplates as TEMPLATES } from './sandbox-templates'; -import type { PackageJson, PackageManagerName } from '@storybook/core-common'; +import type { PackageManagerName } from '@storybook/core-common'; import { JsPackageManagerFactory } from '@storybook/core-common'; import { versions } from '@storybook/core-common'; import { doInitiate } from './initiate'; @@ -28,10 +28,12 @@ type Choice = keyof typeof TEMPLATES; const toChoices = (c: Choice): prompts.Choice => ({ title: TEMPLATES[c].name, value: c }); -export const sandbox = async ( - { output: outputDirectory, filterValue, init, ...options }: SandboxOptions, - pkg: PackageJson -) => { +export const sandbox = async ({ + output: outputDirectory, + filterValue, + init, + ...options +}: SandboxOptions) => { // Either get a direct match when users pass a template id, or filter through all templates let selectedConfig: Template | undefined = TEMPLATES[filterValue as TemplateKey]; let templateId: Choice | null = selectedConfig ? (filterValue as TemplateKey) : null; @@ -222,12 +224,9 @@ export const sandbox = async ( const before = process.cwd(); process.chdir(templateDestination); // we run doInitiate, instead of initiate, to avoid sending this init event to telemetry, because it's not a real world project - await doInitiate( - { - ...options, - }, - pkg - ); + await doInitiate({ + ...options, + }); process.chdir(before); } } catch (err) { diff --git a/code/lib/client-logger/package.json b/code/lib/client-logger/package.json index 83926ddd07ac..e815a0f37e4d 100644 --- a/code/lib/client-logger/package.json +++ b/code/lib/client-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/client-logger", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.2", "description": "", "keywords": [ "storybook" diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index 290164c50f5f..f710303aff95 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/codemod", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.2", "description": "A collection of codemod scripts written with JSCodeshift", "keywords": [ "storybook" diff --git a/code/lib/core-common/package.json b/code/lib/core-common/package.json index b46b9a1de983..3443c8b4763f 100644 --- a/code/lib/core-common/package.json +++ b/code/lib/core-common/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-common", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.2", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/lib/core-common/src/js-package-manager/JsPackageManager.ts b/code/lib/core-common/src/js-package-manager/JsPackageManager.ts index 8523d7224eda..8f306850b032 100644 --- a/code/lib/core-common/src/js-package-manager/JsPackageManager.ts +++ b/code/lib/core-common/src/js-package-manager/JsPackageManager.ts @@ -17,6 +17,8 @@ const logger = console; export type PackageManagerName = 'npm' | 'yarn1' | 'yarn2' | 'pnpm'; +type StorybookPackage = keyof typeof storybookPackagesVersions; + /** * Extract package name and version from input * @@ -381,9 +383,8 @@ export abstract class JsPackageManager { public async getVersion(packageName: string, constraint?: string): Promise { let current: string | undefined; - if (/(@storybook|^sb$|^storybook$)/.test(packageName)) { - // @ts-expect-error (Converted from ts-ignore) - current = storybookPackagesVersions[packageName]; + if (packageName in storybookPackagesVersions) { + current = storybookPackagesVersions[packageName as StorybookPackage]; } let latest; @@ -535,6 +536,18 @@ export abstract class JsPackageManager { } } + /** + * Returns the installed (within node_modules or pnp zip) version of a specified package + */ + public async getInstalledVersion(packageName: string): Promise { + const installations = await this.findInstallations([packageName]); + if (!installations) { + return null; + } + + return Object.entries(installations.dependencies)[0]?.[1]?.[0].version || null; + } + public async executeCommand({ command, args = [], diff --git a/code/lib/core-common/src/versions.ts b/code/lib/core-common/src/versions.ts index 0109c9c2a8a3..f7862e1a90fc 100644 --- a/code/lib/core-common/src/versions.ts +++ b/code/lib/core-common/src/versions.ts @@ -1,83 +1,83 @@ // auto generated file, do not edit export default { - '@storybook/addon-a11y': '8.1.0-alpha.0', - '@storybook/addon-actions': '8.1.0-alpha.0', - '@storybook/addon-backgrounds': '8.1.0-alpha.0', - '@storybook/addon-controls': '8.1.0-alpha.0', - '@storybook/addon-docs': '8.1.0-alpha.0', - '@storybook/addon-essentials': '8.1.0-alpha.0', - '@storybook/addon-highlight': '8.1.0-alpha.0', - '@storybook/addon-interactions': '8.1.0-alpha.0', - '@storybook/addon-jest': '8.1.0-alpha.0', - '@storybook/addon-links': '8.1.0-alpha.0', - '@storybook/addon-mdx-gfm': '8.1.0-alpha.0', - '@storybook/addon-measure': '8.1.0-alpha.0', - '@storybook/addon-onboarding': '8.1.0-alpha.0', - '@storybook/addon-outline': '8.1.0-alpha.0', - '@storybook/addon-storysource': '8.1.0-alpha.0', - '@storybook/addon-themes': '8.1.0-alpha.0', - '@storybook/addon-toolbars': '8.1.0-alpha.0', - '@storybook/addon-viewport': '8.1.0-alpha.0', - '@storybook/angular': '8.1.0-alpha.0', - '@storybook/blocks': '8.1.0-alpha.0', - '@storybook/builder-manager': '8.1.0-alpha.0', - '@storybook/builder-vite': '8.1.0-alpha.0', - '@storybook/builder-webpack5': '8.1.0-alpha.0', - '@storybook/channels': '8.1.0-alpha.0', - '@storybook/cli': '8.1.0-alpha.0', - '@storybook/client-logger': '8.1.0-alpha.0', - '@storybook/codemod': '8.1.0-alpha.0', - '@storybook/components': '8.1.0-alpha.0', - '@storybook/core-common': '8.1.0-alpha.0', - '@storybook/core-events': '8.1.0-alpha.0', - '@storybook/core-server': '8.1.0-alpha.0', - '@storybook/core-webpack': '8.1.0-alpha.0', - '@storybook/csf-plugin': '8.1.0-alpha.0', - '@storybook/csf-tools': '8.1.0-alpha.0', - '@storybook/docs-tools': '8.1.0-alpha.0', - '@storybook/ember': '8.1.0-alpha.0', - '@storybook/html': '8.1.0-alpha.0', - '@storybook/html-vite': '8.1.0-alpha.0', - '@storybook/html-webpack5': '8.1.0-alpha.0', - '@storybook/instrumenter': '8.1.0-alpha.0', - '@storybook/manager': '8.1.0-alpha.0', - '@storybook/manager-api': '8.1.0-alpha.0', - '@storybook/nextjs': '8.1.0-alpha.0', - '@storybook/node-logger': '8.1.0-alpha.0', - '@storybook/preact': '8.1.0-alpha.0', - '@storybook/preact-vite': '8.1.0-alpha.0', - '@storybook/preact-webpack5': '8.1.0-alpha.0', - '@storybook/preset-create-react-app': '8.1.0-alpha.0', - '@storybook/preset-html-webpack': '8.1.0-alpha.0', - '@storybook/preset-preact-webpack': '8.1.0-alpha.0', - '@storybook/preset-react-webpack': '8.1.0-alpha.0', - '@storybook/preset-server-webpack': '8.1.0-alpha.0', - '@storybook/preset-svelte-webpack': '8.1.0-alpha.0', - '@storybook/preset-vue3-webpack': '8.1.0-alpha.0', - '@storybook/preview': '8.1.0-alpha.0', - '@storybook/preview-api': '8.1.0-alpha.0', - '@storybook/react': '8.1.0-alpha.0', - '@storybook/react-dom-shim': '8.1.0-alpha.0', - '@storybook/react-vite': '8.1.0-alpha.0', - '@storybook/react-webpack5': '8.1.0-alpha.0', - '@storybook/router': '8.1.0-alpha.0', - '@storybook/server': '8.1.0-alpha.0', - '@storybook/server-webpack5': '8.1.0-alpha.0', - '@storybook/source-loader': '8.1.0-alpha.0', - '@storybook/svelte': '8.1.0-alpha.0', - '@storybook/svelte-vite': '8.1.0-alpha.0', - '@storybook/svelte-webpack5': '8.1.0-alpha.0', - '@storybook/sveltekit': '8.1.0-alpha.0', - '@storybook/telemetry': '8.1.0-alpha.0', - '@storybook/test': '8.1.0-alpha.0', - '@storybook/theming': '8.1.0-alpha.0', - '@storybook/types': '8.1.0-alpha.0', - '@storybook/vue3': '8.1.0-alpha.0', - '@storybook/vue3-vite': '8.1.0-alpha.0', - '@storybook/vue3-webpack5': '8.1.0-alpha.0', - '@storybook/web-components': '8.1.0-alpha.0', - '@storybook/web-components-vite': '8.1.0-alpha.0', - '@storybook/web-components-webpack5': '8.1.0-alpha.0', - sb: '8.1.0-alpha.0', - storybook: '8.1.0-alpha.0', + '@storybook/addon-a11y': '8.1.0-alpha.2', + '@storybook/addon-actions': '8.1.0-alpha.2', + '@storybook/addon-backgrounds': '8.1.0-alpha.2', + '@storybook/addon-controls': '8.1.0-alpha.2', + '@storybook/addon-docs': '8.1.0-alpha.2', + '@storybook/addon-essentials': '8.1.0-alpha.2', + '@storybook/addon-highlight': '8.1.0-alpha.2', + '@storybook/addon-interactions': '8.1.0-alpha.2', + '@storybook/addon-jest': '8.1.0-alpha.2', + '@storybook/addon-links': '8.1.0-alpha.2', + '@storybook/addon-mdx-gfm': '8.1.0-alpha.2', + '@storybook/addon-measure': '8.1.0-alpha.2', + '@storybook/addon-onboarding': '8.1.0-alpha.2', + '@storybook/addon-outline': '8.1.0-alpha.2', + '@storybook/addon-storysource': '8.1.0-alpha.2', + '@storybook/addon-themes': '8.1.0-alpha.2', + '@storybook/addon-toolbars': '8.1.0-alpha.2', + '@storybook/addon-viewport': '8.1.0-alpha.2', + '@storybook/angular': '8.1.0-alpha.2', + '@storybook/blocks': '8.1.0-alpha.2', + '@storybook/builder-manager': '8.1.0-alpha.2', + '@storybook/builder-vite': '8.1.0-alpha.2', + '@storybook/builder-webpack5': '8.1.0-alpha.2', + '@storybook/channels': '8.1.0-alpha.2', + '@storybook/cli': '8.1.0-alpha.2', + '@storybook/client-logger': '8.1.0-alpha.2', + '@storybook/codemod': '8.1.0-alpha.2', + '@storybook/components': '8.1.0-alpha.2', + '@storybook/core-common': '8.1.0-alpha.2', + '@storybook/core-events': '8.1.0-alpha.2', + '@storybook/core-server': '8.1.0-alpha.2', + '@storybook/core-webpack': '8.1.0-alpha.2', + '@storybook/csf-plugin': '8.1.0-alpha.2', + '@storybook/csf-tools': '8.1.0-alpha.2', + '@storybook/docs-tools': '8.1.0-alpha.2', + '@storybook/ember': '8.1.0-alpha.2', + '@storybook/html': '8.1.0-alpha.2', + '@storybook/html-vite': '8.1.0-alpha.2', + '@storybook/html-webpack5': '8.1.0-alpha.2', + '@storybook/instrumenter': '8.1.0-alpha.2', + '@storybook/manager': '8.1.0-alpha.2', + '@storybook/manager-api': '8.1.0-alpha.2', + '@storybook/nextjs': '8.1.0-alpha.2', + '@storybook/node-logger': '8.1.0-alpha.2', + '@storybook/preact': '8.1.0-alpha.2', + '@storybook/preact-vite': '8.1.0-alpha.2', + '@storybook/preact-webpack5': '8.1.0-alpha.2', + '@storybook/preset-create-react-app': '8.1.0-alpha.2', + '@storybook/preset-html-webpack': '8.1.0-alpha.2', + '@storybook/preset-preact-webpack': '8.1.0-alpha.2', + '@storybook/preset-react-webpack': '8.1.0-alpha.2', + '@storybook/preset-server-webpack': '8.1.0-alpha.2', + '@storybook/preset-svelte-webpack': '8.1.0-alpha.2', + '@storybook/preset-vue3-webpack': '8.1.0-alpha.2', + '@storybook/preview': '8.1.0-alpha.2', + '@storybook/preview-api': '8.1.0-alpha.2', + '@storybook/react': '8.1.0-alpha.2', + '@storybook/react-dom-shim': '8.1.0-alpha.2', + '@storybook/react-vite': '8.1.0-alpha.2', + '@storybook/react-webpack5': '8.1.0-alpha.2', + '@storybook/router': '8.1.0-alpha.2', + '@storybook/server': '8.1.0-alpha.2', + '@storybook/server-webpack5': '8.1.0-alpha.2', + '@storybook/source-loader': '8.1.0-alpha.2', + '@storybook/svelte': '8.1.0-alpha.2', + '@storybook/svelte-vite': '8.1.0-alpha.2', + '@storybook/svelte-webpack5': '8.1.0-alpha.2', + '@storybook/sveltekit': '8.1.0-alpha.2', + '@storybook/telemetry': '8.1.0-alpha.2', + '@storybook/test': '8.1.0-alpha.2', + '@storybook/theming': '8.1.0-alpha.2', + '@storybook/types': '8.1.0-alpha.2', + '@storybook/vue3': '8.1.0-alpha.2', + '@storybook/vue3-vite': '8.1.0-alpha.2', + '@storybook/vue3-webpack5': '8.1.0-alpha.2', + '@storybook/web-components': '8.1.0-alpha.2', + '@storybook/web-components-vite': '8.1.0-alpha.2', + '@storybook/web-components-webpack5': '8.1.0-alpha.2', + sb: '8.1.0-alpha.2', + storybook: '8.1.0-alpha.2', }; diff --git a/code/lib/core-events/package.json b/code/lib/core-events/package.json index 2fda3e0eb626..34bdb12ff1df 100644 --- a/code/lib/core-events/package.json +++ b/code/lib/core-events/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-events", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.2", "description": "Event names used in storybook core", "keywords": [ "storybook" diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json index 2b44e68b8a22..116f04f82503 100644 --- a/code/lib/core-server/package.json +++ b/code/lib/core-server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-server", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.2", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/lib/core-webpack/package.json b/code/lib/core-webpack/package.json index d1e6142601ea..e09ad6f237b0 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.1.0-alpha.0", + "version": "8.1.0-alpha.2", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/lib/csf-plugin/package.json b/code/lib/csf-plugin/package.json index 1761eb435ae1..d1a1ca1e4b39 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.1.0-alpha.0", + "version": "8.1.0-alpha.2", "description": "Enrich CSF files via static analysis", "keywords": [ "storybook" diff --git a/code/lib/csf-tools/package.json b/code/lib/csf-tools/package.json index f8e58033aff3..286030fbeab5 100644 --- a/code/lib/csf-tools/package.json +++ b/code/lib/csf-tools/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/csf-tools", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.2", "description": "Parse and manipulate CSF and Storybook config files", "keywords": [ "storybook" diff --git a/code/lib/docs-tools/package.json b/code/lib/docs-tools/package.json index 8ecc609ee401..c9d20ed1589d 100644 --- a/code/lib/docs-tools/package.json +++ b/code/lib/docs-tools/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/docs-tools", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.2", "description": "Shared utility functions for frameworks to implement docs", "keywords": [ "storybook" diff --git a/code/lib/instrumenter/package.json b/code/lib/instrumenter/package.json index c411b7c9138c..5f85747fdd44 100644 --- a/code/lib/instrumenter/package.json +++ b/code/lib/instrumenter/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/instrumenter", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.2", "description": "", "keywords": [ "storybook" @@ -49,7 +49,7 @@ "@storybook/core-events": "workspace:*", "@storybook/global": "^5.0.0", "@storybook/preview-api": "workspace:*", - "@vitest/utils": "^0.34.6", + "@vitest/utils": "^1.3.1", "util": "^0.12.4" }, "devDependencies": { diff --git a/code/lib/manager-api/package.json b/code/lib/manager-api/package.json index 566511f21346..1e7c935d38c8 100644 --- a/code/lib/manager-api/package.json +++ b/code/lib/manager-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/manager-api", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.2", "description": "Core Storybook Manager API & Context", "keywords": [ "storybook" @@ -60,7 +60,6 @@ "ts-dedent": "^2.0.0" }, "devDependencies": { - "@jest/globals": "^29.3.1", "@types/lodash": "^4.14.167", "@types/qs": "^6", "@types/semver": "^7.3.4", diff --git a/code/lib/manager-api/src/modules/notifications.ts b/code/lib/manager-api/src/modules/notifications.ts index 83e95d3928ca..3358dd67a241 100644 --- a/code/lib/manager-api/src/modules/notifications.ts +++ b/code/lib/manager-api/src/modules/notifications.ts @@ -37,11 +37,13 @@ export const init: ModuleFn = ({ store }) => { clearNotification: (id) => { const { notifications } = store.getState(); - store.setState({ notifications: notifications.filter((n) => n.id !== id) }); - const notification = notifications.find((n) => n.id === id); - if (notification && notification.onClear) { - notification.onClear({ dismissed: false }); + + if (notification) { + store.setState({ notifications: notifications.filter((n) => n.id !== id) }); + if (notification.onClear) { + notification.onClear({ dismissed: false }); + } } }, }; diff --git a/code/lib/manager-api/src/version.ts b/code/lib/manager-api/src/version.ts index f89e3528d2df..3da3e62dd300 100644 --- a/code/lib/manager-api/src/version.ts +++ b/code/lib/manager-api/src/version.ts @@ -1 +1 @@ -export const version = '8.1.0-alpha.0'; +export const version = '8.1.0-alpha.2'; diff --git a/code/lib/node-logger/package.json b/code/lib/node-logger/package.json index 739cd0051874..48bb3b3c9e88 100644 --- a/code/lib/node-logger/package.json +++ b/code/lib/node-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/node-logger", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.2", "description": "", "keywords": [ "storybook" diff --git a/code/lib/preview-api/package.json b/code/lib/preview-api/package.json index 126be65d5e3a..435067df6dc2 100644 --- a/code/lib/preview-api/package.json +++ b/code/lib/preview-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preview-api", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.2", "description": "", "keywords": [ "storybook" @@ -60,7 +60,6 @@ "util-deprecate": "^1.0.2" }, "devDependencies": { - "@jest/globals": "^29.5.0", "@storybook/core-common": "workspace:*", "ansi-to-html": "^0.6.11", "slash": "^5.0.0" diff --git a/code/lib/preview-api/src/modules/preview-web/Preview.tsx b/code/lib/preview-api/src/modules/preview-web/Preview.tsx index af851edfc304..29ea71045949 100644 --- a/code/lib/preview-api/src/modules/preview-web/Preview.tsx +++ b/code/lib/preview-api/src/modules/preview-web/Preview.tsx @@ -100,9 +100,7 @@ export class Preview { get: (_, method) => { if (this.storyStoreValue) { deprecate('Accessing the Story Store is deprecated and will be removed in 9.0'); - - // @ts-expect-error I'm not sure if there's a way to keep TS happy here - return this.storyStoreValue[method]; + return this.storyStoreValue[method as keyof StoryStore]; } throw new StoryStoreAccessedBeforeInitializationError(); diff --git a/code/lib/preview-api/src/modules/store/csf/__mocks__/defaultExportAnnotations.mockfile.ts b/code/lib/preview-api/src/modules/store/csf/__mocks__/defaultExportAnnotations.mockfile.ts new file mode 100644 index 000000000000..6288e13ad9ce --- /dev/null +++ b/code/lib/preview-api/src/modules/store/csf/__mocks__/defaultExportAnnotations.mockfile.ts @@ -0,0 +1,7 @@ +export default { + parameters: { + fromAnnotations: { + asDefaultImport: true, + }, + }, +}; diff --git a/code/lib/preview-api/src/modules/store/csf/__mocks__/namedExportAnnotations.mockfile.ts b/code/lib/preview-api/src/modules/store/csf/__mocks__/namedExportAnnotations.mockfile.ts new file mode 100644 index 000000000000..53b427aceff5 --- /dev/null +++ b/code/lib/preview-api/src/modules/store/csf/__mocks__/namedExportAnnotations.mockfile.ts @@ -0,0 +1,5 @@ +export const parameters = { + fromAnnotations: { + asObjectImport: true, + }, +}; diff --git a/code/lib/preview-api/src/modules/store/csf/composeConfigs.test.ts b/code/lib/preview-api/src/modules/store/csf/composeConfigs.test.ts index 238885f44ba3..147038a5a8d2 100644 --- a/code/lib/preview-api/src/modules/store/csf/composeConfigs.test.ts +++ b/code/lib/preview-api/src/modules/store/csf/composeConfigs.test.ts @@ -176,6 +176,34 @@ describe('composeConfigs', () => { }); }); + it('allows single array to be written without array', () => { + expect( + composeConfigs([ + { + argsEnhancers: ['1', '2'], + argTypesEnhancers: ['1', '2'], + loaders: '1', + }, + { + argsEnhancers: '3', + argTypesEnhancers: '3', + loaders: ['2', '3'], + }, + ]) + ).toEqual({ + parameters: {}, + decorators: [], + args: {}, + argsEnhancers: ['1', '2', '3'], + argTypes: {}, + argTypesEnhancers: ['1', '2', '3'], + globals: {}, + globalTypes: {}, + loaders: ['1', '2', '3'], + runStep: expect.any(Function), + }); + }); + it('combines decorators in reverse file order', () => { expect( composeConfigs([ diff --git a/code/lib/preview-api/src/modules/store/csf/composeConfigs.ts b/code/lib/preview-api/src/modules/store/csf/composeConfigs.ts index 862f8cbcd501..e5785a6a3f01 100644 --- a/code/lib/preview-api/src/modules/store/csf/composeConfigs.ts +++ b/code/lib/preview-api/src/modules/store/csf/composeConfigs.ts @@ -3,6 +3,7 @@ import { global } from '@storybook/global'; import { combineParameters } from '../parameters'; import { composeStepRunners } from './stepRunners'; +import { normalizeArrays } from './normalizeArrays'; export function getField( moduleExportList: ModuleExports[], @@ -16,10 +17,10 @@ export function getArrayField( field: string, options: { reverseFileOrder?: boolean } = {} ): TFieldType[] { - return getField(moduleExportList, field).reduce( - (a: any, b: any) => (options.reverseFileOrder ? [...b, ...a] : [...a, ...b]), - [] - ); + return getField(moduleExportList, field).reduce((prev: any, cur: any) => { + const normalized = normalizeArrays(cur); + return options.reverseFileOrder ? [...normalized, ...prev] : [...prev, ...normalized]; + }, []); } export function getObjectField>( diff --git a/code/lib/preview-api/src/modules/store/csf/portable-stories.test.ts b/code/lib/preview-api/src/modules/store/csf/portable-stories.test.ts index dbca4640b05b..a3aa544c4827 100644 --- a/code/lib/preview-api/src/modules/store/csf/portable-stories.test.ts +++ b/code/lib/preview-api/src/modules/store/csf/portable-stories.test.ts @@ -7,6 +7,8 @@ import type { } from '@storybook/types'; import { composeStory, composeStories, setProjectAnnotations } from './portable-stories'; +import * as defaultExportAnnotations from './__mocks__/defaultExportAnnotations.mockfile'; +import * as namedExportAnnotations from './__mocks__/namedExportAnnotations.mockfile'; type StoriesModule = Store_CSFExports & Record; @@ -23,6 +25,18 @@ describe('composeStory', () => { }, }; + it('should compose project annotations in all module formats', () => { + setProjectAnnotations([defaultExportAnnotations, namedExportAnnotations]); + + const Story: Story = { + render: () => {}, + }; + + const composedStory = composeStory(Story, meta); + expect(composedStory.parameters.fromAnnotations.asObjectImport).toEqual(true); + expect(composedStory.parameters.fromAnnotations.asDefaultImport).toEqual(true); + }); + it('should return story with composed annotations from story, meta and project', () => { const decoratorFromProjectAnnotations = vi.fn((StoryFn) => StoryFn()); const decoratorFromStoryAnnotations = vi.fn((StoryFn) => StoryFn()); diff --git a/code/lib/preview-api/src/modules/store/csf/portable-stories.ts b/code/lib/preview-api/src/modules/store/csf/portable-stories.ts index bee091bfda4b..47465eacc8e5 100644 --- a/code/lib/preview-api/src/modules/store/csf/portable-stories.ts +++ b/code/lib/preview-api/src/modules/store/csf/portable-stories.ts @@ -5,7 +5,7 @@ import type { Args, ComponentAnnotations, LegacyStoryAnnotationsOrFn, - ProjectAnnotations, + NamedOrDefaultProjectAnnotations, ComposedStoryPlayFn, ComposeStoryFn, Store_CSFExports, @@ -14,6 +14,7 @@ import type { ComposedStoryFn, StrictArgTypes, PlayFunctionContext, + ProjectAnnotations, } from '@storybook/types'; import { HooksContext } from '../../../addons'; @@ -26,11 +27,22 @@ import { normalizeProjectAnnotations } from './normalizeProjectAnnotations'; let globalProjectAnnotations: ProjectAnnotations = {}; +function extractAnnotation( + annotation: NamedOrDefaultProjectAnnotations +) { + // support imports such as + // import * as annotations from '.storybook/preview' + // in both cases: 1 - the file has a default export; 2 - named exports only + return 'default' in annotation ? annotation.default : annotation; +} + export function setProjectAnnotations( - projectAnnotations: ProjectAnnotations | ProjectAnnotations[] + projectAnnotations: + | NamedOrDefaultProjectAnnotations + | NamedOrDefaultProjectAnnotations[] ) { const annotations = Array.isArray(projectAnnotations) ? projectAnnotations : [projectAnnotations]; - globalProjectAnnotations = composeConfigs(annotations); + globalProjectAnnotations = composeConfigs(annotations.map(extractAnnotation)); } export function composeStory( diff --git a/code/lib/preview/package.json b/code/lib/preview/package.json index 94821536bc4a..ea6424b413ec 100644 --- a/code/lib/preview/package.json +++ b/code/lib/preview/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preview", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.2", "description": "", "keywords": [ "storybook" diff --git a/code/lib/react-dom-shim/package.json b/code/lib/react-dom-shim/package.json index ab34b8084785..c309b132643f 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.1.0-alpha.0", + "version": "8.1.0-alpha.2", "description": "", "keywords": [ "storybook" diff --git a/code/lib/router/package.json b/code/lib/router/package.json index 767d40a74d23..e7f9f20364ff 100644 --- a/code/lib/router/package.json +++ b/code/lib/router/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/router", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.2", "description": "Core Storybook Router", "keywords": [ "storybook" diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json index 65ab30b64945..5fd602c8606a 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.1.0-alpha.0", + "version": "8.1.0-alpha.2", "description": "Source loader", "keywords": [ "lib", diff --git a/code/lib/telemetry/package.json b/code/lib/telemetry/package.json index f1f12541c50f..5fd68d7b45e9 100644 --- a/code/lib/telemetry/package.json +++ b/code/lib/telemetry/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/telemetry", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.2", "description": "Telemetry logging for crash reports and usage statistics", "keywords": [ "storybook" diff --git a/code/lib/test/package.json b/code/lib/test/package.json index 6717a6912906..b7c4c51ce1fe 100644 --- a/code/lib/test/package.json +++ b/code/lib/test/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/test", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.2", "description": "", "keywords": [ "storybook" @@ -47,12 +47,12 @@ "@storybook/core-events": "workspace:*", "@storybook/instrumenter": "workspace:*", "@storybook/preview-api": "workspace:*", - "@testing-library/dom": "^9.3.1", - "@testing-library/jest-dom": "^6.4.0", + "@testing-library/dom": "^9.3.4", + "@testing-library/jest-dom": "^6.4.2", "@testing-library/user-event": "^14.5.2", - "@vitest/expect": "1.1.3", - "@vitest/spy": "^1.1.3", - "chai": "^4.3.7", + "@vitest/expect": "1.3.1", + "@vitest/spy": "^1.3.1", + "chai": "^4.4.1", "util": "^0.12.4" }, "devDependencies": { diff --git a/code/lib/test/src/index.ts b/code/lib/test/src/index.ts index 600c68f1d3b4..7bd72666f341 100644 --- a/code/lib/test/src/index.ts +++ b/code/lib/test/src/index.ts @@ -36,6 +36,6 @@ const resetAllMocksLoader: LoaderFunction = ({ parameters }) => { } }; -// @ts-expect-error We are using this as a default Storybook loader, when the test package is used. This avoids the need for optional peer dependency workarounds. +// We are using this as a default Storybook loader, when the test package is used. This avoids the need for optional peer dependency workarounds. // eslint-disable-next-line no-underscore-dangle -global.__STORYBOOK_TEST_LOADERS__ = [resetAllMocksLoader]; +(global as any).__STORYBOOK_TEST_LOADERS__ = [resetAllMocksLoader]; diff --git a/code/lib/theming/package.json b/code/lib/theming/package.json index 1f65e8cb47b5..07fdd55f1117 100644 --- a/code/lib/theming/package.json +++ b/code/lib/theming/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/theming", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.2", "description": "Core Storybook Components", "keywords": [ "storybook" diff --git a/code/lib/types/package.json b/code/lib/types/package.json index 7441040beb30..628b3b01ed0d 100644 --- a/code/lib/types/package.json +++ b/code/lib/types/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/types", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.2", "description": "Core Storybook TS Types", "keywords": [ "storybook" diff --git a/code/lib/types/src/modules/composedStory.ts b/code/lib/types/src/modules/composedStory.ts index b0a7bff6c374..f670b1ef12a0 100644 --- a/code/lib/types/src/modules/composedStory.ts +++ b/code/lib/types/src/modules/composedStory.ts @@ -1,6 +1,12 @@ /* eslint-disable @typescript-eslint/naming-convention */ -import type { PlayFunction, Renderer, StoryId, StrictArgTypes } from '@storybook/csf'; +import type { + PlayFunction, + ProjectAnnotations, + Renderer, + StoryId, + StrictArgTypes, +} from '@storybook/csf'; import type { AnnotatedStoryFn, @@ -11,8 +17,6 @@ import type { StoryAnnotationsOrFn, } from './csf'; -import type { ProjectAnnotations } from './story'; - // TODO -- I think the name "CSFExports" overlaps here a bit with the types in csfFile.ts // we might want to reconcile @yannbf export type Store_CSFExports = { diff --git a/code/lib/types/src/modules/story.ts b/code/lib/types/src/modules/story.ts index cd4e9f1c9d16..f22d18ad7a3d 100644 --- a/code/lib/types/src/modules/story.ts +++ b/code/lib/types/src/modules/story.ts @@ -47,6 +47,11 @@ export type ProjectAnnotations = CsfProjectAnnotatio renderToDOM?: RenderToCanvas; }; +type NamedExportsOrDefault = TExport | { default: TExport }; + +export type NamedOrDefaultProjectAnnotations = + NamedExportsOrDefault>; + export type NormalizedProjectAnnotations = Omit< ProjectAnnotations, 'decorators' | 'loaders' diff --git a/code/package.json b/code/package.json index abf29dbd61a9..a5d9107bc87d 100644 --- a/code/package.json +++ b/code/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/root", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.2", "private": true, "description": "Storybook root", "homepage": "https://storybook.js.org/", @@ -48,8 +48,8 @@ "storybook:blocks:build": "STORYBOOK_BLOCKS_ONLY=true yarn storybook:ui:build", "storybook:blocks:chromatic": "STORYBOOK_BLOCKS_ONLY=true yarn storybook:ui:chromatic --project-token=${CHROMATIC_TOKEN_STORYBOOK_BLOCKS:-MISSING_PROJECT_TOKEN}", "storybook:ui": "NODE_OPTIONS=\"--preserve-symlinks --preserve-symlinks-main\" ./lib/cli/bin/index.js dev --port 6006 --config-dir ./ui/.storybook", - "storybook:ui:build": "NODE_OPTIONS=\"--preserve-symlinks --preserve-symlinks-main\" ./lib/cli/bin/index.js build --config-dir ./ui/.storybook", - "storybook:ui:chromatic": "yarn chromatic --build-script-name storybook:ui:build --storybook-config-dir ./ui/.storybook --storybook-base-dir ./code --project-token=${CHROMATIC_TOKEN_STORYBOOK_UI:-MISSING_PROJECT_TOKEN} --only-changed --exit-zero-on-changes --exit-once-uploaded", + "storybook:ui:build": "NODE_OPTIONS=\"--preserve-symlinks --preserve-symlinks-main\" ./lib/cli/bin/index.js build --config-dir ./ui/.storybook --webpack-stats-json", + "storybook:ui:chromatic": "../scripts/node_modules/.bin/chromatic --build-script-name storybook:ui:build --storybook-base-dir ./ --project-token=${CHROMATIC_TOKEN_STORYBOOK_UI:-MISSING_PROJECT_TOKEN} --only-changed --exit-zero-on-changes --exit-once-uploaded", "task": "yarn --cwd ../scripts task", "test": "NODE_OPTIONS=--max_old_space_size=4096 vitest run", "test:affected": "nx show projects --affected -t test | xargs -I # echo --project # | xargs yarn test", @@ -80,8 +80,9 @@ "resolutions": { "@playwright/test": "1.36.0", "@storybook/theming": "workspace:*", + "@testing-library/jest-dom/aria-query": "5.1.3", "@types/node": "^18.0.0", - "@vitest/expect@1.1.3": "patch:@vitest/expect@npm%3A1.1.3#~/.yarn/patches/@vitest-expect-npm-1.1.3-2062bf533f.patch", + "@vitest/expect": "patch:@vitest/expect@npm%3A1.3.1#~/.yarn/patches/@vitest-expect-npm-1.3.1-973071a540.patch", "esbuild": "^0.20.1", "playwright": "1.36.0", "playwright-core": "1.36.0", @@ -89,6 +90,7 @@ "type-fest": "~2.19" }, "dependencies": { + "@chromatic-com/storybook": "^1.2.18", "@nx/eslint": "18.0.6", "@nx/vite": "18.0.6", "@nx/workspace": "18.0.6", @@ -174,7 +176,7 @@ "@storybook/web-components-vite": "workspace:*", "@storybook/web-components-webpack5": "workspace:*", "@testing-library/dom": "^7.29.4", - "@testing-library/jest-dom": "^6.1.4", + "@testing-library/jest-dom": "6.1.4", "@testing-library/react": "^14.0.0", "@testing-library/user-event": "^14.4.3", "@types/express": "^4.17.11", @@ -190,7 +192,6 @@ "@typescript-eslint/parser": "^6.18.1", "@vitejs/plugin-react": "^3.0.1", "@vitest/coverage-v8": "^1.2.2", - "chromatic": "7.1.0", "concurrently": "^5.3.0", "cross-env": "^7.0.3", "danger": "^11.2.6", @@ -225,13 +226,9 @@ "typescript": "^5.3.2", "util": "^0.12.4", "vite": "^4.0.0", - "vite-plugin-turbosnap": "^1.0.1", "vitest": "^1.2.2", "wait-on": "^7.0.1" }, - "devDependencies": { - "@chromaui/addon-visual-tests": "^0.0.124" - }, "dependenciesMeta": { "ejs": { "built": false diff --git a/code/presets/create-react-app/package.json b/code/presets/create-react-app/package.json index c4205df2cd82..4d33a0ae1f84 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.1.0-alpha.0", + "version": "8.1.0-alpha.2", "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 006e4420c607..f9ecf7e6dc68 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.1.0-alpha.0", + "version": "8.1.0-alpha.2", "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 41117bd1edc6..c4f8dab8d0bf 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.1.0-alpha.0", + "version": "8.1.0-alpha.2", "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 f047c7b46f4c..758a5ecd94d5 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.1.0-alpha.0", + "version": "8.1.0-alpha.2", "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 baee5080f344..60344d4ef408 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.1.0-alpha.0", + "version": "8.1.0-alpha.2", "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 a15e5e084c25..da22cc8797ba 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.1.0-alpha.0", + "version": "8.1.0-alpha.2", "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 c1f50f0d3365..9f07fe5d5054 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.1.0-alpha.0", + "version": "8.1.0-alpha.2", "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 c7cefb70c642..f0a5bd45caef 100644 --- a/code/renderers/html/package.json +++ b/code/renderers/html/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.2", "description": "Storybook HTML renderer", "keywords": [ "storybook" diff --git a/code/renderers/preact/package.json b/code/renderers/preact/package.json index fe1df6ad774b..26765ae38554 100644 --- a/code/renderers/preact/package.json +++ b/code/renderers/preact/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.2", "description": "Storybook Preact renderer", "keywords": [ "storybook" diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json index 6abc64587845..a73eb90118ce 100644 --- a/code/renderers/react/package.json +++ b/code/renderers/react/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.2", "description": "Storybook React renderer", "keywords": [ "storybook" diff --git a/code/renderers/react/src/portable-stories.ts b/code/renderers/react/src/portable-stories.ts index 5994dbc1e408..652e319b0998 100644 --- a/code/renderers/react/src/portable-stories.ts +++ b/code/renderers/react/src/portable-stories.ts @@ -5,10 +5,11 @@ import { } from '@storybook/preview-api'; import type { Args, - ProjectAnnotations, + NamedOrDefaultProjectAnnotations, StoryAnnotationsOrFn, Store_CSFExports, StoriesWithPartialProps, + ProjectAnnotations, } from '@storybook/types'; import * as defaultProjectAnnotations from './entry-preview'; @@ -28,17 +29,19 @@ import type { ReactRenderer } from './types'; * setProjectAnnotations(projectAnnotations); *``` * - * @param projectAnnotations - e.g. (import projectAnnotations from '../.storybook/preview') + * @param projectAnnotations - e.g. (import * as projectAnnotations from '../.storybook/preview') */ export function setProjectAnnotations( - projectAnnotations: ProjectAnnotations | ProjectAnnotations[] + projectAnnotations: + | NamedOrDefaultProjectAnnotations + | NamedOrDefaultProjectAnnotations[] ) { originalSetProjectAnnotations(projectAnnotations); } /** * Function that will receive a story along with meta (e.g. a default export from a .stories file) - * and optionally projectAnnotations e.g. (import * from '../.storybook/preview) + * and optionally projectAnnotations e.g. (import * as projectAnnotations from '../.storybook/preview) * and will return a composed component that has all args/parameters/decorators/etc combined and applied to it. * * @@ -80,7 +83,7 @@ export function composeStory( /** * Function that will receive a stories import (e.g. `import * as stories from './Button.stories'`) - * and optionally projectAnnotations (e.g. `import * from '../.storybook/preview`) + * and optionally projectAnnotations (e.g. `import * as projectAnnotations from '../.storybook/preview`) * and will return an object containing all the stories passed, but now as a composed component that has all args/parameters/decorators/etc combined and applied to it. * * diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json index 2b0bf9a31e1f..86e00f325002 100644 --- a/code/renderers/server/package.json +++ b/code/renderers/server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.2", "description": "Storybook Server renderer", "keywords": [ "storybook" diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json index d7084c890c0c..34f6bf800137 100644 --- a/code/renderers/svelte/package.json +++ b/code/renderers/svelte/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.2", "description": "Storybook Svelte renderer", "keywords": [ "storybook" diff --git a/code/renderers/vue3/package.json b/code/renderers/vue3/package.json index 875b5742a5f8..56434484dd96 100644 --- a/code/renderers/vue3/package.json +++ b/code/renderers/vue3/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.2", "description": "Storybook Vue 3 renderer", "keywords": [ "storybook" diff --git a/code/renderers/vue3/src/docs/sourceDecorator.ts b/code/renderers/vue3/src/docs/sourceDecorator.ts index 797e7a648d9a..525cfbbfd281 100644 --- a/code/renderers/vue3/src/docs/sourceDecorator.ts +++ b/code/renderers/vue3/src/docs/sourceDecorator.ts @@ -15,7 +15,7 @@ import type { import { baseParse } from '@vue/compiler-core'; import type { ConcreteComponent, FunctionalComponent, VNode } from 'vue'; import { h, isVNode, watch } from 'vue'; -import { kebabCase } from 'lodash'; +import kebabCase from 'lodash/kebabCase'; import { attributeSource, htmlEventAttributeToVueEventAttribute, diff --git a/code/renderers/vue3/src/portable-stories.ts b/code/renderers/vue3/src/portable-stories.ts index dca738d205bf..043f15ff46b3 100644 --- a/code/renderers/vue3/src/portable-stories.ts +++ b/code/renderers/vue3/src/portable-stories.ts @@ -5,6 +5,7 @@ import { } from '@storybook/preview-api'; import type { Args, + NamedOrDefaultProjectAnnotations, ProjectAnnotations, StoryAnnotationsOrFn, Store_CSFExports, @@ -32,7 +33,9 @@ import type { VueRenderer } from './types'; * @param projectAnnotations - e.g. (import projectAnnotations from '../.storybook/preview') */ export function setProjectAnnotations( - projectAnnotations: ProjectAnnotations | ProjectAnnotations[] + projectAnnotations: + | NamedOrDefaultProjectAnnotations + | NamedOrDefaultProjectAnnotations[] ) { originalSetProjectAnnotations(projectAnnotations); } diff --git a/code/renderers/web-components/package.json b/code/renderers/web-components/package.json index 73fe293ad3e3..328c0ad719c4 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.1.0-alpha.0", + "version": "8.1.0-alpha.2", "description": "Storybook web-components renderer", "keywords": [ "lit", diff --git a/code/ui/.storybook/isChromatic.ts b/code/ui/.storybook/isChromatic.ts new file mode 100644 index 000000000000..244058b2fabf --- /dev/null +++ b/code/ui/.storybook/isChromatic.ts @@ -0,0 +1,8 @@ +export function isChromatic(windowArg?: any) { + const windowToCheck = windowArg || (typeof window !== 'undefined' && window); + return !!( + windowToCheck && + (windowToCheck.navigator.userAgent.match(/Chromatic/) || + windowToCheck.location.href.match(/chromatic=true/)) + ); +} diff --git a/code/ui/.storybook/main.ts b/code/ui/.storybook/main.ts index 3defc0046331..dd01824a38e8 100644 --- a/code/ui/.storybook/main.ts +++ b/code/ui/.storybook/main.ts @@ -1,5 +1,4 @@ import path from 'path'; -import pluginTurbosnap from 'vite-plugin-turbosnap'; // eslint-disable-next-line @typescript-eslint/no-restricted-imports import { mergeConfig } from 'vite'; import type { StorybookConfig } from '../../frameworks/react-vite'; @@ -53,7 +52,7 @@ const config: StorybookConfig = { '@storybook/addon-interactions', '@storybook/addon-storysource', '@storybook/addon-designs', - '@chromaui/addon-visual-tests', + '@chromatic-com/storybook', ], build: { test: { @@ -79,11 +78,6 @@ const config: StorybookConfig = { : {}), }, }, - plugins: [ - configType === 'PRODUCTION' - ? pluginTurbosnap({ rootDir: path.resolve(__dirname, '../..') }) - : [], - ], optimizeDeps: { force: true }, build: { // disable sourcemaps in CI to not run out of memory diff --git a/code/ui/.storybook/preview.tsx b/code/ui/.storybook/preview.tsx index 34d955269f75..5a5ed1a7ad75 100644 --- a/code/ui/.storybook/preview.tsx +++ b/code/ui/.storybook/preview.tsx @@ -1,6 +1,6 @@ import { global } from '@storybook/global'; import React, { Fragment, useEffect } from 'react'; -import isChromatic from 'chromatic/isChromatic'; +import { isChromatic } from './isChromatic'; import { Global, ThemeProvider, diff --git a/code/ui/blocks/package.json b/code/ui/blocks/package.json index c32ad8074761..bb3e181853ea 100644 --- a/code/ui/blocks/package.json +++ b/code/ui/blocks/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/blocks", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.2", "description": "Storybook Doc Blocks", "keywords": [ "storybook" diff --git a/code/ui/blocks/src/blocks/ArgTypes.tsx b/code/ui/blocks/src/blocks/ArgTypes.tsx index 7fe3cf8a66c9..fc64e7ba16e1 100644 --- a/code/ui/blocks/src/blocks/ArgTypes.tsx +++ b/code/ui/blocks/src/blocks/ArgTypes.tsx @@ -7,7 +7,6 @@ import { filterArgTypes } from '@storybook/preview-api'; import type { ArgTypesExtractor } from '@storybook/docs-tools'; import React from 'react'; -import { mapValues } from 'lodash'; import type { SortType } from '../components'; import { ArgsTable as PureArgsTable, ArgsTableError, TabbedArgsTable } from '../components'; import { useOf } from './useOf'; @@ -83,10 +82,15 @@ export const ArgTypes: FC = (props) => { } const mainComponentName = getComponentName(component); - const subcomponentTabs = mapValues(subcomponents, (comp) => ({ - rows: filterArgTypes(extractComponentArgTypes(comp, parameters), include, exclude), - sort, - })); + const subcomponentTabs = Object.fromEntries( + Object.entries(subcomponents).map(([key, comp]) => [ + key, + { + rows: filterArgTypes(extractComponentArgTypes(comp, parameters), include, exclude), + sort, + }, + ]) + ); const tabs = { [mainComponentName]: { rows: filteredArgTypes, sort }, ...subcomponentTabs, diff --git a/code/ui/blocks/src/blocks/Controls.tsx b/code/ui/blocks/src/blocks/Controls.tsx index f47194033f1d..4e3ea828e289 100644 --- a/code/ui/blocks/src/blocks/Controls.tsx +++ b/code/ui/blocks/src/blocks/Controls.tsx @@ -7,7 +7,6 @@ import { filterArgTypes } from '@storybook/preview-api'; import type { PropDescriptor } from '@storybook/preview-api'; import type { ArgTypesExtractor } from '@storybook/docs-tools'; -import { mapValues } from 'lodash'; import type { SortType } from '../components'; import { ArgsTable as PureArgsTable, ArgsTableError, TabbedArgsTable } from '../components'; import { DocsContext } from './DocsContext'; @@ -75,10 +74,15 @@ export const Controls: FC = (props) => { } const mainComponentName = getComponentName(component); - const subcomponentTabs = mapValues(subcomponents, (comp) => ({ - rows: filterArgTypes(extractComponentArgTypes(comp, parameters), include, exclude), - sort, - })); + const subcomponentTabs = Object.fromEntries( + Object.entries(subcomponents).map(([key, comp]) => [ + key, + { + rows: filterArgTypes(extractComponentArgTypes(comp, parameters), include, exclude), + sort, + }, + ]) + ); const tabs = { [mainComponentName]: { rows: filteredArgTypes, sort }, ...subcomponentTabs, diff --git a/code/ui/blocks/src/controls/Number.tsx b/code/ui/blocks/src/controls/Number.tsx index 946563ea0c7d..2362f2fa48e3 100644 --- a/code/ui/blocks/src/controls/Number.tsx +++ b/code/ui/blocks/src/controls/Number.tsx @@ -66,7 +66,7 @@ export const NumberControl: FC = ({ } }, [value]); - if (!forceVisible && value === undefined) { + if (value === undefined) { return (