matcha-components 1.0.6 → 1.0.8

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

@@ -0,0 +1,43 @@
+import { Story } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs";
+import * as ComponentStories from "./card.stories";
+
+<Meta title="Atoms / Card / Documentação" />
+
+# Card
+
+> _card_ "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">Card overview</span>
+            <div class="matcha-card background-bg">
+                <Story of={ComponentStories.CardOverview} />
+            </div>
+
+            <div class="d-flex-column">
+
+                ```html
+                <matcha-card blockquoteColor="foreground" elevation="1" blockquote="left" backgroundColor="surface" alpha="false">
+                    Card Content
+                </matcha-card>
+                ```
+
+            </div>
+        </div>
+    </div>
+
+</div>
+
+<br />
+
+### Installation
+
+`import { MatchaCardModule } from 'matcha-components';`
+
+<br />

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

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatchaCardComponent } from './card.component';
+
+@NgModule({
+    declarations: [MatchaCardComponent],
+    imports: [CommonModule],
+    exports: [MatchaCardComponent],
+})
+export class MatchaCardModule {}

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

@@ -0,0 +1,92 @@
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { MatchaCardModule } from './card.module';
+import { cardArgtypes } from './card-argtype';
+
+/** Este é o card principal */
+export default {
+    title: 'Atoms/Card',
+    decorators: [
+        moduleMetadata({
+            imports: [MatchaCardModule],
+        }),
+    ],
+    // tags: ['autodocs'],
+    args: {
+        elevation: 1,
+        blockquote: 'left',
+        blockquoteColor: 'accent',
+        color: 'surface',
+        label: 'Card Content',
+    },
+    argTypes: cardArgtypes,
+    parameters: {
+        docs: {
+            // canvas: { sourceState: 'shown' },
+            source: { type: 'code' },
+        },
+        controls: {
+            expanded: true,
+            exclude: ['mode'],
+        },
+        componentSubtitle: 'Displays an image that represents a user or organization',
+    },
+} as Meta;
+
+/** Este é o card principal */
+export const CardOverview: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+        template: `
+        <div class="d-flex-column gap-16">
+            <matcha-card [blockquoteColor]="blockquoteColor" [elevation]="elevation" [blockquote]="blockquote" [color]="color" [alpha]="alpha">{{ label }}</matcha-card>
+        <div>
+        `,
+    }),
+    name: 'Card Overview',
+};
+
+export const WithNestedUsage: StoryObj = {
+    render: () => ({
+        props: {
+            elevation: 10,
+            blockquote: 'left',
+            blockquoteColor: 'foreground',
+            color: 'surface',
+            label: 'Card Content',
+        },
+        template: `
+        <div class="d-flex-column gap-16">
+            <matcha-card elevation="1" blockquote="left" color="surface">
+                Surface Color
+                <matcha-card elevation="1" blockquote="right" color="bg" class="p-0">
+                    Background color
+                    <matcha-card elevation="1" blockquote="left" color="surface" alpha="true">
+                        Surface Alpha
+                        <matcha-card elevation="1" blockquote="right" color="bg" alpha="true">Background Alpha</matcha-card>
+                    </matcha-card>
+                </matcha-card>
+            </matcha-card>
+        <div>
+        `,
+        inlineStory: true,
+    }),
+    name: 'Nested',
+};
+
+export const WithColoredUsage: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+            elevation: 1,
+            blockquote: 'left',
+            blockquoteColor: 'yellow',
+            color: 'yellow',
+        },
+        template: `
+            <matcha-card [blockquoteColor]="blockquoteColor" [elevation]="elevation" [blockquote]="blockquote" [color]="color">{{ label }}</matcha-card>
+        `,
+    }),
+    name: 'Raised',
+};

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

@@ -1,23 +1,26 @@
 import { NgModule } from '@angular/core';
-import { MatchaCardModule } from './matcha-card/matcha-card.module';
-import { MatchaTitleModule } from './matcha-title/matcha-title.module';
+import { MatchaCardModule } from './matcha-card/card.module';
+import { MatchaHeadersModule } from './matcha-headers/headers.module';
 
 import { MatchaAutocompleteModule } from './matcha-autocomplete/autocomplete.module';
 import { MatchaBadgeModule } from './matcha-badge/badge.module';
 import { MatchaTabsModule } from './matcha-tabs/tabs.module';
 import { MatchaBottomSheetModule } from './matcha-bottom-sheet/bottom-sheet.module';
 import { MatchaButtonToggleModule } from './matcha-button-toggle/button-toggle.module';
-import { MatchaButtonsModule } from './matcha-buttons/buttons.module';
+import { MatchaButtonModule } from './matcha-button/button.module';
 import { MatchaCheckboxModule } from './matcha-checkbox/checkbox.module';
 import { MatchaChipsModule } from './matcha-chips/chips.module';
 import { MatchaDatepickerModule } from './matcha-datepicker/datepicker.module';
 import { MatchaDialogModule } from './matcha-dialog/dialog.module';
 import { MatchaDividerModule } from './matcha-divider/divider.module';
-import { MatchaExpansionPanelModule } from './matcha-expansion-panel/expansion-panel.module';
+import { MatchaElevationModule } from './matcha-elevation/elevation.module';
+import { MatchaExpansionModule } from './matcha-expansion/expansion.module';
 import { MatchaFormsModule } from './matcha-forms/forms.module';
 import { MatchaIconModule } from './matcha-icon/icon.module';
+import { MatchaInputModule } from './matcha-input/input.module';
 import { MatchaListModule } from './matcha-list/list.module';
 import { MatchaMenuModule } from './matcha-menu/menu.module';
+import { MatchaSidenavModule } from './matcha-sidenav/sidenav.module';
 import { MatchaPaginatorModule } from './matcha-paginator/paginator.module';
 import { MatchaProgressBarModule } from './matcha-progress-bar/progress-bar.module';
 import { MatchaProgressSpinnerModule } from './matcha-progress-spinner/progress-spinner.module';
@@ -25,54 +28,16 @@ import { MatchaRadioButtonModule } from './matcha-radio-button/radio-button.modu
 import { MatchaSelectModule } from './matcha-select/select.module';
 import { MatchaSlideToggleModule } from './matcha-slide-toggle/slide-toggle.module';
 import { MatchaSliderModule } from './matcha-slider/slider.module';
-import { MatchaSnackbarModule } from './matcha-snackbar/snackbar.module';
+import { MatchaSnackBarModule } from './matcha-snackbar/snack-bar.module';
 import { MatchaSortHeaderModule } from './matcha-sort-header/sort-header.module';
 import { MatchaStepperModule } from './matcha-stepper/stepper.module';
 import { MatchaTableModule } from './matcha-table/table.module';
 import { MatchaTooltipModule } from './matcha-tooltip/tooltip.module';
 import { MatchaTreeModule } from './matcha-tree/tree.module';
 
-
 @NgModule({
-  declarations: [],
-  imports: [
-    MatchaCardModule,
-    MatchaTitleModule,
-  ],
-  exports: [
-    MatchaCardModule,
-    MatchaTitleModule,
-
-    MatchaAutocompleteModule,
-    MatchaBadgeModule,
-    MatchaTabsModule,
-    MatchaBottomSheetModule,
-    MatchaButtonToggleModule,
-    MatchaButtonsModule,
-    MatchaCheckboxModule,
-    MatchaChipsModule,
-    MatchaDatepickerModule,
-    MatchaDialogModule,
-    MatchaDividerModule,
-    MatchaExpansionPanelModule,
-    MatchaFormsModule,
-    MatchaIconModule,
-    MatchaListModule,
-    MatchaMenuModule,
-    MatchaPaginatorModule,
-    MatchaProgressBarModule,
-    MatchaProgressSpinnerModule,
-    MatchaRadioButtonModule,
-    MatchaSelectModule,
-    MatchaSlideToggleModule,
-    MatchaSliderModule,
-    MatchaSnackbarModule,
-    MatchaSortHeaderModule,
-    MatchaStepperModule,
-    MatchaTableModule,
-    MatchaTabsModule,
-    MatchaTooltipModule,
-    MatchaTreeModule,
-  ]
+    declarations: [],
+    imports: [MatchaCardModule, MatchaHeadersModule],
+    exports: [MatchaCardModule, MatchaHeadersModule, MatchaAutocompleteModule, MatchaBadgeModule, MatchaTabsModule, MatchaBottomSheetModule, MatchaButtonToggleModule, MatchaButtonModule, MatchaCheckboxModule, MatchaChipsModule, MatchaDatepickerModule, MatchaDialogModule, MatchaDividerModule, MatchaElevationModule, MatchaExpansionModule, MatchaFormsModule, MatchaIconModule, MatchaInputModule, MatchaListModule, MatchaMenuModule, MatchaSidenavModule, MatchaPaginatorModule, MatchaProgressBarModule, MatchaProgressSpinnerModule, MatchaRadioButtonModule, MatchaSelectModule, MatchaSlideToggleModule, MatchaSliderModule, MatchaSnackBarModule, MatchaSortHeaderModule, MatchaStepperModule, MatchaTableModule, MatchaTabsModule, MatchaTooltipModule, MatchaTreeModule],
 })
-export class MatchaComponentsModule { }
+export class MatchaComponentsModule {}

package/src/lib/matcha-dialog/confirmation-dialog.component.ts

@@ -0,0 +1,39 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+
+@Component({
+    template: `
+        <section>
+            <button mat-stroked-button (click)="openDialog()">OPEN DIALOG</button>
+        </section>
+    `,
+    styles: ['section {display: flex; justify-content: center; align-items: center; height: 100%}', '.dialog-border mat-dialog-container {border-radius: 20px; border: 5px solid green} '],
+    standalone: true,
+    imports: [MatDialogModule, MatButtonModule],
+    encapsulation: ViewEncapsulation.None,
+})
+export class ConfirmationDialogComponent {
+    constructor(private readonly dialog: MatDialog) {}
+
+    openDialog(): void {
+        this.dialog.open(ConfirmationDialogDialogComponent, {
+            width: '460px',
+            autoFocus: false,
+            panelClass: 'dialog-border',
+        });
+    }
+}
+
+@Component({
+    template: `
+        <mat-icon>check_circle</mat-icon>
+        <h3>Your order has been created successfully!</h3>
+        <button mat-stroked-button mat-dialog-close>TRACK MY ORDER</button>
+    `,
+    styles: [':host  {display: flex; justify-content: center; align-items: center; flex-direction: column}', 'h3 {text-align: center}', 'mat-icon {color: green; height: 6rem; width: 6rem; font-size: 6rem}'],
+    standalone: true,
+    imports: [MatIconModule, MatButtonModule, MatDialogModule],
+})
+class ConfirmationDialogDialogComponent {}

package/src/lib/matcha-dialog/confirmation-dialog.stories.ts

@@ -0,0 +1,21 @@
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { ConfirmationDialogComponent } from './confirmation-dialog.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+export default {
+    title: 'Atoms / Dialog',
+    component: ConfirmationDialogComponent,
+    decorators: [
+        moduleMetadata({
+            imports: [BrowserAnimationsModule],
+        }),
+    ],
+    parameters: {},
+} as Meta;
+
+export const Template: StoryObj<ConfirmationDialogComponent> = {
+    render: (args) => ({
+        props: args,
+    }),
+    name: 'success (custom css)',
+};

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

@@ -0,0 +1,18 @@
+export const dividerArgtypes = {
+    inset: {
+        description: 'Whether the divider is an inset divider.',
+        control: 'boolean',
+        defaultValue: false,
+        table: {
+            type: { summary: 'boolean' },
+        },
+    },
+    vertical: {
+        description: 'Whether the divider is vertically aligned.',
+        control: 'boolean',
+        defaultValue: false,
+        table: {
+            type: { summary: 'boolean' },
+        },
+    },
+};

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

@@ -0,0 +1,51 @@
+import { Story } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs";
+import * as ComponentStories from "./divider.stories";
+
+<Meta title="Atoms / Divider / Documentação" />
+
+# Divider
+
+> _divider_ É um componente que permite a estilização de um separador em forma de linha com várias opções de orientação.
+
+---
+
+### 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">Divider overview</span>
+            <div class="matcha-card background-bg">
+                <Story of={ComponentStories.DividerOverview} />
+            </div>
+
+            <div class="d-flex-column">
+
+                ```html
+
+                <mat-list>
+                    <mat-list-item>Item 1</mat-list-item>
+                    <mat-divider></mat-divider>
+                    <mat-list-item>Item 2</mat-list-item>
+                    <mat-divider></mat-divider>
+                    <mat-list-item>Item 3</mat-list-item>
+                </mat-list>
+
+                ```
+
+            </div>
+        </div>
+    </div>
+
+</div>
+
+<br />
+
+### Installation
+
+`import {MatDividerModule} from '@angular/material/divider';`
+
+[Official documentation](https://https://material.angular.io/components/divider/overview)
+
+<br />

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

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

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

@@ -0,0 +1,49 @@
+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 { MatDividerModule } from '@angular/material/divider';
+import { MatButtonModule } from '@angular/material/button';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { dividerArgtypes } from './divider.argtypes';
+import { MatchaDividerDirective } from './divider.directive';
+
+export default {
+    title: 'Atoms / Divider',
+    decorators: [
+        applicationConfig({
+            providers: [provideAnimations()],
+        }),
+
+        moduleMetadata({
+            imports: [CommonModule, MatIconModule, MatDividerModule, MatButtonModule, NgIf, JsonPipe, NgFor, AsyncPipe],
+            declarations: [MatchaDividerDirective],
+        }),
+    ],
+    args: {
+        inset: false,
+        vertical: false,
+    },
+    argTypes: dividerArgtypes,
+    parameters: {
+        controls: { expanded: true },
+    },
+} as Meta;
+
+export const DividerOverview: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+        template: `
+        <mat-list>
+            <mat-list-item>Item 1</mat-list-item>
+            <mat-divider></mat-divider>
+            <mat-list-item>Item 2</mat-list-item>
+            <mat-divider></mat-divider>
+            <mat-list-item>Item 3</mat-list-item>
+        </mat-list>
+        `,
+    }),
+    name: ' Divider Overview',
+};

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

@@ -0,0 +1,16 @@
+export const elevationArgtypes = {
+    elevation: {
+        description: 'Elevation value of the element',
+        defaultValue: 0,
+        table: {
+            type: { summary: 'range' },
+            defaultValue: { summary: 0 },
+        },
+        control: {
+            type: 'range',
+            min: 0,
+            max: 24,
+            step: 1,
+        },
+    },
+};

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

@@ -0,0 +1,24 @@
+import { Directive, ElementRef, Input, Renderer2 } from '@angular/core';
+
+@Directive({
+    selector: '[elevation]',
+})
+export class MatchaElevationDirective {
+    @Input('elevation') elevation: number = 0; // Valor padrão para elevação é 0
+
+    constructor(private _elementRef: ElementRef, private _renderer: Renderer2) {}
+
+    ngOnChanges() {
+        // Remove qualquer classe de elevação existente
+        for (let i = 0; i <= 24; i++) {
+            this._renderer.removeClass(this._elementRef.nativeElement, `elevation-z-${i}`);
+        }
+
+        // Adiciona a classe de elevação correspondente
+        if (this.elevation >= 1 && this.elevation <= 24) {
+            this._renderer.addClass(this._elementRef.nativeElement, `elevation-z-${this.elevation}`);
+        } else {
+            this._renderer.addClass(this._elementRef.nativeElement, `elevation-z-0`);
+        }
+    }
+}

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

@@ -0,0 +1,50 @@
+import { Story } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs";
+import * as ComponentStories from "./elevation.stories";
+
+<Meta title="Atoms / Elevation / Documentação" />
+
+# Elevation
+
+> _elevation_ "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">Elevation overview</span>
+            <div class="matcha-card background-bg">
+                <Story of={ComponentStories.ElevationOverview} />
+            </div>
+
+            <div class="d-flex-column">
+
+                ```html
+                <div class="d-flex-column w-500 gap-16">
+                    <div class="d-flex-column gap-16">
+                        <div class="p-16" elevation="1">Element with a elevation 1</div>
+                        <div class="p-16" elevation="2">Element with a elevation 2</div>
+                        <div class="p-16" elevation="3">Element with a elevation 3</div>
+                        <div class="p-16" elevation="4">Element with a elevation 4</div>
+                    </div>
+                </div>
+                ```
+
+            </div>
+        </div>
+    </div>
+
+</div>
+
+<br />
+
+### Installation
+
+`import {MatElevationModule} from '@angular/material/elevation';`
+
+[Official documentation](https://https://material.angular.io/components/elevation/overview)
+
+<br />

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

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

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

@@ -0,0 +1,50 @@
+import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { NgIf, NgFor, AsyncPipe, JsonPipe } from '@angular/common';
+import { CommonModule } from '@angular/common';
+
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { elevationArgtypes } from './elevation.argtypes';
+import { MatchaElevationDirective } from './elevation.directive';
+
+export default {
+    title: 'Atoms / Elevation',
+    decorators: [
+        applicationConfig({
+            providers: [provideAnimations()],
+        }),
+
+        moduleMetadata({
+            imports: [CommonModule, NgIf, JsonPipe, NgFor, AsyncPipe],
+            declarations: [MatchaElevationDirective],
+        }),
+    ],
+    args: {
+        elevation: 2,
+    },
+    argTypes: elevationArgtypes,
+    parameters: {
+        controls: { expanded: true },
+    },
+} as Meta;
+
+export const ElevationOverview: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+        template: `
+        <div class="d-flex-column w-500 gap-16">
+            <div class="d-flex-colmun">
+                <div class="matcha-card" [elevation]="elevation">Element with a elevation {{elevation}}</div>
+            </div>
+            <div class="d-flex-column gap-16">
+                <div class="matcha-card" elevation="1">Element with a elevation 1</div>
+                <div class="matcha-card" elevation="2">Element with a elevation 2</div>
+                <div class="matcha-card" elevation="3">Element with a elevation 3</div>
+                <div class="matcha-card" elevation="4">Element with a elevation 4</div>
+            </div>
+        </div>
+        `,
+    }),
+    name: ' Elevation Overview',
+};

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

@@ -0,0 +1,44 @@
+export const expansionArgtypes = {
+    displayMode: {
+        description: 'Display mode used for all expansion panels in the accordion.',
+        control: 'select',
+        options: ['default', 'flat'],
+        defaultValue: 'default',
+        table: {
+            type: { summary: 'MatAccordionDisplayMode' },
+        },
+    },
+    hideToggle: {
+        description: 'Whether the expansion 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 expansion 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-expansion/expansion.directive.ts

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