Update storybook to enable noImplicitAny use

change-beta/@azure-communication-react-42028d68-3ae7-4771-b95c-c5c3c7144ada.json

@@ -0,0 +1,9 @@
+{
+  "type": "none",
+  "area": "improvement",
+  "workstream": "noImplicitAny",
+  "comment": "Storybook snippets noImplicitAny",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@azure-communication-react-42028d68-3ae7-4771-b95c-c5c3c7144ada.json

@@ -0,0 +1,9 @@
+{
+  "type": "none",
+  "area": "improvement",
+  "workstream": "noImplicitAny",
+  "comment": "Storybook snippets noImplicitAny",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

packages/react-components/src/components/Survey/TagsSurvey/TagsSurvey.tsx

@@ -157,11 +157,18 @@ export const _TagsSurvey = (props: _TagsSurveyProps): JSX.Element => {
         if (issue) {
           setSelectedTags((prevState) => {
             if (prevState[issueCategory]?.issues) {
-              (prevState[issueCategory]!.issues as unknown[]) = prevState[issueCategory]!.issues!.filter(function (
-                value
-              ) {
-                return value !== issue;
-              });
+              // 'prevState[issueCategory]!.issues as ...' typing is required here to avoid a typescript limitation
+              // "This expression is not callable" caused by filter().
+              // More information can be found here: https://github.com/microsoft/TypeScript/issues/44373
+              (prevState[issueCategory]!.issues as (_AudioIssue | _OverallIssue | _ScreenshareIssue | _VideoIssue)[]) =
+                (prevState[issueCategory]!.issues as (
+                  | _AudioIssue
+                  | _OverallIssue
+                  | _ScreenshareIssue
+                  | _VideoIssue
+                )[])!.filter(function (value: _AudioIssue | _OverallIssue | _ScreenshareIssue | _VideoIssue) {
+                  return value !== issue;
+                });
               if (prevState[issueCategory]!.issues!.length === 0) {
                 delete prevState[issueCategory];
               }

packages/react-composites/src/composites/CallWithChatComposite/adapter/CallWithChatBackedCallAdapter.ts

@@ -98,8 +98,8 @@ export class CallWithChatBackedCallAdapter implements CallAdapter {
   public leaveCall = async (forEveryone?: boolean): Promise<void> =>
     await this.callWithChatAdapter.leaveCall(forEveryone);
 
-  public startCall = (participants: string[] | StartCallIdentifier[], options: StartCallOptions): Call | undefined => {
-    if (participants.every((participant) => typeof participant === 'string')) {
+  public startCall = (participants: (string | StartCallIdentifier)[], options: StartCallOptions): Call | undefined => {
+    if (participants.every((participant: string | StartCallIdentifier) => typeof participant === 'string')) {
       return this.callWithChatAdapter.startCall(participants as string[], options);
     } else {
       return this.callWithChatAdapter.startCall(participants as StartCallIdentifier[], options);

packages/storybook/stories/ChatComposite/snippets/CustomDataModelExampleContainer.snippet.tsx

@@ -49,7 +49,7 @@ export const CustomDataModelExampleContainer = (props: CustomDataModelExampleCon
   // It is recommended that Contoso memoize the `onFetchAvatarPersonaData` callback
   // to avoid costly re-fetching of data.
   // A 3rd Party utility such as Lodash (_.memoize) can be used to memoize the callback.
-  const onFetchAvatarPersonaData = (userId): Promise<AvatarPersonaData> =>
+  const onFetchAvatarPersonaData = (userId: string): Promise<AvatarPersonaData> =>
     new Promise((resolve) => {
       if (userId === props.botUserId) {
         return resolve({

packages/storybook/stories/ControlBar/Buttons/Participants/snippets/WithCustomRender.snippet.tsx

@@ -1,6 +1,7 @@
 import {
   CallParticipantListParticipant,
   ControlBarButtonStyles,
+  CustomAvatarOptions,
   FluentThemeProvider,
   ParticipantsButton
 } from '@azure/communication-react';
@@ -42,7 +43,7 @@ const mockParticipants: CallParticipantListParticipant[] = [
   }
 ];
 
-const customOnRenderAvatar = (userId?: string, options?): JSX.Element => {
+const customOnRenderAvatar = (userId?: string, options?: CustomAvatarOptions): JSX.Element => {
   if (userId === 'user2') {
     return (
       <img
@@ -63,12 +64,7 @@ const customOnRenderAvatar = (userId?: string, options?): JSX.Element => {
   }
 
   return (
-    <Persona
-      text={options.displayName}
-      hidePersonaDetails={true}
-      size={PersonaSize.size32}
-      showOverflowTooltip={false}
-    />
+    <Persona text={options?.text} hidePersonaDetails={true} size={PersonaSize.size32} showOverflowTooltip={false} />
   );
 };
 

packages/storybook/stories/MessageThread/snippets/MessageWithCustomMentionRenderer.snippet.tsx

@@ -32,7 +32,7 @@ export const MessageWithCustomMentionRenderer: () => JSX.Element = () => {
     }
   ];
 
-  const onUpdateMessageCallback = (messageId, content): Promise<void> => {
+  const onUpdateMessageCallback = (messageId: string, content: string): Promise<void> => {
     const msgIdx = messages.findIndex((m) => m.messageId === messageId);
     const message = messages[msgIdx];
     message.content = content;

packages/storybook/stories/ParticipantItem/snippets/CustomAvatar.snippet.tsx

@@ -1,13 +1,13 @@
-import { ParticipantItem } from '@azure/communication-react';
+import { CustomAvatarOptions, ParticipantItem } from '@azure/communication-react';
 import { Persona, PersonaPresence, PersonaSize } from '@fluentui/react';
 import React from 'react';
 
 export const CustomAvatarExample: () => JSX.Element = () => {
-  const onRenderAvatar = (userId, options): JSX.Element => {
+  const onRenderAvatar = (userId?: string, options?: CustomAvatarOptions): JSX.Element => {
     return (
       <Persona
         size={PersonaSize.size32}
-        text={options.text}
+        text={options?.text}
         imageUrl="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/persona-female.png"
         showOverflowTooltip={false}
       />

packages/storybook/stories/TypingIndicator/snippets/CustomUserRender.snippet.tsx

@@ -16,7 +16,7 @@ export const CustomUserRenderSnippet: () => JSX.Element = () => {
   const onRenderUser = (user: CommunicationParticipant): JSX.Element => {
     return (
       <>
-        <img src={imageMap[user.userId]} style={avatarStyle} /> {user.displayName}
+        <img src={imageMap[user.userId as keyof typeof imageMap]} style={avatarStyle} /> {user.displayName}
       </>
     );
   };

packages/storybook/tsconfig.json

@@ -1,7 +1,6 @@
 {
   "extends": "../../common/config/tsc/tsconfig.json",
   "compilerOptions": {
-    "noImplicitAny": false, // disable for now for storybook
     "outDir": "./dist",
     "paths": {
       "@azure/communication-react": ["../communication-react/src"],