@rpg-engine/long-bow 0.1.794 → 0.2.2

package/src/mocks/skills.mocks.ts

@@ -1,122 +1,122 @@
-import { SkillType } from '@rpg-engine/shared';
-
-export const skillMock = {
-  _id: '62aebda8785a9f0089a4f757',
-  stamina: {
-    type: SkillType.BasicAttributes,
-    level: 1,
-    skillPoints: 10,
-    skillPointsToNextLevel: 80,
-  },
-  magic: {
-    type: SkillType.BasicAttributes,
-    level: 1,
-    skillPoints: 22,
-    skillPointsToNextLevel: 80,
-  },
-  magicResistance: {
-    type: SkillType.BasicAttributes,
-    level: 1,
-    skillPoints: 13,
-    skillPointsToNextLevel: 80,
-  },
-  strength: {
-    type: SkillType.BasicAttributes,
-    level: 1,
-    skillPoints: 14,
-    skillPointsToNextLevel: 80,
-  },
-  resistance: {
-    type: SkillType.BasicAttributes,
-    level: 1,
-    skillPoints: 5,
-    skillPointsToNextLevel: 80,
-  },
-  dexterity: {
-    type: SkillType.BasicAttributes,
-    level: 1,
-    skillPoints: 52,
-    skillPointsToNextLevel: 80,
-  },
-  first: {
-    type: SkillType.Combat,
-    level: 1,
-    skillPoints: 22,
-    skillPointsToNextLevel: 80,
-  },
-  club: {
-    type: SkillType.Combat,
-    level: 1,
-    skillPoints: 12,
-    skillPointsToNextLevel: 80,
-  },
-  sword: {
-    type: SkillType.Combat,
-    level: 1,
-    skillPoints: 3,
-    skillPointsToNextLevel: 80,
-  },
-  dagger: {
-    type: SkillType.Combat,
-    level: 1,
-    skillPoints: 3,
-    skillPointsToNextLevel: 80,
-  },
-  axe: {
-    type: SkillType.Combat,
-    level: 1,
-    skillPoints: 45,
-    skillPointsToNextLevel: 80,
-  },
-  distance: {
-    type: SkillType.Combat,
-    level: 1,
-    skillPoints: 23,
-    skillPointsToNextLevel: 80,
-  },
-  shielding: {
-    type: SkillType.Combat,
-    level: 1,
-    skillPoints: 12,
-    skillPointsToNextLevel: 80,
-  },
-  fishing: {
-    type: SkillType.Gathering,
-    level: 1,
-    skillPoints: 5,
-    skillPointsToNextLevel: 80,
-  },
-  mining: {
-    type: SkillType.Crafting,
-    level: 1,
-    skillPoints: 3,
-    skillPointsToNextLevel: 80,
-  },
-  lumberjacking: {
-    type: SkillType.Crafting,
-    level: 1,
-    skillPoints: 2,
-    skillPointsToNextLevel: 80,
-  },
-  cooking: {
-    type: SkillType.Crafting,
-    level: 1,
-    skillPoints: 10,
-    skillPointsToNextLevel: 80,
-  },
-  alchemy: {
-    type: SkillType.Crafting,
-    level: 1,
-    skillPoints: 2,
-    skillPointsToNextLevel: 80,
-  },
-  level: 1,
-  xpGainRate: 100,
-  experience: 0,
-  xpToNextLevel: 40,
-  ownerType: 'NPC',
-  owner: '62aebda8785a9f0089a4f758',
-  createdAt: '2022-06-19T06:09:44.661Z',
-  updatedAt: '2022-06-19T06:09:44.661Z',
-  __v: 0,
-};
+import { SkillType } from '@rpg-engine/shared';
+
+export const skillMock = {
+  _id: '62aebda8785a9f0089a4f757',
+  stamina: {
+    type: SkillType.BasicAttributes,
+    level: 1,
+    skillPoints: 10,
+    skillPointsToNextLevel: 80,
+  },
+  magic: {
+    type: SkillType.BasicAttributes,
+    level: 1,
+    skillPoints: 22,
+    skillPointsToNextLevel: 80,
+  },
+  magicResistance: {
+    type: SkillType.BasicAttributes,
+    level: 1,
+    skillPoints: 13,
+    skillPointsToNextLevel: 80,
+  },
+  strength: {
+    type: SkillType.BasicAttributes,
+    level: 1,
+    skillPoints: 14,
+    skillPointsToNextLevel: 80,
+  },
+  resistance: {
+    type: SkillType.BasicAttributes,
+    level: 1,
+    skillPoints: 5,
+    skillPointsToNextLevel: 80,
+  },
+  dexterity: {
+    type: SkillType.BasicAttributes,
+    level: 1,
+    skillPoints: 52,
+    skillPointsToNextLevel: 80,
+  },
+  first: {
+    type: SkillType.Combat,
+    level: 1,
+    skillPoints: 22,
+    skillPointsToNextLevel: 80,
+  },
+  club: {
+    type: SkillType.Combat,
+    level: 1,
+    skillPoints: 12,
+    skillPointsToNextLevel: 80,
+  },
+  sword: {
+    type: SkillType.Combat,
+    level: 1,
+    skillPoints: 3,
+    skillPointsToNextLevel: 80,
+  },
+  dagger: {
+    type: SkillType.Combat,
+    level: 1,
+    skillPoints: 3,
+    skillPointsToNextLevel: 80,
+  },
+  axe: {
+    type: SkillType.Combat,
+    level: 1,
+    skillPoints: 45,
+    skillPointsToNextLevel: 80,
+  },
+  distance: {
+    type: SkillType.Combat,
+    level: 1,
+    skillPoints: 23,
+    skillPointsToNextLevel: 80,
+  },
+  shielding: {
+    type: SkillType.Combat,
+    level: 1,
+    skillPoints: 12,
+    skillPointsToNextLevel: 80,
+  },
+  fishing: {
+    type: SkillType.Gathering,
+    level: 1,
+    skillPoints: 5,
+    skillPointsToNextLevel: 80,
+  },
+  mining: {
+    type: SkillType.Crafting,
+    level: 1,
+    skillPoints: 3,
+    skillPointsToNextLevel: 80,
+  },
+  lumberjacking: {
+    type: SkillType.Crafting,
+    level: 1,
+    skillPoints: 2,
+    skillPointsToNextLevel: 80,
+  },
+  cooking: {
+    type: SkillType.Crafting,
+    level: 1,
+    skillPoints: 10,
+    skillPointsToNextLevel: 80,
+  },
+  alchemy: {
+    type: SkillType.Crafting,
+    level: 1,
+    skillPoints: 2,
+    skillPointsToNextLevel: 80,
+  },
+  level: 1,
+  xpGainRate: 100,
+  experience: 0,
+  xpToNextLevel: 40,
+  ownerType: 'NPC',
+  owner: '62aebda8785a9f0089a4f758',
+  createdAt: '2022-06-19T06:09:44.661Z',
+  updatedAt: '2022-06-19T06:09:44.661Z',
+  __v: 0,
+};

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,51 @@
+import { IItem, ItemContainerType, ItemType } 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';
+
+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 = (
+  ItemType: ItemType,
+  item: IItem,
+  itemContainerType: ItemContainerType | null
+) => {
+  console.log(item, ItemType, itemContainerType, '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}
+      type={ItemContainerType.Equipment}
+    />
+  </RPGUIRoot>
+);
+
+export const Default = Template.bind({});

package/src/stories/ItemContainer.stories.tsx

@@ -0,0 +1,51 @@
+import { IItem, ItemContainerType, ItemType } 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';
+
+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: string, item: IItem) => {
+  console.log('onSelected', payload, item);
+};
+
+const onItemClick = (
+  item: IItem,
+  ItemType: ItemType,
+  itemContainerType: ItemContainerType | null
+) => {
+  console.log(item, ItemType, itemContainerType, 'was clicked!');
+};
+
+const Template: Story<IItemContainerProps> = () => (
+  <RPGUIRoot>
+    <ItemContainer
+      itemContainer={itemContainerMock}
+      onClose={() => console.log('closing item container')}
+      onMouseOver={onMouseOver}
+      onSelected={onSelected}
+      onItemClick={onItemClick}
+      type={ItemContainerType.Inventory}
+    />
+  </RPGUIRoot>
+);
+
+export const Default = Template.bind({});