@compill/admin 1.0.102 → 1.0.103

package/dist/lib/layout/menu/MenuButton.jsx

@@ -1,7 +0,0 @@
-import { Button, Icon } from "@valerya/ui";
-export function MenuButton({ depth, darkMode, icon, selected, children, ...props }) {
-    return (<Button as="li" minH="8" ms={`${(depth ?? 0) * 2}`} p="2" font="title" textColor={darkMode ? "white" : "black"} fontWeight="600" rounded="lg" textSize="sm" variant="borderless" hover_bgColor={darkMode ? "white" : "black"} hover_bgOpacity="10" hover_textColor={darkMode ? "white" : "zinc-800"} cursor="pointer" dflex alignItems="center" gap="3" {...props}>
-            {icon && <Icon path={icon} opacity={selected ? "100" : "60"}/>}
-            {children}
-        </Button>);
-}

package/dist/lib/layout/menu/MenuItem.jsx

@@ -1,20 +0,0 @@
-import { SelectedIndicator } from "./SelectedIndicator";
-import { Link, useLocation, useMatch } from "react-router-dom";
-import { MenuButton } from "./MenuButton";
-export function MenuItem({ icon, path, depth, darkMode, subMenu, ...props }) {
-    const location = useLocation();
-    const selected = path == "/" ? location.pathname == "/" : location.pathname.startsWith(path.startsWith("/") ? path : `/${path}`);
-    const match = useMatch("/" + path) != null;
-    // const selected = match != null
-    return (<>
-            <Link to={path} style={{ position: "relative" }}>
-                <MenuButton depth={depth} darkMode={darkMode} icon={icon} selected={selected} {...props}/>
-
-                {match && <SelectedIndicator darkMode={darkMode}/>}
-            </Link>
-
-            {subMenu?.map((item, index) => (<MenuItem key={index} icon={item.icon} path={item.path} depth={(depth ?? 0) + 1} darkMode={darkMode} subMenu={item.children}>
-                        {item.label}
-                    </MenuItem>))}
-        </>);
-}

package/dist/lib/layout/menu/NextMenuItem.jsx

@@ -1,20 +0,0 @@
-import { MenuButton } from "./MenuButton";
-import { SelectedIndicator } from "./SelectedIndicator";
-import Link from "next/link";
-import { useRouter } from "next/router";
-export function NextMenuItem({ icon, path, depth, darkMode, subMenu, ...props }) {
-    const { pathname } = useRouter();
-    const selected = path == "/" ? pathname == "/" : pathname.startsWith(path.startsWith("/") ? path : `/${path}`);
-    const match = path == "/" ? pathname == "/" : pathname == (path.startsWith("/") ? path : `/${path}`);
-    return (<>
-            <Link href={path} style={{ position: "relative" }}>
-                <MenuButton depth={depth} darkMode={darkMode} icon={icon} selected={selected} {...props}/>
-
-                {match && <SelectedIndicator darkMode={darkMode}/>}
-            </Link>
-
-            {subMenu?.map((item, index) => (<NextMenuItem key={index} icon={item.icon} path={item.path} depth={(depth ?? 0) + 1} darkMode={darkMode} subMenu={item.children}>
-                        {item.label}
-                    </NextMenuItem>))}
-        </>);
-}

package/dist/lib/layout/menu/SelectedIndicator.jsx

@@ -1,3 +0,0 @@
-export function SelectedIndicator({ darkMode }) {
-    return (<div position="absolute" bgColor={darkMode ? "white" : "black"} bgOpacity="90" w="0.5" h="6" top="1.5" start="-4"/>);
-}

package/dist/lib/layout/menu/UserBlock.jsx

@@ -1,55 +0,0 @@
-import { useSessionLogout, useSessionUser } from "@compill/auth";
-import { mdiCog, mdiDotsVertical, mdiLogout } from "@mdi/js";
-import { Avatar, Button, Icon, IconButton, Popup } from "@valerya/ui";
-import { capitalize } from "es-toolkit";
-import React from "react";
-import { useNavigate } from "react-router-dom";
-export function UserBlock({ color, darkMode, menuConfig, path }) {
-    const { isLoading, user } = useSessionUser();
-    const navigate = useNavigate();
-    const handleClick = React.useCallback(() => navigate(path), [navigate, path]);
-    if (isLoading)
-        return null;
-    return (<div dflex alignItems="center" border="0.5" borderColor={`${color}-${darkMode ? "800" : "200"}`} ps="3" py="1.5" textSize="md" rounded="lg" hover_bgColor={`${color}-${darkMode ? "800" : "200"}`} cursor="pointer" textColor={darkMode ? "white" : "slate-800"} onClick={handleClick}>
-            <Avatar size="sm" src={user?.media?.url ?? ""} name={`${user?.firstname} ${user?.lastname}`}/>
-
-            <span flexGrow ms="2">{`${capitalize(user?.firstname || user?.lastname || "")}`}</span>
-
-            <IconButton variant="borderless" corners="pill" scheme="dark" textColor={darkMode ? "white" : "slate-800"} hover_textColor={darkMode ? "white" : "slate-800"} hover_bgColor={`${color}-${darkMode ? "900" : "200"}`} icon={mdiCog} onClick={handleClick}/>
-
-            <OverflowMenu color={color} darkMode={darkMode} menuConfig={menuConfig}/>
-        </div>);
-}
-function OverflowMenu({ color, darkMode, menuConfig }) {
-    const [showPopup, setShowPopup] = React.useState(false);
-    const navigate = useNavigate();
-    const logout = useSessionLogout(false);
-    return (<>
-            <Popup show={showPopup} position="relative" side="bottom-end" onClick={(e) => { e.preventDefault(); e.stopPropagation(); setShowPopup((show) => !show); }} onHide={() => setShowPopup(false)}>
-                <IconButton icon={mdiDotsVertical} variant="borderless" corners="pill" scheme="dark" textColor={darkMode ? "white" : "slate-800"} hover_textColor={darkMode ? "white" : "slate-800"} hover_bgColor={`${color}-${darkMode ? "900" : "200"}`}/>
-
-                <div bgColor="white" rounded="sm" overflow="hidden" shadow mt="1" border="px" borderColor="gray-200" divideColor="gray-200" divideY="px" minW="40">
-                    {menuConfig && menuConfig.length > 0 && menuConfig.map((item, index) => {
-            if (item.type == "item") {
-                return (<MenuItem key={index} icon={item.icon} onClick={() => navigate(item.path)}>
-                                        {item.label}
-                                    </MenuItem>);
-            }
-            return null;
-        })}
-                    <MenuItem icon={mdiLogout} onClick={logout}>Logout</MenuItem>
-                </div>
-            </Popup>
-        </>);
-}
-function MenuItem({ icon, onClick, children, ...props }) {
-    const handleClick = React.useCallback((e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        onClick?.(e);
-    }, []);
-    return (<Button variant="borderless" scheme="dark" size="sm" alignItems="center" dflex gap="2" px="2" py="1.5" w="full" onClick={handleClick} textColor="slate-700" {...props}>
-            {icon && <Icon path={icon} size="md"/>}
-            {children}
-        </Button>);
-}

package/dist/lib/modal/FormActionDialog.jsx

@@ -1,46 +0,0 @@
-import { useMutate } from "@compill/api";
-import { ModalLoadingOverlay } from "@compill/components";
-import { SubmitButton, FormRenderer, FormProvider } from "@compill/form";
-import { useApiMutation, useInvalidateParentMutation } from "@compill/api";
-import { Button, Modal } from "@valerya/ui";
-import React from "react";
-export function FormActionDialog({ initialValues, itemLabel, queryId = "", queryKey, queryFn, queryOptions, onSuccess, successMsg, showSuccessMsg, onError, errorMsg, showErrorMsg, processInput, invalidateQueriesOnSuccess = true, cancelLabel = "Cancel", saveLabel = "Send", size = "lg", title, form, show, onClose, formikProps, ...props }) {
-    const mutation = invalidateQueriesOnSuccess ? useInvalidateParentMutation(queryFn, queryKey, queryOptions) : useApiMutation(queryFn, queryKey, queryId, queryOptions);
-    const mutate = useMutate(mutation, {
-        onSuccess,
-        successMsg,
-        showSuccessMsg,
-        onError,
-        errorMsg,
-        showErrorMsg,
-        processInput,
-    });
-    return (<Modal size={size} show={show} onClose={onClose} scheme="light" transition 
-    // closeOnMaskClick={false}
-    {...props}>
-            <Modal.Header>
-                {title}
-            </Modal.Header>
-
-            {/* @ts-ignore */}
-            <FormProvider initialValues={initialValues ?? {}} onSubmit={mutate} {...formikProps}>
-                <Modal.Body pb="6">
-                    {React.isValidElement(form) && form}
-
-                    {Array.isArray(form) && <FormRenderer form={form}/>}
-                </Modal.Body>
-
-                <Modal.Footer dflex placeContent="end" spaceX="3">
-                    <Button disabled={mutation.isLoading} onClick={onClose} variant="borderless" me="2">
-                        {cancelLabel}
-                    </Button>
-
-                    <SubmitButton disabled={mutation.isLoading}>
-                        {saveLabel}
-                    </SubmitButton>
-                </Modal.Footer>
-            </FormProvider>
-
-            {mutation.isLoading && <ModalLoadingOverlay />}
-        </Modal>);
-}

package/dist/lib/page/PageContainer.jsx

@@ -1,4 +0,0 @@
-import { Container } from "@valerya/ui";
-export function PageContainer({ children, ...props }) {
-    return <Container center dflex flexCol gap="8" {...props}>{children}</Container>;
-}

package/dist/lib/page/PageContentEditor.jsx

@@ -1,11 +0,0 @@
-import { FormEditor } from "@compill/form-editor";
-import { PageMain } from "./PageMain";
-import { ImageExtension } from "@compill/editor";
-export function PageContentEditor({ name, ...props }) {
-    const extensions = [ImageExtension];
-    return (<PageMain h="min" {...props}>
-            <FormEditor minH="128" minW="144" maxW={props.maxW} 
-    // w={props.w}
-    name={name} placeHolder="Write here..." extensions={extensions}/>
-        </PageMain>);
-}

package/dist/lib/page/PageMain.jsx

@@ -1,4 +0,0 @@
-import { Tile } from "@valerya/ui";
-export function PageMain({ children, ...props }) {
-    return <Tile scheme="light" p="5" {...props}>{children}</Tile>;
-}

package/dist/lib/page/PageSectionTitle.jsx

@@ -1,3 +0,0 @@
-export function PageSectionTitle({ children, ...props }) {
-    return <div trait="typo.h6" mb="5" {...props}>{children}</div>;
-}

package/dist/lib/page/PageSidebar.jsx

@@ -1,3 +0,0 @@
-export function PageSidebar({ children, ...props }) {
-    return <div w="112" minW="112" minH="100%" gap="8" dflex flexCol {...props}>{children}</div>;
-}

package/dist/lib/page/PageSidebarSection.jsx

@@ -1,7 +0,0 @@
-import { PageSectionTitle } from "./PageSectionTitle";
-export function PageSidebarSection({ title, children, ...props }) {
-    return (<div w="full" {...props}>
-            {title && <PageSectionTitle>{title}</PageSectionTitle>}
-            {children}
-        </div>);
-}

package/dist/lib/page/PageStateContainer.jsx

@@ -1,9 +0,0 @@
-import { QueryLoadingState } from "@compill/components";
-import { Container } from "@valerya/ui";
-import React from "react";
-export const PageStateContainer = React.forwardRef(({ loading = false, children, ...props }, ref) => {
-    return (<>
-            {loading && <QueryLoadingState w="full" h="100%"/>}
-            {!loading && <Container ref={ref} center size="x2" dflex flexCol gap="8" {...props}>{children}</Container>}
-        </>);
-});

package/dist/lib/page/PageSubSectionTitle.jsx

@@ -1,3 +0,0 @@
-export function PageSubSectionTitle({ children, ...props }) {
-    return <div trait="typo.h6" mb="3" {...props}>{children}</div>;
-}

package/dist/lib/page/PageTitle.jsx

@@ -1,3 +0,0 @@
-export function PageTitle({ children, ...props }) {
-    return <div trait="typo.h5" {...props}>{children}</div>;
-}

package/dist/lib/table/TableContainer.jsx

@@ -1,11 +0,0 @@
-import { TableContextProvider } from "@compill/table";
-import { TableContainerContextProvider } from "./TableContainerContext";
-export function TableContainer({ initialPageSize, initialVisibleColumns, columns, filtersMethod = "reactRouter", children, ...props }) {
-    return (<div w="full" dflex flexCol {...props}>
-            <TableContextProvider initialPageSize={initialPageSize} filtersMethod={filtersMethod}>
-                <TableContainerContextProvider columns={columns} initialVisibleColumns={initialVisibleColumns}>
-                    {children}
-                </TableContainerContextProvider>
-            </TableContextProvider>
-        </div>);
-}

package/dist/lib/table/TableFilterButton.jsx

@@ -1,16 +0,0 @@
-import { Icon } from "@valerya/ui";
-import { Button, Popover } from "@valerya/ui";
-import { mdiFilter } from "@mdi/js";
-export function TableFilterButton({ ...props }) {
-    // return <Button scheme="secondary" {...props}><Icon path={mdiFilter} /></Button>
-    return (<Popover side="bottom-end" modal>
-            <Button scheme="dark" size="sm" aspectRatio="square" variant="borderless" corners="square" {...props}>
-                <Icon path={mdiFilter}/>
-            </Button>
-            <div bgColor="white" rounded shadow>
-                <div py="3" hover_bgColor="#ff0000" px="5" hover_textColor="white">First Item</div>
-                <div py="3" hover_bgColor="#ff0000" px="5" hover_textColor="white">Second Item</div>
-                <div py="3" hover_bgColor="#ff0000" px="5" hover_textColor="white">Third Item</div>
-            </div>
-        </Popover>);
-}

package/dist/lib/table/TableMassActions.jsx

@@ -1,15 +0,0 @@
-import { useTableContext } from "@compill/table";
-import { Collapse } from "@valerya/ui";
-import { ActionButton } from "../json/buttons/ActionButton";
-export function TableMassActions({ actions }) {
-    const { ids } = useTableContext();
-    const showMassActions = ids && ids.length > 0;
-    return (<Collapse in={showMassActions} style={{ overflow: showMassActions ? "initial" : "hidden" }}>
-            <div dflex gap="3" flexWrap alignItems="center" px="8" pt="5">
-                {actions.map((action, index) => (<div key={index}>
-                            {/* {action.type == "custom" && action.render(rows)} */}
-                            {action.type == "button" && !action.showConfirmationDialog && (<ActionButton label={action.label} queryFn={action.queryFn} queryKey={action.queryKey} buttonProps={action.buttonProps}/>)}
-                        </div>))}
-            </div>
-        </Collapse>);
-}

package/dist/lib/table/TableRowActionBar.jsx

@@ -1,14 +0,0 @@
-import { TableRowViewButton } from "./TableRowViewButton";
-import { TableRowNavigateButton } from "./TableRowNavigateButton";
-import { TableRowEditButton } from "./TableRowEditButton";
-import { TableRowDeleteButton } from "./TableRowDeleteButton";
-export function TableRowActionBar({ publishId, viewPath, navigatePath, editDialog, deleteDialog, children, ...props }) {
-    return (<div dflex spaceX="1" placeContent="end" {...props}>
-            {viewPath && <TableRowViewButton path={viewPath}/>}
-            {navigatePath && <TableRowNavigateButton path={navigatePath}/>}
-            {editDialog && <TableRowEditButton buildDialog={editDialog}/>}
-            {deleteDialog && <TableRowDeleteButton buildDialog={deleteDialog}/>}
-
-            {children}
-        </div>);
-}

package/dist/lib/table/TableRowActionButton.jsx

@@ -1,7 +0,0 @@
-import { Button, Icon } from "@valerya/ui";
-export function TableRowActionButton({ icon, children, ...props }) {
-    return (<Button dflex alignContent="center" placeContent="center" py="2.5" px="3" h="full" size="lg" variant="borderless" corners="square" gap="2" {...props}>
-            {icon && <Icon path={icon} size="sm"/>}
-            {children}
-        </Button>);
-}

package/dist/lib/table/TableRowActionDialogButton.jsx

@@ -1,8 +0,0 @@
-import { Icon } from "@valerya/ui";
-import { DialogButton } from "../buttons/DialogButton";
-export function TableRowActionDialogButton({ icon, children, ...props }) {
-    return (<DialogButton dflex alignContent="center" placeContent="center" py="2.5" px="3" h="full" size="lg" variant="borderless" corners="square" gap="2" {...props}>
-            {icon && <Icon path={icon} size="sm"/>}
-            {children}
-        </DialogButton>);
-}

package/dist/lib/table/TableTopBar.jsx

@@ -1,17 +0,0 @@
-import { Breadcrumbs } from "../breadcrumbs/BreadCrumbs";
-export function TableTopBar({ title, breadcrumbs, children, ...props }) {
-    return (<div dflex flexRow alignItems="center" gap="3" p="8" 
-    // borderB="0.5"
-    // borderBColor="--bg-2"
-    {...props}>
-            <div>
-
-            {title && <h2 textSize="x2" fontWeight="600" textColor="#3f4254" textTransform="capitalize">{title}</h2>}
-                {breadcrumbs && <Breadcrumbs breadcrumbs={breadcrumbs}/>}
-            </div>
-
-            <div flexGrow>&nbsp;</div>
-
-            {children}
-        </div>);
-}