@firecms/collection_editor 3.0.0-3.0.0-beta.4.pre.1.0

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, useFormex } from "@firecms/formex";
+
+import { TextField } from "@firecms/ui";
+
+export function StringPropertyField({
+                                        widgetId,
+                                        disabled,
+                                        showErrors
+                                    }: {
+    widgetId: "text_field" | "multiline" | "markdown" | "email";
+    disabled: boolean;
+    showErrors: boolean;
+}) {
+
+    const { values, setFieldValue } = useFormex();
+
+    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, useFormex } from "@firecms/formex";
+
+import { Select, SelectItem, TextField } from "@firecms/ui";
+
+export function UrlPropertyField({
+                                     disabled,
+                                     showErrors
+                                 }: {
+    disabled: boolean;
+    showErrors: boolean;
+}) {
+
+    const { values, setFieldValue } = useFormex();
+
+    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,45 @@
+import React from "react";
+
+import { Field, FormexFieldProps } from "@firecms/formex";
+import { SwitchControl } from "../../SwitchControl";
+
+export function AdvancedPropertyValidation({ disabled }: {
+    disabled: boolean
+}) {
+
+    const columnWidth = "columnWidth";
+    const hideFromCollection = "hideFromCollection";
+    const readOnly = "readOnly";
+
+    return (
+
+        <div className={"grid grid-cols-12 gap-2"}>
+            <div className={"col-span-12"}>
+                <Field type="checkbox" name={hideFromCollection}>
+                    {({ field, form }: FormexFieldProps) => {
+                        return <SwitchControl
+                            label={"Hide from collection"}
+                            disabled={disabled}
+                            form={form}
+                            tooltip={"Hide this field from the collection view. It will still be visible in the form view"}
+                            field={field}/>
+                    }}
+                </Field>
+            </div>
+
+            <div className={"col-span-12"}>
+                <Field name={readOnly}
+                       type="checkbox">
+                    {({ field, form }: FormexFieldProps) => {
+                        return <SwitchControl
+                            label={"Read only"}
+                            disabled={disabled}
+                            tooltip={"Is this a read only field. Display only as a preview"}
+                            form={form}
+                            field={field}/>
+                    }}
+                </Field>
+            </div>
+        </div>
+    );
+}

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

@@ -0,0 +1,50 @@
+import React from "react";
+
+import { getIn, useFormex } from "@firecms/formex";
+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
+    } = useFormex();
+
+    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,61 @@
+import React from "react";
+
+import { Field, FormexFieldProps, getIn, useFormex } from "@firecms/formex";
+import { DebouncedTextField } from "@firecms/ui";
+import { SwitchControl } from "../../SwitchControl";
+
+export function GeneralPropertyValidation({ disabled }: {
+    required?: boolean;
+    disabled: boolean;
+}) {
+
+    const { values, handleChange } = useFormex();
+
+    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={"Required"}
+                            tooltip={"You won't be able to save this entity if this value is not set"}
+                            form={form}
+                            field={field}/>
+                    }}
+                </Field>
+            </div>
+
+            <div className={"col-span-6"}>
+
+                <Field name={validationUnique}
+                       type="checkbox">
+                    {({ field, form }: FormexFieldProps) => {
+                        return <SwitchControl
+                            disabled={disabled}
+                            label={"Unique"}
+                            tooltip={"There cannot be multiple entities with the same value"}
+                            form={form}
+                            field={field}/>
+                    }}
+                </Field>
+            </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,115 @@
+import React from "react";
+
+import { Field, FormexFieldProps, getIn, useFormex } from "@firecms/formex";
+import { DebouncedTextField } from "@firecms/ui";
+import { GeneralPropertyValidation } from "./GeneralPropertyValidation";
+import { SwitchControl } from "../../SwitchControl";
+
+export function NumberPropertyValidation({ disabled }: {
+    disabled: boolean;
+}) {
+
+    const {
+        values,
+        handleChange
+    } = useFormex();
+
+    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"}>
+                <Field name={validationPositive}
+                       type="checkbox">
+                    {({ field, form }: FormexFieldProps) => {
+                        return <SwitchControl
+                            label={"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={"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={"Integer value"}
+                            disabled={disabled}
+                            form={form}
+                            field={field}/>
+                    }}
+                </Field>
+            </div>
+        </div>
+    );
+}

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

@@ -0,0 +1,150 @@
+import React from "react";
+
+import { Field, FormexFieldProps, getIn, useFormex } from "@firecms/formex";
+import { FieldCaption, serializeRegExp } from "@firecms/core";
+import { DebouncedTextField, } from "@firecms/ui";
+import { GeneralPropertyValidation } from "./GeneralPropertyValidation";
+import { SwitchControl } from "../../SwitchControl";
+
+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 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={"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={"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={"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={"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"}>
+                <Field name={validationMatches}
+                       as={DebouncedTextField}
+                       label={"Matches regex"}
+                       size="small"
+                       disabled={disabled}
+                       value={matchesStringValue}
+                       error={Boolean(matchesError)}/>
+                <FieldCaption error={Boolean(matchesError)}>
+                    {matchesError ? "Not a valid regexp" : "e.g. /^\\d+$/ for digits only"}
+                </FieldCaption>
+            </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>
+    )
+}