@nixxie-cms/core 1.0.0

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

@@ -0,0 +1,416 @@
+import { useListFormatter } from '@react-aria/i18n';
+import { useState, useMemo } from 'react';
+import { FieldPrimitive, FieldLabel } from '@keystar/ui/field';
+import { VStack } from '@keystar/ui/layout';
+import { ListView } from '@keystar/ui/list-view';
+import { Picker, Item } from '@keystar/ui/picker';
+import { RadioGroup, Radio } from '@keystar/ui/radio';
+import { tokenSchema } from '@keystar/ui/style';
+import { Text } from '@keystar/ui/typography';
+import '@keystar/ui/table';
+import { jsx, jsxs } from 'react/jsx-runtime';
+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/notice';
+import '@keystar/ui/slots';
+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/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 { useField } from '@react-aria/label';
+import { ActionGroup } from '@keystar/ui/action-group';
+import { TextField } from '@keystar/ui/text-field';
+import { e as entriesTyped } from '../../../../../dist/utils-f9556354.esm.js';
+import '@keystar/ui/checkbox';
+import '@keystar/ui/icon/icons/cornerDownRightIcon';
+
+function SegmentedControl(props) {
+  const {
+    children,
+    isDisabled,
+    isReadOnly,
+    isRequired,
+    label,
+    description,
+    errorMessage,
+    value,
+    items,
+    onChange,
+    textValue,
+    ...otherProps
+  } = props;
+  const {
+    labelProps,
+    fieldProps,
+    descriptionProps,
+    errorMessageProps
+  } = useField(props);
+  const selectedKeys = value ? [value] : [];
+
+  // The `ActionGroup` isn’t really designed for use within forms, so we need to
+  // handle read-only mode. There's probably a better solution but this will at
+  // least be accessible.
+  if (isReadOnly) {
+    return /*#__PURE__*/jsx(TextField, {
+      description: description,
+      errorMessage: errorMessage,
+      isReadOnly: isReadOnly,
+      isRequired: isRequired,
+      label: label,
+      value: textValue
+    });
+  }
+  return /*#__PURE__*/jsx(FieldPrimitive, {
+    description: description,
+    descriptionProps: descriptionProps,
+    errorMessage: errorMessage,
+    errorMessageProps: errorMessageProps,
+    isRequired: isRequired,
+    label: label,
+    labelElementType: "span",
+    labelProps: labelProps,
+    ...otherProps,
+    children: /*#__PURE__*/jsx(ActionGroup, {
+      ...fieldProps,
+      density: "compact",
+      disallowEmptySelection: true,
+      isDisabled: isDisabled,
+      overflowMode: "collapse",
+      selectionMode: "single",
+      items: items,
+      onSelectionChange: selection => {
+        if (selection === 'all') return; // irrelevant for single-select
+        const next = selection.values().next().value;
+        if (!next) return;
+        onChange(next);
+      },
+      selectedKeys: selectedKeys,
+      children: children
+    })
+  });
+}
+
+function Field(props) {
+  var _value$value, _value$value2;
+  const {
+    autoFocus,
+    field,
+    forceValidation,
+    onChange,
+    value,
+    isRequired
+  } = props;
+  const [isDirty, setDirty] = useState(false);
+  const [preNullValue, setPreNullValue] = useState(value.value || (value.kind === 'update' ? value.initial : null));
+  const longestLabelLength = useMemo(() => {
+    return field.options.reduce((a, item) => Math.max(a, item.label.length), 0);
+  }, [field.options]);
+  const selectedKey = ((_value$value = value.value) === null || _value$value === void 0 ? void 0 : _value$value.value) || (preNullValue === null || preNullValue === void 0 ? void 0 : preNullValue.value) || null;
+  const isNullable = !isRequired;
+  const isNull = isNullable && ((_value$value2 = value.value) === null || _value$value2 === void 0 ? void 0 : _value$value2.value) == null;
+  const isInvalid = !validate(value, isRequired);
+  const isReadOnly = onChange == null;
+  const errorMessage = isInvalid && (isDirty || forceValidation) ? `${field.label} is required.` : undefined;
+  const onSelectionChange = key => {
+    var _field$options$find;
+    if (!onChange) return;
+
+    // FIXME: the value should be primitive, not an object. i think this is an
+    // artefact from react-select’s API
+    const newValue = (_field$options$find = field.options.find(opt => opt.value === key)) !== null && _field$options$find !== void 0 ? _field$options$find : null;
+
+    // allow clearing the value if the field is not required
+    // if (!field.isRequired && key === selectedKey) {
+    //   newValue = null
+    // }
+
+    onChange({
+      ...value,
+      value: newValue
+    });
+    setDirty(true);
+  };
+  // TODO: this would benefit from a similar treatment to the text field's
+  // `{ kind: 'null', prev: string }` solution
+  const onNullChange = isChecked => {
+    if (!onChange) return;
+    if (isChecked) {
+      onChange({
+        ...value,
+        value: null
+      });
+      setPreNullValue(value.value);
+    } else {
+      onChange({
+        ...value,
+        value: preNullValue || field.options[0]
+      });
+    }
+    setDirty(true);
+  };
+  const fieldElement = ((_field$options$find2, _value$value$value, _value$value3) => {
+    switch (field.displayMode) {
+      case 'segmented-control':
+        return /*#__PURE__*/jsx(SegmentedControl, {
+          label: field.label,
+          description: field.description,
+          errorMessage: errorMessage,
+          isDisabled: isNull,
+          isReadOnly: isReadOnly,
+          isRequired: isRequired,
+          items: field.options,
+          onChange: onSelectionChange,
+          value: selectedKey,
+          textValue: ((_field$options$find2 = field.options.find(item => item.value === selectedKey)) === null || _field$options$find2 === void 0 ? void 0 : _field$options$find2.label) || '',
+          children: item => /*#__PURE__*/jsx(Item, {
+            children: item.label
+          }, item.value)
+        });
+      case 'radio':
+        return /*#__PURE__*/jsx(RadioGroup, {
+          label: field.label,
+          description: field.description,
+          errorMessage: errorMessage,
+          isDisabled: isNull,
+          isReadOnly: isReadOnly,
+          isRequired: isRequired,
+          onChange: onSelectionChange
+          // 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$value$value = (_value$value3 = value.value) === null || _value$value3 === void 0 ? void 0 : _value$value3.value) !== null && _value$value$value !== void 0 ? _value$value$value : preNullValue === null || preNullValue === void 0 ? void 0 : preNullValue.value,
+          children: field.options.map(item => /*#__PURE__*/jsx(Radio, {
+            value: item.value,
+            children: item.label
+          }, item.value))
+        });
+      default:
+        return /*#__PURE__*/jsx(Picker, {
+          autoFocus: autoFocus,
+          label: field.label,
+          description: field.description,
+          errorMessage: errorMessage,
+          isDisabled: isNull,
+          isReadOnly: isReadOnly,
+          isRequired: isRequired,
+          items: field.options,
+          onSelectionChange: onSelectionChange,
+          selectedKey: selectedKey,
+          flex: {
+            mobile: true,
+            desktop: 'initial'
+          },
+          UNSAFE_style: {
+            fontSize: tokenSchema.typography.text.regular.size,
+            width: `clamp(${tokenSchema.size.alias.singleLineWidth}, calc(${longestLabelLength}ex + ${tokenSchema.size.icon.regular}), 100%)`
+          },
+          children: item => /*#__PURE__*/jsx(Item, {
+            children: item.label
+          }, item.value)
+        });
+    }
+  })();
+  return /*#__PURE__*/jsx(NullableFieldWrapper, {
+    isAllowed: !isRequired,
+    autoFocus: isNull && autoFocus,
+    label: field.label,
+    isReadOnly: isReadOnly,
+    isNull: isNull,
+    onChange: onNullChange,
+    children: fieldElement
+  });
+}
+const Cell = ({
+  value,
+  field
+}) => {
+  var _field$options$find3;
+  const label = (_field$options$find3 = field.options.find(x => x.value === value)) === null || _field$options$find3 === void 0 ? void 0 : _field$options$find3.label;
+  return /*#__PURE__*/jsx(Text, {
+    children: label
+  });
+};
+function validate(value, isRequired) {
+  if (isRequired) {
+    // if you got null initially on the update screen, we want to allow saving
+    // since the user probably doesn't have read access control
+    if (value.kind === 'update' && value.initial === null) return true;
+    return value.value !== null;
+  }
+  return true;
+}
+const FILTER_TYPES = {
+  matches: {
+    label: 'Matches',
+    initialValue: []
+  },
+  not_matches: {
+    label: 'Does not match',
+    initialValue: []
+  }
+};
+function controller(config) {
+  var _config$fieldMeta$def, _optionsWithStringVal;
+  const optionsWithStringValues = config.fieldMeta.options.map(x => ({
+    label: x.label,
+    value: x.value.toString()
+  }));
+
+  // Transform from string value to type appropriate value
+  const t = v => v === null ? null : config.fieldMeta.type === 'integer' ? parseInt(v) : v;
+  const stringifiedDefault = (_config$fieldMeta$def = config.fieldMeta.defaultValue) === null || _config$fieldMeta$def === void 0 ? void 0 : _config$fieldMeta$def.toString();
+  return {
+    fieldKey: config.fieldKey,
+    label: config.label,
+    description: config.description,
+    graphqlSelection: config.fieldKey,
+    defaultValue: {
+      kind: 'create',
+      value: (_optionsWithStringVal = optionsWithStringValues.find(x => x.value === stringifiedDefault)) !== null && _optionsWithStringVal !== void 0 ? _optionsWithStringVal : null
+    },
+    type: config.fieldMeta.type,
+    displayMode: config.fieldMeta.displayMode,
+    options: optionsWithStringValues,
+    deserialize: data => {
+      for (const option of config.fieldMeta.options) {
+        if (option.value === data[config.fieldKey]) {
+          const stringifiedOption = {
+            label: option.label,
+            value: option.value.toString()
+          };
+          return {
+            kind: 'update',
+            initial: stringifiedOption,
+            value: stringifiedOption
+          };
+        }
+      }
+      return {
+        kind: 'update',
+        initial: null,
+        value: null
+      };
+    },
+    serialize: value => {
+      var _value$value$value2, _value$value4;
+      return {
+        [config.fieldKey]: t((_value$value$value2 = (_value$value4 = value.value) === null || _value$value4 === void 0 ? void 0 : _value$value4.value) !== null && _value$value$value2 !== void 0 ? _value$value$value2 : null)
+      };
+    },
+    validate: (value, opts) => validate(value, opts.isRequired),
+    filter: {
+      Filter(props) {
+        const {
+          autoFocus,
+          context,
+          typeLabel,
+          onChange,
+          value,
+          type,
+          ...otherProps
+        } = props;
+        const densityLevels = ['spacious', 'regular', 'compact'];
+        const density = densityLevels[Math.min(Math.floor((optionsWithStringValues.length - 1) / 3), 2)];
+        const listView = /*#__PURE__*/jsx(ListView, {
+          "aria-label": typeLabel,
+          density: density,
+          items: optionsWithStringValues,
+          flex: true,
+          minHeight: 0,
+          maxHeight: "100%",
+          selectionMode: "multiple",
+          onSelectionChange: selection => {
+            if (selection === 'all') return; // irrelevant for this case
+
+            onChange([...selection].filter(x => typeof x === 'string'));
+          },
+          selectedKeys: value,
+          ...otherProps,
+          children: item => /*#__PURE__*/jsx(Item, {
+            children: item.label
+          }, item.value)
+        });
+        if (context === 'edit') {
+          return /*#__PURE__*/jsxs(VStack, {
+            gap: "medium",
+            flex: true,
+            minHeight: 0,
+            maxHeight: "100%",
+            children: [/*#__PURE__*/jsx(FieldLabel, {
+              elementType: "span",
+              children: typeLabel
+            }), listView]
+          });
+        }
+        return listView;
+      },
+      graphql: ({
+        type,
+        value: options
+      }) => ({
+        [config.fieldKey]: {
+          [type === 'not_matches' ? 'notIn' : 'in']: options.map(x => t(x))
+        }
+      }),
+      parseGraphQL(value) {
+        return entriesTyped(value).flatMap(([type, value]) => {
+          if (type === 'equals' && value != null) {
+            return {
+              type: 'matches',
+              value: [value]
+            };
+          }
+          if (type === 'notIn' || type === 'in') {
+            if (!value) return [];
+            return {
+              type: type === 'notIn' ? 'not_matches' : 'matches',
+              value: value.filter(x => x != null)
+            };
+          }
+          return [];
+        });
+      },
+      Label({
+        type,
+        value
+      }) {
+        const listFormatter = useListFormatter({
+          style: 'short',
+          type: 'disjunction'
+        });
+        if (value.length === 0) {
+          return type === 'not_matches' ? `is set` : `is not set`;
+        }
+        const values = new Set(value);
+        const labels = optionsWithStringValues.filter(opt => values.has(opt.value)).map(i => i.label);
+        const prefix = type === 'not_matches' ? `is not` : `is`;
+        if (value.length === 1) return `${prefix} ${labels[0]}`;
+        if (value.length === 2) return `${prefix} ${listFormatter.format(labels)}`;
+        return `${prefix} ${listFormatter.format([labels[0], `${value.length - 1} more`])}`;
+      },
+      types: FILTER_TYPES
+    }
+  };
+}
+
+export { Cell, Field, controller };

package/fields/types/select/views/package.json

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

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

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