Merge branch 'master' into addon-channel-warning

storybookjs · Aug 18, 2017 · 983dd74 · 983dd74
2 parents de06581 + afeebe0
commit 983dd74
Show file tree

Hide file tree

Showing 130 changed files with 1,694 additions and 442 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/.editorconfig b/.editorconfig
@@ -0,0 +1,8 @@
+root = true
+
+[*]
+end_of_line = lf
+
+[*.{js,json}]
+indent_style = space
+indent_size = 2
diff --git a/.gitignore b/.gitignore
@@ -17,3 +17,4 @@ docs/public
 packs/*.tgz
 package-lock.json
 .nvmrc
+storybook-static
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,47 @@
+# 3.2.5
+
+2017-August-16
+
+#### Features
+
+-   Add codemod for deprecated addon-info API [#1582](https://github.com/storybooks/storybook/pull/1582)
+
+#### Bug Fixes
+
+-   Fixed addon-knobs for RN [#1635](https://github.com/storybooks/storybook/pull/1635)
+-   Make links navigate in the parent window [#1650](https://github.com/storybooks/storybook/pull/1650)
+-   Don’t render leftpanel stories tree if stories are empty [#1664](https://github.com/storybooks/storybook/pull/1664)
+-   Remove double styling for inline stories [#1651](https://github.com/storybooks/storybook/pull/1651)
+
+#### Dependency Upgrades
+
+-   Upgrade react-modal to v2.2.4 [#1666](https://github.com/storybooks/storybook/pull/1666)
+
+# 3.2.4
+
+2017-August-12
+
+#### Features
+
+-   Hierarchy expansion on search [#1598](https://github.com/storybooks/storybook/pull/1598)
+-   Add sidebarAnimations config prop [#1601](https://github.com/storybooks/storybook/pull/1601)
+-   Add hrefs to left menu links [#1523](https://github.com/storybooks/storybook/pull/1523)
+-   Enable many components of same type in addon-info prop tables [#1607](https://github.com/storybooks/storybook/pull/1607)
+-   Always collapse an expanded kind in tree view without changing selected story [#1590](https://github.com/storybooks/storybook/pull/1590)
+-   Option to select an addon panel [#1641](https://github.com/storybooks/storybook/pull/1641)
+
+#### Documentation
+
+-   Document how to use info addon as decorator [#1592](https://github.com/storybooks/storybook/pull/1592)
+-   Add Android simulator instructions for React Native [#1591](https://github.com/storybooks/storybook/pull/1591)
+
+#### Maintenance
+
+-   Tree view visual adjustments [#1599](https://github.com/storybooks/storybook/pull/1599)
+-   Add z-index to shortcuts popup overlay [#1617](https://github.com/storybooks/storybook/pull/1617)
+-   Use ReactModal for search box [#1548](https://github.com/storybooks/storybook/pull/1548)
+-   Limit react versions to >=15 [#1613](https://github.com/storybooks/storybook/pull/1613)
+
 # 3.2.3
 
 2017-August-01

diff --git a/addons/centered/README.md b/addons/centered/README.md
@@ -10,7 +10,9 @@
 Storybook Centered Decorator can be used to center components inside the preview in [Storybook](https://storybook.js.org).
 
 This addon works with Storybook for:
-[React](https://github.com/storybooks/storybook/tree/master/app/react).
+
+-   [React](https://github.com/storybooks/storybook/tree/master/app/react)
+-   [Vue](https://github.com/storybooks/storybook/tree/master/app/vue)
 
 ### Usage
 
@@ -20,7 +22,9 @@ npm install @storybook/addon-centered --save-dev
 
 #### As a decorator
 
-You can set the decorator locally:
+You can set the decorator locally.
+
+exampwle for React:
 
 ```js
 import { storiesOf } from '@storybook/react';
@@ -34,11 +38,45 @@ storiesOf('MyComponent', module)
   .add('with some props', () => (<MyComponent text="The Comp"/>));
 ```
 
-Or you can also add this decorator globally:
+example for Vue:
+
+```js
+import { storiesOf } from '@storybook/vue';
+import centered from '@storybook/addon-centered';
+
+import MyComponent from '../Component.vue';
+storiesOf('MyComponent', module)
+  .addDecorator(centered)
+  .add('without props', () => ({
+    components: { MyComponent },
+    template: '<my-component />'
+  })
+  .add('with some props', () => ({
+    components: { MyComponent },
+    template: '<my-component text="The Comp"/>'
+  });
+```
+
+Also, you can also add this decorator globally
+
+example for React:
 
 ```js
 import { configure, addDecorator } from '@storybook/react';
-import centered from '@storybook/react-storybook-decorator-centered';
+import centered from '@storybook/addon-centered';
+
+addDecorator(centered);
+
+configure(function () {
+  //...
+}, module);
+```
+
+example for Vue:
+
+```js
+import { configure, addDecorator } from '@storybook/vue';
+import centered from '@storybook/addon-centered';
 
 addDecorator(centered);
 

diff --git a/addons/centered/package.json b/addons/centered/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-centered",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "description": "Storybook decorator to center components",
   "license": "MIT",
   "author": "Muhammed Thanish <mnmtanish@gmail.com>",

diff --git a/addons/centered/src/index.js b/addons/centered/src/index.js
@@ -1,27 +1,7 @@
-import React from 'react';
+import { window } from 'global';
+import ReactCentered from './react';
+import VueCentered from './vue';
 
-const style = {
-  position: 'fixed',
-  top: 0,
-  left: 0,
-  bottom: 0,
-  right: 0,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  overflow: 'auto',
-};
+const Centered = window.STORYBOOK_ENV === 'vue' ? VueCentered : ReactCentered;
 
-const innerStyle = {
-  margin: 'auto',
-};
-
-export default function(storyFn) {
-  return (
-    <div style={style}>
-      <div style={innerStyle}>
-        {storyFn()}
-      </div>
-    </div>
-  );
-}
+export default Centered;
diff --git a/addons/centered/src/react.js b/addons/centered/src/react.js
@@ -0,0 +1,27 @@
+import React from 'react';
+
+const style = {
+  position: 'fixed',
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  overflow: 'auto',
+};
+
+const innerStyle = {
+  margin: 'auto',
+};
+
+export default function(storyFn) {
+  return (
+    <div style={style}>
+      <div style={innerStyle}>
+        {storyFn()}
+      </div>
+    </div>
+  );
+}
diff --git a/addons/centered/src/vue.js b/addons/centered/src/vue.js
@@ -0,0 +1,29 @@
+export default function () {
+  return {
+    template: `
+      <div :style="style">
+        <div :style="innerStyle">
+          <story/>
+        </div>
+      </div>
+    `,
+    data() {
+      return {
+        style: {
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          bottom: 0,
+          right: 0,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          overflow: 'auto',
+        },
+        innerStyle: {
+          margin: 'auto',
+        }
+      }
+    }
+  }
+}
diff --git a/addons/info/package.json b/addons/info/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-info",
-  "version": "3.2.0",
+  "version": "3.2.5",
   "description": "A Storybook addon to show additional information for your stories.",
   "license": "MIT",
   "main": "dist/index.js",
@@ -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 || [];
@@ -127,9 +127,7 @@ export default class Story extends React.Component {
     return (
       <div>
         {this._renderInlineHeader()}
-        <div style={this.state.stylesheet.infoStory}>
-          {this._renderStory()}
-        </div>
+        {this._renderStory()}
         <div style={this.state.stylesheet.infoPage}>
           <div style={this.state.stylesheet.infoBody}>
             {this._getInfoContent()}
@@ -349,7 +347,7 @@ export default class Story extends React.Component {
 
     const { maxPropObjectKeys, maxPropArrayLength, maxPropStringLength } = this.props;
     const propTables = array.map(type =>
-      <div key={type.name}>
+      <div key={type.displayName || type.name}>
         <h2 style={this.state.stylesheet.propTableHead}>
           "{type.displayName || type.name}" Component
         </h2>

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 };