feat(ui): move to React 18 and base for using shadcn/ui (#4174)

Co-authored-by: IbrahimCSAE <ibrahim.mdev@gmail.com>

extensions/default/package.json

@@ -37,8 +37,8 @@
     "dcmjs": "^0.29.12",
     "dicomweb-client": "^0.10.4",
     "prop-types": "^15.6.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-i18next": "^12.2.2",
     "react-window": "^1.8.9",
     "webpack": "^5.50.0",

extensions/default/src/Toolbar/LegacyLayoutSelector.tsx

@@ -2,7 +2,13 @@ import React, { useEffect, useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { LayoutSelector as OHIFLayoutSelector, ToolbarButton } from '@ohif/ui';
 
-function LegacyLayoutSelectorWithServices({ servicesManager, ...props }: withAppTypes) {
+function LegacyLayoutSelectorWithServices({
+  servicesManager,
+  rows = 3,
+  columns = 3,
+  onLayoutChange = () => {},
+  ...props
+}) {
   const { toolbarService } = servicesManager.services;
 
   const onSelection = useCallback(
@@ -78,10 +84,4 @@ LayoutSelector.propTypes = {
   servicesManager: PropTypes.object.isRequired,
 };
 
-LayoutSelector.defaultProps = {
-  rows: 3,
-  columns: 3,
-  onLayoutChange: () => {},
-};
-
 export default LegacyLayoutSelectorWithServices;

extensions/default/src/Toolbar/ToolbarLayoutSelector.tsx

@@ -124,8 +124,9 @@ function ToolbarLayoutSelectorWithServices({
 }
 
 function LayoutSelector({
-  rows,
-  columns,
+  rows = 3,
+  columns = 4,
+  onLayoutChange = () => {},
   className,
   onSelection,
   onSelectionPreset,
@@ -242,10 +243,4 @@ LayoutSelector.propTypes = {
   servicesManager: PropTypes.object.isRequired,
 };
 
-LayoutSelector.defaultProps = {
-  columns: 4,
-  rows: 3,
-  onLayoutChange: () => {},
-};
-
 export default ToolbarLayoutSelectorWithServices;

extensions/default/src/Toolbar/ToolbarSplitButtonWithServices.tsx

@@ -54,7 +54,6 @@ function ToolbarSplitButtonWithServices({
 }
 
 ToolbarSplitButtonWithServices.propTypes = {
-  isRadio: PropTypes.bool,
   groupId: PropTypes.string,
   primary: PropTypes.shape({
     id: PropTypes.string.isRequired,
@@ -87,9 +86,4 @@ ToolbarSplitButtonWithServices.propTypes = {
   }),
 };
 
-ToolbarSplitButtonWithServices.defaultProps = {
-  isRadio: false,
-  isAction: false,
-};
-
 export default ToolbarSplitButtonWithServices;

extensions/default/src/ViewerLayout/ToolbarButtonNestedMenu.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { ToolbarButton } from '@ohif/ui';
 
-function NestedMenu({ children, label, icon, isActive }) {
+function NestedMenu({ children, label = 'More', icon = 'tool-more-menu', isActive }) {
   const [isOpen, setIsOpen] = useState(false);
 
   const toggleNestedMenu = () => setIsOpen(!isOpen);
@@ -39,9 +39,4 @@ NestedMenu.propTypes = {
   label: PropTypes.string,
 };
 
-NestedMenu.defaultProps = {
-  icon: 'tool-more-menu',
-  label: 'More',
-};
-
 export default NestedMenu;