@firecms/collection_editor 3.0.0 → 3.1.0-canary.02232f4

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({
@@ -41,7 +41,7 @@ export function ReferencePropertyField({
                 <Field name={pathPath}
                        pathPath={pathPath}
                        type="select"
-                       disabled={(existing && Boolean(pathValue)) || disabled}
+                       disabled={disabled}
                        value={pathValue}
                        error={pathError}
                        handleChange={handleChange}
@@ -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}
@@ -155,10 +156,6 @@ export function CollectionsSelect({
 
             </Select>
 
-            <FieldCaption>
-                You can only edit the reference collection upon field
-                creation.
-            </FieldCaption>
         </>
     );
 }

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

@@ -16,14 +16,7 @@ import { GeneralPropertyValidation } from "./validation/GeneralPropertyValidatio
 import { ArrayPropertyValidation } from "./validation/ArrayPropertyValidation";
 import { ValidationPanel } from "./validation/ValidationPanel";
 import { SwitchControl } from "../SwitchControl";
-
-const fileTypes: Record<string, string> = {
-    "image/*": "Images",
-    "video/*": "Videos",
-    "audio/*": "Audio files",
-    "application/*": "Files (pdf, zip, csv, excel...)",
-    "text/*": "Text files"
-}
+import { useTranslation } from "@firecms/core";
 
 export function StoragePropertyField({
                                          multiple,
@@ -40,6 +33,8 @@ export function StoragePropertyField({
         setFieldValue
     } = useFormex();
 
+    const { t } = useTranslation();
+
     const baseStoragePath = multiple ? "of.storage" : "storage";
     const acceptedFiles = `${baseStoragePath}.acceptedFiles`;
 
@@ -48,6 +43,7 @@ export function StoragePropertyField({
     const maxSize = `${baseStoragePath}.maxSize`;
     const storagePath = `${baseStoragePath}.storagePath`;
     const storeUrl = `${baseStoragePath}.storeUrl`;
+    const includeBucketUrl = `${baseStoragePath}.includeBucketUrl`;
 
     // Image resize config paths
     const imageResize = `${baseStoragePath}.imageResize`;
@@ -72,6 +68,14 @@ export function StoragePropertyField({
     const fileTypesValue: string[] | undefined = Array.isArray(storedValue) ? storedValue : undefined;
     const allFileTypesSelected = !fileTypesValue || fileTypesValue.length === 0;
 
+    const fileTypes: Record<string, string> = {
+        "image/*": t("file_type_images"),
+        "video/*": t("file_type_videos"),
+        "audio/*": t("file_type_audio"),
+        "application/*": t("file_type_applications"),
+        "text/*": t("file_type_text")
+    };
+
     const handleTypesChange = (value: string[]) => {
         if (!value) setFieldValue(acceptedFiles, undefined);
         else setFieldValue(acceptedFiles, value);
@@ -87,11 +91,11 @@ export function StoragePropertyField({
 
                 <ExpandablePanel
                     title={
-                        <div className="flex flex-row text-surface-500">
+                        <div className="flex flex-row text-surface-500 text-text-secondary dark:text-text-secondary-dark">
                             <CloudUploadIcon/>
                             <Typography variant={"subtitle2"}
                                         className="ml-4">
-                                File upload config
+                                {t("file_upload_config")}
                             </Typography>
                         </div>
                     }>
@@ -102,14 +106,14 @@ export function StoragePropertyField({
 
                             <MultiSelect
                                 className={"w-full"}
-                                placeholder={"All file types allowed"}
+                                placeholder={t("all_file_types_allowed")}
                                 disabled={disabled}
                                 name={acceptedFiles}
                                 value={fileTypesValue ?? []}
                                 onValueChange={handleTypesChange}
-                                label={allFileTypesSelected ? undefined : "Allowed file types"}
+                                label={allFileTypesSelected ? undefined : t("allowed_file_types")}
                                 renderValues={(selected) => {
-                                    if (!selected || selected.length === 0) return "All file types allowed";
+                                    if (!selected || selected.length === 0) return t("all_file_types_allowed");
                                     return selected.map((v: string) => fileTypes[v])
                                         .filter((v: string) => Boolean(v))
                                         .join(", ");
@@ -129,7 +133,7 @@ export function StoragePropertyField({
                                                     e.stopPropagation();
                                                     return setFieldValue(acceptedFiles, [value]);
                                                 }}>
-                                            Only
+                                            {t("only")}
                                         </Button>
                                     </MultiSelectItem>
                                 ))}
@@ -140,7 +144,7 @@ export function StoragePropertyField({
                         <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}
@@ -149,26 +153,42 @@ export function StoragePropertyField({
                         <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>
 
+                            <Field name={includeBucketUrl}
+                                   type="checkbox">
+                                {({
+                                      field,
+                                      form
+                                  }: FormexFieldProps) => {
+                                    return <SwitchControl
+                                        label={t("include_bucket_url")}
+                                        disabled={existing || disabled}
+                                        form={form}
+                                        field={field}/>;
+                                }}
+                            </Field>
+
+                            <Typography variant={"caption"} className={"ml-3.5 mt-1 mb-2"}>
+                                {t("include_bucket_url_description")}
+                            </Typography>
+
                             <Field name={storeUrl}
                                    type="checkbox">
                                 {({
@@ -176,26 +196,22 @@ export function StoragePropertyField({
                                       form
                                   }: FormexFieldProps) => {
                                     return <SwitchControl
-                                        label={"Save URL instead of storage path"}
+                                        label={t("save_url_instead_of_path")}
                                         disabled={existing || disabled}
                                         form={form}
-                                        field={field}/>
+                                        field={field}/>;
                                 }}
                             </Field>
 
                             <Typography variant={"caption"} className={"ml-3.5 mt-1 mb-2"}>
-                                Turn this setting on, if you prefer to save
-                                the download
-                                URL of the uploaded file instead of the
-                                storage path.
-                                You can only change this prop upon creation.
+                                {t("save_url_description")}
                             </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) => {
@@ -210,10 +226,10 @@ export function StoragePropertyField({
                             <Typography variant={"subtitle2"}
                                         color={"secondary"}
                                         className={"mb-2 block"}>
-                                Image Resize Configuration
+                                {t("image_resize_configuration")}
                             </Typography>
                             <Typography variant={"caption"} className={"mb-2 block text-xs"}>
-                                Automatically resize and optimize images before upload (JPEG, PNG, WebP only)
+                                {t("image_resize_description")}
                             </Typography>
                         </div>
 
@@ -221,7 +237,7 @@ export function StoragePropertyField({
                             <DebouncedTextField
                                 name={imageResizeMaxWidth}
                                 type={"number"}
-                                label={"Max width (px)"}
+                                label={t("max_width_px")}
                                 size={"small"}
                                 disabled={disabled}
                                 value={imageResizeMaxWidthValue !== undefined && imageResizeMaxWidthValue !== null ? imageResizeMaxWidthValue.toString() : ""}
@@ -237,7 +253,7 @@ export function StoragePropertyField({
                             <DebouncedTextField
                                 name={imageResizeMaxHeight}
                                 type={"number"}
-                                label={"Max height (px)"}
+                                label={t("max_height_px")}
                                 size={"small"}
                                 disabled={disabled}
                                 value={imageResizeMaxHeightValue !== undefined && imageResizeMaxHeightValue !== null ? imageResizeMaxHeightValue.toString() : ""}
@@ -257,16 +273,16 @@ export function StoragePropertyField({
                                 size={"medium"}
                                 value={imageResizeModeValue || "cover"}
                                 onValueChange={(value) => setFieldValue(imageResizeMode, value || "cover")}
-                                label={"Resize mode"}
+                                label={t("resize_mode")}
                                 renderValue={(selected) => {
-                                    if (!selected) return "Cover";
-                                    return selected === "contain" ? "Contain (fit within bounds)" : "Cover (fill bounds, may crop)";
+                                    if (!selected) return t("resize_cover");
+                                    return selected === "contain" ? t("resize_contain_description") : t("resize_cover_description");
                                 }}>
                                 <SelectItem value="contain">
-                                    Contain (fit within bounds)
+                                    {t("resize_contain_description")}
                                 </SelectItem>
                                 <SelectItem value="cover">
-                                    Cover (fill bounds, may crop)
+                                    {t("resize_cover_description")}
                                 </SelectItem>
                             </Select>
                         </div>
@@ -279,13 +295,13 @@ export function StoragePropertyField({
                                 name={imageResizeFormat}
                                 value={imageResizeFormatValue || "original"}
                                 onValueChange={(value) => setFieldValue(imageResizeFormat, value || "original")}
-                                label={"Output format"}
+                                label={t("output_format")}
                                 renderValue={(selected) => {
-                                    if (!selected) return "Original";
+                                    if (!selected) return t("format_original");
                                     return selected.charAt(0).toUpperCase() + selected.slice(1);
                                 }}>
                                 <SelectItem value="original">
-                                    Original (keep same format)
+                                    {t("format_original_description")}
                                 </SelectItem>
                                 <SelectItem value="jpeg">
                                     JPEG
@@ -294,7 +310,7 @@ export function StoragePropertyField({
                                     PNG
                                 </SelectItem>
                                 <SelectItem value="webp">
-                                    WebP (best compression)
+                                    {t("format_webp_description")}
                                 </SelectItem>
                             </Select>
                         </div>
@@ -303,7 +319,7 @@ export function StoragePropertyField({
                             <DebouncedTextField
                                 name={imageResizeQuality}
                                 type={"number"}
-                                label={"Quality (0-100)"}
+                                label={t("quality_label")}
                                 size={"small"}
                                 disabled={disabled}
                                 value={imageResizeQualityValue !== undefined && imageResizeQualityValue !== null ? imageResizeQualityValue.toString() : ""}
@@ -319,7 +335,7 @@ export function StoragePropertyField({
                                 }}
                             />
                             <Typography variant={"caption"} className={"ml-3.5 mt-1 mb-2"}>
-                                Higher quality = larger file size. Recommended: 80-90 for photos, 90-100 for graphics
+                                {t("quality_hint")}
                             </Typography>
                         </div>
 

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

@@ -4,6 +4,7 @@ import { ValidationPanel } from "./validation/ValidationPanel";
 import { getIn, useFormex } from "@firecms/formex";
 
 import { TextField } from "@firecms/ui";
+import { useTranslation } from "@firecms/core";
 
 export function StringPropertyField({
                                         widgetId,
@@ -16,6 +17,7 @@ export function StringPropertyField({
 }) {
 
     const { values, setFieldValue } = useFormex();
+    const { t } = useTranslation();
 
     return (
         <>
@@ -65,7 +67,7 @@ export function StringPropertyField({
                            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/UrlPropertyField.tsx

@@ -4,6 +4,7 @@ import { ValidationPanel } from "./validation/ValidationPanel";
 import { getIn, useFormex } from "@firecms/formex";
 
 import { Select, SelectItem, TextField } from "@firecms/ui";
+import { useTranslation } from "@firecms/core";
 
 export function UrlPropertyField({
                                      disabled,
@@ -14,6 +15,7 @@ export function UrlPropertyField({
 }) {
 
     const { values, setFieldValue } = useFormex();
+    const { t } = useTranslation();
 
     const urlValue = getIn(values, "url");
 
@@ -31,31 +33,31 @@ export function UrlPropertyField({
                         else
                             setFieldValue("url", value);
                     }}
-                    label={"Preview type"}
+                    label={t("preview_type")}
                     renderValue={(value: string) => {
                         switch (value) {
                             case "image":
-                                return "Image";
+                                return t("preview_image");
                             case "video":
-                                return "Video";
+                                return t("preview_video");
                             case "audio":
-                                return "Audio";
+                                return t("preview_audio");
                             default:
-                                return "Display URL";
+                                return t("display_url");
                         }
                     }}
                     value={urlValue ?? "[NONE]"}>
                     <SelectItem value={"[NONE]"}>
-                        Display URL
+                        {t("display_url")}
                     </SelectItem>
                     <SelectItem value={"image"}>
-                        Image
+                        {t("preview_image")}
                     </SelectItem>
                     <SelectItem value={"video"}>
-                        Video
+                        {t("preview_video")}
                     </SelectItem>
                     <SelectItem value={"audio"}>
-                        Audio
+                        {t("preview_audio")}
                     </SelectItem>
                 </Select>
             </div>
@@ -81,7 +83,7 @@ export function UrlPropertyField({
                            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/advanced/AdvancedPropertyValidation.tsx

@@ -2,14 +2,18 @@ import React from "react";
 
 import { Field, FormexFieldProps } from "@firecms/formex";
 import { SwitchControl } from "../../SwitchControl";
+import { useTranslation } from "@firecms/core";
 
 export function AdvancedPropertyValidation({ disabled }: {
     disabled: boolean
 }) {
 
+    const { t } = useTranslation();
+
     const columnWidth = "columnWidth";
     const hideFromCollection = "hideFromCollection";
     const readOnly = "readOnly";
+    const nullable = "nullable";
 
     return (
 
@@ -18,11 +22,11 @@ export function AdvancedPropertyValidation({ disabled }: {
                 <Field type="checkbox" name={hideFromCollection}>
                     {({ field, form }: FormexFieldProps) => {
                         return <SwitchControl
-                            label={"Hide from collection"}
+                            label={t("hide_from_collection")}
                             size={"medium"}
                             disabled={disabled}
                             form={form}
-                            tooltip={"Hide this field from the collection view. It will still be visible in the form view"}
+                            tooltip={t("hide_from_collection_tooltip")}
                             field={field}/>
                     }}
                 </Field>
@@ -33,10 +37,25 @@ export function AdvancedPropertyValidation({ disabled }: {
                        type="checkbox">
                     {({ field, form }: FormexFieldProps) => {
                         return <SwitchControl
-                            label={"Read only"}
+                            label={t("read_only")}
+                            size={"medium"}
+                            disabled={disabled}
+                            tooltip={t("read_only_tooltip")}
+                            form={form}
+                            field={field}/>
+                    }}
+                </Field>
+            </div>
+
+            <div className={"col-span-12"}>
+                <Field name={nullable}
+                       type="checkbox">
+                    {({ field, form }: FormexFieldProps) => {
+                        return <SwitchControl
+                            label={t("nullable")}
                             size={"medium"}
                             disabled={disabled}
-                            tooltip={"Is this a read only field. Display only as a preview"}
+                            tooltip={t("nullable_tooltip")}
                             form={form}
                             field={field}/>
                     }}