create-ng-tailwind 1.0.0 → 2.0.2

package/lib/templates/starter/ui-features.js

@@ -0,0 +1,437 @@
+const fs = require("fs-extra");
+const path = require("path");
+
+// ==================== MODAL SERVICE & COMPONENT ====================
+
+async function createModalService(config) {
+  const modalService = `import { Injectable, signal } from '@angular/core';
+
+export interface ModalData {
+  message?: string;
+  type?: 'confirm' | 'alert' | 'custom';
+  [key: string]: unknown;
+}
+
+export interface ModalConfig {
+  title?: string;
+  data?: ModalData;
+  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+  closeOnBackdrop?: boolean;
+  closeOnEscape?: boolean;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ModalService {
+  // Reactive signals for modal state
+  isOpen = signal(false);
+  modalConfig = signal<ModalConfig | null>(null);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  private resolve: ((value: any) => void) | null = null;
+
+  /**
+   * Open a modal with configuration
+   */
+  open<T = boolean>(config: ModalConfig): Promise<T> {
+    this.modalConfig.set(config);
+    this.isOpen.set(true);
+
+    return new Promise<T>((resolve) => {
+      this.resolve = resolve as (value: unknown) => void;
+    });
+  }
+
+  /**
+   * Close the modal with optional result
+   */
+  close<T = boolean>(result?: T): void {
+    this.isOpen.set(false);
+    this.modalConfig.set(null);
+
+    if (this.resolve) {
+      this.resolve(result);
+      this.resolve = null;
+    }
+  }
+
+  /**
+   * Show a confirmation dialog
+   */
+  async confirm(message: string, title = 'Confirm'): Promise<boolean> {
+    const result = await this.open({
+      title,
+      data: { message, type: 'confirm' },
+      size: 'sm',
+      closeOnBackdrop: false
+    });
+
+    return result === true;
+  }
+
+  /**
+   * Show an alert dialog
+   */
+  async alert(message: string, title = 'Alert'): Promise<void> {
+    await this.open({
+      title,
+      data: { message, type: 'alert' },
+      size: 'sm',
+      closeOnBackdrop: true
+    });
+  }
+}`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, "src/app/core/services/modal.service.ts"),
+    modalService,
+  );
+}
+
+async function createModalComponent(config) {
+  const modalComponent = `import { Component, inject, HostListener } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ModalService } from '@core/services/modal.service';
+import { ButtonComponent } from '@shared/components/button/button.component';
+
+@Component({
+  selector: 'app-modal',
+  imports: [CommonModule, ButtonComponent],
+  template: \`
+    @if (modalService.isOpen()) {
+      <!-- Backdrop -->
+      <div
+        class="fixed inset-0 [backdrop-filter:blur(2px)] bg-[#4a494b4d] z-40 transition-opacity"
+        (click)="onBackdropClick()"
+        role="presentation"
+        tabindex="-1"
+        (keydown)="onBackdropKeydown($event)">
+      </div>
+
+      <!-- Modal Container -->
+      <div class="fixed inset-0 z-50 overflow-y-auto">
+        <div class="flex min-h-full items-center justify-center p-4">
+          <!-- Modal Content -->
+          <div
+            [class]="getModalClasses()"
+            class="relative bg-white rounded-lg shadow-xl transform transition-all animate-fade-in">
+
+            <!-- Header -->
+            @if (modalService.modalConfig()?.title) {
+              <div class="border-b border-gray-200 px-6 py-4">
+                <div class="flex items-center justify-between">
+                  <h3 class="text-xl font-semibold text-gray-900">
+                    {{ modalService.modalConfig()?.title }}
+                  </h3>
+                  <button
+                    (click)="modalService.close()"
+                    class="text-gray-400 hover:text-gray-600 transition-colors">
+                    <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                    </svg>
+                  </button>
+                </div>
+              </div>
+            }
+
+            <!-- Body -->
+            <div class="px-6 py-4">
+              @if (getModalType() === 'confirm' || getModalType() === 'alert') {
+                <p class="text-gray-700">{{ getModalMessage() }}</p>
+              } @else {
+                <!-- Custom component content would go here -->
+                <div>
+                  <p class="text-gray-600">Modal content goes here</p>
+                </div>
+              }
+            </div>
+
+            <!-- Footer -->
+            @if (getModalType() === 'confirm') {
+              <div class="border-t border-gray-200 px-6 py-4 flex justify-end space-x-3">
+                <app-button
+                  variant="secondary"
+                  (click)="modalService.close(false)">
+                  Cancel
+                </app-button>
+                <app-button
+                  (click)="modalService.close(true)">
+                  Confirm
+                </app-button>
+              </div>
+            } @else if (getModalType() === 'alert') {
+              <div class="border-t border-gray-200 px-6 py-4 flex justify-end">
+                <app-button
+                  (click)="modalService.close()">
+                  OK
+                </app-button>
+              </div>
+            }
+          </div>
+        </div>
+      </div>
+    }
+  \`,
+  styles: [\`
+    @keyframes fade-in {
+      from {
+        opacity: 0;
+        transform: scale(0.95);
+      }
+      to {
+        opacity: 1;
+        transform: scale(1);
+      }
+    }
+
+    .animate-fade-in {
+      animation: fade-in 0.2s ease-out;
+    }
+  \`]
+})
+export class ModalComponent {
+  modalService = inject(ModalService);
+
+  @HostListener('document:keydown.escape')
+  onEscapeKey(): void {
+    const config = this.modalService.modalConfig();
+    if (config?.closeOnEscape !== false) {
+      this.modalService.close();
+    }
+  }
+
+  onBackdropClick(): void {
+    const config = this.modalService.modalConfig();
+    if (config?.closeOnBackdrop !== false) {
+      this.modalService.close();
+    }
+  }
+
+  onBackdropKeydown(event: KeyboardEvent): void {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      this.onBackdropClick();
+    }
+  }
+
+  getModalClasses(): string {
+    const size = this.modalService.modalConfig()?.size || 'md';
+    const sizeClasses = {
+      sm: 'max-w-sm',
+      md: 'max-w-md',
+      lg: 'max-w-lg',
+      xl: 'max-w-xl',
+      full: 'max-w-full mx-4'
+    };
+
+    return \`w-full \${sizeClasses[size]}\`;
+  }
+
+  getModalType(): string | undefined {
+    return this.modalService.modalConfig()?.data?.type;
+  }
+
+  getModalMessage(): string {
+    return this.modalService.modalConfig()?.data?.message || '';
+  }
+}`;
+
+  await fs.writeFile(
+    path.join(
+      config.fullPath,
+      "src/app/shared/components/modal/modal.component.ts",
+    ),
+    modalComponent,
+  );
+}
+
+// ==================== ADDITIONAL PIPES ====================
+
+async function createTruncatePipe(config) {
+  const truncatePipe = `import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'truncate',
+  pure: true
+})
+export class TruncatePipe implements PipeTransform {
+  transform(value: string, limit = 50, completeWords = false, ellipsis = '...'): string {
+    if (!value) return '';
+
+    if (value.length <= limit) {
+      return value;
+    }
+
+    if (completeWords) {
+      limit = value.substring(0, limit).lastIndexOf(' ');
+    }
+
+    return value.substring(0, limit) + ellipsis;
+  }
+}`;
+
+  await fs.writeFile(
+    path.join(config.fullPath, "src/app/shared/pipes/truncate.pipe.ts"),
+    truncatePipe,
+  );
+}
+
+// ==================== ADDITIONAL DIRECTIVES ====================
+
+async function createClickOutsideDirective(config) {
+  const clickOutsideDirective = `import { Directive, ElementRef, EventEmitter, HostListener, Output, inject } from '@angular/core';
+
+@Directive({
+  selector: '[appClickOutside]',
+  standalone: true
+})
+export class ClickOutsideDirective {
+  @Output() appClickOutside = new EventEmitter<void>();
+
+  private elementRef = inject(ElementRef);
+
+  @HostListener('document:click', ['$event'])
+  onClick(event: MouseEvent): void {
+    const target = event.target as HTMLElement;
+
+    if (!target) {
+      return;
+    }
+
+    const clickedInside = this.elementRef.nativeElement.contains(target);
+
+    if (!clickedInside) {
+      this.appClickOutside.emit();
+    }
+  }
+}`;
+
+  await fs.writeFile(
+    path.join(
+      config.fullPath,
+      "src/app/shared/directives/click-outside.directive.ts",
+    ),
+    clickOutsideDirective,
+  );
+}
+
+async function createTooltipDirective(config) {
+  const tooltipDirective = `import { Directive, ElementRef, HostListener, Input, Renderer2, inject, OnDestroy } from '@angular/core';
+
+@Directive({
+  selector: '[appTooltip]',
+  standalone: true
+})
+export class TooltipDirective implements OnDestroy {
+  @Input() appTooltip = '';
+  @Input() tooltipPosition: 'top' | 'bottom' | 'left' | 'right' = 'top';
+
+  private elementRef = inject(ElementRef);
+  private renderer = inject(Renderer2);
+  private tooltipElement: HTMLElement | null = null;
+
+  @HostListener('mouseenter')
+  onMouseEnter(): void {
+    if (!this.appTooltip) return;
+
+    this.createTooltip();
+  }
+
+  @HostListener('mouseleave')
+  onMouseLeave(): void {
+    this.removeTooltip();
+  }
+
+  ngOnDestroy(): void {
+    this.removeTooltip();
+  }
+
+  private createTooltip(): void {
+    // Create tooltip element
+    this.tooltipElement = this.renderer.createElement('div');
+    this.renderer.addClass(this.tooltipElement, 'tooltip');
+    this.renderer.addClass(this.tooltipElement, 'absolute');
+    this.renderer.addClass(this.tooltipElement, 'z-50');
+    this.renderer.addClass(this.tooltipElement, 'px-3');
+    this.renderer.addClass(this.tooltipElement, 'py-2');
+    this.renderer.addClass(this.tooltipElement, 'text-sm');
+    this.renderer.addClass(this.tooltipElement, 'text-white');
+    this.renderer.addClass(this.tooltipElement, 'bg-gray-900');
+    this.renderer.addClass(this.tooltipElement, 'rounded-lg');
+    this.renderer.addClass(this.tooltipElement, 'shadow-lg');
+    this.renderer.addClass(this.tooltipElement, 'whitespace-nowrap');
+    this.renderer.addClass(this.tooltipElement, 'pointer-events-none');
+
+    // Set tooltip text
+    const text = this.renderer.createText(this.appTooltip);
+    this.renderer.appendChild(this.tooltipElement, text);
+
+    // Append to body
+    this.renderer.appendChild(document.body, this.tooltipElement);
+
+    // Position tooltip
+    this.positionTooltip();
+  }
+
+  private positionTooltip(): void {
+    if (!this.tooltipElement) return;
+
+    const hostPos = this.elementRef.nativeElement.getBoundingClientRect();
+    const tooltipPos = this.tooltipElement.getBoundingClientRect();
+
+    let top = 0;
+    let left = 0;
+
+    switch (this.tooltipPosition) {
+      case 'top':
+        top = hostPos.top - tooltipPos.height - 8;
+        left = hostPos.left + (hostPos.width - tooltipPos.width) / 2;
+        break;
+      case 'bottom':
+        top = hostPos.bottom + 8;
+        left = hostPos.left + (hostPos.width - tooltipPos.width) / 2;
+        break;
+      case 'left':
+        top = hostPos.top + (hostPos.height - tooltipPos.height) / 2;
+        left = hostPos.left - tooltipPos.width - 8;
+        break;
+      case 'right':
+        top = hostPos.top + (hostPos.height - tooltipPos.height) / 2;
+        left = hostPos.right + 8;
+        break;
+    }
+
+    this.renderer.setStyle(this.tooltipElement, 'top', \`\${top}px\`);
+    this.renderer.setStyle(this.tooltipElement, 'left', \`\${left}px\`);
+  }
+
+  private removeTooltip(): void {
+    if (this.tooltipElement) {
+      this.renderer.removeChild(document.body, this.tooltipElement);
+      this.tooltipElement = null;
+    }
+  }
+}`;
+
+  await fs.writeFile(
+    path.join(
+      config.fullPath,
+      "src/app/shared/directives/tooltip.directive.ts",
+    ),
+    tooltipDirective,
+  );
+}
+
+// Export all functions
+module.exports = {
+  // Modal System
+  createModalService,
+  createModalComponent,
+
+  // Pipes
+  createTruncatePipe,
+
+  // Directives
+  createClickOutsideDirective,
+  createTooltipDirective,
+};