@rpg-engine/long-bow 0.8.69 → 0.8.71

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.69",
+  "version": "0.8.71",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/Store/CartView.tsx

@@ -111,6 +111,9 @@ export const CartView: React.FC<ICartViewProps> = ({
                 </ItemIconContainer>
                 <ItemDetails>
                   <ItemName>{cartItem.item.name}</ItemName>
+                  {cartItem.metadata?.inputValue && (
+                    <CartMeta>{cartItem.metadata.inputValue}</CartMeta>
+                  )}
                   <ItemInfo>
                     <span>${formatPrice(cartItem.item.price)}</span>
                     <span>×</span>
@@ -339,3 +342,11 @@ const MetadataValue = styled.div`
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
+
+const CartMeta = styled.div`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.75rem;
+  color: #ffffff;
+  opacity: 0.8;
+  margin-top: 0.25rem;
+`;

package/src/components/Store/Store.tsx

@@ -1,5 +1,5 @@
 import { IItemPack, IPurchase, IStoreItem, ItemRarities, ItemSubType, ItemType, UserAccountTypes } from '@rpg-engine/shared';
-import React, { useMemo, useState } from 'react';
+import React, { ReactNode, useMemo, useState } from 'react';
 import { FaHistory, FaShoppingCart } from 'react-icons/fa';
 import styled from 'styled-components';
 import { uiColors } from '../../constants/uiColors';
@@ -14,6 +14,9 @@ import { StoreItemsSection } from './sections/StoreItemsSection';
 import { StorePacksSection } from './sections/StorePacksSection';
 import { StoreItemDetails } from './StoreItemDetails';
 
+// Define TabId union type for tab identifiers
+type TabId = 'premium' | 'packs' | 'items';
+
 // Define IStoreProps locally as a workaround
 export interface IStoreProps {
   items: IStoreItem[];
@@ -26,6 +29,10 @@ export interface IStoreProps {
   loading?: boolean;
   error?: string;
   onClose?: () => void;
+  hidePremiumTab?: boolean;
+  tabOrder?: TabId[];
+  defaultActiveTab?: TabId;
+  textInputItemKeys?: string[];
 }
 
 export const Store: React.FC<IStoreProps> = ({
@@ -39,9 +46,19 @@ export const Store: React.FC<IStoreProps> = ({
   loading = false,
   error,
   onClose,
+  hidePremiumTab = false,
+  tabOrder,
+  defaultActiveTab,
+  textInputItemKeys = [],
 }) => {
   const [selectedPack, setSelectedPack] = useState<IItemPack | null>(null);
-  const [activeTab, setActiveTab] = useState('premium');
+  const [activeTab, setActiveTab] = useState<TabId>(() => {
+    const initialTabs = (tabOrder ?? ['premium', 'packs', 'items']).filter(id => !(hidePremiumTab && id === 'premium'));
+    if (defaultActiveTab && initialTabs.includes(defaultActiveTab)) {
+      return defaultActiveTab;
+    }
+    return hidePremiumTab ? 'items' : 'premium';
+  });
   const {
     cartItems,
     handleAddToCart,
@@ -136,8 +153,12 @@ export const Store: React.FC<IStoreProps> = ({
     return <ErrorMessage>{error}</ErrorMessage>;
   }
 
-  const tabs = [
-    {
+  // Build tabs dynamically based on props
+  const tabIds: TabId[] = tabOrder ?? ['premium', 'packs', 'items'];
+  const availableTabIds: TabId[] = tabIds.filter(id => !(hidePremiumTab && id === 'premium'));
+
+  const tabsMap: Record<TabId, { id: TabId; title: string; content: ReactNode }> = {
+    premium: {
       id: 'premium',
       title: 'Premium',
       content: (
@@ -148,7 +169,7 @@ export const Store: React.FC<IStoreProps> = ({
         />
       ),
     },
-    {
+    packs: {
       id: 'packs',
       title: 'Packs',
       content: (
@@ -159,7 +180,7 @@ export const Store: React.FC<IStoreProps> = ({
         />
       ),
     },
-    {
+    items: {
       id: 'items',
       title: 'Items',
       content: (
@@ -169,10 +190,13 @@ export const Store: React.FC<IStoreProps> = ({
           atlasJSON={atlasJSON}
           atlasIMG={atlasIMG}
           userAccountType={userAccountType}
+          textInputItemKeys={textInputItemKeys}
         />
       ),
     },
-  ];
+  };
+
+  const tabs = availableTabIds.map(id => tabsMap[id]);
 
   return (
     <DraggableContainer
@@ -243,7 +267,7 @@ export const Store: React.FC<IStoreProps> = ({
               borderColor="#f59e0b"
               hoverColor="#fef3c7"
               activeTab={activeTab}
-              onTabChange={setActiveTab}
+              onTabChange={(tabId: string) => setActiveTab(tabId as TabId)}
             />
           </MainContent>
           {cartItems.length > 0 && (

package/src/components/Store/StoreCharacterSkinRow.tsx

@@ -4,7 +4,6 @@ import { FaCartPlus } from 'react-icons/fa';
 import styled from 'styled-components';
 import { SelectArrow } from '../Arrow/SelectArrow';
 import { ICharacterProps } from '../Character/CharacterSelection';
-import { ErrorBoundary } from '../Item/Inventory/ErrorBoundary';
 import { CTAButton } from '../shared/CTAButton/CTAButton';
 import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
 
@@ -23,7 +22,6 @@ export const StoreCharacterSkinRow: React.FC<IStoreCharacterSkinRowProps> = ({
   onAddToCart,
   userAccountType,
 }) => {
-  const [quantity, setQuantity] = useState(1);
   const [currentIndex, setCurrentIndex] = useState(0);
   
   // Get available characters from metadata
@@ -40,32 +38,14 @@ export const StoreCharacterSkinRow: React.FC<IStoreCharacterSkinRowProps> = ({
     setCurrentIndex(0);
   }, [item._id]);
   
-  const handleQuantityChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = parseInt(e.target.value) || 1;
-    setQuantity(Math.min(Math.max(1, value), 99));
-  };
-
-  const handleBlur = () => {
-    if (quantity < 1) setQuantity(1);
-    if (quantity > 99) setQuantity(99);
-  };
-
-  const incrementQuantity = () => {
-    setQuantity(prev => Math.min(prev + 1, 99));
-  };
-
-  const decrementQuantity = () => {
-    setQuantity(prev => Math.max(1, prev - 1));
-  };
-  
   const handlePreviousSkin = () => {
-    setCurrentIndex((prevIndex) => 
+    setCurrentIndex((prevIndex) =>
       prevIndex === 0 ? availableCharacters.length - 1 : prevIndex - 1
     );
   };
 
   const handleNextSkin = () => {
-    setCurrentIndex((prevIndex) => 
+    setCurrentIndex((prevIndex) =>
       prevIndex === availableCharacters.length - 1 ? 0 : prevIndex + 1
     );
   };
@@ -77,17 +57,15 @@ export const StoreCharacterSkinRow: React.FC<IStoreCharacterSkinRowProps> = ({
   const handleAddToCart = () => {
     if (!hasRequiredAccount) return;
     
-    // If we have character skins, add the selected skin to the purchase
+    // Always use a quantity of 1
     if (availableCharacters.length > 0 && currentCharacter) {
-      onAddToCart(item, quantity, { 
+      onAddToCart(item, 1, { 
         selectedSkinName: currentCharacter.name,
         selectedSkinTextureKey: currentCharacter.textureKey 
       });
     } else {
-      onAddToCart(item, quantity);
+      onAddToCart(item, 1);
     }
-    
-    setQuantity(1); // Reset quantity after adding to cart
   };
   
   const getSpriteKey = (textureKey: string) => {
@@ -99,34 +77,16 @@ export const StoreCharacterSkinRow: React.FC<IStoreCharacterSkinRowProps> = ({
   return (
     <ItemWrapper>
       <ItemIconContainer>
-        {availableCharacters.length > 0 && currentCharacter && entityAtlasJSON && entityAtlasIMG ? (
-          <CharacterSkinPreviewContainer>
-            <NavArrow
-              direction="left"
-              onPointerDown={handlePreviousSkin}
-              size={24}
-            />
-            
-            <SpriteContainer>
-              <ErrorBoundary>
-                <SpriteFromAtlas
-                  atlasJSON={entityAtlasJSON}
-                  atlasIMG={entityAtlasIMG}
-                  spriteKey={getSpriteKey(currentCharacter.textureKey)}
-                  width={32}
-                  height={32}
-                  imgScale={2}
-                  centered
-                />
-              </ErrorBoundary>
-            </SpriteContainer>
-            
-            <NavArrow
-              direction="right"
-              onPointerDown={handleNextSkin}
-              size={24}
-            />
-          </CharacterSkinPreviewContainer>
+        {entityAtlasJSON && entityAtlasIMG && currentCharacter ? (
+          <SpriteFromAtlas
+            atlasJSON={entityAtlasJSON}
+            atlasIMG={entityAtlasIMG}
+            spriteKey={getSpriteKey(currentCharacter.textureKey)}
+            width={32}
+            height={32}
+            imgScale={2}
+            centered
+          />
         ) : (
           <SpriteFromAtlas
             atlasJSON={atlasJSON}
@@ -141,38 +101,20 @@ export const StoreCharacterSkinRow: React.FC<IStoreCharacterSkinRowProps> = ({
       </ItemIconContainer>
 
       <ItemDetails>
-        <ItemName>{item.name}</ItemName>
+        <Header>
+          <ItemName>{item.name}</ItemName>         
+        </Header>
         {availableCharacters.length > 0 && currentCharacter && (
-          <SelectedSkin>Selected: {currentCharacter.name}</SelectedSkin>
+          <SelectedSkinNav>
+            <SelectedSkin>Selected:</SelectedSkin>
+            <SkinNavArrow direction="left" onPointerDown={handlePreviousSkin} size={24} />
+            <SelectedSkin>{currentCharacter.name}</SelectedSkin>
+            <SkinNavArrow direction="right" onPointerDown={handleNextSkin} size={24} />
+          </SelectedSkinNav>
         )}
         <ItemPrice>${item.price}</ItemPrice>
       </ItemDetails>
-
       <Controls>
-        <ArrowsContainer>
-          <SelectArrow
-            direction="left"
-            onPointerDown={decrementQuantity}
-            size={24}
-          />
-
-          <QuantityInput
-            type="number"
-            value={quantity}
-            onChange={handleQuantityChange}
-            onBlur={handleBlur}
-            min={1}
-            max={99}
-            className="rpgui-input"
-          />
-
-          <SelectArrow
-            direction="right"
-            onPointerDown={incrementQuantity}
-            size={24}
-          />
-        </ArrowsContainer>
-
         <CTAButton
           icon={<FaCartPlus />}
           label="Add"
@@ -197,7 +139,8 @@ const ItemWrapper = styled.div`
 `;
 
 const ItemIconContainer = styled.div`
-  min-width: 140px;
+  width: 32px;
+  height: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -205,28 +148,6 @@ const ItemIconContainer = styled.div`
   padding: 4px;
 `;
 
-const CharacterSkinPreviewContainer = styled.div`
-  position: relative;
-  display: flex;
-  align-items: center;
-  width: 140px;
-  height: 42px;
-  justify-content: space-between;
-`;
-
-const SpriteContainer = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-`;
-
-const NavArrow = styled(SelectArrow)`
-  z-index: 2;
-`;
-
 const ItemDetails = styled.div`
   flex: 1;
   display: flex;
@@ -259,28 +180,19 @@ const Controls = styled.div`
   min-width: fit-content;
 `;
 
-const ArrowsContainer = styled.div`
-  position: relative;
+// Styled arrow override for inline nav arrows
+const SkinNavArrow = styled(SelectArrow)`
+  position: static;
+`;
+
+const Header = styled.div`
   display: flex;
   align-items: center;
-  width: 120px;
-  height: 42px;
-  justify-content: space-between;
+  gap: 0.5rem;
 `;
 
-const QuantityInput = styled.input`
-  width: 40px;
-  text-align: center;
-  margin: 0 auto;
-  font-size: 0.875rem;
-  background: rgba(0, 0, 0, 0.2);
-  color: #ffffff;
-  border: none;
-  padding: 0.25rem;
-
-  &::-webkit-inner-spin-button,
-  &::-webkit-outer-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
+const SelectedSkinNav = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
 `; 

package/src/components/Store/StoreItemRow.tsx

@@ -12,6 +12,7 @@ interface IStoreItemRowProps {
   atlasIMG: string;
   onAddToCart: (item: IStoreItem, quantity: number, metadata?: Record<string, any>) => void;
   userAccountType: UserAccountTypes;
+  showTextInput?: boolean;
 }
 
 export const StoreItemRow: React.FC<IStoreItemRowProps> = ({
@@ -20,8 +21,10 @@ export const StoreItemRow: React.FC<IStoreItemRowProps> = ({
   atlasIMG,
   onAddToCart,
   userAccountType,
+  showTextInput = false,
 }) => {
   const [quantity, setQuantity] = useState(1);
+  const [textInputValue, setTextInputValue] = useState('');
 
   const handleQuantityChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = parseInt(e.target.value) || 1;
@@ -45,10 +48,15 @@ export const StoreItemRow: React.FC<IStoreItemRowProps> = ({
     !item.requiredAccountType?.length ||
     item.requiredAccountType.includes(userAccountType);
 
-  const handleAddToCart = () => {
+  const handleAddToCartInternal = () => {
     if (!hasRequiredAccount) return;
+    if (showTextInput) {
+      onAddToCart(item, 1, { inputValue: textInputValue });
+      setTextInputValue('');
+    } else {
     onAddToCart(item, quantity);
-    setQuantity(1); // Reset quantity after adding to cart
+      setQuantity(1);
+    }
   };
 
   return (
@@ -71,6 +79,16 @@ export const StoreItemRow: React.FC<IStoreItemRowProps> = ({
       </ItemDetails>
 
       <Controls>
+        {/* Show text input if configured, else show arrows only for stackable items */}
+        {showTextInput ? (
+          <TextInput
+            type="text"
+            value={textInputValue}
+            placeholder="Enter value"
+            onChange={e => setTextInputValue(e.target.value)}
+            className="rpgui-input"
+          />
+        ) : item.isStackable ? (
         <ArrowsContainer>
           <SelectArrow
             direction="left"
@@ -94,11 +112,12 @@ export const StoreItemRow: React.FC<IStoreItemRowProps> = ({
             size={24}
           />
         </ArrowsContainer>
+        ) : null}
 
         <CTAButton
           icon={<FaCartPlus />}
           label="Add"
-          onClick={handleAddToCart}
+          onClick={handleAddToCartInternal}
           disabled={!hasRequiredAccount}
         />
       </Controls>
@@ -179,3 +198,14 @@ const QuantityInput = styled.input`
     margin: 0;
   }
 `;
+
+const TextInput = styled.input`
+  width: 120px;
+  text-align: center;
+  margin: 0 auto;
+  font-size: 0.875rem;
+  background: rgba(0, 0, 0, 0.2);
+  color: #ffffff;
+  border: none;
+  padding: 0.25rem;
+`;

package/src/components/Store/__test__/MetadataCollector.spec.tsx

@@ -24,9 +24,10 @@ jest.mock('../../Character/CharacterSkinSelectionModal', () => ({
 jest.mock('../MetadataCollector', () => ({
   MetadataCollector: jest.fn(({ metadataType, config, onCollect, onCancel }) => {
     // Set up cleanup function for the useEffect tests
+    const React = require('react');
     React.useEffect(() => {
       return () => {
-        if (window.__metadataResolvers) {
+        if (globalThis.__metadataResolvers) {
           onCancel();
         }
       };

package/src/components/Store/__test__/useStoreMetadata.spec.tsx

@@ -20,15 +20,15 @@ jest.mock('../hooks/useStoreMetadata', () => {
     
     const collectMetadata = async (item) => {
       // If no metadata type or None, return null immediately
-      if (!item.metadataType || item.metadataType === MetadataType.None) {
+      if (!item.metadataType || item.metadataType === 'None') {
         return null;
       }
       
       // Setup for valid metadata types
-      window.__metadataResolvers = {
+      globalThis.__metadataResolvers = {
         resolve: (metadata) => {
           // Clean up
-          window.__metadataResolvers = undefined;
+          globalThis.__metadataResolvers = undefined;
           return metadata;
         },
         item
@@ -36,7 +36,7 @@ jest.mock('../hooks/useStoreMetadata', () => {
       
       // Handle the last test case specifically
       if (item.key === 'item-character-skin-metadata-cancel') {
-        window.__metadataResolvers = undefined; // Make sure it's cleaned up
+        globalThis.__metadataResolvers = undefined; // Make sure it's cleaned up
         return Promise.resolve(null);
       }
       
@@ -139,9 +139,9 @@ describe('useStoreMetadata', () => {
     const metadataPromise = hook.collectMetadata(mockItemWithCharacterSkinMetadata);
     
     // Setup our mock resolver
-    if (window.__metadataResolvers) {
-      const originalResolve = window.__metadataResolvers.resolve;
-      window.__metadataResolvers.resolve = function(metadata) {
+    if (globalThis.__metadataResolvers) {
+      const originalResolve = globalThis.__metadataResolvers.resolve;
+      globalThis.__metadataResolvers.resolve = function(metadata) {
         resolveSpy(metadata);
         return originalResolve(metadata);
       };
@@ -149,8 +149,8 @@ describe('useStoreMetadata', () => {
     
     // Resolve the metadata
     const mockMetadata = { selectedSkin: 'test-skin' };
-    if (window.__metadataResolvers) {
-      window.__metadataResolvers.resolve(mockMetadata);
+    if (globalThis.__metadataResolvers) {
+      globalThis.__metadataResolvers.resolve(mockMetadata);
     }
     
     // Wait for the promise to resolve
@@ -159,7 +159,7 @@ describe('useStoreMetadata', () => {
     // Assertions
     expect(result).toEqual(mockMetadata);
     expect(resolveSpy).toHaveBeenCalledWith(mockMetadata);
-    expect(window.__metadataResolvers).toBeUndefined(); // Should be cleaned up
+    expect(globalThis.__metadataResolvers).toBeUndefined(); // Should be cleaned up
   });
 
   it('should clean up window.__metadataResolvers when collection is cancelled', async () => {

package/src/components/Store/sections/StoreItemsSection.tsx

@@ -11,6 +11,7 @@ interface IStoreItemsSectionProps {
   atlasJSON: Record<string, any>;
   atlasIMG: string;
   userAccountType?: UserAccountTypes;
+  textInputItemKeys?: string[];
 }
 
 export const StoreItemsSection: React.FC<IStoreItemsSectionProps> = ({
@@ -19,6 +20,7 @@ export const StoreItemsSection: React.FC<IStoreItemsSectionProps> = ({
   atlasJSON,
   atlasIMG,
   userAccountType,
+  textInputItemKeys = [],
 }) => {
   const [searchQuery, setSearchQuery] = useState('');
 
@@ -27,7 +29,7 @@ export const StoreItemsSection: React.FC<IStoreItemsSectionProps> = ({
   );
 
   const renderStoreItem = (item: IStoreItem) => {
-    // Use the specialized character skin row for items with character skin metadata
+    // Prefer a specialized character skin row when needed
     if (item.metadataType === MetadataType.CharacterSkin) {
       return (
         <StoreCharacterSkinRow
@@ -40,8 +42,21 @@ export const StoreItemsSection: React.FC<IStoreItemsSectionProps> = ({
         />
       );
     }
-    
-    // Use the standard item row for all other items
+    // Render text input row when configured for this item key
+    if (textInputItemKeys.includes(item.key) || textInputItemKeys.includes(item._id)) {
+      return (
+        <StoreItemRow
+          key={item._id}
+          item={item}
+          atlasJSON={atlasJSON}
+          atlasIMG={atlasIMG}
+          onAddToCart={onAddToCart}
+          userAccountType={userAccountType || UserAccountTypes.Free}
+          showTextInput
+        />
+      );
+    }
+    // Fallback to standard arrow-based row
     return (
       <StoreItemRow
         key={item._id}

package/src/stories/Features/store/Store.stories.tsx

@@ -246,6 +246,10 @@ export const Default: Story = {
       onClose={() => console.log('Store closed')}
       atlasJSON={itemsAtlasJSON}
       atlasIMG={itemsAtlasIMG}
+      hidePremiumTab={true}
+      tabOrder={['items', 'packs']}
+      defaultActiveTab="items"
+      textInputItemKeys={['original-greater-life-potion-2', 'original-angelic-sword-1']}
     />
   ),
 };