chore: upgrade demo applications to stream-chat-react@11-rc

.github/workflows/deploy.yml

@@ -0,0 +1,50 @@
+name: Deploy Demo Apps
+on:
+  push:
+    branches:
+      - master
+    paths:
+      - gaming-livestream/**
+      - social-messenger-ts/**
+      - team-ts/**
+      - virtual-event/**
+      - virtual-event-old/**
+      - customer-support/**
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - name: Build Apps
+        run: yarn build:js:public
+
+      - name: Upload Pages Artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          path: docs/
+          name: gh-pages-artifact
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+
+    permissions:
+      pages: write
+      id-token: write
+
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    steps:
+      - name: Deploy to Github Pages
+        id: deployment
+        uses: actions/deploy-pages@v1
+        with:
+          artifact_name: gh-pages-artifact

gaming-livestream/package.json

@@ -4,17 +4,20 @@
   "private": true,
   "homepage": "./",
   "dependencies": {
+    "@emoji-mart/data": "^1.1.2",
+    "@emoji-mart/react": "^1.1.1",
     "@sentry/react": "^7.56.0",
+    "emoji-mart": "^5.5.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-scripts": "4.0.3",
+    "react-scripts": "^5.0.1",
     "sass": "^1.56.1",
     "stream-chat": "^8.10.1",
-    "stream-chat-react": "^10.8.8"
+    "stream-chat-react": "^11.0.0-rc.8"
   },
   "devDependencies": {
-    "@types/react": "^18.0.25",
-    "@types/react-dom": "^18.0.8",
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
     "typescript": "^4.8.4"
   },
   "scripts": {

gaming-livestream/src/components/Chat/GamingMessageInput.tsx

@@ -1,30 +1,30 @@
 import React from 'react';
 import {
   ChatAutoComplete,
-  EmojiPicker,
   useChannelStateContext,
   useMessageInputContext,
   useTypingContext,
 } from 'stream-chat-react';
+import { EmojiPicker } from 'stream-chat-react/emojis';
 
-import EmojiIcon from '../../assets/icons/EmojiIcon';
 import SendIcon from '../../assets/icons/SendIcon';
 import StarIcon from '../../assets/icons/StarIcon';
+import EmojiIcon from '../../assets/icons/EmojiIcon';
 
-import {useLayoutController} from '../../context/LayoutController';
+import { useLayoutController } from '../../context/LayoutController';
 
-import type {StreamChatType} from '../../types';
+import type { StreamChatType } from '../../types';
 
 const TypingIndicator = () => (
-    <div className='typing-indicator'>
-      <div className='dots'>
-        <div className='dot'></div>
-        <div className='dot'></div>
-        <div className='dot'></div>
-      </div>
-      <p>a member is typing</p>
+  <div className='typing-indicator'>
+    <div className='dots'>
+      <div className='dot'></div>
+      <div className='dot'></div>
+      <div className='dot'></div>
     </div>
-)
+    <p>a member is typing</p>
+  </div>
+);
 
 export const GamingMessageInput = React.memo(() => {
   const { showUpgradePanel } = useLayoutController();
@@ -34,26 +34,31 @@ export const GamingMessageInput = React.memo(() => {
 
   return (
     <div className='channel-footer'>
-      {!thread && (
-          <EmojiPicker/>
-      )}
       <div className='channel-footer__top'>
         <ChatAutoComplete rows={1} placeholder='Say something' />
-        {!thread && <button className='emoji-button' onClick={messageInput.openEmojiPicker}><EmojiIcon /></button>}
+        {!thread && (
+          <EmojiPicker
+            popperOptions={{ placement: 'top-end', strategy: 'fixed' }}
+            pickerProps={{ theme: 'auto', perLine: 7 }}
+            ButtonIconComponent={EmojiIcon}
+            buttonClassName='emoji-button'
+          />
+        )}
       </div>
       <div className='channel-footer__bottom'>
         <button onClick={showUpgradePanel} className='watcher-count-button'>
           <StarIcon />
           <p>68</p>
         </button>
-        {typing && !!Object.keys(typing).length && (
-          <TypingIndicator/>
-        )}
-        <button className='send-message-button' disabled={!messageInput.text} onClick={messageInput.handleSubmit}>
+        {typing && !!Object.keys(typing).length && <TypingIndicator />}
+        <button
+          className='send-message-button'
+          disabled={!messageInput.text}
+          onClick={messageInput.handleSubmit}
+        >
           <SendIcon />
         </button>
       </div>
-
     </div>
   );
 });

gaming-livestream/src/components/Chat/index.tsx

@@ -1,20 +1,25 @@
-import React, {useEffect, useState} from 'react';
-import {Channel, Chat} from 'stream-chat-react';
+import React, { useEffect, useState } from 'react';
+import { Channel, Chat } from 'stream-chat-react';
 
-import {ChatUpgrades} from './ChatUpgrades';
-import {GamingChatInner} from './GamingChatInner';
-import {GamingChatNotification} from './GamingChatNotification';
-import {GamingParticipants} from './GamingParticipants';
-import {GamingThreadHeader} from './GamingThreadHeader';
+import { init, SearchIndex } from 'emoji-mart';
+import data from '@emoji-mart/data';
 
-import {getColor, getRandomUserRole, participants} from '../../assets/data';
-import {useChecklist} from '../../hooks/useChecklistTasks';
+import { ChatUpgrades } from './ChatUpgrades';
+import { GamingChatInner } from './GamingChatInner';
+import { GamingChatNotification } from './GamingChatNotification';
+import { GamingParticipants } from './GamingParticipants';
+import { GamingThreadHeader } from './GamingThreadHeader';
 
-import {useConnectUser} from '../../hooks/useConnectUser';
-import {useLayoutController} from '../../context/LayoutController';
-import type {Channel as ChannelT} from 'stream-chat';
-import type {StreamChatType} from '../../types';
-import {MessageTimestampController} from "../../context/MessageTimestampController";
+import { getColor, getRandomUserRole, participants } from '../../assets/data';
+import { useChecklist } from '../../hooks/useChecklistTasks';
+
+import { useConnectUser } from '../../hooks/useConnectUser';
+import { useLayoutController } from '../../context/LayoutController';
+import type { Channel as ChannelT } from 'stream-chat';
+import type { StreamChatType } from '../../types';
+import { MessageTimestampController } from '../../context/MessageTimestampController';
+
+init({ data });
 
 const urlParams = new URLSearchParams(window.location.search);
 const apiKey = urlParams.get('apikey') || process.env.REACT_APP_STREAM_KEY;
@@ -23,50 +28,55 @@ const userToken = urlParams.get('user_token') || process.env.REACT_APP_USER_TOKE
 const targetOrigin = urlParams.get('target_origin') || process.env.REACT_APP_TARGET_ORIGIN;
 
 const userToConnect = {
-	id: userId!,
-	color: getColor(),
-	userRole: getRandomUserRole(),
+  id: userId!,
+  color: getColor(),
+  userRole: getRandomUserRole(),
 };
 
 export const GamingChat = () => {
-	const [channel, setChannel] = useState<ChannelT<StreamChatType> | null>(null);
-	const {memberListVisible, popUpText, upgradePanelVisible, chatVisible} = useLayoutController();
-	const chatClient = useConnectUser<StreamChatType>(apiKey!, userToConnect, userToken);
-	useChecklist({chatClient, targetOrigin});
-
-	useEffect(() => {
-		if (!chatClient) return;
+  const [channel, setChannel] = useState<ChannelT<StreamChatType> | null>(null);
+  const { memberListVisible, popUpText, upgradePanelVisible, chatVisible } = useLayoutController();
+  const chatClient = useConnectUser<StreamChatType>(apiKey!, userToConnect, userToken);
+  useChecklist({ chatClient, targetOrigin });
 
-		const loadChat = async () => {
-			const channel = chatClient.channel('gaming', 'gaming-demo', {name: 'Gaming Demo'});
-			await channel.watch();
-			setChannel(channel);
-		};
+  useEffect(() => {
+    if (!chatClient) return;
 
-		loadChat();
-	}, [chatClient]);
+    const loadChat = async () => {
+      const channel = chatClient.channel('gaming', 'gaming-demo', { name: 'Gaming Demo' });
+      await channel.watch();
+      setChannel(channel);
+    };
 
+    loadChat();
+  }, [chatClient]);
 
-	if (!chatClient) return null;
+  if (!chatClient) return null;
 
-	return (
-		<section
-			className={`sidebar ${memberListVisible} ${chatVisible} ${upgradePanelVisible ? 'show-upgrade' : ''}`}
-		>
-			{channel && (
-				<div className='chat-container'>
-					<Chat client={chatClient}>
-						<Channel channel={channel} ThreadHeader={GamingThreadHeader}>
-							<MessageTimestampController>
-								<GamingChatInner/>
-							</MessageTimestampController>
-						</Channel>
-					</Chat>
-					{popUpText && <GamingChatNotification text={popUpText}/>}
-				</div>
-			)}
-			<GamingParticipants participants={participants}/>
-			<ChatUpgrades/>
-		</section>
-	);
+  return (
+    <section
+      className={`sidebar ${memberListVisible} ${chatVisible} ${
+        upgradePanelVisible ? 'show-upgrade' : ''
+      }`}
+    >
+      {channel && (
+        <div className='chat-container'>
+          <Chat client={chatClient}>
+            <Channel
+              channel={channel}
+              ThreadHeader={GamingThreadHeader}
+              emojiSearchIndex={SearchIndex}
+            >
+              <MessageTimestampController>
+                <GamingChatInner />
+              </MessageTimestampController>
+            </Channel>
+          </Chat>
+          {popUpText && <GamingChatNotification text={popUpText} />}
+        </div>
+      )}
+      <GamingParticipants participants={participants} />
+      <ChatUpgrades />
+    </section>
+  );
 };

gaming-livestream/src/styles/_variables.scss

@@ -1,24 +1,39 @@
 // colors
 #root {
-  --background: #000615;
-  --component-background: #010c29;
-  --button-background: #062471;
-  --button-background-hover: #0d47d9;
+  --background: rgb(0, 6, 21);
+  --component-background: rgb(1, 12, 41);
+  --button-background: rgb(6, 36, 113);
+  --button-background-hover: rgb(13, 71, 217);
 
-  --foreground: #fff;
+  --foreground: rgb(255, 255, 255);
 
-  --attendees: #00fc92;
-  
-  --border-color: #062471;
-  --border-color-secondary: #081e58;
+  --attendees: rgb(0, 252, 146);
+
+  --border-color: rgb(6, 36, 113);
+  --border-color-secondary: rgb(8, 30, 88);
 
   --header-height: 60px;
   --sidebar-width: 320px;
 
-  --btn-border-radius: .5rem;
+  --btn-border-radius: 0.5rem;
 
   --input-focused-box-shadow: 0 0 0 2px rgba(0, 108, 255, 0.36);
-}
 
+  --em-rgb-color: var(--button-background);
+}
 
+em-emoji-picker {
+  --category-icon-size: 16px;
+  --font-size: 16px;
+
+  --color-border-over: rgb(0, 108, 255);
+  --color-border: rgb(0, 6, 21);
+
+  --rgb-background: 1, 12, 41;
+  --rgb-accent: 0, 108, 255;
+  --rgb-color: 255, 255, 255;
+  --rgb-input: 0, 6, 21;
+  --shadow: none;
 
+  border: 1px solid rgb(6, 36, 113);
+}

gaming-livestream/tsconfig.json

@@ -2,12 +2,9 @@
   "compilerOptions": {
     "allowJs": true,
     "allowUnreachableCode": false,
-    "allowUnusedLabels": false,
     "allowSyntheticDefaultImports": true,
-    "checkJs": false,
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
-    "importsNotUsedAsValues": "error",
     "isolatedModules": true,
     "jsx": "react-jsx",
     "lib": ["dom", "dom.iterable", "esnext"],