@salas-ds/cli 0.1.0 → 0.2.0

package/templates/angular/textarea/textarea.component.ts

@@ -0,0 +1,268 @@
+import { Component, Input, forwardRef, ViewChild, ElementRef, AfterViewInit, ViewEncapsulation } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { cn } from '../utils';
+import { LucideAngularModule } from 'lucide-angular';
+import { CommonModule } from '@angular/common';
+
+/**
+ * Textarea component types
+ */
+
+export type TextareaSize = 'sm' | 'md' | 'lg';
+export type TextareaVariant = 'default' | 'error' | 'success';
+
+export interface TextareaProps {
+  size?: TextareaSize;
+  variant?: TextareaVariant;
+  disabled?: boolean;
+  readonly?: boolean;
+  required?: boolean;
+  placeholder?: string;
+  value?: string;
+  name?: string;
+  id?: string;
+  rows?: number;
+  cols?: number;
+  maxlength?: number;
+  minlength?: number;
+}
+
+
+@Component({
+  selector: 'salas-textarea',
+  standalone: true,
+  imports: [CommonModule, LucideAngularModule],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <div [class]="wrapperClasses">
+      <textarea
+        [id]="id"
+        [name]="name"
+        [placeholder]="placeholder"
+        [disabled]="disabled"
+        [readonly]="readonly"
+        [required]="required"
+        [rows]="rows"
+        [attr.cols]="cols ?? null"
+        [attr.maxlength]="maxlength ?? null"
+        [attr.minlength]="minlength ?? null"
+        [class]="textareaClasses"
+        (input)="onInput($event)"
+        (blur)="onBlur()"
+        (focus)="onFocus()"
+        [attr.aria-invalid]="variant === 'error'"
+        [attr.aria-describedby]="id ? id + '-hint' : null"
+        #textareaRef
+      ></textarea>
+      @if (variant === 'error') {
+        <lucide-icon name="x" [size]="iconSize" class="salas-textarea-icon salas-textarea-icon--error" />
+      }
+      @if (variant === 'success') {
+        <lucide-icon name="check" [size]="iconSize" class="salas-textarea-icon salas-textarea-icon--success" />
+      }
+    </div>
+  `,
+  styles: [`
+    .salas-textarea-wrapper {
+      position: relative;
+      display: inline-block;
+      width: 100%;
+    }
+
+    .salas-textarea {
+      width: 100%;
+      border-radius: 0.375rem;
+      border: 1px solid var(--salas-gray-300);
+      background-color: white;
+      padding: 0.5rem 0.75rem;
+      font-size: 0.875rem;
+      line-height: 1.5;
+      transition: all 0.2s;
+      outline: none;
+      resize: vertical;
+      font-family: inherit;
+      min-height: 5rem;
+    }
+
+    .salas-textarea::placeholder {
+      color: var(--salas-gray-400);
+    }
+
+    .salas-textarea:focus {
+      border-color: var(--salas-primary-500);
+      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+    }
+
+    .salas-textarea:disabled {
+      background-color: var(--salas-gray-50);
+      cursor: not-allowed;
+      opacity: 0.6;
+      resize: none;
+    }
+
+    .salas-textarea:read-only {
+      background-color: var(--salas-gray-50);
+      cursor: default;
+      resize: none;
+    }
+
+    /* Variants */
+    .salas-textarea--error {
+      border-color: var(--salas-destructive-500);
+    }
+
+    .salas-textarea--error:focus {
+      border-color: var(--salas-destructive-500);
+      box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+    }
+
+    .salas-textarea--success {
+      border-color: var(--salas-success-500);
+    }
+
+    .salas-textarea--success:focus {
+      border-color: var(--salas-success-500);
+      box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
+    }
+
+    /* Sizes */
+    .salas-textarea--sm {
+      padding: 0.375rem 0.625rem;
+      font-size: 0.8125rem;
+      min-height: 4rem;
+    }
+
+    .salas-textarea--md {
+      padding: 0.5rem 0.75rem;
+      min-height: 5rem;
+    }
+
+    .salas-textarea--lg {
+      padding: 0.625rem 1rem;
+      font-size: 1rem;
+      min-height: 6rem;
+    }
+
+    .salas-textarea-icon {
+      position: absolute;
+      right: 0.75rem;
+      top: 0.75rem;
+      pointer-events: none;
+    }
+
+    .salas-textarea-icon--error {
+      color: var(--salas-destructive-500);
+    }
+
+    .salas-textarea-icon--success {
+      color: var(--salas-success-500);
+    }
+
+    /* Dark theme */
+    [data-theme='dark'] .salas-textarea {
+      background-color: var(--salas-gray-900);
+      border-color: var(--salas-gray-700);
+      color: var(--salas-text, #fafafa);
+    }
+
+    [data-theme='dark'] .salas-textarea::placeholder {
+      color: var(--salas-gray-500);
+    }
+
+    [data-theme='dark'] .salas-textarea:focus {
+      border-color: var(--salas-primary-500);
+    }
+
+    [data-theme='dark'] .salas-textarea:disabled {
+      background-color: var(--salas-gray-800);
+      opacity: 0.6;
+    }
+
+    [data-theme='dark'] .salas-textarea:read-only {
+      background-color: var(--salas-gray-800);
+    }
+
+    [data-theme='dark'] .salas-textarea--error {
+      border-color: var(--salas-destructive-500);
+    }
+
+    [data-theme='dark'] .salas-textarea--success {
+      border-color: var(--salas-success-500);
+    }
+  `],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => SalasTextareaComponent),
+      multi: true,
+    },
+  ],
+})
+export class SalasTextareaComponent implements ControlValueAccessor, TextareaProps, AfterViewInit {
+  @ViewChild('textareaRef', { static: false }) textareaRef?: ElementRef<HTMLTextAreaElement>;
+
+  @Input() size: TextareaSize = 'md';
+  @Input() variant: TextareaVariant = 'default';
+  @Input() disabled = false;
+  @Input() readonly = false;
+  @Input() required = false;
+  @Input() placeholder = '';
+  @Input() name = '';
+  @Input() id = '';
+  @Input() rows = 4;
+  @Input() cols?: number;
+  @Input() maxlength?: number;
+  @Input() minlength?: number;
+
+  private onChange: (value: string) => void = () => {};
+  private onTouched: () => void = () => {};
+
+  get wrapperClasses(): string {
+    return cn('salas-textarea-wrapper');
+  }
+
+  get textareaClasses(): string {
+    return cn(
+      'salas-textarea',
+      `salas-textarea--${this.size}`,
+      this.variant !== 'default' && `salas-textarea--${this.variant}`
+    );
+  }
+
+  get iconSize(): number {
+    return this.size === 'sm' ? 16 : this.size === 'lg' ? 20 : 18;
+  }
+
+  ngAfterViewInit(): void {}
+
+  onInput(event: Event): void {
+    const target = event.target as HTMLTextAreaElement;
+    this.onChange(target.value);
+  }
+
+  onBlur(): void {
+    this.onTouched();
+  }
+
+  onFocus(): void {}
+
+  // ControlValueAccessor
+  writeValue(value: string | null | undefined): void {
+    const newValue = value ?? '';
+    if (this.textareaRef?.nativeElement) {
+      this.textareaRef.nativeElement.value = newValue;
+    }
+  }
+
+  registerOnChange(fn: (value: string) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+}

package/templates/angular/textarea/textarea.module.ts

@@ -0,0 +1,8 @@
+import { NgModule } from '@angular/core';
+import { SalasTextareaComponent } from './textarea.component';
+
+@NgModule({
+  imports: [SalasTextareaComponent],
+  exports: [SalasTextareaComponent],
+})
+export class SalasTextareaModule {}

package/templates/angular/toast/toast.module.ts

@@ -0,0 +1,8 @@
+import { NgModule } from '@angular/core';
+import { SalasToasterComponent } from './toaster.component';
+
+@NgModule({
+  imports: [SalasToasterComponent],
+  exports: [SalasToasterComponent],
+})
+export class SalasToastModule {}

package/templates/angular/toast/toast.service.ts

@@ -0,0 +1,104 @@
+import { Injectable } from '@angular/core';
+
+export type ToastType = 'default' | 'success' | 'info' | 'warning' | 'error';
+
+export type ToastPosition =
+  | 'top-left'
+  | 'top-center'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-center'
+  | 'bottom-right';
+
+export interface ToastData {
+  id: string;
+  type: ToastType;
+  title: string;
+  description?: string;
+  duration?: number;
+  dismissible?: boolean;
+  action?: {
+    label: string;
+    onClick: () => void;
+  };
+}
+
+export interface ToasterProps {
+  position?: ToastPosition;
+  duration?: number;
+  richColors?: boolean;
+}
+
+
+let toastIdCounter = 0;
+
+@Injectable({ providedIn: 'root' })
+export class SalasToastService {
+  toasts: ToastData[] = [];
+  position: ToastPosition = 'bottom-right';
+  defaultDuration = 4000;
+
+  private listeners: Array<() => void> = [];
+
+  onChange(fn: () => void): () => void {
+    this.listeners.push(fn);
+    return () => {
+      this.listeners = this.listeners.filter((l) => l !== fn);
+    };
+  }
+
+  private notify(): void {
+    this.listeners.forEach((fn) => fn());
+  }
+
+  private addToast(type: ToastType, title: string, options?: Partial<Omit<ToastData, 'id' | 'type' | 'title'>>): string {
+    const id = `toast-${++toastIdCounter}`;
+    const toast: ToastData = {
+      id,
+      type,
+      title,
+      description: options?.description,
+      duration: options?.duration ?? this.defaultDuration,
+      dismissible: options?.dismissible ?? true,
+      action: options?.action,
+    };
+    this.toasts = [...this.toasts, toast];
+    this.notify();
+
+    if (toast.duration && toast.duration > 0) {
+      setTimeout(() => this.dismiss(id), toast.duration);
+    }
+
+    return id;
+  }
+
+  toast(title: string, options?: Partial<Omit<ToastData, 'id' | 'type' | 'title'>>): string {
+    return this.addToast('default', title, options);
+  }
+
+  success(title: string, options?: Partial<Omit<ToastData, 'id' | 'type' | 'title'>>): string {
+    return this.addToast('success', title, options);
+  }
+
+  info(title: string, options?: Partial<Omit<ToastData, 'id' | 'type' | 'title'>>): string {
+    return this.addToast('info', title, options);
+  }
+
+  warning(title: string, options?: Partial<Omit<ToastData, 'id' | 'type' | 'title'>>): string {
+    return this.addToast('warning', title, options);
+  }
+
+  error(title: string, options?: Partial<Omit<ToastData, 'id' | 'type' | 'title'>>): string {
+    return this.addToast('error', title, options);
+  }
+
+  dismiss(id: string): void {
+    this.toasts = this.toasts.filter((t) => t.id !== id);
+    this.notify();
+  }
+
+  dismissAll(): void {
+    this.toasts = [];
+    this.notify();
+  }
+}