@rpg-engine/long-bow 0.7.91 → 0.7.92

package/src/components/shared/Pagination/Pagination.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { FaChevronLeft, FaChevronRight } from 'react-icons/fa';
+import styled from 'styled-components';
+import { uiColors } from '../../../constants/uiColors';
+
+interface PaginationProps {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+  className?: string;
+}
+
+export const Pagination: React.FC<PaginationProps> = ({
+  currentPage,
+  totalPages,
+  onPageChange,
+  className,
+}) => {
+  return (
+    <Container className={className}>
+      <PaginationButton
+        onClick={() => onPageChange(Math.max(1, currentPage - 1))}
+        disabled={currentPage === 1}
+      >
+        <FaChevronLeft size={12} />
+      </PaginationButton>
+      <PageInfo>
+        Page {currentPage} of {totalPages}
+      </PageInfo>
+      <PaginationButton
+        onClick={() => onPageChange(Math.min(totalPages, currentPage + 1))}
+        disabled={currentPage === totalPages}
+      >
+        <FaChevronRight size={12} />
+      </PaginationButton>
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  padding: 8px;
+`;
+
+const PaginationButton = styled.button<{ disabled?: boolean }>`
+  background: none;
+  border: none;
+  color: ${props => (props.disabled ? uiColors.darkGray : uiColors.yellow)};
+  cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};
+  opacity: ${props => (props.disabled ? 0.5 : 0.8)};
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: opacity 0.2s;
+
+  &:hover:not(:disabled) {
+    opacity: 1;
+  }
+`;
+
+const PageInfo = styled.div`
+  color: ${uiColors.lightGray};
+  font-size: 0.8rem;
+  font-family: 'Press Start 2P', cursive;
+`;

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import styled from 'styled-components';
+
+interface SearchBarProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  className?: string;
+  autoFocus?: boolean;
+}
+
+export const SearchBar: React.FC<SearchBarProps> = ({
+  value,
+  onChange,
+  placeholder = 'Search...',
+  className,
+  autoFocus = false,
+}) => {
+  return (
+    <Container className={className}>
+      <input
+        type="text"
+        className="rpgui-input"
+        placeholder={placeholder}
+        value={value}
+        onChange={e => onChange(e.target.value)}
+        autoFocus={autoFocus}
+      />
+    </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;
+
+    &::placeholder {
+      color: rgba(255, 255, 255, 0.5);
+    }
+
+    &:focus {
+      outline: none;
+      background-color: rgba(0, 0, 0, 0.4);
+    }
+  }
+`;

package/src/hooks/useLocalStorage.ts

@@ -0,0 +1,44 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+
+import { useState } from 'react';
+
+export function useLocalStorage<T>(key: string, initialValue: T) {
+  // State to store our value
+  // Pass initial state function to useState so logic is only executed once
+  const [storedValue, setStoredValue] = useState<T>(() => {
+    if (typeof window === 'undefined') {
+      return initialValue;
+    }
+    try {
+      // Get from local storage by key
+      const item = window.localStorage.getItem(key);
+      // Parse stored json or if none return initialValue
+      return item ? JSON.parse(item) : initialValue;
+    } catch (error) {
+      // If error also return initialValue
+      console.log(error);
+      return initialValue;
+    }
+  });
+
+  // Return a wrapped version of useState's setter function that ...
+  // ... persists the new value to localStorage.
+  const setValue = (value: T | ((val: T) => T)) => {
+    try {
+      // Allow value to be a function so we have same API as useState
+      const valueToStore =
+        value instanceof Function ? value(storedValue) : value;
+      // Save state
+      setStoredValue(valueToStore);
+      // Save to local storage
+      if (typeof window !== 'undefined') {
+        window.localStorage.setItem(key, JSON.stringify(valueToStore));
+      }
+    } catch (error) {
+      // A more advanced implementation would handle the error case
+      console.log(error);
+    }
+  };
+
+  return [storedValue, setValue] as const;
+}

package/src/stories/Features/craftbook/CraftBook.stories.tsx

@@ -7,9 +7,37 @@ import atlasJSON from '../../../mocks/atlas/items/items.json';
 import atlasIMG from '../../../mocks/atlas/items/items.png';
 import { equipmentSetMock } from '../../../mocks/equipmentSet.mocks';
 
+// Generate more mock items for pagination testing
+const generateMoreItems = (baseItems: typeof craftableItems) => {
+  const moreItems = [...baseItems];
+
+  // Create 3 variations of each item
+  baseItems.forEach(item => {
+    for (let i = 1; i <= 3; i++) {
+      moreItems.push({
+        ...item,
+        key: `${item.key}-${i}`,
+        name: `${item.name} ${i}`,
+        ingredients: item.ingredients.map(ing => ({
+          ...ing,
+          key: `${ing.key}-${i}`,
+          qty: ing.qty + i,
+        })),
+      });
+    }
+  });
+
+  return moreItems;
+};
+
+const extendedCraftableItems = generateMoreItems(craftableItems);
+
 const meta: Meta = {
   title: 'Features/Crafting/Craft Book',
   component: CraftBook,
+  parameters: {
+    layout: 'fullscreen',
+  },
 };
 
 export default meta;
@@ -21,7 +49,7 @@ const Template: Story = args => (
       atlasJSON={atlasJSON}
       onSelect={onSelect}
       onClose={() => console.log('closing Equipment Set Container')}
-      craftablesItems={craftableItems}
+      craftablesItems={extendedCraftableItems}
       onCraftItem={(value, maxCraftable) => {
         console.log('Crafting:', {
           itemKey: value,
@@ -41,3 +69,15 @@ const onSelect = (value: string) => {
 };
 
 Default.args = {};
+
+// Add a story with search pre-filled
+export const WithSearch = Template.bind({});
+WithSearch.args = {
+  searchTerm: 'sword',
+};
+
+// Add a story with a specific category selected
+export const WithCategory = Template.bind({});
+WithCategory.args = {
+  savedSelectedType: 'Weapon',
+};