Add prop schema

Author: compulim

packages/component/src/Activity/StackedLayoutRoot.tsx

@@ -1,25 +1,32 @@
+import { reactNode, validateProps } from '@msinternal/botframework-webchat-react-valibot';
 import { useStyles } from '@msinternal/botframework-webchat-styles/react';
 import cx from 'classnames';
-import React, { memo, type ReactNode } from 'react';
+import React, { memo } from 'react';
+import { boolean, object, optional, pipe, readonly, string, type InferInput } from 'valibot';
 
 import styles from './StackedLayout.module.css';
 
-type StackedLayoutRootProps = Readonly<{
-  ariaLabelId?: string | undefined;
-  children?: ReactNode | undefined;
-  extraTrailing?: boolean | undefined;
-  fromUser?: boolean | undefined;
-  hideAvatar?: boolean | undefined;
-  hideNub?: boolean | undefined;
-  isGroup?: boolean | undefined;
-  noMessage?: boolean | undefined;
-  showAvatar?: boolean | undefined;
-  showNub?: boolean | undefined;
-  topCallout?: boolean | undefined;
-}>;
+const stackedLayoutRootPropsSchema = pipe(
+  object({
+    ariaLabelId: optional(string()),
+    children: optional(reactNode()),
+    extraTrailing: optional(boolean()),
+    fromUser: optional(boolean()),
+    hideAvatar: optional(boolean()),
+    hideNub: optional(boolean()),
+    isGroup: optional(boolean()),
+    noMessage: optional(boolean()),
+    showAvatar: optional(boolean()),
+    showNub: optional(boolean()),
+    topCallout: optional(boolean())
+  }),
+  readonly()
+);
+
+type StackedLayoutRootProps = InferInput<typeof stackedLayoutRootPropsSchema>;
 
-const StackedLayoutRoot = memo(
-  ({
+const StackedLayoutRoot = memo((props: StackedLayoutRootProps) => {
+  const {
     ariaLabelId,
     children,
     extraTrailing,
@@ -31,30 +38,30 @@ const StackedLayoutRoot = memo(
     showAvatar,
     showNub,
     topCallout
-  }: StackedLayoutRootProps) => {
-    const classNames = useStyles(styles);
+  } = validateProps(stackedLayoutRootPropsSchema, props);
+  const classNames = useStyles(styles);
 
-    return (
-      <div
-        aria-labelledby={ariaLabelId}
-        className={cx('webchat__stacked-layout', classNames['stacked-layout'], {
-          [classNames['stacked-layout--from-user']]: fromUser,
-          [classNames['stacked-layout--extra-trailing']]: extraTrailing,
-          [classNames['stacked-layout--hide-avatar']]: hideAvatar,
-          [classNames['stacked-layout--hide-nub']]: hideNub,
-          [classNames['stacked-layout--group']]: isGroup,
-          [classNames['stacked-layout--no-message']]: noMessage,
-          [classNames['stacked-layout--show-avatar']]: showAvatar,
-          [classNames['stacked-layout--show-nub']]: showNub,
-          [classNames['stacked-layout--top-callout']]: topCallout
-        })}
-      >
-        {children}
-      </div>
-    );
-  }
-);
+  return (
+    <div
+      aria-labelledby={ariaLabelId}
+      className={cx('webchat__stacked-layout', classNames['stacked-layout'], {
+        [classNames['stacked-layout--from-user']]: fromUser,
+        [classNames['stacked-layout--extra-trailing']]: extraTrailing,
+        [classNames['stacked-layout--hide-avatar']]: hideAvatar,
+        [classNames['stacked-layout--hide-nub']]: hideNub,
+        [classNames['stacked-layout--group']]: isGroup,
+        [classNames['stacked-layout--no-message']]: noMessage,
+        [classNames['stacked-layout--show-avatar']]: showAvatar,
+        [classNames['stacked-layout--show-nub']]: showNub,
+        [classNames['stacked-layout--top-callout']]: topCallout
+      })}
+    >
+      {children}
+    </div>
+  );
+});
 
 StackedLayoutRoot.displayName = 'StackedLayoutRoot';
 
 export default StackedLayoutRoot;
+export { stackedLayoutRootPropsSchema, type StackedLayoutRootProps };