@rebasepro/admin 0.0.1-canary.09e5ec5

package/src/collection_editor/ui/collection_editor/templates/pages_template.ts

@@ -0,0 +1,183 @@
+import { EntityCollection } from "@rebasepro/types";
+
+export const pagesCollectionTemplate = {
+    slug: "pages",
+    table: "pages",
+    name: "Pages",
+    singularName: "Page",
+    icon: "File",
+    description: "List of website pages that can be edited here",
+    properties: {
+        title: {
+            type: "string",
+            name: "Page Title",
+            validation: { required: true }
+        },
+        slug: {
+            type: "string",
+            name: "URL Slug",
+            validation: {
+                required: true,
+                unique: true,
+                matches: "^[a-z0-9]+(?:-[a-z0-9]+)*$",
+                matchesMessage: "Must be lowercase, alphanumeric, and hyphenated"
+            }
+        },
+        hero_section: {
+            type: "map",
+            name: "Hero Section",
+            properties: {
+                headline: {
+                    type: "string",
+                    name: "Headline",
+                    validation: { required: true }
+                },
+                subhead: {
+                    type: "string",
+                    name: "Subheadline"
+                },
+                background_image: {
+                    type: "string",
+                    name: "Background Image",
+                    storage: {
+                        storagePath: "page_hero/images",
+                        acceptedFiles: ["image/*"]
+                    }
+                },
+                call_to_action: {
+                    type: "string",
+                    name: "Call to Action"
+                },
+                call_to_action_link: {
+                    type: "string",
+                    name: "CTA Link",
+                    url: true
+                }
+            }
+        },
+        content: {
+            type: "array",
+            name: "Content",
+            oneOf: {
+                properties: {
+                    section: {
+                        type: "map",
+                        name: "Section",
+                        properties: {
+                            title: {
+                                type: "string",
+                                name: "Section Title",
+                                validation: { required: true }
+                            },
+                            content: {
+                                type: "string",
+                                name: "Section Content",
+                                markdown: true
+                            },
+                            image: {
+                                type: "string",
+                                name: "Section Image",
+                                storage: {
+                                    storagePath: "page_sections/images",
+                                    acceptedFiles: ["image/*"]
+                                }
+                            },
+                            link: {
+                                type: "string",
+                                name: "Section Link",
+                                url: true
+                            }
+                        }
+                    },
+                    image: {
+                        type: "string",
+                        name: "Image",
+                        storage: {
+                            storagePath: "page_sections/images",
+                            acceptedFiles: ["image/*"]
+                        }
+                    },
+                    slider: {
+                        type: "array",
+                        name: "Slider",
+                        of: {
+                            type: "map",
+                            properties: {
+                                title: {
+                                    type: "string",
+                                    name: "Title",
+                                    validation: { required: true }
+                                },
+                                image: {
+                                    type: "string",
+                                    storage: {
+                                        storagePath: "page_sections/images",
+                                        acceptedFiles: ["image/*"]
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        },
+        sidebar: {
+            type: "map",
+            name: "Sidebar",
+            properties: {
+                title: {
+                    type: "string",
+                    name: "Sidebar Title",
+                    validation: { required: false }
+                },
+                content: {
+                    type: "string",
+                    name: "Sidebar Content",
+                    markdown: true
+                }
+            }
+        },
+        seo_metadata: {
+            type: "map",
+            name: "SEO Metadata",
+            properties: {
+                meta_title: {
+                    type: "string",
+                    name: "Meta Title"
+                },
+                meta_description: {
+                    type: "string",
+                    name: "Meta Description"
+                },
+                focus_keywords: {
+                    type: "array",
+                    name: "Focus Keywords",
+                    of: {
+                        type: "string"
+                    }
+                }
+            }
+        },
+        footer_override: {
+            type: "string",
+            name: "Footer Override",
+            markdown: true
+        },
+        publish_date: {
+            type: "date",
+            name: "Publish Date",
+            validation: { required: true }
+        },
+        last_updated: {
+            type: "date",
+            name: "Last Updated",
+            autoValue: "on_update"
+        },
+        is_published: {
+            type: "boolean",
+            name: "Is Published",
+            columnWidth: 100,
+            description: "Should this page be live on the site?"
+        }
+    }
+} as unknown as EntityCollection;

package/src/collection_editor/ui/collection_editor/templates/products_template.ts

@@ -0,0 +1,88 @@
+import { EntityCollection } from "@rebasepro/types";
+
+export const productsCollectionTemplate = {
+    slug: "products",
+    table: "products",
+    name: "Products",
+    singularName: "Product",
+    icon: "ShoppingCart",
+    description: "List of the products currently sold in your shop",
+    properties: {
+        name: {
+            type: "string",
+            name: "Name",
+            description: "Name of this product",
+            validation: {
+                required: true
+            }
+        },
+        brand: {
+            type: "string",
+            name: "Brand",
+            validation: {
+                required: true
+            }
+        },
+        description: {
+            type: "string",
+            name: "Description",
+            description: "Description of this product, supports markdown",
+            markdown: true
+        },
+        main_image: {
+            type: "string",
+            name: "Image",
+            storage: {
+                storagePath: "images",
+                acceptedFiles: ["image/*"]
+            },
+            description: "Upload field for images"
+        },
+        available: {
+            type: "boolean",
+            name: "Available",
+            columnWidth: 100,
+            description: "Is this product available in the website"
+        },
+        price: {
+            type: "number",
+            name: "Price",
+            validation: {
+                requiredMessage: "You must set a positive price",
+                min: 0
+            }
+        },
+        images: {
+            type: "array",
+            name: "Images",
+            hideFromCollection: true,
+            of: {
+                type: "string",
+                storage: {
+                    storagePath: "images",
+                    acceptedFiles: ["image/*"]
+                }
+            }
+        },
+        related_products: {
+            type: "array",
+            name: "Related products",
+            description: "Products related to this one",
+            of: {
+                type: "reference",
+                path: "products"
+            }
+        },
+        metadata: {
+            name: "Metadata",
+            description: "This is an example of a map property",
+            type: "map",
+            keyValue: true
+        },
+        added_on: {
+            type: "date",
+            name: "Added on",
+            autoValue: "on_create"
+        }
+    }
+} as unknown as EntityCollection;

package/src/collection_editor/ui/collection_editor/templates/users_template.ts

@@ -0,0 +1,42 @@
+import { EntityCollection } from "@rebasepro/types";
+
+export const usersCollectionTemplate = {
+    slug: "users",
+    table: "users",
+    name: "Users",
+    singularName: "User",
+    description: "Registered users in the app/web",
+    icon: "User",
+    properties: {
+        displayName: {
+            name: "Display name",
+            type: "string"
+        },
+        email: {
+            name: "Email",
+            type: "string",
+            email: true
+        },
+        emailVerified: {
+            name: "Email verified",
+            type: "boolean"
+        },
+        phone: {
+            name: "Phone",
+            type: "string"
+        },
+        favourite_products: {
+            name: "Favourite products",
+            type: "array",
+            of: {
+                type: "reference",
+                path: "products"
+            }
+        },
+        photoURL: {
+            name: "Photo URL",
+            type: "string",
+            url: "image"
+        }
+    }
+} as unknown as EntityCollection;

package/src/collection_editor/ui/collection_editor/util.ts

@@ -0,0 +1,28 @@
+export function idToPropertiesPath(id: string): string {
+    return "properties." + id.replaceAll(".", ".properties.");
+}
+
+export function namespaceToPropertiesPath(namespace?: string): string {
+    return namespace
+        ? "properties." + namespace.replaceAll(".", ".properties.") + ".properties"
+        : "properties";
+}
+
+export function namespaceToPropertiesOrderPath(namespace?: string): string {
+    return namespace
+        ? "properties." + namespace.replaceAll(".", ".properties.") + ".propertiesOrder"
+        : "propertiesOrder";
+}
+
+export function getFullId(propertyKey: string, propertyNamespace?: string): string {
+    return propertyNamespace
+        ? `${propertyNamespace}.${propertyKey}`
+        : propertyKey;
+}
+
+export function getFullIdPath(propertyKey: string, propertyNamespace?: string): string {
+    const keyWithNamespace = propertyNamespace
+        ? `${propertyNamespace}.${propertyKey}`
+        : propertyKey;
+    return idToPropertiesPath(keyWithNamespace);
+}

package/src/collection_editor/ui/collection_editor/utils/strings.ts

@@ -0,0 +1 @@
+export { camelCase } from "@rebasepro/utils";

package/src/collection_editor/ui/collection_editor/utils/supported_fields.tsx

@@ -0,0 +1,34 @@
+import { DEFAULT_FIELD_CONFIGS } from "../../../../components/field_configs";
+import { PropertyConfigId, PropertyConfig } from "@rebasepro/types";
+
+export const supportedFieldsIds: PropertyConfigId[] = [
+    "text_field",
+    "multiline",
+    "markdown",
+    "url",
+    "email",
+    "user_select",
+    "select",
+    "multi_select",
+    "number_input",
+    "number_select",
+    "multi_number_select",
+    "file_upload",
+    "multi_file_upload",
+    "reference",
+    "reference_as_string",
+    "multi_references",
+    "relation",
+    "switch",
+    "date_time",
+    "group",
+    "key_value",
+    "repeat",
+    "block"
+];
+
+export const supportedFields: Record<string, PropertyConfig> = Object.entries(DEFAULT_FIELD_CONFIGS)
+    .filter(([id]) => supportedFieldsIds.includes(id as PropertyConfigId))
+    .map(([id, config]) => ({ [id]: config }))
+    .reduce((a, b) => ({ ...a,
+...b }), {});

package/src/collection_editor/ui/collection_editor/utils/update_property_for_widget.ts

@@ -0,0 +1,281 @@
+import { ArrayProperty, BooleanProperty, DateProperty, MapProperty, NumberProperty, Property, PropertyConfig, StringProperty } from "@rebasepro/types";
+import { mergeDeep } from "@rebasepro/utils";
+
+
+export function updatePropertyFromWidget(propertyData: any,
+    selectedWidgetId: string | undefined,
+    propertyConfigs: Record<string, PropertyConfig>): Property {
+
+    let updatedProperty;
+    if (selectedWidgetId === "text_field") {
+        updatedProperty = mergeDeep(
+            propertyData,
+            {
+                type: "string",
+                propertyConfig: "text_field",
+                storage: undefined,
+                multiline: undefined,
+                markdown: undefined,
+                email: undefined,
+                url: undefined,
+                enum: undefined,
+                userSelect: undefined
+            } as StringProperty
+        );
+    } else if (selectedWidgetId === "user_select") {
+        updatedProperty = mergeDeep(
+            propertyData,
+            {
+                type: "string",
+                propertyConfig: "user_select",
+                storage: undefined,
+                multiline: undefined,
+                markdown: undefined,
+                email: undefined,
+                url: undefined,
+                enum: undefined,
+                userSelect: true
+            } as StringProperty
+        );
+    } else if (selectedWidgetId === "multiline") {
+        updatedProperty = mergeDeep(
+            propertyData,
+            {
+                type: "string",
+                propertyConfig: "multiline",
+                multiline: true,
+                storage: undefined,
+                markdown: undefined,
+                email: undefined,
+                url: undefined,
+                enum: undefined,
+                userSelect: undefined
+            } as StringProperty
+        );
+    } else if (selectedWidgetId === "markdown") {
+        updatedProperty = mergeDeep(
+            propertyData,
+            {
+                type: "string",
+                propertyConfig: "markdown",
+                storage: undefined,
+                multiline: undefined,
+                markdown: true,
+                email: undefined,
+                url: undefined,
+                userSelect: undefined
+            } as StringProperty
+        );
+    } else if (selectedWidgetId === "url") {
+        updatedProperty = mergeDeep(
+            propertyData,
+            {
+                type: "string",
+                propertyConfig: "url",
+                storage: undefined,
+                multiline: undefined,
+                markdown: undefined,
+                email: undefined,
+                url: true,
+                enum: undefined,
+                userSelect: undefined
+            } as StringProperty
+        );
+    } else if (selectedWidgetId === "email") {
+        updatedProperty = mergeDeep(
+            propertyData,
+            {
+                type: "string",
+                propertyConfig: "email",
+                storage: undefined,
+                multiline: undefined,
+                markdown: undefined,
+                email: true,
+                url: undefined,
+                enum: undefined,
+                userSelect: undefined
+            } as StringProperty
+        );
+    } else if (selectedWidgetId === "select") {
+        updatedProperty = mergeDeep(
+            propertyData,
+            {
+                type: "string",
+                propertyConfig: "select",
+                storage: undefined,
+                multiline: undefined,
+                markdown: undefined,
+                email: undefined,
+                url: undefined,
+                enum: propertyData.enum ?? [],
+                userSelect: undefined
+            } as StringProperty
+        );
+    } else if (selectedWidgetId === "multi_select") {
+        updatedProperty = mergeDeep(
+            propertyData,
+            {
+                type: "array",
+                propertyConfig: "multi_select",
+                of: {
+                    type: "string",
+                    enum: propertyData.of?.enum ?? []
+                }
+            } as ArrayProperty
+        );
+    } else if (selectedWidgetId === "number_input") {
+        updatedProperty = mergeDeep(
+            propertyData,
+            {
+                type: "number",
+                propertyConfig: "number_input",
+                enum: undefined
+            } as NumberProperty
+        );
+    } else if (selectedWidgetId === "number_select") {
+        updatedProperty = mergeDeep(
+            propertyData,
+            {
+                type: "number",
+                propertyConfig: "number_select",
+                enum: propertyData.enum ?? []
+            } as NumberProperty
+        );
+    } else if (selectedWidgetId === "multi_number_select") {
+        updatedProperty = mergeDeep(
+            propertyData,
+            {
+                type: "array",
+                propertyConfig: "multi_number_select",
+                of: {
+                    type: "number",
+                    enum: propertyData.of?.enum ?? []
+                }
+            } as ArrayProperty
+        );
+    } else if (selectedWidgetId === "file_upload") {
+        updatedProperty = mergeDeep(
+            propertyData,
+            {
+                type: "string",
+                propertyConfig: "file_upload",
+                storage: {
+                    storagePath: "/"
+                }
+            } as StringProperty
+        );
+    } else if (selectedWidgetId === "multi_file_upload") {
+        updatedProperty = mergeDeep(
+            propertyData,
+            {
+                type: "array",
+                propertyConfig: "multi_file_upload",
+                of: {
+                    type: "string",
+                    storage: propertyData.of?.storage ?? {
+                        storagePath: "/"
+                    }
+                }
+            } as ArrayProperty
+        );
+    } else if (selectedWidgetId === "group") {
+        updatedProperty = mergeDeep(
+            propertyData,
+            {
+                type: "map",
+                propertyConfig: "group",
+                keyValue: false,
+                properties: propertyData.properties ?? {}
+            } as MapProperty
+        );
+    } else if (selectedWidgetId === "key_value") {
+        updatedProperty = mergeDeep(
+            propertyData,
+            {
+                type: "map",
+                propertyConfig: "key_value",
+                keyValue: true,
+                properties: undefined
+            } as MapProperty
+        );
+    } else if (selectedWidgetId === "reference") {
+        updatedProperty = mergeDeep(
+            propertyData,
+            {
+                type: "reference",
+                propertyConfig: "reference"
+            } as Property
+        );
+    } else if (selectedWidgetId === "reference_as_string") {
+        updatedProperty = mergeDeep(
+            propertyData,
+            {
+                type: "string",
+                propertyConfig: "reference_as_string"
+            } as Property
+        );
+    } else if (selectedWidgetId === "multi_references") {
+        updatedProperty = mergeDeep(
+            propertyData,
+            {
+                type: "array",
+                propertyConfig: "multi_references",
+                of: {
+                    type: "reference"
+                }
+            } as ArrayProperty
+        );
+    } else if (selectedWidgetId === "switch") {
+        updatedProperty = mergeDeep(
+            propertyData,
+            {
+                type: "boolean",
+                propertyConfig: "switch"
+            } as BooleanProperty
+        );
+    } else if (selectedWidgetId === "date_time") {
+        updatedProperty = mergeDeep(
+            propertyData,
+            {
+                type: "date",
+                propertyConfig: "date_time",
+                mode: "date_time"
+            } as DateProperty
+        );
+    } else if (selectedWidgetId === "relation") {
+        updatedProperty = mergeDeep(
+            propertyData,
+            {
+                type: "relation",
+                propertyConfig: "relation",
+                relationName: propertyData.relationName ?? ""
+            } as Property
+        );
+    } else if (selectedWidgetId === "repeat") {
+        updatedProperty = mergeDeep(
+            propertyData,
+            {
+                type: "array",
+                propertyConfig: "repeat"
+            } as ArrayProperty
+        );
+    } else if (selectedWidgetId === "block") {
+        updatedProperty = mergeDeep(
+            propertyData,
+            {
+                type: "array",
+                propertyConfig: "block",
+                oneOf: {
+                    properties: {}
+                }
+            } as ArrayProperty
+        );
+    } else if (selectedWidgetId && propertyConfigs[selectedWidgetId]) {
+        updatedProperty = {
+            ...propertyConfigs[selectedWidgetId].property,
+            propertyConfig: selectedWidgetId
+        };
+    }
+
+    return updatedProperty;
+}

package/src/collection_editor/useCollectionEditorController.tsx

@@ -0,0 +1,9 @@
+import { useContext } from "react";
+import { CollectionEditorController } from "./types/collection_editor_controller";
+import { CollectionEditorContext } from "./ConfigControllerProvider";
+
+/**
+ * Hook to access the collection editor controller.
+ * The methods in this controller can be used to open the collection editor dialog.
+ */
+export const useCollectionEditorController = (): CollectionEditorController => useContext(CollectionEditorContext);

package/src/collection_editor/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);