@rpg-engine/long-bow 0.5.43 → 0.5.44

package/dist/stories/ChatRevamp.stories.d.ts

@@ -3,4 +3,5 @@ import { IChatRevampProps } from '../components/ChatRevamp/ChatRevamp';
 declare const meta: Meta;
 export default meta;
 export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, IChatRevampProps>;
-export declare const PrivateCharacters: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, IChatRevampProps>;
+export declare const Private: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, IChatRevampProps>;
+export declare const Trade: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, IChatRevampProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.5.43",
+  "version": "0.5.44",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -83,7 +83,7 @@
   },
   "dependencies": {
     "@rollup/plugin-image": "^2.1.1",
-    "@rpg-engine/shared": "^0.9.0",
+    "@rpg-engine/shared": "^0.9.7",
     "dayjs": "^1.11.2",
     "font-awesome": "^4.7.0",
     "fs-extra": "^10.1.0",

package/src/components/Chat/Chat.tsx

@@ -1,16 +1,11 @@
-import { IChatMessage, IPrivateChatMessage } from '@rpg-engine/shared';
 import dayjs from 'dayjs';
 import React, { useEffect, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { RxPaperPlane } from 'react-icons/rx';
 import styled from 'styled-components';
+import { ChatMessage } from '../ChatRevamp/ChatRevamp';
 import { Column } from '../shared/Column';
 
-interface IEmitter {
-  _id: string;
-  name: string;
-}
-
 export interface IStyles {
   textColor?: string;
   buttonColor?: string;
@@ -19,8 +14,13 @@ export interface IStyles {
   height?: string;
 }
 
+export interface IEmitter {
+  _id: string;
+  name: string;
+}
+
 export interface IChatProps {
-  chatMessages: IChatMessage[] | IPrivateChatMessage[];
+  chatMessages: ChatMessage[];
   onSendChatMessage: (message: string) => void;
   onCloseButton: () => void;
   onFocus?: () => void;
@@ -80,9 +80,7 @@ export const Chat: React.FC<IChatProps> = ({
     } ${message}`;
   };
 
-  const onRenderChatMessages = (
-    chatMessages: (IChatMessage | IPrivateChatMessage)[]
-  ) => {
+  const onRenderChatMessages = (chatMessages: ChatMessage[]) => {
     return chatMessages?.length ? (
       chatMessages?.map((chatMessage, index) => (
         <Message

package/src/components/ChatRevamp/ChatRevamp.tsx

@@ -2,6 +2,7 @@ import {
   ICharacter,
   IChatMessage,
   IPrivateChatMessage,
+  ITradeChatMessage,
 } from '@rpg-engine/shared';
 import React, { useEffect, useState } from 'react';
 import { RxCross2, RxMagnifyingGlass } from 'react-icons/rx';
@@ -13,8 +14,12 @@ import { SearchCharacter } from './SearchCharacter';
 
 export type PrivateChatCharacter = Pick<ICharacter, '_id' | 'name'>;
 
+export type ChatMessage =
+  | IChatMessage
+  | IPrivateChatMessage
+  | ITradeChatMessage;
 export interface IChatRevampProps {
-  chatMessages: IChatMessage[] | IPrivateChatMessage[];
+  chatMessages: ChatMessage[];
   onSendGlobalChatMessage: (message: string) => void;
   onCloseButton: () => void;
   onFocus?: () => void;
@@ -32,6 +37,7 @@ export interface IChatRevampProps {
   onPreviousChatCharacterClick?: (character: PrivateChatCharacter) => void;
   onRemoveRecentChatCharacter?: (character: PrivateChatCharacter) => void;
   unseenMessageCharacterIds?: string[];
+  onSendTradeMessage: (message: string) => void;
 }
 
 export const ChatRevamp = ({
@@ -53,6 +59,7 @@ export const ChatRevamp = ({
   onPreviousChatCharacterClick,
   onRemoveRecentChatCharacter,
   unseenMessageCharacterIds = [],
+  onSendTradeMessage,
 }: IChatRevampProps) => {
   const [showSearchCharacterUI, setShowSearchCharacterUI] = useState(true);
   const [showRecentChats, setShowRecentChats] = useState(false);
@@ -62,6 +69,7 @@ export const ChatRevamp = ({
   }, [activeTab]);
 
   const isPrivate = activeTab === 'private';
+  const isTrade = activeTab === 'trade';
 
   const handlePreviousChatCharacterClick = (
     character: PrivateChatCharacter
@@ -92,9 +100,7 @@ export const ChatRevamp = ({
           <RecentChatTopBar isOpen={showRecentChats}>
             <BurgerIconContainer
               onPointerDown={() => setShowRecentChats(t => !t)}
-              hasUnseenMessages={
-                unseenMessageCharacterIds?.length > 0 ? true : false
-              }
+              hasUnseenMessages={unseenMessageCharacterIds?.length > 0 || false}
             >
               <BurgerLineIcon></BurgerLineIcon>
               <BurgerLineIcon></BurgerLineIcon>
@@ -149,7 +155,11 @@ export const ChatRevamp = ({
           <Chat
             chatMessages={chatMessages}
             onSendChatMessage={
-              isPrivate ? onSendPrivateChatMessage : onSendGlobalChatMessage
+              isPrivate
+                ? onSendPrivateChatMessage
+                : isTrade
+                ? onSendTradeMessage
+                : onSendGlobalChatMessage
             }
             sendMessage={true}
             onCloseButton={onCloseButton}

package/src/components/ChatRevamp/SearchCharacter.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { RxMagnifyingGlass } from 'react-icons/rx';
 import styled from 'styled-components';
 import { uiColors } from '../../constants/uiColors';
@@ -33,6 +33,17 @@ export const SearchCharacter = ({
   },
 }: ISearchCharacterProps) => {
   const [characterName, setCharacterName] = useState('');
+  const searchCharacterRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+     const timer = setTimeout(() => {
+      if (searchCharacterRef.current) {
+        searchCharacterRef.current.focus();
+      }
+    }, 100);
+
+    return () => clearTimeout(timer);
+  }, []);
 
   const handleSubmit = (event: React.SyntheticEvent<HTMLFormElement>) => {
     event.preventDefault();
@@ -47,7 +58,7 @@ export const SearchCharacter = ({
     setCharacterName('');
     onCharacterClick(character);
     setShowSearchCharacter(false);
-  };
+  };  
 
   return (
     <SearchContainer>
@@ -55,6 +66,7 @@ export const SearchCharacter = ({
         <Column flex={70}>
           <TextField
             value={characterName}
+            ref={searchCharacterRef}
             id="characterName"
             name='characterName'
             onChange={e => {
@@ -68,7 +80,6 @@ export const SearchCharacter = ({
             onFocus={onFocus}
             onBlur={onBlur}
             onPointerDown={onFocus}
-            autoFocus
            />
         </Column>
         <Column justifyContent="flex-end">

package/src/stories/ChatRevamp.stories.tsx

@@ -202,6 +202,7 @@ const chatMessagesMock = [
 const tabsMock = [
   { label: 'Global', id: 'global' },
   { label: 'Private', id: 'private' },
+  { label: 'Trade', id: 'trade' },
 ];
 
 const recentPrivateChatCharactersMock = [
@@ -228,11 +229,12 @@ Default.args = {
   activeTab: 'global',
   onChangeTab: () => {},
   onSendPrivateChatMessage: () => {},
+  onSendTradeMessage: () => {},
 };
 
-export const PrivateCharacters = Template.bind({});
+export const Private = Template.bind({});
 
-PrivateCharacters.args = {
+Private.args = {
   onSendGlobalChatMessage: () => {},
   onChangeCharacterName: () => {},
   chatMessages: chatMessagesMock,
@@ -246,4 +248,20 @@ PrivateCharacters.args = {
   recentChatCharacters: recentPrivateChatCharactersMock,
   recentSelectedChatCharacterId: recentPrivateChatCharactersMock[0]._id,
   unseenMessageCharacterIds: [recentPrivateChatCharactersMock[0]._id],
+  onSendTradeMessage: () => {},
+};
+
+export const Trade = Template.bind({});
+
+Trade.args = {
+  onSendGlobalChatMessage: () => {},
+  onChangeCharacterName: () => {},
+  chatMessages: chatMessagesMock,
+  styles: { width: `calc(100% - 0.5rem * 2)`, height: '200px' },
+  onCloseButton: () => {},
+  tabs: tabsMock,
+  privateChatCharacters: recentPrivateChatCharactersMock,
+  activeTab: 'trade',
+  onChangeTab: () => {},
+  onSendTradeMessage: () => {},
 };