@opengeoweb/form-fields 2.1.0 → 2.1.4

package/README.md

@@ -9,3 +9,18 @@ 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/{form-fields.esm.js → index.esm.js}

@@ -1,11 +1,13 @@
 import * as React from 'react';
 import React__default from 'react';
-import { FormControl, FormHelperText, InputLabel, Select, RadioGroup, TextField, InputAdornment } from '@material-ui/core';
+import { FormControl, FormHelperText, InputLabel, Select, RadioGroup, TextField, InputAdornment } from '@mui/material';
 import { useFormContext, Controller, useForm, FormProvider } from 'react-hook-form';
 import moment from 'moment';
 import { isEqual } from 'lodash';
-import { KeyboardDateTimePicker } from '@material-ui/pickers';
 import moment$1 from 'moment-timezone';
+import { DateTimePicker } from '@mui/lab';
+import AdapterMoment from '@mui/lab/AdapterMoment';
+import LocalizationProvider from '@mui/lab/LocalizationProvider';
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -398,7 +400,7 @@ var ReactHookFormRadioGroup = function ReactHookFormRadioGroup(_a) {
 
           _onChange(changeEvent, changeEvent.target.value);
         },
-        innerRef: inputRef,
+        ref: inputRef,
         name: name
       }, otherProps), children);
     },
@@ -684,28 +686,24 @@ var ReactHookKeyboardDateTimePicker = function ReactHookKeyboardDateTimePicker(_
     className: className
   }, /*#__PURE__*/React.createElement(Controller, {
     render: function render(_props) {
-      return /*#__PURE__*/React.createElement(KeyboardDateTimePicker, Object.assign({
-        autoOk: true,
-        name: name,
+      return /*#__PURE__*/React.createElement(DateTimePicker, Object.assign({
+        desktopModeMediaQuery: "@media (min-width: 720px)",
         ampm: false,
-        format: format,
+        mask: "____/__/__ __:__",
+        inputFormat: format,
         label: label,
         value: _props.value,
         openTo: openTo,
-        error: !!errors,
         disabled: disabled,
         onChange: function onChange(value) {
           _props.onChange(getFormattedValue(value));
 
           _onChange(getFormattedValue(value));
         },
-        invalidDateMessage: null,
-        inputVariant: "filled",
         inputRef: inputRef,
         InputAdornmentProps: {
           position: 'start'
         },
-        helperText: helperText,
         InputProps: {
           endAdornment: /*#__PURE__*/React.createElement(InputAdornment, {
             style: {
@@ -713,6 +711,24 @@ var ReactHookKeyboardDateTimePicker = function ReactHookKeyboardDateTimePicker(_
             },
             position: "end"
           }, "UTC")
+        },
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        // eslint-disable-next-line react/jsx-no-duplicate-props
+        inputProps: disabled ? {
+          placeholder: ''
+        } : undefined,
+        renderInput: function renderInput(_a) {
+          _a.error;
+              var props = __rest(_a, ["error"]);
+
+          return /*#__PURE__*/React.createElement(TextField, Object.assign({
+            helperText: helperText,
+            error: !!errors,
+            name: name,
+            "data-testid": otherProps['data-testid'],
+            variant: "filled"
+          }, props));
         }
       }, otherProps));
     },
@@ -760,6 +776,17 @@ var ReactHookFormProvider = function ReactHookFormProvider(_ref) {
   return /*#__PURE__*/React__default.createElement(FormProvider, Object.assign({}, formMethods), children);
 };
 
+var ReactHookFormProviderWrapper = function ReactHookFormProviderWrapper(_ref2) {
+  var children = _ref2.children,
+      _ref2$options = _ref2.options,
+      options = _ref2$options === void 0 ? defaultFormOptions : _ref2$options;
+  return /*#__PURE__*/React__default.createElement(LocalizationProvider, {
+    dateAdapter: AdapterMoment
+  }, /*#__PURE__*/React__default.createElement(ReactHookFormProvider, {
+    options: options
+  }, children));
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -799,4 +826,4 @@ var ReactHookFormHiddenInput = function ReactHookFormHiddenInput(_ref) {
   });
 };
 
-export { ReactHookKeyboardDateTimePicker as ReactHookFormDateTime, ReactHookFormFormControl, ReactHookFormHiddenInput, ReactHookFormNumberField, ReactHookFormProvider, ReactHookFormRadioGroup, ReactHookFormSelect, ReactHookFormTextField, containsNoCommas, defaultFormOptions, errorMessages, getDeepProperty, hasIntersectionWithFIR, hasMaxFeaturePoints, hasMulitpleIntersections, isAfter, isBefore, isBetween, isEmpty, isGeometryDirty, isInteger, isLatitude, isLongitude, isMaximumOneDrawing, isNonOrBothCoordinates, isValidDate, isValidGeoJsonCoordinates, isValidMax, isValidMin, isXHoursAfter, isXHoursBefore };
+export { ReactHookKeyboardDateTimePicker as ReactHookFormDateTime, ReactHookFormFormControl, ReactHookFormHiddenInput, ReactHookFormNumberField, ReactHookFormProviderWrapper as ReactHookFormProvider, ReactHookFormRadioGroup, ReactHookFormSelect, ReactHookFormTextField, containsNoCommas, defaultFormOptions, errorMessages, getDeepProperty, hasIntersectionWithFIR, hasMaxFeaturePoints, hasMulitpleIntersections, isAfter, isBefore, isBetween, isEmpty, isGeometryDirty, isInteger, isLatitude, isLongitude, isMaximumOneDrawing, isNonOrBothCoordinates, isValidDate, isValidGeoJsonCoordinates, isValidMax, isValidMin, isXHoursAfter, isXHoursBefore };

package/{form-fields.umd.js → index.umd.js}

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@material-ui/core'), require('react-hook-form'), require('moment'), require('lodash'), require('@material-ui/pickers'), require('moment-timezone')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'react', '@material-ui/core', 'react-hook-form', 'moment', 'lodash', '@material-ui/pickers', 'moment-timezone'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.FormFields = {}, global.React, global.core, global.reactHookForm, global.moment, global.lodash, global.pickers, global.moment$1));
-})(this, (function (exports, React, core, reactHookForm, moment, lodash, pickers, moment$1) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@mui/material'), require('react-hook-form'), require('moment'), require('lodash'), require('moment-timezone'), require('@mui/lab'), require('@mui/lab/AdapterMoment'), require('@mui/lab/LocalizationProvider')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react', '@mui/material', 'react-hook-form', 'moment', 'lodash', 'moment-timezone', '@mui/lab', '@mui/lab/AdapterMoment', '@mui/lab/LocalizationProvider'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.FormFields = {}, global.React, global.material, global.reactHookForm, global.moment, global.lodash, global.moment$1, global.lab, global.AdapterMoment, global.LocalizationProvider));
+})(this, (function (exports, React, material, reactHookForm, moment, lodash, moment$1, lab, AdapterMoment, LocalizationProvider) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -28,6 +28,8 @@
     var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
     var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
     var moment__default$1 = /*#__PURE__*/_interopDefaultLegacy(moment$1);
+    var AdapterMoment__default = /*#__PURE__*/_interopDefaultLegacy(AdapterMoment);
+    var LocalizationProvider__default = /*#__PURE__*/_interopDefaultLegacy(LocalizationProvider);
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -84,10 +86,14 @@
         return ar;
     }
 
-    function __spreadArray(to, from) {
-        for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-            to[j] = from[i];
-        return to;
+    function __spreadArray(to, from, pack) {
+        if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+            if (ar || !(i in from)) {
+                if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+                ar[i] = from[i];
+            }
+        }
+        return to.concat(ar || Array.prototype.slice.call(from));
     }
 
     /* *
@@ -347,11 +353,11 @@
           errors = _a.errors,
           props = __rest(_a, ["children", "errors"]);
 
-      return /*#__PURE__*/React__namespace.createElement(core.FormControl, __assign({
+      return /*#__PURE__*/React__namespace.createElement(material.FormControl, __assign({
         fullWidth: true
       }, props, {
         error: !!errors
-      }), children, errors && /*#__PURE__*/React__namespace.createElement(core.FormHelperText, {
+      }), children, errors && /*#__PURE__*/React__namespace.createElement(material.FormHelperText, {
         variant: "filled"
       }, errors.message || errorMessages[errors.type]));
     };
@@ -391,12 +397,12 @@
         className: className,
         disabled: disabled,
         errors: errors
-      }, /*#__PURE__*/React__namespace.createElement(core.InputLabel, {
+      }, /*#__PURE__*/React__namespace.createElement(material.InputLabel, {
         variant: "filled",
         id: labelId
       }, label), /*#__PURE__*/React__namespace.createElement(reactHookForm.Controller, {
         render: function render(_props) {
-          return /*#__PURE__*/React__namespace.createElement(core.Select, __assign({
+          return /*#__PURE__*/React__namespace.createElement(material.Select, __assign({
             labelId: labelId,
             label: label,
             inputRef: inputRef,
@@ -450,18 +456,18 @@
       return /*#__PURE__*/React__namespace.createElement(ReactHookFormFormControl, {
         disabled: disabled,
         errors: errors
-      }, /*#__PURE__*/React__namespace.createElement(core.InputLabel, {
+      }, /*#__PURE__*/React__namespace.createElement(material.InputLabel, {
         id: labelId
       }, label), /*#__PURE__*/React__namespace.createElement(reactHookForm.Controller, {
         render: function render(_props) {
-          return /*#__PURE__*/React__namespace.createElement(core.RadioGroup, __assign({
+          return /*#__PURE__*/React__namespace.createElement(material.RadioGroup, __assign({
             value: _props.value,
             onChange: function onChange(changeEvent) {
               _props.onChange(changeEvent.target.value);
 
               _onChange(changeEvent, changeEvent.target.value);
             },
-            innerRef: inputRef,
+            ref: inputRef,
             name: name
           }, otherProps), children);
         },
@@ -522,7 +528,7 @@
         errors: errors
       }, /*#__PURE__*/React__namespace.createElement(reactHookForm.Controller, {
         render: function render(_props) {
-          return /*#__PURE__*/React__namespace.createElement(core.TextField, __assign({
+          return /*#__PURE__*/React__namespace.createElement(material.TextField, __assign({
             label: label,
             style: otherProps.multiline ? styles.textEditor : {},
             error: !!errors,
@@ -643,7 +649,7 @@
         errors: errors
       }, /*#__PURE__*/React__namespace.createElement(reactHookForm.Controller, {
         render: function render(_props) {
-          return /*#__PURE__*/React__namespace.createElement(core.TextField, __assign({
+          return /*#__PURE__*/React__namespace.createElement(material.TextField, __assign({
             label: label,
             error: !!errors,
             helperText: helperText,
@@ -720,35 +726,49 @@
         className: className
       }, /*#__PURE__*/React__namespace.createElement(reactHookForm.Controller, {
         render: function render(_props) {
-          return /*#__PURE__*/React__namespace.createElement(pickers.KeyboardDateTimePicker, __assign({
-            autoOk: true,
-            name: name,
+          return /*#__PURE__*/React__namespace.createElement(lab.DateTimePicker, __assign({
+            desktopModeMediaQuery: "@media (min-width: 720px)",
             ampm: false,
-            format: format,
+            mask: "____/__/__ __:__",
+            inputFormat: format,
             label: label,
             value: _props.value,
             openTo: openTo,
-            error: !!errors,
             disabled: disabled,
             onChange: function onChange(value) {
               _props.onChange(getFormattedValue(value));
 
               _onChange(getFormattedValue(value));
             },
-            invalidDateMessage: null,
-            inputVariant: "filled",
             inputRef: inputRef,
             InputAdornmentProps: {
               position: 'start'
             },
-            helperText: helperText,
             InputProps: {
-              endAdornment: /*#__PURE__*/React__namespace.createElement(core.InputAdornment, {
+              endAdornment: /*#__PURE__*/React__namespace.createElement(material.InputAdornment, {
                 style: {
                   paddingTop: '16px'
                 },
                 position: "end"
               }, "UTC")
+            },
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            // eslint-disable-next-line react/jsx-no-duplicate-props
+            inputProps: disabled ? {
+              placeholder: ''
+            } : undefined,
+            renderInput: function renderInput(_a) {
+              _a.error;
+                  var props = __rest(_a, ["error"]);
+
+              return /*#__PURE__*/React__namespace.createElement(material.TextField, __assign({
+                helperText: helperText,
+                error: !!errors,
+                name: name,
+                "data-testid": otherProps['data-testid'],
+                variant: "filled"
+              }, props));
             }
           }, otherProps));
         },
@@ -780,6 +800,17 @@
       return /*#__PURE__*/React__default["default"].createElement(reactHookForm.FormProvider, __assign({}, formMethods), children);
     };
 
+    var ReactHookFormProviderWrapper = function ReactHookFormProviderWrapper(_a) {
+      var children = _a.children,
+          _b = _a.options,
+          options = _b === void 0 ? defaultFormOptions : _b;
+      return /*#__PURE__*/React__default["default"].createElement(LocalizationProvider__default["default"], {
+        dateAdapter: AdapterMoment__default["default"]
+      }, /*#__PURE__*/React__default["default"].createElement(ReactHookFormProvider, {
+        options: options
+      }, children));
+    };
+
     var ReactHookFormHiddenInput = function ReactHookFormHiddenInput(_a) {
       var name = _a.name,
           _b = _a.defaultValue,
@@ -803,7 +834,7 @@
     exports.ReactHookFormFormControl = ReactHookFormFormControl;
     exports.ReactHookFormHiddenInput = ReactHookFormHiddenInput;
     exports.ReactHookFormNumberField = ReactHookFormNumberField;
-    exports.ReactHookFormProvider = ReactHookFormProvider;
+    exports.ReactHookFormProvider = ReactHookFormProviderWrapper;
     exports.ReactHookFormRadioGroup = ReactHookFormRadioGroup;
     exports.ReactHookFormSelect = ReactHookFormSelect;
     exports.ReactHookFormTextField = ReactHookFormTextField;

package/lib/components/ReactHookFormDateTime.d.ts

@@ -1,13 +1,17 @@
 import * as React from 'react';
-import { KeyboardDateTimePickerProps } from '@material-ui/pickers';
 import { Moment } from 'moment-timezone';
+import { DateTimePickerProps } from '@mui/lab';
 import { Rules } from './types';
 export declare const getFormattedValue: (value: Moment | string) => string | Moment;
-declare type ReactHookKeyboardDateTimePickerProps = Partial<KeyboardDateTimePickerProps> & {
+declare type ReactHookKeyboardDateTimePickerProps = Partial<DateTimePickerProps> & {
     rules: Rules;
     defaultNullValue?: string;
     value?: string;
     onChange?: (value: any) => void;
+    name: string;
+    helperText?: string;
+    label?: string;
+    format?: string;
 };
 declare const ReactHookKeyboardDateTimePicker: React.FC<ReactHookKeyboardDateTimePickerProps>;
 export default ReactHookKeyboardDateTimePicker;

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

@@ -4,3 +4,7 @@ declare const _default: {
 };
 export default _default;
 export declare const DateTime: () => React.ReactElement;
+export declare const DateTimeSnapshot: {
+    (): React.ReactElement;
+    storyName: string;
+};

package/lib/components/ReactHookFormFormControl.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FormControlProps } from '@material-ui/core';
+import { FormControlProps } from '@mui/material';
 import { FieldErrors } from 'react-hook-form';
 interface ReactHookFormFormControlProps extends FormControlProps {
     errors?: FieldErrors;

package/lib/components/ReactHookFormNumberField.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TextFieldProps } from '@material-ui/core';
+import { TextFieldProps } from '@mui/material';
 import { Rules } from './types';
 declare type InputMode = 'numeric' | 'decimal';
 export declare const convertNumericInputValue: (value: string, inputMode: InputMode) => number | string;

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

@@ -4,3 +4,7 @@ declare const _default: {
 };
 export default _default;
 export declare const NumberField: () => React.ReactElement;
+export declare const NumberFieldSnapshotWrapped: {
+    (): React.ReactElement;
+    storyName: string;
+};

package/lib/components/ReactHookFormProvider.d.ts

@@ -16,5 +16,5 @@ export declare const defaultFormOptions: Partial<{
     shouldUnregister: boolean;
     criteriaMode: "all" | "firstError";
 }>;
-declare const ReactHookFormProvider: React.FC<WrapperProps>;
-export default ReactHookFormProvider;
+declare const ReactHookFormProviderWrapper: React.FC<WrapperProps>;
+export default ReactHookFormProviderWrapper;

package/lib/components/ReactHookFormRadioGroup.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { RadioGroupProps } from '@material-ui/core';
+import { RadioGroupProps } from '@mui/material';
 import { Rules } from './types';
 declare type ReactHookFormRadioGroupProps = Partial<RadioGroupProps> & {
     rules: Rules;

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

@@ -4,3 +4,7 @@ declare const _default: {
 };
 export default _default;
 export declare const RadioGroup: () => React.ReactElement;
+export declare const RadioGroupSnapshot: {
+    (): React.ReactElement;
+    storyName: string;
+};

package/lib/components/ReactHookFormSelect.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { SelectProps } from '@material-ui/core';
+import { SelectProps } from '@mui/material';
 import { Rules } from './types';
 declare type ReactHookFormSelectProps = Partial<SelectProps> & {
     rules: Rules;

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

@@ -4,3 +4,7 @@ declare const _default: {
 };
 export default _default;
 export declare const Select: () => React.ReactElement;
+export declare const SelectSnapshot: {
+    (): React.ReactElement;
+    storyName: string;
+};

package/lib/components/ReactHookFormTextField.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TextFieldProps } from '@material-ui/core';
+import { TextFieldProps } from '@mui/material';
 import { Rules } from './types';
 export declare const convertTextInputValue: (value: string, inCapitals: boolean) => number | string;
 declare type ReactHookFormTextFieldProps = Partial<TextFieldProps> & {

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

@@ -4,3 +4,7 @@ declare const _default: {
 };
 export default _default;
 export declare const TextField: () => React.ReactElement;
+export declare const TextFieldSnapshot: {
+    (): React.ReactElement;
+    storyName: string;
+};

package/lib/components/types.d.ts

@@ -1,4 +1,4 @@
-import { FormControlProps } from '@material-ui/core';
+import { FormControlProps } from '@mui/material';
 import { RegisterOptions } from 'react-hook-form';
 export declare type Rules = RegisterOptions;
 export interface ReactHookFormInput extends FormControlProps {

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

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

package/package.json

@@ -1,27 +1,26 @@
 {
   "name": "@opengeoweb/form-fields",
-  "version": "2.1.0",
+  "version": "2.1.4",
   "description": "GeoWeb form-fields library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
     "url": "git@gitlab.com:opengeoweb/opengeoweb.git"
   },
-  "main": "./form-fields.umd.js",
-  "module": "./form-fields.esm.js",
+  "main": "./index.umd.js",
+  "module": "./index.esm.js",
   "typings": "./index.d.ts",
   "dependencies": {},
   "peerDependencies": {
     "react-hook-form": "^6.12.1",
-    "react": "16.14.0",
-    "@material-ui/core": "^4.11.0",
-    "@material-ui/pickers": "^3.2.10",
-    "@date-io/moment": "^1.3.13",
+    "react": "^17.0.2",
+    "@mui/material": "^5.2.8",
     "moment": "^2.29.0",
-    "@opengeoweb/theme": "2.1.0",
-    "@material-ui/lab": "^4.0.0-alpha.56",
-    "@material-ui/icons": "^4.9.1",
+    "@mui/icons-material": "^5.2.5",
+    "@opengeoweb/theme": "2.1.4",
+    "@mui/styles": "^5.2.3",
     "moment-timezone": "^0.5.31",
+    "@mui/lab": "^5.0.0-alpha.64",
     "lodash": "^4.17.20"
   }
 }