Adding more support for PrimeReact fields for CommandForm

Documentation/CommandForm/calendar-field.md

@@ -0,0 +1,38 @@
+# CalendarField
+
+`CalendarField` wraps the PrimeReact `Calendar` component for selecting date values.
+
+## Usage
+
+```tsx
+import { CommandDialog } from '@cratis/components';
+import { CalendarField } from '@cratis/components/CommandForm';
+
+<CommandDialog command={MyCommand} visible={visible} onHide={() => setVisible(false)}>
+    <CalendarField<MyCommand>
+        value={c => c.startDate}
+        placeholder="Select a date"
+        showIcon
+        dateFormat="mm/dd/yy"
+    />
+</CommandDialog>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `(instance: TCommand) => unknown` | - | **Required.** Accessor function that returns the bound property from the command instance. Pass the command type as the generic parameter for full type safety. |
+| `placeholder` | `string` | - | Placeholder text shown when no date is selected. |
+| `dateFormat` | `string` | PrimeReact default | Date display and parsing format used by the calendar input. |
+| `showIcon` | `boolean` | `false` | Displays a calendar icon button next to the input. |
+| `showTime` | `boolean` | `false` | Enables time selection in addition to date selection. |
+| `hourFormat` | `'12' \| '24'` | `24` | Hour format when `showTime` is enabled. |
+| `minDate` | `Date` | - | Minimum selectable date. |
+| `maxDate` | `Date` | - | Maximum selectable date. |
+
+## Behavior
+
+- Default value is `null`.
+- The field spans full width within its container.
+- Validation state is reflected via the PrimeReact `invalid` flag.

Documentation/CommandForm/chips-field.md

@@ -0,0 +1,36 @@
+# ChipsField
+
+`ChipsField` wraps the PrimeReact `Chips` component for collecting multiple text values in a single field.
+
+## Usage
+
+```tsx
+import { CommandDialog } from '@cratis/components';
+import { ChipsField } from '@cratis/components/CommandForm';
+
+<CommandDialog command={MyCommand} visible={visible} onHide={() => setVisible(false)}>
+    <ChipsField<MyCommand>
+        value={c => c.tags}
+        placeholder="Add tags and press Enter"
+        separator=","
+        addOnBlur
+    />
+</CommandDialog>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `(instance: TCommand) => unknown` | - | **Required.** Accessor function that returns the bound property from the command instance. Pass the command type as the generic parameter for full type safety. |
+| `placeholder` | `string` | - | Advisory text shown when no chip values exist. |
+| `max` | `number` | - | Maximum number of chips allowed. |
+| `separator` | `string` | - | Adds a chip when the separator character is typed. |
+| `addOnBlur` | `boolean` | `false` | Adds the current input as a chip when the field loses focus. |
+| `allowDuplicate` | `boolean` | `true` | Controls whether duplicate chip values are allowed. |
+
+## Behavior
+
+- Default value is an empty array.
+- The field spans full width within its container.
+- Validation state is reflected via the PrimeReact `invalid` flag.

Documentation/CommandForm/color-picker-field.md

@@ -0,0 +1,31 @@
+# ColorPickerField
+
+`ColorPickerField` wraps the PrimeReact `ColorPicker` component for selecting colors.
+
+## Usage
+
+```tsx
+import { CommandDialog } from '@cratis/components';
+import { ColorPickerField } from '@cratis/components/CommandForm';
+
+<CommandDialog command={MyCommand} visible={visible} onHide={() => setVisible(false)}>
+    <ColorPickerField<MyCommand>
+        value={c => c.primaryColor}
+        title="Primary color"
+    />
+</CommandDialog>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `(instance: TCommand) => unknown` | - | **Required.** Accessor function that returns the bound property from the command instance. Pass the command type as the generic parameter for full type safety. |
+| `inline` | `boolean` | `false` | Renders the picker inline instead of using an overlay. |
+| `defaultColor` | `string` | `ff0000` | Fallback color shown by PrimeReact when the bound value is empty. |
+
+## Behavior
+
+- Default value is an empty string.
+- Values are persisted as color strings (hex format in the default PrimeReact mode).
+- Validation state is reflected by applying the `p-invalid` class when the field is invalid.

Documentation/CommandForm/multi-select-field.md

@@ -0,0 +1,48 @@
+# MultiSelectField
+
+`MultiSelectField` wraps the PrimeReact `MultiSelect` component for selecting multiple values from a list.
+
+## Usage
+
+```tsx
+import { CommandDialog } from '@cratis/components';
+import { MultiSelectField } from '@cratis/components/CommandForm';
+
+const categoryOptions = [
+    { id: 'finance', label: 'Finance' },
+    { id: 'operations', label: 'Operations' },
+    { id: 'engineering', label: 'Engineering' },
+];
+
+<CommandDialog command={MyCommand} visible={visible} onHide={() => setVisible(false)}>
+    <MultiSelectField<MyCommand>
+        value={c => c.categories}
+        options={categoryOptions}
+        optionLabel="label"
+        optionValue="id"
+        placeholder="Select categories"
+        display="chip"
+        filter
+    />
+</CommandDialog>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `(instance: TCommand) => unknown` | - | **Required.** Accessor function that returns the bound property from the command instance. Pass the command type as the generic parameter for full type safety. |
+| `options` | `Array<Record<string, unknown>>` | - | **Required.** Array of option objects. |
+| `optionLabel` | `string` | - | Property name in each option object used as the display text. |
+| `optionValue` | `string` | - | Property name in each option object used as the bound value. |
+| `placeholder` | `string` | - | Placeholder text shown when no options are selected. |
+| `display` | `'comma' \| 'chip'` | PrimeReact default | How selected values are rendered in the input. |
+| `maxSelectedLabels` | `number` | PrimeReact default | Maximum number of labels to render before collapsing. |
+| `filter` | `boolean` | PrimeReact default | Enables filtering in the options panel. |
+| `showClear` | `boolean` | `false` | Displays a clear icon to reset selected values. |
+
+## Behavior
+
+- Default value is an empty array.
+- The field spans full width within its container.
+- Validation state is reflected via the PrimeReact `invalid` flag.

Documentation/CommandForm/toc.yml

@@ -1,11 +1,19 @@
 - name: Overview
   href: index.md
+- name: CalendarField
+  href: calendar-field.md
 - name: CheckboxField
   href: checkbox-field.md
+- name: ChipsField
+  href: chips-field.md
+- name: ColorPickerField
+  href: color-picker-field.md
 - name: DropdownField
   href: dropdown-field.md
 - name: InputTextField
   href: input-text-field.md
+- name: MultiSelectField
+  href: multi-select-field.md
 - name: NumberField
   href: number-field.md
 - name: SliderField

Source/CommandForm/fields/CalendarField.tsx

@@ -0,0 +1,39 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { asCommandFormField, WrappedFieldProps } from '@cratis/arc.react/commands';
+import { Calendar } from 'primereact/calendar';
+import React from 'react';
+
+interface CalendarFieldComponentProps extends WrappedFieldProps<Date | null> {
+    placeholder?: string;
+    dateFormat?: string;
+    showIcon?: boolean;
+    showTime?: boolean;
+    hourFormat?: '12' | '24';
+    minDate?: Date;
+    maxDate?: Date;
+}
+
+export const CalendarField = asCommandFormField<CalendarFieldComponentProps>(
+    (props) => (
+        <Calendar
+            value={props.value}
+            onChange={(e: { value: Date | null | undefined }) => props.onChange(e.value ?? null)}
+            onBlur={props.onBlur}
+            invalid={props.invalid}
+            placeholder={props.placeholder}
+            dateFormat={props.dateFormat}
+            showIcon={props.showIcon}
+            showTime={props.showTime}
+            hourFormat={props.hourFormat}
+            minDate={props.minDate}
+            maxDate={props.maxDate}
+            className="w-full"
+        />
+    ),
+    {
+        defaultValue: null,
+        extractValue: (e: unknown) => e instanceof Date ? e : null
+    }
+);

Source/CommandForm/fields/ChipsField.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 { asCommandFormField, WrappedFieldProps } from '@cratis/arc.react/commands';
+import { Chips } from 'primereact/chips';
+import React from 'react';
+
+interface ChipsFieldComponentProps extends WrappedFieldProps<string[]> {
+    placeholder?: string;
+    max?: number;
+    separator?: string;
+    addOnBlur?: boolean;
+    allowDuplicate?: boolean;
+}
+
+export const ChipsField = asCommandFormField<ChipsFieldComponentProps>(
+    (props) => (
+        <Chips
+            value={props.value}
+            onChange={(e: { value: string[] | null | undefined }) => props.onChange(e.value ?? [])}
+            onBlur={props.onBlur}
+            invalid={props.invalid}
+            placeholder={props.placeholder}
+            max={props.max}
+            separator={props.separator}
+            addOnBlur={props.addOnBlur}
+            allowDuplicate={props.allowDuplicate}
+            className="w-full"
+        />
+    ),
+    {
+        defaultValue: [],
+        extractValue: (e: unknown) => {
+            if (!Array.isArray(e)) {
+                return [];
+            }
+
+            return e.filter((item): item is string => typeof item === 'string');
+        }
+    }
+);

Source/CommandForm/fields/ColorPickerField.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 { asCommandFormField, WrappedFieldProps } from '@cratis/arc.react/commands';
+import { ColorPicker } from 'primereact/colorpicker';
+import React from 'react';
+
+interface ColorPickerFieldComponentProps extends WrappedFieldProps<string> {
+    inline?: boolean;
+    defaultColor?: string;
+}
+
+export const ColorPickerField = asCommandFormField<ColorPickerFieldComponentProps>(
+    (props) => (
+        <ColorPicker
+            value={props.value}
+            onChange={(e: { value: unknown }) => props.onChange(typeof e.value === 'string' ? e.value : '')}
+            onBlur={props.onBlur}
+            inline={props.inline}
+            defaultColor={props.defaultColor}
+            className={props.invalid ? 'p-invalid' : undefined}
+        />
+    ),
+    {
+        defaultValue: '',
+        extractValue: (e: unknown) => typeof e === 'string' ? e : ''
+    }
+);