diff --git a/MIGRATION.md b/MIGRATION.md
index 694d9fd63ada..27d580992c4c 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -38,6 +38,7 @@
- [Removed addon-centered](#removed-addon-centered)
- [Deprecated polymer](#deprecated-polymer)
- [Deprecated immutable options parameters](#deprecated-immutable-options-parameters)
+ - [Deprecated addParameters and addDecorator](#deprecated-addparameters-and-adddecorator)
- [From version 5.2.x to 5.3.x](#from-version-52x-to-53x)
- [To main.js configuration](#to-mainjs-configuration)
- [Using main.js](#using-mainjs)
@@ -466,6 +467,8 @@ export StoryOne = ...;
StoryOne.story = { parameters: { ...commonParameters, other: 'things' } };
```
+> NOTE: also the use of `addParameters` and `addDecorator` at arbitrary points is also deprecated, see [the deprecation warning](#deprecated-addparameters-and-adddecorator).
+
#### Changed Parameter Handling
There have been a few rationalizations of parameter handling in 6.0 to make things more predictable and fit better with the intention of parameters:
@@ -641,6 +644,12 @@ addons.setConfig({
});
```
+#### Deprecated addParameters and addDecorator
+
+The `addParameters` and `addDecorator` APIs to add global decorators and parameters, exported by the various frameworks (e.g. `@storybook/react`) and `@storybook/client` are now deprecated.
+
+Instead, use `export const parameters = {};` and `export const decorators = [];` in your `.storybook/preview.js`. Addon authors similarly should use such an export in a `previewEntry` file.
+
## From version 5.2.x to 5.3.x
### To main.js configuration
diff --git a/examples/official-storybook/preview.js b/examples/official-storybook/preview.js
index 40c316ec4710..4e9859c28e00 100644
--- a/examples/official-storybook/preview.js
+++ b/examples/official-storybook/preview.js
@@ -1,7 +1,6 @@
import { document } from 'global';
import React, { Fragment, useEffect } from 'react';
-import { isChromatic } from 'chromatic';
-import { addDecorator, addParameters } from '@storybook/react';
+import isChromatic from 'chromatic/isChromatic';
import {
Global,
ThemeProvider,
@@ -33,8 +32,6 @@ if (process.env.NODE_ENV === 'development') {
addHeadWarning('preview-head-not-loaded', 'Preview head not loaded');
addHeadWarning('dotenv-file-not-loaded', 'Dotenv file not loaded');
-addDecorator(withCssResources);
-
const ThemeBlock = styled.div(
{
position: 'absolute',
@@ -88,59 +85,63 @@ const ThemedSetRoot = () => {
return null;
};
-addDecorator((StoryFn, { globals: { theme = 'light' } }) => {
- switch (theme) {
- case 'side-by-side': {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
- }
- case 'stacked': {
- return (
-
-
+export const decorators = [
+ withCssResources,
+ (StoryFn, { globals: { theme = 'light' } }) => {
+ switch (theme) {
+ case 'side-by-side': {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+ case 'stacked': {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+ default: {
+ return (
+
+
+
-
-
-
-
-
-
-
-
-
-
-
- );
+ );
+ }
}
- default: {
- return (
-
-
-
-
-
- );
- }
- }
-});
+ },
+];
-addParameters({
+export const parameters = {
+ exportedParameter: 'exportedParameter',
a11y: {
config: {},
options: {
@@ -156,10 +157,6 @@ addParameters({
theme: themes.light,
page: () => `Subtitle: ${kind}`} />,
},
-});
-
-export const parameters = {
- exportedParameter: 'exportedParameter',
};
export const globals = {
diff --git a/lib/client-api/src/client_api.ts b/lib/client-api/src/client_api.ts
index 9a9eb7fe0365..4dde221cfd09 100644
--- a/lib/client-api/src/client_api.ts
+++ b/lib/client-api/src/client_api.ts
@@ -20,16 +20,33 @@ import { defaultDecorateStory } from './decorators';
// relevant framework instanciates them via `start.js`. The good news is this happens right away.
let singleton: ClientApi;
-export const addDecorator = (decorator: DecoratorFunction) => {
+const addDecoratorDeprecationWarning = deprecate(
+ () => {},
+ `\`addDecorator\` is deprecated, and will be removed in Storybook 7.0.
+Instead, use \`export const decorators = [];\` in your \`preview.js\`.
+Read more at https://github.com/storybookjs/storybook/MIGRATION.md#deprecated-addparameters-and-adddecorator).`
+);
+export const addDecorator = (decorator: DecoratorFunction, deprecationWarning = true) => {
if (!singleton)
throw new Error(`Singleton client API not yet initialized, cannot call addDecorator`);
+ if (deprecationWarning) addDecoratorDeprecationWarning();
+
singleton.addDecorator(decorator);
};
-export const addParameters = (parameters: Parameters) => {
+
+const addParametersDeprecationWarning = deprecate(
+ () => {},
+ `\`addParameters\` is deprecated, and will be removed in Storybook 7.0.
+Instead, use \`export const parameters = {};\` in your \`preview.js\`.
+Read more at https://github.com/storybookjs/storybook/MIGRATION.md#deprecated-addparameters-and-adddecorator).`
+);
+export const addParameters = (parameters: Parameters, deprecationWarning = true) => {
if (!singleton)
throw new Error(`Singleton client API not yet initialized, cannot call addParameters`);
+ if (deprecationWarning) addParametersDeprecationWarning();
+
singleton.addParameters(parameters);
};
diff --git a/lib/core/src/server/preview/virtualModuleEntry.template.js b/lib/core/src/server/preview/virtualModuleEntry.template.js
index 63f44f73a2a8..a596a009065e 100644
--- a/lib/core/src/server/preview/virtualModuleEntry.template.js
+++ b/lib/core/src/server/preview/virtualModuleEntry.template.js
@@ -15,10 +15,10 @@ if (args || argTypes) {
logger.warn('Invalid args/argTypes in config, ignoring.', JSON.stringify({ args, argTypes }));
}
if (decorators) {
- decorators.forEach((decorator) => addDecorator(decorator));
+ decorators.forEach((decorator) => addDecorator(decorator, false));
}
if (parameters || globals || globalTypes) {
- addParameters({ ...parameters, globals, globalTypes });
+ addParameters({ ...parameters, globals, globalTypes }, false);
}
if (argTypesEnhancers) {
argTypesEnhancers.forEach((enhancer) => addArgTypesEnhancer(enhancer));