@nixxie-cms/core 1.0.0

package/dist/Field-47f85161.esm.js

@@ -0,0 +1,278 @@
+import { useLocale } from '@react-aria/i18n';
+import bytes from 'bytes';
+import { extname } from 'path';
+import { useRef, useMemo, Fragment, createElement, useState, useEffect } from 'react';
+import { ActionButton } from '@keystar/ui/button';
+import { Field as Field$1 } from '@keystar/ui/field';
+import { Icon } from '@keystar/ui/icon';
+import { fileAudioIcon } from '@keystar/ui/icon/icons/fileAudioIcon';
+import { fileCodeIcon } from '@keystar/ui/icon/icons/fileCodeIcon';
+import { fileDigitIcon } from '@keystar/ui/icon/icons/fileDigitIcon';
+import { fileIcon } from '@keystar/ui/icon/icons/fileIcon';
+import { fileImageIcon } from '@keystar/ui/icon/icons/fileImageIcon';
+import { fileJsonIcon } from '@keystar/ui/icon/icons/fileJsonIcon';
+import { fileSpreadsheetIcon } from '@keystar/ui/icon/icons/fileSpreadsheetIcon';
+import { fileTextIcon } from '@keystar/ui/icon/icons/fileTextIcon';
+import { fileUpIcon } from '@keystar/ui/icon/icons/fileUpIcon';
+import { fileVideoIcon } from '@keystar/ui/icon/icons/fileVideoIcon';
+import { VStack, HStack } from '@keystar/ui/layout';
+import { css } from '@keystar/ui/style';
+import { Text } from '@keystar/ui/typography';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function Field(props) {
+  const {
+    autoFocus,
+    field,
+    onChange,
+    value
+  } = props;
+  const inputRef = useRef(null);
+  const errorMessage = createErrorMessage(value);
+  const onUploadChange = ({
+    currentTarget: {
+      validity,
+      files
+    }
+  }) => {
+    const file = files === null || files === void 0 ? void 0 : files[0];
+    if (!file) return; // bail if the user cancels from the file browser
+    onChange === null || onChange === void 0 || onChange({
+      kind: 'upload',
+      data: {
+        file,
+        validity
+      },
+      previous: value
+    });
+  };
+  const onFileTrigger = () => {
+    var _inputRef$current;
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.click();
+  };
+
+  // Generate a random input key when the value changes, to ensure the file input is unmounted and
+  // remounted (this is the only way to reset its value and ensure onChange will fire again if
+  // the user selects the same file again)
+  const inputKey = useMemo(() => Math.random(), [value]);
+  return /*#__PURE__*/jsx(Field$1, {
+    label: field.label,
+    description: field.description,
+    errorMessage: errorMessage,
+    children: inputProps => /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx(FileView, {
+        isInvalid: Boolean(errorMessage),
+        onFileTrigger: onFileTrigger,
+        onChange: onChange,
+        value: value
+      }), /*#__PURE__*/createElement("input", {
+        ...inputProps,
+        // TODO: add support for configurable file types
+        // @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept
+        autoComplete: "off",
+        autoFocus: autoFocus,
+        disabled: onChange === undefined,
+        hidden: true,
+        key: inputKey,
+        name: field.fieldKey,
+        onChange: onUploadChange,
+        ref: inputRef,
+        type: "file"
+      })]
+    })
+  });
+}
+function FileView(props) {
+  const {
+    isInvalid,
+    onFileTrigger,
+    onChange,
+    value
+  } = props;
+  const fileData = useFileData(value);
+  return /*#__PURE__*/jsxs(VStack, {
+    gap: "medium",
+    children: [isInvalid || !fileData ? null : /*#__PURE__*/jsx(FileDetails, {
+      ...fileData,
+      children: onChange && /*#__PURE__*/jsxs(HStack, {
+        gap: "regular",
+        marginTop: "auto",
+        children: [/*#__PURE__*/jsx(ActionButton, {
+          onPress: onFileTrigger,
+          children: "Change"
+        }), value.kind === 'from-server' && /*#__PURE__*/jsx(ActionButton, {
+          prominence: "low",
+          onPress: () => {
+            onChange({
+              kind: 'remove',
+              previous: value
+            });
+          },
+          children: "Remove"
+        }), value.kind === 'upload' && /*#__PURE__*/jsx(ActionButton, {
+          prominence: "low",
+          onPress: () => {
+            onChange(value.previous);
+          },
+          children: "Cancel"
+        })]
+      })
+    }), !fileData && /*#__PURE__*/jsxs(HStack, {
+      gap: "regular",
+      children: [/*#__PURE__*/jsx(ActionButton, {
+        isDisabled: onChange === undefined,
+        onPress: onFileTrigger,
+        children: "Upload"
+      }), value.kind === 'remove' && value.previous && /*#__PURE__*/jsx(ActionButton, {
+        prominence: "low",
+        onPress: () => {
+          if (value.previous !== undefined) {
+            onChange === null || onChange === void 0 || onChange(value === null || value === void 0 ? void 0 : value.previous);
+          }
+        },
+        children: "Undo removal"
+      })]
+    })]
+  });
+}
+function FileDetails(props) {
+  const trimStartStyles = useTrimStartStyles();
+  return /*#__PURE__*/jsxs(HStack, {
+    backgroundColor: "canvas",
+    border: "neutral",
+    borderRadius: "regular",
+    gap: "medium",
+    padding: "medium",
+    children: [/*#__PURE__*/jsx("a", {
+      href: props.href,
+      download: props.name,
+      children: /*#__PURE__*/jsx(HStack, {
+        alignItems: "center",
+        backgroundColor: "surfaceTertiary",
+        borderRadius: "small",
+        justifyContent: "center",
+        height: "100%",
+        UNSAFE_className: css({
+          aspectRatio: '1 / 1'
+        }),
+        children: /*#__PURE__*/jsx(Icon, {
+          src: props.icon,
+          size: "medium",
+          color: "neutral"
+        })
+      })
+    }), /*#__PURE__*/jsxs(VStack, {
+      gap: "medium",
+      minWidth: "alias.singleLineWidth",
+      flex: true,
+      children: [/*#__PURE__*/jsx(Text, {
+        children: /*#__PURE__*/jsx("span", {
+          className: css(trimStartStyles),
+          title: props.name,
+          children: props.name
+        })
+      }), /*#__PURE__*/jsx(Text, {
+        size: "small",
+        color: "neutralSecondary",
+        children: formatBytes(props.size)
+      }), props.children]
+    })]
+  });
+}
+function formatBytes(size, options = defaultBytesOptions(size)) {
+  return bytes(size, options);
+}
+function defaultBytesOptions(size) {
+  // increase precision for larger files
+  const GB = 1000000000;
+  const MB = 1000000;
+  const decimalPlaces = size >= GB ? 2 : size >= MB ? 1 : 0;
+  return {
+    decimalPlaces
+  };
+}
+function useFileData(value) {
+  const [objectUrl, setObjectUrl] = useState('');
+  useEffect(() => {
+    if (value.kind === 'upload') {
+      const objectUrl = URL.createObjectURL(value.data.file);
+      setObjectUrl(objectUrl);
+      return () => {
+        URL.revokeObjectURL(objectUrl);
+      };
+    }
+  }, [value]);
+  switch (value.kind) {
+    case 'from-server':
+      return {
+        icon: getFileIcon(value.data.filename),
+        name: value.data.filename,
+        size: value.data.filesize,
+        href: value.data.src
+      };
+    case 'upload':
+      return {
+        icon: fileUpIcon,
+        name: value.data.file.name,
+        size: value.data.file.size,
+        href: objectUrl
+      };
+    default:
+      return null;
+  }
+}
+
+// prettier-ignore
+const FILE_TYPES = {
+  audio: new Set(['aac', 'aiff', 'alac', 'flac', 'm4a', 'mp3', 'ogg', 'wav', 'wma']),
+  binary: new Set(['bin', 'dat', 'exe', 'iso', 'pkg', 'rar', 'tar', 'zip']),
+  code: new Set(['c', 'cpp', 'cs', 'css', 'go', 'html', 'java', 'js', 'jsx', 'less', 'php', 'py', 'rb', 'rs', 'scss', 'ts', 'tsx', 'xml']),
+  image: new Set(['avif', 'bmp', 'gif', 'heic', 'ico', 'jpeg', 'jpg', 'png', 'svg', 'tiff', 'webp']),
+  json: new Set(['geojson', 'json', 'json5', 'jsonld']),
+  spreadsheet: new Set(['csv', 'ods', 'tsv', 'xls', 'xlsx']),
+  text: new Set(['doc', 'docx', 'eml', 'log', 'md', 'msg', 'odt', 'pdf', 'rtf', 'tex', 'txt']),
+  video: new Set(['avi', 'flv', 'm4v', 'mkv', 'mov', 'mp4', 'ogg', 'webm', 'wmv'])
+};
+function getFileIcon(filename) {
+  const extension = getExtension(filename);
+  if (FILE_TYPES.audio.has(extension)) return fileAudioIcon;
+  if (FILE_TYPES.binary.has(extension)) return fileDigitIcon;
+  if (FILE_TYPES.code.has(extension)) return fileCodeIcon;
+  if (FILE_TYPES.image.has(extension)) return fileImageIcon;
+  if (FILE_TYPES.json.has(extension)) return fileJsonIcon;
+  if (FILE_TYPES.spreadsheet.has(extension)) return fileSpreadsheetIcon;
+  if (FILE_TYPES.text.has(extension)) return fileTextIcon;
+  if (FILE_TYPES.video.has(extension)) return fileVideoIcon;
+  return fileIcon;
+}
+function getExtension(filename) {
+  // `extname` returns e.g. ".mov", remove leading dot to match "mov"
+  return extname(filename).slice(1).toLowerCase();
+}
+function useTrimStartStyles() {
+  const {
+    direction
+  } = useLocale();
+  return {
+    direction: direction === 'rtl' ? 'ltr' : 'rtl',
+    display: 'block',
+    overflow: 'hidden',
+    textAlign: direction === 'rtl' ? 'right' : 'left',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap'
+  };
+}
+function createErrorMessage(value) {
+  if (value.kind === 'upload') {
+    return validateFile(value.data);
+  }
+}
+function validateFile({
+  validity
+}) {
+  if (!validity.valid) {
+    return 'Something went wrong, please reload and try again.';
+  }
+}
+
+export { Field as F, formatBytes as f, useTrimStartStyles as u, validateFile as v };

package/dist/Field-ed8d7627.cjs.js

@@ -0,0 +1,287 @@
+'use strict';
+
+var i18n = require('@react-aria/i18n');
+var bytes = require('bytes');
+var path = require('path');
+var react = require('react');
+var button = require('@keystar/ui/button');
+var field = require('@keystar/ui/field');
+var icon = require('@keystar/ui/icon');
+var fileAudioIcon = require('@keystar/ui/icon/icons/fileAudioIcon');
+var fileCodeIcon = require('@keystar/ui/icon/icons/fileCodeIcon');
+var fileDigitIcon = require('@keystar/ui/icon/icons/fileDigitIcon');
+var fileIcon = require('@keystar/ui/icon/icons/fileIcon');
+var fileImageIcon = require('@keystar/ui/icon/icons/fileImageIcon');
+var fileJsonIcon = require('@keystar/ui/icon/icons/fileJsonIcon');
+var fileSpreadsheetIcon = require('@keystar/ui/icon/icons/fileSpreadsheetIcon');
+var fileTextIcon = require('@keystar/ui/icon/icons/fileTextIcon');
+var fileUpIcon = require('@keystar/ui/icon/icons/fileUpIcon');
+var fileVideoIcon = require('@keystar/ui/icon/icons/fileVideoIcon');
+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 _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var bytes__default = /*#__PURE__*/_interopDefault(bytes);
+
+function Field(props) {
+  const {
+    autoFocus,
+    field: field$1,
+    onChange,
+    value
+  } = props;
+  const inputRef = react.useRef(null);
+  const errorMessage = createErrorMessage(value);
+  const onUploadChange = ({
+    currentTarget: {
+      validity,
+      files
+    }
+  }) => {
+    const file = files === null || files === void 0 ? void 0 : files[0];
+    if (!file) return; // bail if the user cancels from the file browser
+    onChange === null || onChange === void 0 || onChange({
+      kind: 'upload',
+      data: {
+        file,
+        validity
+      },
+      previous: value
+    });
+  };
+  const onFileTrigger = () => {
+    var _inputRef$current;
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.click();
+  };
+
+  // Generate a random input key when the value changes, to ensure the file input is unmounted and
+  // remounted (this is the only way to reset its value and ensure onChange will fire again if
+  // the user selects the same file again)
+  const inputKey = react.useMemo(() => Math.random(), [value]);
+  return /*#__PURE__*/jsxRuntime.jsx(field.Field, {
+    label: field$1.label,
+    description: field$1.description,
+    errorMessage: errorMessage,
+    children: inputProps => /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(FileView, {
+        isInvalid: Boolean(errorMessage),
+        onFileTrigger: onFileTrigger,
+        onChange: onChange,
+        value: value
+      }), /*#__PURE__*/react.createElement("input", {
+        ...inputProps,
+        // TODO: add support for configurable file types
+        // @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept
+        autoComplete: "off",
+        autoFocus: autoFocus,
+        disabled: onChange === undefined,
+        hidden: true,
+        key: inputKey,
+        name: field$1.fieldKey,
+        onChange: onUploadChange,
+        ref: inputRef,
+        type: "file"
+      })]
+    })
+  });
+}
+function FileView(props) {
+  const {
+    isInvalid,
+    onFileTrigger,
+    onChange,
+    value
+  } = props;
+  const fileData = useFileData(value);
+  return /*#__PURE__*/jsxRuntime.jsxs(layout.VStack, {
+    gap: "medium",
+    children: [isInvalid || !fileData ? null : /*#__PURE__*/jsxRuntime.jsx(FileDetails, {
+      ...fileData,
+      children: onChange && /*#__PURE__*/jsxRuntime.jsxs(layout.HStack, {
+        gap: "regular",
+        marginTop: "auto",
+        children: [/*#__PURE__*/jsxRuntime.jsx(button.ActionButton, {
+          onPress: onFileTrigger,
+          children: "Change"
+        }), value.kind === 'from-server' && /*#__PURE__*/jsxRuntime.jsx(button.ActionButton, {
+          prominence: "low",
+          onPress: () => {
+            onChange({
+              kind: 'remove',
+              previous: value
+            });
+          },
+          children: "Remove"
+        }), value.kind === 'upload' && /*#__PURE__*/jsxRuntime.jsx(button.ActionButton, {
+          prominence: "low",
+          onPress: () => {
+            onChange(value.previous);
+          },
+          children: "Cancel"
+        })]
+      })
+    }), !fileData && /*#__PURE__*/jsxRuntime.jsxs(layout.HStack, {
+      gap: "regular",
+      children: [/*#__PURE__*/jsxRuntime.jsx(button.ActionButton, {
+        isDisabled: onChange === undefined,
+        onPress: onFileTrigger,
+        children: "Upload"
+      }), value.kind === 'remove' && value.previous && /*#__PURE__*/jsxRuntime.jsx(button.ActionButton, {
+        prominence: "low",
+        onPress: () => {
+          if (value.previous !== undefined) {
+            onChange === null || onChange === void 0 || onChange(value === null || value === void 0 ? void 0 : value.previous);
+          }
+        },
+        children: "Undo removal"
+      })]
+    })]
+  });
+}
+function FileDetails(props) {
+  const trimStartStyles = useTrimStartStyles();
+  return /*#__PURE__*/jsxRuntime.jsxs(layout.HStack, {
+    backgroundColor: "canvas",
+    border: "neutral",
+    borderRadius: "regular",
+    gap: "medium",
+    padding: "medium",
+    children: [/*#__PURE__*/jsxRuntime.jsx("a", {
+      href: props.href,
+      download: props.name,
+      children: /*#__PURE__*/jsxRuntime.jsx(layout.HStack, {
+        alignItems: "center",
+        backgroundColor: "surfaceTertiary",
+        borderRadius: "small",
+        justifyContent: "center",
+        height: "100%",
+        UNSAFE_className: style.css({
+          aspectRatio: '1 / 1'
+        }),
+        children: /*#__PURE__*/jsxRuntime.jsx(icon.Icon, {
+          src: props.icon,
+          size: "medium",
+          color: "neutral"
+        })
+      })
+    }), /*#__PURE__*/jsxRuntime.jsxs(layout.VStack, {
+      gap: "medium",
+      minWidth: "alias.singleLineWidth",
+      flex: true,
+      children: [/*#__PURE__*/jsxRuntime.jsx(typography.Text, {
+        children: /*#__PURE__*/jsxRuntime.jsx("span", {
+          className: style.css(trimStartStyles),
+          title: props.name,
+          children: props.name
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(typography.Text, {
+        size: "small",
+        color: "neutralSecondary",
+        children: formatBytes(props.size)
+      }), props.children]
+    })]
+  });
+}
+function formatBytes(size, options = defaultBytesOptions(size)) {
+  return bytes__default["default"](size, options);
+}
+function defaultBytesOptions(size) {
+  // increase precision for larger files
+  const GB = 1000000000;
+  const MB = 1000000;
+  const decimalPlaces = size >= GB ? 2 : size >= MB ? 1 : 0;
+  return {
+    decimalPlaces
+  };
+}
+function useFileData(value) {
+  const [objectUrl, setObjectUrl] = react.useState('');
+  react.useEffect(() => {
+    if (value.kind === 'upload') {
+      const objectUrl = URL.createObjectURL(value.data.file);
+      setObjectUrl(objectUrl);
+      return () => {
+        URL.revokeObjectURL(objectUrl);
+      };
+    }
+  }, [value]);
+  switch (value.kind) {
+    case 'from-server':
+      return {
+        icon: getFileIcon(value.data.filename),
+        name: value.data.filename,
+        size: value.data.filesize,
+        href: value.data.src
+      };
+    case 'upload':
+      return {
+        icon: fileUpIcon.fileUpIcon,
+        name: value.data.file.name,
+        size: value.data.file.size,
+        href: objectUrl
+      };
+    default:
+      return null;
+  }
+}
+
+// prettier-ignore
+const FILE_TYPES = {
+  audio: new Set(['aac', 'aiff', 'alac', 'flac', 'm4a', 'mp3', 'ogg', 'wav', 'wma']),
+  binary: new Set(['bin', 'dat', 'exe', 'iso', 'pkg', 'rar', 'tar', 'zip']),
+  code: new Set(['c', 'cpp', 'cs', 'css', 'go', 'html', 'java', 'js', 'jsx', 'less', 'php', 'py', 'rb', 'rs', 'scss', 'ts', 'tsx', 'xml']),
+  image: new Set(['avif', 'bmp', 'gif', 'heic', 'ico', 'jpeg', 'jpg', 'png', 'svg', 'tiff', 'webp']),
+  json: new Set(['geojson', 'json', 'json5', 'jsonld']),
+  spreadsheet: new Set(['csv', 'ods', 'tsv', 'xls', 'xlsx']),
+  text: new Set(['doc', 'docx', 'eml', 'log', 'md', 'msg', 'odt', 'pdf', 'rtf', 'tex', 'txt']),
+  video: new Set(['avi', 'flv', 'm4v', 'mkv', 'mov', 'mp4', 'ogg', 'webm', 'wmv'])
+};
+function getFileIcon(filename) {
+  const extension = getExtension(filename);
+  if (FILE_TYPES.audio.has(extension)) return fileAudioIcon.fileAudioIcon;
+  if (FILE_TYPES.binary.has(extension)) return fileDigitIcon.fileDigitIcon;
+  if (FILE_TYPES.code.has(extension)) return fileCodeIcon.fileCodeIcon;
+  if (FILE_TYPES.image.has(extension)) return fileImageIcon.fileImageIcon;
+  if (FILE_TYPES.json.has(extension)) return fileJsonIcon.fileJsonIcon;
+  if (FILE_TYPES.spreadsheet.has(extension)) return fileSpreadsheetIcon.fileSpreadsheetIcon;
+  if (FILE_TYPES.text.has(extension)) return fileTextIcon.fileTextIcon;
+  if (FILE_TYPES.video.has(extension)) return fileVideoIcon.fileVideoIcon;
+  return fileIcon.fileIcon;
+}
+function getExtension(filename) {
+  // `extname` returns e.g. ".mov", remove leading dot to match "mov"
+  return path.extname(filename).slice(1).toLowerCase();
+}
+function useTrimStartStyles() {
+  const {
+    direction
+  } = i18n.useLocale();
+  return {
+    direction: direction === 'rtl' ? 'ltr' : 'rtl',
+    display: 'block',
+    overflow: 'hidden',
+    textAlign: direction === 'rtl' ? 'right' : 'left',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap'
+  };
+}
+function createErrorMessage(value) {
+  if (value.kind === 'upload') {
+    return validateFile(value.data);
+  }
+}
+function validateFile({
+  validity
+}) {
+  if (!validity.valid) {
+    return 'Something went wrong, please reload and try again.';
+  }
+}
+
+exports.Field = Field;
+exports.formatBytes = formatBytes;
+exports.useTrimStartStyles = useTrimStartStyles;
+exports.validateFile = validateFile;