envoc-form 3.1.0 → 4.0.1-0

package/src/FormInputArray/__snapshots__/FormInputArray.test.js.snap

@@ -1,52 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FormInputArray has matching snapshot 1`] = `
-<DocumentFragment>
-  <form
-    action="#"
-  >
-    <div
-      class="field-array-card card"
-    >
-      <div
-        class="card-header card-action-header d-flex align-items-baseline"
-      >
-        <strong
-          class="mr-auto"
-        >
-          Names
-        </strong>
-        <div
-          class="card-action-header-actions"
-        >
-          <button
-            class="add-array-item btn btn-link"
-            title="Add an additional item"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="svg-inline--fa fa-plus fa-w-14 "
-              data-icon="plus"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              viewBox="0 0 448 512"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-                fill="currentColor"
-              />
-            </svg>
-             Add New
-          </button>
-        </div>
-      </div>
-      <div
-        class="card-body"
-      />
-    </div>
-  </form>
-</DocumentFragment>
-`;

package/src/FormInputArray/form-input-array.scss

@@ -1,13 +0,0 @@
-.field-array-card {
-  margin-bottom: 1rem;
-
-  .field-array-item {
-    &.removed {
-      display: none;
-    }
-
-    > .remove-array-item {
-      display: flex;
-    }
-  }
-}

package/src/FormInputArray/index.js

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

package/src/FormSection.js

@@ -1,13 +0,0 @@
-import React, { useContext } from 'react';
-import NestedFormFieldContext from './NestedFormFieldContext';
-
-export default function FormSection({ children, name }) {
-  const parentContext = useContext(NestedFormFieldContext);
-  const effectiveValue = parentContext ? `${parentContext}.${name}` : name;
-
-  return (
-    <NestedFormFieldContext.Provider value={effectiveValue}>
-      {children}
-    </NestedFormFieldContext.Provider>
-  );
-}

package/src/IconInput.js

@@ -1,31 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupText,
-  Input as BootstrapInput,
-  FormFeedback,
-} from 'reactstrap';
-import useStandardFormInput from './useStandardFormInput';
-
-export default function IconInput({ className, icon, helpText, ...props }) {
-  const [input, meta] = useStandardFormInput(props);
-  return (
-    <InputGroup className={className}>
-      <InputGroupAddon addonType="prepend">
-        <InputGroupText>
-          <i className={icon} />
-        </InputGroupText>
-      </InputGroupAddon>
-      <BootstrapInput invalid={!!meta.error} {...input} />
-      {meta.error && <FormFeedback>{meta.error}</FormFeedback>}
-      {helpText && <FormFeedback>{helpText}</FormFeedback>}
-    </InputGroup>
-  );
-}
-
-IconInput.propTypes = {
-  icon: PropTypes.string,
-  className: PropTypes.string,
-};

package/src/InlineFormInput/InlineFormInput.js

@@ -1,6 +0,0 @@
-import React from 'react';
-import FormInput from '../FormInput';
-
-export default function InlineFormInput(props) {
-  return <FormInput className="inline-form-input col" {...props} />;
-}

package/src/InlineFormInput/InlineFormInput.test.js

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

package/src/InlineFormInput/__snapshots__/InlineFormInput.test.js.snap

@@ -1,26 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`MoneyInput has matching snapshot 1`] = `
-<DocumentFragment>
-  <form
-    action="#"
-  >
-    <div
-      class="inline-form-input col form-group"
-    >
-      <div
-        id="test-error-scroll-target"
-        style="display: none;"
-      />
-      <input
-        aria-invalid="false"
-        class="inline-form-input col form-control"
-        id="test"
-        name="test"
-        type="text"
-        value=""
-      />
-    </div>
-  </form>
-</DocumentFragment>
-`;

package/src/InlineFormInput/index.js

@@ -1,3 +0,0 @@
-import InlineFormInput from './InlineFormInput';
-
-export default InlineFormInput;

package/src/InlineFormInput/inline-form-input.scss

@@ -1,3 +0,0 @@
-.inline-form-input.form-group {
-  display: inline-block;
-}

package/src/MoneyInput/InlineMoneyInput.js

@@ -1,7 +0,0 @@
-import React from 'react';
-import InlineFormInput from '../InlineFormInput';
-import moneyInputProps from './moneyInputProps';
-
-export default function InlineMoneyInput(props) {
-  return <InlineFormInput {...moneyInputProps} {...props} />;
-}

package/src/MoneyInput/MoneyInput.js

@@ -1,7 +0,0 @@
-import React from 'react';
-import FormInput from '../FormInput';
-import moneyInputProps from './moneyInputProps';
-
-export default function MoneyInput(props) {
-  return <FormInput {...moneyInputProps} {...props} />;
-}

package/src/MoneyInput/MoneyInputs.test.js

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

package/src/MoneyInput/__snapshots__/MoneyInputs.test.js.snap

@@ -1,81 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`InlineMoneyInput has matching snapshot 1`] = `
-<DocumentFragment>
-  <form
-    action="#"
-  >
-    <div
-      class="money-input form-group"
-    >
-      <div
-        id="moneytest-error-scroll-target"
-        style="display: none;"
-      />
-      <div
-        class="input-group"
-      >
-        <div
-          class="input-group-prepend"
-        >
-          <span
-            class="input-group-text"
-          >
-            $
-          </span>
-        </div>
-        <input
-          aria-invalid="false"
-          class="money-input form-control"
-          id="moneytest"
-          min="0"
-          name="moneytest"
-          step="0.01"
-          type="number"
-          value=""
-        />
-      </div>
-    </div>
-  </form>
-</DocumentFragment>
-`;
-
-exports[`MoneyInput has matching snapshot 1`] = `
-<DocumentFragment>
-  <form
-    action="#"
-  >
-    <div
-      class="money-input form-group"
-    >
-      <div
-        id="moneytest-error-scroll-target"
-        style="display: none;"
-      />
-      <div
-        class="input-group"
-      >
-        <div
-          class="input-group-prepend"
-        >
-          <span
-            class="input-group-text"
-          >
-            $
-          </span>
-        </div>
-        <input
-          aria-invalid="false"
-          class="money-input form-control"
-          id="moneytest"
-          min="0"
-          name="moneytest"
-          step="0.01"
-          type="number"
-          value=""
-        />
-      </div>
-    </div>
-  </form>
-</DocumentFragment>
-`;

package/src/MoneyInput/index.js

@@ -1,4 +0,0 @@
-import MoneyInput from './MoneyInput';
-import InlineMoneyInput from './InlineMoneyInput';
-
-export { MoneyInput, InlineMoneyInput };

package/src/MoneyInput/money-input.scss

@@ -1,3 +0,0 @@
-input.money-input {
-  text-align: right;
-}

package/src/MoneyInput/moneyInputProps.js

@@ -1,12 +0,0 @@
-import React from 'react';
-import { InputGroupAddon } from 'reactstrap';
-
-const MoneyPrepend = <InputGroupAddon addonType="prepend">$</InputGroupAddon>;
-const moneyInputProps = {
-  type: 'number',
-  step: '0.01',
-  min: '0',
-  prepend: MoneyPrepend,
-  className: 'money-input',
-};
-export default moneyInputProps;

package/src/NestedFormFieldContext.js

@@ -1,6 +0,0 @@
-import React from 'react';
-
-// TODO: better name?
-const NestedFormFieldContext = React.createContext();
-
-export default NestedFormFieldContext;

package/src/ReactSelectField/ReactSelectField.js

@@ -1,122 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import { default as ReactSelect } from 'react-select';
-
-export const overrideTheme = (theme) => {
-  return {
-    ...theme,
-    borderRadius: 0,
-    spacing: Object.assign(
-      {},
-      { ...theme.spacing },
-      { baseUnit: 2, controlHeight: 35 }
-    ),
-  };
-};
-
-const red = '#f86c6b';
-const inputBorderColor = '#c2cfd6';
-const inputBorderColorFocused = '#8ad4ee';
-const inputBoxShadowFocused = '0 0 0 0.2rem rgba(32, 168, 216, 0.25)';
-
-export const customStyles = {
-  control: (provided, { isFocused, selectProps }) => {
-    return {
-      ...provided,
-      paddingLeft: '7px',
-      '&:hover': {
-        borderColor: isFocused ? inputBorderColorFocused : inputBorderColor,
-      },
-      borderColor: selectProps.hasErrors
-        ? red
-        : isFocused
-        ? inputBorderColorFocused
-        : inputBorderColor,
-      boxShadow: isFocused ? inputBoxShadowFocused : '',
-    };
-  },
-  menu: (provided) => ({ ...provided, zIndex: 3 }),
-};
-
-// internal to forms use only
-export default function ReactSelectInput({
-  className,
-  meta,
-  disabled,
-  onSelected,
-  onChange,
-  onBlur,
-  value,
-  options,
-  defaultValue,
-  defaultIndex,
-  ...props
-}) {
-  const selectedItems = getSelectedItems();
-  const onSelectedRef = useRef(onSelected);
-  onSelectedRef.current = onSelected;
-
-  useEffect(() => {
-    onSelectedRef.current && onSelectedRef.current(selectedItems);
-  }, [selectedItems]);
-
-  return (
-    <ReactSelect
-      {...props}
-      options={options}
-      isDisabled={disabled}
-      hasErrors={meta.error}
-      getOptionLabel={(option) => option.label}
-      getOptionValue={getOptionValue}
-      value={selectedItems}
-      onChange={handleChange}
-      className="react-select-input"
-      theme={overrideTheme}
-      styles={customStyles}
-      menuPortalTarget={document.body}
-      menuPlacement="auto"
-    />
-  );
-
-  function getOptionValue(option) {
-    if (typeof props.getOptionValue === 'function') {
-      return props.getOptionValue(option);
-    } else {
-      return option.value;
-    }
-  }
-
-  function getSelectedItems() {
-    if (defaultValue !== undefined && value === '') {
-      value = defaultValue;
-      onChange(defaultValue);
-    }
-    if (defaultIndex !== undefined && value === '') {
-      const item = options[defaultIndex];
-      onChange(getOptionValue(item));
-      return item;
-    }
-
-    const valueIsArray = Array.isArray(value);
-    const matches = options.filter((x) => {
-      if (valueIsArray) {
-        return value.includes(getOptionValue(x));
-      } else {
-        return value === getOptionValue(x);
-      }
-    });
-    if (matches.length < 1) {
-      return null;
-    }
-    return matches;
-  }
-
-  function handleChange(e) {
-    if (e == null) {
-      onChange(null);
-    } else if (Array.isArray(e)) {
-      onChange(e.map((x) => x.value));
-    } else {
-      onChange(e.value);
-    }
-  }
-}

package/src/ReactSelectField/index.js

@@ -1,6 +0,0 @@
-import ReactSelectField, {
-  overrideTheme,
-  customStyles,
-} from './ReactSelectField';
-
-export { ReactSelectField as default, overrideTheme, customStyles };

package/src/ReactSelectField/react-select-field.scss

@@ -1,5 +0,0 @@
-@import '../variables';
-
-div.react-select-input.has-error {
-  border-color: $red;
-}

package/src/SubmitFormButton.js

@@ -1,28 +0,0 @@
-import React from 'react';
-import { Button } from 'reactstrap';
-import { useFormikContext } from 'formik';
-
-export default function SubmitFormButton({
-  allowPristineSubmit,
-  children,
-  ...props
-}) {
-  const { isSubmitting, dirty } = useFormikContext();
-  const preventSubmit = (!dirty && !allowPristineSubmit) || isSubmitting;
-  return (
-    <Button
-      type="submit"
-      color="primary"
-      disabled={preventSubmit}
-      title={
-        isSubmitting
-          ? 'Loading, please wait...'
-          : preventSubmit
-          ? "You haven't made any changes"
-          : ''
-      }
-      {...props}>
-      {children || 'Submit'}
-    </Button>
-  );
-}

package/src/__Tests__/FormTestBase.js

@@ -1,14 +0,0 @@
-import '@testing-library/jest-dom/extend-expect';
-import React from 'react';
-import { HashRouter } from 'react-router-dom';
-import Form from '../Form';
-
-export default function FormTestBase({ children, initialValues }) {
-  return (
-    <HashRouter>
-      <Form onSubmit={() => {}} initialValues={initialValues}>
-        {children}
-      </Form>
-    </HashRouter>
-  );
-}

package/src/__Tests__/IconInput.test.js

@@ -1,23 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import FormTestBase from './FormTestBase';
-import IconInput from '../IconInput';
-
-describe('IconInput', () => {
-  it('renders without crashing', () => {
-    render(
-      <FormTestBase>
-        <IconInput name="test" icon="fa fa-user" helpText="help text" />
-      </FormTestBase>
-    );
-  });
-
-  it('has matching snapshot', () => {
-    const renderResult = render(
-      <FormTestBase>
-        <IconInput name="test" icon="fa fa-user" helpText="help text" />
-      </FormTestBase>
-    );
-    expect(renderResult.asFragment()).toMatchSnapshot();
-  });
-});

package/src/__Tests__/__snapshots__/IconInput.test.js.snap

@@ -1,38 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`IconInput has matching snapshot 1`] = `
-<DocumentFragment>
-  <form
-    action="#"
-  >
-    <div
-      class="input-group"
-    >
-      <div
-        class="input-group-prepend"
-      >
-        <span
-          class="input-group-text"
-        >
-          <i
-            class="fa fa-user"
-          />
-        </span>
-      </div>
-      <input
-        aria-invalid="false"
-        class="form-control"
-        id="test"
-        name="test"
-        type="text"
-        value=""
-      />
-      <div
-        class="invalid-feedback"
-      >
-        help text
-      </div>
-    </div>
-  </form>
-</DocumentFragment>
-`;

package/src/index.js

@@ -1,45 +0,0 @@
-import * as normalizers from './normalizers';
-
-import { BoolInput, InlineBoolInput } from './BoolInput';
-import { InlineMoneyInput, MoneyInput } from './MoneyInput';
-
-import AddressInput from './AddressInput';
-import ConfirmBaseForm from './ConfirmBaseForm';
-import ConfirmDeleteForm from './ConfirmDeleteForm';
-import ErrorScrollTarget from './ErrorScrollTarget';
-import Form from './Form';
-import FormGroup from './FormGroup';
-import FormGroupWrapper from './FormGroupWrapper';
-import FormInput from './FormInput';
-import FormInputArray from './FormInputArray';
-import FormSection from './FormSection';
-import IconInput from './IconInput';
-import InlineFormInput from './InlineFormInput';
-import StandardFormActions from './StandardFormActions';
-import SubmitFormButton from './SubmitFormButton';
-import useStandardFormInput from './useStandardFormInput';
-import validators from './validators';
-
-export {
-  AddressInput,
-  BoolInput,
-  ConfirmBaseForm,
-  ConfirmDeleteForm,
-  ErrorScrollTarget,
-  Form,
-  FormGroup,
-  FormGroupWrapper,
-  FormInput,
-  FormInputArray,
-  FormSection,
-  IconInput,
-  InlineBoolInput,
-  InlineFormInput,
-  InlineMoneyInput,
-  MoneyInput,
-  normalizers,
-  StandardFormActions,
-  SubmitFormButton,
-  useStandardFormInput,
-  validators,
-};

package/src/selectors.js

@@ -1,3 +0,0 @@
-export const getForm = (state, ownProps) => state.form[ownProps.form];
-export const getRegisteredFields = (state, ownProps) =>
-  getForm(state, ownProps) ? getForm(state, ownProps).registeredFields : {};