@vendure/dashboard 3.2.4 → 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

@@ -32,6 +32,7 @@ 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/asset/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;

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[];

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

@@ -1,7 +1,7 @@
 import ts from 'typescript';
-import { describe, it, expect } from 'vitest';
+import { describe, expect, it } from 'vitest';
 
-import { getPluginInfo, findConfigExport } from './ast-utils.js';
+import { findConfigExport, getPluginInfo } from './ast-utils.js';
 
 describe('getPluginInfo', () => {
     it('should return undefined when no plugin class is found', () => {

package/vite/utils/schema-generator.ts

@@ -1,15 +1,14 @@
 import { GraphQLTypesLoader } from '@nestjs/graphql';
 import {
-    resetConfig,
-    setConfig,
     getConfig,
-    runPluginConfigurations,
     getFinalVendureSchema,
+    resetConfig,
+    runPluginConfigurations,
+    setConfig,
     VENDURE_ADMIN_API_TYPE_PATHS,
     VendureConfig,
 } from '@vendure/core';
-import { buildSchema } from 'graphql';
-import { GraphQLSchema } from 'graphql';
+import { buildSchema, GraphQLSchema } from 'graphql';
 
 let schemaPromise: Promise<GraphQLSchema> | undefined;
 

package/vite/utils/ui-config.ts

@@ -1,13 +1,17 @@
 import {
+    ADMIN_API_PATH,
     DEFAULT_AUTH_TOKEN_HEADER_KEY,
     DEFAULT_CHANNEL_TOKEN_KEY,
-    ADMIN_API_PATH,
 } from '@vendure/common/lib/shared-constants';
 import { AdminUiConfig } from '@vendure/common/lib/shared-types';
 import { VendureConfig } from '@vendure/core';
 
-import { defaultAvailableLocales } from '../constants.js';
-import { defaultLocale, defaultLanguage, defaultAvailableLanguages } from '../constants.js';
+import {
+    defaultAvailableLanguages,
+    defaultAvailableLocales,
+    defaultLanguage,
+    defaultLocale,
+} from '../constants.js';
 
 export function getAdminUiConfig(
     config: VendureConfig,

package/vite/vite-plugin-admin-api-schema.ts

@@ -1,14 +1,4 @@
-import { GraphQLTypesLoader } from '@nestjs/graphql';
 import {
-    getConfig,
-    getFinalVendureSchema,
-    resetConfig,
-    runPluginConfigurations,
-    setConfig,
-    VENDURE_ADMIN_API_TYPE_PATHS,
-} from '@vendure/core';
-import {
-    buildSchema,
     GraphQLList,
     GraphQLNonNull,
     GraphQLObjectType,

package/vite/vite-plugin-config.ts

@@ -8,6 +8,7 @@ export function viteConfigPlugin({ packageRoot }: { packageRoot: string }): Plug
             config.root = packageRoot;
             config.resolve = {
                 alias: {
+                    ...(config.resolve?.alias ?? {}),
                     '@': path.resolve(packageRoot, './src/lib'),
                 },
             };

package/src/lib/components/ui/avatar.tsx

@@ -1,38 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import * as AvatarPrimitive from '@radix-ui/react-avatar';
-
-import { cn } from '@/lib/utils.js';
-
-function Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>) {
-    return (
-        <AvatarPrimitive.Root
-            data-slot="avatar"
-            className={cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', className)}
-            {...props}
-        />
-    );
-}
-
-function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>) {
-    return (
-        <AvatarPrimitive.Image
-            data-slot="avatar-image"
-            className={cn('aspect-square size-full', className)}
-            {...props}
-        />
-    );
-}
-
-function AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
-    return (
-        <AvatarPrimitive.Fallback
-            data-slot="avatar-fallback"
-            className={cn('bg-muted flex size-full items-center justify-center rounded-full', className)}
-            {...props}
-        />
-    );
-}
-
-export { Avatar, AvatarImage, AvatarFallback };