@mohamed-karawia/react-storybook 0.1.1

package/src/assets/home-svgrepo-com.svg

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 330.242 330.242" style="enable-background:new 0 0 330.242 330.242;" xml:space="preserve">
+<path d="M324.442,129.811l-41.321-33.677V42.275c0-6.065-4.935-11-11-11h-26c-6.065,0-11,4.935-11,11v14.737l-55.213-44.999
+	c-3.994-3.254-9.258-5.047-14.822-5.047c-5.542,0-10.781,1.782-14.753,5.019L5.8,129.81c-6.567,5.351-6.173,10.012-5.354,12.314
+	c0.817,2.297,3.448,6.151,11.884,6.151h19.791v154.947c0,11.058,8.972,20.053,20,20.053h62.5c10.935,0,19.5-8.809,19.5-20.053
+	v-63.541c0-5.446,5.005-10.405,10.5-10.405h42c5.238,0,9.5,4.668,9.5,10.405v63.541c0,10.87,9.388,20.053,20.5,20.053h61.5
+	c11.028,0,20-8.996,20-20.053V148.275h19.791c8.436,0,11.066-3.854,11.884-6.151C330.615,139.822,331.009,135.161,324.442,129.811z"
+	/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

package/src/assets/medal-svgrepo-com.svg

@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 491.768 491.768" style="enable-background:new 0 0 491.768 491.768;" xml:space="preserve">
+<g id="XMLID_439_">
+	<path id="XMLID_440_" d="M174.048,136.543l39.925-83.12l18.234-37.966l-2.938-6.131C226.54,3.628,220.778,0,214.453,0H98.137
+		c-5.651,0-10.899,2.906-13.918,7.689c-3.001,4.783-3.338,10.772-0.898,15.859l72.508,150.957L174.048,136.543z"/>
+	<path id="XMLID_441_" d="M407.548,7.689C404.53,2.906,399.281,0,393.63,0h-116.3c-6.323,0-12.088,3.628-14.815,9.326
+		l-89.814,187.012c-0.065,0.145-0.081,0.289-0.146,0.433c-0.143,0.322-0.209,0.675-0.337,1.013
+		c-0.577,1.559-0.913,3.211-0.994,4.959c-0.017,0.242-0.145,0.45-0.145,0.709v8.474c22.329-11.687,47.676-18.397,74.579-18.397
+		c26.922,0,52.252,6.711,74.597,18.414v-4.751l88.192-183.642C410.887,18.461,410.549,12.473,407.548,7.689z"/>
+	<path id="XMLID_442_" d="M245.658,218.186c-75.559,0-136.8,61.24-136.8,136.799c0,75.543,61.241,136.783,136.8,136.783
+		c75.543,0,136.785-61.24,136.785-136.783C382.444,279.426,321.201,218.186,245.658,218.186z M326.966,331.1l-36.52,35.62
+		c-1.14,1.122-1.671,2.729-1.397,4.302l8.622,50.293c0.303,1.813-0.452,3.659-1.944,4.75c-1.492,1.092-3.483,1.221-5.105,0.369
+		l-45.17-23.738c-1.412-0.742-3.115-0.742-4.529,0l-45.17,23.738c-1.622,0.852-3.613,0.723-5.105-0.369
+		c-1.492-1.091-2.246-2.938-1.941-4.75l8.621-50.293c0.271-1.572-0.259-3.18-1.397-4.302l-36.52-35.62
+		c-1.331-1.302-1.797-3.227-1.236-4.977c0.58-1.768,2.104-3.05,3.918-3.307l50.516-7.337c1.574-0.225,2.939-1.219,3.645-2.664
+		l22.587-45.749c0.819-1.654,2.505-2.715,4.35-2.715c1.846,0,3.529,1.061,4.349,2.715l22.587,45.749
+		c0.705,1.445,2.069,2.439,3.645,2.664l50.516,7.337c1.813,0.257,3.34,1.539,3.918,3.307
+		C328.764,327.873,328.296,329.798,326.966,331.1z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

package/src/assets/search-svgrepo-com.svg

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 183.792 183.792" style="enable-background:new 0 0 183.792 183.792;" xml:space="preserve">
+<path d="M54.734,9.053C39.12,18.067,27.95,32.624,23.284,50.039c-4.667,17.415-2.271,35.606,6.743,51.22
+	c12.023,20.823,34.441,33.759,58.508,33.759c7.599,0,15.139-1.308,22.287-3.818l30.364,52.592l21.65-12.5l-30.359-52.583
+	c10.255-8.774,17.638-20.411,21.207-33.73c4.666-17.415,2.27-35.605-6.744-51.22C134.918,12.936,112.499,0,88.433,0
+	C76.645,0,64.992,3.13,54.734,9.053z M125.29,46.259c5.676,9.831,7.184,21.285,4.246,32.25c-2.938,10.965-9.971,20.13-19.802,25.806
+	c-6.462,3.731-13.793,5.703-21.199,5.703c-15.163,0-29.286-8.146-36.857-21.259c-5.676-9.831-7.184-21.284-4.245-32.25
+	c2.938-10.965,9.971-20.13,19.802-25.807C73.696,26.972,81.027,25,88.433,25C103.597,25,117.719,33.146,125.29,46.259z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

package/src/assets/settings-svgrepo-com.svg

@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 489.802 489.802" style="enable-background:new 0 0 489.802 489.802;" xml:space="preserve">
+<g>
+	<path d="M20.701,281.901l32.1,0.2c4.8,24.7,14.3,48.7,28.7,70.5l-22.8,22.6c-8.2,8.1-8.2,21.2-0.2,29.4l24.6,24.9
+		c8.1,8.2,21.2,8.2,29.4,0.2l22.8-22.6c21.6,14.6,45.5,24.5,70.2,29.5l-0.2,32.1c-0.1,11.5,9.2,20.8,20.7,20.9l35,0.2
+		c11.5,0.1,20.8-9.2,20.9-20.7l0.2-32.1c24.7-4.8,48.7-14.3,70.5-28.7l22.6,22.8c8.1,8.2,21.2,8.2,29.4,0.2l24.9-24.6
+		c8.2-8.1,8.2-21.2,0.2-29.4l-22.6-22.8c14.6-21.6,24.5-45.5,29.5-70.2l32.1,0.2c11.5,0.1,20.8-9.2,20.9-20.7l0.2-35
+		c0.1-11.5-9.2-20.8-20.7-20.9l-32.1-0.2c-4.8-24.7-14.3-48.7-28.7-70.5l22.8-22.6c8.2-8.1,8.2-21.2,0.2-29.4l-24.6-24.9
+		c-8.1-8.2-21.2-8.2-29.4-0.2l-22.8,22.6c-21.6-14.6-45.5-24.5-70.2-29.5l0.2-32.1c0.1-11.5-9.2-20.8-20.7-20.9l-35-0.2
+		c-11.5-0.1-20.8,9.2-20.9,20.7l-0.3,32.1c-24.8,4.8-48.8,14.3-70.5,28.7l-22.6-22.8c-8.1-8.2-21.2-8.2-29.4-0.2l-24.8,24.6
+		c-8.2,8.1-8.2,21.2-0.2,29.4l22.6,22.8c-14.6,21.6-24.5,45.5-29.5,70.2l-32.1-0.2c-11.5-0.1-20.8,9.2-20.9,20.7l-0.2,35
+		C-0.099,272.401,9.201,281.801,20.701,281.901z M179.301,178.601c36.6-36.2,95.5-35.9,131.7,0.7s35.9,95.5-0.7,131.7
+		s-95.5,35.9-131.7-0.7S142.701,214.801,179.301,178.601z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

package/src/index.js

@@ -0,0 +1,95 @@
+// Chat
+import Chat from './stories/Chat/Chat';
+// Enrollment
+import CreateEnrollmentForm from './stories/Enrollment/Admin/CreateForm/CreateForm';
+import DetailedEnrollmentForm from './stories/Enrollment/Admin/DetailedForm/DetailedForm';
+import ViewEnrollmentForms from './stories/Enrollment/Admin/ViewForms/ViewForms';
+import FillEnrollmentForm from './stories/Enrollment/Guest/FillForm/FillForm';
+// Events
+import CreateEvent from './stories/Events/CreateEvent/CreateEvent';
+import Event from './stories/Events/Event/Event';
+import EventsList from './stories/Events/EventsList/EventsList';
+// Library 
+import CreateLibraryFolder from './stories/Library/CreateFolder/CreateFolder';
+import LibraryFolders from './stories/Library/Folders/Folders';
+import LibraryNotes from './stories/Library/Notes/Notes';
+import ViewLibraryNote from './stories/Library/ViewNote/ViewNote';
+// Music
+import CreateMusic from './stories/Forms/AddSong/AddSong';
+import CreateMusicAlbum from './stories/Forms/CreateMusicAlbum/CreateMusicAlbum';
+import MusicAlbum from './stories/Music Album/ViewAlbum/ViewAlbum';
+import MusicAlbums from './stories/Music Album/ViewAlbums/ViewAlbums';
+// Photos 
+import CreatePhotoAlbum from './stories/Forms/CreateAlbum/CreateAlbum';
+import CreatePhoto from './stories/Forms/AddPhoto/AddPhoto';
+import PhotoAlbum from './stories/Photo Album/ViewAlbum/ViewAlbum';
+import PhoroAlbums from './stories/Photo Album/ViewAlbums/ViewAlbums';
+// Layout
+import BaseMaterial from './stories/Containers/BaseMaterial';
+import Body from './stories/Layout/Body/Body';
+import Center from './stories/Layout/Center/Center';
+import Head from './stories/Layout/Head/Head';
+import Left from './stories/Layout/Left/Left';
+import Right from './stories/Layout/Right/Right';
+// Components
+import Navbar from './stories/Navbar/Navbar';
+import Gallery from './stories/Reusable Components/Gallery/Gallery';
+import List from './stories/Reusable Components/ReusableList/ReusableList';
+import Header from './stories/Reusable Components/ReusableHeader/ReusableHeader';
+import SpaceContainer from './stories/Reusable Components/SpaceContainer/SpaceContainer';
+import Spinner from './stories/Reusable Components/Spinner/Spinner';
+import WidgetContainer from './stories/Reusable Components/WidgetContainer/WidgetContainer';
+// Video
+import CreateVideoAlbum from './stories/Forms/CreateVideoAlbum/CreateVideoAlbum';
+import CreateVideo from './stories/Forms/AddVideo/AddVideo';
+import VideoAlbums from './stories/VideoAlbum/AlbumsGallery/AlbumsGallery';
+import VidepSpace from './stories/VideoAlbum/VideoSpace/VideoSpace';
+import VideoAlbum from './stories/VideoAlbum/ViewAlbum/ViewAlbum';
+/****************Exports****************** */
+//Chat
+export { Chat };
+// Enrollment
+export { CreateEnrollmentForm };
+export { DetailedEnrollmentForm }
+export { ViewEnrollmentForms }
+export { FillEnrollmentForm }
+// Events
+export { CreateEvent }
+export { Event }
+export { EventsList }
+// Library
+export { CreateLibraryFolder }
+export { LibraryFolders }
+export { LibraryNotes }
+export { ViewLibraryNote }
+// Music
+export { CreateMusic }
+export { CreateMusicAlbum }
+export { MusicAlbum }
+export { MusicAlbums }
+// Photos
+export { CreatePhotoAlbum }
+export { CreatePhoto }
+export { PhotoAlbum }
+export { PhoroAlbums }
+// Layout
+export { BaseMaterial }
+export { Body }
+export { Center }
+export { Head }
+export { Left }
+export { Right }
+// Components
+export { Navbar }
+export { Gallery }
+export { List }
+export { Header }
+export { SpaceContainer }
+export { WidgetContainer }
+export { Spinner }
+// Video
+export { CreateVideoAlbum }
+export { CreateVideo }
+export { VideoAlbums }
+export { VidepSpace }
+export { VideoAlbum }

package/src/stories/API/API.jsx

@@ -0,0 +1,47 @@
+import React from "react";
+
+import styled from "styled-components";
+import PropTypes from "prop-types";
+
+import BaseMaterial from "../Containers/BaseMaterial";
+
+const API = props => {
+  return (
+    <BaseMaterial>
+      <Image src={props.image_src} alt={props.image_alt} />
+      <Text>{props.text}</Text>
+    </BaseMaterial>
+  );
+};
+
+const Container = styled(BaseMaterial)({
+  display: "flex",
+  position: "relative",
+  width: "100%",
+  "align-items": "center",
+  "flex-direction": "column",
+  "justify-content": "center"
+});
+
+const Text = styled.p`
+  text-align: center;
+`;
+
+const Image = styled("img")({
+  width: "100%",
+  "object-fit": "cover"
+});
+
+API.defaultProps = {
+  image_src: "https://play.teleporthq.io/static/svg/default-img.svg",
+  image_alt: "image",
+  text: "Text"
+};
+
+API.propTypes = {
+  image_src: PropTypes.string,
+  image_alt: PropTypes.string,
+  text: PropTypes.string
+};
+
+export default API;

package/src/stories/API/API.stories.js

@@ -0,0 +1,10 @@
+import React from "react"
+
+import API from "./API"
+
+export default {
+    title: 'API Statuses/API',
+    component: API
+}
+
+export const Default = (args) => <API {...args} />

package/src/stories/Agora/Call/Call.jsx

@@ -0,0 +1,213 @@
+import {
+  AgoraVideoPlayer,
+  createCameraVideoTrack,
+  createClient,
+  createMicrophoneAudioTrack,
+} from 'agora-rtc-react';
+import React, { Fragment, useEffect, useState } from 'react';
+import styled from 'styled-components';
+import Controls from '../Controls/Controls';
+
+let rtc = {
+  localAudioTrack: null,
+  localVideoTrack: null,
+  localAudioReady: null,
+  localVideoReady: null,
+};
+
+const config = {
+  mode: 'rtc',
+  codec: 'vp8',
+};
+
+var options = {
+  appid: '3f54ddbde65d4f0ab9a9f5a46baa4310',
+  channel: 'bcd',
+  token:
+    '0063f54ddbde65d4f0ab9a9f5a46baa4310IAALsgGjVTL2Av/GANIuUU61cNObFj9T7krqkn2UG1uXeHlbHbAAAAAAEAAw9+/yVoJUYQEAAQBWglRh',
+};
+
+const createCameraTrack = (videoDeviceId) =>
+  createCameraVideoTrack({
+    encoderConfig: '90p_1',
+    deviceId: videoDeviceId,
+  });
+
+const createMicrophoneTrack = (audioDeviceId) =>
+  createMicrophoneAudioTrack({ deviceId: audioDeviceId });
+
+const useClient = createClient(config);
+
+const Call = ({ videoDeviceId, audioDeviceId, token, uid }) => {
+  var client = useClient();
+  const localAudio = createMicrophoneTrack(audioDeviceId)();
+  rtc.localAudioReady = localAudio.ready;
+  rtc.localAudioTrack = localAudio.track;
+  const localVideo = createCameraTrack(videoDeviceId)();
+  rtc.localVideoTrack = localVideo.track;
+  rtc.localVideoReady = localVideo.ready;
+  const [allCalls, setAllCalls] = useState([]);
+  const [stageUserId, setStageUserId] = useState();
+  const leaveChannel = async () => {
+    await client.leave();
+    client.removeAllListeners();
+    rtc.localAudioTrack.close();
+    rtc.localVideoTrack.close();
+    client.remoteUsers.forEach((user) => {
+      user.videoTrack.close();
+      user.audioTrack.close();
+    });
+  };
+  useEffect(() => {
+    let init = async () => {
+      client.on('user-published', async (user, mediaType) => {
+        await client.subscribe(user, mediaType);
+
+        if (mediaType === 'video') {
+          const remoteUser = {
+            uid: user.uid,
+            videoTrack: user.videoTrack,
+            audioTrack: user.audioTrack,
+          };
+          setAllCalls((allCalls) => [...allCalls, remoteUser]);
+        }
+        if (mediaType === 'audio') {
+          user.audioTrack.play();
+        }
+      });
+      client.on('user-unpublished', (user, type) => {
+        if (type === 'audio') {
+          user.audioTrack?.stop();
+        }
+        if (type === 'video') {
+          setAllCalls((users) => {
+            return users.filter((u) => u.uid !== user.uid);
+          });
+        }
+      });
+
+      await client.join(options.appid, options.channel, token || null, uid);
+      const localUser = {
+        uid: client.uid,
+        videoTrack: rtc.localVideoTrack,
+        audioTrack: rtc.localAudioTrack,
+      };
+
+      await client.publish([rtc.localAudioTrack, rtc.localVideoTrack]);
+      setStageUserId(localUser.uid);
+      setAllCalls((allCalls) => [...allCalls, localUser]);
+    };
+    if (
+      rtc.localVideoReady &&
+      rtc.localAudioReady &&
+      rtc.localVideoTrack &&
+      rtc.localAudioTrack
+    ) {
+      init();
+    }
+  }, [
+    client,
+    rtc.localAudioTrack,
+    rtc.localVideoTrack,
+    rtc.localAudioReady,
+    rtc.localVideoReady,
+  ]);
+  useEffect(() => {
+    return () => {
+      rtc.localAudioTrack.close();
+      rtc.localVideoTrack.close();
+      rtc.localAudioReady = undefined;
+      rtc.localVideoReady = undefined;
+      rtc.localVideoTrack = undefined;
+      rtc.localAudioTrack = undefined;
+      // setUsers([]);
+      setAllCalls([]);
+      client.leave();
+      client.removeAllListeners();
+    };
+  }, []);
+  const getStageUsers = () => {
+    const stage = allCalls.find((c) => c.uid === stageUserId);
+    return (
+      <Fragment>
+        {stage && (
+          <AgoraVideoPlayer
+            className='vid'
+            videoTrack={stage?.videoTrack}
+            style={{ height: '100%', width: '100%' }}
+          />
+        )}
+      </Fragment>
+    );
+  };
+
+  const getNonStageUsers = () => {
+    const nonStage = allCalls.filter((c) => c.uid !== stageUserId);
+    return (
+      <Fragment>
+        {nonStage.length > 0 &&
+          nonStage.map((user) => (
+            <AgoraVideoPlayer
+              key={user?.uid}
+              videoTrack={user?.videoTrack}
+              style={{ height: '100%', width: '30%' }}
+              onClick={(e) => {
+                setStageUserId(user.uid);
+              }}
+            />
+          ))}
+      </Fragment>
+    );
+  };
+  return (
+    <div>
+      <h1>Cleaner Video Call</h1>
+      <Controls
+       token={token}
+        muteVideo={(mute) => {
+          if (mute) {
+            rtc.localAudioTrack.setVolume(0);
+          } else {
+            rtc.localAudioTrack.setVolume(100);
+          }
+        }}
+        pauseVideo={async (pauseVideo) => {
+          if (pauseVideo) {
+            await rtc.localVideoTrack.setEnabled(false);
+          } else {
+            await rtc.localVideoTrack.setEnabled(true);
+          }
+        }}
+      />
+      <Videos>{getStageUsers()}</Videos>
+
+      <RemoteVideos>{getNonStageUsers()}</RemoteVideos>
+    </div>
+  );
+};
+const Videos = styled.div`
+  position: relative;
+  height: 44vh;
+  width: 40vw;
+  margin: auto;
+  align-self: flex-start;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(440px, ifr));
+  justify-items: center;
+  align-items: center;
+`;
+const RemoteVideos = styled.div`
+  height: 22vh;
+  width: 40vw;
+  display: flex;
+  margin-top: 5px;
+  flex-wrap: wrap;
+  gap: 3%;
+`;
+const Video = styled.div`
+  width: 30%;
+  height: 100%;
+  background-color: blue;
+`;
+
+export default Call;

package/src/stories/Agora/Chat/Chat.jsx

@@ -0,0 +1,130 @@
+import React, { useState } from 'react';
+
+import styled from 'styled-components';
+import ChatItem from './Components/ChatItem/ChatItem';
+import ChatRoom from './Components/ChatRoom/ChatRoom';
+
+const Chat = () => {
+  const [inChannel, setInChannel] = useState(false);
+  const [channelName, setChannelName] = useState('');
+  const [user, setUser] = useState();
+  const channels = [
+    {
+      channelName: 'demoChannel1',
+      channelCaption: 'dummyCaption1',
+    },
+    {
+      channelName: 'demoChannel2',
+      channelCaption: 'dummyCaption2',
+    },
+    {
+      channelName: 'demoChannel3',
+      channelCaption: 'dummyCaption3',
+    },
+    {
+      channelName: 'demoChannel4',
+      channelCaption: 'dummyCaption4',
+    },
+    {
+      channelName: 'demoChannel5',
+      channelCaption: 'dummyCaption5',
+    },
+  ];
+  const users = [
+    {
+      name: 'abc',
+      token:
+        '0063f54ddbde65d4f0ab9a9f5a46baa4310IACpBv3nlJRgYO0Wap1UOzpD7mqGkwUh4ZbFLBz46EIlWcJBJDUAAAAAEAA5usltkmBcYQEA6AOSYFxh',
+    },
+    {
+      name: 'bot',
+      token:
+        '0063f54ddbde65d4f0ab9a9f5a46baa4310IAB6tJsysifxKIQNIjdenWnMimAH0991npnskqGxQkI0BBEEHwEAAAAAEAA5usltnWBcYQEA6AOdYFxh',
+    },
+    {
+      name: 'xyz',
+      token:
+        '0063f54ddbde65d4f0ab9a9f5a46baa4310IABaYThrzEVXCr7SJGPYdA0sHQsiYxxuF1sZbyiSn9Mlwme6jusAAAAAEAA5usltqWBcYQEA6AOpYFxh',
+    },
+    {
+      name: 'stranger',
+      token:
+        '0063f54ddbde65d4f0ab9a9f5a46baa4310IAAevEexzZDbMbBOqtt3kaTRNWa09XjvBVdBJI3OwN+phnKdgo0AAAAAEAA5usltsmBcYQEA6AOyYFxh',
+    },
+    {
+      name: 'goku',
+      token:
+        '0063f54ddbde65d4f0ab9a9f5a46baa4310IADEQEBAL5ORXJYYocmPONWrxpGAQUIxd6lE09pFvGsqnWSrWGIAAAAAEAA5usltumBcYQEA6AO6YFxh',
+    },
+  ];
+
+  return (
+    <Container>
+      {user && (
+        <LabelContainer>
+          <label>Hello {user?.name}</label>
+        </LabelContainer>
+      )}
+      {!inChannel && !user && (
+        <UserButtonContainer>
+          {users.map((user, i) => (
+            <button onClick={() => setUser(user)}>Login as {user.name}</button>
+          ))}
+        </UserButtonContainer>
+      )}
+
+      {!inChannel && user && (
+        <ChatContainer>
+          {channels.map((channel, i) => (
+            <ChatItem
+              onClick={() => {
+                setChannelName(channel.channelName);
+
+                setInChannel(true);
+              }}
+              channelName={channel.channelName}
+              channelCaption={channel.channelCaption}
+            />
+          ))}
+        </ChatContainer>
+      )}
+
+      {inChannel && (
+        <ChatRoom
+          setInChannel={setInChannel}
+          channelName={channelName}
+          user={user}
+        />
+      )}
+    </Container>
+  );
+};
+const Container = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
+const ChatContainer = styled.div`
+  width: 100%;
+  height: 350px;
+  border: 1px solid black;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  margin: auto;
+  padding-bottom: 10px;
+`;
+const UserButtonContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  gap: 5%;
+`;
+
+const LabelContainer = styled.div`
+  display: flex;
+  justify-content: center;
+`;
+
+export default Chat;

package/src/stories/Agora/Chat/Chat.stories.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+import Chat from './Chat';
+
+export default {
+  title: 'Agora/Chat/Item',
+  component: Chat,
+};
+
+export const Default = (args) => <Chat {...args} />