Merge branch 'main' into carocao/RTTCaptions

Author: carocao-msft

change-beta/@azure-communication-react-bc1dcafa-7978-478d-bf3e-22f4d211eab0.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "improvement",
+  "workstream": "Eslint",
+  "comment": "Fix Eslint errors for calling sample",
+  "packageName": "@azure/communication-react",
+  "email": "96077406+carocao-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-bc1dcafa-7978-478d-bf3e-22f4d211eab0.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "improvement",
+  "workstream": "Eslint",
+  "comment": "Fix Eslint errors for calling sample",
+  "packageName": "@azure/communication-react",
+  "email": "96077406+carocao-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

samples/Calling/eslint.config.ts

@@ -12,11 +12,6 @@ import { globalIgnores } from 'eslint/config';
 export default globalConfig([
   baseConfig,
   testFilesBaseConfig,
-  {
-    rules: {
-      'jsdoc/require-jsdoc': 'off'
-    }
-  },
   baseGlobalIgnores,
   globalIgnores(['.babel*', 'webpack*'])
 ]);

samples/Calling/src/app/App.tsx

@@ -41,6 +41,10 @@ initializeIcons();
 
 type AppPages = 'home' | 'call';
 
+/**
+ * The main app component that renders the home screen or call screen based on the current page.
+ * It fetches user credentials from the server and manages the state of the application.
+ */
 const App = (): JSX.Element => {
   const [page, setPage] = useState<AppPages>('home');
   // User credentials to join a call with - these are retrieved from the server

samples/Calling/src/app/styles/CallScreen.styles.ts

@@ -3,37 +3,60 @@
 
 import { IStackItemStyles, IStackStyles } from '@fluentui/react';
 
+/**
+ * Styles for the CallScreen component.
+ * These styles are used to layout the call screen components.
+ */
 export const headerStyles: IStackItemStyles = {
   root: {
     width: '100%'
   }
 };
+
+/**
+ * Styles for the container of the call screen.
+ * These styles ensure that the containers take up the full height and width of the screen.
+ */
 export const containerStyles: IStackStyles = {
   root: {
     height: '100%',
     width: '100%',
     overflow: 'hidden'
   }
 };
+/**
+ * Styles for the sub-container of the call screen.
+ * These styles ensure that the sub-containers take up the full height and width of the screen.
+ */
 export const subContainerStyles: IStackStyles = {
   root: {
     overflow: 'hidden',
     width: '100%',
     flexBasis: '0'
   }
 };
+/**
+ * Styles for the pane of the call screen.
+ * These styles ensure that the pane has a fixed width.
+ */
 export const paneStyles: IStackItemStyles = {
   root: {
     width: '17.875rem'
   }
 };
+/**
+ * Styles for the active container of the call screen.
+ * These styles ensure that the active container takes up the full height of the screen.
+ */
 export const activeContainerClassName: IStackItemStyles = {
   root: {
     display: 'flex',
     height: '100%'
   }
 };
-
+/**
+ * Styles for the loading spinner in the call screen.
+ */
 export const loadingStyle: IStackStyles = {
   root: {
     height: '100%',

samples/Calling/src/app/styles/DisplayNameField.styles.ts

@@ -3,17 +3,30 @@
 
 import { mergeStyles } from '@fluentui/react';
 
+/**
+ * Style properties for the TextField component's field group.
+ * Controls the height of the input field.
+ */
 export const TextFieldStyleProps = {
   fieldGroup: {
     height: '2.3rem'
   }
 };
 
+/**
+ * Styles for the input box container.
+ * Defines box sizing and border radius properties.
+ */
 export const inputBoxStyle = mergeStyles({
   boxSizing: 'border-box',
   borderRadius: '0.125rem'
 });
 
+/**
+ * Text styles for the input field and its placeholders.
+ * Applies consistent font size, weight, and line height across
+ * the input text and placeholders in different browsers.
+ */
 export const inputBoxTextStyle = mergeStyles({
   fontSize: '0.875rem',
   fontWeight: 600,

samples/Calling/src/app/styles/EndCall.styles.ts

@@ -3,46 +3,86 @@
 
 import { IButtonStyles, IStackTokens, mergeStyles } from '@fluentui/react';
 
+/**
+ * Style properties for the End Call component.
+ * These styles are used to layout the end call screen components.
+ */
 export const mainStackTokens: IStackTokens = {
   childrenGap: '1rem'
 };
+/**
+ * Styles for the end call screen buttons stack.
+ * These styles ensure that the buttons are spaced correctly.
+ */
 export const buttonsStackTokens: IStackTokens = {
   childrenGap: '0.75rem'
 };
+/**
+ * Styles for the end call screen buttons stack.
+ * These styles ensure that the buttons are spaced correctly.
+ */
 export const upperStackTokens: IStackTokens = {
   childrenGap: '1.5rem'
 };
+/**
+ * Styles for the end call screen bottom stack.
+ * These styles ensure that the bottom stack is spaced correctly.
+ */
 export const bottomStackTokens: IStackTokens = {
   childrenGap: '1.4375rem'
 };
+/**
+ * Styles for the end call screen container.
+ * These styles ensure that the container takes up the full height and width of the screen.
+ */
 export const endCallContainerStyle = mergeStyles({
   height: '100%',
   width: '100% ',
   padding: '0.5rem', //half childrenGap from Stack
   minWidth: '21.625rem', // max of min-width from stack items + padding * 2 = 20.625 + 0.5 * 2
   minHeight: 'auto'
 });
+/**
+ * Styles for the end call screen header.
+ * These styles ensure that the header takes up the full width of the screen.
+ */
 export const endCallTitleStyle = mergeStyles({
   fontSize: '1.375rem',
   fontWeight: 600,
   width: '20rem'
 });
+/**
+ * Styles for the end call screen button.
+ * These styles ensure that the button text is styled correctly.
+ */
 export const buttonStyle = mergeStyles({
   fontWeight: 600,
   height: '2.5rem',
   width: '9.875rem',
   fontSize: '0.875rem', // 14px
   padding: 0
 });
+/**
+ * Styles for the end call screen button with icon.
+ * These styles ensure that the button text container is displayed correctly.
+ */
 export const buttonWithIconStyles: IButtonStyles = {
   textContainer: {
     display: 'contents'
   }
 };
+/**
+ * Styles for the end call screen button icon.
+ * These styles ensure that the icon is displayed correctly.
+ */
 export const videoCameraIconStyle = mergeStyles({
   marginRight: '0.375rem',
   fontSize: '1.375rem'
 });
+/**
+ * Styles for the end call screen footer.
+ * These styles ensure that the footer text is styled correctly.
+ */
 export const bottomStackFooterStyle = mergeStyles({
   fontSize: '0.875 rem'
 });

samples/Calling/src/app/styles/Footer.styles.ts

@@ -2,17 +2,23 @@
 // Licensed under the MIT License.
 
 import { IButtonStyles, IStackStyles, IStackTokens, ITextFieldStyles, mergeStyles } from '@fluentui/react';
-
+/**
+ * Style properties for the pane footer component.
+ */
 export const paneFooterStyles: IStackStyles = {
   root: {
     marginBottom: '1.25rem'
   }
 };
-
+/**
+ * Style properties for the footer stack tokens.
+ */
 export const paneFooterTokens: IStackTokens = {
   childrenGap: '0.3125rem'
 };
-
+/**
+ * Style properties for the text field.
+ */
 export const textFieldStyles: Partial<ITextFieldStyles> = {
   field: {
     padding: 0
@@ -25,14 +31,19 @@ export const textFieldStyles: Partial<ITextFieldStyles> = {
     border: 'none'
   }
 };
-
+/**
+ * Style properties for the footer main text.
+ */
 export const footerMainTextStyle = mergeStyles({
   fontWeight: 600,
   fontSize: '1rem',
   marginLeft: '1rem',
   marginRight: '1rem'
 });
 
+/**
+ * Style properties for the copy link button.
+ */
 export const copyLinkButtonStyle = mergeStyles({
   fontWeight: 600,
   fontSize: '0.875rem', // 14px
@@ -42,12 +53,17 @@ export const copyLinkButtonStyle = mergeStyles({
   width: '90%'
 });
 
+/**
+ * Style properties for the button with icon.
+ */
 export const buttonWithIconStyles: IButtonStyles = {
   textContainer: {
     display: 'contents'
   }
 };
-
+/**
+ * Style properties for the copy icon.
+ */
 export const copyIconStyle = mergeStyles({
   marginRight: '0.5em'
 });