@rpg-engine/long-bow 0.4.81 → 0.4.82

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

package/src/stories/Marketplace.stories.tsx

@@ -1,53 +1,57 @@
-import { Meta, Story } from '@storybook/react';
-import React from 'react';
-import { RPGUIRoot } from '..';
-import { Marketplace } from '../components/Marketplace/Marketplace';
-import atlasJSON from '../mocks/atlas/items/items.json';
-import atlasIMG from '../mocks/atlas/items/items.png';
-import { equipmentSetMock } from '../mocks/equipmentSet.mocks';
-import { items } from '../mocks/itemContainer.mocks';
-
-const meta: Meta = {
-  title: 'Marketplace',
-  component: Marketplace,
-};
-
-export default meta;
-
-const Template: Story = () => (
-  <RPGUIRoot>
-    <Marketplace
-      onChangeOrder={value => console.log(value)}
-      onChangeRarity={value => console.log(value)}
-      onChangeType={value => console.log(value)}
-      onChangeNameInput={event => console.log(event)}
-      onChangePriceInput={value => console.log(value)}
-      onChangeMainLevelInput={value => console.log(value)}
-      onChangeSecondaryLevelInput={value => console.log(value)}
-      atlasIMG={atlasIMG}
-      atlasJSON={atlasJSON}
-      onClose={() => console.log('close')}
-      items={items.map(item => ({
-        item,
-        price: Math.round(Math.random() * 1000),
-        _id: Math.random().toString(),
-        owner: Math.random().toString(),
-      }))}
-      equipmentSet={equipmentSetMock}
-      onMarketPlaceItemBuy={tradeId => console.log(tradeId)}
-      availableGold={0}
-      selectedItemToSell={null}
-      onSelectedItemToSellRemove={() => console.log('click')}
-      onYourPanelToggle={() => console.log('toggle')}
-      onAddItemToMarketplace={() => console.log('add')}
-      characterId="1"
-      onMoneyWithdraw={() => console.log('withdraw')}
-      totalItems={100}
-      currentPage={1}
-      itemsPerPage={30}
-      onPageChange={page => console.log(page)}
-    />
-  </RPGUIRoot>
-);
-
-export const Default = Template.bind({});
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { RPGUIRoot } from '..';
+import { Marketplace } from '../components/Marketplace/Marketplace';
+import atlasJSON from '../mocks/atlas/items/items.json';
+import atlasIMG from '../mocks/atlas/items/items.png';
+import { equipmentSetMock } from '../mocks/equipmentSet.mocks';
+import { items } from '../mocks/itemContainer.mocks';
+
+const meta: Meta = {
+  title: 'Marketplace',
+  component: Marketplace,
+};
+
+export default meta;
+
+const Template: Story = () => {
+  const [page, setPage] = React.useState(1);
+
+  return (
+    <RPGUIRoot>
+      <Marketplace
+        onChangeOrder={value => console.log(value)}
+        onChangeRarity={value => console.log(value)}
+        onChangeType={value => console.log(value)}
+        onChangeNameInput={event => console.log(event)}
+        onChangePriceInput={value => console.log(value)}
+        onChangeMainLevelInput={value => console.log(value)}
+        onChangeSecondaryLevelInput={value => console.log(value)}
+        atlasIMG={atlasIMG}
+        atlasJSON={atlasJSON}
+        onClose={() => console.log('close')}
+        items={items.map(item => ({
+          item,
+          price: Math.round(Math.random() * 1000),
+          _id: Math.random().toString(),
+          owner: Math.random().toString(),
+        }))}
+        equipmentSet={equipmentSetMock}
+        onMarketPlaceItemBuy={tradeId => console.log(tradeId)}
+        availableGold={0}
+        selectedItemToSell={null}
+        onSelectedItemToSellRemove={() => console.log('click')}
+        onYourPanelToggle={() => console.log('toggle')}
+        onAddItemToMarketplace={() => console.log('add')}
+        characterId="1"
+        onMoneyWithdraw={() => console.log('withdraw')}
+        totalItems={100}
+        currentPage={page}
+        itemsPerPage={30}
+        onPageChange={setPage}
+      />
+    </RPGUIRoot>
+  );
+};
+
+export const Default = Template.bind({});

package/src/stories/MarketplaceRows.stories.tsx

@@ -1,27 +1,27 @@
-import { Meta, Story } from '@storybook/react';
-import React from 'react';
-import { RPGUIRoot } from '..';
-import { MarketplaceRows } from '../components/Marketplace/MarketplaceRows';
-import atlasJSON from '../mocks/atlas/items/items.json';
-import atlasIMG from '../mocks/atlas/items/items.png';
-import { items } from '../mocks/itemContainer.mocks';
-
-const meta: Meta = {
-  title: 'MarketplaceRows',
-  component: MarketplaceRows,
-};
-
-export default meta;
-
-const Template: Story = () => (
-  <RPGUIRoot>
-    <MarketplaceRows
-      atlasIMG={atlasIMG}
-      atlasJSON={atlasJSON}
-      itemPrice={10}
-      item={items[0]}
-    />
-  </RPGUIRoot>
-);
-
-export const Default = Template.bind({});
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { RPGUIRoot } from '..';
+import { MarketplaceRows } from '../components/Marketplace/MarketplaceRows';
+import atlasJSON from '../mocks/atlas/items/items.json';
+import atlasIMG from '../mocks/atlas/items/items.png';
+import { items } from '../mocks/itemContainer.mocks';
+
+const meta: Meta = {
+  title: 'MarketplaceRows',
+  component: MarketplaceRows,
+};
+
+export default meta;
+
+const Template: Story = () => (
+  <RPGUIRoot>
+    <MarketplaceRows
+      atlasIMG={atlasIMG}
+      atlasJSON={atlasJSON}
+      itemPrice={10}
+      item={items[0]}
+    />
+  </RPGUIRoot>
+);
+
+export const Default = Template.bind({});

package/src/stories/Multitab.stories.tsx

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