@opengeoweb/form-fields 2.0.1 → 2.1.3

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

@@ -4,8 +4,9 @@ import { FormControl, FormHelperText, InputLabel, Select, RadioGroup, TextField,
 import { useFormContext, Controller, useForm, FormProvider } from 'react-hook-form';
 import moment from 'moment';
 import { isEqual } from 'lodash';
-import { KeyboardDateTimePicker } from '@material-ui/pickers';
+import { KeyboardDateTimePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
 import moment$1 from 'moment-timezone';
+import MomentUtils from '@date-io/moment';
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -760,6 +761,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(ReactHookFormProvider, {
+    options: options
+  }, /*#__PURE__*/React__default.createElement(MuiPickersUtilsProvider, {
+    utils: MomentUtils
+  }, 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 +811,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

@@ -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('@material-ui/core'), require('react-hook-form'), require('moment'), require('lodash'), require('@material-ui/pickers'), require('moment-timezone'), require('@date-io/moment')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react', '@material-ui/core', 'react-hook-form', 'moment', 'lodash', '@material-ui/pickers', 'moment-timezone', '@date-io/moment'], 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, global.MomentUtils));
+})(this, (function (exports, React, core, reactHookForm, moment, lodash, pickers, moment$1, MomentUtils) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -28,6 +28,7 @@
     var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
     var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
     var moment__default$1 = /*#__PURE__*/_interopDefaultLegacy(moment$1);
+    var MomentUtils__default = /*#__PURE__*/_interopDefaultLegacy(MomentUtils);
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -780,6 +781,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(ReactHookFormProvider, {
+        options: options
+      }, /*#__PURE__*/React__default["default"].createElement(pickers.MuiPickersUtilsProvider, {
+        utils: MomentUtils__default["default"]
+      }, children));
+    };
+
     var ReactHookFormHiddenInput = function ReactHookFormHiddenInput(_a) {
       var name = _a.name,
           _b = _a.defaultValue,
@@ -803,7 +815,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.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/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.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.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.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/storyshots/Storyshots.spec.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/form-fields",
-  "version": "2.0.1",
+  "version": "2.1.3",
   "description": "GeoWeb form-fields library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -15,13 +15,13 @@
     "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",
     "moment": "^2.29.0",
-    "@opengeoweb/theme": "2.0.1",
+    "@opengeoweb/theme": "2.1.3",
     "@material-ui/lab": "^4.0.0-alpha.56",
     "@material-ui/icons": "^4.9.1",
+    "@material-ui/pickers": "^3.2.10",
     "moment-timezone": "^0.5.31",
+    "@date-io/moment": "^1.3.13",
     "lodash": "^4.17.20"
   }
 }