@nixxie-cms/core 1.0.0

package/fields/types/bytes/views/dist/nixxie-cms-core-fields-types-bytes-views.esm.js

@@ -0,0 +1,234 @@
+import { TextField } from '@keystar/ui/text-field';
+import { useState } from 'react';
+import '@keystar/ui/table';
+import { jsx } from 'react/jsx-runtime';
+import '@keystar/ui/style';
+import { N as NullableFieldWrapper } from '../../../../../dist/NullableFieldWrapper-6ea48af3.esm.js';
+import '@babel/runtime/helpers/defineProperty';
+import '@keystar/ui/button';
+import '@keystar/ui/dialog';
+import '@keystar/ui/icon';
+import '@keystar/ui/icon/icons/alertTriangleIcon';
+import '@keystar/ui/layout';
+import '@keystar/ui/notice';
+import '@keystar/ui/slots';
+import '@keystar/ui/typography';
+import 'next/link';
+import 'apollo-upload-client/UploadHttpLink.mjs';
+import 'next/head';
+import '@keystar/ui/core';
+import '@keystar/ui/toast';
+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-6f7f5331.esm.js';
+import '@apollo/client';
+import '@apollo/client/react';
+import 'next/router';
+import '@react-aria/utils';
+import '@keystar/ui/icon/icons/textCursorInputIcon';
+import '@keystar/ui/utils';
+import 'fast-deep-equal';
+import 'graphql';
+import { e as entriesTyped } from '../../../../../dist/utils-f9556354.esm.js';
+import '@keystar/ui/checkbox';
+import '@keystar/ui/icon/icons/cornerDownRightIcon';
+
+function Field(props) {
+  const {
+    autoFocus,
+    field,
+    forceValidation,
+    onChange,
+    value,
+    isRequired
+  } = props;
+  const [shouldShowErrors, setShouldShowErrors] = useState(false);
+  const validationMessages = validate(value, props.isRequired, field.label);
+  const isReadOnly = onChange == null;
+  const isNull = value.inner.kind === 'null';
+  return /*#__PURE__*/jsx(NullableFieldWrapper, {
+    isAllowed: field.isNullable,
+    autoFocus: isNull && autoFocus,
+    label: field.label,
+    isReadOnly: isReadOnly,
+    isNull: isNull,
+    onChange: () => {
+      if (!onChange) return;
+      const inner = value.inner.kind === 'value' ? {
+        kind: 'null',
+        prev: value.inner.value
+      } : {
+        kind: 'value',
+        value: value.inner.prev
+      };
+      onChange({
+        ...value,
+        inner
+      });
+    },
+    children: /*#__PURE__*/jsx(TextField, {
+      autoFocus: autoFocus,
+      description: field.description,
+      label: field.label,
+      errorMessage: !!validationMessages.length && (shouldShowErrors || forceValidation) ? validationMessages.join('. ') : undefined,
+      isDisabled: isNull,
+      isReadOnly: isReadOnly,
+      isRequired: isRequired,
+      onBlur: () => {
+        setShouldShowErrors(true);
+      },
+      onChange: textValue => {
+        if (!onChange) return;
+        onChange({
+          ...value,
+          inner: {
+            kind: 'value',
+            value: textValue
+          }
+        });
+      }
+      // maintain the previous value when set to null in aid of continuity for
+      // the user. it will be cleared when the item is saved
+      ,
+      value: value.inner.kind === 'value' ? value.inner.value : value.inner.prev
+    })
+  });
+}
+function validate(value, isRequired, fieldLabel) {
+  // if the value is the same as the initial for an update, we don't want to block saving
+  // since we're not gonna send it anyway if it's the same
+  // and going "fix this thing that is unrelated to the thing you're doing" is bad
+  // and also bc it could be null bc of read access control
+  if (value.kind === 'update' && (value.initial.kind === 'null' && value.inner.kind === 'null' || value.initial.kind === 'value' && value.inner.kind === 'value' && value.inner.value === value.initial.value)) {
+    return [];
+  }
+  if (value.inner.kind === 'null') {
+    if (isRequired) return [`${fieldLabel} is required`];
+    return [];
+  }
+  return [];
+}
+function deserializeTextValue(value) {
+  if (value === null) return {
+    kind: 'null',
+    prev: ''
+  };
+  return {
+    kind: 'value',
+    value
+  };
+}
+function controller(config) {
+  return {
+    fieldKey: config.fieldKey,
+    label: config.label,
+    description: config.description,
+    defaultValue: {
+      kind: 'create',
+      inner: deserializeTextValue(config.fieldMeta.defaultValue)
+    },
+    isNullable: config.fieldMeta.isNullable,
+    deserialize: data => {
+      const inner = deserializeTextValue(data[config.fieldKey]);
+      return {
+        kind: 'update',
+        inner,
+        initial: inner
+      };
+    },
+    serialize: value => ({
+      [config.fieldKey]: value.inner.kind === 'null' ? null : value.inner.value
+    }),
+    validate: (val, opts) => validate(val, opts.isRequired, config.label).length === 0,
+    graphqlSelection: config.fieldKey,
+    filter: {
+      Filter(props) {
+        const {
+          autoFocus,
+          context,
+          typeLabel,
+          onChange,
+          type,
+          value,
+          ...otherProps
+        } = props;
+        const labelProps = context === 'add' ? {
+          label: config.label,
+          description: typeLabel
+        } : {
+          label: typeLabel
+        };
+
+        // NOTE: "type" is a valid attribute for an input element, however the
+        // prop represents a filter type in this context e.g. "contains_i", so
+        // we're filtering it out of the spread.
+        // TODO: more consideration is needed for the filter API, once
+        // requirements are better understood.
+        return /*#__PURE__*/jsx(TextField, {
+          ...otherProps,
+          ...labelProps,
+          autoFocus: autoFocus,
+          onChange: onChange,
+          value: value
+        });
+      },
+      Label({
+        label,
+        value
+      }) {
+        const trimmedLabel = label.toLowerCase().replace(' exactly', '');
+        return `${trimmedLabel} "${value}"`;
+      },
+      graphql: ({
+        type,
+        value
+      }) => {
+        const isNot = type.startsWith('not_');
+        const filter = {
+          equals: value
+        };
+        return {
+          [config.fieldKey]: {
+            ...(isNot ? {
+              not: filter
+            } : filter)
+          }
+        };
+      },
+      parseGraphQL: value => {
+        return entriesTyped(value).flatMap(([type, _value]) => {
+          if (!_value) return [];
+          if (type === 'equals') return {
+            type: 'is_i',
+            value: _value
+          };
+          if (type === 'not') {
+            const notValue = _value;
+            if (notValue !== null && notValue !== void 0 && notValue.equals) return {
+              type: 'not_i',
+              value: notValue.equals
+            };
+          }
+          return [];
+        });
+      },
+      types: {
+        is_i: {
+          label: 'Is exactly',
+          initialValue: ''
+        },
+        not_i: {
+          label: 'Is not exactly',
+          initialValue: ''
+        }
+      }
+    }
+  };
+}
+
+export { Field, controller };

package/fields/types/bytes/views/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/nixxie-cms-core-fields-types-bytes-views.cjs.js",
+  "module": "dist/nixxie-cms-core-fields-types-bytes-views.esm.js"
+}

package/fields/types/calendarDay/views/dist/nixxie-cms-core-fields-types-calendarDay-views.cjs.d.ts

@@ -0,0 +1,2 @@
+export * from "../../../../../dist/declarations/src/fields/types/calendarDay/views/index.js";
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibml4eGllLWNtcy1jb3JlLWZpZWxkcy10eXBlcy1jYWxlbmRhckRheS12aWV3cy5janMuZC50cyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL2Rpc3QvZGVjbGFyYXRpb25zL3NyYy9maWVsZHMvdHlwZXMvY2FsZW5kYXJEYXkvdmlld3MvaW5kZXguZC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSJ9

package/fields/types/calendarDay/views/dist/nixxie-cms-core-fields-types-calendarDay-views.cjs.js

@@ -0,0 +1,147 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var date = require('@internationalized/date');
+var i18n = require('@react-aria/i18n');
+var react = require('react');
+var button = require('@keystar/ui/button');
+var dateTime = require('@keystar/ui/date-time');
+var icon = require('@keystar/ui/icon');
+var calendarClockIcon = require('@keystar/ui/icon/icons/calendarClockIcon');
+var layout = require('@keystar/ui/layout');
+var textField = require('@keystar/ui/text-field');
+var tooltip = require('@keystar/ui/tooltip');
+var typography = require('@keystar/ui/typography');
+var jsxRuntime = require('react/jsx-runtime');
+
+function Field(props) {
+  const {
+    field,
+    value,
+    forceValidation,
+    onChange,
+    isRequired
+  } = props;
+  const parsedValue = value.value ? date.parseDate(value.value) : null;
+  const [isDirty, setDirty] = react.useState(false);
+  const [isReadonlyUTC, toggleReadonlyUTC] = react.useReducer(prev => !prev, false);
+  const dateFormatter = i18n.useDateFormatter({
+    dateStyle: 'long'
+  });
+  const placeholderValue = react.useMemo(() => {
+    const today = date.now(date.getLocalTimeZone());
+    return new date.CalendarDate(today.year, today.month, today.day);
+  }, []);
+
+  // the read-only date field is deceptively interactive, better to render a
+  // text field to avoid confusion. when there's no value the field is disabled,
+  // placeholder text is shown, and the toggle button is hidden
+  if (!onChange) {
+    return /*#__PURE__*/jsxRuntime.jsxs(layout.Grid, {
+      columns: parsedValue ? 'minmax(0, 1fr) auto' : undefined,
+      gap: "regular",
+      alignItems: "end",
+      children: [/*#__PURE__*/jsxRuntime.jsx(textField.TextField, {
+        label: field.label,
+        description: field.description,
+        isDisabled: !parsedValue,
+        isReadOnly: true,
+        value: parsedValue ? isReadonlyUTC ? parsedValue.toString() : dateFormatter.format(parsedValue.toDate(date.getLocalTimeZone())) : 'yyyy-mm-dd'
+      }), !!parsedValue && /*#__PURE__*/jsxRuntime.jsxs(tooltip.TooltipTrigger, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(button.ToggleButton, {
+          "aria-label": "utc time",
+          isSelected: isReadonlyUTC,
+          onPress: toggleReadonlyUTC,
+          children: /*#__PURE__*/jsxRuntime.jsx(icon.Icon, {
+            src: calendarClockIcon.calendarClockIcon
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx(tooltip.Tooltip, {
+          children: "Local / UTC"
+        })]
+      })]
+    });
+  }
+  const showValidation = isDirty || forceValidation;
+  const validationMessage = showValidation ? validate(value, isRequired, field.label) : undefined;
+  return /*#__PURE__*/jsxRuntime.jsx(dateTime.DatePicker, {
+    label: field.label,
+    description: field.description,
+    errorMessage: showValidation ? validationMessage : undefined,
+    granularity: "day"
+    // isReadOnly={undefined} // read-only state handled above
+    ,
+    isRequired: isRequired
+    // NOTE: in addition to providing a cue for users about the expected input
+    // format, the `placeholderValue` determines the type of value for the
+    // field. the implementation below ensures `CalendarDate` so we can avoid
+    // unnecessary guards or transformations.
+    ,
+    placeholderValue: placeholderValue,
+    onBlur: () => setDirty(true),
+    onChange: datetime => {
+      var _datetime$toString;
+      onChange({
+        ...value,
+        value: (_datetime$toString = datetime === null || datetime === void 0 ? void 0 : datetime.toString()) !== null && _datetime$toString !== void 0 ? _datetime$toString : null
+      });
+    },
+    value: parsedValue
+  });
+}
+function validate(value, isRequired, label) {
+  // if we receive null initially on the item view and the current value is null,
+  // we should always allow saving it because:
+  // - the value might be null in the database and we don't want to prevent saving the whole item because of that
+  // - we might have null because of an access control error
+  if (value.kind === 'update' && value.initial === null && value.value === null) {
+    return undefined;
+  }
+  if (isRequired && value.value === null) {
+    return `${label} is required`;
+  }
+  return undefined;
+}
+const Cell = ({
+  value
+}) => {
+  const dateFormatter = i18n.useDateFormatter({
+    dateStyle: 'medium'
+  });
+  return value ? /*#__PURE__*/jsxRuntime.jsx(typography.Text, {
+    children: dateFormatter.format(new Date(value))
+  }) : null;
+};
+function controller(config) {
+  return {
+    fieldKey: config.fieldKey,
+    label: config.label,
+    description: config.description,
+    graphqlSelection: config.fieldKey,
+    fieldMeta: config.fieldMeta,
+    defaultValue: {
+      kind: 'create',
+      value: null
+    },
+    deserialize: data => {
+      const value = data[config.fieldKey];
+      return {
+        kind: 'update',
+        initial: value,
+        value
+      };
+    },
+    serialize: ({
+      value
+    }) => {
+      return {
+        [config.fieldKey]: value
+      };
+    },
+    validate: (value, opts) => validate(value, opts.isRequired, config.label) === undefined
+  };
+}
+
+exports.Cell = Cell;
+exports.Field = Field;
+exports.controller = controller;

package/fields/types/calendarDay/views/dist/nixxie-cms-core-fields-types-calendarDay-views.esm.js

@@ -0,0 +1,141 @@
+import { parseDate, now, getLocalTimeZone, CalendarDate } from '@internationalized/date';
+import { useDateFormatter } from '@react-aria/i18n';
+import { useState, useReducer, useMemo } from 'react';
+import { ToggleButton } from '@keystar/ui/button';
+import { DatePicker } from '@keystar/ui/date-time';
+import { Icon } from '@keystar/ui/icon';
+import { calendarClockIcon } from '@keystar/ui/icon/icons/calendarClockIcon';
+import { Grid } from '@keystar/ui/layout';
+import { TextField } from '@keystar/ui/text-field';
+import { TooltipTrigger, Tooltip } from '@keystar/ui/tooltip';
+import { Text } from '@keystar/ui/typography';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function Field(props) {
+  const {
+    field,
+    value,
+    forceValidation,
+    onChange,
+    isRequired
+  } = props;
+  const parsedValue = value.value ? parseDate(value.value) : null;
+  const [isDirty, setDirty] = useState(false);
+  const [isReadonlyUTC, toggleReadonlyUTC] = useReducer(prev => !prev, false);
+  const dateFormatter = useDateFormatter({
+    dateStyle: 'long'
+  });
+  const placeholderValue = useMemo(() => {
+    const today = now(getLocalTimeZone());
+    return new CalendarDate(today.year, today.month, today.day);
+  }, []);
+
+  // the read-only date field is deceptively interactive, better to render a
+  // text field to avoid confusion. when there's no value the field is disabled,
+  // placeholder text is shown, and the toggle button is hidden
+  if (!onChange) {
+    return /*#__PURE__*/jsxs(Grid, {
+      columns: parsedValue ? 'minmax(0, 1fr) auto' : undefined,
+      gap: "regular",
+      alignItems: "end",
+      children: [/*#__PURE__*/jsx(TextField, {
+        label: field.label,
+        description: field.description,
+        isDisabled: !parsedValue,
+        isReadOnly: true,
+        value: parsedValue ? isReadonlyUTC ? parsedValue.toString() : dateFormatter.format(parsedValue.toDate(getLocalTimeZone())) : 'yyyy-mm-dd'
+      }), !!parsedValue && /*#__PURE__*/jsxs(TooltipTrigger, {
+        children: [/*#__PURE__*/jsx(ToggleButton, {
+          "aria-label": "utc time",
+          isSelected: isReadonlyUTC,
+          onPress: toggleReadonlyUTC,
+          children: /*#__PURE__*/jsx(Icon, {
+            src: calendarClockIcon
+          })
+        }), /*#__PURE__*/jsx(Tooltip, {
+          children: "Local / UTC"
+        })]
+      })]
+    });
+  }
+  const showValidation = isDirty || forceValidation;
+  const validationMessage = showValidation ? validate(value, isRequired, field.label) : undefined;
+  return /*#__PURE__*/jsx(DatePicker, {
+    label: field.label,
+    description: field.description,
+    errorMessage: showValidation ? validationMessage : undefined,
+    granularity: "day"
+    // isReadOnly={undefined} // read-only state handled above
+    ,
+    isRequired: isRequired
+    // NOTE: in addition to providing a cue for users about the expected input
+    // format, the `placeholderValue` determines the type of value for the
+    // field. the implementation below ensures `CalendarDate` so we can avoid
+    // unnecessary guards or transformations.
+    ,
+    placeholderValue: placeholderValue,
+    onBlur: () => setDirty(true),
+    onChange: datetime => {
+      var _datetime$toString;
+      onChange({
+        ...value,
+        value: (_datetime$toString = datetime === null || datetime === void 0 ? void 0 : datetime.toString()) !== null && _datetime$toString !== void 0 ? _datetime$toString : null
+      });
+    },
+    value: parsedValue
+  });
+}
+function validate(value, isRequired, label) {
+  // if we receive null initially on the item view and the current value is null,
+  // we should always allow saving it because:
+  // - the value might be null in the database and we don't want to prevent saving the whole item because of that
+  // - we might have null because of an access control error
+  if (value.kind === 'update' && value.initial === null && value.value === null) {
+    return undefined;
+  }
+  if (isRequired && value.value === null) {
+    return `${label} is required`;
+  }
+  return undefined;
+}
+const Cell = ({
+  value
+}) => {
+  const dateFormatter = useDateFormatter({
+    dateStyle: 'medium'
+  });
+  return value ? /*#__PURE__*/jsx(Text, {
+    children: dateFormatter.format(new Date(value))
+  }) : null;
+};
+function controller(config) {
+  return {
+    fieldKey: config.fieldKey,
+    label: config.label,
+    description: config.description,
+    graphqlSelection: config.fieldKey,
+    fieldMeta: config.fieldMeta,
+    defaultValue: {
+      kind: 'create',
+      value: null
+    },
+    deserialize: data => {
+      const value = data[config.fieldKey];
+      return {
+        kind: 'update',
+        initial: value,
+        value
+      };
+    },
+    serialize: ({
+      value
+    }) => {
+      return {
+        [config.fieldKey]: value
+      };
+    },
+    validate: (value, opts) => validate(value, opts.isRequired, config.label) === undefined
+  };
+}
+
+export { Cell, Field, controller };

package/fields/types/calendarDay/views/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/nixxie-cms-core-fields-types-calendarDay-views.cjs.js",
+  "module": "dist/nixxie-cms-core-fields-types-calendarDay-views.esm.js"
+}

package/fields/types/checkbox/views/dist/nixxie-cms-core-fields-types-checkbox-views.cjs.d.ts

@@ -0,0 +1,2 @@
+export * from "../../../../../dist/declarations/src/fields/types/checkbox/views/index.js";
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibml4eGllLWNtcy1jb3JlLWZpZWxkcy10eXBlcy1jaGVja2JveC12aWV3cy5janMuZC50cyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL2Rpc3QvZGVjbGFyYXRpb25zL3NyYy9maWVsZHMvdHlwZXMvY2hlY2tib3gvdmlld3MvaW5kZXguZC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSJ9

package/fields/types/checkbox/views/dist/nixxie-cms-core-fields-types-checkbox-views.cjs.js

@@ -0,0 +1,126 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var checkbox = require('@keystar/ui/checkbox');
+var icon = require('@keystar/ui/icon');
+var checkIcon = require('@keystar/ui/icon/icons/checkIcon');
+var typography = require('@keystar/ui/typography');
+var utils = require('../../../../../dist/utils-b031e11c.cjs.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function Field({
+  field,
+  value,
+  onChange,
+  autoFocus
+}) {
+  return /*#__PURE__*/jsxRuntime.jsxs(checkbox.Checkbox, {
+    autoFocus: autoFocus,
+    isReadOnly: onChange == null,
+    isSelected: value,
+    onChange: onChange,
+    children: [/*#__PURE__*/jsxRuntime.jsx(typography.Text, {
+      children: field.label
+    }), field.description && /*#__PURE__*/jsxRuntime.jsx(typography.Text, {
+      slot: "description",
+      children: field.description
+    })]
+  });
+}
+const Cell = ({
+  value
+}) => {
+  return value ? /*#__PURE__*/jsxRuntime.jsx(icon.Icon, {
+    src: checkIcon.checkIcon,
+    "aria-label": "true"
+  }) : /*#__PURE__*/jsxRuntime.jsx(typography.VisuallyHidden, {
+    children: "false"
+  });
+};
+function controller(config) {
+  return {
+    fieldKey: config.fieldKey,
+    label: config.label,
+    description: config.description,
+    defaultValue: config.fieldMeta.defaultValue,
+    deserialize(item) {
+      const value = item[config.fieldKey];
+      return typeof value === 'boolean' ? value : false;
+    },
+    serialize(value) {
+      return {
+        [config.fieldKey]: value
+      };
+    },
+    graphqlSelection: config.fieldKey,
+    filter: {
+      Filter(props) {
+        const {
+          autoFocus,
+          context,
+          typeLabel,
+          onChange,
+          value,
+          type,
+          ...otherProps
+        } = props;
+        return /*#__PURE__*/jsxRuntime.jsxs(checkbox.Checkbox, {
+          autoFocus: autoFocus,
+          onChange: onChange,
+          isSelected: value,
+          ...otherProps,
+          children: [typeLabel, " ", config.label.toLocaleLowerCase()]
+        });
+      },
+      Label({
+        label,
+        type,
+        value
+      }) {
+        return `${label.toLowerCase()} ${value ? 'true' : 'false'}`;
+      },
+      graphql({
+        type,
+        value
+      }) {
+        return {
+          [config.fieldKey]: {
+            equals: type === 'not' ? !value : value
+          }
+        };
+      },
+      parseGraphQL: value => {
+        return utils.entriesTyped(value).flatMap(([type, value]) => {
+          if (value == null) return [];
+          if (type === 'equals') return {
+            type: 'is',
+            value
+          };
+          if (type === 'not') {
+            if (value.equals == null) return [];
+            return {
+              type: 'not',
+              value: value.equals
+            };
+          }
+          return [];
+        });
+      },
+      types: {
+        is: {
+          label: 'Is',
+          initialValue: true
+        },
+        not: {
+          label: 'Is not',
+          initialValue: true
+        }
+      }
+    }
+  };
+}
+
+exports.Cell = Cell;
+exports.Field = Field;
+exports.controller = controller;