create-ng-tailwind 3.1.0 → 4.1.0

package/lib/templates/dashboard/components.js

@@ -0,0 +1,410 @@
+const fs = require('fs-extra');
+const path = require('path');
+
+/**
+ * Create dashboard shared components (StatsCard, Breadcrumb, DataTable)
+ */
+async function createComponents(config) {
+  // Stats Card Component
+  const statsCardComponent = `import { Component, Input } from '@angular/core';
+import { NgIconComponent, provideIcons } from '@ng-icons/core';
+import {
+  heroArrowTrendingUp,
+  heroArrowTrendingDown,
+} from '@ng-icons/heroicons/outline';
+
+@Component({
+  selector: 'app-stats-card',
+  standalone: true,
+  imports: [NgIconComponent],
+  viewProviders: [provideIcons({ heroArrowTrendingUp, heroArrowTrendingDown })],
+  template: \`
+    <div class="group relative overflow-hidden rounded-2xl border border-gray-100 bg-white p-6 shadow-sm transition-all duration-300 hover:shadow-xl hover:shadow-gray-200/50 hover:-translate-y-1">
+      <div class="absolute inset-0 bg-linear-to-br opacity-0 transition-opacity group-hover:opacity-100" [class]="gradientClass"></div>
+      <div class="relative">
+        <div class="flex items-center justify-between">
+          <div>
+            <p class="text-sm font-medium text-gray-500">{{ label }}</p>
+            <p class="mt-2 text-3xl font-bold text-gray-900">{{ value }}</p>
+          </div>
+          @if (icon) {
+            <div
+              class="flex h-14 w-14 items-center justify-center rounded-2xl shadow-lg transition-transform group-hover:scale-110"
+              [class]="iconBgClass">
+              <ng-icon [name]="icon" size="28" [style.color]="iconColor"></ng-icon>
+            </div>
+          }
+        </div>
+        @if (trend !== undefined) {
+          <div class="mt-4 flex items-center">
+            <div class="flex items-center rounded-full px-2 py-1" [class]="trend >= 0 ? 'bg-emerald-50' : 'bg-red-50'">
+              <ng-icon
+                [name]="trend >= 0 ? 'heroArrowTrendingUp' : 'heroArrowTrendingDown'"
+                size="14"
+                [class]="trend >= 0 ? 'text-emerald-500' : 'text-red-500'">
+              </ng-icon>
+              <span
+                class="ms-1 text-xs font-semibold"
+                [class]="trend >= 0 ? 'text-emerald-600' : 'text-red-600'">
+                {{ trend >= 0 ? '+' : '' }}{{ trend }}%
+              </span>
+            </div>
+            <span class="ms-2 text-xs text-gray-500">vs last month</span>
+          </div>
+        }
+      </div>
+    </div>
+  \`,
+})
+export class StatsCardComponent {
+  @Input() label = '';
+  @Input() value: string | number = '';
+  @Input() icon?: string;
+  @Input() iconBgClass = 'bg-linear-to-br from-indigo-500 to-purple-600';
+  @Input() iconColor = 'white';
+  @Input() trend?: number;
+  @Input() gradientClass = 'from-indigo-50/50 to-purple-50/50';
+}`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, 'src/app/shared/components/stats-card/stats-card.component.ts'),
+    statsCardComponent
+  );
+
+  // Breadcrumb Component
+  const breadcrumbComponent = `import { Component, Input } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { NgIconComponent, provideIcons } from '@ng-icons/core';
+import { heroChevronRight, heroHome } from '@ng-icons/heroicons/outline';
+
+export interface BreadcrumbItem {
+  label: string;
+  route?: string;
+}
+
+@Component({
+  selector: 'app-breadcrumb',
+  standalone: true,
+  imports: [RouterModule, NgIconComponent],
+  viewProviders: [provideIcons({ heroChevronRight, heroHome })],
+  template: \`
+    <nav class="flex items-center gap-2 text-sm">
+      <a routerLink="/dashboard" class="text-gray-500 hover:text-primary-600 transition-colors">
+        <ng-icon name="heroHome" size="16"></ng-icon>
+      </a>
+      @for (item of items; track item.label; let last = $last) {
+        <ng-icon name="heroChevronRight" size="14" class="text-gray-400"></ng-icon>
+        @if (item.route && !last) {
+          <a [routerLink]="item.route" class="text-gray-500 hover:text-primary-600 transition-colors">
+            {{ item.label }}
+          </a>
+        } @else {
+          <span class="font-medium text-gray-900">{{ item.label }}</span>
+        }
+      }
+    </nav>
+  \`,
+})
+export class BreadcrumbComponent {
+  @Input() items: BreadcrumbItem[] = [];
+}`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, 'src/app/shared/components/breadcrumb/breadcrumb.component.ts'),
+    breadcrumbComponent
+  );
+
+  // Data Table Component
+  const dataTableComponent = `import { Component, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
+import { DecimalPipe, DatePipe } from '@angular/common';
+import { NgIconComponent, provideIcons } from '@ng-icons/core';
+import {
+  heroChevronUp,
+  heroChevronDown,
+  heroChevronLeft,
+  heroChevronRight,
+  heroMagnifyingGlass,
+} from '@ng-icons/heroicons/outline';
+import { FormsModule } from '@angular/forms';
+
+export interface TableColumn {
+  key: string;
+  label: string;
+  sortable?: boolean;
+  type?: 'text' | 'number' | 'date' | 'status' | 'actions';
+  width?: string;
+}
+
+export interface TableAction {
+  label: string;
+  icon?: string;
+  handler: (row: Record<string, unknown>) => void;
+}
+
+@Component({
+  selector: 'app-data-table',
+  standalone: true,
+  imports: [NgIconComponent, FormsModule, DecimalPipe, DatePipe],
+  viewProviders: [
+    provideIcons({
+      heroChevronUp,
+      heroChevronDown,
+      heroChevronLeft,
+      heroChevronRight,
+      heroMagnifyingGlass,
+    }),
+  ],
+  template: \`
+    <div class="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm">
+      <!-- Search and filters -->
+      @if (searchable) {
+        <div class="border-b border-gray-200 px-6 py-4">
+          <div class="relative max-w-md">
+            <ng-icon
+              name="heroMagnifyingGlass"
+              size="18"
+              class="absolute top-1/2 -translate-y-1/2 text-gray-400"
+              style="inset-inline-start: 12px;">
+            </ng-icon>
+            <input
+              type="text"
+              [(ngModel)]="searchTerm"
+              (ngModelChange)="onSearch()"
+              placeholder="Search..."
+              class="w-full rounded-lg border border-gray-300 py-2 ps-10 pe-4 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
+            />
+          </div>
+        </div>
+      }
+
+      <!-- Table -->
+      <div class="overflow-x-auto">
+        <table class="w-full">
+          <thead>
+            <tr class="border-b border-gray-200 bg-gray-50">
+              @for (column of columns; track column.key) {
+                <th
+                  class="px-6 py-3 text-start text-xs font-semibold uppercase tracking-wider text-gray-500"
+                  [style.width]="column.width">
+                  @if (column.sortable) {
+                    <button
+                      (click)="sort(column.key)"
+                      class="flex items-center gap-1 hover:text-gray-900">
+                      {{ column.label }}
+                      @if (sortKey === column.key) {
+                        <ng-icon
+                          [name]="sortDirection === 'asc' ? 'heroChevronUp' : 'heroChevronDown'"
+                          size="14">
+                        </ng-icon>
+                      }
+                    </button>
+                  } @else {
+                    {{ column.label }}
+                  }
+                </th>
+              }
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-gray-200">
+            @for (row of paginatedData; track row['id'] || $index) {
+              <tr class="transition-colors hover:bg-gray-50">
+                @for (column of columns; track column.key) {
+                  <td class="whitespace-nowrap px-6 py-4 text-sm text-gray-900">
+                    @switch (column.type) {
+                      @case ('status') {
+                        <span
+                          class="inline-flex rounded-full px-2 py-1 text-xs font-medium"
+                          [class]="getStatusClass(row[column.key])">
+                          {{ row[column.key] }}
+                        </span>
+                      }
+                      @case ('date') {
+                        {{ $any(row[column.key]) | date:'mediumDate' }}
+                      }
+                      @case ('number') {
+                        {{ $any(row[column.key]) | number }}
+                      }
+                      @default {
+                        {{ row[column.key] }}
+                      }
+                    }
+                  </td>
+                }
+              </tr>
+            } @empty {
+              <tr>
+                <td [attr.colspan]="columns.length" class="px-6 py-12 text-center text-gray-500">
+                  No data available
+                </td>
+              </tr>
+            }
+          </tbody>
+        </table>
+      </div>
+
+      <!-- Pagination -->
+      @if (paginate && filteredData.length > pageSize) {
+        <div class="flex items-center justify-between border-t border-gray-200 px-6 py-4">
+          <span class="text-sm text-gray-500">
+            Showing {{ startIndex + 1 }} to {{ endIndex }} of {{ filteredData.length }} results
+          </span>
+          <div class="flex items-center gap-2">
+            <button
+              (click)="prevPage()"
+              [disabled]="currentPage === 1"
+              class="rounded-lg border border-gray-300 p-2 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50">
+              <ng-icon name="heroChevronLeft" size="16"></ng-icon>
+            </button>
+            @for (page of visiblePages; track page) {
+              <button
+                (click)="goToPage(page)"
+                class="rounded-lg border px-3 py-1 text-sm transition-colors"
+                [class]="currentPage === page ? 'border-primary-500 bg-primary-50 text-primary-600' : 'border-gray-300 hover:bg-gray-50'">
+                {{ page }}
+              </button>
+            }
+            <button
+              (click)="nextPage()"
+              [disabled]="currentPage === totalPages"
+              class="rounded-lg border border-gray-300 p-2 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50">
+              <ng-icon name="heroChevronRight" size="16"></ng-icon>
+            </button>
+          </div>
+        </div>
+      }
+    </div>
+  \`,
+})
+export class DataTableComponent implements OnChanges {
+  @Input() data: Record<string, unknown>[] = [];
+  @Input() columns: TableColumn[] = [];
+  @Input() searchable = true;
+  @Input() paginate = true;
+  @Input() pageSize = 10;
+  @Output() rowClick = new EventEmitter<Record<string, unknown>>();
+
+  searchTerm = '';
+  sortKey = '';
+  sortDirection: 'asc' | 'desc' = 'asc';
+  currentPage = 1;
+
+  filteredData: Record<string, unknown>[] = [];
+  paginatedData: Record<string, unknown>[] = [];
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['data']) {
+      this.applyFilters();
+    }
+  }
+
+  onSearch(): void {
+    this.currentPage = 1;
+    this.applyFilters();
+  }
+
+  sort(key: string): void {
+    if (this.sortKey === key) {
+      this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
+    } else {
+      this.sortKey = key;
+      this.sortDirection = 'asc';
+    }
+    this.applyFilters();
+  }
+
+  private applyFilters(): void {
+    let result = [...this.data];
+
+    // Search
+    if (this.searchTerm) {
+      const term = this.searchTerm.toLowerCase();
+      result = result.filter((row) =>
+        Object.values(row).some((value) =>
+          String(value).toLowerCase().includes(term)
+        )
+      );
+    }
+
+    // Sort
+    if (this.sortKey) {
+      result.sort((a, b) => {
+        const aVal = a[this.sortKey];
+        const bVal = b[this.sortKey];
+        const comparison = String(aVal).localeCompare(String(bVal));
+        return this.sortDirection === 'asc' ? comparison : -comparison;
+      });
+    }
+
+    this.filteredData = result;
+    this.updatePagination();
+  }
+
+  private updatePagination(): void {
+    const start = (this.currentPage - 1) * this.pageSize;
+    const end = start + this.pageSize;
+    this.paginatedData = this.filteredData.slice(start, end);
+  }
+
+  get startIndex(): number {
+    return (this.currentPage - 1) * this.pageSize;
+  }
+
+  get endIndex(): number {
+    return Math.min(this.currentPage * this.pageSize, this.filteredData.length);
+  }
+
+  get totalPages(): number {
+    return Math.ceil(this.filteredData.length / this.pageSize);
+  }
+
+  get visiblePages(): number[] {
+    const pages: number[] = [];
+    const start = Math.max(1, this.currentPage - 2);
+    const end = Math.min(this.totalPages, start + 4);
+    for (let i = start; i <= end; i++) {
+      pages.push(i);
+    }
+    return pages;
+  }
+
+  goToPage(page: number): void {
+    this.currentPage = page;
+    this.updatePagination();
+  }
+
+  prevPage(): void {
+    if (this.currentPage > 1) {
+      this.currentPage--;
+      this.updatePagination();
+    }
+  }
+
+  nextPage(): void {
+    if (this.currentPage < this.totalPages) {
+      this.currentPage++;
+      this.updatePagination();
+    }
+  }
+
+  getStatusClass(status: unknown): string {
+    const statusStr = String(status).toLowerCase();
+    const classes: Record<string, string> = {
+      active: 'bg-success-100 text-success-700',
+      completed: 'bg-success-100 text-success-700',
+      pending: 'bg-warning-100 text-warning-700',
+      processing: 'bg-info-100 text-info-700',
+      inactive: 'bg-gray-100 text-gray-700',
+      cancelled: 'bg-danger-100 text-danger-700',
+      failed: 'bg-danger-100 text-danger-700',
+    };
+    return classes[statusStr] || 'bg-gray-100 text-gray-700';
+  }
+}`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, 'src/app/shared/components/data-table/data-table.component.ts'),
+    dataTableComponent
+  );
+}
+
+module.exports = { createComponents };