migrated dialog stories

src/stories/common/Dialog/Dialog.stories.jsx → src/stories/common/Dialog/Dialog.stories.tsx

-import { useState } from "react";
+import { useState, ReactNode } from "react";
 import { Alert, Button, Stack, Typography } from "@mui/material";
 import { Box } from "@mui/system";
 import AddBoxIcon from "@mui/icons-material/AddBox";
@@ -20,7 +20,11 @@ const CLOSED = "CLOSED";
 const loremString =
   "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dignissim aliquam libero, sit amet porttitor felis iaculis a. Nunc consequat urna vitae tellus consequat, a egestas enim dictum. Morbi sodales pharetra sagittis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed velit ex, venenatis id vulputate egestas, molestie id libero. Curabitur eu tincidunt metus. Mauris ultricies tristique quam, ut cursus tortor. Nullam feugiat elementum nulla, nec faucibus lorem sodales quis. Suspendisse sollicitudin sollicitudin sapien, a bibendum dolor rhoncus consectetur. Nunc interdum et turpis vitae vehicula. Donec egestas vitae mauris id scelerisque. Cras suscipit magna nec purus vehicula ultrices. Fusce quam nibh, iaculis in maximus a, ultrices eget tortor. Etiam ex massa, vulputate condimentum fermentum eu, convallis non metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dignissim aliquam libero, sit amet porttitor felis iaculis a. Nunc consequat urna vitae tellus consequat, a egestas enim dictum. Morbi sodales pharetra sagittis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed velit ex, venenatis id vulputate egestas, molestie id libero. Curabitur eu tincidunt metus. Mauris ultricies tristique quam, ut cursus tortor. Nullam feugiat elementum nulla, nec faucibus lorem sodales quis. Suspendisse sollicitudin sollicitudin sapien, a bibendum dolor rhoncus consectetur. Nunc interdum et turpis vitae vehicula. Donec egestas vitae mauris id scelerisque. Cras suscipit magna nec purus vehicula ultrices. Fusce quam nibh, iaculis in maximus a, ultrices eget tortor. Etiam ex massa, vulputate condimentum fermentum eu, convallis non metus.";
 
-const CustomTitle = ({ title }) => {
+interface CustomTitleProps {
+  title: string | ReactNode;
+}
+
+const CustomTitle = ({ title }: CustomTitleProps) => {
   return (
     <Stack
       flexDirection="row"
@@ -30,7 +34,7 @@ const CustomTitle = ({ title }) => {
       <AddBoxIcon fontSize="large" />
       <Typography
         variant="button"
-        verticalalign="center"
+        sx={{ verticalalign: "center" }}
       >
         {title}
       </Typography>
@@ -38,17 +42,28 @@ const CustomTitle = ({ title }) => {
   );
 };
 
-const CustomContent = ({ content }) => {
+interface CustomContentProps {
+  content: string | ReactNode;
+}
+
+const CustomContent = ({ content }: CustomContentProps) => {
   return <Typography fontFamily="monospace">{content}</Typography>;
 };
 
+interface DialogProps {
+  title: string | ReactNode;
+  titleIsCustomComponent: boolean;
+  content: string | ReactNode;
+  contentIsCustomComponent: boolean;
+}
+
 export const BasicDialog = ({
   title,
   titleIsCustomComponent,
   content,
   contentIsCustomComponent,
   ...props
-}) => {
+}: DialogProps) => {
   const [state, setState] = useState(OPEN);
 
   return (
@@ -89,7 +104,7 @@ const ConfirmationTemplate = ({
   content,
   contentIsCustomComponent,
   ...props
-}) => {
+}: DialogProps) => {
   const [state, setState] = useState(OPEN);
   const onConfirm = () => setState(CONFIRMED);
   const onClose = () => setState(CLOSED);
@@ -128,7 +143,15 @@ const ConfirmationTemplate = ({
   );
 };
 
-export const Confirmation = (args) => <ConfirmationTemplate {...args} />;
+interface ConfirmationDialogProps extends DialogProps {
+  confirmText: string;
+  cancelText: string;
+  isConfirmDisabled: boolean;
+}
+
+export const Confirmation = (args: ConfirmationDialogProps) => (
+  <ConfirmationTemplate {...args} />
+);
 Confirmation.args = {
   ...BasicDialog.args,
   confirmText: "Confirm",
@@ -136,7 +159,17 @@ Confirmation.args = {
   isConfirmDisabled: false
 };
 
-export const DangerActionComponent = ({ ...props }) => {
+interface DangerActionDialogProps extends ConfirmationDialogProps {
+  valueToCheck: string;
+}
+
+const DangerActionComponent = ({
+  title,
+  content,
+  confirmText,
+  valueToCheck,
+  ...props
+}: DangerActionDialogProps) => {
   const [state, setState] = useState(IDLE);
 
   return (
@@ -154,6 +187,10 @@ export const DangerActionComponent = ({ ...props }) => {
         ) : null}
       </Box>
       <ConfirmDangerActionDialog
+        title={title}
+        content={content}
+        confirmText={confirmText}
+        valueToCheck={valueToCheck}
         open={state === OPEN}
         onConfirm={() => setState(CONFIRMED)}
         onClose={() => setState(CLOSED)}
@@ -163,10 +200,25 @@ export const DangerActionComponent = ({ ...props }) => {
   );
 };
 
-export const DangerActionDialog = (args) => <DangerActionComponent {...args} />;
+export const DangerActionDialog = ({
+  title,
+  content,
+  confirmText,
+  valueToCheck,
+  ...args
+}: DangerActionDialogProps) => (
+  <DangerActionComponent
+    title={title}
+    content={content}
+    confirmText={confirmText}
+    valueToCheck={valueToCheck}
+    {...args}
+  />
+);
 DangerActionDialog.args = {
   title: "Delete IOC type",
-  text: " Type in the complete IOC type name to confirm that you really want to delete the IOC type.",
+  content:
+    " Type in the complete IOC type name to confirm that you really want to delete the IOC type.",
   confirmText: "Delete",
   valueToCheck: "ec234-67hdj"
 };
@@ -188,11 +240,23 @@ const getCustomComponent = () => (
   </>
 );
 
-export const DangerActionDialogWithCustomContent = (args) => (
-  <DangerActionComponent {...args} />
+export const DangerActionDialogWithCustomContent = ({
+  title,
+  content,
+  confirmText,
+  valueToCheck,
+  ...args
+}: DangerActionDialogProps) => (
+  <DangerActionComponent
+    title={title}
+    content={content}
+    confirmText={confirmText}
+    valueToCheck={valueToCheck}
+    {...args}
+  />
 );
 
 DangerActionDialogWithCustomContent.args = {
   ...DangerActionDialog.args,
-  text: getCustomComponent()
+  content: getCustomComponent()
 };