lkb-fields-document 1.0.0

package/dist/api-c32e360e.node.esm.js

@@ -0,0 +1,502 @@
+import { g } from 'lkb-core';
+import { VStack, Flex } from '@keystar/ui/layout';
+import { ActionButton } from '@keystar/ui/button';
+import { FileTrigger } from '@keystar/ui/drag-and-drop';
+import { useState } from 'react';
+import { i as isValidURL } from './index-586adb8f.node.esm.js';
+import { useFilter } from '@react-aria/i18n';
+import { NumberField } from '@keystar/ui/number-field';
+import { tokenSchema } from '@keystar/ui/style';
+import { Picker, Item } from '@keystar/ui/picker';
+import { Combobox, Item as Item$1 } from '@keystar/ui/combobox';
+import { TextField, TextArea } from '@keystar/ui/text-field';
+import { TagGroup } from '@keystar/ui/tag';
+import { Text } from '@keystar/ui/typography';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Checkbox } from '@keystar/ui/checkbox';
+
+function makeIntegerFieldInput(opts) {
+  return function IntegerFieldInput({
+    autoFocus,
+    forceValidation,
+    onChange,
+    value
+  }) {
+    const [isDirty, setDirty] = useState(false);
+    return /*#__PURE__*/jsx(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] = useState(false);
+    return /*#__PURE__*/jsx(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__*/jsx(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: 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)
+    });
+  };
+}
+function makeMultiselectFieldInput({
+  label,
+  options
+}) {
+  return function ComboFieldInput({
+    autoFocus,
+    forceValidation,
+    onChange,
+    value
+  }) {
+    const [filterText, setFilterText] = useState('');
+    const {
+      contains
+    } = 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__*/jsxs(VStack, {
+      gap: "regular",
+      children: [/*#__PURE__*/jsx(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__*/jsx(Item$1, {
+          children: item.label
+        }, item.value)
+      }), /*#__PURE__*/jsx(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__*/jsx(Text, {
+          color: "neutralSecondary",
+          size: "small",
+          children: "No items\u2026"
+        }),
+        children: item => /*#__PURE__*/jsx(Item$1, {
+          children: item
+        }, item)
+      })]
+    });
+  };
+}
+
+const fields = {
+  file({
+    label,
+    isImage,
+    defaultValue = '',
+    allowedFileTypes,
+    onUpload
+  }) {
+    return {
+      kind: 'form',
+      Input({
+        value,
+        onChange
+      }) {
+        const [err, setErr] = useState(null);
+        return /*#__PURE__*/jsxs(Flex, {
+          direction: "column",
+          gap: "medium",
+          children: [/*#__PURE__*/jsxs(Flex, {
+            gap: "medium",
+            alignItems: "flex-end",
+            children: [/*#__PURE__*/jsx("div", {
+              style: {
+                flex: 1
+              },
+              children: /*#__PURE__*/jsx(TextField, {
+                label: label,
+                isDisabled: true,
+                value: value
+              })
+            }), /*#__PURE__*/jsx(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__*/jsx(ActionButton, {
+                children: "\u9009\u62E9\u56FE\u7247"
+              })
+            })]
+          }), isImage && value && /*#__PURE__*/jsx("img", {
+            src: value,
+            style: {
+              width: '100%'
+            }
+          }), err && /*#__PURE__*/jsx(Text, {
+            color: "highlight",
+            children: err
+          })]
+        });
+      },
+      options: undefined,
+      defaultValue,
+      validate(value) {
+        return typeof value === 'string';
+      },
+      graphql: {
+        input: g.String,
+        output: g.field({
+          type: g.String
+        })
+      }
+    };
+  },
+  text({
+    label,
+    defaultValue = '',
+    displayMode
+  }) {
+    return {
+      kind: 'form',
+      Input({
+        value,
+        onChange,
+        autoFocus
+      }) {
+        if (displayMode === 'textarea') {
+          return /*#__PURE__*/jsx(TextArea, {
+            autoFocus: autoFocus,
+            label: label,
+            onChange: x => onChange === null || onChange === void 0 ? void 0 : onChange(x),
+            value: value
+          });
+        }
+        return /*#__PURE__*/jsx(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: g.String,
+        output: g.field({
+          type: 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: g.Int,
+        output: g.field({
+          type: g.Int
+        })
+      }
+    };
+  },
+  url({
+    label,
+    defaultValue = ''
+  }) {
+    const validate = value => {
+      return typeof value === 'string' && (value === '' || isValidURL(value));
+    };
+    return {
+      kind: 'form',
+      Input: makeUrlFieldInput({
+        label,
+        validate
+      }),
+      options: undefined,
+      defaultValue,
+      validate,
+      graphql: {
+        input: g.String,
+        output: g.field({
+          type: 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: g.String,
+        output: g.field({
+          type: 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: g.list(g.nonNull(g.String)),
+        output: g.field({
+          type: g.list(g.nonNull(g.String)),
+          // TODO: why is this required
+          resolve({
+            value
+          }) {
+            return value;
+          }
+        })
+      }
+    };
+  },
+  checkbox({
+    label,
+    defaultValue = false
+  }) {
+    return {
+      kind: 'form',
+      Input({
+        value,
+        onChange,
+        autoFocus
+      }) {
+        return /*#__PURE__*/jsx(Checkbox, {
+          autoFocus: autoFocus,
+          isReadOnly: onChange == null,
+          isSelected: value,
+          onChange: onChange,
+          children: /*#__PURE__*/jsx(Text, {
+            children: label
+          })
+        });
+      },
+      options: undefined,
+      defaultValue,
+      validate(value) {
+        return typeof value === 'boolean';
+      },
+      graphql: {
+        input: g.Boolean,
+        output: g.field({
+          type: 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__*/jsx("span", {
+    style: {
+      userSelect: 'none'
+    },
+    contentEditable: false,
+    ...props,
+    children: children
+  });
+}
+
+export { NotEditable as N, component as c, fields as f };

package/dist/callout-ui-2aded278.cjs.js

@@ -0,0 +1,131 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var actionGroup = require('@keystar/ui/action-group');
+var button = require('@keystar/ui/button');
+var tooltip = require('@keystar/ui/tooltip');
+var typography = require('@keystar/ui/typography');
+var trash2Icon = require('@keystar/ui/icon/icons/trash2Icon');
+var icon = require('@keystar/ui/icon');
+var layout = require('@keystar/ui/layout');
+var alertOctagonIcon = require('@keystar/ui/icon/icons/alertOctagonIcon');
+var alertTriangleIcon = require('@keystar/ui/icon/icons/alertTriangleIcon');
+var checkCircle2Icon = require('@keystar/ui/icon/icons/checkCircle2Icon');
+var infoIcon = require('@keystar/ui/icon/icons/infoIcon');
+var style = require('@keystar/ui/style');
+var api = require('./api-73636987.cjs.js');
+var core = require('@keystar/ui/core');
+var jsxRuntime = require('react/jsx-runtime');
+require('lkb-core');
+require('@keystar/ui/drag-and-drop');
+require('react');
+require('./index-06c36775.cjs.js');
+require('slate');
+require('@braintree/sanitize-url');
+require('@react-aria/i18n');
+require('@keystar/ui/number-field');
+require('@keystar/ui/picker');
+require('@keystar/ui/combobox');
+require('@keystar/ui/text-field');
+require('@keystar/ui/tag');
+require('@keystar/ui/checkbox');
+
+const toneToIcon = {
+  caution: alertTriangleIcon.alertTriangleIcon,
+  critical: alertOctagonIcon.alertOctagonIcon,
+  info: infoIcon.infoIcon,
+  positive: checkCircle2Icon.checkCircle2Icon
+};
+const toneToColor = {
+  caution: 'caution',
+  critical: 'critical',
+  info: 'accent',
+  positive: 'positive'
+};
+function Callout({
+  children,
+  tone = 'info',
+  ...props
+}) {
+  let icon$1 = toneToIcon[tone];
+  let color = toneToColor[tone];
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    ...props,
+    className: style.css({
+      borderRadius: style.tokenSchema.size.radius.regular,
+      background: 'var(--bg)',
+      color: 'var(--fg)',
+      display: 'flex',
+      gap: '1em',
+      padding: '1em',
+      svg: {
+        flexShrink: 0,
+        fill: 'none',
+        stroke: 'currentColor',
+        height: 20,
+        width: 20
+      }
+    }),
+    style: {
+      // @ts-expect-error
+      '--bg': style.tokenSchema.color.background[color],
+      '--fg': style.tokenSchema.color.foreground[color]
+    },
+    children: [/*#__PURE__*/jsxRuntime.jsx(api.NotEditable, {
+      children: /*#__PURE__*/jsxRuntime.jsx(icon.Icon, {
+        src: icon$1
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      children: children
+    })]
+  });
+}
+function CalloutToolbar(props) {
+  return /*#__PURE__*/jsxRuntime.jsx(core.KeystarProvider, {
+    children: /*#__PURE__*/jsxRuntime.jsxs(layout.Flex, {
+      gap: "regular",
+      padding: "regular",
+      children: [/*#__PURE__*/jsxRuntime.jsx(actionGroup.ActionGroup, {
+        selectionMode: "single",
+        prominence: "low",
+        density: "compact",
+        buttonLabelBehavior: "hide",
+        onAction: key => {
+          props.onChange(key);
+        },
+        selectedKeys: [props.tone],
+        items: props.tones,
+        children: item => /*#__PURE__*/jsxRuntime.jsxs(actionGroup.Item, {
+          textValue: item.label,
+          children: [/*#__PURE__*/jsxRuntime.jsx(icon.Icon, {
+            src: toneToIcon[item.value]
+          }), /*#__PURE__*/jsxRuntime.jsx(typography.Text, {
+            children: item.label
+          })]
+        }, item.value)
+      }), /*#__PURE__*/jsxRuntime.jsx(layout.Divider, {
+        orientation: "vertical"
+      }), /*#__PURE__*/jsxRuntime.jsxs(tooltip.TooltipTrigger, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(button.ActionButton, {
+          prominence: "low",
+          onPress: () => {
+            props.onRemove();
+          },
+          children: /*#__PURE__*/jsxRuntime.jsx(icon.Icon, {
+            src: trash2Icon.trash2Icon
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx(tooltip.Tooltip, {
+          tone: "critical",
+          children: /*#__PURE__*/jsxRuntime.jsx(typography.Text, {
+            children: "Remove"
+          })
+        })]
+      })]
+    })
+  });
+}
+
+exports.Callout = Callout;
+exports.CalloutToolbar = CalloutToolbar;