@rpg-engine/long-bow 0.8.31 → 0.8.32

package/src/components/shared/AdvancedFilters/AdvancedFilters.tsx

@@ -0,0 +1,279 @@
+import React from 'react';
+import {
+  AiFillCaretRight,
+  AiFillFilter,
+  AiOutlineFilter,
+} from 'react-icons/ai';
+import styled from 'styled-components';
+import { Dropdown } from '../../Dropdown';
+import { Input } from '../../Input';
+
+export interface IFilterOption {
+  id: number;
+  value: string;
+  option: string;
+}
+
+export interface IFilterSection {
+  type: 'range' | 'dropdown';
+  label: string;
+  key: string;
+  options?: IFilterOption[];
+  value?: string | [number | undefined, number | undefined];
+  onChange: (value: any) => void;
+}
+
+interface IAdvancedFiltersProps {
+  isOpen: boolean;
+  onToggle: () => void;
+  sections: IFilterSection[];
+  onClearAll: () => void;
+  hasActiveFilters: boolean;
+}
+
+export const AdvancedFilters: React.FC<IAdvancedFiltersProps> = ({
+  isOpen,
+  onToggle,
+  sections,
+  onClearAll,
+  hasActiveFilters,
+}) => {
+  const renderFilterSection = (section: IFilterSection) => {
+    switch (section.type) {
+      case 'range':
+        const rangeValue = section.value as [
+          number | undefined,
+          number | undefined
+        ];
+        return (
+          <FilterSection key={section.key}>
+            <Label>{section.label}</Label>
+            <RangeInputs>
+              <Input
+                type="number"
+                min={0}
+                placeholder="Min"
+                value={rangeValue[0] || ''}
+                onChange={e =>
+                  section.onChange([
+                    e.target.value ? Number(e.target.value) : undefined,
+                    rangeValue[1],
+                  ])
+                }
+              />
+              <AiFillCaretRight />
+              <Input
+                type="number"
+                min={0}
+                placeholder="Max"
+                value={rangeValue[1] || ''}
+                onChange={e =>
+                  section.onChange([
+                    rangeValue[0],
+                    e.target.value ? Number(e.target.value) : undefined,
+                  ])
+                }
+              />
+            </RangeInputs>
+          </FilterSection>
+        );
+
+      case 'dropdown':
+        return (
+          <FilterSection key={section.key}>
+            <Label>{section.label}</Label>
+            <Dropdown
+              options={section.options || []}
+              onChange={section.onChange}
+              width="100%"
+            />
+          </FilterSection>
+        );
+
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <Container>
+      <FilterButton onClick={onToggle} $hasActiveFilters={hasActiveFilters}>
+        {hasActiveFilters ? (
+          <AiFillFilter size={20} />
+        ) : (
+          <AiOutlineFilter size={20} />
+        )}
+        <FilterCount $visible={hasActiveFilters}>
+          {
+            sections.filter(section => {
+              if (section.type === 'range') {
+                const rangeValue = section.value as [
+                  number | undefined,
+                  number | undefined
+                ];
+                return (
+                  rangeValue[0] !== undefined || rangeValue[1] !== undefined
+                );
+              }
+              return section.value !== 'all';
+            }).length
+          }
+        </FilterCount>
+      </FilterButton>
+
+      {isOpen && (
+        <FiltersPanel>
+          <FilterHeader>
+            <FilterTitle>Advanced Filters</FilterTitle>
+          </FilterHeader>
+
+          {sections.map(renderFilterSection)}
+
+          {hasActiveFilters && (
+            <ClearFiltersButton onClick={onClearAll}>
+              Clear All Filters
+            </ClearFiltersButton>
+          )}
+        </FiltersPanel>
+      )}
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  position: relative;
+  margin-left: 0.5rem;
+`;
+
+const FilterButton = styled.button<{ $hasActiveFilters: boolean }>`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  background: transparent;
+  border: none;
+  color: ${({ $hasActiveFilters }) =>
+    $hasActiveFilters ? '#ffd700' : 'rgba(255, 255, 255, 0.8)'};
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &:hover {
+    color: ${({ $hasActiveFilters }) =>
+      $hasActiveFilters ? '#ffd700' : '#ffffff'};
+  }
+`;
+
+const FilterCount = styled.div<{ $visible: boolean }>`
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  background: #ffd700;
+  color: #000;
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+  font-size: 10px;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: ${({ $visible }) => ($visible ? 1 : 0)};
+  transform: scale(${({ $visible }) => ($visible ? 1 : 0.5)});
+  transition: all 0.2s;
+`;
+
+const FiltersPanel = styled.div`
+  position: absolute;
+  top: calc(100% + 0.75rem);
+  right: -8px;
+  background: #1a1a1a;
+  border: 1px solid #333;
+  border-radius: 6px;
+  padding: 1rem;
+  z-index: 1000;
+  min-width: 280px;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+
+  &:before {
+    content: '';
+    position: absolute;
+    top: -6px;
+    right: 16px;
+    width: 12px;
+    height: 12px;
+    background: #1a1a1a;
+    border-left: 1px solid #333;
+    border-top: 1px solid #333;
+    transform: rotate(45deg);
+  }
+`;
+
+const FilterHeader = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 0.75rem;
+  margin-bottom: 0.5rem;
+  border-bottom: 1px solid #333;
+`;
+
+const FilterTitle = styled.div`
+  font-weight: 600;
+  color: #ffd700;
+  font-size: 0.875rem;
+`;
+
+const FilterSection = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+`;
+
+const Label = styled.div`
+  color: #999;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+`;
+
+const RangeInputs = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+
+  input {
+    width: 80px;
+    background: #262626 !important;
+    border: 1px solid #333 !important;
+    color: #fff !important;
+  }
+
+  svg {
+    color: #666;
+    font-size: 0.875rem;
+  }
+`;
+
+const ClearFiltersButton = styled.button`
+  width: 100%;
+  background: transparent;
+  color: #666;
+  border: none;
+  padding: 0.75rem 0;
+  margin-top: 0.5rem;
+  cursor: pointer;
+  font-size: 0.75rem;
+  transition: all 0.2s;
+  border-top: 1px solid #333;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+
+  &:hover {
+    color: #ffd700;
+  }
+`;

package/src/components/shared/PaginatedContent/PaginatedContent.tsx

@@ -20,6 +20,7 @@ interface IPaginatedContentProps<T> {
     value: string;
     onChange: (value: string) => void;
     placeholder?: string;
+    rightElement?: React.ReactNode;
   };
   dependencies?: any[];
   tabId?: string;

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

@@ -7,6 +7,7 @@ interface ISearchBarProps {
   onChange: (value: string) => void;
   placeholder?: string;
   className?: string;
+  rightElement?: React.ReactNode;
 }
 
 export const SearchBar: React.FC<ISearchBarProps> = ({
@@ -14,7 +15,10 @@ export const SearchBar: React.FC<ISearchBarProps> = ({
   onChange,
   placeholder,
   className,
+  rightElement,
 }) => {
+  const hasRightElement = Boolean(rightElement);
+
   return (
     <Container className={className}>
       <Input
@@ -23,9 +27,11 @@ export const SearchBar: React.FC<ISearchBarProps> = ({
         onChange={e => onChange(e.target.value)}
         placeholder={placeholder}
         className="rpgui-input"
+        $hasRightElement={hasRightElement}
       />
       <IconContainer>
         <SearchIcon />
+        {rightElement}
       </IconContainer>
     </Container>
   );
@@ -36,9 +42,10 @@ const Container = styled.div`
   width: 100%;
 `;
 
-const Input = styled.input`
+const Input = styled.input<{ $hasRightElement: boolean }>`
   width: 100%;
-  padding-right: 2.5rem !important;
+  padding-right: ${props =>
+    props.$hasRightElement ? '6rem' : '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);
@@ -58,10 +65,13 @@ const IconContainer = styled.div`
   transform: translateY(-50%);
   display: flex;
   align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
+  gap: 0.5rem;
   pointer-events: none;
+  z-index: 1;
+
+  > * {
+    pointer-events: auto;
+  }
 `;
 
 const SearchIcon = styled(FaSearch)`

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

@@ -8,6 +8,7 @@ interface ISearchHeaderProps {
     value: string;
     onChange: (value: string) => void;
     placeholder?: string;
+    rightElement?: React.ReactNode;
   };
   filterOptions?: {
     options: IOptionsProps[];
@@ -33,6 +34,7 @@ export const SearchHeader: React.FC<ISearchHeaderProps> = ({
               value={searchOptions.value}
               onChange={searchOptions.onChange}
               placeholder={searchOptions.placeholder || 'Search...'}
+              rightElement={searchOptions.rightElement}
             />
           </SearchContainer>
         )}

package/src/hooks/useTooltipPosition.ts

@@ -0,0 +1,73 @@
+import { useState } from 'react';
+
+const TOOLTIP_WIDTH = 300;
+const TOOLTIP_OFFSET = 10;
+const MIN_VISIBLE_HEIGHT = 100;
+
+interface ITooltipPosition {
+  x: number;
+  y: number;
+}
+
+interface ITooltipState<T> {
+  item: T | null;
+  position: ITooltipPosition;
+}
+
+export const useTooltipPosition = <T>() => {
+  const [tooltipState, setTooltipState] = useState<ITooltipState<T> | null>(
+    null
+  );
+
+  const calculateTooltipPosition = (rect: DOMRect): ITooltipPosition => {
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+
+    // Try to position to the right first
+    let x = rect.right + TOOLTIP_OFFSET;
+
+    // If it would overflow right, try positioning to the left
+    if (x + TOOLTIP_WIDTH > viewportWidth - TOOLTIP_OFFSET) {
+      x = rect.left - TOOLTIP_WIDTH - TOOLTIP_OFFSET;
+    }
+
+    // If left positioning would go off screen, position relative to viewport
+    if (x < TOOLTIP_OFFSET) {
+      x = TOOLTIP_OFFSET;
+    }
+
+    // Position vertically aligned with the top of the element
+    let y = rect.top;
+
+    // Ensure tooltip doesn't go above viewport
+    if (y < TOOLTIP_OFFSET) {
+      y = TOOLTIP_OFFSET;
+    }
+
+    // Ensure some part of tooltip is always visible if element is near bottom
+    if (y > viewportHeight - MIN_VISIBLE_HEIGHT) {
+      y = viewportHeight - MIN_VISIBLE_HEIGHT;
+    }
+
+    return { x, y };
+  };
+
+  const handleMouseEnter = (item: T, event: React.MouseEvent) => {
+    const rect = event.currentTarget.getBoundingClientRect();
+    setTooltipState({
+      item,
+      position: calculateTooltipPosition(rect),
+    });
+  };
+
+  const handleMouseLeave = () => {
+    setTooltipState(null);
+  };
+
+  return {
+    tooltipState,
+    handleMouseEnter,
+    handleMouseLeave,
+    TOOLTIP_WIDTH,
+  };
+};