envoc-form 3.3.0 → 4.0.1-0

package/src/Group.tsx

@@ -0,0 +1,43 @@
+import classNames from 'classnames';
+import FieldErrorScrollTarget from './Field/FieldErrorScrollTarget';
+import { InjectedFieldProps } from './Field/InjectedFieldProps';
+
+export interface GroupProps extends InjectedFieldProps<any> {
+  className?: string;
+
+  children: React.ReactNode;
+
+  /** simple text label before the input */
+  label?: string;
+
+  /** simple helper text after the input*/
+  helpText?: string;
+
+  disabled?: boolean;
+}
+
+/** contains standard field bits like a label, helper text, error scroll target, validation message container, etc */
+export default function Group({
+  className,
+  children,
+  label,
+  helpText,
+  meta,
+  input,
+  disabled,
+}: GroupProps) {
+  return (
+    <div
+      className={classNames(className, 'group', {
+        'is-invalid': meta.error,
+        disabled: disabled,
+      })}>
+      <FieldErrorScrollTarget />
+      {meta.warning && <div className="warning">{meta.warning}</div>}
+      <label htmlFor={input.id}>{label}</label>
+      {children}
+      {meta.error && <div className="error">{meta.error}</div>}
+      {helpText && <div className="help">{helpText}</div>}
+    </div>
+  );
+}

package/src/Input/IconInputGroup.tsx

@@ -0,0 +1,48 @@
+import React, { LegacyRef } from 'react';
+import classNames from 'classnames';
+import InputGroupWithRef, { InputGroupProps } from './InputGroup';
+import useStandardFormInput from '../Field/useStandardField';
+
+// 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>,
+    'onChange' | 'type' | 'value'
+  > {
+  type?: 'color' | 'email' | 'search' | 'tel' | 'text' | 'url';
+  icon: React.ReactNode;
+  helpText?: string;
+}
+
+function IconInputGroup(
+  { icon, className, ...rest }: IconInputGroupProps,
+  ref: LegacyRef<HTMLInputElement>
+) {
+  const { input } = rest;
+
+  return (
+    <>
+      <InputGroupWithRef
+        icon={icon}
+        ref={ref}
+        className={classNames(className, 'icon-input-group')}
+        value={input.value || ''}
+        onChange={(e) => {
+          if (!e.target.value) {
+            input.onChange(undefined);
+          } else {
+            input.onChange(e.target.value);
+          }
+        }}
+        {...rest}
+      />
+    </>
+  );
+}
+
+const IconInputGroupWithRef = React.forwardRef(
+  IconInputGroup
+) as React.ComponentType<IconInputGroupProps>;
+
+export default IconInputGroupWithRef;

package/src/Input/InputGroup.tsx

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

package/src/Input/MoneyInputGroup.tsx

@@ -0,0 +1,44 @@
+import React, { LegacyRef } from 'react';
+import classNames from 'classnames';
+import InputGroup, { InputGroupProps } from './InputGroup';
+
+export interface MoneyInputGroupProps
+  extends Omit<
+    InputGroupProps<number | undefined>,
+    'onChange' | 'type' | 'value'
+  > {
+  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, 'money-group')}
+      value={input.value || ''}
+      onChange={(e) => {
+        if (!e.target.value) {
+          input.onChange(undefined);
+        } else {
+          input.onChange(effectiveParse(e.target.value));
+        }
+      }}
+    />
+  );
+}
+
+const MoneyInputGroupWithRef = React.forwardRef(
+  MoneyInputGroup
+) as React.FunctionComponent<MoneyInputGroupProps>;
+
+export default MoneyInputGroupWithRef;

package/src/Input/NumberInputGroup.tsx

@@ -0,0 +1,42 @@
+import React, { LegacyRef } from 'react';
+import classNames from 'classnames';
+import InputGroup, { InputGroupProps } from './InputGroup';
+
+export interface NumberInputGroupProps
+  extends Omit<
+    InputGroupProps<number | undefined>,
+    'onChange' | 'type' | 'value'
+  > {
+  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, 'number-group')}
+      value={input.value || ''}
+      onChange={(e) => {
+        if (!e.target.value) {
+          input.onChange(undefined);
+        } else {
+          input.onChange(effectiveParse(e.target.value));
+        }
+      }}
+    />
+  );
+}
+
+const NumberInputGroupWithRef = React.forwardRef(
+  NumberInputGroup
+) as React.ComponentType<NumberInputGroupProps>;
+
+export default NumberInputGroupWithRef;

package/src/Input/StringInputGroup.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

package/src/Normalization/NormalizationFunction.ts

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

package/src/{normalizers.js → Normalization/normalizers.ts}

@@ -1,6 +1,6 @@
-export const phoneNumber = (value) => {
+export const phoneNumber = (value: string | undefined) => {
   if (!value) {
-    return value;
+    return undefined;
   }
 
   const onlyNums = value.replace(/[^\d]/g, '');
@@ -17,7 +17,7 @@ export const phoneNumber = (value) => {
     )}`;
   }
   if (onlyNums.length <= 13) {
-    const countryCodeLength = onlyNums - 10;
+    const countryCodeLength = onlyNums.length - 10;
     return `+${onlyNums.slice(0, countryCodeLength)} ${onlyNums.slice(
       countryCodeLength,
       3 + countryCodeLength
@@ -30,9 +30,9 @@ export const phoneNumber = (value) => {
   return onlyNums;
 };
 
-export const zipCode = (value) => {
+export const zipCode = (value: string | undefined) => {
   if (!value) {
-    return value;
+    return undefined;
   }
   const onlyNums = value.replace(/[^\d]/g, '');
   if (onlyNums.length > 5) {

package/src/Select/BooleanSelectGroup.tsx

@@ -0,0 +1,27 @@
+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>, 'options'> {
+  options?: SelectOption<boolean>[];
+}
+export function BooleanSelectGroup(props: BooleanSelectGroupProps) {
+  return (
+    <SelectGroup
+      multiple={false}
+      {...props}
+      options={props.options ?? booleanOptions}
+    />
+  );
+}

package/src/Select/NumberSelectGroup.tsx

@@ -0,0 +1,14 @@
+import SelectGroup from './SelectGroup';
+import { SelectGroupPropsHelper } from './SelectGroupPropsHelper';
+
+export interface MultiNumberSelectGroupProps
+  extends SelectGroupPropsHelper<number[]> {}
+export function MultiNumberSelectGroup(props: MultiNumberSelectGroupProps) {
+  return <SelectGroup multiple={true} {...props} />;
+}
+
+export interface SingleNumberSelectGroupProps
+  extends SelectGroupPropsHelper<number> {}
+export function SingleNumberSelectGroup(props: SingleNumberSelectGroupProps) {
+  return <SelectGroup multiple={false} {...props} />;
+}