Merge branch 'master' of github.com:shatran/card-react

Gruntfile.coffee

@@ -14,7 +14,7 @@ module.exports = (grunt) ->
   @registerTask "build", [
     "clean"
     "cjsx"
-    "compass"
+    "sass"
     "cssmin"
     "clean:build"
   ]
@@ -23,9 +23,9 @@ module.exports = (grunt) ->
     "clean"
     "cjsx"
     "browserify:dev"
-    "compass"
+    "sass"
     "connect"
     "watch"
   ]
 
-  return
+  return

README.md

@@ -27,13 +27,13 @@ card-react is a React component that aims to do the same for React.
 Include card-react in your code:
 
 ```html
-import ReactCardFormContainer from 'card-react';
+import CardReactFormContainer from 'card-react';
 ```
 
 Once included, you can initialize the component. you'll need to make the component the container of your form:
 
 ```jsx
-<ReactCardFormContainer
+<CardReactFormContainer
 
   // the id of the container element where you want to render the card element.
   // the card component can be rendered anywhere (doesn't have to be in ReactCardFormContainer).
@@ -80,7 +80,7 @@ Once included, you can initialize the component. you'll need to make the compone
     <input placeholder="CVC" type="text" name="CCcvc" />
   </form>
 
-</ReactCardFormContainer>
+</CardReactFormContainer>
 
 // the container in which the card component will be rendered - can be anywhere in the DOM
 <div id="card-wrapper"></div>
@@ -90,14 +90,18 @@ Once included, you can initialize the component. you'll need to make the compone
 ### To run the example:
 
   - npm install
-  - grunt
+  - npm start
 
 #### Development
 
-  - npm install
-  - grunt dev
-  - Navigate to http://localhost:8000/
-  - Run grunt build after you make the changes
+  - npm start
+  - Open http://localhost:8000/
+  - npm run build after you make the changes
+
+#### Future Plans
+
+  - move to webpack
+  - add tests
 
 You are more than welcome to contribute. Enjoy!
 

grunt-tasks/sass.coffee

@@ -0,0 +1,12 @@
+module.exports = ->
+  @loadNpmTasks "grunt-contrib-sass"
+
+  @config "sass",
+    dist:
+      files: [{
+        expand: true,
+        cwd: 'src/scss',
+        src: ['*.scss'],
+        dest: '<%= config.tmp %>/',
+        ext: '.css'
+      }]

lib/card-react-component.js

@@ -1,5 +1,5 @@
 (function() {
-  var ClassNames, Payment, React, ReactCard, ccDots, cvcDots, dot, expiryDots;
+  var CardReact, ClassNames, Payment, React, ccDots, cvcDots, dot, expiryDots;
 
   React = require('react');
 
@@ -15,8 +15,8 @@
 
   expiryDots = dot + dot + '/' + dot + dot;
 
-  ReactCard = React.createClass({
-    displayName: "ReactCard",
+  CardReact = React.createClass({
+    displayName: "CardReact",
     getDefaultProps: function() {
       return {
         messages: {
@@ -154,6 +154,6 @@
     }
   });
 
-  module.exports = ReactCard;
+  module.exports = CardReact;
 
 }).call(this);

lib/card-react-form-container.js

@@ -1,5 +1,5 @@
 (function() {
-  var Payment, React, ReactCard, ReactCardFormContainer, ReactDOM;
+  var CardReactFormContainer, Payment, React, ReactCard, ReactDOM;
 
   React = require('react');
 
@@ -9,8 +9,8 @@
 
   ReactCard = require('./card-react-component');
 
-  ReactCardFormContainer = React.createClass({
-    displayName: 'ReactCardContainer',
+  CardReactFormContainer = React.createClass({
+    displayName: 'CardReactFormContainer',
     getDefaultProps: function() {
       return {
         formatting: true,
@@ -34,17 +34,17 @@
       };
     },
     componentWillMount: function() {
-      var type, _i, _len, _ref, _results;
+      var i, len, ref, results, type;
       this.inputsValues = {};
       this.inputsRefs = {};
       this.cardFlipped = false;
-      _ref = this.props.fieldTypes;
-      _results = [];
-      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-        type = _ref[_i];
-        _results.push(this.inputsValues[this.props.formInputsNames[type]] = this.props.initialValues[type]);
+      ref = this.props.fieldTypes;
+      results = [];
+      for (i = 0, len = ref.length; i < len; i++) {
+        type = ref[i];
+        results.push(this.inputsValues[this.props.formInputsNames[type]] = this.props.initialValues[type]);
       }
-      return _results;
+      return results;
     },
     componentDidMount: function() {
       if (!this.props.container) {
@@ -70,7 +70,7 @@
     },
     renderCardComponent: function() {
       if (this.cardContainer) {
-        return ReactDOM.render(React.createElement(ReactCard, React.__spread({}, this.props, {
+        return ReactDOM.render(React.createElement(ReactCard, Object.assign({}, this.props, {
           "cardFlipped": this.cardFlipped,
           "focusedInput": this.focusedInput,
           "inputsValues": this.inputsValues,
@@ -97,7 +97,7 @@
               _this.inputsRefs[child.props.name] = "react-card-input-" + child.props.name;
             }
             if (newClassName && inputsValidationClass) {
-              newClassName = "" + newClassName + " " + inputsValidationClass;
+              newClassName = newClassName + " " + inputsValidationClass;
             } else if (inputsValidationClass) {
               newClassName = inputsValidationClass;
             }
@@ -166,6 +166,6 @@
     }
   });
 
-  module.exports = ReactCardFormContainer;
+  module.exports = CardReactFormContainer;
 
 }).call(this);