envoc-form 3.1.0 → 4.0.1-0

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();
+  }
+}

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

@@ -7,13 +7,13 @@ exports[`ConfirmBaseForm has matching snapshot 1`] = `
   >
     <h3 />
     <button
-      class="btn btn-danger"
+      class="confirm-base-form-yes-button"
       type="button"
     >
       Yes
     </button>
     <button
-      class="btn btn-link"
+      class="confirm-base-form-cancel-button"
       type="button"
     >
       Cancel

package/src/ConfirmDeleteForm/{ConfirmDeleteForm.test.js → ConfirmDeleteForm.test.tsx}

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

package/src/ConfirmDeleteForm/ConfirmDeleteForm.tsx

@@ -0,0 +1,67 @@
+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';
+
+export interface ConfirmDeleteFormProps
+  extends Pick<ConfirmBaseFormProps, 'style'> {
+  successUrl?: string;
+  form: string;
+  title?: string;
+  handleComplete?: Function;
+  handleError?: Function;
+  children?: React.ReactNode;
+}
+
+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?'}
+      {...props}>
+      {children}
+    </ConfirmBaseForm>
+  );
+
+  function goBack() {
+    if (successUrl) {
+      navigate(successUrl);
+    } else {
+      navigate(-1);
+    }
+  }
+}

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

@@ -9,13 +9,13 @@ exports[`ConfirmDeleteForm has matching snapshot 1`] = `
       Are you sure you want to delete this?
     </h3>
     <button
-      class="btn btn-danger"
+      class="confirm-base-form-yes-button"
       type="button"
     >
       Yes
     </button>
     <button
-      class="btn btn-link"
+      class="confirm-base-form-cancel-button"
       type="button"
     >
       Cancel

package/src/DatePickerInput/DatePickerInput.test.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import DatePickerInput from './DatePickerInput';
+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 = () => {};
+
+describe('IconInputGroup', () => {
+  it('renders without crashing', () => {
+    render(
+      <FormTestBase>
+        {({ Field }) => (
+          <Field
+            name="favoriteDate"
+            Component={DatePickerInput}
+            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={DatePickerInput}
+            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();
+  });
+});

package/src/DatePickerInput/DatePickerInput.tsx

@@ -0,0 +1,85 @@
+import { useState } from 'react';
+import DatePicker, { DatePickerProps } from 'react-date-picker';
+import classnames from 'classnames';
+import parseISO from 'date-fns/parseISO';
+import { InjectedFieldProps } from '../Field/InjectedFieldProps';
+import Group, { GroupProps } from '../Group';
+
+// Docs for react-date-picker https://www.npmjs.com/package/react-date-picker
+
+// TODO: pick better home for this
+export interface DateOnly {
+  year?: number;
+  month?: number;
+  day?: number;
+}
+
+type InjectedDate = InjectedFieldProps<DateOnly | undefined>;
+
+export interface DatePickerInputProps
+  extends InjectedDate,
+    Omit<DatePickerProps, keyof InjectedDate | 'name' | 'value' | 'className'>,
+    Omit<GroupProps, keyof InjectedDate | 'children'> {}
+
+export default function DatePickerInput({
+  input,
+  meta,
+  label,
+  helpText,
+  className,
+  disabled,
+  ...rest
+}: DatePickerInputProps) {
+  const [displayDate, setDisplayDate] = useState<Date | null>(null);
+
+  function handleChange(e: DatePickerProps['value'] | undefined) {
+    const { onChange } = input;
+    if (onChange == null) {
+      return;
+    }
+
+    if (!e) {
+      onChange(undefined);
+      setDisplayDate(null);
+      return;
+    }
+
+    if (e instanceof Date) {
+      const parsedValue = parseISO(e.toISOString().split('T')[0]);
+
+      setDisplayDate(parsedValue);
+      onChange({
+        year: e.getFullYear(),
+        month: e.getMonth() + 1,
+        day: e.getDate(),
+      });
+    } else {
+      // e is instanceof Date[]
+      const parsedValue = parseISO(e[0].toISOString().split('T')[0]);
+
+      setDisplayDate(parsedValue);
+      onChange({
+        year: e[0].getFullYear(),
+        month: e[0].getMonth() + 1,
+        day: e[0].getDate(),
+      });
+    }
+  }
+
+  return (
+    <Group
+      input={input}
+      meta={meta}
+      label={label}
+      helpText={helpText}
+      className={classnames(className, 'date-picker')}
+      disabled={disabled}>
+      <DatePicker
+        {...rest}
+        className={classnames('date-picker', className)}
+        value={displayDate}
+        onChange={handleChange}
+      />
+    </Group>
+  );
+}

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

@@ -0,0 +1,151 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`IconInputGroup has matching snapshot 1`] = `
+<DocumentFragment>
+  <form
+    action="#"
+  >
+    <div
+      class="date-picker group"
+    >
+      <div
+        id="favoritedate-error-scroll-target"
+        style="display: none;"
+      />
+      <label
+        for="favoriteDate"
+      >
+        Favorite Date
+      </label>
+      <div
+        class="react-date-picker react-date-picker--closed react-date-picker--enabled date-picker"
+      >
+        <div
+          class="react-date-picker__wrapper"
+        >
+          <div
+            class="react-date-picker__inputGroup"
+          >
+            <input
+              max="2023-09-23"
+              min="2022-06-22"
+              name="date"
+              style="visibility: hidden; position: absolute; z-index: -999;"
+              type="date"
+              value=""
+            />
+            <input
+              autocomplete="off"
+              class="react-date-picker__inputGroup__input react-date-picker__inputGroup__month"
+              data-input="true"
+              inputmode="numeric"
+              max="12"
+              min="1"
+              name="month"
+              placeholder="mm"
+              type="number"
+              value=""
+            />
+            <span
+              class="react-date-picker__inputGroup__divider"
+            >
+              /
+            </span>
+            <input
+              autocomplete="off"
+              class="react-date-picker__inputGroup__input react-date-picker__inputGroup__day"
+              data-input="true"
+              inputmode="numeric"
+              max="31"
+              min="1"
+              name="day"
+              placeholder="dd"
+              type="number"
+              value=""
+            />
+            <span
+              class="react-date-picker__inputGroup__divider"
+            >
+              /
+            </span>
+            <input
+              autocomplete="off"
+              class="react-date-picker__inputGroup__input react-date-picker__inputGroup__year"
+              data-input="true"
+              inputmode="numeric"
+              max="2023"
+              min="2022"
+              name="year"
+              placeholder="yyyy"
+              step="1"
+              type="number"
+              value=""
+            />
+          </div>
+          <button
+            class="react-date-picker__clear-button react-date-picker__button"
+            type="button"
+          >
+            <svg
+              class="react-date-picker__clear-button__icon react-date-picker__button__icon"
+              height="19"
+              stroke="black"
+              stroke-width="2"
+              viewBox="0 0 19 19"
+              width="19"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <line
+                x1="4"
+                x2="15"
+                y1="4"
+                y2="15"
+              />
+              <line
+                x1="15"
+                x2="4"
+                y1="4"
+                y2="15"
+              />
+            </svg>
+          </button>
+          <button
+            class="react-date-picker__calendar-button react-date-picker__button"
+            type="button"
+          >
+            <svg
+              class="react-date-picker__calendar-button__icon react-date-picker__button__icon"
+              height="19"
+              stroke="black"
+              stroke-width="2"
+              viewBox="0 0 19 19"
+              width="19"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect
+                fill="none"
+                height="15"
+                width="15"
+                x="2"
+                y="2"
+              />
+              <line
+                x1="6"
+                x2="6"
+                y1="0"
+                y2="4"
+              />
+              <line
+                x1="13"
+                x2="13"
+                y1="0"
+                y2="4"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  </form>
+</DocumentFragment>
+`;

package/src/Field/CustomFieldInputProps.ts

@@ -0,0 +1,10 @@
+export interface CustomFieldInputProps<TValue> {
+  id: string;
+  name: string;
+  value: TValue;
+  // we want to be more strict than formik is for setting the value
+  onChange: (newValue: TValue) => void;
+
+  // we don't want controlled vs uncontrolled components to behave oddly
+  onBlur: () => void;
+}

package/src/Field/CustomFieldMetaProps.ts

@@ -0,0 +1,5 @@
+import { FieldMetaProps } from 'formik';
+
+export interface CustomFieldMetaProps<TValue> extends FieldMetaProps<TValue> {
+  warning: string | undefined;
+}