oddsgate-ds 1.0.197 → 1.0.199

package/dist/esm/types/components/molecules/CategoriesWrapper/CategoriesWrapper.component.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { CategoriesWrapperProps } from './CategoriesWrapper.interface';
+declare const CategoriesWrapper: React.FC<CategoriesWrapperProps>;
+export default CategoriesWrapper;

package/dist/esm/types/components/molecules/CategoriesWrapper/CategoriesWrapper.interface.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export interface CategoriesWrapperProps {
+    category: string;
+    categoryItems: React.ReactNode[];
+}

package/dist/esm/types/components/molecules/CategoriesWrapper/CategoriesWrapper.theme.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const StyledCategoryWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledCategorySeparator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledCategorySeparatorLine: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledCategoryContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledCategoryItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/esm/types/components/molecules/CategoryIndex/CategoryIndex.component.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { CategoryIndexProps } from './CategoryIndex.interface';
+declare const CategoryIndex: React.FC<CategoryIndexProps>;
+export default CategoryIndex;

package/dist/esm/types/components/molecules/CategoryIndex/CategoryIndex.interface.d.ts

@@ -0,0 +1,5 @@
+export interface CategoryIndexProps {
+    categories: string[];
+    onChange: (category: string | null) => void;
+    selectedCategory: string | null;
+}

package/dist/esm/types/components/molecules/CategoryIndex/CategoryIndex.theme.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+type ItemProps = {
+    isSelected?: boolean;
+};
+export declare const StyledGlossaryCategoryIndex: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledGlossaryCategoryIndexItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ItemProps>> & string;
+export {};

package/dist/esm/types/components/molecules/SearchBar/SearchBar.component.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SearchBarProps } from './SearchBar.interface';
+declare const SearchBar: React.FC<SearchBarProps>;
+export default SearchBar;

package/dist/esm/types/components/molecules/SearchBar/SearchBar.interface.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface SearchBarProps {
+    value: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    placeholder?: string;
+}

package/dist/esm/types/components/molecules/SearchBar/SearchBar.theme.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const StyledGlossarySearch: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SearchInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
+export declare const SearchButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;

package/dist/esm/types/components/organisms/Glossary/Glossary.component.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+type GlossaryItem = {
+    title: string;
+    categories: {
+        name: string;
+        items: {
+            slug: string;
+            name: string;
+        }[];
+    }[];
+};
+type GlossaryProps = {
+    title: string;
+    subtitle: string;
+    items: GlossaryItem[];
+    categories: {
+        name: string;
+        items: {
+            slug: string;
+            name: string;
+        }[];
+    }[];
+    placeholder?: string;
+};
+declare const Glossary: React.FC<GlossaryProps>;
+export default Glossary;

package/dist/esm/types/components/organisms/Glossary/Glossary.themes.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const StyledGlossary: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledGlossaryHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledGlossaryTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
+export declare const StyledGlossarySubtitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
+export declare const StyledGlossaryIndex: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledGlossaryCategories: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledGlossarySeparator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledGlossaryCategoryItems: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oddsgate-ds",
-  "version": "1.0.197",
+  "version": "1.0.199",
   "description": "Miew theme component library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/atoms/LegalLinks/LegalLinks.component.tsx

@@ -18,12 +18,12 @@ const LegalLinks = ({
         // If the link has children, render as dropdown
         if (link.children && link.children.length > 0) {
           return (
-            <li key={`dropdown-${link.label}-${index}`}>
+            <li key={`legalLink-${index}`}>
               <LegalLinksDropdown title={link.label} className="font-epilogue">
                 {link.children.map((childLink, childIndex) => {
                   if (!childLink.label || !childLink.url) return null
                   return (
-                    <LegalLinksDropdownItem key={`child-${childLink.label}-${childLink.url}-${index}-${childIndex}`}>
+                    <LegalLinksDropdownItem key={`childLink-${childIndex}`}>
                       <a
                         href={childLink.url}
                         target="_blank"
@@ -45,7 +45,7 @@ const LegalLinks = ({
         if (!link.url) return <></>
 
         return (
-          <li key={`link-${link.label}-${link.url}-${index}`}>
+          <li key={`legalLink-${index}`}>
             <a
               href={link.url}
               target="_blank"

package/src/components/atoms/LegalLinksDropdown/LegalLinksDropdown.theme.ts

@@ -50,7 +50,7 @@ export const StyledLegalLinksDropdownTitle = styled.span`
 `
 
 export const StyledLegalLinksDropdownContainer = styled.ul.withConfig({
-  shouldForwardProp: (prop) => prop !== 'openUpward' && prop !== 'isVisible',
+  shouldForwardProp: prop => prop !== 'openUpward' && prop !== 'isVisible'
 })<ILegalLinksDropdownContainer>`
   position: absolute;
   ${props => (props.openUpward ? 'bottom: 100%;' : 'top: 100%;')}
@@ -172,7 +172,7 @@ export const StyledLegalLinksDropdownItem = styled.li<ILegalLinksDropdownItem>`
 `
 
 export const StyledLegalLinksDropdownIcon = styled.span.withConfig({
-  shouldForwardProp: (prop) => prop !== 'isOpen',
+  shouldForwardProp: prop => prop !== 'isOpen'
 })<{ isOpen?: boolean }>`
   font-size: 10px;
   display: flex;

package/src/components/molecules/AwardCard/AwardCard.theme.ts

@@ -16,7 +16,7 @@ export const StyledAwardCardWrapper = styled.div<IAwardCard>`
   justify-content: space-between;
   gap: 1.125rem;
   background-color: ${colors.third10};
-  padding: 0.75rem 1rem 1rem 0.75rem;
+  padding: 1rem 0.75rem;
   border-radius: 0 60px;
   height: 100%;
 `

package/src/components/molecules/CategoriesWrapper/CategoriesWrapper.component.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import {
+  StyledCategoryContent,
+  StyledCategorySeparator,
+  StyledCategoryWrapper,
+  StyledCategoryItem,
+  StyledCategorySeparatorLine
+} from './CategoriesWrapper.theme'
+import { CategoriesWrapperProps } from './CategoriesWrapper.interface'
+import Button from '@/components/atoms/Button'
+
+const CategoriesWrapper: React.FC<CategoriesWrapperProps> = ({
+  category,
+  categoryItems
+}) => {
+  return (
+    <StyledCategoryWrapper>
+      <StyledCategorySeparator>
+        {category}
+        <StyledCategorySeparatorLine />
+      </StyledCategorySeparator>
+      <StyledCategoryContent>
+        {categoryItems.map((item, index) => (
+          <StyledCategoryItem key={index}>
+              <Button variant="text">{item}</Button>
+            </StyledCategoryItem>
+        ))}
+      </StyledCategoryContent>
+    </StyledCategoryWrapper>
+  )
+}
+
+export default CategoriesWrapper;

package/src/components/molecules/CategoriesWrapper/CategoriesWrapper.interface.ts

@@ -0,0 +1,4 @@
+export interface CategoriesWrapperProps {
+  category: string
+  categoryItems: React.ReactNode[]
+}

package/src/components/molecules/CategoriesWrapper/CategoriesWrapper.stories.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { Meta, StoryObj } from '@storybook/react'
+import CategoriesWrapper from './CategoriesWrapper.component'
+
+const meta: Meta<typeof CategoriesWrapper> = {
+  title: 'Components/CategoriesWrapper',
+  component: CategoriesWrapper
+}
+export default meta
+
+type Story = StoryObj<typeof CategoriesWrapper>
+
+export const Default: Story = {
+  args: {
+    category: 'A',
+    categoryItems: [
+      'Ace',
+      'Admin',
+      'AFK',
+      'Anti-eco',
+      'Aimbot',
+      'All-in',
+      'Armor',
+      'APM'
+    ]
+  }
+}

package/src/components/molecules/CategoriesWrapper/CategoriesWrapper.theme.ts

@@ -0,0 +1,38 @@
+import { colors } from '@/styles/variables'
+import styled from 'styled-components'
+
+export const StyledCategoryWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`
+
+export const StyledCategorySeparator = styled.div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: 0.75rem;
+  font-size: 3rem;
+  font-weight: 700;
+`
+export const StyledCategorySeparatorLine = styled.div`
+  flex-grow: 1;
+  height: 50%;
+  border-bottom: 1px solid ${colors.gray20};
+  opacity: 0.5;
+`
+
+export const StyledCategoryContent = styled.div`
+  display: flex;
+  gap: 1.875rem;
+  flex-wrap: wrap;
+`
+export const StyledCategoryItem = styled.div`
+  & > button {
+    height: 2.125rem;
+    padding: 0.625rem 2.5rem;
+    font-size: 1.5rem;
+    font-weight: 700;
+    text-transform: none;
+  }
+`

package/src/components/molecules/CategoryIndex/CategoryIndex.component.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import {
+  StyledGlossaryCategoryIndex,
+  StyledGlossaryCategoryIndexItem
+} from './CategoryIndex.theme'
+import { CategoryIndexProps } from './CategoryIndex.interface'
+
+const CategoryIndex: React.FC<CategoryIndexProps> = ({
+  categories,
+  onChange,
+  selectedCategory
+}) => {
+  const allCategories = ['#', ...categories]
+
+  return (
+    <StyledGlossaryCategoryIndex>
+      {allCategories.map(category => (
+        <StyledGlossaryCategoryIndexItem
+          onClick={() => onChange(category === '#' ? null : category)}
+          isSelected={
+            selectedCategory === category ||
+            (selectedCategory === null && category === '#')
+          }
+          key={`category-${category}`}
+        >
+          {category}
+        </StyledGlossaryCategoryIndexItem>
+      ))}
+    </StyledGlossaryCategoryIndex>
+  )
+}
+
+export default CategoryIndex

package/src/components/molecules/CategoryIndex/CategoryIndex.interface.ts

@@ -0,0 +1,5 @@
+export interface CategoryIndexProps {
+  categories: string[]
+  onChange: (category: string | null) => void
+  selectedCategory: string | null
+}

package/src/components/molecules/CategoryIndex/CategoryIndex.stories.tsx

@@ -0,0 +1,23 @@
+import React, { useState } from 'react'
+import CategoryIndex from './CategoryIndex.component'
+
+const categories = Array.from({ length: 26 }, (_, i) =>
+  String.fromCharCode(65 + i)
+)
+
+export default {
+  title: 'Components/CategoryIndex',
+  component: CategoryIndex
+}
+
+export const Default = () => {
+  const [selected, setSelected] = useState<string | null>(null)
+
+  return (
+    <CategoryIndex
+      categories={[...categories]}
+      selectedCategory={selected}
+      onChange={setSelected}
+    />
+  )
+}

package/src/components/molecules/CategoryIndex/CategoryIndex.theme.ts

@@ -0,0 +1,27 @@
+import { colors } from '@/styles/variables'
+import styled from 'styled-components'
+
+type ItemProps = {
+  isSelected?: boolean
+}
+
+export const StyledGlossaryCategoryIndex = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+`
+
+export const StyledGlossaryCategoryIndexItem = styled.div<ItemProps>`
+  cursor: pointer;
+  border-radius: 100%;
+  background-color: ${({ isSelected }) =>
+    isSelected ? `${colors.primary50}66` : ''};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.125rem;
+  height: 2.125rem;
+  box-sizing: border-box;
+  color: ${colors.gray20};
+  font-weight: 700;
+  font-size: 1.5rem;
+`

package/src/components/molecules/SearchBar/SearchBar.component.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import {
+  SearchButton,
+  SearchInput,
+  StyledGlossarySearch
+} from './SearchBar.theme'
+import Icon from '@/components/atoms/Icon'
+import { SearchBarProps } from './SearchBar.interface'
+
+const SearchBar: React.FC<SearchBarProps> = ({
+  value,
+  onChange,
+  placeholder
+}) => {
+  return (
+    <StyledGlossarySearch>
+      <SearchInput
+        type="text"
+        placeholder={placeholder}
+        value={value}
+        onChange={onChange}
+      />
+      <SearchButton>
+        <Icon icon="icon-search" />
+      </SearchButton>
+    </StyledGlossarySearch>
+  )
+}
+
+export default SearchBar

package/src/components/molecules/SearchBar/SearchBar.interface.ts

@@ -0,0 +1,5 @@
+export interface SearchBarProps {
+  value: string
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
+  placeholder?: string
+}

package/src/components/molecules/SearchBar/SearchBar.stories.tsx

@@ -0,0 +1,18 @@
+import React, { useState } from 'react'
+import SearchBar from './SearchBar.component'
+
+export default {
+  title: 'Components/SearchBar',
+  component: SearchBar
+}
+
+export const Default = () => {
+  const [value, setValue] = useState('')
+  return (
+    <SearchBar
+      value={value}
+      onChange={e => setValue(e.target.value)}
+      placeholder="Search..."
+    />
+  )
+}

package/src/components/molecules/SearchBar/SearchBar.theme.ts

@@ -0,0 +1,47 @@
+import styled from 'styled-components'
+import { colors } from '@/styles/variables'
+
+export const StyledGlossarySearch = styled.div`
+  position: relative;
+  width: 100%;
+  max-width: 870px;
+  margin: 2rem auto;
+`
+
+export const SearchInput = styled.input`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 1.5rem 0.75rem; 
+  border-radius: 62.5rem;
+  border: none;
+  background: ${colors.gray20};
+  font-size: 0.9375rem;
+  color: ${colors.hellobar};
+  &::placeholder {
+    color: ${colors.hellobar};
+  }
+`
+
+export const SearchButton = styled.button`
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 1.5rem;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 50%;
+  background: ${colors.hellobar};
+  border: none;
+  cursor: pointer;
+  color: ${colors.gray20};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    width: 1.25rem;
+    height: 1.25rem;
+    display: block;
+  }
+`

package/src/components/organisms/Glossary/Glossary.component.tsx

@@ -0,0 +1,84 @@
+import React, { useState } from 'react'
+import {
+  StyledGlossary,
+  StyledGlossaryCategories,
+  StyledGlossarySubtitle,
+  StyledGlossaryTitle
+} from './Glossary.themes'
+
+import SearchBar from '@/components/molecules/SearchBar/SearchBar.component'
+import GlossaryCategoryIndex from '@/components/molecules/CategoryIndex/CategoryIndex.component'
+import CategoriesWrapper from '@/components/molecules/CategoriesWrapper/CategoriesWrapper.component'
+
+type GlossaryItem = {
+  title: string
+  categories: { name: string, items: { slug: string, name: string }[] }[]
+}
+
+type GlossaryProps = {
+  title: string
+  subtitle: string
+  items: GlossaryItem[]
+  categories: { name: string, items: { slug: string, name: string }[] }[]
+  placeholder?: string
+}
+
+const Glossary: React.FC<GlossaryProps> = ({
+  title,
+  subtitle,
+  items,
+  categories,
+  placeholder
+}) => {
+  const [searchTerm, setSearchTerm] = useState('')
+  const [selectedCategory, setSelectedCategory] = useState<string | null>(null)
+
+  const categoryData: Record<string, string[]> = {}
+  categories[0].items.forEach(cat => {
+    categoryData[cat.name] = []
+  })
+  items.forEach(item => {
+    item.categories[0].items.forEach(cat => {
+      if (categoryData[cat.name]) {
+        categoryData[cat.name].push(item.title)
+      }
+    })
+  })
+
+  const categoryNames = Object.keys(categoryData)
+
+  const displayedCategories = selectedCategory
+    ? [selectedCategory]
+    : categoryNames
+
+  return (
+    <StyledGlossary>
+      <StyledGlossaryTitle>{title}</StyledGlossaryTitle>
+      <StyledGlossarySubtitle>{subtitle}</StyledGlossarySubtitle>
+
+      <SearchBar
+        value={searchTerm}
+        onChange={e => setSearchTerm(e.target.value)}
+        placeholder="What are you looking for?"
+      />
+
+      <GlossaryCategoryIndex
+        categories={categoryNames}
+        selectedCategory={selectedCategory}
+        onChange={cat => setSelectedCategory(cat === selectedCategory ? null : cat)}
+      />
+
+      <StyledGlossaryCategories>
+        {displayedCategories.map(category => (
+          <CategoriesWrapper
+            key={category}
+            category={category}
+            categoryItems={categoryData[category]}
+          />
+        ))}
+      </StyledGlossaryCategories>
+    </StyledGlossary>
+  )
+}
+
+export default Glossary