feat: storybook hooks docs

packages/react-icons/src/AlternativeHeadphonesIcon.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgAlternativeHeadphonesIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M8.16 7.317A5.456 5.456 0 0 1 12 5.719a5.455 5.455 0 0 1 5.438 5.439v.39a4.138 4.138 0 0 0-.375-.017 1.875 1.875 0 0 0-1.875 1.875v4.5a1.875 1.875 0 0 0 1.874 1.875 4.125 4.125 0 0 0 1.875-7.799v-.828a6.955 6.955 0 0 0-6.935-6.935l-.002.75-.002-.75a6.956 6.956 0 0 0-6.935 6.935v.828a4.126 4.126 0 0 0 1.875 7.8 1.875 1.875 0 0 0 1.875-1.876v-4.5a1.875 1.875 0 0 0-1.876-1.875c-.125 0-.25.006-.375.017v-.39A5.456 5.456 0 0 1 8.16 7.316ZM6.937 13.03a2.625 2.625 0 0 0 0 5.25.375.375 0 0 0 .375-.375v-4.5a.375.375 0 0 0-.375-.375Zm10.125 0a.375.375 0 0 0-.375.375v4.5a.375.375 0 0 0 .375.375 2.625 2.625 0 1 0 0-5.25Z"
+      fill="#000"
+    />
+  </svg>
+);
+
+export default SvgAlternativeHeadphonesIcon;

packages/react-icons/src/HandRaiseSlashedIcon.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgHandRaiseSlashedIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M3.046 4.107a.75.75 0 1 1 1.06-1.06l16.848 16.846a.75.75 0 1 1-1.06 1.06L3.045 4.108Z"
+      fill="currentColor"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="m4.026 7.208 1.061 7.467.011.064c.388 1.858 1.035 3.47 2.113 4.626 1.111 1.192 2.596 1.808 4.442 1.808 1.337 0 2.512-.273 3.521-.872a5.767 5.767 0 0 0 1.098-.847l-.707-.707c-.975.952-2.239 1.426-3.912 1.426-3.2 0-4.836-2.094-5.576-5.638l-.874-6.15-1.177-1.177Zm3.01.89-.22-1.144a.9.9 0 0 0-.904-.904.912.912 0 0 0-.654.269l-.707-.707a1.912 1.912 0 0 1 1.57-.551l1.896 1.895.228 2.125.026.251-1.234-1.235Zm.506 2.627.138.716.063.323c.147-.096.346-.209.534-.305l-.735-.734Zm8.954 6.831.725.726c.112-.173.218-.352.32-.537.16-.257.31-.53.45-.814l-.75-.75c-.173.377-.36.734-.563 1.059a7.82 7.82 0 0 1-.182.316Zm-3.649-7.89-.074-2.698-.084-3.056A.903.903 0 0 0 11.776 3a.901.901 0 0 0-.904.912l.105 3.742.004.145L9.843 6.66l-.273-2.16a.9.9 0 0 0-.904-.905.901.901 0 0 0-.912.904l.008.08-.848-.848a1.906 1.906 0 0 1 1.752-1.136c.532 0 1.012.216 1.357.565A1.896 1.896 0 0 1 11.776 2c.905 0 1.655.615 1.858 1.454.32-.249.724-.396 1.165-.396a1.903 1.903 0 0 1 1.911 1.956L16.5 9.86c.122-.17.261-.33.425-.467a1.91 1.91 0 0 1 1.396-.44c.462.03.912.22 1.239.586.328.368.467.841.437 1.314-.02.343-.144.792-.25 1.153-.082.275-.18.578-.269.857a78.86 78.86 0 0 0-.106.332c-.21.693-.453 1.474-.744 2.25l-.78-.78c.21-.597.396-1.199.569-1.766l.113-.354c.214-.67.449-1.4.469-1.754.031-.471-.276-.81-.747-.84-.543-.04-.881.274-1.22.982l-.639 1.376-.252.543-.034.072-.71-.71.006-.147.31-7.097a.903.903 0 0 0-.913-.912.901.901 0 0 0-.904.912l-.121 2.015-.18 2.996-.024.407-.723-.723Zm-2.697-.577.892.892.021.763a9.783 9.783 0 0 0-.692.095l-.01-.075-.116-.918-.095-.757Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default SvgHandRaiseSlashedIcon;

packages/react-icons/src/OpenBookIcon.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgOpenBookIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M14.145 4.71c-.677.134-1.342.32-1.99.558a.457.457 0 0 1-.121.025l-.033-.001h-.034a.5.5 0 0 1-.101-.018 11.17 11.17 0 0 0-7.698-.162 1.953 1.953 0 0 0-1.354 1.863v10.752a1.943 1.943 0 0 0 .753 1.547 1.951 1.951 0 0 0 1.687.352l.016-.005a9.497 9.497 0 0 1 6.069.32 1.95 1.95 0 0 0 1.343-.008 9.497 9.497 0 0 1 6.048-.312l.016.005a1.954 1.954 0 0 0 1.684-.351h.001c.235-.183.425-.417.556-.685h.001c.13-.268.198-.562.198-.861V6.974a1.957 1.957 0 0 0-1.36-1.862c-.5-.161-1.01-.292-1.526-.392a1.871 1.871 0 0 0-1.518-.775h-1.125a1.875 1.875 0 0 0-1.512.766Zm-2.894 1.935a9.654 9.654 0 0 0-6.62-.107.463.463 0 0 0-.318.435V17.73a.47.47 0 0 0 .046.2.463.463 0 0 0 .511.245 11 11 0 0 1 6.381.139V6.644Zm2.531-.314a11.67 11.67 0 0 0-1.031.316v11.667a11.004 11.004 0 0 1 6.38-.138.46.46 0 0 0 .509-.245.466.466 0 0 0 .046-.201V6.975a.457.457 0 0 0-.316-.434h-.002a11.068 11.068 0 0 0-.711-.204v5.108a.75.75 0 0 1-1.28.53l-1.157-1.157-1.157 1.157a.75.75 0 0 1-1.281-.53V6.33Zm3.375 3.303-.407-.407a.75.75 0 0 0-1.061 0l-.407.407V5.82a.375.375 0 0 1 .375-.375h1.125c.1 0 .195.039.265.11a.37.37 0 0 1 .11.265v3.814Z"
+      fill="#000"
+    />
+  </svg>
+);
+
+export default SvgOpenBookIcon;

packages/react-icons/src/SunWithFaceIcon.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgSunWithFaceIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg width="24px" height="24px" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M36 62.7a1.546 1.546 0 0 1-1.382-.847l-2.7-5.331-4.536 3.894c-.286.241-.645.37-1.008.37a1.542 1.542 0 0 1-1.542-1.426l-.456-5.964-5.682 1.861a1.55 1.55 0 0 1-1.951-1.955l1.86-5.681-5.958-.452a1.555 1.555 0 0 1-1.313-.95 1.55 1.55 0 0 1 .255-1.601l3.891-4.536-5.33-2.7a1.55 1.55 0 0 1 0-2.763l5.33-2.7-3.89-4.536a1.553 1.553 0 0 1-.256-1.6c.224-.538.73-.908 1.313-.95l5.958-.456-1.86-5.682a1.551 1.551 0 0 1 .375-1.577 1.553 1.553 0 0 1 1.576-.375l5.682 1.86.456-5.958a1.547 1.547 0 0 1 2.55-1.057l4.536 3.89 2.7-5.33a1.546 1.546 0 0 1 2.762 0l2.703 5.33 4.536-3.89a1.543 1.543 0 0 1 1.6-.255c.537.223.905.73.951 1.312l.455 5.958 5.677-1.86a1.542 1.542 0 0 1 1.575.375c.414.414.56 1.023.378 1.577l-1.861 5.682 5.964.456a1.55 1.55 0 0 1 1.056 2.55l-3.894 4.536 5.33 2.7a1.55 1.55 0 0 1 .002 2.763l-5.33 2.7 3.893 4.536a1.55 1.55 0 0 1-1.06 2.551l-5.96.452 1.862 5.682a1.544 1.544 0 0 1-.378 1.576 1.54 1.54 0 0 1-1.575.378l-5.678-1.861-.454 5.96a1.551 1.551 0 0 1-1.545 1.43c-.36 0-.72-.129-1.007-.37l-4.536-3.894-2.703 5.33A1.55 1.55 0 0 1 36 62.7z"
+      fill="#F4900C"
+    />
+    <path
+      d="M55.5 36c0 10.769-8.731 19.5-19.5 19.5-10.768 0-19.5-8.73-19.5-19.5S25.232 16.5 36 16.5c10.769 0 19.5 8.732 19.5 19.5z"
+      fill="#FFCC4D"
+    />
+    <path
+      d="M36 41.206c-9.334 0-12-3.492-12-1.842-.002 3.25 5.334 8.755 12 8.755s12-5.505 12-8.755c0-1.65-2.666 1.843-12 1.843zM48 31c0 2.21-1.791 1.665-4.001 1.665C41.791 32.665 40 33.21 40 31a4 4 0 1 1 8 0zm-16.001 0c0 2.21-1.793 1.665-4 1.665-2.208 0-4.001.545-4.001-1.665 0-2.209 1.794-4 4.002-4a4 4 0 0 1 3.999 4z"
+      fill="#F4900C"
+    />
+  </svg>
+);
+
+export default SvgSunWithFaceIcon;

packages/react-icons/src/VideoConferencingIcon.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgVideoConferencingIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M5.496 4.12a.625.625 0 0 1 .441-.183h13.5a.625.625 0 0 1 .625.626v9a.624.624 0 0 1-.625.624h-5.625a.5.5 0 0 0 0 1h1.75v1.25h-.624a.5.5 0 0 0 0 1H17.75a.5.5 0 0 0 0-1h-1.188v-1.25h2.875a1.625 1.625 0 0 0 1.625-1.624v-9a1.625 1.625 0 0 0-1.625-1.625h-13.5a1.625 1.625 0 0 0-1.625 1.624V6.25a.5.5 0 0 0 1 0V4.562c0-.165.066-.324.184-.441Zm7.332 1.708a2.187 2.187 0 1 1 2.595 3.467 3.313 3.313 0 0 1 2.264 3.143.5.5 0 0 1-1 0 2.312 2.312 0 0 0-2.312-2.313.5.5 0 0 1-.486-.617 2.187 2.187 0 0 1-1.06-3.68Zm1.547.36a1.188 1.188 0 1 0 0 2.375 1.188 1.188 0 0 0 0-2.376ZM8.75 16a4.313 4.313 0 0 0-4.313 4.313.75.75 0 0 1-1.5 0 5.813 5.813 0 0 1 4.51-5.665 3.843 3.843 0 1 1 2.605 0 5.813 5.813 0 0 1 4.51 5.665.75.75 0 0 1-1.5 0A4.313 4.313 0 0 0 8.75 16ZM7.093 9.374a2.344 2.344 0 1 1 3.314 3.315 2.344 2.344 0 0 1-3.314-3.315Z"
+      fill="#000"
+    />
+  </svg>
+);
+
+export default SvgVideoConferencingIcon;

packages/react-icons/src/WiredMicIcon.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgWiredMicIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M14.706 3.17a4.687 4.687 0 0 1 5.596 7.072l.308.307a.75.75 0 0 1-1.06 1.061l-.308-.308a4.69 4.69 0 0 1-2.509.88l-7.78 6.455a1.875 1.875 0 0 1-2.447-.082l-2.413 2.413a.75.75 0 0 1-1.06-1.06l2.41-2.412a1.875 1.875 0 0 1-.08-2.447l.006-.008 6.45-7.774a4.689 4.689 0 0 1 .879-2.509l-.308-.307a.75.75 0 1 1 1.06-1.061l.309.308c.293-.212.611-.39.947-.529Zm-2.564 6.056-5.614 6.767a.375.375 0 0 0 .029.497l.956.953a.375.375 0 0 0 .497.029l6.764-5.614a4.69 4.69 0 0 1-2.632-2.632Zm7.303-.506c-.063.153-.138.3-.224.44L14.84 4.78a3.185 3.185 0 0 1 3.914.467 3.187 3.187 0 0 1 .69 3.474Zm-5.89-2.44c.063-.153.138-.3.224-.44l4.381 4.38a3.18 3.18 0 0 1-2.88.225 3.188 3.188 0 0 1-1.725-4.165Zm-.58 4.861a1.033 1.033 0 0 0-1.45.002l-.002.002a1.032 1.032 0 1 0 1.459.002l-.002-.002-.004-.004Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default SvgWiredMicIcon;

packages/react-icons/src/index.ts

@@ -1,4 +1,4 @@
-export { default as Svg100MsLogo } from './100MsLogo';
+export { default as Svg100MsLogoIcon } from './100MsLogoIcon';
 export { default as ActivityIcon } from './ActivityIcon';
 export { default as AddCircleIcon } from './AddCircleIcon';
 export { default as AddIcon } from './AddIcon';
@@ -8,6 +8,7 @@ export { default as AlertOctagonIcon } from './AlertOctagonIcon';
 export { default as AlertRoundIcon } from './AlertRoundIcon';
 export { default as AlertTriangleIcon } from './AlertTriangleIcon';
 export { default as AllAppsIcon } from './AllAppsIcon';
+export { default as AlternativeHeadphonesIcon } from './AlternativeHeadphonesIcon';
 export { default as AndroidIcon } from './AndroidIcon';
 export { default as AnnouncementIcon } from './AnnouncementIcon';
 export { default as AppleIcon } from './AppleIcon';
@@ -106,9 +107,8 @@ export { default as HamburgerMenuIcon } from './HamburgerMenuIcon';
 export { default as HandIcon } from './HandIcon';
 export { default as HandRaiseFilledIcon } from './HandRaiseFilledIcon';
 export { default as HandRaiseIcon } from './HandRaiseIcon';
-export { default as HandRaiseSlashed } from './HandRaiseSlashed';
+export { default as HandRaiseSlashedIcon } from './HandRaiseSlashedIcon';
 export { default as HangUpIcon } from './HangUpIcon';
-export { default as Headphones } from './Headphones';
 export { default as HeadphonesIcon } from './HeadphonesIcon';
 export { default as HeartIcon } from './HeartIcon';
 export { default as HerokuIcon } from './HerokuIcon';
@@ -149,7 +149,7 @@ export { default as NightIcon } from './NightIcon';
 export { default as NoEntryIcon } from './NoEntryIcon';
 export { default as NotificationsIcon } from './NotificationsIcon';
 export { default as OfferIcon } from './OfferIcon';
-export { default as OpenBook } from './OpenBook';
+export { default as OpenBookIcon } from './OpenBookIcon';
 export { default as PipIcon } from './PipIcon';
 export { default as PaletteIcon } from './PaletteIcon';
 export { default as PauseCircleIcon } from './PauseCircleIcon';
@@ -205,7 +205,7 @@ export { default as SquareMenuIcon } from './SquareMenuIcon';
 export { default as StarIcon } from './StarIcon';
 export { default as StopIcon } from './StopIcon';
 export { default as SunIcon } from './SunIcon';
-export { default as SunWithFace } from './SunWithFace';
+export { default as SunWithFaceIcon } from './SunWithFaceIcon';
 export { default as SupportIcon } from './SupportIcon';
 export { default as TagIcon } from './TagIcon';
 export { default as TargetIcon } from './TargetIcon';
@@ -220,7 +220,7 @@ export { default as TwitterIcon } from './TwitterIcon';
 export { default as UploadIcon } from './UploadIcon';
 export { default as VerifiedIcon } from './VerifiedIcon';
 export { default as VerticalMenuIcon } from './VerticalMenuIcon';
-export { default as VideoConferencing } from './VideoConferencing';
+export { default as VideoConferencingIcon } from './VideoConferencingIcon';
 export { default as VideoOffIcon } from './VideoOffIcon';
 export { default as VideoOnIcon } from './VideoOnIcon';
 export { default as VideoPlayerIcon } from './VideoPlayerIcon';
@@ -229,7 +229,7 @@ export { default as VirtualBackgroundIcon } from './VirtualBackgroundIcon';
 export { default as VolumeOneIcon } from './VolumeOneIcon';
 export { default as WalletIcon } from './WalletIcon';
 export { default as WebhookIcon } from './WebhookIcon';
-export { default as WiredMic } from './WiredMic';
+export { default as WiredMicIcon } from './WiredMicIcon';
 export { default as WrenchIcon } from './WrenchIcon';
 export { default as YogaIcon } from './YogaIcon';
 export { default as YoutubeIcon } from './YoutubeIcon';

packages/react-sdk/src/hooks/useRemoteAVToggle.ts

@@ -56,7 +56,6 @@ const toggleTrackEnabled = async (
 
 /**
  * This hook can be used to implement remote mute/unmute + audio volume changer on tile level.
- * @param peerId of the peer whose tracks need to be managed
  * @param audioTrackId of the peer whose tracks need to be managed
  * @param videoTrackId of the peer whose tracks need to be managed
  * @param handleError to handle any error during toggle of audio/video

packages/react-ui/.storybook/main.js

@@ -5,7 +5,7 @@ module.exports = {
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
     '@storybook/addon-a11y',
-    'storybook-dark-mode'
+    'storybook-dark-mode',
   ],
   framework: '@storybook/react',
 };

packages/react-ui/.storybook/preview.js → packages/react-ui/.storybook/preview.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { HMSRoomProvider } from '@100mslive/react-sdk';
+import { HMSRoomProvider, HMSActions } from '@100mslive/react-sdk';
 import { useDarkMode } from 'storybook-dark-mode';
 import { themes } from '@storybook/theming';
 
-import { setUpFakeStore, storyBookSDK, storyBookStore } from '../src/store/SetupFakeStore';
-import { HMSThemeProvider } from '../src/Theme';
+import { setUpFakeStore, storyBookNotifications, storyBookSDK, storyBookStore } from '../src/store/SetupFakeStore';
+import { HMSThemeProvider, ThemeTypes } from '../src/Theme';
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
@@ -28,8 +28,12 @@ setUpFakeStore();
 export const decorators = [
   Story => {
     return (
-      <HMSRoomProvider store={storyBookStore} actions={storyBookSDK}>
-        <HMSThemeProvider themeType={useDarkMode() ? 'dark' : 'light'}>
+      <HMSRoomProvider
+        store={storyBookStore}
+        actions={storyBookSDK as unknown as HMSActions}
+        notifications={storyBookNotifications}
+      >
+        <HMSThemeProvider themeType={useDarkMode() ? ThemeTypes.dark : ThemeTypes.light}>
           <Story />
         </HMSThemeProvider>
       </HMSRoomProvider>

packages/react-ui/src/Checkbox/Checkbox.stories.tsx

@@ -31,7 +31,7 @@ function CheckboxWithLabelComponent({ label, checked = true, css, onCheckedChang
 
   useEffect(() => {
     handleOnCheckedChange(checked);
-  }, [checked]);
+  }, [checked, handleOnCheckedChange]);
 
   function handleOnCheckedChange(checked: boolean) {
     setInternalChecked(checked);

packages/react-ui/src/Hooks/UseAVToggle.mdx

@@ -0,0 +1,67 @@
+## useAVToggle
+
+Use this hook to implement mute/unmute for local audio and video.
+`isAllowedToPublish` can be used to decide whether to show the toggle buttons in the UI.
+
+import { Story, Preview } from '@storybook/addon-docs';
+
+### Interface
+
+```ts
+interface useAVToggleInput {
+  /**
+   * to handle any error during toggle of audio/video
+   */
+  handleError?: (err: Error, method?: string) => void;
+}
+```
+
+```ts
+interface useAVToggleResult {
+  /**
+   * true if unmuted and vice versa
+   */
+  isLocalAudioEnabled: boolean;
+  isLocalVideoEnabled: boolean;
+  /**
+   * use this function to toggle audio state, the function will only be present if the user
+   * has permission to unmute audio
+   */
+  toggleAudio?: () => void;
+  /**
+   * use this function to toggle video state, the function will only be present if the user
+   * has permission to unmute video
+   */
+  toggleVideo?: () => void;
+}
+```
+
+### Example
+
+<Story id="hooks-useavtoggle--use-video-hook" />
+
+```jsx
+import { selectLocalVideoTrackID, useAVToggle, useHMSStore } from '@100mslive/react-sdk';
+import { Flex, Box, Video, Button } from '@100mslive/react-ui';
+
+() => {
+  const localVideoTrackID = useHMSStore(selectLocalVideoTrackID);
+  const { isLocalVideoEnabled, isLocalAudioEnabled, toggleVideo, toggleAudio } = useAVToggle(err => {
+    console.log(err);
+  });
+
+  return (
+    <Box>
+      <Flex gap="1">
+        <Button onClick={() => toggleVideo && toggleVideo()}>
+          {isLocalVideoEnabled ? 'Disable video' : 'Enable video'}
+        </Button>
+        <Button variant="standard" onClick={() => toggleAudio && toggleAudio()}>
+          {isLocalAudioEnabled ? 'Disable audio' : 'Enable audio'}
+        </Button>
+      </Flex>
+      <Video trackId={localVideoTrackID} />
+    </Box>
+  );
+};
+```

packages/react-ui/src/Hooks/UseAVToggle.stories.tsx

@@ -0,0 +1,42 @@
+import { selectLocalVideoTrackID, useAVToggle, useHMSStore } from '@100mslive/react-sdk';
+import Video, { StyledVideo } from '../Video/Video';
+import React from 'react';
+import UseAVToggleDocs from './UseAVToggle.mdx';
+import { ComponentStory } from '@storybook/react';
+import { Box, Flex } from '../Layout';
+import { Button } from '../Button';
+
+const VideoHook: ComponentStory<typeof StyledVideo> = () => {
+  const localVideoTrackID = useHMSStore(selectLocalVideoTrackID);
+  const { isLocalVideoEnabled, isLocalAudioEnabled, toggleVideo, toggleAudio } = useAVToggle();
+
+  return (
+    <Box>
+      <Flex gap="1">
+        <Button onClick={() => toggleVideo && toggleVideo()}>
+          {isLocalVideoEnabled ? 'Disable video' : 'Enable video'}
+        </Button>
+        <Button variant="standard" onClick={() => toggleAudio && toggleAudio()}>
+          {isLocalAudioEnabled ? 'Disable audio' : 'Enable audio'}
+        </Button>
+      </Flex>
+      <Video css={{ bg: '$backgroundDark', mt: '$4', maxWidth: '800px' }} trackId={localVideoTrackID} />
+    </Box>
+  );
+};
+
+const VideoStories = {
+  title: 'Hooks/useAVToggle',
+  component: VideoHook,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  parameters: {
+    docs: {
+      page: UseAVToggleDocs,
+    },
+  },
+};
+
+export default VideoStories;
+
+export const UseVideoHook = VideoHook.bind({});
+UseVideoHook.storyName = 'useAVToggle';

packages/react-ui/src/Hooks/UseAudioLevelStyles.mdx

@@ -0,0 +1,65 @@
+## useAudioLevelStyles
+
+This hook can be used to apply css properties on an element based on the current audio level for the passed in track.
+It doesn't return the audio level as it's optimised for performance. As audio level could be changing frequently we
+want to minimise the number of components an audio level change causes to re render.
+An e.g. use of this hook will be to apply box-shadow on parent tile based on audio level.
+
+### Interface
+
+```ts
+interface useAudioLevelStylesInput {
+ /**
+  * audio track id for which audio level needs to be used
+  */
+  trackId?: HMSTrackID;
+ /**
+  * a function which can take in current audio level and return the style to apply for the ref
+  */
+  getStyle: (level: number) => Record<string, string>;
+ /**
+  * the ref of the element on which you want the css to apply
+  */
+  ref: React.RefObject<any>;
+}
+```
+
+### Example
+
+```jsx
+import { useCallback, useRef } from 'react';
+import { useTheme } from '@100mslive/react-ui';
+import { useAudioLevelStyles } from '@100mslive/react-sdk';
+import { HMSTrackID } from '@100mslive/hms-video-store';
+
+export function adjustBorderAudioLevel(audioTrackId?: HMSTrackID) {
+  const { theme } = useTheme();
+  const color = theme.colors.brandDefault.value;
+  const getStyle = useCallback(
+    (level: number) => {
+      return {
+        transition: 'box-shadow 0.4s ease-in-out',
+        'box-shadow': level
+          ? `0px 0px ${24 * sigmoid(level)}px ${color}, 0px 0px ${16 * sigmoid(level)}px ${color}`
+          : '',
+      };
+    },
+    [color]
+  );
+
+  const ref = useRef(null);
+
+  useAudioLevelStyles({
+    trackId: audioTrackId,
+    getStyle,
+    ref,
+  });
+
+  return ref;
+}
+
+const sigmoid = (z: number) => {
+  return 1 / (1 + Math.exp(-z));
+};
+
+```