feat(theme): add Api ref component

docs/api.md

@@ -1,13 +1,10 @@
 ---
+layout: page
 meta:
   - name: description
     content: Api Reference of Ts.ED. Use decorator to build your model and map data.
   - name: keywords
     content: api reference model decorators ts.ed express typescript node.js javascript jsonschema json mapper serialization deserialization
 ---
 
-# Api Reference
-
-<br />
-
-[//]: # (<Api />)
+<Api />

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;

packages/theme/composables/api/mapSymbols.ts → 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
-        };
-      })
-    ];
-  }, []);
-}

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,
     {

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)
+    });
   });
 });

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>();
 }

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);
 

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",

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;

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;
 }

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");
   });
 });

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>

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,15 +23,15 @@ describe("<ApiAnchorQuery>", () => {
             modules: {
               "@tsed/core": {
                 symbols: [
-                  {
+                  mapSymbol({
                     path: "/api/core/types/decorators/Configurable",
                     symbolName: "Configurable",
                     module: "@tsed/core",
                     symbolType: "decorator",
                     symbolLabel: "Decorator",
                     symbolCode: "@",
                     status: ["stable"]
-                  }
+                  })
                 ]
               }
             }

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>

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() {
+
+  }
+};

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>