matcha-components 1.0.6 → 1.0.7

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

@@ -0,0 +1,164 @@
+import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { action } from '@storybook/addon-actions';
+
+import { NgIf, NgFor } from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { provideAnimations } from '@angular/platform-browser/animations';
+
+import { MatSelectModule } from '@angular/material/select';
+import { MatFormFieldModule } from '@angular/material/form-field';
+
+import { selectArgtypes } from './select.argtypes';
+
+export default {
+    title: 'Atoms / Select',
+    decorators: [
+        applicationConfig({
+            providers: [provideAnimations()],
+        }),
+
+        moduleMetadata({
+            imports: [CommonModule, FormsModule, MatFormFieldModule, MatSelectModule, ReactiveFormsModule, NgIf, NgFor],
+        }),
+    ],
+    args: {
+        color: 'accent',
+        required: true,
+        placeholder: 'Selecione uma opção',
+        panelWidth: 'auto',
+        panelClass: 'background-accent-alpha',
+        multiple: true,
+        id: 'select',
+        hideSingleSelectionIndicator: false,
+        errorStateMatcher: null,
+        disabled: false,
+        disableRipple: false,
+        disableOptionCentering: false,
+        sortComparator: null,
+        typeaheadDebounceInterval: 200,
+        value: '',
+        controlType: 'mat-select',
+        defaultTabIndex: 0,
+        empty: false,
+        errorState: false,
+        focused: false,
+        panelOpen: false,
+        shouldLabelFloat: true,
+        triggerValue: '',
+        openedChange: action('openedChange'),
+        selectionChange: action('selectionChange'),
+    },
+    argTypes: selectArgtypes,
+    parameters: {
+        controls: { expanded: true },
+    },
+} as Meta;
+
+export const SelectBasic: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+            required: {
+                table: {
+                    disable: true,
+                },
+            },
+        },
+        parameters: {
+            controls: {
+                controls: { expanded: false },
+                exclude: ['required', 'placeholder', 'panelWidth', 'panelClass', 'multiple', 'id', 'hideSingleSelectionIndicator', 'errorStateMatcher', 'disabled', 'disableRipple', 'disableOptionCentering', 'sortComparator', 'typeaheadDebounceInterval', 'value', 'controlType', 'defaultTabIndex', 'empty', 'errorState', 'focused', 'panelOpen', 'shouldLabelFloat', 'triggerValue'],
+            },
+        },
+        template: `
+        <div class="d-flex-center-center">
+            <form class="matcha-card background-surface d-flex-column gap-16 max-w-256 w-256">
+                <mat-form-field appearance="outline" [color]="color">
+                
+                    <mat-label>Choose an option</mat-label>
+                    <mat-select (click)="openedChange($event)" (onchange)="selectionChange($event)">
+                        <mat-option value="option1">Option 1</mat-option>
+                        <mat-option value="option2" disabled>Option 2 (disabled)</mat-option>
+                        <mat-option value="option3">Option 3</mat-option>
+                    </mat-select>
+                    
+                </mat-form-field>
+            </form>
+        </div>
+        `,
+    }),
+    name: 'Basic',
+};
+
+const toppings = new FormControl('');
+const toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];
+
+export const SelectMultiple: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+            toppings,
+            toppingList,
+        },
+        parameters: {
+            controls: {
+                exclude: ['color', 'required', 'placeholder', 'panelWidth', 'panelClass', 'multiple', 'id', 'hideSingleSelectionIndicator', 'errorStateMatcher', 'disabled', 'disableRipple', 'disableOptionCentering', 'sortComparator', 'typeaheadDebounceInterval', 'value', 'controlType', 'defaultTabIndex', 'empty', 'errorState', 'focused', 'panelOpen', 'shouldLabelFloat', 'triggerValue'],
+            },
+        },
+        template: `
+        <div class="d-flex-center-center">
+            <form class="matcha-card background-surface d-flex-column gap-16 max-w-256 w-256">
+                <mat-form-field appearance="outline" [color]="color">
+                
+                    <mat-label>Toppings</mat-label>
+                    <mat-select [formControl]="toppings" multiple="true" (click)="openedChange($event)" (onChange)="selectionChange($event)">
+                    <mat-select-trigger>
+                        {{toppings.value?.[0] || ''}}
+                        <span *ngIf="(toppings.value?.length || 0) > 1" class="example-additional-selection">
+                        (+{{(toppings.value?.length || 0) - 1}} {{toppings.value?.length === 2 ? 'other' : 'others'}})
+                        </span>
+                    </mat-select-trigger>
+                    <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
+                    </mat-select>
+                    
+                </mat-form-field>
+            </form>
+        </div>
+        `,
+    }),
+    name: 'Multiple Select',
+};
+
+const toppingsControls = new FormControl('');
+
+export const SelectControls: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+            toppingsControls,
+            toppingList,
+        },
+        template: `
+        <div class="d-flex-center-center">
+            <form class="matcha-card background-surface d-flex-column gap-16 max-w-256 w-256">
+                <mat-form-field appearance="outline" [color]="color">
+                
+                    <mat-label>Toppings</mat-label>
+                    <mat-select [formControl]="toppingsControls" [multiple]="multiple" [required]="required" [placeholder]="placeholder" [panelWidth]="panelWidth" [panelClass]="panelClass" [id]="id" [hideSingleSelectionIndicator]="hideSingleSelectionIndicator" [errorStateMatcher]="errorStateMatcher" [disabled]="disabled" [disableRipple]="disableRipple" [disableOptionCentering]="disableOptionCentering" [sortComparator]="sortComparator" [typeaheadDebounceInterval]="typeaheadDebounceInterval" [value]="value" [controlType]="controlType" [defaultTabIndex]="defaultTabIndex" [empty]="empty" [errorState]="errorState" [focused]="focused" [panelOpen]="panelOpen" [shouldLabelFloat]="shouldLabelFloat" [triggerValue]="triggerValue" >
+                    <mat-select-trigger>
+                        {{toppingsControls.value?.[0] || ''}}
+                        <span *ngIf="(toppingsControls.value?.length || 0) > 1" class="example-additional-selection">
+                        (+{{(toppingsControls.value?.length || 0) - 1}} {{toppingsControls.value?.length === 2 ? 'other' : 'others'}})
+                        </span>
+                    </mat-select-trigger>
+                    <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
+                    </mat-select>
+                    
+                </mat-form-field>
+            </form>
+        </div>
+        `,
+    }),
+    name: 'Controls',
+};

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

@@ -0,0 +1,60 @@
+export const sidenavArgtypes = {
+    autoFocus: {
+        description: 'Whether the drawer should focus the first focusable element automatically when opened.',
+        control: 'boolean',
+        defaultValue: false,
+        table: {
+            type: { summary: 'boolean' },
+        },
+    },
+    disableClose: {
+        description: 'Whether the drawer can be closed with the escape key or by clicking on the backdrop.',
+        control: 'boolean',
+        defaultValue: false,
+        table: {
+            type: { summary: 'boolean' },
+        },
+    },
+    mode: {
+        description: 'Mode of the drawer; one of "over", "push", or "side".',
+        control: 'select',
+        options: ['over', 'push', 'side'],
+        defaultValue: 'over',
+        table: {
+            type: { summary: 'MatDrawerMode' },
+        },
+    },
+    opened: {
+        description: 'Whether the drawer is opened.',
+        control: 'boolean',
+        defaultValue: false,
+        table: {
+            type: { summary: 'boolean' },
+        },
+    },
+    position: {
+        description: 'The side that the drawer is attached to.',
+        control: 'select',
+        options: ['start', 'end'],
+        defaultValue: 'start',
+        table: {
+            type: { summary: '"start" | "end"' },
+        },
+    },
+    closedStart: {
+        description: 'Event emitted when the drawer has started closing.',
+        action: 'closedStart',
+    },
+    onPositionChanged: {
+        description: "Event emitted when the drawer's position changes.",
+        action: 'onPositionChanged',
+    },
+    openedChange: {
+        description: 'Event emitted when the drawer open state is changed.',
+        action: 'openedChange',
+    },
+    openedStart: {
+        description: 'Event emitted when the drawer has started opening.',
+        action: 'openedStart',
+    },
+};

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

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

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

@@ -0,0 +1,57 @@
+import { Story } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs";
+import * as ComponentStories from "./sidenav.stories";
+
+<Meta title="Atoms / Sidenav / Documentação" />
+
+# Sidenav
+
+> _sidenav_ "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">Autosize Sidenav</span>
+            <div class="matcha-card background-bg">
+                <Story of={ComponentStories.AutosizeSidenav} />
+            </div>
+
+            <div class="d-flex-column">
+
+                ```html
+                <mat-drawer-container class="example-container" autosize>
+                    <mat-drawer #drawer class="example-sidenav" mode="side">
+                        <p>Auto-resizing sidenav</p>
+                        <p *ngIf="showFiller">Lorem, ipsum dolor sit amet consectetur.</p>
+                        <button (click)="showFiller = !showFiller" mat-raised-button>
+                        Toggle extra text
+                        </button>
+                    </mat-drawer>
+
+                    <div class="example-sidenav-content">
+                        <button type="button" mat-button (click)="drawer.toggle()">
+                        Toggle sidenav
+                        </button>
+                    </div>
+                </mat-drawer-container>
+                ```
+
+            </div>
+        </div>
+    </div>
+
+</div>
+
+<br />
+
+### Installation
+
+`import {MatSidenavModule} from '@angular/material/sidenav';`
+
+[Official documentation](https://https://material.angular.io/components/sidenav/overview)
+
+<br />

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

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

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

@@ -0,0 +1,79 @@
+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 { MatSidenavModule } from '@angular/material/sidenav';
+import { MatButtonModule } from '@angular/material/button';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { sidenavArgtypes } from './sidenav.argtypes';
+
+export default {
+    title: 'Atoms / Sidenav',
+    decorators: [
+        applicationConfig({
+            providers: [provideAnimations()],
+        }),
+
+        moduleMetadata({
+            imports: [CommonModule, MatIconModule, MatSidenavModule, MatButtonModule, NgIf, JsonPipe, NgFor, AsyncPipe],
+        }),
+    ],
+    args: {
+        color: 'accent',
+    },
+    argTypes: sidenavArgtypes,
+    parameters: {
+        controls: { expanded: true },
+    },
+} as Meta;
+
+const showFiller = false;
+export const AutosizeSidenav: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+            showFiller,
+        },
+        template: `
+        <style>
+        .example-container {
+            width: 500px;
+            height: 300px;
+            border: 1px solid rgba(0, 0, 0, 0.5);
+        }
+
+        .example-sidenav-content {
+            display: flex;
+            height: 100%;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .example-sidenav {
+            padding: 20px;
+        }
+        </style>
+        <div class="d-flex-center-center">
+            <div class="matcha-card background-surface d-flex-column gap-16">
+                <mat-drawer-container class="example-container" autosize>
+                    <mat-drawer #drawer class="example-sidenav" mode="side">
+                    <p>Auto-resizing sidenav</p>
+                    <p *ngIf="showFiller">Lorem, ipsum dolor sit amet consectetur.</p>
+                        <button (click)="showFiller = !showFiller" mat-raised-button>
+                            Toggle extra text
+                        </button>
+                    </mat-drawer>
+
+                    <div class="example-sidenav-content">
+                        <button type="button" mat-button (click)="drawer.toggle()">
+                            Toggle sidenav
+                        </button>
+                    </div>
+                </mat-drawer-container>
+            </div>
+        </div>
+
+        `,
+    }),
+    name: 'Autosize sidenav',
+};

package/src/lib/matcha-slide-toggle/slide-toggle.mdx

@@ -6,7 +6,7 @@ import * as ComponentStories from "./slide-toggle.stories";
 
 # Slide Toggle
 
-> _mat-slide-toggle_ is an on/off control that can be toggled via clicking.
+> _mat-slide-toggle_ "ESCREVER DEFINIÇÃO DO ATÔMICO"
 
 ---
 

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

@@ -0,0 +1,83 @@
+export const sliderArgtypes = {
+    color: {
+        description: 'Theme color palette for the component.',
+        control: 'select',
+        options: ['primary', 'accent', 'warn'],
+        defaultValue: 'accent',
+        table: {
+            type: { summary: 'ThemePalette' },
+        },
+    },
+    disableRipple: {
+        description: 'Whether ripples are disabled.',
+        control: 'boolean',
+        defaultValue: false,
+        table: {
+            type: { summary: 'boolean' },
+        },
+    },
+    disabled: {
+        description: 'Whether the slider is disabled.',
+        control: 'boolean',
+        defaultValue: false,
+        table: {
+            type: { summary: 'boolean' },
+        },
+    },
+    discrete: {
+        description: 'Whether the slider displays a numeric value label upon pressing the thumb.',
+        control: 'boolean',
+        defaultValue: false,
+        table: {
+            type: { summary: 'boolean' },
+        },
+    },
+    displayWith: {
+        description: 'Function that will be used to format the value before it is displayed in the thumb label.',
+        control: null, // Como é uma função, não é necessário um controle.
+        table: {
+            disable: true,
+        },
+    },
+    max: {
+        description: 'The maximum value that the slider can have.',
+        control: 'number',
+        defaultValue: 100,
+        table: {
+            type: { summary: 'number' },
+        },
+    },
+    min: {
+        description: 'The minimum value that the slider can have.',
+        control: 'number',
+        defaultValue: 0,
+        table: {
+            type: { summary: 'number' },
+        },
+    },
+    showTickMarks: {
+        description: 'Whether the slider displays tick marks along the slider track.',
+        control: 'boolean',
+        defaultValue: false,
+        table: {
+            type: { summary: 'boolean' },
+        },
+    },
+    step: {
+        description: 'The values at which the thumb will snap.',
+        control: 'number',
+        defaultValue: 1,
+        table: {
+            type: { summary: 'number' },
+        },
+    },
+    defaultColor: {
+        description: 'Default color to fall back to if no value is set.',
+        control: 'select',
+        options: ['primary', 'accent', 'warn', 'undefined'],
+        defaultValue: 'undefined',
+        table: {
+            type: { summary: 'ThemePalette | undefined' },
+        },
+    },
+};

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.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',
+};