envoc-form 2.0.1-7 → 2.0.1

package/lib/__Tests__/FormTestBase.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = FormTestBase;
 
+require("@testing-library/jest-dom/extend-expect");
+
 var _react = _interopRequireDefault(require("react"));
 
 var _reactRouterDom = require("react-router-dom");
@@ -14,8 +16,10 @@ var _reactRouterDom = require("react-router-dom");
 var _Form = _interopRequireDefault(require("../Form"));
 
 function FormTestBase(_ref) {
-  var children = _ref.children;
+  var children = _ref.children,
+      initialValues = _ref.initialValues;
   return /*#__PURE__*/_react["default"].createElement(_reactRouterDom.HashRouter, null, /*#__PURE__*/_react["default"].createElement(_Form["default"], {
-    onSubmit: function onSubmit() {}
+    onSubmit: function onSubmit() {},
+    initialValues: initialValues
   }, children));
 }

package/lib/index.js

@@ -1,9 +1,9 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -127,4 +127,8 @@ var _SubmitFormButton = _interopRequireDefault(require("./SubmitFormButton"));
 
 var _AddressInput = _interopRequireDefault(require("./AddressInput"));
 
-var _MoneyInput = require("./MoneyInput");
+var _MoneyInput = require("./MoneyInput");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/lib/normalizers.js

@@ -10,10 +10,6 @@ var phoneNumber = function phoneNumber(value) {
     return value;
   }
 
-  if (value.length === 12 && value.startsWith('+1')) {
-    value = value.substring(2);
-  }
-
   var onlyNums = value.replace(/[^\d]/g, '');
 
   if (onlyNums.length <= 3) {
@@ -24,7 +20,16 @@ var phoneNumber = function phoneNumber(value) {
     return "".concat(onlyNums.slice(0, 3), "-").concat(onlyNums.slice(3));
   }
 
-  return "".concat(onlyNums.slice(0, 3), "-").concat(onlyNums.slice(3, 6), "-").concat(onlyNums.slice(6, 10));
+  if (onlyNums.length <= 10) {
+    return "".concat(onlyNums.slice(0, 3), "-").concat(onlyNums.slice(3, 6), "-").concat(onlyNums.slice(6, 10));
+  }
+
+  if (onlyNums.length <= 13) {
+    var countryCodeLength = onlyNums - 10;
+    return "+".concat(onlyNums.slice(0, countryCodeLength), " ").concat(onlyNums.slice(countryCodeLength, 3 + countryCodeLength), "-").concat(onlyNums.slice(3 + countryCodeLength, 6 + countryCodeLength), "-").concat(onlyNums.slice(6 + countryCodeLength, onlyNums.length));
+  }
+
+  return onlyNums;
 };
 
 exports.phoneNumber = phoneNumber;

package/lib/useStandardFormInput.js

@@ -19,6 +19,9 @@ var _NestedFormFieldContext = _interopRequireDefault(require("./NestedFormFieldC
 
 var _Form = require("./Form");
 
+var _excluded = ["id", "name", "disabled", "validate", "normalize"],
+    _excluded2 = ["onChange", "value"];
+
 // provides a consistent way to deal with all form fields (non array)
 function useStandardFormInput(_ref) {
   var providedId = _ref.id,
@@ -26,7 +29,7 @@ function useStandardFormInput(_ref) {
       disabled = _ref.disabled,
       validate = _ref.validate,
       normalize = _ref.normalize,
-      props = (0, _objectWithoutProperties2["default"])(_ref, ["id", "name", "disabled", "validate", "normalize"]);
+      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
 
   // because the formik errors are evaluated all at the same time we need to keep server errors separate
   var _useContext = (0, _react.useContext)(_Form.ServerErrorContext),
@@ -50,7 +53,7 @@ function useStandardFormInput(_ref) {
       _useField2$ = _useField2[0],
       formikOnChange = _useField2$.onChange,
       value = _useField2$.value,
-      formikProps = (0, _objectWithoutProperties2["default"])(_useField2$, ["onChange", "value"]),
+      formikProps = (0, _objectWithoutProperties2["default"])(_useField2$, _excluded2),
       meta = _useField2[1];
 
   var _useFormikContext = (0, _formik.useFormikContext)(),

package/lib/utils/objectToFormData.js

@@ -7,7 +7,8 @@ exports["default"] = void 0;
 
 var _typeChecks = require("./typeChecks");
 
-//https://github.com/therealparmesh/object-to-formdata/blob/master/src/index.js
+// Original: https://github.com/therealparmesh/object-to-formdata/blob/master/src/index.js
+// With Multiple Form File Fix: https://github.com/therealparmesh/object-to-formdata/pull/94/files
 var serialize = function serialize(obj, cfg, fd, pre) {
   cfg = cfg || {};
   cfg.indices = (0, _typeChecks.isUndefined)(cfg.indices) ? false : cfg.indices;
@@ -33,7 +34,14 @@ var serialize = function serialize(obj, cfg, fd, pre) {
   } else if ((0, _typeChecks.isArray)(obj)) {
     if (obj.length) {
       obj.forEach(function (value, index) {
-        var key = pre + '[' + (cfg.indices ? index : '') + ']';
+        var key;
+
+        if (cfg.noFileListBrackets && (0, _typeChecks.isFile)(value)) {
+          key = pre;
+        } else {
+          key = pre + '[' + (cfg.indices ? index : '') + ']';
+        }
+
         serialize(value, cfg, fd, key);
       });
     } else if (cfg.allowEmptyArrays) {

package/lib/validators/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+var _typeof = require("@babel/runtime/helpers/typeof");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -9,5 +9,9 @@ exports["default"] = void 0;
 
 var validators = _interopRequireWildcard(require("./validators"));
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 var _default = validators;
 exports["default"] = _default;

package/package.json

@@ -1,93 +1,99 @@
-{
-	"name": "envoc-form",
-	"version": "2.0.1-7",
-	"description": "Envoc form components",
-	"keywords": [
-		"react-component",
-		"react",
-		"forms",
-		"components",
-		"envoc"
-	],
-	"homepage": "",
-	"repository": "",
-	"license": "MIT",
-	"author": "Envoc Developers",
-	"sideEffects": false,
-	"main": "lib/index.js",
-	"module": "es/index.js",
-	"files": [
-		"dist",
-		"src",
-		"lib",
-		"es"
-	],
-	"scripts": {
-		"build": "yarn build:esm && yarn build:cjs & yarn build:css",
-		"rebuild": "rimraf ./{dist,es,lib} && yarn build",
-		"build:esm": "cross-env BABEL_ENV=esm-dir babel src --out-dir es --ignore \"src/**/*.spec.js\",\"src/**/*.test.js\"",
-		"build:css": "sass src/styles.scss dist/css/envoc-form-styles.css",
-		"build:cjs": "babel src --out-dir lib --ignore \"src/**/*.spec.js\",\"src/**/*.test.js\"",
-		"start": "webpack serve --config ./webpack.demo.config.js",
-		"test": "cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test --watchAll=false",
-		"coverage": "yarn test --reporters=jest-junit --coverage --coverageReporters=cobertura"
-	},
-	"dependencies": {
-		"axios": "^0.21.1",
-		"classnames": "^2.2.6",
-		"date-fns": "^2.17.0",
-		"envoc-request": "^2.0.1-7",
-		"lru-cache": "^6.0.0",
-		"prop-types": "^15.7.2",
-		"react-date-picker": "^8.0.7",
-		"react-dropzone": "^11.3.1",
-		"react-router": "^5.2.0",
-		"react-select": "^3.1.1",
-		"react-textarea-autosize": "^8.3.1",
-		"react-toastify": "^7.0.3",
-		"reactstrap": "^8.9.0",
-		"smoothscroll-polyfill": "^0.4.4",
-		"uuid": "^8.3.2"
-	},
-	"devDependencies": {
-		"@babel/cli": "^7.12.17",
-		"@babel/core": "^7.12.17",
-		"@babel/plugin-transform-runtime": "^7.12.17",
-		"@babel/preset-env": "^7.12.17",
-		"@babel/preset-react": "^7.12.13",
-		"@testing-library/jest-dom": "^5.11.9",
-		"@testing-library/react": "^11.2.5",
-		"@testing-library/user-event": "^12.7.1",
-		"babel-loader": "^8.2.2",
-		"bootstrap": "^4.6.0",
-		"clean-webpack-plugin": "^3.0.0",
-		"cross-env": "7.0.3",
-		"css-loader": "^5.0.2",
-		"html-webpack-plugin": "^5.2.0",
-		"identity-obj-proxy": "^3.0.0",
-		"jest-junit": "~12.0.0",
-		"react": "^17.0.1",
-		"react-dom": "^17.0.1",
-		"react-router-dom": "^5.2.0",
-		"react-scripts": "^4.0.2",
-		"rimraf": "~3.0.2",
-		"sass": "^1.32.8",
-		"sass-loader": "^11.0.1",
-		"style-loader": "^2.0.0",
-		"webpack": "^5.23.0",
-		"webpack-cli": "^4.5.0",
-		"webpack-dev-server": "^3.11.2"
-	},
-	"peerDependencies": {
-		"@babel/runtime": "^7.12.5",
-		"formik": "^2.2.5",
-		"react": ">=16.8.0",
-		"react-dom": ">=16.8.0",
-		"react-router-dom": "^5.2.0"
-	},
-	"jest": {
-		"transformIgnorePatterns": [
-			"^.+\\.module\\.(css|sass|scss)$"
-		]
-	}
-}
+{
+  "name": "envoc-form",
+  "version": "2.0.1",
+  "description": "Envoc form components",
+  "keywords": [
+    "react-component",
+    "react",
+    "forms",
+    "components",
+    "envoc"
+  ],
+  "homepage": "",
+  "repository": "",
+  "license": "MIT",
+  "author": "Envoc Developers",
+  "sideEffects": false,
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "files": [
+    "dist",
+    "src",
+    "lib",
+    "es"
+  ],
+  "scripts": {
+    "build": "yarn verify-imports && yarn build:esm && yarn build:cjs && yarn build:css",
+    "rebuild": "rimraf ./{dist,es,lib} && yarn build",
+    "build:esm": "cross-env BABEL_ENV=esm-dir babel src --out-dir es --ignore \"src/**/*.spec.js\",\"src/**/*.test.js\"",
+    "build:css": "sass src/styles.scss dist/css/envoc-form-styles.css",
+    "build:cjs": "babel src --out-dir lib --ignore \"src/**/*.spec.js\",\"src/**/*.test.js\"",
+    "verify-imports": "node ../../scripts/check-for-scss-imports.js envoc-form",
+    "start": "webpack serve --config ./webpack.demo.config.js",
+    "test": "cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test --watchAll=false",
+    "coverage": "yarn test --reporters=jest-junit --coverage --coverageReporters=cobertura"
+  },
+  "dependencies": {
+    "axios": "^0.21.1",
+    "classnames": "^2.3.1",
+    "date-fns": "^2.22.1",
+    "envoc-request": "^2.0.1",
+    "lru-cache": "^6.0.0",
+    "prop-types": "^15.7.2",
+    "react-date-picker": "^8.2.0",
+    "react-dropzone": "^11.3.4",
+    "react-router": "^5.2.0",
+    "react-select": "^3.1.1",
+    "react-textarea-autosize": "^8.3.3",
+    "react-toastify": "^7.0.4",
+    "reactstrap": "^8.9.0",
+    "smoothscroll-polyfill": "^0.4.4",
+    "uuid": "^8.3.2",
+    "@fortawesome/react-fontawesome": "~0.1.16",
+    "@fortawesome/free-solid-svg-icons": "~5.15.4",
+    "@fortawesome/fontawesome-svg-core": "~1.2.36"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.14.5",
+    "@babel/core": "^7.14.6",
+    "@babel/plugin-transform-runtime": "^7.14.5",
+    "@babel/preset-env": "^7.14.7",
+    "@babel/preset-react": "^7.14.5",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^11.2.5",
+    "@testing-library/user-event": "^12.7.1",
+    "babel-loader": "^8.2.2",
+    "bootstrap": "^4.6.0",
+    "clean-webpack-plugin": "^3.0.0",
+    "cross-env": "7.0.3",
+    "css-loader": "^5.0.2",
+    "html-webpack-plugin": "^5.3.2",
+    "identity-obj-proxy": "^3.0.0",
+    "jest-junit": "~12.2.0",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "^4.0.3",
+    "rimraf": "~3.0.2",
+    "sass": "^1.35.2",
+    "sass-loader": "^11.0.1",
+    "style-loader": "^2.0.0",
+    "webpack": "^5.45.0",
+    "webpack-cli": "^4.7.2",
+    "webpack-dev-server": "^3.11.2",
+    "typedoc-plugin-markdown": "~3.10.3",
+    "typedoc": "~0.21.4"
+    },
+  "peerDependencies": {
+    "@babel/runtime": "^7.14.6",
+    "formik": "^2.2.9",
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0",
+    "react-router-dom": "^5.2.0"
+  },
+  "jest": {
+    "transformIgnorePatterns": [
+      "^.+\\.module\\.(css|sass|scss)$"
+    ]
+  }
+}

package/src/AddressInput/AddesssInput.test.js

@@ -1,23 +1,23 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { FormTestBase } from '../__Tests__';
-import AddressInput from './AddressInput';
-
-describe('AddressInput', () => {
-  it('renders without crashing', () => {
-    render(
-      <FormTestBase>
-        <AddressInput />
-      </FormTestBase>
-    );
-  });
-
-  it('has matching snapshot', () => {
-    const renderResult = render(
-      <FormTestBase>
-        <AddressInput />
-      </FormTestBase>
-    );
-    expect(renderResult.asFragment()).toMatchSnapshot();
-  });
-});
+import React from 'react';
+import { render } from '@testing-library/react';
+import { FormTestBase } from '../__Tests__';
+import AddressInput from './AddressInput';
+
+describe('AddressInput', () => {
+  it('renders without crashing', () => {
+    render(
+      <FormTestBase>
+        <AddressInput />
+      </FormTestBase>
+    );
+  });
+
+  it('has matching snapshot', () => {
+    const renderResult = render(
+      <FormTestBase>
+        <AddressInput />
+      </FormTestBase>
+    );
+    expect(renderResult.asFragment()).toMatchSnapshot();
+  });
+});

package/src/AddressInput/AddressInput.js

@@ -1,73 +1,73 @@
-import React from 'react';
-import { Col, Row } from 'reactstrap';
-import PropTypes from 'prop-types';
-import FormInput from '../FormInput';
-import FormSection from '../FormSection';
-import validators from '../validators';
-import * as normalizers from '../normalizers';
-import UsStates from './UsStates';
-
-export default class AddressInput extends React.Component {
-  render() {
-    const { name, ...props } = this.props;
-    return (
-      <FormSection name={name} {...props}>
-        <FormInput
-          name="address1"
-          placeholder="Address, Line 1"
-          label="Address 1"
-          autoComplete="address-line1"
-          validate={validators.required}
-        />
-        <FormInput
-          name="address2"
-          placeholder="Address, Line 2"
-          label="Address 2"
-          autoComplete="address-line2"
-        />
-        <FormInput
-          name="city"
-          placeholder="City"
-          label="City"
-          autoComplete="address-level2"
-          validate={validators.required}
-        />
-        <Row>
-          <Col xs={8}>
-            <FormInput
-              name="state"
-              placeholder="State"
-              label="State"
-              type="select"
-              options={UsStates}
-              autoComplete="address-level1"
-              validate={validators.required}
-            />
-          </Col>
-          <Col xs={4}>
-            <FormInput
-              name="zipCode"
-              placeholder="Zip"
-              label="Zip"
-              autoComplete="postal-code"
-              normalize={normalizers.zipCode}
-              validate={[validators.required, validators.zipCode]}
-            />
-          </Col>
-        </Row>
-      </FormSection>
-    );
-  }
-}
-AddressInput.propTypes = {
-  /**
-   * The key that the resulting values should be nested under within the form values.
-   * If name prop were chicken the submitted form values would look like: {chicken: {address1:...}}
-   * this allows us to have two address inputs inside the same form (shipping and billing address)
-   */
-  name: PropTypes.string,
-};
-
-AddressInput.defaultProps = {
-  name: 'address',
-};
+import React from 'react';
+import { Col, Row } from 'reactstrap';
+import PropTypes from 'prop-types';
+import FormInput from '../FormInput';
+import FormSection from '../FormSection';
+import validators from '../validators';
+import * as normalizers from '../normalizers';
+import UsStates from './UsStates';
+
+export default class AddressInput extends React.Component {
+  render() {
+    const { name, ...props } = this.props;
+    return (
+      <FormSection name={name} {...props}>
+        <FormInput
+          name="address1"
+          placeholder="Address, Line 1"
+          label="Address 1"
+          autoComplete="address-line1"
+          validate={validators.required}
+        />
+        <FormInput
+          name="address2"
+          placeholder="Address, Line 2"
+          label="Address 2"
+          autoComplete="address-line2"
+        />
+        <FormInput
+          name="city"
+          placeholder="City"
+          label="City"
+          autoComplete="address-level2"
+          validate={validators.required}
+        />
+        <Row>
+          <Col xs={8}>
+            <FormInput
+              name="state"
+              placeholder="State"
+              label="State"
+              type="select"
+              options={UsStates}
+              autoComplete="address-level1"
+              validate={validators.required}
+            />
+          </Col>
+          <Col xs={4}>
+            <FormInput
+              name="zipCode"
+              placeholder="Zip"
+              label="Zip"
+              autoComplete="postal-code"
+              normalize={normalizers.zipCode}
+              validate={[validators.required, validators.zipCode]}
+            />
+          </Col>
+        </Row>
+      </FormSection>
+    );
+  }
+}
+AddressInput.propTypes = {
+  /**
+   * The key that the resulting values should be nested under within the form values.
+   * If name prop were chicken the submitted form values would look like: {chicken: {address1:...}}
+   * this allows us to have two address inputs inside the same form (shipping and billing address)
+   */
+  name: PropTypes.string,
+};
+
+AddressInput.defaultProps = {
+  name: 'address',
+};