@solidstarters/solid-core-ui 0.1.26

package/src/components/core/form/fields/SolidLongTextField.tsx

@@ -0,0 +1,99 @@
+import { InputTextarea } from "primereact/inputtextarea";
+import { Message } from "primereact/message";
+import * as Yup from 'yup';
+import { Schema } from "yup";
+import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
+
+export class SolidLongTextField implements ISolidField {
+
+    private fieldContext: SolidFieldProps;
+
+    constructor(fieldContext: SolidFieldProps) {
+        this.fieldContext = fieldContext;
+    }
+
+    updateFormData(value: any, formData: FormData): any {
+        const fieldLayoutInfo = this.fieldContext.field;
+        if (value) {
+            formData.append(fieldLayoutInfo.attrs.name, value);
+        }
+    }
+
+    initialValue(): any {
+        return this.fieldContext.data[this.fieldContext.field.attrs.name];
+    }
+
+    validationSchema(): Schema {
+        let schema: Yup.StringSchema<string | null | undefined> = Yup.string();
+
+        const fieldMetadata = this.fieldContext.fieldMetadata;
+        const fieldLayoutInfo = this.fieldContext.field;
+        const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+
+        // 1. required 
+        if (fieldMetadata.required) {
+            schema = schema.required(`${fieldLabel} is required.`);
+        } else {
+            schema = schema.nullable(); // Allow null when not required
+        }
+        // 2. length (min/max)
+        if (fieldMetadata.min && fieldMetadata.min > 0) {
+            schema = schema.min(fieldMetadata.min, `${fieldLabel} should be at-least ${fieldMetadata.min} characters long.`);
+        }
+        if (fieldMetadata.max && fieldMetadata.max > 0) {
+            schema = schema.max(fieldMetadata.max, `${fieldLabel} should not be more than ${fieldMetadata.max} characters long.`);
+        }
+        // 3. regular expression
+        if (fieldMetadata.regexPattern) {
+            const regexPatternNotMatchingErrorMsg = fieldMetadata.regexPatternNotMatchingErrorMsg ?? `${fieldLabel} has invalid data.`
+            schema = schema.matches(fieldMetadata.regexPattern, regexPatternNotMatchingErrorMsg);
+        }
+
+        return schema;
+    }
+
+    render(formik: FormikObject) {
+        const fieldMetadata = this.fieldContext.fieldMetadata;
+        const fieldLayoutInfo = this.fieldContext.field;
+        const className = fieldLayoutInfo.attrs?.className || 'col-12 s-field';
+        const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+        const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
+        const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
+
+        const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
+
+        const fieldDisabled = fieldLayoutInfo.attrs?.disabled;
+        const fieldReadonly = fieldLayoutInfo.attrs?.readonly;
+
+        const formDisabled = solidFormViewMetaData.data.solidView?.layout?.attrs?.disabled;
+        const formReadonly = solidFormViewMetaData.data.solidView?.layout?.attrs?.readonly;
+
+        return (
+            <div className={className}>
+                <div className="justify-content-center align-items-center">
+                    <label htmlFor={fieldLayoutInfo.attrs.name}>{fieldLabel}
+
+                        &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+                    </label>
+                </div>
+                <div className="s-input">
+                    <InputTextarea
+                        readOnly={formReadonly || fieldReadonly}
+                        disabled={formDisabled || fieldDisabled}
+                        id={fieldLayoutInfo.attrs.name}
+                        aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
+                        onChange={formik.handleChange}
+                        value={formik.values[fieldLayoutInfo.attrs.name] || ''}
+                        rows={5}
+                        cols={30}
+
+                    />
+                    {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                    )}
+                </div>
+
+            </div>
+        );
+    }
+}

package/src/components/core/form/fields/SolidMediaMultipleField.tsx

@@ -0,0 +1,246 @@
+import { DropzonePlaceholder } from "@/components/common/DropzonePlaceholder";
+import { DropzoneUpload } from "@/components/common/DropzoneUpload";
+import { useDeleteMediaMutation } from "@/redux/api/mediaApi";
+import { Button } from "primereact/button";
+import { Dialog } from "primereact/dialog";
+import { Message } from "primereact/message";
+import { useEffect, useState } from "react";
+import { useDropzone } from "react-dropzone";
+import * as Yup from 'yup';
+import { Schema } from "yup";
+import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
+
+export class SolidMediaMultipleField implements ISolidField {
+
+    private fieldContext: SolidFieldProps;
+
+    constructor(fieldContext: SolidFieldProps) {
+        this.fieldContext = fieldContext;
+    }
+
+    updateFormData(value: any, formData: FormData): any {
+        const fieldLayoutInfo = this.fieldContext.field;
+        // @ts-ignore
+        for (let i = 0; i < value.length; i++) {
+            // @ts-ignore
+            const file = value[i];
+            if (file instanceof File) {
+                formData.append(fieldLayoutInfo.attrs.name, file);
+            }
+        }
+    }
+
+    initialValue(): any {
+        const mediaUrls = this.fieldContext.data && this.fieldContext.data._media && this.fieldContext.data._media[this.fieldContext.field.attrs.name].map((i: any) => i)
+        return mediaUrls;
+    }
+
+    validationSchema(): Schema {
+
+        const fieldMetadata = this.fieldContext.fieldMetadata;
+        const fieldLayoutInfo = this.fieldContext.field;
+        const fieldLabel = fieldLayoutInfo.label ?? fieldMetadata.displayName;
+
+        let schema: Yup.ArraySchema<any, any, any, any>;  // Correctly specifying type arguments for ArraySchema
+        if (fieldMetadata.required) {
+            // For required fields: disallow null, undefined, and empty arrays
+            schema = Yup.array()
+                .of(
+                    Yup.mixed<File | object>()
+                        .required(`${fieldLabel} is required.`)
+                        .test(
+                            "file-or-object",
+                            `${fieldLabel} must be a file or an object.`,
+                            (value) =>
+                                value instanceof File || typeof value === "object" // Validate File or object
+                        )
+                )
+                .min(1, `${fieldLabel} must have at least one item.`); // Ensure array has at least one item
+        } else {
+            // For optional fields: allow null, undefined, or an empty array
+            schema = Yup.array()
+                .of(
+                    Yup.mixed<File | object>()
+                        .nullable() // Allow null explicitly
+                        .test(
+                            "file-or-object",
+                            `${fieldLabel} must be a file, an object, or empty.`,
+                            (value) =>
+                                value === null || // Allow null
+                                value === undefined || // Allow undefined
+                                value instanceof File || // Allow File
+                                typeof value === "object" // Allow object
+                        )
+                )
+                .nullable() // Allow null array explicitly
+                .test(
+                    "is-empty-or-valid-array",
+                    `${fieldLabel} must be an empty array or contain only files/objects.`,
+                    (value) => value === null || value === undefined || Array.isArray(value)
+                );
+        }
+
+
+        return schema;
+    }
+
+    render(formik: FormikObject) {
+        const fieldMetadata = this.fieldContext.fieldMetadata;
+        const fieldLayoutInfo = this.fieldContext.field;
+        const className = fieldLayoutInfo.attrs?.className || 'col-12 s-field';
+        const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+        const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
+        const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
+
+        const [imagesPreview, setImagesPreview] = useState<Array<string | ArrayBuffer>>([]);
+        const [isDeleteImageDialogVisible, setDeleteImageDialogVisible] = useState(false);
+        const [imageToBeDeletedData, setImageToBeDeletedData] = useState<any>();
+
+        const fieldDisabled = fieldLayoutInfo.attrs?.disabled;
+        const fieldReadonly = fieldLayoutInfo.attrs?.readonly;
+
+        const formDisabled = solidFormViewMetaData.data.solidView?.layout?.attrs?.disabled;
+        const formReadonly = solidFormViewMetaData.data.solidView?.layout?.attrs?.readonly;
+
+        const [
+            deleteMedia,
+            { isLoading: isMediaDeleted, isSuccess: isDeleteMediaSuceess, isError: isMediaDeleteError, error: mediaDeleteError, data: DeletedMedia },
+        ] = useDeleteMediaMutation();
+
+        useEffect(() => {
+            // Sync imagesPreview with Formik's field value on mount/update
+            if (formik.values[fieldLayoutInfo.attrs.name]) {
+                const existingFiles = formik.values[fieldLayoutInfo.attrs.name] || [];
+                const urls = existingFiles.map((file: File | any) => {
+                    if (file instanceof File) {
+                        return URL.createObjectURL(file); // Generate preview URL for file
+                    }
+                    if (typeof file === 'object') {
+                        return file; // Handle existing URL strings
+                    }
+                });
+                setImagesPreview(urls);
+            }
+        }, [formik.values, fieldLayoutInfo.attrs.name]);
+
+        const handleDrop = (acceptedFiles: File[]) => {
+            const currentFiles = formik.values[fieldLayoutInfo.attrs.name] || [];
+            const updatedFiles = [...currentFiles, ...acceptedFiles];
+            formik.setFieldValue(fieldLayoutInfo.attrs.name, updatedFiles);
+        };
+
+
+        const handleDelete = () => {
+            imageToBeDeletedData.e.stopPropagation();
+            const currentFiles = formik.values[fieldLayoutInfo.attrs.name] || [];
+            const updatedFiles = currentFiles.filter((_: any, i: number) => i !== imageToBeDeletedData.index);
+            formik.setFieldValue(fieldLayoutInfo.attrs.name, updatedFiles);
+            if (!(currentFiles[imageToBeDeletedData.index] instanceof File)) {
+                deleteMedia(currentFiles[imageToBeDeletedData.index].id);
+            }
+            setDeleteImageDialogVisible(false);
+
+        };
+
+        const {
+            getRootProps,
+            getInputProps,
+            isDragActive,
+        } = useDropzone({
+            onDrop: handleDrop,
+            accept: { "image/jpeg": [], "image/png": [] },
+            maxSize: 2 * 1024 * 1024,
+        });
+
+        const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
+
+
+        const imageFormatHandler = (preview: any) => {
+            if (typeof preview === 'string') {
+                return preview; // Existing URLs
+            }
+            if (preview instanceof File) {
+                return URL.createObjectURL(preview); // Generate preview URL for File
+            }
+            if (typeof preview === "object") {
+                return preview._full_url
+            }
+            return ""; // Fallback for invalid cases
+        }
+
+        return (
+            <div className={className}>
+                <div className="justify-content-center align-items-center">
+                    <label htmlFor={fieldLayoutInfo.attrs.name}>{fieldLabel}
+
+                        &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+                    </label>
+                </div>
+                <div className="s-input">
+                    <div
+                        {...getRootProps()}
+                        className="dropzone p-3 border-1 border-round surface-border"
+                    >
+                        <input {...getInputProps()}
+                        />
+                        {isDragActive ? (
+                            <DropzonePlaceholder />
+
+                        ) : imagesPreview.length > 0 ? (
+                            <div className="flex overflow-auto gap-3">
+                                {imagesPreview.map((preview, index) => (
+                                    <div key={index} className="relative">
+
+                                        <img
+                                            src={imageFormatHandler(preview) as string}
+                                            alt={`Preview ${index + 1}`}
+                                            className="bg-white h-10rem w-14rem"
+                                        />
+                                        <Button
+                                            type="button"
+                                            onClick={(e) => {
+                                                e.stopPropagation();
+                                                setDeleteImageDialogVisible(true);
+                                                const data = {
+                                                    index, e
+                                                }
+                                                setImageToBeDeletedData(data)
+                                            }}
+                                            icon="pi pi-trash"
+                                            severity="secondary"
+                                            outlined
+                                            className="absolute right-0 top-0 bg-white z-5 m-2"
+                                            style={{ height: 25, width: 25 }}
+                                        />
+                                        <DropzoneUpload />
+
+                                    </div>
+                                ))}
+                            </div>
+                        ) :
+                            <DropzonePlaceholder />
+                        }
+                    </div>
+
+                    {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                    )}
+                </div>
+                <Dialog
+                    visible={isDeleteImageDialogVisible}
+                    header="Confirm Delete"
+                    modal
+                    footer={() => (
+                        <div className="flex justify-content-center">
+                            <Button label="Yes" icon="pi pi-check" className='small-button' severity="danger" autoFocus onClick={handleDelete} />
+                            <Button label="No" icon="pi pi-times" className='small-button' onClick={() => setDeleteImageDialogVisible(false)} />
+                        </div>
+                    )}
+                    onHide={() => setDeleteImageDialogVisible(false)}
+                >
+                    <p>Are you sure you want to delete image?</p>
+                </Dialog>
+            </div >
+        );
+    }
+}

package/src/components/core/form/fields/SolidMediaSingleField.tsx

@@ -0,0 +1,227 @@
+import { DropzonePlaceholder } from "@/components/common/DropzonePlaceholder";
+import { DropzoneUpload } from "@/components/common/DropzoneUpload";
+import { useDeleteMediaMutation } from "@/redux/api/mediaApi";
+import { Button } from "primereact/button";
+import { Dialog } from "primereact/dialog";
+import { Message } from "primereact/message";
+import { useEffect, useState } from "react";
+import { useDropzone } from "react-dropzone";
+import * as Yup from 'yup';
+import { Schema } from "yup";
+import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
+
+export class SolidMediaSingleField implements ISolidField {
+
+    private fieldContext: SolidFieldProps;
+
+    constructor(fieldContext: SolidFieldProps) {
+        this.fieldContext = fieldContext;
+    }
+
+    updateFormData(value: any, formData: FormData): any {
+        const fieldLayoutInfo = this.fieldContext.field;
+        if (value instanceof File) {
+            formData.append(fieldLayoutInfo.attrs.name, value);
+        }
+    }
+
+    initialValue(): any {
+        const mediaUrls = this.fieldContext.data && this.fieldContext.data._media && this.fieldContext.data._media[this.fieldContext.field.attrs.name][0];
+        return mediaUrls;
+    }
+
+    validationSchema(): Schema {
+        // let schema: Yup.StringSchema = Yup.object();
+
+        const fieldMetadata = this.fieldContext.fieldMetadata;
+        const fieldLayoutInfo = this.fieldContext.field;
+
+        const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+        // Dynamically determine the base type based on the 'required' flag
+
+        // Define base schema
+        let schema: Yup.MixedSchema<File | object>;
+
+        if (fieldMetadata.required) {
+            // For required fields: disallow null and undefined
+            schema = Yup.mixed<File | object>()
+                .required(`${fieldLabel} is required.`)
+                .test(
+                    "file-or-object",
+                    `${fieldLabel} must be a file or an object.`,
+                    (value) =>
+                        value instanceof File || typeof value === "object" // Validate File or object
+                );
+        } else {
+            // For optional fields: allow null or undefined
+            schema = Yup.mixed<any>()
+                .nullable() // Allow null explicitly
+                .test(
+                    "file-or-object",
+                    `${fieldLabel} must be a file, an object, or empty.`,
+                    (value) =>
+                        value === null || // Allow null
+                        value === undefined || // Allow undefined
+                        value instanceof File || // Allow File
+                        typeof value === "object" // Allow object
+                );
+        }
+        return schema;
+
+    }
+
+    render(formik: FormikObject) {
+        const fieldMetadata = this.fieldContext.fieldMetadata;
+        const fieldLayoutInfo = this.fieldContext.field;
+        const className = fieldLayoutInfo.attrs?.className || 'col-12 s-field';
+        const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+        const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
+        const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
+
+        const [isDeleteImageDialogVisible, setDeleteImageDialogVisible] = useState(false);
+        const [imageToBeDeletedData, setImageToBeDeletedData] = useState<any>();
+        const [imagesPreview, setImagesPreview] = useState<string | ArrayBuffer | null>(null);
+
+        const fieldDisabled = fieldLayoutInfo.attrs?.disabled;
+        const fieldReadonly = fieldLayoutInfo.attrs?.readonly;
+
+        const formDisabled = solidFormViewMetaData.data.solidView?.layout?.attrs?.disabled;
+        const formReadonly = solidFormViewMetaData.data.solidView?.layout?.attrs?.readonly;
+
+        const [
+            deleteMedia,
+            { isLoading: isMediaDeleted, isSuccess: isDeleteMediaSuceess, isError: isMediaDeleteError, error: mediaDeleteError, data: DeletedMedia },
+        ] = useDeleteMediaMutation();
+
+        const handleDelete = () => {
+            imageToBeDeletedData.e.stopPropagation();
+            if (imageToBeDeletedData.imagesPreview.id) {
+                deleteMedia(imageToBeDeletedData.imagesPreview.id);
+            }
+            formik.setFieldValue(fieldLayoutInfo.attrs.name, null);
+            setDeleteImageDialogVisible(false);
+        };
+
+        const handleDropImage = (acceptedFiles: File[]) => {
+            const file = acceptedFiles[0];
+            if (file) {
+                formik.setFieldValue(fieldLayoutInfo.attrs.name, file);
+            } else {
+                console.error("No file was accepted");
+            }
+        };
+
+        useEffect(() => {
+            const fieldValue = formik?.values[fieldLayoutInfo.attrs.name];
+
+            if (fieldValue instanceof File) {
+                setImagesPreview(URL.createObjectURL(fieldValue)); // Generate preview URL for file
+            }
+            if (typeof fieldValue === 'object') {
+                setImagesPreview(fieldValue); // Generate preview URL for file
+            }
+            if (!fieldValue) {
+                setImagesPreview(null);
+            }
+        }, [formik.values, fieldLayoutInfo.attrs.name]);
+
+        const {
+            getRootProps: getRootProps,
+            getInputProps: getInputProps,
+            isDragActive: isDragActive,
+        } = useDropzone({
+            onDrop: handleDropImage,
+            accept: {
+                "image/jpeg": [],
+                "image/png": [],
+            },
+            maxSize: 2 * 1024 * 1024, // 2MB
+        });
+
+        const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
+
+        const imageFormatHandler = (preview: any) => {
+            if (typeof preview === 'string') {
+                return preview; // Existing URLs
+            }
+            if (preview instanceof File) {
+                return URL.createObjectURL(preview); // Generate preview URL for File
+            }
+            if (typeof preview === 'object') {
+                return preview._full_url
+            }
+            return ""; // Fallback for invalid cases
+        }
+
+        return (
+            <div className={className}>
+                <div className="justify-content-center align-items-center">
+                    <label htmlFor={fieldLayoutInfo.attrs.name}>{fieldLabel}
+                        &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+                    </label>
+                </div>
+                <div className="s-input">
+                    <div
+                        {...getRootProps()}
+                        className="dropzone p-3 border-1 border-round surface-border"
+                    >
+                        <input {...getInputProps()} />
+
+                        {isDragActive ? (
+                            <DropzonePlaceholder />
+                        ) : imagesPreview ? (
+                            <div className="relative">
+                                <img
+                                    src={imageFormatHandler(imagesPreview) as string}
+                                    alt="Banner Image"
+                                    className="bg-white h-10rem w-14rem"
+                                />
+                                <Button
+                                    type="button"
+                                    onClick={(e) => {
+                                        e.stopPropagation();
+                                        setDeleteImageDialogVisible(true);
+                                        const data = {
+                                            e, imagesPreview
+                                        }
+                                        setImageToBeDeletedData(data)
+                                    }}
+                                    icon="pi pi-trash"
+                                    severity="secondary"
+                                    outlined
+                                    aria-label="Bookmark"
+                                    className="absolute right-0 top-0 bg-white z-5 m-2"
+                                    style={{
+                                        height: 25,
+                                        width: 25,
+                                    }}
+                                />
+                                <DropzoneUpload />
+                            </div>
+                        ) : (
+                            <DropzonePlaceholder />
+                        )}
+                        { }
+                    </div>
+                    {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                    )}
+                </div>
+                <Dialog
+                    visible={isDeleteImageDialogVisible}
+                    header="Confirm Delete"
+                    modal
+                    footer={() => (
+                        <div className="flex justify-content-center">
+                            <Button label="Yes" icon="pi pi-check" className='small-button' severity="danger" autoFocus onClick={handleDelete} />
+                            <Button label="No" icon="pi pi-times" className='small-button' onClick={() => setDeleteImageDialogVisible(false)} />
+                        </div>
+                    )}
+                    onHide={() => setDeleteImageDialogVisible(false)}
+                >
+                    <p>Are you sure you want to delete image?</p>
+                </Dialog>
+            </div>
+        );
+    }
+}

package/src/components/core/form/fields/SolidRelationField.tsx

@@ -0,0 +1,53 @@
+import { Schema } from "yup";
+import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
+import { SolidRelationManyToOneField } from "./relations/SolidRelationManyToOneField";
+import { SolidRelationOneToManyField } from "./relations/SolidRelationOneToManyField";
+import { SolidRelationManyToManyField } from "./relations/SolidRelationManyToManyField";
+
+
+export class SolidRelationField implements ISolidField {
+
+    private fieldContext: SolidFieldProps;
+
+    constructor(fieldContext: SolidFieldProps) {
+        this.fieldContext = fieldContext;
+    }
+
+    relationField(): ISolidField {
+        const fieldMetadata = this.fieldContext.fieldMetadata;
+        let relationField = null;
+
+        if (fieldMetadata.relationType === 'many-to-one') {
+            relationField = new SolidRelationManyToOneField(this.fieldContext);
+        }
+        if (fieldMetadata.relationType === 'many-to-many') {
+            relationField = new SolidRelationManyToManyField(this.fieldContext);
+        }
+        if (fieldMetadata.relationType === 'one-to-many') {
+            relationField = new SolidRelationOneToManyField(this.fieldContext);
+        }
+
+        if (!relationField) {
+            throw new Error(`Invalid relationType ${fieldMetadata.relationType} on field ${this.fieldContext.field.attrs.name}`)
+        }
+
+        return relationField;
+    }
+
+    initialValue(): any {
+        return this.relationField()?.initialValue();
+    }
+
+    updateFormData(value: any, formData: FormData): any {
+        return this.relationField().updateFormData(value, formData);
+
+    }
+
+    validationSchema(): Schema {
+        return this.relationField().validationSchema();
+    }
+
+    render(formik: FormikObject) {
+        return this.relationField().render(formik);
+    }
+}