@nixxie-cms/core 1.0.0

package/dist/common-29fc82e6.esm.js

@@ -0,0 +1,315 @@
+import { useRouter } from 'next/router';
+import { useMemo, useState, Fragment as Fragment$1 } from 'react';
+import isDeepEqual from 'fast-deep-equal';
+import { ActionGroup } from '@keystar/ui/action-group';
+import { Breadcrumbs, Item } from '@keystar/ui/breadcrumbs';
+import { DialogContainer, AlertDialog } from '@keystar/ui/dialog';
+import { Icon } from '@keystar/ui/icon';
+import { allIcons } from '@keystar/ui/icon/all';
+import { Box, Grid, HStack } from '@keystar/ui/layout';
+import { tokenSchema, css, breakpointQueries } from '@keystar/ui/style';
+import { toastQueue } from '@keystar/ui/toast';
+import { Heading, Text } from '@keystar/ui/typography';
+import { gql } from '@apollo/client';
+import { useApolloClient } from '@apollo/client/react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { b as ErrorDetailsDialog } from './Errors-bf24759e.esm.js';
+import { g as getActionArguments, a as getActionGraphQLArgs, b as getActionGraphQLVariables } from './actionData-64d4c37a.esm.js';
+
+const CONTAINER_MAX = 'container.large';
+function Container(props) {
+  return /*#__PURE__*/jsx(Box, {
+    minWidth: 0 // fix flex overflow issues
+    ,
+    maxWidth: CONTAINER_MAX,
+    ...props
+  });
+}
+
+function ItemPageHeader({
+  list,
+  actions,
+  item,
+  value,
+  initialValue,
+  label,
+  title = label,
+  onAction
+}) {
+  const router = useRouter();
+  return /*#__PURE__*/jsxs(Grid
+  // fill space; take over layout from the `PageContainer` flex wrapper
+  , {
+    flex: true
+    // make sure actions don't run into the primary element, even though it'll truncate
+    ,
+    gap: "medium"
+    // best efforts to ensure actions collapse first, then the title/breadcrumbs may truncate
+    ,
+    columns: `minmax(50cqw, auto) minmax(${tokenSchema.size.element.regular}, max-content)`
+    // grid areas required because the `ActionGroup` implements focus
+    // sentinels (span) before and after the root element
+    ,
+    areas: ['primary secondary']
+    // treat this area like a container
+    ,
+    minWidth: 0,
+    maxWidth: CONTAINER_MAX,
+    children: [list.isSingleton ? /*#__PURE__*/jsx(Heading, {
+      elementType: "h1",
+      size: "small",
+      gridArea: "primary",
+      truncate: true,
+      children: list.label
+    }) : /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsxs(Breadcrumbs, {
+        size: "medium",
+        gridArea: "primary",
+        children: [/*#__PURE__*/jsx(Item, {
+          href: `/${list.path}`,
+          children: list.label
+        }), /*#__PURE__*/jsx(Item, {
+          href: router.asPath,
+          children: label
+        })]
+      }), /*#__PURE__*/jsx(Text, {
+        elementType: "h1",
+        visuallyHidden: true,
+        children: title
+      })]
+    }), item && onAction && actions.length > 0 && /*#__PURE__*/jsx(ItemActions, {
+      list: list,
+      item: item,
+      value: value,
+      initialValue: initialValue,
+      actions: actions,
+      onAction: onAction
+    })]
+  });
+}
+function replace(s, list, args) {
+  var _args$itemLabel;
+  return s.replaceAll('{itemLabel}', (_args$itemLabel = args.itemLabel) !== null && _args$itemLabel !== void 0 ? _args$itemLabel : '').replaceAll('{Label}', args.label).replaceAll('{label}', args.label.toLowerCase()).replaceAll('{Plural}', list.plural).replaceAll('{plural}', list.plural.toLowerCase()).replaceAll('{Singular}', list.singular).replaceAll('{singular}', list.singular.toLowerCase());
+}
+function ItemActions({
+  list,
+  item,
+  value,
+  initialValue,
+  actions,
+  onAction
+}) {
+  var _item$list$labelField;
+  const apolloClient = useApolloClient();
+  const actionItems = useMemo(() => actions.map(action => ({
+    id: action.key,
+    label: action.label,
+    icon: action.icon ? allIcons[action.icon] : null
+  })), [actions]);
+  const [actionError, setActionError] = useState(null);
+  const [activeAction, setActiveAction] = useState(null);
+  const [blockedAction, setBlockedAction] = useState(null);
+  const itemLabel_ = (_item$list$labelField = item[list.labelField]) !== null && _item$list$labelField !== void 0 ? _item$list$labelField : item.id;
+  const itemLabel = typeof itemLabel_ === 'string' ? itemLabel_ : item.id;
+  const hasUnsavedChanges = useMemo(() => value !== null && initialValue !== null && !isDeepEqual(value, initialValue), [initialValue, value]);
+  const disabledKeys = useMemo(() => actions.filter(action => action.itemView.actionMode === 'disabled').map(action => action.key), [actions]);
+  async function onTryAction(action, confirmed) {
+    setActiveAction(null);
+    if (hasUnsavedChanges) {
+      setBlockedAction(action);
+      return;
+    }
+    if (!confirmed && !action.itemView.hidePrompt) {
+      setActiveAction(action);
+      return;
+    }
+    const {
+      messages: m
+    } = action;
+    try {
+      var _data$data$result$id, _data$data;
+      const argsForAction = initialValue ? getActionArguments(list, action, initialValue) : {};
+      const graphqlArgs = getActionGraphQLArgs(action);
+      const graphqlVariables = getActionGraphQLVariables(action);
+      const mutation = action.graphql.arguments.length ? gql`mutation ${action.graphql.names.one}($id: ID!, ${graphqlVariables}) {
+            result: ${action.graphql.names.one}(where: { id: $id }, ${graphqlArgs}) {
+              id
+            }
+          }` : gql`mutation ${action.graphql.names.one}($id: ID!) {
+            result: ${action.graphql.names.one}(where: { id: $id }) {
+              id
+            }
+          }`;
+      const data = await apolloClient.mutate({
+        mutation,
+        variables: action.graphql.arguments.length ? {
+          id: item.id,
+          ...argsForAction
+        } : {
+          id: item.id
+        }
+      });
+      if (!action.itemView.hideToast) {
+        toastQueue.neutral(replace(m.success, list, {
+          ...action,
+          itemLabel
+        }), {
+          timeout: 5000
+        });
+      }
+      onAction(action, (_data$data$result$id = (_data$data = data.data) === null || _data$data === void 0 || (_data$data = _data$data.result) === null || _data$data === void 0 ? void 0 : _data$data.id) !== null && _data$data$result$id !== void 0 ? _data$data$result$id : null);
+    } catch (error) {
+      toastQueue.critical(replace(m.fail, list, {
+        ...action,
+        itemLabel
+      }), {
+        actionLabel: 'Details',
+        onAction: () => setActionError({
+          action,
+          error
+        }),
+        shouldCloseOnAction: true
+      });
+    }
+  }
+  return /*#__PURE__*/jsxs(Fragment$1, {
+    children: [/*#__PURE__*/jsx(ActionGroup, {
+      gridArea: "secondary",
+      disabledKeys: disabledKeys,
+      overflowMode: "collapse",
+      items: actionItems,
+      onAction: key => {
+        const action = list.actions.find(action => action.key === key);
+        if (!action) return;
+        onTryAction(action, false);
+      },
+      children: item => /*#__PURE__*/jsxs(Item, {
+        textValue: item.label,
+        children: [item.icon && /*#__PURE__*/jsx(Icon, {
+          src: item.icon
+        }), /*#__PURE__*/jsx(Text, {
+          children: item.label
+        })]
+      })
+    }), /*#__PURE__*/jsx(DialogContainer, {
+      onDismiss: () => setActiveAction(null),
+      children: activeAction && /*#__PURE__*/jsx(AlertDialog, {
+        title: replace(activeAction.messages.promptTitle, list, {
+          ...activeAction,
+          itemLabel
+        }),
+        cancelLabel: "Cancel",
+        primaryActionLabel: replace(activeAction.messages.promptConfirmLabel, list, {
+          ...activeAction,
+          itemLabel
+        }),
+        onPrimaryAction: async () => {
+          await onTryAction(activeAction, true);
+        },
+        children: replace(activeAction.messages.prompt, list, {
+          ...activeAction,
+          itemLabel
+        })
+      })
+    }), /*#__PURE__*/jsx(DialogContainer, {
+      onDismiss: () => setBlockedAction(null),
+      children: blockedAction && /*#__PURE__*/jsxs(AlertDialog, {
+        title: "Unsaved changes",
+        primaryActionLabel: "Dismiss",
+        onPrimaryAction: () => setBlockedAction(null),
+        children: ["Please save or reset your changes before attempting to", ' ', replace('{label}', list, blockedAction), "."]
+      })
+    }), /*#__PURE__*/jsx(DialogContainer, {
+      onDismiss: () => setActionError(null),
+      isDismissable: true,
+      children: actionError && /*#__PURE__*/jsx(ErrorDetailsDialog, {
+        title: replace(actionError.action.messages.fail, list, {
+          ...actionError.action,
+          itemLabel
+        }),
+        error: actionError.error
+      })
+    })]
+  });
+}
+function ColumnLayout(props) {
+  return (
+    /*#__PURE__*/
+    // this container must be relative to catch absolute children
+    // particularly the "expanded" document-field, which needs a height of 100%
+    jsx(Container, {
+      position: "relative",
+      height: "100%",
+      paddingX: "xlarge",
+      children: /*#__PURE__*/jsx("div", {
+        className: css({
+          display: 'grid',
+          columnGap: tokenSchema.size.space.xlarge,
+          gridTemplateAreas: '"main" "sidebar" "toolbar"',
+          [breakpointQueries.above.tablet]: {
+            gridTemplateColumns: `2fr minmax(${tokenSchema.size.scale[3600]}, 1fr)`,
+            gridTemplateAreas: '"main sidebar" "toolbar toolbar"'
+          }
+        }),
+        ...props
+      })
+    })
+  );
+}
+function StickySidebar(props) {
+  return /*#__PURE__*/jsx("div", {
+    className: css({
+      gridArea: 'sidebar',
+      marginTop: tokenSchema.size.space.xlarge,
+      [breakpointQueries.above.tablet]: {
+        alignSelf: 'start',
+        marginBottom: tokenSchema.size.element.xlarge,
+        // sync with toolbar height
+        paddingBottom: tokenSchema.size.element.xlarge,
+        position: 'sticky',
+        top: tokenSchema.size.space.xlarge
+      }
+    }),
+    ...props
+  });
+}
+function BaseToolbar(props) {
+  return /*#__PURE__*/jsx(Grid, {
+    backgroundColor: "surface",
+    columns: "subgrid",
+    gridArea: "toolbar",
+    insetBottom: 0,
+    marginTop: "xlarge",
+    position: {
+      tablet: 'sticky'
+    },
+    zIndex: 20,
+    UNSAFE_className: css({
+      // fuzzy mask sidebar fields, which slide behind the un-bordered portion
+      // of the sticky toolbar
+      [breakpointQueries.above.tablet]: {
+        '&::after': {
+          boxShadow: `0 -4px 4px 1px ${tokenSchema.color.background.surface}`,
+          content: '""'
+        }
+      }
+    }),
+    children: /*#__PURE__*/jsx(HStack, {
+      alignItems: "center",
+      borderTop: "neutral",
+      gap: "regular",
+      height: "element.xlarge",
+      UNSAFE_className: css({
+        // stretch horizontally to ensure field focus-rings are covered
+        [breakpointQueries.above.mobile]: {
+          backgroundColor: tokenSchema.color.background.surface,
+          marginInline: `calc(${tokenSchema.size.alias.focusRing} * -1)`,
+          paddingInline: tokenSchema.size.alias.focusRing
+        }
+      }),
+      children: props.children
+    })
+  });
+}
+
+export { BaseToolbar as B, ColumnLayout as C, ItemPageHeader as I, StickySidebar as S };