feat: 🎸 add jsdocs to demo app

Author: nivekcode

src/commands/parse.ts

@@ -22,6 +22,8 @@ export function parseCommand(cliArgs: { [key: string]: string }) {
 
   const config = loadAndMergeConfig(cliArgs);
 
+  config.src = './test-spa';
+
   const parsedOutput = parse(config);
   writeParsedOutputToDisk(config, parsedOutput);
 

test-spa/src/app/app.component.html

@@ -539,6 +539,14 @@ <h2>Next Steps</h2>
     <pre *ngSwitchCase="'build'">ng build</pre>
   </div>
 
+  <!-- Feature Component -->
+  <h2>Feature Component Demo</h2>
+  <app-feature
+    userId="user123"
+    (counterChanged)="onCounterChanged($event)"
+    (actionPerformed)="onActionPerformed($event)"
+  ></app-feature>
+
   <!-- Links -->
   <div class="card-container">
     <a

test-spa/src/app/app.component.ts

@@ -3,8 +3,24 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+  styleUrls: ['./app.component.scss'],
 })
 export class AppComponent {
   title = 'test-spa';
+
+  /**
+   * Handler for the counterChanged event from the FeatureComponent
+   * @param value - The new counter value
+   */
+  onCounterChanged(value: number): void {
+    console.log('Counter changed:', value);
+  }
+
+  /**
+   * Handler for the actionPerformed event from the FeatureComponent
+   * @param action - The name of the action performed
+   */
+  onActionPerformed(action: string): void {
+    console.log('Action performed:', action);
+  }
 }

test-spa/src/app/app.module.ts

@@ -2,21 +2,13 @@ import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
 import { AppComponent } from './app.component';
+import { FeatureComponent } from './feature/feature.component';
 
 @NgModule({
-  declarations: [
-    AppComponent
-  ],
-  exports: [
-    AppComponent
-  ],
-  imports: [
-    BrowserModule
-  ],
-  providers: [
-    SomeService,
-    {provide: 'test', useValue: 'test' }
-  ],
-  bootstrap: [AppComponent]
+  declarations: [AppComponent],
+  exports: [AppComponent],
+  imports: [BrowserModule, FeatureComponent],
+  providers: [SomeService, { provide: 'test', useValue: 'test' }],
+  bootstrap: [AppComponent],
 })
-export class AppModule { }
+export class AppModule {}

test-spa/src/app/feature/feature.component.html

@@ -0,0 +1,34 @@
+<div class="feature-container" [class.dark-theme]="theme === 'dark'">
+  <h2>{{ title }}</h2>
+
+  <div class="counter-section">
+    <p>Current count: {{ counter() }}</p>
+    <p>Doubled count: {{ doubledCounter() }}</p>
+
+    <div class="actions">
+      <button (click)="increment()">Increment</button>
+      <button (click)="decrement()">Decrement</button>
+      <button (click)="reset()">Reset</button>
+    </div>
+  </div>
+
+  <div class="info-section">
+    <p>Component name: {{ name() }}</p>
+    <p>User ID: {{ userId() }}</p>
+    <p>Enabled: {{ isEnabled() ? 'Yes' : 'No' }}</p>
+    <p>Show header: {{ config().showHeader ? 'Yes' : 'No' }}</p>
+    <p>Max items: {{ config().maxItems }}</p>
+  </div>
+
+  <div class="checkbox-section">
+    <label>
+      <input type="checkbox" [checked]="checked()" (change)="checked.set(!checked())" />
+      Toggle me
+    </label>
+  </div>
+
+  <div class="action-section">
+    <button (click)="performAction('save')">Save</button>
+    <button (click)="performAction('cancel')">Cancel</button>
+  </div>
+</div>

test-spa/src/app/feature/feature.component.scss

@@ -0,0 +1,58 @@
+.feature-container {
+  padding: 20px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  margin: 20px;
+  background-color: #f9f9f9;
+
+  &.dark-theme {
+    background-color: #333;
+    color: #fff;
+
+    button {
+      background-color: #555;
+      color: #fff;
+      border-color: #777;
+    }
+  }
+
+  h2 {
+    margin-top: 0;
+    border-bottom: 1px solid #ddd;
+    padding-bottom: 10px;
+  }
+
+  .counter-section,
+  .info-section,
+  .checkbox-section,
+  .action-section {
+    margin-bottom: 20px;
+  }
+
+  .actions {
+    display: flex;
+    gap: 10px;
+    margin-top: 10px;
+  }
+
+  button {
+    padding: 8px 16px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    background-color: #f0f0f0;
+    cursor: pointer;
+
+    &:hover {
+      background-color: #e0e0e0;
+    }
+  }
+
+  .checkbox-section {
+    label {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      cursor: pointer;
+    }
+  }
+}

test-spa/src/app/feature/feature.component.ts

@@ -0,0 +1,121 @@
+import { Component, computed, EventEmitter, input, Input, model, Output, signal } from '@angular/core';
+
+@Component({
+  selector: 'app-feature',
+  templateUrl: './feature.component.html',
+  styleUrls: ['./feature.component.scss'],
+  standalone: true,
+})
+export class FeatureComponent {
+  /**
+   * Regular class field representing the component's title
+   */
+  public title: string = 'Feature Component';
+
+  /**
+   * Private counter value used for internal state management
+   */
+  private _counter = signal(0);
+
+  /**
+   * Public signal exposing the current counter value
+   * @returns The current counter value
+   */
+  public counter = this._counter;
+
+  /**
+   * Computed signal that returns the doubled counter value
+   * @returns The counter value multiplied by 2
+   */
+  public doubledCounter = computed(() => this._counter() * 2);
+
+  /**
+   * Traditional Input decorator for receiving a theme value
+   */
+  @Input() theme: 'light' | 'dark' = 'light';
+
+  /**
+   * Input setter that logs when the value changes
+   * @param value - The new value to set
+   */
+  @Input() set logValue(value: string) {
+    console.log('logValue changed:', value);
+    this._logValue = value;
+  }
+  get logValue(): string {
+    return this._logValue;
+  }
+  private _logValue: string = '';
+
+  /**
+   * Signal input for the component name with default value
+   */
+  name = input<string>('Feature');
+
+  /**
+   * Required signal input for the user ID
+   */
+  userId = input.required<string>();
+
+  /**
+   * Signal input for feature flags with default value
+   */
+  isEnabled = input(true);
+
+  /**
+   * Signal input for configuration object
+   */
+  config = input({
+    showHeader: true,
+    maxItems: 10,
+  });
+
+  /**
+   * Two-way bindable model signal
+   */
+  checked = model(false);
+
+  /**
+   * Traditional Output decorator for emitting when the counter changes
+   */
+  @Output() counterChanged = new EventEmitter<number>();
+
+  /**
+   * Traditional Output decorator for emitting when an action is performed
+   */
+  @Output() actionPerformed = new EventEmitter<string>();
+
+  /**
+   * Increments the counter value and emits the new value
+   */
+  public increment(): void {
+    this._counter.update((value) => value + 1);
+    this.counterChanged.emit(this._counter());
+  }
+
+  /**
+   * Decrements the counter value and emits the new value
+   */
+  public decrement(): void {
+    this._counter.update((value) => value - 1);
+    this.counterChanged.emit(this._counter());
+  }
+
+  /**
+   * Resets the counter to zero and emits the new value
+   */
+  public reset(): void {
+    this._counter.set(0);
+    this.counterChanged.emit(0);
+    this.actionPerformed.emit('reset');
+  }
+
+  /**
+   * Performs a custom action and emits the action name
+   * @param actionName - The name of the action being performed
+   */
+  public performAction(actionName: string): void {
+    console.log(`Performing action: ${actionName}`);
+    this.actionPerformed.emit(actionName);
+  }
+}