reorganization to support SSR for component library in docusaurus

platform/ui/package.json

@@ -24,7 +24,6 @@
     "build:package": "yarn run build"
   },
   "peerDependencies": {
-    "@ohif/core": "ˆ2.9.6",
     "react": "17.0.2",
     "react-dom": "17.0.2"
   },
@@ -33,6 +32,7 @@
     "classnames": "2.2.6",
     "lodash.debounce": "4.0.8",
     "moment": "2.24.0",
+    "mousetrap": "^1.6.5",
     "react-dates": "^21.8.0",
     "react-dnd": "14.0.2",
     "react-dnd-html5-backend": "14.0.0",
@@ -48,6 +48,6 @@
     "postcss": "^8.3.5",
     "postcss-loader": "^6.1.1",
     "prop-types": "15.7.2",
-    "tailwindcss": "1.6.2"
+    "tailwindcss": "2.2.4"
   }
 }

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,
 };

platform/ui/src/contextProviders/ModalComponent.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
-const ModalComponent = ({
+export const ModalComponent = ({
   content,
   contentProps,
   shouldCloseOnEsc,

platform/ui/src/index.js

@@ -98,5 +98,10 @@ export {
   WindowLevelMenuItem,
 } from './components';
 
+/** These are mostly used in the docs */
+export { getIcon, ICONS } from './components/Icon/getIcon';
+export { BackgroundColor } from './pages/Colors/BackgroundColor';
+export { ModalComponent } from './contextProviders/ModalComponent';
+
 /** VIEWS */
 export { StudyList, Viewer } from './views';

platform/ui/src/pages/Colors/BackgroundColor.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-const BackgroundColor = ({ color }) => {
+export const BackgroundColor = ({ color }) => {
   return (
     <div
       className={classnames(

platform/ui/src/utils/hotkeys/index.js

@@ -0,0 +1,14 @@
+import Mousetrap from 'mousetrap';
+import pausePlugin from './pausePlugin';
+import recordPlugin from './recordPlugin';
+
+Mousetrap.initialize = () => {
+  if (!Mousetrap._initialized) {
+    recordPlugin(Mousetrap);
+    pausePlugin(Mousetrap);
+
+    Mousetrap._initialized = true;
+  }
+};
+
+export default Mousetrap;

platform/ui/src/utils/hotkeys/pausePlugin.js

@@ -0,0 +1,32 @@
+/**
+ * adds a pause and unpause method to Mousetrap
+ * this allows you to enable or disable keyboard shortcuts
+ * without having to reset Mousetrap and rebind everything
+ *
+ * https://github.com/ccampbell/mousetrap/blob/master/plugins/pause/mousetrap-pause.js
+ */
+export default function(Mousetrap) {
+  var _originalStopCallback = Mousetrap.prototype.stopCallback;
+
+  Mousetrap.prototype.stopCallback = function(e, element, combo) {
+    var self = this;
+
+    if (self.paused) {
+      return true;
+    }
+
+    return _originalStopCallback.call(self, e, element, combo);
+  };
+
+  Mousetrap.prototype.pause = function() {
+    var self = this;
+    self.paused = true;
+  };
+
+  Mousetrap.prototype.unpause = function() {
+    var self = this;
+    self.paused = false;
+  };
+
+  Mousetrap.init();
+}

platform/ui/src/utils/hotkeys/recordPlugin.js

@@ -0,0 +1,218 @@
+/**
+ * This extension allows you to record a sequence using Mousetrap.
+ * {@link https://craig.is/killing/mice}
+ *
+ * @author Dan Tao <daniel.tao@gmail.com>
+ */
+export default function (Mousetrap) {
+  /**
+   * the sequence currently being recorded
+   *
+   * @type {Array}
+   */
+  var _recordedSequence = [],
+    /**
+     * a callback to invoke after recording a sequence
+     *
+     * @type {Function|null}
+     */
+    _recordedSequenceCallback = null,
+    /**
+     * a list of all of the keys currently held down
+     *
+     * @type {Array}
+     */
+    _currentRecordedKeys = [],
+    /**
+     * temporary state where we remember if we've already captured a
+     * character key in the current combo
+     *
+     * @type {boolean}
+     */
+    _recordedCharacterKey = false,
+    /**
+     * a handle for the timer of the current recording
+     *
+     * @type {null|number}
+     */
+    _recordTimer = null,
+    /**
+     * the original handleKey method to override when Mousetrap.record() is
+     * called
+     *
+     * @type {Function}
+     */
+    _origHandleKey = Mousetrap.prototype.handleKey;
+
+  /**
+   * handles a character key event
+   *
+   * @param {string} character
+   * @param {Array} modifiers
+   * @param {Event} e
+   * @returns void
+   */
+  function _handleKey(character, modifiers, e) {
+    var self = this;
+
+    if (!self.recording) {
+      _origHandleKey.apply(self, arguments);
+      return;
+    }
+
+    // remember this character if we're currently recording a sequence
+    if (e.type == 'keydown') {
+      if (character.length === 1 && _recordedCharacterKey) {
+        _recordCurrentCombo();
+      }
+
+      for (let i = 0; i < modifiers.length; ++i) {
+        _recordKey(modifiers[i]);
+      }
+      _recordKey(character);
+
+      // once a key is released, all keys that were held down at the time
+      // count as a keypress
+    } else if (e.type == 'keyup' && _currentRecordedKeys.length > 0) {
+      _recordCurrentCombo();
+    }
+  }
+
+  /**
+   * marks a character key as held down while recording a sequence
+   *
+   * @param {string} key
+   * @returns void
+   */
+  function _recordKey(key) {
+    // one-off implementation of Array.indexOf, since IE6-9 don't support it
+    for (let i = 0; i < _currentRecordedKeys.length; ++i) {
+      if (_currentRecordedKeys[i] === key) {
+        return;
+      }
+    }
+
+    _currentRecordedKeys.push(key);
+
+    if (key.length === 1) {
+      _recordedCharacterKey = true;
+    }
+  }
+
+  /**
+   * marks whatever key combination that's been recorded so far as finished
+   * and gets ready for the next combo
+   *
+   * @returns void
+   */
+  function _recordCurrentCombo() {
+    _recordedSequence.push(_currentRecordedKeys);
+    _currentRecordedKeys = [];
+    _recordedCharacterKey = false;
+    _finishRecording();
+  }
+
+  /**
+   * ensures each combo in a sequence is in a predictable order and formats
+   * key combos to be '+'-delimited
+   *
+   * modifies the sequence in-place
+   *
+   * @param {Array} sequence
+   * @returns void
+   */
+  function _normalizeSequence(sequence) {
+    for (let i = 0; i < sequence.length; ++i) {
+      sequence[i].sort(function (x, y) {
+        // modifier keys always come first, in alphabetical order
+        if (x.length > 1 && y.length === 1) {
+          return -1;
+        } else if (x.length === 1 && y.length > 1) {
+          return 1;
+        }
+
+        // character keys come next (list should contain no duplicates,
+        // so no need for equality check)
+        return x > y ? 1 : -1;
+      });
+
+      sequence[i] = sequence[i].join('+');
+    }
+  }
+
+  /**
+   * finishes the current recording, passes the recorded sequence to the stored
+   * callback, and sets Mousetrap.handleKey back to its original function
+   *
+   * @returns void
+   */
+  function _finishRecording() {
+    if (_recordedSequenceCallback) {
+      _normalizeSequence(_recordedSequence);
+      _recordedSequenceCallback(_recordedSequence);
+    }
+
+    // reset all recorded state
+    _recordedSequence = [];
+    _recordedSequenceCallback = null;
+    _currentRecordedKeys = [];
+  }
+
+  /**
+   * called to set a 1 second timeout on the current recording
+   *
+   * this is so after each key press in the sequence the recording will wait for
+   * 1 more second before executing the callback
+   *
+   * @returns void
+   */
+  function _restartRecordTimer() {
+    clearTimeout(_recordTimer);
+    _recordTimer = setTimeout(_finishRecording, 1000);
+  }
+
+  /**
+   * records the next sequence and passes it to a callback once it's
+   * completed
+   *
+   * @param {Function} callback
+   * @returns void
+   */
+  Mousetrap.prototype.record = function (callback) {
+    var self = this;
+    self.recording = true;
+    _recordedSequenceCallback = function () {
+      self.recording = false;
+      callback.apply(self, arguments);
+    };
+  };
+
+  /**
+   * stop recording
+   *
+   * @param {Function} callback
+   * @returns void
+   */
+  Mousetrap.prototype.stopRecord = function () {
+    var self = this;
+    self.recording = false;
+  };
+
+  /**
+   * start recording
+   *
+   * @param {Function} callback
+   * @returns void
+   */
+  Mousetrap.prototype.startRecording = function () {
+    var self = this;
+    self.recording = true;
+  };
+
+  Mousetrap.prototype.handleKey = function () {
+    var self = this;
+    _handleKey.apply(self, arguments);
+  };
+
+  Mousetrap.init();
+}

platform/ui/src/utils/index.js

@@ -1,7 +1,8 @@
 import getMockedStudies from './getMockedStudies';
+import hotkeys from './hotkeys';
 
-const utils = { getMockedStudies };
+const utils = { getMockedStudies, hotkeys };
 
-export { getMockedStudies };
+export { getMockedStudies, hotkeys };
 
 export default utils;

platform/ui/tailwind.config.js

@@ -2,7 +2,8 @@ module.exports = {
   prefix: '',
   important: false,
   separator: ':',
-  purge: ['./src/**/*.jsx'],
+  purge: false, // TODO: unclear how we should purge when using a component library in another app
+  //purge: ['./src/**/*.jsx', './src/**/*.js'],
   theme: {
     screens: {
       sm: '640px',
@@ -216,18 +217,18 @@ module.exports = {
     },
     borderColor: theme => ({
       ...theme('colors'),
-      default: theme('colors.gray.300', 'currentColor'),
+      DEFAULT: theme('colors.gray.300', 'currentColor'),
     }),
     borderRadius: {
       none: '0',
       sm: '0.125rem',
-      default: '0.25rem',
+      DEFAULT: '0.25rem',
       md: '0.375rem',
       lg: '0.5rem',
       full: '9999px',
     },
     borderWidth: {
-      default: '1px',
+      DEFAULT: '1px',
       '0': '0',
       '2': '2px',
       '4': '4px',
@@ -236,7 +237,7 @@ module.exports = {
     boxShadow: {
       xs: '0 0 0 1px rgba(0, 0, 0, 0.05)',
       sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-      default:
+      DEFAULT:
         '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
       md:
         '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
@@ -272,11 +273,11 @@ module.exports = {
     },
     flexGrow: {
       '0': '0',
-      default: '1',
+      DEFAULT: '1',
     },
     flexShrink: {
       '0': '0',
-      default: '1',
+      DEFAULT: '1',
     },
     fontFamily: {
       sans: [
@@ -695,7 +696,7 @@ module.exports = {
       none: 'none',
       all: 'all',
       height: 'height',
-      default:
+      DEFAULT:
         'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform',
       colors: 'background-color, border-color, color, fill, stroke',
       opacity: 'opacity',
@@ -748,7 +749,7 @@ module.exports = {
     ],
     borderRadius: ['responsive', 'focus', 'first', 'last'],
     borderStyle: ['responsive', 'focus'],
-    borderWidth: ['responsive', 'focus', 'first', 'last'],
+    //borderWidth: ['responsive', 'focus', 'first', 'last'],
     boxShadow: ['responsive', 'hover', 'focus'],
     boxSizing: ['responsive'],
     cursor: ['responsive'],