@vendure/dashboard 3.4.3-master-202509260228 → 3.5.0-minor-202510012036

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

@@ -1,5 +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 <JsonEditor data={value} />;
+    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-input/combination-mode-input.tsx

@@ -1,5 +1,5 @@
 import { DashboardFormComponentProps } from '@/vdb/framework/form-engine/form-engine-types.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 
 export type CombinationModeInputProps = DashboardFormComponentProps & {
     position?: number;

package/src/lib/components/data-input/custom-field-list-input.tsx

@@ -1,6 +1,5 @@
 import { Button } from '@/vdb/components/ui/button.js';
 import { DashboardFormComponentProps } from '@/vdb/framework/form-engine/form-engine-types.js';
-import { useLingui } from '@/vdb/lib/trans.js';
 import {
     closestCenter,
     DndContext,
@@ -18,6 +17,7 @@ import {
     verticalListSortingStrategy,
 } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
+import { useLingui } from '@lingui/react/macro';
 import { GripVertical, Plus, X } from 'lucide-react';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { ControllerRenderProps } from 'react-hook-form';
@@ -53,7 +53,7 @@ function SortableItem({
     field,
     isFullWidth = false,
 }: Readonly<SortableItemProps>) {
-    const { i18n } = useLingui();
+    const { t } = useLingui();
     const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
         id: itemWithId._id,
         disabled,
@@ -69,7 +69,7 @@ function SortableItem({
             {...attributes}
             {...listeners}
             className="cursor-move text-muted-foreground hover:text-foreground transition-colors"
-            title={i18n.t('Drag to reorder')}
+            title={t`Drag to reorder`}
         >
             <GripVertical className="h-4 w-4" />
         </div>
@@ -82,7 +82,7 @@ function SortableItem({
             size="sm"
             onClick={() => onRemove(itemWithId._id)}
             className="h-6 w-6 p-0 text-muted-foreground hover:text-destructive transition-colors opacity-0 group-hover:opacity-100"
-            title={i18n.t('Remove item')}
+            title={t`Remove item`}
         >
             <X className="h-3 w-3" />
         </Button>
@@ -169,9 +169,13 @@ function convertToFlatArray(itemsWithIds: ListItemWithId[]): any[] {
     return itemsWithIds.map(item => item.value);
 }
 
-export const CustomFieldListInput = ({ renderInput, defaultValue, ...fieldProps }: CustomFieldListInputProps) => {
+export const CustomFieldListInput = ({
+    renderInput,
+    defaultValue,
+    ...fieldProps
+}: CustomFieldListInputProps) => {
     const { value, onChange, disabled } = fieldProps;
-    const { i18n } = useLingui();
+    const { t } = useLingui();
     const sensors = useSensors(
         useSensor(PointerSensor),
         useSensor(KeyboardSensor, {
@@ -282,7 +286,7 @@ export const CustomFieldListInput = ({ renderInput, defaultValue, ...fieldProps
             {!disabled && (
                 <Button type="button" variant="outline" size="sm" onClick={handleAddItem} className="w-full">
                     <Plus className="h-4 w-4 mr-2" />
-                    {i18n.t('Add item')}
+                    {t`Add item`}
                 </Button>
             )}
         </div>

package/src/lib/components/data-input/customer-group-input.tsx

@@ -6,13 +6,11 @@ import { CustomerGroupSelector } from '../shared/customer-group-selector.js';
 
 import { DashboardFormComponentProps } from '@/vdb/framework/form-engine/form-engine-types.js';
 
-const customerGroupsDocument = graphql(`
-    query GetCustomerGroups($options: CustomerGroupListOptions) {
-        customerGroups(options: $options) {
-            items {
-                id
-                name
-            }
+const customerGroupDocument = graphql(`
+    query GetCustomerGroup($id: ID!) {
+        customerGroup(id: $id) {
+            id
+            name
         }
     }
 `);
@@ -22,47 +20,43 @@ export interface CustomerGroup {
     name: string;
 }
 
-export function CustomerGroupInput({ value, onChange, disabled }: Readonly<DashboardFormComponentProps>) {
-    const ids = decodeIds(value);
-    const { data: groups } = useQuery({
-        queryKey: ['customerGroups', ids],
+export function CustomerGroupInput({
+    value,
+    onChange,
+    disabled,
+    fieldDef,
+}: Readonly<DashboardFormComponentProps>) {
+    console.log(fieldDef);
+    const { data } = useQuery({
+        queryKey: ['customerGroups', value],
         queryFn: () =>
-            api.query(customerGroupsDocument, {
-                options: {
-                    filter: {
-                        id: { in: ids },
-                    },
-                },
+            api.query(customerGroupDocument, {
+                id: value,
             }),
+        enabled: !!value,
     });
 
     const onValueSelectHandler = (value: CustomerGroup) => {
-        const newIds = new Set([...ids, value.id]);
-        onChange(JSON.stringify(Array.from(newIds)));
+        onChange(value.id);
     };
 
-    const onValueRemoveHandler = (id: string) => {
-        const newIds = new Set(ids.filter(existingId => existingId !== id));
-        onChange(JSON.stringify(Array.from(newIds)));
+    const onValueRemoveHandler = () => {
+        onChange(null);
     };
 
     return (
         <div>
             <div className="flex flex-wrap gap-2 mb-2">
-                {groups?.customerGroups.items.map(group => (
-                    <CustomerGroupChip key={group.id} group={group} onRemove={onValueRemoveHandler} />
-                ))}
+                {data?.customerGroup ? (
+                    <CustomerGroupChip
+                        key={data.customerGroup.id}
+                        group={data.customerGroup}
+                        onRemove={onValueRemoveHandler}
+                    />
+                ) : null}
             </div>
 
             <CustomerGroupSelector onSelect={onValueSelectHandler} readOnly={disabled} />
         </div>
     );
 }
-
-function decodeIds(idsString: string): string[] {
-    try {
-        return JSON.parse(idsString);
-    } catch (error) {
-        return [];
-    }
-}

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

@@ -2,15 +2,34 @@
 
 import { format } from 'date-fns';
 import * as React from 'react';
+import { useEffect, useState } from 'react';
 
 import { Button } from '@/vdb/components/ui/button.js';
 import { Calendar } from '@/vdb/components/ui/calendar.js';
 import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
 import { ScrollArea, ScrollBar } from '@/vdb/components/ui/scroll-area.js';
 import { DashboardFormComponentProps } from '@/vdb/framework/form-engine/form-engine-types.js';
+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 { isReadonlyField } from '@/vdb/framework/form-engine/utils.js';
+
+/**
+ * @description
+ * Returns a `Locale` object that can be passed to the react-day-picker
+ * `locale` prop.
+ */
+export function useDayPickerLocale() {
+    const { bcp47Tag } = useDisplayLocale();
+    const [calendarLocale, setCalendarLocale] = useState<Locale | undefined>(undefined);
+    useEffect(() => {
+        import('react-day-picker/locale').then(mod => {
+            setCalendarLocale(bcpTagToDatePickerLocale(bcp47Tag, mod));
+        });
+    }, [bcp47Tag]);
+    return calendarLocale;
+}
 
 /**
  * @description
@@ -21,6 +40,7 @@ import { isReadonlyField } from '@/vdb/framework/form-engine/utils.js';
  */
 export function DateTimeInput({ value, onChange, fieldDef }: Readonly<DashboardFormComponentProps>) {
     const readOnly = isReadonlyField(fieldDef);
+    const locale = useDayPickerLocale();
     const date = value && value instanceof Date ? value.toISOString() : (value ?? '');
     const [isOpen, setIsOpen] = React.useState(false);
 
@@ -65,6 +85,7 @@ export function DateTimeInput({ value, onChange, fieldDef }: Readonly<DashboardF
                 <div className="sm:flex">
                     <Calendar
                         mode="single"
+                        locale={locale}
                         selected={new Date(date)}
                         onSelect={handleDateSelect}
                         initialFocus
@@ -137,3 +158,21 @@ export function DateTimeInput({ value, onChange, fieldDef }: Readonly<DashboardF
         </Popover>
     );
 }
+
+function bcpTagToDatePickerLocale(
+    tag: string,
+    module: typeof import('react-day-picker/locale'),
+): Locale | undefined {
+    switch (tag) {
+        case 'zh-Hans':
+            return module.zhCN;
+        case 'zh-Hant':
+            return module.zhTW;
+        case 'pt-BR':
+            return module.ptBR;
+        default: {
+            const lang = tag.split('-').at(0);
+            return lang ? module[lang as keyof typeof module] : undefined;
+        }
+    }
+}

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

@@ -1,5 +1,5 @@
 import { graphql } from '@/vdb/graphql/graphql.js';
-import { Trans, useLingui } from '@/vdb/lib/trans.js';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { RelationCustomFieldConfig } from '@vendure/common/lib/generated-types';
 import { ControllerRenderProps } from 'react-hook-form';
 import { MultiRelationInput, SingleRelationInput } from './relation-input.js';
@@ -100,10 +100,11 @@ function createBaseEntityConfig(
     labelKey: 'name' | 'code' | 'emailAddress' = 'name',
     searchField: string = 'name',
 ) {
+    const entityNameLower = entityName.toLowerCase();
     return {
         idKey: 'id',
         labelKey,
-        placeholder: i18n.t(`Search ${entityName.toLowerCase()}s...`),
+        placeholder: i18n`Search ${entityNameLower}...`,
         buildSearchFilter: (term: string) => ({
             [searchField]: { contains: term },
         }),
@@ -563,12 +564,12 @@ export function DefaultRelationInput({
     ref,
     disabled,
 }: Readonly<DashboardFormComponentProps>) {
-    const { i18n } = useLingui();
+    const { t } = useLingui();
     if (!fieldDef || !isRelationCustomFieldConfig(fieldDef)) {
         return null;
     }
     const entityName = fieldDef.entity;
-    const ENTITY_CONFIGS = createEntityConfigs(i18n);
+    const ENTITY_CONFIGS = createEntityConfigs(t);
     const config = ENTITY_CONFIGS[entityName as keyof typeof ENTITY_CONFIGS];
 
     if (!config) {

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

@@ -15,3 +15,6 @@ 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';

package/src/lib/components/data-input/product-multi-selector-input.tsx

@@ -13,7 +13,7 @@ import { Input } from '@/vdb/components/ui/input.js';
 import { DashboardFormComponent } from '@/vdb/framework/form-engine/form-engine-types.js';
 import { api } from '@/vdb/graphql/api.js';
 import { graphql } from '@/vdb/graphql/graphql.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { useQuery } from '@tanstack/react-query';
 import { useDebounce } from '@uidotdev/usehooks';
 import { Plus, X } from 'lucide-react';
@@ -93,13 +93,13 @@ function EmptyState() {
 }
 
 function ProductList({
-    items,
-    mode,
-    selectedIds,
-    getItemId,
-    getItemName,
-    toggleSelection,
-}: Readonly<{
+                         items,
+                         mode,
+                         selectedIds,
+                         getItemId,
+                         getItemName,
+                         toggleSelection,
+                     }: Readonly<{
     items: SearchItem[];
     mode: 'product' | 'variant';
     selectedIds: Set<string>;
@@ -163,12 +163,12 @@ function ProductList({
 }
 
 function ProductMultiSelectorDialog({
-    mode,
-    initialSelectionIds = [],
-    onSelectionChange,
-    open,
-    onOpenChange,
-}: Readonly<ProductMultiSelectorProps>) {
+                                        mode,
+                                        initialSelectionIds = [],
+                                        onSelectionChange,
+                                        open,
+                                        onOpenChange,
+                                    }: Readonly<ProductMultiSelectorProps>) {
     const [searchTerm, setSearchTerm] = useState('');
     const [selectedItems, setSelectedItems] = useState<SearchItem[]>([]);
     const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());

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

@@ -10,7 +10,7 @@ import {
 import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
 import { getQueryName } from '@/vdb/framework/document-introspection/get-document-structure.js';
 import { api } from '@/vdb/graphql/api.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { cn } from '@/vdb/lib/utils.js';
 import { useInfiniteQuery } from '@tanstack/react-query';
 import { useDebounce } from '@uidotdev/usehooks';

package/src/lib/components/data-input/select-with-options.tsx

@@ -6,7 +6,7 @@ import {
 } from '@/vdb/framework/form-engine/form-engine-types.js';
 import { isReadonlyField, isStringFieldWithOptions } from '@/vdb/framework/form-engine/utils.js';
 import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import React from 'react';
 import { MultiSelect } from '../shared/multi-select.js';
 

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

@@ -0,0 +1,290 @@
+import { Button } from '@/vdb/components/ui/button.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 { api } from '@/vdb/graphql/api.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
+import { cn } from '@/vdb/lib/utils.js';
+import { useLingui } from '@lingui/react/macro';
+import { useQuery } from '@tanstack/react-query';
+import { useDebounce } from '@uidotdev/usehooks';
+import { Edit, Lock, RefreshCw } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { useFormContext, useWatch } from 'react-hook-form';
+
+const slugForEntityDocument = graphql(`
+    query SlugForEntity($input: SlugForEntityInput!) {
+        slugForEntity(input: $input)
+    }
+`);
+
+function resolveWatchFieldPath(
+    currentFieldName: string,
+    watchFieldName: string,
+    formValues: any,
+    contentLanguage: string,
+): string {
+    const translationsMatch = currentFieldName.match(/^translations\.(\d+)\./);
+
+    if (translationsMatch) {
+        const index = translationsMatch[1];
+
+        if (formValues?.translations?.[index]?.hasOwnProperty(watchFieldName)) {
+            return `translations.${index}.${watchFieldName}`;
+        }
+
+        if (formValues?.hasOwnProperty(watchFieldName)) {
+            return watchFieldName;
+        }
+
+        return `translations.${index}.${watchFieldName}`;
+    }
+
+    if (formValues?.translations && Array.isArray(formValues.translations)) {
+        const translations = formValues.translations;
+        const existingIndex = translations.findIndex(
+            (translation: any) => translation?.languageCode === contentLanguage,
+        );
+        const index = existingIndex === -1 ? (translations.length > 0 ? 0 : -1) : existingIndex;
+
+        if (index >= 0 && translations[index]?.hasOwnProperty(watchFieldName)) {
+            return `translations.${index}.${watchFieldName}`;
+        }
+    }
+
+    return watchFieldName;
+}
+
+export interface SlugInputProps extends DashboardFormComponentProps {
+    /**
+     * @description
+     * The name of the entity (e.g., 'Product', 'Collection')
+     */
+    entityName: string;
+    /**
+     * @description
+     * The name of the field to check for uniqueness (e.g., 'slug', 'code')
+     */
+    fieldName: string;
+    /**
+     * @description
+     * The name of the field to watch for changes (e.g., 'name', 'title', 'enabled').
+     * The component automatically resolves whether this field exists in translations
+     * or on the base entity. For translatable fields like 'name', it will watch
+     * 'translations.X.name'. For non-translatable fields like 'enabled', it will
+     * watch 'enabled' directly.
+     */
+    watchFieldName: string;
+    /**
+     * @description
+     * Optional entity ID for updates (excludes from uniqueness check)
+     */
+    entityId?: string | number;
+    /**
+     * @description
+     * Whether the input should start in readonly mode. Default: true
+     */
+    defaultReadonly?: boolean;
+
+    /**
+     * @description Class name for the <Input> component
+     */
+    className?: string;
+}
+
+/**
+ * @description
+ * A component for generating and displaying slugs based on a watched field.
+ * The component watches a source field for changes, debounces the input,
+ * and generates a unique slug via the Admin API. The slug is only auto-generated
+ * when it's empty. For existing slugs, a regenerate button allows manual regeneration.
+ * The input is readonly by default but can be made editable with a toggle button.
+ *
+ * @example
+ * ```tsx
+ * // In a TranslatableFormFieldWrapper context with translatable field
+ * <SlugInput
+ *     {...field}
+ *     entityName="Product"
+ *     fieldName="slug"
+ *     watchFieldName="name" // Automatically resolves to "translations.X.name"
+ *     entityId={productId}
+ * />
+ *
+ * // In a TranslatableFormFieldWrapper context with non-translatable field
+ * <SlugInput
+ *     {...field}
+ *     entityName="Product"
+ *     fieldName="slug"
+ *     watchFieldName="enabled" // Uses "enabled" directly (base entity field)
+ *     entityId={productId}
+ * />
+ *
+ * // For non-translatable entities
+ * <SlugInput
+ *     {...field}
+ *     entityName="Channel"
+ *     fieldName="code"
+ *     watchFieldName="name" // Uses "name" directly
+ *     entityId={channelId}
+ * />
+ * ```
+ *
+ * @docsCategory form-components
+ * @docsPage SlugInput
+ */
+export function SlugInput({
+    value,
+    onChange,
+    fieldDef,
+    entityName,
+    fieldName,
+    watchFieldName,
+    entityId,
+    defaultReadonly = true,
+    className,
+    name,
+    ...props
+}: SlugInputProps) {
+    const { t } = useLingui();
+    const form = useFormContext();
+    const { contentLanguage } = useUserSettings().settings;
+    const isFormReadonly = isReadonlyField(fieldDef);
+    const [isManuallyReadonly, setIsManuallyReadonly] = useState(defaultReadonly);
+    const isReadonly = isFormReadonly || isManuallyReadonly;
+
+    const actualWatchFieldName = resolveWatchFieldPath(
+        name || '',
+        watchFieldName,
+        form?.getValues(),
+        contentLanguage,
+    );
+
+    const watchedValue = useWatch({
+        control: form?.control,
+        name: actualWatchFieldName,
+    });
+
+    const watchFieldState = form.getFieldState(actualWatchFieldName);
+    const debouncedWatchedValue = useDebounce(watchedValue, 500);
+
+    const shouldAutoGenerate = isReadonly && !value && watchFieldState.isDirty;
+
+    const {
+        data: generatedSlug,
+        isLoading,
+        refetch,
+    } = useQuery({
+        queryKey: ['slugForEntity', entityName, fieldName, debouncedWatchedValue, entityId],
+        queryFn: async () => {
+            if (!debouncedWatchedValue) {
+                return '';
+            }
+
+            const result = await api.query(slugForEntityDocument, {
+                input: {
+                    entityName,
+                    fieldName,
+                    inputValue: debouncedWatchedValue,
+                    entityId: entityId?.toString(),
+                },
+            });
+
+            return result.slugForEntity;
+        },
+        enabled: !!debouncedWatchedValue && shouldAutoGenerate,
+    });
+
+    useEffect(() => {
+        if (isReadonly && generatedSlug && generatedSlug !== value) {
+            onChange?.(generatedSlug);
+        }
+    }, [generatedSlug, isReadonly, value, onChange]);
+
+    const toggleReadonly = () => {
+        if (!isFormReadonly) {
+            setIsManuallyReadonly(!isManuallyReadonly);
+        }
+    };
+
+    const handleRegenerate = async () => {
+        if (watchedValue) {
+            const result = await refetch();
+            if (result.data) {
+                onChange?.(result.data);
+            }
+        }
+    };
+
+    const handleChange = (newValue: string) => {
+        onChange?.(newValue);
+    };
+
+    const displayValue = isReadonly && generatedSlug ? generatedSlug : value || '';
+    const showLoading = isLoading && isReadonly;
+
+    return (
+        <div className="relative flex items-center gap-2">
+            <div className="flex-1 relative">
+                <Input
+                    value={displayValue}
+                    onChange={e => handleChange(e.target.value)}
+                    disabled={isReadonly}
+                    placeholder={
+                        isReadonly
+                            ? value
+                                ? t`Slug is set`
+                                : t`Slug will be generated automatically...`
+                            : t`Enter slug manually`
+                    }
+                    className={cn(
+                        'pr-8',
+                        isReadonly && 'bg-muted text-muted-foreground',
+                        showLoading && 'text-muted-foreground',
+                        className,
+                    )}
+                    {...props}
+                />
+                {showLoading && (
+                    <div className="absolute right-3 top-1/2 -translate-y-1/2">
+                        <div className="h-4 w-4 animate-spin rounded-full border-2 border-muted-foreground border-t-transparent" />
+                    </div>
+                )}
+            </div>
+
+            {!isFormReadonly && (
+                <>
+                    {isManuallyReadonly && value && (
+                        <Button
+                            type="button"
+                            variant="outline"
+                            size="sm"
+                            onClick={handleRegenerate}
+                            className="shrink-0"
+                            title={t`Regenerate slug from source field`}
+                            aria-label={t`Regenerate slug from source field`}
+                            disabled={!watchedValue || isLoading}
+                        >
+                            <RefreshCw className="h-4 w-4" />
+                        </Button>
+                    )}
+
+                    <Button
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        onClick={toggleReadonly}
+                        className="shrink-0"
+                        title={isManuallyReadonly ? t`Edit slug manually` : t`Generate slug automatically`}
+                        aria-label={
+                            isManuallyReadonly ? t`Edit slug manually` : t`Generate slug automatically`
+                        }
+                    >
+                        {isManuallyReadonly ? <Edit className="h-4 w-4" /> : <Lock className="h-4 w-4" />}
+                    </Button>
+                </>
+            )}
+        </div>
+    );
+}