Storybook theme switcher (#97201)

Allow switching the EUI theme in the Storybook menu bar.

Author: smith

package.json

@@ -472,6 +472,7 @@
     "@storybook/addon-knobs": "^6.1.20",
     "@storybook/addon-storyshots": "^6.1.20",
     "@storybook/addons": "^6.1.20",
+    "@storybook/api": "^6.1.20",
     "@storybook/components": "^6.1.20",
     "@storybook/core": "^6.1.20",
     "@storybook/core-events": "^6.1.20",

packages/kbn-storybook/lib/register.ts

@@ -8,6 +8,7 @@
 
 import { addons } from '@storybook/addons';
 import { create } from '@storybook/theming';
+import { registerThemeSwitcherAddon } from './register_theme_switcher_addon';
 
 // This configures the "Manager", or main outer view of Storybook. It is an
 // addon that's loaded by the `managerEntries` part of the preset in ../preset.js.
@@ -22,3 +23,5 @@ addons.setConfig({
   panelPosition: 'bottom',
   isToolshown: true,
 });
+
+registerThemeSwitcherAddon();

packages/kbn-storybook/lib/register_theme_switcher_addon.ts

@@ -0,0 +1,36 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { addons, types } from '@storybook/addons';
+import { ThemeSwitcher } from './theme_switcher';
+
+export function registerThemeSwitcherAddon() {
+  addons.register('kibana/eui-theme-switcher', (api) => {
+    const channel = api.getChannel();
+
+    channel.on('globalsUpdated', ({ globals }) => {
+      const previewFrame = document.getElementById(
+        'storybook-preview-iframe'
+      ) as HTMLIFrameElement | null;
+      const stylesheet = previewFrame?.contentDocument?.getElementById(
+        'eui-theme-css'
+      ) as HTMLLinkElement | null;
+
+      if (stylesheet) {
+        stylesheet.href = `kbn-ui-shared-deps.${globals.euiTheme}.css`;
+      }
+    });
+
+    addons.add('kibana/eui-theme-switcher', {
+      title: 'EUI Theme Switcher',
+      type: types.TOOL,
+      match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
+      render: ThemeSwitcher,
+    });
+  });
+}

packages/kbn-storybook/lib/templates/index.ejs

@@ -21,7 +21,7 @@
     <script src="kbn-ui-shared-deps.@elastic.js"></script>
     <script src="kbn-ui-shared-deps.js"></script>
     <link href="kbn-ui-shared-deps.css" rel="stylesheet" />
-    <link href="kbn-ui-shared-deps.v7.light.css" rel="stylesheet" />
+    <link id="eui-theme-css" href="kbn-ui-shared-deps.v8.light.css" rel="stylesheet" />
     <!--                                      -->
 
     <% if (typeof headHtmlSnippet !== 'undefined') { %> <%= headHtmlSnippet %> <% } %> <%

packages/kbn-storybook/lib/theme_switcher.tsx

@@ -0,0 +1,62 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { Icons, IconButton, TooltipLinkList, WithTooltip } from '@storybook/components';
+import { useGlobals } from '@storybook/api';
+import { Link } from '@storybook/components/dist/tooltip/TooltipLinkList';
+
+const defaultTheme = 'v8.light';
+
+export function ThemeSwitcher() {
+  const [globals, updateGlobals] = useGlobals();
+  const selectedTheme = globals.euiTheme;
+
+  if (!selectedTheme || selectedTheme === defaultTheme) {
+    updateGlobals({ euiTheme: defaultTheme });
+  }
+
+  function Menu({ onHide }: { onHide: () => void }) {
+    const links: Link[] = [
+      {
+        id: 'v8.light',
+        title: 'Amsterdam: Light',
+      },
+      {
+        id: 'v8.dark',
+        title: 'Amsterdam: Dark',
+      },
+      { id: 'v7.light', title: 'Light' },
+      { id: 'v7.dark', title: 'Dark' },
+    ].map((link) => ({
+      ...link,
+      onClick: (_event, item) => {
+        if (item.id !== selectedTheme) {
+          updateGlobals({ euiTheme: item.id });
+        }
+        onHide();
+      },
+      active: selectedTheme === link.id,
+    }));
+
+    return <TooltipLinkList links={links} />;
+  }
+
+  return (
+    <WithTooltip
+      placement="top"
+      trigger="click"
+      closeOnClick
+      tooltip={({ onHide }) => <Menu onHide={onHide} />}
+    >
+      <IconButton key="eui-theme" title="Change the EUI theme">
+        <Icons icon={selectedTheme?.includes('dark') ? 'heart' : 'hearthollow'} />
+      </IconButton>
+    </WithTooltip>
+  );
+}

packages/kbn-storybook/tsconfig.json

@@ -8,12 +8,7 @@
     "declarationMap": true,
     "sourceMap": true,
     "sourceRoot": "../../../../packages/kbn-storybook",
-    "types": [
-      "node"
-    ]
+    "types": ["node"]
   },
-  "include": [
-    "*.ts",
-    "lib/*.ts"
-  ]
+  "include": ["*.ts", "lib/**/*.ts", "lib/**/*.tsx", "../../typings/index.d.ts"]
 }