envoc-form 5.0.9 → 6.0.1-1

package/lib/utils/typeChecks.js

@@ -1,29 +0,0 @@
-"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/src/AddressInput/AddressInput.test.tsx

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

package/src/AddressInput/AddressInput.tsx

@@ -1,82 +0,0 @@
-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 | null;
-  address2?: string | null;
-  zipCode?: string | null;
-  city?: string | null;
-  state?: string | null;
-}
-
-/**
- * Collection of `<Field/>`s for inputting an address. Includes:
- * ```txt
- * Address 1
- * Address 2
- * City
- * State
- * Zip
- * ```
- */
-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.ts

@@ -1,55 +0,0 @@
-import { SelectOption } from '../Select/SelectGroup';
-
-const states: SelectOption<string>[] = [
-  { label: 'Alabama', value: 'AL' },
-  { label: 'Alaska', value: 'AK' },
-  { label: 'Arizona', value: 'AZ' },
-  { label: 'Arkansas', value: 'AR' },
-  { label: 'California', value: 'CA' },
-  { label: 'Colorado', value: 'CO' },
-  { label: 'Connecticut', value: 'CT' },
-  { label: 'Delaware', value: 'DE' },
-  { label: 'Florida', value: 'FL' },
-  { label: 'Georgia', value: 'GA' },
-  { label: 'Hawaii', value: 'HI' },
-  { label: 'Idaho', value: 'ID' },
-  { label: 'Illinois', value: 'IL' },
-  { label: 'Indiana', value: 'IN' },
-  { label: 'Iowa', value: 'IA' },
-  { label: 'Kansas', value: 'KS' },
-  { label: 'Kentucky', value: 'KY' },
-  { label: 'Louisiana', value: 'LA' },
-  { label: 'Maine', value: 'ME' },
-  { label: 'Maryland', value: 'MD' },
-  { label: 'Massachusetts', value: 'MA' },
-  { label: 'Michigan', value: 'MI' },
-  { label: 'Minnesota', value: 'MN' },
-  { label: 'Mississippi', value: 'MS' },
-  { label: 'Missouri', value: 'MO' },
-  { label: 'Montana', value: 'MT' },
-  { label: 'Nebraska', value: 'NE' },
-  { label: 'Nevada', value: 'NV' },
-  { label: 'New Hampshire', value: 'NH' },
-  { label: 'New Jersey', value: 'NJ' },
-  { label: 'New Mexico', value: 'NM' },
-  { label: 'New York', value: 'NY' },
-  { label: 'North Carolina', value: 'NC' },
-  { label: 'North Dakota', value: 'ND' },
-  { label: 'Ohio', value: 'OH' },
-  { label: 'Oklahoma', value: 'OK' },
-  { label: 'Oregon', value: 'OR' },
-  { label: 'Pennsylvania', value: 'PA' },
-  { label: 'Rhode Island', value: 'RI' },
-  { label: 'South Carolina', value: 'SC' },
-  { label: 'South Dakota', value: 'SD' },
-  { label: 'Tennessee', value: 'TN' },
-  { label: 'Texas', value: 'TX' },
-  { label: 'Utah', value: 'UT' },
-  { label: 'Vermont', value: 'VT' },
-  { label: 'Virginia', value: 'VA' },
-  { label: 'Washington', value: 'WA' },
-  { label: 'West Virginia', value: 'WV' },
-  { label: 'Wisconsin', value: 'WI' },
-  { label: 'Wyoming', value: 'WY' },
-];
-export default states;

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

@@ -1,183 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`AddressInput has matching snapshot 1`] = `
-<DocumentFragment>
-  <form
-    action="#"
-    class="envoc-form-form"
-  >
-    <div
-      class="envoc-form-string-group envoc-form-input-group envoc-form-group envoc-form-required"
-    >
-      <div
-        id="normaladdressinput.address1-error-scroll-target"
-        style="display: none;"
-      />
-      <label
-        for="normalAddressInput.address1"
-      >
-        Address 1
-      </label>
-      <input
-        aria-invalid="false"
-        class="envoc-form-string-group envoc-form-input-group"
-        id="normalAddressInput.address1"
-        name="normalAddressInput.address1"
-        placeholder="Address, Line 1"
-        value=""
-      />
-    </div>
-    <div
-      class="envoc-form-string-group envoc-form-input-group envoc-form-group"
-    >
-      <div
-        id="normaladdressinput.address2-error-scroll-target"
-        style="display: none;"
-      />
-      <label
-        for="normalAddressInput.address2"
-      >
-        Address 2
-      </label>
-      <input
-        aria-invalid="false"
-        class="envoc-form-string-group envoc-form-input-group"
-        id="normalAddressInput.address2"
-        name="normalAddressInput.address2"
-        placeholder="Address, Line 2"
-        value=""
-      />
-    </div>
-    <div
-      class="envoc-form-string-group envoc-form-input-group envoc-form-group envoc-form-required"
-    >
-      <div
-        id="normaladdressinput.city-error-scroll-target"
-        style="display: none;"
-      />
-      <label
-        for="normalAddressInput.city"
-      >
-        City
-      </label>
-      <input
-        aria-invalid="false"
-        class="envoc-form-string-group envoc-form-input-group"
-        id="normalAddressInput.city"
-        name="normalAddressInput.city"
-        placeholder="City"
-        value=""
-      />
-    </div>
-    <div
-      class="envoc-form-select-group envoc-form-group envoc-form-required"
-    >
-      <div
-        id="normaladdressinput.state-error-scroll-target"
-        style="display: none;"
-      />
-      <label
-        for="normalAddressInput.state"
-      >
-        State
-      </label>
-      <div
-        class="envoc-form-select-group css-b62m3t-container"
-        id="normalAddressInput.state"
-      >
-        <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-13cymwt-control"
-        >
-          <div
-            class="react-select__value-container css-16674sh-Component"
-          >
-            <div
-              class="react-select__placeholder css-1jqq78o-placeholder"
-              id="react-select-3-placeholder"
-            >
-              State
-            </div>
-            <div
-              class="react-select__input-container css-d9r47t-Component"
-              data-value=""
-            >
-              <input
-                aria-autocomplete="list"
-                aria-describedby="react-select-3-placeholder"
-                aria-expanded="false"
-                aria-haspopup="true"
-                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-1u9des2-indicatorSeparator"
-            />
-            <div
-              aria-hidden="true"
-              class="react-select__indicator react-select__dropdown-indicator css-1xc3v61-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="envoc-form-string-group envoc-form-input-group envoc-form-group envoc-form-required"
-    >
-      <div
-        id="normaladdressinput.zipcode-error-scroll-target"
-        style="display: none;"
-      />
-      <label
-        for="normalAddressInput.zipCode"
-      >
-        Zip
-      </label>
-      <input
-        aria-invalid="false"
-        class="envoc-form-string-group envoc-form-input-group"
-        id="normalAddressInput.zipCode"
-        name="normalAddressInput.zipCode"
-        placeholder="Zip"
-        value=""
-      />
-    </div>
-  </form>
-</DocumentFragment>
-`;

package/src/ConfirmBaseForm/ConfirmBaseForm.test.tsx

@@ -1,24 +0,0 @@
-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

@@ -1,74 +0,0 @@
-import React, { MouseEventHandler } from 'react';
-import { clsx } from 'clsx';
-import { useAxiosRequest, useAxiosRequestProps } from 'envoc-request';
-import { FormDefaults } from '../FormDefaults';
-
-// 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 {
-  /** Function to run when cancel button is clicked. */
-  handleCancel?: MouseEventHandler<HTMLButtonElement>;
-  /** Axios request upon confirmation */
-  request: useAxiosRequestProps;
-  style?: React.CSSProperties;
-  /** `<h3/>` title text on top of the form. */
-  title?: string;
-  /** Custom confirm button text.
-   * @defaultValue `Confirm`
-   */
-  confirmButtonText?: string;
-  /** CSS class for the buttons. */
-  confirmButtonClass?: string;
-  /** Any components to be rendered in between the title and the buttons. */
-  children?: React.ReactNode;
-}
-
-// TODO: ask about how we should use 'children'
-/**
- * Confimation dialog. Navigates to a different route to allow the user to either confirm or cancel an action.
- * Commonly used for confirming delete and archive.
- *
- * See `<ConfirmDeleteForm/>` if the confirmation is specifically for deletion.
- */
-export default function ConfirmBaseForm({
-  handleCancel,
-  request,
-  style,
-  title,
-  confirmButtonText,
-  confirmButtonClass,
-  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={clsx(
-          confirmButtonClass ??
-            FormDefaults.cssClassPrefix + 'confirm-base-form-confirm-button'
-        )}
-        type="button"
-        onClick={webRequest.submitRequest}>
-        {confirmButtonText ?? 'Confirm'}
-      </button>
-      <button
-        className={clsx(
-          FormDefaults.cssClassPrefix + 'confirm-base-form-cancel-button'
-        )}
-        type="button"
-        onClick={onCancel}>
-        Cancel
-      </button>
-    </div>
-  );
-  function goBack() {
-    window.history.back();
-  }
-}

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

@@ -1,23 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ConfirmBaseForm has matching snapshot 1`] = `
-<DocumentFragment>
-  <div
-    style="text-align: center;"
-  >
-    <h3 />
-    <button
-      class="envoc-form-confirm-base-form-confirm-button"
-      type="button"
-    >
-      Confirm
-    </button>
-    <button
-      class="envoc-form-confirm-base-form-cancel-button"
-      type="button"
-    >
-      Cancel
-    </button>
-  </div>
-</DocumentFragment>
-`;

package/src/ConfirmDeleteForm/ConfirmDeleteForm.test.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import { HashRouter } from 'react-router-dom';
-import { render } from '@testing-library/react';
-
-import ConfirmDeleteForm from './ConfirmDeleteForm';
-
-describe('ConfirmDeleteForm', () => {
-  it('Renders without error', () => {
-    render(
-      <HashRouter>
-        <ConfirmDeleteForm form="foo" />
-      </HashRouter>
-    );
-  });
-
-  it('has matching snapshot', () => {
-    const renderResult = render(
-      <HashRouter>
-        <ConfirmDeleteForm form="foo" />
-      </HashRouter>
-    );
-    expect(renderResult.asFragment()).toMatchSnapshot();
-  });
-});

package/src/ConfirmDeleteForm/ConfirmDeleteForm.tsx

@@ -1,87 +0,0 @@
-import React from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
-import { toast } from 'react-toastify';
-import { useAxiosRequestProps } from 'envoc-request';
-import ConfirmBaseForm, {
-  ConfirmBaseFormProps,
-} from '../ConfirmBaseForm/ConfirmBaseForm';
-import { FormDefaults } from '../FormDefaults';
-
-export interface ConfirmDeleteFormProps
-  extends Pick<ConfirmBaseFormProps, 'style'> {
-  /** Url to navigate to on success. */
-  successUrl?: string;
-  /** Form name (key) to apply the confirmation on. */
-  form: string;
-  /** Custom message to display.
-   * @defaultValue `Are you sure you want to delete this?`
-   */
-  title?: string;
-  /** Custom function when the axios request succeeds. */
-  handleComplete?: Function;
-  /** Custom function when the axios request fails. */
-  handleError?: Function;
-  /** Any components to be rendered in between the title and the buttons. */
-  children?: React.ReactNode;
-}
-
-/**
- * Deletion confirmation. Navigates to a different route to allow the user to either confirm or cancel an action.
- *
- * Wraps `<ConfirmBaseForm/>`.
- */
-export default function ConfirmDeleteForm({
-  successUrl,
-  form,
-  title,
-  handleComplete,
-  handleError,
-  children,
-  ...props
-}: ConfirmDeleteFormProps) {
-  const navigate = useNavigate();
-  const { entityId } = useParams();
-  const onComplete =
-    handleComplete ??
-    function () {
-      toast.success('Deleted!');
-      goBack();
-    };
-  const onError =
-    handleError ??
-    function (error: any) {
-      toast.error(
-        error.response?.data?.validationFailures[0]?.errorMessage ??
-          'Something went wrong talking to the portal. Contact support if this continues.'
-      );
-    };
-
-  const request = {
-    method: 'delete',
-    url: `/api/${form}/${entityId}`,
-    onComplete: onComplete,
-    onError: onError,
-  } as useAxiosRequestProps;
-
-  return (
-    <ConfirmBaseForm
-      request={request}
-      handleCancel={goBack}
-      title={title ?? 'Are you sure you want to delete this?'}
-      confirmButtonText="Yes"
-      confirmButtonClass={
-        FormDefaults.cssClassPrefix + 'confirm-delete-form-yes-button'
-      }
-      {...props}>
-      {children}
-    </ConfirmBaseForm>
-  );
-
-  function goBack() {
-    if (successUrl) {
-      navigate(successUrl);
-    } else {
-      navigate(-1);
-    }
-  }
-}

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

@@ -1,25 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ConfirmDeleteForm has matching snapshot 1`] = `
-<DocumentFragment>
-  <div
-    style="text-align: center;"
-  >
-    <h3>
-      Are you sure you want to delete this?
-    </h3>
-    <button
-      class="envoc-form-confirm-delete-form-yes-button"
-      type="button"
-    >
-      Yes
-    </button>
-    <button
-      class="envoc-form-confirm-base-form-cancel-button"
-      type="button"
-    >
-      Cancel
-    </button>
-  </div>
-</DocumentFragment>
-`;

package/src/DatePicker/DatePicker.test.tsx

@@ -1,48 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import StringDatePickerGroup from './StringDatePickerGroup';
-import FormTestBase from '../__Tests__/FormTestBase';
-
-//hack so the datepicker internals don't complain about this not existing in the context of jest
-HTMLCanvasElement.prototype.getContext = () => null;
-
-describe('IconInputGroup', () => {
-  it('renders without crashing', () => {
-    render(
-      <FormTestBase>
-        {({ Field }) => (
-          <Field
-            name="favoriteDate"
-            Component={StringDatePickerGroup}
-            label="Favorite Date"
-            monthPlaceholder="mm"
-            dayPlaceholder="dd"
-            yearPlaceholder="yyyy"
-            maxDate={new Date('9/23/2023')}
-            minDate={new Date('6/22/2022')}
-          />
-        )}
-      </FormTestBase>
-    );
-  });
-
-  it('has matching snapshot', () => {
-    const renderResult = render(
-      <FormTestBase>
-        {({ Field }) => (
-          <Field
-            name="favoriteDate"
-            Component={StringDatePickerGroup}
-            label="Favorite Date"
-            monthPlaceholder="mm"
-            dayPlaceholder="dd"
-            yearPlaceholder="yyyy"
-            maxDate={new Date('9/23/2023')}
-            minDate={new Date('6/22/2022')}
-          />
-        )}
-      </FormTestBase>
-    );
-    expect(renderResult.asFragment()).toMatchSnapshot();
-  });
-});