@rpg-engine/long-bow 0.8.141 → 0.8.146

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,323 @@
+import {
+  IMarketplaceBlueprintSearchRequest,
+  IMarketplaceBlueprintSummary,
+  IMarketplaceBuyOrderItem,
+  MarketplaceBuyOrderStatus,
+} from '@rpg-engine/shared';
+import type { Meta, StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
+import { BlueprintSearchModal } from '../../../components/Marketplace/BlueprintSearchModal';
+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 mockBlueprintSearchResults: 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',
+  },
+  {
+    key: 'items/leather-armor',
+    name: 'Leather Armor',
+    type: 'Armor',
+    subType: 'Body',
+    tier: 1,
+    textureAtlas: 'items',
+    texturePath: 'armors/leather-armor.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 [isBlueprintSearchOpen, setIsBlueprintSearchOpen] = useState(false);
+  const [quantity, setQuantity] = useState(0);
+  const [maxPrice, setMaxPrice] = useState(0);
+  const [rarity, setRarity] = useState('');
+  const [yourOrders, setYourOrders] = useState<IMarketplaceBuyOrderItem[]>(mockBuyOrders);
+
+  const handleBlueprintSelect = (blueprint: IMarketplaceBlueprintSummary) => {
+    setIsBlueprintSearchOpen(false);
+    setSelectedBlueprint(blueprint);
+  };
+
+  return (
+    <>
+      <BuyOrderPanel
+        atlasJSON={atlasJSON}
+        atlasIMG={atlasIMG}
+        selectedBlueprint={selectedBlueprint}
+        onOpenBlueprintSearch={() => setIsBlueprintSearchOpen(true)}
+        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))}
+      />
+      <BlueprintSearchModal
+        isOpen={isBlueprintSearchOpen}
+        onClose={() => setIsBlueprintSearchOpen(false)}
+        onSelect={handleBlueprintSelect}
+        onSearch={(req: IMarketplaceBlueprintSearchRequest) => console.log('search:', req)}
+        blueprints={mockBlueprintSearchResults}
+        totalCount={mockBlueprintSearchResults.length}
+        currentPage={1}
+        isLoading={false}
+        atlasJSON={atlasJSON}
+        atlasIMG={atlasIMG}
+      />
+    </>
+  );
+};
+
+const WithBlueprintWrapper = () => {
+  const [selectedBlueprint, setSelectedBlueprint] = useState<IMarketplaceBlueprintSummary | undefined>(mockSelectedBlueprint);
+  const [isBlueprintSearchOpen, setIsBlueprintSearchOpen] = useState(false);
+  const [quantity, setQuantity] = useState(0);
+  const [maxPrice, setMaxPrice] = useState(0);
+  const [rarity, setRarity] = useState('');
+  const [yourOrders, setYourOrders] = useState<IMarketplaceBuyOrderItem[]>(mockBuyOrders);
+
+  const handleBlueprintSelect = (blueprint: IMarketplaceBlueprintSummary) => {
+    setIsBlueprintSearchOpen(false);
+    setSelectedBlueprint(blueprint);
+  };
+
+  return (
+    <>
+      <BuyOrderPanel
+        atlasJSON={atlasJSON}
+        atlasIMG={atlasIMG}
+        selectedBlueprint={selectedBlueprint}
+        onOpenBlueprintSearch={() => setIsBlueprintSearchOpen(true)}
+        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))}
+      />
+      <BlueprintSearchModal
+        isOpen={isBlueprintSearchOpen}
+        onClose={() => setIsBlueprintSearchOpen(false)}
+        onSelect={handleBlueprintSelect}
+        onSearch={(req: IMarketplaceBlueprintSearchRequest) => console.log('search:', req)}
+        blueprints={mockBlueprintSearchResults}
+        totalCount={mockBlueprintSearchResults.length}
+        currentPage={1}
+        isLoading={false}
+        atlasJSON={atlasJSON}
+        atlasIMG={atlasIMG}
+      />
+    </>
+  );
+};
+
+const EmptyWrapper = () => {
+  const [isBlueprintSearchOpen, setIsBlueprintSearchOpen] = useState(false);
+  const [selectedBlueprint, setSelectedBlueprint] = useState<IMarketplaceBlueprintSummary | undefined>();
+  const [quantity, setQuantity] = useState(0);
+  const [maxPrice, setMaxPrice] = useState(0);
+  const [rarity, setRarity] = useState('');
+
+  const handleBlueprintSelect = (blueprint: IMarketplaceBlueprintSummary) => {
+    setIsBlueprintSearchOpen(false);
+    setSelectedBlueprint(blueprint);
+  };
+
+  return (
+    <>
+      <BuyOrderPanel
+        atlasJSON={atlasJSON}
+        atlasIMG={atlasIMG}
+        selectedBlueprint={selectedBlueprint}
+        onOpenBlueprintSearch={() => setIsBlueprintSearchOpen(true)}
+        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={[]}
+        yourBuyOrdersTotal={0}
+        yourBuyOrdersPage={1}
+        onYourBuyOrdersPageChange={(page) => console.log('Page:', page)}
+        onCancelBuyOrder={(id) => console.log('Cancel:', id)}
+      />
+      <BlueprintSearchModal
+        isOpen={isBlueprintSearchOpen}
+        onClose={() => setIsBlueprintSearchOpen(false)}
+        onSelect={handleBlueprintSelect}
+        onSearch={(req: IMarketplaceBlueprintSearchRequest) => console.log('search:', req)}
+        blueprints={mockBlueprintSearchResults}
+        totalCount={mockBlueprintSearchResults.length}
+        currentPage={1}
+        isLoading={false}
+        atlasJSON={atlasJSON}
+        atlasIMG={atlasIMG}
+      />
+    </>
+  );
+};
+
+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
+    />
+  ),
+};