@vendure/dashboard 3.3.6-master-202507050232 → 3.4.0-minor-202506250934

package/src/lib/components/shared/entity-assets.tsx

@@ -1,11 +1,11 @@
-import { Button } from '@/vdb/components/ui/button.js';
+import { Button } from '@/components/ui/button.js';
 import {
     DropdownMenu,
     DropdownMenuContent,
     DropdownMenuItem,
     DropdownMenuTrigger,
-} from '@/vdb/components/ui/dropdown-menu.js';
-import { AssetFragment } from '@/vdb/graphql/fragments.js';
+} from '@/components/ui/dropdown-menu.js';
+import { AssetFragment } from '@/graphql/fragments.js';
 import {
     closestCenter,
     DndContext,
@@ -56,11 +56,11 @@ interface FeaturedAssetProps {
 }
 
 function FeaturedAsset({
-    featuredAsset,
-    compact = false,
-    onSelectAssets,
-    onPreviewAsset,
-}: FeaturedAssetProps) {
+                           featuredAsset,
+                           compact = false,
+                           onSelectAssets,
+                           onPreviewAsset,
+                       }: FeaturedAssetProps) {
     return (
         <div
             className={`flex items-center justify-center ${compact ? 'h-40' : 'h-64'} border border-dashed rounded-md`}
@@ -90,14 +90,14 @@ function FeaturedAsset({
 
 // Sortable asset item component
 function SortableAsset({
-    asset,
-    compact,
-    isFeatured,
-    updatePermissions,
-    onPreview,
-    onSetAsFeatured,
-    onRemove,
-}: {
+                           asset,
+                           compact,
+                           isFeatured,
+                           updatePermissions,
+                           onPreview,
+                           onSetAsFeatured,
+                           onRemove,
+                       }: {
     asset: Asset;
     compact: boolean;
     isFeatured: boolean;
@@ -163,13 +163,13 @@ function SortableAsset({
 }
 
 export function EntityAssets({
-    assets: initialAssets = [],
-    featuredAsset: initialFeaturedAsset,
-    compact = false,
-    updatePermissions = true,
-    multiSelect = true,
-    onChange,
-}: EntityAssetsProps) {
+                                 assets: initialAssets = [],
+                                 featuredAsset: initialFeaturedAsset,
+                                 compact = false,
+                                 updatePermissions = true,
+                                 multiSelect = true,
+                                 onChange,
+                             }: EntityAssetsProps) {
     const [assets, setAssets] = useState<Asset[]>([...initialAssets]);
     const [featuredAsset, setFeaturedAsset] = useState<Asset | undefined | null>(initialFeaturedAsset);
     const [isPickerOpen, setIsPickerOpen] = useState(false);
@@ -372,17 +372,18 @@ interface AssetListProps {
     onDragEnd: (event: DragEndEvent) => void;
 }
 
+
 function AssetList({
-    assets,
-    compact,
-    sensors,
-    updatePermissions,
-    isFeatured,
-    onPreview,
-    onSetAsFeatured,
-    onRemove,
-    onDragEnd,
-}: AssetListProps) {
+                       assets,
+                       compact,
+                       sensors,
+                       updatePermissions,
+                       isFeatured,
+                       onPreview,
+                       onSetAsFeatured,
+                       onRemove,
+                       onDragEnd,
+                   }: AssetListProps) {
     return (
         <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={onDragEnd}>
             <div className={`${compact ? 'max-h-32' : ''} overflow-auto p-1`}>

package/src/lib/components/shared/error-page.tsx

@@ -1,7 +1,7 @@
-import { Page, PageBlock, PageLayout, PageTitle } from '@/vdb/framework/layout-engine/page-layout.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Page, PageBlock, PageLayout, PageTitle } from '@/framework/layout-engine/page-layout.js';
+import { Trans } from '@/lib/trans.js';
 import { AlertCircle } from 'lucide-react';
-import { Alert, AlertDescription, AlertTitle } from '../ui/alert.js';
+import { Alert, AlertTitle, AlertDescription } from '../ui/alert.js';
 
 export interface ErrorPageProps {
     message: string;
@@ -11,14 +11,14 @@ export interface ErrorPageProps {
  * @description
  * A generic error page that displays an error message.
  */
-export function ErrorPage({ message }: Readonly<ErrorPageProps>) {
+export function ErrorPage({ message }: ErrorPageProps) {
     return (
-        <Page pageId="error-page">
+        <Page pageId='error-page'>
             <PageTitle>
                 <Trans>Error</Trans>
             </PageTitle>
             <PageLayout>
-                <PageBlock column="main" blockId="error-message">
+                <PageBlock column="main" blockId='error-message'>
                     <Alert variant="destructive">
                         <AlertCircle className="h-4 w-4" />
                         <AlertTitle>Error</AlertTitle>

package/src/lib/components/shared/facet-value-chip.tsx

@@ -1,4 +1,4 @@
-import { Badge } from '@/vdb/components/ui/badge.js';
+import { Badge } from '@/components/ui/badge.js';
 import { X } from 'lucide-react';
 
 // Interface for facet value type
@@ -20,22 +20,15 @@ interface FacetValueChipProps {
     onRemove?: (id: string) => void;
 }
 
-export function FacetValueChip({
-    facetValue,
-    removable = true,
-    onRemove,
-    displayFacetName = true,
-}: FacetValueChipProps) {
+export function FacetValueChip({ facetValue, removable = true, onRemove, displayFacetName = true }: FacetValueChipProps) {
     return (
-        <Badge
+        <Badge 
             variant="secondary"
             className="flex items-center gap-2 py-0.5 pl-2 pr-1 h-6 hover:bg-secondary/80"
         >
             <div className="flex items-center gap-1.5">
                 <span className="font-medium">{facetValue.name}</span>
-                {displayFacetName && (
-                    <span className="text-muted-foreground text-xs">in {facetValue.facet.name}</span>
-                )}
+                {displayFacetName && <span className="text-muted-foreground text-xs">in {facetValue.facet.name}</span>}
             </div>
             {removable && (
                 <button
@@ -49,4 +42,4 @@ export function FacetValueChip({
             )}
         </Badge>
     );
-}
+} 

package/src/lib/components/shared/facet-value-selector.tsx

@@ -1,18 +1,11 @@
-import { Button } from '@/vdb/components/ui/button.js';
-import {
-    Command,
-    CommandEmpty,
-    CommandGroup,
-    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 '@/vdb/lib/trans.js';
-import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
+import { Button } from '@/components/ui/button.js';
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command.js';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover.js';
+import { api } from '@/graphql/api.js';
+import { graphql } from '@/graphql/graphql.js';
 import { useDebounce } from '@uidotdev/usehooks';
+import { Trans } from '@/lib/trans.js';
+import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
 import { ChevronRight, Loader2, Plus } from 'lucide-react';
 import React, { useState } from 'react';
 
@@ -106,13 +99,13 @@ export function FacetValueSelector({
             return api.query(getFacetValueListDocument, {
                 options: {
                     filter: {
-                        name: { contains: debouncedSearch },
+                        name: { contains: debouncedSearch }
                     },
-                    take: 100,
-                },
+                    take: 100
+                }
             });
         },
-        enabled: debouncedSearch.length >= 2 && !expandedFacetId,
+        enabled: debouncedSearch.length >= 2 && !expandedFacetId
     });
 
     // Query for facets based on search
@@ -125,13 +118,13 @@ export function FacetValueSelector({
             return api.query(getFacetListDocument, {
                 options: {
                     filter: {
-                        name: { contains: debouncedSearch },
+                        name: { contains: debouncedSearch }
                     },
-                    take: 100,
-                },
+                    take: 100
+                }
             });
         },
-        enabled: debouncedSearch.length >= 2 && !expandedFacetId,
+        enabled: debouncedSearch.length >= 2 && !expandedFacetId
     });
 
     // Query for paginated values of a specific facet when expanded
@@ -140,7 +133,7 @@ export function FacetValueSelector({
         isLoading: isLoadingExpandedFacet,
         fetchNextPage,
         hasNextPage,
-        isFetchingNextPage,
+        isFetchingNextPage
     } = useInfiniteQuery({
         queryKey: ['facetValues', expandedFacetId, 'infinite'],
         queryFn: async ({ pageParam = 0 }) => {
@@ -151,7 +144,7 @@ export function FacetValueSelector({
                     sort: { code: 'ASC' },
                     skip: pageParam * pageSize,
                     take: pageSize,
-                },
+                }
             });
             return response.facetValues;
         },
@@ -170,23 +163,22 @@ export function FacetValueSelector({
     const expandedFacetName = expandedFacetValues[0]?.facet.name;
 
     // Group facet values by facet
-    const facetGroups = facetValues.reduce<Record<string, FacetValue[]>>(
-        (groups: Record<string, FacetValue[]>, facetValue: FacetValue) => {
-            const facetId = facetValue.facet.id;
-            if (!groups[facetId]) {
-                groups[facetId] = [];
-            }
-            groups[facetId].push(facetValue);
-            return groups;
-        },
-        {},
-    );
+    const facetGroups = facetValues.reduce<Record<string, FacetValue[]>>((groups: Record<string, FacetValue[]>, facetValue: FacetValue) => {
+        const facetId = facetValue.facet.id;
+        if (!groups[facetId]) {
+            groups[facetId] = [];
+        }
+        groups[facetId].push(facetValue);
+        return groups;
+    }, {});
 
     const isLoading = isLoadingFacetValues || isLoadingFacets || isLoadingExpandedFacet;
 
     const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
         const target = e.currentTarget;
-        const scrolledToBottom = Math.abs(target.scrollHeight - target.clientHeight - target.scrollTop) < 1;
+        const scrolledToBottom = Math.abs(
+            target.scrollHeight - target.clientHeight - target.scrollTop
+        ) < 1;
 
         if (scrolledToBottom && hasNextPage && !isFetchingNextPage) {
             fetchNextPage();
@@ -196,23 +188,32 @@ export function FacetValueSelector({
     return (
         <Popover open={open} onOpenChange={setOpen}>
             <PopoverTrigger asChild>
-                <Button variant="outline" size="sm" type="button" disabled={disabled} className="gap-2">
+                <Button 
+                    variant="outline" 
+                    size="sm" 
+                    type="button"
+                    disabled={disabled}
+                    className="gap-2"
+                >
                     <Plus className="h-4 w-4" />
                     <Trans>Add facet values</Trans>
                 </Button>
             </PopoverTrigger>
             <PopoverContent className="p-0 w-[400px]" align="start">
                 <Command shouldFilter={false}>
-                    <CommandInput
-                        placeholder={placeholder}
+                    <CommandInput 
+                        placeholder={placeholder} 
                         value={searchTerm}
-                        onValueChange={value => {
+                        onValueChange={(value) => {
                             setSearchTerm(value);
                             setExpandedFacetId(null);
                         }}
                         disabled={disabled}
                     />
-                    <CommandList className="h-[200px] overflow-y-auto" onScroll={handleScroll}>
+                    <CommandList 
+                        className="h-[200px] overflow-y-auto" 
+                        onScroll={handleScroll}
+                    >
                         <CommandEmpty>
                             {debouncedSearch.length < 2 ? (
                                 <Trans>Type at least 2 characters to search...</Trans>
@@ -222,7 +223,7 @@ export function FacetValueSelector({
                                 <Trans>No results found</Trans>
                             )}
                         </CommandEmpty>
-
+                        
                         {expandedFacetId ? (
                             <>
                                 <CommandGroup>
@@ -234,7 +235,7 @@ export function FacetValueSelector({
                                     </CommandItem>
                                 </CommandGroup>
                                 <CommandGroup heading={expandedFacetName}>
-                                    {expandedFacetValues.map(facetValue => (
+                                    {expandedFacetValues.map((facetValue) => (
                                         <CommandItem
                                             key={facetValue.id}
                                             value={facetValue.id}
@@ -264,7 +265,7 @@ export function FacetValueSelector({
                             <>
                                 {facets.length > 0 && (
                                     <CommandGroup heading={<Trans>Facets</Trans>}>
-                                        {facets.map(facet => (
+                                        {facets.map((facet) => (
                                             <CommandItem
                                                 key={facet.id}
                                                 value={`facet-${facet.id}`}
@@ -277,26 +278,24 @@ export function FacetValueSelector({
                                         ))}
                                     </CommandGroup>
                                 )}
-
-                                {Object.entries(facetGroups).map(
-                                    ([facetId, values]: [string, FacetValue[]]) => (
-                                        <CommandGroup key={facetId} heading={values[0]?.facet.name}>
-                                            {values.map((facetValue: FacetValue) => (
-                                                <CommandItem
-                                                    key={facetValue.id}
-                                                    value={facetValue.id}
-                                                    onSelect={() => {
-                                                        onValueSelect(facetValue);
-                                                        setSearchTerm('');
-                                                        setOpen(false);
-                                                    }}
-                                                >
-                                                    {facetValue.name}
-                                                </CommandItem>
-                                            ))}
-                                        </CommandGroup>
-                                    ),
-                                )}
+                                
+                                {Object.entries(facetGroups).map(([facetId, values]: [string, FacetValue[]]) => (
+                                    <CommandGroup key={facetId} heading={values[0]?.facet.name}>
+                                        {values.map((facetValue: FacetValue) => (
+                                            <CommandItem
+                                                key={facetValue.id}
+                                                value={facetValue.id}
+                                                onSelect={() => {
+                                                    onValueSelect(facetValue);
+                                                    setSearchTerm('');
+                                                    setOpen(false);
+                                                }}
+                                            >
+                                                {facetValue.name}
+                                            </CommandItem>
+                                        ))}
+                                    </CommandGroup>
+                                ))}
                             </>
                         )}
                     </CommandList>

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

@@ -1,60 +1,37 @@
-import { OverriddenFormComponent } from '@/vdb/framework/form-engine/overridden-form-component.js';
-import { LocationWrapper } from '@/vdb/framework/layout-engine/location-wrapper.js';
-import { FieldPath, FieldValues } from 'react-hook-form';
-import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form.js';
+import {
+    FormControl,
+    FormDescription,
+    FormItem,
+    FormLabel,
+    FormMessage,
+    FormField,
+} from '../ui/form.js';
+import { FieldValues, FieldPath } from 'react-hook-form';
 
 export type FormFieldWrapperProps<
     TFieldValues extends FieldValues = FieldValues,
-    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 > = React.ComponentProps<typeof FormField<TFieldValues, TName>> & {
     label?: React.ReactNode;
     description?: React.ReactNode;
-    /**
-     * @description
-     * Whether to render the form control.
-     * If false, the form control will not be rendered.
-     * This is useful when you want to render the form control in a custom way, e.g. for <Select/> components,
-     * where the FormControl needs to nested in the root component.
-     * @default true
-     */
-    renderFormControl?: boolean;
 };
 
 export function FormFieldWrapper<
     TFieldValues extends FieldValues = FieldValues,
-    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->({
-    control,
-    name,
-    render,
-    label,
-    description,
-    renderFormControl = true,
-}: FormFieldWrapperProps<TFieldValues, TName>) {
+    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({ control, name, render, label, description }: FormFieldWrapperProps<TFieldValues, TName>) {
     return (
-        <LocationWrapper identifier={name}>
-            <FormField
-                control={control}
-                name={name}
-                render={renderArgs => (
-                    <FormItem>
-                        {label && <FormLabel>{label}</FormLabel>}
-                        {renderFormControl ? (
-                            <FormControl>
-                                <OverriddenFormComponent field={renderArgs.field} fieldName={name}>
-                                    {render(renderArgs)}
-                                </OverriddenFormComponent>
-                            </FormControl>
-                        ) : (
-                            <OverriddenFormComponent field={renderArgs.field} fieldName={name}>
-                                {render(renderArgs)}
-                            </OverriddenFormComponent>
-                        )}
-                        {description && <FormDescription>{description}</FormDescription>}
-                        <FormMessage />
-                    </FormItem>
-                )}
-            />
-        </LocationWrapper>
+        <FormField
+            control={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/history-timeline/history-entry.tsx

@@ -1,13 +1,13 @@
-import { Button } from '@/vdb/components/ui/button.js';
+import { Button } from '@/components/ui/button.js';
 import {
     DropdownMenu,
     DropdownMenuContent,
     DropdownMenuItem,
     DropdownMenuTrigger,
-} from '@/vdb/components/ui/dropdown-menu.js';
-import { Separator } from '@/vdb/components/ui/separator.js';
-import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
-import { Trans } from '@/vdb/lib/trans.js';
+} from '@/components/ui/dropdown-menu.js';
+import { Separator } from '@/components/ui/separator.js';
+import { useLocalFormat } from '@/hooks/use-local-format.js';
+import { Trans } from '@/lib/trans.js';
 import { MoreVerticalIcon, PencilIcon, TrashIcon } from 'lucide-react';
 import { useCallback } from 'react';
 import { useHistoryTimeline } from './history-timeline.js';
@@ -33,13 +33,7 @@ interface HistoryEntryProps {
     children: React.ReactNode;
 }
 
-export function HistoryEntry({
-    entry,
-    isNoteEntry,
-    timelineIcon,
-    title,
-    children,
-}: Readonly<HistoryEntryProps>) {
+export function HistoryEntry({ entry, isNoteEntry, timelineIcon, title, children }: HistoryEntryProps) {
     const { formatDate } = useLocalFormat();
     const { editNote, deleteNote } = useHistoryTimeline();
 

package/src/lib/components/shared/history-timeline/history-note-checkbox.tsx

@@ -1,12 +1,12 @@
-import { Checkbox } from '@/vdb/components/ui/checkbox.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Checkbox } from '@/components/ui/checkbox.js';
+import { Trans } from '@/lib/trans.js';
 
 interface HistoryNoteCheckboxProps {
     value: boolean;
     onChange: (value: boolean) => void;
 }
 
-export function HistoryNoteCheckbox({ value, onChange }: Readonly<HistoryNoteCheckboxProps>) {
+export function HistoryNoteCheckbox({ value, onChange }: HistoryNoteCheckboxProps) {
     return (
         <div className="flex items-center space-x-2">
             <Checkbox

package/src/lib/components/shared/history-timeline/history-note-editor.tsx

@@ -1,4 +1,4 @@
-import { Button } from '@/vdb/components/ui/button.js';
+import { Button } from '@/components/ui/button.js';
 import {
     Dialog,
     DialogContent,
@@ -6,9 +6,9 @@ import {
     DialogFooter,
     DialogHeader,
     DialogTitle,
-} from '@/vdb/components/ui/dialog.js';
-import { Textarea } from '@/vdb/components/ui/textarea.js';
-import { Trans } from '@/vdb/lib/trans.js';
+} from '@/components/ui/dialog.js';
+import { Textarea } from '@/components/ui/textarea.js';
+import { Trans } from '@/lib/trans.js';
 import { useState } from 'react';
 import { HistoryNoteCheckbox } from './history-note-checkbox.js';
 

package/src/lib/components/shared/history-timeline/history-note-input.tsx

@@ -1,5 +1,5 @@
-import { Button } from '@/vdb/components/ui/button.js';
-import { Textarea } from '@/vdb/components/ui/textarea.js';
+import { Button } from '@/components/ui/button.js';
+import { Textarea } from '@/components/ui/textarea.js';
 import { useState } from 'react';
 import { HistoryNoteCheckbox } from './history-note-checkbox.js';
 
@@ -7,7 +7,7 @@ interface HistoryNoteInputProps {
     onAddNote: (note: string, isPrivate: boolean) => void;
 }
 
-export function HistoryNoteInput({ onAddNote }: Readonly<HistoryNoteInputProps>) {
+export function HistoryNoteInput({ onAddNote }: HistoryNoteInputProps) {
     const [note, setNote] = useState('');
     const [noteIsPrivate, setNoteIsPrivate] = useState(true);
 

package/src/lib/components/shared/history-timeline/history-timeline.tsx

@@ -1,5 +1,5 @@
-import { ScrollArea } from '@/vdb/components/ui/scroll-area.js';
-import { createContext, useContext, useState } from 'react';
+import { ScrollArea } from '@/components/ui/scroll-area.js';
+import { useState, createContext, useContext } from 'react';
 import { HistoryNoteEditor } from './history-note-editor.js';
 
 interface HistoryTimelineProps {
@@ -13,10 +13,7 @@ interface HistoryTimelineProps {
 const HistoryTimelineContext = createContext<{
     editNote: (noteId: string, note: string, isPrivate: boolean) => void;
     deleteNote: (noteId: string) => void;
-}>({
-    editNote: () => {},
-    deleteNote: () => {},
-});
+}>({ editNote: () => {}, deleteNote: () => {} });
 
 type NoteEditorNote = { noteId: string; note: string; isPrivate: boolean };
 
@@ -24,29 +21,25 @@ export function useHistoryTimeline() {
     return useContext(HistoryTimelineContext);
 }
 
-export function HistoryTimeline({ children, onEditNote, onDeleteNote }: Readonly<HistoryTimelineProps>) {
+export function HistoryTimeline({ children, onEditNote, onDeleteNote }: HistoryTimelineProps) {
     const [noteEditorOpen, setNoteEditorOpen] = useState(false);
-    const [noteEditorNote, setNoteEditorNote] = useState<NoteEditorNote>({
-        noteId: '',
-        note: '',
-        isPrivate: true,
-    });
+    const [noteEditorNote, setNoteEditorNote] = useState<NoteEditorNote>({ noteId: '', note: '', isPrivate: true });
 
     const editNote = (noteId: string, note: string, isPrivate: boolean) => {
         setNoteEditorNote({ noteId, note, isPrivate });
         setNoteEditorOpen(true);
-    };
+    }
 
     const deleteNote = (noteId: string) => {
         setNoteEditorNote({ noteId, note: '', isPrivate: true });
-    };
+    }
 
     return (
         <HistoryTimelineContext.Provider value={{ editNote, deleteNote }}>
             <ScrollArea className=" pr-4">
                 <div className="relative">
                     <div className="absolute left-5 top-0 bottom-[44px] w-0.5 bg-gray-200" />
-                    {children}
+                {children}
                 </div>
             </ScrollArea>
             <HistoryNoteEditor

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

@@ -1,9 +1,9 @@
-import { api } from '@/vdb/graphql/api.js';
-import { graphql } from '@/vdb/graphql/graphql.js';
-import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
-import { useLingui } from '@/vdb/lib/trans.js';
+import { api } from '@/graphql/api.js';
+import { graphql } from '@/graphql/graphql.js';
 import { useQuery } from '@tanstack/react-query';
+import { useLocalFormat } from '@/hooks/use-local-format.js';
 import { MultiSelect } from './multi-select.js';
+import { useLingui } from '@/lib/trans.js';
 
 const availableGlobalLanguages = graphql(`
     query AvailableGlobalLanguages {
@@ -32,7 +32,7 @@ export function LanguageSelector<T extends boolean>(props: LanguageSelectorProps
 
     const items = (availableLanguageCodes ?? data?.globalSettings.availableLanguages ?? []).map(language => ({
         value: language,
-        label: formatLanguageName(language),
+        label: formatLanguageName(language)
     }));
 
     return (