@beknurakhmed/webforge-cli 0.1.1 → 0.1.2

package/templates/overlays/ecommerce/angular/src/app/app.component.ts

@@ -0,0 +1,147 @@
+import { Component, signal, computed } from '@angular/core';
+import { RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router';
+import { Product } from './data/products';
+
+export interface CartItem {
+  product: Product;
+  quantity: number;
+}
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [RouterOutlet, RouterLink, RouterLinkActive],
+  template: `
+    <header class="store-header">
+      <div class="store-header__logo">{{ projectName }}</div>
+      <nav class="store-header__nav">
+        <a
+          routerLink="/"
+          routerLinkActive="active"
+          [routerLinkActiveOptions]="{ exact: true }"
+        >Home</a>
+        <a
+          routerLink="/cart"
+          routerLinkActive="active"
+        >Cart ({{ cartCount() }})</a>
+      </nav>
+    </header>
+    <main class="store-main">
+      <router-outlet />
+    </main>
+    <footer class="store-footer">
+      <p>&copy; 2024 {{ projectName }}</p>
+    </footer>
+  `,
+  styles: [`
+    :host {
+      display: flex;
+      flex-direction: column;
+      min-height: 100vh;
+      font-family: system-ui, sans-serif;
+      color: #374151;
+    }
+
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    .store-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 1rem 2rem;
+      background: #111827;
+      color: #fff;
+    }
+
+    .store-header__logo {
+      font-size: 1.5rem;
+      font-weight: 700;
+    }
+
+    .store-header__nav {
+      display: flex;
+      gap: 1.5rem;
+    }
+
+    .store-header__nav a {
+      color: #d1d5db;
+      text-decoration: none;
+      font-weight: 500;
+      transition: color 0.2s;
+    }
+
+    .store-header__nav a:hover,
+    .store-header__nav a.active {
+      color: #fff;
+    }
+
+    .store-main {
+      flex: 1;
+      padding: 2rem;
+      max-width: 1200px;
+      width: 100%;
+      margin: 0 auto;
+    }
+
+    .store-footer {
+      text-align: center;
+      padding: 1.5rem;
+      background: #111827;
+      color: #9ca3af;
+      font-size: 0.875rem;
+    }
+
+    @media (max-width: 768px) {
+      .store-header {
+        flex-direction: column;
+        gap: 0.75rem;
+        padding: 1rem;
+      }
+
+      .store-main {
+        padding: 1rem;
+      }
+    }
+  `]
+})
+export class AppComponent {
+  projectName = '{{projectName}}';
+  cart = signal<CartItem[]>([]);
+
+  cartCount = computed(() =>
+    this.cart().reduce((sum: number, item: CartItem) => sum + item.quantity, 0)
+  );
+
+  addToCart(product: Product): void {
+    this.cart.update((items: CartItem[]) => {
+      const existing = items.find(
+        (i: CartItem) => i.product.id === product.id
+      );
+      if (existing) {
+        return items.map((i: CartItem) =>
+          i.product.id === product.id
+            ? { ...i, quantity: i.quantity + 1 }
+            : i
+        );
+      }
+      return [...items, { product, quantity: 1 }];
+    });
+  }
+
+  removeFromCart(productId: number): void {
+    this.cart.update((items: CartItem[]) =>
+      items.filter((i: CartItem) => i.product.id !== productId)
+    );
+  }
+
+  getCartTotal(): number {
+    return this.cart().reduce(
+      (sum: number, item: CartItem) => sum + item.product.price * item.quantity,
+      0
+    );
+  }
+}

package/templates/overlays/ecommerce/angular/src/app/app.routes.ts

@@ -0,0 +1,10 @@
+import { Routes } from '@angular/router';
+import { HomeComponent } from './pages/home.component';
+import { ProductDetailComponent } from './pages/product-detail.component';
+import { CartComponent } from './pages/cart.component';
+
+export const routes: Routes = [
+  { path: '', component: HomeComponent },
+  { path: 'product/:id', component: ProductDetailComponent },
+  { path: 'cart', component: CartComponent },
+];

package/templates/overlays/ecommerce/angular/src/app/components/product-card.component.ts

@@ -0,0 +1,94 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { Product } from '../data/products';
+
+@Component({
+  selector: 'app-product-card',
+  standalone: true,
+  imports: [RouterLink],
+  template: `
+    <div class="product-card">
+      <a [routerLink]="['/product', product.id]" class="product-card__link">
+        <div class="product-card__image">{{ product.image }}</div>
+        <div class="product-card__info">
+          <span class="product-card__category">{{ product.category }}</span>
+          <h3 class="product-card__name">{{ product.name }}</h3>
+          <p class="product-card__price">
+            \${{ product.price.toFixed(2) }}
+          </p>
+        </div>
+      </a>
+      <button
+        class="product-card__add-btn"
+        (click)="addToCart.emit(product)"
+      >Add to Cart</button>
+    </div>
+  `,
+  styles: [`
+    .product-card {
+      background: #fff;
+      border-radius: 12px;
+      border: 1px solid #e5e7eb;
+      overflow: hidden;
+      transition: box-shadow 0.2s;
+    }
+
+    .product-card:hover {
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    }
+
+    .product-card__link {
+      text-decoration: none;
+      color: inherit;
+    }
+
+    .product-card__image {
+      font-size: 3rem;
+      text-align: center;
+      padding: 1.5rem;
+      background: #f9fafb;
+    }
+
+    .product-card__info {
+      padding: 1rem;
+    }
+
+    .product-card__category {
+      font-size: 0.75rem;
+      color: #4f46e5;
+      font-weight: 600;
+      text-transform: uppercase;
+    }
+
+    .product-card__name {
+      font-size: 1rem;
+      color: #111827;
+      margin: 0.25rem 0;
+    }
+
+    .product-card__price {
+      font-size: 1.125rem;
+      font-weight: 700;
+      color: #4f46e5;
+    }
+
+    .product-card__add-btn {
+      width: 100%;
+      padding: 0.75rem;
+      background: #4f46e5;
+      color: #fff;
+      border: none;
+      font-weight: 600;
+      cursor: pointer;
+      transition: background 0.2s;
+    }
+
+    .product-card__add-btn:hover {
+      background: #4338ca;
+    }
+  `]
+})
+export class ProductCardComponent {
+  @Input({ required: true }) product!: Product;
+  @Output() addToCart = new EventEmitter<Product>();
+}

package/templates/overlays/ecommerce/angular/src/app/data/products.ts

@@ -0,0 +1,75 @@
+export interface Product {
+  id: number;
+  name: string;
+  price: number;
+  image: string;
+  category: string;
+  description: string;
+}
+
+export const PRODUCTS: Product[] = [
+  {
+    id: 1,
+    name: 'Wireless Headphones',
+    price: 79.99,
+    image: '🎧',
+    category: 'Electronics',
+    description: 'Premium wireless headphones with noise cancellation.',
+  },
+  {
+    id: 2,
+    name: 'Running Shoes',
+    price: 129.99,
+    image: '👟',
+    category: 'Sports',
+    description: 'Lightweight running shoes for daily training.',
+  },
+  {
+    id: 3,
+    name: 'Coffee Maker',
+    price: 49.99,
+    image: '☕',
+    category: 'Home',
+    description: 'Programmable coffee maker with thermal carafe.',
+  },
+  {
+    id: 4,
+    name: 'Backpack',
+    price: 59.99,
+    image: '🎒',
+    category: 'Accessories',
+    description: 'Water-resistant laptop backpack.',
+  },
+  {
+    id: 5,
+    name: 'Smartwatch',
+    price: 199.99,
+    image: '⌚',
+    category: 'Electronics',
+    description: 'Fitness tracking smartwatch.',
+  },
+  {
+    id: 6,
+    name: 'Desk Lamp',
+    price: 34.99,
+    image: '💡',
+    category: 'Home',
+    description: 'LED desk lamp with adjustable brightness.',
+  },
+  {
+    id: 7,
+    name: 'Yoga Mat',
+    price: 24.99,
+    image: '🧘',
+    category: 'Sports',
+    description: 'Non-slip exercise yoga mat.',
+  },
+  {
+    id: 8,
+    name: 'Sunglasses',
+    price: 89.99,
+    image: '🕶️',
+    category: 'Accessories',
+    description: 'Polarized UV protection sunglasses.',
+  },
+];

package/templates/overlays/ecommerce/angular/src/app/pages/cart.component.ts

@@ -0,0 +1,169 @@
+import { Component, inject } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { AppComponent } from '../app.component';
+
+@Component({
+  selector: 'app-cart',
+  standalone: true,
+  imports: [RouterLink],
+  template: `
+    <div class="cart-page">
+      <h1 class="cart-page__title">Shopping Cart</h1>
+      @if (app.cart().length === 0) {
+        <p class="cart-page__empty-message">
+          Your cart is empty. <a routerLink="/">Browse products</a>
+        </p>
+      } @else {
+        <div class="cart-page__items">
+          @for (item of app.cart(); track item.product.id) {
+            <div class="cart-item">
+              <span class="cart-item__image">{{ item.product.image }}</span>
+              <div class="cart-item__info">
+                <h3 class="cart-item__name">{{ item.product.name }}</h3>
+                <p class="cart-item__quantity">
+                  Qty: {{ item.quantity }} &times; \${{ item.product.price.toFixed(2) }}
+                </p>
+              </div>
+              <span class="cart-item__total">
+                \${{ (item.product.price * item.quantity).toFixed(2) }}
+              </span>
+              <button
+                class="cart-item__remove-btn"
+                (click)="app.removeFromCart(item.product.id)"
+              >Remove</button>
+            </div>
+          }
+        </div>
+        <div class="cart-page__total-row">
+          <span>Total</span>
+          <span class="cart-page__total-price">
+            \${{ app.getCartTotal().toFixed(2) }}
+          </span>
+        </div>
+        <button class="cart-page__checkout-btn">Proceed to Checkout</button>
+      }
+    </div>
+  `,
+  styles: [`
+    .cart-page__title {
+      font-size: 1.75rem;
+      color: #111827;
+      margin-bottom: 1.5rem;
+    }
+
+    .cart-page__empty-message {
+      color: #6b7280;
+    }
+
+    .cart-page__empty-message a {
+      color: #4f46e5;
+      text-decoration: none;
+      font-weight: 500;
+    }
+
+    .cart-page__items {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+    }
+
+    .cart-item {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+      padding: 1rem;
+      background: #fff;
+      border: 1px solid #e5e7eb;
+      border-radius: 8px;
+    }
+
+    .cart-item__image {
+      font-size: 2rem;
+    }
+
+    .cart-item__info {
+      flex: 1;
+    }
+
+    .cart-item__name {
+      font-size: 1rem;
+      color: #111827;
+    }
+
+    .cart-item__quantity {
+      font-size: 0.875rem;
+      color: #6b7280;
+    }
+
+    .cart-item__total {
+      font-weight: 700;
+      color: #111827;
+      min-width: 80px;
+      text-align: right;
+    }
+
+    .cart-item__remove-btn {
+      padding: 0.5rem 1rem;
+      background: #fee2e2;
+      color: #dc2626;
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+      font-weight: 500;
+    }
+
+    .cart-item__remove-btn:hover {
+      background: #fecaca;
+    }
+
+    .cart-page__total-row {
+      display: flex;
+      justify-content: space-between;
+      padding: 1.5rem 0;
+      border-top: 2px solid #e5e7eb;
+      margin-top: 1rem;
+      font-size: 1.25rem;
+      font-weight: 700;
+    }
+
+    .cart-page__total-price {
+      color: #4f46e5;
+    }
+
+    .cart-page__checkout-btn {
+      width: 100%;
+      padding: 1rem;
+      background: #4f46e5;
+      color: #fff;
+      border: none;
+      border-radius: 8px;
+      font-size: 1.125rem;
+      font-weight: 600;
+      cursor: pointer;
+      margin-top: 1rem;
+    }
+
+    .cart-page__checkout-btn:hover {
+      background: #4338ca;
+    }
+
+    @media (max-width: 768px) {
+      .cart-item {
+        flex-wrap: wrap;
+      }
+
+      .cart-item__total {
+        min-width: auto;
+        text-align: left;
+      }
+
+      .cart-item__remove-btn {
+        width: 100%;
+        text-align: center;
+      }
+    }
+  `]
+})
+export class CartComponent {
+  app = inject(AppComponent);
+}

package/templates/overlays/ecommerce/angular/src/app/pages/home.component.ts

@@ -0,0 +1,96 @@
+import { Component, inject, signal } from '@angular/core';
+import { ProductCardComponent } from '../components/product-card.component';
+import { Product, PRODUCTS } from '../data/products';
+import { AppComponent } from '../app.component';
+
+@Component({
+  selector: 'app-home',
+  standalone: true,
+  imports: [ProductCardComponent],
+  template: `
+    <div class="home-page">
+      <div class="home-page__hero">
+        <h1 class="home-page__title">Discover Amazing Products</h1>
+        <input
+          type="text"
+          placeholder="Search products..."
+          [value]="search()"
+          (input)="search.set($any($event.target).value)"
+          class="home-page__search-input"
+        />
+      </div>
+      <div class="home-page__product-grid">
+        @for (product of filtered(); track product.id) {
+          <app-product-card
+            [product]="product"
+            (addToCart)="onAddToCart($event)"
+          />
+        }
+      </div>
+    </div>
+  `,
+  styles: [`
+    .home-page__hero {
+      text-align: center;
+      margin-bottom: 2rem;
+    }
+
+    .home-page__title {
+      font-size: 2rem;
+      color: #111827;
+      margin-bottom: 1rem;
+    }
+
+    .home-page__search-input {
+      padding: 0.75rem 1.25rem;
+      width: 100%;
+      max-width: 400px;
+      border: 2px solid #e5e7eb;
+      border-radius: 8px;
+      font-size: 1rem;
+      outline: none;
+    }
+
+    .home-page__search-input:focus {
+      border-color: #4f46e5;
+    }
+
+    .home-page__product-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+      gap: 1.5rem;
+    }
+
+    @media (max-width: 768px) {
+      .home-page__product-grid {
+        grid-template-columns: 1fr;
+        gap: 1rem;
+      }
+
+      .home-page__title {
+        font-size: 1.5rem;
+      }
+
+      .home-page__search-input {
+        max-width: 100%;
+      }
+    }
+  `]
+})
+export class HomeComponent {
+  private app = inject(AppComponent);
+  search = signal<string>('');
+
+  filtered = (): Product[] => {
+    const query = this.search().toLowerCase();
+    return PRODUCTS.filter(
+      (product: Product) =>
+        product.name.toLowerCase().includes(query) ||
+        product.category.toLowerCase().includes(query)
+    );
+  };
+
+  onAddToCart(product: Product): void {
+    this.app.addToCart(product);
+  }
+}

package/templates/overlays/ecommerce/angular/src/app/pages/product-detail.component.ts

@@ -0,0 +1,124 @@
+import { Component, inject } from '@angular/core';
+import { ActivatedRoute, RouterLink } from '@angular/router';
+import { Product, PRODUCTS } from '../data/products';
+import { AppComponent } from '../app.component';
+
+@Component({
+  selector: 'app-product-detail',
+  standalone: true,
+  imports: [RouterLink],
+  template: `
+    @if (product) {
+      <div class="product-detail">
+        <a routerLink="/" class="product-detail__back-link">
+          &larr; Back to Products
+        </a>
+        <div class="product-detail__grid">
+          <div class="product-detail__image">{{ product.image }}</div>
+          <div class="product-detail__info">
+            <span class="product-detail__category">{{ product.category }}</span>
+            <h1 class="product-detail__name">{{ product.name }}</h1>
+            <p class="product-detail__price">
+              \${{ product.price.toFixed(2) }}
+            </p>
+            <p class="product-detail__description">{{ product.description }}</p>
+            <button
+              class="product-detail__add-btn"
+              (click)="app.addToCart(product)"
+            >Add to Cart</button>
+          </div>
+        </div>
+      </div>
+    } @else {
+      <p>Product not found. <a routerLink="/">Go back</a></p>
+    }
+  `,
+  styles: [`
+    .product-detail__back-link {
+      color: #4f46e5;
+      text-decoration: none;
+      font-weight: 500;
+      display: inline-block;
+      margin-bottom: 1.5rem;
+    }
+
+    .product-detail__grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 2rem;
+      align-items: start;
+    }
+
+    .product-detail__image {
+      font-size: 6rem;
+      text-align: center;
+      padding: 3rem;
+      background: #f9fafb;
+      border-radius: 12px;
+    }
+
+    .product-detail__category {
+      font-size: 0.75rem;
+      color: #4f46e5;
+      font-weight: 600;
+      text-transform: uppercase;
+    }
+
+    .product-detail__name {
+      font-size: 1.75rem;
+      color: #111827;
+      margin: 0.5rem 0;
+    }
+
+    .product-detail__price {
+      font-size: 1.5rem;
+      font-weight: 700;
+      color: #4f46e5;
+      margin: 0.5rem 0;
+    }
+
+    .product-detail__description {
+      color: #374151;
+      line-height: 1.6;
+      margin-bottom: 1.5rem;
+    }
+
+    .product-detail__add-btn {
+      padding: 0.75rem 2rem;
+      background: #4f46e5;
+      color: #fff;
+      border: none;
+      border-radius: 8px;
+      font-weight: 600;
+      font-size: 1rem;
+      cursor: pointer;
+    }
+
+    .product-detail__add-btn:hover {
+      background: #4338ca;
+    }
+
+    @media (max-width: 768px) {
+      .product-detail__grid {
+        grid-template-columns: 1fr;
+        gap: 1.5rem;
+      }
+
+      .product-detail__image {
+        font-size: 4rem;
+        padding: 2rem;
+      }
+
+      .product-detail__name {
+        font-size: 1.35rem;
+      }
+    }
+  `]
+})
+export class ProductDetailComponent {
+  app = inject(AppComponent);
+
+  product: Product | undefined = PRODUCTS.find(
+    (p: Product) => p.id === +inject(ActivatedRoute).snapshot.params['id']
+  );
+}