envoc-form 3.3.0 → 4.0.1-2

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

package/src/Select/SelectGroup.tsx

@@ -0,0 +1,106 @@
+import { default as ReactSelect } from 'react-select';
+import classNames from 'classnames';
+import { InjectedFieldProps } from '../Field/InjectedFieldProps';
+import Group, { GroupProps } from '../Group';
+
+export interface SelectOption<TValue> {
+  value: (TValue extends Array<infer P> ? P : TValue) | undefined;
+  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>,
+    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: SelectOption<TValue>[] | OptionsUseServiceResult<TValue>;
+  multiple: TValue extends Array<any> ? true : false;
+  placeholder?: string;
+}
+
+// TODO: we could also name this "ReactSelectGroup" or similar but the types are strongly defined now so kept the names consistent
+export default function SelectGroup<TValue>({
+  input,
+  meta,
+  className,
+  options,
+  multiple,
+  placeholder,
+  ...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
+      {...rest}
+      input={input}
+      meta={meta}
+      className={classNames(
+        className,
+        { multiple, 'is-loading': isLoading },
+        'select-group'
+      )}>
+      <ReactSelect<
+        Partial<SelectOption<TValue>>,
+        TValue extends Array<any> ? true : false
+      >
+        inputId={input.id}
+        isMulti={multiple}
+        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={classNames(className, 'select-group')}
+        classNamePrefix="react-select"
+        menuPortalTarget={document.body}
+        menuPlacement="auto"
+        placeholder={placeholder}
+      />
+    </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);
+  }
+}

package/src/Select/SelectGroupPropsHelper.ts

@@ -0,0 +1,4 @@
+import { SelectGroupProps } from './SelectGroup';
+
+export interface SelectGroupPropsHelper<T>
+  extends Omit<SelectGroupProps<T>, 'multiple'> {}

package/src/Select/StringSelectGroup.tsx

@@ -0,0 +1,14 @@
+import SelectGroup from './SelectGroup';
+import { SelectGroupPropsHelper } from './SelectGroupPropsHelper';
+
+export interface MultiStringSelectGroupProps
+  extends SelectGroupPropsHelper<string[]> {}
+export function MultiStringSelectGroup(props: MultiStringSelectGroupProps) {
+  return <SelectGroup multiple={true} {...props} />;
+}
+
+export interface SingleStringSelectGroupProps
+  extends SelectGroupPropsHelper<string> {}
+export function SingleStringSelectGroup(props: SingleStringSelectGroupProps) {
+  return <SelectGroup multiple={false} {...props} />;
+}

package/src/Select/__tests__/BooleanSelectGroup.test.tsx

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

package/src/Select/__tests__/NumberSelectGroup.test.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import FormTestBase from '../../__Tests__/FormTestBase';
+import {
+  MultiNumberSelectGroup,
+  SingleNumberSelectGroup,
+} from '../NumberSelectGroup';
+
+describe('SingleNumberSelectGroup', () => {
+  it('renders without crashing', () => {
+    render(
+      <FormTestBase>
+        {({ Field }) => (
+          <Field
+            name="favoriteNumber"
+            Component={SingleNumberSelectGroup}
+            label="Favorite Number"
+            options={[
+              { label: 'I like one', value: 1 },
+              { label: 'Occasionally two', value: 2 },
+              { label: 'Forever three', value: 3 },
+            ]}
+          />
+        )}
+      </FormTestBase>
+    );
+  });
+
+  it('has matching snapshot', () => {
+    const renderResult = render(
+      <FormTestBase>
+        {({ Field }) => (
+          <Field
+            name="favoriteNumber"
+            Component={SingleNumberSelectGroup}
+            label="Favorite Number"
+            options={[
+              { label: 'I like one', value: 1 },
+              { label: 'Occasionally two', value: 2 },
+              { label: 'Forever three', value: 3 },
+            ]}
+          />
+        )}
+      </FormTestBase>
+    );
+    expect(renderResult.asFragment()).toMatchSnapshot();
+  });
+});
+
+describe('MultiNumberSelectGroup', () => {
+  it('renders without crashing', () => {
+    render(
+      <FormTestBase>
+        {({ Field }) => (
+          <Field
+            name="userRoles"
+            Component={MultiNumberSelectGroup}
+            label="Favorite Number"
+            options={[
+              { label: 'Tyrannosaurus Rex', value: 1 },
+              { label: 'Stegosaurus', value: 2 },
+            ]}
+          />
+        )}
+      </FormTestBase>
+    );
+  });
+
+  it('has matching snapshot', () => {
+    const renderResult = render(
+      <FormTestBase>
+        {({ Field }) => (
+          <Field
+            name="userRoles"
+            Component={MultiNumberSelectGroup}
+            label="Favorite Number"
+            options={[
+              { label: 'Tyrannosaurus Rex', value: 1 },
+              { label: 'Stegosaurus', value: 2 },
+            ]}
+          />
+        )}
+      </FormTestBase>
+    );
+    expect(renderResult.asFragment()).toMatchSnapshot();
+  });
+});

package/src/Select/__tests__/StringSelectGroup.test.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import FormTestBase from '../../__Tests__/FormTestBase';
+import {
+  MultiStringSelectGroup,
+  SingleStringSelectGroup,
+} from '../StringSelectGroup';
+
+describe('SingleStringSelectGroup', () => {
+  it('renders without crashing', () => {
+    render(
+      <FormTestBase>
+        {({ Field }) => (
+          <Field
+            name="favoriteColor"
+            Component={SingleStringSelectGroup}
+            label="Favorite Color"
+            options={[
+              { label: 'Blue', value: 'Blue' },
+              { label: 'Green', value: 'Green' },
+              { label: 'Red', value: 'Red' },
+            ]}
+          />
+        )}
+      </FormTestBase>
+    );
+  });
+
+  it('has matching snapshot', () => {
+    const renderResult = render(
+      <FormTestBase>
+        {({ Field }) => (
+          <Field
+            name="favoriteColor"
+            Component={SingleStringSelectGroup}
+            label="Favorite Color"
+            options={[
+              { label: 'Blue', value: 'Blue' },
+              { label: 'Green', value: 'Green' },
+              { label: 'Red', value: 'Red' },
+            ]}
+          />
+        )}
+      </FormTestBase>
+    );
+    expect(renderResult.asFragment()).toMatchSnapshot();
+  });
+});
+
+describe('MultiStringSelectGroup', () => {
+  it('renders without crashing', () => {
+    render(
+      <FormTestBase>
+        {({ Field }) => (
+          <Field
+            name="favoriteColors"
+            Component={MultiStringSelectGroup}
+            label="Favorite Color"
+            options={[
+              { label: 'Blue', value: 'Blue' },
+              { label: 'Green', value: 'Green' },
+              { label: 'Red', value: 'Red' },
+            ]}
+          />
+        )}
+      </FormTestBase>
+    );
+  });
+
+  it('has matching snapshot', () => {
+    const renderResult = render(
+      <FormTestBase>
+        {({ Field }) => (
+          <Field
+            name="favoriteColors"
+            Component={MultiStringSelectGroup}
+            label="Favorite Color"
+            options={[
+              { label: 'Blue', value: 'Blue' },
+              { label: 'Green', value: 'Green' },
+              { label: 'Red', value: 'Red' },
+            ]}
+          />
+        )}
+      </FormTestBase>
+    );
+    expect(renderResult.asFragment()).toMatchSnapshot();
+  });
+});

package/src/Select/__tests__/__snapshots__/BooleanSelectGroup.test.tsx.snap

@@ -0,0 +1,99 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BooleanSelectGroup has matching snapshot 1`] = `
+<DocumentFragment>
+  <form
+    action="#"
+  >
+    <div
+      class="select-group group"
+    >
+      <div
+        id="allowlogin-error-scroll-target"
+        style="display: none;"
+      />
+      <label
+        for="allowLogin"
+      >
+        Allow Login
+      </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"
+            >
+              Select...
+            </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="allowLogin"
+                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>
+  </form>
+</DocumentFragment>
+`;