create-ng-tailwind 3.1.0 → 4.0.0

package/lib/templates/ecommerce/app.js

@@ -0,0 +1,315 @@
+const fs = require("fs-extra");
+const path = require("path");
+
+/**
+ * Ecommerce App Configuration
+ * - Routes
+ * - App Config (with i18n)
+ * - App Component
+ * - Styles (Tailwind v4 with theme)
+ */
+
+async function createRouting(config) {
+  const routesFile = `import { Routes } from '@angular/router';
+
+export const routes: Routes = [
+  {
+    path: '',
+    loadComponent: () => import('./features/home/home.component').then(m => m.HomeComponent),
+  },
+  {
+    path: 'products',
+    loadComponent: () => import('./features/products/products.component').then(m => m.ProductsComponent),
+  },
+  {
+    path: 'products/:id',
+    loadComponent: () => import('./features/product-detail/product-detail.component').then(m => m.ProductDetailComponent),
+  },
+  {
+    path: 'cart',
+    loadComponent: () => import('./features/cart/cart.component').then(m => m.CartComponent),
+  },
+  {
+    path: 'checkout',
+    loadComponent: () => import('./features/checkout/checkout.component').then(m => m.CheckoutComponent),
+  },
+  {
+    path: 'wishlist',
+    loadComponent: () => import('./features/wishlist/wishlist.component').then(m => m.WishlistComponent),
+  },
+  {
+    path: '**',
+    redirectTo: '',
+  },
+];`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, "src/app/app.routes.ts"),
+    routesFile
+  );
+}
+
+async function createAppConfig(config) {
+  const appConfigFile = `import { ApplicationConfig, provideZoneChangeDetection, importProvidersFrom } from '@angular/core';
+import { provideRouter } from '@angular/router';
+import { provideHttpClient, withInterceptors, HttpClient } from '@angular/common/http';
+import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+
+import { routes } from './app.routes';
+import { authInterceptor } from '@core/interceptors/auth.interceptor';
+import { errorInterceptor } from '@core/interceptors/error.interceptor';
+import { loadingInterceptor } from '@core/interceptors/loading.interceptor';
+import { cachingInterceptor } from '@core/interceptors/caching.interceptor';
+
+export function HttpLoaderFactory(http: HttpClient) {
+  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
+}
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideRouter(routes),
+    provideHttpClient(
+      withInterceptors([
+        authInterceptor,
+        cachingInterceptor,
+        loadingInterceptor,
+        errorInterceptor,
+      ])
+    ),
+    importProvidersFrom(
+      TranslateModule.forRoot({
+        loader: {
+          provide: TranslateLoader,
+          useFactory: HttpLoaderFactory,
+          deps: [HttpClient]
+        }
+      })
+    ),
+  ],
+};`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, "src/app/app.config.ts"),
+    appConfigFile
+  );
+}
+
+async function createAppComponent(config) {
+  const appTs = `import { Component, inject } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { HeaderComponent } from './layout/header/header.component';
+import { FooterComponent } from './layout/footer/footer.component';
+import { ToastComponent } from '@shared/components/toast/toast.component';
+import { ModalComponent } from '@shared/components/modal/modal.component';
+import { TranslationService } from '@core/i18n/translation.service';
+
+@Component({
+  selector: 'app-root',
+  imports: [RouterOutlet, HeaderComponent, FooterComponent, ToastComponent, ModalComponent],
+  template: \`
+    <div class="flex min-h-screen flex-col">
+      <app-header />
+      <main class="flex-1">
+        <router-outlet />
+      </main>
+      <app-footer />
+    </div>
+    <app-toast />
+    <app-modal />
+  \`,
+})
+export class App {
+  private translationService = inject(TranslationService);
+  title = '${config.projectName}';
+}`;
+
+  const appHtml = `<!-- Template defined inline in app.ts -->`;
+
+  await fs.writeFile(path.join(config.fullPath, "src/app/app.ts"), appTs);
+  await fs.writeFile(path.join(config.fullPath, "src/app/app.html"), appHtml);
+}
+
+async function createStyles(config) {
+  const stylesFile = `@import "tailwindcss";
+
+@theme {
+  --color-primary-50: #eff6ff;
+  --color-primary-100: #dbeafe;
+  --color-primary-200: #bfdbfe;
+  --color-primary-300: #93c5fd;
+  --color-primary-400: #60a5fa;
+  --color-primary-500: #3b82f6;
+  --color-primary-600: #2563eb;
+  --color-primary-700: #1d4ed8;
+  --color-primary-800: #1e40af;
+  --color-primary-900: #1e3a8a;
+  --color-primary-950: #172554;
+
+  --color-secondary-50: #f8fafc;
+  --color-secondary-100: #f1f5f9;
+  --color-secondary-200: #e2e8f0;
+  --color-secondary-300: #cbd5e1;
+  --color-secondary-400: #94a3b8;
+  --color-secondary-500: #64748b;
+  --color-secondary-600: #475569;
+  --color-secondary-700: #334155;
+  --color-secondary-800: #1e293b;
+  --color-secondary-900: #0f172a;
+  --color-secondary-950: #020617;
+
+  --color-accent-50: #fdf4ff;
+  --color-accent-100: #fae8ff;
+  --color-accent-200: #f5d0fe;
+  --color-accent-300: #f0abfc;
+  --color-accent-400: #e879f9;
+  --color-accent-500: #d946ef;
+  --color-accent-600: #c026d3;
+  --color-accent-700: #a21caf;
+  --color-accent-800: #86198f;
+  --color-accent-900: #701a75;
+  --color-accent-950: #4a044e;
+
+  --color-success-50: #f0fdf4;
+  --color-success-100: #dcfce7;
+  --color-success-200: #bbf7d0;
+  --color-success-300: #86efac;
+  --color-success-400: #4ade80;
+  --color-success-500: #22c55e;
+  --color-success-600: #16a34a;
+  --color-success-700: #15803d;
+  --color-success-800: #166534;
+  --color-success-900: #14532d;
+  --color-success-950: #052e16;
+
+  --color-warning-50: #fffbeb;
+  --color-warning-100: #fef3c7;
+  --color-warning-200: #fde68a;
+  --color-warning-300: #fcd34d;
+  --color-warning-400: #fbbf24;
+  --color-warning-500: #f59e0b;
+  --color-warning-600: #d97706;
+  --color-warning-700: #b45309;
+  --color-warning-800: #92400e;
+  --color-warning-900: #78350f;
+  --color-warning-950: #451a03;
+
+  --color-danger-50: #fef2f2;
+  --color-danger-100: #fee2e2;
+  --color-danger-200: #fecaca;
+  --color-danger-300: #fca5a5;
+  --color-danger-400: #f87171;
+  --color-danger-500: #ef4444;
+  --color-danger-600: #dc2626;
+  --color-danger-700: #b91c1c;
+  --color-danger-800: #991b1b;
+  --color-danger-900: #7f1d1d;
+  --color-danger-950: #450a0a;
+}
+
+/* RTL Support */
+html[dir="rtl"] {
+  direction: rtl;
+}
+
+html[dir="ltr"] {
+  direction: ltr;
+}
+
+/* RTL-aware spacing utilities */
+html[dir="rtl"] .space-x-2 > * + * {
+  margin-right: 0.5rem;
+  margin-left: 0;
+}
+
+html[dir="rtl"] .space-x-3 > * + * {
+  margin-right: 0.75rem;
+  margin-left: 0;
+}
+
+html[dir="rtl"] .space-x-4 > * + * {
+  margin-right: 1rem;
+  margin-left: 0;
+}
+
+/* RTL-aware text alignment */
+html[dir="rtl"] .text-left {
+  text-align: right;
+}
+
+html[dir="rtl"] .text-right {
+  text-align: left;
+}
+
+/* Smooth scrolling */
+html {
+  scroll-behavior: smooth;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f5f9;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #cbd5e1;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8;
+}
+
+/* Line clamp utility */
+.line-clamp-1 {
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.line-clamp-2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}`;
+
+  await fs.writeFile(path.join(config.fullPath, "src/styles.css"), stylesFile);
+}
+
+async function installI18nPackages(config) {
+  if (!config.skipInstall) {
+    const execa = require("execa");
+    await execa.command(
+      "npm install @ngx-translate/core@^15.0.0 @ngx-translate/http-loader@^8.0.0 --force",
+      {
+        cwd: config.fullPath,
+        stdio: "pipe",
+      }
+    );
+  } else {
+    const packageJsonPath = path.join(config.fullPath, "package.json");
+    const packageJson = await fs.readJson(packageJsonPath);
+    if (!packageJson.dependencies) {
+      packageJson.dependencies = {};
+    }
+    packageJson.dependencies["@ngx-translate/core"] = "^15.0.0";
+    packageJson.dependencies["@ngx-translate/http-loader"] = "^8.0.0";
+    await fs.writeJson(packageJsonPath, packageJson, { spaces: 2 });
+  }
+}
+
+module.exports = {
+  createRouting,
+  createAppConfig,
+  createAppComponent,
+  createStyles,
+  installI18nPackages,
+};