@compill/admin 1.0.101 → 1.0.103

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

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

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { MultiQueryWrapperDialogConfig } from "../types/MultiQueryWrapperDialog";
 export type MultiQueryWrapperDialogProps = Omit<MultiQueryWrapperDialogConfig, "type"> & {
     queryId?: string;

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

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
+import { useApiQueries } from "@compill/api";
+import React from "react";
+import { ItemEditDialog } from "./ItemEditDialog";
+export function MultiQueryWrapperDialog({ queries, config, onClose, queryId, invalidateQueryKey }) {
+    const { data, isFetching, isError } = useApiQueries(queries.map(q => ({
+        queryKey: q.api.queryKey,
+        queryFn: q.fn == "get" ? q.api.get : q.api.getAll,
+        queryOptions: {
+            cacheTime: q.cache === false ? 0 : undefined,
+            staleTime: q.cache === false ? 0 : undefined
+        }
+    })));
+    const transformedData = React.useMemo(() => {
+        return data?.map((d, index) => queries[index]?.transformFn ? queries[index]?.transformFn?.(d) : d);
+    }, [data, queries]);
+    // TODO This is not really good
+    // So instead, add a isPreloading and isPreloadingError to ItemEditDialog to handle the cases
+    // if (isFetching)
+    //     return null
+    // @ts-ignore
+    return _jsx(ItemEditDialog, { isPreloading: isFetching, ...config(...transformedData), queryId: queryId, invalidateQueryKey: invalidateQueryKey, show: true, onClose: onClose });
+}

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

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

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
+import { useApiQuery } from "@compill/api";
+import React from "react";
+import { ItemEditDialog } from "./ItemEditDialog";
+export function QueryWrapperDialog({ api, fn, transformFn, config, onClose, queryId, invalidateQueryKey }) {
+    const { data, isFetching } = useApiQuery(api.queryKey, fn === "get" || fn === "getTransformed" ? api.get : api.getAll, undefined, { retryOnMount: false, refetchOnMount: false, refetchOnWindowFocus: false });
+    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}`);
+            // @ts-ignore
+            return transformFn?.(data);
+        }
+        return data;
+    }, [data, fn, transformFn]);
+    if (isFetching)
+        return null;
+    // @ts-ignore
+    return _jsx(ItemEditDialog, { ...config(transformedData), queryId: queryId, invalidateQueryKey: invalidateQueryKey, show: true, onClose: onClose });
+}

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare function RefreshButton({ queryKey }: {
     queryKey: string[];
 }): JSX.Element;

package/dist/lib/json/table/RefreshButton.js

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

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TableRowAction } from "../types/TableView";
 import { API } from "@compill/admin-api";
 interface TableRowActionViewProps {

package/dist/lib/json/table/TableRowActionsView.js

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

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ButtonProps } from "@valerya/ui";
 import { API } from "@compill/admin-api";
 export declare function TableRowPublishPostButton({ id, api, status, invalidateQueryKey, ...props }: {

package/dist/lib/json/table/TableRowPublishPostButton.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
+import { Icon } from "@valerya/ui";
+import { mdiPublish, mdiPublishOff } from "@mdi/js";
+import { Button } from "@valerya/ui";
+import React from "react";
+import { useInvalidateParentMutation } from "@compill/api";
+import { toast } from "react-toastify";
+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" });
+    const publish = React.useCallback((event) => {
+        event?.preventDefault();
+        event?.stopPropagation();
+        mutation.reset();
+        mutation.mutateAsync(id)
+            .then(() => toast.success(isDraft ? "Published!" : "Unpublished!"))
+            .catch(error => toast.error(`Error: ${error}`));
+    }, [mutation, id]);
+    return (_jsx(Button, { variant: "borderless", corners: "square", scheme: "dark", onClick: publish, ...props, children: _jsx(Icon, { path: isDraft ? mdiPublish : mdiPublishOff, size: "sm" }) }));
+}

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SoperioComponent } from "@soperio/react";
 import { TableViewConfig } from "../types/TableView";
 export declare function TableView({ queryField, title, subtitle, screen, ...props }: Omit<TableViewConfig, "type"> & SoperioComponent): JSX.Element;

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

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@soperio/jsx-runtime";
+import { Table, useTableContext } from "@compill/table";
+import { isFunction, runIfFn } from "@soperio/react";
+import React from "react";
+import { useParams } from "react-router-dom";
+import { InvalidateButton } from "../../buttons/InvalidateButton";
+import { PageContainer } from "../../page/PageContainer";
+import { TableContainer } from "../../table/TableContainer";
+import { TableCreateButton } from "../../table/TableCreateButton";
+import { TableFilterButton } from "../../table/TableFilterButton";
+import { TableTopBar } from "../../table/TableTopBar";
+import { ButtonBar } from "../../layout/ButtonBar";
+import { TableFilters } from "../../table/TableFilters";
+import { TableMassActions } from "../../table/TableMassActions";
+import { DialogRenderer } from "../dialog/DialogRenderer";
+import { RefreshButton } from "./RefreshButton";
+import { TableViewProvider, useTableViewContext } from "./TableViewContext";
+import { useTableProps } from "./useTableProps";
+function useId(queryField) {
+    const params = useParams();
+    if (queryField === undefined)
+        return undefined;
+    const { [queryField]: id } = params;
+    return id;
+}
+export function TableView({ queryField, title, subtitle, screen, ...props }) {
+    const id = useId(queryField);
+    const _screen = runIfFn(screen, id);
+    return (_jsx(PageContainer, { bgColor: "white", ...props, children: _jsx(TableContainer, { columns: _screen.table.columns, initialVisibleColumns: _screen.table.initialVisibleColumns, filtersMethod: _screen.table.filtersMethod, children: _jsx(TT, { id: id, title: title, subtitle: subtitle, screen: _screen }) }) }));
+}
+function TT({ id, title, subtitle, screen }) {
+    const { setRowSelection } = useTableContext();
+    const { api, table, filters, massActions, buttonBar, rowActions, createView, editView, deleteItem, breadcrumbs } = screen;
+    const tableApi = runIfFn(api, id ?? "");
+    return (_jsxs(_Fragment, { children: [_jsx(TableTopBar, { title: title, breadcrumbs: breadcrumbs, children: _jsx(TableButtonBar, { buttonBar: buttonBar, createView: createView, editView: editView, api: tableApi, queryKey: tableApi.queryKey, children: filters && _jsx(TableFilterButton, {}) }) }), filters &&
+                (_jsx(TableFilters, { form: filters.form, initialValues: filters.initialValues, schema: filters.schema, processInput: filters.processInput })), massActions && _jsx(TableMassActions, { actions: massActions.items }), _jsxs(TableViewProvider, { queryKey: tableApi.queryKey, editView: editView, deleteItem: deleteItem, children: [_jsx(TableWrapper, { table: { ...table, onSelectionChange: setRowSelection }, rowActions: rowActions, api: tableApi, subtitle: subtitle, queryParams: screen.queryParams }), _jsx(TableDialogManager, {})] })] }));
+}
+function TableButtonBar({ buttonBar, queryKey, createView, editView, api, children }) {
+    const createDialogFn = React.useCallback((data) => {
+        return (onClose) => {
+            const view = runIfFn(createView, data) ?? runIfFn(editView, null);
+            if (view.type == "customDialog")
+                return view.render({ show: true, onClose });
+            else
+                return _jsx(DialogRenderer, { config: view, onClose: onClose, invalidateQueryKey: api.queryKey });
+        };
+    }, [createView, editView, api]);
+    return (_jsxs(ButtonBar, { children: [_jsx(RefreshButton, { queryKey: queryKey }), buttonBar && buttonBar.map((button, index) => _jsxs(React.Fragment, { children: [button.type === "create" && editView &&
+                        (_jsx(TableCreateButton, { buildDialog: createDialogFn(button.data), icon: button.icon, children: button.label })), button.type === "invalidate" && _jsx(InvalidateButton, { pathOrPermalink: button.pathOrPermalink }), button.type === "custom" && button.render()] }, index)), children] }));
+}
+function TableWrapper({ table, subtitle, rowActions, api, queryParams }) {
+    const tableProps = useTableProps(api, table, rowActions, queryParams);
+    const _subtitle = React.useMemo(() => {
+        if (!subtitle)
+            return undefined;
+        return (data) => {
+            return (_jsx("div", { textSize: "lg", textColor: "#475569", fontWeight: "600", children: isFunction(subtitle) ? subtitle(data) : subtitle }));
+        };
+    }, [subtitle]);
+    return _jsx(Table, { ...tableProps, p: "8", title: _subtitle });
+}
+function TableDialogManager() {
+    const { dialog } = useTableViewContext();
+    return dialog;
+}

package/dist/lib/json/table/TableViewContext.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
+import { useOpenLink } from "@compill/hooks";
+import { createContext, runIfFn } from "@soperio/react";
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import { DialogRenderer } from "../dialog/DialogRenderer";
+import { ItemDeleteDialog } from "../dialog/ItemDeleteDialog";
+import { AppEnv } from "@compill/env";
+const [provider, useContext] = createContext();
+function TableViewProvider({ editView, deleteItem, queryKey, children }) {
+    const openLink = useOpenLink();
+    const navigate = useNavigate();
+    const [dialog, setDialog] = React.useState(null);
+    const onCloseDialog = React.useCallback(() => setDialog(null), [setDialog]);
+    const onAction = React.useCallback((action, item) => {
+        switch (action.type) {
+            case "view":
+                {
+                    navigate(runIfFn(action.path, item));
+                    break;
+                }
+            case "link":
+                {
+                    openLink(`${AppEnv.websiteUrl()}/${runIfFn(action.path, item)}`);
+                    break;
+                }
+            case "edit":
+                {
+                    const editConfig = runIfFn(editView, item);
+                    if (editConfig) {
+                        if (editConfig.type == "customDialog") {
+                            setDialog(editConfig.render({ show: true, onClose: onCloseDialog }));
+                        }
+                        else {
+                            setDialog(_jsx(DialogRenderer, { onClose: onCloseDialog, config: editConfig, queryId: item.id, invalidateQueryKey: queryKey }));
+                        }
+                    }
+                    break;
+                }
+            case "delete":
+                {
+                    const deleteConfig = runIfFn(deleteItem, item);
+                    setDialog(_jsx(ItemDeleteDialog, { show: true, onClose: onCloseDialog, queryId: item.id, invalidateQueryKey: queryKey, msg: item.msg, ...deleteConfig, itemLabel: runIfFn(deleteConfig.itemLabel, item) }));
+                    // TODO
+                    // const { initialValues, ...props } = editItem!!
+                    // setDialog(<ItemEditDialog {...props} initialValues={runIfFn(initialValues, item)} show queryId={item?.id} onClose={onCloseDialog} />)
+                    break;
+                }
+        }
+    }, [navigate, editView, deleteItem]);
+    const Provider = provider;
+    const value = {
+        dialog,
+        onAction
+    };
+    return _jsx(Provider, { value: value, children: children });
+}
+export { TableViewProvider, useContext as useTableViewContext };

package/dist/lib/json/table/useTableProps.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
+import { useOpenLink } from "@compill/hooks";
+import { runIfFn } from "@soperio/react";
+import { createColumnHelper } from "@tanstack/react-table";
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import { TableRowActionsView } from "./TableRowActionsView";
+import { useTableViewContext } from "./TableViewContext";
+import { useRouter } from "next/router";
+import { AppEnv } from "@compill/env";
+export function useTableProps(api, table, rowActions, queryParams) {
+    const navigate = useNavigate();
+    const nextRouter = useRouter();
+    const openLink = useOpenLink();
+    const { onAction } = useTableViewContext();
+    const { onRowClick, columns: c, ...props } = table;
+    const onRowClickHandler = React.useCallback((item) => {
+        const config = runIfFn(onRowClick, item);
+        if (config) {
+            switch (config.type) {
+                case "navigate":
+                    {
+                        navigate(runIfFn(config.path, item) ?? "");
+                        break;
+                    }
+                case "nextpush":
+                    {
+                        nextRouter.push(runIfFn(config.path, item));
+                        break;
+                    }
+                case "link":
+                    {
+                        openLink(`${AppEnv.websiteUrl()}/${runIfFn(config.path, item)}`);
+                        break;
+                    }
+            }
+        }
+    }, [navigate, onRowClick]);
+    const columns = React.useMemo(() => {
+        const columns = table.columns.concat([]);
+        if (rowActions) {
+            columns.push(createColumnHelper().display({
+                id: "actions",
+                header: "Actions",
+                cell: props => _jsx(TableRowActionsView, { row: props.row, onAction: onAction, rowActions: rowActions, api: api, queryKey: api.queryKey })
+            }));
+        }
+        return columns;
+    }, [table, onAction, rowActions, api]);
+    const tableProps = { ...props };
+    tableProps.columns = columns;
+    tableProps.onRowClick = onRowClickHandler;
+    tableProps.queryKey = api.queryKey;
+    tableProps.queryFilters = queryParams;
+    tableProps.queryFn = api.search;
+    return tableProps;
+}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { API } from "@compill/admin-api";
 import { FormRendererConfig } from "@compill/form";
 import { TableProps } from "@compill/table";

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

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

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

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

package/dist/lib/layout/AdminLayout.js

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

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

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

package/dist/lib/layout/ButtonBar.js

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

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

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

package/dist/lib/layout/Content.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
+import { Outlet } from "react-router-dom";
+/**
+ *
+ *
+ */
+export default function Content({ ...props }) {
+    return (_jsx("div", { w: "100%", h: "100%", overflowY: "auto", ...props, children: _jsx(Outlet, {}) }));
+}

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

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

package/dist/lib/layout/PageTitleBar.js

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

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

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

package/dist/lib/layout/Sidebar.js

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

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

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

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

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

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

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

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@soperio/jsx-runtime";
+import { Button, Icon } from "@valerya/ui";
+export function MenuButton({ depth, darkMode, icon, selected, children, ...props }) {
+    return (_jsxs(Button, { as: "li", minH: "8", ms: `${(depth ?? 0) * 2}`, p: "2", font: "title", textColor: darkMode ? "white" : "black", fontWeight: "600", rounded: "lg", textSize: "sm", variant: "borderless", hover_bgColor: darkMode ? "white" : "black", hover_bgOpacity: "10", hover_textColor: darkMode ? "white" : "zinc-800", cursor: "pointer", dflex: true, alignItems: "center", gap: "3", ...props, children: [icon && _jsx(Icon, { path: icon, opacity: selected ? "100" : "60" }), children] }));
+}

package/dist/lib/layout/menu/MenuConfig.js

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