oddsgate-ds 1.0.204 → 1.0.206

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

@@ -2,3 +2,6 @@
 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 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 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 StyledNoResultsContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledNoResultsTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
+export declare const StyledNoResultsSubtitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;

package/package.json

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

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

@@ -14,19 +14,23 @@ const CategoriesWrapper: React.FC<CategoriesWrapperProps> = ({
   categoryItems
 }) => {
   return (
-    <StyledCategoryWrapper>
-      <StyledCategorySeparator>
-        {category}
-        <StyledCategorySeparatorLine />
-      </StyledCategorySeparator>
-      <StyledCategoryContent>
-        {categoryItems.map((item, index) => (
-          <StyledCategoryItem key={index}>
-              <Button variant="text">{item}</Button>
-            </StyledCategoryItem>
-        ))}
-      </StyledCategoryContent>
-    </StyledCategoryWrapper>
+    <>
+      {categoryItems.length > 0 && (
+        <StyledCategoryWrapper>
+          <StyledCategorySeparator>
+            {category}
+            <StyledCategorySeparatorLine />
+          </StyledCategorySeparator>
+          <StyledCategoryContent>
+            {categoryItems.map((item, index) => (
+              <StyledCategoryItem key={index}>
+                <Button variant="text">{item}</Button>
+              </StyledCategoryItem>
+            ))}
+          </StyledCategoryContent>
+        </StyledCategoryWrapper>
+      )}
+    </>
   )
 }
 

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { StyledGlossary, StyledGlossaryCategories } from './Glossary.themes'
+import { StyledGlossary, StyledGlossaryCategories, StyledNoResultsContainer, StyledNoResultsSubtitle, StyledNoResultsTitle } from './Glossary.themes'
 
 import SearchBar from '@/components/molecules/SearchBar/SearchBar.component'
 import GlossaryCategoryIndex from '@/components/molecules/CategoryIndex/CategoryIndex.component'
@@ -41,16 +41,22 @@ export const Glossary: React.FC<GlossaryProps> = ({
           setSelectedCategory(cat === selectedCategory ? null : cat)
         }
       />
-
-      <StyledGlossaryCategories>
-        {displayedCategories.map(category => (
-          <CategoriesWrapper
-            key={category}
-            category={category}
-            categoryItems={categoryData[category]}
-          />
-        ))}
-      </StyledGlossaryCategories>
+      {displayedCategories.length === 0 ? (
+        <StyledNoResultsContainer>
+          <StyledNoResultsTitle>No results found!</StyledNoResultsTitle>
+          <StyledNoResultsSubtitle>Try another term</StyledNoResultsSubtitle>
+        </StyledNoResultsContainer>
+      ) : (
+        <StyledGlossaryCategories>
+          {displayedCategories.map(category => (
+            <CategoriesWrapper
+              key={category}
+              category={category}
+              categoryItems={categoryData[category]}
+            />
+          ))}
+        </StyledGlossaryCategories>
+      )}
     </StyledGlossary>
   )
 }

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

@@ -1,278 +1,152 @@
-import React from 'react'
+import React, { useState } from 'react'
 import Glossary from './Glossary.component'
+interface GlossaryItem {
+    slug: string
+    name: string
+}
 
-export default {
-  title: 'Organisms/Glossary',
-  component: Glossary
+interface GlossaryCategory {
+    name: string
+    items: GlossaryItem[]
 }
 
-export const Basic = () => (
-    <Glossary
-        title="Glossary"
-        subtitle="Explore commonly used terms in the gaming world."
-        categories={[
-            {
-                name: 'glossary-category',
+const categories: GlossaryCategory[] = [
+        {
+                name: 'A',
                 items: [
-                    { slug: 'a', name: 'A' },
-                    { slug: 'm', name: 'M' },
-                    { slug: 'b', name: 'B' },
-                    { slug: 'c', name: 'C' },
-                    { slug: 'd', name: 'D' },
-                    { slug: 'e', name: 'E' },
-                    { slug: 'f', name: 'F' },
-                    { slug: 'g', name: 'G' },
-                    { slug: 'h', name: 'H' },
-                    { slug: 'i', name: 'I' },
-                    { slug: 'j', name: 'J' },
-                    { slug: 'k', name: 'K' },
-                    { slug: 'l', name: 'L' },
-                    { slug: 'n', name: 'N' },
-                    { slug: 'o', name: 'O' },
-                    { slug: 'q', name: 'Q' },
-                    { slug: 'r', name: 'R' },
-                    { slug: 't', name: 'T' },
-                    { slug: 'u', name: 'U' },
-                    { slug: 'v', name: 'V' },
-                    { slug: 'w', name: 'W' },
-                    { slug: 'x', name: 'X' },
-                    { slug: 'y', name: 'Y' },
-                    { slug: 'z', name: 'Z' }
+                        { slug: 'afk', name: 'AFK' },
+                        { slug: 'aimbot', name: 'AIMBOT' },
+                        { slug: 'aggro', name: 'Aggro' },
+                        { slug: 'aoe', name: 'AOE' },
+                        { slug: 'avatar', name: 'Avatar' }
                 ]
-            },
-            {
-                name: 'advanced-category',
+        },
+        {
+                name: 'B',
                 items: [
-                    { slug: 'p', name: 'P' },
-                    { slug: 's', name: 'S' }
+                        { slug: 'buff', name: 'Buff' },
+                        { slug: 'boss', name: 'Boss' },
+                        { slug: 'build', name: 'Build' }
                 ]
-            }
-        ]}
-        items={[
-            {
-                title: 'Ace',
-                categories: [{ name: 'glossary-category', items: [{ slug: 'a', name: 'A' }] }]
-            },
-            {
-                title: 'AFK',
-                categories: [{ name: 'glossary-category', items: [{ slug: 'a', name: 'A' }] }]
-            },
-            {
-                title: 'Aggro',
-                categories: [{ name: 'glossary-category', items: [{ slug: 'a', name: 'A' }] }]
-            },
-            {
-                title: 'Buff',
-                categories: [{ name: 'glossary-category', items: [{ slug: 'b', name: 'B' }] }]
-            },
-            {
-                title: 'Bot',
-                categories: [{ name: 'glossary-category', items: [{ slug: 'b', name: 'B' }] }]
-            },
-            {
-                title: 'Cooldown',
-                categories: [{ name: 'glossary-category', items: [{ slug: 'c', name: 'C' }] }]
-            },
-            {
-                title: 'Carry',
-                categories: [{ name: 'glossary-category', items: [{ slug: 'c', name: 'C' }] }]
-            },
-            {
-                title: 'Debuff',
-                categories: [{ name: 'glossary-category', items: [{ slug: 'd', name: 'D' }] }]
-            },
-            {
-                title: 'DPS',
-                categories: [{ name: 'glossary-category', items: [{ slug: 'd', name: 'D' }] }]
-            },
-            {
-                title: 'Experience',
-                categories: [{ name: 'glossary-category', items: [{ slug: 'e', name: 'E' }] }]
-            },
-            {
-                title: 'Farm',
-                categories: [{ name: 'glossary-category', items: [{ slug: 'f', name: 'F' }] }]
-            },
-            {
-                title: 'Gank',
-                categories: [{ name: 'glossary-category', items: [{ slug: 'g', name: 'G' }] }]
-            },
-            {
-                title: 'Heal',
-                categories: [{ name: 'glossary-category', items: [{ slug: 'h', name: 'H' }] }]
-            },
-            {
-                title: 'Jungle',
-                categories: [{ name: 'glossary-category', items: [{ slug: 'j', name: 'J' }] }]
-            },
-            {
-                title: 'KDA',
-                categories: [{ name: 'glossary-category', items: [{ slug: 'k', name: 'K' }] }]
-            },
-            {
-                title: 'Lane',
-                categories: [{ name: 'glossary-category', items: [{ slug: 'l', name: 'L' }] }]
-            },
-            {
-                title: 'Multikill',
-                categories: [{ name: 'glossary-category', items: [{ slug: 'm', name: 'M' }] }]
-            },
-            {
-                title: 'Nerf',
-                categories: [{ name: 'glossary-category', items: [{ slug: 'n', name: 'N' }] }]
-            },
-            {
-                title: 'Objective',
-                categories: [{ name: 'glossary-category', items: [{ slug: 'o', name: 'O' }] }]
-            },
-            {
-                title: 'Pentakill',
-                categories: [{ name: 'advanced-category', items: [{ slug: 'p', name: 'P' }] }]
-            },
-            {
-                title: 'Quest',
-                categories: [{ name: 'glossary-category', items: [{ slug: 'q', name: 'Q' }] }]
-            },
-            {
-                title: 'Respawn',
-                categories: [{ name: 'glossary-category', items: [{ slug: 'r', name: 'R' }] }]
-            },
-            {
-                title: 'Support',
-                categories: [{ name: 'advanced-category', items: [{ slug: 's', name: 'S' }] }]
-            },
-            {
-                title: 'Tank',
-                categories: [{ name: 'glossary-category', items: [{ slug: 't', name: 'T' }] }]
-            },
-            {
-                title: 'Ultimate',
-                categories: [{ name: 'glossary-category', items: [{ slug: 'u', name: 'U' }] }]
-            },
-            {
-                title: 'Vision',
-                categories: [{ name: 'glossary-category', items: [{ slug: 'v', name: 'V' }] }]
-            },
-            {
-                title: 'Wave',
-                categories: [{ name: 'glossary-category', items: [{ slug: 'w', name: 'W' }] }]
-            },
-            {
-                title: 'XP',
-                categories: [{ name: 'glossary-category', items: [{ slug: 'x', name: 'X' }] }]
-            },
-            {
-                title: 'Yolo',
-                categories: [{ name: 'glossary-category', items: [{ slug: 'y', name: 'Y' }] }]
-            },
-            {
-                title: 'Zoning',
-                categories: [{ name: 'glossary-category', items: [{ slug: 'z', name: 'Z' }] }]
-            },
-            // Additional terms
-            {
-                title: 'ADC',
-                categories: [{ name: 'glossary-category', items: [{ slug: 'a', name: 'A' }] }]
-            },
-            {
-                title: 'AoE',
-                categories: [{ name: 'glossary-category', items: [{ slug: 'a', name: 'A' }] }]
-            },
-            {
-                title: 'Backdoor',
-                categories: [{ name: 'glossary-category', items: [{ slug: 'b', name: 'B' }] }]
-            },
-            {
-                title: 'CC',
-                categories: [{ name: 'glossary-category', items: [{ slug: 'c', name: 'C' }] }]
-            },
-            {
-                title: 'Cheese',
-                categories: [{ name: 'glossary-category', items: [{ slug: 'c', name: 'C' }] }]
-            },
-            {
-                title: 'Draft',
-                categories: [{ name: 'glossary-category', items: [{ slug: 'd', name: 'D' }] }]
-            },
-            {
-                title: 'Engage',
-                categories: [{ name: 'glossary-category', items: [{ slug: 'e', name: 'E' }] }]
-            },
-            {
-                title: 'Feed',
-                categories: [{ name: 'glossary-category', items: [{ slug: 'f', name: 'F' }] }]
-            },
-            {
-                title: 'First Blood',
-                categories: [{ name: 'glossary-category', items: [{ slug: 'f', name: 'F' }] }]
-            },
-            {
-                title: 'GG',
-                categories: [{ name: 'glossary-category', items: [{ slug: 'g', name: 'G' }] }]
-            },
-            {
-                title: 'Harass',
-                categories: [{ name: 'glossary-category', items: [{ slug: 'h', name: 'H' }] }]
-            },
-            {
-                title: 'Initiate',
-                categories: [{ name: 'glossary-category', items: [{ slug: 'i', name: 'I' }] }]
-            },
-            {
-                title: 'Kiting',
-                categories: [{ name: 'glossary-category', items: [{ slug: 'k', name: 'K' }] }]
-            },
-            {
-                title: 'Leash',
-                categories: [{ name: 'glossary-category', items: [{ slug: 'l', name: 'L' }] }]
-            },
-            {
-                title: 'Meta',
-                categories: [{ name: 'glossary-category', items: [{ slug: 'm', name: 'M' }] }]
-            },
-            {
-                title: 'Outplay',
-                categories: [{ name: 'glossary-category', items: [{ slug: 'o', name: 'O' }] }]
-            },
-            {
-                title: 'Peel',
-                categories: [{ name: 'advanced-category', items: [{ slug: 'p', name: 'P' }] }]
-            },
-            {
-                title: 'Roam',
-                categories: [{ name: 'glossary-category', items: [{ slug: 'r', name: 'R' }] }]
-            },
-            {
-                title: 'Snowball',
-                categories: [{ name: 'advanced-category', items: [{ slug: 's', name: 'S' }] }]
-            },
-            {
-                title: 'Split Push',
-                categories: [{ name: 'advanced-category', items: [{ slug: 's', name: 'S' }] }]
-            },
-            {
-                title: 'Tilt',
-                categories: [{ name: 'glossary-category', items: [{ slug: 't', name: 'T' }] }]
-            },
-            {
-                title: 'Trade',
-                categories: [{ name: 'glossary-category', items: [{ slug: 't', name: 'T' }] }]
-            },
-            {
-                title: 'Wombo Combo',
-                categories: [{ name: 'glossary-category', items: [{ slug: 'w', name: 'W' }] }]
-            },
-            {
-                title: 'Zone',
-                categories: [{ name: 'glossary-category', items: [{ slug: 'z', name: 'Z' }] }]
-            }
-        ]}
-        placeholder="What are you looking for?"
+        }
+]
+
+// Helper to build categoryData from categories and items
+interface BuildCategoryDataItem {
+    slug: string
+    name: string
+}
+
+interface BuildCategoryDataCategory {
+    name: string
+    items: BuildCategoryDataItem[]
+}
+
+interface CategoryData {
+    [categoryName: string]: string[]
+}
+
+function buildCategoryData(
+    categories: BuildCategoryDataCategory[],
+    items: BuildCategoryDataItem[]
+): CategoryData {
+    const data: CategoryData = {}
+    categories.forEach((cat: BuildCategoryDataCategory) => {
+        data[cat.name] = cat.items.map((item: BuildCategoryDataItem) => item.name)
+    })
+    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
+  })
+  return Object.keys(filtered)
+}
+
+
+// Build categoryData for the Glossary component
+const categoryData = buildCategoryData(categories, [])
+
+export default {
+  title: 'Organisms/Glossary',
+  component: Glossary
+}
+
+export const Basic = () => {
+  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
+  )
+
+  return (
+    <Glossary
+      searchTerm={searchTerm}
+      setSearchTerm={setSearchTerm}
+      selectedCategory={selectedCategory}
+      setSelectedCategory={setSelectedCategory}
+      categoryData={categoryData}
+      displayedCategories={displayedCategories}
+      placeholder="What are you looking for?"
     />
-)
+  )
+}
+
 Basic.parameters = {
   backgrounds: {
     default: 'glossary-bg',
     values: [{ name: 'glossary-bg', value: '#33052F' }]
   }
 }
+
+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
+  )
+
+  return (
+    <Glossary
+      searchTerm={searchTerm}
+      setSearchTerm={setSearchTerm}
+      selectedCategory={selectedCategory}
+      setSelectedCategory={setSelectedCategory}
+      categoryData={categoryData}
+      displayedCategories={displayedCategories}
+      placeholder="What are you looking for?"
+    />
+  )
+}
+
+NoResults.parameters = {
+  backgrounds: {
+    default: 'glossary-bg',
+    values: [{ name: 'glossary-bg', value: '#33052F' }]
+  }
+}

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

@@ -1,4 +1,4 @@
-import { colors } from '@/styles/variables'
+import { colors, typography } from '@/styles/variables'
 import styled from 'styled-components'
 
 export const StyledGlossary = styled.div`
@@ -15,3 +15,27 @@ export const StyledGlossaryTitle = styled.h1`
 export const StyledGlossaryCategories = styled.div`
   width: 100%;
 `
+export const StyledNoResultsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-top: 6rem;
+`
+export const StyledNoResultsTitle = styled.h1`
+  color: ${colors.primary50};
+  font-size: 7.5rem;
+  font-weight: 700;
+  text-align: center;
+  @media (max-width: 600px) {
+    font-size: 3rem;
+  }
+`
+export const StyledNoResultsSubtitle = styled.h4`
+  color: ${colors.gray20};
+  font-size: 2.25rem;
+  font-weight: 700;
+  @media (max-width: 600px) {
+    font-size: 1.5rem;
+  }
+`