Merge pull request #11876 from storybookjs/docs/preview-entries

Document preview entries in presets

MIGRATION.md

@@ -728,7 +728,7 @@ addons.setConfig({
 
 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.
+Instead, use `export const parameters = {};` and `export const decorators = [];` in your `.storybook/preview.js`. Addon authors similarly should use such an export in a preview entry file (see [Preview entries](https://github.com/storybookjs/storybook/blob/next/docs/api/writing-presets.md#preview-entries)).
 
 #### Deprecated clearDecorators
 

docs/api/writing-presets.md

@@ -2,7 +2,6 @@
 title: 'Writing your own Storybook Preset'
 ---
 
-
 [Storybook presets](./presets.md) are grouped collections of `babel`, `webpack`, and `addons` configurations that support specific use cases in Storybook, such as typescript or MDX support.
 
 This doc covers the [presets API](#presets-api) and how to use the presets mechanism for [advanced configuration](#advanced-configuration).
@@ -45,7 +44,6 @@ All functions take a [Babel configuration object](https://babeljs.io/docs/en/con
 For example, Storybook's Mihtril support uses plugins internally and here's how it configures babel:
 
 ```ts
-
 export function babelDefault(config: TransformOptions) {
   return {
     ...config,
@@ -104,6 +102,35 @@ module.exports = {
 };
 ```
 
+### Preview entries
+
+The addon config `config` allows you to add extra preview configuration from within a preset, for example to add parameters or decorators from an addon.
+
+For example, the Backgrounds preset contains the following code:
+
+```js
+// preset.js
+export function config(entry = []) {
+  return [...entry, require.resolve('./defaultParameters')];
+}
+```
+
+Which in turn invokes:
+
+```js
+// defaultParameters.js
+export const parameters = {
+  backgrounds: {
+    values: [
+      { name: 'light', value: '#F8F8F8' },
+      { name: 'dark', value: '#333333' },
+    ],
+  },
+};
+```
+
+This is equivalent to exporting the `backgrounds` parameter manually in `main.js`.
+
 ### Addons
 
 For users, the name `managerEntries` might be a bit too technical, so instead both users and preset-authors can simply use the property: `addons`:
@@ -184,7 +211,6 @@ and extract the configuration to a new file `./storybook/my-preset.js`:
 ```js
 // .storybook/my-preset.js
 
-
 module.exports = {
   managerWebpack: async (config, options) => {
     // update config here
@@ -203,4 +229,4 @@ module.exports = {
 };
 ```
 
-Place your `my-preset.js` file wherever you want, if you want to share it far and wide you'll want to make it its own package.
+Place your `my-preset.js` file wherever you want, if you want to share it far and wide you'll want to make it its own package.