Add built storybooks to official storybook

.circleci/config.yml

@@ -81,6 +81,11 @@ jobs:
           command: |
             cd examples/angular-cli
             yarn build-storybook
+      - run:
+          name: "Build polymer-cli"
+          command: |
+            cd examples/polymer-cli
+            yarn build-storybook
       - run:
           name: "Run react kitchen-sink (smoke test)"
           command: |
@@ -96,6 +101,10 @@ jobs:
           command: |
             cd examples/angular-cli
             yarn storybook --smoke-test
+      - run:
+          name: "Visually test storybook"
+          command: |
+            yarn chromatic
       - run:
           name: "Run image snapshots"
           command: yarn test --image
@@ -207,26 +216,6 @@ jobs:
           command: |
             yarn test --coverage --runInBand --core
             yarn coverage
-  storybook:
-    <<: *defaults
-    steps:
-      - checkout
-      - restore_cache:
-          name: "Restore core dependencies cache"
-          keys:
-            - core-dependencies-{{ checksum "yarn.lock" }}
-      - restore_cache:
-          name: "Restore core dist cache"
-          keys:
-            - core-dist-{{ .Revision }}
-      - run:
-          name: "Link packages"
-          command: |
-            yarn install
-      - run:
-          name: "Visually test storybook"
-          command: |
-            yarn chromatic
   cli:
     working_directory: /tmp/storybook
     docker:
@@ -292,9 +281,6 @@ workflows:
       - unit-test:
           requires:
             - build
-      - storybook:
-          requires:
-            - build
       - cli:
           requires:
             - build

examples/official-storybook/built-storybooks/angular-cli

@@ -0,0 +1 @@
+../../angular-cli/storybook-static

examples/official-storybook/built-storybooks/cra-kitchen-sink

@@ -0,0 +1 @@
+../../cra-kitchen-sink/storybook-static

examples/official-storybook/built-storybooks/polymer-cli

@@ -0,0 +1 @@
+../../polymer-cli/storybook-static

examples/official-storybook/built-storybooks/vue-kitchen-sink

@@ -0,0 +1 @@
+../../vue-kitchen-sink/storybook-static

examples/official-storybook/package.json

@@ -7,7 +7,7 @@
     "chromatic": "chromatic test --storybook-addon --exit-zero-on-changes --app-code ab7m45tp9p",
     "generate-addon-jest-testresults": "jest --config=tests/addon-jest.config.json --json --outputFile=stories/addon-jest.testresults.json",
     "image-snapshots": "yarn run build-storybook && jest --projects=./image-snapshots",
-    "storybook": "start-storybook -p 9010 -c ./"
+    "storybook": "start-storybook -p 9010 -c ./ -s built-storybooks"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "^3.4.0-alpha.8",

examples/official-storybook/stories/__snapshots__/app-acceptance.stories.storyshot

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots App|acceptance angular-cli 1`] = `
+<iframe
+  src="/angular-cli/index.html"
+  style="border:0;position:absolute;top:0;left:0;width:100vw;height:100vh"
+  title="angular-cli"
+/>
+`;
+
+exports[`Storyshots App|acceptance cra-kitchen-sink 1`] = `
+<iframe
+  src="/cra-kitchen-sink/index.html"
+  style="border:0;position:absolute;top:0;left:0;width:100vw;height:100vh"
+  title="cra-kitchen-sink"
+/>
+`;
+
+exports[`Storyshots App|acceptance polymer-cli 1`] = `
+<iframe
+  src="/polymer-cli/index.html"
+  style="border:0;position:absolute;top:0;left:0;width:100vw;height:100vh"
+  title="polymer-cli"
+/>
+`;
+
+exports[`Storyshots App|acceptance vue-kitchen-sink 1`] = `
+<iframe
+  src="/vue-kitchen-sink/index.html"
+  style="border:0;position:absolute;top:0;left:0;width:100vw;height:100vh"
+  title="vue-kitchen-sink"
+/>
+`;

examples/official-storybook/stories/app-acceptance.stories.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withNotes } from '@storybook/addon-notes';
+
+// For these stories to work, you must build the static version of the
+//   example storybooks *before* running this storybook.
+
+const chapter = storiesOf('App|acceptance', module);
+
+const style = {
+  border: 0,
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: '100vw',
+  height: '100vh',
+};
+
+['cra-kitchen-sink', 'vue-kitchen-sink', 'angular-cli', 'polymer-cli'].forEach(name => {
+  chapter.add(
+    name,
+    withNotes(`You must build the storybook for the ${name} example for this story to work.`)(
+      () => <iframe style={style} title={name} src={`/${name}/index.html`} />
+    )
+  );
+});