@solidxai/core-ui 0.1.0 → 0.1.2

package/src/components/core/list/SolidListViewShimmerLoading.tsx

@@ -1,78 +0,0 @@
-import { Skeleton } from 'primereact/skeleton'
-import React from 'react'
-
-export const SolidListViewShimmerLoading = () => {
-    const rows = Array.from({ length: 14 });
-    return (
-        <div className='h-screen surface-0'>
-            {/* <div className="page-header pl-2 ">
-                <div className='flex align-items-center gap-3'>
-                    <Skeleton width="50px" height='1.4rem' className='md:h-1.3rem border-round-lg '></Skeleton>
-                    <Skeleton width="300px" className='border-round-lg hidden md:flex'></Skeleton>
-                </div>
-                <div className='flex align-items-center gap-3'>
-                    <Skeleton width="2.7rem" height="1.6rem" className="md:w-4rem md:h-2rem" />
-                    <Skeleton width="2.7rem" height="1.6rem" className="md:w-4rem md:h-2rem" />
-                    <Skeleton width="2.7rem" height="1.6rem" className="md:w-4rem md:h-2rem flex md:hidden" />
-                </div>
-            </div> */}
-            <div className='solid-list-skeleton-wrapper'>
-                <table className="solid-list-skeleton-table" style={{ borderCollapse: 'collapse', width: '100%' }}>
-                    <thead>
-                        <tr className="solid-list-skeleton-header">
-                            <th className="solid-list-skeleton-col-1">
-                                <Skeleton width="16px" height='16px' className='border-round-xs' />
-                            </th>
-                            <th className="solid-list-skeleton-col-2">
-                                <Skeleton width="70px" className='border-round-lg' />
-                            </th>
-                            <th className="solid-list-skeleton-col-3">
-                                <Skeleton width="90px" className='border-round-lg' />
-                            </th>
-                            <th className="solid-list-skeleton-col-4">
-                                <Skeleton width="80px" className='border-round-lg' />
-                            </th>
-                            <th className="solid-list-skeleton-col-5">
-                                <Skeleton width="90px" className='border-round-lg' />
-                            </th>
-                            <th className="solid-list-skeleton-col-6">
-                                <Skeleton width="100px" className='border-round-lg' />
-                            </th>
-                            <th className="solid-list-skeleton-col-7">
-                                <Skeleton width="30px" className='border-round-lg' />
-                            </th>
-                            <th className="solid-list-skeleton-col-8">
-                                <Skeleton width="30px" className='border-round-lg' />
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {rows.map((_, i) => (
-                            <tr className="solid-list-skeleton-row" key={i}>
-                                <td><Skeleton width="16px" height='16px' className='border-round-xs'/></td>
-                                <td><Skeleton width="50%" /></td>
-                                <td><Skeleton width="50%" /></td>
-                                <td><Skeleton width="50%" /></td>
-                                <td><Skeleton width="50%" /></td>
-                                <td><Skeleton width="50%" /></td>
-                                <td><Skeleton shape="circle" height='15px' width='15px' /></td>
-                                <td><Skeleton width="5px" height='20px' /></td>
-                            </tr>
-                        ))}
-                    </tbody>
-                </table>
-                <div className='solid-list-skeleton-footer flex align-items-center justify-content-between'>
-                    <div className='flex align-items-center gap-3'>
-                        <Skeleton width="5rem" height="1rem"></Skeleton>
-                        <Skeleton width="30px" height='15px' className='border-round-sm'></Skeleton>
-                    </div>
-                    <div className='flex align-items-center gap-3'>
-                        <Skeleton width="70px"></Skeleton>
-                        <Skeleton width="10px" height='15px' className='border-round-sm'></Skeleton>
-                        <Skeleton width="15px" height='15px' className='border-round-sm'></Skeleton>
-                    </div>
-                </div>
-            </div>
-        </div>
-    )
-}

package/src/components/core/list/SolidListViewWrapper.module.css

@@ -1,49 +0,0 @@
-.ListContentWrapper{
-  transition: width 0.3s ease;
-  min-width: 0;
-  border-right: 1px solid var(--primary-light-color);
-}
-
-.SolidXAIFloatingBtn {
-    position: absolute;
-    top: 50%;
-    right: -1px;
-    /* transform: translateY(-50%) rotate(-90deg); */
-    z-index: 1000;
-    font-size: 0.875rem;
-    background-color: #eff1f4;
-    color: var(--secondary-dark-color);
-    white-space: nowrap;
-    padding: 0.75rem 0.5rem;
-    border-radius: 4px 4px 4px 0;
-    border-top: 1px solid var(--primary-light-color);
-    border-right: 1px solid var(--primary-light-color);
-    border-bottom: 1px solid var(--primary-light-color);
-    border-left: none;
-    display: inline-block;
-    writing-mode: vertical-rl;
-    transform: rotate(180deg);
-    width: 30px;
-    transition: right 0.3s;
-    margin-top : -50px;
-    cursor: pointer;
-    box-shadow:
-    0 -4px 6px -4px rgba(0, 0, 0, 0.1),
-    4px 0 6px -4px rgba(0, 0, 0, 0.1),
-    0 4px 6px -4px rgba(0, 0, 0, 0.1);
-  }
-
-  .SolidXAIListPanel {
-    position: fixed !important;
-    top: 0;
-    right: -380px; /* Hidden by default */
-    width: 380px;
-    height: 100vh;
-    transition: right 0.3s ease;
-    z-index: 999;
-    border-left: 1px solid var(--primary-light-color);
-  }
-  
-  .SolidXAIListPanelOpen {
-    right: 0;
-  }

package/src/components/core/list/SolidListingHeader.tsx

@@ -1,41 +0,0 @@
-import { usePathname } from "../../../hooks/usePathname";
-import { plural } from "pluralize";
-import { } from "react";
-
-
-const SolidListingHeader = () => {
-  const path = usePathname();
-  const getHeading = path.split('/').slice(-2, -1)[0].replace(/-/g, ' ').replace(/\b\w/g, char => char.toUpperCase());
-  const pathSegments = path.split('/');
-
-
-  return (
-    <>
-      {pathSegments[pathSegments.length - 1] === "list" &&
-
-        <div
-          className="flex justify-content-between align-items-center px-5 relative lg:static"
-          style={{ height: "60px", minHeight: 60, backgroundColor: '#f6f6f9' }}
-        >
-          <div className="flex align-items-center">
-            <div className="">
-              <div className='text-xl font-bold'>
-                All {plural(getHeading)}
-              </div>
-            </div>
-          </div>
-          {/* <GlobalSearch /> */}
-          <div className="flex align-items-center">
-            <div>
-              {/* <FilterMenu></FilterMenu> */}
-            </div>
-          </div>
-          <div className="flex align-items-center">
-          </div>
-        </div>
-      }
-    </>
-
-  );
-};
-export default SolidListingHeader;

package/src/components/core/list/SolidManyToOneFilterElement.tsx

@@ -1,60 +0,0 @@
-
-import { createSolidEntityApi } from "../../../redux/api/solidEntityApi";
-import { InputTypes } from "./SolidVarInputsFilterElement"
-import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
-import { useState } from "react";
-import qs from "qs";
-
-
-export const SolidManyToOneFilterElement = ({ value, updateInputs, index, fieldMetadata }: any) => {
-
-    const entityApi = createSolidEntityApi(fieldMetadata.relationCoModelSingularName);
-    const { useLazyGetSolidEntitiesQuery } = entityApi;
-    const [triggerGetSolidEntities] = useLazyGetSolidEntitiesQuery();
-
-    const [autoCompleteItems, setAutoCompleteItems] = useState([]);
-    const autoCompleteSearch = async (event: AutoCompleteCompleteEvent) => {
-
-        // Get the list view layout & metadata first. 
-        const queryData = {
-            offset: 0,
-            limit: 10,
-            filters: {
-                [fieldMetadata?.relationModel?.userKeyField?.name]: {
-                    $containsi: event.query
-                }
-            }
-        };
-
-        const autocompleteQs = qs.stringify(queryData, {
-            encodeValuesOnly: true,
-        });
-
-        // TODO: do error handling here, possible errors like modelname is incorrect etc...
-        const autocompleteResponse = await triggerGetSolidEntities(autocompleteQs);
-
-        // TODO: if no data found then can we show no matching "entities", where entities can be replaced with the model plural name,
-        const autocompleteData = autocompleteResponse.data;
-
-        if (autocompleteData) {
-            const autoCompleteItems = autocompleteData.records.map((item: any) => {
-                return {
-                    label: item[fieldMetadata?.relationModel?.userKeyField?.name],
-                    value: item['id']
-                }
-            });
-            setAutoCompleteItems(autoCompleteItems);
-        }
-    }
-
-    return (
-        <AutoComplete
-            field="label"
-            value={value}
-            suggestions={autoCompleteItems}
-            completeMethod={autoCompleteSearch}
-            onChange={(e) => updateInputs(index, e.value)}
-            className="solid-standard-autocomplete"
-        />
-    )
-}

package/src/components/core/list/SolidSelectionDynamicFilterElement.tsx

@@ -1,50 +0,0 @@
-
-import { useLazyGetSelectionDynamicValuesQuery } from "../../../redux/api/fieldApi";
-import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
-import qs from "qs";
-import { useState } from "react";
-
-
-export const SolidSelectionDynamicFilterElement = ({ value, updateInputs, index, fieldMetadata }: any) => {
-
-
-    // selection dynamic specific code. 
-    const [triggerGetSelectionDynamicValues] = useLazyGetSelectionDynamicValuesQuery();
-    const [selectionDynamicItems, setSelectionDynamicItems] = useState([]);
-    const selectionDynamicSearch = async (event: AutoCompleteCompleteEvent) => {
-
-        // Get the list view layout & metadata first. 
-        const queryData = {
-            offset: 0,
-            limit: 10,
-            query: event.query,
-            id: fieldMetadata.id
-        };
-
-        const sdQs = qs.stringify(queryData, {
-            encodeValuesOnly: true,
-        });
-
-        // TODO: do error handling here, possible errors like modelname is incorrect etc...
-        const sdResponse = await triggerGetSelectionDynamicValues(sdQs);
-
-        // TODO: if no data found then can we show no matching "entities", where entities can be replaced with the model plural name,
-        const sdData = sdResponse.data.data;
-
-        // @ts-ignore
-        setSelectionDynamicItems(sdData);
-    }
-
-
-    return (
-
-        <AutoComplete
-            field="label"
-            value={value}
-            dropdown
-            className="w-full solid-standard-autocomplete"
-            suggestions={selectionDynamicItems}
-            completeMethod={selectionDynamicSearch}
-            onChange={(e) => updateInputs(index, e.value)} />
-    )
-}

package/src/components/core/list/SolidSelectionStaticFilterElement.tsx

@@ -1,32 +0,0 @@
-
-import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
-import { useState } from "react";
-
-
-export const SolidSelectionStaticFilterElement = ({ value, updateInputs, index, fieldMetadata }: any) => {
-
-    // selection dynamic specific code. 
-    const [selectionStaticItems, setSelectionStaticItems] = useState([]);
-    const selectionStaticSearch = (event: AutoCompleteCompleteEvent) => {
-        const selectionStaticData = fieldMetadata.selectionStaticValues.map((i: string) => {
-            return {
-                label: i.split(":")[1],
-                value: i.split(":")[0]
-            }
-        });
-        const suggestionData = selectionStaticData.filter((t: any) => t.value.toLowerCase().startsWith(event.query.toLowerCase()));
-        setSelectionStaticItems(suggestionData)
-    }
-
-    return (
-
-        <AutoComplete
-            field="label"
-            value={value}
-            dropdown
-            className="w-full solid-standard-autocomplete"
-            suggestions={selectionStaticItems}
-            completeMethod={selectionStaticSearch}
-            onChange={(e) => updateInputs(index, e.value)} />
-    )
-}

package/src/components/core/list/SolidTableRowCell.tsx

@@ -1,35 +0,0 @@
-import { Tooltip } from "primereact/tooltip";
-
-const SolidTableRowCell = ({ value, truncateAfter }: { value: string; truncateAfter?: number }) => {
-    const safeValue = value !== null && value !== undefined ? String(value) : "";
-    // Utility function to detect if value contains HTML
-    const isHTML = (str: string) => /<\/?[a-z][\s\S]*>/i.test(str);
-
-    // Utility function to strip HTML tags
-    const stripHTML = (str: string) => str.replace(/<[^>]+>/g, '');
-
-    const displayValue = isHTML(safeValue) ? stripHTML(safeValue) : safeValue;
-
-    return (
-        <div className="flex align-items-center">
-            <div
-                className="solid-table-row"
-                style={truncateAfter ? { maxWidth: `${truncateAfter}ch` } : {}}
-            // title={truncateAfter ? displayValue : undefined}
-            >
-                {displayValue}
-            </div>
-            {truncateAfter && displayValue.length > truncateAfter &&
-                <>
-                    <Tooltip target=".solid-field-tooltip-icon" />
-                    <i className="pi pi-info-circle solid-field-tooltip-icon"
-                        data-pr-tooltip={displayValue}
-                    />
-                </>
-            }
-        </div>
-    );
-
-};
-
-export default SolidTableRowCell;

package/src/components/core/list/SolidVarInputsFilterElement.tsx

@@ -1,184 +0,0 @@
-
-import { Button } from "primereact/button";
-import { Calendar } from "primereact/calendar";
-import { InputNumber } from "primereact/inputnumber";
-import { InputText } from "primereact/inputtext";
-import { useEffect, useState } from "react";
-import { SolidManyToOneFilterElement } from "./SolidManyToOneFilterElement";
-import { SolidSelectionDynamicFilterElement } from "./SolidSelectionDynamicFilterElement";
-import { SolidSelectionStaticFilterElement } from "./SolidSelectionStaticFilterElement";
-
-export enum InputTypes {
-    Date = 'Date',
-    DateTime = 'DateTime',
-    Time = 'Time',
-    Numeric = 'Numeric',
-    Text = 'Text',
-    SelectionStatic = 'SelectionStatic',
-    RelationManyToOne = 'RelationManyToOne',
-    SelectionDynamic = 'SelectionDynamic'
-}
-
-
-// Based on numberOfInputs map the input filed and hide add and delete 
-export const SolidVarInputsFilterElement = ({ values, onChange, inputType = InputTypes.Text, numberOfInputs = null, solidListViewMetaData, fieldMetadata }: any) => {
-
-    if (!values) {
-        values = numberOfInputs && numberOfInputs > 0 ? Array(numberOfInputs).fill('') : [''];
-        // values = [''];
-    } else {
-        if (values[0] == '') {
-            values = numberOfInputs && numberOfInputs > 0 ? Array(numberOfInputs).fill('') : [''];
-        } else {
-
-            values = values
-        }
-    }
-
-    
-
-    // TODO: Ideally values will be an array, so we can spread them here instead of making a nested array.
-    const [inputs, setInputs] = useState([...values]);
-    useEffect(() => {
-        setInputs([...values])
-    }, [numberOfInputs])
-
-    const updateInputs = (index: number, value: any) => {
-        const updatedSpecification = inputs.map((item, i) =>
-            i === index ? value : item
-        );
-        setInputs(updatedSpecification);
-    };
-
-    const addInput = () => {
-        setInputs([...inputs, '']);
-    };
-
-    const deleteInput = (index: number) => {
-        if (inputs.length > 1) {
-            const updatedRows = inputs.filter((_, rowIndex) => rowIndex !== index);
-            setInputs(updatedRows);
-
-        } else {
-        }
-    };
-
-    useEffect(() => {
-        onChange(inputs)
-    }, [inputs])
-
-
-
-    return (
-        <div className="grid formgrid">
-            <div className="col-12">
-                <div className="flex flex-column gap-2">
-                    {inputs && inputs.map((value: any, index: number) => (
-
-                        <div key={index} className="flex align-items-center gap-2">
-
-                            {inputType === InputTypes.Text &&
-                                <InputText
-                                    value={value}
-                                    onChange={(e) => updateInputs(index, e.target.value)}
-                                    placeholder=""
-                                    className="p-inputtext-sm small-input w-full"
-                                />
-                            }
-                            {inputType === InputTypes.Numeric &&
-                                <InputNumber
-                                    value={value}
-                                    onChange={(e) => updateInputs(index, e.value)}
-                                    placeholder=""
-                                    className="p-inputtext-sm small-input w-full"
-                                />
-                            }
-                            {inputType === InputTypes.Date &&
-                                <Calendar
-                                    value={value}
-                                    onChange={(e) => updateInputs(index, e.target.value)}
-                                    dateFormat="mm/dd/yy"
-                                    placeholder="mm/dd/yyyy"
-                                    mask="99/99/9999"
-                                />
-                            }
-                            {inputType === InputTypes.DateTime &&
-                                <Calendar
-                                    value={value}
-                                    onChange={(e) => updateInputs(index, e.target.value)}
-                                    dateFormat="mm/dd/yy"
-                                    placeholder="mm/dd/yyyy hh:mm"
-                                    mask="99/99/9999 99:99"
-                                    showTime
-                                    hourFormat="24"
-                                />
-                            }
-                            {inputType === InputTypes.Time &&
-                                <Calendar
-                                    value={value}
-                                    onChange={(e) => updateInputs(index, e.target.value)}
-                                    placeholder="hh:mm"
-                                    mask="99:99"
-                                    timeOnly
-                                    hourFormat="24"
-                                />
-                            }
-                            {inputType === InputTypes.RelationManyToOne &&
-                                <SolidManyToOneFilterElement
-                                    value={value}
-                                    index={index}
-                                    updateInputs={updateInputs}
-                                    fieldMetadata={fieldMetadata}
-                                ></SolidManyToOneFilterElement>
-                            }
-                            {inputType === InputTypes.SelectionDynamic &&
-                                <SolidSelectionDynamicFilterElement
-                                    value={value}
-                                    index={index}
-                                    updateInputs={updateInputs}
-                                    fieldMetadata={fieldMetadata}
-                                ></SolidSelectionDynamicFilterElement>
-                            }
-                            {inputType === InputTypes.SelectionStatic &&
-
-                                <SolidSelectionStaticFilterElement
-                                    value={value}
-                                    index={index}
-                                    updateInputs={updateInputs}
-                                    fieldMetadata={fieldMetadata}
-                                ></SolidSelectionStaticFilterElement>
-                            }
-
-                            {numberOfInputs === null &&
-                                <>
-                                    {/* Plus Button to add a new row */}
-                                    < Button
-                                        icon="pi pi-plus"
-                                        size="small"
-                                        className="small-button"
-                                        onClick={addInput}
-                                        type="button"
-                                    />
-
-                                    {/* Trash Button to delete the row */}
-                                    <Button
-                                        icon="pi pi-trash"
-                                        size="small"
-                                        className="small-button"
-                                        onClick={() => deleteInput(index)}
-                                        outlined
-                                        severity="danger"
-                                        type="button"
-                                    />
-                                </>
-                            }
-                        </div>
-
-                    ))}
-
-                </div>
-
-            </div>
-        </div>
-    )
-}

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

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

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

@@ -1,87 +0,0 @@
-import { Column, ColumnFilterElementTemplateOptions } from "primereact/column";
-import { Dropdown } from 'primereact/dropdown';
-import { SolidListViewColumnParams } from '../SolidListViewColumn';
-import { SolidListFieldWidgetProps } from "../../../../types/solid-core";
-import { getExtensionComponent } from "../../../../helpers/registry";
-
-const SolidBooleanColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {
-    const filterable = column.attrs.filterable;
-    const showFilterOperator = false;
-    const columnDataType = 'boolean';
-
-    const booleanOptions = [
-        { label: 'Yes', value: true },
-        { label: 'No', value: false },
-    ];
-
-    // Custom filter template for Boolean column
-    const filterTemplate = (options: ColumnFilterElementTemplateOptions) => {
-        return (
-            <Dropdown
-                value={options.value}
-                options={booleanOptions}
-                onChange={(e) => options.filterCallback(e.value)}
-                placeholder="Select"
-                className="p-column-filter"
-            />
-        );
-    };
-
-    // Custom body template for Boolean column
-    const bodyTemplate = (rowData: any) => {
-        const fieldKey = column.attrs.label ?? fieldMetadata.name;
-        return rowData[fieldKey] ? 'Yes' : 'No';
-    };
-
-    const header = column.attrs.label ?? fieldMetadata.displayName;
-
-    // TODO: filterTemplate, bodyTemplate & filterMatchModeOptions to be provided.
-
-    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}
-            body={
-                (rowData) => {
-                    let viewWidget = column.attrs.viewWidget;
-                    if (!viewWidget) {
-                        viewWidget = 'DefaultBooleanListWidget';
-                    }
-                    let DynamicWidget = getExtensionComponent(viewWidget);
-                    const widgetProps: SolidListFieldWidgetProps = {
-                        rowData,
-                        solidListViewMetaData,
-                        fieldMetadata,
-                        column
-                    }
-                    return (
-                        <>
-                            {DynamicWidget && <DynamicWidget {...widgetProps} />}
-                        </>
-                    )
-                }
-            }
-            filterPlaceholder={`Search by ${fieldMetadata.displayName}`}
-            style={{ minWidth: "12rem" }}
-            headerClassName="table-header-fs"
-        ></Column>
-    );
-};
-
-export default SolidBooleanColumn;
-
-export const DefaultBooleanListWidget = ({ rowData, solidListViewMetaData, fieldMetadata, column }: SolidListFieldWidgetProps) => {
-    const fieldKey = column.attrs.label ?? fieldMetadata.name;
-    const trueLabel = column.attrs.trueLabel ?? 'Yes';
-    const falseLabel = column.attrs.falseLabel ?? 'No';
-    console.log(`rendering boolean column ${fieldKey} with value ${rowData[fieldKey]}, trueLabel=${trueLabel}, falseLabel=${falseLabel}`);
-    return rowData[fieldKey] === true ? trueLabel : falseLabel;
-}

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

@@ -1,27 +0,0 @@
-
-import { SolidListViewColumnParams } from '../SolidListViewColumn';
-import SolidBooleanColumn from './SolidBooleanColumn';
-import SolidDateColumn from './SolidDateColumn';
-import SolidDatetimeColumn from './SolidDatetimeColumn';
-import SolidIntColumn from './SolidIntColumn';
-import SolidShortTextColumn from './SolidShortTextColumn';
-
-const SolidComputedColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {
-    if (['text', 'string'].includes(fieldMetadata.computedFieldValueType)) {
-        return SolidShortTextColumn({ solidListViewMetaData, fieldMetadata, column });
-    }
-    if (['int', 'decimal'].includes(fieldMetadata.computedFieldValueType)) {
-        return SolidIntColumn({ solidListViewMetaData, fieldMetadata, column });
-    }
-    if (fieldMetadata.computedFieldValueType === 'date') {
-        return SolidDateColumn({ solidListViewMetaData, fieldMetadata, column });
-    }
-    if (fieldMetadata.computedFieldValueType === 'datetime') {
-        return SolidDatetimeColumn({ solidListViewMetaData, fieldMetadata, column });
-    }
-    if (fieldMetadata.computedFieldValueType === 'boolean') {
-        return SolidBooleanColumn({ solidListViewMetaData, fieldMetadata, column });
-    }
-};
-
-export default SolidComputedColumn;