Merge pull request #2365 from storybooks/fix-actions-android

Fix addon-actions in legacy Android browser

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

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">