diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 000000000..b665e8d5e --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,10 @@ +module.exports = { + env: { + node: true, + }, + extends: ["eslint:recommended", "plugin:vue/vue3-recommended"], + rules: { + // override/add rules settings here, such as: + // 'vue/no-unused-vars': 'error' + }, +}; diff --git a/.gitignore b/.gitignore new file mode 100644 index 000000000..403adbc1e --- /dev/null +++ b/.gitignore @@ -0,0 +1,23 @@ +.DS_Store +node_modules +/dist + + +# local env files +.env.local +.env.*.local + +# Log files +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* + +# Editor directories and files +.idea +.vscode +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/README.md b/README.md index 5a84cb7e3..4abdd7dc4 100644 --- a/README.md +++ b/README.md @@ -1,79 +1,29 @@ -# Frontend Challenge - -Our goal is to understand: -- How knowledgeable you are -- How well you structure your app -- How well can you visually reproduce a mockup - -Some restrictions: -- Use the Vue javascript framework and its Component system -- Don't use a UI framework like Bootstrap - -Your challenge will consist of the following: - -You'll have to build a small web app that is able to **fetch data** from an endpoint we provide, **list the data** from the endpoint, allow **editing the data**, **adding and removing** rows, and then **pushing the data** to another endpoint. - -Please fork this repo and commit your changes to the fork. - -Here is a preview of what we are expecting: - -![Sample](_README_assets/sample.png) - -Keep in mind that we may ask you about some of the decisions you made while building the app. - -## Important information to complete the challenge - -### Data source - -Fetch the data from this endpoint [http://www.mocky.io/v2/5ae1c5792d00004d009d7e5c](http://www.mocky.io/v2/5ae1c5792d00004d009d7e5c) - -Using Mocky should produce no cross origin errors and should work fine for this challenge. If you do find issues, it's OK to copy the JSON into your preferred method to then provide the data to the app. - -### Assets, measurements, and other details - -Inside this repository you'll find a folder named `assets-for-challenge`. Inside this folder you can find all the icons we expect you to use, in multiple formats, use what you think is best. - -## Detailed comments on each element - -![Elements Numbered](_README_assets/challenge-elements-numbered.png) - -**Functionality** - -The app should let the user do the following: - -- **1** - _Get data_ button. When the user **clicks on this button**, your app will **get the data from the URL** in [Data source](#Data source) and fill the list -- **2** - _Upload data_ button. When the user **clicks on this button**, your app will **make a POST request to the same url** as the _Get data_ button. You should send the latest information on the list using the same structure as you have received it. -- **3** - _Custom checkbox_. When the user **clicks on the checkbox**, it will become checked. It will not have any other functionality. -- **4** - _Add line_ button. When the user **clicks on this button**, a **new row will be added to the list** and the user should be able to **write text in both fields**. -- **5** - _Delete row_ button. This button should be **visible only when hovering** each row item. When the user **clicks on this button**, your app will **remove that row** from the list. -- **6** - List _item title_ **This title should be editable**. -- **7** - List _item content_. **This content should be editable**. -- **8** - _App title_. No functionality. -- **9** - _Person icon_ linked to each row. No functionality. - -Notes: - -- Don't worry about the blank state before loading the content. - -**Style Attributes** - -These are some and useful details about some of the elements - -- **3** - The checkbox is 16px wide and 16px high. The purple color is `#859EFF` -- **6** - The font-family of the _item title_ is `Montserrat`, the weight is `SemiBold`, the size is `16px`, and the color is `#566074` -- **7** - The font-family of the _item content_ is `Open Sans`, the weight is `Regular`, the size is `16px`, and the color is `#778195` -- **8** - The font-family of the _app title_ is `Montserrat`, the weight is `Medium`, the size is `18px`, and the color is `#414C5E` - -The data above is enough to complete challenge. We also include the source Sketch file in the repository, in case you want to check the original file. You can find it in `_README_assets/Challenge.sketch` - -## Typography - -- You can find [Montserrat on Google Fonts](https://fonts.google.com/specimen/Montserrat) -- You can find [Open Sans on Google Fonts](https://fonts.google.com/specimen/Open+Sans) - -## Bonus points: - -- Keeping in mind accessibility -- Adding tests to your components and app -- Using a store (Vuex) to manage the application data -- Using vue-router to prepare the app for a future where it would have multiple routes \ No newline at end of file +# Frontend Challenge Unbabel + +## Project setup +``` +yarn install +``` + +### Compiles and hot-reloads for development +``` +yarn serve +``` + +### Compiles and minifies for production +``` +yarn build +``` + +### Run your unit tests +``` +yarn test:unit +``` + +### Lints and fixes files +``` +yarn lint +``` + +### Customize configuration +See [Configuration Reference](https://cli.vuejs.org/config/). \ No newline at end of file diff --git a/_README_assets/Challenge.sketch b/_README_assets/Challenge.sketch deleted file mode 100644 index a212e1b0d..000000000 Binary files a/_README_assets/Challenge.sketch and /dev/null differ diff --git a/_README_assets/challenge-elements-numbered.png b/_README_assets/challenge-elements-numbered.png deleted file mode 100644 index 6c4966104..000000000 Binary files a/_README_assets/challenge-elements-numbered.png and /dev/null differ diff --git a/_README_assets/sample.png b/_README_assets/sample.png deleted file mode 100644 index 5adc4dbce..000000000 Binary files a/_README_assets/sample.png and /dev/null differ diff --git a/assets-for-challenge/add-row@1x.png b/assets-for-challenge/add-row@1x.png deleted file mode 100644 index dc706e320..000000000 Binary files a/assets-for-challenge/add-row@1x.png and /dev/null differ diff --git a/assets-for-challenge/add-row@2x.png b/assets-for-challenge/add-row@2x.png deleted file mode 100644 index 0dc70daab..000000000 Binary files a/assets-for-challenge/add-row@2x.png and /dev/null differ diff --git a/assets-for-challenge/delete@1x.png b/assets-for-challenge/delete@1x.png deleted file mode 100644 index eabae5b79..000000000 Binary files a/assets-for-challenge/delete@1x.png and /dev/null differ diff --git a/assets-for-challenge/delete@2x.png b/assets-for-challenge/delete@2x.png deleted file mode 100644 index 99ef69c9e..000000000 Binary files a/assets-for-challenge/delete@2x.png and /dev/null differ diff --git a/assets-for-challenge/fetch-document@1x.png b/assets-for-challenge/fetch-document@1x.png deleted file mode 100644 index fa431e45a..000000000 Binary files a/assets-for-challenge/fetch-document@1x.png and /dev/null differ diff --git a/assets-for-challenge/fetch-document@2x.png b/assets-for-challenge/fetch-document@2x.png deleted file mode 100644 index e92440641..000000000 Binary files a/assets-for-challenge/fetch-document@2x.png and /dev/null differ diff --git a/assets-for-challenge/person@1x.png b/assets-for-challenge/person@1x.png deleted file mode 100644 index 9fe09751c..000000000 Binary files a/assets-for-challenge/person@1x.png and /dev/null differ diff --git a/assets-for-challenge/person@2x.png b/assets-for-challenge/person@2x.png deleted file mode 100644 index 57c455e1c..000000000 Binary files a/assets-for-challenge/person@2x.png and /dev/null differ diff --git a/assets-for-challenge/upload@1x.png b/assets-for-challenge/upload@1x.png deleted file mode 100644 index d262388bc..000000000 Binary files a/assets-for-challenge/upload@1x.png and /dev/null differ diff --git a/assets-for-challenge/upload@2x.png b/assets-for-challenge/upload@2x.png deleted file mode 100644 index 087cac869..000000000 Binary files a/assets-for-challenge/upload@2x.png and /dev/null differ diff --git a/babel.config.js b/babel.config.js new file mode 100644 index 000000000..162a3ea97 --- /dev/null +++ b/babel.config.js @@ -0,0 +1,3 @@ +module.exports = { + presets: ["@vue/cli-plugin-babel/preset"], +}; diff --git a/jsconfig.json b/jsconfig.json new file mode 100644 index 000000000..b6bd4c8dc --- /dev/null +++ b/jsconfig.json @@ -0,0 +1,12 @@ +{ + "compilerOptions": { + "target": "es5", + "module": "esnext", + "baseUrl": "./", + "moduleResolution": "node", + "paths": { + "@/*": ["src/*"] + }, + "lib": ["esnext", "dom", "dom.iterable", "scripthost"] + } +} diff --git a/package.json b/package.json new file mode 100644 index 000000000..b5344b29d --- /dev/null +++ b/package.json @@ -0,0 +1,73 @@ +{ + "name": "frontend-challenge-unbabel", + "version": "1.0.0", + "private": true, + "scripts": { + "serve": "vue-cli-service serve", + "build": "vue-cli-service build", + "test:unit": "vue-cli-service test:unit", + "lint": "vue-cli-service lint" + }, + "dependencies": { + "axios": "^1.3.4", + "core-js": "^3.8.3", + "vue": "^3.2.13", + "vue-router": "4", + "vuex": "^4.0.2" + }, + "devDependencies": { + "@babel/core": "^7.12.16", + "@babel/eslint-parser": "^7.12.16", + "@vue/cli-plugin-babel": "~5.0.0", + "@vue/cli-plugin-eslint": "~5.0.0", + "@vue/cli-plugin-unit-jest": "~5.0.0", + "@vue/cli-service": "~5.0.0", + "@vue/compiler-sfc": "^3.2.47", + "@vue/test-utils": "^2.0.0-0", + "@vue/vue3-jest": "^29.2.3", + "babel-jest": "^27.0.6", + "eslint": "^7.32.0", + "eslint-config-prettier": "^8.7.0", + "eslint-plugin-prettier": "^4.2.1", + "eslint-plugin-vue": "^8.0.3", + "jest": "^27.0.5", + "prettier": "^2.8.4", + "sass": "^1.58.3", + "sass-loader": "^13.2.0" + }, + "eslintConfig": { + "root": true, + "env": { + "node": true + }, + "extends": [ + "plugin:vue/vue3-essential", + "eslint:recommended", + "prettier" + ], + "parserOptions": { + "parser": "@babel/eslint-parser" + }, + "rules": {}, + "overrides": [ + { + "files": [ + "**/__tests__/*.{j,t}s?(x)", + "**/tests/unit/**/*.spec.{j,t}s?(x)" + ], + "env": { + "jest": true + } + } + ] + }, + "browserslist": [ + "> 1%", + "last 2 versions", + "not dead", + "not ie 11" + ], + "jest": { + "preset": "@vue/cli-plugin-unit-jest" + } +} diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 000000000..df36fcfb7 Binary files /dev/null and b/public/favicon.ico differ diff --git a/public/index.html b/public/index.html new file mode 100644 index 000000000..5f1393c1a --- /dev/null +++ b/public/index.html @@ -0,0 +1,21 @@ + + + + + + + + <%= htmlWebpackPlugin.options.title %> + + + +
+ + + diff --git a/src/App.vue b/src/App.vue new file mode 100644 index 000000000..4aac8c114 --- /dev/null +++ b/src/App.vue @@ -0,0 +1,24 @@ + + + + + diff --git a/src/assets/fonts/Montserrat-Medium.ttf b/src/assets/fonts/Montserrat-Medium.ttf new file mode 100644 index 000000000..dfc7e2fc5 Binary files /dev/null and b/src/assets/fonts/Montserrat-Medium.ttf differ diff --git a/src/assets/fonts/Montserrat-SemiBold.ttf b/src/assets/fonts/Montserrat-SemiBold.ttf new file mode 100644 index 000000000..cbf44db93 Binary files /dev/null and b/src/assets/fonts/Montserrat-SemiBold.ttf differ diff --git a/src/assets/fonts/OpenSans-Regular.ttf b/src/assets/fonts/OpenSans-Regular.ttf new file mode 100644 index 000000000..1dc226ddc Binary files /dev/null and b/src/assets/fonts/OpenSans-Regular.ttf differ diff --git a/assets-for-challenge/add-row.svg b/src/assets/images/svg/add-row.svg similarity index 100% rename from assets-for-challenge/add-row.svg rename to src/assets/images/svg/add-row.svg diff --git a/assets-for-challenge/delete.svg b/src/assets/images/svg/delete.svg similarity index 100% rename from assets-for-challenge/delete.svg rename to src/assets/images/svg/delete.svg diff --git a/assets-for-challenge/fetch-document.svg b/src/assets/images/svg/fetch-document.svg similarity index 100% rename from assets-for-challenge/fetch-document.svg rename to src/assets/images/svg/fetch-document.svg diff --git a/assets-for-challenge/person.svg b/src/assets/images/svg/person.svg similarity index 100% rename from assets-for-challenge/person.svg rename to src/assets/images/svg/person.svg diff --git a/assets-for-challenge/upload.svg b/src/assets/images/svg/upload.svg similarity index 100% rename from assets-for-challenge/upload.svg rename to src/assets/images/svg/upload.svg diff --git a/src/components/common/AppButton.vue b/src/components/common/AppButton.vue new file mode 100644 index 000000000..e205fed4b --- /dev/null +++ b/src/components/common/AppButton.vue @@ -0,0 +1,24 @@ + + + \ No newline at end of file diff --git a/src/components/common/AppCheckbox.vue b/src/components/common/AppCheckbox.vue new file mode 100644 index 000000000..e8dfe87b7 --- /dev/null +++ b/src/components/common/AppCheckbox.vue @@ -0,0 +1,40 @@ + + + + + \ No newline at end of file diff --git a/src/components/common/AppIcon.vue b/src/components/common/AppIcon.vue new file mode 100644 index 000000000..0d93eafc6 --- /dev/null +++ b/src/components/common/AppIcon.vue @@ -0,0 +1,39 @@ + + + diff --git a/src/components/common/AppInput.vue b/src/components/common/AppInput.vue new file mode 100644 index 000000000..3e11bedc4 --- /dev/null +++ b/src/components/common/AppInput.vue @@ -0,0 +1,43 @@ + + + + \ No newline at end of file diff --git a/src/components/common/AppTextarea.vue b/src/components/common/AppTextarea.vue new file mode 100644 index 000000000..664f17624 --- /dev/null +++ b/src/components/common/AppTextarea.vue @@ -0,0 +1,54 @@ +