@rpg-engine/long-bow 0.1.82 → 0.1.85

package/src/mocks/itemContainer.mocks.ts

@@ -132,7 +132,7 @@ export const items: IItem[] = [
     updatedAt: '2022-06-04T18:16:49.056Z',
   },
   {
-    _id: '629acek4j7c8e8002ff60034',
+    _id: '629acek4j7c8e8002fg60034',
     type: ItemType.Consumable,
     subType: ItemSubType.Accessory,
     textureAtlas: 'items',

package/src/stories/Button.stories.tsx

@@ -0,0 +1,36 @@
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { Button, ButtonTypes, IButtonProps } from '../../src/components/Button';
+import { RPGUIRoot } from '../../src/components/RPGUIRoot';
+
+const meta: Meta = {
+  title: 'Button',
+  component: Button,
+  argTypes: {
+    children: {},
+    buttonType: {
+      control: {
+        type: 'select',
+        labels: {
+          [ButtonTypes.RPGUIButton]: 'rpgui-button',
+          [ButtonTypes.RPGUIGoldButton]: 'rpgui-button gold',
+        },
+      },
+    },
+  },
+};
+
+export default meta;
+
+const Template: Story<IButtonProps> = args => (
+  <RPGUIRoot>
+    <Button {...args} />
+  </RPGUIRoot>
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  children: 'Teste',
+  buttonType: ButtonTypes.RPGUIButton,
+};

package/src/stories/Chat.stories.tsx

@@ -0,0 +1,170 @@
+import { ChatMessageType, IChatMessage } from '@rpg-engine/shared';
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { Chat } from '../../src/components/Chat/Chat';
+import { RPGUIRoot } from '../../src/components/RPGUIRoot';
+
+const meta: Meta = {
+  title: 'Chat',
+  component: Chat,
+};
+
+export default meta;
+
+const chatMessagesMock = [
+  {
+    _id: 'test-id-1',
+    message: 'test message',
+    emitter: {
+      _id: 'someid',
+      name: 'Guilherme',
+    },
+    type: ChatMessageType.Global,
+    x: 128,
+    y: 128,
+    scene: 'MainScene',
+    createdAt: '2020-08-20T16:00:00.000Z',
+    updatedAt: '2020-08-20T16:00:00.000Z',
+  },
+  {
+    _id: 'test-id-1',
+    message: 'test message',
+    emitter: {
+      _id: 'someid',
+      name: 'Guilherme',
+    },
+    type: ChatMessageType.Global,
+    x: 128,
+    y: 128,
+    scene: 'MainScene',
+    createdAt: '2020-08-20T16:00:00.000Z',
+    updatedAt: '2020-08-20T16:00:00.000Z',
+  },
+  {
+    _id: 'test-id-2',
+    message: 'Good morning!',
+    emitter: {
+      _id: 'someid',
+      name: 'Guilherme',
+    },
+    type: ChatMessageType.Global,
+    x: 128,
+    y: 128,
+    scene: 'MainScene',
+    createdAt: '2020-08-20T16:00:00.000Z',
+    updatedAt: '2020-08-20T16:00:00.000Z',
+  },
+  {
+    _id: 'test-id-3',
+    message: 'How are you doing?',
+    emitter: {
+      _id: 'someid',
+      name: 'Guilherme',
+    },
+    type: ChatMessageType.Global,
+    x: 128,
+    y: 128,
+    scene: 'MainScene',
+    createdAt: '2020-08-20T16:00:00.000Z',
+    updatedAt: '2020-08-20T16:00:00.000Z',
+  },
+  {
+    _id: 'test-id-4',
+    message: 'Hey hey hey!!!',
+    emitter: {
+      _id: 'someid',
+      name: 'Guilherme',
+    },
+    type: ChatMessageType.Global,
+    x: 128,
+    y: 128,
+    scene: 'MainScene',
+    createdAt: '2020-08-20T16:00:00.000Z',
+    updatedAt: '2020-08-20T16:00:00.000Z',
+  },
+  {
+    _id: 'test-id-5',
+    message: 'BITCONNEEEEEEEEECT!',
+    emitter: {
+      _id: 'someid',
+      name: 'Guilherme',
+    },
+    type: ChatMessageType.Global,
+    x: 128,
+    y: 128,
+    scene: 'MainScene',
+    createdAt: '2020-08-20T16:00:00.000Z',
+    updatedAt: '2020-08-20T16:00:00.000Z',
+  },
+  {
+    _id: 'test-id-6',
+    message: 'BITCONNEEEEEEEEECT!',
+    emitter: {
+      _id: 'someid',
+      name: 'Guilherme',
+    },
+    type: ChatMessageType.Global,
+    x: 128,
+    y: 128,
+    scene: 'MainScene',
+    createdAt: '2020-08-20T16:00:00.000Z',
+    updatedAt: '2020-08-20T16:00:00.000Z',
+  },
+  {
+    _id: 'test-id-7',
+    message: 'BITCONNEEEEEEEEECT!',
+    emitter: {
+      _id: 'someid',
+      name: 'Guilherme',
+    },
+    type: ChatMessageType.Global,
+    x: 128,
+    y: 128,
+    scene: 'MainScene',
+    createdAt: '2020-08-20T16:00:00.000Z',
+    updatedAt: '2020-08-20T16:00:00.000Z',
+  },
+  {
+    _id: 'test-id-8',
+    message: 'BITCONNEEEEEEEEECT!',
+    emitter: {
+      _id: 'someid',
+      name: 'Guilherme',
+    },
+    type: ChatMessageType.Global,
+    x: 128,
+    y: 128,
+    scene: 'MainScene',
+    createdAt: '2020-08-20T16:00:00.000Z',
+    updatedAt: '2020-08-20T16:00:00.000Z',
+  },
+  {
+    _id: 'test-id-9',
+    message: 'BITCONNEEEEEEEEECT!',
+    emitter: {
+      _id: 'someid',
+      name: 'Guilherme',
+    },
+    type: ChatMessageType.Global,
+    x: 128,
+    y: 128,
+    scene: 'MainScene',
+    createdAt: '2020-08-20T16:00:00.000Z',
+    updatedAt: '2020-08-20T16:00:00.000Z',
+  },
+];
+
+const Template: Story<IChatMessage> = args => (
+  <RPGUIRoot>
+    <Chat
+      onSendChatMessage={msg => console.log(msg)}
+      chatMessages={chatMessagesMock}
+      opacity={0.5}
+      height={'200px'}
+      onCloseButton={() => console.log('closing chat...')}
+      {...args}
+    />
+  </RPGUIRoot>
+);
+
+export const Default = Template.bind({});

package/src/stories/CheckButton.stories.tsx

@@ -0,0 +1,48 @@
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import {
+  CheckButton,
+  ICheckItems,
+  ICheckProps,
+} from '../../src/components/CheckButton';
+import {
+  RPGUIContainer,
+  RPGUIContainerTypes,
+} from '../../src/components/RPGUIContainer';
+import { RPGUIRoot } from '../../src/components/RPGUIRoot';
+
+const meta: Meta = {
+  title: 'Check Input',
+  component: CheckButton,
+};
+
+export default meta;
+
+const Template: Story<ICheckProps> = args => (
+  <RPGUIRoot>
+    <RPGUIContainer type={RPGUIContainerTypes.Framed}>
+      <CheckButton {...args} />
+    </RPGUIContainer>
+  </RPGUIRoot>
+);
+
+export const Default = Template.bind({});
+
+const items: ICheckItems[] = [
+  {
+    label: 'label1',
+    value: 'value1',
+  },
+  {
+    label: 'label2',
+    value: 'value2',
+  },
+  {
+    label: 'label3',
+    value: 'value3',
+  },
+];
+
+Default.args = {
+  items,
+};

package/src/stories/DraggableContainer.stories.tsx

@@ -0,0 +1,28 @@
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import {
+  DraggableContainer,
+  IDraggableContainerProps,
+} from '../../src/components/DraggableContainer';
+import { RPGUIRoot } from '../../src/components/RPGUIRoot';
+
+const meta: Meta = {
+  title: 'Draggable Container',
+  component: DraggableContainer,
+};
+
+export default meta;
+
+const Template: Story<IDraggableContainerProps> = args => (
+  <RPGUIRoot>
+    <DraggableContainer {...args} />
+  </RPGUIRoot>
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  title: 'Example',
+  onCloseButton: () => console.log('closing'),
+  children: <p>This is a draggable container!</p>,
+};

package/src/stories/Dropdown.stories.tsx

@@ -0,0 +1,46 @@
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { RPGUIRoot } from '../../src';
+import {
+  Dropdown,
+  IDropdownProps,
+  IOptionsProps,
+} from '../../src/components/Dropdown';
+
+const meta: Meta = {
+  title: 'Dropdown',
+  component: Dropdown,
+};
+
+export default meta;
+
+const Template: Story<IDropdownProps> = args => (
+  <RPGUIRoot>
+    <Dropdown {...args} />
+  </RPGUIRoot>
+);
+
+export const Default = Template.bind({});
+
+const options: IOptionsProps[] = [
+  {
+    id: 1,
+    value: 'Human',
+    option: 'Human',
+  },
+  {
+    id: 2,
+    value: 'Elfo',
+    option: 'Elfo',
+  },
+  {
+    id: 3,
+    value: 'Dragão',
+    option: 'Dragão',
+  },
+];
+
+Default.args = {
+  options,
+  width: '100%',
+};

package/src/stories/EquipmentSet.stories.tsx

@@ -0,0 +1,50 @@
+import { IItem } from '@rpg-engine/shared';
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import {
+  EquipmentSet,
+  IEquipmentSetProps,
+} from '../../src/components/Equipment/EquipmentSet';
+import { RPGUIRoot } from '../../src/components/RPGUIRoot';
+import { equipmentSetMock } from '../../src/mocks/equipmentSet.mocks';
+import { SlotContainerType } from '../components/Item/Inventory/ItemContainerTypes';
+
+const meta: Meta = {
+  title: 'Equipment Set',
+  component: EquipmentSet,
+};
+
+export default meta;
+
+const onMouseOver = (event: any, slotIndex: number, item: IItem | null) => {
+  if (!item) {
+    console.log(`Free at ${slotIndex},${event}`);
+    return;
+  }
+};
+
+const onItemClick = (
+  item: IItem,
+  slotContainerType: SlotContainerType | null
+) => {
+  console.log(item, slotContainerType, 'was clicked!');
+};
+
+const onSelected = (payload: string) => {
+  console.log('dispatch', payload);
+};
+
+const Template: Story<IEquipmentSetProps> = args => (
+  <RPGUIRoot>
+    <EquipmentSet
+      {...args}
+      equipmentSet={equipmentSetMock}
+      onClose={() => console.log('closing Equipment Set Container')}
+      onMouseOver={onMouseOver}
+      onSelected={onSelected}
+      onItemClick={onItemClick}
+    />
+  </RPGUIRoot>
+);
+
+export const Default = Template.bind({});

package/src/stories/ItemContainer.stories.tsx

@@ -0,0 +1,50 @@
+import { IItem } from '@rpg-engine/shared';
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import {
+  IItemContainerProps,
+  ItemContainer,
+} from '../../src/components/Item/Inventory/ItemContainer';
+import { RPGUIRoot } from '../../src/components/RPGUIRoot';
+import { itemContainerMock } from '../../src/mocks/itemContainer.mocks';
+import { SlotContainerType } from '../components/Item/Inventory/ItemContainerTypes';
+
+const meta: Meta = {
+  title: 'Item Container',
+  component: ItemContainer,
+};
+
+export default meta;
+
+const onMouseOver = (_event: any, slotIndex: number, item: IItem | null) => {
+  if (!item) {
+    // console.log(`Free at ${slotIndex}` )
+    return;
+  }
+  console.log(`${item.name} at ${slotIndex}`);
+};
+
+const onSelected = (payload: any) => {
+  console.log('dispatch', payload);
+};
+
+const onItemClick = (
+  item: IItem,
+  slotContainerType: SlotContainerType | null
+) => {
+  console.log(item, slotContainerType, 'was clicked!');
+};
+
+const Template: Story<IItemContainerProps> = () => (
+  <RPGUIRoot>
+    <ItemContainer
+      itemContainer={itemContainerMock}
+      onClose={() => console.log('closing item container')}
+      onMouseOver={onMouseOver}
+      onSelected={onSelected}
+      onItemClick={onItemClick}
+    />
+  </RPGUIRoot>
+);
+
+export const Default = Template.bind({});

package/src/stories/ListMenu.stories.tsx

@@ -0,0 +1,56 @@
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { IListMenuProps, ListMenu } from '../../src/components/ListMenu';
+import { RPGUIRoot } from '../../src/components/RPGUIRoot';
+
+const meta: Meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docsreact/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List Menu',
+  component: ListMenu,
+  argTypes: {},
+};
+
+export default meta;
+
+//👇 We create a “template” of how args map to rendering "Blacksmith","Merchant","City Guard","Explorer"
+const Template: Story<IListMenuProps> = args => (
+  <RPGUIRoot>
+    <ListMenu {...args} />
+  </RPGUIRoot>
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  // x: 100,
+  // y: 100,
+  options: [
+    {
+      id: 'blacksmith',
+      text: 'Huge option added here',
+    },
+    {
+      text: 'Merchant',
+      id: 'merchant',
+    },
+    {
+      text: 'City Guard',
+      id: 'city-guard',
+    },
+    {
+      text: 'Explorer',
+      id: 'explorer',
+    },
+    {
+      text: 'Royalty',
+      id: 'royalty',
+    },
+    {
+      text: 'Gladiator',
+      id: 'gladiator',
+    },
+  ],
+};

package/src/stories/Multitab.stories.tsx

@@ -0,0 +1,51 @@
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { TabBody } from '../../src/components/Multitab/TabBody';
+import {
+  ITabsContainer,
+  MultitabType,
+  TabsContainer,
+} from '../../src/components/Multitab/TabsContainer';
+import { RPGUIRoot } from '../../src/components/RPGUIRoot';
+
+const meta: Meta = {
+  title: 'MultiTabs',
+  component: TabsContainer,
+};
+
+export default meta;
+
+const Template: Story<ITabsContainer> = args => (
+  <RPGUIRoot>
+    <TabsContainer {...args}>
+      <TabBody id="animal">
+        <p>Animals content here</p>
+      </TabBody>
+      <TabBody id="plant">
+        <p>Plant content here</p>
+      </TabBody>
+    </TabsContainer>
+  </RPGUIRoot>
+);
+
+export const Brown = Template.bind({});
+
+Brown.args = {
+  type: MultitabType.Brown,
+  onCloseButton: () => console.log('close tab'),
+  tabs: [
+    { label: 'Animal', id: 'animal' },
+    { label: 'Plant', id: 'plant' },
+  ],
+};
+
+export const Gray = Template.bind({});
+
+Gray.args = {
+  type: MultitabType.Gray,
+  onCloseButton: () => console.log('close tab'),
+  tabs: [
+    { label: 'Animal', id: 'animal' },
+    { label: 'Plant', id: 'plant' },
+  ],
+};

package/src/stories/NPCDialog.stories.tsx

@@ -0,0 +1,130 @@
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import {
+  INPCDialogProps,
+  NPCDialog,
+  NPCDialogType,
+} from '../../src/components/NPCDialog/NPCDialog';
+import {
+  IQuestionDialog,
+  IQuestionDialogAnswer,
+} from '../../src/components/NPCDialog/QuestionDialog/QuestionDialog';
+import { RPGUIRoot } from '../../src/components/RPGUIRoot';
+
+const meta: Meta = {
+  title: 'NPC Dialog',
+  component: NPCDialog,
+  argTypes: {
+    text: {
+      control: {
+        type: 'text',
+      },
+    },
+
+    type: {
+      control: {
+        type: 'select',
+        labels: {
+          [NPCDialogType.TextOnly]: 'Text Only',
+          [NPCDialogType.TextAndThumbnail]: 'Text and Thumbnail',
+        },
+      },
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+const Template: Story<INPCDialogProps> = args => (
+  <RPGUIRoot>
+    <NPCDialog {...args} />
+  </RPGUIRoot>
+);
+
+// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
+// https://storybook.js.org/docs/react/workflows/unit-testing
+export const TextAndThumbnail = Template.bind({});
+
+TextAndThumbnail.args = {
+  text: `This is a NPC dialog example. You can use it to show a dialog to the player. This is a NPC dialog example. You can use it to show a dialog to the player. This is a NPC dialog example. You can use it to show a dialog to the player. This is a NPC dialog example. You can use it to show a dialog to the player.`,
+  type: NPCDialogType.TextAndThumbnail,
+};
+
+export const TextOnly = Template.bind({});
+
+TextOnly.args = {
+  text: `This is a NPC dialog example. You can use it to show a dialog to the player. This is a NPC dialog example. You can use it to show a dialog to the player. This is a NPC dialog example. You can use it to show a dialog to the player. This is a NPC dialog example. You can use it to show a dialog to the player.`,
+  type: NPCDialogType.TextOnly,
+};
+
+export const Question = Template.bind({});
+
+const answers: IQuestionDialogAnswer[] = [
+  {
+    id: 1,
+    text: 'I have lived here all my life',
+    nextQuestionId: 2,
+  },
+  {
+    id: 2,
+    text: 'I came here from Newton',
+    nextQuestionId: 3,
+  },
+  {
+    id: 3,
+    text: 'Oops! I mean, SpringVille!',
+    nextQuestionId: 2,
+  },
+  {
+    id: 4,
+    text: 'I havent heard about any trouble',
+    nextQuestionId: 4,
+  },
+  {
+    id: 5,
+    text: 'Who came here to die',
+    nextQuestionId: 4,
+  },
+  {
+    id: 6,
+    text: 'Who came here to live',
+    nextQuestionId: 4,
+  },
+];
+
+const questions: IQuestionDialog[] = [
+  {
+    id: 1,
+    text: `You dont Look Like from around here. Aren't you?`,
+    answerIds: [1, 2],
+  },
+  {
+    id: 2,
+    text: 'Oh really!! then You must know my Bowler!',
+    answerIds: [5, 6],
+  },
+  {
+    id: 3,
+    text: 'Newton!! I heard there is trouble brewing down here!!',
+    answerIds: [3, 4],
+  },
+  {
+    id: 4,
+    text:
+      'Dont you worry about it, say thats you have something to eat. Im starving',
+  },
+  {
+    id: 5,
+    text: 'You are a liar! there aint mr Browler! I made it',
+  },
+];
+
+Question.args = {
+  type: NPCDialogType.TextAndThumbnail,
+  questions,
+  answers,
+  isQuestionDialog: true,
+};

package/src/stories/ProgressBar.stories.tsx

@@ -0,0 +1,23 @@
+import { Story } from '@storybook/react';
+import React from 'react';
+import { IBarProps, ProgressBar } from '../../src/components/ProgressBar';
+import { RPGUIRoot } from '../../src/components/RPGUIRoot';
+
+export default {
+  title: 'Progress Bar',
+  component: ProgressBar,
+};
+
+const Template: Story<IBarProps> = args => (
+  <RPGUIRoot>
+    <ProgressBar {...args} />
+  </RPGUIRoot>
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  max: 100,
+  value: 30,
+  color: 'blue',
+};