@wilshop/dashboard 3.5.2

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

@@ -0,0 +1,45 @@
+import * as React from "react"
+import * as TogglePrimitive from "@radix-ui/react-toggle"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/vdb/lib/utils.js"
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-9 px-2 min-w-9",
+        sm: "h-8 px-1.5 min-w-8",
+        lg: "h-10 px-2.5 min-w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof TogglePrimitive.Root> &
+  VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive.Root
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Toggle, toggleVariants }

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

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from './button.js';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip.js';
+
+const meta = {
+    title: 'UI/Tooltip',
+    component: Tooltip,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+} satisfies Meta<typeof Tooltip>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+    render: () => (
+        <TooltipProvider>
+            <Tooltip>
+                <TooltipTrigger asChild>
+                    <Button>Hover me</Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                    <p>This is a tooltip</p>
+                </TooltipContent>
+            </Tooltip>
+        </TooltipProvider>
+    ),
+};

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

@@ -0,0 +1,51 @@
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as React from 'react';
+
+import { cn } from '@/vdb/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-secondary text-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-secondary fill-secondary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+            </TooltipPrimitive.Content>
+        </TooltipPrimitive.Portal>
+    );
+}
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/src/lib/constants.ts

@@ -0,0 +1,336 @@
+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__';
+
+/**
+ * Local storage keys
+ */
+export const LS_KEY_SESSION_TOKEN = 'vendure-session-token';
+export const LS_KEY_USER_SETTINGS = 'vendure-user-settings';
+export const LS_KEY_SELECTED_CHANNEL_TOKEN = 'vendure-selected-channel-token';
+export const LS_KEY_SHIPPING_TEST_ORDER = 'vendure-shipping-test-order';
+export const LS_KEY_SHIPPING_TEST_ADDRESS = 'vendure-shipping-test-address';
+
+/**
+ * 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/alert/alert-extensions.tsx

@@ -0,0 +1,19 @@
+import { DashboardAlertDefinition } from '../extension-api/types/alerts.js';
+import { globalRegistry } from '../registry/global-registry.js';
+
+globalRegistry.register('dashboardAlertRegistry', new Map<string, DashboardAlertDefinition>());
+
+export function registerAlert<TResponse>(alert: DashboardAlertDefinition<TResponse>) {
+    globalRegistry.set('dashboardAlertRegistry', map => {
+        map.set(alert.id, alert);
+        return map;
+    });
+}
+
+export function getAlertRegistry() {
+    return globalRegistry.get('dashboardAlertRegistry');
+}
+
+export function getAlert(id: string) {
+    return getAlertRegistry().get(id);
+}

package/src/lib/framework/alert/alert-item.tsx

@@ -0,0 +1,44 @@
+import { Button } from '@/vdb/components/ui/button.js';
+import { AlertEntry } from '@/vdb/hooks/use-alerts.js';
+import { cn } from '@/vdb/lib/utils.js';
+import { ComponentProps } from 'react';
+
+interface AlertItemProps extends ComponentProps<'div'> {
+    alert: AlertEntry;
+}
+
+export function AlertItem({ alert, className, ...props }: Readonly<AlertItemProps>) {
+    if (!alert.active) {
+        return null;
+    }
+    const { definition: def } = alert;
+
+    return (
+        <div className={cn('flex items-center justify-between gap-1', className)} {...props}>
+            <div className="flex flex-col">
+                <span className="text-sm">
+                    {typeof def.title === 'string' ? def.title : def.title(alert.lastData)}
+                </span>
+                <span className="text-xs text-muted-foreground">
+                    {typeof def.description === 'string'
+                        ? def.description
+                        : def.description?.(alert.lastData)}
+                </span>
+            </div>
+            <div className="flex items-center gap-1">
+                {def.actions?.map(action => (
+                    <Button
+                        key={action.label}
+                        variant="secondary"
+                        size="sm"
+                        onClick={async () => {
+                            await action.onClick({ data: alert.lastData, dismiss: () => alert.dismiss() });
+                        }}
+                    >
+                        {action.label}
+                    </Button>
+                ))}
+            </div>
+        </div>
+    );
+}

package/src/lib/framework/alert/alerts-indicator.tsx

@@ -0,0 +1,22 @@
+import { useAlerts } from '@/vdb/hooks/use-alerts.js';
+import { cn } from '@/vdb/lib/utils.js';
+
+export function AlertsIndicator() {
+    const { activeCount, highestSeverity } = useAlerts();
+
+    if (activeCount === 0) {
+        return null;
+    }
+
+    return (
+        <div
+            className={cn(
+                `absolute -right-1 -top-1 rounded-full bg-primary text-xs w-4 h-4 flex items-center justify-center`,
+                highestSeverity === 'error' && 'bg-destructive',
+                highestSeverity === 'warning' && 'bg-yellow-400 dark:bg-yellow-600',
+            )}
+        >
+            {activeCount}
+        </div>
+    );
+}

package/src/lib/framework/alert/search-index-buffer-alert/search-index-buffer-alert.ts

@@ -0,0 +1,41 @@
+import { api } from '@/vdb/graphql/api.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { toast } from 'sonner';
+
+import { DashboardAlertDefinition } from '../../extension-api/types/index.js';
+
+const pendingSearchIndexUpdatesDocument = graphql(`
+    query GetPendingSearchIndexUpdates {
+        pendingSearchIndexUpdates
+    }
+`);
+
+export const runPendingSearchIndexUpdatesDocument = graphql(`
+    mutation RunPendingSearchIndexUpdates {
+        runPendingSearchIndexUpdates {
+            success
+        }
+    }
+`);
+
+export const searchIndexBufferAlert: DashboardAlertDefinition<number> = {
+    id: 'search-index-buffer-alert',
+    check: async () => {
+        const data = await api.query(pendingSearchIndexUpdatesDocument);
+        return data.pendingSearchIndexUpdates;
+    },
+    shouldShow: data => data > 0,
+    title: data => /* i18n*/ `${data} pending search index updates`,
+    severity: data => (data < 10 ? 'info' : 'warning'),
+    actions: [
+        {
+            label: /* i18n*/ `Run pending updates`,
+            onClick: async ({ dismiss }) => {
+                await api.mutate(runPendingSearchIndexUpdatesDocument, {});
+                toast.success(/* i18n*/ 'Running pending search index updates');
+                dismiss();
+            },
+        },
+    ],
+    recheckInterval: 60_000,
+};

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

@@ -0,0 +1,18 @@
+import { DashboardFormComponent } from '@/vdb/framework/form-engine/form-engine-types.js';
+import React from 'react';
+import { getDisplayComponent } from '../extension-api/display-component-extensions.js';
+import { getInputComponent } from '../extension-api/input-component-extensions.js';
+
+export type DataDisplayComponent<T extends Record<string, any> = Record<string, any>> = React.ComponentType<T & { value: any}>;
+
+// Component registry hook that uses the global registry
+export function useComponentRegistry() {
+    return {
+        getDisplayComponent: (id: string): DataDisplayComponent | undefined => {
+            return getDisplayComponent(id);
+        },
+        getInputComponent: (id: string): DashboardFormComponent | undefined => {
+            return getInputComponent(id);
+        },
+    };
+}

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { useComponentRegistry } from './component-registry.js';
+
+/**
+ * @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(
+    props: Readonly<{
+        id: string;
+        value: any;
+    }>,
+): React.ReactNode {
+    const { getDisplayComponent } = useComponentRegistry();
+    const Component = getDisplayComponent(props.id.toString());
+    if (!Component) {
+        throw new Error(`Component with id ${props.id.toString()} not found`);
+    }
+    const { value, ...rest } = props;
+    return <Component value={value} {...rest} />;
+}