@rebasepro/admin 0.0.1-canary.4f204c2

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

@@ -0,0 +1,93 @@
+import { Properties, Property } from "@rebasepro/types";
+import { isPropertyBuilder } from "@rebasepro/common";
+
+/**
+ * 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[] {
+    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.type === "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.type === "array" && property.of) {
+            const ofPropertyOrBuilder = property.of as unknown as Property;
+            // Skip if the array's 'of' is a PropertyBuilder
+            if (!isPropertyBuilder(ofPropertyOrBuilder)) {
+                const ofProperty = ofPropertyOrBuilder as Property;
+                if (ofProperty.type === "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.type === "map" && property.properties) {
+            const nestedPaths = getPropertyPaths(
+                property.properties as Properties,
+                key
+            );
+            grouped[key].push(...nestedPaths);
+        }
+    }
+
+    return grouped;
+}

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

@@ -0,0 +1,52 @@
+import React from "react";
+
+import { getIn, useFormex } from "@rebasepro/formex";
+import { DebouncedTextField } from "@rebasepro/ui";
+import { useTranslation } from "@rebasepro/core";
+import { GeneralPropertyValidation } from "./GeneralPropertyValidation";
+
+export function ArrayPropertyValidation({
+    max = true,
+    min = true,
+    disabled
+}: {
+    min?: boolean;
+    max?: boolean;
+    disabled: boolean;
+}) {
+
+    const {
+        values,
+        handleChange
+    } = useFormex();
+    const { t } = useTranslation();
+
+    const validationMin = "validation.min";
+    const validationMax = "validation.max";
+
+    return (
+        <div className={"grid grid-cols-12 gap-2"}>
+
+            <GeneralPropertyValidation disabled={disabled}/>
+
+            {min && <div className={"col-span-6"}>
+                <DebouncedTextField value={getIn(values, validationMin)}
+                    disabled={disabled}
+                    label={t("min_length")}
+                    name={validationMin}
+                    type="number"
+                    size="small"
+                    onChange={handleChange}/>
+            </div>}
+            {max && <div className={"col-span-6"}>
+                <DebouncedTextField value={getIn(values, validationMax)}
+                    disabled={disabled}
+                    label={t("max_length")}
+                    name={validationMax}
+                    type="number"
+                    size="small"
+                    onChange={handleChange}/>
+            </div>}
+        </div>
+    );
+}

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

@@ -0,0 +1,63 @@
+import React from "react";
+
+import { Field, FormexFieldProps, getIn, useFormex } from "@rebasepro/formex";
+import { DebouncedTextField } from "@rebasepro/ui";
+import { useTranslation } from "@rebasepro/core";
+import { SwitchControl } from "../../SwitchControl";
+
+export function GeneralPropertyValidation({ disabled }: {
+    required?: boolean;
+    disabled: boolean;
+}) {
+
+    const { values, handleChange } = useFormex();
+    const { t } = useTranslation();
+
+    const validationRequired = "validation.required";
+    const validationRequiredMessage = "validation.requiredMessage";
+    const validationUnique = "validation.unique";
+    const validationUniqueInArray = "validation.uniqueInArray";
+
+    return (
+        <>
+            <div className={"col-span-6"}>
+                <Field name={validationRequired}
+                    type="checkbox">
+                    {({ field, form }: FormexFieldProps) => {
+                        return <SwitchControl
+                            disabled={disabled}
+                            label={t("required")}
+                            tooltip={t("required_tooltip")}
+                            form={form}
+                            field={field}/>
+                    }}
+                </Field>
+            </div>
+
+            <div className={"col-span-6"}>
+
+                <Field name={validationUnique}
+                    type="checkbox">
+                    {({ field, form }: FormexFieldProps) => {
+                        return <SwitchControl
+                            disabled={disabled}
+                            label={t("unique")}
+                            tooltip={t("unique_tooltip")}
+                            form={form}
+                            field={field}/>
+                    }}
+                </Field>
+            </div>
+
+            {getIn(values, validationRequired) && <div className={"col-span-12"}>
+                <DebouncedTextField
+                    disabled={disabled}
+                    value={getIn(values, validationRequiredMessage)}
+                    label={t("required_message")}
+                    name={validationRequiredMessage}
+                    size="small"
+                    onChange={handleChange}/>
+            </div>}
+        </>
+    );
+}

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

@@ -0,0 +1,117 @@
+import React from "react";
+
+import { Field, FormexFieldProps, getIn, useFormex } from "@rebasepro/formex";
+import { DebouncedTextField } from "@rebasepro/ui";
+import { useTranslation } from "@rebasepro/core";
+import { GeneralPropertyValidation } from "./GeneralPropertyValidation";
+import { SwitchControl } from "../../SwitchControl";
+
+export function NumberPropertyValidation({ disabled }: {
+    disabled: boolean;
+}) {
+
+    const {
+        values,
+        handleChange
+    } = useFormex();
+    const { t } = useTranslation();
+
+    const validationMin = "validation.min";
+    const validationMax = "validation.max";
+    const validationLessThan = "validation.lessThan";
+    const validationMoreThan = "validation.moreThan";
+    const validationPositive = "validation.positive";
+    const validationNegative = "validation.negative";
+    const validationInteger = "validation.integer";
+
+    return (
+
+        <div className={"grid grid-cols-12 gap-2"}>
+            <GeneralPropertyValidation disabled={disabled}/>
+
+
+            <div className={"col-span-6"}>
+                <DebouncedTextField value={getIn(values, validationMin)}
+                    label={t("min_value")}
+                    name={validationMin}
+                    type="number"
+                    size="small"
+                    disabled={disabled}
+                    onChange={handleChange}/>
+            </div>
+
+            <div className={"col-span-6"}>
+                <DebouncedTextField value={getIn(values, validationMax)}
+                    label={t("max_value")}
+                    name={validationMax}
+                    type="number"
+                    size="small"
+
+                    disabled={disabled}
+                    onChange={handleChange}/>
+            </div>
+
+
+            <div className={"col-span-6"}>
+                <DebouncedTextField
+                    value={getIn(values, validationLessThan)}
+                    label={t("less_than")}
+                    name={validationLessThan}
+                    type="number"
+                    size="small"
+
+                    disabled={disabled}
+                    onChange={handleChange}/>
+            </div>
+
+            <div className={"col-span-6"}>
+                <DebouncedTextField
+                    value={getIn(values, validationMoreThan)}
+                    label={t("more_than")}
+                    name={validationMoreThan}
+                    type="number"
+                    size="small"
+
+                    disabled={disabled}
+                    onChange={handleChange}/>
+            </div>
+
+            <div className={"col-span-4"}>
+                <Field name={validationPositive}
+                    type="checkbox">
+                    {({ field, form }: FormexFieldProps) => {
+                        return <SwitchControl
+                            label={t("positive_value")}
+                            disabled={disabled}
+                            form={form}
+                            field={field}/>
+                    }}
+                </Field>
+            </div>
+            <div className={"col-span-4"}>
+                <Field name={validationNegative}
+                    type="checkbox">
+                    {({ field, form }: FormexFieldProps) => {
+                        return <SwitchControl
+                            label={t("negative_value")}
+                            disabled={disabled}
+                            form={form}
+                            field={field}/>
+                    }}
+                </Field>
+            </div>
+            <div className={"col-span-4"}>
+                <Field name={validationInteger}
+                    type="checkbox">
+                    {({ field, form }: FormexFieldProps) => {
+                        return <SwitchControl
+                            label={t("integer_value")}
+                            disabled={disabled}
+                            form={form}
+                            field={field}/>
+                    }}
+                </Field>
+            </div>
+        </div>
+    );
+}

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

@@ -0,0 +1,154 @@
+import { FieldCaption } from "../../../../_cms_internals";
+import React from "react";
+
+import { Field, FormexFieldProps, getIn, useFormex } from "@rebasepro/formex";
+;
+import { DebouncedTextField } from "@rebasepro/ui";
+import { useTranslation } from "@rebasepro/core";
+import { GeneralPropertyValidation } from "./GeneralPropertyValidation";
+import { SwitchControl } from "../../SwitchControl";
+import { serializeRegExp } from "@rebasepro/utils";
+
+export function StringPropertyValidation({
+    length,
+    lowercase,
+    matches,
+    max,
+    min,
+    trim,
+    uppercase,
+    disabled,
+    showErrors
+}: {
+    length?: boolean;
+    min?: boolean;
+    max?: boolean;
+    trim?: boolean;
+    matches?: boolean;
+    lowercase?: boolean;
+    uppercase?: boolean;
+    disabled: boolean;
+    showErrors: boolean;
+}) {
+
+    const {
+        values,
+        handleChange,
+        errors
+    } = useFormex();
+    const { t } = useTranslation();
+
+    const validationLength = "validation.length";
+    const validationMin = "validation.min";
+    const validationMax = "validation.max";
+    const validationTrim = "validation.trim";
+    const validationMatches = "validation.matches";
+    const validationLowercase = "validation.lowercase";
+    const validationUppercase = "validation.uppercase";
+
+    const matchesError = getIn(errors, validationMatches);
+
+    const matchesValue = getIn(values, validationMatches);
+    const matchesStringValue = typeof matchesValue === "string" ? matchesValue : serializeRegExp(matchesValue);
+    return (
+        <div className={"grid grid-cols-12 gap-2"}>
+
+            <GeneralPropertyValidation disabled={disabled}/>
+
+            <div className={"grid grid-cols-12 gap-2 col-span-12"}>
+
+                {lowercase && <div className={"col-span-4"}>
+                    <Field name={validationLowercase}
+                        type="checkbox">
+                        {({ field, form }: FormexFieldProps) => {
+                            return <SwitchControl
+                                label={t("lowercase")}
+                                disabled={disabled}
+                                form={form}
+                                field={field}/>
+                        }}
+                    </Field>
+                </div>}
+
+                {uppercase && <div className={"col-span-4"}>
+                    <Field name={validationUppercase}
+                        type="checkbox">
+                        {({ field, form }: FormexFieldProps) => {
+                            return <SwitchControl
+                                label={t("uppercase")}
+                                disabled={disabled}
+                                form={form}
+                                field={field}/>
+                        }}
+                    </Field>
+                </div>}
+
+                {trim && <div className={"col-span-4"}>
+                    <Field name={validationTrim}
+                        type="checkbox">
+                        {({ field, form }: FormexFieldProps) => {
+                            return <SwitchControl
+                                label={t("trim")}
+                                disabled={disabled}
+                                form={form}
+                                field={field}/>
+                        }}
+                    </Field>
+                </div>}
+
+            </div>
+
+            <div className={"grid grid-cols-12 gap-2 col-span-12"}>
+                {length && <div className={"col-span-4"}>
+                    <DebouncedTextField
+                        value={getIn(values, validationLength)}
+                        label={t("exact_length")}
+                        name={validationLength}
+                        type="number"
+                        size="small"
+
+                        disabled={disabled}
+                        onChange={handleChange}/>
+                </div>}
+
+                {min && <div className={"col-span-4"}>
+                    <DebouncedTextField value={getIn(values, validationMin)}
+                        label={t("min_length")}
+                        name={validationMin}
+                        type="number"
+                        size="small"
+
+                        disabled={disabled}
+                        onChange={handleChange}/>
+                </div>}
+
+                {max && <div className={"col-span-4"}>
+                    <DebouncedTextField value={getIn(values, validationMax)}
+                        label={t("max_length")}
+                        name={validationMax}
+                        type="number"
+                        size="small"
+
+                        disabled={disabled}
+                        onChange={handleChange}/>
+                </div>}
+
+            </div>
+
+            {matches && <div className={"col-span-12"}>
+                <Field name={validationMatches}
+                    as={DebouncedTextField}
+                    label={t("matches_regex")}
+                    size="small"
+                    disabled={disabled}
+                    value={matchesStringValue}
+                    error={Boolean(matchesError)}/>
+                <FieldCaption error={Boolean(matchesError)}>
+                    {matchesError ? t("not_valid_regexp") : t("regex_helper")}
+                </FieldCaption>
+            </div>}
+
+        </div>
+    );
+
+}

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

@@ -0,0 +1,29 @@
+import { PropsWithChildren } from "react";
+
+import { ExpandablePanel, Typography } from "@rebasepro/ui";
+import { CheckSquareIcon } from "lucide-react";
+
+export function ValidationPanel({
+    children
+}: { children?: React.ReactNode }) {
+
+    return (
+        <ExpandablePanel
+            initiallyExpanded={false}
+            asField={true}
+            innerClassName="p-4"
+            title={
+                <div className="flex flex-row text-surface-500 text-text-secondary dark:text-text-secondary-dark">
+                    <CheckSquareIcon/>
+                    <Typography variant={"subtitle2"}
+                        className="ml-4">
+                        Validation
+                    </Typography>
+                </div>
+            }>
+
+            {children}
+
+        </ExpandablePanel>
+    )
+}

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

@@ -0,0 +1,112 @@
+import { EntityCollection } from "@rebasepro/types";
+
+export const blogCollectionTemplate = {
+    slug: "blog",
+    table: "blog",
+    name: "Blog",
+    singularName: "Blog entry",
+    icon: "FileText",
+    description: "A collection of blog entries",
+    defaultSize: "l",
+    properties: {
+        name: {
+            name: "Name",
+            validation: { required: true },
+            type: "string"
+        },
+        header_image: {
+            name: "Header image",
+            type: "string",
+            storage: {
+                storagePath: "images",
+                acceptedFiles: ["image/*"],
+                metadata: {
+                    cacheControl: "max-age=1000000"
+                }
+            }
+        },
+        content: {
+            name: "Content",
+            description: "Content blocks for the blog entry",
+            validation: { required: true },
+            type: "array",
+            oneOf: {
+                typeField: "type",
+                valueField: "value",
+                properties: {
+                    text: {
+                        type: "string",
+                        name: "Text",
+                        markdown: true
+                    },
+                    quote: {
+                        type: "string",
+                        name: "Quote",
+                        multiline: true
+                    },
+                    images: {
+                        name: "Images",
+                        type: "array",
+                        of: {
+                            type: "string",
+                            storage: {
+                                storagePath: "images",
+                                acceptedFiles: ["image/*"],
+                                metadata: {
+                                    cacheControl: "max-age=1000000"
+                                }
+                            }
+                        },
+                        description: "This fields allows uploading multiple images at once and reordering"
+                    },
+                    products: {
+                        name: "Products",
+                        type: "array",
+                        of: {
+                            type: "reference",
+                            path: "products",
+                            previewProperties: ["name", "main_image"]
+                        }
+                    }
+                },
+                propertiesOrder: ["text", "quote", "images", "products"]
+            }
+        },
+        created_on: {
+            name: "Created on",
+            type: "date",
+            autoValue: "on_create"
+        },
+        status: {
+            name: "Status",
+            validation: { required: true },
+            type: "string",
+            enum: {
+                published: {
+                    id: "published",
+                    label: "Published"
+                },
+                draft: "Draft"
+            },
+            defaultValue: "draft"
+        },
+        publish_date: {
+            name: "Publish date",
+            type: "date",
+            clearable: true
+        },
+        reviewed: {
+            name: "Reviewed",
+            type: "boolean"
+        },
+        tags: {
+            name: "Tags",
+            description: "Example of generic array",
+            type: "array",
+            of: {
+                type: "string",
+                previewAsTag: true
+            }
+        }
+    }
+} as unknown as EntityCollection;