@vendure/dashboard 3.3.5-master-202506250724 → 3.3.5-master-202506251305

package/src/lib/framework/layout-engine/page-block-provider.tsx

@@ -0,0 +1,6 @@
+import { PageBlockProps } from '@/framework/layout-engine/page-layout.js';
+import { createContext } from 'react';
+
+export type PageBlockContextValue = Pick<PageBlockProps, 'blockId' | 'column' | 'title' | 'description'>;
+
+export const PageBlockContext = createContext<PageBlockContextValue | undefined>(undefined);

package/src/lib/framework/layout-engine/page-layout.tsx

@@ -1,20 +1,21 @@
 import { CustomFieldsForm } from '@/components/shared/custom-fields-form.js';
+import { NavigationConfirmation } from '@/components/shared/navigation-confirmation.js';
 import { PermissionGuard } from '@/components/shared/permission-guard.js';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card.js';
 import { Form } from '@/components/ui/form.js';
 import { useCustomFieldConfig } from '@/hooks/use-custom-field-config.js';
 import { usePage } from '@/hooks/use-page.js';
 import { cn } from '@/lib/utils.js';
-import { NavigationConfirmation } from '@/components/shared/navigation-confirmation.js';
 import { useMediaQuery } from '@uidotdev/usehooks';
 import React, { ComponentProps } from 'react';
 import { Control, UseFormReturn } from 'react-hook-form';
 
 import { DashboardActionBarItem } from '../extension-api/extension-api-types.js';
 
+import { PageBlockContext } from '@/framework/layout-engine/page-block-provider.js';
+import { PageContext, PageContextValue } from '@/framework/layout-engine/page-provider.js';
 import { getDashboardActionBarItems, getDashboardPageBlocks } from './layout-extensions.js';
 import { LocationWrapper } from './location-wrapper.js';
-import { PageContext, PageContextValue } from '@/framework/layout-engine/page-provider.js';
 
 export interface PageProps extends ComponentProps<'div'> {
     pageId?: string;
@@ -45,9 +46,7 @@ export function Page({ children, pageId, entity, form, submitHandler, ...props }
     const childArray = React.Children.toArray(children);
 
     const pageTitle = childArray.find(child => React.isValidElement(child) && child.type === PageTitle);
-    const pageActionBar = childArray.find(
-        child => isOfType(child, PageActionBar),
-    );
+    const pageActionBar = childArray.find(child => isOfType(child, PageActionBar));
 
     const pageContent = childArray.filter(
         child => !isOfType(child, PageTitle) && !isOfType(child, PageActionBar),
@@ -73,7 +72,13 @@ export function Page({ children, pageId, entity, form, submitHandler, ...props }
     );
 }
 
-function PageContent({ pageHeader, pageContent, form, submitHandler, ...props }: {
+function PageContent({
+    pageHeader,
+    pageContent,
+    form,
+    submitHandler,
+    ...props
+}: {
     pageHeader: React.ReactNode;
     pageContent: React.ReactNode;
     form?: UseFormReturn<any>;
@@ -94,9 +99,14 @@ function PageContent({ pageHeader, pageContent, form, submitHandler, ...props }:
     );
 }
 
-export function PageContentWithOptionalForm({ form, pageHeader, pageContent, submitHandler }: {
+export function PageContentWithOptionalForm({
+    form,
+    pageHeader,
+    pageContent,
+    submitHandler,
+}: {
     form?: UseFormReturn<any>;
-    pageHeader: React.ReactNode
+    pageHeader: React.ReactNode;
     pageContent: React.ReactNode;
     submitHandler?: any;
 }) {
@@ -261,12 +271,8 @@ export function PageTitle({ children }: { children: React.ReactNode }) {
 export function PageActionBar({ children }: { children: React.ReactNode }) {
     let childArray = React.Children.toArray(children);
 
-    const leftContent = childArray.filter(
-        child => isOfType(child, PageActionBarLeft),
-    );
-    const rightContent = childArray.filter(
-        child => isOfType(child, PageActionBarRight),
-    );
+    const leftContent = childArray.filter(child => isOfType(child, PageActionBarLeft));
+    const rightContent = childArray.filter(child => isOfType(child, PageActionBarRight));
 
     return (
         <div className={cn('flex gap-2', leftContent.length > 0 ? 'justify-between' : 'justify-end')}>
@@ -348,18 +354,20 @@ export type PageBlockProps = {
  * @docsWeight 0
  * @since 3.3.0
  */
-export function PageBlock({ children, title, description, className, blockId }: PageBlockProps) {
+export function PageBlock({ children, title, description, className, blockId, column }: PageBlockProps) {
     return (
         <LocationWrapper blockId={blockId}>
-            <Card className={cn('w-full', className)}>
-                {title || description ? (
-                    <CardHeader>
-                        {title && <CardTitle>{title}</CardTitle>}
-                        {description && <CardDescription>{description}</CardDescription>}
-                    </CardHeader>
-                ) : null}
-                <CardContent className={cn(!title ? 'pt-6' : '')}>{children}</CardContent>
-            </Card>
+            <PageBlockContext.Provider value={{ blockId, title, description, column }}>
+                <Card className={cn('w-full', className)}>
+                    {title || description ? (
+                        <CardHeader>
+                            {title && <CardTitle>{title}</CardTitle>}
+                            {description && <CardDescription>{description}</CardDescription>}
+                        </CardHeader>
+                    ) : null}
+                    <CardContent className={cn(!title ? 'pt-6' : '')}>{children}</CardContent>
+                </Card>
+            </PageBlockContext.Provider>
         </LocationWrapper>
     );
 }
@@ -376,13 +384,15 @@ export function PageBlock({ children, title, description, className, blockId }:
  * @since 3.3.0
  */
 export function FullWidthPageBlock({
-                                       children,
-                                       className,
-                                       blockId,
-                                   }: Pick<PageBlockProps, 'children' | 'className' | 'blockId'>) {
+    children,
+    className,
+    blockId,
+}: Pick<PageBlockProps, 'children' | 'className' | 'blockId'>) {
     return (
         <LocationWrapper blockId={blockId}>
-            <div className={cn('w-full', className)}>{children}</div>
+            <PageBlockContext.Provider value={{ blockId, column: 'main' }}>
+                <div className={cn('w-full', className)}>{children}</div>
+            </PageBlockContext.Provider>
         </LocationWrapper>
     );
 }
@@ -398,10 +408,10 @@ export function FullWidthPageBlock({
  * @since 3.3.0
  */
 export function CustomFieldsPageBlock({
-                                          column,
-                                          entityType,
-                                          control,
-                                      }: {
+    column,
+    entityType,
+    control,
+}: {
     column: 'main' | 'side';
     entityType: string;
     control: Control<any, any>;

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

@@ -3,12 +3,13 @@ import {
     CustomFieldKeysOfItem,
     CustomizeColumnConfig,
     FacetedFilterConfig,
+    ListQueryFields,
     ListQueryOptionsShape,
     ListQueryShape,
-    ListQueryFields,
     PaginatedListDataTable,
     RowAction,
 } from '@/components/shared/paginated-list-data-table.js';
+import { BulkAction } from '@/framework/data-table/data-table-types.js';
 import { useUserSettings } from '@/hooks/use-user-settings.js';
 import { TypedDocumentNode } from '@graphql-typed-document-node/core';
 import { AnyRoute, AnyRouter, useNavigate } from '@tanstack/react-router';
@@ -16,13 +17,7 @@ import { ColumnFiltersState, SortingState, Table } from '@tanstack/react-table';
 import { TableOptions } from '@tanstack/table-core';
 
 import { addCustomFields } from '../document-introspection/add-custom-fields.js';
-import {
-    FullWidthPageBlock,
-    Page,
-    PageActionBar,
-    PageLayout,
-    PageTitle,
-} from '../layout-engine/page-layout.js';
+import { FullWidthPageBlock, Page, PageActionBar, PageLayout, PageTitle } from '../layout-engine/page-layout.js';
 
 /**
  * @description
@@ -57,6 +52,7 @@ export interface ListPageProps<
     rowActions?: RowAction<ListQueryFields<T>>[];
     transformData?: (data: any[]) => any[];
     setTableOptions?: (table: TableOptions<any>) => TableOptions<any>;
+    bulkActions?: BulkAction[];
 }
 
 /**
@@ -93,6 +89,7 @@ export function ListPage<
     rowActions,
     transformData,
     setTableOptions,
+    bulkActions,
 }: ListPageProps<T, U, V, AC>) {
     const route = typeof routeOrFn === 'function' ? routeOrFn() : routeOrFn;
     const routeSearch = route.useSearch();
@@ -191,6 +188,7 @@ export function ListPage<
                         }}
                         facetedFilters={facetedFilters}
                         rowActions={rowActions}
+                        bulkActions={bulkActions}
                         setTableOptions={setTableOptions}
                         transformData={transformData}
                     />

package/src/lib/framework/registry/registry-types.ts

@@ -1,5 +1,8 @@
+import React from 'react';
+
 import { DashboardAlertDefinition } from '../alert/types.js';
 import { DashboardWidgetDefinition } from '../dashboard-widget/types.js';
+import { BulkAction } from '../data-table/data-table-types.js';
 import {
     DashboardActionBarItem,
     DashboardPageBlockDefinition,
@@ -16,6 +19,5 @@ export interface GlobalRegistryContents {
     dashboardWidgetRegistry: Map<string, DashboardWidgetDefinition>;
     dashboardAlertRegistry: Map<string, DashboardAlertDefinition>;
     customFormComponents: Map<string, React.FunctionComponent<CustomFormComponentInputProps>>;
+    bulkActionsRegistry: Map<string, BulkAction[]>;
 }
-
-export type GlobalRegistryKey = keyof GlobalRegistryContents;

package/src/lib/hooks/use-page-block.tsx

@@ -0,0 +1,10 @@
+import { PageBlockContext } from '@/framework/layout-engine/page-block-provider.js';
+import { useContext } from 'react';
+
+export function usePageBlock() {
+    const pageBlock = useContext(PageBlockContext);
+    if (!pageBlock) {
+        throw new Error('PageBlockProvider not found');
+    }
+    return pageBlock;
+}

package/src/lib/index.ts

@@ -11,12 +11,13 @@ export * from './components/data-input/facet-value-input.js';
 export * from './components/data-input/money-input.js';
 export * from './components/data-input/richt-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';
 export * from './components/data-table/data-table-column-header.js';
 export * from './components/data-table/data-table-faceted-filter.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-types.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';
@@ -26,6 +27,7 @@ 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/human-readable-operator.js';
 export * from './components/data-table/refresh-button.js';
+export * from './components/data-table/types.js';
 export * from './components/layout/app-layout.js';
 export * from './components/layout/app-sidebar.js';
 export * from './components/layout/channel-switcher.js';
@@ -137,6 +139,8 @@ export * from './framework/dashboard-widget/orders-summary/index.js';
 export * from './framework/dashboard-widget/orders-summary/order-summary-widget.graphql.js';
 export * from './framework/dashboard-widget/types.js';
 export * from './framework/dashboard-widget/widget-extensions.js';
+export * from './framework/data-table/data-table-extensions.js';
+export * from './framework/data-table/data-table-types.js';
 export * from './framework/defaults.js';
 export * from './framework/document-introspection/add-custom-fields.js';
 export * from './framework/document-introspection/get-document-structure.js';
@@ -150,6 +154,7 @@ export * from './framework/form-engine/form-schema-tools.js';
 export * from './framework/form-engine/use-generated-form.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';
@@ -164,12 +169,14 @@ export * from './framework/registry/global-registry.js';
 export * from './framework/registry/registry-types.js';
 export * from './graphql/api.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';
 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-server-config.js';

package/vite/tests/barrel-exports.spec.ts

@@ -4,14 +4,18 @@ import { describe, expect, it } from 'vitest';
 import { loadVendureConfig } from '../utils/config-loader.js';
 
 describe('detecting plugins in barrel exports', () => {
-    it('should detect plugins in barrel exports', async () => {
-        const result = await loadVendureConfig({
-            tempDir: join(__dirname, './__temp'),
-            vendureConfigPath: join(__dirname, 'barrel-exports', 'vendure-config.ts'),
-        });
+    it(
+        'should detect plugins in barrel exports',
+        async () => {
+            const result = await loadVendureConfig({
+                tempDir: join(__dirname, './__temp'),
+                vendureConfigPath: join(__dirname, 'barrel-exports', 'vendure-config.ts'),
+            });
 
-        expect(result.pluginInfo).toHaveLength(1);
-        expect(result.pluginInfo[0].name).toBe('MyPlugin');
-        expect(result.pluginInfo[0].dashboardEntryPath).toBe('./dashboard/index.tsx');
-    });
+            expect(result.pluginInfo).toHaveLength(1);
+            expect(result.pluginInfo[0].name).toBe('MyPlugin');
+            expect(result.pluginInfo[0].dashboardEntryPath).toBe('./dashboard/index.tsx');
+        },
+        { timeout: 10_000 },
+    );
 });

package/vite/vite-plugin-config.ts

@@ -63,6 +63,7 @@ export function viteConfigPlugin({ packageRoot }: { packageRoot: string }): Plug
                     ...(config.optimizeDeps?.include || []),
                     '@/components > recharts',
                     '@/components > react-dropzone',
+                    '@vendure/common/lib/generated-types',
                 ],
             };
             return config;

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

@@ -12,7 +12,7 @@ const resolvedVirtualModuleId = `\0${virtualModuleId}`;
  * generates an import statement for each one, wrapped up in a `runDashboardExtensions()`
  * function which can then be imported and executed in the Dashboard app.
  */
-export function dashboardMetadataPlugin(options: { rootDir: string }): Plugin {
+export function dashboardMetadataPlugin(): Plugin {
     let configLoaderApi: ConfigLoaderApi;
     let loadVendureConfigResult: LoadVendureConfigResult;
     return {
@@ -52,11 +52,3 @@ export function dashboardMetadataPlugin(options: { rootDir: string }): Plugin {
         },
     };
 }
-
-/**
- * Converts an import path to a normalized path relative to the rootDir.
- */
-function normalizeImportPath(rootDir: string, importPath: string): string {
-    const relativePath = path.relative(rootDir, importPath).replace(/\\/g, '/');
-    return relativePath.replace(/\.tsx?$/, '.js');
-}

package/vite/vite-plugin-tailwind-source.ts

@@ -0,0 +1,65 @@
+import path from 'path';
+import { Plugin } from 'vite';
+
+import { LoadVendureConfigResult } from './utils/config-loader.js';
+import { ConfigLoaderApi, getConfigLoaderApi } from './vite-plugin-config-loader.js';
+
+/**
+ * This Vite plugin transforms the `app/styles.css` file to include a `@source` directive
+ * for each dashboard extension's source directory. This allows Tailwind CSS to
+ * include styles from these extensions when processing the CSS.
+ */
+export function dashboardTailwindSourcePlugin(): Plugin {
+    let configLoaderApi: ConfigLoaderApi;
+    let loadVendureConfigResult: LoadVendureConfigResult;
+    return {
+        name: 'vendure:dashboard-tailwind-source',
+        // Ensure this plugin runs before Tailwind CSS processing
+        enforce: 'pre',
+        configResolved({ plugins }) {
+            configLoaderApi = getConfigLoaderApi(plugins);
+        },
+        async transform(src, id) {
+            if (/app\/styles.css$/.test(id)) {
+                if (!loadVendureConfigResult) {
+                    loadVendureConfigResult = await configLoaderApi.getVendureConfig();
+                }
+                const { pluginInfo } = loadVendureConfigResult;
+                const dashboardExtensionDirs =
+                    pluginInfo
+                        ?.map(
+                            ({ dashboardEntryPath, pluginPath }) =>
+                                dashboardEntryPath && path.join(pluginPath, path.dirname(dashboardEntryPath)),
+                        )
+                        .filter(x => x != null) ?? [];
+                const sources = dashboardExtensionDirs
+                    .map(extension => {
+                        return `@source '${extension}';`;
+                    })
+                    .join('\n');
+
+                // Find the line with the specific comment and insert sources after it
+                const lines = src.split('\n');
+                const sourceCommentIndex = lines.findIndex(line =>
+                    line.includes(
+                        '/* @source rules from extensions will be added here by the dashboardTailwindSourcePlugin */',
+                    ),
+                );
+
+                if (sourceCommentIndex !== -1) {
+                    // Insert the sources after the comment line
+                    lines.splice(sourceCommentIndex + 1, 0, sources);
+                    const modifiedSrc = lines.join('\n');
+                    return {
+                        code: modifiedSrc,
+                    };
+                }
+
+                // If the comment is not found, append sources at the end
+                return {
+                    code: src + '\n' + sources,
+                };
+            }
+        },
+    };
+}

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

@@ -10,9 +10,10 @@ import { configLoaderPlugin } from './vite-plugin-config-loader.js';
 import { viteConfigPlugin } from './vite-plugin-config.js';
 import { dashboardMetadataPlugin } from './vite-plugin-dashboard-metadata.js';
 import { gqlTadaPlugin } from './vite-plugin-gql-tada.js';
-import { ThemeVariablesPluginOptions, themeVariablesPlugin } from './vite-plugin-theme.js';
+import { dashboardTailwindSourcePlugin } from './vite-plugin-tailwind-source.js';
+import { themeVariablesPlugin, ThemeVariablesPluginOptions } from './vite-plugin-theme.js';
 import { transformIndexHtmlPlugin } from './vite-plugin-transform-index.js';
-import { UiConfigPluginOptions, uiConfigPlugin } from './vite-plugin-ui-config.js';
+import { uiConfigPlugin, UiConfigPluginOptions } from './vite-plugin-ui-config.js';
 
 /**
  * @description
@@ -121,6 +122,7 @@ export function vendureDashboardPlugin(options: VitePluginVendureDashboardOption
             // },
         }),
         themeVariablesPlugin({ theme: options.theme }),
+        dashboardTailwindSourcePlugin(),
         tailwindcss(),
         configLoaderPlugin({
             vendureConfigPath: normalizedVendureConfigPath,
@@ -130,7 +132,7 @@ export function vendureDashboardPlugin(options: VitePluginVendureDashboardOption
         }),
         viteConfigPlugin({ packageRoot }),
         adminApiSchemaPlugin(),
-        dashboardMetadataPlugin({ rootDir: tempDir }),
+        dashboardMetadataPlugin(),
         uiConfigPlugin({ adminUiConfig: options.adminUiConfig }),
         ...(options.gqlTadaOutputPath
             ? [gqlTadaPlugin({ gqlTadaOutputPath: options.gqlTadaOutputPath, tempDir, packageRoot })]