@nixxie-cms/core 1.0.0

package/dist/Fields-956d9a14.esm.js

@@ -0,0 +1,203 @@
+import { useSlotId } from '@react-aria/utils';
+import { useId } from 'react';
+import { FieldButton } from '@keystar/ui/button';
+import { Icon } from '@keystar/ui/icon';
+import { chevronRightIcon } from '@keystar/ui/icon/icons/chevronRightIcon';
+import { VStack, HStack } from '@keystar/ui/layout';
+import { css, tokenSchema } from '@keystar/ui/style';
+import { Text } from '@keystar/ui/typography';
+import { textCursorInputIcon } from '@keystar/ui/icon/icons/textCursorInputIcon';
+import { E as EmptyState } from './utils-5e1d4d28.esm.js';
+import { s as serializeItemForConditionalFilters, a as resolveFieldMode, t as testFilter } from './filters-8c8616f9.esm.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function Fields({
+  view,
+  position,
+  fields,
+  groups = [],
+  forceValidation,
+  invalidFields,
+  onChange,
+  value: itemValue,
+  fieldModes = {},
+  fieldPositions = {},
+  isRequireds
+}) {
+  const fieldDomByKey = {};
+  let focused = false;
+  const serialized = serializeItemForConditionalFilters(fields, itemValue);
+  for (const fieldKey in fields) {
+    var _fieldPositions$field, _fieldModes$fieldKey, _isRequireds$fieldKey;
+    const field = fields[fieldKey];
+    const fieldPosition = (_fieldPositions$field = fieldPositions[fieldKey]) !== null && _fieldPositions$field !== void 0 ? _fieldPositions$field : field.itemView.fieldPosition;
+    if (view === 'itemView' && fieldPosition !== position) continue;
+    const fieldModeFilter = (_fieldModes$fieldKey = fieldModes[fieldKey]) !== null && _fieldModes$fieldKey !== void 0 ? _fieldModes$fieldKey : field[view].fieldMode;
+    const fieldMode = resolveFieldMode(fieldModeFilter, serialized, view);
+    if (fieldMode === 'hidden') continue;
+    const fieldValue = itemValue[fieldKey];
+    const autoFocus = focused === false; // not great, but focuses the first field
+    focused = true;
+    fieldDomByKey[fieldKey] = /*#__PURE__*/jsx(field.views.Field, {
+      autoFocus: autoFocus,
+      forceValidation: forceValidation && invalidFields.has(fieldKey),
+      field: field.controller,
+      isRequired: testFilter((_isRequireds$fieldKey = isRequireds[fieldKey]) !== null && _isRequireds$fieldKey !== void 0 ? _isRequireds$fieldKey : false, serialized),
+      onChange: fieldMode === 'read' || onChange === undefined ? undefined : newFieldValue => {
+        onChange({
+          ...itemValue,
+          [field.controller.fieldKey]: newFieldValue
+        });
+      },
+      value: fieldValue,
+      itemValue: itemValue
+    }, fieldKey);
+  }
+  const groupByFieldKey = {};
+  for (const group of groups) {
+    for (const {
+      key: fieldKey
+    } of group.fields) {
+      groupByFieldKey[fieldKey] = group;
+    }
+  }
+
+  // WARNING: for no fields and position: sidebar, we show an empty state, that is OK
+  if (Object.keys(fieldDomByKey).length === 0 && position === 'form') {
+    return /*#__PURE__*/jsx(EmptyState, {
+      icon: textCursorInputIcon,
+      title: "No fields",
+      message: "There are no fields to be shown."
+    });
+  }
+  return (
+    /*#__PURE__*/
+    // the "inline" container allows fields to react to the width of their column
+    jsx(VStack, {
+      gap: "xlarge",
+      UNSAFE_style: {
+        containerType: 'inline-size'
+      },
+      children: [...function* () {
+        const rendered = {};
+        for (const fieldKey in fields) {
+          var _fieldDomByKey$fieldK;
+          if (fieldKey in rendered) continue;
+          const group = groupByFieldKey[fieldKey];
+          if (group) {
+            const fields = [...function* () {
+              for (const {
+                key: fieldKey
+              } of group.fields) {
+                if (fieldKey in rendered) continue;
+                if (fieldDomByKey[fieldKey]) {
+                  yield fieldDomByKey[fieldKey];
+                }
+                rendered[fieldKey] = true;
+              }
+            }()];
+            if (fields.length === 0) continue;
+            yield /*#__PURE__*/jsx(FieldGroup, {
+              label: group.label,
+              description: group.description,
+              children: fields
+            }, group.label);
+            continue;
+          }
+          yield (_fieldDomByKey$fieldK = fieldDomByKey[fieldKey]) !== null && _fieldDomByKey$fieldK !== void 0 ? _fieldDomByKey$fieldK : null;
+          rendered[fieldKey] = true;
+        }
+      }()]
+    })
+  );
+}
+function FieldGroup({
+  description,
+  label,
+  children
+}) {
+  const labelId = useId();
+  const descriptionId = useSlotId([Boolean(description)]);
+  return /*#__PURE__*/jsxs("details", {
+    "aria-labelledby": labelId,
+    "aria-describedby": descriptionId,
+    open: true,
+    children: [/*#__PURE__*/jsxs(HStack, {
+      gap: "medium",
+      alignItems: "center",
+      elementType: "summary",
+      UNSAFE_className: css({
+        listStyle: 'none',
+        outline: 0,
+        '::-webkit-details-marker': {
+          display: 'none'
+        }
+      }),
+      children: [/*#__PURE__*/jsx(FieldButton
+      // @ts-expect-error — this works, it's just not exposed in the public types
+      , {
+        elementType: "div"
+        // the <summary/> (above) is the focusable element
+        ,
+        excludeFromTabOrder: true,
+        prominence: "low",
+        height: "element.small",
+        width: "element.small",
+        minWidth: "auto",
+        UNSAFE_className: css({
+          'details[open] &': {
+            transform: 'rotate(90deg)'
+          }
+        }),
+        children: /*#__PURE__*/jsx(Icon, {
+          src: chevronRightIcon,
+          size: "medium"
+        })
+      }), /*#__PURE__*/jsxs(VStack, {
+        gap: "regular",
+        UNSAFE_className: css({
+          cursor: 'default',
+          userSelect: 'none'
+        }),
+        children: [/*#__PURE__*/jsx(Text, {
+          color: "neutralEmphasis",
+          size: "large",
+          weight: "medium",
+          id: labelId,
+          position: "relative",
+          children: label
+        }), !!description && /*#__PURE__*/jsx(Text, {
+          id: descriptionId,
+          size: "regular",
+          color: "neutralSecondary",
+          children: description
+        })]
+      })]
+    }), /*#__PURE__*/jsxs(HStack, {
+      gap: "medium",
+      paddingTop: "medium",
+      children: [/*#__PURE__*/jsx(GroupIndicatorLine, {}), /*#__PURE__*/jsx(VStack, {
+        gap: "xlarge",
+        flex: true,
+        children: children
+      })]
+    })]
+  });
+}
+function GroupIndicatorLine() {
+  return /*#__PURE__*/jsx(HStack, {
+    justifyContent: "center",
+    width: "element.small",
+    children: /*#__PURE__*/jsx("div", {
+      className: css({
+        height: '100%',
+        width: tokenSchema.size.alias.focusRing,
+        borderRadius: tokenSchema.size.alias.focusRing,
+        backgroundColor: tokenSchema.color.border.neutral,
+        flexShrink: 0
+      })
+    })
+  });
+}
+
+export { Fields as F, GroupIndicatorLine as G };

package/dist/Fields-e2c28056.cjs.js

@@ -0,0 +1,206 @@
+'use strict';
+
+var utils$1 = require('@react-aria/utils');
+var react = require('react');
+var button = require('@keystar/ui/button');
+var icon = require('@keystar/ui/icon');
+var chevronRightIcon = require('@keystar/ui/icon/icons/chevronRightIcon');
+var layout = require('@keystar/ui/layout');
+var style = require('@keystar/ui/style');
+var typography = require('@keystar/ui/typography');
+var textCursorInputIcon = require('@keystar/ui/icon/icons/textCursorInputIcon');
+var utils = require('./utils-230cddb1.cjs.js');
+var filters = require('./filters-b3e5eb50.cjs.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function Fields({
+  view,
+  position,
+  fields,
+  groups = [],
+  forceValidation,
+  invalidFields,
+  onChange,
+  value: itemValue,
+  fieldModes = {},
+  fieldPositions = {},
+  isRequireds
+}) {
+  const fieldDomByKey = {};
+  let focused = false;
+  const serialized = filters.serializeItemForConditionalFilters(fields, itemValue);
+  for (const fieldKey in fields) {
+    var _fieldPositions$field, _fieldModes$fieldKey, _isRequireds$fieldKey;
+    const field = fields[fieldKey];
+    const fieldPosition = (_fieldPositions$field = fieldPositions[fieldKey]) !== null && _fieldPositions$field !== void 0 ? _fieldPositions$field : field.itemView.fieldPosition;
+    if (view === 'itemView' && fieldPosition !== position) continue;
+    const fieldModeFilter = (_fieldModes$fieldKey = fieldModes[fieldKey]) !== null && _fieldModes$fieldKey !== void 0 ? _fieldModes$fieldKey : field[view].fieldMode;
+    const fieldMode = filters.resolveFieldMode(fieldModeFilter, serialized, view);
+    if (fieldMode === 'hidden') continue;
+    const fieldValue = itemValue[fieldKey];
+    const autoFocus = focused === false; // not great, but focuses the first field
+    focused = true;
+    fieldDomByKey[fieldKey] = /*#__PURE__*/jsxRuntime.jsx(field.views.Field, {
+      autoFocus: autoFocus,
+      forceValidation: forceValidation && invalidFields.has(fieldKey),
+      field: field.controller,
+      isRequired: filters.testFilter((_isRequireds$fieldKey = isRequireds[fieldKey]) !== null && _isRequireds$fieldKey !== void 0 ? _isRequireds$fieldKey : false, serialized),
+      onChange: fieldMode === 'read' || onChange === undefined ? undefined : newFieldValue => {
+        onChange({
+          ...itemValue,
+          [field.controller.fieldKey]: newFieldValue
+        });
+      },
+      value: fieldValue,
+      itemValue: itemValue
+    }, fieldKey);
+  }
+  const groupByFieldKey = {};
+  for (const group of groups) {
+    for (const {
+      key: fieldKey
+    } of group.fields) {
+      groupByFieldKey[fieldKey] = group;
+    }
+  }
+
+  // WARNING: for no fields and position: sidebar, we show an empty state, that is OK
+  if (Object.keys(fieldDomByKey).length === 0 && position === 'form') {
+    return /*#__PURE__*/jsxRuntime.jsx(utils.EmptyState, {
+      icon: textCursorInputIcon.textCursorInputIcon,
+      title: "No fields",
+      message: "There are no fields to be shown."
+    });
+  }
+  return (
+    /*#__PURE__*/
+    // the "inline" container allows fields to react to the width of their column
+    jsxRuntime.jsx(layout.VStack, {
+      gap: "xlarge",
+      UNSAFE_style: {
+        containerType: 'inline-size'
+      },
+      children: [...function* () {
+        const rendered = {};
+        for (const fieldKey in fields) {
+          var _fieldDomByKey$fieldK;
+          if (fieldKey in rendered) continue;
+          const group = groupByFieldKey[fieldKey];
+          if (group) {
+            const fields = [...function* () {
+              for (const {
+                key: fieldKey
+              } of group.fields) {
+                if (fieldKey in rendered) continue;
+                if (fieldDomByKey[fieldKey]) {
+                  yield fieldDomByKey[fieldKey];
+                }
+                rendered[fieldKey] = true;
+              }
+            }()];
+            if (fields.length === 0) continue;
+            yield /*#__PURE__*/jsxRuntime.jsx(FieldGroup, {
+              label: group.label,
+              description: group.description,
+              children: fields
+            }, group.label);
+            continue;
+          }
+          yield (_fieldDomByKey$fieldK = fieldDomByKey[fieldKey]) !== null && _fieldDomByKey$fieldK !== void 0 ? _fieldDomByKey$fieldK : null;
+          rendered[fieldKey] = true;
+        }
+      }()]
+    })
+  );
+}
+function FieldGroup({
+  description,
+  label,
+  children
+}) {
+  const labelId = react.useId();
+  const descriptionId = utils$1.useSlotId([Boolean(description)]);
+  return /*#__PURE__*/jsxRuntime.jsxs("details", {
+    "aria-labelledby": labelId,
+    "aria-describedby": descriptionId,
+    open: true,
+    children: [/*#__PURE__*/jsxRuntime.jsxs(layout.HStack, {
+      gap: "medium",
+      alignItems: "center",
+      elementType: "summary",
+      UNSAFE_className: style.css({
+        listStyle: 'none',
+        outline: 0,
+        '::-webkit-details-marker': {
+          display: 'none'
+        }
+      }),
+      children: [/*#__PURE__*/jsxRuntime.jsx(button.FieldButton
+      // @ts-expect-error — this works, it's just not exposed in the public types
+      , {
+        elementType: "div"
+        // the <summary/> (above) is the focusable element
+        ,
+        excludeFromTabOrder: true,
+        prominence: "low",
+        height: "element.small",
+        width: "element.small",
+        minWidth: "auto",
+        UNSAFE_className: style.css({
+          'details[open] &': {
+            transform: 'rotate(90deg)'
+          }
+        }),
+        children: /*#__PURE__*/jsxRuntime.jsx(icon.Icon, {
+          src: chevronRightIcon.chevronRightIcon,
+          size: "medium"
+        })
+      }), /*#__PURE__*/jsxRuntime.jsxs(layout.VStack, {
+        gap: "regular",
+        UNSAFE_className: style.css({
+          cursor: 'default',
+          userSelect: 'none'
+        }),
+        children: [/*#__PURE__*/jsxRuntime.jsx(typography.Text, {
+          color: "neutralEmphasis",
+          size: "large",
+          weight: "medium",
+          id: labelId,
+          position: "relative",
+          children: label
+        }), !!description && /*#__PURE__*/jsxRuntime.jsx(typography.Text, {
+          id: descriptionId,
+          size: "regular",
+          color: "neutralSecondary",
+          children: description
+        })]
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsxs(layout.HStack, {
+      gap: "medium",
+      paddingTop: "medium",
+      children: [/*#__PURE__*/jsxRuntime.jsx(GroupIndicatorLine, {}), /*#__PURE__*/jsxRuntime.jsx(layout.VStack, {
+        gap: "xlarge",
+        flex: true,
+        children: children
+      })]
+    })]
+  });
+}
+function GroupIndicatorLine() {
+  return /*#__PURE__*/jsxRuntime.jsx(layout.HStack, {
+    justifyContent: "center",
+    width: "element.small",
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: style.css({
+        height: '100%',
+        width: style.tokenSchema.size.alias.focusRing,
+        borderRadius: style.tokenSchema.size.alias.focusRing,
+        backgroundColor: style.tokenSchema.color.border.neutral,
+        flexShrink: 0
+      })
+    })
+  });
+}
+
+exports.Fields = Fields;
+exports.GroupIndicatorLine = GroupIndicatorLine;

package/dist/GraphQLErrorNotice-cd74180d.cjs.js

@@ -0,0 +1,57 @@
+'use strict';
+
+var client = require('@apollo/client');
+var layout = require('@keystar/ui/layout');
+var notice = require('@keystar/ui/notice');
+var slots = require('@keystar/ui/slots');
+var typography = require('@keystar/ui/typography');
+var jsxRuntime = require('react/jsx-runtime');
+
+function GraphQLErrorNotice({
+  errors: errors_ = []
+}) {
+  let errors = errors_.flatMap(x => {
+    if (!x) return [];
+    if (client.CombinedGraphQLErrors.is(x)) {
+      return x.errors;
+    }
+    return x;
+  });
+  if (!errors.length) return null;
+  return /*#__PURE__*/jsxRuntime.jsxs(notice.Notice, {
+    tone: "critical",
+    children: [/*#__PURE__*/jsxRuntime.jsx(typography.Heading, {
+      children: "Errors"
+    }), /*#__PURE__*/jsxRuntime.jsx(slots.Content, {
+      children: /*#__PURE__*/jsxRuntime.jsx(layout.VStack, {
+        elementType: "ul",
+        gap: "large",
+        children: [...function* () {
+          let i = 0;
+          for (const error of errors) {
+            const lines = error.message.split('\n');
+            for (const line of lines) {
+              yield /*#__PURE__*/jsxRuntime.jsx(typography.Text, {
+                elementType: "li",
+                children: line
+              }, i++);
+            }
+            if ('result' in error && typeof error.result === 'object' && error.result !== null && 'errors' in error.result && Array.isArray(error.result.errors)) {
+              for (const {
+                message
+              } of error.result.errors) {
+                if (typeof message !== 'string') continue;
+                yield /*#__PURE__*/jsxRuntime.jsx(typography.Text, {
+                  elementType: "li",
+                  children: message
+                }, i++);
+              }
+            }
+          }
+        }()]
+      })
+    })]
+  });
+}
+
+exports.GraphQLErrorNotice = GraphQLErrorNotice;

package/dist/GraphQLErrorNotice-d9f0931b.esm.js

@@ -0,0 +1,55 @@
+import { CombinedGraphQLErrors } from '@apollo/client';
+import { VStack } from '@keystar/ui/layout';
+import { Notice } from '@keystar/ui/notice';
+import { Content } from '@keystar/ui/slots';
+import { Heading, Text } from '@keystar/ui/typography';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function GraphQLErrorNotice({
+  errors: errors_ = []
+}) {
+  let errors = errors_.flatMap(x => {
+    if (!x) return [];
+    if (CombinedGraphQLErrors.is(x)) {
+      return x.errors;
+    }
+    return x;
+  });
+  if (!errors.length) return null;
+  return /*#__PURE__*/jsxs(Notice, {
+    tone: "critical",
+    children: [/*#__PURE__*/jsx(Heading, {
+      children: "Errors"
+    }), /*#__PURE__*/jsx(Content, {
+      children: /*#__PURE__*/jsx(VStack, {
+        elementType: "ul",
+        gap: "large",
+        children: [...function* () {
+          let i = 0;
+          for (const error of errors) {
+            const lines = error.message.split('\n');
+            for (const line of lines) {
+              yield /*#__PURE__*/jsx(Text, {
+                elementType: "li",
+                children: line
+              }, i++);
+            }
+            if ('result' in error && typeof error.result === 'object' && error.result !== null && 'errors' in error.result && Array.isArray(error.result.errors)) {
+              for (const {
+                message
+              } of error.result.errors) {
+                if (typeof message !== 'string') continue;
+                yield /*#__PURE__*/jsx(Text, {
+                  elementType: "li",
+                  children: message
+                }, i++);
+              }
+            }
+          }
+        }()]
+      })
+    })]
+  });
+}
+
+export { GraphQLErrorNotice as G };

package/dist/NullableFieldWrapper-6ea48af3.esm.js

@@ -0,0 +1,71 @@
+import { Checkbox } from '@keystar/ui/checkbox';
+import { Icon } from '@keystar/ui/icon';
+import { cornerDownRightIcon } from '@keystar/ui/icon/icons/cornerDownRightIcon';
+import { VStack, HStack } from '@keystar/ui/layout';
+import { css, tokenSchema } from '@keystar/ui/style';
+import { Text } from '@keystar/ui/typography';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function InlineCode(props) {
+  return /*#__PURE__*/jsx("code", {
+    className: css({
+      backgroundColor: tokenSchema.color.alias.backgroundHovered,
+      borderRadius: tokenSchema.size.radius.xsmall,
+      color: tokenSchema.color.foreground.neutralEmphasis,
+      fontFamily: tokenSchema.typography.fontFamily.code,
+      paddingInline: tokenSchema.size.space.xsmall
+    }),
+    ...props
+  });
+}
+
+/**
+ * Wraps a field component with a "group" (ARIA `<fieldset>`), and
+ * appends a checkbox to allow setting the value to `null`.
+ *
+ * Prefer a more elegant solution where possible, like clearing the value or
+ * deselecting an option.
+ */
+function NullableFieldWrapper(props) {
+  const {
+    autoFocus,
+    children,
+    isAllowed,
+    isNull,
+    isReadOnly,
+    label,
+    onChange
+  } = props;
+  if (!isAllowed) {
+    return children;
+  }
+  return /*#__PURE__*/jsxs(VStack, {
+    "aria-label": label,
+    gap: "medium",
+    role: "group",
+    children: [children, /*#__PURE__*/jsxs(HStack, {
+      gap: "regular",
+      paddingStart: "regular",
+      children: [/*#__PURE__*/jsx(Icon, {
+        src: cornerDownRightIcon,
+        color: "neutralTertiary"
+      }), /*#__PURE__*/jsx(Checkbox, {
+        prominence: "low",
+        autoFocus: isNull && autoFocus,
+        isReadOnly: isReadOnly,
+        isSelected: isNull,
+        onChange: onChange,
+        UNSAFE_style: {
+          marginTop: `calc(${tokenSchema.size.icon.small} / -2)`
+        },
+        children: /*#__PURE__*/jsxs(Text, {
+          children: ["Set to ", /*#__PURE__*/jsx(InlineCode, {
+            children: "null"
+          })]
+        })
+      })]
+    })]
+  });
+}
+
+export { InlineCode as I, NullableFieldWrapper as N };

package/dist/NullableFieldWrapper-daa0a080.cjs.js

@@ -0,0 +1,74 @@
+'use strict';
+
+var checkbox = require('@keystar/ui/checkbox');
+var icon = require('@keystar/ui/icon');
+var cornerDownRightIcon = require('@keystar/ui/icon/icons/cornerDownRightIcon');
+var layout = require('@keystar/ui/layout');
+var style = require('@keystar/ui/style');
+var typography = require('@keystar/ui/typography');
+var jsxRuntime = require('react/jsx-runtime');
+
+function InlineCode(props) {
+  return /*#__PURE__*/jsxRuntime.jsx("code", {
+    className: style.css({
+      backgroundColor: style.tokenSchema.color.alias.backgroundHovered,
+      borderRadius: style.tokenSchema.size.radius.xsmall,
+      color: style.tokenSchema.color.foreground.neutralEmphasis,
+      fontFamily: style.tokenSchema.typography.fontFamily.code,
+      paddingInline: style.tokenSchema.size.space.xsmall
+    }),
+    ...props
+  });
+}
+
+/**
+ * Wraps a field component with a "group" (ARIA `<fieldset>`), and
+ * appends a checkbox to allow setting the value to `null`.
+ *
+ * Prefer a more elegant solution where possible, like clearing the value or
+ * deselecting an option.
+ */
+function NullableFieldWrapper(props) {
+  const {
+    autoFocus,
+    children,
+    isAllowed,
+    isNull,
+    isReadOnly,
+    label,
+    onChange
+  } = props;
+  if (!isAllowed) {
+    return children;
+  }
+  return /*#__PURE__*/jsxRuntime.jsxs(layout.VStack, {
+    "aria-label": label,
+    gap: "medium",
+    role: "group",
+    children: [children, /*#__PURE__*/jsxRuntime.jsxs(layout.HStack, {
+      gap: "regular",
+      paddingStart: "regular",
+      children: [/*#__PURE__*/jsxRuntime.jsx(icon.Icon, {
+        src: cornerDownRightIcon.cornerDownRightIcon,
+        color: "neutralTertiary"
+      }), /*#__PURE__*/jsxRuntime.jsx(checkbox.Checkbox, {
+        prominence: "low",
+        autoFocus: isNull && autoFocus,
+        isReadOnly: isReadOnly,
+        isSelected: isNull,
+        onChange: onChange,
+        UNSAFE_style: {
+          marginTop: `calc(${style.tokenSchema.size.icon.small} / -2)`
+        },
+        children: /*#__PURE__*/jsxRuntime.jsxs(typography.Text, {
+          children: ["Set to ", /*#__PURE__*/jsxRuntime.jsx(InlineCode, {
+            children: "null"
+          })]
+        })
+      })]
+    })]
+  });
+}
+
+exports.InlineCode = InlineCode;
+exports.NullableFieldWrapper = NullableFieldWrapper;