matcha-components 20.12.0 → 20.15.0

package/src/lib/matcha-grid/grid-argtype.ts

@@ -0,0 +1,67 @@
+export const gridArgtypes = {
+    loading: {
+        description: 'Quando o grid estiver carregando, o elemento receberá uma classe de loading',
+        control: 'boolean',
+        defaultValue: 'true',
+        table: {
+            defaultValue: { summary: 'true' },
+        },
+    },
+    breakpoint: {
+        description: 'Seleciona um ou mais breakpoints para o grid',
+        control: 'text',
+        defaultValue: '',
+        table: {
+            defaultValue: { summary: 'sm | md | lg | xl' },
+        },
+        options: ['sm', 'md', 'lg', 'xl'],
+    },
+    col: {
+        description: 'Em quantas colunas o grid será dividido',
+        control: 'text',
+        defaultValue: 'home',
+        table: {
+            type: { summary: 'string | undefined | null' },
+        },
+    },
+    colspan: {
+        description: 'Quantidade de colunas que o elemento irá ocupar',
+        control: 'text',
+        defaultValue: 'home',
+        table: {
+            type: { summary: 'string | undefined | null' },
+        },
+    },
+    rowspan: {
+        description: 'Quantidade de linhas que o elemento irá ocupar',
+        control: 'text',
+        defaultValue: 'home',
+        table: {
+            type: { summary: 'string | undefined | null' },
+        },
+    },
+    gap: {
+        description: 'Espaçamento entre as colunas',
+        control: 'text',
+        defaultValue: 'home',
+        table: {
+            type: { summary: 'string | undefined | null' },
+        },
+    },
+    span: {
+        description: 'Select span size',
+        control: 'text',
+        defaultValue: '1',
+        table: {
+            type: { summary: 'string | undefined | null' },
+        },
+    },
+    direction: {
+        description: 'Select span direction',
+        control: 'text',
+        defaultValue: 'c',
+        table: {
+            type: { summary: 'c | r | null' },
+        },
+    },
+};

package/src/lib/matcha-grid/grid.component.html

@@ -0,0 +1,3 @@
+<div [class]="classes">
+    <ng-content></ng-content>
+</div>

package/src/lib/matcha-grid/grid.component.ts

@@ -0,0 +1,114 @@
+import { Component, ElementRef, Input, Renderer2 } from '@angular/core';
+
+@Component({
+    selector: 'matcha-grid',
+    templateUrl: './grid.component.html',
+    styleUrls: ['./grid.component.scss'],
+    standalone: false
+})
+export class MatchaGridComponent {
+    @Input()
+    breakpoint: string = '';
+
+    @Input()
+    col: string = '';
+
+    @Input()
+    gap: string = '';
+
+    @Input()
+    class: string = '';
+
+    @Input()
+    span: string = '';
+
+    @Input()
+    rowspan: string = '';
+
+    @Input()
+    colspan: string = '';
+
+    @Input()
+    direction: string = '';
+
+    @Input()
+    loading: boolean | string = false;
+
+    private getStringSplited(inputValue: string): string[] {
+        const stringWithoutSpaces = inputValue.replace(/\s+/g, '');
+        return stringWithoutSpaces.split(',');
+    }
+
+    private getGridClasses(breakpoint: string, col: string): string {
+        const breakpoints = this.getStringSplited(breakpoint);
+        const columns = this.getStringSplited(col);
+        let breakpointClasses = '';
+        for (let i = 0; i < breakpoints.length; i++) {
+            if (breakpoints[i] === '' || breakpoints[i] === 'xs') {
+                breakpointClasses += `grid-${columns[i]} `;
+            }
+            if (breakpoints[i] === 'sm' && columns[i] !== undefined) {
+                breakpointClasses += `grid-sm-${columns[i]} `;
+            }
+            if (breakpoints[i] === 'md' && columns[i] !== undefined) {
+                breakpointClasses += `grid-md-${columns[i]} `;
+            }
+            if (breakpoints[i] === 'lg' && columns[i] !== undefined) {
+                breakpointClasses += `grid-lg-${columns[i]} `;
+            }
+            if (breakpoints[i] === 'xl' && columns[i] !== undefined) {
+                breakpointClasses += `grid-xl-${columns[i]} `;
+            }
+        }
+        return breakpointClasses;
+    }
+
+    public setColspanClasses(span: string, breakpoint: string): void {
+        if (span) {
+            const spanClasses = this.el.nativeElement.className.split(' ').filter((c: string) => c.startsWith('colspan-'));
+            spanClasses.forEach((c: string) => this.renderer.removeClass(this.el.nativeElement, c));
+            this.renderer.addClass(this.el.nativeElement, `colspan${breakpoint ? '-' + breakpoint : '-sm'}-${span}`);
+        }
+    }
+
+    public setRowspanClasses(span: string, breakpoint: string): void {
+        if (span) {
+            const spanClasses = this.el.nativeElement.className.split(' ').filter((c: string) => c.startsWith('rowspan-'));
+            spanClasses.forEach((c: string) => this.renderer.removeClass(this.el.nativeElement, c));
+            this.renderer.addClass(this.el.nativeElement, `rowspan${breakpoint ? '-' + breakpoint : '-sm'}-${span}`);
+        }
+    }
+
+    // public setRowspanClasses(rowspan: string, breakpoint: string): void {
+    //     const elementsWithRowspanClasses = this.el.nativeElement.className.split(' ').filter((c: string) => c.startsWith('rowspan-'));
+    //     elementsWithRowspanClasses.forEach((c: string) => this.renderer.removeClass(this.el.nativeElement, c));
+    //     //função que executa a adição de classe para cada breakpoint
+    //     const breakpoints = this.getStringSplited(breakpoint);
+    //     const prefix: string = ' rowspan';
+    //     const rows = this.getStringSplited(rowspan);
+    //     let rowspanClasses = '';
+    //     for (let i = 0; i < rows.length; i++) {
+    //         rowspanClasses = prefix + rows[i];
+    //     }
+    //     this.renderer.addClass(this.el.nativeElement, `${rowspanClasses}`);
+    // }
+
+    public get classes(): string {
+        this.class = 'teste';
+        const breakpoints = this.getGridClasses(this.breakpoint, this.col);
+        const activeClasses = `grid-1 ${breakpoints} gap-${this.gap} ${this.loading ? 'loading' : ''}`;
+        return activeClasses;
+    }
+
+    constructor(private el: ElementRef, private renderer: Renderer2) {}
+
+    ngOnInit() {
+        this.setColspanClasses(this.colspan, this.breakpoint);
+        this.setRowspanClasses(this.rowspan, this.breakpoint);
+    }
+
+    ngOnChanges() {
+        this.setColspanClasses(this.colspan, this.breakpoint);
+        this.setRowspanClasses(this.rowspan, this.breakpoint);
+    }
+}

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

@@ -0,0 +1,60 @@
+import { Story } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs";
+import * as ComponentStories from "./grid.stories";
+
+<Meta title="Layout / Grid / Documentação" />
+
+# Grid
+
+> _grid_ "ESCREVER DEFINIÇÃO DO ATÔMICO"
+
+---
+
+### Modes
+
+<div class="flex-column gap-16">
+    <div class="flex-column">
+        <div class="matcha-card background-surface flex-column gap-16">
+
+            <div class="matcha-card background-bg">
+                <Story of={ComponentStories.GridControls} />
+            </div>
+
+            <div class="flex-column">
+
+                ```html
+                <matcha-grid name="home" color="accent" size="md"></matcha-grid>
+                ```
+
+            </div>
+        </div>
+    </div>
+
+    <div class="flex-column">
+        <div class="matcha-card background-surface flex-column gap-16">
+
+            <div class="matcha-card background-bg">
+                <Story of={ComponentStories.GridSpan} />
+            </div>
+
+            <div class="flex-column">
+
+                ```html
+                <matcha-grid name="home" color="accent" size="md"></matcha-grid>
+                ```
+
+            </div>
+        </div>
+    </div>
+
+</div>
+
+<br />
+
+### Installation
+
+`import {MatGridModule} from '@angular/material/grid';`
+
+[Official documentation](https://https://material.angular.io/components/grid/overview)
+
+<br />

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

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatchaGridComponent } from './grid.component';
+
+@NgModule({
+    declarations: [MatchaGridComponent],
+    imports: [CommonModule],
+    exports: [MatchaGridComponent],
+})
+export class MatchaGridModule {}

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

@@ -0,0 +1,125 @@
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+
+import { MatchaGridModule } from './grid.module';
+
+import { gridArgtypes } from './grid-argtype';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+
+export default {
+    title: 'Layout / Grid',
+    decorators: [
+        moduleMetadata({
+            imports: [MatchaGridModule, MatInputModule, MatFormFieldModule],
+            declarations: [],
+        }),
+    ],
+    args: {
+        breakpoint: 'sm, md, lg, xl',
+        col: '2,3,6,12',
+        gap: '16',
+        colspan: '2',
+        rowspan: '2',
+        class: 'background-surface p-24 radius-8',
+        loading: false,
+    },
+    argTypes: gridArgtypes,
+    parameters: {
+        docs: {
+            source: { type: 'code' },
+        },
+        controls: {
+            expanded: true,
+            exclude: ['mode'],
+        },
+        componentSubtitle: 'Displays an image that represents a user or organization',
+    },
+} as Meta;
+
+/** Este é o grid principal */
+export const GridControls: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+        template: `
+            <matcha-grid [breakpoint]='breakpoint' [col]='col' [gap]='gap' [class]='class' [loading]='loading'>
+
+                <div class="p-16 accent radius-8">column</div>
+                <div class="p-16 accent radius-8">column</div>
+                <div class="p-16 accent radius-8">column</div>
+                <div class="p-16 accent radius-8">column</div>
+                <div class="p-16 accent radius-8">column</div>
+                <div class="p-16 accent radius-8">column</div>
+                <div class="p-16 accent radius-8">column</div>
+                <div class="p-16 accent radius-8">column</div>
+                <div class="p-16 accent radius-8">column</div>
+                <div class="p-16 accent radius-8">column</div>
+
+                <matcha-grid [colspan]="colspan" [rowspan]="rowspan" class="p-16 primary radius-8">colspan:{{colspan}} rowspan:{{rowspan}}</matcha-grid>
+
+                <div class="p-16 accent radius-8">column</div>
+                <div class="p-16 accent radius-8">column</div>
+                <div class="p-16 accent radius-8">column</div>
+                <div class="p-16 accent radius-8">column</div>
+                <div class="p-16 accent radius-8">column</div>
+                <div class="p-16 accent radius-8">column</div>
+                <div class="p-16 accent radius-8">column</div>
+                <div class="p-16 accent radius-8">column</div>
+                <div class="p-16 accent radius-8">column</div>
+
+            </matcha-grid>
+        `,
+    }),
+    name: 'Grid Controls',
+};
+
+export const GridSpan: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+        template: `
+        <matcha-grid breakpoint='md' col='6' gap='16' class='background-surface flex-column p-16 radius-8'>
+
+                <div class="p-16 accent radius-8">column</div>
+                <div class="p-16 accent radius-8">column</div>
+                <div class="p-16 accent radius-8">column</div>
+                <div class="p-16 accent radius-8">column</div>
+                <div class="p-16 accent radius-8">column</div>
+                <div class="p-16 accent radius-8">column</div>
+
+                <matcha-grid colspan="2" class="p-16 primary radius-8">span 4 column</matcha-grid>
+
+                <div class="p-16 accent radius-8">column</div>
+                <div class="p-16 accent radius-8">column</div>
+                <div class="p-16 accent radius-8">column</div>
+                <div class="p-16 accent radius-8">column</div>
+
+                <matcha-grid colspan="2" rowspan="2" class="p-16 primary radius-8">span 4 row</matcha-grid>
+
+                <div class="p-16 accent radius-8">column</div>
+                <div class="p-16 accent radius-8">column</div>
+                <div class="p-16 accent radius-8">column</div>
+                <div class="p-16 accent radius-8">column</div>
+                <div class="p-16 accent radius-8">column</div>
+                <div class="p-16 accent radius-8">column</div>
+                <div class="p-16 accent radius-8">column</div>
+                <div class="p-16 accent radius-8">column</div>
+                <div class="p-16 accent radius-8">column</div>
+                <div class="p-16 accent radius-8">column</div>
+                <div class="p-16 accent radius-8">column</div>
+                <div class="p-16 accent radius-8">column</div>
+                <div class="p-16 accent radius-8">column</div>
+                <div class="p-16 accent radius-8">column</div>
+                <div class="p-16 accent radius-8">column</div>
+                <div class="p-16 accent radius-8">column</div>
+                <div class="p-16 accent radius-8">column</div>
+                <div class="p-16 accent radius-8">column</div>
+
+            </matcha-grid>
+
+        `,
+    }),
+    name: 'Grid Span',
+};

package/src/lib/matcha-highlight/copy-button/copy-button.component.html

@@ -0,0 +1,12 @@
+<button
+    matcha-button
+    [size]="size"
+    pill="true"
+    icon="true"
+    [class]="getButtonClasses()"
+    (click)="copyToClipboard()"
+    [title]="'Copiar código ' + type">
+    <matcha-icon [name]="currentIcon" [size]="size === 'tiny' ? 'small' : size"></matcha-icon>
+</button>
+
+

package/src/lib/matcha-highlight/copy-button/copy-button.component.scss

@@ -0,0 +1,28 @@
+// Estilo para posicionamento absoluto
+.position-absolute {
+  position: absolute;
+}
+
+// Estilo para posicionamento relativo
+.position-relative {
+  position: relative;
+}
+
+// Posicionamento
+.top-8 {
+  top: 8px;
+}
+
+.right-8 {
+  right: 8px;
+}
+
+// Margem
+.m-8 {
+  margin: 8px;
+}
+
+// Z-index
+.z-index-10 {
+  z-index: 10;
+}

package/src/lib/matcha-highlight/copy-button/copy-button.component.ts

@@ -0,0 +1,127 @@
+import { Component, Input, Output, EventEmitter, ElementRef, ViewChild } from '@angular/core';
+
+@Component({
+  selector: 'matcha-copy-button',
+  templateUrl: './copy-button.component.html',
+  styleUrls: ['./copy-button.component.scss'],
+  standalone: false
+})
+export class CopyButtonComponent {
+
+  @Input() type: string = 'Código';
+  @Input() size: 'tiny' | 'small' | 'medium' | 'large' = 'tiny';
+  @Input() icon: string = 'copy-out';
+  @Input() position: 'absolute' | 'relative' = 'absolute';
+  @Input() customClass: string = '';
+
+  @Output() copied = new EventEmitter<{text: string, type: string}>();
+
+  // Propriedade para controlar o ícone do botão
+  currentIcon: string = this.icon;
+  isCopied: boolean = false;
+
+  // Método para copiar código para a área de transferência
+  async copyToClipboard() {
+    // Busca o componente matcha-highlight pai
+    const highlightComponent = this.elementRef.nativeElement.closest('matcha-highlight');
+
+    // Primeiro tenta encontrar textarea (para casos onde ainda não foi processado)
+    let textarea = highlightComponent?.querySelector('textarea');
+    let textToCopy = '';
+
+    if (textarea) {
+      // Se encontrou textarea, usa o valor dela
+      textToCopy = textarea.value;
+    } else {
+      // Se não encontrou textarea, procura pelo código destacado
+      const codeElement = highlightComponent?.querySelector('code.highlight');
+      if (codeElement) {
+        textToCopy = codeElement.textContent || codeElement.innerText || '';
+      } else {
+        console.warn('Nenhum conteúdo encontrado para copiar');
+        return;
+      }
+    }
+
+    if (!textToCopy.trim()) {
+      console.warn('Conteúdo vazio para copiar');
+      return;
+    }
+
+    try {
+      await navigator.clipboard.writeText(textToCopy);
+      console.log(`Código ${this.type} copiado para a área de transferência!`);
+      this.copied.emit({ text: textToCopy, type: this.type });
+
+      // Feedback visual temporário
+      this.showCopyFeedback();
+    } catch (err) {
+      console.error('Erro ao copiar código:', err);
+      // Fallback para navegadores mais antigos
+      this.fallbackCopyToClipboard(textToCopy);
+    }
+  }
+
+  // Fallback para navegadores que não suportam clipboard API
+  private fallbackCopyToClipboard(textToCopy: string) {
+    // Cria um textarea temporário para usar o método antigo
+    const tempTextarea = document.createElement('textarea');
+    tempTextarea.value = textToCopy;
+    tempTextarea.style.position = 'fixed';
+    tempTextarea.style.left = '-999999px';
+    tempTextarea.style.top = '-999999px';
+    document.body.appendChild(tempTextarea);
+
+    tempTextarea.focus();
+    tempTextarea.select();
+    tempTextarea.setSelectionRange(0, 99999); // Para mobile
+
+    try {
+      document.execCommand('copy');
+      console.log('Código copiado para a área de transferência!');
+      this.copied.emit({ text: textToCopy, type: this.type });
+      this.showCopyFeedback();
+    } catch (err) {
+      console.error('Erro ao copiar código:', err);
+    } finally {
+      document.body.removeChild(tempTextarea);
+    }
+  }
+
+  // Feedback visual quando copiado
+  private showCopyFeedback() {
+    const button = this.elementRef.nativeElement.querySelector('button');
+    if (button) {
+      const originalText = button.title;
+      button.title = 'Copiado!';
+
+      // Muda o ícone para checked
+      this.isCopied = true;
+      this.currentIcon = 'action_done';
+
+      setTimeout(() => {
+        button.title = originalText;
+        button.style.transform = '';
+
+        // Volta para o ícone original após 2 segundos
+        setTimeout(() => {
+          this.isCopied = false;
+          this.currentIcon = this.icon;
+        }, 3000);
+      }, 1000);
+    }
+  }
+
+  // Método para obter as classes CSS do botão
+  getButtonClasses(): string {
+    let classes = `position-${this.position} top-8 right-8 m-8 z-index-10`;
+
+    if (this.customClass) {
+      classes += ` ${this.customClass}`;
+    }
+
+    return classes;
+  }
+
+  constructor(private elementRef: ElementRef) {}
+}