@solidxai/core-ui 0.1.0 → 0.1.2

package/src/components/core/form/fields/widgets/SolidRelationFieldAvatarFormWidget.tsx

@@ -1,50 +0,0 @@
-
-import { useEffect, useState } from "react";
-import { Message } from "primereact/message";
-import { classNames } from "primereact/utils";
-import { SelectButton } from "primereact/selectbutton";
-import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
-import { RadioButton } from "primereact/radiobutton";
-import { SolidFormFieldWidgetProps } from "../../../../../types/solid-core";
-import { AvatarWidget } from "../../../../../components/core/common/AvatarWidget";
-
-export const SolidRelationFieldAvatarFormWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
-
-    const fieldMetadata = fieldContext.fieldMetadata;
-    const fieldLayoutInfo = fieldContext.field;
-    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
-    const userKeyFieldName = fieldMetadata.relationModel?.userKeyField?.name;
-    const [fieldValue, setFieldValue] = useState<any>([]);
-    useEffect(() => {        
-        let rawValue = fieldContext.data?.[fieldLayoutInfo.attrs.name];
-        let value: any[] = [];
-        if (Array.isArray(rawValue)) {
-            value = rawValue.map((item: any) => ({ label: item?.[userKeyFieldName] ?? '' }));
-        } else if (rawValue && typeof rawValue === "object") {
-            value = [{ label: rawValue[userKeyFieldName] ?? '' }];
-        }
-        if (Array.isArray(value)) {
-
-            if (value.length > 0) {
-                const data = value.map((v: any) => v.label);
-                setFieldValue(data);
-            }
-        }
-        // if (value && !Array.isArray(value) && typeof value === "object") {
-        //     setFieldValue([value.label]);
-        // }
-    }, [fieldContext]);
-
-
-
-    return (
-        <div className="mt-2 flex-column">
-            <p className="m-0 form-field-label font-medium">{fieldLabel}</p>
-            <div className="flex flex-wrap gap-2 mt-2">
-                {fieldValue.map((v: any) => (
-                    <AvatarWidget value={v} />
-                ))}
-            </div>
-        </div>
-    );
-}

package/src/components/core/form/fields/widgets/SolidS3FileViewerWidget.tsx

@@ -1,222 +0,0 @@
-
-import { useEffect, useRef, useState } from "react";
-import { SolidFormFieldWidgetProps } from "../../../../../types/solid-core";
-import { Button } from "primereact/button";
-import { Dialog } from "primereact/dialog";
-import { useResolveS3UrlMutation } from "../../../../../redux/api/fieldApi";
-import Viewer from "viewerjs";
-import "viewerjs/dist/viewer.css";
-
-/**
- * SolidS3FileViewerWidget (PrimeReact version)
- */
-export const SolidS3FileViewerWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
-    const fieldMetadata = fieldContext.fieldMetadata;
-    const fieldLayoutInfo = fieldContext.field;
-    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
-    const value = formik.values[fieldLayoutInfo.attrs.name];
-    const fileType = fieldLayoutInfo.attrs.fileType?.toLowerCase();
-    const downloadAllowed = fieldLayoutInfo.attrs.downloadAllowed !== false;
-    const bucketName = fieldLayoutInfo.attrs.bucketName;
-    const mediaStorageProviderUserKey = fieldLayoutInfo.attrs.mediaStorageProviderUserKey;
-    const isPrivate = fieldLayoutInfo.attrs.isPrivate ? fieldLayoutInfo.attrs.isPrivate : "false";
-
-    const imageRef = useRef<HTMLImageElement | null>(null);
-    const viewerRef = useRef<Viewer | null>(null);
-
-    const [previewUrl, setPreviewUrl] = useState<string>("");
-    const [isLoading, setIsLoading] = useState(false);
-    const [open, setOpen] = useState(false);
-    const [shouldShowViewer, setShouldShowViewer] = useState(false);
-
-    const [resolveS3Url] = useResolveS3UrlMutation();
-
-    const fetchS3Url = async () => {
-        console.log("fetch url called");
-        setIsLoading(true);
-        try {
-            const result = await resolveS3Url({
-                modelName: fieldContext.modelName,
-                fieldName: fieldContext.fieldMetadata.name,
-                s3Key: value,
-                fileType: fileType,
-                bucketName: bucketName,
-                mediaStorageProviderUserKey: mediaStorageProviderUserKey,
-                isPrivate: isPrivate
-            }).unwrap();
-
-            setIsLoading(false);
-            if (result.statusCode == "200") {
-                console.log("fetch url success", result.data.url);
-                return result.data.url;
-            }
-        } catch (e) {
-            console.error("Failed to resolve S3 URL:", e);
-            setIsLoading(false);
-            return null;
-        }
-    };
-
-    const handleDownload = async () => {
-        if (isLoading) return;
-        const url = await fetchS3Url();
-        if (!url) return;
-        const a = document.createElement("a");
-        a.href = url;
-        a.download = value?.split("/").pop() || "file";
-        a.target = "_blank";
-        a.rel = "noopener noreferrer";
-        a.click();
-    };
-
-    const handleView = async () => {
-        console.log("isLoading in view", isLoading);
-        if (isLoading) return;
-        
-        const url = await fetchS3Url();
-        console.log("url after fetch success", url);
-        if (!url) return;
-        
-        setPreviewUrl(url);
-        
-        if (isImage) {
-            // Trigger viewer to show after state update
-            setShouldShowViewer(true);
-        } else {
-            setOpen(true);
-        }
-    };
-
-    const isImage = ["jpeg", "jpg", "png", "gif", "webp"].includes(fileType);
-    const isPDF = fileType === "pdf";
-    const isDownloadOnly = ["xlsx", "xls", "csv", "doc", "docx"].includes(fileType);
-
-    // 🔹 Initialize Viewer.js once image exists
-    useEffect(() => {
-        if (imageRef.current && previewUrl && isImage) {
-            // Destroy existing viewer if any
-            if (viewerRef.current) {
-                viewerRef.current.destroy();
-            }
-
-            // Create new viewer instance
-            viewerRef.current = new Viewer(imageRef.current, {
-                toolbar: {
-                    zoomIn: 1,
-                    zoomOut: 1,
-                    rotateLeft: 1,
-                    rotateRight: 1,
-                    reset: 1,
-                },
-                navbar: false,
-                title: false,
-                transition: true,
-                movable: true,
-                scalable: true,
-                rotatable: true,
-                zoomable: true,
-                zIndex:9999,
-                // Add hidden event to reset state
-                hidden: () => {
-                    setShouldShowViewer(false);
-                }
-            });
-
-            console.log("Viewer initialized");
-        }
-
-        return () => {
-            if (viewerRef.current) {
-                viewerRef.current.destroy();
-                viewerRef.current = null;
-            }
-        };
-    }, [previewUrl, isImage]);
-
-    // 🔹 Show viewer when shouldShowViewer becomes true
-    useEffect(() => {
-        if (shouldShowViewer && viewerRef.current) {
-            console.log("Showing viewer");
-            viewerRef.current.show();
-        }
-    }, [shouldShowViewer]);
-
-    return (
-        <div className="mt-2 flex flex-col gap-2">
-            <p className="m-0 form-field-label font-medium">{fieldLabel}</p>
-
-            {value ? (
-                <div className="flex gap-3 items-center">
-                    {(isImage || isPDF) && (
-                        <Button
-                            icon="pi pi-eye"
-                            type="button"
-                            style={{ minWidth: 66 }}
-                            loading={isLoading}
-                            tooltip={value}
-                            disabled={isLoading}
-                            label={`View ${fileType}`}
-                            size="small"
-                            iconPos="left"
-                            onClick={handleView}
-                        />
-                    )}
-                    {downloadAllowed && (
-                        <Button
-                            size="small"
-                            type="button"
-                            icon="pi pi-download"
-                            tooltip={`Download ${value?.split("/").pop()}`}
-                            loading={isLoading}
-                            onClick={handleDownload}
-                            disabled={isLoading}
-                            className='solid-icon-button' />
-                    )}
-                </div>
-            ) : (
-                <p className="text-sm text-muted-foreground">No file uploaded</p>
-            )}
-
-            {/* Hidden image for Viewer.js - keep visibility hidden instead of display none */}
-            {isImage && previewUrl && (
-                <img
-                    ref={imageRef}
-                    src={previewUrl}
-                    alt={value}
-                    style={{ 
-                        position: "absolute",
-                        visibility: "hidden",
-                        width: "1px",
-                        height: "1px"
-                    }}
-                />
-            )}
-
-            <Dialog
-                header={value}
-                visible={open}
-                modal
-                style={{ width: "80vw", maxHeight: "90vh" }}
-                onHide={() => setOpen(false)}
-                headerClassName='p-1 form-wrapper-title'
-                contentClassName='p-0'
-                contentStyle={{ borderRadius: 6 }}
-            >
-                {previewUrl && isPDF && (
-                    <div
-                        style={{
-                            width: "100%",
-                            height: "75vh",
-                            overflow: "hidden",
-                        }}
-                    >
-                        <iframe
-                            src={previewUrl}
-                            style={{ width: "100%", height: "100%", border: "none" }}
-                        />
-                    </div>
-                )}
-            </Dialog>
-        </div>
-    );
-};

package/src/components/core/form/fields/widgets/SolidShortTextFieldAvatarWidget.tsx

@@ -1,70 +0,0 @@
-
-import { useEffect, useState } from "react";
-import { Message } from "primereact/message";
-import { classNames } from "primereact/utils";
-import { SelectButton } from "primereact/selectbutton";
-import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
-import { RadioButton } from "primereact/radiobutton";
-import { SolidFormFieldWidgetProps } from "../../../../../types/solid-core";
-import { AvatarWidget } from "../../../../../components/core/common/AvatarWidget";
-
-export const SolidShortTextFieldAvatarWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
-    const fieldMetadata = fieldContext.fieldMetadata;
-    const fieldLayoutInfo = fieldContext.field;
-    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
-    const value = formik.values[fieldLayoutInfo.attrs.name];
-    const getInitials = (value: string) => {
-        if (value) {
-            const names = value?.trim().split(' ');
-            const initials =
-                names.length === 1
-                    ? names[0][0]
-                    : names[0][0] + names[names.length - 1][0];
-            return initials.toUpperCase();
-        } else {
-            return ""
-        }
-    };
-
-    const getColorFromInitials = (initials: string) => {
-        let hash = 0;
-        for (let i = 0; i < initials.length; i++) {
-            hash = initials.charCodeAt(i) + ((hash << 5) - hash);
-        }
-        const hue = Math.abs(hash) % 360;
-        return `hsl(${hue}, 60%, 60%)`; // nice pastel color
-    };
-
-    const initials = getInitials(value);
-    const bgColor = getColorFromInitials(initials);
-
-
-    return (
-        <div className="mt-2 flex-column gap-2">
-            <p className="m-0 form-field-label font-medium">{fieldLabel}</p>
-            <div>
-                {value &&
-                    < div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
-                        <div
-                            style={{
-                                width: 20,
-                                height: 20,
-                                borderRadius: '50%',
-                                backgroundColor: bgColor,
-                                color: 'white',
-                                display: 'flex',
-                                alignItems: 'center',
-                                justifyContent: 'center',
-                                fontWeight: 600,
-                                fontSize: 12,
-                            }}
-                        >
-                            {initials}
-                        </div>
-                        <span>{value}</span>
-                    </div>
-                }
-            </div>
-        </div>
-    );
-}

package/src/components/core/form/solidFormViewShimmerLoading.module.css

@@ -1,4 +0,0 @@
-.solidFormViewShimmerLoadingWrapper {
-    height: calc(100vh - 125px);
-    border-top: 1px solid var(--primary-light-color);
-}

package/src/components/core/form/widgets/CustomHtml.tsx

@@ -1,20 +0,0 @@
-
-
-import { SolidFormWidgetProps } from "../../../../types";
-import parse from 'html-react-parser';
-// import Handlebars from "handlebars/dist/handlebars";
-import * as Handlebars from "handlebars";
-
-export const CustomHtml = ({ field, formData, viewMetadata, fieldsMetadata }: SolidFormWidgetProps) => {
-    let { type, attrs, body, children } = field;
-    
-    // TODO: null check on this field required, show a proper error message on the UI suggesting that you are using a CustomHtml widget, however the html is not specified in the layout.
-    const html = attrs.html;
-
-    // TODO: run dompurify to avoid XSS attacks...
-
-    // TODO: assume the html is a handlebars template, we try to do variable replacement on it using formData.
-    const template = Handlebars.compile(html);
-
-    return (<div className={attrs.className}>{parse(template(formData))}</div>)
-}

package/src/components/core/kanban/KanbanBoard.tsx

@@ -1,116 +0,0 @@
-// @ts-nocheck
-import { useState } from "react";
-import { DragDropContext } from "@hello-pangea/dnd";
-import KanbanColumn from "./KanbanColumn";
-
-// Define types for groupData and Grouped Data
-interface Post {
-    id: string;
-    title: string;
-    status: string;
-}
-
-interface GroupData {
-    count: number;
-    records: Post[];
-}
-
-interface ApiResponse {
-    data: {
-        groupedData: Record<string, GroupData>;
-    };
-}
-
-export const KanbanBoard = ({ groupByFieldName, groupedView, kanbanViewData, maxSwimLanesCount, solidKanbanViewMetaData, setKanbanViewData, handleLoadMore, onDragEnd, handleSwimLanePagination, setLightboxUrls, setOpenLightbox, editButtonUrl }: any) => {
-    const [loading, setLoading] = useState<boolean>(true);
-    // State to manage the folded status of each column
-    const [foldedStates, setFoldedStates] = useState<Record<string, boolean>>({});
-
-    // Toggle fold (not yet implemented)
-    const toggleFold = (status: string): void => {
-        setFoldedStates((prevFoldedStates) => ({
-            ...prevFoldedStates,
-            [status]: !prevFoldedStates[status],
-        }));
-    };
-
-    // Render the Kanban board
-    return (
-        //@ts-ignore
-        <div className="solid-kanban-board-wrapper">
-            <DragDropContext onDragEnd={onDragEnd}>
-                <div className="flex gap-4 px-4 md:px-5 py-3 md:py-4 solid-kanban-board-scroll-context">
-                    {/* {Object.entries(kanbanViewData).map(([groupVal, data]) => {
-                    const group = {
-                        label: groupVal,
-                        count: data.count,
-                        folded: foldedStates[groupVal] || false,
-                    };
-
-                    return (
-                        <KanbanColumn
-                            key={groupVal}
-                            groupByField={groupVal}
-                            group={group}
-                            groupData={data.records}
-                            toggleFold={toggleFold}
-                            handleLoadMore={handleLoadMore}
-                        />
-                    );
-                })} */}
-                    {kanbanViewData.map((data: any) => {
-                        // Find the displayName for the groupName from solidKanbanViewMetaData.solidFieldsMetadata
-                        let label = data.groupName;
-                        const fieldMeta = solidKanbanViewMetaData?.solidFieldsMetadata?.[groupByFieldName];
-                        if (
-                            fieldMeta &&
-                            fieldMeta.type === "selectionStatic" &&
-                            Array.isArray(fieldMeta.selectionStaticValues)
-                        ) {
-                            const match = fieldMeta.selectionStaticValues.find(
-                                (v: string) => {
-                                    const [value, displayName] = v.split(":");
-                                    return value === data.groupName;
-                                }
-                            );
-                            if (match) {
-                                label = match.split(":")[1];
-                            }
-                        }
-
-                        const group = {
-                            label,
-                            count: data.groupData.meta.totalRecords,
-                            limit: data.groupData.meta.perPage,
-                            currentPage: data.groupData.meta.currentPage,
-                            folded: foldedStates[data.groupName] || false,
-                        };
-
-                        return (
-                            <KanbanColumn
-                                key={data.groupName}
-                                groupedView={groupedView}
-                                groupByField={data.groupName}
-                                group={group}
-                                solidKanbanViewMetaData={solidKanbanViewMetaData}
-                                groupData={data.groupData.records}
-                                toggleFold={toggleFold}
-                                handleLoadMore={handleLoadMore}
-                                setLightboxUrls={setLightboxUrls}
-                                setOpenLightbox={setOpenLightbox}
-                                editButtonUrl={editButtonUrl}
-                            />
-                        );
-                    })}
-                    {groupedView !== false && kanbanViewData.length < maxSwimLanesCount &&
-                        <div>
-                            <a size="small" className="kaban-swimlane-load-more" style={{ textWrap: 'nowrap' }} text onClick={handleSwimLanePagination}>Load More...({maxSwimLanesCount - kanbanViewData.length})</a>
-                        </div>
-                    }
-                </div>
-            </DragDropContext>
-        </div>
-    );
-}
-
-export default KanbanBoard;