@firecms/core 3.0.0-alpha.7 → 3.0.0-alpha.70

package/src/core/field_configs.tsx

@@ -0,0 +1,400 @@
+import React from "react";
+
+import { ArrayProperty, FieldProps, Property, PropertyConfig, ResolvedProperty } from "../types";
+import {
+    ArrayCustomShapedFieldBinding,
+    ArrayOfReferencesFieldBinding,
+    BlockFieldBinding,
+    DateTimeFieldBinding,
+    KeyValueFieldBinding,
+    MapFieldBinding,
+    MarkdownFieldBinding,
+    MultiSelectBinding,
+    ReferenceFieldBinding,
+    RepeatFieldBinding,
+    SelectFieldBinding,
+    StorageUploadFieldBinding,
+    SwitchFieldBinding,
+    TextFieldBinding
+} from "../form";
+import { isPropertyBuilder, mergeDeep } from "../util";
+
+import {
+    AddLinkIcon,
+    BallotIcon,
+    DriveFolderUploadIcon,
+    EmailIcon,
+    FlagIcon,
+    FormatListNumberedIcon,
+    FormatQuoteIcon,
+    HttpIcon,
+    LinkIcon,
+    ListAltIcon,
+    ListIcon,
+    NumbersIcon,
+    RepeatIcon,
+    ScheduleIcon,
+    ShortTextIcon,
+    SubjectIcon,
+    UploadFileIcon,
+    ViewStreamIcon
+} from "@firecms/ui";
+
+export function isDefaultFieldConfigId(id: string) {
+    return Object.keys(DEFAULT_FIELD_CONFIGS).includes(id);
+}
+
+export const DEFAULT_FIELD_CONFIGS: Record<string, PropertyConfig<any>> = {
+    text_field: {
+        key: "text_field",
+        name: "Text field",
+        description: "Simple short text",
+        Icon: ShortTextIcon,
+        color: "#2d7ff9",
+        property: {
+            dataType: "string",
+            Field: TextFieldBinding
+        }
+    },
+    multiline: {
+        key: "multiline",
+        name: "Multiline",
+        description: "Text with multiple lines",
+        Icon: SubjectIcon,
+        color: "#2d7ff9",
+        property: {
+            dataType: "string",
+            multiline: true,
+            Field: TextFieldBinding
+        }
+    },
+    markdown: {
+        key: "markdown",
+        name: "Markdown",
+        description: "Text with advanced markdown syntax",
+        Icon: FormatQuoteIcon,
+        color: "#2d7ff9",
+        property: {
+            dataType: "string",
+            markdown: true,
+            Field: MarkdownFieldBinding
+        }
+    },
+    url: {
+        key: "url",
+        name: "Url",
+        description: "Text with URL validation",
+        Icon: HttpIcon,
+        color: "#154fb3",
+        property: {
+            dataType: "string",
+            url: true,
+            Field: TextFieldBinding
+        }
+    },
+    email: {
+        key: "email",
+        name: "Email",
+        description: "Text with email validation",
+        Icon: EmailIcon,
+        color: "#154fb3",
+        property: {
+            dataType: "string",
+            email: true,
+            Field: TextFieldBinding
+        }
+    },
+    select: {
+        key: "select",
+        name: "Select/enum",
+        description: "Select one text value from within an enumeration",
+        Icon: ListIcon,
+        color: "#4223c9",
+        property: {
+            dataType: "string",
+            enumValues: [],
+            Field: SelectFieldBinding
+        }
+    },
+    multi_select: {
+        key: "multi_select",
+        name: "Multi select",
+        description: "Select multiple text values from within an enumeration",
+        Icon: ListAltIcon,
+        color: "#4223c9",
+        property: {
+            dataType: "array",
+            of: {
+                dataType: "string",
+                enumValues: [],
+            },
+            Field: MultiSelectBinding
+        }
+    },
+    number_input: {
+        key: "number_input",
+        name: "Number input",
+        description: "Simple number field with validation",
+        Icon: NumbersIcon,
+        color: "#bec920",
+        property: {
+            dataType: "number",
+            Field: TextFieldBinding
+        }
+    },
+    number_select: {
+        key: "number_select",
+        name: "Number select",
+        description: "Select a number value from within an enumeration",
+        Icon: FormatListNumberedIcon,
+        color: "#bec920",
+        property: {
+            dataType: "number",
+            enumValues: [],
+            Field: SelectFieldBinding
+        }
+    },
+    multi_number_select: {
+        key: "multi_number_select",
+        name: "Multiple number select",
+        description: "Select multiple number values from within an enumeration",
+        Icon: FormatListNumberedIcon,
+        color: "#bec920",
+        property: {
+            dataType: "array",
+            of: {
+                dataType: "number",
+                enumValues: [],
+            },
+            Field: MultiSelectBinding
+        }
+    },
+    file_upload: {
+        key: "file_upload",
+        name: "File upload",
+        description: "Input for uploading single files",
+        Icon: UploadFileIcon,
+        color: "#f92d9a",
+        property: {
+            dataType: "string",
+            storage: {
+                storagePath: "{path}"
+            },
+            Field: StorageUploadFieldBinding as React.ComponentType<FieldProps<string>>
+        }
+    },
+    multi_file_upload: {
+        key: "multi_file_upload",
+        name: "Multiple file upload",
+        description: "Input for uploading multiple files",
+        Icon: DriveFolderUploadIcon,
+        color: "#f92d9a",
+        property: {
+            dataType: "array",
+            of: {
+                dataType: "string",
+                storage: {
+                    storagePath: "{path}"
+                }
+            },
+            Field: StorageUploadFieldBinding
+        }
+    },
+    reference: {
+        key: "reference",
+        name: "Reference",
+        description: "The value refers to a different collection",
+        Icon: LinkIcon,
+        color: "#ff0042",
+        property: {
+            dataType: "reference",
+            Field: ReferenceFieldBinding
+        }
+    },
+    multi_references: {
+        key: "multi_references",
+        name: "Multiple references",
+        description: "Multiple values that refer to a different collection",
+        Icon: AddLinkIcon,
+        color: "#ff0042",
+        property: {
+            dataType: "array",
+            of: {
+                dataType: "reference",
+            },
+            Field: ArrayOfReferencesFieldBinding
+        }
+    },
+    switch: {
+        key: "switch",
+        name: "Switch",
+        description: "Boolean true or false field (or yes or no, 0 or 1...)",
+        Icon: FlagIcon,
+        color: "#20d9d2",
+        property: {
+            dataType: "boolean",
+            Field: SwitchFieldBinding
+        }
+    },
+    date_time: {
+        key: "date_time",
+        name: "Date/time",
+        description: "A date time select field",
+        Icon: ScheduleIcon,
+        color: "#8b46ff",
+        property: {
+            dataType: "date",
+            Field: DateTimeFieldBinding
+        }
+    },
+    group: {
+        key: "group",
+        name: "Group",
+        description: "Group of multiple fields",
+        Icon: BallotIcon,
+        color: "#ff9408",
+        property: {
+            dataType: "map",
+            properties: {},
+            Field: MapFieldBinding
+        }
+    },
+    key_value: {
+        key: "key_value",
+        name: "Key-value",
+        description: "Flexible field that allows the user to add multiple key-value pairs",
+        Icon: BallotIcon,
+        color: "#ff9408",
+        property: {
+            dataType: "map",
+            keyValue: true,
+            Field: KeyValueFieldBinding
+        }
+    },
+    repeat: {
+        key: "repeat",
+        name: "Repeat/list",
+        description: "A field that gets repeated multiple times (e.g. multiple text fields)",
+        Icon: RepeatIcon,
+        color: "#ff9408",
+        property: {
+            dataType: "array",
+            of: {
+                dataType: "string",
+            },
+            Field: RepeatFieldBinding
+        }
+    },
+    custom_array: {
+        key: "custom_array",
+        name: "Custom array",
+        description: "A field that saved its value as an array of custom objects",
+        Icon: RepeatIcon,
+        color: "#ff9408",
+        property: {
+            dataType: "array",
+            of: [],
+            Field: ArrayCustomShapedFieldBinding
+        }
+    },
+    block: {
+        key: "block",
+        name: "Block",
+        description: "A complex field that allows the user to compose different fields together, with a key->value format",
+        Icon: ViewStreamIcon,
+        color: "#ff9408",
+        property: {
+            dataType: "array",
+            oneOf: {
+                properties: {},
+            },
+            Field: BlockFieldBinding
+        }
+    }
+};
+
+export function getDefaultFieldConfig(property: Property | ResolvedProperty): PropertyConfig | undefined {
+    const fieldId = getDefaultFieldId(property);
+    if (!fieldId) {
+        console.error("No field id found for property", property);
+        return undefined;
+    }
+    return DEFAULT_FIELD_CONFIGS[fieldId];
+}
+
+export function getFieldConfig(property: Property | ResolvedProperty, propertyConfigs: Record<string, PropertyConfig<any>>): PropertyConfig | undefined {
+    const fieldId = getFieldId(property);
+    const defaultFieldId = getDefaultFieldId(property);
+    if (!defaultFieldId) {
+        console.error("No field id found for property", property);
+        return undefined;
+    }
+    const defaultFieldConfig = DEFAULT_FIELD_CONFIGS[defaultFieldId];
+    const customField = fieldId ? propertyConfigs[fieldId] : undefined;
+    return mergeDeep(defaultFieldConfig ?? {}, customField ?? {});
+}
+
+export function getDefaultFieldId(property: Property | ResolvedProperty) {
+    if (property.dataType === "string") {
+        if (property.multiline) {
+            return "multiline";
+        } else if (property.markdown) {
+            return "markdown";
+        } else if (property.storage) {
+            return "file_upload";
+        } else if (property.url) {
+            return "url";
+        } else if (property.email) {
+            return "email";
+        } else if (property.enumValues) {
+            return "select";
+        } else {
+            return "text_field";
+        }
+    } else if (property.dataType === "number") {
+        if (property.enumValues) {
+            return "number_select";
+        }
+        return "number_input";
+    } else if (property.dataType === "map") {
+        if (property.keyValue)
+            return "key_value";
+        if (property.properties)
+            return "group";
+    } else if (property.dataType === "array") {
+        const of = (property as ArrayProperty).of;
+        const oneOf = (property as ArrayProperty).oneOf;
+        if (oneOf) {
+            return "block";
+        } else if (Array.isArray(of)) {
+            return "custom_array";
+        } else if (isPropertyBuilder(of)) {
+            return "repeat";
+        } else if (of?.dataType === "string" && of.enumValues) {
+            return "multi_select";
+        } else if (of?.dataType === "number" && of.enumValues) {
+            return "multi_number_select";
+        } else if (of?.dataType === "string" && of.storage) {
+            return "multi_file_upload";
+        } else if (of?.dataType === "reference") {
+            return "multi_references";
+        } else {
+            return "repeat";
+        }
+    } else if (property.dataType === "boolean") {
+        return "switch";
+    } else if (property.dataType === "date") {
+        return "date_time";
+    } else if (property.dataType === "reference") {
+        return "reference";
+    }
+
+    console.error("Unsupported field config mapping", property);
+    return undefined;
+}
+
+export function getFieldId(property: Property | ResolvedProperty): string | undefined {
+    if (property.propertyConfig)
+        return property.propertyConfig;
+    return getDefaultFieldId(property);
+}

package/src/core/index.tsx

@@ -0,0 +1,14 @@
+export * from "./FireCMS";
+
+export type { ScaffoldProps } from "./Scaffold";
+export { Scaffold } from "./Scaffold";
+
+export type { DrawerProps } from "./Drawer";
+export { Drawer, DrawerNavigationItem } from "./Drawer";
+
+export * from "./field_configs";
+
+export * from "./SideDialogs";
+export * from "./NavigationRoutes";
+export * from "./useBuildModeController";
+export * from "./useBuildLocalConfigurationPersistence";

package/src/core/useBuildLocalConfigurationPersistence.tsx

@@ -0,0 +1,67 @@
+import { useCallback, useEffect, useState } from "react";
+import { PartialEntityCollection, UserConfigurationPersistence } from "../types";
+import { mergeDeep, stripCollectionPath } from "../util";
+
+export function useBuildLocalConfigurationPersistence(): UserConfigurationPersistence {
+
+    const [configCache, setConfigCache] = useState<Record<string, PartialEntityCollection>>({});
+
+    const getCollectionFromStorage = useCallback((storageKey: string) => {
+        const item = localStorage.getItem(storageKey);
+        return item ? JSON.parse(item) : {};
+    }, []);
+
+    const getCollectionConfig = useCallback(<M extends Record<string, any>>(path: string): PartialEntityCollection<M> => {
+        const storageKey = `collection_config::${stripCollectionPath(path)}`;
+        if (configCache[storageKey]) {
+            return configCache[storageKey] as PartialEntityCollection<M>;
+        }
+        return getCollectionFromStorage(storageKey);
+    }, [configCache, getCollectionFromStorage]);
+
+    const onCollectionModified = useCallback(<M extends Record<string, any>>(path: string, data: PartialEntityCollection<M>) => {
+        const storageKey = `collection_config::${stripCollectionPath(path)}`;
+        localStorage.setItem(storageKey, JSON.stringify(data));
+        setConfigCache((currentCache) => {
+            const cachedConfig = currentCache[storageKey];
+            const newConfig = mergeDeep(cachedConfig ?? getCollectionFromStorage(path), data);
+            return (mergeDeep(currentCache, newConfig));
+        });
+    }, [getCollectionFromStorage]);
+
+    const [recentlyVisitedPaths, _setRecentlyVisitedPaths] = useState<string[]>([]);
+    const [favouritePaths, _setFavouritePaths] = useState<string[]>([]);
+    const [collapsedGroups, _setCollapsedGroups] = useState<string[]>([]);
+
+    useEffect(() => {
+        _setRecentlyVisitedPaths(localStorage.getItem("recently_visited_paths") ? JSON.parse(localStorage.getItem("recently_visited_paths")!) : []);
+        _setFavouritePaths(localStorage.getItem("favourite_paths") ? JSON.parse(localStorage.getItem("favourite_paths")!) : []);
+        _setCollapsedGroups(localStorage.getItem("collapsed_groups") ? JSON.parse(localStorage.getItem("collapsed_groups")!) : []);
+    }, []);
+
+    const setRecentlyVisitedPaths = useCallback((paths: string[]) => {
+        localStorage.setItem("recently_visited_paths", JSON.stringify(paths));
+        _setRecentlyVisitedPaths(paths);
+    }, []);
+
+    const setFavouritePaths = useCallback((paths: string[]) => {
+        localStorage.setItem("favourite_paths", JSON.stringify(paths));
+        _setFavouritePaths(paths);
+    }, []);
+
+    const setCollapsedGroups = useCallback((paths: string[]) => {
+        localStorage.setItem("collapsed_groups", JSON.stringify(paths));
+        _setCollapsedGroups(paths);
+    }, []);
+
+    return {
+        onCollectionModified,
+        getCollectionConfig,
+        recentlyVisitedPaths,
+        setRecentlyVisitedPaths,
+        favouritePaths,
+        setFavouritePaths,
+        collapsedGroups,
+        setCollapsedGroups
+    }
+}

package/src/core/useBuildModeController.tsx

@@ -0,0 +1,60 @@
+import { useCallback, useEffect, useState } from "react";
+
+import { ModeController } from "../hooks";
+
+/**
+ * Use this hook to build a color mode controller that determines
+ * the theme of the CMS
+ */
+export function useBuildModeController(): ModeController {
+
+    const prefersDarkModeQuery = typeof window !== "undefined" &&
+        window.matchMedia("(prefers-color-scheme: dark)");
+    const prefersDarkModeStorage: boolean | null = localStorage.getItem("prefers-dark-mode") != null ? localStorage.getItem("prefers-dark-mode") === "true" : null;
+    const prefersDarkMode = prefersDarkModeStorage ?? prefersDarkModeQuery;
+    const [mode, setMode] = useState<"light" | "dark">(prefersDarkMode ? "dark" : "light");
+
+    useEffect(() => {
+        setMode(prefersDarkMode ? "dark" : "light");
+        setDocumentMode(prefersDarkMode ? "dark" : "light");
+    }, [prefersDarkMode]);
+
+    // color-scheme: dark;
+    const setDarkMode = useCallback(() => {
+        setMode("dark");
+        setDocumentMode("dark");
+    }, [prefersDarkModeQuery]);
+
+    const setLightMode = useCallback(() => {
+        setMode("light");
+        setDocumentMode("light");
+    }, []);
+
+    const setDocumentMode = (mode: "light" | "dark") => {
+        document.body.style.setProperty("color-scheme", mode);
+        document.documentElement.dataset.theme = mode;
+    };
+
+    const toggleMode = useCallback(() => {
+
+        if (mode === "light") {
+            if (!prefersDarkModeQuery)
+                localStorage.setItem("prefers-dark-mode", "true");
+            else
+                localStorage.removeItem("prefers-dark-mode");
+            setDarkMode();
+        } else {
+            if (prefersDarkModeQuery)
+                localStorage.setItem("prefers-dark-mode", "false");
+            else
+                localStorage.removeItem("prefers-dark-mode");
+            setLightMode();
+        }
+    }, [mode, prefersDarkModeQuery]);
+
+    return {
+        mode,
+        setMode,
+        toggleMode
+    };
+}