Update storybook to enable noImplicitAny use (#4206)

* Storybook snippets noImplicitAny
Azure · Mar 4, 2024 · e4393b9 · e4393b9
1 parent df8c364
commit e4393b9
Show file tree

Hide file tree

Showing 10 changed files with 41 additions and 26 deletions.
diff --git a/change-beta/@azure-communication-react-42028d68-3ae7-4771-b95c-c5c3c7144ada.json b/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"
+}
diff --git a/change/@azure-communication-react-42028d68-3ae7-4771-b95c-c5c3c7144ada.json b/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"
+}
diff --git a/packages/react-components/src/components/Survey/TagsSurvey/TagsSurvey.tsx b/packages/react-components/src/components/Survey/TagsSurvey/TagsSurvey.tsx
@@ -156,17 +156,19 @@ export const _TagsSurvey = (props: _TagsSurveyProps): JSX.Element => {
       } else {
         if (issue) {
           setSelectedTags((prevState) => {
-            if (prevState[issueCategory]?.issues) {
-              (prevState[issueCategory]!.issues as unknown[]) = prevState[issueCategory]!.issues!.filter(function (
-                value
-              ) {
-                return value !== issue;
-              });
-              if (prevState[issueCategory]!.issues!.length === 0) {
-                delete prevState[issueCategory];
+            // '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
+            const categoryIssues = (
+              prevState[issueCategory]?.issues as (_AudioIssue | _OverallIssue | _ScreenshareIssue | _VideoIssue)[]
+            )?.filter((value: _AudioIssue | _OverallIssue | _ScreenshareIssue | _VideoIssue) => value !== issue);
+            return {
+              ...prevState,
+              [issueCategory]: {
+                ...(prevState[issueCategory] || {}),
+                issues: categoryIssues
               }
-            }
-            return prevState;
+            };
           });
         } else {
           setCheckedTextFields(checkedTextFields.filter((id) => id !== issueCategory));

diff --git a/...-composites/src/composites/CallWithChatComposite/adapter/CallWithChatBackedCallAdapter.ts b/...-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);

diff --git a/...ages/storybook/stories/ChatComposite/snippets/CustomDataModelExampleContainer.snippet.tsx b/...ages/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({

diff --git a/...s/storybook/stories/ControlBar/Buttons/Participants/snippets/WithCustomRender.snippet.tsx b/...s/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} />
   );
 };
 

diff --git a/...ges/storybook/stories/MessageThread/snippets/MessageWithCustomMentionRenderer.snippet.tsx b/...ges/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;

diff --git a/packages/storybook/stories/ParticipantItem/snippets/CustomAvatar.snippet.tsx b/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}
       />

diff --git a/packages/storybook/stories/TypingIndicator/snippets/CustomUserRender.snippet.tsx b/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}
       </>
     );
   };

diff --git a/packages/storybook/tsconfig.json b/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"],