matcha-components 1.0.6 → 1.0.8

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

@@ -0,0 +1,42 @@
+export const inputArgtypes = {
+    errorStateMatcher: {
+        description: 'An object used to control when error messages are shown.',
+        control: null, // Como é um objeto, não é necessário um controle.
+        table: {
+            disable: true, // Desativamos a tabela para evitar a exibição de informações desnecessárias.
+        },
+    },
+    readonly: {
+        description: 'Whether the element is readonly.',
+        control: 'boolean',
+        defaultValue: false, // Defina o valor padrão conforme necessário.
+        table: {
+            type: { summary: 'boolean' },
+        },
+    },
+    type: {
+        description: 'Input type of the element.',
+        control: 'text', // Você pode alterar o controle para 'select' se houver opções específicas de tipo que deseja listar.
+        defaultValue: 'text', // Defina o valor padrão conforme necessário.
+        table: {
+            type: { summary: 'string' },
+        },
+    },
+    errorState: {
+        description: 'Whether the component is in an error state.',
+        control: 'boolean',
+        defaultValue: false, // Defina o valor padrão conforme necessário.
+        table: {
+            type: { summary: 'boolean' },
+        },
+    },
+    color: {
+        description: 'Theme color palette',
+        control: 'select',
+        defaultValue: 'accent',
+        table: {
+            defaultValue: { summary: 'accent' },
+        },
+        options: ['primary', 'accent', 'warn'],
+    },
+};

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

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

package/src/lib/matcha-input/input.mdx

@@ -0,0 +1,73 @@
+import { Story } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs";
+import * as ComponentStories from "./input.stories";
+
+<Meta title="Atoms / Input / Documentação" />
+
+# Input
+
+> _input_ "ESCREVER DEFINIÇÃO DO ATÔMICO"
+
+---
+
+### Modes
+
+<div class="d-flex-column gap-16">
+    <div class="d-flex-column">
+        <div class="matcha-card background-surface d-flex-column gap-16">
+            <span class="h5">Input - Date range picker comparison ranges</span>
+            <div class="matcha-card background-bg">
+                <Story of={ComponentStories.InputClearButton} />
+            </div>
+
+            <div class="d-flex-column">
+
+                ```html
+                <form>
+                    <mat-form-field matcha-input appearance="outline" [color]="color">
+                        <mat-label>First campaign</mat-label>
+                        <mat-date-range-input
+                            [formGroup]="campaignOne"
+                            [rangePicker]="campaignOnePicker"
+                            [comparisonStart]="campaignTwo.value.start"
+                            [comparisonEnd]="campaignTwo.value.end">
+                            <input matStartDate placeholder="Start date" formControlName="start">
+                            <input matEndDate placeholder="End date" formControlName="end">
+                        </mat-date-range-input>
+                        <mat-hint>MM/DD/YYYY - MM/DD/YYYY</mat-hint>
+                        <mat-datepicker-toggle matIconSuffix [for]="campaignOnePicker"></mat-datepicker-toggle>
+                        <mat-date-range-picker #campaignOnePicker></mat-date-range-picker>
+                    </mat-form-field>
+
+                    <mat-form-field matcha-datepicker appearance="outline" [color]="color">
+                        <mat-label>Second campaign</mat-label>
+                        <mat-date-range-input
+                            [formGroup]="campaignTwo"
+                            [rangePicker]="campaignTwoPicker"
+                            [comparisonStart]="campaignOne.value.start"
+                            [comparisonEnd]="campaignOne.value.end">
+                            <input matStartDate placeholder="Start date" formControlName="start">
+                            <input matEndDate placeholder="End date" formControlName="end">
+                        </mat-date-range-input>
+                        <mat-datepicker-toggle matIconSuffix [for]="campaignTwoPicker"></mat-datepicker-toggle>
+                        <mat-hint>MM/DD/YYYY - MM/DD/YYYY</mat-hint>
+                        <mat-date-range-picker #campaignTwoPicker></mat-date-range-picker>
+                    </mat-form-field>
+                </form>
+                ```
+
+            </div>
+        </div>
+    </div>
+
+</div>
+
+<br />
+
+### Installation
+
+`import {MatDatepickerModule} from '@angular/material/input';`
+
+[Official documentation](https://https://material.angular.io/components/input/overview)
+
+<br />

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

@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core';
+import { MatchaInputDirective } from './input.directive';
+
+@NgModule({
+    declarations: [MatchaInputDirective],
+    imports: [],
+    exports: [MatchaInputDirective],
+})
+export class MatchaInputModule {}

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

@@ -0,0 +1,97 @@
+import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { NgIf, NgFor, AsyncPipe, JsonPipe } from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { FormControl, FormGroupDirective, FormsModule, NgForm, ReactiveFormsModule, Validators } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatButtonModule } from '@angular/material/button';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { ErrorStateMatcher } from '@angular/material/core';
+import { inputArgtypes } from './input.argtypes';
+import { MatchaInputDirective } from './input.directive';
+
+export default {
+    title: 'Atoms / Input',
+    decorators: [
+        applicationConfig({
+            providers: [provideAnimations()],
+        }),
+
+        moduleMetadata({
+            imports: [CommonModule, FormsModule, MatFormFieldModule, MatInputModule, MatButtonModule, ReactiveFormsModule, NgIf, JsonPipe, NgFor, AsyncPipe],
+            declarations: [MatchaInputDirective],
+        }),
+    ],
+    args: {
+        color: 'accent',
+    },
+    argTypes: inputArgtypes,
+    parameters: {
+        controls: { expanded: true },
+    },
+} as Meta;
+
+const value = 'Clear me';
+
+export const InputClearButton: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+            value,
+        },
+        template: `
+        <div class="d-flex-center-center">
+            <form class="matcha-card background-surface d-flex-column gap-16 max-w-256 w-256">
+                <mat-form-field appearance="outline" [color]="color">
+
+                    <mat-label>Clearable input</mat-label>
+                    <input matInput [type]="text" [(ngModel)]="value">
+                    <button *ngIf="value" matSuffix mat-icon-button aria-label="Clear" (click)="value=''">
+                        <span class="i-matcha-action_close"></span>
+                    </button>
+
+                </mat-form-field>
+            </form>
+        </div>
+        `,
+    }),
+    name: 'Input Clear Button',
+};
+
+const emailFormControl = new FormControl('', [Validators.required, Validators.email]);
+
+export const InputWithErrorMessage: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+            emailFormControl,
+        },
+        template: `
+        <div class="d-flex-center-center">
+            <form class="matcha-card background-surface d-flex-column gap-16 max-w-256">
+                <mat-form-field appearance="outline" [color]="color">
+
+                <mat-label>Email</mat-label>
+                <input type="email" matInput [formControl]="emailFormControl" placeholder="Ex. pat@example.com">
+                <mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
+                Please enter a valid email address
+                </mat-error>
+                <mat-error *ngIf="emailFormControl.hasError('required')">
+                Email is <strong>required</strong>
+                </mat-error>
+
+                </mat-form-field>
+            </form>
+        </div>
+        `,
+    }),
+    name: 'Input with error messages',
+};
+
+/** Error when invalid control is dirty, touched, or submitted. */
+export class MyErrorStateMatcher implements ErrorStateMatcher {
+    isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+        const isSubmitted = form && form.submitted;
+        return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
+    }
+}

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

@@ -0,0 +1,44 @@
+export const listArgtypes = {
+    displayMode: {
+        description: 'Display mode used for all list panels in the accordion.',
+        control: 'select',
+        options: ['default', 'flat'],
+        defaultValue: 'default',
+        table: {
+            type: { summary: 'MatAccordionDisplayMode' },
+        },
+    },
+    hideToggle: {
+        description: 'Whether the list indicator should be hidden.',
+        control: 'boolean',
+        defaultValue: false,
+        table: {
+            type: { summary: 'boolean' },
+        },
+    },
+    multi: {
+        description: 'Whether the accordion should allow multiple expanded accordion items simultaneously.',
+        control: 'boolean',
+        defaultValue: false,
+        table: {
+            type: { summary: 'boolean' },
+        },
+    },
+    togglePosition: {
+        description: 'The position of the list indicator.',
+        control: 'select',
+        options: ['before', 'after'],
+        defaultValue: 'before',
+        table: {
+            type: { summary: 'MatAccordionTogglePosition' },
+        },
+    },
+    id: {
+        description: 'A readonly id value to use for unique selection coordination.',
+        control: 'text',
+        defaultValue: '',
+        table: {
+            type: { summary: 'string' },
+        },
+    },
+};

package/src/lib/matcha-list/{matcha-list.directive.ts → list.directive.ts}

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

package/src/lib/matcha-list/list.mdx

@@ -0,0 +1,69 @@
+import { Story } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs";
+import * as ComponentStories from "./list.stories";
+
+<Meta title="Atoms / List / Documentação" />
+
+# List
+
+> _list_ "ESCREVER DEFINIÇÃO DO ATÔMICO"
+
+---
+
+### Modes
+
+<div class="d-flex-column gap-16">
+    <div class="d-flex-column">
+        <div class="matcha-card background-surface d-flex-column gap-16">
+            <span class="h5">List overview</span>
+            <div class="matcha-card background-bg">
+                <Story of={ComponentStories.ListOverview} />
+            </div>
+
+            <div class="d-flex-column">
+
+                ```html
+
+                <mat-accordion>
+                    <mat-list-panel hideToggle>
+                        <mat-list-panel-header>
+                        <mat-panel-title>
+                            This is the list title
+                        </mat-panel-title>
+                        <mat-panel-description>
+                            This is a summary of the content
+                        </mat-panel-description>
+                        </mat-list-panel-header>
+                        <p>This is the primary content of the panel.</p>
+                    </mat-list-panel>
+                    <mat-list-panel (opened)="panelOpenState = true"
+                                        (closed)="panelOpenState = false">
+                        <mat-list-panel-header>
+                        <mat-panel-title>
+                            Self aware panel
+                        </mat-panel-title>
+                        <mat-panel-description>
+                            Currently I am {{panelOpenState ? 'open' : 'closed'}}
+                        </mat-panel-description>
+                        </mat-list-panel-header>
+                        <p>I'm visible because I am open</p>
+                    </mat-list-panel>
+                </mat-accordion>
+
+                ```
+
+            </div>
+        </div>
+    </div>
+
+</div>
+
+<br />
+
+### Installation
+
+`import {MatListModule} from '@angular/material/list';`
+
+[Official documentation](https://https://material.angular.io/components/list/overview)
+
+<br />

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

@@ -1,14 +1,10 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { MatchaListDirective } from './matcha-list.directive';
+import { MatchaListDirective } from './list.directive';
 
 @NgModule({
-  declarations: [MatchaListDirective],
-  imports: [
-    CommonModule
-  ],
-  exports:[
-      MatchaListDirective
-  ]
+    declarations: [MatchaListDirective],
+    imports: [CommonModule],
+    exports: [MatchaListDirective],
 })
-export class MatchaListModule { }
+export class MatchaListModule {}

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

@@ -0,0 +1,101 @@
+import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+
+import { NgIf, NgFor, AsyncPipe, JsonPipe, DatePipe } from '@angular/common';
+import { CommonModule } from '@angular/common';
+
+import { provideAnimations } from '@angular/platform-browser/animations';
+
+import { MatListModule } from '@angular/material/list';
+
+import { listArgtypes } from './list.argtypes';
+import { MatchaListDirective } from './list.directive';
+
+export interface Section {
+    name: string;
+    updated: Date;
+}
+
+export default {
+    title: 'Atoms / List',
+    decorators: [
+        applicationConfig({
+            providers: [provideAnimations()],
+        }),
+
+        moduleMetadata({
+            imports: [CommonModule, MatListModule, NgIf, JsonPipe, NgFor, AsyncPipe, DatePipe],
+            declarations: [MatchaListDirective],
+        }),
+    ],
+    args: {},
+    argTypes: listArgtypes,
+    parameters: {
+        controls: { expanded: true },
+    },
+} as Meta;
+
+export const ListOverview: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+        template: `
+        <mat-list role="list">
+            <mat-list-item role="listitem">Item 1</mat-list-item>
+            <mat-list-item role="listitem">Item 2</mat-list-item>
+            <mat-list-item role="listitem">Item 3</mat-list-item>
+        </mat-list>
+        `,
+    }),
+    name: 'List Overview',
+};
+
+const folders: Section[] = [
+    {
+        name: 'Photos',
+        updated: new Date('1/1/16'),
+    },
+    {
+        name: 'Recipes',
+        updated: new Date('1/17/16'),
+    },
+    {
+        name: 'Work',
+        updated: new Date('1/28/16'),
+    },
+];
+
+const notes: Section[] = [
+    {
+        name: 'Vacation Itinerary',
+        updated: new Date('2/20/16'),
+    },
+    {
+        name: 'Kitchen Remodel',
+        updated: new Date('1/18/16'),
+    },
+];
+
+export const ListWithSections: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+        template: `
+        <mat-list>
+            <div mat-subheader>Folders</div>
+            <mat-list-item *ngFor="let folder of folders">
+                <div matListItemTitle>{{folder.name}}</div>
+                <div matListItemLine>{{folder.updated | date}}</div>
+            </mat-list-item>
+            <mat-divider></mat-divider>
+            <div mat-subheader>Notes</div>
+            <mat-list-item *ngFor="let note of notes">
+                <div matListItemTitle>{{note.name}}</div>
+                <div matListItemLine>{{note.updated | date}}</div>
+            </mat-list-item>
+        </mat-list>
+        `,
+    }),
+    name: 'List With Sections',
+};

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

@@ -0,0 +1,114 @@
+let menuPanelUid = 0;
+
+export const menuArgtypes = {
+    'aria-describedby': {
+        description: 'aria-describedby for the menu panel.',
+        control: 'text',
+        defaultValue: '',
+        table: {
+            type: { summary: 'string' },
+        },
+    },
+    'aria-label': {
+        description: 'aria-label for the menu panel.',
+        control: 'text',
+        defaultValue: '',
+        table: {
+            type: { summary: 'string' },
+        },
+    },
+    'aria-labelledby': {
+        description: 'aria-labelledby for the menu panel.',
+        control: 'text',
+        defaultValue: '',
+        table: {
+            type: { summary: 'string' },
+        },
+    },
+    backdropClass: {
+        description: 'Class to be added to the backdrop element.',
+        control: 'text',
+        defaultValue: '',
+        table: {
+            type: { summary: 'string' },
+        },
+    },
+    hasBackdrop: {
+        description: 'Whether the menu has a backdrop.',
+        control: 'boolean',
+        defaultValue: false,
+        table: {
+            type: { summary: 'boolean | undefined' },
+        },
+    },
+    overlapTrigger: {
+        description: 'Whether the menu should overlap its trigger.',
+        control: 'boolean',
+        defaultValue: false,
+        table: {
+            type: { summary: 'boolean' },
+        },
+    },
+    class: {
+        description: "This method takes classes set on the host mat-menu element and applies them on the menu template that displays in the overlay container. Otherwise, it's difficult to style the containing menu from outside the component.",
+        control: 'text',
+        defaultValue: '',
+        table: {
+            type: { summary: 'string' },
+        },
+    },
+    xPosition: {
+        description: 'Position of the menu in the X axis.',
+        control: 'select',
+        options: ['before', 'after'],
+        defaultValue: 'after',
+        table: {
+            type: { summary: 'MenuPositionX' },
+        },
+    },
+    yPosition: {
+        description: 'Position of the menu in the Y axis.',
+        control: 'select',
+        options: ['above', 'below'],
+        defaultValue: 'below',
+        table: {
+            type: { summary: 'MenuPositionY' },
+        },
+    },
+    closed: {
+        description: 'Event emitted when the menu is closed.',
+        action: 'closed',
+    },
+    direction: {
+        description: 'Layout direction of the menu.',
+        control: 'select',
+        options: ['ltr', 'rtl'],
+        defaultValue: 'ltr',
+        table: {
+            type: { summary: 'Direction' },
+        },
+    },
+    overlayPanelClass: {
+        description: 'Class or list of classes to be added to the overlay panel.',
+        control: 'text',
+        defaultValue: '',
+        table: {
+            type: { summary: 'string | string[]' },
+        },
+    },
+    panelId: {
+        description: 'ID of the menu panel.',
+        control: 'text',
+        defaultValue: `mat-menu-panel-${menuPanelUid++}`,
+        table: {
+            type: { summary: 'string' },
+        },
+    },
+    parentMenu: {
+        description: 'Parent menu of the current menu panel.',
+        control: null, // Como é um componente, não é necessário um controle.
+        table: {
+            disable: true,
+        },
+    },
+};

package/src/lib/matcha-menu/menu.mdx

@@ -0,0 +1,59 @@
+import { Story } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs";
+import * as ComponentStories from "./menu.stories";
+
+<Meta title="Atoms / Menu / Documentação" />
+
+# Menu
+
+> _menu_ é um painel flutuante contendo uma lista de opções.
+
+---
+
+### Modes
+
+<div class="d-flex-column gap-16">
+    <div class="d-flex-column">
+        <div class="matcha-card background-surface d-flex-column gap-16">
+            <span class="h5">Menu com ícones</span>
+            <div class="matcha-card background-bg">
+                <Story of={ComponentStories.MenuWithIcons} />
+            </div>
+
+            <div class="d-flex-column">
+
+                ```html
+                <button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
+                    <span class="i-matcha-favorite"></span>
+                </button>
+                <mat-menu #menu="matMenu">
+                    <button mat-menu-item>
+                    <span class="i-matcha-favorite mr-8"></span>
+                    <span class="par-m">Radial</span>
+                    </button>
+                    <button mat-menu-item disabled>
+                    <span class="i-matcha-favorite mr-8"></span>
+                    <span class="par-m">Check voice mail</span>
+                    </button>
+                    <button mat-menu-item>
+                    <span class="i-matcha-favorite mr-8"></span>
+                    <span class="par-m">Disable alerts</span>
+                    </button>
+                </mat-menu>
+                ```
+
+            </div>
+        </div>
+    </div>
+
+</div>
+
+<br />
+
+### Installation
+
+`import {MatDatepickerModule} from '@angular/material/menu';`
+
+[Official documentation](https://https://material.angular.io/components/menu/overview)
+
+<br />