fix: update many flowbite issues with new version

Author: TheLastCicada

package-lock.json

@@ -47,6 +47,7 @@
     "react": "^18.3.1",
     "react-content-loader": "^7.0.2",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.5.0",
     "react-intl": "^7.1.5",
     "react-redux": "^9.2.0",
     "react-router-dom": "^6.28.2",

package.json

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Modal } from 'flowbite-react';
+import { Modal } from '@/components';
 import { FormattedMessage } from 'react-intl';
 
 interface Props {

src/renderer/components/blocks/modals/CommitTransferErrorModal.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Modal } from 'flowbite-react';
+import { Modal } from '@/components';
 import { FormattedMessage } from 'react-intl';
 
 interface Props {

src/renderer/components/blocks/modals/CommitTransferSuccessModal.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Modal } from 'flowbite-react';
+import { Modal } from '@/components';
 import { FormattedMessage } from 'react-intl';
 
 interface StagedProjectSuccessModalProps {

src/renderer/components/blocks/modals/StagedProjectSuccessModal.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Modal } from 'flowbite-react';
+import { Modal } from '@/components';
 import { FormattedMessage } from 'react-intl';
 
 interface StagedUnitSuccessModalProps {

src/renderer/components/blocks/modals/StagedUnitSuccessModal.tsx

@@ -1,11 +1,26 @@
-import { Button as FlowbiteButton, ButtonGroupProps, ButtonProps } from 'flowbite-react';
+import {
+  Button as FlowbiteButton,
+  ButtonGroup as FlowbiteButtonGroup,
+  ButtonGroupProps,
+  ButtonProps,
+  Spinner,
+} from 'flowbite-react';
 
-function Button({ children, ...props }: ButtonProps) {
-  return <FlowbiteButton {...props}>{children}</FlowbiteButton>;
+interface CustomButtonProps extends ButtonProps {
+  isProcessing?: boolean;
+}
+
+function Button({ children, isProcessing, disabled, ...props }: CustomButtonProps) {
+  return (
+    <FlowbiteButton disabled={disabled || isProcessing} {...props}>
+      {isProcessing && <Spinner size="sm" className="mr-2" />}
+      {children}
+    </FlowbiteButton>
+  );
 }
 
 function Group({ children, ...props }: ButtonGroupProps) {
-  return <FlowbiteButton.Group {...props}>{children}</FlowbiteButton.Group>;
+  return <FlowbiteButtonGroup {...props}>{children}</FlowbiteButtonGroup>;
 }
 
 Button.Group = Group;

src/renderer/components/proxy/Button.tsx

@@ -1,11 +1,16 @@
-import { Dropdown as FlowbiteDropDown, DropdownItemProps, DropdownProps } from 'flowbite-react';
+import {
+  Dropdown as FlowbiteDropDown,
+  DropdownItem as FlowbiteDropdownItem,
+  DropdownItemProps,
+  DropdownProps,
+} from 'flowbite-react';
 
 function Dropdown({ children, ...props }: DropdownProps) {
   return <FlowbiteDropDown {...props}>{children}</FlowbiteDropDown>;
 }
 
 function Item({ children, ...props }: DropdownItemProps) {
-  return <FlowbiteDropDown.Item {...props}>{children}</FlowbiteDropDown.Item>;
+  return <FlowbiteDropdownItem {...props}>{children}</FlowbiteDropdownItem>;
 }
 
 Dropdown.Item = Item;

src/renderer/components/proxy/Dropdown.tsx

@@ -1,5 +1,8 @@
 import {
   Modal as FlowbiteModal,
+  ModalBody as FlowbiteModalBody,
+  ModalFooter as FlowbiteModalFooter,
+  ModalHeader as FlowbiteModalHeader,
   ModalBodyProps,
   ModalFooterProps,
   ModalHeaderProps,
@@ -19,15 +22,15 @@ function Modal({ children, show = true, ...props }: ModalProps) {
 }
 
 function Body({ children, ...props }: ModalBodyProps) {
-  return <FlowbiteModal.Body {...props}>{children}</FlowbiteModal.Body>;
+  return <FlowbiteModalBody {...props}>{children}</FlowbiteModalBody>;
 }
 
 function Header({ children, ...props }: ModalHeaderProps) {
-  return <FlowbiteModal.Header {...props}>{children}</FlowbiteModal.Header>;
+  return <FlowbiteModalHeader {...props}>{children}</FlowbiteModalHeader>;
 }
 
 function Footer({ children, ...props }: ModalFooterProps) {
-  return <FlowbiteModal.Footer {...props}>{children}</FlowbiteModal.Footer>;
+  return <FlowbiteModalFooter {...props}>{children}</FlowbiteModalFooter>;
 }
 
 Modal.Body = Body;

src/renderer/components/proxy/Modal.tsx

@@ -1,5 +1,8 @@
 import {
   Sidebar as FlowbiteSidebar,
+  SidebarItem as FlowbiteSidebarItem,
+  SidebarItemGroup as FlowbiteSidebarItemGroup,
+  SidebarItems as FlowbiteSidebarItems,
   SidebarItemGroupProps,
   SidebarItemProps,
   SidebarItemsProps,
@@ -26,15 +29,15 @@ function Sidebar({ children, ...props }: SidebarProps) {
 }
 
 function Items({ children, ...props }: SidebarItemsProps) {
-  return <FlowbiteSidebar.Items {...props}>{children}</FlowbiteSidebar.Items>;
+  return <FlowbiteSidebarItems {...props}>{children}</FlowbiteSidebarItems>;
 }
 
 function ItemGroup({ children, ...props }: SidebarItemGroupProps) {
-  return <FlowbiteSidebar.ItemGroup {...props}>{children}</FlowbiteSidebar.ItemGroup>;
+  return <FlowbiteSidebarItemGroup {...props}>{children}</FlowbiteSidebarItemGroup>;
 }
 
 function Item({ children, ...props }: SidebarItemProps) {
-  return <FlowbiteSidebar.Item {...props}>{children}</FlowbiteSidebar.Item>;
+  return <FlowbiteSidebarItem {...props}>{children}</FlowbiteSidebarItem>;
 }
 
 Sidebar.Item = Item;