@rpg-engine/long-bow 0.3.49 → 0.3.51

package/src/stories/ItemContainer.stories.tsx

@@ -1,124 +1,124 @@
-import { IItem, ItemContainerType, ItemType } from '@rpg-engine/shared';
-import { Meta, Story } from '@storybook/react';
-import React, { useState } 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 atlasJSON from '../mocks/atlas/items/items.json';
-import atlasIMG from '../mocks/atlas/items/items.png';
-
-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!');
-};
-
-// THIS IS ONLY LONG-BOW EXAMPLE FOR DRAG AND DROP
-let dragItem: IItem | null = null;
-let dropItem: IItem | null = null;
-let allowedToDrop = false;
-let dragSlot = -1;
-let dropSlot = -1;
-
-const Template: Story<IItemContainerProps> = () => {
-  const [itemContainer, setItemContainer] = useState(itemContainerMock);
-
-  return (
-    <RPGUIRoot>
-      <ItemContainer
-        itemContainer={itemContainer}
-        onClose={() => console.log('closing item container')}
-        onMouseOver={onMouseOver}
-        onSelected={onSelected}
-        onItemClick={onItemClick}
-        checkIfItemCanBeMoved={() => allowedToDrop}
-        onItemDragEnd={quantity => {
-          // THIS IS ONLY LONG-BOW EXAMPLE FOR DRAG AND DROP
-
-          if (quantity === 0) {
-            setItemContainer({ ...itemContainer });
-          } else if (allowedToDrop && dropSlot !== -1) {
-            const newContainer = { ...itemContainer };
-
-            if (quantity && dragItem && dragItem.stackQty) {
-              newContainer.slots[dropSlot] = {
-                ...dragItem,
-                stackQty: quantity + (dropItem?.stackQty || 0),
-              };
-
-              if (dragItem.stackQty - quantity === 0)
-                newContainer.slots[dragSlot] = null;
-              else
-                newContainer.slots[dragSlot] = {
-                  ...dragItem,
-                  stackQty: dragItem.stackQty - quantity,
-                };
-            } else {
-              newContainer.slots[dropSlot] = dragItem;
-              newContainer.slots[dragSlot] = null;
-            }
-            setTimeout(() => {
-              setItemContainer(newContainer);
-            }, 100);
-          }
-
-          allowedToDrop = false;
-          dropSlot = -1;
-          dropItem = null;
-          dragItem = null;
-        }}
-        onItemDragStart={(item, slotIndex) => {
-          dragItem = item;
-          dragSlot = slotIndex;
-        }}
-        onItemPlaceDrop={(item, slotIndex) => {
-          // THIS IS ONLY LONG-BOW EXAMPLE FOR DRAG AND DROP
-
-          if (
-            !item ||
-            (dragItem?.key === item?.key && dragSlot !== slotIndex)
-          ) {
-            console.log('allow');
-            allowedToDrop = true;
-            dropSlot = slotIndex;
-            dropItem = item ? item : null;
-          } else {
-            allowedToDrop = false;
-            dropSlot = -1;
-            dropItem = null;
-          }
-        }}
-        onOutsideDrop={(item, pos) => console.log('drop', item, pos)}
-        type={ItemContainerType.Inventory}
-        atlasIMG={atlasIMG}
-        atlasJSON={atlasJSON}
-      />
-    </RPGUIRoot>
-  );
-};
-
-export const Default = Template.bind({});
+import { IItem, ItemContainerType, ItemType } from '@rpg-engine/shared';
+import { Meta, Story } from '@storybook/react';
+import React, { useState } 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 atlasJSON from '../mocks/atlas/items/items.json';
+import atlasIMG from '../mocks/atlas/items/items.png';
+
+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!');
+};
+
+// THIS IS ONLY LONG-BOW EXAMPLE FOR DRAG AND DROP
+let dragItem: IItem | null = null;
+let dropItem: IItem | null = null;
+let allowedToDrop = false;
+let dragSlot = -1;
+let dropSlot = -1;
+
+const Template: Story<IItemContainerProps> = () => {
+  const [itemContainer, setItemContainer] = useState(itemContainerMock);
+
+  return (
+    <RPGUIRoot>
+      <ItemContainer
+        itemContainer={itemContainer}
+        onClose={() => console.log('closing item container')}
+        onMouseOver={onMouseOver}
+        onSelected={onSelected}
+        onItemClick={onItemClick}
+        checkIfItemCanBeMoved={() => allowedToDrop}
+        onItemDragEnd={quantity => {
+          // THIS IS ONLY LONG-BOW EXAMPLE FOR DRAG AND DROP
+
+          if (quantity === 0) {
+            setItemContainer({ ...itemContainer });
+          } else if (allowedToDrop && dropSlot !== -1) {
+            const newContainer = { ...itemContainer };
+
+            if (quantity && dragItem && dragItem.stackQty) {
+              newContainer.slots[dropSlot] = {
+                ...dragItem,
+                stackQty: quantity + (dropItem?.stackQty || 0),
+              };
+
+              if (dragItem.stackQty - quantity === 0)
+                newContainer.slots[dragSlot] = null;
+              else
+                newContainer.slots[dragSlot] = {
+                  ...dragItem,
+                  stackQty: dragItem.stackQty - quantity,
+                };
+            } else {
+              newContainer.slots[dropSlot] = dragItem;
+              newContainer.slots[dragSlot] = null;
+            }
+            setTimeout(() => {
+              setItemContainer(newContainer);
+            }, 100);
+          }
+
+          allowedToDrop = false;
+          dropSlot = -1;
+          dropItem = null;
+          dragItem = null;
+        }}
+        onItemDragStart={(item, slotIndex) => {
+          dragItem = item;
+          dragSlot = slotIndex;
+        }}
+        onItemPlaceDrop={(item, slotIndex) => {
+          // THIS IS ONLY LONG-BOW EXAMPLE FOR DRAG AND DROP
+
+          if (
+            !item ||
+            (dragItem?.key === item?.key && dragSlot !== slotIndex)
+          ) {
+            console.log('allow');
+            allowedToDrop = true;
+            dropSlot = slotIndex;
+            dropItem = item ? item : null;
+          } else {
+            allowedToDrop = false;
+            dropSlot = -1;
+            dropItem = null;
+          }
+        }}
+        onOutsideDrop={(item, pos) => console.log('drop', item, pos)}
+        type={ItemContainerType.Inventory}
+        atlasIMG={atlasIMG}
+        atlasJSON={atlasJSON}
+      />
+    </RPGUIRoot>
+  );
+};
+
+export const Default = Template.bind({});

package/src/stories/ItemQuantitySelector.stories.tsx

@@ -1,26 +1,26 @@
-import { Meta, Story } from '@storybook/react';
-import React from 'react';
-import { RPGUIRoot } from '..';
-import {
-  IItemQuantitySelectorProps,
-  ItemQuantitySelector,
-} from '../components/Item/Inventory/ItemQuantitySelector';
-
-const meta: Meta = {
-  title: 'Item Quantity Selector',
-  component: ItemQuantitySelector,
-};
-
-export default meta;
-
-const Template: Story<IItemQuantitySelectorProps> = args => (
-  <RPGUIRoot>
-    <ItemQuantitySelector {...args} />
-  </RPGUIRoot>
-);
-
-export const Default = Template.bind({});
-
-Default.args = {
-  quantity: 10,
-};
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { RPGUIRoot } from '..';
+import {
+  IItemQuantitySelectorProps,
+  ItemQuantitySelector,
+} from '../components/Item/Inventory/ItemQuantitySelector';
+
+const meta: Meta = {
+  title: 'Item Quantity Selector',
+  component: ItemQuantitySelector,
+};
+
+export default meta;
+
+const Template: Story<IItemQuantitySelectorProps> = args => (
+  <RPGUIRoot>
+    <ItemQuantitySelector {...args} />
+  </RPGUIRoot>
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  quantity: 10,
+};

package/src/stories/ItemSelector.stories.tsx

@@ -1,77 +1,77 @@
-import { Meta, Story } from '@storybook/react';
-import React from 'react';
-import { RPGUIRoot } from '..';
-import {
-  IOptionsItemSelectorProps,
-  ItemSelector,
-} from '../components/itemSelector/ItemSelector';
-import atlasJSON from '../mocks/atlas/items/items.json';
-import atlasIMG from '../mocks/atlas/items/items.png';
-
-const meta: Meta = {
-  title: 'Item Selector',
-  component: ItemSelector,
-};
-
-export default meta;
-
-const Template: Story = args => (
-  <RPGUIRoot>
-    <ItemSelector
-      atlasIMG={atlasIMG}
-      atlasJSON={atlasJSON}
-      options={options}
-      onSelect={onSelect}
-      onClose={() => console.log('closing Equipment Set Container')}
-      {...args}
-    />
-  </RPGUIRoot>
-);
-
-export const Default = Template.bind({});
-
-const onSelect = (value: string): void => {
-  console.log('Story package', value);
-};
-
-const options: IOptionsItemSelectorProps[] = [
-  {
-    name: 'Human',
-    description: 'Human',
-    imageKey: 'axes/frost-double-axe.png',
-  },
-  {
-    name: 'Human',
-    description: 'Human',
-    imageKey: 'maces/spiked-club.png',
-  },
-  {
-    name: 'Human2',
-    description: 'Human2',
-    imageKey: 'axes/frost-double-axe.png',
-  },
-  {
-    name: 'Human3',
-    description: 'Human3',
-    imageKey: 'maces/spiked-club.png',
-  },
-  {
-    name: 'Human4',
-    description: 'Human4',
-    imageKey: 'axes/frost-double-axe.png',
-  },
-  {
-    name: 'Human5',
-    description: 'Human5',
-    imageKey: 'maces/spiked-club.png',
-  },
-  {
-    name: 'Human6',
-    description: 'Human6',
-    imageKey: 'axes/frost-double-axe.png',
-  },
-];
-
-Default.args = {
-  options,
-};
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { RPGUIRoot } from '..';
+import {
+  IOptionsItemSelectorProps,
+  ItemSelector,
+} from '../components/itemSelector/ItemSelector';
+import atlasJSON from '../mocks/atlas/items/items.json';
+import atlasIMG from '../mocks/atlas/items/items.png';
+
+const meta: Meta = {
+  title: 'Item Selector',
+  component: ItemSelector,
+};
+
+export default meta;
+
+const Template: Story = args => (
+  <RPGUIRoot>
+    <ItemSelector
+      atlasIMG={atlasIMG}
+      atlasJSON={atlasJSON}
+      options={options}
+      onSelect={onSelect}
+      onClose={() => console.log('closing Equipment Set Container')}
+      {...args}
+    />
+  </RPGUIRoot>
+);
+
+export const Default = Template.bind({});
+
+const onSelect = (value: string): void => {
+  console.log('Story package', value);
+};
+
+const options: IOptionsItemSelectorProps[] = [
+  {
+    name: 'Human',
+    description: 'Human',
+    imageKey: 'axes/frost-double-axe.png',
+  },
+  {
+    name: 'Human',
+    description: 'Human',
+    imageKey: 'maces/spiked-club.png',
+  },
+  {
+    name: 'Human2',
+    description: 'Human2',
+    imageKey: 'axes/frost-double-axe.png',
+  },
+  {
+    name: 'Human3',
+    description: 'Human3',
+    imageKey: 'maces/spiked-club.png',
+  },
+  {
+    name: 'Human4',
+    description: 'Human4',
+    imageKey: 'axes/frost-double-axe.png',
+  },
+  {
+    name: 'Human5',
+    description: 'Human5',
+    imageKey: 'maces/spiked-club.png',
+  },
+  {
+    name: 'Human6',
+    description: 'Human6',
+    imageKey: 'axes/frost-double-axe.png',
+  },
+];
+
+Default.args = {
+  options,
+};

package/src/stories/ItemTradingComponent.stories.tsx

@@ -1,35 +1,35 @@
-import { ITradeResponseItem } from '@rpg-engine/shared';
-import { Meta } from '@storybook/react';
-import React, { useState } from 'react';
-import { RPGUIRoot } from '../components/RPGUIRoot';
-import { itemMock } from '../components/TradingMenu/items.mock';
-import { TradingItemRow } from '../components/TradingMenu/TradingItemRow';
-import atlasJSON from '../mocks/atlas/items/items.json';
-import atlasIMG from '../mocks/atlas/items/items.png';
-
-const meta: Meta = {
-  title: 'Trading Item',
-  component: TradingItemRow,
-};
-export default meta;
-
-export const Default = () => {
-  const [selectedQty, setSelectedQty] = useState(0);
-
-  const handleOnChange = (item: ITradeResponseItem, qty: number) => {
-    console.log(item);
-    setSelectedQty(qty);
-  };
-
-  return (
-    <RPGUIRoot>
-      <TradingItemRow
-        atlasIMG={atlasIMG}
-        atlasJSON={atlasJSON}
-        onQuantityChange={handleOnChange}
-        selectedQty={selectedQty}
-        traderItem={itemMock[0]}
-      />
-    </RPGUIRoot>
-  );
-};
+import { ITradeResponseItem } from '@rpg-engine/shared';
+import { Meta } from '@storybook/react';
+import React, { useState } from 'react';
+import { RPGUIRoot } from '../components/RPGUIRoot';
+import { itemMock } from '../components/TradingMenu/items.mock';
+import { TradingItemRow } from '../components/TradingMenu/TradingItemRow';
+import atlasJSON from '../mocks/atlas/items/items.json';
+import atlasIMG from '../mocks/atlas/items/items.png';
+
+const meta: Meta = {
+  title: 'Trading Item',
+  component: TradingItemRow,
+};
+export default meta;
+
+export const Default = () => {
+  const [selectedQty, setSelectedQty] = useState(0);
+
+  const handleOnChange = (item: ITradeResponseItem, qty: number) => {
+    console.log(item);
+    setSelectedQty(qty);
+  };
+
+  return (
+    <RPGUIRoot>
+      <TradingItemRow
+        atlasIMG={atlasIMG}
+        atlasJSON={atlasJSON}
+        onQuantityChange={handleOnChange}
+        selectedQty={selectedQty}
+        traderItem={itemMock[0]}
+      />
+    </RPGUIRoot>
+  );
+};

package/src/stories/ListMenu.stories.tsx

@@ -1,56 +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',
-    },
-  ],
-};
+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',
+    },
+  ],
+};