oddsgate-ds 1.0.198 → 1.0.200

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,4 @@
+import React from 'react';
+import { GlossaryProps } from './Glossary.interface';
+export declare const Glossary: React.FC<GlossaryProps>;
+export default Glossary;

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

@@ -0,0 +1,24 @@
+type GlossaryItem = {
+    title: string;
+    categories: {
+        name: string;
+        items: {
+            slug: string;
+            name: string;
+        }[];
+    }[];
+};
+export type GlossaryProps = {
+    title: string;
+    subtitle: string;
+    items: GlossaryItem[];
+    categories: {
+        name: string;
+        items: {
+            slug: string;
+            name: string;
+        }[];
+    }[];
+    placeholder?: string;
+};
+export {};

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/dist/esm/types/index.d.ts

@@ -49,6 +49,7 @@ export { default as Cover } from './components/organisms/Cover';
 export { default as Tabs } from './components/organisms/Tabs';
 export { default as CircularSlider } from './components/organisms/CircularSlider';
 export { default as ProductsSlider } from './components/organisms/ProductsSlider';
+export { default as Glossary } from './components/organisms/Glossary/Glossary.component';
 export { iconsList } from './helpers/getIcons';
 export { default as GlobalStyles } from './styles/Global';
 export { default as clickOutSideToClose } from './helpers/clickOutsideToClose';

package/dist/types.d.ts

@@ -720,6 +720,32 @@ type IProductsSlider = {
 
 declare const ProductsSlider: ({ content, style, className, }: IProductsSlider) => React__default.JSX.Element;
 
+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__default.FC<GlossaryProps>;
+
 declare const iconsList: string[];
 
 declare const GlobalStyles: React$1.NamedExoticComponent<styled_components.ExecutionProps & object>;
@@ -732,4 +758,4 @@ declare function useMediaMatch(query?: string): boolean;
 
 declare const debounce: (callback: any, wait: number) => (...args: any) => void;
 
-export { Accordion, AccordionItem, AwardBadge, AwardCard, BlogCard, Button, CardMarquee, CareersCard, CheckRadioField, Chip, CircularSlider, CloseButton, Column, Counter, Cover, Dropdown, DropdownItem, EmptyState, EventsCard, Flex, FormField, GlobalStyles, Heading, Icon, IconBox, IconTitle, ImageWrapper, LegalLinks, LicenseCard, Loader, LogosCard, Marquee, Modal, NewsCard, OffCanvas, PortalComponent, ProductCard, ProductsSlider, Quote, RichText, Row, ScrollingNav, Separator, ShareModal, Slider, SocialLinks, Spacer, Tabs, TeamCard, Video, VideoEmbed, clickOutSideToClose, debounce, iconsList, isTouchDevice, useMediaMatch, variables };
+export { Accordion, AccordionItem, AwardBadge, AwardCard, BlogCard, Button, CardMarquee, CareersCard, CheckRadioField, Chip, CircularSlider, CloseButton, Column, Counter, Cover, Dropdown, DropdownItem, EmptyState, EventsCard, Flex, FormField, GlobalStyles, Glossary, Heading, Icon, IconBox, IconTitle, ImageWrapper, LegalLinks, LicenseCard, Loader, LogosCard, Marquee, Modal, NewsCard, OffCanvas, PortalComponent, ProductCard, ProductsSlider, Quote, RichText, Row, ScrollingNav, Separator, ShareModal, Slider, SocialLinks, Spacer, Tabs, TeamCard, Video, VideoEmbed, clickOutSideToClose, debounce, iconsList, isTouchDevice, useMediaMatch, variables };

package/package.json

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

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,39 @@
+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;
+  padding: 2.5rem 0 3rem 0;
+`
+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,74 @@
+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'
+import { GlossaryProps } from './Glossary.interface'
+
+export 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={placeholder}
+      />
+
+      <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

package/src/components/organisms/Glossary/Glossary.interface.ts

@@ -0,0 +1,12 @@
+type GlossaryItem = {
+  title: string
+  categories: { name: string; items: { slug: string; name: string }[] }[]
+}
+
+export type GlossaryProps = {
+  title: string
+  subtitle: string
+  items: GlossaryItem[]
+  categories: { name: string; items: { slug: string; name: string }[] }[]
+  placeholder?: string
+}