Remove dependencies from storyshots

Storyshots wants to plugin to the version used by the app, not have its own version. So it should probably use a peer dep; however as some deps are optional (i.e. react vs react-native) this will lead to confusing warnings to the user.

This seems like an OK approach until we hear differently from users.

examples/test-cra/package.json

@@ -22,7 +22,9 @@
     "@kadira/storybook-channel": "file:../../packages/channel",
     "@kadira/storybook-channel-postmsg": "file:../../packages/channel-postmessage",
     "@kadira/storybook-ui": "file:../../packages/storybook-ui",
-    "react-scripts": "0.9.5"
+    "react-scripts": "0.9.5",
+    "react-test-renderer": "^15.4.2",
+    "storyshots": "file:../../packages/storyshots"
   },
   "private": true
 }

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

@@ -0,0 +1,177 @@
+exports[`Storyshots Button with some emoji 1`] = `
+<button
+  onClick={[Function]}
+  style={
+    Object {
+      "backgroundColor": "#FFFFFF",
+      "border": "1px solid #eee",
+      "borderRadius": 3,
+      "cursor": "pointer",
+      "fontSize": 15,
+      "margin": 10,
+      "padding": "3px 10px",
+    }
+  }>
+  😀 😎 👍 💯
+</button>
+`;
+
+exports[`Storyshots Button with text 1`] = `
+<button
+  onClick={[Function]}
+  style={
+    Object {
+      "backgroundColor": "#FFFFFF",
+      "border": "1px solid #eee",
+      "borderRadius": 3,
+      "cursor": "pointer",
+      "fontSize": 15,
+      "margin": 10,
+      "padding": "3px 10px",
+    }
+  }>
+  Hello Button
+</button>
+`;
+
+exports[`Storyshots Welcome to Storybook 1`] = `
+<div
+  style={
+    Object {
+      "fontFamily": "\"Helvetica Neue\", Helvetica, \"Segoe UI\", Arial, freesans, sans-serif",
+      "lineHeight": 1.4,
+      "margin": 15,
+      "maxWidth": 600,
+    }
+  }>
+  <h1>
+    Welcome to STORYBOOK
+  </h1>
+  <p>
+    This is a UI component dev environment for your app.
+  </p>
+  <p>
+    We\'ve added some basic stories inside the
+     
+    <code
+      style={
+        Object {
+          "backgroundColor": "#f3f2f2",
+          "border": "1px solid #eae9e9",
+          "borderRadius": 4,
+          "color": "#3a3a3a",
+          "fontSize": 15,
+          "fontWeight": 600,
+          "padding": "2px 5px",
+        }
+      }>
+      src/stories
+    </code>
+     
+    directory.
+    <br />
+    A story is a single state of one or more UI components. You can have as many stories as you want.
+    <br />
+    (Basically a story is like a visual test case.)
+  </p>
+  <p>
+    See these sample
+     
+    <a
+      href="#"
+      onClick={[Function]}
+      style={
+        Object {
+          "borderBottom": "1px solid #1474f3",
+          "color": "#1474f3",
+          "paddingBottom": 2,
+          "textDecoration": "none",
+        }
+      }>
+      stories
+    </a>
+     
+    for a component called
+     
+    <code
+      style={
+        Object {
+          "backgroundColor": "#f3f2f2",
+          "border": "1px solid #eae9e9",
+          "borderRadius": 4,
+          "color": "#3a3a3a",
+          "fontSize": 15,
+          "fontWeight": 600,
+          "padding": "2px 5px",
+        }
+      }>
+      Button
+    </code>
+    .
+  </p>
+  <p>
+    Just like that, you can add your own components as stories.
+    <br />
+    Here\'s how to add your 
+    <code
+      style={
+        Object {
+          "backgroundColor": "#f3f2f2",
+          "border": "1px solid #eae9e9",
+          "borderRadius": 4,
+          "color": "#3a3a3a",
+          "fontSize": 15,
+          "fontWeight": 600,
+          "padding": "2px 5px",
+        }
+      }>
+      App
+    </code>
+     component as a story.
+    <div
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "<pre>
+        // Add this code to \"src/stories/index.js\"
+        
+        import \'../index.css\';
+        import App from \'../App\';
+        
+        storiesOf(\'App\', module)
+          .add(\'default view\', () => (
+            &lt;App /&gt;
+          ))
+        </pre>",
+        }
+      }
+      style={
+        Object {
+          "backgroundColor": "#f3f2f2",
+          "margin": "10px 0",
+          "padding": "1px 10px",
+        }
+      } />
+  </p>
+  <p>
+    Usually we create stories with smaller UI components in the app.
+    <br />
+    Have a look at the
+     
+    <a
+      href="https://storybooks.js.org/docs/react-storybook/basics/writing-stories"
+      style={
+        Object {
+          "borderBottom": "1px solid #1474f3",
+          "color": "#1474f3",
+          "paddingBottom": 2,
+          "textDecoration": "none",
+        }
+      }
+      target="_blank">
+      Writing Stories
+    </a>
+     
+    section in our documentation.
+  </p>
+</div>
+`;

examples/test-cra/src/storyshots.test.js

@@ -0,0 +1,2 @@
+import initStoryshots from 'storyshots';
+initStoryshots();

packages/storyshots/package.json

@@ -22,13 +22,10 @@
     "react-dom": "^15.5.4"
   },
   "dependencies": {
-    "@kadira/storybook": "*",
-    "@kadira/storybook-addon-actions": "*",
-    "@kadira/storybook-addon-links": "*",
-    "@kadira/storybook-addons": "*",
-    "@kadira/storybook-channel": "*",
     "babel-runtime": "^6.23.0",
     "prop-types": "^15.5.8",
+    "babel-runtime": "^6.20.0",
+    "prop-types": "^15.5.7",
     "read-pkg-up": "^2.0.0"
   },
   "peerDependencies": {

packages/storyshots/src/index.js

@@ -12,12 +12,16 @@ let configPath;
 const babel = require('babel-core');
 
 const pkg = readPkgUp.sync().pkg;
-const isStorybook =
-  (pkg.devDependencies && pkg.devDependencies['@kadira/storybook']) ||
-  (pkg.dependencies && pkg.dependencies['@kadira/storybook']);
-const isRNStorybook =
-  (pkg.devDependencies && pkg.devDependencies['@kadira/react-native-storybook']) ||
-  (pkg.dependencies && pkg.dependencies['@kadira/react-native-storybook']);
+
+const hasDependency = function(name) {
+  return (
+    (pkg.devDependencies && pkg.devDependencies[name]) ||
+    (pkg.dependencies && pkg.dependencies[name])
+  );
+};
+
+const isStorybook = hasDependency('@kadira/storybook');
+const isRNStorybook = hasDependency('@kadira/react-native-storybook');
 
 export default function testStorySnapshots(options = {}) {
   addons.setChannel(createChannel());