feat(storybook-config): add Carbon Theme & Type Panel (#7569)

* feat(storybook-config): add custom panel

* storybook config custom preset with create-react-app package

* storybook config custom presets - need to transpile

* storybook-config-custom-presets: added babel cli & babel core

* stuck on panel rendering with custom properties variable

* stuck on panel rendering with custom properties variable

* testing file path

* panel is showing up - just not fully functioning

* feat(storybook-config): add theme and type addon panels

* chore: remove theme addon files

* feat(storybook-config): add theme and type addon panels - added copyright headers

* feat(storybook-config): ran yarn dedupe

* feat(storybook-config): make custom panel conditionally appear

* chore(storybook-config): remove merge messages

Co-authored-by: Andrea N. Cardona <[email protected]>

config/storybook-preset-carbon/.babelrc.js

@@ -0,0 +1,10 @@
+/**
+ * Copyright IBM Corp. 2021, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+module.exports = {
+  presets: ['@babel/preset-env', '@babel/preset-react'],
+};

packages/react/.storybook/addon-carbon-theme/components/Panel.js → config/storybook-preset-carbon/carbon-theme-addon/src/components/Panel.js

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2018
+ * Copyright IBM Corp. 2021, 2021
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -36,10 +36,7 @@ const typeTokenDefaults = {
   'productive-heading-04': '28-36',
 };
 
-/**
- * Storybook add-on panel for Carbon theme switcher.
- */
-export const CarbonThemesPanel = ({ api, active }) => {
+export const CarbonThemePanel = ({ api, active }) => {
   const [currentTheme, setCurrentTheme] = useState('white');
   const handleChange = useCallback(
     (event) => {
@@ -77,29 +74,31 @@ export const CarbonThemesPanel = ({ api, active }) => {
   );
 };
 
-CarbonThemesPanel.propTypes = {
+CarbonThemePanel.propTypes = {
+  /**
+   * `true` if this Storybook add-on panel is active.
+   */
+  active: PropTypes.bool.isRequired,
+
   /**
    * The Storybook API object.
    */
   api: PropTypes.shape({
     getChannel: PropTypes.func,
   }).isRequired,
-
-  /**
-   * `true` if this Storybook add-on panel is active.
-   */
-  active: PropTypes.bool.isRequired,
 };
 
-/**
- * Storybook add-on panel for Carbon type token switcher.
- */
 export const CarbonTypePanel = ({ api, active }) => {
   const [currentTypeTokens, setCurrentTypeTokens] = useState(typeTokenDefaults);
   const handleTokenChange = useCallback(
     (event) => {
       const { name: tokenName, value: tokenValue } = event.target;
-      setCurrentTypeTokens({ ...currentTypeTokens, [tokenName]: tokenValue });
+      setCurrentTypeTokens((currentTypeTokens) => {
+        return {
+          ...currentTypeTokens,
+          [tokenName]: tokenValue,
+        };
+      });
       api.getChannel().emit(CARBON_TYPE_TOKEN, { tokenName, tokenValue });
     },
     [api]
@@ -131,15 +130,15 @@ export const CarbonTypePanel = ({ api, active }) => {
 };
 
 CarbonTypePanel.propTypes = {
+  /**
+   * `true` if this Storybook add-on panel is active.
+   */
+  active: PropTypes.bool.isRequired,
+
   /**
    * The Storybook API object.
    */
   api: PropTypes.shape({
     getChannel: PropTypes.func,
   }).isRequired,
-
-  /**
-   * `true` if this Storybook add-on panel is active.
-   */
-  active: PropTypes.bool.isRequired,
 };

config/storybook-preset-carbon/carbon-theme-addon/src/preset.js

@@ -0,0 +1,14 @@
+/**
+ * Copyright IBM Corp. 2021, 2021
+ *
+ * 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 = {
+  managerEntries(entry = []) {
+    return [...entry, require.resolve('./register')];
+  },
+};

config/storybook-preset-carbon/carbon-theme-addon/src/register.js

@@ -0,0 +1,36 @@
+/**
+ * Copyright IBM Corp. 2021, 2021
+ *
+ * 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 { addons } from '@storybook/addons';
+import { CarbonThemePanel, CarbonTypePanel } from './components/Panel';
+import {
+  CARBON_THEMES_ADDON_ID,
+  CARBON_THEME_PANEL_ID,
+  CARBON_TYPE_ADDON_ID,
+  CARBON_TYPE_PANEL_ID,
+} from './shared';
+
+// Disabling because storybook addons doesn't provide proptypes or display names for these panels
+/* eslint-disable react/display-name, react/prop-types */
+addons.register(CARBON_THEMES_ADDON_ID, (api) => {
+  addons.addPanel(CARBON_THEME_PANEL_ID, {
+    title: 'Carbon Theme',
+    render: ({ active, key }) => (
+      <CarbonThemePanel api={api} key={key} active={active} />
+    ),
+  });
+});
+
+addons.register(CARBON_TYPE_ADDON_ID, (api) => {
+  addons.addPanel(CARBON_TYPE_PANEL_ID, {
+    title: 'Carbon Type',
+    render: ({ active, key }) => (
+      <CarbonTypePanel api={api} key={key} active={active} />
+    ),
+  });
+});

config/storybook-preset-carbon/carbon-theme-addon/src/shared.js

@@ -0,0 +1,13 @@
+/**
+ * Copyright IBM Corp. 2021, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export const CARBON_THEMES_ADDON_ID = 'carbon-theme';
+export const CARBON_CURRENT_THEME = `${CARBON_THEMES_ADDON_ID}/current`;
+export const CARBON_THEME_PANEL_ID = `${CARBON_THEMES_ADDON_ID}/panel`;
+export const CARBON_TYPE_ADDON_ID = 'carbon-type';
+export const CARBON_TYPE_TOKEN = `${CARBON_TYPE_ADDON_ID}/type`;
+export const CARBON_TYPE_PANEL_ID = `${CARBON_TYPE_ADDON_ID}/panel`;

config/storybook-preset-carbon/index.js

@@ -26,12 +26,12 @@ module.exports = {
     '@storybook/addon-storysource',
     '@storybook/addon-knobs',
     '@storybook/addon-actions',
-    '@storybook/addon-links',
     '@storybook/addon-docs',
     '@storybook/addon-notes/register',
     'storybook-readme/register',
-
-    // Phase 3: port over custom panels/add-ons
+    '@storybook/addon-links',
+    CARBON_REACT_STORYBOOK_USE_CUSTOM_PROPERTIES === 'true' &&
+      require.resolve('./dist/preset.js'),
   ],
 
   webpack(config) {

config/storybook-preset-carbon/package.json

@@ -17,10 +17,18 @@
     "components",
     "react"
   ],
+  "scripts": {
+    "build": "babel ./carbon-theme-addon/src --out-dir ./dist",
+    "clean": "rimraf ./dist"
+  },
   "peerDependencies": {
-    "@storybook/react": "^5.3.19"
+    "@storybook/react": "^5.3.19",
+    "react": "^16.8.6 || ^17.0.1",
+    "react-dom": "^16.8.6 || ^17.0.1"
   },
   "dependencies": {
+    "@babel/cli": "^7.12.10",
+    "@babel/core": "^7.12.10",
     "@storybook/addon-actions": "^5.3.19",
     "@storybook/addon-docs": "^5.3.19",
     "@storybook/addon-knobs": "^5.3.19",
@@ -29,9 +37,14 @@
     "@storybook/addon-storysource": "^5.3.19",
     "@storybook/addons": "^5.3.19",
     "@storybook/source-loader": "^5.3.19",
+    "react-is": "^16.8.6",
     "storybook-readme": "^5.0.8"
   },
   "devDependencies": {
-    "@storybook/react": "^5.3.19"
+    "@storybook/react": "^5.3.19",
+    "babel-loader": "^8.2.2",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "webpack": "^4.41.5"
   }
 }

packages/react/.storybook/main.js

@@ -8,9 +8,6 @@
 'use strict';
 
 module.exports = {
-  addons: [
-    'storybook-preset-carbon',
-    require.resolve('./addon-carbon-theme/register'),
-  ],
+  addons: ['storybook-preset-carbon'],
   stories: ['../src/**/*-story.js', '../src/**/*.stories.mdx'],
 };

packages/react/.storybook/preview.js

@@ -10,10 +10,7 @@ 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 { CARBON_CURRENT_THEME, CARBON_TYPE_TOKEN } from './shared';
 import Container from './Container';
 import PackageInfo from './../package.json';