@solidstarters/solid-core-ui 1.1.18 → 1.1.20

package/package.json

@@ -1,10 +1,12 @@
 {
   "name": "@solidstarters/solid-core-ui",
-  "version": "1.1.18",
+  "version": "1.1.20",
   "scripts": {
+    "prebuild": "npm run copy-styles",
     "build": "tsc && tsc-alias",
     "clean": "rm -rf dist",
-    "prepare": "npm run build"
+    "prepare": "npm run build",
+    "copy-styles": "copyfiles -u 1 \"src/resources/**/*\" dist"
   },
   "keywords": [],
   "author": "",
@@ -25,6 +27,7 @@
     "change-case": "^5.4.4",
     "chart.js": "^4.4.3",
     "cloudinary": "^1.40.0",
+    "copyfiles": "^2.4.1",
     "html2canvas": "^1.4.1",
     "jspdf": "^2.5.1",
     "jwt-decode": "^4.0.0",
@@ -71,7 +74,6 @@
     "react-transition-group": "^4.4.5"
   },
   "devDependencies": {
-    "@types/react-js-pagination": "^3.0.7",
     "@codemirror/lang-javascript": "^6.2.2",
     "@codemirror/theme-one-dark": "^6.1.2",
     "@reduxjs/toolkit": "^1.9.5",
@@ -81,6 +83,7 @@
     "@types/qs": "^6.9.15",
     "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",
+    "@types/react-js-pagination": "^3.0.7",
     "@types/uuid": "^10.0.0",
     "@uiw/react-codemirror": "^4.23.3",
     "codemirror": "^6.0.1",

package/src/components/Svg/FileSvg.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+import { SVGProps } from "react"
+const FileSvg = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+  xmlns="http://www.w3.org/2000/svg"
+  width={64}
+  height={64}
+  fill="none"
+  {...props}
+>
+  <path
+    fill="#F9F0FF"
+    d="M36.03 25.291a2 2 0 0 1-2-2V6.271H16a6 6 0 0 0-6 6v40.08a6 6 0 0 0 6 6h31.06a6.01 6.01 0 0 0 6-6v-27.06H36.03Z"
+  />
+  <path fill="#722ED1" d="M51.88 21.291 38.03 7.441v13.85h13.85Z" />
+</svg>
+)
+export default FileSvg

package/src/components/auth/AuthLayout.tsx

@@ -11,6 +11,8 @@ import { Dialog } from "primereact/dialog";
 import { useContext, useEffect, useState } from "react";
 import { useDispatch } from "react-redux";
 import { LayoutContext } from "../layout/context/layoutcontext";
+import Image from "next/image";
+import SolidLogo from '../../resources/images/SS-Logo.png'
 
 export const AuthLayout = ({ children }: { children: React.ReactNode }) => {
     const [trigger, { data: solidSettingsData }] = useLazyGetAuthSettingsQuery()
@@ -82,10 +84,11 @@ export const AuthLayout = ({ children }: { children: React.ReactNode }) => {
                 >
                     {solidSettingsData?.data?.authPagesLayout !== 'center' &&
                         <div className="solid-logo flex align-items-center gap-3">
-                            <img
+                            <Image
                                 alt="solid logo"
-                                src={'/images/SS-Logo-1 1.png'}
-                                className="position-relative img-fluid"
+                                src={SolidLogo}
+                                className="relative"
+                                fill
                             />
                             <AppTitle title={solidSettingsData} />
                         </div>
@@ -103,13 +106,15 @@ export const AuthLayout = ({ children }: { children: React.ReactNode }) => {
                     </div>
                 }
             </div>
-            <div className="absolute solid-auth-footer flex align-items-center justify-content-between">
-                <div>
+            <div className={`absolute  ${solidSettingsData?.data?.authPagesLayout === 'center' ? 'solid-auth-footer flex align-items-center justify-content-between' : 'solid-auth-footer-2 grid'}`}>
+                <div className={solidSettingsData?.data?.authPagesLayout !== 'center' ? 'col-6 flex justify-content-center' : ''}>
                     <p className={`solid-auth-input-label text-sm m-0 ${solidSettingsData?.data?.authPagesLayout === 'right' ? 'right' : ''}`}>Made with <svg className="mx-1" width="12px" height="12px" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M1.24264 8.24264L8 15L14.7574 8.24264C15.553 7.44699 16 6.36786 16 5.24264V5.05234C16 2.8143 14.1857 1 11.9477 1C10.7166 1 9.55233 1.55959 8.78331 2.52086L8 3.5L7.21669 2.52086C6.44767 1.55959 5.28338 1 4.05234 1C1.8143 1 0 2.8143 0 5.05234V5.24264C0 6.36786 0.44699 7.44699 1.24264 8.24264Z" fill="#ff0000"></path> </g></svg> in Mumbai</p>
                 </div>
-                <div className={`flex align-items-center gap-5 solid-auth-subtitle ${solidSettingsData?.data?.authPagesLayout === 'left' ? 'left' : ''}`}>
-                    <p className="m-0"> <Link href={solidSettingsData ? solidSettingsData?.data?.appTnc : "#"}>Terms of Service</Link></p>
-                    <p className="m-0"> <Link href={solidSettingsData ? solidSettingsData?.data?.appPrivacyPolicy : "#"}>Privacy Policy.</Link></p>
+                <div className={solidSettingsData?.data?.authPagesLayout !== 'center' ? 'col-6 flex justify-content-center' : ''}>
+                    <div className={`flex align-items-center gap-5 solid-auth-subtitle ${solidSettingsData?.data?.authPagesLayout === 'left' ? 'left' : ''}`}>
+                        <p className="m-0 "> <Link className="text-sm no-underline font-normal" href={solidSettingsData ? solidSettingsData?.data?.appTnc : "#"}>Terms of Service</Link></p>
+                        <p className="m-0 "> <Link className="text-sm no-underline font-normal" href={solidSettingsData ? solidSettingsData?.data?.appPrivacyPolicy : "#"}>Privacy Policy.</Link></p>
+                    </div>
                 </div>
             </div>
             <Dialog

package/src/components/auth/ForgotPasswordThankYou.tsx

@@ -4,6 +4,8 @@ import Link from "next/link";
 import { useSearchParams } from "next/navigation";
 import { useContext } from "react";
 import { LayoutContext } from "../layout/context/layoutcontext";
+import Image from "next/image";
+import SolidLogo from '../../resources/images/SS-Logo.png'
 
 
 export const ForgotPasswordThankYou = () => {
@@ -18,10 +20,11 @@ export const ForgotPasswordThankYou = () => {
                 {authLayout === 'Center' &&
                     <div className="flex justify-content-center">
                         <div className="solid-logo flex align-items-center gap-3">
-                            GoogleAuthChecking                <img
+                            <Image
                                 alt="solid logo"
-                                src={'/images/SS-Logo-1 1.png'}
-                                className="position-relative img-fluid"
+                                src={SolidLogo}
+                                className="relative"
+                                fill
                             />
                             <div>
                                 <p className="solid-logo-title">

package/src/components/auth/SolidForgotPassword.tsx

@@ -13,6 +13,8 @@ import * as Yup from "yup";
 import { LayoutContext } from "../layout/context/layoutcontext";
 import { useLazyGetAuthSettingsQuery } from "@/redux/api/solidSettingsApi";
 import { AppTitle } from "@/helpers/AppTitle";
+import Image from "next/image";
+import SolidLogo from '../../resources/images/SS-Logo.png'
 
 const SolidForgotPassword = () => {
     const [trigger, { data: solidSettingsData }] = useLazyGetAuthSettingsQuery()
@@ -76,10 +78,11 @@ const SolidForgotPassword = () => {
                 {solidSettingsData?.data?.authPagesLayout === 'center' &&
                     <div className="flex justify-content-center">
                         <div className="solid-logo flex align-items-center gap-3">
-                            <img
+                            <Image
                                 alt="solid logo"
-                                src={'/images/SS-Logo-1 1.png'}
-                                className="position-relative img-fluid"
+                                src={SolidLogo}
+                                className="relative"
+                                fill
                             />
                             <AppTitle title={solidSettingsData} />
                         </div>
@@ -106,7 +109,7 @@ const SolidForgotPassword = () => {
                     </div>
                     <div className="mt-4">
                         <Button className="w-full font-light auth-submit-button" label="Send OTP" disabled={formik.isSubmitting} loading={formik.isSubmitting} />
-                        <Button type="button" label="Back" className="w-full auth-back-button text-center" link onClick={() => (window.location.href = '/auth/login')} />
+                        <Button type="button" label="Back" className="w-full auth-back-button text-center mt-1" link onClick={() => (window.location.href = '/auth/login')} />
                     </div>
                 </form>
             </div>

package/src/components/auth/SolidInitialLoginOtp.tsx

@@ -4,6 +4,7 @@ import { AppTitle } from "@/helpers/AppTitle";
 import { useConfirmOtpLoginMutation } from "@/redux/api/authApi";
 import { useLazyGetAuthSettingsQuery } from "@/redux/api/solidSettingsApi";
 import { Form, Formik } from "formik";
+import Image from "next/image";
 import Link from "next/link";
 import { useRouter, useSearchParams } from "next/navigation";
 import { Button } from "primereact/button";
@@ -12,6 +13,7 @@ import { Message } from "primereact/message";
 import { Toast } from "primereact/toast";
 import { useEffect, useRef } from "react";
 import * as Yup from "yup";
+import SolidLogo from '../../resources/images/SS-Logo.png'
 
 const SolidInitialLoginOtp = () => {
     const searchParams = useSearchParams();
@@ -51,10 +53,11 @@ const SolidInitialLoginOtp = () => {
                 {solidSettingsData?.data?.authPagesLayout === 'center' &&
                     <div className="flex justify-content-center">
                         <div className="solid-logo flex align-items-center gap-3">
-                            <img
+                            <Image
                                 alt="solid logo"
-                                src={'/images/SS-Logo-1 1.png'}
-                                className="position-relative img-fluid"
+                                src={SolidLogo}
+                                className="relative"
+                                fill
                             />
                             <AppTitle title={solidSettingsData} />
                         </div>
@@ -119,7 +122,7 @@ const SolidInitialLoginOtp = () => {
                                 </div>
                                 <div className="mt-4">
                                     <Button type="submit" className="w-full font-light auth-submit-button" label="Verify" disabled={formik.isSubmitting} loading={formik.isSubmitting} />
-                                    <Button type="button" label="Back" className="w-full auth-back-button text-center" link onClick={() => (window.location.href = '/auth/login')} />
+                                    <Button type="button" label="Back" className="w-full auth-back-button text-center mt-1" link onClick={() => (window.location.href = '/auth/login')} />
                                 </div>
                             </Form>
                         )}

package/src/components/auth/SolidInitiateRegisterOtp.tsx

@@ -4,6 +4,7 @@ import { AppTitle } from "@/helpers/AppTitle";
 import { useConfirmOtpRegisterMutation } from "@/redux/api/authApi";
 import { useLazyGetAuthSettingsQuery } from "@/redux/api/solidSettingsApi";
 import { Form, Formik } from "formik";
+import Image from "next/image";
 import Link from "next/link";
 import { useRouter, useSearchParams } from "next/navigation";
 import { Button } from "primereact/button";
@@ -12,6 +13,7 @@ import { Message } from "primereact/message";
 import { Toast } from "primereact/toast";
 import { useEffect, useRef } from "react";
 import * as Yup from "yup";
+import SolidLogo from '../../resources/images/SS-Logo.png'
 
 const SolidInitiateRegisterOtp = () => {
     const searchParams = useSearchParams();
@@ -51,10 +53,11 @@ const SolidInitiateRegisterOtp = () => {
                 {solidSettingsData?.data?.authPagesLayout === 'center' &&
                     <div className="flex justify-content-center">
                         <div className="solid-logo flex align-items-center gap-3">
-                            <img
+                            <Image
                                 alt="solid logo"
-                                src={'/images/SS-Logo-1 1.png'}
-                                className="position-relative img-fluid"
+                                src={SolidLogo}
+                                className="relative"
+                                fill
                             />
                             <AppTitle title={solidSettingsData} />
                         </div>
@@ -119,7 +122,7 @@ const SolidInitiateRegisterOtp = () => {
                                 </div>
                                 <div className="mt-4">
                                     <Button type="submit" className="w-full font-light auth-submit-button" label="Verify" disabled={formik.isSubmitting} loading={formik.isSubmitting} />
-                                    <Button type="button" label="Back" className="w-full auth-back-button text-center" link onClick={() => (window.location.href = '/auth/login')} />
+                                    <Button type="button" label="Back" className="w-full auth-back-button text-center mt-1" link onClick={() => (window.location.href = '/auth/login')} />
                                 </div>
                             </Form>
                         )}

package/src/components/auth/SolidLogin.tsx

@@ -19,6 +19,8 @@ import { LayoutContext } from "../layout/context/layoutcontext";
 import { useLazyGetAuthSettingsQuery } from "@/redux/api/solidSettingsApi";
 import { useInitateLoginMutation } from "@/redux/api/authApi";
 import { AppTitle } from "@/helpers/AppTitle";
+import Image from "next/image";
+import SolidLogo from '../../resources/images/SS-Logo.png'
 
 const SolidLogin = () => {
     const [trigger, { data: solidSettingsData }] = useLazyGetAuthSettingsQuery();
@@ -51,10 +53,11 @@ const SolidLogin = () => {
                 {solidSettingsData?.data?.authPagesLayout === 'center' &&
                     <div className="flex justify-content-center">
                         <div className="solid-logo flex align-items-center gap-3">
-                            <img
+                            <Image
                                 alt="solid logo"
-                                src={'/images/SS-Logo-1 1.png'}
-                                className="position-relative img-fluid"
+                                src={SolidLogo}
+                                className="relative"
+                                fill
                             />
                             <AppTitle title={solidSettingsData} />
                         </div>

package/src/components/auth/SolidOTPVerify.tsx

@@ -13,6 +13,8 @@ import * as Yup from "yup";
 import { LayoutContext } from "../layout/context/layoutcontext";
 import { useLazyGetAuthSettingsQuery } from "@/redux/api/solidSettingsApi";
 import { AppTitle } from "@/helpers/AppTitle";
+import Image from "next/image";
+import SolidLogo from '../../resources/images/SS-Logo.png'
 
 
 const SolidOTPVerify = () => {
@@ -53,10 +55,11 @@ const SolidOTPVerify = () => {
                 {solidSettingsData?.data?.authPagesLayout === 'center' &&
                     <div className="flex justify-content-center">
                         <div className="solid-logo flex align-items-center gap-3">
-                            <img
+                            <Image
                                 alt="solid logo"
-                                src={'/images/SS-Logo-1 1.png'}
-                                className="position-relative img-fluid"
+                                src={SolidLogo}
+                                className="relative"
+                                fill
                             />
                             <AppTitle title={solidSettingsData} />
                         </div>

package/src/components/auth/SolidRegister.tsx

@@ -18,7 +18,8 @@ import { useEffect, useRef } from "react";
 import * as Yup from "yup";
 import { SocialMediaLogin } from "../common/SocialMediaLogin";
 import { AppTitle } from "@/helpers/AppTitle";
-
+import Image from "next/image";
+import SolidLogo from '../../resources/images/SS-Logo.png'
 
 interface AuthTabsProps {
     iamPasswordRegistrationEnabled: boolean;
@@ -299,10 +300,11 @@ const SolidRegister = () => {
                 {solidSettingsData?.data?.authPagesLayout === 'center' &&
                     <div className="flex justify-content-center">
                         <div className="solid-logo flex align-items-center gap-3">
-                            <img
+                            <Image
                                 alt="solid logo"
-                                src={'/images/SS-Logo-1 1.png'}
-                                className="position-relative img-fluid"
+                                src={SolidLogo}
+                                className="relative"
+                                fill
                             />
                             <AppTitle title={solidSettingsData} />
                         </div>

package/src/components/auth/SolidResetPassword.tsx

@@ -4,6 +4,7 @@ import { AppTitle } from "@/helpers/AppTitle";
 import { useConfirmForgotPasswordMutation } from "@/redux/api/authApi";
 import { useLazyGetAuthSettingsQuery } from "@/redux/api/solidSettingsApi";
 import { useFormik } from "formik";
+import Image from "next/image";
 import Link from "next/link";
 import { useRouter, useSearchParams } from "next/navigation";
 import { Button } from "primereact/button";
@@ -13,6 +14,7 @@ import { Toast } from "primereact/toast";
 import { classNames } from "primereact/utils";
 import { useEffect, useRef } from "react";
 import * as Yup from "yup";
+import SolidLogo from '../../resources/images/SS-Logo.png'
 
 const SolidResetPassword = () => {
     const searchParams = useSearchParams();
@@ -81,10 +83,11 @@ const SolidResetPassword = () => {
                 {solidSettingsData?.data?.authPagesLayout === 'center' &&
                     <div className="flex justify-content-center">
                         <div className="solid-logo flex align-items-center gap-3">
-                            <img
+                            <Image
                                 alt="solid logo"
-                                src={'/images/SS-Logo-1 1.png'}
-                                className="position-relative img-fluid"
+                                src={SolidLogo}
+                                className="relative"
+                                fill
                             />
                             <AppTitle title={solidSettingsData} />
                         </div>
@@ -143,7 +146,7 @@ const SolidResetPassword = () => {
                                     </div> */}
                     <div className="mt-4">
                         <Button className="w-full font-light auth-submit-button" label="Reset Password" disabled={formik.isSubmitting} loading={formik.isSubmitting} />
-                        <Button type="button" label="Back" className="w-full auth-back-button text-center" link onClick={() => (window.location.href = '/auth/login')} />
+                        <Button type="button" label="Back" className="w-full auth-back-button text-center mt-1" link onClick={() => (window.location.href = '/auth/login')} />
                     </div>
                 </form>
             </div>

package/src/components/common/CancelButton.tsx

@@ -18,7 +18,7 @@ export const CancelButton = () => {
     };
     return (
         <div>
-            <Button outlined size="small" type="button" label="Cancel" onClick={handleGoBack} className='bg-primary-reverse'/>
+            <Button outlined size="small" type="button" label="Close" onClick={handleGoBack} className='bg-primary-reverse'/>
         </div>
     )
 }
@@ -36,7 +36,7 @@ export const SolidCancelButton = () => {
     };
     return (
         <div>
-            <Button outlined size="small" type="button" label="Cancel" onClick={handleGoBack}  className='bg-primary-reverse'/>
+            <Button outlined size="small" type="button" label="Close" onClick={handleGoBack}  className='bg-primary-reverse'/>
         </div>
     )
 }

package/src/components/common/DropzonePlaceholder.tsx

@@ -1,18 +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";
 
-export const DropzonePlaceholder = () => {
     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'>
-                    Drag and Drop or <span className='text-primary'> choose files</span> to upload
-                </div>
-                <p>Supported format : PDF/JPEG | File size max 10 MB</p>
-                <Button outlined size='small' severity='secondary' label='Click to Brows' type="button"/>
+            <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/FileReaderExt.tsx

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

package/src/components/common/SolidBreadcrumb.tsx

@@ -0,0 +1,27 @@
+import Link from 'next/link';
+import { BreadCrumb } from 'primereact/breadcrumb';
+import React from 'react';
+
+interface BreadcrumbItem {
+    label: string;
+    link?: string;
+}
+
+interface SolidBreadcrumbProps {
+    breadcrumbItems: BreadcrumbItem[];
+}
+
+export const SolidBreadcrumb: React.FC<SolidBreadcrumbProps> = ({ breadcrumbItems }) => {
+    const items = breadcrumbItems.map((item) => ({
+        label: item.label,
+        ...(item.link && item.link !== '#' ? {
+            template: () => (
+                <Link href={item.link || '/'}>
+                    <p className="text-primary font-normal">{item.label}</p>
+                </Link>
+            )
+        } : {})
+    }));
+
+    return <BreadCrumb model={items} className="solid-breadcrumb" />;
+};