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

package/src/ui/collection_editor/properties/conditions/property_paths.ts

@@ -0,0 +1,92 @@
+import { Properties, Property, PropertyOrBuilder, isPropertyBuilder } from "@firecms/core";
+
+/**
+ * Recursively extract all property paths from a Properties object.
+ * For nested map properties, creates dot-notation paths like "address.city".
+ * Skips PropertyBuilder functions (callbacks) as they cannot be statically analyzed.
+ * 
+ * @param properties - The properties object to extract paths from
+ * @param prefix - Optional prefix for nested paths (used in recursion)
+ * @returns Array of property path strings
+ */
+export function getPropertyPaths(
+    properties: Properties | undefined,
+    prefix: string = ""
+): string[] {
+    if (!properties) return [];
+
+    const paths: string[] = [];
+
+    for (const [key, propertyOrBuilder] of Object.entries(properties)) {
+        if (!propertyOrBuilder) continue;
+
+        // Skip PropertyBuilder functions - they require runtime values to resolve
+        if (isPropertyBuilder(propertyOrBuilder)) continue;
+
+        const property = propertyOrBuilder as Property;
+        const fullPath = prefix ? `${prefix}.${key}` : key;
+        paths.push(fullPath);
+
+        // Recursively add nested map properties
+        if (property.dataType === "map" && property.properties) {
+            const nestedPaths = getPropertyPaths(
+                property.properties as Properties,
+                fullPath
+            );
+            paths.push(...nestedPaths);
+        }
+
+        // For arrays with object items, add the nested paths too
+        if (property.dataType === "array" && property.of) {
+            const ofPropertyOrBuilder = property.of as PropertyOrBuilder;
+            // Skip if the array's 'of' is a PropertyBuilder
+            if (!isPropertyBuilder(ofPropertyOrBuilder)) {
+                const ofProperty = ofPropertyOrBuilder as Property;
+                if (ofProperty.dataType === "map" && ofProperty.properties) {
+                    const nestedPaths = getPropertyPaths(
+                        ofProperty.properties as Properties,
+                        `${fullPath}[]`
+                    );
+                    paths.push(...nestedPaths);
+                }
+            }
+        }
+    }
+
+    return paths;
+}
+
+/**
+ * Get property paths grouped by top-level property for UI display.
+ * Skips PropertyBuilder functions.
+ * 
+ * @param properties - The properties object
+ * @returns Object with top-level keys mapping to their nested paths
+ */
+export function getGroupedPropertyPaths(
+    properties: Properties | undefined
+): Record<string, string[]> {
+    if (!properties) return {};
+
+    const grouped: Record<string, string[]> = {};
+
+    for (const [key, propertyOrBuilder] of Object.entries(properties)) {
+        if (!propertyOrBuilder) continue;
+
+        // Skip PropertyBuilder functions
+        if (isPropertyBuilder(propertyOrBuilder)) continue;
+
+        const property = propertyOrBuilder as Property;
+        grouped[key] = [key];
+
+        if (property.dataType === "map" && property.properties) {
+            const nestedPaths = getPropertyPaths(
+                property.properties as Properties,
+                key
+            );
+            grouped[key].push(...nestedPaths);
+        }
+    }
+
+    return grouped;
+}

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

@@ -3,6 +3,7 @@ import React from "react";
 import { getIn, useFormex } from "@firecms/formex";
 import { DebouncedTextField } from "@firecms/ui";
 import { GeneralPropertyValidation } from "./GeneralPropertyValidation";
+import { useTranslation } from "@firecms/core";
 
 export function ArrayPropertyValidation({
                                             max = true,
@@ -19,6 +20,8 @@ export function ArrayPropertyValidation({
         handleChange
     } = useFormex();
 
+    const { t } = useTranslation();
+
     const validationMin = "validation.min";
     const validationMax = "validation.max";
 
@@ -30,7 +33,7 @@ export function ArrayPropertyValidation({
             {min && <div className={"col-span-6"}>
                 <DebouncedTextField value={getIn(values, validationMin)}
                                     disabled={disabled}
-                                    label={"Min length"}
+                                    label={t("min_length")}
                                     name={validationMin}
                                     type="number"
                                     size="small"
@@ -39,7 +42,7 @@ export function ArrayPropertyValidation({
             {max && <div className={"col-span-6"}>
                 <DebouncedTextField value={getIn(values, validationMax)}
                                     disabled={disabled}
-                                    label={"Max length"}
+                                    label={t("max_length")}
                                     name={validationMax}
                                     type="number"
                                     size="small"

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

@@ -3,6 +3,7 @@ import React from "react";
 import { Field, FormexFieldProps, getIn, useFormex } from "@firecms/formex";
 import { DebouncedTextField } from "@firecms/ui";
 import { SwitchControl } from "../../SwitchControl";
+import { useTranslation } from "@firecms/core";
 
 export function GeneralPropertyValidation({ disabled }: {
     required?: boolean;
@@ -10,6 +11,7 @@ export function GeneralPropertyValidation({ disabled }: {
 }) {
 
     const { values, handleChange } = useFormex();
+    const { t } = useTranslation();
 
     const validationRequired = "validation.required";
     const validationRequiredMessage = "validation.requiredMessage";
@@ -24,8 +26,8 @@ export function GeneralPropertyValidation({ disabled }: {
                     {({ field, form }: FormexFieldProps) => {
                         return <SwitchControl
                             disabled={disabled}
-                            label={"Required"}
-                            tooltip={"You won't be able to save this entity if this value is not set"}
+                            label={t("required")}
+                            tooltip={t("required_tooltip")}
                             form={form}
                             field={field}/>
                     }}
@@ -39,8 +41,8 @@ export function GeneralPropertyValidation({ disabled }: {
                     {({ field, form }: FormexFieldProps) => {
                         return <SwitchControl
                             disabled={disabled}
-                            label={"Unique"}
-                            tooltip={"There cannot be multiple entities with the same value"}
+                            label={t("unique")}
+                            tooltip={t("unique_tooltip")}
                             form={form}
                             field={field}/>
                     }}
@@ -51,7 +53,7 @@ export function GeneralPropertyValidation({ disabled }: {
                 <DebouncedTextField
                     disabled={disabled}
                     value={getIn(values, validationRequiredMessage)}
-                    label={"Required message"}
+                    label={t("required_message")}
                     name={validationRequiredMessage}
                     size="small"
                     onChange={handleChange}/>

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

@@ -4,6 +4,7 @@ import { Field, FormexFieldProps, getIn, useFormex } from "@firecms/formex";
 import { DebouncedTextField } from "@firecms/ui";
 import { GeneralPropertyValidation } from "./GeneralPropertyValidation";
 import { SwitchControl } from "../../SwitchControl";
+import { useTranslation } from "@firecms/core";
 
 export function NumberPropertyValidation({ disabled }: {
     disabled: boolean;
@@ -14,6 +15,8 @@ export function NumberPropertyValidation({ disabled }: {
         handleChange
     } = useFormex();
 
+    const { t } = useTranslation();
+
     const validationMin = "validation.min";
     const validationMax = "validation.max";
     const validationLessThan = "validation.lessThan";
@@ -30,7 +33,7 @@ export function NumberPropertyValidation({ disabled }: {
 
             <div className={"col-span-6"}>
                 <DebouncedTextField value={getIn(values, validationMin)}
-                                    label={"Min value"}
+                                    label={t("min_value")}
                                     name={validationMin}
                                     type="number"
                                     size="small"
@@ -40,7 +43,7 @@ export function NumberPropertyValidation({ disabled }: {
 
             <div className={"col-span-6"}>
                 <DebouncedTextField value={getIn(values, validationMax)}
-                                    label={"Max value"}
+                                    label={t("max_value")}
                                     name={validationMax}
                                     type="number"
                                     size="small"
@@ -53,7 +56,7 @@ export function NumberPropertyValidation({ disabled }: {
             <div className={"col-span-6"}>
                 <DebouncedTextField
                     value={getIn(values, validationLessThan)}
-                    label={"Less than"}
+                    label={t("less_than")}
                     name={validationLessThan}
                     type="number"
                     size="small"
@@ -65,7 +68,7 @@ export function NumberPropertyValidation({ disabled }: {
             <div className={"col-span-6"}>
                 <DebouncedTextField
                     value={getIn(values, validationMoreThan)}
-                    label={"More than"}
+                    label={t("more_than")}
                     name={validationMoreThan}
                     type="number"
                     size="small"
@@ -79,7 +82,7 @@ export function NumberPropertyValidation({ disabled }: {
                        type="checkbox">
                     {({ field, form }: FormexFieldProps) => {
                         return <SwitchControl
-                            label={"Positive value"}
+                            label={t("positive_value")}
                             disabled={disabled}
                             form={form}
                             field={field}/>
@@ -91,7 +94,7 @@ export function NumberPropertyValidation({ disabled }: {
                        type="checkbox">
                     {({ field, form }: FormexFieldProps) => {
                         return <SwitchControl
-                            label={"Negative value"}
+                            label={t("negative_value")}
                             disabled={disabled}
                             form={form}
                             field={field}/>
@@ -103,7 +106,7 @@ export function NumberPropertyValidation({ disabled }: {
                        type="checkbox">
                     {({ field, form }: FormexFieldProps) => {
                         return <SwitchControl
-                            label={"Integer value"}
+                            label={t("integer_value")}
                             disabled={disabled}
                             form={form}
                             field={field}/>

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,22 +1,25 @@
 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}
             asField={true}
             innerClassName="p-4"
             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">
                     <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";
@@ -7,6 +7,7 @@ import { HomePageEditorCollectionAction } from "./ui/HomePageEditorCollectionAct
 import { PersistedCollection } from "./types/persisted_collection";
 import { CollectionInference } from "./types/collection_inference";
 import { CollectionsConfigController } from "./types/config_controller";
+import { CollectionGenerationCallback } from "./api/generateCollectionApi";
 import { CollectionViewHeaderAction } from "./ui/CollectionViewHeaderAction";
 import { PropertyAddColumnComponent } from "./ui/PropertyAddColumnComponent";
 import { NewCollectionButton } from "./ui/NewCollectionButton";
@@ -15,6 +16,15 @@ import { useCollectionEditorController } from "./useCollectionEditorController";
 import { EditorCollectionActionStart } from "./ui/EditorCollectionActionStart";
 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> {
 
@@ -54,6 +64,12 @@ export interface CollectionConfigControllerProps<EC extends PersistedCollection
 
     includeIntroView?: boolean;
 
+    /**
+     * Callback function for generating/modifying collections.
+     * The plugin is API-agnostic - the consumer provides the implementation.
+     */
+    generateCollection?: CollectionGenerationCallback;
+
 }
 
 /**
@@ -68,18 +84,19 @@ export interface CollectionConfigControllerProps<EC extends PersistedCollection
  * @param collectionInference
  */
 export function useCollectionEditorPlugin<EC extends PersistedCollection = PersistedCollection, USER extends User = User>
-({
-     collectionConfigController,
-     configPermissions,
-     reservedGroups,
-     extraView,
-     getUser,
-     collectionInference,
-     getData,
-     onAnalyticsEvent,
-     includeIntroView = true,
-     pathSuggestions
- }: CollectionConfigControllerProps<EC, USER>): FireCMSPlugin<any, any, PersistedCollection> {
+    ({
+        collectionConfigController,
+        configPermissions,
+        reservedGroups,
+        extraView,
+        getUser,
+        collectionInference,
+        getData,
+        onAnalyticsEvent,
+        includeIntroView = true,
+        pathSuggestions,
+        generateCollection
+    }: CollectionConfigControllerProps<EC, USER>): FireCMSPlugin<any, any, PersistedCollection> {
 
     return {
         key: "collection_editor",
@@ -95,12 +112,13 @@ export function useCollectionEditorPlugin<EC extends PersistedCollection = Persi
                 getUser,
                 getData,
                 onAnalyticsEvent,
-                pathSuggestions
+                pathSuggestions,
+                generateCollection
             }
         },
         homePage: {
-            additionalActions: <NewCollectionButton/>,
-            additionalChildrenStart: includeIntroView ? <IntroWidget/> : undefined,
+            additionalActions: <NewCollectionButton />,
+            additionalChildrenStart: includeIntroView ? <IntroWidget /> : undefined,
             CollectionActions: HomePageEditorCollectionAction,
             AdditionalCards: NewCollectionCard,
             allowDragAndDrop: true,
@@ -111,10 +129,23 @@ export function useCollectionEditorPlugin<EC extends PersistedCollection = Persi
             CollectionActionsStart: EditorCollectionActionStart,
             CollectionActions: EditorCollectionAction,
             HeaderAction: CollectionViewHeaderAction,
-            AddColumnComponent: PropertyAddColumnComponent
+            AddColumnComponent: PropertyAddColumnComponent,
+            onColumnsReorder: collectionConfigController.updatePropertiesOrder,
+            onKanbanColumnsReorder: collectionConfigController.updateKanbanColumnsOrder,
+            KanbanSetupComponent: KanbanSetupAction,
+            AddKanbanColumnComponent: AddKanbanColumnAction
         },
         form: {
             ActionsTop: EditorEntityAction,
+        },
+        i18n: {
+            en: collectionEditorTranslationsEn,
+            es: collectionEditorTranslationsEs,
+            de: collectionEditorTranslationsDe,
+            fr: collectionEditorTranslationsFr,
+            it: collectionEditorTranslationsIt,
+            hi: collectionEditorTranslationsHi,
+            pt: collectionEditorTranslationsPt
         }
     };
 }
@@ -126,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
@@ -141,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
@@ -154,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>
     );