diff --git a/packages/core/src/components/CopyTextButton/CopyTextButton.stories.tsx b/packages/core/src/components/CopyTextButton/CopyTextButton.stories.tsx index 3dc5854ab3..92db2073d3 100644 --- a/packages/core/src/components/CopyTextButton/CopyTextButton.stories.tsx +++ b/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 ; - }, - ], }; export const Default = () => ( diff --git a/packages/storybook/.storybook/apis.js b/packages/storybook/.storybook/apis.js new file mode 100644 index 0000000000..5743dac50b --- /dev/null +++ b/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(); diff --git a/packages/storybook/.storybook/config.js b/packages/storybook/.storybook/config.js index 941b02718b..69145ea057 100644 --- a/packages/storybook/.storybook/config.js +++ b/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) => ( - - - {story()} - - +addDecorator(story => ( + + + + + {story()} + + + )); addParameters({