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

package/src/ui/collection_editor/properties/DateTimePropertyField.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { getIn, useFormex } from "@firecms/formex";
-import { FieldCaption, NumberProperty, StringProperty } from "@firecms/core";
+import { FieldCaption, NumberProperty, StringProperty, useTranslation } from "@firecms/core";
 import { Select, SelectItem } from "@firecms/ui";
 import { GeneralPropertyValidation } from "./validation/GeneralPropertyValidation";
 import { ValidationPanel } from "./validation/ValidationPanel";
@@ -69,6 +69,8 @@ export function DateTimePropertyField({ disabled }: {
         setFieldValue
     } = useFormex<StringProperty | NumberProperty>();
 
+    const { t } = useTranslation();
+
     const modePath = "mode";
     const modeValue: string | undefined = getIn(values, modePath);
     const modeError: string | undefined = getIn(touched, modePath) && getIn(errors, modePath);
@@ -90,21 +92,21 @@ export function DateTimePropertyField({ disabled }: {
                         error={Boolean(modeError)}
                         size={"large"}
                         onValueChange={(v) => setFieldValue(modePath, v)}
-                        label={"Mode"}
+                        label={t("mode_label")}
                         fullWidth={true}
                         renderValue={(v) => {
                             switch (v) {
                                 case "date_time":
-                                    return "Date/Time";
+                                    return t("date_time_mode");
                                 case "date":
-                                    return "Date";
+                                    return t("date_mode");
                                 default:
                                     return "";
                             }
                         }}
                         disabled={disabled}>
-                        <SelectItem value={"date_time"}> Date/Time </SelectItem>
-                        <SelectItem value={"date"}> Date </SelectItem>
+                        <SelectItem value={"date_time"}> {t("date_time_mode")} </SelectItem>
+                        <SelectItem value={"date"}> {t("date_mode")} </SelectItem>
                     </Select>
                     <FieldCaption error={Boolean(modeError)}>
                         {modeError}
@@ -120,21 +122,21 @@ export function DateTimePropertyField({ disabled }: {
                         renderValue={(v) => {
                             switch (v) {
                                 case "on_create":
-                                    return "On create";
+                                    return t("auto_on_create");
                                 case "on_update":
-                                    return "On any update";
+                                    return t("auto_on_update");
                                 default:
-                                    return "None";
+                                    return t("auto_none");
                             }
                         }}
                         error={Boolean(autoValueError)}
-                        label={"Automatic value"}>
-                        <SelectItem value={"none"}> None </SelectItem>
-                        <SelectItem value={"on_create"}> On create </SelectItem>
-                        <SelectItem value={"on_update"}> On any update </SelectItem>
+                        label={t("automatic_value")}>
+                        <SelectItem value={"none"}> {t("auto_none")} </SelectItem>
+                        <SelectItem value={"on_create"}> {t("auto_on_create")} </SelectItem>
+                        <SelectItem value={"on_update"}> {t("auto_on_update")} </SelectItem>
                     </Select>
                     <FieldCaption error={Boolean(autoValueError)}>
-                        {autoValueError ?? "Update this field automatically when creating or updating the entity"}
+                        {autoValueError ?? t("auto_value_description")}
                     </FieldCaption>
                 </div>
                 <div>
@@ -145,13 +147,13 @@ export function DateTimePropertyField({ disabled }: {
                         value={timezoneValue ?? "__local__"}
                         onValueChange={(v) => setFieldValue(timezonePath, v === "__local__" ? undefined : v)}
                         renderValue={(v) => {
-                            if (!v || v === "__local__") return "Local timezone";
+                            if (!v || v === "__local__") return t("local_timezone");
                             const tz = TIMEZONES.find(t => t.value === v);
                             return tz?.label ?? v;
                         }}
                         error={Boolean(timezoneError)}
-                        label={"Timezone"}>
-                        <SelectItem value={"__local__"}> Local timezone </SelectItem>
+                        label={t("timezone_label")}>
+                        <SelectItem value={"__local__"}> {t("local_timezone")} </SelectItem>
                         {TIMEZONES.map((tz) => (
                             <SelectItem key={tz.value} value={tz.value}>
                                 {tz.label}
@@ -159,7 +161,7 @@ export function DateTimePropertyField({ disabled }: {
                         ))}
                     </Select>
                     <FieldCaption error={Boolean(timezoneError)}>
-                        {timezoneError ?? "Timezone for displaying and inputting dates. Values are always stored in UTC."}
+                        {timezoneError ?? t("timezone_description")}
                     </FieldCaption>
                 </div>
 

package/src/ui/collection_editor/properties/EnumPropertyField.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from "react";
 import { getIn, useFormex } from "@firecms/formex";
-import { EnumValueConfig, resolveEnumValues, useSnackbarController } from "@firecms/core";
+import { EnumValueConfig, resolveEnumValues, useSnackbarController, useTranslation } from "@firecms/core";
 import { Select, SelectItem } from "@firecms/ui";
 import { EnumForm } from "../EnumForm";
 import { StringPropertyValidation } from "./validation/StringPropertyValidation";
@@ -32,6 +32,7 @@ export function EnumPropertyField({
         setFieldValue
     } = useFormex<PropertyWithId>();
 
+    const { t } = useTranslation();
     const snackbarContext = useSnackbarController();
 
     const enumValuesPath = multiselect ? "of.enumValues" : "enumValues";
@@ -55,7 +56,7 @@ export function EnumPropertyField({
                 setFieldValue("defaultValue", undefined);
                 snackbarContext.open({
                     type: "warning",
-                    message: "Default value was cleared"
+                    message: t("default_value_was_cleared")
                 })
             }
         }
@@ -74,7 +75,7 @@ export function EnumPropertyField({
                     disabled={disabled}
                     allowDataInference={allowDataInference}
                     onError={(hasError) => {
-                        setFieldError(enumValuesPath, hasError ? "This enum property is missing some values" : undefined);
+                        setFieldError(enumValuesPath, hasError ? t("enum_missing_values") : undefined);
                     }}
                     getData={getData && fullPropertyPath
                         ? () => getData()
@@ -105,7 +106,7 @@ export function EnumPropertyField({
                         setFieldValue("defaultValue", value);
                     }}
                     size={"large"}
-                    label={"Default value"}
+                    label={t("default_value")}
                     value={defaultValue ?? ""}>
                     {enumValues
                         .filter((enumValue) => Boolean(enumValue?.id))

package/src/ui/collection_editor/properties/MapPropertyField.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
-import { FieldCaption, MapProperty, Property, PropertyConfig, } from "@firecms/core";
+import { FieldCaption, MapProperty, Property, PropertyConfig,     useTranslation
+} from "@firecms/core";
 import { AddIcon, BooleanSwitchWithLabel, Button, Paper, Typography } from "@firecms/ui";
 import { PropertyFormDialog } from "../PropertyEditView";
 import { getIn, useFormex } from "@firecms/formex";
@@ -13,6 +14,7 @@ export function MapPropertyField({ disabled, getData, allowDataInference, proper
     propertyConfigs: Record<string, PropertyConfig>,
     collectionEditable: boolean;
 }) {
+    const { t } = useTranslation();
 
     const {
         values,
@@ -73,12 +75,12 @@ export function MapPropertyField({ disabled, getData, allowDataInference, proper
         <>
             <div className={"col-span-12"}>
                 <div className="flex justify-between items-end my-4">
-                    <Typography variant={"subtitle2"}>Properties in this group</Typography>
+                    <Typography variant={"subtitle2"}>{t("properties_in_this_group")}</Typography>
                     <Button
                         onClick={() => setPropertyDialogOpen(true)}
                         startIcon={<AddIcon/>}
                     >
-                        Add property to {values.name ?? "this group"}
+                        {t("add_property_to", { name: values.name ?? t("properties_in_this_group") })}
                     </Button>
                 </div>
                 <Paper className="p-2 pl-8">
@@ -97,7 +99,7 @@ export function MapPropertyField({ disabled, getData, allowDataInference, proper
                     {empty &&
                         <Typography variant={"label"}
                                     className="h-full flex items-center justify-center p-4">
-                            Add the first property to this group
+                            {t("add_first_property_to_group")}
                         </Typography>}
                 </Paper>
             </div>
@@ -106,13 +108,12 @@ export function MapPropertyField({ disabled, getData, allowDataInference, proper
                 <BooleanSwitchWithLabel
                     position={"start"}
                     size={"medium"}
-                    label="Spread children as columns"
+                    label={t("spread_children_as_columns")}
                     onValueChange={(v) => setFieldValue("spreadChildren", v)}
                     value={values.spreadChildren ?? false}
                 />
                 <FieldCaption>
-                    Set this flag to true if you want to display the children of this group as individual columns. This
-                    will only work for top level groups.
+                    {t("spread_children_description")}
                 </FieldCaption>
             </div>
 

package/src/ui/collection_editor/properties/MarkdownPropertyField.tsx

@@ -12,6 +12,7 @@ import {
     TextField,
     Typography
 } from "@firecms/ui";
+import { useTranslation } from "@firecms/core";
 
 export function MarkdownPropertyField({
     disabled,
@@ -26,6 +27,8 @@ export function MarkdownPropertyField({
         setFieldValue
     } = useFormex();
 
+    const { t } = useTranslation();
+
     const baseStoragePath = "storage";
     const baseMarkdownPath = "markdown";
 
@@ -96,7 +99,7 @@ export function MarkdownPropertyField({
                             <SettingsIcon />
                             <Typography variant={"subtitle2"}
                                 className="ml-4">
-                                Paste behavior
+                                {t("paste_behavior")}
                             </Typography>
                         </div>
                     }>
@@ -107,10 +110,10 @@ export function MarkdownPropertyField({
                             disabled={disabled}
                             value={!htmlValue}
                             onValueChange={(value) => updateMarkdownConfig("html", !value)}
-                            label={"Strip HTML on paste"}
+                            label={t("strip_html_on_paste")}
                         />
                         <Typography variant={"caption"} className={"ml-3.5 mt-1 mb-2"}>
-                            Remove HTML tags and inline styles when pasting content from external sources
+                            {t("strip_html_description")}
                         </Typography>
 
                         <BooleanSwitchWithLabel
@@ -118,10 +121,10 @@ export function MarkdownPropertyField({
                             disabled={disabled}
                             value={transformPastedTextValue}
                             onValueChange={(value) => updateMarkdownConfig("transformPastedText", value)}
-                            label={"Convert pasted text to markdown"}
+                            label={t("convert_pasted_to_markdown")}
                         />
                         <Typography variant={"caption"} className={"ml-3.5 mt-1 mb-2"}>
-                            Convert rich text (from Google Docs, Word, etc.) to clean markdown format
+                            {t("convert_pasted_description")}
                         </Typography>
                     </div>
                 </ExpandablePanel>
@@ -134,7 +137,7 @@ export function MarkdownPropertyField({
                             <CloudUploadIcon />
                             <Typography variant={"subtitle2"}
                                 className="ml-4">
-                                File upload config
+                                {t("file_upload_config")}
                             </Typography>
                         </div>
                     }>
@@ -145,7 +148,7 @@ export function MarkdownPropertyField({
                         <div className={"col-span-12"}>
                             <Field name={fileName}
                                 as={DebouncedTextField}
-                                label={"File name"}
+                                label={t("file_name_label")}
                                 size={"small"}
                                 disabled={hasFilenameCallback || disabled}
                                 value={hasFilenameCallback ? "-" : fileNameValue}
@@ -154,37 +157,33 @@ export function MarkdownPropertyField({
                         <div className={"col-span-12"}>
                             <Field name={storagePath}
                                 as={DebouncedTextField}
-                                label={"Storage path"}
+                                label={t("storage_path_label")}
                                 disabled={hasStoragePathCallback || disabled}
                                 size={"small"}
                                 value={hasStoragePathCallback ? "-" : storagePathValue}
                             />
                             <Typography variant={"caption"} className={"ml-3.5 mt-1 mb-2"}>
-                                <p>You can use the following placeholders in
-                                    the file name
-                                    and storage path values:</p>
+                                <p>{t("storage_placeholders_description")}</p>
                                 <ul>
-                                    <li>{"{file} - Full name of the uploaded file"}</li>
-                                    <li>{"{file.name} - Name of the uploaded file without extension"}</li>
-                                    <li>{"{file.ext} - Extension of the uploaded file"}</li>
-                                    <li>{"{entityId} - ID of the entity"}</li>
-                                    <li>{"{propertyKey} - ID of this field"}</li>
-                                    <li>{"{path} - Path of this entity"}</li>
-                                    <li>{"{rand} - Random value used to avoid name collisions"}</li>
+                                    <li>{t("storage_placeholder_file")}</li>
+                                    <li>{t("storage_placeholder_file_name")}</li>
+                                    <li>{t("storage_placeholder_file_ext")}</li>
+                                    <li>{t("storage_placeholder_entity_id")}</li>
+                                    <li>{t("storage_placeholder_property_key")}</li>
+                                    <li>{t("storage_placeholder_path")}</li>
+                                    <li>{t("storage_placeholder_rand")}</li>
                                 </ul>
                             </Typography>
 
                             <Typography variant={"caption"} className={"ml-3.5 mt-1 mb-2"}>
-                                When using Markdown, the URL of the uploaded files are always saved in the text value
-                                (not
-                                the path).
+                                {t("markdown_url_note")}
                             </Typography>
                         </div>
 
                         <div className={"col-span-12"}>
                             <DebouncedTextField name={maxSize}
                                 type={"number"}
-                                label={"Max size (in bytes)"}
+                                label={t("max_size_bytes")}
                                 size={"small"}
                                 value={maxSizeValue !== undefined && maxSizeValue !== null ? maxSizeValue.toString() : ""}
                                 onChange={(e) => {
@@ -206,7 +205,7 @@ export function MarkdownPropertyField({
                     onChange={(e: any) => {
                         setFieldValue("defaultValue", e.target.value === "" ? undefined : e.target.value);
                     }}
-                    label={"Default value"}
+                    label={t("default_value")}
                     value={getIn(values, "defaultValue") ?? ""} />
 
             </div>

package/src/ui/collection_editor/properties/NumberPropertyField.tsx

@@ -3,12 +3,14 @@ import { NumberPropertyValidation } from "./validation/NumberPropertyValidation"
 import { ValidationPanel } from "./validation/ValidationPanel";
 import { TextField } from "@firecms/ui";
 import { getIn, useFormex } from "@firecms/formex";
+import { useTranslation } from "@firecms/core";
 
 export function NumberPropertyField({ disabled }: {
     disabled: boolean;
 }) {
 
     const { values, setFieldValue } = useFormex();
+    const { t } = useTranslation();
 
     return (
         <>
@@ -29,7 +31,7 @@ export function NumberPropertyField({ disabled }: {
                            onChange={(e: any) => {
                                setFieldValue("defaultValue", e.target.value === "" ? undefined : parseFloat(e.target.value));
                            }}
-                           label={"Default value"}
+                           label={t("default_value")}
                            value={getIn(values, "defaultValue") ?? ""}/>
 
             </div>

package/src/ui/collection_editor/properties/ReferencePropertyField.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Field, getIn, useFormex } from "@firecms/formex";
-import { FieldCaption, IconForView, NumberProperty, StringProperty, useNavigationController } from "@firecms/core";
+import { FieldCaption, IconForView, NumberProperty, StringProperty, useNavigationController, useTranslation } from "@firecms/core";
 import { CircularProgress, Select, SelectGroup, SelectItem, Typography, } from "@firecms/ui";
 
 export function ReferencePropertyField({
@@ -69,6 +69,7 @@ export function CollectionsSelect({
 }) {
 
     const navigation = useNavigationController();
+    const { t } = useTranslation();
 
     if (!navigation)
         return <div className={"col-span-12"}>
@@ -94,7 +95,7 @@ export function CollectionsSelect({
                 size={"large"}
                 fullWidth={true}
                 onChange={handleChange}
-                label={"Target collection"}
+                label={t("target_collection")}
                 renderValue={(selected) => {
                     const selectedCollection = collections.find(collection => collection.id === selected || collection.path === selected);
                     if (!selectedCollection) return null;
@@ -111,7 +112,7 @@ export function CollectionsSelect({
                 {...props}>
 
                 {groups.flatMap((group) => (
-                    <SelectGroup label={group || "Views"}
+                    <SelectGroup label={group || t("views_group")}
                                  key={`group_${group}`}>
                         {
                             collections.filter(collection => collection.group === group)
@@ -134,7 +135,7 @@ export function CollectionsSelect({
                     </SelectGroup>
                 ))}
 
-                {ungroupedCollections && <SelectGroup label={"Views"}>
+                {ungroupedCollections && <SelectGroup label={t("views_group")}>
                     {ungroupedCollections
                         .map((collection) => {
                             return <SelectItem key={collection.id ?? collection.path}