create-ng-tailwind 3.1.0 → 4.0.0

package/lib/templates/starter/app.js

@@ -0,0 +1,364 @@
+const fs = require('fs-extra');
+const path = require('path');
+
+/**
+ * Starter App Configuration
+ * - Routes (app.routes.ts)
+ * - App Config (app.config.ts)
+ * - App Component (app.ts)
+ * - Global Styles (styles.css with Tailwind v4 theme)
+ */
+
+async function createRouting(config) {
+  const routes = `import { Routes } from '@angular/router';
+// import { authGuard } from './core/guards/auth.guard';
+
+export const routes: Routes = [
+  // Public routes
+  {
+    path: '',
+    loadComponent: () => import('./features/home/home.component').then(c => c.HomeComponent)
+  },
+  {
+    path: 'about',
+    loadComponent: () => import('./features/about/about.component').then(c => c.AboutComponent)
+  },
+  {
+    path: 'contact',
+    loadComponent: () => import('./features/contact/contact.component').then(c => c.ContactComponent)
+  },
+
+  // Auth routes with layout
+  {
+    path: 'auth',
+    loadComponent: () => import('./layout/auth/auth-layout.component').then(c => c.AuthLayoutComponent),
+    children: [
+      {
+        path: '',
+        redirectTo: 'login',
+        pathMatch: 'full'
+      },
+      {
+        path: 'login',
+        loadComponent: () => import('./features/auth/login/login.component').then(c => c.LoginComponent)
+      },
+      {
+        path: 'register',
+        loadComponent: () => import('./features/auth/register/register.component').then(c => c.RegisterComponent)
+      },
+      {
+        path: 'forgot-password',
+        loadComponent: () => import('./features/auth/forgot-password/forgot-password.component').then(c => c.ForgotPasswordComponent)
+      }
+    ]
+  },
+
+  // Example protected route (uncomment authGuard import above when you need authentication)
+  // {
+  //   path: 'dashboard',
+  //   loadComponent: () => import('./features/dashboard/dashboard.component').then(c => c.DashboardComponent),
+  //   canActivate: [authGuard]
+  // },
+
+  // Catch-all redirect
+  {
+    path: '**',
+    redirectTo: ''
+  }
+];`;
+
+  await fs.writeFile(path.join(config.fullPath, 'src/app/app.routes.ts'), routes);
+}
+
+async function createAppConfig(config) {
+  const isSSR = config.ssr || false;
+  const isZoneless = config.zoneless || false;
+
+  const changeDetectionImport = isZoneless
+    ? 'provideZonelessChangeDetection'
+    : 'provideZoneChangeDetection';
+
+  const coreImports = `import { ApplicationConfig, provideBrowserGlobalErrorListeners, ${changeDetectionImport}, isDevMode, importProvidersFrom } from '@angular/core';
+import { provideRouter } from '@angular/router';
+import { provideHttpClient, withFetch, withInterceptors } from '@angular/common/http';${
+    isSSR
+      ? "\nimport { provideClientHydration, withEventReplay } from '@angular/platform-browser';"
+      : ''
+  }
+import { provideServiceWorker } from '@angular/service-worker';
+import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { HttpClient } from '@angular/common/http';
+
+import { routes } from './app.routes';
+import { environment } from '@environments/environment';
+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';`;
+
+  const ssrProvider = isSSR ? '\n    provideClientHydration(withEventReplay()),' : '';
+  const changeDetectionProvider = isZoneless
+    ? 'provideZonelessChangeDetection()'
+    : 'provideZoneChangeDetection({ eventCoalescing: true })';
+
+  const appConfig = `${coreImports}
+
+// Translation loader factory
+export function HttpLoaderFactory(http: HttpClient) {
+  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
+}
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    ${changeDetectionProvider},
+    provideRouter(routes),${ssrProvider}
+    provideHttpClient(
+      withFetch(),
+      withInterceptors([
+        authInterceptor,
+        cachingInterceptor,
+        loadingInterceptor,
+        errorInterceptor
+      ])
+    ),
+    // Translation configuration
+    importProvidersFrom(
+      TranslateModule.forRoot({
+        loader: {
+          provide: TranslateLoader,
+          useFactory: HttpLoaderFactory,
+          deps: [HttpClient]
+        }
+      })
+    ),
+    provideServiceWorker('ngsw-worker.js', {
+      enabled: !isDevMode(),
+      registrationStrategy: 'registerWhenStable:30000'
+    }),
+    // Environment-based providers
+    ...(environment.enableDevTools && isDevMode() ? [] : []),
+  ]
+};`;
+
+  await fs.writeFile(path.join(config.fullPath, 'src/app/app.config.ts'), appConfig);
+}
+
+async function createAppComponent(config) {
+  const app = `import { Component, OnInit, 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';
+import { SeoService } from '@core/services/seo.service';
+import { createOrganizationSchema, createWebSiteSchema } from '@core/utils/structured-data';
+
+@Component({
+  selector: 'app-root',
+  imports: [RouterOutlet, HeaderComponent, FooterComponent, ToastComponent, ModalComponent],
+  template: \`
+    <div class="min-h-screen flex flex-col bg-white">
+      <app-header />
+
+      <main class="flex-1">
+        <router-outlet />
+      </main>
+
+      <app-footer />
+
+      <!-- Global Toast Notifications -->
+      <app-toast />
+
+      <!-- Global Modal System -->
+      <app-modal />
+    </div>
+  \`
+})
+export class App implements OnInit {
+  private translationService = inject(TranslationService);
+  private seo = inject(SeoService);
+
+  title = '${config.projectName}';
+
+  ngOnInit(): void {
+    const organizationData = createOrganizationSchema({
+      name: '${config.projectName}',
+      url: 'https://example.com',
+      logo: '/assets/images/logo.svg',
+      description: 'A modern Angular application built with best practices',
+      sameAs: []
+    });
+
+    const websiteData = createWebSiteSchema({
+      name: '${config.projectName}',
+      url: 'https://example.com',
+      description: 'A modern Angular application with Tailwind CSS, SEO optimization, and i18n support'
+    });
+
+    this.seo.addStructuredData({
+      '@context': 'https://schema.org',
+      '@graph': [organizationData, websiteData]
+    });
+  }
+}`;
+
+  const appHtml = `<!-- This file is not used in standalone components -->
+<!-- The template is defined inline in app.component.ts -->`;
+
+  await fs.writeFile(path.join(config.fullPath, 'src/app/app.ts'), app);
+  await fs.writeFile(path.join(config.fullPath, 'src/app/app.html'), appHtml);
+}
+
+async function createStyles(config) {
+  const mainStyles = `@import "tailwindcss";
+
+/* ============================================
+   TAILWIND V4 THEME CONFIGURATION
+   ============================================ */
+
+@theme {
+  /* PRIMARY COLOR SCALE */
+  --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;
+
+  /* SECONDARY COLOR SCALE */
+  --color-secondary-50: #ecfeff;
+  --color-secondary-100: #cffafe;
+  --color-secondary-200: #a5f3fc;
+  --color-secondary-300: #67e8f9;
+  --color-secondary-400: #22d3ee;
+  --color-secondary-500: #06b6d4;
+  --color-secondary-600: #0891b2;
+  --color-secondary-700: #0e7490;
+  --color-secondary-800: #155e75;
+  --color-secondary-900: #164e63;
+  --color-secondary-950: #083344;
+
+  /* ACCENT COLOR SCALE */
+  --color-accent-50: #faf5ff;
+  --color-accent-100: #f3e8ff;
+  --color-accent-200: #e9d5ff;
+  --color-accent-300: #d8b4fe;
+  --color-accent-400: #c084fc;
+  --color-accent-500: #a855f7;
+  --color-accent-600: #9333ea;
+  --color-accent-700: #7e22ce;
+  --color-accent-800: #6b21a8;
+  --color-accent-900: #581c87;
+  --color-accent-950: #3b0764;
+
+  /* SUCCESS COLOR SCALE */
+  --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;
+
+  /* DANGER COLOR SCALE */
+  --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;
+
+  /* WARNING COLOR SCALE */
+  --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;
+
+  /* INFO COLOR SCALE */
+  --color-info-50: #eff6ff;
+  --color-info-100: #dbeafe;
+  --color-info-200: #bfdbfe;
+  --color-info-300: #93c5fd;
+  --color-info-400: #60a5fa;
+  --color-info-500: #3b82f6;
+  --color-info-600: #2563eb;
+  --color-info-700: #1d4ed8;
+  --color-info-800: #1e40af;
+  --color-info-900: #1e3a8a;
+  --color-info-950: #172554;
+}
+
+/* RTL Support */
+html[dir="rtl"] { direction: rtl; }
+html[dir="ltr"] { direction: ltr; }
+
+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; }
+html[dir="rtl"] .space-x-8 > * + * { margin-right: 2rem; margin-left: 0; }
+html[dir="rtl"] .text-left { text-align: right; }
+html[dir="rtl"] .text-right { text-align: left; }
+
+/* Custom utility classes */
+.container { @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8; }
+
+/* Custom scrollbar */
+::-webkit-scrollbar { width: 8px; height: 8px; }
+::-webkit-scrollbar-track { @apply bg-gray-100; }
+::-webkit-scrollbar-thumb { @apply bg-gray-300 rounded-full; }
+::-webkit-scrollbar-thumb:hover { @apply bg-gray-400; }
+
+/* Focus styles */
+.focus-visible { @apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2; }
+
+/* Animation classes */
+.animate-fade-in { animation: fadeIn 0.6s ease-in-out; }
+.animate-slide-up { animation: slideUp 0.6s ease-out; }
+.animate-blob { animation: blob 7s infinite; }
+.animation-delay-2000 { animation-delay: 2s; }
+.animation-delay-4000 { animation-delay: 4s; }
+.animation-delay-200 { animation-delay: 0.2s; }
+
+@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
+@keyframes blob { 0% { transform: translate(0px, 0px) scale(1); } 33% { transform: translate(30px, -50px) scale(1.1); } 66% { transform: translate(-20px, 20px) scale(0.9); } 100% { transform: translate(0px, 0px) scale(1); } }
+
+/* Print styles */
+@media print { .no-print { display: none !important; } }
+
+/* RTL Transition smoothing */
+* { transition: margin 0.2s ease-in-out; }`;
+
+  await fs.writeFile(path.join(config.fullPath, 'src/styles.css'), mainStyles);
+}
+
+module.exports = {
+  createRouting,
+  createAppConfig,
+  createAppComponent,
+  createStyles,
+};