From 2c736550209cf80ce0cfc284a3b3fed78bf112b0 Mon Sep 17 00:00:00 2001
From: Hypnosphi <Filipp.Riabchun@jetbrains.com>
Date: Sat, 21 Apr 2018 20:19:55 +0300
Subject: [PATCH] Move addon-info stories to official-storybook

---
 addons/graphql/package.json                   |   4 +-
 addons/info/.storybook/addons.js              |   1 -
 addons/info/.storybook/config.js              |  11 --
 .../.storybook/user/modify_webpack_config.js  |   4 -
 addons/info/.storybook/webpack.config.js      |  28 ---
 addons/info/example/Button.js                 |  21 --
 addons/info/example/story.js                  | 181 ------------------
 addons/info/package.json                      |   9 +-
 .../stories/addon-info.stories.js             |  80 +++++++-
 9 files changed, 82 insertions(+), 257 deletions(-)
 delete mode 100644 addons/info/.storybook/addons.js
 delete mode 100644 addons/info/.storybook/config.js
 delete mode 100644 addons/info/.storybook/user/modify_webpack_config.js
 delete mode 100644 addons/info/.storybook/webpack.config.js
 delete mode 100644 addons/info/example/Button.js
 delete mode 100644 addons/info/example/story.js

diff --git a/addons/graphql/package.json b/addons/graphql/package.json
index b2fc80c5e31..1c8337884ec 100644
--- a/addons/graphql/package.json
+++ b/addons/graphql/package.json
@@ -17,9 +17,7 @@
     "url": "https://github.com/storybooks/storybook.git"
   },
   "scripts": {
-    "deploy-storybook": "storybook-to-ghpages",
-    "prepare": "node ../../scripts/prepare.js",
-    "storybook": "start-storybook -p 9001"
+    "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",
diff --git a/addons/info/.storybook/addons.js b/addons/info/.storybook/addons.js
deleted file mode 100644
index 5dea101a7c9..00000000000
--- a/addons/info/.storybook/addons.js
+++ /dev/null
@@ -1 +0,0 @@
-import '@storybook/addon-actions/register';
diff --git a/addons/info/.storybook/config.js b/addons/info/.storybook/config.js
deleted file mode 100644
index bfb85e5f9f1..00000000000
--- a/addons/info/.storybook/config.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-import { configure, setAddon, addDecorator } from '@storybook/react';
-import InfoAddon from '../src/';
-
-addDecorator(story => <div style={{ padding: 20 }}>{story()}</div>);
-
-setAddon(InfoAddon);
-
-configure(() => {
-  require('../example/story');
-}, module);
diff --git a/addons/info/.storybook/user/modify_webpack_config.js b/addons/info/.storybook/user/modify_webpack_config.js
deleted file mode 100644
index 75e95783687..00000000000
--- a/addons/info/.storybook/user/modify_webpack_config.js
+++ /dev/null
@@ -1,4 +0,0 @@
-module.exports = () => {
-  // This is the default webpack config defined in the `../webpack.config.js`
-  // modify as you need.
-};
diff --git a/addons/info/.storybook/webpack.config.js b/addons/info/.storybook/webpack.config.js
deleted file mode 100644
index e2343550bf3..00000000000
--- a/addons/info/.storybook/webpack.config.js
+++ /dev/null
@@ -1,28 +0,0 @@
-// IMPORTANT
-// ---------
-// This is an auto generated file with React CDK.
-// Do not modify this file.
-// Use `.storybook/user/modify_webpack_config.js instead`.
-
-const path = require('path');
-const updateConfig = require('./user/modify_webpack_config');
-
-const config = {
-  module: {
-    loaders: [
-      {
-        test: /\.css?$/,
-        loaders: ['style', 'raw'],
-        include: path.resolve(__dirname, '../'),
-      },
-      {
-        test: /\.json?$/,
-        loaders: ['json'],
-        include: path.resolve(__dirname, '../'),
-      },
-    ],
-  },
-};
-
-updateConfig(config);
-module.exports = config;
diff --git a/addons/info/example/Button.js b/addons/info/example/Button.js
deleted file mode 100644
index 70bf2aabe2a..00000000000
--- a/addons/info/example/Button.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-const Button = ({ disabled, label, onClick }) => (
-  <button disabled={disabled} onClick={onClick}>
-    {label}
-  </button>
-);
-
-Button.propTypes = {
-  label: PropTypes.string.isRequired,
-  disabled: PropTypes.bool,
-  onClick: PropTypes.func,
-};
-
-Button.defaultProps = {
-  disabled: false,
-  onClick() {},
-};
-
-export default Button;
diff --git a/addons/info/example/story.js b/addons/info/example/story.js
deleted file mode 100644
index 2b6be297537..00000000000
--- a/addons/info/example/story.js
+++ /dev/null
@@ -1,181 +0,0 @@
-import React from 'react';
-
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-
-import Button from './Button';
-
-storiesOf('Button').addWithInfo(
-  'simple usage',
-  'This is the basic usage with the button with providing a label to show the text.',
-  () => (
-    <div>
-      <Button label="The Button" onClick={action('onClick')} />
-      <br />
-      <p>Click the "?" mark at top-right to view the info.</p>
-    </div>
-  )
-);
-
-storiesOf('Button').addWithInfo(
-  'simple usage (inline info)',
-  `
-      This is the basic usage with the button with providing a label to show the text.
-    `,
-  () => <Button label="The Button" onClick={action('onClick')} />,
-  { inline: true }
-);
-
-storiesOf('Button').addWithInfo(
-  'simple usage (disable source)',
-  `
-      This is the basic usage with the button with providing a label to show the text.
-    `,
-  () => <Button label="The Button" onClick={action('onClick')} />,
-  { source: false, inline: true }
-);
-
-storiesOf('Button').addWithInfo(
-  'simple usage (no header)',
-  `
-      This is the basic usage with the button with providing a label to show the text.
-    `,
-  () => <Button label="The Button" onClick={action('onClick')} />,
-  { header: false, inline: true }
-);
-
-storiesOf('Button').addWithInfo(
-  'simple usage (no prop tables)',
-  `
-      This is the basic usage with the button with providing a label to show the text.
-    `,
-  () => <Button label="The Button" onClick={action('onClick')} />,
-  { propTables: false, inline: true }
-);
-
-storiesOf('Button').addWithInfo(
-  'simple usage (custom propTables)',
-  `
-      This is the basic usage with the button with providing a label to show the text.
-
-      Since, the story source code is wrapped inside a div, info addon can't figure out propTypes on it's own.
-      So, we need to give relevant React component classes manually using \`propTypes\` option as shown below:
-
-      ~~~js
-      storiesOf('Button')
-        .addWithInfo(
-          'simple usage (custom propTables)',
-          <info>,
-          <storyFn>,
-          { inline: true, propTables: [Button]}
-        );
-      ~~~
-    `,
-  () => (
-    <div>
-      <Button label="The Button" onClick={action('onClick')} />
-      <br />
-    </div>
-  ),
-  { inline: true, propTables: [Button] }
-);
-
-storiesOf('Button').addWithInfo(
-  'simple usage (JSX description)',
-  <div>
-    <h2>This is a JSX info section</h2>
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare massa rutrum metus
-      commodo, a mattis velit dignissim. Fusce vestibulum turpis sed massa egestas pharetra. Sed at
-      libero nulla.
-    </p>
-    <p>
-      <a href="https://github.com/storybooks/react-storybook-addon-info">This is a link</a>
-    </p>
-    <p>
-      <img alt="350x150" src="http://placehold.it/350x150" />
-    </p>
-  </div>,
-  () => (
-    <div>
-      <Button label="The Button" onClick={action('onClick')} />
-      <br />
-      <p>Click the "?" mark at top-right to view the info.</p>
-    </div>
-  )
-);
-
-storiesOf('Button').addWithInfo(
-  'simple usage (inline JSX description)',
-  <div>
-    <h2>This is a JSX info section</h2>
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare massa rutrum metus
-      commodo, a mattis velit dignissim. Fusce vestibulum turpis sed massa egestas pharetra. Sed at
-      libero nulla.
-    </p>
-    <p>
-      <a href="https://github.com/storybooks/react-storybook-addon-info">This is a link</a>
-    </p>
-    <p>
-      <img alt="350x150" src="http://placehold.it/350x150" />
-    </p>
-  </div>,
-  () => <Button label="The Button" onClick={action('onClick')} />,
-  { inline: true }
-);
-
-storiesOf('Button').addWithInfo(
-  'simple usage (maxPropsInLine === 1)',
-  `
-      This is the basic usage with the button with providing a label to show the text.
-    `,
-  () => <Button label="The Button" onClick={action('onClick')} />,
-  { inline: true, maxPropsIntoLine: 1 }
-);
-
-storiesOf('Button').addWithInfo(
-  'simple usage (maxPropObjectKeys === 5)',
-  `
-      This is the basic usage with the button with providing a label to show the text.
-    `,
-  () => <Button label="The Button" object={{ a: 1, b: 2, c: 3, d: 4, e: 5, f: 6 }} />,
-  { inline: true, maxPropObjectKeys: 5 }
-);
-
-storiesOf('Button').addWithInfo(
-  'simple usage (maxPropArrayLength === 8)',
-  `
-      This is the basic usage with the button with providing a label to show the text.
-    `,
-  () => <Button label="The Button" array={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]} />,
-  { inline: true, maxPropArrayLength: 8 }
-);
-
-storiesOf('Button').addWithInfo(
-  'simple usage (maxPropStringLength === 10)',
-  `
-      This is the basic usage with the button with providing a label to show the text.
-    `,
-  () => <Button label="The Button" string="1 2 3 4 5 6 7 8" />,
-  { inline: true, maxPropStringLength: 5 }
-);
-
-storiesOf('Button').addWithInfo(
-  'with custom styles',
-  `
-      This is an example of how to customize the styles of the info components.
-
-      For the full styles available, see \`./src/components/Story.js\`
-    `,
-  () => <Button label="The Button" onClick={action('onClick')} />,
-  {
-    inline: true,
-    styles: stylesheet => ({
-      ...stylesheet,
-      infoPage: {
-        backgroundColor: '#ccc',
-      },
-    }),
-  }
-);
diff --git a/addons/info/package.json b/addons/info/package.json
index f34d1973a4a..169d8c2fa48 100644
--- a/addons/info/package.json
+++ b/addons/info/package.json
@@ -10,9 +10,7 @@
     "url": "https://github.com/storybooks/storybook.git"
   },
   "scripts": {
-    "prepare": "node ../../scripts/prepare.js",
-    "publish-storybook": "bash .scripts/publish_storybook.sh",
-    "storybook": "start-storybook -p 9010"
+    "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
     "@storybook/client-logger": "4.0.0-alpha.3",
@@ -29,12 +27,9 @@
     "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "4.0.0-alpha.3",
-    "@storybook/react": "4.0.0-alpha.3",
     "react-test-renderer": "^16.3.2"
   },
   "peerDependencies": {
-    "react": "*",
-    "react-dom": "*"
+    "react": "*"
   }
 }
diff --git a/examples/official-storybook/stories/addon-info.stories.js b/examples/official-storybook/stories/addon-info.stories.js
index a511e0d25d4..c52442f12e6 100644
--- a/examples/official-storybook/stories/addon-info.stories.js
+++ b/examples/official-storybook/stories/addon-info.stories.js
@@ -51,6 +51,30 @@ storiesOf('Addons|Info.Markdown', module).add(
   withInfo(markdownDescription)(() => <BaseButton onClick={action('clicked')} label="Button" />)
 );
 
+const JSXDescription = (
+  <div>
+    <h2>This is a JSX info section</h2>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare massa rutrum metus
+      commodo, a mattis velit dignissim. Fusce vestibulum turpis sed massa egestas pharetra. Sed at
+      libero nulla.
+    </p>
+    <p>
+      <a href="https://github.com/storybooks/react-storybook-addon-info">This is a link</a>
+    </p>
+    <p>
+      <img alt="350x150" src="http://placehold.it/350x150" />
+    </p>
+  </div>
+);
+
+storiesOf('Addons|Info.JSX', module).add(
+  'Displays JSX in description',
+  withInfo({ text: JSXDescription })(() => (
+    <BaseButton onClick={action('clicked')} label="Button" />
+  ))
+);
+
 storiesOf('Addons|Info.Options.inline', module).add(
   'Inlines component inside story',
   withInfo({
@@ -159,7 +183,7 @@ storiesOf('Addons|Info.GitHub issues', module).add(
   ))
 );
 
-storiesOf('Addons|Info.Options.maxPropsIntoLine', module).add(
+storiesOf('Addons|Info.Options.maxPropsIntoLine === 0', module).add(
   'Object and array props are broken to lines',
   withInfo({
     text: 'Component should be inlined between description and PropType table',
@@ -212,3 +236,57 @@ storiesOf('Addons|Info.Options.maxPropsIntoLine', module).add(
     />
   ))
 );
+
+storiesOf('Addons|Info.Options.maxPropsIntoLine === 3', module).add(
+  'Object and array props are broken to lines',
+  withInfo({
+    text: 'Component should be inlined between description and PropType table',
+    inline: true,
+    maxPropsIntoLine: 3,
+  })(() => (
+    <BaseButton
+      label="Button"
+      object={{
+        one: 'Object and array properties',
+        two: 'will be broken to different lines',
+        three: 'if greater than `maxPropsIntoLine` option threshold.',
+      }}
+      array={['one', 'two', 'three', 'four']}
+      arrayOfObjects={[
+        {
+          one: 'Object and array properties will be broken to different lines',
+          two: 'if greater than `maxPropsIntoLine` option threshold.',
+          object: {
+            object1: {
+              one: 'one',
+              two: 'two',
+              three: 'three',
+            },
+            array: ['one', 'two', 'three'],
+            object2: {
+              object: {
+                one: 'one',
+                two: 'two',
+                three: 'three',
+              },
+              array: [
+                'one',
+                'two',
+                {
+                  object: {
+                    object: {
+                      one: 'one',
+                      two: 'two',
+                      three: 'three',
+                    },
+                    array: ['one', 'two', 'three'],
+                  },
+                },
+              ],
+            },
+          },
+        },
+      ]}
+    />
+  ))
+);