@vendure/dashboard 3.2.0 → 3.2.1

package/src/lib/framework/form-engine/use-generated-form.tsx

@@ -1,116 +1,116 @@
-import { getOperationVariablesFields } from '@/framework/document-introspection/get-document-structure.js';
-import {
-    createFormSchemaFromFields,
-    getDefaultValuesFromFields,
-} from '@/framework/form-engine/form-schema-tools.js';
-import { useChannel } from '@/hooks/use-channel.js';
-import { useServerConfig } from '@/hooks/use-server-config.js';
-import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { VariablesOf } from 'gql.tada';
-import { FormEvent } from 'react';
-import { useForm } from 'react-hook-form';
-
-export interface GeneratedFormOptions<
-    T extends TypedDocumentNode<any, any>,
-    VarName extends keyof VariablesOf<T> = 'input',
-    E extends Record<string, any> = Record<string, any>,
-> {
-    document?: T;
-    entity: E | null | undefined;
-    setValues: (entity: NonNullable<E>) => VariablesOf<T>[VarName];
-    onSubmit?: (values: VariablesOf<T>[VarName]) => void;
-}
-
-/**
- * @description
- * This hook is used to create a form from a document and an entity.
- * It will create a form with the fields defined in the document's input type.
- * It will also create a submit handler that will submit the form to the server.
- *
- */
-export function useGeneratedForm<
-    T extends TypedDocumentNode<any, any>,
-    VarName extends keyof VariablesOf<T> = 'input',
-    E extends Record<string, any> = Record<string, any>,
->(options: GeneratedFormOptions<T, VarName, E>) {
-    const { document, entity, setValues, onSubmit } = options;
-    const { activeChannel } = useChannel();
-    const availableLanguages = useServerConfig()?.availableLanguages || [];
-    const updateFields = document ? getOperationVariablesFields(document) : [];
-    const schema = createFormSchemaFromFields(updateFields);
-    const defaultValues = getDefaultValuesFromFields(updateFields, activeChannel?.defaultLanguageCode);
-    const processedEntity = ensureTranslationsForAllLanguages(entity, availableLanguages);
-
-    const form = useForm({
-        resolver: async (values, context, options) => {
-            const result = await zodResolver(schema)(values, context, options);
-            if (Object.keys(result.errors).length > 0) {
-                console.log('Zod form validation errors:', result.errors);
-            }
-            return result;
-        },
-        defaultValues,
-        values: processedEntity ? setValues(processedEntity) : defaultValues,
-    });
-    let submitHandler = (event: FormEvent) => {
-        event.preventDefault();
-    };
-    if (onSubmit) {
-        submitHandler = (event: FormEvent) => {
-            form.handleSubmit(onSubmit)(event);
-        };
-    }
-
-    return { form, submitHandler };
-}
-
-/**
- * Ensures that an entity with translations has entries for all available languages.
- * If a language is missing, it creates an empty translation based on the structure of existing translations.
- */
-function ensureTranslationsForAllLanguages<E extends Record<string, any>>(
-    entity: E | null | undefined,
-    availableLanguages: string[] = [],
-): E | null | undefined {
-    if (
-        !entity ||
-        !('translations' in entity) ||
-        !Array.isArray((entity as any).translations) ||
-        !availableLanguages.length
-    ) {
-        return entity;
-    }
-
-    // Create a deep copy of the entity to avoid mutation
-    const processedEntity = { ...entity } as any;
-    const translations = [...(processedEntity.translations || [])];
-
-    // Get existing language codes
-    const existingLanguageCodes = new Set(translations.map((t: any) => t.languageCode));
-
-    // Add missing language translations
-    for (const langCode of availableLanguages) {
-        if (!existingLanguageCodes.has(langCode)) {
-            // Find a translation to use as template for field structure
-            const template = translations[0] || {};
-            const emptyTranslation: Record<string, any> = {
-                languageCode: langCode,
-            };
-
-            // Add empty fields based on template (excluding languageCode)
-            Object.keys(template).forEach(key => {
-                if (key !== 'languageCode') {
-                    emptyTranslation[key] = '';
-                }
-            });
-
-            translations.push(emptyTranslation);
-        }
-    }
-
-    // Update the processed entity with complete translations
-    processedEntity.translations = translations;
-
-    return processedEntity as E;
-}
+import { getOperationVariablesFields } from '@/framework/document-introspection/get-document-structure.js';
+import {
+    createFormSchemaFromFields,
+    getDefaultValuesFromFields,
+} from '@/framework/form-engine/form-schema-tools.js';
+import { useChannel } from '@/hooks/use-channel.js';
+import { useServerConfig } from '@/hooks/use-server-config.js';
+import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { VariablesOf } from 'gql.tada';
+import { FormEvent } from 'react';
+import { useForm } from 'react-hook-form';
+
+export interface GeneratedFormOptions<
+    T extends TypedDocumentNode<any, any>,
+    VarName extends keyof VariablesOf<T> = 'input',
+    E extends Record<string, any> = Record<string, any>,
+> {
+    document?: T;
+    entity: E | null | undefined;
+    setValues: (entity: NonNullable<E>) => VariablesOf<T>[VarName];
+    onSubmit?: (values: VariablesOf<T>[VarName]) => void;
+}
+
+/**
+ * @description
+ * This hook is used to create a form from a document and an entity.
+ * It will create a form with the fields defined in the document's input type.
+ * It will also create a submit handler that will submit the form to the server.
+ *
+ */
+export function useGeneratedForm<
+    T extends TypedDocumentNode<any, any>,
+    VarName extends keyof VariablesOf<T> = 'input',
+    E extends Record<string, any> = Record<string, any>,
+>(options: GeneratedFormOptions<T, VarName, E>) {
+    const { document, entity, setValues, onSubmit } = options;
+    const { activeChannel } = useChannel();
+    const availableLanguages = useServerConfig()?.availableLanguages || [];
+    const updateFields = document ? getOperationVariablesFields(document) : [];
+    const schema = createFormSchemaFromFields(updateFields);
+    const defaultValues = getDefaultValuesFromFields(updateFields, activeChannel?.defaultLanguageCode);
+    const processedEntity = ensureTranslationsForAllLanguages(entity, availableLanguages);
+
+    const form = useForm({
+        resolver: async (values, context, options) => {
+            const result = await zodResolver(schema)(values, context, options);
+            if (Object.keys(result.errors).length > 0) {
+                console.log('Zod form validation errors:', result.errors);
+            }
+            return result;
+        },
+        defaultValues,
+        values: processedEntity ? setValues(processedEntity) : defaultValues,
+    });
+    let submitHandler = (event: FormEvent) => {
+        event.preventDefault();
+    };
+    if (onSubmit) {
+        submitHandler = (event: FormEvent) => {
+            form.handleSubmit(onSubmit)(event);
+        };
+    }
+
+    return { form, submitHandler };
+}
+
+/**
+ * Ensures that an entity with translations has entries for all available languages.
+ * If a language is missing, it creates an empty translation based on the structure of existing translations.
+ */
+function ensureTranslationsForAllLanguages<E extends Record<string, any>>(
+    entity: E | null | undefined,
+    availableLanguages: string[] = [],
+): E | null | undefined {
+    if (
+        !entity ||
+        !('translations' in entity) ||
+        !Array.isArray((entity as any).translations) ||
+        !availableLanguages.length
+    ) {
+        return entity;
+    }
+
+    // Create a deep copy of the entity to avoid mutation
+    const processedEntity = { ...entity } as any;
+    const translations = [...(processedEntity.translations || [])];
+
+    // Get existing language codes
+    const existingLanguageCodes = new Set(translations.map((t: any) => t.languageCode));
+
+    // Add missing language translations
+    for (const langCode of availableLanguages) {
+        if (!existingLanguageCodes.has(langCode)) {
+            // Find a translation to use as template for field structure
+            const template = translations[0] || {};
+            const emptyTranslation: Record<string, any> = {
+                languageCode: langCode,
+            };
+
+            // Add empty fields based on template (excluding languageCode)
+            Object.keys(template).forEach(key => {
+                if (key !== 'languageCode') {
+                    emptyTranslation[key] = '';
+                }
+            });
+
+            translations.push(emptyTranslation);
+        }
+    }
+
+    // Update the processed entity with complete translations
+    processedEntity.translations = translations;
+
+    return processedEntity as E;
+}

package/src/lib/framework/layout-engine/layout-extensions.ts

@@ -1,30 +1,30 @@
-import {
-    DashboardActionBarItem,
-    DashboardPageBlockDefinition,
-} from '../extension-api/extension-api-types.js';
-import { globalRegistry } from '../registry/global-registry.js';
-
-globalRegistry.register('dashboardActionBarItemRegistry', new Map<string, DashboardActionBarItem[]>());
-globalRegistry.register('dashboardPageBlockRegistry', new Map<string, DashboardPageBlockDefinition[]>());
-
-export function registerDashboardActionBarItem(item: DashboardActionBarItem) {
-    globalRegistry.set('dashboardActionBarItemRegistry', map => {
-        map.set(item.locationId, [...(map.get(item.locationId) ?? []), item]);
-        return map;
-    });
-}
-
-export function getDashboardActionBarItems(locationId: string) {
-    return globalRegistry.get('dashboardActionBarItemRegistry').get(locationId) ?? [];
-}
-
-export function registerDashboardPageBlock(block: DashboardPageBlockDefinition) {
-    globalRegistry.set('dashboardPageBlockRegistry', map => {
-        map.set(block.location.pageId, [...(map.get(block.location.pageId) ?? []), block]);
-        return map;
-    });
-}
-
-export function getDashboardPageBlocks(pageId: string) {
-    return globalRegistry.get('dashboardPageBlockRegistry').get(pageId) ?? [];
-}
+import {
+    DashboardActionBarItem,
+    DashboardPageBlockDefinition,
+} from '../extension-api/extension-api-types.js';
+import { globalRegistry } from '../registry/global-registry.js';
+
+globalRegistry.register('dashboardActionBarItemRegistry', new Map<string, DashboardActionBarItem[]>());
+globalRegistry.register('dashboardPageBlockRegistry', new Map<string, DashboardPageBlockDefinition[]>());
+
+export function registerDashboardActionBarItem(item: DashboardActionBarItem) {
+    globalRegistry.set('dashboardActionBarItemRegistry', map => {
+        map.set(item.locationId, [...(map.get(item.locationId) ?? []), item]);
+        return map;
+    });
+}
+
+export function getDashboardActionBarItems(locationId: string) {
+    return globalRegistry.get('dashboardActionBarItemRegistry').get(locationId) ?? [];
+}
+
+export function registerDashboardPageBlock(block: DashboardPageBlockDefinition) {
+    globalRegistry.set('dashboardPageBlockRegistry', map => {
+        map.set(block.location.pageId, [...(map.get(block.location.pageId) ?? []), block]);
+        return map;
+    });
+}
+
+export function getDashboardPageBlocks(pageId: string) {
+    return globalRegistry.get('dashboardPageBlockRegistry').get(pageId) ?? [];
+}

package/src/lib/framework/layout-engine/location-wrapper.tsx

@@ -1,96 +1,96 @@
-import { CopyableText } from '@/components/shared/copyable-text.js';
-import { Button } from '@/components/ui/button.js';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover.js';
-import { usePage } from '@/hooks/use-page.js';
-import { useUserSettings } from '@/hooks/use-user-settings.js';
-import { cn } from '@/lib/utils.js';
-import { Trans } from '@/lib/trans.js';
-import { CodeXmlIcon, InfoIcon } from 'lucide-react';
-import { createContext, useContext, useState } from 'react';
-
-const LocationWrapperContext = createContext<{
-    parentId: string | null;
-    hoveredId: string | null;
-    setHoveredId: ((id: string | null) => void) | null;
-}>({
-    parentId: null,
-    hoveredId: null,
-    setHoveredId: null,
-});
-
-export function LocationWrapper({ children, blockId }: { children: React.ReactNode; blockId?: string }) {
-    const page = usePage();
-    const { settings } = useUserSettings();
-    const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-    const isPageWrapper = !blockId;
-
-    const [hoveredIdTopLevel, setHoveredIdTopLevel] = useState<string | null>(null);
-    const { hoveredId, setHoveredId, parentId } = useContext(LocationWrapperContext);
-    const id = `${page.pageId}-${blockId ?? 'page'}`;
-    const isHovered = hoveredId === id || hoveredIdTopLevel === id;
-
-    const setHoverId = (id: string | null) => {
-        if (setHoveredId) {
-            setHoveredId(id);
-        } else {
-            setHoveredIdTopLevel(id);
-        }
-    };
-
-    if (settings.devMode) {
-        const pageId = page.pageId;
-        return (
-            <LocationWrapperContext.Provider
-                value={{ hoveredId: hoveredIdTopLevel, setHoveredId: setHoveredIdTopLevel, parentId: id }}
-            >
-                <div
-                    className={cn(
-                        `ring-2 rounded-xl transition-all delay-50 relative`,
-                        isHovered || isPopoverOpen ? 'ring-dev-mode' : 'ring-transparent',
-                        isPageWrapper ? 'ring-inset' : '',
-                    )}
-                    onMouseEnter={() => setHoverId(id)}
-                    onMouseLeave={() => setHoverId(parentId)}
-                >
-                    <div
-                        className={`absolute top-0.5 right-0.5 transition-all delay-50 z-10 ${isHovered || isPopoverOpen ? 'visible' : 'invisible'}`}
-                    >
-                        <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
-                            <PopoverTrigger asChild>
-                                <Button variant="ghost" size="icon" className="rounded-lg">
-                                    <CodeXmlIcon className="text-dev-mode w-5 h-5" />
-                                </Button>
-                            </PopoverTrigger>
-                            <PopoverContent className="w-60">
-                                <div className="space-y-2">
-                                    <div className="flex items-center gap-2">
-                                        <InfoIcon className="h-4 w-4 text-dev-mode" />
-                                        <span className="font-medium">
-                                            <Trans>Location Details</Trans>
-                                        </span>
-                                    </div>
-                                    <div className="space-y-1.5">
-                                        {pageId && (
-                                            <div>
-                                                <div className="text-xs text-muted-foreground">pageId</div>
-                                                <CopyableText text={pageId} />
-                                            </div>
-                                        )}
-                                        {blockId && (
-                                            <div>
-                                                <div className="text-xs text-muted-foreground">blockId</div>
-                                                <CopyableText text={blockId} />
-                                            </div>
-                                        )}
-                                    </div>
-                                </div>
-                            </PopoverContent>
-                        </Popover>
-                    </div>
-                    {children}
-                </div>
-            </LocationWrapperContext.Provider>
-        );
-    }
-    return children;
-}
+import { CopyableText } from '@/components/shared/copyable-text.js';
+import { Button } from '@/components/ui/button.js';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover.js';
+import { usePage } from '@/hooks/use-page.js';
+import { useUserSettings } from '@/hooks/use-user-settings.js';
+import { cn } from '@/lib/utils.js';
+import { Trans } from '@/lib/trans.js';
+import { CodeXmlIcon, InfoIcon } from 'lucide-react';
+import { createContext, useContext, useState } from 'react';
+
+const LocationWrapperContext = createContext<{
+    parentId: string | null;
+    hoveredId: string | null;
+    setHoveredId: ((id: string | null) => void) | null;
+}>({
+    parentId: null,
+    hoveredId: null,
+    setHoveredId: null,
+});
+
+export function LocationWrapper({ children, blockId }: { children: React.ReactNode; blockId?: string }) {
+    const page = usePage();
+    const { settings } = useUserSettings();
+    const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+    const isPageWrapper = !blockId;
+
+    const [hoveredIdTopLevel, setHoveredIdTopLevel] = useState<string | null>(null);
+    const { hoveredId, setHoveredId, parentId } = useContext(LocationWrapperContext);
+    const id = `${page.pageId}-${blockId ?? 'page'}`;
+    const isHovered = hoveredId === id || hoveredIdTopLevel === id;
+
+    const setHoverId = (id: string | null) => {
+        if (setHoveredId) {
+            setHoveredId(id);
+        } else {
+            setHoveredIdTopLevel(id);
+        }
+    };
+
+    if (settings.devMode) {
+        const pageId = page.pageId;
+        return (
+            <LocationWrapperContext.Provider
+                value={{ hoveredId: hoveredIdTopLevel, setHoveredId: setHoveredIdTopLevel, parentId: id }}
+            >
+                <div
+                    className={cn(
+                        `ring-2 rounded-xl transition-all delay-50 relative`,
+                        isHovered || isPopoverOpen ? 'ring-dev-mode' : 'ring-transparent',
+                        isPageWrapper ? 'ring-inset' : '',
+                    )}
+                    onMouseEnter={() => setHoverId(id)}
+                    onMouseLeave={() => setHoverId(parentId)}
+                >
+                    <div
+                        className={`absolute top-0.5 right-0.5 transition-all delay-50 z-10 ${isHovered || isPopoverOpen ? 'visible' : 'invisible'}`}
+                    >
+                        <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
+                            <PopoverTrigger asChild>
+                                <Button variant="ghost" size="icon" className="rounded-lg">
+                                    <CodeXmlIcon className="text-dev-mode w-5 h-5" />
+                                </Button>
+                            </PopoverTrigger>
+                            <PopoverContent className="w-60">
+                                <div className="space-y-2">
+                                    <div className="flex items-center gap-2">
+                                        <InfoIcon className="h-4 w-4 text-dev-mode" />
+                                        <span className="font-medium">
+                                            <Trans>Location Details</Trans>
+                                        </span>
+                                    </div>
+                                    <div className="space-y-1.5">
+                                        {pageId && (
+                                            <div>
+                                                <div className="text-xs text-muted-foreground">pageId</div>
+                                                <CopyableText text={pageId} />
+                                            </div>
+                                        )}
+                                        {blockId && (
+                                            <div>
+                                                <div className="text-xs text-muted-foreground">blockId</div>
+                                                <CopyableText text={blockId} />
+                                            </div>
+                                        )}
+                                    </div>
+                                </div>
+                            </PopoverContent>
+                        </Popover>
+                    </div>
+                    {children}
+                </div>
+            </LocationWrapperContext.Provider>
+        );
+    }
+    return children;
+}