Back

Emails Input

View

Demo of an Emails Component input. It supports pasting emails.

Highlights

  • Source Code in TypeScript
  • Includes unit testing using Jest
  • Includes Unit testing with Jest
  • Includes Integration testing with [Capybara][capybara]
  • Supports IE 11 (tested using Browserstack)
  • Supported browsers (run npm run browserslist)

Github Code

Dev Docs

Shorthand Usage Documentation

<!-- page.html -->
<div id="my-input" />
<div id="my-input2" />
...
// script.js
const input = document.getElementById("my-input");
const instance1 = new EmailsInput(input);
instance1.getEmails(); // => []
instance1.addEmail("fer@miro.com");
instance1.getEmails(); // => ["fer@miro.com"]

const input2 = document.getElementById("my-input2");
// Options for EmailsInput can be found in API Docs
// https://miro-demo.gomezh.dev/jsdocs/interfaces/_emailsinput_.emailsinputoptions.html
const instance1 = new EmailsInput(input, {
  initialEmails: ["john@miro.com", "alona@miro.com"]
  onChange: newEmails => {
      console.log("Input changed: ", newEmails);
  }
});
instance2.getEmails(); // => ["john@miro.com", "alona@miro.com"]
instance2.setEmails(["one@miro.com"]); // will trigger the onChange callback
instance2.getEmails(); // => ["one@miro.com"]
instance2.removeEmail("one@miro.com");
instance2.getEmails(); // => []

Dev Run

  1. Clone repository:
git clone git@github.com:gomezhyuuga/emails-input-component.git
  1. Install dependencies:
npm install
  1. Run Dev Server and open [http://localhost:1234/]
❯ npm start
> @gh/emails-input@0.1.0 start /home/gomezhyuuga/dev/miro/assessment
> parcel index.html --open

Server running at http://localhost:1234
✨  Built in 845ms.

Tasks

  • build: run npm run build. That will generate a docs/ folder with the distribution files.
  • test: run npm run test. It will run jest unit tests.
  • lint: run npm run lint. Linting for the project using EsLint (format), Prettier (formatting).
  • browserslist: run npm run browserslist. To see the current supported browsers (CSS).
  • Others: see package.json file.

Browserslist

❯ npm run browserslist 5s 86ms

> @gh/emails-input@0.1.0 browserslist /home/gomezhyuuga/dev/miro/assessment
> browserslist

and_chr 80
and_ff 68
and_qq 1.2
and_uc 12.12
android 80
baidu 7.12
bb 10
bb 7
chrome 80
chrome 79
edge 80
edge 79
edge 18
firefox 73
firefox 72
firefox 68
ie 11
ie 10
ie_mob 11
ie_mob 10
ios_saf 13.3
ios_saf 13.2
ios_saf 13.0-13.1
ios_saf 12.2-12.4
kaios 2.5
op_mini all
op_mob 46
op_mob 12.1
opera 66
opera 65
safari 13
safari 12.1
samsung 11.1
samsung 10.1