Migrate all mdx files

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

docs-ui/src/app/components/[slug]/page.tsx

@@ -1,23 +0,0 @@
-import { components, layoutComponents } from '@/utils/data';
-
-export default async function Page({
-  params,
-}: {
-  params: Promise<{ slug: string }>;
-}) {
-  const { slug } = await params;
-
-  const { default: Component } = await import(`@/content/${slug}.mdx`);
-
-  return <Component />;
-}
-
-export function generateStaticParams() {
-  const list = [...components, ...layoutComponents];
-
-  return list.map(component => ({
-    slug: component.slug,
-  }));
-}
-
-export const dynamicParams = false;

docs-ui/src/app/components/accordion/page.mdx

@@ -1,7 +1,14 @@
 import { PropsTable } from '@/components/PropsTable';
 import { Snippet } from '@/components/Snippet';
 import { CodeBlock } from '@/components/CodeBlock';
-import { AccordionSnippet } from '@/snippets/stories-snippets';
+import {
+  Default,
+  WithSubtitle,
+  CustomTrigger,
+  DefaultExpanded,
+  GroupSingleOpen,
+  GroupMultipleOpen,
+} from './stories';
 import {
   accordionPropDefs,
   accordionTriggerPropDefs,
@@ -16,7 +23,7 @@ import {
 } from './accordion.props';
 import { PageTitle } from '@/components/PageTitle';
 import { Theming } from '@/components/Theming';
-import { AccordionDefinition } from '../utils/definitions';
+import { AccordionDefinition } from '../../../utils/definitions';
 import { ChangelogComponent } from '@/components/ChangelogComponent';
 
 <PageTitle
@@ -28,7 +35,7 @@ import { ChangelogComponent } from '@/components/ChangelogComponent';
   align="center"
   py={4}
   height={240}
-  preview={<AccordionSnippet story="Default" />}
+  preview={<Default />}
   code={accordionUsageSnippet}
 />
 
@@ -72,7 +79,7 @@ Here's a view when using both title and subtitle props.
   align="center"
   py={4}
   height={240}
-  preview={<AccordionSnippet story="WithSubtitle" />}
+  preview={<WithSubtitle />}
   code={accordionWithSubtitleSnippet}
 />
 
@@ -84,7 +91,7 @@ Here's a view when providing custom multi-line content as children.
   align="center"
   py={4}
   height={280}
-  preview={<AccordionSnippet story="CustomTrigger" />}
+  preview={<CustomTrigger />}
   code={accordionCustomTriggerSnippet}
 />
 
@@ -96,7 +103,7 @@ Here's a view when the panel is expanded by default.
   align="center"
   py={4}
   height={280}
-  preview={<AccordionSnippet story="DefaultExpanded" />}
+  preview={<DefaultExpanded />}
   code={accordionDefaultExpandedSnippet}
 />
 
@@ -108,7 +115,7 @@ Here's a view when only one accordion can be open at a time.
   align="center"
   py={4}
   height={280}
-  preview={<AccordionSnippet story="GroupSingleOpen" />}
+  preview={<GroupSingleOpen />}
   code={accordionGroupSingleOpenSnippet}
 />
 
@@ -120,7 +127,7 @@ Here's a view when multiple accordions can be open simultaneously.
   align="center"
   py={4}
   height={280}
-  preview={<AccordionSnippet story="GroupMultipleOpen" />}
+  preview={<GroupMultipleOpen />}
   code={accordionGroupMultipleOpenSnippet}
 />
 

docs-ui/src/app/components/accordion/stories.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import * as stories from '@backstage/ui/src/components/Accordion/Accordion.stories';
+
+const {
+  Default: DefaultStory,
+  WithSubtitle: WithSubtitleStory,
+  CustomTrigger: CustomTriggerStory,
+  DefaultExpanded: DefaultExpandedStory,
+  GroupSingleOpen: GroupSingleOpenStory,
+  GroupMultipleOpen: GroupMultipleOpenStory,
+} = stories;
+
+export const Default = () => <DefaultStory.Component />;
+export const WithSubtitle = () => <WithSubtitleStory.Component />;
+export const CustomTrigger = () => <CustomTriggerStory.Component />;
+export const DefaultExpanded = () => <DefaultExpandedStory.Component />;
+export const GroupSingleOpen = () => <GroupSingleOpenStory.Component />;
+export const GroupMultipleOpen = () => <GroupMultipleOpenStory.Component />;

docs-ui/src/app/components/avatar/page.mdx

@@ -1,7 +1,7 @@
 import { PropsTable } from '@/components/PropsTable';
 import { Snippet } from '@/components/Snippet';
 import { CodeBlock } from '@/components/CodeBlock';
-import { AvatarSnippet } from '@/snippets/stories-snippets';
+import { Default, Sizes, Fallback, Purpose } from './stories';
 import {
   avatarPropDefs,
   snippetUsage,
@@ -11,7 +11,7 @@ import {
 } from './avatar.props';
 import { PageTitle } from '@/components/PageTitle';
 import { Theming } from '@/components/Theming';
-import { AvatarDefinition } from '../utils/definitions';
+import { AvatarDefinition } from '../../../utils/definitions';
 import { ChangelogComponent } from '@/components/ChangelogComponent';
 
 <PageTitle
@@ -22,7 +22,7 @@ import { ChangelogComponent } from '@/components/ChangelogComponent';
 <Snippet
   align="center"
   py={4}
-  preview={<AvatarSnippet story="Default" />}
+  preview={<Default />}
   code={`<Avatar src="https://avatars.githubusercontent.com/u/1540635?v=4" name="Charles de Dreuille" />`}
 />
 
@@ -44,7 +44,7 @@ Avatar sizes can be set using the `size` prop.
   align="center"
   py={4}
   open
-  preview={<AvatarSnippet story="Sizes" />}
+  preview={<Sizes />}
   code={snippetSizes}
 />
 
@@ -56,7 +56,7 @@ If the image is not available, the avatar will show the initials of the name.
   align="center"
   py={4}
   open
-  preview={<AvatarSnippet story="Fallback" />}
+  preview={<Fallback />}
   code={snippetFallback}
 />
 
@@ -67,7 +67,7 @@ Control how the avatar is announced to screen readers using the `purpose` prop.
 <Snippet
   align="center"
   py={4}
-  preview={<AvatarSnippet story="Purpose" />}
+  preview={<Purpose />}
   code={snippetPurpose}
 />
 

docs-ui/src/app/components/avatar/stories.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import * as stories from '@backstage/ui/src/components/Avatar/Avatar.stories';
+
+const {
+  Default: DefaultStory,
+  Sizes: SizesStory,
+  Fallback: FallbackStory,
+  Purpose: PurposeStory,
+} = stories;
+
+export const Default = () => <DefaultStory.Component />;
+export const Sizes = () => <SizesStory.Component />;
+export const Fallback = () => <FallbackStory.Component />;
+export const Purpose = () => <PurposeStory.Component />;

docs-ui/src/app/components/box/page.mdx

@@ -1,7 +1,7 @@
 import { CodeBlock } from '@/components/CodeBlock';
 import { PropsTable } from '@/components/PropsTable';
 import { Snippet } from '@/components/Snippet';
-import { BoxSnippet } from '@/snippets/stories-snippets';
+import { Default } from './stories';
 import {
   boxPropDefs,
   snippetUsage,
@@ -12,7 +12,7 @@ import {
 import { spacingPropDefs } from '@/utils/propDefs';
 import { PageTitle } from '@/components/PageTitle';
 import { Theming } from '@/components/Theming';
-import { BoxDefinition } from '../utils/definitions';
+import { BoxDefinition } from '../../../utils/definitions';
 import { ChangelogComponent } from '@/components/ChangelogComponent';
 
 <PageTitle
@@ -23,7 +23,7 @@ import { ChangelogComponent } from '@/components/ChangelogComponent';
 
 <Snippet
   py={4}
-  preview={<BoxSnippet story="Default" />}
+  preview={<Default />}
   code={boxPreviewSnippet}
   align="center"
 />

docs-ui/src/app/components/box/stories.tsx

@@ -0,0 +1,7 @@
+'use client';
+
+import * as stories from '@backstage/ui/src/components/Box/Box.stories';
+
+const { Default: DefaultStory } = stories;
+
+export const Default = () => <DefaultStory.Component />;

docs-ui/src/app/components/button-icon/page.mdx

@@ -1,7 +1,7 @@
 import { PropsTable } from '@/components/PropsTable';
 import { Snippet } from '@/components/Snippet';
 import { CodeBlock } from '@/components/CodeBlock';
-import { ButtonIconSnippet } from '@/snippets/stories-snippets';
+import { Variants, Sizes, Disabled, Loading } from './stories';
 import {
   buttonIconPropDefs,
   buttonIconUsageSnippet,
@@ -15,7 +15,7 @@ import {
 } from './button-icon.props';
 import { PageTitle } from '@/components/PageTitle';
 import { Theming } from '@/components/Theming';
-import { ButtonIconDefinition } from '../utils/definitions';
+import { ButtonIconDefinition } from '../../../utils/definitions';
 import { ChangelogComponent } from '@/components/ChangelogComponent';
 
 <PageTitle
@@ -26,7 +26,7 @@ import { ChangelogComponent } from '@/components/ChangelogComponent';
 <Snippet
   align="center"
   py={4}
-  preview={<ButtonIconSnippet story="Variants" />}
+  preview={<Variants />}
   code={buttonIconDefaultSnippet}
 />
 
@@ -48,7 +48,7 @@ Here's a view when buttons have different variants.
   align="center"
   py={4}
   open
-  preview={<ButtonIconSnippet story="Variants" />}
+  preview={<Variants />}
   code={buttonIconVariantsSnippet}
 />
 
@@ -60,7 +60,7 @@ Here's a view when buttons have different sizes.
   align="center"
   py={4}
   open
-  preview={<ButtonIconSnippet story="Sizes" />}
+  preview={<Sizes />}
   code={buttonIconSizesSnippet}
 />
 
@@ -72,7 +72,7 @@ Here's a view when buttons are disabled.
   align="center"
   py={4}
   open
-  preview={<ButtonIconSnippet story="Disabled" />}
+  preview={<Disabled />}
   code={buttonIconDisabledSnippet}
 />
 
@@ -84,7 +84,7 @@ Here's a view when buttons are in a loading state.
   align="center"
   py={4}
   open
-  preview={<ButtonIconSnippet story="Loading" />}
+  preview={<Loading />}
   code={buttonIconLoadingSnippet}
 />
 

docs-ui/src/app/components/button-icon/stories.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import * as stories from '@backstage/ui/src/components/ButtonIcon/ButtonIcon.stories';
+
+const {
+  Variants: VariantsStory,
+  Sizes: SizesStory,
+  Disabled: DisabledStory,
+  Loading: LoadingStory,
+} = stories;
+
+export const Variants = () => <VariantsStory.Component />;
+export const Sizes = () => <SizesStory.Component />;
+export const Disabled = () => <DisabledStory.Component />;
+export const Loading = () => <LoadingStory.Component />;

docs-ui/src/app/components/button-link/page.mdx

@@ -1,7 +1,7 @@
 import { PropsTable } from '@/components/PropsTable';
 import { Snippet } from '@/components/Snippet';
 import { CodeBlock } from '@/components/CodeBlock';
-import { ButtonLinkSnippet } from '@/snippets/stories-snippets';
+import { Variants, Sizes, WithIcons, Disabled } from './stories';
 import {
   buttonLinkPropDefs,
   buttonLinkSnippetUsage,
@@ -13,7 +13,7 @@ import {
 } from './button-link.props';
 import { PageTitle } from '@/components/PageTitle';
 import { Theming } from '@/components/Theming';
-import { ButtonLinkDefinition } from '../utils/definitions';
+import { ButtonLinkDefinition } from '../../../utils/definitions';
 import { ChangelogComponent } from '@/components/ChangelogComponent';
 
 <PageTitle
@@ -24,7 +24,7 @@ import { ChangelogComponent } from '@/components/ChangelogComponent';
 <Snippet
   align="center"
   py={4}
-  preview={<ButtonLinkSnippet story="Variants" />}
+  preview={<Variants />}
   code={buttonLinkVariantsSnippet}
 />
 
@@ -46,7 +46,7 @@ Here's a view when buttons have different variants.
   align="center"
   py={4}
   open
-  preview={<ButtonLinkSnippet story="Variants" />}
+  preview={<Variants />}
   code={buttonLinkVariantsSnippet}
 />
 
@@ -58,7 +58,7 @@ Here's a view when buttons have different sizes.
   align="center"
   py={4}
   open
-  preview={<ButtonLinkSnippet story="Sizes" />}
+  preview={<Sizes />}
   code={buttonLinkSizesSnippet}
 />
 
@@ -70,7 +70,7 @@ Here's a view when buttons have icons.
   align="center"
   py={4}
   open
-  preview={<ButtonLinkSnippet story="WithIcons" />}
+  preview={<WithIcons />}
   code={buttonLinkIconsSnippet}
 />
 
@@ -82,7 +82,7 @@ Here's a view when buttons are disabled.
   align="center"
   py={4}
   open
-  preview={<ButtonLinkSnippet story="Disabled" />}
+  preview={<Disabled />}
   code={buttonLinkDisabledSnippet}
 />
 

docs-ui/src/app/components/button-link/stories.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import * as stories from '@backstage/ui/src/components/ButtonLink/ButtonLink.stories';
+
+const {
+  Variants: VariantsStory,
+  Sizes: SizesStory,
+  WithIcons: WithIconsStory,
+  Disabled: DisabledStory,
+} = stories;
+
+export const Variants = () => <VariantsStory.Component />;
+export const Sizes = () => <SizesStory.Component />;
+export const WithIcons = () => <WithIconsStory.Component />;
+export const Disabled = () => <DisabledStory.Component />;

docs-ui/src/app/components/button/page.mdx

@@ -1,7 +1,8 @@
 import { PropsTable } from '@/components/PropsTable';
 import { Snippet } from '@/components/Snippet';
 import { CodeBlock } from '@/components/CodeBlock';
-import { ButtonSnippet, ButtonLinkSnippet } from '@/snippets/stories-snippets';
+import { Variants, Sizes, WithIcons, Disabled, Loading } from './stories';
+import { Variants as ButtonLinkVariants } from '../button-link/stories';
 import {
   buttonPropDefs,
   buttonSnippetUsage,
@@ -16,7 +17,7 @@ import {
 import { ChangelogComponent } from '@/components/ChangelogComponent';
 import { PageTitle } from '@/components/PageTitle';
 import { Theming } from '@/components/Theming';
-import { ButtonDefinition } from '../utils/definitions';
+import { ButtonDefinition } from '../../../utils/definitions';
 
 <PageTitle
   title="Button"
@@ -26,7 +27,7 @@ import { ButtonDefinition } from '../utils/definitions';
 <Snippet
   align="center"
   py={4}
-  preview={<ButtonSnippet story="Variants" />}
+  preview={<Variants />}
   code={buttonVariantsSnippet}
 />
 
@@ -48,7 +49,7 @@ Here's a view when buttons have different variants.
   align="center"
   py={4}
   open
-  preview={<ButtonSnippet story="Variants" />}
+  preview={<Variants />}
   code={buttonVariantsSnippet}
 />
 
@@ -60,7 +61,7 @@ Here's a view when buttons have different sizes.
   align="center"
   py={4}
   open
-  preview={<ButtonSnippet story="Sizes" />}
+  preview={<Sizes />}
   code={buttonSizesSnippet}
 />
 
@@ -72,7 +73,7 @@ Here's a view when buttons have icons.
   align="center"
   py={4}
   open
-  preview={<ButtonSnippet story="WithIcons" />}
+  preview={<WithIcons />}
   code={buttonIconsSnippet}
 />
 
@@ -84,7 +85,7 @@ Here's a view when buttons are disabled.
   align="center"
   py={4}
   open
-  preview={<ButtonSnippet story="Disabled" />}
+  preview={<Disabled />}
   code={buttonDisabledSnippet}
 />
 
@@ -96,7 +97,7 @@ Here's a view when buttons are in a loading state.
   align="center"
   py={4}
   open
-  preview={<ButtonSnippet story="Loading" />}
+  preview={<Loading />}
   code={buttonLoadingSnippet}
 />
 
@@ -114,7 +115,7 @@ If you want to use a button as a link, please use the `ButtonLink` component.
   align="center"
   py={4}
   open
-  preview={<ButtonLinkSnippet story="Variants" />}
+  preview={<ButtonLinkVariants />}
   code={buttonAsLinkSnippet}
 />
 

docs-ui/src/app/components/button/stories.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import * as stories from '@backstage/ui/src/components/Button/Button.stories';
+
+const {
+  Variants: VariantsStory,
+  Sizes: SizesStory,
+  WithIcons: WithIconsStory,
+  Disabled: DisabledStory,
+  Loading: LoadingStory,
+} = stories;
+
+export const Variants = () => <VariantsStory.Component />;
+export const Sizes = () => <SizesStory.Component />;
+export const WithIcons = () => <WithIconsStory.Component />;
+export const Disabled = () => <DisabledStory.Component />;
+export const Loading = () => <LoadingStory.Component />;

docs-ui/src/app/components/card/page.mdx

@@ -1,5 +1,5 @@
 import { PropsTable } from '@/components/PropsTable';
-import { CardSnippet } from '@/snippets/stories-snippets';
+import { CustomSize, WithLongBody, WithListRow } from './stories';
 import { Snippet } from '@/components/Snippet';
 import { CodeBlock } from '@/components/CodeBlock';
 import {
@@ -14,7 +14,7 @@ import {
 } from './card.props';
 import { PageTitle } from '@/components/PageTitle';
 import { Theming } from '@/components/Theming';
-import { CardDefinition } from '../utils/definitions';
+import { CardDefinition } from '../../../utils/definitions';
 import { ChangelogComponent } from '@/components/ChangelogComponent';
 
 <PageTitle
@@ -25,7 +25,7 @@ import { ChangelogComponent } from '@/components/ChangelogComponent';
 <Snippet
   align="center"
   py={4}
-  preview={<CardSnippet story="CustomSize" />}
+  preview={<CustomSize />}
   code={cardDefaultSnippet}
 />
 
@@ -68,7 +68,7 @@ Here's a view when card has a long body.
 <Snippet
   align="center"
   py={4}
-  preview={<CardSnippet story="WithLongBody" />}
+  preview={<WithLongBody />}
   code={cardLongBodySnippet}
   open
 />
@@ -80,7 +80,7 @@ Here's a view when card has a list.
 <Snippet
   align="center"
   py={4}
-  preview={<CardSnippet story="WithListRow" />}
+  preview={<WithListRow />}
   code={cardListRowSnippet}
   open
 />

docs-ui/src/app/components/card/stories.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import * as stories from '@backstage/ui/src/components/Card/Card.stories';
+
+const {
+  CustomSize: CustomSizeStory,
+  WithLongBody: WithLongBodyStory,
+  WithListRow: WithListRowStory,
+} = stories;
+
+export const CustomSize = () => <CustomSizeStory.Component />;
+export const WithLongBody = () => <WithLongBodyStory.Component />;
+export const WithListRow = () => <WithListRowStory.Component />;

docs-ui/src/app/components/checkbox/page.mdx

@@ -1,5 +1,5 @@
 import { PropsTable } from '@/components/PropsTable';
-import { CheckboxSnippet } from '@/snippets/stories-snippets';
+import { Default, AllVariants } from './stories';
 import { Snippet } from '@/components/Snippet';
 import { CodeBlock } from '@/components/CodeBlock';
 import {
@@ -10,7 +10,7 @@ import {
 } from './checkbox.props';
 import { PageTitle } from '@/components/PageTitle';
 import { Theming } from '@/components/Theming';
-import { CheckboxDefinition } from '../utils/definitions';
+import { CheckboxDefinition } from '../../../utils/definitions';
 import { ChangelogComponent } from '@/components/ChangelogComponent';
 
 <PageTitle
@@ -21,7 +21,7 @@ import { ChangelogComponent } from '@/components/ChangelogComponent';
 <Snippet
   align="center"
   py={4}
-  preview={<CheckboxSnippet story="Default" />}
+  preview={<Default />}
   code={checkboxDefaultSnippet}
 />
 
@@ -43,7 +43,7 @@ Here's a view when checkboxes have different variants.
   align="center"
   py={4}
   open
-  preview={<CheckboxSnippet story="AllVariants" />}
+  preview={<AllVariants />}
   code={checkboxVariantsSnippet}
 />
 

docs-ui/src/app/components/checkbox/stories.tsx

@@ -0,0 +1,8 @@
+'use client';
+
+import * as stories from '@backstage/ui/src/components/Checkbox/Checkbox.stories';
+
+const { Default: DefaultStory, AllVariants: AllVariantsStory } = stories;
+
+export const Default = () => <DefaultStory.Component />;
+export const AllVariants = () => <AllVariantsStory.Component />;

docs-ui/src/app/components/container/page.mdx

@@ -1,7 +1,7 @@
 import { CodeBlock } from '@/components/CodeBlock';
 import { PropsTable } from '@/components/PropsTable';
 import { Snippet } from '@/components/Snippet';
-import { ContainerSnippet } from '@/snippets/stories-snippets';
+import { Preview } from './stories';
 import {
   containerPropDefs,
   containerUsageSnippet,
@@ -11,7 +11,7 @@ import {
 } from './container.props';
 import { PageTitle } from '@/components/PageTitle';
 import { Theming } from '@/components/Theming';
-import { ContainerDefinition } from '../utils/definitions';
+import { ContainerDefinition } from '../../../utils/definitions';
 import { ChangelogComponent } from '@/components/ChangelogComponent';
 
 <PageTitle
@@ -22,7 +22,7 @@ import { ChangelogComponent } from '@/components/ChangelogComponent';
 
 <Snippet
   py={4}
-  preview={<ContainerSnippet story="Preview" />}
+  preview={<Preview />}
   code={containerDefaultSnippet}
 />
 

docs-ui/src/app/components/container/stories.tsx

@@ -0,0 +1,7 @@
+'use client';
+
+import * as stories from '@backstage/ui/src/components/Container/Container.stories';
+
+const { Preview: PreviewStory } = stories;
+
+export const Preview = () => <PreviewStory.Component />;

docs-ui/src/app/components/dialog/page.mdx

@@ -1,7 +1,7 @@
 import { PropsTable } from '@/components/PropsTable';
 import { Snippet } from '@/components/Snippet';
 import { CodeBlock } from '@/components/CodeBlock';
-import { DialogSnippet } from '@/snippets/stories-snippets';
+import { Default, PreviewFixedWidthAndHeight, PreviewWithForm } from './stories';
 import {
   dialogPropDefs,
   dialogTriggerPropDefs,
@@ -18,7 +18,7 @@ import {
 } from './dialog.props';
 import { PageTitle } from '@/components/PageTitle';
 import { Theming } from '@/components/Theming';
-import { DialogDefinition } from '../utils/definitions';
+import { DialogDefinition } from '../../../utils/definitions';
 import { ChangelogComponent } from '@/components/ChangelogComponent';
 
 <PageTitle
@@ -29,7 +29,7 @@ import { ChangelogComponent } from '@/components/ChangelogComponent';
 <Snippet
   align="center"
   py={4}
-  preview={<DialogSnippet story="Default" />}
+  preview={<Default />}
   code={dialogDefaultSnippet}
 />
 
@@ -82,7 +82,7 @@ Dialog with a fixed height body that scrolls when content overflows.
 <Snippet
   align="center"
   py={4}
-  preview={<DialogSnippet story="PreviewFixedWidthAndHeight" />}
+  preview={<PreviewFixedWidthAndHeight />}
   code={dialogFixedWidthAndHeightSnippet}
 />
 
@@ -93,7 +93,7 @@ Dialog containing form elements for user input.
 <Snippet
   align="center"
   py={4}
-  preview={<DialogSnippet story="PreviewWithForm" />}
+  preview={<PreviewWithForm />}
   code={dialogWithFormSnippet}
 />
 

docs-ui/src/app/components/dialog/stories.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import * as stories from '@backstage/ui/src/components/Dialog/Dialog.stories';
+
+const {
+  Default: DefaultStory,
+  PreviewFixedWidthAndHeight: PreviewFixedWidthAndHeightStory,
+  PreviewWithForm: PreviewWithFormStory,
+} = stories;
+
+export const Default = () => <DefaultStory.Component />;
+export const PreviewFixedWidthAndHeight = () => (
+  <PreviewFixedWidthAndHeightStory.Component />
+);
+export const PreviewWithForm = () => <PreviewWithFormStory.Component />;

docs-ui/src/app/components/flex/page.mdx

@@ -1,7 +1,7 @@
 import { PropsTable } from '@/components/PropsTable';
 import { CodeBlock } from '@/components/CodeBlock';
 import { Snippet } from '@/components/Snippet';
-import { FlexSnippet } from '@/snippets/stories-snippets';
+import { Default } from './stories';
 import {
   flexPropDefs,
   flexUsageSnippet,
@@ -14,7 +14,7 @@ import {
 import { spacingPropDefs } from '@/utils/propDefs';
 import { PageTitle } from '@/components/PageTitle';
 import { Theming } from '@/components/Theming';
-import { FlexDefinition } from '../utils/definitions';
+import { FlexDefinition } from '../../../utils/definitions';
 import { ChangelogComponent } from '@/components/ChangelogComponent';
 
 <PageTitle
@@ -26,7 +26,7 @@ import { ChangelogComponent } from '@/components/ChangelogComponent';
 <Snippet
   py={4}
   align="center"
-  preview={<FlexSnippet story="Default" />}
+  preview={<Default />}
   code={flexDefaultSnippet}
 />
 

docs-ui/src/app/components/flex/stories.tsx

@@ -0,0 +1,7 @@
+'use client';
+
+import * as stories from '@backstage/ui/src/components/Flex/Flex.stories';
+
+const { Default: DefaultStory } = stories;
+
+export const Default = () => <DefaultStory.Component />;

docs-ui/src/app/components/grid/page.mdx

@@ -1,7 +1,7 @@
 import { CodeBlock } from '@/components/CodeBlock';
 import { PropsTable } from '@/components/PropsTable';
 import { Snippet } from '@/components/Snippet';
-import { GridSnippet } from '@/snippets/stories-snippets';
+import { Default } from './stories';
 import { spacingPropDefs } from '@/utils/propDefs';
 import {
   gridPropDefs,
@@ -16,7 +16,7 @@ import {
 } from './grid.props';
 import { PageTitle } from '@/components/PageTitle';
 import { Theming } from '@/components/Theming';
-import { GridDefinition } from '../utils/definitions';
+import { GridDefinition } from '../../../utils/definitions';
 import { ChangelogComponent } from '@/components/ChangelogComponent';
 
 <PageTitle
@@ -27,7 +27,7 @@ import { ChangelogComponent } from '@/components/ChangelogComponent';
 
 <Snippet
   py={4}
-  preview={<GridSnippet story="Default" />}
+  preview={<Default />}
   code={gridDefaultSnippet}
 />
 

docs-ui/src/app/components/grid/stories.tsx

@@ -0,0 +1,7 @@
+'use client';
+
+import * as stories from '@backstage/ui/src/components/Grid/Grid.stories';
+
+const { Default: DefaultStory } = stories;
+
+export const Default = () => <DefaultStory.Component />;

docs-ui/src/app/components/header-page/page.mdx

@@ -1,7 +1,7 @@
 import { PropsTable } from '@/components/PropsTable';
 import { CodeBlock } from '@/components/CodeBlock';
 import { Snippet } from '@/components/Snippet';
-import { HeaderPageSnippet } from '@/snippets/stories-snippets';
+import { WithEverything, WithLongBreadcrumbs, WithTabs, WithCustomActions, WithMenuItems } from './stories';
 import {
   propDefs,
   usage,
@@ -14,7 +14,7 @@ import {
 } from './header-page.props';
 import { PageTitle } from '@/components/PageTitle';
 import { Theming } from '@/components/Theming';
-import { HeaderPageDefinition } from '../utils/definitions';
+import { HeaderPageDefinition } from '../../../utils/definitions';
 import { ChangelogComponent } from '@/components/ChangelogComponent';
 
 <PageTitle
@@ -25,7 +25,7 @@ import { ChangelogComponent } from '@/components/ChangelogComponent';
 
 <Snippet
   py={4}
-  preview={<HeaderPageSnippet story="WithEverything" />}
+  preview={<WithEverything />}
   code={defaultSnippet}
 />
 
@@ -46,7 +46,7 @@ prop is an array of objects with a `label` and `href` property. By default we tr
 
 <Snippet
   open
-  preview={<HeaderPageSnippet story="WithLongBreadcrumbs" />}
+  preview={<WithLongBreadcrumbs />}
   code={withBreadcrumbs}
 />
 
@@ -57,7 +57,7 @@ prop is an array of objects with a `label` and `href` property.
 
 <Snippet
   open
-  preview={<HeaderPageSnippet story="WithTabs" />}
+  preview={<WithTabs />}
   code={withTabs}
 />
 
@@ -68,7 +68,7 @@ prop is a React node.
 
 <Snippet
   open
-  preview={<HeaderPageSnippet story="WithCustomActions" />}
+  preview={<WithCustomActions />}
   code={withCustomActions}
 />
 
@@ -79,7 +79,7 @@ prop is an array of objects with a `label`, `value` and `onClick` property.
 
 <Snippet
   open
-  preview={<HeaderPageSnippet story="WithMenuItems" />}
+  preview={<WithMenuItems />}
   code={withMenuItems}
 />
 

docs-ui/src/app/components/header-page/stories.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import * as stories from '@backstage/ui/src/components/HeaderPage/HeaderPage.stories';
+
+const {
+  WithEverything: WithEverythingStory,
+  WithLongBreadcrumbs: WithLongBreadcrumbsStory,
+  WithTabs: WithTabsStory,
+  WithCustomActions: WithCustomActionsStory,
+  WithMenuItems: WithMenuItemsStory,
+} = stories;
+
+export const WithEverything = () => <WithEverythingStory.Component />;
+export const WithLongBreadcrumbs = () => <WithLongBreadcrumbsStory.Component />;
+export const WithTabs = () => <WithTabsStory.Component />;
+export const WithCustomActions = () => <WithCustomActionsStory.Component />;
+export const WithMenuItems = () => <WithMenuItemsStory.Component />;

docs-ui/src/app/components/header/page.mdx

@@ -1,7 +1,7 @@
 import { PropsTable } from '@/components/PropsTable';
 import { CodeBlock } from '@/components/CodeBlock';
 import { Snippet } from '@/components/Snippet';
-import { HeaderSnippet } from '@/snippets/stories-snippets';
+import { WithAllOptionsAndTabs, WithAllOptions, WithBreadcrumbs, WithHeaderPage } from './stories';
 import {
   propDefs,
   usage,
@@ -13,7 +13,7 @@ import {
 } from './header.props';
 import { PageTitle } from '@/components/PageTitle';
 import { Theming } from '@/components/Theming';
-import { HeaderDefinition } from '../utils/definitions';
+import { HeaderDefinition } from '../../../utils/definitions';
 import { ChangelogComponent } from '@/components/ChangelogComponent';
 
 <PageTitle
@@ -24,7 +24,7 @@ import { ChangelogComponent } from '@/components/ChangelogComponent';
 
 <Snippet
   py={4}
-  preview={<HeaderSnippet story="WithAllOptionsAndTabs" />}
+  preview={<WithAllOptionsAndTabs />}
   code={defaultSnippet}
 />
 
@@ -44,7 +44,7 @@ A simple example of how to use the Header component.
 
 <Snippet
   py={4}
-  preview={<HeaderSnippet story="WithAllOptions" />}
+  preview={<WithAllOptions />}
   code={simple}
   open
 />
@@ -56,7 +56,7 @@ under the hood and will be active when you are on the corresponding page.
 
 <Snippet
 
-preview={<HeaderSnippet story="WithAllOptionsAndTabs" />}
+preview={<WithAllOptionsAndTabs />}
 code={withTabs}
 open
 />
@@ -66,7 +66,7 @@ open
 Breacrumbs should appear when you scroll down (and not directly visible as it is in the demo below).
 
 <Snippet
-  preview={<HeaderSnippet story="WithBreadcrumbs" />}
+  preview={<WithBreadcrumbs />}
   code={withBreadcrumbs}
   open
 />
@@ -76,7 +76,7 @@ Breacrumbs should appear when you scroll down (and not directly visible as it is
 You can use the `Header` component inside the [HeaderPage](/components/header-page) component to compose your multi-level navigation.
 
 <Snippet
-  preview={<HeaderSnippet story="WithHeaderPage" />}
+  preview={<WithHeaderPage />}
   code={withHeaderPage}
   open
 />

docs-ui/src/app/components/header/stories.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import * as stories from '@backstage/ui/src/components/Header/Header.stories';
+
+const {
+  WithAllOptionsAndTabs: WithAllOptionsAndTabsStory,
+  WithAllOptions: WithAllOptionsStory,
+  WithBreadcrumbs: WithBreadcrumbsStory,
+  WithHeaderPage: WithHeaderPageStory,
+} = stories;
+
+export const WithAllOptionsAndTabs = () => (
+  <WithAllOptionsAndTabsStory.Component />
+);
+export const WithAllOptions = () => <WithAllOptionsStory.Component />;
+export const WithBreadcrumbs = () => <WithBreadcrumbsStory.Component />;
+export const WithHeaderPage = () => <WithHeaderPageStory.Component />;

docs-ui/src/app/components/link/page.mdx

@@ -1,11 +1,7 @@
 import { PropsTable } from '@/components/PropsTable';
 import { Snippet } from '@/components/Snippet';
 import { CodeBlock } from '@/components/CodeBlock';
-import {
-  MenuSnippet,
-  ButtonSnippet,
-  LinkSnippet,
-} from '@/snippets/stories-snippets';
+import { Default, AllVariants, AllWeights, AllColors, Truncate } from './stories';
 import {
   linkPropDefs,
   linkUsageSnippet,
@@ -19,7 +15,7 @@ import {
 import { PageTitle } from '@/components/PageTitle';
 import { Theming } from '@/components/Theming';
 import { ChangelogComponent } from '@/components/ChangelogComponent';
-import { LinkDefinition } from '../utils/definitions';
+import { LinkDefinition } from '../../../utils/definitions';
 
 <PageTitle
   title="Link"
@@ -29,7 +25,7 @@ import { LinkDefinition } from '../utils/definitions';
 <Snippet
   align="center"
   py={4}
-  preview={<LinkSnippet story="Default" />}
+  preview={<Default />}
   code={linkDefaultSnippet}
 />
 
@@ -60,7 +56,7 @@ Here's a view when links have different variants.
   align="center"
   py={4}
   open
-  preview={<LinkSnippet story="AllVariants" />}
+  preview={<AllVariants />}
   code={linkVariantsSnippet}
 />
 
@@ -72,7 +68,7 @@ Here's a view when links have different weights.
   align="center"
   py={4}
   open
-  preview={<LinkSnippet story="AllWeights" />}
+  preview={<AllWeights />}
   code={linkWeightsSnippet}
 />
 
@@ -84,7 +80,7 @@ Here's a view when links have different colors.
   align="center"
   py={4}
   open
-  preview={<LinkSnippet story="AllColors" />}
+  preview={<AllColors />}
   code={linkColorsSnippet}
 />
 
@@ -94,7 +90,7 @@ The `Link` component has a `truncate` prop that can be used to truncate the text
 
 <Snippet
   open
-  preview={<LinkSnippet story="Truncate" />}
+  preview={<Truncate />}
   code={linkTruncateSnippet}
 />
 

docs-ui/src/app/components/link/stories.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import * as stories from '@backstage/ui/src/components/Link/Link.stories';
+
+const {
+  Default: DefaultStory,
+  AllVariants: AllVariantsStory,
+  AllWeights: AllWeightsStory,
+  AllColors: AllColorsStory,
+  Truncate: TruncateStory,
+} = stories;
+
+export const Default = () => <DefaultStory.Component />;
+export const AllVariants = () => <AllVariantsStory.Component />;
+export const AllWeights = () => <AllWeightsStory.Component />;
+export const AllColors = () => <AllColorsStory.Component />;
+export const Truncate = () => <TruncateStory.Component />;

docs-ui/src/app/components/menu/page.mdx

@@ -1,7 +1,7 @@
 import { PropsTable } from '@/components/PropsTable';
 import { Snippet } from '@/components/Snippet';
 import { CodeBlock } from '@/components/CodeBlock';
-import { MenuSnippet } from '@/snippets/stories-snippets';
+import { Preview, PreviewSubmenu, PreviewIcons, PreviewLinks, PreviewSections, PreviewSeparators, PreviewAutocompleteMenu, PreviewAutocompleteListbox, PreviewAutocompleteListboxMultiple } from './stories';
 import {
   usage,
   preview,
@@ -27,7 +27,7 @@ import {
 import { PageTitle } from '@/components/PageTitle';
 import { Theming } from '@/components/Theming';
 import { ChangelogComponent } from '@/components/ChangelogComponent';
-import { MenuDefinition } from '../utils/definitions';
+import { MenuDefinition } from '../../../utils/definitions';
 
 <PageTitle
   title="Menu"
@@ -37,7 +37,7 @@ import { MenuDefinition } from '../utils/definitions';
 <Snippet
   align="center"
   py={4}
-  preview={<MenuSnippet story="Preview" />}
+  preview={<Preview />}
   code={preview}
 />
 
@@ -142,7 +142,7 @@ the submenu is displayed in the correct position. The best practice is to use th
   align="center"
   py={4}
   open
-  preview={<MenuSnippet story="PreviewSubmenu" />}
+  preview={<PreviewSubmenu />}
   code={submenu}
 />
 
@@ -154,7 +154,7 @@ You can use the `iconStart` prop to add an icon to the menu item.
   align="center"
   py={4}
   open
-  preview={<MenuSnippet story="PreviewIcons" />}
+  preview={<PreviewIcons />}
   code={icons}
 />
 
@@ -167,7 +167,7 @@ to work for both internal and external links.
   align="center"
   py={4}
   open
-  preview={<MenuSnippet story="PreviewLinks" />}
+  preview={<PreviewLinks />}
   code={links}
 />
 
@@ -179,7 +179,7 @@ You can use the `MenuSection` component to add a section to the menu.
   align="center"
   py={4}
   open
-  preview={<MenuSnippet story="PreviewSections" />}
+  preview={<PreviewSections />}
   code={sections}
 />
 
@@ -191,7 +191,7 @@ You can use the `MenuSeparator` component to add a separator to the menu.
   align="center"
   py={4}
   open
-  preview={<MenuSnippet story="PreviewSeparators" />}
+  preview={<PreviewSeparators />}
   code={separators}
 />
 
@@ -203,7 +203,7 @@ You can use the `MenuAutocomplete` component to add a autocomplete to the menu.
   align="center"
   py={4}
   open
-  preview={<MenuSnippet story="PreviewAutocompleteMenu" />}
+  preview={<PreviewAutocompleteMenu />}
   code={autocomplete}
 />
 
@@ -215,7 +215,7 @@ You can use the `MenuListBox` component to add a list box to the menu.
   align="center"
   py={4}
   open
-  preview={<MenuSnippet story="PreviewAutocompleteListbox" />}
+  preview={<PreviewAutocompleteListbox />}
   code={autocompleteListbox}
 />
 
@@ -228,7 +228,7 @@ allow multiple selection.
   align="center"
   py={4}
   open
-  preview={<MenuSnippet story="PreviewAutocompleteListboxMultiple" />}
+  preview={<PreviewAutocompleteListboxMultiple />}
   code={autocompleteListboxMultiple}
 />
 

docs-ui/src/app/components/menu/stories.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import * as stories from '@backstage/ui/src/components/Menu/Menu.stories';
+
+const {
+  Preview: PreviewStory,
+  PreviewSubmenu: PreviewSubmenuStory,
+  PreviewIcons: PreviewIconsStory,
+  PreviewLinks: PreviewLinksStory,
+  PreviewSections: PreviewSectionsStory,
+  PreviewSeparators: PreviewSeparatorsStory,
+  PreviewAutocompleteMenu: PreviewAutocompleteMenuStory,
+  PreviewAutocompleteListbox: PreviewAutocompleteListboxStory,
+  PreviewAutocompleteListboxMultiple: PreviewAutocompleteListboxMultipleStory,
+} = stories;
+
+export const Preview = () => <PreviewStory.Component />;
+export const PreviewSubmenu = () => <PreviewSubmenuStory.Component />;
+export const PreviewIcons = () => <PreviewIconsStory.Component />;
+export const PreviewLinks = () => <PreviewLinksStory.Component />;
+export const PreviewSections = () => <PreviewSectionsStory.Component />;
+export const PreviewSeparators = () => <PreviewSeparatorsStory.Component />;
+export const PreviewAutocompleteMenu = () => (
+  <PreviewAutocompleteMenuStory.Component />
+);
+export const PreviewAutocompleteListbox = () => (
+  <PreviewAutocompleteListboxStory.Component />
+);
+export const PreviewAutocompleteListboxMultiple = () => (
+  <PreviewAutocompleteListboxMultipleStory.Component />
+);

docs-ui/src/app/components/password-field/page.mdx

@@ -0,0 +1,65 @@
+import { PropsTable } from '@/components/PropsTable';
+import { Snippet } from '@/components/Snippet';
+import {
+  inputPropDefs,
+  passwordFieldUsageSnippet,
+  passwordFieldDefaultSnippet,
+  passwordFieldSizesSnippet,
+  passwordFieldDescriptionSnippet,
+} from './password-field.props';
+import { PageTitle } from '@/components/PageTitle';
+import { Theming } from '@/components/Theming';
+import { ChangelogComponent } from '@/components/ChangelogComponent';
+import { CodeBlock } from '@/components/CodeBlock';
+import { PasswordFieldDefinition } from '../../../utils/definitions';
+import { WithLabel, Sizes, WithDescription } from './stories';
+
+<PageTitle
+  title="PasswordField"
+  description="A password field component for your forms."
+/>
+
+<Snippet
+  align="center"
+  py={4}
+  preview={<WithLabel />}
+  code={passwordFieldDefaultSnippet}
+/>
+
+## Usage
+
+<CodeBlock code={passwordFieldUsageSnippet} />
+
+## API reference
+
+<PropsTable data={inputPropDefs} />
+
+## Examples
+
+### Sizes
+
+We support two different sizes: `small`, `medium`.
+
+<Snippet
+  align="center"
+  py={4}
+  open
+  preview={<Sizes />}
+  code={passwordFieldSizesSnippet}
+/>
+
+### With description
+
+Here's a simple PasswordField with a description.
+
+<Snippet
+  align="center"
+  py={4}
+  open
+  preview={<WithDescription />}
+  code={passwordFieldDescriptionSnippet}
+/>
+
+<Theming definition={PasswordFieldDefinition} />
+
+<ChangelogComponent component="password-field" />

docs-ui/src/app/components/password-field/stories.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import * as stories from '@backstage/ui/src/components/PasswordField/PasswordField.stories';
+
+const {
+  WithLabel: WithLabelStory,
+  Sizes: SizesStory,
+  WithDescription: WithDescriptionStory,
+} = stories;
+
+export const WithLabel = () => <WithLabelStory.Component />;
+export const Sizes = () => <SizesStory.Component />;
+export const WithDescription = () => <WithDescriptionStory.Component />;

docs-ui/src/app/components/popover/page.mdx

@@ -1,5 +1,5 @@
 import { PropsTable } from '@/components/PropsTable';
-import { PopoverSnippet } from '@/snippets/stories-snippets';
+import { Default } from './stories';
 import { Snippet } from '@/components/Snippet';
 import { CodeBlock } from '@/components/CodeBlock';
 import {
@@ -13,7 +13,7 @@ import {
 } from './popover.props';
 import { PageTitle } from '@/components/PageTitle';
 import { Theming } from '@/components/Theming';
-import { PopoverDefinition } from '../utils/definitions';
+import { PopoverDefinition } from '../../../utils/definitions';
 import { ChangelogComponent } from '@/components/ChangelogComponent';
 
 <PageTitle
@@ -24,7 +24,7 @@ import { ChangelogComponent } from '@/components/ChangelogComponent';
 <Snippet
   align="center"
   py={4}
-  preview={<PopoverSnippet story="Default" />}
+  preview={<Default />}
   code={popoverDefaultSnippet}
 />
 
@@ -49,7 +49,7 @@ Popover supports multiple placement options to position the content relative to
 <Snippet
   align="center"
   py={4}
-  preview={<PopoverSnippet story="DocsAllPlacements" />}
+  preview={<Default />}
   code={popoverPlacementsSnippet}
 />
 
@@ -60,7 +60,7 @@ You can hide the arrow by setting the `hideArrow` prop.
 <Snippet
   align="center"
   py={4}
-  preview={<PopoverSnippet story="Default" />}
+  preview={<Default />}
   code={popoverNoArrowSnippet}
 />
 
@@ -71,7 +71,7 @@ Popovers can contain complex content including buttons, forms, and other interac
 <Snippet
   align="center"
   py={4}
-  preview={<PopoverSnippet story="Default" />}
+  preview={<Default />}
   code={popoverRichContentSnippet}
 />
 
@@ -82,7 +82,7 @@ Non-modal popovers allow interaction with other elements on the page while the p
 <Snippet
   align="center"
   py={4}
-  preview={<PopoverSnippet story="Default" />}
+  preview={<Default />}
   code={popoverNonModalSnippet}
 />
 
@@ -93,7 +93,7 @@ Popovers automatically handle scrolling when content exceeds the available viewp
 <Snippet
   align="center"
   py={4}
-  preview={<PopoverSnippet story="Default" />}
+  preview={<Default />}
   code={popoverDefaultSnippet}
 />
 

docs-ui/src/app/components/popover/stories.tsx

@@ -0,0 +1,7 @@
+'use client';
+
+import * as stories from '@backstage/ui/src/components/Popover/Popover.stories';
+
+const { Default: DefaultStory } = stories;
+
+export const Default = () => <DefaultStory.Component />;

docs-ui/src/app/components/radio-group/page.mdx

@@ -1,6 +1,6 @@
 import { PropsTable } from '@/components/PropsTable';
 import { Snippet } from '@/components/Snippet';
-import { RadioGroupSnippet } from '@/snippets/stories-snippets';
+import { Default, Horizontal, Disabled, DisabledSingle, Validation, ReadOnly } from './stories';
 import {
   radioGroupPropDefs,
   radioGroupUsageSnippet,
@@ -16,7 +16,7 @@ import { PageTitle } from '@/components/PageTitle';
 import { Theming } from '@/components/Theming';
 import { ChangelogComponent } from '@/components/ChangelogComponent';
 import { CodeBlock } from '@/components/CodeBlock';
-import { RadioGroupDefinition } from '../utils/definitions';
+import { RadioGroupDefinition } from '../../../utils/definitions';
 
 <PageTitle
   title="RadioGroup"
@@ -26,7 +26,7 @@ import { RadioGroupDefinition } from '../utils/definitions';
 <Snippet
   align="center"
   py={4}
-  preview={<RadioGroupSnippet story="Default" />}
+  preview={<Default />}
   code={radioGroupDefaultSnippet}
 />
 
@@ -48,7 +48,7 @@ Here's a simple TextField with a description.
   align="center"
   py={4}
   open
-  preview={<RadioGroupSnippet story="Horizontal" />}
+  preview={<Horizontal />}
   code={radioGroupHorizontalSnippet}
 />
 
@@ -60,7 +60,7 @@ You can disable the entire radio group by adding the `isDisabled` prop to the `R
   align="center"
   py={4}
   open
-  preview={<RadioGroupSnippet story="Disabled" />}
+  preview={<Disabled />}
   code={radioGroupDisabledSnippet}
 />
 
@@ -72,7 +72,7 @@ You can disable a single radio by adding the `isDisabled` prop to the `Radio` co
   align="center"
   py={4}
   open
-  preview={<RadioGroupSnippet story="DisabledSingle" />}
+  preview={<DisabledSingle />}
   code={radioGroupDisabledSingleSnippet}
 />
 
@@ -84,7 +84,7 @@ Here's an example of a radio group with errors.
   align="center"
   py={4}
   open
-  preview={<RadioGroupSnippet story="Validation" />}
+  preview={<Validation />}
   code={radioGroupValidationSnippet}
 />
 
@@ -96,7 +96,7 @@ You can make the radio group read only by adding the `isReadOnly` prop to the `R
   align="center"
   py={4}
   open
-  preview={<RadioGroupSnippet story="ReadOnly" />}
+  preview={<ReadOnly />}
   code={radioGroupReadOnlySnippet}
 />
 

docs-ui/src/app/components/radio-group/stories.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import * as stories from '@backstage/ui/src/components/RadioGroup/RadioGroup.stories';
+
+const {
+  Default: DefaultStory,
+  Horizontal: HorizontalStory,
+  Disabled: DisabledStory,
+  DisabledSingle: DisabledSingleStory,
+  Validation: ValidationStory,
+  ReadOnly: ReadOnlyStory,
+} = stories;
+
+export const Default = () => <DefaultStory.Component />;
+export const Horizontal = () => <HorizontalStory.Component />;
+export const Disabled = () => <DisabledStory.Component />;
+export const DisabledSingle = () => <DisabledSingleStory.Component />;
+export const Validation = () => <ValidationStory.Component />;
+export const ReadOnly = () => <ReadOnlyStory.Component />;

docs-ui/src/app/components/search-field/page.mdx

@@ -1,6 +1,6 @@
 import { PropsTable } from '@/components/PropsTable';
 import { Snippet } from '@/components/Snippet';
-import { SearchFieldSnippet } from '@/snippets/stories-snippets';
+import { WithLabel, Sizes, WithDescription, StartCollapsed } from './stories';
 import {
   searchFieldPropDefs,
   searchFieldUsageSnippet,
@@ -13,7 +13,7 @@ import { PageTitle } from '@/components/PageTitle';
 import { Theming } from '@/components/Theming';
 import { ChangelogComponent } from '@/components/ChangelogComponent';
 import { CodeBlock } from '@/components/CodeBlock';
-import { SearchFieldDefinition } from '../utils/definitions';
+import { SearchFieldDefinition } from '../../../utils/definitions';
 
 <PageTitle
   title="SearchField"
@@ -23,7 +23,7 @@ import { SearchFieldDefinition } from '../utils/definitions';
 <Snippet
   align="center"
   py={4}
-  preview={<SearchFieldSnippet story="WithLabel" />}
+  preview={<WithLabel />}
   code={searchFieldDefaultSnippet}
 />
 
@@ -45,7 +45,7 @@ We support two different sizes: `small`, `medium`.
   align="center"
   py={4}
   open
-  preview={<SearchFieldSnippet story="Sizes" />}
+  preview={<Sizes />}
   code={searchFieldSizesSnippet}
 />
 
@@ -57,7 +57,7 @@ Here's a simple SearchField with a description.
   align="center"
   py={4}
   open
-  preview={<SearchFieldSnippet story="WithDescription" />}
+  preview={<WithDescription />}
   code={searchFieldDescriptionSnippet}
 />
 
@@ -69,7 +69,7 @@ You can make the SearchField collapsible by setting the `startCollapsed` prop to
   align="center"
   py={4}
   open
-  preview={<SearchFieldSnippet story="StartCollapsed" />}
+  preview={<StartCollapsed />}
   code={searchFieldCollapsibleSnippet}
 />
 

docs-ui/src/app/components/search-field/stories.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import * as stories from '@backstage/ui/src/components/SearchField/SearchField.stories';
+
+const {
+  WithLabel: WithLabelStory,
+  Sizes: SizesStory,
+  WithDescription: WithDescriptionStory,
+  StartCollapsed: StartCollapsedStory,
+} = stories;
+
+export const WithLabel = () => <WithLabelStory.Component />;
+export const Sizes = () => <SizesStory.Component />;
+export const WithDescription = () => <WithDescriptionStory.Component />;
+export const StartCollapsed = () => <StartCollapsedStory.Component />;

docs-ui/src/app/components/select/page.mdx

@@ -1,7 +1,7 @@
 import { PropsTable } from '@/components/PropsTable';
 import { Snippet } from '@/components/Snippet';
 import { CodeBlock } from '@/components/CodeBlock';
-import { SelectSnippet } from '@/snippets/stories-snippets';
+import { Preview, WithLabelAndDescription, Sizes, WithIcon, Disabled, DisabledOption, Searchable, MultipleSelection, SearchableMultiple } from './stories';
 import {
   selectPropDefs,
   selectUsageSnippet,
@@ -19,7 +19,7 @@ import {
 import { PageTitle } from '@/components/PageTitle';
 import { Theming } from '@/components/Theming';
 import { ChangelogComponent } from '@/components/ChangelogComponent';
-import { SelectDefinition } from '../utils/definitions';
+import { SelectDefinition } from '../../../utils/definitions';
 
 <PageTitle
   title="Select"
@@ -29,7 +29,7 @@ import { SelectDefinition } from '../utils/definitions';
 <Snippet
   align="center"
   py={4}
-  preview={<SelectSnippet story="Preview" />}
+  preview={<Preview />}
   code={selectDefaultSnippet}
 />
 
@@ -51,7 +51,7 @@ Select component with label and description.
   align="center"
   py={4}
   open
-  preview={<SelectSnippet story="WithLabelAndDescription" />}
+  preview={<WithLabelAndDescription />}
   code={selectDescriptionSnippet}
 />
 
@@ -63,7 +63,7 @@ Here's a view when the selects have different sizes.
   align="center"
   py={4}
   open
-  preview={<SelectSnippet story="Sizes" />}
+  preview={<Sizes />}
   code={selectSizesSnippet}
 />
 
@@ -76,7 +76,7 @@ Here's a view when the select has an icon.
 align="center"
 py={4}
 open
-preview={<SelectSnippet story="WithIcon" />}
+preview={<WithIcon />}
 code={selectIconSnippet}
 />
 
@@ -88,7 +88,7 @@ Here's a view when the select is disabled.
   align="center"
   py={4}
   open
-  preview={<SelectSnippet story="Disabled" />}
+  preview={<Disabled />}
   code={selectDisabledSnippet}
 />
 
@@ -100,7 +100,7 @@ You can disable specific options within the Select component using `disabledKeys
   align="center"
   py={4}
   open
-  preview={<SelectSnippet story="DisabledOption" />}
+  preview={<DisabledOption />}
   code={selectDisabledOptionsSnippet}
 />
 
@@ -112,7 +112,7 @@ Here's a view when the select has searchable filtering.
   align="center"
   py={4}
   open
-  preview={<SelectSnippet story="Searchable" />}
+  preview={<Searchable />}
   code={selectSearchableSnippet}
 />
 
@@ -124,7 +124,7 @@ Here's a view when the select allows multiple selections.
   align="center"
   py={4}
   open
-  preview={<SelectSnippet story="MultipleSelection" />}
+  preview={<MultipleSelection />}
   code={selectMultipleSnippet}
 />
 
@@ -136,7 +136,7 @@ Here's a view when the select combines search and multiple selection.
   align="center"
   py={4}
   open
-  preview={<SelectSnippet story="SearchableMultiple" />}
+  preview={<SearchableMultiple />}
   code={selectSearchableMultipleSnippet}
 />
 

docs-ui/src/app/components/select/stories.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import * as stories from '@backstage/ui/src/components/Select/Select.stories';
+
+const {
+  Preview: PreviewStory,
+  WithLabelAndDescription: WithLabelAndDescriptionStory,
+  Sizes: SizesStory,
+  WithIcon: WithIconStory,
+  Disabled: DisabledStory,
+  DisabledOption: DisabledOptionStory,
+  Searchable: SearchableStory,
+  MultipleSelection: MultipleSelectionStory,
+  SearchableMultiple: SearchableMultipleStory,
+} = stories;
+
+export const Preview = () => <PreviewStory.Component />;
+export const WithLabelAndDescription = () => (
+  <WithLabelAndDescriptionStory.Component />
+);
+export const Sizes = () => <SizesStory.Component />;
+export const WithIcon = () => <WithIconStory.Component />;
+export const Disabled = () => <DisabledStory.Component />;
+export const DisabledOption = () => <DisabledOptionStory.Component />;
+export const Searchable = () => <SearchableStory.Component />;
+export const MultipleSelection = () => <MultipleSelectionStory.Component />;
+export const SearchableMultiple = () => <SearchableMultipleStory.Component />;

docs-ui/src/app/components/skeleton/page.mdx

@@ -1,7 +1,7 @@
 import { PropsTable } from '@/components/PropsTable';
 import { Snippet } from '@/components/Snippet';
 import { CodeBlock } from '@/components/CodeBlock';
-import { SkeletonSnippet } from '@/snippets/stories-snippets';
+import { Demo1, Demo2 } from './stories';
 import {
   skeletonPropDefs,
   skeletonUsageSnippet,
@@ -12,7 +12,7 @@ import {
 import { PageTitle } from '@/components/PageTitle';
 import { Theming } from '@/components/Theming';
 import { ChangelogComponent } from '@/components/ChangelogComponent';
-import { SkeletonDefinition } from '../utils/definitions';
+import { SkeletonDefinition } from '../../../utils/definitions';
 
 <PageTitle
   title="Skeleton"
@@ -22,7 +22,7 @@ import { SkeletonDefinition } from '../utils/definitions';
 <Snippet
   align="center"
   py={4}
-  preview={<SkeletonSnippet story="Demo2" />}
+  preview={<Demo2 />}
   code={skeletonDefaultSnippet}
 />
 
@@ -43,7 +43,7 @@ You can use a mix of different sizes to create a more complex skeleton.
 <Snippet
   align="center"
   py={4}
-  preview={<SkeletonSnippet story="Demo1" />}
+  preview={<Demo1 />}
   code={skeletonDemo1Snippet}
   open
 />
@@ -55,7 +55,7 @@ You can use a mix of different sizes to create a more complex skeleton.
 <Snippet
   align="center"
   py={4}
-  preview={<SkeletonSnippet story="Demo2" />}
+  preview={<Demo2 />}
   code={skeletonDemo2Snippet}
   open
 />

docs-ui/src/app/components/skeleton/stories.tsx

@@ -0,0 +1,8 @@
+'use client';
+
+import * as stories from '@backstage/ui/src/components/Skeleton/Skeleton.stories';
+
+const { Demo1: Demo1Story, Demo2: Demo2Story } = stories;
+
+export const Demo1 = () => <Demo1Story.Component />;
+export const Demo2 = () => <Demo2Story.Component />;

docs-ui/src/app/components/switch/page.mdx

@@ -1,12 +1,12 @@
 import { PropsTable } from '@/components/PropsTable';
 import { Snippet } from '@/components/Snippet';
 import { CodeBlock } from '@/components/CodeBlock';
-import { SwitchSnippet } from '@/snippets/stories-snippets';
+import { Default, Disabled } from './stories';
 import { switchPropDefs, snippetUsage } from './switch.props';
 import { PageTitle } from '@/components/PageTitle';
 import { Theming } from '@/components/Theming';
 import { ChangelogComponent } from '@/components/ChangelogComponent';
-import { SwitchDefinition } from '../utils/definitions';
+import { SwitchDefinition } from '../../../utils/definitions';
 
 <PageTitle
   title="Switch"
@@ -16,7 +16,7 @@ import { SwitchDefinition } from '../utils/definitions';
 <Snippet
   align="center"
   py={4}
-  preview={<SwitchSnippet story="Default" />}
+  preview={<Default />}
   code={`<Switch />`}
 />
 
@@ -38,7 +38,7 @@ A switch can be disabled using the `isDisabled` prop.
   align="center"
   py={4}
   open
-  preview={<SwitchSnippet story="Disabled" />}
+  preview={<Disabled />}
   code={`<Switch isDisabled />`}
 />
 

docs-ui/src/app/components/switch/stories.tsx

@@ -0,0 +1,8 @@
+'use client';
+
+import * as stories from '@backstage/ui/src/components/Switch/Switch.stories';
+
+const { Default: DefaultStory, Disabled: DisabledStory } = stories;
+
+export const Default = () => <DefaultStory.Component />;
+export const Disabled = () => <DisabledStory.Component />;

docs-ui/src/app/components/table/page.mdx

@@ -1,7 +1,7 @@
 import { PropsTable } from '@/components/PropsTable';
 import { Snippet } from '@/components/Snippet';
 import { CodeBlock } from '@/components/CodeBlock';
-import { TableSnippet } from '@/snippets/stories-snippets';
+import { TableRockBand, SelectionModePlayground, SelectionBehaviorPlayground, SelectionToggleWithActions } from './stories';
 import {
   tablePropDefs,
   tableHeaderPropDefs,
@@ -24,7 +24,7 @@ import {
 import { ChangelogComponent } from '@/components/ChangelogComponent';
 import { PageTitle } from '@/components/PageTitle';
 import { Theming } from '@/components/Theming';
-import { TableDefinition } from '../utils/definitions';
+import { TableDefinition } from '../../../utils/definitions';
 
 <PageTitle
   title="Table"
@@ -33,7 +33,7 @@ import { TableDefinition } from '../utils/definitions';
 
 <Snippet
   py={4}
-  preview={<TableSnippet story="TableRockBand" />}
+  preview={<TableRockBand />}
   code={tableBasicSnippet}
 />
 
@@ -100,7 +100,7 @@ Tables support row selection with two configuration options: selection mode and
 Use `selectionMode` to control how many rows can be selected. With `single`, only one row can be selected at a time. With `multiple`, any number of rows can be selected, and a header checkbox provides select-all functionality.
 
 <Snippet
-  preview={<TableSnippet story="SelectionModePlayground" />}
+  preview={<SelectionModePlayground />}
   code={tableSelectionModeSnippet}
 />
 
@@ -109,7 +109,7 @@ Use `selectionMode` to control how many rows can be selected. With `single`, onl
 Use `selectionBehavior` to control how selection is indicated and interacted with. With `toggle`, checkboxes appear for selection. With `replace`, selection is indicated by row background color—click to select, Cmd/Ctrl+click for multiple.
 
 <Snippet
-  preview={<TableSnippet story="SelectionBehaviorPlayground" />}
+  preview={<SelectionBehaviorPlayground />}
   code={tableSelectionBehaviorSnippet}
 />
 
@@ -120,7 +120,7 @@ With toggle behavior, clicking a row triggers its action when nothing is selecte
 With replace behavior, clicking selects the row and double-clicking triggers the action.
 
 <Snippet
-  preview={<TableSnippet story="SelectionToggleWithActions" />}
+  preview={<SelectionToggleWithActions />}
   code={tableSelectionActionsSnippet}
 />
 

docs-ui/src/app/components/table/stories.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import * as stories from '@backstage/ui/src/components/Table/stories/Table.docs.stories';
+
+const {
+  TableRockBand: TableRockBandStory,
+  SelectionModePlayground: SelectionModePlaygroundStory,
+  SelectionBehaviorPlayground: SelectionBehaviorPlaygroundStory,
+  SelectionToggleWithActions: SelectionToggleWithActionsStory,
+} = stories;
+
+export const TableRockBand = () => <TableRockBandStory.Component />;
+export const SelectionModePlayground = () => (
+  <SelectionModePlaygroundStory.Component />
+);
+export const SelectionBehaviorPlayground = () => (
+  <SelectionBehaviorPlaygroundStory.Component />
+);
+export const SelectionToggleWithActions = () => (
+  <SelectionToggleWithActionsStory.Component />
+);

docs-ui/src/app/components/tabs/page.mdx

@@ -1,5 +1,5 @@
 import { PropsTable } from '@/components/PropsTable';
-import { TabsSnippet } from '@/snippets/stories-snippets';
+import { Default, WithTabPanels, WithMockedURLTab2, PrefixMatchingDeepNesting } from './stories';
 import { Snippet } from '@/components/Snippet';
 import { CodeBlock } from '@/components/CodeBlock';
 import {
@@ -13,7 +13,7 @@ import {
 } from './tabs.props';
 import { PageTitle } from '@/components/PageTitle';
 import { Theming } from '@/components/Theming';
-import { TabsDefinition } from '../utils/definitions';
+import { TabsDefinition } from '../../../utils/definitions';
 import { ChangelogComponent } from '@/components/ChangelogComponent';
 
 <PageTitle
@@ -23,7 +23,7 @@ import { ChangelogComponent } from '@/components/ChangelogComponent';
 
 <Snippet
   py={4}
-  preview={<TabsSnippet story="Default" />}
+  preview={<Default />}
   code={tabsDefaultSnippet}
 />
 
@@ -53,7 +53,7 @@ To connect the tabs with the panels, you need to use the `id` prop on the tab an
 
 <Snippet
   py={4}
-  preview={<TabsSnippet story="WithTabPanels" />}
+  preview={<WithTabPanels />}
   code={tabsWithTabPanelsSnippet}
   open
 />
@@ -64,7 +64,7 @@ You can use the `href` prop on the tab to make it a link. This will use the `rea
 
 <Snippet
   py={4}
-  preview={<TabsSnippet story="WithMockedURLTab2" />}
+  preview={<WithMockedURLTab2 />}
   code={tabsWithLinksSnippet}
   open
 />
@@ -75,7 +75,7 @@ You can use the `matchStrategy` prop on the tab to control how the tab is matche
 
 <Snippet
   py={4}
-  preview={<TabsSnippet story="PrefixMatchingDeepNesting" />}
+  preview={<PrefixMatchingDeepNesting />}
   code={tabsWithDeeplyNestedRoutesSnippet}
   open
 />

docs-ui/src/app/components/tabs/stories.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import * as stories from '@backstage/ui/src/components/Tabs/Tabs.stories';
+
+const {
+  Default: DefaultStory,
+  WithTabPanels: WithTabPanelsStory,
+  WithMockedURLTab2: WithMockedURLTab2Story,
+  PrefixMatchingDeepNesting: PrefixMatchingDeepNestingStory,
+} = stories;
+
+export const Default = () => <DefaultStory.Component />;
+export const WithTabPanels = () => <WithTabPanelsStory.Component />;
+export const WithMockedURLTab2 = () => <WithMockedURLTab2Story.Component />;
+export const PrefixMatchingDeepNesting = () => (
+  <PrefixMatchingDeepNestingStory.Component />
+);

docs-ui/src/app/components/tag-group/page.mdx

@@ -1,7 +1,7 @@
 import { PropsTable } from '@/components/PropsTable';
 import { Snippet } from '@/components/Snippet';
 import { CodeBlock } from '@/components/CodeBlock';
-import { TagGroupSnippet } from '@/snippets/stories-snippets';
+import { Default, WithLink, WithIcon, Sizes, RemovingTags, Disabled } from './stories';
 import {
   tagGroupPropDefs,
   tagPropDefs,
@@ -15,7 +15,7 @@ import {
 } from './tag-group.props';
 import { PageTitle } from '@/components/PageTitle';
 import { Theming } from '@/components/Theming';
-import { TagGroupDefinition } from '../utils/definitions';
+import { TagGroupDefinition } from '../../../utils/definitions';
 import { ChangelogComponent } from '@/components/ChangelogComponent';
 
 <PageTitle
@@ -26,7 +26,7 @@ import { ChangelogComponent } from '@/components/ChangelogComponent';
 <Snippet
   align="center"
   py={4}
-  preview={<TagGroupSnippet story="Default" />}
+  preview={<Default />}
   code={preview}
 />
 
@@ -58,7 +58,7 @@ A tag can be a link by passing a `href` prop.
   align="center"
   py={4}
   open
-  preview={<TagGroupSnippet story="WithLink" />}
+  preview={<WithLink />}
   code={withLink}
 />
 
@@ -70,7 +70,7 @@ A tag can have an icon by passing a `icon` prop.
   align="center"
   py={4}
   open
-  preview={<TagGroupSnippet story="WithIcon" />}
+  preview={<WithIcon />}
   code={withIcons}
 />
 
@@ -82,7 +82,7 @@ A tag can have a size by passing a `size` prop. It could be `small` or `medium`.
   align="center"
   py={4}
   open
-  preview={<TagGroupSnippet story="Sizes" />}
+  preview={<Sizes />}
   code={sizes}
 />
 
@@ -94,7 +94,7 @@ A tag can be removed by passing a `onRemove` prop.
   align="center"
   py={4}
   open
-  preview={<TagGroupSnippet story="RemovingTags" />}
+  preview={<RemovingTags />}
   code={removingTags}
 />
 
@@ -106,7 +106,7 @@ A switch can be disabled using the `isDisabled` prop.
   align="center"
   py={4}
   open
-  preview={<TagGroupSnippet story="Disabled" />}
+  preview={<Disabled />}
   code={disabled}
 />
 

docs-ui/src/app/components/tag-group/stories.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import * as stories from '@backstage/ui/src/components/TagGroup/TagGroup.stories';
+
+const {
+  Default: DefaultStory,
+  WithLink: WithLinkStory,
+  WithIcon: WithIconStory,
+  Sizes: SizesStory,
+  RemovingTags: RemovingTagsStory,
+  Disabled: DisabledStory,
+} = stories;
+
+export const Default = () => <DefaultStory.Component />;
+export const WithLink = () => <WithLinkStory.Component />;
+export const WithIcon = () => <WithIconStory.Component />;
+export const Sizes = () => <SizesStory.Component />;
+export const RemovingTags = () => <RemovingTagsStory.Component />;
+export const Disabled = () => <DisabledStory.Component />;

docs-ui/src/app/components/text-field/page.mdx

@@ -1,6 +1,6 @@
 import { PropsTable } from '@/components/PropsTable';
 import { Snippet } from '@/components/Snippet';
-import { TextFieldSnippet } from '@/snippets/stories-snippets';
+import { WithLabel, Sizes, WithDescription } from './stories';
 import {
   inputPropDefs,
   textFieldUsageSnippet,
@@ -10,7 +10,7 @@ import {
 } from './text-field.props';
 import { PageTitle } from '@/components/PageTitle';
 import { Theming } from '@/components/Theming';
-import { TextFieldDefinition } from '../utils/definitions';
+import { TextFieldDefinition } from '../../../utils/definitions';
 import { ChangelogComponent } from '@/components/ChangelogComponent';
 import { CodeBlock } from '@/components/CodeBlock';
 
@@ -22,7 +22,7 @@ import { CodeBlock } from '@/components/CodeBlock';
 <Snippet
   align="center"
   py={4}
-  preview={<TextFieldSnippet story="WithLabel" />}
+  preview={<WithLabel />}
   code={textFieldDefaultSnippet}
 />
 
@@ -44,7 +44,7 @@ We support two different sizes: `small`, `medium`.
   align="center"
   py={4}
   open
-  preview={<TextFieldSnippet story="Sizes" />}
+  preview={<Sizes />}
   code={textFieldSizesSnippet}
 />
 
@@ -56,7 +56,7 @@ Here's a simple TextField with a description.
   align="center"
   py={4}
   open
-  preview={<TextFieldSnippet story="WithDescription" />}
+  preview={<WithDescription />}
   code={textFieldDescriptionSnippet}
 />
 

docs-ui/src/app/components/text-field/stories.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import * as stories from '@backstage/ui/src/components/TextField/TextField.stories';
+
+const {
+  WithLabel: WithLabelStory,
+  Sizes: SizesStory,
+  WithDescription: WithDescriptionStory,
+} = stories;
+
+export const WithLabel = () => <WithLabelStory.Component />;
+export const Sizes = () => <SizesStory.Component />;
+export const WithDescription = () => <WithDescriptionStory.Component />;

docs-ui/src/app/components/text/page.mdx

@@ -1,5 +1,5 @@
 import { PropsTable } from '@/components/PropsTable';
-import { TextSnippet } from '@/snippets/stories-snippets';
+import { Default, AllVariants, AllWeights, AllColors, Truncate } from './stories';
 import { Snippet } from '@/components/Snippet';
 import { CodeBlock } from '@/components/CodeBlock';
 import {
@@ -14,7 +14,7 @@ import {
 } from './text.props';
 import { PageTitle } from '@/components/PageTitle';
 import { Theming } from '@/components/Theming';
-import { TextDefinition } from '../utils/definitions';
+import { TextDefinition } from '../../../utils/definitions';
 import { ChangelogComponent } from '@/components/ChangelogComponent';
 
 <PageTitle
@@ -24,7 +24,7 @@ import { ChangelogComponent } from '@/components/ChangelogComponent';
 
 <Snippet
   py={4}
-  preview={<TextSnippet story="Default" />}
+  preview={<Default />}
   code={textDefaultSnippet}
 />
 
@@ -45,7 +45,7 @@ appearance of the text.
 
 <Snippet
   open
-  preview={<TextSnippet story="AllVariants" />}
+  preview={<AllVariants />}
   code={textVariantsSnippet}
 />
 
@@ -56,7 +56,7 @@ appearance of the text.
 
 <Snippet
   open
-  preview={<TextSnippet story="AllWeights" />}
+  preview={<AllWeights />}
   code={textWeightsSnippet}
 />
 
@@ -67,7 +67,7 @@ appearance of the text.
 
 <Snippet
   open
-  preview={<TextSnippet story="AllColors" />}
+  preview={<AllColors />}
   code={textColorsSnippet}
 />
 
@@ -77,7 +77,7 @@ The `Text` component has a `truncate` prop that can be used to truncate the text
 
 <Snippet
   open
-  preview={<TextSnippet story="Truncate" />}
+  preview={<Truncate />}
   code={textTruncateSnippet}
 />
 

docs-ui/src/app/components/text/stories.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import * as stories from '@backstage/ui/src/components/Text/Text.stories';
+
+const {
+  Default: DefaultStory,
+  AllVariants: AllVariantsStory,
+  AllWeights: AllWeightsStory,
+  AllColors: AllColorsStory,
+  Truncate: TruncateStory,
+} = stories;
+
+export const Default = () => <DefaultStory.Component />;
+export const AllVariants = () => <AllVariantsStory.Component />;
+export const AllWeights = () => <AllWeightsStory.Component />;
+export const AllColors = () => <AllColorsStory.Component />;
+export const Truncate = () => <TruncateStory.Component />;

docs-ui/src/app/components/toggle-button-group/page.mdx

@@ -13,11 +13,11 @@ import {
   toggleButtonGroupIconsOnlySnippet,
   toggleButtonGroupSurfacesSnippet,
 } from './toggle-button-group.props';
-import { ToggleButtonGroupSnippet } from '@/snippets/stories-snippets';
+import { SingleSelection, Surfaces, MultipleSelection, WithIcons, IconsOnly, DisallowEmptySelection, Orientation, DisabledGroup } from './stories';
 import { PageTitle } from '@/components/PageTitle';
 import { Theming } from '@/components/Theming';
 import { ChangelogComponent } from '@/components/ChangelogComponent';
-import { ToggleButtonGroupDefinition } from '../utils/definitions';
+import { ToggleButtonGroupDefinition } from '../../../utils/definitions';
 
 <PageTitle
   title="ToggleButtonGroup"
@@ -27,7 +27,7 @@ import { ToggleButtonGroupDefinition } from '../utils/definitions';
 <Snippet
   align="center"
   py={4}
-  preview={<ToggleButtonGroupSnippet story="SingleSelection" />}
+  preview={<SingleSelection />}
   code={toggleButtonGroupSingleSnippet}
 />
 
@@ -47,7 +47,7 @@ import { ToggleButtonGroupDefinition } from '../utils/definitions';
   align="center"
   py={4}
   open
-  preview={<ToggleButtonGroupSnippet story="Surfaces" />}
+  preview={<Surfaces />}
   code={toggleButtonGroupSurfacesSnippet}
 />
 
@@ -57,7 +57,7 @@ import { ToggleButtonGroupDefinition } from '../utils/definitions';
   align="center"
   py={4}
   open
-  preview={<ToggleButtonGroupSnippet story="SingleSelection" />}
+  preview={<SingleSelection />}
   code={toggleButtonGroupSingleSnippet}
 />
 
@@ -67,7 +67,7 @@ import { ToggleButtonGroupDefinition } from '../utils/definitions';
   align="center"
   py={4}
   open
-  preview={<ToggleButtonGroupSnippet story="MultipleSelection" />}
+  preview={<MultipleSelection />}
   code={toggleButtonGroupMultipleSnippet}
 />
 
@@ -77,7 +77,7 @@ import { ToggleButtonGroupDefinition } from '../utils/definitions';
   align="center"
   py={4}
   open
-  preview={<ToggleButtonGroupSnippet story="WithIcons" />}
+  preview={<WithIcons />}
   code={toggleButtonGroupIconsSnippet}
 />
 
@@ -87,7 +87,7 @@ import { ToggleButtonGroupDefinition } from '../utils/definitions';
   align="center"
   py={4}
   open
-  preview={<ToggleButtonGroupSnippet story="IconsOnly" />}
+  preview={<IconsOnly />}
   code={toggleButtonGroupIconsOnlySnippet}
 />
 
@@ -97,7 +97,7 @@ import { ToggleButtonGroupDefinition } from '../utils/definitions';
   align="center"
   py={4}
   open
-  preview={<ToggleButtonGroupSnippet story="DisallowEmptySelection" />}
+  preview={<DisallowEmptySelection />}
   code={toggleButtonGroupDisallowEmptySnippet}
 />
 
@@ -107,7 +107,7 @@ import { ToggleButtonGroupDefinition } from '../utils/definitions';
   align="center"
   py={4}
   open
-  preview={<ToggleButtonGroupSnippet story="Orientation" />}
+  preview={<Orientation />}
   code={toggleButtonGroupVerticalSnippet}
 />
 
@@ -117,7 +117,7 @@ import { ToggleButtonGroupDefinition } from '../utils/definitions';
   align="center"
   py={4}
   open
-  preview={<ToggleButtonGroupSnippet story="DisabledGroup" />}
+  preview={<DisabledGroup />}
   code={toggleButtonGroupDisabledSnippet}
 />
 

docs-ui/src/app/components/toggle-button-group/stories.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import * as stories from '@backstage/ui/src/components/ToggleButtonGroup/ToggleButtonGroup.stories';
+
+const {
+  SingleSelection: SingleSelectionStory,
+  Surfaces: SurfacesStory,
+  MultipleSelection: MultipleSelectionStory,
+  WithIcons: WithIconsStory,
+  IconsOnly: IconsOnlyStory,
+  DisallowEmptySelection: DisallowEmptySelectionStory,
+  Orientation: OrientationStory,
+  DisabledGroup: DisabledGroupStory,
+} = stories;
+
+export const SingleSelection = () => <SingleSelectionStory.Component />;
+export const Surfaces = () => <SurfacesStory.Component />;
+export const MultipleSelection = () => <MultipleSelectionStory.Component />;
+export const WithIcons = () => <WithIconsStory.Component />;
+export const IconsOnly = () => <IconsOnlyStory.Component />;
+export const DisallowEmptySelection = () => (
+  <DisallowEmptySelectionStory.Component />
+);
+export const Orientation = () => <OrientationStory.Component />;
+export const DisabledGroup = () => <DisabledGroupStory.Component />;

docs-ui/src/app/components/toggle-button/page.mdx

@@ -1,7 +1,7 @@
 import { PropsTable } from '@/components/PropsTable';
 import { Snippet } from '@/components/Snippet';
 import { CodeBlock } from '@/components/CodeBlock';
-import { ToggleButtonSnippet } from '@/snippets/stories-snippets';
+import { Default, Surfaces, Sizes, WithIcons, Disabled, Controlled, DynamicContent } from './stories';
 import {
   toggleButtonPropDefs,
   toggleButtonUsageSnippet,
@@ -15,7 +15,7 @@ import {
 import { PageTitle } from '@/components/PageTitle';
 import { Theming } from '@/components/Theming';
 import { ChangelogComponent } from '@/components/ChangelogComponent';
-import { ToggleButtonDefinition } from '../utils/definitions';
+import { ToggleButtonDefinition } from '../../../utils/definitions';
 
 <PageTitle
   title="ToggleButton"
@@ -25,7 +25,7 @@ import { ToggleButtonDefinition } from '../utils/definitions';
 <Snippet
   align="center"
   py={4}
-  preview={<ToggleButtonSnippet story="Default" />}
+  preview={<Default />}
   code={toggleButtonUsageSnippet}
 />
 
@@ -45,7 +45,7 @@ import { ToggleButtonDefinition } from '../utils/definitions';
   align="center"
   py={4}
   open
-  preview={<ToggleButtonSnippet story="Surfaces" />}
+  preview={<Surfaces />}
   code={toggleButtonSurfacesSnippet}
 />
 
@@ -55,7 +55,7 @@ import { ToggleButtonDefinition } from '../utils/definitions';
   align="center"
   py={4}
   open
-  preview={<ToggleButtonSnippet story="Sizes" />}
+  preview={<Sizes />}
   code={toggleButtonSizesSnippet}
 />
 
@@ -65,7 +65,7 @@ import { ToggleButtonDefinition } from '../utils/definitions';
   align="center"
   py={4}
   open
-  preview={<ToggleButtonSnippet story="WithIcons" />}
+  preview={<WithIcons />}
   code={toggleButtonIconsSnippet}
 />
 
@@ -75,7 +75,7 @@ import { ToggleButtonDefinition } from '../utils/definitions';
   align="center"
   py={4}
   open
-  preview={<ToggleButtonSnippet story="Disabled" />}
+  preview={<Disabled />}
   code={toggleButtonDisabledSnippet}
 />
 
@@ -85,7 +85,7 @@ import { ToggleButtonDefinition } from '../utils/definitions';
   align="center"
   py={4}
   open
-  preview={<ToggleButtonSnippet story="Controlled" />}
+  preview={<Controlled />}
   code={toggleButtonControlledSnippet}
 />
 
@@ -97,7 +97,7 @@ The `children` prop can be a function that receives render props, allowing you t
   align="center"
   py={4}
   open
-  preview={<ToggleButtonSnippet story="DynamicContent" />}
+  preview={<DynamicContent />}
   code={toggleButtonFunctionChildrenSnippet}
 />
 

docs-ui/src/app/components/toggle-button/stories.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import * as stories from '@backstage/ui/src/components/ToggleButton/ToggleButton.stories';
+
+const {
+  Default: DefaultStory,
+  Surfaces: SurfacesStory,
+  Sizes: SizesStory,
+  WithIcons: WithIconsStory,
+  Disabled: DisabledStory,
+  Controlled: ControlledStory,
+  DynamicContent: DynamicContentStory,
+} = stories;
+
+export const Default = () => <DefaultStory.Component />;
+export const Surfaces = () => <SurfacesStory.Component />;
+export const Sizes = () => <SizesStory.Component />;
+export const WithIcons = () => <WithIconsStory.Component />;
+export const Disabled = () => <DisabledStory.Component />;
+export const Controlled = () => <ControlledStory.Component />;
+export const DynamicContent = () => <DynamicContentStory.Component />;

docs-ui/src/app/components/tooltip/page.mdx

@@ -1,5 +1,5 @@
 import { PropsTable } from '@/components/PropsTable';
-import { TooltipSnippet } from '@/snippets/stories-snippets';
+import { Default } from './stories';
 import { Snippet } from '@/components/Snippet';
 import { CodeBlock } from '@/components/CodeBlock';
 import {
@@ -10,7 +10,7 @@ import {
 } from './tooltip.props';
 import { PageTitle } from '@/components/PageTitle';
 import { Theming } from '@/components/Theming';
-import { TooltipDefinition } from '../utils/definitions';
+import { TooltipDefinition } from '../../../utils/definitions';
 import { ChangelogComponent } from '@/components/ChangelogComponent';
 
 <PageTitle
@@ -20,7 +20,7 @@ import { ChangelogComponent } from '@/components/ChangelogComponent';
 
 <Snippet
   py={4}
-  preview={<TooltipSnippet story="Default" />}
+  preview={<Default />}
   code={tooltipDefaultSnippet}
   align="center"
 />

docs-ui/src/app/components/tooltip/stories.tsx

@@ -0,0 +1,7 @@
+'use client';
+
+import * as stories from '@backstage/ui/src/components/Tooltip/Tooltip.stories';
+
+const { Default: DefaultStory } = stories;
+
+export const Default = () => <DefaultStory.Component />;

docs-ui/src/app/components/visually-hidden/page.mdx

@@ -1,7 +1,7 @@
 import { PropsTable } from '@/components/PropsTable';
 import { Snippet } from '@/components/Snippet';
 import { CodeBlock } from '@/components/CodeBlock';
-import { VisuallyHiddenSnippet } from '@/snippets/stories-snippets';
+import { Default, ExampleUsage } from './stories';
 import {
   visuallyHiddenPropDefs,
   visuallyHiddenUsageSnippet,
@@ -10,7 +10,7 @@ import {
 } from './visually-hidden.props';
 import { PageTitle } from '@/components/PageTitle';
 import { Theming } from '@/components/Theming';
-import { VisuallyHiddenDefinition } from '../utils/definitions';
+import { VisuallyHiddenDefinition } from '../../../utils/definitions';
 import { ChangelogComponent } from '@/components/ChangelogComponent';
 
 <PageTitle
@@ -21,7 +21,7 @@ import { ChangelogComponent } from '@/components/ChangelogComponent';
 <Snippet
   align="start"
   py={4}
-  preview={<VisuallyHiddenSnippet story="Default" />}
+  preview={<Default />}
   code={visuallyHiddenDefaultSnippet}
 />
 
@@ -42,7 +42,7 @@ Here's an example of providing screen reader context for a list of links in a fo
 <Snippet
   align="start"
   py={4}
-  preview={<VisuallyHiddenSnippet story="ExampleUsage" />}
+  preview={<ExampleUsage />}
   code={visuallyHiddenExampleUsageSnippet}
   open
 />

docs-ui/src/app/components/visually-hidden/stories.tsx

@@ -0,0 +1,8 @@
+'use client';
+
+import * as stories from '@backstage/ui/src/components/VisuallyHidden/VisuallyHidden.stories';
+
+const { Default: DefaultStory, ExampleUsage: ExampleUsageStory } = stories;
+
+export const Default = () => <DefaultStory.Component />;
+export const ExampleUsage = () => <ExampleUsageStory.Component />;

docs-ui/src/content/PasswordField.tsx

@@ -1,8 +0,0 @@
-'use client';
-
-import * as stories from '../../../packages/ui/src/components/PasswordField/PasswordField.stories';
-
-export const Default = () => {
-  const { CustomField } = stories;
-  return <CustomField.Component />;
-};

docs-ui/src/content/password-field.mdx

@@ -1,23 +0,0 @@
-import { PropsTable } from '@/components/PropsTable';
-import { Snippet } from '@/components/Snippet';
-import { PasswordFieldSnippet } from '@/snippets/stories-snippets';
-import {
-  inputPropDefs,
-  passwordFieldUsageSnippet,
-  passwordFieldDefaultSnippet,
-  passwordFieldSizesSnippet,
-  passwordFieldDescriptionSnippet,
-} from './password-field.props';
-import { PageTitle } from '@/components/PageTitle';
-import { Theming } from '@/components/Theming';
-import { ChangelogComponent } from '@/components/ChangelogComponent';
-import { CodeBlock } from '@/components/CodeBlock';
-import { PasswordFieldDefinition } from '../utils/definitions';
-import { Default } from './PasswordField';
-
-<PageTitle
-  title="PasswordField"
-  description="A password field component for your forms."
-/>
-
-<Default />

docs-ui/src/snippets/stories-snippets.tsx

@@ -1,85 +0,0 @@
-'use client';
-
-import * as BoxStories from '../../../packages/ui/src/components/Box/Box.stories';
-import * as ButtonStories from '../../../packages/ui/src/components/Button/Button.stories';
-import * as ButtonIconStories from '../../../packages/ui/src/components/ButtonIcon/ButtonIcon.stories';
-import * as ButtonLinkStories from '../../../packages/ui/src/components/ButtonLink/ButtonLink.stories';
-import * as CheckboxStories from '../../../packages/ui/src/components/Checkbox/Checkbox.stories';
-import * as ContainerStories from '../../../packages/ui/src/components/Container/Container.stories';
-import * as GridStories from '../../../packages/ui/src/components/Grid/Grid.stories';
-import * as TextFieldStories from '../../../packages/ui/src/components/TextField/TextField.stories';
-import * as TextStories from '../../../packages/ui/src/components/Text/Text.stories';
-import * as FlexStories from '../../../packages/ui/src/components/Flex/Flex.stories';
-import * as SelectStories from '../../../packages/ui/src/components/Select/Select.stories';
-import * as MenuStories from '../../../packages/ui/src/components/Menu/Menu.stories';
-import * as LinkStories from '../../../packages/ui/src/components/Link/Link.stories';
-import * as AvatarStories from '../../../packages/ui/src/components/Avatar/Avatar.stories';
-import * as AccordionStories from '../../../packages/ui/src/components/Accordion/Accordion.stories';
-import * as DialogStories from '../../../packages/ui/src/components/Dialog/Dialog.stories';
-import * as RadioGroupStories from '../../../packages/ui/src/components/RadioGroup/RadioGroup.stories';
-import * as TabsStories from '../../../packages/ui/src/components/Tabs/Tabs.stories';
-import * as SwitchStories from '../../../packages/ui/src/components/Switch/Switch.stories';
-import * as SearchFieldStories from '../../../packages/ui/src/components/SearchField/SearchField.stories';
-import * as TooltipStories from '../../../packages/ui/src/components/Tooltip/Tooltip.stories';
-import * as SkeletonStories from '../../../packages/ui/src/components/Skeleton/Skeleton.stories';
-import * as CardStories from '../../../packages/ui/src/components/Card/Card.stories';
-import * as HeaderStories from '../../../packages/ui/src/components/Header/Header.stories';
-import * as HeaderPageStories from '../../../packages/ui/src/components/HeaderPage/HeaderPage.stories';
-import * as TableStories from '../../../packages/ui/src/components/Table/stories/Table.docs.stories';
-import * as TagGroupStories from '../../../packages/ui/src/components/TagGroup/TagGroup.stories';
-import * as PasswordFieldStories from '../../../packages/ui/src/components/PasswordField/PasswordField.stories';
-import * as PopoverStories from '../../../packages/ui/src/components/Popover/Popover.stories';
-import * as VisuallyHiddenStories from '../../../packages/ui/src/components/VisuallyHidden/VisuallyHidden.stories';
-import * as ToggleButtonStories from '../../../packages/ui/src/components/ToggleButton/ToggleButton.stories';
-import * as ToggleButtonGroupStories from '../../../packages/ui/src/components/ToggleButtonGroup/ToggleButtonGroup.stories';
-
-// Helper function to create snippet components
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const createSnippetComponent = (stories: any) => {
-  return function SnippetComponent({ story }: { story: string }) {
-    // In CSF3, stories are already React components that can be rendered directly
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const StoryComponent = stories[story as keyof typeof stories] as any;
-
-    return StoryComponent ? <StoryComponent /> : null;
-  };
-};
-
-// Create snippet components using the helper function
-export const BoxSnippet = createSnippetComponent(BoxStories);
-export const ButtonSnippet = createSnippetComponent(ButtonStories);
-export const ButtonIconSnippet = createSnippetComponent(ButtonIconStories);
-export const ButtonLinkSnippet = createSnippetComponent(ButtonLinkStories);
-export const CheckboxSnippet = createSnippetComponent(CheckboxStories);
-export const ContainerSnippet = createSnippetComponent(ContainerStories);
-export const GridSnippet = createSnippetComponent(GridStories);
-export const TextFieldSnippet = createSnippetComponent(TextFieldStories);
-export const PasswordFieldSnippet =
-  createSnippetComponent(PasswordFieldStories);
-export const PopoverSnippet = createSnippetComponent(PopoverStories);
-export const TextSnippet = createSnippetComponent(TextStories);
-export const FlexSnippet = createSnippetComponent(FlexStories);
-export const SelectSnippet = createSnippetComponent(SelectStories);
-export const MenuSnippet = createSnippetComponent(MenuStories);
-export const LinkSnippet = createSnippetComponent(LinkStories);
-export const AvatarSnippet = createSnippetComponent(AvatarStories);
-export const AccordionSnippet = createSnippetComponent(AccordionStories);
-export const DialogSnippet = createSnippetComponent(DialogStories);
-export const RadioGroupSnippet = createSnippetComponent(RadioGroupStories);
-export const TabsSnippet = createSnippetComponent(TabsStories);
-export const SwitchSnippet = createSnippetComponent(SwitchStories);
-export const SearchFieldSnippet = createSnippetComponent(SearchFieldStories);
-export const TooltipSnippet = createSnippetComponent(TooltipStories);
-export const SkeletonSnippet = createSnippetComponent(SkeletonStories);
-export const CardSnippet = createSnippetComponent(CardStories);
-export const HeaderSnippet = createSnippetComponent(HeaderStories);
-export const HeaderPageSnippet = createSnippetComponent(HeaderPageStories);
-export const TableSnippet = createSnippetComponent(TableStories);
-export const TagGroupSnippet = createSnippetComponent(TagGroupStories);
-export const ToggleButtonSnippet = createSnippetComponent(ToggleButtonStories);
-export const ToggleButtonGroupSnippet = createSnippetComponent(
-  ToggleButtonGroupStories,
-);
-export const VisuallyHiddenSnippet = createSnippetComponent(
-  VisuallyHiddenStories,
-);