create-ng-tailwind 3.1.0 → 4.1.0

package/lib/templates/base/components.js

@@ -0,0 +1,243 @@
+const fs = require('fs-extra');
+const path = require('path');
+
+/**
+ * Create Button Component
+ */
+async function createButtonComponent(config) {
+  const buttonComponent = `import { Component, Input, Output, EventEmitter } from '@angular/core';
+
+export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+
+@Component({
+  selector: 'app-button',
+  standalone: true,
+  imports: [],
+  template: \`
+    <button
+      [class]="buttonClasses"
+      [disabled]="disabled || loading"
+      (click)="handleClick($event)"
+      [type]="type">
+
+      @if (loading) {
+        <svg class="animate-spin -ml-1 mr-3 h-4 w-4" fill="none" viewBox="0 0 24 24">
+          <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" class="opacity-25"></circle>
+          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+        </svg>
+      }
+
+      <ng-content></ng-content>
+    </button>
+  \`
+})
+export class ButtonComponent {
+  @Input() variant: ButtonVariant = 'primary';
+  @Input() size: ButtonSize = 'md';
+  @Input() disabled = false;
+  @Input() loading = false;
+  @Input() type: 'button' | 'submit' | 'reset' = 'button';
+  @Input() fullWidth = false;
+
+  @Output() clicked = new EventEmitter<Event>();
+
+  get buttonClasses(): string {
+    const baseClasses = 'inline-flex items-center justify-center font-medium rounded-lg transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50';
+
+    const sizeClasses = {
+      sm: 'text-sm px-3 py-2 h-9',
+      md: 'text-sm px-4 py-2 h-10',
+      lg: 'text-base px-8 py-3 h-11'
+    };
+
+    const variantClasses = {
+      primary: 'bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500',
+      secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-400',
+      outline: 'border-2 border-primary-600 text-primary-600 hover:bg-primary-600 hover:text-white focus:ring-primary-500',
+      ghost: 'hover:bg-gray-100 hover:text-gray-900 focus:ring-gray-400',
+      danger: 'bg-danger-600 text-white hover:bg-danger-700 focus:ring-danger-500'
+    };
+
+    const widthClass = this.fullWidth ? 'w-full' : '';
+
+    return \`\${baseClasses} \${sizeClasses[this.size]} \${variantClasses[this.variant]} \${widthClass}\`.trim();
+  }
+
+  handleClick(event: Event): void {
+    if (!this.disabled && !this.loading) {
+      this.clicked.emit(event);
+    }
+  }
+}`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, 'src/app/shared/components/button/button.component.ts'),
+    buttonComponent
+  );
+}
+
+/**
+ * Create Card Component
+ */
+async function createCardComponent(config) {
+  const cardComponent = `import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-card',
+  standalone: true,
+  imports: [],
+  template: \`
+    <div [class]="cardClasses">
+      @if (title || subtitle) {
+        <div class="px-6 py-4 border-b border-gray-200">
+          @if (title) {
+            <h3 class="text-lg font-semibold text-gray-900">
+              {{ title }}
+            </h3>
+          }
+          @if (subtitle) {
+            <p class="text-sm text-gray-600 mt-1">
+              {{ subtitle }}
+            </p>
+          }
+        </div>
+      }
+
+      <div [class]="contentClasses">
+        <ng-content></ng-content>
+      </div>
+
+      @if (hasFooter) {
+        <div class="px-6 py-4 border-t border-gray-200 bg-gray-50">
+          <ng-content select="[slot=footer]"></ng-content>
+        </div>
+      }
+    </div>
+  \`
+})
+export class CardComponent {
+  @Input() title?: string;
+  @Input() subtitle?: string;
+  @Input() padding = true;
+  @Input() shadow = true;
+  @Input() hover = false;
+  @Input() hasFooter = false;
+
+  get cardClasses(): string {
+    const baseClasses = 'bg-white border border-gray-200 rounded-lg overflow-hidden';
+    const shadowClasses = this.shadow ? 'shadow-sm' : '';
+    const hoverClasses = this.hover ? 'hover:shadow-md transition-shadow duration-200' : '';
+
+    return \`\${baseClasses} \${shadowClasses} \${hoverClasses}\`.trim();
+  }
+
+  get contentClasses(): string {
+    return this.padding ? 'p-6' : '';
+  }
+}`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, 'src/app/shared/components/card/card.component.ts'),
+    cardComponent
+  );
+}
+
+/**
+ * Create Loading Spinner Component
+ */
+async function createLoadingSpinnerComponent(config) {
+  const spinnerComponent = `import { Component, Input } from '@angular/core';
+
+export type SpinnerSize = 'sm' | 'md' | 'lg' | 'xl';
+
+@Component({
+  selector: 'app-loading-spinner',
+  standalone: true,
+  imports: [],
+  template: \`
+    <div [class]="containerClasses">
+      <svg [class]="spinnerClasses" fill="none" viewBox="0 0 24 24">
+        <circle
+          cx="12" cy="12" r="10"
+          stroke="currentColor"
+          stroke-width="4"
+          class="opacity-25">
+        </circle>
+        <path
+          class="opacity-75"
+          fill="currentColor"
+          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
+        </path>
+      </svg>
+      @if (text) {
+        <span [class]="textClasses">{{ text }}</span>
+      }
+    </div>
+  \`
+})
+export class LoadingSpinnerComponent {
+  @Input() size: SpinnerSize = 'md';
+  @Input() text?: string;
+  @Input() centered = false;
+  @Input() color = 'primary';
+
+  private readonly sizeClasses = {
+    sm: 'h-4 w-4',
+    md: 'h-8 w-8',
+    lg: 'h-12 w-12',
+    xl: 'h-16 w-16'
+  } as const;
+
+  private readonly colorClasses = {
+    primary: 'text-primary-600',
+    secondary: 'text-secondary-600',
+    accent: 'text-accent-600',
+    success: 'text-success-600',
+    danger: 'text-danger-600',
+    warning: 'text-warning-600',
+    info: 'text-info-600',
+    gray: 'text-gray-600',
+    white: 'text-white'
+  } as const;
+
+  protected readonly textClasses = 'text-sm text-gray-600';
+
+  get containerClasses(): string {
+    const baseClasses = 'flex items-center';
+    const centerClasses = this.centered ? 'justify-center' : '';
+    const directionClasses = this.text ? 'flex-col space-y-2' : '';
+
+    return \`\${baseClasses} \${centerClasses} \${directionClasses}\`.trim();
+  }
+
+  get spinnerClasses(): string {
+    const baseClasses = 'animate-spin';
+    return \`\${baseClasses} \${this.sizeClasses[this.size]} \${this.colorClasses[this.color as keyof typeof this.colorClasses] || this.colorClasses.primary}\`.trim();
+  }
+}`;
+
+  await fs.writeFile(
+    path.join(
+      config.fullPath,
+      'src/app/shared/components/loading-spinner/loading-spinner.component.ts'
+    ),
+    spinnerComponent
+  );
+}
+
+/**
+ * Create all shared components
+ */
+async function createSharedComponents(config) {
+  await createButtonComponent(config);
+  await createCardComponent(config);
+  await createLoadingSpinnerComponent(config);
+}
+
+module.exports = {
+  createButtonComponent,
+  createCardComponent,
+  createLoadingSpinnerComponent,
+  createSharedComponents,
+};

package/lib/templates/base/index.js

@@ -0,0 +1,207 @@
+const fs = require('fs-extra');
+const path = require('path');
+
+// Import modular components
+const { createCoreServices } = require('./services');
+const { createSharedComponents } = require('./components');
+const {
+  createDirectoryStructure,
+  createEnvironments,
+  createGuards,
+  createModels,
+  createPipes,
+} = require('./infrastructure');
+const {
+  createVSCodeSettings,
+  updateTsConfig,
+  setupLinting,
+  formatCode,
+} = require('./linting');
+const { setupPWA } = require('./pwa');
+
+// Import existing modular components
+const {
+  createAuthInterceptor,
+  createErrorInterceptor,
+  createLoadingInterceptor,
+  createCachingInterceptor,
+  createToastService,
+  createToastComponent,
+  createLoadingService,
+  createCacheService,
+} = require('./advanced-features');
+
+const {
+  createModalService,
+  createModalComponent,
+  createTruncatePipe,
+  createClickOutsideDirective,
+  createTooltipDirective,
+} = require('./ui-features');
+
+const { createSEOService, createStructuredDataUtil, createRobotsTxt } = require('./seo-features');
+
+const {
+  createDefaultOGImage,
+  createFavicon,
+  createAppleTouchIcon,
+  createAndroidIcon,
+  createAndroidIconLarge,
+  createLogo,
+} = require('./seo-assets');
+
+/**
+ * Base Template
+ * Contains all core infrastructure: services, guards, interceptors, pipes, directives, etc.
+ * UI templates (starter, dashboard, ecommerce) extend this base.
+ */
+const base = {
+  info: {
+    name: 'Base',
+    description: 'Core infrastructure template with services, guards, interceptors, and shared components',
+    features: [
+      'Modern standalone Angular 20+ architecture with signals',
+      'HTTP Interceptors (Auth, Error, Loading, Caching)',
+      'Core services (API, Auth, Storage, Cache, Loading, SEO)',
+      'Toast/Notification system with auto-dismiss',
+      'Modal/Dialog system with confirm & alert',
+      'Essential UI components (Button, Card, Spinner, Toast, Modal)',
+      'Truncate pipe for text truncation',
+      'Useful Directives (ClickOutside, Tooltip)',
+      'TypeScript interfaces and models',
+      'ESLint + Prettier + simple-git-hooks (pre-commit)',
+      'PWA-ready with service worker configuration',
+      'Icons library (@ng-icons/heroicons)',
+    ],
+  },
+
+  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();
+      }
+    };
+
+    // Create core infrastructure
+    if (spinner) spinner.update('Setting up base project structure...');
+    await createDirectoryStructure(config);
+    await createEnvironments(config);
+    await createCoreServices(config);
+    await this.createSEOFeatures(config);
+    await this.createHttpInterceptors(config);
+    await createGuards(config);
+    await createSharedComponents(config);
+    await createLoadingService(config);
+    await createCacheService(config);
+    await this.createToastSystem(config);
+    await this.createModalSystem(config);
+    await createPipes(config);
+    await this.createAdditionalPipes(config);
+    await this.createDirectives(config);
+    await createModels(config);
+    await createVSCodeSettings(config);
+    await updateTsConfig(config);
+    await setupLinting(config);
+    await setupPWA(config);
+
+    if (spinner) spinner.stop();
+
+    // Show base template summary
+    console.log('');
+    completeStep('Core infrastructure configured');
+    completeStep('HTTP interceptors (Auth, Error, Loading, Cache)');
+    completeStep('Core services (9 services including SEO)');
+    completeStep('UI components (Button, Card, Toast, Modal, Spinner)');
+    completeStep('Utility pipes & directives');
+    completeStep('PWA support configured');
+    completeStep('ESLint + Prettier + simple-git-hooks');
+  },
+
+  async createSEOFeatures(config) {
+    // Create SEO Service
+    const seoService = createSEOService();
+    await fs.writeFile(
+      path.join(config.fullPath, 'src/app/core/services/seo.service.ts'),
+      seoService
+    );
+
+    // Create Structured Data Utility
+    const structuredDataUtil = createStructuredDataUtil();
+    await fs.writeFile(
+      path.join(config.fullPath, 'src/app/core/utils/structured-data.ts'),
+      structuredDataUtil
+    );
+
+    // Create robots.txt in public folder
+    const robotsTxt = createRobotsTxt();
+    await fs.writeFile(path.join(config.fullPath, 'public/robots.txt'), robotsTxt);
+
+    // Create default OG image (SVG as placeholder)
+    const ogImage = createDefaultOGImage(config.projectName);
+    await fs.writeFile(path.join(config.fullPath, 'public/assets/images/og-default.svg'), ogImage);
+
+    // Create favicon
+    const favicon = createFavicon(config.projectName);
+    await fs.writeFile(path.join(config.fullPath, 'public/favicon.svg'), favicon);
+
+    // Create Apple Touch Icon (SVG as placeholder)
+    const appleTouchIcon = createAppleTouchIcon(config.projectName);
+    await fs.writeFile(
+      path.join(config.fullPath, 'public/assets/icons/apple-touch-icon.svg'),
+      appleTouchIcon
+    );
+
+    // Create Android Chrome icons (SVG as placeholder)
+    const androidIcon = createAndroidIcon(config.projectName);
+    await fs.writeFile(
+      path.join(config.fullPath, 'public/assets/icons/android-chrome-192x192.svg'),
+      androidIcon
+    );
+
+    const androidIconLarge = createAndroidIconLarge(config.projectName);
+    await fs.writeFile(
+      path.join(config.fullPath, 'public/assets/icons/android-chrome-512x512.svg'),
+      androidIconLarge
+    );
+
+    // Create logo
+    const logo = createLogo(config.projectName);
+    await fs.writeFile(path.join(config.fullPath, 'public/assets/images/logo.svg'), logo);
+  },
+
+  async createHttpInterceptors(config) {
+    await createAuthInterceptor(config);
+    await createErrorInterceptor(config);
+    await createLoadingInterceptor(config);
+    await createCachingInterceptor(config);
+  },
+
+  async createToastSystem(config) {
+    await createToastService(config);
+    await createToastComponent(config);
+  },
+
+  async createModalSystem(config) {
+    await createModalService(config);
+    await createModalComponent(config);
+  },
+
+  async createAdditionalPipes(config) {
+    await createTruncatePipe(config);
+  },
+
+  async createDirectives(config) {
+    await createClickOutsideDirective(config);
+    await createTooltipDirective(config);
+  },
+
+  // Expose formatCode for child templates to use
+  formatCode,
+};
+
+module.exports = base;