@wilshop/dashboard 3.5.2

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

@@ -0,0 +1,307 @@
+import { cn } from '@/vdb/lib/utils.js';
+import { Image } from 'lucide-react';
+import React from 'react';
+
+/**
+ * @description
+ * The type of object that can be used as an asset in the {@link VendureImage} component.
+ *
+ * @docsCategory components
+ * @docsPage VendureImage
+ * @since 3.4.0
+ */
+export interface AssetLike {
+    id: string;
+    preview: string; // Base URL of the asset
+    name?: string | null;
+    focalPoint?: { x: number; y: number } | null;
+}
+
+/**
+ * @description
+ * The presets that can be used for the {@link VendureImage} component.
+ *
+ * @docsCategory components
+ * @docsPage VendureImage
+ * @since 3.4.0
+ */
+export type ImagePreset = 'tiny' | 'thumb' | 'small' | 'medium' | 'large' | 'full' | null;
+
+/**
+ * @description
+ * The formats that can be used for the {@link VendureImage} component.
+ *
+ * @docsCategory components
+ * @docsPage VendureImage
+ * @since 3.4.0
+ */
+export type ImageFormat = 'jpg' | 'jpeg' | 'png' | 'webp' | 'avif' | null;
+
+/**
+ * @description
+ * The modes that can be used for the {@link VendureImage} component.
+ *
+ * @docsCategory components
+ * @docsPage VendureImage
+ * @since 3.4.0
+ */
+export type ImageMode = 'crop' | 'resize' | null;
+
+/**
+ * @description
+ * The props for the {@link VendureImage} component.
+ *
+ * @docsCategory components
+ * @docsPage VendureImage
+ * @docsWeight 1
+ * @since 3.4.0
+ */
+export interface VendureImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+    /**
+     * @description
+     * The asset to display.
+     */
+    asset: AssetLike | null | undefined;
+    /**
+     * @description
+     * The preset to use for the image.
+     */
+    preset?: ImagePreset;
+    /**
+     * @description
+     * The crop/resize mode to use for the image.
+     */
+    mode?: ImageMode;
+    /**
+     * @description
+     * The width of the image.
+     */
+    width?: number;
+    /**
+     * @description
+     * The height of the image.
+     */
+    height?: number;
+    /**
+     * @description
+     * The format of the image.
+     */
+    format?: ImageFormat;
+    /**
+     * @description
+     * The quality of the image.
+     */
+    quality?: number;
+    /**
+     * @description
+     * Whether to use the asset's focal point in crop mode.
+     */
+    useFocalPoint?: boolean;
+    /**
+     * @description
+     * The fallback to show if no asset is provided. If no fallback is provided,
+     * a default placeholder will be shown.
+     */
+    fallback?: React.ReactNode;
+    /**
+     * @description
+     * The ref to the image element.
+     */
+    ref?: React.Ref<HTMLImageElement>;
+}
+
+/**
+ * @description
+ * A component for displaying an image from a Vendure asset.
+ *
+ * Supports the following features:
+ *
+ * * Presets
+ * * Cropping
+ * * Resizing
+ * * Formatting
+ * * Quality
+ * * Focal point
+ * * Fallback
+ *
+ * @example
+ * ```tsx
+ *  <VendureImage
+ *      asset={asset}
+ *      preset="thumb"
+ *      className="w-full h-full object-contain"
+ *  />
+ * ```
+ *
+ * @docsCategory components
+ * @docsPage VendureImage
+ * @docsWeight 0
+ * @since 3.4.0
+ */
+export function VendureImage({
+    asset,
+    preset = null,
+    mode = null,
+    width,
+    height,
+    format = null,
+    quality,
+    useFocalPoint = true,
+    fallback = null,
+    alt,
+    className,
+    style,
+    ref,
+    ...imgProps
+}: VendureImageProps) {
+    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);
+
+    // Handle preset if specified
+    if (preset) {
+        url.searchParams.set('preset', preset);
+    } else {
+        // Or handle custom dimensions and mode
+        if (width) url.searchParams.set('w', width.toString());
+        if (height) url.searchParams.set('h', height.toString());
+        if (mode) url.searchParams.set('mode', mode);
+    }
+
+    // Add format if specified
+    if (format) {
+        url.searchParams.set('format', format);
+    }
+
+    // Add quality if specified
+    if (quality) {
+        url.searchParams.set('q', quality.toString());
+    }
+
+    // Apply focal point if available and requested
+    if (useFocalPoint && asset.focalPoint) {
+        url.searchParams.set('fpx', asset.focalPoint.x.toString());
+        url.searchParams.set('fpy', asset.focalPoint.y.toString());
+    }
+
+    const minDimensions = getMinDimensions(preset, width, height);
+
+    return (
+        <img
+            src={url.toString()}
+            alt={alt || asset.name || ''}
+            className={cn(className, 'rounded-sm')}
+            width={minDimensions.width}
+            height={minDimensions.height}
+            style={style}
+            loading="lazy"
+            ref={ref}
+            {...imgProps}
+        />
+    );
+}
+
+function getMinDimensions(preset?: ImagePreset, width?: number, height?: number) {
+    if (preset) {
+        switch (preset) {
+            case 'tiny':
+                return { width: 50, height: 50 };
+            case 'thumb':
+                return { width: 150, height: 150 };
+            case 'small':
+                return { width: 300, height: 300 };
+            case 'medium':
+                return { width: 500, height: 500 };
+            case 'large':
+                return { width: 800, height: 800 };
+            case 'full':
+                return { width: undefined, height: undefined };
+        }
+    }
+
+    if (width && height) {
+        return { width, height };
+    }
+
+    return { width: 100, height: 100 };
+}
+
+export function PlaceholderImage({
+    width = 100,
+    height = 100,
+    preset = null,
+    className,
+    ...props
+}: React.ImgHTMLAttributes<HTMLImageElement> & { preset?: ImagePreset }) {
+    if (preset) {
+        switch (preset) {
+            case 'tiny':
+                width = 50;
+                height = 50;
+                break;
+            case 'thumb':
+                width = 150;
+                height = 150;
+                break;
+            case 'small':
+                width = 300;
+                height = 300;
+                break;
+            case 'medium':
+                width = 500;
+                height = 500;
+                break;
+            case 'large':
+                width = 800;
+                height = 800;
+                break;
+            case 'full':
+                width = 1200;
+                height = 1200;
+                break;
+            default:
+                break;
+        }
+    }
+    return (
+        <div className={cn(className, 'rounded-sm bg-muted')} style={{ width, height }} {...props}>
+            <Image className="w-full h-full text-muted-foreground" />
+        </div>
+    );
+}
+
+// Convenience components for common use cases
+export function Thumbnail({
+    asset,
+    size = 'thumb',
+    ...props
+}: Omit<VendureImageProps, 'preset'> & { size?: ImagePreset }) {
+    return <VendureImage asset={asset} preset={size} {...props} />;
+}
+
+export function CroppedImage({ asset, width, height, ...props }: Omit<VendureImageProps, 'mode'>) {
+    return <VendureImage asset={asset} mode="crop" width={width} height={height} {...props} />;
+}
+
+export function ResponsiveImage({
+    asset,
+    sizes = '100vw',
+    ...props
+}: VendureImageProps & { sizes?: string }) {
+    // Setup srcset with multiple sizes
+    const srcSet = [
+        `${asset?.preview}?w=320&mode=resize 320w`,
+        `${asset?.preview}?w=480&mode=resize 480w`,
+        `${asset?.preview}?w=640&mode=resize 640w`,
+        `${asset?.preview}?w=1024&mode=resize 1024w`,
+        `${asset?.preview}?w=1280&mode=resize 1280w`,
+    ].join(', ');
+
+    return <VendureImage asset={asset} srcSet={srcSet} sizes={sizes} {...props} />;
+}

package/src/lib/components/shared/zone-selector.tsx

@@ -0,0 +1,65 @@
+import {
+    Select,
+    SelectContent,
+    SelectGroup,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from '@/vdb/components/ui/select.js';
+import { api } from '@/vdb/graphql/api.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { Trans } from '@lingui/react/macro';
+import { useQuery } from '@tanstack/react-query';
+import { Skeleton } from '../ui/skeleton.js';
+
+const zonesDocument = graphql(`
+    query Zones($options: ZoneListOptions) {
+        zones(options: $options) {
+            items {
+                id
+                name
+            }
+        }
+    }
+`);
+
+export interface ZoneSelectorProps {
+    value: string | undefined;
+    onChange: (value: string) => void;
+}
+
+export function ZoneSelector({ value, onChange }: Readonly<ZoneSelectorProps>) {
+    const { data, isLoading, isPending } = useQuery({
+        queryKey: ['zones'],
+        staleTime: 1000 * 60 * 5,
+        queryFn: () =>
+            api.query(zonesDocument, {
+                options: {
+                    take: 100,
+                },
+            }),
+    });
+
+    if (isLoading || isPending) {
+        return <Skeleton className="h-10 w-full" />;
+    }
+
+    return (
+        <Select value={value} onValueChange={value => value && onChange(value)}>
+            <SelectTrigger>
+                <SelectValue placeholder={<Trans>Select a zone</Trans>} />
+            </SelectTrigger>
+            <SelectContent>
+                {data && (
+                    <SelectGroup>
+                        {data?.zones.items.map(zone => (
+                            <SelectItem key={zone.id} value={zone.id}>
+                                {zone.name}
+                            </SelectItem>
+                        ))}
+                    </SelectGroup>
+                )}
+            </SelectContent>
+        </Select>
+    );
+}

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/accordion.tsx

@@ -0,0 +1,59 @@
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { ChevronDownIcon } from 'lucide-react';
+import * as React from 'react';
+
+import { cn } from '@/vdb/lib/utils.js';
+
+function Accordion({ ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+    return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
+}
+
+function AccordionItem({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+    return (
+        <AccordionPrimitive.Item
+            data-slot="accordion-item"
+            className={cn('border-b last:border-b-0', className)}
+            {...props}
+        />
+    );
+}
+
+function AccordionTrigger({
+    className,
+    children,
+    ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+    return (
+        <AccordionPrimitive.Header className="flex">
+            <AccordionPrimitive.Trigger
+                data-slot="accordion-trigger"
+                className={cn(
+                    'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
+                    className,
+                )}
+                {...props}
+            >
+                {children}
+                <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+            </AccordionPrimitive.Trigger>
+        </AccordionPrimitive.Header>
+    );
+}
+
+function AccordionContent({
+    className,
+    children,
+    ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+    return (
+        <AccordionPrimitive.Content
+            data-slot="accordion-content"
+            className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+            {...props}
+        >
+            <div className={cn('pt-0 pb-4', className)}>{children}</div>
+        </AccordionPrimitive.Content>
+    );
+}
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

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-dialog.tsx

@@ -0,0 +1,128 @@
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import * as React from 'react';
+
+import { buttonVariants } from '@/vdb/components/ui/button.js';
+import { cn } from '@/vdb/lib/utils.js';
+
+function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+    return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+    return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
+}
+
+function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+    return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />;
+}
+
+function AlertDialogOverlay({
+    className,
+    ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+    return (
+        <AlertDialogPrimitive.Overlay
+            data-slot="alert-dialog-overlay"
+            className={cn(
+                'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function AlertDialogContent({
+    className,
+    ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+    return (
+        <AlertDialogPortal>
+            <AlertDialogOverlay />
+            <AlertDialogPrimitive.Content
+                data-slot="alert-dialog-content"
+                className={cn(
+                    'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+                    className,
+                )}
+                {...props}
+            />
+        </AlertDialogPortal>
+    );
+}
+
+function AlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+    return (
+        <div
+            data-slot="alert-dialog-header"
+            className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+            {...props}
+        />
+    );
+}
+
+function AlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
+    return (
+        <div
+            data-slot="alert-dialog-footer"
+            className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
+            {...props}
+        />
+    );
+}
+
+function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+    return (
+        <AlertDialogPrimitive.Title
+            data-slot="alert-dialog-title"
+            className={cn('text-lg font-semibold', className)}
+            {...props}
+        />
+    );
+}
+
+function AlertDialogDescription({
+    className,
+    ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+    return (
+        <AlertDialogPrimitive.Description
+            data-slot="alert-dialog-description"
+            className={cn('text-muted-foreground text-sm', className)}
+            {...props}
+        />
+    );
+}
+
+function AlertDialogAction({
+    className,
+    ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+    return <AlertDialogPrimitive.Action className={cn(buttonVariants(), className)} {...props} />;
+}
+
+function AlertDialogCancel({
+    className,
+    ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+    return (
+        <AlertDialogPrimitive.Cancel
+            className={cn(buttonVariants({ variant: 'outline' }), className)}
+            {...props}
+        />
+    );
+}
+
+export {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogOverlay,
+    AlertDialogPortal,
+    AlertDialogTitle,
+    AlertDialogTrigger,
+};

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',
+    },
+};