@cratis/scene.blueprint.components 4.9.0 → 4.11.0

package/gallery/BusinessGalleryCategory.ts

@@ -0,0 +1,12 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { ScreenTemplate } from '@cratis/scene.model';
+
+/**
+ * A categorized set of templates a business gallery can show for a scope.
+ */
+export interface BusinessGalleryCategory {
+    category: string;
+    templates: ScreenTemplate[];
+}

package/gallery/GalleryScreenPreview.tsx

@@ -2,12 +2,16 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import { useMemo } from 'react';
-import { ComponentRegistry, SceneElementView, coreComponents } from '@cratis/scene.react';
-import { cratisComponents } from '@cratis/scene.components';
-import { LayoutConfigProvider, LayoutConfigState, LayoutThemeProvider, composeScreenElement, defaultBlueprintComponents, defaultBlueprintThemes, resolveElementComponentNames } from '@cratis/scene.blueprint.default';
+import { PrimeReactProvider } from '@primereact/core';
+import { PackageKind } from '@cratis/scene.model';
+import { ComponentRegistry, PackageHostView, RegisteredComponentProps, ScenePackageBundle, corePackage, resolvePackageHost } from '@cratis/scene.react';
+import { cratisComponentsPackage } from '@cratis/scene.components';
+import { defaultBlueprint, LayoutConfigProvider, LayoutConfigState, LayoutThemeProvider, composeScreenElement, defaultBlueprintThemes, resolveElementComponentNames } from '@cratis/scene.blueprint.default';
 import { componentsBlueprintComponents } from '../componentsBlueprintComponents';
-import { componentsBlueprintCatalog, componentsBlueprintProfile } from './previewProfile';
-import { componentsGalleryScreen } from './screens';
+import { componentsBlueprintName } from '../packageName';
+import { componentsDialogTemplates, componentsScreenTemplates } from '../templates';
+import { componentsBlueprintCatalog, componentsBlueprintProfile, primeReactComponentNames } from './previewProfile';
+import { componentsGalleryScreen, componentsGalleryScreens } from './screens';
 
 /**
  * The registry a preview resolves against: `core`, `Cratis.Components`, the default blueprint, and this one.
@@ -20,12 +24,66 @@ import { componentsGalleryScreen } from './screens';
  * table comes out unresolved - and it never reaches the DOM, because the table it belongs to is a
  * placeholder until a host registers its query.
  */
-export const componentsPreviewRegistry: ComponentRegistry = {
-    ...coreComponents,
-    ...cratisComponents,
-    ...defaultBlueprintComponents,
-    ...componentsBlueprintComponents,
-};
+const previewComponent = ({ element }: RegisteredComponentProps) => <span data-preview-component={element.componentName}>{String(element.properties.label ?? element.componentName)}</span>;
+
+export const componentsPreviewBundles: ScenePackageBundle[] = [
+    corePackage,
+    {
+        manifest: {
+            name: 'Tailwind',
+            version: '4.0.0',
+            kind: PackageKind.Styling,
+            dependencies: [],
+            components: [],
+            layouts: [],
+            screenTemplates: [],
+            dialogTemplates: [],
+            themes: [],
+            assets: ['styles/tailwind.css', 'fonts/inter.woff2'],
+        },
+        components: {},
+    },
+    {
+        manifest: {
+            name: 'PrimeReact',
+            version: '11.1.0',
+            kind: PackageKind.ComponentLibrary,
+            dependencies: [{ name: 'Tailwind' }],
+            components: primeReactComponentNames,
+            layouts: [],
+            screenTemplates: [],
+            dialogTemplates: [],
+            themes: [],
+        },
+        components: Object.fromEntries(primeReactComponentNames.map(name => [`PrimeReact:${name}`, previewComponent])),
+    },
+    cratisComponentsPackage,
+    defaultBlueprint,
+    {
+        manifest: {
+            name: componentsBlueprintName,
+            version: '1.0.0',
+            kind: PackageKind.Blueprint,
+            dependencies: [{ name: 'Cratis.Blueprint.Default' }, { name: 'Cratis.Components' }],
+            components: Object.keys(componentsBlueprintComponents).map(name => name.slice(`${componentsBlueprintName}:`.length)),
+            layouts: [],
+            screenTemplates: componentsScreenTemplates.map(template => template.name),
+            dialogTemplates: componentsDialogTemplates.map(template => template.name),
+            themes: [],
+        },
+        components: componentsBlueprintComponents,
+        screenTemplates: componentsScreenTemplates,
+        dialogTemplates: componentsDialogTemplates,
+        screens: componentsGalleryScreens,
+    },
+];
+
+/** Compatibility registry for callers that render individual gallery elements directly. */
+export const componentsPreviewRegistry: ComponentRegistry = resolvePackageHost({
+    profile: componentsBlueprintProfile,
+    bundles: componentsPreviewBundles,
+    policy: { allowExecutableImports: false, allowNetworkAssets: false },
+}).components;
 
 export interface GalleryScreenPreviewProps {
     /** The name of the gallery screen to boot. */
@@ -34,8 +92,8 @@ export interface GalleryScreenPreviewProps {
     /** Configuration to start from - a story pinning a layout mode, or a host restoring a session. */
     initialConfig?: Partial<LayoutConfigState>;
 
-    /** The component registry to render against. Defaults to {@link componentsPreviewRegistry}. */
-    registry?: ComponentRegistry;
+    /** The approved package set to render against. Defaults to {@link componentsPreviewBundles}. */
+    bundles?: ScenePackageBundle[];
 }
 
 /**
@@ -50,7 +108,7 @@ export interface GalleryScreenPreviewProps {
  * previewed is the default blueprint's shell. This package provides Arc-bound pages to put inside it, and
  * previewing them without the thing they were designed to sit in would prove the wrong thing.
  */
-export function GalleryScreenPreview({ screenName, initialConfig, registry = componentsPreviewRegistry }: GalleryScreenPreviewProps) {
+export function GalleryScreenPreview({ screenName, initialConfig, bundles = componentsPreviewBundles }: GalleryScreenPreviewProps) {
     const element = useMemo(() => {
         const screen = componentsGalleryScreen(screenName);
         if (!screen) {
@@ -61,10 +119,18 @@ export function GalleryScreenPreview({ screenName, initialConfig, registry = com
     }, [screenName]);
 
     return (
-        <LayoutConfigProvider initialConfig={initialConfig} storage={null}>
-            <LayoutThemeProvider themes={defaultBlueprintThemes}>
-                <SceneElementView element={element} registry={registry} resolveBinding={() => undefined} />
-            </LayoutThemeProvider>
-        </LayoutConfigProvider>
+        <PrimeReactProvider>
+            <LayoutConfigProvider initialConfig={initialConfig} storage={null}>
+                <LayoutThemeProvider themes={defaultBlueprintThemes}>
+                    <PackageHostView
+                        configuration={{
+                            profile: componentsBlueprintProfile,
+                            bundles,
+                            policy: { allowExecutableImports: false, allowNetworkAssets: false },
+                        }}
+                        element={element} />
+                </LayoutThemeProvider>
+            </LayoutConfigProvider>
+        </PrimeReactProvider>
     );
 }

package/gallery/businessGallery.ts

@@ -0,0 +1,19 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { ScreenTemplate, TemplateScope } from '@cratis/scene.model';
+import { BusinessGalleryCategory } from './BusinessGalleryCategory';
+import { componentsPageTemplates } from '../templates';
+
+/**
+ * Returns templates grouped by visible gallery category and filtered by scope metadata.
+ */
+export function businessGallery(scope: TemplateScope, templates: ScreenTemplate[] = componentsPageTemplates): BusinessGalleryCategory[] {
+    const categories = new Map<string, ScreenTemplate[]>();
+    for (const template of templates.filter(template => template.metadata?.scopes?.includes(scope))) {
+        const category = template.metadata?.category ?? 'Business / Other';
+        categories.set(category, [...(categories.get(category) ?? []), template]);
+    }
+
+    return [...categories.entries()].map(([category, categoryTemplates]) => ({ category, templates: categoryTemplates }));
+}

package/gallery/index.ts

@@ -1,6 +1,8 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
+export * from './BusinessGalleryCategory';
+export * from './businessGallery';
 export * from './navigation';
 export * from './applicationChrome';
 export * from './screens';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cratis/scene.blueprint.components",
-    "version": "4.9.0",
+    "version": "4.11.0",
     "description": "A blueprint of Arc-bound screen and dialog templates: full pages built from Cratis Components composites, so a data list, a command form or a master-detail screen is a template rather than something you assemble.",
     "keywords": [
         "cratis",
@@ -52,19 +52,19 @@
     },
     "dependencies": {
         "@cratis/components": "^4.25.0",
-        "@cratis/scene.blueprint.default": "4.9.0",
-        "@cratis/scene.components": "4.9.0",
-        "@cratis/scene.engine": "4.9.0",
-        "@cratis/scene.model": "4.9.0",
-        "@cratis/scene.react": "4.9.0"
+        "@cratis/scene.blueprint.default": "4.11.0",
+        "@cratis/scene.components": "4.11.0",
+        "@cratis/scene.engine": "4.11.0",
+        "@cratis/scene.model": "4.11.0",
+        "@cratis/scene.react": "4.11.0"
     },
     "devDependencies": {
         "@cratis/components": "^4.25.0",
-        "@cratis/scene.blueprint.default": "4.9.0",
-        "@cratis/scene.components": "4.9.0",
-        "@cratis/scene.engine": "4.9.0",
-        "@cratis/scene.model": "4.9.0",
-        "@cratis/scene.react": "4.9.0",
+        "@cratis/scene.blueprint.default": "4.11.0",
+        "@cratis/scene.components": "4.11.0",
+        "@cratis/scene.engine": "4.11.0",
+        "@cratis/scene.model": "4.11.0",
+        "@cratis/scene.react": "4.11.0",
         "@primereact/core": "11.2.0",
         "@primereact/headless": "11.2.0",
         "@storybook/addon-links": "^10.6.1",

package/templates/commandTemplates.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { ScreenTemplate } from '@cratis/scene.model';
+import { ScreenTemplate, TemplateScope } from '@cratis/scene.model';
 import { SlotName, TemplateSlotName, column, slotLeaf } from '@cratis/scene.blueprint.default';
 import { arcPageHeader, page, toolbar, toolbarButton, toolbarSeparator } from './elements';
 import { commandForm } from './formElements';
@@ -51,6 +51,7 @@ export const commandFormPageTemplate: ScreenTemplate = {
             ]),
         ],
     },
+    metadata: { type: 'Form', category: 'Business / Command', scopes: [TemplateScope.Slice] },
     displayName: 'Command form page',
     description: 'A generated command form under a header that states the command, with its own action bar.',
 };

package/templates/listTemplates.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { ScreenTemplate, WidthSizeClass } from '@cratis/scene.model';
+import { ScreenTemplate, TemplateScope, WidthSizeClass } from '@cratis/scene.model';
 import { SlotName, TemplateSlotName, column, row, slotLeaf } from '@cratis/scene.blueprint.default';
 import { dataPage, invoiceColumns, invoiceTableOptions, observableDataTable } from './dataElements';
 import { objectContentEditor, objectNavigationalBar, timeMachine } from './editorElements';
@@ -55,6 +55,7 @@ export const dataListPageTemplate: ScreenTemplate = {
         ],
         [TemplateSlotName.Body]: [dataPage('data-list-body', SampleBindingName.AllInvoices, invoiceTableOptions, invoiceColumns)],
     },
+    metadata: { type: 'List', category: 'Business / List', scopes: [TemplateScope.Slice] },
     displayName: 'Data list page',
     description: 'A dataPage bound to one query, under a header that states the binding - the whole list screen in two elements.',
 };
@@ -87,6 +88,7 @@ export const observableDataListPageTemplate: ScreenTemplate = {
             ]),
         ],
     },
+    metadata: { type: 'List', category: 'Business / Live operations', scopes: [TemplateScope.Slice] },
     displayName: 'Observable data list page',
     description: 'A live list over an observable query, which re-renders when the read model changes on the server.',
 };
@@ -134,6 +136,7 @@ export const dataListWithDetailPageTemplate: ScreenTemplate = {
             ]),
         ],
     },
+    metadata: { type: 'Detail', category: 'Business / Master detail', scopes: [TemplateScope.Slice] },
     displayName: 'Data list with detail page',
     description: 'A dataPage beside a detail region showing the selected record document and its history.',
 };