matcha-components 1.0.8 → 1.0.15

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

@@ -1,167 +0,0 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-import { action } from '@storybook/addon-actions';
-import { config } from '@storybook/addon-designs';
-
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { slideToggleArgtypes } from './slide-toggle.argtype';
-import { MatchaSlideToggleDirective } from './slide-toggle.directive';
-
-export default {
-    title: 'Atoms / Slide Toggle',
-    decorators: [
-        moduleMetadata({
-            imports: [MatSlideToggleModule],
-            declarations: [MatchaSlideToggleDirective],
-        }),
-    ],
-    args: {
-        checked: true,
-        color: 'accent',
-        disableRipple: false,
-        disabled: false,
-        hideIcon: false,
-        labelPosition: 'after',
-        label: 'Slide me',
-        onChange: action('change'),
-        toggleChange: action('toggleChange'),
-    },
-    argTypes: slideToggleArgtypes,
-    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 SlideToggleDefault: StoryObj = {
-    render: (args) => ({
-        props: args,
-        template: `
-            <div class="d-flex gap-16">
-                <mat-slide-toggle
-                matcha-slide-toggle
-                [color]="color"
-                [checked]="checked"
-                [disabled]="disabled"
-                [hideIcon]="hideIcon"
-                [labelPosition]="labelPosition"
-                (change)="onChange($event)"
-                (toggleChange)="toggleChange('data', this.$event)">
-                {{label}}
-                </mat-slide-toggle>
-            </div>
-        `,
-    }),
-    name: 'SlideToggle Default',
-};
-
-export const SlideToggleColors: StoryObj = {
-    render: (args) => ({
-        props: args,
-        template: `
-            <div class="d-flex gap-16">
-                <mat-slide-toggle matcha-slide-toggle (change)="onChange($event)" (toggleChange)="toggleChange('Primary', this.$event)" [checked]='checked' color="primary" [labelPosition]="labelPosition" [disabled]="disabled" [hideIcon]="hideIcon">
-                    Primary
-                </mat-slide-toggle>
-                
-                <mat-slide-toggle matcha-slide-toggle (change)="onChange($event)" (toggleChange)="toggleChange('Accent', this.$event)" [checked]='checked' color="accent" [labelPosition]="labelPosition" [disabled]="disabled" [hideIcon]="hideIcon">
-                    Accent
-                </mat-slide-toggle>
-                
-                <mat-slide-toggle matcha-slide-toggle (change)="onChange($event)" (toggleChange)="toggleChange('Warn', this.$event)" [checked]='checked' color="warn" [labelPosition]="labelPosition" [disabled]="disabled" [hideIcon]="hideIcon">
-                    Warn
-                </mat-slide-toggle>
-            </div>
-        `,
-    }),
-    parameters: {
-        controls: {
-            exclude: [
-                'color',
-                'indeterminate',
-                'required',
-                'disableRipple',
-                'label',
-            ],
-        },
-    },
-    name: 'SlideToggle Colors',
-};
-
-export const SlideToggleDisabled: StoryObj = {
-    render: (args) => ({
-        props: args,
-        template: `
-        <div class="d-flex gap-16">
-            <mat-slide-toggle matcha-slide-toggle checked='true' disabled="true" [hideIcon]="hideIcon">
-                {{label}}
-            </mat-slide-toggle>
-            
-            <div class="d-flex-center-center">
-                <div class="border-color-disabled br-2 h-24"></div>
-            </div>
-            
-            <mat-slide-toggle matcha-slide-toggle checked='false' disabled="true" [hideIcon]="hideIcon">
-                {{label}}
-            </mat-slide-toggle>
-        </div>
-        `,
-    }),
-    parameters: {
-        controls: {
-            exclude: [
-                'toggleChange',
-                'color',
-                'labelPosition',
-                'onChange',
-                'checked',
-                'disabled',
-                'indeterminate',
-                'required',
-                'disableRipple',
-            ],
-        },
-    },
-    name: 'SlideToggle Disabled',
-};
-
-export const SlideToggleLabelPosition: StoryObj = {
-    render: (args) => ({
-        props: args,
-        template: `
-        <div class="d-flex gap-16">
-            <mat-slide-toggle matcha-slide-toggle checked="true" labelPosition="before" (change)="onChange($event)" (toggleChange)="toggleChange('data', this.$event)">
-                Label before
-            </mat-slide-toggle>
-            
-            <div class="d-flex-center-center">
-                <div class="border-color-disabled br-2 h-24"></div>
-            </div>
-            
-            <mat-slide-toggle matcha-slide-toggle checked="true" labelPosition="after" (change)="onChange($event)" (toggleChange)="toggleChange('data', this.$event)">
-                Label after
-            </mat-slide-toggle>
-        </div>
-        `,
-    }),
-    parameters: {
-        controls: {
-            exclude: [
-                'color',
-                'labelPosition',
-                'checked',
-                'disabled',
-                'indeterminate',
-                'required',
-                'disableRipple',
-                'hideIcon',
-                'label',
-            ],
-        },
-    },
-    name: 'SlideToggle Label Position',
-};

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

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

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

@@ -1,83 +0,0 @@
-export const sliderArgtypes = {
-    color: {
-        description: 'Theme color palette for the component.',
-        control: 'select',
-        options: ['primary', 'accent', 'warn'],
-        defaultValue: 'accent',
-        table: {
-            type: { summary: 'ThemePalette' },
-        },
-    },
-    disableRipple: {
-        description: 'Whether ripples are disabled.',
-        control: 'boolean',
-        defaultValue: false,
-        table: {
-            type: { summary: 'boolean' },
-        },
-    },
-    disabled: {
-        description: 'Whether the slider is disabled.',
-        control: 'boolean',
-        defaultValue: false,
-        table: {
-            type: { summary: 'boolean' },
-        },
-    },
-    discrete: {
-        description: 'Whether the slider displays a numeric value label upon pressing the thumb.',
-        control: 'boolean',
-        defaultValue: false,
-        table: {
-            type: { summary: 'boolean' },
-        },
-    },
-    displayWith: {
-        description: 'Function that will be used to format the value before it is displayed in the thumb label.',
-        control: null, // Como é uma função, não é necessário um controle.
-        table: {
-            disable: true,
-        },
-    },
-    max: {
-        description: 'The maximum value that the slider can have.',
-        control: 'number',
-        defaultValue: 100,
-        table: {
-            type: { summary: 'number' },
-        },
-    },
-    min: {
-        description: 'The minimum value that the slider can have.',
-        control: 'number',
-        defaultValue: 0,
-        table: {
-            type: { summary: 'number' },
-        },
-    },
-    showTickMarks: {
-        description: 'Whether the slider displays tick marks along the slider track.',
-        control: 'boolean',
-        defaultValue: false,
-        table: {
-            type: { summary: 'boolean' },
-        },
-    },
-    step: {
-        description: 'The values at which the thumb will snap.',
-        control: 'number',
-        defaultValue: 1,
-        table: {
-            type: { summary: 'number' },
-        },
-    },
-    defaultColor: {
-        description: 'Default color to fall back to if no value is set.',
-        control: 'select',
-        options: ['primary', 'accent', 'warn', 'undefined'],
-        defaultValue: 'undefined',
-        table: {
-            type: { summary: 'ThemePalette | undefined' },
-        },
-    },
-};

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

@@ -1,45 +0,0 @@
-import { Story } from "@storybook/blocks";
-import { Meta } from "@storybook/addon-docs";
-import * as ComponentStories from "./slider.stories";
-
-<Meta title="Atoms / Slider / Documentação" />
-
-# Slider
-
-> _slider_ "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">Slider - Basic slider</span>
-            <div class="matcha-card background-bg">
-                <Story of={ComponentStories.SliderBasic} />
-            </div>
-
-            <div class="d-flex-column">
-
-                ```html
-                <form>
-
-                </form>
-                ```
-
-            </div>
-        </div>
-    </div>
-
-</div>
-
-<br />
-
-### Installation
-
-`import {MatSliderModule} from '@angular/material/slider';`
-
-[Official documentation](https://https://material.angular.io/components/slider/overview)
-
-<br />

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

@@ -1,12 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatchaSliderDirective } from './matcha-slider.directive';
-
-@NgModule({
-  declarations: [MatchaSliderDirective],
-  imports: [
-    CommonModule
-  ],
-  exports:[MatchaSliderDirective]
-})
-export class MatchaSliderModule { }

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

@@ -1,149 +0,0 @@
-import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-
-import { NgIf, NgFor } from '@angular/common';
-import { CommonModule } from '@angular/common';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { provideAnimations } from '@angular/platform-browser/animations';
-
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatInputModule } from '@angular/material/input';
-import { MatSliderModule } from '@angular/material/slider';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatchaCardModule } from 'matcha-components';
-
-import { sliderArgtypes } from './slider.argtypes';
-
-export default {
-    title: 'Atoms / Slider',
-    decorators: [
-        applicationConfig({
-            providers: [provideAnimations()],
-        }),
-
-        moduleMetadata({
-            imports: [CommonModule, FormsModule, MatFormFieldModule, MatSliderModule, MatCheckboxModule, MatchaCardModule, MatInputModule, ReactiveFormsModule, NgIf, NgFor],
-        }),
-    ],
-    args: {
-        color: 'accent',
-        disableRipple: false,
-        disabled: false,
-        discrete: false,
-        max: 100,
-        min: 0,
-        showTickMarks: false,
-        step: 1,
-        defaultColor: 'accent',
-    },
-    argTypes: sliderArgtypes,
-    parameters: {
-        controls: { expanded: true },
-    },
-} as Meta;
-
-export const SliderBasic: 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 w-256">
-                <mat-slider>
-                    <input matSliderThumb>
-                </mat-slider>
-            </form>
-        </div>
-        `,
-    }),
-    name: 'Basic',
-};
-
-export const RangeSlider: 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 w-256">
-                <mat-slider min="200" max="500">
-                    <input value="300" matSliderStartThumb>
-                    <input value="400" matSliderEndThumb>
-                </mat-slider>
-            </form>
-        </div>
-        `,
-    }),
-    name: 'Range Slider',
-};
-
-const disabled = false;
-const max = 100;
-const min = 0;
-const showTicks = false;
-const step = 1;
-const thumbLabel = false;
-const value = 0;
-export const SliderWithLabel: StoryObj = {
-    render: (args) => ({
-        props: args,
-        template: `
-        <div class="matcha-card background-surface d-flex-column gap-16">
-            <div class="matcha-card background-bg d-flex-column gap-16">
-                <div class="matcha-card background-surface d-flex-column gap-16">
-                    <h2>Configuration</h2>
-                    <section class="grid-md-4 gap-16">
-                        <mat-form-field appearance="outline" [color]="color">
-                            <mat-label>Value</mat-label>
-                            <input matInput type="number" [(ngModel)]="value">
-                        </mat-form-field>
-                        <mat-form-field appearance="outline" [color]="color">
-                            <mat-label>Min value</mat-label>
-                            <input matInput type="number" [(ngModel)]="min">
-                        </mat-form-field>
-                        <mat-form-field appearance="outline" [color]="color">
-                            <mat-label>Max value</mat-label>
-                            <input matInput type="number" [(ngModel)]="max">
-                        </mat-form-field>
-                        <mat-form-field appearance="outline" [color]="color">
-                            <mat-label>Step size</mat-label>
-                            <input matInput type="number" [(ngModel)]="step">
-                        </mat-form-field>
-                    </section>
-
-                    <section class="example-section">
-                    <mat-checkbox [(ngModel)]="showTicks">Show ticks</mat-checkbox>
-                    </section>
-
-                    <section class="example-section">
-                    <mat-checkbox [(ngModel)]="thumbLabel">Show thumb label</mat-checkbox>
-                    </section>
-
-                    <section class="example-section">
-                    <mat-checkbox [(ngModel)]="disabled">Disabled</mat-checkbox>
-                    </section>
-                </div>
-            </div>
-
-            <div class="matcha-card background-bg d-flex-column gap-16">
-                <div class="matcha-card background-surface d-flex-column gap-16">
-                    <h2>Result</h2>
-
-                    <div class="example-label-container">
-                    <label id="example-name-label" class="example-name-label">Value</label>
-                    <label class="example-value-label">{{slider.value}}</label>
-                    </div>
-                    <mat-slider
-                        class="example-margin"
-                        [disabled]="disabled"
-                        [max]="max"
-                        [min]="min"
-                        [step]="step"
-                        [discrete]="thumbLabel"
-                        [showTickMarks]="showTicks">
-                    <input matSliderThumb [(ngModel)]="value" #slider>
-                    </mat-slider>
-                </div>
-            </div>
-        </div>
-        `,
-    }),
-    name: 'With Label',
-};

package/src/lib/matcha-snackbar/snack-bar-overview-example.component.ts

@@ -1,23 +0,0 @@
-import { Component } from '@angular/core';
-import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
-import { MatButtonModule } from '@angular/material/button';
-import { MatInputModule } from '@angular/material/input';
-import { MatFormFieldModule } from '@angular/material/form-field';
-
-/**
- * @title Basic snack-bar
- */
-@Component({
-    selector: 'snack-bar-overview-example',
-    templateUrl: 'snack-bar-overview-example.html',
-    styleUrls: ['snack-bar-overview-example.css'],
-    standalone: true,
-    imports: [MatFormFieldModule, MatInputModule, MatButtonModule, MatSnackBarModule],
-})
-export class SnackBarOverviewExample {
-    constructor(private _snackBar: MatSnackBar) {}
-
-    openSnackBar(message: string, action: string) {
-        this._snackBar.open(message, action);
-    }
-}

package/src/lib/matcha-snackbar/snack-bar-overview-example.css

@@ -1,3 +0,0 @@
-mat-form-field {
-    margin-right: 12px;
-  }

package/src/lib/matcha-snackbar/snack-bar-overview-example.html

@@ -1,11 +0,0 @@
-<mat-form-field>
-    <mat-label>Message</mat-label>
-    <input matInput value="Disco party!" #message />
-</mat-form-field>
-
-<mat-form-field>
-    <mat-label>Action</mat-label>
-    <input matInput value="Dance" #action />
-</mat-form-field>
-
-<button mat-stroked-button (click)="openSnackBar(message.value, action.value)">Show snack-bar</button>

package/src/lib/matcha-snackbar/snack-bar.argtypes.ts

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

package/src/lib/matcha-snackbar/snack-bar.directive.ts

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

package/src/lib/matcha-snackbar/snack-bar.mdx

@@ -1,53 +0,0 @@
-import { Story } from "@storybook/blocks";
-import { Meta } from "@storybook/addon-docs";
-import * as ComponentStories from "./snack-bar.stories";
-
-<Meta title="Atoms / Snack Bar / Documentação" />
-
-# Snack Bar
-
-> _snack-bar_ "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">Snack Bar Basic</span>
-            <div class="matcha-card background-bg">
-                <Story of={ComponentStories.SnackBarOverview} />
-            </div>
-
-            <div class="d-flex-column">
-
-                ```html
-                <mat-form-field>
-                    <mat-label>Message</mat-label>
-                    <input matInput value="Disco party!" #message />
-                </mat-form-field>
-
-                <mat-form-field>
-                    <mat-label>Action</mat-label>
-                    <input matInput value="Dance" #action />
-                </mat-form-field>
-
-                <button mat-stroked-button (click)="openSnackBar(message.value, action.value)">Show snack-bar</button>
-                ```
-
-            </div>
-        </div>
-    </div>
-
-</div>
-
-<br />
-
-### Installation
-
-`import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';`
-
-[Official documentation](https://https://material.angular.io/components/snack-bar/overview)
-
-<br />

package/src/lib/matcha-snackbar/snack-bar.module.ts

@@ -1,10 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatchaSnackBarDirective } from './snack-bar.directive';
-
-@NgModule({
-    declarations: [MatchaSnackBarDirective],
-    imports: [CommonModule],
-    exports: [MatchaSnackBarDirective],
-})
-export class MatchaSnackBarModule {}

package/src/lib/matcha-snackbar/snack-bar.stories.ts

@@ -1,34 +0,0 @@
-import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-import { CommonModule } from '@angular/common';
-import { provideAnimations } from '@angular/platform-browser/animations';
-import { snackBarArgtypes } from './snack-bar.argtypes';
-import { SnackBarOverviewExample } from './snack-bar-overview-example.component';
-import { MatchaSnackBarModule } from './snack-bar.module';
-
-export default {
-    title: 'Atoms / Snack Bar',
-    component: SnackBarOverviewExample,
-    decorators: [
-        applicationConfig({
-            providers: [provideAnimations()],
-        }),
-
-        moduleMetadata({
-            imports: [CommonModule, MatchaSnackBarModule],
-        }),
-    ],
-    args: {},
-    argTypes: snackBarArgtypes,
-    parameters: {
-        controls: { expanded: true },
-    },
-} as Meta;
-
-export const SnackBarOverview: StoryObj<SnackBarOverviewExample> = {
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-    }),
-    name: 'Snack Bar Overview',
-};