monkey-style-guide

An style guide template to boost your projects.

Who We Are?

This project was defined to be the main guide to styles, colors and html components of the entire ecosystem of Monkey Exchange systems.

This style guide contains a concept to work with a range of different colors, making possible to create beautiful and useful html components.

All components was developed to work with angular reactive forms, so we need to define a formGroup and set the formControlName, and the components will do the rest of the job to fill all fields properly. First developed on Angular 10, this color guide contains the following components:

Parameters:

• count (string) is used to define the content of badge.
• pulseOn (boolean)(default: false) is used to define if badge has to pulse like a bell.

Example:

example.module.ts

import { MonkeyBadgeModule } from 'monkey-style-guide';

...

@NgModule({
  imports: [MonkeyBadgeModule]
})
...

example.component.html

<monkey-badge count="3" [pulseOn]="true"></monkey-badge>

Parameters:

• color (string) can be theme, error, warning or success
• disabled (boolean)(default: false) to disable any action
• icon (optional)(string) define the icon for button
• iconPoition (string)(default: 'left') define the icon position. Can be left or right
• label (string) define the label that will be displayed inside the button
• type (string) can be primary, secondary, tertiary

Example:

example.module.ts

import { MonkeyButtonModule } from 'monkey-style-guide';

...

@NgModule({
  imports: [MonkeyButtonModule]
})
...

example.component.html

<monkey-button color="theme" label="Primary" type="primary"></monkey-button>
<monkey-button color="error" label="Secondary" type="secondary"></monkey-button>
<monkey-button color="warning" label="Tertiary" type="tertiary"></monkey-button>

There are other variations with buttons:

Parameters:

• label (string) define the label that will be displayed inside the button
• size (string) define the size of the button
• type (string) can be theme, theme-100 or none

Example:

example.component.html

<monkey-button-avatar label="Amilson" size="sm" type="theme"></monkey-button-avatar>

Parameters:

• label (ng-template) the label that will be displayed inside the button. For this particular component, label has be a ng-template.
• listenClicks (boolean)(default: true) can be used to define if the dropdown will be closed with clicks inside
• type (string)(default: 'filled') can be unfilled or filled

Example:

example.component.html

<monkey-button-dropdown [label]="profileButton">
  <div class="mt-2">
    <monkey-button
      color="theme"
      label="Profile"
      type="tertiary"
      [routerLink]="'/app/user/profile/edit'"
    >
    </monkey-button>
  </div>
  <div class="mt-2">
    <monkey-button color="theme" label="Logout" type="tertiary"></monkey-button>
  </div>
</monkey-button-dropdown>

<ng-template #profileButton>
  <monkey-button-avatar label="Monkey" size="sm" type="theme"></monkey-button-avatar>
</ng-template>

Parameters:

• description (optional)(string) description to be displayed by side of the checkbox
• errorMessage (string) message to alert user
• helperMessage (optional)(string) can be used with type single, for formfield purpose
• infoMessage (optional)(string) message to help user knows about this component purpose
• label (string) define the label that will be displayed inside
• type (string)(default: 'single') can be single or multiple. Will be used to render checkbox with formfield body or not.

Events:

• onChange event emited when user make changes

Example:

example.module.ts

import { MonkeyCheckboxModule } from 'monkey-style-guide';

...

@NgModule({
  imports: [MonkeyCheckboxModule]
})
...

example.component.html

<monkey-checkbox
  description="I Agree to Terms"
  errorMessage="Validation Message"
  formControlName="terms"
  helperMessage="Mandatory"
  infoMessage="Info message"
  label="Terms and Conditions"
  type="single">
</monkey-checkbox>

Parameters:

• errorMessage (string) message to alert user
• helperMessage (optional)(string) can be used with type single, for formfield purpose
• infoMessage (optional)(string) message to help user knows about this component purpose
• label (string) define the label that will be displayed inside
• i18n (Object) an i18n object (see example)

Events:

• onChange event emited when user select a range of dates or when clicked on some action

Example:

example.module.ts

import { MonkeyDateRangePicker } from 'monkey-style-guide';

...

@NgModule({
  imports: [MonkeyDateRangePicker]
})
...

example.component.html

<monkey-date-range-picker
  errorMessage="Error Message"
  helperMessage="Helper Message"
  infoMessage="Info Message"
  label="Label"
  [i18n]="i18n">
</monkey-date-range-picker>

example.component.ts

...
i18n = {
    months: {
      '1': 'January',
      '2': 'Febuary',
      '3': 'March',
      '4': 'April',
      '5': 'May',
      '6': 'June',
      '7': 'July',
      '8': 'August',
      '9': 'September',
      '10': 'October',
      '11': 'November',
      '12': 'December'
    },
    days: {
      '1': 'Sun.',
      '2': 'Mon.',
      '3': 'Tue.',
      '4': 'Wed.',
      '5': 'Thu.',
      '6': 'Fri.',
      '7': 'Sat.'
    },
    actions: {
      '30': '30 days',
      '60': '60 days',
      '90': '90 days'
    },
    today: 'Today'
  };
...

Parameters:

• color (string) can be theme, error, warning or success
• disabled (boolean)(default: false) to disable any action
• helperMessage (optional)(string) can be used with type single, for formfield purpose
• label (string) define the label that will be displayed inside
• open (boolean)(default: false) make expansion open or not

Events:

• onChange event emited when user make changes

Example:

example.module.ts

import { MonkeyExpansionModule } from 'monkey-style-guide';

...

@NgModule({
  imports: [MonkeyExpansionModule]
})
...

example.component.html

<monkey-expansion
  color="theme"
  label="Expansion"
  [helperMessage]="'helperMessage'"
>
  <div>Content 1</div>
  <div>Content 2</div>
</monkey-expansion>

Parameters:

• allowedExtensions (array of string) for example ['.jpg', '.jpeg', '.png']
• allowedExtensionErrorMessage (string) message to be displayed if the file extension is wrong
• errorMessage (string) message to alert user
• fileUpload (function) function to be used to upload file
• helperMessage (optional)(string) message to help user to know what to do
• infoMessage (optional)(string) required message
• label (string) define the label that will be displayed inside
• listenFiles (boolean)(default: false) if true, emit event to onHandleFilesReady with the selected file
• maxSize (number) max file size in kbytes (1 * 1024 * 1024)
• maxSizeErrorMessage (string) message to be displayed if the file size is wrong
• name (string) name to identify the input
• placeholder (optional)(string) message to help user that will be displayed inside the input
• uploadOngoingMessage (string) message to be used when upload starts

Events:

• onChange event emited when user make changes
• onHandleFilesReady event emited when listenFiled is true

Example:

example.module.ts

import { MonkeyFileUploadModule } from 'monkey-style-guide';

...

@NgModule({
  imports: [MonkeyFileUploadModule]
})
...

example.component.ts

...

uploadFunction: Function = (file: any, callback?: Function) => {
  this.uploadService.uploadFile(file, callback);
};

service.uploadFile(file: File, callback?: Function) {
  const { httpClient, headers } = this;
  const formData = new FormData();
  formData.append('file', file);

  httpClient.post<any>('endpoint/upload', formData, {
    headers,
    reportProgress: true,
    observe: 'events'
  }).subscribe((event: any) => {
    const { loaded, total, body } = event;
    switch (event.type) {
      case HttpEventType.UploadProgress:
        const progress = Math.round((loaded / total * 100));
        if (callback) callback(progress);
        break;
      case HttpEventType.Response:
        const { filename, _links: { file: { href } } } = body;
        if (callback) {
          callback(null, {
            fileName: filename,
            url: href
          }, null);
        }
        break;
      default:
        break;
    }
  }, (err: HttpErrorResponse) => {
    const { error } = err;
    callback(null, error?.notifications?.join(''));
  });
}

example.component.html

<monkey-file-upload
  allowedExtensionErrorMessage="Extension not allowed"
  icon="upload-20"
  label="upload"
  maxSize="5242880"
  maxSizeErrorMessage="Max file size is 5mb"
  placeholder="Add File"
  [fileUpload]="uploadFunction"
></monkey-file-upload>

Parameters:

• color (string) define color. Can be theme or #ffffff (hex value)
• icon (string) icon name and size separeted by hyfhen

Icons Options:

• add-plus
• address-book
• arrow-down
• arrow-left
• arrow-line-right
• arrow-right
• arrow-up
• arrows
• auction
• average-tax
• bank-account
• bank-agency
• bank
• banknote-search
• bell
• block
• book-open-text
• book
• box
• build-approved
• build-person
• build-refused
• build-waiting
• calendar
• calendar-box
• camera
• card-machine
• card
• cash-banknote-coins
• cash-banknote-invoice
• certificate-medal
• chart-down
• chart-down-arrow
• chart-up
• chart-up-arrow
• chat
• check-circle-out
• check-circle
• check-grey
• check-white
• check
• clipboard
• clock-closed
• clock
• close-circle
• close
• cnpj
• codepen
• company-name
• contract-pen
• contract
• delete
• digital-certificate
• document
• dollar-sign-circle
• dollar-sign
• domain
• dots-menu
• double-arrow-left
• double-arrow-right
• download
• drag-drop
• edit-square
• edit
• email-send-fast
• email
• empty-doc
• error
• eye-closed
• eye-open
• filter-add
• filter
• grid
• hand-money-banknote
• hands-clap
• help
• hexagon
• high-rising-build
• home
• image
• image-wave-square
• info
• invoice
• invoices-anticipated
• invoices-approval
• invoices-refused
• lighting-circle
• list
• location-pin
• login
• logout
• mail-box-upload
• mail-letter-fast-circle
• mail-open-document
• medal
• menu
• money-banknote-calculator
• money-cedule
• money-discount
• money-hand
• money-net
• money-new
• money-percent
• money-refused
• money-sign
• money
• money-waiting
• more-circle
• more
• new-company
• offered
• open-external
• password
• password-edit-protection
• people
• percent
• percent-box
• person-document
• person-sad
• phone-call
• phone
• pin-navigation
• pork
• radio
• refresh
• registration
• repeat
• search
• second-warning
• settings
• shield-chekmark
• star-shining
• star
• store
• suppliers
• target-dart-arrow
• today
• trash
• trophy
• unfold-more
• upload
• user-group
• user
• wallet
• warning

Example:

example.module.ts

import { MonkeyIconModule } from 'monkey-style-guide';

...

@NgModule({
  imports: [MonkeyIconModule]
})
...

example.component.html

<monkey-icon color="#000000" icon="password-16"></monkey-icon>

Parameters:

• capitalize (optional)(boolean) makes the value capitalcase
• currency (optional)(boolean) transforms the input in currency input
• errorMessage (string) message to alert user
• helperMessage (optional)(string) message to help user to know what to do
• icon (optional)(string) icon name and size separeted by hyfhen
• infoMessage (optional)(string) message to help user knows about this component purpose
• label (string) define the label that will be displayed inside
• lowerCase (optional)(boolean) makes the value lowercase
• mask (optional)(string) mask pattern to mask the input
• maxLength (optional)(number) max 255
• name (optional)(string) name to identify the input
• onlyNumber (optional)(boolean) makes the input accept only number
• onlyAlphaNumeric (optional)(boolean) makes the input accept only alphanumeric characters
• placeholder (optional)(string) message to help user that will be displayed inside the input
• prefix (optional)(string) prefix value for input
• type (string) can be text or password
• upperCase (optional)(boolean) makes the value uppercase

Events:

• onChange event emited when user make changes

Example:

example.module.ts

import { MonkeyInputModule } from 'monkey-style-guide';

...

@NgModule({
  imports: [MonkeyInputModule]
})
...

example.component.html

<monkey-input
  errorMessage="Validation Message"
  formControlName="name"
  helperMessage="Mandatory"
  icon="user-20"
  infoMessage="Info message"
  label="Name"
  placeholder="Input your full name">
</monkey-input>

Parameters:

• helperMessage (optional)(string) message to help user to know what to do
• icon (optional)(string) icon name and size separeted by hyfhen
• infoMessage (optional)(string) message to help user knows about this component purpose
• label (string) define the label that will be displayed inside
• maxLength (optional)(number) max 255
• name (optional)(string) name to identify the input
• placeholder (optional)(string) message to help user that will be displayed inside the input

Events:

• onChange event emited when user make changes

Example:

example.module.ts

import { MonkeyInputModule } from 'monkey-style-guide';

...

@NgModule({
  imports: [MonkeyInputModule]
})
...

example.component.html

<monkey-input-filter
  formControlName="name"
  helperMessage="Mandatory"
  icon="user-20"
  infoMessage="Info message"
  label="Name"
  placeholder="Input your full name">
</monkey-input-filter>

Parameters:

• config (MonkeyModalConfig) the configuration of modal
• modalRef (MonkeyModalRefs) the modal reference
• onHandleConfirm (EventEmitter) will emit and event when you click confirm

Example:

example.module.ts

import {
  MonkeyModalModule,
  MonkeyStyleGuideModalService
} from 'monkey-style-guide';

...

@NgModule({
  imports: [MonkeyModalModule],
  providers: [MonkeyStyleGuideModalService]
})
...

parent.component.ts

...
import { MonkeyStyleGuideModalService } from 'monkey-style-guide';
import { ModalComponent } from './modal/modal.component';

...

constructor(private modalService: MonkeyStyleGuideModalService) {}

openModal() {
  this.modalService.open(ModalComponent, {
    color: 'theme',
    size: 'md',
    action: {
      cancel: {
        actionColor: 'theme',
        actionType: 'tertiary',
        label: 'Cancel',
      },
      confirm: {
        actionColor: 'theme',
        actionType: 'primary',
        label: 'Confirm',
      },
    },
  });
}

modal.component.ts

import { Component, EventEmitter, Input } from '@angular/core';
import {
  MonkeyModalConfig,
  MonkeyModalRefs,
  MonkeyStyleGuideModalService
} from 'monkey-style-guide';

@Component({
  selector: 'mk-modal',
  template: `
    <monkey-modal
      [config]="config"
      [modalRef]="modalRef"
      [onHandleConfirm]="onHandleConfirm"
    >
      <div style="align-items: center; display: flex; justify-content: center;">
        <img
          src="https://dev-monkey-emails.s3-us-west-2.amazonaws.com/monkey-style-guide/demos/images/logo.png"
        />
      </div>
    </monkey-modal>
  `,
})
export class ModalComponent {
  @Input() config: MonkeyModalConfig;
  @Input() modalRef: MonkeyModalRefs<this>;
  @Input() onHandleConfirm = new EventEmitter<any>();

  constructor(private modalService: MonkeyStyleGuideModalService) {
    this.onHandleConfirm.subscribe(() => {
      console.log('Confirm clicked!');

      this.modalService.closeAll();
    });
  }
}

In case you need the logic in your parent component you can simply pass the action key to MonkeyModalConfig and remove onHandleConfirm of your modal component like this:

...

openModal() {
  this.modalService.open(ModalComponent, {
    color: 'theme',
    size: 'md',
    action: {
      cancel: {
        actionColor: 'theme',
        actionType: 'tertiary',
        label: 'Cancel',
      },
      confirm: {
        action: () => {
          console.log('Modal closed!');
        },
        actionColor: 'theme',
        actionType: 'primary',
        label: 'Confirm',
      },
    },
  });
}

...

export class ModalComponent {
  @Input() config: MonkeyModalConfig;
  @Input() modalRef: MonkeyModalRefs<this>;

  constructor() {}
}

Parameters:

• errorMessage (string) message to alert user
• helperMessage (optional)(string) message to help user to know what to do
• infoMessage (optional)(string) message to help user knows about this component purpose
• label (string) define the label that will be displayed inside
• placeholder (optional)(string) message to help user that will be displayed inside the input

Events:

• onChange event emited when user make changes

Example:

example.module.ts

import { MonkeyRadioButtonModule } from 'monkey-style-guide';

...

@NgModule({
  imports: [MonkeyRadioButtonModule]
})
...

example.component.html

<monkey-radiobutton
  formControlName="gender"
  label="Gender"
  helperMessage="Mandatory"
  icon="help-20"
  infoMessage="Info message"
  errorMessage="Validation message"
>
  <monkey-option label="Female" value="female"></monkey-option>
  <monkey-option label="Male" value="male"></monkey-option>
  <monkey-option label="I prefer not to choose" value="not_choose"></monkey-option>
</monkey-radiobutton>

Parameters:

• errorMessage (string) message to alert user
• helperMessage (optional)(string) message to help user to know what to do
• icon (optional)(string) icon name and size separeted by hyfhen
• infoMessage (optional)(string) message to help user knows about this component purpose
• label (string) define the label that will be displayed inside
• placeholder (optional)(string) message to help user that will be displayed inside the input

Events:

• onChange event emited when user make changes

Example:

example.module.ts

import {
  MonkeyOptionModule,
  MonkeySelectModule
} from 'monkey-style-guide';

...

@NgModule({
  imports: [
    MonkeyOptionModule,
    MonkeySelectModule
  ]
})
...

example.component.html

<monkey-select
  errorMessage="Validation Message"
  formControlName="documentType"
  helperMessage="Mandatory"
  icon="upload-20"
  infoMessage="Info message"
  label="Select the document type to upload"
>
  <monkey-option label="Personal Document" value="personal_document">
  </monkey-option>
  <monkey-option label="Social Contract" value="social_contract">
  </monkey-option>
  <monkey-option label="Procuraction Contract" value="procuration_contract">
  </monkey-option>
</monkey-select>

Parameters:

• dataSource (array) the data to be displayed
• headers (array) column headers
• loading (optional)(boolean) show loading progress
• rowTemplate (TemplateRef) the template to show rows
• selectable (optional)(boolean) enable row selection

Events:

• selection returns an array with selected rows

Example:

example.module.ts

import { MonkeyTableModule } from 'monkey-style-guide';

...

@NgModule({
  imports: [MonkeyTableModule]
})
...

example.component.ts

_dataSourceHeaders = ['column1', 'column2', 'column3', 'column4'];
_dataSource = [
  [1, 2, 3, 4, 5, 6],
  [5, 6, 7, 8, 9, 10],
  [5, 6, 7, 8, 9, 10],
  [5, 6, 7, 8, 9, 10],
];

example.component.html

<monkey-table
  [dataSource]="_dataSource"
  [headers]="_dataSourceHeaders"
  [loading]="true"
  [rowTemplate]="rowTemplate"
  [selectable]="true"
  (selection)="onHandleSelection($event)"
>
  <ng-template #rowTemplate let-row="row">
    <monkey-table-column>{{ row[0] }}</monkey-table-column>
    <monkey-table-column>{{ row[1] }}</monkey-table-column>
    <monkey-table-column>{{ row[2] }}</monkey-table-column>
    <monkey-table-column>{{ row[3] }}</monkey-table-column>
  </ng-template>
</monkey-table>

Parameters:

• value (boolean)(default: false)
• disabled (boolean)(default: false) to disable any action

Events:

• onChange event emited when user make changes

Example:

example.module.ts

import { MonkeyToggleModule } from 'monkey-style-guide';

...

@NgModule({
  imports: [MonkeyToggleModule]
})
...

example.component.html

<monkey-toggle [value]="_form?.get('smsNotification').value"
  (onChange)="onHandleToggleSMS($event)">
</monkey-toggle>

The main feature of this project is to allow changing the application theme, such as primary colors and error colors. For this, it is necessary to have a file called monkey-style-guide-settings.json at the root of your project's assets folder.

For example:

Content of monkey-style-guide-settings.json:

{
  "theme": {
    "title": "Monkey Exchange",
    "favicon": "assets/favicon.svg"
  },
  "colors": {
    "theme": {
      "main": "#034EA2",
      "100": "#F5FAFF",
      "200": "#D7EAFE",
      "300": "#A5CFFE",
      "400": "#72B4FD",
      "500": "#4099FC",
      "600": "#0F7EFB",
      "700": "#0465D2",
      "800": "#023064",
      "900": "#023064",
      "contrast": {
        "main": "white",
        "100": "rgba(black, 0.87)",
        "200": "white",
        "300": "white",
        "400": "white",
        "500": "white",
        "600": "white",
        "700": "white",
        "800": "white",
        "900": "white"
      }
    },
    "error": {
      "main": "#e70c0c",
      "100": "#fbb5b5",
      "200": "#f87f7f",
      "300": "#f53b3b",
      "400": "#f31e1e",
      "500": "#e70c0c",
      "600": "#ca0a0a",
      "700": "#ad0909",
      "800": "#900707",
      "900": "#730606",
      "contrast": {
        "main": "white",
        "100": "rgba(black, 0.87)",
        "200": "rgba(black, 0.87)",
        "300": "white",
        "400": "white",
        "500": "white",
        "600": "white",
        "700": "white",
        "800": "white",
        "900": "white"
      }
    },
    "warning": {
      "main": "#efa30e",
      "100": "#fbe7be",
      "200": "#f8d389",
      "300": "#f4b946",
      "400": "#f2ae29",
      "500": "#efa30e",
      "600": "#d28f0c",
      "700": "#b57c0b",
      "800": "#986809",
      "900": "#7b5407",
      "contrast": {
        "main": "rgba(black, 0.87)",
        "100": "rgba(black, 0.87)",
        "200": "rgba(black, 0.87)",
        "300": "rgba(black, 0.87)",
        "400": "rgba(black, 0.87)",
        "500": "rgba(black, 0.87)",
        "600": "rgba(black, 0.87)",
        "700": "rgba(black, 0.87)",
        "800": "white",
        "900": "white"
      }
    },
    "success": {
      "main": "#00875a",
      "100": "#45ffc1",
      "200": "#0dffae",
      "300": "#00c483",
      "400": "#00a66e",
      "500": "#00875a",
      "600": "#006846",
      "700": "#004a31",
      "800": "#002b1d",
      "900": "#000d08",
      "contrast": {
        "main": "white",
        "100": "rgba(black, 0.87)",
        "200": "rgba(black, 0.87)",
        "300": "rgba(black, 0.87)",
        "400": "white",
        "500": "white",
        "600": "white",
        "700": "white",
        "800": "white",
        "900": "white"
      }
    },
    "question": {
      "main": "#8D38FA",
      "100": "#F4EBFF",
      "200": "#E8D7FE",
      "300": "#D2AFFD",
      "400": "#A460FB",
      "500": "#8D38FA",
      "600": "#7710F9",
      "700": "#5104B3",
      "800": "#2D0264",
      "900": "#1B013C",
      "contrast": {
        "main": "white",
        "100": "rgba(black, 0.87)",
        "200": "rgba(black, 0.87)",
        "300": "rgba(black, 0.87)",
        "400": "white",
        "500": "white",
        "600": "white",
        "700": "white",
        "800": "white",
        "900": "white"
      }
    }
  }
}

1. Install NPM packages:

npm install monkey-style-guide

Import monkey-style-guide in your style.scss

@import '~monkey-style-guide/assets/scss/theme';

Import MonkeyStyleGuideModule in your app.module.ts

import { MonkeyStyleGuideModule } from 'monkey-style-guide';

@NgModule({
  declarations: [AppComponent],
  imports: [MonkeyStyleGuideModule],
  bootstrap: [AppComponent],
})
export class AppModule {}

Than call the bootstrap method in your app.component.ts

import { Component } from '@angular/core';
import { MonkeyStyleGuideSettingsService } from 'monkey-style-guide';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  constructor(private settingsService: MonkeyStyleGuideSettingsService) {
    this.settingsService.bootstrap('');
  }
}