@rpg-engine/long-bow 0.8.7 → 0.8.9

package/src/components/shared/SearchBar/SearchBar.tsx

@@ -1,52 +1,71 @@
 import React from 'react';
+import { FaSearch } from 'react-icons/fa';
 import styled from 'styled-components';
 
-interface SearchBarProps {
+interface ISearchBarProps {
   value: string;
   onChange: (value: string) => void;
   placeholder?: string;
   className?: string;
-  autoFocus?: boolean;
 }
 
-export const SearchBar: React.FC<SearchBarProps> = ({
+export const SearchBar: React.FC<ISearchBarProps> = ({
   value,
   onChange,
-  placeholder = 'Search...',
+  placeholder,
   className,
-  autoFocus = false,
 }) => {
   return (
     <Container className={className}>
-      <input
+      <Input
         type="text"
-        className="rpgui-input"
-        placeholder={placeholder}
         value={value}
         onChange={e => onChange(e.target.value)}
-        autoFocus={autoFocus}
+        placeholder={placeholder}
+        className="rpgui-input"
       />
+      <IconContainer>
+        <SearchIcon />
+      </IconContainer>
     </Container>
   );
 };
 
 const Container = styled.div`
-  input {
-    width: 100%;
-    font-size: 0.8rem;
-    padding: 8px 12px;
-    background-color: rgba(0, 0, 0, 0.3);
-    border: none;
-    color: white;
-    border-radius: 4px;
+  position: relative;
+  width: 100%;
+`;
 
-    &::placeholder {
-      color: rgba(255, 255, 255, 0.5);
-    }
+const Input = styled.input`
+  width: 100%;
+  padding-right: 2.5rem !important;
+  background: rgba(0, 0, 0, 0.2) !important;
+  border: 2px solid #f59e0b !important;
+  box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
+  color: #ffffff !important;
+  font-family: 'Press Start 2P', cursive !important;
+  font-size: 0.875rem !important;
 
-    &:focus {
-      outline: none;
-      background-color: rgba(0, 0, 0, 0.4);
-    }
+  &::placeholder {
+    color: rgba(255, 255, 255, 0.5) !important;
   }
 `;
+
+const IconContainer = styled.div`
+  position: absolute;
+  right: 0.75rem;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  pointer-events: none;
+`;
+
+const SearchIcon = styled(FaSearch)`
+  font-size: 1rem;
+  color: #f59e0b;
+  filter: drop-shadow(0 0 2px rgba(245, 158, 11, 0.3));
+`;

package/src/components/shared/SearchHeader/SearchHeader.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Dropdown, IOptionsProps } from '../../Dropdown';
+import { SearchBar } from '../SearchBar/SearchBar';
+
+interface ISearchHeaderProps {
+  searchOptions?: {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+  };
+  filterOptions?: {
+    options: IOptionsProps[];
+    selectedOption: string;
+    onOptionChange: (value: string) => void;
+  };
+  className?: string;
+}
+
+export const SearchHeader: React.FC<ISearchHeaderProps> = ({
+  searchOptions,
+  filterOptions,
+  className,
+}) => {
+  if (!searchOptions && !filterOptions) return null;
+
+  return (
+    <HeaderContainer className={className}>
+      <HeaderContent>
+        {searchOptions && (
+          <SearchContainer>
+            <StyledSearchBar
+              value={searchOptions.value}
+              onChange={searchOptions.onChange}
+              placeholder={searchOptions.placeholder || 'Search...'}
+            />
+          </SearchContainer>
+        )}
+        {filterOptions && (
+          <FilterContainer>
+            <StyledDropdown
+              options={filterOptions.options}
+              onChange={filterOptions.onOptionChange}
+              width="200px"
+            />
+          </FilterContainer>
+        )}
+      </HeaderContent>
+    </HeaderContainer>
+  );
+};
+
+const HeaderContainer = styled.div``;
+
+const HeaderContent = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  background: rgba(0, 0, 0, 0.2);
+  padding: 1rem;
+  border-radius: 4px;
+`;
+
+const SearchContainer = styled.div`
+  flex: 1;
+`;
+
+const FilterContainer = styled.div`
+  display: flex;
+  justify-content: flex-end;
+`;
+
+const StyledSearchBar = styled(SearchBar)`
+  width: 100%;
+`;
+
+const StyledDropdown = styled(Dropdown)`
+  min-width: 150px;
+`;

package/src/components/shared/ShoppingCart/CartCard.tsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../../../constants/uiColors';
+import { Ellipsis } from '../Ellipsis';
+
+export interface ICardProps {
+  title: string;
+  description: string;
+  imageUrl?: string | { src: string; default?: string };
+  category?: string;
+  onClick?: () => void;
+  footer?: React.ReactNode;
+  className?: string;
+}
+
+export const ShoppingCard: React.FC<ICardProps> = ({
+  title,
+  description,
+  imageUrl,
+  category,
+  onClick,
+  footer,
+  className,
+}) => {
+  const getImageSrc = () => {
+    if (!imageUrl) return '/placeholder-thumbnail.png';
+    if (typeof imageUrl === 'string') return imageUrl;
+    return imageUrl.default || imageUrl.src;
+  };
+
+  return (
+    <CardContainer onClick={onClick} className={className}>
+      {imageUrl && (
+        <CardThumbnail>
+          <img src={getImageSrc()} alt={title} />
+        </CardThumbnail>
+      )}
+      <CardContent>
+        <CardTitle>
+          <Ellipsis maxLines={1} maxWidth="100%">
+            {title}
+          </Ellipsis>
+        </CardTitle>
+        <CardDescription>
+          <Ellipsis maxLines={5} maxWidth="100%">
+            {description}
+          </Ellipsis>
+        </CardDescription>
+        {category && <CardCategory>{category}</CardCategory>}
+        {footer && <CardFooter>{footer}</CardFooter>}
+      </CardContent>
+    </CardContainer>
+  );
+};
+
+const CardContainer = styled.div<{ onClick?: () => void }>`
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 4px;
+  overflow: hidden;
+  border: 1px solid ${uiColors.darkGray};
+  cursor: ${props => (props.onClick ? 'pointer' : 'default')};
+  transition: transform 0.2s ease;
+
+  &:hover {
+    transform: ${props => (props.onClick ? 'translateY(-2px)' : 'none')};
+  }
+`;
+
+const CardThumbnail = styled.div`
+  width: 100%;
+  height: 168px;
+  background: rgba(0, 0, 0, 0.2);
+  overflow: hidden;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+`;
+
+const CardContent = styled.div`
+  padding: 12px;
+`;
+
+const CardTitle = styled.h3`
+  margin: 0;
+  font-size: 0.6rem;
+  color: ${uiColors.yellow};
+  font-family: 'Press Start 2P', cursive;
+  margin-bottom: 8px;
+`;
+
+const CardDescription = styled.p`
+  margin: 0;
+  font-size: 0.55rem;
+  color: ${uiColors.lightGray};
+  font-family: 'Press Start 2P', cursive;
+  margin-bottom: 8px;
+  line-height: 1.4;
+`;
+
+const CardCategory = styled.span`
+  font-size: 0.5rem;
+  color: ${uiColors.yellow};
+  font-family: 'Press Start 2P', cursive;
+  background: rgba(255, 255, 255, 0.1);
+  padding: 4px 8px;
+  border-radius: 4px;
+`;
+
+const CardFooter = styled.div`
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+`;

package/src/components/shared/ShoppingCart/CartCardHorizontal.tsx

@@ -0,0 +1,120 @@
+import React from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../../../constants/uiColors';
+import { Ellipsis } from '../Ellipsis';
+
+export interface ICardProps {
+  title: string;
+  description: string;
+  imageUrl?: string | { src: string; default?: string };
+  onClick?: () => void;
+  footer?: React.ReactNode;
+  className?: string;
+}
+
+export const ShoppingCardHorizontal: React.FC<ICardProps> = ({
+  title,
+  description,
+  imageUrl,
+  onClick,
+  footer,
+  className,
+}) => {
+  const getImageSrc = () => {
+    if (!imageUrl) return '/placeholder-thumbnail.png';
+    if (typeof imageUrl === 'string') return imageUrl;
+    return imageUrl.default || imageUrl.src;
+  };
+
+  return (
+    <CardContainer onClick={onClick} className={className}>
+      <LeftSection>
+        {imageUrl && (
+          <CardThumbnail>
+            <img src={getImageSrc()} alt={title} />
+          </CardThumbnail>
+        )}
+      </LeftSection>
+      <RightSection>
+        <CardTitle>
+          <Ellipsis maxLines={1} maxWidth="100%">
+            {title}
+          </Ellipsis>
+        </CardTitle>
+        <CardDescription>
+          <Ellipsis maxLines={3} maxWidth="100%">
+            {description}
+          </Ellipsis>
+        </CardDescription>
+        {footer && (
+          <CardFooter onClick={e => e.stopPropagation()}>{footer}</CardFooter>
+        )}
+      </RightSection>
+    </CardContainer>
+  );
+};
+
+const CardContainer = styled.div<{ onClick?: () => void }>`
+  display: flex;
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 4px;
+  border: 1px solid ${uiColors.darkGray};
+  cursor: ${props => (props.onClick ? 'pointer' : 'default')};
+  transition: transform 0.2s ease;
+
+  &:hover {
+    transform: ${props => (props.onClick ? 'translateY(-2px)' : 'none')};
+  }
+
+  max-width: 380px;
+`;
+
+const LeftSection = styled.div`
+  width: 120px;
+  flex-shrink: 0;
+`;
+
+const RightSection = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 12px;
+  min-width: 0;
+  max-width: 100%;
+`;
+
+const CardThumbnail = styled.div`
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.2);
+  overflow: hidden;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+`;
+
+const CardTitle = styled.h3`
+  margin: 0;
+  font-size: 0.6rem;
+  color: ${uiColors.yellow};
+  font-family: 'Press Start 2P', cursive;
+  margin-bottom: 8px;
+`;
+
+const CardDescription = styled.p`
+  margin: 0;
+  font-size: 0.55rem;
+  color: ${uiColors.lightGray};
+  font-family: 'Press Start 2P', cursive;
+  line-height: 1.4;
+  margin-bottom: 8px;
+`;
+
+const CardFooter = styled.div`
+  margin-top: auto;
+  padding-top: 8px;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+`;

package/src/components/shared/SpriteFromAtlas.tsx

@@ -129,4 +129,6 @@ const ImgSprite = styled.div<IImgSpriteProps>`
     return filters.length ? filters.join(' ') : 'none';
   }};
   opacity: ${props => props.opacity};
+  border-radius: ${props => props.borderRadius || '0'};
+  overflow: hidden;
 `;

package/src/index.tsx

@@ -22,6 +22,7 @@ export * from './components/Input';
 export * from './components/InternalTabs/InternalTabs';
 export { ErrorBoundary } from './components/Item/Inventory/ErrorBoundary';
 export * from './components/Item/Inventory/ItemContainer';
+export * from './components/Item/Inventory/ItemPropertySimpleHandler';
 export * from './components/Item/Inventory/ItemQuantitySelectorModal';
 export * from './components/Item/Inventory/ItemSlot';
 export * from './components/itemSelector/ItemSelector';

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

@@ -2,8 +2,9 @@ import { 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 { IStoreItem } from '../../../components/Store/StoreTypes';
+import { IItemPack, IPurchase, IStoreItem } from '../../../components/Store/StoreTypes';
 import itemsAtlasJSON from '../../../mocks/atlas/items/items.json';
 import itemsAtlasIMG from '../../../mocks/atlas/items/items.png';
 import { mockItems } from '../../../mocks/informationCenter.mocks';
@@ -85,15 +86,64 @@ const duplicatedItems: IStoreItem[] = [
   })),
 ];
 
+// Mock packs data
+const mockPacks: IItemPack[] = [
+  // Regular Packs
+  {
+    key: 'starter-pack',
+    title: 'Starter Pack',
+    description: 'Perfect for beginners! Get essential items to start your adventure.',
+    priceUSD: 4.99,
+    image: customSkinImage,
+  },
+  {
+    key: 'custom-skin-pack',
+    title: 'Custom Skin Pack',
+    description: 'Get a unique look with this custom skin pack! Stand out from the crowd.',
+    priceUSD: 7.99,
+    image: customSkinImage,
+  },
+
+   {
+    key: 'ultimate-pack',
+    title: '👑 Ultimate Premium Pack',
+    description: 'The most exclusive collection of items, effects, and perks. Includes everything from previous tiers plus legendary items!',
+    priceUSD: 99.99,
+    image: customSkinImage,
+  },
+    {
+    key: 'gold-pack',
+    title: '🥇 Gold Premium Pack',
+    description: 'The ultimate premium experience with rare items, unique effects, and exclusive content. For true champions!',
+    priceUSD: 49.99,
+    image: customSkinImage,
+  },  
+  {
+    key: 'silver-pack',
+    title: '🥈 Silver Premium Pack',
+    description: 'Enhanced premium features with more exclusive items and special effects. For dedicated adventurers.',
+    priceUSD: 24.99,
+    image: customSkinImage,
+  },
+  {
+    key: 'bronze-pack',
+    title: '🥉 Bronze Premium Pack',
+    description: 'Start your premium journey with exclusive items and basic perks. Perfect for casual players.',
+    priceUSD: 14.99,
+    image: customSkinImage,
+  },
+
+];
+
 // Create the story with the static mock data
 export const Default: Story = {
   render: () => (
     <Store
       items={duplicatedItems}
-      userGold={1000}
+      packs={mockPacks}
       userAccountType={UserAccountTypes.Free}
-      onPurchase={(item: IStoreItem, quantity: number) => {
-        console.log('Purchased', quantity, 'x', item.name);
+      onPurchase={(purchase: IPurchase) => {
+        console.log('Purchase details:', purchase);
       }}
       atlasJSON={itemsAtlasJSON}
       atlasIMG={itemsAtlasIMG}

package/src/stories/UI/buttonsAndInputs/CTAButton.stories.tsx

@@ -0,0 +1,77 @@
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { FaPlus, FaShoppingBag, FaShoppingCart, FaTrash } from 'react-icons/fa';
+import { RPGUIRoot } from '../../../components/RPGUI/RPGUIRoot';
+import { CTAButton } from '../../../components/shared/CTAButton/CTAButton';
+
+interface ICTAButtonProps {
+  icon: React.ReactNode;
+  label?: React.ReactNode;
+  onClick?: () => void;
+  fullWidth?: boolean;
+  textColor?: string;
+  iconColor?: string;
+  disabled?: boolean;
+}
+
+const meta: Meta = {
+  title: 'UI/Buttons & Inputs/CTAButton',
+  component: CTAButton,
+  argTypes: {
+    icon: { control: false },
+    label: { control: 'text' },
+    fullWidth: { control: 'boolean' },
+    textColor: { control: 'color' },
+    iconColor: { control: 'color' },
+    disabled: { control: 'boolean' },
+  },
+  decorators: [
+    Story => (
+      <RPGUIRoot>
+        <div style={{ padding: '2rem', background: '#333' }}>
+          <Story />
+        </div>
+      </RPGUIRoot>
+    ),
+  ],
+};
+
+export default meta;
+
+const Template: Story<ICTAButtonProps> = args => <CTAButton {...args} />;
+
+export const CartButton = Template.bind({});
+CartButton.args = {
+  icon: <FaShoppingCart />,
+  label: '3',
+};
+
+export const DeleteButton = Template.bind({});
+DeleteButton.args = {
+  icon: <FaTrash />,
+  textColor: '#ef4444',
+  iconColor: '#ef4444',
+};
+
+export const AddButton = Template.bind({});
+AddButton.args = {
+  icon: <FaPlus />,
+  label: 'Add Item',
+  textColor: '#22c55e',
+  iconColor: '#22c55e',
+};
+
+export const CheckoutButton = Template.bind({});
+CheckoutButton.args = {
+  icon: <FaShoppingBag />,
+  label: 'Complete Purchase',
+  fullWidth: true,
+};
+
+export const DisabledCheckoutButton = Template.bind({});
+DisabledCheckoutButton.args = {
+  icon: <FaShoppingBag />,
+  label: 'Complete Purchase',
+  fullWidth: true,
+  disabled: true,
+};

package/src/stories/UI/dropdownsAndSelectors/ItemPropertyColorSelector.stories.tsx

@@ -0,0 +1,77 @@
+import { Meta, Story } from '@storybook/react';
+import React, { useState } from 'react';
+import { ItemPropertySimpleHandler } from '../../../components/Item/Inventory/ItemPropertySimpleHandler';
+
+export default {
+  title: 'UI/Dropdowns & Selectors/ItemPropertySimpleHandler',
+  component: ItemPropertySimpleHandler,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A simple handler for selecting and confirming item properties, including colors.',
+      },
+    },
+  },
+  argTypes: {
+    isOpen: {
+      control: { type: 'boolean' },
+      description: 'Controls whether the color selector is open.',
+    },
+    selectedColor: {
+      control: { type: 'color' },
+      description: 'Initial selected color.',
+    },
+    onClose: {
+      action: 'onClose',
+      description: 'Callback when the selector is closed.',
+    },
+    onConfirm: {
+      action: 'onConfirm',
+      description: 'Callback when a color is confirmed.',
+    },
+    onChange: {
+      action: 'onChange',
+      description: 'Callback when a color is being selected.',
+    },
+  },
+} as Meta;
+
+const Template: Story = args => {
+  const [isOpen, setIsOpen] = useState(args.isOpen ?? true);
+  const [currentColor, setCurrentColor] = useState(
+    args.selectedColor || '#000000'
+  );
+
+  const handleClose = () => {
+    setIsOpen(false);
+    args.onClose?.();
+  };
+
+  const handleConfirm = (color: string) => {
+    setCurrentColor(color);
+    setIsOpen(false);
+    args.onConfirm?.(color);
+  };
+
+  const handleChange = (color: string) => {
+    setCurrentColor(color);
+    args.onChange?.(color);
+  };
+
+  return (
+    <ItemPropertySimpleHandler
+      isOpen={isOpen}
+      selectedColor={currentColor}
+      onClose={handleClose}
+      onConfirm={handleConfirm}
+      onChange={handleChange}
+    />
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  isOpen: true,
+  selectedColor: '#ff0000',
+};

package/dist/components/Store/InternalStoreTab.d.ts

@@ -1,15 +0,0 @@
-import { ItemType, UserAccountTypes } from '@rpg-engine/shared';
-import React from 'react';
-import { IStoreItem } from './StoreTypes';
-interface IInternalStoreTabProps {
-    items: IStoreItem[];
-    atlasJSON: Record<string, any>;
-    atlasIMG: string;
-    onPurchase: (item: IStoreItem, quantity: number) => void;
-    userGold: number;
-    userAccountType: UserAccountTypes;
-    type?: ItemType | 'premium' | 'all';
-    initialSearchQuery?: string;
-}
-export declare const InternalStoreTab: React.FC<IInternalStoreTabProps>;
-export {};

package/dist/components/Store/StoreTabContent.d.ts

@@ -1,14 +0,0 @@
-import { UserAccountTypes } from '@rpg-engine/shared';
-import React from 'react';
-import { IStoreItem } from './StoreTypes';
-interface IStoreTabContentProps {
-    items: IStoreItem[];
-    atlasJSON: Record<string, any>;
-    atlasIMG: string;
-    onPurchase: (item: IStoreItem, quantity: number) => void;
-    userGold: number;
-    userAccountType: UserAccountTypes;
-    tabId: string;
-}
-export declare const StoreTabContent: React.FC<IStoreTabContentProps>;
-export {};