@solidxai/core-ui 0.1.1 → 0.1.3

package/src/components/core/chatter/SolidChatterMessageBox.tsx

@@ -1,163 +0,0 @@
-
-import { getTextColor, stringToColor } from '../../../helpers/getRandomColors'
-import Image from "../../common/Image"
-import { Avatar } from 'primereact/avatar'
-import { Dialog } from 'primereact/dialog'
-import { useMemo, useState } from 'react'
-import styles from './chatter.module.css'
-import { SolidChatterCustomMessage } from './SolidChatterCustomMessage'
-import { SolidChatterAuditMessage } from './SolidChatterAuditMessage'
-
-interface Props {
-    user: string,
-    messageType?: string,
-    message?: any,
-    time?: string,
-    auditRecord?: any,
-    messageSubType?: string,
-    modelDisplayName?: string,
-    modelUserKey?: string,
-    media?: {
-        messageAttachments?: Array<{
-            id: number;
-            relativeUri: string;
-            mimeType: string;
-            originalFileName: string;
-            _full_url: string;
-        }>;
-    };
-}
-
-const getFileIcon = (mimeType: string) => {
-    if (mimeType.startsWith('image/')) {
-        return 'pi pi-image';
-    }
-    switch (mimeType) {
-        case 'application/pdf':
-            return 'pi pi-file-pdf';
-        case 'application/vnd.ms-excel':
-        case 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
-            return 'pi pi-file-excel';
-        case 'application/msword':
-        case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
-            return 'pi pi-file-word';
-        case 'text/plain':
-            return 'pi pi-file';
-        default:
-            return 'pi pi-file';
-    }
-};
-
-export const SolidChatterMessageBox = (props: Props) => {
-    const { user, messageType, message, time, auditRecord, media, messageSubType, modelDisplayName, modelUserKey } = props;
-    const [selectedImage, setSelectedImage] = useState<string | null>(null);
-    const [isImageDialogVisible, setIsImageDialogVisible] = useState(false);
-
-    const avatarStyle = useMemo(() => {
-        const bg = stringToColor(user)
-        const color = getTextColor(bg)
-        return { backgroundColor: bg, color, height: 24, width: 24, fontSize: 10, fontWeight: 600 }
-    }, [user])
-
-    const handleImageClick = (url: string) => {
-        setSelectedImage(url);
-        setIsImageDialogVisible(true);
-    };
-
-    const renderMessageContent = () => {
-        switch (messageType) {
-            case 'audit':
-                return <SolidChatterAuditMessage auditRecord={auditRecord} />;
-            case 'custom':
-            default:
-                return <SolidChatterCustomMessage message={message} />;
-        }
-    };
-
-    return (
-        <div className={styles.solidChatterMessageBox}>
-            <div className='flex align-items-center'>
-                <div style={{ width: 32 }}>
-                    <Avatar label={user.charAt(0).toUpperCase()} style={avatarStyle} shape="circle" />
-                </div>
-                <div className='flex align-items-center justify-content-between' style={{ width: '100%' }}>
-                    <div className='text-sm'>
-                        <span className='font-bold'>{user}</span>
-                        <span className='ml-2' style={{ color: '#949494' }}>
-                            {messageType === 'audit' ? messageSubType === "audit_update"
-                                ? <>Updated {modelUserKey && <span style={{ fontStyle: 'italic', fontWeight: '600' }}>({modelUserKey})</span>}</>
-                                : messageSubType === "audit_insert"
-                                    ? <>Inserted {modelUserKey && <span style={{ fontStyle: 'italic', fontWeight: '600' }}>({modelUserKey})</span>}</>
-                                    : "Custom" : "Custom"}
-                        </span>
-                    </div>
-                    {modelDisplayName && <span style={{ fontStyle: 'italic', fontWeight: '600' }}>{modelDisplayName}</span>}
-                </div>
-            </div>
-            <div className='flex align-items-center mt-1'>
-                <div style={{ width: 32 }}>
-                </div>
-                <div style={{ width: '100%' }}>
-                    <p className='mb-1 text-sm font-bold' style={{ color: '#949494' }}>
-                        {time}
-                    </p>
-                    {message && <div className={styles.solidMessageWrapper}>
-                        {renderMessageContent()}
-                    </div>}
-                    {media?.messageAttachments && media.messageAttachments.length > 0 && (
-                        <div className='flex flex-wrap gap-2 mt-2'>
-                            {media.messageAttachments.map((attachment) => {
-                                const isImage = attachment.mimeType.startsWith('image/');
-                                return (
-                                    <div key={attachment.id} className='flex align-items-center gap-2 bg-gray-100 p-2 rounded'>
-                                        {isImage ? (
-                                            <div
-                                                className='cursor-pointer'
-                                                onClick={() => handleImageClick(attachment._full_url)}
-                                            >
-                                                <Image
-                                                    src={encodeURI(attachment._full_url)}
-                                                    alt={attachment.originalFileName}
-                                                    width={50}
-                                                    height={50}
-                                                    className='rounded'
-                                                    style={{ objectFit: 'cover' }}
-                                                />
-                                            </div>
-                                        ) : (
-                                            <a
-                                                href={encodeURI(attachment._full_url)}
-                                                target="_blank"
-                                                rel="noopener noreferrer"
-                                                className='flex align-items-center gap-2 text-decoration-none'
-                                            >
-                                                <i className={getFileIcon(attachment.mimeType)} />
-                                                <span className='text-sm'>{attachment.originalFileName}</span>
-                                            </a>
-                                        )}
-                                    </div>
-                                );
-                            })}
-                        </div>
-                    )}
-                </div>
-            </div>
-            <Dialog
-                visible={isImageDialogVisible}
-                onHide={() => setIsImageDialogVisible(false)}
-                className='w-9 '
-                modal
-            >
-                {selectedImage && (
-                    <Image
-                        src={selectedImage}
-                        alt="Preview"
-                        width={800}
-                        height={600}
-                        style={{ width: '100%', height: 'auto' }}
-                    />
-                )}
-            </Dialog>
-        </div>
-    )
-}

package/src/components/core/chatter/SolidMessageComposer.tsx

@@ -1,146 +0,0 @@
-import { InputText } from 'primereact/inputtext'
-import styles from './chatter.module.css'
-import { Button } from 'primereact/button'
-import { useCreateChatterMessageMutation } from '../../../redux/api/solidChatterMessageApi'
-import { useEffect, useState, useRef } from 'react'
-import { ERROR_MESSAGES } from '../../../constants/error-messages'
-import { useSession } from '../../../hooks/useSession'
-
-export const SolidMessageComposer = ({ type, modelSingularName, refetch, id }: { type?: string, modelSingularName?: any, refetch?: any, id?: any }) => {
-    const [message, setMessage] = useState('');
-    const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
-
-    const { data: session, status } = useSession();
-    const user = session?.user;
-    const fileInputRef = useRef<HTMLInputElement>(null);
-
-    // const { data: viewLayoutData } = useGetSolidViewLayoutQuery(null);
-    const [createChatterMessage, { isLoading, isSuccess, isError }] = useCreateChatterMessageMutation();
-
-    const tempEmails = [
-        "johndoe@gmal.com",
-        "tempmail@gmail.com",
-        "example@mail.com"
-    ]
-
-    const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
-        if (event.target.files) {
-            const files = Array.from(event.target.files);
-            setSelectedFiles(prev => [...prev, ...files]);
-        }
-    };
-
-    const handleSubmit = async (e: React.FormEvent) => {
-        e.preventDefault();
-        if (!message.trim() && selectedFiles.length === 0) return;
-
-        try {
-            const formData = new FormData();
-            formData.append('messageType', "custom");
-            formData.append('messageSubType', "custom");
-            formData.append('messageBody', message);
-            formData.append('coModelEntityId', id);
-            formData.append('coModelName', modelSingularName);
-            formData.append('userId', user?.id || 1);
-
-            selectedFiles.forEach((file, index) => {
-                formData.append(`messageAttachments`, file);
-            });
-
-            await createChatterMessage(formData).unwrap();
-            setMessage('');
-            setSelectedFiles([]);
-        } catch (error) {
-            console.error(ERROR_MESSAGES.FETCHING_MESSAGE, error);
-        }
-    };
-
-    useEffect(() => {
-        if (isSuccess) {
-            refetch()
-        }
-    }, [isSuccess]);
-
-    return (
-        <form className={styles.chatterMessageComposer} onSubmit={handleSubmit}>
-            {/* {type === 'email' &&
-                <div className='flex align-items-center gap-1 text-sm mb-2'>
-                    <span className='font-bold'>To:</span>
-                    <div className={styles.chatterEmails}>
-                        {tempEmails.map((mail, index) => (
-                            <span key={index}>
-                                {mail}
-                            </span>
-                        ))}
-                    </div>
-                    <div className={`pi pi-sort-down-fill text-primary ${styles.emailTooltipIcon}`} style={{ fontSize: 8 }}>
-                        <div className={styles.emailsTooltip}>
-                            {tempEmails.map((mail, index) => (
-                                <span key={index} className='text-color text-sm'>
-                                    {mail}
-                                </span>
-                            ))}
-                        </div>
-                    </div>
-                </div>
-            } */}
-            <div className='flex align-items-center gap-2'>
-                <InputText
-                    type="text"
-                    value={message}
-                    onChange={(e) => setMessage(e.target.value)}
-                    placeholder={type === 'email' ? 'Send a message to followers' : 'Log an internal note.'}
-                    className={`p-inputtext-sm w-full p-2 ${styles.chatterMessageInput}`}
-                />
-                <input
-                    type="file"
-                    ref={fileInputRef}
-                    onChange={handleFileSelect}
-                    multiple
-                    style={{ display: 'none' }}
-                />
-                <Button
-                    icon="pi pi-plus"
-                    className="p-button-rounded p-button-text"
-                    onClick={() => fileInputRef.current?.click()}
-                    tooltip="Attach files"
-                    tooltipOptions={{ position: 'top' }}
-                    type='button'
-                />
-            </div>
-            {selectedFiles.length > 0 && (
-                <div className='flex flex-wrap gap-2 mt-2'>
-                    {selectedFiles.map((file, index) => (
-                        <div key={index} className='flex align-items-center gap-2 bg-gray-100 p-2 rounded'>
-                            <span className='text-sm'>{file.name}</span>
-                            <Button
-                                icon="pi pi-times"
-                                className="p-button-rounded p-button-text p-button-sm"
-                                onClick={() => setSelectedFiles(prev => prev.filter((_, i) => i !== index))}
-                            />
-                        </div>
-                    ))}
-                </div>
-            )}
-            <div className='mt-3 flex align-items-center gap-2'>
-                <Button
-                    label={type === 'email' ? 'Send' : 'Log'}
-                    size='small'
-                    type='submit'
-                    loading={isLoading}
-                />
-                <Button
-                    label='Cancel'
-                    size='small'
-                    type='button'
-                    text
-                    severity='contrast'
-                    onClick={() => {
-                        setMessage('');
-                        setSelectedFiles([]);
-                    }}
-                />
-            </div>
-        </form>
-    )
-}

package/src/components/core/chatter/chatter.module.css

@@ -1,74 +0,0 @@
-.chatterTitle {
-    padding: 15px;
-    border-bottom: 1px solid #D8E2EA;
-}
-
-.chatterMessageComposer .chatterMessageInput {
-    background-color: #FEFCFF;
-    border: 1px solid #D8E2EA;
-}
-
-.chatterMessageComposer .chatterMessageInput::placeholder {
-    color: rgba(51, 51, 51, 0.20);
-}
-
-.chatterEmails {
-    max-width: 80%;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-}
-
-.emailTooltipIcon {
-    position: relative;
-}
-
-.emailsTooltip {
-    visibility: hidden;
-    position: absolute;
-    right: 0px !important;
-    top: 1;
-    background-color: #fff;
-    border: 1px solid #D8E2EA;
-    padding: 8px;
-    border-radius: 8px !important;
-    min-width: 200;
-    display: flex;
-    flex-direction: column;
-    gap: 5px;
-}
-
-.emailTooltipIcon:hover .emailsTooltip {
-    visibility: visible !important;
-}
-
-.chatterDatetimeDivider {
-    border-top: 1px dashed #00000026;
-    position: relative;
-    margin: 30px 0 15px 0;
-}
-
-.chatterDividerContent {
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    border-radius: 6.25rem;
-    border: 1px solid rgba(0, 0, 0, 0.15);
-    background: #FAFAFA;
-    padding: 0.25rem 0.5rem;
-    text-wrap: nowrap;
-    font-size: 0.625rem;
-    font-weight: 600;
-    color: var(--secondary-dark-color);
-}
-
-.solidMessageWrapper {
-    border: 1px solid #D8E2EA;
-    padding: 10px;
-    border-radius: 0.25rem;
-    width: 100%;
-}
-
-.solidChatterMessageBox{
-    margin-top: 15px;
-}

package/src/components/core/common/AvatarWidget.tsx

@@ -1,55 +0,0 @@
-export const AvatarWidget = ({ value }: any) => {
-    // use "widget": "SolidUserNameAvatarWidget" in the list view field 
-
-
-    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="solid-table-row">
-            {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>
-    );
-};

package/src/components/core/common/DateFieldViewComponent.tsx

@@ -1,36 +0,0 @@
-
-
-import dayjs from "dayjs";
-
-type DateFieldViewProps = {
-  value: unknown;
-  format?: string; // dayjs format tokens (optional)
-  fallback?: string; // optional fallback text (default: "-")
-};
-
-export const DateFieldViewComponent = ({
-  value,
-  format,
-  fallback = "-",
-}: DateFieldViewProps) => {
-  if (!value) {
-    return <>{fallback}</>;
-  }
-
-  // Normalize value to Date
-  const date =
-    value instanceof Date ? value : new Date(value as any);
-
-  // Invalid date → render raw value
-  if (isNaN(date.getTime())) {
-    return <>{String(value)}</>;
-  }
-
-  // Explicit format → dayjs
-  if (format) {
-    return <>{dayjs(date).format(format)}</>;
-  }
-
-  // Default → browser locale
-  return <>{date.toLocaleDateString()}</>;
-};