@blerp/design 1.3.16 → 1.4.1

package/dist/esm/ImageEditor.js

@@ -0,0 +1,240 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import React, { forwardRef, useRef, useState, useImperativeHandle, useEffect, useCallback } from 'react';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+const ImageEditor = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    image,
+    width = 250,
+    height = 250,
+    borderRadius = 0,
+    scale = 1,
+    position = {
+      x: 0.5,
+      y: 0.5
+    },
+    onPositionChange,
+    rotate = 0,
+    crossOrigin = 'anonymous',
+    style = {},
+    className = ''
+  } = _ref;
+  const canvasRef = useRef(null);
+  const containerRef = useRef(null);
+  const imageRef = useRef(null);
+  const [internalPosition, setInternalPosition] = useState(position);
+  const [isDragging, setIsDragging] = useState(false);
+  const dragStart = useRef({
+    x: 0,
+    y: 0
+  });
+  const [imageLoaded, setImageLoaded] = useState(false);
+  const [imageError, setImageError] = useState(false); // Expose the same API as react-avatar-editor
+
+  useImperativeHandle(ref, () => ({
+    getImage: () => {
+      return canvasRef.current;
+    },
+    getImageScaledToCanvas: () => {
+      return canvasRef.current;
+    }
+  })); // Sync position prop with internal state
+
+  useEffect(() => {
+    setInternalPosition(position);
+  }, [position]); // Draw the image on canvas
+
+  const drawImage = useCallback(() => {
+    if (!imageRef.current || !imageLoaded) return;
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d'); // Clear canvas
+
+    ctx.clearRect(0, 0, width, height); // Save context for clipping
+
+    ctx.save(); // Apply circular clipping if borderRadius equals half of width (circular)
+
+    if (borderRadius > 0) {
+      ctx.beginPath();
+
+      if (borderRadius >= width / 2) {
+        // Circular clip
+        ctx.arc(width / 2, height / 2, width / 2, 0, Math.PI * 2);
+      } else {
+        // Rounded rectangle clip
+        const x = 0,
+              y = 0,
+              w = width,
+              h = height,
+              r = borderRadius;
+        ctx.moveTo(x + r, y);
+        ctx.lineTo(x + w - r, y);
+        ctx.quadraticCurveTo(x + w, y, x + w, y + r);
+        ctx.lineTo(x + w, y + h - r);
+        ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
+        ctx.lineTo(x + r, y + h);
+        ctx.quadraticCurveTo(x, y + h, x, y + h - r);
+        ctx.lineTo(x, y + r);
+        ctx.quadraticCurveTo(x, y, x + r, y);
+      }
+
+      ctx.clip();
+    }
+
+    const img = imageRef.current; // Calculate scaled dimensions
+
+    const scaledWidth = img.naturalWidth * scale;
+    const scaledHeight = img.naturalHeight * scale; // Calculate position - convert from 0-1 range to pixel offset
+
+    const maxOffsetX = Math.max(0, (scaledWidth - width) / 2);
+    const maxOffsetY = Math.max(0, (scaledHeight - height) / 2);
+    const offsetX = (internalPosition.x - 0.5) * maxOffsetX * 2;
+    const offsetY = (internalPosition.y - 0.5) * maxOffsetY * 2; // Center the image with position offset
+
+    const x = (width - scaledWidth) / 2 - offsetX;
+    const y = (height - scaledHeight) / 2 - offsetY; // Apply rotation if needed
+
+    if (rotate !== 0) {
+      ctx.translate(width / 2, height / 2);
+      ctx.rotate(rotate * Math.PI / 180);
+      ctx.translate(-width / 2, -height / 2);
+    } // Draw image
+
+
+    ctx.drawImage(img, x, y, scaledWidth, scaledHeight); // Restore context
+
+    ctx.restore();
+  }, [imageLoaded, width, height, scale, internalPosition, borderRadius, rotate]); // Load image
+
+  useEffect(() => {
+    if (!image) {
+      setImageLoaded(false);
+      setImageError(false);
+      return;
+    }
+
+    const img = new Image();
+
+    if (crossOrigin) {
+      img.crossOrigin = crossOrigin;
+    }
+
+    img.onload = () => {
+      imageRef.current = img;
+      setImageLoaded(true);
+      setImageError(false);
+    };
+
+    img.onerror = () => {
+      console.error('Failed to load image');
+      setImageError(true);
+      setImageLoaded(false);
+    }; // Handle both File objects and URLs
+
+
+    let objectURL = null;
+
+    if (typeof image === 'string') {
+      img.src = image;
+    } else if (image instanceof File || image instanceof Blob) {
+      objectURL = URL.createObjectURL(image);
+      img.src = objectURL;
+    }
+
+    return () => {
+      if (objectURL) {
+        URL.revokeObjectURL(objectURL);
+      }
+    };
+  }, [image, crossOrigin]); // Redraw when dependencies change
+
+  useEffect(() => {
+    drawImage();
+  }, [drawImage]); // Mouse drag handlers for panning
+
+  const handleMouseDown = e => {
+    e.preventDefault();
+    setIsDragging(true);
+    dragStart.current = {
+      x: e.clientX,
+      y: e.clientY,
+      startPosX: internalPosition.x,
+      startPosY: internalPosition.y
+    };
+  };
+
+  const handleMouseMove = useCallback(e => {
+    if (!isDragging || !imageRef.current) return;
+    const img = imageRef.current;
+    const scaledWidth = img.naturalWidth * scale;
+    const scaledHeight = img.naturalHeight * scale; // Calculate how much the image is larger than the canvas
+
+    const maxOffsetX = Math.max(0, (scaledWidth - width) / 2);
+    const maxOffsetY = Math.max(0, (scaledHeight - height) / 2); // Convert pixel movement to position (0-1 range)
+
+    const deltaX = e.clientX - dragStart.current.x;
+    const deltaY = e.clientY - dragStart.current.y;
+    const positionDeltaX = maxOffsetX > 0 ? deltaX / maxOffsetX / 2 : 0;
+    const positionDeltaY = maxOffsetY > 0 ? deltaY / maxOffsetY / 2 : 0;
+    const newPosition = {
+      x: Math.max(0, Math.min(1, dragStart.current.startPosX + positionDeltaX)),
+      y: Math.max(0, Math.min(1, dragStart.current.startPosY + positionDeltaY))
+    };
+    setInternalPosition(newPosition);
+
+    if (onPositionChange) {
+      onPositionChange(newPosition);
+    }
+  }, [isDragging, scale, width, height, onPositionChange]);
+  const handleMouseUp = useCallback(() => {
+    setIsDragging(false);
+  }, []); // Add/remove global mouse event listeners
+
+  useEffect(() => {
+    if (isDragging) {
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+      return () => {
+        document.removeEventListener('mousemove', handleMouseMove);
+        document.removeEventListener('mouseup', handleMouseUp);
+      };
+    }
+  }, [isDragging, handleMouseMove, handleMouseUp]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: containerRef,
+    className: className,
+    style: _objectSpread({
+      width: "".concat(width, "px"),
+      height: "".concat(height, "px"),
+      borderRadius: "".concat(borderRadius, "px"),
+      overflow: 'hidden',
+      cursor: isDragging ? 'grabbing' : 'grab',
+      backgroundColor: '#f0f0f0'
+    }, style),
+    onMouseDown: handleMouseDown
+  }, /*#__PURE__*/React.createElement("canvas", {
+    ref: canvasRef,
+    width: width,
+    height: height,
+    style: {
+      display: 'block',
+      width: '100%',
+      height: '100%'
+    }
+  }), imageError && /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)',
+      color: '#999',
+      fontSize: '12px',
+      textAlign: 'center'
+    }
+  }, "Failed to load image"));
+});
+ImageEditor.displayName = 'ImageEditor';
+
+export { ImageEditor as default };

package/dist/esm/ImageUpload.js

@@ -0,0 +1,217 @@
+import _extends from '@babel/runtime/helpers/extends';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { Stack, Text, Box, Button } from './index.js';
+import React, { useState, useRef, useEffect, createRef } from 'react';
+import ImageEditor from './ImageEditor.js';
+import { useWindowSize } from './ScreenSizeHook.js';
+import { useBlerpTheme } from './Theme.js';
+
+const _excluded = ["path", "sx", "size"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+const Icon = _ref => {
+  let {
+    path,
+    sx,
+    size = "24px"
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    component: "svg",
+    viewBox: "0 0 24 24",
+    width: size,
+    height: size,
+    fill: "currentColor",
+    sx: _objectSpread({
+      display: "inline-block",
+      flexShrink: 0
+    }, sx)
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: path
+  }));
+};
+
+const paths = {
+  photo: "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z",
+  close: "M18.3 5.71a.9959.9959 0 00-1.41 0L12 10.59 7.11 5.7a.9959.9959 0 00-1.41 0c-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"
+};
+
+const ImageUploadModal = _ref2 => {
+  let {
+    prevImage,
+    updateImage,
+    onClose,
+    title,
+    isCircularImage,
+    isSquareImage,
+    sizeInfo
+  } = _ref2;
+  const [image, setImage] = useState(prevImage);
+  const [zoom, setZoom] = useState(50);
+  const [loading, setLoading] = useState(false);
+  const [dropzoneHovered, setDropzoneHovered] = useState(false);
+  const size = useWindowSize();
+  const theme = useBlerpTheme();
+  const inputRef = useRef(null);
+  const imageEditorRef = /*#__PURE__*/createRef();
+
+  const urlToObject = async img => {
+    const response = await fetch(img);
+    const blob = await response.blob();
+    const file = new File([blob], img, {
+      type: blob.type
+    });
+    setImage(file);
+  };
+
+  useEffect(() => {
+    if (prevImage) urlToObject(prevImage);
+  }, [prevImage]);
+
+  const handleImageDrop = files => {
+    setImage(files[0]);
+    setDropzoneHovered(false);
+  };
+
+  const handleUploadClick = async () => {
+    if (!image) {
+      alert("You must upload a valid image");
+      return;
+    }
+
+    if (image.size > 8842038) {
+      alert("You must update with a valid image less then 7mb");
+      return;
+    }
+
+    setLoading(true);
+    const canvas = imageEditorRef.current.getImage().toDataURL();
+    const blob = await (await fetch(canvas)).blob();
+    const file = new File([blob], image.name, {
+      type: image.type,
+      size: image.size
+    });
+    await updateImage(file);
+    setLoading(false);
+    onClose();
+  };
+
+  return /*#__PURE__*/React.createElement(Stack, {
+    sx: {
+      minHeight: "580px"
+    },
+    alignItems: "center",
+    justifyContent: "space-between"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    path: paths.close,
+    onClick: onClose,
+    sx: {
+      position: "absolute",
+      top: 20,
+      right: 20,
+      cursor: "pointer"
+    }
+  }), /*#__PURE__*/React.createElement(Stack, {
+    alignItems: "center"
+  }, /*#__PURE__*/React.createElement(Text, {
+    sx: {
+      fontSize: "32px"
+    }
+  }, title), /*#__PURE__*/React.createElement(Text, {
+    color: "grey4"
+  }, "Adjust your image below."), /*#__PURE__*/React.createElement(Text, {
+    color: "grey4"
+  }, sizeInfo)), /*#__PURE__*/React.createElement(Stack, {
+    sx: {
+      minWidth: "300px",
+      backgroundColor: "waxwing.main",
+      maxHeight: "250px",
+      justifyContent: "center",
+      alignItems: "center"
+    }
+  }, !image ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: "100%",
+      height: size.width > 600 ? "300px" : "200px",
+      cursor: "pointer",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center"
+    },
+    onClick: () => {
+      var _inputRef$current;
+
+      return (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.click();
+    },
+    onDragOver: e => {
+      e.preventDefault();
+      setDropzoneHovered(true);
+    },
+    onDragLeave: () => setDropzoneHovered(false),
+    onDrop: e => {
+      e.preventDefault();
+      handleImageDrop(Array.from(e.dataTransfer.files));
+    }
+  }, /*#__PURE__*/React.createElement("input", {
+    ref: inputRef,
+    type: "file",
+    hidden: true,
+    accept: "image/*",
+    onChange: e => handleImageDrop(Array.from(e.target.files))
+  }), dropzoneHovered ? /*#__PURE__*/React.createElement(Icon, {
+    path: paths.photo,
+    size: "100%",
+    sx: {
+      color: "white"
+    }
+  }) : /*#__PURE__*/React.createElement(Text, {
+    sx: {
+      textAlign: "center",
+      width: "80%"
+    }
+  }, "Click or drop image here to upload.")) : image.type !== "image/gif" ? /*#__PURE__*/React.createElement(ImageEditor, {
+    ref: imageEditorRef,
+    width: !isCircularImage && !isSquareImage ? 650 : 250,
+    height: !isCircularImage && !isSquareImage ? 225 : 250,
+    borderRadius: isCircularImage ? 125 : 0,
+    image: image,
+    scale: zoom / 50,
+    crossOrigin: "anonymous"
+  }) : /*#__PURE__*/React.createElement("img", {
+    src: URL.createObjectURL(image),
+    width: "250px",
+    alt: "gif preview"
+  })), image && image.type !== "image/gif" && /*#__PURE__*/React.createElement(Stack, {
+    direction: "row",
+    width: "250px",
+    alignItems: "center"
+  }, /*#__PURE__*/React.createElement(Box, {
+    component: "input",
+    type: "range",
+    min: "35",
+    max: "100",
+    value: zoom,
+    onChange: e => setZoom(e.target.value),
+    sx: {
+      width: "100%",
+      "&::-webkit-slider-thumb": {
+        background: theme.colors.ibisRed
+      }
+    }
+  })), /*#__PURE__*/React.createElement(Stack, {
+    alignItems: "center"
+  }, /*#__PURE__*/React.createElement(Button, {
+    variant: "text",
+    onClick: () => setImage(null)
+  }, image ? "Change Image" : "Cancel"), /*#__PURE__*/React.createElement(Button, {
+    variant: "contained",
+    onClick: handleUploadClick
+  }, "Save Image")));
+};
+
+export { ImageUploadModal as default };