docs(dashboard): Add more docs on customizing pages etc

docs/docs/guides/extending-the-dashboard/action-bar-items/index.md → docs/docs/guides/extending-the-dashboard/customizing-pages/action-bar-items.md

@@ -34,7 +34,7 @@ defineDashboardExtension({
 });
 ```
 
-![Action bar button](./action-bar-button.webp)
+![Action bar button](action-bar-button.webp)
 
 ## Context Data
 
@@ -66,7 +66,7 @@ defineDashboardExtension({
 });
 ```
 
-![Action bar dropdown](./action-bar-dropdown.webp)
+![Action bar dropdown](action-bar-dropdown.webp)
 
 ## Practical Examples
 

docs/docs/guides/extending-the-dashboard/customizing-pages/customizing-detail-pages.md

@@ -0,0 +1,61 @@
+---
+title: 'Customizing Detail Pages'
+---
+
+Using the [DashboardDetailFormExtensionDefinition](/reference/dashboard/extensions-api/detail-forms#dashboarddetailformextensiondefinition) you can
+customize any existing detail page in the Dashboard.
+
+## Custom form inputs
+
+You can replace any of the default form inputs with your own components using the `inputs` property.
+
+Let's say you want to replace the default HTML description editor with a markdown editor component:
+
+```tsx title="index.tsx"
+import { defineDashboardExtension } from '@vendure/dashboard';
+
+import { MarkdownEditor } from './markdown-editor';
+
+defineDashboardExtension({
+  dataTables: [{
+      pageId: 'product-detail',
+      inputs: [{
+          blockId: 'main-form',
+          field: 'description',
+          component: MarkdownEditor,
+      }],
+  }]
+});
+```
+
+To learn how to build custom form components, see the [Custom Form Elements guide](/guides/extending-the-dashboard/custom-form-components/).
+
+## Extending the detail query
+
+You might want to extend the GraphQL query used to fetch the data for the detail page. For example, to include new 
+fields that your plugin has defined so that you can render them in [custom page blocks](/guides/extending-the-dashboard/customizing-pages/page-blocks).
+
+
+```tsx title="index.tsx"
+import { defineDashboardExtension } from '@vendure/dashboard';
+
+defineDashboardExtension({
+  dataTables: [{
+      pageId: 'product-detail',
+      extendDetailDocument: `
+          query {
+              product(id: $id) {
+                  relatedProducts {
+                      id
+                      name
+                      featuredAsset {
+                        id
+                        preview
+                      }
+                  }
+              }
+          }
+      `,
+  }]
+});
+```

docs/docs/guides/extending-the-dashboard/customizing-pages/customizing-list-pages.md

@@ -0,0 +1,93 @@
+---
+title: 'Customizing List Pages'
+---
+
+Using the [DashboardDataTableExtensionDefinition](/reference/dashboard/extensions-api/data-tables#dashboarddatatableextensiondefinition) you can
+customize any existing data table in the Dashboard.
+
+## Custom table cell components
+
+You can define your own custom components to render specific table cells:
+
+```tsx title="index.tsx"
+import { defineDashboardExtension } from '@vendure/dashboard';
+
+defineDashboardExtension({
+  dataTables: [{
+      pageId: 'product-list',
+      displayComponents: [
+          {
+              column: 'slug',
+              // The component will be passed the cell's `value`,
+              // as well as all the other objects in the Tanstack Table
+              // `CellContext` object.
+              component: ({ value, cell, row, table }) => {
+                  return (
+                      <a href={`https://storefront.com/products/${value}`} target="_blank">
+                          {value}
+                      </a>
+                  );
+              },
+          },
+      ],
+  }]
+});
+```
+
+## Bulk actions
+
+You can define bulk actions on the selected table items. The bulk action component should use
+[DataTableBulkActionItem](/reference/dashboard/list-views/bulk-actions#datatablebulkactionitem).
+
+```tsx title="index.tsx"
+import { defineDashboardExtension, DataTableBulkActionItem } from '@vendure/dashboard';
+import { InfoIcon } from 'lucide-react';
+
+defineDashboardExtension({
+  dataTables: [{
+      pageId: 'product-list',
+      bulkActions: [
+          {
+              component: props => (
+                  <DataTableBulkActionItem
+                      onClick={() => {
+                          console.log('Selection:', props.selection);
+                          toast.message(`There are ${props.selection.length} selected items`);
+                      }}
+                      label="My Custom Action"
+                      icon={InfoIcon}
+                  />
+              ),
+          },
+      ],
+  }]
+});
+```
+
+## Extending the list query
+
+The GraphQL queries used by list views can be extended using the `extendListDocument` property, and passing 
+the additional fields you want to fetch:
+
+```tsx title="index.tsx"
+import { defineDashboardExtension, DataTableBulkActionItem } from '@vendure/dashboard';
+import { InfoIcon } from 'lucide-react';
+
+defineDashboardExtension({
+  dataTables: [{
+      pageId: 'product-list',
+      extendListDocument: `
+          query {
+              products {
+                  items {
+                      optionGroups {
+                          id
+                          name
+                      }
+                  }
+              }
+          }
+      `,
+  }]
+});
+```

docs/docs/guides/extending-the-dashboard/customizing-pages/index.md

@@ -0,0 +1,10 @@
+---
+title: 'Customizing Pages'
+---
+
+Existing pages in the Dashboard can be customized in many ways:
+
+- [Action bar buttons](/guides/extending-the-dashboard/customizing-pages/action-bar-items) can be added to the top of the page
+- [Page blocks](/guides/extending-the-dashboard/customizing-pages/page-blocks) can be added at any position, and existing page blocks can be replaced or removed.
+- [Extend list pages](/guides/extending-the-dashboard/customizing-pages/customizing-list-pages) with custom components, data and bulk actions
+- [Extend detail pages](/guides/extending-the-dashboard/customizing-pages/customizing-detail-pages) with custom components and data

docs/docs/reference/dashboard/components/asset-gallery.md

@@ -11,7 +11,7 @@ import MemberDescription from '@site/src/components/MemberDescription';
 
 ## AssetGallery
 
-<GenerationInfo sourceFile="packages/dashboard/src/lib/components/shared/asset/asset-gallery.tsx" sourceLine="155" packageName="@vendure/dashboard" />
+<GenerationInfo sourceFile="packages/dashboard/src/lib/components/shared/asset/asset-gallery.tsx" sourceLine="160" packageName="@vendure/dashboard" />
 
 A component for displaying a gallery of assets.
 
@@ -57,6 +57,7 @@ interface AssetGalleryProps {
     onFilesDropped?: (files: File[]) => void;
     bulkActions?: AssetBulkAction[];
     displayBulkActions?: boolean;
+    onPageSizeChange?: (pageSize: number) => void;
 }
 ```
 
@@ -120,6 +121,11 @@ The bulk actions to display in the gallery.
 <MemberInfo kind="property" type={`boolean`}   />
 
 Whether the gallery should display bulk actions.
+### onPageSizeChange
+
+<MemberInfo kind="property" type={`(pageSize: number) =&#62; void`}   />
+
+The function to call when the page size changes.
 
 
 </div>

docs/docs/reference/dashboard/extensions-api/data-tables.md

@@ -0,0 +1,59 @@
+---
+title: "DataTables"
+isDefaultIndex: false
+generated: true
+---
+<!-- This file was generated from the Vendure source. Do not modify. Instead, re-run the "docs:build" script -->
+import MemberInfo from '@site/src/components/MemberInfo';
+import GenerationInfo from '@site/src/components/GenerationInfo';
+import MemberDescription from '@site/src/components/MemberDescription';
+
+
+## DashboardDataTableExtensionDefinition
+
+<GenerationInfo sourceFile="packages/dashboard/src/lib/framework/extension-api/types/data-table.ts" sourceLine="126" packageName="@vendure/dashboard" since="3.4.0" />
+
+This allows you to customize aspects of existing data tables in the dashboard.
+
+```ts title="Signature"
+interface DashboardDataTableExtensionDefinition {
+    pageId: string;
+    blockId?: string;
+    bulkActions?: BulkAction[];
+    extendListDocument?: string | DocumentNode | (() => DocumentNode | string);
+    displayComponents?: DashboardDataTableDisplayComponent[];
+}
+```
+
+<div className="members-wrapper">
+
+### pageId
+
+<MemberInfo kind="property" type={`string`}   />
+
+The ID of the page where the data table is located, e.g. `'product-list'`, `'order-list'`.
+### blockId
+
+<MemberInfo kind="property" type={`string`}   />
+
+The ID of the data table block. Defaults to `'list-table'`, which is the default blockId
+for the standard list pages. However, some other pages may use a different blockId,
+such as `'product-variants-table'` on the `'product-detail'` page.
+### bulkActions
+
+<MemberInfo kind="property" type={`<a href='/reference/dashboard/list-views/bulk-actions#bulkaction'>BulkAction</a>[]`}   />
+
+An array of additional bulk actions that will be available on the data table.
+### extendListDocument
+
+<MemberInfo kind="property" type={`string | DocumentNode | (() =&#62; DocumentNode | string)`}   />
+
+Allows you to extend the list document for the data table.
+### displayComponents
+
+<MemberInfo kind="property" type={`<a href='/reference/dashboard/list-views/data-table#dashboarddatatabledisplaycomponent'>DashboardDataTableDisplayComponent</a>[]`}   />
+
+Custom display components for specific columns in the data table.
+
+
+</div>

docs/docs/reference/dashboard/extensions-api/define-dashboard-extension.md

@@ -122,7 +122,7 @@ given components and optionally also add a nav menu item.
 Unified registration for custom form custom field components.
 ### dataTables
 
-<MemberInfo kind="property" type={`<a href='/reference/dashboard/list-views/data-table#dashboarddatatableextensiondefinition'>DashboardDataTableExtensionDefinition</a>[]`}   />
+<MemberInfo kind="property" type={`<a href='/reference/dashboard/extensions-api/data-tables#dashboarddatatableextensiondefinition'>DashboardDataTableExtensionDefinition</a>[]`}   />
 
 Allows you to customize aspects of existing data tables in the dashboard.
 ### detailForms

docs/docs/reference/dashboard/list-views/bulk-actions.md

@@ -23,6 +23,7 @@ interface DataTableBulkActionItemProps {
     onClick: () => void;
     className?: string;
     requiresPermission?: string[];
+    disabled?: boolean;
 }
 ```
 
@@ -58,6 +59,11 @@ interface DataTableBulkActionItemProps {
 <MemberInfo kind="property" type={`string[]`}   />
 
 
+### disabled
+
+<MemberInfo kind="property" type={`boolean`}   />
+
+
 
 
 </div>
@@ -65,7 +71,7 @@ interface DataTableBulkActionItemProps {
 
 ## DataTableBulkActionItem
 
-<GenerationInfo sourceFile="packages/dashboard/src/lib/components/data-table/data-table-bulk-action-item.tsx" sourceLine="65" packageName="@vendure/dashboard" since="3.4.0" />
+<GenerationInfo sourceFile="packages/dashboard/src/lib/components/data-table/data-table-bulk-action-item.tsx" sourceLine="66" packageName="@vendure/dashboard" since="3.4.0" />
 
 A component that should be used to implement any bulk actions for list pages & data tables.
 

docs/docs/reference/dashboard/list-views/data-table.md

@@ -196,54 +196,4 @@ The React component that will be rendered as the display.
 It should accept `value` and other standard display props.
 
 
-</div>
-
-
-## DashboardDataTableExtensionDefinition
-
-<GenerationInfo sourceFile="packages/dashboard/src/lib/framework/extension-api/types/data-table.ts" sourceLine="126" packageName="@vendure/dashboard" since="3.4.0" />
-
-This allows you to customize aspects of existing data tables in the dashboard.
-
-```ts title="Signature"
-interface DashboardDataTableExtensionDefinition {
-    pageId: string;
-    blockId?: string;
-    bulkActions?: BulkAction[];
-    extendListDocument?: string | DocumentNode | (() => DocumentNode | string);
-    displayComponents?: DashboardDataTableDisplayComponent[];
-}
-```
-
-<div className="members-wrapper">
-
-### pageId
-
-<MemberInfo kind="property" type={`string`}   />
-
-The ID of the page where the data table is located, e.g. `'product-list'`, `'order-list'`.
-### blockId
-
-<MemberInfo kind="property" type={`string`}   />
-
-The ID of the data table block. Defaults to `'list-table'`, which is the default blockId
-for the standard list pages. However, some other pages may use a different blockId,
-such as `'product-variants-table'` on the `'product-detail'` page.
-### bulkActions
-
-<MemberInfo kind="property" type={`<a href='/reference/dashboard/list-views/bulk-actions#bulkaction'>BulkAction</a>[]`}   />
-
-An array of additional bulk actions that will be available on the data table.
-### extendListDocument
-
-<MemberInfo kind="property" type={`string | DocumentNode | (() =&#62; DocumentNode | string)`}   />
-
-Allows you to extend the list document for the data table.
-### displayComponents
-
-<MemberInfo kind="property" type={`<a href='/reference/dashboard/list-views/data-table#dashboarddatatabledisplaycomponent'>DashboardDataTableDisplayComponent</a>[]`}   />
-
-Custom display components for specific columns in the data table.
-
-
 </div>

docs/docs/reference/graphql-api/admin/input-types.md

@@ -3754,6 +3754,10 @@ import MemberDescription from '@site/src/components/MemberDescription';
 
 <div class="graphql-code-block">
 <div class="graphql-code-line top-level">input <span class="graphql-code-identifier">TaxRateFilterParameter</span> &#123;</div>
+<div class="graphql-code-line ">zoneId: <a href="/reference/graphql-api/admin/input-types#idoperators">IDOperators</a></div>
+
+<div class="graphql-code-line ">categoryId: <a href="/reference/graphql-api/admin/input-types#idoperators">IDOperators</a></div>
+
 <div class="graphql-code-line ">id: <a href="/reference/graphql-api/admin/input-types#idoperators">IDOperators</a></div>
 
 <div class="graphql-code-line ">createdAt: <a href="/reference/graphql-api/admin/input-types#dateoperators">DateOperators</a></div>

docs/docs/reference/typescript-api/services/tax-rate-service.md

@@ -11,7 +11,7 @@ import MemberDescription from '@site/src/components/MemberDescription';
 
 ## TaxRateService
 
-<GenerationInfo sourceFile="packages/core/src/service/services/tax-rate.service.ts" sourceLine="36" packageName="@vendure/core" />
+<GenerationInfo sourceFile="packages/core/src/service/services/tax-rate.service.ts" sourceLine="37" packageName="@vendure/core" />
 
 Contains methods relating to <a href='/reference/typescript-api/entities/tax-rate#taxrate'>TaxRate</a> entities.
 

docs/sidebars.js

@@ -151,12 +151,17 @@ const sidebars = {
                         'guides/extending-the-dashboard/creating-pages/detail-pages',
                     ],
                 },
-                'guides/extending-the-dashboard/navigation/index',
-                'guides/extending-the-dashboard/page-blocks/index',
-                'guides/extending-the-dashboard/action-bar-items/index',
-                'guides/extending-the-dashboard/alerts/index',
-                'guides/extending-the-dashboard/data-fetching/index',
-                'guides/extending-the-dashboard/theming/index',
+                {
+                    type: 'category',
+                    label: 'Customizing Pages',
+                    link: { type: 'doc', id: 'guides/extending-the-dashboard/customizing-pages/index' },
+                    items: [
+                        'guides/extending-the-dashboard/customizing-pages/customizing-list-pages',
+                        'guides/extending-the-dashboard/customizing-pages/customizing-detail-pages',
+                        'guides/extending-the-dashboard/customizing-pages/page-blocks',
+                        'guides/extending-the-dashboard/customizing-pages/action-bar-items',
+                    ],
+                },
                 {
                     type: 'category',
                     label: 'Custom Form Elements',
@@ -166,6 +171,10 @@ const sidebars = {
                         'guides/extending-the-dashboard/custom-form-components/relation-selectors',
                     ],
                 },
+                'guides/extending-the-dashboard/navigation/index',
+                'guides/extending-the-dashboard/alerts/index',
+                'guides/extending-the-dashboard/data-fetching/index',
+                'guides/extending-the-dashboard/theming/index',
                 'guides/extending-the-dashboard/deployment/index',
                 'guides/extending-the-dashboard/tech-stack/index',
             ],