@solidxai/core-ui 0.1.1 → 0.1.2

package/src/components/layout/Layout.tsx

@@ -1,205 +0,0 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import { ChildContainerProps, LayoutState } from '../../types';
-import { usePathname } from "../../hooks/usePathname";
-import { useSearchParams } from "../../hooks/useSearchParams";
-import { PrimeReactContext } from 'primereact/api';
-import { useEventListener, useUnmountEffect } from 'primereact/hooks';
-import { classNames } from 'primereact/utils';
-import React, { useContext, useEffect, useRef } from 'react';
-import { useSelector } from 'react-redux';
-import AppConfig from './AppConfig';
-import { LayoutContext } from './context/layoutcontext';
-import AppSidebar from './AppSidebar';
-import SolidPopupContainer from '../common/SolidPopupContainer';
-import { useSession } from "../../hooks/useSession";
-import { getExtensionFunction } from '../../helpers/registry';
-import { SolidOnApplicationMountEvent } from '../../types/solid-core';
-import { env } from "../../adapters/env";
-
-export const Layout = ({ children }: ChildContainerProps) => {
-    const { layoutConfig, layoutState, setLayoutState } = useContext(LayoutContext);
-    const { setRipple } = useContext(PrimeReactContext);
-    // const topbarRef = useRef<AppTopbarRef>(null);
-    const sidebarRef = useRef<HTMLDivElement>(null);
-    const [bindMenuOutsideClickListener, unbindMenuOutsideClickListener] = useEventListener({
-        type: 'click',
-        listener: (event) => {
-            const isOutsideClicked = !(
-                sidebarRef.current?.isSameNode(event.target as Node) ||
-                sidebarRef.current?.contains(event.target as Node)
-                // topbarRef.current?.menubutton?.isSameNode(event.target as Node) ||
-                // topbarRef.current?.menubutton?.contains(event.target as Node)
-            );
-
-            if (isOutsideClicked) {
-                hideMenu();
-            }
-        }
-    });
-
-    const pathname = usePathname();
-    const searchParams = useSearchParams();
-    useEffect(() => {
-        hideMenu();
-        hideProfileMenu();
-    }, [pathname, searchParams]);
-
-    // const [bindProfileMenuOutsideClickListener, unbindProfileMenuOutsideClickListener] = useEventListener({
-    //     type: 'click',
-    //     listener: (event) => {
-    //         const isOutsideClicked = !(
-    //             topbarRef.current?.topbarmenu?.isSameNode(event.target as Node) ||
-    //             topbarRef.current?.topbarmenu?.contains(event.target as Node) ||
-    //             topbarRef.current?.topbarmenubutton?.isSameNode(event.target as Node) ||
-    //             topbarRef.current?.topbarmenubutton?.contains(event.target as Node)
-    //         );
-
-    //         if (isOutsideClicked) {
-    //             hideProfileMenu();
-    //         }
-    //     }
-    // });
-
-    const hideMenu = () => {
-        setLayoutState((prevLayoutState: LayoutState) => ({
-            ...prevLayoutState,
-            overlayMenuActive: false,
-            staticMenuMobileActive: false,
-            menuHoverActive: false
-        }));
-        unbindMenuOutsideClickListener();
-        unblockBodyScroll();
-    };
-
-    const hideProfileMenu = () => {
-        setLayoutState((prevLayoutState: LayoutState) => ({
-            ...prevLayoutState,
-            profileSidebarVisible: false
-        }));
-        // unbindProfileMenuOutsideClickListener();
-    };
-
-    const blockBodyScroll = (): void => {
-        if (document.body.classList) {
-            document.body.classList.add('blocked-scroll');
-        } else {
-            document.body.className += ' blocked-scroll';
-        }
-    };
-
-    const unblockBodyScroll = (): void => {
-        if (document.body.classList) {
-            document.body.classList.remove('blocked-scroll');
-        } else {
-            document.body.className = document.body.className.replace(new RegExp('(^|\\b)' + 'blocked-scroll'.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
-        }
-    };
-
-    useEffect(() => {
-        if (layoutState.overlayMenuActive || layoutState.staticMenuMobileActive) {
-            bindMenuOutsideClickListener();
-        }
-
-        layoutState.staticMenuMobileActive && blockBodyScroll();
-    }, [layoutState.overlayMenuActive, layoutState.staticMenuMobileActive]);
-
-    // useEffect(() => {
-    //     if (layoutState.profileSidebarVisible) {
-    //         bindProfileMenuOutsideClickListener();
-    //     }
-    // }, [layoutState.profileSidebarVisible]);
-
-    useUnmountEffect(() => {
-        unbindMenuOutsideClickListener();
-        // unbindProfileMenuOutsideClickListener();
-    });
-
-    const containerClass = classNames('layout-wrapper', {
-        'layout-overlay-active': layoutState.overlayMenuActive,
-        'layout-mobile-active': layoutState.staticMenuMobileActive,
-        'p-input-filled': layoutConfig.inputStyle === 'filled',
-    });
-    const { visibleNavbar } = useSelector((state: any) => state.navbarState); // Get the visibility state of sidebar-two
-
-
-    const session = useSession();
-    const user = session?.data?.user;
-
-    const hasRunRef = useRef(false);
-
-    useEffect(() => {
-        if (hasRunRef.current) return;
-        if (!session || !user) return;
-
-        const navEntry = performance.getEntriesByType("navigation")[0] as PerformanceNavigationTiming;
-        const isReload = navEntry?.type === "reload";
-
-        // Detect first mount (after login redirect)
-        const isFirstMount = !sessionStorage.getItem("app-mounted");
-
-        // Allow execution only for:
-        //  1. First mount
-        //  2. Reload
-        if (isFirstMount || isReload) {
-            sessionStorage.setItem("app-mounted", "true");
-        } else {
-            return;
-        }
-
-        hasRunRef.current = true;
-
-        const handleDynamicFunction = async () => {
-            const dynamicHeader = env("SOLIDX_ON_APPLICATION_MOUNT_HANDLER");
-
-            const event: SolidOnApplicationMountEvent = {
-                type: "onApplicationMount",
-                user,
-                session: session.data
-            };
-
-            if (dynamicHeader) {
-                const DynamicFunctionComponent = getExtensionFunction(dynamicHeader);
-                if (DynamicFunctionComponent) {
-                    await DynamicFunctionComponent(event);
-                }
-            }
-        };
-
-        handleDynamicFunction();
-    }, [session, session?.data, user]);
-
-    // const dispatch = useDispatch()
-    // const { data: solidSettingsDataInitialData } = useGetSolidSettingsQuery("")
-    // useEffect(() => {
-    //     if (solidSettingsDataInitialData) {
-    //         dispatch(setSolidSettings(solidSettingsDataInitialData?.data));
-    //     }
-    // }, [solidSettingsDataInitialData]);
-
-    // const toggleBothSidebars = () => {
-    //     if (visibleNavbar) {
-    //         dispatch(toggleNavbar());   // close both
-    //     } else {
-    //         dispatch(showNavbar());     // open both
-    //     }
-    // };
-
-    return (
-        <React.Fragment>
-            <div className={containerClass}>
-                {/* {getEnv("NEXT_PUBLIC_ENABLE_CUSTOM_HEADER_FOOTER") == "true" && <CustomHeader />} */}
-                <AppSidebar />
-                {/* <div className="apps-icon block md:hidden" onClick={toggleBothSidebars}>
-                    <i className="pi pi-th-large"></i>
-                </div> */}
-                <SolidPopupContainer></SolidPopupContainer>
-                <div className={`main-content ${visibleNavbar ? "shifted" : ""}`}>
-                    {children}
-                    {/* {getEnv("NEXT_PUBLIC_ENABLE_CUSTOM_HEADER_FOOTER") == "true" && <CustomFooter />} */}
-                </div>
-                <AppConfig />
-                <div className="layout-mask"></div>
-            </div>
-        </React.Fragment>
-    );
-};

package/src/components/layout/ListingHeader.tsx

@@ -1,205 +0,0 @@
-
-import { Menu } from "primereact/menu";
-import React, { useRef, useState } from "react";
-import { useDispatch, useSelector } from "react-redux";
-// import { RootState } from "../../redux/store";
-import { gridView, listView } from "../../redux/features/dataViewSlice";
-import { usePathname } from "../../hooks/usePathname";
-import { useRouter } from "../../hooks/useRouter";
-import { HeaderDynamicTitles } from "../common/HeaderDynamicTitles";
-import FilterMenu from "./FilterMenu";
-
-const ListingHeader = () => {
-  const dispatch = useDispatch();
-  const router = useRouter();
-  const pathname = usePathname();
-
-
-  const visibleFieldsPopup = useSelector(
-    (state: any) => state.popup.visibleFieldsPopup
-  );
-
-  const menu = useRef<Menu>(null);
-  const items = [
-    {
-      label: "Settings",
-      icon: "pi pi-cog",
-      command: () => {
-      },
-    },
-    {
-      label: "Update",
-      icon: "pi pi-refresh",
-      command: () => {
-      },
-    },
-    {
-      label: "Delete",
-      icon: "pi pi-trash",
-      command: () => {
-      },
-    },
-  ];
-  const [value, setValue] = useState(null);
-  const contextMenuOptions = [
-    {
-      label: (
-        <div id="kanban" onClick={() => dispatch(gridView())}>
-          <img
-            src="/images/icons/icon-kanban.svg"
-            style={{ width: "18px", height: "18px" }}
-          />
-        </div>
-      ),
-      value: "kanban",
-      tooltip: "Kanban",
-    },
-    {
-      label: (
-        <div id="list_view" onClick={() => dispatch(listView())}>
-          <img
-            src="/images/icons/icon-list.svg"
-            style={{ width: "18px", height: "18px" }}
-          />
-        </div>
-      ),
-      value: "list_view",
-      tooltip: "List view",
-    },
-    {
-      label: (
-        <div id="calender">
-          <img
-            src="/images/icons/icon-calender.svg"
-            style={{ width: "18px", height: "18px" }}
-          />
-        </div>
-      ),
-      value: "calender",
-      tooltip: "Calender",
-    },
-    {
-      label: (
-        <div id="activity">
-          <img
-            src="/images/icons/icon-activity.svg"
-            style={{ width: "18px", height: "18px" }}
-          />
-        </div>
-      ),
-      value: "activity",
-      tooltip: "Activity",
-    },
-    {
-      label: (
-        <div id="graph">
-          <img
-            src="/images/icons/icon-graph.svg"
-            style={{ width: "18px", height: "18px" }}
-          />
-        </div>
-      ),
-      value: "graph",
-      tooltip: "Graph",
-    },
-  ];
-
-  const justifyTemplate = (option: any) => {
-    return <i className={option.icon}></i>;
-  };
-
-
-  const save = () => {
-    const pathName = window.location.pathname;
-    const newPath = pathName.split('/').slice(0, -1).join('/') + '/create';
-
-    router.push(newPath);
-
-
-
-    // switch (pathParts[3]) {
-    //   case "model":
-    //     dispatch(showFieldsPopup());
-    //     break;
-    //   case "module":
-    //     dispatch(showModulePopup());
-    //     break;
-    // }
-  };
-
-  const toggleMenu = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    if (menu.current) {
-      menu.current.toggle(e);
-    }
-  };
-
-
-
-  return (
-    <>
-      <div
-        className="flex justify-content-between align-items-center px-5 relative lg:static"
-        style={{ height: "60px", minHeight: 60, backgroundColor: '#f6f6f9' }}
-      >
-        <div className="flex align-items-center">
-          {/* <i className="pi pi-users" style={{backgroundColor:"#1D6CBC"}}></i> */}
-          {/* <img src="/images/icons/icon-users.svg" />
-                <span className="listHead ml-2">Employees</span> */}
-          <div className="">
-            {/* <SplitButton
-              label="Add"
-              icon="pi pi-plus"
-              onClick={save}
-              model={items}
-              severity="info"
-              className="small-splitbutton"
-            /> */}
-            {pathname.includes('all') &&
-              <HeaderDynamicTitles />
-            }
-          </div>
-        </div>
-        {/* <GlobalSearch /> */}
-        <div className="flex align-items-center">
-
-          {/* <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} /> */}
-
-          <div>
-            {/* <Menu model={items} popup ref={menu} /> */}
-            {pathname == "/admin/address-master/states" &&
-              <FilterMenu></FilterMenu>
-
-            }
-            {/* <Button
-              icon="pi pi-cog"
-              className="transparent-background"
-              onClick={toggleMenu}
-              aria-haspopup
-              aria-controls="popup_menu"
-            /> */}
-          </div>
-        </div>
-        <div className="flex align-items-center">
-          {/* <div>
-            {contextMenuOptions.map((option) => (
-              <Tooltip
-                key={option.value}
-                target={`#${option.value}`}
-                content={option.tooltip}
-                className="custom-tooltip"
-              />
-            ))}
-            <SelectButton
-              value={value}
-              onChange={(e) => setValue(e.value)}
-              options={contextMenuOptions}
-              className="custom-select-button"
-            />
-          </div> */}
-        </div>
-      </div>
-      {/* <CreateModule></CreateModule> */}
-    </>
-  );
-};
-export default ListingHeader;

package/src/components/layout/Loader.tsx

@@ -1,16 +0,0 @@
-
-import React from "react";
-
-const Loader = () => {
-  return (
-    <div className="d-flex justify-content-center center-loader">
-      <div className="lds-ellipsis">
-        <div></div>
-        <div></div>
-        <div></div>
-      </div>
-    </div>
-  );
-};
-
-export default Loader;

package/src/components/layout/UserSidebar.tsx

@@ -1,52 +0,0 @@
-
-
-import Link from "../common/Link";
-import { usePathname } from "../../hooks/usePathname";
-import { useState } from "react";
-
-const UserSidebar = () => {
-  const pathname = usePathname();
-
-  const menuItem = [
-    {
-      name: "Update Profile",
-      url: "/me/update",
-      icon: "fas fa-user",
-    },
-    {
-      name: "Upload Avatar",
-      url: "/me/upload_avatar",
-      icon: "fas fa-user-circle",
-    },
-    {
-      name: "Update Password",
-      url: "/me/update_password",
-      icon: "fas fa-lock",
-    },
-  ];
-
-  const [activeMenuItem, setActiveMenuItem] = useState(pathname);
-
-  const handleMenuItemClick = (menuItem: string) => {
-    setActiveMenuItem(menuItem);
-  };
-
-  return (
-    <div className="list-group mt-5 pl-4">
-      {menuItem.map((menuItem, index) => (
-        <Link
-          key={index}
-          href={menuItem.url}
-          className={`fw-bold list-group-item list-group-item-action ${activeMenuItem === menuItem.url ? "active" : ""
-            }`}
-          onClick={() => handleMenuItemClick(menuItem.url)}
-          aria-current={activeMenuItem === menuItem.url ? "true" : "false"}
-        >
-          <i className={`${menuItem.icon} fa-fw pe-2`}></i> {menuItem.name}
-        </Link>
-      ))}
-    </div>
-  );
-};
-
-export default UserSidebar;

package/src/components/layout/context/layoutcontext.tsx

@@ -1,52 +0,0 @@
-
-import React, { useState, createContext } from 'react';
-import { LayoutState, ChildContainerProps, LayoutConfig, LayoutContextProps } from '../../../types';
-export const LayoutContext = createContext({} as LayoutContextProps);
-
-export const LayoutProvider = ({ children }: ChildContainerProps) => {
-    const [layoutConfig, setLayoutConfig] = useState<LayoutConfig>({
-        inputStyle: 'outlined',
-        colorScheme: 'light',
-        theme: 'solid-light-purple',
-        scale: 14,
-        authLayout: 'Center'
-    });
-
-    const [layoutState, setLayoutState] = useState<LayoutState>({
-        overlayMenuActive: false,
-        profileSidebarVisible: false,
-        configSidebarVisible: false,
-        staticMenuMobileActive: false,
-        menuHoverActive: false
-    });
-
-    const onMenuToggle = () => {
-
-        if (isDesktop()) {
-            setLayoutState((prevLayoutState:any) => ({ ...prevLayoutState, staticMenuDesktopInactive: !prevLayoutState.staticMenuDesktopInactive }));
-        } else {
-            setLayoutState((prevLayoutState:any) => ({ ...prevLayoutState, staticMenuMobileActive: !prevLayoutState.staticMenuMobileActive }));
-        }
-    };
-
-    const showProfileSidebar = () => {
-        setLayoutState((prevLayoutState:any) => ({ ...prevLayoutState, profileSidebarVisible: !prevLayoutState.profileSidebarVisible }));
-    };
-
- 
-
-    const isDesktop = () => {
-        return window.innerWidth > 991;
-    };
-
-    const value: LayoutContextProps = {
-        layoutConfig,
-        setLayoutConfig,
-        layoutState,
-        setLayoutState,
-        onMenuToggle,
-        showProfileSidebar
-    };
-
-    return <LayoutContext.Provider value={value}>{children}</LayoutContext.Provider>;
-};