fix: Adjust the background of the button and fix the eslint on resiza…

…ble bar
weni-ai · Mar 22, 2024 · 8a75ab8 · 8a75ab8
2 parents e1d0875 + f673360
commit 8a75ab8
Show file tree

Hide file tree

Showing 10 changed files with 390 additions and 264 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -0,0 +1,8 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+    browser: true,
+  },
+  extends: ['@weni/eslint-config/vue3'],
+};
diff --git a/.eslintrc.js b/.eslintrc.js
diff --git a/.prettierrc.json b/.prettierrc.json
diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
     "build": "vite build",
     "preview": "vite preview",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
-    "format": "prettier --write src/"
+    "format": "lint --fix"
   },
   "dependencies": {
     "@weni/unnnic-system": "^2.0.0-beta.0",
@@ -23,12 +23,16 @@
     "@vitejs/plugin-vue": "^4.5.2",
     "@vitejs/plugin-vue-jsx": "^3.1.0",
     "@vue/eslint-config-prettier": "^8.0.0",
-    "eslint": "^8.49.0",
-    "eslint-plugin-vue": "^9.17.0",
+    "@weni/eslint-config": "^1.0.1",
+    "eslint": "^7.0.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-vue": "^9.22.0",
     "node-sass": "^9.0.0",
-    "prettier": "^3.0.3",
+    "prettier": "^3.2.5",
     "sass": "^1.69.7",
     "sass-loader": "^13.3.3",
-    "vite": "^5.0.10"
+    "vite": "^5.0.10",
+    "vue-eslint-parser": "^9.4.2"
   }
 }
diff --git a/src/components/InsightsInput.vue b/src/components/InsightsInput.vue
@@ -6,7 +6,11 @@
       placeholder="Peça insights ao InsightsGPT..."
     />
     <div class="insights-input__button">
-      <unnnic-button type="secondary" size="large" iconCenter="send" />
+      <UnnnicButton
+        type="secondary"
+        size="large"
+        iconCenter="send"
+      />
     </div>
   </section>
 </template>

diff --git a/src/components/ResizableBar.vue b/src/components/ResizableBar.vue
@@ -1,13 +1,16 @@
 <template>
   <aside
     class="resizable-bar"
-    :class="{ 'resizable-bar--position' : isRelative }"
+    :class="{ 'resizable-bar--position': isRelative }"
     :style="{
       bottom: sidebarBottom + 'px',
       height: `${Math.min(sidebarHeight, maxHeight)}px`,
     }"
   >
-    <header class="resizable-bar__header" @mousedown="startResizing">
+    <header
+      class="resizable-bar__header"
+      @mousedown="startResizing"
+    >
       <hr
         :class="{ 'green-color': isResizing }"
         class="resizable-bar__separator"
@@ -17,10 +20,22 @@
         class="resizable-bar__circle-up"
         v-if="sidebarBottom"
       >
-        <unnnic-icon
+        <UnnnicIcon
           icon="expand_circle_up"
           size="md"
-          scheme="neutral-cleanest"
+          scheme="neutral-clean"
+          clickable
+        />
+      </button>
+      <button
+        @click="resizeBar"
+        class="resizable-bar__circle-up"
+        v-if="sidebarBottom > 100"
+      >
+        <UnnnicIcon
+          icon="expand_circle_down"
+          size="md"
+          scheme="neutral-clean"
           clickable
         />
       </button>
@@ -29,7 +44,7 @@
         class="resizable-bar__circle-up"
         v-if="sidebarBottom > 100"
       >
-        <unnnic-icon
+        <UnnnicIcon
           icon="expand_circle_down"
           size="md"
           scheme="neutral-cleanest"
@@ -42,7 +57,10 @@
       />
     </header>
     <section class="resizable-bar__content">
-      <div v-if="visibleInsights" class="resizable-bar__insights">
+      <div
+        v-if="visibleInsights"
+        class="resizable-bar__insights"
+      >
         <header class="resizable-bar__insights-header">
           <p
             class="resizable-bar__insights-description unnnic-font body-md bold"
@@ -65,30 +83,58 @@
           </nav>
           <div class="resizable-bar__insights-cards">
             <SugestionCard>
-              <template v-slot:title>Análise de Desempenho do Atendente</template>
+              <template v-slot:title
+                >Análise de Desempenho do Atendente</template
+              >
               <template v-slot:description>Nos últimos 30 dias</template>
             </SugestionCard>
             <SugestionCard>
               <template v-slot:title>Satisfação do Cliente</template>
-              <template v-slot:description>Combine os dados de atendimento com feedbacks de satisfação do cliente para avaliar a eficácia dos diferentes setores e atendentes.</template>
+              <template v-slot:description
+                >Combine os dados de atendimento com feedbacks de satisfação do
+                cliente para avaliar a eficácia dos diferentes setores e
+                atendentes.</template
+              >
             </SugestionCard>
             <SugestionCard>
-              <template v-slot:title>Relatório de Distribuição de Atendimentos</template>
-              <template v-slot:description>Gere um relatório mostrando a distribuição de atendimentos por setor e fila ao longo do tempo, identificando picos de demanda.</template>
+              <template v-slot:title
+                >Relatório de Distribuição de Atendimentos</template
+              >
+              <template v-slot:description
+                >Gere um relatório mostrando a distribuição de atendimentos por
+                setor e fila ao longo do tempo, identificando picos de
+                demanda.</template
+              >
             </SugestionCard>
             <SugestionCard>
               <template v-slot:title>Tendências de Contato</template>
-              <template v-slot:description>Analise a frequência de contatos de cada cliente e identifique padrões ou tendências em suas solicitações de atendimento.</template>
+              <template v-slot:description
+                >Analise a frequência de contatos de cada cliente e identifique
+                padrões ou tendências em suas solicitações de
+                atendimento.</template
+              >
             </SugestionCard>
             <SugestionCard>
-              <template v-slot:title>Avaliação de Tags de Encerramento</template>
-              <template v-slot:description>Examine as tags de encerramento do atendimento e determine as categorias mais comuns de problemas ou solicitações dos clientes.</template>
+              <template v-slot:title
+                >Avaliação de Tags de Encerramento</template
+              >
+              <template v-slot:description
+                >Examine as tags de encerramento do atendimento e determine as
+                categorias mais comuns de problemas ou solicitações dos
+                clientes.</template
+              >
             </SugestionCard>
           </div>
         </div>
       </div>
-      <div v-else class="resizable-bar__general-content">
-        <div class="resizable-bar__content-doris" v-if="showContent">
+      <div
+        v-else
+        class="resizable-bar__general-content"
+      >
+        <div
+          class="resizable-bar__content-doris"
+          v-if="showContent"
+        >
           <img
             class="resizable-bar__doris-image"
             src="../assets/images/doris.png"
@@ -101,15 +147,21 @@
         <div class="resizable-bar__content-text">
           <div class="resizable-bar__cards">
             <InsightsCard v-if="showContent">
-              <template v-slot:title>Quais foram os principais erros no meu chatbot?</template>
+              <template v-slot:title
+                >Quais foram os principais erros no meu chatbot?</template
+              >
               <template v-slot:description>Nos últimos 30 dias</template>
             </InsightsCard>
             <InsightsCard v-if="showContent">
-              <template v-slot:title>Quais foram os principais erros no meu chatbot?</template>
+              <template v-slot:title
+                >Quais foram os principais erros no meu chatbot?</template
+              >
               <template v-slot:description>Nos últimos 30 dias</template>
             </InsightsCard>
             <InsightsCard>
-              <template v-slot:title>Quais foram os principais erros no meu chatbot?</template>
+              <template v-slot:title
+                >Quais foram os principais erros no meu chatbot?</template
+              >
               <template v-slot:description>Nos últimos 30 dias</template>
             </InsightsCard>
             <InsightsMainCard @click="showInsights">
@@ -159,7 +211,7 @@ export default {
 
   methods: {
     getInitialBarHeight() {
-      if (this.$route.path === '/insights') {
+      if (this.$route.name === 'home') {
         this.showContent = true;
         return 1;
       } else {
@@ -169,10 +221,10 @@ export default {
     },
 
     changePosition() {
-      if(this.$route.path !== '/insights') {
-        return this.isRelative = false;
+      if (this.$route.name !== 'home') {
+        return (this.isRelative = false);
       } else {
-        return this.isRelative = true;
+        return (this.isRelative = true);
       }
     },
 
@@ -204,7 +256,7 @@ export default {
         );
       }
 
-      if(this.isResizing && this.sidebarBottom < -200) {
+      if (this.isResizing && this.sidebarBottom < -200) {
         this.$store.commit('sidebar/setChartVisibility', true);
       }
     },
@@ -267,11 +319,11 @@ $insightsContainerPadding: $unnnic-spacing-ant * 2;
   }
 
   .green-color {
-    border: 2px solid $unnnic-color-brand-weni;
+    border: 2px solid $unnnic-color-neutral-dark;
   }
 
   &__circle-up {
-    border-radius: $unnnic-spacing-nano;
+    border-radius: 50%;
     background-color: $unnnic-color-neutral-white;
     border: none;
     cursor: pointer;
@@ -397,4 +449,4 @@ $insightsContainerPadding: $unnnic-spacing-ant * 2;
   position: inherit;
   width: 100%;
 }
-</style>
+</style>
diff --git a/src/layouts/InsightsLayout/index.vue b/src/layouts/InsightsLayout/index.vue
@@ -24,6 +24,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+$topbarHeight: 88px;
+
 .insights-layout {
   display: grid;
   grid-template-columns: auto 1fr;
@@ -50,7 +52,7 @@ export default {
   }
 
   &__insights {
-    height: calc(100vh - 88px);
+    height: calc(100vh - $topbarHeight);
 
     position: relative;
 
@@ -67,6 +69,9 @@ export default {
       height: 100%;
 
       background-color: $unnnic-color-neutral-white;
+
+      overflow-y: auto;
+      overflow-x: hidden;
     }
   }
 }

diff --git a/src/main.js b/src/main.js
@@ -6,7 +6,7 @@ import store from './store';
 
 import VueApexCharts from 'vue3-apexcharts';
 
-import Unnnic from '@weni/unnnic-system';
+import Unnnic from './utils/plugins/UnnnicSystem';
 import '@weni/unnnic-system/dist/style.css';
 
 import './styles/global.scss';
@@ -18,4 +18,4 @@ app.use(store);
 app.use(Unnnic);
 app.use(VueApexCharts);
 
-app.mount('#app');
+app.mount('#app');
diff --git a/src/utils/plugins/UnnnicSystem.js b/src/utils/plugins/UnnnicSystem.js
@@ -0,0 +1,21 @@
+import UnnnicSystem from '@weni/unnnic-system';
+
+function capitalize(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+const components = {};
+
+UnnnicSystem.install({
+  component(name, component) {
+    components[name] = component;
+  },
+});
+
+export default {
+  install(app) {
+    Object.keys(components).forEach((componentName) => {
+      app.component(capitalize(componentName), components[componentName]);
+    });
+  },
+};