@solidstarters/solid-core-ui 0.1.26

package/src/components/auth/Login.tsx

@@ -0,0 +1,155 @@
+"use client";
+
+import { Form, Formik } from "formik";
+import { signIn, useSession } from "next-auth/react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { Button } from "primereact/button";
+import { Checkbox } from "primereact/checkbox";
+import { Divider } from "primereact/divider";
+import { InputText } from "primereact/inputtext";
+import { Message } from "primereact/message";
+import { Password } from "primereact/password";
+import { Toast } from "primereact/toast";
+import { classNames } from "primereact/utils";
+import { useRef, useState } from "react";
+import * as Yup from "yup";
+import AuthBanner from "../common/AuthBanner";
+import { SocialMediaLogin } from "../common/SocialMediaLogin";
+
+
+const Login = () => {
+    const toast = useRef<Toast>(null);
+    const router = useRouter();
+
+    const [password, setPassword] = useState('');
+    const [checked, setChecked] = useState<boolean>(false);
+    const session = useSession();
+
+    const validationSchema = Yup.object({
+        email: Yup.string()
+            .email("Invalid email address")
+            .required("Email is required"),
+        password: Yup.string().required("Password is required"),
+    });
+
+    const showToast = (severity: "success" | "error", summary: string, detail: string) => {
+        toast.current?.show({
+            severity,
+            summary,
+            detail,
+            life: 3000,
+        });
+    };
+
+    const isFormFieldValid = (formik: any, fieldName: string) =>
+        formik.touched[fieldName] && formik.errors[fieldName];
+
+    return (
+        <div className="h-screen">
+            <Toast ref={toast} />
+            <div className="grid m-0 h-full">
+                <div className="col-12 md:col-12 lg:col-6">
+                    <div className="flex justify-content-center align-items-center h-full">
+                        <div className="col-12 sm:col-8">
+                            <h2 className="text-4xl text-semibold text-start secondary-color">Sign in to {process.env.SOLID_APP_TITLE}</h2>
+                            {/* <p className="signup-desc text-center">Create your account</p> */}
+                            <>
+                                <Formik
+                                    initialValues={{
+                                        email: "",
+                                        password: "",
+                                    }}
+                                    validationSchema={validationSchema}
+                                    onSubmit={async (values) => {
+                                        // Handle form submission
+                                        const email = values.email;
+                                        const password = values.password;
+
+                                        const response = await signIn("credentials", {
+                                            redirect: false,
+                                            email,
+                                            password,
+                                        });
+                                        if (response?.error) {
+                                            showToast("error", "Login Error", response.error);
+                                        } else {
+                                            showToast("success", "Login Success", "Redirecting to dashboard...");
+                                            router.push("/admin/core/solid-core/user/list");
+                                        }
+
+                                    }}
+                                >
+                                    {(formik) => (
+                                        <Form>
+                                            <div className="flex flex-column gap-2">
+                                                <label htmlFor="email" className="text-color-secondary">Email</label>
+                                                <InputText
+                                                    id="email"
+                                                    name="email"
+                                                    placeholder="Your Email"
+                                                    onChange={formik.handleChange}
+                                                    value={formik.values.email}
+                                                />
+                                                {isFormFieldValid(formik, "email") && <Message
+                                                    className="text-red-500 text-sm"
+                                                    severity="error"
+                                                    text={formik?.errors?.email?.toString()}
+                                                />}
+                                            </div>
+                                            <div className="flex flex-column gap-2 mt-4" style={{}}>
+                                                <label htmlFor="password" className="text-color-secondary">Password</label>
+                                                <Password
+                                                    id="password"
+                                                    value={password}
+                                                    onChange={(e) => {
+                                                        setPassword(e.target.value);
+                                                        formik.setFieldValue("password", e.target.value);
+                                                    }}
+                                                    toggleMask
+                                                    className={classNames("p-inputtext-sm w-full s-password-input", {
+                                                        "p-invalid": isFormFieldValid(formik, "password"),
+                                                    })}
+                                                    inputClassName="w-full"
+                                                    feedback={false}
+                                                />
+                                                {isFormFieldValid(formik, "password") && <Message
+                                                    className="text-red-500 text-sm"
+                                                    severity="error"
+                                                    text={formik?.errors?.password?.toString()}
+                                                />}
+                                            </div>
+                                            <div className="flex align-items-center mt-4">
+                                                <Checkbox inputId="remember" onChange={(e: any) => setChecked(e.checked)} checked={checked} />
+                                                <label htmlFor="remember" className="ml-2">Remember me</label>
+                                            </div>
+                                            <div className="mt-4">
+                                                <Button className="w-full secondary-bg-color" label="Sign in" style={{ borderColor: 'currentcolor' }} />
+                                            </div>
+                                        </Form>
+                                    )}
+                                </Formik>
+                                <Divider align="center">
+                                    <div className="inline-flex align-items-center text-400">
+                                        or continue with
+                                    </div>
+                                </Divider>
+                                <div className="text-center">
+                                    <div className="text-sm text-400">
+                                        Don’t have an account ? <Link href="/auth/register">Sign up</Link>
+                                    </div>
+                                </div>
+                                <SocialMediaLogin />
+                            </>
+                        </div>
+                    </div>
+                </div>
+                <div className="col-12 md:col-12 lg:col-6 hidden lg:block p-0">
+                    <AuthBanner></AuthBanner>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Login;

package/src/components/auth/Register.tsx

@@ -0,0 +1,239 @@
+"use client";
+
+import { useRegisterMutation } from "@/redux/api/authApi";
+import { FetchBaseQueryError } from "@reduxjs/toolkit/query/react";
+import { useFormik } from "formik";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { Button } from "primereact/button";
+import { Checkbox } from "primereact/checkbox";
+import { Divider } from "primereact/divider";
+import { InputText } from "primereact/inputtext";
+import { Message } from "primereact/message";
+import { Password } from "primereact/password";
+import { Toast } from "primereact/toast";
+import { classNames } from "primereact/utils";
+import { ChangeEventHandler, useEffect, useRef, useState } from "react";
+import * as Yup from "yup";
+import AuthBanner from "../common/AuthBanner";
+import { SocialMediaLogin } from "../common/SocialMediaLogin";
+
+const Register = () => {
+  const toast = useRef<Toast>(null);
+  const [password, setPassword] = useState("");
+  const [checked, setChecked] = useState<boolean>(false);
+  const [showPassword, setShowPassword] = useState(false);
+  const [user, setUser] = useState({
+    name: "",
+    email: "",
+    password: "",
+  });
+
+  const validationSchema = Yup.object({
+    username: Yup.string().required("User Name is required"),
+    email: Yup.string()
+      .email("Invalid email address")
+      .required("Email is required"),
+    password: Yup.string().required("Password is required"),
+  });
+
+  const router = useRouter();
+
+  const isFormFieldValid = (formik: any, fieldName: string) =>
+    formik.touched[fieldName] && formik.errors[fieldName];
+
+  const [register, { isLoading, error, isSuccess,data }] = useRegisterMutation();
+
+  const onChange: ChangeEventHandler<HTMLInputElement> = (e) => {
+    setUser({ ...user, [e.target.name]: e.target.value });
+  };
+
+  const initialValues = {
+    username: "",
+    email: "",
+    password: "",
+  }
+
+  const formik = useFormik({
+    initialValues,
+    validationSchema,
+    enableReinitialize: true,
+    onSubmit: async (values) => {
+      try {
+      const userData = {
+        username: values.username,
+        email: values.email,
+        password: values.password,
+      };
+
+      await register(userData);
+      } catch (err) {
+        console.log('inside', err);
+      } 
+    }
+  });
+
+  const showError = () => {
+    if (error) {
+      if ("data" in error) {
+        const apiError = error as FetchBaseQueryError;
+        const errorMessages = Array.isArray(apiError.data?.message)
+          ? apiError.data?.message
+          : [apiError.data?.message];
+
+        toast.current?.show({
+          severity: "error",
+          summary: "Error",
+          detail: errorMessages.join(", "),
+          life: 3000,
+        });
+      } else {
+        const serializedError = error as Error;
+        toast.current?.show({
+          severity: "error",
+          summary: "Error",
+          detail: serializedError.message || "An error occurred",
+          life: 3000,
+        });
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (error) {
+      showError();
+    }
+  }, [error]);
+
+  useEffect(() => {
+    if (isSuccess) {
+      router.replace("/auth/login");
+    }
+  }, [isSuccess])
+  
+  return (
+    <div className="h-screen">
+      <Toast ref={toast} />
+      <div className="grid m-0 h-full">
+        <div className="col-12 md:col-12 lg:col-6">
+          <div className="flex justify-content-center align-items-center h-full">
+            <div className="col-12 sm:col-8">
+              <h2 className="text-4xl text-semibold text-start secondary-color mb-0">
+                Sign up to Radix Solutions
+              </h2>
+              <p className="text-sm">Create your account</p>
+                  <form onSubmit={formik.handleSubmit}>
+                    <div className="flex flex-column gap-2">
+                      <label
+                        htmlFor="username"
+                        className="text-color-secondary"
+                      >
+                        Username
+                      </label>
+                      <InputText
+                        id="username"
+                        name="username"
+                        placeholder="username"
+                        onChange={formik.handleChange}
+                        value={formik.values.username}
+                        className={classNames("p-inputtext-sm w-full", {
+                          "p-invalid": isFormFieldValid(formik, "name"),
+                        })}
+                      />
+                      {isFormFieldValid(formik, "username") && <Message
+                        className="text-red-500 text-sm"
+                        severity="error" 
+                        text={formik?.errors?.username?.toString()}
+                      />}
+                    </div>
+                    <div className="flex flex-column gap-2 mt-4">
+                      <label htmlFor="email" className="text-color-secondary">
+                        Email
+                      </label>
+                      {/* <img
+                                                                style={{ cursor: "pointer" }}
+                                                                src={`/images/mail-icon.png`}
+                                                                alt="Solid"
+                                                            /> */}
+                      <InputText
+                        id="email"
+                        name="email"
+                        placeholder="Yourgmail@123.com"
+                        onChange={formik.handleChange}
+                        value={formik.values.email}
+                        className={classNames("p-inputtext-sm w-full", {
+                          "p-invalid": isFormFieldValid(formik, "name"),
+                        })}
+                      />
+                      {isFormFieldValid(formik, "email") && <Message
+                        className="text-red-500 text-sm"
+                        severity="error" text={formik?.errors?.email?.toString()}
+                      />}
+                    </div>
+                    <div className="flex flex-column gap-2 mt-4" style={{}}>
+                      <label
+                        htmlFor="password"
+                        className="text-color-secondary"
+                      >
+                        Password
+                      </label>
+                      <Password
+                        id="password"
+                        name="password"
+                        value={formik.values.password}
+                        onChange={formik.handleChange}
+                        // value={formik.values.password}}
+                        toggleMask
+                        inputClassName="w-full"
+                        className={classNames("p-inputtext-sm w-full s-password-input", {
+                          "p-invalid": isFormFieldValid(formik, "password"),
+                        })}
+                      />
+                      {isFormFieldValid(formik, "password") && <Message
+                        className="text-red-500 text-sm"
+                        severity="error" text={formik?.errors?.password?.toString()}
+                      />}
+                    </div>
+                    <div className="flex align-items-center mt-4">
+                      <Checkbox
+                        inputId="remember"
+                        onChange={(e: any) => setChecked(e.checked)}
+                        checked={checked}
+                      />
+                      <label htmlFor="remember" className="ml-2">
+                        Remember me
+                      </label>
+                    </div>
+                    <div className="mt-4">
+                      <Button
+                        className="w-full secondary-bg-color"
+                        label="Create your account"
+                        style={{ borderColor: "currentcolor" }}
+                        type="submit"
+                      />
+                    </div>
+                  </form>
+              <Divider align="center">
+                <div className="inline-flex align-items-center text-400">
+                  or continue with
+                </div>
+              </Divider>
+              <div className="text-center">
+                <div className="text-sm text-400">
+                  Don’t have an account ?{" "}
+                  <Link href="/auth/login">Sign in</Link>
+                </div>
+              </div>
+              <SocialMediaLogin />
+            </div>
+          </div>
+        </div>
+        <div className="col-12 md:col-12 lg:col-6 hidden lg:block p-0">
+          <AuthBanner></AuthBanner>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Register;

package/src/components/common/AuthBanner.tsx

@@ -0,0 +1,40 @@
+
+const AuthBanner = () => {
+  return (
+    <div
+      style={{
+        position: "relative",
+        width: "100%",
+        height: "calc(100vh)",
+        background: 'url(/images/loginhero.png)',
+        // background: 'url(/images/LoginBanner.png)',
+        backgroundSize: 'cover',
+        marginTop: process.env.ENABLE_CUSTOM_HEADER_FOOTER === "true" ? 70 : 0
+      }}
+      className="flex align-items-center"
+    >
+      <div className="grid m-0">
+        <div className="col-8 mx-auto">
+          <div className="text-5xl text-white font-semibold line-height-3">
+            {process.env.SOLID_APP_TITLE}
+          </div>
+          <div className="text-sm text-white line-height-3">
+            {process.env.NEXT_PUBLIC_SOLID_APP_DESCRIPTION}
+          </div>
+          <div className="mt-5">
+            {/* <AvatarGroup>
+              <Avatar image="/images/AvatarDemo.png" size="large" shape="circle" />
+              <Avatar image="/images/AvatarDemo.png" size="large" shape="circle" />
+              <Avatar image="/images/AvatarDemo.png" size="large" shape="circle" />
+              <Avatar image="/images/AvatarDemo.png" size="large" shape="circle" />
+              <Avatar image="/images/AvatarDemo.png" size="large" shape="circle" />
+              <Avatar label="60k+" shape="circle" size="large" className="text-sm text-bold" style={{ color: '#191866', backgroundColor: '#fff' }} />
+            </AvatarGroup> */}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AuthBanner;

package/src/components/common/AutoCompleteField.tsx

@@ -0,0 +1,74 @@
+import { AutoComplete } from "primereact/autocomplete";
+import { useEffect, useState } from "react";
+
+
+
+export const AutoCompleteField = ({ multiple, isFormFieldValid, formik, fieldName, searchData, existingData, existingDataTitle, existingDataId, onBlur }: any) => {
+
+
+
+
+    const [selectedItem, setSelectedItem] = useState(existingData);
+    const [filteredItem, setFilteredItem] = useState([]);
+    useEffect(() => {
+        if (existingData) {
+            setSelectedItem(existingData)
+            // formik.setFieldValue(fieldName, existingData);
+
+        }
+    }, [existingData])
+    const searchItems = async (event: any) => {
+        const data = await searchData(event);
+        setFilteredItem(data);
+    };
+
+
+
+    return (
+
+        <AutoComplete
+            value={selectedItem}
+            multiple={multiple ? multiple : false}
+            suggestions={filteredItem}
+            invalid={isFormFieldValid(formik, fieldName)}
+            completeMethod={searchItems}
+            virtualScrollerOptions={{ itemSize: 38 }}
+            className="w-full small-input"
+            // style={{
+            //     maxHeight: 39.67
+            // }}
+            field="label"
+            dropdown
+            onBlur={onBlur}
+            onChange={(e) => {
+                let data = {};
+
+              
+                if (typeof (e.value) == "string") {
+                    data = e.value
+                } else {
+                    if (multiple === true) {
+                        data = e.value.map((m: any) =>
+                        ({
+                            label: m.label,
+                            name: m.label,
+                            value: m.value,
+                            id: m.value,
+                        }))
+                    } else {
+                        data = {
+                            label: e.value.label,
+                            name: e.value.label,
+                            value: e.value.value,
+                            id: e.value.value,
+                        }
+                    }
+                }
+
+
+                setSelectedItem(data);
+                formik.setFieldValue(fieldName, data);
+            }}
+        />
+    )
+}

package/src/components/common/CancelButton.tsx

@@ -0,0 +1,42 @@
+"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="Cancel" severity="danger" onClick={handleGoBack}  className='small-button'/>
+        </div>
+    )
+}
+
+export const SolidCancelButton = () => {
+    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, -2).join('/') + '/list'; // Remove last segment and add "/all"
+            router.push(newPath); // Navigate to the parent route with "/all"
+        }
+    };
+    return (
+        <div>
+            <Button outlined size="small" type="button" label="Cancel" severity="danger" onClick={handleGoBack}  className='small-button'/>
+        </div>
+    )
+}

package/src/components/common/CodeEditor.tsx

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,16 @@
+import { usePathname, useRouter } from 'next/navigation';
+import { Button } from 'primereact/button';
+
+export const CreateButton = () => {
+    const router = useRouter();
+    const pathName = usePathname();
+    // console.log("pathname", pathName);
+    
+    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

@@ -0,0 +1,9 @@
+
+export const DropzonePlaceholder = () => {
+    return (
+        <div className='flex flex-column align-items-center p-3 border-1 border-dashed surface-border'>
+            <svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" fill="none" viewBox="0 0 24 20" aria-hidden="true" className='dropzone-placeholder'><path fill="#32324D" d="M21.569 2.398H7.829v1.586h13.74c.47 0 .826.5.826 1.094v9.853l-2.791-3.17a2.13 2.13 0 0 0-.74-.55 2.214 2.214 0 0 0-.912-.196 2.215 2.215 0 0 0-.912.191 2.131 2.131 0 0 0-.74.546l-2.93 3.385-2.973-3.36a2.147 2.147 0 0 0-.741-.545 2.228 2.228 0 0 0-1.824.007c-.286.13-.538.319-.739.553l-2.931 3.432V7.653H2.51v9.894c.023.153.06.304.108.452v.127l.041.095c.057.142.126.28.207.412l.099.15c.074.107.157.207.247.302l.124.119c.13.118.275.222.43.309h.024c.36.214.775.327 1.198.325h16.515c.36-.004.716-.085 1.039-.24.323-.153.606-.375.827-.648a2.78 2.78 0 0 0 .504-.888c.066-.217.108-.44.124-.666V5.078a2.497 2.497 0 0 0-.652-1.81 2.706 2.706 0 0 0-1.776-.87Z"></path><path fill="#32324D" d="M12.552 9.199c.912 0 1.651-.71 1.651-1.585 0-.876-.74-1.586-1.651-1.586-.912 0-1.652.71-1.652 1.586 0 .875.74 1.585 1.652 1.585ZM3.303 6.408h.826V3.997h2.477V2.41H4.129V0h-.826c-.219 0-.85.002-.826 0v2.411H0v1.586h2.477v2.41h.826Z"></path></svg>
+            <p className='text-xs text-cyan-500 font-semibold'>Click to add an asset or drag and drop one in this area</p>
+        </div>
+    )
+}

package/src/components/common/DropzoneUpload.tsx

@@ -0,0 +1,9 @@
+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>
+    )
+}