@opengeoweb/form-fields 9.15.0 → 9.17.0

package/README.md

@@ -9,18 +9,3 @@ This library was generated with [Nx](https://nx.dev).
 ## Running unit tests
 
 Run `nx test form-fields` to execute the unit tests via [Jest](https://jestjs.io).
-
-## Image snapshot testing
-
-The current regex filters on storyname takeSnapshot. So to add a story to the snapshot tests, simply add (takeSnapshot) to it's storyName and run the snapshot tests.
-
-[Read more about snapshot testing](https://gitlab.com/opengeoweb/opengeoweb/#image-snapshot-testing)
-
-### Running snapshot tests and updating snapshots locally
-
-1. You need to have [docker](https://docs.docker.com/get-docker/) installed and running.
-2. Start Chromium by running: `npm run start-chromium`. (This will start a docker container with chromium, to run snapshot tests in. We need this to make sure everyone gets the same snapshot results.)
-3. Run the snapshot tests: `npm run test:image-snap-form-fields`. This will first create a new static storybook build and then run the tests.
-4. If a snapshot test fails, you can find and inspect the differences in `libs/form-fields/src/lib/storyshots/__image_snapshots__/__diff_output__/`.
-5. To update the snapshots, run `npm run test:image-snap-form-fields-update`. Snapshots are saved under `libs/form-fields/src/lib/storyshots/__image_snapshots__/`. Make sure to commit the new snapshots.
-6. Stop Chromium by running: `npm run stop-chromium`.

package/index.esm.js

@@ -2,13 +2,12 @@ import * as React from 'react';
 import React__default from 'react';
 import { FormControl, FormHelperText, InputLabel, Select, RadioGroup, TextField, InputAdornment } from '@mui/material';
 import { useFormContext, useController, useForm, FormProvider } from 'react-hook-form';
-import moment from 'moment';
 import { isEqual } from 'lodash';
-import moment$1 from 'moment-timezone';
+import { dateUtils } from '@opengeoweb/shared';
 import { DateTimePicker } from '@mui/x-date-pickers';
 import { CalendarToday } from '@opengeoweb/theme';
-import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -1666,27 +1665,19 @@ const isEmpty = value => {
   }
   return false;
 };
-const isValidDate = value => value ? moment(value).isValid() : true;
-const isBefore = (ownDate, referenceDate) => ownDate ? moment.utc(ownDate) < moment.utc(referenceDate) : true;
-const isAfter = (ownDate, otherDate) => ownDate ? moment.utc(ownDate).isAfter(moment.utc(otherDate)) : true;
-const isBetween = (ownDate, otherDateStart, otherDateEnd) => {
-  return moment.utc(ownDate) >= moment.utc(otherDateStart) && moment.utc(ownDate) <= moment.utc(otherDateEnd);
-};
 const isXHoursBefore = (ownDate, otherDate, hours = 4) => {
   if (isEmpty(ownDate) || isEmpty(otherDate)) {
     return true;
   }
-  const duration = moment.duration(moment.utc(ownDate).diff(otherDate));
-  const inHours = duration.asHours();
-  return inHours >= -hours;
+  const duration = dateUtils.differenceInHours(dateUtils.utc(otherDate), dateUtils.utc(ownDate), 'ceil');
+  return duration <= hours;
 };
 const isXHoursAfter = (ownDate, otherDate, hours = 4) => {
   if (isEmpty(ownDate) || isEmpty(otherDate)) {
     return true;
   }
-  const duration = moment.duration(moment.utc(ownDate).diff(otherDate));
-  const inHours = duration.asHours();
-  return inHours <= hours;
+  const duration = dateUtils.differenceInHours(dateUtils.utc(ownDate), dateUtils.utc(otherDate), 'ceil');
+  return duration <= hours;
 };
 const isLatitude = lat => {
   if (!lat) {
@@ -2978,9 +2969,11 @@ const ReactHookFormNumberField = _a => {
     const before = inputElement.value.slice(0, inputElement.selectionStart);
     const after = inputElement.value.slice(inputElement.selectionEnd);
     const newValue = before + clipboardText + after;
+    // eslint-disable-next-line no-useless-escape
     if (inputMode === 'numeric' && !newValue.match(/^\-?[0-9]+$/)) {
       event.preventDefault();
     }
+    // eslint-disable-next-line no-useless-escape
     if (inputMode === 'decimal' && !newValue.match(/^\-?[0-9]*(\.[0-9]+)?$/)) {
       event.preventDefault();
     }
@@ -3040,14 +3033,24 @@ const ReactHookFormNumberField = _a => {
   }, otherProps)));
 };
 
-const DEFAULT_DATE_FORMAT = 'DD/MM/YYYY HH:mm';
-const DATE_FORMAT_FNS = 'dd/MM/yyyy HH:mm';
 const OpenPicker = () => /*#__PURE__*/React.createElement(CalendarToday, null);
-// TODO: Place this default setting somewhere more appropriate, should only need to fire once https://gitlab.com/opengeoweb/opengeoweb/-/issues/331
-moment$1.tz.setDefault('Etc/GMT-0');
+const getTimezoneOffset = value => value.getTimezoneOffset() * 60000;
+const makeLocalAppearUTC = value => new Date(value.getTime() + getTimezoneOffset(value));
+const localToUTC = dateTime => new Date(dateTime.getTime() - getTimezoneOffset(dateTime));
 const getFormattedValue = value => {
-  const isMoment = moment$1(value).isValid();
-  return isMoment ? moment$1.utc(value).format() : value;
+  var _a;
+  return (_a = dateUtils.dateToIsoString(value)) !== null && _a !== void 0 ? _a : null;
+};
+const getDateValue = value => {
+  var _a, _b;
+  if (value) {
+    const dateValue = (_b = (_a = dateUtils.stringToDate(value, 'yyyy/MM/dd HH:mm', false)) !== null && _a !== void 0 ? _a : dateUtils.isoStringToDate(value, false)) !== null && _b !== void 0 ? _b : null;
+    if (dateValue) {
+      return makeLocalAppearUTC(dateValue);
+    }
+    return null;
+  }
+  return null;
 };
 const ReactHookKeyboardDateTimePicker = _a => {
   var {
@@ -3055,7 +3058,7 @@ const ReactHookKeyboardDateTimePicker = _a => {
       rules,
       disabled,
       label = 'Select date and time',
-      format = DEFAULT_DATE_FORMAT,
+      format = dateUtils.DATE_FORMAT_DATEPICKER,
       openTo = 'hours',
       defaultNullValue = null,
       helperText = '',
@@ -3064,9 +3067,11 @@ const ReactHookKeyboardDateTimePicker = _a => {
       sx,
       isReadOnly,
       inputAdornment,
-      shouldHideUTC
+      shouldHideUTC,
+      disablePast,
+      disableFuture
     } = _a,
-    otherProps = __rest(_a, ["name", "rules", "disabled", "label", "format", "openTo", "defaultNullValue", "helperText", "onChange", "className", "sx", "isReadOnly", "inputAdornment", "shouldHideUTC"]);
+    otherProps = __rest(_a, ["name", "rules", "disabled", "label", "format", "openTo", "defaultNullValue", "helperText", "onChange", "className", "sx", "isReadOnly", "inputAdornment", "shouldHideUTC", "disablePast", "disableFuture"]);
   const {
     control
   } = useFormContext();
@@ -3086,8 +3091,11 @@ const ReactHookKeyboardDateTimePicker = _a => {
     defaultValue: defaultNullValue
   }, defaultProps));
   const errors = getErrors(name, formErrors);
-  // Ensure value is a Moment object
-  const dateValue = value ? moment$1(value) : null;
+  // Ensure value is a Date object
+  const dateValue = getDateValue(value);
+  const now = makeLocalAppearUTC(dateUtils.utc());
+  const minDateTime = disablePast ? now : null;
+  const maxDateTime = disableFuture ? now : null;
   return /*#__PURE__*/React.createElement(ReactHookFormFormControl, {
     disabled: disabled,
     errors: errors,
@@ -3103,8 +3111,14 @@ const ReactHookKeyboardDateTimePicker = _a => {
     openTo: openTo,
     disabled: disabled,
     onChange: value => {
-      onChangeField(getFormattedValue(value));
-      onChange(getFormattedValue(value));
+      if (!value) {
+        onChange(null);
+        onChangeField(null);
+        return;
+      }
+      const formattedDate = getFormattedValue(localToUTC(value));
+      onChangeField(formattedDate);
+      onChange(formattedDate);
     },
     inputRef: ref,
     slotProps: {
@@ -3143,7 +3157,9 @@ const ReactHookKeyboardDateTimePicker = _a => {
     },
     timeSteps: {
       minutes: 1
-    }
+    },
+    minDateTime: minDateTime,
+    maxDateTime: maxDateTime
   }, otherProps)));
 };
 
@@ -3165,7 +3181,7 @@ const ReactHookFormProviderWrapper = ({
   children,
   options: _options2 = defaultFormOptions
 }) => ( /*#__PURE__*/React__default.createElement(LocalizationProvider, {
-  dateAdapter: AdapterMoment
+  dateAdapter: AdapterDateFns
 }, /*#__PURE__*/React__default.createElement(ReactHookFormProvider, {
   options: _options2
 }, children)));
@@ -3228,4 +3244,4 @@ const useDraftFormHelpers = (isDefaultDraft = false) => {
   };
 };
 
-export { DATE_FORMAT_FNS, HIDDEN_INPUT_HELPER_IS_DRAFT, ReactHookKeyboardDateTimePicker as ReactHookFormDateTime, ReactHookFormFormControl, ReactHookFormHiddenInput, ReactHookFormNumberField, ReactHookFormProviderWrapper as ReactHookFormProvider, ReactHookFormRadioGroup, ReactHookFormSelect, ReactHookFormTextField, defaultFormOptions, errorMessages, getDeepProperty, getFormattedValue, hasIntersectionWithFIR, hasMaxFeaturePoints, hasMulitpleIntersections, isAfter, isBefore, isBetween, isEmpty, isGeometryDirty, isInteger, isLatitude, isLongitude, isMaximumOneDrawing, isNonOrBothCoordinates, isValidDate, isValidGeoJsonCoordinates, isValidMax, isValidMin, isXHoursAfter, isXHoursBefore, useDraftFormHelpers };
+export { HIDDEN_INPUT_HELPER_IS_DRAFT, ReactHookKeyboardDateTimePicker as ReactHookFormDateTime, ReactHookFormFormControl, ReactHookFormHiddenInput, ReactHookFormNumberField, ReactHookFormProviderWrapper as ReactHookFormProvider, ReactHookFormRadioGroup, ReactHookFormSelect, ReactHookFormTextField, defaultFormOptions, errorMessages, getDateValue, getDeepProperty, getFormattedValue, hasIntersectionWithFIR, hasMaxFeaturePoints, hasMulitpleIntersections, isEmpty, isGeometryDirty, isInteger, isLatitude, isLongitude, isMaximumOneDrawing, isNonOrBothCoordinates, isValidGeoJsonCoordinates, isValidMax, isValidMin, isXHoursAfter, isXHoursBefore, useDraftFormHelpers };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/form-fields",
-  "version": "9.15.0",
+  "version": "9.17.0",
   "description": "GeoWeb form-fields library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -11,10 +11,9 @@
     "@mui/material": "~5.15.11",
     "@opengeoweb/theme": "*",
     "react-hook-form": "^7.50.1",
-    "moment": "^2.29.4",
-    "moment-timezone": "^0.5.43",
     "@mui/x-date-pickers": "^6.18.5",
-    "lodash": "^4.17.21"
+    "lodash": "^4.17.21",
+    "@opengeoweb/shared": "9.17.0"
   },
   "peerDependencies": {
     "react": "18"

package/src/lib/components/ReactHookFormDateTime.d.ts

@@ -1,14 +1,13 @@
 import * as React from 'react';
 import { SxProps, Theme } from '@mui/material';
-import { Moment } from 'moment-timezone';
 import { DateTimePickerProps, DateTimePickerSlotsComponentsProps } from '@mui/x-date-pickers';
 import { ReactHookFormInput } from './types';
-export declare const DATE_FORMAT_FNS = "dd/MM/yyyy HH:mm";
-export declare const getFormattedValue: (value: Moment | string) => string | Moment;
-type ReactHookKeyboardDateTimePickerProps = DateTimePickerProps<Moment> & DateTimePickerSlotsComponentsProps<Moment> & ReactHookFormInput<{
+export declare const getFormattedValue: (value: Date) => string | null;
+export declare const getDateValue: (value: string) => Date | null;
+type ReactHookKeyboardDateTimePickerProps = DateTimePickerProps<Date> & DateTimePickerSlotsComponentsProps<Date> & ReactHookFormInput<{
     defaultNullValue?: string | null;
     value?: string;
-    onChange?: (value: string | Moment) => void;
+    onChange?: (value: Date | string | null) => void;
     format?: string;
     sx?: SxProps<Theme>;
 }> & {

package/src/lib/components/ReactHookFormDateTime.stories.d.ts

@@ -14,7 +14,7 @@ export declare const DateTime: {
 };
 export declare const DateTimeLightTheme: {
     (): React.ReactElement;
-    storyName: string;
+    tags: string[];
     parameters: {
         zeplinLink: {
             name: string;
@@ -24,7 +24,7 @@ export declare const DateTimeLightTheme: {
 };
 export declare const DateTimeDarkTheme: {
     (): React.ReactElement;
-    storyName: string;
+    tags: string[];
     parameters: {
         zeplinLink: {
             name: string;

package/src/lib/components/ReactHookFormNumberField.stories.d.ts

@@ -14,7 +14,7 @@ export declare const NumberField: {
 };
 export declare const NumberFieldLightTheme: {
     (): React.ReactElement;
-    storyName: string;
+    tags: string[];
     parameters: {
         zeplinLink: {
             name: string;
@@ -24,7 +24,7 @@ export declare const NumberFieldLightTheme: {
 };
 export declare const NumberFieldDarkTheme: {
     (): React.ReactElement;
-    storyName: string;
+    tags: string[];
     parameters: {
         zeplinLink: {
             name: string;

package/src/lib/components/ReactHookFormProvider.stories.d.ts

@@ -14,7 +14,7 @@ export declare const FormProvider: {
 };
 export declare const FormProviderLightTheme: {
     (): React.ReactElement;
-    storyName: string;
+    tags: string[];
     parameters: {
         zeplinLink: {
             name: string;
@@ -24,7 +24,7 @@ export declare const FormProviderLightTheme: {
 };
 export declare const FormProviderDarkTheme: {
     (): React.ReactElement;
-    storyName: string;
+    tags: string[];
     parameters: {
         zeplinLink: {
             name: string;

package/src/lib/components/ReactHookFormRadioGroup.stories.d.ts

@@ -14,7 +14,7 @@ export declare const RadioGroup: {
 };
 export declare const RadioGroupLightTheme: {
     (): React.ReactElement;
-    storyName: string;
+    tags: string[];
     parameters: {
         zeplinLink: {
             name: string;
@@ -24,7 +24,7 @@ export declare const RadioGroupLightTheme: {
 };
 export declare const RadioGroupDarkTheme: {
     (): React.ReactElement;
-    storyName: string;
+    tags: string[];
     parameters: {
         zeplinLink: {
             name: string;

package/src/lib/components/ReactHookFormSelect.stories.d.ts

@@ -6,7 +6,7 @@ export default _default;
 export declare const Select: () => React.ReactElement;
 export declare const SelectLightTheme: {
     (): React.ReactElement;
-    storyName: string;
+    tags: string[];
     parameters: {
         zeplinLink: {
             name: string;
@@ -16,7 +16,7 @@ export declare const SelectLightTheme: {
 };
 export declare const SelectDarkTheme: {
     (): React.ReactElement;
-    storyName: string;
+    tags: string[];
     parameters: {
         zeplinLink: {
             name: string;

package/src/lib/components/ReactHookFormTextField.stories.d.ts

@@ -14,7 +14,7 @@ export declare const TextField: {
 };
 export declare const TextFieldLightTheme: {
     (): React.ReactElement;
-    storyName: string;
+    tags: string[];
     parameters: {
         zeplinLink: {
             name: string;
@@ -24,7 +24,7 @@ export declare const TextFieldLightTheme: {
 };
 export declare const TextFieldDarkTheme: {
     (): React.ReactElement;
-    storyName: string;
+    tags: string[];
     parameters: {
         zeplinLink: {
             name: string;

package/src/lib/components/index.d.ts

@@ -8,5 +8,5 @@ export * from './ReactHookFormDateTime';
 export { default as ReactHookFormProvider } from './ReactHookFormProvider';
 export { default as ReactHookFormHiddenInput } from './ReactHookFormHiddenInput';
 export { defaultFormOptions } from './ReactHookFormProvider';
-export { errorMessages, isMaximumOneDrawing, isGeometryDirty, isValidGeoJsonCoordinates, hasIntersectionWithFIR, isValidMax, isValidMin, isInteger, isAfter, isBefore, isBetween, isValidDate, hasMaxFeaturePoints, hasMulitpleIntersections, isXHoursBefore, isXHoursAfter, isLatitude, isLongitude, isNonOrBothCoordinates, isEmpty, } from './utils';
+export { errorMessages, isMaximumOneDrawing, isGeometryDirty, isValidGeoJsonCoordinates, hasIntersectionWithFIR, isValidMax, isValidMin, isInteger, hasMaxFeaturePoints, hasMulitpleIntersections, isLatitude, isLongitude, isNonOrBothCoordinates, isEmpty, isXHoursAfter, isXHoursBefore, } from './utils';
 export { getDeepProperty } from './formUtils';

package/src/lib/components/utils.d.ts

@@ -1,4 +1,3 @@
-import { Moment } from 'moment';
 export declare const defaultProps: {
     shouldUnregister: boolean;
 };
@@ -19,10 +18,6 @@ export declare const errorMessages: {
     isNumeric: string;
 };
 export declare const isEmpty: (value?: number | string | null) => boolean;
-export declare const isValidDate: (value?: Moment | string | null) => boolean;
-export declare const isBefore: (ownDate: string, referenceDate: string) => boolean;
-export declare const isAfter: (ownDate: string, otherDate: string) => boolean;
-export declare const isBetween: (ownDate: string, otherDateStart: string, otherDateEnd: string) => boolean;
 export declare const isXHoursBefore: (ownDate: string, otherDate: string, hours?: number) => boolean;
 export declare const isXHoursAfter: (ownDate: string, otherDate: string, hours?: number) => boolean;
 export declare const isLatitude: (lat?: number | null) => boolean;

package/src/lib/storyshots/Storyshots.spec.d.ts

@@ -1 +0,0 @@
-export {};