matcha-components 1.0.5 → 1.0.7

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

@@ -0,0 +1,24 @@
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { ConfirmationDialogComponent } from './confirmation-dialog.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { defaultUsecasesParameters } from '../../../.storybook/utils';
+
+export default {
+  title: 'Usecases/Dialog',
+  component: ConfirmationDialogComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [BrowserAnimationsModule],
+    }),
+  ],
+  parameters: {
+    ...defaultUsecasesParameters,
+  },
+} 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.directive.ts

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

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

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

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

@@ -0,0 +1,69 @@
+import { Story } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs";
+import * as ComponentStories from "./expansion.stories";
+
+<Meta title="Atoms / Expansion / Documentação" />
+
+# Expansion
+
+> _expansion_ "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">Expansion overview</span>
+            <div class="matcha-card background-bg">
+                <Story of={ComponentStories.ExpansionOverview} />
+            </div>
+
+            <div class="d-flex-column">
+
+                ```html
+
+                <mat-accordion>
+                    <mat-expansion-panel hideToggle>
+                        <mat-expansion-panel-header>
+                        <mat-panel-title>
+                            This is the expansion title
+                        </mat-panel-title>
+                        <mat-panel-description>
+                            This is a summary of the content
+                        </mat-panel-description>
+                        </mat-expansion-panel-header>
+                        <p>This is the primary content of the panel.</p>
+                    </mat-expansion-panel>
+                    <mat-expansion-panel (opened)="panelOpenState = true"
+                                        (closed)="panelOpenState = false">
+                        <mat-expansion-panel-header>
+                        <mat-panel-title>
+                            Self aware panel
+                        </mat-panel-title>
+                        <mat-panel-description>
+                            Currently I am {{panelOpenState ? 'open' : 'closed'}}
+                        </mat-panel-description>
+                        </mat-expansion-panel-header>
+                        <p>I'm visible because I am open</p>
+                    </mat-expansion-panel>
+                </mat-accordion>
+
+                ```
+
+            </div>
+        </div>
+    </div>
+
+</div>
+
+<br />
+
+### Installation
+
+`import {MatExpansionModule} from '@angular/material/expansion';`
+
+[Official documentation](https://https://material.angular.io/components/expansion/overview)
+
+<br />

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

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

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

@@ -0,0 +1,67 @@
+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 { MatExpansionModule } from '@angular/material/expansion';
+
+import { expansionArgtypes } from './expansion.argtypes';
+import { MatchaExpansionDirective } from './expansion.directive';
+
+export default {
+    title: 'Atoms / Expansion',
+    decorators: [
+        applicationConfig({
+            providers: [provideAnimations()],
+        }),
+
+        moduleMetadata({
+            imports: [CommonModule, MatExpansionModule, NgIf, JsonPipe, NgFor, AsyncPipe],
+            declarations: [MatchaExpansionDirective],
+        }),
+    ],
+    args: {},
+    argTypes: expansionArgtypes,
+    parameters: {
+        controls: { expanded: true },
+    },
+} as Meta;
+
+const panelOpenState = false;
+export const ExpansionOverview: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+        template: `
+        <mat-accordion>
+            <mat-expansion-panel hideToggle>
+                <mat-expansion-panel-header>
+                <mat-panel-title>
+                    This is the expansion title
+                </mat-panel-title>
+                <mat-panel-description>
+                    This is a summary of the content
+                </mat-panel-description>
+                </mat-expansion-panel-header>
+                <p>This is the primary content of the panel.</p>
+            </mat-expansion-panel>
+            <mat-expansion-panel (opened)="panelOpenState = true"
+                                (closed)="panelOpenState = false">
+                <mat-expansion-panel-header>
+                <mat-panel-title>
+                    Self aware panel
+                </mat-panel-title>
+                <mat-panel-description>
+                    Currently I am {{panelOpenState ? 'open' : 'closed'}}
+                </mat-panel-description>
+                </mat-expansion-panel-header>
+                <p>I'm visible because I am open</p>
+            </mat-expansion-panel>
+        </mat-accordion>
+        `,
+    }),
+    name: ' Expansion Overview',
+};

package/src/lib/matcha-forms/form-field-argtype.ts

@@ -0,0 +1,60 @@
+export const formFieldArgtypes = {
+    appearance: {
+        description: 'The form field appearance style',
+        control: 'select',
+        defaultValue: 'standard',
+        table: {
+            defaultValue: { summary: 'outline' },
+        },
+        options: ['outline'],
+    },
+    color: {
+        description: 'Theme color palette',
+        control: 'select',
+        defaultValue: 'accent',
+        table: {
+            defaultValue: { summary: 'accent' },
+        },
+        options: ['primary', 'accent', 'warn'],
+    },
+    floatLabel: {
+        description: 'Whether the label should always float, never float or float as the user types',
+        control: 'select',
+        defaultValue: 'auto',
+        table: {
+            defaultValue: { summary: 'auto' },
+        },
+        options: ['always', 'never', 'auto'],
+    },
+    hideRequiredMarker: {
+        description: 'Whether the required marker should be hidden',
+        defaultValue: false,
+        table: {
+            type: { summary: 'boolean' },
+            defaultValue: { summary: false },
+        },
+        control: {
+            type: 'boolean',
+        },
+    },
+    hintLabel: {
+        description: 'Text for the form field hint',
+        defaultValue: '',
+        table: {
+            type: { summary: 'text' },
+            defaultValue: { summary: '' },
+        },
+        control: {
+            type: 'text',
+        },
+    },
+    alignHint: {
+        description: 'Whether to align the hint label at the start or end of the line',
+        control: 'select',
+        defaultValue: 'start',
+        table: {
+            defaultValue: { summary: 'start' },
+        },
+        options: ['start', 'end'],
+    },
+};

package/src/lib/matcha-forms/form-field.directive.ts

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

package/src/lib/matcha-forms/form-field.mdx

@@ -0,0 +1,20 @@
+import { Story } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs";
+import LinkTo from "@storybook/addon-links/react";
+
+import linkImage from "../../../assets/open_in_new.png";
+import * as ComponentStories from "./form-field.stories";
+
+<Meta title="Atoms / Forms / Documentação" />
+
+# Form field
+
+> _mat-form-field_ is a component used to wrap several Angular Material components and apply common Text field styles such as the underline, floating label, and hint messages.
+
+<br />
+
+## Installation
+
+`import {MatFormFieldModule} from '@angular/material/form-field';`
+
+[Official documentation](https://material.angular.io/components/form-field/overview)