From e92de54e5058f8ac6681234eec23a62703fbd674 Mon Sep 17 00:00:00 2001
From: hypnos <Filipp.Riabchun@jetbrains.com>
Date: Sat, 25 Nov 2017 02:14:56 +0300
Subject: [PATCH 1/2] Fix addon-actions in legacy Android browser

---
 addons/actions/.storybook/addons.js           |  1 -
 addons/actions/.storybook/config.js           |  2 --
 addons/actions/.storybook/stories.js          | 27 -------------------
 addons/actions/package.json                   |  4 +--
 addons/actions/src/preview.js                 | 14 ++++++----
 .../src/stories/addon-actions.stories.js      | 20 ++++++++++++++
 .../src/stories/index.stories.js              |  6 -----
 7 files changed, 30 insertions(+), 44 deletions(-)
 delete mode 100644 addons/actions/.storybook/addons.js
 delete mode 100644 addons/actions/.storybook/config.js
 delete mode 100644 addons/actions/.storybook/stories.js
 create mode 100644 examples/cra-kitchen-sink/src/stories/addon-actions.stories.js

diff --git a/addons/actions/.storybook/addons.js b/addons/actions/.storybook/addons.js
deleted file mode 100644
index e4f70f25bfa3..000000000000
--- a/addons/actions/.storybook/addons.js
+++ /dev/null
@@ -1 +0,0 @@
-import '../register';
diff --git a/addons/actions/.storybook/config.js b/addons/actions/.storybook/config.js
deleted file mode 100644
index 29599c59b5d2..000000000000
--- a/addons/actions/.storybook/config.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import * as storybook from '@storybook/react';
-storybook.configure(() => require('./stories'), module);
diff --git a/addons/actions/.storybook/stories.js b/addons/actions/.storybook/stories.js
deleted file mode 100644
index 05620ab77b5c..000000000000
--- a/addons/actions/.storybook/stories.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { action, decorateAction } from '../src';
-
-const pickFirst = decorateAction([
-  args => args.slice(0, 1)
-]);
-
-storiesOf('Button', 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>
-  });
diff --git a/addons/actions/package.json b/addons/actions/package.json
index bdb281f1a6f3..4a53b6c6b1a6 100644
--- a/addons/actions/package.json
+++ b/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",
diff --git a/addons/actions/src/preview.js b/addons/actions/src/preview.js
index f4ed7a3e8b3d..2089cad777cc 100644
--- a/addons/actions/src/preview.js
+++ b/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;
 }
 
diff --git a/examples/cra-kitchen-sink/src/stories/addon-actions.stories.js b/examples/cra-kitchen-sink/src/stories/addon-actions.stories.js
new file mode 100644
index 000000000000..04feb6fafade
--- /dev/null
+++ b/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>);
diff --git a/examples/cra-kitchen-sink/src/stories/index.stories.js b/examples/cra-kitchen-sink/src/stories/index.stories.js
index 47ae4f3a7124..9819fca76307 100644
--- a/examples/cra-kitchen-sink/src/stories/index.stories.js
+++ b/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">

From 58be20698c6ea671cccf2dc7421696183b8e101b Mon Sep 17 00:00:00 2001
From: hypnos <Filipp.Riabchun@jetbrains.com>
Date: Sat, 25 Nov 2017 02:34:00 +0300
Subject: [PATCH 2/2] Update storyshots

---
 .../src/__snapshots__/storyshots.test.js.snap | 55 ++++++++++++++++---
 1 file changed, 46 insertions(+), 9 deletions(-)

diff --git a/examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap b/examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap
index 672616b567aa..eaa3edb12a18 100644
--- a/examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap
+++ b/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