@rpg-engine/long-bow 0.6.68 → 0.6.70

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.6.68",
+  "version": "0.6.70",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/Friends/FriendList.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { uiColors } from '../../constants/uiColors';
 import { Button, ButtonTypes } from '../Button';
@@ -10,6 +10,7 @@ import {
   TableCell,
   TableHeader,
   TableRow,
+  UserActionLink,
 } from '../Table/Table';
 import { SearchFriend } from './SearchFriend';
 export type IFriend = Pick<ICharacter, 'name' | '_id' | 'isOnline'>;
@@ -27,6 +28,8 @@ interface IFriendListProps {
   onSearch: (characterName: string) => void;
   onAcceptRequest: (character: IFriend) => void;
   onRejectRequest: (character: IFriend) => void;
+  onAddFriend?: () => void;
+  onBackFriendList?: () => void;
 }
 
 export const FriendList: React.FC<IFriendListProps> = ({
@@ -41,9 +44,19 @@ export const FriendList: React.FC<IFriendListProps> = ({
   onRemoveFriend,
   onOpenPrivateMessage,
   onRejectRequest,
+  onAddFriend,
+  onBackFriendList,
 }) => {
   const [isAddFriendUI, setIsAddFriendUI] = useState(false);
 
+  useEffect(() => {
+    if (isAddFriendUI) {
+      onAddFriend?.();
+    } else {
+      onBackFriendList?.();
+    }
+  }, [isAddFriendUI]);
+
   return (
     <ListWrapper>
       {isAddFriendUI ? (
@@ -77,18 +90,18 @@ export const FriendList: React.FC<IFriendListProps> = ({
                     <TableCell>{friend.name}</TableCell>
                     <TableCell>
                       <ActionButtons>
-                        <UserAction
-                          color={uiColors.yellow}
+                        <UserActionLink
+                          color={uiColors.white}
                           onClick={() => onOpenPrivateMessage(friend)}
                         >
                           Chat
-                        </UserAction>
-                        <UserAction
+                        </UserActionLink>
+                        <UserActionLink
                           color={uiColors.red}
                           onClick={() => onRemoveFriend(friend)}
                         >
                           Remove
-                        </UserAction>
+                        </UserActionLink>
                       </ActionButtons>
                     </TableCell>
                   </TableRow>
@@ -140,17 +153,3 @@ const ButtonContainer = styled.div`
   width: 100%;
   margin-top: 1rem;
 `;
-
-interface IUserActionProps {
-  color: string;
-}
-
-const UserAction = styled.span<IUserActionProps>`
-  color: ${({ color }) => color} !important;
-  cursor: pointer;
-  margin-right: 0.5rem;
-
-  &:hover {
-    text-decoration: underline;
-  }
-`;

package/src/components/Friends/SearchFriend.tsx

@@ -1,11 +1,12 @@
-import React, { useState } from 'react';
+import { debounce } from 'lodash';
+import React, { useCallback, useState } from 'react';
 import styled from 'styled-components';
+import { TableTab, UserActionLink } from '../..';
+import { uiColors } from '../../constants/uiColors';
 import { uiFonts } from '../../constants/uiFonts';
-import { Button, ButtonTypes } from '../Button';
-import { Column } from '../shared/Column';
-import type { IFriend } from './FriendList';
+import { IFriend } from './FriendList';
 
-interface ISearchFriendProp {
+interface ISearchFriendProps {
   searchedCharacters: IFriend[];
   friendRequests: IFriend[];
   onFocus?: () => void;
@@ -16,142 +17,194 @@ interface ISearchFriendProp {
   onRejectRequest: (character: IFriend) => void;
 }
 
-export const SearchFriend = (props: ISearchFriendProp) => {
-  const {
-    searchedCharacters,
-    friendRequests,
-    onBlur,
-    onFocus,
-    onSearch,
-    onSendFriendRequest,
-    onAcceptRequest,
-    onRejectRequest,
-  } = props;
+export const SearchFriend: React.FC<ISearchFriendProps> = ({
+  searchedCharacters,
+  friendRequests,
+  onBlur,
+  onFocus,
+  onSearch,
+  onSendFriendRequest,
+  onAcceptRequest,
+  onRejectRequest,
+}) => {
   const [characterName, setCharacterName] = useState('');
 
+  const debouncedSearch = useCallback(
+    debounce((name: string) => {
+      onSearch(name);
+    }, 300),
+    []
+  );
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const name = e.target.value;
+    setCharacterName(name);
+    debouncedSearch(name);
+  };
+
   const handleSubmit = (event: React.SyntheticEvent<HTMLFormElement>) => {
     event.preventDefault();
-    if (!characterName || characterName.trim() === '') return;
-    onSearch(characterName);
+    if (characterName.trim()) {
+      onSearch(characterName);
+    }
   };
 
+  const searchTabContent = (
+    <ListContainer>
+      <SearchForm onSubmit={handleSubmit}>
+        <SearchInput
+          value={characterName}
+          id="characterName"
+          name="characterName"
+          onChange={handleInputChange}
+          type="text"
+          autoComplete="off"
+          onFocus={onFocus}
+          onBlur={onBlur}
+          onPointerDown={onFocus}
+          autoFocus
+          placeholder="Search for a character..."
+        />
+      </SearchForm>
+      <CharacterList
+        characters={searchedCharacters}
+        onAction={onSendFriendRequest}
+        actionLabel="Add Friend"
+      />
+    </ListContainer>
+  );
+
+  const requestsTabContent = (
+    <ListContainer>
+      <FriendRequestSection
+        friendRequests={friendRequests}
+        onAccept={onAcceptRequest}
+        onReject={onRejectRequest}
+      />
+    </ListContainer>
+  );
+
+  const tabs = [
+    { id: 'search', title: 'Search', content: searchTabContent },
+    {
+      id: 'requests',
+      title: `Requests (${friendRequests.length})`,
+      content: requestsTabContent,
+    },
+  ];
+
   return (
-    <>
-      <Form onSubmit={handleSubmit}>
-        <Column flex={70}>
-          <TextField
-            value={characterName}
-            id="characterName"
-            name="characterName"
-            onChange={e => {
-              setCharacterName(e.target.value);
-            }}
-            height={20}
-            type="text"
-            autoComplete="off"
-            onFocus={onFocus}
-            onBlur={onBlur}
-            onPointerDown={onFocus}
-            autoFocus
-          />
-        </Column>
-        <Column justifyContent="flex-end">
-          <Button type="submit" buttonType={ButtonTypes.RPGUIButton}>
-            Search
-          </Button>
-        </Column>
-      </Form>
+    <Container>
+      <TableTab
+        tabs={tabs}
+        activeTextColor="#000"
+        inactiveColor="#777"
+        borderColor="#f59e0b"
+      />
+    </Container>
+  );
+};
+
+const CharacterList: React.FC<{
+  characters: IFriend[];
+  onAction: (character: IFriend) => void;
+  actionLabel: string;
+}> = ({ characters, onAction, actionLabel }) => (
+  <ListContainer>
+    {characters.map(character => (
+      <ListItem key={character._id}>
+        <CharacterName>{character.name}</CharacterName>
+        <UserActionLink
+          color={uiColors.lightGreen}
+          onClick={() => onAction(character)}
+        >
+          {actionLabel}
+        </UserActionLink>
+      </ListItem>
+    ))}
+  </ListContainer>
+);
+
+const FriendRequestSection: React.FC<{
+  friendRequests: IFriend[];
+  onAccept: (character: IFriend) => void;
+  onReject: (character: IFriend) => void;
+}> = ({ friendRequests, onAccept, onReject }) => (
+  <>
+    {friendRequests.length > 0 && (
       <ListContainer>
-        {searchedCharacters.map(character => (
-          <ListElement key={character._id}>
-            <p>{character.name}</p>
-
-            <Button
-              buttonType={ButtonTypes.RPGUIButton}
-              onPointerDown={() => onSendFriendRequest(character)}
-            >
-              Add Friend
-            </Button>
-          </ListElement>
+        {friendRequests.map(character => (
+          <ListItem key={character._id}>
+            <CharacterName>{character.name}</CharacterName>
+            <AcceptRejectActions>
+              <UserActionLink
+                color={uiColors.lightGreen}
+                onClick={() => onAccept(character)}
+              >
+                Accept
+              </UserActionLink>
+              <UserActionLink
+                color={uiColors.red}
+                onClick={() => onReject(character)}
+              >
+                Reject
+              </UserActionLink>
+            </AcceptRejectActions>
+          </ListItem>
         ))}
       </ListContainer>
-      <FriendRequestTitle>
-        Friend Requests <span>({friendRequests.length})</span>
-      </FriendRequestTitle>
-      {friendRequests.length > 0 && (
-          <ListContainer>
-            {friendRequests.map(character => (
-              <ListElement key={character._id}>
-                <p>{character.name}</p>
-
-                <AcceptRejectButtonContainer>
-                  <Button
-                    buttonType={ButtonTypes.RPGUIButton}
-                    onPointerDown={() => onAcceptRequest(character)}
-                  >
-                    Accept
-                  </Button>
-                  <Button
-                    buttonType={ButtonTypes.RPGUIButton}
-                    onPointerDown={() => onRejectRequest(character)}
-                  >
-                    Reject
-                  </Button>
-                </AcceptRejectButtonContainer>
-              </ListElement>
-            ))}
-          </ListContainer>
-      )}
-    </>
-  );
-};
+    )}
+  </>
+);
 
-const Form = styled.form`
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+`;
+
+const SearchForm = styled.form`
   display: flex;
-  width: 100%;
-  justify-content: center;
   align-items: center;
+  width: 100%;
   margin-top: 1rem;
 `;
 
-const TextField = styled.input`
+const SearchInput = styled.input`
   width: 100%;
-  background-color: rgba(0, 0, 0, 0.25) !important;
-  border: none !important;
-  max-height: 28px !important;
+  background-color: rgba(0, 0, 0, 0.25);
+  border: none;
+  padding: 0.5rem;
+  font-size: ${uiFonts.size.small};
 `;
 
 const ListContainer = styled.ul`
-  width: 100%;
-  c4height: 50vh;
-  border: none;
-  overflow-y: scroll;
   list-style: none;
   padding: 0;
+  margin: 0;
+  width: 100%;
+  max-height: 50vh;
+  overflow-y: auto;
 
   @media (max-width: 768px) {
-    max-height: 90wh;
+    max-height: 90vh;
   }
 `;
 
-const ListElement = styled.li`
-  margin: 0.5rem 0 !important;
-  font-size: ${uiFonts.size.small};
-  padding: 0.5rem 2px;
+const ListItem = styled.li`
   display: flex;
   align-items: center;
   justify-content: space-between;
+  padding: 0.5rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 `;
 
-const FriendRequestTitle = styled.h3`
-  font-size: ${uiFonts.size.small} !important;
-  margin-top: 0.5rem !important;
-  text-align: center;
-  gap: 0.5rem;
+const CharacterName = styled.p`
+  font-size: ${uiFonts.size.small};
+  margin: 0;
 `;
 
-const AcceptRejectButtonContainer = styled.div`
+const AcceptRejectActions = styled.div`
   display: flex;
-  justify-content: space-between;
   gap: 0.5rem;
 `;

package/src/components/Table/Table.tsx

@@ -24,6 +24,7 @@ export const TableCell = styled.td`
   padding: 0.5rem;
   color: ${uiColors.white};
   border-bottom: 1px solid ${uiColors.lightGray};
+  text-align: ${({ align }) => (align ? align : 'left')}; /* Add this line */
 `;
 
 export const ActionButtons = styled.div`
@@ -31,3 +32,17 @@ export const ActionButtons = styled.div`
   gap: 10px;
   align-items: center;
 `;
+
+interface IUserActionProps {
+  color: string;
+}
+
+export const UserActionLink = styled.span<IUserActionProps>`
+  color: ${({ color }) => color} !important;
+  cursor: pointer;
+  margin-right: 0.5rem;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;

package/src/stories/FriendList.stories.tsx

@@ -38,6 +38,8 @@ const Template = () => {
     onRejectRequest={(character) => console.log(character)}
     onBlur={() => console.log('blur')}
     onFocus={() => console.log('focus')}
+    onAddFriend={() => console.log('add friend')}
+    onBackFriendList={() => console.log('back friend list')}
 />
   </RPGUIRoot>;
 }