diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 0000000..56a122b --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,28 @@ +module.exports = { + parser: 'babel-eslint', + extends: ['standard', 'standard-react'], + env: { + node: true, + jest: true + }, + parserOptions: { + ecmaVersion: 2020, + ecmaFeatures: { + legacyDecorators: true, + jsx: true + } + }, + settings: { + react: { version: '16' } + }, + rules: { + 'space-before-function-paren': 0, + 'react/prop-types': 0, + 'react/jsx-handler-names': 0, + 'react/jsx-fragments': 0, + 'react/no-unused-prop-types': 0, + 'import/export': 0, + 'no-unused-vars': 'off', + semi: [1, 'always'] + } +}; diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md new file mode 100644 index 0000000..9d67680 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -0,0 +1,61 @@ +--- +name: Bug report +about: Create a report to help us improve +title: '' +labels: '' +assignees: '' + +--- + +## Bug report for Cloudinary React SDK +Before proceeding, please update to latest version and test if the issue persists + +## Describe the bug in a sentence or two. +… + +## Describe the desired/expected behavior. +… + +## Link to reproduction of the issue on codepen/jsfiddle/etc. +… + +## Issue Type (Can be multiple) +[ ] Build - Can’t install or import the SDK +[ ] Babel - Babel errors or cross browser issues +[ ] UI/Performance - Display or performance issues +[ ] Behaviour - Functions aren’t working as expected (Such as generate URL) +[ ] Documentation - Inconsistency between the docs and behaviour +[ ] Incorrect Types - For typescript users who are having problems with our d.ts files +[ ] Other (Specify) + +## Steps to reproduce +… if applicable + +## Error screenshots +… if applicable + +## Browsers (if issue relates to UI, else ignore) +[ ] Chrome +[ ] Firefox +[ ] Safari +[ ] Other (Specify) +[ ] All + + +## Versions and Libraries (fill in the version numbers) +Cloudinary-core - 0.0.0 +Cloudinary-react - 0.0.0 +React - 0.0.0 +Create-React-App - 0.0.0 / N/A +Babel - 0.0.0 +Webpack/Rollup/Other - 0.0.0 +Node - 0.0.0 +NPM - 0.0.0 + +## Config Files (Please paste the following files if possible) +Package.json +Webpack.config (if applicable) +Babelrc + +## Repository +If possible, please provide a link to a reproducible repository that showcases the problem diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md new file mode 100644 index 0000000..92eb68a --- /dev/null +++ b/.github/ISSUE_TEMPLATE/feature_request.md @@ -0,0 +1,21 @@ +--- +name: Feature request +about: Suggest an idea for this project +title: '' +labels: '' +assignees: '' + +--- + +## Feature request for Cloudinary React SDK +…(If your feature is for other SDKs, please request them there) + + +## Explain your use case +… (A high-level explanation of why you need this feature) + +## Describe the problem you’re trying to solve +… (A more technical view of what you’d like to accomplish, and how this feature will help you achieve it) + +## Do you have a proposed solution? +… (yes, no? Please elaborate if needed) diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md new file mode 100644 index 0000000..e198215 --- /dev/null +++ b/.github/pull_request_template.md @@ -0,0 +1,29 @@ +### Brief Summary of Changes + + +#### What does this PR address? +- [ ] GitHub issue (Add reference - #XX) +- [ ] Refactoring +- [ ] New feature +- [ ] Bug fix +- [ ] Adds more tests + +#### Are tests included? +- [ ] Yes +- [ ] No + +#### Reviewer, please note: + + +#### Checklist: + + +- [ ] My code follows the code style of this project. +- [ ] My change requires a change to the documentation. +- [ ] I ran the full test suite before pushing the changes and all of the tests pass. diff --git a/.gitignore b/.gitignore index 1078c15..e2b28a5 100644 --- a/.gitignore +++ b/.gitignore @@ -41,8 +41,6 @@ lib/ dist/ *-compiled.js* storybook-static/ -.storybook/ .idea/ -package-lock.json yarn.lock .nvmrc diff --git a/.npmignore b/.npmignore deleted file mode 100644 index 41f89a0..0000000 --- a/.npmignore +++ /dev/null @@ -1,56 +0,0 @@ -.idea/ - - -# Logs -logs -*.log -npm-debug.log* - -# Runtime data -pids -*.pid -*.seed - -# Directory for instrumented libs generated by jscoverage/JSCover -lib-cov - -# Coverage directory used by tools like istanbul -coverage - -# nyc test coverage -.nyc_output - -# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) -.grunt - -# node-waf configuration -.lock-wscript - -# Compiled binary addons (http://nodejs.org/api/addons.html) -build/Release - -# Dependency directories -node_modules/ -jspm_packages/ -bower_components/ - -# Optional npm cache directory -.npm - -# Optional REPL history -.node_repl_history - -*-compiled.js* -stories/ -.storybook/ -samples/ -test/ -storybook-static/ - -babel.config.js -.babelrc -package-lock.json -yarn.lock -.nvmrc -.travis.yml -webpack.config.js \ No newline at end of file diff --git a/.npmrc b/.npmrc deleted file mode 100644 index deba745..0000000 --- a/.npmrc +++ /dev/null @@ -1,2 +0,0 @@ - - package-lock=false diff --git a/.storybook/config.js b/.storybook/config.js deleted file mode 100644 index 9154670..0000000 --- a/.storybook/config.js +++ /dev/null @@ -1,7 +0,0 @@ -import { configure } from '@storybook/react'; - -function loadStories() { - require('../stories'); -} - -configure(loadStories, module); diff --git a/.storybook/main.js b/.storybook/main.js new file mode 100644 index 0000000..85baee2 --- /dev/null +++ b/.storybook/main.js @@ -0,0 +1,9 @@ +module.exports = { + stories: [ + '../src/**/*.stories.mdx', + '../src/**/*.stories.@(js|jsx|ts|tsx)' + ], + addons: [ + '@storybook/addon-essentials' + ] +} \ No newline at end of file diff --git a/.storybook/preview.js b/.storybook/preview.js new file mode 100644 index 0000000..5d00c02 --- /dev/null +++ b/.storybook/preview.js @@ -0,0 +1,4 @@ + +export const parameters = { + actions: { argTypesRegex: "^on[A-Z].*" }, +} \ No newline at end of file diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js deleted file mode 100644 index e010e2f..0000000 --- a/.storybook/webpack.config.js +++ /dev/null @@ -1,18 +0,0 @@ -// you can use this file to add your custom webpack plugins, loaders and anything you like. -// This is just the basic way to add additional webpack configurations. -// For more information refer the docs: https://storybook.js.org/configurations/custom-webpack-config - -// IMPORTANT -// When you add this file, we won't add the default configurations which is similar -// to "React Create App". This only has babel loader to load JavaScript. - -module.exports = { - plugins: [ - // your custom plugins - ], - module: { - rules: [ - // add your custom rules. - ], - }, -}; diff --git a/.travis.yml b/.travis.yml index 660c022..6468a0e 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,15 +1,12 @@ -before_install: if [[ `npm -v` != 3* ]]; then npm i -g npm@3; fi language: node_js node_js: - - "node" - - "lts/*" - - "6" -install: - - npm install react@^16.0.0 --no-save - - npm install - - npm run compile - - npm run dist -env: - - TEST_SUBJECT=src - - TEST_SUBJECT=lib - - TEST_SUBJECT=dist + - 14 + - 12 + - 10 +script: + - npm test + +notifications: + email: + recipients: + - sdk_developers@cloudinary.com diff --git a/.yarnrc b/.yarnrc deleted file mode 100644 index 7eda00f..0000000 --- a/.yarnrc +++ /dev/null @@ -1 +0,0 @@ -pure-lockfile true \ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md index 5ae3032..3945dba 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,27 +1,230 @@ +1.8.1 / 2022-07-21 +================== + +* Add support for authToken prop (#252) + +1.8.0 / 2022-06-27 +================== + +New functionality +----------------- + * Add support for React 18 (#246) + +Other changes +----------------- + * Add description to package + + +1.7.2 / 2022-03-24 +================== +* bump immer and ejs versions in photo_album + +1.7.1 / 2022-01-25 +================== +* Update README.md +* Update sample app dependencies +* Update travis configuration + +1.7.0 / 2021-02-28 +================== + +New functionality and features +------------------------------ +* Add support for `sources` prop in Video component (#212) + +Fixes +----- +* Fix video & audio mime types + +Refactor +-------- +* Add eslint and update code style (#219, #220) +* Update storybook (#218) +* Use microbundle instead of webpack (#215) +* Replace mocha+chai with jest (#213) + +Other Changes +------------- +* Update sample app dependencies +* Remove bundled folder from sample app +* Update sample app config file +* Update tests (#209) + +1.6.7 / 2020-10-04 +================== + +* Fix duplicate attributes for kebab-case props (#196) +* Update cloudinary-core version to 2.11.3 + +1.6.6 / 2020-07-27 +================== + +* Fix responsive placeholder image + +1.6.5 / 2020-07-26 +================== + +* Fix lazy loading of responsive images in Safari + +1.6.4 / 2020-07-26 +================== + +Update cloudinary-core to version 2.11.1 + +1.6.3 / 2020-07-26 +================== + +* Fix lazy loading of responsive images (#182) +* Update cloudinary-core to version 2.11.0 + +1.6.2 / 2020-07-16 +================== + +* Fix bug where non Cloudinary attribute names were changed (#181) +* Add test for image update on prop change (#174) +* Update readme: Audio, Placeholder & storybook + +1.6.1 / 2020-07-11 +================== + +* Fix bug where image width was set to 'null' for responsive images +* Add a warning when 'responsive' prop is not affecting the transformation (#176) +* Update cloudinary-core dependency to version 2.10.3 + +1.6.0 / 2020-07-06 +================== + +New functionality and features +------------------------------ +* Add support for lazy loading images, placeholder and accessibility (#162) + +Other Changes +------------- +* Update cloudinary-core dependency to version 2.10.1 +* Refactor Image component (#167) +* Update tests to fail when component is not exported +* Add test for variable names (#164) + +1.5.1 / 2020-06-21 +================== + +* Fix Audio component export +* Update cloudinary-core to version 2.9.0 + +1.5.0 / 2020-04-23 +================== + +New functionality and features +------------------------------ +* Add Audio component + +Other Changes +------------- +* Fix test:all script in package.json +* Add bundle size check using bundlewatch (#157) +* Update issue templates (#155) +* Fix typo in CHANGELOG.md + +1.4.0 / 2020-03-25 +================== + +* Add support for signature param +* Upgrade cloudinary-core version to ^2.8.2 + +1.3.4 / 2020-03-18 +================== + +* Fix video tag props were passed as snake_case instead of camelCase + +1.3.3 / 2020-03-17 +================== + +* Fix video poster default frame to be the middle frame + +1.3.2 / 2020-03-01 +================== + +* Remove docs folder from npm package + +1.3.1 / 2020-03-01 +================== + +* Fix contextType to be class property of CloudinaryComponent (#145) +* Update sample project's dependencies (#127) +* Add Transformation test for font antialiasing and hinting (#126) +* Add /docs folder with storybook output +* Fix spelling in README.md + + +1.3.0 / 2019-12-26 +================== + +* Add support for innerRef to the Image & Video components +* Fix compile script +* Fix photo album sample app startup + +1.2.1 / 2019-09-30 +================== + +* Fix image component responsive prop + +1.2.0 / 2019-09-26 +================== + +* Upgrade to react 16.3.3 (#120) + * Use new context api in CloudinaryContext + * Remove usage of componentWillReceiveProps and componentWillUpdate in Image +* Add test for custom function invocation +* Add test for dynamic context +* Bump webpack-dev-server from 2.9.4 to 3.1.11 in /samples/photo_album + +1.1.4 / 2019-07-25 +============= + +* Fix responsiveUseBreakpoints not affecting image size +* Fix build & console errors +* Exclude tests for Node 6 with sources +* Fix photo album sample app +* Add test for startOffset parameter +* Update TravisCI configuration +* Bump packages versions in /samples/photo_album + +1.1.1 / 2019-06-06 +================== + +* Merge pull request #50 from runar-rkmedia/issue#49 + * Round off containerWidth +* Don't render Context as div (#81) +* Add fps test (#84) +* Update Dependencies +* Add test pages +* Separate transformation parameters from configuration + * Increase performance of image rendering +* Add support for kebab-case and snake_case attribute names (#78) 1.1.0 / 2018-12-20 ================== - * Add the `tools` folder and the `update_version` script - * Update package configuration - * Update tests configuration - * Upgrade webpack and babel - * Add "Join the Community" - * Use nextProps for updating calculated URL correctly (#73) - * Add test for user variables - * Merge pull request #59 from lisamartin00/bug/src-empty-string +* Add the `tools` folder and the `update_version` script +* Update package configuration +* Update tests configuration +* Upgrade webpack and babel +* Add "Join the Community" +* Use nextProps for updating calculated URL correctly (#73) +* Add test for user variables +* Merge pull request #59 from lisamartin00/bug/src-empty-string * Default src to undefined instead of empty string - * Merge pull request #42 from cloudinary/react-sample +* Merge pull request #42 from cloudinary/react-sample * create react sample application * use new react-sdk and fix imports - * Merge pull request #46 from IndependentContractor/master +* Merge pull request #46 from IndependentContractor/master * Link to react documentation for configuration - * Undo `cp` rename +* Undo `cp` rename 1.0.6 / 2018-01-18 ================== - * Fix publish of previous version +* Fix publish of previous version 1.0.6 / 2018-01-18 ================== @@ -31,38 +234,53 @@ 1.0.5 / 2018-01-18 ================== - * Filter Cloudinary custom props from rendered div (#37) - * React16 (#33) - * github-fixes-#31-error-maximum-call-stack-exceeded (#39) - * fixes #35 from github - video component ignores transformations (#38) - * Merge branch 'fBosch-master' - * Add test - * fix: pass props to CloudinaryContext's returned div +* Filter Cloudinary custom props from rendered div (#37) +* React16 (#33) +* github-fixes-#31-error-maximum-call-stack-exceeded (#39) +* fixes #35 from github - video component ignores transformations (#38) +* Merge branch 'fBosch-master' +* Add test +* fix: pass props to CloudinaryContext's returned div 1.0.4 / 2017-05-25 ================== - * Refactor test for Transformation. Fixes #17. Fixes #13. References #10. +* Refactor test for Transformation. Fixes #17. Fixes #13. References #10. 1.0.3 / 2017-04-16 ================== - * Add more informative responsive story - * Add dependency on `prop-types` +* Add more informative responsive story +* Add dependency on `prop-types` 1.0.2 / 2017-03-01 ================== - * Don't convert keys to snake_case in `normalizeOptions`. Fixes #6. - * Separate class definition and export statements. Updated documentation comments. - * Use traditional array traversing to solve react native issue on Android - * Force Travis-ci to use npm version >=3. Add test for Node 6.x +* Don't convert keys to snake_case in `normalizeOptions`. Fixes #6. +* SpponsiveUseBreakpoints not affecting image size +* Update photo album sample app +* Update TravisCI configuration +* Bump lodash-es from 4.17.4 to 4.17.15 in /samples/photo_album +* Add test for startOffset parameter +* Bump eslint from 4.10.0 to 4.18.2 in /samples/photo_album +* Bump diff from 3.4.0 to 3.5.0 in /samples/photo_album +* Bump clean-css from 4.1.9 to 4.1.11 in /samples/photo_album +* Bump handlebars from 4.0.11 to 4.1.2 in /samples/photo_album (#99) +* Bump lodash.template from 4.4.0 to 4.5.0 in /samples/photo_album +* Bump lodash from 4.17.11 to 4.17.14 in /samples/photo_album +* Merge pull request #102 from felixmosh/fix-album-demo +* Make index as key +* Fix build & console errors +* Exclude tests for Node 6 with sources + rate class definition and export statements. Updated documentation comments. +* Use traditional array traversing to solve react native issue on Android +* Force Travis-ci to use npm version >=3. Add test for Node 6.x 1.0.1 / 2016-11-16 ================== - * Add jsdom to development requirements - * Update name and location of repository in package.json and bower.json +* Add jsdom to development requirements +* Update name and location of repository in package.json and bower.json 1.0.0 / 2016-10-06 ================== diff --git a/README.md b/README.md index 92e3b40..1792723 100644 --- a/README.md +++ b/README.md @@ -1,120 +1,103 @@ - -# Cloudinary React Library - -Cloudinary is a cloud service that offers a solution to a web application's entire image management pipeline. - -Easily upload images to the cloud. Automatically perform smart image resizing, cropping and conversion without installing any complex software. Integrate Facebook or Twitter profile image extraction in a snap, in any dimension and style to match your website’s graphics requirements. Images are seamlessly delivered through a fast CDN, and much much more. - -Cloudinary offers comprehensive APIs and administration capabilities and is easy to integrate with any web application, existing or new. - -Cloudinary provides URL and HTTP based APIs that can be easily integrated with any Web development framework. +Cloudinary React SDK +========================= +## About +**NOTE-IMPORTANT**: This is a legacy package, please find latest at https://github.com/cloudinary/frontend-frameworks/tree/master/packages/react + +The Cloudinary React SDK allows you to quickly and easily integrate your application with Cloudinary. +Effortlessly optimize and transform your cloud's assets. + +#### Note +This Readme provides basic installation and usage information. +For the complete documentation, see the [React SDK Guide](https://cloudinary.com/documentation/react1_integration). + + +## Table of Contents +- [Key Features](#key-features) +- [Version Support](#Version-Support) +- [Installation](#installation) +- [Usage](#usage) + - [Setup](#Setup) + - [Transform and Optimize Assets](#Transform-and-Optimize-Assets) + - [Generate Image and HTML Tags](#Generate-Image-and-Video-HTML-Tags) + +## Key Features +- [Transform](https://cloudinary.com/documentation/react1_video_manipulation#video_transformation_examples) and [optimize](https://cloudinary.com/documentation/react1_image_manipulation#image_optimizations) assets. +- Generate [image](https://cloudinary.com/documentation/react1_image_manipulation#deliver_and_transform_images) and [video](https://cloudinary.com/documentation/react1_video_manipulation#video_element) tags. + +## Version Support +| SDK Version | React 15.3 | React 16.2 | React 16.3 | React 17 | React 18 | +|---------------|------------|------------|------------|----------|----------| +| 1.6.8 & up | X | X | V | V | V | +| 1.2.0 - 1.6.7 | X | X | V | X | X | +| 1.0.5 - 1.1.4 | X | V | X | X | X | +| 1.0.0 - 1.0.4 | V | X | X | X | X | ## Installation - - -### NPM - -1. Install the files using the following command. Use the optional `--save` parameter if you wish to save the dependency in your `bower.json` file. - - ```shell - npm install cloudinary-react --save - ``` - -1. Include the javascript files in your code. For Example: - - ```js - import {Image} from 'cloudinary-react'; - ``` - - -## Setup - -In order to properly use this library you have to provide it with a few configuration parameters. All configuration parameters can be applied directly to the element or using a CloudinaryContext element. - - -```js -ReactDOM.render( -
-

Hello, world!

- - // Or for more advanced usage: - // import {CloudinaryContext, Transformation} from 'cloudinary-react'; - - - - - -
, - document.getElementById('example') - ); +### Install using your favorite package manager (yarn, npm) +```bash +npm install cloudinary-react +``` +Or +```bash +yarn add cloudinary-react ``` - -Required: - -* `cloudName` - The cloudinary cloud name associated with your Cloudinary account. - -Optional: - -* `privateCdn`, `secureDistribution`, `cname`, `cdnSubdomain` - Please refer to [Cloudinary Documentation](https://cloudinary.com/documentation/react_integration#3_set_cloudinary_configuration_parameters) for information on these parameters. - ## Usage - -The library includes 4 Elements: - -* CloudinaryContext -* Image -* Video -* Transformation - -### CloudinaryContext -CloudinaryContext allows you to define shared parameters that are applied to all children elements. - -### Image -The Image element defines a Cloudinary Image tag. - -### Video -The Video element defines a Cloudinary Video tag. - -### Transformation -The Transformation element allows you to defined additional transformations on the parent element. - -For example: - -``` - - - - - - +### Setup +```javascript +import React from 'react'; +import {Image, Video, Transformation} from 'cloudinary-react'; ``` - -The Cloudinary Documentation can be found at: -http://cloudinary.com/documentation - -## Additional resources - -Additional resources are available at: - -* [Website](http://cloudinary.com) -* [Documentation](http://cloudinary.com/documentation) -* [Knowledge Base](http://support.cloudinary.com/forums) -* [Image transformations documentation](http://cloudinary.com/documentation/image_transformations) - -## Support - -You can [open an issue through GitHub](https://github.com/cloudinary/cloudinary_js/issues). - -Contact us at [http://cloudinary.com/contact](http://cloudinary.com/contact). - -Stay tuned for updates, tips and tutorials: [Blog](http://cloudinary.com/blog), [Twitter](https://twitter.com/cloudinary), [Facebook](http://www.facebook.com/Cloudinary). - -## Join the Community ########################################################## - -Impact the product, hear updates, test drive new features and more! Join [here](https://www.facebook.com/groups/CloudinaryCommunity). - -## License - +### Transform and Optimize Assets +- [See full documentation](https://cloudinary.com/documentation/react1_image_manipulation) + + ```jsx + // Apply a single transformation + + + + ``` + + ```jsx + // Chain (compose) multiple transformations + + + + + + ``` +### Generate Image and Video HTML Tags + - Use to generate image tags + - Use