@konfuzio/document-validation-ui 0.1.7 → 0.1.8-pre-release-1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konfuzio/document-validation-ui",
-  "version": "0.1.7",
+  "version": "0.1.8-pre-release-1",
   "repository": "git://github.com:konfuzio-ai/document-validation-ui.git",
   "main": "dist/app.js",
   "scripts": {

package/src/api.js

@@ -21,6 +21,14 @@ const setAuthToken = (token) => {
   authToken = token;
 };
 
+const setApiUrl = (url) => {
+  HTTP.defaults.baseURL = url;
+};
+
+const setImageUrl = (url) => {
+  IMG_REQUEST.defaults.baseURL = url;
+};
+
 const getInterceptorConfig = (config) => {
   if (authToken) {
     config.headers["Authorization"] = `Token ${authToken}`;
@@ -54,6 +62,8 @@ const makeImageRequest = (imageURL) => {
 
 export default {
   HTTP,
+  setApiUrl,
+  setImageUrl,
   makeImageRequest,
   setAuthToken,
 };

package/src/assets/scss/{main.scss → theme.scss}

@@ -1,9 +1,21 @@
+@use "sass:meta";
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");
 @import "./imports.scss";
 
-body {
+:root {
+  --konfuzio-green: #41af85;
+  --white: #fff;
+  --primary-color: var(--konfuzio-green);
+  --primary-button: 4px;
+  --top-bar-background: var(--white);
+}
+
+.dv-ui-app-container {
+  @include meta.load-css("../../../node_modules/buefy/dist/buefy.css");
+  display: flex;
+  height: 100%;
+  flex-direction: column;
   margin: 0;
-  font-family: $font-family;
 
   .overlay {
     height: 100%;
@@ -16,13 +28,17 @@ body {
     overflow-x: hidden;
   }
 
-  .dv-ui-app-container {
-    display: flex;
-    height: 100%;
-    flex-direction: column;
-  }
+  &.dv-ui-theme {
+    font-family: $font-family;
+
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+    -webkit-text-size-adjust: 100%;
+    -moz-text-size-adjust: 100%;
+    -ms-text-size-adjust: 100%;
+    text-size-adjust: 100%;
+    box-sizing: border-box;
 
-  .dv-ui-theme {
     button {
       &.is-primary {
         background-color: $primary !important;
@@ -275,7 +291,7 @@ body {
     }
 
     .b-checkbox.checkbox {
-      .check {
+      input[type="checkbox"] + .check {
         background-color: $white;
       }
       &:hover input[type="checkbox"]:not(:disabled) + .check {

package/src/assets/scss/variables.scss

@@ -1,6 +1,3 @@
-/* Theme */
-
-$konfuzio-green: #41af85;
 $green: #4bb543;
 $green-low-opacity: rgba(75, 181, 67, 0.11);
 $green-border: #67d19f;
@@ -30,7 +27,7 @@ $detail: #e2e3e4;
 $dark: #2f3032;
 $full-black: #000;
 
-$white: #fff;
+$white: var(--white);
 $low-opacity-white: rgba(255, 255, 255, 0.1);
 
 $yellow: #ffd600;
@@ -41,12 +38,6 @@ $purple: #7b61ff;
 $purple-low-opacity: rgba(123, 97, 255, 0.08);
 $text-color: #1a1a1a;
 
-:root {
-  --primary-color: #{$konfuzio-green};
-  --primary-button: 4px;
-  --top-bar-background: #{$white};
-}
-
 $primary: var(--primary-color);
 $hover-style: brightness(0.8) contrast(160%) grayscale(0.4);
 $font-family: "Inter", sans-serif;

package/src/components/App.vue

@@ -5,6 +5,8 @@
   </div>
 </template>
 <script>
+import Vue from "vue";
+import * as Sentry from "@sentry/vue";
 import DocumentDashboard from "./DocumentDashboard";
 import { DocumentsList } from "./DocumentsList";
 import { getURLQueryParam, getURLPath } from "../utils/utils";
@@ -39,6 +41,30 @@ export default {
       required: false,
       default: "false",
     },
+    // eslint-disable-next-line vue/prop-name-casing
+    sentry_dsn: {
+      type: String,
+      required: false,
+      default: "",
+    },
+    // eslint-disable-next-line vue/prop-name-casing
+    sentry_env: {
+      type: String,
+      required: false,
+      default: "",
+    },
+    // eslint-disable-next-line vue/prop-name-casing
+    api_url: {
+      type: String,
+      required: false,
+      default: "",
+    },
+    // eslint-disable-next-line vue/prop-name-casing
+    image_url: {
+      type: String,
+      required: false,
+      default: "",
+    },
     locale: {
       type: String,
       required: false,
@@ -93,13 +119,40 @@ export default {
     },
   },
   created() {
+    // Sentry config
+    if (process.env.NODE_ENV != "development") {
+      Sentry.init({
+        Vue,
+        dsn: process.env.VUE_APP_SENTRY_DSN,
+        integrations: [new Integrations.BrowserTracing()],
+        environment: process.env.VUE_APP_SENTRY_ENVIRONMENT,
+
+        // We recommend adjusting this value in production, or using tracesSampler
+        // for finer control
+        tracesSampleRate: 1.0,
+
+        // If false, errors won't show up in devtools
+        logErrors: true,
+
+        tracingOptions: {
+          trackComponents: true,
+        },
+      });
+    }
+
     // locale config
     if (this.locale && this.locale !== "") {
       this.$i18n.locale = this.locale;
     }
 
-    // user token config
+    // api config
     API.setAuthToken(this.userToken);
+    if (this.api_url !== "") {
+      API.setApiUrl(this.api_url);
+    }
+    if (this.image_url !== "") {
+      API.setImageUrl(this.image_url);
+    }
 
     // document and project config
     Promise.all([
@@ -128,4 +181,4 @@ export default {
 };
 </script>
 
-<style lang="scss" src="../assets/scss/main.scss"></style>
+<style lang="scss" src="../assets/scss/theme.scss"></style>

package/src/main.js

@@ -1,6 +1,5 @@
 import Vue from "vue";
 import Buefy from "buefy";
-import "buefy/dist/buefy.css";
 import VueKonva from "vue-konva";
 import App from "./components/App";
 import * as Sentry from "@sentry/vue";