create-ng-tailwind 3.0.1 → 4.0.0

package/lib/templates/ecommerce/i18n.js

@@ -0,0 +1,389 @@
+const fs = require("fs-extra");
+const path = require("path");
+
+/**
+ * Ecommerce i18n (Internationalization)
+ * - TranslationService
+ * - English translations
+ * - Arabic translations (RTL)
+ */
+
+async function createI18n(config) {
+  // Translation Service
+  const translationService = `import { Injectable, inject, signal, effect, PLATFORM_ID } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { TranslateService } from '@ngx-translate/core';
+import { StorageService } from '@core/services/storage.service';
+
+export type SupportedLanguage = 'en' | 'ar';
+
+export interface LanguageOption {
+  code: SupportedLanguage;
+  name: string;
+  nativeName: string;
+  dir: 'ltr' | 'rtl';
+  flag: string;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TranslationService {
+  private translateService = inject(TranslateService);
+  private storage = inject(StorageService);
+  private platformId = inject(PLATFORM_ID);
+  private isBrowser = isPlatformBrowser(this.platformId);
+
+  public currentLang = signal<SupportedLanguage>('en');
+  public textDirection = signal<'ltr' | 'rtl'>('ltr');
+
+  public readonly languages: LanguageOption[] = [
+    { code: 'en', name: 'English', nativeName: 'English', dir: 'ltr', flag: '🇺🇸' },
+    { code: 'ar', name: 'Arabic', nativeName: 'العربية', dir: 'rtl', flag: '🇸🇦' }
+  ];
+
+  constructor() {
+    this.translateService.setDefaultLang('en');
+    const savedLang = this.getSavedLanguage();
+    const browserLang = this.translateService.getBrowserLang() as SupportedLanguage;
+    const initialLang = savedLang || (this.isSupportedLanguage(browserLang) ? browserLang : 'en');
+    this.setLanguage(initialLang);
+
+    if (this.isBrowser) {
+      effect(() => {
+        const dir = this.textDirection();
+        document.documentElement.setAttribute('dir', dir);
+        document.documentElement.setAttribute('lang', this.currentLang());
+      });
+    }
+  }
+
+  setLanguage(lang: SupportedLanguage): void {
+    if (!this.isSupportedLanguage(lang)) {
+      lang = 'en';
+    }
+    this.translateService.use(lang);
+    this.currentLang.set(lang);
+    const languageOption = this.languages.find(l => l.code === lang);
+    if (languageOption) {
+      this.textDirection.set(languageOption.dir);
+    }
+    this.saveLanguage(lang);
+  }
+
+  getCurrentLanguage(): SupportedLanguage {
+    return this.currentLang();
+  }
+
+  getLanguageOption(code: SupportedLanguage): LanguageOption | undefined {
+    return this.languages.find(lang => lang.code === code);
+  }
+
+  isSupportedLanguage(lang: string): lang is SupportedLanguage {
+    return ['en', 'ar'].includes(lang);
+  }
+
+  toggleLanguage(): void {
+    const newLang: SupportedLanguage = this.currentLang() === 'en' ? 'ar' : 'en';
+    this.setLanguage(newLang);
+  }
+
+  instant(key: string, params?: object): string {
+    return this.translateService.instant(key, params);
+  }
+
+  get(key: string | string[], params?: object) {
+    return this.translateService.get(key, params);
+  }
+
+  private saveLanguage(lang: SupportedLanguage): void {
+    this.storage.setItem('preferred_language', lang);
+  }
+
+  private getSavedLanguage(): SupportedLanguage | null {
+    const saved = this.storage.getItem('preferred_language');
+    return saved && this.isSupportedLanguage(saved) ? saved : null;
+  }
+}`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, "src/app/core/i18n/translation.service.ts"),
+    translationService
+  );
+
+  // English translations
+  const enTranslations = {
+    nav: {
+      home: "Home",
+      shop: "Shop",
+      cart: "Cart",
+      wishlist: "Wishlist",
+      account: "Account",
+    },
+    home: {
+      heroTitle: "Discover Your Style",
+      heroSubtitle:
+        "Shop the latest trends with free shipping on orders over $100. Quality products, unbeatable prices.",
+      shopNow: "Shop Now",
+      viewDeals: "View Deals",
+      saleBadge: "Flash Sale - Up to 50% Off!",
+      upTo: "Up to",
+      newCollection: "New Collection",
+      justArrived: "Just Arrived",
+      happyCustomers: "Happy Customers",
+      products: "Products",
+      rating: "Rating",
+      featuredProducts: "Featured Products",
+      featuredSubtitle: "Handpicked just for you",
+      viewAll: "View All",
+      seeMore: "See More",
+      shopByCategory: "Shop by Category",
+      categorySubtitle: "Find what you need in our curated collections",
+      newArrivals: "New Arrivals",
+      newArrivalsSubtitle: "Fresh styles just dropped",
+      freeShipping: "Free Shipping",
+      freeShippingDesc: "On orders over $100",
+      securePayment: "Secure Payment",
+      securePaymentDesc: "100% secure checkout",
+      easyReturns: "Easy Returns",
+      easyReturnsDesc: "30-day return policy",
+      support: "24/7 Support",
+      supportDesc: "Dedicated support",
+      limitedOffer: "Limited Time Offer",
+      promoTitle: "Summer Sale is Here!",
+      promoSubtitle: "Get up to 50% off on selected items. Don't miss out!",
+      exclusive: "Exclusive Offer",
+      newsletterTitle: "Get 15% Off Your First Order",
+      newsletterSubtitle: "Subscribe to our newsletter and be the first to know about new arrivals, sales, and exclusive deals.",
+      emailPlaceholder: "Enter your email",
+      subscribe: "Subscribe",
+      privacyNote: "By subscribing, you agree to our Privacy Policy. Unsubscribe anytime.",
+      testimonials: "What Our Customers Say",
+      testimonialsSubtitle: "Real reviews from real customers",
+    },
+    shop: {
+      title: "All Products",
+      subtitle: "Browse our collection of premium products",
+      filters: "Filters",
+      clearAll: "Clear All",
+      category: "Category",
+      allCategories: "All Categories",
+      priceRange: "Price Range",
+      min: "Min",
+      max: "Max",
+      sortBy: "Sort By",
+      newest: "Newest",
+      priceLowHigh: "Price: Low to High",
+      priceHighLow: "Price: High to Low",
+      topRated: "Top Rated",
+      productsFound: "products found",
+    },
+    product: {
+      addToCart: "Add to Cart",
+      features: "Features",
+      inStock: "In Stock",
+      outOfStock: "Out of Stock",
+      relatedProducts: "You May Also Like",
+    },
+    cart: {
+      title: "Shopping Cart",
+      orderSummary: "Order Summary",
+      subtotal: "Subtotal",
+      shipping: "Shipping",
+      tax: "Tax",
+      total: "Total",
+      free: "Free",
+      checkout: "Proceed to Checkout",
+      continueShopping: "Continue Shopping",
+      empty: "Your cart is empty",
+      emptyDesc: "Looks like you haven't added anything to your cart yet.",
+      startShopping: "Start Shopping",
+      qty: "Qty",
+    },
+    checkout: {
+      title: "Checkout",
+      contact: "Contact Information",
+      email: "Email",
+      phone: "Phone",
+      shipping: "Shipping Address",
+      firstName: "First Name",
+      lastName: "Last Name",
+      address: "Address",
+      city: "City",
+      zip: "ZIP Code",
+      payment: "Payment Method",
+      cardNumber: "Card Number",
+      expiry: "Expiry Date",
+      cvv: "CVV",
+      placeOrder: "Place Order",
+      secureNote: "Your payment information is secure and encrypted",
+      orderPlaced: "Order Placed Successfully!",
+      orderNumber: "Order Number",
+      confirmationEmail:
+        "A confirmation email has been sent to your email address.",
+      backToHome: "Back to Home",
+    },
+    wishlist: {
+      title: "My Wishlist",
+      empty: "Your wishlist is empty",
+      emptyDesc: "Save items you love by clicking the heart icon.",
+      browseProducts: "Browse Products",
+    },
+    footer: {
+      description:
+        "Your one-stop destination for quality products at great prices.",
+      newsletter: "Subscribe to our newsletter",
+      emailPlaceholder: "Enter your email",
+      quickLinks: "Quick Links",
+      support: "Support",
+      faq: "FAQ",
+      shipping: "Shipping Info",
+      returns: "Returns",
+      contact: "Contact Us",
+      rights: "All rights reserved.",
+    },
+  };
+
+  await fs.writeFile(
+    path.join(config.fullPath, "public/assets/i18n/en.json"),
+    JSON.stringify(enTranslations, null, 2)
+  );
+
+  // Arabic translations
+  const arTranslations = {
+    nav: {
+      home: "الرئيسية",
+      shop: "المتجر",
+      cart: "السلة",
+      wishlist: "المفضلة",
+      account: "الحساب",
+    },
+    home: {
+      heroTitle: "اكتشف أسلوبك",
+      heroSubtitle:
+        "تسوق أحدث الصيحات مع شحن مجاني للطلبات فوق 100$. منتجات عالية الجودة بأسعار لا تقبل المنافسة.",
+      shopNow: "تسوق الآن",
+      viewDeals: "عرض العروض",
+      saleBadge: "تخفيضات - خصم يصل إلى 50%!",
+      upTo: "يصل إلى",
+      newCollection: "مجموعة جديدة",
+      justArrived: "وصلت حديثاً",
+      happyCustomers: "عميل سعيد",
+      products: "منتج",
+      rating: "التقييم",
+      featuredProducts: "منتجات مميزة",
+      featuredSubtitle: "مختارة خصيصاً لك",
+      viewAll: "عرض الكل",
+      seeMore: "عرض المزيد",
+      shopByCategory: "تسوق حسب الفئة",
+      categorySubtitle: "اعثر على ما تحتاجه في مجموعاتنا المختارة",
+      newArrivals: "وصل حديثاً",
+      newArrivalsSubtitle: "أحدث الصيحات وصلت للتو",
+      freeShipping: "شحن مجاني",
+      freeShippingDesc: "للطلبات فوق 100$",
+      securePayment: "دفع آمن",
+      securePaymentDesc: "دفع مشفر 100%",
+      easyReturns: "إرجاع سهل",
+      easyReturnsDesc: "سياسة إرجاع 30 يوم",
+      support: "دعم على مدار الساعة",
+      supportDesc: "دعم مخصص",
+      limitedOffer: "عرض محدود",
+      promoTitle: "تخفيضات الصيف هنا!",
+      promoSubtitle: "احصل على خصم يصل إلى 50% على منتجات مختارة. لا تفوت الفرصة!",
+      exclusive: "عرض حصري",
+      newsletterTitle: "احصل على خصم 15% على طلبك الأول",
+      newsletterSubtitle: "اشترك في نشرتنا البريدية وكن أول من يعرف عن المنتجات الجديدة والعروض الحصرية.",
+      emailPlaceholder: "أدخل بريدك الإلكتروني",
+      subscribe: "اشترك",
+      privacyNote: "بالاشتراك، أنت توافق على سياسة الخصوصية. يمكنك إلغاء الاشتراك في أي وقت.",
+      testimonials: "ماذا يقول عملاؤنا",
+      testimonialsSubtitle: "تقييمات حقيقية من عملاء حقيقيين",
+    },
+    shop: {
+      title: "جميع المنتجات",
+      subtitle: "تصفح مجموعتنا من المنتجات المميزة",
+      filters: "الفلاتر",
+      clearAll: "مسح الكل",
+      category: "الفئة",
+      allCategories: "جميع الفئات",
+      priceRange: "نطاق السعر",
+      min: "الحد الأدنى",
+      max: "الحد الأقصى",
+      sortBy: "ترتيب حسب",
+      newest: "الأحدث",
+      priceLowHigh: "السعر: من الأقل للأعلى",
+      priceHighLow: "السعر: من الأعلى للأقل",
+      topRated: "الأعلى تقييماً",
+      productsFound: "منتج",
+    },
+    product: {
+      addToCart: "أضف للسلة",
+      features: "المميزات",
+      inStock: "متوفر",
+      outOfStock: "غير متوفر",
+      relatedProducts: "قد يعجبك أيضاً",
+    },
+    cart: {
+      title: "سلة التسوق",
+      orderSummary: "ملخص الطلب",
+      subtotal: "المجموع الفرعي",
+      shipping: "الشحن",
+      tax: "الضريبة",
+      total: "الإجمالي",
+      free: "مجاني",
+      checkout: "متابعة الدفع",
+      continueShopping: "متابعة التسوق",
+      empty: "سلتك فارغة",
+      emptyDesc: "يبدو أنك لم تضف أي منتج إلى سلتك بعد.",
+      startShopping: "ابدأ التسوق",
+      qty: "الكمية",
+    },
+    checkout: {
+      title: "إتمام الطلب",
+      contact: "معلومات التواصل",
+      email: "البريد الإلكتروني",
+      phone: "الهاتف",
+      shipping: "عنوان الشحن",
+      firstName: "الاسم الأول",
+      lastName: "اسم العائلة",
+      address: "العنوان",
+      city: "المدينة",
+      zip: "الرمز البريدي",
+      payment: "طريقة الدفع",
+      cardNumber: "رقم البطاقة",
+      expiry: "تاريخ الانتهاء",
+      cvv: "رمز CVV",
+      placeOrder: "تأكيد الطلب",
+      secureNote: "معلومات الدفع الخاصة بك آمنة ومشفرة",
+      orderPlaced: "تم تأكيد طلبك بنجاح!",
+      orderNumber: "رقم الطلب",
+      confirmationEmail: "تم إرسال رسالة تأكيد إلى بريدك الإلكتروني.",
+      backToHome: "العودة للرئيسية",
+    },
+    wishlist: {
+      title: "قائمة المفضلة",
+      empty: "قائمة المفضلة فارغة",
+      emptyDesc: "احفظ المنتجات المفضلة بالضغط على أيقونة القلب.",
+      browseProducts: "تصفح المنتجات",
+    },
+    footer: {
+      description: "وجهتك الأولى لمنتجات عالية الجودة بأسعار رائعة.",
+      newsletter: "اشترك في نشرتنا البريدية",
+      emailPlaceholder: "أدخل بريدك الإلكتروني",
+      quickLinks: "روابط سريعة",
+      support: "الدعم",
+      faq: "الأسئلة الشائعة",
+      shipping: "معلومات الشحن",
+      returns: "الإرجاع",
+      contact: "اتصل بنا",
+      rights: "جميع الحقوق محفوظة.",
+    },
+  };
+
+  await fs.writeFile(
+    path.join(config.fullPath, "public/assets/i18n/ar.json"),
+    JSON.stringify(arTranslations, null, 2)
+  );
+}
+
+module.exports = { createI18n };

package/lib/templates/ecommerce/index.js

@@ -0,0 +1,152 @@
+const fs = require("fs-extra");
+const path = require("path");
+const base = require("../base");
+
+// Import modular components
+const { createComponents } = require("./components");
+const { createLayout } = require("./layout");
+const { createServices } = require("./services");
+const { createPages } = require("./pages");
+const { createI18n } = require("./i18n");
+const {
+  createRouting,
+  createAppConfig,
+  createAppComponent,
+  createStyles,
+  installI18nPackages,
+} = require("./app");
+
+/**
+ * Ecommerce Template
+ * Extends base template with ecommerce UI:
+ * - Product listings with filters
+ * - Product detail pages
+ * - Shopping cart
+ * - Checkout flow
+ * - Header with cart icon
+ * - Footer with links
+ *
+ * File Structure:
+ * - components.js: Shared components (Rating, ProductCard, CartItem, etc.)
+ * - layout.js: Header and Footer components
+ * - services.js: ProductService, CartService, WishlistService
+ * - pages.js: Home, Products, ProductDetail, Cart, Checkout, Wishlist
+ * - i18n.js: TranslationService and translation files (EN/AR)
+ * - app.js: Routes, AppConfig, AppComponent, Styles
+ */
+const ecommerce = {
+  info: {
+    name: "Ecommerce",
+    description: "Online store with products, cart, and checkout",
+    features: [
+      ...base.info.features,
+      "Product listing with grid/list views",
+      "Product filtering and sorting",
+      "Product detail page with gallery",
+      "Shopping cart with quantity controls",
+      "Checkout flow with form validation",
+      "Header with navigation and cart icon",
+      "Footer with links and newsletter",
+      "i18n translation support (English & Arabic) with RTL",
+      "Responsive mobile-first design",
+      "Product search functionality",
+      "Category navigation",
+      "Wishlist functionality",
+    ],
+  },
+
+  async apply(config, spinner) {
+    this.spinner = spinner;
+    const chalk = require("chalk");
+
+    const completeStep = (message) => {
+      if (spinner) {
+        spinner.stop();
+        console.log(chalk.green("  ✔") + chalk.white(" " + message));
+        spinner.start();
+      }
+    };
+
+    // Step 1: Apply base template (infrastructure)
+    if (spinner) spinner.update("Setting up base infrastructure...");
+    await base.apply(config, null);
+
+    // Step 2: Create ecommerce-specific directories
+    if (spinner) spinner.update("Setting up ecommerce UI...");
+    await this.createEcommerceDirectories(config);
+
+    // Step 3: Create shared ecommerce components
+    await createComponents(config);
+
+    // Step 4: Create layout (header + footer)
+    await createLayout(config);
+
+    // Step 5: Create ecommerce pages
+    await createPages(config);
+
+    // Step 6: Create services (cart, products)
+    await createServices(config);
+
+    // Step 7: Create i18n translations
+    await createI18n(config);
+
+    // Step 8: Create routing, app config, app component, styles
+    await createRouting(config);
+    await createAppConfig(config);
+    await createAppComponent(config);
+    await createStyles(config);
+
+    // Step 9: Install i18n packages
+    await installI18nPackages(config);
+
+    // Step 10: Format code
+    await base.formatCode(config);
+
+    if (spinner) spinner.stop();
+
+    // Show summary
+    console.log("");
+    completeStep("Angular 20+ project created");
+    completeStep("Tailwind CSS v4 configured");
+    completeStep("Ecommerce layout with header/footer");
+    completeStep("Product listing with filters");
+    completeStep("Shopping cart functionality");
+    completeStep("Checkout flow");
+    completeStep("i18n translation support (English & Arabic)");
+    completeStep("RTL/LTR language direction support");
+    completeStep("HTTP interceptors (Auth, Error, Loading, Cache)");
+    completeStep("Core services (Cart, Products, + base services)");
+    completeStep("ESLint + Prettier + simple-git-hooks");
+    console.log("");
+  },
+
+  async createEcommerceDirectories(config) {
+    const directories = [
+      "src/app/layout/header",
+      "src/app/layout/footer",
+      "src/app/shared/components/product-card",
+      "src/app/shared/components/product-grid",
+      "src/app/shared/components/cart-item",
+      "src/app/shared/components/quantity-selector",
+      "src/app/shared/components/price-display",
+      "src/app/shared/components/rating",
+      "src/app/shared/components/product-filters",
+      "src/app/features/home",
+      "src/app/features/products",
+      "src/app/features/product-detail",
+      "src/app/features/cart",
+      "src/app/features/checkout",
+      "src/app/features/wishlist",
+      "src/app/core/services",
+      "src/app/core/i18n",
+      "public/assets/i18n",
+      "public/assets/images/products",
+    ];
+
+    for (const dir of directories) {
+      await fs.ensureDir(path.join(config.fullPath, dir));
+    }
+  },
+};
+
+module.exports = ecommerce;