envoc-form 5.0.9 → 6.0.1-1

package/src/Input/StringInputGroup.tsx

@@ -1,50 +0,0 @@
-import React, { LegacyRef } from 'react';
-import { clsx } from 'clsx';
-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={clsx(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__/CheckboxInputGroup.test.tsx

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

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__/CheckboxInputGroup.test.tsx.snap

@@ -1,33 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CheckboxInputGroup has matching snapshot 1`] = `
-<DocumentFragment>
-  <form
-    action="#"
-    class="envoc-form-form"
-  >
-    <div
-      class="envoc-form-checkbox-group label-on-right envoc-form-group"
-    >
-      <div
-        id="ismusicenjoyer-error-scroll-target"
-        style="display: none;"
-      />
-      <div
-        class="envoc-form-checkbox-group-input"
-      >
-        <input
-          aria-invalid="false"
-          class="envoc-form-checkbox-group"
-          id="isMusicEnjoyer"
-          name="isMusicEnjoyer"
-          type="checkbox"
-        />
-        <label
-          for="isMusicEnjoyer"
-        />
-      </div>
-    </div>
-  </form>
-</DocumentFragment>
-`;

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;
-}

package/src/Normalization/normalizers.ts

@@ -1,44 +0,0 @@
-/** Normalizer for converting a string into a valid phone number. */
-export const phoneNumber = (value: string | undefined | null) => {
-  if (!value) {
-    return undefined;
-  }
-
-  const onlyNums = value.replace(/[^\d]/g, '');
-  if (onlyNums.length <= 3) {
-    return onlyNums;
-  }
-  if (onlyNums.length <= 7) {
-    return `${onlyNums.slice(0, 3)}-${onlyNums.slice(3)}`;
-  }
-  if (onlyNums.length <= 10) {
-    return `${onlyNums.slice(0, 3)}-${onlyNums.slice(3, 6)}-${onlyNums.slice(
-      6,
-      10
-    )}`;
-  }
-  if (onlyNums.length <= 13) {
-    const countryCodeLength = onlyNums.length - 10;
-    return `+${onlyNums.slice(0, countryCodeLength)} ${onlyNums.slice(
-      countryCodeLength,
-      3 + countryCodeLength
-    )}-${onlyNums.slice(
-      3 + countryCodeLength,
-      6 + countryCodeLength
-    )}-${onlyNums.slice(6 + countryCodeLength, onlyNums.length)}`;
-  }
-
-  return onlyNums;
-};
-
-/** Normalizer for converting a string into a valid zip code. Allows for XXXXX and XXXXX-XXXX format. */
-export const zipCode = (value: string | undefined | null) => {
-  if (!value) {
-    return undefined;
-  }
-  const onlyNums = value.replace(/[^\d]/g, '');
-  if (onlyNums.length > 5) {
-    return onlyNums.substring(0, 5) + '-' + onlyNums.substring(5, 9);
-  }
-  return onlyNums;
-};

package/src/Select/BooleanSelectGroup.tsx

@@ -1,28 +0,0 @@
-import SelectGroup, { SelectOption } from './SelectGroup';
-import { SelectGroupPropsHelper } from './SelectGroupPropsHelper';
-
-const booleanOptions: SelectOption<boolean>[] = [
-  {
-    label: 'Yes',
-    value: true,
-  },
-  {
-    label: 'No',
-    value: false,
-  },
-];
-
-export interface BooleanSelectGroupProps
-  extends Omit<SelectGroupPropsHelper<boolean | undefined | null>, 'options'> {
-  options?: SelectOption<boolean>[];
-}
-/** A `<SelectGroup/>` dropdown with two options. Default options are 'Yes' and 'No' with values of `true` and `false`. */
-export function BooleanSelectGroup(props: BooleanSelectGroupProps) {
-  return (
-    <SelectGroup
-      multiple={false}
-      {...props}
-      options={props.options ?? booleanOptions}
-    />
-  );
-}

package/src/Select/NumberSelectGroup.tsx

@@ -1,16 +0,0 @@
-import SelectGroup from './SelectGroup';
-import { SelectGroupPropsHelper } from './SelectGroupPropsHelper';
-
-export interface MultiNumberSelectGroupProps
-  extends SelectGroupPropsHelper<number[] | undefined | null> {}
-/** A `<SelectGroup/>` dropdown with values as numbers. Many options can be selected at a time. */
-export function MultiNumberSelectGroup(props: MultiNumberSelectGroupProps) {
-  return <SelectGroup multiple={true} {...props} />;
-}
-
-export interface SingleNumberSelectGroupProps
-  extends SelectGroupPropsHelper<number | undefined | null> {}
-/** A `<SelectGroup/>` dropdown with values as numbers. Only one option can be selected at a time. */
-export function SingleNumberSelectGroup(props: SingleNumberSelectGroupProps) {
-  return <SelectGroup multiple={false} {...props} />;
-}

package/src/Select/SelectGroup.tsx

@@ -1,132 +0,0 @@
-import { default as ReactSelect } from 'react-select';
-import { clsx } from 'clsx';
-import { InjectedFieldProps } from '../Field/InjectedFieldProps';
-import { FormDefaults } from '../FormDefaults';
-import Group, { GroupProps } from '../Group';
-
-export interface SelectOption<TValue> {
-  /** Value for the select. This will be sent to the API. */
-  value: (TValue extends Array<infer P> ? P : TValue) | undefined;
-  /** Label for the select. This is displayed to the user. */
-  label: string;
-}
-
-// types roughly like the useService (envoc-core) result
-interface OptionsApiResult<TValue> {
-  // we must apply Partial here because all results from template code gen are optional
-  result?: Partial<SelectOption<TValue>>[];
-}
-
-interface OptionsUseServiceResult<TValue> {
-  loading?: boolean;
-  // we must apply Partial here because all results from template code gen are optional
-  resp?: Partial<SelectOption<TValue>>[] | OptionsApiResult<TValue> | null;
-  error?: any;
-}
-
-export interface SelectGroupProps<TValue>
-  extends InjectedFieldProps<TValue | undefined | null>,
-    Omit<GroupProps, 'input' | 'meta' | 'children'> {
-  // allows for "useService" or other handles to control the data - including cache
-  // TODO: do we still want a version of select that has a "url" or maybe a promise func or something?
-  // eventually we can just add the shape of, say, useQuery (TanStack) to the union type
-  /** Options for the dropdown. Includes the label and value. */
-  options: SelectOption<TValue>[] | OptionsUseServiceResult<TValue>;
-  /** Whether the user should be able to have multiple values selected. */
-  multiple: TValue extends Array<any> ? true : false;
-  /** Text diplayed when no value is selected. */
-  placeholder?: string;
-  /** allows the select value to be cleared */
-  isClearable?: boolean;
-}
-
-// TODO: we could also name this "ReactSelectGroup" or similar but the types are strongly defined now so kept the names consistent
-/** Generic select dropdown. Uses [react-select](https://react-select.com/home). */
-export default function SelectGroup<TValue>({
-  input,
-  meta,
-  className,
-  required,
-  disabled,
-  options,
-  multiple,
-  placeholder,
-  isClearable,
-  label,
-  helpText,
-  ...rest
-}: SelectGroupProps<TValue>) {
-  const effectiveOptions: Partial<SelectOption<TValue>>[] = !options
-    ? []
-    : Array.isArray(options)
-    ? options
-    : 'resp' in options &&
-      !!options.resp &&
-      'result' in options.resp &&
-      !!options.resp.result
-    ? options.resp.result
-    : 'resp' in options && !!options.resp && Array.isArray(options.resp)
-    ? options.resp
-    : [];
-
-  const isLoading =
-    (options && 'loading' in options && options.loading) || false;
-
-  return (
-    <Group
-      input={input}
-      meta={meta}
-      label={label}
-      helpText={helpText}
-      required={required}
-      disabled={disabled}
-      className={clsx(
-        className,
-        {
-          [FormDefaults.cssClassPrefix + 'multiple']: multiple,
-          [FormDefaults.cssClassPrefix + 'loading']: isLoading,
-        },
-        FormDefaults.cssClassPrefix + 'select-group'
-      )}>
-      <ReactSelect<
-        Partial<SelectOption<TValue>>,
-        TValue extends Array<any> ? true : false
-      >
-        {...rest}
-        inputId={input.id}
-        isMulti={multiple}
-        isDisabled={disabled}
-        options={effectiveOptions}
-        onBlur={input.onBlur}
-        value={getValue()}
-        onChange={(e: any) => {
-          if (multiple === true) {
-            input.onChange(e?.map((x: any) => x.value));
-          } else {
-            input.onChange(e?.value as any);
-          }
-        }}
-        getOptionLabel={(option) => option?.label ?? ''}
-        className={clsx(
-          className,
-          FormDefaults.cssClassPrefix + 'select-group'
-        )}
-        classNamePrefix="react-select"
-        menuPortalTarget={document.body}
-        menuPlacement="auto"
-        placeholder={placeholder}
-        isClearable={isClearable}
-      />
-    </Group>
-  );
-
-  function getValue() {
-    if (multiple) {
-      return effectiveOptions.filter(
-        (o) =>
-          Array.isArray(input.value) && !!input.value.find((x) => o.value === x)
-      );
-    }
-    return effectiveOptions.find((o) => o.value === input.value);
-  }
-}