@vendure/dashboard 3.2.0 → 3.2.1

package/src/lib/graphql/graphql.ts

@@ -1,15 +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';
+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

@@ -1,11 +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;
-}
+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

@@ -1,12 +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;
-}
+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

@@ -1,10 +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;
-}
+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

@@ -1,54 +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;
-}
+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

@@ -1,119 +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,
-    };
-}
+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

@@ -1,19 +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;
-}
+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

@@ -1,11 +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;
-}
+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

@@ -1,22 +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 };
-}
+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

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

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

@@ -1,10 +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;
-};
+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

@@ -1,12 +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;
-};
+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;
+};