feat(typings): Enhance typing support with withAppTypes and custom services throughout OHIF (#4090)

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

@@ -23,7 +23,7 @@ function Header({
   Secondary,
   appConfig,
   ...props
-}): ReactNode {
+}: withAppTypes): ReactNode {
   const { t } = useTranslation('Header');
 
   // TODO: this should be passed in as a prop instead and the react-router-dom

platform/ui/src/components/HeaderPatientInfo/HeaderPatientInfo.tsx

@@ -13,7 +13,7 @@ const formatWithEllipsis = (str, maxLength) => {
   return str;
 };
 
-function usePatientInfo(servicesManager) {
+function usePatientInfo(servicesManager: AppTypes.ServicesManager) {
   const { displaySetService } = servicesManager.services;
 
   const [patientInfo, setPatientInfo] = useState({
@@ -70,7 +70,7 @@ function usePatientInfo(servicesManager) {
   return { patientInfo, isMixedPatients };
 }
 
-function HeaderPatientInfo({ servicesManager, appConfig }) {
+function HeaderPatientInfo({ servicesManager, appConfig }: withAppTypes) {
   const initialExpandedState =
     appConfig.showPatientInfo === PatientInfoVisibility.VISIBLE ||
     appConfig.showPatientInfo === PatientInfoVisibility.VISIBLE_READONLY;

platform/ui/src/components/LegacySidePanel/LegacySidePanel.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import SwiperCore, { A11y, Controller, Navigation, Pagination, Scrollbar } from 'swiper';
 import { Swiper, SwiperSlide } from 'swiper/react';
 
-import { PanelService, ServicesManager, Types } from '@ohif/core';
+import { Types } from '@ohif/core';
 
 import LegacyButton from '../LegacyButton';
 import Icon from '../Icon';
@@ -71,8 +71,8 @@ const LegacySidePanel = ({
   className,
   activeTabIndex: activeTabIndexProp,
   tabs,
-}) => {
-  const panelService: PanelService = servicesManager?.services?.panelService;
+}: withAppTypes) => {
+  const panelService = servicesManager?.services?.panelService;
 
   const { t } = useTranslation('LegacySidePanel');
 
@@ -288,7 +288,7 @@ LegacySidePanel.defaultProps = {
 };
 
 LegacySidePanel.propTypes = {
-  servicesManager: PropTypes.instanceOf(ServicesManager),
+  servicesManager: PropTypes.object.isRequired,
   side: PropTypes.oneOf(['left', 'right']).isRequired,
   className: PropTypes.string,
   activeTabIndex: PropTypes.number,

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

@@ -1,12 +1,17 @@
 import React from 'react';
-import { ServicesManager } from '@ohif/core';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 
 import MeasurementItem from './MeasurementItem';
 
-const MeasurementTable = ({ data, title, onClick, onEdit, onDelete, servicesManager }) => {
-  servicesManager = servicesManager as ServicesManager;
+const MeasurementTable = ({
+  data,
+  title,
+  onClick,
+  onEdit,
+  onDelete,
+  servicesManager,
+}: withAppTypes) => {
   const { customizationService, measurementService } = servicesManager.services;
   const { t } = useTranslation('MeasurementTable');
   const amount = data.length;

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

@@ -30,7 +30,7 @@ const StudyBrowser = ({
   onClickUntrack,
   activeDisplaySetInstanceUIDs,
   servicesManager,
-}) => {
+}: withAppTypes) => {
   const { t } = useTranslation('StudyBrowser');
   const { customizationService } = servicesManager?.services || {};
 

platform/ui/src/components/Toolbox/Toolbox.tsx

@@ -13,7 +13,13 @@ import { useToolbox } from '../../contextProviders';
  * role in enhancing the app with a toolbox by providing a way to integrate
  * and display various tools and their corresponding options
  */
-function Toolbox({ servicesManager, buttonSectionId, commandsManager, title, ...props }) {
+function Toolbox({
+  servicesManager,
+  buttonSectionId,
+  commandsManager,
+  title,
+  ...props
+}: withAppTypes) {
   const { state: toolboxState, api } = useToolbox(buttonSectionId);
   const { onInteraction, toolbarButtons } = useToolbar({
     servicesManager,

platform/ui/src/components/Toolbox/ToolboxUI.tsx

@@ -15,7 +15,7 @@ function usePrevious(value) {
 /**
  * Just refactoring from the toolbox component to make it more readable
  */
-function ToolboxUI(props) {
+function ToolboxUI(props: withAppTypes) {
   const {
     toolbarButtons,
     handleToolSelect,