@storybook/codemod 7.0.0-beta.2 → 7.0.0-beta.21

package/dist/transforms/update-addon-info.mjs

@@ -0,0 +1 @@
+import{transformer}from"../chunk-B5FMQ3BX.mjs";export{transformer as default};

package/dist/transforms/update-organisation-name.d.ts

@@ -0,0 +1,25 @@
+declare function transformer(file: any, api: any): any;
+declare const packageNames: {
+    '@kadira/react-storybook-decorator-centered': string;
+    '@kadira/storybook-addons': string;
+    '@kadira/storybook-addon-actions': string;
+    '@kadira/storybook-addon-comments': string;
+    '@kadira/storybook-addon-graphql': string;
+    '@kadira/storybook-addon-info': string;
+    '@kadira/storybook-addon-knobs': string;
+    '@kadira/storybook-addon-links': string;
+    '@kadira/storybook-addon-notes': string;
+    '@kadira/storybook-addon-options': string;
+    '@kadira/storybook-channels': string;
+    '@kadira/storybook-channel-postmsg': string;
+    '@kadira/storybook-channel-websocket': string;
+    '@kadira/storybook-ui': string;
+    '@kadira/react-native-storybook': string;
+    '@kadira/react-storybook': string;
+    '@kadira/getstorybook': string;
+    '@kadira/storybook': string;
+    storyshots: string;
+    getstorybook: string;
+};
+
+export { transformer as default, packageNames };

package/dist/transforms/update-organisation-name.js

@@ -0,0 +1 @@
+var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var update_organisation_name_exports={};__export(update_organisation_name_exports,{default:()=>transformer,packageNames:()=>packageNames});module.exports=__toCommonJS(update_organisation_name_exports);var packageNames={"@kadira/react-storybook-decorator-centered":"@storybook/addon-centered","@kadira/storybook-addons":"@storybook/preview-api","@kadira/storybook-addon-actions":"@storybook/addon-actions","@kadira/storybook-addon-comments":"@storybook/addon-comments","@kadira/storybook-addon-graphql":"@storybook/addon-graphql","@kadira/storybook-addon-info":"@storybook/addon-info","@kadira/storybook-addon-knobs":"@storybook/addon-knobs","@kadira/storybook-addon-links":"@storybook/addon-links","@kadira/storybook-addon-notes":"@storybook/addon-notes","@kadira/storybook-addon-options":"@storybook/addon-options","@kadira/storybook-channels":"@storybook/channels","@kadira/storybook-channel-postmsg":"@storybook/channel-postmessage","@kadira/storybook-channel-websocket":"@storybook/channel-websocket","@kadira/storybook-ui":"@storybook/manager","@kadira/react-native-storybook":"@storybook/react-native","@kadira/react-storybook":"@storybook/react","@kadira/getstorybook":"@storybook/cli","@kadira/storybook":"@storybook/react",storyshots:"@storybook/addon-storyshots",getstorybook:"@storybook/cli"};function transformer(file,api){let j=api.jscodeshift,packageNamesKeys=Object.keys(packageNames),getMatch=oldpart=>packageNamesKeys.find(newpart=>oldpart.match(newpart)),getNewPackageName=oldPackageName=>{let match=getMatch(oldPackageName);if(match){let replacement=packageNames[match];return oldPackageName.replace(match,replacement)}return oldPackageName},updatePackageName=declaration=>(declaration.node.source.value=getNewPackageName(declaration.node.source.value),declaration.node);return j(file.source).find(j.ImportDeclaration).replaceWith(updatePackageName).toSource({quote:"single"})}0&&(module.exports={packageNames});

package/dist/transforms/update-organisation-name.mjs

@@ -0,0 +1 @@
+import{packageNames,transformer}from"../chunk-3OPQTROG.mjs";export{transformer as default,packageNames};

package/dist/transforms/upgrade-hierarchy-separators.d.ts

@@ -0,0 +1,3 @@
+declare function transformer(file: any, api: any, options: any): any;
+
+export { transformer as default };

package/dist/transforms/upgrade-hierarchy-separators.js

@@ -0,0 +1 @@
+var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var upgrade_hierarchy_separators_exports={};__export(upgrade_hierarchy_separators_exports,{default:()=>transformer});module.exports=__toCommonJS(upgrade_hierarchy_separators_exports);function upgradeSeparator(path){return path.replace(/[|.]/g,"/")}function transformer(file,api,options){let j=api.jscodeshift,root=j(file.source);return root.find(j.CallExpression).filter(call=>call.node.callee.name==="storiesOf").filter(call=>call.node.arguments.length>0&&["Literal","StringLiteral"].includes(call.node.arguments[0].type)).forEach(call=>{let arg0=call.node.arguments[0];arg0.value=upgradeSeparator(arg0.value)}),root.find(j.ExportDefaultDeclaration).filter(def=>def.node.declaration.properties.map(p=>p.key.name).includes("title")).forEach(def=>{def.node.declaration&&def.node.declaration.properties&&def.node.declaration.properties.forEach(p=>{p.key.name==="title"&&(p.value.value=upgradeSeparator(p.value.value))})}),root.toSource({quote:"single"})}0&&(module.exports={});

package/dist/transforms/upgrade-hierarchy-separators.mjs

@@ -0,0 +1 @@
+function upgradeSeparator(path){return path.replace(/[|.]/g,"/")}function transformer(file,api,options){let j=api.jscodeshift,root=j(file.source);return root.find(j.CallExpression).filter(call=>call.node.callee.name==="storiesOf").filter(call=>call.node.arguments.length>0&&["Literal","StringLiteral"].includes(call.node.arguments[0].type)).forEach(call=>{let arg0=call.node.arguments[0];arg0.value=upgradeSeparator(arg0.value)}),root.find(j.ExportDefaultDeclaration).filter(def=>def.node.declaration.properties.map(p=>p.key.name).includes("title")).forEach(def=>{def.node.declaration&&def.node.declaration.properties&&def.node.declaration.properties.forEach(p=>{p.key.name==="title"&&(p.value.value=upgradeSeparator(p.value.value))})}),root.toSource({quote:"single"})}export{transformer as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/codemod",
-  "version": "7.0.0-beta.2",
+  "version": "7.0.0-beta.21",
   "description": "A collection of codemod scripts written with JSCodeshift",
   "keywords": [
     "storybook"
@@ -22,26 +22,37 @@
   "sideEffects": false,
   "exports": {
     ".": {
+      "node": "./dist/index.js",
       "require": "./dist/index.js",
       "import": "./dist/index.mjs",
       "types": "./dist/index.d.ts"
     },
+    "./dist/transforms/add-component-parameters.js": "./dist/transforms/add-component-parameters.js",
+    "./dist/transforms/csf-2-to-3.js": "./dist/transforms/csf-2-to-3.js",
+    "./dist/transforms/csf-hoist-story-annotations.js": "./dist/transforms/csf-hoist-story-annotations.js",
+    "./dist/transforms/csf-to-mdx.js": "./dist/transforms/csf-to-mdx.js",
+    "./dist/transforms/move-builtin-addons.js": "./dist/transforms/move-builtin-addons.js",
+    "./dist/transforms/storiesof-to-csf.js": "./dist/transforms/storiesof-to-csf.js",
+    "./dist/transforms/update-addon-info.js": "./dist/transforms/update-addon-info.js",
+    "./dist/transforms/update-organisation-name.js": "./dist/transforms/update-organisation-name.js",
+    "./dist/transforms/upgrade-hierarchy-separators.js": "./dist/transforms/upgrade-hierarchy-separators.js",
     "./package.json": "./package.json"
   },
   "main": "dist/index.js",
   "module": "dist/index.mjs",
-  "jsnext:main": "src/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
     "check": "../../../scripts/node_modules/.bin/tsc --noEmit",
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
+    "@babel/core": "^7.20.2",
+    "@babel/preset-env": "^7.20.2",
     "@babel/types": "^7.20.2",
     "@storybook/csf": "next",
-    "@storybook/csf-tools": "7.0.0-beta.2",
-    "@storybook/node-logger": "7.0.0-beta.2",
-    "@storybook/types": "7.0.0-beta.2",
+    "@storybook/csf-tools": "7.0.0-beta.21",
+    "@storybook/node-logger": "7.0.0-beta.21",
+    "@storybook/types": "7.0.0-beta.21",
     "cross-spawn": "^7.0.3",
     "globby": "^11.0.2",
     "jscodeshift": "^0.13.1",
@@ -51,6 +62,7 @@
     "util": "^0.12.4"
   },
   "devDependencies": {
+    "@types/jscodeshift": "^0.11.6",
     "jest": "^29.3.1",
     "jest-specific-snapshot": "^7.0.0",
     "typescript": "~4.9.3"
@@ -61,8 +73,17 @@
   "bundler": {
     "platform": "node",
     "entries": [
-      "./src/index.js"
+      "./src/index.js",
+      "./src/transforms/add-component-parameters.js",
+      "./src/transforms/csf-2-to-3.ts",
+      "./src/transforms/csf-hoist-story-annotations.js",
+      "./src/transforms/csf-to-mdx.js",
+      "./src/transforms/move-builtin-addons.js",
+      "./src/transforms/storiesof-to-csf.js",
+      "./src/transforms/update-addon-info.js",
+      "./src/transforms/update-organisation-name.js",
+      "./src/transforms/upgrade-hierarchy-separators.js"
     ]
   },
-  "gitHead": "66a0d588184add900c48d49f3a62743fa9cc5185"
+  "gitHead": "fb45d854842e10fa119a65c628333e3a5d495e77"
 }

package/src/index.js

@@ -59,7 +59,17 @@ export async function runCodemod(codemod, { glob, logger, dryRun, rename, parser
     const parserArgs = inferredParser ? ['--parser', inferredParser] : [];
     spawnSync(
       'npx',
-      ['jscodeshift', '-t', `${TRANSFORM_DIR}/${codemod}.js`, ...parserArgs, ...files],
+      [
+        'jscodeshift',
+        // this makes sure codeshift doesn't transform our own source code with babel
+        // which is faster, and also makes sure the user won't see babel messages such as:
+        // [BABEL] Note: The code generator has deoptimised the styling of repo/node_modules/prettier/index.js as it exceeds the max of 500KB.
+        '--no-babel',
+        '-t',
+        `${TRANSFORM_DIR}/${codemod}.js`,
+        ...parserArgs,
+        ...files,
+      ],
       {
         stdio: 'inherit',
         shell: true,

package/src/lib/utils.ts

@@ -1,5 +1,5 @@
-import camelCase from 'lodash/camelCase';
-import upperFirst from 'lodash/upperFirst';
+import camelCase from 'lodash/camelCase.js';
+import upperFirst from 'lodash/upperFirst.js';
 
 export const sanitizeName = (name: string) => {
   let key = upperFirst(camelCase(name));

package/src/transforms/__testfixtures__/csf-to-mdx/decorators.input.js

@@ -3,7 +3,7 @@ import Button from './Button';
 
 export default {
   title: 'Some.Button',
-  decorators: [withKnobs, storyFn => <div className="foo">{storyFn}</div>],
+  decorators: [withKnobs, (storyFn) => <div className="foo">{storyFn}</div>],
 };
 
 export const story1 = () => <Button label="The Button" />;

package/src/transforms/__testfixtures__/csf-to-mdx/story-function.input.js

@@ -1,4 +1,4 @@
-import global from 'global';
+import { global } from '@storybook/global';
 
 const { document } = global;
 

package/src/transforms/__testfixtures__/csf-to-mdx/story-function.output.snapshot

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`csf-to-mdx transforms correctly using "story-function.input.js" data 1`] = `
-"import global from 'global';
+"import { global } from '@storybook/global';
 import { Meta, Story } from '@storybook/addon-docs';
 
 const {

package/src/transforms/__testfixtures__/storiesof-to-csf/decorators.input.js

@@ -5,5 +5,5 @@ import Button from './Button';
 // This isn't a valid story, but it tests the `import { comp } from ...` case
 storiesOf('Some.Button', module)
   .addDecorator(withKnobs)
-  .addDecorator(storyFn => <div className="foo">{storyFn}</div>)
+  .addDecorator((storyFn) => <div className="foo">{storyFn}</div>)
   .add('with decorator', () => <Button label="The Button" />);

package/src/transforms/__testfixtures__/storiesof-to-csf/export-function.input.js

@@ -8,5 +8,5 @@ export function someHelper() {
 }
 
 storiesOf('ComponentItem', module)
-  .addDecorator(storyFn => <div style={{ margin: '1rem' }}>{storyFn()}</div>)
+  .addDecorator((storyFn) => <div style={{ margin: '1rem' }}>{storyFn()}</div>)
   .add('loading', () => <ComponentItem loading />);

package/src/transforms/__testfixtures__/storiesof-to-csf/story-decorators.input.js

@@ -4,7 +4,7 @@ import Button from './Button';
 storiesOf('Some.Button', module)
   .add('with story params and decorators', () => <Button label="The Button" />, {
     bar: 1,
-    decorators: [withKnobs, storyFn => <div className="foo">{storyFn}</div>],
+    decorators: [withKnobs, (storyFn) => <div className="foo">{storyFn}</div>],
   })
   .add('with story decorators', () => <Button label="The Button" />, {
     decorators: [withKnobs],

package/src/transforms/__testfixtures__/update-addon-info/update-addon-info.input.js

@@ -1,25 +1,21 @@
 /* eslint-disable */
-import React from 'react'
-import Button from './Button'
+import React from 'react';
+import Button from './Button';
 
-import { storiesOf } from '@storybook/react'
-import { action } from '@storybook/addon-actions'
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
 
-storiesOf(
-  'Button'
-).addWithInfo(
+storiesOf('Button').addWithInfo(
   'simple usage',
   'This is the basic usage with the button with providing a label to show the text.',
   () => (
     <div>
       <Button label="The Button" onClick={action('onClick')} />
       <br />
-      <p>
-        Click the "?" mark at top-right to view the info.
-      </p>
+      <p>Click the "?" mark at top-right to view the info.</p>
     </div>
   )
-)
+);
 
 storiesOf('Button').addWithInfo(
   'simple usage (inline info)',
@@ -28,7 +24,7 @@ storiesOf('Button').addWithInfo(
     `,
   () => <Button label="The Button" onClick={action('onClick')} />,
   { inline: true }
-)
+);
 
 storiesOf('Button').addWithInfo(
   'simple usage (disable source)',
@@ -37,7 +33,7 @@ storiesOf('Button').addWithInfo(
     `,
   () => <Button label="The Button" onClick={action('onClick')} />,
   { source: false, inline: true }
-)
+);
 
 storiesOf('Button').addWithInfo(
   'simple usage (no header)',
@@ -46,7 +42,7 @@ storiesOf('Button').addWithInfo(
     `,
   () => <Button label="The Button" onClick={action('onClick')} />,
   { header: false, inline: true }
-)
+);
 
 storiesOf('Button').addWithInfo(
   'simple usage (no prop tables)',
@@ -55,7 +51,7 @@ storiesOf('Button').addWithInfo(
     `,
   () => <Button label="The Button" onClick={action('onClick')} />,
   { propTables: false, inline: true }
-)
+);
 
 storiesOf('Button').addWithInfo(
   'simple usage (custom propTables)',
@@ -80,22 +76,19 @@ storiesOf('Button').addWithInfo(
     </div>
   ),
   { inline: true, propTables: [Button] }
-)
+);
 
 storiesOf('Button').addWithInfo(
   'simple usage (JSX description)',
   <div>
     <h2>This is a JSX info section</h2>
     <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-      Sed ornare massa rutrum metus commodo, a mattis velit dignissim.
-      Fusce vestibulum turpis sed massa egestas pharetra. Sed at libero
-      nulla.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare massa rutrum metus
+      commodo, a mattis velit dignissim. Fusce vestibulum turpis sed massa egestas pharetra. Sed at
+      libero nulla.
     </p>
     <p>
-      <a href="https://github.com/storybookjs/react-storybook-addon-info">
-        This is a link
-      </a>
+      <a href="https://github.com/storybookjs/react-storybook-addon-info">This is a link</a>
     </p>
     <p>
       <img src="https://storybook.js.org/images/placeholders/350x150.png" />
@@ -105,27 +98,22 @@ storiesOf('Button').addWithInfo(
     <div>
       <Button label="The Button" onClick={action('onClick')} />
       <br />
-      <p>
-        Click the "?" mark at top-right to view the info.
-      </p>
+      <p>Click the "?" mark at top-right to view the info.</p>
     </div>
   )
-)
+);
 
 storiesOf('Button').addWithInfo(
   'simple usage (inline JSX description)',
   <div>
     <h2>This is a JSX info section</h2>
     <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-      Sed ornare massa rutrum metus commodo, a mattis velit dignissim.
-      Fusce vestibulum turpis sed massa egestas pharetra. Sed at libero
-      nulla.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare massa rutrum metus
+      commodo, a mattis velit dignissim. Fusce vestibulum turpis sed massa egestas pharetra. Sed at
+      libero nulla.
     </p>
     <p>
-      <a href="https://github.com/storybookjs/react-storybook-addon-info">
-        This is a link
-      </a>
+      <a href="https://github.com/storybookjs/react-storybook-addon-info">This is a link</a>
     </p>
     <p>
       <img src="https://storybook.js.org/images/placeholders/350x150.png" />
@@ -133,7 +121,7 @@ storiesOf('Button').addWithInfo(
   </div>,
   () => <Button label="The Button" onClick={action('onClick')} />,
   { inline: true }
-)
+);
 
 storiesOf('Button').addWithInfo(
   'simple usage (maxPropsInLine === 1)',
@@ -142,7 +130,7 @@ storiesOf('Button').addWithInfo(
     `,
   () => <Button label="The Button" onClick={action('onClick')} />,
   { inline: true, maxPropsIntoLine: 1 }
-)
+);
 
 storiesOf('Button').addWithInfo(
   'simple usage (maxPropObjectKeys === 5)',
@@ -151,7 +139,7 @@ storiesOf('Button').addWithInfo(
     `,
   () => <Button label="The Button" object={{ a: 1, b: 2, c: 3, d: 4, e: 5, f: 6 }} />,
   { inline: true, maxPropObjectKeys: 5 }
-)
+);
 
 storiesOf('Button').addWithInfo(
   'simple usage (maxPropArrayLength === 8)',
@@ -160,7 +148,7 @@ storiesOf('Button').addWithInfo(
     `,
   () => <Button label="The Button" array={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]} />,
   { inline: true, maxPropArrayLength: 8 }
-)
+);
 
 storiesOf('Button').addWithInfo(
   'simple usage (maxPropStringLength === 10)',
@@ -169,7 +157,7 @@ storiesOf('Button').addWithInfo(
     `,
   () => <Button label="The Button" string="1 2 3 4 5 6 7 8" />,
   { inline: true, maxPropStringLength: 5 }
-)
+);
 
 storiesOf('Button').addWithInfo(
   'with custom styles',
@@ -180,19 +168,17 @@ storiesOf('Button').addWithInfo(
   () => <Button label="The Button" onClick={action('onClick')} />,
   {
     inline: true,
-    styles: stylesheet => {
+    styles: (stylesheet) => {
       stylesheet.infoPage = {
-        backgroundColor: '#ccc'
-      }
-      return stylesheet
-    }
+        backgroundColor: '#ccc',
+      };
+      return stylesheet;
+    },
   }
-)
+);
 
 storiesOf('shared/ProgressBar', module)
   .addDecorator(withKnobs)
   .addWithInfo('default style', () => (
-    <ProgressBar progress={number('progress', 25)}
-      delay={number('delay', 500)}
-    />
+    <ProgressBar progress={number('progress', 25)} delay={number('delay', 500)} />
   ));

package/src/transforms/__testfixtures__/update-addon-info/update-addon-info.output.snapshot

@@ -2,27 +2,23 @@
 
 exports[`update-addon-info transforms correctly using "update-addon-info.input.js" data 1`] = `
 "/* eslint-disable */
-import React from 'react'
-import Button from './Button'
+import React from 'react';
+import Button from './Button';
 
-import { storiesOf } from '@storybook/react'
-import { action } from '@storybook/addon-actions'
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
 
 import { withInfo } from \\"@storybook/addon-info\\";
 
-storiesOf(
-  'Button'
-).add('simple usage', withInfo(
+storiesOf('Button').add('simple usage', withInfo(
   'This is the basic usage with the button with providing a label to show the text.'
 )(() => (
   <div>
     <Button label=\\"The Button\\" onClick={action('onClick')} />
     <br />
-    <p>
-      Click the \\"?\\" mark at top-right to view the info.
-    </p>
+    <p>Click the \\"?\\" mark at top-right to view the info.</p>
   </div>
-)))
+)));
 
 storiesOf('Button').add('simple usage (inline info)', withInfo({
   text: \`
@@ -30,7 +26,7 @@ storiesOf('Button').add('simple usage (inline info)', withInfo({
     \`,
 
   inline: true
-})(() => <Button label=\\"The Button\\" onClick={action('onClick')} />))
+})(() => <Button label=\\"The Button\\" onClick={action('onClick')} />));
 
 storiesOf('Button').add('simple usage (disable source)', withInfo({
   text: \`
@@ -39,7 +35,7 @@ storiesOf('Button').add('simple usage (disable source)', withInfo({
 
   source: false,
   inline: true
-})(() => <Button label=\\"The Button\\" onClick={action('onClick')} />))
+})(() => <Button label=\\"The Button\\" onClick={action('onClick')} />));
 
 storiesOf('Button').add('simple usage (no header)', withInfo({
   text: \`
@@ -48,7 +44,7 @@ storiesOf('Button').add('simple usage (no header)', withInfo({
 
   header: false,
   inline: true
-})(() => <Button label=\\"The Button\\" onClick={action('onClick')} />))
+})(() => <Button label=\\"The Button\\" onClick={action('onClick')} />));
 
 storiesOf('Button').add('simple usage (no prop tables)', withInfo({
   text: \`
@@ -57,7 +53,7 @@ storiesOf('Button').add('simple usage (no prop tables)', withInfo({
 
   propTables: false,
   inline: true
-})(() => <Button label=\\"The Button\\" onClick={action('onClick')} />))
+})(() => <Button label=\\"The Button\\" onClick={action('onClick')} />));
 
 storiesOf('Button').add('simple usage (custom propTables)', withInfo({
   text: \`
@@ -82,20 +78,17 @@ storiesOf('Button').add('simple usage (custom propTables)', withInfo({
     <Button label=\\"The Button\\" onClick={action('onClick')} />
     <br />
   </div>
-)))
+)));
 
 storiesOf('Button').add('simple usage (JSX description)', withInfo(<div>
   <h2>This is a JSX info section</h2>
   <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-    Sed ornare massa rutrum metus commodo, a mattis velit dignissim.
-    Fusce vestibulum turpis sed massa egestas pharetra. Sed at libero
-    nulla.
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare massa rutrum metus
+    commodo, a mattis velit dignissim. Fusce vestibulum turpis sed massa egestas pharetra. Sed at
+    libero nulla.
   </p>
   <p>
-    <a href=\\"https://github.com/storybookjs/react-storybook-addon-info\\">
-      This is a link
-    </a>
+    <a href=\\"https://github.com/storybookjs/react-storybook-addon-info\\">This is a link</a>
   </p>
   <p>
     <img src=\\"https://storybook.js.org/images/placeholders/350x150.png\\" />
@@ -104,25 +97,20 @@ storiesOf('Button').add('simple usage (JSX description)', withInfo(<div>
   <div>
     <Button label=\\"The Button\\" onClick={action('onClick')} />
     <br />
-    <p>
-      Click the \\"?\\" mark at top-right to view the info.
-    </p>
+    <p>Click the \\"?\\" mark at top-right to view the info.</p>
   </div>
-)))
+)));
 
 storiesOf('Button').add('simple usage (inline JSX description)', withInfo({
   text: <div>
     <h2>This is a JSX info section</h2>
     <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-      Sed ornare massa rutrum metus commodo, a mattis velit dignissim.
-      Fusce vestibulum turpis sed massa egestas pharetra. Sed at libero
-      nulla.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare massa rutrum metus
+      commodo, a mattis velit dignissim. Fusce vestibulum turpis sed massa egestas pharetra. Sed at
+      libero nulla.
     </p>
     <p>
-      <a href=\\"https://github.com/storybookjs/react-storybook-addon-info\\">
-        This is a link
-      </a>
+      <a href=\\"https://github.com/storybookjs/react-storybook-addon-info\\">This is a link</a>
     </p>
     <p>
       <img src=\\"https://storybook.js.org/images/placeholders/350x150.png\\" />
@@ -130,7 +118,7 @@ storiesOf('Button').add('simple usage (inline JSX description)', withInfo({
   </div>,
 
   inline: true
-})(() => <Button label=\\"The Button\\" onClick={action('onClick')} />))
+})(() => <Button label=\\"The Button\\" onClick={action('onClick')} />));
 
 storiesOf('Button').add('simple usage (maxPropsInLine === 1)', withInfo({
   text: \`
@@ -139,7 +127,7 @@ storiesOf('Button').add('simple usage (maxPropsInLine === 1)', withInfo({
 
   inline: true,
   maxPropsIntoLine: 1
-})(() => <Button label=\\"The Button\\" onClick={action('onClick')} />))
+})(() => <Button label=\\"The Button\\" onClick={action('onClick')} />));
 
 storiesOf('Button').add('simple usage (maxPropObjectKeys === 5)', withInfo({
   text: \`
@@ -150,7 +138,7 @@ storiesOf('Button').add('simple usage (maxPropObjectKeys === 5)', withInfo({
   maxPropObjectKeys: 5
 })(
   () => <Button label=\\"The Button\\" object={{ a: 1, b: 2, c: 3, d: 4, e: 5, f: 6 }} />
-))
+));
 
 storiesOf('Button').add('simple usage (maxPropArrayLength === 8)', withInfo({
   text: \`
@@ -161,7 +149,7 @@ storiesOf('Button').add('simple usage (maxPropArrayLength === 8)', withInfo({
   maxPropArrayLength: 8
 })(
   () => <Button label=\\"The Button\\" array={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]} />
-))
+));
 
 storiesOf('Button').add('simple usage (maxPropStringLength === 10)', withInfo({
   text: \`
@@ -170,7 +158,7 @@ storiesOf('Button').add('simple usage (maxPropStringLength === 10)', withInfo({
 
   inline: true,
   maxPropStringLength: 5
-})(() => <Button label=\\"The Button\\" string=\\"1 2 3 4 5 6 7 8\\" />))
+})(() => <Button label=\\"The Button\\" string=\\"1 2 3 4 5 6 7 8\\" />));
 
 storiesOf('Button').add('with custom styles', withInfo({
   text: \`
@@ -180,19 +168,17 @@ storiesOf('Button').add('with custom styles', withInfo({
 
   inline: true,
 
-  styles: stylesheet => {
+  styles: (stylesheet) => {
     stylesheet.infoPage = {
-      backgroundColor: '#ccc'
-    }
-    return stylesheet
+      backgroundColor: '#ccc',
+    };
+    return stylesheet;
   }
-})(() => <Button label=\\"The Button\\" onClick={action('onClick')} />))
+})(() => <Button label=\\"The Button\\" onClick={action('onClick')} />));
 
 storiesOf('shared/ProgressBar', module)
   .addDecorator(withKnobs)
   .add('default style', withInfo('default style')(() => (
-    <ProgressBar progress={number('progress', 25)}
-      delay={number('delay', 500)}
-    />
+    <ProgressBar progress={number('progress', 25)} delay={number('delay', 500)} />
   )));"
 `;