Revert "chore: Upgrade Storybook to v4 (#1498)"

This reverts commit e60b1c8.

.storybook/config.js

@@ -1,22 +1,20 @@
 import React from 'react';
-import { configure, addDecorator } from '@storybook/react';
-import { withInfo } from '@storybook/addon-info';
-import { withOptions } from '@storybook/addon-options';
-// import { checkA11y } from 'storybook-addon-a11y';
+import { configure, setAddon, addDecorator } from '@storybook/react';
+import infoAddon, { setDefaults } from '@storybook/addon-info';
+import { setOptions } from '@storybook/addon-options';
+import { checkA11y } from 'storybook-addon-a11y';
 import Container from './Container';
 
-addDecorator(
-  withInfo({
-    maxPropStringLength: 200, // Displays the first 200 characters in the default prop string
-  })
-);
+setOptions({
+  name: `carbon components react`,
+  url: 'https://github.com/IBM/carbon-components-react',
+});
 
-addDecorator(
-  withOptions({
-    name: `carbon components react`,
-    url: 'https://github.com/IBM/carbon-components-react',
-  })
-);
+// addon-info defaults
+setDefaults({
+  maxPropStringLength: 200, // Displays the first 200 characters in the default prop string
+});
+setAddon(infoAddon);
 
 addDecorator(story => <Container story={story} />);
 // addDecorator(checkA11y);

.storybook/webpack.config.js

@@ -1,5 +1,5 @@
 const path = require('path');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 const useExperimentalFeatures =
   process.env.CARBON_USE_EXPERIMENTAL_FEATURES === 'true';
@@ -88,14 +88,16 @@ module.exports = {
         test: /\.scss$/,
         use: !useExternalCss
           ? [{ loader: 'style-loader' }, ...styleLoaders]
-          : [{ loader: MiniCssExtractPlugin.loader }, ...styleLoaders],
+          : ExtractTextPlugin.extract({
+              use: styleLoaders,
+            }),
       },
     ],
   },
   plugins: !useExternalCss
     ? []
     : [
-        new MiniCssExtractPlugin({
+        new ExtractTextPlugin({
           filename: '[name].[contenthash].css',
         }),
       ],

docs/components.md

@@ -68,10 +68,11 @@ import readme from './README.md';
 
 storiesOf('ComponentName', module).add(
   'story-title',
-  withReadme(readme, () => <ComponentExample />, {
-    info: {
+  withReadme(
+    readme,
+    withInfo({
       text: 'Information for the given story',
-    },
-  })
+    })(() => <ComponentExample />)
+  )
 );
 ```

package.json

@@ -155,19 +155,17 @@
     "@babel/plugin-transform-object-assign": "^7.0.0",
     "@babel/preset-env": "^7.1.0",
     "@babel/preset-react": "^7.0.0",
-    "@storybook/addon-actions": "^4.0.0",
-    "@storybook/addon-info": "^4.0.0",
-    "@storybook/addon-knobs": "^4.0.0",
-    "@storybook/addon-links": "^4.0.0",
-    "@storybook/addon-options": "^4.0.0",
-    "@storybook/addon-storysource": "^4.0.0",
-    "@storybook/addons": "^4.0.0",
-    "@storybook/react": "^4.0.0",
+    "@storybook/addon-actions": "^3.4.11",
+    "@storybook/addon-info": "^3.4.11",
+    "@storybook/addon-knobs": "^3.4.11",
+    "@storybook/addon-options": "^3.4.11",
+    "@storybook/addon-storysource": "^3.4.11",
+    "@storybook/addons": "^3.4.11",
+    "@storybook/react": "^3.4.11",
     "all-contributors-cli": "^5.2.1",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^23.6.0",
-    "babel-loader": "^8.0.4",
     "babel-plugin-dev-expression": "^0.2.1",
     "babel-plugin-react-docgen": "^2.0.0",
     "bowser": "^1.6.1",
@@ -185,13 +183,13 @@
     "eslint-plugin-jsdoc": "^3.9.1",
     "eslint-plugin-jsx-a11y": "^6.1.2",
     "eslint-plugin-react": "^7.11.1",
+    "extract-text-webpack-plugin": "^3.0.0",
     "gzip-size": "^5.0.0",
     "husky": "^1.1.2",
     "jest": "^23.6.0",
     "jest-circus": "^23.6.0",
     "lcov2badge": "^0.1.0",
     "lint-staged": "^7.3.0",
-    "mini-css-extract-plugin": "^0.4.4",
     "node-sass": "4.9.2",
     "object-assign": "^4.1.1",
     "postcss-loader": "^3.0.0",
@@ -216,7 +214,6 @@
     "storybook-readme": "^4.0.2",
     "string-replace-loader": "^2.1.0",
     "validate-commit-msg": "^2.10.1",
-    "webpack": "^4.23.1",
     "whatwg-fetch": "^2.0.3"
   },
   "resolutions": {

src/components/Accordion/Accordion-story.js

@@ -3,6 +3,7 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
+import { withInfo } from '@storybook/addon-info';
 import { withKnobs, boolean, text } from '@storybook/addon-knobs';
 import Accordion from '../Accordion';
 import AccordionItem from '../AccordionItem';
@@ -19,7 +20,11 @@ storiesOf('Accordion', module)
   .addDecorator(withKnobs)
   .add(
     'Default',
-    () => (
+    withInfo({
+      text: `
+        Accordions allow users to expand and collapse sections of content.
+      `,
+    })(() => (
       <Accordion>
         <AccordionItem
           title={text('The title (title)', 'Section 1 title')}
@@ -71,27 +76,17 @@ storiesOf('Accordion', module)
           </p>
         </AccordionItem>
       </Accordion>
-    ),
-    {
-      info: {
-        text: `
-          Accordions allow users to expand and collapse sections of content.
-        `,
-      },
-    }
+    ))
   )
   .add(
     'skeleton',
-    () => (
+    withInfo({
+      text: `
+        Placeholder skeleton state to use when content is loading.
+      `,
+    })(() => (
       <div style={{ width: '500px' }}>
         <AccordionSkeleton />
       </div>
-    ),
-    {
-      info: {
-        text: `
-          Accordions allow users to expand and collapse sections of content.
-        `,
-      },
-    }
+    ))
   );

src/components/Breadcrumb/Breadcrumb-story.js

@@ -3,6 +3,7 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
+import { withInfo } from '@storybook/addon-info';
 import { withKnobs, boolean } from '@storybook/addon-knobs';
 import Breadcrumb from '../Breadcrumb';
 import BreadcrumbItem from '../BreadcrumbItem';
@@ -18,27 +19,25 @@ storiesOf('Breadcrumb', module)
   .addDecorator(withKnobs)
   .add(
     'Default',
-    () => (
+    withInfo({
+      text: `
+        Breadcrumb enables users to quickly see their location within a path of navigation and move up to a parent level if desired.
+      `,
+    })(() => (
       <Breadcrumb {...props()}>
         <BreadcrumbItem>
           <a href="/#">Breadcrumb 1</a>
         </BreadcrumbItem>
         <BreadcrumbItem href="#">Breadcrumb 2</BreadcrumbItem>
         <BreadcrumbItem href="#">Breadcrumb 3</BreadcrumbItem>
       </Breadcrumb>
-    ),
-    {
-      info: {
-        text: `
-          Breadcrumb enables users to quickly see their location within a path of navigation and move up to a parent level if desired.
-        `,
-      },
-    }
+    ))
   )
-  .add('skeleton', () => <BreadcrumbSkeleton />, {
-    info: {
+  .add(
+    'skeleton',
+    withInfo({
       text: `
-          Placeholder skeleton state to use when content is loading.
-          `,
-    },
-  });
+        Placeholder skeleton state to use when content is loading.
+        `,
+    })(() => <BreadcrumbSkeleton />)
+  );

src/components/Button/Button-story.js

@@ -1,15 +1,16 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
+import { withInfo } from '@storybook/addon-info';
 import { withKnobs, boolean, select } from '@storybook/addon-knobs';
 import { iconAddSolid, iconSearch } from 'carbon-icons';
 import Button from '../Button';
 import ButtonSkeleton from '../Button/Button.Skeleton';
 
 const icons = {
-  None: 'None',
-  'Add with filled circle (iconAddSolid from `carbon-icons`)': 'iconAddSolid',
-  'Search (iconSearch from `carbon-icons`)': 'iconSearch',
+  none: 'None',
+  iconAddSolid: 'Add with filled circle (iconAddSolid from `carbon-icons`)',
+  iconSearch: 'Search (iconSearch from `carbon-icons`)',
 };
 
 const iconMap = {
@@ -18,11 +19,11 @@ const iconMap = {
 };
 
 const kinds = {
-  'Primary button (primary)': 'primary',
-  'Secondary button (secondary)': 'secondary',
-  'Danger button (danger)': 'danger',
-  'Danger primary button (danger--primary)': 'danger--primary',
-  'Ghost button (ghost)': 'ghost',
+  primary: 'Primary button (primary)',
+  secondary: 'Secondary button (secondary)',
+  danger: 'Danger button (danger)',
+  'danger--primary': 'Danger primary button (danger--primary)',
+  ghost: 'Ghost button (ghost)',
 };
 
 const props = {
@@ -49,7 +50,30 @@ storiesOf('Buttons', module)
   .addDecorator(withKnobs)
   .add(
     'Default',
-    () => {
+    withInfo({
+      text: `
+        Buttons are used to initialize an action, either in the background or
+        foreground of an experience.
+
+        There are several kinds of buttons.
+
+        Primary buttons should be used for the principle call to action
+        on the page.
+
+        Secondary buttons should be used for secondary actions on each page.
+
+        Danger buttons should be used for a negative action (such as Delete) on the page.
+
+        Modify the behavior of the button by changing its event properties.
+
+        Small buttons may be used when there is not enough space for a
+        regular sized button. This issue is most found in tables. Small button should have three words
+        or less.
+
+        When words are not enough, icons can be used in buttons to better communicate what the button does. Icons are
+        always paired with text.
+      `,
+    })(() => {
       const regularProps = props.regular();
       return (
         <div style={{ display: 'flex', alignItems: 'center' }}>
@@ -63,37 +87,15 @@ storiesOf('Buttons', module)
           &nbsp;
         </div>
       );
-    },
-    {
-      info: {
-        text: `
-          Buttons are used to initialize an action, either in the background or
-          foreground of an experience.
-  
-          There are several kinds of buttons.
-  
-          Primary buttons should be used for the principle call to action
-          on the page.
-  
-          Secondary buttons should be used for secondary actions on each page.
-  
-          Danger buttons should be used for a negative action (such as Delete) on the page.
-  
-          Modify the behavior of the button by changing its event properties.
-  
-          Small buttons may be used when there is not enough space for a
-          regular sized button. This issue is most found in tables. Small button should have three words
-          or less.
-  
-          When words are not enough, icons can be used in buttons to better communicate what the button does. Icons are
-          always paired with text.
-        `,
-      },
-    }
+    })
   )
   .add(
     'Sets of Buttons',
-    () => {
+    withInfo({
+      text: `
+        When an action required by the user has more than one option, always use a a negative action button (secondary) paired with a positive action button (primary) in that order. Negative action buttons will be on the left. Positive action buttons should be on the right. When these two types buttons are paired in the correct order, they will automatically space themselves apart.
+      `,
+    })(() => {
       const setProps = props.set();
       return (
         <div>
@@ -105,31 +107,21 @@ storiesOf('Buttons', module)
           </Button>
         </div>
       );
-    },
-    {
-      info: {
-        text: `
-          When an action required by the user has more than one option, always use a a negative action button (secondary) paired with a positive action button (primary) in that order. Negative action buttons will be on the left. Positive action buttons should be on the right. When these two types buttons are paired in the correct order, they will automatically space themselves apart.
-        `,
-      },
-    }
+    })
   )
   .add(
     'skeleton',
-    () => (
+    withInfo({
+      text: `
+        Placeholder skeleton state to use when content is loading.
+      `,
+    })(() => (
       <div>
         <ButtonSkeleton />
         &nbsp;
         <ButtonSkeleton href="#" />
         &nbsp;
         <ButtonSkeleton small />
       </div>
-    ),
-    {
-      info: {
-        text: `
-          Placeholder skeleton state to use when content is loading.
-        `,
-      },
-    }
+    ))
   );