chore(lint): switched to a better lint config

2 files changed, 41 insertions, 39 deletions

diff --git a/src/tools/json-diff/diff-viewer/diff-viewer.models.tsx b/src/tools/json-diff/diff-viewer/diff-viewer.models.tsx
index 5a19feb..d2117df 100644
--- a/src/tools/json-diff/diff-viewer/diff-viewer.models.tsx
+++ b/src/tools/json-diff/diff-viewer/diff-viewer.models.tsx
@@ -1,16 +1,16 @@
 import _ from 'lodash';
+import type { ArrayDifference, Difference, ObjectDifference } from '../json-diff.types';
 import { useCopy } from '@/composable/copy';
-import type { Difference, ArrayDifference, ObjectDifference } from '../json-diff.types';
 
-export const DiffRootViewer = ({ diff }: { diff: Difference }) => {
+export function DiffRootViewer({ diff }: { diff: Difference }) {
   return (
     <div class={'diffs-viewer'}>
       <ul>{DiffViewer({ diff, showKeys: false })}</ul>
     </div>
   );
-};
+}
 
-const DiffViewer = ({ diff, showKeys = true }: { diff: Difference; showKeys?: boolean }) => {
+function DiffViewer({ diff, showKeys = true }: { diff: Difference; showKeys?: boolean }) {
   const { type, status } = diff;
 
   if (status === 'updated') {
@@ -26,9 +26,9 @@ const DiffViewer = ({ diff, showKeys = true }: { diff: Difference; showKeys?: bo
   }
 
   return LineDiffViewer({ diff, showKeys });
-};
+}
 
-const LineDiffViewer = ({ diff, showKeys }: { diff: Difference; showKeys?: boolean }) => {
+function LineDiffViewer({ diff, showKeys }: { diff: Difference; showKeys?: boolean }) {
   const { value, key, status, oldValue } = diff;
   const valueToDisplay = status === 'removed' ? oldValue : value;
 
@@ -46,9 +46,9 @@ const LineDiffViewer = ({ diff, showKeys }: { diff: Difference; showKeys?: boole
       ,
     </li>
   );
-};
+}
 
-const ComparisonViewer = ({ diff, showKeys }: { diff: Difference; showKeys?: boolean }) => {
+function ComparisonViewer({ diff, showKeys }: { diff: Difference; showKeys?: boolean }) {
   const { value, key, oldValue } = diff;
 
   return (
@@ -63,21 +63,21 @@ const ComparisonViewer = ({ diff, showKeys }: { diff: Difference; showKeys?: boo
       {Value({ value, status: 'added' })},
     </li>
   );
-};
+}
 
-const ChildrenViewer = ({
+function ChildrenViewer({
   diff,
   openTag,
   closeTag,
   showKeys,
   showChildrenKeys = true,
 }: {
-  diff: ArrayDifference | ObjectDifference;
-  showKeys: boolean;
-  showChildrenKeys?: boolean;
-  openTag: string;
-  closeTag: string;
-}) => {
+  diff: ArrayDifference | ObjectDifference
+  showKeys: boolean
+  showChildrenKeys?: boolean
+  openTag: string
+  closeTag: string
+}) {
   const { children, key, status, type } = diff;
 
   return (
@@ -91,12 +91,12 @@ const ChildrenViewer = ({
         )}
 
         {openTag}
-        {children.length > 0 && <ul>{children.map((diff) => DiffViewer({ diff, showKeys: showChildrenKeys }))}</ul>}
-        {closeTag + ','}
+        {children.length > 0 && <ul>{children.map(diff => DiffViewer({ diff, showKeys: showChildrenKeys }))}</ul>}
+        {`${closeTag},`}
       </div>
     </li>
   );
-};
+}
 
 function formatValue(value: unknown) {
   if (_.isNull(value)) {
@@ -106,7 +106,7 @@ function formatValue(value: unknown) {
   return JSON.stringify(value);
 }
 
-const Value = ({ value, status }: { value: unknown; status: string }) => {
+function Value({ value, status }: { value: unknown; status: string }) {
   const formatedValue = formatValue(value);
 
   const { copy } = useCopy({ source: formatedValue });
@@ -116,4 +116,4 @@ const Value = ({ value, status }: { value: unknown; status: string }) => {
       {formatedValue}
     </span>
   );
-};
+}
diff --git a/src/tools/json-diff/diff-viewer/diff-viewer.vue b/src/tools/json-diff/diff-viewer/diff-viewer.vue
index 8d17e6b..08c4784 100644
--- a/src/tools/json-diff/diff-viewer/diff-viewer.vue
+++ b/src/tools/json-diff/diff-viewer/diff-viewer.vue
@@ -1,26 +1,11 @@
-<template>
-  <div v-if="showResults">
-    <div flex justify-center>
-      <n-form-item label="Only show differences" label-placement="left">
-        <n-switch v-model:value="onlyShowDifferences" />
-      </n-form-item>
-    </div>
-
-    <c-card data-test-id="diff-result">
-      <n-text v-if="jsonAreTheSame" depth="3" block text-center italic> The provided JSONs are the same </n-text>
-      <diff-root-viewer v-else :diff="result" />
-    </c-card>
-  </div>
-</template>
-
 <script lang="ts" setup>
-import { useAppTheme } from '@/ui/theme/themes';
 import _ from 'lodash';
-import { DiffRootViewer } from './diff-viewer.models';
 import { diff } from '../json-diff.models';
+import { DiffRootViewer } from './diff-viewer.models';
+import { useAppTheme } from '@/ui/theme/themes';
 
-const onlyShowDifferences = ref(false);
 const props = defineProps<{ leftJson: unknown; rightJson: unknown }>();
+const onlyShowDifferences = ref(false);
 const { leftJson, rightJson } = toRefs(props);
 const appTheme = useAppTheme();
 
@@ -32,6 +17,23 @@ const jsonAreTheSame = computed(() => _.isEqual(leftJson.value, rightJson.value)
 const showResults = computed(() => !_.isUndefined(leftJson.value) && !_.isUndefined(rightJson.value));
 </script>
 
+<template>
+  <div v-if="showResults">
+    <div flex justify-center>
+      <n-form-item label="Only show differences" label-placement="left">
+        <n-switch v-model:value="onlyShowDifferences" />
+      </n-form-item>
+    </div>
+
+    <c-card data-test-id="diff-result">
+      <n-text v-if="jsonAreTheSame" depth="3" block text-center italic>
+        The provided JSONs are the same
+      </n-text>
+      <DiffRootViewer v-else :diff="result" />
+    </c-card>
+  </div>
+</template>
+
 <style lang="less" scoped>
 ::v-deep(.diffs-viewer) {
   color: v-bind('appTheme.text.mutedColor');