matcha-components 1.0.2 → 1.0.6

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_ is a horizontal progress-bar for indicating progress and activity.
+
+---
+
+### 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,23 @@
+import { Story } from '@storybook/blocks';
+import * as ComponentStories from './progress-spinner.stories';
+import { Meta } from '@storybook/addon-docs';
+
+
+<Meta of={ComponentStories} />
+
+# Progress spinner
+
+> *mat-progress-spinner* and *mat-spinner* are a circular indicators of progress and activity.
+
+<br/>
+
+## Installation
+
+`import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';`
+
+[Official documentation](https://material.angular.io/components/progress-spinner/overview)
+
+<br/>
+
+## Example
+<Story of={ComponentStories.WithBasicUsage}></Story>

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 { 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';
+
+const meta: Meta<typeof MatProgressSpinnerModule> = {
+    component: MatProgressSpinnerModule,
+};
+
+export default {
+    title: 'Atoms/Progress spinner',
+    decorators: [
+        moduleMetadata({
+            imports: [MatProgressSpinnerModule],
+            declarations: [MatchaProgressSpinnerDirective],
+        }),
+    ],
+    // tags: ['autodocs'],
+    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 WithBasicUsage: 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: 'basic usage',
+};

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')
+    }
+
+}

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

@@ -0,0 +1,44 @@
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+
+import { MatRadioModule } from '@angular/material/radio';
+
+import { matchaRadioButtonArgtypes } from './matcha-radio-button.argtype';
+import { MatchaRadioButtonDirective } from './matcha-radio-button.directive';
+
+/** Este é o card principal */
+export default {
+    title: 'Atoms/Radio Button',
+    decorators: [
+        moduleMetadata({
+            imports: [MatRadioModule],
+            declarations: [MatchaRadioButtonDirective],
+        }),
+    ],
+    tags: ['autodocs'],
+    args: {
+        color: 'primary',
+        diameter: 50,
+        strokeWidth: 5,
+        value: 70,
+    },
+    argTypes: matchaRadioButtonArgtypes,
+    parameters: {
+        controls: {
+            expanded: true,
+            exclude: ['mode'],
+        },
+    },
+} as Meta;
+
+export const WithBasicUsage: StoryObj = {
+    render: (args) => ({
+        props: args,
+        template: `
+        <mat-radio-group aria-label="Select an option" matchaRadioButton>
+            <mat-radio-button value="1">Option 1</mat-radio-button>
+            <mat-radio-button value="2">Option 2</mat-radio-button>
+        </mat-radio-group>
+        `,
+    }),
+    name: 'basic usage',
+};

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

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

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

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

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

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

package/src/lib/matcha-select/select.stories.txt

@@ -0,0 +1,109 @@
+import {storiesOf} from '@storybook/angular';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatSelectModule} from '@angular/material/select';
+import {array, boolean, text, object} from 'storybook-addon-knobs-color-options';
+import {action} from '@storybook/addon-actions';
+
+storiesOf('Select', module)
+  .add('Single Select', () => ({
+    template: `
+    <div>
+      <mat-form-field>
+        <mat-select (change)="onChange($event)" [placeholder]="placeholder" [disabled]="disabled">
+          <mat-option *ngFor="let food of foods" [value]="food">
+            {{food}}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+    </div>
+    `,
+    props: {
+      foods: array('foods', [
+        'Pizza',
+        'Burgers',
+        'Steak',
+        'Tacos'
+      ]),
+      placeholder: text('placeholder', 'Favorite food'),
+      disabled: boolean('disabled', false),
+      onChange: action('change')
+    },
+    moduleMetadata: {
+      imports: [MatFormFieldModule, BrowserAnimationsModule, MatSelectModule]
+    }
+  }))
+  .add('Multi Select', () => ({
+    template: `
+    <div>
+      <mat-form-field>
+        <mat-select (change)="onChange($event)" [placeholder]="placeholder" multiple [disabled]="disabled">
+          <mat-option *ngFor="let food of foods" [value]="food">
+            {{food}}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+    </div>
+    `,
+    props: {
+      foods: array('foods', [
+        'Pizza',
+        'Burgers',
+        'Steak',
+        'Tacos'
+      ]),
+      placeholder: text('placeholder', 'Favorite food'),
+      disabled: boolean('disabled', false),
+      onChange: action('change')
+    },
+    moduleMetadata: {
+      imports: [MatFormFieldModule, BrowserAnimationsModule, MatSelectModule]
+    }
+  }))
+  .add('Groups', () => ({
+    template: `
+    <div>
+      <mat-form-field>
+        <mat-select (change)="onChange($event)" [placeholder]="placeholder" [disabled]="disabled">
+          <mat-option>-- None --</mat-option>
+          <mat-optgroup *ngFor="let group of foodGroups" [label]="group.name">
+            <mat-option *ngFor="let food of group.foods" [value]="food">
+              {{food}}
+            </mat-option>
+          </mat-optgroup>
+        </mat-select>
+      </mat-form-field>
+    </div>
+    `,
+    props: {
+      foodGroups: object('foodGroups', [
+        {
+          name: 'Fruit',
+          foods: [
+            'Apple',
+            'Orange'
+          ]
+        },
+        {
+          name: 'Vegetables',
+          foods: [
+            'Lettuce',
+            'Broccoli'
+          ]
+        },
+        {
+          name: 'Meats',
+          foods: [
+            'Steak',
+            'Chicken'
+          ]
+        }
+      ]),
+      disabled: boolean('disabled', false),
+      placeholder: text('placeholder', 'Foods'),
+      onChange: action('change')
+    },
+    moduleMetadata: {
+      imports: [MatFormFieldModule, BrowserAnimationsModule, MatSelectModule]
+    }
+  }));