Merge branch 'release/3.3' into feature/multiple-hierarchies

storybookjs · Dec 12, 2017 · 630a9c9 · 630a9c9
2 parents df1694e + 10edde3
commit 630a9c9
Show file tree

Hide file tree

Showing 15 changed files with 98 additions and 79 deletions.
diff --git a/addons/actions/package.json b/addons/actions/package.json
@@ -21,7 +21,7 @@
   "dependencies": {
     "deep-equal": "^1.0.1",
     "prop-types": "^15.6.0",
-    "react-inspector": "^2.2.1",
+    "react-inspector": "^2.2.2",
     "uuid": "^3.1.0"
   },
   "peerDependencies": {

diff --git a/addons/info/README.md b/addons/info/README.md
@@ -101,7 +101,7 @@ setDefaults({
   propTables: [/* Components used in story */], // displays Prop Tables with this components
   propTablesExclude: [], // Exclude Components from being shown in Prop Tables section
   styles: {}, // Overrides styles of addon
-  marksyConf: {}, // Overrides components used to display markdown. Warning! This option's name will be likely deprecated in favor to "components" with the same API in 3.3 release. Follow this PR #1501 for details
+  components: {}, // Overrides components used to display markdown
   maxPropsIntoLine: 1, // Max props to display per line in source code
   maxPropObjectKeys: 10, // Displays the first 10 characters of the prop name
   maxPropArrayLength: 10, // Displays the first 10 items in the default prop array

diff --git a/addons/info/package.json b/addons/info/package.json
@@ -14,10 +14,11 @@
     "storybook": "start-storybook -p 9010"
   },
   "dependencies": {
+    "@storybook/client-logger": "^3.3.0-alpha.4",
     "@storybook/components": "^3.3.0-alpha.4",
     "babel-runtime": "^6.26.0",
     "global": "^4.3.2",
-    "marksy": "^2.0.0",
+    "marksy": "^6.0.1",
     "prop-types": "^15.6.0",
     "react-addons-create-fragment": "^15.5.3",
     "util-deprecate": "^1.0.2"

diff --git a/addons/info/src/components/Story.js b/addons/info/src/components/Story.js
@@ -1,6 +1,6 @@
 /* eslint no-underscore-dangle: 0 */
 
-import React from 'react';
+import React, { createElement } from 'react';
 import PropTypes from 'prop-types';
 import global from 'global';
 import { baseFonts } from '@storybook/components';
@@ -107,7 +107,10 @@ export default class Story extends React.Component {
       open: false,
       stylesheet: this.props.styles(JSON.parse(JSON.stringify(stylesheet))),
     };
-    this.marksy = marksy(this.props.marksyConf);
+    this.marksy = marksy({
+      createElement,
+      elements: this.props.components,
+    });
   }
 
   componentWillReceiveProps(nextProps) {
@@ -383,7 +386,7 @@ Story.propTypes = {
   showSource: PropTypes.bool,
   styles: PropTypes.func.isRequired,
   children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-  marksyConf: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  components: PropTypes.shape({}),
   maxPropsIntoLine: PropTypes.number.isRequired,
   maxPropObjectKeys: PropTypes.number.isRequired,
   maxPropArrayLength: PropTypes.number.isRequired,
@@ -398,5 +401,5 @@ Story.defaultProps = {
   showInline: false,
   showHeader: true,
   showSource: true,
-  marksyConf: {},
+  components: {},
 };
diff --git a/addons/info/src/index.js b/addons/info/src/index.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import deprecate from 'util-deprecate';
+import logger from '@storybook/client-logger';
 import Story from './components/Story';
 import PropTable from './components/PropTable';
 import makeTableComponent from './components/makeTableComponent';
@@ -17,7 +18,7 @@ const defaultOptions = {
   maxPropStringLength: 50,
 };
 
-const defaultMarksyConf = {
+const defaultComponents = {
   h1: H1,
   h2: H2,
   h3: H3,
@@ -31,6 +32,8 @@ const defaultMarksyConf = {
   ul: UL,
 };
 
+let hasWarned = false;
+
 function addInfo(storyFn, context, infoOptions) {
   const options = {
     ...defaultOptions,
@@ -44,9 +47,17 @@ function addInfo(storyFn, context, infoOptions) {
     options.propTables = null;
   }
 
-  const marksyConf = { ...defaultMarksyConf };
+  const components = { ...defaultComponents };
+  if (options && options.components) {
+    Object.assign(components, options.components);
+  }
   if (options && options.marksyConf) {
-    Object.assign(marksyConf, options.marksyConf);
+    if (!hasWarned) {
+      logger.warn('@storybook/addon-info: "marksyConf" option has been renamed to "components"');
+      hasWarned = true;
+    }
+
+    Object.assign(components, options.marksyConf);
   }
   const props = {
     info: options.text,
@@ -58,7 +69,7 @@ function addInfo(storyFn, context, infoOptions) {
     propTablesExclude: options.propTablesExclude,
     PropTable: makeTableComponent(options.TableComponent),
     styles: typeof options.styles === 'function' ? options.styles : s => s,
-    marksyConf,
+    components,
     maxPropObjectKeys: options.maxPropObjectKeys,
     maxPropArrayLength: options.maxPropArrayLength,
     maxPropsIntoLine: options.maxPropsIntoLine,

diff --git a/addons/knobs/package.json b/addons/knobs/package.json
@@ -20,7 +20,7 @@
     "global": "^4.3.2",
     "insert-css": "^2.0.0",
     "lodash.debounce": "^4.0.8",
-    "moment": "^2.19.3",
+    "moment": "^2.19.4",
     "prop-types": "^15.6.0",
     "react-color": "^2.11.4",
     "react-datetime": "^2.11.1",

diff --git a/docs/package.json b/docs/package.json
@@ -30,15 +30,15 @@
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
     "bootstrap": "^3.3.7",
-    "gatsby": "^1.9.128",
-    "gatsby-link": "^1.6.30",
-    "gatsby-plugin-sharp": "^1.6.22",
-    "gatsby-remark-autolink-headers": "^1.4.9",
-    "gatsby-remark-copy-linked-files": "^1.5.22",
-    "gatsby-remark-images": "^1.5.33",
-    "gatsby-remark-smartypants": "^1.4.9",
-    "gatsby-source-filesystem": "^1.5.9",
-    "gatsby-transformer-remark": "^1.7.23",
+    "gatsby": "^1.9.130",
+    "gatsby-link": "^1.6.31",
+    "gatsby-plugin-sharp": "^1.6.23",
+    "gatsby-remark-autolink-headers": "^1.4.10",
+    "gatsby-remark-copy-linked-files": "^1.5.23",
+    "gatsby-remark-images": "^1.5.34",
+    "gatsby-remark-smartypants": "^1.4.10",
+    "gatsby-source-filesystem": "^1.5.10",
+    "gatsby-transformer-remark": "^1.7.24",
     "gh-pages": "^1.1.0",
     "global": "^4.3.2",
     "highlight.js": "^9.12.0",

diff --git a/docs/src/pages/basics/guide-react/index.md b/docs/src/pages/basics/guide-react/index.md
@@ -79,14 +79,15 @@ Now you can write some stories inside the `../stories/index.js` file, like this:
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
+import Button from '../components/Button';
 
 storiesOf('Button', module)
   .add('with text', () => (
-    <button onClick={action('clicked')}>Hello Button</button>
+    <Button onClick={action('clicked')}>Hello Button</Button>
   ))
   .add('with some emoji', () => (
-    <button onClick={action('clicked')}>😀 😎 👍 💯</button>
-  ));
+    <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>
+  ));   
 ```
 
 Story is a single state of your component. In the above case, there are two stories for the native button component:

diff --git a/docs/yarn.lock b/docs/yarn.lock
@@ -4186,15 +4186,15 @@ fuse.js@^3.0.1:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-3.1.0.tgz#9062146c471552189b0f678b4f5a155731ae3b3c"
 
-gatsby-1-config-css-modules@^1.0.7:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/gatsby-1-config-css-modules/-/gatsby-1-config-css-modules-1.0.7.tgz#c280ecdaf6f44ade490b4b87b6ed496addac9488"
+gatsby-1-config-css-modules@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/gatsby-1-config-css-modules/-/gatsby-1-config-css-modules-1.0.8.tgz#c051b7be22c6d07d485c2d9d05e0b88c13f4a572"
   dependencies:
     babel-runtime "^6.26.0"
 
-gatsby-cli@^1.1.25:
-  version "1.1.25"
-  resolved "https://registry.yarnpkg.com/gatsby-cli/-/gatsby-cli-1.1.25.tgz#767899c351711870a3b08a9758da94e224abbfe7"
+gatsby-cli@^1.1.27:
+  version "1.1.27"
+  resolved "https://registry.yarnpkg.com/gatsby-cli/-/gatsby-cli-1.1.27.tgz#40be97cde1721ee61c25d21a21c84867e7ba3678"
   dependencies:
     babel-code-frame "^6.26.0"
     babel-runtime "^6.26.0"
@@ -4210,12 +4210,13 @@ gatsby-cli@^1.1.25:
     resolve-cwd "^2.0.0"
     source-map "^0.5.7"
     stack-trace "^0.0.10"
+    update-notifier "^2.3.0"
     yargs "^8.0.2"
     yurnalist "^0.2.1"
 
-gatsby-link@^1.6.30:
-  version "1.6.30"
-  resolved "https://registry.yarnpkg.com/gatsby-link/-/gatsby-link-1.6.30.tgz#d75a7ceaa9e138b5f4f64cc6dbf1e0632876bd09"
+gatsby-link@^1.6.31:
+  version "1.6.31"
+  resolved "https://registry.yarnpkg.com/gatsby-link/-/gatsby-link-1.6.31.tgz#552220ad68b11ef49f7b0e0d21f677158c9fdb1b"
   dependencies:
     babel-runtime "^6.26.0"
     prop-types "^15.5.8"
@@ -4228,9 +4229,9 @@ gatsby-module-loader@^1.0.9:
     babel-runtime "^6.26.0"
     loader-utils "^0.2.16"
 
-gatsby-plugin-sharp@^1.6.22:
-  version "1.6.22"
-  resolved "https://registry.yarnpkg.com/gatsby-plugin-sharp/-/gatsby-plugin-sharp-1.6.22.tgz#7d1c71a881e89c4327450b15820d4614eb72e6e3"
+gatsby-plugin-sharp@^1.6.23:
+  version "1.6.23"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-sharp/-/gatsby-plugin-sharp-1.6.23.tgz#6f53013ee72a6b4613587ec07485cffc18e40e9b"
   dependencies:
     async "^2.1.2"
     babel-runtime "^6.26.0"
@@ -4253,18 +4254,18 @@ gatsby-react-router-scroll@^1.0.6:
     scroll-behavior "^0.9.1"
     warning "^3.0.0"
 
-gatsby-remark-autolink-headers@^1.4.9:
-  version "1.4.9"
-  resolved "https://registry.yarnpkg.com/gatsby-remark-autolink-headers/-/gatsby-remark-autolink-headers-1.4.9.tgz#2eb6c0497d43a1b2600683913fa3288e7be8ac25"
+gatsby-remark-autolink-headers@^1.4.10:
+  version "1.4.10"
+  resolved "https://registry.yarnpkg.com/gatsby-remark-autolink-headers/-/gatsby-remark-autolink-headers-1.4.10.tgz#68e84e6c4b618a668a4d21cbdc155fc95a57b2f8"
   dependencies:
     babel-runtime "^6.26.0"
     github-slugger "^1.1.1"
     mdast-util-to-string "^1.0.2"
     unist-util-visit "^1.1.1"
 
-gatsby-remark-copy-linked-files@^1.5.22:
-  version "1.5.22"
-  resolved "https://registry.yarnpkg.com/gatsby-remark-copy-linked-files/-/gatsby-remark-copy-linked-files-1.5.22.tgz#00fcc9f9809441dc350201b66905f33a28fc3e8f"
+gatsby-remark-copy-linked-files@^1.5.23:
+  version "1.5.23"
+  resolved "https://registry.yarnpkg.com/gatsby-remark-copy-linked-files/-/gatsby-remark-copy-linked-files-1.5.23.tgz#fdd200c1f156e8788efde79d9389ac3694b5c066"
   dependencies:
     babel-runtime "^6.26.0"
     cheerio "^1.0.0-rc.2"
@@ -4275,30 +4276,30 @@ gatsby-remark-copy-linked-files@^1.5.22:
     path-is-inside "^1.0.2"
     unist-util-visit "^1.1.1"
 
-gatsby-remark-images@^1.5.33:
-  version "1.5.33"
-  resolved "https://registry.yarnpkg.com/gatsby-remark-images/-/gatsby-remark-images-1.5.33.tgz#41f3a7eb68d4f59f5868401242ef217c3a7f2189"
+gatsby-remark-images@^1.5.34:
+  version "1.5.34"
+  resolved "https://registry.yarnpkg.com/gatsby-remark-images/-/gatsby-remark-images-1.5.34.tgz#0e55b88d8f26e363d76b5705b7e92cc492ad15a0"
   dependencies:
     babel-runtime "^6.26.0"
     cheerio "^1.0.0-rc.2"
-    gatsby-plugin-sharp "^1.6.22"
+    gatsby-plugin-sharp "^1.6.23"
     is-relative-url "^2.0.0"
     lodash "^4.17.4"
     slash "^1.0.0"
     unist-util-select "^1.5.0"
 
-gatsby-remark-smartypants@^1.4.9:
-  version "1.4.9"
-  resolved "https://registry.yarnpkg.com/gatsby-remark-smartypants/-/gatsby-remark-smartypants-1.4.9.tgz#ed48782849bc4fbac44e1365822b436f9766c2ae"
+gatsby-remark-smartypants@^1.4.10:
+  version "1.4.10"
+  resolved "https://registry.yarnpkg.com/gatsby-remark-smartypants/-/gatsby-remark-smartypants-1.4.10.tgz#b04c06741529e693dc54fe23e191edb3cf0aea9e"
   dependencies:
     babel-runtime "^6.26.0"
     retext "^4.0.0"
     retext-smartypants "^2.0.0"
     unist-util-visit "^1.1.1"
 
-gatsby-source-filesystem@^1.5.9:
-  version "1.5.9"
-  resolved "https://registry.yarnpkg.com/gatsby-source-filesystem/-/gatsby-source-filesystem-1.5.9.tgz#f732d9e51be1b622e8416695c8cf1acd9483e822"
+gatsby-source-filesystem@^1.5.10:
+  version "1.5.10"
+  resolved "https://registry.yarnpkg.com/gatsby-source-filesystem/-/gatsby-source-filesystem-1.5.10.tgz#b2a2ed5a7656a30335961624af1da39373a9d5c5"
   dependencies:
     babel-cli "^6.26.0"
     babel-runtime "^6.26.0"
@@ -4312,9 +4313,9 @@ gatsby-source-filesystem@^1.5.9:
     slash "^1.0.0"
     valid-url "^1.0.9"
 
-gatsby-transformer-remark@^1.7.23:
-  version "1.7.23"
-  resolved "https://registry.yarnpkg.com/gatsby-transformer-remark/-/gatsby-transformer-remark-1.7.23.tgz#a0510889334223340f39244348b391be36806f6b"
+gatsby-transformer-remark@^1.7.24:
+  version "1.7.24"
+  resolved "https://registry.yarnpkg.com/gatsby-transformer-remark/-/gatsby-transformer-remark-1.7.24.tgz#b39b122b983834a86499704d013b6d639a6efa6e"
   dependencies:
     babel-runtime "^6.26.0"
     bluebird "^3.5.0"
@@ -4334,9 +4335,9 @@ gatsby-transformer-remark@^1.7.23:
     unist-util-select "^1.5.0"
     unist-util-visit "^1.1.1"
 
-gatsby@^1.9.128:
-  version "1.9.128"
-  resolved "https://registry.yarnpkg.com/gatsby/-/gatsby-1.9.128.tgz#9b78bee5cf160886610f53ef203c645b698454d4"
+gatsby@^1.9.130:
+  version "1.9.130"
+  resolved "https://registry.yarnpkg.com/gatsby/-/gatsby-1.9.130.tgz#74c22b85a3fcf75a9c2f0ba190b2f9a1b435a651"
   dependencies:
     async "^2.1.2"
     babel-code-frame "^6.22.0"
@@ -4374,8 +4375,8 @@ gatsby@^1.9.128:
     friendly-errors-webpack-plugin "^1.6.1"
     front-matter "^2.1.0"
     fs-extra "^4.0.1"
-    gatsby-1-config-css-modules "^1.0.7"
-    gatsby-cli "^1.1.25"
+    gatsby-1-config-css-modules "^1.0.8"
+    gatsby-cli "^1.1.27"
     gatsby-module-loader "^1.0.9"
     gatsby-react-router-scroll "^1.0.6"
     glob "^7.1.1"
@@ -10525,7 +10526,7 @@ unzip-response@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/unzip-response/-/unzip-response-2.0.1.tgz#d2f0f737d16b0615e72a6935ed04214572d56f97"
 
-[email protected]:
+[email protected], update-notifier@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-2.3.0.tgz#4e8827a6bb915140ab093559d7014e3ebb837451"
   dependencies:

diff --git a/examples/cra-kitchen-sink/src/stories/__snapshots__/addon-info.stories.storyshot b/examples/cra-kitchen-sink/src/stories/__snapshots__/addon-info.stories.storyshot
@@ -510,11 +510,15 @@ exports[`Storyshots Addons|Info.Markdown Displays Markdown in description 1`] =
           >
             Sometimes you might want to manually include some code examples:
           </div>
-          <pre>
+          <pre
+            class="language-js"
+            style="font-family:Menlo, Monaco, \\"Courier New\\", monospace;background-color:#fafafa;padding:.5rem;line-height:1.5;overflow-x:scroll"
+          >
             <code
-              class="hljs js"
+              class="language-js"
+              style="font-family:Menlo, Monaco, \\"Courier New\\", monospace;background-color:#fafafa"
             >
-              const codeblock = [];
+              const Button = () =&gt; &lt;button /&gt;;
             </code>
           </pre>
           <div

diff --git a/examples/cra-kitchen-sink/src/stories/addon-info.stories.js b/examples/cra-kitchen-sink/src/stories/addon-info.stories.js
@@ -33,7 +33,7 @@ const markdownDescription = `
 
 Sometimes you might want to manually include some code examples:
 ~~~js
-const codeblock = [];
+const Button = () => <button />;
 ~~~
 
 Maybe include a [link](http://storybook.js.org) to your project as well.

diff --git a/lib/components/src/highlight_button.js b/lib/components/src/highlight_button.js
@@ -5,7 +5,7 @@ export default glamorous.button(
     border: '1px solid rgba(0, 0, 0, 0)',
     font: 'inherit',
     background: 'none',
-    'box-shadow': 'none',
+    boxShadow: 'none',
     padding: 0,
     ':hover': {
       backgroundColor: 'rgba(0, 0, 0, 0.05)',

diff --git a/lib/ui/package.json b/lib/ui/package.json
@@ -32,7 +32,7 @@
     "qs": "^6.5.1",
     "react-fuzzy": "^0.5.1",
     "react-icons": "^2.2.7",
-    "react-inspector": "^2.2.1",
+    "react-inspector": "^2.2.2",
     "react-modal": "^3.1.7",
     "react-split-pane": "^0.1.71",
     "react-treebeard": "^2.0.3",

diff --git a/lib/ui/src/modules/shortcuts/actions/shortcuts.js b/lib/ui/src/modules/shortcuts/actions/shortcuts.js
@@ -3,9 +3,7 @@ import { features } from '../../../libs/key_events';
 import apiActions from '../../api/actions';
 
 const deprecationMessage = (oldName, newName) =>
-  `The ${oldName} option has been renamed to ${
-    newName
-  } and will not be available in the next major Storybook release. Please update your config.`;
+  `The ${oldName} option has been renamed to ${newName} and will not be available in the next major Storybook release. Please update your config.`;
 
 export function keyEventToOptions(currentOptions, event) {
   switch (event) {