@vendure/dashboard 3.2.0

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

@@ -0,0 +1,13 @@
+import { cn } from '@/lib/utils.js';
+
+function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
+    return (
+        <div
+            data-slot="skeleton"
+            className={cn('bg-primary/10 animate-pulse rounded-md', className)}
+            {...props}
+        />
+    );
+}
+
+export { Skeleton };

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

@@ -0,0 +1,27 @@
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground font-medium",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground font-medium",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

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

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+
+import { cn } from '@/lib/utils.js';
+
+function Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+    return (
+        <SwitchPrimitive.Root
+            data-slot="switch"
+            className={cn(
+                'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 inline-flex h-5 w-9 shrink-0 items-center rounded-full border-2 border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+                className,
+            )}
+            {...props}
+        >
+            <SwitchPrimitive.Thumb
+                data-slot="switch-thumb"
+                className={cn(
+                    'bg-background pointer-events-none block size-4 rounded-full ring-0 shadow-lg transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0',
+                )}
+            />
+        </SwitchPrimitive.Root>
+    );
+}
+
+export { Switch };

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

@@ -0,0 +1,82 @@
+import * as React from 'react';
+
+import { cn } from '@/lib/utils.js';
+
+function Table({ className, ...props }: React.ComponentProps<'table'>) {
+    return (
+        <div className="relative w-full overflow-auto">
+            <table data-slot="table" className={cn('w-full caption-bottom text-sm', className)} {...props} />
+        </div>
+    );
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
+    return <thead data-slot="table-header" className={cn('[&_tr]:border-b', className)} {...props} />;
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
+    return (
+        <tbody data-slot="table-body" className={cn('[&_tr:last-child]:border-0', className)} {...props} />
+    );
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {
+    return (
+        <tfoot
+            data-slot="table-footer"
+            className={cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', className)}
+            {...props}
+        />
+    );
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
+    return (
+        <tr
+            data-slot="table-row"
+            className={cn(
+                'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
+    return (
+        <th
+            data-slot="table-head"
+            className={cn(
+                'text-muted-foreground h-10 px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
+    return (
+        <td
+            data-slot="table-cell"
+            className={cn(
+                'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function TableCaption({ className, ...props }: React.ComponentProps<'caption'>) {
+    return (
+        <caption
+            data-slot="table-caption"
+            className={cn('text-muted-foreground mt-4 text-sm', className)}
+            {...props}
+        />
+    );
+}
+
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };

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

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+
+import { cn } from '@/lib/utils.js';
+
+function Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {
+    return (
+        <TabsPrimitive.Root data-slot="tabs" className={cn('flex flex-col gap-2', className)} {...props} />
+    );
+}
+
+function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>) {
+    return (
+        <TabsPrimitive.List
+            data-slot="tabs-list"
+            className={cn(
+                'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+    return (
+        <TabsPrimitive.Trigger
+            data-slot="tabs-trigger"
+            className={cn(
+                "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {
+    return (
+        <TabsPrimitive.Content
+            data-slot="tabs-content"
+            className={cn('flex-1 outline-none', className)}
+            {...props}
+        />
+    );
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

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

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+import { cn } from '@/lib/utils.js';
+
+function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
+    return (
+        <textarea
+            data-slot="textarea"
+            className={cn(
+                'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+export { Textarea };

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

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+
+import { cn } from '@/lib/utils.js';
+
+function TooltipProvider({
+    delayDuration = 0,
+    ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+    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 TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+    return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+    className,
+    sideOffset = 4,
+    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>
+    );
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/src/lib/constants.ts

@@ -0,0 +1,326 @@
+export const NEW_ENTITY_PATH = 'new';
+export const AUTHENTICATED_ROUTE_PREFIX = '/_authenticated';
+export const DEFAULT_CHANNEL_CODE = '__default_channel__';
+export const SUPER_ADMIN_ROLE_CODE = '__super_admin_role__';
+export const CUSTOMER_ROLE_CODE = '__customer_role__';
+/**
+ * This is copied from the generated types from @vendure/common/lib/generated-types.d.ts
+ * It is used to provide a list of available currency codes for the user to select from.
+ * esbuild currently does not support import enums.
+ */
+export const CurrencyCode = {
+    /** United Arab Emirates dirham */
+    AED: 'AED',
+    /** Afghan afghani */
+    AFN: 'AFN',
+    /** Albanian lek */
+    ALL: 'ALL',
+    /** Armenian dram */
+    AMD: 'AMD',
+    /** Netherlands Antillean guilder */
+    ANG: 'ANG',
+    /** Angolan kwanza */
+    AOA: 'AOA',
+    /** Argentine peso */
+    ARS: 'ARS',
+    /** Australian dollar */
+    AUD: 'AUD',
+    /** Aruban florin */
+    AWG: 'AWG',
+    /** Azerbaijani manat */
+    AZN: 'AZN',
+    /** Bosnia and Herzegovina convertible mark */
+    BAM: 'BAM',
+    /** Barbados dollar */
+    BBD: 'BBD',
+    /** Bangladeshi taka */
+    BDT: 'BDT',
+    /** Bulgarian lev */
+    BGN: 'BGN',
+    /** Bahraini dinar */
+    BHD: 'BHD',
+    /** Burundian franc */
+    BIF: 'BIF',
+    /** Bermudian dollar */
+    BMD: 'BMD',
+    /** Brunei dollar */
+    BND: 'BND',
+    /** Boliviano */
+    BOB: 'BOB',
+    /** Brazilian real */
+    BRL: 'BRL',
+    /** Bahamian dollar */
+    BSD: 'BSD',
+    /** Bhutanese ngultrum */
+    BTN: 'BTN',
+    /** Botswana pula */
+    BWP: 'BWP',
+    /** Belarusian ruble */
+    BYN: 'BYN',
+    /** Belize dollar */
+    BZD: 'BZD',
+    /** Canadian dollar */
+    CAD: 'CAD',
+    /** Congolese franc */
+    CDF: 'CDF',
+    /** Swiss franc */
+    CHF: 'CHF',
+    /** Chilean peso */
+    CLP: 'CLP',
+    /** Renminbi (Chinese) yuan */
+    CNY: 'CNY',
+    /** Colombian peso */
+    COP: 'COP',
+    /** Costa Rican colon */
+    CRC: 'CRC',
+    /** Cuban convertible peso */
+    CUC: 'CUC',
+    /** Cuban peso */
+    CUP: 'CUP',
+    /** Cape Verde escudo */
+    CVE: 'CVE',
+    /** Czech koruna */
+    CZK: 'CZK',
+    /** Djiboutian franc */
+    DJF: 'DJF',
+    /** Danish krone */
+    DKK: 'DKK',
+    /** Dominican peso */
+    DOP: 'DOP',
+    /** Algerian dinar */
+    DZD: 'DZD',
+    /** Egyptian pound */
+    EGP: 'EGP',
+    /** Eritrean nakfa */
+    ERN: 'ERN',
+    /** Ethiopian birr */
+    ETB: 'ETB',
+    /** Euro */
+    EUR: 'EUR',
+    /** Fiji dollar */
+    FJD: 'FJD',
+    /** Falkland Islands pound */
+    FKP: 'FKP',
+    /** Pound sterling */
+    GBP: 'GBP',
+    /** Georgian lari */
+    GEL: 'GEL',
+    /** Ghanaian cedi */
+    GHS: 'GHS',
+    /** Gibraltar pound */
+    GIP: 'GIP',
+    /** Gambian dalasi */
+    GMD: 'GMD',
+    /** Guinean franc */
+    GNF: 'GNF',
+    /** Guatemalan quetzal */
+    GTQ: 'GTQ',
+    /** Guyanese dollar */
+    GYD: 'GYD',
+    /** Hong Kong dollar */
+    HKD: 'HKD',
+    /** Honduran lempira */
+    HNL: 'HNL',
+    /** Croatian kuna */
+    HRK: 'HRK',
+    /** Haitian gourde */
+    HTG: 'HTG',
+    /** Hungarian forint */
+    HUF: 'HUF',
+    /** Indonesian rupiah */
+    IDR: 'IDR',
+    /** Israeli new shekel */
+    ILS: 'ILS',
+    /** Indian rupee */
+    INR: 'INR',
+    /** Iraqi dinar */
+    IQD: 'IQD',
+    /** Iranian rial */
+    IRR: 'IRR',
+    /** Icelandic króna */
+    ISK: 'ISK',
+    /** Jamaican dollar */
+    JMD: 'JMD',
+    /** Jordanian dinar */
+    JOD: 'JOD',
+    /** Japanese yen */
+    JPY: 'JPY',
+    /** Kenyan shilling */
+    KES: 'KES',
+    /** Kyrgyzstani som */
+    KGS: 'KGS',
+    /** Cambodian riel */
+    KHR: 'KHR',
+    /** Comoro franc */
+    KMF: 'KMF',
+    /** North Korean won */
+    KPW: 'KPW',
+    /** South Korean won */
+    KRW: 'KRW',
+    /** Kuwaiti dinar */
+    KWD: 'KWD',
+    /** Cayman Islands dollar */
+    KYD: 'KYD',
+    /** Kazakhstani tenge */
+    KZT: 'KZT',
+    /** Lao kip */
+    LAK: 'LAK',
+    /** Lebanese pound */
+    LBP: 'LBP',
+    /** Sri Lankan rupee */
+    LKR: 'LKR',
+    /** Liberian dollar */
+    LRD: 'LRD',
+    /** Lesotho loti */
+    LSL: 'LSL',
+    /** Libyan dinar */
+    LYD: 'LYD',
+    /** Moroccan dirham */
+    MAD: 'MAD',
+    /** Moldovan leu */
+    MDL: 'MDL',
+    /** Malagasy ariary */
+    MGA: 'MGA',
+    /** Macedonian denar */
+    MKD: 'MKD',
+    /** Myanmar kyat */
+    MMK: 'MMK',
+    /** Mongolian tögrög */
+    MNT: 'MNT',
+    /** Macanese pataca */
+    MOP: 'MOP',
+    /** Mauritanian ouguiya */
+    MRU: 'MRU',
+    /** Mauritian rupee */
+    MUR: 'MUR',
+    /** Maldivian rufiyaa */
+    MVR: 'MVR',
+    /** Malawian kwacha */
+    MWK: 'MWK',
+    /** Mexican peso */
+    MXN: 'MXN',
+    /** Malaysian ringgit */
+    MYR: 'MYR',
+    /** Mozambican metical */
+    MZN: 'MZN',
+    /** Namibian dollar */
+    NAD: 'NAD',
+    /** Nigerian naira */
+    NGN: 'NGN',
+    /** Nicaraguan córdoba */
+    NIO: 'NIO',
+    /** Norwegian krone */
+    NOK: 'NOK',
+    /** Nepalese rupee */
+    NPR: 'NPR',
+    /** New Zealand dollar */
+    NZD: 'NZD',
+    /** Omani rial */
+    OMR: 'OMR',
+    /** Panamanian balboa */
+    PAB: 'PAB',
+    /** Peruvian sol */
+    PEN: 'PEN',
+    /** Papua New Guinean kina */
+    PGK: 'PGK',
+    /** Philippine peso */
+    PHP: 'PHP',
+    /** Pakistani rupee */
+    PKR: 'PKR',
+    /** Polish złoty */
+    PLN: 'PLN',
+    /** Paraguayan guaraní */
+    PYG: 'PYG',
+    /** Qatari riyal */
+    QAR: 'QAR',
+    /** Romanian leu */
+    RON: 'RON',
+    /** Serbian dinar */
+    RSD: 'RSD',
+    /** Russian ruble */
+    RUB: 'RUB',
+    /** Rwandan franc */
+    RWF: 'RWF',
+    /** Saudi riyal */
+    SAR: 'SAR',
+    /** Solomon Islands dollar */
+    SBD: 'SBD',
+    /** Seychelles rupee */
+    SCR: 'SCR',
+    /** Sudanese pound */
+    SDG: 'SDG',
+    /** Swedish krona/kronor */
+    SEK: 'SEK',
+    /** Singapore dollar */
+    SGD: 'SGD',
+    /** Saint Helena pound */
+    SHP: 'SHP',
+    /** Sierra Leonean leone */
+    SLL: 'SLL',
+    /** Somali shilling */
+    SOS: 'SOS',
+    /** Surinamese dollar */
+    SRD: 'SRD',
+    /** South Sudanese pound */
+    SSP: 'SSP',
+    /** São Tomé and Príncipe dobra */
+    STN: 'STN',
+    /** Salvadoran colón */
+    SVC: 'SVC',
+    /** Syrian pound */
+    SYP: 'SYP',
+    /** Swazi lilangeni */
+    SZL: 'SZL',
+    /** Thai baht */
+    THB: 'THB',
+    /** Tajikistani somoni */
+    TJS: 'TJS',
+    /** Turkmenistan manat */
+    TMT: 'TMT',
+    /** Tunisian dinar */
+    TND: 'TND',
+    /** Tongan paʻanga */
+    TOP: 'TOP',
+    /** Turkish lira */
+    TRY: 'TRY',
+    /** Trinidad and Tobago dollar */
+    TTD: 'TTD',
+    /** New Taiwan dollar */
+    TWD: 'TWD',
+    /** Tanzanian shilling */
+    TZS: 'TZS',
+    /** Ukrainian hryvnia */
+    UAH: 'UAH',
+    /** Ugandan shilling */
+    UGX: 'UGX',
+    /** United States dollar */
+    USD: 'USD',
+    /** Uruguayan peso */
+    UYU: 'UYU',
+    /** Uzbekistan som */
+    UZS: 'UZS',
+    /** Venezuelan bolívar soberano */
+    VES: 'VES',
+    /** Vietnamese đồng */
+    VND: 'VND',
+    /** Vanuatu vatu */
+    VUV: 'VUV',
+    /** Samoan tala */
+    WST: 'WST',
+    /** CFA franc BEAC */
+    XAF: 'XAF',
+    /** East Caribbean dollar */
+    XCD: 'XCD',
+    /** CFA franc BCEAO */
+    XOF: 'XOF',
+    /** CFP franc (franc Pacifique) */
+    XPF: 'XPF',
+    /** Yemeni rial */
+    YER: 'YER',
+    /** South African rand */
+    ZAR: 'ZAR',
+    /** Zambian kwacha */
+    ZMW: 'ZMW',
+    /** Zimbabwean dollar */
+    ZWL: 'ZWL',
+};

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

@@ -0,0 +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;
+}