matcha-components 20.12.0 → 20.15.0

package/src/lib/matcha-tabs/tabs.stories.ts

@@ -0,0 +1,98 @@
+import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { MatchaTooltipModule } from '../matcha-tooltip/tooltip.module';
+import { MatchaTitleModule } from '../matcha-title/title.module';
+import { MatchaButtonModule } from '../matcha-button/button.module';
+import { MatchaDividerModule } from '../matcha-divider/divider.module';
+import { MatchaIconModule } from '../matcha-icon/icon.module';
+import { MatchaTabsModule } from './tabs.module';
+export default {
+    title: 'Components / Tabs',
+    decorators: [
+        applicationConfig({
+            providers: [provideAnimations()],
+        }),
+
+        moduleMetadata({
+            imports: [
+                CommonModule,
+                MatchaTabsModule,
+                MatchaTitleModule,
+                MatchaTooltipModule,
+                MatchaButtonModule,
+                MatchaIconModule,
+                MatchaDividerModule
+            ],
+        }),
+    ],
+    tags: ['autodocs'],
+    args: {
+        title: 'Título do Tab',
+        icon: 'home',
+        active: false,
+        content: 'Conteúdo do Tab',
+    },
+    parameters: {
+        controls: { expanded: true },
+    },
+} as Meta;
+
+/**
+ * Para Importar o componente, use o seguinte comando:
+ *
+ * ```typescript
+ * import {MatchaTabsModule} from 'matcha-components/tabs';
+ * ```
+ */
+export const TabsControls: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+        template: `
+        <matcha-tabs>
+            <matcha-tab icon="note-out"
+                ${args['title'] ? `title="${args['title']}"` : ''}
+                ${args['icon'] ? `icon="${args['icon']}"` : ''}
+            >
+                ${args['content'] ? `<p>${args['content']}</p>` : ''}
+            </matcha-tab>
+
+            <matcha-tab title="Informações" icon="info-out" active>
+            <p>Conteúdo da Aba 2</p>
+            </matcha-tab>
+        
+            <matcha-tab title="Ingressos" icon="events-out">
+            <p>Conteúdo da Aba 3</p>
+            </matcha-tab>
+        
+            <matcha-tab title="Inscrições" icon="note-out">
+            <p>Conteúdo da Aba 4</p>
+            </matcha-tab>
+        </matcha-tabs>
+        `,
+
+    }),
+    name: 'Tabs Controls',
+};
+export const TabsDisabled: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+        template: `
+            <matcha-tabs gap="0" inactiveColor="grey" inactiveType="basic" disabled="true">
+                <matcha-tab-item>
+                    <button matcha-button alpha color="blue" size="tiny">Criar</button>
+                </matcha-tab-item>
+
+                <matcha-tab-item>
+                    <button matcha-button alpha color="blue" size="tiny" active-item>Buscar</button>
+                </matcha-tab-item>
+            </matcha-tabs>
+        `,
+
+    }),
+    name: 'Tabs Disabled',
+};

package/src/lib/matcha-time/time/time.component.html

@@ -0,0 +1,3 @@
+<div class="d-flex gap-16">
+  <ng-content></ng-content>
+</div>

package/src/lib/matcha-time/time/time.component.ts

@@ -0,0 +1,141 @@
+import { AfterContentInit, Component, ContentChildren, Input, OnDestroy, QueryList } from '@angular/core';
+import { AbstractControl, NgControl } from '@angular/forms';
+import { Subscription } from 'rxjs';
+
+@Component({
+  selector: 'matcha-time',
+  templateUrl: './time.component.html',
+  styleUrls: ['./time.component.scss'],
+  standalone: false
+})
+export class MatchaTimeComponent implements AfterContentInit, OnDestroy {
+  @ContentChildren(NgControl, { descendants: true }) controls!: QueryList<NgControl>;
+  
+  // Adiciona inputs para integração com campos de data
+  @Input() startDateControlName?: string;
+  @Input() endDateControlName?: string;
+  
+  // Opção para desabilitar a validação quando dias são diferentes
+  @Input() allowCrossDays: boolean = false;
+
+  private startTimeControl: AbstractControl | null = null;
+  private endTimeControl: AbstractControl | null = null;
+  private startDateControl: AbstractControl | null = null;
+  private endDateControl: AbstractControl | null = null;
+  private subscription = new Subscription();
+
+  ngAfterContentInit(): void {
+    // Pega os controles projetados no template
+    const controlsArray = this.controls.toArray();
+    if (controlsArray.length >= 2) {
+      this.startTimeControl = controlsArray[0].control;
+      this.endTimeControl = controlsArray[1].control;
+      
+      // Tenta encontrar os controles de data no form parent
+      if (this.startTimeControl && this.endTimeControl && 
+          this.startDateControlName && this.endDateControlName) {
+        const formGroup = this.startTimeControl.parent;
+        if (formGroup) {
+          this.startDateControl = formGroup.get(this.startDateControlName);
+          this.endDateControl = formGroup.get(this.endDateControlName);
+        }
+      }
+
+      // Adiciona validação para os campos de tempo
+      if (this.startTimeControl && this.endTimeControl) {
+        this.subscription.add(
+          this.startTimeControl.valueChanges.subscribe(() => this.validateTimeRange())
+        );
+        this.subscription.add(
+          this.endTimeControl.valueChanges.subscribe(() => this.validateTimeRange())
+        );
+      }
+      
+      // Adiciona validação para os campos de data, se existirem
+      if (this.startDateControl && this.endDateControl) {
+        this.subscription.add(
+          this.startDateControl.valueChanges.subscribe(() => this.validateTimeRange())
+        );
+        this.subscription.add(
+          this.endDateControl.valueChanges.subscribe(() => this.validateTimeRange())
+        );
+      }
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe();
+  }
+
+  /**
+   * Validação de intervalo de tempo que pode cruzar dias
+   */
+  private validateTimeRange(): void {
+    if (!this.startTimeControl || !this.endTimeControl) return;
+    if (!this.startTimeControl.value || !this.endTimeControl.value) return;
+
+    let startDateTime: Date;
+    let endDateTime: Date;
+    
+    // Se temos controles de data, usamos as datas fornecidas
+    if (this.startDateControl?.value && this.endDateControl?.value) {
+      const startDate = this.startDateControl.value;
+      const endDate = this.endDateControl.value;
+      
+      startDateTime = new Date(`${startDate}T${this.startTimeControl.value}`);
+      endDateTime = new Date(`${endDate}T${this.endTimeControl.value}`);
+      
+      // Comparação de data + hora
+      if (startDateTime > endDateTime) {
+        this.setValidationErrors();
+      } else {
+        this.clearValidationErrors();
+      }
+    } 
+    // Sem controles de data, ou se allowCrossDays=true, não validamos cruzamento de dias
+    else if (this.allowCrossDays) {
+      // Nesse caso, assumimos que o intervalo é válido mesmo se hora final < hora inicial
+      this.clearValidationErrors();
+    } 
+    // Caso tradicional: mesmo dia, validação simples de hora
+    else {
+      const today = new Date().toISOString().split('T')[0];
+      startDateTime = new Date(`${today}T${this.startTimeControl.value}`);
+      endDateTime = new Date(`${today}T${this.endTimeControl.value}`);
+      
+      if (startDateTime > endDateTime) {
+        this.setValidationErrors();
+      } else {
+        this.clearValidationErrors();
+      }
+    }
+  }
+  
+  /**
+   * Define erros de validação nos controles
+   */
+  private setValidationErrors(): void {
+    this.startTimeControl?.setErrors({ ['startAfterEnd']: true });
+    this.endTimeControl?.setErrors({ ['endBeforeStart']: true });
+  }
+  
+  /**
+   * Remove erros específicos de validação
+   */
+  private clearValidationErrors(): void {
+    this.removeSpecificError(this.startTimeControl, 'startAfterEnd');
+    this.removeSpecificError(this.endTimeControl, 'endBeforeStart');
+  }
+
+  /**
+   * Remove um erro específico sem afetar outros erros
+   */
+  private removeSpecificError(control: AbstractControl | null, errorName: string): void {
+    if (!control) return;
+    const errors = { ...control.errors };
+    if (errors) {
+      delete errors[errorName];
+      control.setErrors(Object.keys(errors).length ? errors : null);
+    }
+  }
+}

package/src/lib/matcha-time/time.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatchaTimeComponent } from './time/time.component';
+
+@NgModule({
+  declarations: [MatchaTimeComponent],
+  imports: [
+    CommonModule,
+    ReactiveFormsModule
+  ],
+  exports: [MatchaTimeComponent]
+})
+export class MatchaTimeModule { }

package/src/lib/matcha-time/time.stories.ts

@@ -0,0 +1,244 @@
+import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { FormControl, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { MatchaTimeModule } from './time.module';
+import { MatchaDateModule } from '../matcha-date/date.module';
+import { MatchaFormFieldModule } from '../matcha-form-field/matcha-form-field.module';
+
+export default {
+    title: 'Components / Time',
+    decorators: [
+        applicationConfig({
+            providers: [provideAnimations()],
+        }),
+
+        moduleMetadata({
+            imports: [
+                CommonModule,
+                ReactiveFormsModule,
+                MatchaTimeModule,
+                MatchaDateModule,
+                MatchaFormFieldModule,
+            ],
+        }),
+    ],
+    tags: ['autodocs'],
+    args: {
+        color: 'primary',
+        labelColor: 'blue-grey',
+        startLabel: 'Hora inicial',
+        endLabel: 'Hora final',
+        startLabelError: 'Hora inicial inválida',
+        endLabelError: 'Hora final inválida',
+        startDateLabel: 'Data inicial',
+        endDateLabel: 'Data final',
+        allowCrossDays: true,
+    },
+    argTypes: {
+        color: {
+            description: 'Color theme for form fields',
+            control: 'select',
+            options: [
+                'red', 'pink', 'purple', 'deep-purple', 'indigo', 'blue', 
+                'light-blue', 'cyan', 'teal', 'green', 'light-green', 'lime', 
+                'yellow', 'amber', 'orange', 'deep-orange', 'primary', 'accent', 
+                'warn', 'brown', 'grey', 'blue-grey'
+            ],
+            table: {
+                type: { summary: 'string' },
+                category: 'Form Field Props',
+                defaultValue: { summary: 'grey' },
+            },
+        },
+        labelColor: {
+            description: 'Color of the label',
+            control: 'select',
+            options: ['primary', 'accent', 'warn', 'blue-grey', 'black'],
+            table: {
+                type: { summary: 'string' },
+                category: 'Label Props',
+            },
+        },
+        startLabel: {
+            description: 'Label for the start time input',
+            control: 'text',
+            table: {
+                type: { summary: 'string' },
+                category: 'Label Props',
+            },
+        },
+        endLabel: {
+            description: 'Label for the end time input',
+            control: 'text',
+            table: {
+                type: { summary: 'string' },
+                category: 'Label Props',
+            },
+        },
+        startLabelError: {
+            description: 'Error message for the start time input',
+            control: 'text',
+            table: {
+                type: { summary: 'string' },
+                category: 'Error Props',
+            },
+        },
+        endLabelError: {
+            description: 'Error message for the end time input',
+            control: 'text',
+            table: {
+                type: { summary: 'string' },
+                category: 'Error Props',
+            },
+        },
+        startDateLabel: {
+            description: 'Label for the start date input',
+            control: 'text',
+            table: {
+                type: { summary: 'string' },
+                category: 'Date Props',
+            },
+        },
+        endDateLabel: {
+            description: 'Label for the end date input',
+            control: 'text',
+            table: {
+                type: { summary: 'string' },
+                category: 'Date Props',
+            },
+        },
+        allowCrossDays: {
+            description: 'Allow time selection across different days',
+            control: 'boolean',
+            table: {
+                type: { summary: 'boolean' },
+                category: 'Time Props',
+            },
+        },
+    },
+    parameters: {
+        controls: { 
+            expanded: true,
+            sort: 'requiredFirst',
+        },
+    },
+} as Meta;
+
+/**
+ * Para Importar o componente, use o seguinte comando:
+ *
+ * ```typescript
+ * import {MatchaTimeModule} from 'matcha-components/time';
+ * ```
+ */
+export const TimeRangeBasic: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+            timeRangeForm: new FormGroup({
+                startTime: new FormControl(''),
+                endTime: new FormControl('')
+            }),
+            get startTime() { return this['timeRangeForm'].get('startTime'); },
+            get endTime() { return this['timeRangeForm'].get('endTime'); }
+        },
+        template: `
+            <form [formGroup]="timeRangeForm">
+                <matcha-time>
+                    <matcha-form-field 
+                        class="w-100-p" 
+                        [color]="color">
+                        <matcha-label [color]="labelColor">{{startLabel}}</matcha-label>
+                        <input type="time" formControlName="startTime">
+                        <matcha-error>
+                            {{startLabelError}}
+                        </matcha-error>
+                    </matcha-form-field>
+
+                    <matcha-form-field 
+                        class="w-100-p" 
+                        [color]="color">
+                        <matcha-label [color]="labelColor">{{endLabel}}</matcha-label>
+                        <input type="time" formControlName="endTime">
+                        <matcha-error>
+                            {{endLabelError}}
+                        </matcha-error>
+                    </matcha-form-field>
+                </matcha-time>
+            </form>
+        `,
+    }),
+    name: 'Time Range Basic',
+};
+
+export const DateTimeRangeCombined: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+            dateTimeForm: new FormGroup({
+                startDate: new FormControl(''),
+                endDate: new FormControl(''),
+                startTime: new FormControl(''),
+                endTime: new FormControl('')
+            }),
+            get startDate() { return this['dateTimeForm'].get('startDate'); },
+            get endDate() { return this['dateTimeForm'].get('endDate'); },
+            get startTime() { return this['dateTimeForm'].get('startTime'); },
+            get endTime() { return this['dateTimeForm'].get('endTime'); }
+        },
+        template: `
+            <form [formGroup]="dateTimeForm">
+                <div class="d-flex flex-column gap-16">
+                    <matcha-date>
+                        <matcha-form-field 
+                            class="w-100-p" 
+                            [color]="color">
+                            <matcha-label [color]="labelColor">{{startDateLabel}}</matcha-label>
+                            <input type="date" formControlName="startDate">
+                            <matcha-error *ngIf="startDate?.errors?.['startAfterEnd']">
+                                A data inicial não pode ser posterior a final
+                            </matcha-error>
+                        </matcha-form-field>
+
+                        <matcha-form-field 
+                            class="w-100-p" 
+                            [color]="color">
+                            <matcha-label [color]="labelColor">{{endDateLabel}}</matcha-label>
+                            <input type="date" formControlName="endDate">
+                            <matcha-error *ngIf="endDate?.errors?.['endBeforeStart']">
+                                A data final não pode ser anterior a inicial
+                            </matcha-error>
+                        </matcha-form-field>
+                    </matcha-date>
+                    
+                    <matcha-time 
+                        startDateControlName="startDate" 
+                        endDateControlName="endDate"
+                        [allowCrossDays]="allowCrossDays">
+                        <matcha-form-field 
+                            class="w-100-p" 
+                            [color]="color">
+                            <matcha-label [color]="labelColor">{{startLabel}}</matcha-label>
+                            <input type="time" formControlName="startTime">
+                            <matcha-error *ngIf="startTime?.errors?.['startAfterEnd']">
+                                {{startLabelError}}
+                            </matcha-error>
+                        </matcha-form-field>
+
+                        <matcha-form-field 
+                            class="w-100-p" 
+                            [color]="color">
+                            <matcha-label [color]="labelColor">{{endLabel}}</matcha-label>
+                            <input type="time" formControlName="endTime">
+                            <matcha-error *ngIf="endTime?.errors?.['endBeforeStart']">
+                                {{endLabelError}}
+                            </matcha-error>
+                        </matcha-form-field>
+                    </matcha-time>
+                </div>
+            </form>
+        `,
+    }),
+    name: 'Date Time Range Combined',
+};

package/src/lib/matcha-title/title/title.component.html

@@ -0,0 +1,8 @@
+<!-- <matcha-title size="1" type="bullet"></matcha-title> -->
+
+<div class="d-flex flex-align-center m-0">
+    <span [class]="signClasses" [class.cursor-pointer]="hasIconClickOutput()" (click)="emitIconAction()"></span>
+    <span [class]="textClasses">
+        <ng-content></ng-content>
+    </span>
+</div>

package/src/lib/matcha-title/title/title.component.scss

@@ -0,0 +1,5 @@
+
+
+
+
+

package/src/lib/matcha-title/title/title.component.ts

@@ -0,0 +1,73 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+export interface ILevelClasses {
+    [key: number | string]: string;
+}
+
+// matcha-title <matcha-title color="fg" size="1" loading="false" type="pill" icon="icon" (iconClick)="emitIconAction($event)"></matcha-title>
+
+@Component({
+    selector: 'matcha-title',
+    templateUrl: './title.component.html',
+    styleUrls: ['./title.component.scss'],
+    standalone: false
+})
+export class MatchaTitleComponent {
+    @Input()
+    color: null | string = null;
+
+    @Input()
+    size: number | string = 4;
+
+    @Input()
+    loading: boolean = false;
+
+    @Input()
+    type: 'pill' | 'bullet' | 'icon' | 'none' = 'pill';
+
+    @Input()
+    icon: string = '';
+
+    @Output() iconClick = new EventEmitter<object>();
+
+
+    public sizeClasses: ILevelClasses = {
+        1: 'fw-900 fs-12 lh-12',
+        2: 'fw-900 fs-14 lh-16',
+        3: 'fw-900 fs-16 lh-18',
+        4: 'fw-900 fs-20 lh-22',
+        5: 'fw-900 fs-32 lh-32',
+        6: 'fw-900 fs-40 lh-40',
+        7: 'fw-900 fs-40 lh-40',
+    };
+
+    public getTypes(): string {
+        const color = this.color ? `background-${this.color} ` : 'background-fg';
+        const icon = this.icon ? `i-matcha-${this.icon}` : '';
+        return  this.type === 'pill' ? `min-h-20 h-20 max-h-20 max-w-8 w-8 min-w-8 position-relative mr-8 radius-8 ${color}` :
+                this.type === 'bullet' ? `min-h-8 h-8 max-h-8 max-w-8 w-8 min-w-8 position-relative mr-8 radius-8 ${this.color ? `background-${this.color}` : 'background-fg'}` :
+                this.type === 'icon' ? `position-relative mr-8 radius-8 ${icon} ${this.color ? `color-${this.color}` : 'color-grey'}` :
+                this.type === 'none' ? `d-none--force` : '';
+    }
+
+    public get signClasses(): string {
+        const activeClasses = `d-flex ${this.getTypes()} ${this.loading ? 'loading' : ''}`;
+        return activeClasses;
+    }
+
+    public get textClasses(): string {
+        const classes = `d-inline-block position-relative mr-8 radius-8`;
+        const size = this.sizeClasses[this.size] ? this.sizeClasses[this.size] : '';
+        const activeClasses = `${classes}  ${size} ${this.loading ? 'loading' : ''}`;
+        return activeClasses;
+    }
+
+    public emitIconAction(): void {
+        const data:object = { icon: this.icon };
+        this.iconClick.emit(data);
+    }
+
+    public hasIconClickOutput(): boolean {
+        return this.iconClick.observers.length > 0;
+    }
+}

package/src/lib/matcha-title/title.argtypes.ts

@@ -0,0 +1,69 @@
+export const titleArgtypes = {
+    color: {
+        descripttion: 'Color is for some types of title that need to be colored. The color options is the basic color palette of the theme.',
+        control: 'select',
+        defaultValue: 'fg',
+        table: {
+            defaultValue: { summary: 'fg' },
+        },
+        options: ['fg', 'accent', 'primary', 'warn', 'red', 'pink', 'purple', 'deep-purple', 'indigo', 'blue', 'light-blue', 'cyan', 'teal', 'green', 'light-green', 'lime', 'yellow', 'amber', 'orange', 'deep-orange'],
+    },
+
+    size: {
+        description: 'The size of the title.',
+        defaultValue: 4,
+        table: {
+            type: { summary: 'number | string' },
+            defaultValue: { summary: '4' },
+        },
+        control: {
+            type: 'range',
+            min: 1,
+            max: 7,
+            step: 1,
+        },
+    },
+
+    type: {
+        description: 'The type of the title.',
+        defaultValue: 'pill',
+        control: 'select',
+        table: {
+            type: { summary: 'string' },
+            defaultValue: { summary: 'pill' },
+        },
+        options: ['pill', 'bullet', 'icon', 'none']
+    },
+
+    icon: {
+        description: 'The icon of the title.',
+        defaultValue: '',
+        table: {
+            type: { summary: 'string' },
+            defaultValue: { summary: '' },
+        },
+        control: {
+            type: 'text',
+        },
+    },
+
+    iconClick: {
+        description: 'The event when the icon is clicked.',
+        table: {
+            type: { summary: 'object' },
+        },
+    },
+
+    content: {
+        description: 'Write something here.',
+        defaultValue: '',
+        table: {
+            type: { summary: 'string' },
+            defaultValue: { summary: '' },
+        },
+        control: {
+            type: 'text',
+        },
+    },
+
+};

package/src/lib/matcha-title/title.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatchaTitleComponent } from './title/title.component';
+
+@NgModule({
+    declarations: [MatchaTitleComponent],
+    imports: [CommonModule],
+    exports: [MatchaTitleComponent],
+})
+export class MatchaTitleModule {}