diff --git a/docs-ui/package.json b/docs-ui/package.json index 2f17987107..ce9b8d070f 100644 --- a/docs-ui/package.json +++ b/docs-ui/package.json @@ -26,7 +26,6 @@ "@mdx-js/react": "^3.1.0", "@next/mdx": "15.5.7", "@remixicon/react": "^4.6.0", - "@storybook/react": "^8.6.12", "@uiw/codemirror-themes": "^4.23.7", "@uiw/react-codemirror": "^4.23.7", "clsx": "^2.1.1", @@ -37,8 +36,7 @@ "prop-types": "^15.8.1", "react": "19.1.1", "react-dom": "19.1.1", - "shiki": "^3.13.0", - "storybook": "^8.6.15" + "shiki": "^3.13.0" }, "devDependencies": { "@octokit/rest": "^22.0.1", diff --git a/docs-ui/src/app/components/[slug]/page.tsx b/docs-ui/src/app/components/[slug]/page.tsx deleted file mode 100644 index 1422334471..0000000000 --- a/docs-ui/src/app/components/[slug]/page.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { components, layoutComponents } from '@/utils/data'; - -export default async function Page({ - params, -}: { - params: Promise<{ slug: string }>; -}) { - const { slug } = await params; - - const { default: Component } = await import(`@/content/${slug}.mdx`); - - return ; -} - -export function generateStaticParams() { - const list = [...components, ...layoutComponents]; - - return list.map(component => ({ - slug: component.slug, - })); -} - -export const dynamicParams = false; diff --git a/docs-ui/src/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/content/accordion.mdx b/docs-ui/src/app/components/accordion/page.mdx similarity index 70% rename from docs-ui/src/content/accordion.mdx rename to docs-ui/src/app/components/accordion/page.mdx index fc4bad1f8e..83d650507b 100644 --- a/docs-ui/src/content/accordion.mdx +++ b/docs-ui/src/app/components/accordion/page.mdx @@ -1,22 +1,32 @@ import { PropsTable } from '@/components/PropsTable'; import { Snippet } from '@/components/Snippet'; import { CodeBlock } from '@/components/CodeBlock'; -import { AccordionSnippet } from '@/snippets/stories-snippets'; import { accordionPropDefs, accordionTriggerPropDefs, accordionPanelPropDefs, accordionGroupPropDefs, +} from './props-definition'; +import { accordionUsageSnippet, - accordionWithSubtitleSnippet, - accordionCustomTriggerSnippet, - accordionDefaultExpandedSnippet, - accordionGroupSingleOpenSnippet, - accordionGroupMultipleOpenSnippet, -} from './accordion.props'; + defaultSnippet, + withSubtitleSnippet, + customTriggerSnippet, + defaultExpandedSnippet, + groupSingleOpenSnippet, + groupMultipleOpenSnippet, +} from './snippets'; +import { + Default, + WithSubtitle, + CustomTrigger, + DefaultExpanded, + GroupSingleOpen, + GroupMultipleOpen, +} from './components'; import { PageTitle } from '@/components/PageTitle'; import { Theming } from '@/components/Theming'; -import { AccordionDefinition } from '../utils/definitions'; +import { AccordionDefinition } from '../../../utils/definitions'; import { ChangelogComponent } from '@/components/ChangelogComponent'; } - code={accordionUsageSnippet} + preview={} + code={defaultSnippet} /> ## Usage @@ -72,8 +82,8 @@ Here's a view when using both title and subtitle props. align="center" py={4} height={240} - preview={} - code={accordionWithSubtitleSnippet} + preview={} + code={withSubtitleSnippet} /> ### Custom Trigger @@ -84,8 +94,8 @@ Here's a view when providing custom multi-line content as children. align="center" py={4} height={280} - preview={} - code={accordionCustomTriggerSnippet} + preview={} + code={customTriggerSnippet} /> ### Default Expanded @@ -96,8 +106,8 @@ Here's a view when the panel is expanded by default. align="center" py={4} height={280} - preview={} - code={accordionDefaultExpandedSnippet} + preview={} + code={defaultExpandedSnippet} /> ### Group Single Open @@ -108,8 +118,8 @@ Here's a view when only one accordion can be open at a time. align="center" py={4} height={280} - preview={} - code={accordionGroupSingleOpenSnippet} + preview={} + code={groupSingleOpenSnippet} /> ### Group Multiple Open @@ -120,8 +130,8 @@ Here's a view when multiple accordions can be open simultaneously. align="center" py={4} height={280} - preview={} - code={accordionGroupMultipleOpenSnippet} + preview={} + 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/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/content/avatar.mdx b/docs-ui/src/app/components/avatar/page.mdx similarity index 54% rename from docs-ui/src/content/avatar.mdx rename to docs-ui/src/app/components/avatar/page.mdx index 047485c2cc..0074eda5b8 100644 --- a/docs-ui/src/content/avatar.mdx +++ b/docs-ui/src/app/components/avatar/page.mdx @@ -1,17 +1,18 @@ import { PropsTable } from '@/components/PropsTable'; import { Snippet } from '@/components/Snippet'; import { CodeBlock } from '@/components/CodeBlock'; -import { AvatarSnippet } from '@/snippets/stories-snippets'; +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'; +import { AvatarDefinition } from '../../../utils/definitions'; import { ChangelogComponent } from '@/components/ChangelogComponent'; -} - code={``} -/> +} code={defaultSnippet} /> ## Usage - + ## API reference @@ -40,13 +36,7 @@ import { ChangelogComponent } from '@/components/ChangelogComponent'; Avatar sizes can be set using the `size` prop. -} - code={snippetSizes} -/> +} code={sizesSnippet} /> ### Fallback @@ -56,20 +46,15 @@ If the image is not available, the avatar will show the initials of the name. align="center" py={4} open - preview={} - code={snippetFallback} + preview={} + code={fallbackSnippet} /> ### The `purpose` prop Control how the avatar is announced to screen readers using the `purpose` prop. -} - 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/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/content/box.mdx b/docs-ui/src/app/components/box/page.mdx similarity index 83% rename from docs-ui/src/content/box.mdx rename to docs-ui/src/app/components/box/page.mdx index 66e99ec19a..cc8641580f 100644 --- a/docs-ui/src/content/box.mdx +++ b/docs-ui/src/app/components/box/page.mdx @@ -1,18 +1,18 @@ import { CodeBlock } from '@/components/CodeBlock'; import { PropsTable } from '@/components/PropsTable'; import { Snippet } from '@/components/Snippet'; -import { BoxSnippet } from '@/snippets/stories-snippets'; +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'; -import { BoxDefinition } from '../utils/definitions'; +import { BoxDefinition } from '../../../utils/definitions'; import { ChangelogComponent } from '@/components/ChangelogComponent'; -} - code={boxPreviewSnippet} - align="center" -/> +} code={defaultSnippet} align="center" /> ## Usage diff --git a/docs-ui/src/content/box.props.ts b/docs-ui/src/app/components/box/props-definition.ts similarity index 54% rename from docs-ui/src/content/box.props.ts rename to docs-ui/src/app/components/box/props-definition.ts index 0ee45c80f4..a18a0f272e 100644 --- a/docs-ui/src/content/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/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/content/button-icon.mdx b/docs-ui/src/app/components/button-icon/page.mdx similarity index 52% rename from docs-ui/src/content/button-icon.mdx rename to docs-ui/src/app/components/button-icon/page.mdx index b0595cc9bc..776b016671 100644 --- a/docs-ui/src/content/button-icon.mdx +++ b/docs-ui/src/app/components/button-icon/page.mdx @@ -1,21 +1,18 @@ import { PropsTable } from '@/components/PropsTable'; import { Snippet } from '@/components/Snippet'; import { CodeBlock } from '@/components/CodeBlock'; -import { ButtonIconSnippet } from '@/snippets/stories-snippets'; +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'; +import { ButtonIconDefinition } from '../../../utils/definitions'; import { ChangelogComponent } from '@/components/ChangelogComponent'; -} - code={buttonIconDefaultSnippet} -/> +} code={variantsSnippet} /> ## Usage @@ -48,21 +40,15 @@ Here's a view when buttons have different variants. align="center" py={4} open - preview={} - code={buttonIconVariantsSnippet} + preview={} + code={variantsSnippet} /> ### Sizes Here's a view when buttons have different sizes. -} - code={buttonIconSizesSnippet} -/> +} code={sizesSnippet} /> ### Disabled @@ -72,8 +58,8 @@ Here's a view when buttons are disabled. align="center" py={4} open - preview={} - code={buttonIconDisabledSnippet} + preview={} + code={disabledSnippet} /> ### Loading @@ -84,16 +70,10 @@ Here's a view when buttons are in a loading state. align="center" py={4} open - preview={} - code={buttonIconLoadingSnippet} + preview={} + 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-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 new file mode 100644 index 0000000000..2da3177c55 --- /dev/null +++ b/docs-ui/src/app/components/button-link/page.mdx @@ -0,0 +1,79 @@ +import { PropsTable } from '@/components/PropsTable'; +import { Snippet } from '@/components/Snippet'; +import { CodeBlock } from '@/components/CodeBlock'; +import { buttonLinkPropDefs } from './props-definition'; +import { + 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'; +import { ChangelogComponent } from '@/components/ChangelogComponent'; + + + +} code={variantsSnippet} /> + +## Usage + + + +## API reference + + + +## Examples + +### Variants + +Here's a view when buttons have different variants. + +} + code={variantsSnippet} +/> + +### Sizes + +Here's a view when buttons have different sizes. + +} code={sizesSnippet} /> + +### With Icons + +Here's a view when buttons have icons. + +} + code={withIconsSnippet} +/> + +### Disabled + +Here's a view when buttons are disabled. + +} + code={disabledSnippet} +/> + + + + 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/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/content/button.mdx b/docs-ui/src/app/components/button/page.mdx similarity index 58% rename from docs-ui/src/content/button.mdx rename to docs-ui/src/app/components/button/page.mdx index d161c97edf..38ff2e2d57 100644 --- a/docs-ui/src/content/button.mdx +++ b/docs-ui/src/app/components/button/page.mdx @@ -1,34 +1,36 @@ import { PropsTable } from '@/components/PropsTable'; import { Snippet } from '@/components/Snippet'; import { CodeBlock } from '@/components/CodeBlock'; -import { ButtonSnippet, ButtonLinkSnippet } from '@/snippets/stories-snippets'; +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 { ButtonDefinition } from '../../../utils/definitions'; +import { + Variants, + Sizes, + WithIcons, + Disabled, + Loading, + AsLink, +} from './components'; -} - code={buttonVariantsSnippet} -/> +} code={variantsSnippet} /> ## Usage @@ -48,21 +50,15 @@ Here's a view when buttons have different variants. align="center" py={4} open - preview={} - code={buttonVariantsSnippet} + preview={} + code={variantsSnippet} /> ### Sizes Here's a view when buttons have different sizes. -} - code={buttonSizesSnippet} -/> +} code={sizesSnippet} /> ### With Icons @@ -72,8 +68,8 @@ Here's a view when buttons have icons. align="center" py={4} open - preview={} - code={buttonIconsSnippet} + preview={} + code={withIconsSnippet} /> ### Disabled @@ -84,8 +80,8 @@ Here's a view when buttons are disabled. align="center" py={4} open - preview={} - code={buttonDisabledSnippet} + preview={} + code={disabledSnippet} /> ### Loading @@ -96,8 +92,8 @@ Here's a view when buttons are in a loading state. align="center" py={4} open - preview={} - code={buttonLoadingSnippet} + preview={} + code={loadingSnippet} /> ### Responsive @@ -110,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/card/components.tsx b/docs-ui/src/app/components/card/components.tsx new file mode 100644 index 0000000000..08fa940be8 --- /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/content/card.mdx b/docs-ui/src/app/components/card/page.mdx similarity index 73% rename from docs-ui/src/content/card.mdx rename to docs-ui/src/app/components/card/page.mdx index c38a07e920..e0b6e81fff 100644 --- a/docs-ui/src/content/card.mdx +++ b/docs-ui/src/app/components/card/page.mdx @@ -1,20 +1,22 @@ import { PropsTable } from '@/components/PropsTable'; -import { CardSnippet } from '@/snippets/stories-snippets'; 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'; +import { CardDefinition } from '../../../utils/definitions'; import { ChangelogComponent } from '@/components/ChangelogComponent'; -} - code={cardDefaultSnippet} -/> +} code={defaultSnippet} /> ## Usage @@ -61,6 +58,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. @@ -68,20 +77,8 @@ Here's a view when card has a long body. } - code={cardLongBodySnippet} - open -/> - -### With list - -Here's a view when card has a list. - -} - code={cardListRowSnippet} + preview={} + 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/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/content/checkbox.mdx b/docs-ui/src/app/components/checkbox/page.mdx similarity index 65% rename from docs-ui/src/content/checkbox.mdx rename to docs-ui/src/app/components/checkbox/page.mdx index c574e8fed4..aaf73d7210 100644 --- a/docs-ui/src/content/checkbox.mdx +++ b/docs-ui/src/app/components/checkbox/page.mdx @@ -1,16 +1,16 @@ import { PropsTable } from '@/components/PropsTable'; -import { CheckboxSnippet } from '@/snippets/stories-snippets'; 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'; +import { CheckboxDefinition } from '../../../utils/definitions'; import { ChangelogComponent } from '@/components/ChangelogComponent'; -} - code={checkboxDefaultSnippet} -/> +} code={defaultSnippet} /> ## Usage @@ -43,8 +38,8 @@ Here's a view when checkboxes have different variants. align="center" py={4} open - preview={} - code={checkboxVariantsSnippet} + preview={} + code={allVariantsSnippet} /> diff --git a/docs-ui/src/content/checkbox.props.ts b/docs-ui/src/app/components/checkbox/props-definition.ts similarity index 64% rename from docs-ui/src/content/checkbox.props.ts rename to docs-ui/src/app/components/checkbox/props-definition.ts index ce0f1033ff..9e5d8a1e16 100644 --- a/docs-ui/src/content/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/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/content/container.mdx b/docs-ui/src/app/components/container/page.mdx similarity index 78% rename from docs-ui/src/content/container.mdx rename to docs-ui/src/app/components/container/page.mdx index 56c2d5d405..87bc55829e 100644 --- a/docs-ui/src/content/container.mdx +++ b/docs-ui/src/app/components/container/page.mdx @@ -1,17 +1,17 @@ import { CodeBlock } from '@/components/CodeBlock'; import { PropsTable } from '@/components/PropsTable'; import { Snippet } from '@/components/Snippet'; -import { ContainerSnippet } from '@/snippets/stories-snippets'; +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'; +import { ContainerDefinition } from '../../../utils/definitions'; import { ChangelogComponent } from '@/components/ChangelogComponent'; -} - 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/content/container.props.ts b/docs-ui/src/app/components/container/snippets.ts similarity index 60% rename from docs-ui/src/content/container.props.ts rename to docs-ui/src/app/components/container/snippets.ts index a4d23a8495..83f4dabbbc 100644 --- a/docs-ui/src/content/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/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 = () => ( + { + return ( + + + + + + + + + + + + + ); +}; + +export const Demo2 = () => { + return ( + + + + + + ); +}; diff --git a/docs-ui/src/content/skeleton.mdx b/docs-ui/src/app/components/skeleton/page.mdx similarity index 56% rename from docs-ui/src/content/skeleton.mdx rename to docs-ui/src/app/components/skeleton/page.mdx index 07cd4b3332..42f8975b5a 100644 --- a/docs-ui/src/content/skeleton.mdx +++ b/docs-ui/src/app/components/skeleton/page.mdx @@ -1,30 +1,20 @@ import { PropsTable } from '@/components/PropsTable'; import { Snippet } from '@/components/Snippet'; import { CodeBlock } from '@/components/CodeBlock'; -import { SkeletonSnippet } from '@/snippets/stories-snippets'; -import { - skeletonPropDefs, - skeletonUsageSnippet, - skeletonDefaultSnippet, - skeletonDemo1Snippet, - skeletonDemo2Snippet, -} from './skeleton.props'; +import { skeletonPropDefs } from './props-definition'; +import { skeletonUsageSnippet, demo1Snippet, demo2Snippet } from './snippets'; +import { Demo1, Demo2 } from './components'; import { PageTitle } from '@/components/PageTitle'; import { Theming } from '@/components/Theming'; import { ChangelogComponent } from '@/components/ChangelogComponent'; -import { SkeletonDefinition } from '../utils/definitions'; +import { SkeletonDefinition } from '../../../utils/definitions'; -} - code={skeletonDefaultSnippet} -/> +} code={demo2Snippet} /> ## Usage @@ -40,25 +30,13 @@ import { SkeletonDefinition } from '../utils/definitions'; You can use a mix of different sizes to create a more complex skeleton. -} - code={skeletonDemo1Snippet} - open -/> +} code={demo1Snippet} open /> ### Demo 2 You can use a mix of different sizes to create a more complex skeleton. -} - code={skeletonDemo2Snippet} - open -/> +} 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/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/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/content/switch.mdx b/docs-ui/src/app/components/switch/page.mdx similarity index 66% rename from docs-ui/src/content/switch.mdx rename to docs-ui/src/app/components/switch/page.mdx index 965cc7832b..494a046f47 100644 --- a/docs-ui/src/content/switch.mdx +++ b/docs-ui/src/app/components/switch/page.mdx @@ -1,24 +1,20 @@ import { PropsTable } from '@/components/PropsTable'; import { Snippet } from '@/components/Snippet'; import { CodeBlock } from '@/components/CodeBlock'; -import { SwitchSnippet } from '@/snippets/stories-snippets'; -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'; -import { SwitchDefinition } from '../utils/definitions'; +import { SwitchDefinition } from '../../../utils/definitions'; -} - code={``} -/> +} code={defaultSnippet} /> ## Usage @@ -38,8 +34,8 @@ A switch can be disabled using the `isDisabled` prop. align="center" py={4} open - preview={} - code={``} + preview={} + code={disabledSnippet} /> diff --git a/docs-ui/src/content/switch.props.ts b/docs-ui/src/app/components/switch/props-definition.ts similarity index 93% rename from docs-ui/src/content/switch.props.ts rename to docs-ui/src/app/components/switch/props-definition.ts index 5576436102..769c93aac8 100644 --- a/docs-ui/src/content/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/table/components.tsx b/docs-ui/src/app/components/table/components.tsx new file mode 100644 index 0000000000..cb158579a1 --- /dev/null +++ b/docs-ui/src/app/components/table/components.tsx @@ -0,0 +1,188 @@ +'use client'; + +import { + Table, + CellProfile, + CellText, + type ColumnConfig, + useTable, +} from '../../../../../packages/ui/src/components/Table'; +import { Flex } from '../../../../../packages/ui/src/components/Flex/Flex'; +import { Text } from '../../../../../packages/ui/src/components/Text/Text'; +import { RadioGroup } from '../../../../../packages/ui/src/components/RadioGroup/RadioGroup'; +import { Radio } from '../../../../../packages/ui/src/components/RadioGroup'; +import { data as data4 } from '../../../../../packages/ui/src/components/Table/stories/mocked-data4'; +import { useState } from 'react'; +import { + selectionData, + selectionColumns, +} from '../../../../../packages/ui/src/components/Table/stories/utils'; +import { MemoryRouter } from 'react-router-dom'; + +type Data4Item = (typeof data4)[0]; + +const columns: ColumnConfig[] = [ + { + id: 'name', + label: 'Band name', + isRowHeader: true, + cell: item => ( + + ), + }, + { + id: 'genre', + label: 'Genre', + cell: item => , + }, + { + id: 'yearFormed', + label: 'Year formed', + cell: item => , + }, + { + id: 'albums', + label: 'Albums', + cell: item => , + }, +]; + +export const TableRockBand = () => { + const { tableProps } = useTable({ + mode: 'complete', + getData: () => data4, + paginationOptions: { pageSize: 5 }, + }); + + return ( + + + + ); +}; + +export const SelectionToggleWithActions = () => { + const [selected, setSelected] = useState | 'all'>( + new Set(), + ); + + const { tableProps } = useTable({ + mode: 'complete', + getData: () => selectionData, + paginationOptions: { pageSize: 10 }, + }); + + return ( + +
alert(`Clicked: ${item.name}`) }} + /> + + ); +}; + +export const SelectionModePlayground = () => { + const [selectionMode, setSelectionMode] = useState<'single' | 'multiple'>( + 'multiple', + ); + const [selected, setSelected] = useState | 'all'>( + new Set(), + ); + + const { tableProps } = useTable({ + mode: 'complete', + getData: () => selectionData, + paginationOptions: { pageSize: 10 }, + }); + + return ( + + +
+
+ + Selection mode: + + { + setSelectionMode(value as 'single' | 'multiple'); + setSelected(new Set()); + }} + > + single + multiple + +
+ + + ); +}; + +export const SelectionBehaviorPlayground = () => { + const [selectionBehavior, setSelectionBehavior] = useState< + 'toggle' | 'replace' + >('toggle'); + const [selected, setSelected] = useState | 'all'>( + new Set(), + ); + + const { tableProps } = useTable({ + mode: 'complete', + getData: () => selectionData, + paginationOptions: { pageSize: 10 }, + }); + + return ( + + +
+
+ + Selection behavior: + + { + setSelectionBehavior(value as 'toggle' | 'replace'); + setSelected(new Set()); + }} + > + toggle + replace + +
+ + + ); +}; diff --git a/docs-ui/src/content/table.mdx b/docs-ui/src/app/components/table/page.mdx similarity index 86% rename from docs-ui/src/content/table.mdx rename to docs-ui/src/app/components/table/page.mdx index 00b7290532..f9b27cd8d3 100644 --- a/docs-ui/src/content/table.mdx +++ b/docs-ui/src/app/components/table/page.mdx @@ -1,41 +1,39 @@ import { PropsTable } from '@/components/PropsTable'; import { Snippet } from '@/components/Snippet'; import { CodeBlock } from '@/components/CodeBlock'; -import { TableSnippet } from '@/snippets/stories-snippets'; +import { + TableRockBand, + SelectionModePlayground, + SelectionBehaviorPlayground, + SelectionToggleWithActions, +} from './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'; -import { TableDefinition } from '../utils/definitions'; +import { TableDefinition } from '../../../utils/definitions'; -} - code={tableBasicSnippet} -/> +} code={tableBasicSnippet} /> ## Usage @@ -100,7 +98,7 @@ Tables support row selection with two configuration options: selection mode and Use `selectionMode` to control how many rows can be selected. With `single`, only one row can be selected at a time. With `multiple`, any number of rows can be selected, and a header checkbox provides select-all functionality. } + preview={} code={tableSelectionModeSnippet} /> @@ -109,7 +107,7 @@ Use `selectionMode` to control how many rows can be selected. With `single`, onl Use `selectionBehavior` to control how selection is indicated and interacted with. With `toggle`, checkboxes appear for selection. With `replace`, selection is indicated by row background color—click to select, Cmd/Ctrl+click for multiple. } + preview={} code={tableSelectionBehaviorSnippet} /> @@ -120,7 +118,7 @@ With toggle behavior, clicking a row triggers its action when nothing is selecte With replace behavior, clicking selects the row and double-clicking triggers the action. } + preview={} code={tableSelectionActionsSnippet} /> diff --git a/docs-ui/src/content/table.props.ts b/docs-ui/src/app/components/table/props-definition.ts similarity index 73% rename from docs-ui/src/content/table.props.ts rename to docs-ui/src/app/components/table/props-definition.ts index 21bd5597c6..e4ef0ffe8b 100644 --- a/docs-ui/src/content/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/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 new file mode 100644 index 0000000000..0b9478a503 --- /dev/null +++ b/docs-ui/src/app/components/tabs/page.mdx @@ -0,0 +1,80 @@ +import { PropsTable } from '@/components/PropsTable'; +import { Snippet } from '@/components/Snippet'; +import { CodeBlock } from '@/components/CodeBlock'; +import { + tabsPropDefs, + tabListPropDefs, + tabPropDefs, + tabPanelPropDefs, +} from './props-definition'; +import { + tabsUsageSnippet, + 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'; +import { ChangelogComponent } from '@/components/ChangelogComponent'; + + + +} code={defaultSnippet} /> + +## Usage + + + +## API reference + +### Tabs + +Groups the tabs and the corresponding panels. Renders a `
` element. + + + +### Tab + +An individual interactive tab button that toggles the corresponding panel. Renders a ` + I am a tooltip + + ); +}; diff --git a/docs-ui/src/content/tooltip.mdx b/docs-ui/src/app/components/tooltip/page.mdx similarity index 69% rename from docs-ui/src/content/tooltip.mdx rename to docs-ui/src/app/components/tooltip/page.mdx index 8ebf6539d6..35d650c99b 100644 --- a/docs-ui/src/content/tooltip.mdx +++ b/docs-ui/src/app/components/tooltip/page.mdx @@ -1,16 +1,12 @@ import { PropsTable } from '@/components/PropsTable'; -import { TooltipSnippet } from '@/snippets/stories-snippets'; 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'; +import { TooltipDefinition } from '../../../utils/definitions'; import { ChangelogComponent } from '@/components/ChangelogComponent'; -} - code={tooltipDefaultSnippet} - align="center" -/> +} code={defaultSnippet} align="center" /> ## Usage diff --git a/docs-ui/src/content/tooltip.props.ts b/docs-ui/src/app/components/tooltip/props-definition.ts similarity index 74% rename from docs-ui/src/content/tooltip.props.ts rename to docs-ui/src/app/components/tooltip/props-definition.ts index fe64051288..dc0919f4cc 100644 --- a/docs-ui/src/content/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/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/content/visually-hidden.mdx b/docs-ui/src/app/components/visually-hidden/page.mdx similarity index 64% rename from docs-ui/src/content/visually-hidden.mdx rename to docs-ui/src/app/components/visually-hidden/page.mdx index 72ffc7a1d4..07b4bff28d 100644 --- a/docs-ui/src/content/visually-hidden.mdx +++ b/docs-ui/src/app/components/visually-hidden/page.mdx @@ -1,16 +1,16 @@ import { PropsTable } from '@/components/PropsTable'; import { Snippet } from '@/components/Snippet'; import { CodeBlock } from '@/components/CodeBlock'; -import { VisuallyHiddenSnippet } from '@/snippets/stories-snippets'; +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'; +import { VisuallyHiddenDefinition } from '../../../utils/definitions'; import { ChangelogComponent } from '@/components/ChangelogComponent'; -} - code={visuallyHiddenDefaultSnippet} -/> +} code={defaultSnippet} /> ## Usage @@ -42,8 +37,8 @@ Here's an example of providing screen reader context for a list of links in a fo } - code={visuallyHiddenExampleUsageSnippet} + preview={} + 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/content/visually-hidden.props.ts b/docs-ui/src/app/components/visually-hidden/snippets.ts similarity index 63% rename from docs-ui/src/content/visually-hidden.props.ts rename to docs-ui/src/app/components/visually-hidden/snippets.ts index 18a1c503d1..21ce6a04de 100644 --- a/docs-ui/src/content/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/components/Roadmap/Roadmap.tsx b/docs-ui/src/components/Roadmap/Roadmap.tsx deleted file mode 100644 index 52f96e0f76..0000000000 --- a/docs-ui/src/components/Roadmap/Roadmap.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { RoadmapItem } from './list'; - -export const Roadmap = ({ list }: { list: RoadmapItem[] }) => { - const orderList = ['inProgress', 'notStarted', 'completed']; - return ( -
- {list - .sort( - (a, b) => orderList.indexOf(a.status) - orderList.indexOf(b.status), - ) - .map(Item)} -
- ); -}; - -const Item = ({ - title, - status = 'notStarted', -}: { - title: string; - status: 'notStarted' | 'inProgress' | 'inReview' | 'completed'; -}) => { - return ( -
-
-
-
{title}
-
- - {status === 'notStarted' && 'Not Started'} - {status === 'inProgress' && 'In Progress'} - {status === 'inReview' && 'Ready for Review'} - {status === 'completed' && 'Completed'} - -
- ); -}; diff --git a/docs-ui/src/components/Roadmap/index.ts b/docs-ui/src/components/Roadmap/index.ts deleted file mode 100644 index c7006073d6..0000000000 --- a/docs-ui/src/components/Roadmap/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { Roadmap } from './Roadmap'; diff --git a/docs-ui/src/components/Roadmap/list.ts b/docs-ui/src/components/Roadmap/list.ts deleted file mode 100644 index 24b9197cf5..0000000000 --- a/docs-ui/src/components/Roadmap/list.ts +++ /dev/null @@ -1,47 +0,0 @@ -export type RoadmapItem = { - title: string; - status: 'notStarted' | 'inProgress' | 'inReview' | 'completed'; -}; - -export const list: RoadmapItem[] = [ - { - title: 'Remove Vanilla Extract and use pure CSS instead', - status: 'inProgress', - }, - { - title: 'Add collapsing across breakpoints for the Inline component', - status: 'notStarted', - }, - { - title: 'Add reversing the order for the Inline component', - status: 'notStarted', - }, - { - title: 'Set up Storybook', - status: 'completed', - }, - { - title: 'Set up iconography', - status: 'completed', - }, - { - title: 'Set up global tokens', - status: 'inProgress', - }, - { - title: 'Set up theming system', - status: 'inProgress', - }, - { - title: 'Create first pass at box component', - status: 'completed', - }, - { - title: 'Create first pass at stack component', - status: 'completed', - }, - { - title: 'Create first pass at inline component', - status: 'completed', - }, -]; diff --git a/docs-ui/src/components/Roadmap/styles.css b/docs-ui/src/components/Roadmap/styles.css deleted file mode 100644 index 63f32312e7..0000000000 --- a/docs-ui/src/components/Roadmap/styles.css +++ /dev/null @@ -1,100 +0,0 @@ -.roadmap { - display: flex; - flex-direction: column; -} - -.roadmap .roadmap-item { - display: flex; - align-items: center; - justify-content: space-between; - border-bottom: 1px solid #e0e0e0; - padding: 8px 0px; -} - -.roadmap .roadmap-item .left { - display: flex; - align-items: center; - padding-left: 12px; - gap: 12px; -} - -.roadmap .roadmap-item .dot { - width: 8px; - height: 8px; - border-radius: 50%; - background-color: #e0e0e0; -} - -.roadmap .roadmap-item.notStarted { - color: #000; -} - -.roadmap .roadmap-item.inProgress { - color: #000; -} - -.roadmap .roadmap-item.inReview { - color: #000; -} - -.roadmap .roadmap-item.completed .title { - color: #a2a2a2; - text-decoration: line-through; -} - -.roadmap .roadmap-item.notStarted .dot { - background-color: #d1d1d1; -} - -.roadmap .roadmap-item.inProgress .dot { - background-color: #ffd000; -} - -.roadmap .roadmap-item.inReview .dot { - background-color: #4ed14a; -} - -.roadmap .roadmap-item.completed .dot { - background-color: #4ed14a; -} - -.roadmap .roadmap-item .title { - font-size: 16px; -} - -.roadmap .roadmap-item .pill { - display: inline-flex; - align-items: center; - height: 24px; - padding: 0px 8px; - border-radius: 40px; - font-size: 12px; - font-weight: 600; - margin-left: 8px; - border-style: solid; - border-width: 1px; -} - -.roadmap .roadmap-item.notStarted .pill { - background-color: #f2f2f2; - border-color: #cdcdcd; - color: #888888; -} - -.roadmap .roadmap-item.inProgress .pill { - background-color: #fff2b9; - border-color: #ffd000; - color: #d79927; -} - -.roadmap .roadmap-item.inReview .pill { - background-color: #d7f9d7; - border-color: #4ed14a; - color: #3a9837; -} - -.roadmap .roadmap-item.completed .pill { - background-color: #d7f9d7; - border-color: #4ed14a; - color: #3a9837; -} diff --git a/docs-ui/src/content/accordion.props.ts b/docs-ui/src/content/accordion.props.ts deleted file mode 100644 index aac983b0c3..0000000000 --- a/docs-ui/src/content/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/content/avatar.props.ts b/docs-ui/src/content/avatar.props.ts deleted file mode 100644 index 80621cdb89..0000000000 --- a/docs-ui/src/content/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/content/button-icon.props.ts b/docs-ui/src/content/button-icon.props.ts deleted file mode 100644 index b063484d27..0000000000 --- a/docs-ui/src/content/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/content/button-link.mdx b/docs-ui/src/content/button-link.mdx deleted file mode 100644 index 4f3f376aee..0000000000 --- a/docs-ui/src/content/button-link.mdx +++ /dev/null @@ -1,97 +0,0 @@ -import { PropsTable } from '@/components/PropsTable'; -import { Snippet } from '@/components/Snippet'; -import { CodeBlock } from '@/components/CodeBlock'; -import { ButtonLinkSnippet } from '@/snippets/stories-snippets'; -import { - buttonLinkPropDefs, - buttonLinkSnippetUsage, - buttonLinkVariantsSnippet, - buttonLinkSizesSnippet, - buttonLinkIconsSnippet, - buttonLinkDisabledSnippet, - buttonLinkResponsiveSnippet, -} from './button-link.props'; -import { PageTitle } from '@/components/PageTitle'; -import { Theming } from '@/components/Theming'; -import { ButtonLinkDefinition } from '../utils/definitions'; -import { ChangelogComponent } from '@/components/ChangelogComponent'; - - - -} - code={buttonLinkVariantsSnippet} -/> - -## Usage - - - -## API reference - - - -## Examples - -### Variants - -Here's a view when buttons have different variants. - -} - code={buttonLinkVariantsSnippet} -/> - -### Sizes - -Here's a view when buttons have different sizes. - -} - code={buttonLinkSizesSnippet} -/> - -### With Icons - -Here's a view when buttons have icons. - -} - code={buttonLinkIconsSnippet} -/> - -### Disabled - -Here's a view when buttons are disabled. - -} - code={buttonLinkDisabledSnippet} -/> - -### Responsive - -Here's a view when buttons are responsive. - - - - - - diff --git a/docs-ui/src/content/button-link.props.ts b/docs-ui/src/content/button-link.props.ts deleted file mode 100644 index 2bd4e2196a..0000000000 --- a/docs-ui/src/content/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/content/button.props.ts b/docs-ui/src/content/button.props.ts deleted file mode 100644 index e650a9f2e9..0000000000 --- a/docs-ui/src/content/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/content/card.props.ts b/docs-ui/src/content/card.props.ts deleted file mode 100644 index 70c71bdf56..0000000000 --- a/docs-ui/src/content/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/content/flex.props.ts b/docs-ui/src/content/flex.props.ts deleted file mode 100644 index cc4c2d5a75..0000000000 --- a/docs-ui/src/content/flex.props.ts +++ /dev/null @@ -1,55 +0,0 @@ -import { - childrenPropDefs, - classNamePropDefs, - stylePropDefs, - type PropDef, -} from '@/utils/propDefs'; - -export const flexPropDefs: Record = { - align: { - type: 'enum', - values: ['start', 'center', 'end', 'baseline', 'stretch'], - responsive: true, - }, - direction: { - type: 'enum', - values: ['row', 'column', 'row-reverse', 'column-reverse'], - responsive: true, - }, - justify: { - type: 'enum', - values: ['start', 'center', 'end', 'between'], - responsive: true, - }, - ...childrenPropDefs, - ...classNamePropDefs, - ...stylePropDefs, -}; - -export const flexUsageSnippet = `import { Flex } from '@backstage/ui'; - -`; - -export const flexDefaultSnippet = ` - - - -`; - -export const flexSimpleSnippet = ` - Hello World - Hello World - Hello World -`; - -export const flexResponsiveSnippet = ` - Hello World - Hello World - Hello World -`; - -export const flexAlignSnippet = ` - Hello World - Hello World - Hello World -`; diff --git a/docs-ui/src/content/grid.mdx b/docs-ui/src/content/grid.mdx deleted file mode 100644 index 5f179b9e14..0000000000 --- a/docs-ui/src/content/grid.mdx +++ /dev/null @@ -1,99 +0,0 @@ -import { CodeBlock } from '@/components/CodeBlock'; -import { PropsTable } from '@/components/PropsTable'; -import { Snippet } from '@/components/Snippet'; -import { GridSnippet } from '@/snippets/stories-snippets'; -import { spacingPropDefs } from '@/utils/propDefs'; -import { - gridPropDefs, - gridItemPropDefs, - gridUsageSnippet, - gridDefaultSnippet, - gridSimpleSnippet, - gridComplexSnippet, - gridMixingRowsSnippet, - gridResponsiveSnippet, - gridStartEndSnippet, -} from './grid.props'; -import { PageTitle } from '@/components/PageTitle'; -import { Theming } from '@/components/Theming'; -import { GridDefinition } from '../utils/definitions'; -import { ChangelogComponent } from '@/components/ChangelogComponent'; - - - -} - code={gridDefaultSnippet} -/> - -## Usage - - - -## API reference - -### Grid.Root - -This is the grid container component. It will help to define the number of -columns that will be used in the grid. You can also define the gap between the -columns. All values are responsive. - - - -The grid component also accepts all the spacing props from the Box component. - - - -### Grid.Item - -If you need more control over the columns, you can use the grid item -component. This will give you access to `rowSpan`, `colSpan`, `start` and -`end`. All values are responsive. This component is optional, you can use any -elements directly if you prefer. - - - -## Examples - -### Simple grid - -A simple grid with 3 columns and a gap of md. - - - -### Complex grid - -You can also use the grid item to create more complex layouts. In this example -the first column will span 1 column and the second column will span 2 columns. - - - -### Mixing rows and columns - -The grid item component also supports the `rowSpan` prop, which allows you to -span multiple rows within the grid layout. In this example, the first item -will span 2 rows to achieve a dynamic and flexible grid structure. - - - -### Responsive grid - -The grid component also supports responsive values, making it easy to create -responsive designs. - - - -### Start and End - -The start and end props can be used to position the item in the grid. - - - - - - diff --git a/docs-ui/src/content/grid.props.ts b/docs-ui/src/content/grid.props.ts deleted file mode 100644 index 6f037cd64f..0000000000 --- a/docs-ui/src/content/grid.props.ts +++ /dev/null @@ -1,111 +0,0 @@ -import { - childrenPropDefs, - classNamePropDefs, - stylePropDefs, - type PropDef, -} from '@/utils/propDefs'; - -const columnsValues = [ - '1', - '2', - '3', - '4', - '5', - '6', - '7', - '8', - '9', - '10', - '11', - '12', -]; - -export const gridPropDefs: Record = { - columns: { - type: 'enum | string', - values: [...columnsValues, 'auto'], - responsive: true, - default: 'auto', - }, - ...childrenPropDefs, - ...classNamePropDefs, - ...stylePropDefs, -}; - -export const gridItemPropDefs: Record = { - colSpan: { - type: 'enum | string', - values: [...columnsValues, 'full'], - responsive: true, - }, - rowSpan: { - type: 'enum | string', - values: [...columnsValues, 'full'], - responsive: true, - }, - colStart: { - type: 'enum | string', - values: [...columnsValues, 'auto'], - responsive: true, - }, - colEnd: { - type: 'enum | string', - values: [...columnsValues, 'auto'], - responsive: true, - }, - ...childrenPropDefs, - ...classNamePropDefs, - ...stylePropDefs, -}; - -export const gridUsageSnippet = `import { Grid } from '@backstage/ui'; - -`; - -export const gridDefaultSnippet = ` - - - -`; - -export const gridSimpleSnippet = ` - Hello World - Hello World - Hello World -`; - -export const gridComplexSnippet = ` - - Hello World - - - Hello World - -`; - -export const gridMixingRowsSnippet = ` - - Hello World - - - Hello World - - - Hello World - -`; - -export const gridResponsiveSnippet = ` - - - - Hello World - -`; - -export const gridStartEndSnippet = ` - - Hello World - -`; diff --git a/docs-ui/src/content/link.mdx b/docs-ui/src/content/link.mdx deleted file mode 100644 index 486c06b298..0000000000 --- a/docs-ui/src/content/link.mdx +++ /dev/null @@ -1,103 +0,0 @@ -import { PropsTable } from '@/components/PropsTable'; -import { Snippet } from '@/components/Snippet'; -import { CodeBlock } from '@/components/CodeBlock'; -import { - MenuSnippet, - ButtonSnippet, - LinkSnippet, -} from '@/snippets/stories-snippets'; -import { - linkPropDefs, - linkUsageSnippet, - linkDefaultSnippet, - linkVariantsSnippet, - linkWeightsSnippet, - linkColorsSnippet, - linkRouterSnippet, - linkTruncateSnippet, -} from './link.props'; -import { PageTitle } from '@/components/PageTitle'; -import { Theming } from '@/components/Theming'; -import { ChangelogComponent } from '@/components/ChangelogComponent'; -import { LinkDefinition } from '../utils/definitions'; - - - -} - code={linkDefaultSnippet} -/> - -## Usage - - - -## API reference - - - -## Router Integration - -The `Link` component handles both internal and external navigation. It automatically detects whether the provided URL is internal (relative path) or external (absolute URL with protocol) and renders the appropriate element: - -- **Internal routes**: Uses `react-router-dom`'s `Link` component for client-side navigation -- **External URLs**: Renders a standard `` element for traditional navigation - - - -## Examples - -### Variants - -Here's a view when links have different variants. - -} - code={linkVariantsSnippet} -/> - -### Weights - -Here's a view when links have different weights. - -} - code={linkWeightsSnippet} -/> - -### Colors - -Here's a view when links have different colors. - -} - code={linkColorsSnippet} -/> - -### Truncate - -The `Link` component has a `truncate` prop that can be used to truncate the text. - -} - code={linkTruncateSnippet} -/> - - - - diff --git a/docs-ui/src/content/link.props.ts b/docs-ui/src/content/link.props.ts deleted file mode 100644 index 748e64cc15..0000000000 --- a/docs-ui/src/content/link.props.ts +++ /dev/null @@ -1,81 +0,0 @@ -import { - classNamePropDefs, - stylePropDefs, - type PropDef, -} from '@/utils/propDefs'; - -export const linkPropDefs: Record = { - href: { - type: 'string', - }, - variant: { - type: 'enum', - values: [ - 'title-large', - 'title-medium', - 'title-small', - 'title-x-small', - 'body-large', - 'body-medium', - 'body-small', - 'body-x-small', - ], - default: 'body-medium', - responsive: true, - }, - weight: { - type: 'enum', - values: ['regular', 'bold'], - default: 'regular', - responsive: true, - }, - color: { - type: 'enum', - values: ['primary', 'secondary', 'danger', 'warning', 'success'], - default: 'primary', - responsive: true, - }, - ...classNamePropDefs, - ...stylePropDefs, -}; - -export const linkUsageSnippet = `import { Link } from '@backstage/ui'; - -Sign up for Backstage`; - -export const linkDefaultSnippet = `Sign up for Backstage`; - -export const linkVariantsSnippet = ` - ... - ... - ... - ... - ... - ... - ... - ... -`; - -export const linkWeightsSnippet = ` - - -`; - -export const linkColorsSnippet = ` - I am primary - I am secondary - I am danger - I am warning - I am success -`; - -export const linkRouterSnippet = `import { Link } from '@backstage/ui'; - -// Internal route -Home - -// External URL -Backstage -`; - -export const linkTruncateSnippet = `...`; diff --git a/docs-ui/src/content/menu.props.ts b/docs-ui/src/content/menu.props.ts deleted file mode 100644 index 2c7d76dd5d..0000000000 --- a/docs-ui/src/content/menu.props.ts +++ /dev/null @@ -1,372 +0,0 @@ -import { - classNamePropDefs, - stylePropDefs, - type PropDef, -} from '@/utils/propDefs'; - -const placementValues = [ - 'bottom', - 'bottom left', - 'bottom right', - 'bottom start', - 'bottom end', - 'top', - 'top left', - 'top right', - 'top start', - 'top end', - 'left', - 'left top', - 'left bottom', - 'start', - 'start top', - 'start bottom', - 'right', - 'right top', - 'right bottom', - 'end', - 'end top', - 'end bottom', -]; - -export const menuTriggerPropDefs: Record = { - isOpen: { - type: 'boolean', - }, - defaultOpen: { - type: 'boolean', - }, - onOpenChange: { - type: 'enum', - values: ['(isOpen: boolean) => void'], - }, -}; - -export const submenuTriggerPropDefs: Record = { - delay: { - type: 'number', - default: '200', - }, -}; - -export const menuPropDefs: Record = { - disabledKeys: { - type: 'enum', - values: ['Iterable'], - }, - selectionMode: { - type: 'enum', - values: ['none', 'single', 'multiple'], - }, - selectedKeys: { - type: 'enum', - values: ['all', 'Iterable'], - }, - defaultSelectedKeys: { - type: 'enum', - values: ['all', 'Iterable'], - }, - placement: { - type: 'enum', - values: placementValues, - }, - virtualized: { - type: 'boolean', - default: 'false', - }, - maxWidth: { - type: 'number', - }, - maxHeight: { - type: 'number', - }, - ...classNamePropDefs, - ...stylePropDefs, -}; - -export const menuListBoxPropDefs: Record = { - disabledKeys: { - type: 'enum', - values: ['Iterable'], - }, - selectionMode: { - type: 'enum', - values: ['none', 'single', 'multiple'], - }, - selectedKeys: { - type: 'enum', - values: ['all', 'Iterable'], - }, - defaultSelectedKeys: { - type: 'enum', - values: ['all', 'Iterable'], - }, - placement: { - type: 'enum', - values: placementValues, - }, - virtualized: { - type: 'boolean', - default: 'false', - }, - maxWidth: { - type: 'number', - }, - maxHeight: { - type: 'number', - }, - ...classNamePropDefs, - ...stylePropDefs, -}; - -export const menuAutocompletePropDefs: Record = { - placement: { - type: 'enum', - values: placementValues, - }, - virtualized: { - type: 'boolean', - default: 'false', - }, - maxWidth: { - type: 'number', - }, - maxHeight: { - type: 'number', - }, - ...classNamePropDefs, - ...stylePropDefs, -}; - -export const menuAutocompleteListboxPropDefs: Record = { - placement: { - type: 'enum', - values: placementValues, - }, - virtualized: { - type: 'boolean', - default: 'false', - }, - maxWidth: { - type: 'number', - }, - maxHeight: { - type: 'number', - }, - ...classNamePropDefs, - ...stylePropDefs, -}; - -export const menuItemPropDefs: Record = { - id: { - type: 'enum', - values: ['Key'], - }, - value: { - type: 'string', - }, - textValue: { - type: 'string', - }, - isDisabled: { - type: 'boolean', - }, - href: { - type: 'string', - }, - onAction: { - type: 'enum', - values: ['(event) => void'], - }, - ...classNamePropDefs, - ...stylePropDefs, -}; - -export const menuListBoxItemPropDefs: Record = { - id: { - type: 'enum', - values: ['Key'], - }, - value: { - type: 'string', - }, - textValue: { - type: 'string', - }, - isDisabled: { - type: 'boolean', - }, - ...classNamePropDefs, - ...stylePropDefs, -}; - -export const menuSectionPropDefs: Record = { - title: { - type: 'string', - }, - ...classNamePropDefs, - ...stylePropDefs, -}; - -export const menuSeparatorPropDefs: Record = { - ...classNamePropDefs, - ...stylePropDefs, -}; - -export const usage = `import { MenuTrigger, Menu, MenuItem } from '@backstage/ui'; - - - - - Apple - Banana - Blueberry - - - Vegetables - - Carrot - Tomato - Potato - - - -`; - -export const preview = ` - - - {options.map(option => ( - {option.label} - ))} - -`; - -export const submenu = ` - - - Edit - Duplicate - - Submenu - - Edit - Duplicate - Rename - - Share - Move - - }>Feedback - - - -`; - -export const icons = ` - - - }>Copy - }>Rename - }>Send feedback - -`; - -export const sections = ` - - - - }>Profile - }>Settings - - - }>Help Center - }> - Contact Support - - }>Feedback - - -`; - -export const separators = ` - - - Edit - Duplicate - Rename - - Share - Move - - }>Feedback - -`; - -export const links = ` - - - Internal link - - External link - - Email link - -`; - -export const autocomplete = ` - - - Create new file... - Create new folder... - Assign to... - Assign to me - Change status... - Change priority... - Add label... - Remove label... - -`; - -export const autocompleteListbox = `const [selected, setSelected] = useState( - new Set(['blueberry']), -); - - - Selected: {Array.from(selected).join(', ')} - - - - {options.map(option => ( - - {option.label} - - ))} - - -`; - -export const autocompleteListboxMultiple = `const [selected, setSelected] = useState( - new Set(['blueberry', 'cherry']), -); - - - Selected: {Array.from(selected).join(', ')} - - - - {options.map(option => ( - - {option.label} - - ))} - - -`; diff --git a/docs-ui/src/content/password-field.props.ts b/docs-ui/src/content/password-field.props.ts deleted file mode 100644 index 493405b5fd..0000000000 --- a/docs-ui/src/content/password-field.props.ts +++ /dev/null @@ -1,43 +0,0 @@ -import { - classNamePropDefs, - stylePropDefs, - type PropDef, -} from '@/utils/propDefs'; - -export const inputPropDefs: Record = { - size: { - type: 'enum', - values: ['small', 'medium'], - default: 'small', - responsive: true, - }, - label: { - type: 'string', - }, - icon: { - type: 'enum', - values: ['ReactNode'], - }, - description: { - type: 'string', - }, - name: { - type: 'string', - required: true, - }, - ...classNamePropDefs, - ...stylePropDefs, -}; - -export const passwordFieldUsageSnippet = `import { PasswordField } from '@backstage/ui'; - -`; - -export const passwordFieldDefaultSnippet = ``; - -export const passwordFieldSizesSnippet = ` - } /> - } /> -`; - -export const passwordFieldDescriptionSnippet = ``; diff --git a/docs-ui/src/content/radio-group.props.ts b/docs-ui/src/content/radio-group.props.ts deleted file mode 100644 index 3ed08f1053..0000000000 --- a/docs-ui/src/content/radio-group.props.ts +++ /dev/null @@ -1,64 +0,0 @@ -import { - classNamePropDefs, - stylePropDefs, - type PropDef, -} from '@/utils/propDefs'; - -export const radioGroupPropDefs: Record = { - size: { - type: 'enum', - values: ['small', 'medium'], - default: 'small', - responsive: true, - }, - label: { - type: 'string', - }, - icon: { - type: 'enum', - values: ['ReactNode'], - }, - description: { - type: 'string', - }, - name: { - type: 'string', - required: true, - }, - ...classNamePropDefs, - ...stylePropDefs, -}; - -export const radioGroupUsageSnippet = `import { RadioGroup } from '@backstage/ui'; - -`; - -export const radioGroupDefaultSnippet = ``; - -export const radioGroupDescriptionSnippet = ``; - -export const radioGroupHorizontalSnippet = ``; - -export const radioGroupDisabledSnippet = ` - Bulbasaur - Charmander - Squirtle -`; - -export const radioGroupDisabledSingleSnippet = ` - Bulbasaur - Charmander - Squirtle -`; - -export const radioGroupValidationSnippet = ` (value === \'charmander\' ? \'Nice try!\' : null)> - Bulbasaur - Charmander - Squirtle -`; - -export const radioGroupReadOnlySnippet = ` - Bulbasaur - Charmander - Squirtle -`; diff --git a/docs-ui/src/content/search-field.props.ts b/docs-ui/src/content/search-field.props.ts deleted file mode 100644 index b11ae3931c..0000000000 --- a/docs-ui/src/content/search-field.props.ts +++ /dev/null @@ -1,49 +0,0 @@ -import { - classNamePropDefs, - stylePropDefs, - type PropDef, -} from '@/utils/propDefs'; - -export const searchFieldPropDefs: Record = { - size: { - type: 'enum', - values: ['small', 'medium'], - default: 'small', - responsive: true, - }, - label: { - type: 'string', - }, - icon: { - type: 'enum', - values: ['ReactNode'], - }, - description: { - type: 'string', - }, - name: { - type: 'string', - required: true, - }, - startCollapsed: { - type: 'boolean', - default: 'false', - }, - ...classNamePropDefs, - ...stylePropDefs, -}; - -export const searchFieldUsageSnippet = `import { SearchField } from '@backstage/ui'; - -`; - -export const searchFieldDefaultSnippet = ``; - -export const searchFieldSizesSnippet = ` - } /> - } /> -`; - -export const searchFieldDescriptionSnippet = ``; - -export const searchFieldCollapsibleSnippet = ``; diff --git a/docs-ui/src/content/skeleton.props.ts b/docs-ui/src/content/skeleton.props.ts deleted file mode 100644 index ab79268d15..0000000000 --- a/docs-ui/src/content/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/content/tabs.mdx b/docs-ui/src/content/tabs.mdx deleted file mode 100644 index 1fc7448eba..0000000000 --- a/docs-ui/src/content/tabs.mdx +++ /dev/null @@ -1,85 +0,0 @@ -import { PropsTable } from '@/components/PropsTable'; -import { TabsSnippet } from '@/snippets/stories-snippets'; -import { Snippet } from '@/components/Snippet'; -import { CodeBlock } from '@/components/CodeBlock'; -import { - tabsPropDefs, - tabPropDefs, - tabsUsageSnippet, - tabsDefaultSnippet, - tabsWithTabPanelsSnippet, - tabsWithLinksSnippet, - tabsWithDeeplyNestedRoutesSnippet, -} from './tabs.props'; -import { PageTitle } from '@/components/PageTitle'; -import { Theming } from '@/components/Theming'; -import { TabsDefinition } from '../utils/definitions'; -import { ChangelogComponent } from '@/components/ChangelogComponent'; - - - -} - code={tabsDefaultSnippet} -/> - -## Usage - - - -## API reference - -### Tabs - -Groups the tabs and the corresponding panels. Renders a `
` element. - - - -### Tab - -An individual interactive tab button that toggles the corresponding panel. Renders a `