@vendure/dashboard 3.3.6-master-202507020959 → 3.3.6-master-202507030234

package/src/app/routes/_authenticated/_zones/components/zone-countries-table.tsx

@@ -1,17 +1,21 @@
-import { DataTable } from '@/components/data-table/data-table.js';
-import { api } from '@/graphql/api.js';
+import { DataTable } from '@/vdb/components/data-table/data-table.js';
+import { CountrySelector } from '@/vdb/components/shared/country-selector.js';
+import { api } from '@/vdb/graphql/api.js';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { ColumnDef } from '@tanstack/react-table';
 import { useMemo, useState } from 'react';
-import { addCountryToZoneMutation, removeCountryFromZoneMutation, zoneMembersQuery } from '../zones.graphql.js';
-import { CountrySelector } from '@/components/shared/country-selector.js';
+import {
+    addCountryToZoneMutation,
+    removeCountryFromZoneMutation,
+    zoneMembersQuery,
+} from '../zones.graphql.js';
 
 interface ZoneCountriesTableProps {
     zoneId: string;
     canAddCountries?: boolean;
 }
 
-export function ZoneCountriesTable({ zoneId, canAddCountries = false }: ZoneCountriesTableProps) {
+export function ZoneCountriesTable({ zoneId, canAddCountries = false }: Readonly<ZoneCountriesTableProps>) {
     const { data, refetch } = useQuery({
         queryKey: ['zone', zoneId],
         queryFn: () => api.query(zoneMembersQuery, { zoneId }),
@@ -59,9 +63,9 @@ export function ZoneCountriesTable({ zoneId, canAddCountries = false }: ZoneCoun
                 columns={columns}
                 data={paginatedItems ?? []}
                 onPageChange={(table, page, itemsPerPage) => {
-                setPage(page);
-                setPageSize(itemsPerPage);
-            }}
+                    setPage(page);
+                    setPageSize(itemsPerPage);
+                }}
                 totalItems={data?.zone?.members?.length ?? 0}
             />
             {canAddCountries && (

package/src/app/routes/_authenticated/_zones/zones.graphql.ts

@@ -1,4 +1,4 @@
-import { graphql } from '@/graphql/graphql.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
 
 export const zoneItemFragment = graphql(`
     fragment ZoneItem on Zone {

package/src/app/routes/_authenticated/_zones/zones.tsx

@@ -1,9 +1,9 @@
-import { DetailPageButton } from '@/components/shared/detail-page-button.js';
-import { PermissionGuard } from '@/components/shared/permission-guard.js';
-import { Button } from '@/components/ui/button.js';
-import { PageActionBarRight } from '@/framework/layout-engine/page-layout.js';
-import { ListPage } from '@/framework/page/list-page.js';
-import { Trans } from '@/lib/trans.js';
+import { DetailPageButton } from '@/vdb/components/shared/detail-page-button.js';
+import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { PageActionBarRight } from '@/vdb/framework/layout-engine/page-layout.js';
+import { ListPage } from '@/vdb/framework/page/list-page.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
 import { DeleteZonesBulkAction } from './components/zone-bulk-actions.js';

package/src/app/routes/_authenticated/_zones/zones_.$id.tsx

@@ -1,9 +1,9 @@
-import { ErrorPage } from '@/components/shared/error-page.js';
-import { FormFieldWrapper } from '@/components/shared/form-field-wrapper.js';
-import { PermissionGuard } from '@/components/shared/permission-guard.js';
-import { Button } from '@/components/ui/button.js';
-import { Input } from '@/components/ui/input.js';
-import { NEW_ENTITY_PATH } from '@/constants.js';
+import { ErrorPage } from '@/vdb/components/shared/error-page.js';
+import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
+import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { NEW_ENTITY_PATH } from '@/vdb/constants.js';
 import {
     CustomFieldsPageBlock,
     DetailFormGrid,
@@ -13,10 +13,10 @@ import {
     PageBlock,
     PageLayout,
     PageTitle,
-} from '@/framework/layout-engine/page-layout.js';
-import { detailPageRouteLoader } from '@/framework/page/detail-page-route-loader.js';
-import { useDetailPage } from '@/framework/page/use-detail-page.js';
-import { Trans, useLingui } from '@/lib/trans.js';
+} from '@/vdb/framework/layout-engine/page-layout.js';
+import { detailPageRouteLoader } from '@/vdb/framework/page/detail-page-route-loader.js';
+import { useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { toast } from 'sonner';
 import { ZoneCountriesTable } from './components/zone-countries-table.js';

package/src/app/routes/_authenticated/index.tsx

@@ -1,9 +1,9 @@
-import { Button } from '@/components/ui/button.js';
-import { DashboardWidgetInstance } from '@/framework/dashboard-widget/types.js';
+import { Button } from '@/vdb/components/ui/button.js';
 import {
     getDashboardWidget,
     getDashboardWidgetRegistry,
-} from '@/framework/dashboard-widget/widget-extensions.js';
+} from '@/vdb/framework/dashboard-widget/widget-extensions.js';
+import { DashboardWidgetInstance } from '@/vdb/framework/extension-api/types/widgets.js';
 import {
     FullWidthPageBlock,
     Page,
@@ -11,7 +11,7 @@ import {
     PageActionBarRight,
     PageLayout,
     PageTitle,
-} from '@/framework/layout-engine/page-layout.js';
+} from '@/vdb/framework/layout-engine/page-layout.js';
 import { createFileRoute } from '@tanstack/react-router';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { Responsive as ResponsiveGridLayout } from 'react-grid-layout';

package/src/app/routes/_authenticated.tsx

@@ -1,6 +1,6 @@
-import { AppLayout } from '@/components/layout/app-layout.js';
-import { AUTHENTICATED_ROUTE_PREFIX } from '@/constants.js';
-import { useAuth } from '@/hooks/use-auth.js';
+import { AppLayout } from '@/vdb/components/layout/app-layout.js';
+import { AUTHENTICATED_ROUTE_PREFIX } from '@/vdb/constants.js';
+import { useAuth } from '@/vdb/hooks/use-auth.js';
 import { createFileRoute, redirect, useNavigate } from '@tanstack/react-router';
 
 export const Route = createFileRoute(AUTHENTICATED_ROUTE_PREFIX)({

package/src/app/routes/login.tsx

@@ -1,5 +1,5 @@
-import { LoginForm } from '@/components/login/login-form.js';
-import { useAuth } from '@/hooks/use-auth.js';
+import { LoginForm } from '@/vdb/components/login/login-form.js';
+import { useAuth } from '@/vdb/hooks/use-auth.js';
 import { createFileRoute, Navigate, redirect, useRouterState } from '@tanstack/react-router';
 import { z } from 'zod';
 

package/src/lib/components/data-display/boolean.tsx

@@ -2,7 +2,7 @@ import { CheckIcon, XIcon } from 'lucide-react';
 import React from 'react';
 import { Badge } from '../ui/badge.js';
 
-export function BooleanDisplayCheckbox({ value }: { value: boolean }) {
+export function BooleanDisplayCheckbox({ value }: Readonly<{ value: boolean }>) {
     return value ? <CheckIcon className="opacity-70" /> : <XIcon className="opacity-70" />;
 }
 

package/src/lib/components/data-display/date-time.tsx

@@ -1,6 +1,6 @@
-import { useLocalFormat } from '@/hooks/use-local-format.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
 
-export function DateTime({ value }: { value: string | Date }) {
+export function DateTime({ value }: Readonly<{ value: string | Date }>) {
     const { formatDate } = useLocalFormat();
     let renderedDate: string;
     try {

package/src/lib/components/data-display/json.tsx

@@ -1,5 +1,5 @@
 import { JsonEditor } from 'json-edit-react';
 
-export function Json({ value }: { value: any }) {
+export function Json({ value }: Readonly<{ value: any }>) {
     return <JsonEditor data={value} />;
 }

package/src/lib/components/data-display/money.tsx

@@ -1,7 +1,7 @@
-import { useLocalFormat } from "@/hooks/use-local-format.js";
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
 
 // Original component
-function MoneyInternal({ value, currency }: { value: number, currency: string }) {
+function MoneyInternal({ value, currency }: { value: number; currency: string }) {
     const { formatCurrency } = useLocalFormat();
     return formatCurrency(value, currency);
 }
@@ -12,4 +12,3 @@ export function Money(props: { value: any; [key: string]: any }) {
     const currency = rest.currency || 'USD'; // Default currency if none provided
     return MoneyInternal({ value, currency });
 }
-

package/src/lib/components/data-input/affixed-input.tsx

@@ -1,13 +1,12 @@
-import { cn } from '@/lib/utils.js';
+import { ReactNode, useEffect, useRef, useState } from 'react';
 import { Input } from '../ui/input.js';
-import { ReactNode, useRef, useEffect, useState } from 'react';
 
 interface AffixedInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'prefix'> {
     prefix?: ReactNode;
     suffix?: ReactNode;
 }
 
-export function AffixedInput({ prefix, suffix, className = '', ...props }: AffixedInputProps) {
+export function AffixedInput({ prefix, suffix, className = '', ...props }: Readonly<AffixedInputProps>) {
     const prefixRef = useRef<HTMLSpanElement>(null);
     const suffixRef = useRef<HTMLSpanElement>(null);
     const [prefixWidth, setPrefixWidth] = useState(0);
@@ -34,11 +33,7 @@ export function AffixedInput({ prefix, suffix, className = '', ...props }: Affix
                     {prefix}
                 </span>
             )}
-            <Input
-                {...props}
-                className={className}
-                style={style}
-            />
+            <Input {...props} className={className} style={style} />
             {suffix && (
                 <span ref={suffixRef} className="absolute right-3 text-muted-foreground whitespace-nowrap">
                     {suffix}

package/src/lib/components/data-input/customer-group-input.tsx

@@ -1,5 +1,5 @@
-import { api } from '@/graphql/api.js';
-import { graphql } from '@/graphql/graphql.js';
+import { api } from '@/vdb/graphql/api.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
 import { useQuery } from '@tanstack/react-query';
 import { CustomerGroupChip } from '../shared/customer-group-chip.js';
 import { CustomerGroupSelector } from '../shared/customer-group-selector.js';

package/src/lib/components/data-input/datetime-input.tsx

@@ -1,150 +1,133 @@
-"use client";
- 
-import * as React from "react";
-import { format } from "date-fns";
- 
-import { cn } from "@/lib/utils.js";
-import { Button } from "@/components/ui/button.js";
-import { Calendar } from "@/components/ui/calendar.js";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover.js";
-import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area.js";
-import { CalendarClock } from "lucide-react";
+'use client';
+
+import { format } from 'date-fns';
+import * as React from 'react';
+
+import { Button } from '@/vdb/components/ui/button.js';
+import { Calendar } from '@/vdb/components/ui/calendar.js';
+import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
+import { ScrollArea, ScrollBar } from '@/vdb/components/ui/scroll-area.js';
+import { cn } from '@/vdb/lib/utils.js';
+import { CalendarClock } from 'lucide-react';
 
 export interface DateTimeInputProps {
-  value: Date | string | undefined;
-  onChange: (value: Date) => void;
+    value: Date | string | undefined;
+    onChange: (value: Date) => void;
 }
- 
+
 export function DateTimeInput(props: DateTimeInputProps) {
-  const date = props.value && props.value instanceof Date ? props.value.toISOString() : props.value ?? '';
-  const [isOpen, setIsOpen] = React.useState(false);
- 
-  const hours = Array.from({ length: 12 }, (_, i) => i + 1);
-  const handleDateSelect = (selectedDate: Date | undefined) => {
-    if (selectedDate) {
-      props.onChange(selectedDate);
-    }
-  };
- 
-  const handleTimeChange = (
-    type: "hour" | "minute" | "ampm",
-    value: string
-  ) => {
-    if (date) {
-      const newDate = new Date(date);
-      if (type === "hour") {
-        newDate.setHours(
-          (parseInt(value) % 12) + (newDate.getHours() >= 12 ? 12 : 0)
-        );
-      } else if (type === "minute") {
-        newDate.setMinutes(parseInt(value));
-      } else if (type === "ampm") {
-        const currentHours = newDate.getHours();
-        newDate.setHours(
-          value === "PM" ? currentHours + 12 : currentHours - 12
-        );
-      }
-      props.onChange(newDate);
-    }
-  };
- 
-  return (
-    <Popover open={isOpen} onOpenChange={setIsOpen}>
-      <PopoverTrigger asChild>
-        <Button
-          variant="outline"
-          className={cn(
-            "w-full justify-start text-left font-normal",
-            !date && "text-muted-foreground"
-          )}
-        >
-          <CalendarClock className="mr-2 h-4 w-4" />
-          {date ? (
-            format(date, "MM/dd/yyyy hh:mm aa")
-          ) : (
-            <span>MM/DD/YYYY hh:mm aa</span>
-          )}
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-auto p-0">
-        <div className="sm:flex">
-          <Calendar
-            mode="single"
-            selected={new Date(date)}
-            onSelect={handleDateSelect}
-            initialFocus
-          />
-          <div className="flex flex-col sm:flex-row sm:h-[300px] divide-y sm:divide-y-0 sm:divide-x">
-            <ScrollArea className="w-64 sm:w-auto">
-              <div className="flex sm:flex-col p-2">
-                {hours.reverse().map((hour) => (
-                  <Button
-                    key={hour}
-                    size="icon"
-                    variant={
-                      date && new Date(date).getHours() % 12 === hour % 12
-                        ? "default"
-                        : "ghost"
-                    }
-                    className="sm:w-full shrink-0 aspect-square"
-                    onClick={() => handleTimeChange("hour", hour.toString())}
-                  >
-                    {hour}
-                  </Button>
-                ))}
-              </div>
-              <ScrollBar orientation="horizontal" className="sm:hidden" />
-            </ScrollArea>
-            <ScrollArea className="w-64 sm:w-auto">
-              <div className="flex sm:flex-col p-2">
-                {Array.from({ length: 12 }, (_, i) => i * 5).map((minute) => (
-                  <Button
-                    key={minute}
-                    size="icon"
-                    variant={
-                      date && new Date(date).getMinutes() === minute
-                        ? "default"
-                        : "ghost"
-                    }
-                    className="sm:w-full shrink-0 aspect-square"
-                    onClick={() =>
-                      handleTimeChange("minute", minute.toString())
-                    }
-                  >
-                    {minute}
-                  </Button>
-                ))}
-              </div>
-              <ScrollBar orientation="horizontal" className="sm:hidden" />
-            </ScrollArea>
-            <ScrollArea className="">
-              <div className="flex sm:flex-col p-2">
-                {["AM", "PM"].map((ampm) => (
-                  <Button
-                    key={ampm}
-                    size="icon"
-                    variant={
-                      date &&
-                      ((ampm === "AM" && new Date(date).getHours() < 12) ||
-                        (ampm === "PM" && new Date(date).getHours() >= 12))
-                        ? "default"
-                        : "ghost"
-                    }
-                    className="sm:w-full shrink-0 aspect-square"
-                    onClick={() => handleTimeChange("ampm", ampm)}
-                  >
-                    {ampm}
-                  </Button>
-                ))}
-              </div>
-            </ScrollArea>
-          </div>
-        </div>
-      </PopoverContent>
-    </Popover>
-  );
-}
+    const date = props.value && props.value instanceof Date ? props.value.toISOString() : (props.value ?? '');
+    const [isOpen, setIsOpen] = React.useState(false);
+
+    const hours = Array.from({ length: 12 }, (_, i) => i + 1);
+    const handleDateSelect = (selectedDate: Date | undefined) => {
+        if (selectedDate) {
+            props.onChange(selectedDate);
+        }
+    };
+
+    const handleTimeChange = (type: 'hour' | 'minute' | 'ampm', value: string) => {
+        if (date) {
+            const newDate = new Date(date);
+            if (type === 'hour') {
+                newDate.setHours((parseInt(value) % 12) + (newDate.getHours() >= 12 ? 12 : 0));
+            } else if (type === 'minute') {
+                newDate.setMinutes(parseInt(value));
+            } else if (type === 'ampm') {
+                const currentHours = newDate.getHours();
+                newDate.setHours(value === 'PM' ? currentHours + 12 : currentHours - 12);
+            }
+            props.onChange(newDate);
+        }
+    };
+
+    return (
+        <Popover open={isOpen} onOpenChange={setIsOpen}>
+            <PopoverTrigger asChild>
+                <Button
+                    variant="outline"
+                    className={cn(
+                        'w-full justify-start text-left font-normal',
+                        !date && 'text-muted-foreground',
+                    )}
+                >
+                    <CalendarClock className="mr-2 h-4 w-4" />
+                    {date ? format(date, 'MM/dd/yyyy hh:mm aa') : <span>MM/DD/YYYY hh:mm aa</span>}
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-auto p-0">
+                <div className="sm:flex">
+                    <Calendar
+                        mode="single"
+                        selected={new Date(date)}
+                        onSelect={handleDateSelect}
+                        initialFocus
+                    />
+                    <div className="flex flex-col sm:flex-row sm:h-[300px] divide-y sm:divide-y-0 sm:divide-x">
+                        <ScrollArea className="w-64 sm:w-auto">
+                            <div className="flex sm:flex-col p-2">
+                                {hours.reverse().map(hour => (
+                                    <Button
+                                        key={hour}
+                                        size="icon"
+                                        variant={
+                                            date && new Date(date).getHours() % 12 === hour % 12
+                                                ? 'default'
+                                                : 'ghost'
+                                        }
+                                        className="sm:w-full shrink-0 aspect-square"
+                                        onClick={() => handleTimeChange('hour', hour.toString())}
+                                    >
+                                        {hour}
+                                    </Button>
+                                ))}
+                            </div>
+                            <ScrollBar orientation="horizontal" className="sm:hidden" />
+                        </ScrollArea>
+                        <ScrollArea className="w-64 sm:w-auto">
+                            <div className="flex sm:flex-col p-2">
+                                {Array.from({ length: 12 }, (_, i) => i * 5).map(minute => (
+                                    <Button
+                                        key={minute}
+                                        size="icon"
+                                        variant={
+                                            date && new Date(date).getMinutes() === minute
+                                                ? 'default'
+                                                : 'ghost'
+                                        }
+                                        className="sm:w-full shrink-0 aspect-square"
+                                        onClick={() => handleTimeChange('minute', minute.toString())}
+                                    >
+                                        {minute}
+                                    </Button>
+                                ))}
+                            </div>
+                            <ScrollBar orientation="horizontal" className="sm:hidden" />
+                        </ScrollArea>
+                        <ScrollArea className="">
+                            <div className="flex sm:flex-col p-2">
+                                {['AM', 'PM'].map(ampm => (
+                                    <Button
+                                        key={ampm}
+                                        size="icon"
+                                        variant={
+                                            date &&
+                                            ((ampm === 'AM' && new Date(date).getHours() < 12) ||
+                                                (ampm === 'PM' && new Date(date).getHours() >= 12))
+                                                ? 'default'
+                                                : 'ghost'
+                                        }
+                                        className="sm:w-full shrink-0 aspect-square"
+                                        onClick={() => handleTimeChange('ampm', ampm)}
+                                    >
+                                        {ampm}
+                                    </Button>
+                                ))}
+                            </div>
+                        </ScrollArea>
+                    </div>
+                </div>
+            </PopoverContent>
+        </Popover>
+    );
+}

package/src/lib/components/data-input/facet-value-input.tsx

@@ -1,8 +1,8 @@
-import { graphql } from "@/graphql/graphql.js";
-import { FacetValue, FacetValueSelector } from "../shared/facet-value-selector.js";
-import { useQuery } from "@tanstack/react-query";
-import { api } from "@/graphql/api.js";
-import { FacetValueChip } from "../shared/facet-value-chip.js";
+import { api } from '@/vdb/graphql/api.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { useQuery } from '@tanstack/react-query';
+import { FacetValueChip } from '../shared/facet-value-chip.js';
+import { FacetValue, FacetValueSelector } from '../shared/facet-value-selector.js';
 
 const facetValuesDocument = graphql(`
     query FacetValues($options: FacetValueListOptions) {
@@ -18,8 +18,8 @@ const facetValuesDocument = graphql(`
                 }
             }
         }
-    }`
-);
+    }
+`);
 
 export interface FacetValueInputProps {
     value: string;
@@ -31,32 +31,40 @@ export function FacetValueInput(props: FacetValueInputProps) {
     const ids = decodeIds(props.value);
     const { data } = useQuery({
         queryKey: ['facetValues', ids],
-        queryFn: () => api.query(facetValuesDocument, {
-            options: {
-                filter: {
-                    id: { in: ids }
-                }
-            }
-        })
+        queryFn: () =>
+            api.query(facetValuesDocument, {
+                options: {
+                    filter: {
+                        id: { in: ids },
+                    },
+                },
+            }),
     });
 
     const onValueSelectHandler = (value: FacetValue) => {
         const newIds = new Set([...ids, value.id]);
         props.onChange(JSON.stringify(Array.from(newIds)));
-    }
+    };
 
     const onValueRemoveHandler = (id: string) => {
         const newIds = new Set(ids.filter(existingId => existingId !== id));
         props.onChange(JSON.stringify(Array.from(newIds)));
-    }
+    };
 
-    return (<div>
-        
-        <div className="flex flex-wrap gap-2 mb-2">
-            {data?.facetValues.items.map(item => <FacetValueChip key={item.id} facetValue={item} onRemove={() => onValueRemoveHandler(item.id)} />)}
+    return (
+        <div>
+            <div className="flex flex-wrap gap-2 mb-2">
+                {data?.facetValues.items.map(item => (
+                    <FacetValueChip
+                        key={item.id}
+                        facetValue={item}
+                        onRemove={() => onValueRemoveHandler(item.id)}
+                    />
+                ))}
+            </div>
+            <FacetValueSelector onValueSelect={onValueSelectHandler} disabled={props.readOnly} />
         </div>
-        <FacetValueSelector onValueSelect={onValueSelectHandler} disabled={props.readOnly} />
-    </div>);
+    );
 }
 
 function decodeIds(idsString: string): string[] {

package/src/lib/components/data-input/money-input.tsx

@@ -1,6 +1,6 @@
-import { useUserSettings } from '@/hooks/use-user-settings.js';
-import { useMemo, useState, useEffect } from 'react';
-import { useLocalFormat } from '@/hooks/use-local-format.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
+import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
+import { useEffect, useMemo, useState } from 'react';
 import { AffixedInput } from './affixed-input.js';
 
 // Original component

package/src/lib/components/data-input/richt-text-input.tsx

@@ -26,7 +26,7 @@ export interface RichTextInputProps {
     onChange: (value: string) => void;
 }
 
-export function RichTextInput({ value, onChange }: RichTextInputProps) {
+export function RichTextInput({ value, onChange }: Readonly<RichTextInputProps>) {
     const editor = useEditor({
         parseOptions: {
             preserveWhitespace: 'full',