oddsgate-ds 1.0.214 → 1.0.215

package/package.json

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

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

@@ -24,9 +24,9 @@ const CategoriesWrapper: React.FC<CategoriesWrapperProps> = ({
           <StyledCategoryContent>
             {categoryItems.map((item, index) => (
               <StyledCategoryItem key={index}>
-                <Button href={item.slug} variant="text">
-                  {item.title}
-                </Button>
+                <a href={item.slug}>
+                  <Button variant="text">{item.title}</Button>
+                </a>
               </StyledCategoryItem>
             ))}
           </StyledCategoryContent>
@@ -36,4 +36,4 @@ const CategoriesWrapper: React.FC<CategoriesWrapperProps> = ({
   )
 }
 
-export default CategoriesWrapper
+export default CategoriesWrapper;

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

@@ -32,7 +32,7 @@ export const StyledCategoryContent = styled.div`
   padding: 2.5rem 0 3rem 0;
 `
 export const StyledCategoryItem = styled.div`
-  & > button {
+  button {
     height: 34px;
     padding: 10px 40px;
     font-size: 24px;

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

@@ -10,14 +10,15 @@ const CategoryIndex: React.FC<CategoryIndexProps> = ({
   onChange,
   selectedCategory
 }) => {
-
   return (
     <StyledGlossaryCategoryIndex>
       {categories.map(category => (
         <StyledGlossaryCategoryIndexItem
           onClick={() => onChange(category)}
           isSelected={
-            selectedCategory === category
+            category === '#'
+              ? selectedCategory === '84'
+              : selectedCategory === category
           }
           key={`category-${category}`}
         >

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

@@ -40,7 +40,6 @@ export const Glossary: React.FC<GlossaryProps> = ({
   tryAnotherLetterText
 }) => {
   const categoryNames = Object.keys(categoryData)
-  console.log("categoryData", categoryData)
   return (
     <StyledGlossary>
       <SearchBar

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

@@ -1,262 +1,101 @@
 import React, { useState } from 'react'
+import { Meta, StoryObj } from '@storybook/react'
 import Glossary from './Glossary.component'
-interface GlossaryItem {
-    slug: string
-    name: string
-}
-
-interface GlossaryCategory {
-    name: string
-    items: GlossaryItem[]
-}
 
-const categories: GlossaryCategory[] = [
-    {
-        name: 'A',
-        items: [
-            { slug: 'afk', name: 'AFK' },
-            { slug: 'aimbot', name: 'AIMBOT' },
-            { slug: 'aggro', name: 'Aggro' },
-            { slug: 'aoe', name: 'AOE' },
-            { slug: 'avatar', name: 'Avatar' },
-            { slug: 'accuracy', name: 'Accuracy' },
-            { slug: 'action-bar', name: 'Action Bar' },
-            { slug: 'add-on', name: 'Add-on' },
-            { slug: 'arena', name: 'Arena' },
-            { slug: 'artifact', name: 'Artifact' }
-        ]
-    },
-    {
-        name: 'B',
-        items: [
-            { slug: 'buff', name: 'Buff' },
-            { slug: 'boss', name: 'Boss' },
-            { slug: 'build', name: 'Build' },
-            { slug: 'ban', name: 'Ban' },
-            { slug: 'beta', name: 'Beta' },
-            { slug: 'blind', name: 'Blind' },
-            { slug: 'block', name: 'Block' },
-            { slug: 'bot', name: 'Bot' },
-            { slug: 'bracket', name: 'Bracket' },
-            { slug: 'burst', name: 'Burst' }
-        ]
-    },
-    {
-        name: 'C',
-        items: [
-            { slug: 'camp', name: 'Camp' },
-            { slug: 'carry', name: 'Carry' },
-            { slug: 'cc', name: 'Crowd Control' },
-            { slug: 'cd', name: 'Cooldown' },
-            { slug: 'cheese', name: 'Cheese' },
-            { slug: 'clan', name: 'Clan' },
-            { slug: 'combo', name: 'Combo' },
-            { slug: 'crit', name: 'Critical Hit' },
-            { slug: 'crafting', name: 'Crafting' },
-            { slug: 'creep', name: 'Creep' }
-        ]
-    },
-    {
-        name: 'D',
-        items: [
-            { slug: 'debuff', name: 'Debuff' },
-            { slug: 'dps', name: 'DPS' },
-            { slug: 'drop', name: 'Drop' },
-            { slug: 'duo', name: 'Duo' },
-            { slug: 'dungeon', name: 'Dungeon' },
-            { slug: 'draft', name: 'Draft' },
-            { slug: 'dot', name: 'Damage Over Time' },
-            { slug: 'disconnect', name: 'Disconnect' },
-            { slug: 'drain', name: 'Drain' },
-            { slug: 'drop-rate', name: 'Drop Rate' }
-        ]
-    },
-    {
-        name: 'E',
-        items: [
-            { slug: 'emote', name: 'Emote' },
-            { slug: 'endgame', name: 'Endgame' },
-            { slug: 'enemy', name: 'Enemy' },
-            { slug: 'equip', name: 'Equip' },
-            { slug: 'event', name: 'Event' },
-            { slug: 'exploit', name: 'Exploit' },
-            { slug: 'experience', name: 'Experience' },
-            { slug: 'ez', name: 'EZ' },
-            { slug: 'elite', name: 'Elite' },
-            { slug: 'escape', name: 'Escape' }
-        ]
-    },
-    {
-        name: 'F',
-        items: [
-            { slug: 'farm', name: 'Farm' },
-            { slug: 'feed', name: 'Feed' },
-            { slug: 'flank', name: 'Flank' },
-            { slug: 'frag', name: 'Frag' },
-            { slug: 'fps', name: 'FPS' },
-            { slug: 'friendly-fire', name: 'Friendly Fire' },
-            { slug: 'faction', name: 'Faction' },
-            { slug: 'fov', name: 'Field of View' },
-            { slug: 'freeze', name: 'Freeze' },
-            { slug: 'full-party', name: 'Full Party' }
-        ]
-    },
-    {
-        name: 'G',
-        items: [
-            { slug: 'gg', name: 'GG' },
-            { slug: 'gank', name: 'Gank' },
-            { slug: 'gear', name: 'Gear' },
-            { slug: 'grind', name: 'Grind' },
-            { slug: 'guild', name: 'Guild' },
-            { slug: 'glitch', name: 'Glitch' },
-            { slug: 'gold', name: 'Gold' },
-            { slug: 'group', name: 'Group' },
-            { slug: 'grenade', name: 'Grenade' },
-            { slug: 'global', name: 'Global' }
-        ]
-    },
-    {
-        name: 'H',
-        items: [
-            { slug: 'heal', name: 'Heal' },
-            { slug: 'headshot', name: 'Headshot' },
-            { slug: 'hp', name: 'HP' },
-            { slug: 'hud', name: 'HUD' },
-            { slug: 'hardcore', name: 'Hardcore' },
-            { slug: 'hero', name: 'Hero' },
-            { slug: 'hitbox', name: 'Hitbox' },
-            { slug: 'host', name: 'Host' },
-            { slug: 'hotkey', name: 'Hotkey' },
-            { slug: 'hunter', name: 'Hunter' }
-        ]
-    }
+const categories = [
+  {
+    name: 'A',
+    items: [
+      { name: 'Apple', slug: 'apple' },
+      { name: 'Apricot', slug: 'apricot' }
+    ]
+  },
+  {
+    name: 'B',
+    items: [
+      { name: 'Banana', slug: 'banana' },
+      { name: 'Blueberry', slug: 'blueberry' }
+    ]
+  }
 ]
 
-// Helper to build categoryData from categories and items
-interface BuildCategoryDataItem {
-    slug: string
-    name: string
-}
-
-interface BuildCategoryDataCategory {
-    name: string
-    items: BuildCategoryDataItem[]
-}
-
-interface CategoryDataItem {
-    title: string
-    slug: string
-}
-
-interface CategoryData {
-    [categoryName: string]: CategoryDataItem[]
-}
-
-function buildCategoryData(
-    categories: BuildCategoryDataCategory[],
-    items: BuildCategoryDataItem[]
-): CategoryData {
-    const data: CategoryData = {}
-    categories.forEach((cat: BuildCategoryDataCategory) => {
-        data[cat.name] = cat.items.map((item: BuildCategoryDataItem) => ({
-            title: item.name,
-            slug: item.slug
-        }))
-    })
-    return data
-}
-
-// Helper to filter items by searchTerm and selectedCategory
-function getDisplayedCategories(
-  categories: any[],
-  items: never[],
-  searchTerm: string,
-  selectedCategory: string | null
-) {
-  const filtered: Record<string | number, any[]> = {}
-  categories.forEach((cat: { items: any[]; name: string | number }) => {
-    const catItems = cat.items
-      .map((item: { name: any }) => item.name)
-      .filter(
-          (        name: string) =>
-          (!searchTerm ||
-            name.toLowerCase().includes(searchTerm.toLowerCase())) &&
-          (!selectedCategory || cat.name === selectedCategory)
-      )
-    if (catItems.length > 0) filtered[cat.name] = catItems
+// Helper to build categoryData from categories
+function buildCategoryData(categories: any) {
+  const data: Record<string, { title: string; slug: string }[]> = {}
+  categories.forEach((cat: any) => {
+    data[cat.name] = cat.items.map((item: any) => ({
+      title: item.name,
+      slug: item.slug
+    }))
   })
-  return Object.keys(filtered)
+  return data
 }
 
+const categoryData = buildCategoryData(categories)
 
-// Build categoryData for the Glossary component
-const categoryData = buildCategoryData(categories, [])
-
-export default {
+const meta: Meta<typeof Glossary> = {
   title: 'Organisms/Glossary',
-  component: Glossary
+  component: Glossary,
+  parameters: {
+    backgrounds: {
+      default: 'glossary-bg',
+      values: [{ name: 'glossary-bg', value: '#33052F' }]
+    }
+  }
 }
+export default meta
 
-export const Basic = () => {
+const Template = (args: any) => {
   const [searchTerm, setSearchTerm] = useState('')
   const [selectedCategory, setSelectedCategory] = useState<string | null>(null)
 
-  // For demo, just show all categories if nothing is selected
-  const displayedCategories = getDisplayedCategories(
-    categories,
-    [],
-    searchTerm,
-    selectedCategory
-  )
+  // Filter items by searchTerm
+  const filterItems = (items: { title: string; slug: string }[]) =>
+    items.filter(item =>
+      item.title.toLowerCase().includes(searchTerm.toLowerCase())
+    )
 
-  return (
-    <Glossary
-      searchTerm={searchTerm}
-      setSearchTerm={setSearchTerm}
-      selectedCategory={selectedCategory}
-      setSelectedCategory={setSelectedCategory}
-      categoryData={categoryData}
-      displayedCategories={displayedCategories}
-      placeholder="What are you looking for?"
-    />
-  )
-}
+  // Filter categoryData by selectedCategory and searchTerm
+  let filteredCategoryData: Partial<typeof categoryData> = {}
 
-Basic.parameters = {
-  backgrounds: {
-    default: 'glossary-bg',
-    values: [{ name: 'glossary-bg', value: '#33052F' }]
+  if (selectedCategory && categoryData[selectedCategory]) {
+    const filteredItems = filterItems(categoryData[selectedCategory as string])
+    if (filteredItems.length > 0) {
+      filteredCategoryData[selectedCategory] = filteredItems
+    }
+  } else {
+    Object.entries(categoryData).forEach(([cat, items]) => {
+      const filteredItems = filterItems(items)
+      if (filteredItems.length > 0) {
+        filteredCategoryData[cat] = filteredItems
+      }
+    })
   }
-}
 
-export const NoResults = () => {
-  const [searchTerm, setSearchTerm] = useState('zzzz') // unlikely to match anything
-  const [selectedCategory, setSelectedCategory] = useState<string | null>(null)
-
-  const displayedCategories = getDisplayedCategories(
-    categories,
-    [],
-    searchTerm,
-    selectedCategory
-  )
+  // Determine if there are no results
+  const noResults = Object.keys(filteredCategoryData).length === 0
 
   return (
     <Glossary
+      {...args}
       searchTerm={searchTerm}
       setSearchTerm={setSearchTerm}
       selectedCategory={selectedCategory}
       setSelectedCategory={setSelectedCategory}
-      categoryData={categoryData}
-      displayedCategories={displayedCategories}
-      placeholder="What are you looking for?"
+      categoryData={filteredCategoryData}
+      noResults={noResults}
     />
   )
 }
 
-NoResults.parameters = {
-  backgrounds: {
-    default: 'glossary-bg',
-    values: [{ name: 'glossary-bg', value: '#33052F' }]
+export const Default: StoryObj = {
+  render: Template,
+  args: {
+    placeholder: 'Search glossary...',
+    noResults: false,
+    backToTopButton: 'Back to top',
+    noResultsText: 'No results found',
+    tryAnotherLetterText: 'Try another letter'
   }
 }
+