envoc-form 3.2.0 → 4.0.1-1

package/src/FormInputArray/FormInputArray.js

@@ -1,224 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { v4 as uuid } from 'uuid';
-import classnames from 'classnames';
-import { Col, Card, Button, CardBody, Row, Alert } from 'reactstrap';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
-import {faPlus, faTrash} from '@fortawesome/free-solid-svg-icons'
-import PropTypes from 'prop-types';
-import useStandardFormInput from '../useStandardFormInput';
-import NestedFormFieldContext from '../NestedFormFieldContext';
-import classNames from 'classnames';
-
-export default function FormInputArray({
-  id,
-  name,
-  label,
-  newItem,
-  component: Component,
-  prepend: Prepend,
-  disabled,
-  validate,
-  ...props
-}) {
-  const [inputProps, meta] = useStandardFormInput({
-    id,
-    name,
-    validate,
-    disabled,
-    ...props,
-  });
-  const inputPropsRef = useRef();
-  const [hasChangedLength, setHasChangedLength] = useState(false);
-  inputPropsRef.current = inputProps;
-  const values = inputProps.value || [];
-  const length = values.length;
-
-  useEffect(() => {
-    return () => {
-      setHasChangedLength(true);
-    };
-  }, [length, setHasChangedLength]);
-
-  useEffect(() => {
-    if (!hasChangedLength) {
-      return;
-    }
-    inputPropsRef.current.onBlur();
-  }, [length, hasChangedLength]);
-
-  return (
-    <Card className="field-array-card">
-      <CardActionHeader>
-        <CardActionHeader.Title>{label}</CardActionHeader.Title>
-        <CardActionHeader.Actions>
-          {!disabled && (
-            <Button
-              color="link"
-              onClick={addItem}
-              title="Add an additional item"
-              className="add-array-item">
-              <FontAwesomeIcon icon={faPlus} /> Add New
-            </Button>
-          )}
-        </CardActionHeader.Actions>
-      </CardActionHeader>
-      <CardBody>
-        {/* See: https://jaredpalmer.com/formik/docs/api/fieldarray#fieldarray-validation-gotchas */}
-        {meta.error && typeof meta.error === 'string' && (
-          <Row>
-            <Col>
-              <Alert className="field-array-alert" color="danger">
-                {meta.error}
-              </Alert>
-            </Col>
-          </Row>
-        )}
-        {Prepend && values.filter((x) => !x.isDeleted).length > 0 && (
-          <Row className={classnames('input-array-header')}>
-            <Prepend />
-            {!disabled && <div className="remove-array-item"></div>}
-          </Row>
-        )}
-        {values.map((value, index) => {
-          const itemName = `${inputProps.name}[${index}]`;
-          return (
-            <Row
-              key={
-                (value && value['form-input-array-key']) ||
-                (value && value['id']) ||
-                itemName
-              }
-              className={classnames('field-array-item', {
-                removed: value.isDeleted,
-              })}
-              role="listitem">
-              <NestedFormFieldContext.Provider value={itemName}>
-                <div className="component">
-                <Component
-                  value={value}
-                  name={itemName}
-                  disabled={disabled}
-                  {...props}
-                />
-                </div>
-              </NestedFormFieldContext.Provider>
-              {!disabled && (
-                <div className="remove-array-item">
-                  <Button
-                    color="link"
-                    onClick={() => removeItem(index)}
-                    title="Remove Item">
-                   <FontAwesomeIcon icon={faTrash} />
-                  </Button>
-                </div>
-              )}
-            </Row>
-          );
-        })}
-      </CardBody>
-    </Card>
-  );
-
-  function addItem() {
-    if (disabled) {
-      return;
-    }
-    const item = Object.assign({}, newItem, { 'form-input-array-key': uuid() });
-    const mapped = [...values, item];
-    inputProps.onChange(mapped);
-  }
-
-  function removeItem(index) {
-    if (disabled) {
-      return;
-    }
-    const itemToRemove = values[index];
-    // assumes anything from the server has an 'id' value sent
-    if (!itemToRemove.id) {
-      inputProps.onChange(values.filter((x) => x !== itemToRemove));
-      return;
-    }
-    const mapped = values.map((x) =>
-      x !== itemToRemove ? x : Object.assign({}, x, { isDeleted: true })
-    );
-    inputProps.onChange(mapped);
-  }
-}
-
-FormInputArray.Header = ({ className, ...props }) => {
-  return (
-    <FormInputArray.Column
-      className={classnames('mb-2', className)}
-      {...props}
-    />
-  );
-};
-
-FormInputArray.Column = ({ className, children, ...props }) => {
-  return (
-    <Col className={classnames('d-flex', className)} {...props}>
-      {children}
-    </Col>
-  );
-};
-
-FormInputArray.propTypes = {
-  name: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
-
-  /**
-   * The component to use for each element of the array
-   **/
-  component: PropTypes.func.isRequired,
-
-  disabled: PropTypes.bool,
-
-  /**
-   * When 'Add Item' is used this object is passed as the default (so you can, as an example, give a default)
-   **/
-  newItem: PropTypes.object,
-
-  /**
-   * Affixes a 'header' above all rows so you can have a grid-like display
-   **/
-  prepend: PropTypes.func,
-
-  /**
-   * standard validator, BUT, will be passed the whole array to validate
-   **/
-  validate: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.func),
-    PropTypes.func,
-  ]),
-};
-
-function CardActionHeader({ children, className, ...props }) {
-  return (
-    <div
-      className={classnames(
-        'card-header card-action-header d-flex align-items-baseline',
-        className
-      )}
-      {...props}>
-      {children}
-    </div>
-  );
-}
-
-CardActionHeader.Title = function Title({ children, className, ...props }) {
-  return (
-    <strong className={classnames('mr-auto', className)} {...props}>
-      {children}
-    </strong>
-  );
-};
-
-CardActionHeader.Actions = function Actions({ children, className, ...props }) {
-  return (
-    <div
-      className={classnames('card-action-header-actions', className)}
-      {...props}>
-      {children}
-    </div>
-  );
-};

package/src/FormInputArray/FormInputArray.test.js

@@ -1,108 +0,0 @@
-import React from 'react';
-import { render, screen, waitFor, within } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { FormTestBase } from '../__Tests__';
-import FormInput from '../FormInput';
-import FormInputArray from './FormInputArray';
-
-describe('FormInputArray', () => {
-  it('renders without crashing', () => {
-    render(
-      <FormTestBase>
-        <FormInputArray
-          label="Names"
-          name="things"
-          component={FirstLastNameInput}
-        />
-      </FormTestBase>
-    );
-  });
-
-  it('has matching snapshot', () => {
-    const renderResult = render(
-      <FormTestBase>
-        <FormInputArray
-          label="Names"
-          name="things"
-          component={FirstLastNameInput}
-        />
-      </FormTestBase>
-    );
-    expect(renderResult.asFragment()).toMatchSnapshot();
-  });
-
-  it('renders a simple two input array', async () => {
-    render(
-      <FormTestBase>
-        <FormInputArray
-          label="Names"
-          name="things"
-          component={FirstLastNameInput}
-        />
-      </FormTestBase>
-    );
-    const addButton = screen.getByText('Add New');
-    userEvent.click(addButton);
-    userEvent.click(addButton);
-    const firstNameElements = await screen.findAllByLabelText('First Name');
-    expect(firstNameElements).toHaveLength(2);
-  });
-
-  it('adds "removed" class to deleted items specified in initialValues', async () => {
-    const initialValues = {
-      things: [
-        {
-          id: 1,
-          firstName: 'John',
-          lastName: 'Doe',
-        },
-      ],
-    };
-
-    render(
-      <FormTestBase initialValues={initialValues}>
-        <FormInputArray
-          label="Names"
-          name="things"
-          component={FirstLastNameInput}
-        />
-      </FormTestBase>
-    );
-
-    const item = screen.getByRole(/listitem/i);
-    const deleteButton = within(item).getByTitle(/remove item/i);
-    expect(item).not.toHaveClass('removed');
-    userEvent.click(deleteButton);
-    expect(item).toHaveClass('removed');
-  });
-
-  it('removes deleted items not specified in initialValues', async () => {
-    render(
-      <FormTestBase>
-        <FormInputArray
-          label="Names"
-          name="things"
-          component={FirstLastNameInput}
-        />
-      </FormTestBase>
-    );
-
-    const addButton = screen.getByText(/add new/i);
-    userEvent.click(addButton);
-    const item = screen.getByRole(/listitem/i);
-    const deleteButton = within(item).getByTitle(/remove item/i);
-    userEvent.click(deleteButton);
-    await waitFor(() => {
-      expect(screen.queryByRole(/listitem/i)).not.toBeInTheDocument();
-    });
-  });
-});
-
-function FirstLastNameInput() {
-  return (
-    <>
-      <FormInput label="First Name" name="firstName" type="text" />
-      <FormInput label="Last Name" name="lastName" type="text" />
-    </>
-  );
-}

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;