@solidxai/core-ui 0.1.0 → 0.1.2

package/src/components/common/SolidNotFoundPage.tsx

@@ -1,37 +0,0 @@
-import { Card } from "primereact/card";
-import { Button } from "primereact/button";
-import { useRouter } from "../../hooks/useRouter";
-
-type SolidNotFoundPageProps = {
-  title?: string;
-  message?: string;
-  actionLabel?: string;
-  actionHref?: string;
-};
-
-export const SolidNotFoundPage = ({
-  title = "Not Found",
-  message = "Requested resource is not available.",
-  actionLabel = "Go to Dashboard",
-  actionHref = "/admin",
-}: SolidNotFoundPageProps) => {
-  const router = useRouter();
-
-  return (
-    <div className="flex align-items-center justify-content-center" style={{ minHeight: "70vh" }}>
-      <Card className="w-full" style={{ maxWidth: 420 }}>
-        <div className="flex flex-column align-items-center text-center gap-3">
-          <div className="text-xl font-bold" style={{ color: "#3b82f6" }}>404</div>
-          <h2 className="m-0">{title}</h2>
-          <p className="m-0 text-sm">{message}</p>
-          <Button
-            label={actionLabel}
-            link
-            onClick={() => router.push(actionHref)}
-            className="mt-2"
-          />
-        </div>
-      </Card>
-    </div>
-  );
-};

package/src/components/common/SolidPopupContainer.tsx

@@ -1,37 +0,0 @@
-
-// components/PopupContainer.tsx
-import { useSelector, useDispatch } from 'react-redux';
-import { RootState } from '../../types/solid-core';
-import { closePopup } from '../../redux/features/popupSlice';
-import { Dialog } from 'primereact/dialog';
-import { get } from 'lodash';
-import { getExtensionComponent } from '../../helpers/registry';
-import { Button } from 'primereact/button';
-
-
-const SolidPopupContainer = () => {
-    const { isOpen, event } = useSelector((state: RootState) => state.popup);
-    const dispatch = useDispatch();
-
-    if (!isOpen) return null;
-
-    const DynamicComponent = getExtensionComponent(event?.action);
-
-    return (
-        <Dialog
-            visible={isOpen}
-            onHide={() => dispatch(closePopup())}
-            closable={false}
-            style={{ width: event.popupWidth ? event.popupWidth : '50vw' }}
-            modal
-            headerClassName='p-0'
-            contentClassName='p-0'
-            contentStyle={{ borderRadius: 6 }}
-            className='solid-common-dialog'
-        >
-            {DynamicComponent && <DynamicComponent {...event} />}
-        </Dialog>
-    );
-};
-
-export default SolidPopupContainer;

package/src/components/common/SolidSettings/LlmSettings/AnthropicProviderComponent.tsx

@@ -1,45 +0,0 @@
-import { InputText } from "primereact/inputtext";
-import { Password } from "primereact/password";
-
-export const AnthropicProviderComponent = ({ profile, onUpdate }: any) => {
-  return (
-    <div className="grid">
-      <div className="field col-12 md:col-6 pl-3">
-        <div className="flex flex-column gap-2 mt-3">
-          <label htmlFor="displayName" className="form-field-label">
-            Base URL
-          </label>
-          <InputText
-            value={profile?.baseUrl || ""}
-            onChange={(e) => onUpdate("baseUrl", e.target.value)}
-            className="w-full"
-          />
-        </div>
-
-        <div className="flex flex-column gap-2 mt-3">
-          <label htmlFor="displayName" className="form-field-label">
-            Api Key
-          </label>
-          <Password
-            className="w-full"
-            value={profile?.apiKey || ""}
-            onChange={(e) => onUpdate("apiKey", e.target.value)}
-            toggleMask
-            feedback={false}
-            inputClassName="w-full"
-          />
-        </div>
-        <div className="flex flex-column gap-2 mt-3">
-          <label htmlFor="displayName" className="form-field-label">
-            Model Name
-          </label>
-          <InputText
-            value={profile?.modelName || ""}
-            onChange={(e) => onUpdate("modelName", e.target.value)}
-            className="w-full"
-          />
-        </div>
-      </div>
-    </div>
-  );
-};

package/src/components/common/SolidSettings/LlmSettings/OpenAiProviderComponent.tsx

@@ -1,45 +0,0 @@
-import { InputText } from "primereact/inputtext";
-import { Password } from "primereact/password";
-
-export const OpenAiProviderComponent = ({ profile, onUpdate }: any) => {
-  return (
-    <div className="grid">
-      <div className="field col-12 md:col-6 pl-3">
-        <div className="flex flex-column gap-2 mt-3">
-          <label htmlFor="displayName" className="form-field-label">
-            Base URL
-          </label>
-          <InputText
-            value={profile?.baseUrl || ""}
-            onChange={(e) => onUpdate("baseUrl", e.target.value)}
-            className="w-full"
-          />
-        </div>
-
-        <div className="flex flex-column gap-2 mt-3">
-          <label htmlFor="displayName" className="form-field-label">
-            Api Key
-          </label>
-          <Password
-            className="w-full"
-            value={profile?.apiKey || ""}
-            onChange={(e) => onUpdate("apiKey", e.target.value)}
-            toggleMask
-            feedback={false}
-            inputClassName="w-full"
-          />
-        </div>
-        <div className="flex flex-column gap-2 mt-3">
-          <label htmlFor="displayName" className="form-field-label">
-            Model Name
-          </label>
-          <InputText
-            value={profile?.modelName || ""}
-            onChange={(e) => onUpdate("modelName", e.target.value)}
-            className="w-full"
-          />
-        </div>
-      </div>
-    </div>
-  );
-};

package/src/components/common/SolidSettings/SettingDropzoneActivePlaceholder.tsx

@@ -1,20 +0,0 @@
-import { Button } from 'primereact/button'
-import React from 'react'
-
-export const SettingDropzoneActivePlaceholder = ({note}:any) => {
-    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 text-center'>
-                Drag and Drop or <span className='text-primary'> Logo</span> to upload
-            </div>
-            <p className='text-center'>Supported format:PNG, JPG, JPEG, SVG, WEBP | Max size: 2 MB</p>
-            <small className='mb-2 text-center'>Note: {note ? note : "200px image width is ideal"}</small>
-            <div>
-                <Button outlined size='small' severity='secondary' label='Click to Browse' type="button" />
-            </div>
-        </div>
-    )
-}

package/src/components/common/SolidSettings/SettingsImageRemoveButton.tsx

@@ -1,15 +0,0 @@
-import { Button } from 'primereact/button'
-import React from 'react'
-
-export const SettingsImageRemoveButton = ({ onClick }: any) => {
-    return (
-        <Button
-            label="Remove"
-            severity="danger"
-            icon="pi pi-times"
-            size="small"
-            className="mt-2"
-            onClick={onClick}
-        />
-    )
-}

package/src/components/common/SolidSettings/SolidUploadedImage.tsx

@@ -1,16 +0,0 @@
-import Image from "../Image"
-import React from 'react'
-
-export const SolidUploadedImage = ({ src, height, width, maxHeight, className }: any) => {
-    return (
-        <Image
-            src={src}
-            alt="App Logo"
-            width={width ? width : 200}
-            height={height ? height : 120}
-            style={{ objectFit: "contain", maxHeight: maxHeight ? maxHeight : 150, maxWidth: '100%' }}
-            unoptimized
-            className={className}
-        />
-    )
-}

package/src/components/common/SolidThemeLink.tsx

@@ -1,6 +0,0 @@
-
-export const SolidThemeLink = () => {
-    return (
-        <link id="theme-css" href={`/themes/solid-light-purple/theme.css`} rel="stylesheet"></link>
-    )
-}

package/src/components/common/SolidThemeProvider.tsx

@@ -1,44 +0,0 @@
-
-
-import { useEffect, useState } from "react";
-import { usePathname } from "../../hooks/usePathname";
-import { useSelector } from "react-redux";
-import { useLazyGetAuthSettingsQuery } from "../../redux/api/solidSettingsApi";
-
-export const SolidThemeProvider = () => {
-    const pathname = usePathname();
-    const [trigger, { data: solidSettingsData }] = useLazyGetAuthSettingsQuery()
-    useEffect(() => {
-        if (pathname.includes("/auth/")) {
-            trigger("");
-        }
-    }, [pathname, trigger]);
-
-    const [theme, setTheme] = useState("solid-light-purple");
-    useEffect(() => {
-        if (pathname.includes("/auth/") && solidSettingsData?.data?.authPagesTheme) {
-            const selectedTheme =
-                solidSettingsData?.data?.authPagesTheme === "dark" ? "solid-dark-purple" : "solid-light-purple";
-            setTheme(selectedTheme);
-        } else {
-            setTheme("solid-light-purple");
-        }
-    }, [pathname, solidSettingsData]);
-
-    useEffect(() => {
-        // Find or create <link> element
-        let themeLink = document.getElementById("theme-css") as HTMLLinkElement;
-
-        // if (!themeLink) {
-        //     themeLink = document.createElement("link");
-        //     themeLink.id = "theme-css";
-        //     themeLink.rel = "stylesheet";
-        //     document.head.appendChild(themeLink);
-        // }
-
-        // Update theme link dynamically
-        themeLink.href = `/themes/${theme}/theme.css`;
-    }, [theme]);
-
-    return null;
-}

package/src/components/common/StepperArrows/ActiveArrowStep.tsx

@@ -1,18 +0,0 @@
-
-export const ActiveArrowStep = () => {
-    return (
-        <svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" fill="#000000" transform="rotate(30)"
-            height="48px"
-            width="48px"
-        >
-            <g id="SVGRepo_iconCarrier">
-                <g id="color">
-                    <polygon fill={"var(--primary-color)"} points="36,62 65,12 7,12" />
-                </g>
-                <g id="line">
-                    <polyline fill="none" stroke="" strokeMiterlimit="10" strokeWidth="1.5" points="36,62 65,12 7,12" />
-                </g>
-            </g>
-        </svg>
-    )
-}

package/src/components/common/StepperArrows/ActiveBeforeStepArrow.tsx

@@ -1,18 +0,0 @@
-
-export const ActiveBeforeStepArrow = () => {
-    return (
-        <svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" fill="#000000" transform="rotate(30)"
-            height="48px"
-            width="48px"
-        >
-            <g id="SVGRepo_iconCarrier">
-                <g id="color">
-                    <polygon fill="#EAEDF1" points="36,62 65,12 7,12" />
-                </g>
-                <g id="line">
-                    <polyline fill="none" stroke="var(--solid-stepper-border)" strokeMiterlimit="10" strokeWidth="1.5" points="36,62 65,12 7,12" />
-                </g>
-            </g>
-        </svg>
-    )
-}

package/src/components/common/StepperArrows/InactiveStepArrow.tsx

@@ -1,19 +0,0 @@
-
-
-export const InactiveStepArrow = () => {
-    return (
-        <svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" fill="#000000" transform="rotate(30)"
-            height="48px"
-            width="48px"
-        >
-            <g id="SVGRepo_iconCarrier">
-                <g id="color">
-                    <polygon fill="#fff" points="36,62 65,12 7,12" />
-                </g>
-                <g id="line">
-                    <polyline fill="none" stroke="var(--solid-stepper-border)" strokeMiterlimit="10" strokeWidth="1.5" points="36,62 65,12 7,12" />
-                </g>
-            </g>
-        </svg>
-    )
-}

package/src/components/common/error.tsx

@@ -1,30 +0,0 @@
- // Error components must be Client Components
-
-interface CustomError extends Error {
-  errMessage: string;
-}
-
-export default function Error({
-  error,
-  reset,
-}: {
-  error: CustomError;
-  reset?: () => void;
-}) {
-  return (
-    <div>
-      <div className="d-flex justify-content-center align-items-center vh-100">
-        <div className="text-center">
-          <h2 className="display-4 fw-bold">{error?.errMessage}</h2>
-          <p className="fs-3">
-            <span className="text-danger">Opps!</span> Something went wrong!
-          </p>
-          <p className="lead">Sorry for inconvience</p>
-          <button className="btn btn-primary" onClick={() => reset?.()}>
-            Try again
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/components/common/solid-export.css

@@ -1,85 +0,0 @@
-.ExportCustomProgressbar{
-    height: 3px !important;
-}
-
-.ExportCustomProgressbar .p-progressbar-label {
-  display: none !important;
-}
-
-.ExportText{
-    color:  var(--solid-grey-500) !important;
-    font-size: 14px !important;
-}
-
-.ExportDialog {
-    width: 70% ;
-    height: 700px ;
-}
-
-.SolidExportControls{
-    display: flex;
-    justify-content: flex-end;
-}
-
-.ExportCancelButton{
-    background-color: var(--primary-color) !important;
-    border: 1px solid  var(--primary-color)  !important;
-    border-radius: 12px;
-}
-
-.ExportDropdownText {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    margin-right: 8px;
- }
-
-.ExportDropdownIcon {
-    flex-shrink: 0;
-    cursor: pointer;
-}
-
-.SolidExportProgressToaster {
-    position: fixed;
-    bottom: 1rem;
-    right: 1rem;
-    padding: 1rem;
-    background-color: var(--primary-light-color);
-    color: white;
-    border-radius: 6px;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
-    min-width: 500px;
-    z-index: 1000;
-}
-
-.SolidCustomPicklist {
-  border-radius: 0.5rem;
-  border: 1px solid var(--primary-light-color) !important;
-  background: #FFF !important;
-  overflow: hidden;
-  position: relative;
-}
-
-.SolidCustomPicklistSourceHeader {
-  border-right: 1px solid var(--primary-light-color);
-}
-
-.SolidCustomPicklistItemWrapper {
-  height: 2.5rem;
-  border-top: 1px solid var(--primary-light-color);
-}
-
-.SolidCustomPicklistSourceItem {
-  border-right: 1px solid var(--primary-light-color);
-}
-
-
-@media(max-width:767px){
-  .SolidCustomPicklistItemWrapper {
-    min-height: 2.7rem;
-    height: auto;
-    border-top: 1px solid var(--primary-light-color);
-    display: flex;
-    align-items: center;
-}
-}

package/src/components/common/solidModuleHome.module.css

@@ -1,135 +0,0 @@
-.solidModuleWelcomeSection {
-    background-color: var(--solid-dashboard-welcome-bg);
-    padding: 24px;
-    border-radius: 0.5rem;
-    position: relative;
-    overflow: hidden;
-}
-
-.homeSvg {
-    position: absolute;
-    right: 0;
-    top: 0;
-    bottom: 0;
-}
-
-.solidModuleHomeTitle1 {
-    font-size: 1.5rem;
-    font-style: normal;
-    font-weight: 700;
-    color: var(--solid-dark-title);
-    margin: 0;
-}
-
-.solidModuleHomeColorCards {
-    border-radius: 0.5rem;
-    padding: 24px;
-    display: flex;
-    align-items: flex-end;
-    justify-content: space-between;
-    height: 100%;
-}
-
-.dashboardCardOne {
-    border: 1px solid var(--solid-dashboard-card-one-border);
-    background: var(--solid-dashboard-card-one-bg);
-}
-
-.dashboardCardOne .solidModuleHomeCardSvgWrapper {
-    background-color: var(--solid-admin-card-color-1);
-}
-
-.dashboardCardTwo {
-    border: 1px solid var(--solid-dashboard-card-two-border);
-    background: var(--solid-dashboard-card-two-bg);
-}
-
-.dashboardCardTwo .solidModuleHomeCardSvgWrapper {
-    background-color: var(--solid-admin-card-color-2);
-}
-
-.dashboardCardThree {
-    border: 1px solid var(--solid-dashboard-card-three-border);
-    background: var(--solid-dashboard-card-three-bg);
-}
-
-.dashboardCardThree .solidModuleHomeCardSvgWrapper {
-    background-color: var(--solid-admin-card-color-3);
-}
-
-.solidModuleHomeCardSvgWrapper,
-.solidModuleHomeActionCardSvgWrapper {
-    display: flex;
-    width: 3rem;
-    height: 3rem;
-    padding: 0.5rem;
-    justify-content: center;
-    align-items: center;
-    flex-shrink: 0;
-    aspect-ratio: 1/1;
-    border-radius: 50%;
-}
-
-.solidModuleHomeActionCard {
-    border-radius: 0.5rem;
-    padding: 24px;
-    height: 100%;
-    border: 1px solid var(--primary-light-color);
-    transition: 0.2s linear;
-    cursor: pointer;
-    background-color: var(--surface-0);
-}
-
-.solidModuleHomeActionCard:hover {
-    background: var(--hightlight-bg-secondary);
-    box-shadow: 0px 4px 8px 1px rgba(167, 167, 167, 0.16);
-}
-
-.solidModuleHomeActionCardSvgWrapper {
-    background-color: var(--gray-100);
-    transition: 0.2s linear;
-}
-
-.solidModuleHomeActionCardSvgWrapper svg path {
-    fill: var(--primary-color);
-    background-color: var(--primary-color);
-    transition: 0.2s linear;
-}
-
-.solidModuleHomeActionCard:hover .solidModuleHomeActionCardSvgWrapper {
-    background-color: var(--primary-color);
-}
-
-.solidModuleHomeActionCard:hover .solidModuleHomeActionCardSvgWrapper svg path {
-    fill: var(--surface-a);
-}
-
-@media(max-width:991px) {
-    .solidModuleWelcomeSection {
-        padding: 16px;
-        height: 100%;
-        padding-bottom: 0 !important;
-        padding-right: 0px !important;
-    }
-
-    .solidModuleHomeColorCards {
-        padding: 16px;
-    }
-
-    .solidModuleHomeActionCard {
-        padding: 16px;
-    }
-
-    .solidModuleHomeTitle1 {
-        font-size: 1.4rem;
-    }
-
-    .homeSvg {
-        position: relative;
-        right: 0;
-        top: 0;
-        bottom: 0;
-    }
-
-
-}

package/src/components/common/useHandleFormCustomButtonClick.ts

@@ -1,40 +0,0 @@
-import { useDispatch } from "react-redux";
-import { getExtensionComponent, getExtensionFunction } from "../../helpers/registry";
-import { openPopup } from "../../redux/features/popupSlice";
-import React, { ComponentType } from "react";
-import { ERROR_MESSAGES } from "../../constants/error-messages";
-
-type CustomButtonData = {
-    icon?: string,
-    className?: string,
-    label: string,
-    action: string,
-    openInPopup: boolean,
-    actionInContextMenu: boolean,
-    customComponentIsSystem: string,
-    closable: boolean
-}
-
-
-export const useHandleFormCustomButtonClickaction = () => {
-    const dispatch = useDispatch();
-
-    return (buttonAttrs: any, event: any) => {
-        const { action, openInPopup, closable }: CustomButtonData = buttonAttrs;
-
-        if (openInPopup === true) {
-            const eventData = { ...event, action: action, closable: closable };
-            dispatch(openPopup(eventData));
-
-        } else {
-            const eventData = { ...event, action: action, closable: closable };
-            const dynamicFunction = getExtensionFunction(action);
-            if (!dynamicFunction) {
-                console.error(ERROR_MESSAGES.ACTION_FUNCTION(action));
-                return;
-            }
-            dynamicFunction(eventData);
-        }
-
-    };
-};

package/src/components/common/useHandleListCustomButtonClick.ts

@@ -1,40 +0,0 @@
-import { useDispatch } from "react-redux";
-import { getExtensionComponent, getExtensionFunction } from "../../helpers/registry";
-import { openPopup } from "../../redux/features/popupSlice";
-import React, { ComponentType } from "react";
-import { ERROR_MESSAGES } from "../../constants/error-messages";
-type CustomButtonData = {
-    icon?: string,
-    className?: string,
-    label: string,
-    action: string,
-    openInPopup: boolean,
-    actionInContextMenu: boolean,
-    customComponentIsSystem: string,
-    popupWidth?: string,
-    closable?: boolean
-}
-
-
-export const useHandleListCustomButtonClick = () => {
-    const dispatch = useDispatch();
-
-    return (buttonAttrs: any, event: any) => {
-        const { action, openInPopup }: CustomButtonData = buttonAttrs;
-
-        if (openInPopup === true) {
-            const eventData = { ...event, ...buttonAttrs };
-            dispatch(openPopup(eventData));
-
-        } else {
-            const eventData = { ...event, ...buttonAttrs };
-            const dynamicFunction = getExtensionFunction(action);
-            if (!dynamicFunction) {
-                console.error(ERROR_MESSAGES.ACTION_FUNCTION(action));
-                return;
-            }
-            dynamicFunction(eventData);
-        }
-
-    };
-};