Export components from their declaration statement to be able to popu…

…late ArgTypes

Check this storybook issue: storybookjs/storybook#13304 (comment).

src/providers/AudioVideoProvider/index.tsx

@@ -10,7 +10,7 @@ type AudioVideoValue = AudioVideoFacade | null;
 
 export const AudioVideoContext = createContext<AudioVideoValue>(null);
 
-const AudioVideoProvider: React.FC<React.PropsWithChildren<unknown>> = ({
+export const AudioVideoProvider: React.FC<React.PropsWithChildren<unknown>> = ({
   children,
 }) => {
   const meetingManager = useMeetingManager();
@@ -33,10 +33,8 @@ const AudioVideoProvider: React.FC<React.PropsWithChildren<unknown>> = ({
   );
 };
 
-const useAudioVideo = (): AudioVideoValue => {
+export const useAudioVideo = (): AudioVideoValue => {
   const audioVideo = useContext(AudioVideoContext);
 
   return audioVideo;
 };
-
-export { useAudioVideo, AudioVideoProvider };

src/providers/BackgroundBlurProvider/index.tsx

@@ -46,7 +46,7 @@ const BackgroundBlurProviderContext = createContext<
   BackgroundBlurProviderState | undefined
 >(undefined);
 
-const BackgroundBlurProvider: FC<React.PropsWithChildren<Props>> = ({
+export const BackgroundBlurProvider: FC<React.PropsWithChildren<Props>> = ({
   spec,
   options,
   children,
@@ -193,7 +193,7 @@ const BackgroundBlurProvider: FC<React.PropsWithChildren<Props>> = ({
   );
 };
 
-const useBackgroundBlur = (): BackgroundBlurProviderState => {
+export const useBackgroundBlur = (): BackgroundBlurProviderState => {
   const context = useContext(BackgroundBlurProviderContext);
 
   if (!context) {
@@ -203,5 +203,3 @@ const useBackgroundBlur = (): BackgroundBlurProviderState => {
   }
   return context;
 };
-
-export { BackgroundBlurProvider, useBackgroundBlur };

src/providers/BackgroundReplacementProvider/index.tsx

@@ -46,11 +46,9 @@ const BackgroundReplacementProviderContext = createContext<
   BackgroundReplacementProviderState | undefined
 >(undefined);
 
-const BackgroundReplacementProvider: FC<React.PropsWithChildren<Props>> = ({
-  spec,
-  options,
-  children,
-}) => {
+export const BackgroundReplacementProvider: FC<
+  React.PropsWithChildren<Props>
+> = ({ spec, options, children }) => {
   const logger = useLogger();
   const [
     isBackgroundReplacementSupported,
@@ -194,16 +192,15 @@ const BackgroundReplacementProvider: FC<React.PropsWithChildren<Props>> = ({
   );
 };
 
-const useBackgroundReplacement = (): BackgroundReplacementProviderState => {
-  const context = useContext(BackgroundReplacementProviderContext);
+export const useBackgroundReplacement =
+  (): BackgroundReplacementProviderState => {
+    const context = useContext(BackgroundReplacementProviderContext);
 
-  if (!context) {
-    throw new Error(
-      'useBackgroundReplacement must be used within BackgroundReplacementProvider'
-    );
-  }
-
-  return context;
-};
+    if (!context) {
+      throw new Error(
+        'useBackgroundReplacement must be used within BackgroundReplacementProvider'
+      );
+    }
 
-export { BackgroundReplacementProvider, useBackgroundReplacement };
+    return context;
+  };

src/providers/ContentShareProvider/index.tsx

@@ -25,9 +25,9 @@ const ContentShareContext = createContext<ContentShareState | null>(null);
 const ContentShareControlContext =
   createContext<ContentShareControlContextType | null>(null);
 
-const ContentShareProvider: React.FC<React.PropsWithChildren<unknown>> = ({
-  children,
-}) => {
+export const ContentShareProvider: React.FC<
+  React.PropsWithChildren<unknown>
+> = ({ children }) => {
   const audioVideo = useAudioVideo();
   const [state, dispatch] = useReducer(reducer, initialState);
   const { paused, isLocalUserSharing, isLocalShareLoading } = state;
@@ -180,7 +180,7 @@ const ContentShareProvider: React.FC<React.PropsWithChildren<unknown>> = ({
   );
 };
 
-const useContentShareState = (): ContentShareState => {
+export const useContentShareState = (): ContentShareState => {
   const contentShareState = useContext(ContentShareContext);
 
   if (!contentShareState) {
@@ -192,7 +192,7 @@ const useContentShareState = (): ContentShareState => {
   return contentShareState;
 };
 
-const useContentShareControls = (): ContentShareControlContextType => {
+export const useContentShareControls = (): ContentShareControlContextType => {
   const context = useContext(ContentShareControlContext);
 
   if (!context) {
@@ -202,5 +202,3 @@ const useContentShareControls = (): ContentShareControlContextType => {
   }
   return context;
 };
-
-export { ContentShareProvider, useContentShareState, useContentShareControls };

src/providers/DevicesProvider/AudioInputProvider.tsx

@@ -28,7 +28,7 @@ interface Props {
 
 const Context = createContext<AudioInputContextType | null>(null);
 
-const AudioInputProvider: React.FC<React.PropsWithChildren<Props>> = ({
+export const AudioInputProvider: React.FC<React.PropsWithChildren<Props>> = ({
   children,
   onDeviceReplacement,
 }) => {
@@ -156,7 +156,7 @@ const AudioInputProvider: React.FC<React.PropsWithChildren<Props>> = ({
   return <Context.Provider value={contextValue}>{children}</Context.Provider>;
 };
 
-const useAudioInputs = (): AudioInputContextType => {
+export const useAudioInputs = (): AudioInputContextType => {
   const context = useContext(Context);
 
   if (!context) {
@@ -165,5 +165,3 @@ const useAudioInputs = (): AudioInputContextType => {
 
   return context;
 };
-
-export { AudioInputProvider, useAudioInputs };

src/providers/DevicesProvider/AudioOutputProvider.tsx

@@ -17,9 +17,9 @@ import { useMeetingManager } from '../MeetingProvider';
 
 const AudioOutputContext = createContext<AudioOutputContextType | null>(null);
 
-const AudioOutputProvider: React.FC<React.PropsWithChildren<unknown>> = ({
-  children,
-}) => {
+export const AudioOutputProvider: React.FC<
+  React.PropsWithChildren<unknown>
+> = ({ children }) => {
   const logger = useLogger();
   const audioVideo = useAudioVideo();
   const [audioOutputs, setAudioOutputs] = useState<MediaDeviceInfo[]>([]);
@@ -93,7 +93,7 @@ const AudioOutputProvider: React.FC<React.PropsWithChildren<unknown>> = ({
   );
 };
 
-const useAudioOutputs = (): AudioOutputContextType => {
+export const useAudioOutputs = (): AudioOutputContextType => {
   const context = useContext(AudioOutputContext);
 
   if (!context) {
@@ -102,5 +102,3 @@ const useAudioOutputs = (): AudioOutputContextType => {
 
   return context;
 };
-
-export { AudioOutputProvider, useAudioOutputs };

src/providers/DevicesProvider/VideoInputProvider.tsx

@@ -17,7 +17,7 @@ import { useMeetingManager } from '../MeetingProvider';
 
 const Context = createContext<VideoInputContextType | null>(null);
 
-const VideoInputProvider: React.FC<React.PropsWithChildren<unknown>> = ({
+export const VideoInputProvider: React.FC<React.PropsWithChildren<unknown>> = ({
   children,
 }) => {
   const logger = useLogger();
@@ -89,7 +89,7 @@ const VideoInputProvider: React.FC<React.PropsWithChildren<unknown>> = ({
   return <Context.Provider value={contextValue}>{children}</Context.Provider>;
 };
 
-const useVideoInputs = (): VideoInputContextType => {
+export const useVideoInputs = (): VideoInputContextType => {
   const context = useContext(Context);
 
   if (!context) {
@@ -98,5 +98,3 @@ const useVideoInputs = (): VideoInputContextType => {
 
   return context;
 };
-
-export { VideoInputProvider, useVideoInputs };

src/providers/DevicesProvider/index.tsx

@@ -15,7 +15,7 @@ interface Props {
   ) => Promise<AudioInputDevice>;
 }
 
-const DevicesProvider: React.FC<React.PropsWithChildren<Props>> = ({
+export const DevicesProvider: React.FC<React.PropsWithChildren<Props>> = ({
   children,
   onDeviceReplacement,
 }) => (
@@ -26,4 +26,4 @@ const DevicesProvider: React.FC<React.PropsWithChildren<Props>> = ({
   </AudioInputProvider>
 );
 
-export { DevicesProvider, useAudioInputs, useAudioOutputs, useVideoInputs };
+export { useAudioInputs, useAudioOutputs, useVideoInputs };

src/providers/FeaturedVideoTileProvider/index.tsx

@@ -21,9 +21,9 @@ const TILE_TRANSITION_DELAY = 1500;
 
 const FeaturedTileContext = createContext<FeaturedTileState | null>(null);
 
-const FeaturedVideoTileProvider: React.FC<React.PropsWithChildren<unknown>> = ({
-  children,
-}) => {
+export const FeaturedVideoTileProvider: React.FC<
+  React.PropsWithChildren<unknown>
+> = ({ children }) => {
   const meetingManager = useMeetingManager();
   const { attendeeIdToTileId } = useRemoteVideoTileState();
   const activeTileRef = useRef<number | null>(null);
@@ -101,7 +101,7 @@ const FeaturedVideoTileProvider: React.FC<React.PropsWithChildren<unknown>> = ({
   );
 };
 
-function useFeaturedTileState(): FeaturedTileState {
+export function useFeaturedTileState(): FeaturedTileState {
   const state = useContext(FeaturedTileContext);
 
   if (!state) {
@@ -112,5 +112,3 @@ function useFeaturedTileState(): FeaturedTileState {
 
   return state;
 }
-
-export { FeaturedVideoTileProvider, useFeaturedTileState };

src/providers/LocalAudioOutputProvider/index.tsx

@@ -17,9 +17,9 @@ import { useLogger } from '../LoggerProvider';
 
 const Context = createContext<LocalAudioOutputContextType | null>(null);
 
-const LocalAudioOutputProvider: React.FC<React.PropsWithChildren<unknown>> = ({
-  children,
-}) => {
+export const LocalAudioOutputProvider: React.FC<
+  React.PropsWithChildren<unknown>
+> = ({ children }) => {
   const logger = useLogger();
   const audioVideo = useAudioVideo();
   const [isAudioOn, setIsAudioOn] = useState(true);
@@ -76,7 +76,7 @@ const LocalAudioOutputProvider: React.FC<React.PropsWithChildren<unknown>> = ({
   );
 };
 
-const useLocalAudioOutput = (): LocalAudioOutputContextType => {
+export const useLocalAudioOutput = (): LocalAudioOutputContextType => {
   const context = useContext(Context);
   if (!context) {
     throw new Error(
@@ -85,5 +85,3 @@ const useLocalAudioOutput = (): LocalAudioOutputContextType => {
   }
   return context;
 };
-
-export { LocalAudioOutputProvider, useLocalAudioOutput };

src/providers/LocalVideoProvider/index.tsx

@@ -19,7 +19,7 @@ import { useMeetingManager } from '../MeetingProvider';
 
 const Context = createContext<LocalVideoContextType | null>(null);
 
-const LocalVideoProvider: React.FC<React.PropsWithChildren<unknown>> = ({
+export const LocalVideoProvider: React.FC<React.PropsWithChildren<unknown>> = ({
   children,
 }) => {
   const logger = useLogger();
@@ -138,7 +138,7 @@ const LocalVideoProvider: React.FC<React.PropsWithChildren<unknown>> = ({
   return <Context.Provider value={value}>{children}</Context.Provider>;
 };
 
-const useLocalVideo = (): LocalVideoContextType => {
+export const useLocalVideo = (): LocalVideoContextType => {
   const context = useContext(Context);
 
   if (!context) {
@@ -147,5 +147,3 @@ const useLocalVideo = (): LocalVideoContextType => {
 
   return context;
 };
-
-export { LocalVideoProvider, useLocalVideo };

src/providers/MeetingEventProvider/index.tsx

@@ -16,9 +16,9 @@ type MeetingEventProviderContextType =
 export const MeetingEventProviderContext =
   createContext<MeetingEventProviderContextType>(undefined);
 
-const MeetingEventProvider: React.FC<React.PropsWithChildren<unknown>> = ({
-  children,
-}) => {
+export const MeetingEventProvider: React.FC<
+  React.PropsWithChildren<unknown>
+> = ({ children }) => {
   const [meetingEvent, setMeetingEvent] =
     useState<MeetingEventProviderContextType>();
   const meetingManager = useMeetingManager();
@@ -45,9 +45,7 @@ const MeetingEventProvider: React.FC<React.PropsWithChildren<unknown>> = ({
   );
 };
 
-const useMeetingEvent = (): MeetingEventProviderContextType => {
+export const useMeetingEvent = (): MeetingEventProviderContextType => {
   const meetingEvent = useContext(MeetingEventProviderContext);
   return meetingEvent;
 };
-
-export { useMeetingEvent, MeetingEventProvider };

src/providers/NotificationProvider/index.tsx

@@ -16,9 +16,9 @@ import {
 const StateContext = React.createContext<StateType>(initialState);
 const DispatchContext = React.createContext<Dispatch<Action>>((): void => {});
 
-const NotificationProvider: React.FC<React.PropsWithChildren<unknown>> = ({
-  children,
-}) => {
+export const NotificationProvider: React.FC<
+  React.PropsWithChildren<unknown>
+> = ({ children }) => {
   const [state, dispatch] = useReducer(reducer, initialState);
   return (
     <StateContext.Provider value={state}>
@@ -29,22 +29,14 @@ const NotificationProvider: React.FC<React.PropsWithChildren<unknown>> = ({
   );
 };
 
-const useNotificationState = () => {
+export const useNotificationState = () => {
   const state = useContext(StateContext);
   return state;
 };
 
-const useNotificationDispatch = () => {
+export const useNotificationDispatch = () => {
   const dispatch = useContext(DispatchContext);
   return dispatch;
 };
 
-export {
-  NotificationProvider,
-  useNotificationState,
-  useNotificationDispatch,
-  Severity,
-  NotificationType,
-  ActionType,
-  Action,
-};
+export { Severity, NotificationType, ActionType, Action };

src/providers/RemoteVideoTileProvider/index.tsx

@@ -9,9 +9,9 @@ import { initialState, reducer, State, VideoTileActionType } from './state';
 
 const Context = createContext<State | null>(null);
 
-const RemoteVideoTileProvider: React.FC<React.PropsWithChildren<unknown>> = ({
-  children,
-}) => {
+export const RemoteVideoTileProvider: React.FC<
+  React.PropsWithChildren<unknown>
+> = ({ children }) => {
   const audioVideo = useAudioVideo();
   const [state, dispatch] = useReducer(reducer, initialState);
 
@@ -63,7 +63,7 @@ const RemoteVideoTileProvider: React.FC<React.PropsWithChildren<unknown>> = ({
   return <Context.Provider value={state}>{children}</Context.Provider>;
 };
 
-const useRemoteVideoTileState = (): State => {
+export const useRemoteVideoTileState = (): State => {
   const state = useContext(Context);
 
   if (!state) {
@@ -74,5 +74,3 @@ const useRemoteVideoTileState = (): State => {
 
   return state;
 };
-
-export { RemoteVideoTileProvider, useRemoteVideoTileState };