@cratis/scene.components 0.1.0

package/for_properties/when_a_property_has_the_wrong_type.ts

@@ -0,0 +1,41 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import {
+    arrayProperty,
+    booleanProperty,
+    numberProperty,
+    objectArrayProperty,
+    objectProperty,
+    stringArrayProperty,
+    stringProperty,
+    unionProperty,
+} from '../properties';
+
+describe('when a property has the wrong type', () => {
+    const properties: Record<string, unknown> = {
+        title: 42,
+        panel: 'yes',
+        rows: 'ten',
+        notANumber: Number.NaN,
+        options: 'first,second',
+        schema: ['not', 'an', 'object'],
+        orientation: 'diagonal',
+        fields: ['name', 7, 'number'],
+        entries: [{ key: 'a' }, 'not an object'],
+    };
+
+    it('should not read a number as a string', () => (stringProperty(properties, 'title') === undefined).should.be.true);
+    it('should not read a string as a boolean', () => (booleanProperty(properties, 'panel') === undefined).should.be.true);
+    it('should not read a string as a number', () => (numberProperty(properties, 'rows') === undefined).should.be.true);
+    it('should not read NaN as a number', () => (numberProperty(properties, 'notANumber') === undefined).should.be.true);
+    it('should not read a string as an array', () => (arrayProperty(properties, 'options') === undefined).should.be.true);
+    it('should not read an array as an object', () => (objectProperty(properties, 'schema') === undefined).should.be.true);
+
+    it('should reject a value outside the allowed union', () =>
+        (unionProperty(properties, 'orientation', ['vertical', 'horizontal']) === undefined).should.be.true);
+
+    it('should keep only the string elements of a string array', () => stringArrayProperty(properties, 'fields')!.should.deep.equal(['name', 'number']));
+
+    it('should keep only the object elements of an object array', () => objectArrayProperty(properties, 'entries')!.should.deep.equal([{ key: 'a' }]));
+});

package/for_properties/when_a_property_is_missing.ts

@@ -0,0 +1,26 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import {
+    arrayProperty,
+    booleanProperty,
+    numberProperty,
+    objectArrayProperty,
+    objectProperty,
+    stringArrayProperty,
+    stringProperty,
+    unionProperty,
+} from '../properties';
+
+describe('when a property is missing', () => {
+    const properties: Record<string, unknown> = {};
+
+    it('should read no string', () => (stringProperty(properties, 'title') === undefined).should.be.true);
+    it('should read no boolean', () => (booleanProperty(properties, 'panel') === undefined).should.be.true);
+    it('should read no number', () => (numberProperty(properties, 'rows') === undefined).should.be.true);
+    it('should read no array', () => (arrayProperty(properties, 'options') === undefined).should.be.true);
+    it('should read no string array', () => (stringArrayProperty(properties, 'fields') === undefined).should.be.true);
+    it('should read no object array', () => (objectArrayProperty(properties, 'options') === undefined).should.be.true);
+    it('should read no object', () => (objectProperty(properties, 'schema') === undefined).should.be.true);
+    it('should read no union value', () => (unionProperty(properties, 'orientation', ['vertical', 'horizontal']) === undefined).should.be.true);
+});

package/for_properties/when_a_property_is_present.ts

@@ -0,0 +1,36 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import {
+    arrayProperty,
+    booleanProperty,
+    numberProperty,
+    objectArrayProperty,
+    objectProperty,
+    stringArrayProperty,
+    stringProperty,
+    unionProperty,
+} from '../properties';
+
+describe('when a property is present', () => {
+    const properties: Record<string, unknown> = {
+        title: 'Invoices',
+        panel: false,
+        rows: 0,
+        options: [{ label: 'Draft', value: 'draft' }],
+        fields: ['number', 'customer'],
+        schema: { type: 'object' },
+        orientation: 'vertical',
+    };
+
+    it('should read the string', () => stringProperty(properties, 'title')!.should.equal('Invoices'));
+    it('should read a false boolean rather than treating it as absent', () => booleanProperty(properties, 'panel')!.should.equal(false));
+    it('should read a zero number rather than treating it as absent', () => numberProperty(properties, 'rows')!.should.equal(0));
+    it('should read the array', () => arrayProperty(properties, 'options')!.should.have.lengthOf(1));
+    it('should read the string array', () => stringArrayProperty(properties, 'fields')!.should.deep.equal(['number', 'customer']));
+    it('should read the object array', () => objectArrayProperty(properties, 'options')!.should.deep.equal([{ label: 'Draft', value: 'draft' }]));
+    it('should read the object', () => objectProperty(properties, 'schema')!.should.deep.equal({ type: 'object' }));
+
+    it('should read a value that is in the allowed union', () =>
+        unionProperty(properties, 'orientation', ['vertical', 'horizontal'])!.should.equal('vertical'));
+});

package/forms/SceneCommandForm.tsx

@@ -0,0 +1,45 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { ComponentType, lazy } from 'react';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { ArcRuntimeBoundary, BindingKind, BoundConstructor, MissingBinding, resolveElementBinding } from '../bindings';
+import { stringArrayProperty } from '../properties';
+
+interface AutoCommandFormElementProps {
+    command: BoundConstructor;
+    exclude?: string[];
+}
+
+/**
+ * `AutoCommandForm` types `exclude` as `(keyof TCommand)[]`, which collapses to `never[]` when the
+ * command type is only known at runtime - as it always is here, since the class arrives from the binding
+ * registry rather than from a type annotation. The conversion states the shape this adapter actually
+ * passes; the underlying component reads `exclude` as property names either way.
+ */
+const AutoCommandForm = lazy(async () => ({
+    default: (await import('@cratis/components/CommandForm')).AutoCommandForm as unknown as ComponentType<AutoCommandFormElementProps>,
+}));
+
+/**
+ * The `Cratis.Components:commandForm` component - `AutoCommandForm` from `@cratis/components/CommandForm`.
+ *
+ * `AutoCommandForm` rather than `CommandForm`, because a screen that had to list every field by hand
+ * would go stale the moment a property is added to the command on the backend. `AutoCommandForm` reads
+ * the command's own property descriptors and picks a field component per property type, so the form
+ * follows the command - which is the same guarantee Arc's generated proxies give the rest of the stack.
+ *
+ * A screen that does want to place fields itself puts the field components from this package in the
+ * `content` slot and names them individually; `exclude` keeps `AutoCommandForm` from generating a second
+ * copy of anything placed that way.
+ */
+export function SceneCommandForm({ element }: RegisteredComponentProps) {
+    const { name, target } = resolveElementBinding(element, BindingKind.Command);
+    if (!target) return <MissingBinding element={element} kind={BindingKind.Command} name={name} />;
+
+    return (
+        <ArcRuntimeBoundary>
+            <AutoCommandForm command={target} exclude={stringArrayProperty(element.properties, 'exclude')} />
+        </ArcRuntimeBoundary>
+    );
+}

package/forms/fields/CommandFormField.tsx

@@ -0,0 +1,32 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { ReactNode } from 'react';
+import { ExternalComponent } from '@cratis/scene.model';
+import { ArcRuntimeBoundary, Placeholder } from '../../bindings';
+import { FieldBinding } from './FieldBinding';
+import { resolveFieldBinding } from './resolveFieldBinding';
+
+export interface CommandFormFieldProps {
+    /** The element being adapted, read for its `property`, `title` and `description`. */
+    element: ExternalComponent;
+
+    /** Renders the real `@cratis/components` field, given the binding built from the element. */
+    children: (binding: FieldBinding) => ReactNode;
+}
+
+/**
+ * The part every command form field adapter does identically: resolve the element's `property` into a
+ * {@link FieldBinding}, place a visible placeholder when there is none, and isolate the lazily loaded
+ * Arc-bound field behind an {@link ArcRuntimeBoundary}.
+ *
+ * Factored out rather than repeated twelve times so that the behavior a screen author depends on - an
+ * unbound field shows up as an unbound field, and one broken field does not take the form with it - is
+ * defined once and cannot drift between field types.
+ */
+export function CommandFormField({ element, children }: CommandFormFieldProps) {
+    const binding = resolveFieldBinding(element);
+    if (!binding) return <Placeholder element={element} problem="Missing 'property'" />;
+
+    return <ArcRuntimeBoundary>{children(binding)}</ArcRuntimeBoundary>;
+}

package/forms/fields/FieldBinding.ts

@@ -0,0 +1,26 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/**
+ * What every `@cratis/components` command form field needs in order to bind itself to one property of
+ * the command the surrounding form is editing.
+ *
+ * The library's fields take an *accessor* (`value={command => command.name}`) rather than a property
+ * name, so that a hand-written form is typechecked end to end against the generated command proxy. A
+ * screen has no types to check against - it carries the property name as a string - so this is where the
+ * name becomes the accessor the field expects.
+ */
+export interface FieldBinding {
+    /**
+     * Reads the bound property off the command instance the form hands in. Built from the screen's
+     * `property` name, which is the only form the binding can take once it has been through a `.play`
+     * file.
+     */
+    value: (instance: Record<string, unknown>) => unknown;
+
+    /** The label rendered with the field. */
+    title: string;
+
+    /** Helper text rendered under the field, when the screen supplies any. */
+    description?: string;
+}

package/forms/fields/SceneCalendarField.tsx

@@ -0,0 +1,41 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { lazy } from 'react';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { booleanProperty, stringProperty, unionProperty } from '../../properties';
+import { CommandFormField } from './CommandFormField';
+
+const CalendarField = lazy(async () => ({ default: (await import('@cratis/components/CommandForm')).CalendarField }));
+
+/** Whether times are shown on a 12- or 24-hour clock. */
+const hourFormats = ['12', '24'] as const;
+
+/**
+ * The `Cratis.Components:calendarField` component - `CalendarField` from `@cratis/components/CommandForm`.
+ *
+ * Binds to a `Date` property, so the command receives a real date rather than the string an
+ * `<input type="date">` produces - which matters because the backend's command record is typed and a
+ * string would fail model binding rather than the field.
+ *
+ * `minDate` and `maxDate` are deliberately not exposed: they would have to come out of the property bag
+ * as strings and be parsed here, and a bound range that silently misparses is worse than no bound range.
+ * A date range that has to be enforced belongs in the command's validator, where it is authoritative.
+ */
+export function SceneCalendarField({ element }: RegisteredComponentProps) {
+    return (
+        <CommandFormField element={element}>
+            {binding => (
+                <CalendarField
+                    {...binding}
+                    placeholder={stringProperty(element.properties, 'placeholder')}
+                    dateFormat={stringProperty(element.properties, 'dateFormat')}
+                    showIcon={booleanProperty(element.properties, 'showIcon')}
+                    showTime={booleanProperty(element.properties, 'showTime')}
+                    hourFormat={unionProperty(element.properties, 'hourFormat', hourFormats)}
+                    className={stringProperty(element.properties, 'className')}
+                />
+            )}
+        </CommandFormField>
+    );
+}

package/forms/fields/SceneCheckboxField.tsx

@@ -0,0 +1,29 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { lazy } from 'react';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { stringProperty } from '../../properties';
+import { CommandFormField } from './CommandFormField';
+
+const CheckboxField = lazy(async () => ({ default: (await import('@cratis/components/CommandForm')).CheckboxField }));
+
+/**
+ * The `Cratis.Components:checkboxField` component - `CheckboxField` from `@cratis/components/CommandForm`.
+ *
+ * `label` is the text beside the box and is distinct from `title`, which is the field's own label above
+ * it - a checkbox usually wants only one of the two, and which one is a layout decision the screen makes.
+ */
+export function SceneCheckboxField({ element }: RegisteredComponentProps) {
+    return (
+        <CommandFormField element={element}>
+            {binding => (
+                <CheckboxField
+                    {...binding}
+                    label={stringProperty(element.properties, 'label')}
+                    className={stringProperty(element.properties, 'className')}
+                />
+            )}
+        </CommandFormField>
+    );
+}

package/forms/fields/SceneChipsField.tsx

@@ -0,0 +1,34 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { lazy } from 'react';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { booleanProperty, numberProperty, stringProperty } from '../../properties';
+import { CommandFormField } from './CommandFormField';
+
+const ChipsField = lazy(async () => ({ default: (await import('@cratis/components/CommandForm')).ChipsField }));
+
+/**
+ * The `Cratis.Components:chipsField` component - `ChipsField` from `@cratis/components/CommandForm`.
+ *
+ * A free-form list of strings - tags, labels, recipients - where the values are typed rather than picked.
+ * `multiSelectField` is the right choice whenever the values come from a known set; this one exists for
+ * when they do not.
+ */
+export function SceneChipsField({ element }: RegisteredComponentProps) {
+    return (
+        <CommandFormField element={element}>
+            {binding => (
+                <ChipsField
+                    {...binding}
+                    placeholder={stringProperty(element.properties, 'placeholder')}
+                    max={numberProperty(element.properties, 'max')}
+                    separator={stringProperty(element.properties, 'separator')}
+                    addOnBlur={booleanProperty(element.properties, 'addOnBlur')}
+                    allowDuplicate={booleanProperty(element.properties, 'allowDuplicate')}
+                    className={stringProperty(element.properties, 'className')}
+                />
+            )}
+        </CommandFormField>
+    );
+}

package/forms/fields/SceneColorPickerField.tsx

@@ -0,0 +1,31 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { lazy } from 'react';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { booleanProperty, stringProperty } from '../../properties';
+import { CommandFormField } from './CommandFormField';
+
+const ColorPickerField = lazy(async () => ({ default: (await import('@cratis/components/CommandForm')).ColorPickerField }));
+
+/**
+ * The `Cratis.Components:colorPickerField` component - `ColorPickerField` from
+ * `@cratis/components/CommandForm`.
+ *
+ * Binds a color to a string property. `inline` decides whether the picker is always open or opens from a
+ * swatch, which is a layout decision rather than a behavioral one.
+ */
+export function SceneColorPickerField({ element }: RegisteredComponentProps) {
+    return (
+        <CommandFormField element={element}>
+            {binding => (
+                <ColorPickerField
+                    {...binding}
+                    inline={booleanProperty(element.properties, 'inline')}
+                    defaultColor={stringProperty(element.properties, 'defaultColor')}
+                    className={stringProperty(element.properties, 'className')}
+                />
+            )}
+        </CommandFormField>
+    );
+}

package/forms/fields/SceneDropdownField.tsx

@@ -0,0 +1,36 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { lazy } from 'react';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { objectArrayProperty, stringProperty } from '../../properties';
+import { CommandFormField } from './CommandFormField';
+
+const DropdownField = lazy(async () => ({ default: (await import('@cratis/components/CommandForm')).DropdownField }));
+
+/**
+ * The `Cratis.Components:dropdownField` component - `DropdownField` from `@cratis/components/CommandForm`.
+ *
+ * Single selection from a fixed list the screen carries inline. `optionLabel` and `optionValue` default
+ * to `label` and `value`, the shape an authored list takes when nobody says otherwise, so the common
+ * case needs only `options`.
+ *
+ * Options that have to come from the backend are a different component: bind the list to a query with
+ * `dataTable`, or register the lookup as its own query. A property bag is the wrong place for data.
+ */
+export function SceneDropdownField({ element }: RegisteredComponentProps) {
+    return (
+        <CommandFormField element={element}>
+            {binding => (
+                <DropdownField
+                    {...binding}
+                    options={objectArrayProperty(element.properties, 'options') ?? []}
+                    optionLabel={stringProperty(element.properties, 'optionLabel') ?? 'label'}
+                    optionValue={stringProperty(element.properties, 'optionValue') ?? 'value'}
+                    placeholder={stringProperty(element.properties, 'placeholder')}
+                    className={stringProperty(element.properties, 'className')}
+                />
+            )}
+        </CommandFormField>
+    );
+}

package/forms/fields/SceneInputTextField.tsx

@@ -0,0 +1,37 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { lazy } from 'react';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { stringProperty, unionProperty } from '../../properties';
+import { CommandFormField } from './CommandFormField';
+
+const InputTextField = lazy(async () => ({ default: (await import('@cratis/components/CommandForm')).InputTextField }));
+
+/**
+ * The HTML input types `InputTextField` supports, as a tuple so `unionProperty` narrows an authored
+ * string to exactly one of them and falls back to the component's own default for anything else.
+ */
+const inputTypes = ['text', 'email', 'password', 'color', 'date', 'datetime-local', 'time', 'url', 'tel', 'search'] as const;
+
+/**
+ * The `Cratis.Components:inputTextField` component - `InputTextField` from `@cratis/components/CommandForm`.
+ *
+ * The single-line text field, and the one a screen reaches for most. `type` carries all the way through
+ * to the HTML input, so `email`, `password` and `url` fields are this component too rather than separate
+ * names - the browser's own keyboard and validation behavior is what differs, not the binding.
+ */
+export function SceneInputTextField({ element }: RegisteredComponentProps) {
+    return (
+        <CommandFormField element={element}>
+            {binding => (
+                <InputTextField
+                    {...binding}
+                    type={unionProperty(element.properties, 'type', inputTypes)}
+                    placeholder={stringProperty(element.properties, 'placeholder')}
+                    className={stringProperty(element.properties, 'className')}
+                />
+            )}
+        </CommandFormField>
+    );
+}

package/forms/fields/SceneMultiSelectField.tsx

@@ -0,0 +1,40 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { lazy } from 'react';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { booleanProperty, numberProperty, objectArrayProperty, stringProperty, unionProperty } from '../../properties';
+import { CommandFormField } from './CommandFormField';
+
+const MultiSelectField = lazy(async () => ({ default: (await import('@cratis/components/CommandForm')).MultiSelectField }));
+
+/** How the current selection is summarized in the closed control. */
+const displayModes = ['comma', 'chip'] as const;
+
+/**
+ * The `Cratis.Components:multiSelectField` component - `MultiSelectField` from
+ * `@cratis/components/CommandForm`.
+ *
+ * The many-valued counterpart to `dropdownField`, binding to a collection property on the command rather
+ * than a scalar one.
+ */
+export function SceneMultiSelectField({ element }: RegisteredComponentProps) {
+    return (
+        <CommandFormField element={element}>
+            {binding => (
+                <MultiSelectField
+                    {...binding}
+                    options={objectArrayProperty(element.properties, 'options') ?? []}
+                    optionLabel={stringProperty(element.properties, 'optionLabel') ?? 'label'}
+                    optionValue={stringProperty(element.properties, 'optionValue') ?? 'value'}
+                    placeholder={stringProperty(element.properties, 'placeholder')}
+                    display={unionProperty(element.properties, 'display', displayModes)}
+                    maxSelectedLabels={numberProperty(element.properties, 'maxSelectedLabels')}
+                    filter={booleanProperty(element.properties, 'filter')}
+                    showClear={booleanProperty(element.properties, 'showClear')}
+                    className={stringProperty(element.properties, 'className')}
+                />
+            )}
+        </CommandFormField>
+    );
+}

package/forms/fields/SceneNumberField.tsx

@@ -0,0 +1,33 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { lazy } from 'react';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { numberProperty, stringProperty } from '../../properties';
+import { CommandFormField } from './CommandFormField';
+
+const NumberField = lazy(async () => ({ default: (await import('@cratis/components/CommandForm')).NumberField }));
+
+/**
+ * The `Cratis.Components:numberField` component - `NumberField` from `@cratis/components/CommandForm`.
+ *
+ * PrimeReact's `InputNumber` behind the command binding, so the bound property stays a number rather
+ * than the string an `<input type="number">` would hand back. `min`, `max` and `step` are client-side
+ * affordances only - the authoritative check is still the backend's validation on the command.
+ */
+export function SceneNumberField({ element }: RegisteredComponentProps) {
+    return (
+        <CommandFormField element={element}>
+            {binding => (
+                <NumberField
+                    {...binding}
+                    placeholder={stringProperty(element.properties, 'placeholder')}
+                    min={numberProperty(element.properties, 'min')}
+                    max={numberProperty(element.properties, 'max')}
+                    step={numberProperty(element.properties, 'step')}
+                    className={stringProperty(element.properties, 'className')}
+                />
+            )}
+        </CommandFormField>
+    );
+}

package/forms/fields/SceneRadioButtonField.tsx

@@ -0,0 +1,37 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { lazy } from 'react';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { numberProperty, stringProperty } from '../../properties';
+import { CommandFormField } from './CommandFormField';
+
+const RadioButtonField = lazy(async () => ({ default: (await import('@cratis/components/CommandForm')).RadioButtonField }));
+
+/**
+ * The `Cratis.Components:radioButtonField` component - `RadioButtonField` from
+ * `@cratis/components/CommandForm`.
+ *
+ * One button of a mutually exclusive set, for a screen that needs the choices placed individually rather
+ * than as a block. `buttonValue` is the value this particular button writes to the bound property, and
+ * the whole set is tied together by every button naming the same `property`.
+ *
+ * `buttonValue` is read as a string first and a number second, since a choice is usually a string but a
+ * numeric code is common enough that forcing it through as `'1'` would bind the wrong value.
+ */
+export function SceneRadioButtonField({ element }: RegisteredComponentProps) {
+    const buttonValue = stringProperty(element.properties, 'buttonValue') ?? numberProperty(element.properties, 'buttonValue') ?? '';
+
+    return (
+        <CommandFormField element={element}>
+            {binding => (
+                <RadioButtonField
+                    {...binding}
+                    buttonValue={buttonValue}
+                    label={stringProperty(element.properties, 'label')}
+                    className={stringProperty(element.properties, 'className')}
+                />
+            )}
+        </CommandFormField>
+    );
+}

package/forms/fields/SceneRadioGroupField.tsx

@@ -0,0 +1,36 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { lazy } from 'react';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { objectArrayProperty, stringProperty, unionProperty } from '../../properties';
+import { CommandFormField } from './CommandFormField';
+
+const RadioGroupField = lazy(async () => ({ default: (await import('@cratis/components/CommandForm')).RadioGroupField }));
+
+/** Whether the group's buttons stack or sit in a row. */
+const layouts = ['horizontal', 'vertical'] as const;
+
+/**
+ * The `Cratis.Components:radioGroupField` component - `RadioGroupField` from
+ * `@cratis/components/CommandForm`.
+ *
+ * A whole mutually exclusive choice from one options list, which is what a screen almost always wants.
+ * Use `radioButtonField` only when the individual buttons have to be placed apart from one another.
+ */
+export function SceneRadioGroupField({ element }: RegisteredComponentProps) {
+    return (
+        <CommandFormField element={element}>
+            {binding => (
+                <RadioGroupField
+                    {...binding}
+                    options={objectArrayProperty(element.properties, 'options') ?? []}
+                    optionLabel={stringProperty(element.properties, 'optionLabel') ?? 'label'}
+                    optionValue={stringProperty(element.properties, 'optionValue') ?? 'value'}
+                    layout={unionProperty(element.properties, 'layout', layouts)}
+                    className={stringProperty(element.properties, 'className')}
+                />
+            )}
+        </CommandFormField>
+    );
+}

package/forms/fields/SceneSliderField.tsx

@@ -0,0 +1,32 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { lazy } from 'react';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { numberProperty, stringProperty } from '../../properties';
+import { CommandFormField } from './CommandFormField';
+
+const SliderField = lazy(async () => ({ default: (await import('@cratis/components/CommandForm')).SliderField }));
+
+/**
+ * The `Cratis.Components:sliderField` component - `SliderField` from `@cratis/components/CommandForm`.
+ *
+ * A numeric field where the range itself is the point - a percentage, a threshold, a weighting. Prefer
+ * `numberField` whenever the exact value matters more than its position in a range; a slider trades
+ * precision for a sense of scale, and that is only ever a deliberate choice.
+ */
+export function SceneSliderField({ element }: RegisteredComponentProps) {
+    return (
+        <CommandFormField element={element}>
+            {binding => (
+                <SliderField
+                    {...binding}
+                    min={numberProperty(element.properties, 'min')}
+                    max={numberProperty(element.properties, 'max')}
+                    step={numberProperty(element.properties, 'step')}
+                    className={stringProperty(element.properties, 'className')}
+                />
+            )}
+        </CommandFormField>
+    );
+}

package/forms/fields/SceneTextAreaField.tsx

@@ -0,0 +1,32 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { lazy } from 'react';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { numberProperty, stringProperty } from '../../properties';
+import { CommandFormField } from './CommandFormField';
+
+const TextAreaField = lazy(async () => ({ default: (await import('@cratis/components/CommandForm')).TextAreaField }));
+
+/**
+ * The `Cratis.Components:textAreaField` component - `TextAreaField` from `@cratis/components/CommandForm`.
+ *
+ * The multi-line counterpart to `inputTextField`. A separate name rather than a `multiline` flag on that
+ * one, because the two wrap different PrimeReact inputs and take different sizing props - collapsing
+ * them would mean a `rows` property that is meaningless half the time.
+ */
+export function SceneTextAreaField({ element }: RegisteredComponentProps) {
+    return (
+        <CommandFormField element={element}>
+            {binding => (
+                <TextAreaField
+                    {...binding}
+                    placeholder={stringProperty(element.properties, 'placeholder')}
+                    rows={numberProperty(element.properties, 'rows')}
+                    cols={numberProperty(element.properties, 'cols')}
+                    className={stringProperty(element.properties, 'className')}
+                />
+            )}
+        </CommandFormField>
+    );
+}