@compill/admin 1.0.100 → 1.0.102

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

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

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

@@ -0,0 +1,43 @@
+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/buttons/DialogButton.jsx

@@ -0,0 +1,17 @@
+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 (<>
+            <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.jsx

@@ -0,0 +1,10 @@
+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 (<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.jsx

@@ -0,0 +1,13 @@
+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 (<Button type="submit" scheme="dark" variant="glass" corners="pill" w="10" h="10" onClick={handleClick} {...props}>
+            <Icon path={mdiPost}/>
+        </Button>);
+}

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

@@ -0,0 +1,18 @@
+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 (<ButtonBarButton disabled={mutation.isLoading} onClick={publish} icon={isDraft ? mdiEye : mdiEyeOff} {...props}>
+            {isDraft ? "Publish" : "Switch to draft"}
+        </ButtonBarButton>);
+}

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

@@ -0,0 +1,12 @@
+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 (<ButtonBarSubmitButton icon={mdiCloudUpload} {...props}>
+            Update
+        </ButtonBarSubmitButton>);
+}

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

@@ -0,0 +1,14 @@
+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 (<ButtonBarButton onClick={openPage} dflex alignItems="center" gap="2" icon={icon || mdiOpenInNew} {...props}>
+            {label}
+        </ButtonBarButton>);
+    // 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.jsx

@@ -0,0 +1,35 @@
+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 (<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>);
+}

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

@@ -0,0 +1,96 @@
+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/{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.jsx

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

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

@@ -0,0 +1,60 @@
+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 <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}/>;
+}

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

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

@@ -0,0 +1,18 @@
+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/{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.jsx

@@ -0,0 +1,39 @@
+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/{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.jsx

@@ -0,0 +1,28 @@
+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/{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.jsx

@@ -0,0 +1,13 @@
+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 (<Button display="flex" alignItems="center" gap="3" {...buttonProps} onClick={mutate} disabled={mutation.isLoading}>
+            {icon && <Icon path={icon}/>}
+            {label}
+        </Button>);
+}

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 {