@solidstarters/solid-core-ui 1.1.74 → 1.1.77

package/src/components/common/CancelButton.tsx

@@ -1,48 +0,0 @@
-"use client"
-
-import { usePathname, useRouter } from 'next/navigation';
-import { Button } from 'primereact/button';
-
-
-export const CancelButton = () => {
-    const router = useRouter();
-    const pathname = usePathname(); // Get the current path
-
-    const handleGoBack = () => {
-        const segments = pathname.split('/').filter(Boolean); // Split and filter empty segments
-        if (segments.length > 1) {
-            // const newPath = '/' + segments.slice(0, -1).join('/') + '/all'; // Remove last segment and add "/all"
-            // router.push(newPath); // Navigate to the parent route with "/all"            
-            router.back()
-        }
-    };
-    return (
-        <div>
-            <Button outlined size="small" type="button" label="Close" onClick={handleGoBack} className='bg-primary-reverse' />
-        </div>
-    )
-}
-
-export const SolidCancelButton = () => {
-    const router = useRouter();
-    const pathname = usePathname(); // Get the current path
-
-    const handleGoBack = () => {
-        let fromView: string | null = null;
-        if (typeof window !== "undefined") {
-            fromView = sessionStorage.getItem("fromView");
-        }
-
-        // Default to 'list' if not available
-        const view = fromView === "kanban" ? "kanban" : "list";
-
-        // Navigate back to the previous path with the appropriate view type
-        const newPath = pathname.replace(/\/form\/[^/]+$/, `/${view}`);
-        router.push(newPath);
-    };
-    return (
-        <div>
-            <Button outlined size="small" type="button" label="Close" onClick={handleGoBack} className='bg-primary-reverse' />
-        </div>
-    )
-}

package/src/components/common/CodeEditor.tsx

@@ -1,26 +0,0 @@
-'use client';
-
-import { javascript } from '@codemirror/lang-javascript';
-import { oneDark } from '@codemirror/theme-one-dark';
-import CodeMirror, { EditorView } from '@uiw/react-codemirror'; // Correct import
-
-const CodeEditor = ({ formik, field, height, fontSize, readOnly }: any) => {
-
-  return (
-    <CodeMirror
-      id={field}
-      value={formik?.values[field]}
-      height={height ?? '300px'}
-      style={{ fontSize: fontSize ?? '10px' }}
-      theme={oneDark}
-      readOnly={readOnly}
-      extensions={[javascript(), EditorView.lineWrapping]}
-      onChange={(e: any) => {
-        formik.setFieldValue(field, e);
-      }}
-    // Line numbers are now handled through a theme or extension
-    />
-  );
-};
-
-export default CodeEditor;

package/src/components/common/CreateButton.tsx

@@ -1,17 +0,0 @@
-'use client';
-
-import { usePathname, useRouter } from 'next/navigation';
-import { Button } from 'primereact/button';
-
-export const CreateButton = () => {
-    const router = useRouter();
-    const pathName = usePathname();
-    
-    const createPAth = pathName.split('/').slice(0, -1).join('/') + '/create';
-
-    return (
-        <div>
-            <Button type="button" icon="pi pi-plus" label="Add" size='small' onClick={() => router.push(createPAth)} className='small-button'/>
-        </div>
-    )
-}

package/src/components/common/DropzonePlaceholder.tsx

@@ -1,31 +0,0 @@
-'use client';
-
-import { Button } from "primereact/button";
-interface DropzonePlaceholderProps {
-    mediaTypes?: string[];
-    mediaMaxSizeKb?: number;
-}
-
-export const DropzonePlaceholder = ({ mediaTypes, mediaMaxSizeKb }: DropzonePlaceholderProps) => {
-    const supportedFormats = mediaTypes?.length
-        ? mediaTypes.map(type => type.toUpperCase()).join(", ")
-        : "PDF, JPEG | File";
-
-    // Convert max size from KB to MB and ensure it's at least 1MB
-    const maxSizeMB = mediaMaxSizeKb ? (mediaMaxSizeKb / 1024).toFixed(1) : "10";
-
-    return (
-        <div className='solid-dropzone'>
-            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-                <path d="M11 16V7.85L8.4 10.45L7 9L12 4L17 9L15.6 10.45L13 7.85V16H11ZM6 20C5.45 20 4.97917 19.8042 4.5875 19.4125C4.19583 19.0208 4 18.55 4 18V15H6V18H18V15H20V18C20 18.55 19.8042 19.0208 19.4125 19.4125C19.0208 19.8042 18.55 20 18 20H6Z" fill="#666666" />
-            </svg>
-            <div className='font-bold mt-2'>
-                Drag and Drop or <span className='text-primary'> choose files</span> to upload
-            </div>
-            <p>Supported format: {supportedFormats} | Max size: {maxSizeMB} MB</p>
-            <div>
-                <Button outlined size='small' severity='secondary' label='Click to Browse' type="button" />
-            </div>
-        </div>
-    )
-}

package/src/components/common/DropzoneUpload.tsx

@@ -1,11 +0,0 @@
-'use client';
-
-import { Button } from 'primereact/button'
-
-export const DropzoneUpload = () => {
-    return (
-        <div className='text-center mt-2'>
-            <Button type='button' label="Click here to Upload" className='no-underline' size='small' text raised={false}/>
-        </div>
-    )
-}

package/src/components/common/FileReaderExt.tsx

@@ -1,20 +0,0 @@
-import React from 'react'
-import FileSvg from '../Svg/FileSvg'
-
-export const FileReaderExt = ({ fileDetails }: { fileDetails: any }) => {
-    const renderFile = () => {
-        const type = fileDetails.type
-        switch (type) {
-            case "image/png":
-                return '/images/fileReader/image-jpg.png'
-            default:
-                return '/images/fileReader/image-jpg.png'
-        }
-    }
-    return (
-        <div>
-            <FileSvg />
-            {/* <img src={renderFile()} style={{height: 50, width:50}}/> */}
-        </div>
-    )
-}

package/src/components/common/GeneralSettings.tsx

@@ -1,414 +0,0 @@
-"use client"
-import { useBulkUpdateSolidSettingsMutation, useCreateSolidSettingsMutation, useLazyGetSolidSettingsQuery, useUpdateSolidSettingsMutation } from '@/redux/api/solidSettingsApi';
-import { useFormik } from 'formik';
-import { Button } from 'primereact/button';
-import { InputText } from 'primereact/inputtext';
-import { Toast } from 'primereact/toast';
-import { useEffect, useRef } from 'react'
-import { CancelButton } from './CancelButton';
-import { InputSwitch } from 'primereact/inputswitch';
-import { RadioButton } from 'primereact/radiobutton';
-import { handleError } from '@/helpers/ToastContainer';
-import { usePathname } from 'next/navigation';
-
-export const GeneralSettings = () => {
-    const [trigger, { data: solidSettingsData }] = useLazyGetSolidSettingsQuery()
-    useEffect(() => {
-        trigger("") // Fetch settings on mount
-    }, [trigger])
-    const pathname = usePathname();
-    const [bulkUpdateSolidSettings] = useBulkUpdateSolidSettingsMutation();
-    const toast = useRef<Toast>(null);
-
-    const showToast = (severity: "success" | "error", summary: string, detail: string) => {
-        toast.current?.show({
-            severity,
-            summary,
-            detail,
-            life: 3000,
-        });
-    };
-    const initialValues = {
-        allowPublicRegistration: solidSettingsData?.data?.allowPublicRegistration || false,
-        iamPasswordRegistrationEnabled: solidSettingsData?.data?.iamPasswordRegistrationEnabled || false,
-        passwordlessRegistration: solidSettingsData?.data?.passwordlessRegistration || false,
-        activateUserOnRegistration: solidSettingsData?.data?.activateUserOnRegistration || false,
-        iamGoogleOAuthEnabled: solidSettingsData?.data?.iamGoogleOAuthEnabled || false,
-        shouldQueueEmails: solidSettingsData?.data?.shouldQueueEmails || false,
-        shouldQueueSms: solidSettingsData?.data?.shouldQueueSms || false,
-        authPagesTheme: solidSettingsData?.data?.authPagesTheme || "light",
-        authPagesLayout: solidSettingsData?.data?.authPagesLayout || "center",
-        appTnc: solidSettingsData?.data?.appTnc || "",
-        appPrivacyPolicy: solidSettingsData?.data?.appPrivacyPolicy || "",
-        defaultRole: solidSettingsData?.data?.defaultRole || "Admin",
-        appTitle: solidSettingsData?.data?.appTitle || "SolidX",
-        appDescription: solidSettingsData?.data?.appDescription || "appDescription",
-    };
-    const formik = useFormik({
-        initialValues: initialValues,
-        enableReinitialize: true,
-        onSubmit: async (values) => {
-            try {
-                const updatedSettings: Record<string, any> = {};
-
-                const currentSettings = solidSettingsData?.data || {};
-
-                // Compare values and collect only changed ones
-                Object.entries(values).forEach(([key, value]) => {
-                    const currentValue = currentSettings[key];
-
-                    // Handle boolean, string, null values consistently
-                    const normalizedCurrent = currentValue === undefined || currentValue === null ? "" : currentValue;
-                    const normalizedValue = value === undefined || value === null ? "" : value;
-
-                    if (normalizedCurrent !== normalizedValue) {
-                        updatedSettings[key] = value;
-                    }
-                });
-                
-                if (Object.keys(updatedSettings).length === 0) {
-                    showToast("success", "No Changes", "No settings were updated");
-                    return;
-                }
-                const response = await bulkUpdateSolidSettings({
-                    data: { settings: updatedSettings },
-                }).unwrap();
-                if (response.statusCode === 200) {
-                    showToast("success", "Ypdated", "Settings updated")
-                }
-
-            } catch (error) {
-                showToast("error", "Failed", "Something went wrong");
-            }
-        },
-    })
-
-    const showError = async () => {
-        const errors = await formik.validateForm(); // Trigger validation and get the updated errors
-        const errorMessages = Object.values(errors);
-
-        if (errorMessages.length > 0 && toast.current) {
-            handleError(errorMessages)
-        }
-    }
-    useEffect(() => {
-
-    }, [pathname])
-
-    return (
-        <div className="page-parent-wrapper">
-            <Toast ref={toast} />
-            <div className="solid-form-wrapper">
-                <div className="solid-form-section">
-                    <form onSubmit={formik.handleSubmit}>
-                        <div className="page-header secondary-border-bottom">
-                            <div className="form-wrapper-title">Settings</div>
-                            <div className="gap-3 flex">
-                                <Button label="Save" size="small" onClick={() => showError()} type="submit" />
-                                <CancelButton />
-                            </div>
-                        </div>
-                        <div className="p-4 solid-form-content">
-                            {pathname.includes("app-settings") &&
-                                <>
-                                    <p className='font-bold ' style={{ fontSize: 16, color: 'var(--solid-setting-title)' }}>App Logo </p>
-                                    <div className='formgrid grid'>
-                                        <div className='col-8'>
-                                            <div className="formgrid grid">
-                                                <div className="col-6">
-                                                    <div className="formgrid grid align-items-center">
-                                                        <div className="col-5">
-                                                            <label className="form-field-label">App Logo</label>
-                                                        </div>
-                                                        {/* <div className="col-7">
-                                                <InputText
-                                                    type="text"
-                                                    id="appTitle"
-                                                    name="appTitle"
-                                                    onChange={formik.handleChange}
-                                                    value={formik.values.appTitle}
-                                                />
-                                            </div> */}
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div className='mt-4' style={{ borderBottom: '1px dashed #D8E2EA' }}></div>
-
-                                    <p className='font-bold mt-4' style={{ fontSize: 16, color: 'var(--solid-setting-title)' }}>Title & Description Details </p>
-                                    <div className='formgrid grid'>
-                                        <div className='col-8'>
-                                            <div className="formgrid grid">
-                                                <div className="col-6">
-                                                    <div className="formgrid grid align-items-center">
-                                                        <div className="col-5">
-                                                            <label className="form-field-label">App Title</label>
-                                                        </div>
-                                                        <div className="col-7">
-                                                            <InputText
-                                                                type="text"
-                                                                id="appTitle"
-                                                                name="appTitle"
-                                                                onChange={formik.handleChange}
-                                                                value={formik.values.appTitle}
-                                                            />
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                                <div className="col-6">
-                                                    <div className="formgrid grid align-items-center">
-                                                        <div className="col-5">
-                                                            <label className="form-field-label">Description</label>
-                                                        </div>
-                                                        <div className="col-7">
-                                                            <InputText
-                                                                type="text"
-                                                                id="appDescription"
-                                                                name="appDescription"
-                                                                onChange={formik.handleChange}
-                                                                value={formik.values.appDescription}
-                                                            />
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div className='mt-4' style={{ borderBottom: '1px dashed #D8E2EA' }}></div>
-
-                                    <p className='font-bold mt-4' style={{ fontSize: 16, color: 'var(--solid-setting-title)' }}>Policies Links </p>
-                                    <div className='formgrid grid'>
-                                        <div className='col-8'>
-                                            <div className="formgrid grid">
-                                                <div className="col-6 mt-3">
-                                                    <div className="formgrid grid align-items-center">
-                                                        <div className="col-5">
-                                                            <label className="form-field-label">Terms and Conditions Link</label>
-                                                        </div>
-                                                        <div className="col-7">
-                                                            <InputText
-                                                                type="text"
-                                                                id="appTnc"
-                                                                name="appTnc"
-                                                                onChange={formik.handleChange}
-                                                                value={formik.values.appTnc}
-                                                            />
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                                <div className="col-6 mt-3">
-                                                    <div className="formgrid grid align-items-center">
-                                                        <div className="col-5">
-                                                            <label className="form-field-label">Privacy Policy Link</label>
-                                                        </div>
-                                                        <div className="col-7">
-                                                            <InputText
-                                                                type="text"
-                                                                id="appPrivacyPolicy"
-                                                                name="appPrivacyPolicy"
-                                                                onChange={formik.handleChange}
-                                                                value={formik.values.appPrivacyPolicy}
-                                                            />
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </>
-                            }
-                            {pathname.includes("authentication-settings") &&
-                                <>
-                                    <p className='font-bold' style={{ fontSize: 16, color: 'var(--solid-setting-title)' }}>User Authentication  </p>
-                                    <div className='formgrid grid'>
-                                        <div className='col-8'>
-                                            <div className="formgrid grid">
-                                                <div className="col-6">
-                                                    <div className="formgrid grid align-items-center">
-                                                        <div className="col-5">
-                                                            <label className="form-field-label">Public Registration</label>
-                                                        </div>
-                                                        <div className="col-7">
-                                                            <InputSwitch
-                                                                name="allowPublicRegistration"
-                                                                checked={formik.values.allowPublicRegistration}
-                                                                onChange={(e) => formik.setFieldValue("allowPublicRegistration", e.value)}
-                                                            />
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                                <div className="col-6">
-                                                    <div className="formgrid grid align-items-center">
-                                                        <div className="col-5">
-                                                            <label className="form-field-label">Signup with Password</label>
-                                                        </div>
-                                                        <div className="col-7">
-                                                            <InputSwitch
-                                                                name="iamPasswordRegistrationEnabled"
-                                                                checked={formik.values.iamPasswordRegistrationEnabled}
-                                                                onChange={(e) => formik.setFieldValue("iamPasswordRegistrationEnabled", e.value)}
-                                                            />
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                                <div className="col-6 mt-3">
-                                                    <div className="formgrid grid align-items-center">
-                                                        <div className="col-5">
-                                                            <label className="form-field-label">Signup without Password</label>
-                                                        </div>
-                                                        <div className="col-7">
-                                                            <InputSwitch
-                                                                name="passwordlessRegistration"
-                                                                checked={formik.values.passwordlessRegistration}
-                                                                onChange={(e) => formik.setFieldValue("passwordlessRegistration", e.value)}
-                                                            />
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                                <div className="col-6 mt-3">
-                                                    <div className="formgrid grid align-items-center">
-                                                        <div className="col-5">
-                                                            <label className="form-field-label">Auto Activate User on Registration </label>
-                                                        </div>
-                                                        <div className="col-7">
-                                                            <InputSwitch
-                                                                name="activateUserOnRegistration"
-                                                                checked={formik.values.activateUserOnRegistration}
-                                                                onChange={(e) => formik.setFieldValue("activateUserOnRegistration", e.value)}
-                                                            />
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                                <div className="col-6 mt-3">
-                                                    <div className="formgrid grid align-items-center">
-                                                        <div className="col-5">
-                                                            <label className="form-field-label">Allow Login/ Signup with Google </label>
-                                                        </div>
-                                                        <div className="col-7">
-                                                            <InputSwitch
-                                                                name="iamGoogleOAuthEnabled"
-                                                                checked={formik.values.iamGoogleOAuthEnabled}
-                                                                onChange={(e) => formik.setFieldValue("iamGoogleOAuthEnabled", e.value)}
-                                                            />
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div className='mt-4' style={{ borderBottom: '1px dashed #D8E2EA' }}></div>
-                                    <p className='font-bold mt-4' style={{ fontSize: 16, color: 'var(--solid-setting-title)' }}>Authentication Screen Layout</p>
-                                    <div className='formgrid grid'>
-                                        <div className='col-8'>
-                                            <div className="flex align-items-center gap-3">
-                                                <div className="flex align-items-center">
-                                                    <RadioButton
-                                                        inputId="authPagesLayout-left"
-                                                        name="authPagesLayout"
-                                                        value="left"
-                                                        checked={formik.values.authPagesLayout === "left"}
-                                                        onChange={(e) => formik.setFieldValue("authPagesLayout", e.value)}
-                                                    />
-                                                    <label htmlFor="authPagesLayout-left" className="ml-2">Left</label>
-                                                </div>
-                                                <div className="flex align-items-center">
-                                                    <RadioButton
-                                                        inputId="authPagesLayout-center"
-                                                        name="authPagesLayout"
-                                                        value="center"
-                                                        checked={formik.values.authPagesLayout === "center"}
-                                                        onChange={(e) => formik.setFieldValue("authPagesLayout", e.value)}
-                                                    />
-                                                    <label htmlFor="authPagesLayout-center" className="ml-2">Center</label>
-                                                </div>
-                                                <div className="flex align-items-center">
-                                                    <RadioButton
-                                                        inputId="authPagesLayout-right"
-                                                        name="authPagesLayout"
-                                                        value="right"
-                                                        checked={formik.values.authPagesLayout === "right"}
-                                                        onChange={(e) => formik.setFieldValue("authPagesLayout", e.value)}
-                                                    />
-                                                    <label htmlFor="authPagesLayout-right" className="ml-2">Right</label>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div className='mt-4' style={{ borderBottom: '1px dashed #D8E2EA' }}></div>
-                                    <p className='font-bold mt-4' style={{ fontSize: 16, color: 'var(--solid-setting-title)' }}>Authentication Screen Theme</p>
-                                    <div className='formgrid grid'>
-                                        <div className='col-8'>
-                                            <div className="flex align-items-center gap-3">
-                                                <div className="flex align-items-center">
-                                                    <RadioButton
-                                                        inputId="theme-light"
-                                                        name="authPagesTheme"
-                                                        value="light"
-                                                        checked={formik.values.authPagesTheme === "light"}
-                                                        onChange={(e) => formik.setFieldValue("authPagesTheme", e.value)}
-                                                    />
-                                                    <label htmlFor="theme-light" className="ml-2">Solid Light</label>
-                                                </div>
-                                                <div className="flex align-items-center">
-                                                    <RadioButton
-                                                        inputId="theme-dark"
-                                                        name="authPagesTheme"
-                                                        value="dark"
-                                                        checked={formik.values.authPagesTheme === "dark"}
-                                                        onChange={(e) => formik.setFieldValue("authPagesTheme", e.value)}
-                                                    />
-                                                    <label htmlFor="theme-dark" className="ml-2">Solid Dark</label>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </>
-                            }
-
-                            {pathname.includes("misc-settings") &&
-                                <>
-                                    <p className='font-bold' style={{ fontSize: 16, color: 'var(--solid-setting-title)' }}>Misc Details</p>
-                                    <div className='formgrid grid'>
-                                        <div className='col-8'>
-                                            <div className="formgrid grid">
-                                                <div className="col-6">
-                                                    <div className="formgrid grid align-items-center">
-                                                        <div className="col-5">
-                                                            <label className="form-field-label">Use queue for sending emails</label>
-                                                        </div>
-                                                        <div className="col-7">
-                                                            <InputSwitch
-                                                                name="shouldQueueEmails"
-                                                                checked={formik.values.shouldQueueEmails}
-                                                                onChange={(e) => formik.setFieldValue("shouldQueueEmails", e.value)}
-                                                            />
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                                <div className="col-6">
-                                                    <div className="formgrid grid align-items-center">
-                                                        <div className="col-5">
-                                                            <label className="form-field-label">Use queue for sending SMS</label>
-                                                        </div>
-                                                        <div className="col-7">
-                                                            <InputSwitch
-                                                                name="shouldQueueSms"
-                                                                checked={formik.values.shouldQueueSms}
-                                                                onChange={(e) => formik.setFieldValue("shouldQueueSms", e.value)}
-                                                            />
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </>
-                            }
-                        </div>
-                    </form>
-                </div>
-            </div>
-        </div>
-    )
-}

package/src/components/common/HeaderDynamicTitles.tsx

@@ -1,13 +0,0 @@
-'use client';
-
-import { usePathname } from 'next/navigation';
-export const HeaderDynamicTitles = () => {
-    const path = usePathname();
-    const getHeading = path.split('/').slice(-2, -1)[0].replace(/-/g, ' ').replace(/\b\w/g, char => char.toUpperCase());
-
-    return (
-        <div className='text-xl font-bold'>
-            All {getHeading}s
-        </div>
-    )
-}

package/src/components/common/MarkdownViewer.tsx

@@ -1,16 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import ReactMarkdown from 'react-markdown';
-
-const MarkdownViewer = ({ data }: any) => {
-  const [markdown, setMarkdown] = useState(data);
-
-  return (
-    <div>
-      <ReactMarkdown className="markdown-view">{markdown}</ReactMarkdown>
-    </div>
-  );
-};
-
-export default MarkdownViewer;