From f499e730623719a7da16835d16c4e408f24e8f51 Mon Sep 17 00:00:00 2001
From: Romain Lenzotti <rom.lenzotti@gmail.com>
Date: Sat, 26 Oct 2024 15:06:57 +0200
Subject: [PATCH] feat(theme): add Api ref component

---
 docs/api.md                                   |   7 +-
 packages/theme/DefaultTheme.ts                |   3 +-
 .../api/{mapSymbols.ts => SymbolTypes.ts}     |  20 ----
 .../theme/composables/api/interfaces/Api.ts   |   2 +
 .../theme/composables/api/mapSymbols.spec.ts  |  48 ---------
 .../composables/api/useApiContent.spec.ts     |   4 +-
 .../theme/composables/api/useApiContent.ts    |  33 +++++-
 .../theme/composables/api/useApiModules.ts    |  42 --------
 .../theme/composables/api/useWarehouse.ts     |   1 +
 .../config/__mocks__/useThemeConfig.ts        |   2 +-
 .../composables/config/useThemeConfig.spec.ts |   2 +
 .../composables/config/useThemeConfig.ts      |   1 -
 .../molecules/api-anchor/ApiAnchor.spec.ts    |   2 +-
 .../theme/molecules/api-anchor/ApiAnchor.vue  |   2 +-
 .../api-anchor/ApiAnchorQuery.spec.ts         |   5 +-
 .../molecules/api-anchor/ApiAnchorQuery.vue   |  10 +-
 .../molecules/api-list/ApiList.stories.ts     |  28 +++++
 packages/theme/molecules/api-list/ApiList.vue |   7 +-
 .../theme/molecules/banner/LightBanner.vue    |   6 +-
 .../molecules/button-badge/ButtonBadge.vue    | 100 +++++++++---------
 .../button-boxes/ButtonBoxes.spec.ts          |  10 +-
 .../button-boxes/ButtonBoxes.stories.ts       |   8 +-
 .../molecules/button-boxes/ButtonBoxes.vue    |   1 +
 .../molecules/card-package/CardPackage.vue    |   2 +-
 .../molecules/filters/ClearableFilter.vue     |  12 ++-
 packages/theme/molecules/filters/FilterBy.vue |  32 +++---
 packages/theme/molecules/sort-by/SortBy.vue   |   1 +
 packages/theme/organisms/api/Api.spec.ts      |  35 ++++++
 packages/theme/organisms/api/Api.stories.ts   |  55 ++++++++++
 packages/theme/organisms/api/Api.vue          |  89 ++++++++++++++++
 .../GithubContributors.spec.ts                |  13 +--
 .../GithubContributors.vue                    |   3 +-
 packages/theme/organisms/home/HomeBanner.vue  |   2 +-
 .../organisms/warehouse/Warehouse.stories.ts  |  50 ++++++++-
 .../theme/organisms/warehouse/Warehouse.vue   |   1 +
 test/vitepress.client.ts                      |   2 +
 36 files changed, 417 insertions(+), 224 deletions(-)
 rename packages/theme/composables/api/{mapSymbols.ts => SymbolTypes.ts} (51%)
 delete mode 100644 packages/theme/composables/api/mapSymbols.spec.ts
 delete mode 100644 packages/theme/composables/api/useApiModules.ts
 create mode 100644 packages/theme/molecules/api-list/ApiList.stories.ts
 create mode 100644 packages/theme/organisms/api/Api.spec.ts
 create mode 100644 packages/theme/organisms/api/Api.stories.ts
 create mode 100644 packages/theme/organisms/api/Api.vue

diff --git a/docs/api.md b/docs/api.md
index 210463c..bf86d77 100644
--- a/docs/api.md
+++ b/docs/api.md
@@ -1,4 +1,5 @@
 ---
+layout: page
 meta:
   - name: description
     content: Api Reference of Ts.ED. Use decorator to build your model and map data.
@@ -6,8 +7,4 @@ meta:
     content: api reference model decorators ts.ed express typescript node.js javascript jsonschema json mapper serialization deserialization
 ---
 
-# Api Reference
-
-<br />
-
-[//]: # (<Api />)
+<Api />
diff --git a/packages/theme/DefaultTheme.ts b/packages/theme/DefaultTheme.ts
index b7cb19e..3dfa001 100644
--- a/packages/theme/DefaultTheme.ts
+++ b/packages/theme/DefaultTheme.ts
@@ -17,6 +17,7 @@ import HomeFrameworks from "./organisms/home/HomeFrameworks.vue";
 import HomeBody from "./organisms/home/HomeBody.vue";
 import MessageCircleHeart from "./atoms/svg/MessageCircleHeart.vue";
 import Warehouse from "./organisms/warehouse/Warehouse.vue";
+import Api from "./organisms/api/Api.vue";
 
 export default {
   extends: DefaultTheme,
@@ -29,6 +30,7 @@ export default {
     });
   },
   enhanceApp({app}) {
+    app.component("Api", Api);
     app.component("ApiList", ApiList);
     app.component("ApiAnchorQuery", ApiAnchorQuery);
     app.component("GithubContributors", GithubContributors);
@@ -41,7 +43,6 @@ export default {
     app.component("Banner", Banner);
     app.component("Warehouse", Warehouse);
     app.directive("lazyload-observer", LazyLoadObserver);
-
     // Layouts
   }
 } satisfies Theme;
diff --git a/packages/theme/composables/api/mapSymbols.ts b/packages/theme/composables/api/SymbolTypes.ts
similarity index 51%
rename from packages/theme/composables/api/mapSymbols.ts
rename to packages/theme/composables/api/SymbolTypes.ts
index 4768bb0..226c70f 100644
--- a/packages/theme/composables/api/mapSymbols.ts
+++ b/packages/theme/composables/api/SymbolTypes.ts
@@ -1,5 +1,3 @@
-import type {ApiResponse} from "./interfaces/Api";
-
 export const SymbolTypes = [
   {
     value: "decorator",
@@ -42,21 +40,3 @@ export const SymbolTypes = [
     code: "T"
   }
 ];
-
-export function mapSymbols(items: ApiResponse) {
-  return Object.values(items.modules).reduce((symbols: any[], current) => {
-    return [
-      ...symbols,
-      ...current.symbols.map((symbol) => {
-        return {
-          ...symbol,
-          // additional properties for the Api search tools
-          name: symbol.symbolName,
-          type: symbol.symbolType,
-          tags: symbol.status.join(","),
-          labels: symbol.status
-        };
-      })
-    ];
-  }, []);
-}
diff --git a/packages/theme/composables/api/interfaces/Api.ts b/packages/theme/composables/api/interfaces/Api.ts
index 5252f82..8706f9b 100644
--- a/packages/theme/composables/api/interfaces/Api.ts
+++ b/packages/theme/composables/api/interfaces/Api.ts
@@ -1,5 +1,6 @@
 export type ApiSymbolType = "interface" | "decorator" | "class" | "type" | "enum" | "const" | "function" | "service";
 export type ApiSymbolStatus = "stable" | "deprecated" | "experimental" | "private" | "public";
+
 export interface ApiSymbol {
   path?: string;
   symbolName: string;
@@ -11,6 +12,7 @@ export interface ApiSymbol {
 }
 
 export interface ApiResponse {
+  symbolTypes: { label: string; value: string; }[];
   modules: Record<
     string,
     {
diff --git a/packages/theme/composables/api/mapSymbols.spec.ts b/packages/theme/composables/api/mapSymbols.spec.ts
deleted file mode 100644
index 87a1d62..0000000
--- a/packages/theme/composables/api/mapSymbols.spec.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import {mapSymbols} from "./mapSymbols";
-import type {ApiResponse} from "./interfaces/Api";
-
-describe("Map Symbols", () => {
-  it("should map symbols", () => {
-    const data = {
-      modules: {
-        "@tsed/core": {
-          symbols: [
-            {
-              path: "/api/core/types/decorators/Configurable",
-              symbolName: "Configurable",
-              module: "@tsed/core",
-              symbolType: "decorator",
-              symbolLabel: "Decorator",
-              symbolCode: "@",
-              status: ["stable"]
-            }
-          ]
-        }
-      }
-    } satisfies ApiResponse;
-
-    const result = mapSymbols(data);
-
-    expect(result).toMatchInlineSnapshot(`
-      [
-        {
-          "labels": [
-            "stable",
-          ],
-          "module": "@tsed/core",
-          "name": "Configurable",
-          "path": "/api/core/types/decorators/Configurable",
-          "status": [
-            "stable",
-          ],
-          "symbolCode": "@",
-          "symbolLabel": "Decorator",
-          "symbolName": "Configurable",
-          "symbolType": "decorator",
-          "tags": "stable",
-          "type": "decorator",
-        },
-      ]
-    `);
-  });
-});
diff --git a/packages/theme/composables/api/useApiContent.spec.ts b/packages/theme/composables/api/useApiContent.spec.ts
index a84d1c5..7a34201 100644
--- a/packages/theme/composables/api/useApiContent.spec.ts
+++ b/packages/theme/composables/api/useApiContent.spec.ts
@@ -29,6 +29,8 @@ describe("useApiContent", () => {
         }
       }
     });
-    expect(useFetch).toHaveBeenCalledWith("https://tsed.io/api.json");
+    expect(useFetch).toHaveBeenCalledWith("https://tsed.io/api.json",{
+      afterFetch: expect.any(Function)
+    });
   });
 });
diff --git a/packages/theme/composables/api/useApiContent.ts b/packages/theme/composables/api/useApiContent.ts
index 2d69d43..d922b3a 100644
--- a/packages/theme/composables/api/useApiContent.ts
+++ b/packages/theme/composables/api/useApiContent.ts
@@ -2,10 +2,39 @@ import {useFetch} from "@vueuse/core";
 import type {ApiResponse} from "./interfaces/Api";
 import {useThemeConfig} from "../config/useThemeConfig";
 
+export function mapSymbol(symbol: any) {
+  return {
+    ...symbol,
+    // additional properties for the Api search tools
+    name: symbol.symbolName,
+    type: symbol.symbolType,
+    tags: symbol.status.join(","),
+    labels: symbol.status
+  };
+}
+
 export function useApiContent() {
   const theme = useThemeConfig();
-
   const apiUrl = theme.value.apiUrl;
 
-  return useFetch<ApiResponse>(apiUrl).get().json();
+  return useFetch<ApiResponse>(apiUrl, {
+    afterFetch(ctx) {
+      ctx.data.modules = Object.fromEntries(Object.entries(ctx.data.modules)
+        .map(([key, item]: [string, any]) => {
+
+          const symbols = new Map();
+
+          item.symbols.forEach((symbol: any) => {
+            symbol = mapSymbol(symbol);
+            symbols.set(symbol.symbolName, symbol);
+          });
+
+          item.symbols = [...symbols.values()];
+
+          return [key, item];
+        }));
+
+      return ctx;
+    }
+  }).get().json<ApiResponse>();
 }
diff --git a/packages/theme/composables/api/useApiModules.ts b/packages/theme/composables/api/useApiModules.ts
deleted file mode 100644
index 64d6a03..0000000
--- a/packages/theme/composables/api/useApiModules.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import {useApiContent} from "./useApiContent";
-import type {ApiSymbol, ApiSymbolStatus} from "./interfaces/Api";
-
-export interface UseApiModulesOptions {
-  currentType?: string;
-  currentStatus?: string;
-  keyword?: string;
-}
-
-export function useApiModules({currentType, currentStatus, keyword}: UseApiModulesOptions) {
-  const {data} = useApiContent();
-
-  if (!data.value.modules) {
-    return {};
-  }
-
-  const modules = data.value.modules;
-
-  return Object.keys(modules)
-    .sort((a, b) => (a < b ? -1 : 1))
-    .reduce((acc: Record<string, any>, key) => {
-      const symbols = modules[key].symbols.filter((symbol: ApiSymbol) => {
-        if (currentType && symbol.symbolType !== currentType) {
-          return false;
-        }
-
-        if (currentStatus && symbol.status.indexOf(currentStatus as unknown as ApiSymbolStatus)) {
-          return false;
-        }
-
-        if (keyword) {
-          return symbol.symbolName.toLowerCase().indexOf(keyword.toLocaleLowerCase()) > -1;
-        }
-
-        return true;
-      });
-
-      acc[key] = {...modules[key], symbols};
-
-      return acc;
-    }, {});
-}
diff --git a/packages/theme/composables/api/useWarehouse.ts b/packages/theme/composables/api/useWarehouse.ts
index eab32f5..7a1f1c7 100644
--- a/packages/theme/composables/api/useWarehouse.ts
+++ b/packages/theme/composables/api/useWarehouse.ts
@@ -24,6 +24,7 @@ export function useWarehouse(docsRepo: string) {
   const fetchPackages = async () => {
     isActive.value = true;
     const endpoint = `${docsRepo.split("/rest")[0]}/rest/warehouse`;
+
     try {
       const {data} = await axios.get<WarehousePackage[]>(endpoint);
 
diff --git a/packages/theme/composables/config/__mocks__/useThemeConfig.ts b/packages/theme/composables/config/__mocks__/useThemeConfig.ts
index b70d843..0f5f6dd 100644
--- a/packages/theme/composables/config/__mocks__/useThemeConfig.ts
+++ b/packages/theme/composables/config/__mocks__/useThemeConfig.ts
@@ -1,5 +1,5 @@
 export function useThemeConfig() {
-  const ref: {apiUrl: string; apiRedirectUrl: string; repo: string; githubProxyUrl: string; value: any} = {
+  const ref: { apiUrl: string; apiRedirectUrl: string; repo: string; githubProxyUrl: string; value: any } = {
     apiUrl: "https://tsed.io/api.json",
     apiRedirectUrl: "https://api-docs.tsed.io",
     repo: "tsedio/tsed",
diff --git a/packages/theme/composables/config/useThemeConfig.spec.ts b/packages/theme/composables/config/useThemeConfig.spec.ts
index 6b9ce53..df47fcd 100644
--- a/packages/theme/composables/config/useThemeConfig.spec.ts
+++ b/packages/theme/composables/config/useThemeConfig.spec.ts
@@ -5,6 +5,8 @@ describe("useThemeConfig", () => {
     const ref: any = {
       apiRedirectUrl: "https://api-docs.tsed.io",
       apiUrl: "https://tsed.io/api.json",
+      "githubProxyUrl": "https://api.tsed.io/rest/github/tsedio/tsed",
+      "repo": "tsedio/tsed",
       value: undefined
     };
     ref.value = ref;
diff --git a/packages/theme/composables/config/useThemeConfig.ts b/packages/theme/composables/config/useThemeConfig.ts
index 9f6fed2..bfeb14a 100644
--- a/packages/theme/composables/config/useThemeConfig.ts
+++ b/packages/theme/composables/config/useThemeConfig.ts
@@ -4,6 +4,5 @@ import type {CustomThemeConfig} from "./interfaces/CustomThemeConfig";
 
 export function useThemeConfig() {
   const {theme} = useData<DefaultTheme.Config & CustomThemeConfig>();
-
   return theme;
 }
diff --git a/packages/theme/molecules/api-anchor/ApiAnchor.spec.ts b/packages/theme/molecules/api-anchor/ApiAnchor.spec.ts
index 5d1b6d1..4216bfc 100644
--- a/packages/theme/molecules/api-anchor/ApiAnchor.spec.ts
+++ b/packages/theme/molecules/api-anchor/ApiAnchor.spec.ts
@@ -38,6 +38,6 @@ describe("<ApiAnchor>", () => {
     expect(screen.getByText("Symbol name")).toBeTruthy();
     expect(screen.getByText("Symbol name")).toHaveClass("line-through");
     expect(screen.getByRole("link")).toHaveAttribute("href", "https://api-docs.tsed.io/path.html");
-    expect(screen.getByRole("link")).toHaveClass("reset-link -bubble opacity-50");
+    expect(screen.getByRole("link")).toHaveClass("reset-link -bubble");
   });
 });
diff --git a/packages/theme/molecules/api-anchor/ApiAnchor.vue b/packages/theme/molecules/api-anchor/ApiAnchor.vue
index 7cf95ac..09f0107 100644
--- a/packages/theme/molecules/api-anchor/ApiAnchor.vue
+++ b/packages/theme/molecules/api-anchor/ApiAnchor.vue
@@ -29,7 +29,7 @@ const link = computed(() => {
     :is="link ? 'a' : 'span'"
     v-bind="link ? {href: link} : {}"
     data-name="ApiAnchor"
-    :class="`reset-link -${theme} ${deprecated ? 'opacity-50' : ''}`"
+    :class="`reset-link -${theme}`"
     :title="props.symbolName"
   >
     <span><ApiIcon :type="props.symbolType" /></span>
diff --git a/packages/theme/molecules/api-anchor/ApiAnchorQuery.spec.ts b/packages/theme/molecules/api-anchor/ApiAnchorQuery.spec.ts
index 6086346..177176c 100644
--- a/packages/theme/molecules/api-anchor/ApiAnchorQuery.spec.ts
+++ b/packages/theme/molecules/api-anchor/ApiAnchorQuery.spec.ts
@@ -3,6 +3,7 @@ import {beforeEach} from "vitest";
 import {useFetch} from "@vueuse/core";
 import ApiAnchorQuery from "./ApiAnchorQuery.vue";
 import {mount} from "@vue/test-utils";
+import {mapSymbol} from "../../composables/api/useApiContent";
 
 vi.mock("@vueuse/core");
 
@@ -22,7 +23,7 @@ describe("<ApiAnchorQuery>", () => {
             modules: {
               "@tsed/core": {
                 symbols: [
-                  {
+                  mapSymbol({
                     path: "/api/core/types/decorators/Configurable",
                     symbolName: "Configurable",
                     module: "@tsed/core",
@@ -30,7 +31,7 @@ describe("<ApiAnchorQuery>", () => {
                     symbolLabel: "Decorator",
                     symbolCode: "@",
                     status: ["stable"]
-                  }
+                  })
                 ]
               }
             }
diff --git a/packages/theme/molecules/api-anchor/ApiAnchorQuery.vue b/packages/theme/molecules/api-anchor/ApiAnchorQuery.vue
index 8624b9c..866fb1a 100644
--- a/packages/theme/molecules/api-anchor/ApiAnchorQuery.vue
+++ b/packages/theme/molecules/api-anchor/ApiAnchorQuery.vue
@@ -3,7 +3,7 @@ import {computed, useSlots} from "vue";
 import {useApiContent} from "../../composables/api/useApiContent";
 import {useFilter} from "../../composables/filters/useFilter";
 import type {ApiSymbol} from "../../composables/api/interfaces/Api";
-import {mapSymbols, SymbolTypes} from "../../composables/api/mapSymbols";
+import {SymbolTypes} from "../../composables/api/SymbolTypes";
 import ApiAnchor from "./ApiAnchor.vue";
 
 interface Props {
@@ -44,7 +44,11 @@ const item = computed(() => {
     return {symbolName: name.value} as ApiSymbol;
   }
 
-  const value = filter(mapSymbols(data.value))[0];
+  const symbols = Object.values(data.value.modules).flatMap(item => {
+    return item.symbols
+  });
+
+  const value = filter(symbols)[0];
 
   if (value) {
     return value;
@@ -66,5 +70,5 @@ const item = computed(() => {
 defineExpose({name, code});
 </script>
 <template>
-  <ApiAnchor v-bind="item" />
+  <ApiAnchor v-bind="item"/>
 </template>
diff --git a/packages/theme/molecules/api-list/ApiList.stories.ts b/packages/theme/molecules/api-list/ApiList.stories.ts
new file mode 100644
index 0000000..f1f7a22
--- /dev/null
+++ b/packages/theme/molecules/api-list/ApiList.stories.ts
@@ -0,0 +1,28 @@
+import type {Meta, StoryObj} from "@storybook/vue3";
+import ApiList from "./ApiList.vue";
+/**
+ * Display Api references by given a query to filter the list.
+ */
+const meta = {
+  title: "ApiList",
+  component: ApiList,
+  parameters: {
+    layout: "centered"
+  },
+  argTypes: {
+
+  }
+} satisfies Meta<typeof ApiList>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    query: "status.includes('platform') && ['@tsed/common', '@tsed/platform-views', '@tsed/platform-params', '@tsed/platform-response-filter', '@tsed/platform-exceptions'].includes(module)"
+  },
+  play() {
+
+  }
+};
diff --git a/packages/theme/molecules/api-list/ApiList.vue b/packages/theme/molecules/api-list/ApiList.vue
index 9c11ba6..6b3164e 100644
--- a/packages/theme/molecules/api-list/ApiList.vue
+++ b/packages/theme/molecules/api-list/ApiList.vue
@@ -4,7 +4,6 @@ import ApiAnchor from "../api-anchor/ApiAnchor.vue";
 import {useApiContent} from "../../composables/api/useApiContent";
 import type {ApiSymbol} from "../../composables/api/interfaces/Api";
 import {useFilter} from "../../composables/filters/useFilter";
-import {mapSymbols} from "../../composables/api/mapSymbols";
 
 interface Props {
   items?: ApiSymbol[];
@@ -28,16 +27,18 @@ const symbols = computed(() => {
     return [];
   }
 
-  return filter(mapSymbols(data.value));
+  return filter(Object.values(data.value.modules).flatMap(item => item.symbols));
 });
+
 defineExpose({symbols});
+
 </script>
 
 <template>
   <div class="bg-gray-100 dark:bg-gray-900 pb-4 p-5 mb-10 rounded-sm">
     <div v-if="data && !isFetching" class="grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-4 gap-4">
       <div v-for="item in symbols" :key="item.symbolName">
-        <ApiAnchor class="w-full px-2 py-1" v-bind="item" theme="list" />
+        <ApiAnchor class="w-full px-2 py-1" v-bind="item" theme="list"/>
       </div>
     </div>
     <span v-else-if="error" class="w-full sm:w-1/3 lg:w-1/4 mb-2 px-2"> Error loading symbols </span>
diff --git a/packages/theme/molecules/banner/LightBanner.vue b/packages/theme/molecules/banner/LightBanner.vue
index e422e77..1728ced 100644
--- a/packages/theme/molecules/banner/LightBanner.vue
+++ b/packages/theme/molecules/banner/LightBanner.vue
@@ -11,14 +11,14 @@ const props = withDefaults(defineProps<LightBannerProps>(), {
 });
 </script>
 <template>
-  <div class="pt-16 pb-16 bg-gray-100 dark:bg-gray-700 sm:pb-24">
+  <div class="bg-gray-100 dark:bg-gray-700 pt-16 pb-16 sm:pb-24">
     <div class="text-center px-4 pb-10 flex flex-col items-center sm:px-6 lg:px-8">
       <h1 class="mt-4 text-4xl font-extrabold leading-10 sm:text-5xl sm:leading-none sm:tracking-tight lg:text-6xl">
         {{ props.title }}
       </h1>
-      <p class="flex items-center justify-center max-w-xl mt-5 text-lg leading-7 sm:text-xl">
+      <div class="flex items-center justify-center max-w-xl mt-5 text-lg leading-7 sm:text-xl">
         <slot />
-      </p>
+      </div>
     </div>
   </div>
 </template>
diff --git a/packages/theme/molecules/button-badge/ButtonBadge.vue b/packages/theme/molecules/button-badge/ButtonBadge.vue
index 77d04ce..d123941 100644
--- a/packages/theme/molecules/button-badge/ButtonBadge.vue
+++ b/packages/theme/molecules/button-badge/ButtonBadge.vue
@@ -10,22 +10,22 @@ export interface ButtonBadgeProps {
   blur?: keyof typeof FILTER_BLURS;
   textSize?: keyof typeof TEXT_SIZES;
   shadow?:
-    | "none"
-    | "sm"
-    | "md"
-    | "lg"
-    | "xl"
-    | "2xl"
-    | "inner"
-    | "outline"
-    | "dark-lg"
-    | "dark-xl"
-    | "dark-2xl"
-    | "dark-inner"
-    | "dark-outline"
-    | "dark-none"
-    | "dark-sm"
-    | "dark-md";
+      | "none"
+      | "sm"
+      | "md"
+      | "lg"
+      | "xl"
+      | "2xl"
+      | "inner"
+      | "outline"
+      | "dark-lg"
+      | "dark-xl"
+      | "dark-2xl"
+      | "dark-inner"
+      | "dark-outline"
+      | "dark-none"
+      | "dark-sm"
+      | "dark-md";
   padding?: number;
   fontWeight?: keyof typeof FONT_WEIGHT;
 }
@@ -63,9 +63,9 @@ const overlayStyle = computed(() => ({
 
 const initial = (text = "") => {
   return text
-    .split(" ")
-    .map((text) => text.slice(0, 1))
-    .join("");
+      .split(" ")
+      .map((text) => text.slice(0, 1))
+      .join("");
 };
 const overflow = (text = "") => {
   return text.slice(0, 12) + (text.length > 12 ? "..." : "");
@@ -74,46 +74,47 @@ const overflow = (text = "") => {
 
 <template>
   <Link :href="href" outbound="false" :title="title" class="button-badge block reset-link">
-    <span
-      data-testid="button-badge-content"
-      class="flex flex-col transition-all relative no-underline"
-      :class="[textSize && `text-${textSize}`]"
+    <figure
+        data-testid="button-badge-content"
+        class="flex flex-col transition-all relative no-underline"
+        :class="[textSize && `text-${textSize}`]"
     >
-      <figure
-        v-lazyload-observer
-        class="flex items-center justify-center relative z-2 rounded-2xl overflow-hidden mb-2"
-        :class="[bgColor && `bg-${bgColor}`, shadow && `shadow-${shadow}`, padding && `p-${padding}`]"
-        :style="imageContainerStyle"
+      <span
+          v-lazyload-observer
+          class="flex items-center justify-center relative z-2 rounded-2xl overflow-hidden mb-2"
+          :class="[bgColor && `bg-${bgColor}`, shadow && `shadow-${shadow}`, padding && `p-${padding}`]"
+          :style="imageContainerStyle"
       >
         <img
-          v-if="src"
-          :data-url="src"
-          class="w-full opacity-0 transition-all no-shadow"
-          :class="{'rounded-2xl': !padding}"
+            v-if="src"
+            :alt="'Image: ' + title"
+            :data-url="src"
+            class="w-full opacity-0 transition-all no-shadow"
+            :class="{'rounded-2xl': !padding}"
         />
         <span v-else class="flex items-center justify-center font-bold uppercase text-2xl h-full">{{
-          initial(title)
-        }}</span>
-      </figure>
+            initial(title)
+          }}</span>
+      </span>
       <span
-        v-if="blur > 0 && src"
-        v-lazyload-observer
-        class="overflow-hidden z-1 rounded-2xl absolute left-0 opacity-50"
-        :class="FILTER_BLURS[blur]"
-        :style="overlayStyle"
-        data-testid="blurred-overlay"
+          v-if="blur > 0 && src"
+          v-lazyload-observer
+          class="overflow-hidden z-1 rounded-2xl absolute left-0 opacity-50"
+          :class="FILTER_BLURS[blur]"
+          :style="overlayStyle"
+          data-testid="blurred-overlay"
       >
-        <img :data-url="src" :alt="initial(title)" class="w-full opacity-0 transition-all" />
+        <img :data-url="src" :alt="' ' + initial(title)" class="w-full opacity-0 transition-all"/>
       </span>
-      <span
-        v-show="showTitle"
-        class="flex items-center justify-center whitespace-pre"
-        :class="FONT_WEIGHT[fontWeight]"
-        :style="{width: `${width}px`}"
+      <figcaption
+          v-show="showTitle"
+          class="flex items-center justify-center whitespace-pre"
+          :class="FONT_WEIGHT[fontWeight]"
+          :style="{width: `${width}px`}"
       >
         {{ overflow(title) }}
-      </span>
-    </span>
+      </figcaption>
+    </figure>
   </Link>
 </template>
 <style>
@@ -121,6 +122,7 @@ const overflow = (text = "") => {
   @apply transition-all scale-100 hover:scale-110 focus:scale-110;
   outline: none;
 }
+
 .vp-doc a.button-badge:focus-visible {
   outline: none !important;
 }
diff --git a/packages/theme/molecules/button-boxes/ButtonBoxes.spec.ts b/packages/theme/molecules/button-boxes/ButtonBoxes.spec.ts
index 5f5f6a5..819a896 100644
--- a/packages/theme/molecules/button-boxes/ButtonBoxes.spec.ts
+++ b/packages/theme/molecules/button-boxes/ButtonBoxes.spec.ts
@@ -36,17 +36,17 @@ describe("ButtonBoxes", () => {
       }
     });
 
-    const officialButton = screen.getByRole("button", {name: "Official"});
-    const AllButton = screen.getByRole("button", {name: "All"});
+    const officialButton = screen.getByRole("checkbox", {name: "Official"});
+    const AllButton = screen.getByRole("checkbox", {name: "All"});
 
-    expect(screen.getAllByRole("button")).toHaveLength(3);
+    expect(screen.getAllByRole("checkbox")).toHaveLength(3);
     expect(AllButton).toBeInTheDocument();
     expect(AllButton).toHaveAttribute("aria-checked", "true");
     expect(officialButton).toBeInTheDocument();
     expect(officialButton).toHaveAttribute("aria-checked", "false");
-    expect(screen.getByRole("button", {name: "Community"})).toBeInTheDocument();
+    expect(screen.getByRole("checkbox", {name: "Community"})).toBeInTheDocument();
 
-    await userEvent.click(screen.getByRole("button", {name: "Official"}));
+    await userEvent.click(screen.getByRole("checkbox", {name: "Official"}));
 
     expect(value).toEqual("official");
     expect(AllButton).toHaveAttribute("aria-checked", "false");
diff --git a/packages/theme/molecules/button-boxes/ButtonBoxes.stories.ts b/packages/theme/molecules/button-boxes/ButtonBoxes.stories.ts
index c65e4f4..ae444d9 100644
--- a/packages/theme/molecules/button-boxes/ButtonBoxes.stories.ts
+++ b/packages/theme/molecules/button-boxes/ButtonBoxes.stories.ts
@@ -60,15 +60,15 @@ export const Default: Story = {
   async play({canvasElement}) {
     const canvas = within(canvasElement);
 
-    const officialButton = canvas.getByRole("button", {name: "Official"});
-    const AllButton = canvas.getByRole("button", {name: "All"});
+    const officialButton = canvas.getByRole("checkbox", {name: "Official"});
+    const AllButton = canvas.getByRole("checkbox", {name: "All"});
 
-    expect(canvas.getAllByRole("button")).toHaveLength(3);
+    expect(canvas.getAllByRole("checkbox")).toHaveLength(3);
     expect(AllButton).toBeInTheDocument();
     expect(AllButton).toHaveAttribute("aria-checked", "true");
     expect(officialButton).toBeInTheDocument();
     expect(officialButton).toHaveAttribute("aria-checked", "false");
-    expect(canvas.getByRole("button", {name: "Community"})).toBeInTheDocument();
+    expect(canvas.getByRole("checkbox", {name: "Community"})).toBeInTheDocument();
 
     await delay();
 
diff --git a/packages/theme/molecules/button-boxes/ButtonBoxes.vue b/packages/theme/molecules/button-boxes/ButtonBoxes.vue
index 6ef5828..6812eb3 100644
--- a/packages/theme/molecules/button-boxes/ButtonBoxes.vue
+++ b/packages/theme/molecules/button-boxes/ButtonBoxes.vue
@@ -37,6 +37,7 @@ const choices = computed(() => {
       v-for="choice in choices"
       :key="choice.value"
       type="button"
+      role="checkbox"
       :aria-label="choice.label"
       :aria-checked="props.modelValue === choice.value"
       class="px-4 py-2 mb-2 text-sm rounded cursor-pointer focus:outline-none"
diff --git a/packages/theme/molecules/card-package/CardPackage.vue b/packages/theme/molecules/card-package/CardPackage.vue
index 01bb585..db98e07 100644
--- a/packages/theme/molecules/card-package/CardPackage.vue
+++ b/packages/theme/molecules/card-package/CardPackage.vue
@@ -37,7 +37,7 @@ const icon = computed(() => {
     class="CardPackage h-full relative flex flex-col overflow-hidden transition-transform duration-150 ease-in-out transform bg-white dark:bg-blueGray-700 rounded-md shadow hover:shadow-lg hover:-translate-y-1"
   >
     <div class="relative flex flex-1 flex-col space-y-2 px-6 py-8 group">
-      <a :href="props.homepage" :aria-label="props.homepage" target="_blank" rel="noopener" class="absolute inset-0" />
+      <a :href="props.homepage" :aria-label="'Home page of ' + name" target="_blank" rel="noopener" class="absolute inset-0" />
 
       <div
         class="transition-opacity duration-200 ease-in-out opacity-0 group-hover:opacity-100 absolute top-4 right-6 cursor-pointer"
diff --git a/packages/theme/molecules/filters/ClearableFilter.vue b/packages/theme/molecules/filters/ClearableFilter.vue
index 34629f8..50669d4 100644
--- a/packages/theme/molecules/filters/ClearableFilter.vue
+++ b/packages/theme/molecules/filters/ClearableFilter.vue
@@ -20,17 +20,19 @@ const clearFilters = () => {
 };
 </script>
 <template>
-  <div class="mb-4 text-blue-900">
-    <span>{{ count }} {{ props.label }}{{ count > 1 ? "s" : "" }} found</span>
+  <div class="mb-4 text-blue-900" data-testid="ClearableFilter">
+    <span>{{ count + " " + props.label + (count > 1 ? "s" : "") + " found" }}</span>
 
     <template v-if="keywords.length">
       <div>
         Filter{{ props.keywords.length ? "s" : "" }}:
         <strong class="mr-1">{{ props.keywords.join(", ") }}</strong>
-        <a @click.prevent="clearFilters"
+        <a role="button"
+           @click.prevent="clearFilters"
+           aria-label="Clear filters"
            class="cursor-pointer"
-          >(<u>clear filter{{ props.keywords.length > 1 ? "s" : "" }}</u
-          >)
+        >(<u>clear filter{{ props.keywords.length > 1 ? "s" : "" }}</u
+        >)
         </a>
       </div>
     </template>
diff --git a/packages/theme/molecules/filters/FilterBy.vue b/packages/theme/molecules/filters/FilterBy.vue
index 98dad3d..b0e7e37 100644
--- a/packages/theme/molecules/filters/FilterBy.vue
+++ b/packages/theme/molecules/filters/FilterBy.vue
@@ -2,7 +2,7 @@
 import {computed, ref} from "vue";
 
 export interface FilterByProps {
-  choices: {label: string; value: string}[];
+  choices: { label: string; value: string }[];
   modelValue: string;
   label: string;
 }
@@ -32,31 +32,31 @@ const currentLabel = computed(() => {
 </script>
 <template>
   <div class="flex items-center mb-4 text-blue-900">
-    <label for="options-menu" class="mr-3" @click="toggle()">{{ label }}</label>
+    <label for="filter-options-menu" class="mr-3" @click="toggle()">{{ label }}</label>
 
     <div class="flex items-stretch">
       <div class="relative w-28 border rounded">
         <button
-          type="button"
-          aria-label="change filter"
-          class="flex items-center justify-center h-full w-full p-1 px-2 hover:bg-blueGray-300 focus:bg-blueGray-300 rounded"
-          @click="toggle()"
+            type="button"
+            aria-label="change filter"
+            class="flex items-center justify-center h-full w-full p-1 px-2 hover:bg-blueGray-300 focus:bg-blueGray-300 rounded"
+            @click="toggle()"
         >
           {{ currentLabel || " - " }}
         </button>
         <div
-          v-show="show"
-          class="absolute left-[-1px] z-[100] bg-white origin-top-right rounded-md shadow-lg border border-gray-200 overflow-hidden"
+            v-show="show"
+            class="absolute left-[-1px] z-[100] bg-white origin-top-right rounded-md shadow-lg border border-gray-200 overflow-hidden"
         >
-          <div id="options-menu" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
+          <div id="filter-options-menu" role="menu" aria-orientation="vertical" aria-labelledby="filter-options-menu">
             <button
-              v-for="option in props.choices"
-              :key="option.value"
-              type="button"
-              :aria-label="`sort by ${option.label}`"
-              :class="{'rounded-bl-none border-b-grey-light': show}"
-              class="flex items-center justify-center p-1 px-2 border-0 shadow-xs w-28 hover:bg-blueGray-300 focus:text-gray-700 text-blue-900 focus:outline-none"
-              @click="onClickOption(option.value)"
+                v-for="option in props.choices"
+                :key="option.value"
+                type="button"
+                :aria-label="`sort by ${option.label}`"
+                :class="{'rounded-bl-none border-b-grey-light': show}"
+                class="flex items-center justify-center p-1 px-2 border-0 shadow-xs w-28 hover:bg-blueGray-300 focus:text-gray-700 text-blue-900 focus:outline-none"
+                @click="onClickOption(option.value)"
             >
               {{ option.label }}
             </button>
diff --git a/packages/theme/molecules/sort-by/SortBy.vue b/packages/theme/molecules/sort-by/SortBy.vue
index 5bfd757..4035e20 100644
--- a/packages/theme/molecules/sort-by/SortBy.vue
+++ b/packages/theme/molecules/sort-by/SortBy.vue
@@ -75,6 +75,7 @@ const currentLabel = computed(() => {
       <div class="flex items-stretch relative border border-l-0 rounded-r-md">
         <button
           type="button"
+          role="checkbox"
           data-testid="button-sort-order"
           :aria-label="modelValue.order === 'asc' ? 'sort ascending' : 'sort descending'"
           :aria-checked="modelValue.order === 'asc'"
diff --git a/packages/theme/organisms/api/Api.spec.ts b/packages/theme/organisms/api/Api.spec.ts
new file mode 100644
index 0000000..d277181
--- /dev/null
+++ b/packages/theme/organisms/api/Api.spec.ts
@@ -0,0 +1,35 @@
+import {expect, userEvent, waitFor} from "@storybook/test";
+import Api from "./Api.vue";
+import {render, screen} from "@testing-library/vue";
+
+describe("<Api />", () => {
+  it("should render Api component", async () => {
+    render(Api);
+
+    await waitFor(() => expect(screen.getByText("@tsed/core")).toBeInTheDocument());
+    await waitFor(() => expect(screen.getByText("@tsed/di")).toBeInTheDocument());
+    await waitFor(() => expect(screen.getByText("AnyToPromise")).toBeInTheDocument());
+    await waitFor(() => expect(screen.getByText("AnyToPromiseResponseTypes")).toBeInTheDocument());
+
+    const searchInput = screen.getByRole("searchbox");
+
+    await expect(searchInput).toBeInTheDocument();
+
+    await userEvent.type(searchInput, "AnyToPromise");
+
+    await expect(screen.queryByText("@tsed/di")).not.toBeInTheDocument();
+
+    const classCheckbox = screen.getByRole("checkbox", {name: "Class"});
+
+    await userEvent.click(classCheckbox);
+
+    await waitFor(() => expect(screen.queryByText("AnyToPromiseResponseTypes")).not.toBeInTheDocument());
+
+    await userEvent.click(classCheckbox);
+    await userEvent.clear(searchInput);
+
+    await waitFor(() => expect(screen.getByText("@tsed/di")).toBeInTheDocument());
+    await waitFor(() => expect(screen.getByText("AnyToPromise")).toBeInTheDocument());
+    await waitFor(() => expect(screen.getByText("AnyToPromiseResponseTypes")).toBeInTheDocument());
+  });
+});
diff --git a/packages/theme/organisms/api/Api.stories.ts b/packages/theme/organisms/api/Api.stories.ts
new file mode 100644
index 0000000..36a5d46
--- /dev/null
+++ b/packages/theme/organisms/api/Api.stories.ts
@@ -0,0 +1,55 @@
+import type {Meta, StoryObj} from "@storybook/vue3";
+import {expect, userEvent, waitFor, within} from "@storybook/test";
+import Api from "./Api.vue";
+
+/**
+ * Use to display api references.
+ */
+const meta = {
+  title: "Api",
+  component: Api,
+  parameters: {
+    layout: "centered"
+  },
+  argTypes: {}
+} satisfies Meta<typeof Api>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+  async play({canvasElement}) {
+    const screen = within(canvasElement);
+
+    await waitFor(() => expect(screen.getByText("@tsed/core")).toBeInTheDocument());
+    await waitFor(() => expect(screen.getByText("@tsed/di")).toBeInTheDocument());
+    await waitFor(() => expect(screen.getByText("AnyToPromise")).toBeInTheDocument());
+    await waitFor(() => expect(screen.getByText("AnyToPromiseResponseTypes")).toBeInTheDocument());
+
+    const searchInput = screen.getByRole("searchbox");
+
+    await expect(searchInput).toBeInTheDocument();
+
+    await userEvent.type(searchInput, "AnyToPromise", {delay: 100});
+
+    screen.getByText("@tsed/core").scrollIntoView();
+    searchInput.scrollIntoView();
+
+    await expect(screen.queryByText("@tsed/di")).not.toBeInTheDocument();
+
+    const classCheckbox = screen.getByRole("checkbox", {name: "Class"});
+
+    await userEvent.click(classCheckbox, {delay: 500});
+
+    await waitFor(() => expect(screen.queryByText("AnyToPromiseResponseTypes")).not.toBeInTheDocument());
+
+    await userEvent.click(classCheckbox, {delay: 500});
+    await userEvent.clear(searchInput);
+
+    await waitFor(() => expect(screen.getByText("@tsed/di")).toBeInTheDocument());
+    await waitFor(() => expect(screen.getByText("AnyToPromise")).toBeInTheDocument());
+    await waitFor(() => expect(screen.getByText("AnyToPromiseResponseTypes")).toBeInTheDocument());
+  }
+};
diff --git a/packages/theme/organisms/api/Api.vue b/packages/theme/organisms/api/Api.vue
new file mode 100644
index 0000000..9544fa8
--- /dev/null
+++ b/packages/theme/organisms/api/Api.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+
+import {computed, ref, watch} from "vue";
+import {useApiContent} from "../../composables/api/useApiContent";
+import ApiList from "../../molecules/api-list/ApiList.vue";
+import LightBanner from "../../molecules/banner/LightBanner.vue";
+import {LoaderCircle, Search} from "lucide-vue-next";
+import ButtonBoxes from "../../molecules/button-boxes/ButtonBoxes.vue";
+import type {ApiSymbol} from "../../composables/api/interfaces/Api";
+
+const {data, isFetching, error} = useApiContent();
+const q = ref("");
+const category = ref("");
+const categoriesChoices = computed(() => [{label: "All", value: ""}].concat(data.value?.symbolTypes || []));
+let timeout: NodeJS.Timeout | null = null;
+
+const modules = computed<Record<string, { name: string; symbols: ApiSymbol[]; }>>(() => {
+  if (isFetching.value || error.value || !data.value) {
+    return {};
+  }
+
+  return Object.entries(data.value.modules).reduce((acc, [key, value]) => {
+    const symbols = value.symbols
+        .filter((symbol) => {
+          const qMatch = q.value ? symbol.symbolName.toLowerCase().includes(q.value.toLowerCase()) : true;
+          const categoryMatch = category.value ? symbol.symbolType.toLowerCase().includes(category.value.toLowerCase()) : true;
+
+          return qMatch && categoryMatch;
+        })
+        .sort((a, b) => a.symbolName.localeCompare(b.symbolName));
+
+    return {
+      ...acc,
+      [key]: {
+        ...value,
+        symbols
+      }
+    };
+  }, {});
+});
+
+
+</script>
+<template>
+  <LightBanner title="Explore API references">
+    <div class="flex flex-col space-y-10 -mb-16">
+
+      <div>Discover our API references (class, decorators, utils) and learn how to use them.</div>
+
+      <div class="flex">
+        <label class="relative flex-1 w-full">
+          <Search class="absolute left-4 top-3"/>
+
+          <input
+              ref="searchPlugin"
+              v-model="q"
+              type="search"
+              aria-label="Search"
+              class="bg-white dark:bg-[#444e60] rounded-full w-full p-3 pl-12 text-base leading-6 placeholder-gray-700 transition duration-150 ease-in-out ring-3 ring-blue-300 focus:outline-none focus:placeholder-gray-500 sm:flex-1"
+              placeholder="Search a reference"
+          />
+        </label>
+      </div>
+    </div>
+  </LightBanner>
+
+  <div class="flex flex-col space-y-3 max-w-site-xxl m-auto mx-5">
+    <div>
+      <div v-if="isFetching" class="text-center text-4xl text-gray-darker mt-10 p-5 flex items-center justify-center">
+        <LoaderCircle class="animate-spin mr-5 text-blue-active" :size="32"/>
+        Loading...
+      </div>
+
+      <div v-else class="container px-4 mx-auto sm:px-0">
+        <ButtonBoxes v-model="category" :choices="categoriesChoices"/>
+      </div>
+    </div>
+
+    <template v-if="!isFetching" v-for="(module, key) in modules" :key="key">
+      <div v-if="module.symbols?.length"
+           v-lazyload-observer:focus.self="true"
+           class="transition-opacity duration-500">
+        <h2 class="font-bold text-xl">{{ module.name }}</h2>
+
+        <ApiList class="mt-4" :items="module.symbols"></ApiList>
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/packages/theme/organisms/github-contributors/GithubContributors.spec.ts b/packages/theme/organisms/github-contributors/GithubContributors.spec.ts
index fcab4f0..37b35c2 100644
--- a/packages/theme/organisms/github-contributors/GithubContributors.spec.ts
+++ b/packages/theme/organisms/github-contributors/GithubContributors.spec.ts
@@ -69,27 +69,28 @@ describe("<GithubContributors>", () => {
               title="Romakita"
             >
               
-              <span
+              <figure
                 class="flex flex-col transition-all relative no-underline text-xxs"
                 data-testid="button-badge-content"
               >
-                <figure
+                <span
                   class="flex items-center justify-center relative z-2 rounded-2xl overflow-hidden mb-2 bg-gray-lighter shadow-none"
                   style="width: 45px; height: 45px;"
                 >
                   <img
+                    alt="Image: Romakita"
                     class="w-full opacity-0 transition-all no-shadow rounded-2xl"
                     data-url="https://avatars.githubusercontent.com/u/1763311?v=4"
                   />
-                </figure>
+                </span>
                 <!--v-if-->
-                <span
+                <figcaption
                   class="flex items-center justify-center whitespace-pre"
                   style="width: 45px;"
                 >
                   Romakita
-                </span>
-              </span>
+                </figcaption>
+              </figure>
               
             </a>
           </li>
diff --git a/packages/theme/organisms/github-contributors/GithubContributors.vue b/packages/theme/organisms/github-contributors/GithubContributors.vue
index b649386..45723ff 100644
--- a/packages/theme/organisms/github-contributors/GithubContributors.vue
+++ b/packages/theme/organisms/github-contributors/GithubContributors.vue
@@ -3,9 +3,9 @@ import {onMounted, ref} from "vue";
 import {useGithubContributors} from "../../composables/api/useGithubContributors";
 import ContributorItems from "../../molecules/contributors/ContributorItems.vue";
 import type {GitHubUser} from "../../composables/api/interfaces/GithubUser";
-import {useThemeConfig} from "../../composables/config/__mocks__/useThemeConfig";
 import type {ButtonBadgeProps} from "../../molecules/button-badge/ButtonBadge.vue";
 import {FONT_WEIGHT} from "../../atoms/tailwind.constants";
+import {useThemeConfig} from "../../composables/config/useThemeConfig";
 
 interface Props extends ButtonBadgeProps {
   users?: string[];
@@ -29,7 +29,6 @@ const props = withDefaults(defineProps<Props>(), {
 const contributors = ref<GitHubUser[]>([]);
 const theme = useThemeConfig();
 const {githubProxyUrl} = theme.value;
-
 const {fetchContributors} = useGithubContributors(githubProxyUrl);
 
 onMounted(async () => {
diff --git a/packages/theme/organisms/home/HomeBanner.vue b/packages/theme/organisms/home/HomeBanner.vue
index 03dd50a..075413a 100644
--- a/packages/theme/organisms/home/HomeBanner.vue
+++ b/packages/theme/organisms/home/HomeBanner.vue
@@ -3,7 +3,7 @@ import Tabs from "../../molecules/tabs/Tabs.vue";
 import Tab from "../../molecules/tabs/Tab.vue";
 import ButtonBanner from "./ButtonBanner.vue";
 import {useStargazers} from "../../composables/api/useStargazers";
-import {useThemeConfig} from "../../composables/config/__mocks__/useThemeConfig";
+import {useThemeConfig} from "../../composables/config/useThemeConfig";
 
 const theme = useThemeConfig();
 const {githubProxyUrl} = theme.value;
diff --git a/packages/theme/organisms/warehouse/Warehouse.stories.ts b/packages/theme/organisms/warehouse/Warehouse.stories.ts
index b6d2f27..ccaf923 100644
--- a/packages/theme/organisms/warehouse/Warehouse.stories.ts
+++ b/packages/theme/organisms/warehouse/Warehouse.stories.ts
@@ -1,5 +1,7 @@
 import type {Meta, StoryObj} from "@storybook/vue3";
 import Warehouse from "./Warehouse.vue";
+import {expect, userEvent, waitFor, within} from "@storybook/test";
+import {formatNumber} from "../../utils/format";
 
 const meta = {
   title: "Warehouse",
@@ -15,5 +17,51 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-  args: {}
+  args: {},
+  async play({canvasElement}) {
+    const screen = within(canvasElement);
+
+    await expect(screen.getByText("Explore plugins")).toBeInTheDocument();
+
+    await expect(screen.getByText("plugins")).toBeInTheDocument();
+    await expect(screen.getByText("100")).toBeInTheDocument();
+    await expect(screen.getByText("maintainers")).toBeInTheDocument();
+    await expect(screen.getByText("7")).toBeInTheDocument();
+    await expect(screen.getByText("downloads last 30 days")).toBeInTheDocument();
+
+    await waitFor(() => expect(screen.getByTestId("ClearableFilter")).toBeInTheDocument())
+
+    const clearableFilter = screen.getByTestId("ClearableFilter");
+
+    await expect(within(clearableFilter).getByText(/plugins/)).toHaveTextContent("126 plugins found");
+
+    await expect(screen.getByText("@tsed/logger")).toBeInTheDocument();
+    await expect(screen.getByText("@tsed/exceptions")).toBeInTheDocument();
+
+    const searchInput = screen.getByRole("searchbox");
+
+    await expect(searchInput).toBeInTheDocument();
+
+    await userEvent.type(searchInput, "logger", {delay: 100});
+
+    await expect(within(clearableFilter).getByText(/plugins/)).toHaveTextContent("12 plugins found");
+
+    await expect(screen.queryByText("@tsed/exceptions")).not.toBeInTheDocument();
+
+    await userEvent.clear(searchInput);
+
+    const paymentCheckbox = screen.getByRole("checkbox", {name: "Payment"});
+
+    await userEvent.click(paymentCheckbox, {delay: 500});
+
+    await expect(screen.queryByText("@tsed/exceptions")).not.toBeInTheDocument();
+    await expect(screen.queryByText("@tsed/stripe")).toBeInTheDocument();
+    await expect(within(clearableFilter).getByText(/plugin/)).toHaveTextContent("1 plugin found");
+
+    const clearFilter = screen.getByRole("button", {name: "Clear filters"});
+
+    await userEvent.click(clearFilter, {delay: 500});
+
+    await expect(within(clearableFilter).getByText(/plugins/)).toHaveTextContent("126 plugins found");
+  }
 };
diff --git a/packages/theme/organisms/warehouse/Warehouse.vue b/packages/theme/organisms/warehouse/Warehouse.vue
index 9adb3ff..722f59a 100644
--- a/packages/theme/organisms/warehouse/Warehouse.vue
+++ b/packages/theme/organisms/warehouse/Warehouse.vue
@@ -29,6 +29,7 @@ const stats = [
 
 const theme = useThemeConfig();
 const {githubProxyUrl} = theme.value;
+
 const {isActive, packages, fetchPackages, tags} = useWarehouse(githubProxyUrl);
 
 const category = ref("");
diff --git a/test/vitepress.client.ts b/test/vitepress.client.ts
index 4cd8a0c..fa812ff 100644
--- a/test/vitepress.client.ts
+++ b/test/vitepress.client.ts
@@ -2,6 +2,8 @@ export function useData() {
   const ref = {
     apiUrl: "https://tsed.io/api.json",
     apiRedirectUrl: "https://api-docs.tsed.io",
+    githubProxyUrl: "https://api.tsed.io/rest/github/tsedio/tsed",
+    repo: "tsedio/tsed",
     value: undefined
   };