MSMFG · SteRileyMSMG · Jul 4, 2024
diff --git a/.gitignore b/.gitignore
@@ -1,7 +1,7 @@
 .idea/
 .cache/
 coverage/
-dist/*
+**/dist/**
 node_modules/
 *.log
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,64 +1,16 @@
 {
-  "name": "msmg-frontend-task",
+  "name": "@msmg/frontend-task",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "keywords": [],
   "author": "",
   "license": "ISC",
-  "scripts": {
-    "clean": "rm dist/bundle.js",
-    "start": "parcel src/index.html",
-    "build-prod": "parcel build src/index.html",
-    "test": "jest",
-    "test:watch": "jest --watch"
-  },
+  "scripts": {},
   "dependencies": {},
-  "devDependencies": {
-    "@babel/plugin-transform-modules-commonjs": "7.14.0",
-    "eslint": "7.25.0",
-    "jest": "26.6.3",
-    "parcel-bundler": "1.12.5",
-    "sass": "1.32.11"
-  },
-  "browserslist": [
-    "last 1 Chrome version"
-  ],
-  "babel": {
-    "env": {
-      "test": {
-        "plugins": [
-          "@babel/plugin-transform-modules-commonjs"
-        ]
-      }
-    }
-  },
-  "eslintConfig": {
-    "rules": {},
-    "env": {
-      "es6": true,
-      "browser": true
-    },
-    "parserOptions": {
-      "ecmaVersion": 2018,
-      "sourceType": "module",
-      "parser": "babel-eslint"
-    },
-    "extends": "eslint:recommended",
-    "globals": {
-      "Atomics": "readonly",
-      "SharedArrayBuffer": "readonly"
-    },
-    "overrides": [
-      {
-        "files": [
-          "**/*.test.js"
-        ],
-        "env": {
-          "node": true,
-          "jest": true
-        }
-      }
-    ]
-  }
+  "devDependencies": {},
+  "workspaces": [
+    "vanilla",
+    "vue"
+  ]
 }
diff --git a/vanilla/README.md b/vanilla/README.md
@@ -0,0 +1,27 @@
+# Getting Started
+
+First install dependencies:
+
+```sh
+npm install
+```
+
+To run in hot module reloading mode:
+
+```sh
+npm start
+```
+
+## Testing
+
+To run unit tests:
+
+```sh
+npm test
+```
+
+To run unit tests in watch mode:
+
+```sh
+npm run test:watch
+```
diff --git a/vanilla/package.json b/vanilla/package.json
@@ -0,0 +1,64 @@
+{
+  "name": "@msmg/frontend-task-vanilla",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "scripts": {
+    "clean": "rm dist/bundle.js",
+    "start": "parcel src/index.html",
+    "build-prod": "parcel build src/index.html",
+    "test": "jest",
+    "test:watch": "jest --watch"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@babel/plugin-transform-modules-commonjs": "7.14.0",
+    "eslint": "7.25.0",
+    "jest": "26.6.3",
+    "parcel-bundler": "1.12.5",
+    "sass": "1.32.11"
+  },
+  "browserslist": [
+    "last 1 Chrome version"
+  ],
+  "babel": {
+    "env": {
+      "test": {
+        "plugins": [
+          "@babel/plugin-transform-modules-commonjs"
+        ]
+      }
+    }
+  },
+  "eslintConfig": {
+    "rules": {},
+    "env": {
+      "es6": true,
+      "browser": true
+    },
+    "parserOptions": {
+      "ecmaVersion": 2018,
+      "sourceType": "module",
+      "parser": "babel-eslint"
+    },
+    "extends": "eslint:recommended",
+    "globals": {
+      "Atomics": "readonly",
+      "SharedArrayBuffer": "readonly"
+    },
+    "overrides": [
+      {
+        "files": [
+          "**/*.test.js"
+        ],
+        "env": {
+          "node": true,
+          "jest": true
+        }
+      }
+    ]
+  }
+}
diff --git a/src/index.html → vanilla/src/index.html b/src/index.html → vanilla/src/index.html
diff --git a/src/js/helpers.js → vanilla/src/js/helpers.js b/src/js/helpers.js → vanilla/src/js/helpers.js
diff --git a/src/js/helpers.test.js → vanilla/src/js/helpers.test.js b/src/js/helpers.test.js → vanilla/src/js/helpers.test.js
diff --git a/src/js/index.js → vanilla/src/js/index.js b/src/js/index.js → vanilla/src/js/index.js
diff --git a/src/js/update-page.js → vanilla/src/js/update-page.js b/src/js/update-page.js → vanilla/src/js/update-page.js
diff --git a/src/js/update-page.test.js → vanilla/src/js/update-page.test.js b/src/js/update-page.test.js → vanilla/src/js/update-page.test.js
diff --git a/src/styles.scss → vanilla/src/styles.scss b/src/styles.scss → vanilla/src/styles.scss
diff --git a/vue/.gitignore b/vue/.gitignore
@@ -0,0 +1,12 @@
+dist/*
+node_modules/
+*.log
+
+# OS generated files
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
diff --git a/vue/README.md b/vue/README.md
@@ -0,0 +1,27 @@
+# Getting Started
+
+First install dependencies:
+
+```sh
+npm install
+```
+
+To run in hot module reloading mode:
+
+```sh
+npm start
+```
+
+## Testing
+
+To run unit tests:
+
+```sh
+npm test
+```
+
+To run unit tests in watch mode:
+
+```sh
+npm run test:watch
+```
diff --git a/vue/index.html b/vue/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>MSMG Bitcoin app</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/vue/package.json b/vue/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "@msmg-public/frontend-interview-task",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "start": "vite",
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview",
+    "test": "vitest --run",
+    "test:watch": "vitest"
+  },
+  "dependencies": {
+    "vue": "^3.4.29"
+  },
+  "devDependencies": {
+    "@types/node": "^20.14.9",
+    "@vitejs/plugin-vue": "^5.0.5",
+    "@vue/test-utils": "^2.4.6",
+    "jsdom": "^24.1.0",
+    "sass": "^1.77.6",
+    "typescript": "^5.2.2",
+    "vite": "^5.3.1",
+    "vitest": "^1.6.0",
+    "vue-tsc": "^2.0.21"
+  }
+}
diff --git a/vue/public/vite.svg b/vue/public/vite.svg
diff --git a/vue/src/App.vue b/vue/src/App.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import CurrecyConverter from "./components/CurrencyConverter.vue";
+import CurrencyTable from "./components/CurrencyTable.vue";
+
+import useCurrencyTable from "./hooks/useCurrencyTable";
+
+// TODO: implement usage of this URL
+// const EXCHANGE_CONVERSION_URL = " https://blockchain.info/tobtc?currency=GBP&value=20";
+
+const EXCHANGE_URL = "https://blockchain.info/ticker";
+const { tableData } = useCurrencyTable(EXCHANGE_URL);
+</script>
+
+<template>
+  <main class="page">
+    <h1>MSMG Bitcoin app</h1>
+    <CurrencyTable :table-data="tableData" />
+    <CurrecyConverter />
+  </main>
+</template>
+
+<style scoped>
+.page {
+  max-width: 1200px;
+  width: 100%;
+  margin: 0 auto;
+}
+
+h1 {
+  color: white;
+  background-color: black;
+}
+</style>
diff --git a/vue/src/components/CurrencyConverter.vue b/vue/src/components/CurrencyConverter.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+function onSubmit() {
+  console.info("convert currency");
+}
+</script>
+
+<template>
+  <form @submit.prevent="onSubmit">
+    <button>Convert</button>
+  </form>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/vue/src/components/CurrencyConverter.vue.test.ts b/vue/src/components/CurrencyConverter.vue.test.ts
@@ -0,0 +1,10 @@
+import { describe, it, expect } from "vitest";
+import { shallowMount } from "@vue/test-utils";
+import CurrencyConverter from "./CurrencyConverter.vue";
+
+describe("<CurrencyConverter />", () => {
+  it("should render the component", () => {
+    const wrapper = shallowMount(CurrencyConverter);
+    expect(wrapper).toBeDefined();
+  });
+});
diff --git a/vue/src/components/CurrencyTable.vue b/vue/src/components/CurrencyTable.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type { ICurrency } from "../helpers";
+
+defineProps<{
+  tableData: ICurrency[];
+}>();
+</script>
+
+<template>
+  <table>
+    <thead>
+      <tr>
+        <th>Symbol / Name</th>
+        <th>15m</th>
+        <th>Buy</th>
+        <th>Last</th>
+        <th>Sell</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr
+        :id="symbol"
+        v-for="{ name, buy, last, sell, symbol, '15m': last15m } in tableData"
+      >
+        <td>{{ symbol }} / {{ name }}</td>
+        <td>{{ last15m }}</td>
+        <td>{{ buy }}</td>
+        <td>{{ last }}</td>
+        <td>{{ sell }}</td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<style scoped lang="scss">
+table {
+  width: 100%;
+
+  th,
+  td {
+    border: none;
+    padding: spacing(1);
+  }
+
+  th {
+    background-color: #a48db6;
+    color: white;
+  }
+}
+</style>