fix(storybook): Fixing broken UI Storybook components' pages (#3455)

platform/ui/src/components/AboutModal/AboutModal.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
-import { Typography, Icon } from '../';
 import PropTypes from 'prop-types';
 import detect from 'browser-detect';
 
+import Typography from '../Typography';
+import Icon from '../Icon';
+
 const Link = ({ href, children, showIcon = false }) => {
   return (
     <a href={href} target="_blank" rel="noopener noreferrer">

platform/ui/src/components/CinePlayer/CinePlayer.tsx

@@ -1,7 +1,10 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import debounce from 'lodash.debounce';
-import { Icon, Tooltip, InputRange } from '../';
+
+import Icon from '../Icon';
+import Tooltip from '../Tooltip';
+import InputRange from '../InputRange';
 
 import './CinePlayer.css';
 import classNames from 'classnames';

platform/ui/src/components/Dialog/Body.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
-import { Typography } from '..';
+import Typography from '../Typography';
 
 const Body = ({ text, className }) => {
   const theme = 'bg-primary-dark';

platform/ui/src/components/Dialog/Footer.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
-import { Button } from '..';
+import Button from '../Button';
 
 const Footer = ({ actions, className, onSubmit, value }) => {
   const flex = 'flex items-center justify-end';

platform/ui/src/components/Dialog/Header.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
-import { Typography, Icon } from '..';
+import Typography from '../Typography';
+import Icon from '../Icon';
 
 const CloseButton = ({ onClick }) => {
   return (

platform/ui/src/components/Dropdown/Dropdown.tsx

@@ -2,7 +2,8 @@ import React, { useEffect, useCallback, useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-import { Icon, Typography } from '../';
+import Icon from '../Icon';
+import Typography from '../Typography';
 
 const Dropdown = ({ id, children, showDropdownIcon, list, titleClassName }) => {
   const [open, setOpen] = useState(false);

platform/ui/src/components/EmptyStudies/EmptyStudies.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { Icon, Typography } from '../';
+
+import Icon from '../Icon';
+import Typography from '../Typography';
 
 // TODO: Add loading spinner to OHIF + use it here.
 const EmptyStudies = ({ className }) => {

platform/ui/src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -1,8 +1,10 @@
 import React, { useState } from 'react';
 import { ErrorBoundary as ReactErrorBoundary } from 'react-error-boundary';
-import { Icon, IconButton } from '@ohif/ui';
 import PropTypes from 'prop-types';
+
 import Modal from '../Modal';
+import Icon from '../Icon';
+import IconButton from '../IconButton';
 
 const isProduction = process.env.NODE_ENV === 'production';
 

platform/ui/src/components/ExpandableToolbarButton/ExpandableToolbarButton.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-import { IconButton, Icon } from '../';
+import IconButton from '../IconButton';
+import Icon from '../Icon';
 
 import './ExpandableToolbarButton.css';
 

platform/ui/src/components/Header/Header.tsx

@@ -2,7 +2,12 @@ import React, { ReactNode } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import classNames from 'classnames';
-import { NavBar, Svg, Icon, IconButton, Dropdown } from '../';
+
+import NavBar from '../NavBar';
+import Svg from '../Svg';
+import Icon from '../Icon';
+import IconButton from '../IconButton';
+import Dropdown from '../Dropdown';
 
 function Header({
   children,

platform/ui/src/components/HotkeysPreferences/HotkeysPreferences.tsx

@@ -1,9 +1,11 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { HotkeyField, Typography } from '../';
 import { useTranslation } from 'react-i18next';
 
+import HotkeyField from '../HotkeyField';
+import Typography from '../Typography';
+
 /* TODO: Move these configs and utils to core? */
 import { MODIFIER_KEYS } from './hotkeysConfig';
 import { validate, splitHotkeyDefinitionsAndCreateTuples } from './utils';

platform/ui/src/components/InputDateRange/InputDateRange.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { DateRange, InputLabelWrapper } from '../';
+import DateRange from '../DateRange';
+import InputLabelWrapper from '../InputLabelWrapper';
 
 const InputDateRange = ({
   id,
@@ -14,7 +15,7 @@ const InputDateRange = ({
 }) => {
   const { startDate, endDate } = value;
 
-  const onClickHandler = (event) => {
+  const onClickHandler = event => {
     event.preventDefault();
     onLabelClick(event);
   };
@@ -38,11 +39,11 @@ const InputDateRange = ({
   );
 };
 
-const noop = () => { };
+const noop = () => {};
 
 InputDateRange.defaultProps = {
   value: {},
-  onLabelClick: noop
+  onLabelClick: noop,
 };
 
 InputDateRange.propTypes = {

platform/ui/src/components/InputGroup/InputGroup.tsx

@@ -1,14 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import getGridWidthClass from '../../utils/getGridWidthClass'
+import getGridWidthClass from '../../utils/getGridWidthClass';
 
-import {
+import InputText from '../InputText';
-  InputText,
+import InputDateRange from '../InputDateRange';
-  InputDateRange,
+import InputMultiSelect from '../InputMultiSelect';
-  InputMultiSelect,
+import InputLabelWrapper from '../InputLabelWrapper';
-  InputLabelWrapper,
-} from '../';
 
 const InputGroup = ({
   inputMeta,

platform/ui/src/components/InputLabelWrapper/InputLabelWrapper.tsx

@@ -3,11 +3,12 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { useTranslation } from 'react-i18next';
 
-import { Icon } from '../';
+import Icon from '../Icon';
 
 const baseLabelClassName =
   'flex flex-col flex-1 text-white text-lg pl-1 select-none';
-const spanClassName = 'flex flex-row items-center cursor-pointer focus:outline-none';
+const spanClassName =
+  'flex flex-row items-center cursor-pointer focus:outline-none';
 const sortIconMap = {
   descending: 'sorting-active-up',
   ascending: 'sorting-active-down',
@@ -22,7 +23,7 @@ const InputLabelWrapper = ({
   className,
   children,
 }) => {
-  const { t } = useTranslation("StudyList")
+  const { t } = useTranslation('StudyList');
 
   const onClickHandler = e => {
     if (!isSortable) {

platform/ui/src/components/InputMultiSelect/InputMultiSelect.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Select, InputLabelWrapper } from '../';
+import Select from '../Select';
+import InputLabelWrapper from '../InputLabelWrapper';
 
 const InputMultiSelect = ({
   id,

platform/ui/src/components/InputText/InputText.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Input, InputLabelWrapper } from '../';
+import Input from '../Input';
+import InputLabelWrapper from '../InputLabelWrapper';
 
 const InputText = ({
   id,
@@ -36,7 +37,7 @@ const InputText = ({
 InputText.defaultProps = {
   value: '',
   isSortable: false,
-  onLabelClick: () => { },
+  onLabelClick: () => {},
   sortDirection: 'none',
 };
 

platform/ui/src/components/LegacyCinePlayer/LegacyCinePlayer.tsx

@@ -1,7 +1,9 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import debounce from 'lodash.debounce';
-import { IconButton, Icon } from '../';
+
+import IconButton from '../IconButton';
+import Icon from '../Icon';
 
 import './LegacyCinePlayerCustomInputRange.css';
 

platform/ui/src/components/LegacyPatientInfo/LegacyPatientInfo.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
-import { Icon, Tooltip } from '../';
 import { useTranslation } from 'react-i18next';
 
+import Icon from '../Icon';
+import Tooltip from '../Tooltip';
+
 const classes = {
   infoHeader: 'text-base text-primary-light',
   infoText: 'text-base text-white max-w-24 truncate',

platform/ui/src/components/LegacyViewportActionBar/LegacyViewportActionBar.tsx

@@ -1,10 +1,14 @@
 import React, { useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Icon, ButtonGroup, Button, LegacyCinePlayer } from '../';
 import useOnClickOutside from '../../utils/useOnClickOutside';
-import LegacyPatientInfo from '../LegacyPatientInfo';
 import { StringNumber } from '../../types';
 
+import LegacyPatientInfo from '../LegacyPatientInfo';
+import Icon from '../Icon';
+import ButtonGroup from '../ButtonGroup';
+import Button from '../Button';
+import LegacyCinePlayer from '../LegacyCinePlayer';
+
 const LegacyViewportActionBar = ({
   studyData,
   showNavArrows,
@@ -75,7 +79,7 @@ const LegacyViewportActionBar = ({
       <div className="flex flex-1 grow mt-2 min-w-48">
         <div className="flex items-center">
           <span className="mr-2 text-white text-large">{label}</span>
-          {showStatus && getStatusComponent()}
+          {showStatus && getStatusComponent && getStatusComponent()}
         </div>
         <div className="flex flex-col justify-start ml-4">
           <div className="flex">

platform/ui/src/components/LoadingIndicatorProgress/LoadingIndicatorProgress.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
-import { Icon } from '@ohif/ui';
+
+import Icon from '../Icon';
 import ProgressLoadingBar from '../ProgressLoadingBar';
 
 /**

platform/ui/src/components/MeasurementTable/MeasurementItem.tsx

@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { Icon } from '../';
+
+import Icon from '../Icon';
 
 const MeasurementItem = ({
   uid,

platform/ui/src/components/MeasurementTable/__stories__/measurementTable.stories.mdx

@@ -34,6 +34,13 @@ MeasurementTable is a component that renders the MeasurementTables.
     name="Overview"
     args={{
       title: 'Measurements',
+      servicesManager: {
+        services: {
+          customizationService: {
+            getCustomization: (title, data) => data.content,
+          }
+        },
+      },
     }}
   >
     {MeasurementTableTemplate.bind({})}
@@ -62,6 +69,13 @@ With data
           isActive: false,
         },
       ],
+      servicesManager: {
+        services: {
+          customizationService: {
+            getCustomization: (title, data) => data,
+          }
+        },
+      },
     }}
   >
     {MeasurementTableTemplate.bind({})}

platform/ui/src/components/Modal/Modal.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ReactModal from 'react-modal';
+import { useModal } from '../../contextProviders';
+
+import Icon from '../Icon';
+import Typography from '../Typography';
 
 import './Modal.css';
 
-import { Typography, Icon } from '../';
-import { useModal } from '../../contextProviders';
-
 if (typeof document !== 'undefined') {
   ReactModal.setAppElement(document.getElementById('root'));
 }

platform/ui/src/components/Notification/Notification.tsx

@@ -1,7 +1,9 @@
 import React, { useEffect, useRef } from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
-import { Button, Icon } from '../';
+
+import Button from '../Button';
+import Icon from '../Icon';
 
 const Notification = ({
   id,

platform/ui/src/components/PatientInfo/PatientInfo.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
-import { Icon, Tooltip } from '../';
 import { useTranslation } from 'react-i18next';
 
+import Icon from '../Icon';
+import Tooltip from '../Tooltip';
+
 const classes = {
   infoHeader: 'text-base text-primary-light',
   infoText: 'text-base text-white max-w-24 truncate',

platform/ui/src/components/SegmentationGroupTable/SegmentationConfig.tsx

@@ -1,7 +1,11 @@
 import React, { useState } from 'react';
-import { Icon, InputRange, CheckBox, InputNumber } from '../';
 import classNames from 'classnames';
 
+import Icon from '../Icon';
+import InputRange from '../InputRange';
+import CheckBox from '../CheckBox';
+import InputNumber from '../InputNumber';
+
 const ActiveSegmentationConfig = ({
   config,
   setRenderOutline,

platform/ui/src/components/SegmentationGroupTable/SegmentationGroupSegment.tsx

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

platform/ui/src/components/SegmentationTable/SegmentationItem.tsx

@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { Icon } from '../';
+
+import Icon from '../Icon';
 
 const SegmentationItem = ({
   id,

platform/ui/src/components/SegmentationTable/SegmentationTable.tsx

@@ -1,8 +1,9 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Icon } from '../';
 import SegmentationItem from './SegmentationItem';
 
+import Icon from '../Icon';
+
 const SegmentationTable = ({
   title,
   segmentations,

platform/ui/src/components/Select/Select.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import ReactSelect, { components } from 'react-select';
-import { Icon } from '@ohif/ui';
+
+import Icon from '../Icon';
 
 import './Select.css';
 

platform/ui/src/components/SidePanel/SidePanel.tsx

@@ -13,7 +13,10 @@ import { Swiper, SwiperSlide } from 'swiper/react';
 
 import { PanelService, ServicesManager, Types } from '@ohif/core';
 
-import { Button, Icon, IconButton, Tooltip } from '../';
+import Button from '../Button';
+import Icon from '../Icon';
+import IconButton from '../IconButton';
+import Tooltip from '../Tooltip';
 
 import 'swiper/css';
 import 'swiper/css/navigation';
@@ -75,7 +78,7 @@ const SidePanel = ({
   activeTabIndex: activeTabIndexProp,
   tabs,
 }) => {
-  const panelService: PanelService = servicesManager.services.panelService;
+  const panelService: PanelService = servicesManager?.services?.panelService;
 
   const { t } = useTranslation('SidePanel');
 
@@ -128,23 +131,25 @@ const SidePanel = ({
   );
 
   useEffect(() => {
-    const activatePanelSubscription = panelService.subscribe(
+    if (panelService) {
-      panelService.EVENTS.ACTIVATE_PANEL,
+      const activatePanelSubscription = panelService.subscribe(
-      (activatePanelEvent: Types.ActivatePanelEvent) => {
+        panelService.EVENTS.ACTIVATE_PANEL,
-        if (!hasBeenOpened || activatePanelEvent.forceActive) {
+        (activatePanelEvent: Types.ActivatePanelEvent) => {
-          const tabIndex = tabs.findIndex(
+          if (!hasBeenOpened || activatePanelEvent.forceActive) {
-            tab => tab.id === activatePanelEvent.panelId
+            const tabIndex = tabs.findIndex(
-          );
+              tab => tab.id === activatePanelEvent.panelId
-          if (tabIndex !== -1) {
+            );
-            updateActiveTabIndex(tabIndex);
+            if (tabIndex !== -1) {
+              updateActiveTabIndex(tabIndex);
+            }
           }
         }
-      }
+      );
-    );
 
-    return () => {
+      return () => {
-      activatePanelSubscription.unsubscribe();
+        activatePanelSubscription.unsubscribe();
-    };
+      };
+    }
   }, [tabs, hasBeenOpened, panelService, updateActiveTabIndex]);
 
   const getCloseStateComponent = () => {

platform/ui/src/components/SidePanel/__stories__/sidePanel.stories.mdx

@@ -32,6 +32,16 @@ SidePanel is a component that renders the SidePanels.
     args={{
       side: 'left',
       defaultComponentOpen: 'Example',
+      tabs: [
+        {
+          id: 'tab1',
+          name: 'tab1',
+          label: 'Tab 1',
+          iconName: 'group-layers',
+          iconLabel: 'group-layers',
+          content: () => <div class="text-primary-light p-3">Hello</div>,
+        }
+      ],
       childComponents: [
         {
           iconName: 'home',

platform/ui/src/components/SplitButton/SplitButton.tsx

@@ -4,7 +4,10 @@ import classNames from 'classnames';
 import OutsideClickHandler from 'react-outside-click-handler';
 import { useTranslation } from 'react-i18next';
 
-import { Icon, Tooltip, ListMenu, ToolbarButton } from '../';
+import Icon from '../Icon';
+import Tooltip from '../Tooltip';
+import ListMenu from '../ListMenu';
+import ToolbarButton from '../ToolbarButton';
 
 const baseClasses = {
   Button:
@@ -92,7 +95,7 @@ const SplitButton = ({
 }) => {
   const { t } = useTranslation('Buttons');
 
-  const { toolbarService } = servicesManager.services;
+  const { toolbarService } = servicesManager?.services || {};
 
   const { primaryToolId, toggles } = bState;
   /* Bubbles up individual item clicks */
@@ -146,7 +149,7 @@ const SplitButton = ({
     (isPrimaryToggle && toggles[state.primary.id] === true);
 
   const PrimaryButtonComponent =
-    toolbarService.getButtonComponentForUIType(state.primary.uiType) ??
+    toolbarService?.getButtonComponentForUIType(state.primary.uiType) ??
     ToolbarButton;
 
   const primaryButtonClassName = classes.Primary({

platform/ui/src/components/StudyBrowser/StudyBrowser.tsx

@@ -2,7 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 
-import { ButtonGroup, Button, StudyItem, ThumbnailList } from '../';
+import StudyItem from '../StudyItem';
+import ButtonGroup from '../ButtonGroup';
+import Button from '../Button';
+import ThumbnailList from '../ThumbnailList';
 import { StringNumber } from '../../types';
 
 const getTrackedSeries = displaySets => {
@@ -171,7 +174,7 @@ StudyBrowser.propTypes = {
   ),
 };
 
-const noop = () => { };
+const noop = () => {};
 
 StudyBrowser.defaultProps = {
   onClickTab: noop,

platform/ui/src/components/StudyItem/StudyItem.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-import { Icon } from '../';
+import Icon from '../Icon';
 
 const baseClasses =
   'first:border-0 border-t border-secondary-light cursor-pointer select-none outline-none';

platform/ui/src/components/StudyListExpandedRow/StudyListExpandedRow.tsx

@@ -2,7 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 
-import { Table, TableHead, TableBody, TableRow, TableCell } from '../';
+import Table from '../Table';
+import TableHead from '../TableHead';
+import TableBody from '../TableBody';
+import TableRow from '../TableRow';
+import TableCell from '../TableCell';
 
 const StudyListExpandedRow = ({
   seriesTableColumns,
@@ -11,7 +15,6 @@ const StudyListExpandedRow = ({
 }) => {
   const { t } = useTranslation('StudyList');
 
-
   return (
     <div className="w-full bg-black py-4 pl-12 pr-2">
       <div className="block">{children}</div>

platform/ui/src/components/StudyListFilter/StudyListFilter.tsx

@@ -2,7 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 
-import { Button, Icon, Typography, InputGroup } from '../';
+import Button from '../Button';
+import Icon from '../Icon';
+import Typography from '../Typography';
+import InputGroup from '../InputGroup';
 
 const StudyListFilter = ({
   filtersMeta,

platform/ui/src/components/StudyListPagination/StudyListPagination.tsx

@@ -1,8 +1,12 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Button, ButtonGroup, Typography, Select } from '../';
 import { useTranslation } from 'react-i18next';
 
+import Button from '../Button';
+import ButtonGroup from '../ButtonGroup';
+import Typography from '../Typography';
+import Select from '../Select';
+
 const StudyListPagination = ({
   onChangePage,
   currentPage,

platform/ui/src/components/StudyListTable/StudyListTableRow.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { Icon } from '../';
 import getGridWidthClass from '../../utils/getGridWidthClass';
 
+import Icon from '../Icon';
+
 const StudyListTableRow = props => {
   const { tableData } = props;
   const { row, expandedContent, onClickRow, isExpanded } = tableData;

platform/ui/src/components/Thumbnail/Thumbnail.tsx

@@ -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 '../';
+import Icon from '../Icon';
 import { StringNumber } from '../../types';
 
 /**

platform/ui/src/components/ThumbnailList/ThumbnailList.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Thumbnail, ThumbnailNoImage, ThumbnailTracked } from '../';
+import Thumbnail from '../Thumbnail';
+import ThumbnailNoImage from '../ThumbnailNoImage';
+import ThumbnailTracked from '../ThumbnailTracked';
 import * as Types from '../../types';
 
 const ThumbnailList = ({

platform/ui/src/components/ThumbnailNoImage/ThumbnailNoImage.tsx

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

platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.tsx

@@ -2,7 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-import { Icon, Thumbnail, Tooltip } from '../';
+import Icon from '../Icon';
+import Thumbnail from '../Thumbnail';
+import Tooltip from '../Tooltip';
 import { StringNumber } from '../../types';
 
 const ThumbnailTracked = ({

platform/ui/src/components/ToolbarButton/ToolbarButton.tsx

@@ -2,7 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-import { IconButton, Icon, Tooltip } from '../';
+import IconButton from '../IconButton';
+import Icon from '../Icon';
+import Tooltip from '../Tooltip';
 
 const ToolbarButton = ({
   type = 'tool',

platform/ui/src/components/TooltipClipboard/TooltipClipboard.tsx

@@ -1,7 +1,8 @@
 import React, { useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { Icon } from '../';
+
+import Icon from '../Icon';
 
 const DELAY_TO_SHOW = 1000;
 const DELAY_TO_HIDE = 10; // it needs at least a little delay to prevent tooltip to suddenly hide

platform/ui/src/components/UserPreferences/UserPreferences.tsx

@@ -1,8 +1,12 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Select, Typography, Button, HotkeysPreferences } from '../';
 import { useTranslation } from 'react-i18next';
 
+import Select from '../Select';
+import Typography from '../Typography';
+import Button from '../Button';
+import HotkeysPreferences from '../HotkeysPreferences';
+
 const UserPreferences = ({
   availableLanguages,
   defaultLanguage,

platform/ui/src/components/Viewport/Viewport.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { LegacyViewportActionBar, Notification } from '../';
+import LegacyViewportActionBar from '../LegacyViewportActionBar';
+import Notification from '../Notification';
 
 const Viewport = ({
   viewportId,

platform/ui/src/components/ViewportActionBar/ViewportActionBar.tsx

@@ -7,10 +7,11 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { Icon } from '..';
 import { useResizeObserver } from '../../hooks';
 import useOnClickOutside from '../../utils/useOnClickOutside';
+
 import PatientInfo from '../PatientInfo';
+import Icon from '../Icon';
 
 export type ViewportActionBarProps = {
   studyData: any;

platform/ui/src/components/ViewportDownloadForm/ViewportDownloadForm.tsx

@@ -7,16 +7,14 @@ import React, {
 } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import {
+import Typography from '../Typography';
-  Typography,
+import Input from '../Input';
-  Input,
+import Tooltip from '../Tooltip';
-  Tooltip,
+import IconButton from '../IconButton';
-  IconButton,
+import Icon from '../Icon';
-  Icon,
+import Select from '../Select';
-  Select,
+import InputLabelWrapper from '../InputLabelWrapper';
-  InputLabelWrapper,
+import Button from '../Button';
-  Button,
-} from '../';
 
 const FILE_TYPE_OPTIONS = [
   {