envoc-form 3.3.0 → 4.0.1-0

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,101 +1,106 @@
-{
-  "name": "envoc-form",
-  "version": "3.3.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.3.0",
-    "lodash": "^4.17.21",
-    "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' },

package/src/AddressInput/__snapshots__/AddressInput.test.tsx.snap

@@ -0,0 +1,175 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AddressInput has matching snapshot 1`] = `
+<DocumentFragment>
+  <form
+    action="#"
+  >
+    <div
+      class="string-group input-group group"
+    >
+      <div
+        id="normaladdressinput.address1-error-scroll-target"
+        style="display: none;"
+      />
+      <label
+        for="normalAddressInput.address1"
+      >
+        Address 1
+      </label>
+      <input
+        class="string-group input-group"
+        name="normalAddressInput.address1"
+        placeholder="Address, Line 1"
+        value=""
+      />
+    </div>
+    <div
+      class="string-group input-group group"
+    >
+      <div
+        id="normaladdressinput.address2-error-scroll-target"
+        style="display: none;"
+      />
+      <label
+        for="normalAddressInput.address2"
+      >
+        Address 2
+      </label>
+      <input
+        class="string-group input-group"
+        name="normalAddressInput.address2"
+        placeholder="Address, Line 2"
+        value=""
+      />
+    </div>
+    <div
+      class="string-group input-group group"
+    >
+      <div
+        id="normaladdressinput.city-error-scroll-target"
+        style="display: none;"
+      />
+      <label
+        for="normalAddressInput.city"
+      >
+        City
+      </label>
+      <input
+        class="string-group input-group"
+        name="normalAddressInput.city"
+        placeholder="City"
+        value=""
+      />
+    </div>
+    <div
+      class="select-group group"
+    >
+      <div
+        id="normaladdressinput.state-error-scroll-target"
+        style="display: none;"
+      />
+      <label
+        for="normalAddressInput.state"
+      >
+        State
+      </label>
+      <div
+        class="select-group css-b62m3t-container"
+      >
+        <span
+          class="css-1f43avz-a11yText-A11yText"
+          id="react-select-3-live-region"
+        />
+        <span
+          aria-atomic="false"
+          aria-live="polite"
+          aria-relevant="additions text"
+          class="css-1f43avz-a11yText-A11yText"
+        />
+        <div
+          class="react-select__control css-1s2u09g-control"
+        >
+          <div
+            class="react-select__value-container css-dlobye-Component"
+          >
+            <div
+              class="react-select__placeholder css-14el2xx-placeholder"
+              id="react-select-3-placeholder"
+            >
+              State
+            </div>
+            <div
+              class="react-select__input-container css-1u4kn00-Component"
+              data-value=""
+            >
+              <input
+                aria-autocomplete="list"
+                aria-controls="react-select-3-listbox"
+                aria-describedby="react-select-3-placeholder"
+                aria-expanded="false"
+                aria-haspopup="true"
+                aria-owns="react-select-3-listbox"
+                autocapitalize="none"
+                autocomplete="off"
+                autocorrect="off"
+                class="react-select__input"
+                id="normalAddressInput.state"
+                role="combobox"
+                spellcheck="false"
+                style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                tabindex="0"
+                type="text"
+                value=""
+              />
+            </div>
+          </div>
+          <div
+            class="react-select__indicators css-ny0e4k-Component"
+          >
+            <span
+              class="react-select__indicator-separator css-1okebmr-indicatorSeparator"
+            />
+            <div
+              aria-hidden="true"
+              class="react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer"
+            >
+              <svg
+                aria-hidden="true"
+                class="css-tj5bde-Svg"
+                focusable="false"
+                height="20"
+                viewBox="0 0 20 20"
+                width="20"
+              >
+                <path
+                  d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
+                />
+              </svg>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="string-group input-group group"
+    >
+      <div
+        id="normaladdressinput.zipcode-error-scroll-target"
+        style="display: none;"
+      />
+      <label
+        for="normalAddressInput.zipCode"
+      >
+        Zip
+      </label>
+      <input
+        class="string-group input-group"
+        name="normalAddressInput.zipCode"
+        placeholder="Zip"
+        value=""
+      />
+    </div>
+  </form>
+</DocumentFragment>
+`;

package/src/ConfirmBaseForm/ConfirmBaseForm.test.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { useAxiosRequestProps } from 'envoc-request';
+import ConfirmBaseForm from './ConfirmBaseForm';
+
+describe('ConfirmBaseForm', () => {
+  it('Renders without error', () => {
+    render(<ConfirmBaseForm request={confirmBaseFormRequest} />);
+  });
+
+  it('has matching snapshot', () => {
+    const renderResult = render(
+      <ConfirmBaseForm request={confirmBaseFormRequest} />
+    );
+    expect(renderResult.asFragment()).toMatchSnapshot();
+  });
+});
+
+const confirmBaseFormRequest = {
+  method: 'get',
+  url: `/boop`,
+  onComplete: () => {},
+  onError: () => {},
+} as useAxiosRequestProps;

package/src/ConfirmBaseForm/ConfirmBaseForm.tsx

@@ -0,0 +1,50 @@
+import React, { MouseEventHandler } from 'react';
+import classNames from 'classnames';
+import { useAxiosRequest, useAxiosRequestProps } from 'envoc-request';
+
+// TODO: change the style prop type to Tailwind type (does this exist before Tailwind 3.1 ???), or
+// should this just be type 'string'
+export interface ConfirmBaseFormProps {
+  handleCancel?: MouseEventHandler<HTMLButtonElement>;
+  request: useAxiosRequestProps;
+  style?: React.CSSProperties;
+  title?: string;
+  children?: React.ReactNode;
+}
+
+// TODO: ask about how we should use 'children'
+export default function ConfirmBaseForm({
+  handleCancel,
+  request,
+  style,
+  title,
+  children,
+  ...props
+}: ConfirmBaseFormProps) {
+  const webRequest = useAxiosRequest(
+    Object.assign({}, request, { autoExecute: false })
+  );
+  const onCancel = handleCancel ?? goBack;
+
+  return (
+    <div style={{ textAlign: 'center', ...style }} {...props}>
+      <h3>{title}</h3>
+      {children}
+      <button
+        className={classNames('confirm-base-form-yes-button')}
+        type="button"
+        onClick={webRequest.submitRequest}>
+        Yes
+      </button>
+      <button
+        className={classNames('confirm-base-form-cancel-button')}
+        type="button"
+        onClick={onCancel}>
+        Cancel
+      </button>
+    </div>
+  );
+  function goBack() {
+    window.history.back();
+  }
+}