Challenge4

.babelrc

@@ -0,0 +1,3 @@
+{
+    "presets": ["next/babel"]
+}

.env

@@ -0,0 +1 @@
+API_KEY='AIzaSyBLF4iEDjnWFmKrhEtIetO5qRT2aKQqO4o'

.eslintrc.json

@@ -0,0 +1,5 @@
+{
+    "env": {
+        "jest": true
+    }
+}

.gitignore

@@ -8,16 +8,27 @@
 # testing
 /coverage
 
+# next.js
+/.next/
+/out/
+
 # production
 /build
 
 # misc
 .DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
 .env.local
 .env.development.local
 .env.test.local
 .env.production.local
 
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
+# vercel
+.vercel

README.md

@@ -1,3 +1,30 @@
-# Wizeline Academy - 2021 React Bootcamp
+# Wizeline Challenge with Next and chakra.
+
+This example features how to use [chakra-ui](https://github.com/chakra-ui/chakra-ui) as the component library within a Next.js app.
+
+## Challenge2 Questions
+Using create-react-app, what do we need to set up for testing?
+```bash
+Nothing, create-react-app has all that you need to test with jest
+```
+What components are worth to test in your development?
+```bash
+All of them, at the very least, make sure the component renders without error. 
+```
+Can you apply TDD once you already created components?
+```bash
+Sure, you have to test the components that you has created 
+```
+
+
+
+## How to use
+
+```bash
+npm install
+npm dev
+# or
+yarn 
+yarn dev
+```
 
-Please refere to the following [GIST](https://gist.github.com/erickwize/d7311bfc972080c162c43cbb7dc80587) for further instructions

TestResult.txt

@@ -0,0 +1,20 @@
+ PASS  src/components/CardList/CardList.test.jsx
+ PASS  src/components/Title/Title.test.jsx  
+ PASS  src/components/Navbar/NavBar.test.jsx
+---------------|---------|----------|---------|---------|-------------------
+File           | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
+---------------|---------|----------|---------|---------|-------------------
+All files      |     100 |      100 |     100 |     100 |                   
+ Navbar        |     100 |      100 |     100 |     100 | 
+  NavBar.jsx   |     100 |      100 |     100 |     100 | 
+ SideMenu      |     100 |      100 |     100 |     100 | 
+  SideMenu.jsx |     100 |      100 |     100 |     100 | 
+ Title         |     100 |      100 |     100 |     100 | 
+  Title.jsx    |     100 |      100 |     100 |     100 | 
+---------------|---------|----------|---------|---------|-------------------
+
+Test Suites: 3 passed, 3 total
+Tests:       3 passed, 3 total
+Snapshots:   0 total
+Time:        4.997 s
+Ran all test suites.

next.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+    env: {
+      API_KEY: 'AIzaSyBLF4iEDjnWFmKrhEtIetO5qRT2aKQqO4o',
+    },
+  }

package.json

@@ -1,61 +1,36 @@
 {
-  "name": "react-certification-2020",
+  "name": "with-chakra-ui",
   "version": "0.1.0",
-  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "test": "jest --watch"
+  },
   "dependencies": {
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^10.4.9",
-    "@testing-library/user-event": "^12.1.3",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-router": "^5.2.0",
+    "@chakra-ui/icons": "^1.0.0",
+    "@chakra-ui/react": "^1.0.0",
+    "@emotion/react": "^11.0.0",
+    "@emotion/styled": "^11.0.0",
+    "axios": "^0.21.1",
+    "formik": "^2.2.6",
+    "framer-motion": "^2.9.4",
+    "next": "latest",
+    "node-fetch": "^2.6.1",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-icons": "^4.2.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.3"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "lint": "eslint ./src --ext .js,.jsx",
-    "lint:fix": "eslint ./src --ext .js,.jsx --fix"
+    "styled-components": "^5.2.1",
+    "yarn": "^1.22.10"
   },
+  "license": "MIT",
   "devDependencies": {
-    "eslint-config-airbnb": "^18.2.0",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-eslint-comments": "^3.2.0",
-    "eslint-plugin-import": "^2.22.0",
-    "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.20.6",
-    "eslint-plugin-react-hooks": "^4.1.0",
-    "husky": "^4.2.5",
-    "lint-staged": "^10.2.13",
-    "prettier": "^2.1.1",
-    "pretty-quick": "^3.0.0"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "lint-staged": {
-    "*.{js, jsx, css, json}": [
-      "yarn run lint:fix",
-      "pretty-quick --staged",
-      "git add"
-    ]
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
+    "@testing-library/dom": "^7.30.0",
+    "@testing-library/jest-dom": "^5.11.9",
+    "@testing-library/react": "^11.2.5",
+    "babel-jest": "^26.6.3",
+    "jest": "^26.6.3",
+    "jest-dom": "^4.0.0"
   }
 }