@cratis/scene.components 4.13.0 → 4.15.0

package/forms/CommandFormLayoutEditor.tsx

@@ -0,0 +1,49 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { KeyboardEvent, useState } from 'react';
+import { CommandFormLayout, SceneEditKind } from '@cratis/scene.model';
+import { CommandFormLayoutKey, applyCommandFormLayoutKey } from '@cratis/scene.engine';
+import { DesignTimePropertyEditorProps } from '@cratis/scene.react';
+import { commandFormLayout } from './commandFormLayout';
+
+const layoutKeys = new Set<string>(Object.values(CommandFormLayoutKey));
+
+/**
+ * Arranges a command form's fields from the keyboard. Each placed field is a focusable cell: the arrow keys
+ * move it one cell, and Shift with an arrow key resizes it. A valid change is submitted as one canonical
+ * edit of the `layout` property; an invalid one is announced and the committed layout is kept.
+ */
+export function CommandFormLayoutEditor({ context, property, value, setValue }: DesignTimePropertyEditorProps) {
+    const layout = commandFormLayout({ layout: value });
+    const [problem, setProblem] = useState<string>();
+    if (!layout) return <p role='note'>{property.label}: no layout is authored yet.</p>;
+
+    const onKeyDown = (field: string) => (event: KeyboardEvent<HTMLButtonElement>) => {
+        if (!layoutKeys.has(event.key)) return;
+        event.preventDefault();
+        const draft = applyCommandFormLayoutKey(layout, field, event.key as CommandFormLayoutKey, event.shiftKey, layout.placements.map(placement => placement.field));
+        if (!draft) return;
+        if (!draft.isValid) {
+            setProblem(draft.diagnostics[0].message);
+            return;
+        }
+
+        setProblem(undefined);
+        commit(draft.draft);
+    };
+
+    const commit = (next: CommandFormLayout) => {
+        setValue(next);
+        context.submitEdits([{ kind: SceneEditKind.SetProperty, nodeId: context.element.id, path: property.path, value: next }]);
+    };
+
+    return <div role='group' aria-label={property.label} aria-describedby={`${context.element.id}-layout-help`}>
+        <p id={`${context.element.id}-layout-help`}>Arrow keys move a field. Shift and an arrow key resize it.</p>
+        {layout.placements.map(placement => <button key={placement.field} type='button' onKeyDown={onKeyDown(placement.field)}
+            aria-label={`${placement.field}: row ${placement.row}, column ${placement.column}, spans ${placement.columnSpan ?? 1} column(s) and ${placement.rowSpan ?? 1} row(s)`}>
+            {placement.field}
+        </button>)}
+        {problem && <p role='alert'>{problem}</p>}
+    </div>;
+}

package/forms/CommandFormRuntime.tsx

@@ -4,7 +4,7 @@
 import type { ComponentType, ReactNode } from 'react';
 import { AutoCommandForm } from '@cratis/components/CommandForm';
 import { CommandForm } from '@cratis/arc.react/commands';
-import { formWidthToCss, normalizeCommandFormLayout, validateCommandFormLayout } from '@cratis/scene.engine';
+import { formWidthToCss, normalizeCommandFormLayout, stackCommandFormLayout, validateCommandFormLayout } from '@cratis/scene.engine';
 import { Guid } from '@cratis/fundamentals';
 import type { BoundConstructor } from '../bindings';
 import type { CommandInput } from './commandInputs';
@@ -19,6 +19,9 @@ interface CommandFormRuntimeProps {
     submitLabel: string;
     columns?: number;
     layout?: CommandFormLayout;
+
+    /** At a compact width the fields stack in one column, in reading order. */
+    compact?: boolean;
 }
 
 // Runtime bindings erase the proxy's keys; the optional footer is a Components >=4.13 contract.
@@ -63,17 +66,18 @@ 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, columns = 1, layout }: CommandFormRuntimeProps) {
+export default function CommandFormRuntime({ command, inputs, exclude, submitLabel, columns = 1, layout, compact = false }: 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) {
-        const formLayout = normalizeCommandFormLayout(layout, inputs);
-        const diagnostics = validateCommandFormLayout(formLayout, inputs.map(input => input.property));
+        const authoredLayout = normalizeCommandFormLayout(layout, inputs);
+        const diagnostics = validateCommandFormLayout(authoredLayout, inputs.map(input => input.property));
         if (diagnostics.length) return <div role='alert'>{diagnostics[0].message}</div>;
+        const formLayout = compact ? stackCommandFormLayout(authoredLayout) : authoredLayout;
         const columnsCss = formLayout.columns.map(column => formWidthToCss(column.width) ?? 'minmax(0, 1fr)').join(' ') || `repeat(${Math.max(1, columns)}, minmax(0, 1fr))`;
         return <CommandForm command={command as unknown as new () => object} showTitles={false}>
-            <div style={{ display: 'grid', gridTemplateColumns: columnsCss, columnGap: formWidthToCss(formLayout.columnGap) ?? '1rem', rowGap: formWidthToCss(formLayout.rowGap) ?? '1rem' }}>
+            <div data-scene-form-columns={formLayout.columns.length} style={{ display: 'grid', gridTemplateColumns: columnsCss, columnGap: formWidthToCss(formLayout.columnGap) ?? '1rem', rowGap: formWidthToCss(formLayout.rowGap) ?? '1rem' }}>
                 {inputs.map(input => <ExplicitCommandField key={input.property} input={input} placement={formLayout.placements.find(placement => placement.field === input.property) ?? input.placement} />)}
             </div>
             <CommandFormSubmit label={submitLabel} />

package/forms/SceneCommandForm.tsx

@@ -2,6 +2,7 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import { lazy } from 'react';
+import { WidthSizeClass } from '@cratis/scene.model';
 import { RegisteredComponentProps } from '@cratis/scene.react';
 import { ArcRuntimeBoundary, BindingKind, MissingBinding, resolveElementBinding } from '../bindings';
 import type { BoundConstructor } from '../bindings';
@@ -46,6 +47,7 @@ export function SceneCommandForm({ element }: RegisteredComponentProps) {
                 submitLabel={stringProperty(element.properties, 'submitLabel') ?? 'Submit'}
                 {...(numberProperty(element.properties, 'columns') === undefined ? {} : { columns: numberProperty(element.properties, 'columns') })}
                 {...(commandFormLayout(element.properties) === undefined ? {} : { layout: commandFormLayout(element.properties) })}
+                {...(stringProperty(element.properties, 'widthSizeClass') === WidthSizeClass.Compact ? { compact: true } : {})}
             />
         </ArcRuntimeBoundary>
     );

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cratis/scene.components",
-    "version": "4.13.0",
+    "version": "4.15.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.13.0",
-        "@cratis/scene.model": "4.13.0",
-        "@cratis/scene.react": "4.13.0"
+        "@cratis/scene.engine": "4.15.0",
+        "@cratis/scene.model": "4.15.0",
+        "@cratis/scene.react": "4.15.0"
     },
     "devDependencies": {
         "@cratis/arc": "22.50.5",
         "@cratis/arc.react": "22.50.5",
         "@cratis/components": "4.25.0",
-        "@cratis/scene.engine": "4.13.0",
-        "@cratis/scene.model": "4.13.0",
-        "@cratis/scene.react": "4.13.0",
+        "@cratis/scene.engine": "4.15.0",
+        "@cratis/scene.model": "4.15.0",
+        "@cratis/scene.react": "4.15.0",
         "@storybook/addon-links": "^10.6.1",
         "@storybook/react": "^10.6.1",
         "@storybook/react-vite": "^10.6.1",