Skip to content

Commit 9dafce2

Browse files
tomastrajantomastrajan
committed
feat(showcase): add more API doc layout
1 parent 6990b4c commit 9dafce2

1 file changed

Lines changed: 184 additions & 1 deletion

File tree

‎projects/showcase/src/app/feature/doc/api/api.component.ts‎

Lines changed: 184 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,139 @@ import { MatListModule } from '@angular/material/list';
1212
<h2>API Documentation</h2>
1313
1414
<div class=" mt-8 flex flex-col gap-8">
15+
<div>
16+
<h3>Main Function</h3>
17+
@let mainFunction = apiDoc().mainFunction;
18+
19+
<div class="mt-4 flex flex-col gap-4">
20+
<div class="card flex-col">
21+
<h4>{{ mainFunction.name }}</h4>
22+
<p>{{ mainFunction.description }}</p>
23+
24+
<div class="mt-4">
25+
<h5>Parameters</h5>
26+
<div class="flex flex-col gap-4">
27+
@for (param of mainFunction.parameters; track param.name) {
28+
<div class="p-4 rounded-lg odd:bg-gray-50 dark:odd:bg-gray-900">
29+
<div class="grid grid-cols-1 gap-2 rounded-lg md:grid-cols-4 md:gap-6">
30+
<div class="flex flex-col items-start gap-2">
31+
<code>{{ param.name }}: {{ param.type }}</code>
32+
@if (param.isOptional) {
33+
<span class="text-xs text-gray-500">Optional</span>
34+
}
35+
</div>
36+
<div class="flex-col gap-4 md:col-span-3">
37+
<p class="text-sm">
38+
{{ param.description }}
39+
@if (param.defaultValue) {
40+
<div class="pt-4">
41+
Default value
42+
<code>{{ param.defaultValue }}</code>
43+
</div>
44+
}
45+
</p>
46+
</div>
47+
</div>
48+
</div>
49+
}
50+
</div>
51+
</div>
52+
53+
<div class="mt-4">
54+
<h5>Returns</h5>
55+
<div class="p-4 rounded-lg odd:bg-gray-50 dark:odd:bg-gray-900">
56+
<div class="grid grid-cols-1 gap-2 rounded-lg md:grid-cols-4 md:gap-6">
57+
<div class="flex flex-col items-start gap-2">
58+
<code>{{ mainFunction.returnType }}</code>
59+
</div>
60+
<div class="flex-col gap-4 md:col-span-3">
61+
<p class="text-sm">{{ mainFunction.returnDescription }}</p>
62+
</div>
63+
</div>
64+
</div>
65+
</div>
66+
</div>
67+
</div>
68+
</div>
69+
70+
<div>
71+
<h3>Returned Properties</h3>
72+
@let returnedProperties = apiDoc().returnedProperties;
73+
74+
<div class="mt-4 flex flex-col gap-4">
75+
<div class="card flex-col">
76+
<div class="flex flex-col gap-8">
77+
@for (property of returnedProperties; track property.name) {
78+
<div class="p-4 rounded-lg odd:bg-gray-50 dark:odd:bg-gray-900">
79+
<div class="grid grid-cols-1 gap-2 rounded-lg md:grid-cols-2 md:gap-6 md:items-center">
80+
<div class="flex flex-col items-start gap-2">
81+
<code>{{ property.name }}: {{ property.type }}</code>
82+
</div>
83+
<div class="flex-col gap-4">
84+
<p class="text-sm">
85+
{{ property.description }}
86+
@if (property.defaultValue) {
87+
<div class="pt-4">
88+
Default value
89+
<code>{{ property.defaultValue }}</code>
90+
</div>
91+
}
92+
</p>
93+
</div>
94+
</div>
95+
</div>
96+
}
97+
</div>
98+
</div>
99+
</div>
100+
</div>
101+
102+
<div>
103+
<h3>Returned Methods</h3>
104+
@let returnedMethods = apiDoc().returnedMethods;
105+
106+
<div class="mt-4 flex flex-col gap-4">
107+
<div class="card flex-col">
108+
<div class="flex flex-col gap-8">
109+
@for (method of returnedMethods; track method.name) {
110+
<div class="p-4 rounded-lg odd:bg-gray-50 dark:odd:bg-gray-900">
111+
<div class="grid grid-cols-1 gap-2 rounded-lg md:grid-cols-4 md:gap-6">
112+
<div class="flex flex-col items-start gap-2">
113+
<code>{{ method.name }}()</code>
114+
</div>
115+
<div class="flex-col gap-4 md:col-span-3">
116+
<p class="text-sm">{{ method.description }}</p>
117+
118+
@if (method.parameters.length > 0) {
119+
<div class="mt-4">
120+
<h6>Parameters</h6>
121+
<div class="flex flex-col gap-2">
122+
@for (param of method.parameters; track param.name) {
123+
<div class="flex flex-row gap-4 items-center">
124+
<code class="whitespace-nowrap">{{ param.name }}: {{ param.type }}</code>
125+
<span class="text-sm flex-1">{{ param.description }}</span>
126+
</div>
127+
}
128+
</div>
129+
</div>
130+
}
131+
132+
<div class="mt-4">
133+
<h6>Returns</h6>
134+
<div class="flex flex-row gap-4 items-center">
135+
<code class="whitespace-nowrap">{{ method.returnType }}</code>
136+
<span class="text-sm flex-1">{{ method.returnDescription }}</span>
137+
</div>
138+
</div>
139+
</div>
140+
</div>
141+
</div>
142+
}
143+
</div>
144+
</div>
145+
</div>
146+
</div>
147+
15148
<div>
16149
<h3>Options</h3>
17150
@let interfaces = apiDoc().interfaces;
@@ -24,7 +157,7 @@ import { MatListModule } from '@angular/material/list';
24157
25158
<div class="flex flex-col gap-8">
26159
@for (property of interface.properties; track property.name) {
27-
<div class="p-4 odd:bg-gray-50 dark:odd:bg-gray-900">
160+
<div class="p-4 rounded-lg odd:bg-gray-50 dark:odd:bg-gray-900">
28161
<div
29162
class="grid grid-cols-1 gap-2 rounded-lg md:grid-cols-4 md:gap-6"
30163
>
@@ -121,6 +254,38 @@ import { MatListModule } from '@angular/material/list';
121254
}
122255
</div>
123256
</div>
257+
258+
<div>
259+
<h3>Generics</h3>
260+
@let generics = apiDoc().generics;
261+
262+
<div class="mt-4 flex flex-col gap-4">
263+
<div class="card flex-col">
264+
<div class="flex flex-col gap-8">
265+
@for (generic of generics; track generic.name) {
266+
<div class="p-4 rounded-lg odd:bg-gray-50 dark:odd:bg-gray-900">
267+
<div class="grid grid-cols-1 gap-2 rounded-lg md:grid-cols-4 md:gap-6">
268+
<div class="flex flex-col items-start gap-2">
269+
<code>{{ generic.name }}: {{ generic.type }}</code>
270+
</div>
271+
<div class="flex-col gap-4 md:col-span-3">
272+
<p class="text-sm">
273+
{{ generic.description }}
274+
@if (generic.defaultValue) {
275+
<div class="pt-4">
276+
Default value
277+
<code>{{ generic.defaultValue }}</code>
278+
</div>
279+
}
280+
</p>
281+
</div>
282+
</div>
283+
</div>
284+
}
285+
</div>
286+
</div>
287+
</div>
288+
</div>
124289
</div>
125290
`,
126291
styles: `
@@ -354,6 +519,23 @@ export class ApiComponent {
354519
],
355520
},
356521
],
522+
generics: [
523+
{
524+
name: 'T',
525+
type: 'Type',
526+
description: 'The type of the resource items being managed. This is a generic type parameter that should be specified when using the resource.',
527+
},
528+
{
529+
name: 'ID',
530+
type: 'Type',
531+
description: 'The type of the ID field for the resource items. This is typically a string or number.',
532+
},
533+
{
534+
name: 'E',
535+
type: 'Type',
536+
description: 'The type of error that can be returned by the API. This is a generic type parameter that can be specified when using the resource.',
537+
},
538+
],
357539
interfaces: [
358540
{
359541
name: 'RestResourceOptions<T, ID>',
@@ -525,4 +707,5 @@ interface ApiDocumentation {
525707
interfaces: ApiInterface[];
526708
returnedProperties: ApiProperty[];
527709
returnedMethods: ApiMethod[];
710+
generics?: ApiProperty[];
528711
}

0 commit comments

Comments
 (0)