Component init

Author: patw0929

.editorconfig

@@ -0,0 +1,13 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

@@ -0,0 +1,33 @@
+### SublimeText ###
+*.sublime-workspace
+
+### OSX ###
+.DS_Store
+.AppleDouble
+.LSOverride
+Icon
+
+# Thumbnails
+._*
+
+# Files that might appear on external disk
+.Spotlight-V100
+.Trashes
+
+### Windows ###
+# Windows image file caches
+Thumbs.db
+ehthumbs.db
+
+# Folder config file
+Desktop.ini
+
+# Recycle Bin used on file shares
+$RECYCLE.BIN/
+
+# App specific
+
+node_modules/
+.tmp
+dist
+/src/main.js

.jshintrc

@@ -0,0 +1,27 @@
+{
+  "node": true,
+  "browser": true,
+  "esnext": true,
+  "bitwise": true,
+  "camelcase": false,
+  "curly": true,
+  "eqeqeq": true,
+  "immed": true,
+  "indent": 2,
+  "latedef": true,
+  "newcap": true,
+  "noarg": true,
+  "quotmark": "false",
+  "regexp": true,
+  "undef": true,
+  "unused": false,
+  "strict": true,
+  "trailing": true,
+  "smarttabs": true,
+  "white": true,
+  "newcap": false,
+  "globals": {
+    "React": true
+  }
+}
+

.yo-rc.json

@@ -0,0 +1,8 @@
+{
+  "generator-react-webpack": {
+    "app-name": "reactIntlTelInput",
+    "architecture": false,
+    "styles-language": "scss",
+    "component-suffix": "js"
+  }
+}

Gruntfile.js

@@ -0,0 +1,125 @@
+'use strict';
+
+var mountFolder = function (connect, dir) {
+  return connect.static(require('path').resolve(dir));
+};
+
+var webpackDistConfig = require('./webpack.dist.config.js'),
+    webpackDevConfig = require('./webpack.config.js');
+
+module.exports = function (grunt) {
+  // Let *load-grunt-tasks* require everything
+  require('load-grunt-tasks')(grunt);
+
+  // Read configuration from package.json
+  var pkgConfig = grunt.file.readJSON('package.json');
+
+  grunt.initConfig({
+    pkg: pkgConfig,
+
+    webpack: {
+      options: webpackDistConfig,
+      dist: {
+        cache: false
+      }
+    },
+
+    'webpack-dev-server': {
+      options: {
+        hot: true,
+        port: 8000,
+        webpack: webpackDevConfig,
+        publicPath: '/assets/',
+        contentBase: './<%= pkg.src %>/'
+      },
+
+      start: {
+        keepAlive: true
+      }
+    },
+
+    connect: {
+      options: {
+        port: 8000
+      },
+
+      dist: {
+        options: {
+          keepalive: true,
+          middleware: function (connect) {
+            return [
+              mountFolder(connect, pkgConfig.dist)
+            ];
+          }
+        }
+      }
+    },
+
+    open: {
+      options: {
+        delay: 500
+      },
+      dev: {
+        path: 'http://localhost:<%= connect.options.port %>/webpack-dev-server/'
+      },
+      dist: {
+        path: 'http://localhost:<%= connect.options.port %>/'
+      }
+    },
+
+    karma: {
+      unit: {
+        configFile: 'karma.conf.js'
+      }
+    },
+
+    copy: {
+      dist: {
+        files: [
+          // includes files within path
+          {
+            flatten: true,
+            expand: true,
+            src: ['<%= pkg.src %>/*'],
+            dest: '<%= pkg.dist %>/',
+            filter: 'isFile'
+          },
+          {
+            flatten: true,
+            expand: true,
+            src: ['<%= pkg.src %>/images/*'],
+            dest: '<%= pkg.dist %>/images/'
+          }
+        ]
+      }
+    },
+
+    clean: {
+      dist: {
+        files: [{
+          dot: true,
+          src: [
+            '<%= pkg.dist %>'
+          ]
+        }]
+      }
+    }
+  });
+
+  grunt.registerTask('serve', function (target) {
+    if (target === 'dist') {
+      return grunt.task.run(['build', 'open:dist', 'connect:dist']);
+    }
+
+    grunt.task.run([
+      'open:dev',
+      'webpack-dev-server'
+    ]);
+  });
+
+  grunt.registerTask('test', ['karma']);
+
+  grunt.registerTask('build', ['clean', 'copy', 'webpack']);
+
+  grunt.registerTask('default', []);
+};

karma.conf.js

@@ -0,0 +1,76 @@
+'use strict';
+
+var path = require('path');
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine'],
+    files: [
+      'test/helpers/**/*.js',
+      'test/spec/components/**/*.js'
+    ],
+    preprocessors: {
+      'test/spec/components/**/*.js': ['webpack'],
+      'test/spec/components/**/*.jsx': ['webpack']
+    },
+    webpack: {
+      cache: true,
+      module: {
+        loaders: [{
+          test: /\.gif/,
+          loader: 'url-loader?limit=10000&mimetype=image/gif'
+        }, {
+          test: /\.jpg/,
+          loader: 'url-loader?limit=10000&mimetype=image/jpg'
+        }, {
+          test: /\.png/,
+          loader: 'url-loader?limit=10000&mimetype=image/png'
+        }, {
+          test: /\.(js|jsx)$/,
+          loader: 'babel-loader'
+        }, {
+          test: /\.scss/,
+          loader: 'style-loader!css-loader!sass-loader?outputStyle=expanded'
+        }, {
+          test: /\.css$/,
+          loader: 'style-loader!css-loader'
+        }, {
+          test: /\.woff/,
+          loader: 'url-loader?limit=10000&mimetype=application/font-woff'
+        }, {
+          test: /\.woff2/,
+          loader: 'url-loader?limit=10000&mimetype=application/font-woff2'
+        }]
+      },
+      resolve: {
+        alias: {
+          'styles': path.join(process.cwd(), './src/styles/'),
+          'components': path.join(process.cwd(), './src/components/')
+        }
+      }
+    },
+    webpackServer: {
+      stats: {
+        colors: true
+      }
+    },
+    exclude: [],
+    port: 8080,
+    logLevel: config.LOG_INFO,
+    colors: true,
+    autoWatch: false,
+    // Start these browsers, currently available:
+    // - Chrome
+    // - ChromeCanary
+    // - Firefox
+    // - Opera
+    // - Safari (only Mac)
+    // - PhantomJS
+    // - IE (only Windows)
+    browsers: ['PhantomJS'],
+    reporters: ['progress'],
+    captureTimeout: 60000,
+    singleRun: true
+  });
+};

package.json

@@ -0,0 +1,44 @@
+{
+  "name": "reactintltelinput",
+  "version": "0.0.0",
+  "description": "",
+  "repository": "",
+  "private": true,
+  "src": "src",
+  "test": "test",
+  "dist": "dist",
+  "mainInput": "ReactIntlTelInputApp",
+  "mainOutput": "main",
+  "dependencies": {
+    "react": "~0.12.2",
+    "normalize.css": "~3.0.3"
+  },
+  "devDependencies": {
+    "grunt": "~0.4.5",
+    "load-grunt-tasks": "~0.6.0",
+    "grunt-contrib-connect": "~0.8.0",
+    "webpack": "~1.4.3",
+    "grunt-webpack": "~1.0.8",
+    "style-loader": "~0.8.0",
+    "url-loader": "~0.5.5",
+    "css-loader": "~0.9.0",
+    "karma-script-launcher": "~0.1.0",
+    "karma-chrome-launcher": "~0.1.4",
+    "karma-firefox-launcher": "~0.1.3",
+    "karma-jasmine": "~0.1.5",
+    "karma-phantomjs-launcher": "~0.1.3",
+    "karma": "~0.12.21",
+    "grunt-karma": "~0.8.3",
+    "karma-webpack": "~1.2.2",
+    "webpack-dev-server": "~1.6.5",
+    "grunt-open": "~0.2.3",
+    "jshint-loader": "~0.8.0",
+    "jsxhint-loader": "~0.2.0",
+    "grunt-contrib-copy": "~0.5.0",
+    "babel": "^4.0.0",
+    "babel-loader": "^4.0.0",
+    "grunt-contrib-clean": "~0.6.0",
+    "sass-loader": "^1.0.1",
+    "react-hot-loader": "^1.0.7"
+  }
+}

src/components/ReactIntlTelInputApp.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var React = require('react/addons');
+var ReactTransitionGroup = React.addons.TransitionGroup;
+
+// CSS
+require('normalize.css');
+require('../styles/main.css');
+
+var imageURL = require('../images/yeoman.png');
+
+var ReactIntlTelInputApp = React.createClass({
+  render: function() {
+    return (
+      <div className='main'>
+        <ReactTransitionGroup transitionName="fade">
+          <img src={imageURL} />
+        </ReactTransitionGroup>
+      </div>
+    );
+  }
+});
+React.render(<ReactIntlTelInputApp />, document.getElementById('content')); // jshint ignore:line
+
+module.exports = ReactIntlTelInputApp;

src/favicon.ico

@@ -0,0 +1,23 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <title></title>
+  <meta name="description" content="">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+</head>
+<body>
+  <!--[if lt IE 8]>
+    <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
+  <![endif]-->
+  <div id="content">
+    <h1>If you can see this, something is broken (or JS is not enabled)!!.</h1>
+  </div>
+
+  <script>
+    __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__
+  </script>
+  <script type="text/javascript" src="assets/main.js"></script>
+</body>
+</html>