feat(ui): core components created/updated for startv2 page auto creation from core | Issue #63 (#197)

Author: dr460nf1r3

.github/workflows/ci.yml

@@ -40,9 +40,19 @@ jobs:
       - name: Nix cache
         uses: DeterminateSystems/flakehub-cache-action@main
 
+      - name: Set up Python
+        uses: actions/setup-python@v4
+        with:
+          python-version: "3.11"   # match your local python
+
+      - name: Install dependencies
+        run: |
+          python -m pip install --upgrade pip
+          pip install pre-commit
+
       - name: Run linters via pre-commit
         id: linter
-        run: nix develop -c pre-commit run --all-files
+        run: pre-commit run --all-files
 
   test:
     runs-on: ubuntu-24.04

.gitignore

@@ -31,7 +31,7 @@ node_modules/
 # Various other things
 .direnv
 .npmrc
-.pre-commit-config.yaml
+# .pre-commit-config.yaml
 .wrangler
 CHANGES.md
 

.pre-commit-config.yaml

@@ -0,0 +1,6 @@
+repos:
+  - repo: https://github.com/pre-commit/mirrors-eslint
+    rev: v9.39.0   # your ESLint version
+    hooks:
+      - id: eslint
+        args: ["--ext", ".ts,.tsx,.js,.jsx"]

core/src/index.ts

@@ -3,4 +3,8 @@ export * from './lib/shell';
 export * from './lib/message-toast';
 export * from './lib/config';
 export * from './lib/feature-detail';
-export * from './lib/models/feature-detail.model';
+export * from './lib/news';
+export * from './lib/models';
+export * from './lib/footer';
+export * from './lib/search';
+export * from './lib/jokes';

core/src/lib/card/card.component.html

@@ -1,6 +1,7 @@
-<p-card class="garuda-card-p-card">
-  @switch (cardRole()) {
-    @case ('product-showcase') {
+@switch (cardRole()) {
+  @case ('product-showcase') {
+    <!-- ✅ Big variant uses p-card fully -->
+    <p-card class="garuda-card-product-showcase">
       <ng-template #header>
         <div class="garuda-card-product-showcase-header">
           <div class="garuda-card-thumbnail-container">
@@ -12,12 +13,34 @@
           </div>
         </div>
       </ng-template>
+
       <ng-content></ng-content>
+
       <ng-template #footer>
         <div class="garuda-card-action-container">
           <ng-content select="[garudaCardAction]"></ng-content>
         </div>
       </ng-template>
-    }
+    </p-card>
   }
-</p-card>
+
+  @case ('product-showcase-small') {
+    <div
+      class="garuda-card-product-showcase-small"
+      (click)="navigate()"
+      (keyup.enter)="navigate()"
+      (keyup.space)="navigate()"
+      role="button"
+      tabindex="0"
+    >
+      <div class="garuda-card-product-showcase-header-small">
+        <div class="garuda-card-title-small">
+          <ng-content select="[garudaCardTitleWrapper]"></ng-content>
+        </div>
+        <div class="garuda-card-thumbnail-container-small">
+          <ng-content select="[garudaCardThumbnailWrapper]"></ng-content>
+        </div>
+      </div>
+    </div>
+  }
+}

core/src/lib/card/card.component.scss

@@ -30,3 +30,26 @@
     justify-content: space-evenly;
   }
 }
+
+.garuda-card-product-showcase-small {
+  border: 2px solid transparent;
+  border-radius: 8px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 160px;
+  height: 160px;
+  margin: 10px;
+  padding: 1rem;
+}
+.garuda-card-thumbnail-container-small {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  // margin-top: -25px;
+}
+
+.garuda-card-product-showcase-small:hover {
+  //border: 2px solid var(--p-text-color);
+  transform: scale(1.2);
+}

core/src/lib/card/card.component.ts

@@ -1,53 +1,50 @@
-import {
-  Component,
-  computed,
-  EventEmitter,
-  HostBinding,
-  inject,
-  Input,
-  input,
-  Output,
-  ElementRef,
-  Renderer2,
-  AfterViewInit,
-  OnDestroy,
-} from '@angular/core';
+import { Component, HostBinding, inject, input, ElementRef, Renderer2, AfterViewInit, OnDestroy, output } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { Card } from 'primeng/card';
-import { FeatureData } from '../models/feature-detail.model';
-import { FeatureDetailPopupService } from '../feature-detail/services/feature-detail-popup-service';
+import { FeatureData } from '../models/feature-detail/feature-detail.model';
+import { PopupService } from '../services/popup/popup.service';
+import { FeatureDetailComponent } from '../feature-detail/feature-detail.component';
 
-export type RoleType = 'product-showcase';
+export type RoleType = 'product-showcase' | 'product-showcase-small';
 
 @Component({
   selector: 'garuda-card',
+  standalone: true,
   imports: [CommonModule, Card],
   templateUrl: './card.component.html',
-  styleUrl: './card.component.scss',
+  styleUrls: ['./card.component.scss'],
   host: {
     class: 'garuda-card',
   },
 })
 export class CardComponent implements AfterViewInit, OnDestroy {
   cardRole = input.required<RoleType>();
-  @Input() feature?: FeatureData;
-  @Input() actionFeatures?: Record<string, FeatureData> = {};
-  @Output() actionClicked: EventEmitter<string> = new EventEmitter<string>();
+  link = input<string | undefined>('');
+  feature = input<FeatureData>();
+  actionFeatures = input<Record<string, FeatureData>>({});
+  actionClicked = output<string>();
 
-  private featureDetailPopupService = inject(FeatureDetailPopupService);
+  private popupService = inject(PopupService);
   private el = inject(ElementRef<HTMLElement>);
   private renderer = inject(Renderer2);
   private removeClickListener?: () => void;
 
   @HostBinding('class.garuda-card__product-showcase')
-  private productShowcaseClass = computed(() => this.cardRole() === 'product-showcase');
+  get isProductShowcase(): boolean {
+    return this.cardRole() === 'product-showcase';
+  }
+
+  @HostBinding('class.garuda-card__product-showcase-small')
+  get isProductShowcaseSmall(): boolean {
+    return this.cardRole() === 'product-showcase-small';
+  }
 
   ngAfterViewInit(): void {
-    //data-action
     this.removeClickListener = this.renderer.listen(this.el.nativeElement, 'click', (event: Event) => {
       const target = event.target as HTMLElement;
       const actionElement = target.closest('[garudaCardAction], [data-action]') as HTMLElement | null;
       const action = actionElement?.dataset?.['action'];
+
       if (action) {
         event.stopPropagation();
         this.openDetail(action);
@@ -61,9 +58,16 @@ export class CardComponent implements AfterViewInit, OnDestroy {
 
   openDetail(action: string): void {
     this.actionClicked.emit(action);
-    const featureData = this.actionFeatures?.[action] || this.feature;
-    if (featureData) {
-      this.featureDetailPopupService.open(featureData);
+
+    const featureData = this.actionFeatures()?.[action] || this.feature;
+    if (!featureData) return;
+
+    this.popupService.open(FeatureDetailComponent, { data: { feature: featureData }, title: featureData?.title, showHeader: false });
+  }
+
+  navigate() {
+    if (this.link) {
+      window.location.href = this.link() ?? '';
     }
   }
 }

core/src/lib/feature-detail/directives/feature-detail-carousel.ts

@@ -1,5 +1,5 @@
-import { Directive, ElementRef, Input, OnInit, Renderer2, inject } from '@angular/core';
-import { FeatureCarouselSettings } from '../../models/feature-detail.model';
+import { Directive, ElementRef, Input, OnInit, Renderer2, inject, input } from '@angular/core';
+import { FeatureCarouselSettings } from '../../models/feature-detail/feature-detail.model';
 import { Carousel } from 'primeng/carousel';
 
 @Directive({
@@ -9,19 +9,21 @@ import { Carousel } from 'primeng/carousel';
 export class FeatureDetailCarousel implements OnInit {
   private carousel = inject(Carousel);
 
-  @Input() featureScreenshots: string[] = [];
-  @Input() carouselSettings?: FeatureCarouselSettings;
+  featureScreenshots = input<string[]>([]);
+  carouselSettings = input<FeatureCarouselSettings>();
 
   ngOnInit(): void {
-    if (this.carouselSettings) {
+    if (this.carouselSettings()) {
       this.carousel.numVisible = 1;
       this.carousel.numScroll = 1;
-      this.carousel.circular = !!this.carouselSettings.circularSlide;
+      this.carousel.circular = !!this.carouselSettings()?.circularSlide;
       this.carousel.showIndicators = true;
       this.carousel.showNavigators = true;
-      this.carousel.autoplayInterval = this.carouselSettings.autoPlayCarousel ? (this.carouselSettings.autoPlayIntervalDuration ?? 0) : 0;
+      this.carousel.autoplayInterval = this.carouselSettings()?.autoPlayCarousel
+        ? (this.carouselSettings()?.autoPlayIntervalDuration ?? 0)
+        : 0;
     }
 
-    this.carousel.value = this.featureScreenshots || [];
+    this.carousel.value = this.featureScreenshots() || [];
   }
 }

core/src/lib/feature-detail/directives/feature-detail-moreinformation.ts

@@ -1,4 +1,4 @@
-import { Directive, ElementRef, Input, OnChanges, SimpleChanges, inject } from '@angular/core';
+import { Directive, ElementRef, OnChanges, SimpleChanges, inject, input } from '@angular/core';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 
 @Directive({
@@ -9,14 +9,16 @@ export class FeatureDetailMoreinformation implements OnChanges {
   private el = inject(ElementRef<HTMLElement>);
   private sanitizer = inject(DomSanitizer);
 
-  @Input('garudaFeatureDetailMoreinformation') htmlContent?: string;
+  htmlContent = input<string | undefined>(undefined, {
+    alias: 'garudaFeatureDetailMoreinformation',
+  });
   ngOnChanges(changes: SimpleChanges): void {
-    if (!this.htmlContent) return;
-    if ('htmlContent' in changes && this.htmlContent) {
-      // Sanitize HTML as string and assign
-      const temp = document.createElement('div');
-      temp.innerHTML = this.htmlContent;
-      this.el.nativeElement.innerHTML = temp.innerHTML;
+    const content = this.htmlContent();
+    if (!content) {
+      this.el.nativeElement.innerHTML = '';
+      return;
     }
+    const safeHtml: SafeHtml = this.sanitizer.bypassSecurityTrustHtml(content);
+    this.el.nativeElement.innerHTML = this.sanitizer.sanitize(1, safeHtml) ?? '';
   }
 }

core/src/lib/feature-detail/directives/feature-detail-packages.ts

@@ -1,4 +1,4 @@
-import { Directive, Input, TemplateRef, ViewContainerRef, inject, OnChanges, SimpleChanges } from '@angular/core';
+import { Directive, input, TemplateRef, ViewContainerRef, inject, OnChanges, SimpleChanges } from '@angular/core';
 
 @Directive({
   selector: '[garudaFeatureDetailPackages]',
@@ -8,11 +8,15 @@ export class FeatureDetailPackages implements OnChanges {
   private templateRef = inject(TemplateRef<any>);
   private viewContainer = inject(ViewContainerRef);
 
-  @Input('garudaFeatureDetailPackages') packages: string[] | null = [];
+  packages = input<string[] | null>([], {
+    alias: 'garudaFeatureDetailPackages',
+  });
+
   ngOnChanges(changes: SimpleChanges): void {
     this.viewContainer.clear();
-    if (this.packages && this.packages.length > 0) {
-      for (const pkg of this.packages) {
+    const packages = this.packages() ?? [];
+    if (packages && packages?.length > 0) {
+      for (const pkg of packages) {
         this.viewContainer.createEmbeddedView(this.templateRef, { $implicit: pkg });
       }
     }