feat: storybook hooks docs

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/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/Pagination/StyledPagination.stories.tsx

@@ -10,7 +10,7 @@ type PaginationProps = {
   numPages: number;
 };
 
-const PaginationComponent = ({ page: propsPage, setPage: propsSetPage, numPages }: PaginationProps) => {
+export const PaginationComponent = ({ page: propsPage, setPage: propsSetPage, numPages }: PaginationProps) => {
   const [page, setPage] = useState(propsPage);
 
   const disableLeft = page === 0;
@@ -31,7 +31,7 @@ const PaginationComponent = ({ page: propsPage, setPage: propsSetPage, numPages
 
   useEffect(() => {
     handlePageChange(propsPage);
-  }, [propsPage]);
+  }, [propsPage, handlePageChange]);
 
   return (
     <StyledPagination.Root>

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 
 import { Tabs } from '.';
@@ -22,19 +22,22 @@ const Template: ComponentStory<typeof Tabs.Root> = ({
 }) => {
   const [value, setValue] = useState('tab1');
 
-  function handleOnValueChange(value: string) {
-    setValue(value);
-    if (propOnValueChange) {
-      propOnValueChange(value);
-    }
-  }
+  const handleOnValueChange = useCallback(
+    (value: string) => {
+      setValue(value);
+      if (propOnValueChange) {
+        propOnValueChange(value);
+      }
+    },
+    [setValue, propOnValueChange],
+  );
 
   useEffect(() => {
     handleOnValueChange(propValue);
     if (propOnValueChange) {
       propOnValueChange(value);
     }
-  }, [propValue]);
+  }, [propValue, handleOnValueChange, propOnValueChange, value]);
 
   return (
     <Tabs.Root
@@ -72,4 +75,4 @@ const Template: ComponentStory<typeof Tabs.Root> = ({
 };
 
 export const Example = Template.bind({});
-Example.storyName = 'Tabs'
+Example.storyName = 'Tabs';

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

@@ -0,0 +1,32 @@
+import { selectLocalVideoTrackID, useAVToggle, useHMSStore } from '@100mslive/react-sdk';
+import Video, { StyledVideo } from './Video';
+import React from 'react';
+import { ComponentStory } from '@storybook/react';
+
+const VideoHook: ComponentStory<typeof StyledVideo> = () => {
+  const localVideoTrackID = useHMSStore(selectLocalVideoTrackID);
+  const { isLocalVideoEnabled, isLocalAudioEnabled, toggleVideo, toggleAudio } = useAVToggle();
+
+  return (
+    <div>
+      <button onClick={() => toggleVideo && toggleVideo()}>
+        {isLocalVideoEnabled ? 'Disable video' : 'Enable video'}
+      </button>
+      <button onClick={() => toggleAudio && toggleAudio()}>
+        {isLocalAudioEnabled ? 'Disable audio' : 'Enable audio'}
+      </button>
+      <Video css={{ bg: '$backgroundDark' }} trackId={localVideoTrackID} />
+    </div>
+  );
+};
+
+const VideoStories = {
+  title: 'Hooks/useAVToggle',
+  component: VideoHook,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+};
+
+export default VideoStories;
+
+export const UseVideoHook = VideoHook.bind({});
+UseVideoHook.storyName = 'useAVToggle';

packages/react-ui/src/Video/UseCustomEvent.stories.tsx

@@ -0,0 +1,45 @@
+import { StyledVideo } from './Video';
+import { ComponentStory } from '@storybook/react';
+import { useCustomEvent } from '@100mslive/react-sdk';
+import { useCallback, useState } from 'react';
+import { Toast } from '../Toast';
+
+const VideoHook: ComponentStory<typeof StyledVideo> = () => {
+  const [open, setOpen] = useState(false);
+  const [data, setData] = useState<{ emoji: string }>();
+
+  const handleEmojiReaction = useCallback((data: { emoji: string }) => {
+    setOpen(true);
+    setData(data);
+  }, []);
+
+  const { sendEvent } = useCustomEvent({
+    type: 'EMOJI_REACTION',
+    onEvent: handleEmojiReaction,
+  });
+
+  return (
+    <Toast.Provider>
+      <button onClick={() => sendEvent({ emoji: '🚀' })}>Rockets</button>
+      <Toast.HMSToast
+        title="EMOJI_REACTION"
+        description={JSON.stringify(data)}
+        open={open}
+        isClosable={true}
+        onOpenChange={o => setOpen(o)}
+      />
+      <Toast.Viewport css={{ bottom: '$24' }} />
+    </Toast.Provider>
+  );
+};
+
+const VideoStories = {
+  title: 'Hooks/useCustomEvent',
+  component: VideoHook,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+};
+
+export default VideoStories;
+
+export const UseVideoHook = VideoHook.bind({});
+UseVideoHook.storyName = 'useCustomEvent';

packages/react-ui/src/Video/UseRemoteAVToggle.stories.tsx

@@ -0,0 +1,28 @@
+import { useRemoteAVToggle } from '@100mslive/react-sdk';
+import Video, { StyledVideo } from './Video';
+import React from 'react';
+import { ComponentStory } from '@storybook/react';
+
+const VideoHook: ComponentStory<typeof StyledVideo> = () => {
+  const videoTrackId = '104';
+  const { isVideoEnabled, isAudioEnabled, toggleVideo, toggleAudio } = useRemoteAVToggle('1', videoTrackId);
+
+  return (
+    <div>
+      <button onClick={() => toggleVideo && toggleVideo()}>{isVideoEnabled ? 'Disable video' : 'Enable video'}</button>
+      <button onClick={() => toggleAudio && toggleAudio()}>{isAudioEnabled ? 'Disable audio' : 'Enable audio'}</button>
+      <Video css={{ bg: '$backgroundDark' }} trackId={videoTrackId} />
+    </div>
+  );
+};
+
+const VideoStories = {
+  title: 'Hooks/useRemoteAVToggle',
+  component: VideoHook,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+};
+
+export default VideoStories;
+
+export const UseVideoHook = VideoHook.bind({});
+UseVideoHook.storyName = 'useRemoteAVToggle';

packages/react-ui/src/Video/UseVideo.stories.tsx

@@ -2,16 +2,18 @@ import { useVideo } from '@100mslive/react-sdk';
 import { StyledVideo } from './Video';
 import UseVideoDocs from './UseVideo.mdx';
 import React from 'react';
+import { ComponentStory } from '@storybook/react';
 
-const VideoHook = () => {
+const VideoHook: ComponentStory<typeof StyledVideo> = () => {
   const { videoRef } = useVideo({
     trackId: '1',
   });
-  return <StyledVideo ref={videoRef} autoPlay playsInline muted />;
+
+  return <StyledVideo css={{ bg: '$backgroundDark' }} ref={videoRef} autoPlay muted />;
 };
 
 const VideoStories = {
-  title: 'Rendering Video/useVideo hook',
+  title: 'Hooks/useVideo',
   component: VideoHook,
   // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
   parameters: {
@@ -24,3 +26,4 @@ const VideoStories = {
 export default VideoStories;
 
 export const UseVideoHook = VideoHook.bind({});
+UseVideoHook.storyName = 'useVideo';

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

@@ -1,14 +1,19 @@
 import React, { useState } from 'react';
 import { MicOffIcon } from '@100mslive/react-icons';
-import { selectPeers, useHMSStore, useVideoList } from '@100mslive/react-sdk';
+import {
+  selectPeers,
+  useHMSStore,
+  useVideoList,
+} from '@100mslive/react-sdk';
 import { StyledVideoList } from './StyledVideoList';
 import { StyledVideoTile } from '../VideoTile';
 import Video from '../Video/Video';
 import { getLeft } from './videoListUtils';
 import { ComponentStory } from '@storybook/react';
+import { PaginationComponent as Pagination } from '../Pagination/StyledPagination.stories';
 
 const VideoListMeta = {
-  title: 'Video/VideoList',
+  title: 'Hooks/useVideoList',
 };
 
 export default VideoListMeta;
@@ -42,13 +47,14 @@ interface VideoListProps {
 
 const VideoListStory: React.FC<VideoListProps> = ({ maxTileCount, aspectRatio }) => {
   const peers = useHMSStore(selectPeers);
-  const [page] = useState(0);
+  const [page, setPage] = useState(0);
   const { ref, pagesWithTiles } = useVideoList({
     peers,
     offsetY: 50,
     maxTileCount,
     aspectRatio,
   });
+
   return (
     <StyledVideoList.Root css={{ height: '100vh', width: '100%' }} ref={ref}>
       <StyledVideoList.Container>
@@ -63,7 +69,7 @@ const VideoListStory: React.FC<VideoListProps> = ({ maxTileCount, aspectRatio })
                 {tiles.map((tile, i) =>
                   tile.track?.source === 'screen' ? null : (
                     <VideoTile
-                      key={tile.track?.id || tile.peer.id + i}
+                      key={i}
                       width={tile.width}
                       height={tile.height}
                       trackId={tile.track?.id || ''}
@@ -75,13 +81,19 @@ const VideoListStory: React.FC<VideoListProps> = ({ maxTileCount, aspectRatio })
             ))
           : null}
       </StyledVideoList.Container>
+      <div>
+        {pagesWithTiles.length > 1 ? (
+          <Pagination page={page} setPage={setPage} numPages={pagesWithTiles.length} />
+        ) : null}
+      </div>
     </StyledVideoList.Root>
   );
 };
 
 const Template: ComponentStory<typeof VideoListStory> = args => <VideoListStory {...args} />;
 
 export const Example = Template.bind({});
+Example.storyName = 'useVideoList';
 
 Example.args = {
   maxTileCount: 2,

packages/react-ui/src/fixtures/peers.ts

@@ -1,12 +1,12 @@
 import { HMSPeerWithMuteStatus } from '@100mslive/hms-video-store';
 
-let counter = 1;
+let counter = 0;
 export const makeFakeParticipant = (name: string, role = 'Student') => {
   return {
     peer: {
       id: String(counter++),
       name,
-      role: role,
+      roleName: role,
       auxiliaryTracks: [],
       isLocal: counter === 1,
     },

packages/react-ui/src/store/SetupFakeStore.ts

@@ -1,4 +1,4 @@
-import { HMSReactiveStore, HMSStore, createDefaultStoreState } from '@100mslive/react-sdk';
+import { HMSReactiveStore, HMSStore, createDefaultStoreState, HMSRole } from '@100mslive/react-sdk';
 import create from 'zustand';
 import { fakeMessages } from '../fixtures/chats';
 import { fakeParticipants } from '../fixtures/peers';
@@ -29,4 +29,12 @@ export function setUpFakeStore() {
   fakeMessages.forEach(msg => {
     storyBookSDK.sendBroadcastMessage(msg.message);
   });
+  storyBookSDK.setRoles({
+    Teacher: {
+      name: 'Teacher',
+      publishParams: { allowed: ['audio', 'video', 'screen'] },
+      subscribeParams: {},
+      permissions: { changeRole: true, unmute: true, mute: true },
+    } as HMSRole,
+  });
 }