@rpg-engine/long-bow 0.8.182 → 0.8.184

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

@@ -4,8 +4,10 @@ import React from 'react';
 import { RPGUIRoot } from '../../..';
 import { CharacterMarketplacePanel } from '../../../components/Marketplace/CharacterMarketplacePanel';
 import { MyCharacterListingsPanel } from '../../../components/Marketplace/MyCharacterListingsPanel';
-import atlasJSON from '../../../mocks/atlas/items/items.json';
-import atlasIMG from '../../../mocks/atlas/items/items.png';
+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';
 
 const meta: Meta = {
   title: 'Features/Marketplace/CharacterMarketplace',
@@ -38,7 +40,7 @@ const mockCharacterListings: ICharacterListing[] = [
         { slot: 'weapon', itemName: 'Broad Sword', itemKey: 'items/broad-sword', rarity: 'Common' },
         { slot: 'armor', itemName: 'Steel Armor', itemKey: 'items/steel-armor', rarity: 'Rare' },
       ],
-      textureKey: 'characters/warrior/male',
+      textureKey: 'black-knight',
     },
     createdAt: daysAgo(3),
     updatedAt: daysAgo(3),
@@ -61,7 +63,7 @@ const mockCharacterListings: ICharacterListing[] = [
       equipment: [
         { slot: 'weapon', itemName: 'Fire Staff', itemKey: 'items/fire-staff', rarity: 'Epic' },
       ],
-      textureKey: 'characters/mage/male',
+      textureKey: 'pink-mage-1',
     },
     createdAt: daysAgo(1),
     updatedAt: daysAgo(1),
@@ -84,7 +86,7 @@ const mockCharacterListings: ICharacterListing[] = [
       equipment: [
         { slot: 'weapon', itemName: 'Dagger', itemKey: 'items/dagger', rarity: 'Uncommon' },
       ],
-      textureKey: 'characters/rogue/female',
+      textureKey: 'redhair-girl-1',
     },
     createdAt: daysAgo(7),
     updatedAt: daysAgo(1),
@@ -108,7 +110,7 @@ const mockCharacterListings: ICharacterListing[] = [
         { slot: 'weapon', itemName: 'Holy Sword', itemKey: 'items/holy-sword', rarity: 'Legendary' },
         { slot: 'armor', itemName: 'Divine Armor', itemKey: 'items/divine-armor', rarity: 'Epic' },
       ],
-      textureKey: 'characters/paladin/male',
+      textureKey: 'dragon-knight',
     },
     createdAt: daysAgo(14),
     updatedAt: daysAgo(14),
@@ -131,7 +133,7 @@ const mockCharacterListings: ICharacterListing[] = [
       equipment: [
         { slot: 'weapon', itemName: 'Longbow', itemKey: 'items/longbow', rarity: 'Rare' },
       ],
-      textureKey: 'characters/archer/female',
+      textureKey: 'pink-hair-girl-1',
     },
     createdAt: daysAgo(2),
     updatedAt: daysAgo(2),
@@ -157,7 +159,7 @@ const mockMyCharacterListings: ICharacterListing[] = [
       equipment: [
         { slot: 'weapon', itemName: 'Epic Sword', itemKey: 'items/epic-sword', rarity: 'Epic' },
       ],
-      textureKey: 'characters/warrior/male',
+      textureKey: 'black-knight',
     },
     createdAt: daysAgo(10),
     updatedAt: daysAgo(10),
@@ -180,7 +182,7 @@ const mockMyCharacterListings: ICharacterListing[] = [
       equipment: [
         { slot: 'weapon', itemName: 'Basic Staff', itemKey: 'items/staff', rarity: 'Common' },
       ],
-      textureKey: 'characters/mage/female',
+      textureKey: 'red-mage-1',
     },
     createdAt: daysAgo(5),
     updatedAt: daysAgo(1),
@@ -196,8 +198,10 @@ export const CharacterBrowse: Story = () => (
       itemsPerPage={8}
       onPageChange={() => {}}
       onCharacterBuy={() => {}}
-      atlasJSON={atlasJSON}
-      atlasIMG={atlasIMG}
+      atlasJSON={itemsAtlasJSON}
+      atlasIMG={itemsAtlasIMG}
+      characterAtlasJSON={entitiesAtlasJSON}
+      characterAtlasIMG={entitiesAtlasIMG}
       nameFilter=""
       onNameFilterChange={() => {}}
       isLoading={false}
@@ -216,8 +220,10 @@ export const CharacterBrowseLoading: Story = () => (
       itemsPerPage={8}
       onPageChange={() => {}}
       onCharacterBuy={() => {}}
-      atlasJSON={atlasJSON}
-      atlasIMG={atlasIMG}
+      atlasJSON={itemsAtlasJSON}
+      atlasIMG={itemsAtlasIMG}
+      characterAtlasJSON={entitiesAtlasJSON}
+      characterAtlasIMG={entitiesAtlasIMG}
       nameFilter=""
       onNameFilterChange={() => {}}
       isLoading={true}
@@ -236,8 +242,10 @@ export const CharacterBrowseEmpty: Story = () => (
       itemsPerPage={8}
       onPageChange={() => {}}
       onCharacterBuy={() => {}}
-      atlasJSON={atlasJSON}
-      atlasIMG={atlasIMG}
+      atlasJSON={itemsAtlasJSON}
+      atlasIMG={itemsAtlasIMG}
+      characterAtlasJSON={entitiesAtlasJSON}
+      characterAtlasIMG={entitiesAtlasIMG}
       nameFilter=""
       onNameFilterChange={() => {}}
       isLoading={false}
@@ -258,8 +266,10 @@ export const CharacterBrowseFiltered: Story = () => (
       itemsPerPage={8}
       onPageChange={() => {}}
       onCharacterBuy={() => {}}
-      atlasJSON={atlasJSON}
-      atlasIMG={atlasIMG}
+      atlasJSON={itemsAtlasJSON}
+      atlasIMG={itemsAtlasIMG}
+      characterAtlasJSON={entitiesAtlasJSON}
+      characterAtlasIMG={entitiesAtlasIMG}
       nameFilter="warrior"
       onNameFilterChange={() => {}}
       isLoading={false}
@@ -278,8 +288,10 @@ export const MyCharacterListings: Story = () => (
       itemsPerPage={8}
       onPageChange={() => {}}
       onCharacterDelist={() => {}}
-      atlasJSON={atlasJSON}
-      atlasIMG={atlasIMG}
+      atlasJSON={itemsAtlasJSON}
+      atlasIMG={itemsAtlasIMG}
+      characterAtlasJSON={entitiesAtlasJSON}
+      characterAtlasIMG={entitiesAtlasIMG}
     />
   </RPGUIRoot>
 );
@@ -295,8 +307,10 @@ export const MyCharacterListingsEmpty: Story = () => (
       itemsPerPage={8}
       onPageChange={() => {}}
       onCharacterDelist={() => {}}
-      atlasJSON={atlasJSON}
-      atlasIMG={atlasIMG}
+      atlasJSON={itemsAtlasJSON}
+      atlasIMG={itemsAtlasIMG}
+      characterAtlasJSON={entitiesAtlasJSON}
+      characterAtlasIMG={entitiesAtlasIMG}
     />
   </RPGUIRoot>
 );
@@ -312,8 +326,10 @@ export const CharacterListingPending: Story = () => (
       itemsPerPage={8}
       onPageChange={() => {}}
       onCharacterBuy={() => {}}
-      atlasJSON={atlasJSON}
-      atlasIMG={atlasIMG}
+      atlasJSON={itemsAtlasJSON}
+      atlasIMG={itemsAtlasIMG}
+      characterAtlasJSON={entitiesAtlasJSON}
+      characterAtlasIMG={entitiesAtlasIMG}
       nameFilter=""
       onNameFilterChange={() => {}}
       isLoading={false}

package/src/stories/shared/RadioOption.stories.tsx

@@ -0,0 +1,93 @@
+import { Meta, Story } from '@storybook/react';
+import React, { useState } from 'react';
+import { RPGUIRoot } from '../../components/RPGUI/RPGUIRoot';
+import {
+  IRadioOptionProps,
+  RadioOption,
+  RadioOptionLabel,
+  RadioOptionSub,
+} from '../../components/shared/RadioOption';
+
+const meta: Meta = {
+  title: 'Shared/RadioOption',
+  component: RadioOption,
+  decorators: [
+    Story => (
+      <RPGUIRoot>
+        <div style={{ padding: '2rem', background: '#1a1a2e', minWidth: '320px' }}>
+          <Story />
+        </div>
+      </RPGUIRoot>
+    ),
+  ],
+};
+
+export default meta;
+
+// ---------------------------------------------------------------------------
+// Single unselected option
+// ---------------------------------------------------------------------------
+export const Unselected: Story<IRadioOptionProps> = () => (
+  <RadioOption selected={false} onSelect={() => {}}>
+    <div>
+      <RadioOptionLabel>Pay with Stripe</RadioOptionLabel>
+    </div>
+  </RadioOption>
+);
+
+// ---------------------------------------------------------------------------
+// Single selected option
+// ---------------------------------------------------------------------------
+export const Selected: Story<IRadioOptionProps> = () => (
+  <RadioOption selected={true} onSelect={() => {}}>
+    <div>
+      <RadioOptionLabel>Pay with Stripe</RadioOptionLabel>
+    </div>
+  </RadioOption>
+);
+
+// ---------------------------------------------------------------------------
+// Disabled option
+// ---------------------------------------------------------------------------
+export const Disabled: Story<IRadioOptionProps> = () => (
+  <RadioOption selected={false} disabled={true} onSelect={() => {}}>
+    <div>
+      <RadioOptionLabel $disabled={true}>Pay with DC Wallet</RadioOptionLabel>
+      <RadioOptionSub>Insufficient balance</RadioOptionSub>
+    </div>
+  </RadioOption>
+);
+
+// ---------------------------------------------------------------------------
+// Interactive group of 3 options
+// ---------------------------------------------------------------------------
+const OPTIONS = [
+  { id: 'stripe', label: 'Pay with Stripe', sub: 'Credit / debit card' },
+  { id: 'dc', label: 'Pay with DC Wallet', sub: '250 DC available' },
+  { id: 'paypal', label: 'Pay with PayPal', sub: 'Coming soon' },
+] as const;
+
+type IOptionId = (typeof OPTIONS)[number]['id'];
+
+export const InteractiveGroup: Story = () => {
+  const [selected, setSelected] = useState<IOptionId>('stripe');
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+      {OPTIONS.map(opt => (
+        <RadioOption
+          key={opt.id}
+          selected={selected === opt.id}
+          onSelect={() => setSelected(opt.id)}
+        >
+          <div>
+            <RadioOptionLabel>{opt.label}</RadioOptionLabel>
+            <div style={{ marginTop: '3px' }}>
+              <RadioOptionSub>{opt.sub}</RadioOptionSub>
+            </div>
+          </div>
+        </RadioOption>
+      ))}
+    </div>
+  );
+};