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

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(
-      panelService.EVENTS.ACTIVATE_PANEL,
-      (activatePanelEvent: Types.ActivatePanelEvent) => {
-        if (!hasBeenOpened || activatePanelEvent.forceActive) {
-          const tabIndex = tabs.findIndex(
-            tab => tab.id === activatePanelEvent.panelId
-          );
-          if (tabIndex !== -1) {
-            updateActiveTabIndex(tabIndex);
+    if (panelService) {
+      const activatePanelSubscription = panelService.subscribe(
+        panelService.EVENTS.ACTIVATE_PANEL,
+        (activatePanelEvent: Types.ActivatePanelEvent) => {
+          if (!hasBeenOpened || activatePanelEvent.forceActive) {
+            const tabIndex = tabs.findIndex(
+              tab => tab.id === activatePanelEvent.panelId
+            );
+            if (tabIndex !== -1) {
+              updateActiveTabIndex(tabIndex);
+            }
           }
         }
-      }
-    );
+      );
 
-    return () => {
-      activatePanelSubscription.unsubscribe();
-    };
+      return () => {
+        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',