@firecms/collection_editor 3.1.0 → 3.2.0-canary.44dc65b

package/src/ui/collection_editor/AICollectionGeneratorPopover.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { EntityCollection, useNavigationController, useSnackbarController, AIIcon } from "@firecms/core";
+import { EntityCollection, useNavigationController, useSnackbarController, AIIcon, useTranslation } from "@firecms/core";
 import {
     Button,
     CircularProgress,
@@ -69,6 +69,7 @@ export function AICollectionGeneratorPopover({
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState<string | null>(null);
 
+    const { t } = useTranslation();
     const navigation = useNavigationController();
     const snackbarController = useSnackbarController();
 
@@ -155,13 +156,13 @@ export function AICollectionGeneratorPopover({
                 : <AIIcon size="small" />
             }
         >
-            AI Assist
+            {t("ai_assist")}
         </Button>
     ) : (
         <IconButton
             size={size}
             disabled={loading}
-            aria-label="AI Assist"
+            aria-label={t("ai_assist")}
         >
             {loading
                 ? <CircularProgress size="smallest" />
@@ -185,14 +186,14 @@ export function AICollectionGeneratorPopover({
                 <div className="flex items-center gap-2">
                     <AIIcon size="small" />
                     <Typography variant="subtitle2">
-                        {existingCollection ? "Modify Collection with AI" : "Generate Collection with AI"}
+                        {existingCollection ? t("modify_collection_with_ai") : t("generate_collection_with_ai")}
                     </Typography>
                 </div>
 
                 <Typography variant="caption" color="secondary">
                     {existingCollection
-                        ? "Describe the changes you want to make to this collection."
-                        : "Describe the collection you want to create."
+                        ? t("describe_changes_to_make")
+                        : t("describe_collection_to_create")
                     }
                 </Typography>
 
@@ -205,8 +206,8 @@ export function AICollectionGeneratorPopover({
                     onChange={(e) => setPrompt(e.target.value)}
                     onKeyDown={handleKeyDown}
                     placeholder={existingCollection
-                        ? "e.g., Add a thumbnail image field with storage, make price required..."
-                        : "e.g., Create a products collection with name, price, description, and category..."
+                        ? t("ai_placeholder_modify")
+                        : t("ai_placeholder_create")
                     }
                     disabled={loading}
                 />
@@ -224,7 +225,7 @@ export function AICollectionGeneratorPopover({
                         onClick={() => setMenuOpen(false)}
                         disabled={loading}
                     >
-                        Cancel
+                        {t("cancel")}
                     </Button>
                     <Button
                         variant="filled"
@@ -233,7 +234,7 @@ export function AICollectionGeneratorPopover({
                         disabled={!prompt.trim() || loading}
                         startIcon={loading ? <CircularProgress size="smallest" /> : undefined}
                     >
-                        {loading ? "Generating..." : "Generate"}
+                        {loading ? t("generating") : t("generate_with_ai")}
                     </Button>
                 </div>
             </div>

package/src/ui/collection_editor/CollectionDetailsForm.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo, useState } from "react";
-import { EntityCollection, FieldCaption, getFieldConfig, IconForView, Property, PropertyConfigBadge, resolveCollection, SearchIconsView, singular, toSnakeCase, unslugify, useAuthController, useCustomizationController } from "@firecms/core";
+import { EntityCollection, FieldCaption, getFieldConfig, IconForView, Property, PropertyConfigBadge, resolveCollection, SearchIconsView, singular, toSnakeCase, unslugify, useAuthController, useCustomizationController, useTranslation } from "@firecms/core";
 import {
     BooleanSwitchWithLabel,
     Chip,
@@ -61,6 +61,8 @@ export function CollectionDetailsForm({
     const [iconDialogOpen, setIconDialogOpen] = useState(false);
     const [orderPropertyDialogOpen, setOrderPropertyDialogOpen] = useState(false);
 
+    const { t } = useTranslation();
+
     const authController = useAuthController();
     const customizationController = useCustomizationController();
 
@@ -137,12 +139,12 @@ export function CollectionDetailsForm({
                     <div
                         className="flex flex-row gap-2 py-2 pt-3 items-center">
                         <Typography variant={!isNewCollection ? "h5" : "h4"} className={"flex-grow"}>
-                            {isNewCollection ? "New collection" : `${values?.name} collection`}
+                            {isNewCollection ? t("new_collection") : t("collection_with_name", { name: values?.name || "" })}
                         </Typography>
                         <DefaultDatabaseField databaseId={values.databaseId}
                             onDatabaseIdUpdate={updateDatabaseId} />
 
-                        <Tooltip title={"Change icon"}
+                        <Tooltip title={t("change_icon")}
                             asChild={true}>
                             <IconButton
                                 shape={"square"}
@@ -154,7 +156,7 @@ export function CollectionDetailsForm({
 
                     {parentCollection && <Chip colorScheme={"tealDarker"}>
                         <Typography variant={"caption"}>
-                            This is a subcollection of <b>{parentCollection.name}</b>
+                            {t("is_subcollection_of")} <b>{parentCollection.name}</b>
                         </Typography>
                     </Chip>}
 
@@ -165,26 +167,26 @@ export function CollectionDetailsForm({
                         <TextField
                             value={values.name ?? ""}
                             onChange={(e: any) => updateName(e.target.value)}
-                            label={"Name"}
+                            label={t("name")}
                             autoFocus={true}
                             required
                             error={showErrors && Boolean(errors.name)} />
                         <FieldCaption error={touched.name && Boolean(errors.name)}>
-                            {touched.name && Boolean(errors.name) ? errors.name : "Name of this collection, usually a plural name (e.g. Products)"}
+                            {touched.name && Boolean(errors.name) ? errors.name : t("collection_name_description")}
                         </FieldCaption>
                     </div>
 
                     <div className={cls("col-span-12 ")}>
                         <Field name={"path"}
                             as={DebouncedTextField}
-                            label={"Path"}
+                            label={t("path")}
                             required
                             error={showErrors && Boolean(errors.path)} />
 
                         <FieldCaption error={touched.path && Boolean(errors.path)}>
                             {touched.path && Boolean(errors.path)
                                 ? errors.path
-                                : isSubcollection ? "Relative path to the parent (no need to include the parent path)" : "Path that this collection is stored in, in the database"}
+                                : isSubcollection ? t("relative_path_to_parent") : t("path_in_database")}
                         </FieldCaption>
 
                     </div>
@@ -247,7 +249,7 @@ export function CollectionDetailsForm({
                                     <Select
                                         key={`order-select-${numberProperties.length}`}
                                         name="orderProperty"
-                                        label="Order Property"
+                                        label={t("order_property")}
                                         size={"large"}
                                         fullWidth={true}
                                         position={"item-aligned"}
@@ -259,10 +261,10 @@ export function CollectionDetailsForm({
                                         }}
                                         renderValue={(value) => {
                                             if (orderPropertyMissing) {
-                                                return <span className="text-red-500">{value} (not found)</span>;
+                                                return <span className="text-red-500">{value} ({t("not_found_suffix")})</span>;
                                             }
                                             const prop = numberProperties.find(p => p.key === value);
-                                            if (!prop) return "Select a property";
+                                            if (!prop) return t("select_a_property");
                                             const fieldConfig = getFieldConfig(prop.property, customizationController.propertyConfigs);
                                             return (
                                                 <div className="flex items-center gap-2">
@@ -292,7 +294,7 @@ export function CollectionDetailsForm({
                                                         <div>
                                                             <div>{prop.label}</div>
                                                             <Typography variant="caption" color="secondary">
-                                                                {fieldConfig?.name || "Number"}
+                                                                {fieldConfig?.name || t("number")}
                                                             </Typography>
                                                         </div>
                                                     </div>
@@ -302,10 +304,10 @@ export function CollectionDetailsForm({
                                     </Select>
                                     <FieldCaption error={orderPropertyMissing}>
                                         {orderPropertyMissing
-                                            ? `Property "${values.orderProperty}" does not exist or is not a number property. Please select a valid property or clear the selection.`
+                                            ? t("order_property_not_found", { property: values.orderProperty ?? "" })
                                             : numberProperties.length === 0
-                                                ? "No number properties found. Add a number property to enable ordering."
-                                                : "Select a number property to persist the order of items"
+                                                ? t("no_number_properties")
+                                                : t("order_property_description")
                                         }
                                     </FieldCaption>
                                 </>
@@ -323,7 +325,7 @@ export function CollectionDetailsForm({
                                 : "__order";
                             const dialogPropertyName = orderPropertyMissing && values.orderProperty
                                 ? unslugify(values.orderProperty)
-                                : "Order";
+                                : t("order_label");
 
                             if (!showCreateButton) return null;
 
@@ -334,7 +336,7 @@ export function CollectionDetailsForm({
                                         className="ml-3.5 text-sm text-primary hover:text-primary-dark mt-2"
                                         onClick={() => setOrderPropertyDialogOpen(true)}
                                     >
-                                        + Create "{dialogPropertyKey}" property
+                                        {t("create_property", { property: dialogPropertyKey })}
                                     </button>
                                     <PropertyFormDialog
                                         open={orderPropertyDialogOpen}
@@ -376,16 +378,14 @@ export function CollectionDetailsForm({
                             position={"start"}
                             size={"large"}
                             allowIndeterminate={true}
-                            label={<span className="flex items-center gap-2"><HistoryIcon size={"smallest"} />{values.history === null || values.history === undefined ? "Document history revisions enabled if enabled globally" : (
-                                values.history ? "Document history revisions ENABLED" : "Document history revisions NOT enabled"
+                            label={<span className="flex items-center gap-2"><HistoryIcon size={"smallest"} />{values.history === null || values.history === undefined ? t("doc_history_global") : (
+                                values.history ? t("doc_history_enabled") : t("doc_history_not_enabled")
                             )}</span>}
                             onValueChange={(v) => setFieldValue("history", v)}
                             value={values.history === undefined ? null : values.history}
                         />
                         <FieldCaption>
-                            When enabled, each document in this collection will have a history of changes.
-                            This is useful for auditing purposes. The data is stored in a subcollection of the document
-                            in your database, called <b>__history</b>.
+                            {t("doc_history_description")}
                         </FieldCaption>
                     </div>
 
@@ -424,7 +424,9 @@ function DefaultDatabaseField({
     onDatabaseIdUpdate
 }: { databaseId?: string, onDatabaseIdUpdate: (databaseId: string) => void }) {
 
-    return <Tooltip title={"Database ID"}
+    const { t } = useTranslation();
+
+    return <Tooltip title={t("database_id")}
         side={"top"}
         align={"start"}>
         <TextField size={"small"}
@@ -432,6 +434,6 @@ function DefaultDatabaseField({
             inputClassName={"text-end"}
             value={databaseId ?? ""}
             onChange={(e: any) => onDatabaseIdUpdate(e.target.value)}
-            placeholder={"(default)"}></TextField>
+            placeholder={t("default_text")}></TextField>
     </Tooltip>
 }

package/src/ui/collection_editor/CollectionEditorDialog.tsx

@@ -22,7 +22,8 @@ import {
     useCustomizationController,
     useNavigationController,
     User,
-    useSnackbarController
+    useSnackbarController,
+    useTranslation,
 } from "@firecms/core";
 import {
     ArrowBackIcon,
@@ -113,6 +114,8 @@ export interface CollectionEditorDialogProps {
 }
 
 export function CollectionEditorDialog(props: CollectionEditorDialogProps) {
+    const { t } = useTranslation();
+
 
     const open = props.open;
 
@@ -143,7 +146,7 @@ export function CollectionEditorDialog(props: CollectionEditorDialogProps) {
             maxWidth={"7xl"}
             onOpenChange={(open) => !open ? handleCancel() : undefined}
         >
-            <DialogTitle hidden>Collection editor</DialogTitle>
+            <DialogTitle hidden>{t("collection_editor")}</DialogTitle>
             <AIModifiedPathsProvider>
                 {open && <CollectionEditor {...props}
                     handleCancel={handleCancel}
@@ -153,7 +156,7 @@ export function CollectionEditorDialog(props: CollectionEditorDialogProps) {
                     open={unsavedChangesDialogOpen}
                     handleOk={() => props.handleClose(undefined)}
                     handleCancel={() => setUnsavedChangesDialogOpen(false)}
-                    body={"There are unsaved changes in this collection"} />
+                    body={t("unsaved_changes_in_collection")} />
             </AIModifiedPathsProvider>
         </Dialog>
     );
@@ -306,10 +309,11 @@ function CollectionEditorInternal<M extends Record<string, any>>({
     collection: PersistedCollection<M> | undefined,
     setCollection: (collection: PersistedCollection<M>) => void,
     propertyConfigs: Record<string, PropertyConfig<any>>,
-    groups: string[],
+    groups: (string | null)[],
 }
 ) {
 
+    const { t } = useTranslation();
     const importConfig = useImportConfig();
     const navigation = useNavigationController();
     const snackbarController = useSnackbarController();
@@ -342,7 +346,7 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                 console.error(e);
                 snackbarController.open({
                     type: "error",
-                    message: "Error persisting collection: " + (e.message ?? "Details in the console")
+                    message: t("error_persisting_collection", { error: e.message ?? t("details_in_console") })
                 });
                 return false;
             });
@@ -423,7 +427,7 @@ function CollectionEditorInternal<M extends Record<string, any>>({
             console.error(e);
             snackbarController.open({
                 type: "error",
-                message: "Error inferring collection: " + (e.message ?? "Details in the console")
+                message: t("error_inferring_collection", { error: e.message ?? t("details_in_console") })
             });
             return newCollection;
         }
@@ -486,7 +490,7 @@ function CollectionEditorInternal<M extends Record<string, any>>({
         } catch (e: any) {
             snackbarController.open({
                 type: "error",
-                message: "Error persisting collection: " + (e.message ?? "Details in the console")
+                message: t("error_persisting_collection", { error: e.message ?? t("details_in_console") })
             });
             console.error(e);
             formexController.resetForm({ values: newCollectionState });
@@ -510,11 +514,11 @@ function CollectionEditorInternal<M extends Record<string, any>>({
             errors = { ...errors, ...propertyErrorsRef.current };
         }
         if (currentView === "general") {
-            const pathError = validatePath(col.path, isNewCollection, existingPaths, col.id);
+            const pathError = validatePath(t, col.path, isNewCollection, existingPaths, col.id);
             if (pathError) {
                 errors.path = pathError;
             }
-            const idError = validateId(col.id, isNewCollection, existingPaths, existingIds);
+            const idError = validateId(t, col.id, isNewCollection, existingPaths, existingIds);
             if (idError) {
                 errors.id = idError;
             }
@@ -539,7 +543,7 @@ function CollectionEditorInternal<M extends Record<string, any>>({
 
     const path = values.path;
     const updatedFullPath = fullPath?.includes("/") ? fullPath?.split("/").slice(0, -1).join("/") + "/" + path : path; // TODO: this path is wrong
-    const pathError = validatePath(path, isNewCollection, existingPaths, values.id);
+    const pathError = validatePath(t, path, isNewCollection, existingPaths, values.id);
 
     const parentPaths = !pathError && parentCollectionIds ? navigation.convertIdsToPaths(parentCollectionIds) : undefined;
     const resolvedPath = !pathError ? navigation.resolveIdsFrom(updatedFullPath) : undefined;
@@ -601,7 +605,7 @@ function CollectionEditorInternal<M extends Record<string, any>>({
             setDeleteRequested(false);
             handleCancel();
             snackbarController.open({
-                message: "Collection deleted",
+                message: t("collection_deleted"),
                 type: "success"
             });
         });
@@ -641,16 +645,16 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                     <Tabs value={currentView}
                         onValueChange={(v) => setCurrentView(v as EditorView)}>
                         <Tab value={"general"}>
-                            General
+                            {t("tab_general")}
                         </Tab>
                         <Tab value={"display"}>
-                            Display
+                            {t("tab_display")}
                         </Tab>
                         <Tab value={"properties"}>
-                            Properties
+                            {t("tab_properties")}
                         </Tab>
                         <Tab value={"extend"}>
-                            Extend
+                            {t("tab_extend")}
                         </Tab>
                     </Tabs>
                 </div>}
@@ -695,7 +699,7 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                             onImportSuccess={async (importedCollection) => {
                                 snackbarController.open({
                                     type: "info",
-                                    message: "Data imported successfully"
+                                    message: t("data_imported_successfully_msg")
                                 });
                                 await saveCollection(values);
                                 handleClose(importedCollection);
@@ -763,7 +767,7 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                                     importConfig.setInUse(false);
                                     return setCurrentView("welcome");
                                 }}>
-                                Back
+                                {t("back")}
                             </Button>}
 
                         {isNewCollection && includeTemplates && currentView === "import_data_preview" &&
@@ -772,14 +776,14 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                                 onClick={() => {
                                     setCurrentView("import_data_mapping");
                                 }}>
-                                Back
+                                {t("back")}
                             </Button>}
 
                         {isNewCollection && includeTemplates && currentView === "general" &&
                             <Button variant={"text"}
                                 type="button"
                                 onClick={() => setCurrentView("welcome")}>
-                                Back
+                                {t("back")}
                             </Button>}
 
                         {isNewCollection && currentView === "properties" && <Button variant={"text"}
@@ -787,7 +791,7 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                             color={"neutral"}
                             onClick={() => setCurrentView("general")}>
                             <ArrowBackIcon />
-                            Back
+                            {t("back")}
                         </Button>}
 
                         <Button variant={"text"}
@@ -795,12 +799,12 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                             onClick={() => {
                                 handleCancel();
                             }}>
-                            Cancel
+                            {t("cancel")}
                         </Button>
 
                         {currentView === "welcome" &&
                             <Button variant={"text"} onClick={() => onWelcomeScreenContinue()}>
-                                Continue from scratch
+                                {t("continue_from_scratch")}
                             </Button>}
 
                         {isNewCollection && currentView === "import_data_mapping" &&
@@ -809,7 +813,7 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                                 color="primary"
                                 onClick={onImportMappingComplete}
                             >
-                                Next
+                                {t("next")}
                             </Button>}
 
                         {isNewCollection && currentView === "import_data_preview" &&
@@ -820,7 +824,7 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                                     setNextMode();
                                 }}
                             >
-                                Next
+                                {t("next")}
                             </Button>}
 
                         {isNewCollection && (currentView === "general" || currentView === "properties") &&
@@ -834,8 +838,8 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                                     ? <CheckIcon />
                                     : undefined}
                             >
-                                {currentView === "general" && "Next"}
-                                {currentView === "properties" && "Create collection"}
+                                {currentView === "general" && t("next")}
+                                {currentView === "properties" && t("create_collection")}
                             </LoadingButton>}
 
                         {!isNewCollection && <LoadingButton
@@ -844,7 +848,7 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                             type="submit"
                             loading={isSubmitting}
                         >
-                            Update collection
+                            {t("update_collection")}
                         </LoadingButton>}
 
                     </DialogActions>
@@ -857,10 +861,8 @@ function CollectionEditorInternal<M extends Record<string, any>>({
             open={deleteRequested}
             onAccept={deleteCollection}
             onCancel={() => setDeleteRequested(false)}
-            title={<>Delete the stored config?</>}
-            body={<> This will <b>not
-                delete any data</b>, only
-                the stored config, and reset to the code state.</>} />
+            title={<>{t("delete_stored_config")}</>}
+            body={<>{t("delete_stored_config_body")}</>} />
 
     </DialogContent>
 
@@ -915,30 +917,32 @@ function applyPropertiesConfig(property: PropertyOrBuilder, propertyConfigs: Rec
 
 }
 
-const validatePath = (value: string, isNewCollection: boolean, existingPaths: string[], idValue?: string) => {
+type TranslateFn = (key: string, params?: Record<string, string>) => string;
+
+const validatePath = (t: TranslateFn, value: string, isNewCollection: boolean, existingPaths: string[], idValue?: string) => {
     let error;
     if (!value) {
-        error = "You must specify a path in the database for this collection";
+        error = t("must_specify_path");
     }
     // if (isNewCollection && existingIds?.includes(value.trim().toLowerCase()))
     //     error = "There is already a collection which uses this path as an id";
     if (isNewCollection && existingPaths?.includes(value.trim().toLowerCase()) && !idValue)
-        error = "There is already a collection with the specified path. If you want to have multiple collections referring to the same database path, make sure the have different ids";
+        error = t("collection_path_already_exists");
 
     const subpaths = removeInitialAndTrailingSlashes(value).split("/");
     if (subpaths.length % 2 === 0) {
-        error = `Collection paths must have an odd number of segments: ${value}`;
+        error = t("collection_path_odd_segments", { path: value });
     }
     return error;
 };
 
-const validateId = (value: string, isNewCollection: boolean, existingPaths: string[], existingIds: string[]) => {
+const validateId = (t: TranslateFn, value: string, isNewCollection: boolean, existingPaths: string[], existingIds: string[]) => {
     if (!value) return undefined;
     let error;
     if (isNewCollection && existingPaths?.includes(value.trim().toLowerCase()))
-        error = "There is already a collection that uses this value as a path";
+        error = t("collection_uses_path_as_id");
     if (isNewCollection && existingIds?.includes(value.trim().toLowerCase()))
-        error = "There is already a collection which uses this id";
+        error = t("collection_uses_this_id");
     // if (error) {
     //     setAdvancedPanelExpanded(true);
     // }

package/src/ui/collection_editor/CollectionEditorWelcomeView.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { AIIcon, EntityCollection, prettifyIdentifier, } from "@firecms/core";
+import { AIIcon, EntityCollection, prettifyIdentifier, useTranslation } from "@firecms/core";
 import { Button, Card, Chip, cls, CodeIcon, Container, Icon, Tooltip, Typography, } from "@firecms/ui";
 import { CollectionJsonImportDialog } from "./CollectionJsonImportDialog";
 
@@ -30,6 +30,7 @@ export function CollectionEditorWelcomeView({
 }) {
 
     const { pathSuggestions } = useCollectionEditorController();
+    const { t } = useTranslation();
 
     const filteredSuggestions = (pathSuggestions ?? []).filter(s => !(existingCollectionPaths ?? []).find(c => c.trim().toLowerCase() === s.trim().toLowerCase()));
 
@@ -49,13 +50,13 @@ export function CollectionEditorWelcomeView({
                 <div
                     className="flex flex-row py-2 pt-3 items-center">
                     <Typography variant={"h4"} className={"flex-grow"}>
-                        New collection
+                        {t("new_collection")}
                     </Typography>
                 </div>
 
                 {parentCollection && <Chip colorScheme={"tealDarker"}>
                     <Typography variant={"caption"}>
-                        This is a subcollection of <b>{parentCollection.name}</b>
+                        {t("this_is_subcollection_of")} <b>{parentCollection.name}</b>
                     </Typography>
                 </Chip>}
 
@@ -63,7 +64,7 @@ export function CollectionEditorWelcomeView({
 
                     <Typography variant={"caption"}
                         color={"secondary"}>
-                        ● Use one of the existing paths in your database:
+                        ● {t("use_existing_paths_database")}
                     </Typography>
                     <div className={"flex flex-wrap gap-x-2 gap-y-1 items-center my-2 min-h-7"}>
 
@@ -92,7 +93,7 @@ export function CollectionEditorWelcomeView({
                             <Typography variant={"caption"}
                                 color={"secondary"}
                                 className={"mb-2"}>
-                                ● Describe your collection to AI:
+                                ● {t("describe_collection_ai")}
                             </Typography>
 
                             <AICollectionGeneratorPopover
@@ -107,7 +108,7 @@ export function CollectionEditorWelcomeView({
                                         variant="outlined"
                                         startIcon={<AIIcon size="small" />}
                                     >
-                                        Generate with AI
+                                        {t("generate_with_ai")}
                                     </Button>
                                 }
                             />
@@ -118,7 +119,7 @@ export function CollectionEditorWelcomeView({
                         <Typography variant={"caption"}
                             color={"secondary"}
                             className={"mb-2"}>
-                            ● Create from JSON configuration:
+                            ● {t("create_from_json_config")}
                         </Typography>
 
                         <Button
@@ -126,7 +127,7 @@ export function CollectionEditorWelcomeView({
                             onClick={() => setJsonImportOpen(true)}
                             startIcon={<CodeIcon size="small" />}
                         >
-                            Paste JSON Configuration
+                            {t("paste_json_config")}
                         </Button>
 
                         <CollectionJsonImportDialog
@@ -149,7 +150,7 @@ export function CollectionEditorWelcomeView({
                     <Typography variant={"caption"}
                         color={"secondary"}
                         className={"mb-2"}>
-                        ● Create a collection from a file (csv, json, xls, xslx...)
+                        ● {t("create_collection_from_file_formats")}
                     </Typography>
 
                     <ImportFileUpload onDataAdded={(data, propertiesOrder) => onContinue(data, propertiesOrder)} />
@@ -159,34 +160,34 @@ export function CollectionEditorWelcomeView({
                 <div className={"my-2"}>
                     <Typography variant={"caption"}
                         color={"secondary"}>
-                        ● Select a template:
+                        ● {t("select_template")}
                     </Typography>
 
                     <div className={"flex gap-2"}>
-                        <TemplateButton title={"Products"}
-                            subtitle={"A collection of products with images, prices and stock"}
+                        <TemplateButton title={t("products")}
+                            subtitle={t("collection_products_subtitle")}
                             icon={<Icon size={"small"}
                                 iconKey={productsCollectionTemplate.icon! as string} />}
                             onClick={() => {
                                 setValues(productsCollectionTemplate);
                                 onContinue();
                             }} />
-                        <TemplateButton title={"Users"}
-                            subtitle={"A collection of users with emails, names and roles"}
+                        <TemplateButton title={t("users")}
+                            subtitle={t("collection_users_subtitle")}
                             icon={<Icon size={"small"} iconKey={usersCollectionTemplate.icon! as string} />}
                             onClick={() => {
                                 setValues(usersCollectionTemplate);
                                 onContinue();
                             }} />
-                        <TemplateButton title={"Blog posts"}
-                            subtitle={"A collection of blog posts with images, authors and complex content"}
+                        <TemplateButton title={t("blog_posts")}
+                            subtitle={t("collection_blog_posts_subtitle")}
                             icon={<Icon size={"small"} iconKey={blogCollectionTemplate.icon! as string} />}
                             onClick={() => {
                                 setValues(blogCollectionTemplate);
                                 onContinue();
                             }} />
-                        <TemplateButton title={"Pages"}
-                            subtitle={"A collection of pages with images, authors and complex content"}
+                        <TemplateButton title={t("pages")}
+                            subtitle={t("collection_pages_subtitle")}
                             icon={<Icon size={"small"} iconKey={pagesCollectionTemplate.icon! as string} />}
                             onClick={() => {
                                 setValues(pagesCollectionTemplate);