matcha-components 1.0.6 → 1.0.8

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

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

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

@@ -0,0 +1,122 @@
+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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1 @@
+<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

@@ -0,0 +1,11 @@
+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.mdx

@@ -0,0 +1,53 @@
+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,14 +1,10 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { MatchaPaginatorDirective } from './matcha-paginator.directive';
+import { MatchaPaginatorDirective } from './paginator.directive';
 
 @NgModule({
-  declarations: [MatchaPaginatorDirective],
-  imports: [
-    CommonModule
-  ],
-  exports:[
-      MatchaPaginatorDirective
-  ]
+    declarations: [MatchaPaginatorDirective],
+    imports: [CommonModule],
+    exports: [MatchaPaginatorDirective],
 })
-export class MatchaPaginatorModule { }
+export class MatchaPaginatorModule {}

package/src/lib/matcha-paginator/paginator.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 { 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.mdx

@@ -6,7 +6,7 @@ import * as ComponentStories from "./progress-bar.stories";
 
 # Progress bar
 
-> _mat-progress-bar_ is a horizontal progress-bar for indicating progress and activity.
+> _mat-progress-bar_ "ESCREVER DEFINIÇÃO DO ATÔMICO"
 
 ---
 

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

@@ -1,23 +1,43 @@
-import { Story } from '@storybook/blocks';
-import * as ComponentStories from './progress-spinner.stories';
-import { Meta } from '@storybook/addon-docs';
+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" />
 
-<Meta of={ComponentStories} />
+# Progress Spinner
 
-# Progress spinner
+> _progress-spinner_ "ESCREVER DEFINIÇÃO DO ATÔMICO"
 
-> *mat-progress-spinner* and *mat-spinner* are a circular indicators of progress and activity.
+---
 
-<br/>
+### Modes
 
-## Installation
+<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>
 
-`import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';`
+            <div class="d-flex-column">
+
+                ```html
+
+                ```
+
+            </div>
+        </div>
+    </div>
 
-[Official documentation](https://material.angular.io/components/progress-spinner/overview)
+</div>
+
+<br />
+
+### Installation
+
+`import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';`
 
-<br/>
+[Official documentation](https://https://material.angular.io/components/progress-spinner/overview)
 
-## Example
-<Story of={ComponentStories.WithBasicUsage}></Story>
+<br />

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

@@ -1,21 +1,21 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { progressSpinnerArgtypes } from './progress-spinner.argtype';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatchaProgressSpinnerDirective } from './progress-spinner.directive';
-
-const meta: Meta<typeof MatProgressSpinnerModule> = {
-    component: MatProgressSpinnerModule,
-};
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { config } from '@storybook/addon-designs';
 
 export default {
     title: 'Atoms/Progress spinner',
     decorators: [
+        applicationConfig({
+            providers: [provideAnimations()],
+        }),
         moduleMetadata({
             imports: [MatProgressSpinnerModule],
             declarations: [MatchaProgressSpinnerDirective],
         }),
     ],
-    // tags: ['autodocs'],
     args: {
         color: 'primary',
         diameter: 50,
@@ -32,7 +32,7 @@ export default {
 } as Meta;
 
 /** Ce é pixuloko  ce é biruleibe? */
-export const WithBasicUsage: StoryObj = {
+export const ProgressSpinnerOverview: StoryObj = {
     render: (args) => ({
         props: args,
         template: `
@@ -40,5 +40,5 @@ export const WithBasicUsage: StoryObj = {
     <mat-progress-spinner matcha-progress-spinner [color]="color" mode="indeterminate" [value]="value" [diameter]="diameter" [strokeWidth]="strokeWidth"></mat-progress-spinner>
 `,
     }),
-    name: 'basic usage',
+    name: 'Progress Spinner Overview',
 };

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

@@ -0,0 +1,265 @@
+export const selectArgtypes = {
+    'aria-label': {
+        description: 'Aria label of the select.',
+        control: 'text',
+        defaultValue: '',
+        table: {
+            type: { summary: 'string' },
+        },
+    },
+    'aria-labelledby': {
+        description: 'Input that can be used to specify the aria-labelledby attribute.',
+        control: 'text',
+        defaultValue: '',
+        table: {
+            type: { summary: 'string' },
+        },
+    },
+    compareWith: {
+        description: 'Function to compare the option values with the selected values.',
+        control: null, // Como é uma função, não é necessário um controle.
+        table: {
+            disable: true,
+        },
+    },
+    disableOptionCentering: {
+        description: 'Whether to center the active option over the trigger.',
+        control: 'boolean',
+        defaultValue: false,
+        table: {
+            type: { summary: 'boolean' },
+        },
+    },
+    disableRipple: {
+        description: 'Whether ripples are disabled.',
+        control: 'boolean',
+        defaultValue: false,
+        table: {
+            type: { summary: 'boolean' },
+        },
+    },
+    disabled: {
+        description: 'Whether the component is disabled.',
+        control: 'boolean',
+        defaultValue: false,
+        table: {
+            type: { summary: 'boolean' },
+        },
+    },
+    errorStateMatcher: {
+        description: 'Object used to control when error messages are shown.',
+        control: null, // Como é um objeto, não é necessário um controle.
+        table: {
+            disable: true,
+        },
+    },
+    hideSingleSelectionIndicator: {
+        description: 'Whether checkmark indicator for single-selection options is hidden.',
+        control: 'boolean',
+        defaultValue: false,
+        table: {
+            type: { summary: 'boolean' },
+        },
+    },
+    id: {
+        description: 'Unique id of the element.',
+        control: 'text',
+        defaultValue: '',
+        table: {
+            type: { summary: 'string' },
+        },
+    },
+    multiple: {
+        description: 'Whether the user should be allowed to select multiple options.',
+        control: 'boolean',
+        defaultValue: false,
+        table: {
+            type: { summary: 'boolean' },
+        },
+    },
+    panelClass: {
+        description: 'Classes to be passed to the select panel.',
+        control: 'text',
+        defaultValue: '',
+        table: {
+            type: { summary: 'string' },
+        },
+    },
+    panelWidth: {
+        description: 'Width of the panel.',
+        control: 'text',
+        defaultValue: 'auto',
+        table: {
+            type: { summary: 'string' },
+        },
+    },
+    placeholder: {
+        description: 'Placeholder to be shown if no value has been selected.',
+        control: 'text',
+        defaultValue: '',
+        table: {
+            type: { summary: 'string' },
+        },
+    },
+    required: {
+        description: 'Whether the component is required.',
+        control: 'boolean',
+        defaultValue: false,
+        table: {
+            type: { summary: 'boolean' },
+        },
+    },
+    sortComparator: {
+        description: 'Function used to sort the values in a select in multiple mode.',
+        control: null, // Como é uma função, não é necessário um controle.
+        table: {
+            disable: true,
+        },
+    },
+    typeaheadDebounceInterval: {
+        description: 'Time to wait in milliseconds after the last keystroke before moving focus to an item.',
+        control: 'number',
+        defaultValue: 200,
+        table: {
+            type: { summary: 'number' },
+        },
+    },
+    value: {
+        description: 'Value of the select control.',
+        control: 'text',
+        defaultValue: '',
+        table: {
+            type: { summary: 'any' },
+        },
+    },
+    openedChange: {
+        description: 'Event emitted when the select panel has been toggled.',
+        action: 'openedChange',
+    },
+    selectionChange: {
+        description: 'Event emitted when the selected value has been changed by the user.',
+        action: 'selectionChange',
+    },
+    controlType: {
+        description: 'A name for this control that can be used by mat-form-field.',
+        control: 'text',
+        defaultValue: 'mat-select',
+        table: {
+            type: { summary: 'string' },
+        },
+    },
+    customTrigger: {
+        description: 'Custom trigger for the select.',
+        control: null, // Como é um componente, não é necessário um controle.
+        table: {
+            disable: true,
+        },
+    },
+    defaultTabIndex: {
+        description: 'Tabindex to which to fall back to if no value is set.',
+        control: 'number',
+        defaultValue: 0,
+        table: {
+            type: { summary: 'number' },
+        },
+    },
+    empty: {
+        description: 'Whether the select has a value.',
+        control: 'boolean',
+        defaultValue: false,
+        table: {
+            type: { summary: 'boolean' },
+        },
+    },
+    errorState: {
+        description: 'Whether the component is in an error state.',
+        control: 'boolean',
+        defaultValue: false,
+        table: {
+            type: { summary: 'boolean' },
+        },
+    },
+    focused: {
+        description: 'Whether the select is focused.',
+        control: 'boolean',
+        defaultValue: false,
+        table: {
+            type: { summary: 'boolean' },
+        },
+    },
+    optionGroups: {
+        description: 'Option groups within the select.',
+        control: null, // Como é uma QueryList, não é necessário um controle.
+        table: {
+            disable: true,
+        },
+    },
+    optionSelectionChanges: {
+        description: "Combined stream of all of the child options' change events.",
+        control: null, // Como é um Observable, não é necessário um controle.
+        table: {
+            disable: true,
+        },
+    },
+    options: {
+        description: 'List of child options.',
+        control: null, // Como é uma QueryList, não é necessário um controle.
+        table: {
+            disable: true,
+        },
+    },
+    panel: {
+        description: 'Panel containing the select options.',
+        control: null, // Como é um ElementRef, não é necessário um controle.
+        table: {
+            disable: true,
+        },
+    },
+    panelOpen: {
+        description: 'Whether or not the overlay panel is open.',
+        control: 'boolean',
+        defaultValue: false,
+        table: {
+            type: { summary: 'boolean' },
+        },
+    },
+    selected: {
+        description: 'The currently selected option.',
+        control: null, // Como é um MatOption ou MatOption[], não é necessário um controle.
+        table: {
+            disable: true,
+        },
+    },
+    shouldLabelFloat: {
+        description: 'Whether the label should float when the select has a value.',
+        control: 'boolean',
+        defaultValue: true,
+        table: {
+            type: { summary: 'boolean' },
+        },
+    },
+    trigger: {
+        description: 'Trigger that opens the select.',
+        control: null, // Como é um ElementRef, não é necessário um controle.
+        table: {
+            disable: true,
+        },
+    },
+    triggerValue: {
+        description: 'The value displayed in the trigger.',
+        control: 'text',
+        defaultValue: '',
+        table: {
+            type: { summary: 'string' },
+        },
+    },
+    color: {
+        description: 'Theme color palette',
+        control: 'select',
+        defaultValue: 'accent',
+        table: {
+            defaultValue: { summary: 'accent' },
+        },
+        options: ['primary', 'accent', 'warn'],
+    },
+};

package/src/lib/matcha-select/{matcha-select.directive.ts → select.directive.ts}

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