diff --git a/.babelrc.js b/.babelrc.js
index eb5f1c0d96a..13e7b0a37c2 100644
--- a/.babelrc.js
+++ b/.babelrc.js
@@ -12,7 +12,13 @@ const withTests = {
],
};
-const modules = process.env.BABEL_ESM === 'true' ? false : 'auto';
+// type BabelMode = 'cjs' | 'esm' | 'modern';
+
+const modules = process.env.BABEL_MODE === 'cjs' ? 'auto' : false;
+
+// FIXME: optional chaining introduced in chrome 80, not supported by wepback4
+// https://github.com/webpack/webpack/issues/10227#issuecomment-642734920
+const targets = process.env.BABEL_MODE === 'modern' ? { chrome: '79' } : 'defaults';
module.exports = {
ignore: [
@@ -26,7 +32,7 @@ module.exports = {
shippedProposals: true,
useBuiltIns: 'usage',
corejs: '3',
- targets: 'defaults',
+ targets,
modules,
},
],
@@ -70,7 +76,7 @@ module.exports = {
useBuiltIns: 'usage',
corejs: '3',
modules,
- targets: 'defaults',
+ targets,
},
],
'@babel/preset-react',
diff --git a/.circleci/config.yml b/.circleci/config.yml
index 414f1be5aa3..1d587dbfb94 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -195,7 +195,7 @@ jobs:
command: yarn wait-on http://localhost:6000
- run:
name: Run E2E tests
- command: yarn test:e2e-framework --clean --skip angular --skip vue3 --skip web_components_typescript --skip cra
+ command: yarn test:e2e-framework --clean --skip angular11 --skip angular --skip vue3 --skip web_components_typescript --skip cra
- store_artifacts:
path: /tmp/storybook/cypress
destination: cypress
@@ -218,8 +218,8 @@ jobs:
command: yarn wait-on http://localhost:6000
- run:
name: Run E2E tests
- # Do not test CRA nor Web Components here because it's done in PnP part
- command: yarn test:e2e-framework vue3 angular
+ # Do not test CRA here because it's done in PnP part
+ command: yarn test:e2e-framework vue3 angular angular11 web_components_typescript
- store_artifacts:
path: /tmp/storybook/cypress
destination: cypress
@@ -246,7 +246,7 @@ jobs:
cd ..
npx create-react-app cra-bench
cd cra-bench
- npx @storybook/bench 'npx sb init' --label cra
+ npx @storybook/bench 'npx sb init' --label cra --extra-flags "--modern"
e2e-tests-pnp:
executor:
class: medium
@@ -266,7 +266,7 @@ jobs:
command: yarn wait-on http://localhost:6000
- run:
name: run e2e tests
- command: yarn test:e2e-framework --pnp sfcVue cra web_components_typescript
+ command: yarn test:e2e-framework --pnp sfcVue cra
- store_artifacts:
path: /tmp/storybook/cypress
destination: cypress
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
index db7dbaceecc..1466eb1e5cc 100644
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -8,7 +8,8 @@ labels: needs triage, bug
A clear and concise description of what the bug is.
**To Reproduce**
-Link to a reproduction repo that demonstrates the bug, plus instructions on how to trigger it.
+Please create a reproduction repo by running `npx sb@next repro` and following the instructions.
+When you're done, please link the repo here. We prioritize issues with reproductions over those without.
**System**
Please paste the results of `npx sb@next info` here.
diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml
index beac6ecd57e..d7cb62f6095 100644
--- a/.github/ISSUE_TEMPLATE/config.yml
+++ b/.github/ISSUE_TEMPLATE/config.yml
@@ -1,5 +1,11 @@
blank_issues_enabled: false
contact_links:
- - name: Storybook Discord
+ - name: Documentation 📚
+ url: https://storybook.js.org/docs/
+ about: Check out the official docs for answers to common questions
+ - name: Questions & discussions 🤔
+ url: https://github.com/storybookjs/storybook/discussions
+ about: Ask questions, request features & discuss RFCs
+ - name: Community Discord 💬
url: https://discord.gg/storybook
about: Community discussions, interactive support, contributor help
diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
index eb468ed8a6c..90c0ecccd1b 100644
--- a/.github/ISSUE_TEMPLATE/feature_request.md
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -5,13 +5,13 @@ labels: needs triage, feature request
---
**Is your feature request related to a problem? Please describe**
-A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+A clear and concise description of the problem. E.g. I'm always frustrated when [...]
**Describe the solution you'd like**
-A clear and concise description of what you want to happen.
+What would you like to see added to Storybook to solve problem?
**Describe alternatives you've considered**
-A clear and concise description of any alternative solutions or features you've considered.
+Any alternative solutions or features you've considered.
**Are you able to assist to bring the feature to reality?**
no | yes, I can...
diff --git a/.github/ISSUE_TEMPLATE/question.md b/.github/ISSUE_TEMPLATE/question.md
deleted file mode 100644
index b17589a57e2..00000000000
--- a/.github/ISSUE_TEMPLATE/question.md
+++ /dev/null
@@ -1,14 +0,0 @@
----
-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.
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1ec057f6176..6fce6edad39 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,51 @@
+## 6.3.0-alpha.29 (May 17, 2021)
+
+### Features
+
+- UI: Provide option to hide default toolbar tools ([#14897](https://github.com/storybookjs/storybook/pull/14897))
+- Core: Support modern browser target ([#14954](https://github.com/storybookjs/storybook/pull/14954))
+
+### Maintenance
+
+- Core: Remove updateGlobals warning message ([#14949](https://github.com/storybookjs/storybook/pull/14949))
+- Controls: Tighten color control inference heuristic and test ([#14684](https://github.com/storybookjs/storybook/pull/14684))
+
+## 6.3.0-alpha.28 (May 15, 2021)
+
+### Bug Fixes
+
+- CLI: Keep Webpack 4 builder for Angular lower than 12 ([#14942](https://github.com/storybookjs/storybook/pull/14942))
+
+## 6.3.0-alpha.27 (May 14, 2021)
+
+### Features
+
+- CLI: Add Angular 12 + docs inline rendering support ([#14928](https://github.com/storybookjs/storybook/pull/14928))
+
+## 6.3.0-alpha.26 (May 14, 2021)
+
+### Bug Fixes
+
+- Addon-controls: Fix duplicate color swatch id's in Color control ([#14925](https://github.com/storybookjs/storybook/pull/14925))
+
+### Maintenance
+
+- CLI: Add preamble instructions to `sb repro` ([#14924](https://github.com/storybookjs/storybook/pull/14924))
+- Webpack5: Always set `resolve.fallback.crypto` to `false` ([#14914](https://github.com/storybookjs/storybook/pull/14914))
+- Build: Add missing dependencies ([#14919](https://github.com/storybookjs/storybook/pull/14919))
+- Build: Put E2E tests back on track ([#14917](https://github.com/storybookjs/storybook/pull/14917))
+
+### Dependency Upgrades
+
+- Addon-storyshots: Make @storybook/react dependency optional ([#14891](https://github.com/storybookjs/storybook/pull/14891))
+
+## 6.3.0-alpha.25 (May 13, 2021)
+
+### Maintenance
+
+- Builder-Webpack5: Use native features instead of plugins ([#14281](https://github.com/storybookjs/storybook/pull/14281))
+- CLI: Repro refinements per feedback ([#14888](https://github.com/storybookjs/storybook/pull/14888))
+
## 6.3.0-alpha.24 (May 11, 2021)
### Features
diff --git a/MIGRATION.md b/MIGRATION.md
index 840cbc4814f..2510c21a7b4 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1,6 +1,7 @@
Migration
- [From version 6.2.x to 6.3.0](#from-version-62x-to-630)
+ - [Angular 12 upgrade](#angular-12-upgrade)
- [6.3 deprecations](#63-deprecations)
- [Deprecated scoped blocks imports](#deprecated-scoped-blocks-imports)
- [From version 6.1.x to 6.2.0](#from-version-61x-to-620)
@@ -9,6 +10,7 @@
- [New Angular storyshots format](#new-angular-storyshots-format)
- [Deprecated Angular story component](#deprecated-angular-story-component)
- [New Angular renderer](#new-angular-renderer)
+ - [Components without selectors](#components-without-selectors)
- [Packages now available as ESModules](#packages-now-available-as-esmodules)
- [6.2 Deprecations](#62-deprecations)
- [Deprecated implicit PostCSS loader](#deprecated-implicit-postcss-loader)
@@ -157,6 +159,24 @@
## From version 6.2.x to 6.3.0
+### Angular 12 upgrade
+
+Storybook 6.3 supports Angular 12 out of the box when you install it fresh. However, if you're upgrading your project from a previous version, you'll need to do the following steps to force Storybook to use webpack 5 for building your project:
+
+```js
+npm install @storybook/builder-webpack5 --save-dev # or yarn
+```
+
+Then edit your `.storybook/main.js` config:
+
+```js
+module.exports = {
+ core: {
+ builder: 'webpack5',
+ },
+};
+```
+
### 6.3 deprecations
#### Deprecated scoped blocks imports
@@ -224,6 +244,10 @@ export const parameters = {
Please also file an issue if you need to opt out. We plan to remove the legacy renderer in 7.0.
+#### Components without selectors
+
+When the new Angular renderer is used, all Angular Story components must either have a selector, or be added to the `entryComponents` array of the story's `moduleMetadata`. If the component has any `Input`s or `Output`s to be controlled with `args`, a selector should be added.
+
### Packages now available as ESModules
Many Storybook packages are now available as ESModules in addition to CommonJS. If your jest tests stop working, this is likely why. One common culprit is doc blocks, which [is fixed in 6.3](#deprecated-scoped-blocks-imports). In 6.2, you can configure jest to transform the packages like so ([more info](https://jestjs.io/docs/configuration#transformignorepatterns-arraystring)):
diff --git a/addons/a11y/package.json b/addons/a11y/package.json
index 0b60abca405..4d5ab32f97c 100644
--- a/addons/a11y/package.json
+++ b/addons/a11y/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-a11y",
- "version": "6.3.0-alpha.24",
+ "version": "6.3.0-alpha.29",
"description": "Test component compliance with web accessibility standards",
"keywords": [
"a11y",
@@ -45,14 +45,14 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "6.3.0-alpha.24",
- "@storybook/api": "6.3.0-alpha.24",
- "@storybook/channels": "6.3.0-alpha.24",
- "@storybook/client-api": "6.3.0-alpha.24",
- "@storybook/client-logger": "6.3.0-alpha.24",
- "@storybook/components": "6.3.0-alpha.24",
- "@storybook/core-events": "6.3.0-alpha.24",
- "@storybook/theming": "6.3.0-alpha.24",
+ "@storybook/addons": "6.3.0-alpha.29",
+ "@storybook/api": "6.3.0-alpha.29",
+ "@storybook/channels": "6.3.0-alpha.29",
+ "@storybook/client-api": "6.3.0-alpha.29",
+ "@storybook/client-logger": "6.3.0-alpha.29",
+ "@storybook/components": "6.3.0-alpha.29",
+ "@storybook/core-events": "6.3.0-alpha.29",
+ "@storybook/theming": "6.3.0-alpha.29",
"axe-core": "^4.2.0",
"core-js": "^3.8.2",
"global": "^4.4.0",
@@ -81,7 +81,8 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "a8870128bc9684f9b54083decbd10664bf26bcc4",
+ "gitHead": "db7aa5aecbcbbfdd5d6956bc88774dbfecf73217",
+ "sbmodern": "dist/modern/index.js",
"storybook": {
"displayName": "Accessibility",
"icon": "https://user-images.githubusercontent.com/263385/101991665-47042f80-3c7c-11eb-8f00-64b5a18f498a.png",
diff --git a/addons/a11y/preset.js b/addons/a11y/preset.js
index 29e86f73f46..fc6884de55c 100644
--- a/addons/a11y/preset.js
+++ b/addons/a11y/preset.js
@@ -1,4 +1,3 @@
-/* eslint-disable no-param-reassign */
function managerEntries(entry = []) {
return [...entry, require.resolve('./dist/esm/register')];
}
@@ -11,17 +10,4 @@ function config(entry = []) {
];
}
-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 };
+module.exports = { managerEntries, config };
diff --git a/addons/actions/package.json b/addons/actions/package.json
index 28345e60b99..a16a0d11458 100644
--- a/addons/actions/package.json
+++ b/addons/actions/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-actions",
- "version": "6.3.0-alpha.24",
+ "version": "6.3.0-alpha.29",
"description": "Get UI feedback when an action is performed on an interactive element",
"keywords": [
"storybook",
@@ -41,12 +41,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "6.3.0-alpha.24",
- "@storybook/api": "6.3.0-alpha.24",
- "@storybook/client-api": "6.3.0-alpha.24",
- "@storybook/components": "6.3.0-alpha.24",
- "@storybook/core-events": "6.3.0-alpha.24",
- "@storybook/theming": "6.3.0-alpha.24",
+ "@storybook/addons": "6.3.0-alpha.29",
+ "@storybook/api": "6.3.0-alpha.29",
+ "@storybook/client-api": "6.3.0-alpha.29",
+ "@storybook/components": "6.3.0-alpha.29",
+ "@storybook/core-events": "6.3.0-alpha.29",
+ "@storybook/theming": "6.3.0-alpha.29",
"core-js": "^3.8.2",
"fast-deep-equal": "^3.1.3",
"global": "^4.4.0",
@@ -78,7 +78,8 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "a8870128bc9684f9b54083decbd10664bf26bcc4",
+ "gitHead": "db7aa5aecbcbbfdd5d6956bc88774dbfecf73217",
+ "sbmodern": "dist/modern/index.js",
"storybook": {
"displayName": "Actions",
"unsupportedFrameworks": [
diff --git a/addons/backgrounds/package.json b/addons/backgrounds/package.json
index 509360a18b5..4a21b6e085d 100644
--- a/addons/backgrounds/package.json
+++ b/addons/backgrounds/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-backgrounds",
- "version": "6.3.0-alpha.24",
+ "version": "6.3.0-alpha.29",
"description": "Switch backgrounds to view components in different settings",
"keywords": [
"addon",
@@ -45,12 +45,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "6.3.0-alpha.24",
- "@storybook/api": "6.3.0-alpha.24",
- "@storybook/client-logger": "6.3.0-alpha.24",
- "@storybook/components": "6.3.0-alpha.24",
- "@storybook/core-events": "6.3.0-alpha.24",
- "@storybook/theming": "6.3.0-alpha.24",
+ "@storybook/addons": "6.3.0-alpha.29",
+ "@storybook/api": "6.3.0-alpha.29",
+ "@storybook/client-logger": "6.3.0-alpha.29",
+ "@storybook/components": "6.3.0-alpha.29",
+ "@storybook/core-events": "6.3.0-alpha.29",
+ "@storybook/theming": "6.3.0-alpha.29",
"core-js": "^3.8.2",
"global": "^4.4.0",
"memoizerific": "^1.11.3",
@@ -76,7 +76,8 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "a8870128bc9684f9b54083decbd10664bf26bcc4",
+ "gitHead": "db7aa5aecbcbbfdd5d6956bc88774dbfecf73217",
+ "sbmodern": "dist/modern/index.js",
"storybook": {
"displayName": "Backgrounds",
"icon": "https://user-images.githubusercontent.com/263385/101991667-479cc600-3c7c-11eb-96d3-410e936252e7.png",
diff --git a/addons/controls/package.json b/addons/controls/package.json
index 7d20b4fb63e..4a6cfb88ff9 100644
--- a/addons/controls/package.json
+++ b/addons/controls/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-controls",
- "version": "6.3.0-alpha.24",
+ "version": "6.3.0-alpha.29",
"description": "Interact with component inputs dynamically in the Storybook UI",
"keywords": [
"addon",
@@ -45,12 +45,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "6.3.0-alpha.24",
- "@storybook/api": "6.3.0-alpha.24",
- "@storybook/client-api": "6.3.0-alpha.24",
- "@storybook/components": "6.3.0-alpha.24",
- "@storybook/node-logger": "6.3.0-alpha.24",
- "@storybook/theming": "6.3.0-alpha.24",
+ "@storybook/addons": "6.3.0-alpha.29",
+ "@storybook/api": "6.3.0-alpha.29",
+ "@storybook/client-api": "6.3.0-alpha.29",
+ "@storybook/components": "6.3.0-alpha.29",
+ "@storybook/node-logger": "6.3.0-alpha.29",
+ "@storybook/theming": "6.3.0-alpha.29",
"core-js": "^3.8.2",
"ts-dedent": "^2.0.0"
},
@@ -69,7 +69,7 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "a8870128bc9684f9b54083decbd10664bf26bcc4",
+ "gitHead": "db7aa5aecbcbbfdd5d6956bc88774dbfecf73217",
"storybook": {
"displayName": "Controls",
"icon": "https://user-images.githubusercontent.com/263385/101991669-479cc600-3c7c-11eb-93d9-38b67e8371f2.png",
diff --git a/addons/docs/docs/docspage.md b/addons/docs/docs/docspage.md
index 81439aafbb9..e13371da95d 100644
--- a/addons/docs/docs/docspage.md
+++ b/addons/docs/docs/docspage.md
@@ -59,15 +59,15 @@ If you're coming from the `storiesOf` format, there's [a codemod that adds it fo
## Subcomponents parameter
-Sometimes it's useful to document multiple components on the same page. For example, suppose your component library contains `List` and `ListItem` components that don't make sense without one another. `DocsPage` has the concept of a "primary" component with the [`component` parameter](#component-parameter), and can also accept one or more "subcomponents":
+Sometimes it's useful to document multiple components on the same page. For example, suppose your component library contains `Button` and `ButtonGroup` components that don't make sense without one another. `DocsPage` has the concept of a "primary" component with the [`component` parameter](#component-parameter), and can also accept one or more "subcomponents":
```js
-import { List, ListHeading, ListItem } from './List';
+import { Button, ButtonGroup } from '../ButtonGroup';
export default {
- title: 'Path/to/List',
- component: List,
- subcomponents: { ListHeading, ListItem },
+ title: 'Path/to/ButtonGroup',
+ component: ButtonGroup,
+ subcomponents: { Button },
};
```
@@ -79,7 +79,7 @@ If you want organize your documentation differently for groups of components, we
## Replacing DocsPage
-What if you don't want a `DocsPage` for your storybook, for a specific component, or even for a specific story?
+What if you don't want a `DocsPage` for your Storybook, for a specific component, or even for a specific story?
You can replace DocsPage at any level by overriding the `docs.page` parameter:
diff --git a/addons/docs/docs/media/mdx-page.png b/addons/docs/docs/media/mdx-page.png
index 195b39eefda..3ab2c5e8714 100644
Binary files a/addons/docs/docs/media/mdx-page.png and b/addons/docs/docs/media/mdx-page.png differ
diff --git a/addons/docs/package.json b/addons/docs/package.json
index 20717d760ea..833daffe64a 100644
--- a/addons/docs/package.json
+++ b/addons/docs/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-docs",
- "version": "6.3.0-alpha.24",
+ "version": "6.3.0-alpha.29",
"description": "Document component usage and properties in Markdown",
"keywords": [
"addon",
@@ -63,19 +63,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.24",
- "@storybook/api": "6.3.0-alpha.24",
- "@storybook/builder-webpack4": "6.3.0-alpha.24",
- "@storybook/client-api": "6.3.0-alpha.24",
- "@storybook/client-logger": "6.3.0-alpha.24",
- "@storybook/components": "6.3.0-alpha.24",
- "@storybook/core": "6.3.0-alpha.24",
- "@storybook/core-events": "6.3.0-alpha.24",
+ "@storybook/addons": "6.3.0-alpha.29",
+ "@storybook/api": "6.3.0-alpha.29",
+ "@storybook/builder-webpack4": "6.3.0-alpha.29",
+ "@storybook/client-api": "6.3.0-alpha.29",
+ "@storybook/client-logger": "6.3.0-alpha.29",
+ "@storybook/components": "6.3.0-alpha.29",
+ "@storybook/core": "6.3.0-alpha.29",
+ "@storybook/core-events": "6.3.0-alpha.29",
"@storybook/csf": "0.0.1",
- "@storybook/node-logger": "6.3.0-alpha.24",
- "@storybook/postinstall": "6.3.0-alpha.24",
- "@storybook/source-loader": "6.3.0-alpha.24",
- "@storybook/theming": "6.3.0-alpha.24",
+ "@storybook/node-logger": "6.3.0-alpha.29",
+ "@storybook/postinstall": "6.3.0-alpha.29",
+ "@storybook/source-loader": "6.3.0-alpha.29",
+ "@storybook/theming": "6.3.0-alpha.29",
"acorn": "^7.4.1",
"acorn-jsx": "^5.3.1",
"acorn-walk": "^7.2.0",
@@ -102,11 +102,11 @@
"@babel/core": "^7.12.10",
"@emotion/core": "^10.1.1",
"@emotion/styled": "^10.0.27",
- "@storybook/angular": "6.3.0-alpha.24",
- "@storybook/lit": "6.3.0-alpha.24",
- "@storybook/react": "6.3.0-alpha.24",
- "@storybook/vue": "6.3.0-alpha.24",
- "@storybook/web-components": "6.3.0-alpha.24",
+ "@storybook/angular": "6.3.0-alpha.29",
+ "@storybook/lit": "6.3.0-alpha.29",
+ "@storybook/react": "6.3.0-alpha.29",
+ "@storybook/vue": "6.3.0-alpha.29",
+ "@storybook/web-components": "6.3.0-alpha.29",
"@types/cross-spawn": "^6.0.2",
"@types/doctrine": "^0.0.3",
"@types/enzyme": "^3.10.8",
@@ -136,11 +136,11 @@
"zone.js": "^0.11.3"
},
"peerDependencies": {
- "@storybook/angular": "6.3.0-alpha.24",
- "@storybook/lit": "6.3.0-alpha.24",
- "@storybook/vue": "6.3.0-alpha.24",
- "@storybook/vue3": "6.3.0-alpha.24",
- "@storybook/web-components": "6.3.0-alpha.24",
+ "@storybook/angular": "6.3.0-alpha.29",
+ "@storybook/lit": "6.3.0-alpha.29",
+ "@storybook/vue": "6.3.0-alpha.29",
+ "@storybook/vue3": "6.3.0-alpha.29",
+ "@storybook/web-components": "6.3.0-alpha.29",
"lit": "^2.0.0-rc.1",
"lit-html": "^1.0.0",
"react": "^16.8.0 || ^17.0.0",
@@ -194,7 +194,8 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "a8870128bc9684f9b54083decbd10664bf26bcc4",
+ "gitHead": "db7aa5aecbcbbfdd5d6956bc88774dbfecf73217",
+ "sbmodern": "dist/modern/index.js",
"storybook": {
"displayName": "Docs",
"icon": "https://user-images.githubusercontent.com/263385/101991672-48355c80-3c7c-11eb-82d9-95fa12438f64.png",
diff --git a/addons/docs/src/frameworks/angular/preset.ts b/addons/docs/src/frameworks/angular/preset.ts
index 919a2f44775..b43999f7258 100644
--- a/addons/docs/src/frameworks/angular/preset.ts
+++ b/addons/docs/src/frameworks/angular/preset.ts
@@ -16,7 +16,7 @@ function makeAngularElementRendererOptional(): Plugin[] {
) {
return [];
}
- return [new IgnorePlugin(/@storybook(\\|\/)angular(\\|\/)element-renderer/)];
+ return [new IgnorePlugin({ resourceRegExp: /@storybook(\\|\/)angular(\\|\/)element-renderer/ })];
}
function moduleIsAvailable(moduleName: string): boolean {
diff --git a/addons/essentials/package.json b/addons/essentials/package.json
index 37d64400000..18717be415b 100644
--- a/addons/essentials/package.json
+++ b/addons/essentials/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-essentials",
- "version": "6.3.0-alpha.24",
+ "version": "6.3.0-alpha.29",
"description": "Curated addons to bring out the best of Storybook",
"keywords": [
"addon",
@@ -39,29 +39,29 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addon-actions": "6.3.0-alpha.24",
- "@storybook/addon-backgrounds": "6.3.0-alpha.24",
- "@storybook/addon-controls": "6.3.0-alpha.24",
- "@storybook/addon-docs": "6.3.0-alpha.24",
- "@storybook/addon-toolbars": "6.3.0-alpha.24",
- "@storybook/addon-viewport": "6.3.0-alpha.24",
- "@storybook/addons": "6.3.0-alpha.24",
- "@storybook/api": "6.3.0-alpha.24",
- "@storybook/node-logger": "6.3.0-alpha.24",
+ "@storybook/addon-actions": "6.3.0-alpha.29",
+ "@storybook/addon-backgrounds": "6.3.0-alpha.29",
+ "@storybook/addon-controls": "6.3.0-alpha.29",
+ "@storybook/addon-docs": "6.3.0-alpha.29",
+ "@storybook/addon-toolbars": "6.3.0-alpha.29",
+ "@storybook/addon-viewport": "6.3.0-alpha.29",
+ "@storybook/addons": "6.3.0-alpha.29",
+ "@storybook/api": "6.3.0-alpha.29",
+ "@storybook/node-logger": "6.3.0-alpha.29",
"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.24",
+ "@storybook/vue": "6.3.0-alpha.29",
"@types/jest": "^26.0.16",
"@types/webpack-env": "^1.16.0"
},
"peerDependencies": {
"@babel/core": "^7.9.6",
- "@storybook/vue": "6.3.0-alpha.24",
- "@storybook/web-components": "6.3.0-alpha.24",
+ "@storybook/vue": "6.3.0-alpha.29",
+ "@storybook/web-components": "6.3.0-alpha.29",
"babel-loader": "^8.0.0",
"lit-html": "^1.0.0",
"react": "^16.8.0 || ^17.0.0",
@@ -91,5 +91,6 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "a8870128bc9684f9b54083decbd10664bf26bcc4"
+ "gitHead": "db7aa5aecbcbbfdd5d6956bc88774dbfecf73217",
+ "sbmodern": "dist/modern/index.js"
}
diff --git a/addons/jest/package.json b/addons/jest/package.json
index ccf1dfb755e..5c9d3397f17 100644
--- a/addons/jest/package.json
+++ b/addons/jest/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-jest",
- "version": "6.3.0-alpha.24",
+ "version": "6.3.0-alpha.29",
"description": "React storybook addon that show component jest report",
"keywords": [
"addon",
@@ -47,11 +47,11 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "6.3.0-alpha.24",
- "@storybook/api": "6.3.0-alpha.24",
- "@storybook/components": "6.3.0-alpha.24",
- "@storybook/core-events": "6.3.0-alpha.24",
- "@storybook/theming": "6.3.0-alpha.24",
+ "@storybook/addons": "6.3.0-alpha.29",
+ "@storybook/api": "6.3.0-alpha.29",
+ "@storybook/components": "6.3.0-alpha.29",
+ "@storybook/core-events": "6.3.0-alpha.29",
+ "@storybook/theming": "6.3.0-alpha.29",
"core-js": "^3.8.2",
"global": "^4.4.0",
"react-sizeme": "^3.0.1",
@@ -76,7 +76,8 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "a8870128bc9684f9b54083decbd10664bf26bcc4",
+ "gitHead": "db7aa5aecbcbbfdd5d6956bc88774dbfecf73217",
+ "sbmodern": "dist/modern/index.js",
"storybook": {
"displayName": "Jest",
"icon": "https://pbs.twimg.com/profile_images/821713465245102080/mMtKIMax_400x400.jpg",
diff --git a/addons/links/package.json b/addons/links/package.json
index 9106d2dcb12..b19edb5731e 100644
--- a/addons/links/package.json
+++ b/addons/links/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-links",
- "version": "6.3.0-alpha.24",
+ "version": "6.3.0-alpha.29",
"description": "Link stories together to build demos and prototypes with your UI components",
"keywords": [
"addon",
@@ -41,11 +41,11 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "6.3.0-alpha.24",
- "@storybook/client-logger": "6.3.0-alpha.24",
- "@storybook/core-events": "6.3.0-alpha.24",
+ "@storybook/addons": "6.3.0-alpha.29",
+ "@storybook/client-logger": "6.3.0-alpha.29",
+ "@storybook/core-events": "6.3.0-alpha.29",
"@storybook/csf": "0.0.1",
- "@storybook/router": "6.3.0-alpha.24",
+ "@storybook/router": "6.3.0-alpha.29",
"@types/qs": "^6.9.5",
"core-js": "^3.8.2",
"global": "^4.4.0",
@@ -72,7 +72,8 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "a8870128bc9684f9b54083decbd10664bf26bcc4",
+ "gitHead": "db7aa5aecbcbbfdd5d6956bc88774dbfecf73217",
+ "sbmodern": "dist/modern/index.js",
"storybook": {
"displayName": "Links",
"icon": "https://user-images.githubusercontent.com/263385/101991673-48355c80-3c7c-11eb-9b6e-b627c96a75f6.png",
diff --git a/addons/storyshots/storyshots-core/package.json b/addons/storyshots/storyshots-core/package.json
index f7ab57db47a..09e560f7ae0 100644
--- 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.24",
+ "version": "6.3.0-alpha.29",
"description": "Take a code snapshot of every story automatically with Jest",
"keywords": [
"addon",
@@ -45,10 +45,10 @@
},
"dependencies": {
"@jest/transform": "^26.6.2",
- "@storybook/addons": "6.3.0-alpha.24",
- "@storybook/client-api": "6.3.0-alpha.24",
- "@storybook/core": "6.3.0-alpha.24",
- "@storybook/core-common": "6.3.0-alpha.24",
+ "@storybook/addons": "6.3.0-alpha.29",
+ "@storybook/client-api": "6.3.0-alpha.29",
+ "@storybook/core": "6.3.0-alpha.29",
+ "@storybook/core-common": "6.3.0-alpha.29",
"@types/glob": "^7.1.3",
"@types/jest": "^26.0.16",
"@types/jest-specific-snapshot": "^0.5.3",
@@ -67,11 +67,11 @@
"devDependencies": {
"@angular/core": "^11.2.0",
"@angular/platform-browser-dynamic": "^11.2.0",
- "@storybook/addon-docs": "6.3.0-alpha.24",
- "@storybook/angular": "6.3.0-alpha.24",
- "@storybook/react": "6.3.0-alpha.24",
- "@storybook/vue": "6.3.0-alpha.24",
- "@storybook/vue3": "6.3.0-alpha.24",
+ "@storybook/addon-docs": "6.3.0-alpha.29",
+ "@storybook/angular": "6.3.0-alpha.29",
+ "@storybook/react": "6.3.0-alpha.29",
+ "@storybook/vue": "6.3.0-alpha.29",
+ "@storybook/vue3": "6.3.0-alpha.29",
"babel-loader": "^8.2.2",
"enzyme": "^3.11.0",
"enzyme-to-json": "^3.6.1",
@@ -108,6 +108,9 @@
"@storybook/angular": {
"optional": true
},
+ "@storybook/react": {
+ "optional": true
+ },
"@storybook/vue": {
"optional": true
},
@@ -145,7 +148,7 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "a8870128bc9684f9b54083decbd10664bf26bcc4",
+ "gitHead": "db7aa5aecbcbbfdd5d6956bc88774dbfecf73217",
"storybook": {
"displayName": "Storyshots",
"icon": "https://user-images.githubusercontent.com/263385/101991676-48cdf300-3c7c-11eb-8aa1-944dab6ab29b.png",
diff --git a/addons/storyshots/storyshots-puppeteer/package.json b/addons/storyshots/storyshots-puppeteer/package.json
index 864c061b8d4..ce9e52cb5d2 100644
--- 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.24",
+ "version": "6.3.0-alpha.29",
"description": "Image snapshots addition to StoryShots based on puppeteer",
"keywords": [
"addon",
@@ -41,7 +41,7 @@
},
"dependencies": {
"@storybook/csf": "0.0.1",
- "@storybook/node-logger": "6.3.0-alpha.24",
+ "@storybook/node-logger": "6.3.0-alpha.29",
"@types/jest-image-snapshot": "^4.1.3",
"@wordpress/jest-puppeteer-axe": "^3.0.3",
"core-js": "^3.8.2",
@@ -53,7 +53,7 @@
"@types/puppeteer": "^5.4.0"
},
"peerDependencies": {
- "@storybook/addon-storyshots": "6.3.0-alpha.24",
+ "@storybook/addon-storyshots": "6.3.0-alpha.29",
"puppeteer": "^2.0.0 || ^3.0.0"
},
"peerDependenciesMeta": {
@@ -64,5 +64,5 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "a8870128bc9684f9b54083decbd10664bf26bcc4"
+ "gitHead": "db7aa5aecbcbbfdd5d6956bc88774dbfecf73217"
}
diff --git a/addons/storysource/package.json b/addons/storysource/package.json
index e0434128b4e..73844573ce4 100644
--- a/addons/storysource/package.json
+++ b/addons/storysource/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-storysource",
- "version": "6.3.0-alpha.24",
+ "version": "6.3.0-alpha.29",
"description": "View a story’s source code to see how it works and paste into your app",
"keywords": [
"addon",
@@ -41,13 +41,13 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "6.3.0-alpha.24",
- "@storybook/api": "6.3.0-alpha.24",
- "@storybook/client-logger": "6.3.0-alpha.24",
- "@storybook/components": "6.3.0-alpha.24",
- "@storybook/router": "6.3.0-alpha.24",
- "@storybook/source-loader": "6.3.0-alpha.24",
- "@storybook/theming": "6.3.0-alpha.24",
+ "@storybook/addons": "6.3.0-alpha.29",
+ "@storybook/api": "6.3.0-alpha.29",
+ "@storybook/client-logger": "6.3.0-alpha.29",
+ "@storybook/components": "6.3.0-alpha.29",
+ "@storybook/router": "6.3.0-alpha.29",
+ "@storybook/source-loader": "6.3.0-alpha.29",
+ "@storybook/theming": "6.3.0-alpha.29",
"core-js": "^3.8.2",
"estraverse": "^5.2.0",
"loader-utils": "^2.0.0",
@@ -75,7 +75,8 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "a8870128bc9684f9b54083decbd10664bf26bcc4",
+ "gitHead": "db7aa5aecbcbbfdd5d6956bc88774dbfecf73217",
+ "sbmodern": "dist/modern/index.js",
"storybook": {
"displayName": "Storysource",
"icon": "https://user-images.githubusercontent.com/263385/101991675-48cdf300-3c7c-11eb-9400-58de5ac6daa7.png",
diff --git a/addons/toolbars/package.json b/addons/toolbars/package.json
index d0456d8c167..104eab27450 100644
--- a/addons/toolbars/package.json
+++ b/addons/toolbars/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-toolbars",
- "version": "6.3.0-alpha.24",
+ "version": "6.3.0-alpha.29",
"description": "Create your own toolbar items that control story rendering",
"keywords": [
"addon",
@@ -45,10 +45,10 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "6.3.0-alpha.24",
- "@storybook/api": "6.3.0-alpha.24",
- "@storybook/client-api": "6.3.0-alpha.24",
- "@storybook/components": "6.3.0-alpha.24",
+ "@storybook/addons": "6.3.0-alpha.29",
+ "@storybook/api": "6.3.0-alpha.29",
+ "@storybook/client-api": "6.3.0-alpha.29",
+ "@storybook/components": "6.3.0-alpha.29",
"core-js": "^3.8.2"
},
"peerDependencies": {
@@ -66,7 +66,7 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "a8870128bc9684f9b54083decbd10664bf26bcc4",
+ "gitHead": "db7aa5aecbcbbfdd5d6956bc88774dbfecf73217",
"storybook": {
"displayName": "Toolbars",
"icon": "https://user-images.githubusercontent.com/263385/101991677-48cdf300-3c7c-11eb-93b4-19b0e3366959.png",
diff --git a/addons/viewport/package.json b/addons/viewport/package.json
index c7ee6b33aff..23011f24b3f 100644
--- a/addons/viewport/package.json
+++ b/addons/viewport/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-viewport",
- "version": "6.3.0-alpha.24",
+ "version": "6.3.0-alpha.29",
"description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
"keywords": [
"addon",
@@ -42,12 +42,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "6.3.0-alpha.24",
- "@storybook/api": "6.3.0-alpha.24",
- "@storybook/client-logger": "6.3.0-alpha.24",
- "@storybook/components": "6.3.0-alpha.24",
- "@storybook/core-events": "6.3.0-alpha.24",
- "@storybook/theming": "6.3.0-alpha.24",
+ "@storybook/addons": "6.3.0-alpha.29",
+ "@storybook/api": "6.3.0-alpha.29",
+ "@storybook/client-logger": "6.3.0-alpha.29",
+ "@storybook/components": "6.3.0-alpha.29",
+ "@storybook/core-events": "6.3.0-alpha.29",
+ "@storybook/theming": "6.3.0-alpha.29",
"core-js": "^3.8.2",
"global": "^4.4.0",
"memoizerific": "^1.11.3",
@@ -69,7 +69,7 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "a8870128bc9684f9b54083decbd10664bf26bcc4",
+ "gitHead": "db7aa5aecbcbbfdd5d6956bc88774dbfecf73217",
"storybook": {
"displayName": "Viewport",
"icon": "https://user-images.githubusercontent.com/263385/101991678-48cdf300-3c7c-11eb-9764-f8af293c1b28.png",
diff --git a/app/angular/package.json b/app/angular/package.json
index 99ec9c4eb3f..a6ad143060e 100644
--- a/app/angular/package.json
+++ b/app/angular/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/angular",
- "version": "6.3.0-alpha.24",
+ "version": "6.3.0-alpha.29",
"description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.",
"keywords": [
"storybook"
@@ -45,11 +45,11 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "6.3.0-alpha.24",
- "@storybook/api": "6.3.0-alpha.24",
- "@storybook/core": "6.3.0-alpha.24",
- "@storybook/core-common": "6.3.0-alpha.24",
- "@storybook/node-logger": "6.3.0-alpha.24",
+ "@storybook/addons": "6.3.0-alpha.29",
+ "@storybook/api": "6.3.0-alpha.29",
+ "@storybook/core": "6.3.0-alpha.29",
+ "@storybook/core-common": "6.3.0-alpha.29",
+ "@storybook/node-logger": "6.3.0-alpha.29",
"@types/webpack-env": "^1.16.0",
"autoprefixer": "^9.8.6",
"core-js": "^3.8.2",
@@ -124,5 +124,5 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "a8870128bc9684f9b54083decbd10664bf26bcc4"
+ "gitHead": "db7aa5aecbcbbfdd5d6956bc88774dbfecf73217"
}
diff --git a/app/ember/package.json b/app/ember/package.json
index 1c816dfbcf4..b88ec4f35e3 100644
--- a/app/ember/package.json
+++ b/app/ember/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/ember",
- "version": "6.3.0-alpha.24",
+ "version": "6.3.0-alpha.29",
"description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
"homepage": "https://github.com/storybookjs/storybook/tree/master/app/ember",
"bugs": {
@@ -43,8 +43,8 @@
},
"dependencies": {
"@ember/test-helpers": "^2.1.4",
- "@storybook/core": "6.3.0-alpha.24",
- "@storybook/core-common": "6.3.0-alpha.24",
+ "@storybook/core": "6.3.0-alpha.29",
+ "@storybook/core-common": "6.3.0-alpha.29",
"core-js": "^3.8.2",
"global": "^4.4.0",
"react": "16.14.0",
@@ -65,5 +65,5 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "a8870128bc9684f9b54083decbd10664bf26bcc4"
+ "gitHead": "db7aa5aecbcbbfdd5d6956bc88774dbfecf73217"
}
diff --git a/app/html/package.json b/app/html/package.json
index dd186556374..a3500ac9193 100644
--- a/app/html/package.json
+++ b/app/html/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/html",
- "version": "6.3.0-alpha.24",
+ "version": "6.3.0-alpha.29",
"description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
"keywords": [
"storybook"
@@ -45,10 +45,10 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "6.3.0-alpha.24",
- "@storybook/client-api": "6.3.0-alpha.24",
- "@storybook/core": "6.3.0-alpha.24",
- "@storybook/core-common": "6.3.0-alpha.24",
+ "@storybook/addons": "6.3.0-alpha.29",
+ "@storybook/client-api": "6.3.0-alpha.29",
+ "@storybook/core": "6.3.0-alpha.29",
+ "@storybook/core-common": "6.3.0-alpha.29",
"@types/webpack-env": "^1.16.0",
"core-js": "^3.8.2",
"global": "^4.4.0",
@@ -68,5 +68,5 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "a8870128bc9684f9b54083decbd10664bf26bcc4"
+ "gitHead": "db7aa5aecbcbbfdd5d6956bc88774dbfecf73217"
}
diff --git a/app/lit/package.json b/app/lit/package.json
index 70ec26b3c98..cd9fb77040d 100644
--- a/app/lit/package.json
+++ b/app/lit/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/lit",
- "version": "6.3.0-alpha.24",
+ "version": "6.3.0-alpha.29",
"description": "Storybook for lit: View web components snippets in isolation with Hot Reloading.",
"keywords": [
"lit",
@@ -45,10 +45,10 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "6.3.0-alpha.24",
- "@storybook/client-api": "6.3.0-alpha.24",
- "@storybook/core": "6.3.0-alpha.24",
- "@storybook/core-common": "6.3.0-alpha.24",
+ "@storybook/addons": "6.3.0-alpha.29",
+ "@storybook/client-api": "6.3.0-alpha.29",
+ "@storybook/core": "6.3.0-alpha.29",
+ "@storybook/core-common": "6.3.0-alpha.29",
"@types/webpack-env": "^1.16.0",
"core-js": "^3.8.2",
"global": "^4.4.0",
@@ -70,5 +70,5 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "a8870128bc9684f9b54083decbd10664bf26bcc4"
+ "gitHead": "db7aa5aecbcbbfdd5d6956bc88774dbfecf73217"
}
diff --git a/app/preact/package.json b/app/preact/package.json
index c77ee4e60e9..f53c66160b3 100644
--- a/app/preact/package.json
+++ b/app/preact/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/preact",
- "version": "6.3.0-alpha.24",
+ "version": "6.3.0-alpha.29",
"description": "Storybook for Preact: Develop Preact Component in isolation.",
"keywords": [
"storybook"
@@ -46,9 +46,9 @@
},
"dependencies": {
"@babel/plugin-transform-react-jsx": "^7.12.12",
- "@storybook/addons": "6.3.0-alpha.24",
- "@storybook/core": "6.3.0-alpha.24",
- "@storybook/core-common": "6.3.0-alpha.24",
+ "@storybook/addons": "6.3.0-alpha.29",
+ "@storybook/core": "6.3.0-alpha.29",
+ "@storybook/core-common": "6.3.0-alpha.29",
"@types/webpack-env": "^1.16.0",
"core-js": "^3.8.2",
"global": "^4.4.0",
@@ -72,5 +72,5 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "a8870128bc9684f9b54083decbd10664bf26bcc4"
+ "gitHead": "db7aa5aecbcbbfdd5d6956bc88774dbfecf73217"
}
diff --git a/app/react/package.json b/app/react/package.json
index 15a72faecb8..870c5e6b4dc 100644
--- a/app/react/package.json
+++ b/app/react/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/react",
- "version": "6.3.0-alpha.24",
+ "version": "6.3.0-alpha.29",
"description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
@@ -49,10 +49,10 @@
"@babel/preset-flow": "^7.12.1",
"@babel/preset-react": "^7.12.10",
"@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
- "@storybook/addons": "6.3.0-alpha.24",
- "@storybook/core": "6.3.0-alpha.24",
- "@storybook/core-common": "6.3.0-alpha.24",
- "@storybook/node-logger": "6.3.0-alpha.24",
+ "@storybook/addons": "6.3.0-alpha.29",
+ "@storybook/core": "6.3.0-alpha.29",
+ "@storybook/core-common": "6.3.0-alpha.29",
+ "@storybook/node-logger": "6.3.0-alpha.29",
"@storybook/semver": "^7.3.2",
"@types/webpack-env": "^1.16.0",
"babel-plugin-add-react-displayname": "^0.0.5",
@@ -71,7 +71,7 @@
"webpack": "4"
},
"devDependencies": {
- "@storybook/client-api": "6.3.0-alpha.24",
+ "@storybook/client-api": "6.3.0-alpha.29",
"@types/node": "^14.14.20",
"@types/prompts": "^2.0.9"
},
@@ -94,5 +94,5 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "a8870128bc9684f9b54083decbd10664bf26bcc4"
+ "gitHead": "db7aa5aecbcbbfdd5d6956bc88774dbfecf73217"
}
diff --git a/app/server/package.json b/app/server/package.json
index 3fb1518a024..3143bda161e 100644
--- a/app/server/package.json
+++ b/app/server/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/server",
- "version": "6.3.0-alpha.24",
+ "version": "6.3.0-alpha.29",
"description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
"keywords": [
"storybook"
@@ -45,12 +45,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "6.3.0-alpha.24",
- "@storybook/api": "6.3.0-alpha.24",
- "@storybook/client-api": "6.3.0-alpha.24",
- "@storybook/core": "6.3.0-alpha.24",
- "@storybook/core-common": "6.3.0-alpha.24",
- "@storybook/node-logger": "6.3.0-alpha.24",
+ "@storybook/addons": "6.3.0-alpha.29",
+ "@storybook/api": "6.3.0-alpha.29",
+ "@storybook/client-api": "6.3.0-alpha.29",
+ "@storybook/core": "6.3.0-alpha.29",
+ "@storybook/core-common": "6.3.0-alpha.29",
+ "@storybook/node-logger": "6.3.0-alpha.29",
"@types/webpack-env": "^1.16.0",
"core-js": "^3.8.2",
"global": "^4.4.0",
@@ -70,5 +70,5 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "a8870128bc9684f9b54083decbd10664bf26bcc4"
+ "gitHead": "db7aa5aecbcbbfdd5d6956bc88774dbfecf73217"
}
diff --git a/app/svelte/package.json b/app/svelte/package.json
index 8cef039c81b..3e1a18f44f0 100644
--- a/app/svelte/package.json
+++ b/app/svelte/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/svelte",
- "version": "6.3.0-alpha.24",
+ "version": "6.3.0-alpha.29",
"description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
@@ -45,9 +45,9 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "6.3.0-alpha.24",
- "@storybook/core": "6.3.0-alpha.24",
- "@storybook/core-common": "6.3.0-alpha.24",
+ "@storybook/addons": "6.3.0-alpha.29",
+ "@storybook/core": "6.3.0-alpha.29",
+ "@storybook/core-common": "6.3.0-alpha.29",
"core-js": "^3.8.2",
"global": "^4.4.0",
"react": "16.14.0",
@@ -73,5 +73,5 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "a8870128bc9684f9b54083decbd10664bf26bcc4"
+ "gitHead": "db7aa5aecbcbbfdd5d6956bc88774dbfecf73217"
}
diff --git a/app/vue/package.json b/app/vue/package.json
index 3a6a5adbb82..5d9ecdbd768 100644
--- a/app/vue/package.json
+++ b/app/vue/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/vue",
- "version": "6.3.0-alpha.24",
+ "version": "6.3.0-alpha.29",
"description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
@@ -45,9 +45,9 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "6.3.0-alpha.24",
- "@storybook/core": "6.3.0-alpha.24",
- "@storybook/core-common": "6.3.0-alpha.24",
+ "@storybook/addons": "6.3.0-alpha.29",
+ "@storybook/core": "6.3.0-alpha.29",
+ "@storybook/core-common": "6.3.0-alpha.29",
"@types/webpack-env": "^1.16.0",
"core-js": "^3.8.2",
"global": "^4.4.0",
@@ -81,5 +81,5 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "a8870128bc9684f9b54083decbd10664bf26bcc4"
+ "gitHead": "db7aa5aecbcbbfdd5d6956bc88774dbfecf73217"
}
diff --git a/app/vue3/package.json b/app/vue3/package.json
index f2dee988d7b..69d66dea3a5 100644
--- a/app/vue3/package.json
+++ b/app/vue3/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/vue3",
- "version": "6.3.0-alpha.24",
+ "version": "6.3.0-alpha.29",
"description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.",
"keywords": [
"storybook"
@@ -45,9 +45,9 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "6.3.0-alpha.24",
- "@storybook/core": "6.3.0-alpha.24",
- "@storybook/core-common": "6.3.0-alpha.24",
+ "@storybook/addons": "6.3.0-alpha.29",
+ "@storybook/core": "6.3.0-alpha.29",
+ "@storybook/core-common": "6.3.0-alpha.29",
"@types/webpack-env": "^1.16.0",
"core-js": "^3.8.2",
"global": "^4.4.0",
@@ -80,5 +80,5 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "a8870128bc9684f9b54083decbd10664bf26bcc4"
+ "gitHead": "db7aa5aecbcbbfdd5d6956bc88774dbfecf73217"
}
diff --git a/app/web-components/package.json b/app/web-components/package.json
index 72f7b6d65a2..d43964615de 100644
--- a/app/web-components/package.json
+++ b/app/web-components/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/web-components",
- "version": "6.3.0-alpha.24",
+ "version": "6.3.0-alpha.29",
"description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.",
"keywords": [
"lit-html",
@@ -50,10 +50,10 @@
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-syntax-import-meta": "^7.10.4",
"@babel/preset-env": "^7.12.11",
- "@storybook/addons": "6.3.0-alpha.24",
- "@storybook/client-api": "6.3.0-alpha.24",
- "@storybook/core": "6.3.0-alpha.24",
- "@storybook/core-common": "6.3.0-alpha.24",
+ "@storybook/addons": "6.3.0-alpha.29",
+ "@storybook/client-api": "6.3.0-alpha.29",
+ "@storybook/core": "6.3.0-alpha.29",
+ "@storybook/core-common": "6.3.0-alpha.29",
"@types/webpack-env": "^1.16.0",
"babel-plugin-bundled-import-meta": "^0.3.1",
"core-js": "^3.8.2",
@@ -78,5 +78,5 @@
"publishConfig": {
"access": "public"
},
- "gitHead": "a8870128bc9684f9b54083decbd10664bf26bcc4"
+ "gitHead": "db7aa5aecbcbbfdd5d6956bc88774dbfecf73217"
}
diff --git a/cypress/generated/addon-controls.spec.ts b/cypress/generated/addon-controls.spec.ts
new file mode 100644
index 00000000000..6f4665c6a8c
--- /dev/null
+++ b/cypress/generated/addon-controls.spec.ts
@@ -0,0 +1,49 @@
+describe('addon-controls', () => {
+ it('should change component when changing controls', () => {
+ cy.visitStorybook();
+
+ cy.navigateToStory('example-button', 'Primary');
+
+ cy.viewAddonPanel('Controls');
+
+ // Text input: Label
+ cy.getStoryElement().find('button').should('contain.text', 'Button');
+ cy.get('#label').clear().type('Hello world');
+ cy.getStoryElement().find('button').should('contain.text', 'Hello world');
+
+ // Args in URL
+ cy.url().should('include', 'args=label:Hello+world');
+
+ // Boolean toggle: Primary/secondary
+ cy.getStoryElement().find('button').should('have.css', 'background-color', 'rgb(30, 167, 253)');
+ cy.get('#primary').click();
+ cy.getStoryElement().find('button').should('have.css', 'background-color', 'rgba(0, 0, 0, 0)');
+
+ // Color picker: Background color
+ cy.get('input[placeholder="Choose color"]').type('red');
+ cy.getStoryElement().find('button').should('have.css', 'background-color', 'rgb(255, 0, 0)');
+
+ // TODO: enable this once the controls for size are aligned in all CLI templates.
+ // Radio buttons: Size
+ // cy.getStoryElement().find('button').should('have.css', 'font-size', '14px');
+ // cy.get('label[for="size-large"]').click();
+ // cy.getStoryElement().find('button').should('have.css', 'font-size', '16px');
+
+ // Reset controls: assert that the component is back to original state
+ cy.get('button[title="Reset controls"]').click();
+ cy.getStoryElement().find('button').should('have.css', 'font-size', '14px');
+ cy.getStoryElement().find('button').should('have.css', 'background-color', 'rgb(30, 167, 253)');
+ cy.getStoryElement().find('button').should('contain.text', 'Button');
+ });
+
+ it('should apply controls automatically when passed via url', () => {
+ cy.visit('/', {
+ qs: {
+ path: '/story/example-button--primary',
+ args: 'label:Hello world',
+ },
+ });
+
+ cy.getStoryElement().find('button').should('contain.text', 'Hello world');
+ });
+});
diff --git a/docs/addons/writing-addons.md b/docs/addons/writing-addons.md
index 17647e8d1bb..45223d34e1e 100644
--- a/docs/addons/writing-addons.md
+++ b/docs/addons/writing-addons.md
@@ -6,7 +6,7 @@ One of Storybook's main features is its robust addon ecosystem. Use addons to en
## What we're building
-For this example we're going to build a bare-bones addon which:
+For this example, we're going to build a bare-bones addon which:
- Adds a new panel in Storybook.
- Retrieves a custom parameter from the stories.
@@ -27,9 +27,9 @@ We recommend a common addon file and directory structure for consistency.
### Get started
-Open a new terminal and create a new directory called `my-addon`. Inside it run `npm init` to initialize a new node project. For your project's name choose `my-addon` and for entry point `dist/preset.js`.
+Open a new terminal and create a new directory called `my-addon`. Inside it, run `npm init` to initialize a new node project. For your project's name, choose `my-addon` and for entry point `dist/preset.js`.
-Once you've gone through the prompts your `package.json` should look like:
+Once you've gone through the prompts, your `package.json` should look like:
```json
{
@@ -57,7 +57,7 @@ npx sb init
```
-Initializing Storybook adds the building blocks for our addon. If you're building a standalone Storybook addon, set the React and Storybook packages as peer dependencies. This prevents the addon from breaking Storybook when there are different versions available.
+💡 Initializing Storybook adds the building blocks for our addon. If you're building a standalone Storybook addon, set the React and Storybook packages as peer dependencies. It prevents the addon from breaking Storybook when there are different versions available.
Next, create a `.babelrc.js` file in the root directory with the following:
@@ -87,7 +87,7 @@ Change your `package.json` and add the following script to build the addon:
```
-Running yarn build at this stage will output the code into the dist directory, transpiled into a ES5 module ready to be installed into any Storybook.
+💡 Running yarn build at this stage will output the code into the dist directory, transpiled into a ES5 module ready to be installed into any Storybook.
Finally, create a new directory called `src` and inside a new file called `preset.js` with the following:
@@ -108,7 +108,7 @@ Presets are the way addons hook into Storybook. Among other tasks they allow you
- Add to the [preview iframe](./writing-presets.md#preview-entries)
- Modify [babel](./writing-presets.md#babel) and [webpack settings](./writing-presets.md#webpack)
-For this example, we'll just modify Storybook's UI.
+For this example, we'll modify Storybook's UI.
### Add a panel
@@ -125,7 +125,7 @@ Now let’s add a panel to Storybook. Inside the `src` directory, create a new f
-Make sure to include the key when you register the addon. This will prevent any issues when the addon renders.
+💡 Make sure to include the key when you register the addon. It will prevent any issues when the addon renders.
Going over the code snippet in more detail. When Storybook starts up:
@@ -149,7 +149,7 @@ Finally, let’s hook it all up. Change `.storybook/main.js` to the following:
-When you register a Storybook addon, it will look for either register.js or preset.js as the entry points.
+💡 When you register a Storybook addon, it will look for either register.js or preset.js as the entry points.
Run `yarn storybook` and you should see something similar to:
@@ -172,11 +172,11 @@ Next, let’s replace the `MyPanel` component from above to show the parameter.
The new version is made smarter by [`useParameter`](./addons-api.md#useparameter), which is a [React hook](https://reactjs.org/docs/hooks-intro.html) that updates the parameter value and re-renders the panel every time the story changes.
-The [addon API](./addons-api.md) provides hooks like this so all of that communication can happen behind the scenes. That means you can focus on your addon's functionality.
+The [addon API](./addons-api.md) provides hooks like this, so all of that communication can happen behind the scenes. That means you can focus on your addon's functionality.
### Using the addon with a story
-When Storybook was initialized it provided a small set of examples stories. Change your `Button.stories.js` to the following:
+When Storybook was initialized, it provided a small set of example stories. Change your `Button.stories.js` to the following:
@@ -203,7 +203,7 @@ After applying the changes to the story, the Storybook UI will show the followin
### Root level preset.js
-Before publishing the addon, we'll need to make one final change. In the root directory of the addon create a new file called `preset.js` and add the following:
+Before publishing the addon, we'll need to make one last change. In the root directory of the addon, create a new file called `preset.js` and add the following:
@@ -219,7 +219,7 @@ This auto-registers the addon without any additional configuration from the user
### Packaging and publishing
-Now that you've seen how to create a bare-bones addon, let's see how to share it with the community. Before we begin, make sure your addon meets the following requirements:
+Now that you've seen how to create a bare-bones addon let's see how to share it with the community. Before we begin, make sure your addon meets the following requirements:
- `package.json` file with metadata about the addon
- Peer dependencies of `react` and `@storybook/addons`
@@ -235,12 +235,10 @@ Learn how to [add to the addon catalog](./addon-catalog.md).
### More guides and tutorials
-In the previous example, we introduced the structure of an addon, but barely scratched the surface of what addons can do.
+In the previous example, we introduced the structure of an addon but barely scratched the surface of what addons can do.
-To dive deeper we recommend Storybook's [creating an addon](https://storybook.js.org/tutorials/create-an-addon/) tutorial. It’s an excellent walkthrough that covers the same ground as the above introduction, but goes further and leads you through the full process of creating a realistic addon.
-
-[How to build a Storybook addon](https://www.chromatic.com/blog/how-to-build-a-storybook-addon/) shows you how to create a standalone addon in great detail.
+To dive deeper, we recommend Storybook's [creating an addon](https://storybook.js.org/tutorials/create-an-addon/) tutorial. It’s an excellent walkthrough covering the same ground as the above introduction but goes further and leads you through the entire process of creating a realistic addon.
### Addon kit
-To help you jumpstart the addon development, the Storybook maintainers created an [`addon-kit`](https://github.com/storybookjs/addon-kit), use it to bootstrap your next addon.
+To help you jumpstart the addon development, the Storybook maintainers created an [`addon-kit`](https://github.com/storybookjs/addon-kit), use it to bootstrap your next addon.
\ No newline at end of file
diff --git a/docs/configure/features-and-behavior.md b/docs/configure/features-and-behavior.md
index b6b0596f7c5..65e9c8677d0 100644
--- a/docs/configure/features-and-behavior.md
+++ b/docs/configure/features-and-behavior.md
@@ -28,6 +28,7 @@ The following table details how to use the API values:
| **selectedPanel** | String |Id to select an addon panel |`my-panel` |
| **initialActive** | String |Select the default active tab on Mobile |`sidebar` or `canvas` or `addons` |
| **sidebar** | Object |Sidebar options, see below |`{ showRoots: false }` |
+| **toolbar** | Object |Modify the tools in the toolbar using the addon id |`{ fullscreen: { hidden: false } } }` |
The following options are configurable under the `sidebar` namespace:
@@ -36,3 +37,9 @@ The following options are configurable under the `sidebar` namespace:
| **showRoots** | Boolean |Display the top-level nodes as a "root" in the sidebar |`false` |
| **collapsedRoots** | Array |Set of root node IDs to visually collapse by default |`['misc', 'other']` |
| **renderLabel** | Function |Create a custom label for tree nodes; must return a ReactNode |`(item) => {item.name}`|
+
+The following options are configurable under the `toolbar` namespace:
+
+| Name | Type | Description | Example Value |
+| ----------------------|:-------------:|:-------------------------------------------------------------:|:----------------------------------------------:|
+| **id** | String |Toggle visibility for toolbar item |`{ hidden: false }` |
diff --git a/docs/frameworks.js b/docs/frameworks.js
index fafd60c2386..9f07c78632b 100644
--- a/docs/frameworks.js
+++ b/docs/frameworks.js
@@ -111,12 +111,12 @@ module.exports = {
},
{
name: 'Dynamic source',
- supported: ['react'],
+ supported: ['react', 'vue', 'angular', 'svelte'],
path: 'writing-docs/doc-blocks#source',
},
{
name: 'Args Table',
- supported: ['react', 'vue', 'angular', 'html', 'ember', 'web-components'],
+ supported: ['react', 'vue', 'angular', 'html', 'ember', 'web-components', 'svelte'],
path: 'writing-docs/doc-blocks#argstable',
},
{
@@ -126,7 +126,7 @@ module.exports = {
},
{
name: 'Inline stories',
- supported: ['react', 'vue', 'web-components', 'html', 'svelte'],
+ supported: ['react', 'vue', 'web-components', 'html', 'svelte', 'angular'],
path: 'writing-docs/doc-blocks#inline-rendering',
},
],
diff --git a/docs/snippets/angular/button-story-with-args.ts.mdx b/docs/snippets/angular/button-story-with-args.ts.mdx
index 835d9681307..617347af6a4 100644
--- a/docs/snippets/angular/button-story-with-args.ts.mdx
+++ b/docs/snippets/angular/button-story-with-args.ts.mdx
@@ -13,6 +13,6 @@ export const Primary = Template.bind({});
Primary.args = {
primary: true,
- label: 'Primary',
+ label: 'Button',
};
```
diff --git a/docs/snippets/common/badge-story.mdx.mdx b/docs/snippets/common/badge-story.mdx.mdx
index 9aca20b0c52..4c0f5670492 100644
--- a/docs/snippets/common/badge-story.mdx.mdx
+++ b/docs/snippets/common/badge-story.mdx.mdx
@@ -40,7 +40,7 @@ with unique URLs, which is great for review and testing.