next-cloudinary 0.2.0 → 0.4.0

package/README.md

@@ -13,7 +13,7 @@
 ######
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![All Contributors](https://img.shields.io/badge/all_contributors-9-orange.svg?style=flat-square)](#contributors-)
+[![All Contributors](https://img.shields.io/badge/all_contributors-11-orange.svg?style=flat-square)](#contributors-)
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 # Cloudinary Next.js Component
@@ -292,6 +292,8 @@ See the examples above under Overlays to learn more about the available configur
     <tr>
       <td align="center"><a href="http://joanleon.dev"><img src="https://avatars.githubusercontent.com/u/1307927?v=4?s=100" width="100px;" alt="Joan León"/><br /><sub><b>Joan León</b></sub></a><br /><a href="https://github.com/colbyfayock/next-cloudinary/commits?author=nucliweb" title="Documentation">📖</a></td>
       <td align="center"><a href="http://www.timbenniks.dev"><img src="https://avatars.githubusercontent.com/u/121096?v=4?s=100" width="100px;" alt="Tim Benniks"/><br /><sub><b>Tim Benniks</b></sub></a><br /><a href="https://github.com/colbyfayock/next-cloudinary/commits?author=timbenniks" title="Code">💻</a> <a href="https://github.com/colbyfayock/next-cloudinary/commits?author=timbenniks" title="Documentation">📖</a></td>
+      <td align="center"><a href="https://github.com/csgochan"><img src="https://avatars.githubusercontent.com/u/116420257?v=4?s=100" width="100px;" alt="csgochan"/><br /><sub><b>csgochan</b></sub></a><br /><a href="https://github.com/colbyfayock/next-cloudinary/commits?author=csgochan" title="Documentation">📖</a></td>
+      <td align="center"><a href="https://github.com/codingis4noobs2"><img src="https://avatars.githubusercontent.com/u/87560178?v=4?s=100" width="100px;" alt="codingis4noobs2"/><br /><sub><b>codingis4noobs2</b></sub></a><br /><a href="https://github.com/colbyfayock/next-cloudinary/commits?author=codingis4noobs2" title="Code">💻</a> <a href="https://github.com/colbyfayock/next-cloudinary/commits?author=codingis4noobs2" title="Tests">⚠️</a></td>
     </tr>
   </tbody>
 </table>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-cloudinary",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "main": "dist/next-cloudinary.umd.js",
   "module": "dist/next-cloudinary.module.js",
   "umd:main": "dist/next-cloudinary.umd.js",
@@ -13,20 +13,20 @@
     "test": "jest"
   },
   "dependencies": {
-    "@cloudinary/url-gen": "^1.8.5"
+    "@cloudinary/url-gen": "^1.8.6"
   },
   "devDependencies": {
-    "@babel/core": "^7.19.3",
-    "@babel/preset-env": "^7.19.3",
-    "@types/jest": "^29.1.1",
-    "babel-jest": "^29.1.2",
+    "@babel/core": "^7.19.6",
+    "@babel/preset-env": "^7.19.4",
+    "@types/jest": "^29.2.0",
+    "babel-jest": "^29.2.2",
     "dotenv": "^16.0.3",
-    "jest": "^29.1.2",
-    "jest-environment-jsdom": "^29.1.2",
+    "jest": "^29.2.2",
+    "jest-environment-jsdom": "^29.2.2",
     "microbundle": "^0.15.1"
   },
   "peerDependencies": {
-    "next": "^12.2.5",
+    "next": "^12.0.0 || ^13.0.0",
     "react": "^18.2.0"
   }
 }

package/tests/lib/cloudinary.spec.js

@@ -1,4 +1,4 @@
-import { getPublicId } from "../../src/lib/cloudinary"
+import { constructCloudinaryUrl, getPublicId, createPlaceholderUrl } from '../../src/lib/cloudinary';
 
 // Mock console.warn() so we can see when it's called
 global.console = {
@@ -10,19 +10,120 @@ describe('Cloudinary', () => {
   afterEach(() => {
     // Clears the state of console.warn, in case multiple tests want to monitor it
     jest.restoreAllMocks()
-  })
+  });
+
+  describe('constructCloudinaryUrl', () => {
+    it('should create a Cloudinary URL', () => {
+      const cloudName = 'customtestcloud';
+      const url = constructCloudinaryUrl({
+        options: {
+          src: 'turtle',
+          width: 100,
+          height: 100
+        },
+        config: {
+          cloud: {
+            cloudName
+          }
+        }
+      });
+      expect(url).toBe(`https://res.cloudinary.com/${cloudName}/image/upload/c_limit,w_100/f_auto/q_auto/turtle`);
+    });
+
+    it('should create a Cloudinary URL with custom quality and format options', () => {
+      const format = 'png';
+      const quality = 75;
+      const cloudName = 'customtestcloud';
+      const url = constructCloudinaryUrl({
+        options: {
+          src: 'turtle',
+          width: 100,
+          height: 100,
+          format,
+          quality
+        },
+        config: {
+          cloud: {
+            cloudName
+          }
+        }
+      });
+      expect(url).toBe(`https://res.cloudinary.com/${cloudName}/image/upload/c_limit,w_100/f_${format}/q_${quality}/turtle`);
+    });
+  });
+
   describe('getPublicId', () => {
     it('Just returns a non-Cloudinary url', () => {
-      const src = 'https://google.com'
+      const src = 'https://google.com';
       expect(getPublicId(src)).toBe(src)
-    })
+    });
+
+    it('Just returns the public ID of a Cloudinary URL 1 folder deep', () => {
+      const publicId = 'turtle';
+      const src = `https://res.cloudinary.com/test-cloud/image/upload/c_limit,w_960/f_auto/q_auto/v1/${publicId}`;
+      expect(getPublicId(src)).toBe(publicId);
+    });
+
+    it('Just returns the public ID of a Cloudinary URL 1 folder deep', () => {
+      const publicId = 'images/turtle';
+      const src = `https://res.cloudinary.com/test-cloud/image/upload/c_limit,w_960/f_auto/q_auto/v1/${publicId}`;
+      expect(getPublicId(src)).toBe(publicId);
+    });
+
+    it('Just returns the public ID of a Cloudinary URL 2 folders deep', () => {
+      const publicId = 'app/images/turtle';
+      const src = `https://res.cloudinary.com/test-cloud/image/upload/c_limit,w_960/f_auto/q_auto/v1/${publicId}`;
+      expect(getPublicId(src)).toBe(publicId);
+    });
+
     it('Returns invalid Cloudinary url with a warning', () => {
-      const src = 'https://res.cloudinary.com'
+      const src = 'https://res.cloudinary.com';
       expect(getPublicId(src)).toBe(src)
       expect(console.warn)
         .toBeCalledWith(`Not possible to retrieve the publicUrl from ${src}, make sure it's a valid cloudinary image url.`)
-    })
-    it.todo('Returns ID from url with transformations')
-    it.todo('Returns ID from url without transformations')
-  })
+    });
+  });
+
+  describe('createPlaceholderUrl', () => {
+    it('should create a placeholder URL with default settings', () => {
+      const cloudName = 'customtestcloud';
+      const url = createPlaceholderUrl({
+        src: 'turtle',
+        config: {
+          cloud: {
+            cloudName
+          }
+        }
+      });
+      expect(url).toBe(`https://res.cloudinary.com/${cloudName}/image/upload/c_limit,w_100/f_auto/q_1/turtle`);
+    });
+
+    it('should create a placeholder URL in grayscale', () => {
+      const cloudName = 'customtestcloud';
+      const url = createPlaceholderUrl({
+        src: 'turtle',
+        placeholder: 'grayscale',
+        config: {
+          cloud: {
+            cloudName
+          }
+        }
+      });
+      expect(url).toBe(`https://res.cloudinary.com/${cloudName}/image/upload/c_limit,w_100/e_grayscale/f_auto/q_1/turtle`);
+    });
+
+    it('should create a placeholder URL with a color', () => {
+      const cloudName = 'customtestcloud';
+      const url = createPlaceholderUrl({
+        src: 'turtle',
+        placeholder: 'color:blueviolet',
+        config: {
+          cloud: {
+            cloudName
+          }
+        }
+      });
+      expect(url).toBe(`https://res.cloudinary.com/${cloudName}/image/upload/c_limit,w_100/e_grayscale/e_colorize:60,co_blueviolet/f_auto/q_1/turtle`);
+    });
+  });
 })

package/tests/loaders/cloudinary-loader.spec.js

@@ -48,18 +48,18 @@ describe('Cloudinary Loader', () => {
         gravity: 'faces',
         tint: '40:253f8c',
         underlays: [
-            {
-                publicId: 'images/city-skyline',
-                width: 987,
-                height: 987,
-                crop: 'fill'
-            }
+          {
+            publicId: 'images/city-skyline',
+            width: 987,
+            height: 987,
+            crop: 'fill'
+          }
         ]
       };
 
       const result = cloudinaryLoader({ ...imageProps, options }, cldOptions);
 
-      expect(result).toBe('https://res.cloudinary.com/test-cloud/image/upload/e_background_removal/c_thumb,w_987,h_1481,g_faces/e_tint:40:253f8c/u_images:city-skyline,w_987,h_987,c_fill/fl_layer_apply/f_auto/q_auto/v1/images/woman-headphones')
+      expect(result).toBe('https://res.cloudinary.com/test-cloud/image/upload/e_background_removal/c_thumb,w_987,h_1481,g_faces/e_tint:40:253f8c/u_images:city-skyline,w_987,h_987,c_fill/fl_layer_apply,fl_no_overflow/f_auto/q_auto/v1/images/woman-headphones')
     });
 
     it('should return a Cloudinary URL with fetch features', async () => {

package/tests/plugins/cropping.spec.js

@@ -0,0 +1,38 @@
+import { Cloudinary } from '@cloudinary/url-gen';
+
+import * as croppingPlugin from '../../src/plugins/cropping';
+
+const { plugin } = croppingPlugin
+
+const cld = new Cloudinary({
+  cloud: {
+    cloudName: 'test-cloud-name'
+  }
+});
+
+const TEST_PUBLIC_ID = 'test-public-id';
+
+describe('Cropping plugin', () => {
+  it('should apply a crop and gravity to a URL', () => {
+    const cldImage = cld.image(TEST_PUBLIC_ID);
+    const options = {
+      width: 100,
+      height: 100,
+      crop: 'crop',
+      gravity: 'auto'
+    };
+    plugin({ cldImage, options });
+    expect(cldImage.toURL()).toContain(`c_${options.crop},w_${options.width},h_${options.height},g_${options.gravity}/${TEST_PUBLIC_ID}`);
+  });
+
+  it('should apply a gravity of auto by default if not set explicitly', () => {
+    const cldImage = cld.image(TEST_PUBLIC_ID);
+    const options = {
+      width: 100,
+      height: 100,
+      crop: 'fill'
+    };
+    plugin({ cldImage, options });
+    expect(cldImage.toURL()).toContain(`c_${options.crop},w_${options.width},h_${options.height},g_auto/${TEST_PUBLIC_ID}`);
+  });
+});

package/tests/plugins/overlays.spec.js

@@ -0,0 +1,112 @@
+import { Cloudinary } from '@cloudinary/url-gen';
+
+import * as overlaysPlugin from '../../src/plugins/overlays';
+
+const { plugin, DEFAULT_TEXT_OPTIONS } = overlaysPlugin
+
+const cld = new Cloudinary({
+  cloud: {
+    cloudName: 'test-cloud-name'
+  }
+});
+
+const TEST_PUBLIC_ID = 'test-public-id';
+
+describe('Plugins', () => {
+  describe('Text Overlays', () => {
+    it('should add a text overlay configured by overlay object', () => {
+      const cldImage = cld.image(TEST_PUBLIC_ID);
+
+      const color = 'white';
+      const fontFamily = 'Source Sans Pro';
+      const fontSize = 200;
+      const fontWeight = 'bold';
+      const text = 'Next Cloudinary';
+
+      const options = {
+        overlays: [{
+          text: {
+            color,
+            fontFamily,
+            fontSize,
+            fontWeight,
+            text
+          }
+        }]
+      }
+
+      plugin({
+        cldImage,
+        options
+      });
+
+
+      expect(cldImage.toURL()).toContain(`l_text:${encodeURIComponent(fontFamily)}_${fontSize}_${fontWeight}:${encodeURIComponent(text)},co_${color}/fl_layer_apply,fl_no_overflow/${TEST_PUBLIC_ID}`);
+    });
+
+    it('should add a text overlay by overlay object text string', () => {
+      const cldImage = cld.image(TEST_PUBLIC_ID);
+
+      const { color, fontFamily, fontSize, fontWeight } = DEFAULT_TEXT_OPTIONS;
+      const text = 'Next Cloudinary';
+
+      const options = {
+        overlays: [{
+          text
+        }]
+      }
+
+      plugin({
+        cldImage,
+        options
+      });
+
+      expect(cldImage.toURL()).toContain(`l_text:${encodeURIComponent(fontFamily)}_${fontSize}_${fontWeight}:${encodeURIComponent(text)},co_${color}/fl_layer_apply,fl_no_overflow/${TEST_PUBLIC_ID}`);
+    });
+
+    it('should add a text overlay by text string', () => {
+      const cldImage = cld.image(TEST_PUBLIC_ID);
+
+      const { color, fontFamily, fontSize, fontWeight } = DEFAULT_TEXT_OPTIONS;
+      const text = 'Next Cloudinary';
+
+      const options = {
+        text
+      }
+
+      plugin({
+        cldImage,
+        options
+      });
+
+      expect(cldImage.toURL()).toContain(`l_text:${encodeURIComponent(fontFamily)}_${fontSize}_${fontWeight}:${encodeURIComponent(text)},co_${color}/fl_layer_apply,fl_no_overflow/${TEST_PUBLIC_ID}`);
+    });
+
+    it('should add a text overlay by text object', () => {
+      const cldImage = cld.image(TEST_PUBLIC_ID);
+
+      const color = 'white';
+      const fontFamily = 'Source Sans Pro';
+      const fontSize = 200;
+      const fontWeight = 'bold';
+      const text = 'Next Cloudinary';
+
+      const options = {
+        text: {
+          color,
+          fontFamily,
+          fontSize,
+          fontWeight,
+          text
+        }
+      }
+
+      plugin({
+        cldImage,
+        options
+      });
+
+      expect(cldImage.toURL()).toContain(`l_text:${encodeURIComponent(fontFamily)}_${fontSize}_${fontWeight}:${encodeURIComponent(text)},co_${color}/fl_layer_apply,fl_no_overflow/${TEST_PUBLIC_ID}`);
+    });
+  });
+});

package/tests/plugins/raw-transformations.spec.js

@@ -18,7 +18,7 @@ describe('Plugins', () => {
 
       const cldImage = cld.image(TEST_PUBLIC_ID);
 
-      const cldOptions = {
+      const options = {
         rawTransformations: [
           'e_blur:2000'
         ]
@@ -26,17 +26,17 @@ describe('Plugins', () => {
 
       plugin({
         cldImage,
-        cldOptions
+        options
       });
 
-      expect(cldImage.toURL()).toContain(`${cldOptions.rawTransformations.join('/')}/${TEST_PUBLIC_ID}`);
+      expect(cldImage.toURL()).toContain(`${options.rawTransformations.join('/')}/${TEST_PUBLIC_ID}`);
     });
 
     it('should apply an array of raw transformations to the end of a Cloudinary URL', () => {
 
       const cldImage = cld.image(TEST_PUBLIC_ID);
 
-      const cldOptions = {
+      const options = {
         rawTransformations: [
           'e_blur:2000',
           'e_tint:100:0000FF:0p:FF1493:100p'
@@ -45,10 +45,10 @@ describe('Plugins', () => {
 
       plugin({
         cldImage,
-        cldOptions
+        options
       });
 
-      expect(cldImage.toURL()).toContain(`${cldOptions.rawTransformations.join('/')}/${TEST_PUBLIC_ID}`);
+      expect(cldImage.toURL()).toContain(`${options.rawTransformations.join('/')}/${TEST_PUBLIC_ID}`);
     })
   });
 });

package/tests/plugins/underlays.spec.js

@@ -0,0 +1,62 @@
+import { Cloudinary } from '@cloudinary/url-gen';
+
+import * as underlaysPlugin from '../../src/plugins/underlays';
+
+const { plugin, DEFAULT_TEXT_OPTIONS } = underlaysPlugin
+
+const cld = new Cloudinary({
+  cloud: {
+    cloudName: 'test-cloud-name'
+  }
+});
+
+const TEST_PUBLIC_ID = 'test-public-id';
+
+describe('Plugins', () => {
+  describe('Underlays', () => {
+    it('should add an underlay configured by object', () => {
+      const cldImage = cld.image(TEST_PUBLIC_ID);
+
+      const publicId = 'images/galaxy';
+      const width = 1920;
+      const height = 1200;
+      const crop = 'fill';
+
+      const options = {
+        underlays: [{
+          publicId,
+          width,
+          height,
+          crop,
+        }]
+      }
+
+      plugin({
+        cldImage,
+        options
+      });
+
+      expect(cldImage.toURL()).toContain(`u_${publicId.replace(/\//g, ':')},w_${width},h_${height},c_${crop}/fl_layer_apply,fl_no_overflow/${TEST_PUBLIC_ID}`);
+    });
+
+    it('should add an underlay by string', () => {
+      const cldImage = cld.image(TEST_PUBLIC_ID);
+
+      const publicId = 'images/galaxy';
+      const width = 1920;
+      const height = 1200;
+      const crop = 'fill';
+
+      const options = {
+        underlay: publicId
+      }
+
+      plugin({
+        cldImage,
+        options
+      });
+
+      expect(cldImage.toURL()).toContain(`u_${publicId.replace(/\//g, ':')},c_${crop}/fl_layer_apply,fl_no_overflow/${TEST_PUBLIC_ID}`);
+    });
+  });
+});