npm - @solidxai/core-ui - Versions diffs - 0.1.1 → 0.1.2 - Mend

@solidxai/core-ui 0.1.1 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (962) hide show

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

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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;