@rpg-engine/long-bow 0.8.145 → 0.8.146

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

@@ -1,10 +1,12 @@
 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';
@@ -44,6 +46,36 @@ const mockSelectedBlueprint: IMarketplaceBlueprintSummary = {
   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',
@@ -84,113 +116,197 @@ const mockBuyOrders: IMarketplaceBuyOrderItem[] = [
 
 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={() => 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))}
-    />
+    <>
+      <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={() => 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))}
-    />
+    <>
+      <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}
-      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)}
-    />
+    <>
+      <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}
+      />
+    </>
   );
 };
 

package/src/stories/Features/trading/Marketplace.stories.tsx

@@ -69,6 +69,7 @@ const Template: Story = () => {
   const [blueprintResults, setBlueprintResults] = React.useState<IMarketplaceBlueprintSummary[]>([]);
   const [blueprintLoading, setBlueprintLoading] = React.useState(false);
   const [historyType, setHistoryType] = React.useState('All');
+  const [yourBuyOrders, setYourBuyOrders] = React.useState<IMarketplaceBuyOrderItem[]>(mockYourBuyOrders);
 
   const handleBlueprintSearch = (request: any) => {
     console.log('blueprint search:', request);
@@ -132,12 +133,34 @@ const Template: Story = () => {
         onBuyOrderQuantityChange={setQuantity}
         onBuyOrderMaxPriceChange={setMaxPrice}
         onBuyOrderRarityChange={setSelectedRarity}
-        onPlaceBuyOrder={() => console.log('place buy order:', selectedBlueprint?.name, quantity, maxPrice, selectedRarity)}
-        yourBuyOrders={mockYourBuyOrders}
-        yourBuyOrdersTotal={mockYourBuyOrders.length}
+        onPlaceBuyOrder={() => {
+          if (selectedBlueprint) {
+            const newOrder: IMarketplaceBuyOrderItem = {
+              _id: `bo-${Date.now()}`,
+              owner: 'player-1',
+              itemBlueprintKey: selectedBlueprint.key,
+              itemRarity: selectedRarity as any,
+              maxPrice,
+              escrowedGold: maxPrice,
+              fee: Math.floor(maxPrice * 0.05),
+              status: MarketplaceBuyOrderStatus.Active,
+              createdAt: new Date(),
+              updatedAt: new Date(),
+            };
+            setYourBuyOrders(prev => [newOrder, ...prev]);
+          }
+        }}
+        onClearBuyOrderBlueprint={() => {
+          setSelectedBlueprint(undefined);
+          setQuantity(1);
+          setMaxPrice(0);
+          setSelectedRarity('');
+        }}
+        yourBuyOrders={yourBuyOrders}
+        yourBuyOrdersTotal={yourBuyOrders.length}
         yourBuyOrdersPage={1}
         onYourBuyOrdersPageChange={p => console.log('your orders page:', p)}
-        onCancelBuyOrder={id => console.log('cancel order:', id)}
+        onCancelBuyOrder={id => setYourBuyOrders(prev => prev.filter(o => o._id !== id))}
         openBuyOrders={mockOpenBuyOrders}
         openBuyOrdersTotal={mockOpenBuyOrders.length}
         openBuyOrdersPage={1}