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

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({