@firecms/collection_editor 3.0.0-alpha.9 → 3.0.0-beta.10

package/src/useCollectionEditorPlugin.tsx

@@ -0,0 +1,164 @@
+import React from "react";
+import { FireCMSPlugin, useAuthController, useNavigationController, User } from "@firecms/core";
+import { ConfigControllerProvider } from "./ConfigControllerProvider";
+import { CollectionEditorPermissionsBuilder } from "./types/config_permissions";
+import { EditorCollectionAction } from "./ui/EditorCollectionAction";
+import { HomePageEditorCollectionAction } from "./ui/HomePageEditorCollectionAction";
+import { PersistedCollection } from "./types/persisted_collection";
+import { CollectionInference } from "./types/collection_inference";
+import { CollectionsConfigController } from "./types/config_controller";
+import { CollectionViewHeaderAction } from "./ui/CollectionViewHeaderAction";
+import { PropertyAddColumnComponent } from "./ui/PropertyAddColumnComponent";
+import { NewCollectionButton } from "./ui/NewCollectionButton";
+import { AddIcon, Button, Paper, Typography } from "@firecms/ui";
+import { useCollectionEditorController } from "./useCollectionEditorController";
+import { EditorCollectionActionStart } from "./ui/EditorCollectionActionStart";
+import { NewCollectionCard } from "./ui/NewCollectionCard";
+
+export interface CollectionConfigControllerProps<EC extends PersistedCollection = PersistedCollection, UserType extends User = User> {
+
+    /**
+     * Firebase app where the configuration is saved.
+     */
+    collectionConfigController: CollectionsConfigController;
+
+    /**
+     * Define what actions can be performed on the configuration.
+     */
+    configPermissions?: CollectionEditorPermissionsBuilder<UserType, EC>;
+
+    /**
+     * The words you define here will not be allowed to be used as group
+     * names when creating collections.
+     * e.g. ["admin"]
+     */
+    reservedGroups?: string[];
+
+    extraView?: {
+        View: React.ComponentType<{
+            path: string
+        }>,
+        icon: React.ReactNode
+    };
+
+    getPathSuggestions?: (path?: string) => Promise<string[]>;
+
+    collectionInference?: CollectionInference;
+
+    getData?: (path: string, parentPaths: string[]) => Promise<object[]>;
+
+    getUser?: (uid: string) => UserType | null;
+
+    onAnalyticsEvent?: (event: string, params?: object) => void;
+
+    components?: {
+        /**
+         * Custom component to render the database field
+         */
+        DatabaseField?: React.ComponentType<{ databaseId?: string, onDatabaseIdUpdate: (databaseId:string) => void }>;
+    };
+
+}
+
+/**
+ * Use this hook to initialise the Collection Editor plugin.
+ * This is likely the only hook you will need to use.
+ * @param firebaseApp Firebase app where your project data lives.
+ * @param configPermissions
+ * @param reservedGroups
+ * @param extraView
+ * @param getData
+ * @param getUser
+ * @param collectionInference
+ */
+export function useCollectionEditorPlugin<EC extends PersistedCollection = PersistedCollection, UserType extends User = User>
+({
+     collectionConfigController,
+     configPermissions,
+     reservedGroups,
+     extraView,
+     getPathSuggestions,
+     getUser,
+     collectionInference,
+     getData,
+     onAnalyticsEvent,
+     components
+ }: CollectionConfigControllerProps<EC, UserType>): FireCMSPlugin<any, any, PersistedCollection> {
+
+    return {
+        key: "collection_editor",
+        loading: collectionConfigController.loading,
+        provider: {
+            Component: ConfigControllerProvider,
+            props: {
+                collectionConfigController,
+                configPermissions,
+                collectionInference,
+                reservedGroups,
+                extraView,
+                getPathSuggestions,
+                getUser,
+                getData,
+                onAnalyticsEvent,
+                components
+            }
+        },
+        homePage: {
+            additionalActions: <NewCollectionButton/>,
+            additionalChildrenStart: <IntroWidget/>,
+            // additionalChildrenEnd: <RootCollectionSuggestions introMode={introMode}/>,
+            CollectionActions: HomePageEditorCollectionAction,
+            AdditionalCards: NewCollectionCard,
+        },
+        collectionView: {
+            CollectionActionsStart: EditorCollectionActionStart,
+            CollectionActions: EditorCollectionAction,
+            HeaderAction: CollectionViewHeaderAction,
+            AddColumnComponent: PropertyAddColumnComponent
+        }
+    };
+}
+
+export function IntroWidget({}: {}) {
+
+    const navigation = useNavigationController();
+    if (!navigation.topLevelNavigation)
+        throw Error("Navigation not ready in FireCMSHomePage");
+
+    const authController = useAuthController();
+
+    const collectionEditorController = useCollectionEditorController();
+    const canCreateCollections = collectionEditorController.configPermissions
+        ? collectionEditorController.configPermissions({
+            user: authController.user,
+        }).createCollections
+        : true;
+
+    if (!navigation.initialised || (navigation.collections ?? []).length > 0) {
+        return null;
+    }
+
+    return (
+        <Paper
+            className={"my-4 px-4 py-6 flex flex-col  bg-white dark:bg-slate-800 gap-2"}>
+            <Typography variant={"subtitle2"} className={"uppercase"}>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.
+            </Typography>
+            {canCreateCollections && <Button
+                onClick={collectionEditorController && canCreateCollections
+                    ? () => collectionEditorController.createCollection({
+                        parentCollectionIds: [],
+                        redirect: true,
+                        sourceClick: "new_collection_card"
+                    })
+                    : undefined}>
+                <AddIcon/>Create your first collection
+            </Button>}
+            <Typography color={"secondary"}>
+                You can also define collections programmatically.
+            </Typography>
+        </Paper>
+    );
+}

package/src/useCollectionsConfigController.tsx

@@ -0,0 +1,9 @@
+import { useContext } from "react";
+import { CollectionsConfigController } from "./types/config_controller";
+import { ConfigControllerContext } from "./ConfigControllerProvider";
+
+/**
+ * Use this hook to access the configuration controller.
+ * You can use it to get the list of collections, and to save/delete collections.
+ */
+export const useCollectionsConfigController = (): CollectionsConfigController => useContext(ConfigControllerContext);

package/src/utils/arrays.ts

@@ -0,0 +1,3 @@
+export function toArray<T>(input?: T | T[]):T[] {
+    return Array.isArray(input) ? input : (input ? [input] : []);
+}

package/src/utils/collections.ts

@@ -0,0 +1,30 @@
+import {
+    EntityCollection,
+    joinCollectionLists,
+    makePropertiesEditable,
+    ModifyCollectionProps,
+    Properties
+} from "@firecms/core";
+import { PersistedCollection } from "../types/persisted_collection";
+
+/**
+ * Function in charge of merging collections defined in code with those stored in the backend.
+ */
+export const mergeCollections = (baseCollections: EntityCollection[],
+                                 backendCollections: PersistedCollection[],
+                                 modifyCollection?: (props: ModifyCollectionProps) => EntityCollection | void
+) => {
+
+    const markAsEditable = (c: PersistedCollection) => {
+        makePropertiesEditable(c.properties as Properties);
+        c.subcollections?.forEach(markAsEditable);
+    };
+    const storedCollections = backendCollections ?? [];
+    storedCollections.forEach(markAsEditable);
+
+    console.debug("Collections specified in code:", baseCollections);
+    console.debug("Collections stored in the backend", storedCollections);
+    const result = joinCollectionLists(baseCollections, storedCollections, [], modifyCollection);
+    console.debug("Collections after joining:", result);
+    return result;
+}

package/src/utils/entities.ts

@@ -0,0 +1,38 @@
+import { isPropertyBuilder, Properties, PropertiesOrBuilders, Property, PropertyOrBuilder } from "@firecms/core";
+
+export function editableProperty(property: PropertyOrBuilder | PropertyOrBuilder): boolean {
+    if (isPropertyBuilder(property))
+        return false;
+    if (isPropertyBuilder(property as PropertyOrBuilder))
+        return false;
+    else {
+        const eProperty = property as Property;
+        if (eProperty.dataType === "array" && typeof eProperty.of === "function")
+            return false;
+        else if (eProperty.dataType === "array" && Array.isArray(eProperty.of))
+            return false;
+        return Boolean(eProperty.editable);
+    }
+}
+
+export function removeNonEditableProperties(properties: PropertiesOrBuilders<any>): Properties {
+    return Object.entries(properties)
+        .filter(([_, property]) => editableProperty(property))
+        .map(([key, propertyOrBuilder]) => {
+            const property = propertyOrBuilder as Property;
+            if (!editableProperty(property)) {
+                return undefined;
+            } else if (property.dataType === "map" && property.properties) {
+                return {
+                    [key]: {
+                        ...property,
+                        properties: removeNonEditableProperties(property.properties as PropertiesOrBuilders)
+                    }
+                };
+            } else {
+                return { [key]: property };
+            }
+        })
+        .filter((e) => Boolean(e))
+        .reduce((a, b) => ({ ...a, ...b }), {}) as Properties;
+}

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/dist/components/collection_editor/PropertySelectItem.d.ts

@@ -1,8 +0,0 @@
-import { FieldConfig } from "@firecms/core";
-export interface PropertySelectItemProps {
-    value: string;
-    optionDisabled: boolean;
-    widget: FieldConfig;
-    existing: boolean;
-}
-export declare function PropertySelectItem({ value, optionDisabled, widget, existing }: PropertySelectItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/collection_editor/SelectIcons.d.ts

@@ -1,6 +0,0 @@
-interface SearchIconsProps {
-    selectedIcon?: string;
-    onIconSelected: (icon: string) => void;
-}
-export declare function SearchIcons({ selectedIcon, onIconSelected }: SearchIconsProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/collection_editor/import/CollectionEditorImportMapping.d.ts

@@ -1,4 +0,0 @@
-import { ImportConfig } from "@firecms/data_import";
-export declare function CollectionEditorImportMapping({ importConfig }: {
-    importConfig: ImportConfig;
-}): import("react/jsx-runtime").JSX.Element;

package/dist/components/collection_editor/properties/FieldHelperView.d.ts

@@ -1,4 +0,0 @@
-export declare function FieldHelperView({ error, children }: {
-    error?: boolean;
-    children?: React.ReactNode;
-}): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/collection_editor/templates/blog_template.d.ts

@@ -1,10 +0,0 @@
-export declare const blogCollectionTemplate: import("@firecms/core").EntityCollection<{
-    name: string;
-    header_image: string;
-    content: any[];
-    created_on: unknown;
-    status: unknown;
-    publish_date: unknown;
-    reviewed: unknown;
-    tags: unknown;
-}, string, import("@firecms/core").User>;

package/dist/components/collection_editor/templates/products_template.d.ts

@@ -1,12 +0,0 @@
-export declare const productsCollectionTemplate: import("@firecms/core").EntityCollection<{
-    name: unknown;
-    brand: unknown;
-    description: unknown;
-    main_image: unknown;
-    available: unknown;
-    price: unknown;
-    images: unknown;
-    related_products: unknown;
-    metadata: unknown;
-    added_on: unknown;
-}, string, import("@firecms/core").User>;

package/dist/components/collection_editor/templates/users_template.d.ts

@@ -1,7 +0,0 @@
-export declare const usersCollectionTemplate: import("@firecms/core").EntityCollection<{
-    displayName: unknown;
-    email: unknown;
-    emailVerified: unknown;
-    phone: unknown;
-    photoURL: unknown;
-}, string, import("@firecms/core").User>;

package/dist/components/collection_editor/utils/supported_fields.d.ts

@@ -1,3 +0,0 @@
-import { FieldConfigId } from "@firecms/core";
-export declare const supportedFieldsIds: FieldConfigId[];
-export declare const supportedFields: [string, import("@firecms/core").FieldConfig<any>][];

package/dist/components/collection_editor/utils/update_property_for_widget.d.ts

@@ -1,3 +0,0 @@
-import { FieldConfigId } from "@firecms/core";
-import { EditableProperty } from "../../../types/editable_properties";
-export declare function updatePropertyFromWidget(propertyData: any, selectedWidgetId: FieldConfigId | undefined): EditableProperty;

package/dist/types/editable_properties.d.ts

@@ -1,10 +0,0 @@
-import { CMSType, Property, PropertyBuilderProps, ResolvedProperty } from "@firecms/core";
-export type EditablePropertyOrBuilder = EditableProperty | EditablePropertyBuilder;
-export type EditableProperty = Property & {
-    editable: boolean;
-};
-export type EditablePropertyBuilder<T extends CMSType = any, M extends Record<string, any> = any> = ({ values, previousValues, propertyValue, path, entityId }: PropertyBuilderProps<M>) => EditableProperty | null;
-export type EditablePropertiesOrBuilders<M extends Record<string, any> = Record<string, any>> = {
-    [k in keyof M]: EditablePropertyOrBuilder;
-};
-export declare function isEditablePropertyBuilder<T extends CMSType, M extends Record<string, any>>(propertyOrBuilder?: EditablePropertyOrBuilder | ResolvedProperty<T>): propertyOrBuilder is EditablePropertyBuilder;

package/dist/utils/icons.d.ts

@@ -1,2 +0,0 @@
-import Index from "flexsearch";
-export declare const searchIndex: Index;