QueryParams addon preset

Author: jonspalmer

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,

addons/queryparams/preset.js

@@ -0,0 +1 @@
+module.exports = require('./dist/preset');

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 });

addons/queryparams/src/preset/addDecorator.ts

@@ -0,0 +1,3 @@
+import { withQuery } from '../index';
+
+export const decorators = [withQuery];

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];
+}

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,

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: {