@compill/admin 1.0.102 → 1.0.103

package/dist/lib/SectionTitle.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
+export function SectionTitle({ children, ...props }) {
+    return _jsx("h2", { textSize: "xl", fontWeight: "600", textColor: "slate-800", ...props, children: children });
+}

package/dist/lib/breadcrumbs/BreadCrumbs.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@soperio/jsx-runtime";
+import { useApiQuery } from "@compill/api";
+import { Shimmer } from "@compill/components";
+import { mdiCircleSmall } from "@mdi/js";
+import { Icon } from "@valerya/ui";
+import { isArray } from "es-toolkit/compat";
+import Link from "next/link";
+import { useParams } from "react-router-dom";
+export function Breadcrumbs({ breadcrumbs, ...props }) {
+    if (isArray(breadcrumbs)) {
+        return (_jsx("div", { dflex: true, alignItems: "center", trait: "typo.h5", ...props, children: breadcrumbs.map((b, index) => _jsx(BreadcrumbItem, { breadcrumb: b, showSeparator: index > 0 }, index)) }));
+    }
+    return _jsx(QueryBreadcrumbs, { queryFn: breadcrumbs.queryFn, queryField: breadcrumbs.queryField, generate: breadcrumbs.generate });
+}
+function QueryBreadcrumbs({ queryFn, queryField, generate, ...props }) {
+    const params = useParams();
+    const id = queryField ? params[queryField] : undefined;
+    const { data, isLoading, isError } = useApiQuery([""], queryFn, id);
+    if (isLoading || isError) {
+        return (_jsxs("div", { dflex: true, alignItems: "center", children: [_jsx(Shimmer, { h: "8", w: "24" }), _jsx(Icon, { path: mdiCircleSmall, mx: "1" }), _jsx(Shimmer, { h: "8", w: "20" })] }));
+    }
+    const breadcrumbs = generate(data);
+    return (_jsx("div", { dflex: true, alignItems: "center", trait: "typo.h5", ...props, children: breadcrumbs.map((b, index) => _jsx(BreadcrumbItem, { breadcrumb: b, showSeparator: index > 0 }, index)) }));
+}
+function BreadcrumbItem({ breadcrumb, showSeparator }) {
+    return (_jsxs(_Fragment, { children: [showSeparator && _jsx(Icon, { path: mdiCircleSmall, mx: "1" }), _jsx(Link, { href: `/${breadcrumb.path || "#"}`, children: _jsx("span", { 
+                    // onClick={breadcrumb.path ? handleClick : undefined}
+                    hover_textDecoration: breadcrumb.path ? "underline" : undefined, cursor: breadcrumb.path ? "pointer" : undefined, children: breadcrumb.label }) })] }));
+}

package/dist/lib/buttons/{DialogButton.jsx → DialogButton.js}

@@ -1,3 +1,4 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@soperio/jsx-runtime";
 import { Button } from "@valerya/ui";
 import React from "react";
 export function DialogButton({ buildDialog, ...props }) {
@@ -10,8 +11,5 @@ export function DialogButton({ buildDialog, ...props }) {
     const onCloseDialog = React.useCallback(() => {
         setShowDialog(false);
     }, [setShowDialog]);
-    return (<>
-            <Button onClick={onShowDialog} {...props}/>
-            {showDialog && buildDialog(onCloseDialog)}
-        </>);
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: onShowDialog, ...props }), showDialog && buildDialog(onCloseDialog)] }));
 }

package/dist/lib/buttons/{InvalidateButton.jsx → InvalidateButton.js}

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
 import { INVALIDATE_API } from "@compill/admin-api";
 import { useApiMutation, useMutate } from "@compill/api";
 import { mdiDatabaseRefreshOutline } from "@mdi/js";
@@ -6,5 +7,5 @@ export function InvalidateButton({ pathOrPermalink, ...props }) {
     const api = INVALIDATE_API.new(pathOrPermalink);
     const mutation = useApiMutation(api.invalidate, api.queryKey);
     const invalidate = useMutate(mutation, { successMsg: "Page successfully invalidated" });
-    return (<ButtonBarButton title="Regenerate" disabled={mutation.isLoading} onClick={invalidate} icon={mdiDatabaseRefreshOutline} {...props}/>);
+    return (_jsx(ButtonBarButton, { title: "Regenerate", disabled: mutation.isLoading, onClick: invalidate, icon: mdiDatabaseRefreshOutline, ...props }));
 }

package/dist/lib/buttons/{NavigateButton.jsx → NavigateButton.js}

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
 import { mdiPost } from "@mdi/js";
 import { Button, Icon } from "@valerya/ui";
 import React from "react";
@@ -7,7 +8,5 @@ export function NavigateButton({ path, ...props }) {
     const handleClick = React.useCallback(() => {
         navigate(path);
     }, [navigate, path]);
-    return (<Button type="submit" scheme="dark" variant="glass" corners="pill" w="10" h="10" onClick={handleClick} {...props}>
-            <Icon path={mdiPost}/>
-        </Button>);
+    return (_jsx(Button, { type: "submit", scheme: "dark", variant: "glass", corners: "pill", w: "10", h: "10", onClick: handleClick, ...props, children: _jsx(Icon, { path: mdiPost }) }));
 }

package/dist/lib/buttons/{PublishButton.jsx → PublishButton.js}

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
 import { useInvalidateMutation } from "@compill/api";
 import { mdiEye, mdiEyeOff } from "@mdi/js";
 import React from "react";
@@ -12,7 +13,5 @@ export function PublishButton({ status, queryId, api, ...props }) {
             .then(() => toast.success(isDraft ? "Published!" : "Unpublished!"))
             .catch(error => toast.error(`Error: ${error}`));
     }, [mutation, queryId]);
-    return (<ButtonBarButton disabled={mutation.isLoading} onClick={publish} icon={isDraft ? mdiEye : mdiEyeOff} {...props}>
-            {isDraft ? "Publish" : "Switch to draft"}
-        </ButtonBarButton>);
+    return (_jsx(ButtonBarButton, { disabled: mutation.isLoading, onClick: publish, icon: isDraft ? mdiEye : mdiEyeOff, ...props, children: isDraft ? "Publish" : "Switch to draft" }));
 }

package/dist/lib/buttons/{UpdateButton.jsx → UpdateButton.js}

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
 import { mdiCloudUpload } from "@mdi/js";
 import { useFormikContext } from "formik";
 import { useHotkeys } from "react-hotkeys-hook";
@@ -6,7 +7,5 @@ export function UpdateButton({ ...props }) {
     const { dirty, handleSubmit } = useFormikContext() ?? { dirty: false, handleSubmit: undefined, values: {} };
     useHotkeys('ctrl+s', () => { if (dirty && !props.disabled)
         handleSubmit(); }, { preventDefault: true }, [dirty, props, handleSubmit]);
-    return (<ButtonBarSubmitButton icon={mdiCloudUpload} {...props}>
-            Update
-        </ButtonBarSubmitButton>);
+    return (_jsx(ButtonBarSubmitButton, { icon: mdiCloudUpload, ...props, children: "Update" }));
 }

package/dist/lib/buttons/{ViewButton.jsx → ViewButton.js}

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
 import { mdiOpenInNew } from "@mdi/js";
 import React from "react";
 import { ButtonBarButton } from "../layout/ButtonBar";
@@ -5,9 +6,7 @@ export function ViewButton({ label, path, icon, ...props }) {
     const openPage = React.useCallback(() => {
         window.open(path, '_blank');
     }, [path]);
-    return (<ButtonBarButton onClick={openPage} dflex alignItems="center" gap="2" icon={icon || mdiOpenInNew} {...props}>
-            {label}
-        </ButtonBarButton>);
+    return (_jsx(ButtonBarButton, { onClick: openPage, dflex: true, alignItems: "center", gap: "2", icon: icon || mdiOpenInNew, ...props, children: label }));
     // return (
     //     <IconButton icon={icon ? icon : mdiOpenInNew} type="submit" scheme="dark" variant="glass" size="md" onClick={openPage} {...props}/>
     // )

package/dist/lib/cells/{OrderCell.jsx → OrderCell.js}

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@soperio/jsx-runtime";
 import { FlexCenter } from "@compill/components";
 import { useInvalidateMutation } from "@compill/api";
 import { mdiArrowDownBoldBox, mdiArrowUpBoldBox } from "@mdi/js";
@@ -21,15 +22,5 @@ export function OrderCell({ api, postId, order }) {
             toast.error(`Error: ${error}`);
         });
     }, [mutationUp, postId]);
-    return (<FlexCenter placeContent="start" numericFontVariant="tabular-nums">
-            {order}
-
-            <Button ms="3" variant="borderless" scheme="dark" onClick={moveUp}>
-                <Icon path={mdiArrowUpBoldBox}/>
-            </Button>
-
-            <Button variant="borderless" scheme="dark" onClick={moveDown}>
-                <Icon path={mdiArrowDownBoldBox}/>
-            </Button>
-        </FlexCenter>);
+    return (_jsxs(FlexCenter, { placeContent: "start", numericFontVariant: "tabular-nums", children: [order, _jsx(Button, { ms: "3", variant: "borderless", scheme: "dark", onClick: moveUp, children: _jsx(Icon, { path: mdiArrowUpBoldBox }) }), _jsx(Button, { variant: "borderless", scheme: "dark", onClick: moveDown, children: _jsx(Icon, { path: mdiArrowDownBoldBox }) })] }));
 }

package/dist/lib/json/{DetailsView.jsx → DetailsView.js}

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@soperio/jsx-runtime";
 import { useInvalidateParentMutation, useMutate } from "@compill/api";
 import { FormProvider, FormRenderer, TextArea } from "@compill/form";
 import { runIfFn } from "@soperio/react";
@@ -22,9 +23,7 @@ function useQueryField(queryField, useNextRouter) {
 export function DetailsView({ queryField, api, useNextRouter, processInput, screen, tabbed, ...props }) {
     const id = useQueryField(queryField, useNextRouter);
     const ref = React.useRef(null);
-    return (<PageQueryStateContainer api={api} apiFn="get" queryId={id} ref={ref} p="5" {...props}>
-            {(item) => <Internal item={item} screen={screen} api={api} tabbed={tabbed} processInput={processInput} containerRef={ref}/>}
-        </PageQueryStateContainer>);
+    return (_jsx(PageQueryStateContainer, { api: api, apiFn: "get", queryId: id, ref: ref, p: "5", ...props, children: (item) => _jsx(Internal, { item: item, screen: screen, api: api, tabbed: tabbed, processInput: processInput, containerRef: ref }) }));
 }
 function Internal({ item, screen, api, processInput, tabbed, containerRef }) {
     const pScreen = runIfFn(screen, item);
@@ -45,36 +44,12 @@ function Internal({ item, screen, api, processInput, tabbed, containerRef }) {
         editorMaxW = "calc(1280px - 28rem)";
     else if (type == "section")
         editorMaxW = "calc(1280px - 22rem)";
-    return (<FormProvider initialValues={runIfFn(initialValues, item)} validationSchema={schema} onSubmit={save} enableReinitialize>
-            <ScreenTopBar tabbed={tabbed} api={api} breadcrumbs={breadcrumbs} buttonBar={buttonBar} item={item} isLoading={mutation.isLoading} trackingRef={containerRef?.current}/>
-
-            {type == "form" && sections?.map((section, index) => (<Section key={index} section={section} item={item}/>))}
-
-            {(pScreen.type == "post" || pScreen.type == "section") &&
-            (<div p="5" bgColor="slate-100" rounded="lg">
-                        <PageContainer w={editorMaxW ? "auto" : "full"} size="x2" id="pagecontainer">
-                            {header}
-
-                            <div dflex gap="5">
-                                <div dflex flexCol gap="8" flexGrow>
-                                    {pScreen.editor?.type != "textarea" &&
-                    (
-                    // TODO Find a way to make this editor shrink in width when resizing the window...
-                    <PageContentEditor name="content" maxW={editorMaxW} minW="144" shadow rounded="lg"/>)}
-
-                                    {pScreen.editor?.type == "textarea" &&
-                    (<TextArea name={pScreen.editor?.name} maxW={editorMaxW} minW={editorMaxW} w={editorMaxW} minH="128" rows={25} bgColor="white" border="0" shadow p="5" textColor="slate-800"/>)}
-
-                                    {pScreen.editorFooter}
-                                </div>
-
-                                <PageSidebar>
-                                    {sections?.map((section, index) => (<Section key={index} section={section} item={item} cardStyle/>))}
-                                </PageSidebar>
-                            </div>
-                        </PageContainer>
-                    </div>)}
-        </FormProvider>);
+    return (_jsxs(FormProvider, { initialValues: runIfFn(initialValues, item), validationSchema: schema, onSubmit: save, enableReinitialize: true, children: [_jsx(ScreenTopBar, { tabbed: tabbed, api: api, breadcrumbs: breadcrumbs, buttonBar: buttonBar, item: item, isLoading: mutation.isLoading, trackingRef: containerRef?.current }), type == "form" && sections?.map((section, index) => (_jsx(Section, { section: section, item: item }, index))), (pScreen.type == "post" || pScreen.type == "section") &&
+                (_jsx("div", { p: "5", bgColor: "slate-100", rounded: "lg", children: _jsxs(PageContainer, { w: editorMaxW ? "auto" : "full", size: "x2", id: "pagecontainer", children: [header, _jsxs("div", { dflex: true, gap: "5", children: [_jsxs("div", { dflex: true, flexCol: true, gap: "8", flexGrow: true, children: [pScreen.editor?.type != "textarea" &&
+                                                (
+                                                // TODO Find a way to make this editor shrink in width when resizing the window...
+                                                _jsx(PageContentEditor, { name: "content", maxW: editorMaxW, minW: "144", shadow: true, rounded: "lg" })), pScreen.editor?.type == "textarea" &&
+                                                (_jsx(TextArea, { name: pScreen.editor?.name, maxW: editorMaxW, minW: editorMaxW, w: editorMaxW, minH: "128", rows: 25, bgColor: "white", border: "0", shadow: true, p: "5", textColor: "slate-800" })), pScreen.editorFooter] }), _jsx(PageSidebar, { children: sections?.map((section, index) => (_jsx(Section, { section: section, item: item, cardStyle: true }, index))) })] })] }) }))] }));
 }
 function Section({ section, item, cardStyle }) {
     if (section.type === "section") {
@@ -86,9 +61,7 @@ function Section({ section, item, cardStyle }) {
                 textSize: "sm",
                 shadow: true
             } : {};
-        return (<PageSidebarSection title={section.title} {...style}>
-                <FormRenderer form={runIfFn(section.form, item)}/>
-            </PageSidebarSection>);
+        return (_jsx(PageSidebarSection, { title: section.title, ...style, children: _jsx(FormRenderer, { form: runIfFn(section.form, item) }) }));
     }
     if (section.type === "custom")
         return runIfFn(section.component, item);

package/dist/lib/json/{EditItemView.jsx → EditItemView.js}

@@ -1,5 +1,6 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
 import { runIfFn } from "@soperio/react";
 import { ItemEditDialog } from "./dialog/ItemEditDialog";
 export function EditItemView({ initialValues, ...props }) {
-    return (<ItemEditDialog {...props} initialValues={runIfFn(initialValues, null)} show/>);
+    return (_jsx(ItemEditDialog, { ...props, initialValues: runIfFn(initialValues, null), show: true }));
 }

package/dist/lib/json/{MultiQueryWrapper.jsx → MultiQueryWrapper.js}

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
 import { useApiQueries } from "@compill/api";
 import { useQueryClient } from "@tanstack/react-query";
 import React from "react";
@@ -53,8 +54,8 @@ export function MultiQueryWrapper({ queries, config, tabbed, ...props }) {
     const { data, isFetching, isError } = useQueries(queries);
     const invalidate = useInvalidate(queries);
     if (isFetching)
-        return <QueryLoadingState w="full" h="100vh"/>;
+        return _jsx(QueryLoadingState, { w: "full", h: "100vh" });
     if (isError || !data)
-        return <RetryOnError p="0" w="full" h="100vh" onClick={invalidate}/>;
-    return <ScreenRenderer config={config(...data)} tabbed={tabbed} {...props}/>;
+        return _jsx(RetryOnError, { p: "0", w: "full", h: "100vh", onClick: invalidate });
+    return _jsx(ScreenRenderer, { config: config(...data), tabbed: tabbed, ...props });
 }

package/dist/lib/json/{QueryWrapper.jsx → QueryWrapper.js}

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
 import React from "react";
 import { ScreenRenderer } from "./ScreenRenderer";
 import { isFunction, runIfFn } from "@soperio/react";
@@ -24,5 +25,5 @@ export function QueryWrapper({ api, queryField, fn, transformFn, config, tabbed,
     // TODO states
     if (!data)
         return null;
-    return <ScreenRenderer config={config(transformedData)} tabbed={tabbed} {...props}/>;
+    return _jsx(ScreenRenderer, { config: config(transformedData), tabbed: tabbed, ...props });
 }

package/dist/lib/json/{ScreenRenderer.jsx → ScreenRenderer.js}

@@ -1,3 +1,4 @@
+import { jsx as _jsx, Fragment as _Fragment } from "@soperio/jsx-runtime";
 import { DetailsView } from "./DetailsView";
 import { QueryWrapper } from "./QueryWrapper";
 import { TabbedView } from "./TabbedView";
@@ -5,14 +6,14 @@ import { TableView } from "./table/TableView";
 import { MultiQueryWrapper } from "./MultiQueryWrapper";
 export function ScreenRenderer({ config, tabbed, ...props }) {
     if (config.type === "table")
-        return <TableView {...config} {...props}/>;
+        return _jsx(TableView, { ...config, ...props });
     if (config.type === "tabbed")
-        return <TabbedView {...config} {...props}/>;
+        return _jsx(TabbedView, { ...config, ...props });
     if (config.type === "details")
-        return <DetailsView {...config} tabbed={tabbed} {...props}/>;
+        return _jsx(DetailsView, { ...config, tabbed: tabbed, ...props });
     if (config.type === "query")
-        return <QueryWrapper {...config} tabbed={tabbed} {...props}/>;
+        return _jsx(QueryWrapper, { ...config, tabbed: tabbed, ...props });
     if (config.type === "multiQuery")
-        return <MultiQueryWrapper {...config} tabbed={tabbed} {...props}/>;
-    return <></>;
+        return _jsx(MultiQueryWrapper, { ...config, tabbed: tabbed, ...props });
+    return _jsx(_Fragment, {});
 }

package/dist/lib/json/ScreenTopBar.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@soperio/jsx-runtime";
+import { API } from "@compill/admin-api";
+import { InvalidateButton } from "../buttons/InvalidateButton";
+import { PublishButton } from "../buttons/PublishButton";
+import { UpdateButton } from "../buttons/UpdateButton";
+import { ViewButton } from "../buttons/ViewButton";
+import { PageTopBar, PageTopBarToolbar } from "../page/PageTopBar";
+import React from "react";
+import { ButtonBar } from "../layout/ButtonBar";
+export function ScreenTopBar({ tabbed, breadcrumbs, api, item, isLoading, buttonBar, trackingRef }) {
+    return (_jsxs(_Fragment, { children: [tabbed &&
+                (_jsx(PageTopBarToolbar, { trackingRef: trackingRef, children: _jsx(Buttons, { api: api, item: item, isLoading: isLoading, buttonBar: buttonBar }) })), !tabbed &&
+                (_jsx(PageTopBar, { breadcrumbs: breadcrumbs, children: _jsx(Buttons, { api: api, item: item, isLoading: isLoading, buttonBar: buttonBar }) }))] }));
+}
+function Buttons({ api, item, isLoading, buttonBar }) {
+    return (_jsxs(_Fragment, { children: [buttonBar && buttonBar.length > 0 &&
+                (_jsx(ButtonBar, { children: buttonBar.map((button, index) => (_jsxs(React.Fragment, { children: [button.type === "link" && _jsx(ViewButton, { label: button.label, path: button.path, icon: button.icon }), button.type === "invalidate" && _jsx(InvalidateButton, { pathOrPermalink: button.pathOrPermalink }), button.type == "custom" && button.render(item)] }, index))) })), _jsxs(ButtonBar, { children: [api instanceof API && _jsx(PublishButton, { api: api, queryId: item.id, status: item.status, disabled: isLoading }), _jsx(UpdateButton, { disabled: isLoading })] })] }));
+}

package/dist/lib/json/{TabbedView.jsx → TabbedView.js}

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@soperio/jsx-runtime";
 import { useParams } from "react-router-dom";
 import { PageQueryStateContainer } from "../page/PageQueryStateContainer";
 import { PageTabbedTopBar, PageTabbedTopBarProvider } from "../page/PageTopBar";
@@ -6,23 +7,15 @@ import { runIfFn } from "@soperio/react";
 import { ScreenRenderer } from "./ScreenRenderer";
 export function TabbedView({ queryField, api, screen, ...props }) {
     const { [queryField]: id } = useParams();
-    return (<PageQueryStateContainer queryId={id} api={api} apiFn="get" p="5">
-            {(city) => {
+    return (_jsx(PageQueryStateContainer, { queryId: id, api: api, apiFn: "get", p: "5", children: (city) => {
             const { breadcrumbs, tabs } = runIfFn(screen, city);
-            return (<PageTabbedTopBarProvider>
-                            <PageTabbedTopBar breadcrumbs={breadcrumbs} mb="-3"/>
-
-                            <TabContainer tabs={tabs.map(tab => tab.label)} saveKey={`tab-${id}`} mt="-3" mb="3" id="fff">
-                                {tabs.map((tab, index) => <TabView key={index} tab={tab}/>)}
-                            </TabContainer>
-                        </PageTabbedTopBarProvider>);
-        }}
-        </PageQueryStateContainer>);
+            return (_jsxs(PageTabbedTopBarProvider, { children: [_jsx(PageTabbedTopBar, { breadcrumbs: breadcrumbs, mb: "-3" }), _jsx(TabContainer, { tabs: tabs.map(tab => tab.label), saveKey: `tab-${id}`, mt: "-3", mb: "3", id: "fff", children: tabs.map((tab, index) => _jsx(TabView, { tab: tab }, index)) })] }));
+        } }));
 }
 function TabView({ tab }) {
     if (!tab.component && !tab.config)
         throw new Error(`Screen config for tabbed view: one of your tabs does not have a component or config declared: ${tab.label}`);
     if (tab.component)
         return tab.component();
-    return <ScreenRenderer config={tab.config} tabbed p="0"/>;
+    return _jsx(ScreenRenderer, { config: tab.config, tabbed: true, p: "0" });
 }

package/dist/lib/json/buttons/{ActionButton.jsx → ActionButton.js}

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@soperio/jsx-runtime";
 import { useApiMutation, useInvalidateParentMutation, useMutate } from "@compill/api";
 import { Button, Icon } from "@valerya/ui";
 export function ActionButton({ label, buttonProps, icon, queryKey, queryFn, successMsg, errorMsg, invalidateParent }) {
@@ -6,8 +7,5 @@ export function ActionButton({ label, buttonProps, icon, queryKey, queryFn, succ
         successMsg,
         errorMsg
     });
-    return (<Button display="flex" alignItems="center" gap="3" {...buttonProps} onClick={mutate} disabled={mutation.isLoading}>
-            {icon && <Icon path={icon}/>}
-            {label}
-        </Button>);
+    return (_jsxs(Button, { display: "flex", alignItems: "center", gap: "3", ...buttonProps, onClick: mutate, disabled: mutation.isLoading, children: [icon && _jsx(Icon, { path: icon }), label] }));
 }

package/dist/lib/json/buttons/{ConfirmationActionButton.jsx → ConfirmationActionButton.js}

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@soperio/jsx-runtime";
 import { useApiMutation, useInvalidateParentMutation, useMutate } from "@compill/api";
 import { ModalLoadingOverlay } from "@compill/components";
 import { Button, Icon, Modal, ModalBody, ModalFooter, ModalHeader } from "@valerya/ui";
@@ -7,10 +8,7 @@ export function ConfirmationActionButton({ label, buttonProps, icon, queryKey, q
         successMsg,
         errorMsg
     });
-    return (<Button display="flex" alignItems="center" gap="3" {...buttonProps} onClick={mutate} disabled={mutation.isLoading}>
-            {icon && <Icon path={icon}/>}
-            {label}
-        </Button>);
+    return (_jsxs(Button, { display: "flex", alignItems: "center", gap: "3", ...buttonProps, onClick: mutate, disabled: mutation.isLoading, children: [icon && _jsx(Icon, { path: icon }), label] }));
 }
 export function ConfirmationDialog({ title, text, positiveButtonLabel, negativeButtonLabel, queryKey, queryFn, successMsg, errorMsg, invalidateParent, show, onClose }) {
     const mutation = invalidateParent ? useInvalidateParentMutation(queryFn, queryKey) : useApiMutation(queryFn, queryKey);
@@ -18,20 +16,5 @@ export function ConfirmationDialog({ title, text, positiveButtonLabel, negativeB
         successMsg,
         errorMsg
     });
-    return (<Modal show={show} onClose={onClose}>
-            <ModalHeader>
-                <div textSize="xl" fontWeight="600">{title}</div>
-            </ModalHeader>
-
-            <ModalBody>
-                {text}
-            </ModalBody>
-
-            <ModalFooter dflex gap="3" alignItems="center" placeContent="end">
-                <Button>{negativeButtonLabel || "Cancel"}</Button>
-                <Button onClick={mutate}>{positiveButtonLabel || "OK"}</Button>
-            </ModalFooter>
-
-            {mutation.isLoading && <ModalLoadingOverlay />}
-        </Modal>);
+    return (_jsxs(Modal, { show: show, onClose: onClose, children: [_jsx(ModalHeader, { children: _jsx("div", { textSize: "xl", fontWeight: "600", children: title }) }), _jsx(ModalBody, { children: text }), _jsxs(ModalFooter, { dflex: true, gap: "3", alignItems: "center", placeContent: "end", children: [_jsx(Button, { children: negativeButtonLabel || "Cancel" }), _jsx(Button, { onClick: mutate, children: positiveButtonLabel || "OK" })] }), mutation.isLoading && _jsx(ModalLoadingOverlay, {})] }));
 }

package/dist/lib/json/dialog/DialogRenderer.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
+import { ItemEditDialog } from "./ItemEditDialog";
+import { QueryWrapperDialog } from "./QueryWrapperDialog";
+import { MultiQueryWrapperDialog } from "./MultiQueryWrapperDialog";
+export function DialogRenderer({ config, onClose, invalidateQueryKey, queryId }) {
+    const { type, ...props } = config;
+    if (config.type === "dialog")
+        return _jsx(ItemEditDialog, { ...props, queryId: queryId, invalidateQueryKey: invalidateQueryKey, show: true, onClose: onClose });
+    if (config.type === "query")
+        return _jsx(QueryWrapperDialog, { ...props, queryId: queryId, invalidateQueryKey: invalidateQueryKey, onClose: onClose });
+    if (config.type === "multiQuery")
+        return _jsx(MultiQueryWrapperDialog, { ...props, queryId: queryId, invalidateQueryKey: invalidateQueryKey, onClose: onClose });
+    return null;
+}

package/dist/lib/json/dialog/ItemDeleteDialog.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@soperio/jsx-runtime";
+import { useApiMutation, useInvalidateParentMutation, useMutate } from "@compill/api";
+import { ModalLoadingOverlay } from "@compill/components";
+import { runIfFn } from "@soperio/react";
+import { Button, Modal } from "@valerya/ui";
+import React from "react";
+export function ItemDeleteDialog({ title, actionButtonLabel, closeActionButtonLabel = "Cancel", itemLabel, queryId = "", api, apiFn, invalidateQueriesOnSuccess = true, invalidateQueryKey, size = "lg", md_boxSizing, msg, show, onClose, onSuccess, ...props }) {
+    const fn = apiFn ? api[apiFn] : api.delete;
+    const mutation = invalidateQueriesOnSuccess ? useInvalidateParentMutation(fn, invalidateQueryKey ?? api.queryKey)
+        : useApiMutation(fn, api.queryKey);
+    const mutate = useMutate(mutation, { onSuccess: () => { onClose?.(); onSuccess?.(); } });
+    const handleDelete = React.useCallback(() => mutate(queryId), [mutate, queryId]);
+    return (_jsxs(Modal, { size: size, show: show, onClose: onClose, scheme: "danger", variant: "glass", transition: true, ...props, children: [_jsx(Modal.Header, { children: title || `Delete ${itemLabel}` }), _jsxs(Modal.Body, { pb: "6", children: [!msg && `Do you really want to delete ${itemLabel}?`, msg && runIfFn(msg, itemLabel)] }), _jsxs(Modal.Footer, { dflex: true, placeContent: "end", spaceX: "3", children: [_jsx(Button, { disabled: mutation.isPending, onClick: onClose, variant: "borderless", scheme: "dark", me: "2", children: closeActionButtonLabel }), _jsx(Button, { scheme: "danger", disabled: mutation.isPending, onClick: handleDelete, children: actionButtonLabel || "Delete" })] }), mutation.isPending && _jsx(ModalLoadingOverlay, {})] }));
+}

package/dist/lib/json/dialog/ItemEditDialog.js

@@ -0,0 +1,77 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "@soperio/jsx-runtime";
+import { useApiMutation, useApiQuery, useInvalidateParentMutation } from "@compill/api";
+import { ModalLoadingOverlay, QueryLoadingState, RetryOnError } from "@compill/components";
+import { FormRenderer } from "@compill/form";
+import { isFunction } from "@soperio/react";
+import { Button, Modal } from "@valerya/ui";
+import { Form, Formik } from "formik";
+import React from "react";
+import { toast } from "react-toastify";
+const defaultErrorMsg = "Oops, something went wrong...";
+function nonNullValues(data) {
+    if (data) {
+        const nonNullData = { ...data };
+        for (const key in data)
+            nonNullData[key] = nonNullData[key] ?? "";
+        return nonNullData;
+    }
+    return data;
+}
+export function ItemEditDialog({ initialValues, itemLabel, queryId = "", api, queryFetchOptions, querySaveOptions, onSuccess, onFetchError, fetchErrorMsg = defaultErrorMsg, onSaveError, saveErrorMsg = defaultErrorMsg, fetchToFormData, formToQueryData, invalidateQueriesOnSuccess = true, invalidateQueryKey, retryText = "Retry", cancelLabel = "Cancel", saveLabel, size = "lg", title, form, show, onClose, formikProps, ...props }) {
+    const { isInitialLoading, isFetching, data, isError, error /*, error*/, refetch } = useApiQuery(api.queryKey, api.get, queryId, {
+        enabled: !( /*queryId == 0 || */queryId == "" || queryId == null || queryId == undefined), // means than this query is only enabled if the id is defined
+        onError: onFetchError,
+        ...queryFetchOptions
+    });
+    // const [activeTab, setActiveTab] = React.useState(form && Array.isArray(form) ? form[0].key : "");
+    // const [showTab, setShowTab] = React.useState(true);
+    const mutation = invalidateQueriesOnSuccess ? useInvalidateParentMutation(api.upsert, invalidateQueryKey ?? api.queryKey, querySaveOptions)
+        : useApiMutation(api.upsert, api.queryKey, queryId, querySaveOptions);
+    const retry = React.useCallback(() => refetch(), [refetch]);
+    const saveItem = React.useCallback(async (item, actions) => {
+        // Clear mutation error if any
+        mutation.reset();
+        const formItem = formToQueryData ? formToQueryData(item) : { ...item };
+        await mutation.mutateAsync(formItem)
+            .then((response) => {
+            if (onSuccess)
+                onSuccess(formItem, response);
+            else
+                toast.success(`${title ? title(formItem) : formItem.name ?? formItem.title} ${queryId ? "saved" : "created"}`);
+            // closing delete modal
+            onClose?.();
+        })
+            .catch(error => {
+            console.error("on error", error);
+            if (onSaveError)
+                onSaveError(item);
+            else
+                toast.error(`Couldn't save ${title ? title(formItem) : formItem.name ?? formItem.title}`);
+            actions.setSubmitting(false);
+        });
+    }, [mutation, formToQueryData, onSuccess, onSaveError, onClose]);
+    // const switchTab = React.useCallback((tab: string) =>
+    // {
+    // setActiveTab(tab);
+    // setShowTab(false);
+    // setTimeout(function ()
+    // {
+    //     setActiveTab(tab);
+    //     setShowTab(true);
+    // }, 150);
+    // }, [setActiveTab])
+    return (_jsxs(Modal, { size: size, show: show, onClose: onClose, scheme: "light", transition: true, ...props, children: [_jsxs(Modal.Header, { children: [!isInitialLoading && queryId && `Edit ${title ? title(data) : data?.["name"] ?? data?.["title"] ?? data?.["name"] ?? ""}`, !queryId && `Create new ${itemLabel ?? "item"}`, Array.isArray(form) && (_jsx(_Fragment, {})
+                    // <ul className="nav nav-bold nav-pills">
+                    //     {form.map(item =>
+                    //         <li key={item.key} className="nav-item cursor-pointer bg-hover-light rounded" onClick={() => switchTab(item.key)}>
+                    //             <span className={clsx("nav-link", activeTab === item.key && "active")} data-toggle="tab">{item.label}</span>
+                    //         </li>
+                    //     )}
+                    // </ul>
+                    )] }), isInitialLoading && (_jsx(Modal.Body, { children: _jsx(QueryLoadingState, { minW: "72" }) })), isError && (_jsx(Modal.Body, { children: _jsx(RetryOnError, { label: `${fetchErrorMsg} ${error}`, onClick: retry }) })), !isInitialLoading && !isError &&
+                (_jsx(_Fragment, { children: _jsx(Formik
+                    // initialValues={fetchToFormData && queryId && data ? fetchToFormData(nonNullValues(data)) : nonNullValues(data) ?? initialValues(data) ?? {}}
+                    , { 
+                        // initialValues={fetchToFormData && queryId && data ? fetchToFormData(nonNullValues(data)) : nonNullValues(data) ?? initialValues(data) ?? {}}
+                        initialValues: fetchToFormData && queryId && data ? fetchToFormData(nonNullValues(data)) : nonNullValues(initialValues(data)) ?? {}, onSubmit: saveItem, ...formikProps, children: ({ setFieldValue, dirty, handleSubmit, isValid, values }) => (_jsxs(_Fragment, { children: [_jsx(Modal.Body, { pb: "6", children: _jsxs(Form, { children: [React.isValidElement(form) && form, Array.isArray(form) && _jsx(FormRenderer, { form: form }), isFunction(form) && _jsx(FormRenderer, { form: form(data ?? values) })] }) }), _jsxs(Modal.Footer, { dflex: true, placeContent: "end", spaceX: "3", children: [_jsx(Button, { disabled: mutation.isLoading, onClick: onClose, variant: "borderless", me: "2", children: cancelLabel }), _jsx(Button, { type: "submit", disabled: !dirty || mutation.isLoading /* || !isValid*/, onClick: () => handleSubmit(), children: saveLabel ? saveLabel : (queryId ? "Update" : "Create") })] })] })) }) })), mutation.isLoading && _jsx(ModalLoadingOverlay, {})] }));
+}

package/dist/lib/json/dialog/{MultiQueryWrapperDialog.jsx → MultiQueryWrapperDialog.js}

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
 import { useApiQueries } from "@compill/api";
 import React from "react";
 import { ItemEditDialog } from "./ItemEditDialog";
@@ -18,5 +19,5 @@ export function MultiQueryWrapperDialog({ queries, config, onClose, queryId, inv
     // if (isFetching)
     //     return null
     // @ts-ignore
-    return <ItemEditDialog isPreloading={isFetching} {...config(...transformedData)} queryId={queryId} invalidateQueryKey={invalidateQueryKey} show onClose={onClose}/>;
+    return _jsx(ItemEditDialog, { isPreloading: isFetching, ...config(...transformedData), queryId: queryId, invalidateQueryKey: invalidateQueryKey, show: true, onClose: onClose });
 }

package/dist/lib/json/dialog/{QueryWrapperDialog.jsx → QueryWrapperDialog.js}

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
 import { useApiQuery } from "@compill/api";
 import React from "react";
 import { ItemEditDialog } from "./ItemEditDialog";
@@ -15,5 +16,5 @@ export function QueryWrapperDialog({ api, fn, transformFn, config, onClose, quer
     if (isFetching)
         return null;
     // @ts-ignore
-    return <ItemEditDialog {...config(transformedData)} queryId={queryId} invalidateQueryKey={invalidateQueryKey} show onClose={onClose}/>;
+    return _jsx(ItemEditDialog, { ...config(transformedData), queryId: queryId, invalidateQueryKey: invalidateQueryKey, show: true, onClose: onClose });
 }

package/dist/lib/json/table/{RefreshButton.jsx → RefreshButton.js}

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
 import { useInvalidateQuery } from "@compill/api";
 import { mdiRefresh } from "@mdi/js";
 import { Icon } from "@valerya/ui";
@@ -6,7 +7,5 @@ import { useHotkeys } from "react-hotkeys-hook";
 export function RefreshButton({ queryKey }) {
     const invalidate = useInvalidateQuery(queryKey);
     useHotkeys('ctrl+r', () => invalidate(), { preventDefault: true }, [invalidate]);
-    return (<ButtonBarButton scheme="dark" size="sm" aspectRatio="square" variant="borderless" onClick={invalidate}>
-            <Icon path={mdiRefresh}/>
-        </ButtonBarButton>);
+    return (_jsx(ButtonBarButton, { scheme: "dark", size: "sm", aspectRatio: "square", variant: "borderless", onClick: invalidate, children: _jsx(Icon, { path: mdiRefresh }) }));
 }

package/dist/lib/json/table/{TableRowActionsView.jsx → TableRowActionsView.js}

@@ -1,3 +1,4 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@soperio/jsx-runtime";
 import { mdiDelete, mdiEye, mdiOpenInNew, mdiPencil } from "@mdi/js";
 import { Icon } from "@valerya/ui";
 import { TableRowPublishPostButton } from "./TableRowPublishPostButton";
@@ -6,18 +7,8 @@ import { TableRowActionButton } from "@compill/admin";
 import { runIfFn } from "@soperio/react";
 export function TableRowActionsView({ row, onAction, rowActions, api, queryKey }) {
     const item = row.original;
-    return (<div dflex w="full" alignItems="stretch" placeContent="end" h="full">
-            {runIfFn(rowActions, item)?.map((action, index) => (<React.Fragment key={index}>
-                            {action.type === "publish" && <TableRowPublishPostButton id={item.id} api={action.api ?? api} status={item.status} invalidateQueryKey={queryKey}/>}
-
-                            {action.type == "custom" && <>{action.component(item, queryKey, action.icon, action.label)}</>}
-
-                            {!["publish", "custom"].includes(action.type) &&
-                (<ActionButton onClick={() => onAction(action, item)} scheme={schemes[action.type]}>
-                                        <Icon path={icons[action.type]} size="sm"/>
-                                    </ActionButton>)}
-                        </React.Fragment>))}
-        </div>);
+    return (_jsx("div", { dflex: true, w: "full", alignItems: "stretch", placeContent: "end", h: "full", children: runIfFn(rowActions, item)?.map((action, index) => (_jsxs(React.Fragment, { children: [action.type === "publish" && _jsx(TableRowPublishPostButton, { id: item.id, api: action.api ?? api, status: item.status, invalidateQueryKey: queryKey }), action.type == "custom" && _jsx(_Fragment, { children: action.component(item, queryKey, action.icon, action.label) }), !["publish", "custom"].includes(action.type) &&
+                    (_jsx(ActionButton, { onClick: () => onAction(action, item), scheme: schemes[action.type], children: _jsx(Icon, { path: icons[action.type], size: "sm" }) }))] }, index))) }));
 }
 function ActionButton({ onClick, ...props }) {
     const handleClick = React.useCallback((event) => {
@@ -25,7 +16,7 @@ function ActionButton({ onClick, ...props }) {
         event?.stopPropagation();
         onClick?.(event);
     }, [onClick]);
-    return (<TableRowActionButton onClick={handleClick} {...props}/>);
+    return (_jsx(TableRowActionButton, { onClick: handleClick, ...props }));
 }
 const icons = {
     "link": mdiOpenInNew,

package/dist/lib/json/table/{TableRowPublishPostButton.jsx → TableRowPublishPostButton.js}

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
 import { Icon } from "@valerya/ui";
 import { mdiPublish, mdiPublishOff } from "@mdi/js";
 import { Button } from "@valerya/ui";
@@ -15,7 +16,5 @@ export function TableRowPublishPostButton({ id, api, status, invalidateQueryKey,
             .then(() => toast.success(isDraft ? "Published!" : "Unpublished!"))
             .catch(error => toast.error(`Error: ${error}`));
     }, [mutation, id]);
-    return (<Button variant="borderless" corners="square" scheme="dark" onClick={publish} {...props}>
-            <Icon path={isDraft ? mdiPublish : mdiPublishOff} size="sm"/>
-        </Button>);
+    return (_jsx(Button, { variant: "borderless", corners: "square", scheme: "dark", onClick: publish, ...props, children: _jsx(Icon, { path: isDraft ? mdiPublish : mdiPublishOff, size: "sm" }) }));
 }