matcha-components 1.0.5 → 1.0.7

package/src/lib/matcha-radio-button/matcha-radio-button.stories.ts

@@ -0,0 +1,44 @@
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+
+import { MatRadioModule } from '@angular/material/radio';
+
+import { matchaRadioButtonArgtypes } from './matcha-radio-button.argtype';
+import { MatchaRadioButtonDirective } from './matcha-radio-button.directive';
+
+/** Este é o card principal */
+export default {
+    title: 'Atoms/Radio Button',
+    decorators: [
+        moduleMetadata({
+            imports: [MatRadioModule],
+            declarations: [MatchaRadioButtonDirective],
+        }),
+    ],
+    tags: ['autodocs'],
+    args: {
+        color: 'primary',
+        diameter: 50,
+        strokeWidth: 5,
+        value: 70,
+    },
+    argTypes: matchaRadioButtonArgtypes,
+    parameters: {
+        controls: {
+            expanded: true,
+            exclude: ['mode'],
+        },
+    },
+} as Meta;
+
+export const WithBasicUsage: StoryObj = {
+    render: (args) => ({
+        props: args,
+        template: `
+        <mat-radio-group aria-label="Select an option" matchaRadioButton>
+            <mat-radio-button value="1">Option 1</mat-radio-button>
+            <mat-radio-button value="2">Option 2</mat-radio-button>
+        </mat-radio-group>
+        `,
+    }),
+    name: 'basic usage',
+};

package/src/lib/matcha-radio-button/radio-button.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatchaRadioButtonDirective } from './matcha-radio-button.directive';
+
+@NgModule({
+  declarations: [MatchaRadioButtonDirective],
+  imports: [
+    CommonModule
+  ],
+  exports:[MatchaRadioButtonDirective]
+})
+export class MatchaRadioButtonModule { }

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/select.directive.ts

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

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

@@ -0,0 +1,54 @@
+import { Story } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs";
+import * as ComponentStories from "./select.stories";
+
+<Meta title="Atoms / Select / Documentação" />
+
+# Select
+
+> _select_ "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">Select - Date range picker comparison ranges</span>
+            <div class="matcha-card background-bg">
+                <Story of={ComponentStories.SelectBasic} />
+            </div>
+
+            <div class="d-flex-column">
+
+                ```html
+                <form>
+                    <mat-form-field appearance="outline">
+
+                        <mat-label>Choose an option</mat-label>
+                        <mat-select [disabled]="disableSelect.value">
+                            <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>
+        </div>
+    </div>
+
+</div>
+
+<br />
+
+### Installation
+
+`import {MatSelectModule} from '@angular/material/select';`
+
+[Official documentation](https://https://material.angular.io/components/select/overview)
+
+<br />

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

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

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-select/select.stories.txt

@@ -0,0 +1,109 @@
+import {storiesOf} from '@storybook/angular';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatSelectModule} from '@angular/material/select';
+import {array, boolean, text, object} from 'storybook-addon-knobs-color-options';
+import {action} from '@storybook/addon-actions';
+
+storiesOf('Select', module)
+  .add('Single Select', () => ({
+    template: `
+    <div>
+      <mat-form-field>
+        <mat-select (change)="onChange($event)" [placeholder]="placeholder" [disabled]="disabled">
+          <mat-option *ngFor="let food of foods" [value]="food">
+            {{food}}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+    </div>
+    `,
+    props: {
+      foods: array('foods', [
+        'Pizza',
+        'Burgers',
+        'Steak',
+        'Tacos'
+      ]),
+      placeholder: text('placeholder', 'Favorite food'),
+      disabled: boolean('disabled', false),
+      onChange: action('change')
+    },
+    moduleMetadata: {
+      imports: [MatFormFieldModule, BrowserAnimationsModule, MatSelectModule]
+    }
+  }))
+  .add('Multi Select', () => ({
+    template: `
+    <div>
+      <mat-form-field>
+        <mat-select (change)="onChange($event)" [placeholder]="placeholder" multiple [disabled]="disabled">
+          <mat-option *ngFor="let food of foods" [value]="food">
+            {{food}}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+    </div>
+    `,
+    props: {
+      foods: array('foods', [
+        'Pizza',
+        'Burgers',
+        'Steak',
+        'Tacos'
+      ]),
+      placeholder: text('placeholder', 'Favorite food'),
+      disabled: boolean('disabled', false),
+      onChange: action('change')
+    },
+    moduleMetadata: {
+      imports: [MatFormFieldModule, BrowserAnimationsModule, MatSelectModule]
+    }
+  }))
+  .add('Groups', () => ({
+    template: `
+    <div>
+      <mat-form-field>
+        <mat-select (change)="onChange($event)" [placeholder]="placeholder" [disabled]="disabled">
+          <mat-option>-- None --</mat-option>
+          <mat-optgroup *ngFor="let group of foodGroups" [label]="group.name">
+            <mat-option *ngFor="let food of group.foods" [value]="food">
+              {{food}}
+            </mat-option>
+          </mat-optgroup>
+        </mat-select>
+      </mat-form-field>
+    </div>
+    `,
+    props: {
+      foodGroups: object('foodGroups', [
+        {
+          name: 'Fruit',
+          foods: [
+            'Apple',
+            'Orange'
+          ]
+        },
+        {
+          name: 'Vegetables',
+          foods: [
+            'Lettuce',
+            'Broccoli'
+          ]
+        },
+        {
+          name: 'Meats',
+          foods: [
+            'Steak',
+            'Chicken'
+          ]
+        }
+      ]),
+      disabled: boolean('disabled', false),
+      placeholder: text('placeholder', 'Foods'),
+      onChange: action('change')
+    },
+    moduleMetadata: {
+      imports: [MatFormFieldModule, BrowserAnimationsModule, MatSelectModule]
+    }
+  }));