@vendure/dashboard 3.2.0 → 3.2.2

package/src/lib/components/shared/translatable-form-field.tsx

@@ -1,74 +1,74 @@
-import { Controller } from 'react-hook-form';
-import { FieldPath } from 'react-hook-form';
-import { useUserSettings } from '@/hooks/use-user-settings.js';
-import { ControllerProps } from 'react-hook-form';
-import { FieldValues } from 'react-hook-form';
-import { FormFieldWrapper } from './form-field-wrapper.js';
-import { FormMessage } from '../ui/form.js';
-import { FormControl } from '../ui/form.js';
-import { FormItem } from '../ui/form.js';
-import { FormDescription, FormField, FormLabel } from '../ui/form.js';
-
-export type TranslatableEntity = FieldValues & {
-    translations?: Array<{ languageCode: string }> | null;
-};
-
-export type TranslatableFormFieldProps<TFieldValues extends TranslatableEntity | TranslatableEntity[]> = Omit<
-    ControllerProps<TFieldValues>,
-    'name'
-> & {
-    name: TFieldValues extends TranslatableEntity
-        ? keyof Omit<NonNullable<TFieldValues['translations']>[number], 'languageCode'>
-        : TFieldValues extends TranslatableEntity[]
-          ? keyof Omit<NonNullable<TFieldValues[number]['translations']>[number], 'languageCode'>
-          : never;
-};
-
-export const TranslatableFormField = <
-    TFieldValues extends TranslatableEntity | TranslatableEntity[] = TranslatableEntity,
->({
-    name,
-    ...props
-}: TranslatableFormFieldProps<TFieldValues>) => {
-    const { contentLanguage } = useUserSettings().settings;
-    const formValues = props.control?._formValues;
-    const translations = Array.isArray(formValues) ? formValues?.[0].translations : formValues?.translations;
-    const index = translations?.findIndex(
-        (translation: any) => translation?.languageCode === contentLanguage,
-    );
-    if (index === undefined || index === -1) {
-        return null;
-    }
-    const translationName = `translations.${index}.${String(name)}` as FieldPath<TFieldValues>;
-    return <Controller {...props} name={translationName} key={translationName} />;
-};
-
-export type TranslatableFormFieldWrapperProps<
-    TFieldValues extends TranslatableEntity | TranslatableEntity[],
-> = TranslatableFormFieldProps<TFieldValues> &
-    Omit<React.ComponentProps<typeof FormFieldWrapper<TFieldValues>>, 'name'>;
-
-export const TranslatableFormFieldWrapper = <
-    TFieldValues extends TranslatableEntity | TranslatableEntity[] = TranslatableEntity,
->({
-    name,
-    label,
-    description,
-    render,
-    ...props
-}: TranslatableFormFieldWrapperProps<TFieldValues>) => {
-    return (
-        <TranslatableFormField
-            control={props.control}
-            name={name}
-            render={renderArgs => (
-                <FormItem>
-                    {label && <FormLabel>{label}</FormLabel>}
-                    <FormControl>{render(renderArgs)}</FormControl>
-                    {description && <FormDescription>{description}</FormDescription>}
-                    <FormMessage />
-                </FormItem>
-            )}
-        />
-    );
-};
+import { Controller } from 'react-hook-form';
+import { FieldPath } from 'react-hook-form';
+import { useUserSettings } from '@/hooks/use-user-settings.js';
+import { ControllerProps } from 'react-hook-form';
+import { FieldValues } from 'react-hook-form';
+import { FormFieldWrapper } from './form-field-wrapper.js';
+import { FormMessage } from '../ui/form.js';
+import { FormControl } from '../ui/form.js';
+import { FormItem } from '../ui/form.js';
+import { FormDescription, FormField, FormLabel } from '../ui/form.js';
+
+export type TranslatableEntity = FieldValues & {
+    translations?: Array<{ languageCode: string }> | null;
+};
+
+export type TranslatableFormFieldProps<TFieldValues extends TranslatableEntity | TranslatableEntity[]> = Omit<
+    ControllerProps<TFieldValues>,
+    'name'
+> & {
+    name: TFieldValues extends TranslatableEntity
+        ? keyof Omit<NonNullable<TFieldValues['translations']>[number], 'languageCode'>
+        : TFieldValues extends TranslatableEntity[]
+          ? keyof Omit<NonNullable<TFieldValues[number]['translations']>[number], 'languageCode'>
+          : never;
+};
+
+export const TranslatableFormField = <
+    TFieldValues extends TranslatableEntity | TranslatableEntity[] = TranslatableEntity,
+>({
+    name,
+    ...props
+}: TranslatableFormFieldProps<TFieldValues>) => {
+    const { contentLanguage } = useUserSettings().settings;
+    const formValues = props.control?._formValues;
+    const translations = Array.isArray(formValues) ? formValues?.[0].translations : formValues?.translations;
+    const index = translations?.findIndex(
+        (translation: any) => translation?.languageCode === contentLanguage,
+    );
+    if (index === undefined || index === -1) {
+        return null;
+    }
+    const translationName = `translations.${index}.${String(name)}` as FieldPath<TFieldValues>;
+    return <Controller {...props} name={translationName} key={translationName} />;
+};
+
+export type TranslatableFormFieldWrapperProps<
+    TFieldValues extends TranslatableEntity | TranslatableEntity[],
+> = TranslatableFormFieldProps<TFieldValues> &
+    Omit<React.ComponentProps<typeof FormFieldWrapper<TFieldValues>>, 'name'>;
+
+export const TranslatableFormFieldWrapper = <
+    TFieldValues extends TranslatableEntity | TranslatableEntity[] = TranslatableEntity,
+>({
+    name,
+    label,
+    description,
+    render,
+    ...props
+}: TranslatableFormFieldWrapperProps<TFieldValues>) => {
+    return (
+        <TranslatableFormField
+            control={props.control}
+            name={name}
+            render={renderArgs => (
+                <FormItem>
+                    {label && <FormLabel>{label}</FormLabel>}
+                    <FormControl>{render(renderArgs)}</FormControl>
+                    {description && <FormDescription>{description}</FormDescription>}
+                    <FormMessage />
+                </FormItem>
+            )}
+        />
+    );
+};

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

@@ -1,159 +1,159 @@
-import { cn } from '@/lib/utils.js';
-import { Image } from 'lucide-react';
-import React from 'react';
-
-export interface AssetLike {
-    id: string;
-    preview: string; // Base URL of the asset
-    name?: string | null;
-    focalPoint?: { x: number; y: number } | null;
-}
-
-export type ImagePreset = 'tiny' | 'thumb' | 'small' | 'medium' | 'large' | null;
-export type ImageFormat = 'jpg' | 'jpeg' | 'png' | 'webp' | 'avif' | null;
-export type ImageMode = 'crop' | 'resize' | null;
-
-export interface VendureImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
-    asset: AssetLike | null | undefined;
-    preset?: ImagePreset;
-    mode?: ImageMode;
-    width?: number;
-    height?: number;
-    format?: ImageFormat;
-    quality?: number;
-    useFocalPoint?: boolean; // Whether to use the asset's focal point in crop mode
-    fallback?: React.ReactNode; // What to show if no asset is provided
-    ref?: React.Ref<HTMLImageElement>;
-}
-
-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) {
-        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 && mode === 'crop') {
-        url.searchParams.set('fpx', asset.focalPoint.x.toString());
-        url.searchParams.set('fpy', asset.focalPoint.y.toString());
-    }
-
-    return (
-        <img
-            src={url.toString()}
-            alt={alt || asset.name || ''}
-            className={cn(className, 'rounded-sm')}
-            style={style}
-            loading="lazy"
-            ref={ref}
-            {...imgProps}
-        />
-    );
-}
-
-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;
-            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} />;
-}
+import { cn } from '@/lib/utils.js';
+import { Image } from 'lucide-react';
+import React from 'react';
+
+export interface AssetLike {
+    id: string;
+    preview: string; // Base URL of the asset
+    name?: string | null;
+    focalPoint?: { x: number; y: number } | null;
+}
+
+export type ImagePreset = 'tiny' | 'thumb' | 'small' | 'medium' | 'large' | null;
+export type ImageFormat = 'jpg' | 'jpeg' | 'png' | 'webp' | 'avif' | null;
+export type ImageMode = 'crop' | 'resize' | null;
+
+export interface VendureImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+    asset: AssetLike | null | undefined;
+    preset?: ImagePreset;
+    mode?: ImageMode;
+    width?: number;
+    height?: number;
+    format?: ImageFormat;
+    quality?: number;
+    useFocalPoint?: boolean; // Whether to use the asset's focal point in crop mode
+    fallback?: React.ReactNode; // What to show if no asset is provided
+    ref?: React.Ref<HTMLImageElement>;
+}
+
+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) {
+        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 && mode === 'crop') {
+        url.searchParams.set('fpx', asset.focalPoint.x.toString());
+        url.searchParams.set('fpy', asset.focalPoint.y.toString());
+    }
+
+    return (
+        <img
+            src={url.toString()}
+            alt={alt || asset.name || ''}
+            className={cn(className, 'rounded-sm')}
+            style={style}
+            loading="lazy"
+            ref={ref}
+            {...imgProps}
+        />
+    );
+}
+
+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;
+            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

@@ -1,66 +1,66 @@
-import {
-    Select,
-    SelectContent,
-    SelectGroup,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
-} from '@/components/ui/select.js';
-import { api } from '@/graphql/api.js';
-import { graphql } from '@/graphql/graphql.js';
-import { Trans } from '@/lib/trans.js';
-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 }: 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>
-    );
-}
-
+import {
+    Select,
+    SelectContent,
+    SelectGroup,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from '@/components/ui/select.js';
+import { api } from '@/graphql/api.js';
+import { graphql } from '@/graphql/graphql.js';
+import { Trans } from '@/lib/trans.js';
+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 }: 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>
+    );
+}
+