@salas-ds/cli 0.1.0 → 0.2.0

package/templates/angular/select/select.component.ts

@@ -0,0 +1,292 @@
+import { Component, Input, Output, EventEmitter, forwardRef, OnInit, OnChanges, SimpleChanges } 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';
+
+/**
+ * Select component types
+ */
+
+export type SelectSize = 'sm' | 'md' | 'lg';
+export type SelectVariant = 'default' | 'error' | 'success';
+
+export interface SelectOption<T = string> {
+  label: string;
+  value: T;
+  disabled?: boolean;
+  group?: string;
+}
+
+export interface SelectProps<T = string> {
+  size?: SelectSize;
+  variant?: SelectVariant;
+  disabled?: boolean;
+  required?: boolean;
+  placeholder?: string;
+  options: SelectOption<T>[];
+  value?: T;
+  name?: string;
+  id?: string;
+  multiple?: boolean;
+}
+
+
+interface GroupedOption<T> {
+  name: string | null;
+  options: SelectOption<T>[];
+}
+
+@Component({
+  selector: 'salas-select',
+  standalone: true,
+  imports: [FormsModule, CommonModule, LucideAngularModule],
+  template: `
+    <div [class]="wrapperClasses">
+      <select
+        [id]="id"
+        [name]="name"
+        [disabled]="disabled"
+        [required]="required"
+        [multiple]="multiple"
+        [class]="selectClasses"
+        [value]="value"
+        (change)="onChange($event)"
+        (blur)="onBlur()"
+        (focus)="onFocus()"
+        [attr.aria-invalid]="variant === 'error'"
+      >
+        @if (placeholder) {
+          <option value="" [disabled]="required">{{ placeholder }}</option>
+        }
+        @for (group of groupedOptions; track group.name) {
+          @if (group.name) {
+            <optgroup [label]="group.name">
+              @for (option of group.options; track option.value) {
+                <option [value]="option.value" [disabled]="option.disabled">
+                  {{ option.label }}
+                </option>
+              }
+            </optgroup>
+          } @else {
+            @for (option of group.options; track option.value) {
+              <option [value]="option.value" [disabled]="option.disabled">
+                {{ option.label }}
+              </option>
+            }
+          }
+        }
+      </select>
+      @if (!multiple) {
+        <lucide-icon name="chevron-down" [size]="iconSize" class="salas-select-icon" />
+      }
+    </div>
+  `,
+  styles: [`
+    .salas-select-wrapper {
+      position: relative;
+      display: inline-block;
+      width: 100%;
+    }
+
+    .salas-select {
+      width: 100%;
+      border-radius: 0.375rem;
+      border: 1px solid var(--salas-gray-300);
+      background-color: white;
+      padding: 0 0.75rem;
+      font-size: 0.875rem;
+      transition: all 0.2s;
+      outline: none;
+      appearance: none;
+      cursor: pointer;
+    }
+
+    .salas-select:focus {
+      border-color: var(--salas-primary-500);
+      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+    }
+
+    .salas-select:disabled {
+      background-color: var(--salas-gray-50);
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+
+    .salas-select option {
+      padding: 0.5rem;
+    }
+
+    /* Variants */
+    .salas-select--error {
+      border-color: var(--salas-destructive-500);
+    }
+
+    .salas-select--error:focus {
+      border-color: var(--salas-destructive-500);
+      box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+    }
+
+    .salas-select--success {
+      border-color: var(--salas-success-500);
+    }
+
+    .salas-select--success:focus {
+      border-color: var(--salas-success-500);
+      box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
+    }
+
+    /* Sizes */
+    .salas-select--sm {
+      height: 2rem;
+      padding: 0 0.625rem;
+      font-size: 0.8125rem;
+    }
+
+    .salas-select--md {
+      height: 2.5rem;
+    }
+
+    .salas-select--lg {
+      height: 3rem;
+      padding: 0 1rem;
+      font-size: 1rem;
+    }
+
+    .salas-select-icon {
+      position: absolute;
+      right: 0.75rem;
+      top: 50%;
+      transform: translateY(-50%);
+      pointer-events: none;
+      color: var(--salas-gray-500);
+    }
+  `],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => SalasSelectComponent),
+      multi: true,
+    },
+  ],
+})
+export class SalasSelectComponent<T = string> implements ControlValueAccessor, OnInit, OnChanges, SelectProps<T> {
+  @Input() size: SelectSize = 'md';
+  @Input() variant: SelectVariant = 'default';
+  @Input() disabled = false;
+  @Input() required = false;
+  @Input() placeholder = '';
+  @Input() options: SelectOption<T>[] = [];
+  @Input() value?: T;
+  @Input() name = '';
+  @Input() id = '';
+  @Input() multiple = false;
+  @Output() valueChange = new EventEmitter<T | T[]>();
+
+  private onValueChange = (value: T | T[]) => {};
+  private onTouched = () => {};
+  groupedOptions: GroupedOption<T>[] = [];
+
+  ngOnInit(): void {
+    this.processGroups();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['options']) {
+      this.processGroups();
+    }
+  }
+
+  get wrapperClasses(): string {
+    return cn('salas-select-wrapper');
+  }
+
+  get selectClasses(): string {
+    return cn(
+      'salas-select',
+      `salas-select--${this.size}`,
+      this.variant !== 'default' && `salas-select--${this.variant}`
+    );
+  }
+
+  get iconSize(): number {
+    return this.size === 'sm' ? 16 : this.size === 'lg' ? 20 : 18;
+  }
+
+  processGroups(): void {
+    const groupsMap = new Map<string | null, SelectOption<T>[]>();
+    
+    // Separar opções com e sem grupo
+    this.options.forEach(option => {
+      const groupName = option.group || null;
+      if (!groupsMap.has(groupName)) {
+        groupsMap.set(groupName, []);
+      }
+      groupsMap.get(groupName)!.push(option);
+    });
+
+    // Converter para array ordenado: primeiro grupos, depois opções sem grupo
+    this.groupedOptions = [];
+    
+    // Adicionar grupos (ordenados alfabeticamente)
+    const groups = Array.from(groupsMap.keys())
+      .filter(name => name !== null)
+      .sort() as string[];
+    
+    groups.forEach(groupName => {
+      this.groupedOptions.push({
+        name: groupName,
+        options: groupsMap.get(groupName)!
+      });
+    });
+
+    // Adicionar opções sem grupo no final
+    if (groupsMap.has(null)) {
+      this.groupedOptions.push({
+        name: null,
+        options: groupsMap.get(null)!
+      });
+    }
+  }
+
+  onChange(event: Event): void {
+    const target = event.target as HTMLSelectElement;
+    if (this.multiple) {
+      const selectedValues = Array.from(target.selectedOptions).map(
+        option => option.value as T
+      );
+      this.value = selectedValues as any;
+      this.onChange(selectedValues as any);
+      this.valueChange.emit(selectedValues as any);
+    } else {
+      this.value = target.value as T;
+      this.onValueChange(this.value);
+      this.valueChange.emit(this.value);
+    }
+  }
+
+  onBlur(): void {
+    this.onTouched();
+  }
+
+  onFocus(): void {
+    // Can be extended for focus handling
+  }
+
+  // ControlValueAccessor implementation
+  writeValue(value: T | T[]): void {
+    this.value = value as T;
+  }
+
+  registerOnChange(fn: (value: T | T[]) => void): void {
+    this.onValueChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+}

package/templates/angular/select/select.module.ts

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

package/templates/angular/separator/separator.component.ts

@@ -0,0 +1,63 @@
+import { Component, Input } from '@angular/core';
+import { cn } from '../utils';
+
+export type SeparatorOrientation = 'horizontal' | 'vertical';
+
+export interface SeparatorProps {
+  orientation?: SeparatorOrientation;
+  /**
+   * When true, hides the separator from assistive technologies.
+   */
+  decorative?: boolean;
+}
+
+
+@Component({
+  selector: 'salas-separator',
+  standalone: true,
+  imports: [],
+  template: `
+    <div
+      [class]="separatorClasses"
+      [attr.role]="decorative ? 'none' : 'separator'"
+      [attr.aria-orientation]="orientation === 'vertical' ? 'vertical' : 'horizontal'"
+      [attr.aria-hidden]="decorative ? 'true' : null"
+    ></div>
+  `,
+  styles: [`
+    :host {
+      display: block;
+    }
+
+    .salas-separator {
+      box-sizing: border-box;
+      background-color: var(--salas-gray-200);
+      border-radius: 9999px;
+      width: 100%;
+      height: 1px;
+    }
+
+    .salas-separator--vertical {
+      width: 1px;
+      height: 100%;
+      align-self: stretch;
+    }
+
+    /* Dark mode: slightly lighter line for contrast */
+    :host-context([data-theme="dark"]) .salas-separator {
+      background-color: var(--salas-gray-200);
+    }
+  `],
+})
+export class SalasSeparatorComponent implements SeparatorProps {
+  @Input() orientation: SeparatorOrientation = 'horizontal';
+  @Input() decorative = false;
+
+  get separatorClasses(): string {
+    return cn(
+      'salas-separator',
+      this.orientation === 'vertical' && 'salas-separator--vertical',
+    );
+  }
+}
+

package/templates/angular/separator/separator.module.ts

@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core';
+import { SalasSeparatorComponent } from './separator.component';
+
+@NgModule({
+  imports: [SalasSeparatorComponent],
+  exports: [SalasSeparatorComponent],
+})
+export class SalasSeparatorModule {}
+

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

@@ -0,0 +1,13 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'salas-sheet-content',
+  standalone: true,
+  imports: [],
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    style: 'display: flex; flex-direction: column; flex: 1; padding: 1.5rem;',
+  },
+  template: `<ng-content></ng-content>`,
+})
+export class SalasSheetContentComponent {}

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

@@ -0,0 +1,29 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'salas-sheet-description',
+  standalone: true,
+  imports: [],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <p class="salas-sheet-description">
+      <ng-content></ng-content>
+    </p>
+  `,
+  styles: [`
+    salas-sheet-description {
+      display: block;
+    }
+
+    .salas-sheet-description {
+      margin: 0;
+      font-size: 0.875rem;
+      color: var(--salas-gray-500, #71717a);
+    }
+
+    [data-theme='dark'] .salas-sheet-description {
+      color: var(--salas-gray-400, #a1a1aa);
+    }
+  `],
+})
+export class SalasSheetDescriptionComponent {}

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

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

package/templates/angular/sheet/sheet-header.component.ts

@@ -0,0 +1,26 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'salas-sheet-header',
+  standalone: true,
+  imports: [],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <div class="salas-sheet-header">
+      <ng-content></ng-content>
+    </div>
+  `,
+  styles: [`
+    salas-sheet-header {
+      display: block;
+    }
+
+    .salas-sheet-header {
+      display: flex;
+      flex-direction: column;
+      gap: 0.375rem;
+      margin-bottom: 1.5rem;
+    }
+  `],
+})
+export class SalasSheetHeaderComponent {}

package/templates/angular/sheet/sheet-title.component.ts

@@ -0,0 +1,31 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'salas-sheet-title',
+  standalone: true,
+  imports: [],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <h3 class="salas-sheet-title">
+      <ng-content></ng-content>
+    </h3>
+  `,
+  styles: [`
+    salas-sheet-title {
+      display: block;
+    }
+
+    .salas-sheet-title {
+      margin: 0;
+      font-size: 1.125rem;
+      font-weight: 600;
+      line-height: 1;
+      color: var(--salas-text, #111827);
+    }
+
+    [data-theme='dark'] .salas-sheet-title {
+      color: var(--salas-gray-100, #f4f4f5);
+    }
+  `],
+})
+export class SalasSheetTitleComponent {}

package/templates/angular/sheet/sheet-trigger.component.ts

@@ -0,0 +1,11 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'salas-sheet-trigger',
+  standalone: true,
+  imports: [],
+  encapsulation: ViewEncapsulation.None,
+  host: { style: 'display: inline-block;' },
+  template: `<ng-content></ng-content>`,
+})
+export class SalasSheetTriggerComponent {}