Revert "Create storybook theme addon standalone (#7048)"

packages/react/.storybook/addon-carbon-theme/components/Panel.js

@@ -8,7 +8,7 @@
 import React, { useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Form } from '@storybook/components';
-import { CARBON_TYPE_TOKEN } from '../shared';
+import { CARBON_CURRENT_THEME, CARBON_TYPE_TOKEN } from '../shared';
 
 const typeTokenPairings = [
   '12-16',
@@ -36,6 +36,61 @@ const typeTokenDefaults = {
   'productive-heading-04': '28-36',
 };
 
+/**
+ * Storybook add-on panel for Carbon theme switcher.
+ */
+export const CarbonThemesPanel = ({ api, active }) => {
+  const [currentTheme, setCurrentTheme] = useState('white');
+  const handleChange = useCallback(
+    (event) => {
+      const { value } = event.target;
+      setCurrentTheme(value);
+      api.getChannel().emit(CARBON_CURRENT_THEME, value);
+    },
+    [api]
+  );
+  return (
+    active && (
+      <Form>
+        <Form.Field label="Select Carbon theme:">
+          <Form.Select
+            name="carbon-theme"
+            value={currentTheme}
+            onChange={handleChange}
+            size="flex">
+            <option key="white" value="white">
+              white
+            </option>
+            <option key="g10" value="g10">
+              g10
+            </option>
+            <option key="g90" value="g90">
+              g90
+            </option>
+            <option key="g100" value="g100">
+              g100
+            </option>
+          </Form.Select>
+        </Form.Field>
+      </Form>
+    )
+  );
+};
+
+CarbonThemesPanel.propTypes = {
+  /**
+   * 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.
  */

packages/react/.storybook/addon-carbon-theme/register.js

@@ -7,10 +7,24 @@
 
 import React from 'react';
 import { addons, types } from '@storybook/addons';
-import { CarbonTypePanel } from './components/Panel';
-import { CARBON_TYPE_ADDON_ID, CARBON_TYPE_PANEL_ID } from './shared';
+import { CarbonThemesPanel, CarbonTypePanel } from './components/Panel';
+import {
+  CARBON_THEMES_ADDON_ID,
+  CARBON_THEME_PANEL_ID,
+  CARBON_TYPE_ADDON_ID,
+  CARBON_TYPE_PANEL_ID,
+} from './shared';
 
 if (process.env.CARBON_REACT_STORYBOOK_USE_CUSTOM_PROPERTIES === 'true') {
+  addons.register(CARBON_THEMES_ADDON_ID, (api) => {
+    addons.addPanel(CARBON_THEME_PANEL_ID, {
+      title: 'Carbon theme',
+      render: ({ active, key }) => (
+        <CarbonThemesPanel api={api} key={key} active={active} />
+      ),
+    });
+  });
+
   addons.register(CARBON_TYPE_ADDON_ID, (api) => {
     addons.addPanel(CARBON_TYPE_PANEL_ID, {
       title: 'Carbon type',

packages/react/.storybook/addon-carbon-theme/shared.js

@@ -5,6 +5,9 @@
  * 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`;

packages/react/.storybook/main.js

@@ -7,16 +7,10 @@
 
 'use strict';
 
-const addons = [
-  'storybook-preset-carbon',
-  require.resolve('./addon-carbon-theme/register'),
-];
-
-if (process.env.CARBON_REACT_STORYBOOK_USE_CUSTOM_PROPERTIES === 'true') {
-  addons.push('@carbon/storybook-addon-theme/register');
-}
-
 module.exports = {
-  addons,
+  addons: [
+    'storybook-preset-carbon',
+    require.resolve('./addon-carbon-theme/register'),
+  ],
   stories: ['../src/**/*-story.js', '../src/**/*.stories.mdx'],
 };

packages/react/.storybook/preview.js

@@ -10,8 +10,10 @@ import { addDecorator, addParameters } from '@storybook/react';
 import addons from '@storybook/addons';
 import { themes } from '@storybook/theming';
 import { configureActions } from '@storybook/addon-actions';
-import { CARBON_TYPE_TOKEN } from './addon-carbon-theme/shared';
-import { withCarbonTheme } from '@carbon/storybook-addon-theme/react';
+import {
+  CARBON_CURRENT_THEME,
+  CARBON_TYPE_TOKEN,
+} from './addon-carbon-theme/shared';
 import Container from './Container';
 import PackageInfo from './../package.json';
 
@@ -101,7 +103,10 @@ configureActions({
 });
 
 addDecorator((story) => <Container story={story} />);
-addDecorator(withCarbonTheme);
+
+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;

packages/react/package.json

@@ -72,7 +72,6 @@
     "@babel/plugin-transform-object-assign": "^7.7.4",
     "@babel/preset-env": "^7.10.0",
     "@babel/preset-react": "^7.10.0",
-    "@carbon/storybook-addon-theme": "0.1.0",
     "@carbon/test-utils": "^10.14.0",
     "@percy/storybook": "^3.3.1",
     "@rollup/plugin-babel": "^5.2.2",