matcha-components 1.0.5 → 1.0.7

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

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

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

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

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

@@ -0,0 +1,53 @@
+import { Story } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs";
+import * as ComponentStories from "./paginator.stories";
+
+<Meta title="Atoms / Paginator / Documentação" />
+
+# Paginator
+
+> _paginator_ "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">Paginator Basic</span>
+            <div class="matcha-card background-bg">
+                <Story of={ComponentStories.PaginatorOverview} />
+            </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)="openPaginator(message.value, action.value)">Show paginator</button>
+                ```
+
+            </div>
+        </div>
+    </div>
+
+</div>
+
+<br />
+
+### Installation
+
+`import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';`
+
+[Official documentation](https://https://material.angular.io/components/paginator/overview)
+
+<br />

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

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

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

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

package/src/lib/matcha-progress-bar/progress-bar.argtype.ts

@@ -0,0 +1,48 @@
+export const progressBarArgtypes = {
+    bufferValue: {
+        description: 'Buffer value of the progress bar',
+        defaultValue: 0,
+        table: {
+            type: { summary: 'range' },
+            defaultValue: { summary: 75 },
+        },
+        control: {
+            type: 'range',
+            min: 0,
+            max: 100,
+            step: 1,
+        },
+    },
+    color: {
+        description: 'Theme color palette',
+        control: 'select',
+        defaultValue: 'accent',
+        table: {
+            defaultValue: { summary: 'accent' },
+        },
+        options: ['primary', 'accent', 'warn'],
+    },
+    mode: {
+        description: 'Mode of the progress bar',
+        control: 'select',
+        defaultValue: 'indeterminate',
+        table: {
+            defaultValue: { summary: 'indeterminate' },
+        },
+        options: ['determinate', 'indeterminate', 'buffer', 'query'],
+    },
+    value: {
+        description: 'Value of the progress bar',
+        defaultValue: 0,
+        table: {
+            type: { summary: 'range' },
+            defaultValue: { summary: 25 },
+        },
+        control: {
+            type: 'range',
+            min: 0,
+            max: 100,
+            step: 1,
+        },
+    },
+};

package/src/lib/matcha-progress-bar/progress-bar.directive.ts

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

package/src/lib/matcha-progress-bar/progress-bar.mdx

@@ -0,0 +1,95 @@
+import { Story } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs";
+import * as ComponentStories from "./progress-bar.stories";
+
+<Meta title="Atoms / Progress Bar / Documentação" />
+
+# Progress bar
+
+> _mat-progress-bar_ "ESCREVER DEFINIÇÃO DO ATÔMICO"
+
+---
+
+### Modes
+
+<div class="grid-md-2 gap-16">
+
+    <div class="matcha-card background-surface d-flex-column gap-16">
+        <span class="h5">ProgressBar - Indeterminate</span>
+        <div class="matcha-card background-bg">
+            <Story of={ComponentStories.ProgressBarIndeterminate} />
+        </div>
+        <div class="d-flex-column">
+            ```html
+            <mat-progress-bar
+                matcha-progress-bar
+                color="accent"
+                mode="indeterminate"
+            ></mat-progress-bar>
+            ```
+        </div>
+    </div>
+
+    <div class="matcha-card background-surface d-flex-column gap-16">
+        <span class="h5">ProgressBar - Query</span>
+        <div class="matcha-card background-bg">
+            <Story of={ComponentStories.ProgressBarQuery} />
+        </div>
+        <div class="d-flex-column">
+            ```html
+            <mat-progress-bar
+                matcha-progress-bar
+                color="accent"
+                mode="query"
+            ></mat-progress-bar>
+            ```
+        </div>
+    </div>
+
+    <div class="matcha-card background-surface d-flex-column gap-16">
+        <span class="h5">ProgressBar - Buffer</span>
+        <div class="matcha-card background-bg">
+            <Story of={ComponentStories.ProgressBarBuffer} />
+        </div>
+        <div class="d-flex-column">
+            ```html
+                <mat-progress-bar
+                matcha-progress-bar
+                bufferValue="75"
+                color="accent"
+                mode="buffer"
+                value="25">
+            </mat-progress-bar>
+            ```
+        </div>
+    </div>
+
+
+    <div class="matcha-card background-surface d-flex-column gap-16">
+        <span class="h5">ProgressBar - Determinate</span>
+        <div class="matcha-card background-bg">
+            <Story of={ComponentStories.ProgressBarDeterminate} />
+        </div>
+        <div class="d-flex-column">
+            ```html
+                <mat-progress-bar
+                    matcha-progress-bar
+                    color="accent"
+                    mode="determinate"
+                    value="25">
+                </mat-progress-bar>
+            ```
+        </div>
+    </div>
+
+</div>
+
+<br />
+
+### Installation
+
+`import {MatProgressBarModule} from '@angular/material/progress-bar';`
+
+[Official documentation](https://material.angular.io/components/progress-bar/overview)
+
+<br />

package/src/lib/matcha-progress-bar/progress-bar.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatchaProgressBarDirective } from './progress-bar.directive';
+
+@NgModule({
+  declarations: [MatchaProgressBarDirective],
+  imports: [
+    CommonModule
+  ],
+  exports:[
+      MatchaProgressBarDirective
+  ]
+})
+export class MatchaProgressBarModule { }

package/src/lib/matcha-progress-bar/progress-bar.stories.ts

@@ -0,0 +1,89 @@
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { config } from '@storybook/addon-designs';
+
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { progressBarArgtypes } from './progress-bar.argtype';
+import { MatchaProgressBarDirective } from './progress-bar.directive';
+
+export default {
+    title: 'Atoms / Progress bar',
+    decorators: [
+        moduleMetadata({
+            imports: [MatProgressBarModule],
+            declarations: [MatchaProgressBarDirective],
+        }),
+    ],
+    args: {
+        bufferValue: 75,
+        color: 'accent',
+        value: 25,
+    },
+    argTypes: progressBarArgtypes,
+    parameters: {
+        controls: {
+            expanded: true,
+            exclude: ['mode'],
+        },
+        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 ProgressBarBuffer: StoryObj = {
+    render: (args) => ({
+        props: args,
+        template: `
+        <mat-progress-bar
+        matcha-progress-bar
+        [bufferValue]="bufferValue"
+        [color]="color"
+        mode="buffer"
+        [value]="value"></mat-progress-bar>
+    `,
+    }),
+    name: 'Buffer',
+};
+
+export const ProgressBarQuery: StoryObj = {
+    render: (args) => ({
+        props: args,
+        template: `
+        <mat-progress-bar
+        matcha-progress-bar
+        [color]="color"
+        mode="query">
+        </mat-progress-bar>
+    `,
+    }),
+    name: 'Query',
+};
+
+export const ProgressBarIndeterminate: StoryObj = {
+    render: (args) => ({
+        props: args,
+        template: `
+        <mat-progress-bar
+        matcha-progress-bar
+        [color]="color"
+        mode="indeterminate">
+        </mat-progress-bar>
+    `,
+    }),
+    name: 'Indeterminate',
+};
+
+export const ProgressBarDeterminate: StoryObj = {
+    render: (args) => ({
+        props: args,
+        template: `
+        <mat-progress-bar
+        matcha-progress-bar
+        [color]="color"
+        mode="determinate"
+        [value]="value"></mat-progress-bar>
+    `,
+    }),
+    name: 'Determinate',
+};

package/src/lib/matcha-progress-spinner/progress-spinner.argtype.ts

@@ -0,0 +1,65 @@
+export const progressSpinnerArgtypes = {
+    color: {
+      description: 'Theme color palette',
+      control: 'select',
+      defaultValue: 'primary',
+      table: {
+        defaultValue: { summary: 'primary' },
+      },
+      options: [
+        'primary',
+        'accent',
+        'warn',
+      ]
+    },
+    diameter: {
+      description: 'The diameter of the progress spinner (will set width and height of svg)',
+      defaultValue: 100,
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: 100 },
+      },
+      control: {
+        type: 'number'
+      }
+    },
+    mode: {
+      description: 'Mode of the progress circle',
+      control: 'select',
+      defaultValue: 'indeterminate',
+      table: {
+        defaultValue: { summary: 'indeterminate' },
+      },
+      options: [
+        'determinate',
+        'indeterminate',
+        'buffer',
+        'query'
+      ]
+    },
+    strokeWidth: {
+      description: 'Stroke width of the progress spinner',
+      defaultValue: 5,
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: 5 },
+      },
+      control: {
+        type: 'number'
+      }
+    },
+    value: {
+      description: 'Value of the progress circle',
+      defaultValue: 70,
+      table: {
+        type: { summary: 'range' },
+        defaultValue: { summary: 70 },
+      },
+      control: {
+        type: 'range',
+        min: 0,
+        max: 100,
+        step: 1
+      }
+    }
+  }

package/src/lib/matcha-progress-spinner/progress-spinner.directive.ts

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

package/src/lib/matcha-progress-spinner/progress-spinner.mdx

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

package/src/lib/matcha-progress-spinner/progress-spinner.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatchaProgressSpinnerDirective } from './progress-spinner.directive';
+
+@NgModule({
+  declarations: [MatchaProgressSpinnerDirective],
+  imports: [
+    CommonModule
+  ],
+  exports:[
+      MatchaProgressSpinnerDirective
+  ]
+})
+export class MatchaProgressSpinnerModule { }

package/src/lib/matcha-progress-spinner/progress-spinner.stories.ts

@@ -0,0 +1,44 @@
+import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { progressSpinnerArgtypes } from './progress-spinner.argtype';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatchaProgressSpinnerDirective } from './progress-spinner.directive';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { config } from '@storybook/addon-designs';
+
+export default {
+    title: 'Atoms/Progress spinner',
+    decorators: [
+        applicationConfig({
+            providers: [provideAnimations()],
+        }),
+        moduleMetadata({
+            imports: [MatProgressSpinnerModule],
+            declarations: [MatchaProgressSpinnerDirective],
+        }),
+    ],
+    args: {
+        color: 'primary',
+        diameter: 50,
+        strokeWidth: 5,
+        value: 70,
+    },
+    argTypes: progressSpinnerArgtypes,
+    parameters: {
+        controls: {
+            expanded: true,
+            exclude: ['mode'],
+        },
+    },
+} as Meta;
+
+/** Ce é pixuloko  ce é biruleibe? */
+export const ProgressSpinnerOverview: StoryObj = {
+    render: (args) => ({
+        props: args,
+        template: `
+    <mat-progress-spinner matcha-progress-spinner [color]="color" mode="determinate" [value]="value" [diameter]="diameter" [strokeWidth]="strokeWidth"></mat-progress-spinner>
+    <mat-progress-spinner matcha-progress-spinner [color]="color" mode="indeterminate" [value]="value" [diameter]="diameter" [strokeWidth]="strokeWidth"></mat-progress-spinner>
+`,
+    }),
+    name: 'Progress Spinner Overview',
+};

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

@@ -0,0 +1,85 @@
+export const matchaRadioButtonArgtypes = {
+    color: {
+      description: 'Theme color for all of the radio buttons in the group.',
+      control: 'select',
+      defaultValue: 'primary',
+      table: {
+        defaultValue: { summary: 'primary' },
+      },
+      options: [
+        'primary',
+        'accent',
+        'warn',
+      ]
+    },
+    disabled: {
+        description: 'Whether the radio group is disabled',
+        control: 'boolean',
+        defaultValue: true,
+        table: {
+            defaultValue: { summary: true },
+        },
+    },
+    labelPosition: {
+      description: 'Whether the labels should appear after or before the radio-buttons. Defaults to "after"',
+      control: 'select',
+      defaultValue: 'after',
+      table: {
+        defaultValue: { summary: 'after' },
+      },
+      options: [
+        'before',
+        'after'
+      ]
+    },
+    // strokeWidth: {
+    //   description: 'Stroke width of the progress spinner',
+    //   defaultValue: 5,
+    //   table: {
+    //     type: { summary: 'number' },
+    //     defaultValue: { summary: 5 },
+    //   },
+    //   control: {
+    //     type: 'number'
+    //   }
+    // },
+    // value: {
+    //   description: 'Value of the progress circle',
+    //   defaultValue: 70,
+    //   table: {
+    //     type: { summary: 'range' },
+    //     defaultValue: { summary: 70 },
+    //   },
+    //   control: {
+    //     type: 'range',
+    //     min: 0,
+    //     max: 100,
+    //     step: 1
+    //   }
+    // }
+  }
+
+// Whether the labels should appear after or before the radio-buttons. Defaults to 'after'
+
+// @Input()
+// name: string
+
+// Name of the radio button group. All radio buttons inside this group will use this name.
+
+// @Input()
+// required: boolean
+
+// Whether the radio group is required
+
+// @Input()
+// selected: T
+
+// The currently selected radio button. If set to a new radio button, the radio group value will be updated to match the new selected button.
+
+// @Input()
+// value: any
+
+// Value for the radio-group. Should equal the value of the selected radio button if there is a corresponding radio button with a matching value. If there is not such a corresponding radio button, this value persists to be applied in case a new radio button is added with a matching value.
+
+// @Output()
+// change: EventEmitter<MatRadioChange>

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

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