@leandrosk/dashboard 3.5.5

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

@@ -0,0 +1,175 @@
+import { useCallback, useMemo } from 'react';
+
+import { useDisplayLocale } from './use-display-locale.js';
+import { useServerConfig } from './use-server-config.js';
+
+/**
+ * @description
+ * This hook is used to format numbers and currencies using the configured language and
+ * locale of the dashboard app.
+ *
+ * @example
+ * ```ts
+ * const {
+ *          formatCurrency,
+ *          formatNumber,
+ *          formatDate,
+ *          formatLanguageName,
+ *          formatCurrencyName,
+ *          toMajorUnits,
+ * } = useLocalFormat();
+ * ```
+ *
+ * @docsCategory hooks
+ * @docsPage useLocalFormat
+ * @docsWeight 0
+ */
+export function useLocalFormat() {
+    const { moneyStrategyPrecision } = useServerConfig() ?? { moneyStrategyPrecision: 2 };
+    const precisionFactor = useMemo(() => Math.pow(10, moneyStrategyPrecision), [moneyStrategyPrecision]);
+    const { bcp47Tag } = useDisplayLocale();
+    const locale = bcp47Tag;
+
+    const toMajorUnits = useCallback(
+        (value: number): number => {
+            return value / precisionFactor;
+        },
+        [precisionFactor],
+    );
+
+    const toMinorUnits = useCallback(
+        (value: number): number => {
+            return Math.round(value * precisionFactor);
+        },
+        [precisionFactor],
+    );
+
+    const formatCurrency = useCallback(
+        (value: number, currency: string, precision?: number) => {
+            return new Intl.NumberFormat(locale, {
+                style: 'currency',
+                currency,
+                minimumFractionDigits: precision ?? moneyStrategyPrecision,
+                maximumFractionDigits: precision ?? moneyStrategyPrecision,
+            }).format(toMajorUnits(value));
+        },
+        [locale, moneyStrategyPrecision, toMajorUnits],
+    );
+
+    const formatNumber = useCallback(
+        (value: number) => {
+            return new Intl.NumberFormat(locale).format(value);
+        },
+        [locale],
+    );
+
+    const formatDate = useCallback(
+        (value: string | Date, options?: Intl.DateTimeFormatOptions) => {
+            return new Intl.DateTimeFormat(locale, options).format(new Date(value));
+        },
+        [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(
+                    Math.floor((diffSeconds / 60) * -1),
+                    'minutes',
+                );
+            } else if (diffSeconds < 86400) {
+                return new Intl.RelativeTimeFormat(locale, options).format(
+                    Math.floor((diffSeconds / 3600) * -1),
+                    'hours',
+                );
+            } else if (diffSeconds < 2592000) {
+                return new Intl.RelativeTimeFormat(locale, options).format(
+                    Math.floor((diffSeconds / 86400) * -1),
+                    'days',
+                );
+            } else if (diffSeconds < 31536000) {
+                return new Intl.RelativeTimeFormat(locale, options).format(
+                    Math.floor((diffSeconds / 2592000) * -1),
+                    'months',
+                );
+            } else {
+                return new Intl.RelativeTimeFormat(locale, options).format(
+                    Math.floor((diffSeconds / 31536000) * -1),
+                    'years',
+                );
+            }
+        },
+        [locale],
+    );
+
+    const formatLanguageName = useCallback(
+        (value: string): string => {
+            try {
+                return (
+                    new Intl.DisplayNames([locale], { type: 'language' }).of(value.replace('_', '-')) ?? value
+                );
+            } catch (e: any) {
+                return value;
+            }
+        },
+        [locale],
+    );
+
+    const formatRegionName = useCallback(
+        (value: string): string => {
+            try {
+                return new Intl.DisplayNames([locale], { type: 'region' }).of(value) ?? value;
+            } catch (e: any) {
+                return value;
+            }
+        },
+        [locale],
+    );
+
+    const formatCurrencyName = useCallback(
+        (currencyCode: string, display: 'full' | 'symbol' | 'name' = 'full'): string => {
+            if (!currencyCode) return '';
+
+            try {
+                const name =
+                    display === 'full' || display === 'name'
+                        ? (new Intl.DisplayNames([locale], { type: 'currency' }).of(currencyCode) ?? '')
+                        : '';
+
+                const symbol =
+                    display === 'full' || display === 'symbol'
+                        ? (new Intl.NumberFormat(locale, {
+                              style: 'currency',
+                              currency: currencyCode,
+                              currencyDisplay: 'symbol',
+                          })
+                              .formatToParts()
+                              .find(p => p.type === 'currency')?.value ?? currencyCode)
+                        : '';
+
+                return display === 'full' ? `${name} (${symbol})` : display === 'name' ? name : symbol;
+            } catch (e) {
+                return currencyCode;
+            }
+        },
+        [locale],
+    );
+
+    return {
+        formatCurrency,
+        formatNumber,
+        formatDate,
+        formatRelativeDate,
+        formatLanguageName,
+        formatRegionName,
+        formatCurrencyName,
+        toMajorUnits,
+        toMinorUnits,
+    };
+}

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

@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+    const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
+
+    React.useEffect(() => {
+        const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+        const onChange = () => {
+            setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+        };
+        mql.addEventListener('change', onChange);
+        setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+        return () => mql.removeEventListener('change', onChange);
+    }, []);
+
+    return !!isMobile;
+}

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

@@ -0,0 +1,27 @@
+import { PageBlockContext } from '@/vdb/framework/layout-engine/page-block-provider.js';
+import { useContext } from 'react';
+
+/**
+ * @description
+ * Returns the current PageBlock context, which means there must be
+ * a PageBlock ancestor component higher in the tree.
+ *
+ * If `optional` is set to true, the hook will not throw if no PageBlock
+ * exists higher in the tree, but will just return undefined.
+ *
+ * @example
+ * ```tsx
+ * const { blockId, title, description, column } = usePageBlock();
+ * ```
+ * 
+ * @docsCategory page-layout
+ * @docsPage usePageBlock
+ * @since 3.3.0
+ */
+export function usePageBlock({ optional }: { optional?: boolean } = {}) {
+    const pageBlock = useContext(PageBlockContext);
+    if (!pageBlock && !optional) {
+        throw new Error('PageBlockProvider not found');
+    }
+    return pageBlock;
+}

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

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

package/src/lib/hooks/use-paginated-list.ts

@@ -0,0 +1,28 @@
+import { PaginatedListContext } from '@/vdb/components/shared/paginated-list-context.js';
+import * as React from 'react';
+
+/**
+ * @description
+ * Returns the context for the paginated list data table. Must be used within a PaginatedListDataTable.
+ *
+ * @example
+ * ```ts
+ * const { refetchPaginatedList } = usePaginatedList();
+ *
+ * const mutation = useMutation({
+ *     mutationFn: api.mutate(updateFacetValueDocument),
+ *     onSuccess: () => {
+ *         refetchPaginatedList();
+ *     },
+ * });
+ * ```
+ * @docsCategory hooks
+ * @since 3.4.0
+ */
+export function usePaginatedList() {
+    const context = React.useContext(PaginatedListContext);
+    if (!context) {
+        throw new Error('usePaginatedList must be used within a PaginatedListDataTable');
+    }
+    return context;
+}

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

@@ -0,0 +1,40 @@
+import { Permission } from '@vendure/common/lib/generated-types';
+
+import { useAuth } from './use-auth.js';
+import { useChannel } from './use-channel.js';
+
+/**
+ * @description
+ * Returns a `hasPermissions` function that can be used to determine whether the active user
+ * has the given permissions on the active channel.
+ *
+ * @example
+ * ```tsx
+ * const { hasPermissions } = usePermissions();
+ *
+ * const canReadChannel = hasPermissions(['ReadChannel']);
+ * ```
+ *
+ * @docsCategory hooks
+ * @docsPage usePermissions
+ * @docsWeight 0
+ * @since 3.3.0
+ */
+export function usePermissions() {
+    const { channels } = useAuth();
+    const { activeChannel } = useChannel();
+
+    function hasPermissions(permissions: string[]) {
+        if (permissions.length === 0) {
+            return true;
+        }
+        // Use the selected channel instead of settings.activeChannelId
+        const selectedChannel = (channels ?? []).find(channel => channel.id === activeChannel?.id);
+        if (!selectedChannel) {
+            return false;
+        }
+        return permissions.some(permission => selectedChannel.permissions.includes(permission as Permission));
+    }
+
+    return { hasPermissions };
+}

package/src/lib/hooks/use-saved-views.ts

@@ -0,0 +1,238 @@
+import { api } from '@/vdb/graphql/api.js';
+import {
+    getSettingsStoreValueDocument,
+    setSettingsStoreValueDocument,
+} from '@/vdb/graphql/settings-store-operations.js';
+import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
+import { SavedView, SavedViewsStore, SaveViewInput, UpdateViewInput } from '@/vdb/types/saved-views.js';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { ColumnFiltersState } from '@tanstack/react-table';
+
+import { usePageBlock } from './use-page-block.js';
+import { usePage } from './use-page.js';
+import { usePermissions } from './use-permissions.js';
+
+const generateId = () => {
+    const array = new Uint32Array(2);
+    crypto.getRandomValues(array);
+    return array[0].toString(36) + array[1].toString(36);
+};
+
+export function useSavedViews() {
+    const queryClient = useQueryClient();
+    const { settingsStoreIsAvailable } = useUserSettings();
+    const { pageId } = usePage();
+    const pageBlock = usePageBlock({ optional: true });
+    const blockId = pageBlock?.blockId || 'default';
+
+    if (!pageId) {
+        throw new Error('useSavedViews must be used within a Page context');
+    }
+
+    const userViewsKey = 'vendure.dashboard.userSavedViews';
+    const globalViewsKey = 'vendure.dashboard.globalSavedViews';
+
+    // Query for user views
+    const { data: userViewsData, isLoading: userViewsLoading } = useQuery({
+        queryKey: ['saved-views-user', pageId, blockId],
+        queryFn: async () => {
+            const result = await api.query(getSettingsStoreValueDocument, { key: userViewsKey });
+            const allUserViews = (result?.getSettingsStoreValue as SavedViewsStore) || {};
+            return allUserViews[pageId]?.[blockId] || [];
+        },
+        retry: false,
+        enabled: settingsStoreIsAvailable,
+    });
+
+    // Query for global views
+    const { data: globalViewsData, isLoading: globalViewsLoading } = useQuery({
+        queryKey: ['saved-views-global', pageId, blockId],
+        queryFn: async () => {
+            const result = await api.query(getSettingsStoreValueDocument, { key: globalViewsKey });
+            const allGlobalViews = (result?.getSettingsStoreValue as SavedViewsStore) || {};
+            return allGlobalViews[pageId]?.[blockId] || [];
+        },
+        retry: false,
+        enabled: settingsStoreIsAvailable,
+    });
+
+    // Save user view mutation
+    const saveUserViewMutation = useMutation({
+        mutationFn: async (views: SavedView[]) => {
+            // Get current data first
+            const result = await api.query(getSettingsStoreValueDocument, { key: userViewsKey });
+            const allUserViews = (result?.getSettingsStoreValue as SavedViewsStore) || {};
+
+            // Update the specific page and block
+            const updatedViews = {
+                ...allUserViews,
+                [pageId]: {
+                    ...allUserViews[pageId],
+                    [blockId]: views,
+                },
+            };
+
+            return api.mutate(setSettingsStoreValueDocument, {
+                input: { key: userViewsKey, value: updatedViews },
+            });
+        },
+        onSuccess: () => {
+            void queryClient.invalidateQueries({ queryKey: ['saved-views-user', pageId, blockId] });
+        },
+    });
+
+    // Save global view mutation
+    const saveGlobalViewMutation = useMutation({
+        mutationFn: async (views: SavedView[]) => {
+            // Get current data first
+            const result = await api.query(getSettingsStoreValueDocument, { key: globalViewsKey });
+            const allGlobalViews = (result?.getSettingsStoreValue as SavedViewsStore) || {};
+
+            // Update the specific page and block
+            const updatedViews = {
+                ...allGlobalViews,
+                [pageId]: {
+                    ...allGlobalViews[pageId],
+                    [blockId]: views,
+                },
+            };
+
+            return api.mutate(setSettingsStoreValueDocument, {
+                input: { key: globalViewsKey, value: updatedViews },
+            });
+        },
+        onSuccess: () => {
+            void queryClient.invalidateQueries({ queryKey: ['saved-views-global', pageId, blockId] });
+        },
+    });
+
+    const saveView = async (input: SaveViewInput) => {
+        const newView: SavedView = {
+            id: generateId(),
+            name: input.name,
+            scope: input.scope,
+            filters: input.filters,
+            searchTerm: input.searchTerm,
+            columnConfig: input.columnConfig,
+            pageId,
+            blockId: blockId === 'default' ? undefined : blockId,
+            createdAt: new Date().toISOString(),
+            updatedAt: new Date().toISOString(),
+        };
+
+        if (input.scope === 'user') {
+            const currentViews = userViewsData || [];
+            await saveUserViewMutation.mutateAsync([...currentViews, newView]);
+        } else {
+            const currentViews = globalViewsData || [];
+            await saveGlobalViewMutation.mutateAsync([...currentViews, newView]);
+        }
+
+        return newView;
+    };
+
+    const updateView = async (input: UpdateViewInput) => {
+        const userViews = userViewsData || [];
+        const globalViews = globalViewsData || [];
+
+        const viewInUserViews = userViews.find(v => v.id === input.id);
+        const viewInGlobalViews = globalViews.find(v => v.id === input.id);
+
+        if (viewInUserViews) {
+            const updatedViews = userViews.map(v =>
+                v.id === input.id
+                    ? {
+                          ...v,
+                          name: input.name ?? v.name,
+                          filters: input.filters ?? v.filters,
+                          searchTerm: input.searchTerm !== undefined ? input.searchTerm : v.searchTerm,
+                          updatedAt: new Date().toISOString(),
+                      }
+                    : v,
+            );
+            await saveUserViewMutation.mutateAsync(updatedViews);
+        } else if (viewInGlobalViews) {
+            const updatedViews = globalViews.map(v =>
+                v.id === input.id
+                    ? {
+                          ...v,
+                          name: input.name ?? v.name,
+                          filters: input.filters ?? v.filters,
+                          searchTerm: input.searchTerm !== undefined ? input.searchTerm : v.searchTerm,
+                          updatedAt: new Date().toISOString(),
+                      }
+                    : v,
+            );
+            await saveGlobalViewMutation.mutateAsync(updatedViews);
+        }
+    };
+
+    const deleteView = async (viewId: string) => {
+        const userViews = userViewsData || [];
+        const globalViews = globalViewsData || [];
+
+        if (userViews.some(v => v.id === viewId)) {
+            const updatedViews = userViews.filter(v => v.id !== viewId);
+            await saveUserViewMutation.mutateAsync(updatedViews);
+        } else if (globalViews.some(v => v.id === viewId)) {
+            const updatedViews = globalViews.filter(v => v.id !== viewId);
+            await saveGlobalViewMutation.mutateAsync(updatedViews);
+        }
+    };
+
+    const duplicateView = async (viewId: string, newScope: 'user' | 'global') => {
+        const allViews = [...(userViewsData || []), ...(globalViewsData || [])];
+        const viewToDuplicate = allViews.find(v => v.id === viewId);
+
+        if (viewToDuplicate) {
+            const newView: SavedView = {
+                ...viewToDuplicate,
+                id: generateId(),
+                name: `${viewToDuplicate.name} (Copy)`,
+                scope: newScope,
+                pageId,
+                blockId: blockId === 'default' ? undefined : blockId,
+                createdAt: new Date().toISOString(),
+                updatedAt: new Date().toISOString(),
+            };
+
+            if (newScope === 'user') {
+                const currentViews = userViewsData || [];
+                await saveUserViewMutation.mutateAsync([...currentViews, newView]);
+            } else {
+                const currentViews = globalViewsData || [];
+                await saveGlobalViewMutation.mutateAsync([...currentViews, newView]);
+            }
+
+            return newView;
+        }
+    };
+
+    const applyView = (
+        view: SavedView,
+        setFilters: (filters: ColumnFiltersState) => void,
+        setSearchTerm?: (term: string) => void,
+    ) => {
+        setFilters(view.filters);
+        if (setSearchTerm && view.searchTerm !== undefined) {
+            setSearchTerm(view.searchTerm);
+        }
+    };
+
+    // Use UpdateSettings permission for managing global views
+    const { hasPermissions } = usePermissions();
+    const canManageGlobalViews = hasPermissions(['WriteDashboardGlobalViews']);
+
+    return {
+        savedViewsAreAvailable: settingsStoreIsAvailable,
+        userViews: userViewsData || [],
+        globalViews: globalViewsData || [],
+        isLoading: userViewsLoading || globalViewsLoading,
+        saveView,
+        updateView,
+        deleteView,
+        duplicateView,
+        applyView,
+        canManageGlobalViews,
+    };
+}

package/src/lib/hooks/use-server-config.ts

@@ -0,0 +1,4 @@
+import { ServerConfigContext } from '@/vdb/providers/server-config.js';
+import React from 'react';
+
+export const useServerConfig = () => React.useContext(ServerConfigContext);

package/src/lib/hooks/use-sorted-languages.ts

@@ -0,0 +1,41 @@
+import { useMemo } from 'react';
+
+import { useLocalFormat } from './use-local-format.js';
+
+export interface SortedLanguage {
+    code: string;
+    label: string;
+}
+
+/**
+ * @description
+ * This hook takes an array of language codes and returns a sorted array of language objects
+ * with code and localized label, sorted alphabetically by the label.
+ *
+ * @example
+ * ```ts
+ * const sortedLanguages = useSortedLanguages(['en', 'fr', 'de']);
+ * // Returns: [{ code: 'de', label: 'German' }, { code: 'en', label: 'English' }, { code: 'fr', label: 'French' }]
+ * ```
+ *
+ * @param availableLanguages - Array of language codes to sort
+ * @returns Sorted array of language objects with code and label
+ *
+ * @docsCategory hooks
+ * @docsPage useSortedLanguages
+ * @docsWeight 0
+ */
+export function useSortedLanguages(availableLanguages?: string[] | null): SortedLanguage[] {
+    const { formatLanguageName } = useLocalFormat();
+
+    return useMemo(
+        () =>
+            (availableLanguages ?? [])
+                .map(code => ({
+                    code,
+                    label: formatLanguageName(code),
+                }))
+                .sort((a, b) => a.label.localeCompare(b.label)),
+        [availableLanguages, formatLanguageName],
+    );
+}

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

@@ -0,0 +1,10 @@
+import { ThemeProviderContext } from '@/vdb/providers/theme-provider.js';
+import { useContext } from 'react';
+
+export const useTheme = () => {
+    const context = useContext(ThemeProviderContext);
+
+    if (context === undefined) throw new Error('useTheme must be used within a ThemeProvider');
+
+    return context;
+};

package/src/lib/hooks/use-ui-language-loader.ts

@@ -0,0 +1,30 @@
+import { loadI18nMessages } from '@/vdb/lib/load-i18n-messages.js';
+import { useLingui } from '@lingui/react/macro';
+
+let currentlyLoading: string | null = null;
+
+/**
+ * @description
+ * Loads the UI translations for the given locale and activates it
+ * with the Lingui I18nProvider. Generally this is used internally
+ * when the display language is set via the user > language dialog.
+ *
+ * @docsCategory hooks
+ * @docsPage useUiLanguageLoader
+ */
+export function useUiLanguageLoader() {
+    const { i18n } = useLingui();
+
+    async function loadAndActivateLocale(locale: string) {
+        if (currentlyLoading === locale) {
+            return;
+        }
+        currentlyLoading = locale;
+        const messages = await loadI18nMessages(locale);
+        i18n.load(locale, messages);
+        i18n.activate(locale);
+        currentlyLoading = null;
+    }
+
+    return { loadAndActivateLocale };
+}

package/src/lib/hooks/use-user-settings.tsx

@@ -0,0 +1,12 @@
+import { UserSettingsContext } from '@/vdb/providers/user-settings.js';
+import { useContext } from 'react';
+
+// Hook to use the user settings
+
+export const useUserSettings = () => {
+    const context = useContext(UserSettingsContext);
+    if (context === undefined) {
+        throw new Error('useUserSettings must be used within a UserSettingsProvider');
+    }
+    return context;
+};

package/src/lib/hooks/use-widget-dimensions.ts

@@ -0,0 +1,12 @@
+import { WidgetContentContext } from '@/vdb/framework/dashboard-widget/base-widget.js';
+import { useLingui } from '@lingui/react/macro';
+import { useContext } from 'react';
+
+export const useWidgetDimensions = () => {
+    const { t } = useLingui();
+    const context = useContext(WidgetContentContext);
+    if (!context) {
+        throw new Error(t`useWidgetDimensions must be used within a DashboardBaseWidget`);
+    }
+    return context;
+};

package/src/lib/hooks/use-widget-filters.ts

@@ -0,0 +1,21 @@
+'use client';
+import { WidgetFiltersContext } from '@/vdb/framework/dashboard-widget/widget-filters-context.js';
+import { useLingui } from '@lingui/react/macro';
+import { useContext } from 'react';
+
+/**
+ * @description
+ * Exposes a context object for use in building Insights page widgets.
+ *
+ * @docsCategory hooks
+ * @docsPage useWidgetFilters
+ * @since 3.5.0
+ */
+export function useWidgetFilters() {
+    const { t } = useLingui();
+    const context = useContext(WidgetFiltersContext);
+    if (context === undefined) {
+        throw new Error(t`useWidgetFilters must be used within a WidgetFiltersProvider`);
+    }
+    return context;
+}