@wilshop/dashboard 3.5.2

package/src/lib/components/data-input/string-list-input.tsx

@@ -0,0 +1,268 @@
+import { GripVertical, X } from 'lucide-react';
+import { KeyboardEvent, useEffect, useId, useRef, useState } from 'react';
+
+import { Badge } from '@/vdb/components/ui/badge.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import type { DashboardFormComponentProps } from '@/vdb/framework/form-engine/form-engine-types.js';
+import { isReadonlyField } from '@/vdb/framework/form-engine/utils.js';
+import { cn } from '@/vdb/lib/utils.js';
+import {
+    closestCenter,
+    DndContext,
+    type DragEndEvent,
+    KeyboardSensor,
+    PointerSensor,
+    useSensor,
+    useSensors,
+} from '@dnd-kit/core';
+import {
+    arrayMove,
+    SortableContext,
+    sortableKeyboardCoordinates,
+    useSortable,
+    verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { useLingui } from '@lingui/react';
+
+interface SortableItemProps {
+    id: string;
+    item: string;
+    isDisabled: boolean;
+    isEditing: boolean;
+    onRemove: () => void;
+    onEdit: () => void;
+    onSave: (newValue: string) => void;
+}
+
+function SortableItem({ id, item, isDisabled, isEditing, onRemove, onEdit, onSave }: SortableItemProps) {
+    const [editValue, setEditValue] = useState(item);
+    const inputRef = useRef<HTMLInputElement>(null);
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+        id,
+    });
+
+    const style = {
+        transform: CSS.Transform.toString(transform),
+        transition,
+    };
+
+    const handleSave = () => {
+        const trimmedValue = editValue.trim();
+        if (trimmedValue && trimmedValue !== item) {
+            onSave(trimmedValue);
+        } else {
+            setEditValue(item);
+            onSave(item);
+        }
+    };
+
+    const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            handleSave();
+        } else if (e.key === 'Escape') {
+            setEditValue(item);
+            onSave(item);
+        }
+    };
+
+    // Focus and select input when entering edit mode
+    useEffect(() => {
+        if (isEditing && inputRef.current) {
+            inputRef.current.focus();
+            inputRef.current.select();
+        }
+    }, [isEditing]);
+
+    useEffect(() => {
+        if (item !== editValue) {
+            setEditValue(item);
+        }
+    }, [item]);
+
+    return (
+        <Badge
+            ref={setNodeRef}
+            style={style}
+            variant="secondary"
+            className={cn(
+                isDragging && 'opacity-50',
+                'flex items-center gap-1',
+                isEditing && 'border-muted-foreground/30',
+            )}
+        >
+            {!isDisabled && (
+                <button
+                    type="button"
+                    className={cn(
+                        'cursor-grab active:cursor-grabbing text-muted-foreground',
+                        'hover:bg-muted rounded p-0.5',
+                    )}
+                    {...attributes}
+                    {...listeners}
+                    aria-label={`Drag ${item}`}
+                >
+                    <GripVertical className="h-3 w-3" />
+                </button>
+            )}
+            {isEditing ? (
+                <input
+                    ref={inputRef}
+                    type="text"
+                    value={editValue}
+                    onChange={e => setEditValue(e.target.value)}
+                    onKeyDown={handleKeyDown}
+                    onBlur={handleSave}
+                    className="bg-transparent border-none outline-none focus:ring-0 p-0 h-auto min-w-[60px] w-auto"
+                    style={{ width: `${Math.max(editValue.length * 8, 60)}px` }}
+                />
+            ) : (
+                <button
+                    type="button"
+                    onClick={!isDisabled ? onEdit : undefined}
+                    className={cn(!isDisabled && 'cursor-text hover:underline')}
+                >
+                    {item}
+                </button>
+            )}
+            {!isDisabled && (
+                <button
+                    type="button"
+                    onClick={e => {
+                        e.stopPropagation();
+                        onRemove();
+                    }}
+                    className={cn(
+                        'ml-1 rounded-full outline-none ring-offset-background text-muted-foreground',
+                        'hover:bg-muted focus:ring-2 focus:ring-ring focus:ring-offset-2',
+                    )}
+                    aria-label={`Remove ${item}`}
+                >
+                    <X className="h-3 w-3" />
+                </button>
+            )}
+        </Badge>
+    );
+}
+
+export function StringListInput({
+    value,
+    onChange,
+    onBlur,
+    disabled,
+    name,
+    fieldDef,
+}: DashboardFormComponentProps) {
+    const [inputValue, setInputValue] = useState('');
+    const [editingIndex, setEditingIndex] = useState<number | null>(null);
+    const inputRef = useRef<HTMLInputElement>(null);
+    const { i18n } = useLingui();
+    const isDisabled = isReadonlyField(fieldDef) || disabled || false;
+    const id = useId();
+
+    const items = Array.isArray(value) ? value : [];
+
+    const sensors = useSensors(
+        useSensor(PointerSensor),
+        useSensor(KeyboardSensor, {
+            coordinateGetter: sortableKeyboardCoordinates,
+        }),
+    );
+
+    const addItem = (item: string) => {
+        const trimmedItem = item.trim();
+        if (trimmedItem) {
+            onChange([...items, trimmedItem]);
+            setInputValue('');
+        }
+    };
+
+    const removeItem = (indexToRemove: number) => {
+        onChange(items.filter((_, index) => index !== indexToRemove));
+    };
+
+    const editItem = (index: number, newValue: string) => {
+        const newItems = [...items];
+        newItems[index] = newValue;
+        onChange(newItems);
+        setEditingIndex(null);
+    };
+
+    const handleDragEnd = (event: DragEndEvent) => {
+        const { active, over } = event;
+
+        if (over && active.id !== over.id) {
+            const oldIndex = items.findIndex((_, idx) => `${id}-${idx}` === active.id);
+            const newIndex = items.findIndex((_, idx) => `${id}-${idx}` === over.id);
+
+            onChange(arrayMove(items, oldIndex, newIndex));
+        }
+    };
+
+    const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === 'Enter' || e.key === ',') {
+            e.preventDefault();
+            addItem(inputValue);
+        } else if (e.key === 'Backspace' && !inputValue && items.length > 0) {
+            // Remove last item when backspace is pressed on empty input
+            removeItem(items.length - 1);
+        }
+    };
+
+    const handleInputBlur = () => {
+        // Add current input value as item on blur if there's any
+        if (inputValue.trim()) {
+            addItem(inputValue);
+        }
+        onBlur?.();
+    };
+
+    return (
+        <div
+            className={cn(
+                'flex min-h-10 w-full flex-wrap gap-2',
+                isDisabled && 'cursor-not-allowed opacity-50',
+            )}
+        >
+            {!isDisabled && (
+                <Input
+                    ref={inputRef}
+                    type="text"
+                    value={inputValue}
+                    onChange={e => setInputValue(e.target.value)}
+                    onKeyDown={handleKeyDown}
+                    onBlur={handleInputBlur}
+                    name={name}
+                    placeholder={i18n.t('Type and press Enter or comma to add...')}
+                    className="min-w-[120px]"
+                />
+            )}
+            <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+                <SortableContext
+                    items={items.map((_, index) => `${id}-${index}`)}
+                    strategy={verticalListSortingStrategy}
+                >
+                    <div className="flex flex-wrap gap-1 items-start justify-start">
+                        {items.map((item, index) => (
+                            <SortableItem
+                                key={`${id}-${index}`}
+                                id={`${id}-${index}`}
+                                item={item}
+                                isDisabled={isDisabled}
+                                isEditing={editingIndex === index}
+                                onRemove={() => removeItem(index)}
+                                onEdit={() => setEditingIndex(index)}
+                                onSave={newValue => editItem(index, newValue)}
+                            />
+                        ))}
+                    </div>
+                </SortableContext>
+            </DndContext>
+        </div>
+    );
+}
+
+StringListInput.metadata = {
+    isListInput: true,
+};

package/src/lib/components/data-input/struct-form-input.tsx

@@ -0,0 +1,320 @@
+import { Button } from '@/vdb/components/ui/button.js';
+import {
+    FormControl,
+    FormDescription,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from '@/vdb/components/ui/form.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { Switch } from '@/vdb/components/ui/switch.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
+import { CheckIcon, PencilIcon, X } from 'lucide-react';
+import React, { useMemo, useState } from 'react';
+import { ControllerRenderProps, useFormContext, useWatch } from 'react-hook-form';
+
+// Import the form input component we already have
+import {
+    DashboardFormComponentProps,
+    StructCustomFieldConfig,
+    StructField,
+} from '@/vdb/framework/form-engine/form-engine-types.js';
+import { isReadonlyField, isStructFieldConfig } from '@/vdb/framework/form-engine/utils.js';
+import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
+import { CustomFieldListInput } from './custom-field-list-input.js';
+import { DateTimeInput } from './datetime-input.js';
+import { SelectWithOptions } from './select-with-options.js';
+
+interface DisplayModeProps {
+    fieldDef: StructCustomFieldConfig;
+    watchedStructValue: Record<string, any>;
+    isReadonly: boolean;
+    setIsEditing: (value: boolean) => void;
+    getTranslation: (
+        input: Array<{ languageCode: string; value: string }> | null | undefined,
+    ) => string | undefined;
+    formatFieldValue: (value: any, structField: StructField) => React.ReactNode;
+}
+
+function DisplayMode({
+    fieldDef,
+    watchedStructValue,
+    isReadonly,
+    setIsEditing,
+    getTranslation,
+    formatFieldValue,
+}: Readonly<DisplayModeProps>) {
+    return (
+        <div className="border rounded-md p-4">
+            <div className="flex justify-end">
+                {!isReadonly && (
+                    <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => setIsEditing(true)}
+                        className="h-8 w-8 p-0 -mt-2 -mr-2 text-muted-foreground hover:text-foreground"
+                    >
+                        <PencilIcon className="h-4 w-4" />
+                        <span className="sr-only">Edit</span>
+                    </Button>
+                )}
+            </div>
+            <dl className="grid grid-cols-2 divide-y divide-muted -mt-2">
+                {fieldDef.fields.map(structField => (
+                    <React.Fragment key={structField.name}>
+                        <dt className="text-sm font-medium text-muted-foreground py-2">
+                            {getTranslation(structField.label) ?? structField.name}
+                        </dt>
+                        <dd className="text-sm text-foreground py-2">
+                            {formatFieldValue(watchedStructValue[structField.name], structField)}
+                        </dd>
+                    </React.Fragment>
+                ))}
+            </dl>
+        </div>
+    );
+}
+
+export function StructFormInput({ fieldDef, ...field }: Readonly<DashboardFormComponentProps>) {
+    const { formatDate } = useLocalFormat();
+    const [isEditing, setIsEditing] = useState(false);
+    const { control } = useFormContext();
+    const { value, name } = field;
+
+    // Watch the struct field for changes to update display mode
+    const watchedStructValue =
+        useWatch({
+            control,
+            name,
+            defaultValue: value || {},
+        }) || {};
+
+    const {
+        settings: { displayLanguage },
+    } = useUserSettings();
+
+    const getTranslation = (input: Array<{ languageCode: string; value: string }> | null | undefined) => {
+        return input?.find(t => t.languageCode === displayLanguage)?.value;
+    };
+
+    const isReadonly = isReadonlyField(fieldDef);
+
+    // Edit mode - memoized to prevent focus loss from re-renders
+    const EditMode = useMemo(
+        () =>
+            fieldDef && isStructFieldConfig(fieldDef) ? (
+                <div className="space-y-4 border rounded-md p-4">
+                    {!isReadonly && (
+                        <div className="flex justify-end">
+                            <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={() => setIsEditing(false)}
+                                className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
+                            >
+                                <CheckIcon className="h-4 w-4" />
+                                <span className="sr-only">Done</span>
+                            </Button>
+                        </div>
+                    )}
+                    {fieldDef?.fields.map(structField => (
+                        <FormField
+                            key={structField.name}
+                            control={control}
+                            name={`${field.name}.${structField.name}`}
+                            render={({ field: structInputField }) => (
+                                <FormItem>
+                                    <div className="flex items-baseline gap-4">
+                                        <div className="flex-1">
+                                            <FormLabel>
+                                                {getTranslation(structField.label) ?? structField.name}
+                                            </FormLabel>
+                                            {getTranslation(structField.description) && (
+                                                <FormDescription>
+                                                    {getTranslation(structField.description)}
+                                                </FormDescription>
+                                            )}
+                                        </div>
+                                        <div className="flex-[2]">
+                                            <FormControl>
+                                                {renderStructFieldInput(structField, structInputField)}
+                                            </FormControl>
+                                            <FormMessage />
+                                        </div>
+                                    </div>
+                                </FormItem>
+                            )}
+                        />
+                    ))}
+                </div>
+            ) : null,
+        [fieldDef, control, field.name, getTranslation, isReadonly],
+    );
+
+    // Early return if not a struct field config
+    if (!fieldDef || !isStructFieldConfig(fieldDef)) {
+        return null;
+    }
+
+    // Helper function to format field value for display
+    const formatFieldValue = (value: any, structField: StructField) => {
+        if (value == null) return '-';
+        if (structField.list) {
+            if (Array.isArray(value)) {
+                return value.length ? value.join(', ') : '-';
+            }
+            return '-';
+        }
+        switch (structField.type) {
+            case 'boolean':
+                return (
+                    <span className={`inline-flex items-center ${value ? 'text-green-600' : 'text-red-500'}`}>
+                        {value ? <CheckIcon className="h-4 w-4" /> : <X className="h-4 w-4" />}
+                    </span>
+                );
+            case 'datetime':
+                return value ? formatDate(value, { dateStyle: 'short', timeStyle: 'short' }) : '-';
+            default:
+                return value.toString();
+        }
+    };
+
+    return isEditing ? (
+        EditMode
+    ) : (
+        <DisplayMode
+            fieldDef={fieldDef}
+            watchedStructValue={watchedStructValue}
+            isReadonly={isReadonly}
+            setIsEditing={setIsEditing}
+            getTranslation={getTranslation}
+            formatFieldValue={formatFieldValue}
+        />
+    );
+}
+
+// Helper function to render individual struct field inputs
+const renderStructFieldInput = (
+    structField: StructField,
+    inputField: ControllerRenderProps<any, any>,
+    isReadonly: boolean = false,
+) => {
+    const isList = structField.list ?? false;
+
+    // Helper function to render single input for a struct field
+    const renderSingleStructInput = (singleField: ControllerRenderProps<any, any>) => {
+        switch (structField.type) {
+            case 'string': {
+                // Check if the field has options (dropdown)
+                const stringField = structField as any; // GraphQL union types need casting
+                if (stringField.options && stringField.options.length > 0) {
+                    return <SelectWithOptions {...singleField} fieldDef={stringField} isListField={false} />;
+                }
+                return (
+                    <Input
+                        value={singleField.value ?? ''}
+                        onChange={e => singleField.onChange(e.target.value)}
+                        onBlur={singleField.onBlur}
+                        name={singleField.name}
+                        disabled={isReadonly}
+                    />
+                );
+            }
+            case 'int':
+            case 'float': {
+                const isFloat = structField.type === 'float';
+                const numericField = structField as any; // GraphQL union types need casting
+                const min = isFloat ? numericField.floatMin : numericField.intMin;
+                const max = isFloat ? numericField.floatMax : numericField.intMax;
+                const step = isFloat ? numericField.floatStep : numericField.intStep;
+
+                return (
+                    <Input
+                        type="number"
+                        value={singleField.value ?? ''}
+                        onChange={e => {
+                            const value = e.target.valueAsNumber;
+                            singleField.onChange(isNaN(value) ? undefined : value);
+                        }}
+                        onBlur={singleField.onBlur}
+                        name={singleField.name}
+                        disabled={isReadonly}
+                        min={min}
+                        max={max}
+                        step={step}
+                    />
+                );
+            }
+            case 'boolean':
+                return (
+                    <Switch
+                        checked={singleField.value}
+                        onCheckedChange={singleField.onChange}
+                        disabled={isReadonly}
+                    />
+                );
+            case 'datetime':
+                return <DateTimeInput {...singleField} />;
+            default:
+                return (
+                    <Input
+                        value={singleField.value ?? ''}
+                        onChange={e => singleField.onChange(e.target.value)}
+                        onBlur={singleField.onBlur}
+                        name={singleField.name}
+                        disabled={isReadonly}
+                    />
+                );
+        }
+    };
+
+    // Handle string fields with options (dropdown) - already handles list case with multi-select
+    if (structField.type === 'string') {
+        const stringField = structField as any; // GraphQL union types need casting
+        if (stringField.options && stringField.options.length > 0) {
+            return (
+                <SelectWithOptions
+                    {...inputField}
+                    fieldDef={stringField}
+                    disabled={isReadonly}
+                    isListField={isList}
+                />
+            );
+        }
+    }
+
+    // For list struct fields, wrap with list input
+    if (isList) {
+        const getDefaultValue = () => {
+            switch (structField.type) {
+                case 'string':
+                    return '';
+                case 'int':
+                case 'float':
+                    return 0;
+                case 'boolean':
+                    return false;
+                case 'datetime':
+                    return '';
+                default:
+                    return '';
+            }
+        };
+
+        // Determine if the field type needs full width
+        const needsFullWidth = structField.type === 'text' || structField.type === 'localeText';
+
+        return (
+            <CustomFieldListInput
+                {...inputField}
+                disabled={isReadonly}
+                renderInput={(index, listItemField) => renderSingleStructInput(listItemField)}
+                defaultValue={getDefaultValue()}
+            />
+        );
+    }
+
+    // For non-list fields, render directly
+    return renderSingleStructInput(inputField);
+};

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

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useForm } from 'react-hook-form';
+import { withDescription } from '../../../.storybook/with-description.js';
+import { TextInput } from './text-input.js';
+
+const meta = {
+    title: 'Form Inputs/TextInput',
+    component: TextInput,
+    ...withDescription(import.meta.url, './text-input.js'),
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        value: {
+            control: 'text',
+            description: 'The current value',
+        },
+        placeholder: {
+            control: 'text',
+            description: 'Placeholder text',
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Whether the input is disabled',
+        },
+    },
+} satisfies Meta<typeof TextInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+    args: {
+        value: 'Edit me!',
+        placeholder: 'Enter text',
+        disabled: false,
+    },
+    render: args => {
+        const { register } = useForm();
+        const field = register('text');
+        return <TextInput {...field} {...args} />;
+    },
+};
+
+export const LongText: Story = {
+    render: () => {
+        const { register } = useForm();
+        const field = register('longText');
+        return <TextInput {...field} />;
+    },
+};

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

@@ -0,0 +1,16 @@
+// Simple built-in components using the single DashboardFormComponent interface
+import { Input } from '@/vdb/components/ui/input.js';
+import { DashboardFormComponent } from '@/vdb/framework/form-engine/form-engine-types.js';
+import { isReadonlyField } from '@/vdb/framework/form-engine/utils.js';
+
+/**
+ * @description
+ * A component for displaying a text input.
+ *
+ * @docsCategory form-components
+ * @docsPage TextInput
+ */
+export const TextInput: DashboardFormComponent = ({ value, onChange, fieldDef }) => {
+    const readOnly = isReadonlyField(fieldDef);
+    return <Input value={value || ''} onChange={e => onChange(e.target.value)} disabled={readOnly} />;
+};