chore(storybook): update storybook config and convert stories to work…

… with addon-docs (#6532)

* chore(storybook): rename config to preview and addons to manager

* chore(storybook): add main.js for defining stories

* chore(storybook): move addons to main.js

* chore(storybook): add docs and notes addons

* docs(accordion): update accordion story to CSF

* chore(storybook): update sorting and remove unused addons

* chore(storybook): update stories to include component parameters

* chore(storybook): update sort order to include story title

* chore(react): revert changes for storybook and update snapshots

* docs(storybook): update container to include missing markup

Co-authored-by: TJ Egan <[email protected]>

packages/react/.storybook/Container.js

@@ -36,7 +36,9 @@ function Container({ story }) {
           flexDirection: 'column',
           alignItems: 'center',
         }}>
-        {story()}
+        <div style={{ position: 'relative', width: '100%', zIndex: 0 }}>
+          {story()}
+        </div>
       </div>
     </React.StrictMode>
   );

packages/react/.storybook/main.js

@@ -0,0 +1,22 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+module.exports = {
+  addons: [
+    '@storybook/addon-storysource',
+    '@storybook/addon-knobs',
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    '@storybook/addon-docs',
+    '@storybook/addon-notes/register',
+    'storybook-readme/register',
+    require.resolve('./addon-carbon-theme/register'),
+  ],
+  stories: ['../src/**/*-story.js', '../src/**/*.stories.mdx'],
+};

packages/react/.storybook/addons.js → packages/react/.storybook/manager.js

@@ -5,18 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import '@storybook/addon-storysource/register';
-import '@storybook/addon-knobs/register';
-import '@storybook/addon-actions/register';
-import '@storybook/addon-links/register';
-import '@storybook/addon-a11y/register';
-
-// Community addons
-import 'storybook-readme/register';
-
-// Custom addons
-import './addon-carbon-theme/register';
-
 // These options used by storybook often conflict with developer tools,
 // conditional panels, or other things that get in the way of our workflow
 localStorage.removeItem('@storybook/ui/store');

packages/react/.storybook/preview.js

@@ -0,0 +1,124 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import { addDecorator, addParameters } from '@storybook/react';
+import addons from '@storybook/addons';
+import { themes } from '@storybook/theming';
+import { configureActions } from '@storybook/addon-actions';
+import {
+  CARBON_CURRENT_THEME,
+  CARBON_TYPE_TOKEN,
+} from './addon-carbon-theme/shared';
+import Container from './Container';
+import PackageInfo from './../package.json';
+
+const customPropertyPrefix = 'cds';
+
+addParameters({
+  options: {
+    /**
+     * We sort our stories by default alphabetically, however there are specific
+     * keywords that will be sorted further down the sidebar, including
+     * "playground" and "unstable" stories.
+     */
+    storySort: (storyA, storyB) => {
+      // By default, sort by the story "kind". The "kind" refers to the
+      // top-level title of the story, either through Component Story Format
+      // with the default export, or the `storiesOf('kind', module)` format
+      if (storyA[1].kind !== storyB[1].kind) {
+        return storyA[1].kind.localeCompare(storyB[1].kind);
+      }
+
+      const idA = storyA[0];
+      const idB = storyB[0];
+
+      // To story the stories, we first build up a list of matches based on
+      // keywords. Each keyword has a specific weight that will be used to
+      // determine order later on.
+      const UNKNOWN_KEYWORD = 2;
+      const keywords = new Map([
+        ['default', 1],
+        ['playground', 3],
+        ['deprecated', 4],
+        ['unstable', 5],
+      ]);
+      const matches = new Map();
+
+      // We use this list of keywords to determine a collection of matches. By
+      // default, we will look for the greatest valued matched
+      for (const [keyword, weight] of keywords) {
+        // If we already have a match for a given id that is greater than the
+        // specific keyword we're looking for, break early
+        if (matches.get(idA) > weight || matches.get(idB) > weight) {
+          break;
+        }
+
+        // If we don't have a match already for either id, we check to see if
+        // the id includes the keyword and assigns the relevant weight, if so
+        if (idA.includes(keyword)) {
+          matches.set(idA, weight);
+        }
+
+        if (idB.includes(keyword)) {
+          matches.set(idB, weight);
+        }
+      }
+
+      // If we have matches for either id, then we will compare the ids based on
+      // the weight assigned to the matching keyword
+      if (matches.size > 0) {
+        const weightA = matches.get(idA) ?? UNKNOWN_KEYWORD;
+        const weightB = matches.get(idB) ?? UNKNOWN_KEYWORD;
+        // If we have the same weight for the ids, then we should compare them
+        // using locale compare instead of by weight
+        if (weightA === weightB) {
+          return idA.localeCompare(idB);
+        }
+        return weightA - weightB;
+      }
+
+      // By default, if we have no matches we'll do a locale compare between the
+      // two ids
+      return idA.localeCompare(idB);
+    },
+    theme: {
+      ...themes.light,
+      brandTitle: `Carbon Components React v${PackageInfo.version}`,
+      brandUrl:
+        'https://github.com/carbon-design-system/carbon/tree/master/packages/react',
+    },
+  },
+});
+
+configureActions({
+  depth: 3,
+  limit: 10,
+});
+
+addDecorator((story) => <Container story={story} />);
+
+addons.getChannel().on(CARBON_CURRENT_THEME, (theme) => {
+  document.documentElement.setAttribute('storybook-carbon-theme', theme);
+});
+
+addons.getChannel().on(CARBON_TYPE_TOKEN, ({ tokenName, tokenValue }) => {
+  const root = document.documentElement;
+  const [fontSize, lineHeight] = tokenValue.split('-');
+  const rem = (px) =>
+    `${
+      px / parseFloat(getComputedStyle(document.documentElement).fontSize)
+    }rem`;
+  root.style.setProperty(
+    `--${customPropertyPrefix}-${tokenName}-font-size`,
+    rem(fontSize)
+  );
+  root.style.setProperty(
+    `--${customPropertyPrefix}-${tokenName}-line-height`,
+    rem(lineHeight)
+  );
+});

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -103,6 +103,7 @@ Map {
       "tabIndex": 0,
       "type": "button",
     },
+    "displayName": "Button",
     "propTypes": Object {
       "as": Object {
         "args": Array [

packages/react/package.json

@@ -68,15 +68,16 @@
     "@babel/preset-react": "^7.10.0",
     "@carbon/test-utils": "^10.10.0",
     "@percy/storybook": "^3.3.0",
-    "@storybook/addon-a11y": "^5.3.19",
     "@storybook/addon-actions": "^5.3.19",
-    "@storybook/addon-info": "^5.3.19",
+    "@storybook/addon-docs": "^5.3.19",
     "@storybook/addon-knobs": "^5.3.19",
     "@storybook/addon-links": "^5.3.19",
+    "@storybook/addon-notes": "^5.3.19",
     "@storybook/addon-storysource": "^5.3.19",
     "@storybook/addons": "^5.3.19",
     "@storybook/react": "^5.3.19",
     "@storybook/source-loader": "^5.3.19",
+    "@storybook/theming": "^5.3.19",
     "babel-core": "^7.0.0-bridge.0",
     "babel-loader": "^8.1.0",
     "babel-plugin-dev-expression": "^0.2.2",