@vendure/dashboard 3.2.0 → 3.2.1

package/src/lib/framework/document-introspection/hooks.ts

@@ -1,10 +1,10 @@
-import { FieldInfo, getListQueryFields } from '@/framework/document-introspection/get-document-structure.js';
-import { DocumentNode } from 'graphql';
-import { useMemo } from 'react';
-
-/**
- * Returns a stable array of FieldInfo objects representing the fields of the list query.
- */
-export function useListQueryFields(documentNode: DocumentNode): FieldInfo[] {
-    return useMemo(() => getListQueryFields(documentNode), [documentNode]);
-}
+import { FieldInfo, getListQueryFields } from '@/framework/document-introspection/get-document-structure.js';
+import { DocumentNode } from 'graphql';
+import { useMemo } from 'react';
+
+/**
+ * Returns a stable array of FieldInfo objects representing the fields of the list query.
+ */
+export function useListQueryFields(documentNode: DocumentNode): FieldInfo[] {
+    return useMemo(() => getListQueryFields(documentNode), [documentNode]);
+}

package/src/lib/framework/extension-api/define-dashboard-extension.ts

@@ -1,66 +1,66 @@
-import { registerDashboardWidget } from '@/framework/dashboard-widget/widget-extensions.js';
-import { DashboardExtension } from '@/framework/extension-api/extension-api-types.js';
-import { addNavMenuItem, NavMenuItem } from '@/framework/nav-menu/nav-menu-extensions.js';
-import { registerRoute } from '@/framework/page/page-api.js';
-
-import {
-    registerDashboardActionBarItem,
-    registerDashboardPageBlock,
-} from '../layout-engine/layout-extensions.js';
-import { globalRegistry } from '../registry/global-registry.js';
-
-globalRegistry.register('extensionSourceChangeCallbacks', new Set<() => void>());
-globalRegistry.register('registerDashboardExtensionCallbacks', new Set<() => void>());
-
-export function onExtensionSourceChange(callback: () => void) {
-    globalRegistry.get('extensionSourceChangeCallbacks').add(callback);
-}
-
-export function executeDashboardExtensionCallbacks() {
-    for (const callback of globalRegistry.get('registerDashboardExtensionCallbacks') ?? []) {
-        callback();
-    }
-}
-
-export function defineDashboardExtension(extension: DashboardExtension) {
-    globalRegistry.get('registerDashboardExtensionCallbacks').add(() => {
-        if (extension.routes) {
-            for (const route of extension.routes) {
-                if (route.navMenuItem) {
-                    // Add the nav menu item
-                    const item: NavMenuItem = {
-                        url: route.navMenuItem.url ?? route.path,
-                        id: route.navMenuItem.id ?? route.path,
-                        title: route.navMenuItem.title ?? route.path,
-                    };
-                    addNavMenuItem(item, route.navMenuItem.sectionId);
-                }
-                if (route.path) {
-                    // Configure a list page
-                    registerRoute(route);
-                }
-            }
-        }
-        if (extension.actionBarItems) {
-            for (const item of extension.actionBarItems) {
-                registerDashboardActionBarItem(item);
-            }
-        }
-        if (extension.pageBlocks) {
-            for (const block of extension.pageBlocks) {
-                registerDashboardPageBlock(block);
-            }
-        }
-        if (extension.widgets) {
-            for (const widget of extension.widgets) {
-                registerDashboardWidget(widget);
-            }
-        }
-        const callbacks = globalRegistry.get('extensionSourceChangeCallbacks');
-        if (callbacks.size) {
-            for (const callback of callbacks) {
-                callback();
-            }
-        }
-    });
-}
+import { registerDashboardWidget } from '@/framework/dashboard-widget/widget-extensions.js';
+import { DashboardExtension } from '@/framework/extension-api/extension-api-types.js';
+import { addNavMenuItem, NavMenuItem } from '@/framework/nav-menu/nav-menu-extensions.js';
+import { registerRoute } from '@/framework/page/page-api.js';
+
+import {
+    registerDashboardActionBarItem,
+    registerDashboardPageBlock,
+} from '../layout-engine/layout-extensions.js';
+import { globalRegistry } from '../registry/global-registry.js';
+
+globalRegistry.register('extensionSourceChangeCallbacks', new Set<() => void>());
+globalRegistry.register('registerDashboardExtensionCallbacks', new Set<() => void>());
+
+export function onExtensionSourceChange(callback: () => void) {
+    globalRegistry.get('extensionSourceChangeCallbacks').add(callback);
+}
+
+export function executeDashboardExtensionCallbacks() {
+    for (const callback of globalRegistry.get('registerDashboardExtensionCallbacks') ?? []) {
+        callback();
+    }
+}
+
+export function defineDashboardExtension(extension: DashboardExtension) {
+    globalRegistry.get('registerDashboardExtensionCallbacks').add(() => {
+        if (extension.routes) {
+            for (const route of extension.routes) {
+                if (route.navMenuItem) {
+                    // Add the nav menu item
+                    const item: NavMenuItem = {
+                        url: route.navMenuItem.url ?? route.path,
+                        id: route.navMenuItem.id ?? route.path,
+                        title: route.navMenuItem.title ?? route.path,
+                    };
+                    addNavMenuItem(item, route.navMenuItem.sectionId);
+                }
+                if (route.path) {
+                    // Configure a list page
+                    registerRoute(route);
+                }
+            }
+        }
+        if (extension.actionBarItems) {
+            for (const item of extension.actionBarItems) {
+                registerDashboardActionBarItem(item);
+            }
+        }
+        if (extension.pageBlocks) {
+            for (const block of extension.pageBlocks) {
+                registerDashboardPageBlock(block);
+            }
+        }
+        if (extension.widgets) {
+            for (const widget of extension.widgets) {
+                registerDashboardWidget(widget);
+            }
+        }
+        const callbacks = globalRegistry.get('extensionSourceChangeCallbacks');
+        if (callbacks.size) {
+            for (const callback of callbacks) {
+                callback();
+            }
+        }
+    });
+}

package/src/lib/framework/extension-api/extension-api-types.ts

@@ -1,58 +1,58 @@
-import { NavMenuItem } from '@/framework/nav-menu/nav-menu-extensions.js';
-import { AnyRoute, RouteOptions } from '@tanstack/react-router';
-import React from 'react';
-
-import { DashboardWidgetDefinition } from '../dashboard-widget/types.js';
-import { PageContext } from '../layout-engine/page-layout.js';
-
-export interface DashboardRouteDefinition {
-    component: (route: AnyRoute) => React.ReactNode;
-    path: string;
-    navMenuItem?: Partial<NavMenuItem> & { sectionId: string };
-    loader?: RouteOptions['loader'];
-}
-
-export interface ActionBarButtonState {
-    disabled: boolean;
-    visible: boolean;
-}
-
-export interface DashboardActionBarItem {
-    locationId: string;
-    component: React.FunctionComponent<{ context: PageContext }>;
-    requiresPermission?: string | string[];
-}
-
-export interface DashboardActionBarDropdownMenuItem {
-    locationId: string;
-    component: React.FunctionComponent<{ context: PageContext }>;
-    requiresPermission?: string | string[];
-}
-
-export type PageBlockPosition = { blockId: string; order: 'before' | 'after' | 'replace' };
-
-export type PageBlockLocation = {
-    pageId: string;
-    position: PageBlockPosition;
-    column: 'main' | 'side';
-};
-
-export interface DashboardPageBlockDefinition {
-    id: string;
-    title?: React.ReactNode;
-    location: PageBlockLocation;
-    component: React.FunctionComponent<{ context: PageContext }>;
-    requiresPermission?: string | string[];
-}
-
-/**
- * @description
- * The main entry point for a dashboard extension.
- * This is used to define the routes, widgets, etc. that will be displayed in the dashboard.
- */
-export interface DashboardExtension {
-    routes: DashboardRouteDefinition[];
-    widgets: DashboardWidgetDefinition[];
-    actionBarItems: DashboardActionBarItem[];
-    pageBlocks: DashboardPageBlockDefinition[];
-}
+import { NavMenuItem } from '@/framework/nav-menu/nav-menu-extensions.js';
+import { AnyRoute, RouteOptions } from '@tanstack/react-router';
+import React from 'react';
+
+import { DashboardWidgetDefinition } from '../dashboard-widget/types.js';
+import { PageContext } from '../layout-engine/page-layout.js';
+
+export interface DashboardRouteDefinition {
+    component: (route: AnyRoute) => React.ReactNode;
+    path: string;
+    navMenuItem?: Partial<NavMenuItem> & { sectionId: string };
+    loader?: RouteOptions['loader'];
+}
+
+export interface ActionBarButtonState {
+    disabled: boolean;
+    visible: boolean;
+}
+
+export interface DashboardActionBarItem {
+    locationId: string;
+    component: React.FunctionComponent<{ context: PageContext }>;
+    requiresPermission?: string | string[];
+}
+
+export interface DashboardActionBarDropdownMenuItem {
+    locationId: string;
+    component: React.FunctionComponent<{ context: PageContext }>;
+    requiresPermission?: string | string[];
+}
+
+export type PageBlockPosition = { blockId: string; order: 'before' | 'after' | 'replace' };
+
+export type PageBlockLocation = {
+    pageId: string;
+    position: PageBlockPosition;
+    column: 'main' | 'side';
+};
+
+export interface DashboardPageBlockDefinition {
+    id: string;
+    title?: React.ReactNode;
+    location: PageBlockLocation;
+    component: React.FunctionComponent<{ context: PageContext }>;
+    requiresPermission?: string | string[];
+}
+
+/**
+ * @description
+ * The main entry point for a dashboard extension.
+ * This is used to define the routes, widgets, etc. that will be displayed in the dashboard.
+ */
+export interface DashboardExtension {
+    routes: DashboardRouteDefinition[];
+    widgets: DashboardWidgetDefinition[];
+    actionBarItems: DashboardActionBarItem[];
+    pageBlocks: DashboardPageBlockDefinition[];
+}

package/src/lib/framework/extension-api/use-dashboard-extensions.ts

@@ -1,26 +1,26 @@
-import { onExtensionSourceChange } from '@/framework/extension-api/define-dashboard-extension.js';
-import { useEffect, useState } from 'react';
-import { runDashboardExtensions } from 'virtual:dashboard-extensions';
-
-/**
- * @description
- * This hook is used to load dashboard extensions via the `virtual:dashboard-extensions` module,
- * which is provided by the `vite-plugin-dashboard-metadata` plugin.
- *
- * It should be used in any component whose rendering depends on the content of the dashboard extensions.
- */
-export function useDashboardExtensions() {
-    const [extensionsLoaded, setExtensionsLoaded] = useState(false);
-    const [reloadCount, setReloadCount] = useState(0);
-
-    useEffect(() => {
-        void runDashboardExtensions().then(() => setExtensionsLoaded(true));
-        onExtensionSourceChange(() => {
-            // Setting this state var is only really done
-            // in order to force a re-render of components using this hook.
-            // This allows components to react to HMR events during development.
-            setReloadCount(old => old + 1);
-        });
-    }, []);
-    return { extensionsLoaded, reloadCount };
-}
+import { onExtensionSourceChange } from '@/framework/extension-api/define-dashboard-extension.js';
+import { useEffect, useState } from 'react';
+import { runDashboardExtensions } from 'virtual:dashboard-extensions';
+
+/**
+ * @description
+ * This hook is used to load dashboard extensions via the `virtual:dashboard-extensions` module,
+ * which is provided by the `vite-plugin-dashboard-metadata` plugin.
+ *
+ * It should be used in any component whose rendering depends on the content of the dashboard extensions.
+ */
+export function useDashboardExtensions() {
+    const [extensionsLoaded, setExtensionsLoaded] = useState(false);
+    const [reloadCount, setReloadCount] = useState(0);
+
+    useEffect(() => {
+        void runDashboardExtensions().then(() => setExtensionsLoaded(true));
+        onExtensionSourceChange(() => {
+            // Setting this state var is only really done
+            // in order to force a re-render of components using this hook.
+            // This allows components to react to HMR events during development.
+            setReloadCount(old => old + 1);
+        });
+    }, []);
+    return { extensionsLoaded, reloadCount };
+}

package/src/lib/framework/form-engine/form-schema-tools.ts

@@ -1,98 +1,98 @@
-import {
-    FieldInfo,
-    isEnumType,
-    isScalarType,
-} from '@/framework/document-introspection/get-document-structure.js';
-import { z, ZodRawShape, ZodType, ZodTypeAny } from 'zod';
-
-export function createFormSchemaFromFields(fields: FieldInfo[]) {
-    const schemaConfig: ZodRawShape = {};
-    for (const field of fields) {
-        const isScalar = isScalarType(field.type);
-        const isEnum = isEnumType(field.type);
-        if (isScalar || isEnum) {
-            schemaConfig[field.name] = getZodTypeFromField(field);
-        } else if (field.typeInfo) {
-            let nestedType: ZodType = createFormSchemaFromFields(field.typeInfo);
-            if (field.nullable) {
-                nestedType = nestedType.optional().nullable();
-            }
-            if (field.list) {
-                nestedType = z.array(nestedType);
-            }
-            schemaConfig[field.name] = nestedType;
-        }
-    }
-    return z.object(schemaConfig);
-}
-
-export function getDefaultValuesFromFields(fields: FieldInfo[], defaultLanguageCode?: string) {
-    const defaultValues: Record<string, any> = {};
-    for (const field of fields) {
-        if (field.typeInfo) {
-            const nestedObjectDefaults = getDefaultValuesFromFields(field.typeInfo, defaultLanguageCode);
-            if (field.list) {
-                defaultValues[field.name] = [nestedObjectDefaults];
-            } else {
-                defaultValues[field.name] = nestedObjectDefaults;
-            }
-        } else {
-            defaultValues[field.name] = getDefaultValueFromField(field, defaultLanguageCode);
-        }
-    }
-    return defaultValues;
-}
-
-export function getDefaultValueFromField(field: FieldInfo, defaultLanguageCode?: string) {
-    if (field.list) {
-        return [];
-    }
-    switch (field.type) {
-        case 'String':
-        case 'DateTime':
-            return '';
-        case 'Int':
-        case 'Float':
-        case 'Money':
-            return 0;
-        case 'Boolean':
-            return false;
-        case 'ID':
-            return '';
-        case 'LanguageCode':
-            return defaultLanguageCode || 'en';
-        case 'JSON':
-            return {};
-        default: {
-            return '';
-        }
-    }
-}
-
-export function getZodTypeFromField(field: FieldInfo): ZodTypeAny {
-    let zodType: ZodType;
-    switch (field.type) {
-        case 'String':
-        case 'ID':
-        case 'DateTime':
-            zodType = z.string();
-            break;
-        case 'Int':
-        case 'Float':
-        case 'Money':
-            zodType = z.number();
-            break;
-        case 'Boolean':
-            zodType = z.boolean();
-            break;
-        default:
-            zodType = z.any();
-    }
-    if (field.list) {
-        zodType = z.array(zodType);
-    }
-    if (field.nullable) {
-        zodType = zodType.optional().nullable();
-    }
-    return zodType;
-}
+import {
+    FieldInfo,
+    isEnumType,
+    isScalarType,
+} from '@/framework/document-introspection/get-document-structure.js';
+import { z, ZodRawShape, ZodType, ZodTypeAny } from 'zod';
+
+export function createFormSchemaFromFields(fields: FieldInfo[]) {
+    const schemaConfig: ZodRawShape = {};
+    for (const field of fields) {
+        const isScalar = isScalarType(field.type);
+        const isEnum = isEnumType(field.type);
+        if (isScalar || isEnum) {
+            schemaConfig[field.name] = getZodTypeFromField(field);
+        } else if (field.typeInfo) {
+            let nestedType: ZodType = createFormSchemaFromFields(field.typeInfo);
+            if (field.nullable) {
+                nestedType = nestedType.optional().nullable();
+            }
+            if (field.list) {
+                nestedType = z.array(nestedType);
+            }
+            schemaConfig[field.name] = nestedType;
+        }
+    }
+    return z.object(schemaConfig);
+}
+
+export function getDefaultValuesFromFields(fields: FieldInfo[], defaultLanguageCode?: string) {
+    const defaultValues: Record<string, any> = {};
+    for (const field of fields) {
+        if (field.typeInfo) {
+            const nestedObjectDefaults = getDefaultValuesFromFields(field.typeInfo, defaultLanguageCode);
+            if (field.list) {
+                defaultValues[field.name] = [nestedObjectDefaults];
+            } else {
+                defaultValues[field.name] = nestedObjectDefaults;
+            }
+        } else {
+            defaultValues[field.name] = getDefaultValueFromField(field, defaultLanguageCode);
+        }
+    }
+    return defaultValues;
+}
+
+export function getDefaultValueFromField(field: FieldInfo, defaultLanguageCode?: string) {
+    if (field.list) {
+        return [];
+    }
+    switch (field.type) {
+        case 'String':
+        case 'DateTime':
+            return '';
+        case 'Int':
+        case 'Float':
+        case 'Money':
+            return 0;
+        case 'Boolean':
+            return false;
+        case 'ID':
+            return '';
+        case 'LanguageCode':
+            return defaultLanguageCode || 'en';
+        case 'JSON':
+            return {};
+        default: {
+            return '';
+        }
+    }
+}
+
+export function getZodTypeFromField(field: FieldInfo): ZodTypeAny {
+    let zodType: ZodType;
+    switch (field.type) {
+        case 'String':
+        case 'ID':
+        case 'DateTime':
+            zodType = z.string();
+            break;
+        case 'Int':
+        case 'Float':
+        case 'Money':
+            zodType = z.number();
+            break;
+        case 'Boolean':
+            zodType = z.boolean();
+            break;
+        default:
+            zodType = z.any();
+    }
+    if (field.list) {
+        zodType = z.array(zodType);
+    }
+    if (field.nullable) {
+        zodType = zodType.optional().nullable();
+    }
+    return zodType;
+}