matcha-components 1.0.8 → 1.0.14

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

@@ -1,42 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,73 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,97 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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/list.directive.ts

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

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

@@ -1,69 +0,0 @@
-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,10 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatchaListDirective } from './list.directive';
-
-@NgModule({
-    declarations: [MatchaListDirective],
-    imports: [CommonModule],
-    exports: [MatchaListDirective],
-})
-export class MatchaListModule {}

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

@@ -1,101 +0,0 @@
-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

@@ -1,114 +0,0 @@
-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.directive.ts

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

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

@@ -1,59 +0,0 @@
-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 />

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

@@ -1,10 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatchaMenuDirective } from './menu.directive';
-
-@NgModule({
-    declarations: [MatchaMenuDirective],
-    imports: [CommonModule],
-    exports: [MatchaMenuDirective],
-})
-export class MatchaMenuModule {}