@rpg-engine/long-bow 0.8.7 → 0.8.9

package/src/components/shared/CTAButton/CTAButton.tsx

@@ -0,0 +1,127 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+
+interface ICTAButtonProps {
+  icon: React.ReactNode;
+  label?: React.ReactNode;
+  onClick?: (e: React.MouseEvent) => void;
+  className?: string;
+  fullWidth?: boolean;
+  textColor?: string;
+  iconColor?: string;
+  disabled?: boolean;
+}
+
+export const CTAButton: React.FC<ICTAButtonProps> = ({
+  icon,
+  label,
+  onClick,
+  className,
+  fullWidth = false,
+  textColor = '#ffffff',
+  iconColor = '#f59e0b',
+  disabled = false,
+}) => {
+  return (
+    <ButtonContainer
+      className={className}
+      onPointerDown={disabled ? undefined : onClick}
+      $fullWidth={fullWidth}
+      $disabled={disabled}
+      $color={textColor}
+    >
+      <ButtonContent>
+        <IconWrapper $color={iconColor} $disabled={disabled}>
+          {icon}
+        </IconWrapper>
+        {label && (
+          <ButtonLabel $color={textColor} $disabled={disabled}>
+            {label}
+          </ButtonLabel>
+        )}
+      </ButtonContent>
+    </ButtonContainer>
+  );
+};
+
+const ButtonContainer = styled.div<{
+  $fullWidth: boolean;
+  $disabled: boolean;
+  $color: string;
+}>`
+  display: inline-flex;
+  align-items: center;
+  padding: 0.75rem 1.25rem;
+  background: rgba(0, 0, 0, 0.3);
+  border: 2px solid #f59e0b;
+  box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
+  border-radius: 4px;
+  cursor: ${props => (props.$disabled ? 'not-allowed' : 'pointer')};
+  transition: all 0.2s;
+  position: relative;
+  opacity: ${props => (props.$disabled ? 0.5 : 1)};
+  // set color for disabled and active
+  color: ${props => (props.$disabled ? '#6b7280' : props.$color)};
+
+  ${props =>
+    props.$fullWidth &&
+    css`
+      display: flex;
+      justify-content: center;
+    `}
+
+  &:hover {
+    background: ${props =>
+      props.$disabled ? 'rgba(0, 0, 0, 0.3)' : 'rgba(0, 0, 0, 0.4)'};
+    box-shadow: ${props =>
+      props.$disabled
+        ? '0 0 10px rgba(245, 158, 11, 0.3)'
+        : '0 0 15px rgba(245, 158, 11, 0.4)'};
+    transform: ${props => (props.$disabled ? 'none' : 'translateY(-1px)')};
+  }
+
+  &:active {
+    transform: ${props => (props.$disabled ? 'none' : 'translateY(1px)')};
+    box-shadow: ${props =>
+      props.$disabled
+        ? '0 0 10px rgba(245, 158, 11, 0.3)'
+        : '0 0 5px rgba(245, 158, 11, 0.2)'};
+  }
+
+  &:before {
+    content: '';
+    position: absolute;
+    inset: -1px;
+    border-radius: 5px;
+    padding: 1px;
+    background: linear-gradient(45deg, #f59e0b, #fbbf24, #f59e0b);
+    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+    -webkit-mask: linear-gradient(#fff 0 0) content-box,
+      linear-gradient(#fff 0 0);
+    mask-composite: exclude;
+    -webkit-mask-composite: destination-out;
+  }
+`;
+
+const ButtonContent = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+`;
+
+const IconWrapper = styled.div<{ $color: string; $disabled: boolean }>`
+  svg {
+    font-size: 1.25rem;
+    color: ${props => props.$color};
+    filter: drop-shadow(0 0 2px rgba(245, 158, 11, 0.5));
+    opacity: ${props => (props.$disabled ? 0.5 : 1)};
+  }
+`;
+
+const ButtonLabel = styled.span<{ $color: string; $disabled: boolean }>`
+  color: ${props => props.$color};
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.875rem;
+  text-shadow: 0 0 4px rgba(245, 158, 11, 0.5);
+  opacity: ${props => (props.$disabled ? 0.5 : 1)};
+`;

package/src/components/shared/Card/Card.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../../../constants/uiColors';
+
+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>{title}</CardTitle>
+        <CardDescription>{description}</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/Ellipsis.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 interface IProps {
   children: React.ReactNode;
-  maxLines?: 1 | 2 | 3;
+  maxLines?: 1 | 2 | 3 | 4 | 5;
   maxWidth: string;
   fontSize?: string;
   center?: boolean;
@@ -40,37 +40,35 @@ const Container = styled.span<IContainerProps>`
     overflow: hidden;
     max-width: ${props => props.maxWidth};
     font-size: ${props => props.fontSize};
-
     ${props => props.center && `margin: 0 auto;`}
   }
 
-  .ellipsis-2-lines {
-    display: block;
+  .ellipsis-2-lines,
+  .ellipsis-3-lines,
+  .ellipsis-4-lines,
+  .ellipsis-5-lines {
     display: -webkit-box;
-    max-width: ${props => props.maxWidth}px;
-
-    height: 25px;
-    margin: 0 auto;
-    line-height: 1;
-    -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
-    text-overflow: ellipsis;
     overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: ${props => props.maxWidth};
     font-size: ${props => props.fontSize};
+    line-height: 1.4;
   }
 
-  .ellipsis-3-lines {
-    display: block;
-    display: -webkit-box;
-    max-width: ${props => props.maxWidth}px;
+  .ellipsis-2-lines {
+    -webkit-line-clamp: 2;
+  }
 
-    height: 43px;
-    margin: 0 auto;
-    line-height: 1;
+  .ellipsis-3-lines {
     -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    font-size: ${props => props.fontSize};
+  }
+
+  .ellipsis-4-lines {
+    -webkit-line-clamp: 4;
+  }
+
+  .ellipsis-5-lines {
+    -webkit-line-clamp: 5;
   }
 `;

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

@@ -1,9 +1,9 @@
 import React from 'react';
 import styled from 'styled-components';
 import { usePagination } from '../../CraftBook/hooks/usePagination';
-import { Dropdown, IOptionsProps } from '../../Dropdown';
+import { IOptionsProps } from '../../Dropdown';
 import { Pagination } from '../Pagination/Pagination';
-import { SearchBar } from '../SearchBar/SearchBar';
+import { SearchHeader } from '../SearchHeader/SearchHeader';
 
 interface IPaginatedContentProps<T> {
   items: T[];
@@ -24,6 +24,8 @@ interface IPaginatedContentProps<T> {
   dependencies?: any[];
   tabId?: string;
   layout?: 'grid' | 'list';
+  gridColumns?: number;
+  itemHeight?: string;
 }
 
 export const PaginatedContent = <T extends unknown>({
@@ -37,6 +39,8 @@ export const PaginatedContent = <T extends unknown>({
   dependencies = [],
   tabId,
   layout = 'list',
+  gridColumns = 4,
+  itemHeight = '180px',
 }: IPaginatedContentProps<T>): React.ReactElement => {
   const {
     currentPage,
@@ -49,50 +53,38 @@ export const PaginatedContent = <T extends unknown>({
     dependencies: [...dependencies, tabId],
   });
 
-  if (items.length === 0) {
-    return <EmptyMessage>{emptyMessage}</EmptyMessage>;
-  }
-
   return (
     <Container className={className}>
       {(searchOptions || filterOptions) && (
-        <HeaderContainer>
-          <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>
-      )}
-      <Content className={`PaginatedContent-content ${layout}`}>
-        {paginatedItems.map((item, index) => (
-          <div key={index} className="PaginatedContent-item">
-            {renderItem(item)}
-          </div>
-        ))}
-      </Content>
-      <PaginationContainer className="PaginatedContent-pagination">
-        <Pagination
-          currentPage={currentPage}
-          totalPages={totalPages}
-          onPageChange={setCurrentPage}
+        <SearchHeader
+          searchOptions={searchOptions}
+          filterOptions={filterOptions}
         />
-      </PaginationContainer>
+      )}
+      {items.length === 0 ? (
+        <EmptyMessage>{emptyMessage}</EmptyMessage>
+      ) : (
+        <>
+          <Content
+            className={`PaginatedContent-content ${layout}`}
+            $gridColumns={gridColumns}
+            $itemHeight={itemHeight}
+          >
+            {paginatedItems.map((item, index) => (
+              <div key={index} className="PaginatedContent-item">
+                {renderItem(item)}
+              </div>
+            ))}
+          </Content>
+          <PaginationContainer className="PaginatedContent-pagination">
+            <Pagination
+              currentPage={currentPage}
+              totalPages={totalPages}
+              onPageChange={setCurrentPage}
+            />
+          </PaginationContainer>
+        </>
+      )}
     </Container>
   );
 };
@@ -105,52 +97,33 @@ const Container = styled.div`
   width: 100%;
 `;
 
-const HeaderContainer = styled.div`
-  padding: 0 1rem;
-`;
-
-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 Content = styled.div`
+const Content = styled.div<{
+  $gridColumns: number;
+  $maxHeight?: string;
+  $itemHeight?: string;
+}>`
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
   flex: 1;
   padding: 1rem;
   min-height: 200px;
-  overflow-y: auto;
+  max-height: ${props => props.$maxHeight};
+  overflow-y: ${props => (props.$maxHeight ? 'auto' : 'visible')};
 
   &.grid {
     display: grid;
-    grid-template-columns: repeat(4, minmax(0, 1fr));
+    grid-template-columns: repeat(
+      ${props => props.$gridColumns},
+      minmax(0, 1fr)
+    );
     gap: 1rem;
+    align-items: start;
 
     .PaginatedContent-item {
-      aspect-ratio: 1;
       display: flex;
-      align-items: center;
-      justify-content: center;
+      align-items: flex-start;
+      height: ${props => props.$itemHeight ?? 'auto'};
     }
   }
 
@@ -176,7 +149,3 @@ const EmptyMessage = styled.div`
   align-items: center;
   justify-content: center;
 `;
-
-const StyledDropdown = styled(Dropdown)`
-  min-width: 150px;
-`;

package/src/components/shared/ScrollableContent/ScrollableContent.tsx

@@ -0,0 +1,160 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Dropdown, IOptionsProps } from '../../Dropdown';
+import { SearchBar } from '../SearchBar/SearchBar';
+
+interface IScrollableContentProps<T> {
+  items: T[];
+  renderItem: (item: T) => React.ReactNode;
+  emptyMessage?: string;
+  className?: string;
+  filterOptions?: {
+    options: IOptionsProps[];
+    selectedOption: string;
+    onOptionChange: (value: string) => void;
+  };
+  searchOptions?: {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+  };
+  layout?: 'grid' | 'list';
+  gridColumns?: number;
+  maxHeight?: string;
+}
+
+export const ScrollableContent = <T extends unknown>({
+  items,
+  renderItem,
+  emptyMessage = 'No items found',
+  className,
+  filterOptions,
+  searchOptions,
+  layout = 'list',
+  gridColumns = 4,
+  maxHeight = '500px',
+}: IScrollableContentProps<T>): React.ReactElement => {
+  if (items.length === 0) {
+    return <EmptyMessage>{emptyMessage}</EmptyMessage>;
+  }
+
+  return (
+    <Container className={className}>
+      {(searchOptions || filterOptions) && (
+        <HeaderContainer>
+          <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>
+      )}
+      <Content
+        className={`ScrollableContent-content ${layout}`}
+        $gridColumns={gridColumns}
+        $maxHeight={maxHeight}
+      >
+        {items.map((item, index) => (
+          <div key={index} className="ScrollableContent-item">
+            {renderItem(item)}
+          </div>
+        ))}
+      </Content>
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 100%;
+`;
+
+const HeaderContainer = styled.div`
+  flex-shrink: 0;
+`;
+
+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;
+`;
+
+const Content = styled.div<{ $gridColumns: number; $maxHeight: string }>`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  flex: 1;
+  padding: 1rem;
+  max-height: ${props => props.$maxHeight};
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  &.grid {
+    display: grid;
+    grid-template-columns: repeat(
+      ${props => props.$gridColumns},
+      minmax(0, 1fr)
+    );
+    gap: 1rem;
+    align-items: start;
+
+    .ScrollableContent-item {
+      display: flex;
+      align-items: flex-start;
+    }
+  }
+
+  &.list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+`;
+
+const EmptyMessage = styled.div`
+  text-align: center;
+  color: #9ca3af;
+  padding: 2rem;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;