matcha-components 1.0.8 → 1.0.14

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

@@ -1,69 +0,0 @@
-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,10 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatchaTooltipDirective } from './tooltip.directive';
-
-@NgModule({
-    declarations: [MatchaTooltipDirective],
-    imports: [CommonModule],
-    exports: [MatchaTooltipDirective],
-})
-export class MatchaTooltipModule {}

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

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

@@ -1,42 +0,0 @@
-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.directive.ts

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

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

@@ -1,49 +0,0 @@
-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,10 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatchaTreeDirective } from './tree.directive';
-
-@NgModule({
-    declarations: [MatchaTreeDirective],
-    imports: [CommonModule],
-    exports: [MatchaTreeDirective],
-})
-export class MatchaTreeModule {}

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

@@ -1,130 +0,0 @@
-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/tsconfig.lib.json

@@ -1,18 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/lib",
-    "declaration": true,
-    "declarationMap": true,
-    "inlineSources": true,
-    "types": []
-  },
-  "include": [
-    "**/**/**/*.stories.ts",
-    "projects/matcha-components/src/lib/**/*.stories.ts"
-  ],
-  "exclude": [
-    "**/*.spec.ts"
-  ]
-}

package/tsconfig.lib.prod.json

@@ -1,10 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "./tsconfig.lib.json",
-  "compilerOptions": {
-    "declarationMap": false
-  },
-  "angularCompilerOptions": {
-    "compilationMode": "partial"
-  }
-}

package/tsconfig.spec.json

@@ -1,14 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/spec",
-    "types": [
-      "jasmine"
-    ]
-  },
-  "include": [
-    "**/*.spec.ts",
-    "**/*.d.ts"
-  ]
-}