envoc-form 3.1.0 → 4.0.1-0

package/lib/utils/objectContainsNonSerializableProperty.js

@@ -1,24 +1,17 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = objectContainsNonSerializableProperty;
-
-var _typeChecks = require("./typeChecks");
-
-function objectContainsNonSerializableProperty(object) {
-  return Object.entries(object).some(function (value) {
-    if (value) {
-      if ((0, _typeChecks.isBlob)(value[1]) || (0, _typeChecks.isFile)(value[1])) {
-        return true;
-      }
-
-      if ((0, _typeChecks.isObject)(value[1])) {
-        return objectContainsNonSerializableProperty(value[1]);
-      }
-    }
-
-    return false;
-  });
-}
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var typeChecks_1 = require("./typeChecks");
+function objectContainsNonSerializableProperty(object) {
+    return Object.entries(object).some(function (value) {
+        if (value) {
+            if ((0, typeChecks_1.isBlob)(value[1]) || (0, typeChecks_1.isFile)(value[1])) {
+                return true;
+            }
+            if ((0, typeChecks_1.isObject)(value[1])) {
+                return objectContainsNonSerializableProperty(value[1]);
+            }
+        }
+        return false;
+    });
+}
+exports.default = objectContainsNonSerializableProperty;

package/lib/utils/objectToFormData.d.ts

@@ -0,0 +1,10 @@
+export interface ObjectToFormDataCfgProps {
+    indices: boolean;
+    dotNotation: boolean;
+    allowEmptyArrays: boolean;
+    noFileListBrackets: boolean;
+    nullsAsUndefineds?: boolean;
+    booleansAsIntegers?: boolean;
+}
+declare const serialize: (obj: any, cfg: ObjectToFormDataCfgProps, fd?: FormData | undefined, pre?: string | undefined) => FormData;
+export default serialize;

package/lib/utils/objectToFormData.js

@@ -1,73 +1,79 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _typeChecks = require("./typeChecks");
-
-// 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;
-  cfg.nullsAsUndefineds = (0, _typeChecks.isUndefined)(cfg.nullsAsUndefineds) ? false : cfg.nullsAsUndefineds;
-  cfg.booleansAsIntegers = (0, _typeChecks.isUndefined)(cfg.booleansAsIntegers) ? false : cfg.booleansAsIntegers;
-  cfg.allowEmptyArrays = (0, _typeChecks.isUndefined)(cfg.allowEmptyArrays) ? false : cfg.allowEmptyArrays; //reverse of normal because we want a different default
-
-  cfg.dotNotation = (0, _typeChecks.isUndefined)(cfg.dotNotation) ? true : cfg.dotNotation;
-  fd = fd || new FormData();
-
-  if ((0, _typeChecks.isUndefined)(obj)) {
-    return fd;
-  } else if ((0, _typeChecks.isNull)(obj)) {
-    if (!cfg.nullsAsUndefineds) {
-      fd.append(pre, '');
-    }
-  } else if ((0, _typeChecks.isBoolean)(obj)) {
-    if (cfg.booleansAsIntegers) {
-      fd.append(pre, obj ? 1 : 0);
-    } else {
-      fd.append(pre, obj);
-    }
-  } else if ((0, _typeChecks.isArray)(obj)) {
-    if (obj.length) {
-      obj.forEach(function (value, 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) {
-      fd.append(pre + '[]', '');
-    }
-  } else if ((0, _typeChecks.isDate)(obj)) {
-    fd.append(pre, obj.toISOString());
-  } else if ((0, _typeChecks.isObject)(obj) && !(0, _typeChecks.isFile)(obj) && !(0, _typeChecks.isBlob)(obj)) {
-    Object.keys(obj).forEach(function (prop) {
-      var value = obj[prop];
-
-      if ((0, _typeChecks.isArray)(value)) {
-        while (prop.length > 2 && prop.lastIndexOf('[]') === prop.length - 2) {
-          prop = prop.substring(0, prop.length - 2);
-        }
-      }
-
-      var key = pre ? cfg.dotNotation ? pre + '.' + prop : pre + '[' + prop + ']' : prop;
-      serialize(value, cfg, fd, key);
-    });
-  } else {
-    fd.append(pre, obj);
-  }
-
-  return fd;
-};
-
-var _default = serialize;
-exports["default"] = _default;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+// 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 typeChecks_1 = require("./typeChecks");
+// 'pre' is not provided until this function recursively calls itself when 'obj' is an array or object
+var serialize = function (obj, cfg, fd, pre) {
+    cfg = cfg || {};
+    cfg.indices = (0, typeChecks_1.isUndefined)(cfg.indices) ? false : cfg.indices;
+    cfg.nullsAsUndefineds = (0, typeChecks_1.isUndefined)(cfg.nullsAsUndefineds)
+        ? false
+        : cfg.nullsAsUndefineds;
+    cfg.booleansAsIntegers = (0, typeChecks_1.isUndefined)(cfg.booleansAsIntegers)
+        ? false
+        : cfg.booleansAsIntegers;
+    cfg.allowEmptyArrays = (0, typeChecks_1.isUndefined)(cfg.allowEmptyArrays)
+        ? false
+        : cfg.allowEmptyArrays;
+    //reverse of normal because we want a different default
+    cfg.dotNotation = (0, typeChecks_1.isUndefined)(cfg.dotNotation) ? true : cfg.dotNotation;
+    fd = fd || new FormData();
+    if ((0, typeChecks_1.isUndefined)(obj)) {
+        return fd;
+    }
+    else if ((0, typeChecks_1.isNull)(obj) && !!pre) {
+        if (!cfg.nullsAsUndefineds) {
+            fd.append(pre, '');
+        }
+    }
+    else if ((0, typeChecks_1.isBoolean)(obj) && !!pre) {
+        if (cfg.booleansAsIntegers) {
+            fd.append(pre, obj ? '1' : '0');
+        }
+        else {
+            fd.append(pre, obj);
+        }
+    }
+    else if ((0, typeChecks_1.isDate)(obj) && !!pre) {
+        fd.append(pre, obj.toISOString());
+    }
+    else if ((0, typeChecks_1.isArray)(obj)) {
+        if (obj.length) {
+            obj.forEach(function (value, index) {
+                var key;
+                if (cfg.noFileListBrackets && (0, typeChecks_1.isFile)(value)) {
+                    key = pre;
+                }
+                else {
+                    key = pre + '[' + (cfg.indices ? index : '') + ']';
+                }
+                serialize(value, cfg, fd, key);
+            });
+        }
+        else if (cfg.allowEmptyArrays) {
+            fd.append(pre + '[]', '');
+        }
+    }
+    else if ((0, typeChecks_1.isObject)(obj) && !(0, typeChecks_1.isFile)(obj) && !(0, typeChecks_1.isBlob)(obj)) {
+        Object.keys(obj).forEach(function (prop) {
+            var value = obj[prop];
+            if ((0, typeChecks_1.isArray)(value)) {
+                while (prop.length > 2 && prop.lastIndexOf('[]') === prop.length - 2) {
+                    prop = prop.substring(0, prop.length - 2);
+                }
+            }
+            var key = pre
+                ? cfg.dotNotation
+                    ? pre + '.' + prop
+                    : pre + '[' + prop + ']'
+                : prop;
+            serialize(value, cfg, fd, key);
+        });
+    }
+    else if (!!pre) {
+        fd.append(pre, obj);
+    }
+    return fd;
+};
+exports.default = serialize;

package/lib/utils/typeChecks.d.ts

@@ -0,0 +1,8 @@
+export declare const isUndefined: (value: any) => boolean;
+export declare const isNull: (value: any) => boolean;
+export declare const isBoolean: (value: any) => boolean;
+export declare const isObject: (value: any) => boolean;
+export declare const isArray: (value: any) => boolean;
+export declare const isDate: (value: any) => boolean;
+export declare const isBlob: (value: any) => any;
+export declare const isFile: (value: any) => any;

package/lib/utils/typeChecks.js

@@ -1,58 +1,29 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.isFile = exports.isBlob = exports.isDate = exports.isArray = exports.isObject = exports.isBoolean = exports.isNull = exports.isUndefined = void 0;
-
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-
-var isUndefined = function isUndefined(value) {
-  return value === undefined;
-};
-
-exports.isUndefined = isUndefined;
-
-var isNull = function isNull(value) {
-  return value === null;
-};
-
-exports.isNull = isNull;
-
-var isBoolean = function isBoolean(value) {
-  return typeof value === 'boolean';
-};
-
-exports.isBoolean = isBoolean;
-
-var isObject = function isObject(value) {
-  return value === Object(value);
-};
-
-exports.isObject = isObject;
-
-var isArray = function isArray(value) {
-  return Array.isArray(value);
-};
-
-exports.isArray = isArray;
-
-var isDate = function isDate(value) {
-  return value instanceof Date;
-};
-
-exports.isDate = isDate;
-
-var isBlob = function isBlob(value) {
-  return value && typeof value.size === 'number' && typeof value.type === 'string' && typeof value.slice === 'function';
-};
-
-exports.isBlob = isBlob;
-
-var isFile = function isFile(value) {
-  return isBlob(value) && typeof value.name === 'string' && ((0, _typeof2["default"])(value.lastModifiedDate) === 'object' || typeof value.lastModified === 'number');
-};
-
-exports.isFile = isFile;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isFile = exports.isBlob = exports.isDate = exports.isArray = exports.isObject = exports.isBoolean = exports.isNull = exports.isUndefined = void 0;
+var isUndefined = function (value) { return value === undefined; };
+exports.isUndefined = isUndefined;
+var isNull = function (value) { return value === null; };
+exports.isNull = isNull;
+var isBoolean = function (value) { return typeof value === 'boolean'; };
+exports.isBoolean = isBoolean;
+var isObject = function (value) { return value === Object(value); };
+exports.isObject = isObject;
+var isArray = function (value) { return Array.isArray(value); };
+exports.isArray = isArray;
+var isDate = function (value) { return value instanceof Date; };
+exports.isDate = isDate;
+var isBlob = function (value) {
+    return value &&
+        typeof value.size === 'number' &&
+        typeof value.type === 'string' &&
+        typeof value.slice === 'function';
+};
+exports.isBlob = isBlob;
+var isFile = function (value) {
+    return (0, exports.isBlob)(value) &&
+        typeof value.name === 'string' &&
+        (typeof value.lastModifiedDate === 'object' ||
+            typeof value.lastModified === 'number');
+};
+exports.isFile = isFile;

package/package.json

@@ -1,100 +1,106 @@
-{
-  "name": "envoc-form",
-  "version": "3.1.0",
-  "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"
-  ],
-  "dependencies": {
-    "axios": "^0.21.1",
-    "classnames": "^2.3.1",
-    "date-fns": "^2.22.1",
-    "envoc-request": "^3.1.0",
-    "lru-cache": "^6.0.0",
-    "prop-types": "^15.7.2",
-    "react-date-picker": "^8.2.0",
-    "react-dropzone": "^11.3.4",
-    "react-router": "^6.2.1",
-    "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": "^6.2.1",
-    "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": "^6.2.1"
-  },
-  "jest": {
-    "transformIgnorePatterns": [
-      "^.+\\.module\\.(css|sass|scss)$"
-    ]
-  },
-  "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"
-  },
-  "readme": "# envoc-form\r\n\r\n[![npm package][npm-badge]][npm]\r\n\r\nBase form package for envoc projects.\r\n\r\n[npm-badge]: https://img.shields.io/npm/v/envoc-form.png?style=flat\r\n[npm]: https://www.npmjs.com/package/envoc-form"
-}
+{
+  "name": "envoc-form",
+  "version": "4.0.1-0",
+  "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 tsc -p tsconfig.esm.json",
+    "build:css": "sass src/styles.scss dist/css/envoc-form-styles.css",
+    "build:cjs": "tsc -p tsconfig.cjs.json",
+    "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 --verbose --reporters=default --reporters=jest-junit --coverage --coverageReporters=cobertura"
+  },
+  "dependencies": {
+    "axios": "^0.21.1",
+    "classnames": "^2.3.1",
+    "date-fns": "^2.22.1",
+    "envoc-request": "^4.0.1-0",
+    "lru-cache": "^6.0.0",
+    "prop-types": "^15.7.2",
+    "react-date-picker": "^8.2.0",
+    "react-dropzone": "^11.3.4",
+    "react-router": "^6.2.1",
+    "react-select": "^5.2.2",
+    "react-textarea-autosize": "^8.3.3",
+    "react-toastify": "^7.0.4",
+    "reactstrap": "^8.9.0",
+    "history": "^5.2.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",
+    "@types/jest": "^26.0.24",
+    "@types/react": "^16.9.56",
+    "@types/smoothscroll-polyfill": "^0.3.1",
+    "@types/uuid": "^8.3.2",
+    "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": "^6.2.1",
+    "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",
+    "ts-loader": "^9.2.8",
+    "typescript": "^4.6.3",
+    "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": "^6.2.1"
+  },
+  "jest": {
+    "transformIgnorePatterns": [
+      "^.+\\.module\\.(css|sass|scss)$"
+    ]
+  }
+}

package/src/AddressInput/{AddesssInput.test.js → AddressInput.test.tsx}

@@ -1,13 +1,15 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import { FormTestBase } from '../__Tests__';
 import AddressInput from './AddressInput';
+import FormTestBase from '../__Tests__/FormTestBase';
 
 describe('AddressInput', () => {
   it('renders without crashing', () => {
     render(
       <FormTestBase>
-        <AddressInput />
+        {({ Field }) => (
+          <AddressInput fieldBuilder={{ Field }} name="normalAddressInput" />
+        )}
       </FormTestBase>
     );
   });
@@ -15,7 +17,9 @@ describe('AddressInput', () => {
   it('has matching snapshot', () => {
     const renderResult = render(
       <FormTestBase>
-        <AddressInput />
+        {({ Field }) => (
+          <AddressInput fieldBuilder={{ Field }} name="normalAddressInput" />
+        )}
       </FormTestBase>
     );
     expect(renderResult.asFragment()).toMatchSnapshot();

package/src/AddressInput/AddressInput.tsx

@@ -0,0 +1,72 @@
+import UsStates from './UsStates';
+import { SingleStringSelectGroup, StringInputGroup } from '../';
+import FieldSection from '../Field/FieldSection';
+import { FormBuilderProp } from '../Form/Form';
+import { zipCode as zipCodeNormalizer } from '../Normalization/normalizers';
+import {
+  required,
+  zipCode as zipCodeValidator,
+} from '../Validation/validators';
+
+// TODO: find a permanent home for these interfaces
+// TODO: but also, maybe they are comfortable here?
+export interface AddressInputProps {
+  fieldBuilder: Pick<FormBuilderProp<AddressDto>, 'Field'>;
+  name: string;
+}
+
+interface AddressDto {
+  address1?: string;
+  address2?: string;
+  zipCode?: string;
+  city?: string;
+  state?: string;
+}
+
+export default function AddressInput({
+  fieldBuilder: { Field },
+  name,
+}: AddressInputProps) {
+  return (
+    <>
+      <FieldSection name={name}>
+        <Field
+          name="address1"
+          placeholder="Address, Line 1"
+          label="Address 1"
+          Component={StringInputGroup}
+          validate={required}
+        />
+        <Field
+          name="address2"
+          placeholder="Address, Line 2"
+          label="Address 2"
+          Component={StringInputGroup}
+        />
+        <Field
+          name="city"
+          placeholder="City"
+          label="City"
+          Component={StringInputGroup}
+          validate={required}
+        />
+        <Field
+          name="state"
+          placeholder="State"
+          label="State"
+          Component={SingleStringSelectGroup}
+          options={UsStates}
+          validate={required}
+        />
+        <Field
+          name="zipCode"
+          placeholder="Zip"
+          label="Zip"
+          Component={StringInputGroup}
+          normalize={zipCodeNormalizer}
+          validate={[required, zipCodeValidator]}
+        />
+      </FieldSection>
+    </>
+  );
+}

package/src/AddressInput/{UsStates.js → UsStates.ts}

@@ -1,4 +1,6 @@
-const states = [
+import { SelectOption } from '../Select/SelectGroup';
+
+const states: SelectOption<string>[] = [
   { label: 'Alabama', value: 'AL' },
   { label: 'Alaska', value: 'AK' },
   { label: 'Arizona', value: 'AZ' },