Convert project to use next (#6)

* Convert project to use next

* Adding tests

* Add Jest command

* Add alias

* Add jest and test of components

* Add eslint and fix files

* Add link of project

.babelrc

@@ -1,18 +1,25 @@
 {
   "presets": [
-    ["env", {
-      "targets": {
-        "browsers": [
-          ">0.25%",
-          "not ie 11",
-          "not op_mini all"
-        ]
-      },
-      "modules": false
-    }]
+    "next/babel"
   ],
   "plugins": [
-    ["transform-object-rest-spread", {"useBuiltIns": true}],
-    "transform-class-properties"
+    "babel-plugin-dynamic-import-node",
+    [
+      "module-resolver",
+      {
+        "root": [
+          "./"
+        ],
+        "alias": {
+          "components": "./components",
+          "pages": "./pages",
+          "plugins": "./plugins",
+          "styles": "./styles",
+          "store": "./store",
+          "tests": "./tests",
+          "utils": "./utils",
+        }
+      }
+    ]
   ]
 }

.eslintrc.js

@@ -0,0 +1,24 @@
+module.exports = {
+  parser: 'babel-eslint',
+  plugins: ['react'],
+  extends: ['airbnb'],
+  env: { 'es6': true },
+  rules: {
+    'arrow-body-style': ['error', 'as-needed'],
+    'react/jsx-filename-extension': [1, { 'extensions': ['.js', '.jsx'] }],
+    'jsx-a11y/anchor-is-valid': 'off',
+    'react/forbid-prop-types': 'off',
+    'import/no-unresolved': 'off',
+    'import/no-extraneous-dependencies': 'off',
+    'react/jsx-one-expression-per-line': 'off',
+    'no-return-assign': 'off',
+  },
+  env: {
+    browser: true,
+    node: true,
+    es6: true,
+    amd: true,
+    mocha: true,
+    jest: true,
+  },
+};

.gitignore

@@ -1,2 +1,4 @@
-node_modules/
-.DS_Store
+node_modules
+coverage
+.DS_Store
+.next

.travis.yml

@@ -0,0 +1,6 @@
+language: node_js
+node_js:
+  - 8
+git:
+  submodules: false
+

README.md

@@ -1,2 +1,33 @@
 # nataljs.github.io
 [NatalJS Website](http://nataljs.github.io)
+
+## Installation
+
+`npm install`
+
+## Using for development
+
+`npm run dev`
+
+The link of project http://localhost:3000/
+
+# Using for production
+
+`npm start`
+
+# Running tests
+
+*The project use jest as tester, if you are not familiar with please see jest documentation https://jestjs.io/docs/en/getting-started*
+
+**To test all files**
+
+`num test`
+
+**Using only jest**
+
+`num run jest`
+
+**jest with watch**
+
+`num run jest -- -- watch`
+

components/About.js

@@ -0,0 +1,34 @@
+import React from 'react';
+
+const About = () => (
+  <section id="about" className="section about">
+    <div className="decorative-square" aria-hidden="true" />
+    <div className="decorative-circle" aria-hidden="true" />
+    <figure className="col-6 col-sm-12 col-md-4 col-lg-3">
+      <img className="logo" src="/static/images/logo-colorful.svg" alt="natalJS logo" />
+    </figure>
+    <div className="col-12 col-sm-12 col-md-8 col-lg-6">
+      <h1 className="section-title--alternate">
+        O que é a natal JS?
+      </h1>
+      <article className="article">
+        <header>
+          <h1 className="article__title">
+            Comunidade para discutir javascript em Natal-RN
+          </h1>
+        </header>
+        <p className="article__body">
+          Os objetivos são: ajudar os programadores a obter um melhor conhecimento de programação em
+          javascript; aproximar programadores locais; organizar encontros, conferências e contribuir
+          com projetos open-source relacionados aos estudos.
+        </p>
+        <footer>
+          <a href="https://github.com/NatalJS" className="btn" title="https://github.com/NatalJS">Acesse nosso Github</a>
+        </footer>
+      </article>
+      <div className="about__wave" aria-hidden="true" />
+    </div>
+  </section>
+);
+
+export default About;

components/Events.js

@@ -0,0 +1,74 @@
+import React from 'react';
+
+const Events = () => (
+  <section id="incoming-events" className="events">
+    <h1 className="section-title">Próximos Eventos?</h1>
+    <div className="events__container">
+      <div className="events__block">
+        <div className="col-3 events__time">
+          <span>22.09</span>
+          <span>8H ÀS 12</span>
+        </div>
+        <div className="col-9 events__body">
+          <div className="events__title">O estado atual do front-end no mercado de trabalho</div>
+          <div className="events__location">IMD UFRN</div>
+        </div>
+      </div>
+
+      <div className="events__block">
+        <div className="events__day">
+          KEYNOTES
+          {' '}<span>8H30 ÀS 9H30</span>
+        </div>
+
+        <div className="events__speakers">
+          <div className="media event__media event__media--sticker1">
+            <img className="event__image" src="/static/images/speakers/avatar-jaon.png" alt="jaon" />
+            <div className="media-body">
+              <h4 className="event__talk">Javascript para Dinossauros</h4>
+              <p className="event__speaker">Jaon <span>Front-End na Evolux</span></p>
+            </div>
+          </div>
+          <div className="media event__media event__media--sticker2">
+            <img className="event__image" src="/static/images/speakers/avatar-neto.png" alt="neto" />
+            <div className="media-body">
+              <h4 className="event__talk">Hyped JS: o que os devs descolados estão usando</h4>
+              <p className="event__speaker">Neto Guimarães <span>Front-End na Evolux</span></p>
+            </div>
+          </div>
+          <div className="media event__media event__media--sticker3">
+            <img className="event__image" src="/static/images/speakers/avatar-marcell.png" alt="marcell" />
+            <div className="media-body">
+              <h4 className="event__talk">Conhecendo a Comunidade open source</h4>
+              <p className="event__speaker">Marcell Guilherme <span>Front-End na Evolux</span></p>
+            </div>
+          </div>
+        </div>
+
+        <div className="events__day">
+          WORKSHOPS
+          {' '}<span>10H ÀS 12H</span>
+        </div>
+
+        <div className="events__speakers">
+          <div className="media event__media event__media--sticker1">
+            <img className="event__image" src="/static/images/speakers/avatar-jhonny.png" alt="jhonny" />
+            <div className="media-body">
+              <h4 className="event__talk">Hello World: criando e configuando seu primeiro projeto web</h4>
+              <p className="event__speaker">Jhonny Michel <span>Front-End na Evolux</span></p>
+            </div>
+          </div>
+          <div className="media event__media event__media--sticker2">
+            <img className="event__image" src="/static/images/speakers/avatar-gustavo.png" alt="gustavo" />
+            <div className="media-body">
+              <h4 className="event__talk">Procura de heróis na Marvel com Javascript</h4>
+              <p className="event__speaker">Gustavo Freire <span>Front-End na Evolux</span></p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+);
+
+export default Events;

components/Footer.js

@@ -0,0 +1,23 @@
+import React from 'react';
+
+const Footer = () => (
+  <footer id="footer" className="footer">
+    <ul className="footer__socials">
+      <li>
+        <a href="https://www.facebook.com/nataljs/" className="footer__social" title="facebook">
+          <img src="/static/images/facebook-logo.svg" className="footer__ico" alt="facebook" />
+        </a>
+      </li>
+      <li>
+        <a href="https://github.com/NatalJS" className="footer__social" title="github">
+          <img src="/static/images/github-logo.svg" className="footer__ico" alt="github" />
+        </a>
+      </li>
+    </ul>
+    <p className="footer__copy">
+      © NatalJS.
+    </p>
+  </footer>
+);
+
+export default Footer;

components/Header.js

@@ -0,0 +1,28 @@
+import React from 'react';
+
+const Header = () => (
+  <header className="header">
+    <div className="header__logo">
+      <img className="logo--mobile" src="/static/images/logo-mobile.svg" alt="NatalJS Logo" />
+      <img className="logo--desktop" src="/static/images/logo.svg" alt="NatalJS Logo" />
+    </div>
+    <menu className="header__menu">
+      <ul className="menu">
+        <li className="menu__item">
+          <a href="#about" className="menu__item__link scroll">O que é</a>
+        </li>
+        <li className="menu__item">
+          <a href="#how-to" className="menu__item__link scroll">Por onde começar?</a>
+        </li>
+        <li className="menu__item">
+          <a href="#incoming-events" className="menu__item__link scroll">Próximos eventos</a>
+        </li>
+        <li className="menu__item">
+          <a href="#join-us" className="menu__item__link scroll">Faça parte</a>
+        </li>
+      </ul>
+    </menu>
+  </header>
+);
+
+export default Header;

components/HowTo.js

@@ -0,0 +1,19 @@
+import React from 'react';
+
+const HowTo = () => (
+  <section id="how-to" className="section how-to">
+    <h1 className="section-title">Por onde começar?</h1>
+    <article className="article col-md-12 col-lg-8">
+      <p className="article__body">
+        Acompanhe nosso site, github e páginas do Facebook e Twitter (em breve) para ficar ligado
+        nos eventos e projetos que estamos organizando. Como comunidade flat, todos podem contribuir
+        igualmente e se tornar membros do projeto.
+      </p>
+      <footer className="text-center">
+        <a href="https://github.com/NatalJS" className="btn--negative">GITHUB</a>
+      </footer>
+    </article>
+  </section>
+);
+
+export default HowTo;

components/JoinToUs.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+const JoinToUs = () => (
+  <section id="join-us" className="join-us">
+    <h1 className="section-title">Faça Parte</h1>
+    <ul className="join-us__list">
+      <li className="join-us__item">Vá aos encontros!</li>
+      <li className="join-us__item">Use a hasttag #nataljs</li>
+      <li className="join-us__item">Divulgue nas redes socias</li>
+      <li className="join-us__item">
+        Contribua em
+        {' '}
+        <a className="join-us__link" href="https://github.com/NatalJS" title="NatalJS" target="_blank" rel="noopener noreferrer">
+          nossos projetos
+        </a>
+      </li>
+    </ul>
+  </section>
+);
+
+export default JoinToUs;

jsconfig.json

@@ -4,10 +4,13 @@
     "allowSyntheticDefaultImports": false,
     "baseUrl": "./",
     "paths": {
-        "scss/*": ["src/scss/*"],
-        "assets/*": ["src/assets/*"],
-        "app/*": ["src/js/*"]
+      "components/*": ["components/*"],
+      "pages/*": ["pages/*"],
+      "plugins/*": ["plugins/*"],
+      "store/*": ["store/*"],
+      "tests/*": ["tests/*"],
+      "utils/*": ["utils/*"],
     }
   },
-  "exclude": ["node_modules", "dist"]
+  "exclude": ["node_modules", "dist", "put", "public"]
 }

next.config.js

@@ -0,0 +1,2 @@
+const withSass = require('@zeit/next-sass');
+module.exports = withSass();