;
}
addons.register(ADDON_ID, api => {
@@ -101,7 +101,7 @@ within `.storybook/main.js`:
```js
module.exports = {
- addons: ['path/to/register.js']
+ addons: ['path/to/addon']
}
```
@@ -132,7 +132,7 @@ Now we need to create two files, `register.js` and `index.js,`. `register.js` wi
## Creating a decorator
-Let's add the following content to the `index.js`. It will expose a decorator called `withFoo` which we use the `.addDecorator()` API to decorate all our stories.
+Let's add the following content to the `index.js`. It will expose a decorator called `withMyAddon` which we use the `.addDecorator()` API to decorate all our stories.
The `@storybook/addons` package contains a `makeDecorator` function which we can use to create such a decorator:
@@ -235,7 +235,7 @@ within `.storybook/main.js`:
```js
module.exports = {
- addons: ['path/to/register.js']
+ addons: ['path/to/addon']
}
```
diff --git a/docs/src/pages/guides/guide-angular/index.md b/docs/src/pages/guides/guide-angular/index.md
index 699967947daa..3978290a764d 100644
--- a/docs/src/pages/guides/guide-angular/index.md
+++ b/docs/src/pages/guides/guide-angular/index.md
@@ -31,17 +31,18 @@ npm install @storybook/angular --save-dev
Make sure that you have `@babel/core`, and `babel-loader` in your dependencies as well because we list these as a peer dependencies:
```sh
-npm install babel-loader @babel/core --save-dev
+npm install babel-loader @babel/core --save-dev
```
-## Step 2: Add a npm script
+## Step 2: Add npm scripts
-Then add the following NPM script to your `package.json` in order to start the storybook later in this guide:
+Then add the following scripts to your `package.json` in order to start the storybook later in this guide:
```json
{
"scripts": {
- "storybook": "start-storybook"
+ "storybook": "start-storybook",
+ "build-storybook": "build-storybook"
}
}
```
diff --git a/docs/src/pages/guides/guide-ember/index.md b/docs/src/pages/guides/guide-ember/index.md
index 101f59727d86..2a4dfa8b5815 100644
--- a/docs/src/pages/guides/guide-ember/index.md
+++ b/docs/src/pages/guides/guide-ember/index.md
@@ -35,15 +35,15 @@ If you don't have `package.json` in your project, you'll need to init it first:
npm init
```
-Then add the following NPM script to your `package.json` in order to start the storybook later in this guide:
+Then add the following npm scripts to your `package.json` in order to start the storybook later in this guide:
> In order for your storybook to run properly be sure to be either run `ember serve` or `ember build` before running any storybook commands. Running `ember serve` before storybook will enable live reloading.
```json
{
"scripts": {
- "build-storybook": "ember build && build-storybook -s dist",
- "storybook": "ember serve & start-storybook -p 9001 -s dist"
+ "storybook": "ember serve & start-storybook -p 9001 -s dist",
+ "build-storybook": "ember build && build-storybook -s dist"
}
}
```
diff --git a/docs/src/pages/guides/guide-html/index.md b/docs/src/pages/guides/guide-html/index.md
index 10915ad3ee34..ebbd68739c2f 100644
--- a/docs/src/pages/guides/guide-html/index.md
+++ b/docs/src/pages/guides/guide-html/index.md
@@ -39,17 +39,18 @@ npm install @storybook/html --save-dev
Make sure that you have `@babel/core`, and `babel-loader` in your dependencies as well because we list these as a peer dependencies:
```sh
-npm install babel-loader @babel/core --save-dev
+npm install babel-loader @babel/core --save-dev
```
-## Step 2: Add a npm script
+## Step 2: Add npm scripts
-Then add the following NPM script to your `package.json` in order to start the storybook later in this guide:
+Then add the following scripts to your `package.json` in order to start the storybook later in this guide:
```json
{
"scripts": {
- "storybook": "start-storybook"
+ "storybook": "start-storybook",
+ "build-storybook": "build-storybook"
}
}
```
diff --git a/docs/src/pages/guides/guide-marko/index.md b/docs/src/pages/guides/guide-marko/index.md
index 59dc9e4c7850..e434bfdea79e 100644
--- a/docs/src/pages/guides/guide-marko/index.md
+++ b/docs/src/pages/guides/guide-marko/index.md
@@ -31,17 +31,18 @@ npm install @storybook/marko --save-dev
Make sure that you have `marko`, `@babel/core`, and `babel-loader` in your dependencies as well because we list these as a peer dependencies:
```sh
-npm install babel-loader @babel/core --save-dev
+npm install babel-loader @babel/core --save-dev
```
-## Step 2: Add a npm script
+## Step 2: Add npm scripts
-Then add the following NPM script to your `package.json` in order to start the storybook later in this guide:
+Then add the following scripts to your `package.json` in order to start the storybook later in this guide:
```json
{
"scripts": {
- "storybook": "start-storybook"
+ "storybook": "start-storybook",
+ "build-storybook": "build-storybook"
}
}
```
diff --git a/docs/src/pages/guides/guide-mithril/index.md b/docs/src/pages/guides/guide-mithril/index.md
index bf23ad142e3d..86e1c911cd53 100644
--- a/docs/src/pages/guides/guide-mithril/index.md
+++ b/docs/src/pages/guides/guide-mithril/index.md
@@ -32,17 +32,18 @@ Make sure that you have `mithril`, `@babel/core`, and `babel-loader` in your dep
```sh
npm install mithril --save
-npm install babel-loader @babel/core --save-dev
+npm install babel-loader @babel/core --save-dev
```
-## Step 2: Add a npm script
+## Step 2: Add npm scripts
-Then add the following NPM script to your `package.json` in order to start the storybook later in this guide:
+Then add the following scripts to your `package.json` in order to start the storybook later in this guide:
```json
{
"scripts": {
- "storybook": "start-storybook"
+ "storybook": "start-storybook",
+ "build-storybook": "build-storybook"
}
}
```
diff --git a/docs/src/pages/guides/guide-preact/index.md b/docs/src/pages/guides/guide-preact/index.md
index 151a6d59773d..febf4981a976 100644
--- a/docs/src/pages/guides/guide-preact/index.md
+++ b/docs/src/pages/guides/guide-preact/index.md
@@ -32,17 +32,18 @@ Make sure that you have `preact`, `@babel/core`, and `babel-loader` in your depe
```sh
npm install preact --save
-npm install babel-loader @babel/core --save-dev
+npm install babel-loader @babel/core --save-dev
```
-## Step 2: Add a npm script
+## Step 2: Add npm scripts
-Then add the following NPM script to your `package.json` in order to start the storybook later in this guide:
+Then add the following scripts to your `package.json` in order to start the storybook later in this guide:
```json
{
"scripts": {
- "storybook": "start-storybook"
+ "storybook": "start-storybook",
+ "build-storybook": "build-storybook"
}
}
```
diff --git a/docs/src/pages/guides/guide-rax/index.md b/docs/src/pages/guides/guide-rax/index.md
index 6a0f2afb7eb2..11f92cec4eba 100644
--- a/docs/src/pages/guides/guide-rax/index.md
+++ b/docs/src/pages/guides/guide-rax/index.md
@@ -35,14 +35,15 @@ npm install rax --save
npm install babel-loader @babel/core --save-dev
```
-## Step 2: Add a npm script
+## Step 2: Add npm scripts
-Then add the following NPM script to your `package.json` in order to start the storybook later in this guide:
+Then add the following scripts to your `package.json` in order to start the storybook later in this guide:
```json
{
"scripts": {
- "storybook": "start-storybook"
+ "storybook": "start-storybook",
+ "build-storybook": "build-storybook"
}
}
```
diff --git a/docs/src/pages/guides/guide-react/index.md b/docs/src/pages/guides/guide-react/index.md
index 0b1ed604f45b..d6c817621b5a 100644
--- a/docs/src/pages/guides/guide-react/index.md
+++ b/docs/src/pages/guides/guide-react/index.md
@@ -53,14 +53,15 @@ npm install react react-dom --save
npm install babel-loader @babel/core --save-dev
```
-## Step 2: Add an npm script
+## Step 2: Add npm scripts
-Then add the following NPM script to your `package.json` in order to start the storybook later in this guide:
+Then add the following scripts to your `package.json` in order to start the storybook later in this guide:
```json
{
"scripts": {
- "storybook": "start-storybook"
+ "storybook": "start-storybook",
+ "build-storybook": "build-storybook"
}
}
```
diff --git a/docs/src/pages/guides/guide-riot/index.md b/docs/src/pages/guides/guide-riot/index.md
index af459b3eb52f..e4940d1c0fbe 100644
--- a/docs/src/pages/guides/guide-riot/index.md
+++ b/docs/src/pages/guides/guide-riot/index.md
@@ -34,14 +34,15 @@ Make sure that you have `riot`, `@babel/core`, and `babel-loader` in your depend
npm install riot babel-loader @babel/core --save-dev
```
-## Step 2: Add a npm script
+## Step 2: Add npm scripts
-Then add the following NPM script to your `package.json` in order to start the storybook later in this guide:
+Then add the following scripts to your `package.json` in order to start the storybook later in this guide:
```json
{
"scripts": {
- "storybook": "start-storybook"
+ "storybook": "start-storybook",
+ "build-storybook": "build-storybook"
}
}
```
diff --git a/docs/src/pages/guides/guide-svelte/index.md b/docs/src/pages/guides/guide-svelte/index.md
index bc877a8bf6f7..3e19e4918f34 100644
--- a/docs/src/pages/guides/guide-svelte/index.md
+++ b/docs/src/pages/guides/guide-svelte/index.md
@@ -45,14 +45,15 @@ You'll also need to install `svelte-loader` if you haven't already.
npm install svelte-loader --save-dev
```
-## Step 2: Add a npm script
+## Step 2: Add npm scripts
-Then add the following NPM script to your `package.json` in order to start the storybook later in this guide:
+Then add the following scripts to your `package.json` in order to start the storybook later in this guide:
```json
{
"scripts": {
- "storybook": "start-storybook"
+ "storybook": "start-storybook",
+ "build-storybook": "build-storybook"
}
}
```
diff --git a/docs/src/pages/guides/guide-vue/index.md b/docs/src/pages/guides/guide-vue/index.md
index 5b79cd0b22b7..8e031a1ff6fa 100644
--- a/docs/src/pages/guides/guide-vue/index.md
+++ b/docs/src/pages/guides/guide-vue/index.md
@@ -35,14 +35,15 @@ npm install vue --save
npm install vue-loader vue-template-compiler @babel/core babel-loader babel-preset-vue --save-dev
```
-## Step 2: Add an npm script
+## Step 2: Add npm scripts
-Then add the following NPM script to your `package.json` in order to start the storybook later in this guide:
+Then add the following scripts to your `package.json` in order to start the storybook later in this guide:
```json
{
"scripts": {
- "storybook": "start-storybook"
+ "storybook": "start-storybook",
+ "build-storybook": "build-storybook"
}
}
```
diff --git a/docs/src/pages/guides/quick-start-guide/index.md b/docs/src/pages/guides/quick-start-guide/index.md
index 535d31fd7481..01dd41ba15cd 100644
--- a/docs/src/pages/guides/quick-start-guide/index.md
+++ b/docs/src/pages/guides/quick-start-guide/index.md
@@ -13,7 +13,7 @@ cd my-project-directory
npx -p @storybook/cli sb init
```
-The tool inspects your `package.json` to determine which view layer you're using. If you want to develop HTML snippets in storybook, we can't determine that automatically. So to install storybook for HTML, use the `--type` flag to force that the HTML project type:
+The tool inspects your `package.json` to determine which view layer you're using. If you want to develop HTML snippets in storybook, we can't determine that automatically. So to install storybook for HTML, use the `--type` flag to force that the HTML project type is set:
```sh
npx -p @storybook/cli sb init --type html
diff --git a/docs/src/pages/presets/writing-presets/index.md b/docs/src/pages/presets/writing-presets/index.md
index 2005391c667a..dee4caa6d378 100644
--- a/docs/src/pages/presets/writing-presets/index.md
+++ b/docs/src/pages/presets/writing-presets/index.md
@@ -107,7 +107,7 @@ For users, the name `managerEntries` might be a bit too technical, so instead bo
```js
module.exports = {
- addons: ['@storybook/addon-storysource/register'],
+ addons: ['@storybook/addon-storysource'],
};
```
diff --git a/docs/src/versions/next.json b/docs/src/versions/next.json
index 84c100ffd676..357ae6ed280b 100644
--- a/docs/src/versions/next.json
+++ b/docs/src/versions/next.json
@@ -1 +1 @@
-{"version":"6.0.0-alpha.19","info":{"plain":"### Features\n\n* Addon-links: Add preset ([#9932](https://github.com/storybookjs/storybook/pull/9932))\n\n### Bug Fixes\n\n* Addon-docs: Restore IE11 compat on Windows by transpiling acorn-jsx ([#9790](https://github.com/storybookjs/storybook/pull/9790))"}}
\ No newline at end of file
+{"version":"6.0.0-alpha.25","info":{"plain":"NOTE: `6.0.0-alpha.24` broken due to bad merge. Sorry!\n\n### Bug Fixes\n\n- Core: Fix initialization of global args ([#10106](https://github.com/storybookjs/storybook/pull/10106))"}}
\ No newline at end of file
diff --git a/examples/angular-cli/package.json b/examples/angular-cli/package.json
index b93cd0ec82b2..afa33008db85 100644
--- a/examples/angular-cli/package.json
+++ b/examples/angular-cli/package.json
@@ -1,6 +1,6 @@
{
"name": "angular-cli",
- "version": "6.0.0-alpha.19",
+ "version": "6.0.0-alpha.25",
"private": true,
"license": "MIT",
"scripts": {
@@ -37,20 +37,20 @@
"@angular/cli": "^8.3.6",
"@angular/compiler-cli": "^8.2.8",
"@compodoc/compodoc": "^1.1.11",
- "@storybook/addon-a11y": "6.0.0-alpha.19",
- "@storybook/addon-actions": "6.0.0-alpha.19",
- "@storybook/addon-backgrounds": "6.0.0-alpha.19",
- "@storybook/addon-centered": "6.0.0-alpha.19",
- "@storybook/addon-docs": "6.0.0-alpha.19",
- "@storybook/addon-jest": "6.0.0-alpha.19",
- "@storybook/addon-knobs": "6.0.0-alpha.19",
- "@storybook/addon-links": "6.0.0-alpha.19",
- "@storybook/addon-options": "6.0.0-alpha.19",
- "@storybook/addon-storyshots": "6.0.0-alpha.19",
- "@storybook/addon-storysource": "6.0.0-alpha.19",
- "@storybook/addons": "6.0.0-alpha.19",
- "@storybook/angular": "6.0.0-alpha.19",
- "@storybook/source-loader": "6.0.0-alpha.19",
+ "@storybook/addon-a11y": "6.0.0-alpha.25",
+ "@storybook/addon-actions": "6.0.0-alpha.25",
+ "@storybook/addon-backgrounds": "6.0.0-alpha.25",
+ "@storybook/addon-centered": "6.0.0-alpha.25",
+ "@storybook/addon-docs": "6.0.0-alpha.25",
+ "@storybook/addon-jest": "6.0.0-alpha.25",
+ "@storybook/addon-knobs": "6.0.0-alpha.25",
+ "@storybook/addon-links": "6.0.0-alpha.25",
+ "@storybook/addon-options": "6.0.0-alpha.25",
+ "@storybook/addon-storyshots": "6.0.0-alpha.25",
+ "@storybook/addon-storysource": "6.0.0-alpha.25",
+ "@storybook/addons": "6.0.0-alpha.25",
+ "@storybook/angular": "6.0.0-alpha.25",
+ "@storybook/source-loader": "6.0.0-alpha.25",
"@types/core-js": "^2.5.0",
"@types/jest": "^25.1.1",
"@types/node": "^13.5.3",
diff --git a/examples/cra-kitchen-sink/package.json b/examples/cra-kitchen-sink/package.json
index 9016f0a10aa0..214eb82aea06 100644
--- a/examples/cra-kitchen-sink/package.json
+++ b/examples/cra-kitchen-sink/package.json
@@ -1,6 +1,6 @@
{
"name": "cra-kitchen-sink",
- "version": "6.0.0-alpha.19",
+ "version": "6.0.0-alpha.25",
"private": true,
"scripts": {
"build": "react-scripts build",
@@ -18,21 +18,21 @@
"react-lifecycles-compat": "^3.0.4"
},
"devDependencies": {
- "@storybook/addon-a11y": "6.0.0-alpha.19",
- "@storybook/addon-actions": "6.0.0-alpha.19",
- "@storybook/addon-backgrounds": "6.0.0-alpha.19",
- "@storybook/addon-centered": "6.0.0-alpha.19",
- "@storybook/addon-docs": "6.0.0-alpha.19",
- "@storybook/addon-events": "6.0.0-alpha.19",
- "@storybook/addon-jest": "6.0.0-alpha.19",
- "@storybook/addon-knobs": "6.0.0-alpha.19",
- "@storybook/addon-links": "6.0.0-alpha.19",
- "@storybook/addon-options": "6.0.0-alpha.19",
- "@storybook/addon-storyshots": "6.0.0-alpha.19",
- "@storybook/addons": "6.0.0-alpha.19",
- "@storybook/client-logger": "6.0.0-alpha.19",
- "@storybook/react": "6.0.0-alpha.19",
- "@storybook/theming": "6.0.0-alpha.19",
+ "@storybook/addon-a11y": "6.0.0-alpha.25",
+ "@storybook/addon-actions": "6.0.0-alpha.25",
+ "@storybook/addon-backgrounds": "6.0.0-alpha.25",
+ "@storybook/addon-centered": "6.0.0-alpha.25",
+ "@storybook/addon-docs": "6.0.0-alpha.25",
+ "@storybook/addon-events": "6.0.0-alpha.25",
+ "@storybook/addon-jest": "6.0.0-alpha.25",
+ "@storybook/addon-knobs": "6.0.0-alpha.25",
+ "@storybook/addon-links": "6.0.0-alpha.25",
+ "@storybook/addon-options": "6.0.0-alpha.25",
+ "@storybook/addon-storyshots": "6.0.0-alpha.25",
+ "@storybook/addons": "6.0.0-alpha.25",
+ "@storybook/client-logger": "6.0.0-alpha.25",
+ "@storybook/react": "6.0.0-alpha.25",
+ "@storybook/theming": "6.0.0-alpha.25",
"react-scripts": "^3.0.1"
}
}
diff --git a/examples/cra-react15/package.json b/examples/cra-react15/package.json
index b0e6b33681c7..25320b7cc427 100644
--- a/examples/cra-react15/package.json
+++ b/examples/cra-react15/package.json
@@ -1,6 +1,6 @@
{
"name": "cra-react15",
- "version": "6.0.0-alpha.19",
+ "version": "6.0.0-alpha.25",
"private": true,
"scripts": {
"build": "react-scripts build",
@@ -18,11 +18,11 @@
"react-scripts": "3.0.1"
},
"devDependencies": {
- "@storybook/addon-actions": "6.0.0-alpha.19",
- "@storybook/addon-links": "6.0.0-alpha.19",
- "@storybook/addons": "6.0.0-alpha.19",
- "@storybook/react": "6.0.0-alpha.19",
- "@storybook/theming": "6.0.0-alpha.19",
+ "@storybook/addon-actions": "6.0.0-alpha.25",
+ "@storybook/addon-links": "6.0.0-alpha.25",
+ "@storybook/addons": "6.0.0-alpha.25",
+ "@storybook/react": "6.0.0-alpha.25",
+ "@storybook/theming": "6.0.0-alpha.25",
"babel-core": "6",
"babel-runtime": "6"
}
diff --git a/examples/cra-ts-essentials/package.json b/examples/cra-ts-essentials/package.json
index 5db60909bde3..beec8576cce1 100644
--- a/examples/cra-ts-essentials/package.json
+++ b/examples/cra-ts-essentials/package.json
@@ -1,6 +1,6 @@
{
"name": "cra-ts-essentials",
- "version": "6.0.0-alpha.19",
+ "version": "6.0.0-alpha.25",
"private": true,
"scripts": {
"build": "react-scripts build",
@@ -36,9 +36,9 @@
"typescript": "3.7.5"
},
"devDependencies": {
- "@storybook/addon-essentials": "6.0.0-alpha.19",
- "@storybook/addons": "6.0.0-alpha.19",
+ "@storybook/addon-essentials": "6.0.0-alpha.25",
+ "@storybook/addons": "6.0.0-alpha.25",
"@storybook/preset-create-react-app": "^1.5.0",
- "@storybook/react": "6.0.0-alpha.19"
+ "@storybook/react": "6.0.0-alpha.25"
}
}
diff --git a/examples/cra-ts-kitchen-sink/package.json b/examples/cra-ts-kitchen-sink/package.json
index e5bcdf6b7517..c15b3afc090a 100644
--- a/examples/cra-ts-kitchen-sink/package.json
+++ b/examples/cra-ts-kitchen-sink/package.json
@@ -1,6 +1,6 @@
{
"name": "cra-ts-kitchen-sink",
- "version": "6.0.0-alpha.19",
+ "version": "6.0.0-alpha.25",
"private": true,
"scripts": {
"build": "react-scripts build",
@@ -34,14 +34,14 @@
"typescript": "3.7.5"
},
"devDependencies": {
- "@storybook/addon-a11y": "6.0.0-alpha.19",
- "@storybook/addon-actions": "6.0.0-alpha.19",
- "@storybook/addon-knobs": "6.0.0-alpha.19",
- "@storybook/addon-links": "6.0.0-alpha.19",
- "@storybook/addon-options": "6.0.0-alpha.19",
- "@storybook/addons": "6.0.0-alpha.19",
+ "@storybook/addon-a11y": "6.0.0-alpha.25",
+ "@storybook/addon-actions": "6.0.0-alpha.25",
+ "@storybook/addon-knobs": "6.0.0-alpha.25",
+ "@storybook/addon-links": "6.0.0-alpha.25",
+ "@storybook/addon-options": "6.0.0-alpha.25",
+ "@storybook/addons": "6.0.0-alpha.25",
"@storybook/preset-create-react-app": "^1.5.0",
- "@storybook/react": "6.0.0-alpha.19",
+ "@storybook/react": "6.0.0-alpha.25",
"@types/enzyme": "^3.9.0",
"@types/node": "13.5.3",
"@types/react": "^16.8.14",
diff --git a/examples/dev-kits/logo.svg b/examples/dev-kits/logo.svg
index 9809fb9021a1..26fa14630673 100644
--- a/examples/dev-kits/logo.svg
+++ b/examples/dev-kits/logo.svg
@@ -1 +1,3 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/examples/dev-kits/manager.js b/examples/dev-kits/manager.js
index f105fc1d65ba..7254179364b3 100644
--- a/examples/dev-kits/manager.js
+++ b/examples/dev-kits/manager.js
@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { useState } from 'react';
import { PropTypes } from 'prop-types';
import { Button } from '@storybook/react/demo';
import { addons } from '@storybook/addons';
-import { useAddonState, useStoryState } from '@storybook/api';
+import { useAddonState, useStoryState, useGlobalArgs } from '@storybook/api';
import { themes } from '@storybook/theming';
import { AddonPanel } from '@storybook/components';
@@ -13,6 +13,7 @@ addons.setConfig({
brandImage: logo,
brandTitle: 'Custom - Storybook',
...themes.dark,
+ appContentBg: 'white',
},
panelPosition: 'bottom',
selectedPanel: 'storybook/roundtrip',
@@ -58,3 +59,37 @@ addons.addPanel('useAddonState', {
title: 'useAddonState',
render: StatePanel,
});
+
+const GlobalArgsPanel = ({ active, key }) => {
+ const [globalArgs, updateGlobalArgs] = useGlobalArgs();
+ const [globalArgsInput, updateGlobalArgsInput] = useState(JSON.stringify(globalArgs));
+ return (
+
+