CHANGE CI to chromatic on all examples (#9114)

CHANGE CI to chromatic on all examples

.circleci/config.yml

@@ -51,7 +51,55 @@ jobs:
           command: yarn chromatic --storybook-build-dir="built-storybooks/official-storybook" --exit-zero-on-changes --app-code="ab7m45tp9p"
       - run:
           name: Run chromatic on the pre-built angular example
-          command: yarn chromatic --storybook-build-dir="built-storybooks/angular-cli" --exit-zero-on-changes --app-code="tl92yzsj6w"
+          command: yarn chromatic --storybook-build-dir="built-storybooks/angular-cli" --app-code="tl92yzsj6w"
+      - run:
+          name: Run chromatic on the pre-built cra-kitchen-sink example
+          command: yarn chromatic --storybook-build-dir="built-storybooks/cra-kitchen-sink" --app-code="tg55gajmdt"
+      - run:
+          name: Run chromatic on the pre-built cra-react15 example
+          command: yarn chromatic --storybook-build-dir="built-storybooks/cra-react15" --app-code="gxk7iqej3wt"
+      - run:
+          name: Run chromatic on the pre-built cra-ts-essentials example
+          command: yarn chromatic --storybook-build-dir="built-storybooks/cra-ts-essentials" --app-code="b311ypk6of"
+      - run:
+          name: Run chromatic on the pre-built cra-ts-kitchen-sink example
+          command: yarn chromatic --storybook-build-dir="built-storybooks/cra-ts-kitchen-sink" --app-code="19whyj1tlac"
+      - run:
+          name: Run chromatic on the pre-built dev-kits example
+          command: yarn chromatic --storybook-build-dir="built-storybooks/dev-kits" --app-code="7yykp9ifdxx"
+      - run:
+          name: Run chromatic on the pre-built ember-cli example
+          command: yarn chromatic --storybook-build-dir="built-storybooks/ember-cli" --app-code="19z23qxndju"
+      - run:
+          name: Run chromatic on the pre-built html-kitchen-sink example
+          command: yarn chromatic --storybook-build-dir="built-storybooks/html-kitchen-sink" --app-code="e8zolxoyg8o"
+      - run:
+          name: Run chromatic on the pre-built marko-cli example
+          command: yarn chromatic --storybook-build-dir="built-storybooks/marko-cli" --app-code="qaegx64axu"
+      - run:
+          name: Run chromatic on the pre-built mithril-kitchen-sink example
+          command: yarn chromatic --storybook-build-dir="built-storybooks/mithril-kitchen-sink" --app-code="8adgm46jzk8"
+      - run:
+          name: Run chromatic on the pre-built polymer-cli example
+          command: yarn chromatic --storybook-build-dir="built-storybooks/polymer-cli" --app-code="o6jl9kmh0qd"
+      - run:
+          name: Run chromatic on the pre-built preact-kitchen-sink example
+          command: yarn chromatic --storybook-build-dir="built-storybooks/preact-kitchen-sink" --app-code="ls0ikhnwqt"
+      - run:
+          name: Run chromatic on the pre-built rax-kitchen-sink example
+          command: yarn chromatic --storybook-build-dir="built-storybooks/rax-kitchen-sink" --app-code="4co6vptx8qo"
+      - run:
+          name: Run chromatic on the pre-built riot-kitchen-sink example
+          command: yarn chromatic --storybook-build-dir="built-storybooks/riot-kitchen-sink" --app-code="g2dp3lnr34a"
+      - run:
+          name: Run chromatic on the pre-built svelte-kitchen-sink example
+          command: yarn chromatic --storybook-build-dir="built-storybooks/svelte-kitchen-sink" --app-code="8ob73wgl995"
+      - run:
+          name: Run chromatic on the pre-built vue-kitchen-sink example
+          command: yarn chromatic --storybook-build-dir="built-storybooks/vue-kitchen-sink" --app-code="cyxj0e38bqj"
+      - run:
+          name: Run chromatic on the pre-built web-components-kitchen-sink example
+          command: yarn chromatic --storybook-build-dir="built-storybooks/web-components-kitchen-sink" --app-code="npm5gsofwkf"
 
   packtracker:
     <<: *defaults

examples/cra-kitchen-sink/src/stories/force-rerender.stories.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { forceReRender } from '@storybook/react';
+import { Button } from '@storybook/react/demo';
 
 let count = 0;
 const increment = () => {
@@ -11,7 +12,7 @@ export default {
   title: 'Force ReRender',
 };
 
-export const Button = () => (
+export const DefaultView = () => (
   <Button type="button" onClick={increment}>
     Click me to increment: {count}
   </Button>

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

@@ -1,24 +0,0 @@
-import React from 'react';
-
-import { storiesOf } from '@storybook/react';
-
-import { Button } from '@storybook/react/demo';
-
-for (let i = 0; i < 1; i += 1) {
-  const randomDemoName = Math.random()
-    .toString(36)
-    .substring(7);
-  const stories = storiesOf(`Perf.${randomDemoName}`);
-
-  for (let j = 0; j < 10; j += 1) {
-    stories
-      .add(`with text ${j}`, () => <Button>Hello Button</Button>)
-      .add(`with emoji ${j}`, () => (
-        <Button>
-          <span role="img" aria-label="so cool">
-            😀 😎 👍 💯
-          </span>
-        </Button>
-      ));
-  }
-}

examples/rax-kitchen-sink/src/components/App/App.test.js

@@ -1,6 +1,6 @@
 import { createElement } from 'rax';
 import renderer from 'rax-test-renderer';
-import App from './index';
+import { App } from './index';
 
 test('App render correctly', () => {
   const tree = renderer.create(<App />).toJSON();

examples/rax-kitchen-sink/src/components/App/index.js

@@ -3,7 +3,7 @@ import View from 'rax-view';
 import Text from 'rax-text';
 import styles from './index.stylesheet';
 
-const App = () => (
+export const App = () => (
   <View style={styles.app}>
     <View style={styles.appHeader}>
       <Text style={styles.appBanner}>Welcome to Rax</Text>
@@ -13,5 +13,3 @@ const App = () => (
     </Text>
   </View>
 );
-
-export default App;

examples/rax-kitchen-sink/src/components/App/index.stylesheet

@@ -2,13 +2,14 @@
   flex: 1;
   justify-content: center;
   align-items: center;
-  width: 300;
+  background-color: #222;
+  color: white;
+  padding: 40px;
 }
 
 .appHeader {
-  background-color: #222;
   height: 160;
-  padding: 40;
+  padding: 40px;
 }
 
 .appBanner, .appIntro {
@@ -23,5 +24,4 @@
 .appIntro {
   margin-top: 40;
   font-size: 20;
-  line-height: 30;
 }

examples/rax-kitchen-sink/src/components/Welcome/Welcome.test.js

@@ -1,6 +1,6 @@
 import { createElement } from 'rax';
 import renderer from 'rax-test-renderer';
-import Welcome from './index';
+import { Welcome } from './index';
 
 test('Welcome render correctly', () => {
   const tree = renderer.create(<Welcome />).toJSON();

examples/rax-kitchen-sink/src/components/Welcome/__snapshots__/Welcome.test.js.snap

@@ -16,7 +16,7 @@ Object {
       "style": Object {
         "fontSize": 40,
         "fontWeight": "bold",
-        "lineHeight": 50,
+        "lineHeight": "80px",
         "webkitLineClamp": undefined,
       },
       "tagName": "SPAN",

examples/rax-kitchen-sink/src/components/Welcome/index.js

@@ -2,7 +2,6 @@
 import { createElement } from 'rax';
 import View from 'rax-view';
 import Text from 'rax-text';
-// import Button from 'rax-button';
 import Image from 'rax-image';
 
 const Main = ({ children, ...props }) => (
@@ -24,12 +23,12 @@ const P = ({ children, ...props }) => (
 );
 
 const Title = ({ children, ...props }) => (
-  <Text {...props} style={{ fontSize: 40, lineHeight: 50, fontWeight: 'bold' }}>
+  <Text {...props} style={{ fontSize: 40, lineHeight: '80px', fontWeight: 'bold' }}>
     {children}
   </Text>
 );
 
-const Welcome = ({ showApp }) => (
+export const Welcome = ({ showApp }) => (
   <Main>
     <Title>Welcome to storybook for Rax</Title>
     <Image
@@ -66,5 +65,3 @@ const Welcome = ({ showApp }) => (
     </P>
   </Main>
 );
-
-export default Welcome;

examples/rax-kitchen-sink/src/index.js

@@ -1,4 +1,4 @@
 import { createElement, render } from 'rax';
-import App from './components/App/index';
+import { App } from './components/App/index';
 
 render(<App />);

examples/rax-kitchen-sink/src/stories/addon-centered.stories.js

@@ -1,7 +1,7 @@
 import { createElement } from 'rax';
 import Centered from '@storybook/addon-centered/rax';
 import Text from 'rax-text';
-import App from '../components/App';
+import { App as AppComponent } from '../components/App';
 
 export default {
   title: 'Addon/addon-centered',
@@ -9,11 +9,9 @@ export default {
 };
 
 export const Button = () => (
-  <Button type="button">
+  <button type="button">
     <Text>BUTTON</Text>
-  </Button>
+  </button>
 );
-Button.story = { name: 'Button' };
 
-export const app = () => <App />;
-app.story = { name: 'App' };
+export const App = () => <AppComponent />;

examples/rax-kitchen-sink/src/stories/addon-jest.stories.js

@@ -1,7 +1,7 @@
 import { createElement } from 'rax';
 import { withTests } from '@storybook/addon-jest';
-import App from '../components/App';
-import Welcome from '../components/Welcome';
+import { App } from '../components/App';
+import { Welcome } from '../components/Welcome';
 // eslint-disable-next-line
 import results from '../../jest-test-results.json';
 

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

@@ -1,18 +1,11 @@
 import { createElement } from 'rax';
 import { linkTo } from '@storybook/addon-links';
-import App from '../components/App';
-import Welcome from '../components/Welcome';
+import { App as AppComponent } from '../components/App/index';
+import { Welcome } from '../components/Welcome/index';
 
 export default {
   title: 'Basic',
 };
 
 export const WelcomeScreen = () => <Welcome showApp={linkTo('Addon|addon-actions', 'with text')} />;
-WelcomeScreen.story = {
-  name: 'Welcome screen',
-};
-
-export const app = () => <App />;
-app.story = {
-  name: 'App',
-};
+export const App = () => <AppComponent />;

examples/vue-kitchen-sink/src/stories/__snapshots__/core-errors.stories.storyshot

@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Core/Errors Null Error 1`] = `<!---->`;

examples/vue-kitchen-sink/src/stories/core-errors.stories.js

@@ -1,10 +0,0 @@
-export default {
-  title: 'Core/Errors',
-};
-
-export const ThrowsError = () => {
-  throw new Error('foo');
-};
-ThrowsError.story = { parameters: { storyshots: { disable: true } } };
-
-export const NullError = () => null;