[Storyboook] Fix theme snippet by making alternative rtl snippet fix (#3932)

palatter · web-flow · commit 54784d8f0698 · 2023-12-22T21:16:00.000Z
* Fix theme snippet by making alternative rtl snippet fix

* Update BaseComposite.tsx

Signed-off-by: Patrick Latter &lt;73612854+palatter@users.noreply.github.com&gt;

* Update BaseComposite.tsx

Signed-off-by: Patrick Latter &lt;73612854+palatter@users.noreply.github.com&gt;

* Update BaseComposite.tsx

Signed-off-by: Patrick Latter &lt;73612854+palatter@users.noreply.github.com&gt;

* Fix rtl for call and callwithchat snippets

* Change files

* Duplicate change files for beta release

---------

Signed-off-by: Patrick Latter &lt;73612854+palatter@users.noreply.github.com&gt;
diff --git a/change-beta/@azure-communication-react-eb5f7c27-577a-4a77-b07e-700260a211af.json b/change-beta/@azure-communication-react-eb5f7c27-577a-4a77-b07e-700260a211af.json
@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "",
+  "comment": "Fix theme snippet by making alternative rtl snippet fix",
+  "packageName": "@azure/communication-react",
+  "email": "73612854+palatter@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@azure-communication-react-eb5f7c27-577a-4a77-b07e-700260a211af.json b/change/@azure-communication-react-eb5f7c27-577a-4a77-b07e-700260a211af.json
@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "",
+  "comment": "Fix theme snippet by making alternative rtl snippet fix",
+  "packageName": "@azure/communication-react",
+  "email": "73612854+palatter@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/src/theming/FluentThemeProvider.tsx b/packages/react-components/src/theming/FluentThemeProvider.tsx
@@ -48,7 +48,6 @@ const defaultTheme: Theme = {
 
 /** Theme context for library's react components */
 const ThemeContext = createContext<Theme>(defaultTheme);
-const SingleUsageCheckContext = createContext<boolean>(false);
 
 /**
  * Provider to apply a Fluent theme across this library's react components.
@@ -61,28 +60,15 @@ const SingleUsageCheckContext = createContext<boolean>(false);
 export const FluentThemeProvider = (props: FluentThemeProviderProps): JSX.Element => {
   const { fluentTheme, rtl, children } = props;
 
-  /**
-   * Pass only the children if we previously wrapped.
-   * This is to prevent the provider from being applied
-   * multiple times and wiping out configuration like RTL
-   * FluentThemeProvider
-   */
-  const alreadyWrapped = useSingleUsageCheck();
-  if (alreadyWrapped) {
-    return <>{children}</>;
-  }
-
   let fluentV8Theme: Theme = mergeThemes(defaultTheme, fluentTheme);
   fluentV8Theme = mergeThemes(fluentV8Theme, { rtl });
 
   return (
-    <SingleUsageCheckContext.Provider value={true}>
-      <ThemeContext.Provider value={fluentV8Theme}>
-        <ThemeProvider theme={fluentV8Theme} className={wrapper}>
-          {children}
-        </ThemeProvider>
-      </ThemeContext.Provider>
-    </SingleUsageCheckContext.Provider>
+    <ThemeContext.Provider value={fluentV8Theme}>
+      <ThemeProvider theme={fluentV8Theme} className={wrapper}>
+        {children}
+      </ThemeProvider>
+    </ThemeContext.Provider>
   );
 };
 
@@ -92,10 +78,3 @@ export const FluentThemeProvider = (props: FluentThemeProviderProps): JSX.Elemen
  * @public
  */
 export const useTheme = (): Theme => useContext(ThemeContext);
-
-/**
- * This is used to prevent the provider from being applied multiple times.
- *
- * @private
- */
-const useSingleUsageCheck = (): boolean => useContext(SingleUsageCheckContext);
diff --git a/packages/storybook/stories/CallComposite/BasicExample.stories.tsx b/packages/storybook/stories/CallComposite/BasicExample.stories.tsx
@@ -44,6 +44,7 @@ const BasicStory = (args: ArgsFrom<typeof storyControls>, context): JSX.Element
       {containerProps ? (
         <ContosoCallContainer
           fluentTheme={context.theme}
+          rtl={context.globals.rtl === 'rtl'}
           displayName={args.displayName}
           {...containerProps}
           callInvitationURL={args.callInvitationURL}
diff --git a/packages/storybook/stories/CallComposite/CustomDataModelExample.stories.tsx b/packages/storybook/stories/CallComposite/CustomDataModelExample.stories.tsx
@@ -44,6 +44,7 @@ const CustomDataModelStory = (args: ArgsFrom<typeof storyControls>, context): JS
       {containerProps ? (
         <CustomDataModelExampleContainer
           fluentTheme={context.theme}
+          rtl={context.globals.rtl === 'rtl'}
           displayName={args.displayName}
           avatarInitials={args.avatarInitials}
           {...containerProps}
diff --git a/packages/storybook/stories/CallComposite/JoinExistingCall.stories.tsx b/packages/storybook/stories/CallComposite/JoinExistingCall.stories.tsx
@@ -32,6 +32,7 @@ const JoinExistingCallStory = (args: ArgsFrom<typeof storyControls>, context): J
       {areAllKnobsSet ? (
         <ContosoCallContainer
           fluentTheme={context.theme}
+          rtl={context.globals.rtl === 'rtl'}
           locator={args.callLocator}
           userId={{ communicationUserId: args.userId }}
           token={args.token}
diff --git a/packages/storybook/stories/CallComposite/JoinExistingCallWithCTE.stories.tsx b/packages/storybook/stories/CallComposite/JoinExistingCallWithCTE.stories.tsx
@@ -31,6 +31,7 @@ const JoinExistingCallAsTeamsUserStory = (args: ArgsFrom<typeof storyControls>,
       {areAllKnobsSet ? (
         <ContosoCTECallContainer
           fluentTheme={context.theme}
+          rtl={context.globals.rtl === 'rtl'}
           locator={args.callLocator}
           userId={{ microsoftTeamsUserId: args.userId }}
           token={args.token}
diff --git a/packages/storybook/stories/CallComposite/Start1toNCall.stories.tsx b/packages/storybook/stories/CallComposite/Start1toNCall.stories.tsx
@@ -34,6 +34,7 @@ const Start1toNCallStory = (args: ArgsFrom<typeof storyControls>, context): JSX.
           <div style={args.calleeToken ? { width: '65%' } : { width: '100%' }}>
             <ContosoCallContainer1toN
               fluentTheme={context.theme}
+              rtl={context.globals.rtl === 'rtl'}
               locator={[args.calleeUserId]}
               userId={{ communicationUserId: args.userId }}
               token={args.token}
@@ -46,6 +47,7 @@ const Start1toNCallStory = (args: ArgsFrom<typeof storyControls>, context): JSX.
             <div style={{ width: '35%' }}>
               <ContosoCallContainer1toNInbound
                 fluentTheme={context.theme}
+                rtl={context.globals.rtl === 'rtl'}
                 userId={{ communicationUserId: args.calleeUserId }}
                 token={args.calleeToken}
                 locale={compositeLocale(locale)}
diff --git a/packages/storybook/stories/CallComposite/StartPSTNCall.stories.tsx b/packages/storybook/stories/CallComposite/StartPSTNCall.stories.tsx
@@ -35,6 +35,7 @@ const StartPSTNCallStory = (args: ArgsFrom<typeof storyControls>, context): JSX.
         <ContosoCallContainerPSTN
           alternateCallerId={args.alternateCallerId}
           fluentTheme={context.theme}
+          rtl={context.globals.rtl === 'rtl'}
           locator={args.callLocator}
           userId={{ communicationUserId: args.userId }}
           token={args.token}
diff --git a/packages/storybook/stories/CallComposite/ThemeExample.stories.tsx b/packages/storybook/stories/CallComposite/ThemeExample.stories.tsx
@@ -54,6 +54,7 @@ const ThemeExampleStory = (args: ArgsFrom<typeof storyControls>, context): JSX.E
         <ContosoCallContainer
           displayName={args.displayName}
           fluentTheme={theme}
+          rtl={context.globals.rtl === 'rtl'}
           {...containerProps}
           callInvitationURL={args.callInvitationURL}
           locale={compositeLocale(locale)}
diff --git a/packages/storybook/stories/CallComposite/snippets/CTEContainer.snippet.tsx b/packages/storybook/stories/CallComposite/snippets/CTEContainer.snippet.tsx
@@ -16,6 +16,7 @@ export type ContainerProps = {
   locator: string;
   formFactor?: 'desktop' | 'mobile';
   fluentTheme?: PartialTheme | Theme;
+  rtl?: boolean;
   callInvitationURL?: string;
   locale?: CompositeLocale;
   options?: CallCompositeOptions;
@@ -63,6 +64,7 @@ export const ContosoCTECallContainer = (props: ContainerProps): JSX.Element => {
           adapter={adapter}
           formFactor={props.formFactor}
           fluentTheme={props.fluentTheme}
+          rtl={props.rtl}
           callInvitationUrl={props?.callInvitationURL}
           locale={props?.locale}
           options={props?.options}
diff --git a/packages/storybook/stories/CallComposite/snippets/Container.snippet.tsx b/packages/storybook/stories/CallComposite/snippets/Container.snippet.tsx
@@ -20,6 +20,7 @@ export type ContainerProps = {
   displayName: string;
   formFactor?: 'desktop' | 'mobile';
   fluentTheme?: PartialTheme | Theme;
+  rtl?: boolean;
   callInvitationURL?: string;
   locale?: CompositeLocale;
   options?: CallCompositeOptions;
@@ -73,6 +74,7 @@ export const ContosoCallContainer = (props: ContainerProps): JSX.Element => {
           adapter={adapter}
           formFactor={props.formFactor}
           fluentTheme={props.fluentTheme}
+          rtl={props.rtl}
           callInvitationUrl={props?.callInvitationURL}
           locale={props?.locale}
           options={props?.options}
diff --git a/packages/storybook/stories/CallComposite/snippets/Container1toNInbound.snippet.tsx b/packages/storybook/stories/CallComposite/snippets/Container1toNInbound.snippet.tsx
@@ -23,6 +23,7 @@ export type ContainerProps = {
   token: string;
   formFactor?: 'desktop' | 'mobile';
   fluentTheme?: PartialTheme | Theme;
+  rtl?: boolean;
   locale?: CompositeLocale;
   options?: CallCompositeOptions;
 };
diff --git a/packages/storybook/stories/CallComposite/snippets/Container1toNOutbound.snippet.tsx b/packages/storybook/stories/CallComposite/snippets/Container1toNOutbound.snippet.tsx
@@ -17,6 +17,7 @@ export type ContainerProps = {
   displayName: string;
   formFactor?: 'desktop' | 'mobile';
   fluentTheme?: PartialTheme | Theme;
+  rtl?: boolean;
   callInvitationURL?: string;
   locale?: CompositeLocale;
   options?: CallCompositeOptions;
@@ -63,6 +64,7 @@ export const ContosoCallContainer1toN = (props: ContainerProps): JSX.Element =>
         adapter={adapter}
         formFactor={props.formFactor}
         fluentTheme={props.fluentTheme}
+        rtl={props.rtl}
         callInvitationUrl={props?.callInvitationURL}
         locale={props?.locale}
         options={props?.options}
diff --git a/packages/storybook/stories/CallComposite/snippets/ContainerPSTN.snippet.tsx b/packages/storybook/stories/CallComposite/snippets/ContainerPSTN.snippet.tsx
@@ -18,6 +18,7 @@ export type ContainerProps = {
   displayName: string;
   formFactor?: 'desktop' | 'mobile';
   fluentTheme?: PartialTheme | Theme;
+  rtl?: boolean;
   callInvitationURL?: string;
   locale?: CompositeLocale;
   options?: CallCompositeOptions;
@@ -65,6 +66,7 @@ export const ContosoCallContainerPSTN = (props: ContainerProps): JSX.Element =>
           adapter={adapter}
           formFactor={props.formFactor}
           fluentTheme={props.fluentTheme}
+          rtl={props.rtl}
           callInvitationUrl={props?.callInvitationURL}
           locale={props?.locale}
           options={props?.options}
diff --git a/packages/storybook/stories/CallComposite/snippets/CustomDataModelExampleContainer.snippet.tsx b/packages/storybook/stories/CallComposite/snippets/CustomDataModelExampleContainer.snippet.tsx
@@ -20,6 +20,7 @@ export type ContainerProps = {
   callInvitationURL?: string;
   formFactor?: 'desktop' | 'mobile';
   fluentTheme?: PartialTheme | Theme;
+  rtl?: boolean;
   locale?: CompositeLocale;
   options?: CallCompositeOptions;
 };
@@ -75,6 +76,7 @@ export const CustomDataModelExampleContainer = (props: ContainerProps): JSX.Elem
       {adapter && (
         <CallComposite
           fluentTheme={props.fluentTheme}
+          rtl={props.rtl}
           adapter={adapter}
           onFetchAvatarPersonaData={onFetchAvatarPersonaData}
           onFetchParticipantMenuItems={onFetchParticipantMenuItems}
diff --git a/packages/storybook/stories/CallWithChatComposite/BasicExample.stories.tsx b/packages/storybook/stories/CallWithChatComposite/BasicExample.stories.tsx
@@ -64,7 +64,11 @@ const BasicStory = (args: ArgsFrom<typeof storyControls>, context): JSX.Element
     <>
       <Stack horizontalAlign="center" verticalAlign="center" styles={compositeExperienceContainerStyle}>
         {callWithChatProps ? (
-          <CallWithChatExperienceWithErrorChecks fluentTheme={context.theme} {...callWithChatProps} />
+          <CallWithChatExperienceWithErrorChecks
+            fluentTheme={context.theme}
+            rtl={context.globals.rtl === 'rtl'}
+            {...callWithChatProps}
+          />
         ) : (
           <ConfigHintBanner />
         )}
diff --git a/packages/storybook/stories/CallWithChatComposite/JoinExample.stories.tsx b/packages/storybook/stories/CallWithChatComposite/JoinExample.stories.tsx
@@ -45,7 +45,11 @@ const JoinTeamsMeetingStory = (args: ArgsFrom<typeof storyControls>, context): J
     <>
       <Stack horizontalAlign="center" verticalAlign="center" styles={compositeExperienceContainerStyle}>
         {meetingProps ? (
-          <CallWithChatExperienceWithErrorChecks fluentTheme={context.theme} {...meetingProps} />
+          <CallWithChatExperienceWithErrorChecks
+            fluentTheme={context.theme}
+            rtl={context.globals.rtl === 'rtl'}
+            {...meetingProps}
+          />
         ) : (
           <ConfigJoinMeetingHintBanner />
         )}
diff --git a/packages/storybook/stories/CallWithChatComposite/snippets/CallWithChat.snippet.tsx b/packages/storybook/stories/CallWithChatComposite/snippets/CallWithChat.snippet.tsx
@@ -32,6 +32,7 @@ export type CallWithChatExampleProps = {
 
   // Props to customize the CallWithChatComposite experience
   fluentTheme?: PartialTheme | Theme;
+  rtl?: boolean;
   compositeOptions?: CallWithChatCompositeOptions;
   callInvitationURL?: string;
   formFactor?: 'desktop' | 'mobile';
@@ -62,6 +63,7 @@ export const CallWithChatExperience = (props: CallWithChatExampleProps): JSX.Ele
     <CallWithChatComposite
       adapter={adapter}
       fluentTheme={props.fluentTheme}
+      rtl={props.rtl}
       formFactor={props.formFactor}
       joinInvitationURL={props.callInvitationURL}
       options={props.compositeOptions}
diff --git a/packages/storybook/stories/CallWithChatComposite/snippets/CallWithChatWithErrorChecks.snippet.tsx b/packages/storybook/stories/CallWithChatComposite/snippets/CallWithChatWithErrorChecks.snippet.tsx
@@ -16,6 +16,7 @@ export type CallWithChatExampleProps = {
   endpointUrl: string;
   locator: TeamsMeetingLinkLocator | CallAndChatLocator;
   fluentTheme?: PartialTheme | Theme;
+  rtl?: boolean;
   compositeOptions?: CallWithChatCompositeOptions;
   callInvitationURL?: string;
   formFactor?: 'desktop' | 'mobile';
@@ -50,6 +51,7 @@ export const CallWithChatExperienceWithErrorChecks = (props: CallWithChatExample
     <CallWithChatComposite
       adapter={adapter}
       fluentTheme={props.fluentTheme}
+      rtl={props.rtl}
       formFactor={props.formFactor}
       joinInvitationURL={props.callInvitationURL}
       options={props.compositeOptions}
diff --git a/packages/storybook/stories/ChatComposite/ATryChatComposite.stories.tsx b/packages/storybook/stories/ChatComposite/ATryChatComposite.stories.tsx
@@ -43,11 +43,16 @@ const TryChatCompositeStory = (args: ArgsFrom<typeof storyControls>, context): J
     });
   }, [args.displayName, args.topic]);
 
+  console.log('rtl', context.rtl);
+  console.log('theme', context.theme);
+  console.log('globals', context.globals);
+
   return (
     <Stack horizontalAlign="center" verticalAlign="center" styles={compositeExperienceContainerStyle}>
       {containerProps && (
         <ContosoChatContainer
           fluentTheme={context.theme}
+          rtl={context.globals.rtl === 'rtl'}
           {...containerProps}
           locale={compositeLocale(locale)}
           showParticipants={args.showParticipants}
diff --git a/packages/storybook/stories/ChatComposite/BasicExample.stories.tsx b/packages/storybook/stories/ChatComposite/BasicExample.stories.tsx
@@ -69,6 +69,7 @@ const BasicStory = (args: ArgsFrom<typeof storyControls>, context): JSX.Element
       {containerProps ? (
         <ContosoChatContainer
           fluentTheme={context.theme}
+          rtl={context.globals.rtl === 'rtl'}
           {...containerProps}
           locale={compositeLocale(locale)}
           errorBar={args.showErrorBar}
diff --git a/packages/storybook/stories/ChatComposite/CustomBehavior.stories.tsx b/packages/storybook/stories/ChatComposite/CustomBehavior.stories.tsx
@@ -9,7 +9,7 @@ import { COMPOSITE_FOLDER_PREFIX, compositeExperienceContainerStyle } from '../c
 import { defaultChatCompositeHiddenControls, controlsToAdd, ArgsFrom } from '../controlsUtils';
 import { compositeLocale } from '../localizationUtils';
 import { Docs } from './ChatCompositeDocs';
-import { ContosoChatContainer, ContainerProps } from './CustomBehaviorExampleContainer';
+import { ContosoChatContainer, ContainerProps } from './snippets/CustomBehaviorExampleContainer';
 import { ConfigHintBanner, addParrotBotToThread, createThreadAndAddUser } from './snippets/Utils';
 
 const messageArray = [
@@ -57,7 +57,12 @@ const CustomBehaviorStory = (args: ArgsFrom<typeof storyControls>, context): JSX
   return (
     <Stack horizontalAlign="center" verticalAlign="center" styles={compositeExperienceContainerStyle}>
       {containerProps ? (
-        <ContosoChatContainer fluentTheme={context.theme} locale={compositeLocale(locale)} {...containerProps} />
+        <ContosoChatContainer
+          fluentTheme={context.theme}
+          rtl={context.globals.rtl === 'rtl'}
+          locale={compositeLocale(locale)}
+          {...containerProps}
+        />
       ) : (
         <ConfigHintBanner />
       )}
diff --git a/packages/storybook/stories/ChatComposite/CustomDataModelExample.stories.tsx b/packages/storybook/stories/ChatComposite/CustomDataModelExample.stories.tsx
@@ -77,6 +77,7 @@ const CustomDataModelStory = (args: ArgsFrom<typeof storyControls>, context): JS
       {containerProps ? (
         <CustomDataModelExampleContainer
           fluentTheme={context.theme}
+          rtl={context.globals.rtl === 'rtl'}
           locale={compositeLocale(locale)}
           {...containerProps}
           botAvatar={getControlledBotAvatarSymbol(args.avatar)}
diff --git a/packages/storybook/stories/ChatComposite/CustomDateTimeFormat.stories.tsx b/packages/storybook/stories/ChatComposite/CustomDateTimeFormat.stories.tsx
@@ -73,6 +73,7 @@ const CustomDateTimeFormatStory = (args: ArgsFrom<typeof storyControls>, context
       {containerProps ? (
         <ContosoChatContainer
           fluentTheme={context.theme}
+          rtl={context.globals.rtl === 'rtl'}
           {...containerProps}
           locale={{
             component: { strings, onDisplayDateTimeString },
diff --git a/packages/storybook/stories/ChatComposite/JoinExistingChatThread.stories.tsx b/packages/storybook/stories/ChatComposite/JoinExistingChatThread.stories.tsx
@@ -32,6 +32,7 @@ const JoinExistingChatThreadStory = (args: ArgsFrom<typeof storyControls>, conte
       {areAllControlsSet ? (
         <ContosoChatContainer
           fluentTheme={context.theme}
+          rtl={context.globals.rtl === 'rtl'}
           endpointUrl={args.endpointUrl}
           threadId={args.threadId}
           userIdentifier={args.userId}
diff --git a/packages/storybook/stories/ChatComposite/snippets/ATryChatCompositeContainer.snippet.tsx b/packages/storybook/stories/ChatComposite/snippets/ATryChatCompositeContainer.snippet.tsx
@@ -10,6 +10,7 @@ export type ContainerProps = {
   displayName: string;
   topic: string;
   fluentTheme?: PartialTheme | Theme;
+  rtl?: boolean;
   errorBar?: boolean;
   showParticipants?: boolean;
   showTopic?: boolean;
@@ -50,6 +51,7 @@ export const ContosoChatContainer = (props: ContainerProps): JSX.Element => {
         <ChatComposite
           adapter={fakeAdapter.local}
           fluentTheme={props.fluentTheme}
+          rtl={props.rtl ?? false}
           options={{
             topic: props.showTopic,
             participantPane: props.showParticipants
diff --git a/packages/storybook/stories/ChatComposite/snippets/Container.snippet.tsx b/packages/storybook/stories/ChatComposite/snippets/Container.snippet.tsx
@@ -16,6 +16,7 @@ export type ContainerProps = {
   endpointUrl: string;
   threadId: string;
   fluentTheme?: PartialTheme | Theme;
+  rtl?: boolean;
   errorBar?: boolean;
   participants?: boolean;
   topic?: boolean;
@@ -61,6 +62,7 @@ export const ContosoChatContainer = (props: ContainerProps): JSX.Element => {
         <ChatComposite
           adapter={adapter}
           fluentTheme={props.fluentTheme}
+          rtl={props.rtl ?? false}
           options={{
             errorBar: props.errorBar,
             participantPane: props.participants,
diff --git a/packages/storybook/stories/ChatComposite/snippets/CustomBehaviorExampleContainer.tsx b/packages/storybook/stories/ChatComposite/snippets/CustomBehaviorExampleContainer.tsx
diff --git a/packages/storybook/stories/ChatComposite/snippets/CustomDataModelExampleContainer.snippet.tsx b/packages/storybook/stories/ChatComposite/snippets/CustomDataModelExampleContainer.snippet.tsx
