From ff3b228a6e64363810322bf0dd69b9317cfb3d92 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Wed, 14 Jan 2026 22:48:14 +0100 Subject: [PATCH 1/6] Add docs for Popover Signed-off-by: Charles de Dreuille --- docs-ui/src/content/PasswordField.tsx | 8 + docs-ui/src/content/password-field.mdx | 46 +----- docs-ui/src/content/popover.mdx | 102 +++++++++++++ docs-ui/src/content/popover.props.ts | 174 ++++++++++++++++++++++ docs-ui/src/snippets/stories-snippets.tsx | 11 +- docs-ui/src/utils/data.ts | 5 + 6 files changed, 296 insertions(+), 50 deletions(-) create mode 100644 docs-ui/src/content/PasswordField.tsx create mode 100644 docs-ui/src/content/popover.mdx create mode 100644 docs-ui/src/content/popover.props.ts diff --git a/docs-ui/src/content/PasswordField.tsx b/docs-ui/src/content/PasswordField.tsx new file mode 100644 index 0000000000..953ec3515e --- /dev/null +++ b/docs-ui/src/content/PasswordField.tsx @@ -0,0 +1,8 @@ +'use client'; + +import * as stories from '../../../packages/ui/src/components/PasswordField/PasswordField.stories'; + +export const Default = () => { + const { CustomField } = stories; + return ; +}; diff --git a/docs-ui/src/content/password-field.mdx b/docs-ui/src/content/password-field.mdx index 8dda2b4f2a..2b6d3c1ca6 100644 --- a/docs-ui/src/content/password-field.mdx +++ b/docs-ui/src/content/password-field.mdx @@ -13,53 +13,11 @@ import { Theming } from '@/components/Theming'; import { ChangelogComponent } from '@/components/ChangelogComponent'; import { CodeBlock } from '@/components/CodeBlock'; import { PasswordFieldDefinition } from '../utils/definitions'; +import { Default } from './PasswordField'; -} - code={passwordFieldDefaultSnippet} -/> - -## Usage - - - -## API reference - - - -## Examples - -### Sizes - -We support two different sizes: `small`, `medium`. - -} - code={passwordFieldSizesSnippet} -/> - -### With description - -Here's a simple PasswordField with a description. - -} - code={passwordFieldDescriptionSnippet} -/> - - - - + diff --git a/docs-ui/src/content/popover.mdx b/docs-ui/src/content/popover.mdx new file mode 100644 index 0000000000..ca3f728b01 --- /dev/null +++ b/docs-ui/src/content/popover.mdx @@ -0,0 +1,102 @@ +import { PropsTable } from '@/components/PropsTable'; +import { PopoverSnippet } from '@/snippets/stories-snippets'; +import { Snippet } from '@/components/Snippet'; +import { CodeBlock } from '@/components/CodeBlock'; +import { + popoverPropDefs, + popoverUsageSnippet, + popoverDefaultSnippet, + popoverPlacementsSnippet, + popoverNoArrowSnippet, + popoverRichContentSnippet, + popoverNonModalSnippet, +} from './popover.props'; +import { PageTitle } from '@/components/PageTitle'; +import { Theming } from '@/components/Theming'; +import { PopoverDefinition } from '../utils/definitions'; +import { ChangelogComponent } from '@/components/ChangelogComponent'; + + + +} + code={popoverDefaultSnippet} +/> + +## Usage + + + +## API reference + +### Popover + +The main popover component that displays floating content with automatic positioning. + + + +## Examples + +### Placements + +Popover supports multiple placement options to position the content relative to the trigger. + +} + code={popoverPlacementsSnippet} +/> + +### Without Arrow + +You can hide the arrow by setting the `hideArrow` prop. + +} + code={popoverNoArrowSnippet} +/> + +### Rich Content + +Popovers can contain complex content including buttons, forms, and other interactive elements. + +} + code={popoverRichContentSnippet} +/> + +### Non-Modal + +Non-modal popovers allow interaction with other elements on the page while the popover is open. + +} + code={popoverNonModalSnippet} +/> + +### Long Content + +Popovers automatically handle scrolling when content exceeds the available viewport space. + +} + code={popoverDefaultSnippet} +/> + + + + diff --git a/docs-ui/src/content/popover.props.ts b/docs-ui/src/content/popover.props.ts new file mode 100644 index 0000000000..74194c6120 --- /dev/null +++ b/docs-ui/src/content/popover.props.ts @@ -0,0 +1,174 @@ +import { + childrenPropDefs, + classNamePropDefs, + stylePropDefs, + type PropDef, +} from '@/utils/propDefs'; + +export const popoverPropDefs: Record = { + hideArrow: { + type: 'boolean', + default: 'false', + description: + 'Whether to hide the arrow pointing to the trigger element. Arrow is also automatically hidden for MenuTrigger and SubmenuTrigger contexts.', + }, + placement: { + type: 'enum', + values: [ + 'top', + 'top start', + 'top end', + 'bottom', + 'bottom start', + 'bottom end', + 'left', + 'left start', + 'left end', + 'right', + 'right start', + 'right end', + ], + default: 'bottom', + description: 'The placement of the popover relative to the trigger.', + }, + containerPadding: { + type: 'number', + default: '12', + description: + 'The padding between the popover and the edge of the viewport.', + }, + offset: { + type: 'number', + default: '0', + description: 'The offset from the trigger element.', + }, + crossOffset: { + type: 'number', + default: '0', + description: 'The cross-axis offset from the trigger element.', + }, + shouldFlip: { + type: 'boolean', + default: 'true', + description: + 'Whether the popover should flip to the opposite side when there is not enough space.', + }, + isOpen: { + type: 'boolean', + description: 'Whether the popover is open (controlled).', + }, + defaultOpen: { + type: 'boolean', + description: 'Whether the popover is open by default (uncontrolled).', + }, + onOpenChange: { + type: 'enum', + values: ['(isOpen: boolean) => void'], + description: + "Handler that is called when the popover's open state changes.", + }, + isNonModal: { + type: 'boolean', + default: 'false', + description: + 'Whether the popover is non-modal. Non-modal popovers do not block interaction with the rest of the page.', + }, + isKeyboardDismissDisabled: { + type: 'boolean', + default: 'false', + description: + 'Whether pressing the escape key to close the popover should be disabled.', + }, + shouldCloseOnBlur: { + type: 'boolean', + default: 'true', + description: + 'Whether to close the popover when the user interacts outside it.', + }, + triggerRef: { + type: 'enum', + values: ['RefObject'], + description: 'A ref for the trigger element.', + }, + ...childrenPropDefs, + ...classNamePropDefs, + ...stylePropDefs, +}; + +export const popoverUsageSnippet = `import { Popover, DialogTrigger, Button } from '@backstage/ui'; + + + + + This is a popover + +`; + +export const popoverDefaultSnippet = ` + + + This is a popover + +`; + +export const popoverPlacementsSnippet = ` + + + Top placement + + + + + + + Right placement + + + + + + + Bottom placement + + + + + + + Left placement + +`; + +export const popoverNoArrowSnippet = ` + + + Popover without arrow + +`; + +export const popoverRichContentSnippet = ` + + + + Popover Title + + This is a popover with rich content. It can contain multiple + elements and formatted text. + + + + + + + +`; + +export const popoverNonModalSnippet = ` + + + + This is a non-modal popover. You can interact with other + elements on the page while it's open. + + +`; diff --git a/docs-ui/src/snippets/stories-snippets.tsx b/docs-ui/src/snippets/stories-snippets.tsx index ba722a5edb..9297844baa 100644 --- a/docs-ui/src/snippets/stories-snippets.tsx +++ b/docs-ui/src/snippets/stories-snippets.tsx @@ -1,6 +1,5 @@ 'use client'; -import { composeStories } from '@storybook/react'; 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'; @@ -29,6 +28,7 @@ import * as HeaderPageStories from '../../../packages/ui/src/components/HeaderPa 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'; @@ -37,11 +37,9 @@ import * as ToggleButtonGroupStories from '../../../packages/ui/src/components/T // eslint-disable-next-line @typescript-eslint/no-explicit-any const createSnippetComponent = (stories: any) => { return function SnippetComponent({ story }: { story: string }) { - const composedStories = composeStories(stories); - const StoryComponent = composedStories[ - story as keyof typeof composedStories - // eslint-disable-next-line @typescript-eslint/no-explicit-any - ] as any; + // 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 ? : null; }; @@ -58,6 +56,7 @@ 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); diff --git a/docs-ui/src/utils/data.ts b/docs-ui/src/utils/data.ts index b20725142c..1b046fd3e5 100644 --- a/docs-ui/src/utils/data.ts +++ b/docs-ui/src/utils/data.ts @@ -76,6 +76,11 @@ export const components: Page[] = [ title: 'PasswordField', slug: 'password-field', }, + { + title: 'Popover', + slug: 'popover', + status: 'new', + }, { title: 'RadioGroup', slug: 'radio-group', From ca2e767204f74501355b2207a1f098f497b3fd22 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Wed, 14 Jan 2026 23:53:30 +0100 Subject: [PATCH 2/6] Migrate all mdx files Signed-off-by: Charles de Dreuille --- docs-ui/src/app/components/[slug]/page.tsx | 23 ----- .../components/accordion}/accordion.props.ts | 0 .../components/accordion/page.mdx} | 23 +++-- .../src/app/components/accordion/stories.tsx | 19 +++++ .../components/avatar}/avatar.props.ts | 0 .../components/avatar/page.mdx} | 12 +-- docs-ui/src/app/components/avatar/stories.tsx | 15 ++++ .../components/box}/box.props.ts | 0 .../box.mdx => app/components/box/page.mdx} | 6 +- docs-ui/src/app/components/box/stories.tsx | 7 ++ .../button-icon}/button-icon.props.ts | 0 .../components/button-icon/page.mdx} | 14 +-- .../app/components/button-icon/stories.tsx | 15 ++++ .../button-link}/button-link.props.ts | 0 .../components/button-link/page.mdx} | 14 +-- .../app/components/button-link/stories.tsx | 15 ++++ .../components/button}/button.props.ts | 0 .../components/button/page.mdx} | 19 +++-- docs-ui/src/app/components/button/stories.tsx | 17 ++++ .../components/card}/card.props.ts | 0 .../card.mdx => app/components/card/page.mdx} | 10 +-- docs-ui/src/app/components/card/stories.tsx | 13 +++ .../components/checkbox}/checkbox.props.ts | 0 .../components/checkbox/page.mdx} | 8 +- .../src/app/components/checkbox/stories.tsx | 8 ++ .../components/container}/container.props.ts | 0 .../components/container/page.mdx} | 6 +- .../src/app/components/container/stories.tsx | 7 ++ .../components/dialog}/dialog.props.ts | 0 .../components/dialog/page.mdx} | 10 +-- docs-ui/src/app/components/dialog/stories.tsx | 15 ++++ .../components/flex}/flex.props.ts | 0 .../flex.mdx => app/components/flex/page.mdx} | 6 +- docs-ui/src/app/components/flex/stories.tsx | 7 ++ .../components/grid}/grid.props.ts | 0 .../grid.mdx => app/components/grid/page.mdx} | 6 +- docs-ui/src/app/components/grid/stories.tsx | 7 ++ .../header-page}/header-page.props.ts | 0 .../components/header-page/page.mdx} | 14 +-- .../app/components/header-page/stories.tsx | 17 ++++ .../components/header}/header.props.ts | 0 .../components/header/page.mdx} | 14 +-- docs-ui/src/app/components/header/stories.tsx | 17 ++++ .../components/link}/link.props.ts | 0 .../link.mdx => app/components/link/page.mdx} | 18 ++-- docs-ui/src/app/components/link/stories.tsx | 17 ++++ .../components/menu}/menu.props.ts | 0 .../menu.mdx => app/components/menu/page.mdx} | 22 ++--- docs-ui/src/app/components/menu/stories.tsx | 31 +++++++ .../app/components/password-field/page.mdx | 65 ++++++++++++++ .../password-field}/password-field.props.ts | 0 .../app/components/password-field/stories.tsx | 13 +++ .../components/popover/page.mdx} | 16 ++-- .../components/popover}/popover.props.ts | 0 .../src/app/components/popover/stories.tsx | 7 ++ .../components/radio-group/page.mdx} | 16 ++-- .../radio-group}/radio-group.props.ts | 0 .../app/components/radio-group/stories.tsx | 19 +++++ .../components/search-field/page.mdx} | 12 +-- .../search-field}/search-field.props.ts | 0 .../app/components/search-field/stories.tsx | 15 ++++ .../components/select/page.mdx} | 22 ++--- .../components/select}/select.props.ts | 0 docs-ui/src/app/components/select/stories.tsx | 27 ++++++ .../components/skeleton/page.mdx} | 10 +-- .../components/skeleton}/skeleton.props.ts | 0 .../src/app/components/skeleton/stories.tsx | 8 ++ .../components/switch/page.mdx} | 8 +- docs-ui/src/app/components/switch/stories.tsx | 8 ++ .../components/switch}/switch.props.ts | 0 .../components/table/page.mdx} | 12 +-- docs-ui/src/app/components/table/stories.tsx | 21 +++++ .../components/table}/table.props.ts | 0 .../tabs.mdx => app/components/tabs/page.mdx} | 12 +-- docs-ui/src/app/components/tabs/stories.tsx | 17 ++++ .../components/tabs}/tabs.props.ts | 0 .../components/tag-group/page.mdx} | 16 ++-- .../src/app/components/tag-group/stories.tsx | 19 +++++ .../components/tag-group}/tag-group.props.ts | 0 .../components/text-field/page.mdx} | 10 +-- .../src/app/components/text-field/stories.tsx | 13 +++ .../text-field}/text-field.props.ts | 0 .../text.mdx => app/components/text/page.mdx} | 14 +-- docs-ui/src/app/components/text/stories.tsx | 17 ++++ .../components/text}/text.props.ts | 0 .../components/toggle-button-group/page.mdx} | 22 ++--- .../toggle-button-group/stories.tsx | 25 ++++++ .../toggle-button-group.props.ts | 0 .../components/toggle-button/page.mdx} | 18 ++-- .../app/components/toggle-button/stories.tsx | 21 +++++ .../toggle-button}/toggle-button.props.ts | 0 .../components/tooltip/page.mdx} | 6 +- .../src/app/components/tooltip/stories.tsx | 7 ++ .../components/tooltip}/tooltip.props.ts | 0 .../components/visually-hidden/page.mdx} | 8 +- .../components/visually-hidden/stories.tsx | 8 ++ .../visually-hidden}/visually-hidden.props.ts | 0 docs-ui/src/content/PasswordField.tsx | 8 -- docs-ui/src/content/password-field.mdx | 23 ----- docs-ui/src/snippets/stories-snippets.tsx | 85 ------------------- 100 files changed, 741 insertions(+), 339 deletions(-) delete mode 100644 docs-ui/src/app/components/[slug]/page.tsx rename docs-ui/src/{content => app/components/accordion}/accordion.props.ts (100%) rename docs-ui/src/{content/accordion.mdx => app/components/accordion/page.mdx} (84%) create mode 100644 docs-ui/src/app/components/accordion/stories.tsx rename docs-ui/src/{content => app/components/avatar}/avatar.props.ts (100%) rename docs-ui/src/{content/avatar.mdx => app/components/avatar/page.mdx} (81%) create mode 100644 docs-ui/src/app/components/avatar/stories.tsx rename docs-ui/src/{content => app/components/box}/box.props.ts (100%) rename docs-ui/src/{content/box.mdx => app/components/box/page.mdx} (90%) create mode 100644 docs-ui/src/app/components/box/stories.tsx rename docs-ui/src/{content => app/components/button-icon}/button-icon.props.ts (100%) rename docs-ui/src/{content/button-icon.mdx => app/components/button-icon/page.mdx} (81%) create mode 100644 docs-ui/src/app/components/button-icon/stories.tsx rename docs-ui/src/{content => app/components/button-link}/button-link.props.ts (100%) rename docs-ui/src/{content/button-link.mdx => app/components/button-link/page.mdx} (81%) create mode 100644 docs-ui/src/app/components/button-link/stories.tsx rename docs-ui/src/{content => app/components/button}/button.props.ts (100%) rename docs-ui/src/{content/button.mdx => app/components/button/page.mdx} (80%) create mode 100644 docs-ui/src/app/components/button/stories.tsx rename docs-ui/src/{content => app/components/card}/card.props.ts (100%) rename docs-ui/src/{content/card.mdx => app/components/card/page.mdx} (86%) create mode 100644 docs-ui/src/app/components/card/stories.tsx rename docs-ui/src/{content => app/components/checkbox}/checkbox.props.ts (100%) rename docs-ui/src/{content/checkbox.mdx => app/components/checkbox/page.mdx} (81%) create mode 100644 docs-ui/src/app/components/checkbox/stories.tsx rename docs-ui/src/{content => app/components/container}/container.props.ts (100%) rename docs-ui/src/{content/container.mdx => app/components/container/page.mdx} (87%) create mode 100644 docs-ui/src/app/components/container/stories.tsx rename docs-ui/src/{content => app/components/dialog}/dialog.props.ts (100%) rename docs-ui/src/{content/dialog.mdx => app/components/dialog/page.mdx} (88%) create mode 100644 docs-ui/src/app/components/dialog/stories.tsx rename docs-ui/src/{content => app/components/flex}/flex.props.ts (100%) rename docs-ui/src/{content/flex.mdx => app/components/flex/page.mdx} (90%) create mode 100644 docs-ui/src/app/components/flex/stories.tsx rename docs-ui/src/{content => app/components/grid}/grid.props.ts (100%) rename docs-ui/src/{content/grid.mdx => app/components/grid/page.mdx} (94%) create mode 100644 docs-ui/src/app/components/grid/stories.tsx rename docs-ui/src/{content => app/components/header-page}/header-page.props.ts (100%) rename docs-ui/src/{content/header-page.mdx => app/components/header-page/page.mdx} (81%) create mode 100644 docs-ui/src/app/components/header-page/stories.tsx rename docs-ui/src/{content => app/components/header}/header.props.ts (100%) rename docs-ui/src/{content/header.mdx => app/components/header/page.mdx} (79%) create mode 100644 docs-ui/src/app/components/header/stories.tsx rename docs-ui/src/{content => app/components/link}/link.props.ts (100%) rename docs-ui/src/{content/link.mdx => app/components/link/page.mdx} (83%) create mode 100644 docs-ui/src/app/components/link/stories.tsx rename docs-ui/src/{content => app/components/menu}/menu.props.ts (100%) rename docs-ui/src/{content/menu.mdx => app/components/menu/page.mdx} (89%) create mode 100644 docs-ui/src/app/components/menu/stories.tsx create mode 100644 docs-ui/src/app/components/password-field/page.mdx rename docs-ui/src/{content => app/components/password-field}/password-field.props.ts (100%) create mode 100644 docs-ui/src/app/components/password-field/stories.tsx rename docs-ui/src/{content/popover.mdx => app/components/popover/page.mdx} (82%) rename docs-ui/src/{content => app/components/popover}/popover.props.ts (100%) create mode 100644 docs-ui/src/app/components/popover/stories.tsx rename docs-ui/src/{content/radio-group.mdx => app/components/radio-group/page.mdx} (81%) rename docs-ui/src/{content => app/components/radio-group}/radio-group.props.ts (100%) create mode 100644 docs-ui/src/app/components/radio-group/stories.tsx rename docs-ui/src/{content/search-field.mdx => app/components/search-field/page.mdx} (80%) rename docs-ui/src/{content => app/components/search-field}/search-field.props.ts (100%) create mode 100644 docs-ui/src/app/components/search-field/stories.tsx rename docs-ui/src/{content/select.mdx => app/components/select/page.mdx} (80%) rename docs-ui/src/{content => app/components/select}/select.props.ts (100%) create mode 100644 docs-ui/src/app/components/select/stories.tsx rename docs-ui/src/{content/skeleton.mdx => app/components/skeleton/page.mdx} (82%) rename docs-ui/src/{content => app/components/skeleton}/skeleton.props.ts (100%) create mode 100644 docs-ui/src/app/components/skeleton/stories.tsx rename docs-ui/src/{content/switch.mdx => app/components/switch/page.mdx} (81%) create mode 100644 docs-ui/src/app/components/switch/stories.tsx rename docs-ui/src/{content => app/components/switch}/switch.props.ts (100%) rename docs-ui/src/{content/table.mdx => app/components/table/page.mdx} (91%) create mode 100644 docs-ui/src/app/components/table/stories.tsx rename docs-ui/src/{content => app/components/table}/table.props.ts (100%) rename docs-ui/src/{content/tabs.mdx => app/components/tabs/page.mdx} (84%) create mode 100644 docs-ui/src/app/components/tabs/stories.tsx rename docs-ui/src/{content => app/components/tabs}/tabs.props.ts (100%) rename docs-ui/src/{content/tag-group.mdx => app/components/tag-group/page.mdx} (80%) create mode 100644 docs-ui/src/app/components/tag-group/stories.tsx rename docs-ui/src/{content => app/components/tag-group}/tag-group.props.ts (100%) rename docs-ui/src/{content/text-field.mdx => app/components/text-field/page.mdx} (80%) create mode 100644 docs-ui/src/app/components/text-field/stories.tsx rename docs-ui/src/{content => app/components/text-field}/text-field.props.ts (100%) rename docs-ui/src/{content/text.mdx => app/components/text/page.mdx} (82%) create mode 100644 docs-ui/src/app/components/text/stories.tsx rename docs-ui/src/{content => app/components/text}/text.props.ts (100%) rename docs-ui/src/{content/toggle-button-group.mdx => app/components/toggle-button-group/page.mdx} (74%) create mode 100644 docs-ui/src/app/components/toggle-button-group/stories.tsx rename docs-ui/src/{content => app/components/toggle-button-group}/toggle-button-group.props.ts (100%) rename docs-ui/src/{content/toggle-button.mdx => app/components/toggle-button/page.mdx} (79%) create mode 100644 docs-ui/src/app/components/toggle-button/stories.tsx rename docs-ui/src/{content => app/components/toggle-button}/toggle-button.props.ts (100%) rename docs-ui/src/{content/tooltip.mdx => app/components/tooltip/page.mdx} (85%) create mode 100644 docs-ui/src/app/components/tooltip/stories.tsx rename docs-ui/src/{content => app/components/tooltip}/tooltip.props.ts (100%) rename docs-ui/src/{content/visually-hidden.mdx => app/components/visually-hidden/page.mdx} (82%) create mode 100644 docs-ui/src/app/components/visually-hidden/stories.tsx rename docs-ui/src/{content => app/components/visually-hidden}/visually-hidden.props.ts (100%) delete mode 100644 docs-ui/src/content/PasswordField.tsx delete mode 100644 docs-ui/src/content/password-field.mdx delete mode 100644 docs-ui/src/snippets/stories-snippets.tsx diff --git a/docs-ui/src/app/components/[slug]/page.tsx b/docs-ui/src/app/components/[slug]/page.tsx deleted file mode 100644 index 1422334471..0000000000 --- a/docs-ui/src/app/components/[slug]/page.tsx +++ /dev/null @@ -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 ; -} - -export function generateStaticParams() { - const list = [...components, ...layoutComponents]; - - return list.map(component => ({ - slug: component.slug, - })); -} - -export const dynamicParams = false; diff --git a/docs-ui/src/content/accordion.props.ts b/docs-ui/src/app/components/accordion/accordion.props.ts similarity index 100% rename from docs-ui/src/content/accordion.props.ts rename to docs-ui/src/app/components/accordion/accordion.props.ts diff --git a/docs-ui/src/content/accordion.mdx b/docs-ui/src/app/components/accordion/page.mdx similarity index 84% rename from docs-ui/src/content/accordion.mdx rename to docs-ui/src/app/components/accordion/page.mdx index fc4bad1f8e..d2332673ea 100644 --- a/docs-ui/src/content/accordion.mdx +++ b/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'; } + preview={} code={accordionUsageSnippet} /> @@ -72,7 +79,7 @@ Here's a view when using both title and subtitle props. align="center" py={4} height={240} - preview={} + preview={} 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={} + preview={} code={accordionCustomTriggerSnippet} /> @@ -96,7 +103,7 @@ Here's a view when the panel is expanded by default. align="center" py={4} height={280} - preview={} + preview={} 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={} + preview={} code={accordionGroupSingleOpenSnippet} /> @@ -120,7 +127,7 @@ Here's a view when multiple accordions can be open simultaneously. align="center" py={4} height={280} - preview={} + preview={} code={accordionGroupMultipleOpenSnippet} /> diff --git a/docs-ui/src/app/components/accordion/stories.tsx b/docs-ui/src/app/components/accordion/stories.tsx new file mode 100644 index 0000000000..3f871b840b --- /dev/null +++ b/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 = () => ; +export const WithSubtitle = () => ; +export const CustomTrigger = () => ; +export const DefaultExpanded = () => ; +export const GroupSingleOpen = () => ; +export const GroupMultipleOpen = () => ; diff --git a/docs-ui/src/content/avatar.props.ts b/docs-ui/src/app/components/avatar/avatar.props.ts similarity index 100% rename from docs-ui/src/content/avatar.props.ts rename to docs-ui/src/app/components/avatar/avatar.props.ts diff --git a/docs-ui/src/content/avatar.mdx b/docs-ui/src/app/components/avatar/page.mdx similarity index 81% rename from docs-ui/src/content/avatar.mdx rename to docs-ui/src/app/components/avatar/page.mdx index 047485c2cc..5ec0d78fdd 100644 --- a/docs-ui/src/content/avatar.mdx +++ b/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'; } + preview={} code={``} /> @@ -44,7 +44,7 @@ Avatar sizes can be set using the `size` prop. align="center" py={4} open - preview={} + preview={} 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={} + preview={} code={snippetFallback} /> @@ -67,7 +67,7 @@ Control how the avatar is announced to screen readers using the `purpose` prop. } + preview={} code={snippetPurpose} /> diff --git a/docs-ui/src/app/components/avatar/stories.tsx b/docs-ui/src/app/components/avatar/stories.tsx new file mode 100644 index 0000000000..e8e9f601b1 --- /dev/null +++ b/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 = () => ; +export const Sizes = () => ; +export const Fallback = () => ; +export const Purpose = () => ; diff --git a/docs-ui/src/content/box.props.ts b/docs-ui/src/app/components/box/box.props.ts similarity index 100% rename from docs-ui/src/content/box.props.ts rename to docs-ui/src/app/components/box/box.props.ts diff --git a/docs-ui/src/content/box.mdx b/docs-ui/src/app/components/box/page.mdx similarity index 90% rename from docs-ui/src/content/box.mdx rename to docs-ui/src/app/components/box/page.mdx index 66e99ec19a..f6e50b28d7 100644 --- a/docs-ui/src/content/box.mdx +++ b/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'; } + preview={} code={boxPreviewSnippet} align="center" /> diff --git a/docs-ui/src/app/components/box/stories.tsx b/docs-ui/src/app/components/box/stories.tsx new file mode 100644 index 0000000000..82afa5fdff --- /dev/null +++ b/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 = () => ; diff --git a/docs-ui/src/content/button-icon.props.ts b/docs-ui/src/app/components/button-icon/button-icon.props.ts similarity index 100% rename from docs-ui/src/content/button-icon.props.ts rename to docs-ui/src/app/components/button-icon/button-icon.props.ts diff --git a/docs-ui/src/content/button-icon.mdx b/docs-ui/src/app/components/button-icon/page.mdx similarity index 81% rename from docs-ui/src/content/button-icon.mdx rename to docs-ui/src/app/components/button-icon/page.mdx index b0595cc9bc..fc2d6eec9f 100644 --- a/docs-ui/src/content/button-icon.mdx +++ b/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'; } + preview={} code={buttonIconDefaultSnippet} /> @@ -48,7 +48,7 @@ Here's a view when buttons have different variants. align="center" py={4} open - preview={} + preview={} code={buttonIconVariantsSnippet} /> @@ -60,7 +60,7 @@ Here's a view when buttons have different sizes. align="center" py={4} open - preview={} + preview={} code={buttonIconSizesSnippet} /> @@ -72,7 +72,7 @@ Here's a view when buttons are disabled. align="center" py={4} open - preview={} + preview={} code={buttonIconDisabledSnippet} /> @@ -84,7 +84,7 @@ Here's a view when buttons are in a loading state. align="center" py={4} open - preview={} + preview={} code={buttonIconLoadingSnippet} /> diff --git a/docs-ui/src/app/components/button-icon/stories.tsx b/docs-ui/src/app/components/button-icon/stories.tsx new file mode 100644 index 0000000000..5d28fb28a6 --- /dev/null +++ b/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 = () => ; +export const Sizes = () => ; +export const Disabled = () => ; +export const Loading = () => ; diff --git a/docs-ui/src/content/button-link.props.ts b/docs-ui/src/app/components/button-link/button-link.props.ts similarity index 100% rename from docs-ui/src/content/button-link.props.ts rename to docs-ui/src/app/components/button-link/button-link.props.ts diff --git a/docs-ui/src/content/button-link.mdx b/docs-ui/src/app/components/button-link/page.mdx similarity index 81% rename from docs-ui/src/content/button-link.mdx rename to docs-ui/src/app/components/button-link/page.mdx index 4f3f376aee..074ea204ec 100644 --- a/docs-ui/src/content/button-link.mdx +++ b/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'; } + preview={} code={buttonLinkVariantsSnippet} /> @@ -46,7 +46,7 @@ Here's a view when buttons have different variants. align="center" py={4} open - preview={} + preview={} code={buttonLinkVariantsSnippet} /> @@ -58,7 +58,7 @@ Here's a view when buttons have different sizes. align="center" py={4} open - preview={} + preview={} code={buttonLinkSizesSnippet} /> @@ -70,7 +70,7 @@ Here's a view when buttons have icons. align="center" py={4} open - preview={} + preview={} code={buttonLinkIconsSnippet} /> @@ -82,7 +82,7 @@ Here's a view when buttons are disabled. align="center" py={4} open - preview={} + preview={} code={buttonLinkDisabledSnippet} /> diff --git a/docs-ui/src/app/components/button-link/stories.tsx b/docs-ui/src/app/components/button-link/stories.tsx new file mode 100644 index 0000000000..a865afe87c --- /dev/null +++ b/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 = () => ; +export const Sizes = () => ; +export const WithIcons = () => ; +export const Disabled = () => ; diff --git a/docs-ui/src/content/button.props.ts b/docs-ui/src/app/components/button/button.props.ts similarity index 100% rename from docs-ui/src/content/button.props.ts rename to docs-ui/src/app/components/button/button.props.ts diff --git a/docs-ui/src/content/button.mdx b/docs-ui/src/app/components/button/page.mdx similarity index 80% rename from docs-ui/src/content/button.mdx rename to docs-ui/src/app/components/button/page.mdx index d161c97edf..daead3ba92 100644 --- a/docs-ui/src/content/button.mdx +++ b/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'; } + preview={} code={buttonVariantsSnippet} /> @@ -48,7 +49,7 @@ Here's a view when buttons have different variants. align="center" py={4} open - preview={} + preview={} code={buttonVariantsSnippet} /> @@ -60,7 +61,7 @@ Here's a view when buttons have different sizes. align="center" py={4} open - preview={} + preview={} code={buttonSizesSnippet} /> @@ -72,7 +73,7 @@ Here's a view when buttons have icons. align="center" py={4} open - preview={} + preview={} code={buttonIconsSnippet} /> @@ -84,7 +85,7 @@ Here's a view when buttons are disabled. align="center" py={4} open - preview={} + preview={} code={buttonDisabledSnippet} /> @@ -96,7 +97,7 @@ Here's a view when buttons are in a loading state. align="center" py={4} open - preview={} + preview={} 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={} + preview={} code={buttonAsLinkSnippet} /> diff --git a/docs-ui/src/app/components/button/stories.tsx b/docs-ui/src/app/components/button/stories.tsx new file mode 100644 index 0000000000..b958eb8fdf --- /dev/null +++ b/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 = () => ; +export const Sizes = () => ; +export const WithIcons = () => ; +export const Disabled = () => ; +export const Loading = () => ; diff --git a/docs-ui/src/content/card.props.ts b/docs-ui/src/app/components/card/card.props.ts similarity index 100% rename from docs-ui/src/content/card.props.ts rename to docs-ui/src/app/components/card/card.props.ts diff --git a/docs-ui/src/content/card.mdx b/docs-ui/src/app/components/card/page.mdx similarity index 86% rename from docs-ui/src/content/card.mdx rename to docs-ui/src/app/components/card/page.mdx index c38a07e920..fd1ed233d9 100644 --- a/docs-ui/src/content/card.mdx +++ b/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'; } + preview={} code={cardDefaultSnippet} /> @@ -68,7 +68,7 @@ Here's a view when card has a long body. } + preview={} code={cardLongBodySnippet} open /> @@ -80,7 +80,7 @@ Here's a view when card has a list. } + preview={} code={cardListRowSnippet} open /> diff --git a/docs-ui/src/app/components/card/stories.tsx b/docs-ui/src/app/components/card/stories.tsx new file mode 100644 index 0000000000..d9c4b80ec4 --- /dev/null +++ b/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 = () => ; +export const WithLongBody = () => ; +export const WithListRow = () => ; diff --git a/docs-ui/src/content/checkbox.props.ts b/docs-ui/src/app/components/checkbox/checkbox.props.ts similarity index 100% rename from docs-ui/src/content/checkbox.props.ts rename to docs-ui/src/app/components/checkbox/checkbox.props.ts diff --git a/docs-ui/src/content/checkbox.mdx b/docs-ui/src/app/components/checkbox/page.mdx similarity index 81% rename from docs-ui/src/content/checkbox.mdx rename to docs-ui/src/app/components/checkbox/page.mdx index c574e8fed4..5f1735bc50 100644 --- a/docs-ui/src/content/checkbox.mdx +++ b/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'; } + preview={} code={checkboxDefaultSnippet} /> @@ -43,7 +43,7 @@ Here's a view when checkboxes have different variants. align="center" py={4} open - preview={} + preview={} code={checkboxVariantsSnippet} /> diff --git a/docs-ui/src/app/components/checkbox/stories.tsx b/docs-ui/src/app/components/checkbox/stories.tsx new file mode 100644 index 0000000000..55d75ed3a6 --- /dev/null +++ b/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 = () => ; +export const AllVariants = () => ; diff --git a/docs-ui/src/content/container.props.ts b/docs-ui/src/app/components/container/container.props.ts similarity index 100% rename from docs-ui/src/content/container.props.ts rename to docs-ui/src/app/components/container/container.props.ts diff --git a/docs-ui/src/content/container.mdx b/docs-ui/src/app/components/container/page.mdx similarity index 87% rename from docs-ui/src/content/container.mdx rename to docs-ui/src/app/components/container/page.mdx index 56c2d5d405..18c307b104 100644 --- a/docs-ui/src/content/container.mdx +++ b/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'; } + preview={} code={containerDefaultSnippet} /> diff --git a/docs-ui/src/app/components/container/stories.tsx b/docs-ui/src/app/components/container/stories.tsx new file mode 100644 index 0000000000..95f4097e12 --- /dev/null +++ b/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 = () => ; diff --git a/docs-ui/src/content/dialog.props.ts b/docs-ui/src/app/components/dialog/dialog.props.ts similarity index 100% rename from docs-ui/src/content/dialog.props.ts rename to docs-ui/src/app/components/dialog/dialog.props.ts diff --git a/docs-ui/src/content/dialog.mdx b/docs-ui/src/app/components/dialog/page.mdx similarity index 88% rename from docs-ui/src/content/dialog.mdx rename to docs-ui/src/app/components/dialog/page.mdx index e1e4ec436e..b80a3f4a69 100644 --- a/docs-ui/src/content/dialog.mdx +++ b/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'; } + preview={} code={dialogDefaultSnippet} /> @@ -82,7 +82,7 @@ Dialog with a fixed height body that scrolls when content overflows. } + preview={} code={dialogFixedWidthAndHeightSnippet} /> @@ -93,7 +93,7 @@ Dialog containing form elements for user input. } + preview={} code={dialogWithFormSnippet} /> diff --git a/docs-ui/src/app/components/dialog/stories.tsx b/docs-ui/src/app/components/dialog/stories.tsx new file mode 100644 index 0000000000..46e41fe742 --- /dev/null +++ b/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 = () => ; +export const PreviewFixedWidthAndHeight = () => ( + +); +export const PreviewWithForm = () => ; diff --git a/docs-ui/src/content/flex.props.ts b/docs-ui/src/app/components/flex/flex.props.ts similarity index 100% rename from docs-ui/src/content/flex.props.ts rename to docs-ui/src/app/components/flex/flex.props.ts diff --git a/docs-ui/src/content/flex.mdx b/docs-ui/src/app/components/flex/page.mdx similarity index 90% rename from docs-ui/src/content/flex.mdx rename to docs-ui/src/app/components/flex/page.mdx index 36284f1f0b..1083642f28 100644 --- a/docs-ui/src/content/flex.mdx +++ b/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'; } + preview={} code={flexDefaultSnippet} /> diff --git a/docs-ui/src/app/components/flex/stories.tsx b/docs-ui/src/app/components/flex/stories.tsx new file mode 100644 index 0000000000..1770374930 --- /dev/null +++ b/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 = () => ; diff --git a/docs-ui/src/content/grid.props.ts b/docs-ui/src/app/components/grid/grid.props.ts similarity index 100% rename from docs-ui/src/content/grid.props.ts rename to docs-ui/src/app/components/grid/grid.props.ts diff --git a/docs-ui/src/content/grid.mdx b/docs-ui/src/app/components/grid/page.mdx similarity index 94% rename from docs-ui/src/content/grid.mdx rename to docs-ui/src/app/components/grid/page.mdx index 5f179b9e14..bcf83f985e 100644 --- a/docs-ui/src/content/grid.mdx +++ b/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'; } + preview={} code={gridDefaultSnippet} /> diff --git a/docs-ui/src/app/components/grid/stories.tsx b/docs-ui/src/app/components/grid/stories.tsx new file mode 100644 index 0000000000..137f474fb6 --- /dev/null +++ b/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 = () => ; diff --git a/docs-ui/src/content/header-page.props.ts b/docs-ui/src/app/components/header-page/header-page.props.ts similarity index 100% rename from docs-ui/src/content/header-page.props.ts rename to docs-ui/src/app/components/header-page/header-page.props.ts diff --git a/docs-ui/src/content/header-page.mdx b/docs-ui/src/app/components/header-page/page.mdx similarity index 81% rename from docs-ui/src/content/header-page.mdx rename to docs-ui/src/app/components/header-page/page.mdx index 12ef2c32ee..459daac1f2 100644 --- a/docs-ui/src/content/header-page.mdx +++ b/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'; } + preview={} code={defaultSnippet} /> @@ -46,7 +46,7 @@ prop is an array of objects with a `label` and `href` property. By default we tr } + preview={} code={withBreadcrumbs} /> @@ -57,7 +57,7 @@ prop is an array of objects with a `label` and `href` property. } + preview={} code={withTabs} /> @@ -68,7 +68,7 @@ prop is a React node. } + preview={} code={withCustomActions} /> @@ -79,7 +79,7 @@ prop is an array of objects with a `label`, `value` and `onClick` property. } + preview={} code={withMenuItems} /> diff --git a/docs-ui/src/app/components/header-page/stories.tsx b/docs-ui/src/app/components/header-page/stories.tsx new file mode 100644 index 0000000000..fce9e9bf82 --- /dev/null +++ b/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 = () => ; +export const WithLongBreadcrumbs = () => ; +export const WithTabs = () => ; +export const WithCustomActions = () => ; +export const WithMenuItems = () => ; diff --git a/docs-ui/src/content/header.props.ts b/docs-ui/src/app/components/header/header.props.ts similarity index 100% rename from docs-ui/src/content/header.props.ts rename to docs-ui/src/app/components/header/header.props.ts diff --git a/docs-ui/src/content/header.mdx b/docs-ui/src/app/components/header/page.mdx similarity index 79% rename from docs-ui/src/content/header.mdx rename to docs-ui/src/app/components/header/page.mdx index eb505d7a62..f1ffdf8b33 100644 --- a/docs-ui/src/content/header.mdx +++ b/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'; } + preview={} code={defaultSnippet} /> @@ -44,7 +44,7 @@ A simple example of how to use the Header component. } + preview={} code={simple} open /> @@ -56,7 +56,7 @@ under the hood and will be active when you are on the corresponding page. } +preview={} 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). } + preview={} 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. } + preview={} code={withHeaderPage} open /> diff --git a/docs-ui/src/app/components/header/stories.tsx b/docs-ui/src/app/components/header/stories.tsx new file mode 100644 index 0000000000..526063e0df --- /dev/null +++ b/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 = () => ( + +); +export const WithAllOptions = () => ; +export const WithBreadcrumbs = () => ; +export const WithHeaderPage = () => ; diff --git a/docs-ui/src/content/link.props.ts b/docs-ui/src/app/components/link/link.props.ts similarity index 100% rename from docs-ui/src/content/link.props.ts rename to docs-ui/src/app/components/link/link.props.ts diff --git a/docs-ui/src/content/link.mdx b/docs-ui/src/app/components/link/page.mdx similarity index 83% rename from docs-ui/src/content/link.mdx rename to docs-ui/src/app/components/link/page.mdx index 486c06b298..e71c43d73b 100644 --- a/docs-ui/src/content/link.mdx +++ b/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'; } + preview={} code={linkDefaultSnippet} /> @@ -60,7 +56,7 @@ Here's a view when links have different variants. align="center" py={4} open - preview={} + preview={} code={linkVariantsSnippet} /> @@ -72,7 +68,7 @@ Here's a view when links have different weights. align="center" py={4} open - preview={} + preview={} code={linkWeightsSnippet} /> @@ -84,7 +80,7 @@ Here's a view when links have different colors. align="center" py={4} open - preview={} + preview={} code={linkColorsSnippet} /> @@ -94,7 +90,7 @@ The `Link` component has a `truncate` prop that can be used to truncate the text } + preview={} code={linkTruncateSnippet} /> diff --git a/docs-ui/src/app/components/link/stories.tsx b/docs-ui/src/app/components/link/stories.tsx new file mode 100644 index 0000000000..16d4906a24 --- /dev/null +++ b/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 = () => ; +export const AllVariants = () => ; +export const AllWeights = () => ; +export const AllColors = () => ; +export const Truncate = () => ; diff --git a/docs-ui/src/content/menu.props.ts b/docs-ui/src/app/components/menu/menu.props.ts similarity index 100% rename from docs-ui/src/content/menu.props.ts rename to docs-ui/src/app/components/menu/menu.props.ts diff --git a/docs-ui/src/content/menu.mdx b/docs-ui/src/app/components/menu/page.mdx similarity index 89% rename from docs-ui/src/content/menu.mdx rename to docs-ui/src/app/components/menu/page.mdx index 9ede0885e2..f6327d9d11 100644 --- a/docs-ui/src/content/menu.mdx +++ b/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'; } + 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={} + preview={} 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={} + preview={} code={icons} /> @@ -167,7 +167,7 @@ to work for both internal and external links. align="center" py={4} open - preview={} + preview={} 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={} + preview={} 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={} + preview={} 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={} + preview={} 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={} + preview={} code={autocompleteListbox} /> @@ -228,7 +228,7 @@ allow multiple selection. align="center" py={4} open - preview={} + preview={} code={autocompleteListboxMultiple} /> diff --git a/docs-ui/src/app/components/menu/stories.tsx b/docs-ui/src/app/components/menu/stories.tsx new file mode 100644 index 0000000000..3e4f445ec2 --- /dev/null +++ b/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 = () => ; +export const PreviewSubmenu = () => ; +export const PreviewIcons = () => ; +export const PreviewLinks = () => ; +export const PreviewSections = () => ; +export const PreviewSeparators = () => ; +export const PreviewAutocompleteMenu = () => ( + +); +export const PreviewAutocompleteListbox = () => ( + +); +export const PreviewAutocompleteListboxMultiple = () => ( + +); diff --git a/docs-ui/src/app/components/password-field/page.mdx b/docs-ui/src/app/components/password-field/page.mdx new file mode 100644 index 0000000000..80f2774042 --- /dev/null +++ b/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'; + + + +} + code={passwordFieldDefaultSnippet} +/> + +## Usage + + + +## API reference + + + +## Examples + +### Sizes + +We support two different sizes: `small`, `medium`. + +} + code={passwordFieldSizesSnippet} +/> + +### With description + +Here's a simple PasswordField with a description. + +} + code={passwordFieldDescriptionSnippet} +/> + + + + diff --git a/docs-ui/src/content/password-field.props.ts b/docs-ui/src/app/components/password-field/password-field.props.ts similarity index 100% rename from docs-ui/src/content/password-field.props.ts rename to docs-ui/src/app/components/password-field/password-field.props.ts diff --git a/docs-ui/src/app/components/password-field/stories.tsx b/docs-ui/src/app/components/password-field/stories.tsx new file mode 100644 index 0000000000..407c716fb1 --- /dev/null +++ b/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 = () => ; +export const Sizes = () => ; +export const WithDescription = () => ; diff --git a/docs-ui/src/content/popover.mdx b/docs-ui/src/app/components/popover/page.mdx similarity index 82% rename from docs-ui/src/content/popover.mdx rename to docs-ui/src/app/components/popover/page.mdx index ca3f728b01..8e9a948c71 100644 --- a/docs-ui/src/content/popover.mdx +++ b/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'; } + preview={} code={popoverDefaultSnippet} /> @@ -49,7 +49,7 @@ Popover supports multiple placement options to position the content relative to } + preview={} code={popoverPlacementsSnippet} /> @@ -60,7 +60,7 @@ You can hide the arrow by setting the `hideArrow` prop. } + preview={} code={popoverNoArrowSnippet} /> @@ -71,7 +71,7 @@ Popovers can contain complex content including buttons, forms, and other interac } + preview={} code={popoverRichContentSnippet} /> @@ -82,7 +82,7 @@ Non-modal popovers allow interaction with other elements on the page while the p } + preview={} code={popoverNonModalSnippet} /> @@ -93,7 +93,7 @@ Popovers automatically handle scrolling when content exceeds the available viewp } + preview={} code={popoverDefaultSnippet} /> diff --git a/docs-ui/src/content/popover.props.ts b/docs-ui/src/app/components/popover/popover.props.ts similarity index 100% rename from docs-ui/src/content/popover.props.ts rename to docs-ui/src/app/components/popover/popover.props.ts diff --git a/docs-ui/src/app/components/popover/stories.tsx b/docs-ui/src/app/components/popover/stories.tsx new file mode 100644 index 0000000000..5a01027a67 --- /dev/null +++ b/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 = () => ; diff --git a/docs-ui/src/content/radio-group.mdx b/docs-ui/src/app/components/radio-group/page.mdx similarity index 81% rename from docs-ui/src/content/radio-group.mdx rename to docs-ui/src/app/components/radio-group/page.mdx index ba9352c026..de8379574f 100644 --- a/docs-ui/src/content/radio-group.mdx +++ b/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'; } + preview={} code={radioGroupDefaultSnippet} /> @@ -48,7 +48,7 @@ Here's a simple TextField with a description. align="center" py={4} open - preview={} + preview={} 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={} + preview={} 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={} + preview={} code={radioGroupDisabledSingleSnippet} /> @@ -84,7 +84,7 @@ Here's an example of a radio group with errors. align="center" py={4} open - preview={} + preview={} 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={} + preview={} code={radioGroupReadOnlySnippet} /> diff --git a/docs-ui/src/content/radio-group.props.ts b/docs-ui/src/app/components/radio-group/radio-group.props.ts similarity index 100% rename from docs-ui/src/content/radio-group.props.ts rename to docs-ui/src/app/components/radio-group/radio-group.props.ts diff --git a/docs-ui/src/app/components/radio-group/stories.tsx b/docs-ui/src/app/components/radio-group/stories.tsx new file mode 100644 index 0000000000..23853d3bcd --- /dev/null +++ b/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 = () => ; +export const Horizontal = () => ; +export const Disabled = () => ; +export const DisabledSingle = () => ; +export const Validation = () => ; +export const ReadOnly = () => ; diff --git a/docs-ui/src/content/search-field.mdx b/docs-ui/src/app/components/search-field/page.mdx similarity index 80% rename from docs-ui/src/content/search-field.mdx rename to docs-ui/src/app/components/search-field/page.mdx index 6b33feea42..9be0dc36af 100644 --- a/docs-ui/src/content/search-field.mdx +++ b/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'; } + preview={} code={searchFieldDefaultSnippet} /> @@ -45,7 +45,7 @@ We support two different sizes: `small`, `medium`. align="center" py={4} open - preview={} + preview={} code={searchFieldSizesSnippet} /> @@ -57,7 +57,7 @@ Here's a simple SearchField with a description. align="center" py={4} open - preview={} + preview={} code={searchFieldDescriptionSnippet} /> @@ -69,7 +69,7 @@ You can make the SearchField collapsible by setting the `startCollapsed` prop to align="center" py={4} open - preview={} + preview={} code={searchFieldCollapsibleSnippet} /> diff --git a/docs-ui/src/content/search-field.props.ts b/docs-ui/src/app/components/search-field/search-field.props.ts similarity index 100% rename from docs-ui/src/content/search-field.props.ts rename to docs-ui/src/app/components/search-field/search-field.props.ts diff --git a/docs-ui/src/app/components/search-field/stories.tsx b/docs-ui/src/app/components/search-field/stories.tsx new file mode 100644 index 0000000000..9aeec97ab3 --- /dev/null +++ b/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 = () => ; +export const Sizes = () => ; +export const WithDescription = () => ; +export const StartCollapsed = () => ; diff --git a/docs-ui/src/content/select.mdx b/docs-ui/src/app/components/select/page.mdx similarity index 80% rename from docs-ui/src/content/select.mdx rename to docs-ui/src/app/components/select/page.mdx index 757a79effe..66d632b521 100644 --- a/docs-ui/src/content/select.mdx +++ b/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'; } + preview={} code={selectDefaultSnippet} /> @@ -51,7 +51,7 @@ Select component with label and description. align="center" py={4} open - preview={} + preview={} code={selectDescriptionSnippet} /> @@ -63,7 +63,7 @@ Here's a view when the selects have different sizes. align="center" py={4} open - preview={} + preview={} code={selectSizesSnippet} /> @@ -76,7 +76,7 @@ Here's a view when the select has an icon. align="center" py={4} open -preview={} +preview={} code={selectIconSnippet} /> @@ -88,7 +88,7 @@ Here's a view when the select is disabled. align="center" py={4} open - preview={} + preview={} code={selectDisabledSnippet} /> @@ -100,7 +100,7 @@ You can disable specific options within the Select component using `disabledKeys align="center" py={4} open - preview={} + preview={} code={selectDisabledOptionsSnippet} /> @@ -112,7 +112,7 @@ Here's a view when the select has searchable filtering. align="center" py={4} open - preview={} + preview={} code={selectSearchableSnippet} /> @@ -124,7 +124,7 @@ Here's a view when the select allows multiple selections. align="center" py={4} open - preview={} + preview={} code={selectMultipleSnippet} /> @@ -136,7 +136,7 @@ Here's a view when the select combines search and multiple selection. align="center" py={4} open - preview={} + preview={} code={selectSearchableMultipleSnippet} /> diff --git a/docs-ui/src/content/select.props.ts b/docs-ui/src/app/components/select/select.props.ts similarity index 100% rename from docs-ui/src/content/select.props.ts rename to docs-ui/src/app/components/select/select.props.ts diff --git a/docs-ui/src/app/components/select/stories.tsx b/docs-ui/src/app/components/select/stories.tsx new file mode 100644 index 0000000000..149a6d2ae1 --- /dev/null +++ b/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 = () => ; +export const WithLabelAndDescription = () => ( + +); +export const Sizes = () => ; +export const WithIcon = () => ; +export const Disabled = () => ; +export const DisabledOption = () => ; +export const Searchable = () => ; +export const MultipleSelection = () => ; +export const SearchableMultiple = () => ; diff --git a/docs-ui/src/content/skeleton.mdx b/docs-ui/src/app/components/skeleton/page.mdx similarity index 82% rename from docs-ui/src/content/skeleton.mdx rename to docs-ui/src/app/components/skeleton/page.mdx index 07cd4b3332..a32672e352 100644 --- a/docs-ui/src/content/skeleton.mdx +++ b/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'; } + preview={} code={skeletonDefaultSnippet} /> @@ -43,7 +43,7 @@ You can use a mix of different sizes to create a more complex skeleton. } + preview={} code={skeletonDemo1Snippet} open /> @@ -55,7 +55,7 @@ You can use a mix of different sizes to create a more complex skeleton. } + preview={} code={skeletonDemo2Snippet} open /> diff --git a/docs-ui/src/content/skeleton.props.ts b/docs-ui/src/app/components/skeleton/skeleton.props.ts similarity index 100% rename from docs-ui/src/content/skeleton.props.ts rename to docs-ui/src/app/components/skeleton/skeleton.props.ts diff --git a/docs-ui/src/app/components/skeleton/stories.tsx b/docs-ui/src/app/components/skeleton/stories.tsx new file mode 100644 index 0000000000..c699cea620 --- /dev/null +++ b/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 = () => ; +export const Demo2 = () => ; diff --git a/docs-ui/src/content/switch.mdx b/docs-ui/src/app/components/switch/page.mdx similarity index 81% rename from docs-ui/src/content/switch.mdx rename to docs-ui/src/app/components/switch/page.mdx index 965cc7832b..e721973a50 100644 --- a/docs-ui/src/content/switch.mdx +++ b/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'; } + preview={} code={``} /> @@ -38,7 +38,7 @@ A switch can be disabled using the `isDisabled` prop. align="center" py={4} open - preview={} + preview={} code={``} /> diff --git a/docs-ui/src/app/components/switch/stories.tsx b/docs-ui/src/app/components/switch/stories.tsx new file mode 100644 index 0000000000..1a8a56a051 --- /dev/null +++ b/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 = () => ; +export const Disabled = () => ; diff --git a/docs-ui/src/content/switch.props.ts b/docs-ui/src/app/components/switch/switch.props.ts similarity index 100% rename from docs-ui/src/content/switch.props.ts rename to docs-ui/src/app/components/switch/switch.props.ts diff --git a/docs-ui/src/content/table.mdx b/docs-ui/src/app/components/table/page.mdx similarity index 91% rename from docs-ui/src/content/table.mdx rename to docs-ui/src/app/components/table/page.mdx index 00b7290532..db87494f21 100644 --- a/docs-ui/src/content/table.mdx +++ b/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'; } + preview={} 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. } + preview={} 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. } + preview={} 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. } + preview={} code={tableSelectionActionsSnippet} /> diff --git a/docs-ui/src/app/components/table/stories.tsx b/docs-ui/src/app/components/table/stories.tsx new file mode 100644 index 0000000000..2627694d30 --- /dev/null +++ b/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 = () => ; +export const SelectionModePlayground = () => ( + +); +export const SelectionBehaviorPlayground = () => ( + +); +export const SelectionToggleWithActions = () => ( + +); diff --git a/docs-ui/src/content/table.props.ts b/docs-ui/src/app/components/table/table.props.ts similarity index 100% rename from docs-ui/src/content/table.props.ts rename to docs-ui/src/app/components/table/table.props.ts diff --git a/docs-ui/src/content/tabs.mdx b/docs-ui/src/app/components/tabs/page.mdx similarity index 84% rename from docs-ui/src/content/tabs.mdx rename to docs-ui/src/app/components/tabs/page.mdx index 1fc7448eba..0f3ab6bfd4 100644 --- a/docs-ui/src/content/tabs.mdx +++ b/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'; } + preview={} code={tabsDefaultSnippet} /> @@ -53,7 +53,7 @@ To connect the tabs with the panels, you need to use the `id` prop on the tab an } + preview={} 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 } + preview={} code={tabsWithLinksSnippet} open /> @@ -75,7 +75,7 @@ You can use the `matchStrategy` prop on the tab to control how the tab is matche } + preview={} code={tabsWithDeeplyNestedRoutesSnippet} open /> diff --git a/docs-ui/src/app/components/tabs/stories.tsx b/docs-ui/src/app/components/tabs/stories.tsx new file mode 100644 index 0000000000..ee1704a45e --- /dev/null +++ b/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 = () => ; +export const WithTabPanels = () => ; +export const WithMockedURLTab2 = () => ; +export const PrefixMatchingDeepNesting = () => ( + +); diff --git a/docs-ui/src/content/tabs.props.ts b/docs-ui/src/app/components/tabs/tabs.props.ts similarity index 100% rename from docs-ui/src/content/tabs.props.ts rename to docs-ui/src/app/components/tabs/tabs.props.ts diff --git a/docs-ui/src/content/tag-group.mdx b/docs-ui/src/app/components/tag-group/page.mdx similarity index 80% rename from docs-ui/src/content/tag-group.mdx rename to docs-ui/src/app/components/tag-group/page.mdx index 88e60b31f5..a10695727d 100644 --- a/docs-ui/src/content/tag-group.mdx +++ b/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'; } + preview={} code={preview} /> @@ -58,7 +58,7 @@ A tag can be a link by passing a `href` prop. align="center" py={4} open - preview={} + preview={} code={withLink} /> @@ -70,7 +70,7 @@ A tag can have an icon by passing a `icon` prop. align="center" py={4} open - preview={} + preview={} 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={} + preview={} code={sizes} /> @@ -94,7 +94,7 @@ A tag can be removed by passing a `onRemove` prop. align="center" py={4} open - preview={} + preview={} code={removingTags} /> @@ -106,7 +106,7 @@ A switch can be disabled using the `isDisabled` prop. align="center" py={4} open - preview={} + preview={} code={disabled} /> diff --git a/docs-ui/src/app/components/tag-group/stories.tsx b/docs-ui/src/app/components/tag-group/stories.tsx new file mode 100644 index 0000000000..4fb495df08 --- /dev/null +++ b/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 = () => ; +export const WithLink = () => ; +export const WithIcon = () => ; +export const Sizes = () => ; +export const RemovingTags = () => ; +export const Disabled = () => ; diff --git a/docs-ui/src/content/tag-group.props.ts b/docs-ui/src/app/components/tag-group/tag-group.props.ts similarity index 100% rename from docs-ui/src/content/tag-group.props.ts rename to docs-ui/src/app/components/tag-group/tag-group.props.ts diff --git a/docs-ui/src/content/text-field.mdx b/docs-ui/src/app/components/text-field/page.mdx similarity index 80% rename from docs-ui/src/content/text-field.mdx rename to docs-ui/src/app/components/text-field/page.mdx index 9f14a82975..1ab0857787 100644 --- a/docs-ui/src/content/text-field.mdx +++ b/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'; } + preview={} code={textFieldDefaultSnippet} /> @@ -44,7 +44,7 @@ We support two different sizes: `small`, `medium`. align="center" py={4} open - preview={} + preview={} code={textFieldSizesSnippet} /> @@ -56,7 +56,7 @@ Here's a simple TextField with a description. align="center" py={4} open - preview={} + preview={} code={textFieldDescriptionSnippet} /> diff --git a/docs-ui/src/app/components/text-field/stories.tsx b/docs-ui/src/app/components/text-field/stories.tsx new file mode 100644 index 0000000000..9b6afd6c80 --- /dev/null +++ b/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 = () => ; +export const Sizes = () => ; +export const WithDescription = () => ; diff --git a/docs-ui/src/content/text-field.props.ts b/docs-ui/src/app/components/text-field/text-field.props.ts similarity index 100% rename from docs-ui/src/content/text-field.props.ts rename to docs-ui/src/app/components/text-field/text-field.props.ts diff --git a/docs-ui/src/content/text.mdx b/docs-ui/src/app/components/text/page.mdx similarity index 82% rename from docs-ui/src/content/text.mdx rename to docs-ui/src/app/components/text/page.mdx index c987b8e5f7..2f72087b05 100644 --- a/docs-ui/src/content/text.mdx +++ b/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'; } + preview={} code={textDefaultSnippet} /> @@ -45,7 +45,7 @@ appearance of the text. } + preview={} code={textVariantsSnippet} /> @@ -56,7 +56,7 @@ appearance of the text. } + preview={} code={textWeightsSnippet} /> @@ -67,7 +67,7 @@ appearance of the text. } + preview={} code={textColorsSnippet} /> @@ -77,7 +77,7 @@ The `Text` component has a `truncate` prop that can be used to truncate the text } + preview={} code={textTruncateSnippet} /> diff --git a/docs-ui/src/app/components/text/stories.tsx b/docs-ui/src/app/components/text/stories.tsx new file mode 100644 index 0000000000..946734151a --- /dev/null +++ b/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 = () => ; +export const AllVariants = () => ; +export const AllWeights = () => ; +export const AllColors = () => ; +export const Truncate = () => ; diff --git a/docs-ui/src/content/text.props.ts b/docs-ui/src/app/components/text/text.props.ts similarity index 100% rename from docs-ui/src/content/text.props.ts rename to docs-ui/src/app/components/text/text.props.ts diff --git a/docs-ui/src/content/toggle-button-group.mdx b/docs-ui/src/app/components/toggle-button-group/page.mdx similarity index 74% rename from docs-ui/src/content/toggle-button-group.mdx rename to docs-ui/src/app/components/toggle-button-group/page.mdx index 19034f0ac5..16d5d14cc6 100644 --- a/docs-ui/src/content/toggle-button-group.mdx +++ b/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'; } + preview={} code={toggleButtonGroupSingleSnippet} /> @@ -47,7 +47,7 @@ import { ToggleButtonGroupDefinition } from '../utils/definitions'; align="center" py={4} open - preview={} + preview={} code={toggleButtonGroupSurfacesSnippet} /> @@ -57,7 +57,7 @@ import { ToggleButtonGroupDefinition } from '../utils/definitions'; align="center" py={4} open - preview={} + preview={} code={toggleButtonGroupSingleSnippet} /> @@ -67,7 +67,7 @@ import { ToggleButtonGroupDefinition } from '../utils/definitions'; align="center" py={4} open - preview={} + preview={} code={toggleButtonGroupMultipleSnippet} /> @@ -77,7 +77,7 @@ import { ToggleButtonGroupDefinition } from '../utils/definitions'; align="center" py={4} open - preview={} + preview={} code={toggleButtonGroupIconsSnippet} /> @@ -87,7 +87,7 @@ import { ToggleButtonGroupDefinition } from '../utils/definitions'; align="center" py={4} open - preview={} + preview={} code={toggleButtonGroupIconsOnlySnippet} /> @@ -97,7 +97,7 @@ import { ToggleButtonGroupDefinition } from '../utils/definitions'; align="center" py={4} open - preview={} + preview={} code={toggleButtonGroupDisallowEmptySnippet} /> @@ -107,7 +107,7 @@ import { ToggleButtonGroupDefinition } from '../utils/definitions'; align="center" py={4} open - preview={} + preview={} code={toggleButtonGroupVerticalSnippet} /> @@ -117,7 +117,7 @@ import { ToggleButtonGroupDefinition } from '../utils/definitions'; align="center" py={4} open - preview={} + preview={} code={toggleButtonGroupDisabledSnippet} /> diff --git a/docs-ui/src/app/components/toggle-button-group/stories.tsx b/docs-ui/src/app/components/toggle-button-group/stories.tsx new file mode 100644 index 0000000000..8d75c021b5 --- /dev/null +++ b/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 = () => ; +export const Surfaces = () => ; +export const MultipleSelection = () => ; +export const WithIcons = () => ; +export const IconsOnly = () => ; +export const DisallowEmptySelection = () => ( + +); +export const Orientation = () => ; +export const DisabledGroup = () => ; diff --git a/docs-ui/src/content/toggle-button-group.props.ts b/docs-ui/src/app/components/toggle-button-group/toggle-button-group.props.ts similarity index 100% rename from docs-ui/src/content/toggle-button-group.props.ts rename to docs-ui/src/app/components/toggle-button-group/toggle-button-group.props.ts diff --git a/docs-ui/src/content/toggle-button.mdx b/docs-ui/src/app/components/toggle-button/page.mdx similarity index 79% rename from docs-ui/src/content/toggle-button.mdx rename to docs-ui/src/app/components/toggle-button/page.mdx index 78750ec365..45dea83828 100644 --- a/docs-ui/src/content/toggle-button.mdx +++ b/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'; } + preview={} code={toggleButtonUsageSnippet} /> @@ -45,7 +45,7 @@ import { ToggleButtonDefinition } from '../utils/definitions'; align="center" py={4} open - preview={} + preview={} code={toggleButtonSurfacesSnippet} /> @@ -55,7 +55,7 @@ import { ToggleButtonDefinition } from '../utils/definitions'; align="center" py={4} open - preview={} + preview={} code={toggleButtonSizesSnippet} /> @@ -65,7 +65,7 @@ import { ToggleButtonDefinition } from '../utils/definitions'; align="center" py={4} open - preview={} + preview={} code={toggleButtonIconsSnippet} /> @@ -75,7 +75,7 @@ import { ToggleButtonDefinition } from '../utils/definitions'; align="center" py={4} open - preview={} + preview={} code={toggleButtonDisabledSnippet} /> @@ -85,7 +85,7 @@ import { ToggleButtonDefinition } from '../utils/definitions'; align="center" py={4} open - preview={} + preview={} 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={} + preview={} code={toggleButtonFunctionChildrenSnippet} /> diff --git a/docs-ui/src/app/components/toggle-button/stories.tsx b/docs-ui/src/app/components/toggle-button/stories.tsx new file mode 100644 index 0000000000..ce210dc6ab --- /dev/null +++ b/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 = () => ; +export const Surfaces = () => ; +export const Sizes = () => ; +export const WithIcons = () => ; +export const Disabled = () => ; +export const Controlled = () => ; +export const DynamicContent = () => ; diff --git a/docs-ui/src/content/toggle-button.props.ts b/docs-ui/src/app/components/toggle-button/toggle-button.props.ts similarity index 100% rename from docs-ui/src/content/toggle-button.props.ts rename to docs-ui/src/app/components/toggle-button/toggle-button.props.ts diff --git a/docs-ui/src/content/tooltip.mdx b/docs-ui/src/app/components/tooltip/page.mdx similarity index 85% rename from docs-ui/src/content/tooltip.mdx rename to docs-ui/src/app/components/tooltip/page.mdx index 8ebf6539d6..c62ece88ec 100644 --- a/docs-ui/src/content/tooltip.mdx +++ b/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'; } + preview={} code={tooltipDefaultSnippet} align="center" /> diff --git a/docs-ui/src/app/components/tooltip/stories.tsx b/docs-ui/src/app/components/tooltip/stories.tsx new file mode 100644 index 0000000000..101131db43 --- /dev/null +++ b/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 = () => ; diff --git a/docs-ui/src/content/tooltip.props.ts b/docs-ui/src/app/components/tooltip/tooltip.props.ts similarity index 100% rename from docs-ui/src/content/tooltip.props.ts rename to docs-ui/src/app/components/tooltip/tooltip.props.ts diff --git a/docs-ui/src/content/visually-hidden.mdx b/docs-ui/src/app/components/visually-hidden/page.mdx similarity index 82% rename from docs-ui/src/content/visually-hidden.mdx rename to docs-ui/src/app/components/visually-hidden/page.mdx index 72ffc7a1d4..98591e502c 100644 --- a/docs-ui/src/content/visually-hidden.mdx +++ b/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'; } + preview={} code={visuallyHiddenDefaultSnippet} /> @@ -42,7 +42,7 @@ Here's an example of providing screen reader context for a list of links in a fo } + preview={} code={visuallyHiddenExampleUsageSnippet} open /> diff --git a/docs-ui/src/app/components/visually-hidden/stories.tsx b/docs-ui/src/app/components/visually-hidden/stories.tsx new file mode 100644 index 0000000000..2edefe0f94 --- /dev/null +++ b/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 = () => ; +export const ExampleUsage = () => ; diff --git a/docs-ui/src/content/visually-hidden.props.ts b/docs-ui/src/app/components/visually-hidden/visually-hidden.props.ts similarity index 100% rename from docs-ui/src/content/visually-hidden.props.ts rename to docs-ui/src/app/components/visually-hidden/visually-hidden.props.ts diff --git a/docs-ui/src/content/PasswordField.tsx b/docs-ui/src/content/PasswordField.tsx deleted file mode 100644 index 953ec3515e..0000000000 --- a/docs-ui/src/content/PasswordField.tsx +++ /dev/null @@ -1,8 +0,0 @@ -'use client'; - -import * as stories from '../../../packages/ui/src/components/PasswordField/PasswordField.stories'; - -export const Default = () => { - const { CustomField } = stories; - return ; -}; diff --git a/docs-ui/src/content/password-field.mdx b/docs-ui/src/content/password-field.mdx deleted file mode 100644 index 2b6d3c1ca6..0000000000 --- a/docs-ui/src/content/password-field.mdx +++ /dev/null @@ -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'; - - - - diff --git a/docs-ui/src/snippets/stories-snippets.tsx b/docs-ui/src/snippets/stories-snippets.tsx deleted file mode 100644 index 9297844baa..0000000000 --- a/docs-ui/src/snippets/stories-snippets.tsx +++ /dev/null @@ -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 ? : 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, -); From c29416593ecdb100c41ed8b3184ea2c4732eb2dd Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Thu, 15 Jan 2026 17:01:49 +0100 Subject: [PATCH 3/6] Migrate all components to their new format Signed-off-by: Charles de Dreuille --- .../components/accordion/accordion.props.ts | 119 ------ .../app/components/accordion/components.tsx | 130 ++++++ docs-ui/src/app/components/accordion/page.mdx | 41 +- .../components/accordion/props-definition.ts | 59 +++ .../src/app/components/accordion/snippets.ts | 68 ++++ .../src/app/components/accordion/stories.tsx | 19 - .../src/app/components/avatar/avatar.props.ts | 89 ----- .../src/app/components/avatar/components.tsx | 100 +++++ docs-ui/src/app/components/avatar/page.mdx | 30 +- .../app/components/avatar/props-definition.ts | 28 ++ docs-ui/src/app/components/avatar/snippets.ts | 52 +++ docs-ui/src/app/components/avatar/stories.tsx | 15 - docs-ui/src/app/components/box/components.tsx | 34 ++ docs-ui/src/app/components/box/page.mdx | 15 +- .../box/{box.props.ts => props-definition.ts} | 16 - docs-ui/src/app/components/box/snippets.ts | 21 + docs-ui/src/app/components/box/stories.tsx | 7 - .../button-icon/button-icon.props.ts | 62 --- .../app/components/button-icon/components.tsx | 68 ++++ .../src/app/components/button-icon/page.mdx | 38 +- .../button-icon/props-definition.ts | 31 ++ .../app/components/button-icon/snippets.ts | 22 ++ .../app/components/button-icon/stories.tsx | 15 - .../button-link/button-link.props.ts | 73 ---- .../app/components/button-link/components.tsx | 122 ++++++ .../src/app/components/button-link/page.mdx | 35 +- .../button-link/props-definition.ts | 32 ++ .../app/components/button-link/snippets.ts | 68 ++++ .../app/components/button-link/stories.tsx | 15 - .../src/app/components/button/button.props.ts | 77 ---- .../src/app/components/button/components.tsx | 78 ++++ docs-ui/src/app/components/button/page.mdx | 57 ++- .../app/components/button/props-definition.ts | 30 ++ docs-ui/src/app/components/button/snippets.ts | 54 +++ docs-ui/src/app/components/button/stories.tsx | 17 - docs-ui/src/app/components/card/card.props.ts | 83 ---- .../src/app/components/card/components.tsx | 66 ++++ docs-ui/src/app/components/card/page.mdx | 44 ++- .../app/components/card/props-definition.ts | 30 ++ docs-ui/src/app/components/card/snippets.ts | 41 ++ docs-ui/src/app/components/card/stories.tsx | 13 - .../app/components/checkbox/components.tsx | 21 + docs-ui/src/app/components/checkbox/page.mdx | 19 +- ...{checkbox.props.ts => props-definition.ts} | 13 - .../src/app/components/checkbox/snippets.ts | 12 + .../src/app/components/checkbox/stories.tsx | 8 - .../app/components/container/components.tsx | 24 ++ docs-ui/src/app/components/container/page.mdx | 14 +- .../components/container/props-definition.ts | 12 + .../{container.props.ts => snippets.ts} | 17 +- .../src/app/components/container/stories.tsx | 7 - .../src/app/components/dialog/components.tsx | 104 +++++ docs-ui/src/app/components/dialog/page.mdx | 6 +- .../app/components/dialog/props-definition.ts | 88 +++++ .../dialog/{dialog.props.ts => snippets.ts} | 93 +---- docs-ui/src/app/components/dialog/stories.tsx | 15 - .../src/app/components/flex/components.tsx | 38 ++ docs-ui/src/app/components/flex/flex.props.ts | 55 --- docs-ui/src/app/components/flex/page.mdx | 16 +- .../app/components/flex/props-definition.ts | 27 ++ docs-ui/src/app/components/flex/snippets.ts | 27 ++ docs-ui/src/app/components/flex/stories.tsx | 7 - .../src/app/components/grid/components.tsx | 59 +++ docs-ui/src/app/components/grid/grid.props.ts | 111 ------ docs-ui/src/app/components/grid/page.mdx | 65 +-- .../app/components/grid/props-definition.ts | 22 ++ docs-ui/src/app/components/grid/snippets.ts | 12 + docs-ui/src/app/components/grid/stories.tsx | 7 - .../app/components/header-page/components.tsx | 107 +++++ .../src/app/components/header-page/page.mdx | 7 +- ...ader-page.props.ts => props-definition.ts} | 52 --- .../app/components/header-page/snippets.ts | 51 +++ .../app/components/header-page/stories.tsx | 17 - .../src/app/components/header/components.tsx | 90 +++++ docs-ui/src/app/components/header/page.mdx | 6 +- .../app/components/header/props-definition.ts | 83 ++++ .../header/{header.props.ts => snippets.ts} | 84 ---- docs-ui/src/app/components/header/stories.tsx | 17 - .../src/app/components/link/components.tsx | 111 ++++++ docs-ui/src/app/components/link/link.props.ts | 81 ---- docs-ui/src/app/components/link/page.mdx | 71 ++-- .../app/components/link/props-definition.ts | 45 +++ docs-ui/src/app/components/link/snippets.ts | 54 +++ docs-ui/src/app/components/link/stories.tsx | 17 - .../src/app/components/menu/components.tsx | 143 +++++++ docs-ui/src/app/components/menu/menu.props.ts | 372 ------------------ docs-ui/src/app/components/menu/page.mdx | 26 +- .../app/components/menu/props-definition.ts | 241 ++++++++++++ docs-ui/src/app/components/menu/snippets.ts | 100 +++++ docs-ui/src/app/components/menu/stories.tsx | 31 -- .../components/password-field/components.tsx | 34 ++ .../app/components/password-field/page.mdx | 23 +- .../password-field/password-field.props.ts | 43 -- .../password-field/props-definition.ts | 26 ++ .../app/components/password-field/snippets.ts | 19 + .../app/components/password-field/stories.tsx | 13 - .../src/app/components/popover/components.tsx | 18 + docs-ui/src/app/components/popover/page.mdx | 78 +--- .../app/components/popover/popover.props.ts | 174 -------- .../components/popover/props-definition.ts | 55 +++ .../src/app/components/popover/snippets.ts | 19 + .../src/app/components/popover/stories.tsx | 7 - .../app/components/radio-group/components.tsx | 78 ++++ .../src/app/components/radio-group/page.mdx | 36 +- .../radio-group/props-definition.ts | 30 ++ .../radio-group/radio-group.props.ts | 64 --- .../app/components/radio-group/snippets.ts | 54 +++ .../app/components/radio-group/stories.tsx | 19 - .../components/search-field/components.tsx | 51 +++ .../src/app/components/search-field/page.mdx | 27 +- .../search-field/props-definition.ts | 34 ++ .../search-field/search-field.props.ts | 49 --- .../app/components/search-field/snippets.ts | 35 ++ .../app/components/search-field/stories.tsx | 15 - .../src/app/components/select/components.tsx | 150 +++++++ docs-ui/src/app/components/select/page.mdx | 6 +- .../app/components/select/props-definition.ts | 111 ++++++ .../select/{select.props.ts => snippets.ts} | 112 ------ docs-ui/src/app/components/select/stories.tsx | 27 -- .../app/components/skeleton/components.tsx | 31 ++ docs-ui/src/app/components/skeleton/page.mdx | 22 +- .../components/skeleton/props-definition.ts | 25 ++ .../app/components/skeleton/skeleton.props.ts | 58 --- .../src/app/components/skeleton/snippets.ts | 26 ++ .../src/app/components/skeleton/stories.tsx | 8 - .../src/app/components/switch/components.tsx | 11 + docs-ui/src/app/components/switch/page.mdx | 14 +- .../{switch.props.ts => props-definition.ts} | 4 - docs-ui/src/app/components/switch/snippets.ts | 7 + docs-ui/src/app/components/switch/stories.tsx | 8 - .../src/app/components/table/components.tsx | 163 ++++++++ docs-ui/src/app/components/table/page.mdx | 21 +- .../{table.props.ts => props-definition.ts} | 109 ----- docs-ui/src/app/components/table/snippets.ts | 108 +++++ docs-ui/src/app/components/table/stories.tsx | 21 - .../src/app/components/tabs/components.tsx | 104 +++++ docs-ui/src/app/components/tabs/page.mdx | 42 +- .../app/components/tabs/props-definition.ts | 65 +++ docs-ui/src/app/components/tabs/snippets.ts | 60 +++ docs-ui/src/app/components/tabs/stories.tsx | 17 - docs-ui/src/app/components/tabs/tabs.props.ts | 122 ------ .../app/components/tag-group/components.tsx | 127 ++++++ docs-ui/src/app/components/tag-group/page.mdx | 6 +- .../components/tag-group/props-definition.ts | 62 +++ .../src/app/components/tag-group/snippets.ts | 62 +++ .../src/app/components/tag-group/stories.tsx | 19 - .../components/tag-group/tag-group.props.ts | 161 -------- .../app/components/text-field/components.tsx | 47 +++ .../src/app/components/text-field/page.mdx | 23 +- .../components/text-field/props-definition.ts | 30 ++ .../src/app/components/text-field/snippets.ts | 31 ++ .../src/app/components/text-field/stories.tsx | 13 - .../components/text-field/text-field.props.ts | 43 -- .../src/app/components/text/components.tsx | 66 ++++ docs-ui/src/app/components/text/page.mdx | 40 +- .../app/components/text/props-definition.ts | 55 +++ docs-ui/src/app/components/text/snippets.ts | 43 ++ docs-ui/src/app/components/text/stories.tsx | 17 - docs-ui/src/app/components/text/text.props.ts | 131 ------ .../toggle-button-group/components.tsx | 79 ++++ .../components/toggle-button-group/page.mdx | 87 +--- .../toggle-button-group/props-definition.ts | 43 ++ .../toggle-button-group/snippets.ts | 59 +++ .../toggle-button-group/stories.tsx | 25 -- .../toggle-button-group.props.ts | 142 ------- .../components/toggle-button/components.tsx | 57 +++ .../src/app/components/toggle-button/page.mdx | 58 +-- .../toggle-button/props-definition.ts | 35 ++ .../app/components/toggle-button/snippets.ts | 42 ++ .../app/components/toggle-button/stories.tsx | 21 - .../toggle-button/toggle-button.props.ts | 195 --------- .../src/app/components/tooltip/components.tsx | 16 + docs-ui/src/app/components/tooltip/page.mdx | 17 +- .../{tooltip.props.ts => props-definition.ts} | 12 - .../src/app/components/tooltip/snippets.ts | 11 + .../src/app/components/tooltip/stories.tsx | 7 - .../components/visually-hidden/components.tsx | 39 ++ .../app/components/visually-hidden/page.mdx | 19 +- .../visually-hidden/props-definition.ts | 15 + .../{visually-hidden.props.ts => snippets.ts} | 20 +- .../components/visually-hidden/stories.tsx | 8 - 181 files changed, 5189 insertions(+), 3966 deletions(-) delete mode 100644 docs-ui/src/app/components/accordion/accordion.props.ts create mode 100644 docs-ui/src/app/components/accordion/components.tsx create mode 100644 docs-ui/src/app/components/accordion/props-definition.ts create mode 100644 docs-ui/src/app/components/accordion/snippets.ts delete mode 100644 docs-ui/src/app/components/accordion/stories.tsx delete mode 100644 docs-ui/src/app/components/avatar/avatar.props.ts create mode 100644 docs-ui/src/app/components/avatar/components.tsx create mode 100644 docs-ui/src/app/components/avatar/props-definition.ts create mode 100644 docs-ui/src/app/components/avatar/snippets.ts delete mode 100644 docs-ui/src/app/components/avatar/stories.tsx create mode 100644 docs-ui/src/app/components/box/components.tsx rename docs-ui/src/app/components/box/{box.props.ts => props-definition.ts} (54%) create mode 100644 docs-ui/src/app/components/box/snippets.ts delete mode 100644 docs-ui/src/app/components/box/stories.tsx delete mode 100644 docs-ui/src/app/components/button-icon/button-icon.props.ts create mode 100644 docs-ui/src/app/components/button-icon/components.tsx create mode 100644 docs-ui/src/app/components/button-icon/props-definition.ts create mode 100644 docs-ui/src/app/components/button-icon/snippets.ts delete mode 100644 docs-ui/src/app/components/button-icon/stories.tsx delete mode 100644 docs-ui/src/app/components/button-link/button-link.props.ts create mode 100644 docs-ui/src/app/components/button-link/components.tsx create mode 100644 docs-ui/src/app/components/button-link/props-definition.ts create mode 100644 docs-ui/src/app/components/button-link/snippets.ts delete mode 100644 docs-ui/src/app/components/button-link/stories.tsx delete mode 100644 docs-ui/src/app/components/button/button.props.ts create mode 100644 docs-ui/src/app/components/button/components.tsx create mode 100644 docs-ui/src/app/components/button/props-definition.ts create mode 100644 docs-ui/src/app/components/button/snippets.ts delete mode 100644 docs-ui/src/app/components/button/stories.tsx delete mode 100644 docs-ui/src/app/components/card/card.props.ts create mode 100644 docs-ui/src/app/components/card/components.tsx create mode 100644 docs-ui/src/app/components/card/props-definition.ts create mode 100644 docs-ui/src/app/components/card/snippets.ts delete mode 100644 docs-ui/src/app/components/card/stories.tsx create mode 100644 docs-ui/src/app/components/checkbox/components.tsx rename docs-ui/src/app/components/checkbox/{checkbox.props.ts => props-definition.ts} (64%) create mode 100644 docs-ui/src/app/components/checkbox/snippets.ts delete mode 100644 docs-ui/src/app/components/checkbox/stories.tsx create mode 100644 docs-ui/src/app/components/container/components.tsx create mode 100644 docs-ui/src/app/components/container/props-definition.ts rename docs-ui/src/app/components/container/{container.props.ts => snippets.ts} (60%) delete mode 100644 docs-ui/src/app/components/container/stories.tsx create mode 100644 docs-ui/src/app/components/dialog/components.tsx create mode 100644 docs-ui/src/app/components/dialog/props-definition.ts rename docs-ui/src/app/components/dialog/{dialog.props.ts => snippets.ts} (50%) delete mode 100644 docs-ui/src/app/components/dialog/stories.tsx create mode 100644 docs-ui/src/app/components/flex/components.tsx delete mode 100644 docs-ui/src/app/components/flex/flex.props.ts create mode 100644 docs-ui/src/app/components/flex/props-definition.ts create mode 100644 docs-ui/src/app/components/flex/snippets.ts delete mode 100644 docs-ui/src/app/components/flex/stories.tsx create mode 100644 docs-ui/src/app/components/grid/components.tsx delete mode 100644 docs-ui/src/app/components/grid/grid.props.ts create mode 100644 docs-ui/src/app/components/grid/props-definition.ts create mode 100644 docs-ui/src/app/components/grid/snippets.ts delete mode 100644 docs-ui/src/app/components/grid/stories.tsx create mode 100644 docs-ui/src/app/components/header-page/components.tsx rename docs-ui/src/app/components/header-page/{header-page.props.ts => props-definition.ts} (57%) create mode 100644 docs-ui/src/app/components/header-page/snippets.ts delete mode 100644 docs-ui/src/app/components/header-page/stories.tsx create mode 100644 docs-ui/src/app/components/header/components.tsx create mode 100644 docs-ui/src/app/components/header/props-definition.ts rename docs-ui/src/app/components/header/{header.props.ts => snippets.ts} (63%) delete mode 100644 docs-ui/src/app/components/header/stories.tsx create mode 100644 docs-ui/src/app/components/link/components.tsx delete mode 100644 docs-ui/src/app/components/link/link.props.ts create mode 100644 docs-ui/src/app/components/link/props-definition.ts create mode 100644 docs-ui/src/app/components/link/snippets.ts delete mode 100644 docs-ui/src/app/components/link/stories.tsx create mode 100644 docs-ui/src/app/components/menu/components.tsx delete mode 100644 docs-ui/src/app/components/menu/menu.props.ts create mode 100644 docs-ui/src/app/components/menu/props-definition.ts create mode 100644 docs-ui/src/app/components/menu/snippets.ts delete mode 100644 docs-ui/src/app/components/menu/stories.tsx create mode 100644 docs-ui/src/app/components/password-field/components.tsx delete mode 100644 docs-ui/src/app/components/password-field/password-field.props.ts create mode 100644 docs-ui/src/app/components/password-field/props-definition.ts create mode 100644 docs-ui/src/app/components/password-field/snippets.ts delete mode 100644 docs-ui/src/app/components/password-field/stories.tsx create mode 100644 docs-ui/src/app/components/popover/components.tsx delete mode 100644 docs-ui/src/app/components/popover/popover.props.ts create mode 100644 docs-ui/src/app/components/popover/props-definition.ts create mode 100644 docs-ui/src/app/components/popover/snippets.ts delete mode 100644 docs-ui/src/app/components/popover/stories.tsx create mode 100644 docs-ui/src/app/components/radio-group/components.tsx create mode 100644 docs-ui/src/app/components/radio-group/props-definition.ts delete mode 100644 docs-ui/src/app/components/radio-group/radio-group.props.ts create mode 100644 docs-ui/src/app/components/radio-group/snippets.ts delete mode 100644 docs-ui/src/app/components/radio-group/stories.tsx create mode 100644 docs-ui/src/app/components/search-field/components.tsx create mode 100644 docs-ui/src/app/components/search-field/props-definition.ts delete mode 100644 docs-ui/src/app/components/search-field/search-field.props.ts create mode 100644 docs-ui/src/app/components/search-field/snippets.ts delete mode 100644 docs-ui/src/app/components/search-field/stories.tsx create mode 100644 docs-ui/src/app/components/select/components.tsx create mode 100644 docs-ui/src/app/components/select/props-definition.ts rename docs-ui/src/app/components/select/{select.props.ts => snippets.ts} (54%) delete mode 100644 docs-ui/src/app/components/select/stories.tsx create mode 100644 docs-ui/src/app/components/skeleton/components.tsx create mode 100644 docs-ui/src/app/components/skeleton/props-definition.ts delete mode 100644 docs-ui/src/app/components/skeleton/skeleton.props.ts create mode 100644 docs-ui/src/app/components/skeleton/snippets.ts delete mode 100644 docs-ui/src/app/components/skeleton/stories.tsx create mode 100644 docs-ui/src/app/components/switch/components.tsx rename docs-ui/src/app/components/switch/{switch.props.ts => props-definition.ts} (93%) create mode 100644 docs-ui/src/app/components/switch/snippets.ts delete mode 100644 docs-ui/src/app/components/switch/stories.tsx create mode 100644 docs-ui/src/app/components/table/components.tsx rename docs-ui/src/app/components/table/{table.props.ts => props-definition.ts} (73%) create mode 100644 docs-ui/src/app/components/table/snippets.ts delete mode 100644 docs-ui/src/app/components/table/stories.tsx create mode 100644 docs-ui/src/app/components/tabs/components.tsx create mode 100644 docs-ui/src/app/components/tabs/props-definition.ts create mode 100644 docs-ui/src/app/components/tabs/snippets.ts delete mode 100644 docs-ui/src/app/components/tabs/stories.tsx delete mode 100644 docs-ui/src/app/components/tabs/tabs.props.ts create mode 100644 docs-ui/src/app/components/tag-group/components.tsx create mode 100644 docs-ui/src/app/components/tag-group/props-definition.ts create mode 100644 docs-ui/src/app/components/tag-group/snippets.ts delete mode 100644 docs-ui/src/app/components/tag-group/stories.tsx delete mode 100644 docs-ui/src/app/components/tag-group/tag-group.props.ts create mode 100644 docs-ui/src/app/components/text-field/components.tsx create mode 100644 docs-ui/src/app/components/text-field/props-definition.ts create mode 100644 docs-ui/src/app/components/text-field/snippets.ts delete mode 100644 docs-ui/src/app/components/text-field/stories.tsx delete mode 100644 docs-ui/src/app/components/text-field/text-field.props.ts create mode 100644 docs-ui/src/app/components/text/components.tsx create mode 100644 docs-ui/src/app/components/text/props-definition.ts create mode 100644 docs-ui/src/app/components/text/snippets.ts delete mode 100644 docs-ui/src/app/components/text/stories.tsx delete mode 100644 docs-ui/src/app/components/text/text.props.ts create mode 100644 docs-ui/src/app/components/toggle-button-group/components.tsx create mode 100644 docs-ui/src/app/components/toggle-button-group/props-definition.ts create mode 100644 docs-ui/src/app/components/toggle-button-group/snippets.ts delete mode 100644 docs-ui/src/app/components/toggle-button-group/stories.tsx delete mode 100644 docs-ui/src/app/components/toggle-button-group/toggle-button-group.props.ts create mode 100644 docs-ui/src/app/components/toggle-button/components.tsx create mode 100644 docs-ui/src/app/components/toggle-button/props-definition.ts create mode 100644 docs-ui/src/app/components/toggle-button/snippets.ts delete mode 100644 docs-ui/src/app/components/toggle-button/stories.tsx delete mode 100644 docs-ui/src/app/components/toggle-button/toggle-button.props.ts create mode 100644 docs-ui/src/app/components/tooltip/components.tsx rename docs-ui/src/app/components/tooltip/{tooltip.props.ts => props-definition.ts} (74%) create mode 100644 docs-ui/src/app/components/tooltip/snippets.ts delete mode 100644 docs-ui/src/app/components/tooltip/stories.tsx create mode 100644 docs-ui/src/app/components/visually-hidden/components.tsx create mode 100644 docs-ui/src/app/components/visually-hidden/props-definition.ts rename docs-ui/src/app/components/visually-hidden/{visually-hidden.props.ts => snippets.ts} (63%) delete mode 100644 docs-ui/src/app/components/visually-hidden/stories.tsx diff --git a/docs-ui/src/app/components/accordion/accordion.props.ts b/docs-ui/src/app/components/accordion/accordion.props.ts deleted file mode 100644 index aac983b0c3..0000000000 --- a/docs-ui/src/app/components/accordion/accordion.props.ts +++ /dev/null @@ -1,119 +0,0 @@ -import { - classNamePropDefs, - stylePropDefs, - type PropDef, -} from '@/utils/propDefs'; - -export const accordionPropDefs: Record = { - children: { - type: 'enum', - values: ['ReactNode', '(state: { isExpanded: boolean }) => ReactNode'], - }, - defaultExpanded: { - type: 'boolean', - default: 'false', - }, - isExpanded: { - type: 'boolean', - }, - onExpandedChange: { - type: 'enum', - values: ['(isExpanded: boolean) => void'], - }, - ...classNamePropDefs, - ...stylePropDefs, -}; - -export const accordionTriggerPropDefs: Record = { - level: { - type: 'enum', - values: ['1', '2', '3', '4', '5', '6'], - default: '3', - }, - title: { - type: 'string', - }, - subtitle: { - type: 'string', - }, - children: { - type: 'enum', - values: ['ReactNode'], - }, - ...classNamePropDefs, - ...stylePropDefs, -}; - -export const accordionPanelPropDefs: Record = { - ...classNamePropDefs, - ...stylePropDefs, -}; - -export const accordionGroupPropDefs: Record = { - allowsMultiple: { - type: 'boolean', - default: 'false', - }, - ...classNamePropDefs, - ...stylePropDefs, -}; - -export const accordionUsageSnippet = `import { Accordion, AccordionTrigger, AccordionPanel } from '@backstage/ui'; - - - - Your content -`; - -export const accordionWithSubtitleSnippet = ` - - - Your content here - -`; - -export const accordionCustomTriggerSnippet = ` - - - Custom Multi-line Trigger - - Click to expand additional details - - - - - Your content here - -`; - -export const accordionDefaultExpandedSnippet = ` - - - Your content here - -`; - -export const accordionGroupSingleOpenSnippet = ` - - - Content 1 - - - - Content 2 - -`; - -export const accordionGroupMultipleOpenSnippet = ` - - - Content 1 - - - - Content 2 - -`; diff --git a/docs-ui/src/app/components/accordion/components.tsx b/docs-ui/src/app/components/accordion/components.tsx new file mode 100644 index 0000000000..95b312d17c --- /dev/null +++ b/docs-ui/src/app/components/accordion/components.tsx @@ -0,0 +1,130 @@ +'use client'; + +import { + Accordion, + AccordionTrigger, + AccordionPanel, + AccordionGroup, +} from '../../../../../packages/ui/src/components/Accordion/Accordion'; +import { Box } from '../../../../../packages/ui/src/components/Box/Box'; +import { Text } from '../../../../../packages/ui/src/components/Text/Text'; + +const Content = () => ( + + + It's the edge of the world and all of Western civilization + + + The sun may rise in the East, at least it settled in a final location + + + It's understood that Hollywood sells Californication + + +); + +export const Default = () => { + return ( + + + + + + + ); +}; + +export const WithSubtitle = () => { + return ( + + + + + + + ); +}; + +export const CustomTrigger = () => { + return ( + + + + + Custom Multi-line Trigger + + + Click to expand additional details and configuration options + + + + + + + + ); +}; + +export const DefaultExpanded = () => { + return ( + + + + + + + ); +}; + +export const GroupSingleOpen = () => { + return ( + + + + + + + + + + + + + + + + + + + + + ); +}; + +export const GroupMultipleOpen = () => { + return ( + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/docs-ui/src/app/components/accordion/page.mdx b/docs-ui/src/app/components/accordion/page.mdx index d2332673ea..83d650507b 100644 --- a/docs-ui/src/app/components/accordion/page.mdx +++ b/docs-ui/src/app/components/accordion/page.mdx @@ -1,6 +1,21 @@ import { PropsTable } from '@/components/PropsTable'; import { Snippet } from '@/components/Snippet'; import { CodeBlock } from '@/components/CodeBlock'; +import { + accordionPropDefs, + accordionTriggerPropDefs, + accordionPanelPropDefs, + accordionGroupPropDefs, +} from './props-definition'; +import { + accordionUsageSnippet, + defaultSnippet, + withSubtitleSnippet, + customTriggerSnippet, + defaultExpandedSnippet, + groupSingleOpenSnippet, + groupMultipleOpenSnippet, +} from './snippets'; import { Default, WithSubtitle, @@ -8,19 +23,7 @@ import { DefaultExpanded, GroupSingleOpen, GroupMultipleOpen, -} from './stories'; -import { - accordionPropDefs, - accordionTriggerPropDefs, - accordionPanelPropDefs, - accordionGroupPropDefs, - accordionUsageSnippet, - accordionWithSubtitleSnippet, - accordionCustomTriggerSnippet, - accordionDefaultExpandedSnippet, - accordionGroupSingleOpenSnippet, - accordionGroupMultipleOpenSnippet, -} from './accordion.props'; +} from './components'; import { PageTitle } from '@/components/PageTitle'; import { Theming } from '@/components/Theming'; import { AccordionDefinition } from '../../../utils/definitions'; @@ -36,7 +39,7 @@ import { ChangelogComponent } from '@/components/ChangelogComponent'; py={4} height={240} preview={} - code={accordionUsageSnippet} + code={defaultSnippet} /> ## Usage @@ -80,7 +83,7 @@ Here's a view when using both title and subtitle props. py={4} height={240} preview={} - code={accordionWithSubtitleSnippet} + code={withSubtitleSnippet} /> ### Custom Trigger @@ -92,7 +95,7 @@ Here's a view when providing custom multi-line content as children. py={4} height={280} preview={} - code={accordionCustomTriggerSnippet} + code={customTriggerSnippet} /> ### Default Expanded @@ -104,7 +107,7 @@ Here's a view when the panel is expanded by default. py={4} height={280} preview={} - code={accordionDefaultExpandedSnippet} + code={defaultExpandedSnippet} /> ### Group Single Open @@ -116,7 +119,7 @@ Here's a view when only one accordion can be open at a time. py={4} height={280} preview={} - code={accordionGroupSingleOpenSnippet} + code={groupSingleOpenSnippet} /> ### Group Multiple Open @@ -128,7 +131,7 @@ Here's a view when multiple accordions can be open simultaneously. py={4} height={280} preview={} - code={accordionGroupMultipleOpenSnippet} + code={groupMultipleOpenSnippet} /> diff --git a/docs-ui/src/app/components/accordion/props-definition.ts b/docs-ui/src/app/components/accordion/props-definition.ts new file mode 100644 index 0000000000..1df46eb648 --- /dev/null +++ b/docs-ui/src/app/components/accordion/props-definition.ts @@ -0,0 +1,59 @@ +import { + classNamePropDefs, + stylePropDefs, + type PropDef, +} from '@/utils/propDefs'; + +export const accordionPropDefs: Record = { + children: { + type: 'enum', + values: ['ReactNode', '(state: { isExpanded: boolean }) => ReactNode'], + }, + defaultExpanded: { + type: 'boolean', + default: 'false', + }, + isExpanded: { + type: 'boolean', + }, + onExpandedChange: { + type: 'enum', + values: ['(isExpanded: boolean) => void'], + }, + ...classNamePropDefs, + ...stylePropDefs, +}; + +export const accordionTriggerPropDefs: Record = { + level: { + type: 'enum', + values: ['1', '2', '3', '4', '5', '6'], + default: '3', + }, + title: { + type: 'string', + }, + subtitle: { + type: 'string', + }, + children: { + type: 'enum', + values: ['ReactNode'], + }, + ...classNamePropDefs, + ...stylePropDefs, +}; + +export const accordionPanelPropDefs: Record = { + ...classNamePropDefs, + ...stylePropDefs, +}; + +export const accordionGroupPropDefs: Record = { + allowsMultiple: { + type: 'boolean', + default: 'false', + }, + ...classNamePropDefs, + ...stylePropDefs, +}; diff --git a/docs-ui/src/app/components/accordion/snippets.ts b/docs-ui/src/app/components/accordion/snippets.ts new file mode 100644 index 0000000000..83e89d1b64 --- /dev/null +++ b/docs-ui/src/app/components/accordion/snippets.ts @@ -0,0 +1,68 @@ +export const accordionUsageSnippet = `import { Accordion, AccordionTrigger, AccordionPanel } from '@backstage/ui'; + + + + Your content +`; + +export const defaultSnippet = ` + + + Your content here + +`; + +export const withSubtitleSnippet = ` + + + Your content here + +`; + +export const customTriggerSnippet = ` + + + + Custom Multi-line Trigger + + + Click to expand additional details and configuration options + + + + + Your content here + +`; + +export const defaultExpandedSnippet = ` + + + Your content here + +`; + +export const groupSingleOpenSnippet = ` + + + Content 1 + + + + Content 2 + +`; + +export const groupMultipleOpenSnippet = ` + + + Content 1 + + + + Content 2 + +`; diff --git a/docs-ui/src/app/components/accordion/stories.tsx b/docs-ui/src/app/components/accordion/stories.tsx deleted file mode 100644 index 3f871b840b..0000000000 --- a/docs-ui/src/app/components/accordion/stories.tsx +++ /dev/null @@ -1,19 +0,0 @@ -'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 = () => ; -export const WithSubtitle = () => ; -export const CustomTrigger = () => ; -export const DefaultExpanded = () => ; -export const GroupSingleOpen = () => ; -export const GroupMultipleOpen = () => ; diff --git a/docs-ui/src/app/components/avatar/avatar.props.ts b/docs-ui/src/app/components/avatar/avatar.props.ts deleted file mode 100644 index 80621cdb89..0000000000 --- a/docs-ui/src/app/components/avatar/avatar.props.ts +++ /dev/null @@ -1,89 +0,0 @@ -import { classNamePropDefs, stylePropDefs } from '@/utils/propDefs'; -import type { PropDef } from '@/utils/propDefs'; - -export const avatarPropDefs: Record = { - src: { - type: 'string', - }, - name: { - type: 'string', - }, - size: { - type: 'enum', - values: ['x-small', 'small', 'medium', 'large', 'x-large'], - default: 'medium', - responsive: true, - }, - purpose: { - type: 'enum', - values: ['informative', 'decoration'], - default: 'informative', - }, - ...classNamePropDefs, - ...stylePropDefs, -}; - -export const snippetUsage = `import { Avatar } from '@backstage/ui'; - -`; - -export const snippetSizes = ` - - - - - -`; - -export const snippetFallback = ``; - -export const snippetPurpose = ` - - Informative (default) - - Use when avatar appears alone. Announced as "Charles de Dreuille" to screen readers: - - - - - - - Decoration - - Use when name appears adjacent to avatar. Hidden from screen readers to avoid redundancy: - - - - Charles de Dreuille - - -`; diff --git a/docs-ui/src/app/components/avatar/components.tsx b/docs-ui/src/app/components/avatar/components.tsx new file mode 100644 index 0000000000..da257f13b9 --- /dev/null +++ b/docs-ui/src/app/components/avatar/components.tsx @@ -0,0 +1,100 @@ +'use client'; + +import { Avatar } from '../../../../../packages/ui/src/components/Avatar/Avatar'; +import { Flex } from '../../../../../packages/ui/src/components/Flex/Flex'; +import { Text } from '../../../../../packages/ui/src/components/Text/Text'; + +export const Default = () => { + return ( + + ); +}; + +export const Fallback = () => { + return ( + + ); +}; + +export const Sizes = () => { + return ( + + + + + + + + + + + + + + + + + ); +}; + +export const Purpose = () => { + return ( + + + Informative (default) + + Use when avatar appears alone. Announced as "Charles de + Dreuille" to screen readers: + + + + + + + Decoration + + Use when avatar appears with adjacent text. Hidden from screen + readers: + + + + Charles de Dreuille + + + + ); +}; diff --git a/docs-ui/src/app/components/avatar/page.mdx b/docs-ui/src/app/components/avatar/page.mdx index 5ec0d78fdd..01e647ef7c 100644 --- a/docs-ui/src/app/components/avatar/page.mdx +++ b/docs-ui/src/app/components/avatar/page.mdx @@ -1,14 +1,15 @@ import { PropsTable } from '@/components/PropsTable'; import { Snippet } from '@/components/Snippet'; import { CodeBlock } from '@/components/CodeBlock'; -import { Default, Sizes, Fallback, Purpose } from './stories'; +import { avatarPropDefs } from './props-definition'; import { - avatarPropDefs, - snippetUsage, - snippetSizes, - snippetFallback, - snippetPurpose, -} from './avatar.props'; + avatarUsageSnippet, + defaultSnippet, + sizesSnippet, + fallbackSnippet, + purposeSnippet, +} from './snippets'; +import { Default, Sizes, Fallback, Purpose } from './components'; import { PageTitle } from '@/components/PageTitle'; import { Theming } from '@/components/Theming'; import { AvatarDefinition } from '../../../utils/definitions'; @@ -19,16 +20,11 @@ import { ChangelogComponent } from '@/components/ChangelogComponent'; description="An avatar component with a fallback for initials." /> -} - code={``} -/> +} code={defaultSnippet} /> ## Usage - + ## API reference @@ -45,7 +41,7 @@ Avatar sizes can be set using the `size` prop. py={4} open preview={} - code={snippetSizes} + code={sizesSnippet} /> ### Fallback @@ -57,7 +53,7 @@ If the image is not available, the avatar will show the initials of the name. py={4} open preview={} - code={snippetFallback} + code={fallbackSnippet} /> ### The `purpose` prop @@ -68,7 +64,7 @@ Control how the avatar is announced to screen readers using the `purpose` prop. align="center" py={4} preview={} - code={snippetPurpose} + code={purposeSnippet} /> diff --git a/docs-ui/src/app/components/avatar/props-definition.ts b/docs-ui/src/app/components/avatar/props-definition.ts new file mode 100644 index 0000000000..1a6de676c1 --- /dev/null +++ b/docs-ui/src/app/components/avatar/props-definition.ts @@ -0,0 +1,28 @@ +import { + classNamePropDefs, + stylePropDefs, + type PropDef, +} from '@/utils/propDefs'; + +export const avatarPropDefs: Record = { + src: { + type: 'string', + }, + name: { + type: 'string', + required: true, + }, + size: { + type: 'enum', + values: ['x-small', 'small', 'medium', 'large', 'x-large'], + default: 'medium', + responsive: true, + }, + purpose: { + type: 'enum', + values: ['informative', 'decoration'], + default: 'informative', + }, + ...classNamePropDefs, + ...stylePropDefs, +}; diff --git a/docs-ui/src/app/components/avatar/snippets.ts b/docs-ui/src/app/components/avatar/snippets.ts new file mode 100644 index 0000000000..ba3254dcd9 --- /dev/null +++ b/docs-ui/src/app/components/avatar/snippets.ts @@ -0,0 +1,52 @@ +export const avatarUsageSnippet = `import { Avatar } from '@backstage/ui'; + +`; + +export const defaultSnippet = ``; + +export const fallbackSnippet = ``; + +export const sizesSnippet = ` + + + + + + + + + + + + + + +`; + +export const purposeSnippet = ` + + Informative (default) + + Use when avatar appears alone. Announced as "Charles de Dreuille" to screen readers: + + + + + + + Decoration + + Use when avatar appears with adjacent text. Hidden from screen readers: + + + + Charles de Dreuille + + +`; diff --git a/docs-ui/src/app/components/avatar/stories.tsx b/docs-ui/src/app/components/avatar/stories.tsx deleted file mode 100644 index e8e9f601b1..0000000000 --- a/docs-ui/src/app/components/avatar/stories.tsx +++ /dev/null @@ -1,15 +0,0 @@ -'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 = () => ; -export const Sizes = () => ; -export const Fallback = () => ; -export const Purpose = () => ; diff --git a/docs-ui/src/app/components/box/components.tsx b/docs-ui/src/app/components/box/components.tsx new file mode 100644 index 0000000000..466ecd3708 --- /dev/null +++ b/docs-ui/src/app/components/box/components.tsx @@ -0,0 +1,34 @@ +'use client'; + +import { Box } from '../../../../../packages/ui/src/components/Box/Box'; + +const diagonalStripePattern = (() => { + const svg = ` + + + + + + `.trim(); + return `data:image/svg+xml,${encodeURIComponent(svg)}`; +})(); + +export const Default = () => { + return ( + + ); +}; diff --git a/docs-ui/src/app/components/box/page.mdx b/docs-ui/src/app/components/box/page.mdx index f6e50b28d7..cc8641580f 100644 --- a/docs-ui/src/app/components/box/page.mdx +++ b/docs-ui/src/app/components/box/page.mdx @@ -1,14 +1,14 @@ import { CodeBlock } from '@/components/CodeBlock'; import { PropsTable } from '@/components/PropsTable'; import { Snippet } from '@/components/Snippet'; -import { Default } from './stories'; +import { boxPropDefs } from './props-definition'; import { - boxPropDefs, snippetUsage, - boxPreviewSnippet, + defaultSnippet, boxSimpleSnippet, boxResponsiveSnippet, -} from './box.props'; +} from './snippets'; +import { Default } from './components'; import { spacingPropDefs } from '@/utils/propDefs'; import { PageTitle } from '@/components/PageTitle'; import { Theming } from '@/components/Theming'; @@ -21,12 +21,7 @@ import { ChangelogComponent } from '@/components/ChangelogComponent'; description="Box is the lowest-level component in Backstage UI. It provides a consistent API for styling and layout." /> -} - code={boxPreviewSnippet} - align="center" -/> +} code={defaultSnippet} align="center" /> ## Usage diff --git a/docs-ui/src/app/components/box/box.props.ts b/docs-ui/src/app/components/box/props-definition.ts similarity index 54% rename from docs-ui/src/app/components/box/box.props.ts rename to docs-ui/src/app/components/box/props-definition.ts index 0ee45c80f4..a18a0f272e 100644 --- a/docs-ui/src/app/components/box/box.props.ts +++ b/docs-ui/src/app/components/box/props-definition.ts @@ -22,19 +22,3 @@ export const boxPropDefs: Record = { ...classNamePropDefs, ...stylePropDefs, }; - -export const snippetUsage = `import { Box } from '@backstage/ui'; - -`; - -export const boxPreviewSnippet = ` - -`; - -export const boxSimpleSnippet = `Hello World`; - -export const boxResponsiveSnippet = ` - Hello World -`; diff --git a/docs-ui/src/app/components/box/snippets.ts b/docs-ui/src/app/components/box/snippets.ts new file mode 100644 index 0000000000..5c19bbe59b --- /dev/null +++ b/docs-ui/src/app/components/box/snippets.ts @@ -0,0 +1,21 @@ +export const snippetUsage = `import { Box } from '@backstage/ui'; + +`; + +export const defaultSnippet = ``; + +export const boxSimpleSnippet = `Hello World`; + +export const boxResponsiveSnippet = ` + Hello World +`; diff --git a/docs-ui/src/app/components/box/stories.tsx b/docs-ui/src/app/components/box/stories.tsx deleted file mode 100644 index 82afa5fdff..0000000000 --- a/docs-ui/src/app/components/box/stories.tsx +++ /dev/null @@ -1,7 +0,0 @@ -'use client'; - -import * as stories from '@backstage/ui/src/components/Box/Box.stories'; - -const { Default: DefaultStory } = stories; - -export const Default = () => ; diff --git a/docs-ui/src/app/components/button-icon/button-icon.props.ts b/docs-ui/src/app/components/button-icon/button-icon.props.ts deleted file mode 100644 index b063484d27..0000000000 --- a/docs-ui/src/app/components/button-icon/button-icon.props.ts +++ /dev/null @@ -1,62 +0,0 @@ -import { - classNamePropDefs, - stylePropDefs, - type PropDef, -} from '@/utils/propDefs'; - -export const buttonIconPropDefs: Record = { - variant: { - type: 'enum', - values: ['primary', 'secondary'], - default: 'primary', - responsive: true, - }, - size: { - type: 'enum', - values: ['small', 'medium'], - default: 'medium', - responsive: true, - }, - icon: { type: 'enum', values: ['ReactNode'], responsive: false }, - isDisabled: { type: 'boolean', default: 'false', responsive: false }, - loading: { type: 'boolean', default: 'false', responsive: false }, - type: { - type: 'enum', - values: ['button', 'submit', 'reset'], - default: 'button', - responsive: false, - }, - ...classNamePropDefs, - ...stylePropDefs, -}; - -export const buttonIconUsageSnippet = `import { ButtonIcon } from '@backstage/ui'; - -`; - -export const buttonIconDefaultSnippet = ` - } variant="primary" /> - } variant="secondary" /> -`; - -export const buttonIconVariantsSnippet = ` - } variant="primary" /> - } variant="secondary" /> -`; - -export const buttonIconSizesSnippet = ` - } size="small" /> - } size="medium" /> -`; - -export const buttonIconDisabledSnippet = `} isDisabled />`; - -export const buttonIconLoadingSnippet = `} variant="primary" loading={isLoading} onPress={handleClick} />`; - -export const buttonIconResponsiveSnippet = `} variant={{ initial: 'primary', lg: 'secondary' }} />`; - -export const buttonIconAsLinkSnippet = `import { ButtonLink } from '@backstage/ui'; - - - Button -`; diff --git a/docs-ui/src/app/components/button-icon/components.tsx b/docs-ui/src/app/components/button-icon/components.tsx new file mode 100644 index 0000000000..3ed421289c --- /dev/null +++ b/docs-ui/src/app/components/button-icon/components.tsx @@ -0,0 +1,68 @@ +'use client'; + +import { ButtonIcon } from '../../../../../packages/ui/src/components/ButtonIcon/ButtonIcon'; +import { Flex } from '../../../../../packages/ui/src/components/Flex/Flex'; +import { RiCloudLine } from '@remixicon/react'; + +export const Variants = () => { + return ( + + } variant="primary" aria-label="Cloud" /> + } + variant="secondary" + aria-label="Cloud" + /> + } + variant="tertiary" + aria-label="Cloud" + /> + + ); +}; + +export const Sizes = () => { + return ( + + } size="small" aria-label="Cloud" /> + } size="medium" aria-label="Cloud" /> + + ); +}; + +export const Disabled = () => { + return ( + + } + variant="primary" + aria-label="Cloud" + /> + } + variant="secondary" + aria-label="Cloud" + /> + } + variant="tertiary" + aria-label="Cloud" + /> + + ); +}; + +export const Loading = () => { + return ( + } + variant="primary" + loading + aria-label="Cloud" + /> + ); +}; diff --git a/docs-ui/src/app/components/button-icon/page.mdx b/docs-ui/src/app/components/button-icon/page.mdx index fc2d6eec9f..4fa239959b 100644 --- a/docs-ui/src/app/components/button-icon/page.mdx +++ b/docs-ui/src/app/components/button-icon/page.mdx @@ -1,18 +1,15 @@ import { PropsTable } from '@/components/PropsTable'; import { Snippet } from '@/components/Snippet'; import { CodeBlock } from '@/components/CodeBlock'; -import { Variants, Sizes, Disabled, Loading } from './stories'; +import { buttonIconPropDefs } from './props-definition'; import { - buttonIconPropDefs, buttonIconUsageSnippet, - buttonIconDefaultSnippet, - buttonIconVariantsSnippet, - buttonIconSizesSnippet, - buttonIconDisabledSnippet, - buttonIconLoadingSnippet, - buttonIconResponsiveSnippet, - buttonIconAsLinkSnippet, -} from './button-icon.props'; + variantsSnippet, + sizesSnippet, + disabledSnippet, + loadingSnippet, +} from './snippets'; +import { Variants, Sizes, Disabled, Loading } from './components'; import { PageTitle } from '@/components/PageTitle'; import { Theming } from '@/components/Theming'; import { ButtonIconDefinition } from '../../../utils/definitions'; @@ -23,12 +20,7 @@ import { ChangelogComponent } from '@/components/ChangelogComponent'; description="A button component with a single icon that can be used to trigger actions." /> -} - code={buttonIconDefaultSnippet} -/> +} code={variantsSnippet} /> ## Usage @@ -49,7 +41,7 @@ Here's a view when buttons have different variants. py={4} open preview={} - code={buttonIconVariantsSnippet} + code={variantsSnippet} /> ### Sizes @@ -61,7 +53,7 @@ Here's a view when buttons have different sizes. py={4} open preview={} - code={buttonIconSizesSnippet} + code={sizesSnippet} /> ### Disabled @@ -73,7 +65,7 @@ Here's a view when buttons are disabled. py={4} open preview={} - code={buttonIconDisabledSnippet} + code={disabledSnippet} /> ### Loading @@ -85,15 +77,9 @@ Here's a view when buttons are in a loading state. py={4} open preview={} - code={buttonIconLoadingSnippet} + code={loadingSnippet} /> -### Responsive - -Here's a view when buttons are responsive. - - - diff --git a/docs-ui/src/app/components/button-icon/props-definition.ts b/docs-ui/src/app/components/button-icon/props-definition.ts new file mode 100644 index 0000000000..abad34dbf3 --- /dev/null +++ b/docs-ui/src/app/components/button-icon/props-definition.ts @@ -0,0 +1,31 @@ +import { + classNamePropDefs, + stylePropDefs, + type PropDef, +} from '@/utils/propDefs'; + +export const buttonIconPropDefs: Record = { + variant: { + type: 'enum', + values: ['primary', 'secondary', 'tertiary'], + default: 'primary', + responsive: true, + }, + size: { + type: 'enum', + values: ['small', 'medium'], + default: 'medium', + responsive: true, + }, + icon: { type: 'enum', values: ['ReactNode'], responsive: false }, + isDisabled: { type: 'boolean', default: 'false', responsive: false }, + loading: { type: 'boolean', default: 'false', responsive: false }, + type: { + type: 'enum', + values: ['button', 'submit', 'reset'], + default: 'button', + responsive: false, + }, + ...classNamePropDefs, + ...stylePropDefs, +}; diff --git a/docs-ui/src/app/components/button-icon/snippets.ts b/docs-ui/src/app/components/button-icon/snippets.ts new file mode 100644 index 0000000000..1ea9acc169 --- /dev/null +++ b/docs-ui/src/app/components/button-icon/snippets.ts @@ -0,0 +1,22 @@ +export const buttonIconUsageSnippet = `import { ButtonIcon } from '@backstage/ui'; + +`; + +export const variantsSnippet = ` + } variant="primary" aria-label="Cloud" /> + } variant="secondary" aria-label="Cloud" /> + } variant="tertiary" aria-label="Cloud" /> +`; + +export const sizesSnippet = ` + } size="small" aria-label="Cloud" /> + } size="medium" aria-label="Cloud" /> +`; + +export const disabledSnippet = ` + } variant="primary" aria-label="Cloud" /> + } variant="secondary" aria-label="Cloud" /> + } variant="tertiary" aria-label="Cloud" /> +`; + +export const loadingSnippet = `} variant="primary" loading aria-label="Cloud" />`; diff --git a/docs-ui/src/app/components/button-icon/stories.tsx b/docs-ui/src/app/components/button-icon/stories.tsx deleted file mode 100644 index 5d28fb28a6..0000000000 --- a/docs-ui/src/app/components/button-icon/stories.tsx +++ /dev/null @@ -1,15 +0,0 @@ -'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 = () => ; -export const Sizes = () => ; -export const Disabled = () => ; -export const Loading = () => ; diff --git a/docs-ui/src/app/components/button-link/button-link.props.ts b/docs-ui/src/app/components/button-link/button-link.props.ts deleted file mode 100644 index 2bd4e2196a..0000000000 --- a/docs-ui/src/app/components/button-link/button-link.props.ts +++ /dev/null @@ -1,73 +0,0 @@ -import { classNamePropDefs, stylePropDefs } from '@/utils/propDefs'; -import type { PropDef } from '@/utils/propDefs'; - -export const buttonLinkPropDefs: Record = { - variant: { - type: 'enum', - values: ['primary', 'secondary'], - default: 'primary', - responsive: true, - }, - size: { - type: 'enum', - values: ['small', 'medium'], - default: 'medium', - responsive: true, - }, - iconStart: { type: 'enum', values: ['ReactNode'], responsive: false }, - iconEnd: { type: 'enum', values: ['ReactNode'], responsive: false }, - isDisabled: { type: 'boolean', default: 'false', responsive: false }, - href: { type: 'string', responsive: false }, - hrefLang: { type: 'string', responsive: false }, - target: { - type: 'enum', - values: ['HTMLAttributeAnchorTarget'], - default: '_self', - responsive: false, - }, - rel: { type: 'string', responsive: false }, - children: { type: 'enum', values: ['ReactNode'], responsive: false }, - ...classNamePropDefs, - ...stylePropDefs, -}; - -export const buttonLinkSnippetUsage = `import { ButtonLink } from '@backstage/ui'; - -`; - -export const buttonLinkVariantsSnippet = ` - } variant="primary"> - Button - - } variant="secondary"> - Button - -`; - -export const buttonLinkSizesSnippet = ` - Small - Medium -`; - -export const buttonLinkIconsSnippet = ` - }>Button - }>Button - } - iconEnd={}> - Button - -`; - -export const buttonLinkDisabledSnippet = ` - - Primary - - - Secondary - -`; - -export const buttonLinkResponsiveSnippet = ` - Responsive Button -`; diff --git a/docs-ui/src/app/components/button-link/components.tsx b/docs-ui/src/app/components/button-link/components.tsx new file mode 100644 index 0000000000..4282ebf7dd --- /dev/null +++ b/docs-ui/src/app/components/button-link/components.tsx @@ -0,0 +1,122 @@ +'use client'; + +import { ButtonLink } from '../../../../../packages/ui/src/components/ButtonLink/ButtonLink'; +import { Flex } from '../../../../../packages/ui/src/components/Flex/Flex'; +import { MemoryRouter } from 'react-router-dom'; +import { RiArrowRightSLine, RiCloudLine } from '@remixicon/react'; + +export const Variants = () => { + return ( + + + } + variant="primary" + href="https://ui.backstage.io" + target="_blank" + > + Button + + } + variant="secondary" + href="https://ui.backstage.io" + target="_blank" + > + Button + + } + variant="tertiary" + href="https://ui.backstage.io" + target="_blank" + > + Button + + + + ); +}; + +export const Sizes = () => { + return ( + + + + Small + + + Medium + + + + ); +}; + +export const WithIcons = () => { + return ( + + + } + href="https://ui.backstage.io" + target="_blank" + > + Button + + } + href="https://ui.backstage.io" + target="_blank" + > + Button + + } + iconEnd={} + href="https://ui.backstage.io" + target="_blank" + > + Button + + + + ); +}; + +export const Disabled = () => { + return ( + + + + Primary + + + Secondary + + + Tertiary + + + + ); +}; diff --git a/docs-ui/src/app/components/button-link/page.mdx b/docs-ui/src/app/components/button-link/page.mdx index 074ea204ec..cb2b0c19da 100644 --- a/docs-ui/src/app/components/button-link/page.mdx +++ b/docs-ui/src/app/components/button-link/page.mdx @@ -1,16 +1,15 @@ import { PropsTable } from '@/components/PropsTable'; import { Snippet } from '@/components/Snippet'; import { CodeBlock } from '@/components/CodeBlock'; -import { Variants, Sizes, WithIcons, Disabled } from './stories'; +import { buttonLinkPropDefs } from './props-definition'; import { - buttonLinkPropDefs, - buttonLinkSnippetUsage, - buttonLinkVariantsSnippet, - buttonLinkSizesSnippet, - buttonLinkIconsSnippet, - buttonLinkDisabledSnippet, - buttonLinkResponsiveSnippet, -} from './button-link.props'; + buttonLinkUsageSnippet, + variantsSnippet, + sizesSnippet, + withIconsSnippet, + disabledSnippet, +} from './snippets'; +import { Variants, Sizes, WithIcons, Disabled } from './components'; import { PageTitle } from '@/components/PageTitle'; import { Theming } from '@/components/Theming'; import { ButtonLinkDefinition } from '../../../utils/definitions'; @@ -25,12 +24,12 @@ import { ChangelogComponent } from '@/components/ChangelogComponent'; align="center" py={4} preview={} - code={buttonLinkVariantsSnippet} + code={variantsSnippet} /> ## Usage - + ## API reference @@ -47,7 +46,7 @@ Here's a view when buttons have different variants. py={4} open preview={} - code={buttonLinkVariantsSnippet} + code={variantsSnippet} /> ### Sizes @@ -59,7 +58,7 @@ Here's a view when buttons have different sizes. py={4} open preview={} - code={buttonLinkSizesSnippet} + code={sizesSnippet} /> ### With Icons @@ -71,7 +70,7 @@ Here's a view when buttons have icons. py={4} open preview={} - code={buttonLinkIconsSnippet} + code={withIconsSnippet} /> ### Disabled @@ -83,15 +82,9 @@ Here's a view when buttons are disabled. py={4} open preview={} - code={buttonLinkDisabledSnippet} + code={disabledSnippet} /> -### Responsive - -Here's a view when buttons are responsive. - - - diff --git a/docs-ui/src/app/components/button-link/props-definition.ts b/docs-ui/src/app/components/button-link/props-definition.ts new file mode 100644 index 0000000000..ac711e0965 --- /dev/null +++ b/docs-ui/src/app/components/button-link/props-definition.ts @@ -0,0 +1,32 @@ +import { + classNamePropDefs, + stylePropDefs, + childrenPropDefs, + type PropDef, +} from '@/utils/propDefs'; + +export const buttonLinkPropDefs: Record = { + variant: { + type: 'enum', + values: ['primary', 'secondary', 'tertiary'], + default: 'primary', + responsive: true, + }, + size: { + type: 'enum', + values: ['small', 'medium'], + default: 'medium', + responsive: true, + }, + iconStart: { type: 'enum', values: ['ReactNode'], responsive: false }, + iconEnd: { type: 'enum', values: ['ReactNode'], responsive: false }, + isDisabled: { type: 'boolean', default: 'false', responsive: false }, + href: { type: 'string', required: true }, + target: { + type: 'enum', + values: ['_self', '_blank', '_parent', '_top'], + }, + ...childrenPropDefs, + ...classNamePropDefs, + ...stylePropDefs, +}; diff --git a/docs-ui/src/app/components/button-link/snippets.ts b/docs-ui/src/app/components/button-link/snippets.ts new file mode 100644 index 0000000000..7f1a69027c --- /dev/null +++ b/docs-ui/src/app/components/button-link/snippets.ts @@ -0,0 +1,68 @@ +export const buttonLinkUsageSnippet = `import { ButtonLink } from '@backstage/ui'; + +Button`; + +export const variantsSnippet = ` + } + variant="primary" + href="https://ui.backstage.io" + target="_blank" + > + Button + + } + variant="secondary" + href="https://ui.backstage.io" + target="_blank" + > + Button + + } + variant="tertiary" + href="https://ui.backstage.io" + target="_blank" + > + Button + +`; + +export const sizesSnippet = ` + + Small + + + Medium + +`; + +export const withIconsSnippet = ` + } href="https://ui.backstage.io" target="_blank"> + Button + + } href="https://ui.backstage.io" target="_blank"> + Button + + } + iconEnd={} + href="https://ui.backstage.io" + target="_blank" + > + Button + +`; + +export const disabledSnippet = ` + + Primary + + + Secondary + + + Tertiary + +`; diff --git a/docs-ui/src/app/components/button-link/stories.tsx b/docs-ui/src/app/components/button-link/stories.tsx deleted file mode 100644 index a865afe87c..0000000000 --- a/docs-ui/src/app/components/button-link/stories.tsx +++ /dev/null @@ -1,15 +0,0 @@ -'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 = () => ; -export const Sizes = () => ; -export const WithIcons = () => ; -export const Disabled = () => ; diff --git a/docs-ui/src/app/components/button/button.props.ts b/docs-ui/src/app/components/button/button.props.ts deleted file mode 100644 index e650a9f2e9..0000000000 --- a/docs-ui/src/app/components/button/button.props.ts +++ /dev/null @@ -1,77 +0,0 @@ -import { classNamePropDefs, stylePropDefs } from '@/utils/propDefs'; -import type { PropDef } from '@/utils/propDefs'; - -export const buttonPropDefs: Record = { - variant: { - type: 'enum', - values: ['primary', 'secondary'], - default: 'primary', - responsive: true, - }, - size: { - type: 'enum', - values: ['small', 'medium'], - default: 'medium', - responsive: true, - }, - iconStart: { type: 'enum', values: ['ReactNode'], responsive: false }, - iconEnd: { type: 'enum', values: ['ReactNode'], responsive: false }, - isDisabled: { type: 'boolean', default: 'false', responsive: false }, - loading: { type: 'boolean', default: 'false', responsive: false }, - children: { type: 'enum', values: ['ReactNode'], responsive: false }, - type: { - type: 'enum', - values: ['button', 'submit', 'reset'], - default: 'button', - responsive: false, - }, - ...classNamePropDefs, - ...stylePropDefs, -}; - -export const buttonSnippetUsage = `import { Button } from '@backstage/ui'; - - - -`; - -export const buttonSizesSnippet = ` - - -`; - -export const buttonIconsSnippet = ` - - - -`; - -export const buttonDisabledSnippet = ` - - -`; - -export const buttonResponsiveSnippet = ``; - -export const buttonLoadingSnippet = ``; - -export const buttonAsLinkSnippet = `import { ButtonLink } from '@backstage/ui'; - - - Button -`; diff --git a/docs-ui/src/app/components/button/components.tsx b/docs-ui/src/app/components/button/components.tsx new file mode 100644 index 0000000000..558c852e9c --- /dev/null +++ b/docs-ui/src/app/components/button/components.tsx @@ -0,0 +1,78 @@ +'use client'; + +import { Button } from '../../../../../packages/ui/src/components/Button/Button'; +import { ButtonLink } from '../../../../../packages/ui/src/components/ButtonLink/ButtonLink'; +import { Flex } from '../../../../../packages/ui/src/components/Flex/Flex'; +import { RiArrowRightSLine, RiCloudLine } from '@remixicon/react'; +import { MemoryRouter } from 'react-router-dom'; + +export const Variants = () => { + return ( + + + + + + ); +}; + +export const Sizes = () => { + return ( + + + + + ); +}; + +export const WithIcons = () => { + return ( + + + + + + ); +}; + +export const Disabled = () => { + return ( + + + + + + ); +}; + +export const Loading = () => { + return ( + + ); +}; + +export const AsLink = () => { + return ( + + + Button + + + ); +}; diff --git a/docs-ui/src/app/components/button/page.mdx b/docs-ui/src/app/components/button/page.mdx index daead3ba92..38ff2e2d57 100644 --- a/docs-ui/src/app/components/button/page.mdx +++ b/docs-ui/src/app/components/button/page.mdx @@ -1,35 +1,36 @@ import { PropsTable } from '@/components/PropsTable'; import { Snippet } from '@/components/Snippet'; import { CodeBlock } from '@/components/CodeBlock'; -import { Variants, Sizes, WithIcons, Disabled, Loading } from './stories'; -import { Variants as ButtonLinkVariants } from '../button-link/stories'; +import { buttonPropDefs } from './props-definition'; import { - buttonPropDefs, + variantsSnippet, + sizesSnippet, + withIconsSnippet, + disabledSnippet, + loadingSnippet, + asLinkSnippet, buttonSnippetUsage, - buttonVariantsSnippet, - buttonSizesSnippet, - buttonIconsSnippet, - buttonDisabledSnippet, - buttonLoadingSnippet, buttonResponsiveSnippet, - buttonAsLinkSnippet, -} from './button.props'; +} from './snippets'; import { ChangelogComponent } from '@/components/ChangelogComponent'; import { PageTitle } from '@/components/PageTitle'; import { Theming } from '@/components/Theming'; import { ButtonDefinition } from '../../../utils/definitions'; +import { + Variants, + Sizes, + WithIcons, + Disabled, + Loading, + AsLink, +} from './components'; -} - code={buttonVariantsSnippet} -/> +} code={variantsSnippet} /> ## Usage @@ -50,20 +51,14 @@ Here's a view when buttons have different variants. py={4} open preview={} - code={buttonVariantsSnippet} + code={variantsSnippet} /> ### Sizes Here's a view when buttons have different sizes. -} - code={buttonSizesSnippet} -/> +} code={sizesSnippet} /> ### With Icons @@ -74,7 +69,7 @@ Here's a view when buttons have icons. py={4} open preview={} - code={buttonIconsSnippet} + code={withIconsSnippet} /> ### Disabled @@ -86,7 +81,7 @@ Here's a view when buttons are disabled. py={4} open preview={} - code={buttonDisabledSnippet} + code={disabledSnippet} /> ### Loading @@ -98,7 +93,7 @@ Here's a view when buttons are in a loading state. py={4} open preview={} - code={buttonLoadingSnippet} + code={loadingSnippet} /> ### Responsive @@ -111,13 +106,7 @@ Here's a view when buttons are responsive. If you want to use a button as a link, please use the `ButtonLink` component. -} - code={buttonAsLinkSnippet} -/> +} code={asLinkSnippet} /> diff --git a/docs-ui/src/app/components/button/props-definition.ts b/docs-ui/src/app/components/button/props-definition.ts new file mode 100644 index 0000000000..4b225ad460 --- /dev/null +++ b/docs-ui/src/app/components/button/props-definition.ts @@ -0,0 +1,30 @@ +import { classNamePropDefs, stylePropDefs } from '@/utils/propDefs'; +import type { PropDef } from '@/utils/propDefs'; + +export const buttonPropDefs: Record = { + variant: { + type: 'enum', + values: ['primary', 'secondary'], + default: 'primary', + responsive: true, + }, + size: { + type: 'enum', + values: ['small', 'medium'], + default: 'medium', + responsive: true, + }, + iconStart: { type: 'enum', values: ['ReactNode'], responsive: false }, + iconEnd: { type: 'enum', values: ['ReactNode'], responsive: false }, + isDisabled: { type: 'boolean', default: 'false', responsive: false }, + loading: { type: 'boolean', default: 'false', responsive: false }, + children: { type: 'enum', values: ['ReactNode'], responsive: false }, + type: { + type: 'enum', + values: ['button', 'submit', 'reset'], + default: 'button', + responsive: false, + }, + ...classNamePropDefs, + ...stylePropDefs, +}; diff --git a/docs-ui/src/app/components/button/snippets.ts b/docs-ui/src/app/components/button/snippets.ts new file mode 100644 index 0000000000..a31523b064 --- /dev/null +++ b/docs-ui/src/app/components/button/snippets.ts @@ -0,0 +1,54 @@ +export const buttonSnippetUsage = `import { Button } from '@backstage/ui'; + +`; + +export const variantsSnippet = ` + + + + `; + +export const sizesSnippet = ` + + + `; + +export const withIconsSnippet = ` + + + + `; + +export const disabledSnippet = ` + + + + `; + +export const loadingSnippet = ``; + +export const asLinkSnippet = ` + + Button + + `; diff --git a/docs-ui/src/app/components/button/stories.tsx b/docs-ui/src/app/components/button/stories.tsx deleted file mode 100644 index b958eb8fdf..0000000000 --- a/docs-ui/src/app/components/button/stories.tsx +++ /dev/null @@ -1,17 +0,0 @@ -'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 = () => ; -export const Sizes = () => ; -export const WithIcons = () => ; -export const Disabled = () => ; -export const Loading = () => ; diff --git a/docs-ui/src/app/components/card/card.props.ts b/docs-ui/src/app/components/card/card.props.ts deleted file mode 100644 index 70c71bdf56..0000000000 --- a/docs-ui/src/app/components/card/card.props.ts +++ /dev/null @@ -1,83 +0,0 @@ -import { - classNamePropDefs, - stylePropDefs, - type PropDef, -} from '@/utils/propDefs'; - -export const cardPropDefs: Record = { - ...classNamePropDefs, - ...stylePropDefs, -}; - -export const cardHeaderPropDefs: Record = { - ...classNamePropDefs, - ...stylePropDefs, -}; - -export const cardBodyPropDefs: Record = { - ...classNamePropDefs, - ...stylePropDefs, -}; - -export const cardFooterPropDefs: Record = { - ...classNamePropDefs, - ...stylePropDefs, -}; - -export const cardUsageSnippet = `import { card } from '@backstage/ui'; - - - Header - Body - Footer -`; - -export const cardDefaultSnippet = ` - Header - Body - Footer -`; - -export const cardLongBodySnippet = ` - - Header - - - - This is the first paragraph of a long body text that demonstrates how - the Card component handles extensive content. The card should adjust - accordingly to display all the text properly while maintaining its - structure. - - - Here's a second paragraph that adds more content to our card body. - Having multiple paragraphs helps to visualize how spacing works within - the card component. - - - This third paragraph continues to add more text to ensure we have a - proper demonstration of a card with significant content. This makes it - easier to test scrolling behavior and overall layout when content - exceeds the initial view. - - - - Footer - -`; - -export const cardListRowSnippet = ` - - Header - - - Hello world - Hello world - Hello world - Hello world - ... - - - Footer - -`; diff --git a/docs-ui/src/app/components/card/components.tsx b/docs-ui/src/app/components/card/components.tsx new file mode 100644 index 0000000000..89ab09d47d --- /dev/null +++ b/docs-ui/src/app/components/card/components.tsx @@ -0,0 +1,66 @@ +'use client'; + +import { + Card, + CardHeader, + CardBody, + CardFooter, +} from '../../../../../packages/ui/src/components/Card/Card'; +import { Text } from '../../../../../packages/ui/src/components/Text/Text'; + +export const Default = () => { + return ( + + Header + Body + Footer + + ); +}; + +export const CustomSize = () => { + return ( + + Header + Body + Footer + + ); +}; + +export const WithLongBody = () => { + return ( + + + Header + + + + This is the first paragraph of a long body text that demonstrates how + the Card component handles extensive content. The card should adjust + accordingly to display all the text properly while maintaining its + structure. + + + Here's a second paragraph that adds more content to our card + body. Having multiple paragraphs helps to visualize how spacing works + within the card component. + + + This third paragraph continues to add more text to ensure we have a + proper demonstration of a card with significant content. This makes it + easier to test scrolling behavior and overall layout when content + exceeds the initial view. + + + + Footer + + + ); +}; diff --git a/docs-ui/src/app/components/card/page.mdx b/docs-ui/src/app/components/card/page.mdx index fd1ed233d9..3f50c7c160 100644 --- a/docs-ui/src/app/components/card/page.mdx +++ b/docs-ui/src/app/components/card/page.mdx @@ -1,17 +1,19 @@ import { PropsTable } from '@/components/PropsTable'; -import { CustomSize, WithLongBody, WithListRow } from './stories'; import { Snippet } from '@/components/Snippet'; import { CodeBlock } from '@/components/CodeBlock'; import { cardPropDefs, - cardUsageSnippet, - cardDefaultSnippet, cardHeaderPropDefs, cardBodyPropDefs, cardFooterPropDefs, - cardLongBodySnippet, - cardListRowSnippet, -} from './card.props'; +} from './props-definition'; +import { + cardUsageSnippet, + defaultSnippet, + customSizeSnippet, + withLongBodySnippet, +} from './snippets'; +import { Default, CustomSize, WithLongBody } from './components'; import { PageTitle } from '@/components/PageTitle'; import { Theming } from '@/components/Theming'; import { CardDefinition } from '../../../utils/definitions'; @@ -25,8 +27,8 @@ import { ChangelogComponent } from '@/components/ChangelogComponent'; } - code={cardDefaultSnippet} + preview={} + code={defaultSnippet} /> ## Usage @@ -61,6 +63,18 @@ To display a footer in a card, use the `CardFooter` component. This will be fixe ## Examples +### Custom size + +Here's a view when card has a custom size. + +} + code={customSizeSnippet} + open +/> + ### With long body Here's a view when card has a long body. @@ -69,19 +83,7 @@ Here's a view when card has a long body. align="center" py={4} preview={} - code={cardLongBodySnippet} - open -/> - -### With list - -Here's a view when card has a list. - -} - code={cardListRowSnippet} + code={withLongBodySnippet} open /> diff --git a/docs-ui/src/app/components/card/props-definition.ts b/docs-ui/src/app/components/card/props-definition.ts new file mode 100644 index 0000000000..bb7bdad0dd --- /dev/null +++ b/docs-ui/src/app/components/card/props-definition.ts @@ -0,0 +1,30 @@ +import { + classNamePropDefs, + stylePropDefs, + childrenPropDefs, + type PropDef, +} from '@/utils/propDefs'; + +export const cardPropDefs: Record = { + ...childrenPropDefs, + ...classNamePropDefs, + ...stylePropDefs, +}; + +export const cardHeaderPropDefs: Record = { + ...childrenPropDefs, + ...classNamePropDefs, + ...stylePropDefs, +}; + +export const cardBodyPropDefs: Record = { + ...childrenPropDefs, + ...classNamePropDefs, + ...stylePropDefs, +}; + +export const cardFooterPropDefs: Record = { + ...childrenPropDefs, + ...classNamePropDefs, + ...stylePropDefs, +}; diff --git a/docs-ui/src/app/components/card/snippets.ts b/docs-ui/src/app/components/card/snippets.ts new file mode 100644 index 0000000000..b5de9a7008 --- /dev/null +++ b/docs-ui/src/app/components/card/snippets.ts @@ -0,0 +1,41 @@ +export const cardUsageSnippet = `import { Card, CardHeader, CardBody, CardFooter } from '@backstage/ui'; + + + Header + Body + Footer +`; + +export const defaultSnippet = ` + Header + Body + Footer +`; + +export const customSizeSnippet = ` + Header + Body + Footer +`; + +export const withLongBodySnippet = ` + + Header + + + + This is the first paragraph of a long body text that demonstrates how + the Card component handles extensive content. + + + Here's a second paragraph that adds more content to our card body. + + + This third paragraph continues to add more text to ensure we have a + proper demonstration of a card with significant content. + + + + Footer + +`; diff --git a/docs-ui/src/app/components/card/stories.tsx b/docs-ui/src/app/components/card/stories.tsx deleted file mode 100644 index d9c4b80ec4..0000000000 --- a/docs-ui/src/app/components/card/stories.tsx +++ /dev/null @@ -1,13 +0,0 @@ -'use client'; - -import * as stories from '@backstage/ui/src/components/Card/Card.stories'; - -const { - CustomSize: CustomSizeStory, - WithLongBody: WithLongBodyStory, - WithListRow: WithListRowStory, -} = stories; - -export const CustomSize = () => ; -export const WithLongBody = () => ; -export const WithListRow = () => ; diff --git a/docs-ui/src/app/components/checkbox/components.tsx b/docs-ui/src/app/components/checkbox/components.tsx new file mode 100644 index 0000000000..a826c9e02f --- /dev/null +++ b/docs-ui/src/app/components/checkbox/components.tsx @@ -0,0 +1,21 @@ +'use client'; + +import { Checkbox } from '../../../../../packages/ui/src/components/Checkbox/Checkbox'; +import { Flex } from '../../../../../packages/ui/src/components/Flex/Flex'; + +export const Default = () => { + return Accept terms and conditions; +}; + +export const AllVariants = () => { + return ( + + Unchecked + Checked + Disabled + + Checked & Disabled + + + ); +}; diff --git a/docs-ui/src/app/components/checkbox/page.mdx b/docs-ui/src/app/components/checkbox/page.mdx index 5f1735bc50..aaf73d7210 100644 --- a/docs-ui/src/app/components/checkbox/page.mdx +++ b/docs-ui/src/app/components/checkbox/page.mdx @@ -1,13 +1,13 @@ import { PropsTable } from '@/components/PropsTable'; -import { Default, AllVariants } from './stories'; import { Snippet } from '@/components/Snippet'; import { CodeBlock } from '@/components/CodeBlock'; +import { checkboxPropDefs } from './props-definition'; import { - checkboxPropDefs, checkboxUsageSnippet, - checkboxDefaultSnippet, - checkboxVariantsSnippet, -} from './checkbox.props'; + defaultSnippet, + allVariantsSnippet, +} from './snippets'; +import { Default, AllVariants } from './components'; import { PageTitle } from '@/components/PageTitle'; import { Theming } from '@/components/Theming'; import { CheckboxDefinition } from '../../../utils/definitions'; @@ -18,12 +18,7 @@ import { ChangelogComponent } from '@/components/ChangelogComponent'; description="A checkbox component that can be used to trigger actions." /> -} - code={checkboxDefaultSnippet} -/> +} code={defaultSnippet} /> ## Usage @@ -44,7 +39,7 @@ Here's a view when checkboxes have different variants. py={4} open preview={} - code={checkboxVariantsSnippet} + code={allVariantsSnippet} /> diff --git a/docs-ui/src/app/components/checkbox/checkbox.props.ts b/docs-ui/src/app/components/checkbox/props-definition.ts similarity index 64% rename from docs-ui/src/app/components/checkbox/checkbox.props.ts rename to docs-ui/src/app/components/checkbox/props-definition.ts index ce0f1033ff..9e5d8a1e16 100644 --- a/docs-ui/src/app/components/checkbox/checkbox.props.ts +++ b/docs-ui/src/app/components/checkbox/props-definition.ts @@ -46,16 +46,3 @@ export const checkboxPropDefs: Record = { ...classNamePropDefs, ...stylePropDefs, }; - -export const checkboxUsageSnippet = `import { Checkbox } from '@backstage/ui'; - -Accept terms`; - -export const checkboxDefaultSnippet = `Accept terms and conditions`; - -export const checkboxVariantsSnippet = ` - Unchecked - Checked - Disabled - Checked & Disabled -`; diff --git a/docs-ui/src/app/components/checkbox/snippets.ts b/docs-ui/src/app/components/checkbox/snippets.ts new file mode 100644 index 0000000000..bef496195f --- /dev/null +++ b/docs-ui/src/app/components/checkbox/snippets.ts @@ -0,0 +1,12 @@ +export const checkboxUsageSnippet = `import { Checkbox } from '@backstage/ui'; + +Accept terms`; + +export const defaultSnippet = `Accept terms and conditions`; + +export const allVariantsSnippet = ` + Unchecked + Checked + Disabled + Checked & Disabled +`; diff --git a/docs-ui/src/app/components/checkbox/stories.tsx b/docs-ui/src/app/components/checkbox/stories.tsx deleted file mode 100644 index 55d75ed3a6..0000000000 --- a/docs-ui/src/app/components/checkbox/stories.tsx +++ /dev/null @@ -1,8 +0,0 @@ -'use client'; - -import * as stories from '@backstage/ui/src/components/Checkbox/Checkbox.stories'; - -const { Default: DefaultStory, AllVariants: AllVariantsStory } = stories; - -export const Default = () => ; -export const AllVariants = () => ; diff --git a/docs-ui/src/app/components/container/components.tsx b/docs-ui/src/app/components/container/components.tsx new file mode 100644 index 0000000000..7032b3f620 --- /dev/null +++ b/docs-ui/src/app/components/container/components.tsx @@ -0,0 +1,24 @@ +'use client'; + +import { Box } from '../../../../../packages/ui/src/components/Box/Box'; + +const DecorativeBox = () => ( + +); + +export const Preview = () => { + return ( +
+ +
+ ); +}; diff --git a/docs-ui/src/app/components/container/page.mdx b/docs-ui/src/app/components/container/page.mdx index 18c307b104..87bc55829e 100644 --- a/docs-ui/src/app/components/container/page.mdx +++ b/docs-ui/src/app/components/container/page.mdx @@ -1,14 +1,14 @@ import { CodeBlock } from '@/components/CodeBlock'; import { PropsTable } from '@/components/PropsTable'; import { Snippet } from '@/components/Snippet'; -import { Preview } from './stories'; +import { containerPropDefs } from './props-definition'; import { - containerPropDefs, containerUsageSnippet, - containerDefaultSnippet, + previewSnippet, containerSimpleSnippet, containerResponsiveSnippet, -} from './container.props'; +} from './snippets'; +import { Preview } from './components'; import { PageTitle } from '@/components/PageTitle'; import { Theming } from '@/components/Theming'; import { ContainerDefinition } from '../../../utils/definitions'; @@ -20,11 +20,7 @@ import { ChangelogComponent } from '@/components/ChangelogComponent'; description="The container component let you use our default max-width and center the content on the page." /> -} - code={containerDefaultSnippet} -/> +} code={previewSnippet} /> ## Usage diff --git a/docs-ui/src/app/components/container/props-definition.ts b/docs-ui/src/app/components/container/props-definition.ts new file mode 100644 index 0000000000..0980520365 --- /dev/null +++ b/docs-ui/src/app/components/container/props-definition.ts @@ -0,0 +1,12 @@ +import { + classNamePropDefs, + stylePropDefs, + gapPropDefs, + type PropDef, +} from '@/utils/propDefs'; + +export const containerPropDefs: Record = { + ...gapPropDefs, + ...classNamePropDefs, + ...stylePropDefs, +}; diff --git a/docs-ui/src/app/components/container/container.props.ts b/docs-ui/src/app/components/container/snippets.ts similarity index 60% rename from docs-ui/src/app/components/container/container.props.ts rename to docs-ui/src/app/components/container/snippets.ts index a4d23a8495..83f4dabbbc 100644 --- a/docs-ui/src/app/components/container/container.props.ts +++ b/docs-ui/src/app/components/container/snippets.ts @@ -1,23 +1,10 @@ -import { - classNamePropDefs, - stylePropDefs, - gapPropDefs, - type PropDef, -} from '@/utils/propDefs'; - -export const containerPropDefs: Record = { - ...gapPropDefs, - ...classNamePropDefs, - ...stylePropDefs, -}; - export const containerUsageSnippet = `import { Container } from "@backstage/ui"; Hello World!`; -export const containerDefaultSnippet = ` +export const previewSnippet = `
-`; +
`; export const containerSimpleSnippet = ` Hello World diff --git a/docs-ui/src/app/components/container/stories.tsx b/docs-ui/src/app/components/container/stories.tsx deleted file mode 100644 index 95f4097e12..0000000000 --- a/docs-ui/src/app/components/container/stories.tsx +++ /dev/null @@ -1,7 +0,0 @@ -'use client'; - -import * as stories from '@backstage/ui/src/components/Container/Container.stories'; - -const { Preview: PreviewStory } = stories; - -export const Preview = () => ; diff --git a/docs-ui/src/app/components/dialog/components.tsx b/docs-ui/src/app/components/dialog/components.tsx new file mode 100644 index 0000000000..3a1fd8c2c9 --- /dev/null +++ b/docs-ui/src/app/components/dialog/components.tsx @@ -0,0 +1,104 @@ +'use client'; + +import { + Dialog, + DialogTrigger, + DialogHeader, + DialogBody, + DialogFooter, +} from '../../../../../packages/ui/src/components/Dialog/Dialog'; +import { Button } from '../../../../../packages/ui/src/components/Button/Button'; +import { Flex } from '../../../../../packages/ui/src/components/Flex/Flex'; +import { Text } from '../../../../../packages/ui/src/components/Text/Text'; +import { TextField } from '../../../../../packages/ui/src/components/TextField/TextField'; +import { Select } from '../../../../../packages/ui/src/components/Select/Select'; + +export const Default = () => ( + + + + Example Dialog + + This is a basic dialog example. + + + + + + + +); + +export const PreviewFixedWidthAndHeight = () => ( + + + + Long Content Dialog + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. + + + Duis aute irure dolor in reprehenderit in voluptate velit esse + cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat + cupidatat non proident, sunt in culpa qui officia deserunt mollit + anim id est laborum. + + + Sed ut perspiciatis unde omnis iste natus error sit voluptatem + accusantium doloremque laudantium, totam rem aperiam, eaque ipsa + quae ab illo inventore veritatis et quasi architecto beatae vitae + dicta sunt explicabo. + + + + + + + + + +); + +export const PreviewWithForm = () => ( + + + + Create New User + + + + + +); + +export const WithLabelAndDescription = () => ( + + } + style={{ width: 300 }} + /> +); + +export const Disabled = () => ( + +); + +export const Searchable = () => ( + +); + +export const SearchableMultiple = () => ( + ; -export const WithLabelAndDescription = () => ( - -); -export const Sizes = () => ; -export const WithIcon = () => ; -export const Disabled = () => ; -export const DisabledOption = () => ; -export const Searchable = () => ; -export const MultipleSelection = () => ; -export const SearchableMultiple = () => ; diff --git a/docs-ui/src/app/components/skeleton/components.tsx b/docs-ui/src/app/components/skeleton/components.tsx new file mode 100644 index 0000000000..277aa17ae3 --- /dev/null +++ b/docs-ui/src/app/components/skeleton/components.tsx @@ -0,0 +1,31 @@ +'use client'; + +import { Skeleton } from '../../../../../packages/ui/src/components/Skeleton/Skeleton'; +import { Flex } from '../../../../../packages/ui/src/components/Flex/Flex'; + +export const Demo1 = () => { + return ( + + + + + + + + + + + + + ); +}; + +export const Demo2 = () => { + return ( + + + + + + ); +}; diff --git a/docs-ui/src/app/components/skeleton/page.mdx b/docs-ui/src/app/components/skeleton/page.mdx index a32672e352..21eb35ac5f 100644 --- a/docs-ui/src/app/components/skeleton/page.mdx +++ b/docs-ui/src/app/components/skeleton/page.mdx @@ -1,14 +1,13 @@ import { PropsTable } from '@/components/PropsTable'; import { Snippet } from '@/components/Snippet'; import { CodeBlock } from '@/components/CodeBlock'; -import { Demo1, Demo2 } from './stories'; +import { skeletonPropDefs } from './props-definition'; import { - skeletonPropDefs, skeletonUsageSnippet, - skeletonDefaultSnippet, - skeletonDemo1Snippet, - skeletonDemo2Snippet, -} from './skeleton.props'; + demo1Snippet, + demo2Snippet, +} from './snippets'; +import { Demo1, Demo2 } from './components'; import { PageTitle } from '@/components/PageTitle'; import { Theming } from '@/components/Theming'; import { ChangelogComponent } from '@/components/ChangelogComponent'; @@ -19,12 +18,7 @@ import { SkeletonDefinition } from '../../../utils/definitions'; description="Use to show a placeholder while content is loading." /> -} - code={skeletonDefaultSnippet} -/> +} code={demo2Snippet} /> ## Usage @@ -44,7 +38,7 @@ You can use a mix of different sizes to create a more complex skeleton. align="center" py={4} preview={} - code={skeletonDemo1Snippet} + code={demo1Snippet} open /> @@ -56,7 +50,7 @@ You can use a mix of different sizes to create a more complex skeleton. align="center" py={4} preview={} - code={skeletonDemo2Snippet} + code={demo2Snippet} open /> diff --git a/docs-ui/src/app/components/skeleton/props-definition.ts b/docs-ui/src/app/components/skeleton/props-definition.ts new file mode 100644 index 0000000000..bb80024bcd --- /dev/null +++ b/docs-ui/src/app/components/skeleton/props-definition.ts @@ -0,0 +1,25 @@ +import { + classNamePropDefs, + stylePropDefs, + type PropDef, +} from '@/utils/propDefs'; + +export const skeletonPropDefs: Record = { + width: { + type: 'number', + default: '80', + responsive: false, + }, + height: { + type: 'number', + default: '24', + responsive: false, + }, + rounded: { + type: 'boolean', + default: 'false', + responsive: false, + }, + ...classNamePropDefs, + ...stylePropDefs, +}; diff --git a/docs-ui/src/app/components/skeleton/skeleton.props.ts b/docs-ui/src/app/components/skeleton/skeleton.props.ts deleted file mode 100644 index ab79268d15..0000000000 --- a/docs-ui/src/app/components/skeleton/skeleton.props.ts +++ /dev/null @@ -1,58 +0,0 @@ -import { - classNamePropDefs, - stylePropDefs, - type PropDef, -} from '@/utils/propDefs'; - -export const skeletonPropDefs: Record = { - width: { - type: 'number', - default: '80', - responsive: false, - }, - height: { - type: 'number', - default: '24', - responsive: false, - }, - rounded: { - type: 'boolean', - default: 'false', - responsive: false, - }, - ...classNamePropDefs, - ...stylePropDefs, -}; - -export const skeletonUsageSnippet = `import { Flex, Skeleton } from '@backstage/ui'; - - - - - -`; - -export const skeletonDefaultSnippet = ` - - - -`; - -export const skeletonDemo1Snippet = ` - - - - - - - - - - -`; - -export const skeletonDemo2Snippet = ` - - - -`; diff --git a/docs-ui/src/app/components/skeleton/snippets.ts b/docs-ui/src/app/components/skeleton/snippets.ts new file mode 100644 index 0000000000..981ac5ff0c --- /dev/null +++ b/docs-ui/src/app/components/skeleton/snippets.ts @@ -0,0 +1,26 @@ +export const skeletonUsageSnippet = `import { Flex, Skeleton } from '@backstage/ui'; + + + + + +`; + +export const demo1Snippet = ` + + + + + + + + + + +`; + +export const demo2Snippet = ` + + + +`; diff --git a/docs-ui/src/app/components/skeleton/stories.tsx b/docs-ui/src/app/components/skeleton/stories.tsx deleted file mode 100644 index c699cea620..0000000000 --- a/docs-ui/src/app/components/skeleton/stories.tsx +++ /dev/null @@ -1,8 +0,0 @@ -'use client'; - -import * as stories from '@backstage/ui/src/components/Skeleton/Skeleton.stories'; - -const { Demo1: Demo1Story, Demo2: Demo2Story } = stories; - -export const Demo1 = () => ; -export const Demo2 = () => ; diff --git a/docs-ui/src/app/components/switch/components.tsx b/docs-ui/src/app/components/switch/components.tsx new file mode 100644 index 0000000000..604d9d68b1 --- /dev/null +++ b/docs-ui/src/app/components/switch/components.tsx @@ -0,0 +1,11 @@ +'use client'; + +import { Switch } from '../../../../../packages/ui/src/components/Switch/Switch'; + +export const Default = () => { + return ; +}; + +export const Disabled = () => { + return ; +}; diff --git a/docs-ui/src/app/components/switch/page.mdx b/docs-ui/src/app/components/switch/page.mdx index e721973a50..494a046f47 100644 --- a/docs-ui/src/app/components/switch/page.mdx +++ b/docs-ui/src/app/components/switch/page.mdx @@ -1,8 +1,9 @@ import { PropsTable } from '@/components/PropsTable'; import { Snippet } from '@/components/Snippet'; import { CodeBlock } from '@/components/CodeBlock'; -import { Default, Disabled } from './stories'; -import { switchPropDefs, snippetUsage } from './switch.props'; +import { switchPropDefs } from './props-definition'; +import { snippetUsage, defaultSnippet, disabledSnippet } from './snippets'; +import { Default, Disabled } from './components'; import { PageTitle } from '@/components/PageTitle'; import { Theming } from '@/components/Theming'; import { ChangelogComponent } from '@/components/ChangelogComponent'; @@ -13,12 +14,7 @@ import { SwitchDefinition } from '../../../utils/definitions'; description="A control that indicates whether a setting is on or off." /> -} - code={``} -/> +} code={defaultSnippet} /> ## Usage @@ -39,7 +35,7 @@ A switch can be disabled using the `isDisabled` prop. py={4} open preview={} - code={``} + code={disabledSnippet} /> diff --git a/docs-ui/src/app/components/switch/switch.props.ts b/docs-ui/src/app/components/switch/props-definition.ts similarity index 93% rename from docs-ui/src/app/components/switch/switch.props.ts rename to docs-ui/src/app/components/switch/props-definition.ts index 5576436102..769c93aac8 100644 --- a/docs-ui/src/app/components/switch/switch.props.ts +++ b/docs-ui/src/app/components/switch/props-definition.ts @@ -65,7 +65,3 @@ export const switchPropDefs: Record = { type: 'string', }, }; - -export const snippetUsage = `import { Switch } from '@backstage/ui'; - -`; diff --git a/docs-ui/src/app/components/switch/snippets.ts b/docs-ui/src/app/components/switch/snippets.ts new file mode 100644 index 0000000000..694f15106c --- /dev/null +++ b/docs-ui/src/app/components/switch/snippets.ts @@ -0,0 +1,7 @@ +export const snippetUsage = `import { Switch } from '@backstage/ui'; + +`; + +export const defaultSnippet = ``; + +export const disabledSnippet = ``; diff --git a/docs-ui/src/app/components/switch/stories.tsx b/docs-ui/src/app/components/switch/stories.tsx deleted file mode 100644 index 1a8a56a051..0000000000 --- a/docs-ui/src/app/components/switch/stories.tsx +++ /dev/null @@ -1,8 +0,0 @@ -'use client'; - -import * as stories from '@backstage/ui/src/components/Switch/Switch.stories'; - -const { Default: DefaultStory, Disabled: DisabledStory } = stories; - -export const Default = () => ; -export const Disabled = () => ; diff --git a/docs-ui/src/app/components/table/components.tsx b/docs-ui/src/app/components/table/components.tsx new file mode 100644 index 0000000000..8850d3a214 --- /dev/null +++ b/docs-ui/src/app/components/table/components.tsx @@ -0,0 +1,163 @@ +'use client'; + +import dynamic from 'next/dynamic'; + +// Import Table components dynamically with ssr: false to avoid SSR issues +const TableComponents = dynamic( + () => + import('../../../../../packages/ui/src/components/Table').then(mod => ({ + default: () => null, // Placeholder + Table: mod.Table, + TableHeader: mod.TableHeader, + Column: mod.Column, + TableBody: mod.TableBody, + Row: mod.Row, + Cell: mod.Cell, + })), + { ssr: false }, +); + +import { + Table, + TableHeader, + Column, + TableBody, + Row, + Cell, +} from '../../../../../packages/ui/src/components/Table'; +import { useState } from 'react'; +import type { Selection } from 'react-aria-components'; + +const rockBands = [ + { id: 1, name: 'The Beatles', genre: 'Rock', year: 1960 }, + { id: 2, name: 'Led Zeppelin', genre: 'Hard Rock', year: 1968 }, + { id: 3, name: 'Pink Floyd', genre: 'Progressive Rock', year: 1965 }, + { id: 4, name: 'The Rolling Stones', genre: 'Rock', year: 1962 }, + { id: 5, name: 'Queen', genre: 'Rock', year: 1970 }, +]; + +// Simple wrapper to ensure client-side only rendering +const ClientOnly = ({ children }: { children: React.ReactNode }) => { + const [mounted, setMounted] = useState(false); + + useState(() => { + if (typeof window !== 'undefined') { + setMounted(true); + } + }); + + if (!mounted) return
Loading...
; + return <>{children}; +}; + +export const TableRockBand = () => ( + + + + Name + Genre + Year + + + {rockBands.map(band => ( + + {band.name} + {band.genre} + {band.year} + + ))} + +
+ +); + +export const SelectionModePlayground = () => { + const [selectedKeys, setSelectedKeys] = useState(new Set()); + + return ( + + + + Name + Genre + Year + + + {rockBands.map(band => ( + + {band.name} + {band.genre} + {band.year} + + ))} + +
+ + ); +}; + +export const SelectionBehaviorPlayground = () => { + const [selectedKeys, setSelectedKeys] = useState(new Set()); + + return ( + + + + Name + Genre + Year + + + {rockBands.map(band => ( + + {band.name} + {band.genre} + {band.year} + + ))} + +
+ + ); +}; + +export const SelectionToggleWithActions = () => { + const [selectedKeys, setSelectedKeys] = useState(new Set()); + + return ( + + + + Name + Genre + Year + + + {rockBands.map(band => ( + + {band.name} + {band.genre} + {band.year} + + ))} + +
+ + ); +}; diff --git a/docs-ui/src/app/components/table/page.mdx b/docs-ui/src/app/components/table/page.mdx index db87494f21..d3461124d2 100644 --- a/docs-ui/src/app/components/table/page.mdx +++ b/docs-ui/src/app/components/table/page.mdx @@ -1,26 +1,23 @@ import { PropsTable } from '@/components/PropsTable'; import { Snippet } from '@/components/Snippet'; import { CodeBlock } from '@/components/CodeBlock'; -import { TableRockBand, SelectionModePlayground, SelectionBehaviorPlayground, SelectionToggleWithActions } from './stories'; +import { TableRockBand, SelectionModePlayground, SelectionBehaviorPlayground, SelectionToggleWithActions } from './components'; import { tablePropDefs, tableHeaderPropDefs, tableBodyPropDefs, tablePaginationPropDefs, - tableUsageSnippet, - tableBasicSnippet, - tableRowClickSnippet, - tableHybridSnippet, - tableCellInteractionsSnippet, - tablePaginationSnippet, - tableSelectionActionsSnippet, - tableSelectionModeSnippet, - tableSelectionBehaviorSnippet, - tableSortingSnippet, columnPropDefs, rowPropDefs, cellPropDefs, -} from './table.props'; +} from './props-definition'; +import { + tableUsageSnippet, + tableBasicSnippet, + tableSelectionActionsSnippet, + tableSelectionModeSnippet, + tableSelectionBehaviorSnippet, +} from './snippets'; import { ChangelogComponent } from '@/components/ChangelogComponent'; import { PageTitle } from '@/components/PageTitle'; import { Theming } from '@/components/Theming'; diff --git a/docs-ui/src/app/components/table/table.props.ts b/docs-ui/src/app/components/table/props-definition.ts similarity index 73% rename from docs-ui/src/app/components/table/table.props.ts rename to docs-ui/src/app/components/table/props-definition.ts index 21bd5597c6..e4ef0ffe8b 100644 --- a/docs-ui/src/app/components/table/table.props.ts +++ b/docs-ui/src/app/components/table/props-definition.ts @@ -266,112 +266,3 @@ export const tablePaginationPropDefs: Record = { ...classNamePropDefs, ...stylePropDefs, }; - -export const tableUsageSnippet = `import { Cell, CellText, ..., TableHeader, TablePagination } from '@backstage/ui'; - - - - - - - - - - - -
-`; - -export const tableBasicSnippet = `import { Table, TableHeader, Column, TableBody, Row, CellText, CellProfile, TablePagination, useTable } from '@backstage/ui'; - -const data = [ - { - name: 'The Beatles', - image: 'https://upload.wikimedia.org/wikipedia/en/thumb/4/42/Beatles_-...jpg', - genre: 'Rock, Pop, Psychedelic Rock', - yearFormed: 1960, - albums: 13 - }, - // ... more data -]; - -// Uncontrolled pagination (easiest) -const { data: paginatedData, paginationProps } = useTable({ - data, - pagination: { - defaultPageSize: 5, - }, -}); - - - - Band name - Genre - Year formed - Albums - - - {paginatedData?.map(item => ( - - - - - - - ))} - -
-`; - -export const tableSelectionActionsSnippet = `import { Table, TableHeader, TableBody, Column, Row, CellText } from '@backstage/ui'; - -function MyTable() { - const [selectedKeys, setSelectedKeys] = React.useState(new Set([])); - - return ( - console.log('Opening', key)} - > - - Name - Status - - - - - - - - - - - -
- ); -}`; - -export const tableSelectionModeSnippet = ` - {/* ... */} -
`; - -export const tableSelectionBehaviorSnippet = ` - {/* ... */} -
`; diff --git a/docs-ui/src/app/components/table/snippets.ts b/docs-ui/src/app/components/table/snippets.ts new file mode 100644 index 0000000000..0c8e029330 --- /dev/null +++ b/docs-ui/src/app/components/table/snippets.ts @@ -0,0 +1,108 @@ +export const tableUsageSnippet = `import { Cell, CellText, ..., TableHeader, TablePagination } from '@backstage/ui'; + + + + + + + + + + + +
+`; + +export const tableBasicSnippet = `import { Table, TableHeader, Column, TableBody, Row, CellText, CellProfile, TablePagination, useTable } from '@backstage/ui'; + +const data = [ + { + name: 'The Beatles', + image: 'https://upload.wikimedia.org/wikipedia/en/thumb/4/42/Beatles_-...jpg', + genre: 'Rock, Pop, Psychedelic Rock', + yearFormed: 1960, + albums: 13 + }, + // ... more data +]; + +// Uncontrolled pagination (easiest) +const { data: paginatedData, paginationProps } = useTable({ + data, + pagination: { + defaultPageSize: 5, + }, +}); + + + + Band name + Genre + Year formed + Albums + + + {paginatedData?.map(item => ( + + + + + + + ))} + +
+`; + +export const tableSelectionActionsSnippet = `import { Table, TableHeader, TableBody, Column, Row, CellText } from '@backstage/ui'; + +function MyTable() { + const [selectedKeys, setSelectedKeys] = React.useState(new Set([])); + + return ( + console.log('Opening', key)} + > + + Name + Status + + + + + + + + + + + +
+ ); +}`; + +export const tableSelectionModeSnippet = ` + {/* ... */} +
`; + +export const tableSelectionBehaviorSnippet = ` + {/* ... */} +
`; diff --git a/docs-ui/src/app/components/table/stories.tsx b/docs-ui/src/app/components/table/stories.tsx deleted file mode 100644 index 2627694d30..0000000000 --- a/docs-ui/src/app/components/table/stories.tsx +++ /dev/null @@ -1,21 +0,0 @@ -'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 = () => ; -export const SelectionModePlayground = () => ( - -); -export const SelectionBehaviorPlayground = () => ( - -); -export const SelectionToggleWithActions = () => ( - -); diff --git a/docs-ui/src/app/components/tabs/components.tsx b/docs-ui/src/app/components/tabs/components.tsx new file mode 100644 index 0000000000..8fbf3d4924 --- /dev/null +++ b/docs-ui/src/app/components/tabs/components.tsx @@ -0,0 +1,104 @@ +'use client'; + +import { + Tabs, + TabList, + Tab, + TabPanel, +} from '../../../../../packages/ui/src/components/Tabs'; +import { Text } from '../../../../../packages/ui/src/components/Text/Text'; +import { MemoryRouter } from 'react-router-dom'; + +export const Default = () => { + return ( + + + + Tab 1 + Tab 2 + Tab 3 + + + Content for Tab 1 + + + Content for Tab 2 + + + Content for Tab 3 + + + + ); +}; + +export const DefaultSelectedKey = () => { + return ( + + + + Tab 1 + Tab 2 + Tab 3 + + + Content for Tab 1 + + + Content for Tab 2 + + + Content for Tab 3 + + + + ); +}; + +export const DisabledTabs = () => { + return ( + + + + Tab 1 + + Tab 2 (Disabled) + + Tab 3 + + + Content for Tab 1 + + + Content for Tab 2 + + + Content for Tab 3 + + + + ); +}; + +export const Orientation = () => { + return ( + + + + Tab 1 + Tab 2 + Tab 3 + + + Content for Tab 1 + + + Content for Tab 2 + + + Content for Tab 3 + + + + ); +}; diff --git a/docs-ui/src/app/components/tabs/page.mdx b/docs-ui/src/app/components/tabs/page.mdx index 0f3ab6bfd4..0c51b96471 100644 --- a/docs-ui/src/app/components/tabs/page.mdx +++ b/docs-ui/src/app/components/tabs/page.mdx @@ -1,16 +1,20 @@ import { PropsTable } from '@/components/PropsTable'; -import { Default, WithTabPanels, WithMockedURLTab2, PrefixMatchingDeepNesting } from './stories'; import { Snippet } from '@/components/Snippet'; import { CodeBlock } from '@/components/CodeBlock'; import { tabsPropDefs, + tabListPropDefs, tabPropDefs, + tabPanelPropDefs, +} from './props-definition'; +import { tabsUsageSnippet, - tabsDefaultSnippet, - tabsWithTabPanelsSnippet, - tabsWithLinksSnippet, - tabsWithDeeplyNestedRoutesSnippet, -} from './tabs.props'; + defaultSnippet, + defaultSelectedKeySnippet, + disabledTabsSnippet, + orientationSnippet, +} from './snippets'; +import { Default, DefaultSelectedKey, DisabledTabs, Orientation } from './components'; import { PageTitle } from '@/components/PageTitle'; import { Theming } from '@/components/Theming'; import { TabsDefinition } from '../../../utils/definitions'; @@ -24,7 +28,7 @@ import { ChangelogComponent } from '@/components/ChangelogComponent'; } - code={tabsDefaultSnippet} + code={defaultSnippet} /> ## Usage @@ -47,36 +51,36 @@ An individual interactive tab button that toggles the corresponding panel. Rende ## Examples -### Simple tabs +### Default Selected Key -To connect the tabs with the panels, you need to use the `id` prop on the tab and the tab panel. +Here's how to set which tab is selected by default. } - code={tabsWithTabPanelsSnippet} + preview={} + code={defaultSelectedKeySnippet} open /> -### Tabs as links +### Disabled Tabs -You can use the `href` prop on the tab to make it a link. This will use the `react-router` under the hood to navigate to the tab. We automatically detect if this is an external URL and render a `` element instead of a ` + I am a tooltip + + ); +}; diff --git a/docs-ui/src/app/components/tooltip/page.mdx b/docs-ui/src/app/components/tooltip/page.mdx index c62ece88ec..35d650c99b 100644 --- a/docs-ui/src/app/components/tooltip/page.mdx +++ b/docs-ui/src/app/components/tooltip/page.mdx @@ -1,13 +1,9 @@ import { PropsTable } from '@/components/PropsTable'; -import { Default } from './stories'; import { Snippet } from '@/components/Snippet'; import { CodeBlock } from '@/components/CodeBlock'; -import { - tooltipDefaultSnippet, - tooltipUsageSnippet, - tooltipTriggerPropDefs, - tooltipPropDefs, -} from './tooltip.props'; +import { tooltipTriggerPropDefs, tooltipPropDefs } from './props-definition'; +import { tooltipUsageSnippet, defaultSnippet } from './snippets'; +import { Default } from './components'; import { PageTitle } from '@/components/PageTitle'; import { Theming } from '@/components/Theming'; import { TooltipDefinition } from '../../../utils/definitions'; @@ -18,12 +14,7 @@ import { ChangelogComponent } from '@/components/ChangelogComponent'; description="A tooltip displays a description of an element on hover or focus." /> -} - code={tooltipDefaultSnippet} - align="center" -/> +} code={defaultSnippet} align="center" /> ## Usage diff --git a/docs-ui/src/app/components/tooltip/tooltip.props.ts b/docs-ui/src/app/components/tooltip/props-definition.ts similarity index 74% rename from docs-ui/src/app/components/tooltip/tooltip.props.ts rename to docs-ui/src/app/components/tooltip/props-definition.ts index fe64051288..dc0919f4cc 100644 --- a/docs-ui/src/app/components/tooltip/tooltip.props.ts +++ b/docs-ui/src/app/components/tooltip/props-definition.ts @@ -53,15 +53,3 @@ export const tooltipPropDefs: Record = { ...classNamePropDefs, ...stylePropDefs, }; - -export const tooltipUsageSnippet = `import { TooltipTrigger, Tooltip, Button } from '@backstage/ui'; - - - - I am a tooltip -`; - -export const tooltipDefaultSnippet = ` - - I am a tooltip -`; diff --git a/docs-ui/src/app/components/tooltip/snippets.ts b/docs-ui/src/app/components/tooltip/snippets.ts new file mode 100644 index 0000000000..1cf9fb66da --- /dev/null +++ b/docs-ui/src/app/components/tooltip/snippets.ts @@ -0,0 +1,11 @@ +export const tooltipUsageSnippet = `import { TooltipTrigger, Tooltip, Button } from '@backstage/ui'; + + + + I am a tooltip +`; + +export const defaultSnippet = ` + + I am a tooltip +`; diff --git a/docs-ui/src/app/components/tooltip/stories.tsx b/docs-ui/src/app/components/tooltip/stories.tsx deleted file mode 100644 index 101131db43..0000000000 --- a/docs-ui/src/app/components/tooltip/stories.tsx +++ /dev/null @@ -1,7 +0,0 @@ -'use client'; - -import * as stories from '@backstage/ui/src/components/Tooltip/Tooltip.stories'; - -const { Default: DefaultStory } = stories; - -export const Default = () => ; diff --git a/docs-ui/src/app/components/visually-hidden/components.tsx b/docs-ui/src/app/components/visually-hidden/components.tsx new file mode 100644 index 0000000000..8298465240 --- /dev/null +++ b/docs-ui/src/app/components/visually-hidden/components.tsx @@ -0,0 +1,39 @@ +'use client'; + +import { VisuallyHidden } from '../../../../../packages/ui/src/components/VisuallyHidden/VisuallyHidden'; +import { Text } from '../../../../../packages/ui/src/components/Text/Text'; +import { Flex } from '../../../../../packages/ui/src/components/Flex/Flex'; + +export const Default = () => { + return ( + + + This text is followed by a paragraph that is visually hidden but + accessible to screen readers. Try using a screen reader to hear it, or + inspect the DOM to see it's there. + + + This content is visually hidden but accessible to screen readers + + + ); +}; + +export const ExampleUsage = () => { + return ( + + + Footer links + + + About us + + + Jobs + + + Terms and Conditions + + + ); +}; diff --git a/docs-ui/src/app/components/visually-hidden/page.mdx b/docs-ui/src/app/components/visually-hidden/page.mdx index 98591e502c..07b4bff28d 100644 --- a/docs-ui/src/app/components/visually-hidden/page.mdx +++ b/docs-ui/src/app/components/visually-hidden/page.mdx @@ -1,13 +1,13 @@ import { PropsTable } from '@/components/PropsTable'; import { Snippet } from '@/components/Snippet'; import { CodeBlock } from '@/components/CodeBlock'; -import { Default, ExampleUsage } from './stories'; +import { visuallyHiddenPropDefs } from './props-definition'; import { - visuallyHiddenPropDefs, visuallyHiddenUsageSnippet, - visuallyHiddenDefaultSnippet, - visuallyHiddenExampleUsageSnippet, -} from './visually-hidden.props'; + defaultSnippet, + exampleUsageSnippet, +} from './snippets'; +import { Default, ExampleUsage } from './components'; import { PageTitle } from '@/components/PageTitle'; import { Theming } from '@/components/Theming'; import { VisuallyHiddenDefinition } from '../../../utils/definitions'; @@ -18,12 +18,7 @@ import { ChangelogComponent } from '@/components/ChangelogComponent'; description="Visually hides content while keeping it accessible to screen readers." /> -} - code={visuallyHiddenDefaultSnippet} -/> +} code={defaultSnippet} /> ## Usage @@ -43,7 +38,7 @@ Here's an example of providing screen reader context for a list of links in a fo align="start" py={4} preview={} - code={visuallyHiddenExampleUsageSnippet} + code={exampleUsageSnippet} open /> diff --git a/docs-ui/src/app/components/visually-hidden/props-definition.ts b/docs-ui/src/app/components/visually-hidden/props-definition.ts new file mode 100644 index 0000000000..c57270c733 --- /dev/null +++ b/docs-ui/src/app/components/visually-hidden/props-definition.ts @@ -0,0 +1,15 @@ +import { + classNamePropDefs, + stylePropDefs, + type PropDef, +} from '@/utils/propDefs'; + +export const visuallyHiddenPropDefs: Record = { + children: { + type: 'enum', + values: ['ReactNode'], + responsive: false, + }, + ...classNamePropDefs, + ...stylePropDefs, +}; diff --git a/docs-ui/src/app/components/visually-hidden/visually-hidden.props.ts b/docs-ui/src/app/components/visually-hidden/snippets.ts similarity index 63% rename from docs-ui/src/app/components/visually-hidden/visually-hidden.props.ts rename to docs-ui/src/app/components/visually-hidden/snippets.ts index 18a1c503d1..21ce6a04de 100644 --- a/docs-ui/src/app/components/visually-hidden/visually-hidden.props.ts +++ b/docs-ui/src/app/components/visually-hidden/snippets.ts @@ -1,26 +1,10 @@ -import { - classNamePropDefs, - stylePropDefs, - type PropDef, -} from '@/utils/propDefs'; - -export const visuallyHiddenPropDefs: Record = { - children: { - type: 'enum', - values: ['ReactNode'], - responsive: false, - }, - ...classNamePropDefs, - ...stylePropDefs, -}; - export const visuallyHiddenUsageSnippet = `import { VisuallyHidden } from '@backstage/ui'; This content is visually hidden but accessible to screen readers `; -export const visuallyHiddenDefaultSnippet = ` +export const defaultSnippet = ` This text is followed by a paragraph that is visually hidden but accessible to screen readers. Try using a screen reader to hear it, or @@ -31,7 +15,7 @@ export const visuallyHiddenDefaultSnippet = ` `; -export const visuallyHiddenExampleUsageSnippet = ` +export const exampleUsageSnippet = ` Footer links diff --git a/docs-ui/src/app/components/visually-hidden/stories.tsx b/docs-ui/src/app/components/visually-hidden/stories.tsx deleted file mode 100644 index 2edefe0f94..0000000000 --- a/docs-ui/src/app/components/visually-hidden/stories.tsx +++ /dev/null @@ -1,8 +0,0 @@ -'use client'; - -import * as stories from '@backstage/ui/src/components/VisuallyHidden/VisuallyHidden.stories'; - -const { Default: DefaultStory, ExampleUsage: ExampleUsageStory } = stories; - -export const Default = () => ; -export const ExampleUsage = () => ; From 8e4fc4234849d67b1a9a9d1c1656d0116d2315ae Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Thu, 15 Jan 2026 17:49:42 +0100 Subject: [PATCH 4/6] Fixes a few docs pages Signed-off-by: Charles de Dreuille --- .../src/app/components/card/components.tsx | 2 +- .../src/app/components/menu/components.tsx | 46 ++- .../components/search-field/components.tsx | 12 +- .../src/app/components/table/components.tsx | 309 ++++++++++-------- .../toggle-button-group/components.tsx | 215 ++++++++---- .../components/toggle-button-group/page.mdx | 94 +++++- .../toggle-button-group/snippets.ts | 152 ++++++--- .../components/toggle-button/components.tsx | 2 +- 8 files changed, 538 insertions(+), 294 deletions(-) diff --git a/docs-ui/src/app/components/card/components.tsx b/docs-ui/src/app/components/card/components.tsx index 89ab09d47d..08fa940be8 100644 --- a/docs-ui/src/app/components/card/components.tsx +++ b/docs-ui/src/app/components/card/components.tsx @@ -10,7 +10,7 @@ import { Text } from '../../../../../packages/ui/src/components/Text/Text'; export const Default = () => { return ( - + Header Body Footer diff --git a/docs-ui/src/app/components/menu/components.tsx b/docs-ui/src/app/components/menu/components.tsx index 1c9aa2598d..d4ddfbf4ba 100644 --- a/docs-ui/src/app/components/menu/components.tsx +++ b/docs-ui/src/app/components/menu/components.tsx @@ -12,17 +12,35 @@ import { } from '../../../../../packages/ui/src/components/Menu/Menu'; import { Button } from '../../../../../packages/ui/src/components/Button/Button'; import { MemoryRouter } from 'react-router-dom'; -import { RiFileLine, RiFolderLine, RiImageLine } from '@remixicon/react'; +import { + RiChat1Line, + RiFileLine, + RiFolderLine, + RiImageLine, + RiSettingsLine, + RiShareBoxLine, +} from '@remixicon/react'; export const Preview = () => ( - + - New File - Open File - Save - Save As... + Edit + Duplicate + Rename + + }>Share + }>Feedback + + + }>Settings + + Edit + Duplicate + Rename + + @@ -53,9 +71,9 @@ export const PreviewIcons = () => ( - }>New File - }>New Folder - }>New Image + }>New File + }>New Folder + }>New Image @@ -110,7 +128,7 @@ export const PreviewSeparators = () => ( export const PreviewAutocompleteMenu = () => ( - + Option 1 Option 2 Option 3 @@ -120,7 +138,7 @@ export const PreviewAutocompleteMenu = () => ( export const PreviewAutocompleteListbox = () => ( - + Option 1 Option 2 Option 3 @@ -130,11 +148,7 @@ export const PreviewAutocompleteListbox = () => ( export const PreviewAutocompleteListboxMultiple = () => ( - + Option 1 Option 2 Option 3 diff --git a/docs-ui/src/app/components/search-field/components.tsx b/docs-ui/src/app/components/search-field/components.tsx index 753f6ecd73..33a6ba3540 100644 --- a/docs-ui/src/app/components/search-field/components.tsx +++ b/docs-ui/src/app/components/search-field/components.tsx @@ -2,10 +2,16 @@ import { SearchField } from '../../../../../packages/ui/src/components/SearchField/SearchField'; import { Flex } from '../../../../../packages/ui/src/components/Flex/Flex'; -import { RiEBike2Line } from '@remixicon/react'; export const WithLabel = () => { - return ; + return ( + + ); }; export const Sizes = () => { @@ -24,6 +30,7 @@ export const WithDescription = () => { label="Label" description="Description" aria-label="Search" + style={{ width: '100%', maxWidth: '300px' }} /> ); }; @@ -45,7 +52,6 @@ export const StartCollapsed = () => { startCollapsed /> - ); }; diff --git a/docs-ui/src/app/components/table/components.tsx b/docs-ui/src/app/components/table/components.tsx index 8850d3a214..cb158579a1 100644 --- a/docs-ui/src/app/components/table/components.tsx +++ b/docs-ui/src/app/components/table/components.tsx @@ -1,163 +1,188 @@ 'use client'; -import dynamic from 'next/dynamic'; - -// Import Table components dynamically with ssr: false to avoid SSR issues -const TableComponents = dynamic( - () => - import('../../../../../packages/ui/src/components/Table').then(mod => ({ - default: () => null, // Placeholder - Table: mod.Table, - TableHeader: mod.TableHeader, - Column: mod.Column, - TableBody: mod.TableBody, - Row: mod.Row, - Cell: mod.Cell, - })), - { ssr: false }, -); - import { Table, - TableHeader, - Column, - TableBody, - Row, - Cell, + CellProfile, + CellText, + type ColumnConfig, + useTable, } from '../../../../../packages/ui/src/components/Table'; +import { Flex } from '../../../../../packages/ui/src/components/Flex/Flex'; +import { Text } from '../../../../../packages/ui/src/components/Text/Text'; +import { RadioGroup } from '../../../../../packages/ui/src/components/RadioGroup/RadioGroup'; +import { Radio } from '../../../../../packages/ui/src/components/RadioGroup'; +import { data as data4 } from '../../../../../packages/ui/src/components/Table/stories/mocked-data4'; import { useState } from 'react'; -import type { Selection } from 'react-aria-components'; +import { + selectionData, + selectionColumns, +} from '../../../../../packages/ui/src/components/Table/stories/utils'; +import { MemoryRouter } from 'react-router-dom'; -const rockBands = [ - { id: 1, name: 'The Beatles', genre: 'Rock', year: 1960 }, - { id: 2, name: 'Led Zeppelin', genre: 'Hard Rock', year: 1968 }, - { id: 3, name: 'Pink Floyd', genre: 'Progressive Rock', year: 1965 }, - { id: 4, name: 'The Rolling Stones', genre: 'Rock', year: 1962 }, - { id: 5, name: 'Queen', genre: 'Rock', year: 1970 }, +type Data4Item = (typeof data4)[0]; + +const columns: ColumnConfig[] = [ + { + id: 'name', + label: 'Band name', + isRowHeader: true, + cell: item => ( + + ), + }, + { + id: 'genre', + label: 'Genre', + cell: item => , + }, + { + id: 'yearFormed', + label: 'Year formed', + cell: item => , + }, + { + id: 'albums', + label: 'Albums', + cell: item => , + }, ]; -// Simple wrapper to ensure client-side only rendering -const ClientOnly = ({ children }: { children: React.ReactNode }) => { - const [mounted, setMounted] = useState(false); - - useState(() => { - if (typeof window !== 'undefined') { - setMounted(true); - } +export const TableRockBand = () => { + const { tableProps } = useTable({ + mode: 'complete', + getData: () => data4, + paginationOptions: { pageSize: 5 }, }); - if (!mounted) return
Loading...
; - return <>{children}; -}; - -export const TableRockBand = () => ( - - - - Name - Genre - Year - - - {rockBands.map(band => ( - - {band.name} - {band.genre} - {band.year} - - ))} - -
- -); - -export const SelectionModePlayground = () => { - const [selectedKeys, setSelectedKeys] = useState(new Set()); - return ( - - - - Name - Genre - Year - - - {rockBands.map(band => ( - - {band.name} - {band.genre} - {band.year} - - ))} - -
- - ); -}; - -export const SelectionBehaviorPlayground = () => { - const [selectedKeys, setSelectedKeys] = useState(new Set()); - - return ( - - - - Name - Genre - Year - - - {rockBands.map(band => ( - - {band.name} - {band.genre} - {band.year} - - ))} - -
- + + + ); }; export const SelectionToggleWithActions = () => { - const [selectedKeys, setSelectedKeys] = useState(new Set()); + const [selected, setSelected] = useState | 'all'>( + new Set(), + ); + + const { tableProps } = useTable({ + mode: 'complete', + getData: () => selectionData, + paginationOptions: { pageSize: 10 }, + }); return ( - +
- - Name - Genre - Year - - - {rockBands.map(band => ( - - {band.name} - {band.genre} - {band.year} - - ))} - -
- + {...tableProps} + columnConfig={selectionColumns} + selection={{ + mode: 'multiple', + behavior: 'toggle', + selected, + onSelectionChange: setSelected, + }} + rowConfig={{ onClick: item => alert(`Clicked: ${item.name}`) }} + /> + + ); +}; + +export const SelectionModePlayground = () => { + const [selectionMode, setSelectionMode] = useState<'single' | 'multiple'>( + 'multiple', + ); + const [selected, setSelected] = useState | 'all'>( + new Set(), + ); + + const { tableProps } = useTable({ + mode: 'complete', + getData: () => selectionData, + paginationOptions: { pageSize: 10 }, + }); + + return ( + + + +
+ + Selection mode: + + { + setSelectionMode(value as 'single' | 'multiple'); + setSelected(new Set()); + }} + > + single + multiple + +
+ + + ); +}; + +export const SelectionBehaviorPlayground = () => { + const [selectionBehavior, setSelectionBehavior] = useState< + 'toggle' | 'replace' + >('toggle'); + const [selected, setSelected] = useState | 'all'>( + new Set(), + ); + + const { tableProps } = useTable({ + mode: 'complete', + getData: () => selectionData, + paginationOptions: { pageSize: 10 }, + }); + + return ( + + +
+
+ + Selection behavior: + + { + setSelectionBehavior(value as 'toggle' | 'replace'); + setSelected(new Set()); + }} + > + toggle + replace + +
+ + ); }; diff --git a/docs-ui/src/app/components/toggle-button-group/components.tsx b/docs-ui/src/app/components/toggle-button-group/components.tsx index 0812f5d3a5..a6da51f862 100644 --- a/docs-ui/src/app/components/toggle-button-group/components.tsx +++ b/docs-ui/src/app/components/toggle-button-group/components.tsx @@ -2,78 +2,153 @@ import { ToggleButtonGroup } from '../../../../../packages/ui/src/components/ToggleButtonGroup/ToggleButtonGroup'; import { ToggleButton } from '../../../../../packages/ui/src/components/ToggleButton/ToggleButton'; -import { RiBold, RiItalic, RiUnderline } from '@remixicon/react'; -import { useState } from 'react'; +import { Flex } from '../../../../../packages/ui/src/components/Flex/Flex'; +import { Text } from '../../../../../packages/ui/src/components/Text/Text'; +import { + RiCloudLine, + RiStarFill, + RiStarLine, + RiArrowRightSLine, +} from '@remixicon/react'; -export const Default = () => { - const [selected, setSelected] = useState([]); - return ( - setSelected(Array.from(keys as Set))} - > - } /> - } /> - } /> - - ); -}; +export const ToggleButtonGroupSurfaces = () => ( + + + Default + + + Option 1 + Option 2 + Option 3 + + + + + On Surface 0 + + + Option 1 + Option 2 + Option 3 + + + + + On Surface 1 + + + Option 1 + Option 2 + Option 3 + + + + + On Surface 2 + + + Option 1 + Option 2 + Option 3 + + + + + On Surface 3 + + + Option 1 + Option 2 + Option 3 + + + + +); -export const SingleSelection = () => { - const [selected, setSelected] = useState('left'); - return ( - { - const key = Array.from(keys as Set)[0]; - if (key) setSelected(key); - }} - > - Left - Center - Right - - ); -}; +export const ToggleButtonGroupSingle = () => ( + + Dogs + Cats + Birds + +); -export const Sizes = () => { - const [small, setSmall] = useState([]); - const [medium, setMedium] = useState([]); +export const ToggleButtonGroupMultiple = () => ( + + Frontend + Backend + Platform + +); - return ( -
- setSmall(Array.from(keys as Set))} - > - } /> - } /> - } /> - - setMedium(Array.from(keys as Set))} - > - } /> - } /> - } /> - -
- ); -}; +export const ToggleButtonGroupVertical = () => ( + + Morning + Afternoon + Evening + +); -export const Disabled = () => { - return ( - - } /> - } /> - } /> - - ); -}; +export const ToggleButtonGroupDisabled = () => ( + + Cat + Dog + Bird + +); + +export const ToggleButtonGroupDisallowEmpty = () => ( + + One + Two + Three + +); + +export const ToggleButtonGroupIcons = () => ( + + } /> + } + /> + }> + Star + + }> + Next + + +); + +export const ToggleButtonGroupIconsOnly = () => ( + + } /> + } /> + } /> + +); diff --git a/docs-ui/src/app/components/toggle-button-group/page.mdx b/docs-ui/src/app/components/toggle-button-group/page.mdx index 47fb4174a1..4742fff9a5 100644 --- a/docs-ui/src/app/components/toggle-button-group/page.mdx +++ b/docs-ui/src/app/components/toggle-button-group/page.mdx @@ -4,12 +4,25 @@ import { CodeBlock } from '@/components/CodeBlock'; import { toggleButtonGroupPropDefs } from './props-definition'; import { toggleButtonGroupUsageSnippet, - defaultSnippet, - singleSelectionSnippet, - sizesSnippet, - disabledSnippet, + toggleButtonGroupSurfacesSnippet, + toggleButtonGroupSingleSnippet, + toggleButtonGroupMultipleSnippet, + toggleButtonGroupIconsSnippet, + toggleButtonGroupIconsOnlySnippet, + toggleButtonGroupDisallowEmptySnippet, + toggleButtonGroupVerticalSnippet, + toggleButtonGroupDisabledSnippet, } from './snippets'; -import { Default, SingleSelection, Sizes, Disabled } from './components'; +import { + ToggleButtonGroupSingle, + ToggleButtonGroupMultiple, + ToggleButtonGroupVertical, + ToggleButtonGroupDisabled, + ToggleButtonGroupDisallowEmpty, + ToggleButtonGroupIcons, + ToggleButtonGroupIconsOnly, + ToggleButtonGroupSurfaces, +} from './components'; import { PageTitle } from '@/components/PageTitle'; import { Theming } from '@/components/Theming'; import { ChangelogComponent } from '@/components/ChangelogComponent'; @@ -20,7 +33,12 @@ import { ToggleButtonGroupDefinition } from '../../../utils/definitions'; description="A grouping container for related [ToggleButtons](./toggle-button) supporting single or multiple selection." /> -} code={defaultSnippet} /> +} + code={toggleButtonGroupUsageSnippet} +/> ## Usage @@ -32,24 +50,74 @@ import { ToggleButtonGroupDefinition } from '../../../utils/definitions'; ## Examples +### Surfaces + +} + code={toggleButtonGroupSurfacesSnippet} +/> + ### Single Selection } - code={singleSelectionSnippet} + preview={} + code={toggleButtonGroupSingleSnippet} /> -### Sizes +### Multiple Selection } - code={sizesSnippet} + preview={} + code={toggleButtonGroupMultipleSnippet} +/> + +### Icons and Text + +} + code={toggleButtonGroupIconsSnippet} +/> + +### Icons Only + +} + code={toggleButtonGroupIconsOnlySnippet} +/> + +### Disallow Empty Selection + +} + code={toggleButtonGroupDisallowEmptySnippet} +/> + +### Vertical Orientation + +} + code={toggleButtonGroupVerticalSnippet} /> ### Disabled @@ -58,8 +126,8 @@ import { ToggleButtonGroupDefinition } from '../../../utils/definitions'; align="center" py={4} open - preview={} - code={disabledSnippet} + preview={} + code={toggleButtonGroupDisabledSnippet} /> diff --git a/docs-ui/src/app/components/toggle-button-group/snippets.ts b/docs-ui/src/app/components/toggle-button-group/snippets.ts index 4cf3eff70e..099891dbae 100644 --- a/docs-ui/src/app/components/toggle-button-group/snippets.ts +++ b/docs-ui/src/app/components/toggle-button-group/snippets.ts @@ -1,59 +1,115 @@ export const toggleButtonGroupUsageSnippet = `import { ToggleButtonGroup, ToggleButton } from '@backstage/ui'; -import { useState } from 'react'; -const [selected, setSelected] = useState([]); - - setSelected(Array.from(keys))} -> - } /> - } /> - } /> + + Dogs + Cats + Birds `; -export const defaultSnippet = `const [selected, setSelected] = useState([]); - - setSelected(Array.from(keys))} -> - } /> - } /> - } /> +export const toggleButtonGroupSingleSnippet = ` + Dogs + Cats + Birds `; -export const singleSelectionSnippet = `const [selected, setSelected] = useState('left'); - - { - const key = Array.from(keys)[0]; - if (key) setSelected(key); - }} -> - Left - Center - Right +export const toggleButtonGroupMultipleSnippet = ` + Frontend + Backend + Platform `; -export const sizesSnippet = ` - } /> - } /> - } /> - - - - } /> - } /> - } /> +export const toggleButtonGroupVerticalSnippet = ` + Morning + Afternoon + Evening `; -export const disabledSnippet = ` - } /> - } /> - } /> +export const toggleButtonGroupDisabledSnippet = ` + Cat + Dog + Bird `; + +export const toggleButtonGroupDisallowEmptySnippet = ` + One + Two + Three +`; + +export const toggleButtonGroupIconsSnippet = `import { RiCloudLine, RiStarFill, RiStarLine, RiArrowRightSLine } from '@remixicon/react'; + + + } /> + } + /> + }> + Star + + }> + Next + +`; + +export const toggleButtonGroupIconsOnlySnippet = `import { RiCloudLine, RiStarLine, RiArrowRightSLine } from '@remixicon/react'; + + + } /> + } /> + } /> +`; + +export const toggleButtonGroupSurfacesSnippet = ` + + Default + + + Option 1 + Option 2 + Option 3 + + + + + On Surface 0 + + + Option 1 + Option 2 + Option 3 + + + + + On Surface 1 + + + Option 1 + Option 2 + Option 3 + + + + + On Surface 2 + + + Option 1 + Option 2 + Option 3 + + + + + On Surface 3 + + + Option 1 + Option 2 + Option 3 + + + +`; diff --git a/docs-ui/src/app/components/toggle-button/components.tsx b/docs-ui/src/app/components/toggle-button/components.tsx index 017af4eee1..6fa5aada98 100644 --- a/docs-ui/src/app/components/toggle-button/components.tsx +++ b/docs-ui/src/app/components/toggle-button/components.tsx @@ -20,7 +20,7 @@ export const WithIcon = () => { } + iconStart={} > With Icon From fb438cdec3cb3b240ba48c883fefe2f218432c0d Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Thu, 15 Jan 2026 17:59:21 +0100 Subject: [PATCH 5/6] Fix prettier Signed-off-by: Charles de Dreuille --- docs-ui/src/app/components/avatar/page.mdx | 15 +----- .../src/app/components/button-icon/page.mdx | 8 +-- .../src/app/components/button-link/page.mdx | 15 +----- docs-ui/src/app/components/card/page.mdx | 7 +-- docs-ui/src/app/components/dialog/page.mdx | 6 ++- docs-ui/src/app/components/grid/page.mdx | 1 - .../src/app/components/header-page/page.mdx | 38 +++++--------- docs-ui/src/app/components/header/page.mdx | 32 ++++-------- docs-ui/src/app/components/link/page.mdx | 8 ++- docs-ui/src/app/components/menu/page.mdx | 35 +++++-------- .../app/components/password-field/page.mdx | 15 +++--- docs-ui/src/app/components/popover/page.mdx | 7 +-- .../src/app/components/radio-group/page.mdx | 9 +++- .../src/app/components/search-field/page.mdx | 22 ++++---- docs-ui/src/app/components/select/page.mdx | 12 ++++- docs-ui/src/app/components/skeleton/page.mdx | 22 ++------ docs-ui/src/app/components/table/page.mdx | 13 ++--- docs-ui/src/app/components/tabs/page.mdx | 27 ++++------ docs-ui/src/app/components/tag-group/page.mdx | 51 +++++-------------- .../src/app/components/text-field/page.mdx | 15 +++--- docs-ui/src/app/components/text/page.mdx | 30 ++--------- .../src/app/components/toggle-button/page.mdx | 8 +-- 22 files changed, 139 insertions(+), 257 deletions(-) diff --git a/docs-ui/src/app/components/avatar/page.mdx b/docs-ui/src/app/components/avatar/page.mdx index 01e647ef7c..0074eda5b8 100644 --- a/docs-ui/src/app/components/avatar/page.mdx +++ b/docs-ui/src/app/components/avatar/page.mdx @@ -36,13 +36,7 @@ import { ChangelogComponent } from '@/components/ChangelogComponent'; Avatar sizes can be set using the `size` prop. -} - code={sizesSnippet} -/> +} code={sizesSnippet} /> ### Fallback @@ -60,12 +54,7 @@ If the image is not available, the avatar will show the initials of the name. Control how the avatar is announced to screen readers using the `purpose` prop. -} - code={purposeSnippet} -/> +} code={purposeSnippet} /> diff --git a/docs-ui/src/app/components/button-icon/page.mdx b/docs-ui/src/app/components/button-icon/page.mdx index 4fa239959b..776b016671 100644 --- a/docs-ui/src/app/components/button-icon/page.mdx +++ b/docs-ui/src/app/components/button-icon/page.mdx @@ -48,13 +48,7 @@ Here's a view when buttons have different variants. Here's a view when buttons have different sizes. -} - code={sizesSnippet} -/> +} code={sizesSnippet} /> ### Disabled diff --git a/docs-ui/src/app/components/button-link/page.mdx b/docs-ui/src/app/components/button-link/page.mdx index cb2b0c19da..2da3177c55 100644 --- a/docs-ui/src/app/components/button-link/page.mdx +++ b/docs-ui/src/app/components/button-link/page.mdx @@ -20,12 +20,7 @@ import { ChangelogComponent } from '@/components/ChangelogComponent'; description="A button component that can be used as a link." /> -} - code={variantsSnippet} -/> +} code={variantsSnippet} /> ## Usage @@ -53,13 +48,7 @@ Here's a view when buttons have different variants. Here's a view when buttons have different sizes. -} - code={sizesSnippet} -/> +} code={sizesSnippet} /> ### With Icons diff --git a/docs-ui/src/app/components/card/page.mdx b/docs-ui/src/app/components/card/page.mdx index 3f50c7c160..e0b6e81fff 100644 --- a/docs-ui/src/app/components/card/page.mdx +++ b/docs-ui/src/app/components/card/page.mdx @@ -24,12 +24,7 @@ import { ChangelogComponent } from '@/components/ChangelogComponent'; description="A card component that can be used to display content in a box." /> -} - code={defaultSnippet} -/> +} code={defaultSnippet} /> ## Usage diff --git a/docs-ui/src/app/components/dialog/page.mdx b/docs-ui/src/app/components/dialog/page.mdx index 0047b216b1..1910cef5a8 100644 --- a/docs-ui/src/app/components/dialog/page.mdx +++ b/docs-ui/src/app/components/dialog/page.mdx @@ -1,7 +1,11 @@ import { PropsTable } from '@/components/PropsTable'; import { Snippet } from '@/components/Snippet'; import { CodeBlock } from '@/components/CodeBlock'; -import { Default, PreviewFixedWidthAndHeight, PreviewWithForm } from './components'; +import { + Default, + PreviewFixedWidthAndHeight, + PreviewWithForm, +} from './components'; import { dialogPropDefs, dialogTriggerPropDefs, diff --git a/docs-ui/src/app/components/grid/page.mdx b/docs-ui/src/app/components/grid/page.mdx index 7018310ba3..e75f277226 100644 --- a/docs-ui/src/app/components/grid/page.mdx +++ b/docs-ui/src/app/components/grid/page.mdx @@ -36,7 +36,6 @@ The grid component also accepts all the spacing props from the Box component. - diff --git a/docs-ui/src/app/components/header-page/page.mdx b/docs-ui/src/app/components/header-page/page.mdx index faa01ab1c0..cf17bf46b7 100644 --- a/docs-ui/src/app/components/header-page/page.mdx +++ b/docs-ui/src/app/components/header-page/page.mdx @@ -1,7 +1,13 @@ import { PropsTable } from '@/components/PropsTable'; import { CodeBlock } from '@/components/CodeBlock'; import { Snippet } from '@/components/Snippet'; -import { WithEverything, WithLongBreadcrumbs, WithTabs, WithCustomActions, WithMenuItems } from './components'; +import { + WithEverything, + WithLongBreadcrumbs, + WithTabs, + WithCustomActions, + WithMenuItems, +} from './components'; import { propDefs } from './props-definition'; import { usage, @@ -22,11 +28,7 @@ import { ChangelogComponent } from '@/components/ChangelogComponent'; description="A header page component for the plugin that should sit under the Header component." /> -} - code={defaultSnippet} -/> +} code={defaultSnippet} /> ## Usage @@ -43,44 +45,28 @@ import { ChangelogComponent } from '@/components/ChangelogComponent'; You can add breadcrumbs to the header page to help users navigate to the previous page. The `breadcrumbs` prop is an array of objects with a `label` and `href` property. By default we truncate the breadcrumb label to 240px. -} - code={withBreadcrumbs} -/> +} code={withBreadcrumbs} /> ### With Tabs You can add tabs to the header page to help users navigate to the different sections of the page. The `tabs` prop is an array of objects with a `label` and `href` property. -} - code={withTabs} -/> +} code={withTabs} /> ### With Custom Actions You can add custom actions to the header page to help users navigate to the different sections of the page. The `customActions` prop is a React node. -} - code={withCustomActions} -/> +} code={withCustomActions} /> ### With Menu Items You can add menu items to the header page to help users navigate to the different sections of the page. The `menuItems` prop is an array of objects with a `label`, `value` and `onClick` property. -} - code={withMenuItems} -/> +} code={withMenuItems} /> diff --git a/docs-ui/src/app/components/header/page.mdx b/docs-ui/src/app/components/header/page.mdx index ea66cf9703..22343cd6c5 100644 --- a/docs-ui/src/app/components/header/page.mdx +++ b/docs-ui/src/app/components/header/page.mdx @@ -1,7 +1,12 @@ import { PropsTable } from '@/components/PropsTable'; import { CodeBlock } from '@/components/CodeBlock'; import { Snippet } from '@/components/Snippet'; -import { WithAllOptionsAndTabs, WithAllOptions, WithBreadcrumbs, WithHeaderPage } from './components'; +import { + WithAllOptionsAndTabs, + WithAllOptions, + WithBreadcrumbs, + WithHeaderPage, +} from './components'; import { propDefs } from './props-definition'; import { usage, @@ -22,11 +27,7 @@ import { ChangelogComponent } from '@/components/ChangelogComponent'; description="A header component for the plugin." /> -} - code={defaultSnippet} -/> +} code={defaultSnippet} /> ## Usage @@ -42,12 +43,7 @@ import { ChangelogComponent } from '@/components/ChangelogComponent'; A simple example of how to use the Header component. -} - code={simple} - open -/> +} code={simple} open /> ### Header with tabs @@ -65,21 +61,13 @@ open Breacrumbs should appear when you scroll down (and not directly visible as it is in the demo below). -} - code={withBreadcrumbs} - open -/> +} code={withBreadcrumbs} open /> ### Header with HeaderPage You can use the `Header` component inside the [HeaderPage](/components/header-page) component to compose your multi-level navigation. -} - code={withHeaderPage} - open -/> +} code={withHeaderPage} open /> diff --git a/docs-ui/src/app/components/link/page.mdx b/docs-ui/src/app/components/link/page.mdx index b138067a26..fb44c7084f 100644 --- a/docs-ui/src/app/components/link/page.mdx +++ b/docs-ui/src/app/components/link/page.mdx @@ -10,7 +10,13 @@ import { allColorsSnippet, underlineSnippet, } from './snippets'; -import { Default, ExternalLink, AllVariants, AllColors, Underline } from './components'; +import { + Default, + ExternalLink, + AllVariants, + AllColors, + Underline, +} from './components'; import { PageTitle } from '@/components/PageTitle'; import { Theming } from '@/components/Theming'; import { ChangelogComponent } from '@/components/ChangelogComponent'; diff --git a/docs-ui/src/app/components/menu/page.mdx b/docs-ui/src/app/components/menu/page.mdx index 7d22397ff2..86f2778e01 100644 --- a/docs-ui/src/app/components/menu/page.mdx +++ b/docs-ui/src/app/components/menu/page.mdx @@ -1,7 +1,17 @@ import { PropsTable } from '@/components/PropsTable'; import { Snippet } from '@/components/Snippet'; import { CodeBlock } from '@/components/CodeBlock'; -import { Preview, PreviewSubmenu, PreviewIcons, PreviewLinks, PreviewSections, PreviewSeparators, PreviewAutocompleteMenu, PreviewAutocompleteListbox, PreviewAutocompleteListboxMultiple } from './components'; +import { + Preview, + PreviewSubmenu, + PreviewIcons, + PreviewLinks, + PreviewSections, + PreviewSeparators, + PreviewAutocompleteMenu, + PreviewAutocompleteListbox, + PreviewAutocompleteListboxMultiple, +} from './components'; import { menuTriggerPropDefs, submenuTriggerPropDefs, @@ -36,12 +46,7 @@ import { MenuDefinition } from '../../../utils/definitions'; description="A list of actions in a dropdown, enhanced with keyboard navigation." /> -} - code={preview} -/> +} code={preview} /> ## Usage @@ -152,26 +157,14 @@ the submenu is displayed in the correct position. The best practice is to use th You can use the `iconStart` prop to add an icon to the menu item. -} - code={icons} -/> +} code={icons} /> ### With links You can use the `href` prop to add a link to the menu item. This is using our router provider under the hood to work for both internal and external links. -} - code={links} -/> +} code={links} /> ### With sections diff --git a/docs-ui/src/app/components/password-field/page.mdx b/docs-ui/src/app/components/password-field/page.mdx index 50d52cd939..5cd556e2fb 100644 --- a/docs-ui/src/app/components/password-field/page.mdx +++ b/docs-ui/src/app/components/password-field/page.mdx @@ -19,7 +19,12 @@ import { PasswordFieldDefinition } from '../../../utils/definitions'; description="A password field component for your forms." /> -} code={withLabelSnippet} /> +} + code={withLabelSnippet} +/> ## Usage @@ -35,13 +40,7 @@ import { PasswordFieldDefinition } from '../../../utils/definitions'; We support two different sizes: `small`, `medium`. -} - code={sizesSnippet} -/> +} code={sizesSnippet} /> ### With description diff --git a/docs-ui/src/app/components/popover/page.mdx b/docs-ui/src/app/components/popover/page.mdx index b0d943d673..5a3b0e990c 100644 --- a/docs-ui/src/app/components/popover/page.mdx +++ b/docs-ui/src/app/components/popover/page.mdx @@ -14,12 +14,7 @@ import { ChangelogComponent } from '@/components/ChangelogComponent'; description="A popover displays floating content anchored to a trigger element with automatic positioning and collision detection." /> -} - code={defaultSnippet} -/> +} code={defaultSnippet} /> ## Usage diff --git a/docs-ui/src/app/components/radio-group/page.mdx b/docs-ui/src/app/components/radio-group/page.mdx index a0a1fc36b5..9f76c0be9c 100644 --- a/docs-ui/src/app/components/radio-group/page.mdx +++ b/docs-ui/src/app/components/radio-group/page.mdx @@ -10,7 +10,14 @@ import { validationSnippet, readOnlySnippet, } from './snippets'; -import { Default, Horizontal, Disabled, DisabledSingle, Validation, ReadOnly } from './components'; +import { + Default, + Horizontal, + Disabled, + DisabledSingle, + Validation, + ReadOnly, +} from './components'; import { PageTitle } from '@/components/PageTitle'; import { Theming } from '@/components/Theming'; import { ChangelogComponent } from '@/components/ChangelogComponent'; diff --git a/docs-ui/src/app/components/search-field/page.mdx b/docs-ui/src/app/components/search-field/page.mdx index 59b1197e7b..f5b7054361 100644 --- a/docs-ui/src/app/components/search-field/page.mdx +++ b/docs-ui/src/app/components/search-field/page.mdx @@ -8,7 +8,12 @@ import { withDescriptionSnippet, startCollapsedSnippet, } from './snippets'; -import { WithLabel, Sizes, WithDescription, StartCollapsed } from './components'; +import { + WithLabel, + Sizes, + WithDescription, + StartCollapsed, +} from './components'; import { PageTitle } from '@/components/PageTitle'; import { Theming } from '@/components/Theming'; import { ChangelogComponent } from '@/components/ChangelogComponent'; @@ -20,7 +25,12 @@ import { SearchFieldDefinition } from '../../../utils/definitions'; description="A SearchField is a text field designed for searches." /> -} code={withLabelSnippet} /> +} + code={withLabelSnippet} +/> ## Usage @@ -36,13 +46,7 @@ import { SearchFieldDefinition } from '../../../utils/definitions'; We support two different sizes: `small`, `medium`. -} - code={sizesSnippet} -/> +} code={sizesSnippet} /> ### With description diff --git a/docs-ui/src/app/components/select/page.mdx b/docs-ui/src/app/components/select/page.mdx index d394fd698e..08e29c4a29 100644 --- a/docs-ui/src/app/components/select/page.mdx +++ b/docs-ui/src/app/components/select/page.mdx @@ -1,7 +1,17 @@ import { PropsTable } from '@/components/PropsTable'; import { Snippet } from '@/components/Snippet'; import { CodeBlock } from '@/components/CodeBlock'; -import { Preview, WithLabelAndDescription, Sizes, WithIcon, Disabled, DisabledOption, Searchable, MultipleSelection, SearchableMultiple } from './components'; +import { + Preview, + WithLabelAndDescription, + Sizes, + WithIcon, + Disabled, + DisabledOption, + Searchable, + MultipleSelection, + SearchableMultiple, +} from './components'; import { selectPropDefs } from './props-definition'; import { selectUsageSnippet, diff --git a/docs-ui/src/app/components/skeleton/page.mdx b/docs-ui/src/app/components/skeleton/page.mdx index 21eb35ac5f..42f8975b5a 100644 --- a/docs-ui/src/app/components/skeleton/page.mdx +++ b/docs-ui/src/app/components/skeleton/page.mdx @@ -2,11 +2,7 @@ import { PropsTable } from '@/components/PropsTable'; import { Snippet } from '@/components/Snippet'; import { CodeBlock } from '@/components/CodeBlock'; import { skeletonPropDefs } from './props-definition'; -import { - skeletonUsageSnippet, - demo1Snippet, - demo2Snippet, -} from './snippets'; +import { skeletonUsageSnippet, demo1Snippet, demo2Snippet } from './snippets'; import { Demo1, Demo2 } from './components'; import { PageTitle } from '@/components/PageTitle'; import { Theming } from '@/components/Theming'; @@ -34,25 +30,13 @@ import { SkeletonDefinition } from '../../../utils/definitions'; You can use a mix of different sizes to create a more complex skeleton. -} - code={demo1Snippet} - open -/> +} code={demo1Snippet} open /> ### Demo 2 You can use a mix of different sizes to create a more complex skeleton. -} - code={demo2Snippet} - open -/> +} code={demo2Snippet} open /> diff --git a/docs-ui/src/app/components/table/page.mdx b/docs-ui/src/app/components/table/page.mdx index d3461124d2..f9b27cd8d3 100644 --- a/docs-ui/src/app/components/table/page.mdx +++ b/docs-ui/src/app/components/table/page.mdx @@ -1,7 +1,12 @@ import { PropsTable } from '@/components/PropsTable'; import { Snippet } from '@/components/Snippet'; import { CodeBlock } from '@/components/CodeBlock'; -import { TableRockBand, SelectionModePlayground, SelectionBehaviorPlayground, SelectionToggleWithActions } from './components'; +import { + TableRockBand, + SelectionModePlayground, + SelectionBehaviorPlayground, + SelectionToggleWithActions, +} from './components'; import { tablePropDefs, tableHeaderPropDefs, @@ -28,11 +33,7 @@ import { TableDefinition } from '../../../utils/definitions'; description="A flexible table component built on top of TanStack Table with built-in styling, interactions, and pagination support." /> -} - code={tableBasicSnippet} -/> +} code={tableBasicSnippet} /> ## Usage diff --git a/docs-ui/src/app/components/tabs/page.mdx b/docs-ui/src/app/components/tabs/page.mdx index 0c51b96471..0b9478a503 100644 --- a/docs-ui/src/app/components/tabs/page.mdx +++ b/docs-ui/src/app/components/tabs/page.mdx @@ -14,7 +14,12 @@ import { disabledTabsSnippet, orientationSnippet, } from './snippets'; -import { Default, DefaultSelectedKey, DisabledTabs, Orientation } from './components'; +import { + Default, + DefaultSelectedKey, + DisabledTabs, + Orientation, +} from './components'; import { PageTitle } from '@/components/PageTitle'; import { Theming } from '@/components/Theming'; import { TabsDefinition } from '../../../utils/definitions'; @@ -25,11 +30,7 @@ import { ChangelogComponent } from '@/components/ChangelogComponent'; description="A component for toggling between related panels on the same page." /> -} - code={defaultSnippet} -/> +} code={defaultSnippet} /> ## Usage @@ -66,23 +67,13 @@ Here's how to set which tab is selected by default. Here's how to disable specific tabs. -} - code={disabledTabsSnippet} - open -/> +} code={disabledTabsSnippet} open /> ### Orientation Here's how to display tabs vertically. -} - code={orientationSnippet} - open -/> +} code={orientationSnippet} open /> diff --git a/docs-ui/src/app/components/tag-group/page.mdx b/docs-ui/src/app/components/tag-group/page.mdx index 098179f623..2c6226284f 100644 --- a/docs-ui/src/app/components/tag-group/page.mdx +++ b/docs-ui/src/app/components/tag-group/page.mdx @@ -1,11 +1,15 @@ import { PropsTable } from '@/components/PropsTable'; import { Snippet } from '@/components/Snippet'; import { CodeBlock } from '@/components/CodeBlock'; -import { Default, WithLink, WithIcon, Sizes, RemovingTags, Disabled } from './components'; import { - tagGroupPropDefs, - tagPropDefs, -} from './props-definition'; + Default, + WithLink, + WithIcon, + Sizes, + RemovingTags, + Disabled, +} from './components'; +import { tagGroupPropDefs, tagPropDefs } from './props-definition'; import { usage, preview, @@ -25,12 +29,7 @@ import { ChangelogComponent } from '@/components/ChangelogComponent'; description="A tag group is a list of labels, categories, keywords, filters, or other items, that can be used to group and filter content." /> -} - code={preview} -/> +} code={preview} /> ## Usage @@ -56,37 +55,19 @@ A tag is a single item in a tag group. A tag can be a link by passing a `href` prop. -} - code={withLink} -/> +} code={withLink} /> ### With Icons A tag can have an icon by passing a `icon` prop. -} - code={withIcons} -/> +} code={withIcons} /> ### Sizes A tag can have a size by passing a `size` prop. It could be `small` or `medium`. -} - code={sizes} -/> +} code={sizes} /> ### Removing tags @@ -104,13 +85,7 @@ A tag can be removed by passing a `onRemove` prop. A switch can be disabled using the `isDisabled` prop. -} - code={disabled} -/> +} code={disabled} /> diff --git a/docs-ui/src/app/components/text-field/page.mdx b/docs-ui/src/app/components/text-field/page.mdx index 7824de6842..0fd19d35f3 100644 --- a/docs-ui/src/app/components/text-field/page.mdx +++ b/docs-ui/src/app/components/text-field/page.mdx @@ -19,7 +19,12 @@ import { CodeBlock } from '@/components/CodeBlock'; description="A text field component for your forms." /> -} code={withLabelSnippet} /> +} + code={withLabelSnippet} +/> ## Usage @@ -35,13 +40,7 @@ import { CodeBlock } from '@/components/CodeBlock'; We support two different sizes: `small`, `medium`. -} - code={sizesSnippet} -/> +} code={sizesSnippet} /> ### With description diff --git a/docs-ui/src/app/components/text/page.mdx b/docs-ui/src/app/components/text/page.mdx index aff78e17ef..0bf07f73e7 100644 --- a/docs-ui/src/app/components/text/page.mdx +++ b/docs-ui/src/app/components/text/page.mdx @@ -21,11 +21,7 @@ import { ChangelogComponent } from '@/components/ChangelogComponent'; description="The `Text` component is used to display content on your page." /> -} - code={defaultSnippet} -/> +} code={defaultSnippet} /> ## Usage @@ -42,43 +38,27 @@ import { ChangelogComponent } from '@/components/ChangelogComponent'; The `Text` component has a `variant` prop that can be used to change the appearance of the text. -} - code={variantsSnippet} -/> +} code={variantsSnippet} /> ### All weights The `Text` component has a `weight` prop that can be used to change the appearance of the text. -} - code={weightsSnippet} -/> +} code={weightsSnippet} /> ### All colors The `Text` component has a `color` prop that can be used to change the appearance of the text. -} - code={colorsSnippet} -/> +} code={colorsSnippet} /> ### Truncate The `Text` component has a `truncate` prop that can be used to truncate the text. -} - code={truncateSnippet} -/> +} code={truncateSnippet} /> diff --git a/docs-ui/src/app/components/toggle-button/page.mdx b/docs-ui/src/app/components/toggle-button/page.mdx index d2707fe84e..776144d089 100644 --- a/docs-ui/src/app/components/toggle-button/page.mdx +++ b/docs-ui/src/app/components/toggle-button/page.mdx @@ -49,13 +49,7 @@ import { ToggleButtonDefinition } from '../../../utils/definitions'; ### Sizes -} - code={sizesSnippet} -/> +} code={sizesSnippet} /> ### Disabled From 532574d802524c556c793286673c133efd7a49c7 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Thu, 15 Jan 2026 23:19:21 +0100 Subject: [PATCH 6/6] Remove Storybook Signed-off-by: Charles de Dreuille --- docs-ui/package.json | 4 +- docs-ui/src/components/Roadmap/Roadmap.tsx | 37 -- docs-ui/src/components/Roadmap/index.ts | 1 - docs-ui/src/components/Roadmap/list.ts | 47 -- docs-ui/src/components/Roadmap/styles.css | 100 ---- docs-ui/yarn.lock | 576 +-------------------- 6 files changed, 7 insertions(+), 758 deletions(-) delete mode 100644 docs-ui/src/components/Roadmap/Roadmap.tsx delete mode 100644 docs-ui/src/components/Roadmap/index.ts delete mode 100644 docs-ui/src/components/Roadmap/list.ts delete mode 100644 docs-ui/src/components/Roadmap/styles.css diff --git a/docs-ui/package.json b/docs-ui/package.json index 2f17987107..ce9b8d070f 100644 --- a/docs-ui/package.json +++ b/docs-ui/package.json @@ -26,7 +26,6 @@ "@mdx-js/react": "^3.1.0", "@next/mdx": "15.5.7", "@remixicon/react": "^4.6.0", - "@storybook/react": "^8.6.12", "@uiw/codemirror-themes": "^4.23.7", "@uiw/react-codemirror": "^4.23.7", "clsx": "^2.1.1", @@ -37,8 +36,7 @@ "prop-types": "^15.8.1", "react": "19.1.1", "react-dom": "19.1.1", - "shiki": "^3.13.0", - "storybook": "^8.6.15" + "shiki": "^3.13.0" }, "devDependencies": { "@octokit/rest": "^22.0.1", diff --git a/docs-ui/src/components/Roadmap/Roadmap.tsx b/docs-ui/src/components/Roadmap/Roadmap.tsx deleted file mode 100644 index 52f96e0f76..0000000000 --- a/docs-ui/src/components/Roadmap/Roadmap.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { RoadmapItem } from './list'; - -export const Roadmap = ({ list }: { list: RoadmapItem[] }) => { - const orderList = ['inProgress', 'notStarted', 'completed']; - return ( -
- {list - .sort( - (a, b) => orderList.indexOf(a.status) - orderList.indexOf(b.status), - ) - .map(Item)} -
- ); -}; - -const Item = ({ - title, - status = 'notStarted', -}: { - title: string; - status: 'notStarted' | 'inProgress' | 'inReview' | 'completed'; -}) => { - return ( -
-
-
-
{title}
-
- - {status === 'notStarted' && 'Not Started'} - {status === 'inProgress' && 'In Progress'} - {status === 'inReview' && 'Ready for Review'} - {status === 'completed' && 'Completed'} - -
- ); -}; diff --git a/docs-ui/src/components/Roadmap/index.ts b/docs-ui/src/components/Roadmap/index.ts deleted file mode 100644 index c7006073d6..0000000000 --- a/docs-ui/src/components/Roadmap/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { Roadmap } from './Roadmap'; diff --git a/docs-ui/src/components/Roadmap/list.ts b/docs-ui/src/components/Roadmap/list.ts deleted file mode 100644 index 24b9197cf5..0000000000 --- a/docs-ui/src/components/Roadmap/list.ts +++ /dev/null @@ -1,47 +0,0 @@ -export type RoadmapItem = { - title: string; - status: 'notStarted' | 'inProgress' | 'inReview' | 'completed'; -}; - -export const list: RoadmapItem[] = [ - { - title: 'Remove Vanilla Extract and use pure CSS instead', - status: 'inProgress', - }, - { - title: 'Add collapsing across breakpoints for the Inline component', - status: 'notStarted', - }, - { - title: 'Add reversing the order for the Inline component', - status: 'notStarted', - }, - { - title: 'Set up Storybook', - status: 'completed', - }, - { - title: 'Set up iconography', - status: 'completed', - }, - { - title: 'Set up global tokens', - status: 'inProgress', - }, - { - title: 'Set up theming system', - status: 'inProgress', - }, - { - title: 'Create first pass at box component', - status: 'completed', - }, - { - title: 'Create first pass at stack component', - status: 'completed', - }, - { - title: 'Create first pass at inline component', - status: 'completed', - }, -]; diff --git a/docs-ui/src/components/Roadmap/styles.css b/docs-ui/src/components/Roadmap/styles.css deleted file mode 100644 index 63f32312e7..0000000000 --- a/docs-ui/src/components/Roadmap/styles.css +++ /dev/null @@ -1,100 +0,0 @@ -.roadmap { - display: flex; - flex-direction: column; -} - -.roadmap .roadmap-item { - display: flex; - align-items: center; - justify-content: space-between; - border-bottom: 1px solid #e0e0e0; - padding: 8px 0px; -} - -.roadmap .roadmap-item .left { - display: flex; - align-items: center; - padding-left: 12px; - gap: 12px; -} - -.roadmap .roadmap-item .dot { - width: 8px; - height: 8px; - border-radius: 50%; - background-color: #e0e0e0; -} - -.roadmap .roadmap-item.notStarted { - color: #000; -} - -.roadmap .roadmap-item.inProgress { - color: #000; -} - -.roadmap .roadmap-item.inReview { - color: #000; -} - -.roadmap .roadmap-item.completed .title { - color: #a2a2a2; - text-decoration: line-through; -} - -.roadmap .roadmap-item.notStarted .dot { - background-color: #d1d1d1; -} - -.roadmap .roadmap-item.inProgress .dot { - background-color: #ffd000; -} - -.roadmap .roadmap-item.inReview .dot { - background-color: #4ed14a; -} - -.roadmap .roadmap-item.completed .dot { - background-color: #4ed14a; -} - -.roadmap .roadmap-item .title { - font-size: 16px; -} - -.roadmap .roadmap-item .pill { - display: inline-flex; - align-items: center; - height: 24px; - padding: 0px 8px; - border-radius: 40px; - font-size: 12px; - font-weight: 600; - margin-left: 8px; - border-style: solid; - border-width: 1px; -} - -.roadmap .roadmap-item.notStarted .pill { - background-color: #f2f2f2; - border-color: #cdcdcd; - color: #888888; -} - -.roadmap .roadmap-item.inProgress .pill { - background-color: #fff2b9; - border-color: #ffd000; - color: #d79927; -} - -.roadmap .roadmap-item.inReview .pill { - background-color: #d7f9d7; - border-color: #4ed14a; - color: #3a9837; -} - -.roadmap .roadmap-item.completed .pill { - background-color: #d7f9d7; - border-color: #4ed14a; - color: #3a9837; -} diff --git a/docs-ui/yarn.lock b/docs-ui/yarn.lock index 19ce3640f5..c9b872f91e 100644 --- a/docs-ui/yarn.lock +++ b/docs-ui/yarn.lock @@ -218,188 +218,6 @@ __metadata: languageName: node linkType: hard -"@esbuild/aix-ppc64@npm:0.25.9": - version: 0.25.9 - resolution: "@esbuild/aix-ppc64@npm:0.25.9" - conditions: os=aix & cpu=ppc64 - languageName: node - linkType: hard - -"@esbuild/android-arm64@npm:0.25.9": - version: 0.25.9 - resolution: "@esbuild/android-arm64@npm:0.25.9" - conditions: os=android & cpu=arm64 - languageName: node - linkType: hard - -"@esbuild/android-arm@npm:0.25.9": - version: 0.25.9 - resolution: "@esbuild/android-arm@npm:0.25.9" - conditions: os=android & cpu=arm - languageName: node - linkType: hard - -"@esbuild/android-x64@npm:0.25.9": - version: 0.25.9 - resolution: "@esbuild/android-x64@npm:0.25.9" - conditions: os=android & cpu=x64 - languageName: node - linkType: hard - -"@esbuild/darwin-arm64@npm:0.25.9": - version: 0.25.9 - resolution: "@esbuild/darwin-arm64@npm:0.25.9" - conditions: os=darwin & cpu=arm64 - languageName: node - linkType: hard - -"@esbuild/darwin-x64@npm:0.25.9": - version: 0.25.9 - resolution: "@esbuild/darwin-x64@npm:0.25.9" - conditions: os=darwin & cpu=x64 - languageName: node - linkType: hard - -"@esbuild/freebsd-arm64@npm:0.25.9": - version: 0.25.9 - resolution: "@esbuild/freebsd-arm64@npm:0.25.9" - conditions: os=freebsd & cpu=arm64 - languageName: node - linkType: hard - -"@esbuild/freebsd-x64@npm:0.25.9": - version: 0.25.9 - resolution: "@esbuild/freebsd-x64@npm:0.25.9" - conditions: os=freebsd & cpu=x64 - languageName: node - linkType: hard - -"@esbuild/linux-arm64@npm:0.25.9": - version: 0.25.9 - resolution: "@esbuild/linux-arm64@npm:0.25.9" - conditions: os=linux & cpu=arm64 - languageName: node - linkType: hard - -"@esbuild/linux-arm@npm:0.25.9": - version: 0.25.9 - resolution: "@esbuild/linux-arm@npm:0.25.9" - conditions: os=linux & cpu=arm - languageName: node - linkType: hard - -"@esbuild/linux-ia32@npm:0.25.9": - version: 0.25.9 - resolution: "@esbuild/linux-ia32@npm:0.25.9" - conditions: os=linux & cpu=ia32 - languageName: node - linkType: hard - -"@esbuild/linux-loong64@npm:0.25.9": - version: 0.25.9 - resolution: "@esbuild/linux-loong64@npm:0.25.9" - conditions: os=linux & cpu=loong64 - languageName: node - linkType: hard - -"@esbuild/linux-mips64el@npm:0.25.9": - version: 0.25.9 - resolution: "@esbuild/linux-mips64el@npm:0.25.9" - conditions: os=linux & cpu=mips64el - languageName: node - linkType: hard - -"@esbuild/linux-ppc64@npm:0.25.9": - version: 0.25.9 - resolution: "@esbuild/linux-ppc64@npm:0.25.9" - conditions: os=linux & cpu=ppc64 - languageName: node - linkType: hard - -"@esbuild/linux-riscv64@npm:0.25.9": - version: 0.25.9 - resolution: "@esbuild/linux-riscv64@npm:0.25.9" - conditions: os=linux & cpu=riscv64 - languageName: node - linkType: hard - -"@esbuild/linux-s390x@npm:0.25.9": - version: 0.25.9 - resolution: "@esbuild/linux-s390x@npm:0.25.9" - conditions: os=linux & cpu=s390x - languageName: node - linkType: hard - -"@esbuild/linux-x64@npm:0.25.9": - version: 0.25.9 - resolution: "@esbuild/linux-x64@npm:0.25.9" - conditions: os=linux & cpu=x64 - languageName: node - linkType: hard - -"@esbuild/netbsd-arm64@npm:0.25.9": - version: 0.25.9 - resolution: "@esbuild/netbsd-arm64@npm:0.25.9" - conditions: os=netbsd & cpu=arm64 - languageName: node - linkType: hard - -"@esbuild/netbsd-x64@npm:0.25.9": - version: 0.25.9 - resolution: "@esbuild/netbsd-x64@npm:0.25.9" - conditions: os=netbsd & cpu=x64 - languageName: node - linkType: hard - -"@esbuild/openbsd-arm64@npm:0.25.9": - version: 0.25.9 - resolution: "@esbuild/openbsd-arm64@npm:0.25.9" - conditions: os=openbsd & cpu=arm64 - languageName: node - linkType: hard - -"@esbuild/openbsd-x64@npm:0.25.9": - version: 0.25.9 - resolution: "@esbuild/openbsd-x64@npm:0.25.9" - conditions: os=openbsd & cpu=x64 - languageName: node - linkType: hard - -"@esbuild/openharmony-arm64@npm:0.25.9": - version: 0.25.9 - resolution: "@esbuild/openharmony-arm64@npm:0.25.9" - conditions: os=openharmony & cpu=arm64 - languageName: node - linkType: hard - -"@esbuild/sunos-x64@npm:0.25.9": - version: 0.25.9 - resolution: "@esbuild/sunos-x64@npm:0.25.9" - conditions: os=sunos & cpu=x64 - languageName: node - linkType: hard - -"@esbuild/win32-arm64@npm:0.25.9": - version: 0.25.9 - resolution: "@esbuild/win32-arm64@npm:0.25.9" - conditions: os=win32 & cpu=arm64 - languageName: node - linkType: hard - -"@esbuild/win32-ia32@npm:0.25.9": - version: 0.25.9 - resolution: "@esbuild/win32-ia32@npm:0.25.9" - conditions: os=win32 & cpu=ia32 - languageName: node - linkType: hard - -"@esbuild/win32-x64@npm:0.25.9": - version: 0.25.9 - resolution: "@esbuild/win32-x64@npm:0.25.9" - conditions: os=win32 & cpu=x64 - languageName: node - linkType: hard - "@eslint-community/eslint-utils@npm:^4.2.0, @eslint-community/eslint-utils@npm:^4.7.0": version: 4.7.0 resolution: "@eslint-community/eslint-utils@npm:4.7.0" @@ -1231,118 +1049,6 @@ __metadata: languageName: node linkType: hard -"@storybook/components@npm:8.6.14": - version: 8.6.14 - resolution: "@storybook/components@npm:8.6.14" - peerDependencies: - storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 - checksum: 10/d3647505510313aa3c32fd1f8f202eda723ad99bd353b20aa929c5ecab4edc3c86ad06d0eac02f3c6d948e88f13f65ca5fa35ef27c079ef1b92abe8692f23699 - languageName: node - linkType: hard - -"@storybook/core@npm:8.6.15": - version: 8.6.15 - resolution: "@storybook/core@npm:8.6.15" - dependencies: - "@storybook/theming": "npm:8.6.15" - better-opn: "npm:^3.0.2" - browser-assert: "npm:^1.2.1" - esbuild: "npm:^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0" - esbuild-register: "npm:^3.5.0" - jsdoc-type-pratt-parser: "npm:^4.0.0" - process: "npm:^0.11.10" - recast: "npm:^0.23.5" - semver: "npm:^7.6.2" - util: "npm:^0.12.5" - ws: "npm:^8.2.3" - peerDependencies: - prettier: ^2 || ^3 - peerDependenciesMeta: - prettier: - optional: true - checksum: 10/d268d6fa00c38b35e5c363ee33779c2e087ab8e4681e0e205baa2fdb2780ea9feda3c9f6db35d60092778878d2782b2093c744bdf1af173c5688c3e1e0e960ac - languageName: node - linkType: hard - -"@storybook/global@npm:^5.0.0": - version: 5.0.0 - resolution: "@storybook/global@npm:5.0.0" - checksum: 10/0e7b495f4fe7f36447e793926f1c0460ec07fd66f0da68e3150da5878f6043c9eeb9b41614a45c5ec0d48d5d383c59ca8f88b6dc7882a2a784ac9b20375d8edb - languageName: node - linkType: hard - -"@storybook/manager-api@npm:8.6.14": - version: 8.6.14 - resolution: "@storybook/manager-api@npm:8.6.14" - peerDependencies: - storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 - checksum: 10/4544b317050b81574f1cd6f911dcb99ee2adbd7190555209171a7dd2233cd331165fa11c16a5977ebe58eeaf26c86bbfcb23f701cfd79a10f0d034dae65197bd - languageName: node - linkType: hard - -"@storybook/preview-api@npm:8.6.14": - version: 8.6.14 - resolution: "@storybook/preview-api@npm:8.6.14" - peerDependencies: - storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 - checksum: 10/9b77288f2f627a7c70cfd3e88bdc4348c1425fab6b333ed77efb913e45881bcdf2ca67f1174e47fe978a7993c2a653fb8accf518ba51441cfb9450145101e9d8 - languageName: node - linkType: hard - -"@storybook/react-dom-shim@npm:8.6.14": - version: 8.6.14 - resolution: "@storybook/react-dom-shim@npm:8.6.14" - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - storybook: ^8.6.14 - checksum: 10/d14d970b98dc8266d4df80225538fb537449c15877f0f54465dfe52242f0c3f041c975824cc2894f72a3a8023fdffa0a281d90325b95297858e3684913b3cc15 - languageName: node - linkType: hard - -"@storybook/react@npm:^8.6.12": - version: 8.6.14 - resolution: "@storybook/react@npm:8.6.14" - dependencies: - "@storybook/components": "npm:8.6.14" - "@storybook/global": "npm:^5.0.0" - "@storybook/manager-api": "npm:8.6.14" - "@storybook/preview-api": "npm:8.6.14" - "@storybook/react-dom-shim": "npm:8.6.14" - "@storybook/theming": "npm:8.6.14" - peerDependencies: - "@storybook/test": 8.6.14 - react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - storybook: ^8.6.14 - typescript: ">= 4.2.x" - peerDependenciesMeta: - "@storybook/test": - optional: true - typescript: - optional: true - checksum: 10/a8710dcb80da9df4a78cfb3560a8c0c31c6f6c04902aa95446d4e40f6a9179770ead6f9a0a06fa44d00677cd1cd92eb60fdc57f433035ec722275847139671a4 - languageName: node - linkType: hard - -"@storybook/theming@npm:8.6.14": - version: 8.6.14 - resolution: "@storybook/theming@npm:8.6.14" - peerDependencies: - storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 - checksum: 10/6936ea3348968fe598ad47421c11a78c6ee2ce62336ea1ce9cb8257e9faa2553d3ac3e443f8a36d35a41b0d60eb169231516649c710582ec68fdead4f23ffc0e - languageName: node - linkType: hard - -"@storybook/theming@npm:8.6.15": - version: 8.6.15 - resolution: "@storybook/theming@npm:8.6.15" - peerDependencies: - storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 - checksum: 10/f02760831a13d7af9dbfeb6feea949f4c13c897861cbc75253a6776d133891567889c8d99c7e91a99124d0772c3bde1f978984c83b19117d1d7c908ed7eb8409 - languageName: node - linkType: hard - "@swc/helpers@npm:0.5.15": version: 0.5.15 resolution: "@swc/helpers@npm:0.5.15" @@ -2017,15 +1723,6 @@ __metadata: languageName: node linkType: hard -"ast-types@npm:^0.16.1": - version: 0.16.1 - resolution: "ast-types@npm:0.16.1" - dependencies: - tslib: "npm:^2.0.1" - checksum: 10/f569b475eb1c8cb93888cb6e7b7e36dc43fa19a77e4eb132cbff6e3eb1598ca60f850db6e60b070e5a0ee8c1559fca921dac0916e576f2f104e198793b0bdd8d - languageName: node - linkType: hard - "astring@npm:^1.8.0": version: 1.9.0 resolution: "astring@npm:1.9.0" @@ -2086,15 +1783,6 @@ __metadata: languageName: node linkType: hard -"better-opn@npm:^3.0.2": - version: 3.0.2 - resolution: "better-opn@npm:3.0.2" - dependencies: - open: "npm:^8.0.4" - checksum: 10/24668e5a837d0d2c0edf17ad5ebcfeb00a8a5578a5eb09f7a409e1a60617cdfea40b8ebfc95e5f12d9568157930d033e6805788fcf0780413ac982c95d3745d1 - languageName: node - linkType: hard - "binary-extensions@npm:^2.0.0": version: 2.3.0 resolution: "binary-extensions@npm:2.3.0" @@ -2130,13 +1818,6 @@ __metadata: languageName: node linkType: hard -"browser-assert@npm:^1.2.1": - version: 1.2.1 - resolution: "browser-assert@npm:1.2.1" - checksum: 10/8b2407cd04c1ed592cf892dec35942b7d72635829221e0788c9a16c4d2afa8b7156bc9705b1c4b32c30d88136c576fda3cbcb8f494d6f865264c706ea8798d92 - languageName: node - linkType: hard - "cacache@npm:^19.0.1": version: 19.0.1 resolution: "cacache@npm:19.0.1" @@ -2473,13 +2154,6 @@ __metadata: languageName: node linkType: hard -"define-lazy-prop@npm:^2.0.0": - version: 2.0.0 - resolution: "define-lazy-prop@npm:2.0.0" - checksum: 10/0115fdb065e0490918ba271d7339c42453d209d4cb619dfe635870d906731eff3e1ade8028bb461ea27ce8264ec5e22c6980612d332895977e89c1bbc80fcee2 - languageName: node - linkType: hard - "define-properties@npm:^1.1.3, define-properties@npm:^1.2.1": version: 1.2.1 resolution: "define-properties@npm:1.2.1" @@ -2528,7 +2202,6 @@ __metadata: "@octokit/rest": "npm:^22.0.1" "@remixicon/react": "npm:^4.6.0" "@shikijs/transformers": "npm:^3.13.0" - "@storybook/react": "npm:^8.6.12" "@types/mdx": "npm:^2.0.13" "@types/node": "npm:^22.13.14" "@types/react": "npm:19.1.9" @@ -2548,7 +2221,6 @@ __metadata: react: "npm:19.1.1" react-dom: "npm:19.1.1" shiki: "npm:^3.13.0" - storybook: "npm:^8.6.15" typescript: "npm:^5" unified: "npm:^11.0.4" languageName: unknown @@ -2844,106 +2516,6 @@ __metadata: languageName: node linkType: hard -"esbuild-register@npm:^3.5.0": - version: 3.6.0 - resolution: "esbuild-register@npm:3.6.0" - dependencies: - debug: "npm:^4.3.4" - peerDependencies: - esbuild: ">=0.12 <1" - checksum: 10/4ae1a016e3dad5b53c3d68cf07e31d8c1cec1a0b584038ece726097ac80bd33ab48fb224c766c9b341c04793837e652461eaca9327a116e7564f553b61ccca71 - languageName: node - linkType: hard - -"esbuild@npm:^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0": - version: 0.25.9 - resolution: "esbuild@npm:0.25.9" - dependencies: - "@esbuild/aix-ppc64": "npm:0.25.9" - "@esbuild/android-arm": "npm:0.25.9" - "@esbuild/android-arm64": "npm:0.25.9" - "@esbuild/android-x64": "npm:0.25.9" - "@esbuild/darwin-arm64": "npm:0.25.9" - "@esbuild/darwin-x64": "npm:0.25.9" - "@esbuild/freebsd-arm64": "npm:0.25.9" - "@esbuild/freebsd-x64": "npm:0.25.9" - "@esbuild/linux-arm": "npm:0.25.9" - "@esbuild/linux-arm64": "npm:0.25.9" - "@esbuild/linux-ia32": "npm:0.25.9" - "@esbuild/linux-loong64": "npm:0.25.9" - "@esbuild/linux-mips64el": "npm:0.25.9" - "@esbuild/linux-ppc64": "npm:0.25.9" - "@esbuild/linux-riscv64": "npm:0.25.9" - "@esbuild/linux-s390x": "npm:0.25.9" - "@esbuild/linux-x64": "npm:0.25.9" - "@esbuild/netbsd-arm64": "npm:0.25.9" - "@esbuild/netbsd-x64": "npm:0.25.9" - "@esbuild/openbsd-arm64": "npm:0.25.9" - "@esbuild/openbsd-x64": "npm:0.25.9" - "@esbuild/openharmony-arm64": "npm:0.25.9" - "@esbuild/sunos-x64": "npm:0.25.9" - "@esbuild/win32-arm64": "npm:0.25.9" - "@esbuild/win32-ia32": "npm:0.25.9" - "@esbuild/win32-x64": "npm:0.25.9" - dependenciesMeta: - "@esbuild/aix-ppc64": - optional: true - "@esbuild/android-arm": - optional: true - "@esbuild/android-arm64": - optional: true - "@esbuild/android-x64": - optional: true - "@esbuild/darwin-arm64": - optional: true - "@esbuild/darwin-x64": - optional: true - "@esbuild/freebsd-arm64": - optional: true - "@esbuild/freebsd-x64": - optional: true - "@esbuild/linux-arm": - optional: true - "@esbuild/linux-arm64": - optional: true - "@esbuild/linux-ia32": - optional: true - "@esbuild/linux-loong64": - optional: true - "@esbuild/linux-mips64el": - optional: true - "@esbuild/linux-ppc64": - optional: true - "@esbuild/linux-riscv64": - optional: true - "@esbuild/linux-s390x": - optional: true - "@esbuild/linux-x64": - optional: true - "@esbuild/netbsd-arm64": - optional: true - "@esbuild/netbsd-x64": - optional: true - "@esbuild/openbsd-arm64": - optional: true - "@esbuild/openbsd-x64": - optional: true - "@esbuild/openharmony-arm64": - optional: true - "@esbuild/sunos-x64": - optional: true - "@esbuild/win32-arm64": - optional: true - "@esbuild/win32-ia32": - optional: true - "@esbuild/win32-x64": - optional: true - bin: - esbuild: bin/esbuild - checksum: 10/fc174ae7f646ad413adb641c7e46f16be575e462ed209866b55d5954d382e5da839e3f3f89a8e42e2b71d48895cc636ba43523011249fe5ff9c63d8d39d3a364 - languageName: node - linkType: hard - "escape-string-regexp@npm:^4.0.0": version: 4.0.0 resolution: "escape-string-regexp@npm:4.0.0" @@ -3196,16 +2768,6 @@ __metadata: languageName: node linkType: hard -"esprima@npm:~4.0.0": - version: 4.0.1 - resolution: "esprima@npm:4.0.1" - bin: - esparse: ./bin/esparse.js - esvalidate: ./bin/esvalidate.js - checksum: 10/f1d3c622ad992421362294f7acf866aa9409fbad4eb2e8fa230bd33944ce371d32279667b242d8b8907ec2b6ad7353a717f3c0e60e748873a34a7905174bc0eb - languageName: node - linkType: hard - "esquery@npm:^1.4.2": version: 1.6.0 resolution: "esquery@npm:1.6.0" @@ -3937,7 +3499,7 @@ __metadata: languageName: node linkType: hard -"inherits@npm:2, inherits@npm:^2.0.3": +"inherits@npm:2": version: 2.0.4 resolution: "inherits@npm:2.0.4" checksum: 10/cd45e923bee15186c07fa4c89db0aace24824c482fb887b528304694b2aa6ff8a898da8657046a5dcf3e46cd6db6c61629551f9215f208d7c3f157cf9b290521 @@ -3986,16 +3548,6 @@ __metadata: languageName: node linkType: hard -"is-arguments@npm:^1.0.4": - version: 1.2.0 - resolution: "is-arguments@npm:1.2.0" - dependencies: - call-bound: "npm:^1.0.2" - has-tostringtag: "npm:^1.0.2" - checksum: 10/471a8ef631b8ee8829c43a8ab05c081700c0e25180c73d19f3bf819c1a8448c426a9e8e601f278973eca68966384b16ceb78b8c63af795b099cd199ea5afc457 - languageName: node - linkType: hard - "is-array-buffer@npm:^3.0.4, is-array-buffer@npm:^3.0.5": version: 3.0.5 resolution: "is-array-buffer@npm:3.0.5" @@ -4108,15 +3660,6 @@ __metadata: languageName: node linkType: hard -"is-docker@npm:^2.0.0, is-docker@npm:^2.1.1": - version: 2.2.1 - resolution: "is-docker@npm:2.2.1" - bin: - is-docker: cli.js - checksum: 10/3fef7ddbf0be25958e8991ad941901bf5922ab2753c46980b60b05c1bf9c9c2402d35e6dc32e4380b980ef5e1970a5d9d5e5aa2e02d77727c3b6b5e918474c56 - languageName: node - linkType: hard - "is-extglob@npm:^2.1.1": version: 2.1.1 resolution: "is-extglob@npm:2.1.1" @@ -4140,7 +3683,7 @@ __metadata: languageName: node linkType: hard -"is-generator-function@npm:^1.0.10, is-generator-function@npm:^1.0.7": +"is-generator-function@npm:^1.0.10": version: 1.1.0 resolution: "is-generator-function@npm:1.1.0" dependencies: @@ -4262,7 +3805,7 @@ __metadata: languageName: node linkType: hard -"is-typed-array@npm:^1.1.13, is-typed-array@npm:^1.1.14, is-typed-array@npm:^1.1.15, is-typed-array@npm:^1.1.3": +"is-typed-array@npm:^1.1.13, is-typed-array@npm:^1.1.14, is-typed-array@npm:^1.1.15": version: 1.1.15 resolution: "is-typed-array@npm:1.1.15" dependencies: @@ -4297,15 +3840,6 @@ __metadata: languageName: node linkType: hard -"is-wsl@npm:^2.2.0": - version: 2.2.0 - resolution: "is-wsl@npm:2.2.0" - dependencies: - is-docker: "npm:^2.0.0" - checksum: 10/20849846ae414997d290b75e16868e5261e86ff5047f104027026fd61d8b5a9b0b3ade16239f35e1a067b3c7cc02f70183cb661010ed16f4b6c7c93dad1b19d8 - languageName: node - linkType: hard - "isarray@npm:^2.0.5": version: 2.0.5 resolution: "isarray@npm:2.0.5" @@ -4372,13 +3906,6 @@ __metadata: languageName: node linkType: hard -"jsdoc-type-pratt-parser@npm:^4.0.0": - version: 4.8.0 - resolution: "jsdoc-type-pratt-parser@npm:4.8.0" - checksum: 10/1844ef7848f5d0c3c60af95629197f97ff8603c12b99d750aaf7511724ee0d41989c5d24ea5f8d22078a5a8034337a272c9c22f49a8f07a857946417f3c84cfb - languageName: node - linkType: hard - "json-buffer@npm:3.0.1": version: 3.0.1 resolution: "json-buffer@npm:3.0.1" @@ -5557,17 +5084,6 @@ __metadata: languageName: node linkType: hard -"open@npm:^8.0.4": - version: 8.4.2 - resolution: "open@npm:8.4.2" - dependencies: - define-lazy-prop: "npm:^2.0.0" - is-docker: "npm:^2.1.1" - is-wsl: "npm:^2.2.0" - checksum: 10/acd81a1d19879c818acb3af2d2e8e9d81d17b5367561e623248133deb7dd3aefaed527531df2677d3e6aaf0199f84df57b6b2262babff8bf46ea0029aac536c9 - languageName: node - linkType: hard - "optionator@npm:^0.9.3": version: 0.9.4 resolution: "optionator@npm:0.9.4" @@ -5740,13 +5256,6 @@ __metadata: languageName: node linkType: hard -"process@npm:^0.11.10": - version: 0.11.10 - resolution: "process@npm:0.11.10" - checksum: 10/dbaa7e8d1d5cf375c36963ff43116772a989ef2bb47c9bdee20f38fd8fc061119cf38140631cf90c781aca4d3f0f0d2c834711952b728953f04fd7d238f59f5b - languageName: node - linkType: hard - "promise-retry@npm:^2.0.1": version: 2.0.1 resolution: "promise-retry@npm:2.0.1" @@ -5830,19 +5339,6 @@ __metadata: languageName: node linkType: hard -"recast@npm:^0.23.5": - version: 0.23.11 - resolution: "recast@npm:0.23.11" - dependencies: - ast-types: "npm:^0.16.1" - esprima: "npm:~4.0.0" - source-map: "npm:~0.6.1" - tiny-invariant: "npm:^1.3.3" - tslib: "npm:^2.0.1" - checksum: 10/a622b7848efe13a59a40c9a1a3a8178433eae1048780e04d7392406e2d67fc29e3efa84b3aa8cfda28fd58989f4b59fa968bed295b739987a666bd11cc57a5b2 - languageName: node - linkType: hard - "recma-build-jsx@npm:^1.0.0": version: 1.0.0 resolution: "recma-build-jsx@npm:1.0.0" @@ -6171,7 +5667,7 @@ __metadata: languageName: node linkType: hard -"semver@npm:^7.3.5, semver@npm:^7.6.0, semver@npm:^7.6.2, semver@npm:^7.7.1, semver@npm:^7.7.2": +"semver@npm:^7.3.5, semver@npm:^7.6.0, semver@npm:^7.7.1, semver@npm:^7.7.2": version: 7.7.2 resolution: "semver@npm:7.7.2" bin: @@ -6442,13 +5938,6 @@ __metadata: languageName: node linkType: hard -"source-map@npm:~0.6.1": - version: 0.6.1 - resolution: "source-map@npm:0.6.1" - checksum: 10/59ef7462f1c29d502b3057e822cdbdae0b0e565302c4dd1a95e11e793d8d9d62006cdc10e0fd99163ca33ff2071360cf50ee13f90440806e7ed57d81cba2f7ff - languageName: node - linkType: hard - "space-separated-tokens@npm:^2.0.0": version: 2.0.2 resolution: "space-separated-tokens@npm:2.0.2" @@ -6482,24 +5971,6 @@ __metadata: languageName: node linkType: hard -"storybook@npm:^8.6.15": - version: 8.6.15 - resolution: "storybook@npm:8.6.15" - dependencies: - "@storybook/core": "npm:8.6.15" - peerDependencies: - prettier: ^2 || ^3 - peerDependenciesMeta: - prettier: - optional: true - bin: - getstorybook: ./bin/index.cjs - sb: ./bin/index.cjs - storybook: ./bin/index.cjs - checksum: 10/15762c79ec8444a46bc14cddfadbdd54dfd379828acd38555887a246c01e7c9ebb61e4eafafe04efb3ddf6278fb47035216e7f7d9f94fc205da148870173abdf - languageName: node - linkType: hard - "string-width-cjs@npm:string-width@^4.2.0, string-width@npm:^4.1.0": version: 4.2.3 resolution: "string-width@npm:4.2.3" @@ -6729,13 +6200,6 @@ __metadata: languageName: node linkType: hard -"tiny-invariant@npm:^1.3.3": - version: 1.3.3 - resolution: "tiny-invariant@npm:1.3.3" - checksum: 10/5e185c8cc2266967984ce3b352a4e57cb89dad5a8abb0dea21468a6ecaa67cd5bb47a3b7a85d08041008644af4f667fb8b6575ba38ba5fb00b3b5068306e59fe - languageName: node - linkType: hard - "tinyglobby@npm:^0.2.12, tinyglobby@npm:^0.2.13": version: 0.2.14 resolution: "tinyglobby@npm:0.2.14" @@ -6790,7 +6254,7 @@ __metadata: languageName: node linkType: hard -"tslib@npm:^2.0.1, tslib@npm:^2.4.0, tslib@npm:^2.8.0": +"tslib@npm:^2.4.0, tslib@npm:^2.8.0": version: 2.8.1 resolution: "tslib@npm:2.8.1" checksum: 10/3e2e043d5c2316461cb54e5c7fe02c30ef6dccb3384717ca22ae5c6b5bc95232a6241df19c622d9c73b809bea33b187f6dbc73030963e29950c2141bc32a79f7 @@ -7105,19 +6569,6 @@ __metadata: languageName: node linkType: hard -"util@npm:^0.12.5": - version: 0.12.5 - resolution: "util@npm:0.12.5" - dependencies: - inherits: "npm:^2.0.3" - is-arguments: "npm:^1.0.4" - is-generator-function: "npm:^1.0.7" - is-typed-array: "npm:^1.1.3" - which-typed-array: "npm:^1.1.2" - checksum: 10/61a10de7753353dd4d744c917f74cdd7d21b8b46379c1e48e1c4fd8e83f8190e6bd9978fc4e5102ab6a10ebda6019d1b36572fa4a325e175ec8b789a121f6147 - languageName: node - linkType: hard - "vfile-matter@npm:^5.0.1": version: 5.0.1 resolution: "vfile-matter@npm:5.0.1" @@ -7201,7 +6652,7 @@ __metadata: languageName: node linkType: hard -"which-typed-array@npm:^1.1.16, which-typed-array@npm:^1.1.19, which-typed-array@npm:^1.1.2": +"which-typed-array@npm:^1.1.16, which-typed-array@npm:^1.1.19": version: 1.1.19 resolution: "which-typed-array@npm:1.1.19" dependencies: @@ -7274,21 +6725,6 @@ __metadata: languageName: node linkType: hard -"ws@npm:^8.2.3": - version: 8.18.3 - resolution: "ws@npm:8.18.3" - peerDependencies: - bufferutil: ^4.0.1 - utf-8-validate: ">=5.0.2" - peerDependenciesMeta: - bufferutil: - optional: true - utf-8-validate: - optional: true - checksum: 10/725964438d752f0ab0de582cd48d6eeada58d1511c3f613485b5598a83680bedac6187c765b0fe082e2d8cc4341fc57707c813ae780feee82d0c5efe6a4c61b6 - languageName: node - linkType: hard - "yallist@npm:^4.0.0": version: 4.0.0 resolution: "yallist@npm:4.0.0"