matcha-components 1.0.5 → 1.0.7

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

@@ -0,0 +1,45 @@
+import { Story } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs";
+import * as ComponentStories from "./slider.stories";
+
+<Meta title="Atoms / Slider / Documentação" />
+
+# Slider
+
+> _slider_ "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">Slider - Basic slider</span>
+            <div class="matcha-card background-bg">
+                <Story of={ComponentStories.SliderBasic} />
+            </div>
+
+            <div class="d-flex-column">
+
+                ```html
+                <form>
+
+                </form>
+                ```
+
+            </div>
+        </div>
+    </div>
+
+</div>
+
+<br />
+
+### Installation
+
+`import {MatSliderModule} from '@angular/material/slider';`
+
+[Official documentation](https://https://material.angular.io/components/slider/overview)
+
+<br />

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

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatchaSliderDirective } from './matcha-slider.directive';
+
+@NgModule({
+  declarations: [MatchaSliderDirective],
+  imports: [
+    CommonModule
+  ],
+  exports:[MatchaSliderDirective]
+})
+export class MatchaSliderModule { }

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

@@ -0,0 +1,149 @@
+import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+
+import { NgIf, NgFor } from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { provideAnimations } from '@angular/platform-browser/animations';
+
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatInputModule } from '@angular/material/input';
+import { MatSliderModule } from '@angular/material/slider';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatchaCardModule } from 'matcha-components';
+
+import { sliderArgtypes } from './slider.argtypes';
+
+export default {
+    title: 'Atoms / Slider',
+    decorators: [
+        applicationConfig({
+            providers: [provideAnimations()],
+        }),
+
+        moduleMetadata({
+            imports: [CommonModule, FormsModule, MatFormFieldModule, MatSliderModule, MatCheckboxModule, MatchaCardModule, MatInputModule, ReactiveFormsModule, NgIf, NgFor],
+        }),
+    ],
+    args: {
+        color: 'accent',
+        disableRipple: false,
+        disabled: false,
+        discrete: false,
+        max: 100,
+        min: 0,
+        showTickMarks: false,
+        step: 1,
+        defaultColor: 'accent',
+    },
+    argTypes: sliderArgtypes,
+    parameters: {
+        controls: { expanded: true },
+    },
+} as Meta;
+
+export const SliderBasic: StoryObj = {
+    render: (args) => ({
+        props: args,
+        template: `
+        <div class="d-flex-center-center">
+            <form class="matcha-card background-surface d-flex-column gap-16 max-w-256 w-256">
+                <mat-slider>
+                    <input matSliderThumb>
+                </mat-slider>
+            </form>
+        </div>
+        `,
+    }),
+    name: 'Basic',
+};
+
+export const RangeSlider: StoryObj = {
+    render: (args) => ({
+        props: args,
+        template: `
+        <div class="d-flex-center-center">
+            <form class="matcha-card background-surface d-flex-column gap-16 max-w-256 w-256">
+                <mat-slider min="200" max="500">
+                    <input value="300" matSliderStartThumb>
+                    <input value="400" matSliderEndThumb>
+                </mat-slider>
+            </form>
+        </div>
+        `,
+    }),
+    name: 'Range Slider',
+};
+
+const disabled = false;
+const max = 100;
+const min = 0;
+const showTicks = false;
+const step = 1;
+const thumbLabel = false;
+const value = 0;
+export const SliderWithLabel: StoryObj = {
+    render: (args) => ({
+        props: args,
+        template: `
+        <div class="matcha-card background-surface d-flex-column gap-16">
+            <div class="matcha-card background-bg d-flex-column gap-16">
+                <div class="matcha-card background-surface d-flex-column gap-16">
+                    <h2>Configuration</h2>
+                    <section class="grid-md-4 gap-16">
+                        <mat-form-field appearance="outline" [color]="color">
+                            <mat-label>Value</mat-label>
+                            <input matInput type="number" [(ngModel)]="value">
+                        </mat-form-field>
+                        <mat-form-field appearance="outline" [color]="color">
+                            <mat-label>Min value</mat-label>
+                            <input matInput type="number" [(ngModel)]="min">
+                        </mat-form-field>
+                        <mat-form-field appearance="outline" [color]="color">
+                            <mat-label>Max value</mat-label>
+                            <input matInput type="number" [(ngModel)]="max">
+                        </mat-form-field>
+                        <mat-form-field appearance="outline" [color]="color">
+                            <mat-label>Step size</mat-label>
+                            <input matInput type="number" [(ngModel)]="step">
+                        </mat-form-field>
+                    </section>
+
+                    <section class="example-section">
+                    <mat-checkbox [(ngModel)]="showTicks">Show ticks</mat-checkbox>
+                    </section>
+
+                    <section class="example-section">
+                    <mat-checkbox [(ngModel)]="thumbLabel">Show thumb label</mat-checkbox>
+                    </section>
+
+                    <section class="example-section">
+                    <mat-checkbox [(ngModel)]="disabled">Disabled</mat-checkbox>
+                    </section>
+                </div>
+            </div>
+
+            <div class="matcha-card background-bg d-flex-column gap-16">
+                <div class="matcha-card background-surface d-flex-column gap-16">
+                    <h2>Result</h2>
+
+                    <div class="example-label-container">
+                    <label id="example-name-label" class="example-name-label">Value</label>
+                    <label class="example-value-label">{{slider.value}}</label>
+                    </div>
+                    <mat-slider
+                        class="example-margin"
+                        [disabled]="disabled"
+                        [max]="max"
+                        [min]="min"
+                        [step]="step"
+                        [discrete]="thumbLabel"
+                        [showTickMarks]="showTicks">
+                    <input matSliderThumb [(ngModel)]="value" #slider>
+                    </mat-slider>
+                </div>
+            </div>
+        </div>
+        `,
+    }),
+    name: 'With Label',
+};

package/src/lib/matcha-snackbar/snack-bar-overview-example.component.ts

@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatButtonModule } from '@angular/material/button';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+
+/**
+ * @title Basic snack-bar
+ */
+@Component({
+    selector: 'snack-bar-overview-example',
+    templateUrl: 'snack-bar-overview-example.html',
+    styleUrls: ['snack-bar-overview-example.css'],
+    standalone: true,
+    imports: [MatFormFieldModule, MatInputModule, MatButtonModule, MatSnackBarModule],
+})
+export class SnackBarOverviewExample {
+    constructor(private _snackBar: MatSnackBar) {}
+
+    openSnackBar(message: string, action: string) {
+        this._snackBar.open(message, action);
+    }
+}

package/src/lib/matcha-snackbar/snack-bar-overview-example.css

@@ -0,0 +1,3 @@
+mat-form-field {
+    margin-right: 12px;
+  }

package/src/lib/matcha-snackbar/snack-bar-overview-example.html

@@ -0,0 +1,11 @@
+<mat-form-field>
+    <mat-label>Message</mat-label>
+    <input matInput value="Disco party!" #message />
+</mat-form-field>
+
+<mat-form-field>
+    <mat-label>Action</mat-label>
+    <input matInput value="Dance" #action />
+</mat-form-field>
+
+<button mat-stroked-button (click)="openSnackBar(message.value, action.value)">Show snack-bar</button>

package/src/lib/matcha-snackbar/snack-bar.argtypes.ts

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

package/src/lib/matcha-snackbar/snack-bar.directive.ts

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

package/src/lib/matcha-snackbar/snack-bar.mdx

@@ -0,0 +1,53 @@
+import { Story } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs";
+import * as ComponentStories from "./snack-bar.stories";
+
+<Meta title="Atoms / Snack Bar / Documentação" />
+
+# Snack Bar
+
+> _snack-bar_ "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">Snack Bar Basic</span>
+            <div class="matcha-card background-bg">
+                <Story of={ComponentStories.SnackBarOverview} />
+            </div>
+
+            <div class="d-flex-column">
+
+                ```html
+                <mat-form-field>
+                    <mat-label>Message</mat-label>
+                    <input matInput value="Disco party!" #message />
+                </mat-form-field>
+
+                <mat-form-field>
+                    <mat-label>Action</mat-label>
+                    <input matInput value="Dance" #action />
+                </mat-form-field>
+
+                <button mat-stroked-button (click)="openSnackBar(message.value, action.value)">Show snack-bar</button>
+                ```
+
+            </div>
+        </div>
+    </div>
+
+</div>
+
+<br />
+
+### Installation
+
+`import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';`
+
+[Official documentation](https://https://material.angular.io/components/snack-bar/overview)
+
+<br />

package/src/lib/matcha-snackbar/snack-bar.module.ts

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

package/src/lib/matcha-snackbar/snack-bar.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 { snackBarArgtypes } from './snack-bar.argtypes';
+import { SnackBarOverviewExample } from './snack-bar-overview-example.component';
+import { MatchaSnackBarModule } from './snack-bar.module';
+
+export default {
+    title: 'Atoms / Snack Bar',
+    component: SnackBarOverviewExample,
+    decorators: [
+        applicationConfig({
+            providers: [provideAnimations()],
+        }),
+
+        moduleMetadata({
+            imports: [CommonModule, MatchaSnackBarModule],
+        }),
+    ],
+    args: {},
+    argTypes: snackBarArgtypes,
+    parameters: {
+        controls: { expanded: true },
+    },
+} as Meta;
+
+export const SnackBarOverview: StoryObj<SnackBarOverviewExample> = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+    }),
+    name: 'Snack Bar Overview',
+};

package/src/lib/matcha-sort-header/example/sort-overview-example.component.ts

@@ -0,0 +1,67 @@
+import { Component } from '@angular/core';
+import { Sort, MatSortModule } from '@angular/material/sort';
+import { NgFor } from '@angular/common';
+
+export interface Dessert {
+    calories: number;
+    carbs: number;
+    fat: number;
+    name: string;
+    protein: number;
+}
+
+/**
+ * @title Sorting overview
+ */
+@Component({
+    selector: 'sort-overview-example',
+    templateUrl: 'sort-overview-example.html',
+    styleUrls: ['sort-overview-example.css'],
+    standalone: true,
+    imports: [MatSortModule, NgFor],
+})
+export class SortOverviewExample {
+    desserts: Dessert[] = [
+        { name: 'Frozen yogurt', calories: 159, fat: 6, carbs: 24, protein: 4 },
+        { name: 'Ice cream sandwich', calories: 237, fat: 9, carbs: 37, protein: 4 },
+        { name: 'Eclair', calories: 262, fat: 16, carbs: 24, protein: 6 },
+        { name: 'Cupcake', calories: 305, fat: 4, carbs: 67, protein: 4 },
+        { name: 'Gingerbread', calories: 356, fat: 16, carbs: 49, protein: 4 },
+    ];
+
+    sortedData: Dessert[];
+
+    constructor() {
+        this.sortedData = this.desserts.slice();
+    }
+
+    sortData(sort: Sort) {
+        const data = this.desserts.slice();
+        if (!sort.active || sort.direction === '') {
+            this.sortedData = data;
+            return;
+        }
+
+        this.sortedData = data.sort((a, b) => {
+            const isAsc = sort.direction === 'asc';
+            switch (sort.active) {
+                case 'name':
+                    return compare(a.name, b.name, isAsc);
+                case 'calories':
+                    return compare(a.calories, b.calories, isAsc);
+                case 'fat':
+                    return compare(a.fat, b.fat, isAsc);
+                case 'carbs':
+                    return compare(a.carbs, b.carbs, isAsc);
+                case 'protein':
+                    return compare(a.protein, b.protein, isAsc);
+                default:
+                    return 0;
+            }
+        });
+    }
+}
+
+function compare(a: number | string, b: number | string, isAsc: boolean) {
+    return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
+}

package/src/lib/matcha-sort-header/example/sort-overview-example.css

@@ -0,0 +1,3 @@
+.mat-sort-header-container {
+    align-items: center;
+  }

package/src/lib/matcha-sort-header/example/sort-overview-example.html

@@ -0,0 +1,21 @@
+<div class="table-container">
+    <div class="table-container-shadow">
+        <table matSort (matSortChange)="sortData($event)">
+            <tr>
+                <th class="par-m" mat-sort-header="name">Dessert (100g)</th>
+                <th class="par-m" mat-sort-header="calories">Calories</th>
+                <th class="par-m" mat-sort-header="fat">Fat (g)</th>
+                <th class="par-m" mat-sort-header="carbs">Carbs (g)</th>
+                <th class="par-m" mat-sort-header="protein">Protein (g)</th>
+            </tr>
+
+            <tr *ngFor="let dessert of sortedData">
+                <td class="par-m color-label">{{dessert.name}}</td>
+                <td class="par-m color-label">{{dessert.calories}}</td>
+                <td class="par-m color-label">{{dessert.fat}}</td>
+                <td class="par-m color-label">{{dessert.carbs}}</td>
+                <td class="par-m color-label">{{dessert.protein}}</td>
+            </tr>
+        </table>
+    </div>
+</div>

package/src/lib/matcha-sort-header/sort-header.argtypes.ts

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

package/src/lib/matcha-sort-header/sort-header.directive.ts

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

package/src/lib/matcha-sort-header/sort-header.mdx

@@ -0,0 +1,78 @@
+import { Story } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs";
+import * as ComponentStories from "./sort-header.stories";
+
+<Meta title="Atoms / Sort Header / Documentação" />
+
+# Sort Header
+
+> _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">Sort Header Overview</span>
+            <div class="matcha-card background-bg">
+                <Story of={ComponentStories.SortOverview} />
+            </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 {MatSortModule} from '@angular/material/table';`
+
+[Official documentation](https://material.angular.io/components/sort/overview)
+
+<br />

package/src/lib/matcha-sort-header/sort-header.module.ts

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

package/src/lib/matcha-sort-header/sort-header.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 { sortHeaderArgtypes } from './sort-header.argtypes';
+import { SortOverviewExample } from './example/sort-overview-example.component';
+import { MatchaSortHeaderModule } from './sort-header.module';
+
+export default {
+    title: 'Atoms / Sort Header',
+    component: SortOverviewExample,
+    decorators: [
+        applicationConfig({
+            providers: [provideAnimations()],
+        }),
+
+        moduleMetadata({
+            imports: [CommonModule, MatchaSortHeaderModule],
+        }),
+    ],
+    args: {},
+    argTypes: sortHeaderArgtypes,
+    parameters: {
+        controls: { expanded: true },
+    },
+} as Meta;
+
+export const SortOverview: StoryObj<SortOverviewExample> = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+    }),
+    name: 'Sort Overview Example',
+};