create-ng-tailwind 3.1.0 → 4.1.0

package/lib/templates/ecommerce/components.js

@@ -0,0 +1,496 @@
+const fs = require("fs-extra");
+const path = require("path");
+
+/**
+ * Ecommerce Shared Components
+ * - Rating
+ * - PriceDisplay
+ * - QuantitySelector
+ * - ProductCard
+ * - ProductGrid
+ * - CartItem
+ * - ProductFilters
+ */
+
+async function createComponents(config) {
+  // Rating Component
+  const ratingComponent = `import { Component, Input } from '@angular/core';
+import { NgIconComponent, provideIcons } from '@ng-icons/core';
+import { heroStarSolid } from '@ng-icons/heroicons/solid';
+import { heroStar } from '@ng-icons/heroicons/outline';
+
+@Component({
+  selector: 'app-rating',
+  standalone: true,
+  imports: [NgIconComponent],
+  viewProviders: [provideIcons({ heroStarSolid, heroStar })],
+  template: \`
+    <div class="flex items-center gap-1">
+      @for (star of stars; track $index) {
+        <ng-icon
+          [name]="star ? 'heroStarSolid' : 'heroStar'"
+          size="16"
+          [class]="star ? 'text-amber-400' : 'text-gray-300'">
+        </ng-icon>
+      }
+      @if (showCount && reviewCount > 0) {
+        <span class="ms-1 text-sm text-gray-500">({{ reviewCount }})</span>
+      }
+    </div>
+  \`,
+})
+export class RatingComponent {
+  @Input() rating = 0;
+  @Input() reviewCount = 0;
+  @Input() showCount = true;
+
+  get stars(): boolean[] {
+    return Array(5).fill(false).map((_, i) => i < Math.round(this.rating));
+  }
+}`;
+
+  await fs.writeFile(
+    path.join(
+      config.fullPath,
+      "src/app/shared/components/rating/rating.component.ts"
+    ),
+    ratingComponent
+  );
+
+  // Price Display Component
+  const priceDisplayComponent = `import { Component, Input } from '@angular/core';
+import { CurrencyPipe } from '@angular/common';
+
+@Component({
+  selector: 'app-price-display',
+  standalone: true,
+  imports: [CurrencyPipe],
+  template: \`
+    <div class="flex items-center gap-2">
+      <span class="text-lg font-bold" [class]="priceClass">
+        {{ price | currency:currency }}
+      </span>
+      @if (originalPrice && originalPrice > price) {
+        <span class="text-sm text-gray-400 line-through">
+          {{ originalPrice | currency:currency }}
+        </span>
+        <span class="rounded-full bg-danger-100 px-2 py-0.5 text-xs font-semibold text-danger-700">
+          -{{ discountPercent }}%
+        </span>
+      }
+    </div>
+  \`,
+})
+export class PriceDisplayComponent {
+  @Input() price = 0;
+  @Input() originalPrice?: number;
+  @Input() currency = 'USD';
+  @Input() priceClass = 'text-gray-900';
+
+  get discountPercent(): number {
+    if (!this.originalPrice || this.originalPrice <= this.price) return 0;
+    return Math.round((1 - this.price / this.originalPrice) * 100);
+  }
+}`;
+
+  await fs.writeFile(
+    path.join(
+      config.fullPath,
+      "src/app/shared/components/price-display/price-display.component.ts"
+    ),
+    priceDisplayComponent
+  );
+
+  // Quantity Selector Component
+  const quantitySelectorComponent = `import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { NgIconComponent, provideIcons } from '@ng-icons/core';
+import { heroMinus, heroPlus } from '@ng-icons/heroicons/outline';
+
+@Component({
+  selector: 'app-quantity-selector',
+  standalone: true,
+  imports: [NgIconComponent],
+  viewProviders: [provideIcons({ heroMinus, heroPlus })],
+  template: \`
+    <div class="flex items-center gap-2">
+      <button
+        type="button"
+        (click)="decrease()"
+        [disabled]="quantity <= min"
+        class="flex h-8 w-8 items-center justify-center rounded-lg border border-gray-300 text-gray-600 transition-colors hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50">
+        <ng-icon name="heroMinus" size="16"></ng-icon>
+      </button>
+      <span class="w-12 text-center font-medium">{{ quantity }}</span>
+      <button
+        type="button"
+        (click)="increase()"
+        [disabled]="quantity >= max"
+        class="flex h-8 w-8 items-center justify-center rounded-lg border border-gray-300 text-gray-600 transition-colors hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50">
+        <ng-icon name="heroPlus" size="16"></ng-icon>
+      </button>
+    </div>
+  \`,
+})
+export class QuantitySelectorComponent {
+  @Input() quantity = 1;
+  @Input() min = 1;
+  @Input() max = 99;
+  @Output() quantityChange = new EventEmitter<number>();
+
+  decrease(): void {
+    if (this.quantity > this.min) {
+      this.quantity--;
+      this.quantityChange.emit(this.quantity);
+    }
+  }
+
+  increase(): void {
+    if (this.quantity < this.max) {
+      this.quantity++;
+      this.quantityChange.emit(this.quantity);
+    }
+  }
+}`;
+
+  await fs.writeFile(
+    path.join(
+      config.fullPath,
+      "src/app/shared/components/quantity-selector/quantity-selector.component.ts"
+    ),
+    quantitySelectorComponent
+  );
+
+  // Product Card Component
+  const productCardComponent = `import { Component, Input, inject } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { NgIconComponent, provideIcons } from '@ng-icons/core';
+import { heroHeart, heroShoppingCart } from '@ng-icons/heroicons/outline';
+import { heroHeartSolid } from '@ng-icons/heroicons/solid';
+import { RatingComponent } from '../rating/rating.component';
+import { PriceDisplayComponent } from '../price-display/price-display.component';
+import { CartService } from '@core/services/cart.service';
+import { WishlistService } from '@core/services/wishlist.service';
+import { Product } from '@core/services/product.service';
+
+@Component({
+  selector: 'app-product-card',
+  standalone: true,
+  imports: [RouterModule, NgIconComponent, RatingComponent, PriceDisplayComponent],
+  viewProviders: [provideIcons({ heroHeart, heroHeartSolid, heroShoppingCart })],
+  template: \`
+    <div class="group relative overflow-hidden rounded-2xl border border-gray-100 bg-white shadow-sm transition-all duration-300 hover:shadow-xl hover:-translate-y-1">
+      <!-- Image -->
+      <a [routerLink]="['/products', product.id]" class="block aspect-square overflow-hidden bg-gray-100">
+        <img
+          [src]="product.image"
+          [alt]="product.name"
+          class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-110"
+        />
+      </a>
+
+      <!-- Wishlist Button -->
+      <button
+        type="button"
+        (click)="toggleWishlist()"
+        class="absolute end-3 top-3 flex h-10 w-10 items-center justify-center rounded-full bg-white/90 shadow-md backdrop-blur-sm transition-all hover:bg-white hover:scale-110">
+        <ng-icon
+          [name]="isInWishlist ? 'heroHeartSolid' : 'heroHeart'"
+          size="20"
+          [class]="isInWishlist ? 'text-danger-500' : 'text-gray-600'">
+        </ng-icon>
+      </button>
+
+      <!-- Badge -->
+      @if (product.badge) {
+        <span class="absolute start-3 top-3 rounded-full bg-primary-500 px-3 py-1 text-xs font-semibold text-white">
+          {{ product.badge }}
+        </span>
+      }
+
+      <!-- Content -->
+      <div class="p-4">
+        <a [routerLink]="['/products', product.id]" class="block">
+          <p class="text-sm text-gray-500">{{ product.category }}</p>
+          <h3 class="mt-1 font-semibold text-gray-900 line-clamp-2 hover:text-primary-600 transition-colors">
+            {{ product.name }}
+          </h3>
+        </a>
+
+        <div class="mt-2">
+          <app-rating [rating]="product.rating" [reviewCount]="product.reviewCount"></app-rating>
+        </div>
+
+        <div class="mt-3 flex items-center justify-between">
+          <app-price-display
+            [price]="product.price"
+            [originalPrice]="product.originalPrice">
+          </app-price-display>
+
+          <button
+            type="button"
+            (click)="addToCart()"
+            class="flex h-10 w-10 items-center justify-center rounded-full bg-primary-500 text-white shadow-lg shadow-primary-500/30 transition-all hover:bg-primary-600 hover:scale-110">
+            <ng-icon name="heroShoppingCart" size="18"></ng-icon>
+          </button>
+        </div>
+      </div>
+    </div>
+  \`,
+})
+export class ProductCardComponent {
+  @Input() product!: Product;
+
+  private cartService = inject(CartService);
+  private wishlistService = inject(WishlistService);
+
+  get isInWishlist(): boolean {
+    return this.wishlistService.isInWishlist(this.product.id);
+  }
+
+  addToCart(): void {
+    this.cartService.addItem(this.product);
+  }
+
+  toggleWishlist(): void {
+    this.wishlistService.toggle(this.product);
+  }
+}`;
+
+  await fs.writeFile(
+    path.join(
+      config.fullPath,
+      "src/app/shared/components/product-card/product-card.component.ts"
+    ),
+    productCardComponent
+  );
+
+  // Product Grid Component
+  const productGridComponent = `import { Component, Input } from '@angular/core';
+import { ProductCardComponent } from '../product-card/product-card.component';
+import { Product } from '@core/services/product.service';
+
+@Component({
+  selector: 'app-product-grid',
+  standalone: true,
+  imports: [ProductCardComponent],
+  template: \`
+    <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+      @for (product of products; track product.id) {
+        <app-product-card [product]="product"></app-product-card>
+      }
+    </div>
+
+    @if (products.length === 0) {
+      <div class="py-12 text-center">
+        <p class="text-gray-500">No products found</p>
+      </div>
+    }
+  \`,
+})
+export class ProductGridComponent {
+  @Input() products: Product[] = [];
+}`;
+
+  await fs.writeFile(
+    path.join(
+      config.fullPath,
+      "src/app/shared/components/product-grid/product-grid.component.ts"
+    ),
+    productGridComponent
+  );
+
+  // Cart Item Component
+  const cartItemComponent = `import { Component, Input, inject } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { CurrencyPipe } from '@angular/common';
+import { NgIconComponent, provideIcons } from '@ng-icons/core';
+import { heroTrash } from '@ng-icons/heroicons/outline';
+import { QuantitySelectorComponent } from '../quantity-selector/quantity-selector.component';
+import { CartService, CartItem } from '@core/services/cart.service';
+
+@Component({
+  selector: 'app-cart-item',
+  standalone: true,
+  imports: [RouterModule, CurrencyPipe, NgIconComponent, QuantitySelectorComponent],
+  viewProviders: [provideIcons({ heroTrash })],
+  template: \`
+    <div class="flex gap-4 rounded-xl border border-gray-100 bg-white p-4 shadow-sm">
+      <!-- Image -->
+      <a [routerLink]="['/products', item.product.id]" class="h-24 w-24 flex-shrink-0 overflow-hidden rounded-lg bg-gray-100">
+        <img [src]="item.product.image" [alt]="item.product.name" class="h-full w-full object-cover" />
+      </a>
+
+      <!-- Details -->
+      <div class="flex flex-1 flex-col">
+        <div class="flex items-start justify-between">
+          <div>
+            <a [routerLink]="['/products', item.product.id]" class="font-semibold text-gray-900 hover:text-primary-600">
+              {{ item.product.name }}
+            </a>
+            <p class="text-sm text-gray-500">{{ item.product.category }}</p>
+          </div>
+          <button
+            type="button"
+            (click)="removeItem()"
+            class="text-gray-400 hover:text-danger-500 transition-colors">
+            <ng-icon name="heroTrash" size="20"></ng-icon>
+          </button>
+        </div>
+
+        <div class="mt-auto flex items-center justify-between pt-2">
+          <app-quantity-selector
+            [quantity]="item.quantity"
+            (quantityChange)="updateQuantity($event)">
+          </app-quantity-selector>
+
+          <span class="font-bold text-gray-900">
+            {{ item.product.price * item.quantity | currency }}
+          </span>
+        </div>
+      </div>
+    </div>
+  \`,
+})
+export class CartItemComponent {
+  @Input() item!: CartItem;
+
+  private cartService = inject(CartService);
+
+  updateQuantity(quantity: number): void {
+    this.cartService.updateQuantity(this.item.product.id, quantity);
+  }
+
+  removeItem(): void {
+    this.cartService.removeItem(this.item.product.id);
+  }
+}`;
+
+  await fs.writeFile(
+    path.join(
+      config.fullPath,
+      "src/app/shared/components/cart-item/cart-item.component.ts"
+    ),
+    cartItemComponent
+  );
+
+  // Product Filters Component
+  const productFiltersComponent = `import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+import { NgIconComponent, provideIcons } from '@ng-icons/core';
+import { heroFunnel, heroXMark } from '@ng-icons/heroicons/outline';
+
+export interface ProductFilters {
+  category: string;
+  minPrice: number | null;
+  maxPrice: number | null;
+  sortBy: string;
+}
+
+@Component({
+  selector: 'app-product-filters',
+  standalone: true,
+  imports: [FormsModule, TranslateModule, NgIconComponent],
+  viewProviders: [provideIcons({ heroFunnel, heroXMark })],
+  template: \`
+    <div class="rounded-xl border border-gray-200 bg-white p-6 shadow-sm">
+      <div class="flex items-center justify-between mb-4">
+        <h3 class="font-semibold text-gray-900 flex items-center gap-2">
+          <ng-icon name="heroFunnel" size="20"></ng-icon>
+          {{ 'shop.filters' | translate }}
+        </h3>
+        <button
+          type="button"
+          (click)="clearFilters()"
+          class="text-sm text-primary-600 hover:text-primary-700">
+          {{ 'shop.clearAll' | translate }}
+        </button>
+      </div>
+
+      <!-- Category -->
+      <div class="mb-6">
+        <label class="block text-sm font-medium text-gray-700 mb-2">{{ 'shop.category' | translate }}</label>
+        <select
+          [(ngModel)]="filters.category"
+          (ngModelChange)="onFiltersChange()"
+          class="w-full rounded-lg border border-gray-300 px-3 py-2 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
+          <option value="">{{ 'shop.allCategories' | translate }}</option>
+          @for (cat of categories; track cat) {
+            <option [value]="cat">{{ cat }}</option>
+          }
+        </select>
+      </div>
+
+      <!-- Price Range -->
+      <div class="mb-6">
+        <label class="block text-sm font-medium text-gray-700 mb-2">{{ 'shop.priceRange' | translate }}</label>
+        <div class="flex gap-2">
+          <input
+            type="number"
+            [(ngModel)]="filters.minPrice"
+            (ngModelChange)="onFiltersChange()"
+            [placeholder]="'shop.min' | translate"
+            class="w-full rounded-lg border border-gray-300 px-3 py-2 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
+          />
+          <input
+            type="number"
+            [(ngModel)]="filters.maxPrice"
+            (ngModelChange)="onFiltersChange()"
+            [placeholder]="'shop.max' | translate"
+            class="w-full rounded-lg border border-gray-300 px-3 py-2 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
+          />
+        </div>
+      </div>
+
+      <!-- Sort By -->
+      <div>
+        <label class="block text-sm font-medium text-gray-700 mb-2">{{ 'shop.sortBy' | translate }}</label>
+        <select
+          [(ngModel)]="filters.sortBy"
+          (ngModelChange)="onFiltersChange()"
+          class="w-full rounded-lg border border-gray-300 px-3 py-2 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
+          <option value="newest">{{ 'shop.newest' | translate }}</option>
+          <option value="price-low">{{ 'shop.priceLowHigh' | translate }}</option>
+          <option value="price-high">{{ 'shop.priceHighLow' | translate }}</option>
+          <option value="rating">{{ 'shop.topRated' | translate }}</option>
+        </select>
+      </div>
+    </div>
+  \`,
+})
+export class ProductFiltersComponent {
+  @Input() categories: string[] = [];
+  @Output() filtersChange = new EventEmitter<ProductFilters>();
+
+  filters: ProductFilters = {
+    category: '',
+    minPrice: null,
+    maxPrice: null,
+    sortBy: 'newest',
+  };
+
+  onFiltersChange(): void {
+    this.filtersChange.emit({ ...this.filters });
+  }
+
+  clearFilters(): void {
+    this.filters = {
+      category: '',
+      minPrice: null,
+      maxPrice: null,
+      sortBy: 'newest',
+    };
+    this.filtersChange.emit({ ...this.filters });
+  }
+}`;
+
+  await fs.writeFile(
+    path.join(
+      config.fullPath,
+      "src/app/shared/components/product-filters/product-filters.component.ts"
+    ),
+    productFiltersComponent
+  );
+}
+
+module.exports = { createComponents };