Merge branch 'master' into TableComponent_option_for_addon-info

addons/actions/package.json

@@ -16,9 +16,7 @@
     "url": "https://github.com/storybooks/storybook.git"
   },
   "scripts": {
-    "deploy-storybook": "storybook-to-ghpages",
-    "prepare": "node ../../scripts/prepare.js",
-    "storybook": "start-storybook -p 9001"
+    "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
     "@storybook/addons": "^3.2.16",

addons/actions/src/preview.js

@@ -13,9 +13,9 @@ function _format(arg) {
 }
 
 export function action(name) {
-  // eslint-disable-next-line no-unused-vars, func-names
-  const handler = function(..._args) {
-    const args = Array.from(_args).map(_format);
+  // eslint-disable-next-line no-shadow
+  const handler = function action(..._args) {
+    const args = _args.map(_format);
     const channel = addons.getChannel();
     const id = uuid();
     channel.emit(EVENT_ID, {
@@ -24,8 +24,12 @@ export function action(name) {
     });
   };
 
-  const fnName = name && typeof name === 'string' ? name.replace(/\W+/g, '_') : 'action';
-  Object.defineProperty(handler, 'name', { value: fnName });
+  // This condition is true in modern browsers that implement Function#name properly
+  const canConfigureName = Object.getOwnPropertyDescriptor(handler, 'name').configurable;
+
+  if (canConfigureName && name && typeof name === 'string') {
+    Object.defineProperty(handler, 'name', { value: name });
+  }
   return handler;
 }
 

addons/jest/README.md

@@ -77,11 +77,11 @@ Assuming that you have created a test files `MyComponent.test.js` and `MyOtherCo
 In your `story.js`
 
 ```js
-import jestTestResults from '../.jest-test-results.json';
+import results from '../.jest-test-results.json';
 import { withTests } from '@storybook/addon-jest';
 
 storiesOf('MyComponent', module)
-  .addDecorator(withTests(jestTestResults, { filesExt: '.test.js' })('MyComponent', 'MyOtherComponent'))
+  .addDecorator(withTests({ results })('MyComponent', 'MyOtherComponent'))
   .add('This story shows test results from MyComponent.test.js and MyOtherComponent.test.js', () => (
     <div>Jest results in storybook</div>
   ));
@@ -90,11 +90,11 @@ storiesOf('MyComponent', module)
 Or in order to avoid importing `.jest-test-results.json` in each story, you can create a simple file `withTests.js`:
 
 ```js
-import jestTestResults from '../.jest-test-results.json';
+import results from '../.jest-test-results.json';
 import { withTests } from '@storybook/addon-jest';
 
-export default withTests(jestTestResults, {
-  filesExt: '.test.js',
+export default withTests({
+  results,
 });
 ```
 
@@ -111,6 +111,11 @@ storiesOf('MyComponent', module)
   ));
 ```
 
+### withTests(options)
+
+- **options.results**: [OBJECT] jest output results. *mandatory*
+- **filteExt**: [STRING] test file extention. *optionnal*. This allow you to write "MyComponent" and not "MyComponent.test.js". It will be used as regex to find your file results. Default value is `((\\.specs?)|(\\.tests?))?(\\.js)?$`. That mean it will match: MyComponent.js, MyComponent.test.js, MyComponent.tests.js, MyComponent.spec.js, MyComponent.specs.js...
+
 ## TODO
 
 - [ ] Add coverage

docs/package.json

@@ -30,8 +30,8 @@
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
     "bootstrap": "^3.3.7",
-    "gatsby": "^1.9.125",
-    "gatsby-link": "^1.6.29",
+    "gatsby": "^1.9.126",
+    "gatsby-link": "^1.6.30",
     "gatsby-plugin-sharp": "^1.6.22",
     "gatsby-remark-autolink-headers": "^1.4.9",
     "gatsby-remark-copy-linked-files": "^1.5.22",

docs/yarn.lock

@@ -4196,9 +4196,9 @@ gatsby-cli@^1.1.24:
     yargs "^8.0.2"
     yurnalist "^0.2.1"
 
-gatsby-link@^1.6.29:
-  version "1.6.29"
-  resolved "https://registry.yarnpkg.com/gatsby-link/-/gatsby-link-1.6.29.tgz#a3ecedb8a1bd0f9430bda8f193375309ff2e9efa"
+gatsby-link@^1.6.30:
+  version "1.6.30"
+  resolved "https://registry.yarnpkg.com/gatsby-link/-/gatsby-link-1.6.30.tgz#d75a7ceaa9e138b5f4f64cc6dbf1e0632876bd09"
   dependencies:
     babel-runtime "^6.26.0"
     prop-types "^15.5.8"
@@ -4317,9 +4317,9 @@ gatsby-transformer-remark@^1.7.22:
     unist-util-select "^1.5.0"
     unist-util-visit "^1.1.1"
 
-gatsby@^1.9.125:
-  version "1.9.125"
-  resolved "https://registry.yarnpkg.com/gatsby/-/gatsby-1.9.125.tgz#5674fab6f54c5a635edc8ba1ad6c57431e1ef14d"
+gatsby@^1.9.126:
+  version "1.9.126"
+  resolved "https://registry.yarnpkg.com/gatsby/-/gatsby-1.9.126.tgz#879d9136b179500a7ca0f95b032d1763184e8594"
   dependencies:
     async "^2.1.2"
     babel-code-frame "^6.22.0"

examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap

@@ -1,5 +1,51 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Storyshots Addon Actions Circular Payload 1`] = `
+<button
+  className="css-1yjiefr"
+  onClick={[Function]}
+>
+  Circular Payload
+</button>
+`;
+
+exports[`Storyshots Addon Actions Decorated Action 1`] = `
+<button
+  className="css-1yjiefr"
+  onClick={[Function]}
+>
+  First Argument
+</button>
+`;
+
+exports[`Storyshots Addon Actions Function Name 1`] = `
+<button
+  className="css-1yjiefr"
+  onClick={[Function]}
+>
+  Action.name: 
+  fnName
+</button>
+`;
+
+exports[`Storyshots Addon Actions Hello World 1`] = `
+<button
+  className="css-1yjiefr"
+  onClick={[Function]}
+>
+  Hello World
+</button>
+`;
+
+exports[`Storyshots Addon Actions Reserved keyword as name 1`] = `
+<button
+  className="css-1yjiefr"
+  onClick={[Function]}
+>
+  Delete
+</button>
+`;
+
 exports[`Storyshots Addon Backgrounds story 1 1`] = `
 <div
   style={
@@ -5571,15 +5617,6 @@ exports[`Storyshots Button addons composition 1`] = `
 </div>
 `;
 
-exports[`Storyshots Button delete 1`] = `
-<button
-  className="css-1yjiefr"
-  onClick={[Function]}
->
-  Delete
-</button>
-`;
-
 exports[`Storyshots Button with new info 1`] = `
 <div>
   <div

examples/cra-kitchen-sink/src/stories/addon-actions.stories.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action, decorateAction } from '@storybook/addon-actions';
+import { Button } from '@storybook/react/demo';
+
+const pickFirst = decorateAction([args => args.slice(0, 1)]);
+
+storiesOf('Addon Actions', module)
+  .add('Hello World', () => <Button onClick={action('hello-world')}>Hello World</Button>)
+  .add('Decorated Action', () => <Button onClick={pickFirst('decorated')}>First Argument</Button>)
+  .add('Circular Payload', () => {
+    const circular = { foo: {} };
+    circular.foo.circular = circular;
+    return <Button onClick={() => action('circular')(circular)}>Circular Payload</Button>;
+  })
+  .add('Function Name', () => {
+    const fn = action('fnName');
+    return <Button onClick={fn}>Action.name: {fn.name}</Button>;
+  })
+  .add('Reserved keyword as name', () => <Button onClick={action('delete')}>Delete</Button>);

examples/cra-kitchen-sink/src/stories/index.stories.js

@@ -55,12 +55,6 @@ storiesOf('Button', module)
       😀 😎 👍 💯
     </Button>
   ))
-  .add('delete', () => (
-    <Button onClick={action('delete')}>
-      {setOptions({ selectedAddonPanel: 'storybook/actions/actions-panel' })}
-      Delete
-    </Button>
-  ))
   .add('with notes', () => (
     // deprecated usage
     <WithNotes notes="A very simple button">