@salas-ds/cli 0.1.0 → 0.2.0

package/templates/angular/datepicker/datepicker.component.ts

@@ -0,0 +1,660 @@
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  forwardRef,
+  OnInit,
+  ViewChild,
+  ElementRef,
+  HostListener,
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import { cn } from '../utils';
+import { LucideAngularModule } from 'lucide-angular';
+import { CommonModule } from '@angular/common';
+
+/**
+ * DatePicker component types
+ */
+
+export type DatePickerMode = 'single' | 'range' | 'multiple';
+export type DatePickerVariant = 'default' | 'error' | 'success';
+export type DatePickerSize = 'sm' | 'md' | 'lg';
+
+export interface DatePickerProps {
+  mode?: DatePickerMode;
+  variant?: DatePickerVariant;
+  size?: DatePickerSize;
+  disabled?: boolean;
+  required?: boolean;
+  placeholder?: string;
+  value?: Date | Date[] | { from?: Date; to?: Date };
+  minDate?: Date;
+  maxDate?: Date;
+  name?: string;
+  id?: string;
+  locale?: string;
+  format?: string;
+  showTime?: boolean;
+  showWeekNumbers?: boolean;
+}
+
+
+interface CalendarDay {
+  date: Date;
+  isCurrentMonth: boolean;
+  isToday: boolean;
+  isSelected: boolean;
+  isInRange?: boolean;
+  isRangeStart?: boolean;
+  isRangeEnd?: boolean;
+  isDisabled: boolean;
+}
+
+@Component({
+  selector: 'salas-datepicker',
+  standalone: true,
+  imports: [FormsModule, CommonModule, LucideAngularModule],
+  template: `
+    <div [class]="wrapperClasses" #wrapper>
+      <div [class]="inputWrapperClasses">
+        <lucide-icon name="calendar" [size]="iconSize" class="salas-datepicker-icon" />
+        <input
+          [id]="id"
+          [name]="name"
+          [disabled]="disabled"
+          [required]="required"
+          [placeholder]="placeholder"
+          [class]="inputClasses"
+          [value]="displayValue"
+          (mousedown)="onInputMouseDown($event)"
+          (focus)="onFocus()"
+          (blur)="onBlur()"
+          readonly
+          [attr.aria-invalid]="variant === 'error'"
+          [attr.aria-expanded]="isOpen"
+        />
+        @if (displayValue && !disabled) {
+          <button
+            type="button"
+            class="salas-datepicker-clear"
+            (click)="clearValue($event)"
+            aria-label="Clear"
+          >
+            <lucide-icon name="x" [size]="iconSize" />
+          </button>
+        }
+      </div>
+
+      @if (isOpen) {
+        <div [class]="calendarClasses">
+          <div class="salas-datepicker-header">
+            <button
+              type="button"
+              class="salas-datepicker-nav"
+              (click)="previousMonth()"
+              aria-label="Previous month"
+            >
+              ‹
+            </button>
+            <div class="salas-datepicker-month-year">
+              {{ currentMonthLabel }} {{ currentYear }}
+            </div>
+            <button
+              type="button"
+              class="salas-datepicker-nav"
+              (click)="nextMonth()"
+              aria-label="Next month"
+            >
+              ›
+            </button>
+          </div>
+
+          <div class="salas-datepicker-weekdays">
+            @for (day of weekDays; track day) {
+              <div class="salas-datepicker-weekday">{{ day }}</div>
+            }
+          </div>
+
+          <div class="salas-datepicker-days">
+            @for (day of calendarDays; track day.date.getTime()) {
+              <button
+                type="button"
+                [class]="getDayClasses(day)"
+                [disabled]="day.isDisabled"
+                (click)="selectDate(day.date)"
+              >
+                {{ day.date.getDate() }}
+              </button>
+            }
+          </div>
+        </div>
+      }
+    </div>
+  `,
+  styles: [`
+    .salas-datepicker-wrapper {
+      position: relative;
+      display: inline-block;
+      width: 100%;
+    }
+
+    .salas-datepicker-input-wrapper {
+      position: relative;
+      display: flex;
+      align-items: center;
+    }
+
+    .salas-datepicker {
+      width: 100%;
+      border-radius: 0.375rem;
+      border: 1px solid var(--salas-gray-300);
+      background-color: white;
+      padding: 0 0.75rem;
+      padding-left: 2.5rem;
+      font-size: 0.875rem;
+      transition: all 0.2s;
+      outline: none;
+      cursor: pointer;
+    }
+
+    .salas-datepicker:focus {
+      border-color: var(--salas-primary-500);
+      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+    }
+
+    .salas-datepicker:disabled {
+      background-color: var(--salas-gray-50);
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+
+    .salas-datepicker-icon {
+      position: absolute;
+      left: 0.75rem;
+      color: var(--salas-gray-400);
+      pointer-events: none;
+      z-index: 1;
+    }
+
+    .salas-datepicker-clear {
+      position: absolute;
+      right: 0.75rem;
+      cursor: pointer;
+      pointer-events: all;
+      background: none;
+      border: none;
+      padding: 0.25rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--salas-gray-400);
+      z-index: 1;
+    }
+
+    .salas-datepicker-clear:hover {
+      color: var(--salas-gray-600);
+    }
+
+    /* Variants */
+    .salas-datepicker--error {
+      border-color: var(--salas-destructive-500);
+    }
+
+    .salas-datepicker--error:focus {
+      border-color: var(--salas-destructive-500);
+      box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+    }
+
+    .salas-datepicker--success {
+      border-color: var(--salas-success-500);
+    }
+
+    .salas-datepicker--success:focus {
+      border-color: var(--salas-success-500);
+      box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
+    }
+
+    /* Sizes */
+    .salas-datepicker--sm {
+      height: 2rem;
+      padding: 0 0.625rem;
+      padding-left: 2rem;
+      font-size: 0.8125rem;
+    }
+
+    .salas-datepicker--md {
+      height: 2.5rem;
+    }
+
+    .salas-datepicker--lg {
+      height: 3rem;
+      padding: 0 1rem;
+      padding-left: 2.75rem;
+      font-size: 1rem;
+    }
+
+    /* Calendar */
+    .salas-datepicker-calendar {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      margin-top: 0.25rem;
+      background-color: white;
+      border: 1px solid var(--salas-gray-200);
+      border-radius: 0.375rem;
+      box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+      padding: 1rem;
+      z-index: 1000;
+      min-width: 18rem;
+    }
+
+    .salas-datepicker-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 1rem;
+    }
+
+    .salas-datepicker-month-year {
+      font-weight: 600;
+      font-size: 0.875rem;
+    }
+
+    .salas-datepicker-nav {
+      background: none;
+      border: none;
+      cursor: pointer;
+      padding: 0.25rem 0.5rem;
+      font-size: 1.25rem;
+      color: var(--salas-gray-600);
+      border-radius: 0.25rem;
+    }
+
+    .salas-datepicker-nav:hover {
+      background-color: var(--salas-gray-100);
+    }
+
+    .salas-datepicker-weekdays {
+      display: grid;
+      grid-template-columns: repeat(7, 1fr);
+      gap: 0.25rem;
+      margin-bottom: 0.5rem;
+    }
+
+    .salas-datepicker-weekday {
+      text-align: center;
+      font-size: 0.75rem;
+      font-weight: 500;
+      color: var(--salas-gray-500);
+      padding: 0.25rem;
+    }
+
+    .salas-datepicker-days {
+      display: grid;
+      grid-template-columns: repeat(7, 1fr);
+      gap: 0.25rem;
+    }
+
+    .salas-datepicker-day {
+      aspect-ratio: 1;
+      border: none;
+      background: none;
+      cursor: pointer;
+      border-radius: 0.25rem;
+      font-size: 0.875rem;
+      color: var(--salas-gray-900);
+      transition: all 0.2s;
+    }
+
+    .salas-datepicker-day:hover:not(:disabled) {
+      background-color: var(--salas-gray-100);
+    }
+
+    .salas-datepicker-day--other-month {
+      color: var(--salas-gray-400);
+    }
+
+    .salas-datepicker-day--today {
+      font-weight: 600;
+      color: var(--salas-primary-600);
+    }
+
+    .salas-datepicker-day--selected {
+      background-color: var(--salas-primary-500);
+      color: white;
+    }
+
+    .salas-datepicker-day--selected:hover {
+      background-color: var(--salas-primary-600);
+    }
+
+    .salas-datepicker-day--in-range {
+      background-color: var(--salas-primary-50);
+    }
+
+    .salas-datepicker-day--range-start,
+    .salas-datepicker-day--range-end {
+      background-color: var(--salas-primary-500);
+      color: white;
+    }
+
+    .salas-datepicker-day:disabled {
+      opacity: 0.3;
+      cursor: not-allowed;
+    }
+  `],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => SalasDatepickerComponent),
+      multi: true,
+    },
+  ],
+})
+export class SalasDatepickerComponent implements ControlValueAccessor, OnInit, DatePickerProps {
+  @ViewChild('wrapper', { static: true }) wrapper!: ElementRef<HTMLElement>;
+
+  @Input() mode: DatePickerMode = 'single';
+  @Input() variant: DatePickerVariant = 'default';
+  @Input() size: DatePickerSize = 'md';
+  @Input() disabled = false;
+  @Input() required = false;
+  @Input() placeholder = 'Select date';
+  @Input() value?: Date | Date[] | { from?: Date; to?: Date };
+  @Input() minDate?: Date;
+  @Input() maxDate?: Date;
+  @Input() name = '';
+  @Input() id = '';
+  @Input() locale = 'en-US';
+  @Input() format = 'MM/dd/yyyy';
+  @Input() showTime = false;
+  @Input() showWeekNumbers = false;
+
+  @Output() valueChange = new EventEmitter<Date | Date[] | { from?: Date; to?: Date }>();
+
+  isOpen = false;
+  currentMonth = new Date().getMonth();
+  currentYear = new Date().getFullYear();
+  calendarDays: CalendarDay[] = [];
+  weekDays = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+  displayValue = '';
+
+  private onChange = (value: Date | Date[] | { from?: Date; to?: Date }) => {};
+  private onTouched = () => {};
+
+  ngOnInit(): void {
+    this.generateCalendar();
+    this.updateDisplayValue();
+  }
+
+  @HostListener('document:click', ['$event'])
+  onClickOutside(event: MouseEvent): void {
+    if (!this.wrapper.nativeElement.contains(event.target as Node)) {
+      this.isOpen = false;
+    }
+  }
+
+  get wrapperClasses(): string {
+    return cn('salas-datepicker-wrapper');
+  }
+
+  get inputWrapperClasses(): string {
+    return cn('salas-datepicker-input-wrapper');
+  }
+
+  get inputClasses(): string {
+    return cn(
+      'salas-datepicker',
+      `salas-datepicker--${this.size}`,
+      this.variant !== 'default' && `salas-datepicker--${this.variant}`
+    );
+  }
+
+  get calendarClasses(): string {
+    return cn('salas-datepicker-calendar');
+  }
+
+  get iconSize(): number {
+    return this.size === 'sm' ? 16 : this.size === 'lg' ? 20 : 18;
+  }
+
+  get currentMonthLabel(): string {
+    return new Date(this.currentYear, this.currentMonth).toLocaleDateString(this.locale, {
+      month: 'long',
+    });
+  }
+
+  generateCalendar(): void {
+    const firstDay = new Date(this.currentYear, this.currentMonth, 1);
+    const lastDay = new Date(this.currentYear, this.currentMonth + 1, 0);
+    const startDate = new Date(firstDay);
+    startDate.setDate(startDate.getDate() - startDate.getDay());
+
+    const days: CalendarDay[] = [];
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+
+    for (let i = 0; i < 42; i++) {
+      const date = new Date(startDate);
+      date.setDate(startDate.getDate() + i);
+
+      const isCurrentMonth = date.getMonth() === this.currentMonth;
+      const isToday = this.isSameDay(date, today);
+      const isSelected = this.isDateSelected(date);
+      const isDisabled = this.isDateDisabled(date);
+
+      days.push({
+        date,
+        isCurrentMonth,
+        isToday,
+        isSelected,
+        isDisabled,
+      });
+    }
+
+    this.calendarDays = days;
+  }
+
+  isSameDay(date1: Date, date2: Date): boolean {
+    return (
+      date1.getFullYear() === date2.getFullYear() &&
+      date1.getMonth() === date2.getMonth() &&
+      date1.getDate() === date2.getDate()
+    );
+  }
+
+  isDateSelected(date: Date): boolean {
+    if (!this.value) return false;
+
+    if (this.mode === 'single' && this.value instanceof Date) {
+      return this.isSameDay(date, this.value);
+    }
+
+    if (this.mode === 'multiple' && Array.isArray(this.value)) {
+      return this.value.some(d => this.isSameDay(date, d));
+    }
+
+    if (this.mode === 'range' && typeof this.value === 'object' && 'from' in this.value) {
+      const range = this.value as { from?: Date; to?: Date };
+      if (range.from && this.isSameDay(date, range.from)) return true;
+      if (range.to && this.isSameDay(date, range.to)) return true;
+      if (range.from && range.to) {
+        return date >= range.from && date <= range.to;
+      }
+    }
+
+    return false;
+  }
+
+  isDateDisabled(date: Date): boolean {
+    if (this.minDate && date < this.minDate) return true;
+    if (this.maxDate && date > this.maxDate) return true;
+    return false;
+  }
+
+  getDayClasses(day: CalendarDay): string {
+    return cn(
+      'salas-datepicker-day',
+      !day.isCurrentMonth && 'salas-datepicker-day--other-month',
+      day.isToday && 'salas-datepicker-day--today',
+      day.isSelected && 'salas-datepicker-day--selected'
+    );
+  }
+
+  selectDate(date: Date): void {
+    if (this.isDateDisabled(date)) return;
+
+    if (this.mode === 'single') {
+      this.value = date;
+      this.displayValue = this.formatDate(date);
+      this.isOpen = false;
+    } else if (this.mode === 'multiple') {
+      const values = Array.isArray(this.value) ? [...this.value] : [];
+      const index = values.findIndex(d => this.isSameDay(d, date));
+      if (index >= 0) {
+        values.splice(index, 1);
+      } else {
+        values.push(date);
+      }
+      this.value = values;
+      this.displayValue = values.map(d => this.formatDate(d)).join(', ');
+    } else if (this.mode === 'range') {
+      const range = (this.value && typeof this.value === 'object' && 'from' in this.value
+        ? { ...(this.value as { from?: Date; to?: Date }) }
+        : {}) as { from?: Date; to?: Date };
+
+      if (!range.from || (range.from && range.to)) {
+        range.from = date;
+        range.to = undefined;
+      } else if (range.from && !range.to) {
+        if (date < range.from) {
+          range.to = range.from;
+          range.from = date;
+        } else {
+          range.to = date;
+        }
+        this.isOpen = false;
+      }
+
+      this.value = range;
+      if (range.from && range.to) {
+        this.displayValue = `${this.formatDate(range.from)} - ${this.formatDate(range.to)}`;
+      } else if (range.from) {
+        this.displayValue = this.formatDate(range.from);
+      }
+    }
+
+    if (this.value !== undefined) {
+      this.onChange(this.value);
+      this.valueChange.emit(this.value);
+    }
+    this.generateCalendar();
+  }
+
+  formatDate(date: Date): string {
+    return date.toLocaleDateString(this.locale);
+  }
+
+  updateDisplayValue(): void {
+    if (!this.value) {
+      this.displayValue = '';
+      return;
+    }
+
+    if (this.mode === 'single' && this.value instanceof Date) {
+      this.displayValue = this.formatDate(this.value);
+    } else if (this.mode === 'multiple' && Array.isArray(this.value)) {
+      this.displayValue = this.value.map(d => this.formatDate(d)).join(', ');
+    } else if (this.mode === 'range' && typeof this.value === 'object' && 'from' in this.value) {
+      const range = this.value as { from?: Date; to?: Date };
+      if (range.from && range.to) {
+        this.displayValue = `${this.formatDate(range.from)} - ${this.formatDate(range.to)}`;
+      } else if (range.from) {
+        this.displayValue = this.formatDate(range.from);
+      }
+    }
+  }
+
+  onInputMouseDown(event: MouseEvent): void {
+    // Prevenir o blur quando clica no input
+    event.preventDefault();
+    if (!this.disabled) {
+      this.isOpen = !this.isOpen;
+    }
+  }
+
+  toggleCalendar(): void {
+    if (!this.disabled) {
+      this.isOpen = !this.isOpen;
+    }
+  }
+
+  onFocus(): void {
+    if (!this.disabled) {
+      this.isOpen = true;
+    }
+  }
+
+  onBlur(): void {
+    // Delay para permitir cliques no calendário antes de fechar
+    setTimeout(() => {
+      // Verificar se o elemento ativo ainda está dentro do wrapper
+      const activeElement = document.activeElement;
+      if (!this.wrapper.nativeElement.contains(activeElement)) {
+        this.isOpen = false;
+        this.onTouched();
+      }
+    }, 300);
+  }
+
+  clearValue(event: Event): void {
+    event.stopPropagation();
+    this.value = undefined;
+    this.displayValue = '';
+    // Não chamar onChange com undefined, apenas emitir o evento
+    this.valueChange.emit(undefined as any);
+    this.generateCalendar();
+    this.generateCalendar();
+  }
+
+  previousMonth(): void {
+    if (this.currentMonth === 0) {
+      this.currentMonth = 11;
+      this.currentYear--;
+    } else {
+      this.currentMonth--;
+    }
+    this.generateCalendar();
+  }
+
+  nextMonth(): void {
+    if (this.currentMonth === 11) {
+      this.currentMonth = 0;
+      this.currentYear++;
+    } else {
+      this.currentMonth++;
+    }
+    this.generateCalendar();
+  }
+
+  // ControlValueAccessor implementation
+  writeValue(value: Date | Date[] | { from?: Date; to?: Date }): void {
+    this.value = value;
+    this.updateDisplayValue();
+    this.generateCalendar();
+  }
+
+  registerOnChange(fn: (value: Date | Date[] | { from?: Date; to?: Date }) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+}

package/templates/angular/datepicker/datepicker.module.ts

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

package/templates/angular/dialog/dialog-content.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'salas-dialog-content',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+  styles: [`:host { display: contents; }`],
+})
+export class SalasDialogContentComponent {}

package/templates/angular/dialog/dialog-description.component.ts

@@ -0,0 +1,17 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'salas-dialog-description',
+  standalone: true,
+  encapsulation: ViewEncapsulation.None,
+  template: `<p class="salas-dialog-description"><ng-content></ng-content></p>`,
+  styles: [`
+    .salas-dialog-description {
+      margin: 0.375rem 0 0;
+      font-size: 0.875rem;
+      line-height: 1.5;
+      color: var(--salas-text-muted);
+    }
+  `],
+})
+export class SalasDialogDescriptionComponent {}

package/templates/angular/dialog/dialog-footer.component.ts

@@ -0,0 +1,17 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'salas-dialog-footer',
+  standalone: true,
+  encapsulation: ViewEncapsulation.None,
+  template: `<div class="salas-dialog-footer"><ng-content></ng-content></div>`,
+  styles: [`
+    .salas-dialog-footer {
+      margin-top: 1.5rem;
+      display: flex;
+      justify-content: flex-end;
+      gap: 0.5rem;
+    }
+  `],
+})
+export class SalasDialogFooterComponent {}