Merge branch 'master' into dependencies.io-update-build-250.0.0

2025-04-05 02:31:07 +08:00 · 2018-02-18 18:36:14 +03:00 · 2018-02-18 18:36:14 +03:00 · 031ccb43ab
commit 031ccb43ab
parent ef0d0bfb17 276e5d416c
19 changed files with 129 additions and 45 deletions
--- a/ADDONS_SUPPORT.md
+++ b/ADDONS_SUPPORT.md
@ -0,0 +1,17 @@
+## Addon / Framework Support Table
+
+| |[React](app/react)|[React Native](app/react-native)|[Vue](app/vue)|[Angular](app/angular)| [Polymer](app/polymer)|
+| ----------- |:-------:|:-------:|:-------:|:-------:|:-------:|
+|[a11y](addons/a11y)            |+| | | | |
+|[actions](addons/actions)      |+|+|+|+|+|
+|[background](addons/background)|+| | | | |
+|[centered](addons/centered)    |+| |+| | |
+|[events](addons/events)        |+| | | | |
+|[graphql](addons/graphql)      |+| | | | |
+|[info](addons/info)            |+| | | | |
+|[jest](addons/jest)            |+| | | | |
+|[knobs](addons/knobs)          |+|+|+|+|+|
+|[links](addons/links)          |+|+|+|+| |
+|[notes](addons/notes)          |+| |+|+|+|
+|[storyshots](addons/storyshots)|+|+|+|+| |
+|[viewport](addons/viewport)    |+| | | | |
--- a/README.md
+++ b/README.md
@ -26,7 +26,7 @@ Storybook comes with a lot of [addons](https://storybook.js.org/addons/introduct

 -   [Getting Started](#getting-started)
 -   [Projects](#projects)
-    -   [Main Projects](#main-projects)
+    -   [Supported Frameworks](#supported-frameworks)
    -   [Sub Projects](#sub-projects)
    -   [Addons](#addons)
 -   [Contributing](#contributing)
@ -64,12 +64,13 @@ For additional help, join us [in our Slack](https://now-examples-slackin-rrirkqo

 ## Projects

-### Main Projects
+### Supported Frameworks

-   [Storybook for react](app/react) - Storybook for React components
-   [Storybook for vue](app/vue) - Storybook for Vue components
-   [Storybook for angular](app/angular) - Storybook for Angular components
-   [Storybook for react-native](app/react-native) - Storybook for React-Native components
+-   [React](app/react)
+-   [React Native](app/react-native)
+-   [Vue](app/vue)
+-   [Angular](app/angular)
+-   [Polymer](app/angular) <sup>alpha</sup>

 ### Sub Projects

@ -88,6 +89,8 @@ For additional help, join us [in our Slack](https://now-examples-slackin-rrirkqo
 -   [notes](addons/notes/) - Annotate storybook stories with notes
 -   [options](addons/options/) - Customize the storybook UI in code

+See [Addon / Framework Support Table](ADDONS_SUPPORT.md)
+
 ## Contributing

 We welcome contributions to Storybook!
--- a/ROADMAP.md
+++ b/ROADMAP.md
@ -57,7 +57,7 @@ That way you can write your stories how they are best, and preview them how you

 We believe in the power of react, and think it's the right choice for a lot of projects.
 But it's up to you and your team to decide your stack.
-Unfortunately if you choose anything other then React or React-Native you can not use storybook.
+Unfortunately if you choose anything not from the list of [supported frameworks](README.md#supported-frameworks) you can not use storybook.

 We want you to be able to use storybook with the framework / library of your choice.

--- a/addons/jest/src/components/Result.js
+++ b/addons/jest/src/components/Result.js
@ -137,9 +137,9 @@ const Message = ({ msg }) => {
      (item, li) =>
        typeof item === 'string'
          ? item
-            .split(/\[32m(.*?)\[39m/)
-            // eslint-disable-next-line react/no-array-index-key
-            .map((i, index) => (index % 2 ? <Positive key={`p_${li}_${i}`}>{i}</Positive> : i))
+              .split(/\[32m(.*?)\[39m/)
+              // eslint-disable-next-line react/no-array-index-key
+              .map((i, index) => (index % 2 ? <Positive key={`p_${li}_${i}`}>{i}</Positive> : i))
          : item
    )
    .reduce((acc, item) => acc.concat(item), [])
@ -147,9 +147,9 @@ const Message = ({ msg }) => {
      (item, li) =>
        typeof item === 'string'
          ? item
-            .split(/\[31m(.*?)\[39m/)
-            // eslint-disable-next-line react/no-array-index-key
-            .map((i, index) => (index % 2 ? <Negative key={`n_${li}_${i}`}>{i}</Negative> : i))
+              .split(/\[31m(.*?)\[39m/)
+              // eslint-disable-next-line react/no-array-index-key
+              .map((i, index) => (index % 2 ? <Negative key={`n_${li}_${i}`}>{i}</Negative> : i))
          : item
    )
    .reduce((acc, item) => acc.concat(item), [])
--- a/addons/knobs/src/base.js
+++ b/addons/knobs/src/base.js
@ -48,7 +48,8 @@ export function object(name, value, groupId) {
 }

 export const select = deprecate(
-  (name, options, value, groupId) => manager.knob(name, { type: 'select', options, value, groupId }),
+  (name, options, value, groupId) =>
+    manager.knob(name, { type: 'select', options, value, groupId }),
  'in v4 keys/values of the options argument are reversed'
 );

--- a/addons/notes/README.md
+++ b/addons/notes/README.md
@ -3,7 +3,7 @@
 [![Build Status on CircleCI](https://circleci.com/gh/storybooks/storybook.svg?style=shield)](https://circleci.com/gh/storybooks/storybook)
 [![CodeFactor](https://www.codefactor.io/repository/github/storybooks/storybook/badge)](https://www.codefactor.io/repository/github/storybooks/storybook)
 [![Known Vulnerabilities](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847/badge.svg)](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)
-[![BCH compliance](https://bettercodehub.com/edge/badge/storybooks/storybook)](https://bettercodehub.com/results/storybooks/storybook) [![codecov](https://codecov.io/gh/storybooks/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/storybooks/storybook)  
+[![BCH compliance](https://bettercodehub.com/edge/badge/storybooks/storybook)](https://bettercodehub.com/results/storybooks/storybook) [![codecov](https://codecov.io/gh/storybooks/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/storybooks/storybook)
 [![Storybook Slack](https://now-examples-slackin-rrirkqohko.now.sh/badge.svg)](https://now-examples-slackin-rrirkqohko.now.sh/)
 [![Backers on Open Collective](https://opencollective.com/storybook/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/storybook/sponsors/badge.svg)](#sponsors)

@ -58,6 +58,30 @@ storiesOf('Component', module)
  .add('With Markdown', withNotes(someMarkdownText)(() => <Component/>));

 ```
+
+If you want to use Github flavored markdown inline, use `withMarkdownNotes`:
+
+```js
+import { storiesOf } from '@storybook/react';
+import { withMarkdownNotes } from '@storybook/addon-notes';
+import Component from './Component';
+
+storiesOf('Component', module)
+  .add('With Markdown', withMarkdownNotes(`
+# Hello World
+
+This is some code showing usage of the component and other inline documentation
+
+~~~js
+<div>
+  hello world!
+  <Component/>
+</div>
+~~~
+  `)(() => <Component/>));
+
+```
+
 ### Deprecated API
 This API is slated for removal in 4.0

--- a/addons/notes/package.json
+++ b/addons/notes/package.json
@ -21,6 +21,7 @@
  },
  "dependencies": {
    "babel-runtime": "^6.26.0",
+    "marked": "^0.3.12",
    "prop-types": "^15.6.0",
    "util-deprecate": "^1.0.2"
  },
--- a/addons/notes/src/index.js
+++ b/addons/notes/src/index.js
@ -1,7 +1,18 @@
 import deprecate from 'util-deprecate';
 import addons from '@storybook/addons';
+import marked from 'marked';
 import { WithNotes as ReactWithNotes } from './react';

+export const withMarkdownNotes = text => {
+  const channel = addons.getChannel();
+
+  return getStory => context => {
+    // send the notes to the channel before the story is rendered
+    channel.emit('storybook/notes/add_notes', marked(text));
+    return getStory(context);
+  };
+};
+
 export const withNotes = textOrOptions => {
  const channel = addons.getChannel();
  const options = typeof textOrOptions === 'string' ? { text: textOrOptions } : textOrOptions;
--- a/addons/storyshots/README.md
+++ b/addons/storyshots/README.md
@ -192,7 +192,7 @@ initStoryshots({suite: 'Image storyshots', test: imageSnapshot({storybookUrl: 'f

 ### Specifying options to _jest-image-snapshots_

-If you wish to customize [jest-image-snapshot](https://github.com/americanexpress/jest-image-snapshot), then you can provide a `getMatchOptions` parameter that should return the options config object.
+If you wish to customize [jest-image-snapshot](https://github.com/americanexpress/jest-image-snapshot), then you can provide a `getMatchOptions` parameter that should return the options config object. Additionally, you can provide `beforeScreenshot` which is called before the screenshot is captured.
 ```js
 import initStoryshots, { imageSnapshot } from '@storybook/addon-storyshots';
 const getMatchOptions = ({context : {kind, story}, url}) => {
@ -201,10 +201,18 @@ const getMatchOptions = ({context : {kind, story}, url}) => {
    failureThresholdType: 'percent',
  }
 }
-initStoryshots({suite: 'Image storyshots', test: imageSnapshot({storybookUrl: 'http://localhost:6006', getMatchOptions})});
+const beforeScreenshot = (page, {context : {kind, story}, url}) => {
+  return new Promise(resolve =>
+      setTimeout(() => {
+          resolve();
+      }, 600)
+  )
+}
+initStoryshots({suite: 'Image storyshots', test: imageSnapshot({storybookUrl: 'http://localhost:6006', getMatchOptions, beforeScreenshot})});
 ```
 `getMatchOptions` receives an object: `{ context: {kind, story}, url}`. _kind_ is the kind of the story and the _story_ its name. _url_ is the URL the browser will use to screenshot.

+`beforeScreenshot` receives the [Puppeteer page instance](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#class-page) and an object: `{ context: {kind, story}, url}`. _kind_ is the kind of the story and the _story_ its name. _url_ is the URL the browser will use to screenshot. `beforeScreenshot` is part of the promise chain and is called after the browser navigation is completed but before the screenshot is taken. It allows for triggering events on the page elements and delaying the screenshot and can be used avoid regressions due to mounting animations.

 ### Integrate image storyshots with regular app

--- a/addons/storyshots/src/test-body-image-snapshot.js
+++ b/addons/storyshots/src/test-body-image-snapshot.js
@ -7,6 +7,7 @@ expect.extend({ toMatchImageSnapshot });
 export const imageSnapshot = ({
  storybookUrl = 'http://localhost:6006',
  getMatchOptions = () => {},
+  beforeScreenshot = () => {},
 }) => {
  let browser; // holds ref to browser. (ie. Chrome)
  let page; // Hold ref to the page to screenshot.
@ -43,6 +44,7 @@ export const imageSnapshot = ({
        );
        throw e;
      })
+      .then(() => beforeScreenshot(page, { context, url }))
      .then(() =>
        page.screenshot().then(image => {
          expect(image).toMatchImageSnapshot(getMatchOptions({ context, url }));
--- a/addons/storysource/README.md
+++ b/addons/storysource/README.md
@ -30,4 +30,4 @@ module.exports = {
    ],
  },
 };
-```
+```
--- a/examples/angular-cli/.storybook/webpack.config.js
+++ b/examples/angular-cli/.storybook/webpack.config.js
@ -2,10 +2,7 @@ const path = require('path');

 module.exports = baseConfig => {
  baseConfig.module.rules.push({
-    test: [
-      /\.stories\.tsx?$/,
-      /index\.ts$/
-    ],
+    test: [/\.stories\.tsx?$/, /index\.ts$/],
    loaders: [require.resolve('@storybook/addon-storysource/loader')],
    include: [path.resolve(__dirname, '../src')],
    enforce: 'pre',
--- a/examples/official-storybook/package.json
+++ b/examples/official-storybook/package.json
@ -3,7 +3,7 @@
  "version": "3.4.0-alpha.8",
  "private": true,
  "scripts": {
-    "build-storybook": "build-storybook -c ./",
+    "build-storybook": "build-storybook -c ./ -s built-storybooks",
    "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",
--- a/examples/official-storybook/stories/snapshots/addon-notes.stories.storyshot
+++ b/examples/official-storybook/stories/snapshots/addon-notes.stories.storyshot
@ -17,3 +17,9 @@ exports[`Storyshots Addons|Notes withNotes rendering imported markdown 1`] = `
  Button with notes - check the notes panel for details
 </button>
 `;
+
+exports[`Storyshots Addons|Notes withNotes rendering inline, github-flavored markdown 1`] = `
+<button>
+  Button with notes from inline github-flavored markdown - check the notes panel for details
+</button>
+`;
--- a/examples/official-storybook/stories/addon-notes.stories.js
+++ b/examples/official-storybook/stories/addon-notes.stories.js
@ -2,7 +2,7 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';

 // eslint-disable-next-line import/named
-import { withNotes, WithNotes } from '@storybook/addon-notes';
+import { withNotes, WithNotes, withMarkdownNotes } from '@storybook/addon-notes';
 import { action } from '@storybook/addon-actions';
 import BaseButton from '../components/BaseButton';
 import markdownNotes from './notes/notes.md';
@ -20,6 +20,27 @@ storiesOf('Addons|Notes', module)
      <BaseButton label="Button with notes - check the notes panel for details" />
    ))
  )
+  .add(
+    'withNotes rendering inline, github-flavored markdown',
+    withMarkdownNotes(`
+# Documentation
+
+This is inline github-flavored markdown!
+
+## Example Usage
+~~~js
+storiesOf('Addons|Notes', module)
+  .add(
+    'withNotes rendering imported markdown',
+    withNotes(markdownNotes)(() => (
+      <BaseButton label="Button with notes - check the notes panel for details" />
+    ))
+  )
+~~~
+    `)(() => (
+      <BaseButton label="Button with notes from inline github-flavored markdown - check the notes panel for details" />
+    ))
+  )
  .add('using deprecated API', () => (
    <WithNotes notes="Hello">
      <BaseButton onClick={action('clicked')} label="😀 😎 👍 💯" />
--- a/examples/polymer-cli/.storybook/webpack.config.js
+++ b/examples/polymer-cli/.storybook/webpack.config.js
@ -2,14 +2,11 @@ const path = require('path');

 module.exports = (storybookBaseConfig, configType, defaultConfig) => {
  defaultConfig.module.rules.push({
-    test: [
-      /\.stories\.js$/,
-      /index\.js$/
-    ],
-    loaders: [ require.resolve('@storybook/addon-storysource/loader') ],
-    include: [ path.resolve(__dirname, '../src') ],
+    test: [/\.stories\.js$/, /index\.js$/],
+    loaders: [require.resolve('@storybook/addon-storysource/loader')],
+    include: [path.resolve(__dirname, '../src')],
    enforce: 'pre',
  });

  return defaultConfig;
-};
+};
--- a/examples/vue-kitchen-sink/.storybook/webpack.config.js
+++ b/examples/vue-kitchen-sink/.storybook/webpack.config.js
@ -2,12 +2,8 @@ const path = require('path');
 const webpack = require('webpack');

 module.exports = (storybookBaseConfig, configType, defaultConfig) => {
-
  defaultConfig.module.rules.push({
-    test: [
-      /\.stories\.js$/,
-      /index\.js$/
-    ],
+    test: [/\.stories\.js$/, /index\.js$/],
    loaders: [require.resolve('@storybook/addon-storysource/loader')],
    include: [path.resolve(__dirname, '../src')],
    enforce: 'pre',
--- a/package.json
+++ b/package.json
@ -58,14 +58,14 @@
    "commander": "^2.14.1",
    "concurrently": "^3.5.1",
    "cross-env": "^5.1.3",
-    "danger": "^3.1.6",
+    "danger": "^3.1.7",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "eslint": "^4.18.0",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-config-prettier": "^2.9.0",
    "eslint-plugin-import": "^2.8.0",
-    "eslint-plugin-jest": "^21.12.1",
+    "eslint-plugin-jest": "^21.12.2",
    "eslint-plugin-json": "^1.2.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-prettier": "^2.6.0",
--- a/yarn.lock
+++ b/yarn.lock
@ -4323,9 +4323,9 @@ damerau-levenshtein@^1.0.0:
  version "1.0.4"
  resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.4.tgz#03191c432cb6eea168bb77f3a55ffdccb8978514"

-danger@^3.1.6:
-  version "3.1.6"
-  resolved "https://registry.yarnpkg.com/danger/-/danger-3.1.6.tgz#3d9f3c063104a2cfec56acbf7e09cf3feb2d9abe"
+danger@^3.1.7:
+  version "3.1.7"
+  resolved "https://registry.yarnpkg.com/danger/-/danger-3.1.7.tgz#11814753e9a2a666f5719e6a8b9b0b3c11ed01bd"
  dependencies:
    "@octokit/rest" "^14.0.4"
    babel-polyfill "^6.23.0"
@ -5262,9 +5262,9 @@ eslint-plugin-import@2.8.0, eslint-plugin-import@^2.8.0:
    minimatch "^3.0.3"
    read-pkg-up "^2.0.0"

-eslint-plugin-jest@^21.12.1:
-  version "21.12.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-21.12.1.tgz#0a70b3e2be5172ab558f46bbff02ed11069266d6"
+eslint-plugin-jest@^21.12.2:
+  version "21.12.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-21.12.2.tgz#325f7c6a5078aed51ea087c33c26792337b5ba37"

 eslint-plugin-json@^1.2.0:
  version "1.2.0"
@ -9945,7 +9945,7 @@ markdown-table@^1.1.0:
  version "1.1.1"
  resolved "https://registry.yarnpkg.com/markdown-table/-/markdown-table-1.1.1.tgz#4b3dd3a133d1518b8ef0dbc709bf2a1b4824bc8c"

-marked@^0.3.9:
+marked@^0.3.12, marked@^0.3.9:
  version "0.3.12"
  resolved "https://registry.yarnpkg.com/marked/-/marked-0.3.12.tgz#7cf25ff2252632f3fe2406bde258e94eee927519"