From 056e5de281553e1295044dd8aa4427a630301361 Mon Sep 17 00:00:00 2001
From: Jon Palmer <328224+jonspalmer@users.noreply.github.com>
Date: Tue, 25 Feb 2020 10:06:56 -0500
Subject: [PATCH] QueryParams addon preset

---
 MIGRATION.md                                         |  2 +-
 addons/queryparams/README.md                         | 12 ++++++++----
 addons/queryparams/preset.js                         |  1 +
 addons/queryparams/src/index.ts                      |  1 +
 addons/queryparams/src/preset/addDecorator.ts        |  3 +++
 addons/queryparams/src/preset/index.ts               | 11 +++++++++++
 examples/official-storybook/main.js                  |  1 +
 .../stories/addon-queryparams.stories.js             |  2 --
 8 files changed, 26 insertions(+), 7 deletions(-)
 create mode 100644 addons/queryparams/preset.js
 create mode 100644 addons/queryparams/src/preset/addDecorator.ts
 create mode 100644 addons/queryparams/src/preset/index.ts

diff --git a/MIGRATION.md b/MIGRATION.md
index f4cbe745d89c..a8c0d315fd70 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -88,7 +88,7 @@
 
 In Storybook 5.3 we introduced a declarative [main.js configuration](#to-mainjs-configuration), which is now the recommended way to configure Storybook. Part of the change is a simplified syntax for registering addons, which in 6.0 automatically registers many addons _using a preset_, which is a slightly different behavior than in earlier versions.
 
-This breaking change currently applies to: `addon-a11y`, `addon-knobs`, `addon-links`.
+This breaking change currently applies to: `addon-a11y`, `addon-knobs`, `addon-links`, `addon-queryparams`.
 
 Consider the following `main.js` config for the accessibility addon, `addon-a11y`:
 
diff --git a/addons/queryparams/README.md b/addons/queryparams/README.md
index 8f3402004371..d8f935da80b2 100644
--- a/addons/queryparams/README.md
+++ b/addons/queryparams/README.md
@@ -10,15 +10,19 @@ First, install the addon.
 $ yarn add @storybook/addon-queryparams --dev
 ```
 
-import the `withQuery` decorator so the url will be changed before rendering stories.
+Add this line to your `main.js` file (create this file inside your storybook config directory if needed).
+
+```js
+module.exports = {
+  addons: ['@storybook/addon-queryparams'],
+};
+```
 
 ```js
 import React from 'react';
-import { storiesOf, addDecorator } from '@storybook/react';
-import { withQuery } from '@storybook/addon-queryparams';
+import { storiesOf } from '@storybook/react';
 
 storiesOf('button', module)
-  .addDecorator(withQuery)
   .addParameters({
     query: {
       mock: true,
diff --git a/addons/queryparams/preset.js b/addons/queryparams/preset.js
new file mode 100644
index 000000000000..a83f95279e7f
--- /dev/null
+++ b/addons/queryparams/preset.js
@@ -0,0 +1 @@
+module.exports = require('./dist/preset');
diff --git a/addons/queryparams/src/index.ts b/addons/queryparams/src/index.ts
index a84100160ad0..62138a138ba8 100644
--- a/addons/queryparams/src/index.ts
+++ b/addons/queryparams/src/index.ts
@@ -8,6 +8,7 @@ import { PARAM_KEY } from './constants';
 export const withQuery = makeDecorator({
   name: 'withQuery',
   parameterName: PARAM_KEY,
+  skipIfNoParametersOrOptions: true,
   wrapper: (getStory: StoryGetter, context: StoryContext, { parameters }) => {
     const { location } = document;
     const currentQuery = qs.parse(location.search, { ignoreQueryPrefix: true });
diff --git a/addons/queryparams/src/preset/addDecorator.ts b/addons/queryparams/src/preset/addDecorator.ts
new file mode 100644
index 000000000000..f04053309f79
--- /dev/null
+++ b/addons/queryparams/src/preset/addDecorator.ts
@@ -0,0 +1,3 @@
+import { withQuery } from '../index';
+
+export const decorators = [withQuery];
diff --git a/addons/queryparams/src/preset/index.ts b/addons/queryparams/src/preset/index.ts
new file mode 100644
index 000000000000..07aae5c51990
--- /dev/null
+++ b/addons/queryparams/src/preset/index.ts
@@ -0,0 +1,11 @@
+type QueryParamsOptions = {
+  addDecorator?: boolean;
+};
+
+export function config(entry: any[] = [], { addDecorator = true }: QueryParamsOptions = {}) {
+  const queryParamsConfig = [];
+  if (addDecorator) {
+    queryParamsConfig.push(require.resolve('./addDecorator'));
+  }
+  return [...entry, ...queryParamsConfig];
+}
diff --git a/examples/official-storybook/main.js b/examples/official-storybook/main.js
index 72365ac3100d..f48040c27589 100644
--- a/examples/official-storybook/main.js
+++ b/examples/official-storybook/main.js
@@ -22,6 +22,7 @@ module.exports = {
     '@storybook/addon-viewport',
     '@storybook/addon-graphql',
     '@storybook/addon-contexts',
+    '@storybook/addon-queryparams',
   ],
   webpackFinal: async (config, { configType }) => ({
     ...config,
diff --git a/examples/official-storybook/stories/addon-queryparams.stories.js b/examples/official-storybook/stories/addon-queryparams.stories.js
index 3d5c515fb2ae..469df5f63ecb 100644
--- a/examples/official-storybook/stories/addon-queryparams.stories.js
+++ b/examples/official-storybook/stories/addon-queryparams.stories.js
@@ -1,10 +1,8 @@
 import { document } from 'global';
 import React from 'react';
-import { withQuery } from '@storybook/addon-queryparams';
 
 export default {
   title: 'Addons/QueryParams',
-  decorators: [withQuery],
 
   parameters: {
     query: {