matcha-components 1.0.8 → 1.0.15

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

@@ -1,171 +0,0 @@
-import { Story } from "@storybook/blocks";
-import { Meta } from "@storybook/addon-docs";
-import * as ComponentStories from "./button.stories";
-
-<Meta title="Atoms / Button / Documentação" />
-
-# Button
-
-> _button_ "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">Button Basic</span>
-            <div class="matcha-card background-bg">
-                <Story of={ComponentStories.ButtonOverview} />
-            </div>
-
-            <div class="d-flex-column">
-
-                ```html
-                <section>
-                    <div class="example-label">Basic</div>
-                    <div class="example-button-row">
-                        <button mat-button>Basic</button>
-                        <button mat-button color="primary">Primary</button>
-                        <button mat-button color="accent">Accent</button>
-                        <button mat-button color="warn">Warn</button>
-                        <button mat-button disabled>Disabled</button>
-                        <a mat-button href="https://www.google.com/" target="_blank">Link</a>
-                    </div>
-                    </section>
-                    <mat-divider></mat-divider>
-                    <section>
-                    <div class="example-label">Raised</div>
-                    <div class="example-button-row">
-                        <button mat-raised-button>Basic</button>
-                        <button mat-raised-button color="primary">Primary</button>
-                        <button mat-raised-button color="accent">Accent</button>
-                        <button mat-raised-button color="warn">Warn</button>
-                        <button mat-raised-button disabled>Disabled</button>
-                        <a mat-raised-button href="https://www.google.com/" target="_blank">Link</a>
-                    </div>
-                    </section>
-                    <mat-divider></mat-divider>
-                    <section>
-                    <div class="example-label">Stroked</div>
-                    <div class="example-button-row">
-                        <button mat-stroked-button>Basic</button>
-                        <button mat-stroked-button color="primary">Primary</button>
-                        <button mat-stroked-button color="accent">Accent</button>
-                        <button mat-stroked-button color="warn">Warn</button>
-                        <button mat-stroked-button disabled>Disabled</button>
-                        <a mat-stroked-button href="https://www.google.com/" target="_blank">Link</a>
-                    </div>
-                    </section>
-                    <mat-divider></mat-divider>
-                    <section>
-                    <div class="example-label">Flat</div>
-                    <div class="example-button-row">
-                        <button mat-flat-button>Basic</button>
-                        <button mat-flat-button color="primary">Primary</button>
-                        <button mat-flat-button color="accent">Accent</button>
-                        <button mat-flat-button color="warn">Warn</button>
-                        <button mat-flat-button disabled>Disabled</button>
-                        <a mat-flat-button href="https://www.google.com/" target="_blank">Link</a>
-                    </div>
-                    </section>
-                    <mat-divider></mat-divider>
-                    <section>
-                    <div class="example-label">Icon</div>
-                    <div class="example-button-row">
-                        <div class="example-flex-container">
-                        <button mat-icon-button aria-label="Example icon button with a vertical three dot icon">
-                            <mat-icon>more_vert</mat-icon>
-                        </button>
-                        <button mat-icon-button color="primary" aria-label="Example icon button with a home icon">
-                            <mat-icon>home</mat-icon>
-                        </button>
-                        <button mat-icon-button color="accent" aria-label="Example icon button with a menu icon">
-                            <mat-icon>menu</mat-icon>
-                        </button>
-                        <button mat-icon-button color="warn" aria-label="Example icon button with a heart icon">
-                            <mat-icon>favorite</mat-icon>
-                        </button>
-                        <button mat-icon-button disabled aria-label="Example icon button with a open in new tab icon">
-                            <mat-icon>open_in_new</mat-icon>
-                        </button>
-                        </div>
-                    </div>
-                    </section>
-                    <mat-divider></mat-divider>
-                    <section>
-                    <div class="example-label">FAB</div>
-                    <div class="example-button-row">
-                        <div class="example-flex-container">
-                        <div class="example-button-container">
-                            <button mat-fab color="primary" aria-label="Example icon button with a delete icon">
-                            <mat-icon>delete</mat-icon>
-                            </button>
-                        </div>
-                        <div class="example-button-container">
-                            <button mat-fab color="accent" aria-label="Example icon button with a bookmark icon">
-                            <mat-icon>bookmark</mat-icon>
-                            </button>
-                        </div>
-                        <div class="example-button-container">
-                            <button mat-fab color="warn" aria-label="Example icon button with a home icon">
-                            <mat-icon>home</mat-icon>
-                            </button>
-                        </div>
-                        <div class="example-button-container">
-                            <button mat-fab disabled aria-label="Example icon button with a heart icon">
-                            <mat-icon>favorite</mat-icon>
-                            </button>
-                        </div>
-                        </div>
-                    </div>
-                    </section>
-                    <mat-divider></mat-divider>
-                    <section>
-                    <div class="example-label">Mini FAB</div>
-                    <div class="example-button-row">
-                        <div class="example-flex-container">
-                        <div class="example-button-container">
-                            <button mat-mini-fab color="primary" aria-label="Example icon button with a menu icon">
-                            <mat-icon>menu</mat-icon>
-                            </button>
-                        </div>
-                        <div class="example-button-container">
-                            <button mat-mini-fab color="accent" aria-label="Example icon button with a plus one icon">
-                            <mat-icon>plus_one</mat-icon>
-                            </button>
-                        </div>
-                        <div class="example-button-container">
-                            <button mat-mini-fab color="warn" aria-label="Example icon button with a filter list icon">
-                            <mat-icon>filter_list</mat-icon>
-                            </button>
-                        </div>
-                        <div class="example-button-container">
-                            <button mat-mini-fab disabled aria-label="Example icon button with a home icon">
-                            <mat-icon>home</mat-icon>
-                            </button>
-                        </div>
-                        </div>
-                    </div>
-                </section>
-
-
-                <button mat-stroked-button (click)="openButton(message.value, action.value)">Show button</button>
-                ```
-
-            </div>
-        </div>
-    </div>
-
-</div>
-
-<br />
-
-### Installation
-
-`import { MatButton, MatButtonModule } from '@angular/material/button';`
-
-[Official documentation](https://https://material.angular.io/components/button/overview)
-
-<br />

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

@@ -1,10 +0,0 @@
-import { NgModule } from '@angular/core';
-
-import { MatchaButtonDirective } from './button.directive';
-
-@NgModule({
-    declarations: [MatchaButtonDirective],
-    imports: [],
-    exports: [MatchaButtonDirective],
-})
-export class MatchaButtonModule {}

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

@@ -1,38 +0,0 @@
-import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-import { CommonModule } from '@angular/common';
-import { provideAnimations } from '@angular/platform-browser/animations';
-import { buttonArgtypes } from './button.argtypes';
-import { ButtonOverviewExample } from './button-overview-example.component';
-import { MatchaButtonModule } from './button.module';
-
-export default {
-    title: 'Atoms / Button',
-    component: ButtonOverviewExample,
-    decorators: [
-        applicationConfig({
-            providers: [provideAnimations()],
-        }),
-
-        moduleMetadata({
-            imports: [CommonModule, MatchaButtonModule],
-        }),
-    ],
-    args: {
-        size: 'md',
-        color: 'accent',
-        pill: false,
-    },
-    argTypes: buttonArgtypes,
-    parameters: {
-        controls: { expanded: true },
-    },
-} as Meta;
-
-export const ButtonOverview: StoryObj<ButtonOverviewExample> = {
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-    }),
-    name: 'Button Overview',
-};

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

@@ -1,111 +0,0 @@
-import { MatButton, MatButtonModule } from '@angular/material/button';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { moduleMetadata } from '@storybook/angular';
-import type { Meta, StoryObj } from '@storybook/angular';
-import { action } from '@storybook/addon-actions';
-import { MatchaBtnSizeDirective } from './matcha-btn-size.directive';
-import { Directive, ElementRef, Renderer2 } from '@angular/core';
-
-export default {
-    title: 'Componentes/Matcha Button',
-    component: MatButton,
-    decorators: [
-        moduleMetadata({
-            imports: [MatButtonModule, BrowserAnimationsModule],
-            declarations: [MatchaBtnSizeDirective],
-        }),
-    ],
-    args: {
-        label: 'Clique em mim',
-        color: 'accent',
-        defaultColor: 'primary',
-        disableRipple: false,
-        disabled: false,
-        size: '',
-    },
-    argTypes: {
-        label: { control: 'text' },
-        color: { control: 'select', options: ['accent', 'primary', 'warn'] },
-        defaultColor: {
-            control: 'select',
-            options: ['primary', 'accent', 'warn'],
-        },
-        disableRipple: { control: 'boolean' },
-        disabled: { control: 'boolean' },
-        size: { control: 'radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
-    },
-} as Meta;
-
-const Template = (args: MatButton) => ({
-    template: `
-        <button mat-raised-button
-        [color]="${args.color}"
-        [disableRipple]="${args.disableRipple}"
-        [disabled]="${args.disabled}">
-        </button>
-    `,
-    props: args,
-});
-
-export const Default = Template.bind({
-    args: {
-        label: 'Clique em mim',
-        color: 'accent',
-        disableRipple: false,
-        disabled: false,
-        size: 'md',
-    },
-});
-
-export const Primary = () => ({
-    component: MatButton,
-    props: {
-        text: 'Clique em mim',
-        onClick: action('Botão primário clicado'),
-    },
-});
-
-export const Secondary = () => ({
-    component: MatButton,
-    props: {
-        text: 'Botão secundário',
-        color: 'accent',
-        onClick: action('Botão secundário clicado'),
-    },
-});
-
-export const Disabled = () => ({
-    component: MatButton,
-    props: {
-        text: 'Botão desativado',
-        disabled: true,
-        onClick: action('Botão desativado clicado'),
-    },
-});
-
-export const Icon = () => ({
-    component: MatButton,
-    props: {
-        text: 'Botão com ícone',
-        icon: 'favorite',
-        onClick: action('Botão com ícone clicado'),
-    },
-});
-
-export const Accent = () => ({
-    component: MatButton,
-    template: `
-      <button mat-raised-button color="accent" [style.borderRadius.px]="10">Botão com estilo personalizado</button>
-    `,
-    props: {
-        onClick: action('Botão com estilo personalizado clicado'),
-    },
-    decorators: [
-        moduleMetadata({
-            declarations: [MatchaBtnSizeDirective],
-            imports: [
-                /* Importe outros módulos necessários */
-            ],
-        }),
-    ],
-});

package/src/lib/matcha-button-toggle/button-toggle.argtype.ts

@@ -1,115 +0,0 @@
-export const buttonToggleArgtypes = {
-  multiple: {
-    description: 'Whether multiple button toggles can be selected',
-    control: 'boolean',
-    defaultValue: false,
-    table: {
-      defaultValue: { summary: false },
-    },
-  },
-  disabledGroup: {
-    description: 'Whether the button is disabled',
-    control: 'boolean',
-    defaultValue: false,
-    table: {
-      defaultValue: { summary: false },
-    },
-  },
-  // nameGroup: {
-  //   description: 'name attribute for the underlying input element',
-  //   control: 'text',
-  // },
-  // valueGroup: {
-  //   description: 'Value of the toggle group',
-  //   control: 'text',
-  // },
-  vertical: {
-    description: 'Whether the toggle group is vertical',
-    control: 'boolean',
-    defaultValue: false,
-    table: {
-      defaultValue: { summary: false },
-    },
-  },
-  // changeGroup: {
-  //   description: "Event emitted when the group's value changes",
-  //   action: 'change',
-  // },
-  // selected: {
-  //   description: 'Selected button toggles in the group',
-  //   control: null, // No control for objects
-  // },
-
-  appearance: {
-    description: 'The appearance style of the button',
-    control: 'select',
-    defaultValue: 'standard',
-    table: {
-      defaultValue: { summary: 'standard' },
-    },
-    options: ['standard', 'legacy'],
-  },
-  // ariaLabel: {
-  //   description:
-  //     'Attached to the aria-label attribute of the host element. In most cases, aria-labelledby will take precedence so this may be omitted.',
-  //   control: 'text',
-  // },
-  // ariaLabelledby: {
-  //   description:
-  //     'Users can specify the aria-labelledby attribute which will be forwarded to the input element',
-  //   control: 'text',
-  // },
-  checked: {
-    description: 'Whether the button is checked',
-    control: 'boolean',
-    defaultValue: false,
-    table: {
-      defaultValue: { summary: false },
-    },
-  },
-  disableRipple: {
-    description: 'Whether ripples are disabled',
-    control: 'boolean',
-    defaultValue: false,
-    table: {
-      defaultValue: { summary: false },
-    },
-  },
-  disabled: {
-    description: 'Whether the button is disabled',
-    control: 'boolean',
-    defaultValue: false,
-    table: {
-      defaultValue: { summary: false },
-    },
-  },
-  // id: {
-  //   description: 'The unique ID for this button toggle',
-  //   control: 'text',
-  // },
-  // name: {
-  //   description:
-  //     "HTML's 'name' attribute used to group radios for unique selection",
-  //   control: 'text',
-  // },
-  // value: {
-  //   description: 'MatButtonToggleGroup reads this to assign its own value',
-  //   control: 'text',
-  // },
-  // change: {
-  //   description: 'Event emitted when the group value changes',
-  //   action: 'change',
-  // },
-  // buttonId: {
-  //   description: 'Unique ID for the underlying button element',
-  //   control: 'text',
-  // },
-  buttonToggleGroup: {
-    description:
-      'The parent button toggle group (exclusive selection). Optional.',
-    control: null, // No control for objects
-  },
-  label: {
-    control: 'text',
-  },
-};

package/src/lib/matcha-button-toggle/button-toggle.directive.ts

@@ -1,13 +0,0 @@
-import { Directive, ElementRef, Renderer2 } from '@angular/core';
-
-@Directive({
-    selector: '[matcha-button-toggle]',
-})
-export class MatchaButtonToggleDirective {
-    constructor(private _elementRef: ElementRef, private _renderer: Renderer2) {
-        this._renderer.addClass(
-            this._elementRef.nativeElement,
-            'matcha-button-toggle'
-        );
-    }
-}

package/src/lib/matcha-button-toggle/button-toggle.mdx

@@ -1,63 +0,0 @@
-import { Story } from '@storybook/blocks';
-import { Meta } from '@storybook/addon-docs';
-import * as ComponentStories from './button-toggle.stories';
-
-<Meta title="Atoms / Button Toggle / Documentação" />
-
-# Button Toggle
-
-> _button toggle_ permite a criação de botões de alternância com a opção de
-> seleção única ou múltipla.
-
----
-
-### 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">Basic Button Toggle</span>
-      <div class="matcha-card background-bg">
-        <Story of={ComponentStories.BasicButtonToggle} />
-      </div>
-      <div class="d-flex-column">
-        ```html
-        <mat-button-toggle-group name="fontStyle" aria-label="Font Style">
-          <mat-button-toggle value="bold">Bold</mat-button-toggle>
-          <mat-button-toggle value="italic">Italic</mat-button-toggle>
-          <mat-button-toggle value="underline">Underline</mat-button-toggle>
-        </mat-button-toggle-group>
-        ```
-      </div>
-    </div>
-  </div>
-
-  <div class="matcha-card background-surface d-flex-column gap-16">
-    <span class="h5">Multiple Selection</span>
-    <span class="font-size-16">
-      Para seleção de mais de uma opção simultaneamente.
-    </span>
-    <div class="matcha-card background-bg">
-      <Story of={ComponentStories.MultipleButtonToggle} />
-    </div>
-    <div class="d-flex-column">
-      ```html
-      <mat-button-toggle-group name="fontStyle" aria-label="Font Style" multiple>
-        <mat-button-toggle value="bold">Bold</mat-button-toggle>
-        <mat-button-toggle value="italic">Italic</mat-button-toggle>
-        <mat-button-toggle value="underline">Underline</mat-button-toggle>
-      </mat-button-toggle-group>
-      ```
-    </div>
-  </div>
-</div>
-
-<br />
-
-### Installation
-
-`import {MatButtonToggleModule} from '@angular/material/button-toggle';`
-
-[Official documentation](https://material.angular.io/components/button-toggle/overview)
-
-<br />

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

@@ -1,14 +0,0 @@
-import { NgModule } from '@angular/core';
-import { MatchaButtonToggleDirective } from './matcha-button-toggle.directive';
-
-@NgModule({
-    declarations: [
-        MatchaButtonToggleDirective
-    ],
-    imports: [
-    ],
-    exports: [
-        MatchaButtonToggleDirective
-    ]
-})
-export class MatchaButtonToggleModule { }

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

@@ -1,64 +0,0 @@
-import { StoryObj, Meta, moduleMetadata } from '@storybook/angular';
-import { action } from '@storybook/addon-actions';
-import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import { buttonToggleArgtypes } from './button-toggle.argtype';
-import { MatchaButtonToggleDirective } from './button-toggle.directive';
-import { config } from '@storybook/addon-designs';
-
-export default {
-  title: 'Atoms / Button Toggle ',
-  decorators: [
-    moduleMetadata({
-      imports: [MatButtonToggleModule],
-      declarations: [MatchaButtonToggleDirective],
-    }),
-  ],
-  args: {
-    appearance: 'standard',
-    label: 'Bold',
-    multiple: true,
-    vertical: false,
-    checked: false,
-    disabled: false,
-    disabledGroup: false,
-    disableRipple: false,
-  },
-  argTypes: buttonToggleArgtypes,
-  parameters: {
-    controls: {
-      expanded: false,
-    },
-    design: config({
-      type: 'figma',
-      url: 'https://www.figma.com/file/Enji6Zk0UvtHyt8fdOPdBx/DS-PAINEL-(Copy)?type=design&mode=design&t=IKqH3YB1sj5qgDHJ-1',
-    }),
-  },
-} as Meta;
-
-export const BasicButtonToggle: StoryObj = {
-  render: (args) => ({
-    props: args,
-    template: `
-            <mat-button-toggle-group [appearance]="appearance" [disabled]="disabledGroup" [vertical]="vertical" name="fontStyle" aria-label="Font Style" [multiple]="multiple">
-                <mat-button-toggle value="bold" [disabled]="disabled" [disableRipple]="disableRipple" [checked]="checked" >{{label}}</mat-button-toggle>
-                <mat-button-toggle value="italic">Italic</mat-button-toggle>
-                <mat-button-toggle value="underline">Underline</mat-button-toggle>
-            </mat-button-toggle-group>      
-        `,
-  }),
-  name: 'Basic Button Toggle',
-};
-
-export const MultipleButtonToggle: StoryObj = {
-  render: (args) => ({
-    props: args,
-    template: `
-          <mat-button-toggle-group [appearance]="appearance" [disabled]="disabledGroup" [vertical]="vertical" name="fontStyle" aria-label="Font Style" [multiple]="multiple">
-            <mat-button-toggle value="bold" [disabled]="disabled" [disableRipple]="disableRipple" [checked]="checked" >{{label}}</mat-button-toggle>
-            <mat-button-toggle value="italic">Italic</mat-button-toggle>
-            <mat-button-toggle value="underline">Underline</mat-button-toggle>
-          </mat-button-toggle-group>     
-        `,
-  }),
-  name: 'Multiple Button Toggle',
-};

package/src/lib/matcha-button-toggle/matcha-button-toggle.directive.ts

@@ -1,15 +0,0 @@
-import { Directive, ElementRef, Renderer2 } from '@angular/core';
-
-@Directive({
-  selector: '[matcha-button-toggle]'
-})
-export class MatchaButtonToggleDirective {
-
-    constructor(
-        private _elementRef: ElementRef,
-        private _renderer: Renderer2
-    ) {
-        this._renderer.addClass(this._elementRef.nativeElement,'matcha-button-toggle')
-    }
-
-}

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

@@ -1,54 +0,0 @@
-export const cardArgtypes = {
-    elevation: {
-        description: 'Elevation level of the card',
-        defaultValue: 0,
-        table: {
-            type: { summary: 'range' },
-            defaultValue: { summary: 0 },
-        },
-        control: {
-            type: 'range',
-            min: 0,
-            max: 24,
-            step: 1,
-        },
-    },
-    blockquote: {
-        description: 'Position of the blockquote bar',
-        control: 'select',
-        defaultValue: '',
-        table: {
-            defaultValue: { summary: '' },
-        },
-        options: ['left', 'right', 'none'],
-    },
-    blockquoteColor: {
-        description: 'Theme color palette for the blockquote bar',
-        control: 'select',
-        defaultValue: 'accent',
-        table: {
-            defaultValue: { summary: 'accent' },
-        },
-        options: ['fg', 'accent', 'primary', 'warn', 'red', 'pink', 'purple', 'deep-purple', 'indigo', 'blue', 'light-blue', 'cyan', 'teal', 'green', 'light-green', 'lime', 'yellow', 'amber', 'orange', 'deep-orange', null],
-    },
-    color: {
-        description: 'Theme color palette for the card background',
-        control: 'select',
-        defaultValue: 'surface',
-        table: {
-            defaultValue: { summary: 'surface' },
-        },
-        options: ['bg', 'fg', 'surface', 'accent', 'primary', 'warn', 'red', 'pink', 'purple', 'deep-purple', 'indigo', 'blue', 'light-blue', 'cyan', 'teal', 'green', 'light-green', 'lime', 'yellow', 'amber', 'orange', 'deep-orange'],
-    },
-    alpha: {
-        description: 'Opacity of the card color',
-        control: 'boolean',
-        defaultValue: true,
-        table: {
-            defaultValue: { summary: true },
-        },
-    },
-    label: {
-        control: 'text',
-    },
-};