@cratis/scene.components 0.1.0

package/bindings/Placeholder.tsx

@@ -0,0 +1,42 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { ExternalComponent } from '@cratis/scene.model';
+
+export interface PlaceholderProps {
+    /**
+     * The element that could not be rendered as configured. Its `componentName` names what was being
+     * rendered, which is most of what makes the placeholder actionable.
+     */
+    element: ExternalComponent;
+
+    /**
+     * What is wrong, phrased as the problem rather than the remedy - `Unresolved query binding 'AllInvoices'`.
+     */
+    problem: string;
+}
+
+/**
+ * The stand-in an adapter renders when it has been given a screen it cannot honor - a binding name
+ * nothing is registered under, or a required property the screen never set.
+ *
+ * Deliberately the same presentation as `UnresolvedComponent` in `@cratis/scene.react`: a dashed red box
+ * that states the problem in monospace. They are the same class of failure seen at two different depths -
+ * the renderer could not find the component, or the component could not find what it needs - and a
+ * designer scanning a preview should recognize both instantly as "something here is not wired up".
+ *
+ * Rendering this rather than throwing is the whole point. Studio's design-time preview usually has no
+ * bindings registered at all, and it still has to show a usable layout: one unbound table must cost one
+ * dashed box, not the entire screen.
+ */
+export function Placeholder({ element, problem }: PlaceholderProps) {
+    return (
+        <div
+            data-scene-id={element.id}
+            data-scene-placeholder={element.componentName}
+            style={{ border: '1px dashed red', color: 'red', padding: '0.25rem 0.5rem', fontFamily: 'monospace' }}
+        >
+            {problem} on {element.componentName}
+        </div>
+    );
+}

package/bindings/bindingRegistry.ts

@@ -0,0 +1,105 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { BoundConstructor } from './BoundConstructor';
+
+const queries = new Map<string, BoundConstructor>();
+const commands = new Map<string, BoundConstructor>();
+
+/**
+ * Registers an Arc query proxy under the name screens refer to it by.
+ *
+ * This is the seam that makes the Arc-bound half of `@cratis/components` usable from Scene at all. A
+ * screen says `data Invoices via query AllInvoices`, and by the time that reaches a renderer it is an
+ * `ExternalComponent` whose `properties` bag holds the *string* `'AllInvoices'` - a property bag carries
+ * plain values and named slots, and there is no way to put a TypeScript class into one. `DataTableForQuery`
+ * needs the class. The name is the only thing that survives the trip, so the name is what the lookup has
+ * to be keyed on, and a host that owns the generated proxies is the only party that can supply the class
+ * behind it.
+ *
+ * A host - Stage's generated application, or Studio's preview when it is wired to a real backend -
+ * registers every proxy a screen can name, once, during startup. Registering the same name twice
+ * replaces the earlier registration, so a host can re-register on hot reload without having to unwind
+ * the previous run.
+ */
+export function registerQuery(name: string, queryClass: BoundConstructor): void {
+    queries.set(name, queryClass);
+}
+
+/**
+ * Registers several query proxies at once, keyed by the name screens refer to each by.
+ *
+ * Stage generates a module that exports every proxy it produced; handing that module's exports straight
+ * to this is the whole of a generated host's registration step, and it stays correct as proxies are
+ * added and removed without anyone editing a list.
+ */
+export function registerQueries(bindings: Record<string, BoundConstructor>): void {
+    for (const [name, queryClass] of Object.entries(bindings)) {
+        registerQuery(name, queryClass);
+    }
+}
+
+/**
+ * The query proxy registered under a name, or `undefined` when nothing is registered under it.
+ *
+ * `undefined` rather than a throw: design-time preview in Studio normally has nothing registered at all,
+ * and a screen still has to render so its layout can be worked on. Every adapter turns `undefined` into
+ * a visible placeholder naming the binding it wanted.
+ */
+export function resolveQuery(name: string): BoundConstructor | undefined {
+    return queries.get(name);
+}
+
+/**
+ * Registers an Arc command proxy under the name screens refer to it by. The command half of
+ * {@link registerQuery}, with the same contract.
+ */
+export function registerCommand(name: string, commandClass: BoundConstructor): void {
+    commands.set(name, commandClass);
+}
+
+/**
+ * Registers several command proxies at once, keyed by the name screens refer to each by.
+ */
+export function registerCommands(bindings: Record<string, BoundConstructor>): void {
+    for (const [name, commandClass] of Object.entries(bindings)) {
+        registerCommand(name, commandClass);
+    }
+}
+
+/**
+ * The command proxy registered under a name, or `undefined` when nothing is registered under it.
+ */
+export function resolveCommand(name: string): BoundConstructor | undefined {
+    return commands.get(name);
+}
+
+/**
+ * Every registered query name, sorted.
+ *
+ * A design-time tool uses this to offer the names a screen can actually bind to, and a diagnostics
+ * surface uses it to explain a placeholder - "this screen wants `AllInvoices`, and here is what is
+ * registered" is a far more useful message than the placeholder alone.
+ */
+export function registeredQueryNames(): string[] {
+    return [...queries.keys()].sort();
+}
+
+/**
+ * Every registered command name, sorted.
+ */
+export function registeredCommandNames(): string[] {
+    return [...commands.keys()].sort();
+}
+
+/**
+ * Forgets every registered query and command.
+ *
+ * The registry is module-level state, which is right for a host that registers once at startup but wrong
+ * for anything that switches between applications - Studio previewing a different project, or a spec
+ * that must not inherit what the previous one registered. Both need a way back to empty.
+ */
+export function clearBindings(): void {
+    queries.clear();
+    commands.clear();
+}

package/bindings/for_bindingRegistry/when_a_command_is_registered.ts

@@ -0,0 +1,30 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { clearBindings, registerCommand, registerCommands, registeredCommandNames, resolveCommand, resolveQuery } from '../bindingRegistry';
+
+class RegisterInvoice {}
+class ApproveInvoice {}
+class RegisterInvoiceV2 {}
+
+describe('when a command is registered', () => {
+    beforeEach(() => {
+        clearBindings();
+        registerCommand('RegisterInvoice', RegisterInvoice);
+        registerCommands({ ApproveInvoice });
+    });
+
+    afterEach(() => clearBindings());
+
+    it('should resolve the class registered under the name', () => resolveCommand('RegisterInvoice')!.should.equal(RegisterInvoice));
+    it('should resolve every class registered in bulk', () => resolveCommand('ApproveInvoice')!.should.equal(ApproveInvoice));
+    it('should list every registered name in sorted order', () => registeredCommandNames().should.deep.equal(['ApproveInvoice', 'RegisterInvoice']));
+    it('should not resolve the same name as a query', () => (resolveQuery('RegisterInvoice') === undefined).should.be.true);
+
+    describe('and the same name is registered again', () => {
+        beforeEach(() => registerCommand('RegisterInvoice', RegisterInvoiceV2));
+
+        it('should resolve to the class registered last', () => resolveCommand('RegisterInvoice')!.should.equal(RegisterInvoiceV2));
+        it('should not list the name twice', () => registeredCommandNames().should.deep.equal(['ApproveInvoice', 'RegisterInvoice']));
+    });
+});

package/bindings/for_bindingRegistry/when_a_query_is_not_registered.ts

@@ -0,0 +1,17 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { clearBindings, registerQuery, resolveQuery } from '../bindingRegistry';
+
+class AllInvoices {}
+
+describe('when a query is not registered', () => {
+    beforeEach(() => {
+        clearBindings();
+        registerQuery('AllInvoices', AllInvoices);
+    });
+
+    afterEach(() => clearBindings());
+
+    it('should resolve to undefined rather than throwing', () => (resolveQuery('AllCustomers') === undefined).should.be.true);
+});

package/bindings/for_bindingRegistry/when_a_query_is_registered.ts

@@ -0,0 +1,30 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { clearBindings, registerQueries, registerQuery, registeredQueryNames, resolveCommand, resolveQuery } from '../bindingRegistry';
+
+class AllInvoices {}
+class InvoiceById {}
+class OverdueInvoices {}
+
+describe('when a query is registered', () => {
+    beforeEach(() => {
+        clearBindings();
+        registerQuery('AllInvoices', AllInvoices);
+        registerQueries({ InvoiceById, OverdueInvoices });
+    });
+
+    afterEach(() => clearBindings());
+
+    it('should resolve the class registered under the name', () => resolveQuery('AllInvoices')!.should.equal(AllInvoices));
+
+    it('should resolve every class registered in bulk', () => {
+        resolveQuery('InvoiceById')!.should.equal(InvoiceById);
+        resolveQuery('OverdueInvoices')!.should.equal(OverdueInvoices);
+    });
+
+    it('should list every registered name in sorted order', () =>
+        registeredQueryNames().should.deep.equal(['AllInvoices', 'InvoiceById', 'OverdueInvoices']));
+
+    it('should not resolve the same name as a command', () => (resolveCommand('AllInvoices') === undefined).should.be.true);
+});

package/bindings/for_bindingRegistry/when_bindings_are_cleared.ts

@@ -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 {
+    clearBindings,
+    registerCommand,
+    registerQuery,
+    registeredCommandNames,
+    registeredQueryNames,
+    resolveCommand,
+    resolveQuery,
+} from '../bindingRegistry';
+
+class AllInvoices {}
+class RegisterInvoice {}
+
+describe('when bindings are cleared', () => {
+    beforeEach(() => {
+        clearBindings();
+        registerQuery('AllInvoices', AllInvoices);
+        registerCommand('RegisterInvoice', RegisterInvoice);
+        clearBindings();
+    });
+
+    it('should no longer resolve the query', () => (resolveQuery('AllInvoices') === undefined).should.be.true);
+    it('should no longer resolve the command', () => (resolveCommand('RegisterInvoice') === undefined).should.be.true);
+    it('should list no query names', () => registeredQueryNames().should.be.empty);
+    it('should list no command names', () => registeredCommandNames().should.be.empty);
+});

package/bindings/for_resolveElementBinding/when_resolving_a_command_binding.ts

@@ -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 { externalComponent } from '../../given';
+import { BindingKind } from '../BindingKind';
+import { clearBindings, registerCommand, registerQuery } from '../bindingRegistry';
+import { resolveElementBinding } from '../resolveElementBinding';
+
+class RegisterInvoice {}
+class SameNameQuery {}
+
+describe('when resolving a command binding', () => {
+    beforeEach(() => {
+        clearBindings();
+        registerCommand('RegisterInvoice', RegisterInvoice);
+        registerQuery('ApproveInvoice', SameNameQuery);
+    });
+
+    afterEach(() => clearBindings());
+
+    describe('and the element names a registered command', () => {
+        const binding = () =>
+            resolveElementBinding(externalComponent('Cratis.Components:commandForm', { command: 'RegisterInvoice' }), BindingKind.Command);
+
+        it('should carry the registered class', () => binding().target!.should.equal(RegisterInvoice));
+    });
+
+    describe('and a query happens to be registered under the same name', () => {
+        const binding = () =>
+            resolveElementBinding(externalComponent('Cratis.Components:commandForm', { command: 'ApproveInvoice' }), BindingKind.Command);
+
+        it('should not satisfy a command binding from the query registry', () => (binding().target === undefined).should.be.true);
+    });
+});

package/bindings/for_resolveElementBinding/when_resolving_a_query_binding.ts

@@ -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 { externalComponent } from '../../given';
+import { BindingKind } from '../BindingKind';
+import { clearBindings, registerQuery } from '../bindingRegistry';
+import { resolveElementBinding } from '../resolveElementBinding';
+
+class AllInvoices {}
+
+describe('when resolving a query binding', () => {
+    beforeEach(() => {
+        clearBindings();
+        registerQuery('AllInvoices', AllInvoices);
+    });
+
+    afterEach(() => clearBindings());
+
+    describe('and the element names a registered query', () => {
+        const binding = () => resolveElementBinding(externalComponent('Cratis.Components:dataTable', { query: 'AllInvoices' }), BindingKind.Query);
+
+        it('should carry the name the element asked for', () => binding().name!.should.equal('AllInvoices'));
+        it('should carry the registered class', () => binding().target!.should.equal(AllInvoices));
+    });
+
+    describe('and the element names a query nothing is registered under', () => {
+        const binding = () => resolveElementBinding(externalComponent('Cratis.Components:dataTable', { query: 'AllCustomers' }), BindingKind.Query);
+
+        it('should still carry the name, so the placeholder can report it', () => binding().name!.should.equal('AllCustomers'));
+        it('should carry no class', () => (binding().target === undefined).should.be.true);
+    });
+
+    describe('and the element names no query at all', () => {
+        const binding = () => resolveElementBinding(externalComponent('Cratis.Components:dataTable'), BindingKind.Query);
+
+        it('should carry no name', () => (binding().name === undefined).should.be.true);
+        it('should carry no class', () => (binding().target === undefined).should.be.true);
+    });
+
+    describe('and the element carries the name under the command property instead', () => {
+        const binding = () => resolveElementBinding(externalComponent('Cratis.Components:dataTable', { command: 'AllInvoices' }), BindingKind.Query);
+
+        it('should not read a command name as a query name', () => (binding().name === undefined).should.be.true);
+    });
+});

package/bindings/index.ts

@@ -0,0 +1,11 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+export * from './BindingKind';
+export * from './BoundConstructor';
+export * from './ElementBinding';
+export * from './bindingRegistry';
+export * from './resolveElementBinding';
+export * from './Placeholder';
+export * from './MissingBinding';
+export * from './ArcRuntimeBoundary';

package/bindings/resolveElementBinding.ts

@@ -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 { ExternalComponent } from '@cratis/scene.model';
+import { stringProperty } from '../properties';
+import { BindingKind } from './BindingKind';
+import { ElementBinding } from './ElementBinding';
+import { resolveCommand, resolveQuery } from './bindingRegistry';
+
+/**
+ * The property an element carries its binding name in, per kind. Queries and commands use different
+ * property names so a single element could in principle carry both - a command dialog launched from a
+ * data page, say - without the two names colliding.
+ */
+const bindingPropertyNames: Record<BindingKind, string> = {
+    [BindingKind.Query]: 'query',
+    [BindingKind.Command]: 'command',
+};
+
+/**
+ * Reads the binding name an element carries for the given kind and looks it up in the binding registry.
+ *
+ * Every Arc-bound adapter starts here, so the "name in, class out" step happens in exactly one place and
+ * every adapter reports a missing binding the same way. Nothing throws: an absent property and an
+ * unregistered name both come back as an {@link ElementBinding} with no `target`, which the adapter
+ * turns into a visible placeholder.
+ */
+export function resolveElementBinding(element: ExternalComponent, kind: BindingKind): ElementBinding {
+    const name = stringProperty(element.properties, bindingPropertyNames[kind]);
+    if (name === undefined) return {};
+
+    return { name, target: kind === BindingKind.Query ? resolveQuery(name) : resolveCommand(name) };
+}

package/common/SceneDropdown.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 { Dropdown } from '@cratis/components/Dropdown';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { booleanProperty, objectArrayProperty, stringProperty } from '../properties';
+
+/**
+ * The `Cratis.Components:dropdown` component - `Dropdown` from `@cratis/components/Dropdown`.
+ *
+ * The library's own `Dropdown` rather than PrimeReact's, because it carries the overlay z-index fix the
+ * library applies across every overlay it owns - a dropdown inside a dialog renders above the dialog
+ * instead of behind it, which is the single most common overlay bug in a PrimeReact application.
+ *
+ * This is the standalone dropdown, not the command-form one: it takes its options from the screen and is
+ * not bound to a command property. Use `dropdownField` inside a `commandForm`.
+ */
+export function SceneDropdown({ element }: RegisteredComponentProps) {
+    return (
+        <Dropdown
+            options={objectArrayProperty(element.properties, 'options') ?? []}
+            optionLabel={stringProperty(element.properties, 'optionLabel') ?? 'label'}
+            optionValue={stringProperty(element.properties, 'optionValue') ?? 'value'}
+            placeholder={stringProperty(element.properties, 'placeholder')}
+            disabled={booleanProperty(element.properties, 'disabled')}
+            showClear={booleanProperty(element.properties, 'showClear')}
+            filter={booleanProperty(element.properties, 'filter')}
+            className={stringProperty(element.properties, 'className')}
+        />
+    );
+}

package/common/SceneErrorBoundary.tsx

@@ -0,0 +1,17 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { ErrorBoundary } from '@cratis/components/Common';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+
+/**
+ * The `Cratis.Components:errorBoundary` component - `ErrorBoundary` from `@cratis/components/Common`.
+ *
+ * Lets a screen decide where a failure stops. React's default is that a throw anywhere unmounts the
+ * whole tree, which for a composed screen means one broken region takes the navigation with it; placing
+ * a boundary around a region scopes that to the region. Which regions deserve one is a design decision
+ * about the screen, which is precisely why it belongs in the screen rather than in the renderer.
+ */
+export function SceneErrorBoundary({ slots }: RegisteredComponentProps) {
+    return <ErrorBoundary>{slots.content}</ErrorBoundary>;
+}

package/common/SceneIcon.tsx

@@ -0,0 +1,18 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { IconDisplay } from '@cratis/components/Common';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { stringProperty } from '../properties';
+
+/**
+ * The `Cratis.Components:icon` component - `IconDisplay` from `@cratis/components/Common`.
+ *
+ * Takes an icon class name (`pi pi-check`) rather than an image, and normalizes the shorthand forms
+ * people actually write - `pi-check` on its own, or a bare name - into the class PrimeIcons expects.
+ * That normalization is the whole reason to route a screen's icons through this rather than emitting an
+ * `<i>`: a screen author writes what they remember and it still renders.
+ */
+export function SceneIcon({ element }: RegisteredComponentProps) {
+    return <IconDisplay icon={stringProperty(element.properties, 'icon') ?? ''} className={stringProperty(element.properties, 'className')} />;
+}

package/common/SceneTooltip.tsx

@@ -0,0 +1,28 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { Tooltip } from '@cratis/components/Common';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { booleanProperty, stringProperty, unionProperty } from '../properties';
+
+/** Which side of the wrapped content the tooltip appears on. */
+const positions = ['top', 'right', 'bottom', 'left'] as const;
+
+/**
+ * The `Cratis.Components:tooltip` component - `Tooltip` from `@cratis/components/Common`.
+ *
+ * Wraps whatever is in its `content` slot and explains it on hover. `disabled` exists so a screen can
+ * keep the wrapper in place while turning the hint off, rather than restructuring the element tree to
+ * remove it - the tree is authored, and a conditional wrapper would be a worse thing to model.
+ */
+export function SceneTooltip({ element, slots }: RegisteredComponentProps) {
+    return (
+        <Tooltip
+            content={stringProperty(element.properties, 'content') ?? ''}
+            position={unionProperty(element.properties, 'position', positions)}
+            disabled={booleanProperty(element.properties, 'disabled')}
+        >
+            {slots.content}
+        </Tooltip>
+    );
+}

package/common/index.ts

@@ -0,0 +1,7 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+export * from './SceneIcon';
+export * from './SceneTooltip';
+export * from './SceneErrorBoundary';
+export * from './SceneDropdown';

package/cratisComponents.ts

@@ -0,0 +1,91 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { ComponentRegistry, componentRegistryKey } from '@cratis/scene.react';
+import { SceneDataPage, SceneFormElement, ScenePage } from './pages';
+import { SceneDataTable, SceneObservableDataTable } from './data';
+import {
+    SceneCalendarField,
+    SceneCheckboxField,
+    SceneChipsField,
+    SceneColorPickerField,
+    SceneCommandForm,
+    SceneDropdownField,
+    SceneInputTextField,
+    SceneMultiSelectField,
+    SceneNumberField,
+    SceneRadioButtonField,
+    SceneRadioGroupField,
+    SceneSliderField,
+    SceneTextAreaField,
+} from './forms';
+import { SceneBusyIndicatorDialog, SceneCommandDialog, SceneConfirmationDialog, SceneDialog, SceneStepperCommandDialog } from './dialogs';
+import { SceneDropdown, SceneErrorBoundary, SceneIcon, SceneTooltip } from './common';
+import { SceneFilterPanel, SceneObjectContentEditor, SceneObjectNavigationalBar, SceneSchemaEditor, SceneTimeMachine } from './editors';
+import { SceneToolbar, SceneToolbarButton, SceneToolbarGroup, SceneToolbarSeparator } from './toolbar';
+
+/**
+ * The package name every component here is registered under, and the one a screen writes when it
+ * qualifies a name explicitly (`Cratis.Components.table`).
+ */
+export const cratisComponentsPackageName = 'Cratis.Components';
+
+/**
+ * The `Cratis.Components` package's component registry - the abstract names a screen can resolve to a
+ * real `@cratis/components` component.
+ *
+ * Names are `lowerCamelCase` and deliberately *abstract*: a screen names `dataTable`, not
+ * `DataTableForQuery`, so the same screen resolves against whichever package a profile ranks highest.
+ * Two of them - `table` and `dialog` - are names `core` and `PrimeReact` also declare, and that overlap
+ * is the point: a profile listing `core`, `PrimeReact`, `Cratis.Components` in that order resolves both
+ * here and records the others as shadowed, which is override priority doing exactly what it exists for.
+ *
+ * `table` and `dataTable` are the same component under two names. `dataTable` says what it is; `table`
+ * is what a screen written against the base vocabulary already says, and both should land on the
+ * query-aware implementation.
+ */
+export const cratisComponents: ComponentRegistry = {
+    [componentRegistryKey(cratisComponentsPackageName, 'page')]: ScenePage,
+    [componentRegistryKey(cratisComponentsPackageName, 'dataPage')]: SceneDataPage,
+    [componentRegistryKey(cratisComponentsPackageName, 'formElement')]: SceneFormElement,
+
+    [componentRegistryKey(cratisComponentsPackageName, 'dataTable')]: SceneDataTable,
+    [componentRegistryKey(cratisComponentsPackageName, 'table')]: SceneDataTable,
+    [componentRegistryKey(cratisComponentsPackageName, 'observableDataTable')]: SceneObservableDataTable,
+
+    [componentRegistryKey(cratisComponentsPackageName, 'commandForm')]: SceneCommandForm,
+    [componentRegistryKey(cratisComponentsPackageName, 'inputTextField')]: SceneInputTextField,
+    [componentRegistryKey(cratisComponentsPackageName, 'numberField')]: SceneNumberField,
+    [componentRegistryKey(cratisComponentsPackageName, 'checkboxField')]: SceneCheckboxField,
+    [componentRegistryKey(cratisComponentsPackageName, 'textAreaField')]: SceneTextAreaField,
+    [componentRegistryKey(cratisComponentsPackageName, 'dropdownField')]: SceneDropdownField,
+    [componentRegistryKey(cratisComponentsPackageName, 'sliderField')]: SceneSliderField,
+    [componentRegistryKey(cratisComponentsPackageName, 'calendarField')]: SceneCalendarField,
+    [componentRegistryKey(cratisComponentsPackageName, 'colorPickerField')]: SceneColorPickerField,
+    [componentRegistryKey(cratisComponentsPackageName, 'multiSelectField')]: SceneMultiSelectField,
+    [componentRegistryKey(cratisComponentsPackageName, 'chipsField')]: SceneChipsField,
+    [componentRegistryKey(cratisComponentsPackageName, 'radioButtonField')]: SceneRadioButtonField,
+    [componentRegistryKey(cratisComponentsPackageName, 'radioGroupField')]: SceneRadioGroupField,
+
+    [componentRegistryKey(cratisComponentsPackageName, 'dialog')]: SceneDialog,
+    [componentRegistryKey(cratisComponentsPackageName, 'confirmationDialog')]: SceneConfirmationDialog,
+    [componentRegistryKey(cratisComponentsPackageName, 'busyIndicatorDialog')]: SceneBusyIndicatorDialog,
+    [componentRegistryKey(cratisComponentsPackageName, 'commandDialog')]: SceneCommandDialog,
+    [componentRegistryKey(cratisComponentsPackageName, 'stepperCommandDialog')]: SceneStepperCommandDialog,
+
+    [componentRegistryKey(cratisComponentsPackageName, 'icon')]: SceneIcon,
+    [componentRegistryKey(cratisComponentsPackageName, 'tooltip')]: SceneTooltip,
+    [componentRegistryKey(cratisComponentsPackageName, 'dropdown')]: SceneDropdown,
+    [componentRegistryKey(cratisComponentsPackageName, 'errorBoundary')]: SceneErrorBoundary,
+
+    [componentRegistryKey(cratisComponentsPackageName, 'objectContentEditor')]: SceneObjectContentEditor,
+    [componentRegistryKey(cratisComponentsPackageName, 'objectNavigationalBar')]: SceneObjectNavigationalBar,
+    [componentRegistryKey(cratisComponentsPackageName, 'schemaEditor')]: SceneSchemaEditor,
+    [componentRegistryKey(cratisComponentsPackageName, 'timeMachine')]: SceneTimeMachine,
+    [componentRegistryKey(cratisComponentsPackageName, 'filterPanel')]: SceneFilterPanel,
+
+    [componentRegistryKey(cratisComponentsPackageName, 'toolbar')]: SceneToolbar,
+    [componentRegistryKey(cratisComponentsPackageName, 'toolbarButton')]: SceneToolbarButton,
+    [componentRegistryKey(cratisComponentsPackageName, 'toolbarGroup')]: SceneToolbarGroup,
+    [componentRegistryKey(cratisComponentsPackageName, 'toolbarSeparator')]: SceneToolbarSeparator,
+};