Merge branch 'master' into cli-helpful-errors

.github/CODEOWNERS

@@ -0,0 +1,48 @@
+.circleci/ @hypnosphi @ndelangen
+.github/ @danielduan
+
+/addons/a11y/ @jbovenschen
+/addons/actions/ @rhalff
+/addons/background/ @ndelangen @hypnosphi
+/addons/centered/ @kazupon
+/addons/events/ @z4o4z @ndelangen
+/addons/graphql/ @mnmtanish
+/addons/info/ @theinterned @z4o4z @UsulPro @hypnosphi @dangreenisrael @danielduan
+/addons/jest/ @renaudtertrais
+/addons/knobs/ @alexandrebodin @theinterned @leonrodenburg @alterx @hypnosphi
+/addons/links/ @hypnosphi @ndelangen
+/addons/notes/ @alexandrebodin
+/addons/options/ @danielduan @UsulPro
+/addons/storyshots/ @igor-dv @thomasbertet @hypnosphi 
+/addons/storysource/ @igor-dv
+/addons/viewport/ @saponifi3d
+
+/app/angular/ @alterx @igor-dv
+/app/polymer/ @ndelangen @naipath @leonrodenburg
+/app/react/ @xavcz @shilman @thomasbertet
+/app/react-native/ @rmevans9 @danielduan @Gongreg @tmeasday
+/app/vue/ @thomasbertet @kazupon
+
+/docs/ @ndelangen @shilman @hypnosphi
+
+/examples/angular-cli/ @igor-dv @alterx
+/examples/cra-kitchen-sink/ @ndelangen @UsulPro @hypnosphi 
+/examples/crna-kitchen-sink/ @Gongreg @danielduan
+/examples/official-storybook/ @hypnosphi @danielduan @UsulPro
+/examples/polymer-cli/ @naipath @igor-dv
+/examples/react-native-vanilla/ @tmeasday @danielduan
+/examples/vue-kitchen-sink/ @igor-dv @alexandrebodin
+
+/lib/addons/ @ndelangen @theinterned
+/lib/channel-postmessage/ @mnmtanish @ndelangen
+/lib/channel-websocket/ @mnmtanish @ndelangen
+/lib/channels/ @mnmtanish @ndelangen
+/lib/cli/ @hypnosphi @ndelangen @danielduan @shilman @stijnkoopal
+/lib/client-logger/ @dangreenisrael
+/lib/codemod/ @aaronmcadam @ndelangen
+/lib/components/ @ndelangen @hypnosphi @tmeasday
+/lib/core/ @tmeasday @igor-dv @alterx
+/lib/node-logger/ @dangreenisrael
+/lib/ui/ @tmeasday @igor-dv @hypnosphi @ndelangen
+
+/scripts/ @ndelangen @igor-dv @hypnosphi

.github/PULL_REQUEST_TEMPLATE.md

@@ -4,7 +4,7 @@ Issue:
 
 ## How to test
 
-Is this testable with jest or storyshots?
+Is this testable with Jest or Chromatic screenshots?
 
 Does this need a new example in the kitchen sink apps?
 

addons/info/src/__snapshots__/index.test.js.snap

@@ -93,7 +93,6 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
             "backgroundColor": "#fff",
             "border": "1px solid #eee",
             "borderRadius": "2px",
-            "boxShadow": "0px 2px 3px rgba(0, 0, 0, 0.05)",
             "color": "#444",
             "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
             "fontSize": "15px",
@@ -266,7 +265,6 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
                   "backgroundColor": "#fff",
                   "border": "1px solid #eee",
                   "borderRadius": "2px",
-                  "boxShadow": "0px 2px 3px rgba(0, 0, 0, 0.05)",
                   "color": "#444",
                   "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
                   "fontSize": "15px",
@@ -487,7 +485,6 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
                           "backgroundColor": "#fff",
                           "border": "1px solid #eee",
                           "borderRadius": "2px",
-                          "boxShadow": "0px 2px 3px rgba(0, 0, 0, 0.05)",
                           "color": "#444",
                           "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
                           "fontSize": "15px",
@@ -863,7 +860,6 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
                                                       "backgroundColor": "#fff",
                                                       "border": "1px solid #eee",
                                                       "borderRadius": "2px",
-                                                      "boxShadow": "0px 2px 3px rgba(0, 0, 0, 0.05)",
                                                       "color": "#444",
                                                       "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
                                                       "fontSize": "15px",
@@ -1005,7 +1001,6 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
                                                       "backgroundColor": "#fff",
                                                       "border": "1px solid #eee",
                                                       "borderRadius": "2px",
-                                                      "boxShadow": "0px 2px 3px rgba(0, 0, 0, 0.05)",
                                                       "color": "#444",
                                                       "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
                                                       "fontSize": "15px",
@@ -1277,7 +1272,6 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
                                                       "backgroundColor": "#fff",
                                                       "border": "1px solid #eee",
                                                       "borderRadius": "2px",
-                                                      "boxShadow": "0px 2px 3px rgba(0, 0, 0, 0.05)",
                                                       "color": "#444",
                                                       "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
                                                       "fontSize": "15px",
@@ -1576,7 +1570,6 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
                                                       "backgroundColor": "#fff",
                                                       "border": "1px solid #eee",
                                                       "borderRadius": "2px",
-                                                      "boxShadow": "0px 2px 3px rgba(0, 0, 0, 0.05)",
                                                       "color": "#444",
                                                       "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
                                                       "fontSize": "15px",
@@ -1713,7 +1706,6 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
                                                       "backgroundColor": "#fff",
                                                       "border": "1px solid #eee",
                                                       "borderRadius": "2px",
-                                                      "boxShadow": "0px 2px 3px rgba(0, 0, 0, 0.05)",
                                                       "color": "#444",
                                                       "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
                                                       "fontSize": "15px",
@@ -1878,7 +1870,6 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
                                   "backgroundColor": "#fff",
                                   "border": "1px solid #eee",
                                   "borderRadius": "2px",
-                                  "boxShadow": "0px 2px 3px rgba(0, 0, 0, 0.05)",
                                   "color": "#444",
                                   "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
                                   "fontSize": "15px",

addons/info/src/components/Story.js

@@ -58,7 +58,6 @@ const stylesheet = {
     border: '1px solid #eee',
     padding: '20px 40px 40px',
     borderRadius: '2px',
-    boxShadow: '0px 2px 3px rgba(0, 0, 0, 0.05)',
     backgroundColor: '#fff',
     marginTop: '20px',
     marginBottom: '20px',

addons/knobs/README.md

@@ -310,6 +310,21 @@ const groupId = 'GROUP-ID1';
 const value = selectV2(label, options, defaultValue, groupId);
 ```
 
+### files
+
+Allows you to get a value from a file input from the user.
+
+```js
+import { files } from '@storybook/addon-knobs/react';
+
+const label = 'Images';
+const defaultValue = [];
+
+const value = files(label, accept, defaultValue);
+```
+
+> Multiple files can be selected, and will be returned as an array of [Data URLs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs)
+
 ### date
 
 Allow you to get date (and time) from the user.

addons/knobs/example/stories/index.js

@@ -1,7 +1,18 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import moment from 'moment';
-import { withKnobs, number, object, boolean, text, select, date, array, color } from '../../src';
+import {
+  withKnobs,
+  number,
+  object,
+  boolean,
+  text,
+  select,
+  date,
+  array,
+  color,
+  files,
+} from '../../src';
 
 const stories = storiesOf('Example of Knobs', module);
 
@@ -20,6 +31,10 @@ stories.add('with all knobs', () => {
 
   const passions = array('Passions', ['Fishing', 'Skiing']);
 
+  const images = files('Happy Picture', 'image/*', [
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfiARwMCyEWcOFPAAAAP0lEQVQoz8WQMQoAIAwDL/7/z3GwghSp4KDZyiUpBMCYUgd8rehtH16/l3XewgU2KAzapjXBbNFaPS6lDMlKB6OiDv3iAH1OAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE4LTAxLTI4VDEyOjExOjMzLTA3OjAwlAHQBgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxOC0wMS0yOFQxMjoxMTozMy0wNzowMOVcaLoAAAAASUVORK5CYII=',
+  ]);
+
   const customStyle = object('Style', {
     fontFamily: 'Arial',
     padding: 20,
@@ -38,6 +53,9 @@ stories.add('with all knobs', () => {
       <ul>{passions.map(p => <li key={p}>{p}</li>)}</ul>
       <p>My favorite number is {favoriteNumber}.</p>
       <p>My most comfortable room temperature is {comfortTemp} degrees Fahrenheit.</p>
+      <p>
+        When I am happy I look like this: <img src={images[0]} alt="happy" />
+      </p>
     </div>
   );
 });

addons/knobs/src/angular/index.js

@@ -14,10 +14,11 @@ import {
   select,
   selectV2,
   button,
+  files,
   manager,
 } from '../base';
 
-export { knob, text, boolean, number, color, object, array, date, select, selectV2, button };
+export { knob, text, boolean, number, color, object, array, date, select, selectV2, button, files };
 
 export const angularHandler = (channel, knobStore) => getStory => context =>
   prepareComponent({ getStory, context, channel, knobStore });

addons/knobs/src/base.js

@@ -69,3 +69,7 @@ export function date(name, value = new Date(), groupId) {
 export function button(name, callback, groupId) {
   return manager.knob(name, { type: 'button', callback, hideLabel: true, groupId });
 }
+
+export function files(name, accept, value = []) {
+  return manager.knob(name, { type: 'files', accept, value });
+}

addons/knobs/src/components/types/Files.js

@@ -0,0 +1,38 @@
+import { FileReader } from 'global';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+function fileReaderPromise(file) {
+  return new Promise(resolve => {
+    const fileReader = new FileReader();
+    fileReader.onload = e => resolve(e.currentTarget.result);
+    fileReader.readAsDataURL(file);
+  });
+}
+
+const FilesType = ({ knob, onChange }) => (
+  <input
+    id={knob.name}
+    type="file"
+    multiple
+    onChange={e => Promise.all(Array.from(e.target.files).map(fileReaderPromise)).then(onChange)}
+    accept={knob.accept}
+  />
+);
+
+FilesType.defaultProps = {
+  knob: {},
+  onChange: value => value,
+};
+
+FilesType.propTypes = {
+  knob: PropTypes.shape({
+    name: PropTypes.string,
+  }),
+  onChange: PropTypes.func,
+};
+
+FilesType.serialize = () => undefined;
+FilesType.deserialize = () => undefined;
+
+export default FilesType;

addons/knobs/src/components/types/index.js

@@ -7,6 +7,7 @@ import SelectType from './Select';
 import ArrayType from './Array';
 import DateType from './Date';
 import ButtonType from './Button';
+import FilesType from './Files';
 
 export default {
   text: TextType,
@@ -18,4 +19,5 @@ export default {
   array: ArrayType,
   date: DateType,
   button: ButtonType,
+  files: FilesType,
 };

addons/knobs/src/index.js

@@ -9,6 +9,7 @@ import {
   array,
   boolean,
   button,
+  files,
   color,
   date,
   knob,
@@ -20,7 +21,7 @@ import {
   text,
 } from './base';
 
-export { knob, text, boolean, number, color, object, array, date, button, select, selectV2 };
+export { knob, text, boolean, number, color, object, array, date, button, select, selectV2, files };
 
 deprecate(() => {},
 'Using @storybook/addon-knobs directly is discouraged, please use @storybook/addon-knobs/{{framework}}');

addons/knobs/src/polymer/index.js

@@ -2,9 +2,21 @@ import addons from '@storybook/addons';
 import window from 'global';
 import './WrapStory.html';
 
-import { knob, text, boolean, number, color, object, array, date, select, manager } from '../base';
-
-export { knob, text, boolean, number, color, object, array, date, select };
+import {
+  knob,
+  text,
+  boolean,
+  number,
+  color,
+  object,
+  array,
+  date,
+  select,
+  files,
+  manager,
+} from '../base';
+
+export { knob, text, boolean, number, color, object, array, date, select, files };
 
 export function button(name, callback) {
   return manager.knob(name, { type: 'button', value: Date.now(), callback, hideLabel: true });

addons/knobs/src/react/index.js

@@ -15,10 +15,11 @@ import {
   select,
   selectV2,
   button,
+  files,
   manager,
 } from '../base';
 
-export { knob, text, boolean, number, color, object, array, date, select, selectV2, button };
+export { knob, text, boolean, number, color, object, array, date, select, selectV2, button, files };
 
 export const reactHandler = (channel, knobStore) => getStory => context => {
   const initialContent = getStory(context);

addons/knobs/src/vue/index.js

@@ -12,10 +12,11 @@ import {
   select,
   selectV2,
   button,
+  files,
   manager,
 } from '../base';
 
-export { knob, text, boolean, number, color, object, array, date, select, selectV2, button };
+export { knob, text, boolean, number, color, object, array, date, select, selectV2, button, files };
 
 export const vueHandler = (channel, knobStore) => getStory => context => ({
   data() {

addons/notes/package.json

@@ -21,7 +21,7 @@
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
-    "marked": "^0.3.18",
+    "marked": "^0.3.19",
     "prop-types": "^15.6.1",
     "util-deprecate": "^1.0.2"
   },

examples/cra-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot

@@ -60,7 +60,7 @@ exports[`Storyshots Button addons composition 1`] = `
     </button>
     <div>
       <div
-        style="font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;box-shadow:0px 2px 3px rgba(0, 0, 0, 0.05);background-color:#fff;margin-top:20px;margin-bottom:20px"
+        style="font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
       >
         <div
           style="border-bottom:1px solid #eee;padding-top:10px;margin-bottom:10px"
@@ -255,7 +255,7 @@ exports[`Storyshots Button with new info 1`] = `
     </button>
     <div>
       <div
-        style="font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;box-shadow:0px 2px 3px rgba(0, 0, 0, 0.05);background-color:#fff;margin-top:20px;margin-bottom:20px"
+        style="font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
       >
         <div
           style="border-bottom:1px solid #eee;padding-top:10px;margin-bottom:10px"
@@ -674,7 +674,7 @@ exports[`Storyshots Button with some info 1`] = `
     </button>
     <div>
       <div
-        style="font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;box-shadow:0px 2px 3px rgba(0, 0, 0, 0.05);background-color:#fff;margin-top:20px;margin-bottom:20px"
+        style="font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
       >
         <div
           style="border-bottom:1px solid #eee;padding-top:10px;margin-bottom:10px"