@cratis/scene.blueprint.components 4.16.0 → 4.18.0

package/gallery/ArcPages.stories.tsx

@@ -21,7 +21,7 @@ const meta = {
         docs: {
             description: {
                 component:
-                    'The eight Arc-bound page templates plus the three-level nesting chain, each booted as a screen inside the default ' +
+                    'The nine Arc-bound page templates plus the three-level nesting chain, each booted as a screen inside the default ' +
                     "blueprint's application shell. Nothing is registered in the binding registry, so every Arc-bound region names the " +
                     'binding it wanted and every page header says which query or command a host still has to wire. That is the normal ' +
                     'design-time state - see the *Bindings* stories for what changes when a host registers one.',
@@ -53,6 +53,9 @@ export const DashboardPage: Story = { args: { screenName: 'DashboardPage' } };
 /** A generated command form with its own action bar. */
 export const CommandFormPage: Story = { args: { screenName: 'CommandFormPage' } };
 
+/** A module's settings as a generated command form, with save and discard. */
+export const SettingsPage: Story = { args: { screenName: 'SettingsPage' } };
+
 /** An event type's schema, edited as a typed property tree - and fully rendered, because nothing on it is Arc-bound. */
 export const SchemaEditorPage: Story = { args: { screenName: 'SchemaEditorPage' } };
 

package/gallery/navigation.ts

@@ -24,6 +24,7 @@ export const componentsNavigationEntries: NavigationEntry[] = [
     { label: 'Invoices and detail', targetScreen: 'DataListWithDetailPage', icon: 'pi pi-window-maximize', group: 'Billing', order: 40 },
     { label: 'Master and detail', targetScreen: 'MasterDetailPage', icon: 'pi pi-table', group: 'Billing', order: 50 },
     { label: 'Register an invoice', targetScreen: 'CommandFormPage', icon: 'pi pi-plus-circle', group: 'Billing', order: 60 },
+    { label: 'Settings', targetScreen: 'SettingsPage', icon: 'pi pi-cog', group: 'Billing', order: 70 },
     { label: 'Event type schema', targetScreen: 'SchemaEditorPage', icon: 'pi pi-sitemap', group: 'Inspect', order: 10 },
     { label: 'Invoice document', targetScreen: 'ObjectEditorPage', icon: 'pi pi-file-edit', group: 'Inspect', order: 20 },
     { label: 'Billing module', targetScreen: 'DataModulePage', icon: 'pi pi-th-large', group: 'Nesting', order: 10 },

package/gallery/screens.ts

@@ -47,7 +47,7 @@ function screenFor(template: ScreenTemplate): Screen {
 /**
  * The chain of templates a screen renders through, outermost first.
  *
- * The eight page templates fit the layout's own `content` slot, so each one's chain is just itself. The
+ * The nine page templates fit the layout's own `content` slot, so each one's chain is just itself. The
  * three nesting-chain templates are the exception and the only ones that need the walk - which is the
  * honest version of the story: nesting exists for the applications that need it, and costs nothing for the
  * ones that do not.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cratis/scene.blueprint.components",
-    "version": "4.16.0",
+    "version": "4.18.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.16.0",
-        "@cratis/scene.components": "4.16.0",
-        "@cratis/scene.engine": "4.16.0",
-        "@cratis/scene.model": "4.16.0",
-        "@cratis/scene.react": "4.16.0"
+        "@cratis/scene.blueprint.default": "4.18.0",
+        "@cratis/scene.components": "4.18.0",
+        "@cratis/scene.engine": "4.18.0",
+        "@cratis/scene.model": "4.18.0",
+        "@cratis/scene.react": "4.18.0"
     },
     "devDependencies": {
         "@cratis/components": "^4.25.0",
-        "@cratis/scene.blueprint.default": "4.16.0",
-        "@cratis/scene.components": "4.16.0",
-        "@cratis/scene.engine": "4.16.0",
-        "@cratis/scene.model": "4.16.0",
-        "@cratis/scene.react": "4.16.0",
+        "@cratis/scene.blueprint.default": "4.18.0",
+        "@cratis/scene.components": "4.18.0",
+        "@cratis/scene.engine": "4.18.0",
+        "@cratis/scene.model": "4.18.0",
+        "@cratis/scene.react": "4.18.0",
         "@primereact/core": "11.2.0",
         "@primereact/headless": "11.2.0",
         "@storybook/addon-links": "^10.6.1",

package/templates/SampleBindingName.ts

@@ -47,4 +47,7 @@ export enum SampleBindingName {
 
     /** Records an adjustment against an invoice - the command a dialog submits. */
     RecordAdjustment = 'RecordAdjustment',
+
+    /** Changes how the billing module behaves - the command a settings page submits. */
+    ChangeBillingSettings = 'ChangeBillingSettings',
 }

package/templates/commandTemplates.ts

@@ -57,5 +57,43 @@ export const commandFormPageTemplate: ScreenTemplate = {
     description: 'A generated command form under a header that states the command, with its own action bar.',
 };
 
+/**
+ * A settings page - the same generated-form shape as `CommandFormPage`, for the command that changes how a
+ * module behaves rather than one that records something. The header says what the settings govern, the
+ * form follows the settings command, and the bar saves or discards.
+ *
+ * Settings are a page of their own rather than a dialog because they are visited, read and left; a dialog
+ * would hide the module the reader is configuring.
+ */
+export const settingsPageTemplate: ScreenTemplate = {
+    name: 'SettingsPage',
+    fitsSlot: SlotName.Content,
+    slots: [{ name: TemplateSlotName.Header }, { name: TemplateSlotName.Body }, { name: TemplateSlotName.Actions }],
+    arrangement: {
+        root: column([slotLeaf(TemplateSlotName.Header), slotLeaf(TemplateSlotName.Body, { grow: 1 }), slotLeaf(TemplateSlotName.Actions)], 16),
+    },
+    content: {
+        [TemplateSlotName.Header]: [
+            arcPageHeader('settings-header', {
+                title: 'Billing settings',
+                subtitle: 'Payment terms, reminders and numbering for every invoice the module registers',
+                section: 'Billing',
+                command: SampleBindingName.ChangeBillingSettings,
+            }),
+        ],
+        [TemplateSlotName.Body]: [page('settings-body', '', [commandForm('settings-form', SampleBindingName.ChangeBillingSettings, ['billingId'])])],
+        [TemplateSlotName.Actions]: [
+            toolbar('settings-actions', [
+                toolbarButton('settings-save', 'Save the settings', 'pi pi-save', 'Save'),
+                toolbarSeparator('settings-separator'),
+                toolbarButton('settings-discard', 'Discard changes', 'pi pi-undo', 'Discard'),
+            ]),
+        ],
+    },
+    metadata: { ...componentsBlueprintTemplateProvenance, type: 'Form', category: 'Business / Settings', scopes: [TemplateScope.Module] },
+    displayName: 'Settings page',
+    description: "A module's settings as a generated command form, with save and discard.",
+};
+
 /** The command-shaped templates. */
-export const commandTemplates: ScreenTemplate[] = [commandFormPageTemplate];
+export const commandTemplates: ScreenTemplate[] = [commandFormPageTemplate, settingsPageTemplate];

package/templates/screenTemplates.ts

@@ -24,12 +24,12 @@ export const componentsScreenTemplates: ScreenTemplate[] = [
 ];
 
 /**
- * The eight templates that fill the application layout's own `content` slot directly.
+ * The nine templates that fill the application layout's own `content` slot directly.
  *
  * Kept apart from the nesting chain because `fitsSlot` is resolved against *the containers in scope*, and
  * these two groups are never in scope together. Each of these is a whole page an application places on its
  * own; the chain's three are one page assembled from three levels. Resolving them as one set would ask
- * `resolveScreenTemplates` which of eight `body`-declaring templates the feature section belongs to, and it
+ * `resolveScreenTemplates` which of nine `body`-declaring templates the feature section belongs to, and it
  * would rightly answer that it cannot tell.
  */
 export const componentsPageTemplates: ScreenTemplate[] = [...listTemplates, ...workspaceTemplates, ...commandTemplates, ...editorTemplates];