diff --git a/.circleci/config.yml b/.circleci/config.yml index fd1e7376567..7899e920157 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 871971bac23..90f09cc9f0d 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 659765318fe..557a0331fe2 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 898d10ace80..07026c97fb8 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 eddb5dee1fe..a9ef5d65aff 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 e1eb20e97ad..84cebf0aee5 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 0b4163251bd..3cbf8f8b1fc 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 91be3acf6f9..f66258c0d83 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 bd9c892e331..cc88ce6182f 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 1418c69695f..29afdd8ce19 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 dbb4f498ab6..103bb8196fa 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 aec117765b1..3474586b1d3 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 561a9a61b89..2d6f1d834ec 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 9a1b74e203b..b2028a85b1f 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 73f80210685..2dc509c9a53 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 2f13f8e98a1..3daab0e6523 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 a647a8eb0d1..fab9e8aae1d 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 08ea5529d13..e1628ec59e9 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 d5982172273..1ef789220bb 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 3c6eaa0d625..74e561e9f36 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 3b9143837d7..bd5e7c1d304 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 b35c226de30..c667a4e101a 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 bae6a544048..4a5d8848e41 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 dbb88085b22..f39a3065e10 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 89f7ef115b5..5f8dd331935 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 bd511b8e0b5..7177f576cf1 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 686c684f829..4effdb357a7 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 51d8c09c5fc..651183a9df6 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 1985366f670..71616e30727 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 72726fb3726..807075ae94a 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 f8db2b4ea14..96f83f0b4b1 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 c7326a263ad..660ee804e65 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 a3599f8288e..2724c1b9450 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 ec4a1150617..b0b429dd7d8 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 92208b36158..eecdb09fb29 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 a31a2e91a37..aa5a0b24edb 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 1d0dd1b7610..a890bdc9f8d 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 1972fde8e8e..7d38b61cb74 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 31d47498ee4..92e78432229 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 01493ceba46..77130b818b6 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 9ffa620ac40..4b092e00a77 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 9c796b2f5b7..d1497db30bb 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 26bcfa5687c..373f427ec59 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 7c6e27ae25e..3a85be3262a 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 f3a10ee4210..e20925a884d 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 b8b67128ef2..b165b0164ba 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 51bdc48718a..e7fda5da9f4 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 da08584b762..ac8d8647ae4 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 3d5ceb3ba80..11aafe32b6c 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 6aa05a0c122..a7ef06bbb39 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 9090da47567..f95ec88b2fd 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 d490ff6af11..fa37e5b2e74 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 db4ed258f40..6ebda301a4f 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 0243fde57b2..8bb8789a879 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 2acf401c3f2..d9b9add4d64 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 44297c5a404..6e16a27e77f 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 2e365a8a7f8..79644c76e82 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 094fb5103f2..18d24a887cf 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 9c68eca9804..af1a9ffaa85 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 cbe4ffdc247..fd88e3065c0 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 4562b5dc35e..d9ee9b9fd38 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 866ab3d35e5..bc6f2203394 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 1f583dc9865..71dd7ba7157 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 e707547191d..c892bf210a8 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 3eb1547fccc..6c2b0b5139e 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 01d064068c6..0e589f1c384 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 0c16309647b..7a8beeba0f7 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 5614b7e35ad..c5a9d4218bb 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 9203b45f225..e81637dc6cb 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 53c6259dc35..6830aea3d1c 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 b5504f2f751..4d83666780b 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 d7d5892abd5..d06c633c1a4 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 83926ddd07a..e815a0f37e4 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 290164c50f5..f710303aff9 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 b46b9a1de98..3443c8b4763 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 8523d7224ed..8f306850b03 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 0109c9c2a8a..f7862e1a90f 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 2fda3e0eb62..34bdb12ff1d 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 2b44e68b8a2..116f04f8250 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 d1e6142601e..e09ad6f237b 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 1761eb435ae..d1a1ca1e4b3 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 f8e58033aff..286030fbeab 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 8ecc609ee40..c9d20ed1589 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 c411b7c9138..5f85747fdd4 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 566511f2134..1e7c935d38c 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 83e95d3928c..3358dd67a24 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 f89e3528d2d..3da3e62dd30 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 739cd005187..48bb3b3c9e8 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 126be65d5e3..435067df6dc 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 af851edfc30..29ea7104594 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 00000000000..6288e13ad9c --- /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 00000000000..53b427aceff --- /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 238885f44ba..147038a5a8d 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 862f8cbcd50..e5785a6a3f0 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 dbca4640b05..a3aa544c482 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 bee091bfda4..47465eacc8e 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 94821536bc4..ea6424b413e 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 ab34b808478..c309b132643 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 767d40a74d2..e7f9f20364f 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 65ab30b6494..5fd602c8606 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 f1f12541c50..5fd68d7b45e 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 6717a691290..b7c4c51ce1f 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 600c68f1d3b..7bd72666f34 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 1f65e8cb47b..07fdd55f111 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 7441040beb3..628b3b01ed0 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 b0a7bff6c37..f670b1ef12a 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 cd4e9f1c9d1..f22d18ad7a3 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 abf29dbd61a..a5d9107bc87 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 c4205df2cd8..4d33a0ae1f8 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 006e4420c60..f9ecf7e6dc6 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 41117bd1edc..c4f8dab8d0b 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 f047c7b46f4..758a5ecd94d 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 baee5080f34..60344d4ef40 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 a15e5e084c2..da22cc8797b 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 c1f50f0d336..9f07fe5d505 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 c7cefb70c64..f0a5bd45cae 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 fe1df6ad774..26765ae3855 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 6abc6458784..a73eb90118c 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 5994dbc1e40..652e319b099 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 2b0bf9a31e1..86e00f32500 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 d7084c890c0..34f6bf80013 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 875b5742a5f..56434484dd9 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 797e7a648d9..525cfbbfd28 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 dca738d205b..043f15ff46b 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 73fe293ad3e..328c0ad719c 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 00000000000..244058b2fab --- /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 3defc004633..dd01824a38e 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 34d955269f7..5a5ed1a7ad7 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 c32ad807476..bb3e181853e 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 7fe3cf8a66c..fc64e7ba16e 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 f47194033f1..4e3ea828e28 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 946563ea0c7..2362f2fa48e 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 (