packages/storybook: add global apis decorator (#1058)

packages/core/src/components/CopyTextButton/CopyTextButton.stories.tsx

@@ -16,33 +16,10 @@
 
 import React from 'react';
 import CopyTextButton from '.';
-import {
-  ApiProvider,
-  errorApiRef,
-  ApiRegistry,
-  ErrorApi,
-} from '@backstage/core-api';
 
 export default {
   title: 'CopyTextButton',
   component: CopyTextButton,
-  decorators: [
-    (storyFn: () => JSX.Element) => {
-      // TODO: move this to common storybook config, requires core package to be separate from components
-      const registry = ApiRegistry.from([
-        [
-          errorApiRef,
-          {
-            post(error) {
-              // eslint-disable-next-line no-alert
-              window.alert(`Component posted error, ${error}`);
-            },
-          } as ErrorApi,
-        ],
-      ]);
-      return <ApiProvider apis={registry} children={storyFn()} />;
-    },
-  ],
 };
 
 export const Default = () => (

packages/storybook/.storybook/apis.js

@@ -0,0 +1,16 @@
+import {
+  ApiRegistry,
+  alertApiRef,
+  errorApiRef,
+  AlertApiForwarder,
+  ErrorApiForwarder,
+  ErrorAlerter,
+} from '@backstage/core';
+
+const builder = ApiRegistry.builder();
+
+const alertApi = builder.add(alertApiRef, new AlertApiForwarder());
+
+builder.add(errorApiRef, new ErrorAlerter(alertApi, new ErrorApiForwarder()));
+
+export const apis = builder.build();

packages/storybook/.storybook/config.js

@@ -3,14 +3,18 @@ import { addDecorator, addParameters } from '@storybook/react';
 import { lightTheme, darkTheme } from '@backstage/theme';
 import { CssBaseline, ThemeProvider } from '@material-ui/core';
 import { useDarkMode } from 'storybook-dark-mode';
-import { Content } from '@backstage/core';
+import { Content, ApiProvider, AlertDisplay } from '@backstage/core';
+import { apis } from './apis';
 
-addDecorator((story) => (
-  <ThemeProvider theme={useDarkMode() ? darkTheme : lightTheme}>
-    <CssBaseline>
-      <Content>{story()}</Content>
-    </CssBaseline>
-  </ThemeProvider>
+addDecorator(story => (
+  <ApiProvider apis={apis}>
+    <ThemeProvider theme={useDarkMode() ? darkTheme : lightTheme}>
+      <CssBaseline>
+        <AlertDisplay />
+        <Content>{story()}</Content>
+      </CssBaseline>
+    </ThemeProvider>
+  </ApiProvider>
 ));
 
 addParameters({