wire up UI Services

platform/ui/src/components/Modal/Modal.jsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ReactModal from 'react-modal';
+import classNames from 'classnames';
+
+const customStyle = {
+  overlay: {
+    zIndex: 1071,
+    backgroundColor: 'rgb(0, 0, 0, 0.5)',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+};
+
+ReactModal.setAppElement(document.getElementById('root'));
+
+const Modal = ({
+  className,
+  closeButton,
+  shouldCloseOnEsc,
+  isOpen,
+  title,
+  onClose,
+  children,
+}) => {
+  const renderHeader = () => {
+    return (
+      title && (
+        <header>
+          <h4>{title}</h4>
+          {closeButton && (
+            <button data-cy="close-button" onClick={onClose}>
+              ×
+            </button>
+          )}
+        </header>
+      )
+    );
+  };
+
+  return (
+    <ReactModal
+      className={classNames(className)}
+      shouldCloseOnEsc={shouldCloseOnEsc}
+      isOpen={isOpen}
+      title={title}
+      style={customStyle}
+    >
+      <>
+        {renderHeader()}
+        <section>{children}</section>
+      </>
+    </ReactModal>
+  );
+};
+
+Modal.propTypes = {
+  className: PropTypes.string,
+  closeButton: PropTypes.bool,
+  shouldCloseOnEsc: PropTypes.bool,
+  isOpen: PropTypes.bool,
+  title: PropTypes.string,
+  onClose: PropTypes.func,
+  /** The modal's content */
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+  ]).isRequired,
+};
+
+export default Modal;

platform/ui/src/components/Modal/index.js

@@ -0,0 +1,2 @@
+import Modal from './Modal';
+export default Modal;

platform/ui/src/components/Snackbar/SnackbarContainer.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import SnackbarItem from './SnackbarItem';
+import { useSnackbar } from '../../contextProviders';
+
+const SnackbarContainer = () => {
+  const { snackbarItems, hide } = useSnackbar();
+
+  const renderItem = item => {
+    return <SnackbarItem key={item.itemId} options={item} onClose={hide} />;
+  };
+
+  if (!snackbarItems) {
+    return null;
+  }
+
+  const renderItems = () => {
+    const items = {
+      topLeft: [],
+      topCenter: [],
+      topRight: [],
+      bottomLeft: [],
+      bottomCenter: [],
+      bottomRight: [],
+    };
+
+    snackbarItems.map(item => {
+      items[item.position].push(item);
+    });
+
+    return (
+      <div>
+        {Object.keys(items).map(pos => {
+          if (!items[pos].length) {
+            return null;
+          }
+
+          return (
+            <div key={pos} className={`sb-container sb-${pos}`}>
+              {items[pos].map((item, index) => (
+                <div key={item.id + index}>{renderItem(item)}</div>
+              ))}
+            </div>
+          );
+        })}
+      </div>
+    );
+  };
+
+  return <>{renderItems()}</>;
+};
+
+export default SnackbarContainer;

platform/ui/src/components/Snackbar/SnackbarItem.jsx

@@ -0,0 +1,27 @@
+import React, { useEffect } from 'react';
+
+const SnackbarItem = ({ options, onClose }) => {
+  const handleClose = () => {
+    onClose(options.id);
+  };
+
+  useEffect(() => {
+    if (options.autoClose) {
+      setTimeout(() => {
+        handleClose();
+      }, options.duration);
+    }
+  }, []);
+
+  return (
+    <div>
+      <span onClick={handleClose}>
+        <span>x</span>
+      </span>
+      {options.title && <div>{options.title}</div>}
+      {options.message && <div>{options.message}</div>}
+    </div>
+  );
+};
+
+export default SnackbarItem;

platform/ui/src/components/Snackbar/SnackbarTypes.js

@@ -0,0 +1,6 @@
+export default {
+  INFO: 'info',
+  WARNING: 'warning',
+  SUCCESS: 'success',
+  ERROR: 'error',
+};

platform/ui/src/components/index.js

@@ -14,6 +14,7 @@ import InputText from './InputText';
 import Label from './Label';
 import MeasurementsPanel from './MeasurementsPanel';
 import MeasurementTable from './MeasurementTable';
+import Modal from './Modal';
 import NavBar from './NavBar';
 import Notification from './Notification';
 import Select from './Select';
@@ -62,6 +63,7 @@ export {
   Label,
   MeasurementsPanel,
   MeasurementTable,
+  Modal,
   NavBar,
   Notification,
   Select,