matcha-components 1.0.5 → 1.0.7

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

@@ -0,0 +1,92 @@
+export const stepperArgtypes = {
+    ariaLabel: {
+        description: 'Aria label for the step.',
+        control: 'text',
+        defaultValue: '',
+        table: {
+            type: { summary: 'string' },
+        },
+    },
+    ariaLabelledby: {
+        description: 'Reference to the element that the step is labelled by.',
+        control: 'text',
+        defaultValue: '',
+        table: {
+            type: { summary: 'string' },
+        },
+    },
+    color: {
+        description: 'Theme color for the particular step.',
+        control: 'select',
+        options: ['primary', 'accent', 'warn'],
+        defaultValue: 'primary',
+        table: {
+            type: { summary: 'ThemePalette' },
+        },
+    },
+    completed: {
+        description: 'Whether the step is marked as completed.',
+        control: 'boolean',
+        defaultValue: false,
+        table: {
+            type: { summary: 'boolean' },
+        },
+    },
+    editable: {
+        description: 'Whether the user can return to this step once it has been marked as completed.',
+        control: 'boolean',
+        defaultValue: true,
+        table: {
+            type: { summary: 'boolean' },
+        },
+    },
+    errorMessage: {
+        description: 'Error message to display when there is an error.',
+        control: 'text',
+        defaultValue: '',
+        table: {
+            type: { summary: 'string' },
+        },
+    },
+    hasError: {
+        description: 'Whether the step has an error.',
+        control: 'boolean',
+        defaultValue: false,
+        table: {
+            type: { summary: 'boolean' },
+        },
+    },
+    label: {
+        description: 'Plain text label of the step.',
+        control: 'text',
+        defaultValue: '',
+        table: {
+            type: { summary: 'string' },
+        },
+    },
+    optional: {
+        description: 'Whether the completion of the step is optional.',
+        control: 'boolean',
+        defaultValue: false,
+        table: {
+            type: { summary: 'boolean' },
+        },
+    },
+    state: {
+        description: 'State of the step.',
+        control: 'select',
+        options: ['number', 'edit', 'done'],
+        defaultValue: 'number',
+        table: {
+            type: { summary: 'StepState' },
+        },
+    },
+    stepControl: {
+        description: 'The top-level abstract control of the step.',
+        control: null,
+        defaultValue: undefined,
+        table: {
+            type: { summary: 'AbstractControlLike' },
+        },
+    },
+};

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

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

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

@@ -0,0 +1,68 @@
+import { Story } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs";
+import * as ComponentStories from "./stepper.stories";
+
+<Meta title="Atoms / Stepper / Documentação" />
+
+# Stepper
+
+> _stepper_ "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">Stepper overview</span>
+            <div class="matcha-card background-bg">
+                <Story of={ComponentStories.StepperOverview} />
+            </div>
+
+            <div class="d-flex-column">
+
+                ```html
+                <div matStepper="4" matStepperOverlap="false" class="demo-section">Text with a stepper</div>
+
+                <div matStepper="1" matStepperSize="large" class="demo-section">Text with large stepper</div>
+
+                <div class="demo-section">
+                Button with a stepper on the left
+                <button mat-raised-button color="primary"
+                    matStepper="8" matStepperPosition="before" matStepperColor="accent">
+                    Action
+                </button>
+                </div>
+
+                <div class="demo-section">
+                    Button toggles stepper visibility
+                    <button mat-raised-button matStepper="7" [matStepperHidden]="hidden" (click)="toggleStepperVisibility()">
+                        Hide
+                    </button>
+                </div>
+
+                <div class="demo-section">
+                Icon with a stepper
+                <mat-icon matStepper="15" matStepperColor="warn">home</mat-icon>
+                    <!-- Include text description of the icon's meaning for screen-readers -->
+                    <span class="cdk-visually-hidden">
+                    Example with a home icon with overlaid stepper showing the number 15
+                    </span>
+                </div>
+                ```
+
+            </div>
+        </div>
+    </div>
+
+</div>
+
+<br />
+
+### Installation
+
+`import {MatStepperModule} from '@angular/material/stepper';`
+[Official documentation](https://https://material.angular.io/components/stepper/overview)
+
+<br />

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

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

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

@@ -0,0 +1,163 @@
+import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { NgIf, NgFor, AsyncPipe, JsonPipe } from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { stepperArgtypes } from './stepper.argtypes';
+
+import { FormBuilder, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatStepperModule } from '@angular/material/stepper';
+import { MatButtonModule } from '@angular/material/button';
+
+import { MatchaStepperDirective } from './stepper.directive';
+import { MatchaCardModule } from '../matcha-card/card.module';
+
+export default {
+    title: 'Atoms / Stepper',
+    decorators: [
+        applicationConfig({
+            providers: [provideAnimations()],
+        }),
+
+        moduleMetadata({
+            imports: [CommonModule, MatIconModule, MatchaCardModule, MatStepperModule, MatButtonModule, MatButtonModule, MatStepperModule, FormsModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, NgIf, JsonPipe, NgFor, AsyncPipe],
+            declarations: [MatchaStepperDirective],
+        }),
+    ],
+    args: {
+        matStepperColor: 'accent',
+    },
+    argTypes: stepperArgtypes,
+    parameters: {
+        controls: { expanded: true },
+    },
+} as Meta;
+
+export const StepperOverview: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+        template: `
+        <matcha-card>
+            <div mat-dialog-title class="matcha-section container pb-52 pb-sm-0">
+                <div class="d-flex-space-between mb-16">
+                    <h4 class="title m-0">
+                        <span class="title-bullet background-accent h-24 w-8"></span
+                        >Title
+                    </h4>
+                    <span
+                        class="i-matcha-action_close i-size-md cursor-pointer m-0"
+                        (click)="console.log('fui clicado')"></span>
+                </div>
+            </div>
+            <mat-stepper [linear]="isLinear" #stepper class="bullet-stepper-header-labeled">
+                <ng-template matStepLabel>Pixuloko</ng-template>
+                <mat-step>
+                    <ng-template matStepLabel>Fill out your name</ng-template>
+                    step 1
+                    <button mat-button matStepperNext>Next</button>
+                </mat-step>
+
+                <mat-step label="Fill out your address">
+                    step 2
+                    <button mat-button matStepperPrevious>Back</button>
+                    <button mat-button matStepperNext>Next</button>
+                </mat-step>
+
+                <mat-step>
+                    step 3
+                    <ng-template matStepLabel>Done</ng-template>
+                    <button mat-button matStepperPrevious>Back</button>
+                    <button mat-button (click)="stepper.reset()">Reset</button>
+                </mat-step>
+            </mat-stepper>
+        </matcha-card>
+        `,
+    }),
+    name: ' Stepper Overview',
+};
+
+export const StepperHorizontal: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+        template: `
+        <matcha-card>
+            <div mat-dialog-title class="matcha-section container pb-52 pb-sm-0">
+                <div class="d-flex-space-between mb-16">
+                    <h4 class="title m-0">
+                        <span class="title-bullet background-accent h-24 w-8"></span
+                        >Title
+                    </h4>
+                    <span
+                        class="i-matcha-action_close i-size-md cursor-pointer m-0"
+                        (click)="console.log('fui clicado')"></span>
+                </div>
+            </div>
+            <mat-stepper [linear]="isLinear" #stepper class="bullet-stepper-header-labeled">
+                <ng-template matStepLabel>Pixuloko</ng-template>
+                <mat-step>
+                    <ng-template matStepLabel>Fill out your name</ng-template>
+                    step 1
+                    <button mat-button matStepperNext>Next</button>
+                </mat-step>
+
+                <mat-step label="Fill out your address">
+                    step 2
+                    <button mat-button matStepperPrevious>Back</button>
+                    <button mat-button matStepperNext>Next</button>
+                </mat-step>
+
+                <mat-step>
+                    step 3
+                    <ng-template matStepLabel>Done</ng-template>
+                    <button mat-button matStepperPrevious>Back</button>
+                    <button mat-button (click)="stepper.reset()">Reset</button>
+                </mat-step>
+            </mat-stepper>
+        </matcha-card>
+        `,
+    }),
+    name: ' Stepper Horizontal',
+};
+
+export const StepperVertical: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+        template: `
+        <matcha-card>
+            <mat-stepper orientation="vertical" [linear]="isLinear" #stepper>
+                <mat-step [stepControl]="firstFormGroup">
+                <ng-template matStepLabel>First Step</ng-template>
+                    <div>
+                        <button mat-button matStepperNext>Next</button>
+                    </div>
+                </mat-step>
+                <mat-step [stepControl]="secondFormGroup">
+                <ng-template matStepLabel>Second Step</ng-template>
+                    <div>
+                    <button mat-button matStepperPrevious>Back</button>
+                    <button mat-button matStepperNext>Next</button>
+                    </div>
+                </mat-step>
+                <mat-step>
+                <ng-template matStepLabel>Done</ng-template>
+                <p>You are now done.</p>
+                <div>
+                    <button mat-button matStepperPrevious>Back</button>
+                    <button mat-button (click)="stepper.reset()">Reset</button>
+                </div>
+                </mat-step>
+            </mat-stepper>
+
+        </matcha-card>
+        `,
+    }),
+    name: ' Stepper Vertical',
+};

package/src/lib/matcha-table/example/table-basic-example.component.ts

@@ -0,0 +1,37 @@
+import { Component } from '@angular/core';
+import { MatTableModule } from '@angular/material/table';
+
+export interface PeriodicElement {
+    name: string;
+    position: number;
+    weight: number;
+    symbol: string;
+}
+
+const ELEMENT_DATA: PeriodicElement[] = [
+    { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
+    { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
+    { position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },
+    { position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' },
+    { position: 5, name: 'Boron', weight: 10.811, symbol: 'B' },
+    { position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C' },
+    { position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N' },
+    { position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O' },
+    { position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F' },
+    { position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne' },
+];
+
+/**
+ * @title Basic use of `<table mat-table>`
+ */
+@Component({
+    selector: 'table-basic-example',
+    styleUrls: ['table-basic-example.css'],
+    templateUrl: 'table-basic-example.html',
+    standalone: true,
+    imports: [MatTableModule],
+})
+export class TableBasicExample {
+    displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
+    dataSource = ELEMENT_DATA;
+}

package/src/lib/matcha-table/example/table-basic-example.html

@@ -0,0 +1,35 @@
+<div class="table-container">
+    <div class="table-container-shadow">
+        <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+            <!--- Note that these columns can be defined in any order.
+                  The actual rendered columns are set as a property on the row definition" -->
+
+            <!-- Position Column -->
+            <ng-container matColumnDef="position">
+                <th class="par-m" mat-header-cell *matHeaderCellDef>No.</th>
+                <td class="par-m color-label" mat-cell *matCellDef="let element">{{ element.position }}</td>
+            </ng-container>
+
+            <!-- Name Column -->
+            <ng-container matColumnDef="name">
+                <th class="par-m" mat-header-cell *matHeaderCellDef>Name</th>
+                <td class="par-m color-blue" mat-cell *matCellDef="let element">{{ element.name }}</td>
+            </ng-container>
+
+            <!-- Weight Column -->
+            <ng-container matColumnDef="weight">
+                <th class="par-m" mat-header-cell *matHeaderCellDef>Weight</th>
+                <td class="par-m color-label" mat-cell *matCellDef="let element">{{ element.weight }}</td>
+            </ng-container>
+
+            <!-- Symbol Column -->
+            <ng-container matColumnDef="symbol">
+                <th class="par-m" mat-header-cell *matHeaderCellDef>Symbol</th>
+                <td class="par-m color-label" mat-cell *matCellDef="let element">{{ element.symbol }}</td>
+            </ng-container>
+
+            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+        </table>
+    </div>
+</div>

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

@@ -0,0 +1,11 @@
+export const tableArgtypes = {
+    color: {
+        description: 'Theme color palette',
+        control: 'select',
+        defaultValue: 'accent',
+        table: {
+            defaultValue: { summary: 'accent' },
+        },
+        options: ['primary', 'accent', 'warn'],
+    },
+};

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

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

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

@@ -0,0 +1,78 @@
+import { Story } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs";
+import * as ComponentStories from "./table.stories";
+
+<Meta title="Atoms / Table / Documentação" />
+
+# Table
+
+> _table_ "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">Table Basic</span>
+            <div class="matcha-card background-bg">
+                <Story of={ComponentStories.TableBasic} />
+            </div>
+
+            <div class="d-flex-column">
+
+                ```html
+                <div class="table-container">
+                    <div class="table-container-shadow">
+                        <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+                            <!--- Note that these columns can be defined in any order.
+                                The actual rendered columns are set as a property on the row definition" -->
+
+                            <!-- Position Column -->
+                            <ng-container matColumnDef="position">
+                                <th class="par-m" mat-header-cell *matHeaderCellDef>No.</th>
+                                <td class="par-m color-label" mat-cell *matCellDef="let element">{{ element.position }}</td>
+                            </ng-container>
+
+                            <!-- Name Column -->
+                            <ng-container matColumnDef="name">
+                                <th class="par-m" mat-header-cell *matHeaderCellDef>Name</th>
+                                <td class="par-m color-blue" mat-cell *matCellDef="let element">{{ element.name }}</td>
+                            </ng-container>
+
+                            <!-- Weight Column -->
+                            <ng-container matColumnDef="weight">
+                                <th class="par-m" mat-header-cell *matHeaderCellDef>Weight</th>
+                                <td class="par-m color-label" mat-cell *matCellDef="let element">{{ element.weight }}</td>
+                            </ng-container>
+
+                            <!-- Symbol Column -->
+                            <ng-container matColumnDef="symbol">
+                                <th class="par-m" mat-header-cell *matHeaderCellDef>Symbol</th>
+                                <td class="par-m color-label" mat-cell *matCellDef="let element">{{ element.symbol }}</td>
+                            </ng-container>
+
+                            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+                        </table>
+                    </div>
+                </div>
+
+                ```
+
+            </div>
+        </div>
+    </div>
+
+</div>
+
+<br />
+
+### Installation
+
+`import {MatTableModule} from '@angular/material/table';`
+
+[Official documentation](https://https://material.angular.io/components/table/overview)
+
+<br />

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

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

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

@@ -0,0 +1,34 @@
+import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { tableArgtypes } from './table.argtypes';
+import { TableBasicExample } from './example/table-basic-example.component';
+import { MatchaTableModule } from './table.module';
+
+export default {
+    title: 'Atoms / Table',
+    component: TableBasicExample,
+    decorators: [
+        applicationConfig({
+            providers: [provideAnimations()],
+        }),
+
+        moduleMetadata({
+            imports: [CommonModule, MatchaTableModule],
+        }),
+    ],
+    args: {},
+    argTypes: tableArgtypes,
+    parameters: {
+        controls: { expanded: true },
+    },
+} as Meta;
+
+export const TableBasic: StoryObj<TableBasicExample> = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+    }),
+    name: ' Table Basic Exemple',
+};

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

@@ -0,0 +1,11 @@
+export const tabsArgtypes = {
+    color: {
+        description: 'Theme color palette',
+        control: 'select',
+        defaultValue: 'accent',
+        table: {
+            defaultValue: { summary: 'accent' },
+        },
+        options: ['primary', 'accent', 'warn'],
+    },
+};

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

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