@vendure/dashboard 3.2.0

package/src/lib/graphql/graphql.ts

@@ -0,0 +1,15 @@
+import type { introspection } from './graphql-env.d.ts';
+import { initGraphQLTada } from 'gql.tada';
+
+export const graphql = initGraphQLTada<{
+    disableMasking: true;
+    introspection: introspection;
+    scalars: {
+        DateTime: string;
+        JSON: any;
+        Money: number;
+    };
+}>();
+
+export type { FragmentOf, ResultOf, VariablesOf } from 'gql.tada';
+export { readFragment } from 'gql.tada';

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { AuthContext } from '../providers/auth.js';
+
+
+export function useAuth() {
+    const context = React.useContext(AuthContext);
+    if (!context) {
+        throw new Error('useAuth must be used within an AuthProvider');
+    }
+    return context;
+}

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

@@ -0,0 +1,12 @@
+import { ChannelContext } from '@/providers/channel-provider.js';
+import * as React from 'react';
+
+// Hook to use the channel context
+
+export function useChannel() {
+    const context = React.useContext(ChannelContext);
+    if (context === undefined) {
+        throw new Error('useChannel must be used within a ChannelProvider');
+    }
+    return context;
+}

package/src/lib/hooks/use-custom-field-config.ts

@@ -0,0 +1,10 @@
+import { useServerConfig } from './use-server-config.js';
+
+export function useCustomFieldConfig(entityType: string) {
+    const serverConfig = useServerConfig();
+    if (!serverConfig) {
+        return [];
+    }
+    const customFieldConfig = serverConfig.entityCustomFields.find(field => field.entityName === entityType);
+    return customFieldConfig?.customFields;
+}

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

@@ -0,0 +1,54 @@
+import { useServerConfig } from '@/hooks/use-server-config.js';
+import { ServerConfig } from '@/providers/server-config.js';
+import { useMemo } from 'react';
+
+export function useGroupedPermissions() {
+    const serverConfig = useServerConfig();
+    const permissionDefinitions = serverConfig?.permissions ?? [];
+    const extractCrudDescription = (def: ServerConfig['permissions'][number]): string => {
+        return def.description.replace(/Grants permission to [\w]+/, 'Grants permissions on');
+    };
+
+    const groupedPermissions = useMemo(() => {
+        const crudGroups = new Map<string, ServerConfig['permissions']>();
+        const nonCrud: ServerConfig['permissions'] = [];
+        const crudRe = /^(Create|Read|Update|Delete)([a-zA-Z]+)$/;
+
+        for (const def of permissionDefinitions) {
+            const isCrud = crudRe.test(def.name);
+            if (isCrud) {
+                const groupName = def.name.match(crudRe)?.[2];
+                if (groupName) {
+                    const existing = crudGroups.get(groupName);
+                    if (existing) {
+                        existing.push(def);
+                    } else {
+                        crudGroups.set(groupName, [def]);
+                    }
+                }
+            } else if (def.assignable) {
+                nonCrud.push(def);
+            }
+        }
+
+        return [
+            ...nonCrud.map(d => ({
+                label: d.name,
+                description: d.description,
+                permissions: [d],
+            })),
+            ...Array.from(crudGroups.entries()).map(([label, defs]) => ({
+                label,
+                description: extractCrudDescription(defs[0]),
+                permissions: defs.sort((a, b) => a.name.localeCompare(b.name)),
+            })),
+        ]
+            .sort((a, b) => a.label.localeCompare(b.label))
+            .map(d => ({
+                ...d,
+                id: `section-${d.label.toLowerCase().replace(/ /g, '-')}`,
+            }));
+    }, [permissionDefinitions]);
+
+    return groupedPermissions;
+}

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

@@ -0,0 +1,119 @@
+import { useLingui } from '@lingui/react';
+import { useCallback, useMemo } from 'react';
+
+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();
+ * ```
+ */
+export function useLocalFormat() {
+    const { moneyStrategyPrecision } = useServerConfig() ?? { moneyStrategyPrecision: 2 };
+    const precisionFactor = useMemo(() => Math.pow(10, moneyStrategyPrecision), [moneyStrategyPrecision]);
+    const locale = 'en';
+
+    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 formatLanguageName = useCallback(
+        (value: string): string => {
+            try {
+                return (
+                    new Intl.DisplayNames([locale], { type: 'language' }).of(value.replace('_', '-')) ?? 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,
+        formatLanguageName,
+        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.tsx

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

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

@@ -0,0 +1,22 @@
+import { useAuth } from '@/hooks/use-auth.js';
+import { Permission } from '@vendure/common/lib/generated-types';
+
+import { useUserSettings } from './use-user-settings.js';
+
+export function usePermissions() {
+    const { channels } = useAuth();
+    const { settings } = useUserSettings();
+
+    function hasPermissions(permissions: string[]) {
+        if (permissions.length === 0) {
+            return true;
+        }
+        const activeChannel = (channels ?? []).find(channel => channel.id === settings.activeChannelId);
+        if (!activeChannel) {
+            return false;
+        }
+        return permissions.some(permission => activeChannel.permissions.includes(permission as Permission));
+    }
+
+    return { hasPermissions };
+}

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

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

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

@@ -0,0 +1,10 @@
+import { ThemeProviderContext } from '@/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-user-settings.tsx

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import { UserSettingsContext } from '../providers/user-settings.js';
+
+// 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/index.ts

@@ -0,0 +1,149 @@
+// This file is auto-generated. Do not edit manually.
+// Generated on: 2025-03-28T08:23:55.325Z
+
+export * from './components/data-display/boolean.js';
+export * from './components/data-display/date-time.js';
+export * from './components/data-display/money.js';
+export * from './components/data-input/affixed-input.js';
+export * from './components/data-input/customer-group-input.js';
+export * from './components/data-input/datetime-input.js';
+export * from './components/data-input/facet-value-input.js';
+export * from './components/data-input/money-input.js';
+export * from './components/data-input/richt-text-input.js';
+export * from './components/data-table/data-table-column-header.js';
+export * from './components/data-table/data-table-faceted-filter.js';
+export * from './components/data-table/data-table-filter-dialog.js';
+export * from './components/data-table/data-table-pagination.js';
+export * from './components/data-table/data-table-view-options.js';
+export * from './components/data-table/data-table.js';
+export * from './components/layout/app-layout.js';
+export * from './components/layout/app-sidebar.js';
+export * from './components/layout/channel-switcher.js';
+export * from './components/layout/content-language-selector.js';
+export * from './components/layout/generated-breadcrumbs.js';
+export * from './components/layout/language-dialog.js';
+export * from './components/layout/nav-main.js';
+export * from './components/layout/nav-projects.js';
+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/assigned-facet-values.js';
+export * from './components/shared/channel-code-label.js';
+export * from './components/shared/channel-selector.js';
+export * from './components/shared/configurable-operation-arg-input.js';
+export * from './components/shared/configurable-operation-input.js';
+export * from './components/shared/confirmation-dialog.js';
+export * from './components/shared/copyable-text.js';
+export * from './components/shared/country-selector.js';
+export * from './components/shared/currency-selector.js';
+export * from './components/shared/custom-fields-form.js';
+export * from './components/shared/customer-group-chip.js';
+export * from './components/shared/customer-group-selector.js';
+export * from './components/shared/customer-selector.js';
+export * from './components/shared/detail-page-button.js';
+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';
+export * from './components/shared/history-timeline/history-note-editor.js';
+export * from './components/shared/history-timeline/history-note-input.js';
+export * from './components/shared/history-timeline/history-timeline.js';
+export * from './components/shared/icon-mark.js';
+export * from './components/shared/language-selector.js';
+export * from './components/shared/logo-mark.js';
+export * from './components/shared/multi-select.js';
+export * from './components/shared/paginated-list-data-table.js';
+export * from './components/shared/permission-guard.js';
+export * from './components/shared/rich-text-editor.js';
+export * from './components/shared/role-code-label.js';
+export * from './components/shared/role-selector.js';
+export * from './components/shared/seller-selector.js';
+export * from './components/shared/tax-category-selector.js';
+export * from './components/shared/translatable-form-field.js';
+export * from './components/shared/vendure-image.js';
+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';
+export * from './components/ui/calendar.js';
+export * from './components/ui/card.js';
+export * from './components/ui/checkbox.js';
+export * from './components/ui/collapsible.js';
+export * from './components/ui/command.js';
+export * from './components/ui/dialog.js';
+export * from './components/ui/dropdown-menu.js';
+export * from './components/ui/form.js';
+export * from './components/ui/hover-card.js';
+export * from './components/ui/input.js';
+export * from './components/ui/label.js';
+export * from './components/ui/pagination.js';
+export * from './components/ui/popover.js';
+export * from './components/ui/scroll-area.js';
+export * from './components/ui/select.js';
+export * from './components/ui/separator.js';
+export * from './components/ui/sheet.js';
+export * from './components/ui/sidebar.js';
+export * from './components/ui/skeleton.js';
+export * from './components/ui/sonner.js';
+export * from './components/ui/switch.js';
+export * from './components/ui/table.js';
+export * from './components/ui/tabs.js';
+export * from './components/ui/textarea.js';
+export * from './components/ui/tooltip.js';
+export * from './framework/component-registry/component-registry.js';
+export * from './framework/component-registry/dynamic-component.js';
+export * from './framework/dashboard-widget/base-widget.js';
+export * from './framework/dashboard-widget/latest-orders-widget/index.js';
+export * from './framework/dashboard-widget/latest-orders-widget/latest-orders-widget.graphql.js';
+export * from './framework/dashboard-widget/metrics-widget/chart.js';
+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/defaults.js';
+export * from './framework/document-introspection/add-custom-fields.js';
+export * from './framework/document-introspection/get-document-structure.js';
+export * from './framework/document-introspection/hooks.js';
+export * from './framework/extension-api/define-dashboard-extension.js';
+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/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';
+export * from './framework/page/list-page.js';
+export * from './framework/page/page-api.js';
+export * from './framework/page/page-types.js';
+export * from './framework/page/use-detail-page.js';
+export * from './framework/page/use-extended-router.js';
+export * from './hooks/use-auth.js';
+export * from './hooks/use-channel.js';
+export * from './hooks/use-custom-field-config.js';
+export * from './hooks/use-grouped-permissions.js';
+export * from './hooks/use-local-format.js';
+export * from './hooks/use-mobile.js';
+export * from './hooks/use-page.js';
+export * from './hooks/use-permissions.js';
+export * from './hooks/use-server-config.js';
+export * from './hooks/use-theme.js';
+export * from './hooks/use-user-settings.js';
+export * from './lib/utils.js';

package/src/lib/lib/trans.tsx

@@ -0,0 +1,16 @@
+/**
+ * This is a temporary work-around because the Lingui macros do not 
+ * currently work when the dashboard is packaged in an npm
+ * module. Related issue: https://github.com/kentcdodds/babel-plugin-macros/issues/87
+ */
+export function Trans({ children }: { children: React.ReactNode }) {
+    return <>{children}</>
+}
+
+export function useLingui() {
+    return {
+        i18n: {
+            t: (key: string) => key,
+        },
+    };
+}

package/src/lib/lib/utils.ts

@@ -0,0 +1,60 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs));
+}
+
+/**
+ * Converts a camelCase string to Title Case.
+ * Examples:
+ *   "firstName" -> "First Name"
+ *   "dateOfBirth" -> "Date Of Birth"
+ *   "totalItems" -> "Total Items"
+ */
+export function camelCaseToTitleCase(text: string): string {
+    if (!text) return '';
+
+    return (
+        text
+            // Insert space before capital letters
+            .replace(/([A-Z])/g, ' $1')
+            // Capitalize first character
+            .replace(/^./, str => str.toUpperCase())
+            // Handle the case where the string starts with a capital
+            .trim()
+    );
+}
+
+/**
+ * Formats a file size in bytes to a human-readable string.
+ */
+export function formatFileSize(bytes: number): string {
+    if (bytes === 0) return '0 Bytes';
+
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)).toString() + ' ' + sizes[i];
+}
+
+/**
+ * This is a copy of the normalizeString function from @vendure/common/lib/normalize-string.js
+ * It is duplicated here due to issues importing from that package
+ * inside the monorepo.
+ */
+export function normalizeString(input: string, spaceReplacer = ' '): string {
+    const multipleSequentialReplacerRegex = new RegExp(`([${spaceReplacer}]){2,}`, 'g');
+
+    return (input || '')
+        .normalize('NFD')
+        .replace(/[\u00df]/g, 'ss')
+        .replace(/[\u1e9e]/g, 'SS')
+        .replace(/[\u0308]/g, 'e')
+        .replace(/[\u0300-\u036f]/g, '')
+        .toLowerCase()
+        .replace(/[!"£$%^&*()+[\]{};:@#~?\\/,|><`¬'=‘’©®™]/g, '')
+        .replace(/\s+/g, spaceReplacer)
+        .replace(multipleSequentialReplacerRegex, spaceReplacer);
+}