fix(striker-ui): allow ReactNode as MessageBox children

striker-ui/components/MessageBox.tsx

@@ -1,4 +1,4 @@
-import { FC, useState } from 'react';
+import { FC, ReactNode, useCallback, useMemo, useState } from 'react';
 import {
   Box as MUIBox,
   BoxProps as MUIBoxProps,
@@ -30,13 +30,11 @@ type MessageBoxOptionalProps = {
   isAllowClose?: boolean;
   onClose?: MUIIconButtonProps['onClick'];
   onCloseAppend?: MUIIconButtonProps['onClick'];
+  text?: string;
   type?: MessageBoxType;
 };
 
-type MessageBoxProps = MUIBoxProps &
+type MessageBoxProps = MUIBoxProps & MessageBoxOptionalProps;
-  MessageBoxOptionalProps & {
-    text: string;
-  };
 
 const MESSAGE_BOX_CLASS_PREFIX = 'MessageBox';
 
@@ -53,18 +51,20 @@ const MESSAGE_BOX_TYPE_MAP_TO_ICON = {
 };
 
 const MESSAGE_BOX_DEFAULT_PROPS: Required<
-  Omit<MessageBoxOptionalProps, 'onClose' | 'onCloseAppend'>
+  Omit<MessageBoxOptionalProps, 'onClose' | 'onCloseAppend' | 'text'>
 > &
-  Pick<MessageBoxOptionalProps, 'onClose' | 'onCloseAppend'> = {
+  Pick<MessageBoxOptionalProps, 'onClose' | 'onCloseAppend' | 'text'> = {
   isShowInitially: true,
   isAllowClose: false,
   onClose: undefined,
   onCloseAppend: undefined,
+  text: undefined,
   type: 'info',
 };
 
 const MessageBox: FC<MessageBoxProps> = ({
-  isAllowClose,
+  children,
+  isAllowClose = MESSAGE_BOX_DEFAULT_PROPS.isAllowClose,
   isShowInitially = MESSAGE_BOX_DEFAULT_PROPS.isShowInitially,
   onClose,
   onCloseAppend,
@@ -76,57 +76,69 @@ const MessageBox: FC<MessageBoxProps> = ({
 
   const [isShow, setIsShow] = useState<boolean>(isShowInitially);
 
-  const isShowCloseButton = isAllowClose || onClose || onCloseAppend;
+  const isShowCloseButton: boolean = useMemo(
-
+    () => isAllowClose || onClose !== undefined || onCloseAppend !== undefined,
-  const buildMessageBoxClasses = (messageBoxType: MessageBoxType) =>
+    [isAllowClose, onClose, onCloseAppend],
-    MESSAGE_BOX_CLASSES[messageBoxType];
+  );
-
-  const buildMessageIcon = (messageBoxType: MessageBoxType) =>
-    MESSAGE_BOX_TYPE_MAP_TO_ICON[messageBoxType] === undefined
-      ? MESSAGE_BOX_TYPE_MAP_TO_ICON.info
-      : MESSAGE_BOX_TYPE_MAP_TO_ICON[messageBoxType];
 
-  const buildMessage = (message: string, messageBoxType: MessageBoxType) => (
+  const buildMessageBoxClasses = useCallback(
-    <BodyText inverted={messageBoxType === 'info'} text={message} />
+    (messageBoxType: MessageBoxType) => MESSAGE_BOX_CLASSES[messageBoxType],
+    [],
+  );
+  const buildMessageIcon = useCallback(
+    (messageBoxType: MessageBoxType) =>
+      MESSAGE_BOX_TYPE_MAP_TO_ICON[messageBoxType] === undefined
+        ? MESSAGE_BOX_TYPE_MAP_TO_ICON.info
+        : MESSAGE_BOX_TYPE_MAP_TO_ICON[messageBoxType],
+    [],
+  );
+  const buildMessage = useCallback(
+    (messageBoxType: MessageBoxType, message: ReactNode = children) => (
+      <BodyText inverted={messageBoxType === 'info'}>{message}</BodyText>
+    ),
+    [children],
   );
 
-  const combinedBoxSx: MUIBoxProps['sx'] = {
+  const combinedBoxSx: MUIBoxProps['sx'] = useMemo(
-    alignItems: 'center',
+    () => ({
-    borderRadius: BORDER_RADIUS,
+      alignItems: 'center',
-    display: 'flex',
+      borderRadius: BORDER_RADIUS,
-    flexDirection: 'row',
+      display: 'flex',
-    padding: '.3em .6em',
+      flexDirection: 'row',
+      padding: '.3em .6em',
 
-    '& > *': {
+      '& > *': {
-      color: TEXT,
+        color: TEXT,
-    },
+      },
 
-    '& > :first-child': {
+      '& > :first-child': {
-      marginRight: '.3em',
+        marginRight: '.3em',
-    },
+      },
 
-    '& > :nth-child(2)': {
+      '& > :nth-child(2)': {
-      flexGrow: 1,
+        flexGrow: 1,
-    },
+      },
 
-    [`&.${MESSAGE_BOX_CLASSES.error}`]: {
+      [`&.${MESSAGE_BOX_CLASSES.error}`]: {
-      backgroundColor: RED,
+        backgroundColor: RED,
-    },
+      },
 
-    [`&.${MESSAGE_BOX_CLASSES.info}`]: {
+      [`&.${MESSAGE_BOX_CLASSES.info}`]: {
-      backgroundColor: GREY,
+        backgroundColor: GREY,
 
-      '& > *': {
+        '& > *': {
-        color: `${BLACK}`,
+          color: `${BLACK}`,
+        },
       },
-    },
 
-    [`&.${MESSAGE_BOX_CLASSES.warning}`]: {
+      [`&.${MESSAGE_BOX_CLASSES.warning}`]: {
-      backgroundColor: PURPLE,
+        backgroundColor: PURPLE,
-    },
+      },
 
-    ...boxSx,
+      ...boxSx,
-  };
+    }),
+    [boxSx],
+  );
 
   return isShow ? (
     <MUIBox
@@ -137,7 +149,7 @@ const MessageBox: FC<MessageBoxProps> = ({
       }}
     >
       {buildMessageIcon(type)}
-      {buildMessage(text, type)}
+      {buildMessage(type, text)}
       {isShowCloseButton && (
         <MUIIconButton
           onClick={