diff --git a/.changeset/cyan-radios-stand.md b/.changeset/cyan-radios-stand.md new file mode 100644 index 0000000000..c7b204ac47 --- /dev/null +++ b/.changeset/cyan-radios-stand.md @@ -0,0 +1,5 @@ +--- +'@backstage/canon': patch +--- + +Add new breakpoint helpers up(), down() and current breakpoint to help you use our breakpoints in your React components. diff --git a/.changeset/neat-ducks-wish.md b/.changeset/neat-ducks-wish.md new file mode 100644 index 0000000000..2568e438c9 --- /dev/null +++ b/.changeset/neat-ducks-wish.md @@ -0,0 +1,5 @@ +--- +'@backstage/canon': minor +--- + +Improve class name structure using data attributes instead of class names. diff --git a/.changeset/pre.json b/.changeset/pre.json index a840a36caa..08a086039d 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -1,5 +1,5 @@ { - "mode": "pre", + "mode": "exit", "tag": "next", "initialVersions": { "example-app": "0.2.107", diff --git a/.changeset/quiet-rockets-throw.md b/.changeset/quiet-rockets-throw.md new file mode 100644 index 0000000000..6ba34beeff --- /dev/null +++ b/.changeset/quiet-rockets-throw.md @@ -0,0 +1,5 @@ +--- +'@backstage/canon': patch +--- + +Add new DataTable component and update Table component styles. diff --git a/.changeset/rich-phones-whisper.md b/.changeset/rich-phones-whisper.md new file mode 100644 index 0000000000..75f0fc0c35 --- /dev/null +++ b/.changeset/rich-phones-whisper.md @@ -0,0 +1,5 @@ +--- +'@backstage/repo-tools': patch +--- + +Checking up the files where `createRouter` has been declared and check if `@deprecated` tag exists. If it does not exist then only the message will appear. diff --git a/.changeset/swift-drinks-poke.md b/.changeset/swift-drinks-poke.md new file mode 100644 index 0000000000..bda37031c3 --- /dev/null +++ b/.changeset/swift-drinks-poke.md @@ -0,0 +1,5 @@ +--- +'@backstage/cli': minor +--- + +Internal update to move the `new` and `create-github-app` to their own module. diff --git a/.github/workflows/deploy_docker-image.yml b/.github/workflows/deploy_docker-image.yml index 555cc351c8..df5ed9c07b 100644 --- a/.github/workflows/deploy_docker-image.yml +++ b/.github/workflows/deploy_docker-image.yml @@ -62,7 +62,7 @@ jobs: uses: docker/setup-buildx-action@b5ca514318bd6ebac0fb2aedd5d36ec1b5c232a2 # v3.10.0 - name: Build and push - uses: docker/build-push-action@67a2d409c0a876cbe6b11854e3e25193efe4e62d # v6.12.0 + uses: docker/build-push-action@471d1dc4e07e5cdedd4c2171150001c434f0b7a4 # v6.15.0 with: context: './example-app' file: ./example-app/packages/backend/Dockerfile diff --git a/.github/workflows/pr-review-comment-trigger.yaml b/.github/workflows/pr-review-comment-trigger.yaml index 61252e7567..e2bdb4c1cb 100644 --- a/.github/workflows/pr-review-comment-trigger.yaml +++ b/.github/workflows/pr-review-comment-trigger.yaml @@ -30,7 +30,7 @@ jobs: run: | mkdir -p ./pr echo $PR_NUMBER > ./pr/pr_number - - uses: actions/upload-artifact@4cec3d8aa04e39d1a68397de0c4cd6fb9dce8ec1 # v4.6.1 + - uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2 with: name: pr_number-${{ github.event.pull_request.number }} path: pr/ diff --git a/.github/workflows/scorecard.yml b/.github/workflows/scorecard.yml index 26172cce6a..4865bee198 100644 --- a/.github/workflows/scorecard.yml +++ b/.github/workflows/scorecard.yml @@ -58,7 +58,7 @@ jobs: # Upload the results as artifacts (optional). Commenting out will disable uploads of run results in SARIF # format to the repository Actions tab. - name: 'Upload artifact' - uses: actions/upload-artifact@4cec3d8aa04e39d1a68397de0c4cd6fb9dce8ec1 # v4.6.1 + uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2 with: name: SARIF file path: results.sarif diff --git a/canon-docs/public/css-classname-structure.png b/canon-docs/public/css-classname-structure.png new file mode 100644 index 0000000000..df9894ff2b Binary files /dev/null and b/canon-docs/public/css-classname-structure.png differ diff --git a/canon-docs/src/app/(docs)/components/link/page.mdx b/canon-docs/src/app/(docs)/components/link/page.mdx new file mode 100644 index 0000000000..64a3261590 --- /dev/null +++ b/canon-docs/src/app/(docs)/components/link/page.mdx @@ -0,0 +1,84 @@ +import { PropsTable } from '@/components/PropsTable'; +import { Snippet } from '@/components/Snippet'; +import { Tabs } from '@/components/Tabs'; +import { CodeBlock } from '@/components/CodeBlock'; +import { + MenuSnippet, + ButtonSnippet, + LinkSnippet, +} from '@/snippets/stories-snippets'; +import { linkPropDefs } from './props'; + +# Link + +A link component that renders a `` element. + +} + code={`Sign up for Backstage`} +/> + + + + Usage + Theming + + + Sign up for Backstage`} + /> + + + We recommend starting with our [global tokens](/theme/theming) to customize the library and align it with + your brand. For additional flexibility, you can use the provided class names for each element listed below. + - `canon-Link` + - `canon-Link[data-variant='body']` + - `canon-Link[data-variant='subtitle']` + - `canon-Link[data-variant='caption']` + - `canon-Link[data-variant='label']` + - `canon-Link[data-weight='regular']` + - `canon-Link[data-weight='bold']` + + + +## API reference + + + +## Examples + +### Variants + +Here's a view when links have different variants. + +} + code={` + + + + + `} +/> + +### Weights + +Here's a view when links have different weights. + +} + code={` + + + `} +/> diff --git a/canon-docs/src/app/(docs)/components/link/props.ts b/canon-docs/src/app/(docs)/components/link/props.ts new file mode 100644 index 0000000000..83507c5594 --- /dev/null +++ b/canon-docs/src/app/(docs)/components/link/props.ts @@ -0,0 +1,22 @@ +import { classNamePropDefs, stylePropDefs } from '@/utils/propDefs'; +import type { PropDef } from '@/utils/propDefs'; + +export const linkPropDefs: Record = { + to: { + type: 'string', + }, + variant: { + type: 'enum', + values: ['subtitle', 'body', 'caption', 'label'], + default: 'body', + responsive: true, + }, + weight: { + type: 'enum', + values: ['regular', 'bold'], + default: 'regular', + responsive: true, + }, + ...classNamePropDefs, + ...stylePropDefs, +}; diff --git a/canon-docs/src/app/(docs)/components/menu/page.mdx b/canon-docs/src/app/(docs)/components/menu/page.mdx new file mode 100644 index 0000000000..98c4949438 --- /dev/null +++ b/canon-docs/src/app/(docs)/components/menu/page.mdx @@ -0,0 +1,157 @@ +import { PropsTable } from '@/components/PropsTable'; +import { Snippet } from '@/components/Snippet'; +import { Tabs } from '@/components/Tabs'; +import { CodeBlock } from '@/components/CodeBlock'; +import { MenuSnippet } from '@/snippets/stories-snippets'; +import { BaseUI } from '@/components/HeadlessBanners/BaseUI'; +import { + menuRootPropDefs, + menuTriggerPropDefs, + menuPositionerPropDefs, + menuItemPropDefs, +} from './props'; + +# Menu + +A list of actions in a dropdown, enhanced with keyboard navigation. + +} + code={` + ( + + )} + /> + + + + Settings + Invite new members + Download app + Log out + + + + `} +/> + + + + Usage + Theming + + + + + + + + + + + + `} + /> + + + We recommend starting with our [global tokens](/theme/theming) to customize the library and align it with + your brand. For additional flexibility, you can use the provided class names for each element listed below. + - `canon-MenuTrigger` + - `canon-MenuBackdrop` + - `canon-MenuPositioner` + - `canon-MenuPopup` + - `canon-MenuArrow` + - `canon-MenuItem` + - `canon-MenuGroup` + - `canon-MenuGroupLabel` + - `canon-MenuRadioGroup` + - `canon-MenuRadioItem` + - `canon-MenuRadioItemIndicator` + - `canon-MenuCheckboxItem` + - `canon-MenuCheckboxItemIndicator` + - `canon-MenuSubmenuTrigger` + - `canon-MenuSeparator` + + + +## API reference + + + +### Menu.Root + +Groups all parts of the menu. Doesn't render its own HTML element. + + + +### Menu.Trigger + +The trigger by default render a simple unstyled button. Because menus can be rendered in different ways, we recommend +using the `render` prop to render a custom trigger. + + + )} + /> + + + + Settings + Invite new members + Download app + Log out + + + + `} +/> diff --git a/canon-docs/src/app/(docs)/components/menu/props.ts b/canon-docs/src/app/(docs)/components/menu/props.ts new file mode 100644 index 0000000000..5cf41fa5f9 --- /dev/null +++ b/canon-docs/src/app/(docs)/components/menu/props.ts @@ -0,0 +1,142 @@ +import { + classNamePropDefs, + stylePropDefs, + renderPropDefs, +} from '@/utils/propDefs'; +import type { PropDef } from '@/utils/propDefs'; + +export const menuRootPropDefs: Record = { + defaultOpen: { + type: 'boolean', + default: 'false', + }, + open: { + type: 'boolean', + }, + onOpenChange: { + type: 'enum', + values: ['(open, event) => void'], + }, + closeParentOnEsc: { + type: 'boolean', + default: 'true', + }, + modal: { + type: 'boolean', + default: 'true', + }, + onOpenChangeComplete: { + type: 'enum', + values: ['(open) => void'], + }, + disabled: { + type: 'boolean', + default: 'false', + }, + openOnHover: { + type: 'boolean', + }, + delay: { + type: 'number', + default: '100', + }, + loop: { + type: 'boolean', + default: 'true', + }, + orientation: { + type: 'enum', + values: ['horizontal', 'vertical'], + default: 'vertical', + }, + ...classNamePropDefs, + ...stylePropDefs, +}; + +export const menuTriggerPropDefs: Record = { + ...renderPropDefs, + ...classNamePropDefs, + ...stylePropDefs, +}; + +export const menuPositionerPropDefs: Record = { + align: { + type: 'enum', + values: ['start', 'center', 'end'], + default: 'center', + }, + alignOffset: { + type: 'enum', + values: ['number', '(data) => number'], + default: '0', + }, + side: { + type: 'enum', + values: ['bottom', 'inline-end', 'inline-start', 'left', 'right', 'top'], + default: 'bottom', + }, + sideOffset: { + type: 'enum', + values: ['number', '(data) => number'], + default: '0', + }, + arrowPadding: { + type: 'number', + default: '5', + }, + anchor: { + type: 'enum', + values: [ + 'React.Ref', + 'Element', + 'VirtualElement', + '(() => Element | VirtualElement | null)', + 'null', + ], + }, + collisionBoundary: { + type: 'enum', + values: ['clipping-ancestors', 'Element', 'Element[]', 'Rect'], + default: 'clipping-ancestors', + }, + collisionPadding: { + type: 'enum', + values: ['number', 'Rect'], + default: '5', + }, + sticky: { + type: 'boolean', + default: 'false', + }, + positionMethod: { + type: 'enum', + values: ['absolute', 'fixed'], + default: 'absolute', + }, + trackAnchor: { + type: 'boolean', + default: 'true', + }, + ...classNamePropDefs, + ...stylePropDefs, +}; + +export const menuItemPropDefs: Record = { + label: { + type: 'string', + }, + onClick: { + type: 'enum', + values: ['(event) => void'], + }, + closeOnClick: { + type: 'boolean', + default: 'true', + }, + disabled: { + type: 'boolean', + default: 'false', + }, + ...classNamePropDefs, + ...stylePropDefs, +}; diff --git a/canon-docs/src/app/(docs)/theme/theming/page.mdx b/canon-docs/src/app/(docs)/theme/theming/page.mdx index e3fc42da44..665755c268 100644 --- a/canon-docs/src/app/(docs)/theme/theming/page.mdx +++ b/canon-docs/src/app/(docs)/theme/theming/page.mdx @@ -29,8 +29,100 @@ Here's an example of how your theme.css file should look like: +## CSS class name structure + +All Canon components come with a set of CSS classes that you can use to style them. To make it +easier to identify the class name you can use, we use a specific structure for the class names. + + + +Every component has a unique prefix `.canon-` followed by the component name. Component props +are represented using the `data-` attribute. That way, class names are easily identifiable. + ## Available CSS variables +### Base colors + +These colors are used for special purposes like ring, scrollbar, ... + + + + + Prop + Description + + + + + + --canon-black + + + Pure black color. This one should be the same in light and dark themes. + + + + + --canon-white + + + Pure white color. This one should be the same in light and dark themes. + + + + + --canon-gray-1 + + You can use these mostly for backgrounds colors. + + + + --canon-gray-2 + + You can use these mostly for backgrounds colors. + + + + --canon-gray-3 + + You can use these mostly for backgrounds colors. + + + + --canon-gray-4 + + You can use these mostly for backgrounds colors. + + + + --canon-gray-5 + + You can use these mostly for backgrounds colors. + + + + --canon-gray-6 + + You can use these mostly for backgrounds colors. + + + + --canon-gray-7 + + You can use these mostly for backgrounds colors. + + + + --canon-gray-8 + + You can use these mostly for backgrounds colors. + + + + ### Core background colors These colors are used for the background of your application. We are mostly using for now a @@ -57,98 +149,60 @@ color of your app. Use for any panels or elevated surfaces. - - - -### Component background colors - -These colors are meants for interactive components like buttons, callout avatar, chips, ... -We have two main level of background you can customise. The accent one is mostly used as a primary option -for interactive components. The tint one is used for secondary components like callouts, avatars, ... - - - - - Prop - Description - - - - --canon-bg-accent + --canon-bg-surface-2 - Used mostly for primary interactive components. + Use for any panels or elevated surfaces. - --canon-bg-accent-hover - - - Used for interactive components when they are hovered. + --canon-bg-solid + Used for solid background colors. - --canon-bg-accent-focus - - - Used for interactive components when they are in focus. + --canon-bg-solid-hover + Used for solid background colors when hovered. - --canon-bg-accent-disabled + --canon-bg-solid-pressed + Used for solid background colors when pressed. + + - Used for interactive components when they are disabled. + --canon-bg-solid-disabled + Used for solid background colors when disabled. --canon-bg-tint - Used for secondary interactive components. + Used for tint background colors. --canon-bg-tint-hover - - Used for interactive components when they are hovered. - + Used for tint background colors when hovered. --canon-bg-tint-focus - - Used for interactive components when they are active. - + Used for tint background colors when active. --canon-bg-tint-disabled - - Used for interactive components when they are disabled. - + Used for tint background colors when disabled. - - - -### Status background colors - -These backgrounds are intended for non-interactive elements to visually convey a specific state. - - - - - Prop - Description - - - --canon-bg-danger @@ -189,7 +243,7 @@ are prefixed with `fg` to make it easier to identify. --canon-fg-primary - It should be used on top of `--canon-bg-app` or `--canon-bg-surface-1`. + It should be used on top of main background surfaces. @@ -197,7 +251,7 @@ are prefixed with `fg` to make it easier to identify. --canon-fg-secondary - It should be used on top of `--canon-bg-app` or `--canon-bg-surface-1`. + It should be used on top of main background surfaces. @@ -205,7 +259,7 @@ are prefixed with `fg` to make it easier to identify. --canon-fg-link - It should be used on top of `--canon-bg-app` or `--canon-bg-surface-1`. + It should be used on top of main background surfaces. @@ -213,38 +267,64 @@ are prefixed with `fg` to make it easier to identify. --canon-fg-link-hover - It should be used on top of `--canon-bg-app` or `--canon-bg-surface-1`. + It should be used on top of main background surfaces. - --canon-fg-accent + --canon-fg-disabled + + + It should be used on top of main background surfaces. + + + + + --canon-fg-solid + + + It should be used on top of solid background colors. - It should be used on top of `--canon-bg-accent`. --canon-fg-tint - It should be used on top of `--canon-bg-tint`. + + It should be used on top of tint background colors. + + + + + --canon-fg-tint-disabled + + + It should be used on top of tint background colors when disabled. + --canon-fg-danger - It should be used on top of `--canon-bg-danger`. + + It should be used on top of danger background colors. + --canon-fg-warning - It should be used on top of `--canon-bg-warning`. + + It should be used on top of warning background colors. + --canon-fg-success - It should be used on top of `--canon-bg-success`. + + It should be used on top of success background colors. + @@ -288,21 +368,9 @@ low contrast to help as a separator with the different background colors. - --canon-border-tint + --canon-border-disabled - It should be used on top of `--canon-bg-tint`. - - - - --canon-border-tint-hover - - Used when the component is hovered. - - - - --canon-border-tint-focus - - Used when the component is in focus. + Used when the component is disabled. @@ -325,7 +393,40 @@ low contrast to help as a separator with the different background colors. -## Font families +### Special colors + +These colors are used for special purposes like ring, scrollbar, ... + + + + + Prop + Description + + + + + + --canon-ring + + The color of the ring. + + + + --canon-scrollbar + + The color of the scrollbar. + + + + --canon-scrollbar-thumb + + The color of the scrollbar thumb. + + + + +### Font families We have two fonts that we use across Canon. The first one is the sans-serif font that we use for the body of the application. The second one is the @@ -354,9 +455,9 @@ monospace font that we use for code blocks and tables. -## Font weights +### Font weights -We have two font weights that we use across Canon. Regular or Bold +We have two font weights that we use across Canon. Regular or Bold. @@ -381,7 +482,7 @@ We have two font weights that we use across Canon. Regular or Bold -## Spacing +### Spacing We built a spacing system based on a single value `--canon-space`. This value is used to calculate the spacing for all the components. By default if you would like to @@ -520,18 +621,9 @@ tokens for pretty much each spacing properties like padding, margin, gaps, ... -### Radius (Work in progress) +### Radius -Our radius system is a little bit different from spacing as we use a factor to calculate the radius values. -Under the hood different components uses different radius values. For example, button can be set to have full radius -while a checkbox will have to remain a square. - -Here are the different radius factor we recommend to use - -- None: `0` -- Small: `0.75` -- Medium: `1` -- Large: `1.5` +We use a radius system to make sure that the components have a consistent look and feel. @@ -543,9 +635,59 @@ Here are the different radius factor we recommend to use - --canon-radius-factor + --canon-radius-1 + + + The radius of the component. Default value is `0.125rem`. + + + + + --canon-radius-2 + + + The radius of the component. Default value is `0.25rem`. + + + + + --canon-radius-3 + + + The radius of the component. Default value is `0.5rem`. + + + + + --canon-radius-4 + + + The radius of the component. Default value is `0.75rem`. + + + + + --canon-radius-5 + + + The radius of the component. Default value is `1rem`. + + + + + --canon-radius-6 + + + The radius of the component. Default value is `1.25rem`. + + + + + --canon-radius-full + + + The radius of the component. Default value is `9999px`. - By default the value is set to medium `1`. diff --git a/canon-docs/src/snippets/stories-snippets.tsx b/canon-docs/src/snippets/stories-snippets.tsx index 5c363d6fc7..6b54f5dc4d 100644 --- a/canon-docs/src/snippets/stories-snippets.tsx +++ b/canon-docs/src/snippets/stories-snippets.tsx @@ -13,6 +13,8 @@ import * as TextFieldStories from '../../../packages/canon/src/components/TextFi import * as TextStories from '../../../packages/canon/src/components/Text/Text.stories'; import * as FlexStories from '../../../packages/canon/src/components/Flex/Flex.stories'; import * as SelectStories from '../../../packages/canon/src/components/Select/Select.stories'; +import * as MenuStories from '../../../packages/canon/src/components/Menu/Menu.stories'; +import * as LinkStories from '../../../packages/canon/src/components/Link/Link.stories'; export const BoxSnippet = ({ story }: { story: keyof typeof BoxStories }) => { const stories = composeStories(BoxStories); @@ -125,3 +127,17 @@ export const SelectSnippet = ({ return StoryComponent ? : null; }; + +export const MenuSnippet = ({ story }: { story: keyof typeof MenuStories }) => { + const stories = composeStories(MenuStories); + const StoryComponent = stories[story as keyof typeof stories]; + + return StoryComponent ? : null; +}; + +export const LinkSnippet = ({ story }: { story: keyof typeof LinkStories }) => { + const stories = composeStories(LinkStories); + const StoryComponent = stories[story as keyof typeof stories]; + + return StoryComponent ? : null; +}; diff --git a/canon-docs/src/utils/data.ts b/canon-docs/src/utils/data.ts index fd4625cd20..48274ea1a2 100644 --- a/canon-docs/src/utils/data.ts +++ b/canon-docs/src/utils/data.ts @@ -91,6 +91,16 @@ export const components: Page[] = [ slug: 'icon-button', status: 'alpha', }, + { + title: 'Link', + slug: 'link', + status: 'alpha', + }, + { + title: 'Menu', + slug: 'menu', + status: 'alpha', + }, { title: 'Select', slug: 'select', diff --git a/canon-docs/src/utils/propDefs.ts b/canon-docs/src/utils/propDefs.ts index f087d6188f..3805665346 100644 --- a/canon-docs/src/utils/propDefs.ts +++ b/canon-docs/src/utils/propDefs.ts @@ -203,3 +203,11 @@ export const childrenPropDefs: Record = { responsive: false, }, }; + +export const renderPropDefs: Record = { + render: { + type: 'enum', + values: ['React.ReactElement', '(props, state) => React.ReactElement'], + responsive: false, + }, +}; diff --git a/canon-docs/yarn.lock b/canon-docs/yarn.lock index 00438a8658..4c6f663544 100644 --- a/canon-docs/yarn.lock +++ b/canon-docs/yarn.lock @@ -916,11 +916,11 @@ __metadata: linkType: hard "@types/node@npm:^20": - version: 20.17.24 - resolution: "@types/node@npm:20.17.24" + version: 20.17.30 + resolution: "@types/node@npm:20.17.30" dependencies: undici-types: "npm:~6.19.2" - checksum: 10/0c5fe294b003656b0f95ffce295c08e7ed3fa814ba9bf891e146dced90322d186e63837db9d9bb14d4f294fbe1a6fa1c89ced0b173380c8aaeb90de6c3eddb3b + checksum: 10/69fd3b177417be77b459e8f1dd4e78c85c686167086920fbf35a9fda301709bbeee6a87ad2591fb1ddd96c65e725ec6bb527a06496626a1c94367d1361048f8d languageName: node linkType: hard @@ -5410,22 +5410,22 @@ __metadata: linkType: hard "typescript@npm:^5": - version: 5.8.2 - resolution: "typescript@npm:5.8.2" + version: 5.8.3 + resolution: "typescript@npm:5.8.3" bin: tsc: bin/tsc tsserver: bin/tsserver - checksum: 10/dbc2168a55d56771f4d581997be52bab5cbc09734fec976cfbaabd787e61fb4c6cf9125fd48c6f98054ce549c77ecedefc7f64252a830dd8e9c3381f61fbeb78 + checksum: 10/65c40944c51b513b0172c6710ee62e951b70af6f75d5a5da745cb7fab132c09ae27ffdf7838996e3ed603bb015dadd099006658046941bd0ba30340cc563ae92 languageName: node linkType: hard "typescript@patch:typescript@npm%3A^5#optional!builtin": - version: 5.8.2 - resolution: "typescript@patch:typescript@npm%3A5.8.2#optional!builtin::version=5.8.2&hash=5786d5" + version: 5.8.3 + resolution: "typescript@patch:typescript@npm%3A5.8.3#optional!builtin::version=5.8.3&hash=5786d5" bin: tsc: bin/tsc tsserver: bin/tsserver - checksum: 10/97920a082ffc57583b1cb6bc4faa502acc156358e03f54c7fc7fdf0b61c439a717f4c9070c449ee9ee683d4cfc3bb203127c2b9794b2950f66d9d307a4ff262c + checksum: 10/b9b1e73dabac5dc730c041325dbd9c99467c1b0d239f1b74ec3b90d831384af3e2ba973946232df670519147eb51a2c20f6f96163cea2b359f03de1e2091cc4f languageName: node linkType: hard diff --git a/microsite/yarn.lock b/microsite/yarn.lock index a7838ca488..618b716f4d 100644 --- a/microsite/yarn.lock +++ b/microsite/yarn.lock @@ -2961,94 +2961,94 @@ __metadata: languageName: node linkType: hard -"@swc/core-darwin-arm64@npm:1.11.10": - version: 1.11.10 - resolution: "@swc/core-darwin-arm64@npm:1.11.10" +"@swc/core-darwin-arm64@npm:1.11.21": + version: 1.11.21 + resolution: "@swc/core-darwin-arm64@npm:1.11.21" conditions: os=darwin & cpu=arm64 languageName: node linkType: hard -"@swc/core-darwin-x64@npm:1.11.10": - version: 1.11.10 - resolution: "@swc/core-darwin-x64@npm:1.11.10" +"@swc/core-darwin-x64@npm:1.11.21": + version: 1.11.21 + resolution: "@swc/core-darwin-x64@npm:1.11.21" conditions: os=darwin & cpu=x64 languageName: node linkType: hard -"@swc/core-linux-arm-gnueabihf@npm:1.11.10": - version: 1.11.10 - resolution: "@swc/core-linux-arm-gnueabihf@npm:1.11.10" +"@swc/core-linux-arm-gnueabihf@npm:1.11.21": + version: 1.11.21 + resolution: "@swc/core-linux-arm-gnueabihf@npm:1.11.21" conditions: os=linux & cpu=arm languageName: node linkType: hard -"@swc/core-linux-arm64-gnu@npm:1.11.10": - version: 1.11.10 - resolution: "@swc/core-linux-arm64-gnu@npm:1.11.10" +"@swc/core-linux-arm64-gnu@npm:1.11.21": + version: 1.11.21 + resolution: "@swc/core-linux-arm64-gnu@npm:1.11.21" conditions: os=linux & cpu=arm64 & libc=glibc languageName: node linkType: hard -"@swc/core-linux-arm64-musl@npm:1.11.10": - version: 1.11.10 - resolution: "@swc/core-linux-arm64-musl@npm:1.11.10" +"@swc/core-linux-arm64-musl@npm:1.11.21": + version: 1.11.21 + resolution: "@swc/core-linux-arm64-musl@npm:1.11.21" conditions: os=linux & cpu=arm64 & libc=musl languageName: node linkType: hard -"@swc/core-linux-x64-gnu@npm:1.11.10": - version: 1.11.10 - resolution: "@swc/core-linux-x64-gnu@npm:1.11.10" +"@swc/core-linux-x64-gnu@npm:1.11.21": + version: 1.11.21 + resolution: "@swc/core-linux-x64-gnu@npm:1.11.21" conditions: os=linux & cpu=x64 & libc=glibc languageName: node linkType: hard -"@swc/core-linux-x64-musl@npm:1.11.10": - version: 1.11.10 - resolution: "@swc/core-linux-x64-musl@npm:1.11.10" +"@swc/core-linux-x64-musl@npm:1.11.21": + version: 1.11.21 + resolution: "@swc/core-linux-x64-musl@npm:1.11.21" conditions: os=linux & cpu=x64 & libc=musl languageName: node linkType: hard -"@swc/core-win32-arm64-msvc@npm:1.11.10": - version: 1.11.10 - resolution: "@swc/core-win32-arm64-msvc@npm:1.11.10" +"@swc/core-win32-arm64-msvc@npm:1.11.21": + version: 1.11.21 + resolution: "@swc/core-win32-arm64-msvc@npm:1.11.21" conditions: os=win32 & cpu=arm64 languageName: node linkType: hard -"@swc/core-win32-ia32-msvc@npm:1.11.10": - version: 1.11.10 - resolution: "@swc/core-win32-ia32-msvc@npm:1.11.10" +"@swc/core-win32-ia32-msvc@npm:1.11.21": + version: 1.11.21 + resolution: "@swc/core-win32-ia32-msvc@npm:1.11.21" conditions: os=win32 & cpu=ia32 languageName: node linkType: hard -"@swc/core-win32-x64-msvc@npm:1.11.10": - version: 1.11.10 - resolution: "@swc/core-win32-x64-msvc@npm:1.11.10" +"@swc/core-win32-x64-msvc@npm:1.11.21": + version: 1.11.21 + resolution: "@swc/core-win32-x64-msvc@npm:1.11.21" conditions: os=win32 & cpu=x64 languageName: node linkType: hard "@swc/core@npm:^1.3.46": - version: 1.11.10 - resolution: "@swc/core@npm:1.11.10" + version: 1.11.21 + resolution: "@swc/core@npm:1.11.21" dependencies: - "@swc/core-darwin-arm64": "npm:1.11.10" - "@swc/core-darwin-x64": "npm:1.11.10" - "@swc/core-linux-arm-gnueabihf": "npm:1.11.10" - "@swc/core-linux-arm64-gnu": "npm:1.11.10" - "@swc/core-linux-arm64-musl": "npm:1.11.10" - "@swc/core-linux-x64-gnu": "npm:1.11.10" - "@swc/core-linux-x64-musl": "npm:1.11.10" - "@swc/core-win32-arm64-msvc": "npm:1.11.10" - "@swc/core-win32-ia32-msvc": "npm:1.11.10" - "@swc/core-win32-x64-msvc": "npm:1.11.10" + "@swc/core-darwin-arm64": "npm:1.11.21" + "@swc/core-darwin-x64": "npm:1.11.21" + "@swc/core-linux-arm-gnueabihf": "npm:1.11.21" + "@swc/core-linux-arm64-gnu": "npm:1.11.21" + "@swc/core-linux-arm64-musl": "npm:1.11.21" + "@swc/core-linux-x64-gnu": "npm:1.11.21" + "@swc/core-linux-x64-musl": "npm:1.11.21" + "@swc/core-win32-arm64-msvc": "npm:1.11.21" + "@swc/core-win32-ia32-msvc": "npm:1.11.21" + "@swc/core-win32-x64-msvc": "npm:1.11.21" "@swc/counter": "npm:^0.1.3" - "@swc/types": "npm:^0.1.19" + "@swc/types": "npm:^0.1.21" peerDependencies: - "@swc/helpers": "*" + "@swc/helpers": ">=0.5.17" dependenciesMeta: "@swc/core-darwin-arm64": optional: true @@ -3073,7 +3073,7 @@ __metadata: peerDependenciesMeta: "@swc/helpers": optional: true - checksum: 10/4fcda5222fe4311dd6fe07586c72458f86a3a7ccee09cc7115ff3308f12d84a019d0b6996bcc778014f30f9a683de2d94a21498f69f8ed53941912c851716572 + checksum: 10/98a0f201a0a4aa026b0b07c61c8da49d94d4ac3b059b466416c90b9b2cb4f457d836ae55ccfe90b0a89c7bdde36526ba5b7747c4e616c0d556c733e3728e9dd4 languageName: node linkType: hard @@ -3084,12 +3084,12 @@ __metadata: languageName: node linkType: hard -"@swc/types@npm:^0.1.19": - version: 0.1.19 - resolution: "@swc/types@npm:0.1.19" +"@swc/types@npm:^0.1.21": + version: 0.1.21 + resolution: "@swc/types@npm:0.1.21" dependencies: "@swc/counter": "npm:^0.1.3" - checksum: 10/693147cc9b23147164ddff9cb89477c369fbeb103319584779352a9ff1c72e0a70b97a89dfd97629040db8956d668d7b7a8fed328ffea46a3e8c18577e396994 + checksum: 10/6554bf5c78519f49099a2ba448d170191a14b1c7a35df848f10ee4d6c03ecd681e5213884905187de1d1d221589ec8b5cb77f477d099dc1627c3ec9d7f2fcdb0 languageName: node linkType: hard @@ -5942,11 +5942,11 @@ __metadata: linkType: hard "docusaurus-pushfeedback@npm:^1.0.0": - version: 1.0.1 - resolution: "docusaurus-pushfeedback@npm:1.0.1" + version: 1.0.3 + resolution: "docusaurus-pushfeedback@npm:1.0.3" peerDependencies: "@docusaurus/core": 3.x - checksum: 10/5160e33eded0c4bec51fba986561c33b69eee46799d69051188990d66353e43e49d826f5e44c9f73a67d0df36aa03ee7a3679b6d0cd6b0d9fed5f0f78fe4a1a3 + checksum: 10/ee80ae0c1fc079b2c317cab86d83ba50cce18938a6ce0ac647aad25dc68fc0ad659e55c11e93d0e7c23270c503c3cb300111dfbdd04785ef7aaf6fb123b57eae languageName: node linkType: hard diff --git a/packages/canon/css/button.css b/packages/canon/css/button.css index 312f58c5e6..eb0c44ce1b 100644 --- a/packages/canon/css/button.css +++ b/packages/canon/css/button.css @@ -16,7 +16,7 @@ } } -.canon-Button--variant-primary { +.canon-Button[data-variant="primary"] { background-color: var(--canon-bg-solid); color: var(--canon-fg-solid); transition: background-color .15s, box-shadow .15s; @@ -40,7 +40,7 @@ } } -.canon-Button--variant-secondary { +.canon-Button[data-variant="secondary"] { background-color: var(--canon-bg-surface-1); box-shadow: inset 0 0 0 1px var(--canon-border); color: var(--canon-fg-primary); @@ -66,24 +66,24 @@ } } -.canon-Button--size-medium { +.canon-Button[data-size="medium"] { font-size: var(--canon-font-size-4); padding: 0 var(--canon-space-3); height: 40px; } -.canon-Button--size-small { +.canon-Button[data-size="small"] { font-size: var(--canon-font-size-3); padding: 0 var(--canon-space-2); height: 32px; } -.canon-Button--size-small .canon-Button--icon { +.canon-Button[data-size="small"] .canon-ButtonIcon { width: 1rem; height: 1rem; } -.canon-Button--size-medium .canon-Button--icon { +.canon-Button[data-size="medium"] .canon-ButtonIcon { width: 1.5rem; height: 1.5rem; } diff --git a/packages/canon/css/components.css b/packages/canon/css/components.css index 264be6375b..bb1ba10018 100644 --- a/packages/canon/css/components.css +++ b/packages/canon/css/components.css @@ -22,7 +22,7 @@ } } -.canon-Button--variant-primary { +.canon-Button[data-variant="primary"] { background-color: var(--canon-bg-solid); color: var(--canon-fg-solid); transition: background-color .15s, box-shadow .15s; @@ -46,7 +46,7 @@ } } -.canon-Button--variant-secondary { +.canon-Button[data-variant="secondary"] { background-color: var(--canon-bg-surface-1); box-shadow: inset 0 0 0 1px var(--canon-border); color: var(--canon-fg-primary); @@ -72,28 +72,58 @@ } } -.canon-Button--size-medium { +.canon-Button[data-size="medium"] { font-size: var(--canon-font-size-4); padding: 0 var(--canon-space-3); height: 40px; } -.canon-Button--size-small { +.canon-Button[data-size="small"] { font-size: var(--canon-font-size-3); padding: 0 var(--canon-space-2); height: 32px; } -.canon-Button--size-small .canon-Button--icon { +.canon-Button[data-size="small"] .canon-ButtonIcon { width: 1rem; height: 1rem; } -.canon-Button--size-medium .canon-Button--icon { +.canon-Button[data-size="medium"] .canon-ButtonIcon { width: 1.5rem; height: 1.5rem; } +.canon-DataTableRoot { + gap: var(--canon-space-3); + flex-direction: column; + display: flex; +} + +.canon-DataTablePagination { + padding-top: var(--canon-space-5); + justify-content: space-between; + align-items: center; + display: flex; +} + +.canon-DataTablePagination--left { + justify-content: space-between; + align-items: center; + display: flex; +} + +.canon-DataTablePagination--right { + justify-content: space-between; + align-items: center; + gap: var(--canon-space-2); + display: flex; +} + +.canon-DataTablePagination--select { + min-width: 10.5rem; +} + .canon-Flex { display: flex; } @@ -179,117 +209,94 @@ display: flex; } -.table { - background-color: var(--canon-bg-surface-1); - border-radius: var(--canon-radius-2); +.canon-TableRoot { + caption-side: bottom; + border-collapse: collapse; width: 100%; - padding-bottom: var(--canon-space-0_5); - padding-top: var(--canon-space-0_5); - font-size: var(--canon-font-size-3); - font-family: var(--canon-font-regular); - font-weight: var(--canon-font-weight-regular); - position: relative; - overflow: auto; - - & table { - caption-side: bottom; - width: 100%; - font-size: var(--canon-font-size-sm); - border-collapse: collapse; - } } -.table-head { +.canon-TableHead { text-align: left; padding: var(--canon-space-3); + font-size: var(--canon-font-size-3); + color: var(--canon-fg-primary); } -.table-body { - & tr:last-child { - border-bottom: none; - } +.canon-TableBody { + color: var(--canon-fg-primary); } -.table-row { +.canon-TableRow { + border-bottom: 1px solid var(--canon-border); transition: color .2s ease-in-out; - - &:hover td { - background-color: var(--canon-bg-tint); - } - - & .table-cell:first-child { - border-top-left-radius: var(--canon-radius-2); - border-bottom-left-radius: var(--canon-radius-2); - box-shadow: inset 4px 2px 0 0 var(--canon-bg-surface-1), inset 4px -2px 0 0 var(--canon-bg-surface-1); - padding-left: var(--canon-space-3); - } - - & .table-cell:last-child { - border-top-right-radius: var(--canon-radius-2); - border-bottom-right-radius: var(--canon-radius-2); - box-shadow: inset -4px 2px 0 0 var(--canon-bg-surface-1), inset -4px -2px 0 0 var(--canon-bg-surface-1); - padding-right: var(--canon-space-3); - } } -.table-cell { +.canon-TableBody .canon-TableRow:hover { + background-color: var(--canon-gray-2); +} + +.canon-TableCell { padding: var(--canon-space-3); - background-color: var(--canon-bg); - box-shadow: inset 0px 2px 0 0 var(--canon-bg-surface-1), inset 0px -2px 0 0 var(--canon-bg-surface-1); + font-size: var(--canon-font-size-3); +} + +.canon-TableCellText, .canon-TableCellLink { + gap: var(--canon-space-0_5); + flex-direction: column; + display: flex; } .canon-Text { font-family: var(--canon-font-regular); - color: var(--canon-fg-primary); margin: 0; padding: 0; } -.canon-Text--variant-body { +.canon-Text[data-variant="body"] { font-size: var(--canon-font-size-3); line-height: 140%; } -.canon-Text--variant-subtitle { +.canon-Text[data-variant="subtitle"] { font-size: var(--canon-font-size-4); line-height: 140%; } -.canon-Text--variant-caption { +.canon-Text[data-variant="caption"] { font-size: var(--canon-font-size-2); line-height: 140%; } -.canon-Text--variant-label { +.canon-Text[data-variant="label"] { font-size: var(--canon-font-size-1); line-height: 140%; } -.canon-Text--weight-regular { +.canon-Text[data-weight="regular"] { font-weight: var(--canon-font-weight-regular); } -.canon-Text--weight-bold { +.canon-Text[data-weight="bold"] { font-weight: var(--canon-font-weight-bold); } -.canon-Text--color-primary { +.canon-Text[data-color="primary"] { color: var(--canon-fg-primary); } -.canon-Text--color-secondary { +.canon-Text[data-color="secondary"] { color: var(--canon-fg-secondary); } -.canon-Text--color-danger { +.canon-Text[data-color="danger"] { color: var(--canon-fg-danger); } -.canon-Text--color-warning { +.canon-Text[data-color="warning"] { color: var(--canon-fg-warning); } -.canon-Text--color-success { +.canon-Text[data-color="success"] { color: var(--canon-fg-success); } @@ -301,32 +308,32 @@ line-height: 100%; } -.canon-Heading--variant-display { +.canon-Heading[data-variant="display"] { font-size: var(--canon-font-size-10); font-weight: var(--canon-font-weight-bold); } -.canon-Heading--variant-title1 { +.canon-Heading[data-variant="title1"] { font-size: var(--canon-font-size-9); font-weight: var(--canon-font-weight-bold); } -.canon-Heading--variant-title2 { +.canon-Heading[data-variant="title2"] { font-size: var(--canon-font-size-8); font-weight: var(--canon-font-weight-bold); } -.canon-Heading--variant-title3 { +.canon-Heading[data-variant="title3"] { font-size: var(--canon-font-size-7); font-weight: var(--canon-font-weight-bold); } -.canon-Heading--variant-title4 { +.canon-Heading[data-variant="title4"] { font-size: var(--canon-font-size-title4); font-weight: var(--canon-font-weight-bold); } -.canon-Heading--variant-title5 { +.canon-Heading[data-variant="title5"] { font-size: var(--canon-font-size-5); font-weight: var(--canon-font-weight-bold); } @@ -349,7 +356,7 @@ } } -.canon-IconButton--variant-primary { +.canon-IconButton[data-variant="primary"] { background-color: var(--canon-bg-solid); color: var(--canon-fg-solid); transition: background-color .15s, box-shadow .15s; @@ -373,7 +380,7 @@ } } -.canon-IconButton--variant-secondary { +.canon-IconButton[data-variant="secondary"] { background-color: var(--canon-bg-surface-1); box-shadow: inset 0 0 0 1px var(--canon-border); color: var(--canon-fg-primary); @@ -399,24 +406,24 @@ } } -.canon-IconButton--size-medium { +.canon-IconButton[data-size="medium"] { font-size: var(--canon-font-size-4); width: 40px; height: 40px; } -.canon-IconButton--size-small { +.canon-IconButton[data-size="small"] { font-size: var(--canon-font-size-3); width: 32px; height: 32px; } -.canon-IconButton--size-small .canon-IconButton--icon { +.canon-IconButton[data-size="small"] .canon-IconButtonIcon { width: 1rem; height: 1rem; } -.canon-IconButton--size-medium .canon-IconButton--icon { +.canon-IconButton[data-size="medium"] .canon-IconButtonIcon { width: 1.5rem; height: 1.5rem; } @@ -428,14 +435,14 @@ display: flex; } -.canon-TextField--label { +.canon-TextFieldLabel { font-size: var(--canon-font-size-2); font-weight: var(--canon-font-weight-regular); color: var(--canon-fg-primary); margin-bottom: var(--canon-space-1_5); } -.canon-TextField--description { +.canon-TextFieldDescription { font-size: var(--canon-font-size-2); font-weight: var(--canon-font-weight-regular); color: var(--canon-fg-secondary); @@ -443,7 +450,7 @@ margin: 0; } -.canon-TextField--error { +.canon-TextFieldError { font-size: var(--canon-font-size-2); font-weight: var(--canon-font-weight-regular); color: var(--canon-fg-danger); @@ -451,7 +458,7 @@ margin: 0; } -.canon-TextField--input { +.canon-TextFieldInput { border-radius: var(--canon-radius-3); border: 1px solid var(--canon-border); padding: 0 var(--canon-space-4); @@ -464,39 +471,39 @@ transition: border-color .2s ease-in-out, outline-color .2s ease-in-out; } -.canon-TextField--input::placeholder { +.canon-TextFieldInput::placeholder { color: var(--canon-fg-secondary); } -.canon-TextField--input:hover { +.canon-TextFieldInput:hover { border-color: var(--canon-border-hover); } -.canon-TextField--input:focus-visible { +.canon-TextFieldInput:focus-visible { outline-color: var(--canon-border-pressed); border-color: var(--canon-border-pressed); outline-width: 0; } -.canon-TextField--input[data-invalid] { +.canon-TextFieldInput[data-invalid] { border-color: var(--canon-fg-danger); } -.canon-TextField--input[data-disabled] { +.canon-TextFieldInput[data-disabled] { opacity: .5; cursor: not-allowed; border: 1px solid var(--canon-border-disabled); } -.canon-TextField--input-size-small { +.canon-TextFieldInput[data-size="small"] { height: 2rem; } -.canon-TextField--input-size-medium { +.canon-TextFieldInput[data-size="medium"] { height: 2.5rem; } -.canon-TextField--required { +.canon-TextFieldRequired { color: var(--canon-fg-secondary); font-size: var(--canon-font-size-2); font-weight: var(--canon-font-weight-regular); @@ -573,31 +580,31 @@ } } -.canon-Link--variant-body { +.canon-Link[data-variant="body"] { font-size: var(--canon-font-size-3); line-height: 140%; } -.canon-Link--variant-subtitle { +.canon-Link[data-variant="subtitle"] { font-size: var(--canon-font-size-4); line-height: 140%; } -.canon-Link--variant-caption { +.canon-Link[data-variant="caption"] { font-size: var(--canon-font-size-2); line-height: 140%; } -.canon-Link--variant-label { +.canon-Link[data-variant="label"] { font-size: var(--canon-font-size-1); line-height: 140%; } -.canon-Link--weight-regular { +.canon-Link[data-weight="regular"] { font-weight: var(--canon-font-weight-regular); } -.canon-Link--weight-bold { +.canon-Link[data-weight="bold"] { font-weight: var(--canon-font-weight-bold); } @@ -721,14 +728,14 @@ display: flex; } -.canon-Select--label { +.canon-SelectLabel { font-size: var(--canon-font-size-2); font-weight: var(--canon-font-weight-regular); color: var(--canon-fg-primary); margin-bottom: var(--canon-space-1_5); } -.canon-Select--description { +.canon-SelectDescription { font-size: var(--canon-font-size-2); font-weight: var(--canon-font-weight-regular); color: var(--canon-fg-secondary); @@ -736,7 +743,7 @@ margin: 0; } -.canon-Select--error { +.canon-SelectError { font-size: var(--canon-font-size-2); font-weight: var(--canon-font-weight-regular); color: var(--canon-fg-danger); @@ -744,7 +751,7 @@ margin: 0; } -.canon-Select--trigger { +.canon-SelectTrigger { box-sizing: border-box; border-radius: var(--canon-radius-3); border: 1px solid var(--canon-border); @@ -763,38 +770,38 @@ display: flex; } -.canon-Select--trigger::placeholder { +.canon-SelectTrigger::placeholder { color: var(--canon-fg-secondary); } -.canon-Select--trigger:hover { +.canon-SelectTrigger:hover { border-color: var(--canon-border-hover); } -.canon-Select--trigger:focus-visible { +.canon-SelectTrigger:focus-visible { border-color: var(--canon-border-pressed); outline: 0; } -.canon-Select--trigger[data-invalid] { +.canon-SelectTrigger[data-invalid] { border-color: var(--canon-fg-danger); } -.canon-Select--trigger[data-invalid]:hover, .canon-Select--trigger[data-invalid]:focus-visible { +.canon-SelectTrigger[data-invalid]:hover, .canon-SelectTrigger[data-invalid]:focus-visible { border-width: 2px; } -.canon-Select--trigger[data-disabled] { +.canon-SelectTrigger[data-disabled] { cursor: not-allowed; border-color: var(--canon-border-disabled); color: var(--canon-fg-disabled); } -.canon-Select--trigger-size-small { +.canon-SelectTrigger[data-size="small"] { height: 2rem; } -.canon-Select--trigger-size-medium { +.canon-SelectTrigger[data-size="medium"] { height: 3rem; } @@ -803,11 +810,11 @@ transition: transform .2s; } -.canon-Select--trigger[data-popup-open] .canon-SelectIcon { +.canon-SelectTrigger[data-popup-open] .canon-SelectIcon { transform: rotate(180deg); } -.canon-Select--popup { +.canon-SelectPopup { box-sizing: border-box; max-height: var(--available-height); background-color: var(--canon-bg-surface-1); @@ -822,12 +829,12 @@ box-shadow: 0 4px 12px #0003; } -.canon-Select--popup[data-starting-style], .canon-Select--popup[data-ending-style] { +.canon-SelectPopup[data-starting-style], .canon-SelectPopup[data-ending-style] { opacity: 0; transform: scale(.9); } -.canon-Select--item { +.canon-SelectItem { width: var(--anchor-width); padding-block: var(--canon-space-2); padding-inline: var(--canon-space-4); @@ -845,13 +852,13 @@ position: relative; } -.canon-Select--item[data-highlighted] { +.canon-SelectItem[data-highlighted] { z-index: 0; color: var(--canon-fg-primary); position: relative; } -.canon-Select--item[data-highlighted]:before { +.canon-SelectItem[data-highlighted]:before { content: ""; z-index: -1; background-color: var(--canon-bg-tint-hover); @@ -861,37 +868,37 @@ inset-inline: .25rem; } -.canon-Select--item[data-disabled] { +.canon-SelectItem[data-disabled] { cursor: not-allowed; color: var(--canon-fg-disabled); } -.canon-Select--item-indicator { +.canon-SelectItemIndicator { grid-area: icon; justify-content: center; align-items: center; display: flex; } -.canon-Select--item-text { +.canon-SelectItemText { flex: 1; grid-area: text; } -.canon-Select--required { +.canon-SelectRequired { color: var(--canon-fg-secondary); font-size: var(--canon-font-size-2); font-weight: var(--canon-font-weight-regular); margin-left: var(--canon-space-1); } -.canon-Select--icon { +.canon-SelectIcon { justify-content: center; align-items: center; display: flex; } -.canon-Select--value { +.canon-SelectValue { text-overflow: ellipsis; white-space: nowrap; width: 100%; diff --git a/packages/canon/css/datatable.css b/packages/canon/css/datatable.css new file mode 100644 index 0000000000..edef29f500 --- /dev/null +++ b/packages/canon/css/datatable.css @@ -0,0 +1,23 @@ +.canon-DataTablePagination { + padding-top: var(--canon-space-5); + justify-content: space-between; + align-items: center; + display: flex; +} + +.canon-DataTablePagination--left { + justify-content: space-between; + align-items: center; + display: flex; +} + +.canon-DataTablePagination--right { + justify-content: space-between; + align-items: center; + gap: var(--canon-space-2); + display: flex; +} + +.canon-DataTablePagination--select { + min-width: 10.5rem; +} diff --git a/packages/canon/css/heading.css b/packages/canon/css/heading.css index 615e7a6e8b..f1bea873b4 100644 --- a/packages/canon/css/heading.css +++ b/packages/canon/css/heading.css @@ -6,32 +6,32 @@ line-height: 100%; } -.canon-Heading--variant-display { +.canon-Heading[data-variant="display"] { font-size: var(--canon-font-size-10); font-weight: var(--canon-font-weight-bold); } -.canon-Heading--variant-title1 { +.canon-Heading[data-variant="title1"] { font-size: var(--canon-font-size-9); font-weight: var(--canon-font-weight-bold); } -.canon-Heading--variant-title2 { +.canon-Heading[data-variant="title2"] { font-size: var(--canon-font-size-8); font-weight: var(--canon-font-weight-bold); } -.canon-Heading--variant-title3 { +.canon-Heading[data-variant="title3"] { font-size: var(--canon-font-size-7); font-weight: var(--canon-font-weight-bold); } -.canon-Heading--variant-title4 { +.canon-Heading[data-variant="title4"] { font-size: var(--canon-font-size-title4); font-weight: var(--canon-font-weight-bold); } -.canon-Heading--variant-title5 { +.canon-Heading[data-variant="title5"] { font-size: var(--canon-font-size-5); font-weight: var(--canon-font-weight-bold); } diff --git a/packages/canon/css/iconbutton.css b/packages/canon/css/iconbutton.css index 7853c59770..e867a1848e 100644 --- a/packages/canon/css/iconbutton.css +++ b/packages/canon/css/iconbutton.css @@ -16,7 +16,7 @@ } } -.canon-IconButton--variant-primary { +.canon-IconButton[data-variant="primary"] { background-color: var(--canon-bg-solid); color: var(--canon-fg-solid); transition: background-color .15s, box-shadow .15s; @@ -40,7 +40,7 @@ } } -.canon-IconButton--variant-secondary { +.canon-IconButton[data-variant="secondary"] { background-color: var(--canon-bg-surface-1); box-shadow: inset 0 0 0 1px var(--canon-border); color: var(--canon-fg-primary); @@ -66,24 +66,24 @@ } } -.canon-IconButton--size-medium { +.canon-IconButton[data-size="medium"] { font-size: var(--canon-font-size-4); width: 40px; height: 40px; } -.canon-IconButton--size-small { +.canon-IconButton[data-size="small"] { font-size: var(--canon-font-size-3); width: 32px; height: 32px; } -.canon-IconButton--size-small .canon-IconButton--icon { +.canon-IconButton[data-size="small"] .canon-IconButtonIcon { width: 1rem; height: 1rem; } -.canon-IconButton--size-medium .canon-IconButton--icon { +.canon-IconButton[data-size="medium"] .canon-IconButtonIcon { width: 1.5rem; height: 1.5rem; } diff --git a/packages/canon/css/link.css b/packages/canon/css/link.css index ddc47c5d04..535beb3d9f 100644 --- a/packages/canon/css/link.css +++ b/packages/canon/css/link.css @@ -16,30 +16,30 @@ } } -.canon-Link--variant-body { +.canon-Link[data-variant="body"] { font-size: var(--canon-font-size-3); line-height: 140%; } -.canon-Link--variant-subtitle { +.canon-Link[data-variant="subtitle"] { font-size: var(--canon-font-size-4); line-height: 140%; } -.canon-Link--variant-caption { +.canon-Link[data-variant="caption"] { font-size: var(--canon-font-size-2); line-height: 140%; } -.canon-Link--variant-label { +.canon-Link[data-variant="label"] { font-size: var(--canon-font-size-1); line-height: 140%; } -.canon-Link--weight-regular { +.canon-Link[data-weight="regular"] { font-weight: var(--canon-font-weight-regular); } -.canon-Link--weight-bold { +.canon-Link[data-weight="bold"] { font-weight: var(--canon-font-weight-bold); } diff --git a/packages/canon/css/select.css b/packages/canon/css/select.css index 29494c634a..cf8c05622b 100644 --- a/packages/canon/css/select.css +++ b/packages/canon/css/select.css @@ -5,14 +5,14 @@ display: flex; } -.canon-Select--label { +.canon-SelectLabel { font-size: var(--canon-font-size-2); font-weight: var(--canon-font-weight-regular); color: var(--canon-fg-primary); margin-bottom: var(--canon-space-1_5); } -.canon-Select--description { +.canon-SelectDescription { font-size: var(--canon-font-size-2); font-weight: var(--canon-font-weight-regular); color: var(--canon-fg-secondary); @@ -20,7 +20,7 @@ margin: 0; } -.canon-Select--error { +.canon-SelectError { font-size: var(--canon-font-size-2); font-weight: var(--canon-font-weight-regular); color: var(--canon-fg-danger); @@ -28,7 +28,7 @@ margin: 0; } -.canon-Select--trigger { +.canon-SelectTrigger { box-sizing: border-box; border-radius: var(--canon-radius-3); border: 1px solid var(--canon-border); @@ -47,38 +47,38 @@ display: flex; } -.canon-Select--trigger::placeholder { +.canon-SelectTrigger::placeholder { color: var(--canon-fg-secondary); } -.canon-Select--trigger:hover { +.canon-SelectTrigger:hover { border-color: var(--canon-border-hover); } -.canon-Select--trigger:focus-visible { +.canon-SelectTrigger:focus-visible { border-color: var(--canon-border-pressed); outline: 0; } -.canon-Select--trigger[data-invalid] { +.canon-SelectTrigger[data-invalid] { border-color: var(--canon-fg-danger); } -.canon-Select--trigger[data-invalid]:hover, .canon-Select--trigger[data-invalid]:focus-visible { +.canon-SelectTrigger[data-invalid]:hover, .canon-SelectTrigger[data-invalid]:focus-visible { border-width: 2px; } -.canon-Select--trigger[data-disabled] { +.canon-SelectTrigger[data-disabled] { cursor: not-allowed; border-color: var(--canon-border-disabled); color: var(--canon-fg-disabled); } -.canon-Select--trigger-size-small { +.canon-SelectTrigger[data-size="small"] { height: 2rem; } -.canon-Select--trigger-size-medium { +.canon-SelectTrigger[data-size="medium"] { height: 3rem; } @@ -87,11 +87,11 @@ transition: transform .2s; } -.canon-Select--trigger[data-popup-open] .canon-SelectIcon { +.canon-SelectTrigger[data-popup-open] .canon-SelectIcon { transform: rotate(180deg); } -.canon-Select--popup { +.canon-SelectPopup { box-sizing: border-box; max-height: var(--available-height); background-color: var(--canon-bg-surface-1); @@ -106,12 +106,12 @@ box-shadow: 0 4px 12px #0003; } -.canon-Select--popup[data-starting-style], .canon-Select--popup[data-ending-style] { +.canon-SelectPopup[data-starting-style], .canon-SelectPopup[data-ending-style] { opacity: 0; transform: scale(.9); } -.canon-Select--item { +.canon-SelectItem { width: var(--anchor-width); padding-block: var(--canon-space-2); padding-inline: var(--canon-space-4); @@ -129,13 +129,13 @@ position: relative; } -.canon-Select--item[data-highlighted] { +.canon-SelectItem[data-highlighted] { z-index: 0; color: var(--canon-fg-primary); position: relative; } -.canon-Select--item[data-highlighted]:before { +.canon-SelectItem[data-highlighted]:before { content: ""; z-index: -1; background-color: var(--canon-bg-tint-hover); @@ -145,37 +145,37 @@ inset-inline: .25rem; } -.canon-Select--item[data-disabled] { +.canon-SelectItem[data-disabled] { cursor: not-allowed; color: var(--canon-fg-disabled); } -.canon-Select--item-indicator { +.canon-SelectItemIndicator { grid-area: icon; justify-content: center; align-items: center; display: flex; } -.canon-Select--item-text { +.canon-SelectItemText { flex: 1; grid-area: text; } -.canon-Select--required { +.canon-SelectRequired { color: var(--canon-fg-secondary); font-size: var(--canon-font-size-2); font-weight: var(--canon-font-weight-regular); margin-left: var(--canon-space-1); } -.canon-Select--icon { +.canon-SelectIcon { justify-content: center; align-items: center; display: flex; } -.canon-Select--value { +.canon-SelectValue { text-overflow: ellipsis; white-space: nowrap; width: 100%; diff --git a/packages/canon/css/styles.css b/packages/canon/css/styles.css index ba8fe6dab2..473b8f5d45 100644 --- a/packages/canon/css/styles.css +++ b/packages/canon/css/styles.css @@ -9246,7 +9246,7 @@ } } -.canon-Button--variant-primary { +.canon-Button[data-variant="primary"] { background-color: var(--canon-bg-solid); color: var(--canon-fg-solid); transition: background-color .15s, box-shadow .15s; @@ -9270,7 +9270,7 @@ } } -.canon-Button--variant-secondary { +.canon-Button[data-variant="secondary"] { background-color: var(--canon-bg-surface-1); box-shadow: inset 0 0 0 1px var(--canon-border); color: var(--canon-fg-primary); @@ -9296,28 +9296,58 @@ } } -.canon-Button--size-medium { +.canon-Button[data-size="medium"] { font-size: var(--canon-font-size-4); padding: 0 var(--canon-space-3); height: 40px; } -.canon-Button--size-small { +.canon-Button[data-size="small"] { font-size: var(--canon-font-size-3); padding: 0 var(--canon-space-2); height: 32px; } -.canon-Button--size-small .canon-Button--icon { +.canon-Button[data-size="small"] .canon-ButtonIcon { width: 1rem; height: 1rem; } -.canon-Button--size-medium .canon-Button--icon { +.canon-Button[data-size="medium"] .canon-ButtonIcon { width: 1.5rem; height: 1.5rem; } +.canon-DataTableRoot { + gap: var(--canon-space-3); + flex-direction: column; + display: flex; +} + +.canon-DataTablePagination { + padding-top: var(--canon-space-5); + justify-content: space-between; + align-items: center; + display: flex; +} + +.canon-DataTablePagination--left { + justify-content: space-between; + align-items: center; + display: flex; +} + +.canon-DataTablePagination--right { + justify-content: space-between; + align-items: center; + gap: var(--canon-space-2); + display: flex; +} + +.canon-DataTablePagination--select { + min-width: 10.5rem; +} + .canon-Flex { display: flex; } @@ -9403,117 +9433,94 @@ display: flex; } -.table { - background-color: var(--canon-bg-surface-1); - border-radius: var(--canon-radius-2); +.canon-TableRoot { + caption-side: bottom; + border-collapse: collapse; width: 100%; - padding-bottom: var(--canon-space-0_5); - padding-top: var(--canon-space-0_5); - font-size: var(--canon-font-size-3); - font-family: var(--canon-font-regular); - font-weight: var(--canon-font-weight-regular); - position: relative; - overflow: auto; - - & table { - caption-side: bottom; - width: 100%; - font-size: var(--canon-font-size-sm); - border-collapse: collapse; - } } -.table-head { +.canon-TableHead { text-align: left; padding: var(--canon-space-3); + font-size: var(--canon-font-size-3); + color: var(--canon-fg-primary); } -.table-body { - & tr:last-child { - border-bottom: none; - } +.canon-TableBody { + color: var(--canon-fg-primary); } -.table-row { +.canon-TableRow { + border-bottom: 1px solid var(--canon-border); transition: color .2s ease-in-out; - - &:hover td { - background-color: var(--canon-bg-tint); - } - - & .table-cell:first-child { - border-top-left-radius: var(--canon-radius-2); - border-bottom-left-radius: var(--canon-radius-2); - box-shadow: inset 4px 2px 0 0 var(--canon-bg-surface-1), inset 4px -2px 0 0 var(--canon-bg-surface-1); - padding-left: var(--canon-space-3); - } - - & .table-cell:last-child { - border-top-right-radius: var(--canon-radius-2); - border-bottom-right-radius: var(--canon-radius-2); - box-shadow: inset -4px 2px 0 0 var(--canon-bg-surface-1), inset -4px -2px 0 0 var(--canon-bg-surface-1); - padding-right: var(--canon-space-3); - } } -.table-cell { +.canon-TableBody .canon-TableRow:hover { + background-color: var(--canon-gray-2); +} + +.canon-TableCell { padding: var(--canon-space-3); - background-color: var(--canon-bg); - box-shadow: inset 0px 2px 0 0 var(--canon-bg-surface-1), inset 0px -2px 0 0 var(--canon-bg-surface-1); + font-size: var(--canon-font-size-3); +} + +.canon-TableCellText, .canon-TableCellLink { + gap: var(--canon-space-0_5); + flex-direction: column; + display: flex; } .canon-Text { font-family: var(--canon-font-regular); - color: var(--canon-fg-primary); margin: 0; padding: 0; } -.canon-Text--variant-body { +.canon-Text[data-variant="body"] { font-size: var(--canon-font-size-3); line-height: 140%; } -.canon-Text--variant-subtitle { +.canon-Text[data-variant="subtitle"] { font-size: var(--canon-font-size-4); line-height: 140%; } -.canon-Text--variant-caption { +.canon-Text[data-variant="caption"] { font-size: var(--canon-font-size-2); line-height: 140%; } -.canon-Text--variant-label { +.canon-Text[data-variant="label"] { font-size: var(--canon-font-size-1); line-height: 140%; } -.canon-Text--weight-regular { +.canon-Text[data-weight="regular"] { font-weight: var(--canon-font-weight-regular); } -.canon-Text--weight-bold { +.canon-Text[data-weight="bold"] { font-weight: var(--canon-font-weight-bold); } -.canon-Text--color-primary { +.canon-Text[data-color="primary"] { color: var(--canon-fg-primary); } -.canon-Text--color-secondary { +.canon-Text[data-color="secondary"] { color: var(--canon-fg-secondary); } -.canon-Text--color-danger { +.canon-Text[data-color="danger"] { color: var(--canon-fg-danger); } -.canon-Text--color-warning { +.canon-Text[data-color="warning"] { color: var(--canon-fg-warning); } -.canon-Text--color-success { +.canon-Text[data-color="success"] { color: var(--canon-fg-success); } @@ -9525,32 +9532,32 @@ line-height: 100%; } -.canon-Heading--variant-display { +.canon-Heading[data-variant="display"] { font-size: var(--canon-font-size-10); font-weight: var(--canon-font-weight-bold); } -.canon-Heading--variant-title1 { +.canon-Heading[data-variant="title1"] { font-size: var(--canon-font-size-9); font-weight: var(--canon-font-weight-bold); } -.canon-Heading--variant-title2 { +.canon-Heading[data-variant="title2"] { font-size: var(--canon-font-size-8); font-weight: var(--canon-font-weight-bold); } -.canon-Heading--variant-title3 { +.canon-Heading[data-variant="title3"] { font-size: var(--canon-font-size-7); font-weight: var(--canon-font-weight-bold); } -.canon-Heading--variant-title4 { +.canon-Heading[data-variant="title4"] { font-size: var(--canon-font-size-title4); font-weight: var(--canon-font-weight-bold); } -.canon-Heading--variant-title5 { +.canon-Heading[data-variant="title5"] { font-size: var(--canon-font-size-5); font-weight: var(--canon-font-weight-bold); } @@ -9573,7 +9580,7 @@ } } -.canon-IconButton--variant-primary { +.canon-IconButton[data-variant="primary"] { background-color: var(--canon-bg-solid); color: var(--canon-fg-solid); transition: background-color .15s, box-shadow .15s; @@ -9597,7 +9604,7 @@ } } -.canon-IconButton--variant-secondary { +.canon-IconButton[data-variant="secondary"] { background-color: var(--canon-bg-surface-1); box-shadow: inset 0 0 0 1px var(--canon-border); color: var(--canon-fg-primary); @@ -9623,24 +9630,24 @@ } } -.canon-IconButton--size-medium { +.canon-IconButton[data-size="medium"] { font-size: var(--canon-font-size-4); width: 40px; height: 40px; } -.canon-IconButton--size-small { +.canon-IconButton[data-size="small"] { font-size: var(--canon-font-size-3); width: 32px; height: 32px; } -.canon-IconButton--size-small .canon-IconButton--icon { +.canon-IconButton[data-size="small"] .canon-IconButtonIcon { width: 1rem; height: 1rem; } -.canon-IconButton--size-medium .canon-IconButton--icon { +.canon-IconButton[data-size="medium"] .canon-IconButtonIcon { width: 1.5rem; height: 1.5rem; } @@ -9652,14 +9659,14 @@ display: flex; } -.canon-TextField--label { +.canon-TextFieldLabel { font-size: var(--canon-font-size-2); font-weight: var(--canon-font-weight-regular); color: var(--canon-fg-primary); margin-bottom: var(--canon-space-1_5); } -.canon-TextField--description { +.canon-TextFieldDescription { font-size: var(--canon-font-size-2); font-weight: var(--canon-font-weight-regular); color: var(--canon-fg-secondary); @@ -9667,7 +9674,7 @@ margin: 0; } -.canon-TextField--error { +.canon-TextFieldError { font-size: var(--canon-font-size-2); font-weight: var(--canon-font-weight-regular); color: var(--canon-fg-danger); @@ -9675,7 +9682,7 @@ margin: 0; } -.canon-TextField--input { +.canon-TextFieldInput { border-radius: var(--canon-radius-3); border: 1px solid var(--canon-border); padding: 0 var(--canon-space-4); @@ -9688,39 +9695,39 @@ transition: border-color .2s ease-in-out, outline-color .2s ease-in-out; } -.canon-TextField--input::placeholder { +.canon-TextFieldInput::placeholder { color: var(--canon-fg-secondary); } -.canon-TextField--input:hover { +.canon-TextFieldInput:hover { border-color: var(--canon-border-hover); } -.canon-TextField--input:focus-visible { +.canon-TextFieldInput:focus-visible { outline-color: var(--canon-border-pressed); border-color: var(--canon-border-pressed); outline-width: 0; } -.canon-TextField--input[data-invalid] { +.canon-TextFieldInput[data-invalid] { border-color: var(--canon-fg-danger); } -.canon-TextField--input[data-disabled] { +.canon-TextFieldInput[data-disabled] { opacity: .5; cursor: not-allowed; border: 1px solid var(--canon-border-disabled); } -.canon-TextField--input-size-small { +.canon-TextFieldInput[data-size="small"] { height: 2rem; } -.canon-TextField--input-size-medium { +.canon-TextFieldInput[data-size="medium"] { height: 2.5rem; } -.canon-TextField--required { +.canon-TextFieldRequired { color: var(--canon-fg-secondary); font-size: var(--canon-font-size-2); font-weight: var(--canon-font-weight-regular); @@ -9797,31 +9804,31 @@ } } -.canon-Link--variant-body { +.canon-Link[data-variant="body"] { font-size: var(--canon-font-size-3); line-height: 140%; } -.canon-Link--variant-subtitle { +.canon-Link[data-variant="subtitle"] { font-size: var(--canon-font-size-4); line-height: 140%; } -.canon-Link--variant-caption { +.canon-Link[data-variant="caption"] { font-size: var(--canon-font-size-2); line-height: 140%; } -.canon-Link--variant-label { +.canon-Link[data-variant="label"] { font-size: var(--canon-font-size-1); line-height: 140%; } -.canon-Link--weight-regular { +.canon-Link[data-weight="regular"] { font-weight: var(--canon-font-weight-regular); } -.canon-Link--weight-bold { +.canon-Link[data-weight="bold"] { font-weight: var(--canon-font-weight-bold); } @@ -9945,14 +9952,14 @@ display: flex; } -.canon-Select--label { +.canon-SelectLabel { font-size: var(--canon-font-size-2); font-weight: var(--canon-font-weight-regular); color: var(--canon-fg-primary); margin-bottom: var(--canon-space-1_5); } -.canon-Select--description { +.canon-SelectDescription { font-size: var(--canon-font-size-2); font-weight: var(--canon-font-weight-regular); color: var(--canon-fg-secondary); @@ -9960,7 +9967,7 @@ margin: 0; } -.canon-Select--error { +.canon-SelectError { font-size: var(--canon-font-size-2); font-weight: var(--canon-font-weight-regular); color: var(--canon-fg-danger); @@ -9968,7 +9975,7 @@ margin: 0; } -.canon-Select--trigger { +.canon-SelectTrigger { box-sizing: border-box; border-radius: var(--canon-radius-3); border: 1px solid var(--canon-border); @@ -9987,38 +9994,38 @@ display: flex; } -.canon-Select--trigger::placeholder { +.canon-SelectTrigger::placeholder { color: var(--canon-fg-secondary); } -.canon-Select--trigger:hover { +.canon-SelectTrigger:hover { border-color: var(--canon-border-hover); } -.canon-Select--trigger:focus-visible { +.canon-SelectTrigger:focus-visible { border-color: var(--canon-border-pressed); outline: 0; } -.canon-Select--trigger[data-invalid] { +.canon-SelectTrigger[data-invalid] { border-color: var(--canon-fg-danger); } -.canon-Select--trigger[data-invalid]:hover, .canon-Select--trigger[data-invalid]:focus-visible { +.canon-SelectTrigger[data-invalid]:hover, .canon-SelectTrigger[data-invalid]:focus-visible { border-width: 2px; } -.canon-Select--trigger[data-disabled] { +.canon-SelectTrigger[data-disabled] { cursor: not-allowed; border-color: var(--canon-border-disabled); color: var(--canon-fg-disabled); } -.canon-Select--trigger-size-small { +.canon-SelectTrigger[data-size="small"] { height: 2rem; } -.canon-Select--trigger-size-medium { +.canon-SelectTrigger[data-size="medium"] { height: 3rem; } @@ -10027,11 +10034,11 @@ transition: transform .2s; } -.canon-Select--trigger[data-popup-open] .canon-SelectIcon { +.canon-SelectTrigger[data-popup-open] .canon-SelectIcon { transform: rotate(180deg); } -.canon-Select--popup { +.canon-SelectPopup { box-sizing: border-box; max-height: var(--available-height); background-color: var(--canon-bg-surface-1); @@ -10046,12 +10053,12 @@ box-shadow: 0 4px 12px #0003; } -.canon-Select--popup[data-starting-style], .canon-Select--popup[data-ending-style] { +.canon-SelectPopup[data-starting-style], .canon-SelectPopup[data-ending-style] { opacity: 0; transform: scale(.9); } -.canon-Select--item { +.canon-SelectItem { width: var(--anchor-width); padding-block: var(--canon-space-2); padding-inline: var(--canon-space-4); @@ -10069,13 +10076,13 @@ position: relative; } -.canon-Select--item[data-highlighted] { +.canon-SelectItem[data-highlighted] { z-index: 0; color: var(--canon-fg-primary); position: relative; } -.canon-Select--item[data-highlighted]:before { +.canon-SelectItem[data-highlighted]:before { content: ""; z-index: -1; background-color: var(--canon-bg-tint-hover); @@ -10085,37 +10092,37 @@ inset-inline: .25rem; } -.canon-Select--item[data-disabled] { +.canon-SelectItem[data-disabled] { cursor: not-allowed; color: var(--canon-fg-disabled); } -.canon-Select--item-indicator { +.canon-SelectItemIndicator { grid-area: icon; justify-content: center; align-items: center; display: flex; } -.canon-Select--item-text { +.canon-SelectItemText { flex: 1; grid-area: text; } -.canon-Select--required { +.canon-SelectRequired { color: var(--canon-fg-secondary); font-size: var(--canon-font-size-2); font-weight: var(--canon-font-weight-regular); margin-left: var(--canon-space-1); } -.canon-Select--icon { +.canon-SelectIcon { justify-content: center; align-items: center; display: flex; } -.canon-Select--value { +.canon-SelectValue { text-overflow: ellipsis; white-space: nowrap; width: 100%; diff --git a/packages/canon/css/table.css b/packages/canon/css/table.css index a8e904d7ce..f14ee3759e 100644 --- a/packages/canon/css/table.css +++ b/packages/canon/css/table.css @@ -1,58 +1,4 @@ -.table { - background-color: var(--canon-bg-surface-1); - border-radius: var(--canon-radius-2); - width: 100%; - padding-bottom: var(--canon-space-0_5); - padding-top: var(--canon-space-0_5); +.canon-TableCell { + padding: var(--canon-space-3); font-size: var(--canon-font-size-3); - font-family: var(--canon-font-regular); - font-weight: var(--canon-font-weight-regular); - position: relative; - overflow: auto; - - & table { - caption-side: bottom; - width: 100%; - font-size: var(--canon-font-size-sm); - border-collapse: collapse; - } -} - -.table-head { - text-align: left; - padding: var(--canon-space-3); -} - -.table-body { - & tr:last-child { - border-bottom: none; - } -} - -.table-row { - transition: color .2s ease-in-out; - - &:hover td { - background-color: var(--canon-bg-tint); - } - - & .table-cell:first-child { - border-top-left-radius: var(--canon-radius-2); - border-bottom-left-radius: var(--canon-radius-2); - box-shadow: inset 4px 2px 0 0 var(--canon-bg-surface-1), inset 4px -2px 0 0 var(--canon-bg-surface-1); - padding-left: var(--canon-space-3); - } - - & .table-cell:last-child { - border-top-right-radius: var(--canon-radius-2); - border-bottom-right-radius: var(--canon-radius-2); - box-shadow: inset -4px 2px 0 0 var(--canon-bg-surface-1), inset -4px -2px 0 0 var(--canon-bg-surface-1); - padding-right: var(--canon-space-3); - } -} - -.table-cell { - padding: var(--canon-space-3); - background-color: var(--canon-bg); - box-shadow: inset 0px 2px 0 0 var(--canon-bg-surface-1), inset 0px -2px 0 0 var(--canon-bg-surface-1); } diff --git a/packages/canon/css/text.css b/packages/canon/css/text.css index faa16c7f40..523574f779 100644 --- a/packages/canon/css/text.css +++ b/packages/canon/css/text.css @@ -1,54 +1,53 @@ .canon-Text { font-family: var(--canon-font-regular); - color: var(--canon-fg-primary); margin: 0; padding: 0; } -.canon-Text--variant-body { +.canon-Text[data-variant="body"] { font-size: var(--canon-font-size-3); line-height: 140%; } -.canon-Text--variant-subtitle { +.canon-Text[data-variant="subtitle"] { font-size: var(--canon-font-size-4); line-height: 140%; } -.canon-Text--variant-caption { +.canon-Text[data-variant="caption"] { font-size: var(--canon-font-size-2); line-height: 140%; } -.canon-Text--variant-label { +.canon-Text[data-variant="label"] { font-size: var(--canon-font-size-1); line-height: 140%; } -.canon-Text--weight-regular { +.canon-Text[data-weight="regular"] { font-weight: var(--canon-font-weight-regular); } -.canon-Text--weight-bold { +.canon-Text[data-weight="bold"] { font-weight: var(--canon-font-weight-bold); } -.canon-Text--color-primary { +.canon-Text[data-color="primary"] { color: var(--canon-fg-primary); } -.canon-Text--color-secondary { +.canon-Text[data-color="secondary"] { color: var(--canon-fg-secondary); } -.canon-Text--color-danger { +.canon-Text[data-color="danger"] { color: var(--canon-fg-danger); } -.canon-Text--color-warning { +.canon-Text[data-color="warning"] { color: var(--canon-fg-warning); } -.canon-Text--color-success { +.canon-Text[data-color="success"] { color: var(--canon-fg-success); } diff --git a/packages/canon/css/textfield.css b/packages/canon/css/textfield.css index a542690580..bf21b3bd74 100644 --- a/packages/canon/css/textfield.css +++ b/packages/canon/css/textfield.css @@ -5,14 +5,14 @@ display: flex; } -.canon-TextField--label { +.canon-TextFieldLabel { font-size: var(--canon-font-size-2); font-weight: var(--canon-font-weight-regular); color: var(--canon-fg-primary); margin-bottom: var(--canon-space-1_5); } -.canon-TextField--description { +.canon-TextFieldDescription { font-size: var(--canon-font-size-2); font-weight: var(--canon-font-weight-regular); color: var(--canon-fg-secondary); @@ -20,7 +20,7 @@ margin: 0; } -.canon-TextField--error { +.canon-TextFieldError { font-size: var(--canon-font-size-2); font-weight: var(--canon-font-weight-regular); color: var(--canon-fg-danger); @@ -28,7 +28,7 @@ margin: 0; } -.canon-TextField--input { +.canon-TextFieldInput { border-radius: var(--canon-radius-3); border: 1px solid var(--canon-border); padding: 0 var(--canon-space-4); @@ -41,39 +41,39 @@ transition: border-color .2s ease-in-out, outline-color .2s ease-in-out; } -.canon-TextField--input::placeholder { +.canon-TextFieldInput::placeholder { color: var(--canon-fg-secondary); } -.canon-TextField--input:hover { +.canon-TextFieldInput:hover { border-color: var(--canon-border-hover); } -.canon-TextField--input:focus-visible { +.canon-TextFieldInput:focus-visible { outline-color: var(--canon-border-pressed); border-color: var(--canon-border-pressed); outline-width: 0; } -.canon-TextField--input[data-invalid] { +.canon-TextFieldInput[data-invalid] { border-color: var(--canon-fg-danger); } -.canon-TextField--input[data-disabled] { +.canon-TextFieldInput[data-disabled] { opacity: .5; cursor: not-allowed; border: 1px solid var(--canon-border-disabled); } -.canon-TextField--input-size-small { +.canon-TextFieldInput[data-size="small"] { height: 2rem; } -.canon-TextField--input-size-medium { +.canon-TextFieldInput[data-size="medium"] { height: 2.5rem; } -.canon-TextField--required { +.canon-TextFieldRequired { color: var(--canon-fg-secondary); font-size: var(--canon-font-size-2); font-weight: var(--canon-font-weight-regular); diff --git a/packages/canon/package.json b/packages/canon/package.json index 5a369615b6..ce188f1fb0 100644 --- a/packages/canon/package.json +++ b/packages/canon/package.json @@ -56,6 +56,7 @@ "@storybook/react": "^8.6.8", "@storybook/react-webpack5": "^8.6.8", "@storybook/test": "^8.6.8", + "@tanstack/react-table": "^8.21.2", "@types/react": "^18.0.0", "@types/react-dom": "^18.0.0", "chalk": "^5.4.1", diff --git a/packages/canon/report.api.md b/packages/canon/report.api.md index 0a16c2abcf..1e65a51dca 100644 --- a/packages/canon/report.api.md +++ b/packages/canon/report.api.md @@ -17,6 +17,7 @@ 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 { Table as Table_2 } from '@tanstack/react-table'; import { TdHTMLAttributes } from 'react'; import { ThHTMLAttributes } from 'react'; import { Tooltip as Tooltip_2 } from '@base-ui-components/react/tooltip'; @@ -219,6 +220,65 @@ export interface ContainerProps { style?: React.CSSProperties; } +// @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 + >; + 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'; @@ -1028,43 +1088,61 @@ export type StylingPropDef = { parseValue?: (value: string) => string | undefined; }; -// @public (undocumented) -export const Table: ForwardRefExoticComponent< - HTMLAttributes & RefAttributes ->; +// @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 + >; + Caption: ForwardRefExoticComponent< + HTMLAttributes & + RefAttributes + >; +}; // @public (undocumented) -export const TableBody: ForwardRefExoticComponent< - HTMLAttributes & - RefAttributes ->; +export interface TableCellLinkProps + extends React.TdHTMLAttributes { + // (undocumented) + description?: string; + // (undocumented) + href: string; + // (undocumented) + render?: useRender.ComponentProps<'a'>['render']; + // (undocumented) + title: string; +} // @public (undocumented) -export const TableCell: ForwardRefExoticComponent< - TdHTMLAttributes & RefAttributes ->; - -// @public (undocumented) -export const TableFooter: ForwardRefExoticComponent< - HTMLAttributes & - RefAttributes ->; - -// @public (undocumented) -export const TableHead: ForwardRefExoticComponent< - ThHTMLAttributes & RefAttributes ->; - -// @public (undocumented) -export const TableHeader: ForwardRefExoticComponent< - HTMLAttributes & - RefAttributes ->; - -// @public (undocumented) -export const TableRow: ForwardRefExoticComponent< - HTMLAttributes & RefAttributes ->; +export interface TableCellTextProps + extends React.TdHTMLAttributes { + // (undocumented) + description?: string; + // (undocumented) + title: string; +} // @public (undocumented) const Text_2: ForwardRefExoticComponent< @@ -1143,6 +1221,13 @@ export const Tooltip: { >; }; +// @public (undocumented) +export const useBreakpoint: () => { + breakpoint: Breakpoint; + up: (key: Breakpoint) => boolean; + down: (key: Breakpoint) => boolean; +}; + // @public (undocumented) export const useIcons: () => IconContextProps; diff --git a/packages/canon/src/components/Button/Button.tsx b/packages/canon/src/components/Button/Button.tsx index 179c35323a..ca652013b4 100644 --- a/packages/canon/src/components/Button/Button.tsx +++ b/packages/canon/src/components/Button/Button.tsx @@ -44,18 +44,15 @@ export const Button = forwardRef( ); }, diff --git a/packages/canon/src/components/Button/styles.css b/packages/canon/src/components/Button/styles.css index b5d6e1dca0..785fbf3b88 100644 --- a/packages/canon/src/components/Button/styles.css +++ b/packages/canon/src/components/Button/styles.css @@ -32,7 +32,7 @@ } } -.canon-Button--variant-primary { +.canon-Button[data-variant='primary'] { background-color: var(--canon-bg-solid); color: var(--canon-fg-solid); transition: background-color 150ms ease, box-shadow 150ms ease; @@ -56,7 +56,7 @@ } } -.canon-Button--variant-secondary { +.canon-Button[data-variant='secondary'] { background-color: var(--canon-bg-surface-1); box-shadow: inset 0 0 0 1px var(--canon-border); color: var(--canon-fg-primary); @@ -82,24 +82,24 @@ } } -.canon-Button--size-medium { +.canon-Button[data-size='medium'] { font-size: var(--canon-font-size-4); padding: 0 var(--canon-space-3); height: 40px; } -.canon-Button--size-small { +.canon-Button[data-size='small'] { font-size: var(--canon-font-size-3); padding: 0 var(--canon-space-2); height: 32px; } -.canon-Button--size-small .canon-Button--icon { +.canon-Button[data-size='small'] .canon-ButtonIcon { width: 1rem; height: 1rem; } -.canon-Button--size-medium .canon-Button--icon { +.canon-Button[data-size='medium'] .canon-ButtonIcon { width: 1.5rem; height: 1.5rem; } diff --git a/packages/canon/src/components/DataTable/DataTable.stories.tsx b/packages/canon/src/components/DataTable/DataTable.stories.tsx new file mode 100644 index 0000000000..266aedc533 --- /dev/null +++ b/packages/canon/src/components/DataTable/DataTable.stories.tsx @@ -0,0 +1,145 @@ +/* + * Copyright 2024 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import type { Meta, StoryObj } from '@storybook/react'; +import { DataTable } from '.'; +import { data, DataProps } from './mocked-components'; +import { columns } from './mocked-columns'; +import { + flexRender, + getCoreRowModel, + getPaginationRowModel, + useReactTable, + PaginationState, +} from '@tanstack/react-table'; +import { useState } from 'react'; + +const meta = { + title: 'Components/DataTable', +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Uncontrolled: Story = { + render: () => { + const table = useReactTable({ + data, + columns, + getCoreRowModel: getCoreRowModel(), + getPaginationRowModel: getPaginationRowModel(), + }); + + return ( + + + + + ); + }, +}; + +export const Controlled: Story = { + render: () => { + const [pagination, setPagination] = useState({ + pageIndex: 4, + pageSize: 5, + }); + + const table = useReactTable({ + data, + columns, + getCoreRowModel: getCoreRowModel(), + getPaginationRowModel: getPaginationRowModel(), + state: { + pagination, + }, + onPaginationChange: setPagination, + }); + + return ( + + + + + ); + }, +}; + +export const WithCustomTable: Story = { + render: () => { + const table = useReactTable({ + data, + columns, + getCoreRowModel: getCoreRowModel(), + getPaginationRowModel: getPaginationRowModel(), + }); + + return ( + + + + {table.getHeaderGroups().map(headerGroup => ( + + {headerGroup.headers.map(header => { + return ( + + {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext(), + )} + + ); + })} + + ))} + + + {table.getRowModel().rows?.length ? ( + table.getRowModel().rows.map(row => ( + + {row.getVisibleCells().map(cell => ( + + {flexRender( + cell.column.columnDef.cell, + cell.getContext(), + )} + + ))} + + )) + ) : ( + + + No results. + + + )} + + + + + ); + }, +}; diff --git a/packages/canon/src/components/DataTable/DataTable.tsx b/packages/canon/src/components/DataTable/DataTable.tsx new file mode 100644 index 0000000000..8be9ae174e --- /dev/null +++ b/packages/canon/src/components/DataTable/DataTable.tsx @@ -0,0 +1,50 @@ +/* + * Copyright 2024 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { forwardRef } from 'react'; +import { Table } from '../Table'; +import { DataTableRoot } from './Root/DataTableRoot'; +import { DataTablePagination } from './Pagination/DataTablePagination'; +import { Table as TanstackTable } from '@tanstack/react-table'; +import { DataTableTable } from './Table/DataTableTable'; + +const TableRoot = forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ); +TableRoot.displayName = Table.Root.displayName; + +/** + * DataTable component for displaying tabular data with pagination + * @public + */ +export const DataTable = { + Root: DataTableRoot as ( + props: { + table: TanstackTable; + } & React.HTMLAttributes, + ) => JSX.Element, + Pagination: DataTablePagination, + Table: DataTableTable, + TableRoot: TableRoot, + TableHeader: Table.Header, + TableBody: Table.Body, + TableRow: Table.Row, + TableCell: Table.Cell, + TableCellText: Table.CellText, + TableCellLink: Table.CellLink, + TableHead: Table.Head, +}; diff --git a/packages/canon/src/components/DataTable/Pagination/DataTablePagination.stories.tsx b/packages/canon/src/components/DataTable/Pagination/DataTablePagination.stories.tsx new file mode 100644 index 0000000000..a2f931aed6 --- /dev/null +++ b/packages/canon/src/components/DataTable/Pagination/DataTablePagination.stories.tsx @@ -0,0 +1,55 @@ +/* + * Copyright 2024 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import type { Meta, StoryObj } from '@storybook/react'; +import { DataTablePagination } from './DataTablePagination'; +import { + getCoreRowModel, + getFilteredRowModel, + getPaginationRowModel, + getSortedRowModel, + useReactTable, +} from '@tanstack/react-table'; +import { data, DataProps } from '../mocked-components'; +import { columns } from '../mocked-columns'; +import { DataTable } from '../DataTable'; + +const meta = { + title: 'Components/DataTable/Pagination', + component: DataTablePagination, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: () => { + const table = useReactTable({ + data, + columns, + getCoreRowModel: getCoreRowModel(), + getPaginationRowModel: getPaginationRowModel(), + getSortedRowModel: getSortedRowModel(), + getFilteredRowModel: getFilteredRowModel(), + }); + + return ( + + + + ); + }, +}; diff --git a/packages/canon/src/components/DataTable/Pagination/DataTablePagination.styles.css b/packages/canon/src/components/DataTable/Pagination/DataTablePagination.styles.css new file mode 100644 index 0000000000..02d12e73bb --- /dev/null +++ b/packages/canon/src/components/DataTable/Pagination/DataTablePagination.styles.css @@ -0,0 +1,23 @@ +.canon-DataTablePagination { + display: flex; + align-items: center; + justify-content: space-between; + padding-top: var(--canon-space-5); +} + +.canon-DataTablePagination--left { + display: flex; + align-items: center; + justify-content: space-between; +} + +.canon-DataTablePagination--right { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--canon-space-2); +} + +.canon-DataTablePagination--select { + min-width: 10.5rem; +} diff --git a/packages/canon/src/components/DataTable/Pagination/DataTablePagination.tsx b/packages/canon/src/components/DataTable/Pagination/DataTablePagination.tsx new file mode 100644 index 0000000000..c1c73ee13c --- /dev/null +++ b/packages/canon/src/components/DataTable/Pagination/DataTablePagination.tsx @@ -0,0 +1,90 @@ +/* + * Copyright 2024 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { forwardRef } from 'react'; +import { Text } from '../../Text'; +import { DataTablePaginationProps } from './types'; +import { IconButton } from '../../IconButton'; +import clsx from 'clsx'; +import { Select } from '../../Select'; +import { useDataTable } from '../Root/DataTableRoot'; + +/** @public */ +const DataTablePagination = forwardRef( + ( + props: DataTablePaginationProps, + ref: React.ForwardedRef, + ) => { + const { className, ...rest } = props; + const { table } = useDataTable(); + const pageIndex = table?.getState().pagination.pageIndex; + const pageSize = table?.getState().pagination.pageSize; + + return ( +
+
+ {!table.options.manualPagination && ( + ( {...rest} /> {description && ( -

+

{description}

)} {error && ( - )} diff --git a/packages/canon/src/css/components.css b/packages/canon/src/css/components.css index 2480baab14..7dee4afb97 100644 --- a/packages/canon/src/css/components.css +++ b/packages/canon/src/css/components.css @@ -16,12 +16,17 @@ @import '../components/Box/styles.css'; @import '../components/Button/styles.css'; +@import '../components/DataTable/Root/DataTableRoot.styles.css'; +@import '../components/DataTable/Pagination/DataTablePagination.styles.css'; @import '../components/Flex/styles.css'; @import '../components/Grid/styles.css'; @import '../components/Container/styles.css'; @import '../components/Icon/styles.css'; @import '../components/Checkbox/styles.css'; @import '../components/Table/styles.css'; +@import '../components/Table/TableCell/TableCell.styles.css'; +@import '../components/Table/TableCellText/TableCellText.styles.css'; +@import '../components/Table/TableCellLink/TableCellLink.styles.css'; @import '../components/Text/styles.css'; @import '../components/Heading/styles.css'; @import '../components/IconButton/styles.css'; diff --git a/packages/canon/src/hooks/useBreakpoint.ts b/packages/canon/src/hooks/useBreakpoint.ts index a6dacde525..ac2d0567be 100644 --- a/packages/canon/src/hooks/useBreakpoint.ts +++ b/packages/canon/src/hooks/useBreakpoint.ts @@ -25,18 +25,40 @@ export const breakpoints: { name: string; id: Breakpoint; value: number }[] = [ { name: 'Extra Large', id: 'xl', value: 1536 }, ]; -export const useBreakpoint = (): Breakpoint => { - // TODO: Perhaps refactor for useMediaQuery to accept an array of queries +/** @public */ +export const useBreakpoint = () => { + // Call all media queries at the top level const matches = breakpoints.map(breakpoint => { - const match = useMediaQuery(`(min-width: ${breakpoint.value}px)`); - return match; + return useMediaQuery(`(min-width: ${breakpoint.value}px)`); }); + // Pre-calculate all the up/down values we need + const upMatches = new Map( + breakpoints.map(bp => [bp.id, useMediaQuery(`(min-width: ${bp.value}px)`)]), + ); + + const downMatches = new Map( + breakpoints.map(bp => [ + bp.id, + useMediaQuery(`(max-width: ${bp.value - 1}px)`), + ]), + ); + + let breakpoint: Breakpoint = breakpoints[0].id; for (let i = matches.length - 1; i >= 0; i--) { if (matches[i]) { - return breakpoints[i].id; + breakpoint = breakpoints[i].id; + break; } } - return breakpoints[0].id; + return { + breakpoint, + up: (key: Breakpoint): boolean => { + return upMatches.get(key) ?? false; + }, + down: (key: Breakpoint): boolean => { + return downMatches.get(key) ?? false; + }, + }; }; diff --git a/packages/canon/src/hooks/useResponsiveValue.ts b/packages/canon/src/hooks/useResponsiveValue.ts index 3ef5b99d47..206306566f 100644 --- a/packages/canon/src/hooks/useResponsiveValue.ts +++ b/packages/canon/src/hooks/useResponsiveValue.ts @@ -20,12 +20,10 @@ import { useBreakpoint, breakpoints } from './useBreakpoint'; type ResponsiveValue = string | Partial>; export const useResponsiveValue = (value: ResponsiveValue) => { - const currentBreakpoint = useBreakpoint(); + const { breakpoint } = useBreakpoint(); if (typeof value === 'object') { - const index = breakpoints.findIndex( - breakpoint => breakpoint.id === currentBreakpoint, - ); + const index = breakpoints.findIndex(b => b.id === breakpoint); for (let i = index; i >= 0; i--) { if (value[breakpoints[i].id]) { diff --git a/packages/canon/src/index.ts b/packages/canon/src/index.ts index 815e153c19..9e9e401655 100644 --- a/packages/canon/src/index.ts +++ b/packages/canon/src/index.ts @@ -33,6 +33,7 @@ export * from './components/Heading'; // UI components export * from './components/Button'; +export * from './components/DataTable'; export * from './components/Icon'; export * from './components/IconButton'; export * from './components/Checkbox'; @@ -47,3 +48,6 @@ export * from './components/Select'; // Types export * from './types'; export * from './props'; + +// Hooks +export { useBreakpoint } from './hooks/useBreakpoint'; diff --git a/packages/cli/cli-report.backstage-cli-alpha.md b/packages/cli/cli-report.backstage-cli-alpha.md index b52d40c809..917a915fe5 100644 --- a/packages/cli/cli-report.backstage-cli-alpha.md +++ b/packages/cli/cli-report.backstage-cli-alpha.md @@ -18,9 +18,11 @@ Commands: config:docs config:print config:schema + create-github-app help [command] info migrate [command] + new package [command] repo [command] versions:bump @@ -132,6 +134,15 @@ Options: --version ``` +### `backstage-cli-alpha create-github-app` + +``` +Usage: program [options] + +Options: + -h, --help +``` + ### `backstage-cli-alpha info` ``` @@ -204,6 +215,23 @@ Options: -h, --help ``` +### `backstage-cli-alpha new` + +``` +Usage: program [options] + +Options: + --baseVersion + --license + --no-private + --npm-registry + --option = + --scope + --select + --skip-install + -h, --help +``` + ### `backstage-cli-alpha package` ``` diff --git a/packages/cli/src/alpha.ts b/packages/cli/src/alpha.ts index f1ccb65a53..3324ed8d75 100644 --- a/packages/cli/src/alpha.ts +++ b/packages/cli/src/alpha.ts @@ -25,6 +25,8 @@ import chalk from 'chalk'; ), ); const initializer = new CliInitializer(); + initializer.add(import('./modules/new/alpha')); + initializer.add(import('./modules/create-github-app/alpha')); initializer.add(import('./modules/info/alpha')); initializer.add(import('./modules/config/alpha')); initializer.add(import('./modules/build/alpha')); diff --git a/packages/cli/src/commands/index.ts b/packages/cli/src/commands/index.ts index 6dd2017a71..8483fd79c0 100644 --- a/packages/cli/src/commands/index.ts +++ b/packages/cli/src/commands/index.ts @@ -15,7 +15,6 @@ */ import { Command } from 'commander'; -import { lazy } from '../lib/lazy'; import { registerCommands as registerConfigCommands } from '../modules/config'; import { registerPackageCommands as registerPackageBuildCommands, @@ -40,6 +39,9 @@ import { registerPackageCommands as registerMaintenancePackageCommands, registerRepoCommands as registerMaintenanceRepoCommands, } from '../modules/maintenance'; +import { removed } from '../lib/removed'; +import { registerCommands as registerNewCommands } from '../modules/new'; +import { registerCommands as registerCreateGithubAppCommands } from '../modules/create-github-app'; export function registerRepoCommand(program: Command) { const command = program @@ -66,62 +68,16 @@ export function registerScriptCommand(program: Command) { } export function registerCommands(program: Command) { - program - .command('new') - .storeOptionsAsProperties(false) - .description( - 'Open up an interactive guide to creating new things in your app', - ) - .option( - '--select ', - 'Select the thing you want to be creating upfront', - ) - .option( - '--option =', - 'Pre-fill options for the creation process', - (opt, arr: string[]) => [...arr, opt], - [], - ) - .option( - '--skip-install', - `Skips running 'yarn install' and 'yarn lint --fix'`, - ) - .option('--scope ', 'The scope to use for new packages') - .option( - '--npm-registry ', - 'The package registry to use for new packages', - ) - .option( - '--baseVersion ', - 'The version to use for any new packages (default: 0.1.0)', - ) - .option( - '--license ', - 'The license to use for any new packages (default: Apache-2.0)', - ) - .option('--no-private', 'Do not mark new packages as private') - .action(lazy(() => import('./new/new'), 'default')); - registerConfigCommands(program); registerRepoCommand(program); registerScriptCommand(program); registerMigrateCommand(program); registerBuildCommands(program); registerInfoCommands(program); - program - .command('create-github-app ') - .description('Create new GitHub App in your organization.') - .action(lazy(() => import('./create-github-app'), 'default')); - + registerNewCommands(program); + registerCreateGithubAppCommands(program); // Notifications for removed commands - program - .command('create') - .allowUnknownOption(true) - .action(removed("use 'backstage-cli new' instead")); - program - .command('create-plugin') - .allowUnknownOption(true) - .action(removed("use 'backstage-cli new' instead")); + program .command('plugin:diff') .allowUnknownOption(true) @@ -145,14 +101,3 @@ export function registerCommands(program: Command) { program.command('install').allowUnknownOption(true).action(removed()); program.command('onboard').allowUnknownOption(true).action(removed()); } - -function removed(message?: string) { - return () => { - console.error( - message - ? `This command has been removed, ${message}` - : 'This command has been removed', - ); - process.exit(1); - }; -} diff --git a/packages/cli/src/lib/removed.ts b/packages/cli/src/lib/removed.ts new file mode 100644 index 0000000000..063882be18 --- /dev/null +++ b/packages/cli/src/lib/removed.ts @@ -0,0 +1,25 @@ +/* + * Copyright 2025 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +export function removed(message?: string) { + return () => { + console.error( + message + ? `This command has been removed, ${message}` + : 'This command has been removed', + ); + process.exit(1); + }; +} diff --git a/packages/cli/src/modules/create-github-app/alpha.ts b/packages/cli/src/modules/create-github-app/alpha.ts new file mode 100644 index 0000000000..da1e04aaac --- /dev/null +++ b/packages/cli/src/modules/create-github-app/alpha.ts @@ -0,0 +1,38 @@ +/* + * Copyright 2025 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import { createCliPlugin } from '../../wiring/factory'; +import { Command } from 'commander'; +import { lazy } from '../../lib/lazy'; + +export default createCliPlugin({ + pluginId: 'new', + init: async reg => { + reg.addCommand({ + path: ['create-github-app'], + description: 'Create new GitHub App in your organization.', + execute: async ({ args }) => { + const command = new Command(); + const defaultCommand = command + .argument('') + .action( + lazy(() => import('./commands/create-github-app'), 'default'), + ); + + await defaultCommand.parseAsync(args, { from: 'user' }); + }, + }); + }, +}); diff --git a/packages/cli/src/commands/create-github-app/GithubCreateAppServer.ts b/packages/cli/src/modules/create-github-app/commands/create-github-app/GithubCreateAppServer.ts similarity index 100% rename from packages/cli/src/commands/create-github-app/GithubCreateAppServer.ts rename to packages/cli/src/modules/create-github-app/commands/create-github-app/GithubCreateAppServer.ts diff --git a/packages/cli/src/commands/create-github-app/index.ts b/packages/cli/src/modules/create-github-app/commands/create-github-app/index.ts similarity index 98% rename from packages/cli/src/commands/create-github-app/index.ts rename to packages/cli/src/modules/create-github-app/commands/create-github-app/index.ts index 105a6b4c24..6c0e422080 100644 --- a/packages/cli/src/commands/create-github-app/index.ts +++ b/packages/cli/src/modules/create-github-app/commands/create-github-app/index.ts @@ -18,7 +18,7 @@ import fs from 'fs-extra'; import chalk from 'chalk'; import { stringify as stringifyYaml } from 'yaml'; import inquirer, { Question, Answers } from 'inquirer'; -import { paths } from '../../lib/paths'; +import { paths } from '../../../../lib/paths'; import { GithubCreateAppServer } from './GithubCreateAppServer'; import openBrowser from 'react-dev-utils/openBrowser'; diff --git a/packages/cli/src/modules/create-github-app/index.ts b/packages/cli/src/modules/create-github-app/index.ts new file mode 100644 index 0000000000..f69230cd77 --- /dev/null +++ b/packages/cli/src/modules/create-github-app/index.ts @@ -0,0 +1,29 @@ +/* + * Copyright 2025 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import { Command } from 'commander'; +import { lazy } from '../../lib/lazy'; + +export function registerCommands(program: Command) { + program + .command('create-github-app ') + .description('Create new GitHub App in your organization.') + .action( + lazy( + () => import('../create-github-app/commands/create-github-app'), + 'default', + ), + ); +} diff --git a/packages/cli/src/modules/new/alpha.ts b/packages/cli/src/modules/new/alpha.ts new file mode 100644 index 0000000000..6802077507 --- /dev/null +++ b/packages/cli/src/modules/new/alpha.ts @@ -0,0 +1,86 @@ +/* + * Copyright 2025 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import { createCliPlugin } from '../../wiring/factory'; +import { Command } from 'commander'; +import { lazy } from '../../lib/lazy'; +import { removed } from '../../lib/removed'; + +export default createCliPlugin({ + pluginId: 'new', + init: async reg => { + reg.addCommand({ + path: ['new'], + description: + 'Open up an interactive guide to creating new things in your app', + execute: async ({ args }) => { + const command = new Command(); + const defaultCommand = command + .storeOptionsAsProperties(false) + .description( + 'Open up an interactive guide to creating new things in your app', + ) + .option( + '--select ', + 'Select the thing you want to be creating upfront', + ) + .option( + '--option =', + 'Pre-fill options for the creation process', + (opt, arr: string[]) => [...arr, opt], + [], + ) + .option( + '--skip-install', + `Skips running 'yarn install' and 'yarn lint --fix'`, + ) + .option('--scope ', 'The scope to use for new packages') + .option( + '--npm-registry ', + 'The package registry to use for new packages', + ) + .option( + '--baseVersion ', + 'The version to use for any new packages (default: 0.1.0)', + ) + .option( + '--license ', + 'The license to use for any new packages (default: Apache-2.0)', + ) + .option('--no-private', 'Do not mark new packages as private') + .action(lazy(() => import('./commands/new'), 'default')); + + await defaultCommand.parseAsync(args, { from: 'user' }); + }, + }); + + reg.addCommand({ + path: ['create'], + description: 'Create a new Backstage app', + deprecated: true, + execute: async () => { + removed("use 'backstage-cli new' instead")(); + }, + }); + reg.addCommand({ + path: ['create-plugin'], + description: 'Create a new Backstage plugin', + deprecated: true, + execute: async () => { + removed("use 'backstage-cli new' instead")(); + }, + }); + }, +}); diff --git a/packages/cli/src/commands/new/new.test.ts b/packages/cli/src/modules/new/commands/new.test.ts similarity index 92% rename from packages/cli/src/commands/new/new.test.ts rename to packages/cli/src/modules/new/commands/new.test.ts index e1cb3b0ffa..77ee96cd09 100644 --- a/packages/cli/src/commands/new/new.test.ts +++ b/packages/cli/src/modules/new/commands/new.test.ts @@ -14,10 +14,10 @@ * limitations under the License. */ -import { createNewPackage } from '../../lib/new/createNewPackage'; +import { createNewPackage } from '../lib/createNewPackage'; import { default as newCommand } from './new'; -jest.mock('../../lib/new/createNewPackage'); +jest.mock('../lib/createNewPackage'); describe.each([ [undefined, undefined, undefined], diff --git a/packages/cli/src/commands/new/new.ts b/packages/cli/src/modules/new/commands/new.ts similarity index 97% rename from packages/cli/src/commands/new/new.ts rename to packages/cli/src/modules/new/commands/new.ts index 970034429c..9d09f42cf3 100644 --- a/packages/cli/src/commands/new/new.ts +++ b/packages/cli/src/modules/new/commands/new.ts @@ -14,7 +14,7 @@ * limitations under the License. */ -import { createNewPackage } from '../../lib/new/createNewPackage'; +import { createNewPackage } from '../lib/createNewPackage'; type ArgOptions = { option: string[]; diff --git a/packages/cli/src/modules/new/index.ts b/packages/cli/src/modules/new/index.ts new file mode 100644 index 0000000000..fa288f5f46 --- /dev/null +++ b/packages/cli/src/modules/new/index.ts @@ -0,0 +1,65 @@ +/* + * Copyright 2025 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import { Command } from 'commander'; +import { lazy } from '../../lib/lazy'; +import { removed } from '../../lib/removed'; + +export function registerCommands(program: Command) { + program + .command('new') + .storeOptionsAsProperties(false) + .description( + 'Open up an interactive guide to creating new things in your app', + ) + .option( + '--select ', + 'Select the thing you want to be creating upfront', + ) + .option( + '--option =', + 'Pre-fill options for the creation process', + (opt, arr: string[]) => [...arr, opt], + [], + ) + .option( + '--skip-install', + `Skips running 'yarn install' and 'yarn lint --fix'`, + ) + .option('--scope ', 'The scope to use for new packages') + .option( + '--npm-registry ', + 'The package registry to use for new packages', + ) + .option( + '--baseVersion ', + 'The version to use for any new packages (default: 0.1.0)', + ) + .option( + '--license ', + 'The license to use for any new packages (default: Apache-2.0)', + ) + .option('--no-private', 'Do not mark new packages as private') + .action(lazy(() => import('./commands/new'), 'default')); + + program + .command('create') + .allowUnknownOption(true) + .action(removed("use 'backstage-cli new' instead")); + program + .command('create-plugin') + .allowUnknownOption(true) + .action(removed("use 'backstage-cli new' instead")); +} diff --git a/packages/cli/src/lib/new/createNewPackage.ts b/packages/cli/src/modules/new/lib/createNewPackage.ts similarity index 100% rename from packages/cli/src/lib/new/createNewPackage.ts rename to packages/cli/src/modules/new/lib/createNewPackage.ts diff --git a/packages/cli/src/lib/new/defaultTemplates.ts b/packages/cli/src/modules/new/lib/defaultTemplates.ts similarity index 100% rename from packages/cli/src/lib/new/defaultTemplates.ts rename to packages/cli/src/modules/new/lib/defaultTemplates.ts diff --git a/packages/cli/src/lib/new/execution/PortableTemplater.ts b/packages/cli/src/modules/new/lib/execution/PortableTemplater.ts similarity index 94% rename from packages/cli/src/lib/new/execution/PortableTemplater.ts rename to packages/cli/src/modules/new/lib/execution/PortableTemplater.ts index 8e5e9251d4..519f7c6dbc 100644 --- a/packages/cli/src/lib/new/execution/PortableTemplater.ts +++ b/packages/cli/src/modules/new/lib/execution/PortableTemplater.ts @@ -24,9 +24,9 @@ import startCase from 'lodash/startCase'; import upperCase from 'lodash/upperCase'; import upperFirst from 'lodash/upperFirst'; import lowerFirst from 'lodash/lowerFirst'; -import { Lockfile } from '../../versioning'; -import { paths } from '../../paths'; -import { createPackageVersionProvider } from '../../version'; +import { Lockfile } from '../../../../lib/versioning'; +import { paths } from '../../../../lib/paths'; +import { createPackageVersionProvider } from '../../../../lib/version'; const builtInHelpers = { camelCase, diff --git a/packages/cli/src/lib/new/execution/executePortableTemplate.ts b/packages/cli/src/modules/new/lib/execution/executePortableTemplate.ts similarity index 95% rename from packages/cli/src/lib/new/execution/executePortableTemplate.ts rename to packages/cli/src/modules/new/lib/execution/executePortableTemplate.ts index 0041b931ba..cb076f3aa0 100644 --- a/packages/cli/src/lib/new/execution/executePortableTemplate.ts +++ b/packages/cli/src/modules/new/lib/execution/executePortableTemplate.ts @@ -15,8 +15,8 @@ */ import { assertError } from '@backstage/errors'; -import { addCodeownersEntry } from '../../codeowners'; -import { Task } from '../../tasks'; +import { addCodeownersEntry } from '../../../../lib/codeowners'; +import { Task } from '../../../../lib/tasks'; import { PortableTemplate, PortableTemplateConfig, diff --git a/packages/cli/src/lib/new/execution/index.ts b/packages/cli/src/modules/new/lib/execution/index.ts similarity index 100% rename from packages/cli/src/lib/new/execution/index.ts rename to packages/cli/src/modules/new/lib/execution/index.ts diff --git a/packages/cli/src/lib/new/execution/installNewPackage.ts b/packages/cli/src/modules/new/lib/execution/installNewPackage.ts similarity index 98% rename from packages/cli/src/lib/new/execution/installNewPackage.ts rename to packages/cli/src/modules/new/lib/execution/installNewPackage.ts index 39983e29cf..733a688bfb 100644 --- a/packages/cli/src/lib/new/execution/installNewPackage.ts +++ b/packages/cli/src/modules/new/lib/execution/installNewPackage.ts @@ -16,8 +16,8 @@ import fs from 'fs-extra'; import upperFirst from 'lodash/upperFirst'; import camelCase from 'lodash/camelCase'; -import { paths } from '../../paths'; -import { Task } from '../../tasks'; +import { paths } from '../../../../lib/paths'; +import { Task } from '../../../../lib/tasks'; import { PortableTemplateInput } from '../types'; export async function installNewPackage(input: PortableTemplateInput) { diff --git a/packages/cli/src/lib/new/execution/writeTemplateContents.test.ts b/packages/cli/src/modules/new/lib/execution/writeTemplateContents.test.ts similarity index 98% rename from packages/cli/src/lib/new/execution/writeTemplateContents.test.ts rename to packages/cli/src/modules/new/lib/execution/writeTemplateContents.test.ts index 7e0e81f137..a9f1ad61f7 100644 --- a/packages/cli/src/lib/new/execution/writeTemplateContents.test.ts +++ b/packages/cli/src/modules/new/lib/execution/writeTemplateContents.test.ts @@ -17,7 +17,7 @@ import { relative as relativePath } from 'node:path'; import { writeTemplateContents } from './writeTemplateContents'; import { createMockDirectory } from '@backstage/backend-test-utils'; -import { paths } from '../../paths'; +import { paths } from '../../../../lib/paths'; const baseConfig = { version: '0.1.0', diff --git a/packages/cli/src/lib/new/execution/writeTemplateContents.ts b/packages/cli/src/modules/new/lib/execution/writeTemplateContents.ts similarity index 98% rename from packages/cli/src/lib/new/execution/writeTemplateContents.ts rename to packages/cli/src/modules/new/lib/execution/writeTemplateContents.ts index f54b2d73d6..8b5d6855ca 100644 --- a/packages/cli/src/lib/new/execution/writeTemplateContents.ts +++ b/packages/cli/src/modules/new/lib/execution/writeTemplateContents.ts @@ -17,7 +17,7 @@ import fs from 'fs-extra'; import { dirname, resolve as resolvePath } from 'path'; -import { paths } from '../../paths'; +import { paths } from '../../../../lib/paths'; import { PortableTemplate, PortableTemplateInput } from '../types'; import { ForwardedError, InputError } from '@backstage/errors'; import { isMonoRepo as getIsMonoRepo } from '@backstage/cli-node'; diff --git a/packages/cli/src/lib/new/preparation/collectPortableTemplateInput.test.ts b/packages/cli/src/modules/new/lib/preparation/collectPortableTemplateInput.test.ts similarity index 100% rename from packages/cli/src/lib/new/preparation/collectPortableTemplateInput.test.ts rename to packages/cli/src/modules/new/lib/preparation/collectPortableTemplateInput.test.ts diff --git a/packages/cli/src/lib/new/preparation/collectPortableTemplateInput.ts b/packages/cli/src/modules/new/lib/preparation/collectPortableTemplateInput.ts similarity index 97% rename from packages/cli/src/lib/new/preparation/collectPortableTemplateInput.ts rename to packages/cli/src/modules/new/lib/preparation/collectPortableTemplateInput.ts index 720993e25c..23a30721b0 100644 --- a/packages/cli/src/lib/new/preparation/collectPortableTemplateInput.ts +++ b/packages/cli/src/modules/new/lib/preparation/collectPortableTemplateInput.ts @@ -15,8 +15,11 @@ */ import inquirer, { DistinctQuestion } from 'inquirer'; -import { getCodeownersFilePath, parseOwnerIds } from '../../codeowners'; -import { paths } from '../../paths'; +import { + getCodeownersFilePath, + parseOwnerIds, +} from '../../../../lib/codeowners'; +import { paths } from '../../../../lib/paths'; import { PortableTemplateConfig, PortableTemplateInput, diff --git a/packages/cli/src/lib/new/preparation/index.ts b/packages/cli/src/modules/new/lib/preparation/index.ts similarity index 100% rename from packages/cli/src/lib/new/preparation/index.ts rename to packages/cli/src/modules/new/lib/preparation/index.ts diff --git a/packages/cli/src/lib/new/preparation/loadPortableTemplate.test.ts b/packages/cli/src/modules/new/lib/preparation/loadPortableTemplate.test.ts similarity index 100% rename from packages/cli/src/lib/new/preparation/loadPortableTemplate.test.ts rename to packages/cli/src/modules/new/lib/preparation/loadPortableTemplate.test.ts diff --git a/packages/cli/src/lib/new/preparation/loadPortableTemplate.ts b/packages/cli/src/modules/new/lib/preparation/loadPortableTemplate.ts similarity index 98% rename from packages/cli/src/lib/new/preparation/loadPortableTemplate.ts rename to packages/cli/src/modules/new/lib/preparation/loadPortableTemplate.ts index c792119ae6..f59546a308 100644 --- a/packages/cli/src/lib/new/preparation/loadPortableTemplate.ts +++ b/packages/cli/src/modules/new/lib/preparation/loadPortableTemplate.ts @@ -20,7 +20,7 @@ import recursiveReaddir from 'recursive-readdir'; import { resolve as resolvePath, relative as relativePath } from 'path'; import { dirname } from 'node:path'; import { parse as parseYaml } from 'yaml'; -import { paths } from '../../paths'; +import { paths } from '../../../../lib/paths'; import { PortableTemplateFile, PortableTemplatePointer, diff --git a/packages/cli/src/lib/new/preparation/loadPortableTemplateConfig.test.ts b/packages/cli/src/modules/new/lib/preparation/loadPortableTemplateConfig.test.ts similarity index 100% rename from packages/cli/src/lib/new/preparation/loadPortableTemplateConfig.test.ts rename to packages/cli/src/modules/new/lib/preparation/loadPortableTemplateConfig.test.ts diff --git a/packages/cli/src/lib/new/preparation/loadPortableTemplateConfig.ts b/packages/cli/src/modules/new/lib/preparation/loadPortableTemplateConfig.ts similarity index 99% rename from packages/cli/src/lib/new/preparation/loadPortableTemplateConfig.ts rename to packages/cli/src/modules/new/lib/preparation/loadPortableTemplateConfig.ts index d4705b0320..5ef61bfb6b 100644 --- a/packages/cli/src/lib/new/preparation/loadPortableTemplateConfig.ts +++ b/packages/cli/src/modules/new/lib/preparation/loadPortableTemplateConfig.ts @@ -16,7 +16,7 @@ import fs from 'fs-extra'; import { resolve as resolvePath, dirname, isAbsolute } from 'node:path'; -import { paths } from '../../paths'; +import { paths } from '../../../../lib/paths'; import { defaultTemplates } from '../defaultTemplates'; import { PortableTemplateConfig, diff --git a/packages/cli/src/lib/new/preparation/resolvePackageParams.test.ts b/packages/cli/src/modules/new/lib/preparation/resolvePackageParams.test.ts similarity index 100% rename from packages/cli/src/lib/new/preparation/resolvePackageParams.test.ts rename to packages/cli/src/modules/new/lib/preparation/resolvePackageParams.test.ts diff --git a/packages/cli/src/lib/new/preparation/resolvePackageParams.ts b/packages/cli/src/modules/new/lib/preparation/resolvePackageParams.ts similarity index 100% rename from packages/cli/src/lib/new/preparation/resolvePackageParams.ts rename to packages/cli/src/modules/new/lib/preparation/resolvePackageParams.ts diff --git a/packages/cli/src/lib/new/preparation/selectTemplateInteractively.test.ts b/packages/cli/src/modules/new/lib/preparation/selectTemplateInteractively.test.ts similarity index 100% rename from packages/cli/src/lib/new/preparation/selectTemplateInteractively.test.ts rename to packages/cli/src/modules/new/lib/preparation/selectTemplateInteractively.test.ts diff --git a/packages/cli/src/lib/new/preparation/selectTemplateInteractively.ts b/packages/cli/src/modules/new/lib/preparation/selectTemplateInteractively.ts similarity index 100% rename from packages/cli/src/lib/new/preparation/selectTemplateInteractively.ts rename to packages/cli/src/modules/new/lib/preparation/selectTemplateInteractively.ts diff --git a/packages/cli/src/lib/new/types.ts b/packages/cli/src/modules/new/lib/types.ts similarity index 100% rename from packages/cli/src/lib/new/types.ts rename to packages/cli/src/modules/new/lib/types.ts diff --git a/packages/cli/src/wiring/CliInitializer.ts b/packages/cli/src/wiring/CliInitializer.ts index d7fdfdccab..d3cba34f60 100644 --- a/packages/cli/src/wiring/CliInitializer.ts +++ b/packages/cli/src/wiring/CliInitializer.ts @@ -88,7 +88,7 @@ export class CliInitializer { ); } else { argParser - .command(node.name) + .command(node.name, { hidden: !!node.command.deprecated }) .description(node.command.description) .helpOption(false) .allowUnknownOption(true) diff --git a/packages/cli/src/wiring/types.ts b/packages/cli/src/wiring/types.ts index d9237a4c3a..0decdc6479 100644 --- a/packages/cli/src/wiring/types.ts +++ b/packages/cli/src/wiring/types.ts @@ -18,6 +18,7 @@ import { CommandRegistry } from './CommandRegistry'; export interface BackstageCommand { path: string[]; description: string; + deprecated?: boolean; execute: (options: { args: string[] }) => Promise; } diff --git a/packages/repo-tools/src/commands/lint-legacy-backend-exports/lint-legacy-backend-exports.ts b/packages/repo-tools/src/commands/lint-legacy-backend-exports/lint-legacy-backend-exports.ts index 6025defe31..29fb4e7b20 100644 --- a/packages/repo-tools/src/commands/lint-legacy-backend-exports/lint-legacy-backend-exports.ts +++ b/packages/repo-tools/src/commands/lint-legacy-backend-exports/lint-legacy-backend-exports.ts @@ -46,10 +46,12 @@ function verifyIndex(pkg: string, packageJson?: BackstagePackageJson) { console.log(`Verifying ${pkg}`); const tsPath = path.join(pkg, 'src/index.ts'); const sourceFile = project.getSourceFile(tsPath); + if (!sourceFile) { console.log(`Could not find ${tsPath}`); process.exit(1); } + const symbols = sourceFile?.getExportSymbols(); const exportCount = symbols?.length || 0; @@ -69,15 +71,34 @@ function verifyIndex(pkg: string, packageJson?: BackstagePackageJson) { console.log(' ❌ Missing default export'); } let createRouterDeprecated = undefined; + let routerCreateRouterDeprecated = undefined; if (createRouterExport) { createRouterDeprecated = createRouterExport .getJsDocTags() .find(tag => tag.getName() === 'deprecated'); + + const declarations = createRouterExport?.getDeclarations(); + const firstDeclaration = declarations?.[0]; + let resolvedSymbol = undefined; + if (firstDeclaration) { + // Try resolving to the definition directly + resolvedSymbol = createRouterExport.getAliasedSymbol(); + if (resolvedSymbol) { + const resolvedDeclarations = resolvedSymbol.getDeclarations(); + const resolvedDeclaration = resolvedDeclarations?.[0]; + if (resolvedDeclaration) { + routerCreateRouterDeprecated = resolvedDeclaration + .getSymbol() + ?.getJsDocTags() + .find(tag => tag.getName() === 'deprecated'); + } + } + } } if (createRouterExport) { console.log(' ❌ createRouter is exported'); - if (!createRouterDeprecated) + if (!createRouterDeprecated && !routerCreateRouterDeprecated) console.log(' ❌ createRouter is NOT deprecated'); } diff --git a/storybook/yarn.lock b/storybook/yarn.lock index 472bc07cfb..a49b9a110f 100644 --- a/storybook/yarn.lock +++ b/storybook/yarn.lock @@ -4706,22 +4706,22 @@ __metadata: linkType: hard "typescript@npm:^5.5.3": - version: 5.8.2 - resolution: "typescript@npm:5.8.2" + version: 5.8.3 + resolution: "typescript@npm:5.8.3" bin: tsc: bin/tsc tsserver: bin/tsserver - checksum: 10/dbc2168a55d56771f4d581997be52bab5cbc09734fec976cfbaabd787e61fb4c6cf9125fd48c6f98054ce549c77ecedefc7f64252a830dd8e9c3381f61fbeb78 + checksum: 10/65c40944c51b513b0172c6710ee62e951b70af6f75d5a5da745cb7fab132c09ae27ffdf7838996e3ed603bb015dadd099006658046941bd0ba30340cc563ae92 languageName: node linkType: hard "typescript@patch:typescript@npm%3A^5.5.3#optional!builtin": - version: 5.8.2 - resolution: "typescript@patch:typescript@npm%3A5.8.2#optional!builtin::version=5.8.2&hash=5786d5" + version: 5.8.3 + resolution: "typescript@patch:typescript@npm%3A5.8.3#optional!builtin::version=5.8.3&hash=5786d5" bin: tsc: bin/tsc tsserver: bin/tsserver - checksum: 10/97920a082ffc57583b1cb6bc4faa502acc156358e03f54c7fc7fdf0b61c439a717f4c9070c449ee9ee683d4cfc3bb203127c2b9794b2950f66d9d307a4ff262c + checksum: 10/b9b1e73dabac5dc730c041325dbd9c99467c1b0d239f1b74ec3b90d831384af3e2ba973946232df670519147eb51a2c20f6f96163cea2b359f03de1e2091cc4f languageName: node linkType: hard @@ -4811,8 +4811,8 @@ __metadata: linkType: hard "vite@npm:^5.4.8": - version: 5.4.17 - resolution: "vite@npm:5.4.17" + version: 5.4.18 + resolution: "vite@npm:5.4.18" dependencies: esbuild: "npm:^0.21.3" fsevents: "npm:~2.3.3" @@ -4849,7 +4849,7 @@ __metadata: optional: true bin: vite: bin/vite.js - checksum: 10/95b2f94d378305cf8a4fadb40f96da3e59593188733738c486252ecb67ac6439100a44ec9170b66fa319b4d61eea161800e610a0499e61bf110ae6e7e6f233f0 + checksum: 10/491f0d047695a4bb3aafdb30822a3638ac41c23b022c1599bf51beab26a7cffe3ef1617bdf014592da48864079f217da5bf144a6c3238d2d74dea688ba3a549a languageName: node linkType: hard diff --git a/yarn.lock b/yarn.lock index e12042f2b8..b2c291875d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1886,7 +1886,7 @@ __metadata: languageName: node linkType: hard -"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.12.13, @babel/code-frame@npm:^7.16.0, @babel/code-frame@npm:^7.16.7, @babel/code-frame@npm:^7.24.2, @babel/code-frame@npm:^7.25.9, @babel/code-frame@npm:^7.26.0, @babel/code-frame@npm:^7.8.3": +"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.12.13, @babel/code-frame@npm:^7.16.0, @babel/code-frame@npm:^7.16.7, @babel/code-frame@npm:^7.24.2, @babel/code-frame@npm:^7.25.9, @babel/code-frame@npm:^7.26.0, @babel/code-frame@npm:^7.26.2, @babel/code-frame@npm:^7.8.3": version: 7.26.2 resolution: "@babel/code-frame@npm:7.26.2" dependencies: @@ -2181,12 +2181,12 @@ __metadata: linkType: hard "@babel/helpers@npm:^7.26.0": - version: 7.26.0 - resolution: "@babel/helpers@npm:7.26.0" + version: 7.27.0 + resolution: "@babel/helpers@npm:7.27.0" dependencies: - "@babel/template": "npm:^7.25.9" - "@babel/types": "npm:^7.26.0" - checksum: 10/fd4757f65d10b64cfdbf4b3adb7ea6ffff9497c53e0786452f495d1f7794da7e0898261b4db65e1c62bbb9a360d7d78a1085635c23dfc3af2ab6dcba06585f86 + "@babel/template": "npm:^7.27.0" + "@babel/types": "npm:^7.27.0" + checksum: 10/0dd40ba1e5ba4b72d1763bb381384585a56f21a61a19dc1b9a03381fe8e840207fdaa4da645d14dc028ad768087d41aad46347cc6573bd69d82f597f5a12dc6f languageName: node linkType: hard @@ -2202,14 +2202,14 @@ __metadata: languageName: node linkType: hard -"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.24.7, @babel/parser@npm:^7.25.9, @babel/parser@npm:^7.26.0, @babel/parser@npm:^7.26.2": - version: 7.26.2 - resolution: "@babel/parser@npm:7.26.2" +"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.24.7, @babel/parser@npm:^7.25.9, @babel/parser@npm:^7.26.0, @babel/parser@npm:^7.26.2, @babel/parser@npm:^7.27.0": + version: 7.27.0 + resolution: "@babel/parser@npm:7.27.0" dependencies: - "@babel/types": "npm:^7.26.0" + "@babel/types": "npm:^7.27.0" bin: parser: ./bin/babel-parser.js - checksum: 10/8baee43752a3678ad9f9e360ec845065eeee806f1fdc8e0f348a8a0e13eef0959dabed4a197c978896c493ea205c804d0a1187cc52e4a1ba017c7935bab4983d + checksum: 10/0fee9f05c6db753882ca9d10958301493443da9f6986d7020ebd7a696b35886240016899bc0b47d871aea2abcafd64632343719742e87432c8145e0ec2af2a03 languageName: node linkType: hard @@ -3344,14 +3344,14 @@ __metadata: languageName: node linkType: hard -"@babel/template@npm:^7.22.5, @babel/template@npm:^7.24.7, @babel/template@npm:^7.25.9, @babel/template@npm:^7.3.3": - version: 7.25.9 - resolution: "@babel/template@npm:7.25.9" +"@babel/template@npm:^7.22.5, @babel/template@npm:^7.24.7, @babel/template@npm:^7.25.9, @babel/template@npm:^7.27.0, @babel/template@npm:^7.3.3": + version: 7.27.0 + resolution: "@babel/template@npm:7.27.0" dependencies: - "@babel/code-frame": "npm:^7.25.9" - "@babel/parser": "npm:^7.25.9" - "@babel/types": "npm:^7.25.9" - checksum: 10/e861180881507210150c1335ad94aff80fd9e9be6202e1efa752059c93224e2d5310186ddcdd4c0f0b0fc658ce48cb47823f15142b5c00c8456dde54f5de80b2 + "@babel/code-frame": "npm:^7.26.2" + "@babel/parser": "npm:^7.27.0" + "@babel/types": "npm:^7.27.0" + checksum: 10/7159ca1daea287ad34676d45a7146675444d42c7664aca3e617abc9b1d9548c8f377f35a36bb34cf956e1d3610dcb7acfcfe890aebf81880d35f91a7bd273ee5 languageName: node linkType: hard @@ -3370,13 +3370,13 @@ __metadata: languageName: node linkType: hard -"@babel/types@npm:^7.0.0, @babel/types@npm:^7.18.9, @babel/types@npm:^7.20.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.22.10, @babel/types@npm:^7.22.5, @babel/types@npm:^7.24.7, @babel/types@npm:^7.24.8, @babel/types@npm:^7.25.9, @babel/types@npm:^7.26.0, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4": - version: 7.26.0 - resolution: "@babel/types@npm:7.26.0" +"@babel/types@npm:^7.0.0, @babel/types@npm:^7.18.9, @babel/types@npm:^7.20.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.22.10, @babel/types@npm:^7.22.5, @babel/types@npm:^7.24.7, @babel/types@npm:^7.24.8, @babel/types@npm:^7.25.9, @babel/types@npm:^7.26.0, @babel/types@npm:^7.27.0, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4": + version: 7.27.0 + resolution: "@babel/types@npm:7.27.0" dependencies: "@babel/helper-string-parser": "npm:^7.25.9" "@babel/helper-validator-identifier": "npm:^7.25.9" - checksum: 10/40780741ecec886ed9edae234b5eb4976968cc70d72b4e5a40d55f83ff2cc457de20f9b0f4fe9d858350e43dab0ea496e7ef62e2b2f08df699481a76df02cd6e + checksum: 10/2c322bce107c8a534dc4a23be60d570e6a4cc7ca2e44d4f0eee08c0b626104eb7e60ab8de03463bc5da1773a2f69f1e6edec1648d648d65461d6520a7f3b0770 languageName: node linkType: hard @@ -3788,6 +3788,7 @@ __metadata: "@storybook/react": "npm:^8.6.8" "@storybook/react-webpack5": "npm:^8.6.8" "@storybook/test": "npm:^8.6.8" + "@tanstack/react-table": "npm:^8.21.2" "@types/react": "npm:^18.0.0" "@types/react-dom": "npm:^18.0.0" chalk: "npm:^5.4.1" @@ -10558,17 +10559,17 @@ __metadata: languageName: node linkType: hard -"@graphql-tools/load@npm:^8.0.0": - version: 8.0.0 - resolution: "@graphql-tools/load@npm:8.0.0" +"@graphql-tools/load@npm:^8.1.0": + version: 8.1.0 + resolution: "@graphql-tools/load@npm:8.1.0" dependencies: - "@graphql-tools/schema": "npm:^10.0.0" - "@graphql-tools/utils": "npm:^10.0.0" + "@graphql-tools/schema": "npm:^10.0.23" + "@graphql-tools/utils": "npm:^10.8.6" p-limit: "npm:3.1.0" tslib: "npm:^2.4.0" peerDependencies: graphql: ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 - checksum: 10/64bbcaae28bf895f0d1f0636325a5b567cca1524ffd02bcad58a063087e74c65b9c1a5743adc2cc18a4f3c0379f7426090f8784abcddfd60997f187e6f100eb4 + checksum: 10/4601dda7eb32cb8afed2379102ad82f8a948e478f42c7b1f354a3468ca8dfcdcc2a89e6c6ebcbb574c77eaa80d47f20c27230bdcd6c2d0a3600fa1d6a450cc95 languageName: node linkType: hard @@ -10584,29 +10585,28 @@ __metadata: languageName: node linkType: hard -"@graphql-tools/merge@npm:^9.0.0": - version: 9.0.0 - resolution: "@graphql-tools/merge@npm:9.0.0" +"@graphql-tools/merge@npm:^9.0.0, @graphql-tools/merge@npm:^9.0.24": + version: 9.0.24 + resolution: "@graphql-tools/merge@npm:9.0.24" dependencies: - "@graphql-tools/utils": "npm:^10.0.0" + "@graphql-tools/utils": "npm:^10.8.6" tslib: "npm:^2.4.0" peerDependencies: graphql: ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 - checksum: 10/7bf74f71a22d87dbc47fc778cf6d0366bcd36ae0a271cc5b382ffa90020f033e227ad97c94d785ac2943317ffce9e904119c60d72b3da5b655b5837e78652b82 + checksum: 10/95f77ff141f10d5d726cd8d1ae1ad84ed944c84346bf20461adca9b1543bb94cb524b0347885fe61d3158ccf5ffe1dddec361787ae40bfcc3449aad51528dd77 languageName: node linkType: hard -"@graphql-tools/schema@npm:^10.0.0": - version: 10.0.0 - resolution: "@graphql-tools/schema@npm:10.0.0" +"@graphql-tools/schema@npm:^10.0.0, @graphql-tools/schema@npm:^10.0.23": + version: 10.0.23 + resolution: "@graphql-tools/schema@npm:10.0.23" dependencies: - "@graphql-tools/merge": "npm:^9.0.0" - "@graphql-tools/utils": "npm:^10.0.0" + "@graphql-tools/merge": "npm:^9.0.24" + "@graphql-tools/utils": "npm:^10.8.6" tslib: "npm:^2.4.0" - value-or-promise: "npm:^1.0.12" peerDependencies: graphql: ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 - checksum: 10/dd784bcc460746adc32a63e9f19b241f9af6e81a8d123b346806853f24096003764aa117954bb88a35de67ce3484acc9e42a03ebe41dafad1446dd614fbcefb5 + checksum: 10/f0960dae161a478941276df1802af09844825c8135e4695b36f5f7e7384f43ff8e1288a67546023fc861951d783327f239112ccf563cb4be1f22038fc78acf21 languageName: node linkType: hard @@ -10658,17 +10658,18 @@ __metadata: languageName: node linkType: hard -"@graphql-tools/utils@npm:^10.0.0, @graphql-tools/utils@npm:^10.0.2, @graphql-tools/utils@npm:^10.0.5, @graphql-tools/utils@npm:^10.3.0": - version: 10.5.4 - resolution: "@graphql-tools/utils@npm:10.5.4" +"@graphql-tools/utils@npm:^10.0.0, @graphql-tools/utils@npm:^10.0.2, @graphql-tools/utils@npm:^10.0.5, @graphql-tools/utils@npm:^10.3.0, @graphql-tools/utils@npm:^10.8.6": + version: 10.8.6 + resolution: "@graphql-tools/utils@npm:10.8.6" dependencies: "@graphql-typed-document-node/core": "npm:^3.1.1" + "@whatwg-node/promise-helpers": "npm:^1.0.0" cross-inspect: "npm:1.0.1" - dset: "npm:^3.1.2" + dset: "npm:^3.1.4" tslib: "npm:^2.4.0" peerDependencies: graphql: ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 - checksum: 10/e6750800be215cbd8b4cc67019ba91b881c6093a4ac71258eeef9f1f3101b1e81e862435fd5b05cb40d94d40e396d0a3629ad6613226d7a4f75b8c5329a03aa7 + checksum: 10/98329aef966b489d3674eb086b784f6fb4500afaf9bc46fbe6a14ca32e98fec480c7395d3488c5eb2f450b75a538e98edf0527ed4bf24af352230e850c914389 languageName: node linkType: hard @@ -19063,94 +19064,94 @@ __metadata: languageName: node linkType: hard -"@swc/core-darwin-arm64@npm:1.11.10": - version: 1.11.10 - resolution: "@swc/core-darwin-arm64@npm:1.11.10" +"@swc/core-darwin-arm64@npm:1.11.21": + version: 1.11.21 + resolution: "@swc/core-darwin-arm64@npm:1.11.21" conditions: os=darwin & cpu=arm64 languageName: node linkType: hard -"@swc/core-darwin-x64@npm:1.11.10": - version: 1.11.10 - resolution: "@swc/core-darwin-x64@npm:1.11.10" +"@swc/core-darwin-x64@npm:1.11.21": + version: 1.11.21 + resolution: "@swc/core-darwin-x64@npm:1.11.21" conditions: os=darwin & cpu=x64 languageName: node linkType: hard -"@swc/core-linux-arm-gnueabihf@npm:1.11.10": - version: 1.11.10 - resolution: "@swc/core-linux-arm-gnueabihf@npm:1.11.10" +"@swc/core-linux-arm-gnueabihf@npm:1.11.21": + version: 1.11.21 + resolution: "@swc/core-linux-arm-gnueabihf@npm:1.11.21" conditions: os=linux & cpu=arm languageName: node linkType: hard -"@swc/core-linux-arm64-gnu@npm:1.11.10": - version: 1.11.10 - resolution: "@swc/core-linux-arm64-gnu@npm:1.11.10" +"@swc/core-linux-arm64-gnu@npm:1.11.21": + version: 1.11.21 + resolution: "@swc/core-linux-arm64-gnu@npm:1.11.21" conditions: os=linux & cpu=arm64 & libc=glibc languageName: node linkType: hard -"@swc/core-linux-arm64-musl@npm:1.11.10": - version: 1.11.10 - resolution: "@swc/core-linux-arm64-musl@npm:1.11.10" +"@swc/core-linux-arm64-musl@npm:1.11.21": + version: 1.11.21 + resolution: "@swc/core-linux-arm64-musl@npm:1.11.21" conditions: os=linux & cpu=arm64 & libc=musl languageName: node linkType: hard -"@swc/core-linux-x64-gnu@npm:1.11.10": - version: 1.11.10 - resolution: "@swc/core-linux-x64-gnu@npm:1.11.10" +"@swc/core-linux-x64-gnu@npm:1.11.21": + version: 1.11.21 + resolution: "@swc/core-linux-x64-gnu@npm:1.11.21" conditions: os=linux & cpu=x64 & libc=glibc languageName: node linkType: hard -"@swc/core-linux-x64-musl@npm:1.11.10": - version: 1.11.10 - resolution: "@swc/core-linux-x64-musl@npm:1.11.10" +"@swc/core-linux-x64-musl@npm:1.11.21": + version: 1.11.21 + resolution: "@swc/core-linux-x64-musl@npm:1.11.21" conditions: os=linux & cpu=x64 & libc=musl languageName: node linkType: hard -"@swc/core-win32-arm64-msvc@npm:1.11.10": - version: 1.11.10 - resolution: "@swc/core-win32-arm64-msvc@npm:1.11.10" +"@swc/core-win32-arm64-msvc@npm:1.11.21": + version: 1.11.21 + resolution: "@swc/core-win32-arm64-msvc@npm:1.11.21" conditions: os=win32 & cpu=arm64 languageName: node linkType: hard -"@swc/core-win32-ia32-msvc@npm:1.11.10": - version: 1.11.10 - resolution: "@swc/core-win32-ia32-msvc@npm:1.11.10" +"@swc/core-win32-ia32-msvc@npm:1.11.21": + version: 1.11.21 + resolution: "@swc/core-win32-ia32-msvc@npm:1.11.21" conditions: os=win32 & cpu=ia32 languageName: node linkType: hard -"@swc/core-win32-x64-msvc@npm:1.11.10": - version: 1.11.10 - resolution: "@swc/core-win32-x64-msvc@npm:1.11.10" +"@swc/core-win32-x64-msvc@npm:1.11.21": + version: 1.11.21 + resolution: "@swc/core-win32-x64-msvc@npm:1.11.21" conditions: os=win32 & cpu=x64 languageName: node linkType: hard "@swc/core@npm:^1.10.8, @swc/core@npm:^1.3.46": - version: 1.11.10 - resolution: "@swc/core@npm:1.11.10" + version: 1.11.21 + resolution: "@swc/core@npm:1.11.21" dependencies: - "@swc/core-darwin-arm64": "npm:1.11.10" - "@swc/core-darwin-x64": "npm:1.11.10" - "@swc/core-linux-arm-gnueabihf": "npm:1.11.10" - "@swc/core-linux-arm64-gnu": "npm:1.11.10" - "@swc/core-linux-arm64-musl": "npm:1.11.10" - "@swc/core-linux-x64-gnu": "npm:1.11.10" - "@swc/core-linux-x64-musl": "npm:1.11.10" - "@swc/core-win32-arm64-msvc": "npm:1.11.10" - "@swc/core-win32-ia32-msvc": "npm:1.11.10" - "@swc/core-win32-x64-msvc": "npm:1.11.10" + "@swc/core-darwin-arm64": "npm:1.11.21" + "@swc/core-darwin-x64": "npm:1.11.21" + "@swc/core-linux-arm-gnueabihf": "npm:1.11.21" + "@swc/core-linux-arm64-gnu": "npm:1.11.21" + "@swc/core-linux-arm64-musl": "npm:1.11.21" + "@swc/core-linux-x64-gnu": "npm:1.11.21" + "@swc/core-linux-x64-musl": "npm:1.11.21" + "@swc/core-win32-arm64-msvc": "npm:1.11.21" + "@swc/core-win32-ia32-msvc": "npm:1.11.21" + "@swc/core-win32-x64-msvc": "npm:1.11.21" "@swc/counter": "npm:^0.1.3" - "@swc/types": "npm:^0.1.19" + "@swc/types": "npm:^0.1.21" peerDependencies: - "@swc/helpers": "*" + "@swc/helpers": ">=0.5.17" dependenciesMeta: "@swc/core-darwin-arm64": optional: true @@ -19175,7 +19176,7 @@ __metadata: peerDependenciesMeta: "@swc/helpers": optional: true - checksum: 10/4fcda5222fe4311dd6fe07586c72458f86a3a7ccee09cc7115ff3308f12d84a019d0b6996bcc778014f30f9a683de2d94a21498f69f8ed53941912c851716572 + checksum: 10/98a0f201a0a4aa026b0b07c61c8da49d94d4ac3b059b466416c90b9b2cb4f457d836ae55ccfe90b0a89c7bdde36526ba5b7747c4e616c0d556c733e3728e9dd4 languageName: node linkType: hard @@ -19187,11 +19188,11 @@ __metadata: linkType: hard "@swc/helpers@npm:^0.5.0, @swc/helpers@npm:^0.5.8": - version: 0.5.15 - resolution: "@swc/helpers@npm:0.5.15" + version: 0.5.17 + resolution: "@swc/helpers@npm:0.5.17" dependencies: tslib: "npm:^2.8.0" - checksum: 10/e3f32c6deeecfb0fa3f22edff03a7b358e7ce16d27b0f1c8b5cdc3042c5c4ce4da6eac0b781ab7cc4f54696ece657467d56734fb26883439fb00017385364c4c + checksum: 10/1fc8312a78f1f99c8ec838585445e99763eeebff2356100738cdfdb8ad47d2d38df678ee6edd93a90fe319ac52da67adc14ac00eb82b606c5fb8ebc5d06ec2a2 languageName: node linkType: hard @@ -19208,12 +19209,12 @@ __metadata: languageName: node linkType: hard -"@swc/types@npm:^0.1.19": - version: 0.1.19 - resolution: "@swc/types@npm:0.1.19" +"@swc/types@npm:^0.1.21": + version: 0.1.21 + resolution: "@swc/types@npm:0.1.21" dependencies: "@swc/counter": "npm:^0.1.3" - checksum: 10/693147cc9b23147164ddff9cb89477c369fbeb103319584779352a9ff1c72e0a70b97a89dfd97629040db8956d668d7b7a8fed328ffea46a3e8c18577e396994 + checksum: 10/6554bf5c78519f49099a2ba448d170191a14b1c7a35df848f10ee4d6c03ecd681e5213884905187de1d1d221589ec8b5cb77f477d099dc1627c3ec9d7f2fcdb0 languageName: node linkType: hard @@ -19235,6 +19236,25 @@ __metadata: languageName: node linkType: hard +"@tanstack/react-table@npm:^8.21.2": + version: 8.21.2 + resolution: "@tanstack/react-table@npm:8.21.2" + dependencies: + "@tanstack/table-core": "npm:8.21.2" + peerDependencies: + react: ">=16.8" + react-dom: ">=16.8" + checksum: 10/62b944b79f0ac06b74921c1da4821a4f122f7b30e2bd3391b5eac2d15a8050f3ac7752282354520ec42a3fa382580ac88e28731121ad445bb65218614ab21fd1 + languageName: node + linkType: hard + +"@tanstack/table-core@npm:8.21.2": + version: 8.21.2 + resolution: "@tanstack/table-core@npm:8.21.2" + checksum: 10/6a435905fcfa2ac0d06963f14125f313a08086cb0c71949d60fbd04c3a5e229779f94ff6783e35cf09f77fddfbe987cfdd74b18577ac7476b5a43729f3e4b9d5 + languageName: node + linkType: hard + "@techdocs/cli@workspace:*, @techdocs/cli@workspace:packages/techdocs-cli": version: 0.0.0-use.local resolution: "@techdocs/cli@workspace:packages/techdocs-cli" @@ -19846,13 +19866,13 @@ __metadata: linkType: hard "@types/dockerode@npm:^3.3.0, @types/dockerode@npm:^3.3.29": - version: 3.3.37 - resolution: "@types/dockerode@npm:3.3.37" + version: 3.3.38 + resolution: "@types/dockerode@npm:3.3.38" dependencies: "@types/docker-modem": "npm:*" "@types/node": "npm:*" "@types/ssh2": "npm:*" - checksum: 10/c6611a6a26f8dfe1819d6b19278045020e956bd48dd5e2a054063732ee3808f64c5c5290936288ac68060c516cb56b2218e0bfe9182e391048f20f437879af28 + checksum: 10/439a2b905c44bac063ba707f01a35594eb1e44aba8d22d4a8029fd2c5e192d70eae1efe270f85633f4b178fe4223419e14d81b1227a5a6e1ed00fca48c8495dd languageName: node linkType: hard @@ -20483,11 +20503,11 @@ __metadata: linkType: hard "@types/node@npm:*, @types/node@npm:>=12, @types/node@npm:>=12.0.0, @types/node@npm:>=13.7.0, @types/node@npm:>=18.0.0, @types/node@npm:^22.0.0": - version: 22.13.10 - resolution: "@types/node@npm:22.13.10" + version: 22.14.0 + resolution: "@types/node@npm:22.14.0" dependencies: - undici-types: "npm:~6.20.0" - checksum: 10/57dc6a5e0110ca9edea8d7047082e649fa7fa813f79e4a901653b9174141c622f4336435648baced5b38d9f39843f404fa2d8d7a10981610da26066bc8caab48 + undici-types: "npm:~6.21.0" + checksum: 10/d0669a8a37a18532c886ccfa51eb3fe1e46088deb4d3d27ebcd5d7d68bd6343ad1c7a3fcb85164780a57629359c33a6c917ecff748ea232bceac7692acc96537 languageName: node linkType: hard @@ -20513,20 +20533,20 @@ __metadata: linkType: hard "@types/node@npm:^18.11.18, @types/node@npm:^18.11.9, @types/node@npm:^18.17.15": - version: 18.19.80 - resolution: "@types/node@npm:18.19.80" + version: 18.19.86 + resolution: "@types/node@npm:18.19.86" dependencies: undici-types: "npm:~5.26.4" - checksum: 10/05a54af019aae1fa7d7f8e6475071a7486cb8554f638894b5697ef1cad3b5ac6cbdd5fdfe3d8d70b3af7e56e0245b0033a986c00e1c09e80cb584db06e40c0ba + checksum: 10/83e8f07305b102776c1970c2fbe2347eba15f6cca3d50cf8991d5f4e463ee7e204fbb3dec599892d25e613ed3b93f7fb5794b0de874ea6ba884affbe99670cc2 languageName: node linkType: hard "@types/node@npm:^20.1.1, @types/node@npm:^20.16.0": - version: 20.17.24 - resolution: "@types/node@npm:20.17.24" + version: 20.17.30 + resolution: "@types/node@npm:20.17.30" dependencies: undici-types: "npm:~6.19.2" - checksum: 10/0c5fe294b003656b0f95ffce295c08e7ed3fa814ba9bf891e146dced90322d186e63837db9d9bb14d4f294fbe1a6fa1c89ced0b173380c8aaeb90de6c3eddb3b + checksum: 10/69fd3b177417be77b459e8f1dd4e78c85c686167086920fbf35a9fda301709bbeee6a87ad2591fb1ddd96c65e725ec6bb527a06496626a1c94367d1361048f8d languageName: node linkType: hard @@ -21379,14 +21399,14 @@ __metadata: linkType: hard "@typescript-eslint/eslint-plugin@npm:^8.17.0": - version: 8.26.0 - resolution: "@typescript-eslint/eslint-plugin@npm:8.26.0" + version: 8.29.1 + resolution: "@typescript-eslint/eslint-plugin@npm:8.29.1" dependencies: "@eslint-community/regexpp": "npm:^4.10.0" - "@typescript-eslint/scope-manager": "npm:8.26.0" - "@typescript-eslint/type-utils": "npm:8.26.0" - "@typescript-eslint/utils": "npm:8.26.0" - "@typescript-eslint/visitor-keys": "npm:8.26.0" + "@typescript-eslint/scope-manager": "npm:8.29.1" + "@typescript-eslint/type-utils": "npm:8.29.1" + "@typescript-eslint/utils": "npm:8.29.1" + "@typescript-eslint/visitor-keys": "npm:8.29.1" graphemer: "npm:^1.4.0" ignore: "npm:^5.3.1" natural-compare: "npm:^1.4.0" @@ -21395,23 +21415,23 @@ __metadata: "@typescript-eslint/parser": ^8.0.0 || ^8.0.0-alpha.0 eslint: ^8.57.0 || ^9.0.0 typescript: ">=4.8.4 <5.9.0" - checksum: 10/5a3d2445178b815398aa9707e112492ce15c1709e7760fc2d68e64fce609901f4145de923007f50c3bbd6d11ef9f6c7843f1df40ab93c99f8a6610bcf34aa5c2 + checksum: 10/0568894f0ea50e67622605eb347d4e26a41571ad06234478ac695a097e9b3ff6252d6d60034853d7a6b8ec644b5c1d354be21075d691173dd7f2fbecb1102674 languageName: node linkType: hard "@typescript-eslint/parser@npm:^8.16.0": - version: 8.26.0 - resolution: "@typescript-eslint/parser@npm:8.26.0" + version: 8.29.1 + resolution: "@typescript-eslint/parser@npm:8.29.1" dependencies: - "@typescript-eslint/scope-manager": "npm:8.26.0" - "@typescript-eslint/types": "npm:8.26.0" - "@typescript-eslint/typescript-estree": "npm:8.26.0" - "@typescript-eslint/visitor-keys": "npm:8.26.0" + "@typescript-eslint/scope-manager": "npm:8.29.1" + "@typescript-eslint/types": "npm:8.29.1" + "@typescript-eslint/typescript-estree": "npm:8.29.1" + "@typescript-eslint/visitor-keys": "npm:8.29.1" debug: "npm:^4.3.4" peerDependencies: eslint: ^8.57.0 || ^9.0.0 typescript: ">=4.8.4 <5.9.0" - checksum: 10/86843d488b58d47d4bd45fed25a5afbb033bd844b4517f6401ae2f9af0fdeaedaf5c9dd30e74a7bf5b6029cff10fec0e33ca073b1ffe4795df7403b58aaac58c + checksum: 10/effb4cc24e375e4229e711b3ea8611a205bf81964cb487f518dd4a7d6cecde7324201ce4e2c3cd420e0ce7649899294307da2cd77f145af4efef3a0292189f20 languageName: node linkType: hard @@ -21435,28 +21455,28 @@ __metadata: languageName: node linkType: hard -"@typescript-eslint/scope-manager@npm:8.26.0": - version: 8.26.0 - resolution: "@typescript-eslint/scope-manager@npm:8.26.0" +"@typescript-eslint/scope-manager@npm:8.29.1": + version: 8.29.1 + resolution: "@typescript-eslint/scope-manager@npm:8.29.1" dependencies: - "@typescript-eslint/types": "npm:8.26.0" - "@typescript-eslint/visitor-keys": "npm:8.26.0" - checksum: 10/beccc5c0a815f20d8ccd5f8c4365175df39b62d0eeaf4893ef9b25e2fd96d26ac20e667b91d258584d33b970a471240b1b5bee73b14dac6630a63b5ce0b9ecd4 + "@typescript-eslint/types": "npm:8.29.1" + "@typescript-eslint/visitor-keys": "npm:8.29.1" + checksum: 10/33a02f490b53436729f5ca2e6e0c5b8db72adb455274e5de43bdaada21033e7941aed1d92653321991e186af77f7794dc0ac35d2fce891cdf65a6d3fb192249e languageName: node linkType: hard -"@typescript-eslint/type-utils@npm:8.26.0": - version: 8.26.0 - resolution: "@typescript-eslint/type-utils@npm:8.26.0" +"@typescript-eslint/type-utils@npm:8.29.1": + version: 8.29.1 + resolution: "@typescript-eslint/type-utils@npm:8.29.1" dependencies: - "@typescript-eslint/typescript-estree": "npm:8.26.0" - "@typescript-eslint/utils": "npm:8.26.0" + "@typescript-eslint/typescript-estree": "npm:8.29.1" + "@typescript-eslint/utils": "npm:8.29.1" debug: "npm:^4.3.4" ts-api-utils: "npm:^2.0.1" peerDependencies: eslint: ^8.57.0 || ^9.0.0 typescript: ">=4.8.4 <5.9.0" - checksum: 10/cc383418bd208b5787ec93923a5ecb46f424b5f9a5aeb81f51382aa440671b6c85d1fe27527f2e0d711dfaff593d42ca6b57c10c839db800aa4d965d01ac8461 + checksum: 10/3774d6fb32c058b3fa607480e5603fdd2919e07d8babbc00aa703f31c6fd6f7fbc25c25ff246e7e6ac6b77ad0e0b66838a7136aebc31503a58fbe509f68ab2f4 languageName: node linkType: hard @@ -21474,10 +21494,10 @@ __metadata: languageName: node linkType: hard -"@typescript-eslint/types@npm:8.26.0": - version: 8.26.0 - resolution: "@typescript-eslint/types@npm:8.26.0" - checksum: 10/2fcd2eed0550bc7f95ccf54cf44aae50a38b531deae92c6a616890fff7f335eb2c030553062518fa1bde9e29009b2c92ed59489c2ef9d4e35e9df55f95a6992b +"@typescript-eslint/types@npm:8.29.1": + version: 8.29.1 + resolution: "@typescript-eslint/types@npm:8.29.1" + checksum: 10/99ff59e7af3728858af9b7fdc0165955bcf5cd2eefeaafabfbdd7951fbc8ad869cbb7bed7bcbed6c3c50a8661333b33364dc1de0a0c8f3c64d5882339a5d30dd languageName: node linkType: hard @@ -21518,12 +21538,12 @@ __metadata: languageName: node linkType: hard -"@typescript-eslint/typescript-estree@npm:8.26.0": - version: 8.26.0 - resolution: "@typescript-eslint/typescript-estree@npm:8.26.0" +"@typescript-eslint/typescript-estree@npm:8.29.1": + version: 8.29.1 + resolution: "@typescript-eslint/typescript-estree@npm:8.29.1" dependencies: - "@typescript-eslint/types": "npm:8.26.0" - "@typescript-eslint/visitor-keys": "npm:8.26.0" + "@typescript-eslint/types": "npm:8.29.1" + "@typescript-eslint/visitor-keys": "npm:8.29.1" debug: "npm:^4.3.4" fast-glob: "npm:^3.3.2" is-glob: "npm:^4.0.3" @@ -21532,22 +21552,22 @@ __metadata: ts-api-utils: "npm:^2.0.1" peerDependencies: typescript: ">=4.8.4 <5.9.0" - checksum: 10/f50101c138a545d0286b4c20be6e873c380cd2f3abac0bef7ce120e8c8297bad2e7ccb4ed4152ab455f2fb2761089d5d75e9d2ba277c3beef3019c99a9067c24 + checksum: 10/dded2ebe4c3287443000e3b825e673d0eddb7c48eb2d373c5b7059ea7dbbeba488d7f1de2e42ed7a9299ccff926a65821f2b5594022b49564026ba01c0cc07ab languageName: node linkType: hard -"@typescript-eslint/utils@npm:8.26.0, @typescript-eslint/utils@npm:^6.0.0 || ^7.0.0 || ^8.0.0, @typescript-eslint/utils@npm:^8.8.1": - version: 8.26.0 - resolution: "@typescript-eslint/utils@npm:8.26.0" +"@typescript-eslint/utils@npm:8.29.1, @typescript-eslint/utils@npm:^6.0.0 || ^7.0.0 || ^8.0.0, @typescript-eslint/utils@npm:^8.8.1": + version: 8.29.1 + resolution: "@typescript-eslint/utils@npm:8.29.1" dependencies: "@eslint-community/eslint-utils": "npm:^4.4.0" - "@typescript-eslint/scope-manager": "npm:8.26.0" - "@typescript-eslint/types": "npm:8.26.0" - "@typescript-eslint/typescript-estree": "npm:8.26.0" + "@typescript-eslint/scope-manager": "npm:8.29.1" + "@typescript-eslint/types": "npm:8.29.1" + "@typescript-eslint/typescript-estree": "npm:8.29.1" peerDependencies: eslint: ^8.57.0 || ^9.0.0 typescript: ">=4.8.4 <5.9.0" - checksum: 10/69b5ace76c27db4c6d9ce5e4d76aa17c712d90cbe61f3e8603c16a75d8ea38d27c54c4f70937bcd16f6352b26be79ee200f62af60d52b4fc6fe7e88fcaf93fe5 + checksum: 10/1d2c85c97a39e063fe490c0cdb6513716e4735bda0bc937475b44d9224074a5070f888dfed1e75f4a91c8f4d825b44fce90b685e07bda391dfeb2553b9b39a5a languageName: node linkType: hard @@ -21603,13 +21623,13 @@ __metadata: languageName: node linkType: hard -"@typescript-eslint/visitor-keys@npm:8.26.0": - version: 8.26.0 - resolution: "@typescript-eslint/visitor-keys@npm:8.26.0" +"@typescript-eslint/visitor-keys@npm:8.29.1": + version: 8.29.1 + resolution: "@typescript-eslint/visitor-keys@npm:8.29.1" dependencies: - "@typescript-eslint/types": "npm:8.26.0" + "@typescript-eslint/types": "npm:8.29.1" eslint-visitor-keys: "npm:^4.2.0" - checksum: 10/8800c84d711682949e27d72e65b501dbdc5de0009b7d74e289f5f9125aa21107dc55c6ef3dc970431acebe92e19e907d1622de2d2092a79eb8d29ac96670ea75 + checksum: 10/788290c369c13403692d857e0a464b5c2223e1fef28c717b7dbc61140d33697ce43c7d1a7cb7ac585f2012fc702ce2ec489363d34bf566303d3c48fa494803c5 languageName: node linkType: hard @@ -22162,6 +22182,15 @@ __metadata: languageName: node linkType: hard +"@whatwg-node/promise-helpers@npm:^1.0.0": + version: 1.3.0 + resolution: "@whatwg-node/promise-helpers@npm:1.3.0" + dependencies: + tslib: "npm:^2.6.3" + checksum: 10/4971319c340f4c16755dd3fe84772e28bcc550e1f723ae10f94e02910ded545f88e65da0a44499912e23c27ed5f7458e1303a99cdd5818792c5958205ee386b4 + languageName: node + linkType: hard + "@wmhilton/crypto-hash@npm:^1.0.2": version: 1.0.2 resolution: "@wmhilton/crypto-hash@npm:1.0.2" @@ -24954,13 +24983,13 @@ __metadata: languageName: node linkType: hard -"call-bound@npm:^1.0.2, call-bound@npm:^1.0.3": - version: 1.0.3 - resolution: "call-bound@npm:1.0.3" +"call-bound@npm:^1.0.2, call-bound@npm:^1.0.3, call-bound@npm:^1.0.4": + version: 1.0.4 + resolution: "call-bound@npm:1.0.4" dependencies: - call-bind-apply-helpers: "npm:^1.0.1" - get-intrinsic: "npm:^1.2.6" - checksum: 10/c39a8245f68cdb7c1f5eea7b3b1e3a7a90084ea6efebb78ebc454d698ade2c2bb42ec033abc35f1e596d62496b6100e9f4cdfad1956476c510130e2cda03266d + call-bind-apply-helpers: "npm:^1.0.2" + get-intrinsic: "npm:^1.3.0" + checksum: 10/ef2b96e126ec0e58a7ff694db43f4d0d44f80e641370c21549ed911fecbdbc2df3ebc9bddad918d6bbdefeafb60bb3337902006d5176d72bcd2da74820991af7 languageName: node linkType: hard @@ -26283,7 +26312,7 @@ __metadata: languageName: node linkType: hard -"cosmiconfig@npm:^8.1.0, cosmiconfig@npm:^8.2.0": +"cosmiconfig@npm:^8.2.0": version: 8.3.6 resolution: "cosmiconfig@npm:8.3.6" dependencies: @@ -26300,6 +26329,23 @@ __metadata: languageName: node linkType: hard +"cosmiconfig@npm:^9.0.0": + version: 9.0.0 + resolution: "cosmiconfig@npm:9.0.0" + dependencies: + env-paths: "npm:^2.2.1" + import-fresh: "npm:^3.3.0" + js-yaml: "npm:^4.1.0" + parse-json: "npm:^5.2.0" + peerDependencies: + typescript: ">=4.9.5" + peerDependenciesMeta: + typescript: + optional: true + checksum: 10/8bdf1dfbb6fdb3755195b6886dc0649a3c742ec75afa4cb8da7b070936aed22a4f4e5b7359faafe03180358f311dbc300d248fd6586c458203d376a40cc77826 + languageName: node + linkType: hard + "cpu-features@npm:~0.0.9": version: 0.0.9 resolution: "cpu-features@npm:0.0.9" @@ -27795,7 +27841,7 @@ __metadata: languageName: node linkType: hard -"dset@npm:^3.1.2": +"dset@npm:^3.1.2, dset@npm:^3.1.4": version: 3.1.4 resolution: "dset@npm:3.1.4" checksum: 10/6268c9e2049c8effe6e5a1952f02826e8e32468b5ced781f15f8f3b1c290da37626246fec014fbdd1503413f981dff6abd8a4c718ec9952fd45fccb6ac9de43f @@ -28846,8 +28892,8 @@ __metadata: linkType: hard "eslint-plugin-react@npm:^7.28.0, eslint-plugin-react@npm:^7.37.2": - version: 7.37.4 - resolution: "eslint-plugin-react@npm:7.37.4" + version: 7.37.5 + resolution: "eslint-plugin-react@npm:7.37.5" dependencies: array-includes: "npm:^3.1.8" array.prototype.findlast: "npm:^1.2.5" @@ -28859,7 +28905,7 @@ __metadata: hasown: "npm:^2.0.2" jsx-ast-utils: "npm:^2.4.1 || ^3.0.0" minimatch: "npm:^3.1.2" - object.entries: "npm:^1.1.8" + object.entries: "npm:^1.1.9" object.fromentries: "npm:^2.0.8" object.values: "npm:^1.2.1" prop-types: "npm:^15.8.1" @@ -28869,7 +28915,7 @@ __metadata: string.prototype.repeat: "npm:^1.0.0" peerDependencies: eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7 - checksum: 10/c538c10665c87cb90a0bcc4efe53a758570db10997d079d31474a9760116ef5584648fa22403d889ca672df8071bda10b40434ea0499e5ee8360bc5c8aba1679 + checksum: 10/ee1bd4e0ec64f29109d5a625bb703d179c82e0159c86c3f1b52fc1209d2994625a137dae303c333fb308a2e38315e44066d5204998177e31974382f9fda25d5c languageName: node linkType: hard @@ -30757,7 +30803,7 @@ __metadata: languageName: node linkType: hard -"get-intrinsic@npm:^1.1.3, get-intrinsic@npm:^1.2.1, get-intrinsic@npm:^1.2.4, get-intrinsic@npm:^1.2.5, get-intrinsic@npm:^1.2.6": +"get-intrinsic@npm:^1.1.3, get-intrinsic@npm:^1.2.1, get-intrinsic@npm:^1.2.4, get-intrinsic@npm:^1.2.5, get-intrinsic@npm:^1.2.6, get-intrinsic@npm:^1.3.0": version: 1.3.0 resolution: "get-intrinsic@npm:1.3.0" dependencies: @@ -31348,18 +31394,18 @@ __metadata: linkType: hard "graphql-config@npm:^5.0.2": - version: 5.1.3 - resolution: "graphql-config@npm:5.1.3" + version: 5.1.4 + resolution: "graphql-config@npm:5.1.4" dependencies: "@graphql-tools/graphql-file-loader": "npm:^8.0.0" "@graphql-tools/json-file-loader": "npm:^8.0.0" - "@graphql-tools/load": "npm:^8.0.0" + "@graphql-tools/load": "npm:^8.1.0" "@graphql-tools/merge": "npm:^9.0.0" "@graphql-tools/url-loader": "npm:^8.0.0" "@graphql-tools/utils": "npm:^10.0.0" - cosmiconfig: "npm:^8.1.0" + cosmiconfig: "npm:^9.0.0" jiti: "npm:^2.0.0" - minimatch: "npm:^9.0.5" + minimatch: "npm:^10.0.0" string-env-interpolation: "npm:^1.0.1" tslib: "npm:^2.4.0" peerDependencies: @@ -31368,7 +31414,7 @@ __metadata: peerDependenciesMeta: cosmiconfig-toml-loader: optional: true - checksum: 10/9d37f5d424f302808102d118988878be5e4841ba1a06a865cdb9052b24e26eaa9923fb18163bf4f32102d87b3895c53e2ffcdebc1d651f04b56f93f5c38b83c3 + checksum: 10/59f6f5091402b03df3d99d5b6a786d685e5d47508541e231387810cc375ad932b885c046ed41fec9ec96442fef3b89d79a502360aa24ddca5787cd53eabee46f languageName: node linkType: hard @@ -35453,8 +35499,8 @@ __metadata: linkType: hard "lint-staged@npm:^15.0.0": - version: 15.5.0 - resolution: "lint-staged@npm:15.5.0" + version: 15.5.1 + resolution: "lint-staged@npm:15.5.1" dependencies: chalk: "npm:^5.4.1" commander: "npm:^13.1.0" @@ -35468,7 +35514,7 @@ __metadata: yaml: "npm:^2.7.0" bin: lint-staged: bin/lint-staged.js - checksum: 10/5873584649c5f840b990036c20abd4b58d6b1313dad5505627b4d0cc077f0ec8ac0d6cf4cf4d959e66e0ab085db384bb12dce9490ff29217bf4ed96d0442ed51 + checksum: 10/58662ea6e40c9292a3499ffd01cf6c1e8415f79bee7526fc8d9abbb173ba020d0099d7996a407f67be8e0f23cc6a6f898d86b7e27f41f37ba924ec25597b7914 languageName: node linkType: hard @@ -37633,8 +37679,8 @@ __metadata: linkType: hard "msw@npm:^2.0.0, msw@npm:^2.0.8": - version: 2.7.3 - resolution: "msw@npm:2.7.3" + version: 2.7.4 + resolution: "msw@npm:2.7.4" dependencies: "@bundled-es-modules/cookie": "npm:^2.0.1" "@bundled-es-modules/statuses": "npm:^1.0.1" @@ -37661,7 +37707,7 @@ __metadata: optional: true bin: msw: cli/index.js - checksum: 10/f193329a68fc22e477a6f8504aa44a92bd12847f2eeac1dfbd8ec1cc43ff293112ec067de1c7fe312ba02beecb313fb00aeeebf5817432b57af2d796b2dff2fa + checksum: 10/3ce3cb190b1a036536a047c018fc4f52d23371765c97595127411695c11e73bc7c737fea8fb4a6b46b3cd36223031ffc23a8bbaff10d1daebdda3bb4a817dd34 languageName: node linkType: hard @@ -38638,14 +38684,15 @@ __metadata: languageName: node linkType: hard -"object.entries@npm:^1.1.8": - version: 1.1.8 - resolution: "object.entries@npm:1.1.8" +"object.entries@npm:^1.1.9": + version: 1.1.9 + resolution: "object.entries@npm:1.1.9" dependencies: - call-bind: "npm:^1.0.7" + call-bind: "npm:^1.0.8" + call-bound: "npm:^1.0.4" define-properties: "npm:^1.2.1" - es-object-atoms: "npm:^1.0.0" - checksum: 10/2301918fbd1ee697cf6ff7cd94f060c738c0a7d92b22fd24c7c250e9b593642c9707ad2c44d339303c1439c5967d8964251cdfc855f7f6ec55db2dd79e8dc2a7 + es-object-atoms: "npm:^1.1.1" + checksum: 10/24163ab1e1e013796693fc5f5d349e8b3ac0b6a34a7edb6c17d3dd45c6a8854145780c57d302a82512c1582f63720f4b4779d6c1cfba12cbb1420b978802d8a3 languageName: node linkType: hard @@ -46190,7 +46237,7 @@ __metadata: languageName: node linkType: hard -"tslib@npm:2, tslib@npm:2.8.1, tslib@npm:^2.0.0, tslib@npm:^2.0.1, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.2.0, tslib@npm:^2.3.0, tslib@npm:^2.3.1, tslib@npm:^2.4.0, tslib@npm:^2.4.1, tslib@npm:^2.5.0, tslib@npm:^2.6.0, tslib@npm:^2.6.2, tslib@npm:^2.8.0, tslib@npm:^2.8.1": +"tslib@npm:2, tslib@npm:2.8.1, tslib@npm:^2.0.0, tslib@npm:^2.0.1, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.2.0, tslib@npm:^2.3.0, tslib@npm:^2.3.1, tslib@npm:^2.4.0, tslib@npm:^2.4.1, tslib@npm:^2.5.0, tslib@npm:^2.6.0, tslib@npm:^2.6.2, tslib@npm:^2.6.3, tslib@npm:^2.8.0, tslib@npm:^2.8.1": version: 2.8.1 resolution: "tslib@npm:2.8.1" checksum: 10/3e2e043d5c2316461cb54e5c7fe02c30ef6dccb3384717ca22ae5c6b5bc95232a6241df19c622d9c73b809bea33b187f6dbc73030963e29950c2141bc32a79f7 @@ -46666,10 +46713,10 @@ __metadata: languageName: node linkType: hard -"undici-types@npm:~6.20.0": - version: 6.20.0 - resolution: "undici-types@npm:6.20.0" - checksum: 10/583ac7bbf4ff69931d3985f4762cde2690bb607844c16a5e2fbb92ed312fe4fa1b365e953032d469fa28ba8b224e88a595f0b10a449332f83fa77c695e567dbe +"undici-types@npm:~6.21.0": + version: 6.21.0 + resolution: "undici-types@npm:6.21.0" + checksum: 10/ec8f41aa4359d50f9b59fa61fe3efce3477cc681908c8f84354d8567bb3701fafdddf36ef6bff307024d3feb42c837cf6f670314ba37fc8145e219560e473d14 languageName: node linkType: hard