@vendure/dashboard 3.3.6-master-202507030648 → 3.3.6-master-202507030835

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

@@ -1,51 +1,59 @@
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import * as React from 'react';
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
 
-import { cn } from '@/vdb/lib/utils.js';
+import { cn } from "@/vdb/lib/utils"
 
 function TooltipProvider({
-    delayDuration = 0,
-    ...props
+  delayDuration = 0,
+  ...props
 }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
-    return (
-        <TooltipPrimitive.Provider data-slot="tooltip-provider" delayDuration={delayDuration} {...props} />
-    );
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
 }
 
-function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
-    return (
-        <TooltipProvider>
-            <TooltipPrimitive.Root data-slot="tooltip" {...props} />
-        </TooltipProvider>
-    );
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
 }
 
-function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
-    return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
 }
 
 function TooltipContent({
-    className,
-    sideOffset = 4,
-    children,
-    ...props
+  className,
+  sideOffset = 0,
+  children,
+  ...props
 }: React.ComponentProps<typeof TooltipPrimitive.Content>) {
-    return (
-        <TooltipPrimitive.Portal>
-            <TooltipPrimitive.Content
-                data-slot="tooltip-content"
-                sideOffset={sideOffset}
-                className={cn(
-                    'bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-w-sm rounded-md px-3 py-1.5 text-xs',
-                    className,
-                )}
-                {...props}
-            >
-                {children}
-                <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
-            </TooltipPrimitive.Content>
-        </TooltipPrimitive.Portal>
-    );
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
 }
 
-export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/src/lib/framework/component-registry/component-registry.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { ControllerRenderProps, FieldPath, FieldValues } from 'react-hook-form';
 import { addDisplayComponent, getDisplayComponent } from '../extension-api/display-component-extensions.js';
 import { addInputComponent, getInputComponent } from '../extension-api/input-component-extensions.js';
 
@@ -13,9 +14,10 @@ export interface DataDisplayComponentProps {
     [key: string]: any;
 }
 
-export interface DataInputComponentProps {
-    value: any;
-    onChange: (value: any) => void;
+export interface DataInputComponentProps<
+    TFieldValues extends FieldValues = FieldValues,
+    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> extends ControllerRenderProps<TFieldValues, TName> {
     [key: string]: any;
 }
 

package/src/lib/framework/page/detail-page.tsx

@@ -17,6 +17,7 @@ import {
 } from '../document-introspection/get-document-structure.js';
 
 import { TranslatableFormFieldWrapper } from '@/vdb/components/shared/translatable-form-field.js';
+import { FormControl } from '@/vdb/components/ui/form.js';
 import { ControllerRenderProps, FieldPath, FieldValues } from 'react-hook-form';
 import { useComponentRegistry } from '../component-registry/component-registry.js';
 import { generateInputComponentKey } from '../extension-api/input-component-extensions.js';
@@ -120,23 +121,31 @@ function FieldInputRenderer<
         return <InputComponent {...field} />;
     }
 
-    switch (fieldInfo.type) {
-        case 'Int':
-        case 'Float':
-            return (
-                <Input
-                    type="number"
-                    value={field.value}
-                    onChange={e => field.onChange(e.target.valueAsNumber)}
-                />
-            );
-        case 'DateTime':
-            return <DateTimeInput {...field} />;
-        case 'Boolean':
-            return <Checkbox value={field.value} onCheckedChange={field.onChange} />;
-        default:
-            return <Input {...field} />;
-    }
+    const DefaultComponent = () => {
+        switch (fieldInfo.type) {
+            case 'Int':
+            case 'Float':
+                return (
+                    <Input
+                        type="number"
+                        value={field.value}
+                        onChange={e => field.onChange(e.target.valueAsNumber)}
+                    />
+                );
+            case 'DateTime':
+                return <DateTimeInput {...field} />;
+            case 'Boolean':
+                return <Checkbox value={field.value} onCheckedChange={field.onChange} />;
+            default:
+                return <Input {...field} />;
+        }
+    };
+
+    return (
+        <FormControl>
+            <DefaultComponent />
+        </FormControl>
+    );
 }
 
 /**
@@ -227,6 +236,7 @@ export function DetailPage<
                                         control={form.control}
                                         name={fieldInfo.name as never}
                                         label={fieldInfo.name}
+                                        renderFormControl={false}
                                         render={({ field }) => (
                                             <FieldInputRenderer
                                                 fieldInfo={fieldInfo}
@@ -249,6 +259,7 @@ export function DetailPage<
                                         control={form.control}
                                         name={fieldInfo.name as never}
                                         label={fieldInfo.name}
+                                        renderFormControl={false}
                                         render={({ field }) => (
                                             <FieldInputRenderer
                                                 fieldInfo={fieldInfo}

package/src/lib/framework/page/list-page.tsx

@@ -90,7 +90,7 @@ export function ListPage<
     transformData,
     setTableOptions,
     bulkActions,
-}: ListPageProps<T, U, V, AC>) {
+}: Readonly<ListPageProps<T, U, V, AC>>) {
     const route = typeof routeOrFn === 'function' ? routeOrFn() : routeOrFn;
     const routeSearch = route.useSearch();
     const navigate = useNavigate<AnyRouter>({ from: route.fullPath });

package/src/lib/index.ts

@@ -8,11 +8,10 @@ export * from './components/data-input/affixed-input.js';
 export * from './components/data-input/customer-group-input.js';
 export * from './components/data-input/datetime-input.js';
 export * from './components/data-input/facet-value-input.js';
-export * from './components/data-input/index.js';
 export * from './components/data-input/money-input.js';
 export * from './components/data-input/relation-input.js';
 export * from './components/data-input/relation-selector.js';
-export * from './components/data-input/richt-text-input.js';
+export * from './components/data-input/rich-text-input.js';
 export * from './components/data-table/add-filter-menu.js';
 export * from './components/data-table/data-table-bulk-action-item.js';
 export * from './components/data-table/data-table-bulk-actions.js';
@@ -187,6 +186,10 @@ export * from './framework/page/use-detail-page.js';
 export * from './framework/page/use-extended-router.js';
 export * from './framework/registry/global-registry.js';
 export * from './framework/registry/registry-types.js';
+export * from './graphql/api.js';
+export * from './graphql/common-operations.js';
+export * from './graphql/fragments.js';
+export * from './graphql/graphql.js';
 export * from './hooks/use-auth.js';
 export * from './hooks/use-channel.js';
 export * from './hooks/use-custom-field-config.js';
@@ -203,7 +206,3 @@ export * from './hooks/use-theme.js';
 export * from './hooks/use-user-settings.js';
 export * from './lib/trans.js';
 export * from './lib/utils.js';
-export * from './graphql/api.js';
-export * from './graphql/common-operations.js';
-export * from './graphql/fragments.js';
-export * from './graphql/graphql.js';

package/vite/vite-plugin-vendure-dashboard.ts

@@ -111,7 +111,7 @@ export function vendureDashboardPlugin(options: VitePluginVendureDashboardOption
             : [
                   TanStackRouterVite({
                       autoCodeSplitting: true,
-                      routeFileIgnorePattern: '.graphql.ts|components',
+                      routeFileIgnorePattern: '.graphql.ts|components|hooks',
                       routesDirectory: path.join(packageRoot, 'src/app/routes'),
                       generatedRouteTree: path.join(packageRoot, 'src/app/routeTree.gen.ts'),
                   }),