diff --git a/.changeset/honest-hands-spend.md b/.changeset/honest-hands-spend.md new file mode 100644 index 0000000000..5eaae86dcf --- /dev/null +++ b/.changeset/honest-hands-spend.md @@ -0,0 +1,5 @@ +--- +'@backstage/ui': minor +--- + +Canon has been renamed to Backstage UI. This means that `@backstage/canon` has been deprecated and replaced by `@backstage/ui`. diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 2685926549..519204ff24 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -40,6 +40,7 @@ yarn.lock @backstage/maintainers @backst /packages/repo-tools @backstage/tooling-maintainers /packages/techdocs-cli @backstage/techdocs-maintainers /packages/techdocs-cli-embedded-app @backstage/techdocs-maintainers +/packages/ui @backstage/design-system-maintainers /packages/yarn-plugin @backstage/tooling-maintainers /plugins/app @backstage/framework-maintainers /plugins/app-* @backstage/framework-maintainers diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 12044fd530..bdf6edbbac 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -131,6 +131,10 @@ jobs: - name: build canon run: yarn --cwd packages/canon build + # For now BUI has a custom build script and needs to be built separately + - name: build BUI + run: yarn --cwd packages/ui build + - name: verify type dependencies run: yarn lint:type-deps diff --git a/.github/workflows/deploy_packages.yml b/.github/workflows/deploy_packages.yml index 57bcb5cd18..3f24fcc783 100644 --- a/.github/workflows/deploy_packages.yml +++ b/.github/workflows/deploy_packages.yml @@ -114,6 +114,10 @@ jobs: - name: build canon run: yarn --cwd packages/canon build + # For now BUI has a custom build script and needs to be built separately + - name: build BUI + run: yarn --cwd packages/ui build + - name: verify type dependencies run: yarn lint:type-deps diff --git a/.github/workflows/verify_storybook.yml b/.github/workflows/verify_storybook.yml index 06e5a921f2..013b1cf069 100644 --- a/.github/workflows/verify_storybook.yml +++ b/.github/workflows/verify_storybook.yml @@ -49,10 +49,10 @@ jobs: run: yarn install --immutable working-directory: storybook - # Only for verification, the canon one is what we upload to Chromatic + # Only for verification, the BUI one is what we upload to Chromatic - run: yarn build-storybook - - run: yarn --cwd packages/canon build-storybook + - run: yarn --cwd packages/ui build-storybook - uses: chromaui/action@1cfa065cbdab28f6ca3afaeb3d761383076a35aa # v11 with: @@ -60,5 +60,5 @@ jobs: # projectToken intentionally shared to allow collaborators to run Chromatic on forks # https://www.chromatic.com/docs/custom-ci-provider#run-chromatic-on-external-forks-of-open-source-projects projectToken: chpt_dab72dc0f97d55b - workingDir: packages/canon + workingDir: packages/ui storybookBuildDir: storybook-static diff --git a/.prettierignore b/.prettierignore index 04ca7d780d..2f10d19638 100644 --- a/.prettierignore +++ b/.prettierignore @@ -4,7 +4,7 @@ microsite canon-docs/.next canon-docs/public canon-docs/out -packages/canon/css +packages/ui/css coverage *.hbs templates diff --git a/packages/app-next/package.json b/packages/app-next/package.json index 7dd5321b02..fdf21ff5a7 100644 --- a/packages/app-next/package.json +++ b/packages/app-next/package.json @@ -35,7 +35,6 @@ }, "dependencies": { "@backstage/app-defaults": "workspace:^", - "@backstage/canon": "workspace:^", "@backstage/catalog-model": "workspace:^", "@backstage/cli": "workspace:^", "@backstage/config": "workspace:^", @@ -74,6 +73,7 @@ "@backstage/plugin-techdocs-react": "workspace:^", "@backstage/plugin-user-settings": "workspace:^", "@backstage/theme": "workspace:^", + "@backstage/ui": "workspace:^", "@material-ui/core": "^4.12.2", "@material-ui/icons": "^4.9.1", "@material-ui/lab": "4.0.0-alpha.61", diff --git a/packages/app-next/src/index-public-experimental.tsx b/packages/app-next/src/index-public-experimental.tsx index 24c4a9d66a..34198f9553 100644 --- a/packages/app-next/src/index-public-experimental.tsx +++ b/packages/app-next/src/index-public-experimental.tsx @@ -16,7 +16,7 @@ import ReactDOM from 'react-dom/client'; import { createPublicSignInApp } from '@backstage/frontend-defaults'; -import '@backstage/canon/css/styles.css'; +import '@backstage/ui/css/styles.css'; const app = createPublicSignInApp(); diff --git a/packages/app-next/src/index.tsx b/packages/app-next/src/index.tsx index 82b9595c84..fd86261385 100644 --- a/packages/app-next/src/index.tsx +++ b/packages/app-next/src/index.tsx @@ -17,6 +17,6 @@ import '@backstage/cli/asset-types'; import ReactDOM from 'react-dom/client'; import app from './App'; -import '@backstage/canon/css/styles.css'; +import '@backstage/ui/css/styles.css'; ReactDOM.createRoot(document.getElementById('root')!).render(app); diff --git a/packages/app/package.json b/packages/app/package.json index b59de2e558..5567856a40 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -36,7 +36,6 @@ }, "dependencies": { "@backstage/app-defaults": "workspace:^", - "@backstage/canon": "workspace:^", "@backstage/catalog-model": "workspace:^", "@backstage/cli": "workspace:^", "@backstage/config": "workspace:^", @@ -71,6 +70,7 @@ "@backstage/plugin-techdocs-react": "workspace:^", "@backstage/plugin-user-settings": "workspace:^", "@backstage/theme": "workspace:^", + "@backstage/ui": "workspace:^", "@material-ui/core": "^4.12.2", "@material-ui/icons": "^4.9.1", "@material-ui/lab": "4.0.0-alpha.61", diff --git a/packages/app/src/index-public-experimental.tsx b/packages/app/src/index-public-experimental.tsx index fb79eb921a..972c1fd55c 100644 --- a/packages/app/src/index-public-experimental.tsx +++ b/packages/app/src/index-public-experimental.tsx @@ -30,7 +30,7 @@ import { discoveryApiRef, } from '@backstage/core-plugin-api'; import { AuthProxyDiscoveryApi } from '../src/AuthProxyDiscoveryApi'; -import '@backstage/canon/css/styles.css'; +import '@backstage/ui/css/styles.css'; const app = createApp({ apis: [ diff --git a/packages/app/src/index.tsx b/packages/app/src/index.tsx index cb6eeb3185..05dcc024bf 100644 --- a/packages/app/src/index.tsx +++ b/packages/app/src/index.tsx @@ -17,6 +17,6 @@ import '@backstage/cli/asset-types'; import ReactDOM from 'react-dom/client'; import App from './App'; -import '@backstage/canon/css/styles.css'; +import '@backstage/ui/css/styles.css'; ReactDOM.createRoot(document.getElementById('root')!).render(); diff --git a/packages/canon/.gitignore b/packages/canon/.gitignore index 86fa479d2f..dac138d9e0 100644 --- a/packages/canon/.gitignore +++ b/packages/canon/.gitignore @@ -1,2 +1 @@ -# Build output -storybook-static +css diff --git a/packages/canon/README.md b/packages/canon/README.md index 0783d01736..6dbde1729e 100644 --- a/packages/canon/README.md +++ b/packages/canon/README.md @@ -1,18 +1,3 @@ # @backstage/canon -Canon is a UI component library for Backstage. - -## Installation - -Install the package via Yarn: - -```sh -cd # if within a monorepo -yarn add @backstage/canon -``` - -## Documentation - -- [Canon Documentation](https://canon.backstage.io) -- [Backstage Readme](https://github.com/backstage/backstage/blob/master/README.md) -- [Backstage Documentation](https://backstage.io/docs) +Canon has been renamed to Backstage UI, replace usage of this package with `@backstage/ui`. This replacement is done automatically if you use the `versions:bump` command from the `@backstage/cli`. diff --git a/packages/canon/package.json b/packages/canon/package.json index ccc23c55ed..9b60abe112 100644 --- a/packages/canon/package.json +++ b/packages/canon/package.json @@ -2,7 +2,8 @@ "name": "@backstage/canon", "version": "0.6.0-next.1", "backstage": { - "role": "web-library" + "role": "web-library", + "moved": "@backstage/ui" }, "publishConfig": { "access": "public", @@ -27,59 +28,16 @@ "css" ], "scripts": { - "build": "yarn build:app && yarn build:css", - "build-storybook": "storybook build", - "build:app": "backstage-cli package build", - "build:css": "node scripts/build-css.mjs", - "build:css:watch": "node scripts/build-css.mjs --watch", + "build": "backstage-cli package build && mkdir -p css && cp -r ../ui/css/styles.css css/styles.css", "clean": "backstage-cli package clean", - "lint": "backstage-cli package lint", "prepack": "backstage-cli package prepack", - "postpack": "backstage-cli package postpack", - "start": "concurrently \"yarn build:css:watch\" \"yarn storybook\"", - "storybook": "storybook dev -p 6006", - "test": "backstage-cli package test" + "postpack": "backstage-cli package postpack" }, "dependencies": { - "@base-ui-components/react": "1.0.0-alpha.7", - "@remixicon/react": "^4.6.0", - "@tanstack/react-table": "^8.21.3", - "clsx": "^2.1.1", - "motion": "^12.20.1", - "react-aria-components": "^1.10.1" + "@backstage/ui": "workspace:^" }, "devDependencies": { - "@backstage/cli": "workspace:^", - "@storybook/addon-essentials": "^8.6.12", - "@storybook/addon-interactions": "^8.6.12", - "@storybook/addon-styling-webpack": "^1.0.1", - "@storybook/addon-webpack5-compiler-swc": "^3.0.0", - "@storybook/blocks": "^8.6.12", - "@storybook/react": "^8.6.12", - "@storybook/react-webpack5": "^8.6.12", - "@storybook/test": "^8.6.12", - "@types/react": "^18.0.0", - "@types/react-dom": "^18.0.0", - "chalk": "^5.4.1", - "eslint-plugin-storybook": "^0.12.0", - "glob": "^11.0.1", - "globals": "^15.11.0", - "lightningcss": "^1.29.1", - "mini-css-extract-plugin": "^2.9.2", - "react": "^18.0.2", - "react-dom": "^18.0.2", - "react-router-dom": "^6.3.0", - "storybook": "^8.6.12" + "@backstage/cli": "workspace:^" }, - "peerDependencies": { - "@types/react": "^17.0.0 || ^18.0.0", - "react": "^17.0.0 || ^18.0.0", - "react-dom": "^17.0.0 || ^18.0.0", - "react-router-dom": "^6.3.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } + "deprecated": "This package has been deprecated. Please use @backstage/ui instead." } diff --git a/packages/canon/report.api.md b/packages/canon/report.api.md index d98c52fefd..f8a3aaeb88 100644 --- a/packages/canon/report.api.md +++ b/packages/canon/report.api.md @@ -3,1866 +3,5 @@ > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). ```ts -import { Avatar as Avatar_2 } from '@base-ui-components/react/avatar'; -import { ButtonProps as ButtonProps_2 } from 'react-aria-components'; -import { Collapsible as Collapsible_2 } from '@base-ui-components/react/collapsible'; -import { ComponentProps } from 'react'; -import type { ComponentPropsWithRef } from 'react'; -import { Context } from 'react'; -import type { ElementType } from 'react'; -import { ForwardRefExoticComponent } from 'react'; -import { HTMLAttributes } from 'react'; -import { JSX as JSX_2 } from 'react/jsx-runtime'; -import { LinkProps as LinkProps_2 } from 'react-aria-components'; -import { Menu as Menu_2 } from '@base-ui-components/react/menu'; -import type { RadioGroupProps as RadioGroupProps_2 } from 'react-aria-components'; -import type { RadioProps as RadioProps_2 } from 'react-aria-components'; -import { ReactElement } from 'react'; -import { ReactNode } from 'react'; -import { RefAttributes } from 'react'; -import type { RemixiconComponentType } from '@remixicon/react'; -import { ScrollArea as ScrollArea_2 } from '@base-ui-components/react/scroll-area'; -import type { SearchFieldProps as SearchFieldProps_2 } from 'react-aria-components'; -import type { SelectProps as SelectProps_2 } from 'react-aria-components'; -import type { SwitchProps as SwitchProps_2 } from 'react-aria-components'; -import { Table as Table_2 } from '@tanstack/react-table'; -import type { TabListProps as TabListProps_2 } from 'react-aria-components'; -import type { TabPanelProps as TabPanelProps_2 } from 'react-aria-components'; -import { TabProps } from 'react-aria-components'; -import type { TabsProps as TabsProps_2 } from 'react-aria-components'; -import { TdHTMLAttributes } from 'react'; -import type { TextFieldProps as TextFieldProps_2 } from 'react-aria-components'; -import { ThHTMLAttributes } from 'react'; -import { TooltipProps as TooltipProps_2 } from 'react-aria-components'; -import { TooltipTriggerComponentProps } from 'react-aria-components'; -import type { useRender } from '@base-ui-components/react/use-render'; - -// @public (undocumented) -export type AlignItems = 'stretch' | 'start' | 'center' | 'end'; - -// @public (undocumented) -export type ArbitraryStylingPropDef = { - className: string; - customProperties: `--${string}`[]; - parseValue?: (value: string) => string | undefined; -}; - -// @public (undocumented) -export type AsProps = - | 'div' - | 'span' - | 'p' - | 'article' - | 'section' - | 'main' - | 'nav' - | 'aside' - | 'ul' - | 'ol' - | 'li' - | 'details' - | 'summary' - | 'dd' - | 'dl' - | 'dt'; - -// @public (undocumented) -export const Avatar: ForwardRefExoticComponent< - AvatarProps & RefAttributes ->; - -// @public (undocumented) -export interface AvatarProps - extends React.ComponentPropsWithoutRef { - // (undocumented) - name: string; - // (undocumented) - size?: 'small' | 'medium' | 'large'; - // (undocumented) - src: string; -} - -// @public (undocumented) -export type BooleanPropDef = { - type: 'boolean'; - default?: boolean; - required?: boolean; - className?: string; -}; - -// @public (undocumented) -export type Border = 'none' | 'base' | 'error' | 'warning' | 'selected'; - -// @public (undocumented) -export type BorderRadius = - | 'none' - | '2xs' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | '2xl'; - -// @public (undocumented) -export const Box: ForwardRefExoticComponent< - BoxProps & RefAttributes ->; - -// @public (undocumented) -export type BoxOwnProps = GetPropDefTypes; - -// @public (undocumented) -export const boxPropDefs: { - as: { - type: 'enum'; - values: readonly ['div', 'span']; - default: 'div'; - }; -}; - -// @public (undocumented) -export interface BoxProps extends SpaceProps { - // (undocumented) - as?: BoxOwnProps['as']; - // (undocumented) - children?: React.ReactNode; - // (undocumented) - className?: string; - // (undocumented) - display?: DisplayProps['display']; - // (undocumented) - height?: HeightProps['height']; - // (undocumented) - maxHeight?: HeightProps['maxHeight']; - // (undocumented) - maxWidth?: WidthProps['maxWidth']; - // (undocumented) - minHeight?: HeightProps['minHeight']; - // (undocumented) - minWidth?: WidthProps['minWidth']; - // (undocumented) - position?: PositionProps['position']; - // (undocumented) - style?: React.CSSProperties; - // (undocumented) - width?: WidthProps['width']; -} - -// @public (undocumented) -export type Breakpoint = 'initial' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'; - -// @public (undocumented) -export const breakpoints: Breakpoint[]; - -// @public (undocumented) -export const Button: ForwardRefExoticComponent< - ButtonProps & RefAttributes ->; - -// @public (undocumented) -export const ButtonIcon: ForwardRefExoticComponent< - ButtonIconProps & RefAttributes ->; - -// @public -export interface ButtonIconProps extends ButtonProps_2 { - // (undocumented) - icon?: ReactElement; - // (undocumented) - size?: 'small' | 'medium' | Partial>; - // (undocumented) - variant?: - | 'primary' - | 'secondary' - | 'tertiary' - | Partial>; -} - -// @public (undocumented) -export const ButtonLink: ForwardRefExoticComponent< - ButtonLinkProps & RefAttributes ->; - -// @public -export interface ButtonLinkProps extends LinkProps_2 { - // (undocumented) - children?: ReactNode; - // (undocumented) - iconEnd?: ReactElement; - // (undocumented) - iconStart?: ReactElement; - // (undocumented) - size?: 'small' | 'medium' | Partial>; - // (undocumented) - variant?: - | 'primary' - | 'secondary' - | 'tertiary' - | Partial>; -} - -// @public -export interface ButtonProps extends ButtonProps_2 { - // (undocumented) - children?: ReactNode; - // (undocumented) - iconEnd?: ReactElement; - // (undocumented) - iconStart?: ReactElement; - // (undocumented) - size?: 'small' | 'medium' | Partial>; - // (undocumented) - variant?: - | 'primary' - | 'secondary' - | 'tertiary' - | Partial>; -} - -// @public -export const Card: ForwardRefExoticComponent< - CardProps & RefAttributes ->; - -// @public -export interface CardBodyProps extends React.HTMLAttributes { - // (undocumented) - children?: React.ReactNode; -} - -// @public -export interface CardFooterProps extends React.HTMLAttributes { - // (undocumented) - children?: React.ReactNode; -} - -// @public -export interface CardHeaderProps extends React.HTMLAttributes { - // (undocumented) - children?: React.ReactNode; -} - -// @public -export interface CardProps extends React.HTMLAttributes { - // (undocumented) - children?: React.ReactNode; -} - -// @public (undocumented) -export const Checkbox: ForwardRefExoticComponent< - CheckboxProps & RefAttributes ->; - -// @public (undocumented) -export interface CheckboxProps { - // (undocumented) - checked?: boolean; - // (undocumented) - className?: string; - // (undocumented) - defaultChecked?: boolean; - // (undocumented) - disabled?: boolean; - // (undocumented) - label?: string; - // (undocumented) - name?: string; - // (undocumented) - onChange?: (checked: boolean) => void; - // (undocumented) - required?: boolean; - // (undocumented) - style?: React.CSSProperties; - // (undocumented) - value?: string; -} - -// @public -export type ClassNamesMap = Record; - -// @public -export const Collapsible: { - Root: ForwardRefExoticComponent< - Omit, 'ref'> & - RefAttributes - >; - Trigger: ForwardRefExoticComponent< - Omit< - Collapsible_2.Trigger.Props & RefAttributes, - 'ref' - > & - RefAttributes - >; - Panel: ForwardRefExoticComponent< - Omit, 'ref'> & - RefAttributes - >; -}; - -// @public (undocumented) -export type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'auto'; - -// @public -export type ComponentClassNames = - (typeof componentDefinitions)[T]['classNames']; - -// @public -export interface ComponentDefinition { - // (undocumented) - classNames: ClassNamesMap; - // (undocumented) - dataAttributes?: DataAttributesMap; -} - -// @public -export type ComponentDefinitionName = keyof typeof componentDefinitions; - -// @public -export const componentDefinitions: { - readonly Avatar: { - readonly classNames: { - readonly root: 'bui-AvatarRoot'; - readonly image: 'bui-AvatarImage'; - readonly fallback: 'bui-AvatarFallback'; - }; - readonly dataAttributes: { - readonly size: readonly ['small', 'medium', 'large']; - }; - }; - readonly Box: { - readonly classNames: { - readonly root: 'bui-Box'; - }; - }; - readonly Button: { - readonly classNames: { - readonly root: 'bui-Button'; - }; - readonly dataAttributes: { - readonly size: readonly ['small', 'medium', 'large']; - readonly variant: readonly ['primary', 'secondary', 'ghost']; - }; - }; - readonly ButtonIcon: { - readonly classNames: { - readonly root: 'bui-ButtonIcon'; - }; - }; - readonly ButtonLink: { - readonly classNames: { - readonly root: 'bui-ButtonLink'; - }; - }; - readonly Card: { - readonly classNames: { - readonly root: 'bui-Card'; - readonly header: 'bui-CardHeader'; - readonly body: 'bui-CardBody'; - readonly footer: 'bui-CardFooter'; - }; - }; - readonly Checkbox: { - readonly classNames: { - readonly root: 'bui-CheckboxRoot'; - readonly label: 'bui-CheckboxLabel'; - readonly indicator: 'bui-CheckboxIndicator'; - }; - readonly dataAttributes: { - readonly checked: readonly [true, false]; - }; - }; - readonly Collapsible: { - readonly classNames: { - readonly root: 'bui-CollapsibleRoot'; - readonly trigger: 'bui-CollapsibleTrigger'; - readonly panel: 'bui-CollapsiblePanel'; - }; - }; - readonly Container: { - readonly classNames: { - readonly root: 'bui-Container'; - }; - }; - readonly FieldLabel: { - readonly classNames: { - readonly root: 'bui-FieldLabelWrapper'; - readonly label: 'bui-FieldLabel'; - readonly secondaryLabel: 'bui-FieldSecondaryLabel'; - readonly description: 'bui-FieldDescription'; - }; - }; - readonly Flex: { - readonly classNames: { - readonly root: 'bui-Flex'; - }; - }; - readonly Grid: { - readonly classNames: { - readonly root: 'bui-Grid'; - readonly item: 'bui-GridItem'; - }; - }; - readonly Header: { - readonly classNames: { - readonly toolbar: 'bui-HeaderToolbar'; - readonly toolbarWrapper: 'bui-HeaderToolbarWrapper'; - readonly toolbarContent: 'bui-HeaderToolbarContent'; - readonly toolbarControls: 'bui-HeaderToolbarControls'; - readonly toolbarIcon: 'bui-HeaderToolbarIcon'; - readonly toolbarName: 'bui-HeaderToolbarName'; - readonly breadcrumbs: 'bui-HeaderBreadcrumbs'; - readonly breadcrumb: 'bui-HeaderBreadcrumb'; - readonly breadcrumbLink: 'bui-HeaderBreadcrumbLink'; - readonly breadcrumbSeparator: 'bui-HeaderBreadcrumbSeparator'; - readonly tabsWrapper: 'bui-HeaderTabsWrapper'; - }; - }; - readonly HeaderPage: { - readonly classNames: { - readonly root: 'bui-HeaderPage'; - readonly content: 'bui-HeaderPageContent'; - readonly tabsWrapper: 'bui-HeaderPageTabsWrapper'; - readonly controls: 'bui-HeaderPageControls'; - }; - }; - readonly Heading: { - readonly classNames: { - readonly root: 'bui-Heading'; - }; - readonly dataAttributes: { - readonly variant: readonly ['title1', 'title2', 'title3', 'subtitle']; - readonly color: readonly ['primary', 'secondary', 'muted']; - readonly truncate: readonly [true, false]; - }; - }; - readonly Icon: { - readonly classNames: { - readonly root: 'bui-Icon'; - }; - }; - readonly Link: { - readonly classNames: { - readonly root: 'bui-Link'; - }; - readonly dataAttributes: { - readonly variant: readonly ['subtitle', 'body', 'caption', 'label']; - readonly weight: readonly ['regular', 'bold']; - }; - }; - readonly List: { - readonly classNames: { - readonly root: 'bui-List'; - readonly row: 'bui-ListRow'; - readonly label: 'bui-ListLabel'; - }; - }; - readonly Menu: { - readonly classNames: { - readonly trigger: 'bui-MenuTrigger'; - readonly backdrop: 'bui-MenuBackdrop'; - readonly positioner: 'bui-MenuPositioner'; - readonly popup: 'bui-MenuPopup'; - readonly arrow: 'bui-MenuArrow'; - readonly item: 'bui-MenuItem'; - readonly group: 'bui-MenuGroup'; - readonly groupLabel: 'bui-MenuGroupLabel'; - readonly radioGroup: 'bui-MenuRadioGroup'; - readonly radioItem: 'bui-MenuRadioItem'; - readonly radioItemIndicator: 'bui-MenuRadioItemIndicator'; - readonly checkboxItem: 'bui-MenuCheckboxItem'; - readonly checkboxItemIndicator: 'bui-MenuCheckboxItemIndicator'; - readonly submenuTrigger: 'bui-MenuSubmenuTrigger'; - readonly separator: 'bui-MenuSeparator'; - }; - }; - readonly Popover: { - readonly classNames: { - readonly root: 'bui-Popover'; - }; - }; - readonly RadioGroup: { - readonly classNames: { - readonly root: 'bui-RadioGroup'; - readonly content: 'bui-RadioGroupContent'; - readonly radio: 'bui-Radio'; - }; - }; - readonly ScrollArea: { - readonly classNames: { - readonly root: 'bui-ScrollAreaRoot'; - readonly viewport: 'bui-ScrollAreaViewport'; - readonly scrollbar: 'bui-ScrollAreaScrollbar'; - readonly thumb: 'bui-ScrollAreaThumb'; - }; - }; - readonly SearchField: { - readonly classNames: { - readonly root: 'bui-SearchField'; - readonly clear: 'bui-InputClear'; - }; - }; - readonly Select: { - readonly classNames: { - readonly root: 'bui-Select'; - readonly trigger: 'bui-SelectTrigger'; - readonly value: 'bui-SelectValue'; - readonly icon: 'bui-SelectIcon'; - readonly list: 'bui-SelectList'; - readonly item: 'bui-SelectItem'; - readonly itemIndicator: 'bui-SelectItemIndicator'; - readonly itemLabel: 'bui-SelectItemLabel'; - }; - readonly dataAttributes: { - readonly size: readonly ['small', 'medium']; - }; - }; - readonly Skeleton: { - readonly classNames: { - readonly root: 'bui-Skeleton'; - }; - }; - readonly Switch: { - readonly classNames: { - readonly root: 'bui-Switch'; - readonly indicator: 'bui-SwitchIndicator'; - }; - }; - readonly Table: { - readonly classNames: { - readonly root: 'bui-TableRoot'; - readonly header: 'bui-TableHeader'; - readonly body: 'bui-TableBody'; - readonly row: 'bui-TableRow'; - readonly head: 'bui-TableHead'; - readonly caption: 'bui-TableCaption'; - readonly cell: 'bui-TableCell'; - readonly cellText: 'bui-TableCellText'; - readonly cellLink: 'bui-TableCellLink'; - readonly cellProfile: 'bui-TableCellProfile'; - readonly cellProfileAvatar: 'bui-TableCellProfileAvatar'; - readonly cellProfileAvatarImage: 'bui-TableCellProfileAvatarImage'; - readonly cellProfileAvatarFallback: 'bui-TableCellProfileAvatarFallback'; - readonly cellProfileName: 'bui-TableCellProfileName'; - readonly cellProfileLink: 'bui-TableCellProfileLink'; - }; - }; - readonly Tabs: { - readonly classNames: { - readonly tabs: 'bui-Tabs'; - readonly tabList: 'bui-TabList'; - readonly tabListWrapper: 'bui-TabListWrapper'; - readonly tab: 'bui-Tab'; - readonly tabActive: 'bui-TabActive'; - readonly tabHovered: 'bui-TabHovered'; - readonly panel: 'bui-TabPanel'; - }; - }; - readonly Text: { - readonly classNames: { - readonly root: 'bui-Text'; - }; - readonly dataAttributes: { - readonly variant: readonly ['subtitle', 'body', 'caption', 'label']; - readonly weight: readonly ['regular', 'bold']; - readonly color: readonly [ - 'primary', - 'secondary', - 'danger', - 'warning', - 'success', - ]; - readonly truncate: readonly [true, false]; - }; - }; - readonly TextField: { - readonly classNames: { - readonly root: 'bui-TextField'; - readonly inputWrapper: 'bui-InputWrapper'; - readonly input: 'bui-Input'; - readonly inputIcon: 'bui-InputIcon'; - }; - readonly dataAttributes: { - readonly invalid: readonly [true, false]; - readonly disabled: readonly [true, false]; - }; - }; - readonly Tooltip: { - readonly classNames: { - readonly tooltip: 'bui-Tooltip'; - readonly arrow: 'bui-TooltipArrow'; - }; - }; -}; - -// @public (undocumented) -export const Container: ForwardRefExoticComponent< - ContainerProps & RefAttributes ->; - -// @public (undocumented) -export interface ContainerProps { - // (undocumented) - children?: React.ReactNode; - // (undocumented) - className?: string; - // (undocumented) - mb?: SpaceProps['mb']; - // (undocumented) - mt?: SpaceProps['mt']; - // (undocumented) - my?: SpaceProps['my']; - // (undocumented) - pb?: SpaceProps['pb']; - // (undocumented) - pt?: SpaceProps['pt']; - // (undocumented) - py?: SpaceProps['py']; - // (undocumented) - style?: React.CSSProperties; -} - -// @public -export type DataAttributesMap = Record; - -// @public -export type DataAttributeValues = readonly (string | number | boolean)[]; - -// @public -export const DataTable: { - Root: ( - props: { - table: Table_2; - } & React.HTMLAttributes, - ) => JSX.Element; - Pagination: ForwardRefExoticComponent< - DataTablePaginationProps & RefAttributes - >; - Table: ForwardRefExoticComponent< - DataTableTableProps & RefAttributes - >; - TableRoot: ForwardRefExoticComponent< - Omit< - HTMLAttributes & RefAttributes, - 'ref' - > & - RefAttributes - >; - TableHeader: ForwardRefExoticComponent< - HTMLAttributes & - RefAttributes - >; - TableBody: ForwardRefExoticComponent< - HTMLAttributes & - RefAttributes - >; - TableRow: ForwardRefExoticComponent< - HTMLAttributes & RefAttributes - >; - TableCell: ForwardRefExoticComponent< - TdHTMLAttributes & RefAttributes - >; - TableCellText: ForwardRefExoticComponent< - TableCellTextProps & RefAttributes - >; - TableCellLink: ForwardRefExoticComponent< - TableCellLinkProps & RefAttributes - >; - TableCellProfile: ForwardRefExoticComponent< - TableCellProfileProps & RefAttributes - >; - TableHead: ForwardRefExoticComponent< - ThHTMLAttributes & RefAttributes - >; -}; - -// @public (undocumented) -export interface DataTablePaginationProps - extends React.HTMLAttributes {} - -// @public (undocumented) -export interface DataTableRootProps - extends React.HTMLAttributes { - table: Table_2; -} - -// @public (undocumented) -export interface DataTableTableProps - extends React.HTMLAttributes {} - -// @public (undocumented) -export type Display = 'none' | 'flex' | 'block' | 'inline'; - -// @public (undocumented) -export const displayPropDefs: { - display: { - type: 'enum'; - className: string; - values: readonly ['none', 'inline', 'inline-block', 'block']; - responsive: true; - }; -}; - -// @public (undocumented) -export type DisplayProps = GetPropDefTypes; - -// @public (undocumented) -export type EnumOrStringPropDef = { - type: 'enum | string'; - values: readonly T[]; - default?: T | string; - required?: boolean; -}; - -// @public (undocumented) -export type EnumPropDef = { - type: 'enum'; - values: readonly T[]; - default?: T; - required?: boolean; -}; - -// @public (undocumented) -export const FieldLabel: ForwardRefExoticComponent< - FieldLabelProps & RefAttributes ->; - -// @public (undocumented) -export interface FieldLabelProps { - description?: string | null; - htmlFor?: string; - id?: string; - label?: string | null; - secondaryLabel?: string | null; -} - -// @public (undocumented) -export const Flex: ForwardRefExoticComponent< - FlexProps & RefAttributes ->; - -// @public (undocumented) -export type FlexDirection = 'row' | 'column'; - -// @public (undocumented) -export type FlexOwnProps = GetPropDefTypes; - -// @public (undocumented) -export const flexPropDefs: { - align: { - type: 'enum'; - className: string; - values: readonly ['start', 'center', 'end', 'baseline', 'stretch']; - responsive: true; - }; - direction: { - type: 'enum'; - className: string; - values: readonly ['row', 'column', 'row-reverse', 'column-reverse']; - responsive: true; - }; - justify: { - type: 'enum'; - className: string; - values: readonly ['start', 'center', 'end', 'between']; - responsive: true; - }; -}; - -// @public (undocumented) -export interface FlexProps extends SpaceProps { - // (undocumented) - align?: FlexOwnProps['align']; - // (undocumented) - children: React.ReactNode; - // (undocumented) - className?: string; - // (undocumented) - direction?: FlexOwnProps['direction']; - // (undocumented) - gap?: GapProps['gap']; - // (undocumented) - justify?: FlexOwnProps['justify']; - // (undocumented) - style?: React.CSSProperties; -} - -// @public (undocumented) -export type FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse'; - -// @public (undocumented) -export const gapPropDefs: { - gap: { - type: 'enum | string'; - className: string; - customProperties: '--gap'[]; - values: string[]; - responsive: true; - default: string; - }; -}; - -// @public (undocumented) -export type GapProps = GetPropDefTypes; - -// @public (undocumented) -export type GetPropDefType = Def extends BooleanPropDef - ? Def extends ResponsivePropDef - ? Responsive - : boolean - : Def extends StringPropDef - ? Def extends ResponsivePropDef - ? Responsive - : string - : Def extends ReactNodePropDef - ? Def extends ResponsivePropDef - ? Responsive - : ReactNode - : Def extends EnumOrStringPropDef - ? Def extends ResponsivePropDef - ? Responsive - : string | Type - : Def extends EnumPropDef - ? Def extends ResponsivePropDef - ? Responsive - : Type - : never; - -// @public (undocumented) -export type GetPropDefTypes

= { - [K in keyof P]?: GetPropDefType; -}; - -// @public (undocumented) -export const Grid: { - Root: ForwardRefExoticComponent>; - Item: ForwardRefExoticComponent< - GridItemProps & RefAttributes - >; -}; - -// @public (undocumented) -export type GridItemOwnProps = GetPropDefTypes; - -// @public (undocumented) -export const gridItemPropDefs: { - colSpan: { - type: 'enum | string'; - className: string; - customProperties: '--col-span'[]; - values: readonly [ - '1', - '2', - '3', - '4', - '5', - '6', - '7', - '8', - '9', - '10', - '11', - '12', - 'auto', - ]; - responsive: true; - }; - colEnd: { - type: 'enum | string'; - className: string; - customProperties: '--col-end'[]; - values: readonly [ - '1', - '2', - '3', - '4', - '5', - '6', - '7', - '8', - '9', - '10', - '11', - '12', - 'auto', - ]; - responsive: true; - }; - colStart: { - type: 'enum | string'; - className: string; - customProperties: '--col-start'[]; - values: readonly [ - '1', - '2', - '3', - '4', - '5', - '6', - '7', - '8', - '9', - '10', - '11', - '12', - 'auto', - ]; - responsive: true; - }; - rowSpan: { - type: 'enum | string'; - className: string; - customProperties: '--row-span'[]; - values: readonly [ - '1', - '2', - '3', - '4', - '5', - '6', - '7', - '8', - '9', - '10', - '11', - '12', - 'auto', - ]; - responsive: true; - }; -}; - -// @public (undocumented) -export interface GridItemProps { - // (undocumented) - children?: React.ReactNode; - // (undocumented) - className?: string; - // (undocumented) - colEnd?: GridItemOwnProps['colEnd']; - // (undocumented) - colSpan?: GridItemOwnProps['colSpan']; - // (undocumented) - colStart?: GridItemOwnProps['colStart']; - // (undocumented) - rowSpan?: GridItemOwnProps['rowSpan']; - // (undocumented) - style?: React.CSSProperties; -} - -// @public (undocumented) -export type GridOwnProps = GetPropDefTypes; - -// @public (undocumented) -export const gridPropDefs: { - columns: { - type: 'enum | string'; - className: string; - customProperties: '--columns'[]; - values: readonly [ - '1', - '2', - '3', - '4', - '5', - '6', - '7', - '8', - '9', - '10', - '11', - '12', - 'auto', - ]; - responsive: true; - default: string; - }; -}; - -// @public (undocumented) -export interface GridProps extends SpaceProps { - // (undocumented) - children?: React.ReactNode; - // (undocumented) - className?: string; - // (undocumented) - columns?: GridOwnProps['columns']; - // (undocumented) - gap?: GapProps['gap']; - // (undocumented) - style?: React.CSSProperties; -} - -// @public -export const Header: (props: HeaderProps) => JSX_2.Element; - -// @public -export interface HeaderBreadcrumb { - // (undocumented) - href: string; - // (undocumented) - label: string; -} - -// @public -export interface HeaderMenuItem { - // (undocumented) - label: string; - // (undocumented) - onClick?: () => void; - // (undocumented) - value: string; -} - -// @public -export const HeaderPage: (props: HeaderPageProps) => JSX_2.Element; - -// @public -export interface HeaderPageProps { - // (undocumented) - customActions?: React.ReactNode; - // (undocumented) - menuItems?: HeaderMenuItem[]; - // (undocumented) - tabs?: HeaderTab[]; - // (undocumented) - title?: string; -} - -// @public -export interface HeaderProps { - // (undocumented) - breadcrumbs?: HeaderBreadcrumb[]; - // (undocumented) - customActions?: React.ReactNode; - // (undocumented) - icon?: React.ReactNode; - // (undocumented) - menuItems?: HeaderMenuItem[]; - // (undocumented) - tabs?: HeaderTab[]; - // (undocumented) - title?: string; -} - -// @public -export interface HeaderTab { - // (undocumented) - href?: string; - // (undocumented) - id: string; - // (undocumented) - label: string; -} - -// @public (undocumented) -export const Heading: { - ( - props: HeadingProps & { - ref?: React.ComponentPropsWithRef['ref']; - }, - ): React.ReactElement, T>; - displayName: string; -}; - -// @public (undocumented) -export type HeadingOwnProps = { - as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; - variant?: - | 'display' - | 'title1' - | 'title2' - | 'title3' - | 'title4' - | 'title5' - | Partial< - Record< - Breakpoint, - 'display' | 'title1' | 'title2' | 'title3' | 'title4' | 'title5' - > - >; - color?: - | 'primary' - | 'secondary' - | Partial>; - truncate?: boolean; - className?: string; - style?: React.CSSProperties; -}; - -// @public (undocumented) -export type HeadingProps = HeadingOwnProps & - Omit, keyof HeadingOwnProps>; - -// @public (undocumented) -export const heightPropDefs: { - height: { - type: 'string'; - className: string; - customProperties: '--height'[]; - responsive: true; - }; - minHeight: { - type: 'string'; - className: string; - customProperties: '--min-height'[]; - responsive: true; - }; - maxHeight: { - type: 'string'; - className: string; - customProperties: '--max-height'[]; - responsive: true; - }; -}; - -// @public (undocumented) -export type HeightProps = GetPropDefTypes; - -// @public (undocumented) -export const Icon: (props: IconProps) => JSX_2.Element | null; - -// @public (undocumented) -export const IconContext: Context; - -// @public (undocumented) -export interface IconContextProps { - // (undocumented) - icons: IconMap; -} - -// @public (undocumented) -export type IconMap = Partial>; - -// @public (undocumented) -export type IconNames = - | 'account-circle' - | 'alert' - | 'arrow-down' - | 'arrow-down-circle' - | 'caret-down' - | 'caret-left' - | 'caret-right' - | 'caret-up' - | 'arrow-left' - | 'arrow-left-circle' - | 'arrow-left-down' - | 'arrow-left-up' - | 'arrow-right' - | 'arrow-right-circle' - | 'arrow-right-down' - | 'arrow-right-up' - | 'arrow-up' - | 'arrow-up-circle' - | 'braces' - | 'brackets' - | 'bug' - | 'check' - | 'check-double' - | 'chevron-down' - | 'chevron-left' - | 'chevron-right' - | 'chevron-up' - | 'close' - | 'cloud' - | 'code' - | 'discord' - | 'download' - | 'external-link' - | 'eye' - | 'eye-off' - | 'filter' - | 'flower' - | 'github' - | 'git-repository' - | 'group' - | 'heart' - | 'moon' - | 'plus' - | 'search' - | 'sidebar-fold' - | 'sidebar-unfold' - | 'sparkling' - | 'star' - | 'sun' - | 'terminal' - | 'trash' - | 'upload' - | 'user' - | 'youtube' - | 'zoom-in' - | 'zoom-out'; - -// @public (undocumented) -export type IconProps = { - name: IconNames; - size?: number; - className?: string; - style?: React.CSSProperties; -}; - -// @public (undocumented) -export const IconProvider: (props: IconProviderProps) => JSX_2.Element; - -// @public (undocumented) -export interface IconProviderProps { - // (undocumented) - children?: ReactNode; - // (undocumented) - overrides?: Partial>; -} - -// @public (undocumented) -export const icons: IconMap; - -// @public (undocumented) -export type JustifyContent = - | 'stretch' - | 'start' - | 'center' - | 'end' - | 'around' - | 'between'; - -// @public (undocumented) -export const Link: ForwardRefExoticComponent< - LinkProps & RefAttributes ->; - -// @public (undocumented) -export interface LinkProps extends LinkProps_2 { - // (undocumented) - color?: - | 'primary' - | 'secondary' - | Partial>; - // (undocumented) - variant?: - | 'title-large' - | 'title-medium' - | 'title-small' - | 'title-x-small' - | 'body-large' - | 'body-medium' - | 'body-small' - | 'body-x-small' - | Partial< - Record< - Breakpoint, - | 'title-large' - | 'title-medium' - | 'title-small' - | 'title-x-small' - | 'body-large' - | 'body-medium' - | 'body-small' - | 'body-x-small' - > - >; - // (undocumented) - weight?: 'regular' | 'bold' | Partial>; -} - -// @public (undocumented) -export const marginPropDefs: (spacingValues: string[]) => { - m: { - type: 'enum | string'; - values: string[]; - className: string; - customProperties: '--m'[]; - responsive: true; - }; - mx: { - type: 'enum | string'; - values: string[]; - className: string; - customProperties: '--mx'[]; - responsive: true; - }; - my: { - type: 'enum | string'; - values: string[]; - className: string; - customProperties: '--my'[]; - responsive: true; - }; - mt: { - type: 'enum | string'; - values: string[]; - className: string; - customProperties: '--mt'[]; - responsive: true; - }; - mr: { - type: 'enum | string'; - values: string[]; - className: string; - customProperties: '--mr'[]; - responsive: true; - }; - mb: { - type: 'enum | string'; - values: string[]; - className: string; - customProperties: '--mb'[]; - responsive: true; - }; - ml: { - type: 'enum | string'; - values: string[]; - className: string; - customProperties: '--ml'[]; - responsive: true; - }; -}; - -// @public (undocumented) -export type MarginProps = GetPropDefTypes; - -// @public (undocumented) -export const Menu: MenuComponent; - -// @public (undocumented) -export type MenuComboboxOption = { - label: string; - value: string; - disabled?: boolean; -}; - -// @public (undocumented) -export interface MenuComboboxProps extends ComponentProps<'div'> { - // (undocumented) - closeParentOnEsc?: boolean; - // (undocumented) - multiselect?: boolean; - // (undocumented) - onValueChange?: (value: string[]) => void; - // (undocumented) - options: MenuComboboxOption[]; - // (undocumented) - value?: string[]; -} - -// @public (undocumented) -export type MenuComponent = { - Root: typeof Menu_2.Root; - Trigger: typeof Menu_2.Trigger; - Portal: typeof Menu_2.Portal; - Backdrop: typeof Menu_2.Backdrop; - Positioner: typeof Menu_2.Positioner; - Popup: typeof Menu_2.Popup; - Arrow: typeof Menu_2.Arrow; - Item: typeof Menu_2.Item; - Group: typeof Menu_2.Group; - GroupLabel: typeof Menu_2.GroupLabel; - RadioGroup: typeof Menu_2.RadioGroup; - RadioItem: typeof Menu_2.RadioItem; - RadioItemIndicator: typeof Menu_2.RadioItemIndicator; - CheckboxItem: typeof Menu_2.CheckboxItem; - CheckboxItemIndicator: typeof Menu_2.CheckboxItemIndicator; - SubmenuTrigger: typeof Menu_2.SubmenuTrigger; - Separator: typeof Menu_2.Separator; - Combobox: ForwardRefExoticComponent< - MenuComboboxProps & RefAttributes - >; -}; - -// @public (undocumented) -export type NonStylingPropDef = { - className?: never; - customProperties?: never; - parseValue?: never; -}; - -// @public (undocumented) -export const paddingPropDefs: (spacingValues: string[]) => { - p: { - type: 'enum | string'; - className: string; - customProperties: '--p'[]; - values: string[]; - responsive: true; - }; - px: { - type: 'enum | string'; - className: string; - customProperties: '--px'[]; - values: string[]; - responsive: true; - }; - py: { - type: 'enum | string'; - className: string; - customProperties: '--py'[]; - values: string[]; - responsive: true; - }; - pt: { - type: 'enum | string'; - className: string; - customProperties: '--pt'[]; - values: string[]; - responsive: true; - }; - pr: { - type: 'enum | string'; - className: string; - customProperties: '--pr'[]; - values: string[]; - responsive: true; - }; - pb: { - type: 'enum | string'; - className: string; - customProperties: '--pb'[]; - values: string[]; - responsive: true; - }; - pl: { - type: 'enum | string'; - className: string; - customProperties: '--pl'[]; - values: string[]; - responsive: true; - }; -}; - -// @public (undocumented) -export type PaddingProps = GetPropDefTypes; - -// @public (undocumented) -export const positionPropDefs: { - position: { - type: 'enum'; - className: string; - values: readonly ['static', 'relative', 'absolute', 'fixed', 'sticky']; - responsive: true; - }; -}; - -// @public (undocumented) -export type PositionProps = GetPropDefTypes; - -// @public (undocumented) -export type PropDef = RegularPropDef | ResponsivePropDef; - -// @public (undocumented) -export const Radio: ForwardRefExoticComponent< - RadioProps & RefAttributes ->; - -// @public (undocumented) -export const RadioGroup: ForwardRefExoticComponent< - RadioGroupProps & RefAttributes ->; - -// @public (undocumented) -export interface RadioGroupProps - extends Omit, - Omit { - // (undocumented) - children?: ReactNode; -} - -// @public (undocumented) -export interface RadioProps extends RadioProps_2 {} - -// @public (undocumented) -export type ReactNodePropDef = { - type: 'ReactNode'; - default?: ReactNode; - required?: boolean; -}; - -// @public (undocumented) -export type RegularPropDef = - | ReactNodePropDef - | BooleanPropDef - | (StringPropDef & ArbitraryStylingPropDef) - | (StringPropDef & NonStylingPropDef) - | (EnumPropDef & StylingPropDef) - | (EnumPropDef & NonStylingPropDef) - | (EnumOrStringPropDef & ArbitraryStylingPropDef) - | (EnumOrStringPropDef & NonStylingPropDef); - -// @public (undocumented) -export type Responsive = T | Partial>; - -// @public (undocumented) -export type ResponsivePropDef = RegularPropDef & { - responsive: true; -}; - -// @public (undocumented) -export const ScrollArea: { - Root: ForwardRefExoticComponent< - Omit, 'ref'> & - RefAttributes - >; - Viewport: ForwardRefExoticComponent< - Omit, 'ref'> & - RefAttributes - >; - Scrollbar: ForwardRefExoticComponent< - Omit, 'ref'> & - RefAttributes - >; - Thumb: ForwardRefExoticComponent< - Omit, 'ref'> & - RefAttributes - >; -}; - -// @public (undocumented) -export const SearchField: ForwardRefExoticComponent< - SearchFieldProps & RefAttributes ->; - -// @public (undocumented) -export interface SearchFieldProps - extends SearchFieldProps_2, - Omit { - icon?: ReactNode | false; - placeholder?: string; - size?: 'small' | 'medium' | Partial>; -} - -// @public (undocumented) -export const Select: ForwardRefExoticComponent< - SelectProps & RefAttributes ->; - -// @public (undocumented) -export interface SelectProps - extends SelectProps_2<{ - name: string; - value: string; - }>, - Omit { - icon?: ReactNode; - options?: Array<{ - value: string; - label: string; - disabled?: boolean; - }>; - size?: 'small' | 'medium' | Partial>; -} - -// @public (undocumented) -export const Skeleton: (props: SkeletonProps) => JSX_2.Element; - -// @public (undocumented) -export interface SkeletonProps extends ComponentProps<'div'> { - // (undocumented) - height?: number | string; - // (undocumented) - rounded?: boolean; - // (undocumented) - width?: number | string; -} - -// @public (undocumented) -export type Space = - | '0.5' - | '1' - | '1.5' - | '2' - | '3' - | '4' - | '5' - | '6' - | '7' - | '8' - | '9' - | '10' - | '11' - | '12' - | '13' - | '14' - | string; - -// @public (undocumented) -export interface SpaceProps { - // (undocumented) - m?: Responsive; - // (undocumented) - mb?: Responsive; - // (undocumented) - ml?: Responsive; - // (undocumented) - mr?: Responsive; - // (undocumented) - mt?: Responsive; - // (undocumented) - mx?: Responsive; - // (undocumented) - my?: Responsive; - // (undocumented) - p?: Responsive; - // (undocumented) - pb?: Responsive; - // (undocumented) - pl?: Responsive; - // (undocumented) - pr?: Responsive; - // (undocumented) - pt?: Responsive; - // (undocumented) - px?: Responsive; - // (undocumented) - py?: Responsive; -} - -// @public (undocumented) -export type StringPropDef = { - type: 'string'; - default?: string; - required?: boolean; -}; - -// @public (undocumented) -export type StylingPropDef = { - className: string; - parseValue?: (value: string) => string | undefined; -}; - -// @public (undocumented) -export const Switch: ForwardRefExoticComponent< - SwitchProps & RefAttributes ->; - -// @public (undocumented) -export interface SwitchProps extends SwitchProps_2 { - label?: string; -} - -// @public -export const Tab: (props: TabProps) => JSX_2.Element; - -// @public -export const Table: { - Root: ForwardRefExoticComponent< - HTMLAttributes & RefAttributes - >; - Header: ForwardRefExoticComponent< - HTMLAttributes & - RefAttributes - >; - Body: ForwardRefExoticComponent< - HTMLAttributes & - RefAttributes - >; - Head: ForwardRefExoticComponent< - ThHTMLAttributes & RefAttributes - >; - Row: ForwardRefExoticComponent< - HTMLAttributes & RefAttributes - >; - Cell: ForwardRefExoticComponent< - TdHTMLAttributes & RefAttributes - >; - CellText: ForwardRefExoticComponent< - TableCellTextProps & RefAttributes - >; - CellLink: ForwardRefExoticComponent< - TableCellLinkProps & RefAttributes - >; - CellProfile: ForwardRefExoticComponent< - TableCellProfileProps & RefAttributes - >; - Caption: ForwardRefExoticComponent< - HTMLAttributes & - RefAttributes - >; -}; - -// @public (undocumented) -export interface TableCellLinkProps - extends React.HTMLAttributes { - // (undocumented) - description?: string; - // (undocumented) - href: string; - // (undocumented) - render?: useRender.ComponentProps<'a'>['render']; - // (undocumented) - title: string; -} - -// @public (undocumented) -export interface TableCellProfileProps - extends React.HTMLAttributes { - // (undocumented) - name?: string; - // (undocumented) - src?: string; - // (undocumented) - to?: string; - // (undocumented) - withImage?: boolean; -} - -// @public (undocumented) -export interface TableCellTextProps - extends React.HTMLAttributes { - // (undocumented) - description?: string; - // (undocumented) - title: string; -} - -// @public -export const TabList: (props: TabListProps) => JSX_2.Element; - -// @public -export interface TabListProps extends Omit, 'items'> {} - -// @public -export const TabPanel: (props: TabPanelProps) => JSX_2.Element; - -// @public -export interface TabPanelProps extends TabPanelProps_2 {} - -// @public -export const Tabs: (props: TabsProps) => JSX_2.Element | null; - -// @public -export interface TabsProps extends TabsProps_2 {} - -// @public (undocumented) -const Text_2: { - ( - props: TextProps & { - ref?: React.ComponentPropsWithRef['ref']; - }, - ): React.ReactElement, T>; - displayName: string; -}; -export { Text_2 as Text }; - -// @public (undocumented) -export const TextField: ForwardRefExoticComponent< - TextFieldProps & RefAttributes ->; - -// @public (undocumented) -export interface TextFieldProps - extends TextFieldProps_2, - Omit { - icon?: ReactNode; - placeholder?: string; - size?: 'small' | 'medium' | Partial>; -} - -// @public (undocumented) -export type TextOwnProps = { - as?: 'p' | 'span' | 'label'; - variant?: - | 'subtitle' - | 'body' - | 'caption' - | 'label' - | Partial>; - weight?: 'regular' | 'bold' | Partial>; - color?: - | 'primary' - | 'secondary' - | 'danger' - | 'warning' - | 'success' - | Partial< - Record< - Breakpoint, - 'primary' | 'secondary' | 'danger' | 'warning' | 'success' - > - >; - truncate?: boolean; - className?: string; - style?: React.CSSProperties; -}; - -// @public (undocumented) -export type TextProps = TextOwnProps & - Omit, keyof TextOwnProps>; - -// @public (undocumented) -export const Tooltip: ForwardRefExoticComponent< - TooltipProps & RefAttributes ->; - -// @public (undocumented) -export interface TooltipProps extends Omit { - // (undocumented) - children: React.ReactNode; -} - -// @public (undocumented) -export const TooltipTrigger: ( - props: TooltipTriggerComponentProps, -) => JSX_2.Element; - -// @public (undocumented) -export const useBreakpoint: () => { - breakpoint: Breakpoint; - up: (key: Breakpoint) => boolean; - down: (key: Breakpoint) => boolean; -}; - -// @public (undocumented) -export const useIcons: () => IconContextProps; - -// @public (undocumented) -export interface UtilityProps extends SpaceProps { - // (undocumented) - alignItems?: Responsive; - // (undocumented) - border?: Responsive; - // (undocumented) - borderRadius?: Responsive; - // (undocumented) - colEnd?: Responsive; - // (undocumented) - colSpan?: Responsive; - // (undocumented) - colStart?: Responsive; - // (undocumented) - columns?: Responsive; - // (undocumented) - display?: Responsive; - // (undocumented) - flexDirection?: Responsive; - // (undocumented) - flexWrap?: Responsive; - // (undocumented) - gap?: Responsive; - // (undocumented) - justifyContent?: Responsive; - // (undocumented) - rowSpan?: Responsive; -} - -// @public (undocumented) -export const widthPropDefs: { - width: { - type: 'string'; - className: string; - customProperties: '--width'[]; - responsive: true; - }; - minWidth: { - type: 'string'; - className: string; - customProperties: '--min-width'[]; - responsive: true; - }; - maxWidth: { - type: 'string'; - className: string; - customProperties: '--max-width'[]; - responsive: true; - }; -}; - -// @public (undocumented) -export type WidthProps = GetPropDefTypes; +export * from '@backstage/ui'; ``` diff --git a/packages/canon/src/index.ts b/packages/canon/src/index.ts index 1dc6aa74c0..3cfed3d62c 100644 --- a/packages/canon/src/index.ts +++ b/packages/canon/src/index.ts @@ -20,49 +20,4 @@ * @packageDocumentation */ -// Providers -export * from './components/Icon/context'; - -// Layout components -export * from './components/Box'; -export * from './components/Grid'; -export * from './components/Flex'; -export * from './components/Container'; -export * from './components/Text'; -export * from './components/Heading'; - -// UI components -export * from './components/Avatar'; -export * from './components/Button'; -export * from './components/Card'; -export * from './components/Collapsible'; -export * from './components/DataTable'; -export * from './components/FieldLabel'; -export * from './components/Header'; -export * from './components/HeaderPage'; -export * from './components/Icon'; -export * from './components/ButtonIcon'; -export * from './components/ButtonLink'; -export * from './components/Checkbox'; -export * from './components/RadioGroup'; -export * from './components/Table'; -export * from './components/Tabs'; -export * from './components/TextField'; -export * from './components/Tooltip'; -export * from './components/Menu'; -export * from './components/ScrollArea'; -export * from './components/SearchField'; -export * from './components/Link'; -export * from './components/Select'; -export * from './components/Skeleton'; -export * from './components/Switch'; - -// Types -export * from './types'; -export * from './props'; - -// Hooks -export { useBreakpoint } from './hooks/useBreakpoint'; - -// Component Definitions -export * from './utils/componentDefinitions'; +export * from '@backstage/ui'; diff --git a/packages/create-app/src/lib/tasks.test.ts b/packages/create-app/src/lib/tasks.test.ts index 1ca2bc6569..c5d5092410 100644 --- a/packages/create-app/src/lib/tasks.test.ts +++ b/packages/create-app/src/lib/tasks.test.ts @@ -52,7 +52,6 @@ jest.mock('./versions', () => ({ '@backstage/cli': '1.0.0', '@backstage/backend-defaults': '1.0.0', '@backstage/backend-tasks': '1.0.0', - '@backstage/canon': '1.0.0', '@backstage/catalog-model': '1.0.0', '@backstage/catalog-client': '1.0.0', '@backstage/config': '1.0.0', @@ -102,6 +101,7 @@ jest.mock('./versions', () => ({ '@backstage/plugin-user-settings': '1.0.0', '@backstage/theme': '1.0.0', '@backstage/test-utils': '1.0.0', + '@backstage/ui': '1.0.0', }, })); diff --git a/packages/create-app/src/lib/versions.ts b/packages/create-app/src/lib/versions.ts index 396e243e85..179506063b 100644 --- a/packages/create-app/src/lib/versions.ts +++ b/packages/create-app/src/lib/versions.ts @@ -33,7 +33,6 @@ import { version as root } from '../../../../package.json'; import { version as appDefaults } from '../../../app-defaults/package.json'; import { version as backendDefaults } from '../../../backend-defaults/package.json'; -import { version as canon } from '../../../canon/package.json'; import { version as catalogClient } from '../../../catalog-client/package.json'; import { version as catalogModel } from '../../../catalog-model/package.json'; import { version as cli } from '../../../cli/package.json'; @@ -47,6 +46,7 @@ import { version as integrationReact } from '../../../integration-react/package. import { version as testUtils } from '../../../test-utils/package.json'; import { version as theme } from '../../../theme/package.json'; import { version as repoTools } from '../../../repo-tools/package.json'; +import { version as ui } from '../../../ui/package.json'; import { version as pluginApiDocs } from '../../../../plugins/api-docs/package.json'; import { version as pluginAppBackend } from '../../../../plugins/app-backend/package.json'; @@ -94,7 +94,6 @@ export const packageVersions = { '@backstage/catalog-client': catalogClient, '@backstage/catalog-model': catalogModel, '@backstage/cli': cli, - '@backstage/canon': canon, '@backstage/config': config, '@backstage/core-app-api': coreAppApi, '@backstage/core-components': coreComponents, @@ -152,4 +151,5 @@ export const packageVersions = { '@backstage/plugin-user-settings': pluginUserSettings, '@backstage/test-utils': testUtils, '@backstage/theme': theme, + '@backstage/ui': ui, }; diff --git a/packages/create-app/templates/default-app/packages/app/package.json.hbs b/packages/create-app/templates/default-app/packages/app/package.json.hbs index 29a2059c50..b7d16f8a84 100644 --- a/packages/create-app/templates/default-app/packages/app/package.json.hbs +++ b/packages/create-app/templates/default-app/packages/app/package.json.hbs @@ -15,7 +15,6 @@ }, "dependencies": { "@backstage/app-defaults": "^{{version '@backstage/app-defaults'}}", - "@backstage/canon": "^{{version '@backstage/canon'}}", "@backstage/catalog-model": "^{{version '@backstage/catalog-model'}}", "@backstage/cli": "^{{version '@backstage/cli'}}", "@backstage/core-app-api": "^{{version '@backstage/core-app-api'}}", @@ -39,6 +38,7 @@ "@backstage/plugin-techdocs-react": "^{{version '@backstage/plugin-techdocs-react'}}", "@backstage/plugin-user-settings": "^{{version '@backstage/plugin-user-settings'}}", "@backstage/theme": "^{{version '@backstage/theme'}}", + "@backstage/ui": "^{{version '@backstage/ui'}}", "@material-ui/core": "^4.12.2", "@material-ui/icons": "^4.9.1", "react": "^18.0.2", diff --git a/packages/create-app/templates/default-app/packages/app/src/index.tsx b/packages/create-app/templates/default-app/packages/app/src/index.tsx index 69d6401c05..46f31902f4 100644 --- a/packages/create-app/templates/default-app/packages/app/src/index.tsx +++ b/packages/create-app/templates/default-app/packages/app/src/index.tsx @@ -1,6 +1,6 @@ import '@backstage/cli/asset-types'; import ReactDOM from 'react-dom/client'; import App from './App'; -import '@backstage/canon/css/styles.css'; +import '@backstage/ui/css/styles.css'; ReactDOM.createRoot(document.getElementById('root')!).render(); diff --git a/packages/ui/.eslintrc.js b/packages/ui/.eslintrc.js new file mode 100644 index 0000000000..9638ff6e45 --- /dev/null +++ b/packages/ui/.eslintrc.js @@ -0,0 +1,9 @@ +module.exports = { + ...require('@backstage/cli/config/eslint-factory')(__dirname), + extends: ['plugin:storybook/recommended'], + rules: { + 'react/forbid-elements': 'off', + '@backstage/no-mixed-plugin-imports': 'off' + }, +}; + diff --git a/packages/ui/.gitignore b/packages/ui/.gitignore new file mode 100644 index 0000000000..86fa479d2f --- /dev/null +++ b/packages/ui/.gitignore @@ -0,0 +1,2 @@ +# Build output +storybook-static diff --git a/packages/canon/.storybook/main.ts b/packages/ui/.storybook/main.ts similarity index 100% rename from packages/canon/.storybook/main.ts rename to packages/ui/.storybook/main.ts diff --git a/packages/canon/.storybook/preview.tsx b/packages/ui/.storybook/preview.tsx similarity index 100% rename from packages/canon/.storybook/preview.tsx rename to packages/ui/.storybook/preview.tsx diff --git a/packages/canon/.storybook/themes/spotify.css b/packages/ui/.storybook/themes/spotify.css similarity index 100% rename from packages/canon/.storybook/themes/spotify.css rename to packages/ui/.storybook/themes/spotify.css diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md new file mode 100644 index 0000000000..211b16bb05 --- /dev/null +++ b/packages/ui/CHANGELOG.md @@ -0,0 +1,282 @@ +# @backstage/ui + +## 0.6.0-next.1 + +### Minor Changes + +- 2e30459: We are moving our Tooltip component to use React Aria under the hood. In doing so, the structure of the component and its prop are changing to follow the new underlying structure. + +### Patch Changes + +- 76255b8: Add new Card component to Canon. +- b0a6c8e: Add new Header component to Canon. +- be76576: Improve Button, ButtonIcon and ButtonLink styling in Canon. +- 17beb9b: Update return types for Heading & Text components for React 19. +- eac4a4c: Add new tertiary variant to Button, ButtonIcon and ButtonLink in Canon. +- 8f2e82d: Add new Skeleton component in Canon + +## 0.6.0-next.0 + +### Minor Changes + +- 4c6d891: **BREAKING CHANGES** + + We’re updating our Button component to provide better support for button links. + + - We’re introducing a new `ButtonLink` component, which replaces the previous render prop pattern. + - To maintain naming consistency across components, `IconButton` is being renamed to `ButtonIcon`. + - Additionally, the render prop will be removed from all button-related components. + + These changes aim to simplify usage and improve clarity in our component API. + +### Patch Changes + +- 140f652: We are consolidating all css files into a single styles.css in Canon. +- 8154fb9: Add new SearchField component in Canon +- 6910892: Add new `RadioGroup` + `Radio` component to Canon +- a8a8514: We are transforming how we structure our class names and data attributes definitions for all components. They are now all set in the same place. +- 667b951: Added placeholder prop to TextField component. +- e71333a: adding export for ButtonLink so it's importable + +## 0.5.0 + +### Minor Changes + +- 621fac9: We are updating the default size of the Button component in Canon to be small instead of medium. +- a842554: We set the default size for IconButton in Canon to be small instead of medium. +- 35fd51d: Move TextField component to use react Aria under the hood. Introducing a new FieldLabel component to help build custom fields. +- 78204a2: **Breaking** We are adding a new as prop on the Heading and Text component to make it easier to change the component tag. We are removing the render prop in favour of the as prop. +- c49e335: TextField in Canon now has multiple label sizes as well as the capacity to hide label and description but still make them available for screen readers. +- 24b45ef: Fixes spacing props on layout components and aligned on naming for the Grid component. You should now call the Grid root component using instead of just . + +### Patch Changes + +- 44df879: Add min-width: 0; by default on every Flex components in Canon to help support truncated texts inside flex elements. +- ee6ffe6: Fix styling for the title4 prop on the Heading component in Canon. +- f2f814a: Added a render prop to the Button component in Canon to use it as a link. +- 98f02a6: Add new Switch component in Canon. +- c94f8e0: The filter input in menu comboboxes should now always use the full width of the menu it's in. +- 269316d: Remove leftover console.log from Container component. + +## 0.5.0-next.2 + +### Patch Changes + +- 44df879: Add min-width: 0; by default on every Flex components in Canon to help support truncated texts inside flex elements. +- ee6ffe6: Fix styling for the title4 prop on the Heading component in Canon. +- f2f814a: Added a render prop to the Button component in Canon to use it as a link. + +## 0.5.0-next.1 + +### Minor Changes + +- 621fac9: We are updating the default size of the Button component in Canon to be small instead of medium. +- a842554: We set the default size for IconButton in Canon to be small instead of medium. + +## 0.5.0-next.0 + +### Minor Changes + +- 24b45ef: Fixes spacing props on layout components and aligned on naming for the Grid component. You should now call the Grid root component using instead of just . + +### Patch Changes + +- 269316d: Remove leftover console.log from Container component. + +## 0.4.0 + +### Minor Changes + +- ea36f74: **Breaking Change** Icons on Button and IconButton now need to be imported and placed like this: