@nixxie-cms/core 1.0.0 → 1.0.2

package/internal-unstable/admin-ui/pages/ItemPage/dist/nixxie-cms-core-internal-unstable-admin-ui-pages-ItemPage.esm.js

@@ -0,0 +1,455 @@
+import router, { useRouter } from 'next/router';
+import { useMemo, useState, useEffect, Fragment, useRef, useCallback } from 'react';
+import { Button } from '@keystar/ui/button';
+import { DialogContainer, DialogTrigger, AlertDialog } from '@keystar/ui/dialog';
+import { Icon } from '@keystar/ui/icon';
+import { fileWarningIcon } from '@keystar/ui/icon/icons/fileWarningIcon';
+import { VStack, Box } from '@keystar/ui/layout';
+import { ProgressCircle } from '@keystar/ui/progress';
+import { SlotProvider } from '@keystar/ui/slots';
+import { toastQueue } from '@keystar/ui/toast';
+import { Text, Heading } from '@keystar/ui/typography';
+import { gql, CombinedGraphQLErrors } from '@apollo/client';
+import { useMutation } from '@apollo/client/react';
+import { p as pick, C as CreateButtonLink } from '../../../../../dist/pick-b7ef3115.esm.js';
+import { b as ErrorDetailsDialog } from '../../../../../dist/Errors-bf24759e.esm.js';
+import { G as GraphQLErrorNotice } from '../../../../../dist/GraphQLErrorNotice-d9f0931b.esm.js';
+import { P as PageContainer } from '../../../../../dist/PageContainer-5ae731cc.esm.js';
+import { a as useList, b as useListItem } from '../../../../../dist/context-af9957ed.esm.js';
+import { F as Fields } from '../../../../../dist/Fields-956d9a14.esm.js';
+import { g as getConditionalFilterFieldKeys, s as serializeItemForConditionalFilters, r as resolveActionMode, i as isActionAvailable } from '../../../../../dist/filters-8c8616f9.esm.js';
+import { d as deserializeItemToValue, u as useInvalidFields, a as useHasChanges, s as serializeValueToOperationItem } from '../../../../../dist/utils-5e1d4d28.esm.js';
+import { I as ItemPageHeader, C as ColumnLayout, S as StickySidebar, B as BaseToolbar } from '../../../../../dist/common-ea5c441a.esm.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import '@keystar/ui/style';
+import '@babel/runtime/helpers/defineProperty';
+import '@keystar/ui/icon/icons/alertTriangleIcon';
+import '@keystar/ui/notice';
+import 'next/head';
+import 'next/link';
+import 'apollo-upload-client/UploadHttpLink.mjs';
+import '@keystar/ui/core';
+import '@nixxie-cms/core/admin-ui/router';
+import '@keystar/ui/icon/icons/chevronLeftIcon';
+import '@keystar/ui/icon/icons/chevronRightIcon';
+import '@keystar/ui/icon/icons/undo2Icon';
+import '@keystar/ui/picker';
+import '@keystar/ui/tag';
+import '@keystar/ui/tooltip';
+import '../../../../../dist/admin-meta-graphql-0e6e606e.esm.js';
+import '@react-aria/utils';
+import '@keystar/ui/icon/icons/textCursorInputIcon';
+import '@keystar/ui/utils';
+import 'fast-deep-equal';
+import 'graphql';
+import '@keystar/ui/action-group';
+import '@keystar/ui/breadcrumbs';
+import '@keystar/ui/icon/all';
+import '../../../../../dist/actionData-64d4c37a.esm.js';
+
+function useEventCallback(callback) {
+  const callbackRef = useRef(callback);
+  const cb = useCallback((...args) => {
+    return callbackRef.current(...args);
+  }, []);
+  useEffect(() => {
+    callbackRef.current = callback;
+  });
+  return cb;
+}
+function DeleteButton({
+  list,
+  itemId,
+  itemLabel
+}) {
+  const [errorDialogValue, setErrorDialogValue] = useState(null);
+  const router = useRouter();
+  const [deleteItem] = useMutation(gql`mutation ($id: ID!) {
+      ${list.graphql.names.deleteMutationName}(where: { id: $id }) {
+        id
+      }
+    }`, {
+    variables: {
+      id: itemId
+    }
+  });
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsxs(DialogTrigger, {
+      children: [/*#__PURE__*/jsx(Button, {
+        tone: "critical",
+        children: "Delete"
+      }), /*#__PURE__*/jsx(AlertDialog, {
+        tone: "critical",
+        title: "Delete item",
+        cancelLabel: "Cancel",
+        primaryActionLabel: "Yes, delete",
+        onPrimaryAction: async () => {
+          try {
+            await deleteItem();
+          } catch (err) {
+            toastQueue.critical('Unable to delete item', {
+              actionLabel: 'Details',
+              onAction: () => setErrorDialogValue(err),
+              shouldCloseOnAction: true
+            });
+            return;
+          }
+          toastQueue.neutral(`${list.singular} deleted.`, {
+            timeout: 5000
+          });
+          router.push(list.isSingleton ? '/' : `/${list.path}`);
+        },
+        children: /*#__PURE__*/jsxs(Text, {
+          children: ["Are you sure you want to delete ", /*#__PURE__*/jsx("strong", {
+            style: {
+              fontWeight: 600
+            },
+            children: itemLabel
+          }), "? This action cannot be undone."]
+        })
+      })]
+    }), /*#__PURE__*/jsx(DialogContainer, {
+      onDismiss: () => setErrorDialogValue(null),
+      isDismissable: true,
+      children: errorDialogValue && /*#__PURE__*/jsx(ErrorDetailsDialog, {
+        title: "Unable to delete item",
+        error: errorDialogValue
+      })
+    })]
+  });
+}
+function ItemNotFound(props) {
+  return /*#__PURE__*/jsxs(VStack, {
+    alignItems: "center",
+    backgroundColor: "surface",
+    borderRadius: "medium",
+    gap: "large",
+    justifyContent: "center",
+    minHeight: "scale.3000",
+    padding: "xlarge",
+    children: [/*#__PURE__*/jsx(Icon, {
+      src: fileWarningIcon,
+      color: "neutralEmphasis",
+      size: "large"
+    }), /*#__PURE__*/jsx(Heading, {
+      align: "center",
+      children: "Not found"
+    }), /*#__PURE__*/jsx(SlotProvider, {
+      slots: {
+        text: {
+          align: 'center',
+          maxWidth: 'scale.5000'
+        }
+      },
+      children: props.children
+    })]
+  });
+}
+function ResetButton(props) {
+  return /*#__PURE__*/jsxs(DialogTrigger, {
+    children: [/*#__PURE__*/jsx(Button, {
+      tone: "accent",
+      isDisabled: !props.hasChanges,
+      children: "Reset"
+    }), /*#__PURE__*/jsx(AlertDialog, {
+      title: "Reset changes",
+      cancelLabel: "Cancel",
+      primaryActionLabel: "Yes, reset",
+      autoFocusButton: "primary",
+      onPrimaryAction: props.onReset,
+      children: "Are you sure? Any unsaved changes will be lost and cannot be recovered."
+    })]
+  });
+}
+function ItemForm({
+  listKey,
+  initialValue,
+  value,
+  onChange,
+  itemLabel,
+  onSaveSuccess,
+  fieldModes,
+  fieldPositions,
+  isRequireds
+}) {
+  const list = useList(listKey);
+  const itemId = initialValue.id;
+  const [updateError, setUpdateError] = useState(null);
+  const [update, {
+    loading,
+    error
+  }] = useMutation(gql`mutation ($id: ID!, $data: ${list.graphql.names.updateInputName}!) {
+      item: ${list.graphql.names.updateMutationName}(where: { id: $id }, data: $data) {
+        id
+      }
+    }`, {
+    errorPolicy: 'all'
+  });
+  function resetValueState() {
+    onChange(initialValue);
+  }
+  const invalidFields = useInvalidFields(list.fields, value, isRequireds);
+  const [forceValidation, setForceValidation] = useState(false);
+  const onSave = useEventCallback(async e => {
+    if (e.target !== e.currentTarget) return;
+    e.preventDefault();
+    const newForceValidation = invalidFields.size !== 0;
+    setForceValidation(newForceValidation);
+    if (newForceValidation) return;
+    const {
+      error: _error
+    } = await update({
+      variables: {
+        id: itemId,
+        data: serializeValueToOperationItem('update', list.fields, value, initialValue)
+      }
+    });
+    const error = CombinedGraphQLErrors.is(_error) ? _error.errors.find(x => {
+      var _x$path;
+      return x.path === undefined || ((_x$path = x.path) === null || _x$path === void 0 ? void 0 : _x$path.length) === 1;
+    }) : _error;
+    if (error) {
+      toastQueue.critical('Unable to save item', {
+        actionLabel: 'Details',
+        onAction: () => setUpdateError(new Error(error.message)),
+        shouldCloseOnAction: true
+      });
+      return;
+    }
+    toastQueue.positive(`Saved changes to ${list.singular.toLocaleLowerCase()}.`, {
+      timeout: 5000
+    });
+    onSaveSuccess();
+  });
+  const hasChangedFields = useHasChanges('update', list.fields, value, initialValue);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsxs("form", {
+      onSubmit: onSave,
+      style: {
+        display: 'contents'
+      },
+      children: [/*#__PURE__*/jsx("button", {
+        type: "submit",
+        style: {
+          display: 'none'
+        }
+      }), /*#__PURE__*/jsxs(VStack, {
+        gap: "large",
+        gridArea: "main",
+        marginTop: "xlarge",
+        minWidth: 0,
+        children: [/*#__PURE__*/jsx(GraphQLErrorNotice, {
+          errors: CombinedGraphQLErrors.is(error) ? error.errors.filter(x => {
+            var _x$path2;
+            return x.path === undefined || ((_x$path2 = x.path) === null || _x$path2 === void 0 ? void 0 : _x$path2.length) === 1;
+          }) : [error]
+        }), /*#__PURE__*/jsx(Fields, {
+          view: "itemView",
+          position: "form",
+          fields: list.fields,
+          groups: list.groups,
+          forceValidation: forceValidation,
+          invalidFields: invalidFields,
+          fieldModes: fieldModes,
+          fieldPositions: fieldPositions,
+          onChange: onChange,
+          value: value,
+          isRequireds: isRequireds
+        })]
+      }), /*#__PURE__*/jsx(StickySidebar, {
+        children: /*#__PURE__*/jsx(Fields, {
+          view: "itemView",
+          position: "sidebar",
+          fields: list.fields,
+          groups: list.groups,
+          forceValidation: forceValidation,
+          invalidFields: invalidFields,
+          onChange: onChange,
+          value: value,
+          fieldModes: fieldModes,
+          fieldPositions: fieldPositions,
+          isRequireds: isRequireds
+        })
+      }), /*#__PURE__*/jsxs(BaseToolbar, {
+        children: [/*#__PURE__*/jsx(Button, {
+          isDisabled: !hasChangedFields,
+          isPending: loading,
+          prominence: "high",
+          type: "submit",
+          children: "Save"
+        }), /*#__PURE__*/jsx(ResetButton, {
+          hasChanges: hasChangedFields,
+          onReset: resetValueState
+        }), /*#__PURE__*/jsx(Box, {
+          flex: true
+        }), !list.hideDelete ? /*#__PURE__*/jsx(DeleteButton, {
+          list: list,
+          itemId: itemId,
+          itemLabel: itemLabel
+        }) : null]
+      })]
+    }), /*#__PURE__*/jsx(DialogContainer, {
+      onDismiss: () => setUpdateError(null),
+      isDismissable: true,
+      children: updateError && /*#__PURE__*/jsx(ErrorDetailsDialog, {
+        title: "Unable to save item",
+        error: updateError
+      })
+    })]
+  });
+}
+const getItemPage = props => () => /*#__PURE__*/jsx(ItemPage, {
+  ...props
+});
+function ItemPage({
+  listKey
+}) {
+  var _item$list$labelField, _data$nixxie3, _data$nixxie4;
+  const list = useList(listKey);
+  const id_ = useRouter().query.id;
+  const [itemId] = Array.isArray(id_) ? id_ : [id_];
+  const {
+    data,
+    error,
+    loading,
+    refetch
+  } = useListItem(listKey, itemId !== null && itemId !== void 0 ? itemId : null);
+  const item = data === null || data === void 0 ? void 0 : data.item;
+  const itemLabel_ = (_item$list$labelField = item === null || item === void 0 ? void 0 : item[list.labelField]) !== null && _item$list$labelField !== void 0 ? _item$list$labelField : item === null || item === void 0 ? void 0 : item.id;
+  const itemLabel = typeof itemLabel_ === 'string' ? itemLabel_ : itemId !== null && itemId !== void 0 ? itemId : '';
+  const pageLoading = loading || itemId === undefined;
+  const pageLabel = itemLabel || itemId;
+  const pageTitle = list.isSingleton || typeof pageLabel !== 'string' ? list.label : pageLabel;
+  const initialValue = useMemo(() => {
+    if (!item) return null;
+    return deserializeItemToValue(list.fields, item);
+  }, [list.fields, data === null || data === void 0 ? void 0 : data.item]);
+  const [value, setValue] = useState(null);
+  useEffect(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+  const {
+    actionModes,
+    fieldModes,
+    fieldPositions,
+    isRequireds
+  } = useMemo(() => {
+    const actionModes = {};
+    for (const action of list.actions) {
+      actionModes[action.key] = action.itemView.actionMode;
+    }
+    const fieldModes = {};
+    const fieldPositions = {};
+    const isRequireds = {};
+    for (const [fieldKey, field] of Object.entries(list.fields)) {
+      fieldModes[fieldKey] = field.itemView.fieldMode;
+      fieldPositions[fieldKey] = field.itemView.fieldPosition;
+      isRequireds[fieldKey] = field.itemView.isRequired;
+    }
+    for (const field of (_data$nixxie$adminMet = data === null || data === void 0 || (_data$nixxie = data.nixxie) === null || _data$nixxie === void 0 || (_data$nixxie = _data$nixxie.adminMeta) === null || _data$nixxie === void 0 || (_data$nixxie = _data$nixxie.list) === null || _data$nixxie === void 0 ? void 0 : _data$nixxie.fields) !== null && _data$nixxie$adminMet !== void 0 ? _data$nixxie$adminMet : []) {
+      var _data$nixxie$adminMet, _data$nixxie;
+      if (!(field !== null && field !== void 0 && field.itemView) || !field.key || !field.itemView.fieldMode || !field.itemView.fieldPosition || field.itemView.isRequired == null) continue;
+      fieldModes[field.key] = field.itemView.fieldMode;
+      fieldPositions[field.key] = field.itemView.fieldPosition;
+      isRequireds[field.key] = field.itemView.isRequired;
+    }
+    for (const action of (_data$nixxie$adminMet2 = data === null || data === void 0 || (_data$nixxie2 = data.nixxie) === null || _data$nixxie2 === void 0 || (_data$nixxie2 = _data$nixxie2.adminMeta) === null || _data$nixxie2 === void 0 || (_data$nixxie2 = _data$nixxie2.list) === null || _data$nixxie2 === void 0 ? void 0 : _data$nixxie2.actions) !== null && _data$nixxie$adminMet2 !== void 0 ? _data$nixxie$adminMet2 : []) {
+      var _data$nixxie$adminMet2, _data$nixxie2, _action$itemView;
+      if (!(action !== null && action !== void 0 && (_action$itemView = action.itemView) !== null && _action$itemView !== void 0 && _action$itemView.actionMode) || !action.key) continue;
+      actionModes[action.key] = action.itemView.actionMode;
+    }
+    return {
+      actionModes,
+      fieldModes,
+      fieldPositions,
+      isRequireds
+    };
+  }, [data === null || data === void 0 || (_data$nixxie3 = data.nixxie) === null || _data$nixxie3 === void 0 || (_data$nixxie3 = _data$nixxie3.adminMeta) === null || _data$nixxie3 === void 0 || (_data$nixxie3 = _data$nixxie3.list) === null || _data$nixxie3 === void 0 ? void 0 : _data$nixxie3.actions, data === null || data === void 0 || (_data$nixxie4 = data.nixxie) === null || _data$nixxie4 === void 0 || (_data$nixxie4 = _data$nixxie4.adminMeta) === null || _data$nixxie4 === void 0 || (_data$nixxie4 = _data$nixxie4.list) === null || _data$nixxie4 === void 0 ? void 0 : _data$nixxie4.fields, list.actions, list.fields]);
+  const actionsInContext = useMemo(() => {
+    if (!value) return [];
+    return list.actions.map(action => {
+      const fieldKeys = getConditionalFilterFieldKeys(actionModes[action.key]);
+      const fields = pick(list.fields, fieldKeys);
+      const serializedValue = serializeItemForConditionalFilters(fields, value);
+      return {
+        ...action,
+        itemView: {
+          ...action.itemView,
+          actionMode: resolveActionMode(actionModes[action.key], serializedValue)
+        }
+      };
+    }).filter(action => isActionAvailable(action, action.itemView));
+  }, [actionModes, list.actions, list.fields, value]);
+  function onAction(action, resultId) {
+    const {
+      navigation
+    } = action.itemView;
+    if (navigation === 'follow' && resultId === itemId || navigation === 'refetch') {
+      refetch();
+    } else if (navigation === 'follow' && resultId) {
+      router.push(`/${list.path}/${resultId}`);
+    } else {
+      router.push(list.isSingleton ? '/' : `/${list.path}`);
+    }
+  }
+  return /*#__PURE__*/jsx(PageContainer, {
+    title: pageTitle,
+    header: /*#__PURE__*/jsx(ItemPageHeader, {
+      list: list,
+      actions: actionsInContext,
+      label: typeof pageLabel !== 'string' ? 'Loading...' : pageLabel,
+      title: pageTitle,
+      item: item !== null && item !== void 0 ? item : null,
+      value: value !== null && value !== void 0 ? value : initialValue,
+      initialValue: initialValue,
+      onAction: onAction
+    }),
+    children: pageLoading ? /*#__PURE__*/jsx(VStack, {
+      height: "100%",
+      alignItems: "center",
+      justifyContent: "center",
+      children: /*#__PURE__*/jsx(ProgressCircle, {
+        "aria-label": "loading item data",
+        size: "large",
+        isIndeterminate: true
+      })
+    }) : /*#__PURE__*/jsxs(ColumnLayout, {
+      children: [/*#__PURE__*/jsxs(Box, {
+        marginY: "xlarge",
+        children: [/*#__PURE__*/jsx(GraphQLErrorNotice, {
+          errors: [error]
+        }), item == null && (list.isSingleton ? itemId === '1' ? /*#__PURE__*/jsxs(ItemNotFound, {
+          children: [/*#__PURE__*/jsxs(Text, {
+            children: ["\u201C", list.label, "\u201D doesn\u2019t exist, or you don\u2019t have access to it."]
+          }), !list.hideCreate && /*#__PURE__*/jsx(CreateButtonLink, {
+            list: list
+          })]
+        }) : /*#__PURE__*/jsx(ItemNotFound, {
+          children: /*#__PURE__*/jsxs(Text, {
+            children: ["An item with ID ", /*#__PURE__*/jsxs("strong", {
+              children: ["\u201C", itemId, "\u201D"]
+            }), " does not exist."]
+          })
+        }) : /*#__PURE__*/jsx(ItemNotFound, {
+          children: /*#__PURE__*/jsxs(Text, {
+            children: ["The item with ID ", /*#__PURE__*/jsxs("strong", {
+              children: ["\u201C", itemId, "\u201D"]
+            }), " doesn\u2019t exist, or you don\u2019t have access to it."]
+          })
+        }))]
+      }), initialValue && value && /*#__PURE__*/jsx(ItemForm, {
+        fieldModes: fieldModes,
+        fieldPositions: fieldPositions,
+        isRequireds: isRequireds,
+        listKey: listKey,
+        itemLabel: itemLabel,
+        initialValue: initialValue,
+        value: value,
+        onChange: setValue,
+        onSaveSuccess: refetch
+      })]
+    })
+  });
+}
+
+export { getItemPage };

package/internal-unstable/admin-ui/pages/ItemPage/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/nixxie-cms-core-internal-unstable-admin-ui-pages-ItemPage.cjs.js",
+  "module": "dist/nixxie-cms-core-internal-unstable-admin-ui-pages-ItemPage.esm.js"
+}

package/internal-unstable/admin-ui/pages/ListPage/dist/nixxie-cms-core-internal-unstable-admin-ui-pages-ListPage.cjs.d.ts

@@ -0,0 +1,2 @@
+export * from "../../../../../dist/declarations/src/internal-unstable/admin-ui/pages/ListPage/index.js";
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibml4eGllLWNtcy1jb3JlLWludGVybmFsLXVuc3RhYmxlLWFkbWluLXVpLXBhZ2VzLUxpc3RQYWdlLmNqcy5kLnRzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vZGlzdC9kZWNsYXJhdGlvbnMvc3JjL2ludGVybmFsLXVuc3RhYmxlL2FkbWluLXVpL3BhZ2VzL0xpc3RQYWdlL2luZGV4LmQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEifQ==