Upgrade to valibot for props validation

Author: compulim

packages/component/src/SendBox/AttachmentBar/AttachmentBarItem.tsx

@@ -3,7 +3,6 @@ import { type SendBoxAttachment } from 'botframework-webchat-core';
 import classNames from 'classnames';
 import React, { memo, useCallback, useEffect, useMemo, useRef } from 'react';
 import { useRefFrom } from 'use-ref-from';
-
 import {
   custom,
   function_,
@@ -17,6 +16,7 @@ import {
   union,
   type InferInput
 } from 'valibot';
+
 import { useFocus, useStyleSet } from '../../hooks';
 import testIds from '../../testIds';
 import DeleteButton from './ItemDeleteButton';

packages/component/src/SendBox/AttachmentBar/DeleteIcon.tsx

@@ -1,11 +1,20 @@
+import { validateProps } from 'botframework-webchat-api/internal';
 import React, { memo } from 'react';
+import { type InferInput, object, optional, picklist, pipe, readonly } from 'valibot';
 
-type DeleteIconProps = Readonly<{
-  size?: 'large' | 'small' | undefined;
-}>;
+const deleteIconPropsSchema = pipe(
+  object({
+    size: optional(picklist(['large', 'small']))
+  }),
+  readonly()
+);
 
-const DeleteIcon = ({ size }: DeleteIconProps) =>
-  size === 'large' ? (
+type DeleteIconProps = InferInput<typeof deleteIconPropsSchema>;
+
+function DeleteIcon(props: DeleteIconProps) {
+  const { size } = validateProps(deleteIconPropsSchema, props);
+
+  return size === 'large' ? (
     <svg fill="none" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg">
       <path
         d="M4.60507 5.12706L4.66061 5.06059C4.82723 4.89396 5.08588 4.87545 5.27295 5.00505L5.33943 5.06059L9.80002 9.52128L14.2606 5.06059C14.4481 4.87314 14.752 4.87314 14.9394 5.06059C15.1269 5.24804 15.1269 5.55196 14.9394 5.73941L10.4787 10.2L14.9394 14.6606C15.1061 14.8272 15.1246 15.0859 14.995 15.2729L14.9394 15.3394C14.7728 15.506 14.5142 15.5245 14.3271 15.395L14.2606 15.3394L9.80002 10.8787L5.33943 15.3394C5.15198 15.5269 4.84806 15.5269 4.66061 15.3394C4.47316 15.152 4.47316 14.848 4.66061 14.6606L9.1213 10.2L4.66061 5.73941C4.49398 5.57279 4.47547 5.31414 4.60507 5.12706L4.66061 5.06059L4.60507 5.12706Z"
@@ -20,7 +29,7 @@ const DeleteIcon = ({ size }: DeleteIconProps) =>
       />
     </svg>
   );
+}
 
 export default memo(DeleteIcon);
-
-export { type DeleteIconProps };
+export { deleteIconPropsSchema, type DeleteIconProps };

packages/component/src/SendBox/AttachmentBar/ItemDeleteButton.tsx

@@ -1,18 +1,28 @@
 import { hooks } from 'botframework-webchat-api';
+import { validateProps } from 'botframework-webchat-api/internal';
 import React, { KeyboardEventHandler, useCallback } from 'react';
+import { function_, object, optional, picklist, pipe, readonly, string, type InferInput } from 'valibot';
+
 import { useFocus } from '../../hooks';
 import testIds from '../../testIds';
 import DeleteIcon from './DeleteIcon';
 
 const { useLocalizer } = hooks;
 
-type AttachmentDeleteButton = Readonly<{
-  attachmentName: string;
-  onClick?: (() => void) | undefined;
-  size?: 'large' | 'small' | undefined;
-}>;
+const attachmentDeleteButtonPropsSchema = pipe(
+  object({
+    attachmentName: string(),
+    onClick: optional(function_()),
+    size: optional(picklist(['large', 'small']))
+  }),
+  readonly()
+);
+
+type AttachmentDeleteButtonProps = InferInput<typeof attachmentDeleteButtonPropsSchema>;
+
+function AttachmentDeleteButton(props: AttachmentDeleteButtonProps) {
+  const { attachmentName, onClick, size } = validateProps(attachmentDeleteButtonPropsSchema, props);
 
-const AttachmentDeleteButton = ({ attachmentName, onClick, size }: AttachmentDeleteButton) => {
   const focus = useFocus();
   const localize = useLocalizer();
 
@@ -40,9 +50,7 @@ const AttachmentDeleteButton = ({ attachmentName, onClick, size }: AttachmentDel
       <DeleteIcon size={size} />
     </button>
   );
-};
-
-AttachmentDeleteButton.displayName = 'SendBoxAttachmentItemDeleteButton';
+}
 
 export default AttachmentDeleteButton;
-export { type AttachmentDeleteButton };
+export { attachmentDeleteButtonPropsSchema, type AttachmentDeleteButtonProps };

packages/component/src/SendBox/AttachmentBar/ItemPreview.tsx

@@ -1,17 +1,27 @@
+import { validateProps } from 'botframework-webchat-api/internal';
 import { type SendBoxAttachment } from 'botframework-webchat-core';
 import React, { memo } from 'react';
+import { object, picklist, pipe, readonly, string, type InferInput } from 'valibot';
 
 import FilePreview from './Preview/FilePreview';
 import ImagePreview from './Preview/ImagePreview';
+import { sendBoxAttachmentSchema } from './Preview/sendBoxAttachment';
 
-type AttachmentBarItemPreviewProps = Readonly<{
-  attachment: SendBoxAttachment;
-  attachmentName: string;
-  mode: 'list item' | 'thumbnail';
-}>;
+const sendBoxAttachmentBarItemPreviewPropsSchema = pipe(
+  object({
+    attachment: sendBoxAttachmentSchema,
+    attachmentName: string(),
+    mode: picklist(['list item', 'thumbnail'])
+  }),
+  readonly()
+);
+
+type SendBoxAttachmentBarItemPreviewProps = InferInput<typeof sendBoxAttachmentBarItemPreviewPropsSchema>;
 
 // TODO: Turn this into middleware.
-const AttachmentBarItemPreview = ({ attachment, attachmentName, mode }: AttachmentBarItemPreviewProps) => {
+function SendBoxAttachmentBarItemPreview(props: SendBoxAttachmentBarItemPreviewProps) {
+  const { attachment, attachmentName, mode } = validateProps(sendBoxAttachmentBarItemPreviewPropsSchema, props);
+
   let element: React.ReactNode;
 
   if (attachment.thumbnailURL) {
@@ -33,9 +43,7 @@ const AttachmentBarItemPreview = ({ attachment, attachmentName, mode }: Attachme
   }
 
   return <div className="webchat__send-box-attachment-bar-item__preview">{element}</div>;
-};
-
-AttachmentBarItemPreview.displayName = 'SendBoxAttachmentBarItemPreview';
+}
 
-export default memo(AttachmentBarItemPreview);
-export { type AttachmentBarItemPreviewProps };
+export default memo(SendBoxAttachmentBarItemPreview);
+export { sendBoxAttachmentBarItemPreviewPropsSchema, type SendBoxAttachmentBarItemPreviewProps };

packages/component/src/SendBox/AttachmentBar/Preview/FileIcon.tsx

@@ -1,11 +1,20 @@
+import { validateProps } from 'botframework-webchat-api/internal';
 import React, { memo } from 'react';
+import { type InferInput, object, optional, picklist, pipe, readonly } from 'valibot';
 
-type FileIconProps = Readonly<{
-  size?: 'large' | 'small' | undefined;
-}>;
+const fileIconPropsSchema = pipe(
+  object({
+    size: optional(picklist(['large', 'small']))
+  }),
+  readonly()
+);
 
-const FileIcon = ({ size }: FileIconProps) =>
-  size === 'large' ? (
+type FileIconProps = InferInput<typeof fileIconPropsSchema>;
+
+function FileIcon(props: FileIconProps) {
+  const { size } = validateProps(fileIconPropsSchema, props);
+
+  return size === 'large' ? (
     <svg fill="none" height="36" viewBox="0 0 36 36" width="36" xmlns="http://www.w3.org/2000/svg">
       <path
         d="M7.386 33H28.6C28.816 33 29 32.83 29 32.628V10H23.4C22.628 10 22 9.372 22 8.6V3H7.4C7.184 3 7 3.17 7 3.372V32.642C7 32.839 7.173 33 7.386 33Z"
@@ -39,7 +48,7 @@ const FileIcon = ({ size }: FileIconProps) =>
       />
     </svg>
   );
+}
 
 export default memo(FileIcon);
-
-export { type FileIconProps };
+export { fileIconPropsSchema, type FileIconProps };

packages/component/src/SendBox/AttachmentBar/Preview/FilePreview.tsx

@@ -1,17 +1,32 @@
-import { type SendBoxAttachment } from 'botframework-webchat-core';
+import { validateProps } from 'botframework-webchat-api/internal';
 import classNames from 'classnames';
 import React, { memo } from 'react';
+import { object, picklist, pipe, readonly, string, type InferInput } from 'valibot';
+
 import { useStyleSet } from '../../../hooks';
 import FileIcon from './FileIcon';
 import ImageIcon from './ImageIcon';
+import { sendBoxAttachmentSchema } from './sendBoxAttachment';
+
+const sendBoxAttachmentBarItemFileAttachmentPreviewPropsSchema = pipe(
+  object({
+    attachment: sendBoxAttachmentSchema,
+    attachmentName: string(),
+    mode: picklist(['list item', 'thumbnail'])
+  }),
+  readonly()
+);
 
-type FileAttachmentPreviewProps = Readonly<{
-  attachment: SendBoxAttachment;
-  attachmentName: string;
-  mode: 'list item' | 'thumbnail';
-}>;
+type SendBoxAttachmentBarItemFileAttachmentPreviewProps = InferInput<
+  typeof sendBoxAttachmentBarItemFileAttachmentPreviewPropsSchema
+>;
+
+function SendBoxAttachmentBarItemFileAttachmentPreview(props: SendBoxAttachmentBarItemFileAttachmentPreviewProps) {
+  const { attachment, mode, attachmentName } = validateProps(
+    sendBoxAttachmentBarItemFileAttachmentPreviewPropsSchema,
+    props
+  );
 
-const FileAttachmentPreview = ({ attachment, mode, attachmentName }: FileAttachmentPreviewProps) => {
   const [{ sendBoxAttachmentBarItemFilePreview: sendBoxAttachmentBarItemFilePreviewClassName }] = useStyleSet();
 
   return mode === 'list item' ? (
@@ -36,9 +51,10 @@ const FileAttachmentPreview = ({ attachment, mode, attachmentName }: FileAttachm
       <FileIcon size="large" />
     </div>
   );
-};
-
-FileAttachmentPreview.displayName = 'SendBoxAttachmentBarItemFileAttachmentPreview';
+}
 
-export default memo(FileAttachmentPreview);
-export { type FileAttachmentPreviewProps };
+export default memo(SendBoxAttachmentBarItemFileAttachmentPreview);
+export {
+  sendBoxAttachmentBarItemFileAttachmentPreviewPropsSchema,
+  type SendBoxAttachmentBarItemFileAttachmentPreviewProps
+};

packages/component/src/SendBox/AttachmentBar/Preview/ImageIcon.tsx

@@ -1,32 +1,34 @@
 import React, { memo } from 'react';
 
-const ImagePreviewIcon = () => (
-  <svg fill="none" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M2.5 14H13.5C13.775 14 14 13.775 14 13.5V2.5C14 2.225 13.775 2 13.5 2H2.5C2.225 2 2 2.225 2 2.5V13.5C2 13.775 2.225 14 2.5 14Z"
-      fill="#FCFCFC"
-    />
-    <path
-      clipRule="evenodd"
-      d="M9.27768 8.63L8.66968 9.476L7.38468 7.792C7.19551 7.54408 6.90152 7.39861 6.58968 7.39861C6.27784 7.39861 5.98385 7.54408 5.79468 7.792L4.18968 9.893C3.95877 10.1953 3.91939 10.6024 4.08807 10.9434C4.25675 11.2844 4.60427 11.5001 4.98468 11.5H11.0137C11.3887 11.4997 11.7321 11.2896 11.903 10.9557C12.074 10.6219 12.0437 10.2205 11.8247 9.916L10.9007 8.63C10.7128 8.36861 10.4106 8.21365 10.0887 8.21365C9.76678 8.21365 9.46456 8.36861 9.27668 8.63H9.27768Z"
-      fill="#FCFCFC"
-      fillRule="evenodd"
-      stroke="#A6CCC3"
-    />
-    <path
-      clipRule="evenodd"
-      d="M10.5 6.5C11.0523 6.5 11.5 6.05228 11.5 5.5C11.5 4.94772 11.0523 4.5 10.5 4.5C9.94772 4.5 9.5 4.94772 9.5 5.5C9.5 6.05228 9.94772 6.5 10.5 6.5Z"
-      fillRule="evenodd"
-      stroke="#FF9810"
-    />
-    <path
-      clipRule="evenodd"
-      d="M2.5 15H13.5C14.327 15 15 14.327 15 13.5V2.5C15 1.673 14.327 1 13.5 1H2.5C1.673 1 1 1.673 1 2.5V13.5C1 14.327 1.673 15 2.5 15ZM2 2.5C2 2.22386 2.22386 2 2.5 2H13.5C13.7761 2 14 2.22386 14 2.5V13.5C14 13.7761 13.7761 14 13.5 14H2.5C2.22386 14 2 13.7761 2 13.5V2.5Z"
-      fill="#616161"
-      fillRule="evenodd"
-      opacity="0.67"
-    />
-  </svg>
-);
+function ImagePreviewIcon() {
+  return (
+    <svg fill="none" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M2.5 14H13.5C13.775 14 14 13.775 14 13.5V2.5C14 2.225 13.775 2 13.5 2H2.5C2.225 2 2 2.225 2 2.5V13.5C2 13.775 2.225 14 2.5 14Z"
+        fill="#FCFCFC"
+      />
+      <path
+        clipRule="evenodd"
+        d="M9.27768 8.63L8.66968 9.476L7.38468 7.792C7.19551 7.54408 6.90152 7.39861 6.58968 7.39861C6.27784 7.39861 5.98385 7.54408 5.79468 7.792L4.18968 9.893C3.95877 10.1953 3.91939 10.6024 4.08807 10.9434C4.25675 11.2844 4.60427 11.5001 4.98468 11.5H11.0137C11.3887 11.4997 11.7321 11.2896 11.903 10.9557C12.074 10.6219 12.0437 10.2205 11.8247 9.916L10.9007 8.63C10.7128 8.36861 10.4106 8.21365 10.0887 8.21365C9.76678 8.21365 9.46456 8.36861 9.27668 8.63H9.27768Z"
+        fill="#FCFCFC"
+        fillRule="evenodd"
+        stroke="#A6CCC3"
+      />
+      <path
+        clipRule="evenodd"
+        d="M10.5 6.5C11.0523 6.5 11.5 6.05228 11.5 5.5C11.5 4.94772 11.0523 4.5 10.5 4.5C9.94772 4.5 9.5 4.94772 9.5 5.5C9.5 6.05228 9.94772 6.5 10.5 6.5Z"
+        fillRule="evenodd"
+        stroke="#FF9810"
+      />
+      <path
+        clipRule="evenodd"
+        d="M2.5 15H13.5C14.327 15 15 14.327 15 13.5V2.5C15 1.673 14.327 1 13.5 1H2.5C1.673 1 1 1.673 1 2.5V13.5C1 14.327 1.673 15 2.5 15ZM2 2.5C2 2.22386 2.22386 2 2.5 2H13.5C13.7761 2 14 2.22386 14 2.5V13.5C14 13.7761 13.7761 14 13.5 14H2.5C2.22386 14 2 13.7761 2 13.5V2.5Z"
+        fill="#616161"
+        fillRule="evenodd"
+        opacity="0.67"
+      />
+    </svg>
+  );
+}
 
 export default memo(ImagePreviewIcon);

packages/component/src/SendBox/AttachmentBar/Preview/ImagePreview.tsx

@@ -1,18 +1,31 @@
-import { type SendBoxAttachment } from 'botframework-webchat-core';
+import { validateProps } from 'botframework-webchat-api/internal';
 import classNames from 'classnames';
 import React, { memo } from 'react';
+import { object, picklist, pipe, readonly, string, type InferInput } from 'valibot';
+
 import { useStyleSet } from '../../../hooks';
 import FilePreview from './FilePreview';
+import { sendBoxAttachmentSchema } from './sendBoxAttachment';
+
+const sendBoxAttachmentBarItemImageAttachmentPreviewPropsSchema = pipe(
+  object({
+    attachment: sendBoxAttachmentSchema,
+    attachmentName: string(),
+    mode: picklist(['list item', 'thumbnail'])
+  }),
+  readonly()
+);
 
-type ImageAttachmentPreviewProps = Readonly<{
-  attachment: SendBoxAttachment & {
-    thumbnailURL: URL;
-  };
-  attachmentName: string;
-  mode: 'list item' | 'thumbnail';
-}>;
+type SendBoxAttachmentBarItemImageAttachmentPreviewProps = InferInput<
+  typeof sendBoxAttachmentBarItemImageAttachmentPreviewPropsSchema
+>;
+
+function SendBoxAttachmentBarItemImageAttachmentPreview(props: SendBoxAttachmentBarItemImageAttachmentPreviewProps) {
+  const { attachment, mode, attachmentName } = validateProps(
+    sendBoxAttachmentBarItemImageAttachmentPreviewPropsSchema,
+    props
+  );
 
-const ImageAttachmentPreview = ({ attachment, mode, attachmentName }: ImageAttachmentPreviewProps) => {
   const [{ sendBoxAttachmentBarItemImagePreview: sendBoxAttachmentBarItemImagePreviewClassName }] = useStyleSet();
 
   return mode === 'list item' ? (
@@ -27,9 +40,10 @@ const ImageAttachmentPreview = ({ attachment, mode, attachmentName }: ImageAttac
       src={attachment.thumbnailURL.href}
     />
   );
-};
-
-ImageAttachmentPreview.displayName = 'SendBoxAttachmentBarItemImageAttachmentPreview';
+}
 
-export default memo(ImageAttachmentPreview);
-export { type ImageAttachmentPreviewProps };
+export default memo(SendBoxAttachmentBarItemImageAttachmentPreview);
+export {
+  sendBoxAttachmentBarItemImageAttachmentPreviewPropsSchema,
+  type SendBoxAttachmentBarItemImageAttachmentPreviewProps
+};

packages/component/src/SendBox/AttachmentBar/Preview/sendBoxAttachment.ts

@@ -0,0 +1,13 @@
+import { type InferInput, instance, object, optional, pipe, readonly, union } from 'valibot';
+
+const sendBoxAttachmentSchema = pipe(
+  object({
+    blob: union([instance(Blob), instance(File)]),
+    thumbnailURL: optional(instance(URL))
+  }),
+  readonly()
+);
+
+type SendBoxAttachment = InferInput<typeof sendBoxAttachmentSchema>;
+
+export { sendBoxAttachmentSchema, type SendBoxAttachment };