reorganization to support SSR for component library in docusaurus

platform/ui/src/components/HotkeyField/HotkeyField.jsx

@@ -1,14 +1,10 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 
-import { hotkeys } from '@ohif/core';
 import Input from '../Input';
-
+import { hotkeys } from '../../utils/'
 import { getKeys, formatKeysForInput } from './utils';
 
-
-
-
 /**
  * HotkeyField
  * Renders a hotkey input that records keys
@@ -23,6 +19,10 @@ import { getKeys, formatKeysForInput } from './utils';
 const HotkeyField = ({ disabled, keys, onChange, className, modifierKeys }) => {
   const inputValue = formatKeysForInput(keys);
 
+  useEffect(() => {
+    hotkeys.initialize();
+  }, [])
+
   const onInputKeyDown = event => {
     event.stopPropagation();
     event.preventDefault();

platform/ui/src/components/Icon/getIcon.jsx

@@ -144,4 +144,4 @@ export default function getIcon(key, props) {
   return React.createElement(ICONS[key], props);
 }
 
-export { ICONS };
+export { getIcon, ICONS };

platform/ui/src/components/LayoutSelector/LayoutSelector.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
-function LayoutSelector({ onSelection }) {
+export function LayoutSelector({ onSelection }) {
   const [hoveredIndex, setHoveredIndex] = useState();
   const hoverX = hoveredIndex % 3;
   const hoverY = Math.floor(hoveredIndex / 3);

platform/ui/src/components/ThemeWrapper/ThemeWrapper.js

@@ -2,7 +2,7 @@ import React from 'react';
 import '../../tailwind.css';
 import '../../assets/styles/styles.css';
 
-const ThemeWrapper = ({ children }) => (
+export const ThemeWrapper = ({ children }) => (
   <React.Fragment>{children}</React.Fragment>
 );
 

platform/ui/src/components/ViewportDownloadForm/ViewportDownloadForm.jsx

@@ -34,7 +34,7 @@ const FILE_TYPE_OPTIONS = [
 const DEFAULT_FILENAME = 'image';
 const REFRESH_VIEWPORT_TIMEOUT = 1000;
 
-const ViewportDownloadForm = ({
+export const ViewportDownloadForm = ({
   activeViewport,
   onClose,
   updateViewportPreview,

platform/ui/src/components/ViewportGrid/ViewportGrid.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-function ViewportGrid({ numRows, numCols, children }) {
+export function ViewportGrid({ numRows, numCols, children }) {
   const rowSize = 100 / numRows;
   const colSize = 100 / numCols;
 

platform/ui/src/components/ViewportPane/ViewportPane.jsx

@@ -6,7 +6,7 @@ import { useDrop } from 'react-dnd';
 // NOTE: If we found a way to make `useDrop` conditional,
 // Or we provided a HOC of this component, we could provide
 // this UI without the DragAndDropContext dependency.
-function ViewportPane({
+export function ViewportPane({
   children,
   className,
   isActive,

platform/ui/src/components/index.js

@@ -126,5 +126,5 @@ export {
   ViewportDownloadForm,
   ViewportGrid,
   ViewportPane,
-  WindowLevelMenuItem
+  WindowLevelMenuItem,
 };