Merge remote-tracking branch 'refs/remotes/origin/alkwa/create-modality-specific-selectors' into alkwa/create-modality-specific-selectors

Author: alkwa-msft

change-beta/@azure-communication-react-2e4a29d5-272c-4225-9f4f-add54c5646f1.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "fixes treeshaking issue with usePropsFor by supporting useChatPropsFor and useCallingPropsFor",
+  "comment": "re-exporting functions and handling undefined case to match top-level usePropsFor function",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-2e4a29d5-272c-4225-9f4f-add54c5646f1.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "fixes treeshaking issue with usePropsFor by supporting useChatPropsFor and useCallingPropsFor",
+  "comment": "re-exporting functions and handling undefined case to match top-level usePropsFor function",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/communication-react/src/mergedHooks.ts

@@ -5,14 +5,16 @@ import {
   getCallingSelector,
   GetCallingSelector,
   useCallingHandlers,
-  useCallingSelector
+  useCallingSelector,
+  useCallingPropsFor as useCallingPropsForInternal
 } from '@internal/calling-component-bindings';
 import {
   ChatHandlers,
   getChatSelector,
   GetChatSelector,
   useChatHandlers,
-  useChatSelector
+  useChatSelector,
+  useChatPropsFor as useChatPropsForInternal
 } from '@internal/chat-component-bindings';
 import { ChatClientState } from '@internal/chat-stateful-client';
 import { CallClientState } from '@internal/calling-stateful-client';
@@ -148,6 +150,13 @@ export const usePropsFor = <Component extends (props: any) => JSX.Element>(
   }
 };
 
+/**
+ * Helper function to pull the necessary properties for a chat component. There is a general usePropsFor
+ * function however since it can pull in for both calling and chat you will not be able to leverage any treeshaking
+ * functionality.
+ *
+ * @public
+ */
 export const useChatPropsFor = <Component extends (props: any) => JSX.Element>(
   component: Component
 ): ComponentProps<Component> => {
@@ -173,6 +182,13 @@ export const useChatPropsFor = <Component extends (props: any) => JSX.Element>(
   }
 };
 
+/**
+ * Helper function to pull the necessary properties for a calling component. There is a general usePropsFor
+ * function however since it can pull in for both calling and chat you will not be able to leverage any treeshaking
+ * functionality.
+ *
+ * @public
+ */
 export const useCallingPropsFor = <Component extends (props: any) => JSX.Element>(
   component: Component
 ): ComponentProps<Component> => {

packages/storybook8/stories/StatefulClient/BestPractices.mdx

@@ -17,6 +17,11 @@ By using the stateful client for calling or chat, you are on our recommended pat
 If you are using our provided UI Components, `usePropsFor` will help you get integrated with the underlying functionality quickly. This provides a series of properties our
 provided components are expecting from the stateful client to render an experience your users will be expecting. This is the fastest way to get your experience up and running with Azure Communication Services.
 
+If you are building calling specific or chat specific scenarios it may be advantageous to use the `useCallingPropsFor` or `useChatPropsFor` functions instead of `usePropsFor`.
+Since `usePropsFor` can grab references to calling or chat components it tells the treeshaking process I am going to need both Calling and Chat functionality and will not treeshake out those dependencies.
+If you are looking to reduce the bundle size further and you are building a chat scenario we would recommend using `useChatPropsFor` instead of `usePropsFor` and skip pulling in any calling dependencies.
+Similarly for calling scenarios you will want to use `useCallingPropsFor` and treeshake out any chat specific dependencies.
+
 ## You can use your own UI Components
 
 Today you can use `useSelector` to connect your own components to create your own experiences! We use `useSelector` under the hood when you leverage our `usePropsFor` hook.