@cratis/scene.blueprint.default 4.41.0 → 4.42.0

package/gallery/FoundationDialogs.stories.tsx

@@ -0,0 +1,74 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { SampleDataPack } from '@cratis/scene.model';
+import { corePackage, mergePackageRegistries } from '@cratis/scene.react';
+import { primeReactPackage } from '@cratis/scene.primereact';
+import { defaultBlueprint } from '../defaultBlueprint';
+import { ComponentState } from '../foundation';
+import { GalleryDialogPreview } from './GalleryDialogPreview';
+import { GalleryScreenPreview } from './GalleryScreenPreview';
+import { TemplatePreviewState } from './TemplatePreviewState';
+
+const registry = mergePackageRegistries([corePackage, primeReactPackage, defaultBlueprint]);
+/** The foundation sample-data pack, fetched from where the package ships it (`sampleData/`), as a host's loader would. */
+const packUrl = new URL('../sampleData/foundation-en.json', import.meta.url).href;
+const loadPack = async () => ({ pack: await (await fetch(packUrl)).json() as SampleDataPack });
+
+/**
+ * The foundation dialogs and the auth and state screens (spec Part B 2.10 and 2.11) in each state, filled from the foundation sample-data pack: the data in the
+ * pack, an empty answer, and each of the standard states forced on the components that own them. A dialog opens in the box a host draws, which its frame takes on:
+ * focus handling, placement and its name.
+ */
+const meta = {
+    title: 'Blueprint/Foundation dialogs',
+    component: GalleryDialogPreview,
+    parameters: { layout: 'fullscreen' },
+    loaders: [loadPack],
+    render: (args, { loaded }) => <GalleryDialogPreview {...args} pack={loaded.pack as SampleDataPack} />,
+    args: { registry, dialogName: 'ConfirmDialog' },
+    tags: ['autodocs'],
+} satisfies Meta<typeof GalleryDialogPreview>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/** A destructive confirmation: the consequences listed, the confirming button naming what it does. */
+export const Confirm: Story = {};
+
+/** The short create form, six fields at most. */
+export const QuickCreate: Story = { args: { dialogName: 'QuickCreateDialog' } };
+
+/** The lookup with the pack's accounts. */
+export const Lookup: Story = { args: { dialogName: 'LookupDialog' } };
+
+/** The lookup when the query returns nothing: it says so in words. */
+export const LookupEmpty: Story = { args: { dialogName: 'LookupDialog', state: TemplatePreviewState.Empty } };
+
+/** The lookup while its query has not answered. */
+export const LookupLoading: Story = { args: { dialogName: 'LookupDialog', forceState: { state: ComponentState.Loading } } };
+
+/** The lookup when its query failed: a message and a retry. */
+export const LookupError: Story = { args: { dialogName: 'LookupDialog', forceState: { state: ComponentState.Error, error: 'The server did not answer' } } };
+
+/** The lookup for a user who may not see the accounts: what is missing, and none of the data. */
+export const LookupNoPermission: Story = { args: { dialogName: 'LookupDialog', forceState: { state: ComponentState.NoPermission, permissionSubject: 'the accounts' } } };
+
+/** The lookup when part of it failed: the chrome stays, and the failed part is named. */
+export const LookupPartial: Story = { args: { dialogName: 'LookupDialog', forceState: { state: ComponentState.Partial, failedRegions: ['Accounts'] } } };
+
+/** A drawer from the side hosting a form. */
+export const SideSheet: Story = { args: { dialogName: 'SideSheet' } };
+
+/** The advanced filter builder; on a phone it fills the page. */
+export const Filter: Story = { args: { dialogName: 'FilterDialog' } };
+
+/** Every state screen, as a gallery screen: sign in, not found, forbidden and error. */
+export const StateScreens: StoryObj<typeof GalleryScreenPreview> = {
+    loaders: [loadPack],
+    render: (args, { loaded }) => <GalleryScreenPreview {...args} registry={registry} pack={loaded.pack as SampleDataPack} />,
+    args: { screenName: 'LoginScreen' },
+    argTypes: { screenName: { control: 'select', options: ['LoginScreen', 'NotFoundScreen', 'ForbiddenScreen', 'ErrorScreen'] } },
+};

package/gallery/GalleryDialogPreview.tsx

@@ -0,0 +1,68 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { useMemo } from 'react';
+import { DialogTemplate, SampleDataPack, Theme } from '@cratis/scene.model';
+import { ComponentRegistry, SceneElementView } from '@cratis/scene.react';
+import { LayoutConfigProvider, LayoutConfigState } from '../configuration';
+import { previewComponents, previewTemplateComponent } from '../preview-host/PreviewTemplate';
+import { LayoutThemeProvider, defaultBlueprintThemes } from '../themes';
+import { externalComponent } from './elements';
+import { ForcedComponentState, forceComponentState, galleryPreviewRegistry, queryResultsOf } from './GalleryScreenPreview';
+import { galleryDialogTemplates } from './dialogTemplates';
+import { galleryComponentCatalog, galleryPreviewProfile } from './previewProfile';
+import { resolveElementComponentNames } from './resolveElementNames';
+import { TemplatePreviewState } from './TemplatePreviewState';
+
+/** One gallery dialog template by name, for a story or a host that opens a specific one. */
+export const galleryDialogTemplate = (name: string): DialogTemplate | undefined => galleryDialogTemplates.find(template => template.name === name);
+
+export interface GalleryDialogPreviewProps {
+    /** The name of the gallery dialog template to open. */
+    dialogName: string;
+
+    /** Configuration to start from. */
+    initialConfig?: Partial<LayoutConfigState>;
+
+    /** The themes the preview may switch between. Defaults to the two this blueprint ships. */
+    themes?: Theme[];
+
+    /** The component registry to render against. Defaults to `core` plus this blueprint's own components. */
+    registry?: ComponentRegistry;
+
+    /** The data state to show. Defaults to the seeded, populated records. */
+    state?: TemplatePreviewState;
+
+    /** The sample-data pack that stands in for the queries the template binds to. */
+    pack?: SampleDataPack;
+
+    /** A standard state (spec Part B 1.4) to force on every foundation component of the dialog that owns the five states. */
+    forceState?: ForcedComponentState;
+}
+
+/**
+ * Opens one gallery dialog template the way a host does: inside a `role="dialog" aria-modal="true"` element, with the template's content in the wrapper
+ * a screen's template gets. Nothing here is a preview-only path - the dialog is a real {@link DialogTemplate} rendered by the real `SceneElementView`,
+ * and the dialog's own frame gives the host element its focus handling, placement and labelling exactly as it does in an application.
+ */
+export function GalleryDialogPreview({ dialogName, initialConfig, themes = defaultBlueprintThemes, registry = galleryPreviewRegistry, state = TemplatePreviewState.Populated, pack, forceState }: GalleryDialogPreviewProps) {
+    const template = galleryDialogTemplate(dialogName);
+    if (!template) throw new Error(`The gallery has no dialog template named '${dialogName}'.`);
+
+    const element = useMemo(() => {
+        const composed = externalComponent(`dialog-${template.name}`, previewTemplateComponent, {}, template.content ?? {});
+        const resolved = resolveElementComponentNames(composed, galleryPreviewProfile, galleryComponentCatalog);
+        return forceState ? forceComponentState(resolved, forceState) : resolved;
+    }, [template, forceState]);
+    const full = useMemo(() => ({ ...registry, ...previewComponents }), [registry]);
+
+    return (
+        <LayoutConfigProvider initialConfig={initialConfig} storage={null}>
+            <LayoutThemeProvider themes={themes}>
+                <div role='dialog' aria-modal='true' aria-label={template.displayName ?? template.name} data-scene-dialog={template.name}>
+                    <SceneElementView element={element} registry={full} resolveBinding={() => undefined} queryResults={queryResultsOf(pack, state)} />
+                </div>
+            </LayoutThemeProvider>
+        </LayoutConfigProvider>
+    );
+}

package/gallery/dialogTemplates.ts

@@ -2,10 +2,10 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import { DialogTemplate } from '@cratis/scene.model';
+import { actionButton, closingDialog, dialogMetadata, foundationDialogTemplates } from '../foundation/templates/dialogTemplates';
 import { TemplateSlotName } from './TemplateSlotName';
 import { button, card, externalComponent, panel, text } from './elements';
 import { field } from './widgets';
-import { defaultBlueprintTemplateProvenance } from '../templateProvenance';
 
 /**
  * The three dialog shapes an application repeats: confirm something destructive, capture a short form, and
@@ -17,23 +17,28 @@ import { defaultBlueprintTemplateProvenance } from '../templateProvenance';
  * happens to be, so there is no parent slot for it to name.
  */
 
-/** Confirm: one question, two answers, and enough context to answer it. */
+/**
+ * Confirm: one question, two answers, and enough context to answer it - the consequences listed, and the confirming button naming what it does
+ * (`Archive product`, never `OK`). A destructive confirmation takes the danger tone: the heading and border are drawn in the danger colors and the
+ * confirming button is the danger button. The components blueprint has a `ConfirmDialog` of its own for a command; a reference names the blueprint
+ * (`resolveTemplateReference`), so the two never collide.
+ */
 export const confirmDialogTemplate: DialogTemplate = {
     name: 'ConfirmDialog',
     slots: [{ name: TemplateSlotName.Header }, { name: TemplateSlotName.Body }, { name: TemplateSlotName.Actions }],
     content: {
-        [TemplateSlotName.Header]: [text('confirm-title', 'Archive this product?')],
-        [TemplateSlotName.Body]: [
-            text('confirm-message', 'Bamboo Watch will stop appearing in the catalog. Existing orders keep it.'),
-            externalComponent('confirm-note', 'message', { severity: 'warn', text: 'This can be undone from the archive.' }),
-        ],
+        [TemplateSlotName.Header]: [externalComponent('confirm-frame', 'dialogFrame', {
+            title: 'Archive this product?', message: 'Bamboo Watch will stop appearing in the catalog.', tone: 'danger',
+            consequences: ['Existing orders keep it', 'It can be restored from the archive'],
+        })],
+        [TemplateSlotName.Body]: [],
         [TemplateSlotName.Actions]: [
-            panel('confirm-actions', [button('confirm-yes', 'Archive', { severity: 'danger' }), button('confirm-no', 'Keep it', { severity: 'secondary' })]),
+            panel('confirm-actions', [closingDialog(actionButton('confirm-no', { label: 'Keep it', emphasis: 'secondary' })), actionButton('confirm-yes', { label: 'Archive product', emphasis: 'danger' })]),
         ],
     },
     displayName: 'Confirmation dialog',
     description: 'One question with the consequence spelled out, and a way back.',
-    metadata: { ...defaultBlueprintTemplateProvenance, category: 'Foundation / Dialog' },
+    metadata: dialogMetadata('ConfirmDialog'),
 };
 
 /** Form: a short capture that does not deserve a page of its own. */
@@ -41,19 +46,19 @@ export const formDialogTemplate: DialogTemplate = {
     name: 'FormDialog',
     slots: [{ name: TemplateSlotName.Header }, { name: TemplateSlotName.Body }, { name: TemplateSlotName.Actions }],
     content: {
-        [TemplateSlotName.Header]: [text('form-dialog-title', 'Invite someone')],
+        [TemplateSlotName.Header]: [externalComponent('form-dialog-frame', 'dialogFrame', { title: 'Invite someone' })],
         [TemplateSlotName.Body]: [
             field('form-dialog-email', 'Email', 'inputText', { placeholder: 'them@contoso.com' }),
             field('form-dialog-role', 'Role', 'dropdown', { options: ['Viewer', 'Editor', 'Administrator'] }),
             field('form-dialog-message', 'Message', 'inputTextarea', { rows: 3 }),
         ],
         [TemplateSlotName.Actions]: [
-            panel('form-dialog-actions', [button('form-dialog-send', 'Send invitation', { severity: 'primary' }), button('form-dialog-cancel', 'Cancel', { severity: 'secondary' })]),
+            panel('form-dialog-actions', [closingDialog(button('form-dialog-cancel', 'Cancel', { severity: 'secondary' })), button('form-dialog-send', 'Send invitation', { severity: 'primary' })]),
         ],
     },
     displayName: 'Form dialog',
     description: 'A handful of fields captured without leaving the page underneath.',
-    metadata: { ...defaultBlueprintTemplateProvenance, category: 'Foundation / Dialog' },
+    metadata: dialogMetadata('FormDialog', true),
 };
 
 /** Detail: a record shown over the list it came from. */
@@ -61,7 +66,7 @@ export const detailDialogTemplate: DialogTemplate = {
     name: 'DetailDialog',
     slots: [{ name: TemplateSlotName.Header }, { name: TemplateSlotName.Body }, { name: TemplateSlotName.SidePanel }, { name: TemplateSlotName.Actions }],
     content: {
-        [TemplateSlotName.Header]: [text('detail-dialog-title', 'ORD-4192')],
+        [TemplateSlotName.Header]: [externalComponent('detail-dialog-frame', 'dialogFrame', { title: 'ORD-4192' })],
         [TemplateSlotName.Body]: [
             card('detail-dialog-summary', [
                 text('detail-dialog-customer', 'Northwind Traders'),
@@ -71,13 +76,13 @@ export const detailDialogTemplate: DialogTemplate = {
         ],
         [TemplateSlotName.SidePanel]: [externalComponent('detail-dialog-timeline', 'timeline', { align: 'left' })],
         [TemplateSlotName.Actions]: [
-            panel('detail-dialog-actions', [button('detail-dialog-open', 'Open full record', { severity: 'primary', targetScreen: 'DetailView' }), button('detail-dialog-close', 'Close', { severity: 'secondary' })]),
+            panel('detail-dialog-actions', [closingDialog(button('detail-dialog-close', 'Close', { severity: 'secondary' })), button('detail-dialog-open', 'Open full record', { severity: 'primary', targetScreen: 'DetailView' })]),
         ],
     },
     displayName: 'Detail dialog',
     description: 'A record over the list it came from, with a route to the full page.',
-    metadata: { ...defaultBlueprintTemplateProvenance, category: 'Foundation / Dialog' },
+    metadata: dialogMetadata('DetailDialog', true),
 };
 
-/** The dialog templates this blueprint provides. */
-export const galleryDialogTemplates: DialogTemplate[] = [confirmDialogTemplate, formDialogTemplate, detailDialogTemplate];
+/** The dialog templates this blueprint provides: the three the gallery began with, and the foundation's quick create, lookup, side sheet and filter dialogs. */
+export const galleryDialogTemplates: DialogTemplate[] = [confirmDialogTemplate, formDialogTemplate, detailDialogTemplate, ...foundationDialogTemplates];

package/gallery/index.ts

@@ -20,5 +20,6 @@ export * from './componentNames';
 export * from './previewProfile';
 export * from './resolveElementNames';
 export * from './GalleryScreenPreview';
+export * from './GalleryDialogPreview';
 export * from './TemplatePreviewState';
 export * from './applyTemplatePreviewState';

package/gallery/screens.ts

@@ -2,7 +2,7 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import { Layout, Screen, ScreenTemplate } from '@cratis/scene.model';
-import { foundationScreenTemplates } from '../foundation/templates';
+import { foundationScreenTemplates, stateScreenTemplates } from '../foundation/templates';
 import { LayoutName, appShellLayout, fullPageLayout } from '../layouts';
 import { BreadcrumbEntry, applicationChrome, fullPageChrome } from './applicationChrome';
 import { nestScreenTemplates, templateContentInLayout } from './composeScreen';
@@ -22,6 +22,7 @@ import { workspaceTemplates } from './workspaceTemplates';
  */
 export const galleryScreenTemplates: ScreenTemplate[] = [
     ...foundationScreenTemplates,
+    ...stateScreenTemplates,
     ...workspaceTemplates,
     ...supportTemplates,
     ...authTemplates,
@@ -30,7 +31,7 @@ export const galleryScreenTemplates: ScreenTemplate[] = [
 ];
 
 /** Which layout each template renders inside - the application shell unless it is one of the chrome-less screens. */
-const fullPageTemplateNames = new Set([...authTemplates, ...statusTemplates].map(template => template.name));
+const fullPageTemplateNames = new Set([...authTemplates, ...statusTemplates, ...stateScreenTemplates].map(template => template.name));
 
 /** The trail shown above each application-shell screen. */
 const breadcrumbs: Record<string, BreadcrumbEntry[]> = {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cratis/scene.blueprint.default",
-    "version": "4.41.0",
+    "version": "4.42.0",
     "description": "The default blueprint: application shell layouts, the screen and dialog templates that go inside them, the components that fill their slots, and two themes.",
     "keywords": [
         "cratis",
@@ -57,15 +57,15 @@
         "build-storybook": "storybook build"
     },
     "dependencies": {
-        "@cratis/scene.engine": "4.41.0",
-        "@cratis/scene.model": "4.41.0",
-        "@cratis/scene.react": "4.41.0"
+        "@cratis/scene.engine": "4.42.0",
+        "@cratis/scene.model": "4.42.0",
+        "@cratis/scene.react": "4.42.0"
     },
     "devDependencies": {
-        "@cratis/scene.engine": "4.41.0",
-        "@cratis/scene.model": "4.41.0",
-        "@cratis/scene.primereact": "4.41.0",
-        "@cratis/scene.react": "4.41.0",
+        "@cratis/scene.engine": "4.42.0",
+        "@cratis/scene.model": "4.42.0",
+        "@cratis/scene.primereact": "4.42.0",
+        "@cratis/scene.react": "4.42.0",
         "@primereact/core": "11.2.0",
         "@primereact/headless": "11.2.0",
         "@primeuix/themes": "^3.0.1",

package/sampleData/foundation-en.json

@@ -507,6 +507,155 @@
           "label": "Review"
         }
       ]
+    },
+    {
+      "shape": "QuickCreateSections",
+      "rows": [
+        {
+          "id": "quick",
+          "title": "New contact",
+          "columns": 1,
+          "fields": [
+            {
+              "name": "name",
+              "label": "Name",
+              "required": true
+            },
+            {
+              "name": "email",
+              "label": "Email",
+              "required": true
+            },
+            {
+              "name": "company",
+              "label": "Company",
+              "type": "select",
+              "options": [
+                "Northgate Ltd",
+                "Harbour & Sons",
+                "Fjord Supply"
+              ]
+            },
+            {
+              "name": "phone",
+              "label": "Phone"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "shape": "QuickCreateValues",
+      "rows": [
+        {}
+      ]
+    },
+    {
+      "shape": "LookupColumns",
+      "rows": [
+        {
+          "field": "name",
+          "header": "Account"
+        },
+        {
+          "field": "owner",
+          "header": "Owner"
+        },
+        {
+          "field": "city",
+          "header": "City"
+        }
+      ]
+    },
+    {
+      "shape": "LookupRows",
+      "rows": [
+        {
+          "id": "a1",
+          "name": "Northgate Ltd",
+          "owner": "Ada Lovelace",
+          "city": "Oslo"
+        },
+        {
+          "id": "a2",
+          "name": "Harbour & Sons",
+          "owner": "Grace Hopper",
+          "city": "Bergen"
+        },
+        {
+          "id": "a3",
+          "name": "Fjord Supply",
+          "owner": "Linus Torvalds",
+          "city": "Tromsø"
+        },
+        {
+          "id": "a4",
+          "name": "Globex",
+          "owner": "Ada Lovelace",
+          "city": "Stavanger"
+        }
+      ]
+    },
+    {
+      "shape": "SupportReference",
+      "rows": [
+        {
+          "id": "ERR-7F3A-92C1"
+        }
+      ]
+    },
+    {
+      "shape": "SignInSections",
+      "rows": [
+        {
+          "id": "credentials",
+          "title": "Sign in",
+          "columns": 1,
+          "fields": [
+            {
+              "name": "email",
+              "label": "Email",
+              "required": true
+            },
+            {
+              "name": "password",
+              "label": "Password",
+              "type": "password",
+              "required": true
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "shape": "SignInError",
+      "rows": [
+        {
+          "message": "The email or password is not right."
+        }
+      ]
+    },
+    {
+      "shape": "SignInValues",
+      "rows": [
+        {}
+      ]
+    },
+    {
+      "shape": "DealFilter",
+      "rows": [
+        {
+          "operator": "and",
+          "conditions": [
+            {
+              "field": "status",
+              "operator": "is",
+              "value": "Open"
+            }
+          ],
+          "groups": []
+        }
+      ]
     }
   ]
 }