@compill/admin 1.0.100 → 1.0.102

package/dist/lib/json/types/TableView.js

@@ -0,0 +1 @@
+export {};

package/{src → dist}/lib/layout/AdminLayout.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Color, ParentComponent, SoperioComponent } from "@soperio/react";
 import { MenuConfig } from "./menu/MenuConfig";
 interface LayoutProps extends SoperioComponent, ParentComponent {

package/dist/lib/layout/AdminLayout.jsx

@@ -0,0 +1,24 @@
+import { useBoolean } from "@compill/hooks";
+import { mdiArrowLeft } from "@mdi/js";
+import { IconButton } from "@valerya/ui";
+import { useHotkeys } from "react-hotkeys-hook";
+import Content from "./Content";
+import { Sidebar } from "./Sidebar";
+export function AdminLayout({ color, darkMode, logo, title, menuConfig, userMenuConfig, userSettingsPath, ...props }) {
+    return (<div w="full" h="screen" dflex flexRow bgColor={`${color}-${darkMode ? "900" : "100"}`} {...props}>
+            <LeftPanel color={color} darkMode={darkMode} logo={logo} title={title} menuConfig={menuConfig} userMenuConfig={userMenuConfig} userSettingsPath={userSettingsPath}/>
+
+            <div w="screen" py="2" pe="2">
+                <Content bgColor="white" rounded="lg" shadow/>
+            </div>
+        </div>);
+}
+function LeftPanel({ color, darkMode, logo, title, menuConfig, userMenuConfig, userSettingsPath }) {
+    const [isOpen, __, toggle] = useBoolean(true);
+    useHotkeys('ctrl+t', () => toggle(), [toggle]);
+    return (<div ms={isOpen ? "0" : "-14.5rem"} transition="all" duration="500" transform>
+            <Sidebar flexShrink="0" color={color} darkMode={darkMode} logo={logo} title={title} menuConfig={menuConfig} userMenuConfig={userMenuConfig} userSettingsPath={userSettingsPath}/>
+
+            <IconButton icon={mdiArrowLeft} transition="all" duration="500" transform rotate={isOpen ? "0" : "180"} position="absolute" bottom="14" end="-5" size="lg" corners="pill" onClick={toggle} z="100"/>
+        </div>);
+}

package/{src → dist}/lib/layout/ButtonBar.d.ts

@@ -7,7 +7,7 @@ export type ButtonBarButtonProps = {
     icon?: string;
 } & ButtonProps;
 export declare const ButtonBarButton: React.ForwardRefExoticComponent<{
-    icon?: string | undefined;
+    icon?: string;
 } & ButtonProps & React.RefAttributes<HTMLDivElement>>;
 export interface ButtonBarSubmitButtonProps extends ButtonBarButtonProps {
     useDirty?: boolean;

package/dist/lib/layout/ButtonBar.jsx

@@ -0,0 +1,29 @@
+import { DialogButton } from "../buttons/DialogButton";
+import { Button, Icon } from "@valerya/ui";
+import { useFormikContext } from "formik";
+import React from "react";
+export function ButtonBar({ children, ...props }) {
+    return (<div dflex border="1px" borderColor="zinc-200" divideX="1px" divideColor="zinc-200" rounded="lg" overflow="hidden" {...props}>
+            {children}
+        </div>);
+}
+export const ButtonBarButton = React.forwardRef(function ({ icon, children, ...props }, ref) {
+    return (<Button scheme="dark" size="sm" aspectRatio={icon && !children ? "square" : undefined} variant="borderless" dflex alignItems="center" placeContent="center" corners="square" gap="2" {...props} ref={ref}>
+                {icon && <Icon path={icon}/>}
+                {children}
+            </Button>);
+});
+export const ButtonBarSubmitButton = React.forwardRef(function ({ useDirty, disabled, icon, children, ...props }, ref) {
+    const { dirty, handleSubmit } = useFormikContext() ?? { dirty: false, handleSubmit: undefined, values: {} };
+    const onSubmit = React.useCallback(() => handleSubmit(), [handleSubmit]);
+    return (<Button scheme="dark" size="sm" aspectRatio={icon && !children ? "square" : undefined} variant="borderless" dflex alignItems="center" placeContent="center" corners="square" gap="2" disabled={(useDirty && !dirty) || disabled} onClick={onSubmit} {...props} ref={ref}>
+                {icon && <Icon path={icon}/>}
+                {children}
+            </Button>);
+});
+export function ButtonBarDialogButton({ icon, children, ...props }) {
+    return (<DialogButton scheme="dark" size="sm" aspectRatio={icon && !children ? "square" : undefined} variant="borderless" dflex alignItems="center" placeContent="center" corners="square" gap="2" {...props}>
+            {icon && <Icon path={icon}/>}
+            {children}
+        </DialogButton>);
+}

package/{src → dist}/lib/layout/Content.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SoperioComponent, ParentComponent } from "@soperio/react";
 interface ContentProps extends SoperioComponent, ParentComponent {
 }

package/dist/lib/layout/Content.jsx

@@ -0,0 +1,10 @@
+import { Outlet } from "react-router-dom";
+/**
+ *
+ *
+ */
+export default function Content({ ...props }) {
+    return (<div w="100%" h="100%" overflowY="auto" {...props}>
+            <Outlet />
+        </div>);
+}

package/{src → dist}/lib/layout/PageTitleBar.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ParentComponent, SoperioComponent } from "@soperio/react";
 interface TableTopBarProps extends SoperioComponent, ParentComponent {
     title?: string;

package/dist/lib/layout/PageTitleBar.jsx

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

package/{src → dist}/lib/layout/Sidebar.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Color, ParentComponent, SoperioComponent } from "@soperio/react";
 import { MenuConfig } from "./menu/MenuConfig";
 interface SidebarProps extends SoperioComponent, ParentComponent {

package/dist/lib/layout/Sidebar.jsx

@@ -0,0 +1,24 @@
+import { FlexCenter } from "@compill/components";
+import { Menu } from "./menu/Menu";
+import { AppEnv } from "@compill/env";
+import Image from "next/image";
+import { UserBlock } from "./menu/UserBlock";
+export function Sidebar({ show, logo, title, menuConfig, userMenuConfig, userSettingsPath, color, darkMode, ...props }) {
+    return (<div dflex flexCol w="full" md_w="64" minH="screen" p="0" textColor={darkMode ? "white" : "slate-800"} {...props}>
+            <FlexCenter placeContent="start" p="4" font="title" gap="3" borderB="px" borderBColor="slate-900" borderOpacity="5">
+                {logo ?? <Logo width={40} height={40} darkMode={darkMode}/>}
+                <h1 textSize="md">{title || AppEnv.appName()}</h1>
+            </FlexCenter>
+
+            <Menu overflowY="auto" flexGrow="1" p="4" darkMode={darkMode} config={menuConfig}/>
+
+            <div p="2">
+                <UserBlock darkMode={darkMode} color={color} menuConfig={userMenuConfig} path={userSettingsPath}/>
+            </div>
+        </div>);
+}
+export default function Logo({ width, height, darkMode, ...props }) {
+    return (<div {...props}>
+            <Image src={`/logo_${darkMode ? "light" : "dark"}.png`} alt={AppEnv.appName() || ""} width={width} height={height} priority unoptimized/>
+        </div>);
+}

package/{src → dist}/lib/layout/menu/Menu.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ParentComponent, SoperioComponent } from "@soperio/react";
 import { MenuConfig } from "./MenuConfig";
 export interface MenuProps extends SoperioComponent, ParentComponent {

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

@@ -0,0 +1,30 @@
+import { MenuItem } from "./MenuItem";
+import { NextMenuItem } from "./NextMenuItem";
+/**
+ *
+ *
+ */
+export function Menu({ darkMode, config, useNextRouter, ...props }) {
+    const Comp = useNextRouter ? NextMenuItem : MenuItem;
+    return (<ul {...props}>
+            {config.map((item, index) => {
+            if (item.type == "divider")
+                return <Divider key={index} title={item.label}/>;
+            if (item.type == "item") {
+                return (<Comp key={index} icon={item.icon} path={item.path} depth={0} darkMode={darkMode} subMenu={item.children}>
+                                {item.label}
+                            </Comp>);
+            }
+        })}
+        </ul>);
+}
+function Divider({ title }) {
+    return (<div px="2" mt="5" mb="2" opacity="75" textTransform="capitalize" letterSpacing="widest" fontWeight="700" textSize="xs">
+            {title}
+        </div>);
+}
+function CategoryItem({ children, ...props }) {
+    return (<li ps="5" py="2" mt="5" textSize="sm" textColor="white" textOpacity="80" fontWeight="600" textTransform="uppercase">
+            {children}
+        </li>);
+}

package/{src → dist}/lib/layout/menu/MenuButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ButtonProps } from "@valerya/ui";
 export declare function MenuButton({ depth, darkMode, icon, selected, children, ...props }: {
     depth?: number;

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

@@ -0,0 +1,7 @@
+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/MenuConfig.js

@@ -0,0 +1 @@
+export {};

package/{src → dist}/lib/layout/menu/MenuItem.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ParentComponent, SoperioComponent } from "@soperio/react";
 import { Item } from "./MenuConfig";
 interface MenuItemProps extends SoperioComponent, ParentComponent {

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

@@ -0,0 +1,20 @@
+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/{src → dist}/lib/layout/menu/NextMenuItem.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ParentComponent, SoperioComponent } from "@soperio/react";
 import { Item } from "./MenuConfig";
 interface NextMenuItemProps extends SoperioComponent, ParentComponent {

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

@@ -0,0 +1,20 @@
+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/{src → dist}/lib/layout/menu/SelectedIndicator.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare function SelectedIndicator({ darkMode }: {
     darkMode?: boolean;
 }): JSX.Element;

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

@@ -0,0 +1,3 @@
+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/{src → dist}/lib/layout/menu/UserBlock.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import { MenuConfig } from "@compill/admin";
+import { MenuConfig } from "./MenuConfig";
 interface UserBlockProps {
     color: string;
     darkMode?: boolean;

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

@@ -0,0 +1,55 @@
+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/{src → dist}/lib/modal/AttachDialog.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { QueryFunctionContext } from "@tanstack/react-query";
 import { ModalProps } from "@valerya/ui";
 import { FormikConfig } from "formik";

package/dist/lib/modal/AttachDialog.jsx

@@ -0,0 +1,109 @@
+import { useApiMutation, useApiQuery } from "@compill/api";
+import { ModalLoadingOverlay, QueryLoadingState, RetryOnError } from "@compill/components";
+import { useQueryClient } from "@tanstack/react-query";
+import { Button, Checkbox, Modal } from "@valerya/ui";
+import { sortBy } from "es-toolkit";
+import React from "react";
+import { toast } from "react-toastify";
+const defaultErrorMsg = "Oops, something went wrong...";
+export function AttachDialog({ queryId, queryKey, queryFetchFn, queryFetchAllKey, queryFetchAllFn, querySaveFn, matchKey, size = "lg", show, onClose, itemLabel, onSuccess, onFetchError, fetchErrorMsg = defaultErrorMsg, onSaveError, saveErrorMsg = defaultErrorMsg, invalidateQueriesOnSuccess = true, retryText = "Retry", cancelLabel = "Cancel", saveLabel, formikProps, getItemName, ...props }) {
+    const queryClient = useQueryClient();
+    const { data: attached, isInitialLoading: fetchLoading, isError: fetchError, refetch, error } = useApiQuery(queryKey, queryFetchFn);
+    const { data, isInitialLoading: fetchAllLoading, isError: fetchAllError, refetch: refetchAll, error: errorAll } = useApiQuery(queryFetchAllKey, queryFetchAllFn);
+    const [selectedResources, setSelectedResources] = React.useState([]);
+    const isLoading = fetchLoading || fetchAllLoading;
+    const isError = fetchError || fetchAllError;
+    const mutation = useApiMutation(querySaveFn, queryKey, queryId);
+    const handleClick = React.useCallback((event) => {
+        const id = event?.currentTarget.dataset.id ?? "";
+        const arr = selectedResources.concat([]);
+        const i = selectedResources.indexOf(id);
+        if (i != -1)
+            arr.splice(i, 1);
+        else
+            arr.push(id);
+        setSelectedResources(arr);
+    }, [selectedResources, setSelectedResources]);
+    const retry = React.useCallback(() => {
+        if (fetchError)
+            refetch();
+        if (fetchAllError)
+            refetchAll();
+    }, [refetch, refetchAll, fetchError, fetchAllError]);
+    const saveItem = React.useCallback(() => {
+        // Clear mutation error if any
+        mutation.reset();
+        mutation.mutateAsync({ resources: selectedResources })
+            .then((response) => {
+            if (onSuccess)
+                onSuccess(response);
+            else
+                toast.success(`${itemLabel} saved`);
+            if (invalidateQueriesOnSuccess)
+                queryClient.invalidateQueries({ queryKey: queryKey });
+            // closing delete modal
+            onClose?.();
+        })
+            .catch(error => {
+            console.error("on error", error);
+            if (onSaveError)
+                onSaveError();
+            else
+                toast.error(`Error adding ${itemLabel}`);
+        });
+    }, [mutation, queryId, onSuccess, queryClient, onSaveError, onClose]);
+    const resources = React.useMemo(() => {
+        let r = [];
+        if (attached && data) {
+            r = [].concat(data);
+            attached.forEach((attachedItem) => r.splice(r.findIndex((item) => item.id == attachedItem[matchKey]), 1));
+            // TODO set keyField for name (could be title for example)
+            if (getItemName)
+                r = r.map((item) => { return { ...item, name: getItemName(item) }; });
+            r = sortBy(r, ["name"]);
+        }
+        return r;
+    }, [attached, data]);
+    return (<Modal size={size} show={show} onClose={onClose} scheme="light" transition 
+    // closeOnMaskClick={false}
+    {...props}>
+            <Modal.Header>
+                {`Add ${itemLabel}`}
+            </Modal.Header>
+
+            {isLoading && (<Modal.Body>
+                    <QueryLoadingState minW="72"/>
+                </Modal.Body>)}
+
+            {isError && (<Modal.Body>
+                    <RetryOnError label={`${fetchErrorMsg} ${error}`} onClick={retry}/>
+                </Modal.Body>)}
+
+            {!isLoading && !isError &&
+            (<>
+                        <Modal.Body px="0" pb="6" maxH="750px" overflow="auto">
+                            <div dflex flexCol overflow="auto">
+
+                                {resources.map(item => (<ListItem key={item.id} label={item.name} value={item.id} data-id={item.id} checked={selectedResources.includes(`${item.id}`)} onClick={handleClick}/>))}
+                            </div>
+                        </Modal.Body>
+
+                        <Modal.Footer dflex placeContent="end" spaceX="3">
+                            <Button disabled={mutation.isLoading} onClick={onClose} variant="borderless" me="2">
+                                {cancelLabel}
+                            </Button>
+                            <Button type="submit" disabled={selectedResources.length == 0 || mutation.isLoading /* || !isValid*/} onClick={saveItem}>
+                                {saveLabel ? saveLabel : (queryId ? "Update" : "Create")}
+                            </Button>
+                        </Modal.Footer>
+                    </>)}
+
+            {mutation.isLoading && <ModalLoadingOverlay />}
+        </Modal>);
+}
+function ListItem({ label, value, checked, ...props }) {
+    return (<div dflex alignItems="center" hover_bgColor="slate-100" px="5" py="2" cursor="pointer" {...props}>
+            <span flexGrow>{label}</span>
+            <Checkbox name={`resources.${value}`} value={value} checked={checked}/>
+        </div>);
+}

package/dist/lib/modal/FormActionDialog.jsx

@@ -0,0 +1,46 @@
+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/{src → dist}/lib/page/PageContainer.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { ContainerProps } from "@valerya/ui";
 export declare function PageContainer({ children, ...props }: ContainerProps): JSX.Element;

package/dist/lib/page/PageContainer.jsx

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

package/{src → dist}/lib/page/PageContentEditor.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SoperioComponent } from "@soperio/react";
 export declare function PageContentEditor({ name, ...props }: {
     name: string;

package/dist/lib/page/PageContentEditor.jsx

@@ -0,0 +1,11 @@
+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/{src → dist}/lib/page/PageMain.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { ParentComponent, SoperioComponent } from "@soperio/react";
 export declare function PageMain({ children, ...props }: SoperioComponent & ParentComponent): JSX.Element;

package/dist/lib/page/PageMain.jsx

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

package/dist/lib/page/PageQueryStateContainer.jsx

@@ -0,0 +1,15 @@
+import { QueryLoadingState, RetryOnError } from "@compill/components";
+import { useApiQuery, useInvalidateQuery } from "@compill/api";
+import React from "react";
+import { PageContainer } from "./PageContainer";
+function PageQueryStateContainerInner({ queryId, api, apiFn, loadingStyles, errorStyles, children, ...props }) {
+    // @ts-ignore
+    const { data, isLoading, isError } = apiFn == "getAll" ? useApiQuery(api.queryKey, api.getAll, props.apiParams) : useApiQuery(api.queryKey, api.get, queryId);
+    const invalidate = useInvalidateQuery(api.queryKey, queryId);
+    if (isLoading)
+        return <QueryLoadingState w="full" h="100%" {...loadingStyles}/>;
+    if (isError)
+        return <RetryOnError p="0" onClick={invalidate} {...errorStyles}/>;
+    return <PageContainer {...props}>{apiFn == "get" ? children(data) : children(data)}</PageContainer>;
+}
+export const PageQueryStateContainer = React.forwardRef(PageQueryStateContainerInner);

package/{src → dist}/lib/page/PageSectionTitle.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { ParentComponent, SoperioComponent } from "@soperio/react";
 export declare function PageSectionTitle({ children, ...props }: SoperioComponent & ParentComponent): JSX.Element;

package/dist/lib/page/PageSectionTitle.jsx

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

package/{src → dist}/lib/page/PageSidebar.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { ParentComponent, SoperioComponent } from "@soperio/react";
 export declare function PageSidebar({ children, ...props }: SoperioComponent & ParentComponent): JSX.Element;

package/dist/lib/page/PageSidebar.jsx

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

package/{src → dist}/lib/page/PageSidebarSection.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ParentComponent, SoperioComponent } from "@soperio/react";
 export declare function PageSidebarSection({ title, children, ...props }: {
     title?: string;

package/dist/lib/page/PageSidebarSection.jsx

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

@@ -0,0 +1,9 @@
+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/{src → dist}/lib/page/PageSubSectionTitle.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { ParentComponent, SoperioComponent } from "@soperio/react";
 export declare function PageSubSectionTitle({ children, ...props }: SoperioComponent & ParentComponent): JSX.Element;

package/dist/lib/page/PageSubSectionTitle.jsx

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

package/{src → dist}/lib/page/PageTitle.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { ParentComponent, SoperioComponent } from "@soperio/react";
 export declare function PageTitle({ children, ...props }: SoperioComponent & ParentComponent): JSX.Element;

package/dist/lib/page/PageTitle.jsx

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