@vendure/dashboard 3.2.3 → 3.3.0

package/src/lib/hooks/use-auth.tsx

@@ -1,7 +1,19 @@
 import * as React from 'react';
 import { AuthContext } from '../providers/auth.js';
 
-
+/**
+ * @description
+ * **Status: Developer Preview**
+ *
+ * Provides access to the {@link ChannelContext} which contains information
+ * about the active channel.
+ *
+ *
+ * @docsCategory hooks
+ * @docsPage useAuth
+ * @docsWeight 0
+ * @since 3.3.0
+ */
 export function useAuth() {
     const context = React.useContext(AuthContext);
     if (!context) {

package/src/lib/hooks/use-channel.ts

@@ -3,6 +3,19 @@ import * as React from 'react';
 
 // Hook to use the channel context
 
+/**
+ * @description
+ * **Status: Developer Preview**
+ *
+ * Provides access to the {@link ChannelContext} which contains information
+ * about the active channel.
+ *
+ *
+ * @docsCategory hooks
+ * @docsPage useChannel
+ * @docsWeight 0
+ * @since 3.3.0
+ */
 export function useChannel() {
     const context = React.useContext(ChannelContext);
     if (context === undefined) {

package/src/lib/hooks/use-local-format.ts

@@ -1,4 +1,3 @@
-import { useLingui } from '@lingui/react';
 import { useCallback, useMemo } from 'react';
 
 import { useServerConfig } from './use-server-config.js';
@@ -19,6 +18,10 @@ import { useServerConfig } from './use-server-config.js';
  *          toMajorUnits,
  * } = useLocalFormat();
  * ```
+ *
+ * @docsCategory hooks
+ * @docsPage useLocalFormat
+ * @docsWeight 0
  */
 export function useLocalFormat() {
     const { moneyStrategyPrecision } = useServerConfig() ?? { moneyStrategyPrecision: 2 };
@@ -65,6 +68,29 @@ export function useLocalFormat() {
         [locale],
     );
 
+    const formatRelativeDate = useCallback(
+        (value: string | Date, options?: Intl.RelativeTimeFormatOptions) => {
+            const now = new Date();
+            const date = new Date(value);
+            const diffSeconds = Math.floor((now.getTime() - date.getTime()) / 1000);
+            // if less than 1 minute, use seconds. Else use minutes, hours, days, months, years
+            if (diffSeconds < 60) {
+                return new Intl.RelativeTimeFormat(locale, options).format(diffSeconds * -1, 'seconds');
+            } else if (diffSeconds < 3600) {
+                return new Intl.RelativeTimeFormat(locale, options).format(diffSeconds * -1, 'minutes');
+            } else if (diffSeconds < 86400) {
+                return new Intl.RelativeTimeFormat(locale, options).format(diffSeconds * -1, 'hours');
+            } else if (diffSeconds < 2592000) {
+                return new Intl.RelativeTimeFormat(locale, options).format(diffSeconds * -1, 'days');
+            } else if (diffSeconds < 31536000) {
+                return new Intl.RelativeTimeFormat(locale, options).format(diffSeconds * -1, 'months');
+            } else {
+                return new Intl.RelativeTimeFormat(locale, options).format(diffSeconds * -1, 'years');
+            }
+        },
+        [locale],
+    );
+
     const formatLanguageName = useCallback(
         (value: string): string => {
             try {
@@ -111,6 +137,7 @@ export function useLocalFormat() {
         formatCurrency,
         formatNumber,
         formatDate,
+        formatRelativeDate,
         formatLanguageName,
         formatCurrencyName,
         toMajorUnits,

package/src/lib/hooks/use-page.tsx

@@ -1,11 +1,10 @@
-import { PageProvider } from "@/framework/layout-engine/page-layout.js";
 import { useContext } from "react";
+import { PageContext } from '@/framework/layout-engine/page-provider.js';
 
 export function usePage() {
-    const page = useContext(PageProvider);
+    const page = useContext(PageContext);
     if (!page) {
         throw new Error('PageProvider not found');
     }
     return page;
 }
-    

package/src/lib/hooks/use-permissions.ts

@@ -3,6 +3,19 @@ import { Permission } from '@vendure/common/lib/generated-types';
 
 import { useUserSettings } from './use-user-settings.js';
 
+/**
+ * @description
+ * **Status: Developer Preview**
+ *
+ * Returns a `hasPermissions` function that can be used to determine whether the active user
+ * has the given permissions on the active channel.
+ *
+ *
+ * @docsCategory hooks
+ * @docsPage usePermissions
+ * @docsWeight 0
+ * @since 3.3.0
+ */
 export function usePermissions() {
     const { channels } = useAuth();
     const { settings } = useUserSettings();

package/src/lib/index.ts

@@ -28,10 +28,11 @@ export * from './components/layout/nav-user.js';
 export * from './components/login/login-form.js';
 export * from './components/shared/alerts.js';
 export * from './components/shared/animated-number.js';
-export * from './components/shared/asset-gallery.js';
-export * from './components/shared/asset-picker-dialog.js';
-export * from './components/shared/asset-preview-dialog.js';
-export * from './components/shared/asset-preview.js';
+export * from './components/shared/asset/asset-gallery.js';
+export * from './components/shared/asset/asset-picker-dialog.js';
+export * from './components/shared/asset/asset-preview-dialog.js';
+export * from './components/shared/asset/asset-preview.js';
+export * from './components/shared/asset/focal-point-control.js';
 export * from './components/shared/assigned-facet-values.js';
 export * from './components/shared/channel-code-label.js';
 export * from './components/shared/channel-selector.js';
@@ -50,7 +51,6 @@ export * from './components/shared/entity-assets.js';
 export * from './components/shared/error-page.js';
 export * from './components/shared/facet-value-chip.js';
 export * from './components/shared/facet-value-selector.js';
-export * from './components/shared/focal-point-control.js';
 export * from './components/shared/form-field-wrapper.js';
 export * from './components/shared/history-timeline/history-entry.js';
 export * from './components/shared/history-timeline/history-note-checkbox.js';
@@ -74,7 +74,6 @@ export * from './components/shared/zone-selector.js';
 export * from './components/ui/accordion.js';
 export * from './components/ui/alert-dialog.js';
 export * from './components/ui/alert.js';
-export * from './components/ui/avatar.js';
 export * from './components/ui/badge.js';
 export * from './components/ui/breadcrumb.js';
 export * from './components/ui/button.js';
@@ -113,8 +112,8 @@ export * from './framework/dashboard-widget/metrics-widget/index.js';
 export * from './framework/dashboard-widget/metrics-widget/metrics-widget.graphql.js';
 export * from './framework/dashboard-widget/orders-summary/index.js';
 export * from './framework/dashboard-widget/orders-summary/order-summary-widget.graphql.js';
-export * from './framework/dashboard-widget/widget-extensions.js';
 export * from './framework/dashboard-widget/types.js';
+export * from './framework/dashboard-widget/widget-extensions.js';
 export * from './framework/defaults.js';
 export * from './framework/document-introspection/add-custom-fields.js';
 export * from './framework/document-introspection/get-document-structure.js';
@@ -124,9 +123,9 @@ export * from './framework/extension-api/extension-api-types.js';
 export * from './framework/extension-api/use-dashboard-extensions.js';
 export * from './framework/form-engine/form-schema-tools.js';
 export * from './framework/form-engine/use-generated-form.js';
+export * from './framework/layout-engine/layout-extensions.js';
 export * from './framework/layout-engine/location-wrapper.js';
 export * from './framework/layout-engine/page-layout.js';
-export * from './framework/layout-engine/layout-extensions.js';
 export * from './framework/nav-menu/nav-menu-extensions.js';
 export * from './framework/page/detail-page-route-loader.js';
 export * from './framework/page/detail-page.js';

package/src/lib/providers/auth.tsx

@@ -3,7 +3,17 @@ import { ResultOf, graphql } from '@/graphql/graphql.js';
 import { useUserSettings } from '@/hooks/use-user-settings.js';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import * as React from 'react';
+import { useAuth } from '@/hooks/use-auth.js';
 
+/**
+ * @description
+ * **Status: Developer Preview**
+ *
+ * @docsCategory hooks
+ * @docsPage useAuth
+ * @docsWeight 0
+ * @since 3.3.0
+ */
 export interface AuthContext {
     status: 'authenticated' | 'verifying' | 'unauthenticated';
     authenticationError?: string;
@@ -69,17 +79,20 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
     const onLogoutSuccessFn = React.useRef<() => void>(() => {});
     const isAuthenticated = status === 'authenticated';
 
-    const { data: currentUserData, isLoading } = useQuery({
-        queryKey: ['currentUser'],
+    const { data: currentUserData, isLoading , error: currentUserError} = useQuery({
+        queryKey: ['currentUser', isAuthenticated],
         queryFn: () => api.query(CurrentUserQuery),
         retry: false,
+        staleTime: 1000,
     });
 
+    const currentUser = currentUserError ? undefined : currentUserData;
+
     React.useEffect(() => {
-        if (!settings.activeChannelId && currentUserData?.me?.channels?.length) {
-            setActiveChannelId(currentUserData.me.channels[0].id);
+        if (!settings.activeChannelId && currentUser?.me?.channels?.length) {
+            setActiveChannelId(currentUser.me.channels[0].id);
         }
-    }, [settings.activeChannelId, currentUserData?.me?.channels]);
+    }, [settings.activeChannelId, currentUser?.me?.channels]);
 
     const loginMutationFn = api.mutate(LoginMutation);
     const loginMutation = useMutation({
@@ -123,7 +136,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
 
     React.useEffect(() => {
         if (!isLoading) {
-            if (currentUserData?.me?.id) {
+            if (currentUser?.me?.id) {
                 setStatus('authenticated');
             } else {
                 setStatus('unauthenticated');
@@ -131,7 +144,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
         } else {
             setStatus('verifying');
         }
-    }, [isLoading, currentUserData]);
+    }, [isLoading, currentUser]);
 
     return (
         <AuthContext.Provider
@@ -139,8 +152,8 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
                 isAuthenticated,
                 authenticationError,
                 status,
-                user: currentUserData?.activeAdministrator,
-                channels: currentUserData?.me?.channels,
+                user: currentUser?.activeAdministrator,
+                channels: currentUser?.me?.channels,
                 login,
                 logout,
             }}

package/src/lib/providers/channel-provider.tsx

@@ -41,7 +41,14 @@ const ChannelsQuery = graphql(
 type ActiveChannel = ResultOf<typeof ChannelsQuery>['activeChannel'];
 type Channel = ResultOf<typeof channelFragment>;
 
-// Define the context interface
+/**
+ * @description
+ * **Status: Developer Preview**
+ *
+ * @docsCategory hooks
+ * @docsPage useChannel
+ * @since 3.3.0
+ */
 export interface ChannelContext {
     activeChannel: ActiveChannel | undefined;
     channels: Channel[];
@@ -73,6 +80,7 @@ export function ChannelProvider({ children }: { children: React.ReactNode }) {
     const { data: channelsData, isLoading: isChannelsLoading } = useQuery({
         queryKey: ['channels'],
         queryFn: () => api.query(ChannelsQuery),
+        retry: false,
     });
 
     // Set the selected channel and update localStorage

package/src/lib/providers/server-config.tsx

@@ -1,5 +1,6 @@
 import { api } from '@/graphql/api.js';
 import { graphql } from '@/graphql/graphql.js';
+import { useAuth } from '@/hooks/use-auth.js';
 import { useQuery } from '@tanstack/react-query';
 import { ResultOf } from 'gql.tada';
 import React from 'react';
@@ -260,9 +261,14 @@ export interface ServerConfig {
 
 // create a provider for the global settings
 export const ServerConfigProvider = ({ children }: { children: React.ReactNode }) => {
+    const { user } = useAuth();
+    const queryKey = ['getServerConfig', user?.id];
     const { data } = useQuery({
-        queryKey: ['getServerConfig'],
+        queryKey,
         queryFn: () => api.query(getServerConfigDocument),
+        retry: false,
+        enabled: !!user?.id,
+        staleTime: 1000,
     });
     const value: ServerConfig = {
         availableLanguages: data?.globalSettings.availableLanguages ?? [],

package/src/lib/providers/user-settings.tsx

@@ -1,5 +1,13 @@
 import React, { createContext, useState, useEffect } from 'react';
 import { Theme } from './theme-provider.js';
+import { ColumnFiltersState } from '@tanstack/react-table';
+
+export interface TableSettings {
+    columnVisibility?: Record<string, boolean>;
+    columnOrder?: string[];
+    columnFilters?: ColumnFiltersState;
+    pageSize?: number;
+}
 
 export interface UserSettings {
     displayLanguage: string;
@@ -11,6 +19,7 @@ export interface UserSettings {
     activeChannelId: string;
     devMode: boolean;
     hasSeenOnboarding: boolean;
+    tableSettings?: Record<string, TableSettings>;
 }
 
 const defaultSettings: UserSettings = {
@@ -23,6 +32,7 @@ const defaultSettings: UserSettings = {
     activeChannelId: '',
     devMode: false,
     hasSeenOnboarding: false,
+    tableSettings: {},
 };
 
 export interface UserSettingsContextType {
@@ -36,6 +46,11 @@ export interface UserSettingsContextType {
     setActiveChannelId: (channelId: string) => void;
     setDevMode: (devMode: boolean) => void;
     setHasSeenOnboarding: (hasSeen: boolean) => void;
+    setTableSettings: <K extends keyof TableSettings>(
+        tableId: string,
+        key: K,
+        value: TableSettings[K],
+    ) => void;
 }
 
 export const UserSettingsContext = createContext<UserSettingsContextType | undefined>(undefined);
@@ -83,6 +98,15 @@ export const UserSettingsProvider: React.FC<React.PropsWithChildren<{}>> = ({ ch
         setActiveChannelId: channelId => updateSetting('activeChannelId', channelId),
         setDevMode: devMode => updateSetting('devMode', devMode),
         setHasSeenOnboarding: hasSeen => updateSetting('hasSeenOnboarding', hasSeen),
+        setTableSettings: (tableId, key, value) => {
+            setSettings(prev => ({
+                ...prev,
+                tableSettings: {
+                    ...prev.tableSettings,
+                    [tableId]: { ...(prev.tableSettings?.[tableId] || {}), [key]: value },
+                },
+            }));
+        },
     };
 
     return <UserSettingsContext.Provider value={contextValue}>{children}</UserSettingsContext.Provider>;

package/vite/utils/ast-utils.spec.ts

@@ -0,0 +1,128 @@
+import ts from 'typescript';
+import { describe, expect, it } from 'vitest';
+
+import { findConfigExport, getPluginInfo } from './ast-utils.js';
+
+describe('getPluginInfo', () => {
+    it('should return undefined when no plugin class is found', () => {
+        const sourceText = `
+            class NotAPlugin {
+                constructor() {}
+            }
+        `;
+        const sourceFile = ts.createSourceFile('path/to/test.ts', sourceText, ts.ScriptTarget.Latest, true);
+        const result = getPluginInfo(sourceFile);
+        expect(result).toBeUndefined();
+    });
+
+    it('should return plugin info when a valid plugin class is found', () => {
+        const sourceText = `
+            @VendurePlugin({
+                imports: [],
+                providers: []
+            })
+            class TestPlugin {
+                constructor() {}
+            }
+        `;
+        const sourceFile = ts.createSourceFile('path/to/test.ts', sourceText, ts.ScriptTarget.Latest, true);
+        const result = getPluginInfo(sourceFile);
+        expect(result).toEqual({
+            name: 'TestPlugin',
+            pluginPath: 'path/to',
+            dashboardEntryPath: undefined,
+        });
+    });
+
+    it('should handle multiple classes but only return the plugin one', () => {
+        const sourceText = `
+            class NotAPlugin {
+                constructor() {}
+            }
+
+            @VendurePlugin({
+                imports: [],
+                providers: []
+            })
+            class TestPlugin {
+                constructor() {}
+            }
+
+            class AnotherClass {
+                constructor() {}
+            }
+        `;
+        const sourceFile = ts.createSourceFile('path/to/test.ts', sourceText, ts.ScriptTarget.Latest, true);
+        const result = getPluginInfo(sourceFile);
+        expect(result).toEqual({
+            name: 'TestPlugin',
+            pluginPath: 'path/to',
+            dashboardEntryPath: undefined,
+        });
+    });
+
+    it('should determine the dashboard entry path when it is provided', () => {
+        const sourceText = `
+            @VendurePlugin({
+                imports: [],
+                providers: [],
+                dashboard: './dashboard/index.tsx',
+            })
+            class TestPlugin {
+                constructor() {}
+            }
+        `;
+        const sourceFile = ts.createSourceFile('path/to/test.ts', sourceText, ts.ScriptTarget.Latest, true);
+        const result = getPluginInfo(sourceFile);
+        expect(result).toEqual({
+            name: 'TestPlugin',
+            pluginPath: 'path/to',
+            dashboardEntryPath: './dashboard/index.tsx',
+        });
+    });
+});
+
+describe('findConfigExport', () => {
+    it('should return undefined when no VendureConfig export is found', () => {
+        const sourceText = `
+            export const notConfig = {
+                some: 'value'
+            };
+        `;
+        const sourceFile = ts.createSourceFile('path/to/test.ts', sourceText, ts.ScriptTarget.Latest, true);
+        const result = findConfigExport(sourceFile);
+        expect(result).toBeUndefined();
+    });
+
+    it('should find exported variable with VendureConfig type', () => {
+        const sourceText = `
+            import { VendureConfig } from '@vendure/core';
+
+            export const config: VendureConfig = {
+                authOptions: {
+                    tokenMethod: 'bearer'
+                }
+            };
+        `;
+        const sourceFile = ts.createSourceFile('path/to/test.ts', sourceText, ts.ScriptTarget.Latest, true);
+        const result = findConfigExport(sourceFile);
+        expect(result).toBe('config');
+    });
+
+    it('should find exported variable with VendureConfig type among other exports', () => {
+        const sourceText = `
+            import { VendureConfig } from '@vendure/core';
+
+            export const otherExport = 'value';
+            export const config: VendureConfig = {
+                authOptions: {
+                    tokenMethod: 'bearer'
+                }
+            };
+            export const anotherExport = 123;
+        `;
+        const sourceFile = ts.createSourceFile('path/to/test.ts', sourceText, ts.ScriptTarget.Latest, true);
+        const result = findConfigExport(sourceFile);
+        expect(result).toBe('config');
+    });
+});

package/vite/utils/ast-utils.ts

@@ -0,0 +1,119 @@
+import path from 'path';
+import ts from 'typescript';
+
+import { PluginInfo } from './config-loader.js';
+
+/**
+ * Get the plugin info from the source file.
+ */
+export function getPluginInfo(sourceFile: ts.SourceFile): PluginInfo | undefined {
+    const classDeclaration = sourceFile.statements.find(statement => {
+        return (
+            statement.kind === ts.SyntaxKind.ClassDeclaration &&
+            statement.getText().includes('@VendurePlugin(')
+        );
+    });
+    if (classDeclaration) {
+        const identifier = classDeclaration.getChildren().find(child => {
+            return child.kind === ts.SyntaxKind.Identifier;
+        });
+        const dashboardEntryPath = classDeclaration
+            .getChildren()
+            .map(child => {
+                if (child.kind === ts.SyntaxKind.SyntaxList) {
+                    const pluginDecorator = child.getChildren().find(_child => {
+                        return _child.kind === ts.SyntaxKind.Decorator;
+                    });
+                    if (pluginDecorator) {
+                        const callExpression = findFirstDescendantOfKind(
+                            pluginDecorator,
+                            ts.SyntaxKind.CallExpression,
+                        );
+                        if (callExpression) {
+                            const objectLiteral = findFirstDescendantOfKind(
+                                callExpression,
+                                ts.SyntaxKind.ObjectLiteralExpression,
+                            );
+                            if (objectLiteral && ts.isObjectLiteralExpression(objectLiteral)) {
+                                // Now find the specific 'dashboard' property
+                                const dashboardProperty = objectLiteral.properties.find(
+                                    prop =>
+                                        ts.isPropertyAssignment(prop) && prop.name?.getText() === 'dashboard',
+                                );
+
+                                if (
+                                    dashboardProperty &&
+                                    ts.isPropertyAssignment(dashboardProperty) &&
+                                    ts.isStringLiteral(dashboardProperty.initializer)
+                                ) {
+                                    const dashboardPath = dashboardProperty.initializer.text;
+                                    return dashboardPath;
+                                }
+                            }
+                        }
+                    }
+                }
+            })
+            .filter(Boolean)?.[0];
+        if (identifier) {
+            return {
+                name: identifier.getText(),
+                pluginPath: path.dirname(sourceFile.fileName),
+                dashboardEntryPath,
+            };
+        }
+    }
+}
+
+/**
+ * Given the AST of a TypeScript file, finds the name of the variable exported as VendureConfig.
+ */
+export function findConfigExport(sourceFile: ts.SourceFile): string | undefined {
+    let exportedSymbolName: string | undefined;
+
+    function visit(node: ts.Node) {
+        if (
+            ts.isVariableStatement(node) &&
+            node.modifiers?.some(m => m.kind === ts.SyntaxKind.ExportKeyword)
+        ) {
+            node.declarationList.declarations.forEach(declaration => {
+                if (ts.isVariableDeclaration(declaration)) {
+                    const typeNode = declaration.type;
+                    if (typeNode && ts.isTypeReferenceNode(typeNode)) {
+                        const typeName = typeNode.typeName;
+                        if (ts.isIdentifier(typeName) && typeName.text === 'VendureConfig') {
+                            if (ts.isIdentifier(declaration.name)) {
+                                exportedSymbolName = declaration.name.text;
+                            }
+                        }
+                    }
+                }
+            });
+        }
+        ts.forEachChild(node, visit);
+    }
+
+    visit(sourceFile);
+    return exportedSymbolName;
+}
+
+function findFirstDescendantOfKind(node: ts.Node, kind: ts.SyntaxKind): ts.Node | undefined {
+    let foundNode: ts.Node | undefined;
+
+    function visit(_node: ts.Node) {
+        if (foundNode) {
+            // Stop searching if we already found it
+            return;
+        }
+        if (_node.kind === kind) {
+            foundNode = _node;
+            return;
+        }
+        // Recursively visit children
+        ts.forEachChild(_node, visit);
+    }
+
+    // Start the traversal from the initial node's children
+    ts.forEachChild(node, visit);
+    return foundNode;
+}