@solidxai/core-ui 0.1.1 → 0.1.3

package/src/components/core/list/columns/SolidMediaMultipleColumn.tsx

@@ -1,301 +0,0 @@
-
-import React, { useState } from 'react';
-import { Column } from "primereact/column";
-import { SolidListViewColumnParams } from '../SolidListViewColumn';
-import { Button } from 'primereact/button';
-import { SolidMediaListFieldWidgetProps } from '../../../../types/solid-core';
-import { getExtensionComponent } from '../../../../helpers/registry';
-import { classNames } from 'primereact/utils';
-import { FileReaderExt } from '../../../../components/common/FileReaderExt';
-import { Dialog } from 'primereact/dialog';
-
-// Helpers
-const isImageFile = (url: string) => /\.(jpg|jpeg|png|gif|bmp|webp)$/i.test(url);
-const isVideoFile = (url: string) => /\.(mp4|webm|ogg)$/i.test(url);
-const isAudioFile = (url: string) => /\.(mp3|wav|ogg)$/i.test(url);
-
-const downloadOnlyExt = [
-    "txt", "zip", "rar",
-    "doc", "docx",
-    "xls", "xlsx",
-    "ppt", "pptx",
-    "pdf", "csv"
-];
-
-const isDocumentType = (url: string) => {
-    const ext = url.split("?")[0].split(".").pop()?.toLowerCase();
-    return ext ? downloadOnlyExt.includes(ext) : false;
-};
-
-const downloadFile = (url: string, name: string = "") => {
-    const link = document.createElement("a");
-    link.href = url;
-    link.download = name;
-    link.target = "_blank";
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-};
-
-
-
-// Thumbnail preview component
-const MediaPreview = ({ src, onClick }: { src: string; onClick: (event: React.MouseEvent) => void }) => {
-    const [isBroken, setIsBroken] = useState(false);
-
-    const handleClick = (event: React.MouseEvent) => {
-        onClick(event);
-    };
-
-    if (!isBroken) {
-        if (isImageFile(src)) {
-            return (
-                <img
-                    src={src}
-                    alt="media"
-                    className="shadow-2 border-round"
-                    width={40}
-                    height={40}
-                    style={{ objectFit: "cover" }}
-                    onError={() => setIsBroken(true)}
-                    onClick={handleClick}
-                />
-            );
-        }
-
-        if (isVideoFile(src)) {
-            return (
-                <video
-                    src={src}
-                    width={40}
-                    height={40}
-                    className="shadow-2 border-round"
-                    style={{ objectFit: "cover" }}
-                    onError={() => setIsBroken(true)}
-                    onClick={handleClick}
-                    muted
-                />
-            );
-        }
-
-        if (isAudioFile(src)) {
-            return (
-                <div
-                    className="shadow-2 border-round flex align-items-center justify-content-center bg-gray-100"
-                    style={{ width: 40, height: 40 }}
-                    onClick={handleClick}
-                >
-                    <i className="pi pi-volume-up text-xl text-gray-600"></i>
-                </div>
-            );
-        }
-    }
-
-    return (
-        <div
-            style={{ width: 40, height: 40, display: "flex", alignItems: "center", justifyContent: "center" }}
-            onClick={handleClick}
-        >
-            <i className={classNames("pi pi-file", "text-3xl text-gray-400")}></i>
-        </div>
-    );
-};
-
-
-// Column Component
-const SolidMediaMultipleColumn = ({ solidListViewMetaData, fieldMetadata, column, setLightboxUrls, setOpenLightbox }: SolidListViewColumnParams) => {
-    const filterable = false;
-    const showFilterOperator = false;
-    const columnDataType = undefined;
-    const header = column.attrs.label ?? fieldMetadata.displayName;
-
-    return (
-        <Column
-            key={fieldMetadata.name}
-            field={fieldMetadata.name}
-            header={header}
-            body={(rowData) => {
-                let viewWidget = column.attrs.viewWidget;
-                if (!viewWidget) {
-                    viewWidget = 'DefaultMediaMultipleListWidget';
-                }
-                let DynamicWidget = getExtensionComponent(viewWidget);
-                const widgetProps: SolidMediaListFieldWidgetProps = {
-                    rowData,
-                    solidListViewMetaData,
-                    fieldMetadata,
-                    column,
-                    setLightboxUrls,
-                    setOpenLightbox
-                }
-                return (
-                    <>
-                        {
-                            DynamicWidget && <DynamicWidget {...widgetProps} />
-                        }
-                    </>
-                )
-            }}
-            sortable={column.attrs.sortable}
-            dataType={columnDataType}
-            showFilterOperator={showFilterOperator}
-            filterPlaceholder={`Search by ${fieldMetadata.displayName}`}
-            style={{ minWidth: "12rem" }}
-            headerClassName="table-header-fs"
-        />
-    );
-};
-
-export default SolidMediaMultipleColumn;
-
-// Default multiple widget
-export const DefaultMediaMultipleListWidget = ({ rowData, fieldMetadata, setLightboxUrls, setOpenLightbox }: SolidMediaListFieldWidgetProps) => {
-    const [isShowAllFiles, setShowAllFiles] = useState(false);
-
-    if (!rowData?._media?.[fieldMetadata.name]) return null;
-
-    const fullrecord = rowData._media[fieldMetadata.name]?.map((file: any) => ({
-        name: file.originalFileName,
-        type: file.mimeType,
-        size: file.fileSize,
-        id: file.id,
-        fileUrl: file._full_url
-    }));
-
-
-    const formatFileSize = (size: number) =>
-        size >= 1024 * 1024 ? `${(size / (1024 * 1024)).toFixed(1)} MB` : `${(size / 1024).toFixed(1)} KB`;
-
-
-    const handleFileView = (file: any) => {
-        const fileUrl = file?.fileUrl || "";
-        const cleanUrl = fileUrl.split("?")[0];
-        const ext = cleanUrl.split(".").pop()?.toLowerCase();
-
-        if (ext && downloadOnlyExt.includes(ext)) {
-            downloadFile(file?.fileUrl, "")
-
-        } else {
-            setLightboxUrls?.([{ src: file.fileUrl, downloadUrl: file.fileUrl }]);
-            setOpenLightbox?.(true);
-        }
-    };
-
-
-
-    return fullrecord.length > 0 ? (
-        <div className='flex gap-2 align-items-end'>
-
-            {/* THUMBNAIL - FIXED BEHAVIOR */}
-            <MediaPreview
-                src={fullrecord[0]?.fileUrl}
-                onClick={(event) => {
-                    event.stopPropagation();
-
-                    const cleanUrl = fullrecord[0]?.fileUrl.split("?")[0];
-                    const ext = cleanUrl.split(".").pop()?.toLowerCase();
-
-                    if (ext && downloadOnlyExt.includes(ext) && fullrecord?.length > 1) {
-                        setShowAllFiles(true)
-                        return;
-                    }
-
-                    else if (ext && downloadOnlyExt.includes(ext)) {
-                        downloadFile(fullrecord[0]?.fileUrl, "")
-                        return;
-                    }
-
-                    // FIRST FILE IS MEDIA ⇒ OPEN LIGHTBOX
-                    const urlsWithType = fullrecord.map((file: any) => ({
-                        src: file.fileUrl,
-                        downloadUrl: file.fileUrl,
-                    }));
-                    setLightboxUrls(urlsWithType);
-                    setOpenLightbox(true);
-                }}
-            />
-
-                {fullrecord?.length > 1 && <span
-                        style={{
-                            color: "#0895CD",
-                            fontWeight: "bold",
-                            cursor: "pointer",
-                            marginLeft: "4px"
-                        }}
-                        onClick={(event) => {
-                            event.stopPropagation();
-    
-                            if (isDocumentType(fullrecord[0]?.fileUrl)) {
-                                setShowAllFiles(true);
-                            } else {
-                                const urlsWithType = fullrecord.map((file: any) => ({
-                                    src: file.fileUrl,
-                                    downloadUrl: file.fileUrl
-                                }));
-                                setLightboxUrls(urlsWithType);
-                                setOpenLightbox(true);
-                            }
-                        }}
-                    >
-                        +{fullrecord.length - 1}
-                   </span>
-                }
-
-             
-
-            {/* VIEW ALL DIALOG */}
-            <Dialog
-                visible={isShowAllFiles}
-                header="Items Uploaded"
-                modal
-                onHide={() => setShowAllFiles(false)}
-                // style={{ minWidth: 450 }}
-                style={{ width: '32rem' }}
-                onClick={(event) => event.stopPropagation()}
-                breakpoints={{ '591px': '94vw'}}
-            >
-                {fullrecord?.map((file: any) => {
-                    const fileId = `${file.name}-${file.size}`;
-                    return (
-                        <div key={fileId} className="solid-file-upload-wrapper mb-3">
-                            <div className="flex align-items-center gap-2">
-
-                                <FileReaderExt fileDetails={file} />
-
-                                <div className="w-full flex flex-column gap-1">
-                                    <div className="flex align-items-center justify-content-between">
-
-                                        <p
-                                            className="font-normal w-11 text-primary m-0"
-                                            style={{ cursor: "pointer" }}
-                                            onClick={() => handleFileView(file)}
-                                        >
-                                            {file?.name}
-                                        </p>
-
-                                        <Button
-                                            type="button"
-                                            text
-                                            icon="pi pi-download"
-                                            size="small"
-                                            onClick={() => {
-                                                downloadFile(file?.fileUrl, "")
-                                            }}
-                                            style={{ height: 16, width: 16 }}
-                                        />
-                                    </div>
-
-                                    <div className="text-sm">{formatFileSize(file.size)}</div>
-                                </div>
-
-                            </div>
-                        </div>
-                    )
-                }
-                )}
-            </Dialog>
-        </div>
-    ) : (
-        <div style={{ height: 40, width: 40 }} />
-    );
-};

package/src/components/core/list/columns/SolidMediaSingleColumn.tsx

@@ -1,170 +0,0 @@
-
-import React, { useState } from 'react';
-import { Column } from "primereact/column";
-import { SolidListViewColumnParams } from '../SolidListViewColumn';
-import { classNames } from 'primereact/utils';
-import { SolidMediaListFieldWidgetProps } from '../../../../types/solid-core';
-import { getExtensionComponent } from '../../../../helpers/registry';
-
-// Helpers for file type detection
-const isImageFile = (url: string) => /\.(jpg|jpeg|png|gif|bmp|webp)$/i.test(url);
-const isVideoFile = (url: string) => /\.(mp4|webm|ogg)$/i.test(url);
-const isAudioFile = (url: string) => /\.(mp3|wav|ogg)$/i.test(url);
-
-// Extensions that should be downloaded directly
-const downloadOnlyExt = [
-    "txt", "zip", "rar",
-    "doc", "docx",
-    "xls", "xlsx",
-    "ppt", "pptx",
-    "pdf"
-];
-
-// Media component with fallback for broken links
-const MediaWithFallback = ({ src, alt, onClick }: { src: string; alt: string; onClick: (event: React.MouseEvent) => void }) => {
-    const [isBroken, setIsBroken] = useState(false);
-
-    const handleClick = (event: React.MouseEvent) => {
-        event.stopPropagation();
-        const cleanUrl = src.split("?")[0];
-        const ext = cleanUrl.split(".").pop()?.toLowerCase();
-
-        if (ext && downloadOnlyExt.includes(ext)) {
-            // Trigger download for docs/archives
-            const link = document.createElement("a");
-            link.href = src;
-            link.download = "";
-            link.target = "_blank";
-            document.body.appendChild(link);
-            link.click();
-            document.body.removeChild(link);
-        } else {
-            onClick(event);
-        }
-    };
-
-    if (!isBroken) {
-        if (isImageFile(src)) {
-            return (
-                <img
-                    src={src}
-                    alt={alt}
-                    className="shadow-2 border-round"
-                    width={40}
-                    height={40}
-                    style={{ objectFit: "cover", cursor: "pointer" }}
-                    onError={() => setIsBroken(true)}
-                    onClick={handleClick}
-                />
-            );
-        }
-
-        if (isVideoFile(src)) {
-            return (
-                <video
-                    src={src}
-                    width={40}
-                    height={40}
-                    className="shadow-2 border-round"
-                    style={{ objectFit: "cover", cursor: "pointer" }}
-                    onError={() => setIsBroken(true)}
-                    onClick={handleClick}
-                    muted
-                />
-            );
-        }
-
-        if (isAudioFile(src)) {
-            return (
-                <div
-                    className="shadow-2 border-round flex align-items-center justify-content-center bg-gray-100"
-                    style={{ width: 40, height: 40, cursor: "pointer" }}
-                    onClick={handleClick}
-                >
-                    <i className="pi pi-volume-up text-xl text-gray-600"></i>
-                </div>
-            );
-        }
-    }
-
-    // fallback icon (docs/others)
-    return (
-        <div
-            style={{ width: 40, height: 40, display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer" }}
-            onClick={handleClick}
-        >
-            <i className={classNames("pi pi-file", "text-3xl text-gray-400")}></i>
-        </div>
-    );
-};
-
-// Main column renderer
-const SolidMediaSingleColumn = ({ solidListViewMetaData, fieldMetadata, column, setLightboxUrls, setOpenLightbox }: SolidListViewColumnParams) => {
-    const header = column.attrs.label ?? fieldMetadata.displayName;
-
-    return (
-        <Column
-            key={fieldMetadata.name}
-            field={fieldMetadata.name}
-            header={header}
-            body={(rowData) => {
-                let viewWidget = column.attrs.viewWidget;
-                if (!viewWidget) {
-                    viewWidget = 'DefaultMediaSingleListWidget';
-                }
-                let DynamicWidget = getExtensionComponent(viewWidget);
-                const widgetProps: SolidMediaListFieldWidgetProps = {
-                    rowData,
-                    solidListViewMetaData,
-                    fieldMetadata,
-                    column,
-                    setLightboxUrls,
-                    setOpenLightbox
-                }
-                return (
-                    <>
-                        {DynamicWidget && <DynamicWidget {...widgetProps} />}
-                    </>
-                )
-            }}
-            sortable={column.attrs.sortable}
-            showFilterOperator={false}
-            filterPlaceholder={`Search by ${fieldMetadata.displayName}`}
-            style={{ minWidth: "12rem" }}
-            headerClassName="table-header-fs"
-        />
-    );
-};
-
-export default SolidMediaSingleColumn;
-
-// Default widget for single media field
-export const DefaultMediaSingleListWidget = ({
-    rowData,
-    solidListViewMetaData,
-    fieldMetadata,
-    column,
-    setLightboxUrls,
-    setOpenLightbox
-}: SolidMediaListFieldWidgetProps) => {
-    if (!rowData?._media?.[fieldMetadata.name]) return null;
-    const mediaUrls = rowData._media[fieldMetadata.name].map((i: any) => i._full_url);
-
-    const firstUrl = mediaUrls[0];
-    if (!firstUrl) return <div style={{ height: 40, width: 40 }} />;
-
-    return (
-        <MediaWithFallback
-            src={firstUrl}
-            alt="media"
-            onClick={(event) => {
-                // Only open lightbox for image, video, or audio
-                event.stopPropagation()
-                if (isImageFile(firstUrl) || isVideoFile(firstUrl) || isAudioFile(firstUrl)) {
-                    setLightboxUrls([{ src: firstUrl, downloadUrl: firstUrl }]);
-                    setOpenLightbox(true);
-                }
-            }}
-        />
-    );
-};

package/src/components/core/list/columns/SolidRelationColumn.tsx

@@ -1,21 +0,0 @@
-
-import { SolidListViewColumnParams } from '../SolidListViewColumn';
-import SolidRelationManyToManyColumn from './relations/SolidRelationManyToManyColumn';
-import SolidRelationManyToOneColumn from './relations/SolidRelationManyToOneColumn';
-import SolidRelationOneToManyColumn from './relations/SolidRelationOneToManyColumn';
-
-const SolidRelationColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {
-    if (fieldMetadata.relationType === 'many-to-one') {
-        return SolidRelationManyToOneColumn({ solidListViewMetaData, fieldMetadata, column });
-    }
-    if (fieldMetadata.relationType === 'one-to-many') {
-        return SolidRelationOneToManyColumn({ solidListViewMetaData, fieldMetadata, column });
-    }
-    if (fieldMetadata.relationType === 'many-to-many') {
-        return SolidRelationManyToManyColumn({ solidListViewMetaData, fieldMetadata, column });
-    }
-    // TODO: Support one-to-many
-    // TODO: Support many-to-many
-};
-
-export default SolidRelationColumn;

package/src/components/core/list/columns/SolidRichTextColumn.tsx

@@ -1,9 +0,0 @@
-
-import { SolidListViewColumnParams } from '../SolidListViewColumn';
-import SolidShortTextColumn from './SolidShortTextColumn';
-
-const SolidRichTextColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {
-    return SolidShortTextColumn({ solidListViewMetaData, fieldMetadata, column });
-};
-
-export default SolidRichTextColumn;

package/src/components/core/list/columns/SolidSelectionDynamicColumn.tsx

@@ -1,80 +0,0 @@
-
-import { FilterMatchMode } from 'primereact/api';
-import { Column, ColumnFilterElementTemplateOptions } from "primereact/column";
-import { FormEvent } from "primereact/ts-helpers";
-import { SolidListViewColumnParams } from '../SolidListViewColumn';
-import { InputTypes, SolidVarInputsFilterElement } from "../SolidVarInputsFilterElement";
-import SolidTableRowCell from '../SolidTableRowCell';
-import { getExtensionComponent } from '../../../../helpers/registry';
-import { SolidListFieldWidgetProps } from '../../../../types/solid-core';
-
-const SolidSelectionDynamicColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {
-    const filterable = column.attrs.filterable;
-    const showFilterOperator = false;
-    const columnDataType = fieldMetadata.selectionValueType === 'int' ? 'numeric' : 'text';
-    const filterMatchModeOptions = [
-        { label: 'In', value: FilterMatchMode.IN },
-        { label: 'Not In', value: FilterMatchMode.NOT_IN },
-    ];
-
-    const filterTemplate = (options: ColumnFilterElementTemplateOptions) => {
-
-        return (
-            <SolidVarInputsFilterElement
-                values={options.value}
-                onChange={(e: FormEvent<HTMLInputElement>) => options.filterCallback(e, options.index)}
-                inputType={InputTypes.SelectionDynamic}
-                solidListViewMetaData={solidListViewMetaData}
-                fieldMetadata={fieldMetadata}
-                column={column}
-            >
-            </SolidVarInputsFilterElement>
-        )
-    }
-
-    const truncateAfter = solidListViewMetaData?.data?.solidView?.layout?.attrs?.truncateAfter
-    const header = column.attrs.label ?? fieldMetadata.displayName;
-
-    return (
-        <Column
-            key={fieldMetadata.name}
-            field={fieldMetadata.name}
-            // header={header}
-            // className="text-sm"
-            sortable={column.attrs.sortable}
-            // filter={filterable}
-            dataType={columnDataType}
-            showFilterOperator={showFilterOperator}
-            filterMatchModeOptions={filterMatchModeOptions}
-            filterElement={filterTemplate}
-            filterPlaceholder={`Search by ${fieldMetadata.displayName}`}
-            // style={{ minWidth: "12rem" }}
-            // headerClassName="table-header-fs"
-            header={() => {
-                return (<div style={{ maxWidth: truncateAfter ? `${truncateAfter}ch` : '30ch', whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }}>{header}</div>)
-            }}
-            body={(rowData) => {
-                let viewWidget = column.attrs.viewWidget;
-                if (!viewWidget) {
-                    viewWidget = 'DefaultTextListWidget';
-                }
-                let DynamicWidget = getExtensionComponent(viewWidget);
-                const widgetProps: SolidListFieldWidgetProps = {
-                    rowData,
-                    solidListViewMetaData,
-                    fieldMetadata,
-                    column
-                }
-                return (
-                    <>
-                        {DynamicWidget && <DynamicWidget {...widgetProps} />}
-                    </>
-                )
-            }
-            }
-        ></Column>
-    );
-
-};
-
-export default SolidSelectionDynamicColumn;

package/src/components/core/list/columns/SolidSelectionStaticColumn.tsx

@@ -1,81 +0,0 @@
-
-import { FilterMatchMode } from 'primereact/api';
-import { Column, ColumnFilterElementTemplateOptions } from "primereact/column";
-import { FormEvent } from "primereact/ts-helpers";
-import { SolidListViewColumnParams } from '../SolidListViewColumn';
-import { InputTypes, SolidVarInputsFilterElement } from "../SolidVarInputsFilterElement";
-import SolidTableRowCell from '../SolidTableRowCell';
-import { getExtensionComponent } from '../../../../helpers/registry';
-import { SolidListFieldWidgetProps } from '../../../../types/solid-core';
-
-
-const SolidSelectionStaticColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {
-
-    const filterable = column.attrs.filterable;
-    const showFilterOperator = false;
-    const columnDataType = fieldMetadata.selectionValueType === 'int' ? 'numeric' : 'text';
-    const filterMatchModeOptions = [
-        { label: 'In', value: FilterMatchMode.IN },
-        { label: 'Not In', value: FilterMatchMode.NOT_IN },
-    ];
-
-    const filterTemplate = (options: ColumnFilterElementTemplateOptions) => {
-
-        return (
-            <SolidVarInputsFilterElement
-                values={options.value}
-                onChange={(e: FormEvent<HTMLInputElement>) => options.filterCallback(e, options.index)}
-                inputType={InputTypes.SelectionStatic}
-                solidListViewMetaData={solidListViewMetaData}
-                fieldMetadata={fieldMetadata}
-                column={column}
-            >
-            </SolidVarInputsFilterElement>
-        )
-    }
-
-    const truncateAfter = solidListViewMetaData?.data?.solidView?.layout?.attrs?.truncateAfter
-    const header = column.attrs.label ?? fieldMetadata.displayName;
-
-    return (
-        <Column
-            key={fieldMetadata.name}
-            field={fieldMetadata.name}
-            // header={header}
-            // className="text-sm"
-            sortable={column.attrs.sortable}
-            // filter={filterable}
-            dataType={columnDataType}
-            showFilterOperator={showFilterOperator}
-            filterMatchModeOptions={filterMatchModeOptions}
-            filterElement={filterTemplate}
-            filterPlaceholder={`Search by ${fieldMetadata.displayName}`}
-            // style={{ minWidth: "12rem" }}
-            // headerClassName="table-header-fs"
-            header={() => {
-                return (<div style={{ maxWidth: truncateAfter ? `${truncateAfter}ch` : '30ch', whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }}>{header}</div>)
-            }}
-            body={(rowData) => {
-                let viewWidget = column.attrs.viewWidget;
-                if (!viewWidget) {
-                    viewWidget = 'DefaultTextListWidget';
-                }
-                let DynamicWidget = getExtensionComponent(viewWidget);
-                const widgetProps: SolidListFieldWidgetProps = {
-                    rowData,
-                    solidListViewMetaData,
-                    fieldMetadata,
-                    column
-                }
-                return (
-                    <>
-                        {DynamicWidget && <DynamicWidget {...widgetProps} />}
-                    </>
-                )
-            }
-            }
-        ></Column >
-    );
-};
-
-export default SolidSelectionStaticColumn;