react-intl-tel-input test

.babelrc

{
  presets: ["es2015", "react", "stage-0"],
  plugins: ["transform-class-properties"],
}

.eslintrc

{
  "parser": "babel-eslint",
  "extends": "airbnb",
  "rules": {
    "no-param-reassign": 0,
  },
  "env": {
    "browser": true,
    "jasmine": true,
  },
}

app.js

import React from 'react';
import ReactDOM from 'react-dom';
import PhoneInput from './input';

class Demo extends React.Component {
  render() {
    return (
      <PhoneInput label={'Phone'}
        number={'0999 000 321'}
      />
    );
  }
}

ReactDOM.render(<Demo />, document.getElementById('content'));

input.js

import React from 'react';
import IntlTelInput from 'react-intl-tel-input';
import classnames from 'classnames';

import 'file?name=libphonenumber.js!../node_modules/react-intl-tel-input/dist/libphonenumber.js';
import '../node_modules/react-intl-tel-input/dist/main.css';


export default class PhoneInput extends React.Component {
  static defaultProps = {
    label: '...',
    labelClassName: 'labelClass',
  };

  static propTypes = {
    label: React.PropTypes.string,
    labelClassName: React.PropTypes.string,
    number: React.PropTypes.string,
  };

  render() {
    return (
      <div className="form-group">
        {this.props.label &&
         <label className={classnames('control-label', this.props.labelClassName)}>
          {this.props.label}
        </label>}
        <IntlTelInput
          css={['intl-tel-input', 'form-control']}
          defaultCountry={'tw'}
          defaultValue={this.props.number}
          utilsScript="./libphonenumber.js"
        />
      </div>
    );
  }
}

package.json

{
  "name": "test",
  "version": "0.1.0",
  "description": "",
  "author": "patw",
  "main": "dist/main.js",
  "peerDependencies": {
    "react": "^0.14.0",
    "react-dom": "^0.14.0"
  },
  "devDependencies": {
    "babel-core": "^6.0.0",
    "babel-eslint": "^5.0.0",
    "babel-loader": "^6.0.0",
    "babel-plugin-transform-class-properties": "^6.5.2",
    "babel-preset-es2015": "^6.5.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-0": "^6.5.0",
    "classnames": "^2.1.2",
    "css-loader": "~0.9.0",
    "eslint": "^2.2.0",
    "eslint-config-airbnb": "^6.0.2",
    "eslint-plugin-react": "^4.0.0",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.8.3",
    "image-webpack-loader": "^1.6.1",
    "jest-cli": "^0.8.0",
    "jest-webpack-alias": "^2.2.0",
    "load-grunt-tasks": "~0.6.0",
    "react-addons-test-utils": "^0.14.0",
    "react-hot-loader": "2.0.0-alpha",
    "react-intl-tel-input": "^2.0.12",
    "sass-loader": "^1.0.1",
    "simple-ajax": "^2.1.0",
    "style-loader": "~0.8.0",
    "throttle-debounce": "^0.1.1",
    "uglify-loader": "^1.3.0",
    "underscore.deferred": "^0.4.0",
    "url-loader": "~0.5.5",
    "webpack": "^1.12.0",
    "webpack-dev-server": "^1.10.1"
  },
  "scripts": {
    "start": "webpack-dev-server",
    "build": "webpack --config webpack.dist.config.js"
  },
  "license": "MIT"
}

webpack.config.js

/*
 * Webpack development server configuration
 *
 * This file is set up for serving the webpack-dev-server,
 * which will watch for changes and recompile as required if
 * the subfolder /webpack-dev-server/ is visited. Visiting the root will not automatically reload.
 */

const webpack = require('webpack');
const path = require('path');
const eslintrcPath = path.resolve(__dirname, '.eslintrc');

module.exports = {
  devtool: 'eval',
  watch: true,
  output: {
    filename: '[name].js',
    path: './dist',
    publicPath: '/',
  },
  entry: {
    app: [
      'webpack-dev-server/client?http://0.0.0.0:3000',
      'webpack/hot/only-dev-server',
      './src/app.js',
    ],
  },

  externals: {
    react: 'React',
    'react-dom': 'ReactDOM',
  },

  stats: {
    colors: true,
    reasons: true,
  },

  resolve: {
    extensions: ['', '.js'],
    alias: {
    },
    root: `${__dirname}/src`,
  },
  module: {
    loaders: [{
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      loader: 'react-hot!babel-loader',
    }, {
      test: /\.css$/,
      loader: 'style!css',
    }, {
      test: /\.png$/i,
      loader: 'file?name=[name].[ext]',
    }],
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
  ],

  devServer: {
    contentBase: './dist',
    port: 3000,
    hot: true,
    inline: true,
  },

  eslint: {
    configFile: eslintrcPath,
  },
};

webpack.dist.config.js

var webpack = require('webpack'),
    path = require('path');
var eslintrcPath = path.resolve(__dirname, '.eslintrc');

module.exports = {

  output: {
    publicPath: './',
    path: 'dist/',
    filename: '[name].js',
  },

  debug: false,
  devtool: false,
  entry: {
    app: ['./src/app.js'],
  },

  externals: {
    react: 'React',
    'react-dom': 'ReactDOM',
  },

  stats: {
    colors: true,
    reasons: false,
  },

  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
      },
    }),
    new webpack.DefinePlugin({
      'process.env': {
        // This has effect on the react lib size
        NODE_ENV: JSON.stringify('production'),
      },
    }),
  ],

  resolve: {
    extensions: ['', '.js'],
  },

  module: {
    loaders: [{
      test: /\.js$/,
      exclude: /(node_modules|libphonenumber\.js)/,
      loader: 'babel-loader',
      query: { compact: false },
    }, {
      test: /\.css$/,
      loader: 'style!css',
    }, {
      test: /\.png$/i,
      loader: 'file?name=[name].[ext]',
    }],
  },

  eslint: {
    configFile: eslintrcPath,
  },
};