From 3919813200242b5a7ca663273b2ba8a787cb595e Mon Sep 17 00:00:00 2001 From: Einar Date: Sun, 16 Aug 2026 17:16:10 +0200 Subject: [PATCH 1/3] Move the Scene JavaScript packages to PrimeReact 11 and Components 3.0.0 PrimeReact 11 ships 80 modules where 10.9.8 shipped 117, is compositional rather than monolithic, and ships no CSS at all. All four consuming packages have to move together, so this is one change. - Peer ranges move to primereact ^11.0.0, primeicons ^8.0.0 and @cratis/components ^3.0.0, and each package now declares @primereact/core and @primereact/headless where it imports them directly. The old ranges are what blocked downstream consumers from upgrading. - 45 abstract names keep their component, 13 follow a rename, 2 are expressed over @primereact/headless hooks, and multiSelect is re-expressed over Select's `multiple`. - 14 names lost their component with no equivalent, so the package now owns a replacement for each: menubar, megaMenu, tieredMenu, panelMenu, tabMenu, steps, dock, splitButton, confirmDialog, column, treeSelect, blockUI, scrollTop and image. - cascadeSelect, inputMask, treeTable and virtualScroller are dropped from the manifest and the registry together; v11 removed them with no equivalent and no headless hook, and a faithful rebuild of each is a component in its own right. The manifest declares 83 names where it declared 87. - MenuItem and TreeNode are Scene's own types now. primereact/menuitem and primereact/treenode are gone, and the authored `{ label, icon, items }` shape was always Scene's vocabulary rather than PrimeReact's. - The theme layer is rebuilt on @primeuix/themes presets. A v10 theme was a compiled stylesheet, so switching meant swapping a ; a v11 theme is a preset object handed to PrimeReactProvider, so applyPrimeReactTheme and primeReactThemeStylesheet are gone and usePrimeReactTheme returns a value instead of performing a DOM side effect. Nothing is fetched, so a theme can no longer 404 or flash unstyled on switch. - The 25 v10 themes become 24 across the four preset families, with token values generated by resolving each preset rather than transcribed by hand. Their license is recorded as PrimeUI Commercial, not MIT. - The Scene token bridge got smaller: v11 emits one systematic --p-* namespace where v10 had an ad-hoc vocabulary that could only be learned by reading compiled stylesheets. - Sidebar is Drawer. v11 gives the name Sidebar to a new app-shell primitive, so a name-preserving port compiles and silently swaps an overlay for a shell. Both sites - the sidebar adapter and the default blueprint's ConfigPanel - are on primereact/drawer. - PrimeReactProvider is mandatory in v11: every component throws without it rather than falling back to a default configuration. Four specs and three Storybook previews now supply one. - Removes two build workarounds that Components 3.0.0 made unnecessary: the esbuild cssMinify override, and the vitest deps.inline entry for the CSS that no longer sits in the JavaScript module graph. Co-Authored-By: Claude Opus 5 (1M context) --- .../blueprint.components/.storybook/main.ts | 7 - .../.storybook/preview.tsx | 29 +- .../when_rendering_a_gallery_screen.tsx | 17 +- .../when_resolving_its_dependencies.ts | 12 +- .../blueprint.components/package.json | 20 +- .../blueprint.components/vite.config.mts | 13 +- .../blueprint.default/.storybook/preview.ts | 20 - .../blueprint.default/.storybook/preview.tsx | 44 ++ .../when_rendering_a_gallery_screen.tsx | 11 +- .../JavaScript/blueprint.default/package.json | 16 +- .../blueprint.default/shell/Breadcrumb.tsx | 52 +- .../blueprint.default/shell/ConfigPanel.tsx | 133 ++-- .../blueprint.default/shell/MenuEntry.ts | 27 + .../blueprint.default/shell/Sidebar.tsx | 9 +- .../blueprint.default/shell/Topbar.tsx | 9 +- .../blueprint.default/shell/UserMenu.tsx | 49 +- .../blueprint.default/shell/index.ts | 1 + .../blueprint.default/shell/layout.css | 10 +- .../JavaScript/components/.storybook/main.ts | 6 - .../components/.storybook/preview.tsx | 41 +- .../components/common/SceneDropdown.tsx | 13 +- .../components/cratisComponentsPackage.ts | 32 +- .../components/data/SceneDataTable.tsx | 9 +- .../data/SceneObservableDataTable.tsx | 7 +- .../components/dialogs/SceneCommandDialog.tsx | 12 +- .../components/dialogs/SceneDialog.tsx | 14 +- .../when_navigating_back_up_the_trail.tsx | 14 +- .../when_resolving_its_dependencies.ts | 22 +- .../forms/fields/SceneChipsField.tsx | 7 +- .../forms/fields/SceneMultiSelectField.tsx | 14 +- Source/JavaScript/components/package.json | 18 +- .../components/pages/SceneDataPage.tsx | 9 +- Source/JavaScript/components/vite.config.mts | 5 - .../primereact/.storybook/preview.ts | 22 - .../primereact/.storybook/preview.tsx | 44 ++ Source/JavaScript/primereact/MenuItem.ts | 57 ++ Source/JavaScript/primereact/TreeNode.ts | 68 ++ .../button/ButtonGallery.stories.tsx | 2 +- .../primereact/button/PrimeButton.tsx | 32 +- .../primereact/button/PrimeButtonGroup.tsx | 5 +- .../primereact/button/PrimeSpeedDial.tsx | 28 +- .../primereact/button/PrimeSplitButton.tsx | 16 +- .../primereact/button/SplitButton.tsx | 135 ++++ Source/JavaScript/primereact/button/index.ts | 1 + Source/JavaScript/primereact/data/Column.tsx | 62 ++ .../primereact/data/ColumnDefinition.ts | 11 +- .../primereact/data/DataGallery.stories.tsx | 5 - .../JavaScript/primereact/data/Pagination.tsx | 82 ++ .../primereact/data/PrimeColumn.tsx | 24 +- .../primereact/data/PrimeDataTable.tsx | 127 +++- .../primereact/data/PrimeDataView.tsx | 45 +- .../primereact/data/PrimeOrderList.tsx | 67 +- .../data/PrimeOrganizationChart.tsx | 36 +- .../primereact/data/PrimePaginator.tsx | 30 +- .../primereact/data/PrimePickList.tsx | 75 +- .../primereact/data/PrimeTimeline.tsx | 63 +- .../JavaScript/primereact/data/PrimeTree.tsx | 35 +- .../primereact/data/PrimeTreeTable.tsx | 32 - .../primereact/data/PrimeVirtualScroller.tsx | 31 - .../primereact/data/columnDefinitions.ts | 8 +- Source/JavaScript/primereact/data/index.ts | 3 +- .../primereact/data/primeTreeNodes.ts | 68 ++ .../primereact/data/selectOptions.ts | 29 + .../when_swapping_the_theme_stylesheet.ts | 81 -- .../for_menuItems/when_converting_entries.ts | 2 +- ...hen_rendering_every_declared_component.tsx | 44 +- .../when_resolving_a_preset.ts | 49 ++ .../when_checking_attribution.ts | 12 +- .../when_checking_the_token_vocabulary.ts | 25 +- .../when_resolving_a_theme_stylesheet.ts | 22 - .../primereact/form/FormGallery.stories.tsx | 6 +- .../primereact/form/PrimeAutoComplete.tsx | 52 +- .../primereact/form/PrimeCalendar.tsx | 71 +- .../primereact/form/PrimeCascadeSelect.tsx | 31 - .../primereact/form/PrimeCheckbox.tsx | 16 +- .../JavaScript/primereact/form/PrimeChips.tsx | 38 +- .../primereact/form/PrimeColorPicker.tsx | 68 +- .../primereact/form/PrimeDropdown.tsx | 40 +- .../primereact/form/PrimeIconField.tsx | 17 +- .../primereact/form/PrimeInputMask.tsx | 27 - .../primereact/form/PrimeInputNumber.tsx | 24 +- .../primereact/form/PrimeInputTextarea.tsx | 14 +- .../JavaScript/primereact/form/PrimeKnob.tsx | 16 +- .../primereact/form/PrimeListBox.tsx | 20 +- .../primereact/form/PrimeMultiSelect.tsx | 45 +- .../primereact/form/PrimePassword.tsx | 18 +- .../primereact/form/PrimeRadioButton.tsx | 18 +- .../primereact/form/PrimeRating.tsx | 29 +- .../primereact/form/PrimeSelectButton.tsx | 26 +- .../primereact/form/PrimeSlider.tsx | 17 +- .../primereact/form/PrimeToggleSwitch.tsx | 25 +- .../primereact/form/PrimeTreeSelect.tsx | 28 +- .../JavaScript/primereact/form/TreeSelect.tsx | 158 ++++ Source/JavaScript/primereact/form/index.ts | 3 +- Source/JavaScript/primereact/index.ts | 2 + Source/JavaScript/primereact/media/Image.tsx | 104 +++ .../primereact/media/MediaGallery.stories.tsx | 2 +- .../primereact/media/PrimeCarousel.tsx | 49 +- .../primereact/media/PrimeGalleria.tsx | 61 +- .../primereact/media/PrimeImage.tsx | 8 +- Source/JavaScript/primereact/media/index.ts | 1 + Source/JavaScript/primereact/menu/Dock.tsx | 109 +++ .../primereact/menu/DockPosition.ts | 32 + .../JavaScript/primereact/menu/MegaMenu.tsx | 138 ++++ .../primereact/menu/MenuGallery.stories.tsx | 34 +- .../primereact/menu/MenuItemAction.tsx | 92 +++ .../primereact/menu/MenuItemContent.tsx | 36 + Source/JavaScript/primereact/menu/Menubar.tsx | 149 ++++ .../JavaScript/primereact/menu/PanelMenu.tsx | 107 +++ .../primereact/menu/PrimeBreadcrumb.tsx | 69 +- .../primereact/menu/PrimeContextMenu.tsx | 52 +- .../JavaScript/primereact/menu/PrimeDock.tsx | 39 +- .../primereact/menu/PrimeMegaMenu.tsx | 21 +- .../JavaScript/primereact/menu/PrimeMenu.tsx | 65 +- .../primereact/menu/PrimeMenubar.tsx | 9 +- .../primereact/menu/PrimePanelMenu.tsx | 11 +- .../JavaScript/primereact/menu/PrimeSteps.tsx | 28 +- .../primereact/menu/PrimeTabMenu.tsx | 21 +- .../primereact/menu/PrimeTieredMenu.tsx | 8 +- Source/JavaScript/primereact/menu/Steps.tsx | 79 ++ Source/JavaScript/primereact/menu/TabMenu.tsx | 72 ++ .../JavaScript/primereact/menu/TieredMenu.tsx | 136 ++++ Source/JavaScript/primereact/menu/index.ts | 10 + Source/JavaScript/primereact/menuItems.ts | 2 +- .../messages/MessageGallery.stories.tsx | 2 +- .../messages/PrimeInlineMessage.tsx | 42 +- .../primereact/messages/PrimeMessage.tsx | 42 +- .../primereact/messages/PrimeToast.tsx | 92 ++- Source/JavaScript/primereact/misc/BlockUI.tsx | 51 ++ .../primereact/misc/MiscGallery.stories.tsx | 2 +- .../primereact/misc/PrimeAvatar.tsx | 23 +- .../JavaScript/primereact/misc/PrimeBadge.tsx | 18 +- .../primereact/misc/PrimeBlockUI.tsx | 16 +- .../JavaScript/primereact/misc/PrimeChip.tsx | 34 +- .../primereact/misc/PrimeInplace.tsx | 22 +- .../primereact/misc/PrimeProgressBar.tsx | 18 +- .../primereact/misc/PrimeProgressSpinner.tsx | 15 +- .../primereact/misc/PrimeScrollTop.tsx | 24 +- .../primereact/misc/PrimeSkeleton.tsx | 4 + .../JavaScript/primereact/misc/PrimeTag.tsx | 19 +- .../primereact/misc/PrimeTerminal.tsx | 27 +- .../JavaScript/primereact/misc/ScrollTop.tsx | 81 ++ Source/JavaScript/primereact/misc/index.ts | 2 + .../primereact/overlay/ConfirmDialog.tsx | 135 ++++ .../overlay/OverlayGallery.stories.tsx | 2 +- .../primereact/overlay/PrimeConfirmDialog.tsx | 25 +- .../primereact/overlay/PrimeDialog.tsx | 43 +- .../primereact/overlay/PrimeOverlayPanel.tsx | 28 +- .../primereact/overlay/PrimeSidebar.tsx | 50 +- .../primereact/overlay/PrimeTooltip.tsx | 34 +- Source/JavaScript/primereact/overlay/index.ts | 1 + Source/JavaScript/primereact/package.json | 20 +- .../primereact/panel/PanelGallery.stories.tsx | 2 +- .../primereact/panel/PrimeAccordion.tsx | 38 +- .../JavaScript/primereact/panel/PrimeCard.tsx | 21 +- .../primereact/panel/PrimeDivider.tsx | 7 +- .../primereact/panel/PrimeFieldset.tsx | 28 +- .../primereact/panel/PrimePanel.tsx | 33 +- .../primereact/panel/PrimeScrollPanel.tsx | 24 +- .../primereact/panel/PrimeSplitter.tsx | 31 +- .../primereact/panel/PrimeStepper.tsx | 77 +- .../primereact/panel/PrimeTabView.tsx | 38 +- .../primereact/panel/PrimeToolbar.tsx | 14 +- .../primereact/primeReactComponents.ts | 8 - .../primereact/primeReactPackage.ts | 15 +- .../JavaScript/primereact/primeReactTheme.css | 89 ++- .../primereact/screen/PrimeAction.tsx | 26 +- .../primereact/screen/PrimeSummary.tsx | 49 +- .../primereact/theme/PrimeReactThemeFamily.ts | 37 + .../primereact/theme/applyPrimeReactTheme.ts | 52 -- Source/JavaScript/primereact/theme/index.ts | 4 +- .../primereact/theme/primeReactThemePreset.ts | 83 ++ .../theme/primeReactThemeStylesheet.ts | 32 - .../primereact/theme/primeReactThemes.ts | 55 +- .../primereact/theme/themePresets.ts | 717 ++++++++++-------- .../primereact/theme/usePrimeReactTheme.ts | 98 ++- Source/JavaScript/primereact/treeNodes.ts | 2 +- 177 files changed, 5363 insertions(+), 1622 deletions(-) delete mode 100644 Source/JavaScript/blueprint.default/.storybook/preview.ts create mode 100644 Source/JavaScript/blueprint.default/.storybook/preview.tsx create mode 100644 Source/JavaScript/blueprint.default/shell/MenuEntry.ts delete mode 100644 Source/JavaScript/primereact/.storybook/preview.ts create mode 100644 Source/JavaScript/primereact/.storybook/preview.tsx create mode 100644 Source/JavaScript/primereact/MenuItem.ts create mode 100644 Source/JavaScript/primereact/TreeNode.ts create mode 100644 Source/JavaScript/primereact/button/SplitButton.tsx create mode 100644 Source/JavaScript/primereact/data/Column.tsx create mode 100644 Source/JavaScript/primereact/data/Pagination.tsx delete mode 100644 Source/JavaScript/primereact/data/PrimeTreeTable.tsx delete mode 100644 Source/JavaScript/primereact/data/PrimeVirtualScroller.tsx create mode 100644 Source/JavaScript/primereact/data/primeTreeNodes.ts create mode 100644 Source/JavaScript/primereact/data/selectOptions.ts delete mode 100644 Source/JavaScript/primereact/for_applyPrimeReactTheme/when_swapping_the_theme_stylesheet.ts create mode 100644 Source/JavaScript/primereact/for_primeReactThemePreset/when_resolving_a_preset.ts delete mode 100644 Source/JavaScript/primereact/for_primeReactThemes/when_resolving_a_theme_stylesheet.ts delete mode 100644 Source/JavaScript/primereact/form/PrimeCascadeSelect.tsx delete mode 100644 Source/JavaScript/primereact/form/PrimeInputMask.tsx create mode 100644 Source/JavaScript/primereact/form/TreeSelect.tsx create mode 100644 Source/JavaScript/primereact/media/Image.tsx create mode 100644 Source/JavaScript/primereact/menu/Dock.tsx create mode 100644 Source/JavaScript/primereact/menu/DockPosition.ts create mode 100644 Source/JavaScript/primereact/menu/MegaMenu.tsx create mode 100644 Source/JavaScript/primereact/menu/MenuItemAction.tsx create mode 100644 Source/JavaScript/primereact/menu/MenuItemContent.tsx create mode 100644 Source/JavaScript/primereact/menu/Menubar.tsx create mode 100644 Source/JavaScript/primereact/menu/PanelMenu.tsx create mode 100644 Source/JavaScript/primereact/menu/Steps.tsx create mode 100644 Source/JavaScript/primereact/menu/TabMenu.tsx create mode 100644 Source/JavaScript/primereact/menu/TieredMenu.tsx create mode 100644 Source/JavaScript/primereact/misc/BlockUI.tsx create mode 100644 Source/JavaScript/primereact/misc/ScrollTop.tsx create mode 100644 Source/JavaScript/primereact/overlay/ConfirmDialog.tsx create mode 100644 Source/JavaScript/primereact/theme/PrimeReactThemeFamily.ts delete mode 100644 Source/JavaScript/primereact/theme/applyPrimeReactTheme.ts create mode 100644 Source/JavaScript/primereact/theme/primeReactThemePreset.ts delete mode 100644 Source/JavaScript/primereact/theme/primeReactThemeStylesheet.ts diff --git a/Source/JavaScript/blueprint.components/.storybook/main.ts b/Source/JavaScript/blueprint.components/.storybook/main.ts index b781dd6..0226277 100644 --- a/Source/JavaScript/blueprint.components/.storybook/main.ts +++ b/Source/JavaScript/blueprint.components/.storybook/main.ts @@ -44,13 +44,6 @@ const config: StorybookConfig = { ...(config.build.rollupOptions ?? {}), external: [/^@cratis\/arc/, '@cratis/fundamentals'], }; - // Vite 8 minifies CSS with lightningcss, which rejects the whole bundle over one invalid file: - // `@cratis/components` ships `dist/esm/TimeMachine/Properties.css` with `//` line comments, which - // are not CSS. esbuild's minifier tolerates them. This blueprint is the first package here to place - // a `timeMachine` on a page, so it is the first to pull that file in. The same workaround is in the - // Cratis Components package's own preview tooling, and both come out once that file ships with - // `/* */` comments. - config.build.cssMinify = 'esbuild'; return config; }, }; diff --git a/Source/JavaScript/blueprint.components/.storybook/preview.tsx b/Source/JavaScript/blueprint.components/.storybook/preview.tsx index 4484ba4..e3823a3 100644 --- a/Source/JavaScript/blueprint.components/.storybook/preview.tsx +++ b/Source/JavaScript/blueprint.components/.storybook/preview.tsx @@ -4,19 +4,30 @@ import type { Preview } from '@storybook/react'; import { CratisComponentsProvider } from '@cratis/components/Common'; -// The stylesheet layers a page in this blueprint needs, in the order they resolve. PrimeReact 10 ships -// every widget's *structural* CSS inside its theme file, so without a theme the wrapped widgets render as -// bare HTML. `@cratis/components`' own sheet adds its Tailwind utilities and the `--cratis-*` token layer, -// the Scene package's bridge puts Scene's `--scene-*` tokens in front of that, and the default blueprint's +// The stylesheet layers a page in this blueprint needs, in the order they resolve. PrimeReact 11 ships +// zero CSS - `primereact/resources/themes/*` does not exist any more - and `@cratis/components` 3.0.0 took +// its own CSS out of the JavaScript module graph, so every sheet below is an explicit import rather than +// something a bundler injects behind an `import './Foo.css'`. +// +// `tokens` defines the `--cratis-*` layer, `styles` is every component stylesheet plus the Tailwind +// utilities that consume it, and `theme` is the Cratis-authored MIT baseline that assigns those tokens +// actual values. That order matters: the last two both read the first. `theme` is what gives this preview +// a look at all, because with no `@primeuix/themes` preset there are no `--p-*` values for the tokens to +// resolve to - which also means the raw PrimeReact widgets the default blueprint's shell renders come out +// structural rather than styled. That is the honest picture of an unstyled-first host, and this package +// takes no dependency on a preset to paper over it. +// +// The Scene package's bridge puts Scene's `--scene-*` tokens in front of that, and the default blueprint's // `layout.css` draws the shell every one of these pages sits inside - which is the sheet this package does // not have and does not want, because the shell is not its. // // The last two are reached by relative path rather than through their packages' `./styles` export, // because `main.ts` aliases those package names to their sources and a Vite string alias matches by // prefix - `@cratis/scene.components/styles` would be rewritten into a path inside `index.ts`. -import 'primereact/resources/themes/lara-light-blue/theme.css'; -import 'primeicons/primeicons.css'; +import '@cratis/components/tokens'; import '@cratis/components/styles'; +import '@cratis/components/theme'; +import 'primeicons/primeicons.css'; import '../../components/theme/sceneTokenBridge.css'; import '../../blueprint.default/shell/layout.css'; @@ -25,6 +36,12 @@ import '../../blueprint.default/shell/layout.css'; * PrimeReact's. Without it the wrapped components fall back to PrimeReact's defaults rather than Cratis', * so a story would show something subtly different from what an application renders - which defeats the * point of having stories at all. + * + * On PrimeReact 11 it is also load-bearing rather than merely advisable: every v11 component resolves its + * configuration, theme and z-index registry through `PrimeReactProvider`, which this wraps, and throws + * outright without one. These pages sit inside the default blueprint's shell, which reaches for PrimeReact + * directly in five places, so removing this decorator would not degrade the stories - it would stop them + * rendering. */ const preview: Preview = { decorators: [ diff --git a/Source/JavaScript/blueprint.components/for_ArcPageHeader/when_rendering_a_gallery_screen.tsx b/Source/JavaScript/blueprint.components/for_ArcPageHeader/when_rendering_a_gallery_screen.tsx index 3110d8a..027b242 100644 --- a/Source/JavaScript/blueprint.components/for_ArcPageHeader/when_rendering_a_gallery_screen.tsx +++ b/Source/JavaScript/blueprint.components/for_ArcPageHeader/when_rendering_a_gallery_screen.tsx @@ -2,6 +2,7 @@ // Licensed under the MIT license. See LICENSE file in the project root for full license information. import { render, screen } from '@testing-library/react'; +import { PrimeReactProvider } from '@primereact/core'; import { SceneElement } from '@cratis/scene.model'; import { SceneElementView } from '@cratis/scene.react'; import { clearBindings, registerQuery } from '@cratis/scene.components'; @@ -11,13 +12,19 @@ import { SampleBindingName, arcPageHeader } from '../templates'; class AllInvoices {} +// These pages render inside the default blueprint's shell, which reaches for PrimeReact directly. Every +// PrimeReact 11 component resolves its configuration through `PrimeReactProvider` and throws without one, +// so the provider is what makes the render happen at all rather than a styling nicety. No preset is handed +// over: these specs assert structure and text, and a theme would only add runtime CSS nothing here reads. function renderElement(element: SceneElement) { render( - undefined} - />, + + undefined} + /> + , ); } diff --git a/Source/JavaScript/blueprint.components/for_componentsBlueprint/when_resolving_its_dependencies.ts b/Source/JavaScript/blueprint.components/for_componentsBlueprint/when_resolving_its_dependencies.ts index b49de97..3548b84 100644 --- a/Source/JavaScript/blueprint.components/for_componentsBlueprint/when_resolving_its_dependencies.ts +++ b/Source/JavaScript/blueprint.components/for_componentsBlueprint/when_resolving_its_dependencies.ts @@ -21,10 +21,18 @@ const tailwind: ScenePackage = { themes: [], }; -/** The base component library both of this blueprint's dependencies are written against, at the version this repository pins. */ +/** + * The base component library both of this blueprint's dependencies are written against, at the version + * this repository pins. + * + * The version is load-bearing rather than incidental: `Cratis.Components` declares a required range on + * `PrimeReact`, and this fixture is what that range is resolved against. It moved to 11.1.0 with the + * PrimeReact 11 migration, and a stale 10.x here fails the selection as a version conflict - which is the + * spec doing its job, not a spec to be relaxed. + */ const primeReact: ScenePackage = { name: 'PrimeReact', - version: '10.9.8', + version: '11.1.0', kind: PackageKind.ComponentLibrary, dependencies: [{ name: 'Tailwind' }], components: ['column', 'table', 'dialog'], diff --git a/Source/JavaScript/blueprint.components/package.json b/Source/JavaScript/blueprint.components/package.json index 48103d2..92f2275 100644 --- a/Source/JavaScript/blueprint.components/package.json +++ b/Source/JavaScript/blueprint.components/package.json @@ -40,7 +40,7 @@ "build-storybook": "storybook build" }, "dependencies": { - "@cratis/components": "^2.8.1", + "@cratis/components": "^3.0.0", "@cratis/scene.blueprint.default": "1.0.0", "@cratis/scene.components": "1.0.0", "@cratis/scene.engine": "1.0.0", @@ -48,24 +48,30 @@ "@cratis/scene.react": "1.0.0" }, "devDependencies": { - "@cratis/components": "^2.8.1", + "@cratis/components": "^3.0.0", "@cratis/scene.blueprint.default": "1.0.0", "@cratis/scene.components": "1.0.0", "@cratis/scene.engine": "1.0.0", "@cratis/scene.model": "1.0.0", "@cratis/scene.react": "1.0.0", + "@primereact/core": "11.1.0", + "@primereact/headless": "11.1.0", "@storybook/addon-links": "^10.4.1", "@storybook/react": "^10.4.1", "@storybook/react-vite": "^10.4.1", - "primeicons": "^7.0.0", - "primereact": "10.9.8", + "primeicons": "8.0.0", + "primereact": "11.1.0", "react": "^19.2.6", "react-dom": "^19.2.6", "storybook": "^10.4.1" }, "peerDependencies": { - "primereact": "^10.9.0", - "react": "^18.0.0 || ^19.0.0", - "react-dom": "^18.0.0 || ^19.0.0" + "@cratis/components": "^3.0.0", + "@primereact/core": "^11.0.0", + "@primereact/headless": "^11.0.0", + "primeicons": "^8.0.0", + "primereact": "^11.0.0", + "react": "^19.0.0", + "react-dom": "^19.0.0" } } diff --git a/Source/JavaScript/blueprint.components/vite.config.mts b/Source/JavaScript/blueprint.components/vite.config.mts index f816ec9..8bdff25 100644 --- a/Source/JavaScript/blueprint.components/vite.config.mts +++ b/Source/JavaScript/blueprint.components/vite.config.mts @@ -14,11 +14,14 @@ config.plugins.push(react()); config.test.environment = 'jsdom'; config.test.include = [...config.test.include, '**/for_*/when_*/**/*.tsx', '**/for_*/**/when_*.tsx']; -// `@cratis/components` and PrimeReact are published as ESM that still uses directory imports -// (`primereact/api`), which Node's own ESM resolver rejects - and this package reaches them transitively, -// through `@cratis/scene.components`, so the whole `@cratis` scope has to go through Vite's resolver -// rather than only the leaf that causes it. `@cratis/scene.components` matches this package's specs -// import it directly, and every Scene package it pulls in behind that. +// The `@cratis` scope has to go through Vite's resolver rather than Node's own ESM loader. The Scene +// packages publish `dist/esm/*.js` without declaring `"type": "module"`, so Node reads those files as +// CommonJS and chokes on their `import`/`export` syntax - and this package's specs import +// `@cratis/scene.components` directly, plus every Scene package it pulls in behind that. +// +// PrimeReact is kept on the list although the reason it was added for - v10's directory imports, which +// Node's resolver rejected - is gone: v11 declares `"type": "module"` and a complete subpath `exports` +// map, so Node can load it unaided. Narrowing this is a separate change with its own test run. config.test.server = { deps: { inline: [/@cratis[\\/]/, /primereact/] } }; export default defineConfig(config); diff --git a/Source/JavaScript/blueprint.default/.storybook/preview.ts b/Source/JavaScript/blueprint.default/.storybook/preview.ts deleted file mode 100644 index e2c21fa..0000000 --- a/Source/JavaScript/blueprint.default/.storybook/preview.ts +++ /dev/null @@ -1,20 +0,0 @@ -// Copyright (c) Cratis. All rights reserved. -// Licensed under the MIT license. See LICENSE file in the project root for full license information. - -import type { Preview } from '@storybook/react'; - -// PrimeReact 10 ships its base styles and one theme per file, and the shell's own stylesheet layers on -// top of them. Loading them here rather than from a story keeps every story looking the same and matches -// what a host does once, at its entry point. -import 'primereact/resources/primereact.min.css'; -import 'primereact/resources/themes/lara-light-indigo/theme.css'; -import 'primeicons/primeicons.css'; -import '../shell/layout.css'; - -const preview: Preview = { - parameters: { - controls: { matchers: { color: /(background|color)$/i, date: /Date$/i } }, - }, -}; - -export default preview; diff --git a/Source/JavaScript/blueprint.default/.storybook/preview.tsx b/Source/JavaScript/blueprint.default/.storybook/preview.tsx new file mode 100644 index 0000000..3f1e767 --- /dev/null +++ b/Source/JavaScript/blueprint.default/.storybook/preview.tsx @@ -0,0 +1,44 @@ +// Copyright (c) Cratis. All rights reserved. +// Licensed under the MIT license. See LICENSE file in the project root for full license information. + +import type { Preview } from '@storybook/react'; +import { PrimeReactProvider } from '@primereact/core'; +import Lara from '@primeuix/themes/lara'; + +// PrimeReact 11 ships zero CSS - there is no `primereact/resources` directory to import a base sheet or a +// theme from any more. A look is a preset: a plain JavaScript token object that `@primeuix/styled` turns +// into `--p-*` custom properties at runtime when the provider is handed one. Lara is the same family this +// preview used to load as `lara-light-indigo`, so the stories keep the look they were written against. +// +// `primeicons` is still a stylesheet, and the shell's own sheet still layers on top of both. Loading them +// here rather than from a story keeps every story looking the same and matches what a host does once, at +// its entry point. +import 'primeicons/primeicons.css'; +import '../shell/layout.css'; + +/** + * Every story renders inside `PrimeReactProvider`, because PrimeReact 11 requires it: each component + * resolves its configuration, theme and z-index registry through that context and throws without one. The + * shell reaches for PrimeReact in five places - the topbar toggle, the sidebar pin, the user menu, the + * breadcrumb and the configurator's drawer - so this is not optional decoration, it is what makes the + * stories render at all. + * + * No `license` is supplied here: PrimeReact 11 is commercially licensed and its provider verifies a key on + * mount, so a preview without one logs a warning and shows PrimeTek's banner. That is the honest state of + * an unlicensed development preview rather than something to hide - a host supplies its own key through + * the same prop. + */ +const preview: Preview = { + decorators: [ + Story => ( + + + + ), + ], + parameters: { + controls: { matchers: { color: /(background|color)$/i, date: /Date$/i } }, + }, +}; + +export default preview; diff --git a/Source/JavaScript/blueprint.default/for_AppShell/when_rendering_a_gallery_screen.tsx b/Source/JavaScript/blueprint.default/for_AppShell/when_rendering_a_gallery_screen.tsx index 481f87f..942afad 100644 --- a/Source/JavaScript/blueprint.default/for_AppShell/when_rendering_a_gallery_screen.tsx +++ b/Source/JavaScript/blueprint.default/for_AppShell/when_rendering_a_gallery_screen.tsx @@ -2,16 +2,25 @@ // Licensed under the MIT license. See LICENSE file in the project root for full license information. import { render, screen } from '@testing-library/react'; +import { PrimeReactProvider } from '@primereact/core'; import { SceneElementView, coreComponents, corePackage, mergePackageRegistries } from '@cratis/scene.react'; import { defaultBlueprint } from '../defaultBlueprint'; import { composeScreenElement, galleryComponentCatalog, galleryPreviewProfile, galleryScreen, resolveElementComponentNames } from '../gallery'; const registry = mergePackageRegistries([corePackage, defaultBlueprint]); +// PrimeReact 11 components resolve their configuration through `PrimeReactProvider` and throw without +// one, and these screens render five of them - the topbar toggle, the sidebar pin, the user menu, the +// breadcrumb and the configurator's drawer. No preset is handed over: these specs assert structure and +// text, and a theme would only add runtime CSS nothing here reads. function renderGalleryScreen(name: string) { const galleryItem = galleryScreen(name)!; const element = resolveElementComponentNames(composeScreenElement(galleryItem), galleryPreviewProfile, galleryComponentCatalog); - render( undefined} />); + render( + + undefined} /> + , + ); } function has(selector: string): boolean { diff --git a/Source/JavaScript/blueprint.default/package.json b/Source/JavaScript/blueprint.default/package.json index 6b4c30f..264abef 100644 --- a/Source/JavaScript/blueprint.default/package.json +++ b/Source/JavaScript/blueprint.default/package.json @@ -51,18 +51,24 @@ "@cratis/scene.engine": "1.0.0", "@cratis/scene.model": "1.0.0", "@cratis/scene.react": "1.0.0", + "@primereact/core": "11.1.0", + "@primereact/headless": "11.1.0", + "@primeuix/themes": "^3.0.0", "@storybook/addon-links": "^10.4.1", "@storybook/react": "^10.4.1", "@storybook/react-vite": "^10.4.1", - "primeicons": "^7.0.0", - "primereact": "10.9.8", + "primeicons": "8.0.0", + "primereact": "11.1.0", "react": "^19.2.6", "react-dom": "^19.2.6", "storybook": "^10.4.1" }, "peerDependencies": { - "primereact": "^10.9.0", - "react": "^18.0.0 || ^19.0.0", - "react-dom": "^18.0.0 || ^19.0.0" + "@primereact/core": "^11.0.0", + "@primereact/headless": "^11.0.0", + "primeicons": "^8.0.0", + "primereact": "^11.0.0", + "react": "^19.0.0", + "react-dom": "^19.0.0" } } diff --git a/Source/JavaScript/blueprint.default/shell/Breadcrumb.tsx b/Source/JavaScript/blueprint.default/shell/Breadcrumb.tsx index 520ee77..53bb610 100644 --- a/Source/JavaScript/blueprint.default/shell/Breadcrumb.tsx +++ b/Source/JavaScript/blueprint.default/shell/Breadcrumb.tsx @@ -1,23 +1,31 @@ // Copyright (c) Cratis. All rights reserved. // Licensed under the MIT license. See LICENSE file in the project root for full license information. -import { BreadCrumb } from 'primereact/breadcrumb'; -import { MenuItem as PrimeMenuItem } from 'primereact/menuitem'; +import { Fragment } from 'react'; +import { Breadcrumb as PrimeBreadcrumb } from 'primereact/breadcrumb'; import { RegisteredComponentProps } from '@cratis/scene.react'; +import { MenuEntry } from './MenuEntry'; import { readOptionalString, readRecords, recordString } from './elementProperties'; /** * The trail above the content. * - * PrimeReact's own `BreadCrumb` does the rendering rather than hand-written markup, because a breadcrumb + * PrimeReact's own `Breadcrumb` does the rendering rather than hand-written markup, because a breadcrumb * is an ordinary component with no layout-mode behavior at all - it looks the same in every one of the - * eight modes. The shell only writes CSS where PrimeReact 10 genuinely has no answer, and this is not one - * of those places. + * eight modes. The shell only writes CSS where PrimeReact genuinely has no answer, and this is not one of + * those places: `Breadcrumb.Root` still supplies the `nav`, its `aria-label` and the list semantics, which + * is the part that is easy to get wrong by hand. + * + * What PrimeReact 11 no longer supplies is the `model` array - the component is composed now, and the + * `primereact/menuitem` type the array was made of is gone with it, which is why the trail is mapped into + * this package's own {@link MenuEntry}. The last entry is `Breadcrumb.Current` rather than a link: a trail + * whose final crumb navigates to the page already open is a link that does nothing, and it takes + * `aria-current='page'` away from the one element that should carry it. */ export function Breadcrumb({ element }: RegisteredComponentProps) { const home = readOptionalString(element, 'homeTargetScreen'); - const model = readRecords(element, 'items').map( - (item): PrimeMenuItem => ({ + const trail = readRecords(element, 'items').map( + (item): MenuEntry => ({ label: recordString(item, 'label'), url: recordString(item, 'targetScreen') ? `#/${recordString(item, 'targetScreen')}` : undefined, }), @@ -25,7 +33,35 @@ export function Breadcrumb({ element }: RegisteredComponentProps) { return (
- + + + {home && ( + + +