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
2020-08-14 14:25:08 -04:00
1 parent e04f74499f
commit ef163cd702
@@ -5,7 +5,7 @@ route: components/button
 ---

 import { Playground, Props } from 'docz';
-import { Button, IconButton, Icon } from '@ohif/ui';
+import { Button, IconButton, Icon } from '../';

 # Button

@@ -5,7 +5,7 @@ route: components/buttonGroup
 ---

 import { Playground, Props } from 'docz';
-import { ButtonGroup, Button, IconButton, Icon } from '@ohif/ui';
+import { ButtonGroup, Button, IconButton, Icon } from '../';

 # ButtonGroup

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Typography } from '@ohif/ui';
+import { Typography } from '../';

 const ContextMenu = ({ items }) => {
  return (
@@ -5,7 +5,7 @@ route: components/contextMenu
 ---

 import { Playground, Props } from 'docz';
-import { ContextMenu } from '@ohif/ui';
+import { ContextMenu } from '../';

 # Context Menu

@@ -1,4 +1,4 @@
-import { ContextMenu } from '@ohif/ui';
+import { ContextMenu } from '../';
 import PropTypes from 'prop-types';
 import React from 'react';

@@ -1,14 +1,13 @@
-/** REACT DATES */
-import 'react-dates/initialize';
-import 'react-dates/lib/css/_datepicker.css';
-import { DateRangePicker, isInclusivelyBeforeDay } from 'react-dates';
-import './DateRange.css';
-
 import React, { useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
-
 import moment from 'moment';

+/** REACT DATES */
+import { DateRangePicker, isInclusivelyBeforeDay } from 'react-dates';
+import 'react-dates/initialize';
+import 'react-dates/lib/css/_datepicker.css';
+import './DateRange.css';
+
 const today = moment();
 const lastWeek = moment().subtract(7, 'day');
 const lastMonth = moment().subtract(1, 'month');
@@ -90,7 +89,7 @@ const DateRange = (props) => {
      onYearSelect(month, event.target.value);
    };

-    const handleOnBlur = () => {};
+    const handleOnBlur = () => { };

    return (
      <div className="flex justify-center">
@@ -6,7 +6,7 @@ route: components/date-range

 import { useState } from 'react';
 import { Playground, Props } from 'docz';
-import { DateRange } from '@ohif/ui';
+import { DateRange } from '../';

 # Date Range

@@ -2,7 +2,7 @@ import React, { useEffect, useCallback, useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';

-import { Icon, Typography } from '@ohif/ui';
+import { Icon, Typography } from '../';

 const Dropdown = ({ children, showDropdownIcon, list }) => {
  const [open, setOpen] = useState(false);
@@ -5,7 +5,7 @@ route: components/dropdown
 ---

 import { Playground, Props } from 'docz';
-import { Dropdown, IconButton, Icon } from '@ohif/ui';
+import { Dropdown, IconButton, Icon } from '../';

 # Dropdown

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { Icon, Typography } from '@ohif/ui';
+import { Icon, Typography } from '../';

 // TODO: Add loading spinner to OHIF + use it here.
 const EmptyStudies = ({ className, isLoading }) => {
@@ -5,7 +5,7 @@ route: components/empty-studies
 ---

 import { Playground, Props } from 'docz';
-import { EmptyStudies } from '@ohif/ui';
+import { EmptyStudies } from '../';

 # Empty Studies

@@ -61,7 +61,7 @@ const ErrorBoundary = ({
      title={'Something went wrong'}
      onClose={() => {
        setIsOpen(false);
-        if (fallbackRoute) {
+        if (fallbackRoute && typeof window !== 'undefined') {
          window.location = fallbackRoute;
        }
      }}
@@ -5,7 +5,7 @@ route: components/errorBoundary
 ---

 import { Playground, Props } from 'docz';
-import { ErrorBoundary } from '@ohif/ui';
+import { ErrorBoundary } from '../';

 # Error Boundary

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';

-import { IconButton, Icon } from '@ohif/ui';
+import { IconButton, Icon } from '../';

 import './ExpandableToolbarButton.css';

@@ -6,7 +6,7 @@ route: components/expandableToolbarButton

 import { useState } from 'react';
 import { Playground, Props } from 'docz';
-import { ExpandableToolbarButton, ListMenu } from '@ohif/ui';
+import { ExpandableToolbarButton, ListMenu } from '../';

 # Toolbar Button

@@ -5,7 +5,7 @@ route: components/icon
 ---

 import { Playground, Props } from 'docz';
-import { Icon } from '@ohif/ui';
+import { Icon } from '../';
 import { ICONS } from './getIcon';

 # Icon
@@ -5,7 +5,7 @@ route: components/input
 ---

 import { Playground, Props } from 'docz';
-import { Input } from '@ohif/ui';
+import { Input } from '../';

 # Input

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';

-import { DateRange, InputLabelWrapper } from '@ohif/ui';
+import { DateRange, InputLabelWrapper } from '../';

 const InputDateRange = ({
  label,
@@ -6,7 +6,7 @@ route: components/InputDateRange

 import { useState } from 'react';
 import { Playground, Props } from 'docz';
-import { InputDateRange } from '@ohif/ui';
+import { InputDateRange } from '../';

 # Input Date Range

@@ -7,7 +7,7 @@ import {
  InputDateRange,
  InputMultiSelect,
  InputLabelWrapper,
-} from '@ohif/ui';
+} from '../';

 const InputGroup = ({
  inputMeta,
@@ -6,7 +6,7 @@ route: components/InputGroup

 import { useState } from 'react';
 import { Playground, Props } from 'docz';
-import { InputGroup } from '@ohif/ui';
+import { InputGroup } from '../';

 # Input Group

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';

-import { Icon } from '@ohif/ui';
+import { Icon } from '../';

 const baseLabelClassName =
  'flex flex-col flex-1 text-white text-lg pl-1 select-none';
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';

-import { Select, InputLabelWrapper } from '@ohif/ui';
+import { Select, InputLabelWrapper } from '../';

 const InputMultiSelect = ({
  label,
@@ -6,7 +6,7 @@ route: components/InputMultiSelect

 import { useState } from 'react';
 import { Playground, Props } from 'docz';
-import { InputMultiSelect } from '@ohif/ui';
+import { InputMultiSelect } from '../';

 # Input Multi Select

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';

-import { Input, InputLabelWrapper } from '@ohif/ui';
+import { Input, InputLabelWrapper } from '../';

 const InputText = ({
  label,
@@ -6,7 +6,7 @@ route: components/InputText

 import { useState } from 'react';
 import { Playground, Props } from 'docz';
-import { InputText } from '@ohif/ui';
+import { InputText } from '../';

 # Input Text

@@ -5,7 +5,7 @@ route: components/label
 ---

 import { Playground, Props } from 'docz';
-import { Label } from '@ohif/ui';
+import { Label } from '../';

 # Label

@@ -6,7 +6,7 @@ route: components/listMenu

 import { useState } from 'react';
 import { Playground, Props } from 'docz';
-import { ListMenu } from '@ohif/ui';
+import { ListMenu } from '../';

 # List Menu

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { Icon } from '@ohif/ui';
+import { Icon } from '../';

 const MeasurementItem = ({ id, index, label, displayText, isActive, onClick, onEdit }) => {
  const [isHovering, setIsHovering] = useState(false);
@@ -6,7 +6,7 @@ route: components/measurementTable

 import { useState } from 'react';
 import { Playground, Props } from 'docz';
-import { MeasurementTable } from '@ohif/ui';
+import { MeasurementTable } from '../';

 # Measurement Table

@@ -4,9 +4,10 @@ import ReactModal from 'react-modal';

 import './Modal.css';

-import { Typography, useModal, Icon } from '@ohif/ui';
+import { Typography, Icon } from '../../components';
+import { useModal } from '../../contextProviders';

-ReactModal.setAppElement(document.getElementById('root'));
+if (typeof document !== 'undefined') ReactModal.setAppElement(document.getElementById('root'));

 const Modal = ({
  closeButton,
@@ -5,7 +5,7 @@ route: components/navBar
 ---

 import { Playground, Props } from 'docz';
-import { NavBar, Typography } from '@ohif/ui';
+import { NavBar, Typography } from '../';

 # NavBar

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
-import { Button, Icon } from '@ohif/ui';
+import { Button, Icon } from '../';

 const Notification = ({ type, message, actions, onSubmit, onOutsideClick }) => {
  const notificationRef = useRef(null);
@@ -5,7 +5,7 @@ route: components/notification
 ---

 import { Playground, Props } from 'docz';
-import { Notification } from '@ohif/ui';
+import { Notification } from '../';

 # Notification

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { Icon } from '@ohif/ui';
+import { Icon } from '../';

 const SegmentationTable = ({ title, amount, data }) => {
  const [activeItem, setActiveItem] = useState(null);
@@ -5,7 +5,7 @@ route: components/segmentationTable
 ---

 import { Playground, Props } from 'docz';
-import { SegmentationTable } from '@ohif/ui';
+import { SegmentationTable } from '../';

 # Segmentation Table

@@ -5,7 +5,7 @@ route: components/select
 ---

 import { Playground, Props } from 'docz';
-import { Select } from '@ohif/ui';
+import { Select } from '../';

 # Select

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';

-import { Button, Icon } from '@ohif/ui';
+import { Button, Icon } from '../';

 const borderSize = 4;
 const expandedWidth = 248;
@@ -5,7 +5,7 @@ route: components/sidePanel
 ---

 import { Playground, Props } from 'docz';
-import { SidePanel } from '@ohif/ui';
+import { SidePanel } from '../';

 # SidePanel

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';

-import { ButtonGroup, Button, StudyItem, ThumbnailList } from '@ohif/ui';
+import { ButtonGroup, Button, StudyItem, ThumbnailList } from '../';

 const buttonClasses = 'text-white text-base border-none bg-black p-2 min-w-18';
 const activeButtonClasses = 'bg-primary-main';
@@ -5,7 +5,7 @@ route: components/studyBrowser
 ---

 import { Playground, Props } from 'docz';
-import { StudyBrowser } from '@ohif/ui';
+import { StudyBrowser } from '../';

 # StudyBrowser

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';

-import { Icon } from '@ohif/ui';
+import { Icon } from '../';

 const baseClasses =
  'first:border-0 border-t border-secondary-light cursor-pointer select-none outline-none';
@@ -6,7 +6,7 @@ route: components/studyItem

 import { useState } from 'react';
 import { Playground, Props } from 'docz';
-import { StudyItem } from '@ohif/ui';
+import { StudyItem } from '../';

 # StudyItem

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';

-import { Table, TableHead, TableBody, TableRow, TableCell } from '@ohif/ui';
+import { Table, TableHead, TableBody, TableRow, TableCell } from '../';

 const StudyListExpandedRow = ({
  seriesTableColumns,
@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';

-import { Button, Icon, Typography, InputGroup, useModal } from '@ohif/ui';
+import { Button, Icon, Typography, InputGroup } from '../../components';
+import { useModal } from '../../contextProviders';

 const StudyListFilter = ({
  filtersMeta,
@@ -6,7 +6,7 @@ route: components/studyListFilter

 import { useState } from 'react';
 import { Playground, Props } from 'docz';
-import { StudyListFilter } from '@ohif/ui';
+import { StudyListFilter } from '../';

 # Study List Filter

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, ButtonGroup, Icon, Typography } from '@ohif/ui';
+import { Button, ButtonGroup, Icon, Typography } from '../';

 const StudyListPagination = ({
  onChangePage,
@@ -6,7 +6,7 @@ route: components/studyListPagination

 import { useState } from 'react';
 import { Playground, Props } from 'docz';
-import { StudyListPagination } from '@ohif/ui';
+import { StudyListPagination } from '../';

 # StudyListPagination

@@ -6,7 +6,7 @@ route: components/studyListTable

 import { useState } from 'react';
 import { Playground, Props } from 'docz';
-import { StudyListTable } from '@ohif/ui';
+import { StudyListTable } from '../';

 # StudyListTable

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { Icon } from '@ohif/ui';
+import { Icon } from '../';

 const StudyListTableRow = props => {
  const { tableData } = props;
@@ -5,7 +5,7 @@ route: components/table
 ---

 import { Playground, Props, Link } from 'docz';
-import { Table, TableHead, TableBody, TableRow, TableCell } from '@ohif/ui';
+import { Table, TableHead, TableBody, TableRow, TableCell } from '../';

 # Table

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { useDrag } from 'react-dnd';
-import { Icon } from '@ohif/ui';
+import { Icon } from '../';

 /**
 *
@@ -5,7 +5,7 @@ route: components/thumbnail
 ---

 import { Playground, Props } from 'docz';
-import { Thumbnail } from '@ohif/ui';
+import { Thumbnail } from '../';

 # Thumbnail

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';

-import { Thumbnail, ThumbnailNoImage, ThumbnailTracked } from '@ohif/ui';
+import { Thumbnail, ThumbnailNoImage, ThumbnailTracked } from '../';

 const ThumbnailList = ({
  thumbnails,
@@ -2,7 +2,7 @@ import React from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import { useDrag } from 'react-dnd';
-import { Icon, Tooltip, Typography } from '@ohif/ui';
+import { Icon, Tooltip, Typography } from '../';

 const ThumbnailNoImage = ({
  displaySetInstanceUID,
@@ -5,7 +5,7 @@ route: components/ThumbnailNoImage
 ---

 import { Playground, Props } from 'docz';
-import { ThumbnailNoImage } from '@ohif/ui';
+import { ThumbnailNoImage } from '../';

 # ThumbnailNoImage

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';

-import { Icon, Thumbnail, Tooltip } from '@ohif/ui';
+import { Icon, Thumbnail, Tooltip } from '../';

 const ThumbnailTracked = ({
  displaySetInstanceUID,
@@ -5,7 +5,7 @@ route: components/ThumbnailTracked
 ---

 import { Playground, Props } from 'docz';
-import { ThumbnailTracked } from '@ohif/ui';
+import { ThumbnailTracked } from '../';

 # ThumbnailTracked

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';

-import { IconButton, Icon, Tooltip } from '@ohif/ui';
+import { IconButton, Icon, Tooltip } from '../';

 const ToolbarButton = ({
  type,
@@ -6,7 +6,7 @@ route: components/toolbarButton

 import { useState } from 'react';
 import { Playground, Props } from 'docz';
-import { ToolbarButton } from '@ohif/ui';
+import { ToolbarButton } from '../';

 # Toolbar Button

@@ -5,7 +5,7 @@ route: components/tooltip
 ---

 import { Playground, Props } from 'docz';
-import { Tooltip, Typography } from '@ohif/ui';
+import { Tooltip, Typography } from '../';

 # Tooltip

@@ -1,7 +1,7 @@
 import React, { useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { Icon } from '@ohif/ui';
+import { Icon } from '../';

 const DELAY_TO_SHOW = 1000;
 const DELAY_TO_HIDE = 10; // it needs at least a little delay to prevent tooltip to suddenly hide
@@ -92,12 +92,20 @@ const TooltipClipboard = ({ children, text }) => {
  useEffect(() => {
    if (isActive) {
      refreshElementPosition();
-      window.addEventListener('scroll', refreshElementPosition);
+      if (typeof window !== 'undefined') {
+        window.addEventListener('scroll', refreshElementPosition);
+      }
    } else {
-      window.removeEventListener('scroll', refreshElementPosition);
+      if (typeof window !== 'undefined') {
+        window.removeEventListener('scroll', refreshElementPosition);
+      }
    }

-    return () => window.removeEventListener('scroll', refreshElementPosition);
+    return () => {
+      if (typeof window !== 'undefined') {
+        window.removeEventListener('scroll', refreshElementPosition);
+      }
+    };
  }, [isActive]);

  const onClickHandler = e => {
@@ -5,7 +5,7 @@ route: components/tooltipClipboard
 ---

 import { Playground, Props } from 'docz';
-import { TooltipClipboard } from '@ohif/ui';
+import { TooltipClipboard } from '../';

 # Tooltip Clipboard

@@ -5,7 +5,7 @@ route: components/typography
 ---

 import { Playground, Props } from 'docz';
-import { Typography } from '@ohif/ui';
+import { Typography } from '../';

 # Typography

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ViewportActionBar, Notification, Button } from '@ohif/ui';
+import { ViewportActionBar, Notification, Button } from '../';

 const Viewport = ({ viewportIndex, onSeriesChange, studyData, children }) => {
  return (
@@ -33,7 +33,7 @@ const Viewport = ({ viewportIndex, onSeriesChange, studyData, children }) => {
            },
          ]}
          onSubmit={value => {
-            window.alert(value);
+            if (typeof window !== 'undefined') window.alert(value);
          }}
        />
      </div>
@@ -5,7 +5,7 @@ route: components/viewport
 ---

 import { Playground, Props } from 'docz';
-import { Viewport } from '@ohif/ui';
+import { Viewport } from '../';

 # Viewport

@@ -1,7 +1,7 @@
 import React, { useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { Icon, ButtonGroup, Button, Tooltip } from '@ohif/ui';
+import { Icon, ButtonGroup, Button, Tooltip } from '../';
 import useOnClickOutside from '../../utils/useOnClickOutside';

 const classes = {
@@ -5,7 +5,7 @@ route: components/viewportActionBar
 ---

 import { Playground, Props } from 'docz';
-import { ViewportActionBar } from '@ohif/ui';
+import { ViewportActionBar } from '../';

 # Viewport Action Bar

@@ -17,7 +17,7 @@ import {
  Select,
  InputLabelWrapper,
  Button,
-} from '@ohif/ui';
+} from '../';

 const FILE_TYPE_OPTIONS = [
  {
@@ -5,7 +5,8 @@ route: components/viewportGrid
 ---

 import { Playground, Props } from 'docz';
-import { DragAndDropProvider, ViewportGrid } from '@ohif/ui';
+import { DragAndDropProvider } from '../../contextProviders';
+import { ViewportGrid } from '../../components';

 # ViewportGrid

@@ -5,7 +5,8 @@ route: components/viewport-pane
 ---

 import { Playground, Props } from 'docz';
-import { DragAndDropProvider, ViewportGrid, ViewportPane } from '@ohif/ui';
+import { ViewportGrid, ViewportPane } from '../../components';
+import { DragAndDropProvider } from '../../contextProviders';

 # ViewportPane