@cratis/scene.components 4.8.0 → 4.10.0

package/forms/CommandFieldPropertyEditor.tsx

@@ -0,0 +1,16 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { SceneEditKind } from '@cratis/scene.model';
+import { DesignTimePropertyEditorProps } from '@cratis/scene.react';
+
+/**
+ * Package-side editor for a command form property. It writes through the generic Scene edit boundary.
+ */
+export function CommandFieldPropertyEditor({ context, property, value, setValue }: DesignTimePropertyEditorProps) {
+    return <input aria-label={property.label} value={typeof value === 'string' ? value : ''} onChange={event => {
+        const next = event.currentTarget.value;
+        setValue(next);
+        context.submitEdits([{ kind: SceneEditKind.SetProperty, nodeId: context.element.id, path: property.path, value: next }]);
+    }} />;
+}

package/forms/CommandFormDesigner.tsx

@@ -0,0 +1,14 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { DesignTimeComponentProps } from '@cratis/scene.react';
+
+/**
+ * Generic package-side command form designer. It reads only the shared design-time context and submits Scene edits.
+ */
+export function CommandFormDesigner({ context }: DesignTimeComponentProps) {
+    const canGenerate = context.capabilities['commandForm.generateFields'] === true && context.permissions.edit !== false;
+    return <button type='button' disabled={!canGenerate} onClick={() => context.submitAction('Cratis.Components.commandForm.generateFields', [])}>
+        Generate fields
+    </button>;
+}

package/forms/CommandFormRuntime.tsx

@@ -15,6 +15,7 @@ interface CommandFormRuntimeProps {
     inputs?: CommandInput[];
     exclude?: string[];
     submitLabel: string;
+    columns?: number;
 }
 
 // Runtime bindings erase the proxy's keys; the optional footer is a Components >=4.13 contract.
@@ -59,12 +60,14 @@ function capability(command: BoundConstructor, inputs?: CommandInput[], exclude?
 }
 
 /** Private lazy entry point: importing the Scene registry must not import Arc. */
-export default function CommandFormRuntime({ command, inputs, exclude, submitLabel }: CommandFormRuntimeProps) {
+export default function CommandFormRuntime({ command, inputs, exclude, submitLabel, columns = 1 }: CommandFormRuntimeProps) {
     const error = capability(command, inputs, exclude);
     if (error) return <div role='alert'>{error}</div>;
     // The registry's never-argument constructor is erased; Arc creates this checked proxy with no args.
     if (inputs) return <CommandForm command={command as unknown as new () => object} showTitles={false}>
-        {inputs.map(input => <ExplicitCommandField key={input.property} input={input} />)}
+        <div style={{ display: 'grid', gridTemplateColumns: `repeat(${Math.max(1, columns)}, minmax(0, 1fr))`, gap: '1rem' }}>
+            {inputs.map(input => <ExplicitCommandField key={input.property} input={input} />)}
+        </div>
         <CommandFormSubmit label={submitLabel} />
     </CommandForm>;
     return <NativeAutoCommandForm command={command} exclude={exclude} footer={<CommandFormSubmit label={submitLabel} />} />;

package/forms/ExplicitCommandField.tsx

@@ -81,6 +81,8 @@ const NativeTextField = asCommandFormField<TextProps>(TextControl, { defaultValu
 
 /** Opaque child is self-bound by Arc's native runtime binding, with an exact fieldName. */
 export function ExplicitCommandField({ input }: { input: CommandInput }) {
-    return <NativeTextField fieldName={input.property} value={(command: Record<string, unknown>) => command[input.property]}
-        property={input.property} guid={input.type === 'guid'} label={input.label} title={input.label} />;
+    return <div style={{ gridColumn: input.column === undefined ? undefined : `${input.column}`, width: input.width }}>
+        <NativeTextField fieldName={input.property} value={(command: Record<string, unknown>) => command[input.property]}
+            property={input.property} guid={input.type === 'guid'} label={input.label} title={input.label} />
+    </div>;
 }

package/forms/SceneCommandForm.tsx

@@ -5,7 +5,7 @@ import { lazy } from 'react';
 import { RegisteredComponentProps } from '@cratis/scene.react';
 import { ArcRuntimeBoundary, BindingKind, MissingBinding, resolveElementBinding } from '../bindings';
 import type { BoundConstructor } from '../bindings';
-import { stringArrayProperty, stringProperty } from '../properties';
+import { numberProperty, stringArrayProperty, stringProperty, unionProperty } from '../properties';
 import { commandInputs } from './commandInputs';
 
 const CommandFormRuntime = lazy(() => import('./CommandFormRuntime'));
@@ -31,8 +31,9 @@ export function SceneCommandForm({ element }: RegisteredComponentProps) {
     const { name, target } = resolveElementBinding(element, BindingKind.Command);
     if (!target) return <MissingBinding element={element} kind={BindingKind.Command} name={name} />;
 
-    const inputs = Object.hasOwn(element.properties, 'inputs') ? commandInputs(element.properties) : undefined;
-    if (Object.hasOwn(element.properties, 'inputs') && !inputs) return <div role='alert'>Invalid command form inputs declaration</div>;
+    const mode = unionProperty(element.properties, 'mode', ['auto', 'manual'] as const) ?? (Object.hasOwn(element.properties, 'inputs') ? 'manual' : 'auto');
+    const inputs = mode === 'manual' ? commandInputs(element.properties) : undefined;
+    if (mode === 'manual' && !inputs) return <div role='alert'>Invalid command form inputs declaration</div>;
 
     return (
         <ArcRuntimeBoundary>
@@ -42,6 +43,7 @@ export function SceneCommandForm({ element }: RegisteredComponentProps) {
                 inputs={inputs}
                 exclude={stringArrayProperty(element.properties, 'exclude')}
                 submitLabel={stringProperty(element.properties, 'submitLabel') ?? 'Submit'}
+                {...(numberProperty(element.properties, 'columns') === undefined ? {} : { columns: numberProperty(element.properties, 'columns') })}
             />
         </ArcRuntimeBoundary>
     );

package/forms/commandInputs.ts

@@ -1,13 +1,15 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { arrayProperty, objectProperty, stringProperty } from '../properties';
+import { arrayProperty, numberProperty, objectProperty, stringProperty } from '../properties';
 
 /** Exact, case-sensitive names from a generated command's propertyDescriptors. */
 export interface CommandInput {
     property: string;
     type: 'string' | 'guid';
     label: string;
+    column?: number;
+    width?: string;
 }
 
 /** An absent declaration selects legacy auto mode; a present but invalid declaration never does. */
@@ -18,12 +20,14 @@ export function commandInputs(properties: Record<string, unknown>): CommandInput
     const seen = new Set<string>();
     for (const value of values) {
         const input = objectProperty({ value }, 'value');
-        if (!input || Object.keys(input).some(key => !['property', 'type', 'label'].includes(key))) return undefined;
+        if (!input || Object.keys(input).some(key => !['property', 'type', 'label', 'column', 'width'].includes(key))) return undefined;
         const property = stringProperty(input, 'property');
         const label = stringProperty(input, 'label');
         if (!property?.trim() || !label?.trim() || (input.type !== 'string' && input.type !== 'guid') || seen.has(property)) return undefined;
         seen.add(property);
-        inputs.push({ property, type: input.type, label });
+        const column = numberProperty(input, 'column');
+        const width = stringProperty(input, 'width');
+        inputs.push({ property, type: input.type, label, column, width });
     }
     return inputs;
 }

package/forms/generateCommandFieldsAction.ts

@@ -0,0 +1,46 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { DesignTimeAction, DesignTimeActionContext, DesignTimeActionResult } from '@cratis/scene.react';
+import { DesignTimeActionPlacement, SceneEditKind } from '@cratis/scene.model';
+
+export const generateCommandFieldsAction: DesignTimeAction = {
+    descriptor: {
+        id: 'Cratis.Components.commandForm.generateFields',
+        label: 'Generate fields',
+        placement: DesignTimeActionPlacement.Toolbar,
+        availability: 'commandForm.canGenerateFields',
+        description: 'Creates a deterministic editable field layout from the selected command metadata.',
+    },
+    isVisible: context => context.element.componentName.endsWith(':commandForm'),
+    isEnabled: context => Array.isArray(context.commandMetadata?.properties) && !Array.isArray(context.element.properties.inputs),
+    execute: context => generateCommandFields(context),
+};
+
+function generateCommandFields(context: DesignTimeActionContext): DesignTimeActionResult {
+    const properties = context.commandMetadata?.properties ?? [];
+    if (!properties.length) return { edits: [], diagnostics: ['No command metadata was supplied.'] };
+    if (Array.isArray(context.element.properties.inputs)) {
+        return { edits: [], diagnostics: ['The form already has authored fields; Generate fields will not overwrite them.'] };
+    }
+
+    return {
+        diagnostics: [],
+        edits: [{
+            kind: SceneEditKind.SetProperty,
+            nodeId: context.element.id,
+            path: 'inputs',
+            value: properties.map((property, index) => ({
+                property: property.name,
+                type: property.type === 'Guid' || property.type === 'guid' ? 'guid' : 'string',
+                label: property.label ?? humanize(property.name),
+                column: (index % 2) + 1,
+                width: '1fr',
+            })),
+        }],
+    };
+}
+
+function humanize(name: string): string {
+    return name.replace(/([a-z0-9])([A-Z])/g, '$1 $2').replace(/^./, value => value.toUpperCase());
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cratis/scene.components",
-    "version": "4.8.0",
+    "version": "4.10.0",
     "description": "The Cratis Components package: exposes @cratis/components' Arc-bound data, form and dialog composites as Scene components. Built on PrimeReact and Tailwind, and declares both as dependencies.",
     "keywords": [
         "cratis",
@@ -54,17 +54,17 @@
         "build-storybook": "storybook build"
     },
     "dependencies": {
-        "@cratis/scene.engine": "4.8.0",
-        "@cratis/scene.model": "4.8.0",
-        "@cratis/scene.react": "4.8.0"
+        "@cratis/scene.engine": "4.10.0",
+        "@cratis/scene.model": "4.10.0",
+        "@cratis/scene.react": "4.10.0"
     },
     "devDependencies": {
         "@cratis/arc": "22.50.5",
         "@cratis/arc.react": "22.50.5",
         "@cratis/components": "4.25.0",
-        "@cratis/scene.engine": "4.8.0",
-        "@cratis/scene.model": "4.8.0",
-        "@cratis/scene.react": "4.8.0",
+        "@cratis/scene.engine": "4.10.0",
+        "@cratis/scene.model": "4.10.0",
+        "@cratis/scene.react": "4.10.0",
         "@storybook/addon-links": "^10.6.1",
         "@storybook/react": "^10.6.1",
         "@storybook/react-vite": "^10.6.1",