Migrate stories for Providers and Hooks

.storybook/main.ts

@@ -10,7 +10,12 @@ const config: StorybookConfig = {
         prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
     },
   },
-  stories: ['../src/components/sdk/**/*.mdx', '../src/components/*.mdx'],
+  stories: [
+    '../src/components/sdk/**/*.mdx',
+    '../src/components/*.mdx',
+    '../src/hooks/**/*.mdx',
+    '../src/providers/**/*.mdx',
+  ],
   addons: [
     {
       name: '@storybook/addon-essentials',

src/hooks/introduction.mdx

@@ -1,3 +1,5 @@
+import { Meta } from '@storybook/blocks';
+
 <Meta title="SDK Hooks/Introduction" />
 
 # SDK Hooks

src/hooks/sdk/docs/useActiveSpeakersState.mdx

@@ -1,3 +1,5 @@
+import { Meta } from '@storybook/blocks';
+
 <Meta title="SDK Hooks/useActiveSpeakersState" />
 
 # useActiveSpeakersState
@@ -29,7 +31,7 @@ The hook depends on the `MeetingProvider`.
 import React from 'react';
 import {
   MeetingProvider,
-  useActiveSpeakersState
+  useActiveSpeakersState,
 } from 'amazon-chime-sdk-component-library-react';
 
 const App = () => (
@@ -40,7 +42,7 @@ const App = () => (
 
 const MyChild = () => {
   const activeSpeakers = useActiveSpeakersState();
-  const list = activeSpeakers.map(id => (
+  const list = activeSpeakers.map((id) => (
     <li>Attendee {id} is an active speaker</li>
   ));
 

src/hooks/sdk/docs/useAttendeeAudioStatus.mdx

@@ -1,3 +1,5 @@
+import { Meta } from '@storybook/blocks';
+
 <Meta title="SDK Hooks/useAttendeeAudioStatus" />
 
 # useAttendeeAudioStatus
@@ -30,7 +32,7 @@ The hook depends on the `AudioVideoProvider`. If you are using `MeetingProvider`
 import React from 'react';
 import {
   MeetingProvider,
-  useAttendeeAudioStatus
+  useAttendeeAudioStatus,
 } from 'amazon-chime-sdk-component-library-react';
 
 const App = () => (

src/hooks/sdk/docs/useAttendeeStatus.mdx

@@ -1,3 +1,5 @@
+import { Meta } from '@storybook/blocks';
+
 <Meta title="SDK Hooks/useAttendeeStatus" />
 
 # useAttendeeStatus

src/hooks/sdk/docs/useDeviceLabelTriggerStatus.mdx

@@ -1,3 +1,5 @@
+import { Meta } from '@storybook/blocks';
+
 <Meta title="SDK Hooks/useDeviceLabelTriggerStatus" />
 
 # useDeviceLabelTriggerStatus
@@ -16,6 +18,7 @@ enum DeviceLabelTriggerStatus {
 ```
 
 `DeviceLabelTriggerStatus.UNTRIGGERED` could mean three cases:
+
 1. `DeviceLabelTrigger` is not triggered to request device permission.
 2. Device permission is already granted before and thus `DeviceLabelTrigger` can not be triggered.
 3. Device permission is already denied before and thus `DeviceLabelTrigger` can not be triggered.

src/hooks/sdk/docs/useLocalAudioInputActivity.mdx

@@ -1,3 +1,5 @@
+import { Meta } from '@storybook/blocks';
+
 <Meta title="SDK Hooks/useLocalAudioInputActivity" />
 
 # useLocalAudioInputActivity

src/hooks/sdk/docs/useLocalAudioInputActivityPreview.mdx

@@ -1,3 +1,5 @@
+import { Meta } from '@storybook/blocks';
+
 <Meta title="SDK Hooks/useLocalAudioInputActivityPreview" />
 
 # useLocalAudioInputActivityPreview

src/hooks/sdk/docs/useMediaStreamMetrics.mdx

@@ -1,3 +1,5 @@
+import { Meta } from '@storybook/blocks';
+
 <Meta title="SDK Hooks/useMediaStreamMetrics" />
 
 # useMediaStreamMetrics

src/hooks/sdk/docs/useMeetingStatus.mdx

@@ -1,3 +1,5 @@
+import { Meta } from '@storybook/blocks';
+
 <Meta title="SDK Hooks/useMeetingStatus" />
 
 # useMeetingStatus
@@ -37,7 +39,7 @@ The hook depends on the `MeetingProvider`.
 import React from 'react';
 import {
   MeetingProvider,
-  useMeetingStatus
+  useMeetingStatus,
 } from 'amazon-chime-sdk-component-library-react';
 
 const App = () => (

src/hooks/sdk/docs/useSelectVideoQuality.mdx

@@ -1,3 +1,5 @@
+import { Meta } from '@storybook/blocks';
+
 <Meta title="SDK Hooks/useSelectVideoQuality" />
 
 # useSelectVideoQuality

src/hooks/sdk/docs/useToggleLocalMute.mdx

@@ -1,5 +1,7 @@
 import useToggleLocalMute from '../useToggleLocalMute';
 
+import { Meta } from '@storybook/blocks';
+
 <Meta title="SDK Hooks/useToggleLocalMute" />
 
 # useToggleLocalMute
@@ -14,7 +16,7 @@ The `useToggleLocalMute` hook returns the state of whether the local user is mut
   muted: boolean;
 
   // A function to toggle the local user's mute state
- toggleMute: () => void;
+  toggleMute: () => void;
 }
 ```
 
@@ -30,7 +32,10 @@ The hook depends on the `AudioVideoProvider`. If you are using `MeetingProvider`
 
 ```jsx
 import React from 'react';
-import { MeetingProvider, useToggleLocalMute } from 'amazon-chime-sdk-component-library-react';
+import {
+  MeetingProvider,
+  useToggleLocalMute,
+} from 'amazon-chime-sdk-component-library-react';
 
 const App = () => (
   <MeetingProvider>
@@ -42,11 +47,9 @@ const MyChild = () => {
   const { muted, toggleMute } = useToggleLocalMute();
 
   return (
-    <button onClick={toggleMute}>
-      { muted ? 'Umute myself' : 'Mute}
-    </button>
-  )
-}
+    <button onClick={toggleMute}>{muted ? 'Unmute myself' : 'Mute'}</button>
+  );
+};
 ```
 
 ### Dependencies

src/providers/AudioVideoProvider/docs/AudioVideoProvider.mdx

@@ -1,3 +1,5 @@
+import { Meta } from '@storybook/blocks';
+
 <Meta title="SDK Providers/AudioVideoProvider" />
 
 # AudioVideoProvider

src/providers/AudioVideoProvider/docs/useAudioVideo.mdx

@@ -1,3 +1,5 @@
+import { Meta } from '@storybook/blocks';
+
 <Meta title="SDK Hooks/useAudioVideo" />
 
 # useAudioVideo

src/providers/BackgroundBlurProvider/docs/useBackgroundBlur.mdx

@@ -1,5 +1,4 @@
-import { Meta, ArgTypes } from '@storybook/blocks';
-import { useBackgroundBlur } from '../';
+import { Meta } from '@storybook/blocks';
 
 <Meta title="SDK Hooks/useBackgroundBlur" />
 

src/providers/BackgroundReplacementProvider/docs/useBackgroundReplacement.mdx

@@ -1,5 +1,4 @@
-import { Meta, ArgTypes } from '@storybook/blocks';
-import { useBackgroundReplacement } from '../';
+import { Meta } from '@storybook/blocks';
 
 <Meta title="SDK Hooks/useBackgroundReplacement" />
 

src/providers/ContentShareProvider/docs/ContentShareProvider.mdx

@@ -1,3 +1,5 @@
+import { Meta } from '@storybook/blocks';
+
 <Meta title="SDK Providers/ContentShareProvider" />
 
 # ContentShareProvider
@@ -35,7 +37,7 @@ If you are using `MeetingProvider`, the `ContentShareProvider` is rendered by de
 import React from 'react';
 import {
   MeetingProvider,
-  useContentShareState
+  useContentShareState,
 } from 'amazon-chime-sdk-component-library-react';
 
 const App = () => (

src/providers/ContentShareProvider/docs/useContentShareControls.mdx

@@ -1,3 +1,5 @@
+import { Meta } from '@storybook/blocks';
+
 <Meta title="SDK Hooks/useContentShareControls" />
 
 # useContentShareControls
@@ -78,15 +80,16 @@ const MyChild = () => {
     toggleContentShare(mediaStream);
   };
 
-  return <button onClick={toggleContentShareCustom}>Toggle content share</button>;
+  return (
+    <button onClick={toggleContentShareCustom}>Toggle content share</button>
+  );
 };
 
 const App = () => (
   <MeetingProvider>
     <MyChild />
   </MeetingProvider>
 );
-
 ```
 
 ### Dependencies

src/providers/ContentShareProvider/docs/useContentShareState.mdx

@@ -1,3 +1,5 @@
+import { Meta } from '@storybook/blocks';
+
 <Meta title="SDK Hooks/useContentShareState" />
 
 # useContentShareState
@@ -39,7 +41,7 @@ The hook depends on the `ContentShareProvider`. If you are using `MeetingProvide
 import React from 'react';
 import {
   MeetingProvider,
-  useContentShareState
+  useContentShareState,
 } from 'amazon-chime-sdk-component-library-react';
 
 const App = () => (

src/providers/DevicesProvider/docs/AudioInputProvider.mdx

@@ -1,3 +1,6 @@
+import { Meta, ArgTypes } from '@storybook/blocks';
+import { AudioInputProvider } from '../AudioInputProvider.tsx';
+
 <Meta title="SDK Providers/AudioInputProvider" />
 
 # AudioInputProvider
@@ -23,19 +26,23 @@ The `AudioInputProvider` provides a list of the user's available audio input dev
 NOTE:
 
 1. In Chrome, there is a "default" device which can used as the current audio input device. When a new device is added during the
-meeting, the new device will become the current audio input device also the new "default" device. If you want to get this device change,
-it would be better to use `devices`. When a new "default" device is added, the `devices` list will have changed. We suggest you to
-watch for changes to `devices[0]` - this will indicate when the "default" device has changed. `selectedDevice` will not be updated when
-switching to a new audio device since it stands for the deviceId, and the value of deviceId remains the same, still being `default`.
-The deviceId that was previously in use was `default`. When you switch to a new device, that device becomes "default" device. Since the old
-deviceId was `default` and the new deviceId is still `default`, so `selectedDevice` does not change. But actually they correspond to different physical devices.
+   meeting, the new device will become the current audio input device also the new "default" device. If you want to get this device change,
+   it would be better to use `devices`. When a new "default" device is added, the `devices` list will have changed. We suggest you to
+   watch for changes to `devices[0]` - this will indicate when the "default" device has changed. `selectedDevice` will not be updated when
+   switching to a new audio device since it stands for the deviceId, and the value of deviceId remains the same, still being `default`.
+   The deviceId that was previously in use was `default`. When you switch to a new device, that device becomes "default" device. Since the old
+   deviceId was `default` and the new deviceId is still `default`, so `selectedDevice` does not change. But actually they correspond to different physical devices.
 
 2. If you are joining a meeting with `DeviceLabels.None` or overriding the default device label trigger function (Check "Get Device Permissions From the Browser" under the [quickstarts](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/story/quick-starts--page) for more information),
-then, the `AudioInputProvider` will not automatically select an audio input device when audio input device list changes. To keep the auto-selection of the audio input device on audio input changes,
-you have to either provide `DeviceLabels.Audio` or `DeviceLabels.AudioVideo` to `meetingManager.join` API or `meetingManager.invokeDeviceProvider` API.
+   then, the `AudioInputProvider` will not automatically select an audio input device when audio input device list changes. To keep the auto-selection of the audio input device on audio input changes,
+   you have to either provide `DeviceLabels.Audio` or `DeviceLabels.AudioVideo` to `meetingManager.join` API or `meetingManager.invokeDeviceProvider` API.
 
 You can access the state by using the [useAudioInputs](/docs/sdk-hooks-useaudioinputs--page) hook.
 
+## Props
+
+<ArgTypes of={AudioInputProvider} />
+
 ## Importing
 
 ```javascript
@@ -67,7 +74,9 @@ const MyChild = () => {
 
   return (
     <div>
-      <p>Current Selected Audio Input Device: {JSON.stringify(selectedDevice)}</p>
+      <p>
+        Current Selected Audio Input Device: {JSON.stringify(selectedDevice)}
+      </p>
       <p>Devices</p>
       <ul>{items}</ul>
     </div>

src/providers/DevicesProvider/docs/AudioOutputProvider.mdx

@@ -1,3 +1,5 @@
+import { Meta } from '@storybook/blocks';
+
 <Meta title="SDK Providers/AudioOutputProvider" />
 
 # AudioOutputProvider

src/providers/DevicesProvider/docs/DevicesProvider.mdx

@@ -1,9 +1,16 @@
+import { Meta, ArgTypes } from '@storybook/blocks';
+import { DevicesProvider } from '../';
+
 <Meta title="SDK Providers/DevicesProvider" />
 
 # DevicesProvider
 
 The `DevicesProvider` renders the audio and video providers, which provide state around the available and currently selected audio and video devices.
 
+## Props
+
+<ArgTypes of={DevicesProvider} />
+
 ## Importing
 
 ```jsx

src/providers/DevicesProvider/docs/VideoInputProvider.mdx

@@ -1,3 +1,5 @@
+import { Meta } from '@storybook/blocks';
+
 <Meta title="SDK Providers/VideoInputProvider" />
 
 # VideoInputProvider

src/providers/DevicesProvider/docs/useAudioOutputs.mdx

@@ -1,5 +1,4 @@
-import { Meta, ArgTypes } from '@storybook/blocks';
-import { useAudioOutputs } from '../';
+import { Meta } from '@storybook/blocks';
 
 <Meta title="SDK Hooks/useAudioOutputs" />
 

src/providers/DevicesProvider/docs/useVideoInputs.mdx

@@ -53,7 +53,9 @@ const MyChild = () => {
 
   return (
     <div>
-      <p>Current Selected Video Input Device: {JSON.stringify(selectedDevice)}</p>
+      <p>
+        Current Selected Video Input Device: {JSON.stringify(selectedDevice)}
+      </p>
       <p>Devices</p>
       <ul>{items}</ul>
     </div>

src/providers/FeaturedVideoTileProvider/docs/FeaturedVideoTileProvider.mdx

@@ -1,10 +1,12 @@
+import { Meta } from '@storybook/blocks';
+
 <Meta title="SDK Providers/FeaturedVideoTileProvider" />
 
 # FeaturedVideoTileProvider
 
 The `FeaturedVideoTileProvider` provides the tile ID of the **most** active speaker, if the speaker is sharing video. If there are no active speakers, or the active speaker is not sharing video, there will be no tile ID.
 
-### State
+## State
 
 ```javascript
 {
@@ -22,7 +24,7 @@ If you are using `MeetingProvider`, the `FeaturedVideoTileProvider` is rendered
 import React from 'react';
 import {
   MeetingProvider,
-  useFeaturedTileState
+  useFeaturedTileState,
 } from 'amazon-chime-sdk-component-library-react';
 
 const App = () => (
@@ -49,7 +51,7 @@ import React from 'react';
 import {
   RemoteVideoTileProvider,
   ActiveSpeakersProvider,
-  FeaturedVideoTileProvider
+  FeaturedVideoTileProvider,
 } from 'amazon-chime-sdk-component-library-react';
 
 const App = () => (

src/providers/FeaturedVideoTileProvider/docs/useFeaturedTileState.mdx

@@ -1,3 +1,5 @@
+import { Meta } from '@storybook/blocks';
+
 <Meta title="SDK Hooks/useFeaturedTileState" />
 
 # useFeaturedTileState
@@ -28,7 +30,7 @@ The hook depends on the `FeaturedVideoTileProvider`. If you are using `MeetingPr
 import React from 'react';
 import {
   MeetingProvider,
-  useFeaturedTileState
+  useFeaturedTileState,
 } from 'amazon-chime-sdk-component-library-react';
 
 const App = () => (