Improve Toast setup

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

.storybook/main.ts

@@ -13,7 +13,7 @@ const isChromatic = process.env.STORYBOOK_STORY_SET === 'chromatic';
 
 // All stories for full development
 const allStories = isChromatic
-  ? ['packages/ui']
+  ? ['packages/ui', 'plugins/app']
   : [
       'packages/ui',
       'packages/core-components',

.storybook/preview.tsx

@@ -6,7 +6,7 @@ import { definePreview } from '@storybook/react-vite';
 import React, { useEffect } from 'react';
 import { TestApiProvider } from '@backstage/test-utils';
 import { AlertDisplay } from '@backstage/core-components';
-import { apis } from './support/apis';
+import { apis, appThemeApi } from './support/apis';
 import { useGlobals } from 'storybook/preview-api';
 import { UnifiedThemeProvider, themes } from '@backstage/theme';
 import { allModes } from './modes';
@@ -157,6 +157,10 @@ export default definePreview({
         };
       }, [selectedTheme, selectedThemeName]);
 
+      useEffect(() => {
+        appThemeApi.setActiveThemeId(selectedThemeMode);
+      }, [selectedThemeMode]);
+
       document.body.style.backgroundColor = 'var(--bui-bg-app)';
       document.body.style.padding =
         isFullscreen && selectedBackground !== 'app' ? '1rem' : '';

.storybook/support/apis.js

@@ -32,7 +32,7 @@ import { translationApiRef } from '@backstage/core-plugin-api/alpha';
 import { MockTranslationApi } from '@backstage/test-utils/alpha';
 
 const configApi = new ConfigReader({});
-const appThemeApi = AppThemeSelector.createWithStorage([
+export const appThemeApi = AppThemeSelector.createWithStorage([
   { id: 'light', title: 'Light', variant: 'light', theme: themes.light },
   { id: 'dark', title: 'Dark', variant: 'dark', theme: themes.dark },
 ]);

plugins/app/src/components/Toast/Toast.stories.tsx

@@ -19,7 +19,6 @@ import preview from '../../../../../.storybook/preview';
 import { Button, Flex, Text } from '../../../../../packages/ui/src';
 /* eslint-enable @backstage/no-relative-monorepo-imports */
 import { ToastQueue } from '@react-stately/toast';
-import { useApi, alertApiRef } from '@backstage/core-plugin-api';
 import { ToastContainer } from './index';
 import type { ToastApiMessageContent } from './types';
 import { MemoryRouter } from 'react-router-dom';
@@ -29,7 +28,7 @@ const toastQueue = new ToastQueue<ToastApiMessageContent>({
 });
 
 const meta = preview.meta({
-  title: 'Plugins/App/Toast',
+  title: 'App/Toast',
   component: ToastContainer,
   parameters: {
     layout: 'centered',