chore: apply ESLint fixes and Prettier formatting

- Ran ESLint with --fix to automatically resolve linting issues.
- Applied Prettier to format code according to the project style guidelines.
- Updated TypeScript to a version supported by @typescript-eslint.
- Ensured compatibility between TypeScript and ESLint configuration.

.github/workflows/deploy.yml

@@ -1,14 +1,14 @@
 name: Test and publish package
 on:
   push:
-    branches: [ main ]
+    branches: [main]
 
 permissions:
   contents: read #  for checkout
 
 jobs:
   build:
-    runs-on: ubuntu-latest  
+    runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
       - name: Set up Node.js 20
@@ -49,7 +49,7 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.SEMANTIC_RELEASE_BOT_NPM_TOKEN }}
       - name: Build storybook
-        run: yarn build-storybook
+        run: yarn build:storybook
       - name: Deploy storybook
         uses: peaceiris/actions-gh-pages@v4
         with:

eslint.config.mjs

@@ -39,7 +39,10 @@ export default defineFlatConfig([
         },
       ],
       'no-unused-vars': 'off',
-      '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
+      '@typescript-eslint/no-unused-vars': [
+        'warn',
+        { vars: 'all', varsIgnorePattern: '^_', args: 'after-used', argsIgnorePattern: '^_' },
+      ],
       'vue/no-v-html': 'off',
       'vue/padding-line-between-blocks': ['error', 'always'],
     },

package.json

@@ -13,7 +13,7 @@
     "build": "cross-env STORYBOOK=false vue-tsc && vite build",
     "preview": "vite preview",
     "storybook": "cross-env STORYBOOK=true storybook dev -p 6006",
-    "build-storybook": "cross-env STORYBOOK=true storybook build",
+    "build:storybook": "cross-env STORYBOOK=true storybook build",
     "semantic-release": "semantic-release"
   },
   "dependencies": {
@@ -51,6 +51,7 @@
     "eslint-define-config": "^2.1.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-unused-imports": "^4.1.4",
     "eslint-plugin-vue": "^9.29.0",
     "happy-dom": "^15.7.4",
     "postcss": "^8.1.0",
@@ -60,7 +61,7 @@
     "rollup-plugin-visualizer": "^5.12.0",
     "semantic-release": "^24.1.2",
     "storybook": "^8.3.5",
-    "typescript": "^5.6.3",
+    "typescript": "5.5.x",
     "vite": "^5.2.12",
     "vite-plugin-dts": "^4.2.3",
     "vitest": "^2.1.2",

src/components/timeline/atomos/AvatarTimeline.vue

@@ -7,6 +7,7 @@
     <span v-else="icone" class="material-symbols-outlined"> person </span>
   </div>
 </template>
+
 <script lang="ts">
 import { defineComponent } from 'vue';
 import 'material-symbols/outlined.css';
@@ -22,6 +23,7 @@ export default defineComponent({
   },
 });
 </script>
+
 <style scoped>
 .avatar {
   background: var(--cor-secundaria);

src/components/timeline/atomos/BoxData.vue

@@ -1,6 +1,7 @@
 <template>
   <h3 class="boxData padrao" :class="classes">{{ dataNumero }}</h3>
 </template>
+
 <script lang="ts">
 import { defineComponent, reactive, computed } from 'vue';
 

src/components/timeline/atomos/Destaque.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="destaqueEvento texto-pequeno">{{ texto }}</div>
 </template>
+
 <script lang="ts">
 import { defineComponent } from 'vue';
 
@@ -13,6 +14,7 @@ export default defineComponent({
   },
 });
 </script>
+
 <style scoped>
 .realizado .destaqueEvento,
 .cancelado .destaqueEvento,

src/components/timeline/atomos/Hora.vue

@@ -3,11 +3,13 @@
     {{ horas.getHours() }}:{{ horas.getMinutes().toString().padStart(2, '0') }}
   </div>
 </template>
+
 <script lang="ts">
 import { defineComponent, computed, ref } from 'vue';
 
 export default defineComponent({
   name: 'Hora',
+  components: {},
   props: {
     hora: {
       required: true,
@@ -21,7 +23,6 @@ export default defineComponent({
       },
     },
   },
-  components: {},
   setup(props) {
     const horas = ref(new Date(props.hora));
 
@@ -34,6 +35,7 @@ export default defineComponent({
   },
 });
 </script>
+
 <style scoped>
 .hora {
   color: var(--cor-texto);

src/components/timeline/atomos/IconeCategoria.vue

@@ -5,6 +5,7 @@
     </div>
   </div>
 </template>
+
 <script lang="ts">
 import { defineComponent, reactive, computed } from 'vue';
 import 'material-symbols/outlined.css';
@@ -49,6 +50,7 @@ export default defineComponent({
   },
 });
 </script>
+
 <style scoped>
 /* icone com categoria */
 

src/components/timeline/atomos/IconeStatus.vue

@@ -1,6 +1,7 @@
 <template>
   <div :class="classes" class="iconeStatus"></div>
 </template>
+
 <script lang="ts">
 import { defineComponent, reactive, computed, PropType } from 'vue';
 import 'material-symbols/outlined.css';
@@ -24,6 +25,7 @@ export default defineComponent({
   },
 });
 </script>
+
 <style scoped>
 /* icones */
 .iconeStatus {

src/components/timeline/atomos/SubtituloEvento.vue

@@ -1,6 +1,7 @@
 <template>
   <h4 class="subtitulo">{{ subtitulo }}</h4>
 </template>
+
 <script lang="ts">
 import { defineComponent } from 'vue';
 

src/components/timeline/atomos/TituloEvento.vue

@@ -1,6 +1,7 @@
 <template>
   <h3 class="titulo">{{ titulo }}</h3>
 </template>
+
 <script lang="ts">
 import { defineComponent } from 'vue';
 

src/components/timeline/moleculas/AreaSalvamento.stories.ts

@@ -10,7 +10,7 @@ export default {
   },
   argTypes: {},
 } as Meta<typeof AreaSalvamento>;
-const Template: StoryFn<typeof AreaSalvamento> = (args) => ({
+const Template: StoryFn<typeof AreaSalvamento> = (_args) => ({
   components: { AreaSalvamento },
   setup() {
     const salvarClick = () => {

src/components/timeline/moleculas/AreaSalvamento.vue

@@ -28,8 +28,8 @@ export default defineComponent({
 
   components: { Botao },
   emits: {
-    salvarClick: (mouseEvent: MouseEvent) => true,
-    cancelarClick: (mouseEvent: MouseEvent) => true,
+    salvarClick: (_mouseEvent: MouseEvent) => true,
+    cancelarClick: (_mouseEvent: MouseEvent) => true,
   },
 
   setup(props, { emit }) {

src/components/timeline/moleculas/BotaoStatus.vue

@@ -1,5 +1,5 @@
 <template>
-  <Botao :aparencia="aparencia" :class="classes" @click="emitirClick" data-testid="botao-status">
+  <Botao :aparencia="aparencia" :class="classes" data-testid="botao-status" @click="emitirClick">
     <IconeStatus class="icone" :status="status" /> {{ status }}
   </Botao>
 </template>
@@ -12,8 +12,8 @@ import Botao, { Aparencia } from './Botao.vue';
 import IconeStatus from '../atomos/IconeStatus.vue';
 
 export default defineComponent({
-  components: { Botao, IconeStatus },
   name: 'BotaoStatus',
+  components: { Botao, IconeStatus },
   props: {
     aparencia: {
       type: String as PropType<Aparencia>,
@@ -24,7 +24,7 @@ export default defineComponent({
     },
   },
   emits: {
-    click: (mouseEvent: MouseEvent) => true,
+    click: (_mouseEvent: MouseEvent) => true,
   },
   setup(props, { emit }) {
     props = reactive(props);

src/components/timeline/moleculas/CabecalhoEventoDetalhado.vue

@@ -60,8 +60,8 @@ import IconeCategoria from '../atomos/IconeCategoria.vue';
 import Hora from '../atomos/Hora.vue';
 
 export default defineComponent({
-  components: { Botao, PerfilTimeline, IconeCategoria, Hora },
   name: 'CabecalhoEventoDetalhado',
+  components: { Botao, PerfilTimeline, IconeCategoria, Hora },
   props: {
     perfil: {
       required: true,

src/components/timeline/moleculas/DescricaoEvento.vue

@@ -4,13 +4,15 @@
     <SubtituloEvento v-if="subtitulo" :subtitulo="subtitulo" />
   </div>
 </template>
+
 <script lang="ts">
 import { defineComponent } from 'vue';
 import SubtituloEvento from '../atomos/SubtituloEvento.vue';
 import TituloEvento from '../atomos/TituloEvento.vue';
 
 export default defineComponent({
   name: 'Descrição Evento',
+  components: { TituloEvento, SubtituloEvento },
   props: {
     titulo: {
       required: true,
@@ -21,7 +23,6 @@ export default defineComponent({
       type: String,
     },
   },
-  components: { TituloEvento, SubtituloEvento },
 });
 </script>
 

src/components/timeline/moleculas/EventoTimeline.vue

@@ -12,6 +12,7 @@
     <Destaque :texto="textoDestaque" />
   </article>
 </template>
+
 <script lang="ts">
 import { defineComponent, computed, PropType } from 'vue';
 import IconeCategoria from '../atomos/IconeCategoria.vue';
@@ -23,6 +24,13 @@ import { Categoria, Status, Criticidade } from '../type';
 
 export default defineComponent({
   name: 'Evento Timeline',
+  components: {
+    IconeStatus,
+    IconeCategoria,
+    HoraEvento,
+    DescricaoEvento,
+    Destaque,
+  },
   props: {
     status: {
       required: true,
@@ -67,13 +75,6 @@ export default defineComponent({
       default: true,
     },
   },
-  components: {
-    IconeStatus,
-    IconeCategoria,
-    HoraEvento,
-    DescricaoEvento,
-    Destaque,
-  },
   emits: {
     click: (mouseEvent: MouseEvent) => true,
   },
@@ -94,6 +95,7 @@ export default defineComponent({
   },
 });
 </script>
+
 <style>
 /* BOX DO EVENTO */
 

src/components/timeline/moleculas/HoraEvento.vue

@@ -10,12 +10,14 @@
     </div>
   </div>
 </template>
+
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
 import Hora from '../atomos/Hora.vue';
 
 export default defineComponent({
   name: 'Hora Evento',
+  components: { Hora },
   props: {
     horaPrevista: {
       type: Date,
@@ -26,9 +28,9 @@ export default defineComponent({
       type: Date as PropType<Date | null>,
     },
   },
-  components: { Hora },
 });
 </script>
+
 <style scoped>
 .realizado .horaEvento,
 .cancelado .horaEvento,

src/components/timeline/moleculas/Observacoes.vue

@@ -4,8 +4,8 @@
     <ul class="lista-obs">
       <li
         v-for="(item, index) of observacoes"
-        :data-testid="`observacao-${index}`"
         :key="index"
+        :data-testid="`observacao-${index}`"
         class="lista-item"
       >
         <p class="texto">{{ item.mensagem }}</p>
@@ -35,8 +35,8 @@ import Botao from './Botao.vue';
 import { Observacao } from '../typeDetalhado';
 
 export default defineComponent({
-  components: { Botao },
   name: 'Observacoes',
+  components: { Botao },
   props: {
     tituloBotao: {
       type: String,

src/components/timeline/moleculas/SeparadorPeriodo.vue

@@ -16,14 +16,14 @@ import BoxData from '../atomos/BoxData.vue';
 
 export default defineComponent({
   name: 'SeparadorPeriodo',
+  components: { BoxData },
   props: {
     dataSeparador: {
       required: true,
       type: Date,
     },
   },
-  components: { BoxData },
-  setup(props) {
+  setup() {
     const arrayMes = new Array(12);
     arrayMes[0] = 'Janeiro';
     arrayMes[1] = 'Fevereiro';

src/components/timeline/moleculas/StatusEvento.vue

@@ -18,8 +18,8 @@ import { Aparencia } from './Botao.vue';
 import { Status } from '../type';
 
 export default defineComponent({
-  components: { BotaoStatus },
   name: 'StatusEvento',
+  components: { BotaoStatus },
   props: {
     aparencia: {
       type: String as PropType<Aparencia>,

src/components/timeline/moleculas/Topo.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="topo" :class="classes" data-testid="topo">
     <div class="conteudoTitulo">
-      <button class="btn_voltar" @click="emitirVoltarClick" data-testid="botao-voltar">
+      <button class="btn_voltar" data-testid="botao-voltar" @click="emitirVoltarClick">
         <span class="material-symbols-outlined"> arrow_back </span>
       </button>
       <h3 class="titulo">{{ titulo }}</h3>

src/components/timeline/organismos/EditarEvento.stories.ts

@@ -27,7 +27,7 @@ const Template: StoryFn<typeof EditarEvento> = (args) => ({
 export const Padrao = Template.bind({});
 Padrao.args = {
   salvarVisivel: true,
-  aoClicar: (evento) => alert('Olá!'),
+  aoClicar: (_evento) => alert('Olá!'),
 };
 
 export const SalvarInvisivel = Template.bind({});