Merge branch 'next' into pr/14308

2025-04-04 23:11:23 +08:00 · 2021-04-21 11:48:27 +08:00 · 2021-04-21 11:48:27 +08:00 · e8f3874d2d
commit e8f3874d2d
parent f21a98ad47 75e2b73964
319 changed files with 5057 additions and 2773 deletions
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@ -27,6 +27,21 @@ executors:
        environment:
          NODE_OPTIONS: --max_old_space_size=3076
    resource_class: <<parameters.class>>
+  sb_cypress_6_node_12:
+    parameters:
+      class:
+        description: The Resource class
+        type: enum
+        enum: ['small', 'medium', 'large', 'xlarge']
+        default: 'medium'
+    working_directory: /tmp/storybook
+    docker:
+      # ⚠️ The Cypress docker image is based on Node.js one so be careful when updating it because it can also
+      # cause an upgrade of the Node.
+      - image: cypress/included:6.8.0
+        environment:
+          NODE_OPTIONS: --max_old_space_size=3076
+    resource_class: <<parameters.class>>

 orbs:
  git-shallow-clone: guitarrapc/git-shallow-clone@2.0.3
@ -41,7 +56,7 @@ commands:
      - run:
          name: Check if PR is labeled with "<< parameters.label >>"
          command: |
-            sudo apt-get install jq
+            apt-get -y install jq

            PR_NUMBER=$(echo "$CIRCLE_PULL_REQUEST" | sed "s/.*\/pull\///")
            echo "PR_NUMBER: $PR_NUMBER"
@ -152,11 +167,10 @@ jobs:
          root: .
          paths:
            - .verdaccio-cache
-  e2e-tests-node-10:
+  e2e-tests-extended:
    executor:
      class: medium
-      name: sb_node_12_browsers
-    working_directory: /tmp/storybook
+      name: sb_cypress_6_node_12
    parallelism: 4
    steps:
      - when:
@ -178,39 +192,23 @@ jobs:
          command: yarn local-registry --port 6000 --open
          background: true
      - run:
-          name: wait for registry
+          name: Wait for registry
          command: yarn wait-on http://localhost:6000
      - run:
-          name: set registry
+          name: Set registry
          command: yarn config set npmRegistryServer http://localhost:6000/
      - run:
-          name: test local registry
-          command: yarn npm info @storybook/core
-      - run:
-          name: Install Cypress binary
-          command: yarn cypress install
-      - run:
-          name: run e2e tests
-          command: yarn test:e2e-framework --clean --skip preact
+          name: Run E2E tests
+          command: yarn test:e2e-framework --clean --skip angular@latest --skip vue3@next --skip web_components_typescript@latest --skip cra@latest
      - store_artifacts:
          path: /tmp/storybook/cypress
          destination: cypress
-  e2e-tests-node-12:
+  e2e-tests-core:
    executor:
      class: medium
-      name: sb_node_12_browsers
-    working_directory: /tmp/storybook
+      name: sb_cypress_6_node_12
+    parallelism: 2
    steps:
-      - when:
-          condition:
-            and:
-              - not:
-                  equal: [ master, << pipeline.git.branch >> ]
-              - not:
-                  equal: [ next, << pipeline.git.branch >> ]
-          steps:
-            - ensure-pr-is-labeled-with:
-                label: "run e2e extended test suite"
      - git-shallow-clone/checkout_advanced:
          clone_options: '--depth 1 --verbose'
      - attach_workspace:
@ -225,22 +223,17 @@ jobs:
      - run:
          name: Set registry
          command: yarn config set npmRegistryServer http://localhost:6000/
-      - run:
-          name: Test local registry
-          command: yarn npm info @storybook/core
-      - run:
-          name: Install Cypress binary
-          command: yarn cypress install
      - run:
          name: Run E2E tests
-          command: yarn test:e2e-framework preact
+          # Do not test CRA nor Web Components here because it's done in PnP part
+          command: yarn test:e2e-framework angular@latest vue3@next
      - store_artifacts:
          path: /tmp/storybook/cypress
          destination: cypress
  e2e-tests-cra-bench:
    executor:
      class: medium
-      name: sb_node_12_browsers
+      name: sb_cypress_6_node_12
    working_directory: /tmp/storybook
    steps:
      - git-shallow-clone/checkout_advanced:
@ -257,22 +250,16 @@ jobs:
      - run:
          name: Set registry
          command: yarn config set npmRegistryServer http://localhost:6000/
-      - run:
-          name: Test local registry
-          command: yarn npm info @storybook/core
-      - run:
-          name: Install Cypress binary
-          command: yarn cypress install
      - run:
          name: Run @storybook/bench on a CRA project
          command: yarn test:e2e-framework cra_bench
      - store_artifacts:
          path: /tmp/storybook/cypress
          destination: cypress
-  e2e-tests-yarn-2-pnp:
+  e2e-tests-pnp:
    executor:
      class: medium
-      name: sb_node_12_browsers
+      name: sb_cypress_6_node_12
    working_directory: /tmp/storybook
    steps:
      - git-shallow-clone/checkout_advanced:
@ -280,33 +267,25 @@ jobs:
      - attach_workspace:
          at: .
      - run:
-          name: running local registry
+          name: Running local registry
          command: yarn local-registry --port 6000 --open
          background: true
      - run:
-          name: wait for registry
+          name: Wait for registry
          command: yarn wait-on http://localhost:6000
      - run:
-          name: set registry
+          name: Set registry
          command: yarn config set npmRegistryServer http://localhost:6000/
-      - run:
-          name: test local registry
-          command: yarn npm info @storybook/core
-      - run:
-          name: Install Cypress binary
-          command: yarn cypress install
      - run:
          name: run e2e tests
-          command: yarn test:e2e-framework --use-yarn-2-pnp sfcVue cra
+          command: yarn test:e2e-framework --use-yarn-2-pnp sfcVue@latest cra@latest web_components_typescript@latest
      - store_artifacts:
          path: /tmp/storybook/cypress
          destination: cypress
  e2e-tests-examples:
-    working_directory: /tmp/storybook
-    docker:
-      - image: cypress/included:4.12.1
-        environment:
-          TERM: xterm
+    executor:
+      class: small
+      name: sb_cypress_6_node_12
    steps:
      - git-shallow-clone/checkout_advanced:
          clone_options: '--depth 1 --verbose'
@ -479,13 +458,13 @@ workflows:
      - publish:
          requires:
            - build
-      - e2e-tests-node-10:
+      - e2e-tests-extended:
          requires:
            - publish
-      - e2e-tests-node-12:
+      - e2e-tests-core:
          requires:
            - publish
-      - e2e-tests-yarn-2-pnp:
+      - e2e-tests-pnp:
          requires:
            - publish
      - e2e-tests-cra-bench:
--- a/.gitattributes
+++ b/.gitattributes
@ -1 +1 @@
-.yarn/releases/yarn-*.js linguist-generated=true
+/.yarn/** linguist-generated
--- a/.github/ISSUE_TEMPLATE.md
+++ b/.github/ISSUE_TEMPLATE.md
@ -1,47 +0,0 @@
-If you are reporting a bug or requesting support, start here:
-### Bug or support request summary
-
-_Please provide issue details here - What did you expect to happen? What happened instead?_ 
-
-### Steps to reproduce
-
-_Please provide necessary steps for reproduction of this issue. Describe the exact steps a maintainer has to take to make the problem occur. If the problem is non-trivial to reproduce, please link a repository or provide some code snippets._
-
-_(A screencast can be useful for visual bugs, but it is not a substitute for a textual description.)_
-
-### Please specify which version of Storybook and optionally any affected addons that you're running
-
- @storybook/react x.x.x
- @storybook/addon-something x.x.x
-
-### Affected platforms 
-
- _If UI related, please indicate browser, OS, and version_
- _If dependency related, please include relevant version numbers_
- _If developer tooling related, please include the platform information_
-
-### Screenshots / Screencast / Code Snippets (Optional)
-
-```js
-// code here
-```
-End bug report support request - delete the rest below
-
-
-If you are creating a issue to track work to be completed, start here:
-### Work summary
-
-_Please provide a description of the work to be completed here - Include some context as to why something needs to be done and link any related tickets._ 
-
-### Where to start
-
-_Please list the file(s) a contributor needs to figure out where to start work and include any docs or tutorials that may be applicable._
-
-### Acceptance criteria
-
-_Please include a checklist of the requirements necessary to close this ticket. The work should be narrowly scoped and limited to a few hours worth by an experienced developer at the most._
-
-### Who to contact
-
-_Add yourself and/or people who are familiar with the code changes and requirements. These people should be able to review the completed code._
-End work issue - please tag this issue with the correct status and type labels
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@ -1,27 +1,14 @@
 ---
-name: Bug report
-about: Create a report to help us improve
+name: Bug report 🐞
+about: Something is broken and you have a reliable reproduction? Let us know here. For questions, please use "Question" below.
+labels: needs triage, bug
 ---

 **Describe the bug**
 A clear and concise description of what the bug is.

 **To Reproduce**
-Steps to reproduce the behavior:
-
-1. Go to '...'
-2. Click on '....'
-3. Scroll down to '....'
-4. See error
-
-**Expected behavior**
-A clear and concise description of what you expected to happen.
-
-**Screenshots**
-If applicable, add screenshots to help explain your problem.
-
-**Code snippets**
-If applicable, add code samples to help explain your problem.
+Link to a reproduction repo that demonstrates the bug, plus instructions on how to trigger it.

 **System**
 Please paste the results of `npx sb@next info` here.
--- a/.github/ISSUE_TEMPLATE/config.yml
+++ b/.github/ISSUE_TEMPLATE/config.yml
@ -0,0 +1,5 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Storybook Discord
+    url: https://discord.gg/storybook
+    about: Community discussions, interactive support, contributor help
--- a/.github/ISSUE_TEMPLATE/feature_request.md
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@ -1,7 +1,7 @@
 ---
-name: Feature request
+name: Feature request 💡
 about: Suggest an idea for this project
-
+labels: needs triage, feature request
 ---

 **Is your feature request related to a problem? Please describe**
--- a/.github/ISSUE_TEMPLATE/question.md
+++ b/.github/ISSUE_TEMPLATE/question.md
@ -0,0 +1,14 @@
+---
+name: Questions 🤔
+about: Documentation missing or you just need help? Let us know here.
+labels: needs triage, question / support
+---
+
+**What's the problem?**
+Clear and concise statement of what's troubling you.
+
+**Is there documentation on this?**
+If this is documented at https://storybook.js.org/docs/ but the documentation is incomplete or unclear, link to it here.
+
+**Additional context**
+Add any other context about the problem here.
--- a/.github/workflows/danger-js.yml
+++ b/.github/workflows/danger-js.yml
@ -1,5 +1,8 @@
-on: label
-name: Dangerfile JS Label
+on:
+  pull_request:
+    types: [opened, synchronize, reopened, labeled, unlabeled]
+
+name: Danger JS
 jobs:
  dangerJS:
    name: Danger JS
--- a/.github/workflows/pull_request-dangerfile-js-pull.yml
+++ b/.github/workflows/pull_request-dangerfile-js-pull.yml
@ -1,14 +0,0 @@
-on: pull_request
-name: Dangerfile JS Pull
-jobs:
-  dangerJS:
-    name: Danger JS
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@master
-      - name: Danger JS
-        uses: danger/danger-js@main
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        with:
-          args: --dangerfile .ci/danger/dangerfile.ts
--- a/.teamcity/patches/buildTypes/TestWorkflow.kts
+++ b/.teamcity/patches/buildTypes/TestWorkflow.kts
@ -0,0 +1,31 @@
+package patches.buildTypes
+
+import jetbrains.buildServer.configs.kotlin.v2019_2.*
+import jetbrains.buildServer.configs.kotlin.v2019_2.triggers.VcsTrigger
+import jetbrains.buildServer.configs.kotlin.v2019_2.triggers.vcs
+import jetbrains.buildServer.configs.kotlin.v2019_2.ui.*
+
+/*
+This patch script was generated by TeamCity on settings change in UI.
+To apply the patch, change the buildType with id = 'TestWorkflow'
+accordingly, and delete the patch script.
+*/
+changeBuildType(RelativeId("TestWorkflow")) {
+    triggers {
+        val trigger1 = find<VcsTrigger> {
+            vcs {
+                quietPeriodMode = VcsTrigger.QuietPeriodMode.USE_DEFAULT
+                triggerRules = "-:.teamcity/**"
+                branchFilter = """
+                    +:<default>
+                    +:next
+                    +:master
+                    +:pull/*
+                """.trimIndent()
+            }
+        }
+        trigger1.apply {
+            quietPeriodMode = VcsTrigger.QuietPeriodMode.DO_NOT_USE
+        }
+    }
+}
--- a/.teamcity/settings.kts
+++ b/.teamcity/settings.kts
@ -125,10 +125,10 @@ object Build : BuildType({
                #!/bin/bash
                set -e -x
                
-                yarn install --frozen-lockfile
+                yarn install --immutable
                yarn bootstrap --core
            """.trimIndent()
-            dockerImage = "node:10"
+            dockerImage = "node:12"
            dockerImagePlatform = ScriptBuildStep.ImagePlatform.Linux
        }
    }
@ -315,14 +315,14 @@ object E2E : BuildType({
                #!/bin/bash
                set -e -x
                
-                yarn install
+                yarn install --immutable
                yarn cypress install
                yarn serve-storybooks &
                yarn await-serve-storybooks
                yarn cypress run --reporter teamcity || :
                yarn ts-node --transpile-only cypress/report-teamcity-metadata.ts || :
            """.trimIndent()
-            dockerImage = "cypress/base:10.18.1"
+            dockerImage = "cypress/base:12.19.0"
            dockerImagePlatform = ScriptBuildStep.ImagePlatform.Linux
        }
    }
@ -356,13 +356,19 @@ object SmokeTests : BuildType({
        }
    }

+    params {
+        // Disable ESLint when running smoke tests to improve perf and as of CRA 4.0.3, CRA kitchen sinks are throwing
+        // because of some ESLint warnings, related to: https://github.com/facebook/create-react-app/pull/10590
+        param("env.DISABLE_ESLINT_PLUGIN", "true")
+    }
+
    steps {
        script {
            scriptContent = """
                #!/bin/bash
                set -e -x
                
-                yarn install
+                yarn install --immutable
                
                cd examples/cra-kitchen-sink
                yarn storybook --smoke-test --quiet
@ -400,7 +406,7 @@ object SmokeTests : BuildType({
                cd ../cra-react15
                yarn storybook --smoke-test --quiet
            """.trimIndent()
-            dockerImage = "node:10"
+            dockerImage = "node:12"
            dockerImagePlatform = ScriptBuildStep.ImagePlatform.Linux
        }
    }
@ -415,11 +421,12 @@ object Frontpage : BuildType({
            scriptContent = """
                #!/bin/bash
                set -e -x
-                
+
+                yarn install --immutable
                yarn bootstrap --install
                node ./scripts/build-frontpage.js
            """.trimIndent()
-            dockerImage = "node:10"
+            dockerImage = "node:12"
            dockerImagePlatform = ScriptBuildStep.ImagePlatform.Linux
        }
    }
@ -459,12 +466,13 @@ object Test : BuildType({
                mkdir temp-jest-teamcity
                cd temp-jest-teamcity
                yarn init -y
+                touch yarn.lock
                yarn add -D jest-teamcity
                cd ..

                yarn jest --coverage -w 2 --reporters=${'$'}PWD/temp-jest-teamcity/node_modules/jest-teamcity
            """.trimIndent()
-            dockerImage = "node:10"
+            dockerImage = "node:12"
            dockerImagePlatform = ScriptBuildStep.ImagePlatform.Linux
        }
    }
@ -495,7 +503,7 @@ object Coverage : BuildType({
                yarn install
                yarn coverage
            """.trimIndent()
-            dockerImage = "node:10"
+            dockerImage = "node:12"
            dockerImagePlatform = ScriptBuildStep.ImagePlatform.Linux
        }
    }
--- a/.travis.yml
+++ b/.travis.yml
@ -1,14 +0,0 @@
-language: node_js
-node_js:
-  - "10"
-
-# install:
-  # - yarn install
-  # - yarn bootstrap --core
-
-script:
-
-jobs:
-  include:
-    - script: echo "placeholder task"
-      name: "Placeholder task"
--- a/.yarn/plugins/@yarnpkg/plugin-typescript.cjs
+++ b/.yarn/plugins/@yarnpkg/plugin-typescript.cjs
--- a/.yarnrc.yml
+++ b/.yarnrc.yml
@ -6,6 +6,10 @@ nodeLinker: node-modules

 npmRegistryServer: "https://registry.yarnpkg.com"

+plugins:
+  - path: .yarn/plugins/@yarnpkg/plugin-typescript.cjs
+    spec: "@yarnpkg/plugin-typescript"
+
 unsafeHttpWhitelist:
  - localhost

--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,3 +1,174 @@
+## 6.3.0-alpha.13 (April 21, 2021)
+
+### Bug Fixes
+
+- Addon-docs: Fix ArgsTable sorting when using of={Component} ([#14669](https://github.com/storybookjs/storybook/pull/14669))
+
+### Maintenance
+
+- CLI: Rename preact template files to JSX ([#14670](https://github.com/storybookjs/storybook/pull/14670))
+
+## 6.3.0-alpha.12 (April 20, 2021)
+
+### Maintenance
+
+- Angular: Refactor angular server ([#14358](https://github.com/storybookjs/storybook/pull/14358))
+- CLI: Rename react template files to jsx ([#14650](https://github.com/storybookjs/storybook/pull/14650))
+
+## 6.3.0-alpha.11 (April 19, 2021)
+
+### Features
+
+- CLI: Support community builders in `sb init` ([#14651](https://github.com/storybookjs/storybook/pull/14651))
+- Angular: Support Ivy addon ([#14649](https://github.com/storybookjs/storybook/pull/14649))
+
+### Maintenance
+
+- Add `funding` to manifests ([#14647](https://github.com/storybookjs/storybook/pull/14647))
+
+## 6.3.0-alpha.10 (April 18, 2021)
+
+### Bug Fixes
+
+- Modified Swatches keys to avoid duplicates ([#14636](https://github.com/storybookjs/storybook/pull/14636))
+
+### Maintenance
+
+- ESM tweaks for vite builder ([#14641](https://github.com/storybookjs/storybook/pull/14641))
+- Examples: Move from placehold.it to place-hold.it for mock images ([#14637](https://github.com/storybookjs/storybook/pull/14637))
+
+## 6.3.0-alpha.9 (April 17, 2021)
+
+### Features
+
+- Preact: Add react compat by default ([#14555](https://github.com/storybookjs/storybook/pull/14555))
+
+### Bug Fixes
+
+- Addon-docs: Fix MD code snippet format inside Description ([#14495](https://github.com/storybookjs/storybook/pull/14495))
+- Server: Fix string escaping in CSF compiler ([#14615](https://github.com/storybookjs/storybook/pull/14615))
+
+### Maintenance
+
+- Maintenance: Improve issue templates ([#14543](https://github.com/storybookjs/storybook/pull/14543))
+
+## 6.3.0-alpha.8 (April 15, 2021)
+
+### Features
+
+- Angular: Create actions for Outputs by default ([#14299](https://github.com/storybookjs/storybook/pull/14299))
+
+### Bug Fixes
+
+- Addon-a11y: Fix crypto in webpack5 ([#14592](https://github.com/storybookjs/storybook/pull/14592))
+- Storyshots: Preserve authentication information in Storybook URL ([#14582](https://github.com/storybookjs/storybook/pull/14582))
+
+### Maintenance
+
+- Angular: Add template MDX example ([#14597](https://github.com/storybookjs/storybook/pull/14597))
+
+### Dependency Upgrades
+
+- Remove unused inquirer dependency ([#14590](https://github.com/storybookjs/storybook/pull/14590))
+
+## 6.3.0-alpha.7 (April 14, 2021)
+
+### Features
+
+- Angular: Improve story rendering mode ([#14226](https://github.com/storybookjs/storybook/pull/14226))
+
+### Bug Fixes
+
+- Angular: set the @ViewChild with a non-empty value in StorybookWrapperComponent ([#14586](https://github.com/storybookjs/storybook/pull/14586))
+
+### Maintenance
+
+- CI: Remove Travis, fix TeamCity, rework E2E on CircleCI ([#14522](https://github.com/storybookjs/storybook/pull/14522))
+- Core: Resolve builders relatively to config file ([#14576](https://github.com/storybookjs/storybook/pull/14576))
+
+## 6.3.0-alpha.6 (April 13, 2021)
+
+### Bug Fixes
+
+- Core: Fix build config inconsistency ([#14566](https://github.com/storybookjs/storybook/pull/14566))
+- CLI: Fix vuetify3 detection ([#14552](https://github.com/storybookjs/storybook/pull/14552))
+
+### Maintenance
+
+- Build: Disable yarn immutable install by default during E2E tests ([#14568](https://github.com/storybookjs/storybook/pull/14568))
+- Build: Fix `dev:babel` and `dev:tsc` NPM scripts ([#14560](https://github.com/storybookjs/storybook/pull/14560))
+
+### Dependency Upgrades
+
+- Bump vue-docgen-api to 4.38.0 ([#14567](https://github.com/storybookjs/storybook/pull/14567))
+- Upgrade react-colorful to latest ([#14553](https://github.com/storybookjs/storybook/pull/14553))
+
+## 6.3.0-alpha.5 (April 11, 2021)
+
+### Features
+
+- Core: Enable community builders ([#14545](https://github.com/storybookjs/storybook/pull/14545))
+
+## 6.3.0-alpha.4 (April 10, 2021)
+
+### Features
+
+- Core: Expose Server instance through the pluggable Builder API ([#14468](https://github.com/storybookjs/storybook/pull/14468))
+
+### Maintenance
+
+- Core: Don't shadow the window global variable ([#14472](https://github.com/storybookjs/storybook/pull/14472))
+
+## 6.3.0-alpha.3 (April 10, 2021)
+
+### Features
+
+- UI: Support `*` wildcard option in storySort order array ([#14531](https://github.com/storybookjs/storybook/pull/14531))
+
+### Bug Fixes
+
+- UI: Add show toolbar T in menu ([#14437](https://github.com/storybookjs/storybook/pull/14437))
+
+### Maintenance
+
+- Refactor: Replace `lodash/range` with `Array.from` ([#14323](https://github.com/storybookjs/storybook/pull/14323))
+- Maintenance: Add TypeScript plugin for Yarn ([#14534](https://github.com/storybookjs/storybook/pull/14534))
+
+## 6.2.7 (April 9, 2021)
+
+### Bug Fixes
+
+- CLI: Fix prerelease upgrade ([#14529](https://github.com/storybookjs/storybook/pull/14529))
+
+## 6.3.0-alpha.2 (April 9, 2021)
+
+### Features
+
+- Web-components: Add full reload listening to server-side-events ([#14445](https://github.com/storybookjs/storybook/pull/14445))
+- Core: Pass watchOptions from webpack config to webpackDevMiddleware ([#14461](https://github.com/storybookjs/storybook/pull/14461))
+
+### Bug Fixes
+
+- CLI: Fix prerelease upgrade ([#14529](https://github.com/storybookjs/storybook/pull/14529))
+
+## 6.2.6 (April 9, 2021)
+
+### Bug Fixes
+
+- Core: Allow string in object arg and support fractional numbers in URL args ([#14511](https://github.com/storybookjs/storybook/pull/14511))
+- UI: Skip duplicate storyId breaking sidebar ([#14502](https://github.com/storybookjs/storybook/pull/14502))
+
+## 6.3.0-alpha.1 (April 9, 2021)
+
+### Features
+
+- Core: Enable gzip compression on the development server ([#14459](https://github.com/storybookjs/storybook/pull/14459))
+
+### Bug Fixes
+
+- Preact: Fix hooks when used in stories, preact-kitchen-sink ([#14473](https://github.com/storybookjs/storybook/pull/14473))
+- Angular: Fix handling of line breaks with multiple selectors ([#14313](https://github.com/storybookjs/storybook/pull/14313))
+
 ## 6.3.0-alpha.0 (April 8, 2021)

 ### Maintenance
--- a/MAINTAINERS.md
+++ b/MAINTAINERS.md
@ -1,53 +1,77 @@
-This document will document some of the processes that members of the documentation team should adhere to.
+This document outlines some of the processes that the maintainers should adhere to.

 # PR Process

 1. Triage with the correct [label](#labels)
-2. If there is a change related to it ensure it has been published and tested before closing
+2. If there is a change related to it, ensure it has been published and tested before closing

 # Labels

-| label name  | purpose |
-|:--------------:|:------------|
-| accessibility | |
-| addon:(name) | |
-| app:(name) | |
-| api:(name) | |
-| cleanup | Minor cleanup style change that won't show up in release changelog |
-| bug | |
-| cli | |
-| good first review | |
-| compatibility with other tools | |
-| patch | Bugfix & documentation PR that need to be picked to release branch |
-| picked | Patch PRs cherry-picked to master |
-| compatibility with other tools | |
-| components | |
-| core | |
-| decorators | |
-| dependencies | |
-| discussion | |
-| do not merge | |
-| documentation | |
-| feature request | |
-| good first issue | |
-| has workaround | |
-| help wanted | |
-| high priority | |
-| in progress | |
-| inactive | |
-| maintenance | |
-| merged | |
-| needs example | |
-| needs more info | |
-| needs rebase | |
-| needs reproduction | |
-| needs review | |
-| performance issue | |
-| presets | |
-| question / support | |
-| ready | |
-| security | |
-| todo | |
-| typescript | |
-| ui | |
-| won't fix | |
+| label name                     | purpose                                                                                                                                             |
+|--------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------|
+| accessibility                  | Issue, bug, or pull request related to accessibility                                                                                                |
+| addon:(name)                   | Issue, bug, or pull request related to Storybook addons (e.g., [Controls](/docs/essentials/controls.md))                                            |
+| app:(name)                     | Issue, bug, or pull request related to Storybook's supported frameworks (e.g., React)                                                               |
+| api:(name)                     | Issue, bug, or pull request related to Storybook's API (e.g.,[makeDecorator](/docs/addons/addons-api.md#makeDecorator-API))                         |
+| args                           | Issue, bug, or pull request related to Storybook's [args](/docs/writing-stories/args.md)                                                            |
+| babel/webpack                  | Issue, bug, or pull request related to Storybook's build system (e.g., Webpack or Babel), for Webpack 5 issues see below                            |
+| block:(name)                   | Issue or bug within a certain surface are of Storybook (e.g., [argsTable](/docs/writing-docs/doc-blocks.md#argstable))                              |
+| BREAKING CHANGE                | Issue or pull request that introduces a breaking change within Storybook's ecosystem.                                                               |
+| BREAKING PRERELASE             | Breaking, but only for prerelease users (not relative to the stable release)                                                                        |
+| build-storybook                | Issue, bug, or pull request related to Storybook's production build                                                                                 |
+| cleanup                        | Minor cleanup style change that won't show up in release changelog                                                                                  |
+| bug                            | A bug within Storybook                                                                                                                              |
+| cli                            | Issue, bug, or pull request that affects the Storybook's CLI                                                                                        |
+| compatibility with other tools | Issue, bug, or pull request between Storybook and other tools (e.g., [Nuxt](https://nuxtjs.org/))                                                   |
+| components                     | Issue, bug, or pull request related to Storybook's internal components                                                                              |
+| composition                    | Issue, bug, or pull request related to Storybook [Composition](/docs/workflows/storybook-composition.md)                                            |
+| configuration                  | Issue, bug, or pull request related to Storybook [configuration](/docs/configure/overview.md)                                                       |
+| core                           | Issue, bug, or pull request related to Storybook's Core                                                                                             |
+| cra                            | Issue, bug, or pull request that affects Storybook's compatibility with Create React APP ([CRA](https://create-react-app.dev/docs/getting-started/))|
+| CSF                            | Issue, bug, or pull request related to Storybook's [Component Story Format (CSF)](/docs/api/csf.md)                                                 |
+| decorators                     | Issue, bug, or pull related to Storybook's [Decorators](/docs/writing-stories/decorators.md)                                                        |
+| dependencies                   | Issue, bug, or pull request that related to upstream dependencies                                                                                   |
+| discussion                     | Issue currently being discussed between the maintainers and community                                                                               |
+| do not merge                   | Pull request that will introduce regressions and will not be merged                                                                                 |
+| documentation                  | Issue, bug, or pull request that affects Storybook's documentation                                                                                  |
+| duplicate                      | Question or issue already asked in the repo's issues                                                                                                |
+| feature request                | Request for a new feature to be included in Storybook                                                                                               |
+| flow                           | Issue, bug, or pull request related to Storybook and Flow                                                                                           |
+| Funded on Issuehunt            | Storybook issue funded on [IssueHunt](https://issuehunt.io/)                                                                                        |
+| gatsby                         | Issue, bug, or pull request that affects Storybook and [Gatsby](https://www.gatsbyjs.com/)                                                          |
+| good first issue               | Low impact Storybook issues that help new members get involved and start contributing                                                               |
+| has workaround                 | Issue or bug that has an alternative way to be solved with Storybook                                                                                |
+| help wanted                    | Issue, or bug that requires additional help from the community                                                                                      |
+| ie11                           | Issue, bug, or pull request related to Storybook and IE11                                                                                           |
+| in progress                    | Issue or pull request that is currently being reviewed or worked on with the author                                                                 |
+| inactive                       | Issue, or pull request that has gone stale and no active development has been done                                                                  |
+| maintenance                    | Issue, or pull request related to Storybook's internal maintenance                                                                                  |
+| mdx                            | Issue, bug, or pull request related to MDX and Storybook                                                                                            |
+| medium                         | Issue or pull request that involves a significant amount of work within Storybook                                                                   |
+| monorepos                      | Issue, bug, or pull request related to Storybook and monorepos (e.g., [lerna](https://lerna.js.org/) )                                              |
+| mui                            | Issue, bug, or pull request that affects Storybook and [Material-UI](https://material-ui.com/)                                                      |
+| multiframework                 | Issue, bug, or pull request that affects multiple supported frameworks (e.g., React, Vue)                                                           |
+| needs more info                | Issue, or bug that requires additional context from the author                                                                                      |
+| needs reproduction             | Issue, or bug that requires a reproduction to be looked at                                                                                          |
+| needs triage                   | Issue, bug, or pull request that requires further investigation from the maintainers                                                                |
+| nextjs                         | Issue, bug, or pull request related to Storybook's integration with [Next.js](https://nextjs.org/)                                                  |
+| nx                             | Issue, bug, or pull request related to Storybook's integration with [NX](https://nx.dev/)                                                           |
+| other                          | Storybook's miscellaneous issue or pull request                                                                                                     |
+| P(n)                           | Bug or issue priority. Ranges from `0` (most urgent) to `N` (least urgent)                                                                          |
+| patch                          | Bug fix and documentation pull request that will be picked to the master branch                                                                     |
+| performance issue              | Issue, bug or pull request that affects Storybook's performance                                                                                     |
+| picked                         | Patch PRs cherry-picked to the master branch                                                                                                        |
+| presets                        | Issue, bug, or pull requests that affect Storybook's presets                                                                                        |
+| question / support             | General question about Storybook                                                                                                                    |
+| run e2e extended test suite    | Pull request that affects Storybook's testing suite                                                                                                 |
+| search                         | Issue, bug or pull request related to Storybook's search functionality                                                                              |
+| security                       | Issue, bug, or pull request that addresses security with Storybook                                                                                  |
+| small                          | Issue or pull request that requires a small amount of work to be done                                                                               |
+| source-loader                  | Issue, bug, or pull request related to code display within Storybook's stories                                                                      |
+| theming                        | Issue, bug, or pull request related to Storybook customization (e.g., [theming](/docs/configure/theming.md))                                        |
+| todo                           | Issue or pull request currently being worked on                                                                                                     |
+| typescript                     | Issue, bug, or pull request related to TypeScript                                                                                                   |
+| ui                             | Issue, bug, or pull request related to Storybook's UI                                                                                               |
+| webpack5                       | Issue, bug, or pull request related to Webpack 5                                                                                                    |
+| won't fix                      | Issue or pull request that won't be addressed by the maintainers (e.g., introduces a regression)                                                    |
+| yarn/npm                       | Issue or pull request related to node package managers                                                                                              |
--- a/README.md
+++ b/README.md
@ -143,8 +143,8 @@ See [Addon / Framework Support Table](https://storybook.js.org/docs/react/api/fr
 | ---------------------------------------------------------------------------------- | -------------------------------------------------------- |
 | [info](https://github.com/storybookjs/deprecated-addons/tree/master/addons/info)   | Annotate stories with extra component usage information  |
 | [notes](https://github.com/storybookjs/deprecated-addons/tree/master/addons/notes) | Annotate Storybook stories with notes                    |
-| [contexts](https://github.com/storybookjs/storybook/tree/master/addons/contexts)   | Addon for driving your components under dynamic contexts |
-| [options](https://github.com/storybookjs/storybook/tree/master/addons/options/)    | Customize the Storybook UI in code                       |
+| [contexts](https://storybook.js.org/addons/@storybook/addon-contexts/)             | Addon for driving your components under dynamic contexts |
+| [options](https://www.npmjs.com/package/@storybook/addon-options)                  | Customize the Storybook UI in code                       |

 In order to continue improving your experience, we have to eventually deprecate certain addons in favor of new, better tools.

--- a/addons/a11y/package.json
+++ b/addons/a11y/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-a11y",
-  "version": "6.3.0-alpha.0",
+  "version": "6.3.0-alpha.13",
  "description": "Test component compliance with web accessibility standards",
  "keywords": [
    "a11y",
@ -20,6 +20,10 @@
    "url": "git+https://github.com/storybookjs/storybook.git",
    "directory": "addons/a11y"
  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
+  },
  "license": "MIT",
  "main": "dist/cjs/index.js",
  "module": "dist/esm/index.js",
@ -41,14 +45,14 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.3.0-alpha.0",
-    "@storybook/api": "6.3.0-alpha.0",
-    "@storybook/channels": "6.3.0-alpha.0",
-    "@storybook/client-api": "6.3.0-alpha.0",
-    "@storybook/client-logger": "6.3.0-alpha.0",
-    "@storybook/components": "6.3.0-alpha.0",
-    "@storybook/core-events": "6.3.0-alpha.0",
-    "@storybook/theming": "6.3.0-alpha.0",
+    "@storybook/addons": "6.3.0-alpha.13",
+    "@storybook/api": "6.3.0-alpha.13",
+    "@storybook/channels": "6.3.0-alpha.13",
+    "@storybook/client-api": "6.3.0-alpha.13",
+    "@storybook/client-logger": "6.3.0-alpha.13",
+    "@storybook/components": "6.3.0-alpha.13",
+    "@storybook/core-events": "6.3.0-alpha.13",
+    "@storybook/theming": "6.3.0-alpha.13",
    "axe-core": "^4.1.1",
    "core-js": "^3.8.2",
    "global": "^4.4.0",
@ -77,7 +81,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "7739aace24e8614f2acc9972b2ae44cf7f228c18",
+  "gitHead": "35287402b58e8c9ec660d28e9fe812f6b1204254",
  "storybook": {
    "displayName": "Accessibility",
    "icon": "https://user-images.githubusercontent.com/263385/101991665-47042f80-3c7c-11eb-8f00-64b5a18f498a.png",
--- a/addons/a11y/preset.js
+++ b/addons/a11y/preset.js
@ -1,3 +1,4 @@
+/* eslint-disable no-param-reassign */
 function managerEntries(entry = []) {
  return [...entry, require.resolve('./dist/esm/register')];
 }
@ -10,4 +11,17 @@ function config(entry = []) {
  ];
 }

-module.exports = { managerEntries, config };
+async function webpack(webpackConfig, options) {
+  const core = await options.presets.apply('core');
+  if ((core && core.builder) !== 'webpack5') {
+    return webpackConfig;
+  }
+  if (!webpackConfig.resolve.fallback) {
+    webpackConfig.resolve.fallback = {};
+  }
+  webpackConfig.resolve.fallback.crypto = false;
+
+  return webpackConfig;
+}
+
+module.exports = { managerEntries, config, webpack };
--- a/addons/a11y/src/a11yRunner.ts
+++ b/addons/a11y/src/a11yRunner.ts
@ -1,4 +1,4 @@
-import { document, window } from 'global';
+import { document, window as globalWindow } from 'global';
 import axe from 'axe-core';
 import addons from '@storybook/addons';
 import { EVENTS } from './constants';
@ -66,7 +66,7 @@ const run = async (storyId: string) => {

 /** Returns story parameters or default ones. */
 const getParams = (storyId: string): A11yParameters => {
-  const { parameters } = window.__STORYBOOK_STORY_STORE__.fromId(storyId) || {};
+  const { parameters } = globalWindow.__STORYBOOK_STORY_STORE__.fromId(storyId) || {};
  return (
    parameters.a11y || {
      config: {},
--- a/addons/actions/package.json
+++ b/addons/actions/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-actions",
-  "version": "6.3.0-alpha.0",
+  "version": "6.3.0-alpha.13",
  "description": "Get UI feedback when an action is performed on an interactive element",
  "keywords": [
    "storybook",
@ -16,6 +16,10 @@
    "url": "https://github.com/storybookjs/storybook.git",
    "directory": "addons/actions"
  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
+  },
  "license": "MIT",
  "main": "dist/cjs/index.js",
  "module": "dist/esm/index.js",
@ -37,12 +41,12 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.3.0-alpha.0",
-    "@storybook/api": "6.3.0-alpha.0",
-    "@storybook/client-api": "6.3.0-alpha.0",
-    "@storybook/components": "6.3.0-alpha.0",
-    "@storybook/core-events": "6.3.0-alpha.0",
-    "@storybook/theming": "6.3.0-alpha.0",
+    "@storybook/addons": "6.3.0-alpha.13",
+    "@storybook/api": "6.3.0-alpha.13",
+    "@storybook/client-api": "6.3.0-alpha.13",
+    "@storybook/components": "6.3.0-alpha.13",
+    "@storybook/core-events": "6.3.0-alpha.13",
+    "@storybook/theming": "6.3.0-alpha.13",
    "core-js": "^3.8.2",
    "fast-deep-equal": "^3.1.3",
    "global": "^4.4.0",
@ -74,7 +78,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "7739aace24e8614f2acc9972b2ae44cf7f228c18",
+  "gitHead": "35287402b58e8c9ec660d28e9fe812f6b1204254",
  "storybook": {
    "displayName": "Actions",
    "unsupportedFrameworks": [
--- a/addons/backgrounds/package.json
+++ b/addons/backgrounds/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-backgrounds",
-  "version": "6.3.0-alpha.0",
+  "version": "6.3.0-alpha.13",
  "description": "Switch backgrounds to view components in different settings",
  "keywords": [
    "addon",
@ -19,6 +19,10 @@
    "url": "https://github.com/storybookjs/storybook.git",
    "directory": "addons/backgrounds"
  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
+  },
  "license": "MIT",
  "author": "jbaxleyiii",
  "main": "dist/cjs/index.js",
@ -41,12 +45,12 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.3.0-alpha.0",
-    "@storybook/api": "6.3.0-alpha.0",
-    "@storybook/client-logger": "6.3.0-alpha.0",
-    "@storybook/components": "6.3.0-alpha.0",
-    "@storybook/core-events": "6.3.0-alpha.0",
-    "@storybook/theming": "6.3.0-alpha.0",
+    "@storybook/addons": "6.3.0-alpha.13",
+    "@storybook/api": "6.3.0-alpha.13",
+    "@storybook/client-logger": "6.3.0-alpha.13",
+    "@storybook/components": "6.3.0-alpha.13",
+    "@storybook/core-events": "6.3.0-alpha.13",
+    "@storybook/theming": "6.3.0-alpha.13",
    "core-js": "^3.8.2",
    "global": "^4.4.0",
    "memoizerific": "^1.11.3",
@ -72,7 +76,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "7739aace24e8614f2acc9972b2ae44cf7f228c18",
+  "gitHead": "35287402b58e8c9ec660d28e9fe812f6b1204254",
  "storybook": {
    "displayName": "Backgrounds",
    "icon": "https://user-images.githubusercontent.com/263385/101991667-479cc600-3c7c-11eb-96d3-410e936252e7.png",
--- a/addons/controls/README.md
+++ b/addons/controls/README.md
@ -77,7 +77,6 @@ Basic.args = { label: 'hello' };
 Similarly, we can also consider a story that uses knob inputs to change its behavior:

 ```jsx
-import range from 'lodash/range';
 import { number, text } from '@storybook/addon-knobs';

 export const Reflow = () => {
@ -85,7 +84,7 @@ export const Reflow = () => {
  const label = text('Label', 'reflow');
  return (
    <>
-      {range(count).map((i) => (
+      {Array.from({ length: count }, (_, i) => (
        <Button label={`button ${i}`} />
      ))}
    </>
@ -97,7 +96,7 @@ And again, as above, this can be rewritten using [fully custom args](https://sto

 ```jsx
 export const Reflow = ({ count, label, ...args }) => (
-  <>{range(count).map((i) => <Button label={`${label} ${i}` {...args}} />)}</>
+  <>{Array.from({ length: count }, (_, i) => <Button label={`${label} ${i}` {...args}} />)}</>
 );
 Reflow.args = { count: 3, label: 'reflow' };
 Reflow.argTypes = {
--- a/addons/controls/package.json
+++ b/addons/controls/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-controls",
-  "version": "6.3.0-alpha.0",
+  "version": "6.3.0-alpha.13",
  "description": "Interact with component inputs dynamically in the Storybook UI",
  "keywords": [
    "addon",
@ -20,6 +20,10 @@
    "url": "https://github.com/storybookjs/storybook.git",
    "directory": "addons/controls"
  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
+  },
  "license": "MIT",
  "main": "dist/cjs/register.js",
  "module": "dist/esm/register.js",
@ -41,12 +45,12 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.3.0-alpha.0",
-    "@storybook/api": "6.3.0-alpha.0",
-    "@storybook/client-api": "6.3.0-alpha.0",
-    "@storybook/components": "6.3.0-alpha.0",
-    "@storybook/node-logger": "6.3.0-alpha.0",
-    "@storybook/theming": "6.3.0-alpha.0",
+    "@storybook/addons": "6.3.0-alpha.13",
+    "@storybook/api": "6.3.0-alpha.13",
+    "@storybook/client-api": "6.3.0-alpha.13",
+    "@storybook/components": "6.3.0-alpha.13",
+    "@storybook/node-logger": "6.3.0-alpha.13",
+    "@storybook/theming": "6.3.0-alpha.13",
    "core-js": "^3.8.2",
    "ts-dedent": "^2.0.0"
  },
@ -65,7 +69,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "7739aace24e8614f2acc9972b2ae44cf7f228c18",
+  "gitHead": "35287402b58e8c9ec660d28e9fe812f6b1204254",
  "storybook": {
    "displayName": "Controls",
    "icon": "https://user-images.githubusercontent.com/263385/101991669-479cc600-3c7c-11eb-93d9-38b67e8371f2.png",
--- a/addons/cssresources/package.json
+++ b/addons/cssresources/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-cssresources",
-  "version": "6.3.0-alpha.0",
+  "version": "6.3.0-alpha.13",
  "description": "A storybook addon to switch between css resources at runtime for your story",
  "keywords": [
    "addon",
@ -18,6 +18,10 @@
    "url": "https://github.com/storybookjs/storybook.git",
    "directory": "addons/cssresources"
  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
+  },
  "license": "MIT",
  "author": "nm123github",
  "main": "dist/cjs/index.js",
@ -40,11 +44,11 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.3.0-alpha.0",
-    "@storybook/api": "6.3.0-alpha.0",
-    "@storybook/components": "6.3.0-alpha.0",
-    "@storybook/core-events": "6.3.0-alpha.0",
-    "@storybook/theming": "6.3.0-alpha.0",
+    "@storybook/addons": "6.3.0-alpha.13",
+    "@storybook/api": "6.3.0-alpha.13",
+    "@storybook/components": "6.3.0-alpha.13",
+    "@storybook/core-events": "6.3.0-alpha.13",
+    "@storybook/theming": "6.3.0-alpha.13",
    "core-js": "^3.8.2",
    "global": "^4.4.0",
    "regenerator-runtime": "^0.13.7"
@ -67,7 +71,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "7739aace24e8614f2acc9972b2ae44cf7f228c18",
+  "gitHead": "35287402b58e8c9ec660d28e9fe812f6b1204254",
  "storybook": {
    "displayName": "CSS Resources",
    "unsupportedFrameworks": [
--- a/addons/cssresources/src/css-resource-panel.test.tsx
+++ b/addons/cssresources/src/css-resource-panel.test.tsx
@ -178,22 +178,22 @@ describe('CSSResourcePanel', () => {
  //   });
  // });

-  it('should render code for items with the `hideCode` flag', () => {
-    const getCurrentParameter = jest.fn(() => [
-      {
-        id: 'local-fake-id-1',
-        code: 'local-fake-code-1',
-        picked: true,
-        hideCode: false,
-      },
-    ]);
+  // it('should render code for items with the `hideCode` flag', () => {
+  //   const getCurrentParameter = jest.fn(() => [
+  //     {
+  //       id: 'local-fake-id-1',
+  //       code: 'local-fake-code-1',
+  //       picked: true,
+  //       hideCode: false,
+  //     },
+  //   ]);

-    renderWithData({
-      getCurrentParameter: getCurrentParameter as any,
-    });
+  //   renderWithData({
+  //     getCurrentParameter: getCurrentParameter as any,
+  //   });

-    expect(screen.queryByText('local-fake-code-1')).toBeInTheDocument();
-  });
+  //   expect(screen.queryByText('local-fake-code-1')).toBeInTheDocument();
+  // });

  it('should not render code for items /w the `hideCode` flag', () => {
    const getCurrentParameter = jest.fn(() => [
--- a/addons/design-assets/package.json
+++ b/addons/design-assets/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-design-assets",
-  "version": "6.3.0-alpha.0",
+  "version": "6.3.0-alpha.13",
  "description": "Design asset preview for storybook",
  "keywords": [
    "addon",
@ -20,6 +20,10 @@
    "url": "git+https://github.com/storybookjs/storybook.git",
    "directory": "addons/design-assets"
  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
+  },
  "license": "MIT",
  "main": "dist/cjs/index.js",
  "module": "dist/esm/index.js",
@ -41,12 +45,12 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.3.0-alpha.0",
-    "@storybook/api": "6.3.0-alpha.0",
-    "@storybook/client-logger": "6.3.0-alpha.0",
-    "@storybook/components": "6.3.0-alpha.0",
-    "@storybook/core-events": "6.3.0-alpha.0",
-    "@storybook/theming": "6.3.0-alpha.0",
+    "@storybook/addons": "6.3.0-alpha.13",
+    "@storybook/api": "6.3.0-alpha.13",
+    "@storybook/client-logger": "6.3.0-alpha.13",
+    "@storybook/components": "6.3.0-alpha.13",
+    "@storybook/core-events": "6.3.0-alpha.13",
+    "@storybook/theming": "6.3.0-alpha.13",
    "core-js": "^3.8.2",
    "global": "^4.4.0",
    "regenerator-runtime": "^0.13.7",
@ -68,7 +72,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "7739aace24e8614f2acc9972b2ae44cf7f228c18",
+  "gitHead": "35287402b58e8c9ec660d28e9fe812f6b1204254",
  "storybook": {
    "displayName": "Design assets",
    "unsupportedFrameworks": [
--- a/addons/docs/package.json
+++ b/addons/docs/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-docs",
-  "version": "6.3.0-alpha.0",
+  "version": "6.3.0-alpha.13",
  "description": "Document component usage and properties in Markdown",
  "keywords": [
    "addon",
@ -19,6 +19,10 @@
    "url": "https://github.com/storybookjs/storybook.git",
    "directory": "addons/docs"
  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
+  },
  "license": "MIT",
  "main": "dist/cjs/public_api.js",
  "module": "dist/esm/public_api.js",
@ -58,19 +62,19 @@
    "@mdx-js/loader": "^1.6.22",
    "@mdx-js/mdx": "^1.6.22",
    "@mdx-js/react": "^1.6.22",
-    "@storybook/addons": "6.3.0-alpha.0",
-    "@storybook/api": "6.3.0-alpha.0",
-    "@storybook/builder-webpack4": "6.3.0-alpha.0",
-    "@storybook/client-api": "6.3.0-alpha.0",
-    "@storybook/client-logger": "6.3.0-alpha.0",
-    "@storybook/components": "6.3.0-alpha.0",
-    "@storybook/core": "6.3.0-alpha.0",
-    "@storybook/core-events": "6.3.0-alpha.0",
+    "@storybook/addons": "6.3.0-alpha.13",
+    "@storybook/api": "6.3.0-alpha.13",
+    "@storybook/builder-webpack4": "6.3.0-alpha.13",
+    "@storybook/client-api": "6.3.0-alpha.13",
+    "@storybook/client-logger": "6.3.0-alpha.13",
+    "@storybook/components": "6.3.0-alpha.13",
+    "@storybook/core": "6.3.0-alpha.13",
+    "@storybook/core-events": "6.3.0-alpha.13",
    "@storybook/csf": "0.0.1",
-    "@storybook/node-logger": "6.3.0-alpha.0",
-    "@storybook/postinstall": "6.3.0-alpha.0",
-    "@storybook/source-loader": "6.3.0-alpha.0",
-    "@storybook/theming": "6.3.0-alpha.0",
+    "@storybook/node-logger": "6.3.0-alpha.13",
+    "@storybook/postinstall": "6.3.0-alpha.13",
+    "@storybook/source-loader": "6.3.0-alpha.13",
+    "@storybook/theming": "6.3.0-alpha.13",
    "acorn": "^7.4.1",
    "acorn-jsx": "^5.3.1",
    "acorn-walk": "^7.2.0",
@ -97,10 +101,10 @@
    "@babel/core": "^7.12.10",
    "@emotion/core": "^10.1.1",
    "@emotion/styled": "^10.0.27",
-    "@storybook/angular": "6.3.0-alpha.0",
-    "@storybook/react": "6.3.0-alpha.0",
-    "@storybook/vue": "6.3.0-alpha.0",
-    "@storybook/web-components": "6.3.0-alpha.0",
+    "@storybook/angular": "6.3.0-alpha.13",
+    "@storybook/react": "6.3.0-alpha.13",
+    "@storybook/vue": "6.3.0-alpha.13",
+    "@storybook/web-components": "6.3.0-alpha.13",
    "@types/cross-spawn": "^6.0.2",
    "@types/doctrine": "^0.0.3",
    "@types/enzyme": "^3.10.8",
@ -131,10 +135,12 @@
  },
  "peerDependencies": {
    "@babel/core": "^7.11.5",
-    "@storybook/angular": "6.3.0-alpha.0",
-    "@storybook/vue": "6.3.0-alpha.0",
-    "@storybook/vue3": "6.3.0-alpha.0",
+    "@storybook/angular": "6.3.0-alpha.13",
+    "@storybook/vue": "6.3.0-alpha.13",
+    "@storybook/vue3": "6.3.0-alpha.13",
+    "@storybook/web-components": "6.3.0-alpha.13",
    "babel-loader": "^8.0.0",
+    "lit-html": "^1.0.0",
    "react": "^16.8.0 || ^17.0.0",
    "react-dom": "^16.8.0 || ^17.0.0",
    "svelte": "^3.31.2",
@ -152,6 +158,12 @@
    "@storybook/vue3": {
      "optional": true
    },
+    "@storybook/web-components": {
+      "optional": true
+    },
+    "lit-html": {
+      "optional": true
+    },
    "react": {
      "optional": true
    },
@ -174,7 +186,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "7739aace24e8614f2acc9972b2ae44cf7f228c18",
+  "gitHead": "35287402b58e8c9ec660d28e9fe812f6b1204254",
  "storybook": {
    "displayName": "Docs",
    "icon": "https://user-images.githubusercontent.com/263385/101991672-48355c80-3c7c-11eb-82d9-95fa12438f64.png",
--- a/addons/docs/src/blocks/ArgsTable.tsx
+++ b/addons/docs/src/blocks/ArgsTable.tsx
@ -195,10 +195,10 @@ export const StoryTable: FC<

 export const ComponentsTable: FC<ComponentsProps> = (props) => {
  const context = useContext(DocsContext);
-  const { components, include, exclude } = props;
+  const { components, include, exclude, sort } = props;

  const tabs = addComponentTabs({}, components, context, include, exclude);
-  return <TabbedArgsTable tabs={tabs} />;
+  return <TabbedArgsTable tabs={tabs} sort={sort} />;
 };

 export const ArgsTable: FC<ArgsTableProps> = (props) => {
@ -222,7 +222,8 @@ export const ArgsTable: FC<ArgsTableProps> = (props) => {
    } catch (err) {
      mainProps = { error: err.message };
    }
-    return <PureArgsTable {...mainProps} />;
+
+    return <PureArgsTable {...mainProps} sort={sort} />;
  }

  if (components) {
--- a/addons/docs/src/blocks/DocsContainer.tsx
+++ b/addons/docs/src/blocks/DocsContainer.tsx
@ -1,5 +1,5 @@
 import React, { FunctionComponent, useEffect } from 'react';
-import { document, window } from 'global';
+import { document, window as globalWindow } from 'global';
 import deprecate from 'util-deprecate';
 import dedent from 'ts-dedent';
 import { MDXProvider } from '@mdx-js/react';
@ -46,7 +46,7 @@ export const DocsContainer: FunctionComponent<DocsContainerProps> = ({ context,
  useEffect(() => {
    let url;
    try {
-      url = new URL(window.parent.location);
+      url = new URL(globalWindow.parent.location);
    } catch (err) {
      return;
    }
--- a/addons/docs/src/blocks/enhanceSource.ts
+++ b/addons/docs/src/blocks/enhanceSource.ts
@ -1,6 +1,6 @@
 import { combineParameters } from '@storybook/client-api';
 import { StoryContext, Parameters } from '@storybook/addons';
-import { extractSource, LocationsMap } from '@storybook/source-loader/extract-source';
+import { extractSource, LocationsMap } from '@storybook/source-loader';

 interface StorySource {
  source: string;
--- a/addons/docs/src/frameworks/angular/testfixtures/doc-button/argtypes.snapshot
+++ b/addons/docs/src/frameworks/angular/testfixtures/doc-button/argtypes.snapshot
@ -180,6 +180,7 @@ Object {
    },
  },
  "onClick": Object {
+    "action": "onClick",
    "defaultValue": undefined,
    "description": "<p>Handler to be called when the button is clicked by a user.</p>
 <p>Will also block the emission of the event if <code>isDisabled</code> is true.</p>
--- a/addons/docs/src/frameworks/angular/compodoc.ts
+++ b/addons/docs/src/frameworks/angular/compodoc.ts
@ -191,11 +191,13 @@ export const extractArgTypesFromData = (componentData: Class | Directive | Injec
        isMethod(item) || section !== 'inputs'
          ? { name: 'void' }
          : extractType(item as Property, defaultValue);
+      const action = section === 'outputs' ? { action: item.name } : {};
      const argType = {
        name: item.name,
        description: item.description,
        defaultValue,
        type,
+        ...action,
        table: {
          category: section,
          type: {
--- a/addons/docs/src/frameworks/react/jsxDecorator.test.tsx
+++ b/addons/docs/src/frameworks/react/jsxDecorator.test.tsx
@ -1,6 +1,5 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
 import React from 'react';
-import range from 'lodash/range';
 import PropTypes from 'prop-types';
 import addons, { StoryContext } from '@storybook/addons';
 import { renderJsx, jsxDecorator } from './jsxDecorator';
@ -46,10 +45,10 @@ describe('renderJsx', () => {
    `);
  });
  it('large objects', () => {
-    const obj: Record<string, string> = {};
-    range(20).forEach((i) => {
-      obj[`key_${i}`] = `val_${i}`;
-    });
+    const obj = Array.from({ length: 20 }).reduce((acc, _, i) => {
+      acc[`key_${i}`] = `val_${i}`;
+      return acc;
+    }, {});
    expect(renderJsx(<div data-val={obj} />, {})).toMatchInlineSnapshot(`
      <div
        data-val={{
@ -79,7 +78,7 @@ describe('renderJsx', () => {
  });

  it('long arrays', () => {
-    const arr = range(20).map((i) => `item ${i}`);
+    const arr = Array.from({ length: 20 }, (_, i) => `item ${i}`);
    expect(renderJsx(<div data-val={arr} />, {})).toMatchInlineSnapshot(`
      <div
        data-val={[
--- a/addons/docs/src/frameworks/web-components/config.js
+++ b/addons/docs/src/frameworks/web-components/config.js
@ -1,5 +1,4 @@
 /* global window */
-/* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
 import { render } from 'lit-html';
 import { extractArgTypes, extractComponentDescription } from './custom-elements';
--- a/addons/docs/src/frameworks/web-components/custom-elements.ts
+++ b/addons/docs/src/frameworks/web-components/custom-elements.ts
@ -1,4 +1,3 @@
-/* eslint-disable import/no-extraneous-dependencies */
 import { getCustomElements, isValidComponent, isValidMetaData } from '@storybook/web-components';
 import { ArgTypes } from '@storybook/api';
 import { logger } from '@storybook/client-logger';
--- a/addons/docs/web-components/README.md
+++ b/addons/docs/web-components/README.md
@ -0,0 +1,107 @@
+<h1>Storybook Docs for Web Components</h1>
+
+- [Installation](#installation)
+- [Props tables](#props-tables)
+- [Stories not inline](#stories-not-inline)
+- [More resources](#more-resources)
+
+## Installation
+
+- Be sure to check the [installation section of the general addon-docs page](../README.md) before proceeding.
+- Be sure to have a [custom-elements.json](./#custom-elementsjson) file.
+- Add to your `.storybook/preview.js`
+
+  ```js
+  import { setCustomElements } from '@storybook/web-components';
+  import customElements from '../custom-elements.json';
+
+  setCustomElements(customElements);
+  ```
+
+- Add to your story files
+
+  ```js
+  export default {
+    title: 'Demo Card',
+    component: 'your-component-name', // which is also found in the `custom-elements.json`
+  };
+  ```
+
+## Props tables
+
+In order to get [Props tables](..docs/../../docs/props-tables.md) documentation for web-components you will need to have a [custom-elements.json](https://github.com/webcomponents/custom-elements-json) file.
+
+You can hand write it or better generate it. Depending on the web components sugar you are choosing your milage may vary.
+
+Known analyzers that output `custom-elements.json`:
+
+- [web-component-analyzer](https://github.com/runem/web-component-analyzer)
+  - Supports LitElement, Polymer, Vanilla, (Stencil)
+- [stenciljs](https://stenciljs.com/)
+  - Supports Stencil (but does not have all metadata)
+
+To generate this file with Stencil, add `docs-vscode` to outputTargets in `stencil.config.ts`:
+
+```
+{
+  type: 'docs-vscode',
+  file: 'custom-elements.json'
+},
+```
+
+The file looks something like this:
+
+```json
+{
+  "version": 2,
+  "tags": [
+    {
+      "name": "demo-wc-card",
+      "properties": [
+        {
+          "name": "header",
+          "type": "String",
+          "attribute": "header",
+          "description": "Shown at the top of the card",
+          "default": "Your Message"
+        }
+      ],
+      "events": [],
+      "slots": [],
+      "cssProperties": []
+    }
+  ]
+}
+```
+
+For a full example see the [web-components-kitchen-sink/custom-elements.json](../../../examples/web-components-kitchen-sink/custom-elements.json).
+
+## Stories not inline
+
+By default stories are rendered inline.
+For web components that is usually fine as they are style encapsulated via shadow dom.
+However when you have a style tag in you template it might be best to show them in an iframe.
+
+To always use iframes you can set
+
+```js
+addParameters({
+  docs: {
+    inlineStories: false,
+  },
+});
+```
+
+or add it to individual stories.
+
+```js
+<Story inline={false} />
+```
+
+## More resources
+
+Want to learn more? Here are some more articles on Storybook Docs:
+
+- References: [DocsPage](../docs/docspage.md) / [MDX](../docs/mdx.md) / [FAQ](../docs/faq.md) / [Recipes](../docs/recipes.md) / [Theming](../docs/theming.md) / [Props](../docs/props-tables.md)
+- Announcements: [Vision](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a) / [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) / [MDX](https://medium.com/storybookjs/rich-docs-with-storybook-mdx-61bc145ae7bc) / [Framework support](https://medium.com/storybookjs/storybook-docs-for-new-frameworks-b1f6090ee0ea)
+- Example: [Storybook Design System](https://github.com/storybookjs/design-system)
--- a/addons/docs/web-components/index.js
+++ b/addons/docs/web-components/index.js
@ -0,0 +1 @@
+module.exports = require('../dist/frameworks/common/index');
--- a/addons/essentials/package.json
+++ b/addons/essentials/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-essentials",
-  "version": "6.3.0-alpha.0",
+  "version": "6.3.0-alpha.13",
  "description": "Curated addons to bring out the best of Storybook",
  "keywords": [
    "addon",
@ -16,6 +16,10 @@
    "url": "https://github.com/storybookjs/storybook.git",
    "directory": "addons/essentials"
  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
+  },
  "license": "MIT",
  "main": "dist/cjs/index.js",
  "module": "dist/esm/index.js",
@ -35,29 +39,31 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addon-actions": "6.3.0-alpha.0",
-    "@storybook/addon-backgrounds": "6.3.0-alpha.0",
-    "@storybook/addon-controls": "6.3.0-alpha.0",
-    "@storybook/addon-docs": "6.3.0-alpha.0",
-    "@storybook/addon-toolbars": "6.3.0-alpha.0",
-    "@storybook/addon-viewport": "6.3.0-alpha.0",
-    "@storybook/addons": "6.3.0-alpha.0",
-    "@storybook/api": "6.3.0-alpha.0",
-    "@storybook/node-logger": "6.3.0-alpha.0",
+    "@storybook/addon-actions": "6.3.0-alpha.13",
+    "@storybook/addon-backgrounds": "6.3.0-alpha.13",
+    "@storybook/addon-controls": "6.3.0-alpha.13",
+    "@storybook/addon-docs": "6.3.0-alpha.13",
+    "@storybook/addon-toolbars": "6.3.0-alpha.13",
+    "@storybook/addon-viewport": "6.3.0-alpha.13",
+    "@storybook/addons": "6.3.0-alpha.13",
+    "@storybook/api": "6.3.0-alpha.13",
+    "@storybook/node-logger": "6.3.0-alpha.13",
    "core-js": "^3.8.2",
    "regenerator-runtime": "^0.13.7",
    "ts-dedent": "^2.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
-    "@storybook/vue": "6.3.0-alpha.0",
+    "@storybook/vue": "6.3.0-alpha.13",
    "@types/jest": "^26.0.16",
    "@types/webpack-env": "^1.16.0"
  },
  "peerDependencies": {
    "@babel/core": "^7.9.6",
-    "@storybook/vue": "6.3.0-alpha.0",
+    "@storybook/vue": "6.3.0-alpha.13",
+    "@storybook/web-components": "6.3.0-alpha.13",
    "babel-loader": "^8.0.0",
+    "lit-html": "^1.0.0",
    "react": "^16.8.0 || ^17.0.0",
    "react-dom": "^16.8.0 || ^17.0.0",
    "webpack": "*"
@ -66,6 +72,12 @@
    "@storybook/vue": {
      "optional": true
    },
+    "@storybook/web-components": {
+      "optional": true
+    },
+    "lit-html": {
+      "optional": true
+    },
    "react": {
      "optional": true
    },
@ -79,5 +91,5 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "7739aace24e8614f2acc9972b2ae44cf7f228c18"
+  "gitHead": "35287402b58e8c9ec660d28e9fe812f6b1204254"
 }
--- a/addons/events/package.json
+++ b/addons/events/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-events",
-  "version": "6.3.0-alpha.0",
+  "version": "6.3.0-alpha.13",
  "description": "Add events to your Storybook stories.",
  "keywords": [
    "addon",
@ -18,6 +18,10 @@
    "url": "https://github.com/storybookjs/storybook.git",
    "directory": "addons/events"
  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
+  },
  "license": "MIT",
  "main": "dist/cjs/index.js",
  "module": "dist/esm/index.js",
@ -39,11 +43,11 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.3.0-alpha.0",
-    "@storybook/api": "6.3.0-alpha.0",
-    "@storybook/client-api": "6.3.0-alpha.0",
-    "@storybook/core-events": "6.3.0-alpha.0",
-    "@storybook/theming": "6.3.0-alpha.0",
+    "@storybook/addons": "6.3.0-alpha.13",
+    "@storybook/api": "6.3.0-alpha.13",
+    "@storybook/client-api": "6.3.0-alpha.13",
+    "@storybook/core-events": "6.3.0-alpha.13",
+    "@storybook/theming": "6.3.0-alpha.13",
    "core-js": "^3.8.2",
    "format-json": "^1.0.3",
    "lodash": "^4.17.20",
@ -70,7 +74,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "7739aace24e8614f2acc9972b2ae44cf7f228c18",
+  "gitHead": "35287402b58e8c9ec660d28e9fe812f6b1204254",
  "storybook": {
    "displayName": "Events",
    "unsupportedFrameworks": [
--- a/addons/google-analytics/package.json
+++ b/addons/google-analytics/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-google-analytics",
-  "version": "6.3.0-alpha.0",
+  "version": "6.3.0-alpha.13",
  "description": "Storybook addon for google analytics",
  "keywords": [
    "addon",
@ -16,6 +16,10 @@
    "url": "https://github.com/storybookjs/storybook.git",
    "directory": "addons/google-analytics"
  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
+  },
  "license": "MIT",
  "main": "dist/cjs/register.js",
  "module": "dist/esm/register.js",
@ -31,8 +35,8 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.3.0-alpha.0",
-    "@storybook/core-events": "6.3.0-alpha.0",
+    "@storybook/addons": "6.3.0-alpha.13",
+    "@storybook/core-events": "6.3.0-alpha.13",
    "core-js": "^3.8.2",
    "global": "^4.4.0",
    "react-ga": "^2.7.0",
@ -53,7 +57,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "7739aace24e8614f2acc9972b2ae44cf7f228c18",
+  "gitHead": "35287402b58e8c9ec660d28e9fe812f6b1204254",
  "storybook": {
    "displayName": "Google Analytics",
    "icon": "https://pbs.twimg.com/profile_images/1021848775885651968/cU74ahCn_400x400.jpg",
--- a/addons/google-analytics/src/register.ts
+++ b/addons/google-analytics/src/register.ts
@ -1,11 +1,11 @@
-import { window } from 'global';
+import { window as globalWindow } from 'global';
 import { addons } from '@storybook/addons';
 import { STORY_CHANGED, STORY_ERRORED, STORY_MISSING } from '@storybook/core-events';

 import ReactGA from 'react-ga';

 addons.register('storybook/google-analytics', (api) => {
-  ReactGA.initialize(window.STORYBOOK_GA_ID, window.STORYBOOK_REACT_GA_OPTIONS);
+  ReactGA.initialize(globalWindow.STORYBOOK_GA_ID, globalWindow.STORYBOOK_REACT_GA_OPTIONS);

  api.on(STORY_CHANGED, () => {
    const { path } = api.getUrlState();
--- a/addons/graphql/package.json
+++ b/addons/graphql/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-graphql",
-  "version": "6.3.0-alpha.0",
+  "version": "6.3.0-alpha.13",
  "description": "Storybook addon to display the GraphiQL IDE",
  "keywords": [
    "addon",
@ -16,6 +16,10 @@
    "url": "https://github.com/storybookjs/storybook.git",
    "directory": "addons/graphql"
  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
+  },
  "license": "MIT",
  "main": "dist/cjs/index.js",
  "module": "dist/esm/index.js",
@ -39,8 +43,8 @@
  "dependencies": {
    "@babel/core": "^7.12.10",
    "@babel/plugin-transform-classes": "^7.12.1",
-    "@storybook/addons": "6.3.0-alpha.0",
-    "@storybook/api": "6.3.0-alpha.0",
+    "@storybook/addons": "6.3.0-alpha.13",
+    "@storybook/api": "6.3.0-alpha.13",
    "babel-loader": "^8.2.2",
    "core-js": "^3.8.2",
    "global": "^4.4.0",
@ -65,7 +69,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "7739aace24e8614f2acc9972b2ae44cf7f228c18",
+  "gitHead": "35287402b58e8c9ec660d28e9fe812f6b1204254",
  "storybook": {
    "displayName": "GraphiQL IDE",
    "icon": "https://pbs.twimg.com/profile_images/618131103509909504/VQLBJ0TR_400x400.png",
--- a/addons/jest/package.json
+++ b/addons/jest/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-jest",
-  "version": "6.3.0-alpha.0",
+  "version": "6.3.0-alpha.13",
  "description": "React storybook addon that show component jest report",
  "keywords": [
    "addon",
@ -21,6 +21,10 @@
    "url": "https://github.com/storybookjs/storybook.git",
    "directory": "addons/jest"
  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
+  },
  "license": "MIT",
  "author": "Renaud Tertrais <renaud.tertrais@gmail.com> (https://github.com/renaudtertrais)",
  "main": "dist/cjs/index.js",
@ -43,11 +47,11 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.3.0-alpha.0",
-    "@storybook/api": "6.3.0-alpha.0",
-    "@storybook/components": "6.3.0-alpha.0",
-    "@storybook/core-events": "6.3.0-alpha.0",
-    "@storybook/theming": "6.3.0-alpha.0",
+    "@storybook/addons": "6.3.0-alpha.13",
+    "@storybook/api": "6.3.0-alpha.13",
+    "@storybook/components": "6.3.0-alpha.13",
+    "@storybook/core-events": "6.3.0-alpha.13",
+    "@storybook/theming": "6.3.0-alpha.13",
    "core-js": "^3.8.2",
    "global": "^4.4.0",
    "react-sizeme": "^3.0.1",
@ -72,7 +76,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "7739aace24e8614f2acc9972b2ae44cf7f228c18",
+  "gitHead": "35287402b58e8c9ec660d28e9fe812f6b1204254",
  "storybook": {
    "displayName": "Jest",
    "icon": "https://pbs.twimg.com/profile_images/821713465245102080/mMtKIMax_400x400.jpg",
--- a/addons/knobs/package.json
+++ b/addons/knobs/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-knobs",
-  "version": "6.3.0-alpha.0",
+  "version": "6.3.0-alpha.13",
  "description": "Storybook addon prop editor component",
  "keywords": [
    "addon",
@ -16,6 +16,10 @@
    "url": "https://github.com/storybookjs/storybook.git",
    "directory": "addons/knobs"
  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
+  },
  "license": "MIT",
  "main": "dist/cjs/index.js",
  "module": "dist/esm/index.js",
@ -37,13 +41,13 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.3.0-alpha.0",
-    "@storybook/api": "6.3.0-alpha.0",
-    "@storybook/channels": "6.3.0-alpha.0",
-    "@storybook/client-api": "6.3.0-alpha.0",
-    "@storybook/components": "6.3.0-alpha.0",
-    "@storybook/core-events": "6.3.0-alpha.0",
-    "@storybook/theming": "6.3.0-alpha.0",
+    "@storybook/addons": "6.3.0-alpha.13",
+    "@storybook/api": "6.3.0-alpha.13",
+    "@storybook/channels": "6.3.0-alpha.13",
+    "@storybook/client-api": "6.3.0-alpha.13",
+    "@storybook/components": "6.3.0-alpha.13",
+    "@storybook/core-events": "6.3.0-alpha.13",
+    "@storybook/theming": "6.3.0-alpha.13",
    "copy-to-clipboard": "^3.3.1",
    "core-js": "^3.8.2",
    "escape-html": "^1.0.3",
@ -52,7 +56,7 @@
    "lodash": "^4.17.20",
    "prop-types": "^15.7.2",
    "qs": "^6.10.0",
-    "react-colorful": "^5.0.1",
+    "react-colorful": "^5.1.2",
    "react-lifecycles-compat": "^3.0.4",
    "react-select": "^3.2.0",
    "regenerator-runtime": "^0.13.7"
@ -80,7 +84,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "7739aace24e8614f2acc9972b2ae44cf7f228c18",
+  "gitHead": "35287402b58e8c9ec660d28e9fe812f6b1204254",
  "storybook": {
    "displayName": "Knobs",
    "unsupportedFrameworks": [
--- a/addons/links/package.json
+++ b/addons/links/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-links",
-  "version": "6.3.0-alpha.0",
+  "version": "6.3.0-alpha.13",
  "description": "Link stories together to build demos and prototypes with your UI components",
  "keywords": [
    "addon",
@ -16,6 +16,10 @@
    "url": "https://github.com/storybookjs/storybook.git",
    "directory": "addons/links"
  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
+  },
  "license": "MIT",
  "main": "dist/cjs/index.js",
  "module": "dist/esm/index.js",
@ -37,11 +41,11 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.3.0-alpha.0",
-    "@storybook/client-logger": "6.3.0-alpha.0",
-    "@storybook/core-events": "6.3.0-alpha.0",
+    "@storybook/addons": "6.3.0-alpha.13",
+    "@storybook/client-logger": "6.3.0-alpha.13",
+    "@storybook/core-events": "6.3.0-alpha.13",
    "@storybook/csf": "0.0.1",
-    "@storybook/router": "6.3.0-alpha.0",
+    "@storybook/router": "6.3.0-alpha.13",
    "@types/qs": "^6.9.5",
    "core-js": "^3.8.2",
    "global": "^4.4.0",
@ -68,7 +72,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "7739aace24e8614f2acc9972b2ae44cf7f228c18",
+  "gitHead": "35287402b58e8c9ec660d28e9fe812f6b1204254",
  "storybook": {
    "displayName": "Links",
    "icon": "https://user-images.githubusercontent.com/263385/101991673-48355c80-3c7c-11eb-9b6e-b627c96a75f6.png",
--- a/addons/queryparams/package.json
+++ b/addons/queryparams/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-queryparams",
-  "version": "6.3.0-alpha.0",
+  "version": "6.3.0-alpha.13",
  "description": "parameter addon for storybook",
  "keywords": [
    "addon",
@ -17,6 +17,10 @@
    "url": "git+https://github.com/storybookjs/storybook.git",
    "directory": "addons/addon-queryparams"
  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
+  },
  "license": "MIT",
  "main": "dist/cjs/index.js",
  "module": "dist/esm/index.js",
@ -38,12 +42,12 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.3.0-alpha.0",
-    "@storybook/api": "6.3.0-alpha.0",
-    "@storybook/client-logger": "6.3.0-alpha.0",
-    "@storybook/components": "6.3.0-alpha.0",
-    "@storybook/core-events": "6.3.0-alpha.0",
-    "@storybook/theming": "6.3.0-alpha.0",
+    "@storybook/addons": "6.3.0-alpha.13",
+    "@storybook/api": "6.3.0-alpha.13",
+    "@storybook/client-logger": "6.3.0-alpha.13",
+    "@storybook/components": "6.3.0-alpha.13",
+    "@storybook/core-events": "6.3.0-alpha.13",
+    "@storybook/theming": "6.3.0-alpha.13",
    "core-js": "^3.8.2",
    "global": "^4.4.0",
    "qs": "^6.10.0",
@ -68,7 +72,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "7739aace24e8614f2acc9972b2ae44cf7f228c18",
+  "gitHead": "35287402b58e8c9ec660d28e9fe812f6b1204254",
  "storybook": {
    "displayName": "Query params",
    "unsupportedFrameworks": [
--- a/addons/storyshots/storyshots-core/README.md
+++ b/addons/storyshots/storyshots-core/README.md
@ -235,11 +235,11 @@ module.exports = {

 ### Configure Jest for Preact

-StoryShots addon for Preact is dependent on [preact-render-to-json](https://github.com/nathancahill/preact-render-to-json), but
+StoryShots addon for Preact is dependent on [preact-render-to-string](https://github.com/preactjs/preact-render-to-string), but
 [doesn't](#deps-issue) install it, so you need to install it separately.

 ```sh
-yarn add preact-render-to-json --dev
+yarn add preact-render-to-string --dev
 ```

 ### Configure Jest for Web Components
@ -325,19 +325,18 @@ By design, [`react-test-renderer` doesn't use a browser environment or JSDOM](ht
 #### Example with React Testing Library

 ```js
-import initStoryshots from "@storybook/addon-storyshots";
-import { render } from "@testing-library/react";
+import initStoryshots from '@storybook/addon-storyshots';
+import { render } from '@testing-library/react';

 const reactTestingLibrarySerializer = {
  print: (val, serialize, indent) => serialize(val.container.firstChild),
-  test: val => val && val.hasOwnProperty("container")
+  test: (val) => val && val.hasOwnProperty('container'),
 };

 initStoryshots({
  renderer: render,
-  snapshotSerializers: [reactTestingLibrarySerializer]
+  snapshotSerializers: [reactTestingLibrarySerializer],
 });
-
 ```

 #### Example with Enzyme
@ -584,9 +583,10 @@ initStoryshots({

 ### `framework`

-If you are running tests from outside of your app's directory, storyshots' detection of which framework you are using may fail. Pass `"react"` or `"react-native"` to short-circuit this. 
+If you are running tests from outside of your app's directory, storyshots' detection of which framework you are using may fail. Pass `"react"` or `"react-native"` to short-circuit this.

 For example:
+
 ```js
 // storybook.test.js

@ -604,12 +604,11 @@ initStoryshots({
 Use this table as a reference for manually specifying the framework.

 | angular        | html | preact       |
-|----------------|------|--------------|
+| -------------- | ---- | ------------ |
 | react          | riot | react-native |
 | svelte         | vue  | vue3         |
 | web-components | rax  |              |

-
 ### `test`

 Run a custom test function for each story, rather than the default (a vanilla snapshot test).
@ -634,7 +633,6 @@ This may be necessary if you want to use React features that are not supported b
 such as **ref** or **Portals**.
 Note that setting `test` overrides `renderer`.

-
 ### `snapshotSerializers`

 Pass an array of snapshotSerializers to the jest runtime that serializes your story (such as enzyme-to-json).
--- a/addons/storyshots/storyshots-core/package.json
+++ b/addons/storyshots/storyshots-core/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-storyshots",
-  "version": "6.3.0-alpha.0",
+  "version": "6.3.0-alpha.13",
  "description": "Take a code snapshot of every story automatically with Jest",
  "keywords": [
    "addon",
@ -16,6 +16,10 @@
    "url": "https://github.com/storybookjs/storybook.git",
    "directory": "addons/storyshots/storyshots-core"
  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
+  },
  "license": "MIT",
  "main": "dist/ts3.9/index.js",
  "module": "dist/ts3.9/index.js",
@ -41,10 +45,10 @@
  },
  "dependencies": {
    "@jest/transform": "^26.6.2",
-    "@storybook/addons": "6.3.0-alpha.0",
-    "@storybook/client-api": "6.3.0-alpha.0",
-    "@storybook/core": "6.3.0-alpha.0",
-    "@storybook/core-common": "6.3.0-alpha.0",
+    "@storybook/addons": "6.3.0-alpha.13",
+    "@storybook/client-api": "6.3.0-alpha.13",
+    "@storybook/core": "6.3.0-alpha.13",
+    "@storybook/core-common": "6.3.0-alpha.13",
    "@types/glob": "^7.1.3",
    "@types/jest": "^26.0.16",
    "@types/jest-specific-snapshot": "^0.5.3",
@ -53,6 +57,7 @@
    "glob": "^7.1.6",
    "global": "^4.4.0",
    "jest-specific-snapshot": "^4.0.0",
+    "preact-render-to-string": "^5.1.19",
    "pretty-format": "^26.6.2",
    "react-test-renderer": "^16.8.0 || ^17.0.0",
    "read-pkg-up": "^7.0.1",
@ -62,11 +67,11 @@
  "devDependencies": {
    "@angular/core": "^11.2.0",
    "@angular/platform-browser-dynamic": "^11.2.0",
-    "@storybook/addon-docs": "6.3.0-alpha.0",
-    "@storybook/angular": "6.3.0-alpha.0",
-    "@storybook/react": "6.3.0-alpha.0",
-    "@storybook/vue": "6.3.0-alpha.0",
-    "@storybook/vue3": "6.3.0-alpha.0",
+    "@storybook/addon-docs": "6.3.0-alpha.13",
+    "@storybook/angular": "6.3.0-alpha.13",
+    "@storybook/react": "6.3.0-alpha.13",
+    "@storybook/vue": "6.3.0-alpha.13",
+    "@storybook/vue3": "6.3.0-alpha.13",
    "babel-loader": "^8.2.2",
    "enzyme": "^3.11.0",
    "enzyme-to-json": "^3.6.1",
@ -85,6 +90,7 @@
    "@storybook/vue3": "*",
    "jest-preset-angular": "*",
    "jest-vue-preprocessor": "*",
+    "preact": "^10.5.13",
    "react": "^16.8.0 || ^17.0.0",
    "react-dom": "^16.8.0 || ^17.0.0",
    "rxjs": "*",
@ -114,6 +120,9 @@
    "jest-vue-preprocessor": {
      "optional": true
    },
+    "preact": {
+      "optional": true
+    },
    "react": {
      "optional": true
    },
@ -130,7 +139,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "7739aace24e8614f2acc9972b2ae44cf7f228c18",
+  "gitHead": "35287402b58e8c9ec660d28e9fe812f6b1204254",
  "storybook": {
    "displayName": "Storyshots",
    "icon": "https://user-images.githubusercontent.com/263385/101991676-48cdf300-3c7c-11eb-8aa1-944dab6ab29b.png",
--- a/addons/storyshots/storyshots-core/src/frameworks/preact/renderTree.ts
+++ b/addons/storyshots/storyshots-core/src/frameworks/preact/renderTree.ts
@ -1,12 +1,13 @@
 /** @jsx h */
+import { h } from 'preact';
+import preactRenderer from 'preact-render-to-string/jsx';

-// eslint-disable-next-line import/no-extraneous-dependencies
-import preactRenderer from 'preact-render-to-json';
+const boundRenderer = (_storyElement: any, _rendererOptions: any) =>
+  preactRenderer(_storyElement, null, { pretty: '  ' });

 function getRenderedTree(story: any, context: any, { renderer, ...rendererOptions }: any) {
-  const storyElement = story.render();
-  const currentRenderer = renderer || preactRenderer;
-  const tree = currentRenderer(storyElement, rendererOptions);
+  const currentRenderer = renderer || boundRenderer;
+  const tree = currentRenderer(h(story.render, null), rendererOptions);

  return tree;
 }
--- a/addons/storyshots/storyshots-core/src/typings.d.ts
+++ b/addons/storyshots/storyshots-core/src/typings.d.ts
@ -1,6 +1,6 @@
 declare module 'global';
 declare module 'jest-preset-angular/*';
-declare module 'preact-render-to-json';
+declare module 'preact-render-to-string/jsx';
 declare module 'react-test-renderer*';
 declare module 'rax-test-renderer*';
 declare module 'babel-plugin-require-context-hook/register';
--- a/addons/storyshots/storyshots-puppeteer/package.json
+++ b/addons/storyshots/storyshots-puppeteer/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-storyshots-puppeteer",
-  "version": "6.3.0-alpha.0",
+  "version": "6.3.0-alpha.13",
  "description": "Image snapshots addition to StoryShots based on puppeteer",
  "keywords": [
    "addon",
@ -15,6 +15,10 @@
    "url": "https://github.com/storybookjs/storybook.git",
    "directory": "addons/storyshots/storyshots-puppeteer"
  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
+  },
  "license": "MIT",
  "main": "dist/ts3.9/index.js",
  "module": "dist/ts3.9/index.js",
@ -37,7 +41,7 @@
  },
  "dependencies": {
    "@storybook/csf": "0.0.1",
-    "@storybook/node-logger": "6.3.0-alpha.0",
+    "@storybook/node-logger": "6.3.0-alpha.13",
    "@types/jest-image-snapshot": "^4.1.3",
    "@wordpress/jest-puppeteer-axe": "^1.10.0",
    "core-js": "^3.8.2",
@ -49,7 +53,7 @@
    "@types/puppeteer": "^5.4.0"
  },
  "peerDependencies": {
-    "@storybook/addon-storyshots": "6.3.0-alpha.0",
+    "@storybook/addon-storyshots": "6.3.0-alpha.13",
    "puppeteer": "^2.0.0 || ^3.0.0"
  },
  "peerDependenciesMeta": {
@ -60,5 +64,5 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "7739aace24e8614f2acc9972b2ae44cf7f228c18"
+  "gitHead": "35287402b58e8c9ec660d28e9fe812f6b1204254"
 }
--- a/addons/storyshots/storyshots-puppeteer/src/tests/url.test.ts
+++ b/addons/storyshots/storyshots-puppeteer/src/tests/url.test.ts
@ -21,25 +21,39 @@ describe('Construct URL for Storyshots', () => {

  it('can use a url without path and with query params', () => {
    expect(constructUrl('http://localhost:9001?hello=world', id)).toEqual(
-      'http://localhost:9001/iframe.html?id=somekind--somestory&hello=world'
+      'http://localhost:9001/iframe.html?hello=world&id=somekind--somestory'
    );
  });

  it('can use a url without path (buth slash) and with query params', () => {
    expect(constructUrl('http://localhost:9001/?hello=world', id)).toEqual(
-      'http://localhost:9001/iframe.html?id=somekind--somestory&hello=world'
+      'http://localhost:9001/iframe.html?hello=world&id=somekind--somestory'
    );
  });

  it('can use a url with some path and query params', () => {
    expect(constructUrl('http://localhost:9001/nice-path?hello=world', id)).toEqual(
-      'http://localhost:9001/nice-path/iframe.html?id=somekind--somestory&hello=world'
+      'http://localhost:9001/nice-path/iframe.html?hello=world&id=somekind--somestory'
    );
  });

  it('can use a url with some path (slash) and query params', () => {
    expect(constructUrl('http://localhost:9001/nice-path/?hello=world', id)).toEqual(
-      'http://localhost:9001/nice-path/iframe.html?id=somekind--somestory&hello=world'
+      'http://localhost:9001/nice-path/iframe.html?hello=world&id=somekind--somestory'
+    );
+  });
+
+  it('can use a url with username and password and query params', () => {
+    expect(
+      constructUrl('http://username:password@localhost:9001/nice-path/?hello=world', id)
+    ).toEqual(
+      'http://username:password@localhost:9001/nice-path/iframe.html?hello=world&id=somekind--somestory'
+    );
+  });
+
+  it('can use a url with username and query params', () => {
+    expect(constructUrl('http://username@localhost:9001/nice-path/?hello=world', id)).toEqual(
+      'http://username@localhost:9001/nice-path/iframe.html?hello=world&id=somekind--somestory'
    );
  });

--- a/addons/storyshots/storyshots-puppeteer/src/url.ts
+++ b/addons/storyshots/storyshots-puppeteer/src/url.ts
@ -1,9 +1,8 @@
 import { URL } from 'url';

 export const constructUrl = (storybookUrl: string, id: string) => {
-  const storyUrl = `/iframe.html?id=${id}`;
-  const { protocol, host, pathname, search } = new URL(storybookUrl);
-  const pname = pathname.replace(/\/$/, ''); // removes trailing /
-  const query = search.replace('?', '&'); // convert leading ? to &
-  return `${protocol}//${host}${pname}${storyUrl}${query}`;
+  const url = new URL(storybookUrl);
+  url.pathname = url.pathname.replace(/\/$/, '').concat('/iframe.html');
+  url.searchParams.append('id', id);
+  return url.toString();
 };
--- a/addons/storysource/package.json
+++ b/addons/storysource/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-storysource",
-  "version": "6.3.0-alpha.0",
+  "version": "6.3.0-alpha.13",
  "description": "View a story’s source code to see how it works and paste into your app",
  "keywords": [
    "addon",
@ -16,6 +16,10 @@
    "url": "https://github.com/storybookjs/storybook.git",
    "directory": "addons/storysource"
  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
+  },
  "license": "MIT",
  "main": "dist/cjs/index.js",
  "module": "dist/esm/index.js",
@ -37,13 +41,13 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.3.0-alpha.0",
-    "@storybook/api": "6.3.0-alpha.0",
-    "@storybook/client-logger": "6.3.0-alpha.0",
-    "@storybook/components": "6.3.0-alpha.0",
-    "@storybook/router": "6.3.0-alpha.0",
-    "@storybook/source-loader": "6.3.0-alpha.0",
-    "@storybook/theming": "6.3.0-alpha.0",
+    "@storybook/addons": "6.3.0-alpha.13",
+    "@storybook/api": "6.3.0-alpha.13",
+    "@storybook/client-logger": "6.3.0-alpha.13",
+    "@storybook/components": "6.3.0-alpha.13",
+    "@storybook/router": "6.3.0-alpha.13",
+    "@storybook/source-loader": "6.3.0-alpha.13",
+    "@storybook/theming": "6.3.0-alpha.13",
    "core-js": "^3.8.2",
    "estraverse": "^5.2.0",
    "loader-utils": "^2.0.0",
@ -71,7 +75,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "7739aace24e8614f2acc9972b2ae44cf7f228c18",
+  "gitHead": "35287402b58e8c9ec660d28e9fe812f6b1204254",
  "storybook": {
    "displayName": "Storysource",
    "icon": "https://user-images.githubusercontent.com/263385/101991675-48cdf300-3c7c-11eb-9400-58de5ac6daa7.png",
--- a/addons/toolbars/package.json
+++ b/addons/toolbars/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-toolbars",
-  "version": "6.3.0-alpha.0",
+  "version": "6.3.0-alpha.13",
  "description": "Create your own toolbar items that control story rendering",
  "keywords": [
    "addon",
@ -20,6 +20,10 @@
    "url": "https://github.com/storybookjs/storybook.git",
    "directory": "addons/toolbars"
  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
+  },
  "license": "MIT",
  "main": "dist/cjs/register.js",
  "module": "dist/esm/register.js",
@ -41,10 +45,10 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.3.0-alpha.0",
-    "@storybook/api": "6.3.0-alpha.0",
-    "@storybook/client-api": "6.3.0-alpha.0",
-    "@storybook/components": "6.3.0-alpha.0",
+    "@storybook/addons": "6.3.0-alpha.13",
+    "@storybook/api": "6.3.0-alpha.13",
+    "@storybook/client-api": "6.3.0-alpha.13",
+    "@storybook/components": "6.3.0-alpha.13",
    "core-js": "^3.8.2"
  },
  "peerDependencies": {
@ -62,7 +66,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "7739aace24e8614f2acc9972b2ae44cf7f228c18",
+  "gitHead": "35287402b58e8c9ec660d28e9fe812f6b1204254",
  "storybook": {
    "displayName": "Toolbars",
    "icon": "https://user-images.githubusercontent.com/263385/101991677-48cdf300-3c7c-11eb-93b4-19b0e3366959.png",
--- a/addons/viewport/package.json
+++ b/addons/viewport/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-viewport",
-  "version": "6.3.0-alpha.0",
+  "version": "6.3.0-alpha.13",
  "description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
  "keywords": [
    "addon",
@ -17,6 +17,10 @@
    "url": "https://github.com/storybookjs/storybook.git",
    "directory": "addons/viewport"
  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
+  },
  "license": "MIT",
  "main": "dist/cjs/preview.js",
  "module": "dist/esm/preview.js",
@ -38,12 +42,12 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.3.0-alpha.0",
-    "@storybook/api": "6.3.0-alpha.0",
-    "@storybook/client-logger": "6.3.0-alpha.0",
-    "@storybook/components": "6.3.0-alpha.0",
-    "@storybook/core-events": "6.3.0-alpha.0",
-    "@storybook/theming": "6.3.0-alpha.0",
+    "@storybook/addons": "6.3.0-alpha.13",
+    "@storybook/api": "6.3.0-alpha.13",
+    "@storybook/client-logger": "6.3.0-alpha.13",
+    "@storybook/components": "6.3.0-alpha.13",
+    "@storybook/core-events": "6.3.0-alpha.13",
+    "@storybook/theming": "6.3.0-alpha.13",
    "core-js": "^3.8.2",
    "global": "^4.4.0",
    "memoizerific": "^1.11.3",
@ -65,7 +69,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "7739aace24e8614f2acc9972b2ae44cf7f228c18",
+  "gitHead": "35287402b58e8c9ec660d28e9fe812f6b1204254",
  "storybook": {
    "displayName": "Viewport",
    "icon": "https://user-images.githubusercontent.com/263385/101991678-48cdf300-3c7c-11eb-9764-f8af293c1b28.png",
--- a/app/angular/package.json
+++ b/app/angular/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/angular",
-  "version": "6.3.0-alpha.0",
+  "version": "6.3.0-alpha.13",
  "description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
@ -14,6 +14,10 @@
    "url": "https://github.com/storybookjs/storybook.git",
    "directory": "app/angular"
  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
+  },
  "license": "MIT",
  "main": "dist/ts3.9/client/index.js",
  "module": "dist/ts3.9/client/index.js",
@ -41,11 +45,11 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.3.0-alpha.0",
-    "@storybook/api": "6.3.0-alpha.0",
-    "@storybook/core": "6.3.0-alpha.0",
-    "@storybook/core-common": "6.3.0-alpha.0",
-    "@storybook/node-logger": "6.3.0-alpha.0",
+    "@storybook/addons": "6.3.0-alpha.13",
+    "@storybook/api": "6.3.0-alpha.13",
+    "@storybook/core": "6.3.0-alpha.13",
+    "@storybook/core-common": "6.3.0-alpha.13",
+    "@storybook/node-logger": "6.3.0-alpha.13",
    "@types/webpack-env": "^1.16.0",
    "autoprefixer": "^9.8.6",
    "core-js": "^3.8.2",
@ -120,5 +124,5 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "7739aace24e8614f2acc9972b2ae44cf7f228c18"
+  "gitHead": "35287402b58e8c9ec660d28e9fe812f6b1204254"
 }
--- a/app/angular/src/client/preview/angular-beta/RendererService.test.ts
+++ b/app/angular/src/client/preview/angular-beta/RendererService.test.ts
@ -79,7 +79,12 @@ describe('RendererService', () => {
        );
      });

-      it('should not be re-rendered', async () => {
+      it('should not be re-rendered when only props change', async () => {
+        let countDestroy = 0;
+
+        rendererService.platform.onDestroy(() => {
+          countDestroy += 1;
+        });
        // only props change
        await rendererService.render({
          storyFnAngular: {
@ -90,6 +95,7 @@ describe('RendererService', () => {
          forced: true,
          parameters: {} as any,
        });
+        expect(countDestroy).toEqual(0);

        expect(document.body.getElementsByTagName('storybook-wrapper')[0].innerHTML).toBe(
          '👾: Fox'
@ -110,6 +116,43 @@ describe('RendererService', () => {

        expect(document.body.getElementsByTagName('storybook-wrapper')[0].innerHTML).toBe('🍺');
      });
+
+      it('should be re-rendered when moduleMetadata structure change', async () => {
+        let countDestroy = 0;
+
+        rendererService.platform.onDestroy(() => {
+          countDestroy += 1;
+        });
+
+        // Only props change -> no full rendering
+        await rendererService.render({
+          storyFnAngular: {
+            template: '{{ logo }}: {{ name }}',
+            props: {
+              logo: '🍺',
+              name: 'Beer',
+            },
+          },
+          forced: true,
+          parameters: {} as any,
+        });
+        expect(countDestroy).toEqual(0);
+
+        // Change in the module structure -> full rendering
+        await rendererService.render({
+          storyFnAngular: {
+            template: '{{ logo }}: {{ name }}',
+            props: {
+              logo: '🍺',
+              name: 'Beer',
+            },
+            moduleMetadata: { providers: [{ provide: 'foo', useValue: 42 }] },
+          },
+          forced: true,
+          parameters: {} as any,
+        });
+        expect(countDestroy).toEqual(1);
+      });
    });

    it('should properly destroy angular platform between each render', async () => {
--- a/app/angular/src/client/preview/angular-beta/RendererService.ts
+++ b/app/angular/src/client/preview/angular-beta/RendererService.ts
@ -1,5 +1,5 @@
 /* eslint-disable no-undef */
-import { enableProdMode, PlatformRef } from '@angular/core';
+import { enableProdMode, NgModule, PlatformRef } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

 import { BehaviorSubject, Subject } from 'rxjs';
@ -30,7 +30,10 @@ export class RendererService {
  // Observable to change the properties dynamically without reloading angular module&component
  private storyProps$: Subject<ICollection | undefined>;

-  private previousStoryFnAngular: StoryFnAngularReturnType = {};
+  private currentStoryRender: {
+    storyFnAngular: StoryFnAngularReturnType;
+    moduleMetadataSnapshot: string;
+  };

  constructor() {
    if (typeof NODE_ENV === 'string' && NODE_ENV !== 'development') {
@ -62,23 +65,47 @@ export class RendererService {
    forced: boolean;
    parameters: Parameters;
  }) {
-    if (!this.fullRendererRequired(storyFnAngular, forced)) {
+    const storyProps$ = new BehaviorSubject<ICollection>(storyFnAngular.props);
+    const moduleMetadata = getStorybookModuleMetadata({ storyFnAngular, parameters }, storyProps$);
+
+    if (
+      !this.fullRendererRequired({
+        storyFnAngular,
+        moduleMetadata,
+        forced,
+      })
+    ) {
      this.storyProps$.next(storyFnAngular.props);

      return;
    }

-    // Complete last BehaviorSubject and create a new one for the current module
+    try {
+      // Clear global Angular component cache in order to be able to re-render the same component across multiple stories
+      //
+      // References:
+      // https://github.com/angular/angular-cli/blob/master/packages/angular_devkit/build_angular/src/webpack/plugins/hmr/hmr-accept.ts#L50
+      // https://github.com/angular/angular/blob/2ebe2bcb2fe19bf672316b05f15241fd7fd40803/packages/core/src/render3/jit/module.ts#L377-L384
+      // eslint-disable-next-line global-require
+      const resetCompiledComponents = require('@angular/core').ɵresetCompiledComponents;
+      resetCompiledComponents();
+    } catch (e) {
+      /**
+       * noop catch
+       * This means angular removed or modified ɵresetCompiledComponents
+       *
+       * Probably, they added a clearCache mechanism to platform.destroy() and
+       * we can simply remove this in case no errors are thrown during runtime
+       */
+    }
+
+    // Complete last BehaviorSubject and set a new one for the current module
    if (this.storyProps$) {
      this.storyProps$.complete();
    }
-    this.storyProps$ = new BehaviorSubject<ICollection>(storyFnAngular.props);
+    this.storyProps$ = storyProps$;

-    await this.newPlatformBrowserDynamic().bootstrapModule(
-      createStorybookModule(
-        getStorybookModuleMetadata({ storyFnAngular, parameters }, this.storyProps$)
-      )
-    );
+    await this.newPlatformBrowserDynamic().bootstrapModule(createStorybookModule(moduleMetadata));
  }

  public newPlatformBrowserDynamic() {
@ -108,13 +135,42 @@ export class RendererService {
    this.staticRoot.appendChild(storybookWrapperElement);
  }

-  private fullRendererRequired(storyFnAngular: StoryFnAngularReturnType, forced: boolean) {
-    const { previousStoryFnAngular } = this;
-    this.previousStoryFnAngular = storyFnAngular;
+  private fullRendererRequired({
+    storyFnAngular,
+    moduleMetadata,
+    forced,
+  }: {
+    storyFnAngular: StoryFnAngularReturnType;
+    moduleMetadata: NgModule;
+    forced: boolean;
+  }) {
+    const { currentStoryRender: lastStoryRender } = this;

+    this.currentStoryRender = {
+      storyFnAngular,
+      moduleMetadataSnapshot: JSON.stringify(moduleMetadata),
+    };
+
+    if (
+      // check `forceRender` of story RenderContext
+      !forced ||
+      // if it's the first rendering and storyProps$ is not init
+      !this.storyProps$
+    ) {
+      return true;
+    }
+
+    // force the rendering if the template has changed
    const hasChangedTemplate =
-      !!storyFnAngular?.template && previousStoryFnAngular?.template !== storyFnAngular.template;
+      !!storyFnAngular?.template &&
+      lastStoryRender?.storyFnAngular?.template !== storyFnAngular.template;
+    if (hasChangedTemplate) {
+      return true;
+    }

-    return !forced || !this.storyProps$ || hasChangedTemplate;
+    // force the rendering if the metadata structure has changed
+    const hasChangedModuleMetadata =
+      this.currentStoryRender?.moduleMetadataSnapshot !== lastStoryRender?.moduleMetadataSnapshot;
+    return hasChangedModuleMetadata;
  }
 }
--- a/app/angular/src/client/preview/angular-beta/StorybookWrapperComponent.ts
+++ b/app/angular/src/client/preview/angular-beta/StorybookWrapperComponent.ts
@ -38,10 +38,14 @@ const getNonInputsOutputsProps = (
 */
 export const createStorybookWrapperComponent = (
  template: string,
-  storyComponent: Type<unknown>,
+  storyComponent: Type<unknown> | undefined,
  styles: string[],
  initialProps?: ICollection
 ): Type<any> => {
+  // In ivy, a '' selector is not allowed, therefore we need to just set it to anything if
+  // storyComponent was not provided.
+  const viewChildSelector = storyComponent ?? '__storybook-noop';
+
  @Component({
    selector: RendererService.SELECTOR_STORYBOOK_WRAPPER,
    template,
@ -52,9 +56,9 @@ export const createStorybookWrapperComponent = (

    private storyWrapperPropsSubscription: Subscription;

-    @ViewChild(storyComponent ?? '', { static: true }) storyComponentElementRef: ElementRef;
+    @ViewChild(viewChildSelector, { static: true }) storyComponentElementRef: ElementRef;

-    @ViewChild(storyComponent ?? '', { read: ViewContainerRef, static: true })
+    @ViewChild(viewChildSelector, { read: ViewContainerRef, static: true })
    storyComponentViewContainerRef: ViewContainerRef;

    // Used in case of a component without selector
--- a/app/angular/src/client/preview/globals.ts
+++ b/app/angular/src/client/preview/globals.ts
@ -1,5 +1,5 @@
-import { window } from 'global';
+import { window as globalWindow } from 'global';

 import './angular-polyfills';

-window.STORYBOOK_ENV = 'angular';
+globalWindow.STORYBOOK_ENV = 'angular';
--- a/app/angular/src/server/mocks-ng-workspace/empty-projects-entry/angular.json
+++ b/app/angular/src/server/mocks-ng-workspace/empty-projects-entry/angular.json
@ -0,0 +1,4 @@
+{
+  "version": 1,
+  "projects": {}
+}
--- a/app/angular/src/server/mocks-ng-workspace/minimal-config/angular.json
+++ b/app/angular/src/server/mocks-ng-workspace/minimal-config/angular.json
@ -0,0 +1,17 @@
+{
+  "version": 1,
+  "projects": {
+    "foo-project": {
+      "root": "",
+      "architect": {
+        "build": {
+          "options": {
+            "tsConfig": "src/tsconfig.app.json",
+            "assets": []
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "foo-project"
+}
--- a/app/angular/src/server/mocks-ng-workspace/minimal-config/src/main.ts
+++ b/app/angular/src/server/mocks-ng-workspace/minimal-config/src/main.ts
@ -0,0 +1,2 @@
+// To avoid "No inputs were found in config file" tsc error
+export const not = 'empty';
--- a/app/angular/src/server/mocks-ng-workspace/minimal-config/src/tsconfig.app.json
+++ b/app/angular/src/server/mocks-ng-workspace/minimal-config/src/tsconfig.app.json
@ -0,0 +1,9 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": "./",
+    "module": "es2015",
+    "types": ["node"]
+  },
+  "exclude": ["karma.ts", "**/*.spec.ts"]
+}
--- a/app/angular/src/server/mocks-ng-workspace/minimal-config/tsconfig.json
+++ b/app/angular/src/server/mocks-ng-workspace/minimal-config/tsconfig.json
@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "sourceMap": true,
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "target": "es5",
+    "lib": ["es2017", "dom"]
+  }
+}
--- a/app/angular/src/server/mocks-ng-workspace/with-nx/angular.json
+++ b/app/angular/src/server/mocks-ng-workspace/with-nx/angular.json
@ -0,0 +1,17 @@
+{
+  "version": 1,
+  "projects": {
+    "foo-project": {
+      "root": "",
+      "architect": {
+        "build": {
+          "options": {
+            "tsConfig": "src/tsconfig.app.json",
+            "styles": ["src/styles.css", "src/styles.scss"]
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "foo-project"
+}
--- a/app/angular/src/server/mocks-ng-workspace/with-nx/nx.json
+++ b/app/angular/src/server/mocks-ng-workspace/with-nx/nx.json
@ -0,0 +1,3 @@
+{
+  "npmScope": "nx-example"
+}
--- a/app/angular/src/server/mocks-ng-workspace/with-nx/src/main.ts
+++ b/app/angular/src/server/mocks-ng-workspace/with-nx/src/main.ts
@ -0,0 +1,2 @@
+// To avoid "No inputs were found in config file" tsc error
+export const not = 'empty';
--- a/app/angular/src/server/mocks-ng-workspace/with-nx/src/styles.css
+++ b/app/angular/src/server/mocks-ng-workspace/with-nx/src/styles.css
@ -0,0 +1,2 @@
+.class {
+}
--- a/app/angular/src/server/mocks-ng-workspace/with-nx/src/styles.scss
+++ b/app/angular/src/server/mocks-ng-workspace/with-nx/src/styles.scss
@ -0,0 +1,2 @@
+.class {
+}
--- a/app/angular/src/server/mocks-ng-workspace/with-nx/src/tsconfig.app.json
+++ b/app/angular/src/server/mocks-ng-workspace/with-nx/src/tsconfig.app.json
@ -0,0 +1,8 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": "./",
+    "module": "es2015",
+    "types": ["node"]
+  }
+}
--- a/app/angular/src/server/mocks-ng-workspace/with-nx/tsconfig.json
+++ b/app/angular/src/server/mocks-ng-workspace/with-nx/tsconfig.json
@ -0,0 +1,14 @@
+{
+  "include": ["./src"],
+  "compilerOptions": {
+    "sourceMap": true,
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "target": "es5",
+    "lib": ["es2017", "dom"]
+  }
+}
--- a/app/angular/src/server/mocks-ng-workspace/with-options-styles/angular.json
+++ b/app/angular/src/server/mocks-ng-workspace/with-options-styles/angular.json
@ -0,0 +1,17 @@
+{
+  "version": 1,
+  "projects": {
+    "foo-project": {
+      "root": "",
+      "architect": {
+        "build": {
+          "options": {
+            "tsConfig": "src/tsconfig.app.json",
+            "styles": ["src/styles.css", "src/styles.scss"]
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "foo-project"
+}
--- a/app/angular/src/server/mocks-ng-workspace/with-options-styles/src/main.ts
+++ b/app/angular/src/server/mocks-ng-workspace/with-options-styles/src/main.ts
@ -0,0 +1,2 @@
+// To avoid "No inputs were found in config file" tsc error
+export const not = 'empty';
--- a/app/angular/src/server/mocks-ng-workspace/with-options-styles/src/styles.css
+++ b/app/angular/src/server/mocks-ng-workspace/with-options-styles/src/styles.css
@ -0,0 +1,2 @@
+.class {
+}
--- a/app/angular/src/server/mocks-ng-workspace/with-options-styles/src/styles.scss
+++ b/app/angular/src/server/mocks-ng-workspace/with-options-styles/src/styles.scss
@ -0,0 +1,2 @@
+.class {
+}
--- a/app/angular/src/server/mocks-ng-workspace/with-options-styles/src/tsconfig.app.json
+++ b/app/angular/src/server/mocks-ng-workspace/with-options-styles/src/tsconfig.app.json
@ -0,0 +1,9 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": "./",
+    "module": "es2015",
+    "types": ["node"]
+  },
+  "exclude": ["karma.ts", "**/*.spec.ts"]
+}
--- a/app/angular/src/server/mocks-ng-workspace/with-options-styles/tsconfig.json
+++ b/app/angular/src/server/mocks-ng-workspace/with-options-styles/tsconfig.json
@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "sourceMap": true,
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "target": "es5",
+    "lib": ["es2017", "dom"]
+  }
+}
--- a/app/angular/src/server/mocks-ng-workspace/without-architect-build-options/angular.json
+++ b/app/angular/src/server/mocks-ng-workspace/without-architect-build-options/angular.json
@ -0,0 +1,11 @@
+{
+  "version": 1,
+  "projects": {
+    "foo-project": {
+      "architect": {
+        "build": {}
+      }
+    }
+  },
+  "defaultProject": "foo-project"
+}
--- a/app/angular/src/server/mocks-ng-workspace/without-architect-build/angular.json
+++ b/app/angular/src/server/mocks-ng-workspace/without-architect-build/angular.json
@ -0,0 +1,5 @@
+{
+  "version": 1,
+  "projects": { "foo-project": {} },
+  "defaultProject": "foo-project"
+}
--- a/app/angular/src/server/mocks-ng-workspace/without-compatible-projects/angular.json
+++ b/app/angular/src/server/mocks-ng-workspace/without-compatible-projects/angular.json
@ -0,0 +1,7 @@
+{
+  "version": 1,
+  "projects": {
+    "noop-project": {}
+  },
+  "defaultProject": "missing-project"
+}
--- a/app/angular/src/server/mocks-ng-workspace/without-projects-entry/angular.json
+++ b/app/angular/src/server/mocks-ng-workspace/without-projects-entry/angular.json
@ -0,0 +1,3 @@
+{
+  "version": 1
+}
--- a/app/angular/src/server/tests/angular-cli_config.test.ts
+++ b/app/angular/src/server/tests/angular-cli_config.test.ts
@ -1,82 +0,0 @@
-import stripJsonComments from 'strip-json-comments';
-import { Path } from '@angular-devkit/core';
-import * as fs from 'fs';
-import * as path from 'path';
-import {
-  applyAngularCliWebpackConfig,
-  getAngularCliWebpackConfigOptions,
-  getLeadingAngularCliProject,
-} from '../angular-cli_config';
-
-describe('angular-cli_config', () => {
-  it('should return have empty `buildOptions.sourceMap` and `buildOptions.optimization` by default', () => {
-    const config = getAngularCliWebpackConfigOptions(__dirname as Path);
-    expect(config).toMatchObject({
-      buildOptions: {
-        sourceMap: {},
-        optimization: {},
-      },
-    });
-  });
-
-  it('should use `storybook` project by default when `storybook` project is defined', () => {
-    // Lazy clone example angular json
-    const angularJson = fs.readFileSync(path.resolve(__dirname, 'angular.json'), 'utf8');
-    const angularJsonWithStorybookProject = JSON.parse(stripJsonComments(angularJson));
-
-    // Add storybook project
-    angularJsonWithStorybookProject.projects.storybook = {
-      architect: {
-        build: {
-          options: {
-            assets: [],
-            styles: ['custom/styles'],
-          },
-        },
-      },
-    };
-
-    const projectConfig = getLeadingAngularCliProject(angularJsonWithStorybookProject);
-
-    // Assure configuration matches values from `storybook` project
-    expect(projectConfig).toMatchObject({
-      architect: {
-        build: {
-          options: {
-            assets: [],
-            styles: ['custom/styles'],
-          },
-        },
-      },
-    });
-  });
-
-  it('should return null if `architect.build` option are not exists.', () => {
-    const angularJson = fs.readFileSync(path.resolve(__dirname, 'angular.json'), 'utf8');
-    const angularJsonWithNoBuildOptions = JSON.parse(stripJsonComments(angularJson));
-    angularJsonWithNoBuildOptions.projects['angular-cli'].architect.build = undefined;
-
-    getLeadingAngularCliProject(angularJsonWithNoBuildOptions);
-
-    const config = getAngularCliWebpackConfigOptions('/' as Path);
-    expect(config).toBeNull();
-  });
-
-  it('should return baseConfig if no angular.json was found', () => {
-    const baseConfig = { test: 'config' };
-    const projectConfig = getAngularCliWebpackConfigOptions('test-path' as Path);
-    const config = applyAngularCliWebpackConfig(baseConfig, projectConfig);
-
-    expect(projectConfig).toBe(null);
-    expect(config).toBe(baseConfig);
-  });
-
-  it('should return empty `buildOptions.budgets` by default', () => {
-    const config = getAngularCliWebpackConfigOptions(__dirname as Path);
-    expect(config).toMatchObject({
-      buildOptions: {
-        budgets: [],
-      },
-    });
-  });
-});
--- a/app/angular/src/server/angular-cli_config.ts
+++ b/app/angular/src/server/angular-cli_config.ts
@ -1,227 +0,0 @@
-import { CompilerOptions } from 'typescript';
-import { Path } from '@angular-devkit/core';
-import path from 'path';
-import fs from 'fs';
-import { logger } from '@storybook/node-logger';
-import { TsconfigPathsPlugin } from 'tsconfig-paths-webpack-plugin';
-import stripJsonComments from 'strip-json-comments';
-import {
-  isBuildAngularInstalled,
-  normalizeAssetPatterns,
-  filterOutStylingRules,
-  getAngularCliParts,
-} from './angular-cli_utils';
-
-// todo add more accurate typings
-interface BasicOptions {
-  options: {
-    baseUrl?: string | undefined;
-  };
-  raw: object;
-  fileNames: string[];
-  errors: any[];
-}
-
-function getTsConfigOptions(tsConfigPath: Path) {
-  const basicOptions: BasicOptions = {
-    options: {},
-    raw: {},
-    fileNames: [],
-    errors: [],
-  };
-
-  if (!fs.existsSync(tsConfigPath)) {
-    return basicOptions;
-  }
-
-  const tsConfig = JSON.parse(stripJsonComments(fs.readFileSync(tsConfigPath, 'utf8')));
-
-  if (tsConfig.compilerOptions && tsConfig.compilerOptions.baseUrl) {
-    const { baseUrl } = tsConfig.compilerOptions as CompilerOptions;
-    const tsConfigDirName = path.dirname(tsConfigPath);
-    basicOptions.options.baseUrl = path.resolve(tsConfigDirName, baseUrl);
-  }
-
-  return basicOptions;
-}
-
-export function getAngularCliConfig(dirToSearch: string) {
-  let angularCliConfig;
-  try {
-    /**
-     * Apologies for the following line
-     * If there's a better way to do it, let's do it
-     */
-    /* eslint-disable global-require */
-    angularCliConfig = require('@nrwl/workspace').readWorkspaceConfig({
-      format: 'angularCli',
-    });
-  } catch (e) {
-    const possibleConfigNames = ['angular.json', 'workspace.json'];
-    const possibleConfigPaths = possibleConfigNames.map((name) => path.join(dirToSearch, name));
-
-    const validIndex = possibleConfigPaths.findIndex((configPath) => fs.existsSync(configPath));
-
-    if (validIndex === -1) {
-      logger.error(`Could not find angular.json using ${possibleConfigPaths[0]}`);
-      return undefined;
-    }
-
-    angularCliConfig = JSON.parse(
-      stripJsonComments(fs.readFileSync(possibleConfigPaths[validIndex], 'utf8'))
-    );
-  }
-  return angularCliConfig;
-}
-
-export function getLeadingAngularCliProject(ngCliConfig: any) {
-  if (!ngCliConfig) {
-    return null;
-  }
-
-  const { defaultProject } = ngCliConfig;
-  const { projects } = ngCliConfig;
-  if (!projects || !Object.keys(projects).length) {
-    throw new Error('angular.json must have projects entry.');
-  }
-
-  let projectName;
-  const firstProjectName = Object.keys(projects)[0];
-  const environmentProjectName = process.env.STORYBOOK_ANGULAR_PROJECT;
-  if (environmentProjectName) {
-    projectName = environmentProjectName;
-  } else if (projects.storybook) {
-    projectName = 'storybook';
-  } else if (defaultProject && projects[defaultProject]) {
-    projectName = defaultProject;
-  } else if (projects[firstProjectName]) {
-    projectName = firstProjectName;
-  }
-
-  const project = projects[projectName];
-  if (!project) {
-    logger.error(`Could not find angular project '${projectName}' in angular.json.`);
-  } else {
-    logger.info(`=> Using angular project '${projectName}' for configuring Storybook.`);
-  }
-  if (project && !project.architect.build) {
-    logger.error(`architect.build is not defined for project '${projectName}'.`);
-  }
-  return project;
-}
-
-export function getAngularCliWebpackConfigOptions(dirToSearch: Path) {
-  const angularCliConfig = getAngularCliConfig(dirToSearch);
-  const project = getLeadingAngularCliProject(angularCliConfig);
-
-  if (!angularCliConfig || !project.architect.build) {
-    return null;
-  }
-
-  const { options: projectOptions } = project.architect.build;
-  const normalizedAssets = normalizeAssetPatterns(
-    projectOptions.assets,
-    dirToSearch,
-    project.sourceRoot
-  );
-  const projectRoot = path.resolve(dirToSearch, project.root);
-  const tsConfigPath = path.resolve(dirToSearch, projectOptions.tsConfig) as Path;
-  const tsConfig = getTsConfigOptions(tsConfigPath);
-  const budgets = projectOptions.budgets || [];
-  const scripts = projectOptions.scripts || [];
-  const outputPath = projectOptions.outputPath || 'dist/storybook-angular';
-  const styles = projectOptions.styles || [];
-
-  return {
-    root: dirToSearch,
-    projectRoot,
-    tsConfigPath,
-    tsConfig,
-    supportES2015: false,
-    buildOptions: {
-      sourceMap: false,
-      optimization: {
-        styles: true,
-        scripts: true,
-      },
-      ...projectOptions,
-      assets: normalizedAssets,
-      budgets,
-      scripts,
-      styles,
-      outputPath,
-    },
-  };
-}
-
-// todo add types
-export function applyAngularCliWebpackConfig(baseConfig: any, cliWebpackConfigOptions: any) {
-  if (!cliWebpackConfigOptions) {
-    return baseConfig;
-  }
-
-  if (!isBuildAngularInstalled()) {
-    logger.info('=> Using base config because @angular-devkit/build-angular is not installed.');
-    return baseConfig;
-  }
-
-  const cliParts = getAngularCliParts(cliWebpackConfigOptions);
-
-  if (!cliParts) {
-    logger.warn('=> Failed to get angular-cli webpack config.');
-    return baseConfig;
-  }
-
-  logger.info('=> Get angular-cli webpack config.');
-
-  const { cliCommonConfig, cliStyleConfig } = cliParts;
-
-  // Don't use storybooks styling rules because we have to use rules created by @angular-devkit/build-angular
-  // because @angular-devkit/build-angular created rules have include/exclude for global style files.
-  const rulesExcludingStyles = filterOutStylingRules(baseConfig);
-
-  // cliStyleConfig.entry adds global style files to the webpack context
-  // todo add type for acc
-  const entry = [
-    ...baseConfig.entry,
-    ...Object.values(cliStyleConfig.entry).reduce((acc: any, item) => acc.concat(item), []),
-  ];
-
-  const module = {
-    ...baseConfig.module,
-    rules: [...cliStyleConfig.module.rules, ...rulesExcludingStyles],
-  };
-
-  // We use cliCommonConfig plugins to serve static assets files.
-  const plugins = [...cliStyleConfig.plugins, ...cliCommonConfig.plugins, ...baseConfig.plugins];
-
-  const resolve = {
-    ...baseConfig.resolve,
-    modules: Array.from(
-      new Set([...baseConfig.resolve.modules, ...cliCommonConfig.resolve.modules])
-    ),
-    plugins: [
-      new TsconfigPathsPlugin({
-        configFile: cliWebpackConfigOptions.buildOptions.tsConfig,
-        // After ng build my-lib the default value of 'main' in the package.json is 'umd'
-        // This causes that you cannot import components directly from dist
-        // https://github.com/angular/angular-cli/blob/9f114aee1e009c3580784dd3bb7299bdf4a5918c/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/browser.ts#L68
-        mainFields: [
-          ...(cliWebpackConfigOptions.supportES2015 ? ['es2015'] : []),
-          'browser',
-          'module',
-          'main',
-        ],
-      }),
-    ],
-  };
-
-  return {
-    ...baseConfig,
-    entry,
-    module,
-    plugins,
-    resolve,
-    resolveLoader: cliCommonConfig.resolveLoader,
-  };
-}
--- a/app/angular/src/server/angular-cli_utils.ts
+++ b/app/angular/src/server/angular-cli_utils.ts
@ -1,123 +0,0 @@
-import fs from 'fs';
-import {
-  basename,
-  dirname,
-  normalize,
-  relative,
-  resolve,
-  Path,
-  getSystemPath,
-} from '@angular-devkit/core';
-import { logger } from '@storybook/node-logger';
-
-import { RuleSetRule, Configuration } from 'webpack';
-
-// We need to dynamically require theses functions as they are not part of the public api and so their paths
-// aren't the same in all versions of Angular
-let angularWebpackConfig: {
-  getCommonConfig: (config: unknown) => Configuration;
-  getStylesConfig: (config: unknown) => Configuration;
-};
-try {
-  // First we look for webpack config according to directory structure of Angular 11
-  // eslint-disable-next-line global-require
-  angularWebpackConfig = require('@angular-devkit/build-angular/src/webpack/configs');
-} catch (e) {
-  // We fallback on directory structure of Angular 10 (and below)
-  // eslint-disable-next-line global-require
-  angularWebpackConfig = require('@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs');
-}
-
-const { getCommonConfig, getStylesConfig } = angularWebpackConfig;
-
-function isDirectory(assetPath: string) {
-  try {
-    return fs.statSync(assetPath).isDirectory();
-  } catch (e) {
-    return false;
-  }
-}
-
-function getAssetsParts(resolvedAssetPath: Path, assetPath: Path) {
-  if (isDirectory(getSystemPath(resolvedAssetPath))) {
-    return {
-      glob: '**/*', // Folders get a recursive star glob.
-      input: assetPath, // Input directory is their original path.
-    };
-  }
-
-  return {
-    glob: basename(assetPath), // Files are their own glob.
-    input: dirname(assetPath), // Input directory is their original dirname.
-  };
-}
-
-function isStylingRule(rule: RuleSetRule) {
-  const { test } = rule;
-
-  if (!test) {
-    return false;
-  }
-
-  if (!(test instanceof RegExp)) {
-    return false;
-  }
-
-  return test.test('.css') || test.test('.scss') || test.test('.sass');
-}
-
-export function filterOutStylingRules(config: Configuration) {
-  // @ts-ignore
-  return config.module.rules.filter((rule) => !isStylingRule(rule));
-}
-
-export function isBuildAngularInstalled() {
-  try {
-    require.resolve('@angular-devkit/build-angular');
-    return true;
-  } catch (e) {
-    return false;
-  }
-}
-
-// todo add type
-export function getAngularCliParts(cliWebpackConfigOptions: any) {
-  try {
-    return {
-      cliCommonConfig: getCommonConfig(cliWebpackConfigOptions),
-      cliStyleConfig: getStylesConfig(cliWebpackConfigOptions),
-    };
-  } catch (e) {
-    logger.warn("Failed to load the Angular CLI config. Using Storybook's default config instead.");
-    logger.warn(e);
-    return null;
-  }
-}
-
-// todo fix any
-export function normalizeAssetPatterns(assetPatterns: any, dirToSearch: Path, sourceRoot: Path) {
-  if (!assetPatterns || !assetPatterns.length) {
-    return [];
-  }
-
-  // todo fix any
-  return assetPatterns.map((assetPattern: any) => {
-    if (typeof assetPattern === 'object') {
-      return assetPattern;
-    }
-
-    const assetPath = normalize(assetPattern);
-    const resolvedSourceRoot = resolve(dirToSearch, sourceRoot);
-    const resolvedAssetPath = resolve(dirToSearch, assetPath);
-    const parts = getAssetsParts(resolvedAssetPath, assetPath);
-
-    // Output directory for both is the relative path from source root to input.
-    const output = relative(resolvedSourceRoot, resolve(dirToSearch, parts.input));
-
-    // Return the asset pattern in object format.
-    return {
-      ...parts,
-      output,
-    };
-  });
-}
--- a/app/angular/src/server/angular-devkit-build-webpack.ts
+++ b/app/angular/src/server/angular-devkit-build-webpack.ts
@ -0,0 +1,199 @@
+/**
+ * This file is to be watched !
+ * The code must be compatible from @angular-devkit version 6.1.0 to the latest supported
+ *
+ * It uses code block of angular cli to extract parts of webpack configuration
+ */
+
+import path from 'path';
+import webpack from 'webpack';
+import { normalize, resolve, workspaces } from '@angular-devkit/core';
+import { createConsoleLogger } from '@angular-devkit/core/node';
+
+// Only type, so not dependent on the client version
+import {
+  WebpackConfigOptions,
+  BuildOptions,
+} from '@angular-devkit/build-angular/src/utils/build-options';
+
+import { moduleIsAvailable } from './utils/module-is-available';
+import { normalizeAssetPatterns } from './utils/normalize-asset-patterns';
+
+const importAngularCliWebpackConfigGenerator = (): {
+  getCommonConfig: (config: unknown) => webpack.Configuration;
+  getStylesConfig: (config: unknown) => webpack.Configuration;
+} => {
+  let angularWebpackConfig;
+
+  // First we look for webpack config according to directory structure of Angular 11
+  if (moduleIsAvailable('@angular-devkit/build-angular/src/webpack/configs')) {
+    // eslint-disable-next-line global-require
+    angularWebpackConfig = require('@angular-devkit/build-angular/src/webpack/configs');
+  }
+  // We fallback on directory structure of Angular 10 (and below)
+  else if (
+    moduleIsAvailable('@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs')
+  ) {
+    // eslint-disable-next-line global-require
+    angularWebpackConfig = require('@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs');
+  } else {
+    throw new Error('Webpack config not found in "@angular-devkit/build-angular"');
+  }
+
+  return {
+    getCommonConfig: angularWebpackConfig.getCommonConfig,
+    getStylesConfig: angularWebpackConfig.getStylesConfig,
+  };
+};
+
+const importAngularCliReadTsconfigUtil = (): typeof import('@angular-devkit/build-angular/src/utils/read-tsconfig') => {
+  // First we look for webpack config according to directory structure of Angular 11
+  if (moduleIsAvailable('@angular-devkit/build-angular/src/utils/read-tsconfig')) {
+    // eslint-disable-next-line global-require
+    return require('@angular-devkit/build-angular/src/utils/read-tsconfig');
+  }
+  // We fallback on directory structure of Angular 10 (and below)
+  if (
+    moduleIsAvailable('@angular-devkit/build-angular/src/angular-cli-files/utilities/read-tsconfig')
+  ) {
+    // eslint-disable-next-line global-require
+    return require('@angular-devkit/build-angular/src/angular-cli-files/utilities/read-tsconfig');
+  }
+  throw new Error('ReadTsconfig not found in "@angular-devkit/build-angular"');
+};
+
+export class ProjectTargetNotFoundError implements Error {
+  name = 'ProjectTargetNotFoundError';
+
+  message: string;
+
+  constructor(public projectTarget: string) {
+    this.message = `No project target "${projectTarget}" fond.`;
+  }
+}
+
+const buildWebpackConfigOptions = async (
+  dirToSearch: string,
+  project: workspaces.ProjectDefinition,
+  projectTarget = 'build'
+): Promise<WebpackConfigOptions> => {
+  if (!project.targets.has(projectTarget)) {
+    throw new ProjectTargetNotFoundError(projectTarget);
+  }
+
+  const { options: projectBuildOptions = {} } = project.targets.get(projectTarget);
+
+  const requiredOptions = ['tsConfig', 'assets', 'optimization'];
+
+  if (!requiredOptions.every((key) => key in projectBuildOptions)) {
+    throw new Error(
+      `Missing required options in project target. Check "${requiredOptions.join(', ')}"`
+    );
+  }
+
+  const workspaceRoot = normalize(dirToSearch);
+  const projectRoot = resolve(workspaceRoot, normalize((project.root as string) || ''));
+  const sourceRoot = project.sourceRoot
+    ? resolve(workspaceRoot, normalize(project.sourceRoot))
+    : undefined;
+
+  const tsConfigPath = path.resolve(workspaceRoot, projectBuildOptions.tsConfig as string);
+  const tsConfig = importAngularCliReadTsconfigUtil().readTsconfig(tsConfigPath);
+
+  const ts = await import('typescript');
+  const scriptTarget = tsConfig.options.target || ts.ScriptTarget.ES5;
+
+  const buildOptions: BuildOptions = {
+    // Default options
+    budgets: [],
+    fileReplacements: [],
+    main: '',
+    outputPath: 'dist/storybook-angular',
+    scripts: [],
+    sourceMap: {},
+    styles: [],
+    lazyModules: [],
+
+    // Project Options
+    ...projectBuildOptions,
+    assets: normalizeAssetPatterns(
+      (projectBuildOptions.assets as any[]) || [],
+      workspaceRoot,
+      projectRoot,
+      sourceRoot
+    ),
+    optimization: (projectBuildOptions.optimization as any) ?? {
+      styles: {},
+      scripts: true,
+      fonts: {},
+    },
+
+    // Forced options
+    statsJson: false,
+    forkTypeChecker: false,
+  };
+
+  return {
+    root: workspaceRoot,
+    // The dependency of `@angular-devkit/build-angular` to `@angular-devkit/core` is not exactly the same version as the one for storybook (node modules of node modules ^^)
+    logger: (createConsoleLogger() as unknown) as WebpackConfigOptions['logger'],
+    projectRoot,
+    sourceRoot,
+    buildOptions,
+    tsConfig,
+    tsConfigPath,
+    scriptTarget,
+  };
+};
+
+export type AngularCliWebpackConfig = {
+  cliCommonWebpackConfig: {
+    plugins: webpack.Plugin[];
+    resolve: {
+      modules: string[];
+    };
+    resolveLoader: webpack.ResolveLoader;
+  };
+  cliStyleWebpackConfig: {
+    entry: string | string[] | webpack.Entry | webpack.EntryFunc;
+    module: {
+      rules: webpack.RuleSetRule[];
+    };
+    plugins: webpack.Plugin[];
+  };
+  tsConfigPath: string;
+};
+
+/**
+ * Uses angular cli to extract webpack configuration.
+ * The `AngularCliWebpackConfig` type lists the parts used by storybook
+ */
+export async function extractAngularCliWebpackConfig(
+  dirToSearch: string,
+  project: workspaces.ProjectDefinition
+): Promise<AngularCliWebpackConfig> {
+  const { getCommonConfig, getStylesConfig } = importAngularCliWebpackConfigGenerator();
+
+  const webpackConfigOptions = await buildWebpackConfigOptions(dirToSearch, project);
+
+  const cliCommonConfig = getCommonConfig(webpackConfigOptions);
+  const cliStyleConfig = getStylesConfig(webpackConfigOptions);
+
+  return {
+    cliCommonWebpackConfig: {
+      plugins: cliCommonConfig.plugins,
+      resolve: {
+        modules: cliCommonConfig.resolve?.modules,
+      },
+      resolveLoader: cliCommonConfig.resolveLoader,
+    },
+    cliStyleWebpackConfig: {
+      entry: cliStyleConfig.entry,
+      module: {
+        rules: [...cliStyleConfig.module.rules],
+      },
+      plugins: cliStyleConfig.plugins,
+    },
+    tsConfigPath: webpackConfigOptions.tsConfigPath,
+  };
+}
--- a/app/angular/src/server/angular-read-workspace.ts
+++ b/app/angular/src/server/angular-read-workspace.ts
@ -0,0 +1,81 @@
+import { NodeJsSyncHost } from '@angular-devkit/core/node';
+import { workspaces } from '@angular-devkit/core';
+
+/**
+ * Returns the workspace definition
+ *
+ * - Either from NX if it is present
+ * - Either from `@angular-devkit/core` -> https://github.com/angular/angular-cli/tree/master/packages/angular_devkit/core
+ */
+export const readAngularWorkspaceConfig = async (
+  dirToSearch: string
+): Promise<workspaces.WorkspaceDefinition> => {
+  const host = workspaces.createWorkspaceHost(new NodeJsSyncHost());
+
+  try {
+    /**
+     * Apologies for the following line
+     * If there's a better way to do it, let's do it
+     */
+    /* eslint-disable global-require */
+
+    // catch if nx.json does not exist
+    require('@nrwl/workspace').readNxJson();
+
+    const nxWorkspace = require('@nrwl/workspace').readWorkspaceConfig({
+      format: 'angularCli',
+    });
+
+    // Use the workspace version of nx when angular looks for the angular.json file
+    host.readFile = (path) => {
+      if (typeof path === 'string' && path.endsWith('angular.json')) {
+        return Promise.resolve(JSON.stringify(nxWorkspace));
+      }
+      return host.readFile(path);
+    };
+  } catch (e) {
+    // Ignore if the client does not use NX
+  }
+
+  return (await workspaces.readWorkspace(dirToSearch, host)).workspace;
+};
+
+export const getProjectName = (workspace: workspaces.WorkspaceDefinition): string => {
+  const environmentProjectName = process.env.STORYBOOK_ANGULAR_PROJECT;
+  if (environmentProjectName) {
+    return environmentProjectName;
+  }
+
+  if (workspace.projects.has('storybook')) {
+    return 'storybook';
+  }
+  if (workspace.extensions.defaultProject) {
+    return workspace.extensions.defaultProject as string;
+  }
+
+  const firstProjectName = workspace.projects.keys().next().value;
+  if (firstProjectName) {
+    return firstProjectName;
+  }
+  throw new Error('No angular projects found.');
+};
+
+export const findAngularProject = (
+  workspace: workspaces.WorkspaceDefinition
+): {
+  projectName: string;
+  project: workspaces.ProjectDefinition;
+} => {
+  if (!workspace.projects || !Object.keys(workspace.projects).length) {
+    throw new Error('No angular projects found.');
+  }
+
+  const projectName = getProjectName(workspace);
+
+  const project = workspace.projects.get(projectName);
+
+  if (!project) {
+    throw new Error(`Could not find angular project '${projectName}' in angular.json.`);
+  }
+  return { projectName, project };
+};
--- a/app/angular/src/server/framework-preset-angular-cli.test.ts
+++ b/app/angular/src/server/framework-preset-angular-cli.test.ts
@ -0,0 +1,493 @@
+/* eslint-disable jest/no-interpolation-in-snapshots */
+import { Configuration } from 'webpack';
+import { logger } from '@storybook/node-logger';
+import { webpackFinal } from './framework-preset-angular-cli';
+
+const testPath = __dirname;
+
+let workspaceRoot = testPath;
+let cwdSpy: jest.SpyInstance;
+
+beforeEach(() => {
+  cwdSpy = jest.spyOn(process, 'cwd');
+  jest.spyOn(logger, 'error').mockImplementation();
+  jest.spyOn(logger, 'info').mockImplementation();
+});
+
+afterEach(() => {
+  jest.clearAllMocks();
+});
+
+function initMockWorkspace(name: string) {
+  workspaceRoot = `${testPath}/__mocks-ng-workspace__/${name}`;
+  cwdSpy.mockReturnValue(workspaceRoot);
+}
+
+describe('framework-preset-angular-cli', () => {
+  describe('without angular.json', () => {
+    let consoleErrorSpy: jest.SpyInstance;
+
+    beforeEach(() => {
+      initMockWorkspace('');
+      consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation();
+    });
+    it('should return webpack base config and display log error', async () => {
+      const webpackBaseConfig = newWebpackConfiguration();
+
+      const config = await webpackFinal(webpackBaseConfig);
+
+      expect(logger.info).toHaveBeenCalledWith('=> Loading angular-cli config');
+      expect(logger.error).toHaveBeenCalledWith(
+        `=> Could not find angular workspace config (angular.json) on this path "${workspaceRoot}"`
+      );
+
+      expect(config).toEqual(webpackBaseConfig);
+    });
+  });
+
+  describe("when angular.json haven't projects entry", () => {
+    beforeEach(() => {
+      initMockWorkspace('without-projects-entry');
+    });
+    it('should return webpack base config and display log error', async () => {
+      const webpackBaseConfig = newWebpackConfiguration();
+
+      const config = await webpackFinal(webpackBaseConfig);
+
+      expect(logger.info).toHaveBeenCalledWith('=> Loading angular-cli config');
+      expect(logger.error).toHaveBeenCalledWith('=> Could not find angular project');
+      expect(logger.info).toHaveBeenCalledWith(
+        '=> Fail to load angular-cli config. Using base config'
+      );
+
+      expect(config).toEqual(webpackBaseConfig);
+    });
+  });
+
+  describe('when angular.json have empty projects entry', () => {
+    beforeEach(() => {
+      initMockWorkspace('empty-projects-entry');
+    });
+    it('should return webpack base config and display log error', async () => {
+      const webpackBaseConfig = newWebpackConfiguration();
+
+      const config = await webpackFinal(webpackBaseConfig);
+
+      expect(logger.info).toHaveBeenCalledWith('=> Loading angular-cli config');
+      expect(logger.error).toHaveBeenCalledWith('=> Could not find angular project');
+      expect(logger.info).toHaveBeenCalledWith(
+        '=> Fail to load angular-cli config. Using base config'
+      );
+
+      expect(config).toEqual(webpackBaseConfig);
+    });
+  });
+
+  describe('when angular.json does not have a compatible project', () => {
+    beforeEach(() => {
+      initMockWorkspace('without-compatible-projects');
+    });
+    it('should return webpack base config and display log error', async () => {
+      const webpackBaseConfig = newWebpackConfiguration();
+
+      const config = await webpackFinal(webpackBaseConfig);
+
+      expect(logger.info).toHaveBeenCalledWith('=> Loading angular-cli config');
+      expect(logger.error).toHaveBeenCalledWith('=> Could not find angular project');
+      expect(logger.info).toHaveBeenCalledWith(
+        '=> Fail to load angular-cli config. Using base config'
+      );
+
+      expect(config).toEqual(webpackBaseConfig);
+    });
+  });
+
+  describe('when angular.json have projects without architect.build', () => {
+    beforeEach(() => {
+      initMockWorkspace('without-architect-build');
+    });
+    it('should return webpack base config and display log error', async () => {
+      const webpackBaseConfig = newWebpackConfiguration();
+
+      const config = await webpackFinal(webpackBaseConfig);
+
+      expect(logger.info).toHaveBeenCalledWith('=> Loading angular-cli config');
+      expect(logger.error).toHaveBeenCalledWith(
+        '=> "build" target is not defined in project "foo-project"'
+      );
+      expect(logger.info).toHaveBeenCalledWith(
+        '=> Fail to load angular-cli config. Using base config'
+      );
+
+      expect(config).toEqual(webpackBaseConfig);
+    });
+  });
+
+  describe('when angular.json have projects without architect.build.options', () => {
+    beforeEach(() => {
+      initMockWorkspace('without-architect-build-options');
+    });
+    it('throws error', async () => {
+      await expect(() => webpackFinal(newWebpackConfiguration())).rejects.toThrowError(
+        'Missing required options in project target. Check "tsConfig, assets, optimization"'
+      );
+      expect(logger.error).toHaveBeenCalledWith(`=> Could not get angular cli webpack config`);
+    });
+  });
+  describe('when angular.json have minimal config', () => {
+    beforeEach(() => {
+      initMockWorkspace('minimal-config');
+    });
+    it('should log', async () => {
+      const baseWebpackConfig = newWebpackConfiguration();
+      await webpackFinal(baseWebpackConfig);
+
+      expect(logger.info).toHaveBeenCalledTimes(3);
+      expect(logger.info).toHaveBeenNthCalledWith(1, '=> Loading angular-cli config');
+      expect(logger.info).toHaveBeenNthCalledWith(
+        2,
+        '=> Using angular project "foo-project" for configuring Storybook'
+      );
+      expect(logger.info).toHaveBeenNthCalledWith(3, '=> Using angular-cli webpack config');
+    });
+
+    it('should extends webpack base config', async () => {
+      const baseWebpackConfig = newWebpackConfiguration();
+      const webpackFinalConfig = await webpackFinal(baseWebpackConfig);
+
+      expect(webpackFinalConfig).toEqual({
+        ...baseWebpackConfig,
+        module: { ...baseWebpackConfig.module, rules: expect.anything() },
+        plugins: expect.anything(),
+        resolve: {
+          ...baseWebpackConfig.resolve,
+          modules: expect.arrayContaining(baseWebpackConfig.resolve.modules),
+          // the base resolve.plugins are not kept 🤷‍♂️
+          plugins: expect.not.arrayContaining(baseWebpackConfig.resolve.plugins),
+        },
+        resolveLoader: expect.anything(),
+      });
+    });
+
+    it('should set webpack "module.rules"', async () => {
+      const baseWebpackConfig = newWebpackConfiguration();
+      const webpackFinalConfig = await webpackFinal(baseWebpackConfig);
+
+      expect(webpackFinalConfig.module.rules).toEqual([
+        {
+          exclude: [],
+          test: /\.css$/,
+          use: expect.anything(),
+        },
+        {
+          exclude: [],
+          test: /\.scss$|\.sass$/,
+          use: expect.anything(),
+        },
+        {
+          exclude: [],
+          test: /\.less$/,
+          use: expect.anything(),
+        },
+        {
+          exclude: [],
+          test: /\.styl$/,
+          use: expect.anything(),
+        },
+        ...baseWebpackConfig.module.rules,
+      ]);
+    });
+
+    it('should set webpack "plugins"', async () => {
+      const baseWebpackConfig = newWebpackConfiguration();
+      const webpackFinalConfig = await webpackFinal(baseWebpackConfig);
+
+      expect(webpackFinalConfig.plugins).toMatchInlineSnapshot(`
+        Array [
+          AnyComponentStyleBudgetChecker {
+            "budgets": Array [],
+          },
+          ContextReplacementPlugin {
+            "newContentRecursive": undefined,
+            "newContentRegExp": undefined,
+            "newContentResource": undefined,
+            "resourceRegExp": /\\\\@angular\\(\\\\\\\\\\|\\\\/\\)core\\(\\\\\\\\\\|\\\\/\\)/,
+          },
+          DedupeModuleResolvePlugin {
+            "modules": Map {},
+            "options": Object {
+              "verbose": undefined,
+            },
+          },
+          Object {
+            "keepBasePlugin": true,
+          },
+        ]
+      `);
+    });
+
+    it('should set webpack "resolve.modules"', async () => {
+      const baseWebpackConfig = newWebpackConfiguration();
+      const webpackFinalConfig = await webpackFinal(baseWebpackConfig);
+
+      expect(webpackFinalConfig.resolve.modules).toEqual([
+        ...baseWebpackConfig.resolve.modules,
+        `${workspaceRoot}/src`,
+      ]);
+    });
+
+    it('should replace webpack "resolve.plugins"', async () => {
+      const baseWebpackConfig = newWebpackConfiguration();
+      const webpackFinalConfig = await webpackFinal(baseWebpackConfig);
+
+      expect(webpackFinalConfig.resolve.plugins).toMatchInlineSnapshot(`
+        Array [
+          TsconfigPathsPlugin {
+            "absoluteBaseUrl": "${workspaceRoot}/src/",
+            "baseUrl": "./",
+            "extensions": Array [
+              ".ts",
+              ".tsx",
+            ],
+            "log": Object {
+              "log": [Function],
+              "logError": [Function],
+              "logInfo": [Function],
+              "logWarning": [Function],
+            },
+            "matchPath": [Function],
+            "source": "described-resolve",
+            "target": "resolve",
+          },
+        ]
+      `);
+    });
+  });
+  describe('when angular.json have "options.styles" config', () => {
+    beforeEach(() => {
+      initMockWorkspace('with-options-styles');
+    });
+
+    it('should extends webpack base config', async () => {
+      const baseWebpackConfig = newWebpackConfiguration();
+      const webpackFinalConfig = await webpackFinal(baseWebpackConfig);
+
+      expect(webpackFinalConfig).toEqual({
+        ...baseWebpackConfig,
+        entry: [
+          ...(baseWebpackConfig.entry as any[]),
+          `${workspaceRoot}/src/styles.css`,
+          `${workspaceRoot}/src/styles.scss`,
+        ],
+        module: { ...baseWebpackConfig.module, rules: expect.anything() },
+        plugins: expect.anything(),
+        resolve: {
+          ...baseWebpackConfig.resolve,
+          modules: expect.arrayContaining(baseWebpackConfig.resolve.modules),
+          // the base resolve.plugins are not kept 🤷‍♂️
+          plugins: expect.not.arrayContaining(baseWebpackConfig.resolve.plugins),
+        },
+        resolveLoader: expect.anything(),
+      });
+    });
+
+    it('should set webpack "module.rules"', async () => {
+      const baseWebpackConfig = newWebpackConfiguration();
+      const webpackFinalConfig = await webpackFinal(baseWebpackConfig);
+
+      expect(webpackFinalConfig.module.rules).toEqual([
+        {
+          exclude: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`],
+          test: /\.css$/,
+          use: expect.anything(),
+        },
+        {
+          exclude: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`],
+          test: /\.scss$|\.sass$/,
+          use: expect.anything(),
+        },
+        {
+          exclude: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`],
+          test: /\.less$/,
+          use: expect.anything(),
+        },
+        {
+          exclude: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`],
+          test: /\.styl$/,
+          use: expect.anything(),
+        },
+        {
+          include: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`],
+          test: /\.css$/,
+          use: expect.anything(),
+        },
+        {
+          include: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`],
+          test: /\.scss$|\.sass$/,
+          use: expect.anything(),
+        },
+        {
+          include: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`],
+          test: /\.less$/,
+          use: expect.anything(),
+        },
+        {
+          include: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`],
+          test: /\.styl$/,
+          use: expect.anything(),
+        },
+        ...baseWebpackConfig.module.rules,
+      ]);
+    });
+  });
+
+  describe('when is a nx workspace', () => {
+    beforeEach(() => {
+      initMockWorkspace('with-nx');
+    });
+
+    it('should extends webpack base config', async () => {
+      const baseWebpackConfig = newWebpackConfiguration();
+      const webpackFinalConfig = await webpackFinal(baseWebpackConfig);
+
+      expect(webpackFinalConfig).toEqual({
+        ...baseWebpackConfig,
+        entry: [
+          ...(baseWebpackConfig.entry as any[]),
+          `${workspaceRoot}/src/styles.css`,
+          `${workspaceRoot}/src/styles.scss`,
+        ],
+        module: { ...baseWebpackConfig.module, rules: expect.anything() },
+        plugins: expect.anything(),
+        resolve: {
+          ...baseWebpackConfig.resolve,
+          modules: expect.arrayContaining(baseWebpackConfig.resolve.modules),
+          // the base resolve.plugins are not kept 🤷‍♂️
+          plugins: expect.not.arrayContaining(baseWebpackConfig.resolve.plugins),
+        },
+        resolveLoader: expect.anything(),
+      });
+    });
+
+    it('should set webpack "module.rules"', async () => {
+      const baseWebpackConfig = newWebpackConfiguration();
+      const webpackFinalConfig = await webpackFinal(baseWebpackConfig);
+
+      expect(webpackFinalConfig.module.rules).toEqual([
+        {
+          exclude: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`],
+          test: /\.css$/,
+          use: expect.anything(),
+        },
+        {
+          exclude: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`],
+          test: /\.scss$|\.sass$/,
+          use: expect.anything(),
+        },
+        {
+          exclude: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`],
+          test: /\.less$/,
+          use: expect.anything(),
+        },
+        {
+          exclude: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`],
+          test: /\.styl$/,
+          use: expect.anything(),
+        },
+        {
+          include: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`],
+          test: /\.css$/,
+          use: expect.anything(),
+        },
+        {
+          include: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`],
+          test: /\.scss$|\.sass$/,
+          use: expect.anything(),
+        },
+        {
+          include: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`],
+          test: /\.less$/,
+          use: expect.anything(),
+        },
+        {
+          include: [`${workspaceRoot}/src/styles.css`, `${workspaceRoot}/src/styles.scss`],
+          test: /\.styl$/,
+          use: expect.anything(),
+        },
+        ...baseWebpackConfig.module.rules,
+      ]);
+    });
+  });
+});
+
+const newWebpackConfiguration = (
+  transformer: (c: Configuration) => Configuration = (c) => c
+): Configuration => {
+  return transformer({
+    name: 'preview',
+    mode: 'development',
+    bail: false,
+    devtool: 'cheap-module-source-map',
+    entry: [
+      '/Users/joe/storybook/lib/core-server/dist/cjs/globals/polyfills.js',
+      '/Users/joe/storybook/lib/core-server/dist/cjs/globals/globals.js',
+      '/Users/joe/storybook/examples/angular-cli/.storybook/storybook-init-framework-entry.js',
+      '/Users/joe/storybook/addons/docs/dist/esm/frameworks/common/config.js-generated-other-entry.js',
+      '/Users/joe/storybook/addons/docs/dist/esm/frameworks/angular/config.js-generated-other-entry.js',
+      '/Users/joe/storybook/addons/actions/dist/esm/preset/addDecorator.js-generated-other-entry.js',
+      '/Users/joe/storybook/addons/actions/dist/esm/preset/addArgs.js-generated-other-entry.js',
+      '/Users/joe/storybook/addons/links/dist/esm/preset/addDecorator.js-generated-other-entry.js',
+      '/Users/joe/storybook/addons/knobs/dist/esm/preset/addDecorator.js-generated-other-entry.js',
+      '/Users/joe/storybook/addons/backgrounds/dist/esm/preset/addDecorator.js-generated-other-entry.js',
+      '/Users/joe/storybook/addons/backgrounds/dist/esm/preset/addParameter.js-generated-other-entry.js',
+      '/Users/joe/storybook/addons/a11y/dist/esm/a11yRunner.js-generated-other-entry.js',
+      '/Users/joe/storybook/addons/a11y/dist/esm/a11yHighlight.js-generated-other-entry.js',
+      '/Users/joe/storybook/examples/angular-cli/.storybook/preview.ts-generated-config-entry.js',
+      '/Users/joe/storybook/examples/angular-cli/.storybook/generated-stories-entry.js',
+      '/Users/joe/storybook/node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined',
+    ],
+    output: {
+      path: '/Users/joe/storybook/examples/angular-cli/node_modules/.cache/storybook/public',
+      filename: '[name].[hash].bundle.js',
+      publicPath: '',
+    },
+    plugins: [{ keepBasePlugin: true } as any],
+    module: {
+      rules: [{ keepBaseRule: true } as any],
+    },
+    resolve: {
+      extensions: ['.mjs', '.js', '.jsx', '.ts', '.tsx', '.json', '.cjs'],
+      modules: ['node_modules'],
+      mainFields: ['browser', 'main'],
+      alias: {
+        '@emotion/core': '/Users/joe/storybook/node_modules/@emotion/core',
+        '@emotion/styled': '/Users/joe/storybook/node_modules/@emotion/styled',
+        'emotion-theming': '/Users/joe/storybook/node_modules/emotion-theming',
+        '@storybook/addons': '/Users/joe/storybook/lib/addons',
+        '@storybook/api': '/Users/joe/storybook/lib/api',
+        '@storybook/channels': '/Users/joe/storybook/lib/channels',
+        '@storybook/channel-postmessage': '/Users/joe/storybook/lib/channel-postmessage',
+        '@storybook/components': '/Users/joe/storybook/lib/components',
+        '@storybook/core-events': '/Users/joe/storybook/lib/core-events',
+        '@storybook/router': '/Users/joe/storybook/lib/router',
+        '@storybook/theming': '/Users/joe/storybook/lib/theming',
+        '@storybook/semver': '/Users/joe/storybook/node_modules/@storybook/semver',
+        '@storybook/client-api': '/Users/joe/storybook/lib/client-api',
+        '@storybook/client-logger': '/Users/joe/storybook/lib/client-logger',
+        react: '/Users/joe/storybook/node_modules/react',
+        'react-dom': '/Users/joe/storybook/node_modules/react-dom',
+      },
+      plugins: [{ keepBasePlugin: true } as any],
+    },
+    resolveLoader: { plugins: [] },
+    optimization: {
+      splitChunks: { chunks: 'all' },
+      runtimeChunk: true,
+      sideEffects: true,
+      usedExports: true,
+      concatenateModules: true,
+      minimizer: [],
+    },
+    performance: { hints: false },
+  });
+};
--- a/app/angular/src/server/framework-preset-angular-cli.ts
+++ b/app/angular/src/server/framework-preset-angular-cli.ts
@ -1,16 +1,114 @@
-import { Configuration } from 'webpack';
-import { Path } from '@angular-devkit/core';
+import webpack from 'webpack';
 import { logger } from '@storybook/node-logger';
+import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';

+import { findAngularProject, readAngularWorkspaceConfig } from './angular-read-workspace';
 import {
-  getAngularCliWebpackConfigOptions,
-  applyAngularCliWebpackConfig,
-} from './angular-cli_config';
+  AngularCliWebpackConfig,
+  extractAngularCliWebpackConfig,
+  ProjectTargetNotFoundError,
+} from './angular-devkit-build-webpack';
+import { moduleIsAvailable } from './utils/module-is-available';
+import { filterOutStylingRules } from './utils/filter-out-styling-rules';

-export function webpackFinal(config: Configuration) {
-  const cwd = process.cwd() as Path;
-  const cliWebpackConfigOptions = getAngularCliWebpackConfigOptions(cwd);
-  logger.info('=> Loading angular-cli config.');
+export async function webpackFinal(baseConfig: webpack.Configuration) {
+  const dirToSearch = process.cwd();

-  return applyAngularCliWebpackConfig(config, cliWebpackConfigOptions);
+  if (!moduleIsAvailable('@angular-devkit/build-angular')) {
+    logger.info('=> Using base config because "@angular-devkit/build-angular" is not installed');
+    return baseConfig;
+  }
+  logger.info('=> Loading angular-cli config');
+
+  // Read angular workspace
+  let workspaceConfig;
+  try {
+    workspaceConfig = await readAngularWorkspaceConfig(dirToSearch);
+  } catch (error) {
+    logger.error(
+      `=> Could not find angular workspace config (angular.json) on this path "${dirToSearch}"`
+    );
+    logger.info(`=> Fail to load angular-cli config. Using base config`);
+    return baseConfig;
+  }
+
+  // Find angular project
+  let project;
+  let projectName;
+  try {
+    const fondProject = findAngularProject(workspaceConfig);
+    project = fondProject.project;
+    projectName = fondProject.projectName;
+    logger.info(`=> Using angular project "${projectName}" for configuring Storybook`);
+  } catch (error) {
+    logger.error(`=> Could not find angular project`);
+    logger.info(`=> Fail to load angular-cli config. Using base config`);
+    return baseConfig;
+  }
+
+  // Use angular-cli to get some webpack config
+  let angularCliWebpackConfig;
+  try {
+    angularCliWebpackConfig = await extractAngularCliWebpackConfig(dirToSearch, project);
+    logger.info(`=> Using angular-cli webpack config`);
+  } catch (error) {
+    if (error instanceof ProjectTargetNotFoundError) {
+      logger.error(`=> "${error.projectTarget}" target is not defined in project "${projectName}"`);
+      logger.info(`=> Fail to load angular-cli config. Using base config`);
+      return baseConfig;
+    }
+    logger.error(`=> Could not get angular cli webpack config`);
+    throw error;
+  }
+
+  return mergeAngularCliWebpackConfig(angularCliWebpackConfig, baseConfig);
+}
+
+function mergeAngularCliWebpackConfig(
+  { cliCommonWebpackConfig, cliStyleWebpackConfig, tsConfigPath }: AngularCliWebpackConfig,
+  baseConfig: webpack.Configuration
+) {
+  // Don't use storybooks styling rules because we have to use rules created by @angular-devkit/build-angular
+  // because @angular-devkit/build-angular created rules have include/exclude for global style files.
+  const rulesExcludingStyles = filterOutStylingRules(baseConfig);
+
+  // styleWebpackConfig.entry adds global style files to the webpack context
+  const entry = [
+    ...(baseConfig.entry as string[]),
+    ...Object.values(cliStyleWebpackConfig.entry).reduce((acc, item) => acc.concat(item), []),
+  ];
+
+  const module = {
+    ...baseConfig.module,
+    rules: [...cliStyleWebpackConfig.module.rules, ...rulesExcludingStyles],
+  };
+
+  // We use cliCommonConfig plugins to serve static assets files.
+  const plugins = [
+    ...cliStyleWebpackConfig.plugins,
+    ...cliCommonWebpackConfig.plugins,
+    ...baseConfig.plugins,
+  ];
+
+  const resolve = {
+    ...baseConfig.resolve,
+    modules: Array.from(
+      new Set([...baseConfig.resolve.modules, ...cliCommonWebpackConfig.resolve.modules])
+    ),
+    plugins: [
+      new TsconfigPathsPlugin({
+        configFile: tsConfigPath,
+        mainFields: ['browser', 'module', 'main'],
+      }),
+    ],
+  };
+
+  return {
+    ...baseConfig,
+    entry,
+    module,
+    plugins,
+    resolve,
+    resolveLoader: cliCommonWebpackConfig.resolveLoader,
+  };
 }
--- a/app/angular/src/server/utils/filter-out-styling-rules.ts
+++ b/app/angular/src/server/utils/filter-out-styling-rules.ts
@ -0,0 +1,19 @@
+import { Configuration, RuleSetRule } from 'webpack';
+
+const isStylingRule = (rule: RuleSetRule) => {
+  const { test } = rule;
+
+  if (!test) {
+    return false;
+  }
+
+  if (!(test instanceof RegExp)) {
+    return false;
+  }
+
+  return test.test('.css') || test.test('.scss') || test.test('.sass');
+};
+
+export const filterOutStylingRules = (config: Configuration) => {
+  return config.module.rules.filter((rule) => !isStylingRule(rule));
+};
--- a/app/angular/src/server/utils/module-is-available.ts
+++ b/app/angular/src/server/utils/module-is-available.ts
@ -0,0 +1,8 @@
+export const moduleIsAvailable = (moduleName: string): boolean => {
+  try {
+    require.resolve(moduleName);
+    return true;
+  } catch (e) {
+    return false;
+  }
+};
--- a/app/angular/src/server/utils/normalize-asset-patterns.ts
+++ b/app/angular/src/server/utils/normalize-asset-patterns.ts
@ -0,0 +1,84 @@
+/**
+ * Clone of `normalizeAssetPatterns` function from angular-cli v11.2.*
+ * > https://github.com/angular/angular-cli/blob/de63f41d669e42ada84f94ca1795d2791b9b45cc/packages/angular_devkit/build_angular/src/utils/normalize-asset-patterns.ts
+ *
+ * It is not possible to use the original because arguments have changed between version 6.1.* and 11.*.* of angular-cli
+ */
+import { statSync } from 'fs';
+import {
+  BaseException,
+  basename,
+  dirname,
+  getSystemPath,
+  join,
+  normalize,
+  Path,
+  relative,
+  resolve,
+} from '@angular-devkit/core';
+
+import { AssetPattern, AssetPatternClass } from '@angular-devkit/build-angular/src/browser/schema';
+
+export class MissingAssetSourceRootException extends BaseException {
+  constructor(path: string) {
+    super(`The ${path} asset path must start with the project source root.`);
+  }
+}
+
+export function normalizeAssetPatterns(
+  assetPatterns: AssetPattern[],
+  root: Path,
+  projectRoot: Path,
+  maybeSourceRoot: Path | undefined
+): AssetPatternClass[] {
+  // When sourceRoot is not available, we default to ${projectRoot}/src.
+  const sourceRoot = maybeSourceRoot || join(projectRoot, 'src');
+  const resolvedSourceRoot = resolve(root, sourceRoot);
+
+  if (assetPatterns.length === 0) {
+    return [];
+  }
+
+  return assetPatterns.map((assetPattern) => {
+    // Normalize string asset patterns to objects.
+    if (typeof assetPattern === 'string') {
+      const assetPath = normalize(assetPattern);
+      const resolvedAssetPath = resolve(root, assetPath);
+
+      // Check if the string asset is within sourceRoot.
+      if (!resolvedAssetPath.startsWith(resolvedSourceRoot)) {
+        throw new MissingAssetSourceRootException(assetPattern);
+      }
+
+      let glob: string;
+      let input: Path;
+      let isDirectory = false;
+
+      try {
+        isDirectory = statSync(getSystemPath(resolvedAssetPath)).isDirectory();
+      } catch {
+        isDirectory = true;
+      }
+
+      if (isDirectory) {
+        // Folders get a recursive star glob.
+        glob = '**/*';
+        // Input directory is their original path.
+        input = assetPath;
+      } else {
+        // Files are their own glob.
+        glob = basename(assetPath);
+        // Input directory is their original dirname.
+        input = dirname(assetPath);
+      }
+
+      // Output directory for both is the relative path from source root to input.
+      const output = relative(resolvedSourceRoot, resolve(root, input));
+
+      // Return the asset pattern in object format.
+      return { glob, input, output };
+    }
+    // It's already an AssetPatternObject, no need to convert.
+    return assetPattern;
+  });
+}
--- a/app/aurelia/package.json
+++ b/app/aurelia/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/aurelia",
-  "version": "6.3.0-alpha.0",
+  "version": "6.3.0-alpha.13",
  "description": "Storybook for Aurelia: Develop Aurelia Components in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
@ -14,6 +14,10 @@
    "url": "https://github.com/storybookjs/storybook.git",
    "directory": "app/aurelia"
  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
+  },
  "license": "MIT",
  "main": "dist/cjs/client/index.js",
  "module": "dist/esm/client/index.js",
@ -35,11 +39,11 @@
  },
  "dependencies": {
    "@aurelia/webpack-loader": "^0.7.0",
-    "@storybook/addon-knobs": "6.3.0-alpha.0",
-    "@storybook/addons": "6.3.0-alpha.0",
-    "@storybook/core": "6.3.0-alpha.0",
-    "@storybook/core-common": "6.3.0-alpha.0",
-    "@storybook/node-logger": "6.3.0-alpha.0",
+    "@storybook/addon-knobs": "6.3.0-alpha.13",
+    "@storybook/addons": "6.3.0-alpha.13",
+    "@storybook/core": "6.3.0-alpha.13",
+    "@storybook/core-common": "6.3.0-alpha.13",
+    "@storybook/node-logger": "6.3.0-alpha.13",
    "fork-ts-checker-webpack-plugin": "^4.1.6",
    "global": "^4.4.0",
    "react": "16.14.0",
@ -70,5 +74,5 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "7739aace24e8614f2acc9972b2ae44cf7f228c18"
+  "gitHead": "35287402b58e8c9ec660d28e9fe812f6b1204254"
 }
--- a/app/aurelia/src/client/preview/globals.ts
+++ b/app/aurelia/src/client/preview/globals.ts
@ -1,3 +1,3 @@
-import { window } from 'global';
+import { window as globalWindow } from 'global';

-window.STORYBOOK_ENV = 'aurelia';
+globalWindow.STORYBOOK_ENV = 'aurelia';
--- a/app/ember/package.json
+++ b/app/ember/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/ember",
-  "version": "6.3.0-alpha.0",
+  "version": "6.3.0-alpha.13",
  "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
  "homepage": "https://github.com/storybookjs/storybook/tree/master/app/ember",
  "bugs": {
@ -11,6 +11,10 @@
    "url": "https://github.com/storybookjs/storybook.git",
    "directory": "app/ember"
  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
+  },
  "license": "MIT",
  "main": "dist/cjs/client/index.js",
  "module": "dist/esm/client/index.js",
@ -39,8 +43,8 @@
  },
  "dependencies": {
    "@ember/test-helpers": "^2.1.4",
-    "@storybook/core": "6.3.0-alpha.0",
-    "@storybook/core-common": "6.3.0-alpha.0",
+    "@storybook/core": "6.3.0-alpha.13",
+    "@storybook/core-common": "6.3.0-alpha.13",
    "core-js": "^3.8.2",
    "global": "^4.4.0",
    "react": "16.14.0",
@ -61,5 +65,5 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "7739aace24e8614f2acc9972b2ae44cf7f228c18"
+  "gitHead": "35287402b58e8c9ec660d28e9fe812f6b1204254"
 }
--- a/app/ember/src/client/preview/globals.ts
+++ b/app/ember/src/client/preview/globals.ts
@ -1,4 +1,4 @@
-import { window } from 'global';
+import { window as globalWindow } from 'global';

-window.STORYBOOK_NAME = process.env.STORYBOOK_NAME;
-window.STORYBOOK_ENV = 'ember';
+globalWindow.STORYBOOK_NAME = process.env.STORYBOOK_NAME;
+globalWindow.STORYBOOK_ENV = 'ember';
--- a/app/ember/src/client/preview/render.ts
+++ b/app/ember/src/client/preview/render.ts
@ -1,4 +1,4 @@
-import { window, document } from 'global';
+import { window as globalWindow, document } from 'global';
 import dedent from 'ts-dedent';
 import { RenderContext, ElementArgs, OptionsArgs } from './types';

@ -6,8 +6,8 @@ declare let Ember: any;

 const rootEl = document.getElementById('root');

-const config = window.require(`${window.STORYBOOK_NAME}/config/environment`);
-const app = window.require(`${window.STORYBOOK_NAME}/app`).default.create({
+const config = globalWindow.require(`${globalWindow.STORYBOOK_NAME}/config/environment`);
+const app = globalWindow.require(`${globalWindow.STORYBOOK_NAME}/app`).default.create({
  autoboot: false,
  rootElement: rootEl,
  ...config.APP,
--- a/app/html/package.json
+++ b/app/html/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/html",
-  "version": "6.3.0-alpha.0",
+  "version": "6.3.0-alpha.13",
  "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
@ -14,6 +14,10 @@
    "url": "https://github.com/storybookjs/storybook.git",
    "directory": "app/html"
  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
+  },
  "license": "MIT",
  "main": "dist/cjs/client/index.js",
  "module": "dist/esm/client/index.js",
@ -41,10 +45,10 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.3.0-alpha.0",
-    "@storybook/client-api": "6.3.0-alpha.0",
-    "@storybook/core": "6.3.0-alpha.0",
-    "@storybook/core-common": "6.3.0-alpha.0",
+    "@storybook/addons": "6.3.0-alpha.13",
+    "@storybook/client-api": "6.3.0-alpha.13",
+    "@storybook/core": "6.3.0-alpha.13",
+    "@storybook/core-common": "6.3.0-alpha.13",
    "@types/webpack-env": "^1.16.0",
    "core-js": "^3.8.2",
    "global": "^4.4.0",
@ -64,5 +68,5 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "7739aace24e8614f2acc9972b2ae44cf7f228c18"
+  "gitHead": "35287402b58e8c9ec660d28e9fe812f6b1204254"
 }
--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				`module.exports = require('../dist/frameworks/common/index');`