Storybook EUI theme decorator (#103582)

Add an `EuiThemeProviderDecorator` to kibanaReact which uses the Storybook globals to set the EUI theme. Add global decorators to the APM and Observability plugins so all stories are wrapped in the `EuiThemeProviderDecorator`, and they don't need to specify it in the stories. Add [jest setup helpers recommended by @storybook/testing-react](https://github.com/storybookjs/testing-react#global-config).
elastic · Jul 9, 2021 · efa4ce2 · efa4ce2
1 parent ef991b7
commit efa4ce2
Show file tree

Hide file tree

Showing 26 changed files with 165 additions and 212 deletions.
diff --git a/src/plugins/kibana_react/common/eui_styled_components.tsx b/src/plugins/kibana_react/common/eui_styled_components.tsx
@@ -6,15 +6,14 @@
  * Side Public License, v 1.
  */
 
+import type { DecoratorFn } from '@storybook/react';
 import React from 'react';
 import * as styledComponents from 'styled-components';
 import { ThemedStyledComponentsModule, ThemeProvider, ThemeProviderProps } from 'styled-components';
-
-import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
-import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
+import { euiThemeVars, euiLightVars, euiDarkVars } from '@kbn/ui-shared-deps/theme';
 
 export interface EuiTheme {
-  eui: typeof euiLightVars | typeof euiDarkVars;
+  eui: typeof euiThemeVars;
   darkMode: boolean;
 }
 
@@ -36,6 +35,16 @@ const EuiThemeProvider = <
   />
 );
 
+/**
+ * Storybook decorator using the EUI theme provider. Uses the value from
+ * `globals` provided by the Storybook theme switcher.
+ */
+export const EuiThemeProviderDecorator: DecoratorFn = (storyFn, { globals }) => {
+  const darkMode = globals.euiTheme === 'v8.dark' || globals.euiTheme === 'v7.dark';
+
+  return <EuiThemeProvider darkMode={darkMode}>{storyFn()}</EuiThemeProvider>;
+};
+
 const {
   default: euiStyled,
   css,

diff --git a/x-pack/plugins/apm/.storybook/jest_setup.js b/x-pack/plugins/apm/.storybook/jest_setup.js
@@ -0,0 +1,11 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { setGlobalConfig } from '@storybook/testing-react';
+import * as globalStorybookConfig from './preview';
+
+setGlobalConfig(globalStorybookConfig);
diff --git a/x-pack/plugins/apm/.storybook/preview.js b/x-pack/plugins/apm/.storybook/preview.js
@@ -0,0 +1,10 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { EuiThemeProviderDecorator } from '../../../../src/plugins/kibana_react/common';
+
+export const decorators = [EuiThemeProviderDecorator];
diff --git a/x-pack/plugins/apm/jest.config.js b/x-pack/plugins/apm/jest.config.js
@@ -11,4 +11,6 @@ module.exports = {
   preset: '@kbn/test',
   rootDir: path.resolve(__dirname, '../../..'),
   roots: ['<rootDir>/x-pack/plugins/apm'],
+  setupFiles: ['<rootDir>/x-pack/plugins/apm/.storybook/jest_setup.js'],
+  testPathIgnorePatterns: ['<rootDir>/x-pack/plugins/apm/e2e/'],
 };
diff --git a/x-pack/plugins/apm/public/components/alerting/error_count_alert_trigger/index.stories.tsx b/x-pack/plugins/apm/public/components/alerting/error_count_alert_trigger/index.stories.tsx
@@ -8,7 +8,6 @@
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { ErrorCountAlertTrigger } from '.';
-import { EuiThemeProvider } from '../../../../../../../src/plugins/kibana_react/common';
 import { ApmPluginContextValue } from '../../../context/apm_plugin/apm_plugin_context';
 import {
   mockApmPluginContextValue,
@@ -20,19 +19,15 @@ export default {
   component: ErrorCountAlertTrigger,
   decorators: [
     (Story: React.ComponentClass) => (
-      <EuiThemeProvider>
-        <MockApmPluginContextWrapper
-          value={
-            (mockApmPluginContextValue as unknown) as ApmPluginContextValue
-          }
-        >
-          <MemoryRouter>
-            <div style={{ width: 400 }}>
-              <Story />
-            </div>
-          </MemoryRouter>
-        </MockApmPluginContextWrapper>
-      </EuiThemeProvider>
+      <MockApmPluginContextWrapper
+        value={(mockApmPluginContextValue as unknown) as ApmPluginContextValue}
+      >
+        <MemoryRouter>
+          <div style={{ width: 400 }}>
+            <Story />
+          </div>
+        </MemoryRouter>
+      </MockApmPluginContextWrapper>
     ),
   ],
 };

diff --git a/...public/components/app/RumDashboard/VisitorBreakdownMap/__stories__/MapTooltip.stories.tsx b/...public/components/app/RumDashboard/VisitorBreakdownMap/__stories__/MapTooltip.stories.tsx
@@ -7,53 +7,50 @@
 
 import { storiesOf } from '@storybook/react';
 import React from 'react';
-import { EuiThemeProvider } from '../../../../../../../../../src/plugins/kibana_react/common';
 import { MapToolTip } from '../MapToolTip';
 import { COUNTRY_NAME, TRANSACTION_DURATION_COUNTRY } from '../useLayerList';
 
-storiesOf('app/RumDashboard/VisitorsRegionMap', module)
-  .addDecorator((storyFn) => <EuiThemeProvider>{storyFn()}</EuiThemeProvider>)
-  .add(
-    'Tooltip',
-    () => {
-      const loadFeatureProps = async () => {
-        return [
+storiesOf('app/RumDashboard/VisitorsRegionMap', module).add(
+  'Tooltip',
+  () => {
+    const loadFeatureProps = async () => {
+      return [
+        {
+          getPropertyKey: () => COUNTRY_NAME,
+          getRawValue: () => 'United States',
+        },
+        {
+          getPropertyKey: () => TRANSACTION_DURATION_COUNTRY,
+          getRawValue: () => 2434353,
+        },
+      ];
+    };
+    return (
+      <MapToolTip
+        loadFeatureProperties={loadFeatureProps as any}
+        features={[
           {
-            getPropertyKey: () => COUNTRY_NAME,
-            getRawValue: () => 'United States',
-          },
-          {
-            getPropertyKey: () => TRANSACTION_DURATION_COUNTRY,
-            getRawValue: () => 2434353,
-          },
-        ];
-      };
-      return (
-        <MapToolTip
-          loadFeatureProperties={loadFeatureProps as any}
-          features={[
-            {
-              id: 'US',
-              layerId: 'e8d1d974-eed8-462f-be2c-f0004b7619b2',
-              mbProperties: {
-                __kbn__feature_id__: 'US',
-                name: 'United States',
-                iso2: 'US',
-                iso3: 'USA',
-                __kbn_isvisibleduetojoin__: true,
-                '__kbnjoin__count__3657625d-17b0-41ef-99ba-3a2b2938655c': 439145,
-                '__kbnjoin__avg_of_transaction.duration.us__3657625d-17b0-41ef-99ba-3a2b2938655c': 2041665.6350131081,
-              },
-              actions: [],
+            id: 'US',
+            layerId: 'e8d1d974-eed8-462f-be2c-f0004b7619b2',
+            mbProperties: {
+              __kbn__feature_id__: 'US',
+              name: 'United States',
+              iso2: 'US',
+              iso3: 'USA',
+              __kbn_isvisibleduetojoin__: true,
+              '__kbnjoin__count__3657625d-17b0-41ef-99ba-3a2b2938655c': 439145,
+              '__kbnjoin__avg_of_transaction.duration.us__3657625d-17b0-41ef-99ba-3a2b2938655c': 2041665.6350131081,
             },
-          ]}
-        />
-      );
+            actions: [],
+          },
+        ]}
+      />
+    );
+  },
+  {
+    info: {
+      propTables: false,
+      source: false,
     },
-    {
-      info: {
-        propTables: false,
-        source: false,
-      },
-    }
-  );
+  }
+);
diff --git a/...mponents/app/Settings/agent_configurations/AgentConfigurationCreateEdit/index.stories.tsx b/...mponents/app/Settings/agent_configurations/AgentConfigurationCreateEdit/index.stories.tsx
@@ -8,7 +8,6 @@
 import { storiesOf } from '@storybook/react';
 import React from 'react';
 import { CoreStart } from 'kibana/public';
-import { EuiThemeProvider } from '../../../../../../../../../src/plugins/kibana_react/common';
 import { AgentConfiguration } from '../../../../../../common/agent_configuration/configuration_types';
 import { FETCH_STATUS } from '../../../../../hooks/use_fetcher';
 import { createCallApmApi } from '../../../../../services/rest/createCallApmApi';
@@ -37,13 +36,11 @@ storiesOf(
     };
 
     return (
-      <EuiThemeProvider>
-        <ApmPluginContext.Provider
-          value={(contextMock as unknown) as ApmPluginContextValue}
-        >
-          {storyFn()}
-        </ApmPluginContext.Provider>
-      </EuiThemeProvider>
+      <ApmPluginContext.Provider
+        value={(contextMock as unknown) as ApmPluginContextValue}
+      >
+        {storyFn()}
+      </ApmPluginContext.Provider>
     );
   })
   .add(
@@ -67,7 +64,6 @@ storiesOf(
         propTablesExclude: [
           AgentConfigurationCreateEdit,
           ApmPluginContext.Provider,
-          EuiThemeProvider,
         ],
         source: false,
       },

diff --git a/x-pack/plugins/apm/public/components/app/error_group_details/Distribution/index.stories.tsx b/x-pack/plugins/apm/public/components/app/error_group_details/Distribution/index.stories.tsx
@@ -11,7 +11,6 @@ import {
   ApmPluginContext,
   ApmPluginContextValue,
 } from '../../../../context/apm_plugin/apm_plugin_context';
-import { EuiThemeProvider } from '../../../../../../../../src/plugins/kibana_react/common';
 import { ErrorDistribution } from './';
 
 export default {
@@ -28,13 +27,11 @@ export default {
       };
 
       return (
-        <EuiThemeProvider>
-          <ApmPluginContext.Provider value={apmPluginContextMock}>
-            <KibanaContextProvider services={kibanaContextServices}>
-              <Story />
-            </KibanaContextProvider>
-          </ApmPluginContext.Provider>
-        </EuiThemeProvider>
+        <ApmPluginContext.Provider value={apmPluginContextMock}>
+          <KibanaContextProvider services={kibanaContextServices}>
+            <Story />
+          </KibanaContextProvider>
+        </ApmPluginContext.Provider>
       );
     },
   ],

diff --git a/...pm/public/components/app/error_group_details/detail_view/exception_stacktrace.stories.tsx b/...pm/public/components/app/error_group_details/detail_view/exception_stacktrace.stories.tsx
@@ -7,21 +7,13 @@
 
 import { Story } from '@storybook/react';
 import React, { ComponentProps, ComponentType } from 'react';
-import { EuiThemeProvider } from '../../../../../../../../src/plugins/kibana_react/common';
 import { ExceptionStacktrace } from './exception_stacktrace';
 
 type Args = ComponentProps<typeof ExceptionStacktrace>;
 
 export default {
   title: 'app/ErrorGroupDetails/DetailView/ExceptionStacktrace',
   component: ExceptionStacktrace,
-  decorators: [
-    (StoryComponent: ComponentType) => (
-      <EuiThemeProvider>
-        <StoryComponent />
-      </EuiThemeProvider>
-    ),
-  ],
 };
 
 export const JavaWithLongLines: Story<Args> = (args) => (

diff --git a/x-pack/plugins/apm/public/components/app/service_map/Popover/Popover.stories.tsx b/x-pack/plugins/apm/public/components/app/service_map/Popover/Popover.stories.tsx
@@ -8,7 +8,6 @@
 import cytoscape from 'cytoscape';
 import { CoreStart } from 'kibana/public';
 import React, { ComponentType } from 'react';
-import { EuiThemeProvider } from '../../../../../../../../src/plugins/kibana_react/common';
 import { MockApmPluginContextWrapper } from '../../../../context/apm_plugin/mock_apm_plugin_context';
 import { MockUrlParamsContextProvider } from '../../../../context/url_params_context/mock_url_params_context_provider';
 import { createCallApmApi } from '../../../../services/rest/createCallApmApi';
@@ -38,15 +37,13 @@ export default {
       createCallApmApi(coreMock);
 
       return (
-        <EuiThemeProvider>
-          <MockUrlParamsContextProvider>
-            <MockApmPluginContextWrapper>
-              <div style={{ height: 325 }}>
-                <Story />
-              </div>
-            </MockApmPluginContextWrapper>
-          </MockUrlParamsContextProvider>
-        </EuiThemeProvider>
+        <MockUrlParamsContextProvider>
+          <MockApmPluginContextWrapper>
+            <div style={{ height: 325 }}>
+              <Story />
+            </div>
+          </MockApmPluginContextWrapper>
+        </MockUrlParamsContextProvider>
       );
     },
   ],

diff --git a/x-pack/plugins/apm/public/components/app/service_map/Popover/service_stats_list.stories.tsx b/x-pack/plugins/apm/public/components/app/service_map/Popover/service_stats_list.stories.tsx
@@ -5,20 +5,12 @@
  * 2.0.
  */
 
-import React, { ComponentType } from 'react';
-import { EuiThemeProvider } from '../../../../../../../../src/plugins/kibana_react/common';
+import React from 'react';
 import { ServiceStatsList } from './ServiceStatsList';
 
 export default {
   title: 'app/ServiceMap/Popover/ServiceStatsList',
   component: ServiceStatsList,
-  decorators: [
-    (Story: ComponentType) => (
-      <EuiThemeProvider>
-        <Story />
-      </EuiThemeProvider>
-    ),
-  ],
 };
 
 export function Example() {

diff --git a/x-pack/plugins/apm/public/components/app/service_map/__stories__/Cytoscape.stories.tsx b/x-pack/plugins/apm/public/components/app/service_map/__stories__/Cytoscape.stories.tsx
@@ -6,21 +6,13 @@
  */
 
 import cytoscape from 'cytoscape';
-import React, { ComponentType } from 'react';
-import { EuiThemeProvider } from '../../../../../../../../src/plugins/kibana_react/common';
+import React from 'react';
 import { Cytoscape } from '../Cytoscape';
 import { Centerer } from './centerer';
 
 export default {
   title: 'app/ServiceMap/Cytoscape',
   component: Cytoscape,
-  decorators: [
-    (Story: ComponentType) => (
-      <EuiThemeProvider>
-        <Story />
-      </EuiThemeProvider>
-    ),
-  ],
 };
 
 export function Example() {

diff --git a/...gins/apm/public/components/app/service_map/__stories__/cytoscape_example_data.stories.tsx b/...gins/apm/public/components/app/service_map/__stories__/cytoscape_example_data.stories.tsx
@@ -16,8 +16,7 @@ import {
   EuiSpacer,
   EuiToolTip,
 } from '@elastic/eui';
-import React, { ComponentType, useEffect, useState } from 'react';
-import { EuiThemeProvider } from '../../../../../../../../src/plugins/kibana_react/common';
+import React, { useEffect, useState } from 'react';
 import { Cytoscape } from '../Cytoscape';
 import { Centerer } from './centerer';
 import exampleResponseHipsterStore from './example_response_hipster_store.json';
@@ -42,13 +41,6 @@ function getHeight() {
 export default {
   title: 'app/ServiceMap/Example data',
   component: Cytoscape,
-  decorators: [
-    (Story: ComponentType) => (
-      <EuiThemeProvider>
-        <Story />
-      </EuiThemeProvider>
-    ),
-  ],
 };
 
 export function GenerateMap() {