matcha-components 1.0.2 → 1.0.6

package/src/lib/matcha-forms/matcha-form-field.stories.ts

@@ -0,0 +1,345 @@
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { formFieldArgtypes } from './matcha-form-field-argtype';
+import { MatSelectModule } from '@angular/material/select';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import {
+    FormControl,
+    FormsModule,
+    ReactiveFormsModule,
+    Validators,
+} from '@angular/forms';
+import { userEvent, within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+
+export default {
+    title: 'Atoms / Form field',
+    // tags: ['autodocs'],
+    decorators: [
+        moduleMetadata({
+            imports: [
+                BrowserAnimationsModule,
+                MatFormFieldModule,
+                MatInputModule,
+                MatSelectModule,
+                MatIconModule,
+                MatButtonModule,
+                ReactiveFormsModule,
+                FormsModule,
+            ],
+        }),
+    ],
+    parameters: {
+        actions: { argTypesRegex: '^on.*' },
+        controls: {
+            expanded: true,
+        },
+    },
+    argTypes: formFieldArgtypes,
+} as Meta;
+
+export const WithBasicUsage: StoryObj = {
+    render: (args) => ({
+        props: args,
+        template: `
+
+    <mat-form-field id="email" appearance="outline" [color]="color" [floatLabel]="floatLabel" [hideRequiredMarker]="hideRequiredMarker" [hintLabel]="hintLabel">
+          <mat-label>email</mat-label>
+          <input type="text" matInput>
+      </mat-form-field>
+
+      <mat-form-field id="password" appearance="outline" [color]="color" [floatLabel]="floatLabel" [hideRequiredMarker]="hideRequiredMarker" [hintLabel]="hintLabel">
+          <mat-label>Password</mat-label>
+          <input type="text" matInput>
+      </mat-form-field>
+    `,
+    }),
+    // Added an example of how to use the play function
+    // For more information, see https://storybook.js.org/docs/angular/writing-tests/interaction-testing
+    // See https://storybook.js.org/docs/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        // 👇 Simulate interactions with the component
+        await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
+        await userEvent.type(
+            canvas.getByTestId('password'),
+            'a-random-password'
+        );
+        await userEvent.click(canvas.getByRole('button'));
+        // 👇 Assert DOM structure
+        await expect(
+            canvas.getByText(
+                'Everything is perfect. Your account is ready and we should probably get you started!'
+            )
+        );
+    },
+    name: 'basic usage',
+    parameters: {
+        controls: {
+            exclude: ['alignHint'],
+        },
+    },
+};
+
+export const WithStateFilled: StoryObj = {
+    render: (args) => ({
+        props: args,
+        template: `
+      <mat-form-field [appearance]="appearance" [color]="color" [floatLabel]="floatLabel" [hideRequiredMarker]="hideRequiredMarker" [hintLabel]="hintLabel">
+          <mat-label>Password</mat-label>
+          <input type="text" matInput [ngModel]="'admin'">
+      </mat-form-field>
+    `,
+    }),
+    name: 'with state (filled)',
+    parameters: {
+        controls: {
+            exclude: ['alignHint'],
+        },
+    },
+};
+
+export const WithStateDisabled: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+            appearance: 'outline',
+        },
+        template: `
+      <mat-form-field [appearance]="appearance" [color]="color" [floatLabel]="floatLabel" [hideRequiredMarker]="hideRequiredMarker" [hintLabel]="hintLabel">
+          <mat-label>Password</mat-label>
+          <input type="text" matInput disabled>
+      </mat-form-field>
+    `,
+    }),
+    name: 'with state (disabled)',
+    parameters: {
+        controls: {
+            exclude: ['alignHint'],
+        },
+    },
+};
+
+export const WithStateFocused: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+            appearance: 'outline',
+        },
+        template: `
+      <mat-form-field class="mat-focused" [appearance]="appearance" [color]="color" [floatLabel]="floatLabel" [hideRequiredMarker]="hideRequiredMarker" [hintLabel]="hintLabel">
+          <mat-label>Password 1</mat-label>
+          <input type="text" matInput [ngModel]="'admin'">
+      </mat-form-field>
+    `,
+    }),
+    name: 'with state (focused)',
+    parameters: {
+        controls: {
+            exclude: ['alignHint'],
+        },
+    },
+};
+
+export const WithStateHover: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+            appearance: 'outline',
+        },
+        template: `
+      <mat-form-field class="mat-focused" [appearance]="appearance" [color]="color" [floatLabel]="floatLabel" [hideRequiredMarker]="hideRequiredMarker" [hintLabel]="hintLabel">
+          <mat-label>Password</mat-label>
+          <input type="text" matInput>
+      </mat-form-field>
+    `,
+    }),
+    name: 'with state (hover)',
+    parameters: {
+        controls: {
+            exclude: ['alignHint'],
+        },
+        pseudo: {
+            hover: true,
+        },
+    },
+};
+
+export const WithAppearanceOutline: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+            appearance: 'outline',
+        },
+        template: `
+      <mat-form-field [appearance]="appearance" [color]="color" [floatLabel]="floatLabel" [hideRequiredMarker]="hideRequiredMarker" [hintLabel]="hintLabel">
+          <mat-label>Password</mat-label>
+          <input type="text" matInput>
+      </mat-form-field>
+    `,
+    }),
+    name: 'with appearance (outline)',
+    parameters: {
+        controls: {
+            exclude: ['alignHint'],
+        },
+    },
+};
+
+export const WithStartHint: StoryObj = {
+    render: (args) => ({
+        props: args,
+        template: `
+      <mat-form-field [appearance]="appearance" [color]="color" [floatLabel]="floatLabel" [hideRequiredMarker]="hideRequiredMarker" [hintLabel]="hintLabel">
+          <mat-label>Password</mat-label>
+          <input type="text" matInput>
+          <mat-hint align="start">at least 8 characters</mat-hint>
+      </mat-form-field>
+    `,
+    }),
+    name: 'with hint (start)',
+};
+
+export const WithEndHint: StoryObj = {
+    render: (args) => ({
+        props: args,
+        template: `
+      <mat-form-field [appearance]="appearance" [color]="color" [floatLabel]="floatLabel" [hideRequiredMarker]="hideRequiredMarker" [hintLabel]="hintLabel">
+          <mat-label>Contributions</mat-label>
+          <mat-select>
+              <mat-option>Components</mat-option>
+              <mat-option>Use cases</mat-option>
+          </mat-select>
+          <mat-hint align="end">Choose an option ^</mat-hint>
+      </mat-form-field>
+    `,
+    }),
+    name: 'with hint (end)',
+};
+
+export const WithDoubleHints: StoryObj = {
+    render: (args) => ({
+        props: args,
+        template: `
+      <mat-form-field [appearance]="appearance" [color]="color" [floatLabel]="floatLabel" [hideRequiredMarker]="hideRequiredMarker" [hintLabel]="hintLabel">
+          <mat-label>Username</mat-label>
+          <input type="text" matInput #input [attr.maxlength]="10">
+          <mat-hint align="start">Max 10 characters</mat-hint>
+          <mat-hint align="end">{{input.value.length || 0}}/10</mat-hint>
+      </mat-form-field>
+    `,
+    }),
+    name: 'with hint (double)',
+};
+
+export const WithPrefix: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+            hide: true,
+        },
+        template: `
+      <mat-form-field [appearance]="appearance" [color]="color" [floatLabel]="floatLabel" [hideRequiredMarker]="hideRequiredMarker" [hintLabel]="hintLabel">
+          <mat-label>Password</mat-label>
+          <input matInput [type]="hide ? 'password' : 'text'">
+          <span class="i-matcha-action_key"></span>
+      </mat-form-field>
+    `,
+    }),
+    name: 'with prefix',
+    parameters: {
+        controls: {
+            exclude: ['alignHint'],
+        },
+    },
+};
+
+export const WithSuffix: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+            hide: true,
+        },
+        template: `
+      <mat-form-field [appearance]="appearance" [color]="color" [floatLabel]="floatLabel" [hideRequiredMarker]="hideRequiredMarker" [hintLabel]="hintLabel">
+          <mat-label>Password</mat-label>
+          <input matInput [type]="hide ? 'password' : 'text'">
+          <button mat-icon-button matSuffix (click)="hide = !hide" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide">
+          <span class="{{hide ? 'i-matcha-visibility-on' : 'i-matcha-visibility-off'}}"></span>
+          </button>
+      </mat-form-field>
+    `,
+    }),
+    name: 'with suffix',
+    parameters: {
+        controls: {
+            exclude: ['alignHint'],
+        },
+    },
+};
+
+export const WithPrefixAndSuffix: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+            hide: true,
+        },
+        template: `
+      <style>
+      .example-right-align {
+          text-align: right;
+      }
+
+      input.example-right-align::-webkit-outer-spin-button,
+      input.example-right-align::-webkit-inner-spin-button {
+          display: none;
+      }
+
+      input.example-right-align {
+          -moz-appearance: textfield;
+      }
+      </style>
+      <mat-form-field [appearance]="appearance" [color]="color" [floatLabel]="floatLabel" [hideRequiredMarker]="hideRequiredMarker" [hintLabel]="hintLabel">
+          <mat-label>Amount</mat-label>
+          <input matInput type="number" class="example-right-align" placeholder="0">
+          <span matPrefix>$&nbsp;</span>
+          <span matSuffix>.00</span>
+    </mat-form-field>
+    `,
+    }),
+    name: 'with prefix and suffix',
+    parameters: {
+        controls: {
+            exclude: ['alignHint'],
+        },
+    },
+};
+
+const control = new FormControl('', Validators.required);
+control.markAsTouched();
+
+export const WithErrorMessage: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+            control: control,
+        },
+        template: `
+        <mat-form-field [appearance]="appearance" [color]="color" [floatLabel]="floatLabel" [hideRequiredMarker]="hideRequiredMarker" [hintLabel]="hintLabel">
+            <mat-label>Password</mat-label>
+            <input type="text" matInput [formControl]="control">
+            <mat-error *ngIf="control.hasError('required')">This field is required</mat-error>
+        </mat-form-field>
+        `,
+    }),
+    name: 'with error message',
+    parameters: {
+        controls: {
+            exclude: ['alignHint'],
+        },
+    },
+};

package/src/lib/matcha-forms/matcha-form-input-text.directive.ts

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

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

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatchaIconPositionPreDirective } from './matcha-icon-position-pre.directive';
+import { MatchaIconPositionPosDirective } from './matcha-icon-position-pos.directive';
+
+@NgModule({
+  declarations: [
+    MatchaIconPositionPreDirective,
+    MatchaIconPositionPosDirective
+  ],
+  imports: [
+    CommonModule
+  ],
+  exports: [
+    MatchaIconPositionPreDirective,
+    MatchaIconPositionPosDirective
+  ]
+})
+export class MatchaIconModule { }

package/src/lib/matcha-icon/matcha-icon-position-pos.directive.ts

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

package/src/lib/matcha-icon/matcha-icon-position-pre.directive.ts

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

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

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatchaListDirective } from './matcha-list.directive';
+
+@NgModule({
+  declarations: [MatchaListDirective],
+  imports: [
+    CommonModule
+  ],
+  exports:[
+      MatchaListDirective
+  ]
+})
+export class MatchaListModule { }

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

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

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

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

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

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatchaMenuDirective } from './matcha-menu.directive';
+
+@NgModule({
+  declarations: [MatchaMenuDirective],
+  imports: [
+    CommonModule
+  ],
+  exports:[
+      MatchaMenuDirective
+  ]
+})
+export class MatchaMenuModule { }

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

@@ -0,0 +1,76 @@
+import { storiesOf } from '@storybook/angular';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatButtonModule } from '@angular/material/button';
+
+storiesOf('Menu', module)
+    .add('Basic', () => ({
+        template: `
+    <div>
+      <button mat-button [disabled]="disabled" [matMenuTriggerFor]="menu">Menu</button>
+      <mat-menu #menu="matMenu">
+        <button mat-menu-item>Item 1</button>
+        <button mat-menu-item>Item 2</button>
+      </mat-menu>
+    </div>
+    `,
+        props: {
+            disabled: { disabled: false },
+        },
+        moduleMetadata: {
+            imports: [MatMenuModule, MatButtonModule, BrowserAnimationsModule],
+        },
+    }))
+    .add('Nested', () => ({
+        template: `
+    <div>
+      <button mat-button [disabled]="disabled" [matMenuTriggerFor]="animals">Animal index</button>
+      <mat-menu #animals="matMenu">
+        <button mat-menu-item [matMenuTriggerFor]="vertebrates">Vertebrates</button>
+        <button mat-menu-item [matMenuTriggerFor]="invertebrates">Invertebrates</button>
+      </mat-menu>
+      <mat-menu #vertebrates="matMenu">
+        <button mat-menu-item [matMenuTriggerFor]="fish">Fishes</button>
+        <button mat-menu-item [matMenuTriggerFor]="amphibians">Amphibians</button>
+        <button mat-menu-item [matMenuTriggerFor]="reptiles">Reptiles</button>
+        <button mat-menu-item>Birds</button>
+        <button mat-menu-item>Mammals</button>
+      </mat-menu>
+      <mat-menu #invertebrates="matMenu">
+        <button mat-menu-item>Insects</button>
+        <button mat-menu-item>Molluscs</button>
+        <button mat-menu-item>Crustaceans</button>
+        <button mat-menu-item>Corals</button>
+        <button mat-menu-item>Arachnids</button>
+        <button mat-menu-item>Velvet worms</button>
+        <button mat-menu-item>Horseshoe crabs</button>
+      </mat-menu>
+      <mat-menu #fish="matMenu">
+        <button mat-menu-item>Baikal oilfish</button>
+        <button mat-menu-item>Bala shark</button>
+        <button mat-menu-item>Ballan wrasse</button>
+        <button mat-menu-item>Bamboo shark</button>
+        <button mat-menu-item>Banded killifish</button>
+      </mat-menu>
+      <mat-menu #amphibians="matMenu">
+        <button mat-menu-item>Sonoran desert toad</button>
+        <button mat-menu-item>Western toad</button>
+        <button mat-menu-item>Arroyo toad</button>
+        <button mat-menu-item>Yosemite toad</button>
+      </mat-menu>
+      <mat-menu #reptiles="matMenu">
+        <button mat-menu-item>Banded Day Gecko</button>
+        <button mat-menu-item>Banded Gila Monster</button>
+        <button mat-menu-item>Black Tree Monitor</button>
+        <button mat-menu-item>Blue Spiny Lizard</button>
+        <button mat-menu-item disabled>Velociraptor</button>
+      </mat-menu>
+    </div>
+    `,
+        props: {
+            disabled: { disabled: false },
+        },
+        moduleMetadata: {
+            imports: [MatMenuModule, MatButtonModule, BrowserAnimationsModule],
+        },
+    }));

package/src/lib/matcha-paginator/matcha-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.module.ts

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

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