@compill/admin 1.0.72 → 1.0.74

package/index.cjs.js

@@ -8,15 +8,15 @@ var Link = require('next/link');
 var React = require('react');
 var adminApi = require('@compill/admin-api');
 var api = require('@compill/api');
+var formik = require('formik');
 var reactRouterDom = require('react-router-dom');
+var admin = require('@compill/admin');
 var reactToastify = require('react-toastify');
-var form = require('@compill/form');
-var formik = require('formik');
 require('react/jsx-runtime');
 var components = require('@compill/components');
+var form = require('@compill/form');
 var react = require('@soperio/react');
 var editor = require('@compill/editor');
-var admin = require('@compill/admin');
 var reactDom = require('react-dom');
 var router = require('next/router');
 var table = require('@compill/table');
@@ -205,6 +205,43 @@ const ButtonBarButton = /*#__PURE__*/React__default["default"].forwardRef(functi
     }), children]
   }));
 });
+const ButtonBarSubmitButton = /*#__PURE__*/React__default["default"].forwardRef(function (_a, ref) {
+  var _b;
+  var {
+      useDirty,
+      disabled,
+      icon,
+      children
+    } = _a,
+    props = __rest$1(_a, ["useDirty", "disabled", "icon", "children"]);
+  const {
+    dirty,
+    handleSubmit
+  } = (_b = formik.useFormikContext()) !== null && _b !== void 0 ? _b : {
+    dirty: false,
+    handleSubmit: undefined,
+    values: {}
+  };
+  const onSubmit = React__default["default"].useCallback(() => handleSubmit(), [handleSubmit]);
+  return jsxRuntime.jsxs(ui.Button, Object.assign({
+    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 && jsxRuntime.jsx(ui.Icon, {
+      path: icon
+    }), children]
+  }));
+});
 function ButtonBarDialogButton(_a) {
   var {
       icon,
@@ -285,20 +322,12 @@ function PublishButton(_a) {
     mutation.reset();
     mutation.mutateAsync(queryId).then(() => reactToastify.toast.success(isDraft ? "Published!" : "Unpublished!")).catch(error => reactToastify.toast.error(`Error: ${error}`));
   }, [mutation, queryId]);
-  return jsxRuntime.jsxs(ui.Button, Object.assign({
-    scheme: "secondary",
-    variant: "glass",
-    size: "sm",
-    px: "3",
+  return jsxRuntime.jsx(admin.ButtonBarButton, Object.assign({
     disabled: mutation.isLoading,
     onClick: publish,
-    dflex: true,
-    alignItems: "center",
-    gap: "3"
+    icon: isDraft ? mdiEye : mdiEyeOff
   }, props, {
-    children: [jsxRuntime.jsx(ui.Icon, {
-      path: isDraft ? mdiEye : mdiEyeOff
-    }), isDraft ? "Publish" : "Switch to draft"]
+    children: isDraft ? "Publish" : "Switch to draft"
   }));
 }
 
@@ -705,17 +734,10 @@ function UpdateButton(_a) {
   }, {
     preventDefault: true
   }, [dirty, props, handleSubmit]);
-  return jsxRuntime.jsxs(form.SubmitButton, Object.assign({
-    type: "submit",
-    size: "sm",
-    px: "3",
-    dflex: true,
-    alignItems: "center",
-    gap: "3"
+  return jsxRuntime.jsx(admin.ButtonBarSubmitButton, Object.assign({
+    icon: mdiCloudUpload
   }, props, {
-    children: [jsxRuntime.jsx(ui.Icon, {
-      path: mdiCloudUpload
-    }), "Update"]
+    children: "Update"
   }));
 }
 
@@ -938,12 +960,7 @@ function PageSidebarSection(_a) {
     } = _a,
     props = __rest$1(_a, ["title", "children"]);
   return jsxRuntime.jsxs("div", Object.assign({
-    w: "full",
-    bgColor: "white",
-    rounded: "lg",
-    p: "5",
-    textSize: "sm",
-    shadow: true
+    w: "full"
   }, props, {
     children: [title && jsxRuntime.jsx(admin.PageSectionTitle, {
       children: title
@@ -1124,13 +1141,15 @@ function Buttons$1({
       }), button.type === "invalidate" && jsxRuntime.jsx(InvalidateButton, {
         pathOrPermalink: button.pathOrPermalink
       }), button.type == "custom" && button.render(item)]
-    }, index)), jsxRuntime.jsx(PublishButton, {
-      api: api,
-      queryId: item.id,
-      status: item.status,
-      disabled: isLoading
-    }), jsxRuntime.jsx(UpdateButton, {
-      disabled: isLoading
+    }, index)), jsxRuntime.jsxs(admin.ButtonBar, {
+      children: [api instanceof adminApi.API && jsxRuntime.jsx(PublishButton, {
+        api: api,
+        queryId: item.id,
+        status: item.status,
+        disabled: isLoading
+      }), jsxRuntime.jsx(UpdateButton, {
+        disabled: isLoading
+      })]
     })]
   });
 }
@@ -1182,18 +1201,18 @@ function Internal({
   tabbed,
   containerRef
 }) {
+  var _a, _b, _c;
+  const pScreen = react.runIfFn(screen, item);
   const {
     breadcrumbs,
     schema,
     initialValues,
     header,
-    editorFooter: editoFooter,
     sections,
     buttonBar,
-    editor,
     type,
     invalidateParentQueryKey
-  } = react.runIfFn(screen, item);
+  } = pScreen;
   const mutation = api.useInvalidateParentMutation(api$1.update, invalidateParentQueryKey !== null && invalidateParentQueryKey !== void 0 ? invalidateParentQueryKey : api$1.queryKey, {
     networkMode: "always"
   });
@@ -1223,7 +1242,10 @@ function Internal({
       item: item,
       isLoading: mutation.isLoading,
       trackingRef: containerRef === null || containerRef === void 0 ? void 0 : containerRef.current
-    }), jsxRuntime.jsx("div", {
+    }), type == "form" && (sections === null || sections === void 0 ? void 0 : sections.map((section, index) => jsxRuntime.jsx(Section, {
+      section: section,
+      item: item
+    }, index))), (pScreen.type == "post" || pScreen.type == "section") && jsxRuntime.jsx("div", {
       p: "5",
       bgColor: "slate-100",
       rounded: "lg",
@@ -1239,7 +1261,7 @@ function Internal({
             flexCol: true,
             gap: "8",
             flexGrow: true,
-            children: [(editor === null || editor === void 0 ? void 0 : editor.type) != "textarea" &&
+            children: [((_a = pScreen.editor) === null || _a === void 0 ? void 0 : _a.type) != "textarea" &&
             // TODO Find a way to make this editor shrink in width when resizing the window...
             jsxRuntime.jsx(PageContentEditor, {
               name: "content",
@@ -1247,8 +1269,8 @@ function Internal({
               minW: "144",
               shadow: true,
               rounded: "lg"
-            }), (editor === null || editor === void 0 ? void 0 : editor.type) == "textarea" && jsxRuntime.jsx(form.TextArea, {
-              name: editor === null || editor === void 0 ? void 0 : editor.name,
+            }), ((_b = pScreen.editor) === null || _b === void 0 ? void 0 : _b.type) == "textarea" && jsxRuntime.jsx(form.TextArea, {
+              name: (_c = pScreen.editor) === null || _c === void 0 ? void 0 : _c.name,
               maxW: editorMaxW,
               minW: editorMaxW,
               w: editorMaxW,
@@ -1259,11 +1281,12 @@ function Internal({
               shadow: true,
               p: "5",
               textColor: "slate-800"
-            }), editoFooter]
+            }), pScreen.editorFooter]
           }), jsxRuntime.jsx(PageSidebar, {
             children: sections === null || sections === void 0 ? void 0 : sections.map((section, index) => jsxRuntime.jsx(Section, {
               section: section,
-              item: item
+              item: item,
+              cardStyle: true
             }, index))
           })]
         })]
@@ -1273,15 +1296,24 @@ function Internal({
 }
 function Section({
   section,
-  item
+  item,
+  cardStyle
 }) {
   if (section.type === "section") {
-    return jsxRuntime.jsx(PageSidebarSection, {
-      title: section.title,
+    const style = cardStyle ? {
+      bgColor: "white",
+      rounded: "lg",
+      p: "5",
+      textSize: "sm",
+      shadow: true
+    } : {};
+    return jsxRuntime.jsx(PageSidebarSection, Object.assign({
+      title: section.title
+    }, style, {
       children: jsxRuntime.jsx(form.FormRenderer, {
         form: react.runIfFn(section.form, item)
       })
-    });
+    }));
   }
   if (section.type === "custom") return react.runIfFn(section.component, item);
   return null;
@@ -3644,6 +3676,7 @@ exports.Breadcrumbs = Breadcrumbs;
 exports.ButtonBar = ButtonBar;
 exports.ButtonBarButton = ButtonBarButton;
 exports.ButtonBarDialogButton = ButtonBarDialogButton;
+exports.ButtonBarSubmitButton = ButtonBarSubmitButton;
 exports.DialogButton = DialogButton;
 exports.FormActionDialog = FormActionDialog;
 exports.InvalidateButton = InvalidateButton;

package/index.esm.js

@@ -2,17 +2,17 @@ import { jsx, jsxs, Fragment } from '@soperio/jsx-runtime';
 import { Icon, Button, IconButton, Container, Tile, Popover, Collapse, Modal, Checkbox, Badge } from '@valerya/ui';
 import Link from 'next/link';
 import React, { useRef, useCallback, useContext as useContext$2, useLayoutEffect, useEffect, createContext } from 'react';
-import { INVALIDATE_API } from '@compill/admin-api';
+import { INVALIDATE_API, API } from '@compill/admin-api';
 import { useApiMutation, useMutate, useInvalidateMutation, useApiQuery, useInvalidateQuery, useInvalidateParentMutation, useApiQueries } from '@compill/api';
+import { useFormikContext, Field, Formik, Form } from 'formik';
 import { useNavigate, useParams, Outlet, useLocation, useMatch, Link as Link$1 } from 'react-router-dom';
+import { ButtonBarButton as ButtonBarButton$1, ButtonBarSubmitButton as ButtonBarSubmitButton$1, PageSectionTitle as PageSectionTitle$1, ButtonBar as ButtonBar$1, ButtonBarDialogButton as ButtonBarDialogButton$1, TableRowActionButton as TableRowActionButton$1, DialogButton as DialogButton$1 } from '@compill/admin';
 import { toast } from 'react-toastify';
-import { SubmitButton, FormProvider, TextArea, FormRenderer, mergeInitialFormValues, FieldLabel } from '@compill/form';
-import { useFormikContext, Field, Formik, Form } from 'formik';
 import 'react/jsx-runtime';
 import { FlexCenter, QueryLoadingState, RetryOnError, TabContainer, ModalLoadingOverlay } from '@compill/components';
+import { FormProvider, TextArea, FormRenderer, mergeInitialFormValues, FieldLabel, SubmitButton } from '@compill/form';
 import { createContext as createContext$1, runIfFn, isFunction } from '@soperio/react';
 import { Editor } from '@compill/editor';
-import { PageSectionTitle as PageSectionTitle$1, ButtonBarDialogButton as ButtonBarDialogButton$1, TableRowActionButton as TableRowActionButton$1, DialogButton as DialogButton$1 } from '@compill/admin';
 import { createPortal } from 'react-dom';
 import { useRouter } from 'next/router';
 import { TableContextProvider, useTableContext, Table } from '@compill/table';
@@ -195,6 +195,43 @@ const ButtonBarButton = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     }), children]
   }));
 });
+const ButtonBarSubmitButton = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var _b;
+  var {
+      useDirty,
+      disabled,
+      icon,
+      children
+    } = _a,
+    props = __rest$1(_a, ["useDirty", "disabled", "icon", "children"]);
+  const {
+    dirty,
+    handleSubmit
+  } = (_b = useFormikContext()) !== null && _b !== void 0 ? _b : {
+    dirty: false,
+    handleSubmit: undefined,
+    values: {}
+  };
+  const onSubmit = React.useCallback(() => handleSubmit(), [handleSubmit]);
+  return jsxs(Button, Object.assign({
+    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]
+  }));
+});
 function ButtonBarDialogButton(_a) {
   var {
       icon,
@@ -275,20 +312,12 @@ function PublishButton(_a) {
     mutation.reset();
     mutation.mutateAsync(queryId).then(() => toast.success(isDraft ? "Published!" : "Unpublished!")).catch(error => toast.error(`Error: ${error}`));
   }, [mutation, queryId]);
-  return jsxs(Button, Object.assign({
-    scheme: "secondary",
-    variant: "glass",
-    size: "sm",
-    px: "3",
+  return jsx(ButtonBarButton$1, Object.assign({
     disabled: mutation.isLoading,
     onClick: publish,
-    dflex: true,
-    alignItems: "center",
-    gap: "3"
+    icon: isDraft ? mdiEye : mdiEyeOff
   }, props, {
-    children: [jsx(Icon, {
-      path: isDraft ? mdiEye : mdiEyeOff
-    }), isDraft ? "Publish" : "Switch to draft"]
+    children: isDraft ? "Publish" : "Switch to draft"
   }));
 }
 
@@ -695,17 +724,10 @@ function UpdateButton(_a) {
   }, {
     preventDefault: true
   }, [dirty, props, handleSubmit]);
-  return jsxs(SubmitButton, Object.assign({
-    type: "submit",
-    size: "sm",
-    px: "3",
-    dflex: true,
-    alignItems: "center",
-    gap: "3"
+  return jsx(ButtonBarSubmitButton$1, Object.assign({
+    icon: mdiCloudUpload
   }, props, {
-    children: [jsx(Icon, {
-      path: mdiCloudUpload
-    }), "Update"]
+    children: "Update"
   }));
 }
 
@@ -928,12 +950,7 @@ function PageSidebarSection(_a) {
     } = _a,
     props = __rest$1(_a, ["title", "children"]);
   return jsxs("div", Object.assign({
-    w: "full",
-    bgColor: "white",
-    rounded: "lg",
-    p: "5",
-    textSize: "sm",
-    shadow: true
+    w: "full"
   }, props, {
     children: [title && jsx(PageSectionTitle$1, {
       children: title
@@ -1114,13 +1131,15 @@ function Buttons$1({
       }), button.type === "invalidate" && jsx(InvalidateButton, {
         pathOrPermalink: button.pathOrPermalink
       }), button.type == "custom" && button.render(item)]
-    }, index)), jsx(PublishButton, {
-      api: api,
-      queryId: item.id,
-      status: item.status,
-      disabled: isLoading
-    }), jsx(UpdateButton, {
-      disabled: isLoading
+    }, index)), jsxs(ButtonBar$1, {
+      children: [api instanceof API && jsx(PublishButton, {
+        api: api,
+        queryId: item.id,
+        status: item.status,
+        disabled: isLoading
+      }), jsx(UpdateButton, {
+        disabled: isLoading
+      })]
     })]
   });
 }
@@ -1172,18 +1191,18 @@ function Internal({
   tabbed,
   containerRef
 }) {
+  var _a, _b, _c;
+  const pScreen = runIfFn(screen, item);
   const {
     breadcrumbs,
     schema,
     initialValues,
     header,
-    editorFooter: editoFooter,
     sections,
     buttonBar,
-    editor,
     type,
     invalidateParentQueryKey
-  } = runIfFn(screen, item);
+  } = pScreen;
   const mutation = useInvalidateParentMutation(api.update, invalidateParentQueryKey !== null && invalidateParentQueryKey !== void 0 ? invalidateParentQueryKey : api.queryKey, {
     networkMode: "always"
   });
@@ -1213,7 +1232,10 @@ function Internal({
       item: item,
       isLoading: mutation.isLoading,
       trackingRef: containerRef === null || containerRef === void 0 ? void 0 : containerRef.current
-    }), jsx("div", {
+    }), type == "form" && (sections === null || sections === void 0 ? void 0 : 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",
@@ -1229,7 +1251,7 @@ function Internal({
             flexCol: true,
             gap: "8",
             flexGrow: true,
-            children: [(editor === null || editor === void 0 ? void 0 : editor.type) != "textarea" &&
+            children: [((_a = pScreen.editor) === null || _a === void 0 ? void 0 : _a.type) != "textarea" &&
             // TODO Find a way to make this editor shrink in width when resizing the window...
             jsx(PageContentEditor, {
               name: "content",
@@ -1237,8 +1259,8 @@ function Internal({
               minW: "144",
               shadow: true,
               rounded: "lg"
-            }), (editor === null || editor === void 0 ? void 0 : editor.type) == "textarea" && jsx(TextArea, {
-              name: editor === null || editor === void 0 ? void 0 : editor.name,
+            }), ((_b = pScreen.editor) === null || _b === void 0 ? void 0 : _b.type) == "textarea" && jsx(TextArea, {
+              name: (_c = pScreen.editor) === null || _c === void 0 ? void 0 : _c.name,
               maxW: editorMaxW,
               minW: editorMaxW,
               w: editorMaxW,
@@ -1249,11 +1271,12 @@ function Internal({
               shadow: true,
               p: "5",
               textColor: "slate-800"
-            }), editoFooter]
+            }), pScreen.editorFooter]
           }), jsx(PageSidebar, {
             children: sections === null || sections === void 0 ? void 0 : sections.map((section, index) => jsx(Section, {
               section: section,
-              item: item
+              item: item,
+              cardStyle: true
             }, index))
           })]
         })]
@@ -1263,15 +1286,24 @@ function Internal({
 }
 function Section({
   section,
-  item
+  item,
+  cardStyle
 }) {
   if (section.type === "section") {
-    return jsx(PageSidebarSection, {
-      title: section.title,
+    const style = cardStyle ? {
+      bgColor: "white",
+      rounded: "lg",
+      p: "5",
+      textSize: "sm",
+      shadow: true
+    } : {};
+    return jsx(PageSidebarSection, Object.assign({
+      title: section.title
+    }, style, {
       children: jsx(FormRenderer, {
         form: runIfFn(section.form, item)
       })
-    });
+    }));
   }
   if (section.type === "custom") return runIfFn(section.component, item);
   return null;
@@ -3628,4 +3660,4 @@ function TableRowPublishPostButton(_a) {
   }, props));
 }
 
-export { AdminLayout, AttachDialog, Breadcrumbs, ButtonBar, ButtonBarButton, ButtonBarDialogButton, DialogButton, FormActionDialog, InvalidateButton, ItemDeleteDialog, ItemEditDialog, Menu, NavigateButton, OrderCell, PageContainer, PageContentEditor, PageMain, PageQueryStateContainer, PageSectionTitle, PageSidebar, PageSidebarSection, PageStateContainer, PageSubSectionTitle, PageTabbedTopBar, PageTabbedTopBarProvider, PageTitle, PageTopBar, PageTopBarToolbar, PublishButton, ScreenRenderer, SectionTitle, StatusBadge, TableContainer, TableCreateButton, TableFilterButton, TableRowActionBar, TableRowActionButton, TableRowActionDialogButton, TableRowDeleteButton, TableRowEditButton, TableRowNavigateButton, TableRowPublishPostButton, TableRowViewButton, TableTopBar, UpdateButton, ViewButton };
+export { AdminLayout, AttachDialog, Breadcrumbs, ButtonBar, ButtonBarButton, ButtonBarDialogButton, ButtonBarSubmitButton, DialogButton, FormActionDialog, InvalidateButton, ItemDeleteDialog, ItemEditDialog, Menu, NavigateButton, OrderCell, PageContainer, PageContentEditor, PageMain, PageQueryStateContainer, PageSectionTitle, PageSidebar, PageSidebarSection, PageStateContainer, PageSubSectionTitle, PageTabbedTopBar, PageTabbedTopBarProvider, PageTitle, PageTopBar, PageTopBarToolbar, PublishButton, ScreenRenderer, SectionTitle, StatusBadge, TableContainer, TableCreateButton, TableFilterButton, TableRowActionBar, TableRowActionButton, TableRowActionDialogButton, TableRowDeleteButton, TableRowEditButton, TableRowNavigateButton, TableRowPublishPostButton, TableRowViewButton, TableTopBar, UpdateButton, ViewButton };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@compill/admin",
-    "version": "1.0.72",
+    "version": "1.0.74",
     "module": "./index.esm.js",
     "main": "./index.cjs.js"
 }

package/src/lib/json/ScreenTopBar.d.ts

@@ -2,11 +2,12 @@
 import { API } from "@compill/admin-api";
 import { Breadcrumb } from "../breadcrumbs/BreadCrumbs";
 import { DetailViewButton } from "./types/DetailsView";
+import { CRUDAPI } from "@compill/api";
 interface ScreenTopBarProps {
     tabbed?: boolean;
     breadcrumbs?: Breadcrumb[];
     buttonBar?: DetailViewButton[];
-    api: API<any>;
+    api: CRUDAPI<any> | API<any>;
     item: any;
     isLoading: boolean;
     trackingRef?: Element | null;

package/src/lib/json/types/DetailsView.d.ts

@@ -3,9 +3,10 @@ import { API } from "@compill/admin-api";
 import * as Yup from "yup";
 import { Breadcrumb } from "../../breadcrumbs/BreadCrumbs";
 import { FormRendererConfig } from "@compill/form";
+import { CRUDAPI } from "@compill/api";
 export type DetailsViewConfig<T = any> = {
     type: "details";
-    api: API<T>;
+    api: CRUDAPI<T> | API<T>;
     queryField: string;
     useNextRouter?: boolean;
     processInput?: (input: T) => any;
@@ -19,10 +20,13 @@ type Screen = {
     header?: React.ReactNode;
     sections?: DetailSection[];
     buttonBar?: DetailViewButton[];
+} & ({
+    type: "form";
+} | {
+    type?: "post" | "section";
     editor?: DetailEditor;
     editorFooter?: React.ReactNode;
-    type?: "post" | "section";
-};
+});
 type DetailEditor = {
     type?: "blockEditor";
     name: string;
@@ -32,7 +36,7 @@ type DetailEditor = {
 };
 export type DetailSection = {
     type: "section";
-    title: string;
+    title?: string;
     form: FormRendererConfig | ((item: any) => FormRendererConfig);
 } | {
     type: "custom";

package/src/lib/layout/ButtonBar.d.ts

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