@solidstarters/solid-core-ui 1.1.69 → 1.1.71

package/dist/components/common/CancelButton.tsx

@@ -0,0 +1,48 @@
+"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/dist/components/common/CodeEditor.tsx

@@ -0,0 +1,26 @@
+'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/dist/components/common/CreateButton.tsx

@@ -0,0 +1,17 @@
+'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/dist/components/common/DropzonePlaceholder.tsx

@@ -0,0 +1,31 @@
+'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/dist/components/common/DropzoneUpload.tsx

@@ -0,0 +1,11 @@
+'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/dist/components/common/FileReaderExt.tsx

@@ -0,0 +1,20 @@
+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/dist/components/common/GeneralSettings.tsx

@@ -0,0 +1,406 @@
+"use client"
+import { 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 [updateSolidSettings] = useUpdateSolidSettingsMutation();
+    const [
+        createSolidSettings,
+    ] = useCreateSolidSettingsMutation();
+    const toast = useRef<Toast>(null);
+
+    const showToast = (severity: "success" | "error", summary: string, detail: string) => {
+        toast.current?.show({
+            severity,
+            summary,
+            detail,
+            life: 3000,
+        });
+    };
+    const initialValues = {
+        iamAllowPublicRegistration: solidSettingsData?.data?.records?.[0]?.iamAllowPublicRegistration || false,
+        iamPasswordRegistrationEnabled: solidSettingsData?.data?.records?.[0]?.iamPasswordRegistrationEnabled || false,
+        iamPasswordLessRegistrationEnabled: solidSettingsData?.data?.records?.[0]?.iamPasswordLessRegistrationEnabled || false,
+        iamActivateUserOnRegistration: solidSettingsData?.data?.records?.[0]?.iamActivateUserOnRegistration || false,
+        iamGoogleOAuthEnabled: solidSettingsData?.data?.records?.[0]?.iamGoogleOAuthEnabled || false,
+        shouldQueueEmails: solidSettingsData?.data?.records?.[0]?.shouldQueueEmails || false,
+        shouldQueueSms: solidSettingsData?.data?.records?.[0]?.shouldQueueSms || false,
+        authPagesTheme: solidSettingsData?.data?.records?.[0]?.authPagesTheme || "light",
+        authPagesLayout: solidSettingsData?.data?.records?.[0]?.authPagesLayout || "center",
+        appTnc: solidSettingsData?.data?.records?.[0]?.appTnc || "",
+        appPrivacyPolicy: solidSettingsData?.data?.records?.[0]?.appPrivacyPolicy || "",
+        iamDefaultRole: solidSettingsData?.data?.records?.[0]?.iamDefaultRole || "Admin",
+        appTitle: solidSettingsData?.data?.records?.[0]?.appTitle || "SolidX",
+        appDescription: solidSettingsData?.data?.records?.[0]?.appDescription || "appDescription",
+    };
+    const formik = useFormik({
+        initialValues: initialValues,
+        enableReinitialize: true,
+        onSubmit: async (values) => {
+            try {
+                const formData = new FormData()
+                Object.entries(values).forEach(([key, value]) => {
+                    if (typeof value === "boolean") {
+                        formData.append(key, value ? "true" : "");
+                    } else {
+                        formData.append(key, value.toString());
+                    }
+                });
+                if (solidSettingsData?.data?.records?.length > 0) {
+                    await updateSolidSettings({
+                        id: solidSettingsData?.data?.records?.[0]?.id,
+                        data: formData,
+                    }).unwrap()
+                    showToast("success", "Success", "General Settings Updated");
+                } else {
+                    createSolidSettings(formData)
+                    showToast("success", "Success", "General Settings Created");
+                }
+            } 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">
+                <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="iamAllowPublicRegistration"
+                                                            checked={formik.values.iamAllowPublicRegistration}
+                                                            onChange={(e) => formik.setFieldValue("iamAllowPublicRegistration", 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="iamPasswordLessRegistrationEnabled"
+                                                            checked={formik.values.iamPasswordLessRegistrationEnabled}
+                                                            onChange={(e) => formik.setFieldValue("iamPasswordLessRegistrationEnabled", 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="iamActivateUserOnRegistration"
+                                                            checked={formik.values.iamActivateUserOnRegistration}
+                                                            onChange={(e) => formik.setFieldValue("iamActivateUserOnRegistration", 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>
+    )
+}

package/dist/components/common/HeaderDynamicTitles.tsx

@@ -0,0 +1,13 @@
+'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/dist/components/common/MarkdownViewer.tsx

@@ -0,0 +1,16 @@
+'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;