@firecms/collection_editor 3.0.0-alpha.9 → 3.0.0-beta.2-pre.1

package/src/ui/collection_editor/properties/StringPropertyField.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+import { StringPropertyValidation } from "./validation/StringPropertyValidation";
+import { ValidationPanel } from "./validation/ValidationPanel";
+import { getIn, useFormikContext } from "formik";
+
+import { TextField } from "@firecms/ui";
+
+export function StringPropertyField({
+                                        widgetId,
+                                        disabled,
+                                        showErrors
+                                    }: {
+    widgetId: "text_field" | "multiline" | "markdown" | "email";
+    disabled: boolean;
+    showErrors: boolean;
+}) {
+
+    const { values, setFieldValue } = useFormikContext();
+
+    return (
+        <>
+            <div className={"col-span-12"}>
+
+                <ValidationPanel>
+
+                    {widgetId === "text_field" &&
+                        <StringPropertyValidation disabled={disabled}
+                                                  length={true}
+                                                  lowercase={true}
+                                                  matches={true}
+                                                  max={true}
+                                                  min={true}
+                                                  trim={true}
+                                                  uppercase={true}
+                                                  showErrors={showErrors}/>}
+                    {widgetId === "multiline" &&
+                        <StringPropertyValidation disabled={disabled}
+                                                  length={true}
+                                                  lowercase={true}
+                                                  max={true}
+                                                  min={true}
+                                                  trim={true}
+                                                  uppercase={true}
+                                                  showErrors={showErrors}/>}
+                    {widgetId === "markdown" &&
+                        <StringPropertyValidation disabled={disabled}
+                                                  length={true}
+                                                  lowercase={true}
+                                                  max={true}
+                                                  min={true}
+                                                  trim={true}
+                                                  uppercase={true}
+                                                  showErrors={showErrors}/>}
+
+                    {widgetId === "email" &&
+                        <StringPropertyValidation disabled={disabled}
+                                                  max={true}
+                                                  min={true}
+                                                  trim={true}
+                                                  showErrors={showErrors}/>}
+
+                </ValidationPanel>
+
+            </div>
+
+            <div className={"col-span-12"}>
+
+                <TextField name={"defaultValue"}
+                           disabled={disabled}
+                           onChange={(e: any) => {
+                               setFieldValue("defaultValue", e.target.value === "" ? undefined : e.target.value);
+                           }}
+                           label={"Default value"}
+                           value={getIn(values, "defaultValue") ?? ""}/>
+
+            </div>
+        </>
+    );
+}

package/src/ui/collection_editor/properties/UrlPropertyField.tsx

@@ -0,0 +1,89 @@
+import React from "react";
+import { StringPropertyValidation } from "./validation/StringPropertyValidation";
+import { ValidationPanel } from "./validation/ValidationPanel";
+import { getIn, useFormikContext } from "formik";
+
+import { Select, SelectItem, TextField } from "@firecms/ui";
+
+export function UrlPropertyField({
+                                     disabled,
+                                     showErrors
+                                 }: {
+    disabled: boolean;
+    showErrors: boolean;
+}) {
+
+    const { values, setFieldValue } = useFormikContext();
+
+    const urlValue = getIn(values, "url");
+
+    return (
+        <>
+            <div className={"col-span-12"}>
+
+                <Select
+                    disabled={disabled}
+                    position={"item-aligned"}
+                    onValueChange={(value: string) => {
+                        if (value === "[NONE]")
+                            setFieldValue("url", true);
+                        else
+                            setFieldValue("url", value);
+                    }}
+                    label={"Preview type"}
+                    renderValue={(value: string) => {
+                        switch (value) {
+                            case "image":
+                                return "Image";
+                            case "video":
+                                return "Video";
+                            case "audio":
+                                return "Audio";
+                            default:
+                                return "Display URL";
+                        }
+                    }}
+                    value={urlValue ?? "[NONE]"}>
+                    <SelectItem value={"[NONE]"}>
+                        Display URL
+                    </SelectItem>
+                    <SelectItem value={"image"}>
+                        Image
+                    </SelectItem>
+                    <SelectItem value={"video"}>
+                        Video
+                    </SelectItem>
+                    <SelectItem value={"audio"}>
+                        Audio
+                    </SelectItem>
+                </Select>
+            </div>
+
+            <div className={"col-span-12"}>
+
+                <ValidationPanel>
+
+                    <StringPropertyValidation disabled={disabled}
+                                              max={true}
+                                              min={true}
+                                              trim={true}
+                                              showErrors={showErrors}/>
+
+                </ValidationPanel>
+
+            </div>
+
+            <div className={"col-span-12"}>
+
+                <TextField name={"defaultValue"}
+                           disabled={disabled}
+                           onChange={(e: any) => {
+                               setFieldValue("defaultValue", e.target.value === "" ? undefined : e.target.value);
+                           }}
+                           label={"Default value"}
+                           value={getIn(values, "defaultValue") ?? ""}/>
+
+            </div>
+        </>
+    );
+}

package/src/ui/collection_editor/properties/advanced/AdvancedPropertyValidation.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+
+import { FastField, useFormikContext } from "formik";
+import { SwitchControl } from "@firecms/core";
+
+export function AdvancedPropertyValidation({ disabled }: {disabled: boolean}) {
+
+    const { values, handleChange } = useFormikContext();
+
+    const columnWidth = "columnWidth";
+    const hideFromCollection = "hideFromCollection";
+    const readOnly = "readOnly";
+
+    return (
+
+        <div className={"grid grid-cols-12 gap-2"} >
+            <div className={"col-span-12"}>
+                <FastField type="checkbox"
+                           name={hideFromCollection}
+                           label={"Hide from collection"}
+                           disabled={disabled}
+                           tooltip={"Hide this field from the collection view. It will still be visible in the form view"}
+                           component={SwitchControl}/>
+            </div>
+
+            <div className={"col-span-12"}>
+                <FastField type="checkbox"
+                           name={readOnly}
+                           label={"Read only"}
+                           disabled={disabled}
+                           tooltip={"Is this a read only field. Display only as a preview"}
+                           component={SwitchControl}/>
+            </div>
+        </div>
+    );
+}

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

@@ -0,0 +1,50 @@
+import React from "react";
+
+import { getIn, useFormikContext } from "formik";
+import { DebouncedTextField } from "@firecms/ui";
+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/ui/collection_editor/properties/validation/GeneralPropertyValidation.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+
+import { FastField, getIn, useFormikContext } from "formik";
+import { SwitchControl } from "@firecms/core";
+import { DebouncedTextField } from "@firecms/ui";
+
+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/ui/collection_editor/properties/validation/NumberPropertyValidation.tsx

@@ -0,0 +1,100 @@
+import React from "react";
+
+import { FastField, getIn, useFormikContext } from "formik";
+import { SwitchControl } from "@firecms/core";
+import { DebouncedTextField } from "@firecms/ui";
+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/ui/collection_editor/properties/validation/StringPropertyValidation.tsx

@@ -0,0 +1,132 @@
+import React from "react";
+
+import { FastField, getIn, useFormikContext } from "formik";
+import { isValidRegExp, serializeRegExp, SwitchControl } from "@firecms/core";
+import { DebouncedTextField, } from "@firecms/ui";
+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/ui/collection_editor/properties/validation/ValidationPanel.tsx

@@ -0,0 +1,28 @@
+import { PropsWithChildren } from "react";
+
+import { ExpandablePanel, RuleIcon, Typography } from "@firecms/ui";
+
+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/ui/collection_editor/templates/blog_template.ts

@@ -0,0 +1,115 @@
+import { EntityCollection, makePropertiesEditable } from "@firecms/core";
+
+export const blogCollectionTemplate:EntityCollection = {
+    id: "blog",
+    path: "blog",
+    name: "Blog",
+    singularName: "Blog entry",
+    icon: "article",
+    description: "A collection of blog entries",
+    defaultSize: "l",
+    properties: makePropertiesEditable({
+        name: {
+            name: "Name",
+            validation: { required: true },
+            dataType: "string"
+        },
+        header_image: {
+            name: "Header image",
+            dataType: "string",
+            storage: {
+                storagePath: "images",
+                acceptedFiles: ["image/*"],
+                metadata: {
+                    cacheControl: "max-age=1000000"
+                }
+            }
+        },
+        content: {
+            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"]
+    }
+};