@vendure/dashboard 3.5.0-minor-202510031341 → 3.5.0-minor-202510161257

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

@@ -13,7 +13,7 @@ export type AffixedInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>
 /**
  * @description
  * A component for displaying an input with a prefix and/or a suffix.
- * 
+ *
  * @example
  * ```tsx
  * <AffixedInput
@@ -24,7 +24,7 @@ export type AffixedInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>
  *     onChange={e => field.onChange(e.target.valueAsNumber)}
  * />
  * ```
- * 
+ *
  * @docsCategory form-components
  * @docsPage AffixedInput
  */
@@ -65,6 +65,9 @@ export function AffixedInput({ prefix, suffix, className = '', ...props }: Reado
                 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">

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/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/customer-group-input.tsx

@@ -26,7 +26,6 @@ export function CustomerGroupInput({
     disabled,
     fieldDef,
 }: Readonly<DashboardFormComponentProps>) {
-    console.log(fieldDef);
     const { data } = useQuery({
         queryKey: ['customerGroups', value],
         queryFn: () =>

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

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useForm } from 'react-hook-form';
+import { withDescription } from '../../../.storybook/with-description.js';
+import { DateTimeInput } from './datetime-input.js';
+
+const meta = {
+    title: 'Form Inputs/DateTimeInput',
+    component: DateTimeInput,
+    ...withDescription(import.meta.url, './datetime-input.js'),
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        value: {
+            control: 'text',
+            description: 'ISO 8601 datetime string',
+        },
+    },
+} satisfies Meta<typeof DateTimeInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+    args: {
+        value: new Date('2024-06-15T14:30:00').toISOString(),
+    },
+    render: args => {
+        const { register } = useForm();
+        const field = register('playground');
+        return (
+            <div className="w-[400px]">
+                <DateTimeInput {...field} {...args} />
+            </div>
+        );
+    },
+};
+
+export const FutureDate: Story = {
+    render: () => {
+        const { register } = useForm();
+        const field = register('future');
+        return (
+            <div className="w-[400px]">
+                <DateTimeInput {...field} />
+            </div>
+        );
+    },
+};
+
+export const ClearableValue: Story = {
+    render: () => {
+        const { register } = useForm();
+        const field = register('clearable');
+        return (
+            <div className="w-[400px]">
+                <DateTimeInput {...field} />
+            </div>
+        );
+    },
+};

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

@@ -13,7 +13,7 @@ import { isReadonlyField } from '@/vdb/framework/form-engine/utils.js';
 import { useDisplayLocale } from '@/vdb/hooks/use-display-locale.js';
 import { cn } from '@/vdb/lib/utils.js';
 import type { Locale } from 'date-fns/locale';
-import { CalendarClock } from 'lucide-react';
+import { CalendarClock, X } from 'lucide-react';
 
 /**
  * @description
@@ -62,24 +62,38 @@ export function DateTimeInput({ value, onChange, fieldDef }: Readonly<DashboardF
                 const currentHours = newDate.getHours();
                 newDate.setHours(value === 'PM' ? currentHours + 12 : currentHours - 12);
             }
-            onChange(newDate);
+            onChange(newDate.toISOString());
         }
     };
 
     return (
         <Popover open={isOpen} onOpenChange={readOnly ? undefined : setIsOpen}>
             <PopoverTrigger asChild>
-                <Button
-                    variant="outline"
-                    disabled={readOnly}
-                    className={cn(
-                        'w-full justify-start text-left font-normal shadow-xs',
-                        !date && 'text-muted-foreground',
-                    )}
-                >
-                    <CalendarClock className="mr-2 h-4 w-4" />
-                    {date ? format(date, 'MM/dd/yyyy hh:mm aa') : <span>MM/DD/YYYY hh:mm aa</span>}
-                </Button>
+                <div className="flex items-center">
+                    <Button
+                        variant="outline"
+                        disabled={readOnly}
+                        className={cn(
+                            'w-full justify-start text-left font-normal shadow-xs',
+                            date ? 'rounded-r-none' : 'text-muted-foreground',
+                        )}
+                    >
+                        <CalendarClock className="mr-2 h-4 w-4" />
+                        {date ? format(date, 'MM/dd/yyyy hh:mm aa') : <span>MM/DD/YYYY hh:mm aa</span>}
+                    </Button>
+                    {date ? (
+                        <Button
+                            variant="outline"
+                            className="rounded-l-none border-l-0"
+                            onClick={e => {
+                                e.stopPropagation();
+                                onChange(null);
+                            }}
+                        >
+                            <X />
+                        </Button>
+                    ) : null}
+                </div>
             </PopoverTrigger>
             <PopoverContent className="w-auto p-0">
                 <div className="sm:flex">

package/src/lib/components/data-input/default-relation-input.tsx

@@ -1,11 +1,14 @@
 import { graphql } from '@/vdb/graphql/graphql.js';
 import { Trans, useLingui } from '@lingui/react/macro';
-import { RelationCustomFieldConfig } from '@vendure/common/lib/generated-types';
-import { ControllerRenderProps } from 'react-hook-form';
+import { useMemo } from 'react';
 import { MultiRelationInput, SingleRelationInput } from './relation-input.js';
 import { createRelationSelectorConfig } from './relation-selector.js';
 
-import { DashboardFormComponentProps } from '@/vdb/framework/form-engine/form-engine-types.js';
+import {
+    DashboardFormComponentMetadata,
+    DashboardFormComponentProps,
+    RelationCustomFieldConfig,
+} from '@/vdb/framework/form-engine/form-engine-types.js';
 import { isRelationCustomFieldConfig } from '@/vdb/framework/form-engine/utils.js';
 
 interface PlaceholderIconProps {
@@ -549,11 +552,9 @@ const createEntityConfigs = (i18n: any) => ({
     }),
 });
 
-interface DefaultRelationInputProps {
-    fieldDef: RelationCustomFieldConfig;
-    field: ControllerRenderProps<any, any>;
-    disabled?: boolean;
-}
+type DefaultRelationInputProps = DashboardFormComponentProps & {
+    entityType?: keyof ReturnType<typeof createEntityConfigs>;
+};
 
 export function DefaultRelationInput({
     fieldDef,
@@ -563,13 +564,14 @@ export function DefaultRelationInput({
     name,
     ref,
     disabled,
-}: Readonly<DashboardFormComponentProps>) {
+    entityType,
+}: Readonly<DefaultRelationInputProps>) {
     const { t } = useLingui();
-    if (!fieldDef || !isRelationCustomFieldConfig(fieldDef)) {
+    if (!fieldDef || (!isRelationCustomFieldConfig(fieldDef) && !entityType)) {
         return null;
     }
-    const entityName = fieldDef.entity;
-    const ENTITY_CONFIGS = createEntityConfigs(t);
+    const entityName = entityType ?? (fieldDef as RelationCustomFieldConfig).entity;
+    const ENTITY_CONFIGS = useMemo(() => createEntityConfigs(t), [t]);
     const config = ENTITY_CONFIGS[entityName as keyof typeof ENTITY_CONFIGS];
 
     if (!config) {
@@ -618,3 +620,7 @@ export function DefaultRelationInput({
         );
     }
 }
+
+DefaultRelationInput.metadata = {
+    isListInput: 'dynamic',
+} as DashboardFormComponentMetadata;

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

@@ -1,11 +1,11 @@
 import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
-import { useUserSettings } from '@/vdb/hooks/use-user-settings.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;
@@ -24,9 +24,7 @@ export function MoneyInput(props: Readonly<MoneyInputProps>) {
     const { activeChannel } = useChannel();
     const activeCurrency = currency ?? activeChannel?.defaultCurrencyCode;
     const readOnly = isReadonlyField(props.fieldDef);
-    const {
-        settings: { displayLanguage, displayLocale },
-    } = useUserSettings();
+    const { bcp47Tag } = useDisplayLocale();
     const { toMajorUnits, toMinorUnits } = useLocalFormat();
     const [displayValue, setDisplayValue] = useState(toMajorUnits(value).toFixed(2));
 
@@ -40,32 +38,30 @@ export function MoneyInput(props: Readonly<MoneyInputProps>) {
         if (!activeCurrency) {
             return false;
         }
-        const locale = displayLocale || displayLanguage.replace(/_/g, '-');
-        const parts = new Intl.NumberFormat(locale, {
+        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(locale, {
+        const localised = new Intl.NumberFormat(bcp47Tag, {
             style: 'currency',
             currency: activeCurrency,
             currencyDisplay: 'symbol',
         }).format(undefined as any);
         return localised.indexOf(NaNString) > 0;
-    }, [activeCurrency, displayLocale, displayLanguage]);
+    }, [activeCurrency, bcp47Tag]);
 
     // Get the currency symbol
     const currencySymbol = useMemo(() => {
         if (!activeCurrency) return '';
-        const locale = displayLocale || displayLanguage.replace(/_/g, '-');
-        const parts = new Intl.NumberFormat(locale, {
+        const parts = new Intl.NumberFormat(bcp47Tag, {
             style: 'currency',
             currency: activeCurrency,
             currencyDisplay: 'symbol',
         }).formatToParts();
         return parts.find(p => p.type === 'currency')?.value ?? activeCurrency;
-    }, [activeCurrency, displayLocale, displayLanguage]);
+    }, [activeCurrency, bcp47Tag]);
 
     return (
         <AffixedInput