paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 39 Packages Projects Releases Wiki Activity

Merge branch 'master' into range-slider-component

Browse Source
This commit is contained in:
root
2026-03-10 20:29:25 +05:30
parent 993e272418 422a79039b
commit ea82e08f4a
401 changed files with 12549 additions and 5799 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs-ui/src/app/components/button-link/props-definition.tsx
+5
View File
@@ -62,6 +62,11 @@ export const buttonLinkPropDefs: Record<string, PropDef> = {
</>
),
},
noTrack: {
type: 'boolean',
description:
'Suppresses the automatic analytics click event, e.g. if you already have custom tracking.',
},
onSurface: {
type: 'enum',
values: ['0', '1', '2', '3', 'danger', 'warning', 'success', 'auto'],
docs-ui/src/app/components/header-page/components.tsx → docs-ui/src/app/components/header/components.tsx
+6 -9
View File
@@ -1,6 +1,6 @@
'use client';
import { HeaderPage } from '../../../../../packages/ui/src/components/HeaderPage/HeaderPage';
import { Header } from '../../../../../packages/ui/src/components/Header/Header';
import { Button } from '../../../../../packages/ui/src/components/Button/Button';
import { ButtonIcon } from '../../../../../packages/ui/src/components/ButtonIcon/ButtonIcon';
import {
@@ -31,7 +31,7 @@ const breadcrumbs = [
export const WithEverything = () => (
<MemoryRouter>
<HeaderPage
<Header
title="Page Title"
tabs={tabs.slice(0, 2)}
breadcrumbs={breadcrumbs.slice(0, 2)}
@@ -47,28 +47,25 @@ export const WithEverything = () => (
export const WithLongBreadcrumbs = () => (
<MemoryRouter>
<HeaderPage title="Page Title" breadcrumbs={breadcrumbs.slice(0, 2)} />
<Header title="Page Title" breadcrumbs={breadcrumbs.slice(0, 2)} />
</MemoryRouter>
);
export const WithTabs = () => (
<MemoryRouter>
<HeaderPage title="Page Title" tabs={tabs.slice(0, 3)} />
<Header title="Page Title" tabs={tabs.slice(0, 3)} />
</MemoryRouter>
);
export const WithCustomActions = () => (
<MemoryRouter>
<HeaderPage
title="Page Title"
customActions={<Button>Custom action</Button>}
/>
<Header title="Page Title" customActions={<Button>Custom action</Button>} />
</MemoryRouter>
);
export const WithMenu = () => (
<MemoryRouter>
<HeaderPage
<Header
title="Page Title"
customActions={
<MenuTrigger>
docs-ui/src/app/components/header-page/page.mdx → docs-ui/src/app/components/header/page.mdx
+4 -4
View File
@@ -19,11 +19,11 @@ import {
} from './snippets';
import { PageTitle } from '@/components/PageTitle';
import { Theming } from '@/components/Theming';
import { HeaderPageDefinition } from '../../../utils/definitions';
import { HeaderDefinition } from '../../../utils/definitions';
import { ChangelogComponent } from '@/components/ChangelogComponent';
<PageTitle
title="HeaderPage"
title="Header"
description="A secondary header with title, breadcrumbs, tabs, and actions."
/>
@@ -61,6 +61,6 @@ Use `customActions` to add a dropdown menu.
<Snippet open preview={<WithMenu />} code={withMenu} />
<Theming definition={HeaderPageDefinition} />
<Theming definition={HeaderDefinition} />
<ChangelogComponent component="header-page" />
<ChangelogComponent component="header" />
docs-ui/src/app/components/header-page/props-definition.tsx → docs-ui/src/app/components/header/props-definition.tsx
+1 -1
View File
@@ -50,7 +50,7 @@ export const headerPagePropDefs: Record<string, PropDef> = {
type: 'complex',
description: 'Breadcrumb trail displayed above the title.',
complexType: {
name: 'HeaderPageBreadcrumb[]',
name: 'HeaderBreadcrumb[]',
properties: {
label: {
type: 'string',
docs-ui/src/app/components/header-page/snippets.ts → docs-ui/src/app/components/header/snippets.ts
+7 -7
View File
@@ -1,8 +1,8 @@
export const usage = `import { HeaderPage } from '@backstage/ui';
export const usage = `import { Header } from '@backstage/ui';
<HeaderPage title="Page Title" />`;
<Header title="Page Title" />`;
export const defaultSnippet = `<HeaderPage
export const defaultSnippet = `<Header
title="Page Title"
breadcrumbs={[
{ label: 'Home', href: '/' },
@@ -20,7 +20,7 @@ export const defaultSnippet = `<HeaderPage
}
/>`;
export const withBreadcrumbs = `<HeaderPage
export const withBreadcrumbs = `<Header
title="Page Title"
breadcrumbs={[
{ label: 'Home', href: '/' },
@@ -28,7 +28,7 @@ export const withBreadcrumbs = `<HeaderPage
]}
/>`;
export const withTabs = `<HeaderPage
export const withTabs = `<Header
title="Page Title"
tabs={[
{ id: 'overview', label: 'Overview', href: '/overview' },
@@ -37,12 +37,12 @@ export const withTabs = `<HeaderPage
]}
/>`;
export const withCustomActions = `<HeaderPage
export const withCustomActions = `<Header
title="Page Title"
customActions={<Button>Custom action</Button>}
/>`;
export const withMenu = `<HeaderPage
export const withMenu = `<Header
title="Page Title"
customActions={
<MenuTrigger>
docs-ui/src/app/components/link/props-definition.tsx
+5
View File
@@ -68,6 +68,11 @@ export const linkPropDefs: Record<string, PropDef> = {
'Truncates text with ellipsis when it overflows its container.',
default: 'false',
},
noTrack: {
type: 'boolean',
description:
'Suppresses the automatic analytics click event, e.g. if you already have custom tracking.',
},
standalone: {
type: 'boolean',
description: 'Removes underline by default. Underline appears on hover.',
docs-ui/src/app/components/menu/props-definition.tsx
+5
View File
@@ -309,6 +309,11 @@ export const menuItemPropDefs: Record<string, PropDef> = {
type: 'boolean',
description: 'Whether the item is disabled.',
},
noTrack: {
type: 'boolean',
description:
'Suppresses the automatic analytics click event, e.g. if you already have custom tracking.',
},
textValue: {
type: 'string',
description: 'Text used for typeahead and accessibility.',
docs-ui/src/app/components/plugin-header/components.tsx
+3 -3
View File
@@ -1,7 +1,7 @@
'use client';
import { PluginHeader } from '../../../../../packages/ui/src/components/PluginHeader/PluginHeader';
import { HeaderPage } from '../../../../../packages/ui/src/components/HeaderPage/HeaderPage';
import { Header } from '../../../../../packages/ui/src/components/Header/Header';
import { ButtonIcon } from '../../../../../packages/ui/src/components/ButtonIcon/ButtonIcon';
import { Button } from '../../../../../packages/ui/src/components/Button/Button';
import { MemoryRouter } from 'react-router-dom';
@@ -58,11 +58,11 @@ export const WithAllOptions = () => (
</MemoryRouter>
);
export const WithHeaderPage = () => (
export const WithHeader = () => (
<MemoryRouter>
<>
<PluginHeader title="My plugin" titleLink="/" tabs={tabs.slice(0, 2)} />
<HeaderPage
<Header
title="Page title"
tabs={tabs2}
customActions={<Button>Custom action</Button>}
docs-ui/src/app/components/plugin-header/page.mdx
+5 -5
View File
@@ -4,7 +4,7 @@ import { Snippet } from '@/components/Snippet';
import {
WithAllOptionsAndTabs,
WithAllOptions,
WithHeaderPage,
WithHeader,
} from './components';
import { headerPropDefs } from './props-definition';
import {
@@ -12,7 +12,7 @@ import {
simple,
defaultSnippet,
withTabs,
withHeaderPage,
withHeader,
} from './snippets';
import { PageTitle } from '@/components/PageTitle';
import { Theming } from '@/components/Theming';
@@ -46,11 +46,11 @@ Tabs use React Router and highlight automatically based on the current route.
<Snippet preview={<WithAllOptionsAndTabs />} code={withTabs} open />
### Plugin header with HeaderPage
### Plugin header with Header
Combine with [HeaderPage](/components/header-page) for multi-level navigation.
Combine with [Header](/components/header) for multi-level navigation.
<Snippet preview={<WithHeaderPage />} code={withHeaderPage} open />
<Snippet preview={<WithHeader />} code={withHeader} open />
<Theming definition={PluginHeaderDefinition} />
docs-ui/src/app/components/plugin-header/snippets.ts
+2 -2
View File
@@ -43,7 +43,7 @@ export const withTabs = `<PluginHeader
]}
/>`;
export const withHeaderPage = `<PluginHeader
export const withHeader = `<PluginHeader
title="My plugin"
titleLink="/"
tabs={[
@@ -51,7 +51,7 @@ export const withHeaderPage = `<PluginHeader
{ id: 'checks', label: 'Checks', href: '/checks' },
]}
/>
<HeaderPage
<Header
title="Page title"
tabs={[
{ id: 'banana', label: 'Banana', href: '/banana' },
docs-ui/src/app/components/table/props-definition.tsx
+5
View File
@@ -456,6 +456,11 @@ export const rowPropDefs: Record<string, PropDef> = {
description:
'Row content. Can be a render function receiving column config.',
},
noTrack: {
type: 'boolean',
description:
'Suppresses the automatic analytics click event, e.g. if you already have custom tracking.',
},
...classNamePropDefs,
...stylePropDefs,
};
docs-ui/src/app/components/tabs/props-definition.ts
+5
View File
@@ -68,6 +68,11 @@ export const tabPropDefs: Record<string, PropDef> = {
default: 'false',
description: 'Disables this tab. Use for temporarily unavailable options.',
},
noTrack: {
type: 'boolean',
description:
'Suppresses the automatic analytics click event, e.g. if you already have custom tracking.',
},
...childrenPropDefs,
...classNamePropDefs,
};
docs-ui/src/app/components/tag-group/props-definition.tsx
+5
View File
@@ -84,6 +84,11 @@ export const tagPropDefs: Record<string, PropDef> = {
type: 'boolean',
description: 'Whether the tag is disabled.',
},
noTrack: {
type: 'boolean',
description:
'Suppresses the automatic analytics click event, e.g. if you already have custom tracking.',
},
...childrenPropDefs,
...classNamePropDefs,
};
docs-ui/src/app/get-started/installation/page.mdx
+27 -1
View File
@@ -1,6 +1,10 @@
import { CodeBlock } from '@/components/CodeBlock';
import { Banner } from '@/components/Banner';
import { snippet } from './snippets';
import {
snippet,
analyticsSetupSnippet,
analyticsNoTrackSnippet,
} from './snippets';
# Installation
@@ -44,3 +48,25 @@ your plugin and import the components you need.
/>
<CodeBlock lang="tsx" title="Let's get started 🚀" code={snippet} />
## Analytics
BUI components with navigation behavior — Link, ButtonLink, Tab, MenuItem, Tag, and Row — can fire analytics events when clicked. To enable this, you need to connect BUI's analytics layer to Backstage's analytics system.
### Setup
If you're using the **new frontend system**, analytics is wired automatically via `@backstage/plugin-app` — no setup required.
For the **old frontend system**, the `BUIProvider` is included in the app shell from `@backstage/core-app-api` and works out of the box.
If you need to set up the provider manually (e.g. in a custom app shell), wrap your app content with the `BUIProvider` and pass in Backstage's `useAnalytics` hook:
<CodeBlock lang="tsx" code={analyticsSetupSnippet} />
### How it works
Once configured, BUI components fire a `click` event through Backstage's analytics system when a user navigates. Events include the link text as the subject and the destination URL in the attributes, along with any `AnalyticsContext` metadata (such as `pluginId`) from the component's position in the tree.
To suppress tracking on an individual component, use the `noTrack` prop:
<CodeBlock lang="tsx" code={analyticsNoTrackSnippet} />
docs-ui/src/app/get-started/installation/snippets.ts
+13
View File
@@ -4,3 +4,16 @@ export const snippet = `import { Flex, Button, Text } from '@backstage/ui';
<Text>Hello World</Text>
<Button>Click me</Button>
</Flex>;`;
export const analyticsSetupSnippet = `import { BUIProvider } from '@backstage/ui';
import { useAnalytics } from '@backstage/core-plugin-api';
// Wrap your app content with the provider
<BUIProvider useAnalytics={useAnalytics}>
<AppContent />
</BUIProvider>`;
export const analyticsNoTrackSnippet = `// Suppress analytics for a specific link
<Link href="/internal" noTrack>
Skip tracking
</Link>`;
docs-ui/src/components/Toolbar/Toolbar.tsx
+14
View File
@@ -3,6 +3,7 @@
import { useState, useEffect } from 'react';
import {
RiArrowDownSLine,
RiDiscordLine,
RiGithubLine,
RiMoonLine,
RiSearchLine,
@@ -95,6 +96,7 @@ export const Toolbar = ({ version }: ToolbarProps) => {
<a
href="https://www.npmjs.com/package/@backstage/ui"
target="_blank"
rel="noopener noreferrer"
className={styles.bubble}
data-hide-tablet
>
@@ -103,11 +105,23 @@ export const Toolbar = ({ version }: ToolbarProps) => {
<a
href="https://github.com/backstage/backstage/tree/master/packages/ui"
target="_blank"
rel="noopener noreferrer"
className={styles.bubble}
data-hide-tablet
aria-label="View source on GitHub"
>
<RiGithubLine size={16} />
</a>
<a
href="https://discord.gg/backstage-687207715902193673"
target="_blank"
rel="noopener noreferrer"
className={styles.bubble}
data-hide-tablet
aria-label="Join Backstage on Discord"
>
<RiDiscordLine size={16} />
</a>
<ToggleButtonGroup
defaultSelectedKeys={['light']}
selectedKeys={selectedTheme}
docs-ui/src/utils/changelogs/v0.9.0.ts
+1 -1
View File
@@ -114,7 +114,7 @@ After:
'switch',
'skeleton',
'plugin-header',
'header-page',
'header',
'tabs',
],
version: '0.9.0',
docs-ui/src/utils/data.ts
+2 -2
View File
@@ -62,8 +62,8 @@ export const components: Page[] = [
slug: 'plugin-header',
},
{
title: 'HeaderPage',
slug: 'header-page',
title: 'Header',
slug: 'header',
},
{
title: 'Link',
docs-ui/src/utils/types.ts
+1 -1
View File
@@ -15,7 +15,7 @@ export type Component =
| 'flex'
| 'grid'
| 'plugin-header'
| 'header-page'
| 'header'
| 'heading'
| 'icon'
| 'link'
docs-ui/yarn.lock
+30 -30
View File
@@ -336,14 +336,14 @@ __metadata:
linkType: hard
"@codemirror/view@npm:^6.0.0, @codemirror/view@npm:^6.17.0, @codemirror/view@npm:^6.23.0, @codemirror/view@npm:^6.27.0, @codemirror/view@npm:^6.34.4, @codemirror/view@npm:^6.35.0":
version: 6.39.14
resolution: "@codemirror/view@npm:6.39.14"
version: 6.39.16
resolution: "@codemirror/view@npm:6.39.16"
dependencies:
"@codemirror/state": "npm:^6.5.0"
crelt: "npm:^1.0.6"
style-mod: "npm:^4.1.0"
w3c-keyname: "npm:^2.2.4"
checksum: 10/956e79758d97e9fc6f6fd9a21575148cb0126712e0a3f78dc03031ebed1a5787eae581eda140f1af6686a5822b3c9c3a67547d2421a16003d45a2c0b6f83ca5e
checksum: 10/199576febda2a91fe7676b8708627ed2e38d7e964ec8258331422fe7c7f89003eee2de7dec828e09c046de005742fd476cae6ceebc7bd994744f771253bfcbf3
languageName: node
linkType: hard
@@ -439,10 +439,10 @@ __metadata:
languageName: node
linkType: hard
"@eslint/js@npm:9.39.2":
version: 9.39.2
resolution: "@eslint/js@npm:9.39.2"
checksum: 10/6b7f676746f3111b5d1b23715319212ab9297868a0fa9980d483c3da8965d5841673aada2d5653e85a3f7156edee0893a7ae7035211b4efdcb2848154bb947f2
"@eslint/js@npm:9.39.3":
version: 9.39.3
resolution: "@eslint/js@npm:9.39.3"
checksum: 10/91a1a1822cfeb2eb8a89aae86be5dfabad0b66b0915946516690a8485ddd80b91f43eee346789313fea1acbb7390a4958119ca7dc9a684a5c4014f12fcb3aaf3
languageName: node
linkType: hard
@@ -1176,11 +1176,11 @@ __metadata:
linkType: hard
"@remixicon/react@npm:^4.6.0":
version: 4.8.0
resolution: "@remixicon/react@npm:4.8.0"
version: 4.9.0
resolution: "@remixicon/react@npm:4.9.0"
peerDependencies:
react: ">=18.2.0"
checksum: 10/10241f2e07826ce7d595cf9687a35c96cc9cf9eb68a9431d7dfa1b9df479dbef302874d28c0502cee2a536cf34722de7c49ed12d10a2b071e4e42ba4a278c516
checksum: 10/3d8f1d86b2bb20ab5e44d15f18811e928b0886f7710eb7a1516afb9913ba72e46facec5dfee382825139d800bcbb6704c15d0c760d0f977c12257d4af8db3295
languageName: node
linkType: hard
@@ -1558,8 +1558,8 @@ __metadata:
linkType: hard
"@uiw/codemirror-themes@npm:^4.23.7":
version: 4.25.4
resolution: "@uiw/codemirror-themes@npm:4.25.4"
version: 4.25.7
resolution: "@uiw/codemirror-themes@npm:4.25.7"
dependencies:
"@codemirror/language": "npm:^6.0.0"
"@codemirror/state": "npm:^6.0.0"
@@ -1568,7 +1568,7 @@ __metadata:
"@codemirror/language": ">=6.0.0"
"@codemirror/state": ">=6.0.0"
"@codemirror/view": ">=6.0.0"
checksum: 10/aab62e2c16a10dbde4592cef704d386c1a9e3caece4ff0eed85e9d9a5acdeaf3fd8717e2cb6a6795e12e890b8600956effb52d453aacbc618934e7ae8c3e59e3
checksum: 10/6910a41090611b608dfd16eaf82c8e9e9edbab528fe06edfff5947050de6d1363749099a7462ecd3a6544c093feb8d8f1e2c1c7b687b889134c0e59966b1ff1f
languageName: node
linkType: hard
@@ -2821,8 +2821,8 @@ __metadata:
linkType: hard
"eslint@npm:^9":
version: 9.39.2
resolution: "eslint@npm:9.39.2"
version: 9.39.3
resolution: "eslint@npm:9.39.3"
dependencies:
"@eslint-community/eslint-utils": "npm:^4.8.0"
"@eslint-community/regexpp": "npm:^4.12.1"
@@ -2830,7 +2830,7 @@ __metadata:
"@eslint/config-helpers": "npm:^0.4.2"
"@eslint/core": "npm:^0.17.0"
"@eslint/eslintrc": "npm:^3.3.1"
"@eslint/js": "npm:9.39.2"
"@eslint/js": "npm:9.39.3"
"@eslint/plugin-kit": "npm:^0.4.1"
"@humanfs/node": "npm:^0.16.6"
"@humanwhocodes/module-importer": "npm:^1.0.1"
@@ -2865,7 +2865,7 @@ __metadata:
optional: true
bin:
eslint: bin/eslint.js
checksum: 10/53ff0e9c8264e7e8d40d50fdc0c0df0b701cfc5289beedfb686c214e3e7b199702f894bbd1bb48653727bb1ecbd1147cf5f555a4ae71e1daf35020cdc9072d9f
checksum: 10/1c95c92983ddf435e7f7d54edd06d703a15773a7d189583d3388e5b5ac714f0a2450b91c0b3bb9b9ccec9bd20994fd8e48d231ed6dabca0be56ef314b32820ff
languageName: node
linkType: hard
@@ -3103,11 +3103,11 @@ __metadata:
languageName: node
linkType: hard
"framer-motion@npm:^12.34.3":
version: 12.34.3
resolution: "framer-motion@npm:12.34.3"
"framer-motion@npm:^12.35.0":
version: 12.35.0
resolution: "framer-motion@npm:12.35.0"
dependencies:
motion-dom: "npm:^12.34.3"
motion-dom: "npm:^12.35.0"
motion-utils: "npm:^12.29.2"
tslib: "npm:^2.4.0"
peerDependencies:
@@ -3121,7 +3121,7 @@ __metadata:
optional: true
react-dom:
optional: true
checksum: 10/4565dc7f35c631c07ade3b77b19c14946ca37cc1125176e4b8c3a6b7d6994207867f9d9befcb2885d5bc8b6b4ea82ff8ee2cfa869f676cc28d18656acb33ff88
checksum: 10/9c2dd8a44efcf15d787ea1d1a24dbb2352b44824c4c33273f176f3feabe602278b9571541c89cc5673b3590b483daf9e0761889412feaafd4feba758cfdc1c96
languageName: node
linkType: hard
@@ -4500,12 +4500,12 @@ __metadata:
languageName: node
linkType: hard
"motion-dom@npm:^12.34.3":
version: 12.34.3
resolution: "motion-dom@npm:12.34.3"
"motion-dom@npm:^12.35.0":
version: 12.35.0
resolution: "motion-dom@npm:12.35.0"
dependencies:
motion-utils: "npm:^12.29.2"
checksum: 10/17abb91f87020f00470f886cced6c6ebd58b9d5848c9bb12eb38f029dc7077344cf6ac2ccbe0adf1a8996191c17a98abfe91eaa99a1723909d7dd25a4f2b1101
checksum: 10/1a50cd2600d04dc8243c193af45b067aa65d853213f14aea15858a94fd3e901511ff258a91b4dffc1585eb43b61706a6f73fb98fb39dedd87e4b58a48ed8f593
languageName: node
linkType: hard
@@ -4517,10 +4517,10 @@ __metadata:
linkType: hard
"motion@npm:^12.4.1":
version: 12.34.3
resolution: "motion@npm:12.34.3"
version: 12.35.0
resolution: "motion@npm:12.35.0"
dependencies:
framer-motion: "npm:^12.34.3"
framer-motion: "npm:^12.35.0"
tslib: "npm:^2.4.0"
peerDependencies:
"@emotion/is-prop-valid": "*"
@@ -4533,7 +4533,7 @@ __metadata:
optional: true
react-dom:
optional: true
checksum: 10/1465fdee135e792f753a8ac5eb3ebdfb547165686f7a896ba947ecf2d02443f11ced9b3933aec773d4531758a9159dd24e48bd2e02c0d94754649645eac5121c
checksum: 10/ef7f4df7337147a0012ba2bfe3fd1f23d76081b4094ab94a7bc9f3f8338074e7a290873a9ea94427aea1aa9c63021804972f62d6c4289e011ddf5ef59865fa01
languageName: node
linkType: hard