Move addon events into its own story file

examples/cra-kitchen-sink/src/stories/__snapshots__/addon-events.stories.storyshot

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addon Events Logger 1`] = `
+<div
+  style="padding:20px;font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", \\"Roboto\\",
+      \\"Segoe UI\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", sans-serif;color:rgb(51, 51, 51)"
+>
+  <h1>
+    Logger
+  </h1>
+  <dl>
+
+  </dl>
+</div>
+`;

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

@@ -0,0 +1,73 @@
+import React from 'react';
+import EventEmitter from 'eventemitter3';
+import { storiesOf } from '@storybook/react';
+
+import WithEvents from '@storybook/addon-events';
+import Logger from './Logger';
+
+const EVENTS = {
+  TEST_EVENT_1: 'test-event-1',
+  TEST_EVENT_2: 'test-event-2',
+  TEST_EVENT_3: 'test-event-3',
+  TEST_EVENT_4: 'test-event-4',
+};
+
+const emitter = new EventEmitter();
+const emit = emitter.emit.bind(emitter);
+
+storiesOf('Addon Events', module)
+  .addDecorator(getStory => (
+    <WithEvents
+      emit={emit}
+      events={[
+        {
+          name: EVENTS.TEST_EVENT_1,
+          title: 'Test event 1',
+          payload: 0,
+        },
+        {
+          name: EVENTS.TEST_EVENT_2,
+          title: 'Test event 2',
+          payload: 'Test event 2',
+        },
+        {
+          name: EVENTS.TEST_EVENT_3,
+          title: 'Test event 3',
+          payload: {
+            string: 'value',
+            number: 123,
+            array: [1, 2, 3],
+            object: {
+              string: 'value',
+              number: 123,
+              array: [1, 2, 3],
+            },
+          },
+        },
+        {
+          name: EVENTS.TEST_EVENT_4,
+          title: 'Test event 4',
+          payload: [
+            {
+              string: 'value',
+              number: 123,
+              array: [1, 2, 3],
+            },
+            {
+              string: 'value',
+              number: 123,
+              array: [1, 2, 3],
+            },
+            {
+              string: 'value',
+              number: 123,
+              array: [1, 2, 3],
+            },
+          ],
+        },
+      ]}
+    >
+      {getStory()}
+    </WithEvents>
+  ))
+  .add('Logger', () => <Logger emitter={emitter} />);

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

@@ -1,29 +1,16 @@
 import React from 'react';
-import EventEmitter from 'eventemitter3';
 
 import { storiesOf } from '@storybook/react';
 import { setOptions } from '@storybook/addon-options';
 import { action } from '@storybook/addon-actions';
 import { withNotes, WithNotes } from '@storybook/addon-notes';
-import WithEvents from '@storybook/addon-events';
 import centered from '@storybook/addon-centered';
 import { withInfo } from '@storybook/addon-info';
 import { Button } from '@storybook/react/demo';
 
 import App from '../App';
-import Logger from './Logger';
 import Container from './Container';
 
-const EVENTS = {
-  TEST_EVENT_1: 'test-event-1',
-  TEST_EVENT_2: 'test-event-2',
-  TEST_EVENT_3: 'test-event-3',
-  TEST_EVENT_4: 'test-event-4',
-};
-
-const emitter = new EventEmitter();
-const emit = emitter.emit.bind(emitter);
-
 const InfoButton = () => (
   <span
     style={{
@@ -101,60 +88,3 @@ storiesOf('App', module).add('full app', () => <App />);
 storiesOf('Some really long story kind description', module)
   .addDecorator(centered)
   .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>);
-
-storiesOf('WithEvents', module)
-  .addDecorator(getStory => (
-    <WithEvents
-      emit={emit}
-      events={[
-        {
-          name: EVENTS.TEST_EVENT_1,
-          title: 'Test event 1',
-          payload: 0,
-        },
-        {
-          name: EVENTS.TEST_EVENT_2,
-          title: 'Test event 2',
-          payload: 'Test event 2',
-        },
-        {
-          name: EVENTS.TEST_EVENT_3,
-          title: 'Test event 3',
-          payload: {
-            string: 'value',
-            number: 123,
-            array: [1, 2, 3],
-            object: {
-              string: 'value',
-              number: 123,
-              array: [1, 2, 3],
-            },
-          },
-        },
-        {
-          name: EVENTS.TEST_EVENT_4,
-          title: 'Test event 4',
-          payload: [
-            {
-              string: 'value',
-              number: 123,
-              array: [1, 2, 3],
-            },
-            {
-              string: 'value',
-              number: 123,
-              array: [1, 2, 3],
-            },
-            {
-              string: 'value',
-              number: 123,
-              array: [1, 2, 3],
-            },
-          ],
-        },
-      ]}
-    >
-      {getStory()}
-    </WithEvents>
-  ))
-  .add('Logger', () => <Logger emitter={emitter} />);