envoc-form 5.0.3 → 5.0.4-0

package/src/Input/IconInputGroup.tsx

@@ -1,54 +0,0 @@
-import React, { LegacyRef } from 'react';
-import classNames from 'classnames';
-import InputGroupWithRef, { InputGroupProps } from './InputGroup';
-import { FormDefaults } from '../FormDefaults';
-
-// TODO: make className tailwind-able instead of css. make it typeof string ????
-// or should we just give a div a className and let each project decide? (this seems to be the patern)
-export interface IconInputGroupProps
-  extends Omit<
-    InputGroupProps<string | undefined | null>,
-    'onChange' | 'type' | 'value'
-  > {
-  type?: 'color' | 'email' | 'search' | 'tel' | 'text' | 'url';
-  /** Icon to display on the input group. */
-  icon: React.ReactNode;
-  /** Text to display after the input group to give more information to the user. */
-  helpText?: string;
-}
-
-function IconInputGroup(
-  { icon, className, ...rest }: IconInputGroupProps,
-  ref: LegacyRef<HTMLInputElement>
-) {
-  const { input } = rest;
-
-  return (
-    <>
-      <InputGroupWithRef
-        icon={icon}
-        ref={ref}
-        className={classNames(
-          className,
-          FormDefaults.cssClassPrefix + 'icon-input-group'
-        )}
-        value={input.value ?? ''}
-        onChange={(e) => {
-          if (!e.target.value) {
-            input.onChange(undefined);
-          } else {
-            input.onChange(e.target.value);
-          }
-        }}
-        {...rest}
-      />
-    </>
-  );
-}
-
-/** Input group with an icon. */
-const IconInputGroupWithRef = React.forwardRef(
-  IconInputGroup
-) as React.ComponentType<IconInputGroupProps>;
-
-export default IconInputGroupWithRef;

package/src/Input/InputGroup.tsx

@@ -1,72 +0,0 @@
-import React, { ChangeEventHandler, LegacyRef } from 'react';
-import classNames from 'classnames';
-import { InjectedFieldProps } from '../Field/InjectedFieldProps';
-import { FormDefaults } from '../FormDefaults';
-import Group, { GroupProps } from '../Group';
-
-export interface InputGroupProps<TValue>
-  extends InjectedFieldProps<TValue>,
-    Omit<
-      React.HTMLProps<HTMLInputElement>,
-      | keyof InjectedFieldProps<any>
-      | 'children'
-      | 'className'
-      | 'label'
-      | 'value'
-    >,
-    Omit<GroupProps, keyof InjectedFieldProps<any> | 'children'> {
-  onChange: ChangeEventHandler<HTMLInputElement>;
-  value: string | number | null | undefined;
-  icon?: React.ReactNode;
-}
-
-function InputGroup<TValue>(
-  {
-    input,
-    meta,
-    label,
-    helpText,
-    className,
-    required,
-    disabled,
-    onChange,
-    value,
-    icon,
-    ...rest
-  }: InputGroupProps<TValue>,
-  ref: LegacyRef<HTMLInputElement>
-) {
-  return (
-    <Group
-      input={input}
-      meta={meta}
-      required={required}
-      disabled={disabled}
-      label={label}
-      helpText={helpText}
-      className={classNames(
-        className,
-        FormDefaults.cssClassPrefix + 'input-group'
-      )}>
-      {icon}
-      <input
-        {...input}
-        {...rest}
-        aria-invalid={!!meta.error}
-        aria-errormessage={!!meta.error ? `${input.name}-error` : undefined}
-        value={value ?? ''}
-        onChange={onChange}
-        ref={ref}
-        className={classNames(
-          className,
-          FormDefaults.cssClassPrefix + 'input-group'
-        )}
-      />
-    </Group>
-  );
-}
-
-/** Generic controlled `<input/>` wrapped by a `<Group/>` */
-const InputGroupWithRef = React.forwardRef(InputGroup) as typeof InputGroup;
-
-export default InputGroupWithRef;

package/src/Input/MoneyInputGroup.tsx

@@ -1,50 +0,0 @@
-import React, { LegacyRef } from 'react';
-import classNames from 'classnames';
-import InputGroup, { InputGroupProps } from './InputGroup';
-import { FormDefaults } from '../FormDefaults';
-
-export interface MoneyInputGroupProps
-  extends Omit<
-    InputGroupProps<number | undefined | null>,
-    'onChange' | 'type' | 'value'
-  > {
-  /** Custom parsing function when the value changes. */
-  parseFunc?: typeof parseInt | typeof parseFloat;
-}
-
-function MoneyInputGroup(
-  { parseFunc, className, ...rest }: MoneyInputGroupProps,
-  ref: LegacyRef<HTMLInputElement>
-) {
-  const effectiveParse = parseFunc ?? parseFloat;
-  const { input } = rest;
-
-  return (
-    <InputGroup
-      ref={ref}
-      step={0.01}
-      min={0}
-      {...rest}
-      type="number"
-      className={classNames(
-        className,
-        FormDefaults.cssClassPrefix + 'money-group'
-      )}
-      value={input.value || ''}
-      onChange={(e) => {
-        if (!e.target.value) {
-          input.onChange(undefined);
-        } else {
-          input.onChange(effectiveParse(e.target.value));
-        }
-      }}
-    />
-  );
-}
-
-/** Input group for inputting money. */
-const MoneyInputGroupWithRef = React.forwardRef(
-  MoneyInputGroup
-) as React.FunctionComponent<MoneyInputGroupProps>;
-
-export default MoneyInputGroupWithRef;

package/src/Input/NumberInputGroup.tsx

@@ -1,48 +0,0 @@
-import React, { LegacyRef } from 'react';
-import classNames from 'classnames';
-import InputGroup, { InputGroupProps } from './InputGroup';
-import { FormDefaults } from '../FormDefaults';
-
-export interface NumberInputGroupProps
-  extends Omit<
-    InputGroupProps<number | undefined | null>,
-    'onChange' | 'type' | 'value'
-  > {
-  /** Custom parsing function when the value changes. */
-  parseFunc?: typeof parseInt | typeof parseFloat;
-}
-
-function NumberInputGroup(
-  { parseFunc, className, ...rest }: NumberInputGroupProps,
-  ref: LegacyRef<HTMLInputElement>
-) {
-  const effectiveParse = parseFunc ?? parseFloat;
-  const { input } = rest;
-
-  return (
-    <InputGroup
-      ref={ref}
-      {...rest}
-      type="number"
-      className={classNames(
-        className,
-        FormDefaults.cssClassPrefix + 'number-group'
-      )}
-      value={input.value || ''}
-      onChange={(e) => {
-        if (!e.target.value) {
-          input.onChange(undefined);
-        } else {
-          input.onChange(effectiveParse(e.target.value));
-        }
-      }}
-    />
-  );
-}
-
-/** Standard number input group. By default allows for float values. */
-const NumberInputGroupWithRef = React.forwardRef(
-  NumberInputGroup
-) as React.ComponentType<NumberInputGroupProps>;
-
-export default NumberInputGroupWithRef;

package/src/Input/PhoneNumberInputGroup.tsx

@@ -1,45 +0,0 @@
-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/StringInputGroup.tsx

@@ -1,53 +0,0 @@
-import React, { LegacyRef } from 'react';
-import classNames from 'classnames';
-import InputGroup, { InputGroupProps } from './InputGroup';
-import { FormDefaults } from '../FormDefaults';
-
-export interface StringInputGroupProps
-  extends Omit<
-    InputGroupProps<string | undefined | null>,
-    'onChange' | 'type' | 'value'
-  > {
-  type?:
-    | 'color'
-    | 'email'
-    | 'search'
-    | 'tel'
-    | 'text'
-    | 'url'
-    | 'password'
-    | 'textarea';
-}
-
-function StringInputGroup(
-  { className, ...rest }: StringInputGroupProps,
-  ref: LegacyRef<HTMLInputElement>
-) {
-  const { input } = rest;
-
-  return (
-    <InputGroup
-      ref={ref}
-      {...rest}
-      className={classNames(
-        className,
-        FormDefaults.cssClassPrefix + 'string-group'
-      )}
-      value={input.value ?? ''}
-      onChange={(e) => {
-        if (!e.target.value) {
-          input.onChange(undefined);
-        } else {
-          input.onChange(e.target.value);
-        }
-      }}
-    />
-  );
-}
-
-/** Standard string input group. */
-const StringInputGroupWithRef = React.forwardRef(
-  StringInputGroup
-) as React.ComponentType<StringInputGroupProps>;
-
-export default StringInputGroupWithRef;

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

@@ -1,35 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import FormTestBase from '../../__Tests__/FormTestBase';
-import IconInputGroup from '../IconInputGroup';
-
-describe('IconInputGroup', () => {
-  it('renders without crashing', () => {
-    render(
-      <FormTestBase>
-        {({ Field }) => (
-          <Field
-            name="nameWithIcon"
-            Component={IconInputGroup}
-            icon={<span>Pretend this is an icon</span>}
-          />
-        )}
-      </FormTestBase>
-    );
-  });
-
-  it('has matching snapshot', () => {
-    const renderResult = render(
-      <FormTestBase>
-        {({ Field }) => (
-          <Field
-            name="nameWithIcon"
-            Component={IconInputGroup}
-            icon={<span>Pretend this is an icon</span>}
-          />
-        )}
-      </FormTestBase>
-    );
-    expect(renderResult.asFragment()).toMatchSnapshot();
-  });
-});

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

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

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

@@ -1,35 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import FormTestBase from '../../__Tests__/FormTestBase';
-import NumberInputGroup from '../NumberInputGroup';
-
-describe('NumberInputGroup', () => {
-  it('renders without crashing', () => {
-    render(
-      <FormTestBase>
-        {({ Field }) => (
-          <Field
-            name="numberOfArms"
-            Component={NumberInputGroup}
-            label="Arm Count"
-          />
-        )}
-      </FormTestBase>
-    );
-  });
-
-  it('has matching snapshot', () => {
-    const renderResult = render(
-      <FormTestBase>
-        {({ Field }) => (
-          <Field
-            name="numberOfArms"
-            Component={NumberInputGroup}
-            label="Arm Count"
-          />
-        )}
-      </FormTestBase>
-    );
-    expect(renderResult.asFragment()).toMatchSnapshot();
-  });
-});

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

@@ -1,36 +0,0 @@
-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__/StringInputGroup.test.tsx

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

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

@@ -1,32 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`IconInputGroup has matching snapshot 1`] = `
-<DocumentFragment>
-  <form
-    action="#"
-    class="envoc-form-form"
-  >
-    <div
-      class="envoc-form-icon-input-group envoc-form-input-group envoc-form-group"
-    >
-      <div
-        id="namewithicon-error-scroll-target"
-        style="display: none;"
-      />
-      <label
-        for="nameWithIcon"
-      />
-      <span>
-        Pretend this is an icon
-      </span>
-      <input
-        aria-invalid="false"
-        class="envoc-form-icon-input-group envoc-form-input-group"
-        id="nameWithIcon"
-        name="nameWithIcon"
-        value=""
-      />
-    </div>
-  </form>
-</DocumentFragment>
-`;

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

@@ -1,34 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`MoneyInputGroup has matching snapshot 1`] = `
-<DocumentFragment>
-  <form
-    action="#"
-    class="envoc-form-form"
-  >
-    <div
-      class="something-here envoc-form-money-group envoc-form-input-group envoc-form-group"
-    >
-      <div
-        id="yearlysalaryusd-error-scroll-target"
-        style="display: none;"
-      />
-      <label
-        for="yearlySalaryUSD"
-      >
-        Salary
-      </label>
-      <input
-        aria-invalid="false"
-        class="something-here envoc-form-money-group envoc-form-input-group"
-        id="yearlySalaryUSD"
-        min="0"
-        name="yearlySalaryUSD"
-        step="0.01"
-        type="number"
-        value=""
-      />
-    </div>
-  </form>
-</DocumentFragment>
-`;

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

@@ -1,32 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NumberInputGroup has matching snapshot 1`] = `
-<DocumentFragment>
-  <form
-    action="#"
-    class="envoc-form-form"
-  >
-    <div
-      class="envoc-form-number-group envoc-form-input-group envoc-form-group"
-    >
-      <div
-        id="numberofarms-error-scroll-target"
-        style="display: none;"
-      />
-      <label
-        for="numberOfArms"
-      >
-        Arm Count
-      </label>
-      <input
-        aria-invalid="false"
-        class="envoc-form-number-group envoc-form-input-group"
-        id="numberOfArms"
-        name="numberOfArms"
-        type="number"
-        value=""
-      />
-    </div>
-  </form>
-</DocumentFragment>
-`;

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

@@ -1,33 +0,0 @@
-// 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/Input/__Tests__/__snapshots__/StringInputGroup.test.tsx.snap

@@ -1,31 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`StringInputGroup has matching snapshot 1`] = `
-<DocumentFragment>
-  <form
-    action="#"
-    class="envoc-form-form"
-  >
-    <div
-      class="envoc-form-string-group envoc-form-input-group envoc-form-group"
-    >
-      <div
-        id="name-error-scroll-target"
-        style="display: none;"
-      />
-      <label
-        for="name"
-      >
-        Name
-      </label>
-      <input
-        aria-invalid="false"
-        class="envoc-form-string-group envoc-form-input-group"
-        id="name"
-        name="name"
-        value=""
-      />
-    </div>
-  </form>
-</DocumentFragment>
-`;

package/src/Normalization/NormalizationFunction.ts

@@ -1,4 +0,0 @@
-/** Normalization of values */
-export interface NormalizationFunction<TValue> {
-  (value: TValue): TValue;
-}