@compill/admin 1.0.101 → 1.0.103

package/dist/index.js

@@ -0,0 +1,50 @@
+export * from "./lib/SectionTitle";
+export * from "./lib/breadcrumbs/BreadCrumbs";
+export * from "./lib/buttons/DialogButton";
+export * from "./lib/buttons/InvalidateButton";
+export * from "./lib/buttons/NavigateButton";
+export * from "./lib/buttons/PublishButton";
+export * from "./lib/buttons/UpdateButton";
+export * from "./lib/buttons/ViewButton";
+export * from "./lib/cells/OrderCell";
+export * from "./lib/json/ScreenRenderer";
+export * from "./lib/json/dialog/ItemEditDialog";
+export * from "./lib/json/dialog/ItemDeleteDialog";
+export * from "./lib/json/types/DetailsView";
+export * from "./lib/json/types/EditItemDialog";
+export * from "./lib/json/types/MultiQueryWrapper";
+export * from "./lib/json/types/QueryWrapper";
+export * from "./lib/json/types/QueryWrapperDialog";
+export * from "./lib/json/types/ScreenConfig";
+export * from "./lib/json/types/TabbedView";
+export * from "./lib/json/types/TableView";
+export * from "./lib/layout/AdminLayout";
+export * from "./lib/layout/ButtonBar";
+export * from "./lib/layout/menu/Menu";
+export * from "./lib/layout/menu/MenuConfig";
+export * from "./lib/modal/AttachDialog";
+export * from "./lib/modal/FormActionDialog";
+export * from "./lib/page/PageContainer";
+export * from "./lib/page/PageContentEditor";
+export * from "./lib/page/PageMain";
+export * from "./lib/page/PageQueryStateContainer";
+export * from "./lib/page/PageSectionTitle";
+export * from "./lib/page/PageSidebar";
+export * from "./lib/page/PageSidebarSection";
+export * from "./lib/page/PageStateContainer";
+export * from "./lib/page/PageSubSectionTitle";
+export * from "./lib/page/PageTitle";
+export * from "./lib/page/PageTopBar";
+export * from "./lib/status/StatusBadge";
+export * from "./lib/table/TableContainer";
+export * from "./lib/table/TableCreateButton";
+export * from "./lib/table/TableFilterButton";
+export * from "./lib/table/TableRowActionBar";
+export * from "./lib/table/TableRowActionButton";
+export * from "./lib/table/TableRowActionDialogButton";
+export * from "./lib/table/TableRowDeleteButton";
+export * from "./lib/table/TableRowEditButton";
+export * from "./lib/table/TableRowNavigateButton";
+export * from "./lib/table/TableRowPublishPostButton";
+export * from "./lib/table/TableRowViewButton";
+export * from "./lib/table/TableTopBar";

package/{src → dist}/lib/SectionTitle.d.ts

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

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/{src → dist}/lib/breadcrumbs/BreadCrumbs.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SoperioComponent } from "@soperio/react";
 export interface Breadcrumb {
     label: string;

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.js

@@ -0,0 +1,15 @@
+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 }) {
+    const [showDialog, setShowDialog] = React.useState(false);
+    const onShowDialog = React.useCallback((event) => {
+        event?.preventDefault();
+        event?.stopPropagation();
+        setShowDialog(true);
+    }, [setShowDialog]);
+    const onCloseDialog = React.useCallback(() => {
+        setShowDialog(false);
+    }, [setShowDialog]);
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: onShowDialog, ...props }), showDialog && buildDialog(onCloseDialog)] }));
+}

package/{src → dist}/lib/buttons/InvalidateButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ButtonBarButtonProps } from "../layout/ButtonBar";
 interface InvalidateButtonProps extends ButtonBarButtonProps {
     pathOrPermalink: string;

package/dist/lib/buttons/InvalidateButton.js

@@ -0,0 +1,11 @@
+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";
+import { ButtonBarButton } from "../layout/ButtonBar";
+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 (_jsx(ButtonBarButton, { title: "Regenerate", disabled: mutation.isLoading, onClick: invalidate, icon: mdiDatabaseRefreshOutline, ...props }));
+}

package/{src → dist}/lib/buttons/NavigateButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ButtonProps } from "@valerya/ui";
 export declare function NavigateButton({ path, ...props }: {
     path: string;

package/dist/lib/buttons/NavigateButton.js

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

package/{src → dist}/lib/buttons/PublishButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { API } from "@compill/admin-api";
 import { ButtonProps } from "@valerya/ui";
 interface PublishButtonProps extends ButtonProps {

package/dist/lib/buttons/PublishButton.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
+import { useInvalidateMutation } from "@compill/api";
+import { mdiEye, mdiEyeOff } from "@mdi/js";
+import React from "react";
+import { toast } from "react-toastify";
+import { ButtonBarButton } from "../layout/ButtonBar";
+export function PublishButton({ status, queryId, api, ...props }) {
+    const isDraft = status == "draft";
+    const mutation = useInvalidateMutation(isDraft ? api.publish : api.unpublish, api.queryKey, queryId, { networkMode: "always" });
+    const publish = React.useCallback(() => {
+        mutation.reset();
+        mutation.mutateAsync(queryId)
+            .then(() => toast.success(isDraft ? "Published!" : "Unpublished!"))
+            .catch(error => toast.error(`Error: ${error}`));
+    }, [mutation, queryId]);
+    return (_jsx(ButtonBarButton, { disabled: mutation.isLoading, onClick: publish, icon: isDraft ? mdiEye : mdiEyeOff, ...props, children: isDraft ? "Publish" : "Switch to draft" }));
+}

package/{src → dist}/lib/buttons/UpdateButton.d.ts

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

package/dist/lib/buttons/UpdateButton.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
+import { mdiCloudUpload } from "@mdi/js";
+import { useFormikContext } from "formik";
+import { useHotkeys } from "react-hotkeys-hook";
+import { ButtonBarSubmitButton } from "../layout/ButtonBar";
+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 (_jsx(ButtonBarSubmitButton, { icon: mdiCloudUpload, ...props, children: "Update" }));
+}

package/{src → dist}/lib/buttons/ViewButton.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import { ButtonBarButtonProps } from "@compill/admin";
+import { ButtonBarButtonProps } from "../layout/ButtonBar";
 export declare function ViewButton({ label, path, icon, ...props }: ButtonBarButtonProps & {
     label?: string;
     path: string;

package/dist/lib/buttons/ViewButton.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
+import { mdiOpenInNew } from "@mdi/js";
+import React from "react";
+import { ButtonBarButton } from "../layout/ButtonBar";
+export function ViewButton({ label, path, icon, ...props }) {
+    const openPage = React.useCallback(() => {
+        window.open(path, '_blank');
+    }, [path]);
+    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/{src → dist}/lib/cells/OrderCell.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface OrderApi {
     moveUp: (id: string) => Promise<any>;
     moveDown: (id: string) => Promise<any>;

package/dist/lib/cells/OrderCell.js

@@ -0,0 +1,26 @@
+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";
+import { Button, Icon } from "@valerya/ui";
+import React from "react";
+import { toast } from "react-toastify";
+export function OrderCell({ api, postId, order }) {
+    const mutationDown = useInvalidateMutation(api.moveDown, api.queryKey);
+    const mutationUp = useInvalidateMutation(api.moveUp, api.queryKey);
+    const moveDown = React.useCallback((e) => {
+        e.stopPropagation();
+        mutationDown.mutateAsync(postId)
+            .catch(error => {
+            toast.error(`Error: ${error}`);
+        });
+    }, [mutationDown, postId]);
+    const moveUp = React.useCallback((e) => {
+        e.stopPropagation();
+        mutationUp.mutateAsync(postId)
+            .catch(error => {
+            toast.error(`Error: ${error}`);
+        });
+    }, [mutationUp, postId]);
+    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/{src → dist}/lib/json/DetailsView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SoperioComponent } from "@soperio/react";
 import { DetailsViewConfig } from "./types/DetailsView";
 export declare function DetailsView({ queryField, api, useNextRouter, processInput, screen, tabbed, ...props }: DetailsViewConfig & {

package/dist/lib/json/DetailsView.js

@@ -0,0 +1,69 @@
+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";
+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 (_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);
+    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 (_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") {
+        const style = cardStyle ?
+            {
+                bgColor: "white",
+                rounded: "lg",
+                p: "5",
+                textSize: "sm",
+                shadow: true
+            } : {};
+        return (_jsx(PageSidebarSection, { title: section.title, ...style, children: _jsx(FormRenderer, { form: runIfFn(section.form, item) }) }));
+    }
+    if (section.type === "custom")
+        return runIfFn(section.component, item);
+    return null;
+}

package/{src → dist}/lib/json/EditItemView.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { ItemEditDialogProps } from "./dialog/ItemEditDialog";
 export declare function EditItemView({ initialValues, ...props }: Omit<ItemEditDialogProps, "show">): JSX.Element;

package/dist/lib/json/EditItemView.js

@@ -0,0 +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 (_jsx(ItemEditDialog, { ...props, initialValues: runIfFn(initialValues, null), show: true }));
+}

package/{src → dist}/lib/json/MultiQueryWrapper.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { MultiQueryWrapperConfig } from "./types/MultiQueryWrapper";
 import { SoperioComponent } from "@soperio/react";
 export declare function MultiQueryWrapper({ queries, config, tabbed, ...props }: Omit<MultiQueryWrapperConfig, "type"> & {

package/dist/lib/json/MultiQueryWrapper.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
+import { useApiQueries } from "@compill/api";
+import { useQueryClient } from "@tanstack/react-query";
+import React from "react";
+import { useParams } from "react-router-dom";
+import { ScreenRenderer } from "./ScreenRenderer";
+import { isFunction, runIfFn } from "@soperio/react";
+import { QueryLoadingState, RetryOnError } from "@compill/components";
+function useQueries(queries) {
+    const params = useParams();
+    const { data, isFetching, isError } = useApiQueries(queries.map(q => {
+        if (!q.queryField) {
+            const api = runIfFn(q.api);
+            return {
+                queryKey: api.queryKey,
+                queryFn: q.fn == "get" ? api.get : api.getAll,
+                queryParam: q.params
+            };
+        }
+        const id = params[q.queryField];
+        const api = runIfFn(q.api, id);
+        return {
+            queryKey: api.queryKey,
+            queryFn: q.fn == "get" ? api.get : api.getAll,
+            queryParam: q.fn == "getAll" ? q.params : isFunction(q.api) ? undefined : id
+        };
+    }));
+    let transformedData = undefined;
+    if (!isFetching && !isError) {
+        transformedData = data?.map((d, index) => queries[index].transformFn ? queries[index].transformFn?.(d) : d);
+    }
+    return { data: transformedData, isFetching, isError };
+}
+function useInvalidate(queries) {
+    const queryClient = useQueryClient();
+    const params = useParams();
+    const invalidate = React.useCallback(() => {
+        const queryKeys = [];
+        queries.forEach(q => {
+            if (!q.queryField || !isFunction(q.api)) {
+                queryKeys.push(q.api.queryKey);
+            }
+            else {
+                const id = params[q.queryField];
+                const api = runIfFn(q.api, id);
+                queryKeys.push(api.queryKey);
+            }
+        });
+        queryClient.invalidateQueries({ predicate: (query) => queryKeys.includes(query.queryKey), });
+    }, [queries, queryClient, params]);
+    return invalidate;
+}
+export function MultiQueryWrapper({ queries, config, tabbed, ...props }) {
+    const { data, isFetching, isError } = useQueries(queries);
+    const invalidate = useInvalidate(queries);
+    if (isFetching)
+        return _jsx(QueryLoadingState, { w: "full", h: "100vh" });
+    if (isError || !data)
+        return _jsx(RetryOnError, { p: "0", w: "full", h: "100vh", onClick: invalidate });
+    return _jsx(ScreenRenderer, { config: config(...data), tabbed: tabbed, ...props });
+}

package/{src → dist}/lib/json/QueryWrapper.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { QueryWrapperConfig } from "./types/QueryWrapper";
 import { SoperioComponent } from "@soperio/react";
 import { CRUD_MODEL } from "@compill/api";

package/dist/lib/json/QueryWrapper.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
+import React from "react";
+import { ScreenRenderer } from "./ScreenRenderer";
+import { isFunction, runIfFn } from "@soperio/react";
+import { useParams } from "react-router-dom";
+import { useApiQuery } from "@compill/api";
+function useApi(api, queryField) {
+    const params = useParams();
+    if (queryField === undefined)
+        return { id: undefined, api: api };
+    const { [queryField]: id } = params;
+    return { id, api: runIfFn(api, id) };
+}
+export function QueryWrapper({ api, queryField, fn, transformFn, config, tabbed, ...props }) {
+    const { id, api: mApi } = useApi(api, queryField);
+    const { data } = useApiQuery(mApi.queryKey, fn === "get" || fn === "getTransformed" ? mApi.get : mApi.getAll, isFunction(api) ? undefined : id);
+    const transformedData = React.useMemo(() => {
+        if (data && (fn === "getTransformed" || fn === "getAllTransformed")) {
+            if (!transformFn)
+                console.warn(`QueryWrapperDialog: you forgot to pass transformFn as parameter for fn ${fn}`);
+            return transformFn?.(data);
+        }
+        return data;
+    }, [data]);
+    // TODO states
+    if (!data)
+        return null;
+    return _jsx(ScreenRenderer, { config: config(transformedData), tabbed: tabbed, ...props });
+}

package/{src → dist}/lib/json/ScreenRenderer.d.ts

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

package/dist/lib/json/ScreenRenderer.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, Fragment as _Fragment } from "@soperio/jsx-runtime";
+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 _jsx(TableView, { ...config, ...props });
+    if (config.type === "tabbed")
+        return _jsx(TabbedView, { ...config, ...props });
+    if (config.type === "details")
+        return _jsx(DetailsView, { ...config, tabbed: tabbed, ...props });
+    if (config.type === "query")
+        return _jsx(QueryWrapper, { ...config, tabbed: tabbed, ...props });
+    if (config.type === "multiQuery")
+        return _jsx(MultiQueryWrapper, { ...config, tabbed: tabbed, ...props });
+    return _jsx(_Fragment, {});
+}

package/{src → dist}/lib/json/ScreenTopBar.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { API } from "@compill/admin-api";
 import { Breadcrumb } from "../breadcrumbs/BreadCrumbs";
 import { DetailViewButton } from "./types/DetailsView";

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/{src → dist}/lib/json/TabbedView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TabbedViewConfig } from "./types/TabbedView";
 import { SoperioComponent } from "@soperio/react";
 export declare function TabbedView({ queryField, api, screen, ...props }: TabbedViewConfig & SoperioComponent): JSX.Element;

package/dist/lib/json/TabbedView.js

@@ -0,0 +1,21 @@
+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";
+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 (_jsx(PageQueryStateContainer, { queryId: id, api: api, apiFn: "get", p: "5", children: (city) => {
+            const { breadcrumbs, tabs } = runIfFn(screen, city);
+            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 _jsx(ScreenRenderer, { config: tab.config, tabbed: true, p: "0" });
+}

package/{src → dist}/lib/json/buttons/ActionButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { MutationQueryFn, MutationQueryKey } from "@compill/api";
 import { ButtonProps } from "@valerya/ui";
 interface ActionButtonProps {

package/dist/lib/json/buttons/ActionButton.js

@@ -0,0 +1,11 @@
+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 }) {
+    const mutation = invalidateParent ? useInvalidateParentMutation(queryFn, queryKey) : useApiMutation(queryFn, queryKey);
+    const mutate = useMutate(mutation, {
+        successMsg,
+        errorMsg
+    });
+    return (_jsxs(Button, { display: "flex", alignItems: "center", gap: "3", ...buttonProps, onClick: mutate, disabled: mutation.isLoading, children: [icon && _jsx(Icon, { path: icon }), label] }));
+}

package/{src → dist}/lib/json/buttons/ConfirmationActionButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { MutationQueryFn, MutationQueryKey } from "@compill/api";
 import { ButtonProps, ModalProps } from "@valerya/ui";
 interface ConfirmationActionButtonProps {

package/dist/lib/json/buttons/ConfirmationActionButton.js

@@ -0,0 +1,20 @@
+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";
+export function ConfirmationActionButton({ label, buttonProps, icon, queryKey, queryFn, successMsg, errorMsg, invalidateParent }) {
+    const mutation = invalidateParent ? useInvalidateParentMutation(queryFn, queryKey) : useApiMutation(queryFn, queryKey);
+    const mutate = useMutate(mutation, {
+        successMsg,
+        errorMsg
+    });
+    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);
+    const mutate = useMutate(mutation, {
+        successMsg,
+        errorMsg
+    });
+    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/{src → dist}/lib/json/dialog/DialogRenderer.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { EditItemDialogConfig } from "../types/EditItemDialog";
 import { QueryWrapperDialogConfig } from "../types/QueryWrapperDialog";
 import { MultiQueryWrapperDialogConfig } from "../types/MultiQueryWrapperDialog";

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, {})] }));
+}