envoc-form 5.0.9 → 6.0.1-1

package/src/DatePicker/DatePickerGroup.tsx

@@ -1,115 +0,0 @@
-import { useEffect, useState } from 'react';
-import DatePicker, {
-  DatePickerProps,
-} from 'react-date-picker/dist/entry.nostyle';
-import { clsx } from 'clsx';
-import parseISO from 'date-fns/parseISO';
-import { InjectedFieldProps } from '../Field/InjectedFieldProps';
-import { FormDefaults } from '../FormDefaults';
-import Group, { GroupProps } from '../Group';
-
-export interface DatePickerGroupProps<T>
-  extends InjectedFieldProps<T | undefined | null>,
-    Omit<
-      DatePickerProps,
-      keyof InjectedFieldProps<T> | 'name' | 'value' | 'className'
-    >,
-    Omit<GroupProps, keyof InjectedFieldProps<T> | 'children'> {
-  convert: (arg: Date) => T;
-}
-
-/**
- * Field for inputting dates. Uses `<Group/>` and `<DatePicker/>`.
- *
- * Uses [react-date-picker](https://www.npmjs.com/package/react-date-picker)
- */
-export default function DatePickerGroup<T>({
-  input,
-  meta,
-  label,
-  helpText,
-  className,
-  required,
-  disabled,
-  convert,
-  maxDate = new Date(9999, 11, 31),
-  minDate = new Date(1000, 0, 1),
-  ...rest
-}: DatePickerGroupProps<T>) {
-  const [displayDate, setDisplayDate] = useState<Date | null>(null);
-
-  useEffect(() => {
-    if (!input.value) {
-      setDisplayDate(null);
-    } else if (typeof input.value === 'string') {
-      if (input.value.indexOf('T') === -1) {
-        setDisplayDate(new Date(`${input.value}T00:00:00.000`));
-      } else {
-        setDisplayDate(new Date(input.value));
-      }
-    }
-  }, [setDisplayDate, input.value]);
-
-  return (
-    <Group
-      input={input}
-      meta={meta}
-      label={label}
-      helpText={helpText}
-      className={clsx(className, FormDefaults.cssClassPrefix + 'date-picker')}
-      required={required}
-      disabled={disabled}>
-      <DatePicker
-        {...rest}
-        className={clsx(FormDefaults.cssClassPrefix + 'date-picker', className)}
-        value={displayDate}
-        onChange={handleChange}
-        maxDate={maxDate}
-        minDate={minDate}
-        disabled={disabled}
-      />
-    </Group>
-  );
-
-  function handleChange(e: Date | Date[] | string | undefined) {
-    const { onChange } = input;
-    if (onChange === null) {
-      return;
-    }
-
-    if (!e) {
-      onChange(undefined);
-      setDisplayDate(null);
-      return;
-    } else if (typeof e === 'string') {
-      const parsedValue = parseISO(e.toString().split('T')[0]);
-      setDisplayDate(parsedValue);
-      onChange(convert(parsedValue));
-    } else if (e instanceof Date) {
-      const parsedValue = parseISO(
-        convertToTimeZoneInsensitiveISOString(e).split('T')[0]
-      );
-      setDisplayDate(parsedValue);
-      onChange(convert(parsedValue));
-    } else {
-      // e is instanceof Date[]
-      const parsedValue = parseISO(
-        convertToTimeZoneInsensitiveISOString(e[0]).split('T')[0]
-      );
-      setDisplayDate(parsedValue);
-      onChange(convert(parsedValue));
-    }
-  }
-}
-
-export function convertToTimeZoneInsensitiveISOString(date: Date): string {
-  const year = new Intl.DateTimeFormat('en', { year: 'numeric' })
-    .format(date)
-    .substring(0, 4)
-    .padStart(4, '0');
-  const month = new Intl.DateTimeFormat('en', { month: '2-digit' }).format(
-    date
-  );
-  const day = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(date);
-  return `${year}-${month}-${day}T00:00:00.000Z`;
-}

package/src/DatePicker/DatePickerHelper.ts

@@ -1,4 +0,0 @@
-import { DatePickerGroupProps } from './DatePickerGroup';
-
-export interface DatePickerHelper<T>
-  extends Omit<DatePickerGroupProps<T>, 'convert'> {}

package/src/DatePicker/StringDateOnlyPickerGroup.tsx

@@ -1,28 +0,0 @@
-import DatePickerGroup from './DatePickerGroup';
-import { DatePickerHelper } from './DatePickerHelper';
-
-export interface StringDateOnlyPickerGroupProps
-  extends DatePickerHelper<string | undefined | null> {}
-
-/**
- * Date picker input that consumes and outputs as a date only string in ISO format `YYYY-MM-DD`.
- *
- * Default display to the user is in `MM/DD/YYYY` format.
- */
-export default function StringDatePickerGroup(
-  props: StringDateOnlyPickerGroupProps
-) {
-  return <DatePickerGroup {...props} convert={convertToDateOnly} />;
-}
-
-function convertToDateOnly(arg: Date) {
-  const year = new Intl.DateTimeFormat('en', { year: 'numeric' })
-    .format(arg)
-    .padStart(4, '0');
-
-  const month = new Intl.DateTimeFormat('en', { month: '2-digit' }).format(arg);
-
-  const day = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(arg);
-
-  return `${year}-${month}-${day}`;
-}

package/src/DatePicker/StringDatePickerGroup.tsx

@@ -1,20 +0,0 @@
-import DatePickerGroup from './DatePickerGroup';
-import { DatePickerHelper } from './DatePickerHelper';
-
-export interface StringDatePickerGroupProps
-  extends DatePickerHelper<string | undefined | null> {}
-
-/**
- * Date picker input that consumes and outputs as a date only string in ISO format `YYYY-MM-DDTHH:mm:ss.sssZ` or `±YYYYYY-MM-DDTHH:mm:ss.sssZ`
- *
- * If you need `YYYY-MM-DD` format use `<StringDateOnlyPickerGroup/>`.
- */
-export default function StringDatePickerGroup(
-  props: StringDatePickerGroupProps
-) {
-  return <DatePickerGroup {...props} convert={convertToDateOnly} />;
-}
-
-function convertToDateOnly(arg: Date) {
-  return arg.toISOString();
-}

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

@@ -1,152 +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-date-picker envoc-form-group"
-    >
-      <div
-        id="favoritedate-error-scroll-target"
-        style="display: none;"
-      />
-      <label
-        for="favoriteDate"
-      >
-        Favorite Date
-      </label>
-      <div
-        class="react-date-picker react-date-picker--closed react-date-picker--enabled envoc-form-date-picker"
-      >
-        <div
-          class="react-date-picker__wrapper"
-        >
-          <div
-            class="react-date-picker__inputGroup"
-          >
-            <input
-              max="2023-09-23"
-              min="2022-06-22"
-              name="date"
-              style="visibility: hidden; position: absolute; z-index: -999;"
-              type="date"
-              value=""
-            />
-            <input
-              autocomplete="off"
-              class="react-date-picker__inputGroup__input react-date-picker__inputGroup__month"
-              data-input="true"
-              inputmode="numeric"
-              max="12"
-              min="1"
-              name="month"
-              placeholder="mm"
-              type="number"
-              value=""
-            />
-            <span
-              class="react-date-picker__inputGroup__divider"
-            >
-              /
-            </span>
-            <input
-              autocomplete="off"
-              class="react-date-picker__inputGroup__input react-date-picker__inputGroup__day"
-              data-input="true"
-              inputmode="numeric"
-              max="31"
-              min="1"
-              name="day"
-              placeholder="dd"
-              type="number"
-              value=""
-            />
-            <span
-              class="react-date-picker__inputGroup__divider"
-            >
-              /
-            </span>
-            <input
-              autocomplete="off"
-              class="react-date-picker__inputGroup__input react-date-picker__inputGroup__year"
-              data-input="true"
-              inputmode="numeric"
-              max="2023"
-              min="2022"
-              name="year"
-              placeholder="yyyy"
-              step="1"
-              type="number"
-              value=""
-            />
-          </div>
-          <button
-            class="react-date-picker__clear-button react-date-picker__button"
-            type="button"
-          >
-            <svg
-              class="react-date-picker__clear-button__icon react-date-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-date-picker__calendar-button react-date-picker__button"
-            type="button"
-          >
-            <svg
-              class="react-date-picker__calendar-button__icon react-date-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/DateTimePicker/DateTimePicker.test.tsx

@@ -1,243 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import StringDateTimePickerGroup from './StringDateTimePickerGroup';
-import FormTestBase, { PersonDto } from '../__Tests__/FormTestBase';
-
-//hack so the datetimepicker internals don't complain about this not existing in the context of jest
-HTMLCanvasElement.prototype.getContext = () => null;
-
-describe('StringDateTimePickerGroup', () => {
-  it('renders without crashing', () => {
-    render(
-      <FormTestBase>
-        {({ Field }) => (
-          <Field
-            name="createdDateTime"
-            Component={StringDateTimePickerGroup}
-            label="Created Date Time"
-            monthPlaceholder="mm"
-            dayPlaceholder="dd"
-            yearPlaceholder="yyyy"
-            disableClock
-            maxDate={new Date('9/23/2023')}
-            minDate={new Date('6/22/2022')}
-          />
-        )}
-      </FormTestBase>
-    );
-  });
-
-  it('has matching snapshot', () => {
-    const renderResult = render(
-      <FormTestBase>
-        {({ Field }) => (
-          <Field
-            name="createdDateTime"
-            Component={StringDateTimePickerGroup}
-            label="Created Date Time"
-            monthPlaceholder="mm"
-            dayPlaceholder="dd"
-            yearPlaceholder="yyyy"
-            disableClock
-            maxDate={new Date('9/23/2023')}
-            minDate={new Date('6/22/2022')}
-          />
-        )}
-      </FormTestBase>
-    );
-    expect(renderResult.asFragment()).toMatchSnapshot();
-  });
-
-  it('does not render with initial date-only string and throws exception', () => {
-    const dateOnlyString = '2024-09-04';
-    const personDtoWithDateOnlyString: PersonDto = {
-      createdDateTime: dateOnlyString,
-    };
-
-    try {
-      render(
-        <FormTestBase initialValues={personDtoWithDateOnlyString}>
-          {({ Field }) => (
-            <Field
-              name="createdDateTime"
-              Component={StringDateTimePickerGroup}
-              label="Created Date Time"
-              monthPlaceholder="mm"
-              dayPlaceholder="dd"
-              yearPlaceholder="yyyy"
-              disableClock
-            />
-          )}
-        </FormTestBase>
-      );
-
-      fail('Expected an exception to be thrown for date-only string');
-    } catch (error: any) {
-      // Assert that the error message matches the expected message
-      expect(error.message).toEqual(
-        `Invalid "date time" value of ${dateOnlyString} provided to DateTimePickerGroup component. Please provide ISO 8601 string that includes the time zone designator. Sample strings: 2022-09-24T:08:54:12+00:00, 2022-09-24T:08:54:12Z, 2022-09-24T:08:54:12.123-05:00`
-      );
-    }
-  });
-
-  it('renders with ISO UTC date time string taking browser timezone into account', () => {
-    const isoUTCDateTimeString = '2024-04-09T21:00:24.670Z';
-    const personDtoWithDateTimeString: PersonDto = {
-      createdDateTime: isoUTCDateTimeString,
-    };
-
-    render(
-      <FormTestBase initialValues={personDtoWithDateTimeString}>
-        {({ Field }) => (
-          <Field
-            name="createdDateTime"
-            Component={StringDateTimePickerGroup}
-            label="Created Date Time"
-            monthPlaceholder="mm"
-            dayPlaceholder="dd"
-            yearPlaceholder="yyyy"
-            disableClock
-          />
-        )}
-      </FormTestBase>
-    );
-
-    const dateTimePickerInputComponent = document.querySelector(
-      'input[name="datetime"][type="datetime-local"]'
-    );
-    const utcDate = new Date(isoUTCDateTimeString);
-    const localDateTimeString =
-      convertToDateTimePickerComponentValueString(utcDate);
-
-    // Assert that no exception is thrown during rendering
-    expect(true).toBe(true);
-    // Assert the value of the component
-    expect(dateTimePickerInputComponent).toHaveValue(localDateTimeString);
-  });
-
-  it('does not render with invalid datetime ISO string and throws exception', () => {
-    const invalidISODateTimeString = '2024-04-11T01:00:00.000-5:00';
-    const personDtoWithDateOnlyString: PersonDto = {
-      createdDateTime: invalidISODateTimeString,
-    };
-
-    try {
-      render(
-        <FormTestBase initialValues={personDtoWithDateOnlyString}>
-          {({ Field }) => (
-            <Field
-              name="createdDateTime"
-              Component={StringDateTimePickerGroup}
-              label="Created Date Time"
-              monthPlaceholder="mm"
-              dayPlaceholder="dd"
-              yearPlaceholder="yyyy"
-              disableClock
-            />
-          )}
-        </FormTestBase>
-      );
-
-      fail('Expected an exception to be thrown for invalid datetime string');
-    } catch (error: any) {
-      // Assert that the error message matches the expected message
-      expect(error.message).toEqual(
-        `Invalid "date time" value of ${invalidISODateTimeString} provided to DateTimePickerGroup component. Please provide ISO 8601 string that includes the time zone designator. Sample strings: 2022-09-24T:08:54:12+00:00, 2022-09-24T:08:54:12Z, 2022-09-24T:08:54:12.123-05:00`
-      );
-    }
-  });
-
-  it('renders with ISO date time string with different offset than browser taking browser timezone into account', () => {
-    const isoDateTimeString = '2024-04-09T21:00:24.670-01:00';
-    const personDtoWithDateTimeString: PersonDto = {
-      createdDateTime: isoDateTimeString,
-    };
-
-    render(
-      <FormTestBase initialValues={personDtoWithDateTimeString}>
-        {({ Field }) => (
-          <Field
-            name="createdDateTime"
-            Component={StringDateTimePickerGroup}
-            label="Created Date Time"
-            monthPlaceholder="mm"
-            dayPlaceholder="dd"
-            yearPlaceholder="yyyy"
-            disableClock
-          />
-        )}
-      </FormTestBase>
-    );
-
-    const dateTimePickerInputComponent = document.querySelector(
-      'input[name="datetime"][type="datetime-local"]'
-    );
-    const utcDate = new Date(isoDateTimeString);
-    const localDateTimeString =
-      convertToDateTimePickerComponentValueString(utcDate);
-
-    // Assert that no exception is thrown during rendering
-    expect(true).toBe(true);
-    // Assert the value of the component
-    expect(dateTimePickerInputComponent).toHaveValue(localDateTimeString);
-  });
-
-  it('renders with ISO date time string with same offset as the browser taking browser timezone into account', () => {
-    const isoDateTimeString = '2024-04-09T21:00:24.670-05:00';
-    const personDtoWithDateTimeString: PersonDto = {
-      createdDateTime: isoDateTimeString,
-    };
-
-    render(
-      <FormTestBase initialValues={personDtoWithDateTimeString}>
-        {({ Field }) => (
-          <Field
-            name="createdDateTime"
-            Component={StringDateTimePickerGroup}
-            label="Created Date Time"
-            monthPlaceholder="mm"
-            dayPlaceholder="dd"
-            yearPlaceholder="yyyy"
-            disableClock
-          />
-        )}
-      </FormTestBase>
-    );
-
-    const dateTimePickerInputComponent = document.querySelector(
-      'input[name="datetime"][type="datetime-local"]'
-    );
-    const utcDate = new Date(isoDateTimeString);
-    const localDateTimeString =
-      convertToDateTimePickerComponentValueString(utcDate);
-
-    // Assert that no exception is thrown during rendering
-    expect(true).toBe(true);
-    // Assert the value of the component
-    expect(dateTimePickerInputComponent).toHaveValue(localDateTimeString);
-  });
-});
-
-function convertToDateTimePickerComponentValueString(date: Date): string {
-  // Format the date in the required format using `intl.DateTimeFormat`
-  const year = new Intl.DateTimeFormat('en', { year: 'numeric' })
-    .format(date)
-    .padStart(4, '0');
-
-  const month = new Intl.DateTimeFormat('en', { month: '2-digit' }).format(
-    date
-  );
-
-  const day = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(date);
-
-  const hour = new Intl.DateTimeFormat('en', {
-    hour: '2-digit',
-    hourCycle: 'h23',
-  }).format(date);
-
-  const minute = new Intl.DateTimeFormat('en', { minute: '2-digit' })
-    .format(date)
-    .padStart(2, '0');
-
-  return `${year}-${month}-${day}T${hour}:${minute}`;
-}

package/src/DateTimePicker/DateTimePickerGroup.tsx

@@ -1,116 +0,0 @@
-import { useEffect, useState } from 'react';
-import { DateTimePicker, DateTimePickerProps } from 'react-datetime-picker';
-import { clsx } from 'clsx';
-import parseISO from 'date-fns/parseISO';
-import { InjectedFieldProps } from '../Field/InjectedFieldProps';
-import { FormDefaults } from '../FormDefaults';
-import Group, { GroupProps } from '../Group';
-
-// Represents a single date/date string, or null
-type DateTimePickerValuePiece = Date | string | null;
-// Represents either a single date/date string, a pair of dates/date strings for a range, or null
-type DateTimePickerValue =
-  | DateTimePickerValuePiece
-  | [DateTimePickerValuePiece, DateTimePickerValuePiece];
-
-export interface DateTimePickerGroupProps<T>
-  extends InjectedFieldProps<T | undefined | null>,
-    Omit<
-      DateTimePickerProps,
-      keyof InjectedFieldProps<T> | 'name' | 'value' | 'className'
-    >,
-    Omit<GroupProps, keyof InjectedFieldProps<T> | 'children'> {
-  convert: (date: Date) => T;
-}
-
-/**
- * Field for inputting date and time. Uses `<Group/>` and `<DateTimePicker/>`.
- *
- * Uses [react-datetime-picker](https://www.npmjs.com/package/react-datetime-picker)
- */
-export default function DateTimePickerGroup<T>({
-  input,
-  meta,
-  label,
-  helpText,
-  className,
-  required,
-  disabled,
-  convert,
-  ...rest
-}: DateTimePickerGroupProps<T>) {
-  const [displayDateTime, setDisplayDateTime] = useState<Date | null>(null);
-
-  useEffect(() => {
-    const inputValue = input.value;
-    if (!inputValue) {
-      setDisplayDateTime(null);
-    } else if (typeof inputValue === 'string') {
-      const parsedDateTime = convertISODateTimeStringToDate(inputValue);
-      setDisplayDateTime(parsedDateTime);
-    } else if (inputValue instanceof Date) {
-      setDisplayDateTime(inputValue);
-    }
-  }, [setDisplayDateTime, input.value]);
-
-  return (
-    <Group
-      input={input}
-      meta={meta}
-      label={label}
-      helpText={helpText}
-      className={clsx(
-        className,
-        FormDefaults.cssClassPrefix + 'date-time-picker'
-      )}
-      required={required}
-      disabled={disabled}>
-      <DateTimePicker
-        {...rest}
-        className={clsx(
-          FormDefaults.cssClassPrefix + 'date-time-picker',
-          className
-        )}
-        value={displayDateTime}
-        onChange={handleChange}
-      />
-    </Group>
-  );
-
-  function handleChange(newDateTime: DateTimePickerValue) {
-    const { onChange } = input;
-    if (onChange === null) {
-      return;
-    }
-
-    if (!newDateTime) {
-      onChange(undefined);
-      setDisplayDateTime(null);
-      return;
-    } else if (typeof newDateTime === 'string') {
-      const parsedDateTime = parseISO(newDateTime);
-      setDisplayDateTime(parsedDateTime);
-      onChange(convert(parsedDateTime));
-    } else if (newDateTime instanceof Date) {
-      setDisplayDateTime(newDateTime);
-      onChange(convert(newDateTime));
-    }
-  }
-}
-
-function convertISODateTimeStringToDate(isoDateTimeString: string) {
-  const isoDateTimeRegex =
-    /^(\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d+)?)([+-]\d{2}:\d{2}|Z)?$/;
-  const isValidIsoDateTimeString = isoDateTimeRegex.test(isoDateTimeString);
-  if (isValidIsoDateTimeString) {
-    return new Date(isoDateTimeString);
-  }
-
-  const errorMessage = `Invalid "date time" value of ${isoDateTimeString} provided to DateTimePickerGroup component. Please provide ISO 8601 string that includes the time zone designator. Sample strings: 2022-09-24T:08:54:12+00:00, 2022-09-24T:08:54:12Z, 2022-09-24T:08:54:12.123-05:00`;
-  if (process.env.NODE_ENV !== 'production') {
-    throw new Error(errorMessage);
-  } else {
-    console.error(errorMessage);
-  }
-  return null;
-}

package/src/DateTimePicker/DateTimePickerHelper.ts

@@ -1,4 +0,0 @@
-import { DateTimePickerGroupProps } from './DateTimePickerGroup';
-
-export interface DateTimePickerHelper<T>
-  extends Omit<DateTimePickerGroupProps<T>, 'convert'> {}