Fix broken UI package build (#1990)

* Use path instead of alias

* Add missing pacakges

* Use path in viewers

* Use path in contextProviders

* Add base to config

* Add conditionals for window

* Copy config to avoid breaking build

* Update and lock versions

* Update lock file

* Remove scaling config

* Fix broken versions of react date

* Fix broken dev

platform/ui/src/contextProviders/DialogProvider.jsx

@@ -11,7 +11,12 @@ import PropTypes from 'prop-types';
 import Draggable from 'react-draggable';
 import classNames from 'classnames';
 
-import { utils } from '@ohif/core';
+/*
+ * This is a workaround to import things from ohif/core as docz does
+ * not allow us to access window element and @ohif/core does use it once
+ * we import to instanciate cornerstone
+ */
+import guid from './../../../core/src/utils/guid';
 
 import './DialogProvider.css';
 
@@ -88,7 +93,7 @@ const DialogProvider = ({ children, service }) => {
 
     let dialogId = id;
     if (!dialogId) {
-      dialogId = utils.guid();
+      dialogId = guid();
     }
 
     setDialogs(dialogs => [...dialogs, { ...props, id: dialogId }]);
@@ -172,7 +177,7 @@ const DialogProvider = ({ children, service }) => {
           defaultPosition={position}
           bounds="parent"
           onStart={event => {
-            const e = event || window.event;
+            const e = event || (typeof window !== 'undefined' && window.event);
             const target = e.target || e.srcElement;
             const BLACKLIST = [
               'SVG',

platform/ui/src/contextProviders/DragAndDropProvider.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { DndProvider } from 'react-dnd';
 import HTML5Backend from 'react-dnd-html5-backend';
-import TouchBackend from 'react-dnd-touch-backend';
+// import TouchBackend from 'react-dnd-touch-backend';
 
 // TODO: this is false when it should not be :thinking:
 const isTouchDevice =

platform/ui/src/contextProviders/ModalProvider.mdx

@@ -4,7 +4,7 @@ route: customHooks/modalProvider
 ---
 
 import { Props } from 'docz';
-import { ModalProvider } from '@ohif/ui';
+import { ModalProvider } from '../contextProviders';
 import ModalComponent from './ModalComponent.jsx';
 
 # Modal Context Provider

platform/ui/src/contextProviders/SnackbarProvider.jsx

@@ -92,15 +92,17 @@ const SnackbarProvider = ({ children, service }) => {
     setSnackbarItems(() => []);
   };
 
-  /**
-   * expose snackbar methods to window for debug purposes
-   * TODO: Check if it's really necessary
-   */
-  window.snackbar = {
-    show,
-    hide,
-    hideAll,
-  };
+  if (typeof window !== 'undefined') {
+    /**
+     * expose snackbar methods to window for debug purposes
+     * TODO: Check if it's really necessary
+     */
+    window.snackbar = {
+      show,
+      hide,
+      hideAll,
+    };
+  }
 
   return (
     <SnackbarContext.Provider value={{ show, hide, hideAll, snackbarItems }}>
@@ -133,7 +135,7 @@ SnackbarProvider.propTypes = {
 export const withSnackbar = Component => {
   return function WrappedComponent(props) {
     const snackbarContext = {
-      ...useSnackbarContext(),
+      ...useSnackbar(),
     };
     return <Component {...props} snackbarContext={snackbarContext} />;
   };

platform/ui/src/contextProviders/ViewportDialogProvider.jsx

@@ -41,10 +41,7 @@ const ViewportDialogProvider = ({ children, service }) => {
 
   useEffect(() => {
     if (service) {
-      service.setServiceImplementation({
-        hide,
-        show,
-      });
+      service.setServiceImplementation({ hide, show });
     }
   }, [hide, service, show]);
 

platform/ui/src/contextProviders/ViewportDialogProvider.mdx

@@ -6,15 +6,11 @@ route: customHooks/viewportDialogProvider
 import { Playground, Props } from 'docz';
 
 <!-- This is a workaround to import things from ohif/core as docz does not allow us to access window element and @ohif/core does use it once we import to instanciate cornerstone -->
-import { UIViewportDialogService, ServicesManager } from './../../../core/src/services';
+import UIViewportDialogService from './../../../core/src/services/UIViewportDialogService';
+import ServicesManager from './../../../core/src/services/ServicesManager';
 
-import {
-  ViewportDialogProvider,
-  Dialog,
-  Button,
-  useViewportDialog,
-  Notification,
-} from '@ohif/ui';
+import { Dialog, Button, Notification } from '../components';
+import { ViewportDialogProvider, useViewportDialog } from '../contextProviders';
 
 # Viewport Dialog Provider
 
@@ -47,20 +43,18 @@ component across all application.
               value: 1,
             },
           ]}
-          onSubmit={value => { window.alert(value); }}
+          onSubmit={value => {
+            if (typeof window !== 'undefined') {
+              window.alert(value);
+            }
+          }}
         />
       );
     };
     const ViewportActionButtons = () => {
-      const dialog = useViewportDialog();
+    const [dialogState, dialogApi] = useViewportDialog();
       return (
-        <Button
-          onClick={() =>
-            dialog.show({
-              content: ViewportNotification,
-            })
-          }
-        >
+        <Button onClick={() => dialogApi.show({ content: ViewportNotification })}>
           Open Dialog
         </Button>
       );
@@ -114,7 +108,11 @@ component across all application.
               value: 1,
             },
           ]}
-          onSubmit={value => { window.alert(value); }}
+          onSubmit={value => {
+            if (typeof window !== 'undefined') {
+              window.alert(value);
+            }
+          }}
         />
       );
     };
@@ -124,6 +122,7 @@ component across all application.
     // Get service instance
     const _UIViewportDialogService =
       servicesManager.services.UIViewportDialogService;
+      console.log(_UIViewportDialogService);
     return (
       <div className="w-full flex flex-col p-4" style={{height: '400px'}}>
         <div className="flex flex-2">
@@ -175,7 +174,6 @@ component across all application.
   }}
 </Playground>
 
-
 ## Properties:
 
 <Props of={ViewportDialogProvider} />