Release v3.1.0

.babelrc

@@ -1,14 +1,15 @@
 {
     "presets": ["next/babel"],
     "plugins": [
-      [
-        "module-resolver",
-        {
-          "root": ["./"],
-          "alias": {
-            "components": "./components"
-          }
+      ["module-resolver", {
+        "root": ["./"],
+        "alias": {
+          "components": "./components",
+          "lib": "./lib",
+          "static": "./static",
+          "styles": "./styles",
+          "utils" : "./utils"
         }
-      ]
+      }]
     ]
-  }
+  }

.editorconfig

@@ -1,11 +1,13 @@
+root = true
+
 [*]
 indent_style = space
-end_of_line = lf
 indent_size = 2
+end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
 
-[*.md]
-max_line_length = 0
-trim_trailing_whitespace = false
+[{package.json,*.yml}]
+indent_style = space
+indent_size = 2

.eslintignore

@@ -1,2 +1,3 @@
 node_modules
 dist
+build

.eslintrc.json

@@ -0,0 +1,14 @@
+{
+  "parser": "babel-eslint",
+  "extends": "airbnb",
+  "rules": {
+    "react/react-in-jsx-scope": 0,
+    "react/prop-types": 0,
+    "react/jsx-filename-extension": 0,
+    "jsx-a11y/anchor-is-valid": 0
+  },
+  "env": {
+    "browser": true,
+    "node": true
+  }
+}

.gitignore

@@ -45,3 +45,10 @@ build
 
 # npm
 package-lock.json
+<<<<<<< HEAD
+.env
+=======
+
+# dotenv environment variables file
+.env
+>>>>>>> develop

README.md

@@ -29,7 +29,7 @@ CameraKit takes one of the hardest Android APIs and makes it into a high level a
 <a href="https://www.expensify.com/"><img src=".repo/gh-readme-expensify.png"></a>
 <a href="https://www.buddy.works/"><img src=".repo/gh-readme-buddyworks.png"></a>
 
-## Run Instructions
+## Run Development Environment
 
 1. `yarn install`
 2. `yarn dev`
@@ -40,4 +40,4 @@ To check out detailed docs for CameraKit, visit our [Documentation Website](http
 
 ## License
 
-CameraKit Website is [MIT License](https://github.com/CameraKit/CameraKit-Android/blob/master/LICENSE)
+CameraKit Website is [MIT License](https://github.com/CameraKit/CameraKit-Android/blob/master/LICENSE)

components/contact-form.js

@@ -0,0 +1,148 @@
+import React from 'react';
+import isomorphicFetch from 'isomorphic-unfetch';
+import { Transition } from 'react-spring';
+
+import styles from '../styles/contact-form.scss';
+import intro from '../styles/intro.scss';
+import global from '../styles/styles.global.scss';
+
+class ContactForm extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      success: false,
+      message: '',
+    };
+  }
+
+  handleSubmit(event) {
+    event.preventDefault();
+
+    isomorphicFetch('/processForm', {
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        name: this.name.value,
+        email: this.email.value,
+        company: this.company.value,
+        message: this.message.value,
+      }),
+    }).then((response) => {
+      if (response.ok) {
+        this.clearInputs();
+        this.setState({ success: true, message: 'Thanks. Your message has been recieved. We\'ll get back to you shortly.' });
+      } else {
+        this.setState({ success: false, message: 'Sorry, we could not process your request.' });
+      }
+    }).catch((err) => {
+      console.error(err);
+    });
+  }
+
+  clearInputs() {
+    this.name.value = '';
+    this.email.value = '';
+    this.company.value = '';
+    this.message.value = '';
+  }
+
+  render() {
+    const { message, success } = this.state;
+
+    return (
+      <section className={styles.intro}>
+        <div className={`${global.container} ${global['container--large']}`}>
+          <div className={intro.content}>
+            <h2 className={`${global['heading--large']} ${intro.subheading}`}>
+              {'Contact Us'}
+            </h2>
+          </div>
+        </div>
+        <div className={global.container}>
+          <Transition
+            from={{ opacity: 0, height: 0 }}
+            enter={{ opacity: 1, height: 400 }}
+            leave={{ opacity: 0, height: 0 }}
+          >
+            {success === false
+              ? style => (
+                <div style={style}>
+                  <form
+                    className={styles.form}
+                    onSubmit={this.handleSubmit.bind(this)}
+                  >
+                    <div className={styles.container}>
+                      <div className={styles.contactWrapper}>
+                        <input
+                          className={styles.input}
+                          ref={(input) => { this.name = input; }}
+                          placeholder="Name"
+                          name="name"
+                          type="text"
+                          required
+                        />
+                      </div>
+                      <div className={styles.contactWrapper}>
+                        <input
+                          className={styles.input}
+                          ref={(input) => { this.email = input; }}
+                          placeholder="Email"
+                          name="email"
+                          type="email"
+                          required
+                        />
+                      </div>
+                      <div className={styles.contactWrapper}>
+                        <input
+                          className={styles.input}
+                          ref={(input) => { this.company = input; }}
+                          placeholder="Company"
+                          name="company"
+                          type="text"
+                          required
+                        />
+                      </div>
+                      <div className={`${styles.contactWrapper} ${styles.textAreaWrapper}`}>
+                        <textarea
+                          className={`${styles.input} ${styles.textArea}`}
+                          ref={(input) => { this.message = input; }}
+                          placeholder="Message"
+                          name="message"
+                          type="textarea"
+                          required
+                        />
+                      </div>
+                      <button className={styles.submitButton} type="submit">
+                        {message && success === false
+                          ? 'Try Again'
+                          : 'Submit'
+                        }
+                      </button>
+                    </div>
+                  </form>
+                </div>
+              )
+
+              : style => (
+                <div style={style}>
+                  <p className={styles.successMessage}>
+                    {message}
+                  </p>
+                </div>
+              )
+            }
+          </Transition>
+        </div>
+        <p className={`${styles.message} ${message && success === false ? styles.show : ''}`}>
+          {message}
+        </p>
+      </section>
+    );
+  }
+}
+
+export default ContactForm;

components/home.js

@@ -2,25 +2,24 @@ import React from 'react';
 
 import jump from 'jump.js';
 
-import phoneTilted from '../static/il_phone_tilted.svg';
-import button from '../static/btn_scrolldown.svg';
-import usaFlag from '../static/ic_usa.svg';
-
-import Feature from './public/feature';
-import News from './public/news';
-import Sponsor from './public/sponsor';
-import Client from './public/client';
-
 import features from '../static/features';
 import sponsors from '../static/sponsors';
 import clients from '../static/clients';
 
 import styles from '../styles/home.scss';
 import featureStyles from '../styles/features.scss';
 import intro from '../styles/intro.scss';
-
-import global from '../styles/styles.global.scss';
 import animation from '../styles/bounce-animation.scss';
+import globalStylesheet from '../styles/styles.global.scss';
+
+import phoneTilted from '../static/il_phone_tilted.svg';
+import button from '../static/btn_scrolldown.svg';
+import usaFlag from '../static/ic_usa.svg';
+
+import Feature from './public/feature';
+import News from './public/news';
+import Sponsor from './public/sponsor';
+import Client from './public/client';
 
 function scrollDown() {
   jump('#features');
@@ -29,11 +28,11 @@ function scrollDown() {
 const Home = () => (
   <div>
     <section className={intro.intro}>
-      <div className={`${global.container} ${global['container--large']}`}>
+      <div className={`${globalStylesheet.container} ${globalStylesheet['container--large']}`}>
         <div className={intro.content}>
           <div className={intro.phone} />
           <div className={intro.hidden}>
-            <h2 className={`${global['heading--large']} ${intro.subheading}`}>
+            <h2 className={`${globalStylesheet['heading--large']} ${intro.subheading}`}>
               {'Complete'}
               <br />
               {'Camera Library'}
@@ -56,8 +55,8 @@ const Home = () => (
       <img src={phoneTilted} className={intro.phoneTilted} alt="preview-mockup" />
     </section>
     <section id="trusted-by" className={`${styles.section} ${styles.clients}`}>
-      <div className={global.container}>
-        <h2 className={global['heading--small']}>
+      <div className={globalStylesheet.container}>
+        <h2 className={globalStylesheet['heading--small']}>
           {'Trusted By'}
         </h2>
         <ul className={`${styles.list} ${styles.clientsList}`}>
@@ -73,13 +72,13 @@ const Home = () => (
       </div>
     </section>
     <section id="features" className={styles.section}>
-      <div className={global.container}>
+      <div className={globalStylesheet.container}>
         <div className={featureStyles.main}>
-          <h2 className={global['heading--small']}>
+          <h2 className={globalStylesheet['heading--small']}>
             {'Features'}
           </h2>
           <div className={styles.flexWrapper}>
-            <p className={`${global['heading--large']} ${featureStyles.heading}`}>
+            <p className={`${globalStylesheet['heading--large']} ${featureStyles.heading}`}>
               {'High-level, simple, and extremely performant'}
             </p>
             <ul className={`${styles.list} ${styles.flexWrapper} ${featureStyles.list}`}>
@@ -100,8 +99,8 @@ const Home = () => (
       <News />
     </section>
     <section id="sponsored-by" className={`${styles.section} ${styles.sponsors}`}>
-      <div className={global.container}>
-        <h2 className={global['heading--small']}>
+      <div className={globalStylesheet.container}>
+        <h2 className={globalStylesheet['heading--small']}>
           {'Support'}
         </h2>
         <ul className={`${styles.list} ${styles.sponsorsList}`}>