From c29416593ecdb100c41ed8b3184ea2c4732eb2dd Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Thu, 15 Jan 2026 17:01:49 +0100 Subject: [PATCH] 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 = () => ;