Merge pull request #3040 from storybooks/storysource-adjustments

Addon Storysource improvements
storybookjs · Feb 20, 2018 · 3fb98f5 · 3fb98f5
2 parents 3edc7d1 + 8575ebf
commit 3fb98f5
Show file tree

Hide file tree

Showing 14 changed files with 341 additions and 118 deletions.
diff --git a/ADDONS_SUPPORT.md b/ADDONS_SUPPORT.md
@@ -2,16 +2,17 @@
 
 | |[React](app/react)|[React Native](app/react-native)|[Vue](app/vue)|[Angular](app/angular)| [Polymer](app/polymer)|
 | ----------- |:-------:|:-------:|:-------:|:-------:|:-------:|
-|[a11y](addons/a11y)            |+| | | | |
-|[actions](addons/actions)      |+|+|+|+|+|
-|[background](addons/background)|+| | | | |
-|[centered](addons/centered)    |+| |+| | |
-|[events](addons/events)        |+| | | | |
-|[graphql](addons/graphql)      |+| | | | |
-|[info](addons/info)            |+| | | | |
-|[jest](addons/jest)            |+| | | | |
-|[knobs](addons/knobs)          |+|+|+|+|+|
-|[links](addons/links)          |+|+|+|+| |
-|[notes](addons/notes)          |+| |+|+|+|
-|[storyshots](addons/storyshots)|+|+|+|+| |
-|[viewport](addons/viewport)    |+| | | | |
+|[a11y](addons/a11y)              |+| | | | |
+|[actions](addons/actions)        |+|+|+|+|+|
+|[background](addons/background)  |+| | | | |
+|[centered](addons/centered)      |+| |+| | |
+|[events](addons/events)          |+| | | | |
+|[graphql](addons/graphql)        |+| | | | |
+|[info](addons/info)              |+| | | | |
+|[jest](addons/jest)              |+| | | | |
+|[knobs](addons/knobs)            |+|+|+|+|+|
+|[links](addons/links)            |+|+|+|+| |
+|[notes](addons/notes)            |+| |+|+|+|
+|[storyshots](addons/storyshots)  |+|+|+|+| |
+|[storysource](addons/storysource)|+| |+|+|+|
+|[viewport](addons/viewport)      |+| | | | |
diff --git a/__mocks__/inject-decorator.ugly-comments-stories.txt b/__mocks__/inject-decorator.ugly-comments-stories.txt
@@ -0,0 +1,23 @@
+/* global window */
+/* eslint-disable global-require, import/no-dynamic-require */
+
+import React from 'react';
+
+/*
+ eslint-disable some kind
+ of multi line ignore, though
+ I'm not sure it's possible.
+*/
+
+import { storiesOf } from '@storybook/react';
+
+/* eslint-disable-line */ const x = 0;
+
+// eslint-disable-line
+storiesOf('Foo', module)
+  .add('bar', () => <div>baz</div>);
+
+/*
+ This is actually a good comment that will help
+ users to understand what's going on here.
+*/
diff --git a/addons/storysource/README.md b/addons/storysource/README.md
@@ -2,6 +2,8 @@
 
 This addon is used to show stories source in the addon panel.
 
+![Storysource Demo](demo.gif)
+
 ## Getting Started
 
 First, install the addon
@@ -31,3 +33,83 @@ module.exports = {
   },
 };
 ```
+
+## Loader Options
+
+The loader can be customized with the following options:
+
+### prettierConfig
+
+The prettier configuration that will be used to format the story source in the addon panel.
+
+Defaults:
+```js
+{
+  printWidth: 120,
+  tabWidth: 2,
+  bracketSpacing: true,
+  trailingComma: 'es5',
+  singleQuote: true,
+}
+```
+
+Usage: 
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.stories\.jsx?$/,
+        loaders: [
+          {
+            loader: require.resolve('@storybook/addon-storysource/loader'),
+            options: {
+              prettierConfig: {
+                printWidth: 80,
+                singleQuote: false,
+              }
+            }
+          }
+        ],
+        enforce: 'pre',
+      },
+    ],
+  },
+};
+```
+
+### uglyCommentsRegex
+
+The array of regex that is used to remove "ugly" comments.
+
+Defaults:
+```js
+[/^eslint-.*/, /^global.*/]
+```
+
+Usage:
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.stories\.jsx?$/,
+        loaders: [
+          {
+            loader: require.resolve('@storybook/addon-storysource/loader'),
+            options: {
+              uglyCommentsRegex: [
+                /^eslint-.*/, 
+                /^global.*/,
+              ]
+            }
+          }
+        ],
+        enforce: 'pre',
+      },
+    ],
+  },
+};
+```
diff --git a/addons/storysource/demo.gif b/addons/storysource/demo.gif
diff --git a/addons/storysource/package.json b/addons/storysource/package.json
@@ -25,7 +25,8 @@
     "acorn-jsx": "^4.1.1",
     "acorn-stage3": "^0.5.0",
     "estraverse": "^4.2.0",
-    "line-column": "^1.0.2",
+    "loader-utils": "^1.1.0",
+    "prettier": "^1.10.2",
     "prop-types": "^15.5.10",
     "react-syntax-highlighter": "^7.0.0"
   },

diff --git a/addons/storysource/src/loader/__snapshots__/inject-decorator.test.js.snap b/addons/storysource/src/loader/__snapshots__/inject-decorator.test.js.snap
@@ -4,11 +4,11 @@ exports[`inject-decorator positive - angular calculates "adds" map 1`] = `
 Object {
   "Custom|ng-content@Default": Object {
     "endLoc": Object {
-      "col": 3,
+      "col": 2,
       "line": 15,
     },
     "startLoc": Object {
-      "col": 44,
+      "col": 43,
       "line": 10,
     },
   },
@@ -38,141 +38,141 @@ exports[`inject-decorator positive calculates "adds" map 1`] = `
 Object {
   "Addons|Info.Decorator@Use Info as story decorator": Object {
     "endLoc": Object {
-      "col": 74,
+      "col": 73,
       "line": 137,
     },
     "startLoc": Object {
-      "col": 8,
+      "col": 7,
       "line": 137,
     },
   },
   "Addons|Info.GitHub issues@#1814": Object {
     "endLoc": Object {
-      "col": 5,
+      "col": 4,
       "line": 152,
     },
     "startLoc": Object {
-      "col": 3,
+      "col": 2,
       "line": 146,
     },
   },
   "Addons|Info.Markdown@Displays Markdown in description": Object {
     "endLoc": Object {
-      "col": 97,
+      "col": 96,
       "line": 44,
     },
     "startLoc": Object {
-      "col": 3,
+      "col": 2,
       "line": 43,
     },
   },
   "Addons|Info.Options.TableComponent@Use a custom component for the table": Object {
     "endLoc": Object {
-      "col": 42,
+      "col": 41,
       "line": 130,
     },
     "startLoc": Object {
-      "col": 3,
+      "col": 2,
       "line": 127,
     },
   },
   "Addons|Info.Options.header@Shows or hides Info Addon header": Object {
     "endLoc": Object {
-      "col": 42,
+      "col": 41,
       "line": 60,
     },
     "startLoc": Object {
-      "col": 3,
+      "col": 2,
       "line": 56,
     },
   },
   "Addons|Info.Options.inline@Inlines component inside story": Object {
     "endLoc": Object {
-      "col": 42,
+      "col": 41,
       "line": 52,
     },
     "startLoc": Object {
-      "col": 3,
+      "col": 2,
       "line": 48,
     },
   },
   "Addons|Info.Options.propTables@Shows additional component prop tables": Object {
     "endLoc": Object {
-      "col": 42,
+      "col": 41,
       "line": 76,
     },
     "startLoc": Object {
-      "col": 3,
+      "col": 2,
       "line": 72,
     },
   },
   "Addons|Info.Options.propTablesExclude@Exclude component from prop tables": Object {
     "endLoc": Object {
-      "col": 5,
+      "col": 4,
       "line": 89,
     },
     "startLoc": Object {
-      "col": 3,
+      "col": 2,
       "line": 80,
     },
   },
   "Addons|Info.Options.source@Shows or hides Info Addon source": Object {
     "endLoc": Object {
-      "col": 42,
+      "col": 41,
       "line": 68,
     },
     "startLoc": Object {
-      "col": 3,
+      "col": 2,
       "line": 64,
     },
   },
   "Addons|Info.Options.styles@Extend info styles with an object": Object {
     "endLoc": Object {
-      "col": 44,
+      "col": 43,
       "line": 108,
     },
     "startLoc": Object {
-      "col": 5,
+      "col": 4,
       "line": 94,
     },
   },
   "Addons|Info.Options.styles@Full control over styles using a function": Object {
     "endLoc": Object {
-      "col": 44,
+      "col": 43,
       "line": 123,
     },
     "startLoc": Object {
-      "col": 5,
+      "col": 4,
       "line": 111,
     },
   },
   "Addons|Info.React Docgen@Comments from Flow declarations": Object {
     "endLoc": Object {
-      "col": 86,
+      "col": 85,
       "line": 22,
     },
     "startLoc": Object {
-      "col": 5,
+      "col": 4,
       "line": 19,
     },
   },
   "Addons|Info.React Docgen@Comments from PropType declarations": Object {
     "endLoc": Object {
-      "col": 80,
+      "col": 79,
       "line": 16,
     },
     "startLoc": Object {
-      "col": 5,
+      "col": 4,
       "line": 13,
     },
   },
   "Addons|Info.React Docgen@Comments from component declaration": Object {
     "endLoc": Object {
-      "col": 71,
+      "col": 70,
       "line": 28,
     },
     "startLoc": Object {
-      "col": 5,
+      "col": 4,
       "line": 25,
     },
   },
@@ -336,6 +336,22 @@ storiesOf('Addons|Info.GitHub issues', module).addDecorator(withStorySource(__ST
 "
 `;
 
+exports[`inject-decorator stories with ugly comments should delete ugly comments from the generated story source 1`] = `
+"import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+
+const x = 0;
+
+storiesOf('Foo', module).add('bar', () => <div>baz</div>);
+
+/*
+ This is actually a good comment that will help
+ users to understand what's going on here.
+*/
+"
+`;
+
 exports[`inject-decorator will not change the source when there are no "storiesOf" functions 1`] = `
 "while(true) {
   console.log(\\"it's a kind of magic\\");

diff --git a/addons/storysource/src/loader/default-options.js b/addons/storysource/src/loader/default-options.js
@@ -0,0 +1,12 @@
+const defaultOptions = {
+  prettierConfig: {
+    printWidth: 120,
+    tabWidth: 2,
+    bracketSpacing: true,
+    trailingComma: 'es5',
+    singleQuote: true,
+  },
+  uglyCommentsRegex: [/^eslint-.*/, /^global.*/],
+};
+
+export default defaultOptions;