Release/3.2

.eslintignore

@@ -6,6 +6,8 @@ node_modules
 app/**/demo/**
 docs/public
 
+vue
+
 *.bundle.js
 *.js.map
 

README.md

@@ -19,7 +19,7 @@ It allows you to browse a component library, view the different states of each c
 
 Storybook runs outside of your app. This allows you to develop UI components in isolation, which can improve component reuse, testability, and development speed. You can build quickly without having to worry about application-specific dependencies.
 
-Here are some featured examples that you can reference to see how Storybook works: https://storybook.js.org/examples/
+Here are some featured examples that you can reference to see how Storybook works: <https://storybook.js.org/examples/>
 
 Storybook comes with a lot of [addons](https://storybook.js.org/addons/introduction/) for component design, documentation, testing, interactivity, and so on. Storybook's easy-to-use API makes it easy to configure and extend in various ways. It has even been extended to support React Native development for mobile.
 
@@ -48,11 +48,13 @@ getstorybook
 Once it's installed, you can `npm run storybook` and it will run the development server on your local machine, and give you a URL to browse some sample stories.
 
 **Storybook v2.x migration note**: If you're using Storybook v2.x and want to shift to 3.x version the easiest way is:
+
 ```sh
 npm i -g @storybook/cli
 cd my-storybook-v2-app
 getstorybook
 ```
+
 It runs a codemod to update all package names. Read all migration details in our [Migration Guide](MIGRATION.md)
 
 For full documentation on using Storybook visit: [storybook.js.org](https://storybook.js.org)

addons/actions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-actions",
-  "version": "3.1.9",
+  "version": "3.2.0-alpha.8",
   "description": "Action Logger addon for storybook",
   "keywords": [
     "storybook"
@@ -21,7 +21,7 @@
     "storybook": "start-storybook -p 9001"
   },
   "dependencies": {
-    "@storybook/addons": "^3.1.6",
+    "@storybook/addons": "^3.2.0-alpha.8",
     "deep-equal": "^1.0.1",
     "json-stringify-safe": "^5.0.1",
     "prop-types": "^15.5.10",

addons/centered/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-centered",
-  "version": "3.1.9",
+  "version": "3.2.0-alpha.8",
   "description": "Storybook decorator to center components",
   "license": "MIT",
   "author": "Muhammed Thanish <[email protected]>",

addons/comments/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-comments",
-  "version": "3.1.9",
+  "version": "3.2.0-alpha.8",
   "description": "Comments addon for Storybook",
   "keywords": [
     "storybook"
@@ -23,7 +23,7 @@
     "storybook-remote": "start-storybook -p 3006"
   },
   "dependencies": {
-    "@storybook/addons": "^3.1.6",
+    "@storybook/addons": "^3.2.0-alpha.8",
     "babel-runtime": "^6.23.0",
     "deep-equal": "^1.0.1",
     "events": "^1.1.1",

addons/events/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-events",
-  "version": "3.1.9",
+  "version": "3.2.0-alpha.8",
   "description": "Add events to your Storybook stories.",
   "keywords": [
     "addon",
@@ -20,7 +20,7 @@
     "storybook": "start-storybook -p 6006"
   },
   "dependencies": {
-    "@storybook/addons": "^3.1.6",
+    "@storybook/addons": "^3.2.0-alpha.8",
     "babel-runtime": "^6.23.0",
     "format-json": "^1.0.3",
     "prop-types": "^15.5.10",

addons/info/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-info",
-  "version": "3.1.9",
+  "version": "3.2.0-alpha.8",
   "description": "A Storybook addon to show additional information for your stories.",
   "license": "MIT",
   "main": "dist/index.js",
@@ -14,12 +14,13 @@
     "storybook": "start-storybook -p 9010"
   },
   "dependencies": {
-    "@storybook/addons": "^3.1.6",
+    "@storybook/addons": "^3.2.0-alpha.8",
     "babel-runtime": "^6.23.0",
     "global": "^4.3.2",
     "marksy": "^2.0.0",
     "prop-types": "^15.5.10",
-    "react-addons-create-fragment": "^15.5.3"
+    "react-addons-create-fragment": "^15.5.3",
+    "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
     "git-url-parse": "^6.2.2",

addons/info/src/components/PropVal.js

@@ -137,9 +137,16 @@ export default function PropVal(props) {
   );
 }
 
+PropVal.defaultProps = {
+  val: null,
+  maxPropObjectKeys: 3,
+  maxPropArrayLength: 3,
+  maxPropStringLength: 50,
+};
+
 PropVal.propTypes = {
-  val: PropTypes.any.isRequired, // eslint-disable-line
-  maxPropObjectKeys: PropTypes.number.isRequired,
-  maxPropArrayLength: PropTypes.number.isRequired,
-  maxPropStringLength: PropTypes.number.isRequired,
+  val: PropTypes.any, // eslint-disable-line
+  maxPropObjectKeys: PropTypes.number,
+  maxPropArrayLength: PropTypes.number,
+  maxPropStringLength: PropTypes.number,
 };

addons/info/src/index.js

@@ -1,7 +1,12 @@
 import React from 'react';
+import deprecate from 'util-deprecate';
 import _Story from './components/Story';
 import { H1, H2, H3, H4, H5, H6, Code, P, UL, A, LI } from './components/markdown';
 
+function addonCompose(addonFn) {
+  return storyFn => context => addonFn(storyFn, context);
+}
+
 export const Story = _Story;
 
 const defaultOptions = {
@@ -29,59 +34,62 @@ const defaultMarksyConf = {
   ul: UL,
 };
 
-export default {
-  addWithInfo(storyName, info, storyFn, _options) {
-    if (typeof storyFn !== 'function') {
-      if (typeof info === 'function') {
+export function addInfo(storyFn, context, info, _options) {
+  if (typeof storyFn !== 'function') {
+    if (typeof info === 'function') {
         _options = storyFn; // eslint-disable-line
         storyFn = info; // eslint-disable-line
         info = ''; // eslint-disable-line
-      } else {
-        throw new Error('No story defining function has been specified');
-      }
+    } else {
+      throw new Error('No story defining function has been specified');
     }
+  }
 
-    const options = {
-      ...defaultOptions,
-      ..._options,
-    };
+  const options = {
+    ...defaultOptions,
+    ..._options,
+  };
 
-    // props.propTables can only be either an array of components or null
-    // propTables option is allowed to be set to 'false' (a boolean)
-    // if the option is false, replace it with null to avoid react warnings
-    if (!options.propTables) {
-      options.propTables = null;
-    }
+  // props.propTables can only be either an array of components or null
+  // propTables option is allowed to be set to 'false' (a boolean)
+  // if the option is false, replace it with null to avoid react warnings
+  if (!options.propTables) {
+    options.propTables = null;
+  }
 
-    const marksyConf = { ...defaultMarksyConf };
-    if (options && options.marksyConf) {
-      Object.assign(marksyConf, options.marksyConf);
-    }
+  const marksyConf = { ...defaultMarksyConf };
+  if (options && options.marksyConf) {
+    Object.assign(marksyConf, options.marksyConf);
+  }
+  const props = {
+    info,
+    context,
+    showInline: Boolean(options.inline),
+    showHeader: Boolean(options.header),
+    showSource: Boolean(options.source),
+    propTables: options.propTables,
+    propTablesExclude: options.propTablesExclude,
+    styles: typeof options.styles === 'function' ? options.styles : s => s,
+    marksyConf,
+    maxPropObjectKeys: options.maxPropObjectKeys,
+    maxPropArrayLength: options.maxPropArrayLength,
+    maxPropsIntoLine: options.maxPropsIntoLine,
+    maxPropStringLength: options.maxPropStringLength,
+  };
+  return (
+    <Story {...props}>
+      {storyFn(context)}
+    </Story>
+  );
+}
 
-    return this.add(storyName, context => {
-      const props = {
-        info,
-        context,
-        showInline: Boolean(options.inline),
-        showHeader: Boolean(options.header),
-        showSource: Boolean(options.source),
-        propTables: options.propTables,
-        propTablesExclude: options.propTablesExclude,
-        styles: typeof options.styles === 'function' ? options.styles : s => s,
-        marksyConf,
-        maxPropObjectKeys: options.maxPropObjectKeys,
-        maxPropArrayLength: options.maxPropArrayLength,
-        maxPropsIntoLine: options.maxPropsIntoLine,
-        maxPropStringLength: options.maxPropStringLength,
-      };
+export const withInfo = (info, _options) =>
+  addonCompose((storyFn, context) => addInfo(storyFn, context, info, _options));
 
-      return (
-        <Story {...props}>
-          {storyFn(context)}
-        </Story>
-      );
-    });
-  },
+export default {
+  addWithInfo: deprecate(function addWithInfo(storyName, info, storyFn, _options) {
+    return this.add(storyName, withInfo(info, _options)(storyFn));
+  }, '@storybook/addon-info .addWithInfo() addon is deprecated, use withInfo() from the same package instead. \nSee https://github.com/storybooks/storybook/tree/master/addons/info'),
 };
 
 export function setDefaults(newDefaults) {

addons/info/src/index.test.js

@@ -0,0 +1,59 @@
+/* global document */
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import AddonInfo, { withInfo, setDefaults, addInfo } from './';
+
+/* eslint-disable */
+const TestComponent = ({ func, obj, array, number, string, bool, empty }) =>
+  <div>
+    <h1>{func}</h1>
+    <h2>{obj.toString()}</h2>
+    <h3>{array}</h3>
+    <h4>{number}</h4>
+    <h5>{string}</h5>
+    <h6>{bool}</h6>
+    <p>{empty}</p>
+    <a href="#">test</a>
+    <code>storiesOf</code>
+    <ui>
+      <li>1</li>
+      <li>2</li>
+    </ui>
+  </div>;
+/* eslint-enable */
+
+const testContext = { kind: 'addon_info', story: 'jest_test' };
+const testOptions = { propTables: false };
+
+describe('addon Info', () => {
+  const story = context =>
+    <div>
+      It's a {context.story} story:
+      <TestComponent
+        func={x => x + 1}
+        obj={{ a: 'a', b: 'b' }}
+        array={[1, 2, 3]}
+        number={7}
+        string={'seven'}
+        bool
+      />
+    </div>;
+  const api = {
+    add: (name, fn) => fn(testContext),
+  };
+  it('should render <Info /> and markdown', () => {
+    const Info = withInfo(
+      '# Test story \n## with markdown info \ncontaing **bold**, *cursive* text and `code`'
+    )(story);
+    ReactDOM.render(<Info />, document.createElement('div'));
+  });
+  it('should render with missed info', () => {
+    setDefaults(testOptions);
+    addInfo(null, testContext, story, testOptions);
+  });
+  it('should show deprecation warning', () => {
+    const addWithInfo = AddonInfo.addWithInfo.bind(api);
+    addWithInfo('jest', story);
+  });
+});

addons/knobs/README.md

@@ -37,7 +37,7 @@ Now, write your stories with knobs.
 
 ```js
 import { storiesOf } from '@storybook/react';
-import { withKnobs, text, boolean, number } from '@storybook/addon-knobs';
+import { addonKnobs, text, boolean, number } from '@storybook/addon-knobs';
 
 const stories = storiesOf('Storybook Knobs', module);
 
@@ -52,14 +52,15 @@ stories.add('with a button', () => (
   </button>
 ))
 
+const options = {};
 // Knobs as dynamic variables.
-stories.add('as dynamic variables', () => {
+stories.add('as dynamic variables', addonKnobs(options)(() => {
   const name = text('Name', 'Arunoda Susiripala');
   const age = number('Age', 89);
 
   const content = `I am ${name} and I'm ${age} years old.`;
   return (<div>{content}</div>);
-});
+}));
 ```
 
 You can see your Knobs in a Storybook panel as shown below.
@@ -233,10 +234,11 @@ const value = date(label, defaultValue);
 
 If you feel like this addon is not performing well enough there is an option to use `withKnobsOptions` instead of `withKnobs`.
 Usage:
-```
+
+```js
 story.addDecorator(withKnobsOptions({
-   debounce: { wait: number, leading: boolean}, // Same as lodash debounce.
-   timestamps: true // Doesn't emit events while user is typing.
+  debounce: { wait: number, leading: boolean}, // Same as lodash debounce.
+  timestamps: true // Doesn't emit events while user is typing.
 }));
 ```
 

addons/knobs/package.json

@@ -1,10 +1,9 @@
 {
   "name": "@storybook/addon-knobs",
-  "version": "3.1.9",
+  "version": "3.2.0-alpha.8",
   "description": "Storybook Addon Prop Editor Component",
   "license": "MIT",
   "main": "dist/index.js",
-  "typings": "./storybook-addon-knobs.d.ts",
   "repository": {
     "type": "git",
     "url": "https://github.com/storybooks/storybook.git"
@@ -16,7 +15,7 @@
     "storybook": "start-storybook -p 9010"
   },
   "dependencies": {
-    "@storybook/addons": "^3.1.6",
+    "@storybook/addons": "^3.2.0-alpha.8",
     "babel-runtime": "^6.23.0",
     "deep-equal": "^1.0.1",
     "global": "^4.3.2",
@@ -26,7 +25,8 @@
     "prop-types": "^15.5.10",
     "react-color": "^2.11.4",
     "react-datetime": "^2.8.10",
-    "react-textarea-autosize": "^4.3.0"
+    "react-textarea-autosize": "^4.3.0",
+    "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
     "@types/node": "^7.0.12",
@@ -37,7 +37,8 @@
     "react-dom": "^15.6.1",
     "style-loader": "^0.17.0",
     "typescript": "^2.2.2",
-    "typescript-definition-tester": "^0.0.5"
+    "typescript-definition-tester": "^0.0.5",
+    "vue": "^2.4.1"
   },
   "peerDependencies": {
     "react": "*",