cozy-ui 110.5.0 → 110.7.0

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+# [110.7.0](https://github.com/cozy/cozy-ui/compare/v110.6.0...v110.7.0) (2024-07-09)
+
+
+### Bug Fixes
+
+* **ActionsMenu/addImageToPdf:** Correct excessive weight when adding img ([ee7e46c](https://github.com/cozy/cozy-ui/commit/ee7e46c))
+
+
+### Features
+
+* **ActionsMenu/resizeImage:** Remove unnecessary param ([c6d06e8](https://github.com/cozy/cozy-ui/commit/c6d06e8))
+
+# [110.6.0](https://github.com/cozy/cozy-ui/compare/v110.5.0...v110.6.0) (2024-07-08)
+
+
+### Features
+
+* Add StarOutline icon ([831b793](https://github.com/cozy/cozy-ui/commit/831b793))
+
 # [110.5.0](https://github.com/cozy/cozy-ui/compare/v110.4.0...v110.5.0) (2024-07-04)
 
 

package/assets/icons/ui/star-outline.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="m8 10.305 2.71 1.425-.517-3.018 2.192-2.137-3.03-.44L8 3.389 6.645 6.135l-3.03.44 2.193 2.137-.518 3.018L8 10.305Zm-4.702 4.167.898-5.236L.392 5.528l5.257-.764L8 0l2.351 4.764 5.257.764-3.804 3.708.898 5.236L8 12l-4.702 2.472Z"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "110.5.0",
+  "version": "110.7.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {

package/react/ActionsMenu/Actions/helpers.js

@@ -92,14 +92,13 @@ export const makeBase64FromFile = async file => {
 
 /**
  * @param {HTMLImageElement} image
- * @param {number} [maxSizeInPixel] - Maximum size before being resized
  * @returns {number}
  */
-const getImageScaleRatio = (image, maxSize) => {
+const getImageScaleRatio = image => {
   const longerSideSizeInPixel = Math.max(image.height, image.width)
   let scaleRatio = 1
-  if (maxSize < longerSideSizeInPixel) {
-    scaleRatio = maxSize / longerSideSizeInPixel
+  if (MAX_RESIZE_IMAGE_SIZE < longerSideSizeInPixel) {
+    scaleRatio = MAX_RESIZE_IMAGE_SIZE / longerSideSizeInPixel
   }
 
   return scaleRatio
@@ -108,22 +107,16 @@ const getImageScaleRatio = (image, maxSize) => {
 /**
  * @param {object} opts
  * @param {string} opts.base64 - Base64 of image
- * @param {string} opts.type - Type of image
- * @param {number} opts.maxSize - Maximum size before being resized
  * @returns {Promise<string>}
  */
-const resizeImage = async ({
-  base64: fileDataUri,
-  type: fileType,
-  maxSize
-}) => {
+const resizeImage = async ({ base64: fileDataUri }) => {
   return new Promise((resolve, reject) => {
     const newImage = new Image()
     newImage.src = fileDataUri
     newImage.onerror = reject
     newImage.onload = () => {
       const canvas = document.createElement('canvas')
-      const scaleRatio = getImageScaleRatio(newImage, maxSize)
+      const scaleRatio = getImageScaleRatio(newImage)
       const scaledWidth = scaleRatio * newImage.width
       const scaledHeight = scaleRatio * newImage.height
       const quality =
@@ -138,7 +131,7 @@ const resizeImage = async ({
         .getContext('2d')
         .drawImage(newImage, 0, 0, scaledWidth, scaledHeight)
 
-      resolve(canvas.toDataURL(fileType, quality))
+      resolve(canvas.toDataURL('image/jpeg', quality))
     }
   })
 }
@@ -157,6 +150,7 @@ const fileToDataUri = async file => {
 }
 
 /**
+ * Compress image and add it to pdf
  * @param {PDFDocument} pdfDoc
  * @param {File} file
  * @returns {Promise<void>}
@@ -164,14 +158,9 @@ const fileToDataUri = async file => {
 const addImageToPdf = async (pdfDoc, file) => {
   const fileDataUri = await fileToDataUri(file)
   const resizedImage = await resizeImage({
-    base64: fileDataUri,
-    type: file.type,
-    maxSize: MAX_RESIZE_IMAGE_SIZE
+    base64: fileDataUri
   })
-
-  let img
-  if (file.type === 'image/png') img = await pdfDoc.embedPng(resizedImage)
-  if (file.type === 'image/jpeg') img = await pdfDoc.embedJpg(resizedImage)
+  const img = await pdfDoc.embedJpg(resizedImage)
 
   const page = pdfDoc.addPage([img.width, img.height])
   const { width: pageWidth, height: pageHeight } = page.getSize()

package/react/Icon/Readme.md

@@ -286,6 +286,7 @@ import Spinner from 'cozy-ui/transpiled/react/Icons/Spinner'
 import SportBag from 'cozy-ui/transpiled/react/Icons/SportBag'
 import Stack from 'cozy-ui/transpiled/react/Icons/Stack'
 import Star from 'cozy-ui/transpiled/react/Icons/Star'
+import StarOutline from 'cozy-ui/transpiled/react/Icons/StarOutline'
 import Stats from 'cozy-ui/transpiled/react/Icons/Stats'
 import Subway from 'cozy-ui/transpiled/react/Icons/Subway'
 import Support from 'cozy-ui/transpiled/react/Icons/Support'
@@ -547,6 +548,7 @@ const icons = [
   SportBag,
   Stack,
   Star,
+  StarOutline,
   Stats,
   Subway,
   Support,
@@ -921,7 +923,7 @@ import Typography from 'cozy-ui/transpiled/react/Typography'
 
 const colors = ['#297EF2', '#08b442', '#B449E7', '#F52D2D', '#FF962F']
 let i = 0
-const availableIcons = ['album-add','album-remove','album','answer','apple','archive','arrowUp','attachment','attention','bank-check','bank','banking-add','banking','bell','benefit','bike','bill','bottom','browser-brave','browser-chrome','browser-duckduckgo','browser-edge','browser-edge-chromium','browser-firefox','browser-ie','browser-opera','browser-safari','burger','bus','calendar','camera','car','carbonCopy','carpooling','categories','certified','check-circle','check-list','check-square','check','checkbox','chess','child','circle-filled','clock','clock-outline','cloud-happy','cloud','collect','cocktail','comment','company','compare','compass','connector','contract','contrast','copy','cozy-circle','cozy-laugh', 'cozy-lock', 'cozy-text', 'cozy-release', 'credit-card-add','credit-card','credit','crop','cross-circle-outline','cross-circle','cross-medium','cross-small','cross','cube','dash','dashboard','data-control','debit','devices','dots','down','download','drawing-arrow-up','dropdown-close','dropdown-open','dropdown','dropup','electric-bike','electric-car','electric-scooter','email-notification','email','eu','euro','exchange','eye-closed','eye','face-id','file-add','file-duotone','file-new','file-none','file-outline','file','filter','fingerprint','fitness','flag-outlined','flag','flash-auto','flashlight','folder-add','folder-moveto','folder','forbidden','from-user','gear','globe','gouv','graph-circle','grid','group-list','groups','growth','hand','heart','help','help-outlined','history','home','hourglass','image','info-outlined','info','justice','key','label-outlined','laudry','laptop','left','library','lightbulb','lightning','link-out','link','list','list-min','location','lock', 'lock-screen', 'logout','magic-trick','magnet','magnifier','merge','moped','mosaic-min','motorcycle','mountain','movement-in','movement-out','mouvement','moveto','multi-files','music','new','next','note','notification-email','offline','online', 'openapp', 'openwith','palette','paper','paperplane','password','pen','people','percent-circle','percent','personal-data','phone-download','phone-upload','phone','pie-chart','pin','plane','plus-small','plus', 'pop-inside', 'previous','printer','qualify','radio-checked','radio-unchecked','refresh','relationship','remboursement','rename','repare','reply','restaurant','restore-straight','restore','right','rise','rotate-left','rotate-right','sad-cozy','safe','school','scooter','select-all','setting','share-circle','share','shield','shop','sound','spinner','sport-bag','stack','star','stats','subway', 'support', 'swap', 'sync-cozy','sync','tag','target','task','team','telecom','telephone','text-info','to-the-cloud','top','train','tram','trash','trophy', 'uncloud', 'unknow','unlink','unlock','up','upload','videos','walk','wallet-add','wallet-new','wallet','warn','warning-circle','warning','water','wrench-circle','work']
+const availableIcons = ['album-add','album-remove','album','answer','apple','archive','arrowUp','attachment','attention','bank-check','bank','banking-add','banking','bell','benefit','bike','bill','bottom','browser-brave','browser-chrome','browser-duckduckgo','browser-edge','browser-edge-chromium','browser-firefox','browser-ie','browser-opera','browser-safari','burger','bus','calendar','camera','car','carbonCopy','carpooling','categories','certified','check-circle','check-list','check-square','check','checkbox','chess','child','circle-filled','clock','clock-outline','cloud-happy','cloud','collect','cocktail','comment','company','compare','compass','connector','contract','contrast','copy','cozy-circle','cozy-laugh', 'cozy-lock', 'cozy-text', 'cozy-release', 'credit-card-add','credit-card','credit','crop','cross-circle-outline','cross-circle','cross-medium','cross-small','cross','cube','dash','dashboard','data-control','debit','devices','dots','down','download','drawing-arrow-up','dropdown-close','dropdown-open','dropdown','dropup','electric-bike','electric-car','electric-scooter','email-notification','email','eu','euro','exchange','eye-closed','eye','face-id','file-add','file-duotone','file-new','file-none','file-outline','file','filter','fingerprint','fitness','flag-outlined','flag','flash-auto','flashlight','folder-add','folder-moveto','folder','forbidden','from-user','gear','globe','gouv','graph-circle','grid','group-list','groups','growth','hand','heart','help','help-outlined','history','home','hourglass','image','info-outlined','info','justice','key','label-outlined','laudry','laptop','left','library','lightbulb','lightning','link-out','link','list','list-min','location','lock', 'lock-screen', 'logout','magic-trick','magnet','magnifier','merge','moped','mosaic-min','motorcycle','mountain','movement-in','movement-out','mouvement','moveto','multi-files','music','new','next','note','notification-email','offline','online', 'openapp', 'openwith','palette','paper','paperplane','password','pen','people','percent-circle','percent','personal-data','phone-download','phone-upload','phone','pie-chart','pin','plane','plus-small','plus', 'pop-inside', 'previous','printer','qualify','radio-checked','radio-unchecked','refresh','relationship','remboursement','rename','repare','reply','restaurant','restore-straight','restore','right','rise','rotate-left','rotate-right','sad-cozy','safe','school','scooter','select-all','setting','share-circle','share','shield','shop','sound','spinner','sport-bag','stack','star','star-outline','stats','subway', 'support', 'swap', 'sync-cozy','sync','tag','target','task','team','telecom','telephone','text-info','to-the-cloud','top','train','tram','trash','trophy', 'uncloud', 'unknow','unlink','unlock','up','upload','videos','walk','wallet-add','wallet-new','wallet','warn','warning-circle','warning','water','wrench-circle','work']
 ;
 <div style={{ fontSize: '2rem', display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)' }}>
   <Sprite />

package/react/Icon/icons-sprite.js

@@ -566,7 +566,7 @@ animation: checkmark 0.5s ease-in-out 0.16s backwards
   <path d="M16 0a16 16 0 0 1 16 16h-4a12 12 0 0 0-12-12z"/>
 </symbol><symbol id="sport-bag" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M4 5a4 4 0 1 1 8 0h.459a3 3 0 0 1 2.96 2.507l.5 2A3 3 0 0 1 12.958 13H3.042a3 3 0 0 1-2.96-3.493l.5-2A3 3 0 0 1 3.543 5H4Zm2 0a2 2 0 1 1 4 0H6Z"/></symbol><symbol id="stack" viewBox="0 0 16 16">
     <path fill-rule="evenodd" d="M3.243 6.034L.671 4.842a.779.779 0 0 1-.396-.397c-.197-.496 0-.894.396-1.093L7.792.075c.198-.1.395-.1.594 0l7.12 3.277a.746.746 0 0 1 .494.696.746.746 0 0 1-.494.695l-2.67 1.291-.594.298-3.856 1.887a.694.694 0 0 1-.693 0c-.198-.105-3.857-1.887-3.857-1.887l-.593-.298zm12.03 4.807c.78.4.675 1.345-.086 1.756L8.421 15.9a.985.985 0 0 1-.864 0L.572 12.49a.779.779 0 0 1-.396-.397c-.197-.497 0-.894.396-1.093l.89-.397 2.472 1.192 3.627 1.73a.984.984 0 0 0 .857-.005l3.725-1.825 2.373-1.19.756.336zm.53-3.218c.197.397 0 .894-.594 1.192l-2.274 1.092-.594.3-4.058 2.036a.98.98 0 0 1-.883 0l-4.058-2.037-.594-.299L.474 8.815a.777.777 0 0 1-.396-.398c-.198-.496 0-.894.396-1.092l1.285-.596 2.176.993 3.626 1.73a.986.986 0 0 0 .858-.005l4.12-2.023 1.582-.794 1.286.596a.771.771 0 0 1 .396.397z"/>
-</symbol><symbol id="star" viewBox="0 0 16 16">
+</symbol><symbol id="star-outline" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="m8 10.305 2.71 1.425-.517-3.018 2.192-2.137-3.03-.44L8 3.389 6.645 6.135l-3.03.44 2.193 2.137-.518 3.018L8 10.305Zm-4.702 4.167.898-5.236L.392 5.528l5.257-.764L8 0l2.351 4.764 5.257.764-3.804 3.708.898 5.236L8 12l-4.702 2.472Z"/></symbol><symbol id="star" viewBox="0 0 16 16">
     <path fill-rule="evenodd" d="M8 12l-4.702 2.472.898-5.236L.392 5.528l5.257-.764L8 0l2.351 4.764 5.257.764-3.804 3.708.898 5.236z"/>
 </symbol><symbol id="stats" viewBox="0 0 16 16">
     <path fill-rule="evenodd" d="M13 4h2a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1M7 0h2a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1M1 8h2a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1"/>

package/react/Icons/StarOutline.jsx

@@ -0,0 +1,16 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/star-outline.svg` to regenerate;
+import React from 'react'
+
+function SvgStarOutline(props) {
+  return (
+    <svg viewBox="0 0 16 16" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8 10.305l2.71 1.425-.517-3.018 2.192-2.137-3.03-.44L8 3.389 6.645 6.135l-3.03.44 2.193 2.137-.518 3.018L8 10.305zm-4.702 4.167l.898-5.236L.392 5.528l5.257-.764L8 0l2.351 4.764 5.257.764-3.804 3.708.898 5.236L8 12l-4.702 2.472z"
+      />
+    </svg>
+  )
+}
+
+export default SvgStarOutline

package/transpiled/react/ActionsMenu/Actions/helpers.js

@@ -103,16 +103,15 @@ export var makeBase64FromFile = /*#__PURE__*/function () {
 }();
 /**
  * @param {HTMLImageElement} image
- * @param {number} [maxSizeInPixel] - Maximum size before being resized
  * @returns {number}
  */
 
-var getImageScaleRatio = function getImageScaleRatio(image, maxSize) {
+var getImageScaleRatio = function getImageScaleRatio(image) {
   var longerSideSizeInPixel = Math.max(image.height, image.width);
   var scaleRatio = 1;
 
-  if (maxSize < longerSideSizeInPixel) {
-    scaleRatio = maxSize / longerSideSizeInPixel;
+  if (MAX_RESIZE_IMAGE_SIZE < longerSideSizeInPixel) {
+    scaleRatio = MAX_RESIZE_IMAGE_SIZE / longerSideSizeInPixel;
   }
 
   return scaleRatio;
@@ -120,20 +119,18 @@ var getImageScaleRatio = function getImageScaleRatio(image, maxSize) {
 /**
  * @param {object} opts
  * @param {string} opts.base64 - Base64 of image
- * @param {string} opts.type - Type of image
- * @param {number} opts.maxSize - Maximum size before being resized
  * @returns {Promise<string>}
  */
 
 
 var resizeImage = /*#__PURE__*/function () {
   var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(_ref3) {
-    var fileDataUri, fileType, maxSize;
+    var fileDataUri;
     return _regeneratorRuntime.wrap(function _callee2$(_context2) {
       while (1) {
         switch (_context2.prev = _context2.next) {
           case 0:
-            fileDataUri = _ref3.base64, fileType = _ref3.type, maxSize = _ref3.maxSize;
+            fileDataUri = _ref3.base64;
             return _context2.abrupt("return", new Promise(function (resolve, reject) {
               var newImage = new Image();
               newImage.src = fileDataUri;
@@ -141,14 +138,14 @@ var resizeImage = /*#__PURE__*/function () {
 
               newImage.onload = function () {
                 var canvas = document.createElement('canvas');
-                var scaleRatio = getImageScaleRatio(newImage, maxSize);
+                var scaleRatio = getImageScaleRatio(newImage);
                 var scaledWidth = scaleRatio * newImage.width;
                 var scaledHeight = scaleRatio * newImage.height;
                 var quality = scaledWidth >= MAX_IMAGE_SIDE_SIZE || scaledHeight >= MAX_IMAGE_SIDE_SIZE ? 0.35 : 0.75;
                 canvas.width = scaledWidth;
                 canvas.height = scaledHeight;
                 canvas.getContext('2d').drawImage(newImage, 0, 0, scaledWidth, scaledHeight);
-                resolve(canvas.toDataURL(fileType, quality));
+                resolve(canvas.toDataURL('image/jpeg', quality));
               };
             }));
 
@@ -200,6 +197,7 @@ var fileToDataUri = /*#__PURE__*/function () {
   };
 }();
 /**
+ * Compress image and add it to pdf
  * @param {PDFDocument} pdfDoc
  * @param {File} file
  * @returns {Promise<void>}
@@ -221,38 +219,16 @@ var addImageToPdf = /*#__PURE__*/function () {
             fileDataUri = _context4.sent;
             _context4.next = 5;
             return resizeImage({
-              base64: fileDataUri,
-              type: file.type,
-              maxSize: MAX_RESIZE_IMAGE_SIZE
+              base64: fileDataUri
             });
 
           case 5:
             resizedImage = _context4.sent;
-
-            if (!(file.type === 'image/png')) {
-              _context4.next = 10;
-              break;
-            }
-
-            _context4.next = 9;
-            return pdfDoc.embedPng(resizedImage);
-
-          case 9:
-            img = _context4.sent;
-
-          case 10:
-            if (!(file.type === 'image/jpeg')) {
-              _context4.next = 14;
-              break;
-            }
-
-            _context4.next = 13;
+            _context4.next = 8;
             return pdfDoc.embedJpg(resizedImage);
 
-          case 13:
+          case 8:
             img = _context4.sent;
-
-          case 14:
             page = pdfDoc.addPage([img.width, img.height]);
             _page$getSize = page.getSize(), pageWidth = _page$getSize.width, pageHeight = _page$getSize.height;
             page.drawImage(img, {
@@ -262,7 +238,7 @@ var addImageToPdf = /*#__PURE__*/function () {
               height: img.height
             });
 
-          case 17:
+          case 12:
           case "end":
             return _context4.stop();
         }