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

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

@@ -4,6 +4,12 @@ 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';
 
+export type NumberInputProps = DashboardFormComponentProps & {
+    min?: number;
+    max?: number;
+    step?: number;
+};
+
 /**
  * @description
  * A component for displaying a numeric value.
@@ -11,12 +17,12 @@ import { isReadonlyField } from '@/vdb/framework/form-engine/utils.js';
  * @docsCategory form-components
  * @docsPage NumberInput
  */
-export function NumberInput({ fieldDef, onChange, ...fieldProps }: Readonly<DashboardFormComponentProps>) {
+export function NumberInput({ fieldDef, onChange, ...fieldProps }: Readonly<NumberInputProps>) {
     const readOnly = fieldProps.disabled || isReadonlyField(fieldDef);
     const isFloat = fieldDef ? fieldDef.type === 'float' : false;
-    const min = fieldDef?.ui?.min;
-    const max = fieldDef?.ui?.max;
-    const step = fieldDef?.ui?.step || (isFloat ? 0.01 : 1);
+    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 = fieldDef?.ui?.prefix;
     const suffix = fieldDef?.ui?.suffix;
     const shouldUseAffixedInput = prefix || suffix;

package/src/lib/components/data-input/password-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 { PasswordInput } from './password-input.js';
+
+const meta = {
+    title: 'Form Inputs/PasswordInput',
+    component: PasswordInput,
+    ...withDescription(import.meta.url, './password-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 PasswordInput>;
+
+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]">
+                <PasswordInput {...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>
+                    <PasswordInput {...register('currentPassword')} />
+                </div>
+                <div className="space-y-2">
+                    <label className="text-sm font-medium">New Password</label>
+                    <PasswordInput {...register('newPassword')} />
+                </div>
+                <div className="space-y-2">
+                    <label className="text-sm font-medium">Confirm New Password</label>
+                    <PasswordInput {...register('confirmPassword')} />
+                </div>
+            </div>
+        );
+    },
+};

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

@@ -0,0 +1,92 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useForm } from 'react-hook-form';
+import { withDescription } from '../../../.storybook/with-description.js';
+import { RichTextInput } from './rich-text-input.js';
+
+const meta = {
+    title: 'Form Inputs/RichTextInput',
+    component: RichTextInput,
+    ...withDescription(import.meta.url, './rich-text-input.js'),
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        value: {
+            control: 'text',
+            description: 'The rich text HTML content',
+        },
+    },
+} satisfies Meta<typeof RichTextInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+    args: {
+        value: '<p>Edit this <strong>rich text</strong> content!</p>',
+    },
+    render: args => {
+        const { register } = useForm();
+        const field = register('content');
+        return (
+            <div className="w-[600px]">
+                <RichTextInput {...field} {...args} />
+            </div>
+        );
+    },
+};
+
+export const EmptyEditor: Story = {
+    render: () => {
+        const { register } = useForm();
+        const field = register('empty');
+        return (
+            <div className="w-[600px]">
+                <RichTextInput {...field} />
+            </div>
+        );
+    },
+};
+
+export const WithComplexContent: Story = {
+    render: () => {
+        const { register } = useForm();
+        const field = register('complex');
+        return (
+            <div className="w-[600px]">
+                <RichTextInput
+                    {...field}
+                    value={`
+                        <h2>Product Description</h2>
+                        <p>This is a <strong>high-quality</strong> product with the following features:</p>
+                        <ul>
+                            <li>Feature one with <em>emphasis</em></li>
+                            <li>Feature two with a <a href="https://example.com">link</a></li>
+                            <li>Feature three</li>
+                        </ul>
+                        <blockquote>
+                            <p>Customer testimonial goes here</p>
+                        </blockquote>
+                    `}
+                />
+            </div>
+        );
+    },
+};
+
+export const ReadonlyMode: Story = {
+    render: () => {
+        const { register } = useForm();
+        const field = register('readonly');
+        return (
+            <div className="w-[600px]">
+                <RichTextInput
+                    {...field}
+                    value="<p>This content is <strong>readonly</strong> and cannot be edited.</p>"
+                    fieldDef={{ readonly: true }}
+                />
+            </div>
+        );
+    },
+};

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

@@ -0,0 +1,232 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { FormProvider, useForm } from 'react-hook-form';
+import { withDescription } from '../../../.storybook/with-description.js';
+import { SlugInput } from './slug-input.js';
+
+const meta = {
+    title: 'Form Inputs/SlugInput',
+    component: SlugInput,
+    ...withDescription(import.meta.url, './slug-input.js'),
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    decorators: [
+        Story => (
+            <div className="w-[500px]">
+                <Story />
+            </div>
+        ),
+    ],
+    argTypes: {
+        entityName: {
+            control: 'text',
+            description: 'The name of the entity (e.g., "Product", "Collection")',
+        },
+        fieldName: {
+            control: 'text',
+            description: 'The name of the field to check for uniqueness (e.g., "slug", "code")',
+        },
+        watchFieldName: {
+            control: 'text',
+            description: 'The name of the field to watch for changes',
+        },
+        defaultReadonly: {
+            control: 'boolean',
+            description: 'Whether the input should start in readonly mode',
+        },
+    },
+} satisfies Meta<typeof SlugInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const AutoGenerating: Story = {
+    render: () => {
+        const form = useForm({
+            defaultValues: {
+                name: 'Product Name',
+                slug: '',
+            },
+        });
+
+        return (
+            <FormProvider {...form}>
+                <div className="space-y-4">
+                    <div>
+                        <label className="text-sm font-medium mb-2 block">Name</label>
+                        <input
+                            {...form.register('name')}
+                            className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors"
+                            placeholder="Enter product name"
+                        />
+                    </div>
+                    <div>
+                        <label className="text-sm font-medium mb-2 block">Slug (auto-generated)</label>
+                        <SlugInput
+                            {...form.register('slug')}
+                            value={form.watch('slug')}
+                            onChange={value => form.setValue('slug', value)}
+                            entityName="Product"
+                            fieldName="slug"
+                            watchFieldName="name"
+                        />
+                    </div>
+                    <div className="text-sm text-muted-foreground">
+                        <div>Name value: {form.watch('name')}</div>
+                        <div>Slug value: {form.watch('slug')}</div>
+                    </div>
+                </div>
+            </FormProvider>
+        );
+    },
+};
+
+export const WithExistingValue: Story = {
+    render: () => {
+        const form = useForm({
+            defaultValues: {
+                name: 'Existing Product',
+                slug: 'existing-product-slug',
+            },
+        });
+
+        return (
+            <FormProvider {...form}>
+                <div className="space-y-4">
+                    <div>
+                        <label className="text-sm font-medium mb-2 block">Name</label>
+                        <input
+                            {...form.register('name')}
+                            className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors"
+                            placeholder="Enter product name"
+                        />
+                    </div>
+                    <div>
+                        <label className="text-sm font-medium mb-2 block">Slug (with existing value)</label>
+                        <SlugInput
+                            {...form.register('slug')}
+                            value={form.watch('slug')}
+                            onChange={value => form.setValue('slug', value)}
+                            entityName="Product"
+                            fieldName="slug"
+                            watchFieldName="name"
+                            entityId="1"
+                        />
+                    </div>
+                    <div className="text-sm text-muted-foreground">
+                        Click the Edit button to manually edit the slug, or click Regenerate to update from
+                        the name field.
+                    </div>
+                </div>
+            </FormProvider>
+        );
+    },
+};
+
+export const ManualEditing: Story = {
+    render: () => {
+        const form = useForm({
+            defaultValues: {
+                name: 'Custom Product',
+                slug: '',
+            },
+        });
+
+        return (
+            <FormProvider {...form}>
+                <div className="space-y-4">
+                    <div>
+                        <label className="text-sm font-medium mb-2 block">Name</label>
+                        <input
+                            {...form.register('name')}
+                            className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors"
+                            placeholder="Enter product name"
+                        />
+                    </div>
+                    <div>
+                        <label className="text-sm font-medium mb-2 block">
+                            Slug (click Edit to customize)
+                        </label>
+                        <SlugInput
+                            {...form.register('slug')}
+                            value={form.watch('slug')}
+                            onChange={value => form.setValue('slug', value)}
+                            entityName="Product"
+                            fieldName="slug"
+                            watchFieldName="name"
+                        />
+                    </div>
+                    <div className="text-sm text-muted-foreground">
+                        Click the Edit button to switch to manual mode. Click the Lock button to switch back
+                        to auto-generation.
+                    </div>
+                </div>
+            </FormProvider>
+        );
+    },
+};
+
+export const StartInEditableMode: Story = {
+    render: () => {
+        const form = useForm({
+            defaultValues: {
+                code: '',
+            },
+        });
+
+        return (
+            <FormProvider {...form}>
+                <div className="space-y-4">
+                    <div>
+                        <label className="text-sm font-medium mb-2 block">Channel Code</label>
+                        <SlugInput
+                            {...form.register('code')}
+                            value={form.watch('code')}
+                            onChange={value => form.setValue('code', value)}
+                            entityName="Channel"
+                            fieldName="code"
+                            watchFieldName="name"
+                            defaultReadonly={false}
+                        />
+                    </div>
+                    <div className="text-sm text-muted-foreground">
+                        This slug input starts in editable mode (defaultReadonly=false).
+                    </div>
+                </div>
+            </FormProvider>
+        );
+    },
+};
+
+export const Readonly: Story = {
+    render: () => {
+        const form = useForm({
+            defaultValues: {
+                slug: 'readonly-slug',
+            },
+        });
+
+        return (
+            <FormProvider {...form}>
+                <div className="space-y-4">
+                    <div>
+                        <label className="text-sm font-medium mb-2 block">Readonly Slug</label>
+                        <SlugInput
+                            {...form.register('slug')}
+                            value={form.watch('slug')}
+                            onChange={value => form.setValue('slug', value)}
+                            entityName="Product"
+                            fieldName="slug"
+                            watchFieldName="name"
+                            fieldDef={{ readonly: true }}
+                        />
+                    </div>
+                    <div className="text-sm text-muted-foreground">
+                        This slug input is readonly (fieldDef.readonly=true). No edit buttons are shown.
+                    </div>
+                </div>
+            </FormProvider>
+        );
+    },
+};

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

@@ -168,20 +168,19 @@ export function SlugInput({
 
     const watchFieldState = form.getFieldState(actualWatchFieldName);
     const debouncedWatchedValue = useDebounce(watchedValue, 500);
-
-    const shouldAutoGenerate = isReadonly && !value && watchFieldState.isDirty;
-
+    const shouldAutoGenerate = isReadonly && !entityId && watchFieldState.isDirty;
+    const queryKey = ['slugForEntity', entityName, fieldName, debouncedWatchedValue, entityId];
+    const enabled = !!debouncedWatchedValue && shouldAutoGenerate;
     const {
         data: generatedSlug,
         isLoading,
         refetch,
     } = useQuery({
-        queryKey: ['slugForEntity', entityName, fieldName, debouncedWatchedValue, entityId],
+        queryKey,
         queryFn: async () => {
             if (!debouncedWatchedValue) {
                 return '';
             }
-
             const result = await api.query(slugForEntityDocument, {
                 input: {
                     entityName,
@@ -193,14 +192,14 @@ export function SlugInput({
 
             return result.slugForEntity;
         },
-        enabled: !!debouncedWatchedValue && shouldAutoGenerate,
+        enabled,
     });
 
     useEffect(() => {
-        if (isReadonly && generatedSlug && generatedSlug !== value) {
+        if (shouldAutoGenerate && generatedSlug && generatedSlug !== value) {
             onChange?.(generatedSlug);
         }
-    }, [generatedSlug, isReadonly, value, onChange]);
+    }, [generatedSlug, shouldAutoGenerate, value, onChange]);
 
     const toggleReadonly = () => {
         if (!isFormReadonly) {
@@ -221,8 +220,8 @@ export function SlugInput({
         onChange?.(newValue);
     };
 
-    const displayValue = isReadonly && generatedSlug ? generatedSlug : value || '';
-    const showLoading = isLoading && isReadonly;
+    const displayValue = shouldAutoGenerate && generatedSlug ? generatedSlug : value || '';
+    const showLoading = isLoading && shouldAutoGenerate;
 
     return (
         <div className="relative flex items-center gap-2">

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/textarea-input.stories.tsx

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useForm } from 'react-hook-form';
+import { withDescription } from '../../../.storybook/with-description.js';
+import { TextareaInput } from './textarea-input.js';
+
+const meta = {
+    title: 'Form Inputs/TextareaInput',
+    component: TextareaInput,
+    ...withDescription(import.meta.url, './textarea-input.js'),
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        value: {
+            control: 'text',
+            description: 'The current value',
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Whether the textarea is disabled',
+        },
+    },
+} satisfies Meta<typeof TextareaInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+    args: {
+        value: 'Edit this text!\nMultiple lines supported.',
+        disabled: false,
+    },
+    render: args => {
+        const { register } = useForm();
+        const field = register('playground');
+        return (
+            <div className="w-[500px]">
+                <TextareaInput {...field} {...args} />
+            </div>
+        );
+    },
+};
+
+export const LongText: Story = {
+    render: () => {
+        const { register } = useForm();
+        const field = register('longText');
+        return (
+            <div className="w-[500px]">
+                <TextareaInput {...field} />
+            </div>
+        );
+    },
+};

package/src/lib/components/data-table/add-filter-menu.tsx

@@ -53,7 +53,12 @@ export function AddFilterMenu({ columns }: Readonly<AddFilterMenuProps>) {
                     ))}
                 </DropdownMenuContent>
             </DropdownMenu>
-            {selectedColumn && <DataTableFilterDialog column={selectedColumn as any} />}
+            {selectedColumn && (
+                <DataTableFilterDialog
+                    column={selectedColumn as any}
+                    onEnter={() => setIsDialogOpen(false)}
+                />
+            )}
         </Dialog>
     );
 }