envoc-form 3.2.0 → 4.0.1-1

package/src/__Tests__/FormTestBase.tsx

@@ -0,0 +1,63 @@
+import '@testing-library/jest-dom/extend-expect';
+import { HashRouter } from 'react-router-dom';
+import { ValidatedApiResult } from 'Validation/ValidatedApiResult';
+import { DateOnly, Form, FormBuilderProp } from '../../src';
+
+interface FormTestBaseProps<TForm extends object> {
+  children: (formBuilder: FormBuilderProp<TForm>) => JSX.Element;
+  initialValues?: TForm;
+}
+
+export default function FormTestBase<TForm extends PersonDto>({
+  children,
+  initialValues,
+}: FormTestBaseProps<TForm>) {
+  return (
+    <HashRouter>
+      <Form onSubmit={onSubmit} initialValues={initialValues}>
+        {children}
+      </Form>
+    </HashRouter>
+  );
+
+  async function onSubmit(
+    data: PersonDto | FormData
+  ): Promise<ValidatedApiResult> {
+    const isFormData = data instanceof FormData;
+    const result = await fetch('/api/submit', {
+      body: isFormData ? data : JSON.stringify(data),
+      method: 'POST',
+      headers: {
+        'Content-Type': isFormData ? 'multipart/form-data' : 'application/json',
+        'X-Show-Errors': `Errors go here`,
+      },
+    });
+
+    const apiResult = await (result.json() as Promise<ValidatedApiResult>);
+
+    if (!apiResult.hasErrors) {
+      alert('submitted');
+    }
+
+    return apiResult;
+  }
+}
+
+interface PersonDto {
+  name?: string | undefined;
+  nameWithIcon?: string | undefined;
+  numberOfArms?: number;
+  phoneNumber?: string;
+  yearlySalaryUSD?: number;
+  isCool?: boolean;
+  gradDate?: DateOnly;
+  favoriteDate?: DateOnly;
+  favoriteNumber?: number;
+  favoriteColor?: string;
+  favoriteColors?: string[];
+  favoriteNames?: string[];
+  allowLogin?: boolean;
+  userRoles?: number[];
+  profileImage?: any;
+  favoritePictures?: any[];
+}

package/src/__Tests__/{StandardFormActions.test.js → StandardFormActions.test.tsx}

@@ -5,18 +5,12 @@ import StandardFormActions from '../StandardFormActions';
 
 describe('StandardFormActions', () => {
   it('renders without crashing', () => {
-    render(
-      <FormTestBase>
-        <StandardFormActions />
-      </FormTestBase>
-    );
+    render(<FormTestBase>{() => <StandardFormActions />}</FormTestBase>);
   });
 
   it('has matching snapshot', () => {
     const renderResult = render(
-      <FormTestBase>
-        <StandardFormActions />
-      </FormTestBase>
+      <FormTestBase>{() => <StandardFormActions />}</FormTestBase>
     );
     expect(renderResult.asFragment()).toMatchSnapshot();
   });

package/src/__Tests__/{SubmitFormButton.test.js → SubmitFormButton.test.tsx}

@@ -5,18 +5,12 @@ import SubmitFormButton from '../SubmitFormButton';
 
 describe('SubmitFormButton', () => {
   it('renders without crashing', () => {
-    render(
-      <FormTestBase>
-        <SubmitFormButton />
-      </FormTestBase>
-    );
+    render(<FormTestBase>{() => <SubmitFormButton />}</FormTestBase>);
   });
 
   it('has matching snapshot', () => {
     const renderResult = render(
-      <FormTestBase>
-        <SubmitFormButton />
-      </FormTestBase>
+      <FormTestBase>{() => <SubmitFormButton />}</FormTestBase>
     );
     expect(renderResult.asFragment()).toMatchSnapshot();
   });

package/src/__Tests__/__snapshots__/{StandardFormActions.test.js.snap → StandardFormActions.test.tsx.snap}

@@ -6,7 +6,7 @@ exports[`StandardFormActions has matching snapshot 1`] = `
     action="#"
   >
     <button
-      class="btn btn-primary disabled"
+      class="submit-form-button"
       disabled=""
       title="You haven't made any changes"
       type="submit"
@@ -15,7 +15,7 @@ exports[`StandardFormActions has matching snapshot 1`] = `
     </button>
      
     <button
-      class="btn btn-link"
+      class="standard-form-actions-cancel-button"
       type="button"
     >
       Cancel

package/src/__Tests__/__snapshots__/{SubmitFormButton.test.js.snap → SubmitFormButton.test.tsx.snap}

@@ -6,7 +6,7 @@ exports[`SubmitFormButton has matching snapshot 1`] = `
     action="#"
   >
     <button
-      class="btn btn-primary disabled"
+      class="submit-form-button"
       disabled=""
       title="You haven't made any changes"
       type="submit"

package/src/__Tests__/index.ts

@@ -0,0 +1,3 @@
+import FormTestBase from './FormTestBase';
+
+export { FormTestBase };

package/src/index.ts

@@ -0,0 +1,149 @@
+// Address
+export { default as AddressInput } from './AddressInput/AddressInput';
+export type { AddressInputProps } from './AddressInput/AddressInput';
+
+// Button
+export { default as SubmitFormButton } from './SubmitFormButton';
+export type { SubmitFormButtonProps } from './SubmitFormButton';
+
+// ConfirmBaseForm
+export { default as ConfirmBaseForm } from './ConfirmBaseForm/ConfirmBaseForm';
+export type { ConfirmBaseFormProps } from './ConfirmBaseForm/ConfirmBaseForm';
+
+// ConfirmDeleteForm
+export { default as ConfirmDeleteForm } from './ConfirmDeleteForm/ConfirmDeleteForm';
+export type { ConfirmDeleteFormProps } from './ConfirmDeleteForm/ConfirmDeleteForm';
+
+// Date
+export { default as DatePickerGroup } from './DatePicker/DatePickerGroup';
+export type { DatePickerGroupProps as DatePickerGroupProps } from './DatePicker/DatePickerGroup';
+
+export type { DatePickerHelper } from './DatePicker/DatePickerHelper';
+
+export { default as DateOnlyDatePickerGroup } from './DatePicker/DateOnlyDatePickerGroup';
+export type {
+  DateOnly,
+  DateOnlyDatePickerGroupProps,
+} from './DatePicker/DateOnlyDatePickerGroup';
+
+export { default as StringDatePickerGroup } from './DatePicker/StringDatePickerGroup';
+export type { StringDatePickerGroupProps } from './DatePicker/StringDatePickerGroup';
+
+// Field
+export { default as Field } from './Field/Field';
+export type { FieldProps } from './Field/Field';
+
+export type { RenderComponent } from './Field/Field';
+export type { RenderComponentProps } from './Field/Field';
+
+export { default as FieldErrorScrollTarget } from './Field/FieldErrorScrollTarget';
+
+export { FieldNameContext } from './Field/FieldNameContext';
+
+export type { InjectedFieldProps } from './Field/InjectedFieldProps';
+
+export { default as StandAloneInput } from './Field/StandAloneInput';
+
+export type { StandAloneInputProps } from './Field/StandAloneInput';
+
+export { default as useStandardField } from './Field/useStandardField';
+export type { useStandardFieldProps } from './Field/useStandardField';
+
+// Field Array
+export { default as FieldArray } from './FieldArray/FieldArray';
+export type {
+  FieldArrayProps,
+  ArrayFormBuilderProp,
+} from './FieldArray/FieldArray';
+
+// File
+export { default as FileGroup } from './File/FileGroup';
+export type { FileGroupProps } from './File/FileGroup';
+
+// Form
+export { default as Form } from './Form/Form';
+export type { FormBuilderProp, FormProps } from './Form/Form';
+export { ServerErrorContext } from './Form/ServerErrorContext';
+export type {
+  ServerErrorContextProps,
+  ServerErrors,
+} from './Form/ServerErrorContext';
+
+export { default as FormActions } from './FormActions';
+export type { FormActionsProps as FormActionsProps } from './FormActions';
+
+export { default as StandardFormActions } from './StandardFormActions';
+export type { StandardFormActionsProps as StandardFormActionsProps } from './StandardFormActions';
+
+// Input
+export { default as Group } from './Group';
+export type { GroupProps as GroupProps } from './Group';
+
+export { default as IconInputGroup } from './Input/IconInputGroup';
+export type { IconInputGroupProps } from './Input/IconInputGroup';
+
+export { default as InputGroup } from './Input/InputGroup';
+export type { InputGroupProps } from './Input/InputGroup';
+
+export { default as MoneyInputGroup } from './Input/MoneyInputGroup';
+export type { MoneyInputGroupProps } from './Input/MoneyInputGroup';
+
+export { default as NumberInputGroup } from './Input/NumberInputGroup';
+export type { NumberInputGroupProps } from './Input/NumberInputGroup';
+
+export { default as StringInputGroup } from './Input/StringInputGroup';
+export type { StringInputGroupProps } from './Input/StringInputGroup';
+
+// Normalization
+export type { NormalizationFunction } from './Normalization/NormalizationFunction';
+export * as normalizers from './Normalization/normalizers';
+
+// Select
+export { default as SelectGroup } from './Select/SelectGroup';
+export type { SelectGroupProps, SelectOption } from './Select/SelectGroup';
+
+export { BooleanSelectGroup } from './Select/BooleanSelectGroup';
+export type { BooleanSelectGroupProps } from './Select/BooleanSelectGroup';
+
+export {
+  MultiNumberSelectGroup,
+  SingleNumberSelectGroup,
+} from './Select/NumberSelectGroup';
+export type {
+  MultiNumberSelectGroupProps,
+  SingleNumberSelectGroupProps,
+} from './Select/NumberSelectGroup';
+
+export type { SelectGroupPropsHelper } from './Select/SelectGroupPropsHelper';
+
+export {
+  MultiStringSelectGroup,
+  SingleStringSelectGroup,
+} from './Select/StringSelectGroup';
+export type {
+  MultiStringSelectGroupProps,
+  SingleStringSelectGroupProps,
+} from './Select/StringSelectGroup';
+
+// Text Area
+
+export { default as TextAreaGroup } from './TextArea/TextAreaGroup';
+
+export type { TextAreaGroupProps } from './TextArea/TextAreaGroup';
+
+// Utils
+export { default as objectContainsNonSerializableProperty } from './utils/objectContainsNonSerializableProperty';
+
+export { default as serialize } from './utils/objectToFormData';
+export type { ObjectToFormDataCfgProps } from './utils/objectToFormData';
+
+export * from './utils/typeChecks';
+
+// Validation
+export type { ValidatedApiResult } from './Validation/ValidatedApiResult';
+
+export type { ValidationError } from './Validation/ValidationError';
+
+export type { ValidationFunction } from './Validation/ValidationFunction';
+
+export * as validators from './Validation/validators';

package/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

package/src/styles.scss

@@ -1,7 +0,0 @@
-@use './DatePickerInput/date-picker-input.scss';
-@use './InlineFormInput/inline-form-input.scss';
-@use './MoneyInput/money-input.scss';
-@use './FormInput/form-input.scss';
-@use './FileInput/file-input.scss';
-@use './FormInputArray/form-input-array.scss';
-@use './ReactSelectField/react-select-field.scss';

package/src/utils/{objectContainsNonSerializableProperty.js → objectContainsNonSerializableProperty.ts}

@@ -1,6 +1,8 @@
-import { isObject, isBlob, isFile } from './typeChecks';
+import { isBlob, isFile, isObject } from './typeChecks';
 
-export default function objectContainsNonSerializableProperty(object) {
+export default function objectContainsNonSerializableProperty(
+  object: any
+): boolean {
   return Object.entries(object).some((value) => {
     if (value) {
       if (isBlob(value[1]) || isFile(value[1])) {

package/src/utils/{objectToFormData.js → objectToFormData.ts}

@@ -1,17 +1,33 @@
 // 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
 import {
-  isUndefined,
-  isNull,
-  isBoolean,
-  isObject,
   isArray,
-  isDate,
   isBlob,
+  isBoolean,
+  isDate,
   isFile,
+  isNull,
+  isObject,
+  isUndefined,
 } from './typeChecks';
 
-const serialize = (obj, cfg, fd, pre) => {
+// TODO: make all of these optional?
+export interface ObjectToFormDataCfgProps {
+  indices: boolean;
+  dotNotation: boolean;
+  allowEmptyArrays: boolean;
+  noFileListBrackets: boolean;
+  nullsAsUndefineds?: boolean;
+  booleansAsIntegers?: boolean;
+}
+
+// 'pre' is not provided until this function recursively calls itself when 'obj' is an array or object
+const serialize = (
+  obj: any,
+  cfg: ObjectToFormDataCfgProps,
+  fd?: FormData,
+  pre?: string
+) => {
   cfg = cfg || {};
 
   cfg.indices = isUndefined(cfg.indices) ? false : cfg.indices;
@@ -35,19 +51,21 @@ const serialize = (obj, cfg, fd, pre) => {
 
   if (isUndefined(obj)) {
     return fd;
-  } else if (isNull(obj)) {
+  } else if (isNull(obj) && !!pre) {
     if (!cfg.nullsAsUndefineds) {
       fd.append(pre, '');
     }
-  } else if (isBoolean(obj)) {
+  } else if (isBoolean(obj) && !!pre) {
     if (cfg.booleansAsIntegers) {
-      fd.append(pre, obj ? 1 : 0);
+      fd.append(pre, obj ? '1' : '0');
     } else {
       fd.append(pre, obj);
     }
+  } else if (isDate(obj) && !!pre) {
+    fd.append(pre, obj.toISOString());
   } else if (isArray(obj)) {
     if (obj.length) {
-      obj.forEach((value, index) => {
+      obj.forEach((value: any, index: number) => {
         let key;
         if (cfg.noFileListBrackets && isFile(value)) {
           key = pre;
@@ -59,8 +77,6 @@ const serialize = (obj, cfg, fd, pre) => {
     } else if (cfg.allowEmptyArrays) {
       fd.append(pre + '[]', '');
     }
-  } else if (isDate(obj)) {
-    fd.append(pre, obj.toISOString());
   } else if (isObject(obj) && !isFile(obj) && !isBlob(obj)) {
     Object.keys(obj).forEach((prop) => {
       const value = obj[prop];
@@ -79,7 +95,7 @@ const serialize = (obj, cfg, fd, pre) => {
 
       serialize(value, cfg, fd, key);
     });
-  } else {
+  } else if (!!pre) {
     fd.append(pre, obj);
   }
 

package/src/utils/typeChecks.ts

@@ -0,0 +1,18 @@
+export const isUndefined = (value: any) => value === undefined;
+export const isNull = (value: any) => value === null;
+export const isBoolean = (value: any) => typeof value === 'boolean';
+export const isObject = (value: any) => value === Object(value);
+export const isArray = (value: any) => Array.isArray(value);
+export const isDate = (value: any) => value instanceof Date;
+
+export const isBlob = (value: any) =>
+  value &&
+  typeof value.size === 'number' &&
+  typeof value.type === 'string' &&
+  typeof value.slice === 'function';
+
+export const isFile = (value: any) =>
+  isBlob(value) &&
+  typeof value.name === 'string' &&
+  (typeof value.lastModifiedDate === 'object' ||
+    typeof value.lastModified === 'number');

package/es/AddressInput/index.js

@@ -1,2 +0,0 @@
-import AddressInput from './AddressInput';
-export default AddressInput;

package/es/BoolInput/BoolInput.js

@@ -1,10 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import React from 'react';
-import boolOptions from './boolOptions';
-import FormInput from '../FormInput';
-export default function BoolInput(props) {
-  return /*#__PURE__*/React.createElement(FormInput, _extends({
-    options: boolOptions,
-    type: "select"
-  }, props));
-}

package/es/BoolInput/InlineBoolInput.js

@@ -1,10 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import React from 'react';
-import boolOptions from './boolOptions';
-import InlineFormInput from '../InlineFormInput';
-export default function InlineBoolInput(props) {
-  return /*#__PURE__*/React.createElement(InlineFormInput, _extends({
-    options: boolOptions,
-    type: "select"
-  }, props));
-}

package/es/BoolInput/boolOptions.js

@@ -1,8 +0,0 @@
-var boolOptions = [{
-  label: 'Yes',
-  value: true
-}, {
-  label: 'No',
-  value: false
-}];
-export default boolOptions;

package/es/BoolInput/index.js

@@ -1,3 +0,0 @@
-import BoolInput from './BoolInput';
-import InlineBoolInput from './InlineBoolInput';
-export { BoolInput, InlineBoolInput };

package/es/ConfirmBaseForm/index.js

@@ -1,2 +0,0 @@
-import ConfirmBaseForm from './ConfirmBaseForm';
-export default ConfirmBaseForm;

package/es/ConfirmDeleteForm/index.js

@@ -1,2 +0,0 @@
-import ConfirmDeleteForm from './ConfirmDeleteForm';
-export default ConfirmDeleteForm;

package/es/DatePickerInput/DatePickerInput.js

@@ -1,95 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-var _excluded = ["value", "className", "maxDate"];
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-import React from 'react';
-import DatePicker from 'react-date-picker';
-import parseISO from 'date-fns/parseISO';
-import classnames from 'classnames';
-var dateOnlyRegex = /^\d{4}-\d{2}-\d{2}$/;
-var defaultMaxDate = new Date('9999-12-31');
-
-var DatePickerInput = /*#__PURE__*/function (_React$Component) {
-  _inherits(DatePickerInput, _React$Component);
-
-  var _super = _createSuper(DatePickerInput);
-
-  function DatePickerInput() {
-    var _this;
-
-    _classCallCheck(this, DatePickerInput);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "handleBlur", function () {
-      var onBlur = _this.props.onBlur;
-      onBlur();
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleChange", function (e) {
-      var onChange = _this.props.onChange;
-
-      if (e == null) {
-        onChange(null);
-      } else {
-        // ensure ONLY the date is persisted - so UTC offset info / time is not persisted or sent
-        onChange(e.toISOString().split('T')[0]);
-      }
-    });
-
-    return _this;
-  }
-
-  _createClass(DatePickerInput, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          value = _this$props.value,
-          className = _this$props.className,
-          _this$props$maxDate = _this$props.maxDate,
-          maxDate = _this$props$maxDate === void 0 ? defaultMaxDate : _this$props$maxDate,
-          rest = _objectWithoutProperties(_this$props, _excluded);
-
-      if (value && !dateOnlyRegex.test(value)) {
-        var errorMessage = "Invalid date only value of ".concat(value, " passed to DatePicker input. This input is only configured to handle dates in the format yyyy-mm-dd. Ensure that the server is configured to return date only values.");
-
-        if (process.env.NODE_ENV !== 'production') {
-          //We should throw if 'value' is not 'yyyy-mm-dd' in dev
-          throw new Error(errorMessage);
-        } else {
-          console.error(errorMessage);
-        }
-      }
-
-      var parsedValue = value ? parseISO(value) : null;
-      return /*#__PURE__*/React.createElement(DatePicker, _extends({
-        className: classnames('form-control', className),
-        onCalendarOpen: this.onCalendarOpen
-      }, rest, {
-        value: parsedValue,
-        onChange: this.handleChange,
-        onBlur: this.handleBlur,
-        maxDate: maxDate
-      }));
-    }
-  }]);
-
-  return DatePickerInput;
-}(React.Component);
-
-export { DatePickerInput as default };

package/es/DatePickerInput/index.js

@@ -1,2 +0,0 @@
-import DatePickerInput from './DatePickerInput';
-export default DatePickerInput;

package/es/ErrorScrollTarget.js

@@ -1,10 +0,0 @@
-import React from 'react';
-export default function ErrorScrollTarget(props) {
-  var divId = "".concat(props.name.toLowerCase(), "-error-scroll-target");
-  return /*#__PURE__*/React.createElement("div", {
-    id: divId,
-    style: {
-      display: 'none'
-    }
-  });
-}

package/es/FileInput/DefaultFileList.js

@@ -1,36 +0,0 @@
-import React from 'react';
-import { ListGroupItem, ListGroup } from 'reactstrap';
-export default function DefaultFileList(_ref) {
-  var files = _ref.files,
-      _ref$rejectedFiles = _ref.rejectedFiles,
-      rejectedFiles = _ref$rejectedFiles === void 0 ? [] : _ref$rejectedFiles;
-  return /*#__PURE__*/React.createElement(ListGroup, null, files.map(function (file) {
-    return /*#__PURE__*/React.createElement(Group, {
-      key: file.path,
-      item: file,
-      warning: false
-    });
-  }), rejectedFiles.map(function (_ref2) {
-    var file = _ref2.file;
-    return /*#__PURE__*/React.createElement(Group, {
-      key: file.path,
-      item: file,
-      warning: true
-    });
-  }));
-}
-
-function Group(_ref3) {
-  var item = _ref3.item,
-      warning = _ref3.warning;
-  return /*#__PURE__*/React.createElement(ListGroupItem, {
-    color: "d-flex ".concat(warning ? 'warning' : 'success', "  justify-content-between list-group-item ").concat(warning ? 'list-group-item-warning' : 'list-group-item-success', " px-3 py-1 rounded-1")
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "d-flex justify-content-between w-100"
-  }, /*#__PURE__*/React.createElement("span", null, item.name), " ", /*#__PURE__*/React.createElement("span", null, humanFileSize(item.size))));
-}
-
-function humanFileSize(size) {
-  var i = Math.floor(Math.log(size) / Math.log(1024));
-  return (size / Math.pow(1024, i)).toFixed(2) * 1 + ' ' + ['B', 'KB', 'MB', 'GB', 'TB'][i];
-}