create-ng-tailwind 3.1.0 → 4.1.0

package/lib/templates/blog/services.js

@@ -0,0 +1,390 @@
+const fs = require("fs-extra");
+const path = require("path");
+
+/**
+ * Create Blog Services
+ */
+async function createServices(config) {
+  const blogService = `import { Injectable, signal, computed } from '@angular/core';
+
+export interface Author {
+  id: number;
+  name: string;
+  avatar: string;
+  bio: string;
+  social?: {
+    twitter?: string;
+    github?: string;
+    linkedin?: string;
+  };
+}
+
+export interface Post {
+  id: number;
+  slug: string;
+  title: string;
+  excerpt: string;
+  content: string;
+  coverImage: string;
+  author: Author;
+  category: string;
+  tags: string[];
+  publishedAt: Date;
+  updatedAt?: Date;
+  readingTime: number;
+  featured?: boolean;
+}
+
+export interface Comment {
+  id: number;
+  postId: number;
+  author: string;
+  email: string;
+  content: string;
+  createdAt: Date;
+  replies?: Comment[];
+}
+
+@Injectable({ providedIn: 'root' })
+export class BlogService {
+  private postsSignal = signal<Post[]>(this.getMockPosts());
+  private commentsSignal = signal<Comment[]>(this.getMockComments());
+
+  posts = this.postsSignal.asReadonly();
+  comments = this.commentsSignal.asReadonly();
+
+  categories = computed(() => {
+    const cats = new Set(this.postsSignal().map(p => p.category));
+    return Array.from(cats);
+  });
+
+  tags = computed(() => {
+    const allTags = this.postsSignal().flatMap(p => p.tags);
+    return Array.from(new Set(allTags));
+  });
+
+  featuredPosts = computed(() =>
+    this.postsSignal().filter(p => p.featured).slice(0, 3)
+  );
+
+  recentPosts = computed(() =>
+    [...this.postsSignal()]
+      .sort((a, b) => new Date(b.publishedAt).getTime() - new Date(a.publishedAt).getTime())
+      .slice(0, 5)
+  );
+
+  getPostBySlug(slug: string): Post | undefined {
+    return this.postsSignal().find(p => p.slug === slug);
+  }
+
+  getPostsByCategory(category: string): Post[] {
+    return this.postsSignal().filter(p => p.category === category);
+  }
+
+  getPostsByTag(tag: string): Post[] {
+    return this.postsSignal().filter(p => p.tags.includes(tag));
+  }
+
+  getPostsByAuthor(authorId: number): Post[] {
+    return this.postsSignal().filter(p => p.author.id === authorId);
+  }
+
+  getRelatedPosts(post: Post, limit = 3): Post[] {
+    return this.postsSignal()
+      .filter(p => p.id !== post.id && (p.category === post.category || p.tags.some(t => post.tags.includes(t))))
+      .slice(0, limit);
+  }
+
+  searchPosts(query: string): Post[] {
+    const q = query.toLowerCase();
+    return this.postsSignal().filter(p =>
+      p.title.toLowerCase().includes(q) ||
+      p.excerpt.toLowerCase().includes(q) ||
+      p.tags.some(t => t.toLowerCase().includes(q))
+    );
+  }
+
+  getCommentsByPostId(postId: number): Comment[] {
+    return this.commentsSignal().filter(c => c.postId === postId);
+  }
+
+  addComment(comment: Omit<Comment, 'id' | 'createdAt'>): void {
+    const newComment: Comment = {
+      ...comment,
+      id: Date.now(),
+      createdAt: new Date(),
+    };
+    this.commentsSignal.update(comments => [...comments, newComment]);
+  }
+
+  private getMockPosts(): Post[] {
+    const authors: Author[] = [
+      {
+        id: 1,
+        name: 'Sarah Johnson',
+        avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=150',
+        bio: 'Senior Frontend Developer passionate about Angular and modern web technologies.',
+        social: { twitter: 'sarahj', github: 'sarahj' }
+      },
+      {
+        id: 2,
+        name: 'Michael Chen',
+        avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150',
+        bio: 'Full-stack developer and tech blogger. Love sharing knowledge.',
+        social: { twitter: 'mchen', linkedin: 'michaelchen' }
+      },
+      {
+        id: 3,
+        name: 'Emily Davis',
+        avatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=150',
+        bio: 'UX/UI Designer turned developer. Bridging design and code.',
+        social: { github: 'emilyd' }
+      },
+    ];
+
+    return [
+      {
+        id: 1,
+        slug: 'getting-started-with-angular-signals',
+        title: 'Getting Started with Angular Signals',
+        excerpt: 'Learn how to use Angular Signals for reactive state management in your applications.',
+        content: \`# Getting Started with Angular Signals
+
+Angular Signals represent a new way to handle reactive state in Angular applications. They provide a simpler, more predictable way to manage state compared to traditional approaches.
+
+## What are Signals?
+
+Signals are reactive primitives that hold a value and notify consumers when that value changes. They're similar to observables but with a simpler API.
+
+\\\`\\\`\\\`typescript
+import { signal, computed } from '@angular/core';
+
+// Create a signal
+const count = signal(0);
+
+// Read the value
+console.log(count()); // 0
+
+// Update the value
+count.set(1);
+count.update(v => v + 1);
+
+// Create computed signals
+const doubled = computed(() => count() * 2);
+\\\`\\\`\\\`
+
+## Benefits of Signals
+
+1. **Simplicity**: No need to manage subscriptions
+2. **Performance**: Fine-grained reactivity
+3. **Debugging**: Easier to trace state changes
+4. **Integration**: Works seamlessly with Angular's change detection
+
+## Conclusion
+
+Signals are a powerful addition to Angular's reactive toolkit. Start using them today!\`,
+        coverImage: 'https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=800',
+        author: authors[0],
+        category: 'Angular',
+        tags: ['Angular', 'Signals', 'State Management', 'Tutorial'],
+        publishedAt: new Date('2025-01-15'),
+        readingTime: 5,
+        featured: true,
+      },
+      {
+        id: 2,
+        slug: 'tailwind-css-v4-whats-new',
+        title: "Tailwind CSS v4: What's New",
+        excerpt: 'Explore the exciting new features in Tailwind CSS v4 including the new @theme directive.',
+        content: \`# Tailwind CSS v4: What's New
+
+Tailwind CSS v4 brings significant improvements to how we style our applications. Let's explore the key changes.
+
+## The @theme Directive
+
+The new @theme directive allows you to define your design tokens directly in CSS:
+
+\\\`\\\`\\\`css
+@theme {
+  --color-primary-500: #3b82f6;
+  --color-secondary-500: #06b6d4;
+}
+\\\`\\\`\\\`
+
+## Lightning CSS Integration
+
+Tailwind v4 now uses Lightning CSS for faster builds and better CSS processing.
+
+## No More Config File
+
+You can now configure Tailwind entirely through CSS, no JavaScript config needed!
+
+## Conclusion
+
+Tailwind v4 is a major step forward for utility-first CSS.\`,
+        coverImage: 'https://images.unsplash.com/photo-1507721999472-8ed4421c4af2?w=800',
+        author: authors[1],
+        category: 'CSS',
+        tags: ['Tailwind', 'CSS', 'Frontend', 'Styling'],
+        publishedAt: new Date('2025-01-10'),
+        readingTime: 4,
+        featured: true,
+      },
+      {
+        id: 3,
+        slug: 'building-accessible-components',
+        title: 'Building Accessible Components',
+        excerpt: 'A comprehensive guide to creating accessible Angular components that work for everyone.',
+        content: \`# Building Accessible Components
+
+Accessibility (a11y) is crucial for creating inclusive web applications. Here's how to build accessible Angular components.
+
+## Key Principles
+
+1. **Semantic HTML**: Use the right elements
+2. **Keyboard Navigation**: Everything should be keyboard accessible
+3. **ARIA Labels**: Provide context for screen readers
+4. **Color Contrast**: Ensure readable text
+
+## Testing Accessibility
+
+Use tools like axe-core and Lighthouse to audit your components.\`,
+        coverImage: 'https://images.unsplash.com/photo-1573164713714-d95e436ab8d6?w=800',
+        author: authors[2],
+        category: 'Accessibility',
+        tags: ['Accessibility', 'A11y', 'Angular', 'Components'],
+        publishedAt: new Date('2025-01-05'),
+        readingTime: 6,
+      },
+      {
+        id: 4,
+        slug: 'typescript-best-practices-2025',
+        title: 'TypeScript Best Practices for 2025',
+        excerpt: 'Modern TypeScript patterns and best practices to write cleaner, safer code.',
+        content: \`# TypeScript Best Practices for 2025
+
+TypeScript continues to evolve. Here are the best practices for writing modern TypeScript.
+
+## Use Strict Mode
+
+Always enable strict mode in your tsconfig.
+
+## Prefer Unknown Over Any
+
+Use unknown instead of any for better type safety.
+
+## Conclusion
+
+Following these practices will make your TypeScript code more maintainable and type-safe.\`,
+        coverImage: 'https://images.unsplash.com/photo-1516116216624-53e697fedbea?w=800',
+        author: authors[0],
+        category: 'TypeScript',
+        tags: ['TypeScript', 'JavaScript', 'Best Practices'],
+        publishedAt: new Date('2025-01-01'),
+        readingTime: 7,
+        featured: true,
+      },
+      {
+        id: 5,
+        slug: 'state-management-patterns',
+        title: 'State Management Patterns in Angular',
+        excerpt: 'Compare different state management approaches: Services, Signals, NgRx, and more.',
+        content: \`# State Management Patterns in Angular
+
+Choosing the right state management approach is crucial. Let's compare the options.
+
+## Simple Service with Signals
+
+Best for small to medium apps.
+
+## NgRx for Complex Apps
+
+When you need predictable state with time-travel debugging.
+
+## Conclusion
+
+Start simple with signals, scale to NgRx when needed.\`,
+        coverImage: 'https://images.unsplash.com/photo-1558494949-ef010cbdcc31?w=800',
+        author: authors[1],
+        category: 'Angular',
+        tags: ['Angular', 'State Management', 'NgRx', 'Signals'],
+        publishedAt: new Date('2024-12-28'),
+        readingTime: 8,
+      },
+      {
+        id: 6,
+        slug: 'responsive-design-techniques',
+        title: 'Modern Responsive Design Techniques',
+        excerpt: 'Master responsive design with CSS Grid, Flexbox, and container queries.',
+        content: \`# Modern Responsive Design Techniques
+
+Responsive design has evolved. Here are modern techniques to create adaptive layouts.
+
+## CSS Grid
+
+Perfect for two-dimensional layouts.
+
+## Container Queries
+
+Style based on container size, not viewport.
+
+## Conclusion
+
+Combine these techniques for truly responsive designs.\`,
+        coverImage: 'https://images.unsplash.com/photo-1517292987719-0369a794ec0f?w=800',
+        author: authors[2],
+        category: 'CSS',
+        tags: ['CSS', 'Responsive', 'Grid', 'Flexbox'],
+        publishedAt: new Date('2024-12-20'),
+        readingTime: 5,
+      },
+    ];
+  }
+
+  private getMockComments(): Comment[] {
+    return [
+      {
+        id: 1,
+        postId: 1,
+        author: 'John Doe',
+        email: 'john@example.com',
+        content: 'Great article! Signals have really simplified my state management.',
+        createdAt: new Date('2025-01-16'),
+        replies: [
+          {
+            id: 2,
+            postId: 1,
+            author: 'Sarah Johnson',
+            email: 'sarah@example.com',
+            content: 'Thanks John! Glad you found it helpful.',
+            createdAt: new Date('2025-01-16'),
+          }
+        ]
+      },
+      {
+        id: 3,
+        postId: 1,
+        author: 'Jane Smith',
+        email: 'jane@example.com',
+        content: 'Could you write a follow-up about computed signals?',
+        createdAt: new Date('2025-01-17'),
+      },
+      {
+        id: 4,
+        postId: 2,
+        author: 'Alex Turner',
+        email: 'alex@example.com',
+        content: 'The @theme directive is a game changer!',
+        createdAt: new Date('2025-01-11'),
+      },
+    ];
+  }
+}`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, "src/app/core/services/blog.service.ts"),
+    blogService
+  );
+}
+
+module.exports = { createServices };

package/lib/templates/dashboard/app.js

@@ -0,0 +1,320 @@
+const fs = require("fs-extra");
+const path = require("path");
+
+/**
+ * Create routing configuration
+ */
+async function createRouting(config) {
+  const routesFile = `import { Routes } from '@angular/router';
+import { DashboardLayoutComponent } from './layout/dashboard/dashboard-layout.component';
+
+export const routes: Routes = [
+  {
+    path: '',
+    redirectTo: 'dashboard',
+    pathMatch: 'full',
+  },
+  {
+    path: 'dashboard',
+    component: DashboardLayoutComponent,
+    children: [
+      {
+        path: '',
+        loadComponent: () =>
+          import('./features/dashboard/overview/overview.component').then(
+            (c) => c.OverviewComponent
+          ),
+      },
+      {
+        path: 'analytics',
+        loadComponent: () =>
+          import('./features/dashboard/analytics/analytics.component').then(
+            (c) => c.AnalyticsComponent
+          ),
+      },
+      {
+        path: 'users',
+        loadComponent: () =>
+          import('./features/dashboard/users/users.component').then(
+            (c) => c.UsersComponent
+          ),
+      },
+      {
+        path: 'orders',
+        loadComponent: () =>
+          import('./features/dashboard/orders/orders.component').then(
+            (c) => c.OrdersComponent
+          ),
+      },
+      {
+        path: 'settings',
+        loadComponent: () =>
+          import('./features/dashboard/settings/settings.component').then(
+            (c) => c.SettingsComponent
+          ),
+      },
+    ],
+  },
+  {
+    path: '**',
+    redirectTo: 'dashboard',
+  },
+];`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, "src/app/app.routes.ts"),
+    routesFile
+  );
+}
+
+/**
+ * Create app configuration
+ */
+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';
+
+// Translation loader factory
+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,
+      ])
+    ),
+    // Translation configuration
+    importProvidersFrom(
+      TranslateModule.forRoot({
+        loader: {
+          provide: TranslateLoader,
+          useFactory: HttpLoaderFactory,
+          deps: [HttpClient]
+        }
+      })
+    ),
+  ],
+};`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, "src/app/app.config.ts"),
+    appConfigFile
+  );
+}
+
+/**
+ * Create app component
+ */
+async function createAppComponent(config) {
+  const appTs = `import { Component, inject } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+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, ToastComponent, ModalComponent],
+  templateUrl: './app.html',
+})
+export class App {
+  // Inject translation service to initialize it at app startup
+  private translationService = inject(TranslationService);
+  title = '${config.projectName}';
+}`;
+
+  const appHtml = `<router-outlet />
+<app-toast />
+<app-modal />
+`;
+
+  await fs.writeFile(path.join(config.fullPath, "src/app/app.ts"), appTs);
+  await fs.writeFile(path.join(config.fullPath, "src/app/app.html"), appHtml);
+}
+
+/**
+ * Create global styles
+ */
+async function createStyles(config) {
+  const stylesFile = `@import "tailwindcss";
+
+/* Custom CSS Variables for theming */
+@theme {
+  /* Primary colors */
+  --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 colors */
+  --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;
+
+  /* Accent colors */
+  --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 colors */
+  --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;
+
+  /* Warning colors */
+  --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;
+
+  /* Danger colors */
+  --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;
+
+  /* Info colors */
+  --color-info-50: #ecfeff;
+  --color-info-100: #cffafe;
+  --color-info-200: #a5f3fc;
+  --color-info-300: #67e8f9;
+  --color-info-400: #22d3ee;
+  --color-info-500: #06b6d4;
+  --color-info-600: #0891b2;
+  --color-info-700: #0e7490;
+  --color-info-800: #155e75;
+  --color-info-900: #164e63;
+  --color-info-950: #083344;
+}
+
+/* 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;
+}
+
+/* RTL Support */
+html[dir="rtl"] {
+  direction: rtl;
+}
+
+html[dir="ltr"] {
+  direction: ltr;
+}`;
+
+  await fs.writeFile(path.join(config.fullPath, "src/styles.css"), stylesFile);
+}
+
+/**
+ * Install i18n packages
+ */
+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 {
+    // Add to package.json if skipInstall
+    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,
+};