Support enums in docs (#364)

api-generator/api-generator.js

@@ -13,7 +13,8 @@ const staticMessages = {
   interfaces: 'Defines the custom interfaces used by the module.',
   types: 'Defines the custom types used by the module.',
   props: 'Defines the input properties of the component.',
-  service: 'Defines the service used by the component'
+  service: 'Defines the service used by the component.',
+  enums: 'Defines enums used by the component or service.'
 };
 
 async function main() {
@@ -101,6 +102,9 @@ async function main() {
             const module_types_group = module.groups.find(
               (g) => g.title === 'Types'
             );
+            const module_enums_group = module.groups.find(
+              (g) => g.title === 'Enums'
+            );
             // Todo: Add support for type aliases
 
             if (isProcessable(module_components_group)) {
@@ -495,6 +499,39 @@ async function main() {
                 doc[name]['types'] = types;
               }
             }
+
+            if (isProcessable(module_enums_group)) {
+              const enums = {
+                description: staticMessages['enums'],
+                values: []
+              };
+
+              module_enums_group.children.forEach((e) => {
+                enums.values.push({
+                  name: e.name,
+                  description:
+                    e.comment.summary &&
+                    e.comment.summary.map((s) => s.text || '').join(' '),
+                  values: e.children.map(value => ({ name: value.escapedName, value: value.type.value }))
+                });
+                typesMap[e.name] = e.comment.blockTags?.find(
+                  tag => tag.tag === "@customPath"
+                )?.content?.map((s) => s.text || '').join(' ')
+                  ?? name.replace("cps-", "");
+              });
+
+              if (doc[name]?.enums) {
+                doc[name]['enums'] = {
+                  ...doc[name]['enums'],
+                  values: [
+                    ...doc[name]['enums'].values,
+                    ...enums.values
+                  ]
+                };
+              } else {
+                doc[name]['enums'] = enums;
+              }
+            }
           }
         }
       });

projects/composition/src/app/api-data/cps-notification.json

@@ -153,5 +153,66 @@
                 ]
             }
         ]
+    },
+    "enums": {
+        "description": "Defines enums used by the component or service.",
+        "values": [
+            {
+                "name": "CpsNotificationAppearance",
+                "description": "An enumeration of appearances of notifications.",
+                "values": [
+                    {
+                        "name": "FILLED",
+                        "value": "filled"
+                    },
+                    {
+                        "name": "OUTLINED",
+                        "value": "outlined"
+                    }
+                ]
+            },
+            {
+                "name": "CpsNotificationPosition",
+                "description": "An enumeration of positions of notifications.",
+                "values": [
+                    {
+                        "name": "CENTER",
+                        "value": "center"
+                    },
+                    {
+                        "name": "TOP",
+                        "value": "top"
+                    },
+                    {
+                        "name": "BOTTOM",
+                        "value": "bottom"
+                    },
+                    {
+                        "name": "LEFT",
+                        "value": "left"
+                    },
+                    {
+                        "name": "RIGHT",
+                        "value": "right"
+                    },
+                    {
+                        "name": "TOPLEFT",
+                        "value": "top-left"
+                    },
+                    {
+                        "name": "TOPRIGHT",
+                        "value": "top-right"
+                    },
+                    {
+                        "name": "BOTTOMLEFT",
+                        "value": "bottom-left"
+                    },
+                    {
+                        "name": "BOTTOMRIGHT",
+                        "value": "bottom-right"
+                    }
+                ]
+            }
+        ]
     }
 }

projects/composition/src/app/api-data/cps-table.json

@@ -710,5 +710,96 @@
                 "description": "CpsTableSortMode is used to define the sorting mode of the table."
             }
         ]
+    },
+    "enums": {
+        "description": "Defines enums used by the component or service.",
+        "values": [
+            {
+                "name": "CpsColumnFilterMatchMode",
+                "description": "CpsColumnFilterMatchMode is used to define how the filter value should be matched.",
+                "values": [
+                    {
+                        "name": "STARTS_WITH",
+                        "value": "startsWith"
+                    },
+                    {
+                        "name": "CONTAINS",
+                        "value": "contains"
+                    },
+                    {
+                        "name": "NOT_CONTAINS",
+                        "value": "notContains"
+                    },
+                    {
+                        "name": "ENDS_WITH",
+                        "value": "endsWith"
+                    },
+                    {
+                        "name": "EQUALS",
+                        "value": "equals"
+                    },
+                    {
+                        "name": "NOT_EQUALS",
+                        "value": "notEquals"
+                    },
+                    {
+                        "name": "IN",
+                        "value": "in"
+                    },
+                    {
+                        "name": "LESS_THAN",
+                        "value": "lt"
+                    },
+                    {
+                        "name": "LESS_THAN_OR_EQUAL_TO",
+                        "value": "lte"
+                    },
+                    {
+                        "name": "GREATER_THAN",
+                        "value": "gt"
+                    },
+                    {
+                        "name": "GREATER_THAN_OR_EQUAL_TO",
+                        "value": "gte"
+                    },
+                    {
+                        "name": "BETWEEN",
+                        "value": "between"
+                    },
+                    {
+                        "name": "IS",
+                        "value": "is"
+                    },
+                    {
+                        "name": "IS_NOT",
+                        "value": "isNot"
+                    },
+                    {
+                        "name": "BEFORE",
+                        "value": "before"
+                    },
+                    {
+                        "name": "AFTER",
+                        "value": "after"
+                    },
+                    {
+                        "name": "DATE_IS",
+                        "value": "dateIs"
+                    },
+                    {
+                        "name": "DATE_IS_NOT",
+                        "value": "dateIsNot"
+                    },
+                    {
+                        "name": "DATE_BEFORE",
+                        "value": "dateBefore"
+                    },
+                    {
+                        "name": "DATE_AFTER",
+                        "value": "dateAfter"
+                    }
+                ]
+            }
+        ]
     }
 }

projects/composition/src/app/api-data/types_map.json

@@ -15,6 +15,7 @@
     "CpsTabsAlignmentType": "tab-group",
     "CpsColumnFilterCategoryOption": "table",
     "CpsColumnFilterType": "table",
+    "CpsColumnFilterMatchMode": "table",
     "CpsTableExportFormat": "table",
     "CpsTableSize": "table",
     "CpsTableToolbarSize": "table",
@@ -27,5 +28,7 @@
     "CpsTreeTableSortMode": "tree-table",
     "CpsTooltipPosition": "tooltip",
     "CpsTooltipOpenOn": "tooltip",
-    "CpsNotificationConfig": "notification"
+    "CpsNotificationConfig": "notification",
+    "CpsNotificationAppearance": "notification",
+    "CpsNotificationPosition": "notification"
 }

projects/composition/src/app/components/component-docs-viewer/component-docs-viewer.component.html

@@ -145,7 +145,7 @@ <h2>Interfaces</h2>
           interface of componentData.interfaces.values;
           track interface.name
         ) {
-          <div id="{{ interface.name }}" class="interface">
+          <div id="{{ interface.name }}">
             <h3>{{ interface.name }}</h3>
             <p>{{ interface.description }}</p>
             <table class="data-table">
@@ -180,6 +180,8 @@ <h3>{{ interface.name }}</h3>
           </div>
         }
       </div>
+      <!-- Enums -->
+      <app-enums [enums]="componentData.enums"></app-enums>
     </ng-container>
   </cps-tab>
 </cps-tab-group>

projects/composition/src/app/components/component-docs-viewer/component-docs-viewer.component.scss

@@ -1,71 +0,0 @@
-:host {
-  .data-table {
-    width: 100%;
-    border-collapse: collapse;
-
-    th {
-      font-weight: bold;
-      text-align: left;
-      padding: 0.75rem 1rem;
-      border-bottom: 1px solid var(--cps-color-line-light);
-    }
-
-    tr {
-      transition: background-color 0.5s ease-in;
-    }
-
-    td {
-      padding: 0.75rem 1rem;
-      border-bottom: 1px solid var(--cps-color-line-light);
-      white-space: pre-line;
-
-      span {
-        display: flex;
-        max-width: min-content;
-        white-space: pre-line;
-      }
-
-      &.highlighted-bg {
-        span {
-          color: var(--cps-color-depth-darken4);
-          background-color: var(--cps-color-human-lighten5);
-          border-radius: 6px;
-          padding: 0.2rem 0.5rem;
-        }
-      }
-
-      &.highlighted-text {
-        color: var(--cps-color-calm);
-
-        a {
-          color: var(--cps-color-calm);
-
-          &:hover {
-            text-decoration: none;
-          }
-        }
-      }
-
-      &.value-style {
-        span {
-          padding: 0.25rem;
-          border-radius: 6px;
-          font-family:
-            ui-monospace,
-            SFMono-Regular,
-            SF Mono,
-            Menlo,
-            Consolas,
-            Liberation Mono,
-            monospace;
-          background-color: var(--cps-color-bg-mid);
-          border: 1px solid var(--cps-color-line-light);
-        }
-      }
-    }
-  }
-
-  .interface {
-    transition: background-color 0.5s ease-in;
-  }
-}

projects/composition/src/app/components/component-docs-viewer/component-docs-viewer.component.ts

@@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
 import { Component, Input } from '@angular/core';
 import {
   ComponentAPI,
+  EnumsAPI,
   InterfaceAPI,
   TypesAPI
 } from '../../models/component-api.model';
@@ -12,6 +13,7 @@ import TypesMap from '../../api-data/types_map.json';
 import { RouterModule } from '@angular/router';
 import { ViewerComponent } from '../viewer/viewer.component';
 import { DetectTypePipe } from '../../pipes/detect-type.pipe';
+import { EnumsComponent } from '../shared/enums/enums.component';
 
 @Component({
   selector: 'app-component-docs-viewer',
@@ -23,7 +25,8 @@ import { DetectTypePipe } from '../../pipes/detect-type.pipe';
     CpsTabGroupComponent,
     ObjectEntriesPipe,
     RouterModule,
-    DetectTypePipe
+    DetectTypePipe,
+    EnumsComponent
   ],
   standalone: true
 })
@@ -32,6 +35,7 @@ export class ComponentDocsViewerComponent extends ViewerComponent {
     components: { [key: string]: ComponentAPI };
     types?: TypesAPI;
     interfaces?: InterfaceAPI;
+    enums?: EnumsAPI;
   };
 
   TypesMap: Record<string, string> = TypesMap;

projects/composition/src/app/components/service-docs-viewer/service-docs-viewer.component.html

@@ -122,7 +122,7 @@ <h2>Interfaces</h2>
           interface of serviceData.interfaces.values;
           track interface.name
         ) {
-          <div id="{{ interface.name }}" class="interface">
+          <div id="{{ interface.name }}">
             <h3>{{ interface.name }}</h3>
             <p>{{ interface.description }}</p>
             <table class="data-table">
@@ -157,6 +157,8 @@ <h3>{{ interface.name }}</h3>
           </div>
         }
       </div>
+      <!-- Enums -->
+      <app-enums [enums]="serviceData.enums"></app-enums>
     </ng-container>
   </cps-tab>
 </cps-tab-group>