refactor(components): refactor Dialog and update imports and exports

fix #307

packages/components/src/base/Backdrop/Backdrop.tsx

@@ -0,0 +1,5 @@
+import { Backdrop as MuiBackdrop, type BackdropProps as MuiBackdropProps } from '@mui/material';
+
+export function Backdrop(props: MuiBackdropProps): JSX.Element {
+  return <MuiBackdrop {...props} />;
+}

packages/components/src/base/Backdrop/index.tsx

@@ -0,0 +1 @@
+export { Backdrop } from './Backdrop';

packages/components/src/base/Dialog/Dialog.tsx

@@ -0,0 +1,5 @@
+import { Dialog as MuiDialog, type DialogProps as MuiDialogProps } from '@mui/material';
+
+export function Dialog(props: MuiDialogProps): JSX.Element {
+  return <MuiDialog {...props} />;
+}

packages/components/src/base/Dialog/index.tsx

@@ -1,6 +1 @@
-export { Backdrop } from './backdrop';
-export { Dialog } from './dialog';
-export { DialogActions } from './dialogactions';
-export { DialogContent } from './dialogcontent';
-export { DialogContentText } from './dialogcontenttext';
-export { DialogTitle } from './dialogtitle';
+export { Dialog } from './Dialog';

packages/components/src/base/DialogActions/DialogActions.tsx

@@ -0,0 +1,8 @@
+import {
+  DialogActions as MuiDialogActions,
+  type DialogActionsProps as MuiDialogActionsProps
+} from '@mui/material';
+
+export function DialogActions(props: MuiDialogActionsProps): JSX.Element {
+  return <MuiDialogActions {...props} />;
+}

packages/components/src/base/DialogActions/index.tsx

@@ -0,0 +1 @@
+export { DialogActions } from './DialogActions';

packages/components/src/base/DialogContent/DialogContent.tsx

@@ -0,0 +1,8 @@
+import {
+  DialogContent as MuiDialogContent,
+  type DialogContentProps as MuiDialogContentProps
+} from '@mui/material';
+
+export function DialogContent(props: MuiDialogContentProps): JSX.Element {
+  return <MuiDialogContent {...props} />;
+}

packages/components/src/base/DialogContent/index.tsx

@@ -0,0 +1 @@
+export { DialogContent } from './DialogContent';

packages/components/src/base/DialogContentText/DialogContentText.tsx

@@ -0,0 +1,8 @@
+import {
+  DialogContentText as MuiDialogContentText,
+  type DialogContentTextProps as MuiDialogContentTextProps
+} from '@mui/material';
+
+export function DialogContentText(props: MuiDialogContentTextProps): JSX.Element {
+  return <MuiDialogContentText {...props} />;
+}

packages/components/src/base/DialogContentText/index.tsx

@@ -0,0 +1 @@
+export { DialogContentText } from './DialogContentText';

packages/components/src/base/DialogTitle/DialogTitle.tsx

@@ -0,0 +1,8 @@
+import {
+  DialogTitle as MuiDialogTitle,
+  type DialogTitleProps as MuiDialogTitleProps
+} from '@mui/material';
+
+export function DialogTitle(props: MuiDialogTitleProps): JSX.Element {
+  return <MuiDialogTitle {...props} />;
+}

packages/components/src/base/DialogTitle/index.tsx

@@ -0,0 +1 @@
+export { DialogTitle } from './DialogTitle';

packages/components/src/custom/ChartDialog/ChartDialog.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
-import { DialogActions, DialogContent, DialogContentText } from '../../base/Dialog';
+import { DialogActions } from '../../base/DialogActions';
+import { DialogContent } from '../../base/DialogContent';
+import { DialogContentText } from '../../base/DialogContentText';
 import { StyledDialog, StyledDialogTitle } from '../Dialog';
 
 interface ChartDialogProps {

packages/components/src/custom/Dialog/StyledDialog.tsx

@@ -1,5 +1,6 @@
 import { type DialogProps } from '@mui/material';
-import { Dialog, DialogTitle } from '../../base/Dialog';
+import { Dialog } from '../../base/Dialog';
+import { DialogTitle } from '../../base/DialogTitle';
 
 type StyledDialogProps = {
   open: boolean;

packages/components/src/custom/Dialog/StyledDialogActions.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import { DialogActions } from '../../base/Dialog';
+import { DialogActions } from '../../base/DialogActions';
 
-interface DialogActionsProps {
+interface StyledDialogActionsProps {
   children: React.ReactNode;
 }
 
-function StyledDialogActions({ children, ...props }: DialogActionsProps): JSX.Element {
+function StyledDialogActions({ children, ...props }: StyledDialogActionsProps): JSX.Element {
   return <DialogActions {...props}>{children}</DialogActions>;
 }
 

packages/components/src/custom/Dialog/StyledDialogContent.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import { DialogContent } from '../../base/Dialog';
+import { DialogContent } from '../../base/DialogContent';
 
-interface DialogContentProps {
+interface StyledDialogContentProps {
   children: React.ReactNode;
 }
 
-function StyledDialogContent({ children, ...props }: DialogContentProps): JSX.Element {
+function StyledDialogContent({ children, ...props }: StyledDialogContentProps): JSX.Element {
   return <DialogContent {...props}>{children}</DialogContent>;
 }
 

packages/components/src/custom/Dialog/StyledDialogTitle.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import { DialogTitle } from '../../base/Dialog';
+import { DialogTitle } from '../../base/DialogTitle';
 import { Typography } from '../../base/Typography';
 
-interface DialogTitleProps {
+interface StyledDialogTitleProps {
   children: React.ReactNode;
 }
 
-function StyledDialogTitle({ children, ...props }: DialogTitleProps): JSX.Element {
+function StyledDialogTitle({ children, ...props }: StyledDialogTitleProps): JSX.Element {
   return (
     <DialogTitle
       sx={{

packages/components/src/custom/Dialog/index.tsx

@@ -1,6 +1,4 @@
-import StyledDialog from './StyledDialog';
-import StyledDialogActions from './StyledDialogActions';
-import StyledDialogContent from './StyledDialogContent';
-import StyledDialogTitle from './StyledDialogTitle';
-
-export { StyledDialog, StyledDialogActions, StyledDialogContent, StyledDialogTitle };
+export { default as StyledDialog } from './StyledDialog';
+export { default as StyledDialogActions } from './StyledDialogActions';
+export { default as StyledDialogContent } from './StyledDialogContent';
+export { default as StyledDialogTitle } from './StyledDialogTitle';

packages/components/src/custom/index.tsx

@@ -1,16 +1,8 @@
 // import { ErrorBoundary, withErrorBoundary, withSuppressedErrorBoundary } from './ErrorBoundary';
-import { StyledDialog, StyledDialogActions, StyledDialogContent } from './Dialog';
 import { useWindowDimensions } from './Helpers/Dimension';
 import { useNotificationHandler } from './Helpers/Notification';
 import { StyledTooltip } from './Tooltip';
 
 export { StyledChartDialog } from './ChartDialog';
 export { StyledSearchBar } from './StyledSearchBar';
-export {
-  StyledDialog,
-  StyledDialogActions,
-  StyledDialogContent,
-  StyledTooltip,
-  useNotificationHandler,
-  useWindowDimensions
-};
+export { StyledTooltip, useNotificationHandler, useWindowDimensions };

packages/components/src/index.tsx

@@ -4,6 +4,7 @@ export * from './base/AccordionDetails';
 export * from './base/AccordionSummary';
 export * from './base/AppBar';
 export * from './base/Avatar';
+export * from './base/Backdrop';
 export * from './base/Box';
 export * from './base/Button';
 export * from './base/ButtonGroup';
@@ -17,6 +18,10 @@ export * from './base/Chip';
 export * from './base/ClickAwayListener';
 export * from './base/Container';
 export * from './base/Dialog';
+export * from './base/DialogActions';
+export * from './base/DialogContent';
+export * from './base/DialogContentText';
+export * from './base/DialogTitle';
 export * from './base/Divider';
 export * from './base/Drawer';
 export * from './base/Form';
@@ -47,6 +52,7 @@ export {
   type CustomColumn,
   type CustomColumnVisibilityControlProps
 } from './custom/CustomColumnVisibilityControl';
+export * from './custom/Dialog';
 export {
   default as ResponsiveDataTable,
   type Column,