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

package/src/lib/components/shared/table-cell/order-table-cell-components.tsx

@@ -4,6 +4,8 @@ import { Badge } from '@/vdb/components/ui/badge.js';
 import { Button } from '@/vdb/components/ui/button.js';
 import { useDynamicTranslations } from '@/vdb/hooks/use-dynamic-translations.js';
 import { Link } from '@tanstack/react-router';
+import { ChevronDown, ChevronUp } from 'lucide-react';
+import { useMemo, useState } from 'react';
 
 type CustomerCellData = {
     customer: {
@@ -38,3 +40,41 @@ export const OrderMoneyCell: DataTableCellComponent<{ currencyCode: string }> =
     const currencyCode = row.original.currencyCode;
     return <Money value={value} currency={currencyCode} />;
 };
+
+export const RichTextDescriptionCell: DataTableCellComponent<{ description: string }> = ({ cell }) => {
+    const [isExpanded, setIsExpanded] = useState(false);
+    const value = cell.getValue();
+
+    // Strip HTML tags and decode HTML entities
+    const textContent = useMemo(() => {
+        const stripped = value?.replace(/<[^>]*>/g, '') || '';
+        const textArea = document.createElement('textarea');
+        textArea.innerHTML = stripped;
+        return textArea.value;
+    }, [value]);
+
+    const shortLength = 100;
+    const maxLength = 500;
+    const isTooLong = textContent.length > shortLength;
+
+    const displayText = isExpanded ? textContent.slice(0, maxLength) : textContent.slice(0, shortLength);
+
+    return (
+        <div>
+            <div>
+                {displayText}
+                {!isExpanded && isTooLong && '...'}
+            </div>
+            {!isExpanded && isTooLong && (
+                <Button onClick={() => setIsExpanded(true)} variant="ghost" size="xs">
+                    <ChevronDown />
+                </Button>
+            )}
+            {isExpanded && (
+                <Button onClick={() => setIsExpanded(false)} variant="ghost" size="xs">
+                    <ChevronUp />
+                </Button>
+            )}
+        </div>
+    );
+};

package/src/lib/components/shared/vendure-image.stories.tsx

@@ -0,0 +1,167 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { withDescription } from '../../../../.storybook/with-description.js';
+import type { AssetLike } from './vendure-image.js';
+import { VendureImage } from './vendure-image.js';
+
+// Mock asset data for demonstrations
+const mockAsset: AssetLike = {
+    id: '1',
+    preview: 'https://demo.vendure.io/assets/preview/ed/chuttersnap-584518-unsplash__preview.jpg',
+    name: 'Sample Image',
+};
+
+const mockAssetWithFocalPoint: AssetLike = {
+    id: '2',
+    preview: 'https://demo.vendure.io/assets/preview/ed/chuttersnap-584518-unsplash__preview.jpg',
+    name: 'Image with Focal Point',
+    focalPoint: { x: 0.75, y: 0.25 },
+};
+
+const meta = {
+    title: 'Components/VendureImage',
+    component: VendureImage,
+    ...withDescription(import.meta.url, './vendure-image.js'),
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        preset: {
+            control: 'select',
+            options: ['tiny', 'thumb', 'small', 'medium', 'large', 'full', null],
+            description: 'The preset to use for the image',
+        },
+        mode: {
+            control: 'select',
+            options: ['crop', 'resize', null],
+            description: 'The crop/resize mode to use',
+        },
+        width: {
+            control: 'number',
+            description: 'Custom width in pixels',
+        },
+        height: {
+            control: 'number',
+            description: 'Custom height in pixels',
+        },
+        format: {
+            control: 'select',
+            options: ['jpg', 'jpeg', 'png', 'webp', 'avif', null],
+            description: 'The image format',
+        },
+        quality: {
+            control: { type: 'range', min: 1, max: 100, step: 1 },
+            description: 'Image quality (1-100)',
+        },
+        useFocalPoint: {
+            control: 'boolean',
+            description: 'Whether to use the focal point in crop mode',
+        },
+    },
+} satisfies Meta<typeof VendureImage>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+    args: {
+        asset: mockAsset,
+        preset: 'medium',
+        useFocalPoint: true,
+    },
+    render: args => {
+        return <VendureImage {...args} />;
+    },
+};
+
+export const PresetSizes: Story = {
+    render: () => {
+        return (
+            <div className="space-y-4">
+                <div className="space-y-2">
+                    <div className="text-sm font-medium">Tiny (50x50)</div>
+                    <VendureImage asset={mockAsset} preset="tiny" />
+                </div>
+                <div className="space-y-2">
+                    <div className="text-sm font-medium">Thumb (150x150)</div>
+                    <VendureImage asset={mockAsset} preset="thumb" />
+                </div>
+                <div className="space-y-2">
+                    <div className="text-sm font-medium">Small (300x300)</div>
+                    <VendureImage asset={mockAsset} preset="small" />
+                </div>
+                <div className="space-y-2">
+                    <div className="text-sm font-medium">Medium (500x500)</div>
+                    <VendureImage asset={mockAsset} preset="medium" />
+                </div>
+            </div>
+        );
+    },
+};
+
+export const CustomDimensions: Story = {
+    render: () => {
+        return (
+            <div className="space-y-4">
+                <div className="space-y-2">
+                    <div className="text-sm font-medium">200x200 - Crop Mode</div>
+                    <VendureImage asset={mockAsset} width={200} height={200} mode="crop" />
+                </div>
+                <div className="space-y-2">
+                    <div className="text-sm font-medium">300x150 - Crop Mode</div>
+                    <VendureImage asset={mockAsset} width={300} height={150} mode="crop" />
+                </div>
+                <div className="space-y-2">
+                    <div className="text-sm font-medium">200x200 - Resize Mode</div>
+                    <VendureImage asset={mockAsset} width={200} height={200} mode="resize" />
+                </div>
+            </div>
+        );
+    },
+};
+
+export const Formats: Story = {
+    render: () => {
+        return (
+            <div className="space-y-4">
+                <div className="space-y-2">
+                    <div className="text-sm font-medium">WebP Format</div>
+                    <VendureImage asset={mockAsset} preset="thumb" format="webp" />
+                </div>
+                <div className="space-y-2">
+                    <div className="text-sm font-medium">AVIF Format</div>
+                    <VendureImage asset={mockAsset} preset="thumb" format="avif" />
+                </div>
+                <div className="space-y-2">
+                    <div className="text-sm font-medium">JPEG Format with Quality 50</div>
+                    <VendureImage asset={mockAsset} preset="thumb" format="jpeg" quality={50} />
+                </div>
+            </div>
+        );
+    },
+};
+
+export const Fallbacks: Story = {
+    render: () => {
+        return (
+            <div className="space-y-4">
+                <div className="space-y-2">
+                    <div className="text-sm font-medium">No Asset - Default Placeholder</div>
+                    <VendureImage asset={null} preset="thumb" />
+                </div>
+                <div className="space-y-2">
+                    <div className="text-sm font-medium">No Asset - Custom Fallback</div>
+                    <VendureImage
+                        asset={null}
+                        preset="thumb"
+                        fallback={
+                            <div className="w-[150px] h-[150px] bg-gray-200 flex items-center justify-center rounded-sm">
+                                <span className="text-gray-500">Custom Fallback</span>
+                            </div>
+                        }
+                    />
+                </div>
+            </div>
+        );
+    },
+};

package/src/lib/components/shared/vendure-image.tsx

@@ -99,9 +99,9 @@ export interface VendureImageProps extends React.ImgHTMLAttributes<HTMLImageElem
     useFocalPoint?: boolean;
     /**
      * @description
-     * The fallback to show if no asset is provided. If no fallback is provided, 
+     * The fallback to show if no asset is provided. If no fallback is provided,
      * a default placeholder will be shown.
-     */ 
+     */
     fallback?: React.ReactNode;
     /**
      * @description
@@ -113,9 +113,9 @@ export interface VendureImageProps extends React.ImgHTMLAttributes<HTMLImageElem
 /**
  * @description
  * A component for displaying an image from a Vendure asset.
- * 
+ *
  * Supports the following features:
- * 
+ *
  * * Presets
  * * Cropping
  * * Resizing
@@ -123,7 +123,7 @@ export interface VendureImageProps extends React.ImgHTMLAttributes<HTMLImageElem
  * * Quality
  * * Focal point
  * * Fallback
- * 
+ *
  * @example
  * ```tsx
  *  <VendureImage
@@ -154,14 +154,13 @@ export function VendureImage({
     ref,
     ...imgProps
 }: VendureImageProps) {
-    if (!asset) {
+    if (!asset || !asset.preview) {
         return fallback ? (
             <>{fallback}</>
         ) : (
             <PlaceholderImage preset={preset} width={width} height={height} className={className} />
         );
     }
-
     // Build the URL with query parameters
     const url = new URL(asset.preview);
 

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

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './accordion.js';
+
+const meta = {
+    title: 'UI/Accordion',
+    component: Accordion,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+} satisfies Meta<typeof Accordion>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+    render: () => (
+        <Accordion type="single" collapsible className="w-[400px]">
+            <AccordionItem value="item-1">
+                <AccordionTrigger>Item 1</AccordionTrigger>
+                <AccordionContent>Content for item 1</AccordionContent>
+            </AccordionItem>
+            <AccordionItem value="item-2">
+                <AccordionTrigger>Item 2</AccordionTrigger>
+                <AccordionContent>Content for item 2</AccordionContent>
+            </AccordionItem>
+            <AccordionItem value="item-3">
+                <AccordionTrigger>Item 3</AccordionTrigger>
+                <AccordionContent>Content for item 3</AccordionContent>
+            </AccordionItem>
+        </Accordion>
+    ),
+};

package/src/lib/components/ui/alert-dialog.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+    AlertDialogTrigger,
+} from './alert-dialog.js';
+import { Button } from './button.js';
+
+const meta = {
+    title: 'UI/Alert Dialog',
+    component: AlertDialog,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+} satisfies Meta<typeof AlertDialog>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+    render: () => (
+        <AlertDialog>
+            <AlertDialogTrigger asChild>
+                <Button variant="destructive">Delete Item</Button>
+            </AlertDialogTrigger>
+            <AlertDialogContent>
+                <AlertDialogHeader>
+                    <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+                    <AlertDialogDescription>
+                        This action cannot be undone. This will permanently delete your item.
+                    </AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                    <AlertDialogCancel>Cancel</AlertDialogCancel>
+                    <AlertDialogAction>Continue</AlertDialogAction>
+                </AlertDialogFooter>
+            </AlertDialogContent>
+        </AlertDialog>
+    ),
+};

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

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { AlertCircle } from 'lucide-react';
+import { Alert, AlertDescription, AlertTitle } from './alert.js';
+
+const meta = {
+    title: 'UI/Alert',
+    component: Alert,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['default', 'destructive'],
+            description: 'Alert variant',
+        },
+    },
+} satisfies Meta<typeof Alert>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+    render: args => (
+        <Alert {...args} className="w-[400px]">
+            <AlertCircle className="h-4 w-4" />
+            <AlertTitle>Heads up!</AlertTitle>
+            <AlertDescription>You can add components to your app using the cli.</AlertDescription>
+        </Alert>
+    ),
+    args: {
+        variant: 'default',
+    },
+};

package/src/lib/components/ui/aspect-ratio.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { AspectRatio } from './aspect-ratio.js';
+
+const meta = {
+    title: 'UI/Aspect Ratio',
+    component: AspectRatio,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+} satisfies Meta<typeof AspectRatio>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+    render: () => (
+        <div className="w-[400px]">
+            <AspectRatio ratio={16 / 9}>
+                <img
+                    src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
+                    alt="Photo"
+                    className="rounded-md object-cover w-full h-full"
+                />
+            </AspectRatio>
+        </div>
+    ),
+};

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

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Badge } from './badge.js';
+
+const meta = {
+    title: 'UI/Badge',
+    component: Badge,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['default', 'secondary', 'destructive', 'outline'],
+            description: 'Badge variant',
+        },
+    },
+} satisfies Meta<typeof Badge>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+    args: {
+        variant: 'default',
+        children: 'Badge',
+    },
+};

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

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import {
+    Breadcrumb,
+    BreadcrumbItem,
+    BreadcrumbLink,
+    BreadcrumbList,
+    BreadcrumbPage,
+    BreadcrumbSeparator,
+} from './breadcrumb.js';
+
+const meta = {
+    title: 'UI/Breadcrumb',
+    component: Breadcrumb,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+} satisfies Meta<typeof Breadcrumb>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+    render: () => (
+        <Breadcrumb>
+            <BreadcrumbList>
+                <BreadcrumbItem>
+                    <BreadcrumbLink href="/">Home</BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator />
+                <BreadcrumbItem>
+                    <BreadcrumbLink href="/products">Products</BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator />
+                <BreadcrumbItem>
+                    <BreadcrumbPage>Current Page</BreadcrumbPage>
+                </BreadcrumbItem>
+            </BreadcrumbList>
+        </Breadcrumb>
+    ),
+};

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

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from './button.js';
+
+const meta = {
+    title: 'UI/Button',
+    component: Button,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['default', 'destructive', 'outline', 'secondary', 'ghost', 'link'],
+            description: 'Button variant',
+        },
+        size: {
+            control: 'select',
+            options: ['default', 'sm', 'lg', 'icon'],
+            description: 'Button size',
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Whether the button is disabled',
+        },
+    },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+    args: {
+        variant: 'default',
+        size: 'default',
+        children: 'Button',
+    },
+};

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

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import { Calendar } from './calendar.js';
+
+const meta = {
+    title: 'UI/Calendar',
+    component: Calendar,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+} satisfies Meta<typeof Calendar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+    render: () => {
+        const [date, setDate] = useState<Date | undefined>(new Date());
+        return <Calendar mode="single" selected={date} onSelect={setDate} className="rounded-md border" />;
+    },
+};

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

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card.js';
+
+const meta = {
+    title: 'UI/Card',
+    component: Card,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+} satisfies Meta<typeof Card>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+    render: () => (
+        <Card className="w-[350px]">
+            <CardHeader>
+                <CardTitle>Card Title</CardTitle>
+                <CardDescription>Card description goes here</CardDescription>
+            </CardHeader>
+            <CardContent>
+                <p>Card content goes here</p>
+            </CardContent>
+        </Card>
+    ),
+};

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

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from './carousel.js';
+
+const meta = {
+    title: 'UI/Carousel',
+    component: Carousel,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+} satisfies Meta<typeof Carousel>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+    render: () => (
+        <Carousel className="w-full max-w-xs">
+            <CarouselContent>
+                {Array.from({ length: 5 }).map((_, index) => (
+                    <CarouselItem key={index}>
+                        <div className="p-1">
+                            <div className="flex aspect-square items-center justify-center p-6 border rounded-lg">
+                                <span className="text-4xl font-semibold">{index + 1}</span>
+                            </div>
+                        </div>
+                    </CarouselItem>
+                ))}
+            </CarouselContent>
+            <CarouselPrevious />
+            <CarouselNext />
+        </Carousel>
+    ),
+};

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

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Checkbox } from './checkbox.js';
+
+const meta = {
+    title: 'UI/Checkbox',
+    component: Checkbox,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        disabled: {
+            control: 'boolean',
+            description: 'Whether the checkbox is disabled',
+        },
+        checked: {
+            control: 'boolean',
+            description: 'Whether the checkbox is checked',
+        },
+    },
+} satisfies Meta<typeof Checkbox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+    args: {
+        checked: false,
+        disabled: false,
+    },
+};