components: Defined Dialog props, and hardcoded styles for testing

Signed-off-by: Antonette Caldwell <[email protected]>

packages/components/src/custom/ChartDialog.tsx

@@ -0,0 +1,24 @@
+import { FC, ReactNode } from 'react';
+import { DialogActions, DialogContent, DialogContentText } from '../base/Dialog';
+import { StyledDialog, StyledDialogTitle } from './Dialog';
+
+interface MesheryChartDialogProps {
+  open: boolean;
+  content: ReactNode;
+  title: string;
+  actions?: ReactNode;
+}
+
+const MesheryChartDialog: FC<MesheryChartDialogProps> = ({ open, content, title, actions }) => {
+  return (
+    <StyledDialog fullWidth maxWidth="md" open={open}>
+      <StyledDialogTitle>{title}</StyledDialogTitle>
+      <DialogContent>
+        <DialogContentText>{content}</DialogContentText>
+      </DialogContent>
+      <DialogActions>{actions}</DialogActions>
+    </StyledDialog>
+  );
+};
+
+export { MesheryChartDialog as StyledChartDialog };

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

@@ -0,0 +1,30 @@
+import { type DialogProps as MuiDialogProps } from '@mui/material';
+import { FC } from 'react';
+import { Dialog, DialogTitle } from '../../base/Dialog';
+
+type DialogProps = {
+  open: boolean;
+  fullScreen?: boolean;
+  title?: string;
+} & Omit<MuiDialogProps, 'fullScreen'>;
+
+const MesheryDialog: FC<DialogProps> = ({ open, onClose, children, title, ...props }) => {
+  return (
+    <Dialog
+      sx={{
+        '& .MuiDialog-paper': {
+          borderRadius: '10px',
+          backgroundColor: 'white'
+        }
+      }}
+      open={open}
+      onClose={onClose}
+      {...props}
+    >
+      {title && <DialogTitle>{title}</DialogTitle>}
+      {children}
+    </Dialog>
+  );
+};
+
+export { MesheryDialog as StyledDialog };

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

@@ -0,0 +1,12 @@
+import { FC, ReactNode } from 'react';
+import { DialogActions } from '../../base/Dialog';
+
+interface DialogActionsProps {
+  children: ReactNode;
+}
+
+const MesheryDialogActions: FC<DialogActionsProps> = ({ children, ...props }) => {
+  return <DialogActions {...props}>{children}</DialogActions>;
+};
+
+export { MesheryDialogActions as StyledDialogActions };

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

@@ -0,0 +1,12 @@
+import { FC, ReactNode } from 'react';
+import { DialogContent } from '../../base/Dialog';
+
+interface DialogContentProps {
+  children: ReactNode;
+}
+
+const MesheryDialogContent: FC<DialogContentProps> = ({ children, ...props }) => {
+  return <DialogContent {...props}>{children}</DialogContent>;
+};
+
+export { MesheryDialogContent as StyledDialogContent };

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

@@ -0,0 +1,35 @@
+import { FC, ReactNode } from 'react';
+import { DialogTitle } from '../../base/Dialog';
+import { Typography } from '../../base/Typography';
+
+interface DialogTitleProps {
+  children: ReactNode;
+}
+
+const MesheryDialogTitle: FC<DialogTitleProps> = ({ children, ...props }) => {
+  return (
+    <DialogTitle
+      sx={{
+        padding: 0,
+        backgroundColor: '#00B39F',
+        color: 'white',
+        bottom: '2px',
+        boxShadow: '0px 4px 4px rgba(0, 179, 159, 0.4)'
+      }}
+      {...props}
+    >
+      <Typography
+        sx={{
+          flexGrow: 1,
+          fontSize: '1.25rem',
+          textAlign: 'center'
+        }}
+        variant="h6"
+      >
+        {children}
+      </Typography>
+    </DialogTitle>
+  );
+};
+
+export { MesheryDialogTitle as StyledDialogTitle };

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

@@ -0,0 +1,4 @@
+export * from './StyledDialog';
+export * from './StyledDialogActions';
+export * from './StyledDialogContent';
+export * from './StyledDialogTitle';

packages/components/src/custom/index.ts

@@ -1,2 +1,4 @@
+export * from './ChartDialog';
+export * from './Dialog';
 export * from './SearchBar';
 export * from './Tooltip';