react-image-upload - npm Package Compare versions

Comparing version 1.1.1 to 2.0.0

dist/index.js

@@ -1,122 +0,2 @@
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-var React = require('react');
-var React__default = _interopDefault(React);
-
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
-var styles = {"__content":"_2VJLH","__imgWrapper":"_FW764","__btnWrapper":"_354pS","__btn":"_3TA7V","__label":"_3ulBn","__input":"_1Zcq6","__img":"_196dV"};
-
-var ImageUploader = function ImageUploader(_ref) {
-  var onFileAdded = _ref.onFileAdded,
-      onFileRemoved = _ref.onFileRemoved,
-      uploadElement = _ref.uploadElement,
-      height = _ref.height,
-      width = _ref.width,
-      background = _ref.background;
-  var ref = React.useRef();
-
-  var _useState = React.useState({}),
-      currentImg = _useState[0],
-      setCurrentImg = _useState[1];
-
-  var handleImageUpload = function handleImageUpload(e) {
-    if (e.target.files.length > 0) {
-      var imageObject = {
-        file: e.target.files[0],
-        dataUrl: URL.createObjectURL(e.target.files[0])
-      };
-      setCurrentImg(function (oldImage) {
-        return _extends({}, oldImage, imageObject);
-      });
-      if (onFileAdded) onFileAdded(currentImg);
-    }
-  };
-
-  var handleDeleteImage = function handleDeleteImage() {
-    if (onFileRemoved) onFileRemoved(currentImg);
-    ref.current.files = null;
-    ref.current.value = '';
-    setCurrentImg({});
-  };
-
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: styles.__content
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: styles.__imgWrapper,
-    style: {
-      height: height,
-      width: width,
-      background: background
-    }
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: styles.__btnWrapper
-  }, /*#__PURE__*/React__default.createElement("button", {
-    className: styles.__btn,
-    onClick: handleDeleteImage
-  }, /*#__PURE__*/React__default.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "20",
-    height: "20",
-    viewBox: "0 0 24 24",
-    fill: "#848484"
-  }, /*#__PURE__*/React__default.createElement("path", {
-    d: "M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm7 14h-14v-4h14v4z"
-  })))), /*#__PURE__*/React__default.createElement("label", {
-    className: styles.__label
-  }, /*#__PURE__*/React__default.createElement(UploadElement, {
-    element: uploadElement
-  }), currentImg.dataUrl ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null) : /*#__PURE__*/React__default.createElement("input", {
-    key: currentImg,
-    ref: ref,
-    type: "file",
-    name: "upload",
-    className: styles.__input,
-    onChange: handleImageUpload,
-    accept: "image/*",
-    id: "upload"
-  })), currentImg.dataUrl ? /*#__PURE__*/React__default.createElement("img", {
-    className: styles.__img,
-    src: currentImg === null || currentImg === void 0 ? void 0 : currentImg.dataUrl,
-    alt: currentImg === null || currentImg === void 0 ? void 0 : currentImg.dataUrl,
-    loading: "lazy"
-  }) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null)));
-};
-
-function UploadElement(_ref2) {
-  var element = _ref2.element;
-
-  if (element) {
-    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, element);
-  }
-
-  return /*#__PURE__*/React__default.createElement("svg", {
-    width: "50",
-    height: "50",
-    viewBox: "0 0 50 50",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React__default.createElement("path", {
-    d: "M8.33332 8.33332H14.5833L18.75 4.16666H31.25L35.4167 8.33332H41.6667C42.7717 8.33332 43.8315 8.77231 44.6129 9.55371C45.3943 10.3351 45.8333 11.3949 45.8333 12.5V37.5C45.8333 38.6051 45.3943 39.6649 44.6129 40.4463C43.8315 41.2277 42.7717 41.6666 41.6667 41.6666H8.33332C7.22825 41.6666 6.16845 41.2277 5.38704 40.4463C4.60564 39.6649 4.16666 38.6051 4.16666 37.5V12.5C4.16666 11.3949 4.60564 10.3351 5.38704 9.55371C6.16845 8.77231 7.22825 8.33332 8.33332 8.33332ZM25 14.5833C22.2373 14.5833 19.5878 15.6808 17.6343 17.6343C15.6808 19.5878 14.5833 22.2373 14.5833 25C14.5833 27.7627 15.6808 30.4122 17.6343 32.3657C19.5878 34.3192 22.2373 35.4167 25 35.4167C27.7627 35.4167 30.4122 34.3192 32.3657 32.3657C34.3192 30.4122 35.4167 27.7627 35.4167 25C35.4167 22.2373 34.3192 19.5878 32.3657 17.6343C30.4122 15.6808 27.7627 14.5833 25 14.5833ZM25 18.75C26.6576 18.75 28.2473 19.4085 29.4194 20.5806C30.5915 21.7527 31.25 23.3424 31.25 25C31.25 26.6576 30.5915 28.2473 29.4194 29.4194C28.2473 30.5915 26.6576 31.25 25 31.25C23.3424 31.25 21.7527 30.5915 20.5806 29.4194C19.4085 28.2473 18.75 26.6576 18.75 25C18.75 23.3424 19.4085 21.7527 20.5806 20.5806C21.7527 19.4085 23.3424 18.75 25 18.75Z",
-    fill: "#848484"
-  }));
-}
-
-module.exports = ImageUploader;
+"use strict";var e=require("react");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=t(e);function n(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function l(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?n(Object(r),!0).forEach((function(t){a(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):n(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==r)return;var n,l,a=[],o=!0,u=!1;try{for(r=r.call(e);!(o=(n=r.next()).done)&&(a.push(n.value),!t||a.length!==t);o=!0);}catch(e){u=!0,l=e}finally{try{o||null==r.return||r.return()}finally{if(u)throw l}}return a}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return u(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return u(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function u(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function i(e){var t=e.element,n=e.color;return t?r.default.createElement(r.default.Fragment,null,t):r.default.createElement("svg",{width:"50",height:"50",viewBox:"0 0 50 50",fill:"none",xmlns:"http://www.w3.org/2000/svg"},r.default.createElement("path",{d:"M8.33332 8.33332H14.5833L18.75 4.16666H31.25L35.4167 8.33332H41.6667C42.7717 8.33332 43.8315 8.77231 44.6129 9.55371C45.3943 10.3351 45.8333 11.3949 45.8333 12.5V37.5C45.8333 38.6051 45.3943 39.6649 44.6129 40.4463C43.8315 41.2277 42.7717 41.6666 41.6667 41.6666H8.33332C7.22825 41.6666 6.16845 41.2277 5.38704 40.4463C4.60564 39.6649 4.16666 38.6051 4.16666 37.5V12.5C4.16666 11.3949 4.60564 10.3351 5.38704 9.55371C6.16845 8.77231 7.22825 8.33332 8.33332 8.33332ZM25 14.5833C22.2373 14.5833 19.5878 15.6808 17.6343 17.6343C15.6808 19.5878 14.5833 22.2373 14.5833 25C14.5833 27.7627 15.6808 30.4122 17.6343 32.3657C19.5878 34.3192 22.2373 35.4167 25 35.4167C27.7627 35.4167 30.4122 34.3192 32.3657 32.3657C34.3192 30.4122 35.4167 27.7627 35.4167 25C35.4167 22.2373 34.3192 19.5878 32.3657 17.6343C30.4122 15.6808 27.7627 14.5833 25 14.5833ZM25 18.75C26.6576 18.75 28.2473 19.4085 29.4194 20.5806C30.5915 21.7527 31.25 23.3424 31.25 25C31.25 26.6576 30.5915 28.2473 29.4194 29.4194C28.2473 30.5915 26.6576 31.25 25 31.25C23.3424 31.25 21.7527 30.5915 20.5806 29.4194C19.4085 28.2473 18.75 26.6576 18.75 25C18.75 23.3424 19.4085 21.7527 20.5806 20.5806C21.7527 19.4085 23.3424 18.75 25 18.75Z",fill:n||"#848484"}))}function c(e){var t=e.icon;return t?r.default.createElement(r.default.Fragment,null,t):r.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 24 24",fill:"#848484"},r.default.createElement("path",{d:"M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm7 14h-14v-4h14v4z"}))}module.exports=function(t){var n=t.onFileAdded,a=t.onFileRemoved,u=t.uploadElement,f=t.deleteIcon,d=t.style,s=o(e.useState({}),2),p=s[0],m=s[1];r.default.useEffect((function(){n&&n(p)}),[p]);return r.default.createElement("div",{className:"uploader__container"},r.default.createElement("div",{className:"uploader__placeholder",style:d},r.default.createElement("div",{className:"uploader__btn_wrapper"},r.default.createElement("div",{className:"uploader__btn",onClick:function(){a&&Object.keys(p).length>0&&a(p),m({})}},r.default.createElement(c,{icon:f}))),!(null!=p&&p.dataUrl)&&r.default.createElement("label",{id:"file_uploader",className:"uploader__file_input_label"},r.default.createElement(i,{element:u,color:null==d?void 0:d.color}),r.default.createElement("input",{className:"uploader__file_input",key:p,type:"file",name:"upload",onChange:function(e){if(e.target.files.length>0){var t={file:e.target.files[0],dataUrl:URL.createObjectURL(e.target.files[0])};m((function(e){return l(l({},e),t)}))}},accept:"image/*",id:"file_uploader"})),(null==p?void 0:p.dataUrl)&&r.default.createElement("img",{className:"uploader__file",src:null==p?void 0:p.dataUrl,alt:null==p?void 0:p.dataUrl,loading:"lazy"})))};
 //# sourceMappingURL=index.js.map

dist/index.modern.js

@@ -1,53 +0,34 @@
-import React, { useRef, useState } from 'react';
+import React, { useState } from 'react';
 
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
+const ImageUploader = ({
+  onFileAdded,
+  onFileRemoved,
+  uploadElement,
+  deleteIcon,
+  style
+}) => {
+  const [currentImg, setCurrentImg] = useState({});
 
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
-var styles = {"__content":"_2VJLH","__imgWrapper":"_FW764","__btnWrapper":"_354pS","__btn":"_3TA7V","__label":"_3ulBn","__input":"_1Zcq6","__img":"_196dV"};
-
-var ImageUploader = function ImageUploader(_ref) {
-  var onFileAdded = _ref.onFileAdded,
-      onFileRemoved = _ref.onFileRemoved,
-      uploadElement = _ref.uploadElement,
-      height = _ref.height,
-      width = _ref.width,
-      background = _ref.background;
-  var ref = useRef();
-
-  var _useState = useState({}),
-      currentImg = _useState[0],
-      setCurrentImg = _useState[1];
-
-  var handleImageUpload = function handleImageUpload(e) {
+  const handleFilePicker = e => {
     if (e.target.files.length > 0) {
-      var imageObject = {
+      const imageObject = {
         file: e.target.files[0],
         dataUrl: URL.createObjectURL(e.target.files[0])
       };
-      setCurrentImg(function (oldImage) {
-        return _extends({}, oldImage, imageObject);
+      setCurrentImg(oldImage => {
+        return { ...oldImage,
+          ...imageObject
+        };
       });
-      if (onFileAdded) onFileAdded(currentImg);
     }
   };
 
-  var handleDeleteImage = function handleDeleteImage() {
-    if (onFileRemoved) onFileRemoved(currentImg);
-    ref.current.files = null;
-    ref.current.value = '';
+  React.useEffect(() => {
+    if (onFileAdded) {
+      onFileAdded(currentImg);
+    }
+  }, [currentImg]);
+
+  const handleDeleteImage = () => {
+    if (onFileRemoved && Object.keys(currentImg).length > 0) onFileRemoved(currentImg);
     setCurrentImg({});
@@ -57,47 +38,39 @@ };
   return /*#__PURE__*/React.createElement("div", {
-    className: styles.__content
+    className: "uploader__container"
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles.__imgWrapper,
-    style: {
-      height: height,
-      width: width,
-      background: background
-    }
+    className: "uploader__placeholder",
+    style: style
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles.__btnWrapper
-  }, /*#__PURE__*/React.createElement("button", {
-    className: styles.__btn,
+    className: "uploader__btn_wrapper"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "uploader__btn",
     onClick: handleDeleteImage
-  }, /*#__PURE__*/React.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "20",
-    height: "20",
-    viewBox: "0 0 24 24",
-    fill: "#848484"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm7 14h-14v-4h14v4z"
-  })))), /*#__PURE__*/React.createElement("label", {
-    className: styles.__label
+  }, /*#__PURE__*/React.createElement(DeleteIcon, {
+    icon: deleteIcon
+  }))), !(currentImg !== null && currentImg !== void 0 && currentImg.dataUrl) && /*#__PURE__*/React.createElement("label", {
+    id: "file_uploader",
+    className: "uploader__file_input_label"
   }, /*#__PURE__*/React.createElement(UploadElement, {
-    element: uploadElement
-  }), currentImg.dataUrl ? /*#__PURE__*/React.createElement(React.Fragment, null) : /*#__PURE__*/React.createElement("input", {
+    element: uploadElement,
+    color: style === null || style === void 0 ? void 0 : style.color
+  }), /*#__PURE__*/React.createElement("input", {
+    className: "uploader__file_input",
     key: currentImg,
-    ref: ref,
     type: "file",
     name: "upload",
-    className: styles.__input,
-    onChange: handleImageUpload,
+    onChange: handleFilePicker,
     accept: "image/*",
-    id: "upload"
-  })), currentImg.dataUrl ? /*#__PURE__*/React.createElement("img", {
-    className: styles.__img,
+    id: "file_uploader"
+  })), (currentImg === null || currentImg === void 0 ? void 0 : currentImg.dataUrl) && /*#__PURE__*/React.createElement("img", {
+    className: "uploader__file",
     src: currentImg === null || currentImg === void 0 ? void 0 : currentImg.dataUrl,
     alt: currentImg === null || currentImg === void 0 ? void 0 : currentImg.dataUrl,
     loading: "lazy"
-  }) : /*#__PURE__*/React.createElement(React.Fragment, null)));
+  })));
 };
 
-function UploadElement(_ref2) {
-  var element = _ref2.element;
-
+function UploadElement({
+  element,
+  color
+}) {
   if (element) {
@@ -115,3 +88,21 @@ return /*#__PURE__*/React.createElement(React.Fragment, null, element);
     d: "M8.33332 8.33332H14.5833L18.75 4.16666H31.25L35.4167 8.33332H41.6667C42.7717 8.33332 43.8315 8.77231 44.6129 9.55371C45.3943 10.3351 45.8333 11.3949 45.8333 12.5V37.5C45.8333 38.6051 45.3943 39.6649 44.6129 40.4463C43.8315 41.2277 42.7717 41.6666 41.6667 41.6666H8.33332C7.22825 41.6666 6.16845 41.2277 5.38704 40.4463C4.60564 39.6649 4.16666 38.6051 4.16666 37.5V12.5C4.16666 11.3949 4.60564 10.3351 5.38704 9.55371C6.16845 8.77231 7.22825 8.33332 8.33332 8.33332ZM25 14.5833C22.2373 14.5833 19.5878 15.6808 17.6343 17.6343C15.6808 19.5878 14.5833 22.2373 14.5833 25C14.5833 27.7627 15.6808 30.4122 17.6343 32.3657C19.5878 34.3192 22.2373 35.4167 25 35.4167C27.7627 35.4167 30.4122 34.3192 32.3657 32.3657C34.3192 30.4122 35.4167 27.7627 35.4167 25C35.4167 22.2373 34.3192 19.5878 32.3657 17.6343C30.4122 15.6808 27.7627 14.5833 25 14.5833ZM25 18.75C26.6576 18.75 28.2473 19.4085 29.4194 20.5806C30.5915 21.7527 31.25 23.3424 31.25 25C31.25 26.6576 30.5915 28.2473 29.4194 29.4194C28.2473 30.5915 26.6576 31.25 25 31.25C23.3424 31.25 21.7527 30.5915 20.5806 29.4194C19.4085 28.2473 18.75 26.6576 18.75 25C18.75 23.3424 19.4085 21.7527 20.5806 20.5806C21.7527 19.4085 23.3424 18.75 25 18.75Z",
+    fill: color || '#848484'
+  }));
+}
+
+function DeleteIcon({
+  icon
+}) {
+  if (icon) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, icon);
+  }
+
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 24 24",
     fill: "#848484"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm7 14h-14v-4h14v4z"
   }));
@@ -118,0 +109,0 @@ }

package.json

 {
   "name": "react-image-upload",
-  "version": "1.1.1",
+  "version": "2.0.0",
   "description": "react library for uploading images",
@@ -9,3 +9,3 @@ "author": "chimdie",
   "main": "dist/index.js",
-  "module": "dist/index.modern.js",
+  "module": "dist/index.es.js",
   "source": "src/index.js",
@@ -21,7 +21,5 @@ "engines": {
   "scripts": {
-    "build": "microbundle-crl --no-compress --format modern,cjs",
-    "start": "microbundle-crl watch --no-compress --format modern,cjs",
-    "prepare": "run-s build",
-    "test": "run-s test:unit test:lint test:build",
-    "test:build": "run-s build",
+    "build": "rollup -c",
+    "start": "rollup -c -w",
+    "test": "echo \"No test specified\"",
     "test:lint": "eslint .",
@@ -34,7 +32,14 @@ "test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
   "peerDependencies": {
-    "react": "^16.0.0"
+    "react": "^16.0.0",
+    "styled-components": ">= 3"
   },
   "devDependencies": {
-    "microbundle-crl": "^0.13.10",
+    "@babel/preset-env": "^7.16.0",
+    "@babel/preset-react": "^7.16.0",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^21.0.1",
+    "@rollup/plugin-node-resolve": "^13.0.6",
     "babel-eslint": "^10.0.3",
+    "babel-plugin-styled-components": "^1.13.3",
+    "core-js": "^3.19.1",
     "cross-env": "^7.0.2",
@@ -52,11 +57,22 @@ "eslint": "^6.8.0",
     "gh-pages": "^2.2.0",
+    "microbundle-crl": "^0.13.10",
     "npm-run-all": "^4.1.5",
+    "postcss": "^8.3.11",
     "prettier": "^2.0.4",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-scripts": "^3.4.1"
+    "react-scripts": "^3.4.1",
+    "rollup": "^2.59.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.1",
+    "rollup-plugin-styles": "^3.14.1",
+    "rollup-plugin-terser": "^7.0.2",
+    "styled-components": "^5.3.3"
   },
   "files": [
     "dist"
-  ]
+  ],
+  "dependencies": {
+    "@rollup/plugin-image": "^2.1.1"
+  }
 }

README.md

@@ -5,4 +5,2 @@ # react-image-upload
 
-> Made with create-react-library
-
 [![NPM](https://img.shields.io/npm/v/react-image-upload.svg)](https://www.npmjs.com/package/react-image-upload) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
@@ -19,4 +17,2 @@
 ```jsx
-import React from 'react'
-
 import ImageUploader from 'react-image-upload'
@@ -26,4 +22,63 @@ import 'react-image-upload/dist/index.css'
 const App = () => {
-  return <ImageUploader />
+  function getImageFileObject(imageFile) {
+    console.log({ onAdd: imageFile })
+  }
+  function runAfterImageDelete(file) {
+    console.log({ onDele: file })
+  }
+  return (
+    <div className='_dFlex'>
+      {/* example one */}
+      <div className='_m4'>
+        <ImageUploader
+          onFileAdded={(img) => getImageFileObject(img)}
+          onFileRemoved={(img) => runAfterImageDelete(img)}
+          height={200}
+          width={300}
+        />
+      </div>
+
+      {/* example 2 */}
+      <div className='_m4'>
+        <ImageUploader
+          onFileAdded={(img) => getImageFileObject(img)}
+          onFileRemoved={(img) => runAfterImageDelete(img)}
+          uploadElement={
+            <div>
+              <svg
+                class='svg-circleplus'
+                viewBox='0 0 100 100'
+                style={{ height: '20px', stroke: 'green' }}
+              >
+                <circle
+                  cx='50'
+                  cy='50'
+                  r='45'
+                  fill='none'
+                  strokeWidth='7.5'
+                ></circle>
+                <line
+                  x1='32.5'
+                  y1='50'
+                  x2='67.5'
+                  y2='50'
+                  strokeWidth='5'
+                ></line>
+                <line
+                  x1='50'
+                  y1='32.5'
+                  x2='50'
+                  y2='67.5'
+                  strokeWidth='5'
+                ></line>
+              </svg>
+            </div>
+          }
+        />
+      </div>
+    </div>
+  )
 }
+
+export default App
 ```
@@ -30,0 +85,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

28450

increased by3.79%

Number of package files

9

increased by28.57%

Number of lines in readme file

86

increased by177.42%

Worsened metrics

Dependency count

3

increased by200%

Dev dependency count

33

increased by73.68%

Lines of code

123

decreased by-55.43%

Number of low quality alerts

3

increased by200%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@rollup/plugin-image@^2.1.1

• + Added@emotion/is-prop-valid@1.2.2(transitive)

• + Added@emotion/memoize@0.8.1(transitive)

• + Added@emotion/unitless@0.8.1(transitive)

• + Added@rollup/plugin-image@2.1.1(transitive)

• + Added@rollup/pluginutils@3.1.0(transitive)

• + Added@types/estree@0.0.39(transitive)

• + Added@types/stylis@4.2.5(transitive)

• + Addedcamelize@1.0.1(transitive)

• + Addedcss-color-keywords@1.0.0(transitive)

• + Addedcss-to-react-native@3.2.0(transitive)

• + Addedcsstype@3.1.3(transitive)

• + Addedestree-walker@1.0.1(transitive)

• + Addedfsevents@2.3.3(transitive)

• + Addedmini-svg-data-uri@1.4.4(transitive)

• + Addednanoid@3.3.8(transitive)

• + Addedpicocolors@1.1.1(transitive)

• + Addedpicomatch@2.3.1(transitive)

• + Addedpostcss@8.4.38(transitive)

• + Addedpostcss-value-parser@4.2.0(transitive)

• + Addedreact@19.0.0(transitive)

• + Addedreact-dom@19.0.0(transitive)

• + Addedrollup@2.79.2(transitive)

• + Addedscheduler@0.25.0(transitive)

• + Addedshallowequal@1.1.0(transitive)

• + Addedsource-map-js@1.2.1(transitive)

• + Addedstyled-components@6.1.13(transitive)

• + Addedstylis@4.3.2(transitive)

• + Addedtslib@2.6.2(transitive)