diff --git a/.changeset/afraid-experts-explain.md b/.changeset/afraid-experts-explain.md new file mode 100644 index 0000000000..38eb3709d0 --- /dev/null +++ b/.changeset/afraid-experts-explain.md @@ -0,0 +1,5 @@ +--- +'@backstage/cli-node': patch +--- + +Added `type` field to `BackstagePackageJson` type. diff --git a/.changeset/beige-dingos-destroy.md b/.changeset/beige-dingos-destroy.md new file mode 100644 index 0000000000..325c150119 --- /dev/null +++ b/.changeset/beige-dingos-destroy.md @@ -0,0 +1,18 @@ +--- +'@backstage/cli': minor +--- + +**BREAKING**: Add support for native ESM in Node.js code. This changes the behavior of dynamic import expressions in Node.js code. Typically this can be fixed by replacing `import(...)` with `require(...)`, with an `as typeof import(...)` cast if needed for types. This is because dynamic imports will no longer be transformed to `require(...)` calls, but instead be left as-is. This in turn allows you to load ESM modules from CommonJS code using `import(...)`. + +This change adds support for the following in Node.js packages, across type checking, package builds, runtime transforms and Jest tests: + +- Dynamic imports that load ESM modules from CommonJS code. +- Both `.mjs` and `.mts` files as explicit ESM files, as well as `.cjs` and `.cts` as explicit CommonJS files. +- Support for the `"type": "module"` field in `package.json` to indicate that the package is an ESM package. + +There are a few caveats to be aware of: + +- To enable support for native ESM in tests, you need to run the tests with the `--experimental-vm-modules` flag enabled, typically via `NODE_OPTIONS='--experimental-vm-modules'`. +- Declaring a package as `"type": "module"` in `package.json` is supported, but in tests it will cause all local transitive dependencies to also be treated as ESM, regardless of whether they declare `"type": "module"` or not. +- Node.js has an [ESM interoperability layer with CommonJS](https://nodejs.org/docs/latest-v22.x/api/esm.html#interoperability-with-commonjs) that allows for imports from ESM to identify named exports in CommonJS packages. This interoperability layer is **only** enabled when importing packages with a `.cts` or `.cjs` extension. This is because the interoperability layer is not fully compatible with the NPM ecosystem, and would break package if it was enabled for `.js` files. +- Dynamic imports of CommonJS packages will vary in shape depending on the runtime, i.e. test vs local development, etc. It is therefore recommended to avoid dynamic imports of CommonJS packages and instead use `require`, or to use the explicit CommonJS extensions as mentioned above. If you do need to dynamically import CommonJS packages, avoid using `default` exports, as the shape of them vary across different environments and you would otherwise need to manually unwrap the import based on the shape of the module object. diff --git a/.changeset/clean-squids-build.md b/.changeset/clean-squids-build.md new file mode 100644 index 0000000000..3c1e0b56a7 --- /dev/null +++ b/.changeset/clean-squids-build.md @@ -0,0 +1,6 @@ +--- +'@backstage/plugin-notifications-backend': patch +'@backstage/plugin-notifications': patch +--- + +added topic filter for notifications diff --git a/.changeset/curly-humans-prove.md b/.changeset/curly-humans-prove.md new file mode 100644 index 0000000000..4e0ca9c90e --- /dev/null +++ b/.changeset/curly-humans-prove.md @@ -0,0 +1,7 @@ +--- +'@backstage/backend-test-utils': patch +'@backstage/backend-defaults': patch +'@backstage/config-loader': patch +--- + +Internal refactor to use explicit `require` for lazy-loading dependency. diff --git a/.changeset/dry-horses-report.md b/.changeset/dry-horses-report.md new file mode 100644 index 0000000000..b7a0b4cd46 --- /dev/null +++ b/.changeset/dry-horses-report.md @@ -0,0 +1,5 @@ +--- +'@backstage/backend-test-utils': patch +--- + +Sync feature installation compatibility logic with `@backstage/backend-app-api`. diff --git a/.changeset/fair-mangos-sleep.md b/.changeset/fair-mangos-sleep.md new file mode 100644 index 0000000000..8f0a6371c3 --- /dev/null +++ b/.changeset/fair-mangos-sleep.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog-backend': patch +--- + +Cleanup `refresh_state_references` for entity processors and providers that are no longer in control of a `refresh_state` row for entity diff --git a/.changeset/quiet-phones-sell.md b/.changeset/quiet-phones-sell.md new file mode 100644 index 0000000000..f41f5d685e --- /dev/null +++ b/.changeset/quiet-phones-sell.md @@ -0,0 +1,5 @@ +--- +'@backstage/repo-tools': patch +--- + +Internal refactor to support native ESM. diff --git a/.changeset/sharp-years-drive.md b/.changeset/sharp-years-drive.md new file mode 100644 index 0000000000..92ade2b972 --- /dev/null +++ b/.changeset/sharp-years-drive.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-search-backend-module-catalog': patch +--- + +Modified the logic for generating the location URL by encoding the entity property values with `encodeURIComponent`. This enhancement improves the safety and reliability of the URL. diff --git a/.changeset/twelve-eyes-stare.md b/.changeset/twelve-eyes-stare.md new file mode 100644 index 0000000000..bd2db50c9b --- /dev/null +++ b/.changeset/twelve-eyes-stare.md @@ -0,0 +1,5 @@ +--- +'@backstage/backend-dynamic-feature-service': patch +--- + +Make sure changes are successfully tracked before starting up scanner. diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 951900dd49..bcf5ed94a0 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -202,7 +202,7 @@ jobs: env: CI: true - NODE_OPTIONS: --max-old-space-size=8192 --no-node-snapshot + NODE_OPTIONS: --max-old-space-size=8192 --no-node-snapshot --experimental-vm-modules INTEGRATION_TEST_GITHUB_TOKEN: ${{ secrets.INTEGRATION_TEST_GITHUB_TOKEN }} INTEGRATION_TEST_GITLAB_TOKEN: ${{ secrets.INTEGRATION_TEST_GITLAB_TOKEN }} INTEGRATION_TEST_BITBUCKET_TOKEN: ${{ secrets.INTEGRATION_TEST_BITBUCKET_TOKEN }} diff --git a/.github/workflows/verify_windows.yml b/.github/workflows/verify_windows.yml index 01160254f4..1eee6e61f3 100644 --- a/.github/workflows/verify_windows.yml +++ b/.github/workflows/verify_windows.yml @@ -21,7 +21,7 @@ jobs: env: CI: true - NODE_OPTIONS: --max-old-space-size=8192 --no-node-snapshot + NODE_OPTIONS: --max-old-space-size=8192 --no-node-snapshot --experimental-vm-modules INTEGRATION_TEST_GITHUB_TOKEN: ${{ secrets.INTEGRATION_TEST_GITHUB_TOKEN }} INTEGRATION_TEST_GITLAB_TOKEN: ${{ secrets.INTEGRATION_TEST_GITLAB_TOKEN }} INTEGRATION_TEST_BITBUCKET_TOKEN: ${{ secrets.INTEGRATION_TEST_BITBUCKET_TOKEN }} diff --git a/canon-docs/package.json b/canon-docs/package.json index 824a645f99..9fddf08c20 100644 --- a/canon-docs/package.json +++ b/canon-docs/package.json @@ -9,11 +9,15 @@ "watch-css": "node scripts/watch-css.js" }, "dependencies": { + "@codemirror/lang-sass": "^6.0.2", + "@lezer/highlight": "^1.2.1", "@mdx-js/loader": "^3.1.0", "@mdx-js/react": "^3.1.0", "@next/mdx": "^15.1.4", "@storybook/react": "^8.4.7", "@types/mdx": "^2.0.13", + "@uiw/codemirror-themes": "^4.23.7", + "@uiw/react-codemirror": "^4.23.7", "next": "14.2.23", "react": "^18", "react-dom": "^18", diff --git a/canon-docs/src/app/globals.css b/canon-docs/src/app/globals.css index 4b39735a22..5efc0407e7 100644 --- a/canon-docs/src/app/globals.css +++ b/canon-docs/src/app/globals.css @@ -35,3 +35,37 @@ iframe { font-weight: var(--shiki-dark-font-weight) !important; text-decoration: var(--shiki-dark-text-decoration) !important; } + +.cm-editor { + transition: background-color 0.2s ease-in-out; +} + +.ͼ2 .cm-gutters { + background-color: var(--canon-surface-2); + border-right: 1px solid var(--canon-border-base); + transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out; +} + +.ͼ1 .cm-lineNumbers .cm-gutterElement { + padding-right: 8px; + padding-left: 8px; + font-size: 0.875rem; + display: flex; + align-items: center; + justify-content: flex-end; + min-width: 34px; +} + +.cm-line { + font-size: 0.875rem; +} + +.ͼ1 .cm-line { + padding-left: 12px; + padding-top: 1px; + padding-bottom: 1px; +} + +.cm-focused { + outline: none !important; +} diff --git a/canon-docs/src/app/layout.tsx b/canon-docs/src/app/layout.tsx index 6eb1856a1d..99b5f22739 100644 --- a/canon-docs/src/app/layout.tsx +++ b/canon-docs/src/app/layout.tsx @@ -2,7 +2,7 @@ import type { Metadata } from 'next'; import { Sidebar } from '../components/Sidebar'; import { Toolbar } from '@/components/Toolbar'; import { Providers } from './providers'; - +import { CustomTheme } from '@/components/CustomTheme'; import styles from './page.module.css'; import './globals.css'; @@ -13,6 +13,7 @@ import '/public/backstage.css'; export const metadata: Metadata = { title: 'Canon', description: 'UI library for Backstage', + metadataBase: new URL('https://canon.backstage.io'), }; export default function RootLayout({ @@ -35,6 +36,7 @@ export default function RootLayout({ {children} + diff --git a/canon-docs/src/components/CustomTheme/customTheme.tsx b/canon-docs/src/components/CustomTheme/customTheme.tsx new file mode 100644 index 0000000000..3d8ed394bd --- /dev/null +++ b/canon-docs/src/components/CustomTheme/customTheme.tsx @@ -0,0 +1,147 @@ +'use client'; + +import { useEffect, useState, useCallback } from 'react'; +import CodeMirror from '@uiw/react-codemirror'; +import { sass } from '@codemirror/lang-sass'; +import styles from './styles.module.css'; +import { usePlayground } from '@/utils/playground-context'; +import { AnimatePresence, motion } from 'framer-motion'; +import { Icon } from '../../../../packages/canon'; +import { createTheme } from '@uiw/codemirror-themes'; +import { tags as t } from '@lezer/highlight'; + +const defaultTheme = `:root { + --canon-accent: #000; +}`; + +const myTheme = createTheme({ + theme: 'light', + settings: { + background: 'var(--canon-surface-1)', + backgroundImage: '', + foreground: '#6182B8', + caret: '#5d00ff', + selection: '#036dd626', + selectionMatch: '#036dd626', + lineHighlight: '#8a91991a', + gutterBackground: '#fff', + gutterForeground: '#8a919966', + }, + styles: [ + { tag: t.comment, color: '#787b8099' }, + { tag: t.variableName, color: '#0080ff' }, + { tag: [t.string, t.special(t.brace)], color: '#6182B8' }, + { tag: t.number, color: '#6182B8' }, + { tag: t.bool, color: '#6182B8' }, + { tag: t.null, color: '#6182B8' }, + { tag: t.keyword, color: '#6182B8' }, + { tag: t.operator, color: '#6182B8' }, + { tag: t.className, color: '#6182B8' }, + { tag: t.definition(t.typeName), color: '#6182B8' }, + { tag: t.typeName, color: '#6182B8' }, + { tag: t.angleBracket, color: '#6182B8' }, + { tag: t.tagName, color: '#6182B8' }, + { tag: t.attributeName, color: '#6182B8' }, + ], +}); + +export const CustomTheme = () => { + const [isClient, setIsClient] = useState(false); + const [open, setOpen] = useState(true); + const [customTheme, setCustomTheme] = useState(undefined); + const { selectedThemeName } = usePlayground(); + const [savedMessage, setSavedMessage] = useState('Save'); + + const updateStyleElement = (theme: string) => { + let styleElement = document.getElementById( + 'custom-theme-style', + ) as HTMLStyleElement; + + if (!styleElement) { + styleElement = document.createElement('style'); + styleElement.id = 'custom-theme-style'; + document.head.appendChild(styleElement); + } + + styleElement.textContent = theme; + }; + + useEffect(() => { + if (selectedThemeName === 'custom') { + let storedTheme = localStorage.getItem('customThemeCss'); + if (!storedTheme) { + storedTheme = defaultTheme; + localStorage.setItem('customThemeCss', storedTheme); + } + setCustomTheme(storedTheme); + updateStyleElement(storedTheme); + } else { + const styleElement = document.getElementById( + 'custom-theme-style', + ) as HTMLStyleElement; + if (styleElement) { + styleElement.remove(); + } + } + }, [selectedThemeName]); + + useEffect(() => { + setIsClient(true); + }, []); + + const handleSave = () => { + if (customTheme) { + localStorage.setItem('customThemeCss', customTheme); + updateStyleElement(customTheme); + setSavedMessage('Saved!'); + setTimeout(() => setSavedMessage('Save'), 1000); + } + }; + + const handleChange = useCallback((val: string) => { + setCustomTheme(val); + }, []); + + if (isClient === false) return null; + + return ( + + {selectedThemeName === 'custom' && ( + +
+
Custom Theme
+
+ {open && ( + + )} + +
+
+
+ +
+ + )} + + ); +}; diff --git a/canon-docs/src/components/CustomTheme/index.ts b/canon-docs/src/components/CustomTheme/index.ts new file mode 100644 index 0000000000..6805b2c087 --- /dev/null +++ b/canon-docs/src/components/CustomTheme/index.ts @@ -0,0 +1 @@ +export { CustomTheme } from './customTheme'; diff --git a/canon-docs/src/components/CustomTheme/styles.module.css b/canon-docs/src/components/CustomTheme/styles.module.css new file mode 100644 index 0000000000..a4f51c8a1d --- /dev/null +++ b/canon-docs/src/components/CustomTheme/styles.module.css @@ -0,0 +1,77 @@ +.container { + position: fixed; + bottom: 16px; + right: 16px; + width: 240px; + height: 47px; + background-color: var(--canon-surface-1); + border-radius: 0.375rem; + border: 1px solid var(--canon-border-base); + display: flex; + flex-direction: column; + overflow: hidden; + transition-property: background-color, border-color, height, width; + transition-duration: 0.2s; + transition-timing-function: ease-in-out; +} + +.open { + width: 36%; + height: 348px; +} + +.editor { + flex: 1; +} + +.editorContainer { + overflow: hidden; +} + +.header { + height: 46px; + flex-shrink: 0; + border-bottom: 1px solid var(--canon-border-base); + background-color: var(--canon-surface-1); + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 12px 0 16px; + transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out; +} + +.headerLeft { + font-size: 0.875rem; +} + +.headerRight { + display: flex; + gap: 8px; +} + +.buttonSave { + all: unset; + height: 28px; + padding: 0 8px; + color: #fff; + background-color: #000; + border-radius: 0.25rem; + cursor: pointer; + font-size: 0.75rem; +} + +.buttonClose { + all: unset; + height: 28px; + padding: 0 8px; + color: #fff; + background-color: var(--canon-surface-2); + color: var(--canon-text-primary); + transition: background-color 0.2s ease-in-out; + border-radius: 0.25rem; + cursor: pointer; + font-size: 0.875rem; + display: flex; + align-items: center; + justify-content: center; +} diff --git a/canon-docs/src/components/Sidebar/Sidebar.module.css b/canon-docs/src/components/Sidebar/Sidebar.module.css index 870f504d28..f3bdd3f2e7 100644 --- a/canon-docs/src/components/Sidebar/Sidebar.module.css +++ b/canon-docs/src/components/Sidebar/Sidebar.module.css @@ -35,15 +35,11 @@ position: relative; } -.menu a { - display: flex; - text-decoration: none; - height: 28px; - align-items: center; -} - .section { width: 100%; + display: flex; + flex-direction: column; + gap: 2px; } .sectionTitle { @@ -54,12 +50,14 @@ } .line { + text-decoration: none; + align-items: center; width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; - height: 28px; + height: 26px; padding: 0 12px; border-radius: 4px; transition: background-color 0.2s ease-in-out; diff --git a/canon-docs/src/components/Sidebar/docs.tsx b/canon-docs/src/components/Sidebar/docs.tsx index 13c1675c20..f207036cfa 100644 --- a/canon-docs/src/components/Sidebar/docs.tsx +++ b/canon-docs/src/components/Sidebar/docs.tsx @@ -2,8 +2,7 @@ import Link from 'next/link'; import { components, overview, layoutComponents, theme } from '@/utils/data'; -import { Box } from '../../../../packages/canon/src/components/Box'; -import { Text } from '../../../../packages/canon/src/components/Text'; +import { Box } from '../../../../packages/canon'; import { motion } from 'framer-motion'; import styles from './Sidebar.module.css'; import { usePathname } from 'next/navigation'; diff --git a/canon-docs/src/components/Toolbar/theme-name.module.css b/canon-docs/src/components/Toolbar/theme-name.module.css index 6f2ceb427f..c9700c571b 100644 --- a/canon-docs/src/components/Toolbar/theme-name.module.css +++ b/canon-docs/src/components/Toolbar/theme-name.module.css @@ -43,7 +43,7 @@ box-sizing: border-box; padding-block: 0.25rem; border-radius: 0.375rem; - background-color: canvas; + background-color: var(--canon-surface-1); color: var(--color-gray-900); border: 1px solid var(--canon-border-base); padding-inline: 0.25rem; diff --git a/canon-docs/src/components/Toolbar/theme-name.tsx b/canon-docs/src/components/Toolbar/theme-name.tsx index 57c858dd44..07b734de34 100644 --- a/canon-docs/src/components/Toolbar/theme-name.tsx +++ b/canon-docs/src/components/Toolbar/theme-name.tsx @@ -6,8 +6,9 @@ import { Icon } from '@backstage/canon'; import { usePlayground } from '@/utils/playground-context'; const themes = [ - { name: 'Backstage Legacy', value: 'legacy' }, { name: 'Backstage Default', value: 'default' }, + { name: 'Backstage Legacy', value: 'legacy' }, + { name: 'Custom theme', value: 'custom' }, ]; export const ThemeNameSelector = () => { @@ -31,7 +32,7 @@ export const ThemeNameSelector = () => { {themes.map(({ name, value }) => ( - + diff --git a/canon-docs/src/mdx-components.tsx b/canon-docs/src/mdx-components.tsx index 59eee5e18f..eec8eec438 100644 --- a/canon-docs/src/mdx-components.tsx +++ b/canon-docs/src/mdx-components.tsx @@ -2,7 +2,6 @@ import React, { ReactNode } from 'react'; import type { MDXComponents } from 'mdx/types'; import Image, { ImageProps } from 'next/image'; import { CodeBlock } from '@/components/CodeBlock'; -import { Heading } from '../../packages/canon/src/components/Heading'; import { Box } from '../../packages/canon/src/components/Box'; export function useMDXComponents(components: MDXComponents): MDXComponents { diff --git a/canon-docs/src/utils/playground-context.tsx b/canon-docs/src/utils/playground-context.tsx index 198c5a9aab..721851c3e4 100644 --- a/canon-docs/src/utils/playground-context.tsx +++ b/canon-docs/src/utils/playground-context.tsx @@ -7,16 +7,19 @@ import React, { } from 'react'; import { components } from './data'; +type Theme = 'light' | 'dark'; +type ThemeName = 'legacy' | 'default' | 'custom'; + // Create a context with an empty array as the default value const PlaygroundContext = createContext<{ selectedScreenSizes: string[]; setSelectedScreenSizes: (screenSizes: string[]) => void; selectedComponents: string[]; setSelectedComponents: (components: string[]) => void; - selectedTheme: string | null; - setSelectedTheme: (theme: string) => void; - selectedThemeName: string; - setSelectedThemeName: (themeName: string) => void; + selectedTheme: Theme; + setSelectedTheme: (theme: Theme) => void; + selectedThemeName: ThemeName; + setSelectedThemeName: (themeName: ThemeName) => void; }>({ selectedScreenSizes: [], setSelectedScreenSizes: () => {}, @@ -37,12 +40,14 @@ export const PlaygroundProvider = ({ children }: { children: ReactNode }) => { const [selectedComponents, setSelectedComponents] = useState( components.map(component => component.slug), ); - const [selectedTheme, setSelectedTheme] = useState(() => { - return isBrowser ? localStorage.getItem('theme') : 'light'; - }); - const [selectedThemeName, setSelectedThemeName] = useState(() => { + const [selectedTheme, setSelectedTheme] = useState(() => { return isBrowser - ? localStorage.getItem('theme-name') || 'default' + ? (localStorage.getItem('theme') as Theme) || 'light' + : 'light'; + }); + const [selectedThemeName, setSelectedThemeName] = useState(() => { + return isBrowser + ? (localStorage.getItem('theme-name') as ThemeName) || 'default' : 'default'; }); diff --git a/canon-docs/yarn.lock b/canon-docs/yarn.lock index fd0b1f8742..e8b236002c 100644 --- a/canon-docs/yarn.lock +++ b/canon-docs/yarn.lock @@ -5,6 +5,133 @@ __metadata: version: 6 cacheKey: 8 +"@babel/runtime@npm:^7.18.6": + version: 7.26.0 + resolution: "@babel/runtime@npm:7.26.0" + dependencies: + regenerator-runtime: ^0.14.0 + checksum: c8e2c0504ab271b3467a261a8f119bf2603eb857a0d71e37791f4e3fae00f681365073cc79f141ddaa90c6077c60ba56448004ad5429d07ac73532be9f7cf28a + languageName: node + linkType: hard + +"@codemirror/autocomplete@npm:^6.0.0": + version: 6.18.4 + resolution: "@codemirror/autocomplete@npm:6.18.4" + dependencies: + "@codemirror/language": ^6.0.0 + "@codemirror/state": ^6.0.0 + "@codemirror/view": ^6.17.0 + "@lezer/common": ^1.0.0 + checksum: 4216f45a17f6cfd8d33df53f940396f7d3707662570bf3a79d8d333f926e273a265fac13c362e29e3fa57ccdf444f1a047862f5f56c672cfc669c87ee975858f + languageName: node + linkType: hard + +"@codemirror/commands@npm:^6.0.0, @codemirror/commands@npm:^6.1.0": + version: 6.8.0 + resolution: "@codemirror/commands@npm:6.8.0" + dependencies: + "@codemirror/language": ^6.0.0 + "@codemirror/state": ^6.4.0 + "@codemirror/view": ^6.27.0 + "@lezer/common": ^1.1.0 + checksum: 7d819bab4830ec7b8c5dffdec4b035dfa664bfd1d2675e639e08a459df65f45be111e1b8b569b1a8a3253d5980cf2ecf4394d8a13509996cca1b65cc16d47a4e + languageName: node + linkType: hard + +"@codemirror/lang-css@npm:^6.2.0": + version: 6.3.1 + resolution: "@codemirror/lang-css@npm:6.3.1" + dependencies: + "@codemirror/autocomplete": ^6.0.0 + "@codemirror/language": ^6.0.0 + "@codemirror/state": ^6.0.0 + "@lezer/common": ^1.0.2 + "@lezer/css": ^1.1.7 + checksum: ed175d75d75bc0a059d1e60b3dcd8464d570da14fc97388439943c9c43e1e9146e37b83fe2ccaad9cd387420b7b411ea1d24ede78ecd1f2045a38acbb4dd36bc + languageName: node + linkType: hard + +"@codemirror/lang-sass@npm:^6.0.2": + version: 6.0.2 + resolution: "@codemirror/lang-sass@npm:6.0.2" + dependencies: + "@codemirror/lang-css": ^6.2.0 + "@codemirror/language": ^6.0.0 + "@codemirror/state": ^6.0.0 + "@lezer/common": ^1.0.2 + "@lezer/sass": ^1.0.0 + checksum: e7665aaab70476a952522b143fd7bd59f6c025746cbf7b542f6965f94eecac483b4afd03f6da98aaa1572e379194309b241c5264eff05c681c637aa26651b9ab + languageName: node + linkType: hard + +"@codemirror/language@npm:^6.0.0": + version: 6.10.8 + resolution: "@codemirror/language@npm:6.10.8" + dependencies: + "@codemirror/state": ^6.0.0 + "@codemirror/view": ^6.23.0 + "@lezer/common": ^1.1.0 + "@lezer/highlight": ^1.0.0 + "@lezer/lr": ^1.0.0 + style-mod: ^4.0.0 + checksum: 679b69d69faa94f028f996a7005d0c6c2a2e4cd7a7a2614f615c23d7b642c31fc1837915248e864cb1ad59a2f032d1a7a8ef486b5f9904e5f6fbe6f7d2882c38 + languageName: node + linkType: hard + +"@codemirror/lint@npm:^6.0.0": + version: 6.8.4 + resolution: "@codemirror/lint@npm:6.8.4" + dependencies: + "@codemirror/state": ^6.0.0 + "@codemirror/view": ^6.35.0 + crelt: ^1.0.5 + checksum: 640e3dd44eb167d952eb5c5b8518919ba46e164aa3471776342f7f9361e676b4627a76a9f01d51b22127b97413f2bc9b8c60299d8dfdd5fc8ad0225d42de7669 + languageName: node + linkType: hard + +"@codemirror/search@npm:^6.0.0": + version: 6.5.8 + resolution: "@codemirror/search@npm:6.5.8" + dependencies: + "@codemirror/state": ^6.0.0 + "@codemirror/view": ^6.0.0 + crelt: ^1.0.5 + checksum: 0f9633037492a7b647b606c30255ea42c4327319e643be7ea3aa2913ed8e4aa662589f457e376636521c7d4d1215fae0e8939f127db9c0790b19ae3b654c3bc4 + languageName: node + linkType: hard + +"@codemirror/state@npm:^6.0.0, @codemirror/state@npm:^6.1.1, @codemirror/state@npm:^6.4.0, @codemirror/state@npm:^6.5.0": + version: 6.5.1 + resolution: "@codemirror/state@npm:6.5.1" + dependencies: + "@marijn/find-cluster-break": ^1.0.0 + checksum: b7d6de9a87d5b55dadfadaeb6e1c991e0a91845d3cdd0bd953391f05363fcbaf21de79a4eec2816ab8c3e31293faeca82cc2bb729d080779df94b14e28ae0d8a + languageName: node + linkType: hard + +"@codemirror/theme-one-dark@npm:^6.0.0": + version: 6.1.2 + resolution: "@codemirror/theme-one-dark@npm:6.1.2" + dependencies: + "@codemirror/language": ^6.0.0 + "@codemirror/state": ^6.0.0 + "@codemirror/view": ^6.0.0 + "@lezer/highlight": ^1.0.0 + checksum: 29bc09f79534115f62658caf3d0db527fe347d058b69a8c7f580ae636827377aadd0606fd0d83dbab8d6f3b0a5df53d3253c619341b5fb93d2c8291a8efb9556 + languageName: node + linkType: hard + +"@codemirror/view@npm:^6.0.0, @codemirror/view@npm:^6.17.0, @codemirror/view@npm:^6.23.0, @codemirror/view@npm:^6.27.0, @codemirror/view@npm:^6.35.0": + version: 6.36.2 + resolution: "@codemirror/view@npm:6.36.2" + dependencies: + "@codemirror/state": ^6.5.0 + style-mod: ^4.1.0 + w3c-keyname: ^2.2.4 + checksum: a58c64b623ddc65bb864917297f3b37f8e95280deec442024c43a9513b26352c829665c5d98e4dfcae104e8ecdfdb774d94a395a29da98a919c83482d2c14152 + languageName: node + linkType: hard + "@esbuild/aix-ppc64@npm:0.24.2": version: 0.24.2 resolution: "@esbuild/aix-ppc64@npm:0.24.2" @@ -261,6 +388,60 @@ __metadata: languageName: node linkType: hard +"@lezer/common@npm:^1.0.0, @lezer/common@npm:^1.0.2, @lezer/common@npm:^1.1.0, @lezer/common@npm:^1.2.0": + version: 1.2.3 + resolution: "@lezer/common@npm:1.2.3" + checksum: 9b5f52d949adae69d077f56c0b1c2295923108c3dfb241dd9f17654ff708f3eab81ff9fa7f0d0e4a668eabdcb9d961c73e75caca87c966ca1436e30e49130fcb + languageName: node + linkType: hard + +"@lezer/css@npm:^1.1.7": + version: 1.1.9 + resolution: "@lezer/css@npm:1.1.9" + dependencies: + "@lezer/common": ^1.2.0 + "@lezer/highlight": ^1.0.0 + "@lezer/lr": ^1.0.0 + checksum: 25c63475061a3c9f87961a7f85c5f547f14fb7e81b0864675d2206999a874a0559d676145c74c6ccde39519dbc8aa33e216265f5366d08060507b6c9e875fe0f + languageName: node + linkType: hard + +"@lezer/highlight@npm:^1.0.0, @lezer/highlight@npm:^1.2.1": + version: 1.2.1 + resolution: "@lezer/highlight@npm:1.2.1" + dependencies: + "@lezer/common": ^1.0.0 + checksum: a8822d7e37f79ff64669eb2df4a9f9d16580e88f2b276a646092e19a9bdccac304e92510e200e35869a8b1f6c27eba5972c508d347a277e9b722d582ab7a23d5 + languageName: node + linkType: hard + +"@lezer/lr@npm:^1.0.0": + version: 1.4.2 + resolution: "@lezer/lr@npm:1.4.2" + dependencies: + "@lezer/common": ^1.0.0 + checksum: 94318ad046c7dfcc8d37e26cb85b99623c39aef60aa51ec2abb30928e7a649f38fa5520f34bd5b356f1db11b6991999589f039e87c8949b0f163be3764f029d8 + languageName: node + linkType: hard + +"@lezer/sass@npm:^1.0.0": + version: 1.0.7 + resolution: "@lezer/sass@npm:1.0.7" + dependencies: + "@lezer/common": ^1.2.0 + "@lezer/highlight": ^1.0.0 + "@lezer/lr": ^1.0.0 + checksum: 32d37aa5d3143033f0b886c33a293b1d28b7eecdf2cb979cf7b4cbba0587be227dfed246c27116060ac9b2b2c0fe4b09df4b672690dd0593e876529583e7ef2a + languageName: node + linkType: hard + +"@marijn/find-cluster-break@npm:^1.0.0": + version: 1.0.2 + resolution: "@marijn/find-cluster-break@npm:1.0.2" + checksum: 0d836de25e04d58325813401ef3c2d34caf040da985a5935fcbc9d84e7b47a21bdb15f57d70c2bf0960bd29ed3dbbb1afd00cdd0fc4fafbee7fd0ffe7d508ae1 + languageName: node + linkType: hard + "@mdx-js/loader@npm:^3.1.0": version: 3.1.0 resolution: "@mdx-js/loader@npm:3.1.0" @@ -904,6 +1085,66 @@ __metadata: languageName: node linkType: hard +"@uiw/codemirror-extensions-basic-setup@npm:4.23.7": + version: 4.23.7 + resolution: "@uiw/codemirror-extensions-basic-setup@npm:4.23.7" + dependencies: + "@codemirror/autocomplete": ^6.0.0 + "@codemirror/commands": ^6.0.0 + "@codemirror/language": ^6.0.0 + "@codemirror/lint": ^6.0.0 + "@codemirror/search": ^6.0.0 + "@codemirror/state": ^6.0.0 + "@codemirror/view": ^6.0.0 + peerDependencies: + "@codemirror/autocomplete": ">=6.0.0" + "@codemirror/commands": ">=6.0.0" + "@codemirror/language": ">=6.0.0" + "@codemirror/lint": ">=6.0.0" + "@codemirror/search": ">=6.0.0" + "@codemirror/state": ">=6.0.0" + "@codemirror/view": ">=6.0.0" + checksum: 656c5f78db4c6216a9a7eeb65455f52b002b7a5426bb1b05f11b896d5dba9887c7b9ee5aee9fe369d6c7b3c69128ee842cb5c8fe029cd07c2e48ec9358039a30 + languageName: node + linkType: hard + +"@uiw/codemirror-themes@npm:^4.23.7": + version: 4.23.7 + resolution: "@uiw/codemirror-themes@npm:4.23.7" + dependencies: + "@codemirror/language": ^6.0.0 + "@codemirror/state": ^6.0.0 + "@codemirror/view": ^6.0.0 + peerDependencies: + "@codemirror/language": ">=6.0.0" + "@codemirror/state": ">=6.0.0" + "@codemirror/view": ">=6.0.0" + checksum: 8c2a9a7ee8df2de3f09ad1f18979c4b407f7dd03e1f6ddfe47837b9e4769b566a70259ec8c398473b6b6db79cdb8809d4acc2f2ed7851743e13ff95308f52e33 + languageName: node + linkType: hard + +"@uiw/react-codemirror@npm:^4.23.7": + version: 4.23.7 + resolution: "@uiw/react-codemirror@npm:4.23.7" + dependencies: + "@babel/runtime": ^7.18.6 + "@codemirror/commands": ^6.1.0 + "@codemirror/state": ^6.1.1 + "@codemirror/theme-one-dark": ^6.0.0 + "@uiw/codemirror-extensions-basic-setup": 4.23.7 + codemirror: ^6.0.0 + peerDependencies: + "@babel/runtime": ">=7.11.0" + "@codemirror/state": ">=6.0.0" + "@codemirror/theme-one-dark": ">=6.0.0" + "@codemirror/view": ">=6.0.0" + codemirror: ">=6.0.0" + react: ">=16.8.0" + react-dom: ">=16.8.0" + checksum: 5f6318b290f479c4718129578bdccbbdf64e3b588fdd79e3d80224779219eae7e249d40e4f88c864ed6ae40ea93036042313e983a022349563698593a2bf2e6c + languageName: node + linkType: hard + "@ungap/structured-clone@npm:^1.0.0, @ungap/structured-clone@npm:^1.2.0": version: 1.2.1 resolution: "@ungap/structured-clone@npm:1.2.1" @@ -1254,6 +1495,8 @@ __metadata: version: 0.0.0-use.local resolution: "canon-docs@workspace:." dependencies: + "@codemirror/lang-sass": ^6.0.2 + "@lezer/highlight": ^1.2.1 "@mdx-js/loader": ^3.1.0 "@mdx-js/react": ^3.1.0 "@next/mdx": ^15.1.4 @@ -1262,6 +1505,8 @@ __metadata: "@types/node": ^20 "@types/react": ^18 "@types/react-dom": ^18 + "@uiw/codemirror-themes": ^4.23.7 + "@uiw/react-codemirror": ^4.23.7 concurrently: ^9.1.2 eslint: ^8 eslint-config-next: 14.2.23 @@ -1339,6 +1584,21 @@ __metadata: languageName: node linkType: hard +"codemirror@npm:^6.0.0": + version: 6.0.1 + resolution: "codemirror@npm:6.0.1" + dependencies: + "@codemirror/autocomplete": ^6.0.0 + "@codemirror/commands": ^6.0.0 + "@codemirror/language": ^6.0.0 + "@codemirror/lint": ^6.0.0 + "@codemirror/search": ^6.0.0 + "@codemirror/state": ^6.0.0 + "@codemirror/view": ^6.0.0 + checksum: 1a78f7077ac5801bdbff162aa0c61bf2b974603c7e9a477198c3ce50c789af674a061d7c293c58b73807eda345c2b5228c38ad2aabb9319d552d5486f785cbef + languageName: node + linkType: hard + "collapse-white-space@npm:^2.0.0": version: 2.1.0 resolution: "collapse-white-space@npm:2.1.0" @@ -1394,6 +1654,13 @@ __metadata: languageName: node linkType: hard +"crelt@npm:^1.0.5": + version: 1.0.6 + resolution: "crelt@npm:1.0.6" + checksum: dad842093371ad702afbc0531bfca2b0a8dd920b23a42f26e66dabbed9aad9acd5b9030496359545ef3937c3aced0fd4ac39f7a2d280a23ddf9eb7fdcb94a69f + languageName: node + linkType: hard + "cross-spawn@npm:^7.0.0, cross-spawn@npm:^7.0.2": version: 7.0.6 resolution: "cross-spawn@npm:7.0.6" @@ -4380,6 +4647,13 @@ __metadata: languageName: node linkType: hard +"regenerator-runtime@npm:^0.14.0": + version: 0.14.1 + resolution: "regenerator-runtime@npm:0.14.1" + checksum: 9f57c93277b5585d3c83b0cf76be47b473ae8c6d9142a46ce8b0291a04bb2cf902059f0f8445dcabb3fb7378e5fe4bb4ea1e008876343d42e46d3b484534ce38 + languageName: node + linkType: hard + "regex-recursion@npm:^5.1.1": version: 5.1.1 resolution: "regex-recursion@npm:5.1.1" @@ -4971,6 +5245,13 @@ __metadata: languageName: node linkType: hard +"style-mod@npm:^4.0.0, style-mod@npm:^4.1.0": + version: 4.1.2 + resolution: "style-mod@npm:4.1.2" + checksum: 7c5c3e82747f9bcf5f288d8d07f50848e4630fe5ff7bfe4d94cc87d6b6a2588227cbf21b4c792ac6406e5852293300a75e710714479a5c59a06af677f0825ef8 + languageName: node + linkType: hard + "style-to-object@npm:^1.0.0": version: 1.0.8 resolution: "style-to-object@npm:1.0.8" @@ -5331,6 +5612,13 @@ __metadata: languageName: node linkType: hard +"w3c-keyname@npm:^2.2.4": + version: 2.2.8 + resolution: "w3c-keyname@npm:2.2.8" + checksum: 95bafa4c04fa2f685a86ca1000069c1ec43ace1f8776c10f226a73296caeddd83f893db885c2c220ebeb6c52d424e3b54d7c0c1e963bbf204038ff1a944fbb07 + languageName: node + linkType: hard + "which-boxed-primitive@npm:^1.1.0, which-boxed-primitive@npm:^1.1.1": version: 1.1.1 resolution: "which-boxed-primitive@npm:1.1.1" diff --git a/docs/tooling/cli/02-build-system.md b/docs/tooling/cli/02-build-system.md index 468e848694..8f9b086c33 100644 --- a/docs/tooling/cli/02-build-system.md +++ b/docs/tooling/cli/02-build-system.md @@ -483,29 +483,40 @@ of the build system, including the bundling, tests, builds, and type checking. Loaders are always selected based on the file extension. The following is a list of all supported file extensions: -| Extension | Exports | Purpose | -| --------- | ------------- | ------------------ | -| `.ts` | Script Module | TypeScript | -| `.tsx` | Script Module | TypeScript and XML | -| `.js` | Script Module | JavaScript | -| `.jsx` | Script Module | JavaScript and XML | -| `.mjs` | Script Module | ECMAScript Module | -| `.cjs` | Script Module | CommonJS Module | -| `.json` | JSON Data | JSON Data | -| `.yml` | JSON Data | YAML Data | -| `.yaml` | JSON Data | YAML Data | -| `.css` | classes | Style sheet | -| `.eot` | URL Path | Font | -| `.ttf` | URL Path | Font | -| `.woff2` | URL Path | Font | -| `.woff` | URL Path | Font | -| `.bmp` | URL Path | Image | -| `.gif` | URL Path | Image | -| `.jpeg` | URL Path | Image | -| `.jpg` | URL Path | Image | -| `.png` | URL Path | Image | -| `.svg` | URL Path | Image | -| `.md` | URL Path | Markdown File | +| Extension | Exports | Purpose | +| --------- | ------------- | ---------------------------- | +| `.ts` | Script Module | TypeScript | +| `.tsx` | Script Module | TypeScript and XML | +| `.mts` | Script Module | ECMAScript Module TypeScript | +| `.cts` | Script Module | CommonJS TypeScript | +| `.js` | Script Module | JavaScript | +| `.jsx` | Script Module | JavaScript and XML | +| `.mjs` | Script Module | ECMAScript Module | +| `.cjs` | Script Module | CommonJS Module | +| `.json` | JSON Data | JSON Data | +| `.yml` | JSON Data | YAML Data | +| `.yaml` | JSON Data | YAML Data | +| `.css` | classes | Style sheet | +| `.eot` | URL Path | Font | +| `.ttf` | URL Path | Font | +| `.woff2` | URL Path | Font | +| `.woff` | URL Path | Font | +| `.bmp` | URL Path | Image | +| `.gif` | URL Path | Image | +| `.jpeg` | URL Path | Image | +| `.jpg` | URL Path | Image | +| `.png` | URL Path | Image | +| `.svg` | URL Path | Image | +| `.md` | URL Path | Markdown File | + +## ECMAScript Modules + +The Backstage tooling supports [ECMAScript modules (ESM)](https://nodejs.org/docs/latest-v22.x/api/esm.html) in Node.js packages. This includes support for all the script module file extensions listed above during local development, in built packages, in tests, and during type checking. [Dynamic imports](https://nodejs.org/docs/latest-v22.x/api/esm.html#import-expressions) can be used to load ESM-only packages from CommonJS and vice versa. There are however a couple of limitations to be aware of: + +- To enable support for native ESM in tests, you need to run the tests with the `--experimental-vm-modules` flag enabled, typically via `NODE_OPTIONS='--experimental-vm-modules'`. +- Declaring a package as `"type": "module"` in `package.json` is supported, but in tests it will cause all local transitive dependencies to also be treated as ESM, regardless of whether they declare `"type": "module"` or not. +- Node.js has an [ESM interoperability layer with CommonJS](https://nodejs.org/docs/latest-v22.x/api/esm.html#interoperability-with-commonjs) that allows for imports from ESM to identify named exports in CommonJS packages. This interoperability layer is **only** enabled when importing packages with a `.cts` or `.cjs` extension. This is because the interoperability layer is not fully compatible with the NPM ecosystem, and would break package if it was enabled for `.js` files. +- Dynamic imports of CommonJS packages will vary in shape depending on the runtime, i.e. test vs local development, etc. It is therefore recommended to avoid dynamic imports of CommonJS packages and instead use `require`, or to use the explicit CommonJS extensions as mentioned above. If you do need to dynamically import CommonJS packages, avoid using `default` exports, as the shape of them vary across different environments and you would otherwise need to manually unwrap the import based on the shape of the module object. ## Jest Configuration diff --git a/package.json b/package.json index f4b44fdf52..b6633c8e75 100644 --- a/package.json +++ b/package.json @@ -49,8 +49,8 @@ "storybook": "yarn ./storybook run storybook", "techdocs-cli": "node scripts/techdocs-cli.js", "techdocs-cli:dev": "cross-env TECHDOCS_CLI_DEV_MODE=true node scripts/techdocs-cli.js", - "test": "NODE_OPTIONS=--no-node-snapshot backstage-cli repo test", - "test:all": "NODE_OPTIONS=--no-node-snapshot backstage-cli repo test --coverage", + "test": "NODE_OPTIONS='--no-node-snapshot --experimental-vm-modules' backstage-cli repo test", + "test:all": "NODE_OPTIONS='--no-node-snapshot --experimental-vm-modules' backstage-cli repo test --coverage", "test:e2e": "NODE_OPTIONS=--no-node-snapshot playwright test", "tsc": "tsc", "tsc:full": "backstage-cli repo clean && tsc --skipLibCheck false --incremental false" diff --git a/packages/backend-defaults/src/entrypoints/database/connectors/postgres.ts b/packages/backend-defaults/src/entrypoints/database/connectors/postgres.ts index e7e973ae4b..3583049a7d 100644 --- a/packages/backend-defaults/src/entrypoints/database/connectors/postgres.ts +++ b/packages/backend-defaults/src/entrypoints/database/connectors/postgres.ts @@ -103,7 +103,7 @@ export async function buildPgDatabaseConfig( Connector: CloudSqlConnector, IpAddressTypes, AuthTypes, - } = await import('@google-cloud/cloud-sql-connector'); + } = require('@google-cloud/cloud-sql-connector') as typeof import('@google-cloud/cloud-sql-connector'); const connector = new CloudSqlConnector(); const clientOpts = await connector.getOptions({ instanceConnectionName: config.connection.instance, diff --git a/packages/backend-dynamic-feature-service/src/manager/plugin-manager.ts b/packages/backend-dynamic-feature-service/src/manager/plugin-manager.ts index c64fca053c..398e9fb14c 100644 --- a/packages/backend-dynamic-feature-service/src/manager/plugin-manager.ts +++ b/packages/backend-dynamic-feature-service/src/manager/plugin-manager.ts @@ -68,7 +68,7 @@ export class DynamicPluginManager implements DynamicPluginProvider { preferAlpha: options.preferAlpha, }); const scannedPlugins = (await scanner.scanRoot()).packages; - scanner.trackChanges(); + await scanner.trackChanges(); const moduleLoader = options.moduleLoader || new CommonJSModuleLoader({ logger: options.logger }); diff --git a/packages/backend-test-utils/src/cache/memcache.ts b/packages/backend-test-utils/src/cache/memcache.ts index b7ac07cb13..e985ee1c7d 100644 --- a/packages/backend-test-utils/src/cache/memcache.ts +++ b/packages/backend-test-utils/src/cache/memcache.ts @@ -59,7 +59,8 @@ export async function startMemcachedContainer( image: string, ): Promise { // Lazy-load to avoid side-effect of importing testcontainers - const { GenericContainer } = await import('testcontainers'); + const { GenericContainer } = + require('testcontainers') as typeof import('testcontainers'); const container = await new GenericContainer(image) .withExposedPorts(11211) diff --git a/packages/backend-test-utils/src/cache/redis.ts b/packages/backend-test-utils/src/cache/redis.ts index 6185e4d076..cd6e5c2893 100644 --- a/packages/backend-test-utils/src/cache/redis.ts +++ b/packages/backend-test-utils/src/cache/redis.ts @@ -57,7 +57,8 @@ export async function connectToExternalRedis( export async function startRedisContainer(image: string): Promise { // Lazy-load to avoid side-effect of importing testcontainers - const { GenericContainer } = await import('testcontainers'); + const { GenericContainer } = + require('testcontainers') as typeof import('testcontainers'); const container = await new GenericContainer(image) .withExposedPorts(6379) diff --git a/packages/backend-test-utils/src/database/mysql.ts b/packages/backend-test-utils/src/database/mysql.ts index b27edb7f9d..a7c11d8452 100644 --- a/packages/backend-test-utils/src/database/mysql.ts +++ b/packages/backend-test-utils/src/database/mysql.ts @@ -72,7 +72,8 @@ export async function startMysqlContainer(image: string): Promise<{ const password = uuid(); // Lazy-load to avoid side-effect of importing testcontainers - const { GenericContainer } = await import('testcontainers'); + const { GenericContainer } = + require('testcontainers') as typeof import('testcontainers'); const container = await new GenericContainer(image) .withExposedPorts(3306) diff --git a/packages/backend-test-utils/src/database/postgres.ts b/packages/backend-test-utils/src/database/postgres.ts index c8a946d121..e6122b9ab7 100644 --- a/packages/backend-test-utils/src/database/postgres.ts +++ b/packages/backend-test-utils/src/database/postgres.ts @@ -72,7 +72,8 @@ export async function startPostgresContainer(image: string): Promise<{ const password = uuid(); // Lazy-load to avoid side-effect of importing testcontainers - const { GenericContainer } = await import('testcontainers'); + const { GenericContainer } = + require('testcontainers') as typeof import('testcontainers'); const container = await new GenericContainer(image) .withExposedPorts(5432) diff --git a/packages/backend-test-utils/src/next/wiring/TestBackend.ts b/packages/backend-test-utils/src/next/wiring/TestBackend.ts index 0c46c2cd5f..c8190b734b 100644 --- a/packages/backend-test-utils/src/next/wiring/TestBackend.ts +++ b/packages/backend-test-utils/src/next/wiring/TestBackend.ts @@ -210,10 +210,19 @@ function isPromise(value: unknown | Promise): value is Promise { ); } +// Same as in the backend-app-api, handles double defaults from dynamic imports function unwrapFeature( - feature: BackendFeature | (() => BackendFeature), + feature: BackendFeature | { default: BackendFeature }, ): BackendFeature { - return typeof feature === 'function' ? feature() : feature; + if ('$$type' in feature) { + return feature; + } + + if ('default' in feature) { + return feature.default; + } + + return feature; } const backendInstancesToCleanUp = new Array(); diff --git a/packages/canon/.storybook/main.ts b/packages/canon/.storybook/main.ts index cf7921268e..8bf24a7e23 100644 --- a/packages/canon/.storybook/main.ts +++ b/packages/canon/.storybook/main.ts @@ -9,11 +9,7 @@ function getAbsolutePath(value: string): any { return dirname(require.resolve(join(value, 'package.json'))); } const config: StorybookConfig = { - stories: [ - '../docs/**/*.mdx', - '../src/components/**/*.mdx', - '../src/components/**/*.stories.@(js|jsx|mjs|ts|tsx)', - ], + stories: ['../src/components/**/*.stories.@(js|jsx|mjs|ts|tsx)'], staticDirs: ['../static'], addons: [ getAbsolutePath('@storybook/addon-webpack5-compiler-swc'), diff --git a/packages/canon/.storybook/preview.tsx b/packages/canon/.storybook/preview.tsx index 1ac53acd86..867461818b 100644 --- a/packages/canon/.storybook/preview.tsx +++ b/packages/canon/.storybook/preview.tsx @@ -2,9 +2,6 @@ import React from 'react'; import type { Preview, ReactRenderer } from '@storybook/react'; import { withThemeByDataAttribute } from '@storybook/addon-themes'; -// Storybook specific styles -import '../docs/components/styles.css'; - // Canon specific styles import '../src/css/core.css'; import '../src/css/components.css'; diff --git a/packages/canon/docs/Home.mdx b/packages/canon/docs/Home.mdx deleted file mode 100644 index 5b85ab15ad..0000000000 --- a/packages/canon/docs/Home.mdx +++ /dev/null @@ -1,91 +0,0 @@ -import { Unstyled } from '@storybook/blocks'; -import { - Columns, - Text, - ComponentStatus, - Banner, - Title, - Roadmap, -} from './components'; -import { list } from './components/Roadmap/list'; - - - - - - - Welcome to the Canon, the new design library for Backstage plugins. This - project is still under active development but we will make sure to document - the API as we go. We are aiming to improve the general UI of Backstage and - plugins across Backstage. This new library will take time to build but we are - building it incrementally with not conflict with the existing theming system. - - - - This library is still under heavy construction. Please be aware that the API - will change until we reach a stable release. - - - - Component Status - - - We are still in the process of documenting the API and building the - components. You can use the statuses below to see what is ready and what is - coming soon. If there is a component missing that you need, please let us know - by opening an issue on GitHub. - - - - - - - - - - - - - - - - - - - - - - Roadmap - - - - - diff --git a/packages/canon/docs/Iconography.mdx b/packages/canon/docs/Iconography.mdx deleted file mode 100644 index 83d181af12..0000000000 --- a/packages/canon/docs/Iconography.mdx +++ /dev/null @@ -1,22 +0,0 @@ -import { Unstyled, Source, Meta } from '@storybook/blocks'; -import { Title, Text, IconLibrary } from './components'; - - - - - -Iconography - - - All our default icons are provided by [Remix Icon](https://remixicon.com/). We - don't import all icons to reduce the bundle size but we cherry pick a nice - selection for you to use in your application. The list of names is set down - below. To use an icon, you can use the `Icon` component and pass the name of - the icon you want to use. - - -`} language="tsx" dark /> - - - - diff --git a/packages/canon/docs/Layout.mdx b/packages/canon/docs/Layout.mdx deleted file mode 100644 index 9145f71aed..0000000000 --- a/packages/canon/docs/Layout.mdx +++ /dev/null @@ -1,54 +0,0 @@ -import { Unstyled, Source, Meta } from '@storybook/blocks'; -import { Title, Text, LayoutComponents } from './components'; -import * as Table from './components/Table'; - - - - - -Layout - - Canon is made for extensibility. We built this library to make it easy for any - Backstage plugin creator to be able to build their ideas at speed ensuring - consistency across the rest of your ecosystem. Each component is designed to - be editable to match your need but sometimes you want to have more control - over the layout of your page. To help you with that, we created a set of - layout components that you can use to build your own layouts. All of these - components are built to extend on our theming system, making it easy for you - to build your own layouts. Sometimes these components are not enough so we - created a set of helpers to be used with any CSS-in-JS library. - - -Layout Components - - - We built a couple of layout components to help you build responsive elements - that will be consistent with the rest of your Backstage instance. These - components are opinionated and use TypeScript to ensure that the props you - provide are the ones coming from the theme. - - - - Hello World - - Project 1 - Project 2 - -`} - language="tsx" - dark -/> - - - -Layout Helpers - - - Sometimes you want to use global tokens dynamically outside of React - components. To help you with that we would like to provide a set of helpers - that you can use in your code. These helpers are not available just yet but we - are working on it. - - - diff --git a/packages/canon/docs/Responsive.mdx b/packages/canon/docs/Responsive.mdx deleted file mode 100644 index 85292ee555..0000000000 --- a/packages/canon/docs/Responsive.mdx +++ /dev/null @@ -1,150 +0,0 @@ -import { Unstyled, Meta, Canvas, Source } from '@storybook/blocks'; -import { - Columns, - Text, - ComponentStatus, - Banner, - Title, - Roadmap, -} from './components'; -import { list } from './components/Roadmap/list'; -import * as HeadingStories from '../src/components/Heading/Heading.stories'; -import * as TextStories from '../src/components/Text/Text.stories'; -import * as Table from './components/Table'; -import { Chip } from './components/Chip'; - - - - - -Responsive - - Canon is built on a responsive design system, meaning that the components are - designed to adapt to different screen sizes. By default we offer a set of - breakpoints that you can use to create responsive components. - - - - Breakpoints - - - - - - Breakpoint prefix - Minimum width - CSS - - - - - - xs - - - 0px - - - {`{ ... }`} - - - - - sm - - - 640px - - - {`@media (min-width: 640px) { ... }`} - - - - - md - - - 768px - - - {`@media (min-width: 768px) { ... }`} - - - - - lg - - - 1024px - - - {`@media (min-width: 1024px) { ... }`} - - - - - xl - - - 1280px - - - {`@media (min-width: 1280px) { ... }`} - - - - - 2xl - - - 1536px - - - {`@media (min-width: 1536px) { ... }`} - - - - - -Responsive components - - - Canon components are designed to be responsive, meaning that they will adapt - to different screen sizes. Not every component is responsive, but the ones - that are will have a prop to control the responsive behavior. - - - - The behaviour is the same for each component. For each prop, instead of adding - the value, you add an object with the value and the breakpoint prefix. - - -Button - -// Responsive value - -`} dark /> - -How to update breakpoints - - - The set of keys are not to be changed, but you can update the minimum width of - each breakpoint in the theme provider. - - -`} - dark -/> - - diff --git a/packages/canon/docs/Theme.mdx b/packages/canon/docs/Theme.mdx deleted file mode 100644 index 1ea7c5c4c6..0000000000 --- a/packages/canon/docs/Theme.mdx +++ /dev/null @@ -1,231 +0,0 @@ -import { Unstyled, Source, Meta } from '@storybook/blocks'; -import { Title, Text, Chip } from './components'; -import * as Table from './components/Table'; - -{' '} - - - -Theming - - Backstage ships with a default theme with a light and dark mode variant. The - themes are provided as a part of the `@backstage/canon` package, which also - includes utilities for customizing the default theme, or creating completely - new themes. - - -Light & Dark modes - - By default we are supporting both light and dark modes. Each user can opt to - choose what theme they want to use or to use their system decide what theme to - use. If you want to create your own theme, you will have to set both light and - dark themes following the instructions below. If you only set one of them, the - other mode will fallback to the default theme. - - -How to create your own theme - - To create your own theme, you will have to define the variables below. To do - that, create a theme.css file and import it in your application. Here's an - example below on how to set your light and dark mode. - - - -Colors - - We provide a set of generic colours tokens that we use across Canon. By - changing these colours you can easily change the look and feel of your - application to match your brand. - - - - - Prop - Description - - - - - - --canon-accent - - The accent color for the theme. - - - - --canon-bg - - The background color for the theme. - - - - --canon-surface-1 - - The first surface color for the theme. - - - - --canon-surface-2 - - The second surface color for the theme. - - - - --canon-outline - - The outline color for the theme. - - - - --canon-outline-focus - - The outline focus color for the theme. - - - - --canon-text-primary - - The primary text color for the theme. - - - - --canon-text-secondary - - The secondary text color for the theme. - - - - -Typography - - 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 - monospace font that we use for code blocks and tables. - - - - - - Prop - Description - - - - - - --canon-font-regular - - The sans-serif font for the theme. - - - - --canon-font-mono - - The monospace font for the theme. - - - - -Spacing - - Our default spacing system is made to work in most scenarios. We have 7 scale - values from `xxs` to `xxl`. We use the values on padding and margin in our - layout components mostly. If you prefer to use a different spacing system, you - can do that by changing the values below. - - - - - - Prop - Description - - - - - - --canon-space-unit - - - The base unit for the spacing system. Default value is `1em` - - - - - --canon-space-xxs - - Default value is `0.25 x space unit` - - - - --canon-space-xs - - Default value is `0.5 x space unit` - - - - --canon-space-sm - - Default value is `0.75 x space unit` - - - - --canon-space-md - - Default value is `1.25 x space unit` - - - - --canon-space-lg - - Default value is `2 x space unit` - - - - --canon-space-xl - - Default value is `3.25 x space unit` - - - - --canon-space-xxl - - Default value is `5.25 x space unit` - - - - - diff --git a/packages/canon/docs/Typography.mdx b/packages/canon/docs/Typography.mdx deleted file mode 100644 index 802b9881be..0000000000 --- a/packages/canon/docs/Typography.mdx +++ /dev/null @@ -1,48 +0,0 @@ -import { Unstyled, Meta, Canvas } from '@storybook/blocks'; -import { - Columns, - Text, - ComponentStatus, - Banner, - Title, - Roadmap, -} from './components'; -import { list } from './components/Roadmap/list'; -import * as HeadingStories from '../src/components/Heading/Heading.stories'; -import * as TextStories from '../src/components/Text/Text.stories'; - - - - - -Typography - - Canon offers a suite of typography components designed to seamlessly align - with the rest of your Backstage instance. While you can customize their - appearance to match your brand, the underlying API remains consistent and - unchanged. Each component is built on a responsive structure, allowing you to - define different typography values for various breakpoints. - - -Heading - - Headings are used to structure the content of your page. They are used to - create a hierarchy of information and to make the content more readable. The - best way to use add these headings to your page is to import the [Heading - component](?path=/docs/components-heading--docs). - - - - -Text - - Canon provides four distinct text variants, each offering different font sizes - carefully designed to cover the majority of use cases. These variants are - versatile and can be paired with regular and bold of font weights. You can use - the [Text component](?path=/docs/components-text--docs) to add text to your - page. - - - - - diff --git a/packages/canon/docs/components/Banner/Banner.tsx b/packages/canon/docs/components/Banner/Banner.tsx deleted file mode 100644 index 3199e65bc0..0000000000 --- a/packages/canon/docs/components/Banner/Banner.tsx +++ /dev/null @@ -1,41 +0,0 @@ -/* - * 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 React from 'react'; - -export const Banner = ({ - children, - variant = 'info', -}: { - children: React.ReactNode; - variant?: 'info' | 'warning'; -}) => { - return ( -
-
- - - -
- {children} -
- ); -}; diff --git a/packages/canon/docs/components/Banner/styles.css b/packages/canon/docs/components/Banner/styles.css deleted file mode 100644 index d20e14ce0b..0000000000 --- a/packages/canon/docs/components/Banner/styles.css +++ /dev/null @@ -1,37 +0,0 @@ -.banner { - display: flex; - align-items: center; - font-size: 16px; - line-height: 28px; - padding: 16px; - border-radius: 6px; - margin-bottom: 16px; - border: 1px solid #e0e0e0; - - & > p { - margin: 0; - } - - &.info { - background-color: #f2f2f2; - border-color: #cdcdcd; - color: #888888; - } - - &.warning { - background-color: #fff2b9; - border-color: #ffd000; - color: #d79927; - } - - & .icon { - width: 32px; - height: 32px; - background-color: rgba(215, 153, 39, 0.2); - border-radius: 6px; - margin-right: 16px; - display: flex; - align-items: center; - justify-content: center; - } -} diff --git a/packages/canon/docs/components/Chip/Chip.tsx b/packages/canon/docs/components/Chip/Chip.tsx deleted file mode 100644 index e6e1d1b1c4..0000000000 --- a/packages/canon/docs/components/Chip/Chip.tsx +++ /dev/null @@ -1,27 +0,0 @@ -/* - * 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 React from 'react'; - -export const Chip = ({ - children, - head = false, -}: { - children: React.ReactNode; - head?: boolean; -}) => { - return {children}; -}; diff --git a/packages/canon/docs/components/Chip/styles.css b/packages/canon/docs/components/Chip/styles.css deleted file mode 100644 index 95cf7cef34..0000000000 --- a/packages/canon/docs/components/Chip/styles.css +++ /dev/null @@ -1,33 +0,0 @@ -/* - * 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. - */ - -.chip { - display: inline-flex; - align-items: center; - font-family: monospace; - font-size: 13px; - border-radius: 6px; - padding: 0px 8px; - height: 24px; - margin-right: 4px; - background-color: #f0f0f0; - color: #5d5d5d; - - &.head { - background-color: #eaf2fd; - color: #2563eb; - } -} diff --git a/packages/canon/docs/components/Columns/Columns.tsx b/packages/canon/docs/components/Columns/Columns.tsx deleted file mode 100644 index 115ec50010..0000000000 --- a/packages/canon/docs/components/Columns/Columns.tsx +++ /dev/null @@ -1,31 +0,0 @@ -/* - * 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 React from 'react'; - -export const Columns = ({ - children, - style, -}: { - children: React.ReactNode; - style?: React.CSSProperties; -}) => { - return ( -
- {children} -
- ); -}; diff --git a/packages/canon/docs/components/Columns/styles.css b/packages/canon/docs/components/Columns/styles.css deleted file mode 100644 index c34acfc406..0000000000 --- a/packages/canon/docs/components/Columns/styles.css +++ /dev/null @@ -1,22 +0,0 @@ -/* - * 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. - */ - -.columns { - display: grid; - grid-template-columns: repeat(3, 1fr); - row-gap: 20px; - column-gap: 80px; -} diff --git a/packages/canon/docs/components/ComponentStatus/ComponentStatus.tsx b/packages/canon/docs/components/ComponentStatus/ComponentStatus.tsx deleted file mode 100644 index 0159e27b32..0000000000 --- a/packages/canon/docs/components/ComponentStatus/ComponentStatus.tsx +++ /dev/null @@ -1,48 +0,0 @@ -/* - * 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 React from 'react'; - -export const ComponentStatus = ({ - name, - status = 'notStarted', - style, - link, -}: { - name: string; - status: 'notStarted' | 'inProgress' | 'alpha' | 'beta' | 'stable'; - style?: React.CSSProperties; - link?: string; -}) => { - return ( -
- {link ? ( - - {name} - - ) : ( - {name} - )} - - {status === 'notStarted' && 'Not Started'} - {status === 'inProgress' && 'In Progress'} - {status === 'alpha' && 'Alpha'} - {status === 'beta' && 'Beta'} - {status === 'stable' && 'Stable'} - -
- ); -}; diff --git a/packages/canon/docs/components/ComponentStatus/styles.css b/packages/canon/docs/components/ComponentStatus/styles.css deleted file mode 100644 index 6ef02ccf3f..0000000000 --- a/packages/canon/docs/components/ComponentStatus/styles.css +++ /dev/null @@ -1,71 +0,0 @@ -/* - * 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. - */ - -.component-status { - display: flex; - justify-content: space-between; - - & .title { - color: #3b59ff; - font-size: 16px; - font-weight: 400; - text-decoration: none; - } - - & .pill { - display: inline-flex; - align-items: center; - color: #000; - border-radius: 40px; - padding: 0px 8px; - height: 24px; - font-size: 12px; - font-weight: 600; - border-style: solid; - border-width: 1px; - margin-left: 8px; - - &.notStarted { - background-color: #f2f2f2; - border-color: #cdcdcd; - color: #888888; - } - - &.inProgress { - background-color: #fff2b9; - border-color: #ffd000; - color: #d79927; - } - - &.alpha { - background-color: #d7f9d7; - border-color: #4ed14a; - color: #3a9837; - } - - &.beta { - background-color: #d7f9d7; - border-color: #4ed14a; - color: #3a9837; - } - - &.stable { - background-color: #d7f9d7; - border-color: #4ed14a; - color: #3a9837; - } - } -} diff --git a/packages/canon/docs/components/IconLibrary/IconLibrary.tsx b/packages/canon/docs/components/IconLibrary/IconLibrary.tsx deleted file mode 100644 index 1d517f7a98..0000000000 --- a/packages/canon/docs/components/IconLibrary/IconLibrary.tsx +++ /dev/null @@ -1,37 +0,0 @@ -/* - * 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 React from 'react'; -import { Icon } from '@backstage/canon'; -import type { IconNames } from '@backstage/canon'; -import { icons } from '../../../src/components/Icon/icons'; -import { Text } from '../Text/Text'; - -export const IconLibrary = () => { - const iconsList = Object.keys(icons); - - return ( -
- {iconsList.map(icon => ( -
-
- -
- {icon} -
- ))} -
- ); -}; diff --git a/packages/canon/docs/components/IconLibrary/index.ts b/packages/canon/docs/components/IconLibrary/index.ts deleted file mode 100644 index 071c80db85..0000000000 --- a/packages/canon/docs/components/IconLibrary/index.ts +++ /dev/null @@ -1,16 +0,0 @@ -/* - * 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. - */ -export { IconLibrary } from './IconLibrary'; diff --git a/packages/canon/docs/components/IconLibrary/styles.css b/packages/canon/docs/components/IconLibrary/styles.css deleted file mode 100644 index 1a6f63ca79..0000000000 --- a/packages/canon/docs/components/IconLibrary/styles.css +++ /dev/null @@ -1,22 +0,0 @@ -.icon-library { - display: grid; - grid-template-columns: repeat(6, 1fr); - gap: 1rem; -} - -.icon-library-item { - display: flex; - flex-direction: column; - align-items: center; - gap: 8px; -} - -.icon-library-item-icon { - display: flex; - width: 100%; - justify-content: center; - align-items: center; - height: 80px; - border: 1px solid #d3d3d3; - border-radius: 0.5rem; -} diff --git a/packages/canon/docs/components/LayoutComponents/LayoutComponents.tsx b/packages/canon/docs/components/LayoutComponents/LayoutComponents.tsx deleted file mode 100644 index 56f389a389..0000000000 --- a/packages/canon/docs/components/LayoutComponents/LayoutComponents.tsx +++ /dev/null @@ -1,64 +0,0 @@ -/* - * 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 React from 'react'; -import { BoxSvg } from './svgs/box'; -import { StackSvg } from './svgs/stack'; -import { GridSvg } from './svgs/grid'; -import { InlineSvg } from './svgs/inline'; -import { ContainerSvg } from './svgs/container'; - -export const LayoutComponents = () => { - return ( -
-
- - - -
Box
-
The most basic layout component
-
-
- - - -
Stack
-
Arrange your components vertically
-
-
- - - -
Grid
-
Arrange your components in a grid
-
-
- - - -
Inline
-
Arrange your components in a row
-
-
- - - -
Container
-
A container for your components
-
-
- ); -}; diff --git a/packages/canon/docs/components/LayoutComponents/index.ts b/packages/canon/docs/components/LayoutComponents/index.ts deleted file mode 100644 index 55cc9f25ef..0000000000 --- a/packages/canon/docs/components/LayoutComponents/index.ts +++ /dev/null @@ -1,16 +0,0 @@ -/* - * 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. - */ -export { LayoutComponents } from './LayoutComponents'; diff --git a/packages/canon/docs/components/LayoutComponents/styles.css b/packages/canon/docs/components/LayoutComponents/styles.css deleted file mode 100644 index 9319121224..0000000000 --- a/packages/canon/docs/components/LayoutComponents/styles.css +++ /dev/null @@ -1,58 +0,0 @@ -/* - * 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. - */ - -.layout-components { - display: flex; - justify-content: flex-start; - gap: 1rem; - flex-wrap: wrap; - - & .box { - display: flex; - flex-direction: column; - width: calc(33.33% - 0.67rem); - margin-bottom: 1rem; - align-items: flex-start; - } - - & .content { - flex: none; - background: linear-gradient(180deg, #f3f3f3 0%, #fff 100%); - border-radius: 4px; - width: 100%; - height: 180px; - transition: all 0.2s ease-in-out; - margin-bottom: 0.75rem; - display: flex; - align-items: center; - justify-content: center; - - &:hover { - transform: translateY(-4px); - } - } - - & .title { - font-size: 16px; - transition: color 0.2s ease-in-out; - margin-bottom: 0.25rem; - } - - & .description { - font-size: 16px; - color: #9e9e9e; - } -} diff --git a/packages/canon/docs/components/LayoutComponents/svgs/box.tsx b/packages/canon/docs/components/LayoutComponents/svgs/box.tsx deleted file mode 100644 index 1749b38c6f..0000000000 --- a/packages/canon/docs/components/LayoutComponents/svgs/box.tsx +++ /dev/null @@ -1,54 +0,0 @@ -/* - * 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 React from 'react'; - -export const BoxSvg = () => { - return ( - - - - - - - - ); -}; diff --git a/packages/canon/docs/components/LayoutComponents/svgs/container.tsx b/packages/canon/docs/components/LayoutComponents/svgs/container.tsx deleted file mode 100644 index 62fe4ce266..0000000000 --- a/packages/canon/docs/components/LayoutComponents/svgs/container.tsx +++ /dev/null @@ -1,373 +0,0 @@ -/* - * 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 React from 'react'; - -export const ContainerSvg = () => { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; diff --git a/packages/canon/docs/components/LayoutComponents/svgs/grid.tsx b/packages/canon/docs/components/LayoutComponents/svgs/grid.tsx deleted file mode 100644 index 5527d1f3e2..0000000000 --- a/packages/canon/docs/components/LayoutComponents/svgs/grid.tsx +++ /dev/null @@ -1,91 +0,0 @@ -/* - * 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 React from 'react'; - -export const GridSvg = () => { - return ( - - - - - - - - - - - - ); -}; diff --git a/packages/canon/docs/components/LayoutComponents/svgs/inline.tsx b/packages/canon/docs/components/LayoutComponents/svgs/inline.tsx deleted file mode 100644 index fadb9bfc1b..0000000000 --- a/packages/canon/docs/components/LayoutComponents/svgs/inline.tsx +++ /dev/null @@ -1,92 +0,0 @@ -/* - * 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 React from 'react'; - -export const InlineSvg = () => { - return ( - - - - - - - - - - - - ); -}; diff --git a/packages/canon/docs/components/LayoutComponents/svgs/stack.tsx b/packages/canon/docs/components/LayoutComponents/svgs/stack.tsx deleted file mode 100644 index aeda998d2e..0000000000 --- a/packages/canon/docs/components/LayoutComponents/svgs/stack.tsx +++ /dev/null @@ -1,82 +0,0 @@ -/* - * 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 React from 'react'; - -export const StackSvg = () => { - return ( - - - - - - - - - - - - ); -}; diff --git a/packages/canon/docs/components/PropsTable/PropsTable.tsx b/packages/canon/docs/components/PropsTable/PropsTable.tsx deleted file mode 100644 index a3dc9e271c..0000000000 --- a/packages/canon/docs/components/PropsTable/PropsTable.tsx +++ /dev/null @@ -1,57 +0,0 @@ -/* - * 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 React from 'react'; -import * as Table from '..'; -import { Chip } from '..'; - -// Modify the PropsTable component to accept a generic type -export const PropsTable = >({ - data, -}: { - data: T; -}) => { - return ( - - - - Prop - Type - Responsive - - - - {Object.keys(data).map(n => ( - - - {n} - - - {Array.isArray(data[n].type) ? ( - data[n].type.map((t: any) => {t}) - ) : ( - {data[n].type} - )} - - - {data[n].responsive ? 'Yes' : 'No'} - - - ))} - - - ); -}; diff --git a/packages/canon/docs/components/PropsTable/getProps.ts b/packages/canon/docs/components/PropsTable/getProps.ts deleted file mode 100644 index 5773eaeb27..0000000000 --- a/packages/canon/docs/components/PropsTable/getProps.ts +++ /dev/null @@ -1,43 +0,0 @@ -/* - * 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. - */ -export function getProps(styles: Record) { - return Object.keys(styles).reduce( - (acc: Record, n) => { - const style = styles[n]; - - let values: string[] = []; - - if (style.values) { - // If values exist, use them - values = Object.keys(style.values); - } else if (style.mappings && style.mappings.length > 0) { - // If mappings exist, use the first mapping's values - const firstMapping = style.mappings[0]; - values = Object.keys(styles[firstMapping].values); - } else { - // Default to an empty array if neither values nor mappings exist - values = []; - } - - acc[n] = { - type: values, - responsive: true, - }; - return acc; - }, - {} as Record, - ); -} diff --git a/packages/canon/docs/components/PropsTable/index.ts b/packages/canon/docs/components/PropsTable/index.ts deleted file mode 100644 index 181933f0f8..0000000000 --- a/packages/canon/docs/components/PropsTable/index.ts +++ /dev/null @@ -1,17 +0,0 @@ -/* - * 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. - */ -export { PropsTable } from './PropsTable'; -export { getProps } from './getProps'; diff --git a/packages/canon/docs/components/Roadmap/Roadmap.tsx b/packages/canon/docs/components/Roadmap/Roadmap.tsx deleted file mode 100644 index 2177ea558f..0000000000 --- a/packages/canon/docs/components/Roadmap/Roadmap.tsx +++ /dev/null @@ -1,53 +0,0 @@ -/* - * 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 React from 'react'; -import { RoadmapItem } from './list'; - -export const Roadmap = ({ list }: { list: RoadmapItem[] }) => { - const orderList = ['inProgress', 'notStarted', 'completed']; - return ( -
- {list - .sort( - (a, b) => orderList.indexOf(a.status) - orderList.indexOf(b.status), - ) - .map(Item)} -
- ); -}; - -const Item = ({ - title, - status = 'notStarted', -}: { - title: string; - status: 'notStarted' | 'inProgress' | 'inReview' | 'completed'; -}) => { - return ( -
-
-
-
{title}
-
- - {status === 'notStarted' && 'Not Started'} - {status === 'inProgress' && 'In Progress'} - {status === 'inReview' && 'Ready for Review'} - {status === 'completed' && 'Completed'} - -
- ); -}; diff --git a/packages/canon/docs/components/Roadmap/index.ts b/packages/canon/docs/components/Roadmap/index.ts deleted file mode 100644 index ac51dfa1ed..0000000000 --- a/packages/canon/docs/components/Roadmap/index.ts +++ /dev/null @@ -1,16 +0,0 @@ -/* - * 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. - */ -export { Roadmap } from './Roadmap'; diff --git a/packages/canon/docs/components/Roadmap/list.ts b/packages/canon/docs/components/Roadmap/list.ts deleted file mode 100644 index d5f436281a..0000000000 --- a/packages/canon/docs/components/Roadmap/list.ts +++ /dev/null @@ -1,62 +0,0 @@ -/* - * 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. - */ -export type RoadmapItem = { - title: string; - status: 'notStarted' | 'inProgress' | 'inReview' | 'completed'; -}; - -export const list: RoadmapItem[] = [ - { - title: 'Remove Vanilla Extract and use pure CSS instead', - status: 'inProgress', - }, - { - title: 'Add collapsing across breakpoints for the Inline component', - status: 'notStarted', - }, - { - title: 'Add reversing the order for the Inline component', - status: 'notStarted', - }, - { - title: 'Set up Storybook', - status: 'completed', - }, - { - title: 'Set up iconography', - status: 'completed', - }, - { - title: 'Set up global tokens', - status: 'inProgress', - }, - { - title: 'Set up theming system', - status: 'inProgress', - }, - { - title: 'Create first pass at box component', - status: 'completed', - }, - { - title: 'Create first pass at stack component', - status: 'completed', - }, - { - title: 'Create first pass at inline component', - status: 'completed', - }, -]; diff --git a/packages/canon/docs/components/Roadmap/styles.css b/packages/canon/docs/components/Roadmap/styles.css deleted file mode 100644 index 63f32312e7..0000000000 --- a/packages/canon/docs/components/Roadmap/styles.css +++ /dev/null @@ -1,100 +0,0 @@ -.roadmap { - display: flex; - flex-direction: column; -} - -.roadmap .roadmap-item { - display: flex; - align-items: center; - justify-content: space-between; - border-bottom: 1px solid #e0e0e0; - padding: 8px 0px; -} - -.roadmap .roadmap-item .left { - display: flex; - align-items: center; - padding-left: 12px; - gap: 12px; -} - -.roadmap .roadmap-item .dot { - width: 8px; - height: 8px; - border-radius: 50%; - background-color: #e0e0e0; -} - -.roadmap .roadmap-item.notStarted { - color: #000; -} - -.roadmap .roadmap-item.inProgress { - color: #000; -} - -.roadmap .roadmap-item.inReview { - color: #000; -} - -.roadmap .roadmap-item.completed .title { - color: #a2a2a2; - text-decoration: line-through; -} - -.roadmap .roadmap-item.notStarted .dot { - background-color: #d1d1d1; -} - -.roadmap .roadmap-item.inProgress .dot { - background-color: #ffd000; -} - -.roadmap .roadmap-item.inReview .dot { - background-color: #4ed14a; -} - -.roadmap .roadmap-item.completed .dot { - background-color: #4ed14a; -} - -.roadmap .roadmap-item .title { - font-size: 16px; -} - -.roadmap .roadmap-item .pill { - display: inline-flex; - align-items: center; - height: 24px; - padding: 0px 8px; - border-radius: 40px; - font-size: 12px; - font-weight: 600; - margin-left: 8px; - border-style: solid; - border-width: 1px; -} - -.roadmap .roadmap-item.notStarted .pill { - background-color: #f2f2f2; - border-color: #cdcdcd; - color: #888888; -} - -.roadmap .roadmap-item.inProgress .pill { - background-color: #fff2b9; - border-color: #ffd000; - color: #d79927; -} - -.roadmap .roadmap-item.inReview .pill { - background-color: #d7f9d7; - border-color: #4ed14a; - color: #3a9837; -} - -.roadmap .roadmap-item.completed .pill { - background-color: #d7f9d7; - border-color: #4ed14a; - color: #3a9837; -} diff --git a/packages/canon/docs/components/Table/Table.tsx b/packages/canon/docs/components/Table/Table.tsx deleted file mode 100644 index 74a26a89af..0000000000 --- a/packages/canon/docs/components/Table/Table.tsx +++ /dev/null @@ -1,49 +0,0 @@ -/* - * 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 React from 'react'; - -export const Root = ({ children }: { children: React.ReactNode }) => { - return ( -
- {children}
-
- ); -}; - -export const Header = ({ children }: { children: React.ReactNode }) => { - return {children}; -}; - -export const Body = ({ children }: { children: React.ReactNode }) => { - return {children}; -}; - -export const HeaderRow = ({ children }: { children: React.ReactNode }) => { - return {children}; -}; - -export const HeaderCell = ({ children }: { children: React.ReactNode }) => { - return {children}; -}; - -export const Row = ({ children }: { children: React.ReactNode }) => { - return {children}; -}; - -export const Cell = ({ children }: { children: React.ReactNode }) => { - return {children}; -}; diff --git a/packages/canon/docs/components/Table/index.ts b/packages/canon/docs/components/Table/index.ts deleted file mode 100644 index 7419aa83a8..0000000000 --- a/packages/canon/docs/components/Table/index.ts +++ /dev/null @@ -1,16 +0,0 @@ -/* - * 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. - */ -export { Root, Header, Body, Row, Cell, HeaderRow, HeaderCell } from './Table'; diff --git a/packages/canon/docs/components/Table/styles.css b/packages/canon/docs/components/Table/styles.css deleted file mode 100644 index ed56774a85..0000000000 --- a/packages/canon/docs/components/Table/styles.css +++ /dev/null @@ -1,72 +0,0 @@ -/* - * 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. - */ - -.sb-table-wrapper { - border: 1px solid #e7e7e7; - border-radius: 4px; - overflow: hidden; - - & .sb-table { - width: 100%; - margin: 0 !important; - padding: 0 !important; - border-spacing: 0px; - border-collapse: collapse; - } - - & .sb-table-cell { - padding: 12px 16px !important; - border: none !important; - text-align: left; - background-color: white !important; - font-size: 16px; - - & p { - margin: 0; - } - } - - & .sb-table-header-cell { - background-color: #f5f5f5 !important; - border-bottom: 1px solid #e7e7e7 !important; - font-weight: 500; - font-size: 14px; - } - - & .sb-table-row { - border: none; - border-bottom: 1px solid #e7e7e7; - &:last-child { - border-bottom: none; - } - } - - & .sb-table-chip { - display: inline-block; - font-size: 14px !important; - border: 1px solid #e7e7e7; - border-radius: 6px; - padding: 0px 6px; - height: 24px; - } - - & .sb-table-type { - display: flex; - flex-wrap: wrap; - flex-direction: row; - gap: 8px; - } -} diff --git a/packages/canon/docs/components/Text/Text.tsx b/packages/canon/docs/components/Text/Text.tsx deleted file mode 100644 index 90804b7da7..0000000000 --- a/packages/canon/docs/components/Text/Text.tsx +++ /dev/null @@ -1,31 +0,0 @@ -/* - * 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 React from 'react'; - -export const Text = ({ - children, - style, -}: { - children: React.ReactNode; - style?: React.CSSProperties; -}) => { - return ( -
- {children} -
- ); -}; diff --git a/packages/canon/docs/components/Text/styles.css b/packages/canon/docs/components/Text/styles.css deleted file mode 100644 index b1bc40a1ac..0000000000 --- a/packages/canon/docs/components/Text/styles.css +++ /dev/null @@ -1,43 +0,0 @@ -/* - * 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. - */ - -.sb-text { - font-size: 16px; - line-height: 28px; - margin: 0; - margin-bottom: 16px; - color: #4f4f4f; - - & p { - font-size: 16px; - line-height: 28px; - margin: 0; - } - - & code { - font-size: 13px; - color: #215cff; - background-color: #f1f3fc; - padding: 4px 4px; - border-radius: 4px; - } - - & a { - color: #215cff; - text-decoration: none; - border-bottom: 1px solid #215cff; - } -} diff --git a/packages/canon/docs/components/Title/Title.tsx b/packages/canon/docs/components/Title/Title.tsx deleted file mode 100644 index 59fefad8f9..0000000000 --- a/packages/canon/docs/components/Title/Title.tsx +++ /dev/null @@ -1,38 +0,0 @@ -/* - * 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 React from 'react'; - -export const Title = ({ - children, - style, - type = 'h1', -}: { - children: React.ReactNode; - style?: React.CSSProperties; - type?: 'h1' | 'h2' | 'h3'; -}) => { - let Component = 'h1'; - if (type === 'h1') Component = 'h1'; - if (type === 'h2') Component = 'h2'; - if (type === 'h3') Component = 'h3'; - - return React.createElement(Component, { - className: `sb-title ${type}`, - style, - children, - }); -}; diff --git a/packages/canon/docs/components/Title/styles.css b/packages/canon/docs/components/Title/styles.css deleted file mode 100644 index 61e99e20b3..0000000000 --- a/packages/canon/docs/components/Title/styles.css +++ /dev/null @@ -1,42 +0,0 @@ -/* - * 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. - */ - -.sb-title { - margin: 0; - font-weight: 500; - border: none; - - &.h1 { - font-size: 36px; - line-height: 44px; - margin-bottom: 24px; - margin-top: 0px; - } - - &.h2 { - font-size: 24px; - line-height: 32px; - margin-bottom: 12px; - margin-top: 52px; - } - - &.h3 { - font-size: 20px; - line-height: 28px; - margin-bottom: 12px; - margin-top: 40px; - } -} diff --git a/packages/canon/docs/components/index.ts b/packages/canon/docs/components/index.ts deleted file mode 100644 index 0e5ff2e325..0000000000 --- a/packages/canon/docs/components/index.ts +++ /dev/null @@ -1,27 +0,0 @@ -/* - * 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. - */ - -export * from './Banner'; -export * from './Chip'; -export * from './Columns'; -export * from './ComponentStatus'; -export * from './IconLibrary'; -export * from './LayoutComponents'; -export * from './PropsTable'; -export * from './Roadmap'; -export * from './Table'; -export * from './Text'; -export * from './Title'; diff --git a/packages/canon/docs/components/styles.css b/packages/canon/docs/components/styles.css deleted file mode 100644 index 706b1626b3..0000000000 --- a/packages/canon/docs/components/styles.css +++ /dev/null @@ -1,15 +0,0 @@ -.sbdocs-content { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, - Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; -} - -@import './Banner/styles.css'; -@import './Chip/styles.css'; -@import './Columns/styles.css'; -@import './ComponentStatus/styles.css'; -@import './IconLibrary/styles.css'; -@import './LayoutComponents/styles.css'; -@import './Roadmap/styles.css'; -@import './Table/styles.css'; -@import './Text/styles.css'; -@import './Title/styles.css'; diff --git a/packages/canon/docs/spaceProps.ts b/packages/canon/docs/spaceProps.ts deleted file mode 100644 index 3eb6961bc1..0000000000 --- a/packages/canon/docs/spaceProps.ts +++ /dev/null @@ -1,41 +0,0 @@ -/* - * 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. - */ - -export const spacePropsList = [ - 'margin', - 'marginBottom', - 'marginLeft', - 'marginRight', - 'marginTop', - 'marginX', - 'marginY', - 'padding', - 'paddingBottom', - 'paddingLeft', - 'paddingRight', - 'paddingTop', - 'paddingX', - 'paddingY', -].reduce( - (acc: { [key: string]: { type: string[]; responsive: boolean } }, prop) => { - acc[prop] = { - type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'], - responsive: true, - }; - return acc; - }, - {}, -); diff --git a/packages/canon/package.json b/packages/canon/package.json index d08f660e7d..eb2cfff709 100644 --- a/packages/canon/package.json +++ b/packages/canon/package.json @@ -27,8 +27,10 @@ "dist" ], "scripts": { - "build": "backstage-cli package build", + "build": "yarn build:app && yarn build:css", "build-storybook": "storybook build", + "build:app": "backstage-cli package build", + "build:css": "node scripts/build-css.mjs", "clean": "backstage-cli package clean", "lint": "backstage-cli package lint", "prepack": "backstage-cli package prepack", @@ -37,32 +39,35 @@ "test": "backstage-cli package test" }, "dependencies": { - "@base-ui-components/react": "^1.0.0-alpha.4", + "@base-ui-components/react": "^1.0.0-alpha.5", "@remixicon/react": "^4.5.0", "clsx": "^2.1.1" }, "devDependencies": { "@backstage/cli": "workspace:^", "@chromatic-com/storybook": "^3.2.2", - "@storybook/addon-essentials": "^8.4.7", - "@storybook/addon-interactions": "^8.4.7", + "@storybook/addon-essentials": "^8.5.0", + "@storybook/addon-interactions": "^8.5.0", "@storybook/addon-styling-webpack": "^1.0.1", - "@storybook/addon-themes": "^8.4.7", - "@storybook/addon-webpack5-compiler-swc": "^1.0.5", - "@storybook/blocks": "^8.4.7", - "@storybook/react": "^8.4.7", - "@storybook/react-webpack5": "^8.4.7", - "@storybook/test": "^8.4.7", + "@storybook/addon-themes": "^8.5.0", + "@storybook/addon-webpack5-compiler-swc": "^2.0.0", + "@storybook/blocks": "^8.5.0", + "@storybook/react": "^8.5.0", + "@storybook/react-webpack5": "^8.5.0", + "@storybook/test": "^8.5.0", "@testing-library/jest-dom": "^6.0.0", "@types/react": "^18.0.0", "@types/react-dom": "^18.0.0", + "chalk": "^5.4.1", "eslint-plugin-storybook": "^0.11.1", + "glob": "^11.0.1", "globals": "^15.11.0", + "lightningcss": "^1.29.1", "mini-css-extract-plugin": "^2.9.2", "react": "^18.0.2", "react-dom": "^18.0.2", "react-router-dom": "^6.3.0", - "storybook": "^8.4.7" + "storybook": "^8.5.0" }, "peerDependencies": { "@types/react": "^16.13.1 || ^17.0.0 || ^18.0.0", diff --git a/packages/canon/scripts/build-css.mjs b/packages/canon/scripts/build-css.mjs new file mode 100644 index 0000000000..f0ca17c73e --- /dev/null +++ b/packages/canon/scripts/build-css.mjs @@ -0,0 +1,79 @@ +/* + * 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. + */ + +/* eslint-disable no-restricted-imports */ +import { transform, bundle } from 'lightningcss'; +import fs from 'fs'; +import path from 'path'; +import chalk from 'chalk'; +import { glob } from 'glob'; +/* eslint-enable no-restricted-imports */ + +// Check if core.css and components.css exist +const cssDir = 'src/css'; +const distDir = 'dist/css'; +const componentsDir = 'src/components'; + +// Core files +const cssFiles = [ + { path: `${cssDir}/core.css`, newName: 'core.css' }, + { path: `${cssDir}/components.css`, newName: 'components.css' }, +]; + +// Components files +const componentsFiles = glob + .sync('**/*.css', { cwd: componentsDir }) + .map(file => { + const folderName = file.split('/')[0].toLocaleLowerCase('en-US'); + return { path: `${componentsDir}/${file}`, newName: `${folderName}.css` }; + }); + +// Combine core and components files +cssFiles.push(...componentsFiles); + +// Check if files exist +cssFiles.forEach(file => { + if (!fs.existsSync(file.path)) { + console.error(`${file.originalName} does not exist`); + process.exit(1); + } +}); + +// Ensure the dist/css directory exists +if (!fs.existsSync(distDir)) { + fs.mkdirSync(distDir, { recursive: true }); +} + +// Bundle and transform files +cssFiles.forEach(file => { + let { code: bundleCode } = bundle({ + filename: file.path, + }); + + let { code, map } = transform({ + filename: `${distDir}/${file.newName}`, + code: bundleCode, + minify: true, + sourceMap: true, + }); + + fs.writeFileSync(`${distDir}/${file.newName}`, code); + fs.writeFileSync(`${distDir}/${file.newName}.map`, map); + + console.log(chalk.blue('CSS bundled: ') + file.newName); +}); + +console.log(chalk.green('CSS files bundled successfully!')); diff --git a/packages/canon/src/components/Box/Docs.mdx b/packages/canon/src/components/Box/Docs.mdx deleted file mode 100644 index ee30e17305..0000000000 --- a/packages/canon/src/components/Box/Docs.mdx +++ /dev/null @@ -1,112 +0,0 @@ -import { Meta, Unstyled, Source, Canvas } from '@storybook/blocks'; -import * as BoxStories from './Box.stories'; -import { Title, Text } from '../../../docs/components'; -import { PropsTable } from '../../../docs/components'; -import { spacePropsList } from '../../../docs/spaceProps'; - - - - - -Box - - Box is the lowest-level component in Canon. We use it internally to build all - of our components. It provides a consistent API for styling and layout. - - -Usage -Hello World! -`} language="tsx" dark /> - -API reference - -Box - - This is the Box component, our lowest-level component. Here are all the - available properties. - - - - - - Padding and margin are used to create space around your component using our - predefined spacing tokens. We would recommend to use padding over margin to - avoid collapsing margins but both are available. - - - - - - -Examples -Here are some examples of how you can use the Box component. - -Simple example -A simple example of how to use the Box component. -Hello World`} - language="tsx" - dark -/> - -Responsive - - Most of the values can be defined per breakpoint, making it easy to create - responsive designs. - -Hello World`} - language="tsx" - dark -/> - - diff --git a/packages/canon/src/components/Button/Docs.mdx b/packages/canon/src/components/Button/Docs.mdx deleted file mode 100644 index ae90b5fd80..0000000000 --- a/packages/canon/src/components/Button/Docs.mdx +++ /dev/null @@ -1,135 +0,0 @@ -import { Canvas, Meta, Unstyled, Source } from '@storybook/blocks'; -import * as ButtonStories from './Button.stories'; -import { Title, Text } from '../../../docs/components'; -import { PropsTable } from '../../../docs/components/PropsTable/PropsTable'; - - - - - -Button -A button component that can be used to trigger actions. - - - -Usage -Click me -`} language="tsx" dark /> - - - API reference - - - - -Examples - -Variants -Here's a view when buttons have different variants. - - - - - - - -`} - language="tsx" - dark -/> - -Sizes -Here's a view when buttons have different sizes. - - - - - - -`} - language="tsx" - dark -/> - -With Icons -Here's a view when buttons have icons. - - - - - - - -`} - language="tsx" - dark -/> - -Full width -Here's a view when buttons are full width. - - - - - - - -`} - language="tsx" - dark -/> - -Disabled -Here's a view when buttons are disabled. - - - -Button`} language="tsx" dark /> - -Responsive -Here's a view when buttons are responsive. - - - - - Button -`} - language="tsx" - dark -/> - - diff --git a/packages/canon/src/components/Checkbox/Docs.mdx b/packages/canon/src/components/Checkbox/Docs.mdx deleted file mode 100644 index 9826708888..0000000000 --- a/packages/canon/src/components/Checkbox/Docs.mdx +++ /dev/null @@ -1,70 +0,0 @@ -import { Canvas, Meta, Unstyled, Source } from '@storybook/blocks'; -import * as CheckboxStories from './Checkbox.stories'; -import { Title, Text } from '../../../docs/components'; -import { PropsTable } from '../../../docs/components/PropsTable'; - - - - - -Checkbox -A checkbox component that can be used to trigger actions. - - - -Usage - -`} language="tsx" dark /> - - - API reference - - - void", - responsive: false, - }, - disabled: { - type: 'boolean', - responsive: false, - }, - required: { - type: 'boolean', - responsive: false, - }, - name: { - type: 'string', - responsive: false, - }, - value: { - type: 'string', - responsive: false, - }, - className: { - type: 'string', - responsive: false, - }, - style: { - type: 'CSSProperties', - responsive: false, - }, - }} -/> - - diff --git a/packages/canon/src/components/Container/Docs.mdx b/packages/canon/src/components/Container/Docs.mdx deleted file mode 100644 index 05a0600813..0000000000 --- a/packages/canon/src/components/Container/Docs.mdx +++ /dev/null @@ -1,99 +0,0 @@ -import { Meta, Unstyled, Source } from '@storybook/blocks'; -import * as ContainerStories from './Container.stories'; -import { Title, Text, PropsTable, getProps } from '../../../docs/components'; -import { spacePropsList } from '../../../docs/spaceProps'; - - - - - -Container - - - The container component let you use our default max-width and center the - content on the page. - - -Usage -Hello World! -`} language="tsx" dark /> - - - API reference - - - - -Examples - -Simple -A simple example of how to use the Container component. - - - Hello World - Hello World - Hello World -`} - language="tsx" - dark -/> - -Responsive padding & margin - - The Container component also supports responsive values, making it easy to - create responsive designs. - - - Hello World - Hello World - Hello World -`} - language="tsx" - dark -/> - - diff --git a/packages/canon/src/components/Grid/Docs.mdx b/packages/canon/src/components/Grid/Docs.mdx deleted file mode 100644 index c1a0237279..0000000000 --- a/packages/canon/src/components/Grid/Docs.mdx +++ /dev/null @@ -1,199 +0,0 @@ -import { Canvas, Meta, Unstyled, Source } from '@storybook/blocks'; -import * as GridStories from './Grid.stories'; -import { Title, Text, PropsTable } from '../../../docs/components'; -import { spacePropsList } from '../../../docs/spaceProps'; - - - - - -Grid - - A layout component that helps to create simple column-based layouts as well as - more complex ones. - - -Usage - - Hello World - -`} language="tsx" dark /> - -API reference - -Grid - - This is the grid container component. It will help to define the number of - columns that will be used in the grid. You can also define the gap between the - columns. All values are responsive. - - - - - - The grid component also accepts all the spacing props from the Box component. - - - - -Grid Item - - If you need more control over the columns, you can use the grid item - component. This will give you access to `rowSpan`, `colSpan`, `start` and - `end`. All values are responsive. This component is optional, you can use any - elements directly if you prefer. - - - - -Examples - -Simple grid -This is a simple grid with 3 columns and a gap of md. - - Hello World - Hello World - Hello World - -`} - language="tsx" - dark -/> - -Complex grid - - You can also use the grid item to create more complex layouts. In this example - the first column will span 1 column and the second column will span 2 columns. - - - - - Hello World - - - Hello World - - -`} - language="tsx" - dark -/> - -Mixing rows and columns - - The grid item component also supports the `rowSpan` prop, which allows you to - span multiple rows within the grid layout. In this example, the first item - will span 2 rows to achieve a dynamic and flexible grid structure. - - - - - Hello World - - - Hello World - - - Hello World - - -`} - language="tsx" - dark -/> - -Responsive - - The grid component also supports responsive values. In this example the grid - will have 1 column on small screens and 3 on large screens, with a gap of xs - on small screens and md on large screens. - - - - Hello World - - - Hello World - - -`} - language="tsx" - dark -/> - -Start and End - - The start and end props can be used to position the item in the grid. - - - - Hello World - - -`} - language="tsx" - dark -/> - - diff --git a/packages/canon/src/components/Heading/Docs.mdx b/packages/canon/src/components/Heading/Docs.mdx deleted file mode 100644 index dd64bd59b2..0000000000 --- a/packages/canon/src/components/Heading/Docs.mdx +++ /dev/null @@ -1,83 +0,0 @@ -import { Canvas, Meta, Unstyled, Source } from '@storybook/blocks'; -import * as HeadingStories from './Heading.stories'; -import { Title, Text } from '../../../docs/components'; -import { PropsTable } from '../../../docs/components/PropsTable/PropsTable'; - - - - - -Heading - -Headings are used to structure the content of your page. - - - -Usage -Hello World! -`} language="tsx" dark /> - - - API reference - - - - -Examples -Here are some examples of how you can use the Heading component. - -All variants - - The `Heading` component has a `variant` prop that can be used to change the - appearance of the heading. - - - - - - Title 1 Lorem ipsum dolor sit amet consectetur... - Title 2 Lorem ipsum dolor sit amet consectetur... - Title 3 Lorem ipsum dolor sit amet consectetur... - Title 4 Lorem ipsum dolor sit amet consectetur... - Title 5 Lorem ipsum dolor sit amet consectetur... - Display Lorem ipsum dolor sit amet consectetur... -`} - language="tsx" - dark -/> - -Responsive - - You can also use the `variant` prop to change the appearance of the text based - on the screen size. - - -Responsive Lorem ipsum dolor sit amet consectetur...`} - language="tsx" - dark -/> - - diff --git a/packages/canon/src/components/Icon/Docs.mdx b/packages/canon/src/components/Icon/Docs.mdx deleted file mode 100644 index 41c296424c..0000000000 --- a/packages/canon/src/components/Icon/Docs.mdx +++ /dev/null @@ -1,48 +0,0 @@ -import { Canvas, Meta, Unstyled, Source } from '@storybook/blocks'; -import * as IconStories from './Icon.stories'; -import { Title, Text } from '../../../docs/components'; -import { PropsTable } from '../../../docs/components/PropsTable/PropsTable'; -import { icons } from './icons'; - - - - - -Icon - -Icons are used to represent an action or a state. - - - -Usage - -`} language="tsx" dark /> - - - API reference - - - - - diff --git a/packages/canon/src/components/Inline/Docs.mdx b/packages/canon/src/components/Inline/Docs.mdx deleted file mode 100644 index 7671122966..0000000000 --- a/packages/canon/src/components/Inline/Docs.mdx +++ /dev/null @@ -1,124 +0,0 @@ -import { Meta, Unstyled, Source } from '@storybook/blocks'; -import * as InlineStories from './Inline.stories'; -import { Title, Text, PropsTable, getProps } from '../../../docs/components'; -import { spacePropsList } from '../../../docs/spaceProps'; - - - - - -Inline - - - The Inline component is used to create a horizontal layout of elements. By - default it uses flex and flexWrap to make sure that your content always flows - responsively. - - -Usage - - Hello World - Hello World - Hello World - -`} language="tsx" dark /> - - - API reference - - - - - - The grid component also accepts all the spacing props from the Box component. - - - - -Examples - -Simple -A simple example of how to use the Inline component. - - - Hello World - Hello World - Hello World -`} - language="tsx" - dark -/> - -Responsive - - The Inline component also supports responsive values, making it easy to create - responsive designs. - - - Hello World - Hello World - Hello World -`} - language="tsx" - dark -/> - -Align - - The Inline component also supports responsive alignment, making it easy to - create responsive designs. - - - Hello World - Hello World - Hello World -`} - language="tsx" - dark -/> - -Align vertically - - The Inline component also supports responsive vertical alignment, making it - easy to create responsive designs. - - - Hello World - Hello World - Hello World -`} - language="tsx" - dark -/> - - diff --git a/packages/canon/src/components/Stack/Docs.mdx b/packages/canon/src/components/Stack/Docs.mdx deleted file mode 100644 index 921618f49f..0000000000 --- a/packages/canon/src/components/Stack/Docs.mdx +++ /dev/null @@ -1,126 +0,0 @@ -import { Meta, Unstyled, Source } from '@storybook/blocks'; -import * as StackStories from './Stack.stories'; -import { Title, Text, PropsTable, getProps } from '../../../docs/components'; -import { spacePropsList } from '../../../docs/spaceProps'; - - - - - -Stack - - - This is the stack container component. It will help to define the number of - columns that will be used in the grid. You can also define the gap between the - columns. All values are responsive. - - -Usage - - Hello World - Hello World - Hello World - -`} language="tsx" dark /> - - - API reference - - - - - - The grid component also accepts all the spacing props from the Box component. - - - - -Common questions - -Can I stack horizontally? - - The Stack component only allows for stacking elements vertically. If you want - to create a column layout, please use the Grid component. - - - - Hello World - Hello World - Hello World - -`} - language="tsx" - dark -/> - -Examples - -Simple - - A simple example of how to use the Stack component with a medium gap. - - - - Hello World - Hello World - Hello World -`} - language="tsx" - dark -/> - -Responsive - - The Stack component also supports responsive values, making it easy to create - responsive designs. - - - Hello World - Hello World - Hello World -`} - language="tsx" - dark -/> - -Align - - The Stack component also supports responsive alignment, making it easy to - create responsive designs. - - - Hello World - Hello World - Hello World -`} - language="tsx" - dark -/> - - diff --git a/packages/canon/src/components/Table/Docs.mdx b/packages/canon/src/components/Table/Docs.mdx deleted file mode 100644 index 6a6e9c8a59..0000000000 --- a/packages/canon/src/components/Table/Docs.mdx +++ /dev/null @@ -1,5 +0,0 @@ -import { Meta, Controls } from '@storybook/blocks'; - - - -# Table diff --git a/packages/canon/src/components/Text/Docs.mdx b/packages/canon/src/components/Text/Docs.mdx deleted file mode 100644 index 685a00a33f..0000000000 --- a/packages/canon/src/components/Text/Docs.mdx +++ /dev/null @@ -1,101 +0,0 @@ -import { Canvas, Meta, Unstyled, Source } from '@storybook/blocks'; -import * as TextStories from './Text.stories'; -import { Title, Text } from '../../../docs/components'; -import { PropsTable } from '../../../docs/components/PropsTable/PropsTable'; - - - - - -Text - -The `Text` component is used to display content on your page. - - - -Usage -Hello World!`} language="tsx" dark /> - - - API reference - - - - -Examples -Here are some examples of how you can use the Text component. - -All variants - - The `Text` component has a `variant` prop that can be used to change the - appearance of the text. - - - - - - Subtitle Lorem ipsum dolor sit amet consectetur... - Body Lorem ipsum dolor sit amet consectetur... - Caption Lorem ipsum dolor sit amet consectetur... - Label Lorem ipsum dolor sit amet consectetur... -`} - language="tsx" - dark -/> - -All weights - - The `Text` component has a `weight` prop that can be used to change the - appearance of the text. - - - - - - Regular Lorem ipsum dolor sit amet consectetur... - Bold Lorem ipsum dolor sit amet consectetur... -`} - language="tsx" - dark -/> - -Responsive - - You can also use the `variant` prop to change the appearance of the text based - on the screen size. - - -Responsive Lorem ipsum dolor sit amet consectetur...`} - language="tsx" - dark -/> - - diff --git a/packages/cli-node/report.api.md b/packages/cli-node/report.api.md index 7c1a3bc744..bec25ea251 100644 --- a/packages/cli-node/report.api.md +++ b/packages/cli-node/report.api.md @@ -72,6 +72,8 @@ export interface BackstagePackageJson { [key: string]: string; }; // (undocumented) + type?: 'module' | 'commonjs'; + // (undocumented) types?: string; // (undocumented) typesVersions?: Record>; diff --git a/packages/cli-node/src/monorepo/PackageGraph.ts b/packages/cli-node/src/monorepo/PackageGraph.ts index 721aa79e50..1da896a057 100644 --- a/packages/cli-node/src/monorepo/PackageGraph.ts +++ b/packages/cli-node/src/monorepo/PackageGraph.ts @@ -43,6 +43,8 @@ export interface BackstagePackageJson { // that the package bundles all of its dependencies in its build output. bundled?: boolean; + type?: 'module' | 'commonjs'; + backstage?: { role?: PackageRole; moved?: string; diff --git a/packages/cli/config/jest.js b/packages/cli/config/jest.js index 45d744d7bc..560c9bf708 100644 --- a/packages/cli/config/jest.js +++ b/packages/cli/config/jest.js @@ -31,6 +31,14 @@ const FRONTEND_ROLES = [ 'frontend-plugin-module', ]; +const NODE_ROLES = [ + 'backend', + 'cli', + 'node-library', + 'backend-plugin', + 'backend-plugin-module', +]; + const envOptions = { oldTests: Boolean(process.env.BACKSTAGE_OLD_TESTS), }; @@ -130,11 +138,97 @@ const transformIgnorePattern = [ ].join('|'); // Provides additional config that's based on the role of the target package -function getRoleConfig(role) { +function getRoleConfig(role, pkgJson) { + // Only Node.js package roles support native ESM modules, frontend and common + // packages are always transpiled to CommonJS. + const moduleOpts = NODE_ROLES.includes(role) + ? { + module: { + ignoreDynamic: true, + exportInteropAnnotation: true, + }, + } + : undefined; + + const transform = { + '\\.(mjs|cjs|js)$': [ + require.resolve('./jestSwcTransform'), + { + ...moduleOpts, + jsc: { + parser: { + syntax: 'ecmascript', + }, + }, + }, + ], + '\\.jsx$': [ + require.resolve('./jestSwcTransform'), + { + jsc: { + parser: { + syntax: 'ecmascript', + jsx: true, + }, + transform: { + react: { + runtime: 'automatic', + }, + }, + }, + }, + ], + '\\.(mts|cts|ts)$': [ + require.resolve('./jestSwcTransform'), + { + ...moduleOpts, + jsc: { + parser: { + syntax: 'typescript', + }, + }, + }, + ], + '\\.tsx$': [ + require.resolve('./jestSwcTransform'), + { + jsc: { + parser: { + syntax: 'typescript', + tsx: true, + }, + transform: { + react: { + runtime: 'automatic', + }, + }, + }, + }, + ], + '\\.(bmp|gif|jpg|jpeg|png|ico|webp|frag|xml|svg|eot|woff|woff2|ttf)$': + require.resolve('./jestFileTransform.js'), + '\\.(yaml)$': require.resolve('./jestYamlTransform'), + }; if (FRONTEND_ROLES.includes(role)) { - return { testEnvironment: require.resolve('jest-environment-jsdom') }; + return { + testEnvironment: require.resolve('jest-environment-jsdom'), + transform, + }; } - return { testEnvironment: require.resolve('jest-environment-node') }; + return { + testEnvironment: require.resolve('jest-environment-node'), + moduleFileExtensions: [...SRC_EXTS, 'json', 'node'], + // Jest doesn't let us dynamically detect type=module per transformed file, + // so we have to assume that if the entry point is ESM, all TS files are + // ESM. + // + // This means you can't switch a package to type=module until all of its + // monorepo dependencies are also type=module or does not contain any .ts + // files. + extensionsToTreatAsEsm: + pkgJson.type === 'module' ? ['.ts', '.mts'] : ['.mts'], + transform, + }; } async function getProjectConfig(targetPath, extraConfig, extraOptions) { @@ -160,64 +254,6 @@ async function getProjectConfig(targetPath, extraConfig, extraOptions) { '\\.(css|less|scss|sss|styl)$': require.resolve('jest-css-modules'), }, - transform: { - '\\.(mjs|cjs|js)$': [ - require.resolve('./jestSwcTransform'), - { - jsc: { - parser: { - syntax: 'ecmascript', - }, - }, - }, - ], - '\\.jsx$': [ - require.resolve('./jestSwcTransform'), - { - jsc: { - parser: { - syntax: 'ecmascript', - jsx: true, - }, - transform: { - react: { - runtime: 'automatic', - }, - }, - }, - }, - ], - '\\.ts$': [ - require.resolve('./jestSwcTransform'), - { - jsc: { - parser: { - syntax: 'typescript', - }, - }, - }, - ], - '\\.tsx$': [ - require.resolve('./jestSwcTransform'), - { - jsc: { - parser: { - syntax: 'typescript', - tsx: true, - }, - transform: { - react: { - runtime: 'automatic', - }, - }, - }, - }, - ], - '\\.(bmp|gif|jpg|jpeg|png|ico|webp|frag|xml|svg|eot|woff|woff2|ttf)$': - require.resolve('./jestFileTransform.js'), - '\\.(yaml)$': require.resolve('./jestYamlTransform'), - }, - // A bit more opinionated testMatch: [`**/*.test.{${SRC_EXTS.join(',')}}`], @@ -226,7 +262,7 @@ async function getProjectConfig(targetPath, extraConfig, extraOptions) { : require.resolve('./jestCachingModuleLoader'), transformIgnorePatterns: [`/node_modules/(?:${transformIgnorePattern})/`], - ...getRoleConfig(pkgJson.backstage?.role), + ...getRoleConfig(pkgJson.backstage?.role, pkgJson), }; options.setupFilesAfterEnv = options.setupFilesAfterEnv || []; diff --git a/packages/cli/config/jestCachingModuleLoader.js b/packages/cli/config/jestCachingModuleLoader.js index 95c6212123..dd22f25f6f 100644 --- a/packages/cli/config/jestCachingModuleLoader.js +++ b/packages/cli/config/jestCachingModuleLoader.js @@ -19,6 +19,11 @@ const { default: JestRuntime } = require('jest-runtime'); const scriptTransformCache = new Map(); module.exports = class CachingJestRuntime extends JestRuntime { + constructor(config, ...restAgs) { + super(config, ...restAgs); + this.allowLoadAsEsm = config.extensionsToTreatAsEsm.includes('.mts'); + } + // This may or may not be a good idea. Theoretically I don't know why this would impact // test correctness and flakiness, but it seems like it may introduce flakiness and strange failures. // It does seem to speed up test execution by a fair amount though. @@ -33,4 +38,13 @@ module.exports = class CachingJestRuntime extends JestRuntime { } return script; } + + // Unfortunately we need to use this unstable API to make sure that .js files + // are only loaded as modules where ESM is supported, i.e. Node.js packages. + unstable_shouldLoadAsEsm(path, ...restArgs) { + if (!this.allowLoadAsEsm) { + return false; + } + return super.unstable_shouldLoadAsEsm(path, ...restArgs); + } }; diff --git a/packages/cli/config/jestSwcTransform.js b/packages/cli/config/jestSwcTransform.js index 83abacc9b5..a77683b939 100644 --- a/packages/cli/config/jestSwcTransform.js +++ b/packages/cli/config/jestSwcTransform.js @@ -23,10 +23,16 @@ function createTransformer(config) { ...config, }); const process = (source, filePath, jestOptions) => { + // Skip transformation of .js files without ESM syntax, we never transform from CJS to ESM if (filePath.endsWith('.js') && !ESM_REGEX.test(source)) { return { code: source }; } + // Skip transformation of .mjs files, they should only be used if ESM support is available + if (filePath.endsWith('.mjs')) { + return { code: source }; + } + return swcTransformer.process(source, filePath, jestOptions); }; diff --git a/packages/cli/config/nodeTransform.cjs b/packages/cli/config/nodeTransform.cjs index 1cf79cb1bb..f54527b4a7 100644 --- a/packages/cli/config/nodeTransform.cjs +++ b/packages/cli/config/nodeTransform.cjs @@ -14,6 +14,7 @@ * limitations under the License. */ +const { pathToFileURL } = require('url'); const { transformSync } = require('@swc/core'); const { addHook } = require('pirates'); const { Module } = require('module'); @@ -55,7 +56,10 @@ addHook( const transformed = transformSync(code, { filename, sourceMaps: 'inline', - module: { type: 'commonjs' }, + module: { + type: 'commonjs', + ignoreDynamic: true, + }, jsc: { target: 'es2022', parser: { @@ -76,3 +80,8 @@ addHook( }, { extensions: ['.js', '.cjs'], ignoreNodeModules: true }, ); + +// Register module hooks, used by "type": "module" in package.json, .mjs and +// .mts files, as well as dynamic import(...)s, although dynamic imports will be +// handled be the CommonJS hooks in this file if what it points to is CommonJS. +Module.register('./nodeTransformHooks.mjs', pathToFileURL(__filename)); diff --git a/packages/cli/config/nodeTransformHooks.mjs b/packages/cli/config/nodeTransformHooks.mjs new file mode 100644 index 0000000000..5d37ac05c0 --- /dev/null +++ b/packages/cli/config/nodeTransformHooks.mjs @@ -0,0 +1,282 @@ +/* + * 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 { dirname, extname, resolve as resolvePath } from 'path'; +import { fileURLToPath } from 'url'; +import { transformFile } from '@swc/core'; +import { isBuiltin } from 'node:module'; +import { readFile } from 'fs/promises'; +import { existsSync } from 'fs'; + +// @ts-check + +// No explicit file extension, no type in package.json +const DEFAULT_MODULE_FORMAT = 'commonjs'; + +// Source file extensions to look for when using bundle resolution strategy +const SRC_EXTS = ['.ts', '.js']; +const TS_EXTS = ['.ts', '.mts', '.cts']; +const moduleTypeTable = { + '.mjs': 'module', + '.mts': 'module', + '.cjs': 'commonjs', + '.cts': 'commonjs', + '.ts': undefined, + '.js': undefined, +}; + +/** @type {import('module').ResolveHook} */ +export async function resolve(specifier, context, nextResolve) { + // Built-in modules are handled by the default resolver + if (isBuiltin(specifier)) { + return nextResolve(specifier, context); + } + + const ext = extname(specifier); + + // Unless there's an explicit import attribute, JSON files are loaded with our custom loader that's defined below. + if (ext === '.json' && !context.importAttributes?.type) { + const jsonResult = await nextResolve(specifier, context); + return { + ...jsonResult, + format: 'commonjs', + importAttributes: { type: 'json' }, + }; + } + + // Anything else with an explicit extension is handled by the default + // resolver, except that we help determine the module type where needed. + if (ext !== '') { + return withDetectedModuleType(await nextResolve(specifier, context)); + } + + // Other external modules are handled by the default resolver, but again we + // help determine the module type where needed. + if (!specifier.startsWith('.')) { + return withDetectedModuleType(await nextResolve(specifier, context)); + } + + // The rest of this function handles the case of resolving imports that do not + // specify any extension and might point to a directory with an `index.*` + // file. We resolve those using the same logic as most JS bundlers would, with + // the addition of checking if there's an explicit module format listed in the + // closest `package.json` file. + // + // We use a bundle resolution strategy in order to keep code consistent across + // Backstage codebases that contains code both for Web and Node.js, and to + // support packages with common code that can be used in both environments. + try { + // This is expected to throw, but in the event that this module specifier is + // supported we prefer to use the default resolver. + return await nextResolve(specifier, context); + } catch (error) { + if (error.code === 'ERR_UNSUPPORTED_DIR_IMPORT') { + const spec = `${specifier}${specifier.endsWith('/') ? '' : '/'}index`; + const resolved = await resolveWithoutExt(spec, context, nextResolve); + if (resolved) { + return withDetectedModuleType(resolved); + } + } else if (error.code === 'ERR_MODULE_NOT_FOUND') { + const resolved = await resolveWithoutExt(specifier, context, nextResolve); + if (resolved) { + return withDetectedModuleType(resolved); + } + } + + // Unexpected error or no resolution found + throw error; + } +} + +/** + * Populates the `format` field in the resolved object based on the closest `package.json` file. + * + * @param {import('module').ResolveFnOutput} resolved + * @returns {Promise} + */ +async function withDetectedModuleType(resolved) { + // Already has an explicit format + if (resolved.format) { + return resolved; + } + // Happens in Node.js v22 when there's a package.json without an explicit "type" field. Use the default. + if (resolved.format === null) { + return { ...resolved, format: DEFAULT_MODULE_FORMAT }; + } + + const ext = extname(resolved.url); + + const explicitFormat = moduleTypeTable[ext]; + if (explicitFormat) { + return { + ...resolved, + format: explicitFormat, + }; + } + + // TODO(Rugvip): Afaik this should never happen and we can remove this check, but want it here for a little while to verify. + if (ext === '.js') { + throw new Error('Unexpected .js file without explicit format'); + } + + // TODO(Rugvip): Does this need caching? kept it simple for now but worth exploring + const packageJsonPath = await findPackageJSON(fileURLToPath(resolved.url)); + if (!packageJsonPath) { + return resolved; + } + + const packageJson = JSON.parse(await readFile(packageJsonPath, 'utf8')); + return { + ...resolved, + format: packageJson.type ?? DEFAULT_MODULE_FORMAT, + }; +} + +/** + * Find the closest package.json file from the given path. + * + * TODO(Rugvip): This can be replaced with the Node.js built-in with the same name once it is stable. + * @param {string} startPath + * @returns {Promise} + */ +async function findPackageJSON(startPath) { + let path = startPath; + + // Some confidence check to avoid infinite loop + for (let i = 0; i < 1000; i++) { + const packagePath = resolvePath(path, 'package.json'); + if (existsSync(packagePath)) { + return packagePath; + } + + const newPath = dirname(path); + if (newPath === path) { + return undefined; + } + path = newPath; + } + + throw new Error( + `Iteration limit reached when searching for package.json at ${startPath}`, + ); +} + +/** @type {import('module').ResolveHook} */ +async function resolveWithoutExt(specifier, context, nextResolve) { + for (const tryExt of SRC_EXTS) { + try { + const resolved = await nextResolve(specifier + tryExt, { + ...context, + format: 'commonjs', + }); + return { + ...resolved, + format: moduleTypeTable[tryExt] ?? resolved.format, + }; + } catch { + /* ignore */ + } + } + return undefined; +} + +/** @type {import('module').LoadHook} */ +export async function load(url, context, nextLoad) { + // Non-file URLs are handled by the default loader + if (!url.startsWith('file://')) { + return nextLoad(url, context); + } + + // JSON files loaded as CommonJS are handled by this custom loader, because + // the default one doesn't work. For JSON loading to work we'd need the + // synchronous hooks that aren't supported yet, or avoid using the CommonJS + // compatibility. + if ( + context.format === 'commonjs' && + context.importAttributes?.type === 'json' + ) { + try { + // TODO(Rugvip): Make sure this is valid JSON + const content = await readFile(fileURLToPath(url), 'utf8'); + return { + source: `module.exports = (${content})`, + format: 'commonjs', + shortCircuit: true, + }; + } catch { + // Let the default loader generate the error + return nextLoad(url, context); + } + } + + const ext = extname(url); + + // Non-TS files are handled by the default loader + if (!TS_EXTS.includes(ext)) { + return nextLoad(url, context); + } + + const format = context.format ?? DEFAULT_MODULE_FORMAT; + + // We have two choices at this point, we can either transform CommonJS files + // and return the transformed source code, or let the default loader handle + // them. If we transform them ourselves we will enter CommonJS compatibility + // mode in the new module system in Node.js, this effectively means all + // CommonJS loaded via `require` calls from this point will all be treated as + // if it was loaded via `import` calls from modules. + // + // The CommonJS compatibility layer will try to identify named exports and + // make them available directly, which is convenient as it avoids things like + // `import(...).then(m => m.default.foo)`, allowing you to instead write + // `import(...).then(m => m.foo)`. The compatibility layer doesn't always work + // all that well though, and can lead to module loading issues in many cases, + // especially for older code. + + // This `if` block opts-out of using CommonJS compatibility mode by default, + // and instead leaves it to our existing loader to transform CommonJS. We do + // however use compatibility mode for the more explicit .cts file extension, + // allows for a way to opt-in to the new behavior. + // + // TODO(Rugvip): Once the synchronous hooks API is available for us to use, we might be able to adopt that instead + if (format === 'commonjs' && ext !== '.cts') { + return nextLoad(url, { ...context, format }); + } + + const transformed = await transformFile(fileURLToPath(url), { + sourceMaps: 'inline', + module: { + type: format === 'module' ? 'es6' : 'commonjs', + ignoreDynamic: true, + + // This helps the Node.js CommonJS compat layer identify named exports. + exportInteropAnnotation: true, + }, + jsc: { + target: 'es2022', + parser: { + syntax: 'typescript', + }, + }, + }); + + return { + ...context, + shortCircuit: true, + source: transformed.code, + format, + responseURL: url, + }; +} diff --git a/packages/cli/config/tsconfig.json b/packages/cli/config/tsconfig.json index aa25e59451..ac5e62b52e 100644 --- a/packages/cli/config/tsconfig.json +++ b/packages/cli/config/tsconfig.json @@ -1,5 +1,6 @@ { "compilerOptions": { + "allowImportingTsExtensions": true, "allowJs": true, "declaration": true, "declarationMap": false, diff --git a/packages/cli/src/alpha.ts b/packages/cli/src/alpha.ts index 4b2cfa4842..f6cd2157ae 100644 --- a/packages/cli/src/alpha.ts +++ b/packages/cli/src/alpha.ts @@ -24,6 +24,6 @@ import chalk from 'chalk'; ), ); const initializer = new CliInitializer(); - initializer.add(import('./modules/config/alpha').then(m => m.default)); + initializer.add(import('./modules/config/alpha')); await initializer.run(); })(); diff --git a/packages/cli/src/commands/index.ts b/packages/cli/src/commands/index.ts index 0f38fc1e8a..f1119053ec 100644 --- a/packages/cli/src/commands/index.ts +++ b/packages/cli/src/commands/index.ts @@ -43,7 +43,7 @@ export function registerRepoCommand(program: Command) { '--minify', 'Minify the generated code. Does not apply to app package (app is minified by default).', ) - .action(lazy(() => import('./repo/build').then(m => m.command))); + .action(lazy(() => import('./repo/build'), 'command')); command .command('lint') @@ -70,7 +70,7 @@ export function registerRepoCommand(program: Command) { 'Set the success cache location, (default: node_modules/.cache/backstage-cli)', ) .option('--fix', 'Attempt to automatically fix violations') - .action(lazy(() => import('./repo/lint').then(m => m.command))); + .action(lazy(() => import('./repo/lint'), 'command')); command .command('fix') @@ -83,20 +83,18 @@ export function registerRepoCommand(program: Command) { '--check', 'Fail if any packages would have been changed by the command', ) - .action(lazy(() => import('./repo/fix').then(m => m.command))); + .action(lazy(() => import('./repo/fix'), 'command')); command .command('clean') .description('Delete cache and output directories') - .action(lazy(() => import('./repo/clean').then(m => m.command))); + .action(lazy(() => import('./repo/clean'), 'command')); command .command('list-deprecations') .description('List deprecations') .option('--json', 'Output as JSON') - .action( - lazy(() => import('./repo/list-deprecations').then(m => m.command)), - ); + .action(lazy(() => import('./repo/list-deprecations'), 'command')); command .command('test') @@ -118,7 +116,7 @@ export function registerRepoCommand(program: Command) { 'Show help for Jest CLI options, which are passed through', ) .description('Run tests, forwarding args to Jest, defaulting to watch mode') - .action(lazy(() => import('./repo/test').then(m => m.command))); + .action(lazy(() => import('./repo/test'), 'command')); } export function registerScriptCommand(program: Command) { @@ -139,7 +137,7 @@ export function registerScriptCommand(program: Command) { ) .option('--require ', 'Add a --require argument to the node process') .option('--link ', 'Link an external workspace for module resolution') - .action(lazy(() => import('./start').then(m => m.command))); + .action(lazy(() => import('./start'), 'command')); command .command('build') @@ -163,7 +161,7 @@ export function registerScriptCommand(program: Command) { (opt: string, opts: string[]) => (opts ? [...opts, opt] : [opt]), Array(), ) - .action(lazy(() => import('./build').then(m => m.command))); + .action(lazy(() => import('./build'), 'command')); command .command('lint [directories...]') @@ -182,29 +180,29 @@ export function registerScriptCommand(program: Command) { 'Fail if more than this number of warnings. -1 allows warnings. (default: 0)', ) .description('Lint a package') - .action(lazy(() => import('./lint').then(m => m.default))); + .action(lazy(() => import('./lint'), 'default')); command .command('test') .allowUnknownOption(true) // Allows the command to run, but we still need to parse raw args .helpOption(', --backstage-cli-help') // Let Jest handle help .description('Run tests, forwarding args to Jest, defaulting to watch mode') - .action(lazy(() => import('./test').then(m => m.default))); + .action(lazy(() => import('./test'), 'default')); command .command('clean') .description('Delete cache directories') - .action(lazy(() => import('./clean/clean').then(m => m.default))); + .action(lazy(() => import('./clean/clean'), 'default')); command .command('prepack') .description('Prepares a package for packaging before publishing') - .action(lazy(() => import('./pack').then(m => m.pre))); + .action(lazy(() => import('./pack'), 'pre')); command .command('postpack') .description('Restores the changes made by the prepack command') - .action(lazy(() => import('./pack').then(m => m.post))); + .action(lazy(() => import('./pack'), 'post')); } export function registerMigrateCommand(program: Command) { @@ -215,39 +213,31 @@ export function registerMigrateCommand(program: Command) { command .command('package-roles') .description(`Add package role field to packages that don't have it`) - .action(lazy(() => import('./migrate/packageRole').then(m => m.default))); + .action(lazy(() => import('./migrate/packageRole'), 'default')); command .command('package-scripts') .description('Set package scripts according to each package role') - .action( - lazy(() => import('./migrate/packageScripts').then(m => m.command)), - ); + .action(lazy(() => import('./migrate/packageScripts'), 'command')); command .command('package-exports') .description('Synchronize package subpath export definitions') - .action( - lazy(() => import('./migrate/packageExports').then(m => m.command)), - ); + .action(lazy(() => import('./migrate/packageExports'), 'command')); command .command('package-lint-configs') .description( 'Migrates all packages to use @backstage/cli/config/eslint-factory', ) - .action( - lazy(() => import('./migrate/packageLintConfigs').then(m => m.command)), - ); + .action(lazy(() => import('./migrate/packageLintConfigs'), 'command')); command .command('react-router-deps') .description( 'Migrates the react-router dependencies for all packages to be peer dependencies', ) - .action( - lazy(() => import('./migrate/reactRouterDeps').then(m => m.command)), - ); + .action(lazy(() => import('./migrate/reactRouterDeps'), 'command')); } export function registerCommands(program: Command) { @@ -281,7 +271,7 @@ export function registerCommands(program: Command) { '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').then(m => m.default))); + .action(lazy(() => import('./new/new'), 'default')); registerConfigCommands(program); registerRepoCommand(program); @@ -302,7 +292,7 @@ export function registerCommands(program: Command) { .option('--skip-install', 'Skips yarn install step') .option('--skip-migrate', 'Skips migration of any moved packages') .description('Bump Backstage packages to the latest versions') - .action(lazy(() => import('./versions/bump').then(m => m.default))); + .action(lazy(() => import('./versions/bump'), 'default')); program .command('versions:migrate') @@ -317,7 +307,7 @@ export function registerCommands(program: Command) { .description( 'Migrate any plugins that have been moved to the @backstage-community namespace automatically', ) - .action(lazy(() => import('./versions/migrate').then(m => m.default))); + .action(lazy(() => import('./versions/migrate'), 'default')); program .command('build-workspace [packages...]') @@ -334,17 +324,17 @@ export function registerCommands(program: Command) { 'Force workspace output to be a result of running `yarn pack` on each package (warning: very slow)', ) .description('Builds a temporary dist workspace from the provided packages') - .action(lazy(() => import('./buildWorkspace').then(m => m.default))); + .action(lazy(() => import('./buildWorkspace'), 'default')); program .command('create-github-app ') .description('Create new GitHub App in your organization.') - .action(lazy(() => import('./create-github-app').then(m => m.default))); + .action(lazy(() => import('./create-github-app'), 'default')); program .command('info') .description('Show helpful information for debugging and reporting bugs') - .action(lazy(() => import('./info').then(m => m.default))); + .action(lazy(() => import('./info'), 'default')); // Notifications for removed commands program diff --git a/packages/cli/src/lib/builder/config.ts b/packages/cli/src/lib/builder/config.ts index e419503649..3b55a5a451 100644 --- a/packages/cli/src/lib/builder/config.ts +++ b/packages/cli/src/lib/builder/config.ts @@ -16,7 +16,11 @@ import chalk from 'chalk'; import fs from 'fs-extra'; -import { relative as relativePath, resolve as resolvePath } from 'path'; +import { + extname, + relative as relativePath, + resolve as resolvePath, +} from 'path'; import commonjs from '@rollup/plugin-commonjs'; import resolve from '@rollup/plugin-node-resolve'; import postcss from 'rollup-plugin-postcss'; @@ -29,6 +33,7 @@ import { RollupOptions, OutputOptions, WarningHandlerWithDefault, + OutputPlugin, } from 'rollup'; import { forwardFileImports } from './plugins'; @@ -40,6 +45,12 @@ import { readEntryPoints } from '../entryPoints'; const SCRIPT_EXTS = ['.js', '.jsx', '.ts', '.tsx']; +const MODULE_EXTS = ['.mjs', '.mts']; +const COMMONJS_EXTS = ['.cjs', '.cts']; +const MOD_EXT = '.mjs'; +const CJS_EXT = '.cjs'; +const CJS_JS_EXT = '.cjs.js'; + function isFileImport(source: string) { if (source.startsWith('.')) { return true; @@ -68,6 +79,39 @@ function buildInternalImportPattern(options: BuildOptions) { return new RegExp(`^(?:${names.join('|')})(?:$|/)`); } +// This Rollup output plugin enables support for mixed CommonJS and ESM output. +// It does it be filtering out the unwanted output files that don't match the +// input file format, allowing the rollup configuration to have overlapping +// output configurations for different formats. +function multiOutputFormat(): OutputPlugin { + return { + name: 'backstage-multi-output-format', + generateBundle(opts, bundle) { + const filter: (name: string) => boolean = + opts.format === 'cjs' + ? s => s.endsWith(MOD_EXT) + : s => !s.endsWith(MOD_EXT); + + // Delete any files that don't match the current output format + for (const name in bundle) { + if (filter(name)) { + delete bundle[name]; + delete bundle[`${name}.map`]; + } + } + }, + renderDynamicImport(opts) { + if (opts.format === 'cjs') { + return { + left: 'import(', + right: ')', + }; + } + return undefined; + }, + }; +} + export async function makeRollupConfigs( options: BuildOptions, ): Promise { @@ -120,18 +164,47 @@ export async function makeRollupConfigs( const rewriteNodeModules = (name: string) => name.replaceAll('node_modules', 'node_modules_dist'); + // For CommonJS we build both CommonJS and ESM output. Each of these outputs + // can output both .cjs and .mjs files. The files from each of these outputs + // will overlap, but we trim away files where the format doesn't match the + // file extensions. That way we are left with a combination of .cjs and .mjs + // files where the module format in the file matches the file extension. if (options.outputs.has(Output.cjs)) { - output.push({ + const defaultExt = targetPkg.type === 'module' ? MOD_EXT : CJS_JS_EXT; + const outputOpts: OutputOptions = { dir: distDir, - entryFileNames: chunkInfo => - `${rewriteNodeModules(chunkInfo.name)}.cjs.js`, - chunkFileNames: `cjs/[name]-[hash].cjs.js`, - format: 'commonjs', - interop: 'compat', + entryFileNames(chunkInfo) { + const cleanName = rewriteNodeModules(chunkInfo.name); + + const inputId = chunkInfo.facadeModuleId; + if (!inputId) { + return cleanName + defaultExt; + } + + const inputExt = extname(inputId); + if (MODULE_EXTS.includes(inputExt)) { + return cleanName + MOD_EXT; + } + if (COMMONJS_EXTS.includes(inputExt)) { + return cleanName + CJS_EXT; + } + return cleanName + defaultExt; + }, sourcemap: true, preserveModules: true, preserveModulesRoot: `${targetDir}/src`, + interop: 'compat', exports: 'named', + plugins: [multiOutputFormat()], + }; + + output.push({ + ...outputOpts, + format: 'cjs', + }); + output.push({ + ...outputOpts, + format: 'module', }); } if (options.outputs.has(Output.esm)) { @@ -160,7 +233,10 @@ export async function makeRollupConfigs( // All module imports are always marked as external external, plugins: [ - resolve({ mainFields }), + resolve({ + mainFields, + extensions: SCRIPT_EXTS, + }), commonjs({ include: /node_modules/, exclude: [/\/[^/]+\.(?:stories|test)\.[^/]+$/], diff --git a/packages/cli/src/lib/builder/packager.ts b/packages/cli/src/lib/builder/packager.ts index be9bc9a6ea..b709cb0408 100644 --- a/packages/cli/src/lib/builder/packager.ts +++ b/packages/cli/src/lib/builder/packager.ts @@ -107,7 +107,7 @@ export const buildPackage = async (options: BuildOptions) => { const rollupConfigs = await makeRollupConfigs(options); - await fs.remove(paths.resolveTarget('dist')); + await fs.remove(resolvePath(options.targetDir ?? paths.targetDir, 'dist')); const buildTasks = rollupConfigs.map(rollupBuild); diff --git a/packages/cli/src/lib/lazy.ts b/packages/cli/src/lib/lazy.ts index 6d2cb1cd4f..d1255ea1bc 100644 --- a/packages/cli/src/lib/lazy.ts +++ b/packages/cli/src/lib/lazy.ts @@ -17,13 +17,25 @@ import { assertError } from '@backstage/errors'; import { exitWithError } from '../lib/errors'; +type ActionFunc = (...args: any[]) => Promise; +type ActionExports = { + [KName in keyof TModule as TModule[KName] extends ActionFunc + ? KName + : never]: TModule[KName]; +}; + // Wraps an action function so that it always exits and handles errors -export function lazy( - getActionFunc: () => Promise<(...args: any[]) => Promise>, +export function lazy( + moduleLoader: () => Promise, + exportName: keyof ActionExports, ): (...args: any[]) => Promise { return async (...args: any[]) => { try { - const actionFunc = await getActionFunc(); + const mod = await moduleLoader(); + const actualModule = ( + mod as unknown as { default: ActionExports } + ).default; + const actionFunc = actualModule[exportName] as ActionFunc; await actionFunc(...args); process.exit(0); diff --git a/packages/cli/src/modules/config/alpha.ts b/packages/cli/src/modules/config/alpha.ts index c32982086a..9ce6080a4a 100644 --- a/packages/cli/src/modules/config/alpha.ts +++ b/packages/cli/src/modules/config/alpha.ts @@ -32,7 +32,7 @@ export default createCliPlugin({ 'Only include the schema that applies to the given package', ) .description('Browse the configuration reference documentation') - .action(lazy(() => import('./commands/docs').then(m => m.default))); + .action(lazy(() => import('./commands/docs'), 'default')); await defaultCommand.parseAsync(args, { from: 'user' }); }, diff --git a/packages/cli/src/modules/config/index.ts b/packages/cli/src/modules/config/index.ts index 0c6a79577d..a1436d0c21 100644 --- a/packages/cli/src/modules/config/index.ts +++ b/packages/cli/src/modules/config/index.ts @@ -32,7 +32,7 @@ export function registerCommands(program: Command) { 'Only include the schema that applies to the given package', ) .description('Browse the configuration reference documentation') - .action(lazy(() => import('./commands/docs').then(m => m.default))); + .action(lazy(() => import('./commands/docs'), 'default')); program .command('config:print') @@ -49,7 +49,7 @@ export function registerCommands(program: Command) { ) .option(...configOption) .description('Print the app configuration for the current package') - .action(lazy(() => import('./commands/print').then(m => m.default))); + .action(lazy(() => import('./commands/print'), 'default')); program .command('config:check') @@ -68,7 +68,7 @@ export function registerCommands(program: Command) { .description( 'Validate that the given configuration loads and matches schema', ) - .action(lazy(() => import('./commands/validate').then(m => m.default))); + .action(lazy(() => import('./commands/validate'), 'default')); program .command('config:schema') @@ -83,5 +83,5 @@ export function registerCommands(program: Command) { .option('--merge', 'Print the config schemas merged', true) .option('--no-merge', 'Print the config schemas not merged') .description('Print configuration schema') - .action(lazy(() => import('./commands/schema').then(m => m.default))); + .action(lazy(() => import('./commands/schema'), 'default')); } diff --git a/packages/cli/src/tests/transforms/__fixtures__/.gitignore b/packages/cli/src/tests/transforms/__fixtures__/.gitignore new file mode 100644 index 0000000000..dd13a98e05 --- /dev/null +++ b/packages/cli/src/tests/transforms/__fixtures__/.gitignore @@ -0,0 +1,2 @@ +!node_modules +dist diff --git a/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-commonjs/a-default.js b/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-commonjs/a-default.js new file mode 100644 index 0000000000..67606e3f86 --- /dev/null +++ b/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-commonjs/a-default.js @@ -0,0 +1 @@ +module.exports = 'a' diff --git a/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-commonjs/a-named.js b/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-commonjs/a-named.js new file mode 100644 index 0000000000..0710f9dbe6 --- /dev/null +++ b/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-commonjs/a-named.js @@ -0,0 +1 @@ +exports.value = 'a' diff --git a/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-commonjs/b-default.mjs b/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-commonjs/b-default.mjs new file mode 100644 index 0000000000..a3bb49043e --- /dev/null +++ b/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-commonjs/b-default.mjs @@ -0,0 +1 @@ +export default 'b' diff --git a/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-commonjs/b-named.mjs b/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-commonjs/b-named.mjs new file mode 100644 index 0000000000..18049c8488 --- /dev/null +++ b/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-commonjs/b-named.mjs @@ -0,0 +1 @@ +export const value = 'b' diff --git a/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-commonjs/c-default.cjs b/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-commonjs/c-default.cjs new file mode 100644 index 0000000000..7212f4d5a7 --- /dev/null +++ b/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-commonjs/c-default.cjs @@ -0,0 +1 @@ +module.exports = 'c' diff --git a/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-commonjs/c-named.cjs b/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-commonjs/c-named.cjs new file mode 100644 index 0000000000..c1dcb4b923 --- /dev/null +++ b/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-commonjs/c-named.cjs @@ -0,0 +1 @@ +exports.value = 'c' diff --git a/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-commonjs/main.d.ts b/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-commonjs/main.d.ts new file mode 100644 index 0000000000..bdc1e24a02 --- /dev/null +++ b/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-commonjs/main.d.ts @@ -0,0 +1,15 @@ +export const namedA: string +export const namedB: string +export const namedC: string +export const defaultA: string +export const defaultB: string +export const defaultC: string + +export namespace dyn { + export const namedA: Promise + export const namedB: Promise + export const namedC: Promise + export const defaultA: Promise + export const defaultB: Promise + export const defaultC: Promise +} diff --git a/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-commonjs/main.js b/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-commonjs/main.js new file mode 100644 index 0000000000..d59f7789bd --- /dev/null +++ b/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-commonjs/main.js @@ -0,0 +1,14 @@ +exports.namedA = require('./a-named').value; +// exports.namedB = require('./b-named.mjs').value; +exports.namedC = require('./c-named.cjs').value; +exports.defaultA = require('./a-default'); +// exports.defaultB = require('./b-default.mjs').default; +exports.defaultC = require('./c-default.cjs'); +exports.dyn = { + namedA: import('./a-named').then(m => m.value), + namedB: import('./b-named.mjs').then(m => m.value), + namedC: import('./c-named.cjs').then(m => m.value), + defaultA: import('./a-default').then(m => m.default), + defaultB: import('./b-default.mjs').then(m => m.default), + defaultC: import('./c-default.cjs').then(m => m.default), +} diff --git a/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-commonjs/package.json b/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-commonjs/package.json new file mode 100644 index 0000000000..c5b04671bb --- /dev/null +++ b/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-commonjs/package.json @@ -0,0 +1,12 @@ +{ + "name": "dep-commonjs", + "type": "commonjs", + "exports": { + ".": "./main.js" + }, + "typesVersions": { + "*": { + "*": [ "main.d.ts" ] + } + } +} diff --git a/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-default/a-default.js b/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-default/a-default.js new file mode 100644 index 0000000000..67606e3f86 --- /dev/null +++ b/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-default/a-default.js @@ -0,0 +1 @@ +module.exports = 'a' diff --git a/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-default/a-named.js b/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-default/a-named.js new file mode 100644 index 0000000000..0710f9dbe6 --- /dev/null +++ b/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-default/a-named.js @@ -0,0 +1 @@ +exports.value = 'a' diff --git a/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-default/b-default.mjs b/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-default/b-default.mjs new file mode 100644 index 0000000000..a3bb49043e --- /dev/null +++ b/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-default/b-default.mjs @@ -0,0 +1 @@ +export default 'b' diff --git a/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-default/b-named.mjs b/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-default/b-named.mjs new file mode 100644 index 0000000000..18049c8488 --- /dev/null +++ b/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-default/b-named.mjs @@ -0,0 +1 @@ +export const value = 'b' diff --git a/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-default/c-default.cjs b/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-default/c-default.cjs new file mode 100644 index 0000000000..7212f4d5a7 --- /dev/null +++ b/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-default/c-default.cjs @@ -0,0 +1 @@ +module.exports = 'c' diff --git a/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-default/c-named.cjs b/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-default/c-named.cjs new file mode 100644 index 0000000000..c1dcb4b923 --- /dev/null +++ b/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-default/c-named.cjs @@ -0,0 +1 @@ +exports.value = 'c' diff --git a/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-default/main.d.ts b/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-default/main.d.ts new file mode 100644 index 0000000000..bdc1e24a02 --- /dev/null +++ b/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-default/main.d.ts @@ -0,0 +1,15 @@ +export const namedA: string +export const namedB: string +export const namedC: string +export const defaultA: string +export const defaultB: string +export const defaultC: string + +export namespace dyn { + export const namedA: Promise + export const namedB: Promise + export const namedC: Promise + export const defaultA: Promise + export const defaultB: Promise + export const defaultC: Promise +} diff --git a/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-default/main.js b/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-default/main.js new file mode 100644 index 0000000000..d59f7789bd --- /dev/null +++ b/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-default/main.js @@ -0,0 +1,14 @@ +exports.namedA = require('./a-named').value; +// exports.namedB = require('./b-named.mjs').value; +exports.namedC = require('./c-named.cjs').value; +exports.defaultA = require('./a-default'); +// exports.defaultB = require('./b-default.mjs').default; +exports.defaultC = require('./c-default.cjs'); +exports.dyn = { + namedA: import('./a-named').then(m => m.value), + namedB: import('./b-named.mjs').then(m => m.value), + namedC: import('./c-named.cjs').then(m => m.value), + defaultA: import('./a-default').then(m => m.default), + defaultB: import('./b-default.mjs').then(m => m.default), + defaultC: import('./c-default.cjs').then(m => m.default), +} diff --git a/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-default/package.json b/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-default/package.json new file mode 100644 index 0000000000..8deb7ce3f4 --- /dev/null +++ b/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-default/package.json @@ -0,0 +1,11 @@ +{ + "name": "dep-default", + "exports": { + ".": "./main.js" + }, + "typesVersions": { + "*": { + "*": [ "main.d.ts" ] + } + } +} diff --git a/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-module/a-default.js b/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-module/a-default.js new file mode 100644 index 0000000000..90bd54cd7f --- /dev/null +++ b/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-module/a-default.js @@ -0,0 +1 @@ +export default 'a' diff --git a/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-module/a-named.js b/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-module/a-named.js new file mode 100644 index 0000000000..7fea2538a3 --- /dev/null +++ b/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-module/a-named.js @@ -0,0 +1 @@ +export const value = 'a' diff --git a/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-module/b-default.mjs b/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-module/b-default.mjs new file mode 100644 index 0000000000..a3bb49043e --- /dev/null +++ b/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-module/b-default.mjs @@ -0,0 +1 @@ +export default 'b' diff --git a/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-module/b-named.mjs b/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-module/b-named.mjs new file mode 100644 index 0000000000..18049c8488 --- /dev/null +++ b/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-module/b-named.mjs @@ -0,0 +1 @@ +export const value = 'b' diff --git a/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-module/c-default.cjs b/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-module/c-default.cjs new file mode 100644 index 0000000000..7212f4d5a7 --- /dev/null +++ b/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-module/c-default.cjs @@ -0,0 +1 @@ +module.exports = 'c' diff --git a/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-module/c-named.cjs b/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-module/c-named.cjs new file mode 100644 index 0000000000..c1dcb4b923 --- /dev/null +++ b/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-module/c-named.cjs @@ -0,0 +1 @@ +exports.value = 'c' diff --git a/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-module/main.d.ts b/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-module/main.d.ts new file mode 100644 index 0000000000..bdc1e24a02 --- /dev/null +++ b/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-module/main.d.ts @@ -0,0 +1,15 @@ +export const namedA: string +export const namedB: string +export const namedC: string +export const defaultA: string +export const defaultB: string +export const defaultC: string + +export namespace dyn { + export const namedA: Promise + export const namedB: Promise + export const namedC: Promise + export const defaultA: Promise + export const defaultB: Promise + export const defaultC: Promise +} diff --git a/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-module/main.js b/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-module/main.js new file mode 100644 index 0000000000..8b42a09d4a --- /dev/null +++ b/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-module/main.js @@ -0,0 +1,14 @@ +export { value as namedA } from './a-named' +export { value as namedB } from './b-named.mjs' +export { value as namedC } from './c-named.cjs' +export { default as defaultA } from './a-default' +export { default as defaultB } from './b-default.mjs' +export { default as defaultC } from './c-default.cjs' +export const dyn = { + namedA: import('./a-named').then(m => m.value), + namedB: import('./b-named.mjs').then(m => m.value), + namedC: import('./c-named.cjs').then(m => m.value), + defaultA: import('./a-default').then(m => m.default), + defaultB: import('./b-default.mjs').then(m => m.default), + defaultC: import('./c-default.cjs').then(m => m.default), +} diff --git a/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-module/package.json b/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-module/package.json new file mode 100644 index 0000000000..29de5c862a --- /dev/null +++ b/packages/cli/src/tests/transforms/__fixtures__/node_modules/dep-module/package.json @@ -0,0 +1,12 @@ +{ + "name": "dep-module", + "type": "module", + "exports": { + ".": "./main.js" + }, + "typesVersions": { + "*": { + "*": [ "main.d.ts" ] + } + } +} diff --git a/packages/canon/docs/components/Text/index.ts b/packages/cli/src/tests/transforms/__fixtures__/pkg-commonjs/a-default.ts similarity index 95% rename from packages/canon/docs/components/Text/index.ts rename to packages/cli/src/tests/transforms/__fixtures__/pkg-commonjs/a-default.ts index 873fca2c76..a3d64880a9 100644 --- a/packages/canon/docs/components/Text/index.ts +++ b/packages/cli/src/tests/transforms/__fixtures__/pkg-commonjs/a-default.ts @@ -13,4 +13,4 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -export { Text } from './Text'; +export default 'a'; diff --git a/packages/canon/docs/components/Chip/index.ts b/packages/cli/src/tests/transforms/__fixtures__/pkg-commonjs/a-named.ts similarity index 95% rename from packages/canon/docs/components/Chip/index.ts rename to packages/cli/src/tests/transforms/__fixtures__/pkg-commonjs/a-named.ts index ff9e4794c5..132570f2bb 100644 --- a/packages/canon/docs/components/Chip/index.ts +++ b/packages/cli/src/tests/transforms/__fixtures__/pkg-commonjs/a-named.ts @@ -13,4 +13,4 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -export { Chip } from './Chip'; +export const value = 'a'; diff --git a/packages/canon/docs/components/Title/index.ts b/packages/cli/src/tests/transforms/__fixtures__/pkg-commonjs/b-default.mts similarity index 94% rename from packages/canon/docs/components/Title/index.ts rename to packages/cli/src/tests/transforms/__fixtures__/pkg-commonjs/b-default.mts index 998dc81882..57d07f2c30 100644 --- a/packages/canon/docs/components/Title/index.ts +++ b/packages/cli/src/tests/transforms/__fixtures__/pkg-commonjs/b-default.mts @@ -13,4 +13,4 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -export { Title } from './Title'; +export default 'b'; diff --git a/packages/canon/docs/components/Banner/index.ts b/packages/cli/src/tests/transforms/__fixtures__/pkg-commonjs/b-named.mts similarity index 94% rename from packages/canon/docs/components/Banner/index.ts rename to packages/cli/src/tests/transforms/__fixtures__/pkg-commonjs/b-named.mts index 31f4aa88b0..be9bb39348 100644 --- a/packages/canon/docs/components/Banner/index.ts +++ b/packages/cli/src/tests/transforms/__fixtures__/pkg-commonjs/b-named.mts @@ -13,4 +13,4 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -export { Banner } from './Banner'; +export const value = 'b'; diff --git a/packages/cli/src/tests/transforms/__fixtures__/pkg-commonjs/c-default.cts b/packages/cli/src/tests/transforms/__fixtures__/pkg-commonjs/c-default.cts new file mode 100644 index 0000000000..48f5b4f136 --- /dev/null +++ b/packages/cli/src/tests/transforms/__fixtures__/pkg-commonjs/c-default.cts @@ -0,0 +1,16 @@ +/* + * 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. + */ +export default 'c'; diff --git a/packages/cli/src/tests/transforms/__fixtures__/pkg-commonjs/c-named.cts b/packages/cli/src/tests/transforms/__fixtures__/pkg-commonjs/c-named.cts new file mode 100644 index 0000000000..c3e5b58572 --- /dev/null +++ b/packages/cli/src/tests/transforms/__fixtures__/pkg-commonjs/c-named.cts @@ -0,0 +1,16 @@ +/* + * 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. + */ +export const value = 'c'; diff --git a/packages/cli/src/tests/transforms/__fixtures__/pkg-commonjs/main.ts b/packages/cli/src/tests/transforms/__fixtures__/pkg-commonjs/main.ts new file mode 100644 index 0000000000..d6bdfb30d1 --- /dev/null +++ b/packages/cli/src/tests/transforms/__fixtures__/pkg-commonjs/main.ts @@ -0,0 +1,71 @@ +/* + * 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 * as depCommonJs from 'dep-commonjs'; +// import * as depModule from 'dep-module'; +import * as depDefault from 'dep-default'; +import { value as namedA } from './a-named'; +// import { value as namedB } from './b-named.mts'; +import { value as namedC } from './c-named.cts'; +import { default as defaultA } from './a-default'; +// import { default as defaultB } from './b-default.mts'; +import { default as defaultC } from './c-default.cts'; + +async function resolveAll(obj: object): Promise { + const val = await obj; + if (typeof val !== 'object' || val === null) { + return val; + } + if (Array.isArray(val)) { + return await Promise.all(val.map(resolveAll)); + } + return Object.fromEntries( + await Promise.all( + Object.entries(obj).map(async ([key, value]) => [ + key, + await resolveAll(await value), + ]), + ), + ); +} + +export const values = resolveAll({ + depCommonJs, + // depModule, + depDefault, + dynCommonJs: import('dep-commonjs'), + dynModule: import('dep-module'), + dynDefault: import('dep-default'), + dep: { + namedA, + // namedB, + namedC, + defaultA, + // defaultB, + defaultC, + }, + dyn: { + // @ts-expect-error Default exports from CommonJS are not well supported + namedA: import('./a-named').then(m => m.default.value), + namedB: import('./b-named.mts').then(m => m.value), + namedC: import('./c-named.cts').then(m => m.value), + // @ts-expect-error Default exports from CommonJS are not well supported + defaultA: import('./a-default').then(m => m.default.default), + defaultB: import('./b-default.mts').then(m => m.default), + // @ts-expect-error Default exports from CommonJS are not well supported + defaultC: import('./c-default.cts').then(m => m.default.default), + }, +}); diff --git a/packages/cli/src/tests/transforms/__fixtures__/pkg-commonjs/package.json b/packages/cli/src/tests/transforms/__fixtures__/pkg-commonjs/package.json new file mode 100644 index 0000000000..b39408ee58 --- /dev/null +++ b/packages/cli/src/tests/transforms/__fixtures__/pkg-commonjs/package.json @@ -0,0 +1,8 @@ +{ + "name": "pkg-commonjs", + "type": "commonjs", + "exports": { + ".": "./main.ts", + "./print": "./print.ts" + } +} diff --git a/packages/canon/docs/components/Columns/index.ts b/packages/cli/src/tests/transforms/__fixtures__/pkg-commonjs/print.ts similarity index 86% rename from packages/canon/docs/components/Columns/index.ts rename to packages/cli/src/tests/transforms/__fixtures__/pkg-commonjs/print.ts index 05de0850be..7c24f99f37 100644 --- a/packages/canon/docs/components/Columns/index.ts +++ b/packages/cli/src/tests/transforms/__fixtures__/pkg-commonjs/print.ts @@ -13,4 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -export { Columns } from './Columns'; + +import { values } from './main'; + +values.then(obj => console.log(JSON.stringify(obj, null, 2))); diff --git a/packages/cli/src/tests/transforms/__fixtures__/pkg-default/a-default.ts b/packages/cli/src/tests/transforms/__fixtures__/pkg-default/a-default.ts new file mode 100644 index 0000000000..a3d64880a9 --- /dev/null +++ b/packages/cli/src/tests/transforms/__fixtures__/pkg-default/a-default.ts @@ -0,0 +1,16 @@ +/* + * 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. + */ +export default 'a'; diff --git a/packages/cli/src/tests/transforms/__fixtures__/pkg-default/a-named.ts b/packages/cli/src/tests/transforms/__fixtures__/pkg-default/a-named.ts new file mode 100644 index 0000000000..132570f2bb --- /dev/null +++ b/packages/cli/src/tests/transforms/__fixtures__/pkg-default/a-named.ts @@ -0,0 +1,16 @@ +/* + * 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. + */ +export const value = 'a'; diff --git a/packages/cli/src/tests/transforms/__fixtures__/pkg-default/b-default.mts b/packages/cli/src/tests/transforms/__fixtures__/pkg-default/b-default.mts new file mode 100644 index 0000000000..57d07f2c30 --- /dev/null +++ b/packages/cli/src/tests/transforms/__fixtures__/pkg-default/b-default.mts @@ -0,0 +1,16 @@ +/* + * 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. + */ +export default 'b'; diff --git a/packages/cli/src/tests/transforms/__fixtures__/pkg-default/b-named.mts b/packages/cli/src/tests/transforms/__fixtures__/pkg-default/b-named.mts new file mode 100644 index 0000000000..be9bb39348 --- /dev/null +++ b/packages/cli/src/tests/transforms/__fixtures__/pkg-default/b-named.mts @@ -0,0 +1,16 @@ +/* + * 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. + */ +export const value = 'b'; diff --git a/packages/cli/src/tests/transforms/__fixtures__/pkg-default/c-default.cts b/packages/cli/src/tests/transforms/__fixtures__/pkg-default/c-default.cts new file mode 100644 index 0000000000..48f5b4f136 --- /dev/null +++ b/packages/cli/src/tests/transforms/__fixtures__/pkg-default/c-default.cts @@ -0,0 +1,16 @@ +/* + * 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. + */ +export default 'c'; diff --git a/packages/cli/src/tests/transforms/__fixtures__/pkg-default/c-named.cts b/packages/cli/src/tests/transforms/__fixtures__/pkg-default/c-named.cts new file mode 100644 index 0000000000..c3e5b58572 --- /dev/null +++ b/packages/cli/src/tests/transforms/__fixtures__/pkg-default/c-named.cts @@ -0,0 +1,16 @@ +/* + * 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. + */ +export const value = 'c'; diff --git a/packages/cli/src/tests/transforms/__fixtures__/pkg-default/main.ts b/packages/cli/src/tests/transforms/__fixtures__/pkg-default/main.ts new file mode 100644 index 0000000000..d6bdfb30d1 --- /dev/null +++ b/packages/cli/src/tests/transforms/__fixtures__/pkg-default/main.ts @@ -0,0 +1,71 @@ +/* + * 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 * as depCommonJs from 'dep-commonjs'; +// import * as depModule from 'dep-module'; +import * as depDefault from 'dep-default'; +import { value as namedA } from './a-named'; +// import { value as namedB } from './b-named.mts'; +import { value as namedC } from './c-named.cts'; +import { default as defaultA } from './a-default'; +// import { default as defaultB } from './b-default.mts'; +import { default as defaultC } from './c-default.cts'; + +async function resolveAll(obj: object): Promise { + const val = await obj; + if (typeof val !== 'object' || val === null) { + return val; + } + if (Array.isArray(val)) { + return await Promise.all(val.map(resolveAll)); + } + return Object.fromEntries( + await Promise.all( + Object.entries(obj).map(async ([key, value]) => [ + key, + await resolveAll(await value), + ]), + ), + ); +} + +export const values = resolveAll({ + depCommonJs, + // depModule, + depDefault, + dynCommonJs: import('dep-commonjs'), + dynModule: import('dep-module'), + dynDefault: import('dep-default'), + dep: { + namedA, + // namedB, + namedC, + defaultA, + // defaultB, + defaultC, + }, + dyn: { + // @ts-expect-error Default exports from CommonJS are not well supported + namedA: import('./a-named').then(m => m.default.value), + namedB: import('./b-named.mts').then(m => m.value), + namedC: import('./c-named.cts').then(m => m.value), + // @ts-expect-error Default exports from CommonJS are not well supported + defaultA: import('./a-default').then(m => m.default.default), + defaultB: import('./b-default.mts').then(m => m.default), + // @ts-expect-error Default exports from CommonJS are not well supported + defaultC: import('./c-default.cts').then(m => m.default.default), + }, +}); diff --git a/packages/cli/src/tests/transforms/__fixtures__/pkg-default/package.json b/packages/cli/src/tests/transforms/__fixtures__/pkg-default/package.json new file mode 100644 index 0000000000..5b0b075a3c --- /dev/null +++ b/packages/cli/src/tests/transforms/__fixtures__/pkg-default/package.json @@ -0,0 +1,7 @@ +{ + "name": "pkg-default", + "exports": { + ".": "./main.ts", + "./print": "./print.ts" + } +} diff --git a/packages/canon/docs/components/ComponentStatus/index.ts b/packages/cli/src/tests/transforms/__fixtures__/pkg-default/print.ts similarity index 86% rename from packages/canon/docs/components/ComponentStatus/index.ts rename to packages/cli/src/tests/transforms/__fixtures__/pkg-default/print.ts index 238c001289..7c24f99f37 100644 --- a/packages/canon/docs/components/ComponentStatus/index.ts +++ b/packages/cli/src/tests/transforms/__fixtures__/pkg-default/print.ts @@ -13,4 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -export { ComponentStatus } from './ComponentStatus'; + +import { values } from './main'; + +values.then(obj => console.log(JSON.stringify(obj, null, 2))); diff --git a/packages/cli/src/tests/transforms/__fixtures__/pkg-module/a-default-explicit.mts b/packages/cli/src/tests/transforms/__fixtures__/pkg-module/a-default-explicit.mts new file mode 100644 index 0000000000..a3d64880a9 --- /dev/null +++ b/packages/cli/src/tests/transforms/__fixtures__/pkg-module/a-default-explicit.mts @@ -0,0 +1,16 @@ +/* + * 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. + */ +export default 'a'; diff --git a/packages/cli/src/tests/transforms/__fixtures__/pkg-module/a-default.ts b/packages/cli/src/tests/transforms/__fixtures__/pkg-module/a-default.ts new file mode 100644 index 0000000000..a3d64880a9 --- /dev/null +++ b/packages/cli/src/tests/transforms/__fixtures__/pkg-module/a-default.ts @@ -0,0 +1,16 @@ +/* + * 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. + */ +export default 'a'; diff --git a/packages/cli/src/tests/transforms/__fixtures__/pkg-module/a-named-explicit.mts b/packages/cli/src/tests/transforms/__fixtures__/pkg-module/a-named-explicit.mts new file mode 100644 index 0000000000..132570f2bb --- /dev/null +++ b/packages/cli/src/tests/transforms/__fixtures__/pkg-module/a-named-explicit.mts @@ -0,0 +1,16 @@ +/* + * 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. + */ +export const value = 'a'; diff --git a/packages/cli/src/tests/transforms/__fixtures__/pkg-module/a-named.ts b/packages/cli/src/tests/transforms/__fixtures__/pkg-module/a-named.ts new file mode 100644 index 0000000000..132570f2bb --- /dev/null +++ b/packages/cli/src/tests/transforms/__fixtures__/pkg-module/a-named.ts @@ -0,0 +1,16 @@ +/* + * 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. + */ +export const value = 'a'; diff --git a/packages/cli/src/tests/transforms/__fixtures__/pkg-module/b-default.mts b/packages/cli/src/tests/transforms/__fixtures__/pkg-module/b-default.mts new file mode 100644 index 0000000000..57d07f2c30 --- /dev/null +++ b/packages/cli/src/tests/transforms/__fixtures__/pkg-module/b-default.mts @@ -0,0 +1,16 @@ +/* + * 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. + */ +export default 'b'; diff --git a/packages/cli/src/tests/transforms/__fixtures__/pkg-module/b-named.mts b/packages/cli/src/tests/transforms/__fixtures__/pkg-module/b-named.mts new file mode 100644 index 0000000000..be9bb39348 --- /dev/null +++ b/packages/cli/src/tests/transforms/__fixtures__/pkg-module/b-named.mts @@ -0,0 +1,16 @@ +/* + * 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. + */ +export const value = 'b'; diff --git a/packages/cli/src/tests/transforms/__fixtures__/pkg-module/c-default.cts b/packages/cli/src/tests/transforms/__fixtures__/pkg-module/c-default.cts new file mode 100644 index 0000000000..48f5b4f136 --- /dev/null +++ b/packages/cli/src/tests/transforms/__fixtures__/pkg-module/c-default.cts @@ -0,0 +1,16 @@ +/* + * 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. + */ +export default 'c'; diff --git a/packages/cli/src/tests/transforms/__fixtures__/pkg-module/c-named.cts b/packages/cli/src/tests/transforms/__fixtures__/pkg-module/c-named.cts new file mode 100644 index 0000000000..c3e5b58572 --- /dev/null +++ b/packages/cli/src/tests/transforms/__fixtures__/pkg-module/c-named.cts @@ -0,0 +1,16 @@ +/* + * 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. + */ +export const value = 'c'; diff --git a/packages/cli/src/tests/transforms/__fixtures__/pkg-module/main-explicit.mts b/packages/cli/src/tests/transforms/__fixtures__/pkg-module/main-explicit.mts new file mode 100644 index 0000000000..7f45ea506c --- /dev/null +++ b/packages/cli/src/tests/transforms/__fixtures__/pkg-module/main-explicit.mts @@ -0,0 +1,73 @@ +/* + * 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. + */ + +// @ts-nocheck + +import * as depCommonJs from 'dep-commonjs'; +import * as depModule from 'dep-module'; +import * as depDefault from 'dep-default'; +import { value as namedA } from './a-named-explicit'; +import { value as namedB } from './b-named'; +import cNamed from './c-named'; +import defaultA from './a-default-explicit'; +import defaultB from './b-default'; +import cDefault from './c-default'; + +const { default: defaultC } = cDefault; +const { value: namedC } = cNamed; + +async function resolveAll(obj): Promise { + const val = await obj; + if (typeof val !== 'object' || val === null) { + return val; + } + if (Array.isArray(val)) { + return await Promise.all(val.map(resolveAll)); + } + return Object.fromEntries( + await Promise.all( + Object.entries(obj).map(async ([key, value]) => [ + key, + await resolveAll(await value), + ]), + ), + ); +} + +export const values = resolveAll({ + depCommonJs, + depModule, + depDefault, + dynCommonJs: import('dep-commonjs'), + dynModule: import('dep-module'), + dynDefault: import('dep-default'), + dep: { + namedA, + namedB, + namedC, + defaultA, + defaultB, + defaultC, + }, + dyn: { + namedA: import('./a-named-explicit').then(m => m.value), + namedB: import('./b-named').then(m => m.value), + namedC: import('./c-named').then(m => m.default.value), + defaultA: import('./a-default-explicit').then(m => m.default), + defaultB: import('./b-default').then(m => m.default), + defaultC: import('./c-default').then(m => m.default.default), + }, +}); diff --git a/packages/cli/src/tests/transforms/__fixtures__/pkg-module/main.ts b/packages/cli/src/tests/transforms/__fixtures__/pkg-module/main.ts new file mode 100644 index 0000000000..a4133495c7 --- /dev/null +++ b/packages/cli/src/tests/transforms/__fixtures__/pkg-module/main.ts @@ -0,0 +1,72 @@ +/* + * 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 * as depCommonJs from 'dep-commonjs'; +import * as depModule from 'dep-module'; +import * as depDefault from 'dep-default'; +import { value as namedA } from './a-named'; +import { value as namedB } from './b-named.mts'; +import { value as namedC } from './c-named.cts'; +import defaultA from './a-default'; +import defaultB from './b-default.mts'; +import cDefault from './c-default.cts'; + +// @ts-expect-error Default exports from CommonJS are not well supported +const { default: defaultC } = cDefault; + +async function resolveAll(obj: object): Promise { + const val = await obj; + if (typeof val !== 'object' || val === null) { + return val; + } + if (Array.isArray(val)) { + return await Promise.all(val.map(resolveAll)); + } + return Object.fromEntries( + await Promise.all( + Object.entries(obj).map(async ([key, value]) => [ + key, + await resolveAll(await value), + ]), + ), + ); +} + +export const values = resolveAll({ + depCommonJs, + depModule, + depDefault, + dynCommonJs: import('dep-commonjs'), + dynModule: import('dep-module'), + dynDefault: import('dep-default'), + dep: { + namedA, + namedB, + namedC, + defaultA, + defaultB, + defaultC, + }, + dyn: { + namedA: import('./a-named').then(m => m.value), + namedB: import('./b-named.mts').then(m => m.value), + namedC: import('./c-named.cts').then(m => m.value), + defaultA: import('./a-default').then(m => m.default), + defaultB: import('./b-default.mts').then(m => m.default), + // @ts-expect-error Default exports from CommonJS are not well supported + defaultC: import('./c-default.cts').then(m => m.default.default), + }, +}); diff --git a/packages/cli/src/tests/transforms/__fixtures__/pkg-module/package.json b/packages/cli/src/tests/transforms/__fixtures__/pkg-module/package.json new file mode 100644 index 0000000000..f7b7e1ab30 --- /dev/null +++ b/packages/cli/src/tests/transforms/__fixtures__/pkg-module/package.json @@ -0,0 +1,8 @@ +{ + "name": "pkg-module", + "type": "module", + "exports": { + ".": "./main.ts", + "./print": "./print.ts" + } +} diff --git a/packages/cli/src/tests/transforms/__fixtures__/pkg-module/print.ts b/packages/cli/src/tests/transforms/__fixtures__/pkg-module/print.ts new file mode 100644 index 0000000000..7c24f99f37 --- /dev/null +++ b/packages/cli/src/tests/transforms/__fixtures__/pkg-module/print.ts @@ -0,0 +1,19 @@ +/* + * 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 { values } from './main'; + +values.then(obj => console.log(JSON.stringify(obj, null, 2))); diff --git a/packages/cli/src/tests/transforms/transforms.test.ts b/packages/cli/src/tests/transforms/transforms.test.ts new file mode 100644 index 0000000000..52af9a47d3 --- /dev/null +++ b/packages/cli/src/tests/transforms/transforms.test.ts @@ -0,0 +1,259 @@ +/* + * 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 { execFileSync } from 'child_process'; +import { resolve as resolvePath } from 'path'; +import { Output, buildPackage } from '../../lib/builder'; + +const exportValues = { + all: { + namedA: 'a', + namedB: 'b', + namedC: 'c', + defaultA: 'a', + defaultB: 'b', + defaultC: 'c', + }, + commonJs: { + namedA: 'a', + namedC: 'c', + defaultA: 'a', + defaultC: 'c', + }, +}; + +const expectedExports = { + commonJs: { + ...exportValues.commonJs, + dyn: exportValues.all, + default: { + ...exportValues.commonJs, + dyn: exportValues.all, + }, + }, + module: { + ...exportValues.all, + dyn: exportValues.all, + }, +}; + +function loadFixture(fixture: string) { + const output = execFileSync( + 'node', + [ + '--import', + '@backstage/cli/config/nodeTransform.cjs', + resolvePath(__dirname, `__fixtures__/${fixture}`), + ], + { encoding: 'utf8' }, + ); + return JSON.parse(output); +} + +describe('node runtime module transforms', () => { + it('should load from commonjs format', async () => { + expect(loadFixture('pkg-commonjs/print.ts')).toEqual({ + depCommonJs: expectedExports.commonJs, + depDefault: expectedExports.commonJs, + dynCommonJs: expectedExports.commonJs, + dynDefault: expectedExports.commonJs, + dynModule: expectedExports.module, + dep: exportValues.commonJs, + dyn: exportValues.all, + }); + }); + + it('should load from default format', async () => { + expect(loadFixture('pkg-default/print.ts')).toEqual({ + depCommonJs: expectedExports.commonJs, + depDefault: expectedExports.commonJs, + dynCommonJs: expectedExports.commonJs, + dynDefault: expectedExports.commonJs, + dynModule: expectedExports.module, + dep: exportValues.commonJs, + dyn: exportValues.all, + }); + }); + + it('should load from module format', async () => { + expect(loadFixture('pkg-module/print.ts')).toEqual({ + depCommonJs: expectedExports.commonJs, + depDefault: expectedExports.commonJs, + depModule: expectedExports.module, + dynCommonJs: expectedExports.commonJs, + dynDefault: expectedExports.commonJs, + dynModule: expectedExports.module, + dep: exportValues.all, + dyn: exportValues.all, + }); + }); +}); + +describe('Jest runtime module transforms', () => { + it('should load from commonjs format', async () => { + const values = await import('./__fixtures__/pkg-commonjs/main').then( + m => m.values, + ); + expect(values).toEqual({ + depCommonJs: expectedExports.commonJs, + depDefault: expectedExports.commonJs, + dynCommonJs: expectedExports.commonJs, + dynDefault: expectedExports.commonJs, + dynModule: expectedExports.module, + dep: exportValues.commonJs, + dyn: exportValues.all, + }); + }); + + it('should load from default format', async () => { + const values = await import('./__fixtures__/pkg-default/main').then( + m => m.values, + ); + expect(values).toEqual({ + depCommonJs: expectedExports.commonJs, + depDefault: expectedExports.commonJs, + dynCommonJs: expectedExports.commonJs, + dynDefault: expectedExports.commonJs, + dynModule: expectedExports.module, + dep: exportValues.commonJs, + dyn: exportValues.all, + }); + }); + + it('should load from module format', async () => { + // This uses a separate entry point with an explicit .mts extension. This is + // because we can't cleanly switch the Jest behavior based on type=module in + // package.json for .ts files in Jest. If a module type is detected we + // instead need to switch the transforms for the entire Jest project, which + // we can't do for this test. We instead use the explicit .mts extension to + // verify the transform behavior. + + // @ts-expect-error Cannot find module './__fixtures__/pkg-module/main-explicit' or its corresponding type declarations. + const values = await import('./__fixtures__/pkg-module/main-explicit').then( + m => m.values, + ); + expect(values).toEqual({ + depCommonJs: expectedExports.commonJs, + depDefault: expectedExports.commonJs, + depModule: expectedExports.module, + dynCommonJs: expectedExports.commonJs, + dynDefault: expectedExports.commonJs, + dynModule: expectedExports.module, + dep: exportValues.all, + dyn: exportValues.all, + }); + }); +}); + +describe('package build transforms', () => { + it('should build and load from commonjs format', async () => { + const pkgPath = resolvePath(__dirname, '__fixtures__/pkg-commonjs'); + + await buildPackage({ + targetDir: pkgPath, + outputs: new Set([Output.cjs]), + workspacePackages: [], + }); + const values = await import(resolvePath(pkgPath, 'dist/index.cjs.js')).then( + m => m.values, + ); + expect(values).toEqual({ + depCommonJs: expectedExports.commonJs, + depDefault: expectedExports.commonJs, + dynCommonJs: expectedExports.commonJs, + dynDefault: expectedExports.commonJs, + dynModule: expectedExports.module, + dep: exportValues.commonJs, + dyn: exportValues.all, + }); + + expect(loadFixture('pkg-commonjs/dist/print.cjs.js')).toEqual({ + depCommonJs: expectedExports.commonJs, + depDefault: expectedExports.commonJs, + dynCommonJs: expectedExports.commonJs, + dynDefault: expectedExports.commonJs, + dynModule: expectedExports.module, + dep: exportValues.commonJs, + dyn: exportValues.all, + }); + }); + + it('should build and load from default format', async () => { + const pkgPath = resolvePath(__dirname, '__fixtures__/pkg-default'); + + await buildPackage({ + targetDir: pkgPath, + outputs: new Set([Output.cjs]), + workspacePackages: [], + }); + const values = await import(resolvePath(pkgPath, 'dist/index.cjs.js')).then( + m => m.values, + ); + expect(values).toEqual({ + depCommonJs: expectedExports.commonJs, + depDefault: expectedExports.commonJs, + dynCommonJs: expectedExports.commonJs, + dynDefault: expectedExports.commonJs, + dynModule: expectedExports.module, + dep: exportValues.commonJs, + dyn: exportValues.all, + }); + + expect(loadFixture('pkg-default/dist/print.cjs.js')).toEqual({ + depCommonJs: expectedExports.commonJs, + depDefault: expectedExports.commonJs, + dynCommonJs: expectedExports.commonJs, + dynDefault: expectedExports.commonJs, + dynModule: expectedExports.module, + dep: exportValues.commonJs, + dyn: exportValues.all, + }); + }); + + it('should build and load from module format', async () => { + const pkgPath = resolvePath(__dirname, '__fixtures__/pkg-module'); + + await buildPackage({ + targetDir: pkgPath, + outputs: new Set([Output.cjs]), + workspacePackages: [], + }); + const values = await import(resolvePath(pkgPath, 'dist/index.mjs')).then( + m => m.values, + ); + expect(values).toEqual({ + depCommonJs: expectedExports.commonJs, + depDefault: expectedExports.commonJs, + depModule: expectedExports.module, + dynCommonJs: expectedExports.commonJs, + dynDefault: expectedExports.commonJs, + dynModule: expectedExports.module, + dep: exportValues.all, + dyn: exportValues.all, + }); + + expect(loadFixture('pkg-module/dist/print.mjs')).toEqual({ + depCommonJs: expectedExports.commonJs, + depDefault: expectedExports.commonJs, + depModule: expectedExports.module, + dynCommonJs: expectedExports.commonJs, + dynDefault: expectedExports.commonJs, + dynModule: expectedExports.module, + dep: exportValues.all, + dyn: exportValues.all, + }); + }); +}); diff --git a/packages/cli/src/wiring/CliInitializer.ts b/packages/cli/src/wiring/CliInitializer.ts index 9fe8bb8084..5acb88151f 100644 --- a/packages/cli/src/wiring/CliInitializer.ts +++ b/packages/cli/src/wiring/CliInitializer.ts @@ -22,16 +22,23 @@ import { version } from '../lib/version'; import chalk from 'chalk'; import { exitWithError } from '../lib/errors'; import { assertError } from '@backstage/errors'; +import { isPromise } from 'util/types'; -type UninitializedFeature = CliFeature | Promise; +type UninitializedFeature = CliFeature | Promise<{ default: CliFeature }>; export class CliInitializer { private graph = new CommandGraph(); private commandRegistry = new CommandRegistry(this.graph); #uninitiazedFeatures: Promise[] = []; - add(module: UninitializedFeature) { - this.#uninitiazedFeatures.push(Promise.resolve(module)); + add(feature: UninitializedFeature) { + if (isPromise(feature)) { + this.#uninitiazedFeatures.push( + feature.then(f => unwrapFeature(f.default)), + ); + } else { + this.#uninitiazedFeatures.push(Promise.resolve(feature)); + } } async #register(feature: CliFeature) { @@ -136,3 +143,22 @@ function isCliPlugin(feature: CliFeature): feature is InternalCliPlugin { // Backwards compatibility for v1 registrations that use duck typing return 'plugin' in internal; } + +/** @internal */ +export function unwrapFeature( + feature: CliFeature | { default: CliFeature }, +): CliFeature { + if ('$$type' in feature) { + return feature; + } + + // This is a workaround where default exports get transpiled to `exports['default'] = ...` + // in CommonJS modules, which in turn results in a double `{ default: { default: ... } }` nesting + // when importing using a dynamic import. + // TODO: This is a broader issue than just this piece of code, and should move away from CommonJS. + if ('default' in feature) { + return feature.default; + } + + return feature; +} diff --git a/packages/config-loader/src/schema/collect.ts b/packages/config-loader/src/schema/collect.ts index c7af64e0f3..16bd654946 100644 --- a/packages/config-loader/src/schema/collect.ts +++ b/packages/config-loader/src/schema/collect.ts @@ -183,9 +183,8 @@ async function compileTsSchemas( // Lazy loaded, because this brings up all of TypeScript and we don't // want that eagerly loaded in tests - const { getProgramFromFiles, buildGenerator } = await import( - 'typescript-json-schema' - ); + const { getProgramFromFiles, buildGenerator } = + require('typescript-json-schema') as typeof import('typescript-json-schema'); const program = getProgramFromFiles( entries.map(({ path }) => path), diff --git a/packages/repo-tools/src/commands/index.ts b/packages/repo-tools/src/commands/index.ts index 4e984c72de..65ab43d376 100644 --- a/packages/repo-tools/src/commands/index.ts +++ b/packages/repo-tools/src/commands/index.ts @@ -39,9 +39,7 @@ function registerPackageCommand(program: Command) { 'Initialize any required files to use the OpenAPI tooling for this package.', ) .action( - lazy(() => - import('./package/schema/openapi/init').then(m => m.singleCommand), - ), + lazy(() => import('./package/schema/openapi/init'), 'singleCommand'), ); openApiCommand @@ -60,11 +58,7 @@ function registerPackageCommand(program: Command) { ) .option('--watch') .description('Watch the OpenAPI spec for changes and regenerate on save.') - .action( - lazy(() => - import('./package/schema/openapi/generate').then(m => m.command), - ), - ); + .action(lazy(() => import('./package/schema/openapi/generate'), 'command')); openApiCommand .command('fuzz') @@ -81,18 +75,14 @@ function registerPackageCommand(program: Command) { '--exclude-checks ', 'Exclude checks from schemathesis run', ) - .action( - lazy(() => import('./package/schema/openapi/fuzz').then(m => m.command)), - ); + .action(lazy(() => import('./package/schema/openapi/fuzz'), 'command')); openApiCommand .command('diff') .option('--ignore', 'Ignore linting failures and only log the results.') .option('--json', 'Output the results as JSON') .option('--since ', 'Diff the API against a specific ref') - .action( - lazy(() => import('./package/schema/openapi/diff').then(m => m.command)), - ); + .action(lazy(() => import('./package/schema/openapi/diff'), 'command')); } function registerRepoCommand(program: Command) { @@ -113,11 +103,7 @@ function registerRepoCommand(program: Command) { .description( 'Verify that all OpenAPI schemas are valid and set up correctly.', ) - .action( - lazy(() => - import('./repo/schema/openapi/verify').then(m => m.bulkCommand), - ), - ); + .action(lazy(() => import('./repo/schema/openapi/verify'), 'bulkCommand')); openApiCommand .command('lint [paths...]') @@ -126,17 +112,13 @@ function registerRepoCommand(program: Command) { '--strict', 'Fail on any linting severity messages, not just errors.', ) - .action( - lazy(() => import('./repo/schema/openapi/lint').then(m => m.bulkCommand)), - ); + .action(lazy(() => import('./repo/schema/openapi/lint'), 'bulkCommand')); openApiCommand .command('test [paths...]') .description('Test OpenAPI schemas against written tests') .option('--update', 'Update the spec on failure.') - .action( - lazy(() => import('./repo/schema/openapi/test').then(m => m.bulkCommand)), - ); + .action(lazy(() => import('./repo/schema/openapi/test'), 'bulkCommand')); openApiCommand .command('fuzz') @@ -145,9 +127,7 @@ function registerRepoCommand(program: Command) { '--since ', 'Only fuzz packages that have changed since the given ref', ) - .action( - lazy(() => import('./repo/schema/openapi/fuzz').then(m => m.command)), - ); + .action(lazy(() => import('./repo/schema/openapi/fuzz'), 'command')); openApiCommand .command('diff') @@ -159,9 +139,7 @@ function registerRepoCommand(program: Command) { 'Diff the API against a specific ref', 'origin/master', ) - .action( - lazy(() => import('./repo/schema/openapi/diff').then(m => m.command)), - ); + .action(lazy(() => import('./repo/schema/openapi/diff'), 'command')); } function registerLintCommand(program: Command) { @@ -174,10 +152,10 @@ function registerLintCommand(program: Command) { 'Lint backend plugin packages for legacy exports and make sure it conforms to the new export pattern', ) .action( - lazy(() => - import( - './lint-legacy-backend-exports/lint-legacy-backend-exports' - ).then(m => m.lint), + lazy( + () => + import('./lint-legacy-backend-exports/lint-legacy-backend-exports'), + 'lint', ), ); } @@ -216,16 +194,12 @@ export function registerCommands(program: Command) { 'Turn on release tag validation for the public, beta, and alpha APIs', ) .description('Generate an API report for selected packages') - .action( - lazy(() => - import('./api-reports/api-reports').then(m => m.buildApiReports), - ), - ); + .action(lazy(() => import('./api-reports/api-reports'), 'buildApiReports')); program .command('type-deps') .description('Find inconsistencies in types of all packages and plugins') - .action(lazy(() => import('./type-deps/type-deps').then(m => m.default))); + .action(lazy(() => import('./type-deps/type-deps'), 'default')); program .command('peer-deps') @@ -233,7 +207,7 @@ export function registerCommands(program: Command) { 'Ensure your packages are using the correct peer dependency format.', ) .option('--fix', 'Fix the issues found') - .action(lazy(() => import('./peer-deps/peer-deps').then(m => m.default))); + .action(lazy(() => import('./peer-deps/peer-deps'), 'default')); program .command('generate-catalog-info') @@ -247,10 +221,9 @@ export function registerCommands(program: Command) { ) .description('Create or fix info yaml files for all backstage packages') .action( - lazy(() => - import('./generate-catalog-info/generate-catalog-info').then( - m => m.default, - ), + lazy( + () => import('./generate-catalog-info/generate-catalog-info'), + 'default', ), ); @@ -279,20 +252,14 @@ export function registerCommands(program: Command) { .description( 'Generate a patch for the selected package in the target repository', ) - .action( - lazy(() => - import('./generate-patch/generate-patch').then(m => m.default), - ), - ); + .action(lazy(() => import('./generate-patch/generate-patch'), 'default')); program .command('knip-reports [paths...]') .option('--ci', 'CI run checks that there is no changes on knip reports') .description('Generate a knip report for selected packages') .action( - lazy(() => - import('./knip-reports/knip-reports').then(m => m.buildKnipReports), - ), + lazy(() => import('./knip-reports/knip-reports'), 'buildKnipReports'), ); registerPackageCommand(program); @@ -300,13 +267,25 @@ export function registerCommands(program: Command) { registerLintCommand(program); } +type ActionFunc = (...args: any[]) => Promise; +type ActionExports = { + [KName in keyof TModule as TModule[KName] extends ActionFunc + ? KName + : never]: TModule[KName]; +}; + // Wraps an action function so that it always exits and handles errors -function lazy( - getActionFunc: () => Promise<(...args: any[]) => Promise>, +export function lazy( + moduleLoader: () => Promise, + exportName: keyof ActionExports, ): (...args: any[]) => Promise { return async (...args: any[]) => { try { - const actionFunc = await getActionFunc(); + const mod = await moduleLoader(); + const actualModule = ( + mod as unknown as { default: ActionExports } + ).default; + const actionFunc = actualModule[exportName] as ActionFunc; await actionFunc(...args); process.exit(0); diff --git a/packages/repo-tools/src/commands/repo/schema/openapi/verify.ts b/packages/repo-tools/src/commands/repo/schema/openapi/verify.ts index 61aadc5d0c..9eab1c77f5 100644 --- a/packages/repo-tools/src/commands/repo/schema/openapi/verify.ts +++ b/packages/repo-tools/src/commands/repo/schema/openapi/verify.ts @@ -54,7 +54,7 @@ async function verify(directoryPath: string) { schemaPath = join(directoryPath, OLD_SCHEMA_PATH); } - const schema = await import(resolvePath(schemaPath)); + const { default: schema } = await import(resolvePath(schemaPath)); if (!schema.spec) { throw new Error(`\`${TS_SCHEMA_PATH}\` needs to have a 'spec' export.`); diff --git a/plugins/catalog-backend/src/database/DefaultProcessingDatabase.ts b/plugins/catalog-backend/src/database/DefaultProcessingDatabase.ts index ee836ff038..bb5c38de18 100644 --- a/plugins/catalog-backend/src/database/DefaultProcessingDatabase.ts +++ b/plugins/catalog-backend/src/database/DefaultProcessingDatabase.ts @@ -383,9 +383,12 @@ export class DefaultProcessingDatabase implements ProcessingDatabase { } } - // Replace all references for the originating entity or source and then create new ones + // Lastly, replace refresh state references for the originating entity and any successfully added entities await tx('refresh_state_references') - .andWhere({ source_entity_ref: options.sourceEntityRef }) + // Remove all existing references from the originating entity + .where({ source_entity_ref: options.sourceEntityRef }) + // And remove any existing references to entities that we're inserting new references for + .orWhereIn('target_entity_ref', stateReferences) .delete(); await tx.batchInsert( 'refresh_state_references', diff --git a/plugins/catalog-backend/src/database/DefaultProviderDatabase.ts b/plugins/catalog-backend/src/database/DefaultProviderDatabase.ts index 03f72e06b7..60dd43bb59 100644 --- a/plugins/catalog-backend/src/database/DefaultProviderDatabase.ts +++ b/plugins/catalog-backend/src/database/DefaultProviderDatabase.ts @@ -162,13 +162,11 @@ export class DefaultProviderDatabase implements ProviderDatabase { logger: this.options.logger, }); } - - await tx('refresh_state_references') - .where('target_entity_ref', entityRef) - .andWhere({ source_key: options.sourceKey }) - .delete(); - if (ok) { + await tx('refresh_state_references') + .where('target_entity_ref', entityRef) + .delete(); + await tx( 'refresh_state_references', ).insert({ @@ -176,6 +174,11 @@ export class DefaultProviderDatabase implements ProviderDatabase { target_entity_ref: entityRef, }); } else { + await tx('refresh_state_references') + .where('target_entity_ref', entityRef) + .andWhere({ source_key: options.sourceKey }) + .delete(); + const conflictingKey = await checkLocationKeyConflict({ tx, entityRef, diff --git a/plugins/catalog-backend/src/tests/integration.test.ts b/plugins/catalog-backend/src/tests/integration.test.ts index e85ebe48ce..0c8e475b39 100644 --- a/plugins/catalog-backend/src/tests/integration.test.ts +++ b/plugins/catalog-backend/src/tests/integration.test.ts @@ -32,6 +32,7 @@ import { import { PermissionEvaluator } from '@backstage/plugin-permission-common'; import { createHash } from 'crypto'; import { Knex } from 'knex'; +import merge from 'lodash/merge'; import { EntitiesCatalog } from '../catalog/types'; import { DefaultCatalogDatabase } from '../database/DefaultCatalogDatabase'; import { DefaultProcessingDatabase } from '../database/DefaultProcessingDatabase'; @@ -55,6 +56,7 @@ import { mockServices } from '@backstage/backend-test-utils'; import { LoggerService } from '@backstage/backend-plugin-api'; import { DatabaseManager } from '@backstage/backend-common'; import { entitiesResponseToObjects } from '../service/response'; +import { deleteOrphanedEntities } from '../database/operations/util/deleteOrphanedEntities'; const voidLogger = mockServices.logger.mock(); @@ -196,12 +198,14 @@ class TestHarness { readonly #refresh: RefreshService; readonly #provider: TestProvider; readonly #proxyProgressTracker: ProxyProgressTracker; + readonly #db: Knex; static async create(options?: { disableRelationsCompatibility?: boolean; logger?: LoggerService; db?: Knex; permissions?: PermissionEvaluator; + additionalProviders?: EntityProvider[]; processEntity?( entity: Entity, location: LocationSpec, @@ -301,8 +305,13 @@ class TestHarness { const refresh = new DefaultRefreshService({ database: catalogDatabase }); const provider = new TestProvider(); + const providers: EntityProvider[] = [provider]; - await connectEntityProviders(providerDatabase, [provider]); + if (options?.additionalProviders) { + providers.push(...options.additionalProviders); + } + + await connectEntityProviders(providerDatabase, providers); return new TestHarness( catalog, @@ -319,6 +328,7 @@ class TestHarness { refresh, provider, proxyProgressTracker, + db, ); } @@ -328,12 +338,14 @@ class TestHarness { refresh: RefreshService, provider: TestProvider, proxyProgressTracker: ProxyProgressTracker, + db: Knex, ) { this.#catalog = catalog; this.#engine = engine; this.#refresh = refresh; this.#provider = provider; this.#proxyProgressTracker = proxyProgressTracker; + this.#db = db; } async process(entityRefs?: Set) { @@ -353,7 +365,7 @@ class TestHarness { } async setInputEntities(entities: (Entity & { locationKey?: string })[]) { - return this.#provider.getConnection().applyMutation({ + await this.#provider.getConnection().applyMutation({ type: 'full', entities: entities.map(({ locationKey, ...entity }) => ({ entity, @@ -375,6 +387,55 @@ class TestHarness { async refresh(options: RefreshOptions) { return this.#refresh.refresh(options); } + + async removeOrphanedEntities() { + await deleteOrphanedEntities({ + knex: this.#db, + strategy: { mode: 'immediate' }, + }); + } + + async getRefreshState(): Promise< + Record< + string, + { + id: string; + unprocessedEntity: Entity; + processedEntity: Entity; + locationKey: string | null; + } + > + > { + const result = await this.#db('refresh_state').select('*'); + return Object.fromEntries( + result.map(r => [ + r.entity_ref, + { + id: r.entity_id, + unprocessedEntity: JSON.parse(r.unprocessed_entity), + processedEntity: r.processed_entity + ? JSON.parse(r.processed_entity) + : undefined, + locationKey: r.location_key, + }, + ]), + ); + } + + async getRefreshStateReferences(): Promise< + Array<{ + sourceKey: string | null; + sourceEntityRef: string | null; + targetEntityRef: string; + }> + > { + const result = await this.#db('refresh_state_references').select('*'); + return result.map(r => ({ + sourceKey: r.source_key ?? undefined, + sourceEntityRef: r.source_entity_ref ?? undefined, + targetEntityRef: r.target_entity_ref, + })); + } } describe('Catalog Backend Integration', () => { @@ -838,4 +899,269 @@ describe('Catalog Backend Integration', () => { }, }); }); + + it('should replace any refresh_state_references that are dangling after claiming an entityRef with locationKey', async () => { + const firstProvider = new TestProvider(); + firstProvider.getProviderName = () => 'first'; + + const secondProvider = new TestProvider(); + secondProvider.getProviderName = () => 'second'; + + const harness = await TestHarness.create({ + additionalProviders: [firstProvider, secondProvider], + }); + + await firstProvider.getConnection().applyMutation({ + type: 'full', + entities: [ + { + entity: { + apiVersion: 'backstage.io/v1alpha1', + kind: 'Component', + metadata: { + name: 'component-1', + annotations: { + 'backstage.io/managed-by-location': 'url:.', + 'backstage.io/managed-by-origin-location': 'url:.', + }, + }, + spec: { + type: 'service', + owner: 'no-location-key', + }, + }, + }, + ], + }); + + await expect(harness.process()).resolves.toEqual({}); + + await expect(harness.getOutputEntities()).resolves.toEqual({ + 'component:default/component-1': expect.objectContaining({ + spec: { + type: 'service', + owner: 'no-location-key', + }, + }), + }); + + await secondProvider.getConnection().applyMutation({ + type: 'full', + entities: [ + { + locationKey: 'takeover', + entity: { + apiVersion: 'backstage.io/v1alpha1', + kind: 'Component', + metadata: { + name: 'component-1', + annotations: { + 'backstage.io/managed-by-location': 'url:.', + 'backstage.io/managed-by-origin-location': 'url:.', + }, + }, + spec: { + type: 'service', + owner: 'location-key', + }, + }, + }, + ], + }); + + await expect(harness.process()).resolves.toEqual({}); + + await expect(harness.getOutputEntities()).resolves.toEqual({ + 'component:default/component-1': expect.objectContaining({ + spec: { + type: 'service', + owner: 'location-key', + }, + }), + }); + + await expect(harness.getRefreshStateReferences()).resolves.toEqual([ + { + sourceKey: 'second', + targetEntityRef: 'component:default/component-1', + }, + ]); + + await secondProvider.getConnection().applyMutation({ + type: 'full', + entities: [ + { + locationKey: 'takeover', + entity: { + apiVersion: 'backstage.io/v1alpha1', + kind: 'Component', + metadata: { + name: 'component-2', + annotations: { + 'backstage.io/managed-by-location': 'url:.', + 'backstage.io/managed-by-origin-location': 'url:.', + }, + }, + spec: { + type: 'service', + owner: 'location-key', + }, + }, + }, + ], + }); + + await expect(harness.process()).resolves.toEqual({}); + + await expect(harness.getRefreshStateReferences()).resolves.toEqual([ + { + sourceKey: 'second', + targetEntityRef: 'component:default/component-2', + }, + ]); + + await expect(harness.getOutputEntities()).resolves.toEqual({ + 'component:default/component-2': expect.objectContaining({ + spec: { + type: 'service', + owner: 'location-key', + }, + }), + }); + }); + + function withOutputFields(entity: Entity) { + return { + ...entity, + metadata: { + ...entity.metadata, + etag: expect.any(String), + uid: expect.any(String), + }, + relations: [], + }; + } + + it('should fully replace existing entities when emitting override entities during processing', async () => { + const baseEntity = { + apiVersion: 'backstage.io/v1alpha1', + kind: 'Component', + metadata: { + annotations: { + 'backstage.io/managed-by-location': 'url:.', + 'backstage.io/managed-by-origin-location': 'url:.', + }, + }, + }; + const entityA = merge({ metadata: { name: 'a' } }, baseEntity); + const entityB = merge({ metadata: { name: 'b' } }, baseEntity); + const entityBOverride = merge({ metadata: { override: true } }, entityB); + + const processEntity = jest.fn( + async ( + entity: Entity, + _location: LocationSpec, + _emit: CatalogProcessorEmit, + ) => entity, + ); + const harness = await TestHarness.create({ processEntity }); + + processEntity.mockImplementation(async (entity, location, emit) => { + if (entity.metadata.name === entityA.metadata.name) { + emit(processingResult.entity(location, entityBOverride)); + } + return entity; + }); + + // A and B are added to the catalog, but the processor emits B' from A that overrides B + await harness.setInputEntities([entityA, entityB]); + await expect(harness.process()).resolves.toEqual({}); + + // Expect to find A and B' in the catalog + await expect(harness.getRefreshStateReferences()).resolves.toEqual([ + { + sourceKey: 'test', + targetEntityRef: 'component:default/a', + }, + { + sourceEntityRef: 'component:default/a', + targetEntityRef: 'component:default/b', + }, + ]); + await expect(harness.getRefreshState()).resolves.toEqual({ + 'component:default/a': expect.objectContaining({ + locationKey: null, + unprocessedEntity: entityA, + }), + 'component:default/b': expect.objectContaining({ + locationKey: 'url:.', + unprocessedEntity: entityBOverride, + }), + }); + await expect(harness.getOutputEntities()).resolves.toEqual({ + 'component:default/a': withOutputFields(entityA), + 'component:default/b': withOutputFields(entityBOverride), + }); + + // Stop emitting B' from A, then do a full sync with A and B + processEntity.mockImplementation(async entity => entity); + await harness.setInputEntities([entityA, entityB]); + + // At this point we should still have A and B' in the catalog + await expect(harness.getRefreshStateReferences()).resolves.toEqual([ + { + sourceKey: 'test', + targetEntityRef: 'component:default/a', + }, + { + sourceEntityRef: 'component:default/a', + targetEntityRef: 'component:default/b', + }, + ]); + await expect(harness.getRefreshState()).resolves.toEqual({ + 'component:default/a': expect.objectContaining({ + locationKey: null, + unprocessedEntity: entityA, + }), + 'component:default/b': expect.objectContaining({ + locationKey: 'url:.', + unprocessedEntity: entityBOverride, + }), + }); + await expect(harness.getOutputEntities()).resolves.toEqual({ + 'component:default/a': withOutputFields(entityA), + 'component:default/b': withOutputFields(entityBOverride), + }); + + // Once we process, B' should be orphaned + await expect(harness.process()).resolves.toEqual({}); + // This is expected to remove B' + await harness.removeOrphanedEntities(); + + // At this point only A is left in the catalog + await expect(harness.getRefreshStateReferences()).resolves.toEqual([ + { + sourceKey: 'test', + targetEntityRef: 'component:default/a', + }, + ]); + await expect(harness.getRefreshState()).resolves.toEqual({ + 'component:default/a': expect.objectContaining({ + locationKey: null, + unprocessedEntity: entityA, + }), + }); + await expect(harness.getOutputEntities()).resolves.toEqual({ + 'component:default/a': withOutputFields(entityA), + }); + + // Next time the provider runs and does a full sync we should now be able to add back B + await harness.setInputEntities([entityA, entityB]); + await expect(harness.process()).resolves.toEqual({}); + + await expect(harness.getOutputEntities()).resolves.toEqual({ + 'component:default/a': withOutputFields(entityA), + 'component:default/b': withOutputFields(entityB), + }); + }); }); diff --git a/plugins/notifications-backend/src/database/DatabaseNotificationsStore.test.ts b/plugins/notifications-backend/src/database/DatabaseNotificationsStore.test.ts index e0536c50ac..d4edcd1e89 100644 --- a/plugins/notifications-backend/src/database/DatabaseNotificationsStore.test.ts +++ b/plugins/notifications-backend/src/database/DatabaseNotificationsStore.test.ts @@ -742,5 +742,53 @@ describe.each(databases.eachSupportedId())( expect(settings).toEqual(notificationSettings); }); }); + + describe('topics', () => { + it('should return all topics for user', async () => { + await storage.saveNotification(testNotification1); + await storage.saveNotification(testNotification2); + await storage.saveBroadcast(testNotification3); + await storage.saveNotification(otherUserNotification); + + const topics = await storage.getTopics({ user }); + expect(topics.topics.sort()).toEqual([ + testNotification1.payload.topic, + testNotification3.payload.topic, + testNotification2.payload.topic, + ]); + }); + + it('should return filtered topics for user by title', async () => { + await storage.saveNotification(testNotification1); + await storage.saveNotification(testNotification2); + await storage.saveBroadcast(testNotification3); + await storage.saveBroadcast(testNotification4); + await storage.saveNotification(otherUserNotification); + + const topics = await storage.getTopics({ + user, + search: 'Notification 3', + }); + expect(topics).toEqual({ + topics: [testNotification3.payload.topic], + }); + }); + + it('should return filtered topics for user by severity', async () => { + await storage.saveNotification(testNotification1); + await storage.saveNotification(testNotification2); + await storage.saveBroadcast(testNotification3); + await storage.saveBroadcast(testNotification4); + await storage.saveNotification(otherUserNotification); + + const topics = await storage.getTopics({ + user, + minimumSeverity: 'critical', + }); + expect(topics).toEqual({ + topics: [testNotification1.payload.topic], + }); + }); + }); }, ); diff --git a/plugins/notifications-backend/src/database/DatabaseNotificationsStore.ts b/plugins/notifications-backend/src/database/DatabaseNotificationsStore.ts index 3a00d1c9b5..cf19874ff2 100644 --- a/plugins/notifications-backend/src/database/DatabaseNotificationsStore.ts +++ b/plugins/notifications-backend/src/database/DatabaseNotificationsStore.ts @@ -21,6 +21,7 @@ import { NotificationGetOptions, NotificationModifyOptions, NotificationsStore, + TopicGetOptions, } from './NotificationsStore'; import { Notification, @@ -563,4 +564,13 @@ export class DatabaseNotificationsStore implements NotificationsStore { .delete(); await this.db('user_settings').insert(rows); } + + async getTopics(options: TopicGetOptions): Promise<{ topics: string[] }> { + const notificationQuery = this.getNotificationsBaseQuery({ + ...options, + orderField: [{ field: 'topic', order: 'asc' }], + }); + const topics = await notificationQuery.distinct(['topic']); + return { topics: topics.map(row => row.topic) }; + } } diff --git a/plugins/notifications-backend/src/database/NotificationsStore.ts b/plugins/notifications-backend/src/database/NotificationsStore.ts index 2560406e20..a1f4eb6999 100644 --- a/plugins/notifications-backend/src/database/NotificationsStore.ts +++ b/plugins/notifications-backend/src/database/NotificationsStore.ts @@ -48,6 +48,16 @@ export type NotificationModifyOptions = { ids: string[]; } & NotificationGetOptions; +/** @internal */ +export type TopicGetOptions = { + user: string; + search?: string; + read?: boolean; + saved?: boolean; + createdAfter?: Date; + minimumSeverity?: NotificationSeverity; +}; + /** @internal */ export interface NotificationsStore { getNotifications(options: NotificationGetOptions): Promise; @@ -97,4 +107,6 @@ export interface NotificationsStore { user: string; settings: NotificationSettings; }): Promise; + + getTopics(options: TopicGetOptions): Promise<{ topics: string[] }>; } diff --git a/plugins/notifications-backend/src/service/router.ts b/plugins/notifications-backend/src/service/router.ts index 8a12a53be5..06a0a5ebb0 100644 --- a/plugins/notifications-backend/src/service/router.ts +++ b/plugins/notifications-backend/src/service/router.ts @@ -20,6 +20,7 @@ import { DatabaseNotificationsStore, normalizeSeverity, NotificationGetOptions, + TopicGetOptions, } from '../database'; import { v4 as uuid } from 'uuid'; import { CatalogApi } from '@backstage/catalog-client'; @@ -246,24 +247,10 @@ export async function createRouter( } }; - // TODO: Move to use OpenAPI router instead - const router = Router(); - router.use(express.json()); - - const listNotificationsHandler = async (req: Request, res: Response) => { - const user = await getUser(req); - const opts: NotificationGetOptions = { - user: user, - }; - if (req.query.offset) { - opts.offset = Number.parseInt(req.query.offset.toString(), 10); - } - if (req.query.limit) { - opts.limit = Number.parseInt(req.query.limit.toString(), 10); - } - if (req.query.orderField) { - opts.orderField = parseEntityOrderFieldParams(req.query); - } + const appendCommonOptions = ( + req: Request, + opts: NotificationGetOptions | TopicGetOptions, + ) => { if (req.query.search) { opts.search = req.query.search.toString(); } @@ -274,10 +261,6 @@ export async function createRouter( // or keep undefined } - if (req.query.topic) { - opts.topic = req.query.topic.toString(); - } - if (req.query.saved === 'true') { opts.saved = true; } else if (req.query.saved === 'false') { @@ -296,6 +279,32 @@ export async function createRouter( req.query.minimumSeverity.toString(), ); } + }; + + // TODO: Move to use OpenAPI router instead + const router = Router(); + router.use(express.json()); + + const listNotificationsHandler = async (req: Request, res: Response) => { + const user = await getUser(req); + const opts: NotificationGetOptions = { + user: user, + }; + if (req.query.offset) { + opts.offset = Number.parseInt(req.query.offset.toString(), 10); + } + if (req.query.limit) { + opts.limit = Number.parseInt(req.query.limit.toString(), 10); + } + if (req.query.orderField) { + opts.orderField = parseEntityOrderFieldParams(req.query); + } + + if (req.query.topic) { + opts.topic = req.query.topic.toString(); + } + + appendCommonOptions(req, opts); const [notifications, totalCount] = await Promise.all([ store.getNotifications(opts), @@ -357,6 +366,21 @@ export async function createRouter( res.json(notifications[0]); }; + // Get topics + const listTopicsHandler = async (req: Request, res: Response) => { + const user = await getUser(req); + const opts: TopicGetOptions = { + user: user, + }; + + appendCommonOptions(req, opts); + + const topics = await store.getTopics(opts); + res.json(topics); + }; + + router.get('/topics', listTopicsHandler); + // Make sure this is the last "GET" handler router.get('/:id', getNotificationHandler); // Deprecated endpoint router.get('/notifications/:id', getNotificationHandler); diff --git a/plugins/notifications/report.api.md b/plugins/notifications/report.api.md index 17c1e7e338..8b4553cf42 100644 --- a/plugins/notifications/report.api.md +++ b/plugins/notifications/report.api.md @@ -20,16 +20,21 @@ import { RouteRef } from '@backstage/core-plugin-api'; import { TableProps } from '@backstage/core-components'; // @public (undocumented) -export type GetNotificationsOptions = { - offset?: number; - limit?: number; +export type GetNotificationsCommonOptions = { search?: string; read?: boolean; saved?: boolean; createdAfter?: Date; + minimumSeverity?: NotificationSeverity; +}; + +// @public (undocumented) +export type GetNotificationsOptions = GetNotificationsCommonOptions & { + offset?: number; + limit?: number; sort?: 'created' | 'topic' | 'origin'; sortOrder?: 'asc' | 'desc'; - minimumSeverity?: NotificationSeverity; + topic?: string; }; // @public (undocumented) @@ -38,6 +43,14 @@ export type GetNotificationsResponse = { totalCount: number; }; +// @public (undocumented) +export type GetTopicsOptions = GetNotificationsCommonOptions; + +// @public (undocumented) +export type GetTopicsResponse = { + topics: string[]; +}; + // @public (undocumented) export interface NotificationsApi { // (undocumented) @@ -51,6 +64,8 @@ export interface NotificationsApi { // (undocumented) getStatus(): Promise; // (undocumented) + getTopics(options?: GetTopicsOptions): Promise; + // (undocumented) updateNotifications( options: UpdateNotificationsOptions, ): Promise; @@ -77,6 +92,8 @@ export class NotificationsClient implements NotificationsApi { // (undocumented) getStatus(): Promise; // (undocumented) + getTopics(options?: GetTopicsOptions): Promise; + // (undocumented) updateNotifications( options: UpdateNotificationsOptions, ): Promise; diff --git a/plugins/notifications/src/api/NotificationsApi.ts b/plugins/notifications/src/api/NotificationsApi.ts index e24e5cad64..6bf53c2864 100644 --- a/plugins/notifications/src/api/NotificationsApi.ts +++ b/plugins/notifications/src/api/NotificationsApi.ts @@ -27,18 +27,26 @@ export const notificationsApiRef = createApiRef({ }); /** @public */ -export type GetNotificationsOptions = { - offset?: number; - limit?: number; +export type GetNotificationsCommonOptions = { search?: string; read?: boolean; saved?: boolean; createdAfter?: Date; - sort?: 'created' | 'topic' | 'origin'; - sortOrder?: 'asc' | 'desc'; minimumSeverity?: NotificationSeverity; }; +/** @public */ +export type GetNotificationsOptions = GetNotificationsCommonOptions & { + offset?: number; + limit?: number; + sort?: 'created' | 'topic' | 'origin'; + sortOrder?: 'asc' | 'desc'; + topic?: string; +}; + +/** @public */ +export type GetTopicsOptions = GetNotificationsCommonOptions; + /** @public */ export type UpdateNotificationsOptions = { ids: string[]; @@ -52,6 +60,11 @@ export type GetNotificationsResponse = { totalCount: number; }; +/** @public */ +export type GetTopicsResponse = { + topics: string[]; +}; + /** @public */ export interface NotificationsApi { getNotifications( @@ -71,4 +84,6 @@ export interface NotificationsApi { updateNotificationSettings( settings: NotificationSettings, ): Promise; + + getTopics(options?: GetTopicsOptions): Promise; } diff --git a/plugins/notifications/src/api/NotificationsClient.test.ts b/plugins/notifications/src/api/NotificationsClient.test.ts index 8248ea9331..8856e529e6 100644 --- a/plugins/notifications/src/api/NotificationsClient.test.ts +++ b/plugins/notifications/src/api/NotificationsClient.test.ts @@ -22,6 +22,8 @@ import { Notification } from '@backstage/plugin-notifications-common'; const server = setupServer(); +const testTopic = 'test-topic'; + const testNotification: Partial = { user: 'user:default/john.doe', origin: 'plugin-test', @@ -29,6 +31,7 @@ const testNotification: Partial = { title: 'Notification 1', link: '/catalog', severity: 'normal', + topic: testTopic, }, }; @@ -75,6 +78,22 @@ describe('NotificationsClient', () => { expect(response).toEqual(expectedResp); }); + it('should fetch notifications of the topic', async () => { + server.use( + rest.get(`${mockBaseUrl}/notifications`, (req, res, ctx) => { + expect(req.url.search).toBe(`?limit=10&offset=0&topic=${testTopic}`); + return res(ctx.json(expectedResp)); + }), + ); + + const response = await client.getNotifications({ + limit: 10, + offset: 0, + topic: testTopic, + }); + expect(response).toEqual(expectedResp); + }); + it('should omit unselected fetch options', async () => { server.use( rest.get(`${mockBaseUrl}/notifications`, (req, res, ctx) => { @@ -131,4 +150,36 @@ describe('NotificationsClient', () => { expect(response).toEqual(expectedResp); }); }); + + describe('getTopics', () => { + const expectedResp = [testTopic]; + + it('should fetch topics from correct endpoint', async () => { + server.use( + rest.get(`${mockBaseUrl}/topics`, (_, res, ctx) => + res(ctx.json(expectedResp)), + ), + ); + const response = await client.getTopics(); + expect(response).toEqual(expectedResp); + }); + + it('should fetch topics with options', async () => { + server.use( + rest.get(`${mockBaseUrl}/topics`, (req, res, ctx) => { + expect(req.url.search).toBe( + '?search=find+me&read=true&createdAfter=1970-01-01T00%3A00%3A00.005Z', + ); + return res(ctx.json(expectedResp)); + }), + ); + + const response = await client.getTopics({ + search: 'find me', + read: true, + createdAfter: new Date(5), + }); + expect(response).toEqual(expectedResp); + }); + }); }); diff --git a/plugins/notifications/src/api/NotificationsClient.ts b/plugins/notifications/src/api/NotificationsClient.ts index 5e763ecb8c..002553ad22 100644 --- a/plugins/notifications/src/api/NotificationsClient.ts +++ b/plugins/notifications/src/api/NotificationsClient.ts @@ -14,8 +14,11 @@ * limitations under the License. */ import { + GetNotificationsCommonOptions, GetNotificationsOptions, GetNotificationsResponse, + GetTopicsOptions, + GetTopicsResponse, NotificationsApi, UpdateNotificationsOptions, } from './NotificationsApi'; @@ -56,20 +59,11 @@ export class NotificationsClient implements NotificationsApi { `${options.sort},${options?.sortOrder ?? 'desc'}`, ); } - if (options?.search) { - queryString.append('search', options.search); - } - if (options?.read !== undefined) { - queryString.append('read', options.read ? 'true' : 'false'); - } - if (options?.saved !== undefined) { - queryString.append('saved', options.saved ? 'true' : 'false'); - } - if (options?.createdAfter !== undefined) { - queryString.append('createdAfter', options.createdAfter.toISOString()); - } - if (options?.minimumSeverity !== undefined) { - queryString.append('minimumSeverity', options.minimumSeverity); + + this.appendCommonQueryStrings(queryString, options); + + if (options?.topic !== undefined) { + queryString.append('topic', options.topic); } return await this.request( @@ -111,6 +105,34 @@ export class NotificationsClient implements NotificationsApi { }); } + async getTopics(options?: GetTopicsOptions): Promise { + const queryString = new URLSearchParams(); + this.appendCommonQueryStrings(queryString, options); + + return await this.request(`/topics?${queryString}`); + } + + private appendCommonQueryStrings( + queryString: URLSearchParams, + options?: GetNotificationsCommonOptions, + ) { + if (options?.search) { + queryString.append('search', options.search); + } + if (options?.read !== undefined) { + queryString.append('read', options.read ? 'true' : 'false'); + } + if (options?.saved !== undefined) { + queryString.append('saved', options.saved ? 'true' : 'false'); + } + if (options?.createdAfter !== undefined) { + queryString.append('createdAfter', options.createdAfter.toISOString()); + } + if (options?.minimumSeverity !== undefined) { + queryString.append('minimumSeverity', options.minimumSeverity); + } + } + private async request(path: string, init?: RequestInit): Promise { const baseUrl = await this.discoveryApi.getBaseUrl('notifications'); const res = await this.fetchApi.fetch(`${baseUrl}${path}`, init); diff --git a/plugins/notifications/src/components/NotificationsFilters/NotificationsFilters.tsx b/plugins/notifications/src/components/NotificationsFilters/NotificationsFilters.tsx index 0cb88bb3f8..300c56bdee 100644 --- a/plugins/notifications/src/components/NotificationsFilters/NotificationsFilters.tsx +++ b/plugins/notifications/src/components/NotificationsFilters/NotificationsFilters.tsx @@ -40,8 +40,13 @@ export type NotificationsFiltersProps = { onSavedChanged: (checked: boolean | undefined) => void; severity: NotificationSeverity; onSeverityChanged: (severity: NotificationSeverity) => void; + topic?: string; + onTopicChanged: (value: string | undefined) => void; + allTopics?: string[]; }; +const ALL = '___all___'; + export const CreatedAfterOptions: { [key: string]: { label: string; getDate: () => Date }; } = { @@ -127,6 +132,9 @@ export const NotificationsFilters = ({ onSavedChanged, severity, onSeverityChanged, + topic, + onTopicChanged, + allTopics, }: NotificationsFiltersProps) => { const sortByText = getSortByText(sorting); @@ -180,6 +188,15 @@ export const NotificationsFilters = ({ onSeverityChanged(value); }; + const handleOnTopicChanged = ( + event: React.ChangeEvent<{ name?: string; value: unknown }>, + ) => { + const value = event.target.value as string; + onTopicChanged(value === ALL ? undefined : value); + }; + + const sortedAllTopics = (allTopics || []).sort((a, b) => a.localeCompare(b)); + return ( <> @@ -265,6 +282,29 @@ export const NotificationsFilters = ({ + + + + Topic + + + + ); diff --git a/plugins/notifications/src/components/NotificationsPage/NotificationsPage.tsx b/plugins/notifications/src/components/NotificationsPage/NotificationsPage.tsx index 0d48a064e5..194033a697 100644 --- a/plugins/notifications/src/components/NotificationsPage/NotificationsPage.tsx +++ b/plugins/notifications/src/components/NotificationsPage/NotificationsPage.tsx @@ -33,7 +33,11 @@ import { SortBy, SortByOptions, } from '../NotificationsFilters'; -import { GetNotificationsOptions, GetNotificationsResponse } from '../../api'; +import { + GetNotificationsOptions, + GetNotificationsResponse, + GetTopicsResponse, +} from '../../api'; import { NotificationSeverity, NotificationStatus, @@ -76,9 +80,10 @@ export const NotificationsPage = (props?: NotificationsPageProps) => { SortByOptions.newest.sortBy, ); const [severity, setSeverity] = React.useState('low'); + const [topic, setTopic] = React.useState(); const { error, value, retry, loading } = useNotificationsApi< - [GetNotificationsResponse, NotificationStatus] + [GetNotificationsResponse, NotificationStatus, GetTopicsResponse] >( api => { const options: GetNotificationsOptions = { @@ -94,13 +99,20 @@ export const NotificationsPage = (props?: NotificationsPageProps) => { if (saved !== undefined) { options.saved = saved; } + if (topic !== undefined) { + options.topic = topic; + } const createdAfterDate = CreatedAfterOptions[createdAfter].getDate(); if (createdAfterDate.valueOf() > 0) { options.createdAfter = createdAfterDate; } - return Promise.all([api.getNotifications(options), api.getStatus()]); + return Promise.all([ + api.getNotifications(options), + api.getStatus(), + api.getTopics(options), + ]); }, [ containsText, @@ -111,6 +123,7 @@ export const NotificationsPage = (props?: NotificationsPageProps) => { sorting, saved, severity, + topic, ], ); @@ -143,6 +156,7 @@ export const NotificationsPage = (props?: NotificationsPageProps) => { const notifications = value?.[0]?.notifications; const totalCount = value?.[0]?.totalCount; const isUnread = !!value?.[1]?.unread; + const allTopics = value?.[2]?.topics; let tableTitle = `All notifications (${totalCount})`; if (saved) { @@ -177,6 +191,9 @@ export const NotificationsPage = (props?: NotificationsPageProps) => { onSavedChanged={setSaved} severity={severity} onSeverityChanged={setSeverity} + topic={topic} + onTopicChanged={setTopic} + allTopics={allTopics} /> diff --git a/plugins/scaffolder-backend/src/scaffolder/tasks/NunjucksWorkflowRunner.test.ts b/plugins/scaffolder-backend/src/scaffolder/tasks/NunjucksWorkflowRunner.test.ts index 7e204d35df..e368bfb07d 100644 --- a/plugins/scaffolder-backend/src/scaffolder/tasks/NunjucksWorkflowRunner.test.ts +++ b/plugins/scaffolder-backend/src/scaffolder/tasks/NunjucksWorkflowRunner.test.ts @@ -38,7 +38,6 @@ import { mockCredentials, mockServices, } from '@backstage/backend-test-utils'; -import stripAnsi from 'strip-ansi'; import { loggerToWinstonLogger } from '@backstage/backend-common'; import { LoggerService } from '@backstage/backend-plugin-api'; @@ -48,6 +47,7 @@ describe('NunjucksWorkflowRunner', () => { let runner: NunjucksWorkflowRunner; let fakeActionHandler: jest.Mock; let fakeTaskLog: jest.Mock; + let stripAnsi: typeof import('strip-ansi').default; const mockDir = createMockDirectory(); @@ -92,9 +92,12 @@ describe('NunjucksWorkflowRunner', () => { ); } - beforeEach(() => { + beforeEach(async () => { mockDir.clear(); + // This one is ESM-only + stripAnsi = await import('strip-ansi').then(m => m.default); + jest.resetAllMocks(); logger = mockServices.logger.mock(); actionRegistry = new TemplateActionRegistry(); diff --git a/plugins/search-backend-module-catalog/src/collators/DefaultCatalogCollatorFactory.ts b/plugins/search-backend-module-catalog/src/collators/DefaultCatalogCollatorFactory.ts index 1cef2e21df..f023efbf54 100644 --- a/plugins/search-backend-module-catalog/src/collators/DefaultCatalogCollatorFactory.ts +++ b/plugins/search-backend-module-catalog/src/collators/DefaultCatalogCollatorFactory.ts @@ -120,9 +120,11 @@ export class DefaultCatalogCollatorFactory implements DocumentCollatorFactory { resourceRef: stringifyEntityRef(entity), }, location: this.applyArgsToFormat(this.locationTemplate, { - namespace: entity.metadata.namespace || 'default', - kind: entity.kind, - name: entity.metadata.name, + namespace: encodeURIComponent( + entity.metadata.namespace || 'default', + ), + kind: encodeURIComponent(entity.kind), + name: encodeURIComponent(entity.metadata.name), }), }; } diff --git a/yarn.lock b/yarn.lock index 7e21cdcad1..3a442cf601 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3787,29 +3787,32 @@ __metadata: resolution: "@backstage/canon@workspace:packages/canon" dependencies: "@backstage/cli": "workspace:^" - "@base-ui-components/react": ^1.0.0-alpha.4 + "@base-ui-components/react": ^1.0.0-alpha.5 "@chromatic-com/storybook": ^3.2.2 "@remixicon/react": ^4.5.0 - "@storybook/addon-essentials": ^8.4.7 - "@storybook/addon-interactions": ^8.4.7 + "@storybook/addon-essentials": ^8.5.0 + "@storybook/addon-interactions": ^8.5.0 "@storybook/addon-styling-webpack": ^1.0.1 - "@storybook/addon-themes": ^8.4.7 - "@storybook/addon-webpack5-compiler-swc": ^1.0.5 - "@storybook/blocks": ^8.4.7 - "@storybook/react": ^8.4.7 - "@storybook/react-webpack5": ^8.4.7 - "@storybook/test": ^8.4.7 + "@storybook/addon-themes": ^8.5.0 + "@storybook/addon-webpack5-compiler-swc": ^2.0.0 + "@storybook/blocks": ^8.5.0 + "@storybook/react": ^8.5.0 + "@storybook/react-webpack5": ^8.5.0 + "@storybook/test": ^8.5.0 "@testing-library/jest-dom": ^6.0.0 "@types/react": ^18.0.0 "@types/react-dom": ^18.0.0 + chalk: ^5.4.1 clsx: ^2.1.1 eslint-plugin-storybook: ^0.11.1 + glob: ^11.0.1 globals: ^15.11.0 + lightningcss: ^1.29.1 mini-css-extract-plugin: ^2.9.2 react: ^18.0.2 react-dom: ^18.0.2 react-router-dom: ^6.3.0 - storybook: ^8.4.7 + storybook: ^8.5.0 peerDependencies: "@types/react": ^16.13.1 || ^17.0.0 || ^18.0.0 react: ^16.13.1 || ^17.0.0 || ^18.0.0 @@ -8467,7 +8470,7 @@ __metadata: languageName: node linkType: hard -"@base-ui-components/react@npm:^1.0.0-alpha.4": +"@base-ui-components/react@npm:^1.0.0-alpha.5": version: 1.0.0-alpha.5 resolution: "@base-ui-components/react@npm:1.0.0-alpha.5" dependencies: @@ -11458,39 +11461,39 @@ __metadata: languageName: node linkType: hard -"@module-federation/bridge-react-webpack-plugin@npm:0.8.7": - version: 0.8.7 - resolution: "@module-federation/bridge-react-webpack-plugin@npm:0.8.7" +"@module-federation/bridge-react-webpack-plugin@npm:0.8.9": + version: 0.8.9 + resolution: "@module-federation/bridge-react-webpack-plugin@npm:0.8.9" dependencies: - "@module-federation/sdk": 0.8.7 + "@module-federation/sdk": 0.8.9 "@types/semver": 7.5.8 semver: 7.6.3 - checksum: de47a0bc01830138afafffcb093886dec175f1bee8f0c6ffe3d62744de2e34b379afdc50193520b9613a7b942a0729d31d204c1f2e04044e85613527b2cbeeb5 + checksum: f731e42ca14af20634d5a3b41af12f0969a4df5d48270206524fe5a79f1603235a397419c9ba0343735f5c345b1ac67f5c88172d56ed58953b20beb40bea37a0 languageName: node linkType: hard -"@module-federation/data-prefetch@npm:0.8.7": - version: 0.8.7 - resolution: "@module-federation/data-prefetch@npm:0.8.7" +"@module-federation/data-prefetch@npm:0.8.9": + version: 0.8.9 + resolution: "@module-federation/data-prefetch@npm:0.8.9" dependencies: - "@module-federation/runtime": 0.8.7 - "@module-federation/sdk": 0.8.7 + "@module-federation/runtime": 0.8.9 + "@module-federation/sdk": 0.8.9 fs-extra: 9.1.0 peerDependencies: react: ">=16.9.0" react-dom: ">=16.9.0" - checksum: 208e9cb08de88bfd6fad13dbc97f582d3be6c3a7245dd963e82e35810bfa441d07aeb53f2a3cdee693146d21d9fdf7b7df550c9e138c417db285f0bd285376e2 + checksum: 1b1a078eec13cc0f7e9ca2f3346326c1e4f19cc899e124fd0c351ad717094b2772995660cd622f01a2eb22ad795bb03369699a2dabe0e23ebc7f26109d104458 languageName: node linkType: hard -"@module-federation/dts-plugin@npm:0.8.7": - version: 0.8.7 - resolution: "@module-federation/dts-plugin@npm:0.8.7" +"@module-federation/dts-plugin@npm:0.8.9": + version: 0.8.9 + resolution: "@module-federation/dts-plugin@npm:0.8.9" dependencies: - "@module-federation/error-codes": 0.8.7 - "@module-federation/managers": 0.8.7 - "@module-federation/sdk": 0.8.7 - "@module-federation/third-party-dts-extractor": 0.8.7 + "@module-federation/error-codes": 0.8.9 + "@module-federation/managers": 0.8.9 + "@module-federation/sdk": 0.8.9 + "@module-federation/third-party-dts-extractor": 0.8.9 adm-zip: ^0.5.10 ansi-colors: ^4.1.3 axios: ^1.7.4 @@ -11509,24 +11512,24 @@ __metadata: peerDependenciesMeta: vue-tsc: optional: true - checksum: 82d0bccb7f1f159b57faa55d80a5ebff411439271b5dc60823558118a9106a6dc9195f5b0cd23a6018533903f7bf5ee0578cfcb3d6f212a8c448e93c53b1570e + checksum: e5e09c08ca186559a06f539272d2ff9005cc24ee69dd207c992ce9fcf8496640cbbdd022574e8bbdd4d21df886d71975215c3c5b2ae946defaa33f2156cd8bc8 languageName: node linkType: hard "@module-federation/enhanced@npm:^0.8.0": - version: 0.8.7 - resolution: "@module-federation/enhanced@npm:0.8.7" + version: 0.8.9 + resolution: "@module-federation/enhanced@npm:0.8.9" dependencies: - "@module-federation/bridge-react-webpack-plugin": 0.8.7 - "@module-federation/data-prefetch": 0.8.7 - "@module-federation/dts-plugin": 0.8.7 - "@module-federation/error-codes": 0.8.7 - "@module-federation/inject-external-runtime-core-plugin": 0.8.7 - "@module-federation/managers": 0.8.7 - "@module-federation/manifest": 0.8.7 - "@module-federation/rspack": 0.8.7 - "@module-federation/runtime-tools": 0.8.7 - "@module-federation/sdk": 0.8.7 + "@module-federation/bridge-react-webpack-plugin": 0.8.9 + "@module-federation/data-prefetch": 0.8.9 + "@module-federation/dts-plugin": 0.8.9 + "@module-federation/error-codes": 0.8.9 + "@module-federation/inject-external-runtime-core-plugin": 0.8.9 + "@module-federation/managers": 0.8.9 + "@module-federation/manifest": 0.8.9 + "@module-federation/rspack": 0.8.9 + "@module-federation/runtime-tools": 0.8.9 + "@module-federation/sdk": 0.8.9 btoa: ^1.2.1 upath: 2.0.1 peerDependencies: @@ -11540,61 +11543,61 @@ __metadata: optional: true webpack: optional: true - checksum: 6438b023bc56dea85dad5c5b840778bda75508976bba7d922ae8692a331b1b98041f3cd8f4a8a1189ea21ec2731d061b97b6644e2611437e90411efe90abda50 + checksum: 12b0cafc428bc65e06cbab407e369fe24739923e1555005b6954cebc379c8c2f8c10758081e479293687fe6c2dba437204f3f8fe7f83545a565a80484c322f82 languageName: node linkType: hard -"@module-federation/error-codes@npm:0.8.7": - version: 0.8.7 - resolution: "@module-federation/error-codes@npm:0.8.7" - checksum: e2d0448a85881d824fd2ca3ef9a04523d06eff4dd421962e8f86c34ef46a1cd48602d917eac3d57ecdc22ee5373232bb599a2ab66bd48a9b50b885d01f77053c +"@module-federation/error-codes@npm:0.8.9": + version: 0.8.9 + resolution: "@module-federation/error-codes@npm:0.8.9" + checksum: afeacc27a133e7867db4df6f8245b5d5c465fdd2faaec8608aea2b34bd922f38f23c02ed6dcd95303dddb2735b8fcc1bc137a08d470e605ca17807b705053578 languageName: node linkType: hard -"@module-federation/inject-external-runtime-core-plugin@npm:0.8.7": - version: 0.8.7 - resolution: "@module-federation/inject-external-runtime-core-plugin@npm:0.8.7" +"@module-federation/inject-external-runtime-core-plugin@npm:0.8.9": + version: 0.8.9 + resolution: "@module-federation/inject-external-runtime-core-plugin@npm:0.8.9" peerDependencies: - "@module-federation/runtime-tools": 0.8.7 - checksum: 28e4e447a79bb0de2ae270e0aabacaf1f2533a9d30d5cc445a81bddc796895c1f1fe895da611689d18912e52a0aba1b4b605bb2f54d517e8ce81bf44e5d8f7ac + "@module-federation/runtime-tools": 0.8.9 + checksum: 77d8361051d54345d346cf3a3d967ed71d9a0bf83182a101c0dfa5c1f6593219521e80a8fb048a4a47e40a3fc4cd552e388728c853fcdcd52bb8870c7e345069 languageName: node linkType: hard -"@module-federation/managers@npm:0.8.7": - version: 0.8.7 - resolution: "@module-federation/managers@npm:0.8.7" +"@module-federation/managers@npm:0.8.9": + version: 0.8.9 + resolution: "@module-federation/managers@npm:0.8.9" dependencies: - "@module-federation/sdk": 0.8.7 + "@module-federation/sdk": 0.8.9 find-pkg: 2.0.0 fs-extra: 9.1.0 - checksum: 1b38ba2dcde89a268b2f4de8fcdc4ddbf2efd5c1f1ba641e58be2f72aa62b27584c01b46261dc65747301a238f4fafbc22ac2c8ede071e11172318084a3a8522 + checksum: b477542ad7faf02c5fce1c50a5d49ed704aebf11091c942c8cfc8615cced35efd1f3180afd0d281959a6deae792b0f6910d2da9187a83dd7761042a56dfd27b4 languageName: node linkType: hard -"@module-federation/manifest@npm:0.8.7": - version: 0.8.7 - resolution: "@module-federation/manifest@npm:0.8.7" +"@module-federation/manifest@npm:0.8.9": + version: 0.8.9 + resolution: "@module-federation/manifest@npm:0.8.9" dependencies: - "@module-federation/dts-plugin": 0.8.7 - "@module-federation/managers": 0.8.7 - "@module-federation/sdk": 0.8.7 + "@module-federation/dts-plugin": 0.8.9 + "@module-federation/managers": 0.8.9 + "@module-federation/sdk": 0.8.9 chalk: 3.0.0 find-pkg: 2.0.0 - checksum: 702b721308d938758f1d57d5f0d3ef42bc2005e5441f6ccfdc92c7171fa6fdfcbd268f7054dc530dbf3d60b187ba394c4bfa38f3ba17baede5a492ef67b845e3 + checksum: a5221fccfc626250f5256a656b55d693077076fcb0b88d103b97c6e4d18f4656752734f5966ded0ac1e1a5a501629d179d23017857da640af0fe46ad2fecdb33 languageName: node linkType: hard -"@module-federation/rspack@npm:0.8.7": - version: 0.8.7 - resolution: "@module-federation/rspack@npm:0.8.7" +"@module-federation/rspack@npm:0.8.9": + version: 0.8.9 + resolution: "@module-federation/rspack@npm:0.8.9" dependencies: - "@module-federation/bridge-react-webpack-plugin": 0.8.7 - "@module-federation/dts-plugin": 0.8.7 - "@module-federation/inject-external-runtime-core-plugin": 0.8.7 - "@module-federation/managers": 0.8.7 - "@module-federation/manifest": 0.8.7 - "@module-federation/runtime-tools": 0.8.7 - "@module-federation/sdk": 0.8.7 + "@module-federation/bridge-react-webpack-plugin": 0.8.9 + "@module-federation/dts-plugin": 0.8.9 + "@module-federation/inject-external-runtime-core-plugin": 0.8.9 + "@module-federation/managers": 0.8.9 + "@module-federation/manifest": 0.8.9 + "@module-federation/runtime-tools": 0.8.9 + "@module-federation/sdk": 0.8.9 peerDependencies: "@rspack/core": ">=0.7" typescript: ^4.9.0 || ^5.0.0 @@ -11604,17 +11607,17 @@ __metadata: optional: true vue-tsc: optional: true - checksum: 933adfab6b62885e57da33cf453d450eb7f7ce983e54e2ae10ef4cb1b8c3ce333fec41428defd389b722d5323b355e9c374d42db00fd51faf2609fb8cdc29511 + checksum: 027b759e0c2b05f55b50835e3dad556ad4b889885fe64de3ee55d62850d3cff7fa746f517f8bc127be3a6d5ac4b6d78bc5c639ed378afe29d3917e4dfef67a8a languageName: node linkType: hard -"@module-federation/runtime-core@npm:0.6.15": - version: 0.6.15 - resolution: "@module-federation/runtime-core@npm:0.6.15" +"@module-federation/runtime-core@npm:0.6.17": + version: 0.6.17 + resolution: "@module-federation/runtime-core@npm:0.6.17" dependencies: - "@module-federation/error-codes": 0.8.7 - "@module-federation/sdk": 0.8.7 - checksum: 6a2acbdfd2fdb39dc9c8e6e0edaf371437405eb25800709ed94b2a3c5f36e3918d77da6bd17751635a9fe9ead6993aa343d4a9590d0797d28d9c017293782865 + "@module-federation/error-codes": 0.8.9 + "@module-federation/sdk": 0.8.9 + checksum: c7da28d11137b1d0925461d77660b4e431b2a6f0d66e851f34609c9d7acf515f2db9d993b6c2e993e3721753fb2df8fcd4d0bf62ee7b84cde9367b3bfce873e9 languageName: node linkType: hard @@ -11628,13 +11631,13 @@ __metadata: languageName: node linkType: hard -"@module-federation/runtime-tools@npm:0.8.7": - version: 0.8.7 - resolution: "@module-federation/runtime-tools@npm:0.8.7" +"@module-federation/runtime-tools@npm:0.8.9": + version: 0.8.9 + resolution: "@module-federation/runtime-tools@npm:0.8.9" dependencies: - "@module-federation/runtime": 0.8.7 - "@module-federation/webpack-bundler-runtime": 0.8.7 - checksum: 39ccdcdd6a178a3be2a574fe38ac063096a3c39ef5dc5f772120134205134ab0617c5d7f979dcf25f4bff18ed0538923544bc402231b19cf39d1912440473b8b + "@module-federation/runtime": 0.8.9 + "@module-federation/webpack-bundler-runtime": 0.8.9 + checksum: d59ba1620d7da5ee8ce2b7cebc4f813efe202b3af1bce9a395409a17f08633f864c0980744069c378896ef5f8bfd68574110873d42d615c36b51bd36e2e48c74 languageName: node linkType: hard @@ -11647,14 +11650,14 @@ __metadata: languageName: node linkType: hard -"@module-federation/runtime@npm:0.8.7": - version: 0.8.7 - resolution: "@module-federation/runtime@npm:0.8.7" +"@module-federation/runtime@npm:0.8.9": + version: 0.8.9 + resolution: "@module-federation/runtime@npm:0.8.9" dependencies: - "@module-federation/error-codes": 0.8.7 - "@module-federation/runtime-core": 0.6.15 - "@module-federation/sdk": 0.8.7 - checksum: 033dff2955290c29023593314de463744bee0eacce0bc3d0d1b9223ce2356f5d92554703e9f46066b269f24e3f16caa0cb675362d0ad88dfd9cae3b2a0e8b54c + "@module-federation/error-codes": 0.8.9 + "@module-federation/runtime-core": 0.6.17 + "@module-federation/sdk": 0.8.9 + checksum: 20495c029401431c43f5c5744d83d18c2f8ecafcc97cb960c3973119ec9d8ae313c5ceacbd1ae181331ccf51afb4185a2c8cde6e81ae372d7fa2d42f5af9de0b languageName: node linkType: hard @@ -11665,23 +11668,23 @@ __metadata: languageName: node linkType: hard -"@module-federation/sdk@npm:0.8.7": - version: 0.8.7 - resolution: "@module-federation/sdk@npm:0.8.7" +"@module-federation/sdk@npm:0.8.9": + version: 0.8.9 + resolution: "@module-federation/sdk@npm:0.8.9" dependencies: isomorphic-rslog: 0.0.7 - checksum: d78fffcf5413877047e05cc82bdf31810ad46f669a9393105280e4eae7fcaf80aaf29dd239ce6c7be61b59e31e93d6531a9afc6f89e4c9dcdb6a35e5cf01f408 + checksum: 74effd5aa86b3c9d7a08efc435a8b0bb244010de05b8e84a6269931bc72d59a467654b57c7870380502a1999bcd22c5c138b3558ab26663f366b6cec6b0fe225 languageName: node linkType: hard -"@module-federation/third-party-dts-extractor@npm:0.8.7": - version: 0.8.7 - resolution: "@module-federation/third-party-dts-extractor@npm:0.8.7" +"@module-federation/third-party-dts-extractor@npm:0.8.9": + version: 0.8.9 + resolution: "@module-federation/third-party-dts-extractor@npm:0.8.9" dependencies: find-pkg: 2.0.0 fs-extra: 9.1.0 resolve: 1.22.8 - checksum: 50ba3a7b507029291567c0334b257c6ba7ffc502627da958ff2247571a01d013d209143fb76557c9817aa62cd56a4ede69663866742063c97d2e14b3decf22ec + checksum: d5e67563ff80a107ba811477271d12bbc5c89869a13499d278961c1f13947f6fb85d9f5316fc9017be77692d876e8b7304136d4154a313023486b521548abafd languageName: node linkType: hard @@ -11695,13 +11698,13 @@ __metadata: languageName: node linkType: hard -"@module-federation/webpack-bundler-runtime@npm:0.8.7": - version: 0.8.7 - resolution: "@module-federation/webpack-bundler-runtime@npm:0.8.7" +"@module-federation/webpack-bundler-runtime@npm:0.8.9": + version: 0.8.9 + resolution: "@module-federation/webpack-bundler-runtime@npm:0.8.9" dependencies: - "@module-federation/runtime": 0.8.7 - "@module-federation/sdk": 0.8.7 - checksum: a32718e9ce51a8cc0c5a822b92507cfe087a75d9a979d12e1158018cb6abc469e5aee6c7d18bd0ded786600232056c57fc589101bda4f54b1708c6549ead7864 + "@module-federation/runtime": 0.8.9 + "@module-federation/sdk": 0.8.9 + checksum: 1ca36a54976207682cbac0e74eae7ceb7be102aff5008ed5b5f77a8aeab7e74198cd4c26a7c521ab6b38d4e7c31c86115901aa69753e76094012d171a1f79e4d languageName: node linkType: hard @@ -17131,9 +17134,9 @@ __metadata: languageName: node linkType: hard -"@storybook/addon-actions@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/addon-actions@npm:8.4.7" +"@storybook/addon-actions@npm:8.5.0": + version: 8.5.0 + resolution: "@storybook/addon-actions@npm:8.5.0" dependencies: "@storybook/global": ^5.0.0 "@types/uuid": ^9.0.1 @@ -17141,121 +17144,121 @@ __metadata: polished: ^4.2.2 uuid: ^9.0.0 peerDependencies: - storybook: ^8.4.7 - checksum: 7cc48f1ebd137f815b907255e8201e49df5a5fa37fade9fa1a8d2bcaeaf4922e777a20e5e2b84500b85a4976a95b81ab960d6208e1c1d44be1e6fb7a6b93fc6c + storybook: ^8.5.0 + checksum: 88c279bf90edd818017f18925efcaf2b2ccd42f9247832a26dc36a7e73db012b9784889f64986527a55ed9a3746fc5fe229d26de8c2b2dbfb670494213bf688b languageName: node linkType: hard -"@storybook/addon-backgrounds@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/addon-backgrounds@npm:8.4.7" +"@storybook/addon-backgrounds@npm:8.5.0": + version: 8.5.0 + resolution: "@storybook/addon-backgrounds@npm:8.5.0" dependencies: "@storybook/global": ^5.0.0 memoizerific: ^1.11.3 ts-dedent: ^2.0.0 peerDependencies: - storybook: ^8.4.7 - checksum: 67cf32c3f9d2797158679156fb7250b94e72d692375505aa641d856b89c6340501d8c62653c1bb613aa1920d9115ae56566e1d2866a454515d2a6b639df94856 + storybook: ^8.5.0 + checksum: 6a9b1f1b4d5db5c2f9a21477c3708f4d80e4dae4a33acee0c3130d698664ed180da4ae426708f0a929ba5b4a7daa9ed3d9d9273ca21b898abd535d56e39d701c languageName: node linkType: hard -"@storybook/addon-controls@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/addon-controls@npm:8.4.7" +"@storybook/addon-controls@npm:8.5.0": + version: 8.5.0 + resolution: "@storybook/addon-controls@npm:8.5.0" dependencies: "@storybook/global": ^5.0.0 dequal: ^2.0.2 ts-dedent: ^2.0.0 peerDependencies: - storybook: ^8.4.7 - checksum: 5d91916bfc767c119b4d938bf8ecaee8a8d661068f11b5f8d73027626340a972eaa503d8ef75c64aa61da4e8b846c3bc3f66529e75f76d830811ce04b17bc367 + storybook: ^8.5.0 + checksum: 8e370b6add3dbbe430f2f72fa9383d872ecbe9e88f0190b560c545620fc21292417d9a042c0aa496640f98b2e5621a46a34da23406848d86c25bf0638812a2de languageName: node linkType: hard -"@storybook/addon-docs@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/addon-docs@npm:8.4.7" +"@storybook/addon-docs@npm:8.5.0": + version: 8.5.0 + resolution: "@storybook/addon-docs@npm:8.5.0" dependencies: "@mdx-js/react": ^3.0.0 - "@storybook/blocks": 8.4.7 - "@storybook/csf-plugin": 8.4.7 - "@storybook/react-dom-shim": 8.4.7 + "@storybook/blocks": 8.5.0 + "@storybook/csf-plugin": 8.5.0 + "@storybook/react-dom-shim": 8.5.0 react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 ts-dedent: ^2.0.0 peerDependencies: - storybook: ^8.4.7 - checksum: b4442198f6931b8d1be15b3846898d1e1bda7c36f331f7f5b75dd36b69c1f22eee755633343ba78b7decc5aec45dd50a88375686b10462c0dc79fead9cf66309 + storybook: ^8.5.0 + checksum: 47f46a80929485a3941e69dfd3079cb7d43702e9a5080f788f0971637fc906af5b353446a89f2ebdaa501739a7e778803ad93fec8787de8ba493ebe6e802a725 languageName: node linkType: hard -"@storybook/addon-essentials@npm:^8.4.7": - version: 8.4.7 - resolution: "@storybook/addon-essentials@npm:8.4.7" +"@storybook/addon-essentials@npm:^8.5.0": + version: 8.5.0 + resolution: "@storybook/addon-essentials@npm:8.5.0" dependencies: - "@storybook/addon-actions": 8.4.7 - "@storybook/addon-backgrounds": 8.4.7 - "@storybook/addon-controls": 8.4.7 - "@storybook/addon-docs": 8.4.7 - "@storybook/addon-highlight": 8.4.7 - "@storybook/addon-measure": 8.4.7 - "@storybook/addon-outline": 8.4.7 - "@storybook/addon-toolbars": 8.4.7 - "@storybook/addon-viewport": 8.4.7 + "@storybook/addon-actions": 8.5.0 + "@storybook/addon-backgrounds": 8.5.0 + "@storybook/addon-controls": 8.5.0 + "@storybook/addon-docs": 8.5.0 + "@storybook/addon-highlight": 8.5.0 + "@storybook/addon-measure": 8.5.0 + "@storybook/addon-outline": 8.5.0 + "@storybook/addon-toolbars": 8.5.0 + "@storybook/addon-viewport": 8.5.0 ts-dedent: ^2.0.0 peerDependencies: - storybook: ^8.4.7 - checksum: d8731c18935fbc130beee7236b4e80c1621c6964a4109741512b50f065cd8d322446f8ecd84b4120ad1ce2ea829d0d3b5b764cca19c1bd8b73fc77d04dc13f17 + storybook: ^8.5.0 + checksum: 704f626070eeeb52029798eb5a191408fb87e4e284a97b4b17918cb7a945f25d805b2e704978829d5a3b5a4853b78aab068a18bbd5696ce8a80559fe778e0867 languageName: node linkType: hard -"@storybook/addon-highlight@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/addon-highlight@npm:8.4.7" +"@storybook/addon-highlight@npm:8.5.0": + version: 8.5.0 + resolution: "@storybook/addon-highlight@npm:8.5.0" dependencies: "@storybook/global": ^5.0.0 peerDependencies: - storybook: ^8.4.7 - checksum: 8b4ad5df3227441e3442d6c49a0be7b14b9b12f722897d45d90ee405ac791e549a41b30f9f6ab3c89f39c89294f7933449338ddcf3c4bdc1e6f3f42a48093826 + storybook: ^8.5.0 + checksum: f29f39e13d798da0f1ddf4f80d1853e44435380a2d1b5e9e4097dbd3ff948ac4fa45ae1f1f95605a7eaa8da5c972bda20dfe6696e989413e8f0449bb98ab3b80 languageName: node linkType: hard -"@storybook/addon-interactions@npm:^8.4.7": - version: 8.4.7 - resolution: "@storybook/addon-interactions@npm:8.4.7" +"@storybook/addon-interactions@npm:^8.5.0": + version: 8.5.0 + resolution: "@storybook/addon-interactions@npm:8.5.0" dependencies: "@storybook/global": ^5.0.0 - "@storybook/instrumenter": 8.4.7 - "@storybook/test": 8.4.7 + "@storybook/instrumenter": 8.5.0 + "@storybook/test": 8.5.0 polished: ^4.2.2 ts-dedent: ^2.2.0 peerDependencies: - storybook: ^8.4.7 - checksum: 9130d38a49cfc858b262faf19214eee83c1a89c012477821bd8371fa0ea952e3de0317d7e1bab78e4945a64b977bbf1b4092bbfe1d1d29bed5d6a117861cdba8 + storybook: ^8.5.0 + checksum: e34efa2baeb02728ddb8d878aff0d3c8f1f6c5f03db21224ad1710d62722aeef7155d828dfc37aa4edce8da2aafef7e824d0755e76f3fe432cc80a2abcc26bb8 languageName: node linkType: hard -"@storybook/addon-measure@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/addon-measure@npm:8.4.7" +"@storybook/addon-measure@npm:8.5.0": + version: 8.5.0 + resolution: "@storybook/addon-measure@npm:8.5.0" dependencies: "@storybook/global": ^5.0.0 tiny-invariant: ^1.3.1 peerDependencies: - storybook: ^8.4.7 - checksum: 16bc6a5ece783a99eb14cfd705c7664582b640dc81c0226d7f8e649c611082c00b348cc834b43cb5be26b478afc16f3673607f07cccdd04b6dfde7faae99c220 + storybook: ^8.5.0 + checksum: e0d976318b809fdd9573f323d43e4551fd3079c5f74f61dc666a9f2da00350b68e76a0f78c523d308c0165226f1721a41059abb4d9c650be2a002784a165ea59 languageName: node linkType: hard -"@storybook/addon-outline@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/addon-outline@npm:8.4.7" +"@storybook/addon-outline@npm:8.5.0": + version: 8.5.0 + resolution: "@storybook/addon-outline@npm:8.5.0" dependencies: "@storybook/global": ^5.0.0 ts-dedent: ^2.0.0 peerDependencies: - storybook: ^8.4.7 - checksum: caea4da246bca6d31a217b2f004daa416998c505648f9ed3768d094d4950d1b9f014da70e0f31b92cb6851e92e171cec55ebccf80600902019102c8c997c1228 + storybook: ^8.5.0 + checksum: 8d5323168932700a06e115c74c1c2a867bd32acbfc41d1cb2d0bde5fc4b0beaed5848136d8f2f9e7c4577c1a482cc88f6ddf312b842cea12eb8cc4b13f910018 languageName: node linkType: hard @@ -17270,73 +17273,72 @@ __metadata: languageName: node linkType: hard -"@storybook/addon-themes@npm:^8.4.7": - version: 8.4.7 - resolution: "@storybook/addon-themes@npm:8.4.7" +"@storybook/addon-themes@npm:^8.5.0": + version: 8.5.0 + resolution: "@storybook/addon-themes@npm:8.5.0" dependencies: ts-dedent: ^2.0.0 peerDependencies: - storybook: ^8.4.7 - checksum: a9ba38e765564b20691525d78354ee135c3722ffffb8735df21da8afa33a529f82dd59ae1041f21c3572bf066784f58529ab0a96e1414b2eb61d7916528f9ba1 + storybook: ^8.5.0 + checksum: bdfdd1813bcefe50873fa1d39aa53811596197ade52710cd3abeec0b2bcc2187b38b549ed1be8b7cddd7abf25c63fd00967439cba013c08720560dd3176c1380 languageName: node linkType: hard -"@storybook/addon-toolbars@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/addon-toolbars@npm:8.4.7" +"@storybook/addon-toolbars@npm:8.5.0": + version: 8.5.0 + resolution: "@storybook/addon-toolbars@npm:8.5.0" peerDependencies: - storybook: ^8.4.7 - checksum: e94f2a47d7c59f19f43b2f345a39e7a0071f80e2b9c636e82b814707b92c86578dba8e0b82a31a8f62806bbfb16d5491f3e784b6ed27a9b5af76c6723bcdfd59 + storybook: ^8.5.0 + checksum: 467d7914411b8be08591c6f91e3fb603ec3cd49eabb1a604cc3d9197337b17aad02d82a46d1b90d749b22066d49ec78c2b889ea4aa9e2e86e81b6af67851c993 languageName: node linkType: hard -"@storybook/addon-viewport@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/addon-viewport@npm:8.4.7" +"@storybook/addon-viewport@npm:8.5.0": + version: 8.5.0 + resolution: "@storybook/addon-viewport@npm:8.5.0" dependencies: memoizerific: ^1.11.3 peerDependencies: - storybook: ^8.4.7 - checksum: 87c4384293d2adea8a3267560fd72070d2185dfa5e4dc3c5325ccb412d6d5c0bcc6d2c825d92c83e099a8187bddcb7db7f635107308952ad120b057f1a099443 + storybook: ^8.5.0 + checksum: 974c28ce0a6ce69972192cbd2d0f62fd170e638804bc0680ab2045034491eee25877190033138e970d406dd3408a79f5a49c792a97d72cd8dac7fdc25559e25d languageName: node linkType: hard -"@storybook/addon-webpack5-compiler-swc@npm:^1.0.5": - version: 1.0.6 - resolution: "@storybook/addon-webpack5-compiler-swc@npm:1.0.6" +"@storybook/addon-webpack5-compiler-swc@npm:^2.0.0": + version: 2.0.0 + resolution: "@storybook/addon-webpack5-compiler-swc@npm:2.0.0" dependencies: "@swc/core": ^1.7.3 swc-loader: ^0.2.3 - checksum: c70389a664f1862d4939dca645e0f5680f759bcd15d629004a7a7186e2a96993a84f41535f63a610b753c1a625427bc5af5a0a7976f31f0aac81fb80f47523af + checksum: abc904d79fc0ddf1e9207d6012ebc4c9288f966a3821edd6c20732ee6c3c3a4cad44010090bd0d354386089fd59ff0f668e4305e2493ab582a1200b75a67baab languageName: node linkType: hard -"@storybook/blocks@npm:8.4.7, @storybook/blocks@npm:^8.4.7": - version: 8.4.7 - resolution: "@storybook/blocks@npm:8.4.7" +"@storybook/blocks@npm:8.5.0, @storybook/blocks@npm:^8.5.0": + version: 8.5.0 + resolution: "@storybook/blocks@npm:8.5.0" dependencies: - "@storybook/csf": ^0.1.11 + "@storybook/csf": 0.1.12 "@storybook/icons": ^1.2.12 ts-dedent: ^2.0.0 peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - storybook: ^8.4.7 + storybook: ^8.5.0 peerDependenciesMeta: react: optional: true react-dom: optional: true - checksum: 4fd794e48efd809dd7588c65f721f3d3674554d18ffef380a0b8431af654e995f54a4a2ab6e7a1b6f092ddf614a4701db361175912d61ece9599a1e1cbce6c83 + checksum: 6b0288254d4411320f79bdcc26719413e8bc71a63c0333af5cafb526a104c9b25b254ed65fc51760f6efe05120d846ae71b1b4a76b00262579440afa948e9155 languageName: node linkType: hard -"@storybook/builder-webpack5@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/builder-webpack5@npm:8.4.7" +"@storybook/builder-webpack5@npm:8.5.0": + version: 8.5.0 + resolution: "@storybook/builder-webpack5@npm:8.5.0" dependencies: - "@storybook/core-webpack": 8.4.7 - "@types/node": ^22.0.0 + "@storybook/core-webpack": 8.5.0 "@types/semver": ^7.3.4 browser-assert: ^1.2.1 case-sensitive-paths-webpack-plugin: ^2.4.0 @@ -17361,40 +17363,39 @@ __metadata: webpack-hot-middleware: ^2.25.1 webpack-virtual-modules: ^0.6.0 peerDependencies: - storybook: ^8.4.7 + storybook: ^8.5.0 peerDependenciesMeta: typescript: optional: true - checksum: e1a48c3b03a4bac12ec99d41de3107246f4940bf7c67f2294db49b3b4e92cb65166bfde32184372bde758a4386206b2013b2b56683e684a2f2d096814bd4120a + checksum: 21cc74a46e5bb70126e44df09173ae6d01756e7d4cb86ff70da72066f8543c73d424560ee47cec5b46157c487fb6e7c63220f48a133cef2088f3a32ef313dd7e languageName: node linkType: hard -"@storybook/components@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/components@npm:8.4.7" +"@storybook/components@npm:8.5.0": + version: 8.5.0 + resolution: "@storybook/components@npm:8.5.0" peerDependencies: storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 - checksum: e39fb81e8386db4f3f76cbf4f82e50512fed2f65a581951c0b61e00c9834c20cfff7f717e936353275dadfe6a25ffaac5d47151adbe1e3be85e709f8a64f6a15 + checksum: 2436cd632134a5e6e1733d2081898d41bd7ff328f30a4173d80a27f27b8e989d2b29ee70df4caae54040122381b376d461d9bbfc372d72e98cfceeaf60d0b724 languageName: node linkType: hard -"@storybook/core-webpack@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/core-webpack@npm:8.4.7" +"@storybook/core-webpack@npm:8.5.0": + version: 8.5.0 + resolution: "@storybook/core-webpack@npm:8.5.0" dependencies: - "@types/node": ^22.0.0 ts-dedent: ^2.0.0 peerDependencies: - storybook: ^8.4.7 - checksum: 9b89842f51f391502e8e466747f68bcfb285691d958b8cbf6e57e691108c9c199430d43be90a558987c88e95bff6daa5129af6ad0b785752e2538c09f0d1a438 + storybook: ^8.5.0 + checksum: 18e3551a3503316a738390f76bd68a6d119ab3bedf57d0ffa008d0d5823958856b2ed5f29e5a86d869202b10f9d78b7fcb5346c8c6a9c5950cf7f3571b7802c7 languageName: node linkType: hard -"@storybook/core@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/core@npm:8.4.7" +"@storybook/core@npm:8.5.0": + version: 8.5.0 + resolution: "@storybook/core@npm:8.5.0" dependencies: - "@storybook/csf": ^0.1.11 + "@storybook/csf": 0.1.12 better-opn: ^3.0.2 browser-assert: ^1.2.1 esbuild: ^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 @@ -17410,27 +17411,27 @@ __metadata: peerDependenciesMeta: prettier: optional: true - checksum: 969cde2203c9c2c744f2a1d2858b2adeb7d57fc75e703f64187fcf0056eb7da48d0507d919718c0866952dda084eb51d79e65a90abec8bb0dcb404b542a6872f + checksum: 362e48c30c4b08505d40d605fcf490a42b73069b1d297ef385ccadc16a481582d4a28c1518a50ced649a957cbc561d09e19be7d9cd5c69172a33e8012f99643d languageName: node linkType: hard -"@storybook/csf-plugin@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/csf-plugin@npm:8.4.7" +"@storybook/csf-plugin@npm:8.5.0": + version: 8.5.0 + resolution: "@storybook/csf-plugin@npm:8.5.0" dependencies: unplugin: ^1.3.1 peerDependencies: - storybook: ^8.4.7 - checksum: d9006d1a506796717528ee81948be89c8ca7e4a4ad463e024936d828b8e91e12940a41f054db4d5b1f1b058146113aaeb415eca87ca94142c3ef1ef501aead17 + storybook: ^8.5.0 + checksum: 4d81e94dbd7aea3dd7da36c9ec80559d5c5d3597aae3f3a59472b803fda3eb8a33c35dcc6a4d238f1daf1d39d1f135e0daa26d3d1b29feabf942b6138d3b5054 languageName: node linkType: hard -"@storybook/csf@npm:^0.1.11": - version: 0.1.11 - resolution: "@storybook/csf@npm:0.1.11" +"@storybook/csf@npm:0.1.12, @storybook/csf@npm:^0.1.11": + version: 0.1.12 + resolution: "@storybook/csf@npm:0.1.12" dependencies: type-fest: ^2.19.0 - checksum: ba2a265f62ad82a2853b069f77e974efe31bed263a640ca1dd8e6d7e194022018a67ad4a2587ae928f33ae45aaf6ffedd5925ba3fcf3fe5b7996667a918e22eb + checksum: 85ef7d481a2d3329b481013a7c16e847aa732b96aea74efd40f95a84a2692d19ab4260f9603028cd3369303d95210497ff1dfc8cd9d6a26ad76f82e676f34a80 languageName: node linkType: hard @@ -17451,24 +17452,24 @@ __metadata: languageName: node linkType: hard -"@storybook/instrumenter@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/instrumenter@npm:8.4.7" +"@storybook/instrumenter@npm:8.5.0": + version: 8.5.0 + resolution: "@storybook/instrumenter@npm:8.5.0" dependencies: "@storybook/global": ^5.0.0 "@vitest/utils": ^2.1.1 peerDependencies: - storybook: ^8.4.7 - checksum: 8e3316a42c172099b3a27bedbfde4da45e76d2f7508ff20e9a259322a35a52c69cc0fb74a3611d10f5963ff165e83c6ae0b78b1e0e5f77a1aa0d70ac16f7be83 + storybook: ^8.5.0 + checksum: a5d4fc43f797db0654b5207f4dd2512b2cbca02ca3d31872ced05955d4568d01e58adaaebf44db5c03414bfacf83b4de26fd1cd4dda00d20d2981cd526a098a2 languageName: node linkType: hard -"@storybook/manager-api@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/manager-api@npm:8.4.7" +"@storybook/manager-api@npm:8.5.0": + version: 8.5.0 + resolution: "@storybook/manager-api@npm:8.5.0" peerDependencies: storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 - checksum: 2b826ec55de7ea0b5b5151dfa896f3e7eddfd36ede61f8a7ad14a37733d5d5645565f863dbde7e2272f1e9b5717f26de7802ae60e297a2647ee2c4c072ed3069 + checksum: d0e343579430e1896b6cf5fe5a81d5784a9fcad2725d6cc3012d05f6195c45cbe39bc5fcae21b334dd701cf6ab4d805261f513394687734e3a987906449f18d4 languageName: node linkType: hard @@ -17481,14 +17482,13 @@ __metadata: languageName: node linkType: hard -"@storybook/preset-react-webpack@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/preset-react-webpack@npm:8.4.7" +"@storybook/preset-react-webpack@npm:8.5.0": + version: 8.5.0 + resolution: "@storybook/preset-react-webpack@npm:8.5.0" dependencies: - "@storybook/core-webpack": 8.4.7 - "@storybook/react": 8.4.7 + "@storybook/core-webpack": 8.5.0 + "@storybook/react": 8.5.0 "@storybook/react-docgen-typescript-plugin": 1.0.6--canary.9.0c3f3b7.0 - "@types/node": ^22.0.0 "@types/semver": ^7.3.4 find-up: ^5.0.0 magic-string: ^0.30.5 @@ -17500,20 +17500,20 @@ __metadata: peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - storybook: ^8.4.7 + storybook: ^8.5.0 peerDependenciesMeta: typescript: optional: true - checksum: 0e2a3934e0b1b225adaa12ab1a44822a8dd3b0ce23be0fbcf923bdf555e6ff3008123f55d31825548cbc4a5f76a7adadd3b4d933289aaa94f7d2e2404d761f51 + checksum: f14ebe8281e3a1296359fa59e0feff93bf9d2f67d9e6e16bdba1e00f3f979dc9abffdef1c3dc152b673e5edf6246f8613a5f27ad8ecf26cfcbfd0d9b594c3f99 languageName: node linkType: hard -"@storybook/preview-api@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/preview-api@npm:8.4.7" +"@storybook/preview-api@npm:8.5.0": + version: 8.5.0 + resolution: "@storybook/preview-api@npm:8.5.0" peerDependencies: storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 - checksum: 1c467bb2c16c5998b9bc4c2c013e6786936d5f6a373ad8d8ab1beb626616c3187329fdfc3a709663b4af963c7e5789a1401166c6e2a3a66a12f66e858aa94e91 + checksum: 8e13270e970a36c935eb4ee926cfc8d187f33d55fc121793845c0b6e37eba7e2581b2dba5dea6bffb843d202f61f20aed71e6e9dceae3e5438b017acdb32609a languageName: node linkType: hard @@ -17535,86 +17535,85 @@ __metadata: languageName: node linkType: hard -"@storybook/react-dom-shim@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/react-dom-shim@npm:8.4.7" +"@storybook/react-dom-shim@npm:8.5.0": + version: 8.5.0 + resolution: "@storybook/react-dom-shim@npm:8.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - storybook: ^8.4.7 - checksum: 4de29cbb990bfb2f310440aa995b024faa93fd1d5c7c942d6d661d590693eb56e0567a141c14faca63e8b24fc2f6b6b44c02af37cd2d5b469c1129b0e78fc79d + storybook: ^8.5.0 + checksum: d41521f4d965c954fd9a6517ee334801db98c6558ca985d80ae6586bab07aa5f73986711d49429d329fdcb835dc04417b8721600df77a2341b7524e5e2cab9ab languageName: node linkType: hard -"@storybook/react-webpack5@npm:^8.4.7": - version: 8.4.7 - resolution: "@storybook/react-webpack5@npm:8.4.7" +"@storybook/react-webpack5@npm:^8.5.0": + version: 8.5.0 + resolution: "@storybook/react-webpack5@npm:8.5.0" dependencies: - "@storybook/builder-webpack5": 8.4.7 - "@storybook/preset-react-webpack": 8.4.7 - "@storybook/react": 8.4.7 - "@types/node": ^22.0.0 + "@storybook/builder-webpack5": 8.5.0 + "@storybook/preset-react-webpack": 8.5.0 + "@storybook/react": 8.5.0 peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - storybook: ^8.4.7 + storybook: ^8.5.0 typescript: ">= 4.2.x" peerDependenciesMeta: typescript: optional: true - checksum: 5be2491f5fe2525dee96a86d1fe7775bbaaf5352cfb538aa8e91bab7bdbea47597670761921436ea7041fc6277cb33ee680bad6efd7bfd84fc38d66942aa4001 + checksum: ea50f906c8f7ee2a786f25a41d1f29d624239447c0183e54641a361ac37b51e0423fdaa9807fdb488b3aa7518fcd41924766219b02c23112e6ce7bd8d49053b1 languageName: node linkType: hard -"@storybook/react@npm:8.4.7, @storybook/react@npm:^8.4.7": - version: 8.4.7 - resolution: "@storybook/react@npm:8.4.7" +"@storybook/react@npm:8.5.0, @storybook/react@npm:^8.5.0": + version: 8.5.0 + resolution: "@storybook/react@npm:8.5.0" dependencies: - "@storybook/components": 8.4.7 + "@storybook/components": 8.5.0 "@storybook/global": ^5.0.0 - "@storybook/manager-api": 8.4.7 - "@storybook/preview-api": 8.4.7 - "@storybook/react-dom-shim": 8.4.7 - "@storybook/theming": 8.4.7 + "@storybook/manager-api": 8.5.0 + "@storybook/preview-api": 8.5.0 + "@storybook/react-dom-shim": 8.5.0 + "@storybook/theming": 8.5.0 peerDependencies: - "@storybook/test": 8.4.7 + "@storybook/test": 8.5.0 react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - storybook: ^8.4.7 + storybook: ^8.5.0 typescript: ">= 4.2.x" peerDependenciesMeta: "@storybook/test": optional: true typescript: optional: true - checksum: 5ad2137f8f5f0a34cb90e2582fd574aff888c544f0f9907472d930d4fb1f444124aa84188a0b5d661cc6c4c0bf7210b1e616a53b4be3f2df2479165571fa9085 + checksum: 8f37ce63666b85193acd61dc5dd1b8464445a7d5841e99c1887de287865a455868545eba78647a1c28a52c8b1232bdd1fdebfa2a339e6d027f723aa360d6c0bd languageName: node linkType: hard -"@storybook/test@npm:8.4.7, @storybook/test@npm:^8.4.7": - version: 8.4.7 - resolution: "@storybook/test@npm:8.4.7" +"@storybook/test@npm:8.5.0, @storybook/test@npm:^8.5.0": + version: 8.5.0 + resolution: "@storybook/test@npm:8.5.0" dependencies: - "@storybook/csf": ^0.1.11 + "@storybook/csf": 0.1.12 "@storybook/global": ^5.0.0 - "@storybook/instrumenter": 8.4.7 + "@storybook/instrumenter": 8.5.0 "@testing-library/dom": 10.4.0 "@testing-library/jest-dom": 6.5.0 "@testing-library/user-event": 14.5.2 "@vitest/expect": 2.0.5 "@vitest/spy": 2.0.5 peerDependencies: - storybook: ^8.4.7 - checksum: ef1147edb55be9770004d3194dcbeef650768659af0704cd50e9d14f3c647f28855270e5151e609775770c30bf5d42fbd33ad3bc383d25846bc1e5e9e4f490f7 + storybook: ^8.5.0 + checksum: 26b4978a93baf1e31deab709179c2c4181d2019eb249db55f8d48f387861cb48a7235a73dea90dece30491cc31067f51c5601f6d7227b2519b42db30c1cf648c languageName: node linkType: hard -"@storybook/theming@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/theming@npm:8.4.7" +"@storybook/theming@npm:8.5.0": + version: 8.5.0 + resolution: "@storybook/theming@npm:8.5.0" peerDependencies: storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 - checksum: 47d29993c33bb29994d227af30e099579b7cf760652ed743020f5d7e5a5974f59a6ebeb1cc8995e6158da9cf768a8d2f559d1d819cc082d0bcdb056d85fdcb29 + checksum: d93b5d104c500b674353b53ba6d5b0ad86e83206e84587a44c2eac561713bccaf53017cbb6d498d540e8eb4a21781e6494a86a0d22246404bad2dc78f1f99df6 languageName: node linkType: hard @@ -24242,7 +24241,7 @@ __metadata: languageName: node linkType: hard -"chalk@npm:~5.4.1": +"chalk@npm:^5.4.1, chalk@npm:~5.4.1": version: 5.4.1 resolution: "chalk@npm:5.4.1" checksum: 0c656f30b782fed4d99198825c0860158901f449a6b12b818b0aabad27ec970389e7e8767d0e00762175b23620c812e70c4fd92c0210e55fc2d993638b74e86e @@ -26554,6 +26553,15 @@ __metadata: languageName: node linkType: hard +"detect-libc@npm:^1.0.3": + version: 1.0.3 + resolution: "detect-libc@npm:1.0.3" + bin: + detect-libc: ./bin/detect-libc.js + checksum: daaaed925ffa7889bd91d56e9624e6c8033911bb60f3a50a74a87500680652969dbaab9526d1e200a4c94acf80fc862a22131841145a0a8482d60a99c24f4a3e + languageName: node + linkType: hard + "detect-libc@npm:^2.0.0": version: 2.0.1 resolution: "detect-libc@npm:2.0.1" @@ -30110,6 +30118,22 @@ __metadata: languageName: node linkType: hard +"glob@npm:^11.0.1": + version: 11.0.1 + resolution: "glob@npm:11.0.1" + dependencies: + foreground-child: ^3.1.0 + jackspeak: ^4.0.1 + minimatch: ^10.0.0 + minipass: ^7.1.2 + package-json-from-dist: ^1.0.0 + path-scurry: ^2.0.0 + bin: + glob: dist/esm/bin.mjs + checksum: ffbbafe1d2dae2fa68f190ac76df7254e840b27f59df34129fd658bd9da0c50b538d144eb0962dc7fa71cdaccf3fe108f045d4a15b3f5815e465749a6bf00965 + languageName: node + linkType: hard + "glob@npm:^7.0.0, glob@npm:^7.1.3, glob@npm:^7.1.4, glob@npm:^7.1.6, glob@npm:^7.1.7": version: 7.2.3 resolution: "glob@npm:7.2.3" @@ -32656,6 +32680,15 @@ __metadata: languageName: node linkType: hard +"jackspeak@npm:^4.0.1": + version: 4.0.2 + resolution: "jackspeak@npm:4.0.2" + dependencies: + "@isaacs/cliui": ^8.0.2 + checksum: 210030029edfa1658328799ad88c3d0fc057c4cb8a069fc4137cc8d2cc4b65c9721c6e749e890f9ca77a954bb54f200f715b8896e50d330e5f3e902e72b40974 + languageName: node + linkType: hard + "jake@npm:^10.8.5": version: 10.8.5 resolution: "jake@npm:10.8.5" @@ -34305,6 +34338,116 @@ __metadata: languageName: node linkType: hard +"lightningcss-darwin-arm64@npm:1.29.1": + version: 1.29.1 + resolution: "lightningcss-darwin-arm64@npm:1.29.1" + conditions: os=darwin & cpu=arm64 + languageName: node + linkType: hard + +"lightningcss-darwin-x64@npm:1.29.1": + version: 1.29.1 + resolution: "lightningcss-darwin-x64@npm:1.29.1" + conditions: os=darwin & cpu=x64 + languageName: node + linkType: hard + +"lightningcss-freebsd-x64@npm:1.29.1": + version: 1.29.1 + resolution: "lightningcss-freebsd-x64@npm:1.29.1" + conditions: os=freebsd & cpu=x64 + languageName: node + linkType: hard + +"lightningcss-linux-arm-gnueabihf@npm:1.29.1": + version: 1.29.1 + resolution: "lightningcss-linux-arm-gnueabihf@npm:1.29.1" + conditions: os=linux & cpu=arm + languageName: node + linkType: hard + +"lightningcss-linux-arm64-gnu@npm:1.29.1": + version: 1.29.1 + resolution: "lightningcss-linux-arm64-gnu@npm:1.29.1" + conditions: os=linux & cpu=arm64 & libc=glibc + languageName: node + linkType: hard + +"lightningcss-linux-arm64-musl@npm:1.29.1": + version: 1.29.1 + resolution: "lightningcss-linux-arm64-musl@npm:1.29.1" + conditions: os=linux & cpu=arm64 & libc=musl + languageName: node + linkType: hard + +"lightningcss-linux-x64-gnu@npm:1.29.1": + version: 1.29.1 + resolution: "lightningcss-linux-x64-gnu@npm:1.29.1" + conditions: os=linux & cpu=x64 & libc=glibc + languageName: node + linkType: hard + +"lightningcss-linux-x64-musl@npm:1.29.1": + version: 1.29.1 + resolution: "lightningcss-linux-x64-musl@npm:1.29.1" + conditions: os=linux & cpu=x64 & libc=musl + languageName: node + linkType: hard + +"lightningcss-win32-arm64-msvc@npm:1.29.1": + version: 1.29.1 + resolution: "lightningcss-win32-arm64-msvc@npm:1.29.1" + conditions: os=win32 & cpu=arm64 + languageName: node + linkType: hard + +"lightningcss-win32-x64-msvc@npm:1.29.1": + version: 1.29.1 + resolution: "lightningcss-win32-x64-msvc@npm:1.29.1" + conditions: os=win32 & cpu=x64 + languageName: node + linkType: hard + +"lightningcss@npm:^1.29.1": + version: 1.29.1 + resolution: "lightningcss@npm:1.29.1" + dependencies: + detect-libc: ^1.0.3 + lightningcss-darwin-arm64: 1.29.1 + lightningcss-darwin-x64: 1.29.1 + lightningcss-freebsd-x64: 1.29.1 + lightningcss-linux-arm-gnueabihf: 1.29.1 + lightningcss-linux-arm64-gnu: 1.29.1 + lightningcss-linux-arm64-musl: 1.29.1 + lightningcss-linux-x64-gnu: 1.29.1 + lightningcss-linux-x64-musl: 1.29.1 + lightningcss-win32-arm64-msvc: 1.29.1 + lightningcss-win32-x64-msvc: 1.29.1 + dependenciesMeta: + lightningcss-darwin-arm64: + optional: true + lightningcss-darwin-x64: + optional: true + lightningcss-freebsd-x64: + optional: true + lightningcss-linux-arm-gnueabihf: + optional: true + lightningcss-linux-arm64-gnu: + optional: true + lightningcss-linux-arm64-musl: + optional: true + lightningcss-linux-x64-gnu: + optional: true + lightningcss-linux-x64-musl: + optional: true + lightningcss-win32-arm64-msvc: + optional: true + lightningcss-win32-x64-msvc: + optional: true + checksum: d1c4dba66dfe7f6a76532bdb84c35742bee61149550e5eb5b0e84e282f21aecd335f917ca9619bb7ca95fc1eb3092dc7e22f2c16b01e9a0ee472b76452343cce + languageName: node + linkType: hard + "lilconfig@npm:^2.0.3": version: 2.1.0 resolution: "lilconfig@npm:2.1.0" @@ -34873,6 +35016,13 @@ __metadata: languageName: node linkType: hard +"lru-cache@npm:^11.0.0": + version: 11.0.2 + resolution: "lru-cache@npm:11.0.2" + checksum: f9c27c58919a30f42834de9444de9f75bcbbb802c459239f96dd449ad880d8f9a42f51556d13659864dc94ab2dbded9c4a4f42a3e25a45b6da01bb86111224df + languageName: node + linkType: hard + "lru-cache@npm:^5.1.1": version: 5.1.1 resolution: "lru-cache@npm:5.1.1" @@ -36057,6 +36207,15 @@ __metadata: languageName: node linkType: hard +"minimatch@npm:^10.0.0": + version: 10.0.1 + resolution: "minimatch@npm:10.0.1" + dependencies: + brace-expansion: ^2.0.1 + checksum: f5b63c2f30606091a057c5f679b067f84a2cd0ffbd2dbc9143bda850afd353c7be81949ff11ae0c86988f07390eeca64efd7143ee05a0dab37f6c6b38a2ebb6c + languageName: node + linkType: hard + "minimatch@npm:^5.0.1, minimatch@npm:^5.1.0": version: 5.1.6 resolution: "minimatch@npm:5.1.6" @@ -38522,6 +38681,16 @@ __metadata: languageName: node linkType: hard +"path-scurry@npm:^2.0.0": + version: 2.0.0 + resolution: "path-scurry@npm:2.0.0" + dependencies: + lru-cache: ^11.0.0 + minipass: ^7.1.2 + checksum: 9953ce3857f7e0796b187a7066eede63864b7e1dfc14bf0484249801a5ab9afb90d9a58fc533ebb1b552d23767df8aa6a2c6c62caf3f8a65f6ce336a97bbb484 + languageName: node + linkType: hard + "path-to-regexp@npm:0.1.12": version: 0.1.12 resolution: "path-to-regexp@npm:0.1.12" @@ -43380,11 +43549,11 @@ __metadata: languageName: node linkType: hard -"storybook@npm:^8.4.7": - version: 8.4.7 - resolution: "storybook@npm:8.4.7" +"storybook@npm:^8.5.0": + version: 8.5.0 + resolution: "storybook@npm:8.5.0" dependencies: - "@storybook/core": 8.4.7 + "@storybook/core": 8.5.0 peerDependencies: prettier: ^2 || ^3 peerDependenciesMeta: @@ -43394,7 +43563,7 @@ __metadata: getstorybook: ./bin/index.cjs sb: ./bin/index.cjs storybook: ./bin/index.cjs - checksum: 6cd44f8d51b68f2c2363d5e996bc8bf1e47a5acc2050da351d0fb49acd3d99ed093eef1b148145a1af9c08ead8592a87ee569c4456941a37dc374f9f21ea45c3 + checksum: 1557e9397a663b21221cdbea616461897cd6a6a3387d8e5f8c0a6dd7a1b6c0f73ba358fbed9d5aa747375546be1694bf7b860d1240f10951c08bd5915fca3a12 languageName: node linkType: hard