matcha-components 1.0.5 → 1.0.6

package/src/lib/matcha-checkbox/checkbox.stories.txt

@@ -0,0 +1,74 @@
+import {Meta, moduleMetadata} from '@storybook/angular';
+import {MatCheckbox, MatCheckboxModule} from '@angular/material/checkbox';
+import {action} from '@storybook/addon-actions';
+import {boolean, text} from '@storybook/addon-knobs';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MatchaCheckboxDirective } from './matcha-checkbox.directive';
+
+
+export default {
+    title: 'Componentes/Matcha Checkbox',
+    component: MatCheckbox,
+    decorators: [
+      moduleMetadata({
+          imports: [MatCheckboxModule, BrowserAnimationsModule],
+          declarations: [MatchaCheckboxDirective],
+      }),
+    ],
+    args: {
+        disabled: boolean('disabled', false),
+        label: text('label', 'Check me'),
+        onChange: action('change')
+    },
+    argTypes: {
+        disabled: { control: 'boolean' },
+        label: { control: 'text' },
+        onChange: { control: 'boolean' }
+    }
+} as Meta;
+
+export const checkbox = () => ({
+    component: MatCheckbox,
+    template: `
+        <div>
+            <mat-checkbox [disabled]="disabled" (change)="onChange($event)">
+                {{label}}
+            </mat-checkbox>
+        </div>
+    `,
+    props: {
+      text: 'Botão com ícone',
+      icon: 'favorite',
+      onClick: action('Botão com ícone clicado'),
+    },
+  });
+
+
+// export default MATCHA_CARD;
+
+// export const Default2: MatCheckbox = {
+//     render: (args: any) => ({
+//         props: args,
+//     }),
+// };
+
+
+
+// storiesOf('Checkbox', module)
+//   .add('Basic', () => ({
+//     template: `
+//     <div>
+//       <mat-checkbox [disabled]="disabled" (change)="onChange($event)">
+//         {{label}}
+//       </mat-checkbox>
+//     </div>
+//     `,
+//     props: {
+//       disabled: boolean('disabled', false),
+//       label: text('label', 'Check me'),
+//       onChange: action('change')
+//     },
+//     moduleMetadata: {
+//       imports: [MatCheckboxModule]
+//     }
+//   }));

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

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { MatchaChipsDirective } from './matcha-chips.directive';
+
+@NgModule({
+  declarations: [MatchaChipsDirective],
+  imports: [
+  ],
+  exports:[
+      MatchaChipsDirective
+  ]
+})
+export class MatchaChipsModule { }

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

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

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

@@ -0,0 +1,78 @@
+import { NgModule } from '@angular/core';
+import { MatchaCardModule } from './matcha-card/matcha-card.module';
+import { MatchaTitleModule } from './matcha-title/matcha-title.module';
+
+import { MatchaAutocompleteModule } from './matcha-autocomplete/autocomplete.module';
+import { MatchaBadgeModule } from './matcha-badge/badge.module';
+import { MatchaTabsModule } from './matcha-tabs/tabs.module';
+import { MatchaBottomSheetModule } from './matcha-bottom-sheet/bottom-sheet.module';
+import { MatchaButtonToggleModule } from './matcha-button-toggle/button-toggle.module';
+import { MatchaButtonsModule } from './matcha-buttons/buttons.module';
+import { MatchaCheckboxModule } from './matcha-checkbox/checkbox.module';
+import { MatchaChipsModule } from './matcha-chips/chips.module';
+import { MatchaDatepickerModule } from './matcha-datepicker/datepicker.module';
+import { MatchaDialogModule } from './matcha-dialog/dialog.module';
+import { MatchaDividerModule } from './matcha-divider/divider.module';
+import { MatchaExpansionPanelModule } from './matcha-expansion-panel/expansion-panel.module';
+import { MatchaFormsModule } from './matcha-forms/forms.module';
+import { MatchaIconModule } from './matcha-icon/icon.module';
+import { MatchaListModule } from './matcha-list/list.module';
+import { MatchaMenuModule } from './matcha-menu/menu.module';
+import { MatchaPaginatorModule } from './matcha-paginator/paginator.module';
+import { MatchaProgressBarModule } from './matcha-progress-bar/progress-bar.module';
+import { MatchaProgressSpinnerModule } from './matcha-progress-spinner/progress-spinner.module';
+import { MatchaRadioButtonModule } from './matcha-radio-button/radio-button.module';
+import { MatchaSelectModule } from './matcha-select/select.module';
+import { MatchaSlideToggleModule } from './matcha-slide-toggle/slide-toggle.module';
+import { MatchaSliderModule } from './matcha-slider/slider.module';
+import { MatchaSnackbarModule } from './matcha-snackbar/snackbar.module';
+import { MatchaSortHeaderModule } from './matcha-sort-header/sort-header.module';
+import { MatchaStepperModule } from './matcha-stepper/stepper.module';
+import { MatchaTableModule } from './matcha-table/table.module';
+import { MatchaTooltipModule } from './matcha-tooltip/tooltip.module';
+import { MatchaTreeModule } from './matcha-tree/tree.module';
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    MatchaCardModule,
+    MatchaTitleModule,
+  ],
+  exports: [
+    MatchaCardModule,
+    MatchaTitleModule,
+
+    MatchaAutocompleteModule,
+    MatchaBadgeModule,
+    MatchaTabsModule,
+    MatchaBottomSheetModule,
+    MatchaButtonToggleModule,
+    MatchaButtonsModule,
+    MatchaCheckboxModule,
+    MatchaChipsModule,
+    MatchaDatepickerModule,
+    MatchaDialogModule,
+    MatchaDividerModule,
+    MatchaExpansionPanelModule,
+    MatchaFormsModule,
+    MatchaIconModule,
+    MatchaListModule,
+    MatchaMenuModule,
+    MatchaPaginatorModule,
+    MatchaProgressBarModule,
+    MatchaProgressSpinnerModule,
+    MatchaRadioButtonModule,
+    MatchaSelectModule,
+    MatchaSlideToggleModule,
+    MatchaSliderModule,
+    MatchaSnackbarModule,
+    MatchaSortHeaderModule,
+    MatchaStepperModule,
+    MatchaTableModule,
+    MatchaTabsModule,
+    MatchaTooltipModule,
+    MatchaTreeModule,
+  ]
+})
+export class MatchaComponentsModule { }

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

@@ -0,0 +1,63 @@
+export const datepickerArgtypes = {
+    disabled: {
+        description: 'Whether the datepicker-input is disabled.',
+        control: 'boolean',
+        defaultValue: true,
+        table: {
+            defaultValue: { summary: true },
+        },
+    },
+    dateFilter: {
+        description:
+            'Function that can be used to filter out dates within the datepicker.',
+        control: 'function',
+        table: {
+            type: { summary: 'DateFilterFn<D>' },
+        },
+    },
+    matDatepicker: {
+        description: 'The datepicker that this input is associated with.',
+        control: null, // Como é uma referência a um componente MatDatepicker, não precisa de um controle.
+        table: {
+            disable: true, // Desativamos a tabela para evitar a exibição de informações desnecessárias.
+        },
+    },
+    max: {
+        description: 'The maximum valid date.',
+        control: 'date',
+        table: {
+            type: { summary: 'D | null' },
+        },
+    },
+    min: {
+        description: 'The minimum valid date.',
+        control: 'date',
+        table: {
+            type: { summary: 'D | null' },
+        },
+    },
+    value: {
+        description: 'The value of the input.',
+        control: 'date',
+        table: {
+            type: { summary: 'D | null' },
+        },
+    },
+    dateChange: {
+        description: 'Emits when a change event is fired on this <input>.',
+        action: 'dateChange',
+    },
+    dateInput: {
+        description: 'Emits when a change event is fired on this <input>.',
+        action: 'dateInput',
+    },
+    color: {
+        description: 'Theme color palette',
+        control: 'select',
+        defaultValue: 'accent',
+        table: {
+            defaultValue: { summary: 'accent' },
+        },
+        options: ['primary', 'accent', 'warn'],
+    },
+};

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

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

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

@@ -0,0 +1,73 @@
+import { Story } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs";
+import * as ComponentStories from "./datepicker.stories";
+
+<Meta title="Atoms / Datepicker / Documentação" />
+
+# Datepicker
+
+> _datepicker_ permite que os usuários insiram uma data por meio de entrada de texto ou escolhendo uma data no calendário. É composto por vários componentes, diretivas e módulo de implementação de datas que funcionam em conjunto.
+
+---
+
+### 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">Datepicker - Date range picker comparison ranges</span>
+            <div class="matcha-card background-bg">
+                <Story of={ComponentStories.DatepickerComparison} />
+            </div>
+
+            <div class="d-flex-column">
+
+                ```html
+                <form>
+                    <mat-form-field matcha-datepicker appearance="outline" [color]="color">
+                        <mat-label>First campaign</mat-label>
+                        <mat-date-range-input
+                            [formGroup]="campaignOne"
+                            [rangePicker]="campaignOnePicker"
+                            [comparisonStart]="campaignTwo.value.start"
+                            [comparisonEnd]="campaignTwo.value.end">
+                            <input matStartDate placeholder="Start date" formControlName="start">
+                            <input matEndDate placeholder="End date" formControlName="end">
+                        </mat-date-range-input>
+                        <mat-hint>MM/DD/YYYY - MM/DD/YYYY</mat-hint>
+                        <mat-datepicker-toggle matIconSuffix [for]="campaignOnePicker"></mat-datepicker-toggle>
+                        <mat-date-range-picker #campaignOnePicker></mat-date-range-picker>
+                    </mat-form-field>
+
+                    <mat-form-field matcha-datepicker appearance="outline" [color]="color">
+                        <mat-label>Second campaign</mat-label>
+                        <mat-date-range-input
+                            [formGroup]="campaignTwo"
+                            [rangePicker]="campaignTwoPicker"
+                            [comparisonStart]="campaignOne.value.start"
+                            [comparisonEnd]="campaignOne.value.end">
+                            <input matStartDate placeholder="Start date" formControlName="start">
+                            <input matEndDate placeholder="End date" formControlName="end">
+                        </mat-date-range-input>
+                        <mat-datepicker-toggle matIconSuffix [for]="campaignTwoPicker"></mat-datepicker-toggle>
+                        <mat-hint>MM/DD/YYYY - MM/DD/YYYY</mat-hint>
+                        <mat-date-range-picker #campaignTwoPicker></mat-date-range-picker>
+                    </mat-form-field>
+                </form>
+                ```
+
+            </div>
+        </div>
+    </div>
+
+</div>
+
+<br />
+
+### Installation
+
+`import {MatDatepickerModule} from '@angular/material/datepicker';`
+
+[Official documentation](https://https://material.angular.io/components/datepicker/overview)
+
+<br />

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

@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core';
+import { MatchaDatepickerDirective } from './datepicker.directive';
+
+@NgModule({
+    declarations: [MatchaDatepickerDirective],
+    imports: [],
+    exports: [MatchaDatepickerDirective],
+})
+export class MatchaDatepickerModule {}

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

@@ -0,0 +1,277 @@
+import {
+    applicationConfig,
+    Meta,
+    moduleMetadata,
+    StoryObj,
+} from '@storybook/angular';
+import { NgIf, NgFor, AsyncPipe, JsonPipe } from '@angular/common';
+import { CommonModule } from '@angular/common';
+import {
+    FormControl,
+    FormGroup,
+    FormsModule,
+    ReactiveFormsModule,
+} from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatButtonModule } from '@angular/material/button';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import {
+    MatCalendarCellClassFunction,
+    MatDatepickerModule,
+} from '@angular/material/datepicker';
+import { MatNativeDateModule } from '@angular/material/core';
+import { MatchaDatepickerDirective } from './datepicker.directive';
+import { datepickerArgtypes } from './datepicker.argtypes';
+
+export default {
+    title: 'Atoms / Datepicker',
+    decorators: [
+        applicationConfig({
+            providers: [provideAnimations()],
+        }),
+        moduleMetadata({
+            imports: [
+                CommonModule,
+                FormsModule,
+                MatFormFieldModule,
+                MatInputModule,
+                MatDatepickerModule,
+                MatNativeDateModule,
+                MatButtonModule,
+                ReactiveFormsModule,
+                NgIf,
+                JsonPipe,
+                NgFor,
+                AsyncPipe,
+            ],
+            declarations: [MatchaDatepickerDirective],
+        }),
+    ],
+    args: {
+        color: 'accent',
+    },
+    argTypes: datepickerArgtypes,
+    parameters: {
+        controls: { expanded: true },
+    },
+} as Meta;
+
+const today = new Date();
+const month = today.getMonth();
+const year = today.getFullYear();
+
+const campaignOne = new FormGroup({
+    start: new FormControl(new Date(year, month, 13)),
+    end: new FormControl(new Date(year, month, 16)),
+});
+const campaignTwo = new FormGroup({
+    start: new FormControl(new Date(year, month, 15)),
+    end: new FormControl(new Date(year, month, 19)),
+});
+
+export const DatepickerComparison: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+            campaignOne,
+            campaignTwo,
+        },
+        template: `
+        <div class="d-flex-center-center">
+            <form class="matcha-card background-surface d-flex-column gap-16 max-w-256">
+                <mat-form-field matcha-datepicker appearance="outline" [color]="color">
+                    <mat-label>First campaign</mat-label>
+                    <mat-date-range-input
+                        [formGroup]="campaignOne"
+                        [rangePicker]="campaignOnePicker"
+                        [comparisonStart]="campaignTwo.value.start"
+                        [comparisonEnd]="campaignTwo.value.end">
+                        <input matStartDate placeholder="Start date" formControlName="start">
+                        <input matEndDate placeholder="End date" formControlName="end">
+                    </mat-date-range-input>
+                    <mat-hint>MM/DD/YYYY - MM/DD/YYYY</mat-hint>
+                    <mat-datepicker-toggle matIconSuffix [for]="campaignOnePicker"></mat-datepicker-toggle>
+                    <mat-date-range-picker #campaignOnePicker></mat-date-range-picker>
+                </mat-form-field>
+                
+                <mat-form-field matcha-datepicker appearance="outline" [color]="color">
+                    <mat-label>Second campaign</mat-label>
+                    <mat-date-range-input
+                        [formGroup]="campaignTwo"
+                        [rangePicker]="campaignTwoPicker"
+                        [comparisonStart]="campaignOne.value.start"
+                        [comparisonEnd]="campaignOne.value.end">
+                        <input matStartDate placeholder="Start date" formControlName="start">
+                        <input matEndDate placeholder="End date" formControlName="end">
+                    </mat-date-range-input>
+                    <mat-datepicker-toggle matIconSuffix [for]="campaignTwoPicker"></mat-datepicker-toggle>
+                    <mat-hint>MM/DD/YYYY - MM/DD/YYYY</mat-hint>
+                    <mat-date-range-picker #campaignTwoPicker></mat-date-range-picker>
+                </mat-form-field>
+            </form>
+        </div>
+        `,
+    }),
+    name: 'Datepicker comparison',
+};
+
+const range = new FormGroup({
+    start: new FormControl<Date | null>(null),
+    end: new FormControl<Date | null>(null),
+});
+
+export const DatepickerIntegration: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+            range,
+        },
+        template: `
+        <div class="d-flex-center-center">
+            <form class="matcha-card background-surface d-flex-column gap-16 max-w-256">
+                <mat-form-field matcha-datepicker appearance="outline" [color]="color">
+                        
+                    <mat-label>Enter a date range</mat-label>
+                    <mat-date-range-input [formGroup]="range" [rangePicker]="picker">
+                    <input matStartDate formControlName="start" placeholder="Start date">
+                    <input matEndDate formControlName="end" placeholder="End date">
+                    </mat-date-range-input>
+                    <mat-hint>MM/DD/YYYY - MM/DD/YYYY</mat-hint>
+                    <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+                    <mat-date-range-picker #picker></mat-date-range-picker>
+                
+                    <mat-error *ngIf="range.controls.start.hasError('matStartDateInvalid')">Invalid start date</mat-error>
+                    <mat-error *ngIf="range.controls.end.hasError('matEndDateInvalid')">Invalid end date</mat-error>
+                    
+                </mat-form-field>
+                <p>Selected range: {{range.value | json}}</p>
+            </form>
+        </div>
+        `,
+    }),
+    name: 'Datepicker Integration',
+};
+
+export const DatepickerOpenMethod: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+            range,
+        },
+        template: `
+        <div class="d-flex-center-center">
+            <form class="matcha-card background-surface d-flex-column gap-16 max-w-256">
+                <mat-form-field matcha-datepicker appearance="outline" [color]="color">
+                    <mat-label>Choose a date</mat-label>
+                    <input matInput [matDatepicker]="picker">
+                    <mat-hint>MM/DD/YYYY</mat-hint>
+                    <mat-datepicker #picker></mat-datepicker>
+                </mat-form-field>
+                <button mat-raised-button (click)="picker.open()">Open</button>
+            </form>
+        </div>
+        `,
+    }),
+    name: 'Datepicker Open Method',
+};
+
+export const DatepickerBasic: 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">
+                <mat-form-field appearance="outline" [color]="color">
+                    <mat-label>Enter a date range</mat-label>
+                    <mat-date-range-input [rangePicker]="picker">
+                    <input matStartDate placeholder="Start date">
+                    <input matEndDate placeholder="End date">
+                    </mat-date-range-input>
+                    <mat-hint>MM/DD/YYYY - MM/DD/YYYY</mat-hint>
+                    <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+                    <mat-date-range-picker #picker></mat-date-range-picker>
+                </mat-form-field>
+            </form>
+        </div>
+        `,
+    }),
+    name: 'Basic Datepicker',
+};
+
+export const DatepickerActionButtons: 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">
+            <mat-form-field appearance="outline" [color]="color">
+                <mat-label>Choose a date</mat-label>
+                <input matInput [matDatepicker]="datepicker">
+                <mat-hint>MM/DD/YYYY</mat-hint>
+                <mat-datepicker-toggle matIconSuffix [for]="datepicker"></mat-datepicker-toggle>
+                <mat-datepicker #datepicker>
+                <mat-datepicker-actions>
+                    <button mat-button matDatepickerCancel>Cancel</button>
+                    <button mat-raised-button color="primary" matDatepickerApply>Apply</button>
+                </mat-datepicker-actions>
+                </mat-datepicker>
+            </mat-form-field>
+
+            <mat-form-field appearance="outline" [color]="color">
+                <mat-label>Enter a date range</mat-label>
+                <mat-date-range-input [rangePicker]="rangePicker">
+                <input matStartDate placeholder="Start date">
+                <input matEndDate placeholder="End date">
+                </mat-date-range-input>
+                <mat-hint>MM/DD/YYYY - MM/DD/YYYY</mat-hint>
+                <mat-datepicker-toggle matIconSuffix [for]="rangePicker"></mat-datepicker-toggle>
+                <mat-date-range-picker #rangePicker>
+                <mat-date-range-picker-actions>
+                    <button mat-button matDateRangePickerCancel>Cancel</button>
+                    <button mat-raised-button color="primary" matDateRangePickerApply>Apply</button>
+                </mat-date-range-picker-actions>
+                </mat-date-range-picker>
+            </mat-form-field>
+            </form>
+        </div>
+        `,
+    }),
+    name: 'Action Buttons',
+};
+
+const dateClass: MatCalendarCellClassFunction<Date> = (cellDate, view) => {
+    // Only highligh dates inside the month view.
+    if (view === 'month') {
+        const date = cellDate.getDate();
+        // Highlight the 1st and 20th day of each month.
+        return date === 1 || date === 20
+            ? 'background-accent-alpha border-radius-circle'
+            : '';
+    }
+    return '';
+};
+export const DatepickerCustomDateHighlight: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+            dateClass,
+        },
+        template: `
+        <div class="d-flex-center-center">
+            <form class="matcha-card background-surface d-flex-column gap-16 max-w-256">
+            <mat-form-field appearance="outline" [color]="color">
+            
+                <mat-label>Choose a date</mat-label>
+                <input matInput [matDatepicker]="picker">
+                <mat-hint>MM/DD/YYYY</mat-hint>
+                <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+                <mat-datepicker [dateClass]="dateClass" #picker></mat-datepicker>
+                
+            </mat-form-field>
+            </form>
+        </div>
+        `,
+    }),
+    name: 'Custom Date Highlight',
+};

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

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatchaDialogDirective } from './matcha-dialog.directive';
+
+@NgModule({
+  declarations: [MatchaDialogDirective],
+  imports: [
+    CommonModule
+  ],
+  exports:[
+      MatchaDialogDirective
+  ]
+})
+export class MatchaDialogModule { }

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

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