matcha-components 1.0.5 → 1.0.6

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

@@ -0,0 +1,113 @@
+import {
+    applicationConfig,
+    Meta,
+    moduleMetadata,
+    StoryObj,
+} from '@storybook/angular';
+import { NgFor, AsyncPipe } from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { map, startWith } from 'rxjs';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { autocompleteArgtypes } from './autocomplete.argtypes';
+import { MatchaAutocompleteDirective } from './autocomplete.directive';
+import { MatchaAutocompleteOverviewDirective } from './autocomplete-overview.directive';
+
+export default {
+    title: 'Atoms / Autocomplete',
+    decorators: [
+        applicationConfig({
+            providers: [provideAnimations()],
+        }),
+        moduleMetadata({
+            imports: [
+                CommonModule,
+                FormsModule,
+                MatFormFieldModule,
+                MatInputModule,
+                MatAutocompleteModule,
+                ReactiveFormsModule,
+                NgFor,
+                AsyncPipe,
+            ],
+            declarations: [
+                MatchaAutocompleteDirective,
+                MatchaAutocompleteOverviewDirective,
+            ],
+        }),
+    ],
+    // tags: ['autodocs'],
+    args: {
+        label: 'Number',
+        autoActiveFirstOption: false,
+        class: '',
+        color: 'accent',
+        disableRipple: false,
+        panelWidth: '',
+        autocompleteTriggerDisabled: false,
+        autocompleteTriggerPosition: 'auto',
+    },
+    argTypes: autocompleteArgtypes,
+    parameters: {
+        controls: { expanded: true },
+    },
+} as Meta;
+
+function _filter(value: string): string[] {
+    const filterValue = value.toLowerCase();
+    return options.filter((option) =>
+        option.toLowerCase().includes(filterValue)
+    );
+}
+
+const myControl = new FormControl();
+const options = ['One', 'Two', 'Three', 'Four'];
+const filteredOptions = myControl.valueChanges.pipe(
+    startWith(''),
+    map((value) => _filter(value || ''))
+);
+
+export const AutocompleteDefault: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+            myControl,
+            options,
+            filteredOptions,
+        },
+        template: `
+        <div class="matcha-card background-surface">
+            <form>
+                <mat-form-field matcha-autocomplete appearance="outline" [color]="color">
+                    <mat-label>{{label}}</mat-label>
+                    <input type="text"
+                        placeholder="Pick one"
+                        aria-label="Number"
+                        matInput
+                        [formControl]="myControl"
+                        [matAutocomplete]="auto"
+                        [matAutocompleteDisabled]="autocompleteTriggerDisabled"
+                        [matAutocompletePosition]="autocompleteTriggerPosition">
+                    <mat-autocomplete #auto="matAutocomplete"
+                        [autoActiveFirstOption]="autoActiveFirstOption"
+                        [class]="class"
+                        [disableRipple]="disableRipple"
+                        [panelWidth]="panelWidth"
+                        (closed)="onClosed()"
+                        (opened)="onOpened()"
+                        (optionActivated)="onOptionActivated($event)"
+                        (optionSelected)="onOptionSelected($event)">
+                    <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
+                        {{option}}
+                    </mat-option>
+                    </mat-autocomplete>
+                </mat-form-field>
+            </form>
+        </div>
+        `,
+    }),
+    name: 'Autocomplete Default',
+};

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

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { MatchaBadgeDirective } from './matcha-badge.directive';
+
+@NgModule({
+    declarations: [
+        MatchaBadgeDirective
+    ],
+    imports: [
+    ],
+    exports: [
+        MatchaBadgeDirective
+    ]
+})
+export class MatchaBadgeModule { }

package/src/lib/matcha-badge/matcha-badge.directive.ts

@@ -0,0 +1,16 @@
+import { Directive, ElementRef, Renderer2 } from '@angular/core';
+
+@Directive({
+    selector: '[matcha-badge]'
+})
+export class MatchaBadgeDirective {
+
+    constructor(
+        private _elementRef: ElementRef,
+        private _renderer: Renderer2
+    ) {
+        //this._elementRef.nativeElement.style.backgroundColor = 'grey';
+        this._renderer.addClass(this._elementRef.nativeElement,'matcha-badge')
+    }
+
+}

package/src/lib/matcha-bottom-sheet/bottom-sheet.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { MatchaBottomSheetDirective } from './matcha-bottom-sheet.directive';
+
+@NgModule({
+    declarations: [
+        MatchaBottomSheetDirective
+    ],
+    imports: [
+    ],
+    exports: [
+        MatchaBottomSheetDirective
+    ]
+})
+export class MatchaBottomSheetModule { }

package/src/lib/matcha-bottom-sheet/matcha-bottom-sheet.directive.ts

@@ -0,0 +1,16 @@
+import { Directive, ElementRef, Renderer2 } from '@angular/core';
+
+@Directive({
+    selector: '[matcha-bottom-sheet]'
+})
+export class MatchaBottomSheetDirective {
+
+    constructor(
+        private _elementRef: ElementRef,
+        private _renderer: Renderer2
+    ) {
+        //this._elementRef.nativeElement.style.backgroundColor = 'grey';
+        this._renderer.addClass(this._elementRef.nativeElement,'matcha-bottom-sheet')
+    }
+
+}

package/src/lib/matcha-button-toggle/button-toggle.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { MatchaButtonToggleDirective } from './matcha-button-toggle.directive';
+
+@NgModule({
+    declarations: [
+        MatchaButtonToggleDirective
+    ],
+    imports: [
+    ],
+    exports: [
+        MatchaButtonToggleDirective
+    ]
+})
+export class MatchaButtonToggleModule { }

package/src/lib/matcha-button-toggle/matcha-button-toggle.directive.ts

@@ -0,0 +1,16 @@
+import { Directive, ElementRef, Renderer2 } from '@angular/core';
+
+@Directive({
+  selector: '[matcha-button-toggle]'
+})
+export class MatchaButtonToggleDirective {
+
+    constructor(
+        private _elementRef: ElementRef,
+        private _renderer: Renderer2
+    ) {
+        //this._elementRef.nativeElement.style.backgroundColor = 'grey';
+        this._renderer.addClass(this._elementRef.nativeElement,'matcha-button-toggle')
+    }
+
+}

package/src/lib/matcha-buttons/button.stories.ts

@@ -0,0 +1,111 @@
+import { MatButton, MatButtonModule } from '@angular/material/button';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { moduleMetadata } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
+import { action } from '@storybook/addon-actions';
+import { MatchaBtnSizeDirective } from './matcha-btn-size.directive';
+import { Directive, ElementRef, Renderer2 } from '@angular/core';
+
+export default {
+    title: 'Componentes/Matcha Button',
+    component: MatButton,
+    decorators: [
+        moduleMetadata({
+            imports: [MatButtonModule, BrowserAnimationsModule],
+            declarations: [MatchaBtnSizeDirective],
+        }),
+    ],
+    args: {
+        label: 'Clique em mim',
+        color: 'accent',
+        defaultColor: 'primary',
+        disableRipple: false,
+        disabled: false,
+        size: '',
+    },
+    argTypes: {
+        label: { control: 'text' },
+        color: { control: 'select', options: ['accent', 'primary', 'warn'] },
+        defaultColor: {
+            control: 'select',
+            options: ['primary', 'accent', 'warn'],
+        },
+        disableRipple: { control: 'boolean' },
+        disabled: { control: 'boolean' },
+        size: { control: 'radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
+    },
+} as Meta;
+
+const Template = (args: MatButton) => ({
+    template: `
+        <button mat-raised-button
+        [color]="${args.color}"
+        [disableRipple]="${args.disableRipple}"
+        [disabled]="${args.disabled}">
+        </button>
+    `,
+    props: args,
+});
+
+export const Default = Template.bind({
+    args: {
+        label: 'Clique em mim',
+        color: 'accent',
+        disableRipple: false,
+        disabled: false,
+        size: 'md',
+    },
+});
+
+export const Primary = () => ({
+    component: MatButton,
+    props: {
+        text: 'Clique em mim',
+        onClick: action('Botão primário clicado'),
+    },
+});
+
+export const Secondary = () => ({
+    component: MatButton,
+    props: {
+        text: 'Botão secundário',
+        color: 'accent',
+        onClick: action('Botão secundário clicado'),
+    },
+});
+
+export const Disabled = () => ({
+    component: MatButton,
+    props: {
+        text: 'Botão desativado',
+        disabled: true,
+        onClick: action('Botão desativado clicado'),
+    },
+});
+
+export const Icon = () => ({
+    component: MatButton,
+    props: {
+        text: 'Botão com ícone',
+        icon: 'favorite',
+        onClick: action('Botão com ícone clicado'),
+    },
+});
+
+export const Accent = () => ({
+    component: MatButton,
+    template: `
+      <button mat-raised-button color="accent" [style.borderRadius.px]="10">Botão com estilo personalizado</button>
+    `,
+    props: {
+        onClick: action('Botão com estilo personalizado clicado'),
+    },
+    decorators: [
+        moduleMetadata({
+            declarations: [MatchaBtnSizeDirective],
+            imports: [
+                /* Importe outros módulos necessários */
+            ],
+        }),
+    ],
+});

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

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+
+import { MatchaBtnMdDirective } from './matcha-btn-md.directive';
+import { MatchaBtnSizeDirective } from './matcha-btn-size.directive';
+import { MatchaBtnXlDirective } from './matcha-btn-xl.directive';
+import { MatchaBtnPillDirective } from './matcha-btn-pill.directive';
+
+
+@NgModule({
+    declarations: [
+        MatchaBtnMdDirective,
+        MatchaBtnSizeDirective,
+        MatchaBtnXlDirective,
+        MatchaBtnPillDirective,
+    ],
+    imports: [
+    ],
+    exports:[
+        MatchaBtnMdDirective,
+        MatchaBtnSizeDirective,
+        MatchaBtnXlDirective,
+        MatchaBtnPillDirective
+
+    ]
+
+})
+export class MatchaButtonsModule { }

package/src/lib/matcha-buttons/matcha-btn-md.directive.ts

@@ -0,0 +1,16 @@
+import { Directive, ElementRef, Renderer2 } from '@angular/core';
+
+@Directive({
+    selector: '[matcha-btn-md]'
+})
+export class MatchaBtnMdDirective {
+
+    constructor(
+        private _elementRef: ElementRef,
+        private _renderer: Renderer2
+    ) {
+        //this._elementRef.nativeElement.style.backgroundColor = 'grey';
+        this._renderer.addClass(this._elementRef.nativeElement,'matcha-button-md')
+    }
+
+}

package/src/lib/matcha-buttons/matcha-btn-pill.directive.ts

@@ -0,0 +1,15 @@
+import { Directive, ElementRef, Renderer2 } from '@angular/core';
+
+@Directive({
+  selector: '[matcha-btn-pill]'
+})
+export class MatchaBtnPillDirective {
+
+  constructor(
+    private _elementRef: ElementRef,
+    private _renderer: Renderer2
+  ) {
+    this._renderer.addClass(this._elementRef.nativeElement, 'matcha-button-pill')
+  }
+
+}

package/src/lib/matcha-buttons/matcha-btn-size.directive.ts

@@ -0,0 +1,17 @@
+import { Directive, ElementRef, Input, Renderer2 } from '@angular/core';
+
+@Directive({
+    selector: '[size]'
+})
+export class MatchaBtnSizeDirective {
+    @Input('size') size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | null = null;
+
+    constructor(
+        private _elementRef: ElementRef,
+        private _renderer: Renderer2
+    ) {
+        //this._elementRef.nativeElement.style.backgroundColor = 'grey';
+
+        this.size == null ? null : this._renderer.addClass(this._elementRef.nativeElement,`matcha-button-${this.size}`);
+    }
+}

package/src/lib/matcha-buttons/matcha-btn-xl.directive.ts

@@ -0,0 +1,15 @@
+import { Directive, ElementRef, Renderer2 } from '@angular/core';
+
+@Directive({
+  selector: '[matcha-btn-xl]'
+})
+export class MatchaBtnXlDirective {
+
+  constructor(
+    private _elementRef: ElementRef,
+    private _renderer: Renderer2
+  ) {
+    //this._elementRef.nativeElement.style.backgroundColor = 'grey';
+    this._renderer.addClass(this._elementRef.nativeElement, 'matcha-button-xl')
+  }
+}

package/src/lib/matcha-card/card.mdx.txt

@@ -0,0 +1,55 @@
+import { Story } from '@storybook/blocks';
+import * as ComponentStories from './matcha-card.stories';
+
+
+# Progress bar
+
+> *matcha-card*  the purpose of the matcha-card is to visually separate content, and it may also receive some options to improve understanding of the content presented.
+
+<br/>
+
+## Installation
+
+`import { MatchaCardModule } from './matcha-card/matcha-card.module';`
+
+<br/>
+
+## Example
+
+<br/>
+
+<Story of={ComponentStories.WithBasicUsage} />
+
+
+
+
+import { Story } from '@storybook/blocks';
+import * as ComponentStories from './matcha-card.stories';
+
+
+# Progress bar
+
+> *matcha-card*  the purpose of the matcha-card is to visually separate content, and it may also receive some options to improve understanding of the content presented.
+
+<br/>
+
+## Installation
+
+`import { MatchaCardModule } from './matcha-card/matcha-card.module';`
+
+<br/>
+
+## Example
+
+<br/>
+
+<Story name="matcha-card - Flat" of={ComponentStories.WithBasicUsage} />
+
+
+<br/>
+
+## Code
+```html
+    <matcha-card elevation="0" background="surface">Meu card</matcha-card>
+```
+

package/src/lib/matcha-card/matcha-card-argtype.ts

@@ -0,0 +1,123 @@
+export const matchaCardArgtypes = {
+    elevation: {
+        description: 'Elevation level of the card',
+        control: 'select',
+        defaultValue: '1',
+        table: {
+            defaultValue: { summary: '1' },
+        },
+        options: [
+            '0' ,
+            '1' ,
+            '2' ,
+            '3' ,
+            '4' ,
+            '5' ,
+            '6' ,
+            '7' ,
+            '8' ,
+            '9' ,
+            '10' ,
+            '11' ,
+            '12' ,
+            '13' ,
+            '14' ,
+            '15' ,
+            '16' ,
+            '17' ,
+            '18' ,
+            '19' ,
+            '20' ,
+            '21' ,
+            '22' ,
+            '23' ,
+            '24'
+        ]
+    },
+    blockquote: {
+        description: 'Position of the blockquote bar',
+        control: 'select',
+        defaultValue: '',
+        table: {
+            defaultValue: { summary: '' },
+        },
+        options: [
+            'left',
+            'right',
+            'none'
+        ]
+    },
+    blockquoteColor: {
+        description: 'Theme color palette for the blockquote bar',
+        control: 'select',
+        defaultValue: 'primary',
+        table: {
+            defaultValue: { summary: 'primary' },
+        },
+        options: [
+            'accent',
+            'primary',
+            'warn',
+            'background',
+            'foreground',
+            'red',
+            'pink',
+            'purple',
+            'deep-purple',
+            'indigo',
+            'blue',
+            'light-blue',
+            'cyan',
+            'teal',
+            'green',
+            'light-green',
+            'lime',
+            'yellow',
+            'amber',
+            'orange',
+            'deep-orange'
+        ]
+    },
+    backgroundColor: {
+        description: 'Theme color palette for the card background',
+        control: 'select',
+        defaultValue: 'surface',
+        table: {
+            defaultValue: { summary: 'surface' },
+        },
+        options: [
+            'surface',
+            'surface',
+            'bg',
+            'background',
+            'foreground',
+            'red',
+            'pink',
+            'purple',
+            'deep-purple',
+            'indigo',
+            'blue',
+            'light-blue',
+            'cyan',
+            'teal',
+            'green',
+            'light-green',
+            'lime',
+            'yellow',
+            'amber',
+            'orange',
+            'deep-orange'
+        ]
+    },
+    alpha: {
+        description: 'Opacity of the backgroundColor',
+        control: 'boolean',
+        defaultValue: true,
+        table: {
+            defaultValue: { summary: true },
+        },
+    },
+    label: {
+        control: 'text'
+    },
+  }

package/src/lib/matcha-card/matcha-card-content/matcha-card-content.component.html

@@ -0,0 +1,3 @@
+<div class="matcha-card-content">
+    <ng-content></ng-content>
+</div>

package/src/lib/matcha-card/matcha-card-content/matcha-card-content.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MatchaCardContentComponent } from './matcha-card-content.component';
+
+describe('MatchaCardContentComponent', () => {
+  let component: MatchaCardContentComponent;
+  let fixture: ComponentFixture<MatchaCardContentComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [MatchaCardContentComponent]
+    });
+    fixture = TestBed.createComponent(MatchaCardContentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/matcha-card/matcha-card-content/matcha-card-content.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'matcha-card-content',
+  templateUrl: './matcha-card-content.component.html',
+  styleUrls: ['./matcha-card-content.component.scss']
+})
+export class MatchaCardContentComponent {
+
+}

package/src/lib/matcha-card/matcha-card-footer/matcha-card-footer.component.html

@@ -0,0 +1,3 @@
+<div class="matcha-card-footer">
+    <ng-content></ng-content>
+</div>

package/src/lib/matcha-card/matcha-card-footer/matcha-card-footer.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MatchaCardFooterComponent } from './matcha-card-footer.component';
+
+describe('MatchaCardFooterComponent', () => {
+  let component: MatchaCardFooterComponent;
+  let fixture: ComponentFixture<MatchaCardFooterComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [MatchaCardFooterComponent]
+    });
+    fixture = TestBed.createComponent(MatchaCardFooterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/matcha-card/matcha-card-footer/matcha-card-footer.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'matcha-card-footer',
+  templateUrl: './matcha-card-footer.component.html',
+  styleUrls: ['./matcha-card-footer.component.scss']
+})
+export class MatchaCardFooterComponent {
+
+}