Enhancement - collection do not render empty filter (#972)

* make 'others' a const

* extract into consts

* extract into getYearFilters

* extract getCategoryFilters

* add correct types

* extract getTagFilters

* rename to singular

* move logic into each get*Filter function to improve readability

* fix import

* remove type renaming during import

* refactor imports location

* refactor: standardize code structure

* only return filters with at least 2 items

* add storybook

* do not render "category" if there's no category filter

* Update packages/components/src/templates/next/layouts/Collection/utils.ts

Co-authored-by: Hsu Zhong Jun <27919917+dcshzj@users.noreply.github.com>

* split methods in utils into utils folder

* sort tag filters

* undo: shouldShowCategory

* should filter out any filters with no items

* add tests

* update storybook

---------

Co-authored-by: Hsu Zhong Jun <27919917+dcshzj@users.noreply.github.com>

packages/components/src/templates/next/layouts/Collection/Collection.stories.tsx

@@ -406,6 +406,39 @@ export const AllResultsNoDate: Story = {
   },
 }
 
+export const AllResultsSameCategory: Story = {
+  name: "Should show category filter even if all items have same category",
+  args: generateArgs({
+    collectionItems: COLLECTION_ITEMS.map((item) => ({
+      ...item,
+      category: "The only categ0ry",
+    })),
+  }),
+  play: async ({ canvasElement }) => {
+    const screen = within(canvasElement)
+    const categoryFilter = screen.queryByText(/Category/i)
+    await expect(categoryFilter).toBeInTheDocument()
+
+    const categoryItems = await screen.findAllByText(/The only categ0ry \(30\)/)
+    await expect(categoryItems.length).toBe(1)
+  },
+}
+
+export const AllResultsSameYear: Story = {
+  name: "Should show year filter if all items have same year",
+  args: generateArgs({
+    collectionItems: COLLECTION_ITEMS.map((item) => ({
+      ...item,
+      date: "2026-05-07",
+    })),
+  }),
+  play: async ({ canvasElement }) => {
+    const screen = within(canvasElement)
+    const yearFilter = screen.queryByText(/Year/i)
+    await expect(yearFilter).toBeInTheDocument()
+  },
+}
+
 export const FileCard: Story = {
   args: generateArgs({
     collectionItems: [COLLECTION_ITEMS[1]] as IsomerSitemap[],

packages/components/src/templates/next/layouts/Collection/Collection.tsx

@@ -14,6 +14,8 @@ import { Skeleton } from "../Skeleton"
 import CollectionClient from "./CollectionClient"
 import { getAvailableFilters, shouldShowDate } from "./utils"
 
+const CATEGORY_OTHERS = "Others"
+
 const getCollectionItems = (
   site: IsomerSiteProps,
   permalink: string,
@@ -62,7 +64,7 @@ const getCollectionItems = (
         type: "collectionCard" as const,
         rawDate: date,
         lastUpdated: date?.toISOString(),
-        category: item.category || "Others",
+        category: item.category || CATEGORY_OTHERS,
         title: item.title,
         description: item.summary,
         image: item.image,

packages/components/src/templates/next/layouts/Collection/utils/__tests__/getCategoryFilter.test.ts

@@ -0,0 +1,56 @@
+import { describe, expect, it } from "vitest"
+
+import type { ProcessedCollectionCardProps } from "~/interfaces"
+import { getCategoryFilter } from "../getCategoryFilter"
+
+describe("getCategoryFilter", () => {
+  it("should return empty filter items when no items provided", () => {
+    // Arrange
+    const items: ProcessedCollectionCardProps[] = []
+
+    // Act
+    const result = getCategoryFilter(items)
+
+    // Assert
+    expect(result).toEqual({
+      id: "category",
+      label: "Category",
+      items: [],
+    })
+  })
+
+  it("should count and format categories correctly", () => {
+    // Arrange
+    const items: ProcessedCollectionCardProps[] = [
+      {
+        category: "guides",
+      } as ProcessedCollectionCardProps,
+      {
+        category: "guides",
+      } as ProcessedCollectionCardProps,
+      {
+        category: "articles",
+      } as ProcessedCollectionCardProps,
+      {
+        category: "tutorials",
+      } as ProcessedCollectionCardProps,
+      {
+        category: "tutorials",
+      } as ProcessedCollectionCardProps,
+    ]
+
+    // Act
+    const result = getCategoryFilter(items)
+
+    // Assert
+    expect(result).toEqual({
+      id: "category",
+      label: "Category",
+      items: [
+        { id: "articles", label: "Articles", count: 1 },
+        { id: "guides", label: "Guides", count: 2 },
+        { id: "tutorials", label: "Tutorials", count: 2 },
+      ],
+    })
+  })
+})