@rpg-engine/long-bow 0.8.141 → 0.8.145

package/src/mocks/itemContainer.mocks.ts

@@ -650,6 +650,37 @@ export const items: IItem[] = [
     fullDescription: '',
     usableEffectDescription: 'Regenerates 10 HP and Mana 5 times',
   },
+  {
+    type: ItemType.Consumable,
+    subType: ItemSubType.Food,
+    rarity: 'Common',
+    textureAtlas: 'items',
+    allowedEquipSlotType: [],
+    maxStackSize: 100000,
+    isUsable: false,
+    isStorable: true,
+    isItemContainer: false,
+    isSolid: false,
+    requiredAmmoKeys: [],
+    isTwoHanded: false,
+    hasUseWith: false,
+    entityEffects: [],
+    entityEffectChance: 0,
+    _id: '99999-stack-test',
+    key: 'apple',
+    texturePath: 'foods/apple.png',
+    textureKey: 'apple',
+    isEquipable: false,
+    isStackable: true,
+    name: 'Apple',
+    description: 'A red apple.',
+    weight: 0.05,
+    stackQty: 99999,
+    attack: 0,
+    defense: 0,
+    fullDescription: '',
+    usableEffectDescription: 'Regenerates 10 HP and Mana 5 times',
+  },
 ];
 
 export const itemContainerMock = (

package/src/stories/Features/marketplace/BlueprintSearchModal.stories.tsx

@@ -0,0 +1,145 @@
+import { IMarketplaceBlueprintSearchRequest, IMarketplaceBlueprintSummary } from '@rpg-engine/shared';
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { BlueprintSearchModal } from '../../../components/Marketplace/BlueprintSearchModal';
+import { RPGUIRoot } from '../../../components/RPGUI/RPGUIRoot';
+import itemsAtlasJSON from '../../../mocks/atlas/items/items.json';
+import itemsAtlasIMG from '../../../mocks/atlas/items/items.png';
+
+const meta = {
+  title: 'Features/Marketplace/BlueprintSearchModal',
+  component: BlueprintSearchModal,
+  parameters: {
+    layout: 'centered',
+  },
+  decorators: [
+    (Story) => (
+      <RPGUIRoot>
+        <div style={{ width: '800px', height: '600px', position: 'relative' }}>
+          <Story />
+        </div>
+      </RPGUIRoot>
+    ),
+  ],
+} satisfies Meta<typeof BlueprintSearchModal>;
+
+export default meta;
+type Story = StoryObj<typeof BlueprintSearchModal>;
+
+const mockBlueprints: IMarketplaceBlueprintSummary[] = [
+  {
+    key: 'items/broad-sword',
+    name: 'Broad Sword',
+    type: 'Weapon',
+    subType: 'Sword',
+    tier: 1,
+    textureAtlas: 'items',
+    texturePath: 'swords/broad-sword.png',
+  },
+  {
+    key: 'items/angelic-sword',
+    name: 'Angelic Sword',
+    type: 'Weapon',
+    subType: 'Sword',
+    tier: 5,
+    textureAtlas: 'items',
+    texturePath: 'swords/angelic-sword.png',
+    rarity: 'Epic',
+  },
+  {
+    key: 'items/leather-armor',
+    name: 'Leather Armor',
+    type: 'Armor',
+    subType: 'Body',
+    tier: 1,
+    textureAtlas: 'items',
+    texturePath: 'armors/leather-armor.png',
+  },
+  {
+    key: 'items/wooden-staff',
+    name: 'Wooden Staff',
+    type: 'Weapon',
+    subType: 'Staff',
+    tier: 1,
+    textureAtlas: 'items',
+    texturePath: 'staffs/wooden-staff.png',
+    rarity: 'Rare',
+  },
+  {
+    key: 'items/wooden-shield',
+    name: 'Wooden Shield',
+    type: 'Armor',
+    subType: 'Shield',
+    tier: 1,
+    textureAtlas: 'items',
+    texturePath: 'shields/wooden-shield.png',
+  },
+];
+
+export const Default: Story = {
+  render: () => (
+    <BlueprintSearchModal
+      isOpen
+      onClose={() => console.log('close')}
+      onSelect={(blueprint) => console.log('selected:', blueprint.name)}
+      onSearch={(request: IMarketplaceBlueprintSearchRequest) => console.log('search:', request)}
+      blueprints={mockBlueprints}
+      totalCount={mockBlueprints.length}
+      currentPage={1}
+      isLoading={false}
+      atlasJSON={itemsAtlasJSON}
+      atlasIMG={itemsAtlasIMG}
+    />
+  ),
+};
+
+export const LoadingState: Story = {
+  render: () => (
+    <BlueprintSearchModal
+      isOpen
+      onClose={() => console.log('close')}
+      onSelect={(blueprint) => console.log('selected:', blueprint.name)}
+      onSearch={(request: IMarketplaceBlueprintSearchRequest) => console.log('search:', request)}
+      blueprints={[]}
+      totalCount={0}
+      currentPage={1}
+      isLoading
+      atlasJSON={itemsAtlasJSON}
+      atlasIMG={itemsAtlasIMG}
+    />
+  ),
+};
+
+export const EmptyResults: Story = {
+  render: () => (
+    <BlueprintSearchModal
+      isOpen
+      onClose={() => console.log('close')}
+      onSelect={(blueprint) => console.log('selected:', blueprint.name)}
+      onSearch={(request: IMarketplaceBlueprintSearchRequest) => console.log('search:', request)}
+      blueprints={[]}
+      totalCount={0}
+      currentPage={1}
+      isLoading={false}
+      atlasJSON={itemsAtlasJSON}
+      atlasIMG={itemsAtlasIMG}
+    />
+  ),
+};
+
+export const Closed: Story = {
+  render: () => (
+    <BlueprintSearchModal
+      isOpen={false}
+      onClose={() => console.log('close')}
+      onSelect={(blueprint) => console.log('selected:', blueprint.name)}
+      onSearch={(request: IMarketplaceBlueprintSearchRequest) => console.log('search:', request)}
+      blueprints={mockBlueprints}
+      totalCount={mockBlueprints.length}
+      currentPage={1}
+      isLoading={false}
+      atlasJSON={itemsAtlasJSON}
+      atlasIMG={itemsAtlasIMG}
+    />
+  ),
+};

package/src/stories/Features/marketplace/BuyOrderPanel.stories.tsx

@@ -0,0 +1,207 @@
+import {
+  IMarketplaceBlueprintSummary,
+  IMarketplaceBuyOrderItem,
+  MarketplaceBuyOrderStatus,
+} from '@rpg-engine/shared';
+import type { Meta, StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
+import { BuyOrderPanel } from '../../../components/Marketplace/BuyOrderPanel';
+import { RPGUIRoot } from '../../../components/RPGUI/RPGUIRoot';
+import atlasJSON from '../../../mocks/atlas/items/items.json';
+import atlasIMG from '../../../mocks/atlas/items/items.png';
+
+const meta = {
+  title: 'Features/Marketplace/BuyOrderPanel',
+  component: BuyOrderPanel,
+  parameters: {
+    layout: 'centered',
+  },
+  decorators: [
+    (Story) => (
+      <RPGUIRoot>
+        <div style={{ width: '800px' }}>
+          <Story />
+        </div>
+      </RPGUIRoot>
+    ),
+  ],
+} satisfies Meta<typeof BuyOrderPanel>;
+
+export default meta;
+type Story = StoryObj<typeof BuyOrderPanel>;
+
+const now = new Date();
+const weeksAgo = (weeks: number): Date =>
+  new Date(now.getTime() - weeks * 7 * 24 * 60 * 60 * 1000);
+
+const mockSelectedBlueprint: IMarketplaceBlueprintSummary = {
+  key: 'items/broad-sword',
+  name: 'Broad Sword',
+  type: 'Weapon',
+  subType: 'Sword',
+  tier: 1,
+  textureAtlas: 'items',
+  texturePath: 'swords/broad-sword.png',
+};
+
+const mockBuyOrders: IMarketplaceBuyOrderItem[] = [
+  {
+    _id: 'order-1',
+    owner: 'character-1',
+    itemBlueprintKey: 'items/broad-sword',
+    itemRarity: 'Rare',
+    maxPrice: 500,
+    escrowedGold: 500,
+    fee: 25,
+    status: MarketplaceBuyOrderStatus.Active,
+    createdAt: weeksAgo(1),
+    updatedAt: weeksAgo(1),
+  },
+  {
+    _id: 'order-2',
+    owner: 'character-1',
+    itemBlueprintKey: 'swords/angelic-sword',
+    maxPrice: 2000,
+    escrowedGold: 2000,
+    fee: 100,
+    status: MarketplaceBuyOrderStatus.Fulfilled,
+    fulfilledBy: 'AnotherPlayer',
+    createdAt: weeksAgo(3),
+    updatedAt: weeksAgo(0),
+  },
+  {
+    _id: 'order-3',
+    owner: 'character-1',
+    itemBlueprintKey: 'armors/leather-armor',
+    maxPrice: 300,
+    escrowedGold: 0,
+    fee: 15,
+    status: MarketplaceBuyOrderStatus.Expired,
+    createdAt: weeksAgo(5),
+    updatedAt: weeksAgo(1),
+  },
+];
+
+const DefaultWrapper = () => {
+  const [selectedBlueprint, setSelectedBlueprint] = useState<IMarketplaceBlueprintSummary | undefined>();
+  const [quantity, setQuantity] = useState(0);
+  const [maxPrice, setMaxPrice] = useState(0);
+  const [rarity, setRarity] = useState('');
+  const [yourOrders, setYourOrders] = useState<IMarketplaceBuyOrderItem[]>(mockBuyOrders);
+
+  return (
+    <BuyOrderPanel
+      atlasJSON={atlasJSON}
+      atlasIMG={atlasIMG}
+      selectedBlueprint={selectedBlueprint}
+      onOpenBlueprintSearch={() => setSelectedBlueprint(mockSelectedBlueprint)}
+      onCloseDetails={() => {
+        setSelectedBlueprint(undefined);
+        setQuantity(0);
+        setMaxPrice(0);
+        setRarity('');
+      }}
+      onQuantityChange={setQuantity}
+      onMaxPriceChange={setMaxPrice}
+      onRarityChange={setRarity}
+      onPlaceBuyOrder={() => {
+        if (selectedBlueprint) {
+          const newOrder: IMarketplaceBuyOrderItem = {
+            _id: `order-${Date.now()}`,
+            owner: 'character-1',
+            itemBlueprintKey: selectedBlueprint.key,
+            itemRarity: rarity as any,
+            maxPrice,
+            escrowedGold: maxPrice,
+            fee: Math.floor(maxPrice * 0.05),
+            status: MarketplaceBuyOrderStatus.Active,
+            createdAt: new Date(),
+            updatedAt: new Date(),
+          };
+          setYourOrders(prev => [newOrder, ...prev]);
+        }
+      }}
+      currentQuantity={quantity}
+      currentMaxPrice={maxPrice}
+      selectedRarity={rarity}
+      yourBuyOrders={yourOrders}
+      yourBuyOrdersTotal={yourOrders.length}
+      yourBuyOrdersPage={1}
+      onYourBuyOrdersPageChange={(page) => console.log('Page:', page)}
+      onCancelBuyOrder={(id) => setYourOrders(prev => prev.filter(o => o._id !== id))}
+    />
+  );
+};
+
+const WithBlueprintWrapper = () => {
+  const [selectedBlueprint, setSelectedBlueprint] = useState<IMarketplaceBlueprintSummary | undefined>(mockSelectedBlueprint);
+  const [quantity, setQuantity] = useState(0);
+  const [maxPrice, setMaxPrice] = useState(0);
+  const [rarity, setRarity] = useState('');
+  const [yourOrders, setYourOrders] = useState<IMarketplaceBuyOrderItem[]>(mockBuyOrders);
+
+  return (
+    <BuyOrderPanel
+      atlasJSON={atlasJSON}
+      atlasIMG={atlasIMG}
+      selectedBlueprint={selectedBlueprint}
+      onOpenBlueprintSearch={() => setSelectedBlueprint(mockSelectedBlueprint)}
+      onCloseDetails={() => {
+        setSelectedBlueprint(undefined);
+        setQuantity(0);
+        setMaxPrice(0);
+        setRarity('');
+      }}
+      onQuantityChange={setQuantity}
+      onMaxPriceChange={setMaxPrice}
+      onRarityChange={setRarity}
+      onPlaceBuyOrder={() => console.log('place order')}
+      currentQuantity={quantity}
+      currentMaxPrice={maxPrice}
+      selectedRarity={rarity}
+      yourBuyOrders={yourOrders}
+      yourBuyOrdersTotal={yourOrders.length}
+      yourBuyOrdersPage={1}
+      onYourBuyOrdersPageChange={(page) => console.log('Page:', page)}
+      onCancelBuyOrder={(id) => setYourOrders(prev => prev.filter(o => o._id !== id))}
+    />
+  );
+};
+
+const EmptyWrapper = () => {
+  const [quantity, setQuantity] = useState(0);
+  const [maxPrice, setMaxPrice] = useState(0);
+  const [rarity, setRarity] = useState('');
+
+  return (
+    <BuyOrderPanel
+      atlasJSON={atlasJSON}
+      atlasIMG={atlasIMG}
+      onOpenBlueprintSearch={() => console.log('Opening blueprint search...')}
+      onQuantityChange={setQuantity}
+      onMaxPriceChange={setMaxPrice}
+      onRarityChange={setRarity}
+      onPlaceBuyOrder={() => console.log('place order')}
+      currentQuantity={quantity}
+      currentMaxPrice={maxPrice}
+      selectedRarity={rarity}
+      yourBuyOrders={[]}
+      yourBuyOrdersTotal={0}
+      yourBuyOrdersPage={1}
+      onYourBuyOrdersPageChange={(page) => console.log('Page:', page)}
+      onCancelBuyOrder={(id) => console.log('Cancel:', id)}
+    />
+  );
+};
+
+export const Default: Story = {
+  render: () => <DefaultWrapper />,
+};
+
+export const WithSelectedBlueprint: Story = {
+  render: () => <WithBlueprintWrapper />,
+};
+
+export const EmptyOrders: Story = {
+  render: () => <EmptyWrapper />,
+};

package/src/stories/Features/marketplace/BuyOrderRows.stories.tsx

@@ -0,0 +1,116 @@
+import { IMarketplaceBuyOrderItem, MarketplaceBuyOrderStatus } from '@rpg-engine/shared';
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { BuyOrderRow } from '../../../components/Marketplace/BuyOrderRows';
+import { RPGUIRoot } from '../../../components/RPGUI/RPGUIRoot';
+import atlasJSON from '../../../mocks/atlas/items/items.json';
+import atlasIMG from '../../../mocks/atlas/items/items.png';
+
+const meta = {
+  title: 'Features/Marketplace/BuyOrderRows',
+  component: BuyOrderRow,
+  parameters: {
+    layout: 'centered',
+  },
+  decorators: [
+    (Story) => (
+      <RPGUIRoot>
+        <div style={{ width: '800px' }}>
+          <Story />
+        </div>
+      </RPGUIRoot>
+    ),
+  ],
+} satisfies Meta<typeof BuyOrderRow>;
+
+export default meta;
+type Story = StoryObj<typeof BuyOrderRow>;
+
+const now = new Date();
+const weeksAgo = (weeks: number): Date =>
+  new Date(now.getTime() - weeks * 7 * 24 * 60 * 60 * 1000);
+
+const mockActiveBuyOrder: IMarketplaceBuyOrderItem = {
+  _id: 'order-1',
+  owner: 'character-1',
+  itemBlueprintKey: 'items/broad-sword',
+  itemRarity: 'Rare',
+  maxPrice: 500,
+  escrowedGold: 500,
+  fee: 25,
+  status: MarketplaceBuyOrderStatus.Active,
+  createdAt: weeksAgo(1),
+  updatedAt: weeksAgo(1),
+};
+
+const mockFulfilledBuyOrder: IMarketplaceBuyOrderItem = {
+  _id: 'order-2',
+  owner: 'character-1',
+  itemBlueprintKey: 'items/angelic-sword',
+  maxPrice: 2000,
+  escrowedGold: 2000,
+  fee: 100,
+  status: MarketplaceBuyOrderStatus.Fulfilled,
+  fulfilledBy: 'AnotherPlayer',
+  createdAt: weeksAgo(3),
+  updatedAt: weeksAgo(0),
+};
+
+const mockExpiredBuyOrder: IMarketplaceBuyOrderItem = {
+  _id: 'order-3',
+  owner: 'character-1',
+  itemBlueprintKey: 'items/leather-armor',
+  maxPrice: 300,
+  escrowedGold: 0,
+  fee: 15,
+  status: MarketplaceBuyOrderStatus.Expired,
+  createdAt: weeksAgo(5),
+  updatedAt: weeksAgo(1),
+};
+
+export const ActiveOrder: Story = {
+  render: () => (
+    <BuyOrderRow
+      buyOrder={mockActiveBuyOrder}
+      atlasJSON={atlasJSON}
+      atlasIMG={atlasIMG}
+      isOwn
+      onCancel={(id) => console.log('cancel order:', id)}
+    />
+  ),
+};
+
+export const FulfilledOrder: Story = {
+  render: () => (
+    <BuyOrderRow
+      buyOrder={mockFulfilledBuyOrder}
+      atlasJSON={atlasJSON}
+      atlasIMG={atlasIMG}
+      isOwn
+    />
+  ),
+};
+
+export const ExpiredOrder: Story = {
+  render: () => (
+    <BuyOrderRow
+      buyOrder={mockExpiredBuyOrder}
+      atlasJSON={atlasJSON}
+      atlasIMG={atlasIMG}
+      isOwn={false}
+    />
+  ),
+};
+
+export const OpenOrderForSellers: Story = {
+  render: () => (
+    <BuyOrderRow
+      buyOrder={mockActiveBuyOrder}
+      atlasJSON={atlasJSON}
+      atlasIMG={atlasIMG}
+      isOwn={false}
+      onFulfill={(id) => console.log('fulfill order:', id)}
+      showRequestTag
+    />
+  ),
+};

package/src/stories/Features/marketplace/HistoryPanel.stories.tsx

@@ -0,0 +1,157 @@
+import {
+  IMarketplaceTransaction,
+  MarketplaceTransactionType,
+} from '@rpg-engine/shared';
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { HistoryPanel } from '../../../components/Marketplace/HistoryPanel';
+import { RPGUIRoot } from '../../../components/RPGUI/RPGUIRoot';
+import atlasJSON from '../../../mocks/atlas/items/items.json';
+import atlasIMG from '../../../mocks/atlas/items/items.png';
+
+const meta = {
+  title: 'Features/Marketplace/HistoryPanel',
+  component: HistoryPanel,
+  parameters: {
+    layout: 'centered',
+  },
+  decorators: [
+    (Story) => (
+      <RPGUIRoot>
+        <div style={{ width: '800px' }}>
+          <Story />
+        </div>
+      </RPGUIRoot>
+    ),
+  ],
+} satisfies Meta<typeof HistoryPanel>;
+
+export default meta;
+type Story = StoryObj<typeof HistoryPanel>;
+
+const now = new Date();
+const daysAgo = (days: number): Date =>
+  new Date(now.getTime() - days * 24 * 60 * 60 * 1000);
+
+const mockTransactions: IMarketplaceTransaction[] = [
+  {
+    owner: 'character-1',
+    type: MarketplaceTransactionType.Purchase,
+    goldAmount: 500,
+    itemKey: 'items/iron-sword.png',
+    itemName: 'Iron Sword',
+    counterpartName: 'SomePlayer',
+    currency: 'gold',
+    createdAt: daysAgo(0),
+    updatedAt: daysAgo(0),
+  },
+  {
+    owner: 'character-1',
+    type: MarketplaceTransactionType.Sale,
+    goldAmount: 1200,
+    itemKey: 'items/leather-armor.png',
+    itemName: 'Leather Armor',
+    counterpartName: 'AnotherPlayer',
+    currency: 'dc', // DC sale
+    createdAt: daysAgo(1),
+    updatedAt: daysAgo(1),
+  },
+  {
+    owner: 'character-1',
+    type: MarketplaceTransactionType.Purchase,
+    goldAmount: 275000,
+    itemKey: 'items/angelic-sword.png',
+    itemName: 'Angelic Sword',
+    counterpartName: 'DCBuyer',
+    currency: 'dc', // DC purchase
+    createdAt: daysAgo(2),
+    updatedAt: daysAgo(2),
+  },
+  {
+    owner: 'character-1',
+    type: MarketplaceTransactionType.ListingFee,
+    goldAmount: 60,
+    itemKey: 'items/leather-armor.png',
+    itemName: 'Leather Armor',
+    createdAt: daysAgo(1),
+    updatedAt: daysAgo(1),
+  },
+  {
+    owner: 'character-1',
+    type: MarketplaceTransactionType.Withdrawal,
+    goldAmount: 1200,
+    createdAt: daysAgo(2),
+    updatedAt: daysAgo(2),
+  },
+  {
+    owner: 'character-1',
+    type: MarketplaceTransactionType.Expired,
+    goldAmount: 0,
+    itemKey: 'items/magic-staff.png',
+    itemName: 'Magic Staff',
+    createdAt: daysAgo(3),
+    updatedAt: daysAgo(3),
+  },
+  {
+    owner: 'character-1',
+    type: MarketplaceTransactionType.Unlisted,
+    goldAmount: 0,
+    itemKey: 'items/shield.png',
+    itemName: 'Wooden Shield',
+    createdAt: daysAgo(4),
+    updatedAt: daysAgo(4),
+  },
+  {
+    owner: 'character-1',
+    type: MarketplaceTransactionType.BuyOrderPlaced,
+    goldAmount: 800,
+    itemKey: 'items/angelic-sword.png',
+    itemName: 'Angelic Sword',
+    createdAt: daysAgo(5),
+    updatedAt: daysAgo(5),
+  },
+  {
+    owner: 'character-1',
+    type: MarketplaceTransactionType.BuyOrderFulfilled,
+    goldAmount: 800,
+    itemKey: 'items/angelic-sword.png',
+    itemName: 'Angelic Sword',
+    counterpartName: 'Fulfiller',
+    createdAt: daysAgo(6),
+    updatedAt: daysAgo(6),
+  },
+];
+
+export const Default: Story = {
+  render: () => (
+    <HistoryPanel
+      transactions={mockTransactions}
+      totalCount={mockTransactions.length}
+      currentPage={1}
+      itemsPerPage={10}
+      selectedType="All"
+      onTypeChange={(type) => console.log('type change:', type)}
+      onPageChange={(page) => console.log('page change:', page)}
+      atlasJSON={atlasJSON}
+      atlasIMG={atlasIMG}
+      dcToGoldSwapRate={550000} // 1 DC = 550,000 GOLD
+    />
+  ),
+};
+
+export const EmptyState: Story = {
+  render: () => (
+    <HistoryPanel
+      transactions={[]}
+      totalCount={0}
+      currentPage={1}
+      itemsPerPage={10}
+      selectedType="All"
+      onTypeChange={(type) => console.log('type change:', type)}
+      onPageChange={(page) => console.log('page change:', page)}
+      atlasJSON={atlasJSON}
+      atlasIMG={atlasIMG}
+      dcToGoldSwapRate={550000}
+    />
+  ),
+};