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

package/src/ui/collection_editor/properties/validation/StringPropertyValidation.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 import { Field, FormexFieldProps, getIn, useFormex } from "@firecms/formex";
-import { FieldCaption, serializeRegExp } from "@firecms/core";
+import { FieldCaption, serializeRegExp, useTranslation } from "@firecms/core";
 import { DebouncedTextField, } from "@firecms/ui";
 import { GeneralPropertyValidation } from "./GeneralPropertyValidation";
 import { SwitchControl } from "../../SwitchControl";
@@ -34,6 +34,8 @@ export function StringPropertyValidation({
         errors
     } = useFormex();
 
+    const { t } = useTranslation();
+
     const validationLength = "validation.length";
     const validationMin = "validation.min";
     const validationMax = "validation.max";
@@ -58,7 +60,7 @@ export function StringPropertyValidation({
                            type="checkbox">
                         {({ field, form }: FormexFieldProps) => {
                             return <SwitchControl
-                                label={"Lowercase"}
+                                label={t("lowercase")}
                                 disabled={disabled}
                                 form={form}
                                 field={field}/>
@@ -71,7 +73,7 @@ export function StringPropertyValidation({
                            type="checkbox">
                         {({ field, form }: FormexFieldProps) => {
                             return <SwitchControl
-                                label={"Uppercase"}
+                                label={t("uppercase")}
                                 disabled={disabled}
                                 form={form}
                                 field={field}/>
@@ -84,7 +86,7 @@ export function StringPropertyValidation({
                            type="checkbox">
                         {({ field, form }: FormexFieldProps) => {
                             return <SwitchControl
-                                label={"Trim"}
+                                label={t("trim")}
                                 disabled={disabled}
                                 form={form}
                                 field={field}/>
@@ -98,7 +100,7 @@ export function StringPropertyValidation({
                 {length && <div className={"col-span-4"}>
                     <DebouncedTextField
                         value={getIn(values, validationLength)}
-                        label={"Exact length"}
+                        label={t("exact_length")}
                         name={validationLength}
                         type="number"
                         size="small"
@@ -109,7 +111,7 @@ export function StringPropertyValidation({
 
                 {min && <div className={"col-span-4"}>
                     <DebouncedTextField value={getIn(values, validationMin)}
-                                        label={"Min length"}
+                                        label={t("min_length")}
                                         name={validationMin}
                                         type="number"
                                         size="small"
@@ -120,7 +122,7 @@ export function StringPropertyValidation({
 
                 {max && <div className={"col-span-4"}>
                     <DebouncedTextField value={getIn(values, validationMax)}
-                                        label={"Max length"}
+                                        label={t("max_length")}
                                         name={validationMax}
                                         type="number"
                                         size="small"
@@ -134,13 +136,13 @@ export function StringPropertyValidation({
             {matches && <div className={"col-span-12"}>
                 <Field name={validationMatches}
                        as={DebouncedTextField}
-                       label={"Matches regex"}
+                       label={t("matches_regex")}
                        size="small"
                        disabled={disabled}
                        value={matchesStringValue}
                        error={Boolean(matchesError)}/>
                 <FieldCaption error={Boolean(matchesError)}>
-                    {matchesError ? "Not a valid regexp" : "e.g. /^\\d+$/ for digits only"}
+                    {matchesError ? t("not_valid_regexp") : t("regex_helper")}
                 </FieldCaption>
             </div>}
 

package/src/ui/collection_editor/properties/validation/ValidationPanel.tsx

@@ -1,11 +1,14 @@
 import { PropsWithChildren } from "react";
 
 import { ExpandablePanel, RuleIcon, Typography } from "@firecms/ui";
+import { useTranslation } from "@firecms/core";
 
 export function ValidationPanel({
                                     children
                                 }: PropsWithChildren<{}>) {
 
+    const { t } = useTranslation();
+
     return (
         <ExpandablePanel
             initiallyExpanded={false}
@@ -16,7 +19,7 @@ export function ValidationPanel({
                     <RuleIcon/>
                     <Typography variant={"subtitle2"}
                                 className="ml-4">
-                        Validation
+                        {t("validation")}
                     </Typography>
                 </div>
             }>

package/src/useCollectionEditorPlugin.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { FireCMSPlugin, useAuthController, useNavigationController, User } from "@firecms/core";
+import { FireCMSPlugin, useAuthController, useNavigationController, User, useTranslation } from "@firecms/core";
 import { ConfigControllerProvider } from "./ConfigControllerProvider";
 import { CollectionEditorPermissionsBuilder } from "./types/config_permissions";
 import { EditorCollectionAction } from "./ui/EditorCollectionAction";
@@ -18,6 +18,13 @@ import { NewCollectionCard } from "./ui/NewCollectionCard";
 import { EditorEntityAction } from "./ui/EditorEntityAction";
 import { KanbanSetupAction } from "./ui/KanbanSetupAction";
 import { AddKanbanColumnAction } from "./ui/AddKanbanColumnAction";
+import { collectionEditorTranslationsEn } from "./locales/en";
+import { collectionEditorTranslationsEs } from "./locales/es";
+import { collectionEditorTranslationsDe } from "./locales/de";
+import { collectionEditorTranslationsFr } from "./locales/fr";
+import { collectionEditorTranslationsIt } from "./locales/it";
+import { collectionEditorTranslationsHi } from "./locales/hi";
+import { collectionEditorTranslationsPt } from "./locales/pt";
 
 export interface CollectionConfigControllerProps<EC extends PersistedCollection = PersistedCollection, USER extends User = User> {
 
@@ -130,6 +137,15 @@ export function useCollectionEditorPlugin<EC extends PersistedCollection = Persi
         },
         form: {
             ActionsTop: EditorEntityAction,
+        },
+        i18n: {
+            en: collectionEditorTranslationsEn,
+            es: collectionEditorTranslationsEs,
+            de: collectionEditorTranslationsDe,
+            fr: collectionEditorTranslationsFr,
+            it: collectionEditorTranslationsIt,
+            hi: collectionEditorTranslationsHi,
+            pt: collectionEditorTranslationsPt
         }
     };
 }
@@ -141,6 +157,7 @@ export function IntroWidget() {
         throw Error("Navigation not ready in FireCMSHomePage");
 
     const authController = useAuthController();
+    const { t } = useTranslation();
 
     const collectionEditorController = useCollectionEditorController();
     const canCreateCollections = collectionEditorController.configPermissions
@@ -156,10 +173,9 @@ export function IntroWidget() {
     return (
         <Paper
             className={"my-4 px-4 py-6 flex flex-col  bg-white dark:bg-surface-accent-800 gap-2"}>
-            <Typography variant={"subtitle2"} className={"uppercase"}>No collections found</Typography>
+            <Typography variant={"subtitle2"} className={"uppercase"}>{t("no_collections_found")}</Typography>
             <Typography>
-                Start building collections in FireCMS easily. Map them to your existing
-                database data, import from files, or use our templates.
+                {t("start_building_collections")}
             </Typography>
             {canCreateCollections && <Button
                 onClick={collectionEditorController && canCreateCollections
@@ -169,10 +185,10 @@ export function IntroWidget() {
                         sourceClick: "new_collection_card"
                     })
                     : undefined}>
-                <AddIcon />Create your first collection
+                <AddIcon />{t("create_first_collection")}
             </Button>}
             <Typography color={"secondary"}>
-                You can also define collections programmatically.
+                {t("define_collections_programmatically")}
             </Typography>
         </Paper>
     );