@vendure/dashboard 3.4.3-master-202509260228 → 3.5.0-minor-202510012036

package/src/lib/components/shared/facet-value-selector.tsx

@@ -10,7 +10,7 @@ import {
 import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
 import { api } from '@/vdb/graphql/api.js';
 import { graphql } from '@/vdb/graphql/graphql.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
 import { useDebounce } from '@uidotdev/usehooks';
 import { ChevronRight, Loader2, Plus } from 'lucide-react';
@@ -41,9 +41,9 @@ interface FacetValueSelectorProps {
     /**
      * @description
      * The function to call when a facet value is selected.
-     * 
+     *
      * The `value` will have the following structure:
-     * 
+     *
      * ```ts
      * {
      *     id: string;
@@ -71,7 +71,7 @@ interface FacetValueSelectorProps {
     /**
      * @description
      * The number of facet values to display per page.
-     * 
+     *
      * @default 4
      */
     pageSize?: number;
@@ -129,7 +129,7 @@ const getFacetValuesForFacetDocument = graphql(`
 /**
  * @description
  * A component for selecting facet values.
- * 
+ *
  * @example
  * ```tsx
  * <FacetValueSelector onValueSelect={onValueSelectHandler} disabled={disabled} />
@@ -141,11 +141,11 @@ const getFacetValuesForFacetDocument = graphql(`
  * @since 3.4.0
  */
 export function FacetValueSelector({
-    onValueSelect,
-    disabled,
-    placeholder = 'Search facet values...',
-    pageSize = 4,
-}: FacetValueSelectorProps) {
+                                       onValueSelect,
+                                       disabled,
+                                       placeholder = 'Search facet values...',
+                                       pageSize = 4,
+                                   }: FacetValueSelectorProps) {
     const [open, setOpen] = useState(false);
     const [searchTerm, setSearchTerm] = useState('');
     const [expandedFacetId, setExpandedFacetId] = useState<string | null>(null);

package/src/lib/components/shared/history-timeline/history-note-checkbox.tsx

@@ -1,5 +1,5 @@
 import { Checkbox } from '@/vdb/components/ui/checkbox.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 
 interface HistoryNoteCheckboxProps {
     value: boolean;

package/src/lib/components/shared/history-timeline/history-note-editor.tsx

@@ -8,7 +8,7 @@ import {
     DialogTitle,
 } from '@/vdb/components/ui/dialog.js';
 import { Textarea } from '@/vdb/components/ui/textarea.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { useState } from 'react';
 import { HistoryNoteCheckbox } from './history-note-checkbox.js';
 

package/src/lib/components/shared/history-timeline/history-note-entry.tsx

@@ -8,7 +8,7 @@ import {
 } from '@/vdb/components/ui/dropdown-menu.js';
 import { Separator } from '@/vdb/components/ui/separator.js';
 import { HistoryEntry, HistoryEntryProps } from '@/vdb/framework/history-entry/history-entry.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { MoreVerticalIcon, PencilIcon, TrashIcon } from 'lucide-react';
 
 interface HistoryNoteEntryProps extends Readonly<HistoryEntryProps> {

package/src/lib/components/shared/language-selector.tsx

@@ -1,7 +1,7 @@
 import { api } from '@/vdb/graphql/api.js';
 import { graphql } from '@/vdb/graphql/graphql.js';
 import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
-import { useLingui } from '@/vdb/lib/trans.js';
+import { useLingui } from '@lingui/react/macro';
 import { useQuery } from '@tanstack/react-query';
 import { MultiSelect } from './multi-select.js';
 
@@ -28,7 +28,7 @@ export function LanguageSelector<T extends boolean>(props: LanguageSelectorProps
     });
     const { formatLanguageName } = useLocalFormat();
     const { value, onChange, multiple, availableLanguageCodes } = props;
-    const { i18n } = useLingui();
+    const { t } = useLingui();
 
     const items = (availableLanguageCodes ?? data?.globalSettings.availableLanguages ?? []).map(language => ({
         value: language,
@@ -41,8 +41,8 @@ export function LanguageSelector<T extends boolean>(props: LanguageSelectorProps
             onChange={onChange}
             multiple={multiple}
             items={items}
-            placeholder={i18n.t('Select a language')}
-            searchPlaceholder={i18n.t('Search languages...')}
+            placeholder={t`Select a language`}
+            searchPlaceholder={t`Search languages...`}
         />
     );
 }

package/src/lib/components/shared/navigation-confirmation.tsx

@@ -1,4 +1,4 @@
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { useBlocker } from '@tanstack/react-router';
 import { UseFormReturn } from 'react-hook-form';
 

package/src/lib/components/shared/paginated-list-data-table.tsx

@@ -1,18 +1,20 @@
-import { DataTable, FacetedFilter } from '\@/vdb/components/data-table/data-table.js';
-import { getObjectPathToPaginatedList } from '\@/vdb/framework/document-introspection/get-document-structure.js';
-import { useListQueryFields } from '\@/vdb/framework/document-introspection/hooks.js';
-import { api } from '\@/vdb/graphql/api.js';
+import { DataTable, FacetedFilter } from '@/vdb/components/data-table/data-table.js';
+import { getObjectPathToPaginatedList } from '@/vdb/framework/document-introspection/get-document-structure.js';
+import { useListQueryFields } from '@/vdb/framework/document-introspection/hooks.js';
+import { api } from '@/vdb/graphql/api.js';
 import { keepPreviousData, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useDebounce } from '@uidotdev/usehooks';
 
-import { BulkAction } from '\@/vdb/framework/extension-api/types/index.js';
-import { ResultOf } from '\@/vdb/graphql/graphql.js';
-import { useExtendedListQuery } from '\@/vdb/hooks/use-extended-list-query.js';
+import { addCustomFields } from '@/vdb/framework/document-introspection/add-custom-fields.js';
+import { includeOnlySelectedListFields } from '@/vdb/framework/document-introspection/include-only-selected-list-fields.js';
+import { BulkAction } from '@/vdb/framework/extension-api/types/index.js';
+import { ResultOf } from '@/vdb/graphql/graphql.js';
+import { useExtendedListQuery } from '@/vdb/hooks/use-extended-list-query.js';
 import { TypedDocumentNode } from '@graphql-typed-document-node/core';
 import { ColumnFiltersState, ColumnSort, SortingState, Table } from '@tanstack/react-table';
 import { ColumnDef, Row, TableOptions, VisibilityState } from '@tanstack/table-core';
 import React from 'react';
-import { getColumnVisibility } from '../data-table/data-table-utils.js';
+import { getColumnVisibility, getStandardizedDefaultColumnOrder } from '../data-table/data-table-utils.js';
 import { useGeneratedColumns } from '../data-table/use-generated-columns.js';
 
 // Type that identifies a paginated list structure (has items array and totalItems)
@@ -87,8 +89,23 @@ export type AllItemFieldKeys<T extends TypedDocumentNode<any, any>> =
     | keyof PaginatedListItemFields<T>
     | CustomFieldKeysOfItem<PaginatedListItemFields<T>>;
 
+export type ColumnDefWithMetaDependencies<T extends TypedDocumentNode<any, any>> = Partial<
+    ColumnDef<T, any>
+> & {
+    meta?: {
+        /**
+         * @description
+         * Columns that rely on _other_ columns in order to correctly render,
+         * can declare those other columns as dependencies in order to ensure that
+         * those columns are always fetched, even when those columns are not explicitly
+         * included in the visible table columns.
+         */
+        dependencies?: Array<AllItemFieldKeys<T>>;
+    };
+};
+
 export type CustomizeColumnConfig<T extends TypedDocumentNode<any, any>> = {
-    [Key in AllItemFieldKeys<T>]?: Partial<ColumnDef<PaginatedListItemFields<T>, any>>;
+    [Key in AllItemFieldKeys<T>]?: ColumnDefWithMetaDependencies<PaginatedListItemFields<T>>;
 };
 
 export type FacetedFilterConfig<T extends TypedDocumentNode<any, any>> = {
@@ -132,7 +149,7 @@ export type ListQueryOptionsShape = {
 };
 
 export type AdditionalColumns<T extends TypedDocumentNode<any, any>> = {
-    [key: string]: ColumnDef<PaginatedListItemFields<T>>;
+    [key: string]: ColumnDefWithMetaDependencies<PaginatedListItemFields<T>>;
 };
 
 export interface PaginatedListContext {
@@ -365,7 +382,7 @@ export function PaginatedListDataTable<
     const [searchTerm, setSearchTerm] = React.useState<string>('');
     const debouncedSearchTerm = useDebounce(searchTerm, 500);
     const queryClient = useQueryClient();
-    const extendedListQuery = useExtendedListQuery(listQuery);
+    const extendedListQuery = useExtendedListQuery(addCustomFields(listQuery));
 
     const sort = sorting?.reduce((acc: any, sort: ColumnSort) => {
         const direction = sort.desc ? 'DESC' : 'ASC';
@@ -388,9 +405,43 @@ export function PaginatedListDataTable<
           }
         : undefined;
 
+    function refetchPaginatedList() {
+        queryClient.invalidateQueries({ queryKey });
+    }
+
+    registerRefresher?.(refetchPaginatedList);
+
+    // First we get info on _all_ the fields, including all custom fields, for the
+    // purpose of configuring the table columns.
+    const fields = useListQueryFields(extendedListQuery);
+    const paginatedListObjectPath = getObjectPathToPaginatedList(extendedListQuery);
+
+    const { columns, customFieldColumnNames } = useGeneratedColumns({
+        fields,
+        customizeColumns,
+        rowActions,
+        bulkActions,
+        deleteMutation,
+        additionalColumns,
+        defaultColumnOrder: getStandardizedDefaultColumnOrder(defaultColumnOrder),
+    });
+    const columnVisibility = getColumnVisibility(columns, defaultVisibility, customFieldColumnNames);
+    // Get the actual visible columns and only fetch those
+    const visibleColumns = columns
+        // Filter out invisible columns, but _always_ select "id"
+        // because it is usually needed.
+        .filter(c => columnVisibility[c.id as string] !== false || c.id === 'id')
+        .map(c => ({
+            name: c.id as string,
+            isCustomField: (c.meta as any)?.isCustomField ?? false,
+            dependencies: (c.meta as any)?.dependencies ?? [],
+        }));
+    const minimalListQuery = includeOnlySelectedListFields(extendedListQuery, visibleColumns);
+
     const defaultQueryKey = [
         PaginatedListDataTableKey,
-        extendedListQuery,
+        minimalListQuery,
+        visibleColumns,
         page,
         itemsPerPage,
         sorting,
@@ -399,12 +450,6 @@ export function PaginatedListDataTable<
     ];
     const queryKey = transformQueryKey ? transformQueryKey(defaultQueryKey) : defaultQueryKey;
 
-    function refetchPaginatedList() {
-        queryClient.invalidateQueries({ queryKey });
-    }
-
-    registerRefresher?.(refetchPaginatedList);
-
     const { data, isFetching } = useQuery({
         queryFn: () => {
             const searchFilter = onSearchTermChange ? onSearchTermChange(debouncedSearchTerm) : {};
@@ -419,31 +464,16 @@ export function PaginatedListDataTable<
             } as V;
 
             const transformedVariables = transformVariables ? transformVariables(variables) : variables;
-            return api.query(extendedListQuery, transformedVariables);
+            return api.query(minimalListQuery, transformedVariables);
         },
         queryKey,
         placeholderData: keepPreviousData,
     });
-
-    const fields = useListQueryFields(extendedListQuery);
-    const paginatedListObjectPath = getObjectPathToPaginatedList(extendedListQuery);
-
     let listData = data as any;
     for (const path of paginatedListObjectPath) {
         listData = listData?.[path];
     }
 
-    const { columns, customFieldColumnNames } = useGeneratedColumns({
-        fields,
-        customizeColumns,
-        rowActions,
-        bulkActions,
-        deleteMutation,
-        additionalColumns,
-        defaultColumnOrder,
-    });
-
-    const columnVisibility = getColumnVisibility(fields, defaultVisibility, customFieldColumnNames);
     const transformedData =
         typeof transformData === 'function' ? transformData(listData?.items ?? []) : (listData?.items ?? []);
     return (

package/src/lib/components/shared/remove-from-channel-bulk-action.tsx

@@ -6,7 +6,7 @@ import { DataTableBulkActionItem } from '@/vdb/components/data-table/data-table-
 import { usePaginatedList } from '@/vdb/components/shared/paginated-list-data-table.js';
 import { ResultOf } from '@/vdb/graphql/graphql.js';
 import { useChannel } from '@/vdb/hooks/use-channel.js';
-import { Trans, useLingui } from '@/vdb/lib/trans.js';
+import { Trans, useLingui } from '@lingui/react/macro';
 
 interface RemoveFromChannelBulkActionProps {
     selection: any[];
@@ -43,22 +43,23 @@ export function RemoveFromChannelBulkAction({
 }: Readonly<RemoveFromChannelBulkActionProps>) {
     const { refetchPaginatedList } = usePaginatedList();
     const { activeChannel } = useChannel();
-    const { i18n } = useLingui();
+    const { t } = useLingui();
+    const selectionLength = selection.length;
     const { mutate } = useMutation({
         mutationFn,
         onSuccess: result => {
             const message =
-                successMessage ||
-                i18n.t(`Successfully removed ${selection.length} ${entityType} from channel`);
+                successMessage || t`Successfully removed ${selectionLength} ${entityType} from channel`;
             toast.success(message);
             refetchPaginatedList();
             table.resetRowSelection();
             onSuccess?.(result);
         },
         onError: error => {
+            const onErrorMessage = error.message;
             const message =
                 errorMessage ||
-                `Failed to remove ${selection.length} ${entityType} from channel: ${error.message}`;
+                `Failed to remove ${selectionLength} ${entityType} from channel: ${onErrorMessage}`;
             toast.error(message);
         },
     });

package/src/lib/components/shared/rich-text-editor/image-dialog.tsx

@@ -1,4 +1,4 @@
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { SetImageOptions } from '@tiptap/extension-image';
 import { Editor } from '@tiptap/react';
 import { ImageIcon, PaperclipIcon } from 'lucide-react';

package/src/lib/components/shared/rich-text-editor/link-dialog.tsx

@@ -1,4 +1,4 @@
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { Editor } from '@tiptap/react';
 import { useEffect, useState } from 'react';
 import { Button } from '../../ui/button.js';

package/src/lib/components/shared/rich-text-editor/responsive-toolbar.tsx

@@ -1,4 +1,4 @@
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { Editor } from '@tiptap/react';
 import {
     BoldIcon,

package/src/lib/components/shared/rich-text-editor/table-edit-icons.tsx

@@ -1,4 +1,4 @@
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { Editor } from '@tiptap/react';
 import { MoreHorizontalIcon, MoreVerticalIcon } from 'lucide-react';
 import { useEffect, useState } from 'react';

package/src/lib/components/shared/role-code-label.tsx

@@ -1,5 +1,5 @@
 import { CUSTOMER_ROLE_CODE, SUPER_ADMIN_ROLE_CODE } from '@/vdb/constants.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 
 export function RoleCodeLabel({ code }: Readonly<{ code: string }> | Readonly<{ code: undefined }>) {
     return code === SUPER_ADMIN_ROLE_CODE ? (

package/src/lib/components/shared/role-selector.tsx

@@ -1,6 +1,6 @@
 import { api } from '@/vdb/graphql/api.js';
 import { graphql } from '@/vdb/graphql/graphql.js';
-import { useLingui } from '@/vdb/lib/trans.js';
+import { useLingui } from '@lingui/react/macro';
 import { useQuery } from '@tanstack/react-query';
 import { MultiSelect } from './multi-select.js';
 
@@ -24,7 +24,7 @@ export interface RoleSelectorProps<T extends boolean> {
 
 export function RoleSelector<T extends boolean>(props: RoleSelectorProps<T>) {
     const { value, onChange, multiple } = props;
-    const { i18n } = useLingui();
+    const { t } = useLingui();
 
     const { data } = useQuery({
         queryKey: ['roles'],
@@ -49,8 +49,8 @@ export function RoleSelector<T extends boolean>(props: RoleSelectorProps<T>) {
             onChange={onChange}
             multiple={multiple}
             items={items}
-            placeholder={i18n.t('Select a role')}
-            searchPlaceholder={i18n.t('Search roles...')}
+            placeholder={t`Select a role`}
+            searchPlaceholder={t`Search roles...`}
         />
     );
 }

package/src/lib/components/shared/seller-selector.tsx

@@ -9,7 +9,7 @@ import {
 import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
 import { api } from '@/vdb/graphql/api.js';
 import { graphql } from '@/vdb/graphql/graphql.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { useQuery } from '@tanstack/react-query';
 import { Plus } from 'lucide-react';
 import { useState } from 'react';

package/src/lib/components/shared/stock-level-label.tsx

@@ -1,4 +1,4 @@
-import { useLingui } from '../../lib/trans.js';
+import { useLingui } from '@lingui/react/macro';
 
 export type StockLevel = {
     stockOnHand: number;
@@ -6,7 +6,7 @@ export type StockLevel = {
 };
 
 export function StockLevelLabel({ stockLevels }: Readonly<{ stockLevels: StockLevel[] }>) {
-    const { i18n } = useLingui();
+    const { t } = useLingui();
 
     if (!Array.isArray(stockLevels)) {
         return null;
@@ -15,9 +15,7 @@ export function StockLevelLabel({ stockLevels }: Readonly<{ stockLevels: StockLe
     const totalAllocated = stockLevels.reduce((acc, curr) => acc + curr.stockAllocated, 0);
 
     return (
-        <span
-            title={`${i18n.t('Stock on hand')}: ${totalOnHand}, ${i18n.t('Stock allocated')}: ${totalAllocated}`}
-        >
+        <span title={`${t`Stock on hand`}: ${totalOnHand}, ${t`Stock allocated`}: ${totalAllocated}`}>
             {totalOnHand} <span className="text-muted-foreground">/ {totalAllocated}</span>
         </span>
     );

package/src/lib/components/shared/table-cell/order-table-cell-components.tsx

@@ -2,6 +2,7 @@ import { Money } from '@/vdb/components/data-display/money.js';
 import { DataTableCellComponent } from '@/vdb/components/data-table/types.js';
 import { Badge } from '@/vdb/components/ui/badge.js';
 import { Button } from '@/vdb/components/ui/button.js';
+import { useDynamicTranslations } from '@/vdb/hooks/use-dynamic-translations.js';
 import { Link } from '@tanstack/react-router';
 
 type CustomerCellData = {
@@ -27,8 +28,9 @@ export const CustomerCell: DataTableCellComponent<CustomerCellData> = ({ row })
 };
 
 export const OrderStateCell: DataTableCellComponent<{ state: string }> = ({ row }) => {
+    const { getTranslatedOrderState } = useDynamicTranslations();
     const value = row.original.state;
-    return <Badge variant="outline">{value}</Badge>;
+    return <Badge variant="outline">{getTranslatedOrderState(value)}</Badge>;
 };
 
 export const OrderMoneyCell: DataTableCellComponent<{ currencyCode: string }> = ({ cell, row }) => {

package/src/lib/components/shared/tax-category-selector.tsx

@@ -8,7 +8,7 @@ import {
 } from '@/vdb/components/ui/select.js';
 import { api } from '@/vdb/graphql/api.js';
 import { graphql } from '@/vdb/graphql/graphql.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { useQuery } from '@tanstack/react-query';
 import { Skeleton } from '../ui/skeleton.js';
 

package/src/lib/components/shared/translatable-form-field.tsx

@@ -2,7 +2,7 @@ import { OverriddenFormComponent } from '@/vdb/framework/form-engine/overridden-
 import { LocationWrapper } from '@/vdb/framework/layout-engine/location-wrapper.js';
 import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
 import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { Controller, ControllerProps, FieldPath, FieldValues } from 'react-hook-form';
 import { FormControl, FormDescription, FormItem, FormLabel, FormMessage } from '../ui/form.js';
 import { FormFieldWrapper } from './form-field-wrapper.js';
@@ -35,17 +35,17 @@ export type TranslatableFormFieldProps<TFieldValues extends TranslatableEntity |
     name: TFieldValues extends TranslatableEntity
         ? keyof Omit<NonNullable<TFieldValues['translations']>[number], 'languageCode'>
         : TFieldValues extends TranslatableEntity[]
-          ? keyof Omit<NonNullable<TFieldValues[number]['translations']>[number], 'languageCode'>
-          : never;
+            ? keyof Omit<NonNullable<TFieldValues[number]['translations']>[number], 'languageCode'>
+            : never;
 };
 
 export const TranslatableFormField = <
     TFieldValues extends TranslatableEntity | TranslatableEntity[] = TranslatableEntity,
 >({
-    name,
-    label,
-    ...props
-}: TranslatableFormFieldProps<TFieldValues>) => {
+      name,
+      label,
+      ...props
+  }: TranslatableFormFieldProps<TFieldValues>) => {
     const { formatLanguageName } = useLocalFormat();
     const { contentLanguage } = useUserSettings().settings;
     const formValues = props.control?._formValues;
@@ -76,7 +76,7 @@ export type TranslatableFormFieldWrapperProps<
 /**
  * @description
  * This is the equivalent of the {@link FormFieldWrapper} component, but for translatable fields.
- * 
+ *
  * @example
  * ```tsx
  * <PageBlock column="main" blockId="main-form">
@@ -112,13 +112,13 @@ export type TranslatableFormFieldWrapperProps<
 export const TranslatableFormFieldWrapper = <
     TFieldValues extends TranslatableEntity | TranslatableEntity[] = TranslatableEntity,
 >({
-    name,
-    label,
-    description,
-    render,
-    renderFormControl,
-    ...props
-}: TranslatableFormFieldWrapperProps<TFieldValues>) => {
+      name,
+      label,
+      description,
+      render,
+      renderFormControl,
+      ...props
+  }: TranslatableFormFieldWrapperProps<TFieldValues>) => {
     return (
         <LocationWrapper identifier={name as string}>
             <TranslatableFormField

package/src/lib/components/shared/zone-selector.tsx

@@ -8,7 +8,7 @@ import {
 } from '@/vdb/components/ui/select.js';
 import { api } from '@/vdb/graphql/api.js';
 import { graphql } from '@/vdb/graphql/graphql.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { useQuery } from '@tanstack/react-query';
 import { Skeleton } from '../ui/skeleton.js';
 

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

@@ -23,7 +23,7 @@ const buttonVariants = cva(
                 lg: 'h-10 rounded-md px-8',
                 icon: 'h-9 w-9',
                 xs: 'h-5 rounded-md px-2 text-xs',
-                'icon-sm': 'h-7 w-7 text-xs',
+                'icon-sm': 'h-8 w-8 text-xs',
                 'icon-xs': 'h-5 w-5 text-xs',
             },
         },

package/src/lib/framework/dashboard-widget/base-widget.tsx

@@ -1,6 +1,7 @@
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/vdb/components/ui/card.js';
 import { DashboardBaseWidgetProps } from '@/vdb/framework/extension-api/types/index.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
+import { useLingui } from '@lingui/react/macro';
 import { cn } from '@/vdb/lib/utils.js';
 import { createContext, useContext, useEffect, useRef, useState } from 'react';
 
@@ -12,21 +13,22 @@ type WidgetDimensions = {
 export const WidgetContentContext = createContext<WidgetDimensions>({ width: 0, height: 0 });
 
 export const useWidgetDimensions = () => {
+    const { t } = useLingui();
     const context = useContext(WidgetContentContext);
     if (!context) {
-        throw new Error('useWidgetDimensions must be used within a DashboardBaseWidget');
+        throw new Error(t`useWidgetDimensions must be used within a DashboardBaseWidget`);
     }
     return context;
 };
 
 export function DashboardBaseWidget({
-    id,
-    config,
-    children,
-    title,
-    description,
-    actions,
-}: DashboardBaseWidgetProps) {
+                                        id,
+                                        config,
+                                        children,
+                                        title,
+                                        description,
+                                        actions,
+                                    }: DashboardBaseWidgetProps) {
     const headerRef = useRef<HTMLDivElement>(null);
     const wrapperRef = useRef<HTMLDivElement>(null);
     const contentRef = useRef<HTMLDivElement>(null);