@vendure/dashboard 3.5.0-minor-202510071456 → 3.5.0-minor-202510201346

package/src/lib/components/shared/asset/asset-gallery.tsx

@@ -16,8 +16,8 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
 import { api } from '@/vdb/graphql/api.js';
 import { assetFragment, AssetFragment } from '@/vdb/graphql/fragments.js';
 import { graphql } from '@/vdb/graphql/graphql.js';
-import { Trans } from '@lingui/react/macro';
 import { formatFileSize } from '@/vdb/lib/utils.js';
+import { Trans } from '@lingui/react/macro';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useDebounce } from '@uidotdev/usehooks';
 import { Loader2, Search, Upload, X } from 'lucide-react';
@@ -131,6 +131,11 @@ export interface AssetGalleryProps {
      * Whether the gallery should display bulk actions.
      */
     displayBulkActions?: boolean;
+    /**
+     * @description
+     * The function to call when the page size changes.
+     */
+    onPageSizeChange?: (pageSize: number) => void;
 }
 
 /**
@@ -140,12 +145,12 @@ export interface AssetGalleryProps {
  * @example
  * ```tsx
  *  <AssetGallery
- onSelect={handleAssetSelect}
- multiSelect="manual"
- initialSelectedAssets={initialSelectedAssets}
- fixedHeight={false}
- displayBulkActions={false}
- />
+ *   onSelect={handleAssetSelect}
+ *   multiSelect="manual"
+ *   initialSelectedAssets={initialSelectedAssets}
+ *   fixedHeight={false}
+ *   displayBulkActions={false}
+ *   />
  * ```
  *
  * @docsCategory components
@@ -153,18 +158,19 @@ export interface AssetGalleryProps {
  * @docsWeight 0
  */
 export function AssetGallery({
-                                 onSelect,
-                                 selectable = true,
-                                 multiSelect = undefined,
-                                 initialSelectedAssets = [],
-                                 pageSize = 24,
-                                 fixedHeight = false,
-                                 showHeader = true,
-                                 className = '',
-                                 onFilesDropped,
-                                 bulkActions,
-                                 displayBulkActions = true,
-                             }: AssetGalleryProps) {
+    onSelect,
+    selectable = true,
+    multiSelect = undefined,
+    initialSelectedAssets = [],
+    pageSize = 24,
+    fixedHeight = false,
+    showHeader = true,
+    className = '',
+    onFilesDropped,
+    bulkActions,
+    displayBulkActions = true,
+    onPageSizeChange,
+}: AssetGalleryProps) {
     // State
     const [page, setPage] = useState(1);
     const [search, setSearch] = useState('');
@@ -380,8 +386,7 @@ export function AssetGallery({
                 <input {...getInputProps()} />
 
                 {isDragActive && (
-                    <div
-                        className="absolute inset-0 bg-background/80 backdrop-blur-sm z-10 flex flex-col items-center justify-center rounded-md">
+                    <div className="absolute inset-0 bg-background/80 backdrop-blur-sm z-10 flex flex-col items-center justify-center rounded-md">
                         <Upload className="h-12 w-12 text-primary mb-2" />
                         <p className="text-center font-medium">Drop files here to upload</p>
                     </div>
@@ -389,7 +394,7 @@ export function AssetGallery({
 
                 <div
                     data-asset-gallery
-                    className="grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3 p-1"
+                    className="grid grid-cols-2 xs:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3 p-1"
                 >
                     {isLoading ? (
                         <div className="col-span-full flex justify-center py-12">
@@ -470,119 +475,148 @@ export function AssetGallery({
                 </div>
             </div>
 
-            {totalPages > 1 && (
-                <Pagination className="mt-4 flex-shrink-0">
-                    <PaginationContent>
-                        <PaginationItem>
-                            <PaginationPrevious
-                                href="#"
-                                size="default"
-                                onClick={e => {
-                                    e.preventDefault();
-                                    goToPage(page - 1);
-                                }}
-                                className={page === 1 ? 'pointer-events-none opacity-50' : ''}
-                            />
-                        </PaginationItem>
+            <div className="flex flex-col md:flex-row items-center md:justify-between gap-4 mt-4 flex-shrink-0">
+                <div className="mt-2 text-xs text-muted-foreground flex-shrink-0">
+                    {totalItems} {totalItems === 1 ? 'asset' : 'assets'} found
+                    {selected.length > 0 && `, ${selected.length} selected`}
+                </div>
+                <div className="flex-1"></div>
+                {/* Items per page selector */}
+                {onPageSizeChange && (
+                    <div className="flex items-center gap-2">
+                        <span className="text-sm text-muted-foreground">Items per page</span>
+                        <Select
+                            value={pageSize.toString()}
+                            onValueChange={value => {
+                                const newPageSize = parseInt(value, 10);
+                                onPageSizeChange(newPageSize);
+                                setPage(1); // Reset to first page when changing page size
+                            }}
+                        >
+                            <SelectTrigger className="h-8 w-[70px]">
+                                <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent side="top">
+                                {[12, 24, 48, 96].map(size => (
+                                    <SelectItem key={size} value={`${size}`}>
+                                        {size}
+                                    </SelectItem>
+                                ))}
+                            </SelectContent>
+                        </Select>
+                    </div>
+                )}
 
-                        {/* First page */}
-                        {page > 2 && (
+                {/* Pagination */}
+                {totalPages > 1 && (
+                    <Pagination className="w-auto">
+                        <PaginationContent>
                             <PaginationItem>
-                                <PaginationLink
+                                <PaginationPrevious
                                     href="#"
+                                    size="default"
                                     onClick={e => {
                                         e.preventDefault();
-                                        goToPage(1);
+                                        goToPage(page - 1);
                                     }}
-                                >
-                                    1
-                                </PaginationLink>
+                                    className={page === 1 ? 'pointer-events-none opacity-50' : ''}
+                                />
                             </PaginationItem>
-                        )}
 
-                        {/* Ellipsis if needed */}
-                        {page > 3 && (
-                            <PaginationItem>
-                                <PaginationEllipsis />
-                            </PaginationItem>
-                        )}
+                            {/* First page */}
+                            {page > 2 && (
+                                <PaginationItem>
+                                    <PaginationLink
+                                        href="#"
+                                        onClick={e => {
+                                            e.preventDefault();
+                                            goToPage(1);
+                                        }}
+                                    >
+                                        1
+                                    </PaginationLink>
+                                </PaginationItem>
+                            )}
 
-                        {/* Previous page */}
-                        {page > 1 && (
-                            <PaginationItem>
-                                <PaginationLink
-                                    href="#"
-                                    onClick={e => {
-                                        e.preventDefault();
-                                        goToPage(page - 1);
-                                    }}
-                                >
-                                    {page - 1}
-                                </PaginationLink>
-                            </PaginationItem>
-                        )}
+                            {/* Ellipsis if needed */}
+                            {page > 3 && (
+                                <PaginationItem>
+                                    <PaginationEllipsis />
+                                </PaginationItem>
+                            )}
 
-                        {/* Current page */}
-                        <PaginationItem>
-                            <PaginationLink href="#" isActive>
-                                {page}
-                            </PaginationLink>
-                        </PaginationItem>
+                            {/* Previous page */}
+                            {page > 1 && (
+                                <PaginationItem>
+                                    <PaginationLink
+                                        href="#"
+                                        onClick={e => {
+                                            e.preventDefault();
+                                            goToPage(page - 1);
+                                        }}
+                                    >
+                                        {page - 1}
+                                    </PaginationLink>
+                                </PaginationItem>
+                            )}
 
-                        {/* Next page */}
-                        {page < totalPages && (
+                            {/* Current page */}
                             <PaginationItem>
-                                <PaginationLink
-                                    href="#"
-                                    onClick={e => {
-                                        e.preventDefault();
-                                        goToPage(page + 1);
-                                    }}
-                                >
-                                    {page + 1}
+                                <PaginationLink href="#" isActive>
+                                    {page}
                                 </PaginationLink>
                             </PaginationItem>
-                        )}
 
-                        {/* Ellipsis if needed */}
-                        {page < totalPages - 2 && (
-                            <PaginationItem>
-                                <PaginationEllipsis />
-                            </PaginationItem>
-                        )}
+                            {/* Next page */}
+                            {page < totalPages && (
+                                <PaginationItem>
+                                    <PaginationLink
+                                        href="#"
+                                        onClick={e => {
+                                            e.preventDefault();
+                                            goToPage(page + 1);
+                                        }}
+                                    >
+                                        {page + 1}
+                                    </PaginationLink>
+                                </PaginationItem>
+                            )}
+
+                            {/* Ellipsis if needed */}
+                            {page < totalPages - 2 && (
+                                <PaginationItem>
+                                    <PaginationEllipsis />
+                                </PaginationItem>
+                            )}
+
+                            {/* Last page */}
+                            {page < totalPages - 1 && (
+                                <PaginationItem>
+                                    <PaginationLink
+                                        href="#"
+                                        onClick={e => {
+                                            e.preventDefault();
+                                            goToPage(totalPages);
+                                        }}
+                                    >
+                                        {totalPages}
+                                    </PaginationLink>
+                                </PaginationItem>
+                            )}
 
-                        {/* Last page */}
-                        {page < totalPages - 1 && (
                             <PaginationItem>
-                                <PaginationLink
+                                <PaginationNext
                                     href="#"
                                     onClick={e => {
                                         e.preventDefault();
-                                        goToPage(totalPages);
+                                        goToPage(page + 1);
                                     }}
-                                >
-                                    {totalPages}
-                                </PaginationLink>
+                                    className={page === totalPages ? 'pointer-events-none opacity-50' : ''}
+                                />
                             </PaginationItem>
-                        )}
-
-                        <PaginationItem>
-                            <PaginationNext
-                                href="#"
-                                onClick={e => {
-                                    e.preventDefault();
-                                    goToPage(page + 1);
-                                }}
-                                className={page === totalPages ? 'pointer-events-none opacity-50' : ''}
-                            />
-                        </PaginationItem>
-                    </PaginationContent>
-                </Pagination>
-            )}
-
-            <div className="mt-2 text-xs text-muted-foreground flex-shrink-0">
-                {totalItems} {totalItems === 1 ? 'asset' : 'assets'} found
-                {selected.length > 0 && `, ${selected.length} selected`}
+                        </PaginationContent>
+                    </Pagination>
+                )}
             </div>
         </div>
     );

package/src/lib/components/shared/asset/asset-picker-dialog.stories.tsx

@@ -0,0 +1,58 @@
+import { Button } from '@/vdb/components/ui/button.js';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { RouterContextProvider } from '@tanstack/react-router';
+import { useState } from 'react';
+import { createDemoRoute } from '../../../../../.storybook/providers.js';
+import { withDescription } from '../../../../../.storybook/with-description.js';
+import { AssetPickerDialog } from './asset-picker-dialog.js';
+
+const meta = {
+    title: 'Components/AssetPickerDialog',
+    component: AssetPickerDialog,
+    ...withDescription(import.meta.url, './asset-picker-dialog.js'),
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        multiSelect: {
+            control: 'boolean',
+            description: 'Whether multiple assets can be selected',
+        },
+        title: {
+            control: 'text',
+            description: 'The title of the dialog',
+        },
+    },
+} satisfies Meta<typeof AssetPickerDialog>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+    args: {
+        multiSelect: false,
+        title: 'Select Assets',
+    },
+    render: args => {
+        const [open, setOpen] = useState(false);
+        const { route, router } = createDemoRoute();
+
+        return (
+            <RouterContextProvider router={router}>
+                <div>
+                    <Button onClick={() => setOpen(true)}>Open Asset Picker</Button>
+                    <AssetPickerDialog
+                        {...args}
+                        open={open}
+                        onClose={() => setOpen(false)}
+                        onSelect={assets => {
+                            console.log('Selected assets:', assets);
+                            setOpen(false);
+                        }}
+                    />
+                </div>
+            </RouterContextProvider>
+        );
+    },
+};

package/src/lib/components/shared/customer-group-selector.tsx

@@ -1,5 +1,5 @@
 import { Button } from '@/vdb/components/ui/button.js';
-import { Command, CommandItem, CommandList } from '@/vdb/components/ui/command.js';
+import { Command, CommandEmpty, CommandItem, CommandList } from '@/vdb/components/ui/command.js';
 import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
 import { api } from '@/vdb/graphql/api.js';
 import { graphql } from '@/vdb/graphql/graphql.js';
@@ -27,7 +27,7 @@ export interface CustomerGroupSelectorProps {
 export function CustomerGroupSelector(props: CustomerGroupSelectorProps) {
     const [open, setOpen] = useState(false);
 
-    const { data: groups } = useQuery({
+    const { data: groups, isLoading } = useQuery({
         queryKey: ['customerGroups'],
         queryFn: () =>
             api.query(customerGroupsDocument, {
@@ -54,6 +54,9 @@ export function CustomerGroupSelector(props: CustomerGroupSelectorProps) {
                                 {group.name}
                             </CommandItem>
                         ))}
+                        <CommandEmpty>
+                            {isLoading ? <Trans>Loading...</Trans> : <Trans>No results</Trans>}
+                        </CommandEmpty>
                     </CommandList>
                 </Command>
             </PopoverContent>

package/src/lib/components/shared/detail-page-button.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { RouterContextProvider } from '@tanstack/react-router';
+import { createDemoRoute } from '../../../../.storybook/providers.js';
+import { withDescription } from '../../../../.storybook/with-description.js';
+import { DetailPageButton } from './detail-page-button.js';
+
+const meta = {
+    title: 'Components/DetailPageButton',
+    component: DetailPageButton,
+    ...withDescription(import.meta.url, './detail-page-button.js'),
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        label: {
+            control: 'text',
+            description: 'The button label text',
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Whether the button is disabled',
+        },
+        id: {
+            control: 'text',
+            description: 'ID for relative navigation (e.g., "123")',
+        },
+        href: {
+            control: 'text',
+            description: 'Custom href for absolute navigation',
+        },
+    },
+} satisfies Meta<typeof DetailPageButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+    args: {
+        label: 'View Details',
+        id: '123',
+        disabled: false,
+    },
+    render: args => {
+        const { route, router } = createDemoRoute();
+        return (
+            <RouterContextProvider router={router}>
+                <DetailPageButton {...args} />
+            </RouterContextProvider>
+        );
+    },
+};

package/src/lib/components/shared/facet-value-selector.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { withDescription } from '../../../../.storybook/with-description.js';
+import { FacetValueSelector } from './facet-value-selector.js';
+
+const meta = {
+    title: 'Components/FacetValueSelector',
+    component: FacetValueSelector,
+    ...withDescription(import.meta.url, './facet-value-selector.js'),
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        disabled: {
+            control: 'boolean',
+            description: 'Whether the selector is disabled',
+        },
+        placeholder: {
+            control: 'text',
+            description: 'Placeholder text for the search input',
+        },
+        pageSize: {
+            control: 'number',
+            description: 'Number of facet values to display per page',
+        },
+    },
+} satisfies Meta<typeof FacetValueSelector>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+    args: {
+        disabled: false,
+        placeholder: 'Search facet values...',
+        pageSize: 10,
+    },
+    render: args => {
+        return (
+            <FacetValueSelector
+                {...args}
+                onValueSelect={value => {
+                    console.log('Selected facet value:', value);
+                }}
+            />
+        );
+    },
+};