@rpg-engine/long-bow 0.8.7 → 0.8.9

package/src/components/InformationCenter/sections/faq/FaqSection.tsx

@@ -1,51 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { PaginatedContent } from '../../../shared/PaginatedContent/PaginatedContent';
-import { IFaqItem } from '../../InformationCenter';
-
-interface IFaqSectionProps {
-  faqItems: IFaqItem[];
-  initialSearchQuery: string;
-  tabId: string;
-}
-
-export const FaqSection: React.FC<IFaqSectionProps> = ({
-  faqItems,
-  initialSearchQuery,
-  tabId,
-}) => {
-  const renderItem = (item: IFaqItem) => (
-    <FaqItem>
-      <Question>{item.question}</Question>
-      <Answer>{item.answer}</Answer>
-    </FaqItem>
-  );
-
-  return (
-    <PaginatedContent<IFaqItem>
-      items={faqItems}
-      renderItem={renderItem}
-      emptyMessage="No FAQ items found"
-      tabId={tabId}
-      layout="list"
-      itemsPerPage={10}
-    />
-  );
-};
-
-const FaqItem = styled.div`
-  background: rgba(0, 0, 0, 0.2);
-  padding: 1rem;
-  border-radius: 4px;
-`;
-
-const Question = styled.h3`
-  font-size: 1rem;
-  color: #fef08a;
-  margin-bottom: 0.5rem;
-`;
-
-const Answer = styled.p`
-  font-size: 0.9rem;
-  color: #ffffff;
-`;

package/src/components/InformationCenter/sections/tutorials/TutorialsSection.tsx

@@ -1,144 +0,0 @@
-import React, { useState } from 'react';
-import styled from 'styled-components';
-import { uiColors } from '../../../../constants/uiColors';
-import { IOptionsProps } from '../../../Dropdown';
-import { IVideoGuide } from '../../InformationCenter';
-import { InformationCenterTabView } from '../../InformationCenterTabView';
-
-interface ITutorialsSectionProps {
-  videoGuides: IVideoGuide[];
-  initialSearchQuery: string;
-}
-
-export const TutorialsSection: React.FC<ITutorialsSectionProps> = ({
-  videoGuides,
-  initialSearchQuery,
-}) => {
-  const [guidesSearchQuery, setGuidesSearchQuery] = useState(
-    initialSearchQuery
-  );
-  const [selectedGuideCategory, setSelectedGuideCategory] = useState<string>(
-    'all'
-  );
-
-  const guideCategoryOptions: IOptionsProps[] = [
-    { id: 0, value: 'all', option: 'All Guides' },
-    { id: 1, value: 'Combat', option: 'Combat' },
-    { id: 2, value: 'Crafting', option: 'Crafting' },
-    { id: 3, value: 'Exploration', option: 'Exploration' },
-    { id: 4, value: 'General', option: 'General' },
-  ];
-
-  const filterItems = (items: IVideoGuide[]) => {
-    return items.filter(
-      guide =>
-        (selectedGuideCategory === 'all' ||
-          guide.category === selectedGuideCategory) &&
-        (guide.title.toLowerCase().includes(guidesSearchQuery.toLowerCase()) ||
-          guide.description
-            .toLowerCase()
-            .includes(guidesSearchQuery.toLowerCase()))
-    );
-  };
-
-  const renderContent = (items: IVideoGuide[]) => (
-    <GuidesGrid>
-      {items.map(guide => (
-        <GuideItem key={guide.id}>
-          <GuideThumbnail>
-            <img
-              src={guide.thumbnailUrl || '/placeholder-thumbnail.png'}
-              alt={guide.title}
-            />
-          </GuideThumbnail>
-          <GuideContent>
-            <GuideTitle>{guide.title}</GuideTitle>
-            <GuideDescription>{guide.description}</GuideDescription>
-            <GuideCategory>{guide.category}</GuideCategory>
-          </GuideContent>
-        </GuideItem>
-      ))}
-    </GuidesGrid>
-  );
-
-  return (
-    <InformationCenterTabView
-      items={videoGuides}
-      searchQuery={guidesSearchQuery}
-      onSearchChange={setGuidesSearchQuery}
-      filterItems={filterItems}
-      renderContent={renderContent}
-      searchPlaceholder="Search guides..."
-      filterOptions={{
-        options: guideCategoryOptions,
-        selectedOption: selectedGuideCategory,
-        onOptionChange: setSelectedGuideCategory,
-      }}
-      emptyMessage="No guides found"
-      dependencies={[selectedGuideCategory]}
-    />
-  );
-};
-
-const GuidesGrid = styled.div`
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 16px;
-  padding: 16px;
-`;
-
-const GuideItem = styled.div`
-  background: rgba(0, 0, 0, 0.3);
-  border-radius: 4px;
-  overflow: hidden;
-  border: 1px solid ${uiColors.darkGray};
-  cursor: pointer;
-  transition: transform 0.2s ease;
-
-  &:hover {
-    transform: translateY(-2px);
-  }
-`;
-
-const GuideThumbnail = styled.div`
-  width: 100%;
-  height: 168px;
-  background: rgba(0, 0, 0, 0.2);
-  overflow: hidden;
-
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-`;
-
-const GuideContent = styled.div`
-  padding: 12px;
-`;
-
-const GuideTitle = styled.h3`
-  margin: 0;
-  font-size: 0.6rem;
-  color: ${uiColors.yellow};
-  font-family: 'Press Start 2P', cursive;
-  margin-bottom: 8px;
-`;
-
-const GuideDescription = 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 GuideCategory = 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;
-`;

package/src/components/Store/InternalStoreTab.tsx

@@ -1,142 +0,0 @@
-import { ItemType, UserAccountTypes } from '@rpg-engine/shared';
-import React, { useMemo, useState } from 'react';
-import styled from 'styled-components';
-import { usePagination } from '../CraftBook/hooks/usePagination';
-import { Pagination } from '../shared/Pagination/Pagination';
-import { SearchBar } from '../shared/SearchBar/SearchBar';
-import { StoreItemRow } from './StoreItemRow';
-import { IStoreItem } from './StoreTypes';
-
-const ITEMS_PER_PAGE = 4;
-
-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 const InternalStoreTab: React.FC<IInternalStoreTabProps> = ({
-  items,
-  atlasJSON,
-  atlasIMG,
-  onPurchase,
-  userGold,
-  userAccountType,
-  type = 'all',
-  initialSearchQuery = '',
-}) => {
-  const [searchQuery, setSearchQuery] = useState(initialSearchQuery);
-
-  const filteredItems = useMemo(() => {
-    return items.filter(item => {
-      const matchesSearch = item.name
-        .toLowerCase()
-        .includes(searchQuery.toLowerCase());
-
-      if (!matchesSearch) return false;
-
-      switch (type) {
-        case ItemType.Weapon:
-          return item.type === ItemType.Weapon;
-        case ItemType.Consumable:
-          return item.type === ItemType.Consumable;
-        case 'premium':
-          return (
-            item.requiredAccountType && item.requiredAccountType.length > 0
-          );
-        default:
-          return true;
-      }
-    });
-  }, [items, searchQuery, type]);
-
-  const {
-    currentPage,
-    setCurrentPage,
-    paginatedItems,
-    totalPages,
-  } = usePagination({
-    items: filteredItems,
-    itemsPerPage: ITEMS_PER_PAGE,
-    dependencies: [searchQuery, type],
-  });
-
-  return (
-    <Container>
-      <SearchContainer>
-        <SearchBar
-          value={searchQuery}
-          onChange={setSearchQuery}
-          placeholder="Search items..."
-        />
-      </SearchContainer>
-
-      <StoreContent>
-        {paginatedItems.length > 0 ? (
-          paginatedItems.map(item => (
-            <StoreItemRow
-              key={item._id}
-              item={item}
-              atlasJSON={atlasJSON}
-              atlasIMG={atlasIMG}
-              onPurchase={onPurchase}
-              userGold={userGold}
-              userAccountType={userAccountType}
-            />
-          ))
-        ) : (
-          <EmptyMessage>No items found</EmptyMessage>
-        )}
-      </StoreContent>
-
-      <PaginationContainer>
-        <Pagination
-          currentPage={currentPage}
-          totalPages={Math.max(1, totalPages)}
-          onPageChange={setCurrentPage}
-        />
-      </PaginationContainer>
-    </Container>
-  );
-};
-
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  padding: 1rem;
-  min-height: 400px;
-`;
-
-const SearchContainer = styled.div`
-  width: 100%;
-`;
-
-const StoreContent = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  flex: 1;
-`;
-
-const PaginationContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  padding-top: 1rem;
-  border-top: 1px solid rgba(255, 255, 255, 0.1);
-`;
-
-const EmptyMessage = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 2rem;
-  color: rgba(255, 255, 255, 0.5);
-  font-family: 'Press Start 2P', cursive;
-  font-size: 0.8rem;
-`;

package/src/components/Store/StoreTabContent.tsx

@@ -1,46 +0,0 @@
-import { UserAccountTypes } from '@rpg-engine/shared';
-import React from 'react';
-import { PaginatedContent } from '../shared/PaginatedContent/PaginatedContent';
-import { StoreItemRow } from './StoreItemRow';
-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 const StoreTabContent: React.FC<IStoreTabContentProps> = ({
-  items,
-  atlasJSON,
-  atlasIMG,
-  onPurchase,
-  userGold,
-  userAccountType,
-  tabId,
-}) => {
-  const renderItem = (item: IStoreItem) => (
-    <StoreItemRow
-      key={item._id}
-      item={item}
-      atlasJSON={atlasJSON}
-      atlasIMG={atlasIMG}
-      onPurchase={onPurchase}
-      userGold={userGold}
-      userAccountType={userAccountType}
-    />
-  );
-
-  return (
-    <PaginatedContent
-      items={items}
-      renderItem={renderItem}
-      emptyMessage="No items found"
-      tabId={tabId}
-    />
-  );
-};