tests and lint

package.json

@@ -1,18 +1,18 @@
 {
-  "name": "material-ui-phone-input",
+  "name": "@material-ui/phone-input",
   "version": "1.0.0",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
   "scripts": {
     "build": "rm -rf build && npm run compile",
-    "ci": "npm run build && npm test",
+    "ci": "npm run build && npm run lint && npm test",
     "compile": "tsc -p tsconfig.prod.json",
     "compile-watch": "tsc -w -p tsconfig.prod.json",
-    "test": "mocha '{test,xe2e}/**/*.ts*' --require=ts-node/register --require mocha-clean",
+    "test": "mocha 'test/**/*.ts*' --require=ts-node/register --require mocha-clean",
     "bundle-watch": "webpack-dev-server --open",
     "publish-local": "npm publish --registry=http://localhost:4873 --force",
-    "lint": "tslint '{src,test}/**/*.ts*'",
+    "lint": "tslint --fix '{src,test}/**/*.ts*'",
     "bundle": "webpack --config webpack.config.prod.js",
     "bundle-dev": "webpack",
     "coverage": "nyc --extension=.ts --extension=.tsx --include='src/**/*.ts*' --all --reporter=html mocha --require=ts-node/register --require=source-map-support/register --recursive 'test/**/*.ts*'"
@@ -61,23 +61,23 @@
     "@types/history": "^4.7.0",
     "@types/immutable": "^3.8.7",
     "@types/jquery": "^3.2.17",
+    "@types/lodash": "^4.14.116",
+    "@types/mocha": "^5.2.5",
     "@types/numeral": "^0.0.22",
     "@types/prop-types": "^15.5.2",
     "@types/react": "^16.0.31",
     "@types/react-dom": "^16.0.5",
     "@types/react-transition-group": "^2.0.11",
     "@types/react-virtualized": "^9.7.10",
     "@types/webpack-env": "^1.13.6",
-    "@types/lodash": "^4.14.116",
     "babel-core": "^6.26.3",
-    "fontfaceobserver": "^2.0.13",
-    "history": "^4.7.2",
-    "jquery": "^3.3.1",
-    "moment": "^2.22.1",
-    "moment-range": "^4.0.1",
+    "mocha": "^5.2.0",
+    "mocha-clean": "^1.0.0",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
+    "ts-node": "^7.0.1",
     "tslint": "^5.10.0",
+    "typescript": "^3.1.1",
     "webpack": "^3.12.0",
     "webpack-bundle-analyzer": "^2.13.1",
     "webpack-dev-server": "^2.11.1"

src/country.ts

@@ -0,0 +1,6 @@
+export interface Country {
+  name: string
+  emoji: string
+  alpha2: string
+  countryCallingCodes: string[]
+}

src/countryMenuItem.tsx

@@ -3,12 +3,12 @@ import MenuItem from "@material-ui/core/MenuItem/MenuItem"
 import Grid from "@material-ui/core/Grid/Grid"
 import Icon from "@material-ui/core/Icon/Icon"
 import Typography from "@material-ui/core/Typography"
+import withStyles from "@material-ui/core/styles/withStyles";
 
 const styles = {
   countryName: {
     fontSize: "1em",
     paddingLeft: "0.5em",
-    fontFamily: "AvertaCY"
   },
   dialNumber: {
     marginLeft: "auto",
@@ -21,50 +21,50 @@ const styles = {
   },
   countryNameList: {
     color: "#1D0047", fontSize: "1em", fontWeight: 300
-  }
+  },
+  menuItem: {padding: "0.5em"}
 }
 
 export interface CountryItemProps extends CountryDataItem {
-  flagSVG: string;
-  name: string;
-  search: string;
-
+  flagSVG: string
+  name: string
+  search: string
   onClick: (event: any) => void
+  classes?: Record<string, string>
 }
 
 export interface CountryDataItem {
-  countryCode: number;
+  countryCode: string;
 }
 
-export class CountryMenuItem extends React.Component<CountryItemProps, {}> {
-
-  state = {
-    value: this.props.countryCode
-  }
-
+@(withStyles(styles) as any)
+export class CountryMenuItem extends React.Component<CountryItemProps> {
   highlightSearch(name: string, search: string) {
+    const {classes: classesProp} = this.props
+    const classes = classesProp!
     if (search) {
       const parts = name.split(new RegExp(`(${search})`, "gi"))
-      return <Typography style={styles.countryNameList}>
+      return <Typography className={classes.countryNameList}>
         {parts.map((part, index) => part.toLowerCase() === search.toLowerCase() ?
           <b key={index}>{part}</b> : part)}</Typography>
     }
-    return <Typography style={styles.countryNameList}>{name}</Typography>
+    return <Typography className={classes.countryNameList}>{name}</Typography>
   }
 
   render() {
-    const {onClick, flagSVG, countryCode, name, search} = this.props
+    const {onClick, flagSVG, countryCode, name, search, classes: classesProp} = this.props
+    const classes = classesProp!
     return name.toLowerCase().indexOf(search.toLowerCase()) != -1 &&
-      <MenuItem onClick={onClick} key={countryCode} style={{padding: "0.5em"}}>
+      <MenuItem onClick={onClick} key={countryCode} className={classes.menuItem}>
         <Grid container direction="row">
           <Grid item>
             <Icon>{flagSVG}</Icon>
           </Grid>
-          <Grid item style={styles.countryName}>
+          <Grid item className={classes.countryName}>
             {this.highlightSearch(name, search)}
           </Grid>
-          <Grid item style={styles.dialNumber}>
-            <Typography style={styles.countryCode}>{countryCode}</Typography>
+          <Grid item className={classes.dialNumber}>
+            <Typography className={classes.countryCode}>{countryCode}</Typography>
           </Grid>
         </Grid>
       </MenuItem>

src/index.ts

@@ -0,0 +1 @@
+export * from "./phoneInput"

src/index.tsx → src/phoneInput.tsx

@@ -7,14 +7,17 @@ import {AsYouType} from "libphonenumber-js"
 import Input from "@material-ui/core/Input/Input"
 import WorldIcon from "@material-ui/icons/Language"
 import ArrowIcon from "@material-ui/icons/ArrowDropDown"
-import * as _ from "lodash"
 import MenuList from "@material-ui/core/MenuList/MenuList"
 import Icon from "@material-ui/core/Icon/Icon"
 import Grid from "@material-ui/core/Grid/Grid"
-import Paper from "@material-ui/core/Paper/Paper";
-import Popper from "@material-ui/core/Popper/Popper";
-import ClickAwayListener from "@material-ui/core/ClickAwayListener/ClickAwayListener";
-import MenuItem from "@material-ui/core/MenuItem/MenuItem";
+import Paper from "@material-ui/core/Paper/Paper"
+import Popper from "@material-ui/core/Popper/Popper"
+import ClickAwayListener from "@material-ui/core/ClickAwayListener/ClickAwayListener"
+import MenuItem from "@material-ui/core/MenuItem/MenuItem"
+import withStyles from "@material-ui/core/styles/withStyles"
+import {Country} from "./country"
+
+const sortBy = require("lodash/sortBy")
 
 const styles = {
   worldIcon: {
@@ -35,36 +38,39 @@ const styles = {
   },
   popper: {
     zIndex: 999
-  }
+  },
+  input: {marginRight: 0},
+  textField: {paddingBottom: 0},
+  button: {padding: 0}
 }
 
-const lookup = require('country-data').lookup
-
+const lookup = require("country-data").lookup
 
 export interface PhoneInputProps {
   phoneValueOnChange: (a: string) => void,
   countryValueOnChange: (a: string) => void,
   error: boolean,
   helperText: string
+  classes?: Record<string, string>
 }
 
-export default class PhoneInput extends React.Component<PhoneInputProps> {
-
-  getCountries = () => {
-    const countries = lookup.countries({status: "assigned"})
-      .filter((y: any) => y.countryCallingCodes != "")
-    return _.sortBy(countries, "name")
-  }
+function getCountries(): Country[] {
+  const countries = lookup.countries({status: "assigned"})
+    .filter((y: any) => y.countryCallingCodes != "")
+  return sortBy(countries, "name")
+}
 
+@(withStyles(styles) as any)
+export class PhoneInput extends React.Component<PhoneInputProps> {
   state = {
     code: "",
     phone: "",
-    anchorEl: null,
-    flag: null,
+    anchorEl: null as any,
+    flag: "",
     search: "",
-    allCountries: this.getCountries(),
+    allCountries: getCountries(),
     countryCode: ""
-  } as any;
+  }
 
   _onChange = (e: any) => {
     const {phoneValueOnChange, countryValueOnChange} = this.props
@@ -88,16 +94,12 @@ export default class PhoneInput extends React.Component<PhoneInputProps> {
   }
 
   handleClick = (event: any) => {
-    this.setState({anchorEl: event.currentTarget});
-  };
+    this.setState({anchorEl: event.currentTarget})
+  }
 
   handleClose = () => {
-    this.setState({anchorEl: null});
-  };
-
-  handleOpen = () => {
-    this.setState({anchorEl: null});
-  };
+    this.setState({anchorEl: null})
+  }
 
   handleClickItem = (event: any, code: string, flag: string, countryCode: string) => {
     const phone = this.state.phone ? this.state.phone.replace(this.state.code, code) :
@@ -109,20 +111,27 @@ export default class PhoneInput extends React.Component<PhoneInputProps> {
       phone,
       flag,
       countryCode
-    });
-  };
-
-  handleChange = (event: any) => {
-    this.setState({[event.target.name]: event.target.value});
-  };
+    })
+  }
 
   handleSearch = (event: any) => {
-    this.setState({search: event.target.value});
+    this.setState({search: event.target.value})
   }
 
+  renderCountry = (country: Country) =>
+    <CountryMenuItem
+      key={country.name}
+      onClick={event => this.handleClickItem(event, country.countryCallingCodes[0], country.emoji, country.alpha2)}
+      flagSVG={country.emoji}
+      name={country.name}
+      countryCode={country.countryCallingCodes[0]}
+      search={this.state.search}
+    />
+
   render() {
-    const {error, helperText} = this.props;
-    const {anchorEl, search, allCountries} = this.state;
+    const {error, helperText, classes: classesProp} = this.props
+    const {anchorEl, allCountries} = this.state
+    const classes = classesProp!
     return <Grid container direction={"column"}>
       <Grid item>
         <TextField
@@ -131,15 +140,15 @@ export default class PhoneInput extends React.Component<PhoneInputProps> {
           label={"Phone Number"}
           fullWidth={true}
           value={this.state.phone}
-          style={{paddingBottom: 0}}
+          className={classes.textField}
           error={error}
           helperText={helperText}
           InputProps={{
             startAdornment:
-              <InputAdornment position="start" style={{marginRight: 0}}>
-                <Button onClick={this.handleClick} style={{padding: 0}}>
+              <InputAdornment position="start" className={classes.input}>
+                <Button onClick={this.handleClick} className={classes.button}>
                   <Grid>
-                    {this.state.flag ? <Icon>{this.state.flag}</Icon> : <WorldIcon style={styles.worldIcon}/>}
+                    {this.state.flag ? <Icon>{this.state.flag}</Icon> : <WorldIcon className={classes.worldIcon}/>}
                   </Grid>
                   <Grid>
                     <ArrowIcon/>
@@ -151,23 +160,15 @@ export default class PhoneInput extends React.Component<PhoneInputProps> {
       </Grid>
 
       <Grid item>
-        <Popper open={Boolean(anchorEl)} anchorEl={anchorEl} placement={"bottom-start"} style={styles.popper}>
+        <Popper open={Boolean(anchorEl)} anchorEl={anchorEl} placement={"bottom-start"} className={classes.popper}>
           <Paper>
             <ClickAwayListener onClickAway={this.handleClose}>
-              <MenuList style={styles.list}>
-                <MenuItem style={styles.hiddenInput}>
+              <MenuList className={classes.list}>
+                <MenuItem className={classes.hiddenInput}>
                   <Input onChange={this.handleSearch} autoFocus disableUnderline
                          inputProps={{padding: 0}}/>
                 </MenuItem>
-                {allCountries.map((x: any) =>
-                  <CountryMenuItem
-                    key={x.name}
-                    onClick={event => this.handleClickItem(event, x.countryCallingCodes[0], x.emoji, x.alpha2)}
-                    flagSVG={x.emoji}
-                    name={x.name}
-                    countryCode={x.countryCallingCodes}
-                    search={search}
-                  />)}
+                {allCountries.map(this.renderCountry)}
               </MenuList>
             </ClickAwayListener>
           </Paper>

test/phoneInput.test.ts

@@ -0,0 +1,4 @@
+describe("action tests", () => {
+  it("should be Empty", function () {
+  });
+})

tsconfig.json

@@ -13,7 +13,6 @@
       "es2015.promise",
       "es2015.core"
     ],
-    "target": "es2015",
     "declaration": true,
     "outDir": "build",
     "jsx": "react",

tslint.json

@@ -0,0 +1,49 @@
+{
+  "defaultSeverity": "error",
+  "extends": [
+    "tslint:recommended"
+  ],
+  "jsRules": {},
+  "rules": {
+    "semicolon": false,
+    "member-access": false,
+    "member-ordering": false,
+    "ordered-imports": false,
+    "trailing-comma": false,
+    "object-literal-sort-keys": false,
+    "arrow-parens": false,
+    "variable-name": false,
+    "whitespace": [
+      true,
+      "check-branch",
+      "check-operator",
+      "check-separator",
+      "check-type",
+      "check-typecast",
+      "check-preblock"
+    ],
+    "no-empty-interface": false,
+    "interface-name": false,
+    "only-arrow-functions": false,
+    "no-shadowed-variable": false,
+    "no-require-imports": false,
+    "no-var-requires": false,
+    "no-unused-expression": false,
+    "no-console": false,
+    "quotemark": [],
+    "max-classes-per-file": [
+      false
+    ],
+    "triple-equals": false,
+    "no-empty": false,
+    "array-type": false,
+    "space-before-function-paren": [
+      true,
+      {
+        "anonymous": "always"
+      }
+    ],
+    "object-literal-key-quotes": false
+  },
+  "rulesDirectory": []
+}

webpack.config.js

@@ -5,7 +5,6 @@ const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPl
 module.exports = {
   entry: {
     phone: ["./build/index.js"],
-    // nfp: ["./build/nfp/entry"]
   },
   output: {
     path: path.join(__dirname, 'public'),