@vendure/dashboard 3.2.0 → 3.2.1

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

@@ -1,70 +1,70 @@
-import { BooleanDisplayBadge, BooleanDisplayCheckbox } from '@/components/data-display/boolean.js';
-import { DateTime } from '@/components/data-display/date-time.js';
-import { Money } from '@/components/data-display/money.js';
-import { DateTimeInput } from '@/components/data-input/datetime-input.js';
-import { FacetValueInput } from '@/components/data-input/facet-value-input.js';
-import { MoneyInput } from '@/components/data-input/money-input.js';
-import { VendureImage } from '@/components/shared/vendure-image.js';
-import { Checkbox } from '@/components/ui/checkbox.js';
-import { Input } from '@/components/ui/input.js';
-import * as React from 'react';
-
-export interface ComponentRegistryEntry<Props extends Record<string, any>> {
-    component: React.ComponentType<Props>;
-}
-
-// Basic component types
-export type DataDisplayComponent = React.ComponentType<{ value: any; [key: string]: any }>;
-export type DataInputComponent = React.ComponentType<{ value: any; onChange: (value: any) => void; [key: string]: any }>;
-
-// Simple component registry
-interface ComponentRegistry {
-    dataDisplay: Record<string, DataDisplayComponent>;
-    dataInput: Record<string, DataInputComponent>;
-}
-
-export const COMPONENT_REGISTRY: ComponentRegistry = {
-    dataDisplay: {
-        'vendure:booleanCheckbox': BooleanDisplayCheckbox,
-        'vendure:booleanBadge': BooleanDisplayBadge,
-        'vendure:dateTime': DateTime,
-        'vendure:asset': ({value}) => <VendureImage asset={value} preset="tiny" />,
-        'vendure:money': Money,
-    },
-    dataInput: {
-        'vendure:moneyInput': MoneyInput,
-        'vendure:textInput': (props) => <Input {...props} onChange={e => props.onChange(e.target.value)} />,
-        'vendure:numberInput': (props) => <Input {...props} onChange={e => props.onChange(e.target.value)} type="number" />,
-        'vendure:dateTimeInput': DateTimeInput,
-        'vendure:checkboxInput': (props) => <Checkbox {...props} checked={props.value === 'true' || props.value === true}  onCheckedChange={value => props.onChange(value)} />,
-        'vendure:facetValueInput': FacetValueInput,
-    }
-};
-
-// Simplified implementation - replace with actual implementation
-export function useComponentRegistry() {
-    return {
-        getDisplayComponent: (id: string): DataDisplayComponent | undefined => {
-            // This is a placeholder implementation
-            return COMPONENT_REGISTRY.dataDisplay[id];
-        },
-        getInputComponent: (id: string): DataInputComponent | undefined => {
-            // This is a placeholder implementation
-            return COMPONENT_REGISTRY.dataInput[id];
-        },
-    };
-}
-
-export function registerInputComponent(id: string,  component: DataInputComponent) {
-    if (COMPONENT_REGISTRY.dataInput[id]) {
-        throw new Error(`Input component with id ${id} already registered`);
-    }
-    COMPONENT_REGISTRY.dataInput[id] = component;
-}
-
-export function registerDisplayComponent(id: string, component: DataDisplayComponent) {
-    if (COMPONENT_REGISTRY.dataDisplay[id]) {
-        throw new Error(`Display component with id ${id} already registered`);
-    }
-    COMPONENT_REGISTRY.dataDisplay[id] = component;
-}
+import { BooleanDisplayBadge, BooleanDisplayCheckbox } from '@/components/data-display/boolean.js';
+import { DateTime } from '@/components/data-display/date-time.js';
+import { Money } from '@/components/data-display/money.js';
+import { DateTimeInput } from '@/components/data-input/datetime-input.js';
+import { FacetValueInput } from '@/components/data-input/facet-value-input.js';
+import { MoneyInput } from '@/components/data-input/money-input.js';
+import { VendureImage } from '@/components/shared/vendure-image.js';
+import { Checkbox } from '@/components/ui/checkbox.js';
+import { Input } from '@/components/ui/input.js';
+import * as React from 'react';
+
+export interface ComponentRegistryEntry<Props extends Record<string, any>> {
+    component: React.ComponentType<Props>;
+}
+
+// Basic component types
+export type DataDisplayComponent = React.ComponentType<{ value: any; [key: string]: any }>;
+export type DataInputComponent = React.ComponentType<{ value: any; onChange: (value: any) => void; [key: string]: any }>;
+
+// Simple component registry
+interface ComponentRegistry {
+    dataDisplay: Record<string, DataDisplayComponent>;
+    dataInput: Record<string, DataInputComponent>;
+}
+
+export const COMPONENT_REGISTRY: ComponentRegistry = {
+    dataDisplay: {
+        'vendure:booleanCheckbox': BooleanDisplayCheckbox,
+        'vendure:booleanBadge': BooleanDisplayBadge,
+        'vendure:dateTime': DateTime,
+        'vendure:asset': ({value}) => <VendureImage asset={value} preset="tiny" />,
+        'vendure:money': Money,
+    },
+    dataInput: {
+        'vendure:moneyInput': MoneyInput,
+        'vendure:textInput': (props) => <Input {...props} onChange={e => props.onChange(e.target.value)} />,
+        'vendure:numberInput': (props) => <Input {...props} onChange={e => props.onChange(e.target.value)} type="number" />,
+        'vendure:dateTimeInput': DateTimeInput,
+        'vendure:checkboxInput': (props) => <Checkbox {...props} checked={props.value === 'true' || props.value === true}  onCheckedChange={value => props.onChange(value)} />,
+        'vendure:facetValueInput': FacetValueInput,
+    }
+};
+
+// Simplified implementation - replace with actual implementation
+export function useComponentRegistry() {
+    return {
+        getDisplayComponent: (id: string): DataDisplayComponent | undefined => {
+            // This is a placeholder implementation
+            return COMPONENT_REGISTRY.dataDisplay[id];
+        },
+        getInputComponent: (id: string): DataInputComponent | undefined => {
+            // This is a placeholder implementation
+            return COMPONENT_REGISTRY.dataInput[id];
+        },
+    };
+}
+
+export function registerInputComponent(id: string,  component: DataInputComponent) {
+    if (COMPONENT_REGISTRY.dataInput[id]) {
+        throw new Error(`Input component with id ${id} already registered`);
+    }
+    COMPONENT_REGISTRY.dataInput[id] = component;
+}
+
+export function registerDisplayComponent(id: string, component: DataDisplayComponent) {
+    if (COMPONENT_REGISTRY.dataDisplay[id]) {
+        throw new Error(`Display component with id ${id} already registered`);
+    }
+    COMPONENT_REGISTRY.dataDisplay[id] = component;
+}

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

@@ -1,58 +1,58 @@
-import React from "react";
-import { COMPONENT_REGISTRY, useComponentRegistry } from "./component-registry.js";
-
-export type DisplayComponentProps<
-    T extends keyof (typeof COMPONENT_REGISTRY)['dataDisplay'] | string,
-> = {
-    id: T;
-    value: any;
-    // rest of the props are passed to the component
-    [key: string]: any;
-}
-
-
-export type InputComponentProps<
-    T extends keyof (typeof COMPONENT_REGISTRY)['dataInput'] | string,
-> = {
-    id: T;
-    value: any;
-    // rest of the props are passed to the component
-    [key: string]: any;
-}
-
-/**
- * @description
- * This component is used to delegate the rendering of a component to the component registry.
- * 
- * @example
- * ```ts
- * <Delegate component="money.display.default" value={100} />
- * ```
- * 
- * @returns 
- */
-export function DisplayComponent<
-    T extends keyof (typeof COMPONENT_REGISTRY)['dataDisplay'] | string,
->(props: DisplayComponentProps<T>): React.ReactNode {   
-    const { getDisplayComponent } = useComponentRegistry();
-    const Component = getDisplayComponent(props.id);
-    if (!Component) {
-        throw new Error(`Component with id ${props.id} not found`);
-    }
-    const { value, ...rest } = props;
-    return <Component value={value} {...rest} />;
-}
-
-export function InputComponent<
-    T extends keyof (typeof COMPONENT_REGISTRY)['dataInput'] | string,
->(props: InputComponentProps<T>): React.ReactNode {
-    const { getInputComponent } = useComponentRegistry();
-    const Component = getInputComponent(props.id);
-    if (!Component) {
-        throw new Error(`Component with id ${props.id} not found`);
-    }
-    const { value, onChange, ...rest } = props;
-    return <Component value={value} onChange={onChange} {...rest} />;
-}       
-
-
+import React from "react";
+import { COMPONENT_REGISTRY, useComponentRegistry } from "./component-registry.js";
+
+export type DisplayComponentProps<
+    T extends keyof (typeof COMPONENT_REGISTRY)['dataDisplay'] | string,
+> = {
+    id: T;
+    value: any;
+    // rest of the props are passed to the component
+    [key: string]: any;
+}
+
+
+export type InputComponentProps<
+    T extends keyof (typeof COMPONENT_REGISTRY)['dataInput'] | string,
+> = {
+    id: T;
+    value: any;
+    // rest of the props are passed to the component
+    [key: string]: any;
+}
+
+/**
+ * @description
+ * This component is used to delegate the rendering of a component to the component registry.
+ * 
+ * @example
+ * ```ts
+ * <Delegate component="money.display.default" value={100} />
+ * ```
+ * 
+ * @returns 
+ */
+export function DisplayComponent<
+    T extends keyof (typeof COMPONENT_REGISTRY)['dataDisplay'] | string,
+>(props: DisplayComponentProps<T>): React.ReactNode {   
+    const { getDisplayComponent } = useComponentRegistry();
+    const Component = getDisplayComponent(props.id);
+    if (!Component) {
+        throw new Error(`Component with id ${props.id} not found`);
+    }
+    const { value, ...rest } = props;
+    return <Component value={value} {...rest} />;
+}
+
+export function InputComponent<
+    T extends keyof (typeof COMPONENT_REGISTRY)['dataInput'] | string,
+>(props: InputComponentProps<T>): React.ReactNode {
+    const { getInputComponent } = useComponentRegistry();
+    const Component = getInputComponent(props.id);
+    if (!Component) {
+        throw new Error(`Component with id ${props.id} not found`);
+    }
+    const { value, onChange, ...rest } = props;
+    return <Component value={value} onChange={onChange} {...rest} />;
+}       
+
+

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

@@ -1,97 +1,97 @@
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card.js';
-import { cn } from '@/lib/utils.js';
-import { Trans } from '@/lib/trans.js';
-import { PropsWithChildren, useRef, useEffect, useState, createContext, useContext } from 'react';
-
-type WidgetDimensions = {
-    width: number;
-    height: number;
-};
-
-export const WidgetContentContext = createContext<WidgetDimensions>({ width: 0, height: 0 });
-
-export const useWidgetDimensions = () => {
-    const context = useContext(WidgetContentContext);
-    if (!context) {
-        throw new Error('useWidgetDimensions must be used within a DashboardBaseWidget');
-    }
-    return context;
-};
-
-export type DashboardBaseWidgetProps = PropsWithChildren<{
-    id: string;
-    title?: string;
-    description?: string;
-    config?: Record<string, unknown>;
-    actions?: React.ReactNode;
-}>;
-
-export function DashboardBaseWidget({
-    id,
-    config,
-    children,
-    title,
-    description,
-    actions,
-}: DashboardBaseWidgetProps) {
-    const headerRef = useRef<HTMLDivElement>(null);
-    const wrapperRef = useRef<HTMLDivElement>(null);
-    const contentRef = useRef<HTMLDivElement>(null);
-    const [dimensions, setDimensions] = useState<WidgetDimensions>({ width: 0, height: 0 });
-
-    useEffect(() => {
-        const updateDimensions = () => {
-            if (wrapperRef.current && contentRef.current) {
-                const contentStyles = window.getComputedStyle(contentRef.current);
-                const paddingTop = parseFloat(contentStyles.paddingTop);
-                const paddingBottom = parseFloat(contentStyles.paddingBottom);
-                const paddingLeft = parseFloat(contentStyles.paddingLeft);
-                const paddingRight = parseFloat(contentStyles.paddingRight);
-
-                const headerHeight = headerRef.current?.offsetHeight ?? 0;
-
-                setDimensions({
-                    width: wrapperRef.current.offsetWidth - paddingLeft - paddingRight,
-                    height: wrapperRef.current.offsetHeight - paddingTop - paddingBottom - headerHeight,
-                });
-            }
-        };
-
-        updateDimensions();
-        const observer = new ResizeObserver(updateDimensions);
-        if (wrapperRef.current) {
-            observer.observe(wrapperRef.current);
-        }
-
-        return () => observer.disconnect();
-    }, []);
-
-    return (
-        <Card
-            ref={wrapperRef}
-            key={`dashboard-widget-${id}`}
-            className={cn('h-full w-full flex flex-col rounded-md', !title && 'pt-6')}
-        >
-            {title && (
-                <CardHeader
-                    ref={headerRef}
-                    className={cn(
-                        'flex flex-row items-center',
-                        actions ? 'justify-between' : 'justify-start',
-                    )}
-                >
-                    <div>
-                        <CardTitle>
-                            <Trans>{title}</Trans>
-                        </CardTitle>
-                        {description && <CardDescription>{description}</CardDescription>}
-                    </div>
-                    {actions && <div className="flex items-center gap-2">{actions}</div>}
-                </CardHeader>
-            )}
-            <CardContent ref={contentRef} className="grow">
-                <WidgetContentContext.Provider value={dimensions}>{children}</WidgetContentContext.Provider>
-            </CardContent>
-        </Card>
-    );
-}
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card.js';
+import { cn } from '@/lib/utils.js';
+import { Trans } from '@/lib/trans.js';
+import { PropsWithChildren, useRef, useEffect, useState, createContext, useContext } from 'react';
+
+type WidgetDimensions = {
+    width: number;
+    height: number;
+};
+
+export const WidgetContentContext = createContext<WidgetDimensions>({ width: 0, height: 0 });
+
+export const useWidgetDimensions = () => {
+    const context = useContext(WidgetContentContext);
+    if (!context) {
+        throw new Error('useWidgetDimensions must be used within a DashboardBaseWidget');
+    }
+    return context;
+};
+
+export type DashboardBaseWidgetProps = PropsWithChildren<{
+    id: string;
+    title?: string;
+    description?: string;
+    config?: Record<string, unknown>;
+    actions?: React.ReactNode;
+}>;
+
+export function DashboardBaseWidget({
+    id,
+    config,
+    children,
+    title,
+    description,
+    actions,
+}: DashboardBaseWidgetProps) {
+    const headerRef = useRef<HTMLDivElement>(null);
+    const wrapperRef = useRef<HTMLDivElement>(null);
+    const contentRef = useRef<HTMLDivElement>(null);
+    const [dimensions, setDimensions] = useState<WidgetDimensions>({ width: 0, height: 0 });
+
+    useEffect(() => {
+        const updateDimensions = () => {
+            if (wrapperRef.current && contentRef.current) {
+                const contentStyles = window.getComputedStyle(contentRef.current);
+                const paddingTop = parseFloat(contentStyles.paddingTop);
+                const paddingBottom = parseFloat(contentStyles.paddingBottom);
+                const paddingLeft = parseFloat(contentStyles.paddingLeft);
+                const paddingRight = parseFloat(contentStyles.paddingRight);
+
+                const headerHeight = headerRef.current?.offsetHeight ?? 0;
+
+                setDimensions({
+                    width: wrapperRef.current.offsetWidth - paddingLeft - paddingRight,
+                    height: wrapperRef.current.offsetHeight - paddingTop - paddingBottom - headerHeight,
+                });
+            }
+        };
+
+        updateDimensions();
+        const observer = new ResizeObserver(updateDimensions);
+        if (wrapperRef.current) {
+            observer.observe(wrapperRef.current);
+        }
+
+        return () => observer.disconnect();
+    }, []);
+
+    return (
+        <Card
+            ref={wrapperRef}
+            key={`dashboard-widget-${id}`}
+            className={cn('h-full w-full flex flex-col rounded-md', !title && 'pt-6')}
+        >
+            {title && (
+                <CardHeader
+                    ref={headerRef}
+                    className={cn(
+                        'flex flex-row items-center',
+                        actions ? 'justify-between' : 'justify-start',
+                    )}
+                >
+                    <div>
+                        <CardTitle>
+                            <Trans>{title}</Trans>
+                        </CardTitle>
+                        {description && <CardDescription>{description}</CardDescription>}
+                    </div>
+                    {actions && <div className="flex items-center gap-2">{actions}</div>}
+                </CardHeader>
+            )}
+            <CardContent ref={contentRef} className="grow">
+                <WidgetContentContext.Provider value={dimensions}>{children}</WidgetContentContext.Provider>
+            </CardContent>
+        </Card>
+    );
+}

package/src/lib/framework/dashboard-widget/latest-orders-widget/index.tsx

@@ -1,96 +1,96 @@
-import { useQuery } from '@tanstack/react-query';
-import { latestOrdersQuery } from './latest-orders-widget.graphql.js';
-import { DashboardBaseWidget } from '../base-widget.js';
-import { PaginatedListDataTable, addCustomFields, useLocalFormat } from '@/index.js';
-import { ColumnFiltersState } from '@tanstack/react-table';
-import { useState } from 'react';
-import { SortingState } from '@tanstack/react-table';
-import { Link } from '@tanstack/react-router';
-import { formatRelative } from 'date-fns';
-import { Button } from '@/components/ui/button.js';
-export const WIDGET_ID = 'latest-orders-widget';
-
-export function LatestOrdersWidget() {
-    const [sorting, setSorting] = useState<SortingState>([
-        {
-            id: 'orderPlacedAt',
-            desc: true,
-        },
-    ]);
-    const [page, setPage] = useState(1);
-    const [pageSize, setPageSize] = useState(10);
-    const [filters, setFilters] = useState<ColumnFiltersState>([]);
-    const { formatCurrency } = useLocalFormat();
-
-    return (
-        <DashboardBaseWidget id={WIDGET_ID} title="Latest Orders" description="Your latest orders">
-            <PaginatedListDataTable
-                disableViewOptions
-                page={page}
-                transformVariables={variables => ({
-                    ...variables,
-                    options: {
-                        ...variables.options,
-                        filter: {
-                            active: {
-                                eq: false,
-                            },
-                            state: {
-                                notIn: ['Cancelled', 'Draft'],
-                            },
-                        },
-                    },
-                })}
-                customizeColumns={{
-                    code: {
-                        header: 'Code',
-                        cell: ({ row }) => {
-                            return (
-                                <Button variant="ghost" asChild>
-                                    <Link to={`/orders/${row.original.id}`}>{row.original.code}</Link>
-                                </Button>
-                            );
-                        },
-                    },
-                    orderPlacedAt: {
-                        header: 'Placed At',
-                        cell: ({ row }) => {
-                            return (
-                                <span>
-                                    {formatRelative(row.original.orderPlacedAt ?? new Date(), new Date())}
-                                </span>
-                            );
-                        },
-                    },
-                    total: {
-                        header: 'Total',
-                        cell: ({ row }) => {
-                            return (
-                                <span>{formatCurrency(row.original.total, row.original.currencyCode)}</span>
-                            );
-                        },
-                    },
-                }}
-                itemsPerPage={pageSize}
-                sorting={sorting}
-                columnFilters={filters}
-                listQuery={latestOrdersQuery}
-                onPageChange={(_, page, pageSize) => {
-                    setPage(page);
-                    setPageSize(pageSize);
-                }}
-                onSortChange={(_, sorting) => {
-                    setSorting(sorting);
-                }}
-                onFilterChange={(_, filters) => {
-                    setFilters(filters);
-                }}
-                defaultVisibility={{
-                    code: true,
-                    total: true,
-                    orderPlacedAt: true,
-                }}
-            />
-        </DashboardBaseWidget>
-    );
-}
+import { useQuery } from '@tanstack/react-query';
+import { latestOrdersQuery } from './latest-orders-widget.graphql.js';
+import { DashboardBaseWidget } from '../base-widget.js';
+import { PaginatedListDataTable, addCustomFields, useLocalFormat } from '@/index.js';
+import { ColumnFiltersState } from '@tanstack/react-table';
+import { useState } from 'react';
+import { SortingState } from '@tanstack/react-table';
+import { Link } from '@tanstack/react-router';
+import { formatRelative } from 'date-fns';
+import { Button } from '@/components/ui/button.js';
+export const WIDGET_ID = 'latest-orders-widget';
+
+export function LatestOrdersWidget() {
+    const [sorting, setSorting] = useState<SortingState>([
+        {
+            id: 'orderPlacedAt',
+            desc: true,
+        },
+    ]);
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState(10);
+    const [filters, setFilters] = useState<ColumnFiltersState>([]);
+    const { formatCurrency } = useLocalFormat();
+
+    return (
+        <DashboardBaseWidget id={WIDGET_ID} title="Latest Orders" description="Your latest orders">
+            <PaginatedListDataTable
+                disableViewOptions
+                page={page}
+                transformVariables={variables => ({
+                    ...variables,
+                    options: {
+                        ...variables.options,
+                        filter: {
+                            active: {
+                                eq: false,
+                            },
+                            state: {
+                                notIn: ['Cancelled', 'Draft'],
+                            },
+                        },
+                    },
+                })}
+                customizeColumns={{
+                    code: {
+                        header: 'Code',
+                        cell: ({ row }) => {
+                            return (
+                                <Button variant="ghost" asChild>
+                                    <Link to={`/orders/${row.original.id}`}>{row.original.code}</Link>
+                                </Button>
+                            );
+                        },
+                    },
+                    orderPlacedAt: {
+                        header: 'Placed At',
+                        cell: ({ row }) => {
+                            return (
+                                <span>
+                                    {formatRelative(row.original.orderPlacedAt ?? new Date(), new Date())}
+                                </span>
+                            );
+                        },
+                    },
+                    total: {
+                        header: 'Total',
+                        cell: ({ row }) => {
+                            return (
+                                <span>{formatCurrency(row.original.total, row.original.currencyCode)}</span>
+                            );
+                        },
+                    },
+                }}
+                itemsPerPage={pageSize}
+                sorting={sorting}
+                columnFilters={filters}
+                listQuery={latestOrdersQuery}
+                onPageChange={(_, page, pageSize) => {
+                    setPage(page);
+                    setPageSize(pageSize);
+                }}
+                onSortChange={(_, sorting) => {
+                    setSorting(sorting);
+                }}
+                onFilterChange={(_, filters) => {
+                    setFilters(filters);
+                }}
+                defaultVisibility={{
+                    code: true,
+                    total: true,
+                    orderPlacedAt: true,
+                }}
+            />
+        </DashboardBaseWidget>
+    );
+}