@wilshop/dashboard 3.5.2

package/src/lib/components/data-input/index.ts

@@ -0,0 +1,23 @@
+// Existing data input components
+export * from './affixed-input.js';
+export * from './customer-group-input.js';
+export * from './datetime-input.js';
+export * from './facet-value-input.js';
+export * from './money-input.js';
+export * from './rich-text-input.js';
+export * from './select-with-options.js';
+
+// Enhanced configurable operation input components
+export * from './configurable-operation-list-input.js';
+export * from './customer-group-input.js';
+export * from './product-multi-selector-input.js';
+
+// Relation selector components
+export * from './relation-input.js';
+export * from './relation-selector.js';
+
+// Slug input component
+export * from './slug-input.js';
+
+// String list input component
+export * from './string-list-input.js';

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

@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useForm } from 'react-hook-form';
+import { withDescription } from '../../../.storybook/with-description.js';
+import { MoneyInput } from './money-input.js';
+
+const meta = {
+    title: 'Form Inputs/MoneyInput',
+    component: MoneyInput,
+    ...withDescription(import.meta.url, './money-input.js'),
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        value: {
+            control: 'number',
+            description: 'The current value in minor units (e.g., cents)',
+        },
+        currency: {
+            control: 'select',
+            options: ['USD', 'EUR', 'GBP', 'JPY', 'AUD', 'CAD'],
+            description: 'The currency code',
+        },
+    },
+} satisfies Meta<typeof MoneyInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+    args: {
+        value: 9999,
+        currency: 'USD',
+    },
+    render: args => {
+        const { register } = useForm();
+        const field = register('playground');
+        return (
+            <div className="w-[300px]">
+                <MoneyInput {...field} {...args} />
+            </div>
+        );
+    },
+};
+
+export const DifferentCurrencies: Story = {
+    args: {
+        value: 9999,
+    },
+    render: (args: any) => {
+        const { register } = useForm();
+        return (
+            <div className="w-[300px] space-y-4">
+                <div className="space-y-2">
+                    <label className="text-sm font-medium">USD</label>
+                    <MoneyInput {...register('usd')} currency="USD" value={args.value} />
+                </div>
+
+                <div className="space-y-2">
+                    <label className="text-sm font-medium">EUR</label>
+                    <MoneyInput {...register('eur')} currency="EUR" value={args.value} />
+                </div>
+
+                <div className="space-y-2">
+                    <label className="text-sm font-medium">GBP</label>
+                    <MoneyInput {...register('gbp')} currency="GBP" value={args.value} />
+                </div>
+
+                <div className="space-y-2">
+                    <label className="text-sm font-medium">JPY</label>
+                    <MoneyInput {...register('jpy')} currency="JPY" value={args.value} />
+                </div>
+            </div>
+        );
+    },
+};
+
+export const LargeAmount: Story = {
+    render: () => {
+        const { register } = useForm();
+        const field = register('large');
+        return (
+            <div className="w-[300px]">
+                <MoneyInput {...field} currency="USD" value={123} />
+            </div>
+        );
+    },
+};

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

@@ -0,0 +1,122 @@
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
+import { useEffect, useMemo, useState } from 'react';
+import { AffixedInput } from './affixed-input.js';
+
+import { DashboardFormComponentProps } from '@/vdb/framework/form-engine/form-engine-types.js';
+import { isReadonlyField } from '@/vdb/framework/form-engine/utils.js';
+import { useChannel } from '@/vdb/hooks/use-channel.js';
+import { useDisplayLocale } from '@/vdb/hooks/use-display-locale.js';
+
+export interface MoneyInputProps extends DashboardFormComponentProps {
+    currency?: string;
+}
+
+/**
+ * @description
+ * A component for displaying a money value. The `currency` can be specified, but otherwise
+ * will be taken from the active channel's default currency.
+ *
+ * @docsCategory form-components
+ * @docsPage MoneyInput
+ */
+export function MoneyInput(props: Readonly<MoneyInputProps>) {
+    const { value, onChange, currency, ...rest } = props;
+    const { activeChannel } = useChannel();
+    const activeCurrency = currency ?? activeChannel?.defaultCurrencyCode;
+    const readOnly = isReadonlyField(props.fieldDef);
+    const { bcp47Tag } = useDisplayLocale();
+    const { toMajorUnits, toMinorUnits } = useLocalFormat();
+    const [displayValue, setDisplayValue] = useState(toMajorUnits(value).toFixed(2));
+
+    // Update display value when prop value changes
+    useEffect(() => {
+        setDisplayValue(toMajorUnits(value).toFixed(2));
+    }, [value, toMajorUnits]);
+
+    // Determine if the currency symbol should be a prefix based on locale
+    const shouldPrefix = useMemo(() => {
+        if (!activeCurrency) {
+            return false;
+        }
+        const parts = new Intl.NumberFormat(bcp47Tag, {
+            style: 'currency',
+            currency: activeCurrency,
+            currencyDisplay: 'symbol',
+        }).formatToParts();
+        const NaNString = parts.find(p => p.type === 'nan')?.value ?? 'NaN';
+        const localised = new Intl.NumberFormat(bcp47Tag, {
+            style: 'currency',
+            currency: activeCurrency,
+            currencyDisplay: 'symbol',
+        }).format(undefined as any);
+        return localised.indexOf(NaNString) > 0;
+    }, [activeCurrency, bcp47Tag]);
+
+    // Get the currency symbol
+    const currencySymbol = useMemo(() => {
+        if (!activeCurrency) return '';
+        const parts = new Intl.NumberFormat(bcp47Tag, {
+            style: 'currency',
+            currency: activeCurrency,
+            currencyDisplay: 'symbol',
+        }).formatToParts();
+
+        if (activeCurrency === 'CUP') {
+            return '₱';
+        }
+
+        return parts.find(p => p.type === 'currency')?.value ?? activeCurrency;
+    }, [activeCurrency, bcp47Tag]);
+
+    return (
+        <AffixedInput
+            type="text"
+            className="bg-background"
+            value={displayValue}
+            disabled={readOnly}
+            {...rest}
+            onChange={e => {
+                const inputValue = e.target.value;
+                // Allow empty input
+                if (inputValue === '') {
+                    setDisplayValue('');
+                    return;
+                }
+                // Only allow numbers and one decimal point
+                if (!/^[0-9.]*$/.test(inputValue)) {
+                    return;
+                }
+                setDisplayValue(inputValue);
+            }}
+            onKeyDown={e => {
+                if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+                    e.preventDefault();
+                    const currentValue = parseFloat(displayValue) || 0;
+                    const step = e.key === 'ArrowUp' ? 0.01 : -0.01;
+                    const newValue = currentValue + step;
+                    if (newValue >= 0) {
+                        onChange(toMinorUnits(newValue));
+                        setDisplayValue(newValue.toString());
+                    }
+                }
+            }}
+            onBlur={() => {
+                const inputValue = displayValue;
+                if (inputValue === '') {
+                    onChange(0);
+                    setDisplayValue('0');
+                    return;
+                }
+                const newValue = parseFloat(inputValue);
+                if (!isNaN(newValue)) {
+                    onChange(toMinorUnits(newValue));
+                    setDisplayValue(newValue.toFixed(2));
+                }
+            }}
+            step="0.01"
+            min="0"
+            prefix={shouldPrefix ? currencySymbol : undefined}
+            suffix={!shouldPrefix ? currencySymbol : undefined}
+        />
+    );
+}

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

@@ -0,0 +1,103 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useForm } from 'react-hook-form';
+import { withDescription } from '../../../.storybook/with-description.js';
+import { NumberInput } from './number-input.js';
+
+const meta = {
+    title: 'Form Inputs/NumberInput',
+    component: NumberInput,
+    ...withDescription(import.meta.url, './number-input.js'),
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        value: {
+            control: 'number',
+            description: 'The current value',
+        },
+        min: {
+            control: 'number',
+            description: 'Minimum value',
+        },
+        max: {
+            control: 'number',
+            description: 'Maximum value',
+        },
+        step: {
+            control: 'number',
+            description: 'Step increment',
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Whether the input is disabled',
+        },
+    },
+} satisfies Meta<typeof NumberInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+    args: {
+        value: 42,
+        min: 0,
+        max: 100,
+        step: 1,
+        disabled: false,
+    },
+    render: args => {
+        const { register } = useForm();
+        const field = register('playground');
+        return (
+            <div className="w-[300px]">
+                <NumberInput {...field} {...args} />
+            </div>
+        );
+    },
+};
+
+export const Float: Story = {
+    render: () => {
+        const { register } = useForm();
+        const field = register('float');
+        return (
+            <div className="w-[300px] space-y-2">
+                <NumberInput {...field} step={0.01} fieldDef={{ type: 'float' }} />
+                <div className="text-sm text-muted-foreground">
+                    <div>Floating point with step 0.01</div>
+                </div>
+            </div>
+        );
+    },
+};
+
+export const WithPrefixAndSuffix: Story = {
+    render: () => {
+        const { register } = useForm();
+        const field = register('withAffix');
+        return (
+            <div className="w-[300px] space-y-2">
+                <NumberInput {...field} fieldDef={{ ui: { prefix: '$', suffix: 'USD' } }} step={10} />
+                <div className="text-sm text-muted-foreground">
+                    Demonstrates fieldDef.ui.prefix and fieldDef.ui.suffix
+                </div>
+            </div>
+        );
+    },
+};
+
+export const NullValue: Story = {
+    render: () => {
+        const { register } = useForm();
+        const field = register('nullValue');
+        return (
+            <div className="w-[300px] space-y-2">
+                <NumberInput {...field} />
+                <div className="text-sm text-muted-foreground">
+                    <div className="mt-1 text-xs">When input is cleared, value becomes null</div>
+                </div>
+            </div>
+        );
+    },
+};

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

@@ -0,0 +1,85 @@
+import { AffixedInput } from '@/vdb/components/data-input/affixed-input.js';
+import { Input } from '@/vdb/components/ui/input.js';
+
+import { DashboardFormComponentProps } from '@/vdb/framework/form-engine/form-engine-types.js';
+import { isReadonlyField } from '@/vdb/framework/form-engine/utils.js';
+import { ReactNode } from 'react';
+
+export type NumberInputProps = DashboardFormComponentProps & {
+    min?: number;
+    max?: number;
+    step?: number;
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+};
+
+/**
+ * @description
+ * A component for displaying a numeric value.
+ *
+ * @docsCategory form-components
+ * @docsPage NumberInput
+ */
+export function NumberInput({
+    fieldDef,
+    onChange,
+    prefix: overridePrefix,
+    suffix: overrideSuffix,
+    ...fieldProps
+}: Readonly<NumberInputProps>) {
+    const readOnly = fieldProps.disabled || isReadonlyField(fieldDef);
+    const isFloat = fieldDef ? fieldDef.type === 'float' : false;
+    const min = fieldProps.min ?? fieldDef?.ui?.min;
+    const max = fieldProps.max ?? fieldDef?.ui?.max;
+    const step = fieldProps.step ?? (fieldDef?.ui?.step || (isFloat ? 0.01 : 1));
+    const prefix = overridePrefix ?? fieldDef?.ui?.prefix;
+    const suffix = overrideSuffix ?? fieldDef?.ui?.suffix;
+    const shouldUseAffixedInput = prefix || suffix;
+    const value = fieldProps.value ?? '';
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (readOnly) return;
+
+        let numValue = e.target.valueAsNumber;
+
+        if (Number.isNaN(numValue) && e.target.value) {
+            const normalized = e.target.value.replace(',', '.');
+            numValue = Number(normalized);
+        }
+
+        if (Number.isNaN(numValue)) {
+            onChange(null);
+        } else {
+            onChange(numValue);
+        }
+    };
+    if (shouldUseAffixedInput) {
+        return (
+            <AffixedInput
+                {...fieldProps}
+                value={value}
+                type="number"
+                onChange={handleChange}
+                min={min}
+                max={max}
+                step={step}
+                prefix={prefix}
+                suffix={suffix}
+                className="bg-background"
+                disabled={readOnly}
+            />
+        );
+    }
+
+    return (
+        <Input
+            type="number"
+            onChange={handleChange}
+            {...fieldProps}
+            value={value}
+            min={min}
+            max={max}
+            step={step}
+            disabled={readOnly}
+        />
+    );
+}

package/src/lib/components/data-input/password-form-input.stories.tsx

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useForm } from 'react-hook-form';
+import { withDescription } from '../../../.storybook/with-description.js';
+import { PasswordFormInput } from './password-form-input.js';
+
+const meta = {
+    title: 'Form Inputs/PasswordFormInput',
+    component: PasswordFormInput,
+    ...withDescription(import.meta.url, './password-form-input.js'),
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        value: {
+            control: 'text',
+            description: 'The current password value',
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Whether the input is disabled',
+        },
+    },
+} satisfies Meta<typeof PasswordFormInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+    args: {
+        value: 'secret123',
+        disabled: false,
+    },
+    render: args => {
+        const { register } = useForm();
+        const field = register('password');
+        return (
+            <div className="w-[300px]">
+                <PasswordFormInput {...field} {...args} />
+            </div>
+        );
+    },
+};
+
+export const ChangePassword: Story = {
+    render: () => {
+        const { register } = useForm();
+        return (
+            <div className="w-[300px] space-y-4">
+                <div className="space-y-2">
+                    <label className="text-sm font-medium">Current Password</label>
+                    <PasswordFormInput {...register('currentPassword')} />
+                </div>
+                <div className="space-y-2">
+                    <label className="text-sm font-medium">New Password</label>
+                    <PasswordFormInput {...register('newPassword')} />
+                </div>
+                <div className="space-y-2">
+                    <label className="text-sm font-medium">Confirm New Password</label>
+                    <PasswordFormInput {...register('confirmPassword')} />
+                </div>
+            </div>
+        );
+    },
+};

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

@@ -0,0 +1,23 @@
+import { DashboardFormComponentProps } from '@/vdb/framework/form-engine/form-engine-types.js';
+import { isReadonlyField } from '@/vdb/framework/form-engine/utils.js';
+import { Input } from '../ui/input.js';
+
+/**
+ * @description
+ * A component for displaying a password input.
+ *
+ * @docsCategory form-components
+ * @docsPage PasswordInput
+ */
+export function PasswordFormInput(props: Readonly<DashboardFormComponentProps>) {
+    const readOnly = props.disabled || isReadonlyField(props.fieldDef);
+    return (
+        <Input
+            type="password"
+            ref={props.ref}
+            value={props.value}
+            onChange={e => props.onChange(e.target.value)}
+            disabled={readOnly}
+        />
+    );
+}