envoc-form 4.1.0 → 4.2.0

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

@@ -0,0 +1,216 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StringDateTimePickerGroup has matching snapshot 1`] = `
+<DocumentFragment>
+  <form
+    action="#"
+    class="envoc-form-form"
+  >
+    <div
+      class="envoc-form-date-time-picker envoc-form-group"
+    >
+      <div
+        id="createddatetime-error-scroll-target"
+        style="display: none;"
+      />
+      <label
+        for="createdDateTime"
+      >
+        Created Date Time
+      </label>
+      <div
+        class="react-datetime-picker react-datetime-picker--closed react-datetime-picker--enabled envoc-form-date-time-picker"
+        id="createdDateTime"
+      >
+        <div
+          class="react-datetime-picker__wrapper"
+        >
+          <div
+            class="react-datetime-picker__inputGroup"
+          >
+            <input
+              hidden=""
+              max="2023-09-23T00:00"
+              min="2022-06-22T00:00"
+              name="datetime"
+              step="60"
+              style="visibility: hidden; position: absolute; z-index: -999;"
+              type="datetime-local"
+              value=""
+            />
+            <input
+              autocomplete="off"
+              class="react-datetime-picker__inputGroup__input react-datetime-picker__inputGroup__month"
+              data-input="true"
+              inputmode="numeric"
+              max="12"
+              min="1"
+              name="month"
+              placeholder="mm"
+              type="number"
+              value=""
+            />
+            <span
+              class="react-datetime-picker__inputGroup__divider"
+            >
+              /
+            </span>
+            <input
+              autocomplete="off"
+              class="react-datetime-picker__inputGroup__input react-datetime-picker__inputGroup__day"
+              data-input="true"
+              inputmode="numeric"
+              max="31"
+              min="1"
+              name="day"
+              placeholder="dd"
+              type="number"
+              value=""
+            />
+            <span
+              class="react-datetime-picker__inputGroup__divider"
+            >
+              /
+            </span>
+            <input
+              autocomplete="off"
+              class="react-datetime-picker__inputGroup__input react-datetime-picker__inputGroup__year"
+              data-input="true"
+              inputmode="numeric"
+              max="2023"
+              min="2022"
+              name="year"
+              placeholder="yyyy"
+              step="1"
+              type="number"
+              value=""
+            />
+            <span
+              class="react-datetime-picker__inputGroup__divider"
+            >
+               
+            </span>
+            <input
+              autocomplete="off"
+              class="react-datetime-picker__inputGroup__input react-datetime-picker__inputGroup__hour"
+              data-input="true"
+              inputmode="numeric"
+              max="12"
+              min="1"
+              name="hour12"
+              placeholder="--"
+              type="number"
+              value=""
+            />
+            <span
+              class="react-datetime-picker__inputGroup__divider"
+            >
+              :
+            </span>
+            <input
+              autocomplete="off"
+              class="react-datetime-picker__inputGroup__input react-datetime-picker__inputGroup__minute"
+              data-input="true"
+              inputmode="numeric"
+              max="59"
+              min="0"
+              name="minute"
+              placeholder="--"
+              type="number"
+              value=""
+            />
+            <span
+              class="react-datetime-picker__inputGroup__divider"
+            >
+               
+            </span>
+            <select
+              class="react-datetime-picker__inputGroup__input react-datetime-picker__inputGroup__amPm"
+              data-input="true"
+              data-select="true"
+              name="amPm"
+            >
+              <option
+                value=""
+              >
+                --
+              </option>
+              <option
+                value="am"
+              >
+                AM
+              </option>
+              <option
+                value="pm"
+              >
+                PM
+              </option>
+            </select>
+          </div>
+          <button
+            class="react-datetime-picker__clear-button react-datetime-picker__button"
+            type="button"
+          >
+            <svg
+              class="react-datetime-picker__clear-button__icon react-datetime-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-datetime-picker__calendar-button react-datetime-picker__button"
+            type="button"
+          >
+            <svg
+              class="react-datetime-picker__calendar-button__icon react-datetime-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/Input/PhoneNumberInputGroup.tsx

@@ -0,0 +1,49 @@
+import React, { LegacyRef } from 'react';
+import classNames from 'classnames';
+import InputGroup, { InputGroupProps } from './InputGroup';
+import { FormDefaults } from '../FormDefaults';
+import { phoneNumber } from '../Normalization/normalizers';
+
+export interface PhoneNumberInputGroupProps
+  extends Omit<
+    InputGroupProps<string | undefined | null>,
+    'onChange' | 'type' | 'value'
+  > {}
+
+function PhoneNumberInputGroup(
+  { className, ...rest }: PhoneNumberInputGroupProps,
+  ref: LegacyRef<HTMLInputElement>
+) {
+  const { input } = rest;
+
+  return (
+    <InputGroup
+      ref={ref}
+      autoComplete="tel-national"
+      {...rest}
+      type="text"
+      className={classNames(
+        className,
+        FormDefaults.cssClassPrefix + 'phone-number-group'
+      )}
+      value={input.value ?? ''}
+      onChange={(e) => {
+        if (!e.target.value) {
+          input.onChange(undefined);
+        } else {
+          input.onChange(phoneNumber(e.target.value));
+        }
+      }}
+    />
+  );
+}
+
+/**A standard phone number input. Will display to the user in `+XXX XXX-XXX-XXXX` format as the number is being inputted.
+ * The data will get sent in the same format as displayed. Uses `normalizers.phoneNumber`.
+ * @default autoComplete="tel-national"
+ */
+const PhoneNumberInputGroupWithRef = React.forwardRef(
+  PhoneNumberInputGroup
+) as React.ComponentType<PhoneNumberInputGroupProps>;
+
+export default PhoneNumberInputGroupWithRef;

package/src/Input/__Tests__/PhoneNumberInputGroup.test.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import FormTestBase from '../../__Tests__/FormTestBase';
+import PhoneNumberInputGroup from '../PhoneNumberInputGroup';
+
+describe('PhoneNumberInputGroup', () => {
+  it('renders without crashing', () => {
+    render(
+      <FormTestBase>
+        {({ Field }) => (
+          <Field
+            name="phoneNumber"
+            Component={PhoneNumberInputGroup}
+            label="Phone Number"
+            className="something-here"
+          />
+        )}
+      </FormTestBase>
+    );
+  });
+
+  it('has matching snapshot', () => {
+    const renderResult = render(
+      <FormTestBase>
+        {({ Field }) => (
+          <Field
+            name="phoneNumber"
+            Component={PhoneNumberInputGroup}
+            label="Phone Number"
+            className="something-here"
+          />
+        )}
+      </FormTestBase>
+    );
+    expect(renderResult.asFragment()).toMatchSnapshot();
+  });
+});

package/src/Input/__Tests__/__snapshots__/PhoneNumberInputGroup.test.tsx.snap

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PhoneNumberInputGroup has matching snapshot 1`] = `
+<DocumentFragment>
+  <form
+    action="#"
+    class="envoc-form-form"
+  >
+    <div
+      class="something-here envoc-form-phone-number-group envoc-form-input-group envoc-form-group"
+    >
+      <div
+        id="phonenumber-error-scroll-target"
+        style="display: none;"
+      />
+      <label
+        for="phoneNumber"
+      >
+        Phone Number
+      </label>
+      <input
+        aria-invalid="false"
+        autocomplete="tel-national"
+        class="something-here envoc-form-phone-number-group envoc-form-input-group"
+        id="phoneNumber"
+        name="phoneNumber"
+        type="text"
+        value=""
+      />
+    </div>
+  </form>
+</DocumentFragment>
+`;

package/src/__Tests__/FormTestBase.tsx

@@ -57,6 +57,7 @@ export interface PersonDto {
   favoriteColor?: string;
   favoriteColors?: string[];
   favoriteNames?: string[];
+  createdDateTime?: string;
   allowLogin?: boolean;
   userRoles?: number[];
   profileImage?: any;

package/src/hooks/index.ts

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

package/src/hooks/useFormValue.ts

@@ -0,0 +1,16 @@
+import { useCallback } from 'react';
+import { FormBuilderProp } from 'Form/Form';
+import { useFormikContext } from 'formik';
+
+export default function useFormValue<
+  TForm extends object,
+  TPropKey extends keyof TForm
+>(formBuilder: FormBuilderProp<TForm>, fieldName: TPropKey) {
+  const { values, setFieldValue } = useFormikContext<TForm>();
+  const setValue = useCallback(
+    (value: TForm[TPropKey]) => setFieldValue(fieldName as string, value),
+    [fieldName, setFieldValue]
+  );
+
+  return [values[fieldName], setValue] as const;
+}

package/src/index.ts

@@ -27,6 +27,13 @@ export type { StringDatePickerGroupProps } from './DatePicker/StringDatePickerGr
 export { default as StringDateOnlyPickerGroup } from './DatePicker/StringDateOnlyPickerGroup';
 export type { StringDateOnlyPickerGroupProps } from './DatePicker/StringDateOnlyPickerGroup';
 
+// DateTime
+export { default as DateTimePickerGroup } from './DateTimePicker/DateTimePickerGroup';
+export type { DateTimePickerGroupProps } from './DateTimePicker/DateTimePickerGroup';
+
+export { default as StringDateTimePickerGroup } from './DateTimePicker/StringDateTimePickerGroup';
+export type { StringDateTimePickerGroupProps } from './DateTimePicker/StringDateTimePickerGroup';
+
 // Field
 export { default as Field } from './Field/Field';
 export type { FieldProps } from './Field/Field';
@@ -92,6 +99,9 @@ export type { MoneyInputGroupProps } from './Input/MoneyInputGroup';
 export { default as NumberInputGroup } from './Input/NumberInputGroup';
 export type { NumberInputGroupProps } from './Input/NumberInputGroup';
 
+export { default as PhoneNumberInputGroup } from './Input/PhoneNumberInputGroup';
+export type { PhoneNumberInputGroupProps } from './Input/PhoneNumberInputGroup';
+
 export { default as StringInputGroup } from './Input/StringInputGroup';
 export type { StringInputGroupProps } from './Input/StringInputGroup';