Merge branch 'master' into used-by-visual-tweaks

storybookjs · Aug 18, 2017 · 8187e64 · 8187e64
2 parents 1c0dcbc + 93564fe
commit 8187e64
Show file tree

Hide file tree

Showing 39 changed files with 447 additions and 188 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -48,13 +48,30 @@ jobs:
             - docs/**/node_modules
             - examples/**/node_modules
             - lib/**/node_modules
-  example-kitchen-sink:
+  example-kitchen-sinks:
     <<: *defaults
     steps:
+      - checkout
+      - restore_cache:
+          keys:
+            - root-dependencies-{{ checksum "package.json" }}
+            - root-dependencies-
       - run:
-          name: "Running kitchen-sink"
+          name: "Install root dependencies"
           command: |
-            echo "TODO"
+            yarn install
+      - run:
+          name: "Bootstrapping"
+          command: |
+            npm run bootstrap
+      - run:
+          name: "Build react kitchen-sink"
+          command: |
+            cd examples/cra-kitchen-sink && npm run build-storybook
+      - run:
+          name: "Build vue kitchen-sink"
+          command: |
+            cd examples/vue-kitchen-sink && npm run build-storybook
   example-test-cra:
     <<: *defaults
     steps:
@@ -71,11 +88,12 @@ jobs:
           name: "Bootstrapping"
           command: |
             npm run bootstrap
+            npm run build-packs
             npm run bootstrap:test-cra
       - run:
-          name: "Running test-cra"
+          name: "Build test-cra"
           command: |
-            echo "TODO"
+            cd examples/test-cra && npm run build-storybook
   example-react-native:
     <<: *defaults
     steps:
@@ -92,12 +110,12 @@ jobs:
           name: "Bootstrapping packages"
           command: |
             npm run bootstrap
+            npm run build-packs
             npm run bootstrap:react-native-vanilla
       - run:
           name: "Running react-native"
           command: |
             echo "TODO"
-
   docs:
     <<: *defaults
     steps:
@@ -150,8 +168,7 @@ jobs:
           name: "Bootstrapping"
           command: |
             npm run bootstrap
-            npm run bootstrap:docs
-            npm run bootstrap:test-cra
+            npm run build-packs
             npm run bootstrap:react-native-vanilla
       - run:
           name: "Unit testing"
@@ -171,15 +188,15 @@ workflows:
     jobs:
       - validate
       - build
-      - example-kitchen-sink
+      - example-kitchen-sinks
       - example-test-cra
       - example-react-native
       - docs
       - lint
       - unit-test
-      - deploy:
-          type: approval
-          requires:
-            - lint
-            - unit-test
-            - docs
+      # - deploy:
+      #     type: approval
+      #     requires:
+      #       - lint
+      #       - unit-test
+      #       - docs
diff --git a/addons/info/package.json b/addons/info/package.json
@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@storybook/addons": "^3.2.0",
+    "@storybook/components": "^3.2.0",
     "babel-runtime": "^6.23.0",
     "global": "^4.3.2",
     "marksy": "^2.0.0",

diff --git a/addons/info/src/components/Story.js b/addons/info/src/components/Story.js
@@ -3,12 +3,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import global from 'global';
+import { baseFonts } from '@storybook/components';
 
 import marksy from 'marksy';
 
 import PropTable from './PropTable';
 import Node from './Node';
-import { baseFonts } from './theme';
 import { Pre } from './markdown';
 
 global.STORYBOOK_REACT_CLASSES = global.STORYBOOK_REACT_CLASSES || [];

diff --git a/addons/info/src/components/markdown/htags.js b/addons/info/src/components/markdown/htags.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { baseFonts } from '../theme';
+import { baseFonts } from '@storybook/components';
 
 const defaultProps = {
   children: null,

diff --git a/addons/info/src/components/markdown/text.js b/addons/info/src/components/markdown/text.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { baseFonts } from '../theme';
+import { baseFonts } from '@storybook/components';
 
 const defaultProps = { children: null };
 const propTypes = { children: PropTypes.node };

diff --git a/addons/info/src/components/theme.js b/addons/info/src/components/theme.js
diff --git a/app/react-native/src/bin/storybook-start.js b/app/react-native/src/bin/storybook-start.js
@@ -41,17 +41,19 @@ server.listen(...listenAddr, err => {
 });
 
 if (!program.skipPackager) {
-  let symlinks = []
-  
-  try{
+  let symlinks = [];
+
+  try {
     const findSymlinksPaths = require('react-native/local-cli/util/findSymlinksPaths'); // eslint-disable-line global-require
     symlinks = findSymlinksPaths(path.join(projectDir, 'node_modules'), [projectDir]);
-  }catch(e){
-   console.warn(`Unable to load findSymlinksPaths: ${e.message}`); 
+  } catch (e) {
+    console.warn(`Unable to load findSymlinksPaths: ${e.message}`);
   }
 
-  const projectRoots = (configDir === projectDir ? [configDir] : [configDir, projectDir]).concat(symlinks);
-
+  const projectRoots = (configDir === projectDir ? [configDir] : [configDir, projectDir]).concat(
+    symlinks
+  );
+
   let cliCommand = 'node node_modules/react-native/local-cli/cli.js start';
   if (program.haul) {
     cliCommand = `node node_modules/.bin/haul start --config ${program.haul} --platform all`;

diff --git a/examples/cra-kitchen-sink/.storybook/config.js b/examples/cra-kitchen-sink/.storybook/config.js
@@ -17,7 +17,8 @@ setOptions({
 setAddon(infoAddon);
 
 function loadStories() {
-  require('../src/stories');
+  require('../src/stories/index');
+  require('../src/stories/storybook-components');
 }
 
 configure(loadStories, module);
diff --git a/examples/cra-kitchen-sink/package.json b/examples/cra-kitchen-sink/package.json
@@ -12,24 +12,27 @@
   "dependencies": {
     "eventemitter3": "^2.0.3",
     "format-json": "^1.0.3",
+    "glamor": "^2.20.40",
+    "glamorous": "^4.1.2",
     "global": "^4.3.2",
     "prop-types": "^15.5.10",
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
     "uuid": "^3.1.0"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "3.2.0-alpha.10",
-    "@storybook/addon-centered": "3.2.0-alpha.8",
-    "@storybook/addon-events": "3.2.0-alpha.10",
-    "@storybook/addon-knobs": "3.2.0-alpha.10",
-    "@storybook/addon-info": "3.2.0-alpha.10",
-    "@storybook/addon-links": "3.2.0-alpha.10",
-    "@storybook/addon-notes": "3.2.0-alpha.10",
-    "@storybook/addon-options": "3.2.0-alpha.10",
-    "@storybook/addon-storyshots": "3.2.0-alpha.11",
-    "@storybook/addons": "3.2.0-alpha.10",
-    "@storybook/react": "3.2.0-alpha.11",
+    "@storybook/addon-actions": "^3.2.0",
+    "@storybook/addon-centered": "^3.2.0",
+    "@storybook/addon-events": "^3.2.0",
+    "@storybook/addon-knobs": "^3.2.0",
+    "@storybook/addon-info": "^3.2.0",
+    "@storybook/addon-links": "^3.2.0",
+    "@storybook/addon-notes": "^3.2.0",
+    "@storybook/addon-options": "^3.2.0",
+    "@storybook/addon-storyshots": "^3.2.0",
+    "@storybook/addons": "^3.2.0",
+    "@storybook/components": "^3.2.0",
+    "@storybook/react": "^3.2.0",
     "react-scripts": "1.0.1"
   },
   "private": true

diff --git a/examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap b/examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap
@@ -137,10 +137,7 @@ exports[`Storyshots Button addons composition 1`] = `
             "borderRadius": "2px",
             "boxShadow": "0px 2px 3px rgba(0, 0, 0, 0.05)",
             "color": "#444",
-            "fontFamily": "
-              -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", \\"Roboto\\",
-              \\"Segoe UI\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", sans-serif
-            ",
+            "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
             "fontSize": "15px",
             "fontWeight": 300,
             "lineHeight": 1.45,
@@ -194,10 +191,7 @@ exports[`Storyshots Button addons composition 1`] = `
               Object {
                 "WebkitFontSmoothing": "antialiased",
                 "color": "#444",
-                "fontFamily": "
-                  -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", \\"Roboto\\",
-                  \\"Segoe UI\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", sans-serif
-                ",
+                "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
                 "fontSize": "15px",
               }
             }
@@ -589,10 +583,7 @@ exports[`Storyshots Button with new info 1`] = `
             "borderRadius": "2px",
             "boxShadow": "0px 2px 3px rgba(0, 0, 0, 0.05)",
             "color": "#444",
-            "fontFamily": "
-              -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", \\"Roboto\\",
-              \\"Segoe UI\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", sans-serif
-            ",
+            "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
             "fontSize": "15px",
             "fontWeight": 300,
             "lineHeight": 1.45,
@@ -646,10 +637,7 @@ exports[`Storyshots Button with new info 1`] = `
               Object {
                 "WebkitFontSmoothing": "antialiased",
                 "color": "#444",
-                "fontFamily": "
-                  -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", \\"Roboto\\",
-                  \\"Segoe UI\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", sans-serif
-                ",
+                "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
                 "fontSize": "15px",
               }
             }
@@ -1165,10 +1153,7 @@ exports[`Storyshots Button with some info 1`] = `
             "borderRadius": "2px",
             "boxShadow": "0px 2px 3px rgba(0, 0, 0, 0.05)",
             "color": "#444",
-            "fontFamily": "
-              -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", \\"Roboto\\",
-              \\"Segoe UI\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", sans-serif
-            ",
+            "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
             "fontSize": "15px",
             "fontWeight": 300,
             "lineHeight": 1.45,
@@ -1222,10 +1207,7 @@ exports[`Storyshots Button with some info 1`] = `
               Object {
                 "WebkitFontSmoothing": "antialiased",
                 "color": "#444",
-                "fontFamily": "
-                  -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", \\"Roboto\\",
-                  \\"Segoe UI\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", sans-serif
-                ",
+                "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
                 "fontSize": "15px",
               }
             }
@@ -1669,6 +1651,29 @@ exports[`Storyshots Cells/Molecules/Atoms.more with text2 1`] = `
 </button>
 `;
 
+exports[`Storyshots Navigation Menu link 1`] = `
+<div
+  className="css-t9df35"
+>
+  <a
+    className="css-1enjukp"
+    href="/"
+    onClick={[Function]}
+  >
+    Menu link item
+  </a>
+</div>
+`;
+
+exports[`Storyshots Navigation Routed link 1`] = `
+<a
+  href="/"
+  onClick={[Function]}
+>
+  Try clicking with different mouse buttons and modifier keys (shift/ctrl/alt/cmd)
+</a>
+`;
+
 exports[`Storyshots Some really long story kind description with text 1`] = `
 <div
   style={

diff --git a/examples/cra-kitchen-sink/src/stories/storybook-components.js b/examples/cra-kitchen-sink/src/stories/storybook-components.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import { css } from 'glamor';
+import { Div } from 'glamorous';
+
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { withKnobs, boolean, text, number } from '@storybook/addon-knobs';
+
+import { baseFonts, RoutedLink, MenuLink } from '@storybook/components';
+
+css.global('body', baseFonts);
+
+storiesOf('Navigation', module)
+  .add('Routed link', () =>
+    <RoutedLink href="/" onClick={action('navigation triggered')}>
+      Try clicking with different mouse buttons and modifier keys (shift/ctrl/alt/cmd)
+    </RoutedLink>
+  )
+  .addDecorator(withKnobs)
+  .add('Menu link', () =>
+    <Div width={number('Container width', 90, { range: true, min: 50, max: 200, step: 10 })}>
+      <MenuLink href="/" onClick={action('navigation triggered')} active={boolean('Active', true)}>
+        {text('Text', 'Menu link item')}
+      </MenuLink>
+    </Div>
+  );
diff --git a/examples/crna-kitchen-sink/package.json b/examples/crna-kitchen-sink/package.json
@@ -3,15 +3,16 @@
   "version": "0.1.0",
   "private": true,
   "devDependencies": {
-    "@storybook/addon-actions": "file:../../addons/actions",
-    "@storybook/addon-links": "file:../../addons/links",
-    "@storybook/addon-options": "file:../../addons/options",
-    "@storybook/addon-storyshots": "file:../../addons/storyshots",
-    "@storybook/addons": "file:../../lib/addons",
-    "@storybook/channels": "file:../../lib/channels",
-    "@storybook/channel-postmessage": "file:../../lib/channel-postmessage",
-    "@storybook/react-native": "file:../../app/react-native",
-    "@storybook/ui": "file:../../lib/ui",
+    "@storybook/addon-actions": "file:../../packs/storybook-addon-actions.tgz",
+    "@storybook/addon-links": "file:../../packs/storybook-addon-links.tgz",
+    "@storybook/addon-options": "file:../../packs/storybook-addon-options.tgz",
+    "@storybook/addon-storyshots": "file:../../packs/storybook-addon-storyshots.tgz",
+    "@storybook/addons": "file:../../packs/storybook-addons.tgz",
+    "@storybook/channels": "file:../../packs/storybook-channels.tgz",
+    "@storybook/channel-postmessage": "file:../../packs/storybook-channel-postmessage.tgz",
+    "@storybook/components": "file:../../packs/storybook-components.tgz",
+    "@storybook/react-native": "file:../../packs/storybook-react-native.tgz",
+    "@storybook/ui": "file:../../packs/storybook-ui.tgz",
     "react-native-scripts": "1.1.0",
     "jest-expo": "~19.0.0",
     "react-test-renderer": "16.0.0-alpha.12"

diff --git a/examples/react-native-vanilla/package.json b/examples/react-native-vanilla/package.json
@@ -16,15 +16,16 @@
     "babel-preset-react-native": "1.9.2",
     "jest": "^20.0.4",
     "react-test-renderer": "16.0.0-alpha.6",
-    "@storybook/addon-actions": "file:../../addons/actions",
-    "@storybook/addon-links": "file:../../addons/links",
-    "@storybook/addon-options": "file:../../addons/options",
-    "@storybook/addon-storyshots": "file:../../addons/storyshots",
-    "@storybook/addons": "file:../../lib/addons",
-    "@storybook/channels": "file:../../lib/channels",
-    "@storybook/channel-postmessage": "file:../../lib/channel-postmessage",
-    "@storybook/react-native": "file:../../app/react-native",
-    "@storybook/ui": "file:../../lib/ui",
+    "@storybook/addon-actions": "file:../../packs/storybook-addon-actions.tgz",
+    "@storybook/addon-links": "file:../../packs/storybook-addon-links.tgz",
+    "@storybook/addon-options": "file:../../packs/storybook-addon-options.tgz",
+    "@storybook/addon-storyshots": "file:../../packs/storybook-addon-storyshots.tgz",
+    "@storybook/addons": "file:../../packs/storybook-addons.tgz",
+    "@storybook/channels": "file:../../packs/storybook-channels.tgz",
+    "@storybook/channel-postmessage": "file:../../packs/storybook-channel-postmessage.tgz",
+    "@storybook/components": "file:../../packs/storybook-components.tgz",
+    "@storybook/react-native": "file:../../packs/storybook-react-native.tgz",
+    "@storybook/ui": "file:../../packs/storybook-ui.tgz",
     "react-dom": "^15.6.1"
   }
 }