Move all storybook into one

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

packages/ui/src/components/Avatar/Avatar.stories.tsx

@@ -19,7 +19,7 @@ import { Avatar } from './index';
 import { Flex } from '../..';
 
 const meta = {
-  title: 'Components/Avatar',
+  title: 'Backstage UI/Avatar',
   component: Avatar,
 } satisfies Meta<typeof Avatar>;
 

packages/ui/src/components/Box/Box.stories.tsx

@@ -20,7 +20,7 @@ import { Box } from './Box';
 import { Flex } from '../Flex';
 
 const meta = {
-  title: 'Layout/Box',
+  title: 'Backstage UI/Box',
   component: Box,
   argTypes: {
     as: {

packages/ui/src/components/Button/Button.stories.tsx

@@ -21,7 +21,7 @@ import { Text } from '../Text';
 import { Icon } from '../Icon';
 
 const meta = {
-  title: 'Components/Button',
+  title: 'Backstage UI/Button',
   component: Button,
   argTypes: {
     size: {

packages/ui/src/components/ButtonIcon/ButtonIcon.stories.tsx

@@ -21,7 +21,7 @@ import { Text } from '../Text';
 import { Icon } from '../Icon';
 
 const meta = {
-  title: 'Components/ButtonIcon',
+  title: 'Backstage UI/ButtonIcon',
   component: ButtonIcon,
   argTypes: {
     size: {

packages/ui/src/components/ButtonLink/ButtonLink.stories.tsx

@@ -21,7 +21,7 @@ import { Text } from '../Text';
 import { Icon } from '../Icon';
 
 const meta = {
-  title: 'Components/ButtonLink',
+  title: 'Backstage UI/ButtonLink',
   component: ButtonLink,
   argTypes: {
     size: {

packages/ui/src/components/Card/Card.stories.tsx

@@ -25,7 +25,7 @@ export interface ListItem {
 }
 
 const meta = {
-  title: 'Components/Card',
+  title: 'Backstage UI/Card',
   component: Card,
   subcomponents: { CardHeader, CardBody, CardFooter },
 } satisfies Meta<typeof Card>;

packages/ui/src/components/Checkbox/Checkbox.stories.tsx

@@ -20,7 +20,7 @@ import { Flex } from '../Flex';
 import { Text } from '../Text';
 
 const meta = {
-  title: 'Components/Checkbox',
+  title: 'Backstage UI/Checkbox',
   component: Checkbox,
 } satisfies Meta<typeof Checkbox>;
 

packages/ui/src/components/Collapsible/Collapsible.stories.tsx

@@ -22,7 +22,7 @@ import { Text } from '../Text';
 import { Icon } from '../Icon';
 
 const meta = {
-  title: 'Components/Collapsible',
+  title: 'Backstage UI/Collapsible',
   component: Collapsible.Root,
 } satisfies Meta<typeof Collapsible.Root>;
 

packages/ui/src/components/Container/Container.stories.tsx

@@ -19,7 +19,7 @@ import { Box } from '../Box/Box';
 import { Container } from './Container';
 
 const meta = {
-  title: 'Layout/Container',
+  title: 'Backstage UI/Container',
   component: Container,
   parameters: {
     layout: 'fullscreen',

packages/ui/src/components/FieldError/FieldError.stories.tsx

@@ -19,7 +19,7 @@ import { TextField, Input, Form } from 'react-aria-components';
 import { FieldError } from './FieldError';
 
 const meta = {
-  title: 'Forms/FieldError',
+  title: 'Backstage UI/FieldError',
   component: FieldError,
 } satisfies Meta<typeof FieldError>;
 

packages/ui/src/components/FieldLabel/FieldLabel.stories.tsx

@@ -18,7 +18,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { FieldLabel } from './FieldLabel';
 
 const meta = {
-  title: 'Forms/FieldLabel',
+  title: 'Backstage UI/FieldLabel',
   component: FieldLabel,
   argTypes: {
     label: {

packages/ui/src/components/Flex/Flex.stories.tsx

@@ -19,7 +19,7 @@ import { Flex } from './Flex';
 import { Text } from '../Text';
 
 const meta = {
-  title: 'Layout/Flex',
+  title: 'Backstage UI/Flex',
   component: Flex,
   argTypes: {
     align: {

packages/ui/src/components/Grid/Grid.stories.tsx

@@ -21,7 +21,7 @@ import { Box } from '../Box/Box';
 import { Flex } from '../Flex';
 
 const meta = {
-  title: 'Layout/Grid',
+  title: 'Backstage UI/Grid',
   component: Grid.Root,
 } satisfies Meta<typeof Grid>;
 

packages/ui/src/components/Header/Header.stories.tsx

@@ -31,7 +31,7 @@ import {
 import { HeaderPageBreadcrumb } from '../HeaderPage/types';
 
 const meta = {
-  title: 'Components/Header',
+  title: 'Backstage UI/Header',
   component: Header,
   parameters: {
     layout: 'fullscreen',

packages/ui/src/components/HeaderPage/HeaderPage.stories.tsx

@@ -23,7 +23,7 @@ import { Container } from '../Container';
 import { Text } from '../Text';
 
 const meta = {
-  title: 'Components/HeaderPage',
+  title: 'Backstage UI/HeaderPage',
   component: HeaderPage,
   parameters: {
     layout: 'fullscreen',

packages/ui/src/components/Icon/Icon.stories.tsx

@@ -20,7 +20,7 @@ import { IconProvider } from './provider';
 import { icons } from './icons';
 
 const meta = {
-  title: 'Components/Icon',
+  title: 'Backstage UI/Icon',
   component: Icon,
   argTypes: {
     name: {

packages/ui/src/components/Link/Link.stories.tsx

@@ -21,7 +21,7 @@ import { Text } from '../Text';
 import { MemoryRouter } from 'react-router-dom';
 
 const meta = {
-  title: 'Components/Link',
+  title: 'Backstage UI/Link',
   component: Link,
   args: {
     children: 'Link',

packages/ui/src/components/Menu/Menu.stories.tsx

@@ -20,7 +20,7 @@ import { Text, Icon, Button, Flex } from '../../index';
 import { useState } from 'react';
 
 const meta = {
-  title: 'Components/Menu',
+  title: 'Backstage UI/Menu',
   component: Menu.Root,
 } satisfies Meta<typeof Menu.Root>;
 

packages/ui/src/components/RadioGroup/RadioGroup.stories.tsx

@@ -18,7 +18,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { RadioGroup, Radio } from './RadioGroup';
 
 const meta = {
-  title: 'Forms/RadioGroup',
+  title: 'Backstage UI/RadioGroup',
   component: RadioGroup,
 } satisfies Meta<typeof RadioGroup>;
 

packages/ui/src/components/ScrollArea/ScrollArea.stories.tsx

@@ -19,7 +19,7 @@ import { ScrollArea } from './ScrollArea';
 import { Text } from '../Text/Text';
 
 const meta = {
-  title: 'Components/ScrollArea',
+  title: 'Backstage UI/ScrollArea',
   component: ScrollArea.Root,
 } satisfies Meta<typeof ScrollArea.Root>;
 

packages/ui/src/components/SearchField/SearchField.stories.tsx

@@ -25,7 +25,7 @@ import { RiCactusLine } from '@remixicon/react';
 import { Button } from '../Button';
 
 const meta = {
-  title: 'Forms/SearchField',
+  title: 'Backstage UI/SearchField',
   component: SearchField,
   argTypes: {
     isRequired: {

packages/ui/src/components/Select/Select.stories.tsx

@@ -20,7 +20,7 @@ import { Form } from 'react-aria-components';
 import { RiCloudLine } from '@remixicon/react';
 
 const meta = {
-  title: 'Forms/Select',
+  title: 'Backstage UI/Select',
   component: Select,
 } satisfies Meta<typeof Select>;
 

packages/ui/src/components/Skeleton/Skeleton.stories.tsx

@@ -19,7 +19,7 @@ import { Skeleton } from './Skeleton';
 import { Flex } from '../Flex';
 
 const meta = {
-  title: 'Components/Skeleton',
+  title: 'Backstage UI/Skeleton',
   component: Skeleton,
   argTypes: {
     rounded: {

packages/ui/src/components/Switch/Switch.stories.tsx

@@ -18,7 +18,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Switch } from './Switch';
 
 const meta = {
-  title: 'Components/Switch',
+  title: 'Backstage UI/Switch',
   component: Switch,
 } satisfies Meta<typeof Switch>;
 

packages/ui/src/components/Table/Table.stories.tsx

@@ -35,7 +35,7 @@ import { RiCactusLine } from '@remixicon/react';
 import { TablePagination } from '../TablePagination';
 
 const meta = {
-  title: 'Components/Table',
+  title: 'Backstage UI/Table',
   decorators: [
     (Story: StoryFn) => (
       <MemoryRouter>

packages/ui/src/components/TablePagination/TablePagination.stories.tsx

@@ -19,7 +19,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { TablePagination } from './TablePagination';
 
 const meta = {
-  title: 'Components/TablePagination',
+  title: 'Backstage UI/TablePagination',
   component: TablePagination,
   argTypes: {
     offset: { control: 'number' },

packages/ui/src/components/Tabs/Tabs.stories.tsx

@@ -21,7 +21,7 @@ import { Box } from '../Box';
 import { Text } from '../Text';
 
 const meta = {
-  title: 'Components/Tabs',
+  title: 'Backstage UI/Tabs',
   component: Tabs,
 } satisfies Meta<typeof Tabs>;
 

packages/ui/src/components/Text/Text.stories.tsx

@@ -19,7 +19,7 @@ import { Text } from './Text';
 import { Flex } from '../Flex';
 
 const meta = {
-  title: 'Components/Text',
+  title: 'Backstage UI/Text',
   component: Text,
   args: {
     children: 'Text',

packages/ui/src/components/TextField/TextField.stories.tsx

@@ -22,7 +22,7 @@ import { Flex } from '../Flex';
 import { FieldLabel } from '../FieldLabel';
 
 const meta = {
-  title: 'Forms/TextField',
+  title: 'Backstage UI/TextField',
   component: TextField,
   argTypes: {
     isRequired: {

packages/ui/src/components/Tooltip/Tooltip.stories.tsx

@@ -20,7 +20,7 @@ import { TooltipTrigger, Tooltip } from './Tooltip';
 import { Button } from '../Button/Button';
 
 const meta = {
-  title: 'Components/Tooltip',
+  title: 'Backstage UI/Tooltip',
   component: TooltipTrigger,
   parameters: { layout: 'centered' },
   argTypes: {

storybook/.storybook/main.ts

@@ -6,6 +6,7 @@ import { join, dirname, posix } from 'path';
  * This set of stories are the ones that we publish to backstage.io.
  */
 const backstageCoreStories = [
+  'packages/ui',
   'packages/core-components',
   'packages/app',
   'plugins/org',

storybook/.storybook/preview.tsx

@@ -1,24 +1,130 @@
+import React, { useEffect } from 'react';
 import { TestApiProvider } from '@backstage/test-utils';
 import { Content, AlertDisplay } from '@backstage/core-components';
 import { lightTheme, darkTheme } from '@backstage/theme';
 import { CssBaseline, ThemeProvider } from '@material-ui/core';
 import { apis } from './apis';
 import { withThemeFromJSXProvider } from '@storybook/addon-themes';
+import type { Decorator, Preview, ReactRenderer } from '@storybook/react';
+import { useGlobals } from '@storybook/preview-api';
 
-import type { Preview, ReactRenderer } from '@storybook/react';
+export const withThemes: Decorator = StoryFn => {
+  const [globals] = useGlobals();
+  const selectedTheme = globals.themeMode || 'light';
+  const selectedThemeName = globals.themeName || 'default';
+
+  useEffect(() => {
+    const htmlElement = document.documentElement;
+
+    // Remove any existing theme data attributes
+    htmlElement.removeAttribute('data-theme');
+    htmlElement.removeAttribute('data-theme-name');
+
+    // Add the selected theme data attribute
+    htmlElement.setAttribute('data-theme', selectedTheme);
+    htmlElement.setAttribute('data-theme-name', selectedThemeName);
+
+    // Cleanup on unmount
+    return () => {
+      htmlElement.removeAttribute('data-theme');
+      htmlElement.removeAttribute('data-theme-name');
+    };
+  }, [selectedTheme, selectedThemeName]);
+
+  return <StoryFn />;
+};
 
 const preview: Preview = {
+  globalTypes: {
+    themeMode: {
+      name: 'Theme Mode',
+      description: 'Global theme mode for components',
+      defaultValue: 'light',
+      toolbar: {
+        icon: 'circlehollow',
+        items: [
+          { value: 'light', icon: 'circlehollow', title: 'Light' },
+          { value: 'dark', icon: 'circle', title: 'Dark' },
+        ],
+        showName: true,
+        dynamicTitle: true,
+      },
+    },
+    themeName: {
+      name: 'Theme Name',
+      description: 'Global theme name for components',
+      defaultValue: 'default',
+      toolbar: {
+        icon: 'paintbrush',
+        items: [
+          { value: 'default', title: 'Default (Backstage)' },
+          { value: 'spotify', title: 'Spotify' },
+        ],
+        showName: true,
+        dynamicTitle: true,
+      },
+    },
+  },
+  initialGlobals: {
+    themeMode: 'light',
+    themeName: 'default',
+  },
   parameters: {
+    backgrounds: {
+      disable: true,
+    },
     controls: {
       matchers: {
         color: /(background|color)$/i,
         date: /Date$/i,
       },
     },
-    darkMode: {
-      current: 'light',
+    viewport: {
+      viewports: {
+        initial: {
+          name: 'Initial',
+          styles: {
+            width: '320px',
+            height: '100%',
+          },
+        },
+        xs: {
+          name: 'Extra Small',
+          styles: {
+            width: '640px',
+            height: '100%',
+          },
+        },
+        sm: {
+          name: 'Small',
+          styles: {
+            width: '768px',
+            height: '100%',
+          },
+        },
+        md: {
+          name: 'Medium',
+          styles: {
+            width: '1024px',
+            height: '100%',
+          },
+        },
+        lg: {
+          name: 'Large',
+          styles: {
+            width: '1280px',
+            height: '100%',
+          },
+        },
+        xl: {
+          name: 'Extra Large',
+          styles: {
+            width: '1536px',
+            height: '100%',
+          },
+        },
+      },
     },
-    layout: 'fullscreen',
   },
   decorators: [
     withThemeFromJSXProvider<ReactRenderer>({