@rpg-engine/long-bow 0.8.66 → 0.8.68

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

@@ -1,15 +1,17 @@
-import { IItemPack, IPurchase, IStoreItem, UserAccountTypes } from '@rpg-engine/shared';
+import { IItemPack, IPurchase, IStoreItem, ItemRarities, ItemSubType, ItemType, MetadataType, UserAccountTypes } from '@rpg-engine/shared';
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import { RPGUIRoot } from '../../../components/RPGUI/RPGUIRoot';
 import customSkinImage from '../../../components/Store/sections/images/custom-skin.png';
 import { Store } from '../../../components/Store/Store';
+import entitiesAtlasJSON from '../../../mocks/atlas/entities/entities.json';
+import entitiesAtlasIMG from '../../../mocks/atlas/entities/entities.png';
 import itemsAtlasJSON from '../../../mocks/atlas/items/items.json';
 import itemsAtlasIMG from '../../../mocks/atlas/items/items.png';
 import { mockItems } from '../../../mocks/informationCenter.mocks';
 
 const meta = {
-  title: 'Features/Store',
+  title: 'Features/Store/Store',
   component: Store,
   parameters: {
     layout: 'centered',
@@ -65,9 +67,104 @@ const storeItems: IStoreItem[] = mockItems.map((item, index) => ({
   requiredAccountType: item.rarity === 'Legendary' ? [UserAccountTypes.PremiumGold] : [],
 }));
 
+// Sample character skins
+const availableCharacters = [
+  {
+    id: 'black-knight',
+    name: 'Black Knight',
+    textureKey: 'black-knight',
+  },
+  {
+    id: 'dragon-knight',
+    name: 'Dragon Knight',
+    textureKey: 'dragon-knight',
+  },
+  {
+    id: 'senior-knight-1',
+    name: 'Senior Knight',
+    textureKey: 'senior-knight-1',
+  },
+];
+
+// Create character skin items
+const characterSkinItems: IStoreItem[] = [
+  {
+    _id: 'skin-character-customization',
+    key: 'skin-character-customization',
+    name: 'Character Skin Customization',
+    description: 'Customize your character\'s appearance with a variety of skins',
+    fullDescription: 'This premium item allows you to customize your character\'s appearance by selecting from a variety of available skins.',
+    texturePath: 'items/character_customization.png',
+    textureAtlas: 'items',
+    textureKey: 'items/character_customization.png',
+    price: 14.99,
+    type: ItemType.Other,
+    subType: ItemSubType.Other,
+    attack: 0,
+    defense: 0,
+    weight: 0,
+    rarity: ItemRarities.Rare,
+    isEquipable: false,
+    isStackable: false,
+    isUsable: true,
+    isStorable: true,
+    hasUseWith: false,
+    isSolid: false,
+    isTwoHanded: false,
+    isItemContainer: false,
+    layer: 1,
+    allowedEquipSlotType: [],
+    maxStackSize: 1,
+    // Add metadata type and config
+    metadataType: MetadataType.CharacterSkin,
+    metadataConfig: {
+      availableCharacters,
+      atlasJSON: entitiesAtlasJSON,
+      atlasIMG: entitiesAtlasIMG,
+    },
+  },
+  {
+    _id: 'skin-premium-character-pack',
+    key: 'skin-premium-character-pack',
+    name: 'Premium Character Skin Pack',
+    description: 'A premium collection of exclusive character skins',
+    fullDescription: 'This exclusive premium pack gives you access to rare and unique character skins to stand out from the crowd.',
+    texturePath: 'items/premium_character_pack.png',
+    textureAtlas: 'items',
+    textureKey: 'items/premium_character_pack.png',
+    price: 24.99,
+    type: ItemType.Other,
+    subType: ItemSubType.Other,
+    attack: 0,
+    defense: 0,
+    weight: 0,
+    rarity: ItemRarities.Epic,
+    isEquipable: false,
+    isStackable: false,
+    isUsable: true,
+    isStorable: true,
+    hasUseWith: false,
+    isSolid: false,
+    isTwoHanded: false,
+    isItemContainer: false,
+    layer: 1,
+    allowedEquipSlotType: [],
+    maxStackSize: 1,
+    requiredAccountType: [UserAccountTypes.PremiumSilver],
+    // Add metadata type and config with the same character options
+    metadataType: MetadataType.CharacterSkin,
+    metadataConfig: {
+      availableCharacters,
+      atlasJSON: entitiesAtlasJSON,
+      atlasIMG: entitiesAtlasIMG,
+    },
+  }
+];
+
 // Create duplicated items once with unique keys
 const duplicatedItems: IStoreItem[] = [
   ...storeItems,
+  ...characterSkinItems,
   ...storeItems.map((item, index) => ({
     ...item,
     _id: `copy1-${item.key}-${index}`,
@@ -141,9 +238,12 @@ export const Default: Story = {
       items={duplicatedItems}
       packs={mockPacks}
       userAccountType={UserAccountTypes.Free}
-      onPurchase={(purchase: IPurchase) => {
+      onPurchase={(purchase: Partial<IPurchase>) => {
         console.log('Purchase details:', purchase);
+        return Promise.resolve(true);
       }}
+      onShowHistory={() => console.log('Show History clicked in story')}
+      onClose={() => console.log('Store closed')}
       atlasJSON={itemsAtlasJSON}
       atlasIMG={itemsAtlasIMG}
     />