react-likert-scale - npm Package Compare versions

Comparing version 3.0.1 to 3.0.2

CHANGELOG.md

@@ -9,3 +9,17 @@ Changelog
 
+[3.0.2] - 2021-01-22
 
+### Added
+
+  * Unit testing has been added to this repo.
+
+### Changed
+
+  * Updated all dependencies and fixed a warning with the Webpack dev server.
+
+### Deprecations
+
+  * The `picked()` prop has been renamed to `onChange()`.
+
+
 [3.0.1] - 2021-01-16
@@ -18,3 +32,3 @@ ----------------------------
   * The two dependencies have been removed.
-  * The license has been switch to Creative Commons 0. You can use this sofware anywhere.
+  * The license has been switch to Creative Commons 0; you can use this sofware anywhere.
 
@@ -32,5 +46,6 @@
 
-For most people, this will not be a breaking change. This component is only an ES2015 (ES6) module.
-Previously, it was exported as UMD.
-  
+For most people, this will not be a breaking change. This component is now only exported as an
+ES2015 (ES6) module. Previously, it was exported as UMD.
+
+
 [2.0.2] - 2021-01-13
@@ -78,2 +93,2 @@ ----------------------------
   components.
-- All dependencies were updated.
+- All dependencies were updated.

dist/likert.es.js

@@ -1,1 +0,1 @@
-import e from"react";function n(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function t(){return(t=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i])}return e}).apply(this,arguments)}!function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===t&&i.firstChild?i.insertBefore(r,i.firstChild):i.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}(".likertScale {\n\tmargin-bottom: 1em;\n}\n.likertBand {\n  display: flex;\n  padding-top: 1em;\n}\n.likertResponse {\n  flex: 1 1 5em;\n  text-align: center;\n  position: relative;\n}\n.likertLine {\n  display: inline-block;\n  width: 50%;\n  vertical-align: top;\n  margin-top: 0.5em;\n  border-top: 3px solid dimgray;\n}\n.likertResponse:first-child .likertLine:first-child {\n  visibility: hidden;\n}\n.likertResponse:last-child>.likertLine:nth-child(2) {\n  visibility: hidden;\n}\n.likertIndicator {\n  display: inline-block;\n  width: 1em;\n  height: 1em;\n  border-radius: 0.5em;\n  border: thin solid #006fc4;\n  background-color: #faeabd;\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n  top: 0;\n  box-sizing: border-box;\n}\n.likertResponse:hover .likertIndicator {\n  background-color: white;\n  border-width: 3px;\n}\n.likertText {\n  display: inline-block;\n  padding-top: 0.4em;\n}\n.likertScale.isKeyboardUser .likertResponse > input:focus ~ .likertText {\n  /* This rule is for accessibility. Keyboard users will get a blue shadow around the text when\n     tabbed into the Likert scale. */\n  box-shadow: 0 0 5px 2px rgba(0, 119, 195, 0.5);\n}\n.likertResponse>input:checked+.likertIndicator {\n  background-color: #006fc4;\n}\n.visuallyHidden { \n  position: absolute; \n  overflow: hidden; \n  clip: rect(0 0 0 0); \n  height: 1px; width: 1px; \n  margin: -1px; padding: 0; border: 0; \n}\n\n@media only print {\n  .likertResponse>input:checked+.likertIndicator {\n    border-width: 0.5em !important;\n    border-color: black !important;\n  }\n}\n");class i extends e.Component{constructor(e){super(e),n(this,"onChosen",(e=>{"function"==typeof this.props.picked&&this.props.picked(e.target.value)})),n(this,"listenForTab",(e=>{"Tab"===e.key&&this.setState({isKeyboardUser:!0})})),this.state={isKeyboardUser:!1}}componentDidMount(){document.addEventListener("keydown",this.listenForTab)}componentWillUnmount(){document.removeEventListener("keydown",this.listenForTab)}render(){const{question:n,responses:i,id:r,className:o="",likertRef:a,...l}=this.props,s=function(e){let n=5381,t=e.length;for(;t;)n=33*n^e.charCodeAt(--t);return n>>>0}(n),d=i.map(((n,t)=>{const i="".concat(s).concat(t);return e.createElement("label",{key:i,htmlFor:i,className:"likertResponse"},e.createElement("span",{className:"likertLine"}),e.createElement("span",{className:"likertLine"}),e.createElement("input",{type:"radio",value:n.value,name:s,id:i,className:"visuallyHidden",onClick:this.onChosen}),e.createElement("span",{className:"likertIndicator"}),e.createElement("span",{className:"likertText"},n.text))}));let c="likertScale";return c+=o?" ".concat(o):"",c+=this.state.isKeyboardUser?" isKeyboardUser":"",e.createElement("fieldset",t({className:c,ref:a,id:r||s},l),e.createElement("legend",null,n),e.createElement("div",{className:"likertBand"},d))}}var r=e.forwardRef(((n,r)=>e.createElement(i,t({},n,{likertRef:r}))));export default r;
+import e from"react";function n(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function t(){return(t=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i])}return e}).apply(this,arguments)}!function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===t&&i.firstChild?i.insertBefore(r,i.firstChild):i.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}(".likertScale {\n  margin-bottom: 1em;\n}\n.likertBand {\n  display: flex;\n  padding-top: 1em;\n}\n.likertResponse {\n  flex: 1 1 5em;\n  text-align: center;\n  position: relative;\n}\n.likertLine {\n  display: inline-block;\n  width: 50%;\n  vertical-align: top;\n  margin-top: 0.5em;\n  border-top: 3px solid dimgray;\n}\n.likertResponse:first-child .likertLine:first-child {\n  visibility: hidden;\n}\n.likertResponse:last-child > .likertLine:nth-child(2) {\n  visibility: hidden;\n}\n.likertIndicator {\n  display: inline-block;\n  width: 1em;\n  height: 1em;\n  border-radius: 0.5em;\n  border: thin solid #006fc4;\n  background-color: #faeabd;\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n  top: 0;\n  box-sizing: border-box;\n}\n.likertResponse:hover .likertIndicator {\n  background-color: white;\n  border-width: 3px;\n}\n.likertText {\n  display: inline-block;\n  padding-top: 0.4em;\n}\n.likertScale.isKeyboardUser .likertResponse > input:focus ~ .likertText {\n  /* Show outline for keyboard users. */\n  box-shadow: 0 0 5px 2px rgba(0, 119, 195, 0.5);\n}\n.likertResponse > input:checked + .likertIndicator {\n  background-color: #006fc4;\n}\n.visuallyHidden {\n  position: absolute;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  height: 1px;\n  width: 1px;\n  margin: -1px;\n  padding: 0;\n  border: 0;\n}\n\n@media only print {\n  .likertResponse > input:checked + .likertIndicator {\n    border-width: 0.5em !important;\n    border-color: black !important;\n  }\n}\n");class i extends e.Component{constructor(e){super(e),n(this,"onChange",(e=>{"function"==typeof this.props.onChange?this.props.onChange(e.target.value):"function"==typeof this.props.picked&&(console.warn("Deprecation: The “picked” callback has been renamed; use “onChange” instead."),this.props.picked(e.target.value))})),n(this,"listenForTab",(e=>{"Tab"===e.key&&this.setState({isKeyboardUser:!0})})),this.state={isKeyboardUser:!1}}componentDidMount(){document.addEventListener("keydown",this.listenForTab)}componentWillUnmount(){document.removeEventListener("keydown",this.listenForTab)}render(){const{question:n,responses:i,id:r,className:o="",likertRef:a,...l}=this.props;delete l.picked,delete l.onChange;const s=function(e){let n=5381,t=e.length;for(;t;)n=33*n^e.charCodeAt(--t);return n>>>0}(n),d=i.map(((n,t)=>{const i="".concat(s).concat(t);return e.createElement("label",{key:i,htmlFor:i,className:"likertResponse"},e.createElement("span",{className:"likertLine"}),e.createElement("span",{className:"likertLine"}),e.createElement("input",{type:"radio",value:n.value,name:s,id:i,className:"visuallyHidden",onClick:this.onChange}),e.createElement("span",{className:"likertIndicator"}),e.createElement("span",{className:"likertText"},n.text))}));let c="likertScale";return c+=o?" ".concat(o):"",c+=this.state.isKeyboardUser?" isKeyboardUser":"",e.createElement("fieldset",t({className:c,ref:a,id:r||s},l),e.createElement("legend",null,n),e.createElement("div",{className:"likertBand"},d))}}var r=e.forwardRef(((n,r)=>e.createElement(i,t({},n,{likertRef:r}))));export default r;

package.json

 {
   "name": "react-likert-scale",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "description": "A React component that makes a Likert Scale for collecting data.",
@@ -29,5 +29,7 @@ "comments": [
     "lint:fix": "eslint --fix src",
-    "start": "webpack serve --config webpack.config.dev.js --inline --hot --progress --mode development",
+    "start": "webpack serve --config webpack.config.dev.cjs --inline --hot --progress --mode development",
     "build": "rm dist/*.* && rollup --config",
-    "prepare": "npm run build"
+    "prepare": "npm run build",
+    "test": "jest",
+    "test:watch": "jest --watch"
   },
@@ -45,22 +47,36 @@ "peerDependencies": {
     "@rollup/plugin-commonjs": "^17.0.0",
-    "@rollup/plugin-node-resolve": "^11.0.1",
-    "@webpack-cli/serve": "^1.2.1",
+    "@rollup/plugin-node-resolve": "^11.1.0",
+    "@testing-library/jest-dom": "^5.11.9",
+    "@testing-library/react": "^11.2.3",
+    "@testing-library/user-event": "^12.6.2",
+    "@webpack-cli/serve": "^1.2.2",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.2",
     "css-loader": "^5.0.1",
-    "eslint": "^7.16.0",
+    "eslint": "^7.18.0",
+    "eslint-config-prettier": "^7.2.0",
+    "eslint-plugin-jest": "^24.1.3",
+    "eslint-plugin-jest-dom": "^3.6.5",
     "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "html-webpack-plugin": "^4.5.1",
+    "html-webpack-plugin": "^5.0.0-beta.6",
+    "jest": "^26.6.3",
+    "prettier": "^2.2.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "rollup": "^2.36.1",
+    "rollup": "^2.38.0",
     "rollup-plugin-postcss": "^4.0.0",
     "rollup-plugin-terser": "^7.0.2",
     "style-loader": "^2.0.0",
-    "webpack": "^5.12.3",
-    "webpack-cli": "^4.3.1",
-    "webpack-dev-server": "^3.11.1"
+    "webpack": "^5.17.0",
+    "webpack-cli": "^4.4.0",
+    "webpack-dev-server": "^3.11.2"
   },
-  "dependencies": {}
+  "dependencies": {},
+  "jest": {
+    "moduleNameMapper": {
+      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
+      "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
+    }
+  }
 }

README.md

 React Likert Scale
 ======================================
 
-A React component that makes a Likert Scale for collecting data. It has the following features:
+A React component that makes a Likert Scale for collecting data or to make a survey. It has the
+following features:
 
@@ -13,2 +14,3 @@ * it is fully responsive (looks great on laptops and phones)
 
+
 ## Installation
@@ -35,3 +37,3 @@
     ],
-    picked: val => {
+    onChange: val => {
       console.log(val);
@@ -51,4 +53,4 @@ }
 * `responses` — (array of objects) These are your options. The `value` key is what is returned to
-  the calling application in the `picked` callback.
-* `picked` — (callback function) Optionally, you can provide a callback function that returns the
+  the calling application in the `onChange` callback.
+* `onChange` — (callback function) Optionally, you can provide a callback function that returns the
   value of the option that was clicked.
@@ -119,3 +121,3 @@
 
-Let me know. I really want to make this the best component possible.
-[Create an issue](https://github.com/Craig-Creeger/react-likert-scale/issues) on GitHub.
+Let me know. [Create an issue](https://github.com/Craig-Creeger/react-likert-scale/issues) on
+GitHub.

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

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

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

18863

increased by5.41%

Number of lines in readme file

120

increased by1.69%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

32

increased by33.33%

No dependency changes