@vendure/dashboard 3.3.6-master-202507041203 → 3.4.0-minor-202506250934

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

@@ -1,9 +1,9 @@
-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 { 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 {
     CustomFieldsPageBlock,
     DetailFormGrid,
@@ -13,22 +13,19 @@ import {
     PageBlock,
     PageLayout,
     PageTitle,
-} 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';
+} 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';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { toast } from 'sonner';
 import { ZoneCountriesTable } from './components/zone-countries-table.js';
-import { createZoneDocument, updateZoneDocument, zoneDetailDocument } from './zones.graphql.js';
-
-const pageId = 'zone-detail';
+import { createZoneDocument, updateZoneDocument, zoneDetailQuery } from './zones.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_zones/zones_/$id')({
     component: ZoneDetailPage,
     loader: detailPageRouteLoader({
-        pageId,
-        queryDocument: zoneDetailDocument,
+        queryDocument: zoneDetailQuery,
         breadcrumb(isNew, entity) {
             return [{ path: '/zones', label: 'Zones' }, isNew ? <Trans>New zone</Trans> : entity?.name];
         },
@@ -43,8 +40,7 @@ function ZoneDetailPage() {
     const { i18n } = useLingui();
 
     const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
-        pageId,
-        queryDocument: zoneDetailDocument,
+        queryDocument: zoneDetailQuery,
         createDocument: createZoneDocument,
         updateDocument: updateZoneDocument,
         setValuesForUpdate: entity => {
@@ -70,7 +66,7 @@ function ZoneDetailPage() {
     });
 
     return (
-        <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
+        <Page pageId="zone-detail" form={form} submitHandler={submitHandler}>
             <PageTitle>{creatingNewEntity ? <Trans>New zone</Trans> : (entity?.name ?? '')}</PageTitle>
             <PageActionBar>
                 <PageActionBarRight>

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

@@ -1,9 +1,9 @@
-import { Button } from '@/vdb/components/ui/button.js';
+import { Button } from '@/components/ui/button.js';
+import { DashboardWidgetInstance } from '@/framework/dashboard-widget/types.js';
 import {
     getDashboardWidget,
     getDashboardWidgetRegistry,
-} from '@/vdb/framework/dashboard-widget/widget-extensions.js';
-import { DashboardWidgetInstance } from '@/vdb/framework/extension-api/types/widgets.js';
+} from '@/framework/dashboard-widget/widget-extensions.js';
 import {
     FullWidthPageBlock,
     Page,
@@ -11,7 +11,7 @@ import {
     PageActionBarRight,
     PageLayout,
     PageTitle,
-} from '@/vdb/framework/layout-engine/page-layout.js';
+} from '@/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 '@/vdb/components/layout/app-layout.js';
-import { AUTHENTICATED_ROUTE_PREFIX } from '@/vdb/constants.js';
-import { useAuth } from '@/vdb/hooks/use-auth.js';
+import { AppLayout } from '@/components/layout/app-layout.js';
+import { AUTHENTICATED_ROUTE_PREFIX } from '@/constants.js';
+import { useAuth } from '@/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 '@/vdb/components/login/login-form.js';
-import { useAuth } from '@/vdb/hooks/use-auth.js';
+import { LoginForm } from '@/components/login/login-form.js';
+import { useAuth } from '@/hooks/use-auth.js';
 import { createFileRoute, Navigate, redirect, useRouterState } from '@tanstack/react-router';
 import { z } from 'zod';
 

package/src/app/styles.css

@@ -4,8 +4,6 @@
 
 @custom-variant dark (&:is(.dark *));
 
-/* @source rules from extensions will be added here by the dashboardTailwindSourcePlugin */
-
 /*
 * Important: This is not an actual import. We are pre-processing this CSS file
 * to inject the theme variables into the CSS. This import will be replaced
@@ -66,7 +64,6 @@
     * {
         @apply border-border outline-ring/50;
     }
-
     body {
         @apply bg-background text-foreground;
     }
@@ -90,7 +87,7 @@
     }
 
     .animate-rotate {
-        animation: rotate 0.5s linear infinite;
+        animation: rotate 0.5s linear;
     }
 }
 

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 }: Readonly<{ value: boolean }>) {
+export function BooleanDisplayCheckbox({ value }: { 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 '@/vdb/hooks/use-local-format.js';
+import { useLocalFormat } from '@/hooks/use-local-format.js';
 
-export function DateTime({ value }: Readonly<{ value: string | Date }>) {
+export function DateTime({ value }: { 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 }: Readonly<{ value: any }>) {
+export function Json({ value }: { value: any }) {
     return <JsonEditor data={value} />;
 }

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

@@ -1,7 +1,7 @@
-import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
+import { useLocalFormat } from "@/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,3 +12,4 @@ 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,12 +1,13 @@
-import { ReactNode, useEffect, useRef, useState } from 'react';
+import { cn } from '@/lib/utils.js';
 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 }: Readonly<AffixedInputProps>) {
+export function AffixedInput({ prefix, suffix, className = '', ...props }: AffixedInputProps) {
     const prefixRef = useRef<HTMLSpanElement>(null);
     const suffixRef = useRef<HTMLSpanElement>(null);
     const [prefixWidth, setPrefixWidth] = useState(0);
@@ -33,7 +34,11 @@ export function AffixedInput({ prefix, suffix, className = '', ...props }: Reado
                     {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 '@/vdb/graphql/api.js';
-import { graphql } from '@/vdb/graphql/graphql.js';
+import { api } from '@/graphql/api.js';
+import { graphql } from '@/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,133 +1,150 @@
-'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';
+"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";
 
 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 { 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';
+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";
 
 const facetValuesDocument = graphql(`
     query FacetValues($options: FacetValueListOptions) {
@@ -18,8 +18,8 @@ const facetValuesDocument = graphql(`
                 }
             }
         }
-    }
-`);
+    }`
+);
 
 export interface FacetValueInputProps {
     value: string;
@@ -31,40 +31,32 @@ 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)}
-                    />
-                ))}
-            </div>
-            <FacetValueSelector onValueSelect={onValueSelectHandler} disabled={props.readOnly} />
+    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>);
 }
 
 function decodeIds(idsString: string): string[] {

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

@@ -1,11 +1,18 @@
-import { DataInputComponentProps } from '@/vdb/framework/component-registry/component-registry.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 { useUserSettings } from '@/hooks/use-user-settings.js';
+import { useMemo, useState, useEffect } from 'react';
+import { useLocalFormat } from '@/hooks/use-local-format.js';
 import { AffixedInput } from './affixed-input.js';
 
 // Original component
-function MoneyInputInternal({ value, currency, onChange }: DataInputComponentProps) {
+function MoneyInputInternal({
+    value,
+    currency,
+    onChange,
+}: {
+    value: number;
+    currency: string;
+    onChange: (value: number) => void;
+}) {
     const {
         settings: { displayLanguage, displayLocale },
     } = useUserSettings();

package/src/lib/components/data-input/{rich-text-input.tsx → richt-text-input.tsx}

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