refactor: stage 2, upgrade cl packages that have minor feature updates (#567)

* update ejs package

* update moment package

* update react-responsive package

* update react-uid package

* update @babel/cli package

* update youtube-player package

* update react-modal package

* update react-currency-format package

* update react-canvas-confetti package

* update prop-types package

* update prettier package

* update jest-styled-components package

* update eslint-plugin-import package

* update eslint-plugin-jsx-a11y package

* update eslint-plugin-react package

* update eslint-plugin-react-hooks package

* snapshots

* jest console errors, fix otherAmountValue undefined

* add otherAmountValue default prop

* fix lint errors, Input.js label, any => string

* fix lint errors, errormsg is not an attribute of vanilla input tag

* snaps

* fix lint errors, MarketingPreferencesDS missing proptypes for children

* fix lint errors, MarketingPreferencesDS, add disabled propType

* remove unused depcheck, ejs package crept back in

* fix: remove unused and failing value prop

* Empty commit to trigger build

* fix: remove unused husky package that has crept back in

* refactor: upgrade packages that have updates even while upgrading

---------

Co-authored-by: Andy E Phipps <a.phipps@comicrelief.com>

Author: michael-odonovan

package.json

@@ -21,29 +21,29 @@
     "url": "https://github.com/comicrelief/component-library.git"
   },
   "dependencies": {
-    "@babel/cli": "^7.14.8",
+    "@babel/cli": "^7.21.5",
     "@hookform/resolvers": "^1.3.4",
     "axios": "^0.21.1",
     "ejs": "^3.1.9",
-    "jest-styled-components": "^7.0.5",
+    "jest-styled-components": "^7.1.1",
     "lazysizes": "^5.3.2",
     "lodash": "^4.17.11",
     "moment": "^2.29.4",
-    "prop-types": "^15.7.2",
+    "prop-types": "^15.8.1",
     "react": "^17.0.2",
-    "react-canvas-confetti": "^1.3.0",
-    "react-currency-format": "^1.0.0",
+    "react-canvas-confetti": "^1.4.0",
+    "react-currency-format": "^1.1.0",
     "react-dom": "^17.0.2",
     "react-hook-form": "^6.3.0",
-    "react-modal": "^3.14.3",
+    "react-modal": "^3.16.1",
     "react-responsive": "^9.0.2",
     "react-scripts": "4.0.3",
     "react-spinners": "^0.11.0",
     "react-styleguidist": "^11.1.7",
     "react-test-renderer": "^17.0.2",
-    "react-uid": "^2.3.2",
-    "styled-components": "^5.3.1",
-    "youtube-player": "^5.5.2",
+    "react-uid": "^2.3.3",
+    "styled-components": "^5.3.11",
+    "youtube-player": "^5.6.0",
     "yup": "^0.32.9"
   },
   "resolutions": {
@@ -78,13 +78,13 @@
     "cypress": "^8.3.0",
     "eslint": "^7.32.0",
     "eslint-config-airbnb": "^18.2.0",
-    "eslint-plugin-import": "^2.24.2",
-    "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-react": "^7.24.0",
-    "eslint-plugin-react-hooks": "^4.0.5",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "jest": "^26.1.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.3.2",
+    "prettier": "^2.8.8",
     "semantic-release": "^17.4.6"
   }
 }

src/components/Atoms/Input/Input.js

@@ -23,7 +23,7 @@ const InputField = styled.input`${({ theme, error, prefixLength }) => css`
   border-color: ${error ? theme.color('red') : theme.color('grey_medium')};
   box-shadow: none;
   appearance: none;
-  color: ${theme.color('black')}; 
+  color: ${theme.color('black')};
   border-radius: ${spacing('sm')};
   font-size: inherit;
   z-index: 2;
@@ -119,7 +119,7 @@ Input.propTypes = {
   id: PropTypes.string.isRequired,
   /** text, email, number, date, search, tel, url, password */
   type: PropTypes.string.isRequired,
-  labelProps: PropTypes.objectOf(PropTypes.any),
+  labelProps: PropTypes.objectOf(PropTypes.string),
   // className is needed so that styled(`Input`) will work
   // (as `rest` is not spread on the outermost component)
   className: PropTypes.string,

src/components/Atoms/TextInputWithDropdown/TextInputWithDropdown.js

@@ -22,14 +22,13 @@ const KEY_CODE_ESCAPE = 27;
  * This component deals with the visual aspect of a text input with typeahead-style functionality
  *
  * API querying and state management (aside from that related to keyboard usage/accessibility) are
- *  handled by the parent component (via the value, options, onChange and onSelect props)
+ *  handled by the parent component (options, onChange and onSelect props)
  *
  * See the Typeahead and SchoolLookup molecules for the full implementation
  */
 const TextInputWithDropdown = React.forwardRef(
   (
     {
-      value,
       options,
       onChange,
       onSelect,
@@ -76,7 +75,6 @@ const TextInputWithDropdown = React.forwardRef(
     };
 
     const inputProps = {
-      value,
       onChange,
       id,
       name,
@@ -178,7 +176,6 @@ const Options = ({
 };
 
 TextInputWithDropdown.propTypes = {
-  value: PropTypes.string.isRequired,
   options: PropTypes.arrayOf(PropTypes.string).isRequired,
   onChange: PropTypes.func.isRequired,
   onSelect: PropTypes.func.isRequired,

src/components/Organisms/Donate/Form/Form.js

@@ -313,12 +313,13 @@ Signup.propTypes = {
   PopUpText: PropTypes.string.isRequired,
   chooseAmountText: PropTypes.string.isRequired,
   submitButtonColor: PropTypes.string.isRequired,
-  otherAmountValue: PropTypes.number.isRequired
+  otherAmountValue: PropTypes.number
 };
 
 Signup.defaultProps = {
   noMoneyBuys: false,
-  data: {}
+  data: {},
+  otherAmountValue: null
 };
 
 export default Signup;

src/components/Organisms/Donate/GivingSelector/GivingSelector.js

@@ -26,7 +26,6 @@ const GivingSelector = ({
           value="Single"
           type="radio"
           label=""
-          errormsg=""
           checked={givingType === 'single'}
           onClick={() => handleGivingTypeChange('single', givingType)}
         />
@@ -40,7 +39,6 @@ const GivingSelector = ({
           value="Monthly"
           type="radio"
           label=""
-          errormsg=""
           checked={givingType === 'monthly'}
           onClick={() => handleGivingTypeChange('monthly', givingType)}
         />

src/components/Organisms/Donate/__snapshots__/Donate.test.js.snap

@@ -543,7 +543,6 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
             aria-label="Single"
             checked={true}
             className="give-once"
-            errormsg=""
             id="give-once--mship-4"
             label=""
             onClick={[Function]}
@@ -560,7 +559,6 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
             aria-label="Monthly"
             checked={false}
             className="give-monthly"
-            errormsg=""
             id="give-monthly--mship-4"
             label=""
             onClick={[Function]}
@@ -1286,7 +1284,6 @@ exports[`Monthly donation renders correctly 1`] = `
             aria-label="Single"
             checked={true}
             className="give-once"
-            errormsg=""
             id="give-once--mship-1"
             label=""
             onClick={[Function]}
@@ -1303,7 +1300,6 @@ exports[`Monthly donation renders correctly 1`] = `
             aria-label="Monthly"
             checked={false}
             className="give-monthly"
-            errormsg=""
             id="give-monthly--mship-1"
             label=""
             onClick={[Function]}

src/components/Organisms/EmailSignUp/__snapshots__/EmailSignUp.test.js.snap

@@ -397,7 +397,7 @@ exports[`renders correctly 1`] = `
             Subscribe
           </span>
           <div
-            className="ButtonWithStates__LoaderContainer-sc-7gb81g-1"
+            className=""
           />
         </button>
       </div>

src/components/Organisms/Footer/__snapshots__/Footer.test.js.snap

@@ -563,7 +563,7 @@ exports[`renders correctly 1`] = `
         className="c2"
       >
         <div
-          className="Footerstyle__SocialIconWrapper-sc-167xaf5-7"
+          className=""
         >
           <ul
             className="c3"

src/components/Organisms/MarketingPreferencesDS/_MarketingPreferencesDS.js

@@ -263,6 +263,16 @@ MarketingPreferencesDS.defaultProps = {
   formContext: null
 };
 
+MaybeDisabled.propTypes = {
+  children: PropTypes.node,
+  disabled: PropTypes.bool
+};
+
+MaybeDisabled.defaultProps = {
+  children: null,
+  disabled: false
+};
+
 export {
   MarketingPreferencesDS, setInitialValues, buildValidationSchema
 };