diff --git a/.circleci/config.yml b/.circleci/config.yml index 617cdac42c28..2273bcc5bdf3 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -17,7 +17,7 @@ executors: default: 'small' working_directory: /tmp/storybook docker: - - image: cimg/node:16.20.0 + - image: cimg/node:18.18.0 environment: NODE_OPTIONS: --max_old_space_size=6144 resource_class: <> @@ -30,7 +30,7 @@ executors: default: 'small' working_directory: /tmp/storybook docker: - - image: cimg/node:16.20.0-browsers + - image: cimg/node:18.18.0-browsers environment: NODE_OPTIONS: --max_old_space_size=6144 resource_class: <> @@ -609,22 +609,22 @@ workflows: requires: - build - create-sandboxes: - parallelism: 34 + parallelism: 36 requires: - build # - smoke-test-sandboxes: # disabled for now # requires: # - create-sandboxes - build-sandboxes: - parallelism: 34 + parallelism: 36 requires: - create-sandboxes - chromatic-sandboxes: - parallelism: 31 + parallelism: 33 requires: - build-sandboxes - e2e-production: - parallelism: 31 + parallelism: 33 requires: - build-sandboxes - e2e-dev: @@ -632,7 +632,7 @@ workflows: requires: - create-sandboxes - test-runner-production: - parallelism: 31 + parallelism: 33 requires: - build-sandboxes # TODO: reenable once we find out the source of flakyness diff --git a/.gitattributes b/.gitattributes index 5b3c7a66024e..f3054f34dd73 100644 --- a/.gitattributes +++ b/.gitattributes @@ -1 +1,2 @@ /**/.yarn/** linguist-generated +* -text \ No newline at end of file diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml index cbf53f0d9ac1..871971bac231 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.yml +++ b/.github/ISSUE_TEMPLATE/bug_report.yml @@ -30,7 +30,7 @@ body: attributes: label: System description: Please paste the results of `npx storybook@latest info` here. - render: shell + render: bash - type: textarea id: context attributes: diff --git a/.github/workflows/generate-sandboxes-main.yml b/.github/workflows/generate-sandboxes-main.yml index 474542495848..7d9328578493 100644 --- a/.github/workflows/generate-sandboxes-main.yml +++ b/.github/workflows/generate-sandboxes-main.yml @@ -19,12 +19,12 @@ jobs: YARN_ENABLE_IMMUTABLE_INSTALLS: false CLEANUP_SANDBOX_NODE_MODULES: true steps: - - uses: actions/setup-node@v3 - with: - node-version: 16 - uses: actions/checkout@v3 with: ref: main + - uses: actions/setup-node@v3 + with: + node-version-file: '.nvmrc' - name: Setup git user run: | git config --global user.name "Storybook Bot" @@ -43,7 +43,7 @@ jobs: run: yarn wait-on http://localhost:6001 working-directory: ./code - name: Generate - run: yarn generate-sandboxes --local-registry --exclude=angular-cli/prerelease + run: yarn generate-sandboxes --local-registry working-directory: ./code - name: Publish run: yarn publish-sandboxes --remote=https://storybook-bot:${{ secrets.PAT_STORYBOOK_BOT}}@github.com/storybookjs/sandboxes.git --push --branch=main diff --git a/.github/workflows/generate-sandboxes-next.yml b/.github/workflows/generate-sandboxes-next.yml index c20f5491ef30..8a28c4cbb23a 100644 --- a/.github/workflows/generate-sandboxes-next.yml +++ b/.github/workflows/generate-sandboxes-next.yml @@ -19,12 +19,12 @@ jobs: YARN_ENABLE_IMMUTABLE_INSTALLS: false CLEANUP_SANDBOX_NODE_MODULES: true steps: - - uses: actions/setup-node@v3 - with: - node-version: 16 - uses: actions/checkout@v3 with: ref: next + - uses: actions/setup-node@v3 + with: + node-version-file: '.nvmrc' - name: Setup git user run: | git config --global user.name "Storybook Bot" @@ -43,7 +43,7 @@ jobs: run: yarn wait-on http://localhost:6001 working-directory: ./code - name: Generate - run: yarn generate-sandboxes --local-registry --exclude=angular-cli/prerelease --debug + run: yarn generate-sandboxes --local-registry --debug working-directory: ./code - name: Publish run: yarn publish-sandboxes --remote=https://storybook-bot:${{ secrets.PAT_STORYBOOK_BOT}}@github.com/storybookjs/sandboxes.git --push --branch=next diff --git a/.github/workflows/prepare-prerelease.yml b/.github/workflows/prepare-non-patch-release.yml similarity index 76% rename from .github/workflows/prepare-prerelease.yml rename to .github/workflows/prepare-non-patch-release.yml index e68a7e1ef63a..fe7326f00c16 100644 --- a/.github/workflows/prepare-prerelease.yml +++ b/.github/workflows/prepare-non-patch-release.yml @@ -1,5 +1,5 @@ -name: Prepare prerelease PR -run-name: Prepare prerelease PR, triggered by ${{ github.triggering_actor }} +name: Prepare non-patch PR +run-name: Prepare non-patch PR, triggered by ${{ github.triggering_actor }} on: push: @@ -34,8 +34,8 @@ concurrency: cancel-in-progress: true jobs: - prepare-prerelease-pull-request: - name: Prepare prerelease pull request + prepare-non-patch-pull-request: + name: Prepare non-patch pull request runs-on: ubuntu-latest environment: release defaults: @@ -93,13 +93,14 @@ jobs: run: git fetch --tags origin - name: Check for unreleased changes + if: github.event_name != 'workflow_dispatch' id: unreleased-changes env: GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} run: yarn release:unreleased-changes-exists - name: Cancel when no release necessary - if: steps.unreleased-changes.outputs.has-changes-to-release == 'false' + if: steps.unreleased-changes.outputs.has-changes-to-release == 'false' && github.event_name != 'workflow_dispatch' env: GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} # From https://stackoverflow.com/a/75809743 @@ -112,21 +113,37 @@ jobs: run: | yarn release:version --deferred --release-type ${{ inputs.release-type || 'prerelease' }} ${{ inputs.pre-id && format('{0} {1}', '--pre-id', inputs.pre-id) || '' }} --verbose + - name: Check release vs prerelease + id: is-prerelease + run: yarn release:is-prerelease ${{ steps.bump-version.outputs.next-version }} --verbose + - name: Write changelog env: GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} run: | yarn release:write-changelog ${{ steps.bump-version.outputs.next-version }} --verbose - - name: 'Commit changes to branch: version-prerelease-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' git config --global user.email '32066757+storybook-bot@users.noreply.github.com' - git checkout -b version-prerelease-from-${{ steps.bump-version.outputs.current-version }} + git checkout -b version-non-patch-from-${{ steps.bump-version.outputs.current-version }} + git add . + git commit -m "Write changelog for ${{ steps.bump-version.outputs.next-version }} [skip ci]" || true + git push --force origin version-non-patch-from-${{ steps.bump-version.outputs.current-version }} + + - name: Resolve merge-conflicts with base branch + if: steps.is-prerelease.outputs.prerelease == 'false' + working-directory: . + env: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + run: | + git config pull.rebase false + git pull --no-commit --no-ff origin latest-release || true + git checkout --ours . git add . - git commit -m "Write changelog for ${{ steps.bump-version.outputs.next-version }}" || true - git push --force origin version-prerelease-from-${{ steps.bump-version.outputs.current-version }} + git commit --no-verify -m "Merge latest-release into version-non-patch-from-${{ steps.bump-version.outputs.current-version }} with conflicts resolved to ours [skip ci]" - name: Generate PR description id: description @@ -144,14 +161,15 @@ jobs: gh pr edit \ --repo "${{github.repository }}" \ --title "Release: $CAPITALIZED_RELEASE_TYPE ${{ inputs.pre-id && format('{0} ', inputs.pre-id) }}${{ steps.bump-version.outputs.next-version }}" \ + --base ${{ steps.is-prerelease.outputs.prerelease == 'true' && 'next-release' || 'latest-release' }} \ --body "${{ steps.description.outputs.description }}" else gh pr create \ --repo "${{github.repository }}"\ --title "Release: $CAPITALIZED_RELEASE_TYPE ${{ inputs.pre-id && format('{0} ', inputs.pre-id) }}${{ steps.bump-version.outputs.next-version }}" \ --label "release" \ - --base next-release \ - --head version-prerelease-from-${{ steps.bump-version.outputs.current-version }} \ + --base ${{ steps.is-prerelease.outputs.prerelease == 'true' && 'next-release' || 'latest-release' }} \ + --head version-non-patch-from-${{ steps.bump-version.outputs.current-version }} \ --body "${{ steps.description.outputs.description }}" fi diff --git a/.github/workflows/prepare-patch-release.yml b/.github/workflows/prepare-patch-release.yml index e4f8e38df502..5cdc1ba44fcf 100644 --- a/.github/workflows/prepare-patch-release.yml +++ b/.github/workflows/prepare-patch-release.yml @@ -88,6 +88,15 @@ jobs: git config --global user.email '32066757+storybook-bot@users.noreply.github.com' yarn release:pick-patches + - name: Cancel when no patches to pick + if: steps.pick-patches.outputs.pr-count == '0' && steps.pick-patches.outputs.pr-count != null + env: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + # From https://stackoverflow.com/a/75809743 + run: | + gh run cancel ${{ github.run_id }} + gh run watch ${{ github.run_id }} + - name: Bump version deferred id: bump-version if: steps.unreleased-changes.outputs.has-changes-to-release == 'true' @@ -121,7 +130,7 @@ jobs: git config --global user.email '32066757+storybook-bot@users.noreply.github.com' git checkout -b version-patch-from-${{ steps.versions.outputs.current }} git add . - git commit -m "Write changelog for ${{ steps.versions.outputs.next }}" || true + git commit -m "Write changelog for ${{ steps.versions.outputs.next }} [skip ci]" || true git push --force origin version-patch-from-${{ steps.versions.outputs.current }} - name: Generate PR description diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index 863b4e9ae7e2..fc347cfe32ef 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -62,8 +62,12 @@ jobs: run: | yarn install + - name: Cancel all release preparation runs + env: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + run: yarn release:cancel-preparation-runs + - name: Apply deferred version bump and commit - id: version-bump working-directory: . run: | CURRENT_VERSION=$(cat ./code/package.json | jq '.version') @@ -94,7 +98,7 @@ jobs: - name: Check release vs prerelease if: steps.publish-needed.outputs.published == 'false' id: is-prerelease - run: yarn release:is-prerelease + run: yarn release:is-prerelease ${{ steps.version.outputs.current-version }} --verbose - name: Install code dependencies if: steps.publish-needed.outputs.published == 'false' @@ -122,12 +126,11 @@ jobs: run: git fetch --tags origin # when this is a patch release from main, label any patch PRs included in the release - # when this is a stable release from next, label ALL patch PRs found, as they will per definition be "patched" now - name: Label patch PRs as picked - if: github.ref_name == 'latest-release' || (steps.publish-needed.outputs.published == 'false' && steps.target.outputs.target == 'next' && !steps.is-prerelease.outputs.prerelease) + if: github.ref_name == 'latest-release' env: GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} - run: yarn release:label-patches ${{ steps.target.outputs.target == 'next' && '--all' || '' }} + run: yarn release:label-patches - name: Create GitHub Release if: steps.publish-needed.outputs.published == 'false' @@ -151,8 +154,20 @@ jobs: git merge ${{ github.ref_name }} git push origin ${{ steps.target.outputs.target }} + - name: Ensure `next` is a minor version ahead of `main` + if: steps.target.outputs.target == 'main' + run: | + git checkout next + git pull + + yarn release:ensure-next-ahead --main-version "${{ steps.version.outputs.current-version }}" + + git add .. + git commit -m "Bump next to be one minor ahead of main [skip ci]" + git push origin next + - name: Sync CHANGELOG.md from `main` to `next` - if: github.ref_name == 'latest-release' + if: steps.target.outputs.target == 'main' working-directory: . run: | git fetch origin next @@ -160,7 +175,7 @@ jobs: git pull git checkout origin/main ./CHANGELOG.md git add ./CHANGELOG.md - git commit -m "Update CHANGELOG.md for v${{ steps.version.outputs.current-version }} [skip ci]" + git commit -m "Update CHANGELOG.md for v${{ steps.version.outputs.current-version }} [skip ci]" || true git push origin next - name: Sync version JSONs from `next-release` to `main` @@ -176,10 +191,6 @@ jobs: git commit -m "Update $VERSION_FILE for v${{ steps.version.outputs.current-version }}" git push origin main - - name: Overwrite main with next - if: steps.target.outputs.target == 'next' && steps.is-prerelease.outputs.prerelease == 'false' - run: git push --force origin next:main - - name: Report job failure to Discord if: failure() env: diff --git a/.github/workflows/tests-unit.yml b/.github/workflows/tests-unit.yml index 6c355ec1714b..650d40d3ff10 100644 --- a/.github/workflows/tests-unit.yml +++ b/.github/workflows/tests-unit.yml @@ -9,19 +9,18 @@ on: jobs: build: - name: Core Unit Tests node-${{ matrix.node_version }}, ${{ matrix.os }} + name: Core Unit Tests, ${{ matrix.os }} strategy: fail-fast: false matrix: os: [windows-latest] - node_version: [16] runs-on: ${{ matrix.os }} steps: - uses: actions/checkout@v3 - - name: Set node version to ${{ matrix.node_version }} + - name: Set node version uses: actions/setup-node@v3 with: - node-version: ${{ matrix.node_version }} + node-version-file: '.nvmrc' - name: install and compile run: yarn task --task compile --start-from=auto --no-link - name: test diff --git a/.nvmrc b/.nvmrc index 59ea99ee63cb..4a58985bb483 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -16.20 +18.18 diff --git a/CHANGELOG.md b/CHANGELOG.md index b4400d25c0c7..a2d9d3343d3c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,52 @@ +## 7.5.0 + +Storybook 7.5 enhances your Storybook experience with several key updates: + + - 💃🏼 Now supports Lit 3.0 and Vite 5 + - 👻 storiesOf and storyStoreV6 officially deprecated + - 🔨 Fix Webpack5 build errors not being propagated + - 🀄 Support rename font import for Next.js + - ⬆️ Upgrade react-docgen to 6.0.x and improve argTypes + - ✨ Many Angular improvements such as introducing argsToTemplate , new schema debugging options, support for standalone directives, etc. +
+ + List of all updates + + + - Angular: Introduce argsToTemplate for property and event Bindings - [#24434](https://github.com/storybookjs/storybook/pull/24434), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! + - Angular: Add schema options (debugWebpack, webpackStatsJson, and more) - [#24388](https://github.com/storybookjs/storybook/pull/24388), thanks [@yannbf](https://github.com/yannbf)! + - Angular: Categorize legacy build options error - [#24014](https://github.com/storybookjs/storybook/pull/24014), thanks [@yannbf](https://github.com/yannbf)! + - Angular: Fix Angular 15 support and add zone.js v0.14.x support - [#24367](https://github.com/storybookjs/storybook/pull/24367), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! + - Angular: Allow loading standalone directives - [#24448](https://github.com/storybookjs/storybook/pull/24448), thanks [@osnoser1](https://github.com/osnoser1)! + - CLI: Inform the user how to dedupe and strip color from info command - [#24087](https://github.com/storybookjs/storybook/pull/24087), thanks [@kasperpeulen](https://github.com/kasperpeulen)! + - CLI: Add more information to storybook info command - [#24003](https://github.com/storybookjs/storybook/pull/24003), thanks [@JReinhold](https://github.com/JReinhold)! + - CLI: Change /Date$/ to /Dates$/i - [#24195](https://github.com/storybookjs/storybook/pull/24195), thanks [@arup1221](https://github.com/arup1221)! + - CLI: Improve sanitization logic in crash reports - [#24028](https://github.com/storybookjs/storybook/pull/24028), thanks [@yannbf](https://github.com/yannbf)! + - CLI: Remove random commas in storybook upgrade logs - [#22333](https://github.com/storybookjs/storybook/pull/22333), thanks [@joaonunomota](https://github.com/joaonunomota)! + - Controls: Fix select / multiselect when value contains multiple spaces - [#22334](https://github.com/storybookjs/storybook/pull/22334), thanks [@oxcened](https://github.com/oxcened)! + - Core: Add class name to Storybook error name - [#24371](https://github.com/storybookjs/storybook/pull/24371), thanks [@yannbf](https://github.com/yannbf)! + - Core: Deprecate storyStoreV6 (including storiesOf) and storyIndexers - [#23938](https://github.com/storybookjs/storybook/pull/23938), thanks [@JReinhold](https://github.com/JReinhold)! + - Doc Blocks: Add title to Meta prop types - [#23370](https://github.com/storybookjs/storybook/pull/23370), thanks [@iqbalcodes6602](https://github.com/iqbalcodes6602)! + - ManagerAPI: Fix bug with story redirection when URL has partial storyId - [#24345](https://github.com/storybookjs/storybook/pull/24345), thanks [@ndelangen](https://github.com/ndelangen)! + - NextJS: Support rename font import - [#24406](https://github.com/storybookjs/storybook/pull/24406), thanks [@yoshi2no](https://github.com/yoshi2no)! + - NextJS: Change babel plugins from proposal-... to transform-... - [#24290](https://github.com/storybookjs/storybook/pull/24290), thanks [@roottool](https://github.com/roottool)! + - NextJS: Fix default next image loader when src has params - [#24187](https://github.com/storybookjs/storybook/pull/24187), thanks [@json-betsec](https://github.com/json-betsec)! + - NextJS: Fix Image Context re-use via singleton - [#24146](https://github.com/storybookjs/storybook/pull/24146), thanks [@martinnabhan](https://github.com/martinnabhan)! + - NextJS: Improve support for Windows-style paths - [#23695](https://github.com/storybookjs/storybook/pull/23695), thanks [@T99](https://github.com/T99)! + - React: Upgrade `react-docgen` to `6.0.x` and improve argTypes - [#23825](https://github.com/storybookjs/storybook/pull/23825), thanks [@shilman](https://github.com/shilman)! + - Svelte: Fix docs generating when using `lang="ts"` or optional chaining - [#24096](https://github.com/storybookjs/storybook/pull/24096), thanks [@j3rem1e](https://github.com/j3rem1e)! + - UI: Filter some manager errors - [#24217](https://github.com/storybookjs/storybook/pull/24217), thanks [@yannbf](https://github.com/yannbf)! + - UI: Update ScrollArea with radix - [#24413](https://github.com/storybookjs/storybook/pull/24413), thanks [@cdedreuille](https://github.com/cdedreuille)! + - UI: Improve contrast ratio between focus / hover - [#24205](https://github.com/storybookjs/storybook/pull/24205), thanks [@chocoscoding](https://github.com/chocoscoding)! + - Vite: Move mdx-plugin from `@storybook/builder-vite` to `@storybook/addon-docs` - [#24166](https://github.com/storybookjs/storybook/pull/24166), thanks [@bryanjtc](https://github.com/bryanjtc)! + - Vite: Support Vite 5 - [#24395](https://github.com/storybookjs/storybook/pull/24395), thanks [@IanVS](https://github.com/IanVS)! + - Web-components: Add Lit3 support - [#24437](https://github.com/storybookjs/storybook/pull/24437), thanks [@shilman](https://github.com/shilman)! + - Webpack: Display errors on build - [#24377](https://github.com/storybookjs/storybook/pull/24377), thanks [@yannbf](https://github.com/yannbf)! + - Webpack: Categorize builder error - [#24031](https://github.com/storybookjs/storybook/pull/24031), thanks [@yannbf](https://github.com/yannbf)! + - Webpack: Use logger.warn on warnings - [#24472](https://github.com/storybookjs/storybook/pull/24472), thanks [@yannbf](https://github.com/yannbf)! +
+ + ## 7.4.6 - CLI: Fix Nextjs project detection - [#24346](https://github.com/storybookjs/storybook/pull/24346), thanks [@yannbf](https://github.com/yannbf)! diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md index c0ecfbb41227..815d47e351b6 100644 --- a/CHANGELOG.prerelease.md +++ b/CHANGELOG.prerelease.md @@ -1,3 +1,100 @@ +## 7.5.0-alpha.7 + +- Angular: Allow loading standalone directives - [#24448](https://github.com/storybookjs/storybook/pull/24448), thanks [@osnoser1](https://github.com/osnoser1)! +- Svelte: Fix docs generating when using `lang="ts"` or optional chaining - [#24096](https://github.com/storybookjs/storybook/pull/24096), thanks [@j3rem1e](https://github.com/j3rem1e)! +- Vite: Support Vite 5 - [#24395](https://github.com/storybookjs/storybook/pull/24395), thanks [@IanVS](https://github.com/IanVS)! + +## 7.5.0-alpha.6 + +- Angular: Introduce argsToTemplate for property and event Bindings - [#24434](https://github.com/storybookjs/storybook/pull/24434), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! +- Controls: Fix select / multiselect when value contains multiple spaces - [#22334](https://github.com/storybookjs/storybook/pull/22334), thanks [@oxcened](https://github.com/oxcened)! +- Next.js: Support rename font import - [#24406](https://github.com/storybookjs/storybook/pull/24406), thanks [@yoshi2no](https://github.com/yoshi2no)! +- UI: Update ScrollArea with radix - [#24413](https://github.com/storybookjs/storybook/pull/24413), thanks [@cdedreuille](https://github.com/cdedreuille)! +- Web-components: Add Lit3 support - [#24437](https://github.com/storybookjs/storybook/pull/24437), thanks [@shilman](https://github.com/shilman)! + +## 7.5.0-alpha.5 + +- Angular: Add CLI options (debugWebpack, webpackStatsJson, and more) - [#24388](https://github.com/storybookjs/storybook/pull/24388), thanks [@yannbf](https://github.com/yannbf)! +- Angular: Fix Angular 15 support and add zone.js v0.14.x support - [#24367](https://github.com/storybookjs/storybook/pull/24367), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! +- Core: Add class name to Storybook error name - [#24371](https://github.com/storybookjs/storybook/pull/24371), thanks [@yannbf](https://github.com/yannbf)! +- ManagerAPI: Fix bug with story redirection when URL has partial storyId - [#24345](https://github.com/storybookjs/storybook/pull/24345), thanks [@ndelangen](https://github.com/ndelangen)! +- NextJS: Fix Image Context re-use via singleton - [#24146](https://github.com/storybookjs/storybook/pull/24146), thanks [@martinnabhan](https://github.com/martinnabhan)! +- NextJS: Fix default next image loader when src has params - [#24187](https://github.com/storybookjs/storybook/pull/24187), thanks [@json-betsec](https://github.com/json-betsec)! +- React: Upgrade `react-docgen` to 6.0.x and improve argTypes - [#23825](https://github.com/storybookjs/storybook/pull/23825), thanks [@shilman](https://github.com/shilman)! +- Webpack: Display errors on build - [#24377](https://github.com/storybookjs/storybook/pull/24377), thanks [@yannbf](https://github.com/yannbf)! + +## 7.5.0-alpha.4 + +- CLI: Fix Nextjs project detection - [#24346](https://github.com/storybookjs/storybook/pull/24346), thanks [@yannbf](https://github.com/yannbf)! +- Core: Deprecate `storyStoreV6` (including `storiesOf`) and `storyIndexers` - [#23938](https://github.com/storybookjs/storybook/pull/23938), thanks [@JReinhold](https://github.com/JReinhold)! +- Core: Fix Promise cycle bug in useSharedState - [#24268](https://github.com/storybookjs/storybook/pull/24268), thanks [@ndelangen](https://github.com/ndelangen)! +- Core: Fix missing favicon during dev - [#24356](https://github.com/storybookjs/storybook/pull/24356), thanks [@ndelangen](https://github.com/ndelangen)! +- NextJS: Change babel plugins from `proposal-...` to `transform-...` - [#24290](https://github.com/storybookjs/storybook/pull/24290), thanks [@roottool](https://github.com/roottool)! +- Nextjs: Improve support for Windows-style paths - [#23695](https://github.com/storybookjs/storybook/pull/23695), thanks [@T99](https://github.com/T99)! +- UI: Fix infinite hook call causing browsers to freeze - [#24291](https://github.com/storybookjs/storybook/pull/24291), thanks [@yannbf](https://github.com/yannbf)! +- UI: Improve contrast ratio between focus / hover - [#24205](https://github.com/storybookjs/storybook/pull/24205), thanks [@chocoscoding](https://github.com/chocoscoding)! +- Vite: Move mdx-plugin from @storybook/builder-vite to @storybook/addon-docs - [#24166](https://github.com/storybookjs/storybook/pull/24166), thanks [@bryanjtc](https://github.com/bryanjtc)! + +## 7.5.0-alpha.3 + +- Build: Filter some manager errors - [#24217](https://github.com/storybookjs/storybook/pull/24217), thanks [@yannbf](https://github.com/yannbf)! +- Build: Migrate @storybook/addon-backgrounds to strict-ts - [#22178](https://github.com/storybookjs/storybook/pull/22178), thanks [@kasperpeulen](https://github.com/kasperpeulen)! +- Build: Upgrade chromatic bin package - [#24133](https://github.com/storybookjs/storybook/pull/24133), thanks [@ndelangen](https://github.com/ndelangen)! +- CLI: Change `/Date$/` to `/Dates$/i` - [#24195](https://github.com/storybookjs/storybook/pull/24195), thanks [@arup1221](https://github.com/arup1221)! +- CLI: Fix `sb add` adding duplicative entries - [#24229](https://github.com/storybookjs/storybook/pull/24229), thanks [@ndelangen](https://github.com/ndelangen)! +- Core: Throw an error when critical presets fail to load - [#24176](https://github.com/storybookjs/storybook/pull/24176), thanks [@yannbf](https://github.com/yannbf)! +- Core: Unify error when builder is missing - [#24177](https://github.com/storybookjs/storybook/pull/24177), thanks [@yannbf](https://github.com/yannbf)! +- Core: Upgrade `esbuild-register` to `3.5.0` - [#24175](https://github.com/storybookjs/storybook/pull/24175), thanks [@anneau](https://github.com/anneau)! +- Dependencies: Upgrade `file-system-cache` - [#24232](https://github.com/storybookjs/storybook/pull/24232), thanks [@seriouz](https://github.com/seriouz)! +- Indexer: Rename `index` to `createIndex` - [#24075](https://github.com/storybookjs/storybook/pull/24075), thanks [@JReinhold](https://github.com/JReinhold)! +- Maintenance: Regen lockfiles - [#24152](https://github.com/storybookjs/storybook/pull/24152), thanks [@ndelangen](https://github.com/ndelangen)! +- Manager: Fix useAddonState when using a setter function - [#24237](https://github.com/storybookjs/storybook/pull/24237), thanks [@ndelangen](https://github.com/ndelangen)! +- NextJS: Add compatibility with nextjs `13.5` - [#24239](https://github.com/storybookjs/storybook/pull/24239), thanks [@ndelangen](https://github.com/ndelangen)! +- NextJS: Aliases `react` and `react-dom` like `next.js` does - [#23671](https://github.com/storybookjs/storybook/pull/23671), thanks [@sookmax](https://github.com/sookmax)! +- Nextjs: Improve Google Fonts failure error messages and documentation - [#23891](https://github.com/storybookjs/storybook/pull/23891), thanks [@nsheaps](https://github.com/nsheaps)! +- Nextjs: Migrate from config to previewAnnotations - [#24178](https://github.com/storybookjs/storybook/pull/24178), thanks [@yannbf](https://github.com/yannbf)! +- Theming: Add `barHoverColor` - [#20169](https://github.com/storybookjs/storybook/pull/20169), thanks [@julien-deramond](https://github.com/julien-deramond)! +- Types: Allow `null` in value of `experimental_updateStatus` to clear status - [#24206](https://github.com/storybookjs/storybook/pull/24206), thanks [@ndelangen](https://github.com/ndelangen)! +- Types: Don't distribute generic type of Meta and Story - [#24110](https://github.com/storybookjs/storybook/pull/24110), thanks [@kasperpeulen](https://github.com/kasperpeulen)! +- UI: Expand sidebar for selected story when using composition - [#23781](https://github.com/storybookjs/storybook/pull/23781), thanks [@joaonunomota](https://github.com/joaonunomota)! +- UI: Fix SVG override fill when path has a fill attribute - [#24156](https://github.com/storybookjs/storybook/pull/24156), thanks [@ndelangen](https://github.com/ndelangen)! +- UI: Fix TreeNode alignment when using a different font - [#22221](https://github.com/storybookjs/storybook/pull/22221), thanks [@bdriguesdev](https://github.com/bdriguesdev)! +- UI: Fix custom theme hover-color inconsistency - [#22262](https://github.com/storybookjs/storybook/pull/22262), thanks [@yoshi2no](https://github.com/yoshi2no)! +- UI: Fix keydown shortcut within shadow tree - [#24179](https://github.com/storybookjs/storybook/pull/24179), thanks [@stropitek](https://github.com/stropitek)! +- UI: Improve look and feel of status UI in sidebar - [#24099](https://github.com/storybookjs/storybook/pull/24099), thanks [@ndelangen](https://github.com/ndelangen)! + +## 7.5.0-alpha.2 + +- Angular: Categorize legacy build options error - [#24014](https://github.com/storybookjs/storybook/pull/24014), thanks [@yannbf](https://github.com/yannbf)! +- Builder-Webpack5: Categorize builder error - [#24031](https://github.com/storybookjs/storybook/pull/24031), thanks [@yannbf](https://github.com/yannbf)! +- CI: Inform the user how to dedupe and strip color from info command - [#24087](https://github.com/storybookjs/storybook/pull/24087), thanks [@kasperpeulen](https://github.com/kasperpeulen)! +- CLI: Fix packageManager handling in `sb add` - [#24079](https://github.com/storybookjs/storybook/pull/24079), thanks [@Integrayshaun](https://github.com/Integrayshaun)! +- CLI: Improve sanitization logic in crash reports - [#24028](https://github.com/storybookjs/storybook/pull/24028), thanks [@yannbf](https://github.com/yannbf)! +- Maintenance: Add more context to explanation in core-events errors - [#24063](https://github.com/storybookjs/storybook/pull/24063), thanks [@yannbf](https://github.com/yannbf)! +- Monorepo: Fix `svelte-vite` detection - [#24085](https://github.com/storybookjs/storybook/pull/24085), thanks [@legnaleurc](https://github.com/legnaleurc)! +- NextJS: Fix Image Context reuse (ensure singleton by externalizing it) - [#23881](https://github.com/storybookjs/storybook/pull/23881), thanks [@martinnabhan](https://github.com/martinnabhan)! +- Source-loader: Fix property key validation - [#24068](https://github.com/storybookjs/storybook/pull/24068), thanks [@MrZillaGold](https://github.com/MrZillaGold)! +- Svelte: Fix generated properties on Svelte event handler - [#24020](https://github.com/storybookjs/storybook/pull/24020), thanks [@j3rem1e](https://github.com/j3rem1e)! +- Telemetry: Add platform info to telemetry event - [#24081](https://github.com/storybookjs/storybook/pull/24081), thanks [@yannbf](https://github.com/yannbf)! +- UI: Fix target id in searchfield label - [#23464](https://github.com/storybookjs/storybook/pull/23464), thanks [@plumpNation](https://github.com/plumpNation)! +- Vue3: Remove console.log in sourceDecorator - [#24062](https://github.com/storybookjs/storybook/pull/24062), thanks [@oruman](https://github.com/oruman)! + +## 7.5.0-alpha.1 + +- Core: Add CJS entrypoints to errors in core events - [#24038](https://github.com/storybookjs/storybook/pull/24038), thanks [@yannbf](https://github.com/yannbf)! + +## 7.5.0-alpha.0 + +- Addon API: Improve the updateStatus API - [#24007](https://github.com/storybookjs/storybook/pull/24007), thanks [@ndelangen](https://github.com/ndelangen)! +- CLI: Add more information to `storybook info` command - [#24003](https://github.com/storybookjs/storybook/pull/24003), thanks [@JReinhold](https://github.com/JReinhold)! +- CLI: Add uncaughtException handler - [#24018](https://github.com/storybookjs/storybook/pull/24018), thanks [@yannbf](https://github.com/yannbf)! +- CLI: Remove random commas in storybook upgrade logs - [#22333](https://github.com/storybookjs/storybook/pull/22333), thanks [@joaonunomota](https://github.com/joaonunomota)! +- Doc Blocks: Add `title` to `Meta` prop types - [#23370](https://github.com/storybookjs/storybook/pull/23370), thanks [@iqbalcodes6602](https://github.com/iqbalcodes6602)! +- Docs: Fix TOC import - [#24047](https://github.com/storybookjs/storybook/pull/24047), thanks [@shilman](https://github.com/shilman)! +- Docs: Fix table of contents scroll behavior - [#23986](https://github.com/storybookjs/storybook/pull/23986), thanks [@almoghaimo](https://github.com/almoghaimo)! +- Telemetry: Filter addon options to protect sensitive info - [#24000](https://github.com/storybookjs/storybook/pull/24000), thanks [@shilman](https://github.com/shilman)! +- Types: Remove `@types/react` dep from `@storybook/types` - [#24042](https://github.com/storybookjs/storybook/pull/24042), thanks [@JReinhold](https://github.com/JReinhold)! + ## 7.4.0-alpha.2 - Addon-docs: Resolve `mdx-react-shim` & `@storybook/global` correctly - [#23941](https://github.com/storybookjs/storybook/pull/23941), thanks [@ndelangen](https://github.com/ndelangen)! diff --git a/CONTRIBUTING/RELEASING.md b/CONTRIBUTING/RELEASING.md index 0997b757b6ea..d1c4eecdb849 100644 --- a/CONTRIBUTING/RELEASING.md +++ b/CONTRIBUTING/RELEASING.md @@ -8,8 +8,8 @@ - [Introduction](#introduction) - [Branches](#branches) - [Release Pull Requests](#release-pull-requests) - - [Prereleases](#prereleases) - [Patch Releases](#patch-releases) + - [Non-patch Releases](#non-patch-releases) - [Publishing](#publishing) - [👉 How to Release](#-how-to-release) - [1. Find the Prepared Pull Request](#1-find-the-prepared-pull-request) @@ -21,6 +21,8 @@ - [7. See the "Publish" Workflow Finish](#7-see-the-publish-workflow-finish) - [Releasing Locally in an Emergency 🚨](#releasing-locally-in-an-emergency-) - [Canary Releases](#canary-releases) + - [With GitHub UI](#with-github-ui) + - [With the CLI](#with-the-cli) - [Versioning Scenarios](#versioning-scenarios) - [Prereleases - `7.1.0-alpha.12` -\> `7.1.0-alpha.13`](#prereleases---710-alpha12---710-alpha13) - [Prerelease promotions - `7.1.0-alpha.13` -\> `7.1.0-beta.0`](#prerelease-promotions---710-alpha13---710-beta0) @@ -31,7 +33,7 @@ - [Prerelease of upcoming patch release - `7.0.20` -\> `7.0.21-alpha.0`](#prerelease-of-upcoming-patch-release---7020---7021-alpha0) - [Merges to `main` without versioning](#merges-to-main-without-versioning) - [FAQ](#faq) - - [When should I use the "patch" label?](#when-should-i-use-the-patch-label) + - [When should I use the "patch:yes" label?](#when-should-i-use-the-patchyes-label) - [How do I make changes to the release tooling/process?](#how-do-i-make-changes-to-the-release-toolingprocess) - [Why do I need to re-trigger workflows to update the changelog?](#why-do-i-need-to-re-trigger-workflows-to-update-the-changelog) - [Which combination of inputs creates the version bump I need?](#which-combination-of-inputs-creates-the-version-bump-i-need) @@ -43,19 +45,19 @@ This document explains the release process for the Storybook monorepo. There are two types: -1. Prereleases and major/minor releases - releasing any content that is on the `next` branch +1. Non-patch releases - releasing any content that is on the `next` branch, either prereleases or stable releases 2. Patch releases - picking any content from `next` to `main`, that needs to be patched back to the current stable minor release The release process is based on automatically created "Release Pull Requests", that when merged will trigger a new version to be released. A designated Releaser -- which may rotate between core team members -- will go through the release process in the current Release PR. This process is implemented with NodeJS scripts in [`scripts/release`](../scripts/release/) and three GitHub Actions workflows: -- [Prepare Prerelease PR](../.github/workflows/prepare-prerelease.yml) -- [Prepare Patch PR](../.github/workflows/prepare-patch-release.yml) +- [Prepare `next` PR](../.github/workflows/prepare-non-patch-release.yml) +- [Prepare patch PR](../.github/workflows/prepare-patch-release.yml) - [Publish](../.github/workflows/publish.yml) > **Note** -> This document distinguishes between **patch** releases and **prereleases**. This is a simplification; stable major and minor releases work the same way as prereleases. The distinction reflects the difference between patching an existing minor version on `main` or releasing a new minor/major/prerelease from `next`. +> This document distinguishes between **patch** and **non-patch** releases. The distinction reflects the difference between patching an existing minor version on `main` or releasing a new minor/major/prerelease from `next`. ### Branches @@ -101,7 +103,7 @@ Two GitHub Actions workflows automatically create release pull requests, one for The high-level flow is: 1. When a PR is merged to `next` (or a commit is pushed), both release pull requests are (re)generated. -2. They create a new branch - `version-(patch|prerelease)-from-`. +2. They create a new branch - `version-(patch|non-patch)-from-`. 3. They calculate which version to bump to according to the version strategy. 4. They update `CHANGELOG(.prerelease).md` with all changes detected. 5. They commit everything. @@ -115,62 +117,20 @@ A few key points to note in this flow: - The changelogs are committed during the preparation, but the packages are not version bumped and not published until later. - The release pull requests don't target their working branches (`next` and `main`), but rather `next-release` and `latest-release`. -### Prereleases - -> **Note** -> Workflow: [`prepare-prerelease.yml`](../.github/workflows/prepare-prerelease.yml) - -Prereleases are prepared with all content from the `next` branch. The changelog is generated by examining the git history, and looking up all the commits and pull requests between the current prerelease (on `next-release`) and `HEAD` of `next`. - -The default versioning strategy is to increase the current prerelease number, as described in [Prereleases - `7.1.0-alpha.12` -> `7.1.0-alpha.13`](#prereleases---710-alpha12---710-alpha13). If there is no prerelease number (i.e., we just released a new stable minor/major version), it will add one to a patch bump, so it would go from `7.2.0` to `7.2.1-0` by default. - -Prerelease PRs are only created if there are actual changes to release. Content labeled with "build" or "documentation" is [not considered "releasable"](#which-changes-are-considered-releasable-and-what-does-it-mean) and is not user-facing, so it doesn't make sense to create a release. This is explained in more detail in [Why are no release PRs being prepared?](#why-are-no-release-prs-being-prepared). - -The preparation workflow will create a new branch from `next`, called `version-prerelease-from-`, and open a pull request targeting `next-release`. When the Releaser merges it, the [publish workflow](#publishing) will merge `next-release` into `next`. - -Here's an example of a workflow where a feature and a bugfix have been created and then released to a new `7.1.0-alpha.29` version. All the commits highlighted with square dots are the ones that will be considered when generating the changelog. - -```mermaid -%%{init: { 'gitGraph': { 'mainBranchName': 'next' } } }%% -gitGraph - commit - branch next-release - commit tag: "7.1.0-alpha.28" - checkout next - merge next-release - commit type: HIGHLIGHT id: "direct commit" - branch new-feature - commit - commit - checkout next - merge new-feature type: HIGHLIGHT - branch some-bugfix - commit - checkout next - merge some-bugfix type: HIGHLIGHT - branch version-prerelease-from-7.1.0-alpha.28 - commit id: "write changelog" - checkout next-release - merge version-prerelease-from-7.1.0-alpha.28 - commit id: "bump versions" tag: "7.1.0-alpha.29" - checkout next - merge next-release -``` - ### Patch Releases > **Note** > Workflow: [`prepare-patch-release.yml`](../.github/workflows/prepare-patch-release.yml) -Patch releases are created by [cherry-picking](https://www.atlassian.com/git/tutorials/cherry-pick) any merged, unreleased pull requests that have the "**patch**" label applied to the `next` branch. The merge commit of said pull requests are cherry-picked. +Patch releases are created by [cherry-picking](https://www.atlassian.com/git/tutorials/cherry-pick) any merged, unreleased pull requests that have the "**patch:yes**" label applied to the `next` branch. The merge commit of said pull requests are cherry-picked. -Sometimes it is desired to pick pull requests back to `main` even if they are not considered "releasable". Unlike prerelease preparation, patch releases will not be canceled if the content is not releasable. It might not make sense to create a new patch release if the changes are only for documentation and/or internal build systems. However, getting the changes back to `main` is the only way to deploy the documentation to the production docs site. You may also want to cherry-pick changes to internal CI to fix issues. These are valid scenarios where you want to cherry-pick the changes without being blocked on "releasable" content. In these cases, where all cherry picks are non-releasable, the preparation workflow creates a "merging" pull request instead of a "releasing" pull request. This pull request does not bump versions or update changelogs; it just cherry-picks the changes and allows you to merge them into `latest-release` -> `main`. +Sometimes it is desired to pick pull requests back to `main` even if they are not considered "releasable". Unlike non-patch release preparation, patch releases will not be canceled if the content is not releasable. It might not make sense to create a new patch release if the changes are only for documentation and/or internal build systems. However, getting the changes back to `main` is the only way to deploy the documentation to the production docs site. You may also want to cherry-pick changes to internal CI to fix issues. These are valid scenarios where you want to cherry-pick the changes without being blocked on "releasable" content. In these cases, where all cherry picks are non-releasable, the preparation workflow creates a "merging" pull request instead of a "releasing" pull request. This pull request does not bump versions or update changelogs; it just cherry-picks the changes and allows you to merge them into `latest-release` -> `main`. The preparation workflow sequentially cherry-picks each patch pull request to its branch. If this cherry-picking fails due to conflicts or other reasons, it is ignored and the next pull request is processed. All failing cherry-picks are listed in the release pull request's description, for the Releaser to manually cherry-pick during the release process. This problem occurs more often when `main` and `next` diverge, i.e. the longer it has been since a stable major/minor release. -Similar to the prerelease flow, the preparation workflow for patches will create a new branch from `main` called `version-patch-from-`, and open a pull request that targets `latest-release`. When the pull request is merged by the Releaser, the [publish workflow](#publishing) will eventually merge `latest-release` into `main`. +Similar to the non-patch release flow, the preparation workflow for patches will create a new branch from `main` called `version-patch-from-`, and open a pull request that targets `latest-release`. When the pull request is merged by the Releaser, the [publish workflow](#publishing) will eventually merge `latest-release` into `main`. -Here is an example of a workflow where a feature and two bug fixes have been merged to `next`. Only the bug fixes have the "**patch**" label, so only those two go into the new `7.0.19` release. Note that it is the merge commits to `next` that are cherry-picked, not the commits on the bugfix branches. +Here is an example of a workflow where a feature and two bug fixes have been merged to `next`. Only the bug fixes have the "**patch:yes**" label, so only those two go into the new `7.0.19` release. Note that it is the merge commits to `next` that are cherry-picked, not the commits on the bugfix branches. ```mermaid gitGraph @@ -208,21 +168,62 @@ gitGraph merge latest-release ``` +### Non-patch Releases + +> **Note** +> Workflow: [`prepare-non-patch-release.yml`](../.github/workflows/prepare-non-patch-release.yml) + +Non-patch releases are prepared with all content from the `next` branch. The changelog is generated by examining the git history, and looking up all the commits and pull requests between the current prerelease (on `next-release`) and `HEAD` of `next`. + +The default versioning strategy is to increase the current prerelease number, as described in [Prereleases - `7.1.0-alpha.12` -> `7.1.0-alpha.13`](#prereleases---710-alpha12---710-alpha13). If there is no prerelease number (i.e., we just released a new stable minor/major version), it will add one to a patch bump, so it would go from `7.2.0` to `7.2.1-0` by default. + +`next`-PRs are only created if there are actual changes to release. Content labeled with "build" or "documentation" is [not considered "releasable"](#which-changes-are-considered-releasable-and-what-does-it-mean) and is not user-facing, so it doesn't make sense to create a release. This is explained in more detail in [Why are no release PRs being prepared?](#why-are-no-release-prs-being-prepared). + +The preparation workflow will create a new branch from `next`, called `version-non-patch-from-`, and open a pull request targeting `next-release`. When the Releaser merges it, the [publish workflow](#publishing) will merge `next-release` into `next`. + +Here's an example of a workflow where a feature and a bugfix have been created and then released to a new `7.1.0-alpha.29` version. All the commits highlighted with square dots are the ones that will be considered when generating the changelog. + +```mermaid +%%{init: { 'gitGraph': { 'mainBranchName': 'next' } } }%% +gitGraph + commit + branch next-release + commit tag: "7.1.0-alpha.28" + checkout next + merge next-release + commit type: HIGHLIGHT id: "direct commit" + branch new-feature + commit + commit + checkout next + merge new-feature type: HIGHLIGHT + branch some-bugfix + commit + checkout next + merge some-bugfix type: HIGHLIGHT + branch version-non-patch-from-7.1.0-alpha.28 + commit id: "write changelog" + checkout next-release + merge version-non-patch-from-7.1.0-alpha.28 + commit id: "bump versions" tag: "7.1.0-alpha.29" + checkout next + merge next-release +``` + ### Publishing > **Note** > Workflow: [`publish.yml`](../.github/workflows/publish.yml) -When either a prerelease or a patch release branch is merged into `main` or `next-release`, the publishing workflow is triggered. This workflow performs the following tasks: +When either a non-patch release or a patch release branch is merged into `latest-release` or `next-release`, the publishing workflow is triggered. This workflow performs the following tasks: 1. Bump versions of all packages according to the plan from the prepared PRs 2. Install dependencies and build all packages. 3. Publish packages to npm. -4. (If this is a patch release, add the "**picked**" label to all relevant pull requests.) +4. (If this is a patch release, add the "**patch:done**" label to all relevant pull requests.) 5. Create a new GitHub Release, including a version tag in the release branch (`latest-release` or `next-release`). 6. Merge the release branch into the core branch (`main` or `next`). 7. (If this is a patch release, copy the `CHANGELOG.md` changes from `main` to `next`.) -8. (If this is [a promotion from a prerelease to a stable release](#minormajor-releases---710-rc2---710-or-800-rc3---800), force push `next` to `main`.) The publish workflow runs in the "release" GitHub environment, which has the npm token required to publish packages to the `@storybook` npm organization. For security reasons, this environment can only be accessed from the four "core" branches: `main`, `next`, `latest-release` and `next-release`. @@ -244,7 +245,7 @@ The high-level workflow for a Releaser is: Look for the release pull request that has been prepared for the type of release you're about to release: -- "Release: Prerelease ``" for prereleases +- "Release: Prerelease|Minor|Major ``" for releases from `next` - "Release: Patch ``" for patch releases - "Release: Merge patches to `main` (without version bump)" for patches without releases @@ -266,7 +267,7 @@ It is important to verify that the release includes the right content. Key eleme For example, check if it's a breaking change that isn't allowed in a minor prerelease, or if it's a new feature in a patch release. If it's not suitable, revert the pull request and notify the author. -Sometimes when doing a patch release, a pull request can have the "patch" label but you don't want that change to be part of this release. Maybe you're not confident in the change, or you require more input from maintainers before releasing it. In those situations you should remove the "patch" label from the pull request and follow through with the release (make sure to re-trigger the workflow). When the release is done, add the patch label back again, so it will be part of the next release. +Sometimes when doing a patch release, a pull request can have the "patch:yes" label but you don't want that change to be part of this release. Maybe you're not confident in the change, or you require more input from maintainers before releasing it. In those situations you should remove the "patch:yes" label from the pull request and follow through with the release (make sure to re-trigger the workflow). When the release is done, add the "patch:yes" label back again, so it will be part of the next release. 2. Is the pull request title correct? @@ -300,12 +301,12 @@ When triggering the workflows, always choose the `next` branch as the base, unle The workflows can be triggered here: -- [Prepare prerelease PR](https://github.com/storybookjs/storybook/actions/workflows/prepare-prerelease.yml) +- [Prepare next PR](https://github.com/storybookjs/storybook/actions/workflows/prepare-non-patch-release.yml) - [Prepare patch PR](https://github.com/storybookjs/storybook/actions/workflows/prepare-patch-release.yml) -Crucially for prereleases, this is also where you change the versioning strategy if you need something else than the default as described in [Preparing - Prereleases](#prereleases). When triggering the prerelease workflow manually, you can optionally add inputs: +Crucially for prereleases, this is also where you change the versioning strategy if you need something else than the default as described in [Preparing - Non-patch Releases](#non-patch-releases). When triggering the non-patch workflow manually, you can optionally add inputs: -![Screenshot of triggering the prerelease workflow in GitHub Actions, with a form that shows a release type selector and a prerelease identifier text field](prerelease-workflow-inputs.png) +![Screenshot of triggering the non-patch release workflow in GitHub Actions, with a form that shows a release type selector and a prerelease identifier text field](prerelease-workflow-inputs.png) See [Versioning Scenarios](#versioning-scenarios) for a description of each version bump scenario, how to activate it and what it does, and [Which combination of inputs creates the version bump I need?](#which-combination-of-inputs-creates-the-version-bump-i-need) for a detailed description of the workflow inputs. @@ -339,7 +340,7 @@ You can inspect the workflows to see what they are running and copy that, but he Before you start you should make sure that your working tree is clean and the repository is in a clean state by running `git clean -xdf`. -1. Create a new branch from either `next` (prereleases) or `main` (patches) +1. Create a new branch from either `next` or `main` (patches) 2. Get all tags: `git fetch --tags origin` 3. Install dependencies: `yarn task --task=install --start-from=install` 4. `cd scripts` @@ -375,7 +376,7 @@ Before you start you should make sure that your working tree is clean and the re 4. `git add ./CHANGELOG.md` 5. `git commit -m "Update CHANGELOG.md for v"` 6. `git push origin` -19. (If prerelease) Sync `versions/next.json` from `next` to `main` +19. (If non-patch release) Sync `versions/next.json` from `next` to `main` 1. `git checkout main` 2. `git pull` 3. `git checkout origin/next ./docs/versions/next.json` @@ -434,7 +435,7 @@ There are multiple types of releases that use the same principles, but are done ### Prereleases - `7.1.0-alpha.12` -> `7.1.0-alpha.13` -This is the default strategy for prereleases, there's nothing special needed to trigger this scenario. +This is the default strategy for Non-patch releases, there's nothing special needed to trigger this scenario. ### Prerelease promotions - `7.1.0-alpha.13` -> `7.1.0-beta.0` @@ -445,14 +446,12 @@ To promote a prerelease to a new prerelease ID, during the [Re-trigger the Workf ### Minor/major releases - `7.1.0-rc.2` -> `7.1.0` or `8.0.0-rc.3` -> `8.0.0` -To promote a prerelease to a new prerelease ID, during the [Re-trigger the Workflow](#4-re-trigger-the-workflow) step, choose: +To promote a prerelease to a stable reelase, during the [Re-trigger the Workflow](#4-re-trigger-the-workflow) step, choose: -- Release type: Patch +- Release type: Patch, Minor or Major - Prerelease ID: Leave empty -The "Patch" release type ensures the current prerelease version gets promoted to a stable version without any major/minor/patch bumps. - -This scenario is special as it turns the `next` branch into a stable branch (until the next prerelease). Therefore, this will also force push `next` to `main`, to ensure that `main` contains the latest stable release. Consequently, the history for `main` is lost. +This scenario is special as it will target `latest-release` instead of `next-release`, and thus merge into `main` when done, and not `next`. So it goes `next` -> `version-non-patch-from-` -> `latest-release` -> `main`. ### First prerelease of new major/minor - `7.1.0` -> `7.2.0-alpha.0` or `8.0.0-alpha.0` @@ -481,13 +480,13 @@ As described in more details in [the Patch Releases section](#patch-releases), t ## FAQ -### When should I use the "patch" label? +### When should I use the "patch:yes" label? -Not all pull requests need to be patched back to the stable release, which is why only those with the **"patch"** label gets that treatment. But how do you decide whether or not a give pull requests should have that label? +Not all pull requests need to be patched back to the stable release, which is why only those with the **"patch:yes"** label gets that treatment. But how do you decide whether or not a give pull requests should have that label? -First of all, patches are only for fixes and minor improvements, and not completely new features. A pull request that introduces a new feature shouldn't be patched back to the stable release. +First of all, patches are only for important and time-sensitive fixes, and not minor improvements or completely new features. A pull request that introduces a new feature shouldn't be patched back to the stable release. -Second, any destabilizing changes shouldn't be patched back either. Breaking changes are reserved for major releases, but changes can be destabilizing without being strictly breaking, and those shouldn't be patched back either. An example is moving the settings panel in the manager to a completely different place, but with the same functionality. Many wouldn't consider this breaking because no usage will stop working because of this, but it can be considered a destabilizing change because user behavior have to change as a result of this. +Second, PRs that changes the code in a big architectural way should ideally not be patched back either, because that makes merge conflicts more likely in the future. When in doubt ask the core team for their input. @@ -497,12 +496,15 @@ The whole process is based on [GitHub Action workflows](../.github/workflows/) a The short answer to "how", is to make changes as a regular pull request that is also patched back to `main`. -There's a longer answer too, but it's pretty confusing: +
+ There's a longer answer too, but it's pretty confusing The scripts run from either `main` or `next`, so if you're changing a release script, you must patch it back to `main` for it to have an effect on patch releases. If you need the change to take effect immediately, you must manually cherry pick it to `main`. For workflow file changes, they usually run from `next`, but patching them back is recommended for consistency. The "publish" workflow runs from `latest-release` and `next-release`, so you should always patch changes back for _that_. 🙃 +
+ ### Why do I need to re-trigger workflows to update the changelog? Changes to pull requests' titles, labels or even reverts won't be reflected in the release pull request. This is because the workflow only triggers on pushes to `next`, not when pull request meta data is changed. @@ -536,7 +538,7 @@ If a pull request does not have any of the above labels at the time of release, This is most likely because `next` only contains [unreleasable changes](#which-changes-are-considered-releasable-and-what-does-it-mean), which causes the preparation workflow to cancel itself. That's because it doesn't make sense to prepare a new release if all the changes are unreleasable, as that wouldn't bump the version nor write a new changelog entry, so "releasing" it would just merge it back to `next` without any differences. -You can always see the workflows and if they have been cancelled [here for prereleases](https://github.com/storybookjs/storybook/actions/workflows/prepare-prerelease.yml) and [here for patch releases](https://github.com/storybookjs/storybook/actions/workflows/prepare-patch-release.yml). +You can always see the workflows and if they have been cancelled [here for non-patch releases](https://github.com/storybookjs/storybook/actions/workflows/prepare-non-patch-release.yml) and [here for patch releases](https://github.com/storybookjs/storybook/actions/workflows/prepare-patch-release.yml). ### Why do we need separate release branches? @@ -558,11 +560,11 @@ gitGraph branch some-simultaneous-bugfix commit checkout next - branch version-prerelease-from-7.1.0-alpha.28 + branch version-non-patch-from-7.1.0-alpha.28 commit id checkout next merge some-simultaneous-bugfix type: HIGHLIGHT id: "whoops!" - merge version-prerelease-from-7.1.0-alpha.28 tag: "v7.1.0-alpha.29" + merge version-non-patch-from-7.1.0-alpha.28 tag: "v7.1.0-alpha.29" ``` When publishing at the last commit with tag `v7.1.0-alpha.29`, it will publish whatever the content is at that point (all the square dots), which includes the "whoops!" commit from merging the bugfix. But the bugfix was never part of the release pull request because it got prepared before the bugfix was merged in. @@ -582,19 +584,19 @@ gitGraph branch some-simultanous-bugfix commit checkout next - branch version-prerelease-from-7.1.0-alpha.28 + branch version-non-patch-from-7.1.0-alpha.28 commit id: "write changelog" checkout next merge some-simultanous-bugfix id: "whoops!" checkout next-release - merge version-prerelease-from-7.1.0-alpha.28 + merge version-non-patch-from-7.1.0-alpha.28 commit id: "bump versions" tag: "v7.1.0-alpha.29" checkout next merge next-release - branch version-prerelease-from-7.1.0-alpha.29 + branch version-non-patch-from-7.1.0-alpha.29 commit id: "write changelog again" checkout next-release - merge version-prerelease-from-7.1.0-alpha.29 + merge version-non-patch-from-7.1.0-alpha.29 commit id: "bump versions again" tag: "v7.1.0-alpha.30" checkout next merge next-release diff --git a/MIGRATION.md b/MIGRATION.md index 5022eefb59bd..1708f26a3dbe 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -1,7 +1,10 @@

Migration

+- [From version 7.4.0 to 7.5.0](#from-version-740-to-750) + - [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated) + - [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers) - [From version 7.0.0 to 7.2.0](#from-version-700-to-720) - - [Addon API is more type-strict](#addon-api-is-more-type-strict) + - [Addon API is more type-strict](#addon-api-is-more-type-strict) - [From version 6.5.x to 7.0.0](#from-version-65x-to-700) - [7.0 breaking changes](#70-breaking-changes) - [Dropped support for Node 15 and below](#dropped-support-for-node-15-and-below) @@ -27,7 +30,7 @@ - [Deploying build artifacts](#deploying-build-artifacts) - [Dropped support for file URLs](#dropped-support-for-file-urls) - [Serving with nginx](#serving-with-nginx) - - [Ignore story files from node\_modules](#ignore-story-files-from-node_modules) + - [Ignore story files from node_modules](#ignore-story-files-from-node_modules) - [7.0 Core changes](#70-core-changes) - [7.0 feature flags removed](#70-feature-flags-removed) - [Story context is prepared before for supporting fine grained updates](#story-context-is-prepared-before-for-supporting-fine-grained-updates) @@ -39,7 +42,7 @@ - [Addon-interactions: Interactions debugger is now default](#addon-interactions-interactions-debugger-is-now-default) - [7.0 Vite changes](#70-vite-changes) - [Vite builder uses Vite config automatically](#vite-builder-uses-vite-config-automatically) - - [Vite cache moved to node\_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook) + - [Vite cache moved to node_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook) - [7.0 Webpack changes](#70-webpack-changes) - [Webpack4 support discontinued](#webpack4-support-discontinued) - [Babel mode v7 exclusively](#babel-mode-v7-exclusively) @@ -89,7 +92,7 @@ - [Dropped addon-docs manual babel configuration](#dropped-addon-docs-manual-babel-configuration) - [Dropped addon-docs manual configuration](#dropped-addon-docs-manual-configuration) - [Autoplay in docs](#autoplay-in-docs) - - [Removed STORYBOOK\_REACT\_CLASSES global](#removed-storybook_react_classes-global) + - [Removed STORYBOOK_REACT_CLASSES global](#removed-storybook_react_classes-global) - [7.0 Deprecations and default changes](#70-deprecations-and-default-changes) - [storyStoreV7 enabled by default](#storystorev7-enabled-by-default) - [`Story` type deprecated](#story-type-deprecated) @@ -302,6 +305,72 @@ - [Packages renaming](#packages-renaming) - [Deprecated embedded addons](#deprecated-embedded-addons) +## From version 7.4.0 to 7.5.0 + +#### `storyStoreV6` and `storiesOf` is deprecated + +`storyStoreV6` and `storiesOf` is deprecated and will be completely removed in Storybook 8.0.0. + +If you're using `storiesOf` we recommend you migrate your stories to CSF3 for a better story writing experience. +In many cases you can get started with the migration by using two migration scripts: + +```bash + +# 1. convert storiesOf to CSF +npx storybook@latest migrate storiesof-to-csf --glob="**/*.stories.tsx" --parser=tsx + +# 2. Convert CSF 2 to CSF 3 +npx storybook@latest migrate csf-2-to-3 --glob="**/*.stories.tsx" --parser=tsx +``` + +They won't do a perfect migration so we recommend that you manually go through each file afterwards. + +Alternatively you can build your own `storiesOf` implementation by leveraging the new (experimental) indexer API ([documentation](https://storybook.js.org/docs/react/api/main-config-indexers), [migration](#storyindexers-is-replaced-with-experimental_indexers)). A proof of concept of such an implementation can be seen in [this StackBlitz demo](https://stackblitz.com/edit/github-h2rgfk?file=README.md). See the demo's `README.md` for a deeper explanation of the implementation. + +#### `storyIndexers` is replaced with `experimental_indexers` + +Defining custom indexers for stories has become a more official - yet still experimental - API which is now configured at `experimental_indexers` instead of `storyIndexers` in `main.ts`. `storyIndexers` has been deprecated and will be fully removed in version 8.0.0. + +The new experimental indexers are documented [here](https://storybook.js.org/docs/react/api/main-config-indexers). The most notable change from `storyIndexers` is that the indexer must now return a list of [`IndexInput`](https://github.com/storybookjs/storybook/blob/next/code/lib/types/src/modules/indexer.ts#L104-L148) instead of `CsfFile`. It's possible to construct an `IndexInput` from a `CsfFile` using the `CsfFile.indexInputs` getter. + +That means you can convert an existing story indexer like this: + +```diff +// .storybook/main.ts + +import { readFileSync } from 'fs'; +import { loadCsf } from '@storybook/csf-tools'; + +export default { +- storyIndexers = (indexers) => { +- const indexer = async (fileName, opts) => { ++ experimental_indexers = (indexers) => { ++ const createIndex = async (fileName, opts) => { + const code = readFileSync(fileName, { encoding: 'utf-8' }); + const makeTitle = (userTitle) => { + // Do something with the auto title retrieved by Storybook + return userTitle; + }; + + // Parse the CSF file with makeTitle as a custom context +- return loadCsf(code, { ...compilationOptions, makeTitle, fileName }).parse(); ++ return loadCsf(code, { ...compilationOptions, makeTitle, fileName }).parse().indexInputs; + }; + + return [ + { + test: /(stories|story)\.[tj]sx?$/, +- indexer, ++ createIndex, + }, + ...(indexers || []), + ]; + }, +}; +``` + +As an addon author you can support previous versions of Storybook by setting both `storyIndexers` and `indexers_experimental`, without triggering the deprecation warning. + ## From version 7.0.0 to 7.2.0 #### Addon API is more type-strict @@ -311,6 +380,7 @@ When registering an addon using `@storybook/manager-api`, the addon API is now m The `type` property is now a required field, and the `id` property should not be set anymore. Here's a correct example: + ```tsx import { addons, types } from '@storybook/manager-api'; @@ -318,7 +388,7 @@ addons.register('my-addon', () => { addons.add('my-addon/panel', { type: types.PANEL, title: 'My Addon', - render: ({ active }) => active ?
Hello World
: null, + render: ({ active }) => (active ?
Hello World
: null), }); }); ``` @@ -869,16 +939,16 @@ Given the following `main.js`: ```js export default { - stories: ['../**/*.stories.*'] -} + stories: ['../**/*.stories.*'], +}; ``` If you want to restore the previous behavior to include `node_modules`, you can update it to: ```js export default { - stories: ['../**/*.stories.*', '../**/node_modules/**/*.stories.*'] -} + stories: ['../**/*.stories.*', '../**/node_modules/**/*.stories.*'], +}; ``` The first glob would have node_modules automatically excluded by Storybook, and the second glob would include all stories that are under a nested `node_modules` directory. @@ -1044,7 +1114,11 @@ Starting in 7.0, we drop support for Angular < 14 #### Angular: Drop support for calling Storybook directly -In Storybook 6.4 we have deprecated calling Storybook directly (`npm run storybook`) for Angular. In Storybook 7.0, we've removed it entirely. Instead you have to set up the Storybook builder in your `angular.json` and execute `ng run :storybook` to start Storybook. Please visit https://github.com/storybookjs/storybook/tree/next/code/frameworks/angular to set up Storybook for Angular correctly. +_Has automigration_ + +In Storybook 6.4 we deprecated calling Storybook directly (e.g. `npm run storybook`) for Angular. In Storybook 7.0, we've removed it entirely. Instead, you have to set up the Storybook builder in your `angular.json` and execute `ng run :storybook` to start Storybook. + +You can run `npx storybook@next automigrate` to automatically fix your configuration, or visit https://github.com/storybookjs/storybook/tree/next/code/frameworks/angular/README.md#how-do-i-migrate-to-an-angular-storybook-builder for instructions on how to set up Storybook for Angular manually. #### Angular: Application providers and ModuleWithProviders diff --git a/README.md b/README.md index 8bef7c303587..4633f6efc0b8 100644 --- a/README.md +++ b/README.md @@ -97,7 +97,7 @@ For additional help, join us in the [Storybook Discord](https://discord.gg/story ### Supported Frameworks -| Renderer | Demo | | +| Renderer | Demo | | | -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | | [React](code/renderers/react) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/react/latest?style=flat-square&color=blue&label)](https://next--630511d655df72125520f051.chromatic.com/) | [![React](https://img.shields.io/npm/dm/@storybook/react?style=flat-square&color=eee)](code/renderers/react) | | [Angular](code/frameworks/angular/) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/angular/latest?style=flat-square&color=blue&label)](https://next--6322ce6af69825592bbb28fc.chromatic.com/) | [![Angular](https://img.shields.io/npm/dm/@storybook/angular?style=flat-square&color=eee)](code/frameworks/angular/) | diff --git a/RESOLUTIONS.md b/RESOLUTIONS.md new file mode 100644 index 000000000000..a21b14b5309f --- /dev/null +++ b/RESOLUTIONS.md @@ -0,0 +1,11 @@ +# Resolutions and Exact versions + +This file keeps track of any resolutions or exact versions specified in any `package.json` file. Resolutions are used to specify a specific version of a package to be used, even if a different version is specified as a dependency of another package. + +## code/renderers/svelte/package.json + +svelte-check@3.4.6 (bug: 3.5.x): Type issues + +## code/ui/components/package.json + +overlayscrollbars@2.2.1 (bug: 2.3.x): The Scrollbar doesn't disappear anymore by default. It might has something to do with the `scrollbars.autoHideSuspend` option, which was introduced in 2.3.0. https://github.com/KingSora/OverlayScrollbars/blob/master/packages/overlayscrollbars/CHANGELOG.md#230 diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index 52ec9f52e624..6621d6de5000 100644 --- a/code/addons/a11y/package.json +++ b/code/addons/a11y/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-a11y", - "version": "7.4.6", + "version": "7.5.0-alpha.7", "description": "Test component compliance with web accessibility standards", "keywords": [ "a11y", diff --git a/code/addons/a11y/src/components/Report/HighlightToggle.tsx b/code/addons/a11y/src/components/Report/HighlightToggle.tsx index 1c8a1c2f887b..cff5ec7ceb99 100644 --- a/code/addons/a11y/src/components/Report/HighlightToggle.tsx +++ b/code/addons/a11y/src/components/Report/HighlightToggle.tsx @@ -24,7 +24,7 @@ function areAllRequiredElementsHighlighted( highlighted: string[] ): CheckBoxStates { const highlightedCount = elementsToHighlight.filter((item) => - highlighted.includes(item.target[0]) + highlighted.includes(item.target[0] as any) ).length; // eslint-disable-next-line no-nested-ternary @@ -52,7 +52,7 @@ const HighlightToggle: React.FC = ({ toggleId, elementsToHighlight const handleToggle = React.useCallback((): void => { toggleHighlight( - elementsToHighlight.map((e) => e.target[0]), + elementsToHighlight.map((e) => e.target[0] as any), checkBoxState !== CheckBoxStates.CHECKED ); }, [elementsToHighlight, checkBoxState, toggleHighlight]); diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json index 6605f0096e88..3dc2b4461afc 100644 --- a/code/addons/actions/package.json +++ b/code/addons/actions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-actions", - "version": "7.4.6", + "version": "7.5.0-alpha.7", "description": "Get UI feedback when an action is performed on an interactive element", "keywords": [ "storybook", diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json index 7b15cfe206da..fe75629b31e9 100644 --- a/code/addons/backgrounds/package.json +++ b/code/addons/backgrounds/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-backgrounds", - "version": "7.4.6", + "version": "7.5.0-alpha.7", "description": "Switch backgrounds to view components in different settings", "keywords": [ "addon", diff --git a/code/addons/backgrounds/src/containers/BackgroundSelector.tsx b/code/addons/backgrounds/src/containers/BackgroundSelector.tsx index 078a2752a5e3..d941f178b788 100644 --- a/code/addons/backgrounds/src/containers/BackgroundSelector.tsx +++ b/code/addons/backgrounds/src/containers/BackgroundSelector.tsx @@ -18,10 +18,10 @@ import { getBackgroundColorByName } from '../helpers'; const createBackgroundSelectorItem = memoize(1000)( ( - id: string, + id: string | null, name: string, value: string, - hasSwatch: boolean, + hasSwatch: boolean | null, change: (arg: { selected: string; name: string }) => void, active: boolean ): BackgroundSelectorItem => ({ @@ -102,7 +102,7 @@ export const BackgroundSelector: FC = memo(function BackgroundSelector() { } const onBackgroundChange = useCallback( - (value: string) => { + (value: string | undefined) => { updateGlobals({ [BACKGROUNDS_PARAM_KEY]: { ...globals[BACKGROUNDS_PARAM_KEY], value } }); }, [backgroundsConfig, globals, updateGlobals] diff --git a/code/addons/backgrounds/src/helpers/index.ts b/code/addons/backgrounds/src/helpers/index.ts index 39065eec6648..c1af13cde407 100644 --- a/code/addons/backgrounds/src/helpers/index.ts +++ b/code/addons/backgrounds/src/helpers/index.ts @@ -15,7 +15,7 @@ export const isReduceMotionEnabled = () => { export const getBackgroundColorByName = ( currentSelectedValue: string, backgrounds: Background[] = [], - defaultName: string + defaultName: string | null | undefined ): string => { if (currentSelectedValue === 'transparent') { return 'transparent'; @@ -52,7 +52,7 @@ export const clearStyles = (selector: string | string[]) => { const clearStyle = (selector: string) => { const element = document.getElementById(selector) as HTMLElement; if (element) { - element.parentElement.removeChild(element); + element.parentElement?.removeChild(element); } }; @@ -70,7 +70,7 @@ export const addGridStyle = (selector: string, css: string) => { } }; -export const addBackgroundStyle = (selector: string, css: string, storyId: string) => { +export const addBackgroundStyle = (selector: string, css: string, storyId: string | null) => { const existingStyle = document.getElementById(selector) as HTMLElement; if (existingStyle) { if (existingStyle.innerHTML !== css) { @@ -85,7 +85,7 @@ export const addBackgroundStyle = (selector: string, css: string, storyId: strin // If grids already exist, we want to add the style tag BEFORE it so the background doesn't override grid const existingGridStyle = document.getElementById(gridStyleSelector) as HTMLElement; if (existingGridStyle) { - existingGridStyle.parentElement.insertBefore(style, existingGridStyle); + existingGridStyle.parentElement?.insertBefore(style, existingGridStyle); } else { document.head.appendChild(style); } diff --git a/code/addons/backgrounds/src/types/index.ts b/code/addons/backgrounds/src/types/index.ts index f1f0285ac319..1439f4cd1329 100644 --- a/code/addons/backgrounds/src/types/index.ts +++ b/code/addons/backgrounds/src/types/index.ts @@ -20,7 +20,7 @@ export interface Background { } export interface BackgroundsParameter { - default?: string; + default?: string | null; disable?: boolean; values: Background[]; } diff --git a/code/addons/backgrounds/tsconfig.json b/code/addons/backgrounds/tsconfig.json index 4c6f20a1be4d..b5a2f9a70918 100644 --- a/code/addons/backgrounds/tsconfig.json +++ b/code/addons/backgrounds/tsconfig.json @@ -2,6 +2,6 @@ "extends": "../../tsconfig.json", "include": ["src/**/*"], "compilerOptions": { - "strict": false + "strict": true } } diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json index 720119d2c638..a099e1730f6b 100644 --- a/code/addons/controls/package.json +++ b/code/addons/controls/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-controls", - "version": "7.4.6", + "version": "7.5.0-alpha.7", "description": "Interact with component inputs dynamically in the Storybook UI", "keywords": [ "addon", diff --git a/code/addons/controls/template/stories/basics.stories.ts b/code/addons/controls/template/stories/basics.stories.ts index aabbda0e4d4c..812f66ebc0e3 100644 --- a/code/addons/controls/template/stories/basics.stories.ts +++ b/code/addons/controls/template/stories/basics.stories.ts @@ -26,8 +26,8 @@ export default { control: { type: 'radio', options: ['a', 'b', 'c'], labels: ['alpha', 'beta', 'gamma'] }, }, inlineRadio: { control: { type: 'inline-radio', options: ['a', 'b', 'c'] } }, - select: { control: { type: 'select', options: ['a', 'b', 'c'] } }, - multiSelect: { control: { type: 'multi-select', options: ['a', 'b', 'c'] } }, + select: { control: 'select', options: ['a', 'b', 'c', 'double space'] }, + multiSelect: { control: { type: 'multi-select' }, options: ['a', 'b', 'c', 'double space'] }, range: { control: 'range' }, rangeCustom: { control: { type: 'range', min: 0, max: 1000, step: 100 } }, text: { control: 'text' }, diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json index e0d68e1a34c2..4f650989b51a 100644 --- a/code/addons/docs/package.json +++ b/code/addons/docs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-docs", - "version": "7.4.6", + "version": "7.5.0-alpha.7", "description": "Document component usage and properties in Markdown", "keywords": [ "addon", @@ -119,9 +119,11 @@ "ts-dedent": "^2.0.0" }, "devDependencies": { + "@rollup/pluginutils": "^5.0.2", "react": "^16.14.0", "react-dom": "^16.8.0", - "typescript": "~4.9.3" + "typescript": "~4.9.3", + "vite": "^4.0.4" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", diff --git a/code/addons/docs/src/DocsRenderer.tsx b/code/addons/docs/src/DocsRenderer.tsx index 1940a2a0e25b..42d8d279b749 100644 --- a/code/addons/docs/src/DocsRenderer.tsx +++ b/code/addons/docs/src/DocsRenderer.tsx @@ -28,7 +28,7 @@ class ErrorBoundary extends Component<{ const { hasError } = this.state; const { children } = this.props; - return hasError ? null : children; + return hasError ? null : <>{children}; } } diff --git a/code/builders/builder-vite/src/plugins/mdx-plugin.ts b/code/addons/docs/src/plugins/mdx-plugin.ts similarity index 97% rename from code/builders/builder-vite/src/plugins/mdx-plugin.ts rename to code/addons/docs/src/plugins/mdx-plugin.ts index 8e4b51f16d6e..82f754fd3cd8 100644 --- a/code/builders/builder-vite/src/plugins/mdx-plugin.ts +++ b/code/addons/docs/src/plugins/mdx-plugin.ts @@ -2,7 +2,7 @@ import type { Options } from '@storybook/types'; import type { Plugin } from 'vite'; import remarkSlug from 'remark-slug'; import remarkExternalLinks from 'remark-external-links'; -import { createFilter } from 'vite'; +import { createFilter } from '@rollup/pluginutils'; import { dirname, join } from 'path'; const isStorybookMdx = (id: string) => id.endsWith('stories.mdx') || id.endsWith('story.mdx'); diff --git a/code/builders/builder-vite/src/plugins/mdx-plugin.types.d.ts b/code/addons/docs/src/plugins/mdx-plugin.types.d.ts similarity index 100% rename from code/builders/builder-vite/src/plugins/mdx-plugin.types.d.ts rename to code/addons/docs/src/plugins/mdx-plugin.types.d.ts diff --git a/code/addons/docs/src/preset.ts b/code/addons/docs/src/preset.ts index 1931f0bcc32c..22b5834c9e9a 100644 --- a/code/addons/docs/src/preset.ts +++ b/code/addons/docs/src/preset.ts @@ -135,7 +135,7 @@ async function webpack( export const createStoriesMdxIndexer = (legacyMdx1?: boolean): Indexer => ({ test: /(stories|story)\.mdx$/, - index: async (fileName, opts) => { + createIndex: async (fileName, opts) => { let code = (await fs.readFile(fileName, 'utf-8')).toString(); const { compile } = legacyMdx1 ? await import('@storybook/mdx1-csf') @@ -175,6 +175,15 @@ export const addons: StorybookConfig['addons'] = [ require.resolve('@storybook/react-dom-shim/dist/preset'), ]; +export const viteFinal = async (config: any, options: Options) => { + const { plugins = [] } = config; + const { mdxPlugin } = await import('./plugins/mdx-plugin'); + + plugins.push(mdxPlugin(options)); + + return config; +}; + /* * This is a workaround for https://github.com/Swatinem/rollup-plugin-dts/issues/162 * something down the dependency chain is using typescript namespaces, which are not supported by rollup-plugin-dts diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json index 92e750725ad3..015afccc0638 100644 --- a/code/addons/essentials/package.json +++ b/code/addons/essentials/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-essentials", - "version": "7.4.6", + "version": "7.5.0-alpha.7", "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 3b8a10f99ee2..33240b29217c 100644 --- a/code/addons/gfm/package.json +++ b/code/addons/gfm/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-mdx-gfm", - "version": "7.4.6", + "version": "7.5.0-alpha.7", "description": "GitHub Flavored Markdown in Storybook", "keywords": [ "addon", diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json index 9046da0e47cd..36a3a6489265 100644 --- a/code/addons/highlight/package.json +++ b/code/addons/highlight/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-highlight", - "version": "7.4.6", + "version": "7.5.0-alpha.7", "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 41d6c93900b5..62dcd0a89340 100644 --- a/code/addons/interactions/package.json +++ b/code/addons/interactions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-interactions", - "version": "7.4.6", + "version": "7.5.0-alpha.7", "description": "Automate, test and debug user interactions", "keywords": [ "storybook-addons", @@ -91,7 +91,7 @@ "@devtools-ds/object-inspector": "^1.1.2", "@storybook/jest": "next", "@storybook/testing-library": "next", - "@types/node": "^16.0.0", + "@types/node": "^18.0.0", "formik": "^2.2.9", "typescript": "~4.9.3" }, diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json index e94fe77ff55b..70dd41fc32f1 100644 --- a/code/addons/jest/package.json +++ b/code/addons/jest/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-jest", - "version": "7.4.6", + "version": "7.5.0-alpha.7", "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 92896f6abf04..b16d8bc3751f 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-links", - "version": "7.4.6", + "version": "7.5.0-alpha.7", "description": "Link stories together to build demos and prototypes with your UI components", "keywords": [ "addon", diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json index 15cbfe34526e..df93a5a67933 100644 --- a/code/addons/measure/package.json +++ b/code/addons/measure/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-measure", - "version": "7.4.6", + "version": "7.5.0-alpha.7", "description": "Inspect layouts by visualizing the box model", "keywords": [ "storybook-addons", diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json index b3fbe13b50ce..14f3d3e1c191 100644 --- a/code/addons/outline/package.json +++ b/code/addons/outline/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-outline", - "version": "7.4.6", + "version": "7.5.0-alpha.7", "description": "Outline all elements with CSS to help with layout placement and alignment", "keywords": [ "storybook-addons", diff --git a/code/addons/storyshots-core/package.json b/code/addons/storyshots-core/package.json index 72d858a56fa8..dcf764e843cd 100644 --- a/code/addons/storyshots-core/package.json +++ b/code/addons/storyshots-core/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storyshots", - "version": "7.4.6", + "version": "7.5.0-alpha.7", "description": "Take a code snapshot of every story automatically with Jest", "keywords": [ "addon", diff --git a/code/addons/storyshots-puppeteer/README.md b/code/addons/storyshots-puppeteer/README.md index 2175c1d436d4..de7d4d801326 100644 --- a/code/addons/storyshots-puppeteer/README.md +++ b/code/addons/storyshots-puppeteer/README.md @@ -19,7 +19,7 @@ When running Puppeteer tests for your stories, you have two options: - Have a storybook running (ie. accessible via http(s), for instance using `npm run storybook`) - Have a static build of the storybook (for instance, using `npm run build-storybook`) -Then you will need to reference the storybook URL (`file://...` if local, `http(s)://...` if served) +Then you will need to reference the storybook URL (`http(s)://...`) ## _puppeteerTest_ @@ -72,21 +72,6 @@ initStoryshots({ The above config will use __ for tests. You can also use query parameters in your URL (e.g. for setting a different background for your storyshots, if you use `@storybook/addon-backgrounds`). -You may also use a local static build of storybook if you do not want to run the webpack dev-server: - -```js -import initStoryshots from '@storybook/addon-storyshots'; -import { puppeteerTest } from '@storybook/addon-storyshots-puppeteer'; - -initStoryshots({ - suite: 'Puppeteer storyshots', - test: puppeteerTest({ - storybookUrl: 'file:///path/to/my/storybook-static', - // storybookUrl: 'file://${path.resolve(__dirname, '../storybook-static')}' - }), -}); -``` - ### Specifying options to _goto()_ (Puppeteer API) You might use `getGotoOptions` to specify options when the storybook is navigating to a story (using the `goto` method). Will be passed to [Puppeteer .goto() fn](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagegotourl-options) diff --git a/code/addons/storyshots-puppeteer/package.json b/code/addons/storyshots-puppeteer/package.json index 318f937d8dc5..61d4d5d857d9 100644 --- a/code/addons/storyshots-puppeteer/package.json +++ b/code/addons/storyshots-puppeteer/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storyshots-puppeteer", - "version": "7.4.6", + "version": "7.5.0-alpha.7", "description": "Image snapshots addition to StoryShots based on puppeteer", "keywords": [ "addon", diff --git a/code/addons/storysource/package.json b/code/addons/storysource/package.json index dbb5c23c75ae..8a7dc88b66c5 100644 --- a/code/addons/storysource/package.json +++ b/code/addons/storysource/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storysource", - "version": "7.4.6", + "version": "7.5.0-alpha.7", "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/README.md b/code/addons/themes/README.md index 52c20f5dfeb9..94c5dc846336 100644 --- a/code/addons/themes/README.md +++ b/code/addons/themes/README.md @@ -2,7 +2,7 @@ Storybook Addon Themes can be used which between multiple themes for components inside the preview in [Storybook](https://storybook.js.org). -![React Storybook Screenshot](https://user-images.githubusercontent.com/42671/98158421-dada2300-1ea8-11eb-8619-af1e7018e1ec.png) +![React Storybook Screenshot](https://user-images.githubusercontent.com/18172605/274302488-77a39112-cdbe-4d16-9966-0d8e9e7e3399.gif) ## Usage diff --git a/code/addons/themes/docs/api.md b/code/addons/themes/docs/api.md index 36138394d93b..b499dd945744 100644 --- a/code/addons/themes/docs/api.md +++ b/code/addons/themes/docs/api.md @@ -7,7 +7,7 @@ Takes your provider component, global styles, and theme(s)to wrap your stories in. ```js -import { withThemeFromJSXProvider } from '@storybook/addon-styling'; +import { withThemeFromJSXProvider } from '@storybook/addon-themes'; export const decorators = [ withThemeFromJSXProvider({ @@ -36,7 +36,7 @@ Available options: Takes your theme class names to apply your parent element to enable your theme(s). ```js -import { withThemeByClassName } from '@storybook/addon-styling'; +import { withThemeByClassName } from '@storybook/addon-themes'; export const decorators = [ withThemeByClassName({ @@ -62,7 +62,7 @@ Available options: Takes your theme names and data attribute to apply your parent element to enable your theme(s). ```js -import { withThemeByDataAttribute } from '@storybook/addon-styling'; +import { withThemeByDataAttribute } from '@storybook/addon-themes'; export const decorators = [ withThemeByDataAttribute({ @@ -94,7 +94,7 @@ If none of these decorators work for your library there is still hope. We've pro Pulls the selected theme from storybook's global state. ```js -import { DecoratorHelpers } from '@storybook/addon-styling'; +import { DecoratorHelpers } from '@storybook/addon-themes'; const { pluckThemeFromContext } = DecoratorHelpers; export const myCustomDecorator = @@ -111,7 +111,7 @@ export const myCustomDecorator = Returns the theme parameters for this addon. ```js -import { DecoratorHelpers } from '@storybook/addon-styling'; +import { DecoratorHelpers } from '@storybook/addon-themes'; const { useThemeParameters } = DecoratorHelpers; export const myCustomDecorator = @@ -128,7 +128,7 @@ export const myCustomDecorator = Used to register the themes and defaultTheme with the addon state. ```js -import { DecoratorHelpers } from '@storybook/addon-styling'; +import { DecoratorHelpers } from '@storybook/addon-themes'; const { initializeThemeState } = DecoratorHelpers; export const myCustomDecorator = ({ themes, defaultState, ...rest }) => { @@ -147,7 +147,7 @@ Let's use Vuetify as an example. Vuetify uses it's own global state to know whic ```js // .storybook/withVeutifyTheme.decorator.js -import { DecoratorHelpers } from '@storybook/addon-styling'; +import { DecoratorHelpers } from '@storybook/addon-themes'; import { useTheme } from 'vuetify'; const { initializeThemeState, pluckThemeFromContext, useThemeParameters } = DecoratorHelpers; diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json index 7e93539401ef..928c0f92576d 100644 --- a/code/addons/themes/package.json +++ b/code/addons/themes/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-themes", - "version": "7.4.6", + "version": "7.5.0-alpha.7", "description": "Switch between multiple themes for you components in Storybook", "keywords": [ "css", @@ -114,6 +114,6 @@ "unsupportedFrameworks": [ "react-native" ], - "icon": "" + "icon": "https://user-images.githubusercontent.com/18172605/264114587-e4b32190-a9b7-4afa-b739-c873fc0498a6.png" } } diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json index e9d8c4e12f78..6c7ec9f7912e 100644 --- a/code/addons/toolbars/package.json +++ b/code/addons/toolbars/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-toolbars", - "version": "7.4.6", + "version": "7.5.0-alpha.7", "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 121cf31f2d2c..0da35956374c 100644 --- a/code/addons/viewport/package.json +++ b/code/addons/viewport/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-viewport", - "version": "7.4.6", + "version": "7.5.0-alpha.7", "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 15333f23b8c0..52272479d6b8 100644 --- a/code/builders/builder-manager/package.json +++ b/code/builders/builder-manager/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-manager", - "version": "7.4.6", + "version": "7.5.0-alpha.7", "description": "Storybook manager builder", "keywords": [ "storybook" diff --git a/code/builders/builder-manager/src/utils/files.test.ts b/code/builders/builder-manager/src/utils/files.test.ts index c3f1157b11d4..3a76234ec8d1 100644 --- a/code/builders/builder-manager/src/utils/files.test.ts +++ b/code/builders/builder-manager/src/utils/files.test.ts @@ -1,3 +1,4 @@ +import type { OutputFile } from 'esbuild'; import { platform } from 'os'; import { sanitizePath } from './files'; @@ -9,12 +10,13 @@ test('sanitizePath', () => { ? 'C:\\Users\\username\\Projects\\projectname\\storybook' : '/Users/username/Projects/projectname/storybook'; const text = 'demo text'; - const file = { + const file: OutputFile = { path: isWindows ? 'C:\\Users\\username\\Projects\\projectname\\storybook\\node_modules\\@storybook\\addon-x+y\\dist\\manager.js' : '/Users/username/Projects/projectname/storybook/node_modules/@storybook/addon-x+y/dist/manager.js', contents: Uint8Array.from(Array.from(text).map((letter) => letter.charCodeAt(0))), text, + hash: '', }; const { location, url } = sanitizePath(file, addonsDir); diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json index 6c1eb02bd7c1..9793c4e5984d 100644 --- a/code/builders/builder-vite/package.json +++ b/code/builders/builder-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-vite", - "version": "7.4.6", + "version": "7.5.0-alpha.7", "description": "A plugin to run and build Storybooks with Vite", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/builders/builder-vite/#readme", "bugs": { @@ -47,7 +47,6 @@ "@storybook/client-logger": "workspace:*", "@storybook/core-common": "workspace:*", "@storybook/csf-plugin": "workspace:*", - "@storybook/mdx2-csf": "^1.0.0", "@storybook/node-logger": "workspace:*", "@storybook/preview": "workspace:*", "@storybook/preview-api": "workspace:*", @@ -59,13 +58,11 @@ "find-cache-dir": "^3.0.0", "fs-extra": "^11.1.0", "magic-string": "^0.30.0", - "remark-external-links": "^8.0.0", - "remark-slug": "^6.0.0", "rollup": "^2.25.0 || ^3.3.0" }, "devDependencies": { "@types/express": "^4.17.13", - "@types/node": "^16.0.0", + "@types/node": "^18.0.0", "glob": "^10.0.0", "rollup": "^3.20.1", "slash": "^5.0.0", @@ -75,7 +72,7 @@ "peerDependencies": { "@preact/preset-vite": "*", "typescript": ">= 4.3.x", - "vite": "^3.0.0 || ^4.0.0", + "vite": "^3.0.0 || ^4.0.0 || ^5.0.0", "vite-plugin-glimmerx": "*" }, "peerDependenciesMeta": { @@ -96,9 +93,6 @@ "entries": [ "./src/index.ts" ], - "externals": [ - "@storybook/mdx1-csf" - ], "platform": "node" }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17" diff --git a/code/builders/builder-vite/src/build.ts b/code/builders/builder-vite/src/build.ts index 0a75cc71b3a2..67da9f989692 100644 --- a/code/builders/builder-vite/src/build.ts +++ b/code/builders/builder-vite/src/build.ts @@ -1,10 +1,10 @@ -import { build as viteBuild, mergeConfig } from 'vite'; import type { Options } from '@storybook/types'; import { commonConfig } from './vite-config'; import { sanitizeEnvVars } from './envs'; export async function build(options: Options) { + const { build: viteBuild, mergeConfig } = await import('vite'); const { presets } = options; const config = await commonConfig(options, 'build'); @@ -21,6 +21,5 @@ export async function build(options: Options) { }).build; const finalConfig = await presets.apply('viteFinal', config, options); - await viteBuild(await sanitizeEnvVars(options, finalConfig)); } diff --git a/code/builders/builder-vite/src/codegen-entries.ts b/code/builders/builder-vite/src/codegen-entries.ts index 6a6328cf8f96..44c3163b1def 100644 --- a/code/builders/builder-vite/src/codegen-entries.ts +++ b/code/builders/builder-vite/src/codegen-entries.ts @@ -1,15 +1,19 @@ import { loadPreviewOrConfigFile } from '@storybook/core-common'; import type { Options } from '@storybook/types'; import slash from 'slash'; -import { normalizePath } from 'vite'; import { listStories } from './list-stories'; -const absoluteFilesToImport = (files: string[], name: string) => +const absoluteFilesToImport = async ( + files: string[], + name: string, + normalizePath: (id: string) => string +) => files .map((el, i) => `import ${name ? `* as ${name}_${i} from ` : ''}'/@fs/${normalizePath(el)}'`) .join('\n'); export async function generateVirtualStoryEntryCode(options: Options) { + const { normalizePath } = await import('vite'); const storyEntries = await listStories(options); const resolveMap = storyEntries.reduce>( (prev, entry) => ({ ...prev, [entry]: entry.replace(slash(process.cwd()), '.') }), @@ -18,7 +22,7 @@ export async function generateVirtualStoryEntryCode(options: Options) { const modules = storyEntries.map((entry, i) => `${JSON.stringify(entry)}: story_${i}`).join(','); return ` - ${absoluteFilesToImport(storyEntries, 'story')} + ${await absoluteFilesToImport(storyEntries, 'story', normalizePath)} function loadable(key) { return {${modules}}[key]; diff --git a/code/builders/builder-vite/src/codegen-importfn-script.ts b/code/builders/builder-vite/src/codegen-importfn-script.ts index f81c4647f641..5df14d875f25 100644 --- a/code/builders/builder-vite/src/codegen-importfn-script.ts +++ b/code/builders/builder-vite/src/codegen-importfn-script.ts @@ -1,5 +1,5 @@ import * as path from 'path'; -import { normalizePath } from 'vite'; + import type { Options } from '@storybook/types'; import { logger } from '@storybook/node-logger'; @@ -26,6 +26,7 @@ function toImportPath(relativePath: string) { * @param stories An array of absolute story paths. */ async function toImportFn(stories: string[]) { + const { normalizePath } = await import('vite'); const objectEntries = stories.map((file) => { const ext = path.extname(file); const relativePath = normalizePath(path.relative(process.cwd(), file)); diff --git a/code/builders/builder-vite/src/list-stories.ts b/code/builders/builder-vite/src/list-stories.ts index 746373c4c0f5..521952bff15a 100644 --- a/code/builders/builder-vite/src/list-stories.ts +++ b/code/builders/builder-vite/src/list-stories.ts @@ -4,9 +4,10 @@ import { glob } from 'glob'; import { normalizeStories, commonGlobOptions } from '@storybook/core-common'; import type { Options } from '@storybook/types'; -import { normalizePath } from 'vite'; export async function listStories(options: Options) { + const { normalizePath } = await import('vite'); + return ( await Promise.all( normalizeStories(await options.presets.apply('stories', [], options), { diff --git a/code/builders/builder-vite/src/optimizeDeps.ts b/code/builders/builder-vite/src/optimizeDeps.ts index 43c64f34a7e4..ddb32c800403 100644 --- a/code/builders/builder-vite/src/optimizeDeps.ts +++ b/code/builders/builder-vite/src/optimizeDeps.ts @@ -1,5 +1,4 @@ import * as path from 'path'; -import { normalizePath, resolveConfig } from 'vite'; import type { InlineConfig as ViteInlineConfig, UserConfig } from 'vite'; import type { Options } from '@storybook/types'; import { listStories } from './list-stories'; @@ -128,6 +127,7 @@ const asyncFilter = async (arr: string[], predicate: (val: string) => Promise normalizePath(path.relative(root, storyPath))); // TODO: check if resolveConfig takes a lot of time, possible optimizations here diff --git a/code/builders/builder-vite/src/plugins/external-globals-plugin.ts b/code/builders/builder-vite/src/plugins/external-globals-plugin.ts index dd53ab4a4e56..1debc299aa99 100644 --- a/code/builders/builder-vite/src/plugins/external-globals-plugin.ts +++ b/code/builders/builder-vite/src/plugins/external-globals-plugin.ts @@ -3,7 +3,6 @@ import findCacheDirectory from 'find-cache-dir'; import { init, parse } from 'es-module-lexer'; import MagicString from 'magic-string'; import { ensureFile, writeFile } from 'fs-extra'; -import { mergeAlias } from 'vite'; import type { Alias, Plugin } from 'vite'; const escapeKeys = (key: string) => key.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&'); @@ -38,6 +37,8 @@ const replacementMap = new Map([ */ export async function externalGlobalsPlugin(externals: Record) { await init; + const { mergeAlias } = await import('vite'); + return { name: 'storybook:external-globals-plugin', enforce: 'post', diff --git a/code/builders/builder-vite/src/plugins/index.ts b/code/builders/builder-vite/src/plugins/index.ts index bccebbdb4833..68e540908dc6 100644 --- a/code/builders/builder-vite/src/plugins/index.ts +++ b/code/builders/builder-vite/src/plugins/index.ts @@ -1,5 +1,4 @@ export * from './inject-export-order-plugin'; -export * from './mdx-plugin'; export * from './strip-story-hmr-boundaries'; export * from './code-generator-plugin'; export * from './csf-plugin'; diff --git a/code/builders/builder-vite/src/plugins/inject-export-order-plugin.ts b/code/builders/builder-vite/src/plugins/inject-export-order-plugin.ts index 743043f7427c..621dae80e647 100644 --- a/code/builders/builder-vite/src/plugins/inject-export-order-plugin.ts +++ b/code/builders/builder-vite/src/plugins/inject-export-order-plugin.ts @@ -1,32 +1,35 @@ import { parse } from 'es-module-lexer'; import MagicString from 'magic-string'; -import { createFilter } from 'vite'; -const include = [/\.stories\.([tj])sx?$/, /(stories|story).mdx$/]; -const filter = createFilter(include); +export async function injectExportOrderPlugin() { + const { createFilter } = await import('vite'); -export const injectExportOrderPlugin = { - name: 'storybook:inject-export-order-plugin', - // This should only run after the typescript has been transpiled - enforce: 'post', - async transform(code: string, id: string) { - if (!filter(id)) return undefined; + const include = [/\.stories\.([tj])sx?$/, /(stories|story).mdx$/]; + const filter = createFilter(include); - // TODO: Maybe convert `injectExportOrderPlugin` to function that returns object, - // and run `await init;` once and then call `parse()` without `await`, - // instead of calling `await parse()` every time. - const [, exports] = await parse(code); + return { + name: 'storybook:inject-export-order-plugin', + // This should only run after the typescript has been transpiled + enforce: 'post', + async transform(code: string, id: string) { + if (!filter(id)) return undefined; - if (exports.includes('__namedExportsOrder')) { - // user has defined named exports already - return undefined; - } - const s = new MagicString(code); - const orderedExports = exports.filter((e) => e !== 'default'); - s.append(`;export const __namedExportsOrder = ${JSON.stringify(orderedExports)};`); - return { - code: s.toString(), - map: s.generateMap({ hires: true, source: id }), - }; - }, -}; + // TODO: Maybe convert `injectExportOrderPlugin` to function that returns object, + // and run `await init;` once and then call `parse()` without `await`, + // instead of calling `await parse()` every time. + const [, exports] = await parse(code); + + if (exports.includes('__namedExportsOrder')) { + // user has defined named exports already + return undefined; + } + const s = new MagicString(code); + const orderedExports = exports.filter((e) => e !== 'default'); + s.append(`;export const __namedExportsOrder = ${JSON.stringify(orderedExports)};`); + return { + code: s.toString(), + map: s.generateMap({ hires: true, source: id }), + }; + }, + }; +} diff --git a/code/builders/builder-vite/src/plugins/strip-story-hmr-boundaries.ts b/code/builders/builder-vite/src/plugins/strip-story-hmr-boundaries.ts index 46ca7045e6d5..c249fc523d1a 100644 --- a/code/builders/builder-vite/src/plugins/strip-story-hmr-boundaries.ts +++ b/code/builders/builder-vite/src/plugins/strip-story-hmr-boundaries.ts @@ -1,5 +1,4 @@ import type { Plugin } from 'vite'; -import { createFilter } from 'vite'; import MagicString from 'magic-string'; /** @@ -7,7 +6,9 @@ import MagicString from 'magic-string'; * as hmr boundaries, but vite has a bug which causes them to be treated as boundaries * (https://github.com/vitejs/vite/issues/9869). */ -export function stripStoryHMRBoundary(): Plugin { +export async function stripStoryHMRBoundary(): Promise { + const { createFilter } = await import('vite'); + const filter = createFilter(/\.stories\.([tj])sx?$/); return { name: 'storybook:strip-hmr-boundary-plugin', diff --git a/code/builders/builder-vite/src/vite-config.ts b/code/builders/builder-vite/src/vite-config.ts index a832f2e92a96..24db49249909 100644 --- a/code/builders/builder-vite/src/vite-config.ts +++ b/code/builders/builder-vite/src/vite-config.ts @@ -1,5 +1,4 @@ import * as path from 'path'; -import { loadConfigFromFile, mergeConfig } from 'vite'; import findCacheDirectory from 'find-cache-dir'; import type { ConfigEnv, @@ -15,7 +14,6 @@ import { codeGeneratorPlugin, csfPlugin, injectExportOrderPlugin, - mdxPlugin, stripStoryHMRBoundary, externalGlobalsPlugin, } from './plugins'; @@ -42,6 +40,8 @@ export async function commonConfig( _type: PluginConfigType ): Promise { const configEnv = _type === 'development' ? configEnvServe : configEnvBuild; + const { loadConfigFromFile, mergeConfig } = await import('vite'); + const { viteConfigPath } = await getBuilderOptions(options); const projectRoot = path.resolve(options.configDir, '..'); @@ -81,9 +81,8 @@ export async function pluginConfig(options: Options) { const plugins = [ codeGeneratorPlugin(options), await csfPlugin(options), - await mdxPlugin(options), - injectExportOrderPlugin, - stripStoryHMRBoundary(), + await injectExportOrderPlugin(), + await stripStoryHMRBoundary(), { name: 'storybook:allow-storybook-dir', enforce: 'post', diff --git a/code/builders/builder-vite/src/vite-server.ts b/code/builders/builder-vite/src/vite-server.ts index 13489d8580e5..ce4631cabaed 100644 --- a/code/builders/builder-vite/src/vite-server.ts +++ b/code/builders/builder-vite/src/vite-server.ts @@ -1,5 +1,4 @@ import type { Server } from 'http'; -import { createServer } from 'vite'; import type { Options } from '@storybook/types'; import { commonConfig } from './vite-config'; import { getOptimizeDeps } from './optimizeDeps'; @@ -29,5 +28,6 @@ export async function createViteServer(options: Options, devServer: Server) { const finalConfig = await presets.apply('viteFinal', config, options); + const { createServer } = await import('vite'); return createServer(await sanitizeEnvVars(options, finalConfig)); } diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json index 7e0f44134888..14d610d90cf4 100644 --- a/code/builders/builder-webpack5/package.json +++ b/code/builders/builder-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-webpack5", - "version": "7.4.6", + "version": "7.5.0-alpha.7", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" @@ -56,25 +56,17 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@babel/core": "^7.22.9", - "@storybook/addons": "workspace:*", + "@babel/core": "^7.22.0", "@storybook/channels": "workspace:*", - "@storybook/client-api": "workspace:*", "@storybook/client-logger": "workspace:*", - "@storybook/components": "workspace:*", "@storybook/core-common": "workspace:*", "@storybook/core-events": "workspace:*", "@storybook/core-webpack": "workspace:*", - "@storybook/global": "^5.0.0", - "@storybook/manager-api": "workspace:*", "@storybook/node-logger": "workspace:*", "@storybook/preview": "workspace:*", "@storybook/preview-api": "workspace:*", - "@storybook/router": "workspace:*", - "@storybook/store": "workspace:*", - "@storybook/theming": "workspace:*", - "@swc/core": "^1.3.49", - "@types/node": "^16.0.0", + "@swc/core": "^1.3.82", + "@types/node": "^18.0.0", "@types/semver": "^7.3.4", "babel-loader": "^9.0.0", "babel-plugin-named-exports-order": "^0.0.2", @@ -110,10 +102,6 @@ "slash": "^5.0.0", "typescript": "~4.9.3" }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" - }, "peerDependenciesMeta": { "typescript": { "optional": true diff --git a/code/builders/builder-webpack5/src/index.ts b/code/builders/builder-webpack5/src/index.ts index 0106cfea091d..a5624c9816a5 100644 --- a/code/builders/builder-webpack5/src/index.ts +++ b/code/builders/builder-webpack5/src/index.ts @@ -9,6 +9,11 @@ import { dirname, join, parse } from 'path'; import express from 'express'; import fs from 'fs-extra'; import { PREVIEW_BUILDER_PROGRESS } from '@storybook/core-events'; +import { + WebpackCompilationError, + WebpackInvocationError, + WebpackMissingStatsError, +} from '@storybook/core-events/server-errors'; import prettyTime from 'pretty-hrtime'; @@ -117,21 +122,19 @@ const starter: StarterFunction = async function* starterGeneratorFn({ yield; const config = await getConfig(options); + + if (config.stats === 'none' || config.stats === 'summary') { + throw new WebpackMissingStatsError(); + } yield; + const compiler = webpackInstance(config); if (!compiler) { - const err = `${config.name}: missing webpack compiler at runtime!`; - logger.error(err); - return { - bail, - totalTime: process.hrtime(startTime), - stats: { - hasErrors: () => true, - hasWarnings: () => false, - toJson: () => ({ warnings: [] as any[], errors: [err] }), - } as any as Stats, - }; + throw new WebpackInvocationError({ + // eslint-disable-next-line local-rules/no-uncategorized-errors + error: new Error(`Missing Webpack compiler at runtime!`), + }); } yield; @@ -172,6 +175,7 @@ const starter: StarterFunction = async function* starterGeneratorFn({ const middlewareOptions: Parameters[1] = { publicPath: config.output?.publicPath as string, writeToDisk: true, + stats: 'errors-only', }; compilation = webpackDevMiddleware(compiler, middlewareOptions); @@ -184,19 +188,24 @@ const starter: StarterFunction = async function* starterGeneratorFn({ router.use(compilation); router.use(webpackHotMiddleware(compiler, { log: false })); - const stats = await new Promise((ready, stop) => { - compilation?.waitUntilValid(ready as any); - reject = stop; + const stats = await new Promise((res, rej) => { + compilation?.waitUntilValid(res as any); + reject = rej; }); yield; if (!stats) { - throw new Error('no stats after building preview'); + throw new WebpackMissingStatsError(); } - if (stats.hasErrors()) { - // eslint-disable-next-line @typescript-eslint/no-throw-literal - throw stats; + const { warnings, errors } = getWebpackStats({ config, stats }); + + if (warnings.length > 0) { + warnings?.forEach((e) => logger.warn(e.message)); + } + + if (errors.length > 0) { + throw new WebpackCompilationError({ errors }); } return { @@ -206,6 +215,22 @@ const starter: StarterFunction = async function* starterGeneratorFn({ }; }; +function getWebpackStats({ config, stats }: { config: Configuration; stats: Stats }) { + const statsOptions = + typeof config.stats === 'string' + ? config.stats + : { + ...(config.stats as StatsOptions), + warnings: true, + errors: true, + }; + const { warnings = [], errors = [] } = stats?.toJson(statsOptions) || {}; + return { + warnings, + errors, + }; +} + /** * This function is a generator so that we can abort it mid process * in case of failure coming from other processes e.g. manager builder @@ -215,73 +240,48 @@ const starter: StarterFunction = async function* starterGeneratorFn({ const builder: BuilderFunction = async function* builderGeneratorFn({ startTime, options }) { const webpackInstance = await executor.get(options); yield; - logger.info('=> Compiling preview..'); const config = await getConfig(options); + + if (config.stats === 'none' || config.stats === 'summary') { + throw new WebpackMissingStatsError(); + } yield; const compiler = webpackInstance(config); if (!compiler) { - const err = `${config.name}: missing webpack compiler at runtime!`; - logger.error(err); - return { - hasErrors: () => true, - hasWarnings: () => false, - toJson: () => ({ warnings: [] as any[], errors: [err] }), - } as any as Stats; + throw new WebpackInvocationError({ + // eslint-disable-next-line local-rules/no-uncategorized-errors + error: new Error(`Missing Webpack compiler at runtime!`), + }); } const webpackCompilation = new Promise((succeed, fail) => { compiler.run((error, stats) => { - if (error || !stats || stats.hasErrors()) { - logger.error('=> Failed to build the preview'); - process.exitCode = 1; - - if (error) { - logger.error(error.message); + if (error) { + compiler.close(() => fail(new WebpackInvocationError({ error }))); + return; + } - compiler.close(() => fail(error)); + if (!stats) { + throw new WebpackMissingStatsError(); + } - return; - } + const { warnings, errors } = getWebpackStats({ config, stats }); - if (stats && (stats.hasErrors() || stats.hasWarnings())) { - const { warnings = [], errors = [] } = stats.toJson( - typeof config.stats === 'string' - ? config.stats - : { - warnings: true, - errors: true, - ...(config.stats as StatsOptions), - } - ); - - errors.forEach((e) => logger.error(e.message)); - warnings.forEach((e) => logger.error(e.message)); - - compiler.close(() => - options.debugWebpack - ? fail(stats) - : fail(new Error('=> Webpack failed, learn more with --debug-webpack')) - ); - - return; - } + if (warnings.length > 0) { + warnings?.forEach((e) => logger.warn(e.message)); } - logger.trace({ message: '=> Preview built', time: process.hrtime(startTime) }); - if (stats && stats.hasWarnings()) { - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- we know it has warnings because of hasWarnings() - stats - .toJson({ warnings: true } as StatsOptions) - .warnings!.forEach((e) => logger.warn(e.message)); + if (errors.length > 0) { + errors.forEach((e) => logger.error(e.message)); + compiler.close(() => fail(new WebpackCompilationError({ errors }))); + return; } - // https://webpack.js.org/api/node/#run - // #15227 compiler.close((closeErr) => { if (closeErr) { - return fail(closeErr); + return fail(new WebpackInvocationError({ error: closeErr })); } return succeed(stats as Stats); diff --git a/code/chromatic.config.json b/code/chromatic.config.json new file mode 100644 index 000000000000..01493ceba46a --- /dev/null +++ b/code/chromatic.config.json @@ -0,0 +1,8 @@ +{ + "projectId": "Project:635781f3500dd2c49e189caf", + "projectToken": "80b312430ec4", + "buildScriptName": "storybook:ui:build", + "onlyChanged": true, + "storybookConfigDir": "./ui/.storybook", + "storybookBaseDir": "./code" +} diff --git a/code/deprecated/addons/package.json b/code/deprecated/addons/package.json index 933f41e2be28..81815919529c 100644 --- a/code/deprecated/addons/package.json +++ b/code/deprecated/addons/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addons", - "version": "7.4.6", + "version": "7.5.0-alpha.7", "description": "Storybook addons store", "keywords": [ "storybook" diff --git a/code/deprecated/channel-postmessage/package.json b/code/deprecated/channel-postmessage/package.json index 6e5ee2df0353..2989b4e0d491 100644 --- a/code/deprecated/channel-postmessage/package.json +++ b/code/deprecated/channel-postmessage/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channel-postmessage", - "version": "7.4.6", + "version": "7.5.0-alpha.7", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/channel-websocket/package.json b/code/deprecated/channel-websocket/package.json index bb8e5ea2f625..e86a69d95a33 100644 --- a/code/deprecated/channel-websocket/package.json +++ b/code/deprecated/channel-websocket/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channel-websocket", - "version": "7.4.6", + "version": "7.5.0-alpha.7", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/client-api/package.json b/code/deprecated/client-api/package.json index d9a4257d3f93..f98cb0bfd8e9 100644 --- a/code/deprecated/client-api/package.json +++ b/code/deprecated/client-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/client-api", - "version": "7.4.6", + "version": "7.5.0-alpha.7", "description": "Storybook Client API", "keywords": [ "storybook" diff --git a/code/deprecated/core-client/package.json b/code/deprecated/core-client/package.json index a8eb8382a05c..5f4b3e91ae22 100644 --- a/code/deprecated/core-client/package.json +++ b/code/deprecated/core-client/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-client", - "version": "7.4.6", + "version": "7.5.0-alpha.7", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/deprecated/manager-api-shim/package.json b/code/deprecated/manager-api-shim/package.json index 4ffeb0f8da6d..739058f57b4c 100644 --- a/code/deprecated/manager-api-shim/package.json +++ b/code/deprecated/manager-api-shim/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/api", - "version": "7.4.6", + "version": "7.5.0-alpha.7", "description": "Storybook Manager API (facade)", "keywords": [ "storybook" diff --git a/code/deprecated/preview-web/package.json b/code/deprecated/preview-web/package.json index b79684d91d72..c7313c8955e7 100644 --- a/code/deprecated/preview-web/package.json +++ b/code/deprecated/preview-web/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preview-web", - "version": "7.4.6", + "version": "7.5.0-alpha.7", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/store/package.json b/code/deprecated/store/package.json index 5746677b7180..9b71f7c27b85 100644 --- a/code/deprecated/store/package.json +++ b/code/deprecated/store/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/store", - "version": "7.4.6", + "version": "7.5.0-alpha.7", "description": "", "keywords": [ "storybook" @@ -55,6 +55,5 @@ ], "platform": "node", "shim": "@storybook/preview-api/dist/store" - }, - "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17" + } } diff --git a/code/e2e-tests/addon-controls.spec.ts b/code/e2e-tests/addon-controls.spec.ts index bcbf96019947..df376782aae8 100644 --- a/code/e2e-tests/addon-controls.spec.ts +++ b/code/e2e-tests/addon-controls.spec.ts @@ -70,4 +70,31 @@ test.describe('addon-controls', () => { const label = await sbPage.panelContent().locator('textarea[name=label]').inputValue(); await expect(label).toEqual('Hello world'); }); + + test('should set select option when value contains double spaces', async ({ page }) => { + await page.goto(`${storybookUrl}?path=/story/addons-controls-basics--undefined`); + + const sbPage = new SbPage(page); + await sbPage.waitUntilLoaded(); + await sbPage.viewAddonPanel('Controls'); + await sbPage.panelContent().locator('#control-select').selectOption('double space'); + + await expect(sbPage.panelContent().locator('#control-select')).toHaveValue('double space'); + await expect(page).toHaveURL(/.*select:double\+\+space.*/); + }); + + test('should set multiselect option when value contains double spaces', async ({ page }) => { + await page.goto(`${storybookUrl}?path=/story/addons-controls-basics--undefined`); + + const sbPage = new SbPage(page); + await sbPage.waitUntilLoaded(); + await sbPage.viewAddonPanel('Controls'); + await sbPage.panelContent().locator('#control-multiSelect').selectOption('double space'); + + await expect(sbPage.panelContent().locator('#control-multiSelect')).toHaveValue( + 'double space' + ); + + await expect(page).toHaveURL(/.*multiSelect\[0]:double\+\+space.*/); + }); }); diff --git a/code/e2e-tests/framework-svelte.spec.ts b/code/e2e-tests/framework-svelte.spec.ts new file mode 100644 index 000000000000..007f1182c781 --- /dev/null +++ b/code/e2e-tests/framework-svelte.spec.ts @@ -0,0 +1,40 @@ +/* eslint-disable jest/no-disabled-tests */ +import { test, expect } from '@playwright/test'; +import process from 'process'; +import { SbPage } from './util'; + +const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:6006'; +const templateName = process.env.STORYBOOK_TEMPLATE_NAME; + +test.describe('Svelte', () => { + test.skip( + // eslint-disable-next-line jest/valid-title + !templateName?.includes('svelte'), + 'Only run this test on Svelte' + ); + + test.beforeEach(async ({ page }) => { + await page.goto(storybookUrl); + await new SbPage(page).waitUntilLoaded(); + }); + + test('JS story has auto-generated args table', async ({ page }) => { + const sbPage = new SbPage(page); + + await sbPage.navigateToStory('stories/renderers/svelte/js-docs', 'docs'); + const root = sbPage.previewRoot(); + const argsTable = root.locator('.docblock-argstable'); + await expect(argsTable).toContainText('Rounds the button'); + }); + + test('TS story has auto-generated args table', async ({ page }) => { + // eslint-disable-next-line jest/valid-title + test.skip(!templateName?.endsWith('ts') || false, 'Only test TS story in TS templates'); + const sbPage = new SbPage(page); + + await sbPage.navigateToStory('stories/renderers/svelte/ts-docs', 'docs'); + const root = sbPage.previewRoot(); + const argsTable = root.locator('.docblock-argstable'); + await expect(argsTable).toContainText('Rounds the button'); + }); +}); diff --git a/code/e2e-tests/navigation.spec.ts b/code/e2e-tests/navigation.spec.ts new file mode 100644 index 000000000000..c7ac1a1263d7 --- /dev/null +++ b/code/e2e-tests/navigation.spec.ts @@ -0,0 +1,22 @@ +import { test, expect } from '@playwright/test'; +import process from 'process'; +import { SbPage } from './util'; + +const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001'; + +test.describe('navigating', () => { + test('a URL with a partial storyId will redirect to the first story', async ({ page }) => { + // this is purposefully not using the SbPage class, and the URL is a partial (it does not contain the full storyId) + await page.goto(`${storybookUrl}?path=/story/example-button`); + + const sbPage = new SbPage(page); + + await sbPage.waitUntilLoaded(); + + await page.waitForFunction(() => + window.document.location.href.match('/docs/example-button--docs') + ); + + await expect(sbPage.page.url()).toContain('/docs/example-button--docs'); + }); +}); diff --git a/code/frameworks/angular/README.md b/code/frameworks/angular/README.md index 3158060f3f9a..d97e1ab93f2a 100644 --- a/code/frameworks/angular/README.md +++ b/code/frameworks/angular/README.md @@ -10,7 +10,7 @@ - [moduleMetadata decorator](#modulemetadata-decorator) - [applicationConfig decorator](#applicationconfig-decorator) - [FAQ](#faq) - - [How do I migrate to a Angular Storybook builder?](#how-do-i-migrate-to-a-angular-storybook-builder) + - [How do I migrate to an Angular Storybook builder?](#how-do-i-migrate-to-an-angular-storybook-builder) - [Do you have only one Angular project in your workspace?](#do-you-have-only-one-angular-project-in-your-workspace) - [Adjust your `package.json`](#adjust-your-packagejson) - [I have multiple projects in my Angular workspace](#i-have-multiple-projects-in-my-angular-workspace) @@ -252,10 +252,12 @@ export const WithCustomApplicationProvider: Story = { ## FAQ -### How do I migrate to a Angular Storybook builder? +### How do I migrate to an Angular Storybook builder? The Storybook [Angular builder](https://angular.io/guide/glossary#builder) is a new way to run Storybook in an Angular workspace. It is a drop-in replacement for running `storybook dev` and `storybook build` directly. +You can run `npx storybook@next automigrate` to try let Storybook detect and automatically fix your configuration. Otherwise, you can follow the next steps to manually adjust your configuration. + #### Do you have only one Angular project in your workspace? In this case go to your `angular.json` and add `storybook` and `build-storybook` entries in `architect` section of your project like shown above. diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json index 507bdd57d1b5..7b340354946d 100644 --- a/code/frameworks/angular/package.json +++ b/code/frameworks/angular/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/angular", - "version": "7.4.6", + "version": "7.5.0-alpha.7", "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.", "keywords": [ "storybook", @@ -51,7 +51,7 @@ "@storybook/preview-api": "workspace:*", "@storybook/telemetry": "workspace:*", "@storybook/types": "workspace:*", - "@types/node": "^16.0.0", + "@types/node": "^18.0.0", "@types/react": "^16.14.34", "@types/react-dom": "^16.9.14", "@types/semver": "^7.3.4", @@ -106,7 +106,7 @@ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", "rxjs": "^6.0.0 || ^7.4.0", "typescript": "^4.0.0 || ^5.0.0", - "zone.js": "^0.8.29 || >= 0.9.0 < 1.0.0" + "zone.js": ">= 0.11.1 < 1.0.0" }, "peerDependenciesMeta": { "@angular/cli": { diff --git a/code/frameworks/angular/src/builders/build-storybook/index.ts b/code/frameworks/angular/src/builders/build-storybook/index.ts index aef361ac0790..2c72b4d46962 100644 --- a/code/frameworks/angular/src/builders/build-storybook/index.ts +++ b/code/frameworks/angular/src/builders/build-storybook/index.ts @@ -42,7 +42,14 @@ export type StorybookBuilderOptions = JsonObject & { } & Pick< // makes sure the option exists CLIOptions, - 'outputDir' | 'configDir' | 'loglevel' | 'quiet' | 'webpackStatsJson' | 'disableTelemetry' + | 'outputDir' + | 'configDir' + | 'loglevel' + | 'quiet' + | 'webpackStatsJson' + | 'disableTelemetry' + | 'debugWebpack' + | 'previewUrl' >; export type StorybookBuilderOutput = JsonObject & BuilderOutput & { [key: string]: any }; @@ -81,8 +88,10 @@ const commandBuilder: BuilderHandlerFn = ( quiet, enableProdMode = true, webpackStatsJson, + debugWebpack, disableTelemetry, assets, + previewUrl, } = options; const standaloneOptions: StandaloneBuildOptions = { @@ -103,6 +112,8 @@ const commandBuilder: BuilderHandlerFn = ( }, tsConfig, webpackStatsJson, + debugWebpack, + previewUrl, }; return standaloneOptions; diff --git a/code/frameworks/angular/src/builders/build-storybook/schema.json b/code/frameworks/angular/src/builders/build-storybook/schema.json index b0c63c455076..958e6ea7cc1f 100644 --- a/code/frameworks/angular/src/builders/build-storybook/schema.json +++ b/code/frameworks/angular/src/builders/build-storybook/schema.json @@ -29,6 +29,11 @@ "description": "Controls level of logging during build. Can be one of: [silly, verbose, info (default), warn, error, silent].", "pattern": "(silly|verbose|info|warn|silent)" }, + "debugWebpack": { + "type": "boolean", + "description": "Debug the Webpack configuration", + "default": false + }, "enableProdMode": { "type": "boolean", "description": "Disable Angular's development mode, which turns off assertions and other checks within the framework.", @@ -62,6 +67,10 @@ "description": "Write Webpack Stats JSON to disk", "default": false }, + "previewUrl": { + "type": "string", + "description": "Disables the default storybook preview and lets you use your own" + }, "styles": { "type": "array", "description": "Global styles to be included in the build.", diff --git a/code/frameworks/angular/src/builders/start-storybook/index.ts b/code/frameworks/angular/src/builders/start-storybook/index.ts index fa78f8b45d8e..b9fabda386f7 100644 --- a/code/frameworks/angular/src/builders/start-storybook/index.ts +++ b/code/frameworks/angular/src/builders/start-storybook/index.ts @@ -53,6 +53,10 @@ export type StorybookBuilderOptions = JsonObject & { | 'initialPath' | 'open' | 'docs' + | 'debugWebpack' + | 'webpackStatsJson' + | 'loglevel' + | 'previewUrl' >; export type StorybookBuilderOutput = JsonObject & BuilderOutput & {}; @@ -103,6 +107,10 @@ const commandBuilder: BuilderHandlerFn = (options, cont assets, initialPath, open, + debugWebpack, + loglevel, + webpackStatsJson, + previewUrl, } = options; const standaloneOptions: StandaloneOptions = { @@ -130,6 +138,10 @@ const commandBuilder: BuilderHandlerFn = (options, cont tsConfig, initialPath, open, + debugWebpack, + loglevel, + webpackStatsJson, + previewUrl, }; return standaloneOptions; diff --git a/code/frameworks/angular/src/builders/start-storybook/schema.json b/code/frameworks/angular/src/builders/start-storybook/schema.json index 3bd70064ccb9..d44d9c9f4f14 100644 --- a/code/frameworks/angular/src/builders/start-storybook/schema.json +++ b/code/frameworks/angular/src/builders/start-storybook/schema.json @@ -10,6 +10,11 @@ "pattern": "^[^:\\s]+:[^:\\s]+(:[^\\s]+)?$", "default": null }, + "debugWebpack": { + "type": "boolean", + "description": "Debug the Webpack configuration", + "default": false + }, "tsConfig": { "type": "string", "description": "The full path for the TypeScript configuration file, relative to the current workspace." @@ -123,6 +128,20 @@ "initialPath": { "type": "string", "description": "URL path to be appended when visiting Storybook for the first time" + }, + "webpackStatsJson": { + "type": "string", + "description": "Write Webpack Stats JSON to disk", + "default": false + }, + "previewUrl": { + "type": "string", + "description": "Disables the default storybook preview and lets you use your own" + }, + "loglevel": { + "type": "string", + "description": "Controls level of logging during build. Can be one of: [silly, verbose, info (default), warn, error, silent].", + "pattern": "(silly|verbose|info|warn|silent)" } }, "additionalProperties": false, diff --git a/code/frameworks/angular/src/builders/utils/error-handler.ts b/code/frameworks/angular/src/builders/utils/error-handler.ts index 2673dbfd0b87..f2ff150495cf 100644 --- a/code/frameworks/angular/src/builders/utils/error-handler.ts +++ b/code/frameworks/angular/src/builders/utils/error-handler.ts @@ -12,7 +12,7 @@ export const printErrorDetails = (error: any): void => { } else if ((error as any).stats && (error as any).stats.compilation.errors) { (error as any).stats.compilation.errors.forEach((e: any) => logger.plain(e)); } else { - logger.error(error); + logger.error(error as any); } } else if (error.compilation?.errors) { error.compilation.errors.forEach((e: any) => logger.plain(e)); diff --git a/code/frameworks/angular/src/client/angular-beta/utils/PropertyExtractor.test.ts b/code/frameworks/angular/src/client/angular-beta/utils/PropertyExtractor.test.ts index 45d2fb73e62f..4c8778cdc31a 100644 --- a/code/frameworks/angular/src/client/angular-beta/utils/PropertyExtractor.test.ts +++ b/code/frameworks/angular/src/client/angular-beta/utils/PropertyExtractor.test.ts @@ -18,6 +18,7 @@ const TestComponent1 = Component({})(class {}); const TestComponent2 = Component({})(class {}); const StandaloneTestComponent = Component({ standalone: true })(class {}); const TestDirective = Directive({})(class {}); +const StandaloneTestDirective = Directive({ standalone: true })(class {}); const TestModuleWithDeclarations = NgModule({ declarations: [TestComponent1] })(class {}); const TestModuleWithImportsAndProviders = NgModule({ imports: [TestModuleWithDeclarations], @@ -118,6 +119,20 @@ describe('PropertyExtractor', () => { StandaloneTestComponent, ]); }); + + it('should return standalone directives', () => { + const imports = extractImports( + { + imports: [TestModuleWithImportsAndProviders], + }, + StandaloneTestDirective + ); + expect(imports).toEqual([ + CommonModule, + TestModuleWithImportsAndProviders, + StandaloneTestDirective, + ]); + }); }); describe('extractDeclarations', () => { diff --git a/code/frameworks/angular/src/client/angular-beta/utils/PropertyExtractor.ts b/code/frameworks/angular/src/client/angular-beta/utils/PropertyExtractor.ts index d8664259e158..e6db7384488f 100644 --- a/code/frameworks/angular/src/client/angular-beta/utils/PropertyExtractor.ts +++ b/code/frameworks/angular/src/client/angular-beta/utils/PropertyExtractor.ts @@ -173,7 +173,7 @@ export class PropertyExtractor implements NgModuleMetadata { const isPipe = decorators.some((d) => this.isDecoratorInstanceOf(d, 'Pipe')); const isDeclarable = isComponent || isDirective || isPipe; - const isStandalone = isComponent && decorators.some((d) => d.standalone); + const isStandalone = (isComponent || isDirective) && decorators.some((d) => d.standalone); return { isDeclarable, isStandalone }; }; diff --git a/code/frameworks/angular/src/client/argsToTemplate.test.ts b/code/frameworks/angular/src/client/argsToTemplate.test.ts new file mode 100644 index 000000000000..88db1208a6ee --- /dev/null +++ b/code/frameworks/angular/src/client/argsToTemplate.test.ts @@ -0,0 +1,102 @@ +import { argsToTemplate, ArgsToTemplateOptions } from './argsToTemplate'; // adjust path + +describe('argsToTemplate', () => { + it('should correctly convert args to template string and exclude undefined values', () => { + const args: Record = { + prop1: 'value1', + prop2: undefined, + prop3: 'value3', + }; + const options: ArgsToTemplateOptions = {}; + const result = argsToTemplate(args, options); + expect(result).toBe('[prop1]="prop1" [prop3]="prop3"'); + }); + + it('should include properties from include option', () => { + const args = { + prop1: 'value1', + prop2: 'value2', + prop3: 'value3', + }; + const options: ArgsToTemplateOptions = { + include: ['prop1', 'prop3'], + }; + const result = argsToTemplate(args, options); + expect(result).toBe('[prop1]="prop1" [prop3]="prop3"'); + }); + + it('should include non-undefined properties from include option', () => { + const args: Record = { + prop1: 'value1', + prop2: 'value2', + prop3: undefined, + }; + const options: ArgsToTemplateOptions = { + include: ['prop1', 'prop3'], + }; + const result = argsToTemplate(args, options); + expect(result).toBe('[prop1]="prop1"'); + }); + + it('should exclude properties from exclude option', () => { + const args = { + prop1: 'value1', + prop2: 'value2', + prop3: 'value3', + }; + const options: ArgsToTemplateOptions = { + exclude: ['prop2'], + }; + const result = argsToTemplate(args, options); + expect(result).toBe('[prop1]="prop1" [prop3]="prop3"'); + }); + + it('should exclude properties from exclude option and undefined properties', () => { + const args: Record = { + prop1: 'value1', + prop2: 'value2', + prop3: undefined, + }; + const options: ArgsToTemplateOptions = { + exclude: ['prop2'], + }; + const result = argsToTemplate(args, options); + expect(result).toBe('[prop1]="prop1"'); + }); + + it('should prioritize include over exclude when both options are given', () => { + const args = { + prop1: 'value1', + prop2: 'value2', + prop3: 'value3', + }; + const options: ArgsToTemplateOptions = { + include: ['prop1', 'prop2'], + exclude: ['prop2', 'prop3'], + }; + const result = argsToTemplate(args, options); + expect(result).toBe('[prop1]="prop1" [prop2]="prop2"'); + }); + + it('should work when neither include nor exclude options are given', () => { + const args = { + prop1: 'value1', + prop2: 'value2', + }; + const options: ArgsToTemplateOptions = {}; + const result = argsToTemplate(args, options); + expect(result).toBe('[prop1]="prop1" [prop2]="prop2"'); + }); + + it('should bind events correctly when value is a function', () => { + const args = { event1: () => {}, event2: () => {} }; + const result = argsToTemplate(args, {}); + expect(result).toEqual('(event1)="event1($event)" (event2)="event2($event)"'); + }); + + it('should mix properties and events correctly', () => { + const args = { input: 'Value1', event1: () => {} }; + const result = argsToTemplate(args, {}); + expect(result).toEqual('[input]="input" (event1)="event1($event)"'); + }); +}); diff --git a/code/frameworks/angular/src/client/argsToTemplate.ts b/code/frameworks/angular/src/client/argsToTemplate.ts new file mode 100644 index 000000000000..0072aa84743d --- /dev/null +++ b/code/frameworks/angular/src/client/argsToTemplate.ts @@ -0,0 +1,74 @@ +/** + * Options for controlling the behavior of the argsToTemplate function. + * + * @template T The type of the keys in the target object. + */ +export interface ArgsToTemplateOptions { + /** + * An array of keys to specifically include in the output. + * If provided, only the keys from this array will be included in the output, + * irrespective of the `exclude` option. Undefined values will still be excluded from the output. + */ + include?: Array; + /** + * An array of keys to specifically exclude from the output. + * If provided, these keys will be omitted from the output. This option is + * ignored if the `include` option is also provided + */ + exclude?: Array; +} + +/** + * Converts an object of arguments to a string of property and event bindings and excludes undefined values. + * Why? Because Angular treats undefined values in property bindings as an actual value + * and does not apply the default value of the property as soon as the binding is set. + * This feels counter-intuitive and is a common source of bugs in stories. + * @example + * ```ts + * // component.ts + *ㅤ@Component({ selector: 'example' }) + * export class ExampleComponent { + * ㅤ@Input() input1: string = 'Default Input1'; + * ㅤ@Input() input2: string = 'Default Input2'; + * ㅤ@Output() click = new EventEmitter(); + * } + * + * // component.stories.ts + * import { argsToTemplate } from '@storybook/angular'; + * export const Input1: Story = { + * render: (args) => ({ + * props: args, + * // Problem1: + * // This will set input2 to undefined and the internal default value will not be used. + * // Problem2: + * // The default value of input2 will be used, but it is not overridable by the user via controls. + * // Solution: Now the controls will be applicable to both input1 and input2, and the default values will be used if the user does not override them. + * template: ``, + * }), + * args: { + * // In this Story, we want to set the input1 property, and the internal default property of input2 should be used. + * input1: 'Input 1', + * click: { action: 'clicked' }, + * }, + *}; + * ``` + */ +export function argsToTemplate>( + args: A, + options: ArgsToTemplateOptions = {} +) { + const includeSet = options.include ? new Set(options.include) : null; + const excludeSet = options.exclude ? new Set(options.exclude) : null; + + return Object.entries(args) + .filter(([key]) => args[key] !== undefined) + .filter(([key]) => { + if (includeSet) return includeSet.has(key); + if (excludeSet) return !excludeSet.has(key); + return true; + }) + .map(([key, value]) => + typeof value === 'function' ? `(${key})="${key}($event)"` : `[${key}]="${key}"` + ) + .join(' '); +} diff --git a/code/frameworks/angular/src/client/globals.ts b/code/frameworks/angular/src/client/globals.ts index 87eff5c3387f..c16095858f16 100644 --- a/code/frameworks/angular/src/client/globals.ts +++ b/code/frameworks/angular/src/client/globals.ts @@ -25,7 +25,7 @@ import { global } from '@storybook/global'; /** ************************************************************************************************* * Zone JS is required by Angular itself. */ -import 'zone.js/dist/zone'; // Included with Angular CLI. +import 'zone.js'; // Included with Angular CLI. /** ************************************************************************************************* * APPLICATION IMPORTS diff --git a/code/frameworks/angular/src/client/index.ts b/code/frameworks/angular/src/client/index.ts index bfc209efb4d4..2377678bda2e 100644 --- a/code/frameworks/angular/src/client/index.ts +++ b/code/frameworks/angular/src/client/index.ts @@ -10,6 +10,7 @@ export * from './public-types'; export type { StoryFnAngularReturnType as IStory } from './types'; export { moduleMetadata, componentWrapperDecorator, applicationConfig } from './decorators'; +export { argsToTemplate } from './argsToTemplate'; // optimization: stop HMR propagation in webpack if (typeof module !== 'undefined') module?.hot?.decline(); diff --git a/code/frameworks/angular/src/server/framework-preset-angular-cli.ts b/code/frameworks/angular/src/server/framework-preset-angular-cli.ts index f8f78996c366..059d8b30f4d1 100644 --- a/code/frameworks/angular/src/server/framework-preset-angular-cli.ts +++ b/code/frameworks/angular/src/server/framework-preset-angular-cli.ts @@ -1,10 +1,10 @@ import webpack from 'webpack'; import { logger } from '@storybook/node-logger'; +import { AngularLegacyBuildOptionsError } from '@storybook/core-events/server-errors'; import { BuilderContext, targetFromTargetString } from '@angular-devkit/architect'; import { sync as findUpSync } from 'find-up'; -import { dedent } from 'ts-dedent'; - import { JsonObject, logging } from '@angular-devkit/core'; + import { getWebpackConfig as getCustomWebpackConfig } from './angular-cli-webpack'; import { moduleIsAvailable } from './utils/module-is-available'; import { PresetOptions } from './preset-options'; @@ -85,13 +85,6 @@ async function getBuilderOptions( return builderOptions; } -export const migrationToBuilderReferrenceMessage = dedent`Your Storybook startup uses a solution that is not supported. - You must use angular builder to have an explicit configuration on the project used in angular.json - Read more at: - - https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#sb-angular-builder) - - https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#angular13) - `; - /** * Checks if using legacy configuration that doesn't use builder and logs message referring to migration docs. */ @@ -101,7 +94,5 @@ function checkForLegacyBuildOptions(options: PresetOptions) { return; } - logger.error(migrationToBuilderReferrenceMessage); - - throw Error('angularBrowserTarget is undefined.'); + throw new AngularLegacyBuildOptionsError(); } diff --git a/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.stories.ts b/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.stories.ts index d23f3896359f..11dc4d7cd32d 100644 --- a/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.stories.ts +++ b/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.stories.ts @@ -1,24 +1,29 @@ -import { Args } from '@storybook/angular'; +import { Meta, StoryObj, argsToTemplate } from '@storybook/angular'; import { DocButtonComponent } from './doc-button.component'; -export default { +const meta: Meta> = { component: DocButtonComponent, }; -export const Basic = (args: Args) => ({ - props: args, -}); -Basic.args = { label: 'Args test', isDisabled: false }; -Basic.ArgTypes = { - theDefaultValue: { - table: { - defaultValue: { summary: 'Basic default value' }, +export default meta; + +type Story = StoryObj>; + +export const Basic: Story = { + args: { label: 'Args test', isDisabled: false }, + argTypes: { + theDefaultValue: { + table: { + defaultValue: { summary: 'Basic default value' }, + }, }, }, }; -export const WithTemplate = (args: Args) => ({ - props: args, - template: '', -}); -WithTemplate.args = { label: 'Template test', appearance: 'primary' }; +export const WithTemplate: Story = { + args: { label: 'Template test', appearance: 'primary' }, + render: (args) => ({ + props: args, + template: ``, + }), +}; diff --git a/code/frameworks/angular/template/stories/argTypes/doc-directive/doc-directive.stories.ts b/code/frameworks/angular/template/stories/argTypes/doc-directive/doc-directive.stories.ts index b734b93bf40d..e949d8e88252 100644 --- a/code/frameworks/angular/template/stories/argTypes/doc-directive/doc-directive.stories.ts +++ b/code/frameworks/angular/template/stories/argTypes/doc-directive/doc-directive.stories.ts @@ -1,14 +1,19 @@ +import { Meta, StoryObj } from '@storybook/angular'; import { DocDirective } from './doc-directive.directive'; -export default { +const meta: Meta = { component: DocDirective, }; -const modules = { - declarations: [DocDirective], -}; +export default meta; + +type Story = StoryObj; -export const Basic = () => ({ - moduleMetadata: modules, - template: '

DocDirective

', -}); +export const Basic: Story = { + render: () => ({ + moduleMetadata: { + declarations: [DocDirective], + }, + template: '

DocDirective

', + }), +}; diff --git a/code/frameworks/angular/template/stories/argTypes/doc-injectable/doc-injectable.stories.ts b/code/frameworks/angular/template/stories/argTypes/doc-injectable/doc-injectable.stories.ts index eca5e10fb11d..7741bca9ba88 100644 --- a/code/frameworks/angular/template/stories/argTypes/doc-injectable/doc-injectable.stories.ts +++ b/code/frameworks/angular/template/stories/argTypes/doc-injectable/doc-injectable.stories.ts @@ -1,14 +1,19 @@ +import { Meta, StoryObj } from '@storybook/angular'; import { DocInjectableService } from './doc-injectable.service'; -export default { +const meta: Meta = { component: DocInjectableService, }; -const modules = { - provider: [DocInjectableService], -}; +export default meta; + +type Story = StoryObj; -export const Basic = () => ({ - moduleMetadata: modules, - template: '

DocInjectable

', -}); +export const Basic: Story = { + render: () => ({ + moduleMetadata: { + providers: [DocInjectableService], + }, + template: '

DocInjectable

', + }), +}; diff --git a/code/frameworks/angular/template/stories/argTypes/doc-pipe/doc-pipe.stories.ts b/code/frameworks/angular/template/stories/argTypes/doc-pipe/doc-pipe.stories.ts index 6ab616f16ee2..018ab04a9951 100644 --- a/code/frameworks/angular/template/stories/argTypes/doc-pipe/doc-pipe.stories.ts +++ b/code/frameworks/angular/template/stories/argTypes/doc-pipe/doc-pipe.stories.ts @@ -1,14 +1,19 @@ +import { Meta, StoryObj } from '@storybook/angular'; import { DocPipe } from './doc-pipe.pipe'; -export default { +const meta: Meta = { component: DocPipe, }; -const modules = { - declarations: [DocPipe], -}; +export default meta; + +type Story = StoryObj; -export const Basic = () => ({ - moduleMetadata: modules, - template: `

{{ 'DocPipe' | docPipe }}

`, -}); +export const Basic: Story = { + render: () => ({ + moduleMetadata: { + declarations: [DocPipe], + }, + template: `

{{ 'DocPipe' | docPipe }}

`, + }), +}; diff --git a/code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts b/code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts index 228e2d7b9045..0396bae99acc 100644 --- a/code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts +++ b/code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts @@ -1,8 +1,8 @@ import { FormsModule } from '@angular/forms'; -import { Meta, StoryFn, moduleMetadata } from '@storybook/angular'; +import { Meta, StoryFn, StoryObj, moduleMetadata } from '@storybook/angular'; import { CustomCvaComponent } from './custom-cva.component'; -export default { +const meta: Meta = { // title: 'Basics / Angular forms / ControlValueAccessor', component: CustomCvaComponent, decorators: [ @@ -17,11 +17,16 @@ export default { ], } as Meta; -export const SimpleInput: StoryFn = () => ({ - props: { - ngModel: 'Type anything', - ngModelChange: () => {}, - }, -}); +export default meta; -SimpleInput.storyName = 'Simple input'; +type Story = StoryObj; + +export const SimpleInput: Story = { + name: 'Simple input', + render: () => ({ + props: { + ngModel: 'Type anything', + ngModelChange: () => {}, + }, + }), +}; diff --git a/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/attribute-selectors.component.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/attribute-selectors.component.stories.ts index d935de5215d7..73894b83b34a 100644 --- a/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/attribute-selectors.component.stories.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/attribute-selectors.component.stories.ts @@ -1,8 +1,13 @@ +import { Meta, StoryObj } from '@storybook/angular'; import { AttributeSelectorComponent } from './attribute-selector.component'; -export default { +const meta: Meta = { // title: 'Basics / Component / With Complex Selectors', component: AttributeSelectorComponent, }; -export const AttributeSelectors = {}; +export default meta; + +type Story = StoryObj; + +export const AttributeSelectors: Story = {}; diff --git a/code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.stories.ts index 647ca86d8d67..b79bd371baf3 100644 --- a/code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.stories.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.stories.ts @@ -1,4 +1,4 @@ -import { Meta, StoryFn } from '@storybook/angular'; +import { Meta, StoryObj } from '@storybook/angular'; import { EnumsComponent, EnumNumeric, @@ -6,19 +6,22 @@ import { EnumStringValues, } from './enums.component'; -export default { +const meta: Meta = { // title: 'Basics / Component / With Enum Types', component: EnumsComponent, -} as Meta; +}; + +export default meta; + +type Story = StoryObj; -export const Basic: StoryFn = (args) => ({ - props: args, -}); -Basic.args = { - unionType: 'union a', - aliasedUnionType: 'Type Alias 1', - enumNumeric: EnumNumeric.FIRST, - enumNumericInitial: EnumNumericInitial.UNO, - enumStrings: EnumStringValues.PRIMARY, - enumAlias: EnumNumeric.FIRST, +export const Basic: Story = { + args: { + unionType: 'Union A', + aliasedUnionType: 'Type Alias 1', + enumNumeric: EnumNumeric.FIRST, + enumNumericInitial: EnumNumericInitial.UNO, + enumStrings: EnumStringValues.PRIMARY, + enumAlias: EnumNumeric.FIRST, + }, }; diff --git a/code/frameworks/angular/template/stories/basics/component-with-inheritance/base-button.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-inheritance/base-button.stories.ts index a206115f5de7..271e6a3fcc9d 100644 --- a/code/frameworks/angular/template/stories/basics/component-with-inheritance/base-button.stories.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-inheritance/base-button.stories.ts @@ -1,12 +1,15 @@ +import { Meta, StoryObj } from '@storybook/angular'; import { BaseButtonComponent } from './base-button.component'; -export default { +const meta: Meta = { // title: 'Basics / Component / With Inheritance', component: BaseButtonComponent, }; -export const BaseButton = () => ({ - props: { +export default meta; + +export const BaseButton: StoryObj = { + args: { label: 'this is label', }, -}); +}; diff --git a/code/frameworks/angular/template/stories/basics/component-with-inheritance/icon-button.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-inheritance/icon-button.stories.ts index baefe65c4f58..bb5c5fb02bcb 100644 --- a/code/frameworks/angular/template/stories/basics/component-with-inheritance/icon-button.stories.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-inheritance/icon-button.stories.ts @@ -1,13 +1,18 @@ +import { Meta, StoryObj } from '@storybook/angular'; import { IconButtonComponent } from './icon-button.component'; -export default { +const meta: Meta = { // title: 'Basics / Component / With Inheritance', component: IconButtonComponent, }; -export const IconButton = () => ({ - props: { +export default meta; + +type Story = StoryObj; + +export const IconButton: Story = { + args: { icon: 'this is icon', label: 'this is label', }, -}); +}; diff --git a/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts index 0512582aca6e..f8185f8eb80a 100644 --- a/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts @@ -1,5 +1,5 @@ import { Component, Input } from '@angular/core'; -import { componentWrapperDecorator, Meta, StoryFn } from '@storybook/angular'; +import { componentWrapperDecorator, Meta, StoryObj } from '@storybook/angular'; @Component({ selector: 'sb-button', @@ -17,7 +17,7 @@ class SbButtonComponent { color = '#5eadf5'; } -export default { +const meta: Meta = { // title: 'Basics / Component / With ng-content / Button with different contents', // Implicitly declares the component to Angular // This will be the component described by the addon docs @@ -35,24 +35,24 @@ export default { }, } as Meta; +export default meta; + +type Story = StoryObj; + // By default storybook uses the default export component if no template or component is defined in the story // So Storybook nests the component twice because it is first added by the componentWrapperDecorator. -export const AlwaysDefineTemplateOrComponent: StoryFn = () => ({}); +export const AlwaysDefineTemplateOrComponent: Story = {}; -export const EmptyButton: StoryFn = () => ({ - template: '', -}); - -export const WithDynamicContentAndArgs: StoryFn = (args) => ({ - template: `${args['content']}`, -}); -WithDynamicContentAndArgs.argTypes = { - content: { control: 'text' }, +export const EmptyButton: Story = { + render: () => ({ + template: '', + }), }; -WithDynamicContentAndArgs.args = { content: 'My button text' }; -export const InH1: StoryFn = () => ({ - template: 'My button in h1', -}); -InH1.decorators = [componentWrapperDecorator((story) => `

${story}

`)]; -InH1.storyName = 'In

'; +export const InH1: Story = { + render: () => ({ + template: 'My button in h1', + }), + decorators: [componentWrapperDecorator((story) => `

${story}

`)], + name: 'In

', +}; diff --git a/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-simple.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-simple.stories.ts index 13cc2eb550c5..71b0fe84df38 100644 --- a/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-simple.stories.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-simple.stories.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; -import { Meta, StoryFn } from '@storybook/angular/'; +import { Meta, StoryObj } from '@storybook/angular'; @Component({ selector: 'storybook-with-ng-content', @@ -9,21 +9,29 @@ import { Meta, StoryFn } from '@storybook/angular/'; }) class WithNgContentComponent {} -export default { +const meta: Meta = { // title: 'Basics / Component / With ng-content / Simple', component: WithNgContentComponent, } as Meta; -export const OnlyComponent: StoryFn = () => ({}); +export default meta; -export const Default: StoryFn = () => ({ - template: `

This is rendered in ng-content

`, -}); +type Story = StoryObj; -export const WithDynamicContentAndArgs: StoryFn = (args) => ({ - template: `

${args['content']}

`, -}); -WithDynamicContentAndArgs.argTypes = { - content: { control: 'text' }, +export const OnlyComponent: Story = {}; + +export const Default: Story = { + render: () => ({ + template: `

This is rendered in ng-content

`, + }), +}; + +export const WithDynamicContentAndArgs: Story = { + render: (args) => ({ + template: `

${args['content']}

`, + }), + args: { content: 'Default content' }, + argTypes: { + content: { control: 'text' }, + }, }; -WithDynamicContentAndArgs.args = { content: 'Default content' }; diff --git a/code/frameworks/angular/template/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts index b833424367bb..9ac53d2dde03 100644 --- a/code/frameworks/angular/template/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts @@ -27,7 +27,7 @@ class OnDestroyComponent implements OnInit, OnDestroy { } } -export default { +const meta: Meta = { // title: 'Basics / Component / with ngOnDestroy', component: OnDestroyComponent, parameters: { @@ -37,4 +37,8 @@ export default { }, } as Meta; -export const SimpleComponent: StoryObj = {}; +export default meta; + +type Story = StoryObj; + +export const SimpleComponent: Story = {}; diff --git a/code/frameworks/angular/template/stories/basics/component-with-on-push/on-push.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-on-push/on-push.stories.ts index 6ad452797bc2..cc672938a7f2 100644 --- a/code/frameworks/angular/template/stories/basics/component-with-on-push/on-push.stories.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-on-push/on-push.stories.ts @@ -1,7 +1,7 @@ -import { Meta, StoryFn } from '@storybook/angular'; +import { Meta, StoryObj } from '@storybook/angular'; import { OnPushBoxComponent } from './on-push-box.component'; -export default { +const meta: Meta = { // title: 'Basics / Component / With OnPush strategy', component: OnPushBoxComponent, argTypes: { @@ -12,10 +12,12 @@ export default { word: 'The text', bgColor: '#FFF000', }, -} as Meta; +}; -export const ClassSpecifiedComponentWithOnPushAndArgs: StoryFn = (args) => ({ - props: args, -}); -ClassSpecifiedComponentWithOnPushAndArgs.storyName = - 'Class-specified component with OnPush and Args'; +export default meta; + +type Story = StoryObj; + +export const ClassSpecifiedComponentWithOnPushAndArgs: Story = { + name: 'Class-specified component with OnPush and Args', +}; diff --git a/code/frameworks/angular/template/stories/basics/component-with-pipe/custom-pipes.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-pipe/custom-pipes.stories.ts index 6c8f9254208f..9a4a8e53c577 100644 --- a/code/frameworks/angular/template/stories/basics/component-with-pipe/custom-pipes.stories.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-pipe/custom-pipes.stories.ts @@ -1,9 +1,9 @@ -import { Meta, StoryFn, moduleMetadata } from '@storybook/angular'; +import { Meta, StoryObj, moduleMetadata } from '@storybook/angular'; import { CustomPipePipe } from './custom.pipe'; import { WithPipeComponent } from './with-pipe.component'; -export default { +const meta: Meta = { // title: 'Basics / Component / With Pipes', component: WithPipeComponent, decorators: [ @@ -11,21 +11,26 @@ export default { declarations: [CustomPipePipe], }), ], -} as Meta; +}; -export const Simple: StoryFn = () => ({ - props: { - field: 'foobar', - }, -}); +export default meta; + +type Story = StoryObj; -export const WithArgsStory: StoryFn = (args) => ({ - props: args, -}); -WithArgsStory.storyName = 'With args'; -WithArgsStory.argTypes = { - field: { control: 'text' }, +export const Simple: Story = { + render: () => ({ + props: { + field: 'foobar', + }, + }), }; -WithArgsStory.args = { - field: 'Foo Bar', + +export const WithArgsStory: Story = { + name: 'With args', + argTypes: { + field: { control: 'text' }, + }, + args: { + field: 'Foo Bar', + }, }; diff --git a/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.stories.ts index fea1bc95c15f..381c272fb96d 100644 --- a/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.stories.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.stories.ts @@ -1,26 +1,30 @@ -import { Args } from '@storybook/angular'; +import { Args, Meta, StoryObj } from '@storybook/angular'; import { DiComponent } from './di.component'; -export default { +const meta: Meta = { // title: 'Basics / Component / With Provider', component: DiComponent, }; -export const InputsAndInjectDependencies = () => ({ - props: { - title: 'Component dependencies', - }, -}); +export default meta; -InputsAndInjectDependencies.storyName = 'inputs and inject dependencies'; +type Story = StoryObj; -export const InputsAndInjectDependenciesWithArgs = (args: Args) => ({ - props: args, -}); -InputsAndInjectDependenciesWithArgs.storyName = 'inputs and inject dependencies with args'; -InputsAndInjectDependenciesWithArgs.argTypes = { - title: { control: 'text' }, +export const InputsAndInjectDependencies: Story = { + render: () => ({ + props: { + title: 'Component dependencies', + }, + }), + name: 'inputs and inject dependencies', }; -InputsAndInjectDependenciesWithArgs.args = { - title: 'Component dependencies', + +export const InputsAndInjectDependenciesWithArgs: Story = { + name: 'inputs and inject dependencies with args', + argTypes: { + title: { control: 'text' }, + }, + args: { + title: 'Component dependencies', + }, }; diff --git a/code/frameworks/angular/template/stories/basics/component-with-style/styled.component.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-style/styled.component.stories.ts index 0818ff28cc6f..c0cd88c09bc2 100644 --- a/code/frameworks/angular/template/stories/basics/component-with-style/styled.component.stories.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-style/styled.component.stories.ts @@ -1,10 +1,15 @@ +import { Meta, StoryObj } from '@storybook/angular'; import { StyledComponent } from './styled.component'; -export default { +const meta: Meta = { // title: 'Basics / Component / With StyleUrls', component: StyledComponent, }; -export const ComponentWithStyles = () => ({}); +export default meta; -ComponentWithStyles.storyName = 'Component with styles'; +type Story = StoryObj; + +export const ComponentWithStyles: Story = { + name: 'Component with styles', +}; diff --git a/code/frameworks/angular/template/stories/basics/component-with-template/template.component.ts b/code/frameworks/angular/template/stories/basics/component-with-template/template.component.ts new file mode 100644 index 000000000000..2071a6db7738 --- /dev/null +++ b/code/frameworks/angular/template/stories/basics/component-with-template/template.component.ts @@ -0,0 +1,27 @@ +import { CommonModule } from '@angular/common'; +import { Component, EventEmitter, Input, Output } from '@angular/core'; + +@Component({ + selector: 'app-template', + imports: [CommonModule], + template: `
+ Label: {{ label }} +
+ Label2: {{ label2 }} +
+ +
`, + styles: [], + standalone: true, +}) +export class Template { + @Input() label = 'default label'; + + @Input() label2 = 'default label2'; + + @Output() changed = new EventEmitter(); + + inc() { + this.changed.emit('Increase'); + } +} diff --git a/code/frameworks/angular/template/stories/basics/component-with-template/template.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-template/template.stories.ts new file mode 100644 index 000000000000..55639870f262 --- /dev/null +++ b/code/frameworks/angular/template/stories/basics/component-with-template/template.stories.ts @@ -0,0 +1,24 @@ +import { Meta, StoryObj, argsToTemplate } from '@storybook/angular'; +import { Template } from './template.component'; + +const meta: Meta