chore(repo): add addon-docs, remove addon-info and storybook-readme

.github/CONTRIBUTING.MD

@@ -134,6 +134,47 @@ Do not use `styled-components`. Any components using it should be refactored to
 the sass partial approach. This helps promote consistency with the Carbon Design
 System.
 
+## Documenting new components
+
+Components should have a file named `{Component}.mdx` in their root directory. This file should minimally contain a few sections detailing the props and how to use the component. It can also contain simple examples of various states of the component. These examples can also link to existing stories and be used interactively within the docs tab. See [addon-docs readme for more details](https://github.com/storybookjs/storybook/blob/next/addons/docs/README.md).
+
+An minimal doc file should include:
+
+```md
+# `ExampleComponent` component
+
+## Table of Contents
+
+- [Getting started](#getting-started)
+- [Props](#props)
+- [Feedback](#feedback)
+- External Links
+  - [Source Code](https://github.com/carbon-design-system/carbon-addons-iot-react/tree/next/packages/react/src/components/ExampleComponent)
+
+## Getting started
+
+A quick introduction to the component and an example import for how to use it.
+
+`import { ExampleComponent } from 'carbon-addons-iot-react';`
+
+\```jsx
+<ExampleComponent testId="an example test id" propOne={1}/>
+\```
+
+## Props
+
+A Prop table detailing the various props that can be passed to this component, their types, defaults, and description.
+
+| Name   | Type   | Default             | Description                  |
+| :----- | :----- | :------------------ | :--------------------------- |
+| testId | string | 'component-test-id' | The test id of the component |
+
+## Feedback
+
+Help us improve this component by providing feedback, asking questions on Slack, or updating this file on
+[GitHub](https://github.com/carbon-design-system/carbon-addons-iot-react/tree/next/packages/react/src/components/ExampleComponent/ExampleComponent.mdx).
+```
+
 ## Adding new SVG images
 
 If SVG files need to be added that are not already distributed by Carbon, please
@@ -207,4 +248,4 @@ Then Sync : Download Settings. It will ask you for a Public GIST URL, here it
 is.
 
 Here's the Public GIST URL:
-https://gist.github.com/scottdickerson/5e3fb697c29f2aaa058145a3349a8229
+https://gist.github.com/scottdickerson/5e3fb697c29f2aaa058145a3349a8229

.github/README.MD

@@ -137,7 +137,7 @@ these packages if you use them directly in your project.
 
 ## 🤲 Contributing
 
-Please check out our [Contribution Guidelines](./.github/CONTRIBUTING.MD) for
+Please check out our [Contribution Guidelines](https://github.com/carbon-design-system/carbon-addons-iot-react/blob/HEAD/.github/CONTRIBUTING.MD) for
 more info on how you can help out!
 
 ## Testing

package.json

@@ -61,12 +61,12 @@
     ]
   },
   "devDependencies": {
+    "arg": "5.0.0",
     "husky": "^1.3.1",
     "lerna": "^3.22.1",
     "lint-staged": "^8.1.0",
     "prettier": "^2.1.2",
-    "prettier-config-carbon": "^0.4.0",
-    "arg": "5.0.0"
+    "prettier-config-carbon": "^0.4.0"
   },
   "sideEffects": false,
   "version": "0.0.0-development",
@@ -75,6 +75,7 @@
     "carbon-addons-iot-react/react-grid-layout": "1.2.2",
     "react-test-renderer": "16.14.0",
     "react-dom": "16.14.0",
-    "react": "16.14.0"
+    "react": "16.14.0",
+    "webpack": "4"
   }
 }

packages/react/.storybook/main.js

@@ -9,7 +9,7 @@ module.exports = {
     '@storybook/addon-links',
     '@storybook/addon-a11y',
     'storybook-addon-rtl',
-    'storybook-readme',
+    '@storybook/addon-docs',
   ],
   babel: async (options) => {
     // ensure all plugins are using loose: false (the default)

packages/react/.storybook/preview.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { addDecorator, addParameters } from '@storybook/react';
-import { withInfo } from '@storybook/addon-info';
 import { withA11y } from '@storybook/addon-a11y';
 import { withKnobs } from '@storybook/addon-knobs';
 import { configureActions } from '@storybook/addon-actions';
 import { initializeRTL } from 'storybook-addon-rtl';
+import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
 import theme from './theme';
 
 initializeRTL();
@@ -28,11 +28,12 @@ addParameters({
   },
 });
 
-addDecorator(
-  withInfo({
-    inline: false, // Global configuration for the info addon across all of your stories.
-  })
-);
+addParameters({
+  docs: {
+    container: DocsContainer,
+    page: DocsPage,
+  },
+});
 addDecorator((story) => <Container story={story} />);
 addDecorator(withA11y);
 addDecorator(withKnobs);

packages/react/jest.config.js

@@ -56,9 +56,13 @@ module.exports = {
     '^.+\\.jsx?$': 'babel-jest',
     '^.+\\.s?css$': '<rootDir>/config/jest/cssTransform.js',
     '^(?!.*\\.(js|jsx|css|json)$)': '<rootDir>/config/jest/fileTransform.js',
+    '^.+\\.mdx$': '@storybook/addon-docs/jest-transform-mdx',
   },
   testPathIgnorePatterns: ['/config/', '/lib/'],
-  transformIgnorePatterns: ['/node_modules/(?!(@carbon/charts)).+(.jsx?)', '/__mocks__/.+(.jsx?)'],
+  transformIgnorePatterns: [
+    '/node_modules/(?!(@carbon/charts|@storybook/addon-docs)).+(.jsx?)',
+    '/__mocks__/.+(.jsx?)',
+  ],
   watchPathIgnorePatterns: ['/coverage/', '/results/', '/.git/'],
   moduleFileExtensions: ['js', 'json', 'jsx'],
   snapshotSerializers: ['enzyme-to-json/serializer'],

packages/react/package.json

@@ -198,7 +198,7 @@
     "@rollup/plugin-replace": "^2.3.3",
     "@storybook/addon-a11y": "^6.2.3",
     "@storybook/addon-actions": "^6.2.3",
-    "@storybook/addon-info": "^5.3.21",
+    "@storybook/addon-docs": "^6.2.3",
     "@storybook/addon-knobs": "^6.2.3",
     "@storybook/addon-links": "^6.2.3",
     "@storybook/addon-storyshots": "^6.2.3",
@@ -273,7 +273,6 @@
     "sass": "^1.34.0",
     "sass-loader": "^7.1.0",
     "storybook-addon-rtl": "^0.2.2",
-    "storybook-readme": "^5.0.9",
     "style-loader": "^0.23.1",
     "stylelint": "^10.1.0",
     "stylelint-config-recommended-scss": "^3.3.0",
@@ -283,5 +282,9 @@
     "whatwg-fetch": "^3.0.0"
   },
   "sideEffects": false,
-  "version": "2.146.0-next.37"
+  "version": "2.146.0-next.37",
+  "resolutions": {
+    "chokidar": "3.3.1",
+    "react-grid-layout": "1.2.2"
+  }
 }

packages/react/src/components/Accordion/__snapshots__/AccordionItemDefer.story.storyshot

@@ -7,129 +7,97 @@ exports[`Storybook Snapshot tests and console checks Storyshots 1 - Watson IoT/A
   <div
     style={
       Object {
-        "position": "relative",
-        "zIndex": 0,
+        "width": "calc(100vw - 6rem)",
       }
     }
   >
-    <div
-      style={
-        Object {
-          "width": "calc(100vw - 6rem)",
-        }
-      }
+    <ul
+      className="bx--accordion bx--accordion--end"
     >
-      <ul
-        className="bx--accordion bx--accordion--end"
+      <li
+        className="bx--accordion__item"
+        id="a"
+        onAnimationEnd={[Function]}
       >
-        <li
-          className="bx--accordion__item"
-          id="a"
-          onAnimationEnd={[Function]}
+        <button
+          aria-controls="accordion-item-2"
+          aria-expanded={false}
+          className="bx--accordion__heading"
+          onClick={[Function]}
+          onKeyDown={[Function]}
+          type="button"
         >
-          <button
-            aria-controls="accordion-item-2"
-            aria-expanded={false}
-            className="bx--accordion__heading"
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
+          <svg
+            aria-hidden={true}
+            className="bx--accordion__arrow"
+            fill="currentColor"
+            focusable="false"
+            height={16}
+            preserveAspectRatio="xMidYMid meet"
+            viewBox="0 0 16 16"
+            width={16}
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden={true}
-              className="bx--accordion__arrow"
-              fill="currentColor"
-              focusable="false"
-              height={16}
-              preserveAspectRatio="xMidYMid meet"
-              viewBox="0 0 16 16"
-              width={16}
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z"
-              />
-            </svg>
-            <div
-              className="bx--accordion__title"
-            >
-              A section without deferred content rendering
-            </div>
-          </button>
+            <path
+              d="M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z"
+            />
+          </svg>
           <div
-            className="bx--accordion__content"
-            id="accordion-item-2"
+            className="bx--accordion__title"
           >
-            <p>
-              This content is always rendered to the DOM, no matter if the accordion item has been open or closed.
-            </p>
+            A section without deferred content rendering
           </div>
-        </li>
-        <li
-          className="bx--accordion__item"
-          data-testid="accordion-item-deferred"
-          id="b"
-          onAnimationEnd={[Function]}
+        </button>
+        <div
+          className="bx--accordion__content"
+          id="accordion-item-2"
+        >
+          <p>
+            This content is always rendered to the DOM, no matter if the accordion item has been open or closed.
+          </p>
+        </div>
+      </li>
+      <li
+        className="bx--accordion__item"
+        data-testid="accordion-item-deferred"
+        id="b"
+        onAnimationEnd={[Function]}
+      >
+        <button
+          aria-controls="accordion-item-3"
+          aria-expanded={false}
+          className="bx--accordion__heading"
+          onClick={[Function]}
+          onKeyDown={[Function]}
+          type="button"
         >
-          <button
-            aria-controls="accordion-item-3"
-            aria-expanded={false}
-            className="bx--accordion__heading"
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            type="button"
+          <svg
+            aria-hidden={true}
+            className="bx--accordion__arrow"
+            fill="currentColor"
+            focusable="false"
+            height={16}
+            preserveAspectRatio="xMidYMid meet"
+            viewBox="0 0 16 16"
+            width={16}
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden={true}
-              className="bx--accordion__arrow"
-              fill="currentColor"
-              focusable="false"
-              height={16}
-              preserveAspectRatio="xMidYMid meet"
-              viewBox="0 0 16 16"
-              width={16}
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z"
-              />
-            </svg>
-            <div
-              className="bx--accordion__title"
-            >
-              A section with deferred content rendering
-            </div>
-          </button>
+            <path
+              d="M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z"
+            />
+          </svg>
           <div
-            className="bx--accordion__content"
-            id="accordion-item-3"
-          />
-        </li>
-      </ul>
-    </div>
+            className="bx--accordion__title"
+          >
+            A section with deferred content rendering
+          </div>
+        </button>
+        <div
+          className="bx--accordion__content"
+          id="accordion-item-3"
+        />
+      </li>
+    </ul>
   </div>
-  <button
-    className="info__show-button"
-    onClick={[Function]}
-    style={
-      Object {
-        "background": "#027ac5",
-        "border": "none",
-        "borderRadius": "0 0 0 5px",
-        "color": "#fff",
-        "cursor": "pointer",
-        "display": "block",
-        "fontFamily": "sans-serif",
-        "fontSize": 12,
-        "padding": "5px 15px",
-        "position": "fixed",
-        "right": 0,
-        "top": 0,
-      }
-    }
-    type="button"
-  >
-    Show Info
-  </button>
 </div>
 `;