@opengeoweb/shared 2.0.1 → 2.1.0

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

@@ -1,2 +1,9 @@
 import * as React from 'react';
-export declare const AlertBanners: () => React.ReactElement;
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const AlertBanners: {
+    (): React.ReactElement;
+    storyName: string;
+};

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

@@ -1,2 +1,6 @@
 import * as React from 'react';
-export declare const ConfirmationDialog: () => React.ReactElement;
+export declare const ConfirmationDialogExample: () => React.ReactElement;
+export declare const ConfirmationDialogSnapshot: {
+    (): React.ReactElement;
+    storyName: string;
+};

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

@@ -1,2 +1,14 @@
 import * as React from 'react';
+declare const _default: {
+    title: string;
+};
+export default _default;
 export declare const CustomSliderComponent: () => React.ReactElement;
+export declare const CustomSliderLightTheme: {
+    (): React.ReactElement;
+    storyName: string;
+};
+export declare const CustomSliderDarkTheme: {
+    (): React.ReactElement;
+    storyName: string;
+};

package/lib/components/ErrorBoundary/ErrorBoundary.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+interface ErrorBoundaryProps {
+    children: React.ReactNode;
+    onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+}
+interface ErrorBoundaryState {
+    error?: Error;
+    errorInfo?: React.ErrorInfo;
+}
+/**
+ * ErrorBoundary
+ * Wrap this component around parts of your application. It will catch any uncaught errors and display an alert, and allows you to continue using the rest of your application.
+ *
+ * @example
+ * ``` <ErrorBoundary><ExampleComponent /></ErrorBoundary> ```
+ */
+export declare class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    static defaultProps: {
+        onError: () => void;
+    };
+    private constructor();
+    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
+    render(): React.ReactNode;
+}
+export default ErrorBoundary;

package/lib/components/ErrorBoundary/ErrorBoundary.spec.d.ts

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

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

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export declare const ErrorBoundaryDemo: {
+    (): React.ReactElement;
+    storyName: string;
+};

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

@@ -0,0 +1 @@
+export { ErrorBoundary } from './ErrorBoundary';

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

@@ -1,2 +1,9 @@
 import React from 'react';
-export declare const StatusTags: () => React.ReactElement;
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const StatusTags: {
+    (): React.ReactElement;
+    storyName: string;
+};

package/lib/components/UserMenu/CheatSheet/CheatSheet.stories.d.ts

@@ -5,3 +5,11 @@ declare const _default: {
 export default _default;
 export declare const ThemeLight: () => React.ReactElement;
 export declare const ThemeDark: () => React.ReactElement;
+export declare const ThemeLightSnapShot: {
+    (): React.ReactElement;
+    storyName: string;
+};
+export declare const ThemeDarkSnapShot: {
+    (): React.ReactElement;
+    storyName: string;
+};

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

@@ -5,3 +5,11 @@ declare const _default: {
 export default _default;
 export declare const ThemeLight: () => React.ReactElement;
 export declare const ThemeDark: () => React.ReactElement;
+export declare const ThemeLightSnapShot: {
+    (): React.ReactElement;
+    storyName: string;
+};
+export declare const ThemeDarkSnapShot: {
+    (): React.ReactElement;
+    storyName: string;
+};

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

@@ -1,8 +1,6 @@
-export * from './AlertBanner/AlertBanner.stories';
-export * from './StatusTag/StatusTag.stories';
 export * from './AppHeader/AppHeader.stories';
 export * from './ConfirmationDialog/ConfirmationDialog.stories';
-export * from './CustomSlider/CustomSlider.stories';
+export * from './ErrorBoundary/ErrorBoundary.stories';
 declare const _default: {
     title: string;
 };

package/lib/components/index.d.ts

@@ -4,6 +4,7 @@ export * from './AlertBanner';
 export * from './AppLayout';
 export * from './AppHeader';
 export * from './DraggableResizable';
+export * from './ErrorBoundary';
 export * from './UserMenu';
 export * from './ToolContainer';
 export * from './CustomSlider';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/shared",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "GeoWeb shared library with shared components and utils for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -14,13 +14,13 @@
   "peerDependencies": {
     "react": "16.14.0",
     "@material-ui/lab": "^4.0.0-alpha.56",
-    "@opengeoweb/theme": "2.0.1",
+    "@opengeoweb/theme": "2.1.0",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
     "react-draggable": "^4.4.3",
     "re-resizable": "^6.9.0",
     "lodash": "^4.17.20",
-    "@opengeoweb/form-fields": "2.0.1",
+    "@opengeoweb/form-fields": "2.1.0",
     "react-hook-form": "^6.12.1",
     "@material-ui/pickers": "^3.2.10",
     "@date-io/moment": "^1.3.13",

package/shared.esm.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import React__default from 'react';
-import { Box, Typography, makeStyles, Dialog, DialogTitle, IconButton, DialogContent, DialogActions, Button, SvgIcon, Grid, useTheme, Avatar, Paper, ClickAwayListener, MenuList, MenuItem, RadioGroup, FormControlLabel, Radio, List, ListItem, Tabs, Tab, Backdrop, withStyles, Slider } from '@material-ui/core';
+import { Box, Typography, makeStyles, Dialog, DialogTitle, IconButton, DialogContent, DialogActions, Button, SvgIcon, Grid, useTheme, Link, Avatar, Paper, ClickAwayListener, MenuList, MenuItem, RadioGroup, FormControlLabel, Radio, List, ListItem, Tabs, Tab, Backdrop, withStyles, Slider } from '@material-ui/core';
 import { Close, DragIndicator } from '@material-ui/icons';
 import { useFormContext } from 'react-hook-form';
 import { isEmpty, errorMessages } from '@opengeoweb/form-fields';
@@ -172,7 +172,8 @@ var ConfirmationDialog = function ConfirmationDialog(_a) {
     onClick: function onClick() {
       return onClose('CANCELLED');
     },
-    autoFocus: true
+    autoFocus: true,
+    disableRipple: true
   }, cancelLabel), /*#__PURE__*/React.createElement(Button, {
     "data-testid": "conformationDialog-confirm",
     color: "secondary",
@@ -181,6 +182,28 @@ var ConfirmationDialog = function ConfirmationDialog(_a) {
   }, confirmLabel)));
 };
 
+function _classCallCheck(instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
+  }
+}
+
+function _defineProperties(target, props) {
+  for (var i = 0; i < props.length; i++) {
+    var descriptor = props[i];
+    descriptor.enumerable = descriptor.enumerable || false;
+    descriptor.configurable = true;
+    if ("value" in descriptor) descriptor.writable = true;
+    Object.defineProperty(target, descriptor.key, descriptor);
+  }
+}
+
+function _createClass(Constructor, protoProps, staticProps) {
+  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+  if (staticProps) _defineProperties(Constructor, staticProps);
+  return Constructor;
+}
+
 function _defineProperty(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
@@ -196,6 +219,85 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 
+function _inherits(subClass, superClass) {
+  if (typeof superClass !== "function" && superClass !== null) {
+    throw new TypeError("Super expression must either be null or a function");
+  }
+
+  subClass.prototype = Object.create(superClass && superClass.prototype, {
+    constructor: {
+      value: subClass,
+      writable: true,
+      configurable: true
+    }
+  });
+  if (superClass) _setPrototypeOf(subClass, superClass);
+}
+
+function _getPrototypeOf(o) {
+  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+    return o.__proto__ || Object.getPrototypeOf(o);
+  };
+  return _getPrototypeOf(o);
+}
+
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+
+  return _setPrototypeOf(o, p);
+}
+
+function _isNativeReflectConstruct() {
+  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+  if (Reflect.construct.sham) return false;
+  if (typeof Proxy === "function") return true;
+
+  try {
+    Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+function _assertThisInitialized(self) {
+  if (self === void 0) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
+
+  return self;
+}
+
+function _possibleConstructorReturn(self, call) {
+  if (call && (typeof call === "object" || typeof call === "function")) {
+    return call;
+  }
+
+  return _assertThisInitialized(self);
+}
+
+function _createSuper(Derived) {
+  var hasNativeReflectConstruct = _isNativeReflectConstruct();
+
+  return function _createSuperInternal() {
+    var Super = _getPrototypeOf(Derived),
+        result;
+
+    if (hasNativeReflectConstruct) {
+      var NewTarget = _getPrototypeOf(this).constructor;
+
+      result = Reflect.construct(Super, arguments, NewTarget);
+    } else {
+      result = Super.apply(this, arguments);
+    }
+
+    return _possibleConstructorReturn(this, result);
+  };
+}
+
 function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
@@ -906,6 +1008,89 @@ var ResizeComponent = function ResizeComponent(_a) {
   }, props), children);
 };
 
+/**
+ * ErrorBoundary
+ * Wrap this component around parts of your application. It will catch any uncaught errors and display an alert, and allows you to continue using the rest of your application.
+ *
+ * @example
+ * ``` <ErrorBoundary><ExampleComponent /></ErrorBoundary> ```
+ */
+
+var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
+  _inherits(ErrorBoundary, _React$Component);
+
+  var _super = _createSuper(ErrorBoundary);
+
+  function ErrorBoundary(props) {
+    var _this;
+
+    _classCallCheck(this, ErrorBoundary);
+
+    _this = _super.call(this, props);
+    _this.state = {
+      error: null,
+      errorInfo: null
+    };
+    return _this;
+  }
+
+  _createClass(ErrorBoundary, [{
+    key: "componentDidCatch",
+    value: function componentDidCatch(error, errorInfo) {
+      var onError = this.props.onError;
+      this.setState({
+        error: error,
+        errorInfo: errorInfo
+      });
+      onError(error, errorInfo);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$state = this.state,
+          error = _this$state.error,
+          errorInfo = _this$state.errorInfo;
+      var children = this.props.children;
+
+      if (error) {
+        return /*#__PURE__*/React.createElement("div", {
+          style: {
+            whiteSpace: 'pre-wrap'
+          }
+        }, /*#__PURE__*/React.createElement(AlertBanner, {
+          severity: "error",
+          title: "Woops, an error has occurred. Please report the error shown below and reload the page if needed.",
+          info: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("br", null), error.toString(), /*#__PURE__*/React.createElement("br", null), errorInfo && errorInfo.componentStack, /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Link, {
+            underline: "always",
+            style: {
+              cursor: 'pointer'
+            },
+            onClick: function onClick() {
+              return window.location.reload();
+            }
+          }, "Reload page"))
+        }));
+      }
+
+      return children;
+    }
+  }], [{
+    key: "getDerivedStateFromError",
+    value: function getDerivedStateFromError(error) {
+      return {
+        error: error
+      };
+    }
+  }]);
+
+  return ErrorBoundary;
+}(React.Component);
+ErrorBoundary.defaultProps = {
+  onError: function onError() {
+    return null;
+  }
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -2217,4 +2402,4 @@ var getAxiosErrorMessage = function getAxiosErrorMessage(error) {
   return 'An error has occurred';
 };
 
-export { AlertBanner, AppHeader, AppLayout, ConfirmationDialog, ConfirmationServiceProvider, CustomSlider, DraggableComponent$1 as Draggable, HIDDEN_INPUT_HELPER_IS_DRAFT, ResizeComponent as Resizable, StatusTag, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, UserMenu, UserMenuItemCheatSheet, MenuItemTheme as UserMenuItemTheme, getAxiosErrorMessage, getInitials, isAxiosError, showPrompt, sliderStyles, useConfirmationDialog, useDialogActions, useDraftFormHelpers, useIsMounted, usePoller, usePreventBrowserClose, usePrevious, useUserMenu };
+export { AlertBanner, AppHeader, AppLayout, ConfirmationDialog, ConfirmationServiceProvider, CustomSlider, DraggableComponent$1 as Draggable, ErrorBoundary, HIDDEN_INPUT_HELPER_IS_DRAFT, ResizeComponent as Resizable, StatusTag, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, UserMenu, UserMenuItemCheatSheet, MenuItemTheme as UserMenuItemTheme, getAxiosErrorMessage, getInitials, isAxiosError, showPrompt, sliderStyles, useConfirmationDialog, useDialogActions, useDraftFormHelpers, useIsMounted, usePoller, usePreventBrowserClose, usePrevious, useUserMenu };

package/shared.umd.js

@@ -42,6 +42,22 @@
     OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
     PERFORMANCE OF THIS SOFTWARE.
     ***************************************************************************** */
+    /* global Reflect, Promise */
+
+    var extendStatics = function(d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+
+    function __extends(d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    }
 
     var __assign = function() {
         __assign = Object.assign || function __assign(t) {
@@ -208,7 +224,8 @@
         onClick: function onClick() {
           return onClose('CANCELLED');
         },
-        autoFocus: true
+        autoFocus: true,
+        disableRipple: true
       }, cancelLabel), /*#__PURE__*/React__namespace.createElement(core.Button, {
         "data-testid": "conformationDialog-confirm",
         color: "secondary",
@@ -853,6 +870,81 @@
       }, props), children);
     };
 
+    /**
+     * ErrorBoundary
+     * Wrap this component around parts of your application. It will catch any uncaught errors and display an alert, and allows you to continue using the rest of your application.
+     *
+     * @example
+     * ``` <ErrorBoundary><ExampleComponent /></ErrorBoundary> ```
+     */
+
+    var ErrorBoundary =
+    /** @class */
+    function (_super) {
+      __extends(ErrorBoundary, _super);
+
+      function ErrorBoundary(props) {
+        var _this = _super.call(this, props) || this;
+
+        _this.state = {
+          error: null,
+          errorInfo: null
+        };
+        return _this;
+      }
+
+      ErrorBoundary.getDerivedStateFromError = function (error) {
+        return {
+          error: error
+        };
+      };
+
+      ErrorBoundary.prototype.componentDidCatch = function (error, errorInfo) {
+        var onError = this.props.onError;
+        this.setState({
+          error: error,
+          errorInfo: errorInfo
+        });
+        onError(error, errorInfo);
+      };
+
+      ErrorBoundary.prototype.render = function () {
+        var _a = this.state,
+            error = _a.error,
+            errorInfo = _a.errorInfo;
+        var children = this.props.children;
+
+        if (error) {
+          return /*#__PURE__*/React__namespace.createElement("div", {
+            style: {
+              whiteSpace: 'pre-wrap'
+            }
+          }, /*#__PURE__*/React__namespace.createElement(AlertBanner, {
+            severity: "error",
+            title: "Woops, an error has occurred. Please report the error shown below and reload the page if needed.",
+            info: /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("br", null), error.toString(), /*#__PURE__*/React__namespace.createElement("br", null), errorInfo && errorInfo.componentStack, /*#__PURE__*/React__namespace.createElement("br", null), /*#__PURE__*/React__namespace.createElement("br", null), /*#__PURE__*/React__namespace.createElement(core.Link, {
+              underline: "always",
+              style: {
+                cursor: 'pointer'
+              },
+              onClick: function onClick() {
+                return window.location.reload();
+              }
+            }, "Reload page"))
+          }));
+        }
+
+        return children;
+      };
+
+      ErrorBoundary.defaultProps = {
+        onError: function onError() {
+          return null;
+        }
+      };
+      return ErrorBoundary;
+    }(React__namespace.Component);
+
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -2203,6 +2295,7 @@
     exports.ConfirmationServiceProvider = ConfirmationServiceProvider;
     exports.CustomSlider = CustomSlider;
     exports.Draggable = DraggableComponent$1;
+    exports.ErrorBoundary = ErrorBoundary;
     exports.HIDDEN_INPUT_HELPER_IS_DRAFT = HIDDEN_INPUT_HELPER_IS_DRAFT;
     exports.Resizable = ResizeComponent;
     exports.StatusTag = StatusTag;