@wilshop/dashboard 3.5.2

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

@@ -0,0 +1,56 @@
+import { api } from '@/vdb/graphql/api.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { useLingui } from '@lingui/react/macro';
+import { useQuery } from '@tanstack/react-query';
+import { MultiSelect } from './multi-select.js';
+
+const rolesDocument = graphql(`
+    query Roles($options: RoleListOptions) {
+        roles(options: $options) {
+            items {
+                id
+                code
+                description
+            }
+        }
+    }
+`);
+
+export interface RoleSelectorProps<T extends boolean> {
+    value: T extends true ? string[] : string;
+    onChange: (value: T extends true ? string[] : string) => void;
+    multiple?: T;
+}
+
+export function RoleSelector<T extends boolean>(props: RoleSelectorProps<T>) {
+    const { value, onChange, multiple } = props;
+    const { t } = useLingui();
+
+    const { data } = useQuery({
+        queryKey: ['roles'],
+        queryFn: () =>
+            api.query(rolesDocument, {
+                options: {
+                    take: 100,
+                },
+            }),
+        select: data => data.roles.items,
+    });
+
+    const items = (data ?? []).map(role => ({
+        value: role.id,
+        label: role.code,
+        display: role.description ? role.description : role.code,
+    }));
+
+    return (
+        <MultiSelect
+            value={value}
+            onChange={onChange}
+            multiple={multiple}
+            items={items}
+            placeholder={t`Select a role`}
+            searchPlaceholder={t`Search roles...`}
+        />
+    );
+}

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

@@ -0,0 +1,111 @@
+import { Button } from '@/vdb/components/ui/button.js';
+import {
+    Command,
+    CommandEmpty,
+    CommandInput,
+    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';
+import { Trans } from '@lingui/react/macro';
+import { useQuery } from '@tanstack/react-query';
+import { Plus } from 'lucide-react';
+import { useState } from 'react';
+
+const sellerListDocument = graphql(`
+    query SellerList($options: SellerListOptions) {
+        sellers(options: $options) {
+            items {
+                id
+                name
+            }
+            totalItems
+        }
+    }
+`);
+
+export interface Seller {
+    id: string;
+    name: string;
+}
+
+export interface SellerSelectorProps {
+    value?: string | null;
+    onChange: (value: string) => void;
+    label?: string | React.ReactNode;
+    readOnly?: boolean;
+}
+
+export function SellerSelector(props: SellerSelectorProps) {
+    const [open, setOpen] = useState(false);
+    const [searchTerm, setSearchTerm] = useState('');
+
+    const { data, isLoading } = useQuery({
+        queryKey: ['sellerList', searchTerm],
+        queryFn: () =>
+            api.query(sellerListDocument, {
+                options: {
+                    sort: { name: 'ASC' },
+                    filter: searchTerm
+                        ? {
+                              name: { contains: searchTerm },
+                          }
+                        : undefined,
+                },
+            }),
+        staleTime: 1000 * 60, // 1 minute
+    });
+
+    const handleSearch = (value: string) => {
+        setSearchTerm(value);
+    };
+
+    const selectedSeller = data?.sellers.items.find(seller => seller.id === props.value);
+
+    return (
+        <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+                <Button variant="outline" size="sm" type="button" disabled={props.readOnly} className="gap-2">
+                    {selectedSeller ? (
+                        <span className="flex-1 text-left">{selectedSeller.name}</span>
+                    ) : (
+                        <>
+                            <Plus className="h-4 w-4" />
+                            {props.label ?? <Trans>Select seller</Trans>}
+                        </>
+                    )}
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent className="p-0 w-[350px]" align="start">
+                <Command shouldFilter={false}>
+                    <div className="flex items-center border-b px-3">
+                        <CommandInput
+                            placeholder="Search sellers..."
+                            onValueChange={handleSearch}
+                            className="h-10 flex-1 bg-transparent outline-none placeholder:text-muted-foreground"
+                        />
+                    </div>
+                    <CommandList>
+                        <CommandEmpty>
+                            {isLoading ? <Trans>Loading...</Trans> : <Trans>No sellers found</Trans>}
+                        </CommandEmpty>
+                        {data?.sellers.items.map(seller => (
+                            <CommandItem
+                                key={seller.id}
+                                onSelect={() => {
+                                    props.onChange(seller.id);
+                                    setOpen(false);
+                                }}
+                                className="flex flex-col items-start"
+                            >
+                                <div className="font-medium">{seller.name}</div>
+                            </CommandItem>
+                        ))}
+                    </CommandList>
+                </Command>
+            </PopoverContent>
+        </Popover>
+    );
+}

package/src/lib/components/shared/stock-level-label.tsx

@@ -0,0 +1,22 @@
+import { useLingui } from '@lingui/react/macro';
+
+export type StockLevel = {
+    stockOnHand: number;
+    stockAllocated: number;
+};
+
+export function StockLevelLabel({ stockLevels }: Readonly<{ stockLevels: StockLevel[] }>) {
+    const { t } = useLingui();
+
+    if (!Array.isArray(stockLevels)) {
+        return null;
+    }
+    const totalOnHand = stockLevels.reduce((acc, curr) => acc + curr.stockOnHand, 0);
+    const totalAllocated = stockLevels.reduce((acc, curr) => acc + curr.stockAllocated, 0);
+
+    return (
+        <span title={`${t`Stock on hand`}: ${totalOnHand}, ${t`Stock allocated`}: ${totalAllocated}`}>
+            {totalOnHand} <span className="text-muted-foreground">/ {totalAllocated}</span>
+        </span>
+    );
+}

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

@@ -0,0 +1,80 @@
+import { Money } from '@/vdb/components/data-display/money.js';
+import { DataTableCellComponent } from '@/vdb/components/data-table/types.js';
+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: {
+        id: string;
+        firstName: string;
+        lastName: string;
+    } | null;
+};
+
+export const CustomerCell: DataTableCellComponent<CustomerCellData> = ({ row }) => {
+    const value = row.original.customer;
+    if (!value) {
+        return null;
+    }
+    return (
+        <Button asChild variant="ghost">
+            <Link to={`/customers/${value.id}`}>
+                {value.firstName} {value.lastName}
+            </Link>
+        </Button>
+    );
+};
+
+export const OrderStateCell: DataTableCellComponent<{ state: string }> = ({ row }) => {
+    const { getTranslatedOrderState } = useDynamicTranslations();
+    const value = row.original.state;
+    return <Badge variant="outline">{getTranslatedOrderState(value)}</Badge>;
+};
+
+export const OrderMoneyCell: DataTableCellComponent<{ currencyCode: string }> = ({ cell, row }) => {
+    const value = cell.getValue();
+    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(() => {
+        if (!value) return '';
+        const div = document.createElement('div');
+        div.innerHTML = value;
+        return div.textContent ?? '';
+    }, [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/tax-category-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 taxCategoriesDocument = graphql(`
+    query TaxCategories($options: TaxCategoryListOptions) {
+        taxCategories(options: $options) {
+            items {
+                id
+                name
+                isDefault
+            }
+        }
+    }
+`);
+
+export interface TaxCategorySelectorProps {
+    value: string | undefined;
+    onChange: (value: string) => void;
+}
+
+export function TaxCategorySelector({ value, onChange }: Readonly<TaxCategorySelectorProps>) {
+    const { data, isLoading, isPending, status } = useQuery({
+        queryKey: ['taxCategories'],
+        staleTime: 1000 * 60 * 5,
+        queryFn: () =>
+            api.query(taxCategoriesDocument, {
+                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 tax category</Trans>} />
+            </SelectTrigger>
+            <SelectContent>
+                {data && (
+                    <SelectGroup>
+                        {data?.taxCategories.items.map(taxCategory => (
+                            <SelectItem key={taxCategory.id} value={taxCategory.id}>
+                                {taxCategory.name}
+                            </SelectItem>
+                        ))}
+                    </SelectGroup>
+                )}
+            </SelectContent>
+        </Select>
+    );
+}

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

@@ -0,0 +1,149 @@
+import { OverriddenFormComponent } from '@/vdb/framework/form-engine/overridden-form-component.js';
+import { LocationWrapper } from '@/vdb/framework/layout-engine/location-wrapper.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
+import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
+import { Trans } from '@lingui/react/macro';
+import { Controller, ControllerProps, FieldPath, FieldValues } from 'react-hook-form';
+import { FormControl, FormDescription, FormItem, FormLabel, FormMessage } from '../ui/form.js';
+import { FormFieldWrapper } from './form-field-wrapper.js';
+
+export type TranslatableEntity = FieldValues & {
+    translations?: Array<{ languageCode: string }> | null;
+};
+
+/**
+ * @description
+ * The props for the TranslatableFormField component.
+ *
+ * @docsCategory form-components
+ * @docsPage TranslatableFormFieldWrapper
+ * @since 3.4.0
+ */
+export type TranslatableFormFieldProps<TFieldValues extends TranslatableEntity | TranslatableEntity[]> = Omit<
+    ControllerProps<TFieldValues>,
+    'name'
+> & {
+    /**
+     * @description
+     * The label for the form field.
+     */
+    label?: React.ReactNode;
+    /**
+     * @description
+     * The name of the form field.
+     */
+    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,
+      label,
+      ...props
+  }: TranslatableFormFieldProps<TFieldValues>) => {
+    const { formatLanguageName } = useLocalFormat();
+    const { contentLanguage } = useUserSettings().settings;
+    const formValues = props.control?._formValues;
+    const translations = Array.isArray(formValues) ? formValues?.[0].translations : formValues?.translations;
+    const existingIndex = translations?.findIndex(
+        (translation: any) => translation?.languageCode === contentLanguage,
+    );
+    const index = existingIndex === -1 ? translations?.length : existingIndex;
+    if (index === undefined || index === -1) {
+        return (
+            <FormItem>
+                {label && <FormLabel>{label}</FormLabel>}
+                <div className="text-sm text-muted-foreground">
+                    <Trans>No translation found for {formatLanguageName(contentLanguage)}</Trans>
+                </div>
+            </FormItem>
+        );
+    }
+    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'>;
+
+/**
+ * @description
+ * This is the equivalent of the {@link FormFieldWrapper} component, but for translatable fields.
+ *
+ * @example
+ * ```tsx
+ * <PageBlock column="main" blockId="main-form">
+ *     <DetailFormGrid>
+ *         <TranslatableFormFieldWrapper
+ *             control={form.control}
+ *             name="name"
+ *             label={<Trans>Product name</Trans>}
+ *             render={({ field }) => <Input {...field} />}
+ *         />
+ *         <TranslatableFormFieldWrapper
+ *             control={form.control}
+ *             name="slug"
+ *             label={<Trans>Slug</Trans>}
+ *             render={({ field }) => <Input {...field} />}
+ *         />
+ *     </DetailFormGrid>
+
+ *     <TranslatableFormFieldWrapper
+ *         control={form.control}
+ *         name="description"
+ *         label={<Trans>Description</Trans>}
+ *         render={({ field }) => <RichTextInput {...field} />}
+ *     />
+ * </PageBlock>
+ * ```
+ *
+ * @docsCategory form-components
+ * @docsPage TranslatableFormFieldWrapper
+ * @docsWeight 0
+ * @since 3.4.0
+ */
+export const TranslatableFormFieldWrapper = <
+    TFieldValues extends TranslatableEntity | TranslatableEntity[] = TranslatableEntity,
+>({
+      name,
+      label,
+      description,
+      render,
+      renderFormControl,
+      ...props
+  }: TranslatableFormFieldWrapperProps<TFieldValues>) => {
+    return (
+        <LocationWrapper identifier={name as string}>
+            <TranslatableFormField
+                label={label}
+                control={props.control}
+                name={name}
+                render={renderArgs => (
+                    <FormItem>
+                        {label && <FormLabel>{label}</FormLabel>}
+                        {renderFormControl ? (
+                            <FormControl>
+                                <OverriddenFormComponent field={renderArgs.field} fieldName={name as string}>
+                                    {render(renderArgs)}
+                                </OverriddenFormComponent>
+                            </FormControl>
+                        ) : (
+                            <OverriddenFormComponent field={renderArgs.field} fieldName={name as string}>
+                                {render(renderArgs)}
+                            </OverriddenFormComponent>
+                        )}
+                        {description && <FormDescription>{description}</FormDescription>}
+                        <FormMessage />
+                    </FormItem>
+                )}
+            />
+        </LocationWrapper>
+    );
+};

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: 'Framework/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>
+        );
+    },
+};