Merge branch 'next' into no-more-commas

.github/ISSUE_TEMPLATE/feature_request.yml → .github/DISCUSSION_TEMPLATE/ideas.yml

@@ -1,14 +1,11 @@
-name: Feature request 💡
-description: Suggest an idea for this project
-title: '[Feature Request]:'
 labels:
   - needs triage
   - feature request
 body:
   - type: textarea
     id: problem
     attributes:
-      label: Is your feature request related to a problem? Please describe
+      label: Is your feature request related to a problem? Please describe.
       description: >-
         A clear and concise description of the problem. E.g. I'm always
         frustrated when [...]

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -19,7 +19,7 @@ body:
     attributes:
       label: To Reproduce
       description: >-
-        Please create a reproduction using [storybook.new](https://storybook.new), or by running `npx sb@next sandbox` and
+        We prioritize bug reports that have a reproduction. You can create a reproduction using [storybook.new](https://storybook.new), or by running `npx sb@next sandbox` and
         following the instructions. Read our
         [documentation](https://storybook.js.org/docs/react/contribute/how-to-reproduce)
         to learn more about creating reproductions.

.github/ISSUE_TEMPLATE/config.yml

@@ -2,10 +2,16 @@ blank_issues_enabled: false
 contact_links:
   - name: View documentation 📚
     url: https://storybook.js.org/docs/
-    about: Check out the official docs for answers to common questions
+    about: Check out the official docs for answers to common questions.
+  - name: Feature Requests 💡
+    url: https://github.com/storybookjs/storybook/discussions/new?category=ideas
+    about: Suggest a feature idea for this project.
+  - name: Open an RFC 🦄
+    url: https://github.com/storybookjs/storybook/discussions/new?category=rfc
+    about: Do you want to propose a more involved change to Storybook? Open an RFC (Request for Comments) to start a discussion.
   - name: Questions & discussions 🤔
     url: https://github.com/storybookjs/storybook/discussions
-    about: Ask questions, request features & discuss RFCs
+    about: Ask questions, show off your Storybook, etc. 
   - name: Community Discord 💬
     url: https://discord.gg/storybook
     about: Community discussions, interactive support, contributor help

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,12 +1,33 @@
 Closes #
 
-<!-- Thank you for contributing to Storybook! If your PR is related to an issue, provide the number(s) above; if it resolves multiple issues, be sure to break them up (e.g. "closes #1000, closes #1001"). -->
+<!-- If your PR is related to an issue, provide the number(s) above; if it resolves multiple issues, be sure to break them up (e.g. "closes #1000, closes #1001"). -->
+
+<!--
+
+Thank you for contributing to Storybook! Please submit all PRs to the `next` branch unless they are specific to the current release. Storybook maintainers cherry-pick bug and documentation fixes into the `main` branch as part of the release process, so you shouldn't need to worry about this. For additional guidance: https://storybook.js.org/docs/react/contribute/how-to-contribute
+
+-->
+
 
 ## What I did
 
 <!-- Briefly describe what your PR does -->
 
-## How to test
+## Checklist for Contributors
+
+### Testing
+
+<!-- Please check (put an "x" inside the "[ ]") the applicable items below to communicate how to test your changes -->
+
+#### The changes in this PR are covered in the following automated tests:
+- [ ] stories
+- [ ] unit tests
+- [ ] integration tests
+- [ ] end-to-end tests
+
+#### Manual testing
+
+_This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!_
 
 <!-- Please include the steps to test your changes here. For example:
 
@@ -16,25 +37,39 @@ Closes #
 
 -->
 
-## Checklist
+### Documentation
 
-<!-- Please check (put an "x" inside the "[ ]") the applicable items below to make sure your PR is ready to be reviewed. -->
+<!-- Please check (put an "x" inside the "[ ]") the applicable items below to indicate which documentation has been updated. -->
 
-- [ ] Make sure your changes are tested (stories and/or unit, integration, or end-to-end tests)
-- [ ] Make sure to add/update documentation regarding your changes
+- [ ] Add or update documentation reflecting your changes
 - [ ] If you are deprecating/removing a feature, make sure to update
       [MIGRATION.MD](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md)
 
-#### Maintainers
+## Checklist for Maintainers
 
-- [ ] If this PR should be tested against many or all sandboxes,
-      make sure to add the `ci:merged` or `ci:daily` GH label to it.
-- [ ] Make sure this PR contains **one** of the labels below.
+- [ ] When this PR is ready for testing, make sure to add `ci:normal`, `ci:merged` or `ci:daily` GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in `code/lib/cli/src/sandbox-templates.ts`
+- [ ] Make sure this PR contains **one** of the labels below:
+   <details>
+     <summary>Available labels</summary>
 
-`["cleanup", "BREAKING CHANGE", "feature request", "bug", "documentation", "maintenance", "dependencies", "other"]`
+     - `bug`: Internal changes that fixes incorrect behavior.
+     - `maintenance`: User-facing maintenance tasks.
+     - `dependencies`: Upgrading (sometimes downgrading) dependencies.
+     - `build`: Internal-facing build tooling & test updates. Will not show up in release changelog.
+     - `cleanup`: Minor cleanup style change. Will not show up in release changelog.
+     - `documentation`: Documentation **only** changes. Will not show up in release changelog.
+     - `feature request`: Introducing a new feature.
+     - `BREAKING CHANGE`: Changes that break compatibility in some way with current major version.
+     - `other`: Changes that don't fit in the above categories.
+
+   </details>
 
-<!--
+### 🦋 Canary release
 
-Everybody: Please submit all PRs to the `next` branch unless they are specific to the current release. Storybook maintainers cherry-pick bug and documentation fixes into the `main` branch as part of the release process, so you shouldn't need to worry about this. For additional guidance: https://storybook.js.org/docs/react/contribute/how-to-contribute
+<!-- CANARY_RELEASE_SECTION -->
 
--->
+This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the `@storybookjs/core` team here.
+
+_core team members can create a canary release [here](https://github.com/storybookjs/storybook/actions/workflows/canary-release-pr.yml) or locally with `gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>`_
+
+<!-- CANARY_RELEASE_SECTION -->

.github/workflows/canary-release-pr.yml

@@ -0,0 +1,124 @@
+name: Publish canary release of PR
+run-name: 'Canary release: PR #${{ inputs.pr }}, triggered by ${{ github.triggering_actor }}'
+
+on:
+  workflow_dispatch:
+    inputs:
+      pr:
+        description: 'Pull request number to create a canary release for'
+        required: true
+        type: number
+
+env:
+  PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1
+  PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: 1
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.inputs.pr }}
+  cancel-in-progress: true
+
+permissions:
+  pull-requests: write
+
+jobs:
+  release-canary:
+    name: Release canary version
+    runs-on: ubuntu-latest
+    environment: release
+    steps:
+      - name: Fail if triggering actor is not administrator
+        uses: prince-chrismc/check-actor-permissions-action@v2.0.4
+        with:
+          permission: admin
+
+      - name: Get pull request information
+        id: info
+        env:
+          GH_TOKEN: ${{ secrets.GH_TOKEN }}
+        run: |
+          PR_INFO=$(gh pr view ${{ inputs.pr }} --repo ${{ github.repository }} --json isCrossRepository,headRefOid,headRefName,headRepository,headRepositoryOwner --jq '{isFork: .isCrossRepository, owner: .headRepositoryOwner.login, repoName: .headRepository.name, branch: .headRefName, sha: .headRefOid}')
+          echo $PR_INFO
+          # Loop through each key-value pair in PR_INFO and set as step output
+          for key in $(echo "$PR_INFO" | jq -r 'keys[]'); do
+            value=$(echo "$PR_INFO" | jq -r ".$key")
+            echo "$key=$value" >> "$GITHUB_OUTPUT"
+          done
+          echo "repository=$(echo "$PR_INFO" | jq -r ".owner")/$(echo "$PR_INFO" | jq -r ".repoName")" >> $GITHUB_OUTPUT
+          echo "shortSha=$(echo "$PR_INFO" | jq -r ".sha" | cut -c 1-8)" >> $GITHUB_OUTPUT
+          echo "date=$(date)" >> $GITHUB_OUTPUT
+          echo "timestamp=$(date +%s)" >> $GITHUB_OUTPUT
+
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          repository: ${{ steps.info.outputs.isFork == 'true' && steps.info.outputs.repository || null }}
+          ref: ${{ steps.info.outputs.sha }}
+          token: ${{ secrets.GH_TOKEN }}
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '16'
+
+      - name: Cache dependencies
+        uses: actions/cache@v3
+        with:
+          path: |
+            ~/.yarn/berry/cache
+          key: yarn-v1-${{ hashFiles('scripts/yarn.lock') }}-${{ hashFiles('code/yarn.lock') }}
+          restore-keys: |
+            yarn-v1-${{ hashFiles('scripts/yarn.lock') }}-${{ hashFiles('code/yarn.lock') }}
+            yarn-v1-${{ hashFiles('scripts/yarn.lock') }}
+            yarn-v1
+
+      - name: Install dependencies
+        run: yarn task --task=install --start-from=install
+
+      - name: Set version
+        id: version
+        working-directory: scripts
+        run: |
+          yarn release:version --exact 0.0.0-pr-${{ inputs.pr }}-sha-${{ steps.info.outputs.shortSha }} --verbose
+
+      - name: Publish v${{ steps.version.outputs.next-version }}
+        env:
+          YARN_NPM_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+        working-directory: scripts
+        run: yarn release:publish --tag canary --verbose
+
+      - name: Replace Pull Request Body
+        # TODO: replace with ivangabriele/find-and-replace-pull-request-body@vX when https://github.com/ivangabriele/find-and-replace-pull-request-body/pull/11 has been released
+        uses: mcky/find-and-replace-pull-request-body@v1.1.6-mcky
+        with:
+          githubToken: ${{ secrets.GH_TOKEN }}
+          prNumber: ${{ inputs.pr }}
+          find: 'CANARY_RELEASE_SECTION'
+          isHtmlCommentTag: true
+          replace: |
+            This pull request has been released as version [`${{ steps.version.outputs.next-version }}`](https://npmjs.com/package/@storybook/cli/v/${{ steps.version.outputs.next-version }}). Install it by pinning all your Storybook dependencies to that version.
+            <details>
+            <summary>More information</summary>
+
+            | | |
+            | --- | --- |
+            | **Published version** | [`${{ steps.version.outputs.next-version }}`](https://npmjs.com/package/@storybook/cli/v/${{ steps.version.outputs.next-version }}) |
+            | **Triggered by** | @${{ github.triggering_actor }} |
+            | **Repository** | [${{ steps.info.outputs.repository }}](https://github.com/${{ steps.info.outputs.repository }}) |
+            | **Branch** | [`${{ steps.info.outputs.branch }}`](https://github.com/${{ steps.info.outputs.repository }}/tree/${{ steps.info.outputs.branch }}) |
+            | **Commit** | [`${{ steps.info.outputs.shortSha }}`](https://github.com/${{ steps.info.outputs.repository }}/commit/${{ steps.info.outputs.sha }}) |
+            | **Datetime** | ${{ steps.info.outputs.date }} (`${{ steps.info.outputs.timestamp }}`) |
+            | **Workflow run** | [${{ github.run_id }}](https://github.com/storybookjs/storybook/actions/runs/${{ github.run_id }}) |
+
+            To request a new release of this pull request, mention the `@storybookjs/core` team.
+
+            _core team members can create a new canary release [here](https://github.com/storybookjs/storybook/actions/workflows/canary-release-pr.yml) or locally with `gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=${{ inputs.pr }}`_
+            </details>
+
+      - name: Create failing comment on PR
+        if: failure()
+        env:
+          GH_TOKEN: ${{ secrets.GH_TOKEN }}
+        run: |
+          gh pr comment ${{ inputs.pr }}\
+            --repo "${{github.repository }}"\
+            --body "Failed to publish canary version of this pull request, triggered by @${{ github.triggering_actor }}. See the failed workflow run at: https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}"

.github/workflows/danger-js.yml

@@ -1,6 +1,19 @@
 on:
   pull_request:
-    types: [opened, synchronize, reopened, labeled, unlabeled]
+    types:
+      - opened
+      - synchronize
+      - reopened
+      - labeled
+      - unlabeled
+      - edited
+    branches:
+      - main
+      - next
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.number }}
+  cancel-in-progress: true
 
 name: Danger JS
 jobs:
@@ -13,7 +26,7 @@ jobs:
           node-version: '16'
       - uses: actions/checkout@v3
       - name: Danger JS
-        uses: danger/danger-js@10.9.0
+        uses: danger/danger-js@11.2.6
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:

.github/workflows/generate-sandboxes-main.yml

@@ -4,6 +4,13 @@ on:
   schedule:
     - cron: '2 2 */1 * *'
   workflow_dispatch:
+  # To test fixes on push rather than wait for the scheduling, do the following:
+  # 1. Uncomment the lines below and add your branch.
+  # push:
+  #   branches:
+  #     - <your-branch-name>
+  # 2. change the "ref" value to <your-branch-name> in the actions/checkout step below.
+  # 3. 👉 DON'T FORGET TO UNDO THE VALUES BACK TO `main` BEFORE YOU MERGE YOUR CHANGES!
 
 jobs:
   generate:
@@ -41,3 +48,10 @@ jobs:
       - name: Publish
         run: yarn publish-sandboxes --remote=https://storybook-bot:${{ secrets.PAT_STORYBOOK_BOT}}@github.com/storybookjs/sandboxes.git --push --branch=main
         working-directory: ./code
+      - name: The job has failed
+        if: ${{ failure() || cancelled() }}
+        env:
+          DISCORD_WEBHOOK: ${{ secrets.DISCORD_MONITORING_URL }}
+        uses: Ilshidur/action-discord@master
+        with:
+          args: 'The generation of sandboxes in the **main** branch has failed. [View Run](https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }})'

.github/workflows/generate-sandboxes-next.yml

@@ -10,7 +10,7 @@ on:
   #   branches:
   #     - <your-branch-name>
   # 2. change the "ref" value to <your-branch-name> in the actions/checkout step below.
-  # 3. don't forget to undo the values back to `next` before you merge your changes.
+  # 3. 👉 DON'T FORGET TO UNDO THE VALUES BACK TO `next` BEFORE YOU MERGE YOUR CHANGES!
 
 jobs:
   generate:
@@ -48,3 +48,10 @@ jobs:
       - name: Publish
         run: yarn publish-sandboxes --remote=https://storybook-bot:${{ secrets.PAT_STORYBOOK_BOT}}@github.com/storybookjs/sandboxes.git --push --branch=next
         working-directory: ./code
+      - name: The job has failed
+        if: ${{ failure() || cancelled() }}
+        env:
+          DISCORD_WEBHOOK: ${{ secrets.DISCORD_MONITORING_URL }}
+        uses: Ilshidur/action-discord@master
+        with:
+          args: 'The generation of sandboxes in the **next** branch has failed. [View Run](https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }})'