@wilshop/dashboard 3.5.2

package/src/lib/components/data-display/boolean.tsx

@@ -0,0 +1,23 @@
+import { CheckIcon, XIcon } from 'lucide-react';
+import React from 'react';
+import { Badge } from '../ui/badge.js';
+
+export function BooleanDisplayCheckbox({ value }: Readonly<{ value: boolean }>) {
+    return value ? <CheckIcon className="opacity-70" /> : <XIcon className="opacity-70" />;
+}
+
+export function BooleanDisplayBadge({
+    value,
+    labelTrue,
+    labelFalse,
+}: {
+    value: boolean;
+    labelTrue?: string | React.ReactNode;
+    labelFalse?: string | React.ReactNode;
+}) {
+    return (
+        <Badge variant={value ? 'success' : 'destructive'}>
+            {value ? (labelTrue ?? 'Enabled') : (labelFalse ?? 'Disabled')}
+        </Badge>
+    );
+}

package/src/lib/components/data-display/date-time.tsx

@@ -0,0 +1,19 @@
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
+
+export function DateTime({ value }: Readonly<{ value: string | Date }>) {
+    const { formatDate } = useLocalFormat();
+    let renderedDate: string;
+    let renderedTime: string;
+    try {
+        renderedDate = formatDate(value);
+        renderedTime = formatDate(value, { timeStyle: 'long' });
+    } catch (e) {
+        renderedDate = value.toString();
+        renderedTime = '';
+        console.error(e);
+    }
+    return <div className="flex flex-col">
+        <div className="text-sm">{renderedDate}</div>
+        <div className="text-xs text-muted-foreground">{renderedTime}</div>
+    </div>;
+}

package/src/lib/components/data-display/json.tsx

@@ -0,0 +1,20 @@
+import { JsonEditor } from 'json-edit-react';
+import { FileJson } from 'lucide-react';
+
+import { Button } from '../ui/button.js';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '../ui/dropdown-menu.js';
+
+export function Json({ value }: Readonly<{ value: any }>) {
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <Button variant="secondary" size="icon">
+                    <FileJson />
+                </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="w-96 max-h-96 overflow-auto p-2">
+                <JsonEditor viewOnly data={value} collapse={1} rootFontSize={12} />
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
+}

package/src/lib/components/data-display/money.tsx

@@ -0,0 +1,14 @@
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
+
+// Original component
+function MoneyInternal({ value, currency }: { value: number; currency: string }) {
+    const { formatCurrency } = useLocalFormat();
+    return formatCurrency(value, currency);
+}
+
+// Wrapper that makes it compatible with DataDisplayComponent
+export function Money(props: { value: any; [key: string]: any }) {
+    const { value, ...rest } = props;
+    const currency = rest.currency || 'USD'; // Default currency if none provided
+    return MoneyInternal({ value, currency });
+}

package/src/lib/components/data-input/affixed-input.stories.tsx

@@ -0,0 +1,93 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Mail } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { withDescription } from '../../../.storybook/with-description.js';
+import { AffixedInput } from './affixed-input.js';
+
+const meta = {
+    title: 'Form Inputs/AffixedInput',
+    component: AffixedInput,
+    ...withDescription(import.meta.url, './affixed-input.js'),
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        prefix: {
+            control: 'text',
+            description: 'Content to display before the input',
+        },
+        suffix: {
+            control: 'text',
+            description: 'Content to display after the input',
+        },
+        type: {
+            control: 'select',
+            options: ['text', 'number', 'email', 'url', 'tel'],
+            description: 'Input type',
+        },
+        placeholder: {
+            control: 'text',
+            description: 'Placeholder text',
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Whether the input is disabled',
+        },
+        value: {
+            control: 'text',
+            description: 'Input value',
+        },
+    },
+} satisfies Meta<typeof AffixedInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+    args: {
+        prefix: '$',
+        suffix: 'USD',
+        value: '100.00',
+        type: 'text',
+        placeholder: 'Enter amount',
+        disabled: false,
+    },
+    render: args => {
+        const { register } = useForm();
+        const field = register('amount');
+        return <AffixedInput {...field} {...args} />;
+    },
+};
+
+export const WithIconPrefix: Story = {
+    render: () => {
+        const { register } = useForm();
+        const field = register('email');
+        return <AffixedInput {...field} prefix={<Mail className="w-4 h-4" />} placeholder="Enter email" />;
+    },
+};
+
+export const WithSuffix: Story = {
+    render: () => {
+        const { register } = useForm();
+        const field = register('percentage');
+        return <AffixedInput {...field} type="number" suffix="%" placeholder="Enter percentage" />;
+    },
+};
+
+export const Disabled: Story = {
+    render: () => {
+        const { register } = useForm();
+        const field = register('website');
+        return <AffixedInput {...field} prefix="https://" suffix=".com" disabled />;
+    },
+};
+
+export const NumberWithSteps: Story = {
+    render: () => {
+        const { register } = useForm();
+        const field = register('weight');
+        return <AffixedInput {...field} type="number" suffix="kg" step="0.1" min="0" max="100" />;
+    },
+};

package/src/lib/components/data-input/affixed-input.tsx

@@ -0,0 +1,79 @@
+import { ReactNode, useEffect, useRef, useState } from 'react';
+import { Input } from '../ui/input.js';
+
+import { DashboardFormComponentProps } from '@/vdb/framework/form-engine/form-engine-types.js';
+import { isReadonlyField } from '@/vdb/framework/form-engine/utils.js';
+
+export type AffixedInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'prefix'> &
+    DashboardFormComponentProps & {
+        prefix?: ReactNode;
+        suffix?: ReactNode;
+    };
+
+/**
+ * @description
+ * A component for displaying an input with a prefix and/or a suffix.
+ *
+ * @example
+ * ```tsx
+ * <AffixedInput
+ *     {...field}
+ *     type="number"
+ *     suffix="%"
+ *     value={field.value}
+ *     onChange={e => field.onChange(e.target.valueAsNumber)}
+ * />
+ * ```
+ *
+ * @docsCategory form-components
+ * @docsPage AffixedInput
+ */
+export function AffixedInput({ prefix, suffix, className = '', ...props }: Readonly<AffixedInputProps>) {
+    const readOnly = props.disabled || isReadonlyField(props.fieldDef);
+    const prefixRef = useRef<HTMLSpanElement>(null);
+    const suffixRef = useRef<HTMLSpanElement>(null);
+    const [prefixWidth, setPrefixWidth] = useState(0);
+    const [suffixWidth, setSuffixWidth] = useState(0);
+
+    useEffect(() => {
+        if (prefixRef.current) {
+            setPrefixWidth(Math.round(prefixRef.current.getBoundingClientRect().width));
+        }
+        if (suffixRef.current) {
+            setSuffixWidth(Math.round(suffixRef.current.getBoundingClientRect().width));
+        }
+    }, [prefix, suffix]);
+
+    const style = {
+        paddingLeft: prefix ? `calc(1rem + ${prefixWidth}px)` : undefined,
+        paddingRight: suffix ? `calc(1rem + ${suffixWidth}px)` : undefined,
+    };
+
+    return (
+        <div className="relative flex items-center">
+            {prefix && (
+                <span ref={prefixRef} className="absolute left-3 text-muted-foreground whitespace-nowrap">
+                    {prefix}
+                </span>
+            )}
+            <Input
+                value={props.value}
+                onChange={props.onChange}
+                onBlur={props.onBlur}
+                type={props.type}
+                ref={props.ref}
+                className={className}
+                style={style}
+                disabled={readOnly}
+                min={props.min}
+                max={props.max}
+                step={props.step}
+            />
+            {suffix && (
+                <span ref={suffixRef} className="absolute right-3 text-muted-foreground whitespace-nowrap">
+                    {suffix}
+                </span>
+            )}
+        </div>
+    );
+}

package/src/lib/components/data-input/boolean-input.stories.tsx

@@ -0,0 +1,102 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useForm } from 'react-hook-form';
+import { withDescription } from '../../../.storybook/with-description.js';
+import { BooleanInput } from './boolean-input.js';
+
+const meta = {
+    title: 'Form Inputs/BooleanInput',
+    component: BooleanInput,
+    ...withDescription(import.meta.url, './boolean-input.js'),
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        value: {
+            control: 'boolean',
+            description: 'Whether the switch is on',
+        },
+    },
+} satisfies Meta<typeof BooleanInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+    args: {
+        value: false,
+    },
+    render: args => {
+        const { register } = useForm();
+        const field = register('playground');
+        return (
+            <div className="flex items-center gap-2">
+                <BooleanInput {...field} {...args} />
+                <label className="text-sm font-medium">Enable notifications</label>
+            </div>
+        );
+    },
+};
+
+export const ProductSettings: Story = {
+    render: () => {
+        const { register } = useForm();
+        return (
+            <div className="w-[350px] space-y-3">
+                <div className="flex items-center justify-between">
+                    <div>
+                        <label className="text-sm font-medium">Product enabled</label>
+                        <p className="text-xs text-muted-foreground">
+                            Make this product visible in the catalog
+                        </p>
+                    </div>
+                    <BooleanInput {...register('enabled')} />
+                </div>
+                <div className="flex items-center justify-between">
+                    <div>
+                        <label className="text-sm font-medium">Featured</label>
+                        <p className="text-xs text-muted-foreground">Show on homepage</p>
+                    </div>
+                    <BooleanInput {...register('featured')} />
+                </div>
+                <div className="flex items-center justify-between">
+                    <div>
+                        <label className="text-sm font-medium">Track inventory</label>
+                        <p className="text-xs text-muted-foreground">Monitor stock levels</p>
+                    </div>
+                    <BooleanInput {...register('trackInventory')} />
+                </div>
+                <div className="flex items-center justify-between">
+                    <div>
+                        <label className="text-sm font-medium">Allow backorder</label>
+                        <p className="text-xs text-muted-foreground">Accept orders when out of stock</p>
+                    </div>
+                    <BooleanInput {...register('allowBackorder')} />
+                </div>
+            </div>
+        );
+    },
+};
+
+export const StringValues: Story = {
+    render: () => {
+        const { register } = useForm();
+        return (
+            <div className="space-y-4">
+                <div className="flex items-center gap-2">
+                    <BooleanInput {...register('trueValue')} />
+                    <label className="text-sm font-medium">String value: "true"</label>
+                </div>
+
+                <div className="flex items-center gap-2">
+                    <BooleanInput {...register('falseValue')} />
+                    <label className="text-sm font-medium">String value: "false"</label>
+                </div>
+
+                <div className="text-sm text-muted-foreground">
+                    Demonstrates handling of string "true"/"false" values
+                </div>
+            </div>
+        );
+    },
+};

package/src/lib/components/data-input/boolean-input.tsx

@@ -0,0 +1,16 @@
+import { Switch } from '@/vdb/components/ui/switch.js';
+import { DashboardFormComponentProps } from '@/vdb/framework/form-engine/form-engine-types.js';
+import { isReadonlyField } from '@/vdb/framework/form-engine/utils.js';
+
+/**
+ * @description
+ * Displays a boolean value as a switch toggle.
+ *
+ * @docsCategory form-components
+ * @docsPage BooleanInput
+ */
+export function BooleanInput({ value, onChange, fieldDef }: Readonly<DashboardFormComponentProps>) {
+    const checked = typeof value === 'string' ? value === 'true' : value;
+    const readOnly = isReadonlyField(fieldDef);
+    return <Switch checked={checked} onCheckedChange={onChange} disabled={readOnly} />;
+}

package/src/lib/components/data-input/checkbox-input.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useForm } from 'react-hook-form';
+import { withDescription } from '../../../.storybook/with-description.js';
+import { CheckboxInput } from './checkbox-input.js';
+
+const meta = {
+    title: 'Form Inputs/CheckboxInput',
+    component: CheckboxInput,
+    ...withDescription(import.meta.url, './checkbox-input.js'),
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        value: {
+            control: 'boolean',
+            description: 'Whether the checkbox is checked',
+        },
+    },
+} satisfies Meta<typeof CheckboxInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+    args: {
+        value: false,
+    },
+    render: args => {
+        const { register } = useForm();
+        const field = register('playground');
+        return (
+            <div className="flex items-center gap-2">
+                <CheckboxInput {...field} {...args} />
+                <label className="text-sm font-medium">Accept terms and conditions</label>
+            </div>
+        );
+    },
+};
+
+export const MultipleCheckboxes: Story = {
+    render: () => {
+        const { register } = useForm();
+        return (
+            <div className="space-y-3">
+                <div className="flex items-center gap-2">
+                    <CheckboxInput {...register('notifications')} />
+                    <label className="text-sm font-medium">Email notifications</label>
+                </div>
+                <div className="flex items-center gap-2">
+                    <CheckboxInput {...register('marketing')} />
+                    <label className="text-sm font-medium">Marketing emails</label>
+                </div>
+                <div className="flex items-center gap-2">
+                    <CheckboxInput {...register('updates')} />
+                    <label className="text-sm font-medium">Product updates</label>
+                </div>
+            </div>
+        );
+    },
+};

package/src/lib/components/data-input/checkbox-input.tsx

@@ -0,0 +1,15 @@
+import { Checkbox } from '../ui/checkbox.js';
+import { DashboardFormComponentProps } from '@/vdb/framework/form-engine/form-engine-types.js';
+import { isReadonlyField } from '@/vdb/framework/form-engine/utils.js';
+
+/**
+ * @description
+ * Displays a boolean value as a checkbox.
+ *
+ * @docsCategory form-components
+ * @docsPage CheckboxInput
+ */
+export function CheckboxInput({ value, onChange, fieldDef }: Readonly<DashboardFormComponentProps>) {
+    const readOnly = isReadonlyField(fieldDef);
+    return <Checkbox checked={value} onCheckedChange={onChange} disabled={readOnly} />;
+}

package/src/lib/components/data-input/combination-mode-input.tsx

@@ -0,0 +1,61 @@
+import { DashboardFormComponentProps } from '@/vdb/framework/form-engine/form-engine-types.js';
+import { Trans } from '@lingui/react/macro';
+
+export type CombinationModeInputProps = DashboardFormComponentProps & {
+    position?: number;
+};
+
+export const CombinationModeInput = ({
+    value,
+    onChange,
+    position,
+    ...props
+}: Readonly<CombinationModeInputProps>) => {
+    const booleanValue = value === 'true' || value === true;
+
+    // Only show for items after the first one
+    const selectable = position !== undefined && position > 0;
+
+    const setCombinationModeAnd = () => {
+        onChange(true);
+    };
+
+    const setCombinationModeOr = () => {
+        onChange(false);
+    };
+
+    if (!selectable) {
+        return null;
+    }
+
+    return (
+        <div className="flex items-center justify-center -mt-4 -mb-4">
+            <div className="bg-muted border px-3 py-1.5 rounded-full flex gap-1.5 text-xs shadow-sm">
+                <button
+                    type="button"
+                    className={`px-2 py-0.5 rounded-full transition-colors ${
+                        booleanValue
+                            ? 'bg-primary text-background'
+                            : 'text-muted-foreground hover:bg-muted-foreground/10'
+                    }`}
+                    onClick={setCombinationModeAnd}
+                    {...props}
+                >
+                    <Trans>AND</Trans>
+                </button>
+                <button
+                    type="button"
+                    className={`px-2 py-0.5 rounded-full transition-colors ${
+                        !booleanValue
+                            ? 'bg-primary text-background'
+                            : 'text-muted-foreground hover:bg-muted-foreground/10'
+                    }`}
+                    onClick={setCombinationModeOr}
+                    {...props}
+                >
+                    <Trans>OR</Trans>
+                </button>
+            </div>
+        </div>
+    );
+};

package/src/lib/components/data-input/configurable-operation-list-input.tsx

@@ -0,0 +1,58 @@
+import { FormControlAdapter } from '@/vdb/framework/form-engine/form-control-adapter.js';
+import { DashboardFormComponentProps } from '@/vdb/framework/form-engine/form-engine-types.js';
+import { isCustomFieldConfig } from '@/vdb/framework/form-engine/utils.js';
+import { ControllerRenderProps } from 'react-hook-form';
+
+/**
+ * A dynamic array input component for configurable operation arguments that handle lists of values.
+ */
+export function ConfigurableOperationListInput({
+    fieldDef,
+    value,
+    onChange,
+}: Readonly<DashboardFormComponentProps>) {
+    if (!fieldDef || isCustomFieldConfig(fieldDef)) {
+        return null;
+    }
+    const arrayValue = parseArrayValue(value);
+    return (
+        <div className="space-y-2">
+            {arrayValue.map((item, index) => {
+                const field = {
+                    value: item,
+                    onChange,
+                    disabled: false,
+                    onBlur: () => {},
+                    name: fieldDef.name,
+                    ref: () => {},
+                } satisfies ControllerRenderProps<any, any>;
+                return (
+                    <div key={`array-item-${index}`} className="flex items-center gap-2">
+                        <div className="flex-1">
+                            <FormControlAdapter field={field} fieldDef={fieldDef} valueMode="native" />
+                        </div>
+                    </div>
+                );
+            })}
+        </div>
+    );
+}
+
+function parseArrayValue(value: string): string[] {
+    if (!value) return [];
+
+    try {
+        const parsed = JSON.parse(value);
+        return Array.isArray(parsed) ? parsed.map(String) : [String(parsed)];
+    } catch {
+        // If not JSON, try comma-separated values
+        return value.includes(',')
+            ? value
+                  .split(',')
+                  .map(s => s.trim())
+                  .filter(Boolean)
+            : value
+              ? [value]
+              : [];
+    }
+}