@rpg-engine/long-bow 0.2.63 → 0.2.65

package/dist/stories/DropdownSelectorContainer.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { IDropdownSelectorContainer } from '../components/DropdownSelectorContainer';
+declare const meta: Meta;
+export default meta;
+export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, IDropdownSelectorContainer>;

package/package.json

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

package/src/components/Chat/Chat.tsx

@@ -18,6 +18,8 @@ export interface IChatProps {
   chatMessages: IChatMessage[];
   onSendChatMessage: (message: string) => void;
   onCloseButton: () => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
   opacity?: number;
   width?: string;
   height?: string;
@@ -30,6 +32,8 @@ export const Chat: React.FC<IChatProps> = ({
   width = '100%',
   height = '250px',
   onCloseButton,
+  onFocus,
+  onBlur,
 }) => {
   const [message, setMessage] = useState('');
 
@@ -113,6 +117,8 @@ export const Chat: React.FC<IChatProps> = ({
                 className="chat-input dark-background"
                 type="text"
                 autoComplete="off"
+                onFocus={onFocus}
+                onBlur={onBlur}
               />
             </Column>
             <Column justifyContent="flex-end">

package/src/components/{ServerSelection.tsx → DropdownSelectorContainer.tsx}

@@ -3,29 +3,31 @@ import styled from 'styled-components';
 import { uiFonts } from '../constants/uiFonts';
 import { Dropdown } from './Dropdown';
 
-interface IServer {
+interface IDropdownSelectorOption {
   id: string;
   name: string;
 }
 
-export interface IServerSelectionProps {
-  onChange: (serverId: string) => void;
-  servers: IServer[];
+export interface IDropdownSelectorContainer {
+  onChange: (id: string) => void;
+  options: IDropdownSelectorOption[];
   details?: string;
+  title: string;
 }
 
-export const ServerSelection: React.FC<IServerSelectionProps> = ({
+export const DropdownSelectorContainer: React.FC<IDropdownSelectorContainer> = ({
+  title,
   onChange,
-  servers,
+  options,
   details,
 }) => {
   return (
     <div>
-      <p>Select server</p>
+      <p>{title}</p>
       <Dropdown
-        options={servers.map((server, index) => ({
-          option: server.name,
-          value: server.id,
+        options={options.map((option, index) => ({
+          option: option.name,
+          value: option.id,
           id: index,
         }))}
         onChange={onChange}

package/src/index.tsx

@@ -4,12 +4,12 @@ export * from './components/Chat/Chat';
 export * from './components/CheckButton';
 export * from './components/DraggableContainer';
 export * from './components/Dropdown';
+export * from './components/DropdownSelectorContainer';
 export * from './components/Equipment/EquipmentSet';
 export * from './components/HistoryDialog';
 export * from './components/Input';
 export * from './components/Item/Inventory/ItemContainer';
 export * from './components/Item/Inventory/ItemSlot';
-export * from './components/itemSelector/ItemSelector';
 export * from './components/ListMenu';
 export * from './components/NPCDialog/NPCDialog';
 export * from './components/NPCDialog/NPCMultiDialog';
@@ -18,17 +18,17 @@ export * from './components/ProgressBar';
 export * from './components/PropertySelect/PropertySelect';
 export * from './components/QuestInfo/QuestInfo';
 export * from './components/QuestList';
-export * from './components/RadioButton';
-export * from './components/RangeSlider';
 export * from './components/RPGUIContainer';
 export * from './components/RPGUIRoot';
-export * from './components/ServerSelection';
-export * from './components/shared/SpriteFromAtlas';
+export * from './components/RadioButton';
+export * from './components/RangeSlider';
 export * from './components/SkillProgressBar';
 export * from './components/SkillsContainer';
 export * from './components/TextArea';
 export * from './components/TimeWidget/TimeWidget';
 export * from './components/TradingMenu/TradingMenu';
 export * from './components/Truncate';
+export * from './components/itemSelector/ItemSelector';
+export * from './components/shared/SpriteFromAtlas';
 export * from './components/typography/DynamicText';
 export { useEventListener } from './hooks/useEventListener';

package/src/stories/DropdownSelectorContainer.stories.tsx

@@ -0,0 +1,41 @@
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { RPGUIRoot } from '..';
+import {
+  DropdownSelectorContainer,
+  IDropdownSelectorContainer,
+} from '../components/DropdownSelectorContainer';
+
+const meta: Meta = {
+  title: 'DropdownSelectorContainer',
+  component: DropdownSelectorContainer,
+};
+
+export default meta;
+
+const Template: Story<IDropdownSelectorContainer> = args => (
+  <RPGUIRoot>
+    <DropdownSelectorContainer {...args} details="There are server details" />
+  </RPGUIRoot>
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  title: 'Choose a server',
+  onChange: () => {},
+  options: [
+    {
+      id: 'europe-germany',
+      name: 'Europe (Germany)',
+    },
+    {
+      id: 'europe-uk',
+      name: 'Europe (UK)',
+    },
+    {
+      id: 'america-us',
+      name: 'America',
+    },
+  ],
+};

package/dist/components/ServerSelection.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-interface IServer {
-    id: string;
-    name: string;
-}
-export interface IServerSelectionProps {
-    onChange: (serverId: string) => void;
-    servers: IServer[];
-    details?: string;
-}
-export declare const ServerSelection: React.FC<IServerSelectionProps>;
-export {};

package/dist/stories/ServerSelection.stories.d.ts

@@ -1,5 +0,0 @@
-import { Meta } from '@storybook/react';
-import { IServerSelectionProps } from '../components/ServerSelection';
-declare const meta: Meta;
-export default meta;
-export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, IServerSelectionProps>;

package/src/stories/ServerSelection.stories.tsx

@@ -1,40 +0,0 @@
-import { Meta, Story } from '@storybook/react';
-import React from 'react';
-import { RPGUIRoot } from '..';
-import {
-  IServerSelectionProps,
-  ServerSelection,
-} from '../components/ServerSelection';
-
-const meta: Meta = {
-  title: 'ServerSelection',
-  component: ServerSelection,
-};
-
-export default meta;
-
-const Template: Story<IServerSelectionProps> = args => (
-  <RPGUIRoot>
-    <ServerSelection {...args} details="There are server details" />
-  </RPGUIRoot>
-);
-
-export const Default = Template.bind({});
-
-Default.args = {
-  onChange: () => {},
-  servers: [
-    {
-      id: 'europe-germany',
-      name: 'Europe',
-    },
-    {
-      id: 'europe-uk',
-      name: 'Europe',
-    },
-    {
-      id: 'america-us',
-      name: 'America',
-    },
-  ],
-};