matcha-components 1.0.6 → 1.0.7

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

@@ -0,0 +1,100 @@
+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 { MatToolbarModule } from '@angular/material/toolbar';
+import { MatButtonModule } from '@angular/material/button';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { toolbarArgtypes } from './toolbar.argtypes';
+
+export default {
+    title: 'Atoms / Toolbar',
+    decorators: [
+        applicationConfig({
+            providers: [provideAnimations()],
+        }),
+
+        moduleMetadata({
+            imports: [CommonModule, MatIconModule, MatToolbarModule, MatButtonModule, NgIf, JsonPipe, NgFor, AsyncPipe],
+        }),
+    ],
+    args: {
+        color: 'primary',
+    },
+    argTypes: toolbarArgtypes,
+    parameters: {
+        controls: { expanded: true },
+    },
+} as Meta;
+
+export const ToolbarOverview: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+        template: `
+        <p>
+        <mat-toolbar>
+            <span>My Application</span>
+        </mat-toolbar>
+        </p>
+
+        <p>
+        <mat-toolbar>
+        <button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
+            <span class="i-matcha-favorite"></span>
+        </button>
+        <span>My App</span>
+        <span class="example-spacer"></span>
+        <button mat-icon-button class="example-icon favorite-icon" aria-label="Example icon-button with heart icon">
+            <span class="i-matcha-favorite"></span>
+        </button>
+        <button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
+        <span class="i-matcha-favorite"></span>
+        </button>
+        </mat-toolbar>
+        </p>
+
+        <p>
+        <mat-toolbar [color]="color">
+            <button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
+            <span class="i-matcha-favorite"></span>
+            </button>
+            <span>My App</span>
+            <span class="example-spacer"></span>
+            <button mat-icon-button class="example-icon favorite-icon" aria-label="Example icon-button with heart icon">
+            <span class="i-matcha-favorite"></span>
+            </button>
+            <button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
+            <span class="i-matcha-favorite"></span>
+            </button>
+        </mat-toolbar>
+        </p>
+
+        <p>
+        <mat-toolbar [color]="color">
+            <mat-toolbar-row>
+            <span>My App</span>
+            <span class="example-spacer"></span>
+            <button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
+                <span class="i-matcha-favorite"></span>
+            </button>
+            </mat-toolbar-row>
+
+            <mat-toolbar-row>
+            <span>Second Line</span>
+            <span class="example-spacer"></span>
+            <button mat-icon-button class="example-icon favorite-icon" aria-label="Example icon-button with heart icon">
+                <span class="i-matcha-favorite"></span>
+            </button>
+            <button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
+                <span class="i-matcha-favorite"></span>
+            </button>
+            </mat-toolbar-row>
+        </mat-toolbar>
+        </p>
+
+        `,
+    }),
+    name: ' Toolbar Overview',
+};

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

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

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

@@ -0,0 +1,69 @@
+import { Story } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs";
+import * as ComponentStories from "./tooltip.stories";
+
+<Meta title="Atoms / Tooltip / Documentação" />
+
+# Tooltip
+
+> _tooltip_ "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">Tooltip overview</span>
+            <div class="matcha-card background-bg">
+                <Story of={ComponentStories.TooltipOverview} />
+            </div>
+
+            <div class="d-flex-column">
+
+                ```html
+                <div matTooltip="4" matTooltipOverlap="false" class="demo-section">Text with a tooltip</div>
+
+                <div matTooltip="1" matTooltipSize="large" class="demo-section">Text with large tooltip</div>
+
+                <div class="demo-section">
+                Button with a tooltip on the left
+                <button mat-raised-button color="primary"
+                    matTooltip="8" matTooltipPosition="before" matTooltipColor="accent">
+                    Action
+                </button>
+                </div>
+
+                <div class="demo-section">
+                    Button toggles tooltip visibility
+                    <button mat-raised-button matTooltip="7" [matTooltipHidden]="hidden" (click)="toggleTooltipVisibility()">
+                        Hide
+                    </button>
+                </div>
+
+                <div class="demo-section">
+                Icon with a tooltip
+                <mat-icon matTooltip="15" matTooltipColor="warn">home</mat-icon>
+                    <!-- Include text description of the icon's meaning for screen-readers -->
+                    <span class="cdk-visually-hidden">
+                    Example with a home icon with overlaid tooltip showing the number 15
+                    </span>
+                </div>
+                ```
+
+            </div>
+        </div>
+    </div>
+
+</div>
+
+<br />
+
+### Installation
+
+`import {MatTooltipModule} from '@angular/material/tooltip';`
+
+[Official documentation](https://https://material.angular.io/components/tooltip/overview)
+
+<br />

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

@@ -1,12 +1,10 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { MatchaTooltipDirective } from './matcha-tooltip.directive';
+import { MatchaTooltipDirective } from './tooltip.directive';
 
 @NgModule({
-  declarations: [MatchaTooltipDirective],
-  imports: [
-    CommonModule
-  ],
-  exports:[MatchaTooltipDirective]
+    declarations: [MatchaTooltipDirective],
+    imports: [CommonModule],
+    exports: [MatchaTooltipDirective],
 })
-export class MatchaTooltipModule { }
+export class MatchaTooltipModule {}

package/src/lib/matcha-tooltip/tooltip.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 { MatTooltipModule } from '@angular/material/tooltip';
+import { MatButtonModule } from '@angular/material/button';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { tooltipArgtypes } from './tooltip.argtypes';
+
+export default {
+    title: 'Atoms / Tooltip',
+    decorators: [
+        applicationConfig({
+            providers: [provideAnimations()],
+        }),
+
+        moduleMetadata({
+            imports: [CommonModule, MatIconModule, MatTooltipModule, MatButtonModule, NgIf, JsonPipe, NgFor, AsyncPipe],
+        }),
+    ],
+    args: {
+        matTooltipColor: 'primary',
+    },
+    argTypes: tooltipArgtypes,
+    parameters: {
+        controls: { expanded: true },
+    },
+} as Meta;
+
+let hidden = false;
+function toggleTooltipVisibility() {
+    hidden = !hidden;
+}
+
+export const TooltipOverview: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+        template: `
+        <div class="d-flex-column w-500 gap-16">
+            <div class="d-flex">
+                <div matTooltip="4" matTooltipOverlap="false" class="demo-section">Text with a tooltip</div>
+            </div>
+            <div class="d-flex">
+                <div matTooltip="1" matTooltipSize="large" class="demo-section">Text with large tooltip</div>
+            </div>
+            <div class="d-flex">
+                <div class="demo-section">
+                    Button with a tooltip on the left
+                    <button mat-raised-button [color]="color"
+                        matTooltip="8" matTooltipPosition="before" matTooltipColor="accent">
+                        Action
+                    </button>
+                </div>
+            </div>
+            <div class="d-flex">
+                <div class="demo-section">
+                    Button toggles tooltip visibility
+                    <button mat-raised-button matTooltip="7" [matTooltipHidden]="hidden" (click)="toggleTooltipVisibility()">
+                        Hide
+                    </button>
+                </div>
+            </div>
+            <div class="d-flex">
+                <div class="demo-section">
+                Icon with a tooltip
+                <span class="i-matcha-home" matTooltip="15" matTooltipColor="warn"></span>
+                    <!-- Include text description of the icon's meaning for screen-readers -->
+                    <span class="cdk-visually-hidden">
+                    Example with a home icon with overlaid tooltip showing the number 15
+                    </span>
+                </div>
+            </div>
+        </div>
+        `,
+    }),
+    name: ' Tooltip Overview',
+};

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

@@ -0,0 +1,42 @@
+export const treeArgtypes = {
+    disabled: {
+        description: 'Whether the component is disabled.',
+        control: 'boolean',
+        defaultValue: false,
+        table: {
+            type: { summary: 'boolean' },
+        },
+    },
+    data: {
+        description: "The tree node's data.",
+        control: 'object',
+        defaultValue: {},
+        table: {
+            type: { summary: 'T' },
+        },
+    },
+    defaultTabIndex: {
+        description: 'Tabindex to which to fall back to if no value is set.',
+        control: 'number',
+        defaultValue: 0,
+        table: {
+            type: { summary: 'number' },
+        },
+    },
+    isExpanded: {
+        description: 'Whether the node is expanded.',
+        control: 'boolean',
+        defaultValue: false,
+        table: {
+            type: { summary: 'boolean' },
+        },
+    },
+    level: {
+        description: 'The level of the tree node.',
+        control: 'number',
+        defaultValue: 0,
+        table: {
+            type: { summary: 'number' },
+        },
+    },
+};

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

@@ -0,0 +1,49 @@
+import { Story } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs";
+import * as ComponentStories from "./tree.stories";
+
+<Meta title="Atoms / Tree / Documentação" />
+
+# Tree
+
+> _tree_ "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">Tree overview</span>
+            <div class="matcha-card background-bg">
+                <Story of={ComponentStories.TreeOverview} />
+            </div>
+
+            <div class="d-flex-column">
+
+                ```html
+
+                <mat-tree>
+                    <mat-tree-node> parent node </mat-tree-node>
+                    <mat-tree-node> -- child node1 </mat-tree-node>
+                    <mat-tree-node> -- child node2 </mat-tree-node>
+                </mat-tree>
+
+                ```
+
+            </div>
+        </div>
+    </div>
+
+</div>
+
+<br />
+
+### Installation
+
+`import {MatTreeModule} from '@angular/material/tree';`
+
+[Official documentation](https://https://material.angular.io/components/tree/overview)
+
+<br />

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

@@ -1,12 +1,10 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { MatchaTreeDirective } from './matcha-tree.directive';
+import { MatchaTreeDirective } from './tree.directive';
 
 @NgModule({
-  declarations: [MatchaTreeDirective],
-  imports: [
-    CommonModule
-  ],
-  exports:[MatchaTreeDirective]
+    declarations: [MatchaTreeDirective],
+    imports: [CommonModule],
+    exports: [MatchaTreeDirective],
 })
-export class MatchaTreeModule { }
+export class MatchaTreeModule {}

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

@@ -0,0 +1,130 @@
+import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+
+import { NgIf, NgFor, AsyncPipe, JsonPipe, DatePipe } from '@angular/common';
+import { CommonModule } from '@angular/common';
+
+import { provideAnimations } from '@angular/platform-browser/animations';
+
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { MatTreeFlatDataSource, MatTreeFlattener, MatTreeModule } from '@angular/material/tree';
+import { FlatTreeControl } from '@angular/cdk/tree';
+
+import { treeArgtypes } from './tree.argtypes';
+import { MatchaTreeDirective } from './tree.directive';
+
+/**
+ * Food data with nested structure.
+ * Each node has a name and an optional list of children.
+ */
+interface FoodNode {
+    name: string;
+    children?: FoodNode[];
+}
+
+const TREE_DATA: FoodNode[] = [
+    {
+        name: 'Fruit',
+        children: [{ name: 'Apple' }, { name: 'Banana' }, { name: 'Fruit loops' }],
+    },
+    {
+        name: 'Vegetables',
+        children: [
+            {
+                name: 'Green',
+                children: [{ name: 'Broccoli' }, { name: 'Brussels sprouts' }],
+            },
+            {
+                name: 'Orange',
+                children: [{ name: 'Pumpkins' }, { name: 'Carrots' }],
+            },
+        ],
+    },
+];
+
+/** Flat node with expandable and level information */
+interface ExampleFlatNode {
+    expandable: boolean;
+    name: string;
+    level: number;
+}
+
+/**
+ * @title Tree with flat nodes
+ */
+let transformer = (node: FoodNode, level: number) => {
+    return {
+        expandable: !!node.children && node.children.length > 0,
+        name: node.name,
+        level: level,
+    };
+};
+
+let treeControl = new FlatTreeControl<ExampleFlatNode>(
+    (node) => node.level,
+    (node) => node.expandable
+);
+
+let treeFlattener = new MatTreeFlattener(
+    transformer,
+    (node) => node.level,
+    (node) => node.expandable,
+    (node) => node.children
+);
+
+let dataSource = new MatTreeFlatDataSource(treeControl, treeFlattener);
+
+dataSource.data = TREE_DATA;
+
+const hasChild = (_: number, node: ExampleFlatNode) => node.expandable;
+
+export default {
+    title: 'Atoms / Tree',
+    decorators: [
+        applicationConfig({
+            providers: [provideAnimations()],
+        }),
+
+        moduleMetadata({
+            imports: [CommonModule, MatTreeModule, NgIf, JsonPipe, NgFor, AsyncPipe, DatePipe, MatIconModule, MatButtonModule],
+            declarations: [MatchaTreeDirective],
+        }),
+    ],
+    args: {},
+    argTypes: treeArgtypes,
+    parameters: {
+        controls: { expanded: true },
+    },
+} as Meta;
+
+export const TreeOverview: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+            dataSource,
+            treeControl,
+            treeFlattener,
+            transformer,
+            hasChild,
+        },
+        template: `
+        <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
+            <!-- This is the tree node template for leaf nodes -->
+            <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
+                <!-- use a disabled button to provide padding for tree leaf -->
+                <button mat-icon-button disabled></button>
+                {{node.name}}
+            </mat-tree-node>
+            <!-- This is the tree node template for expandable nodes -->
+            <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
+                <button mat-icon-button matTreeNodeToggle
+                        [attr.aria-label]="'Toggle ' + node.name">
+                        <span class="{{treeControl.isExpanded(node) ? 'i-matcha-chevron-down' : 'i-matcha-chevron-right'}}"></span>
+                </button>
+                {{node.name}}
+            </mat-tree-node>
+        </mat-tree>
+        `,
+    }),
+    name: 'Tree Overview',
+};

package/src/public-api.ts

@@ -22,8 +22,8 @@
 // MODULES
 // -----------------------------------------------------------
 //
-export * from './lib/matcha-card/matcha-card.module';
-export * from './lib/matcha-title/matcha-title.module';
+export * from './lib/matcha-card/card.module';
+export * from './lib/matcha-headers/headers.module';
 // ALL COMPONENTS MODULE
 export * from './lib/matcha-components.module';
 
@@ -31,18 +31,15 @@ export * from './lib/matcha-autocomplete/autocomplete.module';
 export * from './lib/matcha-autocomplete/autocomplete.directive';
 export * from './lib/matcha-autocomplete/autocomplete-overview.directive';
 export * from './lib/matcha-badge/badge.module';
-export * from './lib/matcha-badge/matcha-badge.directive';
+export * from './lib/matcha-badge/badge.directive';
 export * from './lib/matcha-tabs/tabs.module';
-export * from './lib/matcha-tabs/matcha-tabs.directive';
+export * from './lib/matcha-tabs/tabs.directive';
 export * from './lib/matcha-bottom-sheet/bottom-sheet.module';
-export * from './lib/matcha-bottom-sheet/matcha-bottom-sheet.directive';
+export * from './lib/matcha-bottom-sheet/bottom-sheet.directive';
 export * from './lib/matcha-button-toggle/button-toggle.module';
 export * from './lib/matcha-button-toggle/matcha-button-toggle.directive';
-export * from './lib/matcha-buttons/buttons.module';
-export * from './lib/matcha-buttons/matcha-btn-md.directive';
-export * from './lib/matcha-buttons/matcha-btn-size.directive';
-export * from './lib/matcha-buttons/matcha-btn-xl.directive';
-export * from './lib/matcha-buttons/matcha-btn-pill.directive';
+export * from './lib/matcha-button/button.module';
+export * from './lib/matcha-button/button.directive';
 export * from './lib/matcha-checkbox/checkbox.module';
 export * from './lib/matcha-checkbox/checkbox.directive';
 export * from './lib/matcha-chips/chips.module';
@@ -52,21 +49,23 @@ export * from './lib/matcha-datepicker/datepicker.directive';
 export * from './lib/matcha-dialog/dialog.module';
 export * from './lib/matcha-dialog/matcha-dialog.directive';
 export * from './lib/matcha-divider/divider.module';
-export * from './lib/matcha-divider/matcha-divider.directive';
-export * from './lib/matcha-expansion-panel/expansion-panel.module';
-export * from './lib/matcha-expansion-panel/matcha-expansion-panel.directive';
+export * from './lib/matcha-divider/divider.directive';
+export * from './lib/matcha-elevation/elevation.module';
+export * from './lib/matcha-elevation/elevation.directive';
+export * from './lib/matcha-expansion/expansion.module';
+export * from './lib/matcha-expansion/expansion.directive';
 export * from './lib/matcha-forms/forms.module';
-export * from './lib/matcha-forms/matcha-form-input-text.directive';
-export * from './lib/matcha-forms/matcha-form-field-appearance.directive';
+export * from './lib/matcha-forms/form-field.directive';
 export * from './lib/matcha-icon/icon.module';
-export * from './lib/matcha-icon/matcha-icon-position-pre.directive';
-export * from './lib/matcha-icon/matcha-icon-position-pos.directive';
+export * from './lib/matcha-input/input.directive';
 export * from './lib/matcha-list/list.module';
-export * from './lib/matcha-list/matcha-list.directive';
+export * from './lib/matcha-list/list.directive';
 export * from './lib/matcha-menu/menu.module';
-export * from './lib/matcha-menu/matcha-menu.directive';
+export * from './lib/matcha-menu/menu.directive';
+export * from './lib/matcha-sidenav/sidenav.module';
+export * from './lib/matcha-sidenav/sidenav.directive';
 export * from './lib/matcha-paginator/paginator.module';
-export * from './lib/matcha-paginator/matcha-paginator.directive';
+export * from './lib/matcha-paginator/paginator.directive';
 export * from './lib/matcha-progress-bar/progress-bar.module';
 export * from './lib/matcha-progress-bar/progress-bar.directive';
 export * from './lib/matcha-progress-spinner/progress-spinner.module';
@@ -74,20 +73,20 @@ export * from './lib/matcha-progress-spinner/progress-spinner.directive';
 export * from './lib/matcha-radio-button/radio-button.module';
 export * from './lib/matcha-radio-button/matcha-radio-button.directive';
 export * from './lib/matcha-select/select.module';
-export * from './lib/matcha-select/matcha-select.directive';
+export * from './lib/matcha-select/select.directive';
 export * from './lib/matcha-slide-toggle/slide-toggle.module';
 export * from './lib/matcha-slide-toggle/slide-toggle.directive';
 export * from './lib/matcha-slider/slider.module';
 export * from './lib/matcha-slider/matcha-slider.directive';
-export * from './lib/matcha-snackbar/snackbar.module';
-export * from './lib/matcha-snackbar/matcha-snackbar.directive';
+export * from './lib/matcha-snackbar/snack-bar.module';
+export * from './lib/matcha-snackbar/snack-bar.directive';
 export * from './lib/matcha-sort-header/sort-header.module';
-export * from './lib/matcha-sort-header/matcha-sort-header.directive';
+export * from './lib/matcha-sort-header/sort-header.directive';
 export * from './lib/matcha-stepper/stepper.module';
-export * from './lib/matcha-stepper/matcha-stepper.directive';
+export * from './lib/matcha-stepper/stepper.directive';
 export * from './lib/matcha-table/table.module';
-export * from './lib/matcha-table/matcha-table.directive';
+export * from './lib/matcha-table/table.directive';
 export * from './lib/matcha-tooltip/tooltip.module';
-export * from './lib/matcha-tooltip/matcha-tooltip.directive';
+export * from './lib/matcha-tooltip/tooltip.directive';
 export * from './lib/matcha-tree/tree.module';
-export * from './lib/matcha-tree/matcha-tree.directive';
+export * from './lib/matcha-tree/tree.directive';

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

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

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

@@ -1,27 +0,0 @@
-import { NgModule } from '@angular/core';
-
-import { MatchaBtnMdDirective } from './matcha-btn-md.directive';
-import { MatchaBtnSizeDirective } from './matcha-btn-size.directive';
-import { MatchaBtnXlDirective } from './matcha-btn-xl.directive';
-import { MatchaBtnPillDirective } from './matcha-btn-pill.directive';
-
-
-@NgModule({
-    declarations: [
-        MatchaBtnMdDirective,
-        MatchaBtnSizeDirective,
-        MatchaBtnXlDirective,
-        MatchaBtnPillDirective,
-    ],
-    imports: [
-    ],
-    exports:[
-        MatchaBtnMdDirective,
-        MatchaBtnSizeDirective,
-        MatchaBtnXlDirective,
-        MatchaBtnPillDirective
-
-    ]
-
-})
-export class MatchaButtonsModule { }