@compill/admin 1.0.102 → 1.0.104

package/dist/lib/table/TableRowActionDialogButton.d.ts

@@ -1,4 +1,4 @@
-import { DialogButtonProps } from "../buttons/DialogButton";
+import { DialogButtonProps } from "../buttons/DialogButton.js";
 export declare function TableRowActionDialogButton({ icon, children, ...props }: {
     icon?: string;
 } & DialogButtonProps): JSX.Element;

package/dist/lib/table/TableRowActionDialogButton.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@soperio/jsx-runtime";
+import { Icon } from "@valerya/ui";
+import { DialogButton } from "../buttons/DialogButton.js";
+export function TableRowActionDialogButton({ icon, children, ...props }) {
+    return (_jsxs(DialogButton, { dflex: true, alignContent: "center", placeContent: "center", py: "2.5", px: "3", h: "full", size: "lg", variant: "borderless", corners: "square", gap: "2", ...props, children: [icon && _jsx(Icon, { path: icon, size: "sm" }), children] }));
+}

package/dist/lib/table/TableRowDeleteButton.d.ts

@@ -1,2 +1,2 @@
-import { DialogButtonProps } from "../buttons/DialogButton";
+import { DialogButtonProps } from "../buttons/DialogButton.js";
 export declare function TableRowDeleteButton({ children, ...props }: DialogButtonProps): JSX.Element;

package/dist/lib/table/{TableRowDeleteButton.jsx → TableRowDeleteButton.js}

@@ -1,5 +1,6 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
 import { mdiDelete } from "@mdi/js";
-import { TableRowActionDialogButton } from "./TableRowActionDialogButton";
+import { TableRowActionDialogButton } from "./TableRowActionDialogButton.js";
 export function TableRowDeleteButton({ children, ...props }) {
-    return <TableRowActionDialogButton icon={mdiDelete} {...props}>{children}</TableRowActionDialogButton>;
+    return _jsx(TableRowActionDialogButton, { icon: mdiDelete, ...props, children: children });
 }

package/dist/lib/table/TableRowEditButton.d.ts

@@ -1,2 +1,2 @@
-import { DialogButtonProps } from "../buttons/DialogButton";
+import { DialogButtonProps } from "../buttons/DialogButton.js";
 export declare function TableRowEditButton({ children, ...props }: DialogButtonProps): JSX.Element;

package/dist/lib/table/{TableRowEditButton.jsx → TableRowEditButton.js}

@@ -1,7 +1,6 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
 import { mdiPencil } from "@mdi/js";
-import { TableRowActionDialogButton } from "./TableRowActionDialogButton";
+import { TableRowActionDialogButton } from "./TableRowActionDialogButton.js";
 export function TableRowEditButton({ children, ...props }) {
-    return (<TableRowActionDialogButton icon={mdiPencil} {...props}>
-            {children}
-        </TableRowActionDialogButton>);
+    return (_jsx(TableRowActionDialogButton, { icon: mdiPencil, ...props, children: children }));
 }

package/dist/lib/table/{TableRowNavigateButton.jsx → TableRowNavigateButton.js}

@@ -1,7 +1,8 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
 import { mdiEye } from "@mdi/js";
 import React from "react";
 import { useNavigate } from "react-router-dom";
-import { TableRowActionButton } from "./TableRowActionButton";
+import { TableRowActionButton } from "./TableRowActionButton.js";
 export function TableRowNavigateButton({ path, ...props }) {
     const navigate = useNavigate();
     const handleClick = React.useCallback((event) => {
@@ -9,5 +10,5 @@ export function TableRowNavigateButton({ path, ...props }) {
         event?.stopPropagation();
         navigate(`${path}`);
     }, [navigate, path]);
-    return <TableRowActionButton icon={mdiEye} onClick={handleClick} {...props}/>;
+    return _jsx(TableRowActionButton, { icon: mdiEye, onClick: handleClick, ...props });
 }

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

@@ -1,8 +1,9 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
 import { useInvalidateParentMutation } from "@compill/api";
 import { mdiPublish, mdiPublishOff } from "@mdi/js";
 import React from "react";
 import { toast } from "react-toastify";
-import { TableRowActionButton } from "./TableRowActionButton";
+import { TableRowActionButton } from "./TableRowActionButton.js";
 export function TableRowPublishPostButton({ id, api, status, invalidateQueryKey, ...props }) {
     const isDraft = status == "draft";
     const mutation = useInvalidateParentMutation(isDraft ? api.publish : api.unpublish, invalidateQueryKey ?? api.queryKey, { networkMode: "always" });
@@ -14,5 +15,5 @@ export function TableRowPublishPostButton({ id, api, status, invalidateQueryKey,
             .then(() => toast.success(isDraft ? "Published!" : "Unpublished!"))
             .catch(error => toast.error(`Error: ${error}`));
     }, [mutation, id]);
-    return (<TableRowActionButton icon={isDraft ? mdiPublish : mdiPublishOff} onClick={publish} {...props}/>);
+    return (_jsx(TableRowActionButton, { icon: isDraft ? mdiPublish : mdiPublishOff, onClick: publish, ...props }));
 }

package/dist/lib/table/{TableRowViewButton.jsx → TableRowViewButton.js}

@@ -1,6 +1,7 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
 import { mdiOpenInNew } from "@mdi/js";
 import React from "react";
-import { TableRowActionButton } from "./TableRowActionButton";
+import { TableRowActionButton } from "./TableRowActionButton.js";
 import { AppEnv } from "@compill/env";
 export function TableRowViewButton({ path, ...props }) {
     const openPage = React.useCallback((event) => {
@@ -8,5 +9,5 @@ export function TableRowViewButton({ path, ...props }) {
         event?.stopPropagation();
         window.open(`${AppEnv.websiteUrl()}/${path}`, '_blank');
     }, [path]);
-    return <TableRowActionButton icon={mdiOpenInNew} onClick={openPage} {...props}/>;
+    return _jsx(TableRowActionButton, { icon: mdiOpenInNew, onClick: openPage, ...props });
 }

package/dist/lib/table/TableTopBar.d.ts

@@ -1,5 +1,5 @@
 import { ParentComponent, SoperioComponent } from "@soperio/react";
-import { Breadcrumb, QueryBreadcrumbs } from "../breadcrumbs/BreadCrumbs";
+import { Breadcrumb, QueryBreadcrumbs } from "../breadcrumbs/BreadCrumbs.js";
 interface TableTopBarProps extends SoperioComponent, ParentComponent {
     title?: string;
     breadcrumbs?: Breadcrumb[] | QueryBreadcrumbs;

package/dist/lib/table/TableTopBar.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@soperio/jsx-runtime";
+import { Breadcrumbs } from "../breadcrumbs/BreadCrumbs.js";
+export function TableTopBar({ title, breadcrumbs, children, ...props }) {
+    return (_jsxs("div", { dflex: true, flexRow: true, alignItems: "center", gap: "3", p: "8", ...props, children: [_jsxs("div", { children: [title && _jsx("h2", { textSize: "x2", fontWeight: "600", textColor: "#3f4254", textTransform: "capitalize", children: title }), breadcrumbs && _jsx(Breadcrumbs, { breadcrumbs: breadcrumbs })] }), _jsx("div", { flexGrow: true, children: "\u00A0" }), children] }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compill/admin",
-  "version": "1.0.102",
+  "version": "1.0.104",
   "private": false,
   "sideEffects": false,
   "type": "module",
@@ -15,8 +15,8 @@
     "typescript": "5.9.2",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.1",
-    "@repo/eslint-config": "0.0.0",
-    "@repo/typescript-config": "0.0.0"
+    "@repo/typescript-config": "0.0.0",
+    "@repo/eslint-config": "0.0.0"
   },
   "peerDependencies": {
     "react": "^18.3.1",
@@ -33,19 +33,19 @@
     "react-router-dom": "^6.11.2",
     "react-hotkeys-hook": "^5.0.1",
     "yup": "^1.1.0",
-    "@soperio/react": "1.0.14",
-    "@soperio/jsx-runtime": "1.0.14",
-    "@valerya/ui": "1.0.9",
-    "@compill/admin-api": "1.0.55",
-    "@compill/api": "1.0.57",
-    "@compill/auth": "1.0.77",
-    "@compill/env": "1.0.19",
-    "@compill/components": "1.0.49",
-    "@compill/form": "1.0.67",
-    "@compill/hooks": "1.0.43",
-    "@compill/table": "1.0.80",
-    "@compill/editor": "1.0.79",
-    "@compill/form-editor": "1.0.19"
+    "@soperio/react": "1.0.16",
+    "@compill/admin-api": "1.0.57",
+    "@soperio/jsx-runtime": "1.0.16",
+    "@compill/api": "1.0.59",
+    "@compill/auth": "1.0.79",
+    "@valerya/ui": "1.0.17",
+    "@compill/env": "1.0.21",
+    "@compill/form": "1.0.69",
+    "@compill/form-editor": "1.0.21",
+    "@compill/hooks": "1.0.45",
+    "@compill/table": "1.0.82",
+    "@compill/components": "1.0.52",
+    "@compill/editor": "1.0.81"
   },
   "publishConfig": {
     "access": "public"
@@ -54,7 +54,7 @@
     "dist"
   ],
   "scripts": {
-    "build": "tsc -p tsconfig.build.json",
+    "build": "tsc -p tsconfig.build.json && node ../../fix-imports.js",
     "dev": "tsup src/index.ts --format esm --dts --watch",
     "lint": "eslint . --max-warnings 0",
     "check-types": "tsc --noEmit"

package/dist/lib/SectionTitle.jsx

@@ -1,3 +0,0 @@
-export function SectionTitle({ children, ...props }) {
-    return <h2 textSize="xl" fontWeight="600" textColor="slate-800" {...props}>{children}</h2>;
-}

package/dist/lib/breadcrumbs/BreadCrumbs.jsx

@@ -1,43 +0,0 @@
-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 (<div dflex alignItems="center" trait="typo.h5" {...props}>
-                {breadcrumbs.map((b, index) => <BreadcrumbItem key={index} breadcrumb={b} showSeparator={index > 0}/>)}
-            </div>);
-    }
-    return <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 (<div dflex alignItems="center">
-                <Shimmer h="8" w="24"/>
-                <Icon path={mdiCircleSmall} mx="1"/>
-                <Shimmer h="8" w="20"/>
-            </div>);
-    }
-    const breadcrumbs = generate(data);
-    return (<div dflex alignItems="center" trait="typo.h5" {...props}>
-            {breadcrumbs.map((b, index) => <BreadcrumbItem key={index} breadcrumb={b} showSeparator={index > 0}/>)}
-        </div>);
-}
-function BreadcrumbItem({ breadcrumb, showSeparator }) {
-    return (<>
-            {showSeparator && <Icon path={mdiCircleSmall} mx="1"/>}
-            <Link href={`/${breadcrumb.path || "#"}`}>
-                <span 
-    // onClick={breadcrumb.path ? handleClick : undefined}
-    hover_textDecoration={breadcrumb.path ? "underline" : undefined} cursor={breadcrumb.path ? "pointer" : undefined}>
-                    {breadcrumb.label}
-                </span>
-            </Link>
-        </>);
-}

package/dist/lib/json/DetailsView.jsx

@@ -1,96 +0,0 @@
-import { useInvalidateParentMutation, useMutate } from "@compill/api";
-import { FormProvider, FormRenderer, TextArea } from "@compill/form";
-import { runIfFn } from "@soperio/react";
-import React from "react";
-import { useParams } from "react-router-dom";
-import { PageContainer } from "../page/PageContainer";
-import { PageContentEditor } from "../page/PageContentEditor";
-import { PageQueryStateContainer } from "../page/PageQueryStateContainer";
-import { PageSidebar } from "../page/PageSidebar";
-import { PageSidebarSection } from "../page/PageSidebarSection";
-import { ScreenTopBar } from "./ScreenTopBar";
-import { useRouter } from "next/router";
-import { useInvalidatePage } from "@compill/admin-api";
-function useQueryField(queryField, useNextRouter) {
-    if (useNextRouter) {
-        const router = useRouter();
-        return router.query[queryField];
-    }
-    const { [queryField]: id } = useParams();
-    return id;
-}
-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>);
-}
-function Internal({ item, screen, api, processInput, tabbed, containerRef }) {
-    const pScreen = runIfFn(screen, item);
-    const { breadcrumbs, schema, initialValues, header, sections, buttonBar, type, invalidateParentQueryKey, invalidatePage } = pScreen;
-    const mutation = useInvalidateParentMutation((api.update), invalidateParentQueryKey ?? api.queryKey, { networkMode: "always" });
-    const invalidatePageFn = useInvalidatePage(invalidatePage || "");
-    const save = useMutate(mutation, {
-        processInput,
-        successMsg: (item, values) => `${item.title || item.name} updated.`,
-        errorMsg: (error, item) => `Error updating ${item.title || item.name}: ${error}`,
-        onSuccess: () => {
-            if (invalidatePage)
-                invalidatePageFn();
-        }
-    });
-    let editorMaxW = undefined;
-    if (!type || type == "post")
-        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>);
-}
-function Section({ section, item, cardStyle }) {
-    if (section.type === "section") {
-        const style = cardStyle ?
-            {
-                bgColor: "white",
-                rounded: "lg",
-                p: "5",
-                textSize: "sm",
-                shadow: true
-            } : {};
-        return (<PageSidebarSection title={section.title} {...style}>
-                <FormRenderer form={runIfFn(section.form, item)}/>
-            </PageSidebarSection>);
-    }
-    if (section.type === "custom")
-        return runIfFn(section.component, item);
-    return null;
-}

package/dist/lib/json/EditItemView.jsx

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

package/dist/lib/json/ScreenRenderer.jsx

@@ -1,18 +0,0 @@
-import { DetailsView } from "./DetailsView";
-import { QueryWrapper } from "./QueryWrapper";
-import { TabbedView } from "./TabbedView";
-import { TableView } from "./table/TableView";
-import { MultiQueryWrapper } from "./MultiQueryWrapper";
-export function ScreenRenderer({ config, tabbed, ...props }) {
-    if (config.type === "table")
-        return <TableView {...config} {...props}/>;
-    if (config.type === "tabbed")
-        return <TabbedView {...config} {...props}/>;
-    if (config.type === "details")
-        return <DetailsView {...config} tabbed={tabbed} {...props}/>;
-    if (config.type === "query")
-        return <QueryWrapper {...config} tabbed={tabbed} {...props}/>;
-    if (config.type === "multiQuery")
-        return <MultiQueryWrapper {...config} tabbed={tabbed} {...props}/>;
-    return <></>;
-}

package/dist/lib/json/ScreenTopBar.jsx

@@ -1,39 +0,0 @@
-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 (<>
-            {tabbed &&
-            (<PageTopBarToolbar trackingRef={trackingRef}>
-                        <Buttons api={api} item={item} isLoading={isLoading} buttonBar={buttonBar}/>
-                    </PageTopBarToolbar>)}
-
-            {!tabbed &&
-            (<PageTopBar breadcrumbs={breadcrumbs}>
-                        <Buttons api={api} item={item} isLoading={isLoading} buttonBar={buttonBar}/>
-                    </PageTopBar>)}
-        </>);
-}
-function Buttons({ api, item, isLoading, buttonBar }) {
-    return (<>
-            {buttonBar && buttonBar.length > 0 &&
-            (<ButtonBar>
-                        {buttonBar.map((button, index) => (<React.Fragment key={index}>
-                                    {button.type === "link" && <ViewButton label={button.label} path={button.path} icon={button.icon}/>}
-                                    {button.type === "invalidate" && <InvalidateButton pathOrPermalink={button.pathOrPermalink}/>}
-                                    {button.type == "custom" && button.render(item)}
-                                </React.Fragment>))}
-                    </ButtonBar>)}
-
-            <ButtonBar>
-                {api instanceof API && <PublishButton api={api} queryId={item.id} status={item.status} disabled={isLoading}/>}
-
-                <UpdateButton disabled={isLoading}/>
-            </ButtonBar>
-        </>);
-}

package/dist/lib/json/TabbedView.jsx

@@ -1,28 +0,0 @@
-import { useParams } from "react-router-dom";
-import { PageQueryStateContainer } from "../page/PageQueryStateContainer";
-import { PageTabbedTopBar, PageTabbedTopBarProvider } from "../page/PageTopBar";
-import { TabContainer } from "@compill/components";
-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) => {
-            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>);
-}
-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"/>;
-}

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

@@ -1,13 +0,0 @@
-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 <ItemEditDialog {...props} queryId={queryId} invalidateQueryKey={invalidateQueryKey} show onClose={onClose}/>;
-    if (config.type === "query")
-        return <QueryWrapperDialog {...props} queryId={queryId} invalidateQueryKey={invalidateQueryKey} onClose={onClose}/>;
-    if (config.type === "multiQuery")
-        return <MultiQueryWrapperDialog {...props} queryId={queryId} invalidateQueryKey={invalidateQueryKey} onClose={onClose}/>;
-    return null;
-}

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

@@ -1,36 +0,0 @@
-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 (<Modal size={size} show={show} onClose={onClose} scheme="danger" variant="glass" transition 
-    // closeOnMaskClick={false}
-    {...props}>
-            <Modal.Header>
-                {title || `Delete ${itemLabel}`}
-            </Modal.Header>
-
-
-            <Modal.Body pb="6">
-                {!msg && `Do you really want to delete ${itemLabel}?`}
-                {msg && runIfFn(msg, itemLabel)}
-            </Modal.Body>
-
-            <Modal.Footer dflex placeContent="end" spaceX="3">
-                <Button disabled={mutation.isPending} onClick={onClose} variant="borderless" scheme="dark" me="2">
-                    {closeActionButtonLabel}
-                </Button>
-                <Button scheme="danger" disabled={mutation.isPending} onClick={handleDelete}>
-                    {actionButtonLabel || "Delete"}
-                </Button>
-            </Modal.Footer>
-
-            {mutation.isPending && <ModalLoadingOverlay />}
-        </Modal>);
-}

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

@@ -1,124 +0,0 @@
-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 (<Modal size={size} show={show} onClose={onClose} scheme="light" transition 
-    // closeOnMaskClick={false}
-    {...props}>
-            <Modal.Header>
-                {!isInitialLoading && queryId && `Edit ${title ? title(data) : data?.["name"] ?? data?.["title"] ?? data?.["name"] ?? ""}`}
-
-                {!queryId && `Create new ${itemLabel ?? "item"}`}
-
-                {Array.isArray(form) && (<></>
-        // <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>
-        )}
-                {/* <ModalCloseButton /> */}
-            </Modal.Header>
-
-            {isInitialLoading && (<Modal.Body>
-                    <QueryLoadingState minW="72"/>
-                </Modal.Body>)}
-
-            {isError && (<Modal.Body>
-                    <RetryOnError label={`${fetchErrorMsg} ${error}`} onClick={retry}/>
-                </Modal.Body>)}
-
-            {!isInitialLoading && !isError &&
-            (<>
-                        <Formik 
-            // initialValues={fetchToFormData && queryId && data ? fetchToFormData(nonNullValues(data)) : nonNullValues(data) ?? initialValues(data) ?? {}}
-            initialValues={fetchToFormData && queryId && data ? fetchToFormData(nonNullValues(data)) : nonNullValues(initialValues(data)) ?? {}} onSubmit={saveItem} {...formikProps}>
-                            {({ setFieldValue, dirty, handleSubmit, isValid, values }) => (<>
-                                    <Modal.Body pb="6">
-                                        <Form>
-                                            {React.isValidElement(form) && form}
-
-                                            {Array.isArray(form) && <FormRenderer form={form}/>}
-                                            {isFunction(form) && <FormRenderer form={form(data ?? values)}/>}
-                                            {/* {Array.isArray(form) && form.map(item =>
-                        <div key={item.key} className={clsx("tab-pane fade", showTab && "show", activeTab === item.key && "active")}>
-                            {item.form}
-                        </div>
-                    )} */}
-                                        </Form>
-                                    </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={!dirty || mutation.isLoading /* || !isValid*/} onClick={() => handleSubmit()}>
-                                            {saveLabel ? saveLabel : (queryId ? "Update" : "Create")}
-                                        </Button>
-                                    </Modal.Footer>
-                                </>)}
-                        </Formik>
-                    </>)}
-
-            {mutation.isLoading && <ModalLoadingOverlay />}
-        </Modal>);
-}