Issue/#57 update code formats

.prettierrc.json

@@ -1,8 +1,11 @@
 {
   "$schema": "https://json.schemastore.org/prettierrc",
-  "semi": false,
+  "semi": true,
   "tabWidth": 2,
   "singleQuote": true,
   "printWidth": 100,
-  "trailingComma": "none"
+  "trailingComma": "all",
+  "experimentalTernaries": true,
+  "bracketSameLine": true,
+  "singleAttributePerLine": true
 }

.storybook/main.ts

@@ -1,52 +1,61 @@
-import fs from "node:fs";
+import fs from 'node:fs';
 import path from 'node:path';
-import {fileURLToPath} from "url";
+import { fileURLToPath } from 'url';
 
-//storybook-tailwind-dark-mode
+// storybook-tailwind-dark-mode
 const config = {
-  stories: [
-    "../stories/**/*.stories.mdx",
-    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
-    "../src/**/**/**/*.stories.@(js|jsx|ts|tsx)",
-  ],
-
   addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
+    '@storybook/addon-essentials',
+    '@storybook/addon-links',
+    '@storybook/addon-interactions',
   ],
 
-  framework: {
-    name: "@storybook/vue3-vite",
-    options: {
-    }
-  },
-
   env: (config) => {
-    const iconComponentFolder = path.resolve(__dirname, '../src/shared/ui/icon-svg/icon-svg-originals');
-    const allIconNamesList = !fs.existsSync(iconComponentFolder)
-      ? []
-      : fs
-        .readdirSync(iconComponentFolder, { withFileTypes: true })
+    const iconComponentFolder = path.resolve(
+      __dirname,
+      '../src/shared/ui/icon-svg/icon-svg-originals',
+    );
+    const allIconNamesList = fs.existsSync(iconComponentFolder)
+      ? fs
+        .readdirSync(
+          iconComponentFolder,
+          { withFileTypes: true },
+        )
         .filter(Boolean)
         .filter((dirent) => dirent.isFile())
         .map((dirent) => path.parse(dirent.name).name)
         .filter((name) => !String(name).includes('IconSvg'))
-        .join();
+        .join()
+      : [];
 
     return {
       ...config,
       STORYBOOK_ICON_SVG_NAMES: allIconNamesList,
-    }},
+    };
+  },
+
+  framework: {
+    name: '@storybook/vue3-vite',
+    options: {},
+  },
+
+  stories: [
+    '../stories/**/*.stories.mdx',
+    '../stories/**/*.stories.@(js|jsx|ts|tsx)',
+    '../src/**/**/**/*.stories.@(js|jsx|ts|tsx)',
+  ],
 
   viteFinal: async (config) => {
     config.resolve.alias = {
       ...config.resolve.alias,
-      '@/src': fileURLToPath(new URL('../src', import.meta.url)),
-    }
+      '@/src': fileURLToPath(new URL(
+        '../src',
+        import.meta.url,
+      )),
+    };
 
     return config;
-  }
+  },
 };
 
 export default config;

.storybook/preview.ts

@@ -1,41 +1,43 @@
-import {createPinia} from 'pinia';
+import type { Preview } from '@storybook/vue3';
 import { setup } from '@storybook/vue3';
-import "../src/assets/index.css";
-import "../src/assets/vendor";
-import "./stories.css"
-import { SfdumpWrap } from '../src/shared/lib/vendor/sf-dumper/dumper'
-import 'tailwindcss/tailwind.css'
-import type { Preview } from '@storybook/vue3'
+import { createPinia } from 'pinia';
+import '../src/assets/index.css';
+import '../src/assets/vendor';
+import './stories.css';
+import 'tailwindcss/tailwind.css';
 
 const preview: Preview = {
   decorators: [
     (_, { parameters, globals }) => {
       const html = window?.document?.querySelector('html');
 
       if (html) {
-        const themeClassNames = (parameters?.backgrounds?.values || []).map(({ class: className }) => className)
+        const themeClassNames = (parameters?.backgrounds?.values || [])
+          .map(({ class: className }) => className);
 
         const oldClasses = html.classList.value
           .trim()
           .split(' ')
           .filter((className) => themeClassNames.includes(className))
-          .filter(Boolean)
-        const newClass = (parameters?.backgrounds?.values || []).find(({ value }) => globals?.backgrounds?.value === value)?.class
+          .filter(Boolean);
+
+        const newClass = (parameters?.backgrounds?.values || [])
+          .find(({ value }) => globals?.backgrounds?.value === value)?.class;
 
         if (newClass) {
           if (oldClasses.length) {
-            html.classList.remove(...oldClasses)
+            html.classList.remove(...oldClasses);
           }
 
-          html.classList.add(newClass)
+          html.classList.add(newClass);
         }
       }
 
       return { template: '<story/>' };
-    }
+    },
   ],
   parameters: {
-    actions: {argTypesRegex: "^on[A-Z].*"},
+    actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
       matchers: {
         color: /(background|color)$/i,
@@ -48,23 +50,22 @@ const preview: Preview = {
         {
           name: 'light',
           value: '#ffffff',
-          class: 'light'
+          class: 'light',
         },
         {
           name: 'dark',
           value: '#333333',
-          class: 'dark'
+          class: 'dark',
         },
       ],
     },
   },
 };
 
-
 const pinia = createPinia();
 
 setup((app) => {
-  app.use(pinia)
-})
+  app.use(pinia);
+});
 
 export default preview;

.storybook/stories.css

@@ -4,13 +4,13 @@ html {
 
 html:before {
   display: block;
-  content: "";
+  content: '';
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAK0lEQVQ4y2P8//8/A25w7949PLJMDBSAUc0jQzML/jSkpKQ0GmCjminRDADJNQjBr5nbigAAAABJRU5ErkJggg==");
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAK0lEQVQ4y2P8//8/A25w7949PLJMDBSAUc0jQzML/jSkpKQ0GmCjminRDADJNQjBr5nbigAAAABJRU5ErkJggg==');
   background-repeat: repeat;
   background-position: 0 0;
   opacity: 0.2;

README.md

@@ -14,7 +14,6 @@ Buggregator is a comprehensive, lightweight server designed for debugging applic
 
 ![storybook](https://github.com/buggregator/frontend/assets/773481/4a7166ee-2f3e-4fda-b7c5-ede3b2601abc)
 
-
 ## Documentation, Installation and Usage Instructions
 
 See the [documentation](https://docs.buggregator.dev/) for detailed installation and usage instructions.

cypress.config.ts

@@ -1,8 +1,8 @@
-import { defineConfig } from 'cypress'
+import { defineConfig } from 'cypress';
 
 export default defineConfig({
   e2e: {
     specPattern: 'cypress/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}',
-    baseUrl: 'http://localhost:4173'
-  }
-})
+    baseUrl: 'http://localhost:4173',
+  },
+});

eslint-rules/eslint-base-rules.js

@@ -0,0 +1,95 @@
+export default {
+  camelcase: [
+    'error',
+    {
+      ignoreDestructuring: false,
+      properties: 'never',
+    },
+  ],
+  'capitalized-comments': [
+    'off',
+    'never',
+    {
+      block: {
+        ignoreConsecutiveComments: true,
+        ignoreInlineComments: true,
+        ignorePattern: '.*',
+      },
+      line: {
+        ignoreConsecutiveComments: true,
+        ignoreInlineComments: true,
+        ignorePattern: '.*',
+      },
+    },
+  ],
+  'func-style': ['error', 'expression'],
+  'id-length': 'off',
+  'new-parens': 'error',
+  'newline-after-var': ['error', 'always'],
+  'no-array-constructor': 'error',
+  'no-bitwise': 'error',
+  'no-continue': 'error',
+  'no-lonely-if': 'error',
+  'no-multi-assign': ['error'],
+  'no-multi-spaces': [
+    'error',
+    {
+      ignoreEOLComments: false,
+    },
+  ],
+  'no-negated-condition': 'error',
+  'no-nested-ternary': 'error',
+  'no-new-object': 'error',
+  'no-plusplus': 'error',
+  'no-restricted-syntax': [
+    'error',
+    {
+      message:
+        'for..in loops iterate over the entire prototype chain, which is virtually never what you want. Use Object.{keys,values,entries}, and iterate over the resulting array.',
+      selector: 'ForInStatement',
+    },
+    {
+      message:
+        'iterators/generators require regenerator-runtime, which is too heavyweight for this guide to allow them. Separately, loops should be avoided in favor of array iterations.',
+      selector: 'ForOfStatement',
+    },
+    {
+      message:
+        'Labels are a form of GOTO; using them makes code confusing and hard to maintain and understand.',
+      selector: 'LabeledStatement',
+    },
+    {
+      message:
+        '`with` is disallowed in strict mode because it makes code impossible to predict and optimize.',
+      selector: 'WithStatement',
+    },
+  ],
+  'no-spaced-func': 'error',
+  'no-tabs': 'error',
+  'no-underscore-dangle': [
+    'error',
+    {
+      allow: [],
+      allowAfterSuper: false,
+      allowAfterThis: false,
+      enforceInMethodNames: true,
+    },
+  ],
+  'no-unneeded-ternary': ['error'],
+  'no-whitespace-before-property': 'error',
+  'one-var': ['error', 'never'],
+  'operator-assignment': ['error', 'always'],
+  'prefer-exponentiation-operator': 'error',
+  'prefer-object-spread': 'error',
+  'sort-keys': [
+    'error',
+    'asc',
+    {
+      caseSensitive: false,
+      natural: true,
+      minKeys: 5,
+    },
+  ],
+  'sort-vars': 'error',
+  'unicode-bom': ['error', 'never'],
+};