@nixxie-cms/core 1.0.0

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

@@ -0,0 +1,361 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var fields_types_image_utils_dist_nixxieCmsCoreFieldsTypesImageUtils = require('../../utils/dist/nixxie-cms-core-fields-types-image-utils.cjs.js');
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var button = require('@keystar/ui/button');
+var field = require('@keystar/ui/field');
+var layout = require('@keystar/ui/layout');
+var style = require('@keystar/ui/style');
+var typography = require('@keystar/ui/typography');
+var Field$1 = require('../../../../../dist/Field-ed8d7627.cjs.js');
+require('@react-aria/i18n');
+require('bytes');
+require('path');
+require('@keystar/ui/icon');
+require('@keystar/ui/icon/icons/fileAudioIcon');
+require('@keystar/ui/icon/icons/fileCodeIcon');
+require('@keystar/ui/icon/icons/fileDigitIcon');
+require('@keystar/ui/icon/icons/fileIcon');
+require('@keystar/ui/icon/icons/fileImageIcon');
+require('@keystar/ui/icon/icons/fileJsonIcon');
+require('@keystar/ui/icon/icons/fileSpreadsheetIcon');
+require('@keystar/ui/icon/icons/fileTextIcon');
+require('@keystar/ui/icon/icons/fileUpIcon');
+require('@keystar/ui/icon/icons/fileVideoIcon');
+
+function Field(props) {
+  const {
+    autoFocus,
+    field: field$1,
+    onChange,
+    value
+  } = props;
+  const inputRef = react.useRef(null);
+  const errorMessage = validateImage(field$1.extensions, 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]);
+  const accept = react.useMemo(() => field$1.extensions.map(ext => [`.${ext}`, `image/${ext}`].join(', ')).join(', '), []);
+  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(ImageView, {
+        isInvalid: Boolean(errorMessage),
+        onFileTrigger: onFileTrigger,
+        onChange: onChange,
+        value: value
+      }), /*#__PURE__*/react.createElement("input", {
+        ...inputProps,
+        accept: accept,
+        autoComplete: "off",
+        autoFocus: autoFocus,
+        disabled: onChange === undefined,
+        hidden: true,
+        key: inputKey,
+        name: field$1.fieldKey,
+        onChange: onUploadChange,
+        ref: inputRef,
+        type: "file"
+      })]
+    })
+  });
+}
+function ImageView(props) {
+  const {
+    isInvalid,
+    onFileTrigger,
+    onChange,
+    value
+  } = props;
+  const imageData = useImageData(value);
+  return /*#__PURE__*/jsxRuntime.jsxs(layout.VStack, {
+    gap: "regular",
+    children: [isInvalid || !imageData ? null : /*#__PURE__*/jsxRuntime.jsx(ImageDetails, {
+      ...imageData,
+      children: onChange && /*#__PURE__*/jsxRuntime.jsxs(layout.HStack, {
+        gap: "regular",
+        alignItems: "center",
+        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"
+        })]
+      })
+    }), !imageData && /*#__PURE__*/jsxRuntime.jsxs(layout.HStack, {
+      gap: "regular",
+      alignItems: "center",
+      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 useObjectURL(fileData) {
+  const [objectURL, setObjectURL] = react.useState(undefined);
+  react.useEffect(() => {
+    if (!fileData) return;
+    const url = URL.createObjectURL(fileData);
+    setObjectURL(url);
+    return () => URL.revokeObjectURL(url);
+  }, [fileData]);
+  return objectURL;
+}
+
+// ==============================
+// Styled Components
+// ==============================
+
+const SMALL_CONTAINER_MAX = `@container (max-width: 419px)`;
+const SMALL_CONTAINER_MIN = `@container (min-width: 420px)`;
+function ImageDetails(props) {
+  const trimStartStyles = Field$1.useTrimStartStyles();
+
+  // hide content until the uploaded image until it's available; use dimensions
+  // as an indicator since they're set on load.
+  const loadedStyles = {
+    opacity: props.height && props.width ? 1 : 0,
+    transition: style.transition('opacity')
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: style.css({
+      backgroundColor: style.tokenSchema.color.background.canvas,
+      border: `1px solid ${style.tokenSchema.color.border.neutral}`,
+      borderRadius: style.tokenSchema.size.radius.regular,
+      minHeight: style.tokenSchema.size.scale['1600'],
+      contain: 'paint',
+      // crop img to border radius
+      display: 'flex',
+      [SMALL_CONTAINER_MAX]: {
+        flexDirection: 'column'
+      }
+    }),
+    children: [/*#__PURE__*/jsxRuntime.jsx("img", {
+      onLoad: props.onLoad,
+      className: style.css({
+        maxHeight: style.tokenSchema.size.scale[6000],
+        // constrain tall/narrow images
+        maxWidth: '100%',
+        // constrain to container width
+        minWidth: 0,
+        // allow the image to shrink properly
+        objectFit: 'cover',
+        // fill available space w/o distorting
+
+        [SMALL_CONTAINER_MIN]: {
+          height: style.tokenSchema.size.scale['1600']
+        }
+      }),
+      style: loadedStyles,
+      alt: "preview of the upload",
+      src: props.url
+    }), /*#__PURE__*/jsxRuntime.jsxs(layout.VStack, {
+      gap: "medium",
+      padding: "large",
+      flex: true,
+      UNSAFE_className: style.css({
+        // ensure the metadata doesn't shrink too much, 40% allows more
+        // breathing room where available with a hard limit pixel value
+        minWidth: `max(${style.tokenSchema.size.alias.singleLineWidth}, 40%)`
+      }),
+      UNSAFE_style: loadedStyles,
+      children: [props.name ? /*#__PURE__*/jsxRuntime.jsx(typography.Text, {
+        children: /*#__PURE__*/jsxRuntime.jsx("span", {
+          className: style.css(trimStartStyles),
+          title: props.name,
+          children: props.name
+        })
+      }) : null, props.filesize ? /*#__PURE__*/jsxRuntime.jsxs(typography.Text, {
+        size: "small",
+        color: "neutralSecondary",
+        overflow: "unset",
+        children: [Field$1.formatBytes(props.filesize), " \xB7 ", props.width, "\u202F\xD7\u202F", props.height]
+      }) : null, props.children]
+    })]
+  });
+}
+function useImageData(value) {
+  // only relevant for uploaded images, but we must observe the rules of hooks
+  // so these can't be called conditionally.
+  const imagePathFromUpload = useObjectURL(value.kind === 'upload' ? value.data.file : undefined);
+  const [dimensions, setDimensions] = react.useState({
+    height: 0,
+    width: 0
+  });
+  const onLoad = react.useCallback(event => {
+    if (value.kind === 'upload') {
+      setDimensions({
+        height: event.currentTarget.naturalHeight,
+        width: event.currentTarget.naturalWidth
+      });
+    }
+  }, [value.kind]);
+
+  // reset dimensions when the user cancels the upload. we use the dimensions as
+  // a signal that the image has loaded.
+  react.useEffect(() => {
+    if (value.kind !== 'upload') {
+      setDimensions({
+        height: 0,
+        width: 0
+      });
+    }
+  }, [value.kind]);
+  switch (value.kind) {
+    case 'from-server':
+      return {
+        url: value.data.url,
+        name: `${value.data.id}.${value.data.extension}`,
+        filesize: value.data.filesize,
+        width: value.data.width,
+        height: value.data.height,
+        onLoad
+      };
+    case 'upload':
+      return {
+        // always string for simpler types, should be unreachable if the file selection fails validation.
+        url: imagePathFromUpload || '',
+        name: value.data.file.name,
+        filesize: value.data.file.size,
+        width: dimensions.width,
+        height: dimensions.height,
+        onLoad
+      };
+  }
+  return null;
+}
+
+const Cell = ({
+  value
+}) => {
+  if (!value) return null;
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    style: {
+      alignItems: 'center',
+      display: 'flex',
+      height: 24,
+      lineHeight: 0,
+      width: 24
+    },
+    children: /*#__PURE__*/jsxRuntime.jsx("img", {
+      style: {
+        maxHeight: '100%',
+        maxWidth: '100%'
+      },
+      src: value.url
+    })
+  });
+};
+function validateImage(extensions, v) {
+  if (v.kind !== 'upload') return;
+  if (!v.data.validity.valid) return 'Something went wrong, please reload and try again.';
+
+  // check if the file is actually an image
+  if (!v.data.file.type.includes('image')) {
+    return `Sorry, that file type isn't accepted. Please try ${extensions.join(', ')}`;
+  }
+}
+function controller(config) {
+  return {
+    fieldKey: config.fieldKey,
+    label: config.label,
+    description: config.description,
+    defaultValue: {
+      kind: 'empty'
+    },
+    extensions: fields_types_image_utils_dist_nixxieCmsCoreFieldsTypesImageUtils.SUPPORTED_IMAGE_EXTENSIONS,
+    deserialize(item) {
+      const value = item[config.fieldKey];
+      if (!value) return {
+        kind: 'empty'
+      };
+      return {
+        kind: 'from-server',
+        data: value
+      };
+    },
+    serialize(value) {
+      if (value.kind === 'upload') {
+        return {
+          [config.fieldKey]: {
+            upload: value.data.file
+          }
+        };
+      }
+      if (value.kind === 'remove') {
+        return {
+          [config.fieldKey]: null
+        };
+      }
+      return {};
+    },
+    validate(value) {
+      return validateImage(fields_types_image_utils_dist_nixxieCmsCoreFieldsTypesImageUtils.SUPPORTED_IMAGE_EXTENSIONS, value) === undefined;
+    },
+    graphqlSelection: `${config.fieldKey} {
+      id
+      url
+      extension
+      filesize
+      width
+      height
+    }`
+  };
+}
+
+exports.Cell = Cell;
+exports.Field = Field;
+exports.controller = controller;
+exports.validateImage = validateImage;

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

@@ -0,0 +1,354 @@
+import { SUPPORTED_IMAGE_EXTENSIONS } from '../../utils/dist/nixxie-cms-core-fields-types-image-utils.esm.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRef, useMemo, Fragment, createElement, useState, useCallback, useEffect } from 'react';
+import { ActionButton } from '@keystar/ui/button';
+import { Field as Field$1 } from '@keystar/ui/field';
+import { VStack, HStack } from '@keystar/ui/layout';
+import { transition, css, tokenSchema } from '@keystar/ui/style';
+import { Text } from '@keystar/ui/typography';
+import { u as useTrimStartStyles, f as formatBytes } from '../../../../../dist/Field-47f85161.esm.js';
+import '@react-aria/i18n';
+import 'bytes';
+import 'path';
+import '@keystar/ui/icon';
+import '@keystar/ui/icon/icons/fileAudioIcon';
+import '@keystar/ui/icon/icons/fileCodeIcon';
+import '@keystar/ui/icon/icons/fileDigitIcon';
+import '@keystar/ui/icon/icons/fileIcon';
+import '@keystar/ui/icon/icons/fileImageIcon';
+import '@keystar/ui/icon/icons/fileJsonIcon';
+import '@keystar/ui/icon/icons/fileSpreadsheetIcon';
+import '@keystar/ui/icon/icons/fileTextIcon';
+import '@keystar/ui/icon/icons/fileUpIcon';
+import '@keystar/ui/icon/icons/fileVideoIcon';
+
+function Field(props) {
+  const {
+    autoFocus,
+    field,
+    onChange,
+    value
+  } = props;
+  const inputRef = useRef(null);
+  const errorMessage = validateImage(field.extensions, 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]);
+  const accept = useMemo(() => field.extensions.map(ext => [`.${ext}`, `image/${ext}`].join(', ')).join(', '), []);
+  return /*#__PURE__*/jsx(Field$1, {
+    label: field.label,
+    description: field.description,
+    errorMessage: errorMessage,
+    children: inputProps => /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx(ImageView, {
+        isInvalid: Boolean(errorMessage),
+        onFileTrigger: onFileTrigger,
+        onChange: onChange,
+        value: value
+      }), /*#__PURE__*/createElement("input", {
+        ...inputProps,
+        accept: accept,
+        autoComplete: "off",
+        autoFocus: autoFocus,
+        disabled: onChange === undefined,
+        hidden: true,
+        key: inputKey,
+        name: field.fieldKey,
+        onChange: onUploadChange,
+        ref: inputRef,
+        type: "file"
+      })]
+    })
+  });
+}
+function ImageView(props) {
+  const {
+    isInvalid,
+    onFileTrigger,
+    onChange,
+    value
+  } = props;
+  const imageData = useImageData(value);
+  return /*#__PURE__*/jsxs(VStack, {
+    gap: "regular",
+    children: [isInvalid || !imageData ? null : /*#__PURE__*/jsx(ImageDetails, {
+      ...imageData,
+      children: onChange && /*#__PURE__*/jsxs(HStack, {
+        gap: "regular",
+        alignItems: "center",
+        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"
+        })]
+      })
+    }), !imageData && /*#__PURE__*/jsxs(HStack, {
+      gap: "regular",
+      alignItems: "center",
+      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 useObjectURL(fileData) {
+  const [objectURL, setObjectURL] = useState(undefined);
+  useEffect(() => {
+    if (!fileData) return;
+    const url = URL.createObjectURL(fileData);
+    setObjectURL(url);
+    return () => URL.revokeObjectURL(url);
+  }, [fileData]);
+  return objectURL;
+}
+
+// ==============================
+// Styled Components
+// ==============================
+
+const SMALL_CONTAINER_MAX = `@container (max-width: 419px)`;
+const SMALL_CONTAINER_MIN = `@container (min-width: 420px)`;
+function ImageDetails(props) {
+  const trimStartStyles = useTrimStartStyles();
+
+  // hide content until the uploaded image until it's available; use dimensions
+  // as an indicator since they're set on load.
+  const loadedStyles = {
+    opacity: props.height && props.width ? 1 : 0,
+    transition: transition('opacity')
+  };
+  return /*#__PURE__*/jsxs("div", {
+    className: css({
+      backgroundColor: tokenSchema.color.background.canvas,
+      border: `1px solid ${tokenSchema.color.border.neutral}`,
+      borderRadius: tokenSchema.size.radius.regular,
+      minHeight: tokenSchema.size.scale['1600'],
+      contain: 'paint',
+      // crop img to border radius
+      display: 'flex',
+      [SMALL_CONTAINER_MAX]: {
+        flexDirection: 'column'
+      }
+    }),
+    children: [/*#__PURE__*/jsx("img", {
+      onLoad: props.onLoad,
+      className: css({
+        maxHeight: tokenSchema.size.scale[6000],
+        // constrain tall/narrow images
+        maxWidth: '100%',
+        // constrain to container width
+        minWidth: 0,
+        // allow the image to shrink properly
+        objectFit: 'cover',
+        // fill available space w/o distorting
+
+        [SMALL_CONTAINER_MIN]: {
+          height: tokenSchema.size.scale['1600']
+        }
+      }),
+      style: loadedStyles,
+      alt: "preview of the upload",
+      src: props.url
+    }), /*#__PURE__*/jsxs(VStack, {
+      gap: "medium",
+      padding: "large",
+      flex: true,
+      UNSAFE_className: css({
+        // ensure the metadata doesn't shrink too much, 40% allows more
+        // breathing room where available with a hard limit pixel value
+        minWidth: `max(${tokenSchema.size.alias.singleLineWidth}, 40%)`
+      }),
+      UNSAFE_style: loadedStyles,
+      children: [props.name ? /*#__PURE__*/jsx(Text, {
+        children: /*#__PURE__*/jsx("span", {
+          className: css(trimStartStyles),
+          title: props.name,
+          children: props.name
+        })
+      }) : null, props.filesize ? /*#__PURE__*/jsxs(Text, {
+        size: "small",
+        color: "neutralSecondary",
+        overflow: "unset",
+        children: [formatBytes(props.filesize), " \xB7 ", props.width, "\u202F\xD7\u202F", props.height]
+      }) : null, props.children]
+    })]
+  });
+}
+function useImageData(value) {
+  // only relevant for uploaded images, but we must observe the rules of hooks
+  // so these can't be called conditionally.
+  const imagePathFromUpload = useObjectURL(value.kind === 'upload' ? value.data.file : undefined);
+  const [dimensions, setDimensions] = useState({
+    height: 0,
+    width: 0
+  });
+  const onLoad = useCallback(event => {
+    if (value.kind === 'upload') {
+      setDimensions({
+        height: event.currentTarget.naturalHeight,
+        width: event.currentTarget.naturalWidth
+      });
+    }
+  }, [value.kind]);
+
+  // reset dimensions when the user cancels the upload. we use the dimensions as
+  // a signal that the image has loaded.
+  useEffect(() => {
+    if (value.kind !== 'upload') {
+      setDimensions({
+        height: 0,
+        width: 0
+      });
+    }
+  }, [value.kind]);
+  switch (value.kind) {
+    case 'from-server':
+      return {
+        url: value.data.url,
+        name: `${value.data.id}.${value.data.extension}`,
+        filesize: value.data.filesize,
+        width: value.data.width,
+        height: value.data.height,
+        onLoad
+      };
+    case 'upload':
+      return {
+        // always string for simpler types, should be unreachable if the file selection fails validation.
+        url: imagePathFromUpload || '',
+        name: value.data.file.name,
+        filesize: value.data.file.size,
+        width: dimensions.width,
+        height: dimensions.height,
+        onLoad
+      };
+  }
+  return null;
+}
+
+const Cell = ({
+  value
+}) => {
+  if (!value) return null;
+  return /*#__PURE__*/jsx("div", {
+    style: {
+      alignItems: 'center',
+      display: 'flex',
+      height: 24,
+      lineHeight: 0,
+      width: 24
+    },
+    children: /*#__PURE__*/jsx("img", {
+      style: {
+        maxHeight: '100%',
+        maxWidth: '100%'
+      },
+      src: value.url
+    })
+  });
+};
+function validateImage(extensions, v) {
+  if (v.kind !== 'upload') return;
+  if (!v.data.validity.valid) return 'Something went wrong, please reload and try again.';
+
+  // check if the file is actually an image
+  if (!v.data.file.type.includes('image')) {
+    return `Sorry, that file type isn't accepted. Please try ${extensions.join(', ')}`;
+  }
+}
+function controller(config) {
+  return {
+    fieldKey: config.fieldKey,
+    label: config.label,
+    description: config.description,
+    defaultValue: {
+      kind: 'empty'
+    },
+    extensions: SUPPORTED_IMAGE_EXTENSIONS,
+    deserialize(item) {
+      const value = item[config.fieldKey];
+      if (!value) return {
+        kind: 'empty'
+      };
+      return {
+        kind: 'from-server',
+        data: value
+      };
+    },
+    serialize(value) {
+      if (value.kind === 'upload') {
+        return {
+          [config.fieldKey]: {
+            upload: value.data.file
+          }
+        };
+      }
+      if (value.kind === 'remove') {
+        return {
+          [config.fieldKey]: null
+        };
+      }
+      return {};
+    },
+    validate(value) {
+      return validateImage(SUPPORTED_IMAGE_EXTENSIONS, value) === undefined;
+    },
+    graphqlSelection: `${config.fieldKey} {
+      id
+      url
+      extension
+      filesize
+      width
+      height
+    }`
+  };
+}
+
+export { Cell, Field, controller, validateImage };