lkb-fields-document 1.0.0

package/dist/api-8e2b20b8.node.cjs.js

@@ -0,0 +1,506 @@
+'use strict';
+
+var lkbCore = require('lkb-core');
+var layout = require('@keystar/ui/layout');
+var button = require('@keystar/ui/button');
+var dragAndDrop = require('@keystar/ui/drag-and-drop');
+var React = require('react');
+var index = require('./index-c3223fdc.node.cjs.js');
+var i18n = require('@react-aria/i18n');
+var numberField = require('@keystar/ui/number-field');
+var style = require('@keystar/ui/style');
+var picker = require('@keystar/ui/picker');
+var combobox = require('@keystar/ui/combobox');
+var textField = require('@keystar/ui/text-field');
+var tag = require('@keystar/ui/tag');
+var typography = require('@keystar/ui/typography');
+var jsxRuntime = require('react/jsx-runtime');
+var checkbox = require('@keystar/ui/checkbox');
+
+function makeIntegerFieldInput(opts) {
+  return function IntegerFieldInput({
+    autoFocus,
+    forceValidation,
+    onChange,
+    value
+  }) {
+    const [isDirty, setDirty] = React.useState(false);
+    return /*#__PURE__*/jsxRuntime.jsx(numberField.NumberField, {
+      autoFocus: autoFocus,
+      label: opts.label,
+      errorMessage: (forceValidation || isDirty) && !opts.validate(value) ? 'Invalid integer' : null,
+      step: 1,
+      onBlur: () => setDirty(true),
+      onChange: x => onChange === null || onChange === void 0 ? void 0 : onChange(!Number.isInteger(x) ? NaN : x),
+      value: value !== null && value !== void 0 ? value : NaN
+    });
+  };
+}
+function makeUrlFieldInput(opts) {
+  return function UrlFieldInput({
+    autoFocus,
+    forceValidation,
+    onChange,
+    value
+  }) {
+    const [isDirty, setDirty] = React.useState(false);
+    return /*#__PURE__*/jsxRuntime.jsx(textField.TextField, {
+      autoFocus: autoFocus,
+      label: opts.label,
+      errorMessage: (forceValidation || isDirty) && !opts.validate(value) ? 'Invalid URL' : null,
+      onBlur: () => setDirty(true),
+      onChange: x => onChange === null || onChange === void 0 ? void 0 : onChange(x),
+      value: value
+    });
+  };
+}
+function makeSelectFieldInput({
+  label,
+  options
+}) {
+  const longestLabelLength = options.reduce((a, item) => Math.max(a, item.label.length), 0);
+  return function PickerFieldInput({
+    autoFocus,
+    forceValidation,
+    onChange,
+    value
+  }) {
+    var _options$find$value, _options$find2;
+    return /*#__PURE__*/jsxRuntime.jsx(picker.Picker, {
+      autoFocus: autoFocus,
+      label: label,
+      items: options,
+      onSelectionChange: key => {
+        var _options$find;
+        const newVal = (_options$find = options.find(option => option.value === key)) === null || _options$find === void 0 ? void 0 : _options$find.value;
+        if (newVal !== undefined) {
+          onChange === null || onChange === void 0 || onChange(newVal);
+        }
+      },
+      selectedKey: (_options$find$value = (_options$find2 = options.find(option => option.value === value)) === null || _options$find2 === void 0 ? void 0 : _options$find2.value) !== null && _options$find$value !== void 0 ? _options$find$value : null,
+      flex: {
+        mobile: true,
+        desktop: 'initial'
+      },
+      UNSAFE_style: {
+        fontSize: style.tokenSchema.typography.text.regular.size,
+        width: `clamp(${style.tokenSchema.size.alias.singleLineWidth}, calc(${longestLabelLength}ex + ${style.tokenSchema.size.icon.regular}), 100%)`
+      },
+      children: item => /*#__PURE__*/jsxRuntime.jsx(picker.Item, {
+        children: item.label
+      }, item.value)
+    });
+  };
+}
+function makeMultiselectFieldInput({
+  label,
+  options
+}) {
+  return function ComboFieldInput({
+    autoFocus,
+    forceValidation,
+    onChange,
+    value
+  }) {
+    const [filterText, setFilterText] = React.useState('');
+    const {
+      contains
+    } = i18n.useFilter({
+      sensitivity: 'base'
+    });
+    const items = options.filter(option => !value.some(x => x === option.value));
+    const filteredItems = filterText ? items.filter(item => contains(item.label, filterText)) : items;
+    return /*#__PURE__*/jsxRuntime.jsxs(layout.VStack, {
+      gap: "regular",
+      children: [/*#__PURE__*/jsxRuntime.jsx(combobox.Combobox, {
+        label: label,
+        isReadOnly: onChange === undefined,
+        items: filteredItems,
+        loadingState: "idle",
+        onInputChange: setFilterText,
+        inputValue: filterText
+        // selectedKey={null}
+        ,
+        onSelectionChange: key => {
+          if (key == null) return;
+          onChange === null || onChange === void 0 || onChange([...value, ...options.filter(x => x.value === key).map(x => x.value)]);
+        },
+        width: "auto",
+        children: item => /*#__PURE__*/jsxRuntime.jsx(combobox.Item, {
+          children: item.label
+        }, item.value)
+      }), /*#__PURE__*/jsxRuntime.jsx(tag.TagGroup, {
+        items: value,
+        maxRows: 2,
+        onRemove: keys => {
+          const key = keys.values().next().value;
+          onChange === null || onChange === void 0 || onChange(value.filter(x => x !== key));
+        },
+        renderEmptyState: () => /*#__PURE__*/jsxRuntime.jsx(typography.Text, {
+          color: "neutralSecondary",
+          size: "small",
+          children: "No items\u2026"
+        }),
+        children: item => /*#__PURE__*/jsxRuntime.jsx(combobox.Item, {
+          children: item
+        }, item)
+      })]
+    });
+  };
+}
+
+const fields = {
+  file({
+    label,
+    isImage,
+    defaultValue = '',
+    allowedFileTypes,
+    onUpload
+  }) {
+    return {
+      kind: 'form',
+      Input({
+        value,
+        onChange
+      }) {
+        const [err, setErr] = React.useState(null);
+        return /*#__PURE__*/jsxRuntime.jsxs(layout.Flex, {
+          direction: "column",
+          gap: "medium",
+          children: [/*#__PURE__*/jsxRuntime.jsxs(layout.Flex, {
+            gap: "medium",
+            alignItems: "flex-end",
+            children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+              style: {
+                flex: 1
+              },
+              children: /*#__PURE__*/jsxRuntime.jsx(textField.TextField, {
+                label: label,
+                isDisabled: true,
+                value: value
+              })
+            }), /*#__PURE__*/jsxRuntime.jsx(dragAndDrop.FileTrigger, {
+              acceptedFileTypes: allowedFileTypes,
+              allowsMultiple: false,
+              onSelect: filelist => {
+                let files = Array.from(filelist || []);
+                if (files.length > 0) {
+                  onUpload === null || onUpload === void 0 || onUpload(files[0]).then(url => {
+                    onChange(url);
+                  }).catch(e => setErr(e.message));
+                }
+              },
+              children: /*#__PURE__*/jsxRuntime.jsx(button.ActionButton, {
+                children: "\u9009\u62E9\u56FE\u7247"
+              })
+            })]
+          }), isImage && value && /*#__PURE__*/jsxRuntime.jsx("img", {
+            src: value,
+            style: {
+              width: '100%'
+            }
+          }), err && /*#__PURE__*/jsxRuntime.jsx(typography.Text, {
+            color: "highlight",
+            children: err
+          })]
+        });
+      },
+      options: undefined,
+      defaultValue,
+      validate(value) {
+        return typeof value === 'string';
+      },
+      graphql: {
+        input: lkbCore.g.String,
+        output: lkbCore.g.field({
+          type: lkbCore.g.String
+        })
+      }
+    };
+  },
+  text({
+    label,
+    defaultValue = '',
+    displayMode
+  }) {
+    return {
+      kind: 'form',
+      Input({
+        value,
+        onChange,
+        autoFocus
+      }) {
+        if (displayMode === 'textarea') {
+          return /*#__PURE__*/jsxRuntime.jsx(textField.TextArea, {
+            autoFocus: autoFocus,
+            label: label,
+            onChange: x => onChange === null || onChange === void 0 ? void 0 : onChange(x),
+            value: value
+          });
+        }
+        return /*#__PURE__*/jsxRuntime.jsx(textField.TextField, {
+          autoFocus: autoFocus,
+          label: label,
+          onChange: x => onChange === null || onChange === void 0 ? void 0 : onChange(x),
+          value: value
+        });
+      },
+      options: undefined,
+      defaultValue,
+      validate(value) {
+        return typeof value === 'string';
+      },
+      graphql: {
+        input: lkbCore.g.String,
+        output: lkbCore.g.field({
+          type: lkbCore.g.String
+        })
+      }
+    };
+  },
+  integer({
+    label,
+    defaultValue = 0
+  }) {
+    const validate = value => {
+      return typeof value === 'number' && Number.isFinite(value);
+    };
+    return {
+      kind: 'form',
+      Input: makeIntegerFieldInput({
+        label,
+        validate
+      }),
+      options: undefined,
+      defaultValue,
+      validate,
+      graphql: {
+        input: lkbCore.g.Int,
+        output: lkbCore.g.field({
+          type: lkbCore.g.Int
+        })
+      }
+    };
+  },
+  url({
+    label,
+    defaultValue = ''
+  }) {
+    const validate = value => {
+      return typeof value === 'string' && (value === '' || index.isValidURL(value));
+    };
+    return {
+      kind: 'form',
+      Input: makeUrlFieldInput({
+        label,
+        validate
+      }),
+      options: undefined,
+      defaultValue,
+      validate,
+      graphql: {
+        input: lkbCore.g.String,
+        output: lkbCore.g.field({
+          type: lkbCore.g.String
+        })
+      }
+    };
+  },
+  select({
+    label,
+    options,
+    defaultValue
+  }) {
+    const optionValuesSet = new Set(options.map(x => x.value));
+    if (!optionValuesSet.has(defaultValue)) throw new Error(`A defaultValue of ${defaultValue} was provided to a select field but it does not match the value of one of the options provided`);
+    return {
+      kind: 'form',
+      Input: makeSelectFieldInput({
+        label,
+        options
+      }),
+      options,
+      defaultValue,
+      validate(value) {
+        return typeof value === 'string' && optionValuesSet.has(value);
+      },
+      graphql: {
+        input: lkbCore.g.String,
+        output: lkbCore.g.field({
+          type: lkbCore.g.String,
+          // TODO: FIXME why is this required
+          resolve({
+            value
+          }) {
+            return value;
+          }
+        })
+      }
+    };
+  },
+  multiselect({
+    label,
+    options,
+    defaultValue
+  }) {
+    const valuesToOption = new Map(options.map(x => [x.value, x]));
+    return {
+      kind: 'form',
+      Input: makeMultiselectFieldInput({
+        label,
+        options
+      }),
+      options,
+      defaultValue,
+      validate(value) {
+        return Array.isArray(value) && value.every(value => typeof value === 'string' && valuesToOption.has(value));
+      },
+      graphql: {
+        input: lkbCore.g.list(lkbCore.g.nonNull(lkbCore.g.String)),
+        output: lkbCore.g.field({
+          type: lkbCore.g.list(lkbCore.g.nonNull(lkbCore.g.String)),
+          // TODO: why is this required
+          resolve({
+            value
+          }) {
+            return value;
+          }
+        })
+      }
+    };
+  },
+  checkbox({
+    label,
+    defaultValue = false
+  }) {
+    return {
+      kind: 'form',
+      Input({
+        value,
+        onChange,
+        autoFocus
+      }) {
+        return /*#__PURE__*/jsxRuntime.jsx(checkbox.Checkbox, {
+          autoFocus: autoFocus,
+          isReadOnly: onChange == null,
+          isSelected: value,
+          onChange: onChange,
+          children: /*#__PURE__*/jsxRuntime.jsx(typography.Text, {
+            children: label
+          })
+        });
+      },
+      options: undefined,
+      defaultValue,
+      validate(value) {
+        return typeof value === 'boolean';
+      },
+      graphql: {
+        input: lkbCore.g.Boolean,
+        output: lkbCore.g.field({
+          type: lkbCore.g.Boolean
+        })
+      }
+    };
+  },
+  empty() {
+    return {
+      kind: 'form',
+      Input() {
+        return null;
+      },
+      options: undefined,
+      defaultValue: null,
+      validate(value) {
+        return value === null || value === undefined;
+      }
+    };
+  },
+  child(options) {
+    return {
+      kind: 'child',
+      options: options.kind === 'block' ? {
+        kind: 'block',
+        placeholder: options.placeholder,
+        dividers: options.dividers,
+        formatting: options.formatting === 'inherit' ? {
+          blockTypes: 'inherit',
+          headingLevels: 'inherit',
+          inlineMarks: 'inherit',
+          listTypes: 'inherit',
+          alignment: 'inherit',
+          softBreaks: 'inherit'
+        } : options.formatting,
+        links: options.links,
+        relationships: options.relationships,
+        componentBlocks: options.componentBlocks
+      } : {
+        kind: 'inline',
+        placeholder: options.placeholder,
+        formatting: options.formatting === 'inherit' ? {
+          inlineMarks: 'inherit',
+          softBreaks: 'inherit'
+        } : options.formatting,
+        links: options.links,
+        relationships: options.relationships
+      }
+    };
+  },
+  object(fields) {
+    return {
+      kind: 'object',
+      fields
+    };
+  },
+  conditional(discriminant, values) {
+    return {
+      kind: 'conditional',
+      discriminant,
+      values
+    };
+  },
+  relationship({
+    listKey,
+    label,
+    labelField,
+    selection,
+    many
+  }) {
+    return {
+      kind: 'relationship',
+      listKey,
+      label,
+      labelField: labelField !== null && labelField !== void 0 ? labelField : null,
+      selection: selection !== null && selection !== void 0 ? selection : null,
+      many: many ? true : false
+    };
+  },
+  array(element, opts) {
+    return {
+      kind: 'array',
+      element,
+      itemLabel: opts === null || opts === void 0 ? void 0 : opts.itemLabel,
+      label: opts === null || opts === void 0 ? void 0 : opts.label
+    };
+  }
+};
+function component(options) {
+  return options;
+}
+function NotEditable({
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx("span", {
+    style: {
+      userSelect: 'none'
+    },
+    contentEditable: false,
+    ...props,
+    children: children
+  });
+}
+
+exports.NotEditable = NotEditable;
+exports.component = component;
+exports.fields = fields;