@firecms/collection_editor 3.0.0-alpha.17 → 3.0.0-alpha.18

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

@@ -0,0 +1,50 @@
+import React from "react";
+
+import { getIn, useFormikContext } from "formik";
+import { DebouncedTextField } from "@firecms/core";
+import { GeneralPropertyValidation } from "./GeneralPropertyValidation";
+
+export function ArrayPropertyValidation({
+                                            max = true,
+                                            min = true,
+                                            disabled
+                                        }: {
+    min?: boolean;
+    max?: boolean;
+    disabled: boolean;
+}) {
+
+    const {
+        values,
+        handleChange
+    } = useFormikContext();
+
+    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={"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={"Max length"}
+                                    name={validationMax}
+                                    type="number"
+                                    size="small"
+                                    onChange={handleChange}/>
+            </div>}
+        </div>
+    );
+}

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

@@ -0,0 +1,49 @@
+import React from "react";
+
+import { FastField, getIn, useFormikContext } from "formik";
+import { DebouncedTextField, SwitchControl } from "@firecms/core";
+
+export function GeneralPropertyValidation({ disabled }: {
+    required?: boolean;
+    disabled:boolean;
+}) {
+
+    const { values, handleChange } = useFormikContext();
+
+    const validationRequired = "validation.required";
+    const validationRequiredMessage = "validation.requiredMessage";
+    const validationUnique = "validation.unique";
+    const validationUniqueInArray = "validation.uniqueInArray";
+
+    return (
+        <>
+            <div className={"col-span-6"}>
+                <FastField type="checkbox"
+                           disabled={disabled}
+                           name={validationRequired}
+                           label={"Required"}
+                           tooltip={"You won't be able to save this entity if this value is not set"}
+                           component={SwitchControl}/>
+            </div>
+
+            <div className={"col-span-6"}>
+                <FastField type="checkbox"
+                           disabled={disabled}
+                           name={validationUnique}
+                           label={"Unique"}
+                           tooltip={"There cannot be multiple entities with the same value"}
+                           component={SwitchControl}/>
+            </div>
+
+            {getIn(values, validationRequired) && <div className={"col-span-12"}>
+                <DebouncedTextField
+                    disabled={disabled}
+                    value={getIn(values, validationRequiredMessage)}
+                    label={"Required message"}
+                    name={validationRequiredMessage}
+                    size="small"
+                    onChange={handleChange}/>
+            </div>}
+        </>
+    );
+}

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

@@ -0,0 +1,99 @@
+import React from "react";
+
+import { FastField, getIn, useFormikContext } from "formik";
+import { DebouncedTextField, SwitchControl } from "@firecms/core";
+import { GeneralPropertyValidation } from "./GeneralPropertyValidation";
+
+export function NumberPropertyValidation({ disabled }: {
+    disabled: boolean;
+}) {
+
+    const {
+        values,
+        handleChange
+    } = useFormikContext();
+
+    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={"Min value"}
+                                    name={validationMin}
+                                    type="number"
+                                    size="small"
+                                    disabled={disabled}
+                                    onChange={handleChange}/>
+            </div>
+
+            <div className={"col-span-6"}>
+                <DebouncedTextField value={getIn(values, validationMax)}
+                                    label={"Max value"}
+                                    name={validationMax}
+                                    type="number"
+                                    size="small"
+
+                                    disabled={disabled}
+                                    onChange={handleChange}/>
+            </div>
+
+
+            <div className={"col-span-6"}>
+                <DebouncedTextField
+                    value={getIn(values, validationLessThan)}
+                    label={"Less than"}
+                    name={validationLessThan}
+                    type="number"
+                    size="small"
+
+                    disabled={disabled}
+                    onChange={handleChange}/>
+            </div>
+
+            <div className={"col-span-6"}>
+                <DebouncedTextField
+                    value={getIn(values, validationMoreThan)}
+                    label={"More than"}
+                    name={validationMoreThan}
+                    type="number"
+                    size="small"
+
+                    disabled={disabled}
+                    onChange={handleChange}/>
+            </div>
+
+            <div className={"col-span-4"}>
+                <FastField type="checkbox"
+                           name={validationPositive}
+                           label={"Positive value"}
+                           disabled={disabled}
+                           component={SwitchControl}/>
+            </div>
+            <div className={"col-span-4"}>
+                <FastField type="checkbox"
+                           name={validationNegative}
+                           label={"Negative value"}
+                           disabled={disabled}
+                           component={SwitchControl}/>
+            </div>
+            <div className={"col-span-4"}>
+                <FastField type="checkbox"
+                           name={validationInteger}
+                           label={"Integer value"}
+                           disabled={disabled}
+                           component={SwitchControl}/>
+            </div>
+        </div>
+    );
+}

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

@@ -0,0 +1,131 @@
+import React from "react";
+
+import { FastField, getIn, useFormikContext } from "formik";
+import { DebouncedTextField, isValidRegExp, serializeRegExp, SwitchControl } from "@firecms/core";
+import { GeneralPropertyValidation } from "./GeneralPropertyValidation";
+import { FieldHelperView } from "../FieldHelperView";
+
+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
+    } = useFormikContext();
+
+    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"}>
+                        <FastField type="checkbox"
+                                   name={validationLowercase}
+                                   label={"Lowercase"}
+                                   disabled={disabled}
+                                   component={SwitchControl}/>
+                    </div>}
+                    {uppercase && <div className={"col-span-4"}>
+                        <FastField type="checkbox"
+                                   name={validationUppercase}
+                                   label={"Uppercase"}
+                                   disabled={disabled}
+                                   component={SwitchControl}/>
+                    </div>}
+                    {trim && <div className={"col-span-4"}>
+                        <FastField type="checkbox"
+                                   name={validationTrim}
+                                   label={"Trim"}
+                                   disabled={disabled}
+                                   component={SwitchControl}/>
+                    </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={"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={"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={"Max length"}
+                                            name={validationMax}
+                                            type="number"
+                                            size="small"
+
+                                            disabled={disabled}
+                                            onChange={handleChange}/>
+                    </div>}
+
+                </div>
+
+                {matches && <div className={"col-span-12"}>
+                    <FastField name={validationMatches}
+                               as={DebouncedTextField}
+                               validate={(value: string) => value && !isValidRegExp(value)}
+                               label={"Matches regex"}
+                               size="small"
+                               disabled={disabled}
+                               value={matchesStringValue}
+                               error={Boolean(matchesError)}/>
+                    <FieldHelperView error={Boolean(matchesError)}>
+                        {matchesError ? "Not a valid regexp" : "e.g. /^\\d+$/ for digits only"}
+                    </FieldHelperView>
+                </div>}
+
+            </div>
+    );
+
+}

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

@@ -0,0 +1,28 @@
+import { PropsWithChildren } from "react";
+
+import { ExpandablePanel, RuleIcon, Typography } from "@firecms/core";
+
+export function ValidationPanel({
+                                    children
+                                }: PropsWithChildren<{}>) {
+
+    return (
+        <ExpandablePanel
+            initiallyExpanded={false}
+            asField={true}
+            className="p-4"
+            title={
+                <div className="flex flex-row text-gray-500">
+                    <RuleIcon/>
+                    <Typography variant={"subtitle2"}
+                                className="ml-2">
+                        Validation
+                    </Typography>
+                </div>
+            }>
+
+            {children}
+
+        </ExpandablePanel>
+    )
+}

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

@@ -0,0 +1,115 @@
+import { buildCollection, buildProperty } from "@firecms/core";
+
+export const blogCollectionTemplate = buildCollection({
+    path: "blog",
+    name: "Blog",
+    singularName: "Blog entry",
+    group: "Content",
+    icon: "article",
+    description: "A collection of blog entries",
+    defaultSize: "l",
+    properties: {
+        name: buildProperty({
+            name: "Name",
+            validation: { required: true },
+            dataType: "string"
+        }),
+        header_image: buildProperty({
+            name: "Header image",
+            dataType: "string",
+            storage: {
+                storagePath: "images",
+                acceptedFiles: ["image/*"],
+                metadata: {
+                    cacheControl: "max-age=1000000"
+                }
+            }
+        }),
+        content: buildProperty({
+            name: "Content",
+            description: "Content blocks for the blog entry",
+            validation: { required: true },
+            dataType: "array",
+            oneOf: {
+                typeField: "type",
+                valueField: "value",
+                properties: {
+                    text: {
+                        dataType: "string",
+                        name: "Text",
+                        markdown: true
+                    },
+                    quote: {
+                        dataType: "string",
+                        name: "Quote",
+                        multiline: true
+                    },
+                    images: {
+                        name: "Images",
+                        dataType: "array",
+                        of: {
+                            dataType: "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",
+                        dataType: "array",
+                        of: {
+                            dataType: "reference",
+                            path: "products",
+                            previewProperties: ["name", "main_image"]
+                        }
+                    }
+                },
+                propertiesOrder: ["text", "quote", "images", "products"]
+            }
+        }),
+        created_on: {
+            name: "Created on",
+            dataType: "date",
+            autoValue: "on_create"
+        },
+        status: {
+            name: "Status",
+            validation: { required: true },
+            dataType: "string",
+            enumValues: {
+                published: {
+                    id: "published",
+                    label: "Published",
+                },
+                draft: "Draft"
+            },
+            defaultValue: "draft"
+        },
+        publish_date: {
+            name: "Publish date",
+            dataType: "date",
+            clearable: true
+        },
+        reviewed: {
+            name: "Reviewed",
+            dataType: "boolean"
+        },
+        tags: {
+            name: "Tags",
+            description: "Example of generic array",
+            dataType: "array",
+            of: {
+                dataType: "string",
+                previewAsTag: true
+            }
+        }
+    },
+    initialFilter: {
+        status: ["==", "published"]
+    }
+});

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

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

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

@@ -0,0 +1,34 @@
+import { buildCollection } from "@firecms/core";
+
+export const usersCollectionTemplate = buildCollection({
+    path: "users",
+    name: "Users",
+    singularName: "User",
+    group: "Main",
+    description: "Registered users in the app/web",
+    icon: "person",
+    properties: {
+        displayName: {
+            name: "Display name",
+            dataType: "string"
+        },
+        email: {
+            name: "Email",
+            dataType: "string",
+            email: true
+        },
+        emailVerified: {
+            name: "Email verified",
+            dataType: "boolean"
+        },
+        phone: {
+            name: "Phone",
+            dataType: "string"
+        },
+        photoURL: {
+            name: "Photo URL",
+            dataType: "string",
+            url: "image"
+        }
+    },
+});

package/src/components/collection_editor/util.ts

@@ -0,0 +1,21 @@
+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;
+}

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

@@ -0,0 +1,28 @@
+import { DEFAULT_FIELD_CONFIGS, FieldConfigId } from "@firecms/core";
+
+export const supportedFieldsIds: FieldConfigId[] = [
+    "text_field",
+    "multiline",
+    "markdown",
+    "url",
+    "email",
+    "select",
+    "multi_select",
+    "number_input",
+    "number_select",
+    "multi_number_select",
+    "file_upload",
+    "multi_file_upload",
+    "group",
+    "key_value",
+    "reference",
+    "multi_references",
+    "switch",
+    "date_time",
+    "repeat",
+    "block"
+];
+
+export const supportedFields = Object.entries(DEFAULT_FIELD_CONFIGS).filter(([id]) =>
+    supportedFieldsIds.includes(id as FieldConfigId)
+);