matcha-components 1.0.8 → 1.0.15

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

@@ -1,122 +0,0 @@
-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 { MatMenuModule } from '@angular/material/menu';
-import { MatButtonModule } from '@angular/material/button';
-import { provideAnimations } from '@angular/platform-browser/animations';
-import { menuArgtypes } from './menu.argtypes';
-
-export default {
-    title: 'Atoms / Menu',
-    decorators: [
-        applicationConfig({
-            providers: [provideAnimations()],
-        }),
-
-        moduleMetadata({
-            imports: [CommonModule, MatButtonModule, MatIconModule, MatMenuModule, MatButtonModule, NgIf, JsonPipe, NgFor, AsyncPipe],
-        }),
-    ],
-    args: {
-        color: 'accent',
-    },
-    argTypes: menuArgtypes,
-    parameters: {
-        controls: { expanded: true },
-    },
-} as Meta;
-
-export const MenuWithIcons: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        template: `
-        <div class="d-flex-center-center">
-            <div class="matcha-card background-surface d-flex-column gap-16 max-w-256 w-256">
-              <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>
-        `,
-    }),
-    name: 'Menu with icons',
-};
-
-export const NestedMenu: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        template: `
-        <div class="d-flex-center-center">
-            <div class="matcha-card background-surface d-flex gap-16 max-w-256 w-256">
-
-              <button mat-button [matMenuTriggerFor]="animals">Animal index</button>
-              <mat-menu #animals="matMenu">
-                <button mat-menu-item [matMenuTriggerFor]="vertebrates">Vertebrates</button>
-                <button mat-menu-item [matMenuTriggerFor]="invertebrates">Invertebrates</button>
-              </mat-menu>
-
-              <mat-menu #vertebrates="matMenu">
-                <button mat-menu-item [matMenuTriggerFor]="fish">Fishes</button>
-                <button mat-menu-item [matMenuTriggerFor]="amphibians">Amphibians</button>
-                <button mat-menu-item [matMenuTriggerFor]="reptiles">Reptiles</button>
-                <button mat-menu-item>Birds</button>
-                <button mat-menu-item>Mammals</button>
-              </mat-menu>
-
-              <mat-menu #invertebrates="matMenu">
-                <button mat-menu-item>Insects</button>
-                <button mat-menu-item>Molluscs</button>
-                <button mat-menu-item>Crustaceans</button>
-                <button mat-menu-item>Corals</button>
-                <button mat-menu-item>Arachnids</button>
-                <button mat-menu-item>Velvet worms</button>
-                <button mat-menu-item>Horseshoe crabs</button>
-              </mat-menu>
-
-              <mat-menu #fish="matMenu">
-                <button mat-menu-item>Baikal oilfish</button>
-                <button mat-menu-item>Bala shark</button>
-                <button mat-menu-item>Ballan wrasse</button>
-                <button mat-menu-item>Bamboo shark</button>
-                <button mat-menu-item>Banded killifish</button>
-              </mat-menu>
-
-              <mat-menu #amphibians="matMenu">
-                <button mat-menu-item>Sonoran desert toad</button>
-                <button mat-menu-item>Western toad</button>
-                <button mat-menu-item>Arroyo toad</button>
-                <button mat-menu-item>Yosemite toad</button>
-              </mat-menu>
-
-              <mat-menu #reptiles="matMenu">
-                <button mat-menu-item>Banded Day Gecko</button>
-                <button mat-menu-item>Banded Gila Monster</button>
-                <button mat-menu-item>Black Tree Monitor</button>
-                <button mat-menu-item>Blue Spiny Lizard</button>
-                <button mat-menu-item disabled>Velociraptor</button>
-              </mat-menu>
-            </div>
-        </div>
-      `,
-    }),
-    name: 'Nested menu',
-};

package/src/lib/matcha-paginator/paginator-overview-example.component.ts

@@ -1,13 +0,0 @@
-import { Component } from '@angular/core';
-import { MatPaginatorModule } from '@angular/material/paginator';
-
-/**
- * @title Paginator
- */
-@Component({
-    selector: 'paginator-overview-example',
-    templateUrl: 'paginator-overview-example.html',
-    standalone: true,
-    imports: [MatPaginatorModule],
-})
-export class PaginatorOverviewExample {}

package/src/lib/matcha-paginator/paginator-overview-example.html

@@ -1 +0,0 @@
-<mat-paginator [length]="100" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page"> </mat-paginator>

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

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

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

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

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

@@ -1,53 +0,0 @@
-import { Story } from "@storybook/blocks";
-import { Meta } from "@storybook/addon-docs";
-import * as ComponentStories from "./paginator.stories";
-
-<Meta title="Atoms / Paginator / Documentação" />
-
-# Paginator
-
-> _paginator_ "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">Paginator Basic</span>
-            <div class="matcha-card background-bg">
-                <Story of={ComponentStories.PaginatorOverview} />
-            </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)="openPaginator(message.value, action.value)">Show paginator</button>
-                ```
-
-            </div>
-        </div>
-    </div>
-
-</div>
-
-<br />
-
-### Installation
-
-`import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';`
-
-[Official documentation](https://https://material.angular.io/components/paginator/overview)
-
-<br />

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

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

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

@@ -1,34 +0,0 @@
-import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-import { CommonModule } from '@angular/common';
-import { provideAnimations } from '@angular/platform-browser/animations';
-import { paginatorArgtypes } from './paginator.argtypes';
-import { PaginatorOverviewExample } from './paginator-overview-example.component';
-import { MatchaPaginatorModule } from './paginator.module';
-
-export default {
-    title: 'Atoms / Paginator',
-    component: PaginatorOverviewExample,
-    decorators: [
-        applicationConfig({
-            providers: [provideAnimations()],
-        }),
-
-        moduleMetadata({
-            imports: [CommonModule, MatchaPaginatorModule],
-        }),
-    ],
-    args: {},
-    argTypes: paginatorArgtypes,
-    parameters: {
-        controls: { expanded: true },
-    },
-} as Meta;
-
-export const PaginatorOverview: StoryObj<PaginatorOverviewExample> = {
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-    }),
-    name: 'Paginator Overview',
-};

package/src/lib/matcha-progress-bar/progress-bar.argtype.ts

@@ -1,48 +0,0 @@
-export const progressBarArgtypes = {
-    bufferValue: {
-        description: 'Buffer value of the progress bar',
-        defaultValue: 0,
-        table: {
-            type: { summary: 'range' },
-            defaultValue: { summary: 75 },
-        },
-        control: {
-            type: 'range',
-            min: 0,
-            max: 100,
-            step: 1,
-        },
-    },
-    color: {
-        description: 'Theme color palette',
-        control: 'select',
-        defaultValue: 'accent',
-        table: {
-            defaultValue: { summary: 'accent' },
-        },
-        options: ['primary', 'accent', 'warn'],
-    },
-    mode: {
-        description: 'Mode of the progress bar',
-        control: 'select',
-        defaultValue: 'indeterminate',
-        table: {
-            defaultValue: { summary: 'indeterminate' },
-        },
-        options: ['determinate', 'indeterminate', 'buffer', 'query'],
-    },
-    value: {
-        description: 'Value of the progress bar',
-        defaultValue: 0,
-        table: {
-            type: { summary: 'range' },
-            defaultValue: { summary: 25 },
-        },
-        control: {
-            type: 'range',
-            min: 0,
-            max: 100,
-            step: 1,
-        },
-    },
-};

package/src/lib/matcha-progress-bar/progress-bar.directive.ts

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

package/src/lib/matcha-progress-bar/progress-bar.mdx

@@ -1,95 +0,0 @@
-import { Story } from "@storybook/blocks";
-import { Meta } from "@storybook/addon-docs";
-import * as ComponentStories from "./progress-bar.stories";
-
-<Meta title="Atoms / Progress Bar / Documentação" />
-
-# Progress bar
-
-> _mat-progress-bar_ "ESCREVER DEFINIÇÃO DO ATÔMICO"
-
----
-
-### Modes
-
-<div class="grid-md-2 gap-16">
-
-    <div class="matcha-card background-surface d-flex-column gap-16">
-        <span class="h5">ProgressBar - Indeterminate</span>
-        <div class="matcha-card background-bg">
-            <Story of={ComponentStories.ProgressBarIndeterminate} />
-        </div>
-        <div class="d-flex-column">
-            ```html
-            <mat-progress-bar
-                matcha-progress-bar
-                color="accent"
-                mode="indeterminate"
-            ></mat-progress-bar>
-            ```
-        </div>
-    </div>
-
-    <div class="matcha-card background-surface d-flex-column gap-16">
-        <span class="h5">ProgressBar - Query</span>
-        <div class="matcha-card background-bg">
-            <Story of={ComponentStories.ProgressBarQuery} />
-        </div>
-        <div class="d-flex-column">
-            ```html
-            <mat-progress-bar
-                matcha-progress-bar
-                color="accent"
-                mode="query"
-            ></mat-progress-bar>
-            ```
-        </div>
-    </div>
-
-    <div class="matcha-card background-surface d-flex-column gap-16">
-        <span class="h5">ProgressBar - Buffer</span>
-        <div class="matcha-card background-bg">
-            <Story of={ComponentStories.ProgressBarBuffer} />
-        </div>
-        <div class="d-flex-column">
-            ```html
-                <mat-progress-bar
-                matcha-progress-bar
-                bufferValue="75"
-                color="accent"
-                mode="buffer"
-                value="25">
-            </mat-progress-bar>
-            ```
-        </div>
-    </div>
-
-
-    <div class="matcha-card background-surface d-flex-column gap-16">
-        <span class="h5">ProgressBar - Determinate</span>
-        <div class="matcha-card background-bg">
-            <Story of={ComponentStories.ProgressBarDeterminate} />
-        </div>
-        <div class="d-flex-column">
-            ```html
-                <mat-progress-bar
-                    matcha-progress-bar
-                    color="accent"
-                    mode="determinate"
-                    value="25">
-                </mat-progress-bar>
-            ```
-        </div>
-    </div>
-
-</div>
-
-<br />
-
-### Installation
-
-`import {MatProgressBarModule} from '@angular/material/progress-bar';`
-
-[Official documentation](https://material.angular.io/components/progress-bar/overview)
-
-<br />

package/src/lib/matcha-progress-bar/progress-bar.module.ts

@@ -1,14 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatchaProgressBarDirective } from './progress-bar.directive';
-
-@NgModule({
-  declarations: [MatchaProgressBarDirective],
-  imports: [
-    CommonModule
-  ],
-  exports:[
-      MatchaProgressBarDirective
-  ]
-})
-export class MatchaProgressBarModule { }

package/src/lib/matcha-progress-bar/progress-bar.stories.ts

@@ -1,89 +0,0 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-import { config } from '@storybook/addon-designs';
-
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { progressBarArgtypes } from './progress-bar.argtype';
-import { MatchaProgressBarDirective } from './progress-bar.directive';
-
-export default {
-    title: 'Atoms / Progress bar',
-    decorators: [
-        moduleMetadata({
-            imports: [MatProgressBarModule],
-            declarations: [MatchaProgressBarDirective],
-        }),
-    ],
-    args: {
-        bufferValue: 75,
-        color: 'accent',
-        value: 25,
-    },
-    argTypes: progressBarArgtypes,
-    parameters: {
-        controls: {
-            expanded: true,
-            exclude: ['mode'],
-        },
-        design: config({
-            type: 'figma',
-            url: 'https://www.figma.com/file/Enji6Zk0UvtHyt8fdOPdBx/DS-PAINEL-(Copy)?type=design&mode=design&t=IKqH3YB1sj5qgDHJ-1',
-        }),
-    },
-} as Meta;
-
-export const ProgressBarBuffer: StoryObj = {
-    render: (args) => ({
-        props: args,
-        template: `
-        <mat-progress-bar
-        matcha-progress-bar
-        [bufferValue]="bufferValue"
-        [color]="color"
-        mode="buffer"
-        [value]="value"></mat-progress-bar>
-    `,
-    }),
-    name: 'Buffer',
-};
-
-export const ProgressBarQuery: StoryObj = {
-    render: (args) => ({
-        props: args,
-        template: `
-        <mat-progress-bar
-        matcha-progress-bar
-        [color]="color"
-        mode="query">
-        </mat-progress-bar>
-    `,
-    }),
-    name: 'Query',
-};
-
-export const ProgressBarIndeterminate: StoryObj = {
-    render: (args) => ({
-        props: args,
-        template: `
-        <mat-progress-bar
-        matcha-progress-bar
-        [color]="color"
-        mode="indeterminate">
-        </mat-progress-bar>
-    `,
-    }),
-    name: 'Indeterminate',
-};
-
-export const ProgressBarDeterminate: StoryObj = {
-    render: (args) => ({
-        props: args,
-        template: `
-        <mat-progress-bar
-        matcha-progress-bar
-        [color]="color"
-        mode="determinate"
-        [value]="value"></mat-progress-bar>
-    `,
-    }),
-    name: 'Determinate',
-};

package/src/lib/matcha-progress-spinner/progress-spinner.argtype.ts

@@ -1,65 +0,0 @@
-export const progressSpinnerArgtypes = {
-    color: {
-      description: 'Theme color palette',
-      control: 'select',
-      defaultValue: 'primary',
-      table: {
-        defaultValue: { summary: 'primary' },
-      },
-      options: [
-        'primary',
-        'accent',
-        'warn',
-      ]
-    },
-    diameter: {
-      description: 'The diameter of the progress spinner (will set width and height of svg)',
-      defaultValue: 100,
-      table: {
-        type: { summary: 'number' },
-        defaultValue: { summary: 100 },
-      },
-      control: {
-        type: 'number'
-      }
-    },
-    mode: {
-      description: 'Mode of the progress circle',
-      control: 'select',
-      defaultValue: 'indeterminate',
-      table: {
-        defaultValue: { summary: 'indeterminate' },
-      },
-      options: [
-        'determinate',
-        'indeterminate',
-        'buffer',
-        'query'
-      ]
-    },
-    strokeWidth: {
-      description: 'Stroke width of the progress spinner',
-      defaultValue: 5,
-      table: {
-        type: { summary: 'number' },
-        defaultValue: { summary: 5 },
-      },
-      control: {
-        type: 'number'
-      }
-    },
-    value: {
-      description: 'Value of the progress circle',
-      defaultValue: 70,
-      table: {
-        type: { summary: 'range' },
-        defaultValue: { summary: 70 },
-      },
-      control: {
-        type: 'range',
-        min: 0,
-        max: 100,
-        step: 1
-      }
-    }
-  }

package/src/lib/matcha-progress-spinner/progress-spinner.directive.ts

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

package/src/lib/matcha-progress-spinner/progress-spinner.mdx

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

package/src/lib/matcha-progress-spinner/progress-spinner.module.ts

@@ -1,14 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatchaProgressSpinnerDirective } from './progress-spinner.directive';
-
-@NgModule({
-  declarations: [MatchaProgressSpinnerDirective],
-  imports: [
-    CommonModule
-  ],
-  exports:[
-      MatchaProgressSpinnerDirective
-  ]
-})
-export class MatchaProgressSpinnerModule { }