diff --git a/.circleci/config.yml b/.circleci/config.yml
index 55069b505837..829bfa4fd66b 100644
--- a/.circleci/config.yml
+++ b/.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
diff --git a/examples/official-storybook/built-storybooks/angular-cli b/examples/official-storybook/built-storybooks/angular-cli
new file mode 120000
index 000000000000..fb7a49bbf43c
--- /dev/null
+++ b/examples/official-storybook/built-storybooks/angular-cli
@@ -0,0 +1 @@
+../../angular-cli/storybook-static
\ No newline at end of file
diff --git a/examples/official-storybook/built-storybooks/cra-kitchen-sink b/examples/official-storybook/built-storybooks/cra-kitchen-sink
new file mode 120000
index 000000000000..bc94cdebbafc
--- /dev/null
+++ b/examples/official-storybook/built-storybooks/cra-kitchen-sink
@@ -0,0 +1 @@
+../../cra-kitchen-sink/storybook-static
\ No newline at end of file
diff --git a/examples/official-storybook/built-storybooks/polymer-cli b/examples/official-storybook/built-storybooks/polymer-cli
new file mode 120000
index 000000000000..0ea6cbfd0ec9
--- /dev/null
+++ b/examples/official-storybook/built-storybooks/polymer-cli
@@ -0,0 +1 @@
+../../polymer-cli/storybook-static
\ No newline at end of file
diff --git a/examples/official-storybook/built-storybooks/vue-kitchen-sink b/examples/official-storybook/built-storybooks/vue-kitchen-sink
new file mode 120000
index 000000000000..48946b56a2af
--- /dev/null
+++ b/examples/official-storybook/built-storybooks/vue-kitchen-sink
@@ -0,0 +1 @@
+../../vue-kitchen-sink/storybook-static
\ No newline at end of file
diff --git a/examples/official-storybook/package.json b/examples/official-storybook/package.json
index bec4f5d9f9c0..8fce4d8349ce 100644
--- a/examples/official-storybook/package.json
+++ b/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",
diff --git a/examples/official-storybook/stories/__snapshots__/app-acceptance.stories.storyshot b/examples/official-storybook/stories/__snapshots__/app-acceptance.stories.storyshot
new file mode 100644
index 000000000000..6ebeacf6f19b
--- /dev/null
+++ b/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`] = `
+
+`;
+
+exports[`Storyshots App|acceptance cra-kitchen-sink 1`] = `
+
+`;
+
+exports[`Storyshots App|acceptance polymer-cli 1`] = `
+
+`;
+
+exports[`Storyshots App|acceptance vue-kitchen-sink 1`] = `
+
+`;
diff --git a/examples/official-storybook/stories/app-acceptance.stories.js b/examples/official-storybook/stories/app-acceptance.stories.js
new file mode 100644
index 000000000000..d63618a03a47
--- /dev/null
+++ b/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.`)(
+ () =>
+ )
+ );
+});