@vendure/dashboard 3.3.6-master-202507020959 → 3.3.6-master-202507030234

package/src/app/routes/_authenticated/_product-variants/product-variants_.$id.tsx

@@ -1,17 +1,17 @@
-import { MoneyInput } from '@/components/data-input/money-input.js';
-import { AssignedFacetValues } from '@/components/shared/assigned-facet-values.js';
-import { EntityAssets } from '@/components/shared/entity-assets.js';
-import { ErrorPage } from '@/components/shared/error-page.js';
-import { FormFieldWrapper } from '@/components/shared/form-field-wrapper.js';
-import { PermissionGuard } from '@/components/shared/permission-guard.js';
-import { TaxCategorySelector } from '@/components/shared/tax-category-selector.js';
-import { TranslatableFormFieldWrapper } from '@/components/shared/translatable-form-field.js';
-import { Button } from '@/components/ui/button.js';
-import { FormControl, FormDescription, FormItem, FormLabel, FormMessage } from '@/components/ui/form.js';
-import { Input } from '@/components/ui/input.js';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select.js';
-import { Switch } from '@/components/ui/switch.js';
-import { NEW_ENTITY_PATH } from '@/constants.js';
+import { MoneyInput } from '@/vdb/components/data-input/money-input.js';
+import { AssignedFacetValues } from '@/vdb/components/shared/assigned-facet-values.js';
+import { EntityAssets } from '@/vdb/components/shared/entity-assets.js';
+import { ErrorPage } from '@/vdb/components/shared/error-page.js';
+import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
+import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { TaxCategorySelector } from '@/vdb/components/shared/tax-category-selector.js';
+import { TranslatableFormFieldWrapper } from '@/vdb/components/shared/translatable-form-field.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { FormControl, FormDescription, FormItem, FormLabel, FormMessage } from '@/vdb/components/ui/form.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/vdb/components/ui/select.js';
+import { Switch } from '@/vdb/components/ui/switch.js';
+import { NEW_ENTITY_PATH } from '@/vdb/constants.js';
 import {
     CustomFieldsPageBlock,
     DetailFormGrid,
@@ -21,11 +21,11 @@ import {
     PageBlock,
     PageLayout,
     PageTitle,
-} from '@/framework/layout-engine/page-layout.js';
-import { detailPageRouteLoader } from '@/framework/page/detail-page-route-loader.js';
-import { useDetailPage } from '@/framework/page/use-detail-page.js';
-import { useChannel } from '@/hooks/use-channel.js';
-import { Trans, useLingui } from '@/lib/trans.js';
+} from '@/vdb/framework/layout-engine/page-layout.js';
+import { detailPageRouteLoader } from '@/vdb/framework/page/detail-page-route-loader.js';
+import { useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
+import { useChannel } from '@/vdb/hooks/use-channel.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { Fragment } from 'react/jsx-runtime';
 import { toast } from 'sonner';

package/src/app/routes/_authenticated/_products/components/add-product-variant-dialog.tsx

@@ -1,6 +1,6 @@
-import { MoneyInput } from '@/components/data-input/money-input.js';
-import { FormFieldWrapper } from '@/components/shared/form-field-wrapper.js';
-import { Button } from '@/components/ui/button.js';
+import { MoneyInput } from '@/vdb/components/data-input/money-input.js';
+import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
+import { Button } from '@/vdb/components/ui/button.js';
 import {
     Dialog,
     DialogContent,
@@ -8,13 +8,13 @@ import {
     DialogHeader,
     DialogTitle,
     DialogTrigger,
-} from '@/components/ui/dialog.js';
-import { Form } from '@/components/ui/form.js';
-import { Input } from '@/components/ui/input.js';
-import { api } from '@/graphql/api.js';
-import { graphql, ResultOf, VariablesOf } from '@/graphql/graphql.js';
-import { useChannel } from '@/hooks/use-channel.js';
-import { Trans, useLingui } from '@/lib/trans.js';
+} from '@/vdb/components/ui/dialog.js';
+import { Form } from '@/vdb/components/ui/form.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { api } from '@/vdb/graphql/api.js';
+import { graphql, ResultOf, VariablesOf } from '@/vdb/graphql/graphql.js';
+import { useChannel } from '@/vdb/hooks/use-channel.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { Plus } from 'lucide-react';

package/src/app/routes/_authenticated/_products/components/assign-facet-values-dialog.tsx

@@ -2,9 +2,9 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useState } from 'react';
 import { toast } from 'sonner';
 
-import { FacetValueChip } from '@/components/shared/facet-value-chip.js';
-import { FacetValue, FacetValueSelector } from '@/components/shared/facet-value-selector.js';
-import { Button } from '@/components/ui/button.js';
+import { FacetValueChip } from '@/vdb/components/shared/facet-value-chip.js';
+import { FacetValue, FacetValueSelector } from '@/vdb/components/shared/facet-value-selector.js';
+import { Button } from '@/vdb/components/ui/button.js';
 import {
     Dialog,
     DialogContent,
@@ -12,11 +12,11 @@ import {
     DialogFooter,
     DialogHeader,
     DialogTitle,
-} from '@/components/ui/dialog.js';
-import { ResultOf } from '@/graphql/graphql.js';
-import { Trans, useLingui } from '@/lib/trans.js';
+} from '@/vdb/components/ui/dialog.js';
+import { ResultOf } from '@/vdb/graphql/graphql.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
 
-import { getDetailQueryOptions } from '@/framework/page/use-detail-page.js';
+import { getDetailQueryOptions } from '@/vdb/framework/page/use-detail-page.js';
 
 interface EntityWithFacetValues {
     id: string;

package/src/app/routes/_authenticated/_products/components/create-product-options-dialog.tsx

@@ -1,4 +1,5 @@
-import { Button } from '@/components/ui/button.js';
+import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
+import { Button } from '@/vdb/components/ui/button.js';
 import {
     Dialog,
     DialogContent,
@@ -6,13 +7,12 @@ import {
     DialogHeader,
     DialogTitle,
     DialogTrigger,
-} from '@/components/ui/dialog.js';
-import { Form } from '@/components/ui/form.js';
-import { Input } from '@/components/ui/input.js';
-import { FormFieldWrapper } from '@/components/shared/form-field-wrapper.js';
-import { api } from '@/graphql/api.js';
-import { graphql } from '@/graphql/graphql.js';
-import { Trans, useLingui } from '@/lib/trans.js';
+} from '@/vdb/components/ui/dialog.js';
+import { Form } from '@/vdb/components/ui/form.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { api } from '@/vdb/graphql/api.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { Plus, Trash2 } from 'lucide-react';
@@ -99,10 +99,16 @@ const updateProductVariantDocument = graphql(`
 `);
 
 const formSchema = z.object({
-    optionGroups: z.array(z.object({
-        name: z.string().min(1, 'Option group name is required'),
-        options: z.array(z.string().min(1, 'Option name is required')).min(1, 'At least one option is required'),
-    })).min(1, 'At least one option group is required'),
+    optionGroups: z
+        .array(
+            z.object({
+                name: z.string().min(1, 'Option group name is required'),
+                options: z
+                    .array(z.string().min(1, 'Option name is required'))
+                    .min(1, 'At least one option is required'),
+            }),
+        )
+        .min(1, 'At least one option group is required'),
     existingVariantOptionIds: z.array(z.string()).min(1, 'Must select an option for the existing variant'),
 });
 
@@ -146,11 +152,11 @@ export function CreateProductOptionsDialog({
             setOpen(false);
             onSuccess?.();
         },
-        onError: (error) => {
+        onError: error => {
             toast.error(i18n.t('Failed to create product options'), {
                 description: error instanceof Error ? error.message : i18n.t('Unknown error'),
             });
-        }
+        },
     });
 
     const onSubmit = async (values: FormValues) => {
@@ -159,13 +165,13 @@ export function CreateProductOptionsDialog({
         try {
             // Create all option groups and their options
             const createdOptionGroups = await Promise.all(
-                values.optionGroups.map(async (group) => {
+                values.optionGroups.map(async group => {
                     const result = await createProductOptionGroupMutation.mutateAsync({
                         input: {
                             code: group.name.toLowerCase().replace(/\s+/g, '-'),
                             translations: [
                                 {
-                                    languageCode: "en",
+                                    languageCode: 'en',
                                     name: group.name,
                                 },
                             ],
@@ -173,7 +179,7 @@ export function CreateProductOptionsDialog({
                                 code: option.toLowerCase().replace(/\s+/g, '-'),
                                 translations: [
                                     {
-                                        languageCode: "en",
+                                        languageCode: 'en',
                                         name: option,
                                     },
                                 ],
@@ -188,14 +194,11 @@ export function CreateProductOptionsDialog({
                     });
 
                     return result.createProductOptionGroup;
-                })
+                }),
             );
 
             // Combine existing and newly created option groups
-            const allOptionGroups = [
-                ...(productData.product.optionGroups || []),
-                ...createdOptionGroups,
-            ];
+            const allOptionGroups = [...(productData.product.optionGroups || []), ...createdOptionGroups];
 
             // Map the selected option names to their IDs
             const selectedOptionIds = values.existingVariantOptionIds.map((optionName, index) => {
@@ -227,7 +230,7 @@ export function CreateProductOptionsDialog({
                         optionIds: selectedOptionIds,
                         translations: [
                             {
-                                languageCode: "en",
+                                languageCode: 'en',
                                 name: newVariantName,
                             },
                         ],
@@ -248,7 +251,10 @@ export function CreateProductOptionsDialog({
 
     const removeOptionGroup = (index: number) => {
         const currentGroups = form.getValues('optionGroups');
-        form.setValue('optionGroups', currentGroups.filter((_, i) => i !== index));
+        form.setValue(
+            'optionGroups',
+            currentGroups.filter((_, i) => i !== index),
+        );
     };
 
     const addOption = (groupIndex: number) => {
@@ -261,7 +267,9 @@ export function CreateProductOptionsDialog({
     const removeOption = (groupIndex: number, optionIndex: number) => {
         const currentGroups = form.getValues('optionGroups');
         const updatedGroups = [...currentGroups];
-        updatedGroups[groupIndex].options = updatedGroups[groupIndex].options.filter((_, i) => i !== optionIndex);
+        updatedGroups[groupIndex].options = updatedGroups[groupIndex].options.filter(
+            (_, i) => i !== optionIndex,
+        );
         form.setValue('optionGroups', updatedGroups);
     };
 
@@ -311,7 +319,10 @@ export function CreateProductOptionsDialog({
                                                     name={`optionGroups.${groupIndex}.options.${optionIndex}`}
                                                     label={<Trans>Option name</Trans>}
                                                     render={({ field }) => (
-                                                        <Input {...field} placeholder={i18n.t('e.g. Small')} />
+                                                        <Input
+                                                            {...field}
+                                                            placeholder={i18n.t('e.g. Small')}
+                                                        />
                                                     )}
                                                 />
                                                 {optionIndex > 0 && (
@@ -337,12 +348,7 @@ export function CreateProductOptionsDialog({
                                     </div>
                                 </div>
                             ))}
-                            <Button
-                                type="button"
-                                variant="outline"
-                                size="sm"
-                                onClick={addOptionGroup}
-                            >
+                            <Button type="button" variant="outline" size="sm" onClick={addOptionGroup}>
                                 <Plus className="mr-2 h-4 w-4" />
                                 <Trans>Add another option group</Trans>
                             </Button>
@@ -354,7 +360,10 @@ export function CreateProductOptionsDialog({
                                     <Trans>Assign options to existing variant</Trans>
                                 </h3>
                                 <p className="text-sm text-muted-foreground">
-                                    <Trans>Select which options should apply to the existing variant "{productData.product.variants[0].name}"</Trans>
+                                    <Trans>
+                                        Select which options should apply to the existing variant "
+                                        {productData.product.variants[0].name}"
+                                    </Trans>
                                 </p>
                                 {/* Show existing option groups first */}
                                 {productData.product.optionGroups?.map((group, groupIndex) => (
@@ -367,14 +376,16 @@ export function CreateProductOptionsDialog({
                                             <select
                                                 className="w-full p-2 border rounded-md"
                                                 value={field.value}
-                                                onChange={(e) => {
-                                                    const newValues = [...form.getValues('existingVariantOptionIds')];
+                                                onChange={e => {
+                                                    const newValues = [
+                                                        ...form.getValues('existingVariantOptionIds'),
+                                                    ];
                                                     newValues[groupIndex] = e.target.value;
                                                     form.setValue('existingVariantOptionIds', newValues);
                                                 }}
                                             >
                                                 <option value="">Select an option</option>
-                                                {group.options.map((option) => (
+                                                {group.options.map(option => (
                                                     <option key={option.id} value={option.name}>
                                                         {option.name}
                                                     </option>
@@ -394,9 +405,14 @@ export function CreateProductOptionsDialog({
                                             <select
                                                 className="w-full p-2 border rounded-md"
                                                 value={field.value}
-                                                onChange={(e) => {
-                                                    const newValues = [...form.getValues('existingVariantOptionIds')];
-                                                    newValues[(productData?.product?.optionGroups?.length || 0) + groupIndex] = e.target.value;
+                                                onChange={e => {
+                                                    const newValues = [
+                                                        ...form.getValues('existingVariantOptionIds'),
+                                                    ];
+                                                    newValues[
+                                                        (productData?.product?.optionGroups?.length || 0) +
+                                                            groupIndex
+                                                    ] = e.target.value;
                                                     form.setValue('existingVariantOptionIds', newValues);
                                                 }}
                                             >
@@ -420,7 +436,7 @@ export function CreateProductOptionsDialog({
                                     createProductOptionGroupMutation.isPending ||
                                     addOptionGroupToProductMutation.isPending ||
                                     updateProductVariantMutation.isPending ||
-                                    (productData?.product?.variants[0] && 
+                                    (productData?.product?.variants[0] &&
                                         form.watch('existingVariantOptionIds').some(value => !value))
                                 }
                             >
@@ -432,4 +448,4 @@ export function CreateProductOptionsDialog({
             </DialogContent>
         </Dialog>
     );
-} 
+}

package/src/app/routes/_authenticated/_products/components/create-product-variants-dialog.tsx

@@ -1,22 +1,22 @@
-import { useCallback, useMemo, useState } from 'react';
-import { CreateProductVariants, VariantConfiguration } from './create-product-variants.js';
+import { Button } from '@/vdb/components/ui/button.js';
 import {
     Dialog,
     DialogContent,
+    DialogDescription,
     DialogFooter,
     DialogHeader,
     DialogTitle,
-    DialogDescription,
     DialogTrigger,
-} from '@/components/ui/dialog.js';
-import { Button } from '@/components/ui/button.js';
-import { Plus } from 'lucide-react';
-import { useChannel } from '@/hooks/use-channel.js';
-import { Trans } from '@/lib/trans.js';
-import { graphql } from '@/graphql/graphql.js';
-import { api } from '@/graphql/api.js';
+} from '@/vdb/components/ui/dialog.js';
+import { api } from '@/vdb/graphql/api.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { useChannel } from '@/vdb/hooks/use-channel.js';
+import { Trans } from '@/vdb/lib/trans.js';
+import { normalizeString } from '@/vdb/lib/utils.js';
 import { useMutation } from '@tanstack/react-query';
-import { normalizeString } from '@/lib/utils.js';
+import { Plus } from 'lucide-react';
+import { useCallback, useState } from 'react';
+import { CreateProductVariants, VariantConfiguration } from './create-product-variants.js';
 
 const createProductOptionsMutation = graphql(`
     mutation CreateOptionGroups($input: CreateProductOptionGroupInput!) {

package/src/app/routes/_authenticated/_products/components/create-product-variants.tsx

@@ -1,19 +1,18 @@
+import { Alert, AlertDescription } from '@/vdb/components/ui/alert.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Checkbox } from '@/vdb/components/ui/checkbox.js';
+import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/vdb/components/ui/form.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/vdb/components/ui/table.js';
+import { api } from '@/vdb/graphql/api.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Trans } from '@/lib/trans.js';
+import { useQuery } from '@tanstack/react-query';
 import { Plus, Trash2 } from 'lucide-react';
 import { useEffect, useMemo } from 'react';
 import { FormProvider, useFieldArray, useForm } from 'react-hook-form';
 import { z } from 'zod';
-import { useQuery } from '@tanstack/react-query';
-import { Alert, AlertDescription } from '@/components/ui/alert.js';
-import { Button } from '@/components/ui/button.js';
-import { Card } from '@/components/ui/card.js';
-import { Checkbox } from '@/components/ui/checkbox.js';
-import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form.js';
-import { Input } from '@/components/ui/input.js';
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table.js';
-import { graphql } from '@/graphql/graphql.js';
-import { api } from '@/graphql/api.js';
 import { OptionValueInput } from './option-value-input.js';
 
 const getStockLocationsDocument = graphql(`
@@ -39,7 +38,6 @@ const optionGroupSchema = z.object({
     values: z.array(optionValueSchema).min(1, { message: 'At least one value is required' }),
 });
 
-
 type VariantOption = {
     name: string;
     value: string;
@@ -99,7 +97,10 @@ interface CreateProductVariantsProps {
     onChange?: ({ data }: { data: VariantConfiguration }) => void;
 }
 
-export function CreateProductVariants({ currencyCode = 'USD', onChange }: CreateProductVariantsProps) {
+export function CreateProductVariants({
+    currencyCode = 'USD',
+    onChange,
+}: Readonly<CreateProductVariantsProps>) {
     const { data: stockLocationsResult } = useQuery({
         queryKey: ['stockLocations'],
         queryFn: () => api.query(getStockLocationsDocument, { options: { take: 100 } }),
@@ -127,7 +128,10 @@ export function CreateProductVariants({ currencyCode = 'USD', onChange }: Create
 
     const watchedOptionGroups = watch('optionGroups');
     // memoize the variants
-    const variants = useMemo(() => generateVariants(watchedOptionGroups), [JSON.stringify(watchedOptionGroups)]);
+    const variants = useMemo(
+        () => generateVariants(watchedOptionGroups),
+        [JSON.stringify(watchedOptionGroups)],
+    );
 
     // Use the handleSubmit approach for the entire form
     useEffect(() => {

package/src/app/routes/_authenticated/_products/components/option-value-input.tsx

@@ -1,10 +1,9 @@
-import { useFieldArray } from "react-hook-form";
-import { useFormContext } from "react-hook-form";
-import { useState } from "react";
-import { Input } from "@/components/ui/input.js";
-import { Button } from "@/components/ui/button.js";
-import { Badge } from "@/components/ui/badge.js";
-import { Plus, X } from "lucide-react";
+import { Badge } from '@/vdb/components/ui/badge.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { Plus, X } from 'lucide-react';
+import { useState } from 'react';
+import { useFieldArray, useFormContext } from 'react-hook-form';
 
 interface OptionValue {
     value: string;
@@ -16,12 +15,15 @@ interface FormValues {
         name: string;
         values: OptionValue[];
     }[];
-    variants: Record<string, {
-        enabled: boolean;
-        sku: string;
-        price: string;
-        stock: string;
-    }>;
+    variants: Record<
+        string,
+        {
+            enabled: boolean;
+            sku: string;
+            price: string;
+            stock: string;
+        }
+    >;
 }
 
 interface OptionValueInputProps {
@@ -30,7 +32,11 @@ interface OptionValueInputProps {
     disabled?: boolean;
 }
 
-export function OptionValueInput({ groupName, groupIndex, disabled = false }: OptionValueInputProps) {
+export function OptionValueInput({
+    groupName,
+    groupIndex,
+    disabled = false,
+}: Readonly<OptionValueInputProps>) {
     const { control, watch } = useFormContext<FormValues>();
     const { fields, append, remove } = useFieldArray({
         control,
@@ -93,4 +99,4 @@ export function OptionValueInput({ groupName, groupIndex, disabled = false }: Op
             </div>
         </div>
     );
-}
+}

package/src/app/routes/_authenticated/_products/components/product-bulk-actions.tsx

@@ -1,14 +1,13 @@
 import { TagIcon } from 'lucide-react';
 import { useState } from 'react';
 
-import { DataTableBulkActionItem } from '@/components/data-table/data-table-bulk-action-item.js';
-import { AssignToChannelBulkAction } from '@/components/shared/assign-to-channel-bulk-action.js';
-import { usePriceFactor } from '@/components/shared/assign-to-channel-dialog.js';
-import { RemoveFromChannelBulkAction } from '@/components/shared/remove-from-channel-bulk-action.js';
-import { BulkActionComponent } from '@/framework/data-table/data-table-types.js';
-import { api } from '@/graphql/api.js';
-import { useChannel, usePaginatedList } from '@/index.js';
-import { Trans } from '@/lib/trans.js';
+import { DataTableBulkActionItem } from '@/vdb/components/data-table/data-table-bulk-action-item.js';
+import { AssignToChannelBulkAction } from '@/vdb/components/shared/assign-to-channel-bulk-action.js';
+import { usePriceFactor } from '@/vdb/components/shared/assign-to-channel-dialog.js';
+import { RemoveFromChannelBulkAction } from '@/vdb/components/shared/remove-from-channel-bulk-action.js';
+import { api } from '@/vdb/graphql/api.js';
+import { BulkActionComponent, useChannel, usePaginatedList } from '@/vdb/index.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
 import { DuplicateBulkAction } from '../../../../common/duplicate-bulk-action.js';
 import {

package/src/app/routes/_authenticated/_products/components/product-option-select.tsx

@@ -1,21 +1,17 @@
-import { useState } from 'react';
-import { Plus, Check, ChevronsUpDown } from 'lucide-react';
-import { Button } from '@/components/ui/button.js';
-import { FormFieldWrapper } from '@/components/shared/form-field-wrapper.js';
+import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
+import { Button } from '@/vdb/components/ui/button.js';
 import {
     Command,
     CommandEmpty,
     CommandGroup,
     CommandInput,
     CommandItem,
-} from '@/components/ui/command.js';
-import {
-    Popover,
-    PopoverContent,
-    PopoverTrigger,
-} from '@/components/ui/popover.js';
-import { cn } from '@/lib/utils.js';
-import { Trans, useLingui } from '@/lib/trans.js';
+} from '@/vdb/components/ui/command.js';
+import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
+import { cn } from '@/vdb/lib/utils.js';
+import { Check, ChevronsUpDown, Plus } from 'lucide-react';
+import { useState } from 'react';
 
 interface ProductOption {
     id: string;
@@ -37,7 +33,12 @@ interface ProductOptionSelectProps {
     onCreateOption: (name: string) => void;
 }
 
-export function ProductOptionSelect({ group, value, onChange, onCreateOption }: ProductOptionSelectProps) {
+export function ProductOptionSelect({
+    group,
+    value,
+    onChange,
+    onCreateOption,
+}: Readonly<ProductOptionSelectProps>) {
     const [open, setOpen] = useState(false);
     const [newOptionInput, setNewOptionInput] = useState('');
     const { i18n } = useLingui();
@@ -48,31 +49,24 @@ export function ProductOptionSelect({ group, value, onChange, onCreateOption }:
             name={`options.${group.id}`}
             label={group.name}
             render={() => (
-                <Popover
-                    open={open}
-                    onOpenChange={setOpen}
-                >
+                <Popover open={open} onOpenChange={setOpen}>
                     <PopoverTrigger asChild>
-                        <Button
-                            variant="outline"
-                            role="combobox"
-                            className="w-full justify-between"
-                        >
-                            {value
-                                ? group.options.find(
-                                    (option) => option.id === value,
-                                )?.name
-                                : <Trans>Select {group.name}</Trans>}
+                        <Button variant="outline" role="combobox" className="w-full justify-between">
+                            {value ? (
+                                group.options.find(option => option.id === value)?.name
+                            ) : (
+                                <Trans>Select {group.name}</Trans>
+                            )}
                             <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                         </Button>
                     </PopoverTrigger>
                     <PopoverContent className="w-full p-0">
                         <Command>
-                            <CommandInput 
-                                placeholder={i18n.t('Search {name}...').replace('{name}', group.name)} 
+                            <CommandInput
+                                placeholder={i18n.t('Search {name}...').replace('{name}', group.name)}
                                 onValueChange={setNewOptionInput}
                             />
-                            <CommandEmpty className='py-2'>
+                            <CommandEmpty className="py-2">
                                 <div className="p-2">
                                     <Button
                                         variant="outline"
@@ -89,7 +83,7 @@ export function ProductOptionSelect({ group, value, onChange, onCreateOption }:
                                 </div>
                             </CommandEmpty>
                             <CommandGroup>
-                                {group.options.map((option) => (
+                                {group.options.map(option => (
                                     <CommandItem
                                         key={option.id}
                                         value={option.name}
@@ -100,8 +94,8 @@ export function ProductOptionSelect({ group, value, onChange, onCreateOption }:
                                     >
                                         <Check
                                             className={cn(
-                                                "mr-2 h-4 w-4",
-                                                value === option.id ? "opacity-100" : "opacity-0"
+                                                'mr-2 h-4 w-4',
+                                                value === option.id ? 'opacity-100' : 'opacity-0',
                                             )}
                                         />
                                         {option.name}
@@ -114,4 +108,4 @@ export function ProductOptionSelect({ group, value, onChange, onCreateOption }:
             )}
         />
     );
-} 
+}

package/src/app/routes/_authenticated/_products/components/product-variants-table.tsx

@@ -1,12 +1,12 @@
-import { Money } from '@/components/data-display/money.js';
+import { Money } from '@/vdb/components/data-display/money.js';
 import {
     PaginatedListDataTable,
     PaginatedListRefresherRegisterFn,
-} from '@/components/shared/paginated-list-data-table.js';
-import { StockLevelLabel } from '@/components/shared/stock-level-label.js';
-import { graphql } from '@/graphql/graphql.js';
-import { useLocalFormat } from '@/hooks/use-local-format.js';
-import { DetailPageButton } from '@/index.js';
+} from '@/vdb/components/shared/paginated-list-data-table.js';
+import { StockLevelLabel } from '@/vdb/components/shared/stock-level-label.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
+import { DetailPageButton } from '@/vdb/index.js';
 import { ColumnFiltersState, SortingState } from '@tanstack/react-table';
 import { useState } from 'react';
 import { productVariantListDocument } from '../products.graphql.js';