@wilshop/dashboard 3.5.2

package/src/lib/index.ts

@@ -0,0 +1,293 @@
+// This file is auto-generated. Do not edit manually.
+
+export * from './components/data-display/boolean.js';
+export * from './components/data-display/date-time.js';
+export * from './components/data-display/json.js';
+export * from './components/data-display/money.js';
+export * from './components/data-input/affixed-input.js';
+export * from './components/data-input/boolean-input.js';
+export * from './components/data-input/checkbox-input.js';
+export * from './components/data-input/combination-mode-input.js';
+export * from './components/data-input/configurable-operation-list-input.js';
+export * from './components/data-input/custom-field-list-input.js';
+export * from './components/data-input/customer-group-input.js';
+export * from './components/data-input/datetime-input.js';
+export * from './components/data-input/default-relation-input.js';
+export * from './components/data-input/facet-value-input.js';
+export * from './components/data-input/money-input.js';
+export * from './components/data-input/number-input.js';
+export * from './components/data-input/password-form-input.js';
+export * from './components/data-input/product-multi-selector-input.js';
+export * from './components/data-input/relation-input.js';
+export * from './components/data-input/relation-selector.js';
+export * from './components/data-input/rich-text-input.js';
+export * from './components/data-input/select-with-options.js';
+export * from './components/data-input/slug-input.js';
+export * from './components/data-input/struct-form-input.js';
+export * from './components/data-input/text-input.js';
+export * from './components/data-input/textarea-input.js';
+export * from './components/data-table/add-filter-menu.js';
+export * from './components/data-table/column-header-wrapper.js';
+export * from './components/data-table/data-table-bulk-action-item.js';
+export * from './components/data-table/data-table-bulk-actions.js';
+export * from './components/data-table/data-table-column-header.js';
+export * from './components/data-table/data-table-context.js';
+export * from './components/data-table/data-table-faceted-filter.js';
+export * from './components/data-table/data-table-filter-badge-editable.js';
+export * from './components/data-table/data-table-filter-badge.js';
+export * from './components/data-table/data-table-filter-dialog.js';
+export * from './components/data-table/data-table-pagination.js';
+export * from './components/data-table/data-table-utils.js';
+export * from './components/data-table/data-table-view-options.js';
+export * from './components/data-table/data-table.js';
+export * from './components/data-table/filters/data-table-boolean-filter.js';
+export * from './components/data-table/filters/data-table-datetime-filter.js';
+export * from './components/data-table/filters/data-table-id-filter.js';
+export * from './components/data-table/filters/data-table-number-filter.js';
+export * from './components/data-table/filters/data-table-string-filter.js';
+export * from './components/data-table/global-views-bar.js';
+export * from './components/data-table/global-views-sheet.js';
+export * from './components/data-table/human-readable-operator.js';
+export * from './components/data-table/manage-global-views-button.js';
+export * from './components/data-table/my-views-button.js';
+export * from './components/data-table/refresh-button.js';
+export * from './components/data-table/save-view-button.js';
+export * from './components/data-table/save-view-dialog.js';
+export * from './components/data-table/types.js';
+export * from './components/data-table/use-all-bulk-actions.js';
+export * from './components/data-table/use-generated-columns.js';
+export * from './components/data-table/user-views-sheet.js';
+export * from './components/data-table/views-sheet.js';
+export * from './components/date-range-picker.js';
+export * from './components/labeled-data.js';
+export * from './components/layout/app-layout.js';
+export * from './components/layout/app-sidebar.js';
+export * from './components/layout/channel-switcher.js';
+export * from './components/layout/content-language-selector.js';
+export * from './components/layout/dev-mode-indicator.js';
+export * from './components/layout/generated-breadcrumbs.js';
+export * from './components/layout/language-dialog.js';
+export * from './components/layout/manage-languages-dialog.js';
+export * from './components/layout/nav-item-wrapper.js';
+export * from './components/layout/nav-main.js';
+export * from './components/layout/nav-projects.js';
+export * from './components/layout/nav-user.js';
+export * from './components/login/login-form.js';
+export * from './components/shared/alerts.js';
+export * from './components/shared/animated-number.js';
+export * from './components/shared/asset/asset-bulk-actions.js';
+export * from './components/shared/asset/asset-focal-point-editor.js';
+export * from './components/shared/asset/asset-gallery.js';
+export * from './components/shared/asset/asset-picker-dialog.js';
+export * from './components/shared/asset/asset-preview-dialog.js';
+export * from './components/shared/asset/asset-preview-selector.js';
+export * from './components/shared/asset/asset-preview.js';
+export * from './components/shared/asset/asset-properties.js';
+export * from './components/shared/assign-to-channel-bulk-action.js';
+export * from './components/shared/assign-to-channel-dialog.js';
+export * from './components/shared/assigned-facet-values.js';
+export * from './components/shared/channel-code-label.js';
+export * from './components/shared/channel-selector.js';
+export * from './components/shared/configurable-operation-arg-input.js';
+export * from './components/shared/configurable-operation-input.js';
+export * from './components/shared/configurable-operation-multi-selector.js';
+export * from './components/shared/configurable-operation-selector.js';
+export * from './components/shared/confirmation-dialog.js';
+export * from './components/shared/copyable-text.js';
+export * from './components/shared/country-selector.js';
+export * from './components/shared/currency-selector.js';
+export * from './components/shared/custom-fields-form.js';
+export * from './components/shared/customer-address-form.js';
+export * from './components/shared/customer-group-chip.js';
+export * from './components/shared/customer-group-selector.js';
+export * from './components/shared/customer-selector.js';
+export * from './components/shared/detail-page-button.js';
+export * from './components/shared/entity-assets.js';
+export * from './components/shared/error-page.js';
+export * from './components/shared/facet-value-chip.js';
+export * from './components/shared/facet-value-selector.js';
+export * from './components/shared/form-field-wrapper.js';
+export * from './components/shared/history-timeline/history-entry-date.js';
+export * from './components/shared/history-timeline/history-note-checkbox.js';
+export * from './components/shared/history-timeline/history-note-editor.js';
+export * from './components/shared/history-timeline/history-note-entry.js';
+export * from './components/shared/history-timeline/history-note-input.js';
+export * from './components/shared/history-timeline/history-timeline-with-grouping.js';
+export * from './components/shared/history-timeline/history-timeline.js';
+export * from './components/shared/history-timeline/use-history-note-editor.js';
+export * from './components/shared/icon-mark.js';
+export * from './components/shared/language-selector.js';
+export * from './components/shared/logo-mark.js';
+export * from './components/shared/multi-select.js';
+export * from './components/shared/navigation-confirmation.js';
+export * from './components/shared/option-value-input.js';
+export * from './components/shared/paginated-list-data-table.js';
+export * from './components/shared/permission-guard.js';
+export * from './components/shared/product-variant-selector.js';
+export * from './components/shared/remove-from-channel-bulk-action.js';
+export * from './components/shared/rich-text-editor/image-dialog.js';
+export * from './components/shared/rich-text-editor/link-dialog.js';
+export * from './components/shared/rich-text-editor/responsive-toolbar.js';
+export * from './components/shared/rich-text-editor/rich-text-editor.js';
+export * from './components/shared/rich-text-editor/table-delete-menu.js';
+export * from './components/shared/rich-text-editor/table-edit-icons.js';
+export * from './components/shared/role-code-label.js';
+export * from './components/shared/role-selector.js';
+export * from './components/shared/seller-selector.js';
+export * from './components/shared/stock-level-label.js';
+export * from './components/shared/table-cell/order-table-cell-components.js';
+export * from './components/shared/tax-category-selector.js';
+export * from './components/shared/translatable-form-field.js';
+export * from './components/shared/vendure-image.js';
+export * from './components/shared/zone-selector.js';
+export * from './components/ui/accordion.js';
+export * from './components/ui/alert-dialog.js';
+export * from './components/ui/alert.js';
+export * from './components/ui/aspect-ratio.js';
+export * from './components/ui/badge.js';
+export * from './components/ui/breadcrumb.js';
+export * from './components/ui/button.js';
+export * from './components/ui/calendar.js';
+export * from './components/ui/card.js';
+export * from './components/ui/carousel.js';
+export * from './components/ui/chart.js';
+export * from './components/ui/checkbox.js';
+export * from './components/ui/collapsible.js';
+export * from './components/ui/command.js';
+export * from './components/ui/context-menu.js';
+export * from './components/ui/dialog.js';
+export * from './components/ui/drawer.js';
+export * from './components/ui/dropdown-menu.js';
+export * from './components/ui/form.js';
+export * from './components/ui/grid-layout.js';
+export * from './components/ui/hover-card.js';
+export * from './components/ui/input-group.js';
+export * from './components/ui/input-otp.js';
+export * from './components/ui/input.js';
+export * from './components/ui/label.js';
+export * from './components/ui/menubar.js';
+export * from './components/ui/navigation-menu.js';
+export * from './components/ui/pagination.js';
+export * from './components/ui/password-input.js';
+export * from './components/ui/popover.js';
+export * from './components/ui/progress.js';
+export * from './components/ui/radio-group.js';
+export * from './components/ui/resizable.js';
+export * from './components/ui/scroll-area.js';
+export * from './components/ui/select.js';
+export * from './components/ui/separator.js';
+export * from './components/ui/sheet.js';
+export * from './components/ui/sidebar-context.js';
+export * from './components/ui/sidebar.js';
+export * from './components/ui/skeleton.js';
+export * from './components/ui/slider.js';
+export * from './components/ui/sonner.js';
+export * from './components/ui/switch.js';
+export * from './components/ui/table.js';
+export * from './components/ui/tabs.js';
+export * from './components/ui/textarea.js';
+export * from './components/ui/toggle-group.js';
+export * from './components/ui/toggle.js';
+export * from './components/ui/tooltip.js';
+export * from './framework/alert/alert-extensions.js';
+export * from './framework/alert/alert-item.js';
+export * from './framework/alert/alerts-indicator.js';
+export * from './framework/alert/search-index-buffer-alert/search-index-buffer-alert.js';
+export * from './framework/component-registry/component-registry.js';
+export * from './framework/component-registry/display-component.js';
+export * from './framework/dashboard-widget/base-widget.js';
+export * from './framework/dashboard-widget/latest-orders-widget/latest-orders-widget.graphql.js';
+export * from './framework/dashboard-widget/metrics-widget/chart.js';
+export * from './framework/dashboard-widget/metrics-widget/metrics-widget.graphql.js';
+export * from './framework/dashboard-widget/orders-summary/order-summary-widget.graphql.js';
+export * from './framework/dashboard-widget/widget-extensions.js';
+export * from './framework/dashboard-widget/widget-filters-context.js';
+export * from './framework/data-table/data-table-extensions.js';
+export * from './framework/defaults.js';
+export * from './framework/document-extension/extend-detail-form-query.js';
+export * from './framework/document-extension/extend-document.js';
+export * from './framework/document-introspection/add-custom-fields.js';
+export * from './framework/document-introspection/get-document-structure.js';
+export * from './framework/document-introspection/hooks.js';
+export * from './framework/document-introspection/include-only-selected-list-fields.js';
+export * from './framework/document-introspection/testing-utils.js';
+export * from './framework/extension-api/define-dashboard-extension.js';
+export * from './framework/extension-api/display-component-extensions.js';
+export * from './framework/extension-api/extension-api-types.js';
+export * from './framework/extension-api/input-component-extensions.js';
+export * from './framework/extension-api/logic/alerts.js';
+export * from './framework/extension-api/logic/data-table.js';
+export * from './framework/extension-api/logic/detail-forms.js';
+export * from './framework/extension-api/logic/form-components.js';
+export * from './framework/extension-api/logic/history-entries.js';
+export * from './framework/extension-api/logic/layout.js';
+export * from './framework/extension-api/logic/login.js';
+export * from './framework/extension-api/logic/navigation.js';
+export * from './framework/extension-api/logic/widgets.js';
+export * from './framework/extension-api/types/alerts.js';
+export * from './framework/extension-api/types/data-table.js';
+export * from './framework/extension-api/types/detail-forms.js';
+export * from './framework/extension-api/types/form-components.js';
+export * from './framework/extension-api/types/history-entries.js';
+export * from './framework/extension-api/types/layout.js';
+export * from './framework/extension-api/types/login.js';
+export * from './framework/extension-api/types/navigation.js';
+export * from './framework/extension-api/types/widgets.js';
+export * from './framework/extension-api/use-dashboard-extensions.js';
+export * from './framework/extension-api/use-login-extensions.js';
+export * from './framework/form-engine/custom-form-component-extensions.js';
+export * from './framework/form-engine/custom-form-component.js';
+export * from './framework/form-engine/default-input-for-type.js';
+export * from './framework/form-engine/form-control-adapter.js';
+export * from './framework/form-engine/form-engine-types.js';
+export * from './framework/form-engine/form-schema-tools.js';
+export * from './framework/form-engine/overridden-form-component.js';
+export * from './framework/form-engine/use-generated-form.js';
+export * from './framework/form-engine/utils.js';
+export * from './framework/form-engine/value-transformers.js';
+export * from './framework/history-entry/history-entry-extensions.js';
+export * from './framework/history-entry/history-entry.js';
+export * from './framework/layout-engine/dev-mode-button.js';
+export * from './framework/layout-engine/layout-extensions.js';
+export * from './framework/layout-engine/location-wrapper.js';
+export * from './framework/layout-engine/page-block-provider.js';
+export * from './framework/layout-engine/page-layout.js';
+export * from './framework/layout-engine/page-provider.js';
+export * from './framework/nav-menu/nav-menu-extensions.js';
+export * from './framework/page/detail-page-route-loader.js';
+export * from './framework/page/detail-page.js';
+export * from './framework/page/list-page.js';
+export * from './framework/page/page-api.js';
+export * from './framework/page/page-types.js';
+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 './graphql/settings-store-operations.js';
+export * from './hooks/use-alerts.js';
+export * from './hooks/use-auth.js';
+export * from './hooks/use-channel.js';
+export * from './hooks/use-custom-field-config.js';
+export * from './hooks/use-display-locale.js';
+export * from './hooks/use-dynamic-translations.js';
+export * from './hooks/use-extended-detail-query.js';
+export * from './hooks/use-extended-list-query.js';
+export * from './hooks/use-floating-bulk-actions.js';
+export * from './hooks/use-grouped-permissions.js';
+export * from './hooks/use-local-format.js';
+export * from './hooks/use-mobile.js';
+export * from './hooks/use-page-block.js';
+export * from './hooks/use-page.js';
+export * from './hooks/use-permissions.js';
+export * from './hooks/use-saved-views.js';
+export * from './hooks/use-server-config.js';
+export * from './hooks/use-theme.js';
+export * from './hooks/use-ui-language-loader.js';
+export * from './hooks/use-user-settings.js';
+export * from './lib/load-i18n-messages.js';
+export * from './lib/trans.js';
+export * from './lib/utils.js';

package/src/lib/lib/load-i18n-messages.ts

@@ -0,0 +1,20 @@
+import { Messages } from '@lingui/core';
+
+export async function loadI18nMessages(locale: string): Promise<Messages> {
+    if (import.meta.env.PROD) {
+        // We add the vite-ignore directive because we do not want to transform and
+        // bundle this dynamic import. Instead, we actually want to load it at runtime
+        // as a normal dynamic JS import.
+        // These i18n JS files are generated during build by the `translationsPlugin` in the
+        // vite-plugin-translations.ts file.
+        const { messages } = await import(/* @vite-ignore */ `./i18n/${locale}.js`);
+        return messages;
+    } else {
+        // In dev mode we allow the dynamic import behaviour
+        const { messages } = await import(`../../i18n/locales/${locale}.po`);
+        const pluginTranslations = await import('virtual:plugin-translations');
+        const safeLocale = locale.replace(/-/g, '_');
+        const pluginTranslationsForLocale = pluginTranslations.default[safeLocale] ?? {};
+        return { ...messages, ...pluginTranslationsForLocale };
+    }
+}

package/src/lib/lib/trans.tsx

@@ -0,0 +1,20 @@
+// export { Trans } from '@lingui/react/macro';
+// export { useLingui } from '@lingui/react';
+
+
+/**
+ * This is a temporary work-around because the Lingui macros do not
+ * currently work when the dashboard is packaged in an npm
+ * module. Related issue: https://github.com/kentcdodds/babel-plugin-macros/issues/87
+ */
+// export function Trans({ children }: Readonly<{ children: React.ReactNode; context?: string }>) {
+//     return <>{children}</>;
+// }
+//
+// export function useLingui() {
+//     return {
+//         i18n: {
+//             t: (key: string) => key,
+//         },
+//     };
+// }

package/src/lib/lib/utils.ts

@@ -0,0 +1,111 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs));
+}
+
+/**
+ * Converts a camelCase string to Title Case.
+ * Examples:
+ *   "firstName" -> "First Name"
+ *   "dateOfBirth" -> "Date Of Birth"
+ *   "totalItems" -> "Total Items"
+ */
+export function camelCaseToTitleCase(text: string): string {
+    if (!text) return '';
+
+    return (
+        text
+            // Insert space before capital letters
+            .replace(/([A-Z])/g, ' $1')
+            // Capitalize first character
+            .replace(/^./, str => str.toUpperCase())
+            // Handle the case where the string starts with a capital
+            .trim()
+    );
+}
+
+/**
+ * Formats a file size in bytes to a human-readable string.
+ */
+export function formatFileSize(bytes: number): string {
+    if (bytes === 0) return '0 Bytes';
+
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)).toString() + ' ' + sizes[i];
+}
+
+/**
+ * This is a copy of the normalizeString function from @vendure/common/lib/normalize-string.js
+ * It is duplicated here due to issues importing from that package
+ * inside the monorepo.
+ */
+export function normalizeString(input: string, spaceReplacer = ' '): string {
+    const multipleSequentialReplacerRegex = new RegExp(`([${spaceReplacer}]){2,}`, 'g');
+
+    return (input || '')
+        .normalize('NFD')
+        .replace(/[\u00df]/g, 'ss')
+        .replace(/[\u1e9e]/g, 'SS')
+        .replace(/[\u0308]/g, 'e')
+        .replace(/[\u0300-\u036f]/g, '')
+        .toLowerCase()
+        .replace(/[!"£$%^&*()+[\]{};:@#~?\\/,|><`¬'=‘’©®™]/g, '')
+        .replace(/\s+/g, spaceReplacer)
+        .replace(multipleSequentialReplacerRegex, spaceReplacer);
+}
+
+/**
+ * Removes any readonly custom fields from form values before submission.
+ * Also removes localeString and localeText fields from the root customFields object
+ * since they should only exist in the translations array.
+ * This prevents errors when submitting readonly custom field values to mutations.
+ *
+ * @param values - The form values that may contain custom fields
+ * @param customFieldConfigs - Array of custom field configurations for the entity
+ * @returns The values with readonly custom fields removed and locale fields properly placed
+ */
+export function removeReadonlyAndLocalizedCustomFields<T extends Record<string, any>>(
+    values: T,
+    customFieldConfigs: Array<{ name: string; readonly?: boolean | null; type?: string }> = [],
+): T {
+    if (!values || !customFieldConfigs?.length) {
+        return values;
+    }
+
+    const result = structuredClone(values);
+    const readonlyFieldNames = customFieldConfigs
+        .filter(config => config.readonly === true)
+        .map(config => config.name);
+    const localeFieldNames = customFieldConfigs
+        .filter(config => config.type === 'localeString' || config.type === 'localeText')
+        .map(config => config.name);
+    const fieldsToRemoveFromRoot = [...readonlyFieldNames, ...localeFieldNames];
+
+    if (result.customFields && typeof result.customFields === 'object') {
+        fieldsToRemoveFromRoot.forEach(fieldName => {
+            delete result.customFields[fieldName];
+        });
+    }
+
+    removeReadonlyFromTranslations(result, readonlyFieldNames);
+    return result;
+}
+
+function removeReadonlyFromTranslations(entity: Record<string, any>, readonlyFieldNames: string[]): void {
+    if (!Array.isArray(entity.translations)) {
+        return;
+    }
+
+    entity.translations.forEach(translation => {
+        if (translation?.customFields && typeof translation.customFields === 'object') {
+            readonlyFieldNames.forEach(fieldName => {
+                delete translation.customFields[fieldName];
+            });
+        }
+    });
+}

package/src/lib/providers/alerts-provider.tsx

@@ -0,0 +1,60 @@
+import { getAlertRegistry } from '@/vdb/framework/alert/alert-extensions.js';
+import { DashboardAlertDefinition } from '@/vdb/framework/extension-api/types/alerts.js';
+import { useQueries, UseQueryOptions } from '@tanstack/react-query';
+import { createContext, ReactNode, useContext, useEffect, useState } from 'react';
+
+interface AlertsContextValue {
+    alertDefs: DashboardAlertDefinition[];
+    rawResults: any[];
+    dismissedAlerts: Map<string, number>;
+    setDismissedAlerts: React.Dispatch<React.SetStateAction<Map<string, number>>>;
+    enabledQueries: boolean;
+}
+
+const AlertsContext = createContext<AlertsContextValue | undefined>(undefined);
+
+export function AlertsProvider({ children }: { children: ReactNode }) {
+    const initialDelayMs = 5_000;
+    const [alertDefs, setAlertDefs] = useState<DashboardAlertDefinition[]>([]);
+    const [enabledQueries, setEnabledQueries] = useState(false);
+    const [dismissedAlerts, setDismissedAlerts] = useState<Map<string, number>>(new Map());
+
+    useEffect(() => {
+        setAlertDefs(Array.from(getAlertRegistry().values()));
+    }, []);
+
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            setEnabledQueries(true);
+        }, initialDelayMs);
+        return () => clearTimeout(timer);
+    }, []);
+
+    const rawResults = useQueries({
+        queries: alertDefs.map(
+            alert =>
+                ({
+                    queryKey: ['alert', alert.id],
+                    queryFn: () => alert.check(),
+                    refetchInterval: alert.recheckInterval,
+                    enabled: enabledQueries,
+                }) as UseQueryOptions,
+        ),
+    });
+
+    return (
+        <AlertsContext.Provider
+            value={{ alertDefs, rawResults, dismissedAlerts, setDismissedAlerts, enabledQueries }}
+        >
+            {children}
+        </AlertsContext.Provider>
+    );
+}
+
+export function useAlertsContext() {
+    const context = useContext(AlertsContext);
+    if (!context) {
+        throw new Error('useAlertsContext must be used within AlertsProvider');
+    }
+    return context;
+}