From 52df553294c9b8fd7cb4662eab2538e2a466ba54 Mon Sep 17 00:00:00 2001
From: Adrian Ortiz <desarrollador3@en-trega.com>
Date: Sat, 7 Sep 2024 11:36:53 -0600
Subject: [PATCH 01/12] feature: add border generator module.

---
 .../border-generator.e2e.spec.ts              |  15 ++
 .../border-generator.service.test.ts          |   6 +
 .../border-generator.service.ts               |  15 ++
 .../border-generator/border-generator.vue     | 214 ++++++++++++++++++
 src/tools/border-generator/index.ts           |  13 ++
 src/tools/index.ts                            |  27 ++-
 6 files changed, 287 insertions(+), 3 deletions(-)
 create mode 100644 src/tools/border-generator/border-generator.e2e.spec.ts
 create mode 100644 src/tools/border-generator/border-generator.service.test.ts
 create mode 100644 src/tools/border-generator/border-generator.service.ts
 create mode 100644 src/tools/border-generator/border-generator.vue
 create mode 100644 src/tools/border-generator/index.ts

diff --git a/src/tools/border-generator/border-generator.e2e.spec.ts b/src/tools/border-generator/border-generator.e2e.spec.ts
new file mode 100644
index 00000000..8c09252f
--- /dev/null
+++ b/src/tools/border-generator/border-generator.e2e.spec.ts
@@ -0,0 +1,15 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Tool - Border generator', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/border-generator');
+  });
+
+  test('Has correct title', async ({ page }) => {
+    await expect(page).toHaveTitle('Border generator - IT Tools');
+  });
+
+  test('', async ({ page }) => {
+
+  });
+});
\ No newline at end of file
diff --git a/src/tools/border-generator/border-generator.service.test.ts b/src/tools/border-generator/border-generator.service.test.ts
new file mode 100644
index 00000000..6bcfc44c
--- /dev/null
+++ b/src/tools/border-generator/border-generator.service.test.ts
@@ -0,0 +1,6 @@
+import { expect, describe, it } from 'vitest';
+// import { } from './border-generator.service';
+//
+// describe('border-generator', () => {
+//
+// })
\ No newline at end of file
diff --git a/src/tools/border-generator/border-generator.service.ts b/src/tools/border-generator/border-generator.service.ts
new file mode 100644
index 00000000..2ab77ee2
--- /dev/null
+++ b/src/tools/border-generator/border-generator.service.ts
@@ -0,0 +1,15 @@
+export interface Border {
+  label: string;
+  value: number;
+  max: number;
+}
+
+export interface Borders {
+  [key: string]: Border;
+}
+
+// Asegúrate de que esta función esté correctamente exportada
+export function generateCSSOutput(borders: Borders, borderWidth: number, borderStyle: string, unit: string): string {
+  const { topLeft, topRight, bottomRight, bottomLeft } = borders;
+  return `border: ${borderWidth}px ${borderStyle} #000000; border-radius: ${topLeft.value}${unit} ${topRight.value}${unit} ${bottomRight.value}${unit} ${bottomLeft.value}${unit};`;
+}
diff --git a/src/tools/border-generator/border-generator.vue b/src/tools/border-generator/border-generator.vue
new file mode 100644
index 00000000..f14d46d2
--- /dev/null
+++ b/src/tools/border-generator/border-generator.vue
@@ -0,0 +1,214 @@
+<template>
+  <div class="container">
+    <div class="square" :style="styleObject"></div>
+
+    <n-card title="Border Radius and Style Editor" class="controls">
+      <n-form>
+        <n-form-item label="Units">
+          <n-select v-model:value="unit" :options="unitOptions" @update:value="updateCSSOutput" />
+        </n-form-item>
+
+        <div class="radius-controls">
+          <n-form-item label="Top Left" class="half-slider">
+            <n-slider
+              :min="0"
+              :max="borders.topLeft.max"
+              v-model:value="borders.topLeft.value"
+              @update:value="updateCSSOutput"
+              :step="1"
+            />
+            <span>{{ borders.topLeft.value + unit }}</span>
+          </n-form-item>
+          <n-form-item label="Top Right" class="half-slider">
+            <n-slider
+              :min="0"
+              :max="borders.topRight.max"
+              v-model:value="borders.topRight.value"
+              @update:value="updateCSSOutput"
+              :step="1"
+            />
+            <span>{{ borders.topRight.value + unit }}</span>
+          </n-form-item>
+        </div>
+        <div class="radius-controls">
+          <n-form-item label="Bottom Left" class="half-slider">
+            <n-slider
+              :min="0"
+              :max="borders.bottomLeft.max"
+              v-model:value="borders.bottomLeft.value"
+              @update:value="updateCSSOutput"
+              :step="1"
+            />
+            <span>{{ borders.bottomLeft.value + unit }}</span>
+          </n-form-item>
+          <n-form-item label="Bottom Right" class="half-slider">
+            <n-slider
+              :min="0"
+              :max="borders.bottomRight.max"
+              v-model:value="borders.bottomRight.value"
+              @update:value="updateCSSOutput"
+              :step="1"
+            />
+            <span>{{ borders.bottomRight.value + unit }}</span>
+          </n-form-item>
+        </div>
+        <div class="border-controls">
+          <n-form-item label="Border Width" class="border-width-slider">
+            <n-slider :min="0" :max="100" v-model:value="borderWidth" @update:value="updateCSSOutput" :step="1" />
+            <span>{{ borderWidth + 'px' }}</span>
+          </n-form-item>
+          <n-form-item label="Border Style" class="border-style-select">
+            <n-select v-model:value="borderStyle" :options="borderStyles" @update:value="updateCSSOutput" />
+          </n-form-item>
+        </div>
+
+        <n-form-item label="Border Color">
+          <n-color-picker v-model:value="borderColor" @update:value="updateCSSOutput" />
+        </n-form-item>
+
+        <n-form-item label="CSS Properties">
+          <TextareaCopyable :value="cssOutput" language="css" />
+        </n-form-item>
+      </n-form>
+    </n-card>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, computed } from 'vue';
+import { NSlider, NForm, NFormItem, NSelect, NCard, NColorPicker } from 'naive-ui';
+import TextareaCopyable from '@/components/TextareaCopyable.vue';
+import { Borders } from './border-radius-viewer.service';
+
+export default defineComponent({
+  name: 'BorderRadiusViewer',
+  components: {
+    NSlider,
+    NForm,
+    NFormItem,
+    NSelect,
+    NCard,
+    NColorPicker,
+    TextareaCopyable,
+  },
+  setup() {
+    const borders = ref<Borders>({
+      topLeft: { label: 'Top Left', value: 0, max: 100 },
+      topRight: { label: 'Top Right', value: 0, max: 100 },
+      bottomLeft: { label: 'Bottom Left', value: 0, max: 100 },
+      bottomRight: { label: 'Bottom Right', value: 0, max: 100 },
+    });
+    const unit = ref('px');
+    const borderWidth = ref<number>(0);
+    const borderStyle = ref('solid');
+    const borderColor = ref('#000000');
+    const unitOptions = [
+      { label: 'Pixels (px)', value: 'px' },
+      { label: 'Percentage (%)', value: '%' },
+    ];
+    const borderStyles = [
+      { label: 'Solid', value: 'solid' },
+      { label: 'Dashed', value: 'dashed' },
+      { label: 'Dotted', value: 'dotted' },
+      { label: 'Double', value: 'double' },
+      { label: 'Groove', value: 'groove' },
+      { label: 'Ridge', value: 'ridge' },
+      { label: 'Inset', value: 'inset' },
+      { label: 'Outset', value: 'outset' },
+      { label: 'None', value: 'none' },
+    ];
+
+    const styleObject = computed(() => ({
+      border: `${borderWidth.value}px ${borderStyle.value} ${borderColor.value}`,
+      borderRadius: `${borders.value.topLeft.value}${unit.value} ${borders.value.topRight.value}${unit.value} ${borders.value.bottomRight.value}${unit.value} ${borders.value.bottomLeft.value}${unit.value}`,
+    }));
+
+    const cssOutput = computed(
+      () =>
+        `border: ${borderWidth.value}px ${borderStyle.value} ${borderColor.value};\nborder-radius: ${borders.value.topLeft.value}${unit.value} ${borders.value.topRight.value}${unit.value} ${borders.value.bottomRight.value}${unit.value} ${borders.value.bottomLeft.value}${unit.value};`,
+    );
+
+    function updateCSSOutput() {
+      // Forces update computed properties
+    }
+
+    return {
+      borders,
+      unit,
+      borderWidth,
+      borderStyle,
+      borderColor,
+      unitOptions,
+      borderStyles,
+      cssOutput,
+      updateCSSOutput,
+      styleObject,
+    };
+  },
+});
+</script>
+<style scoped>
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+}
+
+.square {
+  width: 250px;
+  height: 250px;
+  background-color: #f3f3f3;
+}
+
+.controls {
+  width: 100%;
+}
+
+.radius-controls,
+.border-controls {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  gap: 20px;
+}
+
+.half-slider,
+.border-width-slider {
+  position: relative;
+  padding: 10px 0;
+  width: 60%;
+}
+
+.half-slider span,
+.border-width-slider span {
+  position: absolute;
+  right: 0;
+  top: 30px;
+  background-color: #fff;
+  padding: 2px 6px;
+  border-radius: 5px;
+  font-size: 0.9em;
+  color: #333;
+}
+
+.border-style-select {
+  width: 30%;
+}
+
+n-slider {
+  width: calc(100% - 60px);
+}
+
+.controls .n-form-item__label {
+  min-width: 70px;
+  text-align: right;
+}
+
+n-select,
+n-color-picker {
+  width: 100%;
+}
+</style>
+
diff --git a/src/tools/border-generator/index.ts b/src/tools/border-generator/index.ts
new file mode 100644
index 00000000..dcb371c8
--- /dev/null
+++ b/src/tools/border-generator/index.ts
@@ -0,0 +1,13 @@
+import { Square } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Border Generator',
+  path: '/border-radius-viewer',
+  description: 'Generate a complete CSS border properties.',
+  keywords: ['border', 'radius', 'viewer'],
+  component: () => import('./border-radius-viewer.vue'),
+  icon: Square,
+  createdAt: new Date('2024-09-06'),
+});
+
diff --git a/src/tools/index.ts b/src/tools/index.ts
index c9003fe8..c0de1f7c 100644
--- a/src/tools/index.ts
+++ b/src/tools/index.ts
@@ -1,6 +1,7 @@
 import { tool as base64FileConverter } from './base64-file-converter';
 import { tool as base64StringConverter } from './base64-string-converter';
 import { tool as basicAuthGenerator } from './basic-auth-generator';
+import { tool as borderGenerator } from './border-generator';
 import { tool as emailNormalizer } from './email-normalizer';
 
 import { tool as asciiTextDrawer } from './ascii-text-drawer';
@@ -89,7 +90,19 @@ import { tool as yamlViewer } from './yaml-viewer';
 export const toolsByCategory: ToolCategory[] = [
   {
     name: 'Crypto',
-    components: [tokenGenerator, hashText, bcrypt, uuidGenerator, ulidGenerator, cypher, bip39, hmacGenerator, rsaKeyPairGenerator, passwordStrengthAnalyser, pdfSignatureChecker],
+    components: [
+      tokenGenerator,
+      hashText,
+      bcrypt,
+      uuidGenerator,
+      ulidGenerator,
+      cypher,
+      bip39,
+      hmacGenerator,
+      rsaKeyPairGenerator,
+      passwordStrengthAnalyser,
+      pdfSignatureChecker,
+    ],
   },
   {
     name: 'Converter',
@@ -135,6 +148,7 @@ export const toolsByCategory: ToolCategory[] = [
       httpStatusCodes,
       jsonDiff,
       safelinkDecoder,
+      borderGenerator,
     ],
   },
   {
@@ -160,7 +174,14 @@ export const toolsByCategory: ToolCategory[] = [
   },
   {
     name: 'Network',
-    components: [ipv4SubnetCalculator, ipv4AddressConverter, ipv4RangeExpander, macAddressLookup, macAddressGenerator, ipv6UlaGenerator],
+    components: [
+      ipv4SubnetCalculator,
+      ipv4AddressConverter,
+      ipv4RangeExpander,
+      macAddressLookup,
+      macAddressGenerator,
+      ipv6UlaGenerator,
+    ],
   },
   {
     name: 'Math',
@@ -190,5 +211,5 @@ export const toolsByCategory: ToolCategory[] = [
 
 export const tools = toolsByCategory.flatMap(({ components }) => components);
 export const toolsWithCategory = toolsByCategory.flatMap(({ components, name }) =>
-  components.map(tool => ({ category: name, ...tool })),
+  components.map((tool) => ({ category: name, ...tool })),
 );

From 4e1eae9607541375e34078d44c2cc397a42835fc Mon Sep 17 00:00:00 2001
From: Adrian Ortiz <desarrollador3@en-trega.com>
Date: Sat, 7 Sep 2024 12:01:14 -0600
Subject: [PATCH 02/12] fix

---
 src/tools/border-generator/index.ts | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/tools/border-generator/index.ts b/src/tools/border-generator/index.ts
index dcb371c8..97a95e45 100644
--- a/src/tools/border-generator/index.ts
+++ b/src/tools/border-generator/index.ts
@@ -3,11 +3,10 @@ import { defineTool } from '../tool';
 
 export const tool = defineTool({
   name: 'Border Generator',
-  path: '/border-radius-viewer',
+  path: '/border-generator',
   description: 'Generate a complete CSS border properties.',
-  keywords: ['border', 'radius', 'viewer'],
-  component: () => import('./border-radius-viewer.vue'),
+  keywords: ['border', 'generator', 'css'],
+  component: () => import('./border-generator.vue'),
   icon: Square,
   createdAt: new Date('2024-09-06'),
 });
-

From 45a87ce1571f23afa16070f485c8b2abe218f367 Mon Sep 17 00:00:00 2001
From: Adrian Ortiz <desarrollador3@en-trega.com>
Date: Sat, 7 Sep 2024 12:04:50 -0600
Subject: [PATCH 03/12] fix

---
 src/tools/border-generator/border-generator.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/tools/border-generator/border-generator.vue b/src/tools/border-generator/border-generator.vue
index f14d46d2..9fe836f2 100644
--- a/src/tools/border-generator/border-generator.vue
+++ b/src/tools/border-generator/border-generator.vue
@@ -78,7 +78,7 @@
 import { defineComponent, ref, computed } from 'vue';
 import { NSlider, NForm, NFormItem, NSelect, NCard, NColorPicker } from 'naive-ui';
 import TextareaCopyable from '@/components/TextareaCopyable.vue';
-import { Borders } from './border-radius-viewer.service';
+import { Borders } from './border-generator.service';
 
 export default defineComponent({
   name: 'BorderRadiusViewer',
@@ -211,4 +211,3 @@ n-color-picker {
   width: 100%;
 }
 </style>
-

From e540a82d98872fd244eebf4cca66161ccee676f8 Mon Sep 17 00:00:00 2001
From: Adrian Ortiz <desarrollador3@en-trega.com>
Date: Sat, 7 Sep 2024 12:32:51 -0600
Subject: [PATCH 04/12] fix

---
 .../border-generator.e2e.spec.ts              |   8 +-
 .../border-generator.service.test.ts          |   4 +-
 .../border-generator/border-generator.vue     | 156 +++++++++---------
 3 files changed, 82 insertions(+), 86 deletions(-)

diff --git a/src/tools/border-generator/border-generator.e2e.spec.ts b/src/tools/border-generator/border-generator.e2e.spec.ts
index 8c09252f..2e3bee70 100644
--- a/src/tools/border-generator/border-generator.e2e.spec.ts
+++ b/src/tools/border-generator/border-generator.e2e.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test';
+import { expect, test } from '@playwright/test';
 
 test.describe('Tool - Border generator', () => {
   test.beforeEach(async ({ page }) => {
@@ -8,8 +8,4 @@ test.describe('Tool - Border generator', () => {
   test('Has correct title', async ({ page }) => {
     await expect(page).toHaveTitle('Border generator - IT Tools');
   });
-
-  test('', async ({ page }) => {
-
-  });
-});
\ No newline at end of file
+});
diff --git a/src/tools/border-generator/border-generator.service.test.ts b/src/tools/border-generator/border-generator.service.test.ts
index 6bcfc44c..20c54344 100644
--- a/src/tools/border-generator/border-generator.service.test.ts
+++ b/src/tools/border-generator/border-generator.service.test.ts
@@ -1,6 +1,6 @@
-import { expect, describe, it } from 'vitest';
+// import { expect, describe, it } from 'vitest';
 // import { } from './border-generator.service';
 //
 // describe('border-generator', () => {
 //
-// })
\ No newline at end of file
+// })
diff --git a/src/tools/border-generator/border-generator.vue b/src/tools/border-generator/border-generator.vue
index 9fe836f2..c8181444 100644
--- a/src/tools/border-generator/border-generator.vue
+++ b/src/tools/border-generator/border-generator.vue
@@ -1,84 +1,9 @@
-<template>
-  <div class="container">
-    <div class="square" :style="styleObject"></div>
-
-    <n-card title="Border Radius and Style Editor" class="controls">
-      <n-form>
-        <n-form-item label="Units">
-          <n-select v-model:value="unit" :options="unitOptions" @update:value="updateCSSOutput" />
-        </n-form-item>
-
-        <div class="radius-controls">
-          <n-form-item label="Top Left" class="half-slider">
-            <n-slider
-              :min="0"
-              :max="borders.topLeft.max"
-              v-model:value="borders.topLeft.value"
-              @update:value="updateCSSOutput"
-              :step="1"
-            />
-            <span>{{ borders.topLeft.value + unit }}</span>
-          </n-form-item>
-          <n-form-item label="Top Right" class="half-slider">
-            <n-slider
-              :min="0"
-              :max="borders.topRight.max"
-              v-model:value="borders.topRight.value"
-              @update:value="updateCSSOutput"
-              :step="1"
-            />
-            <span>{{ borders.topRight.value + unit }}</span>
-          </n-form-item>
-        </div>
-        <div class="radius-controls">
-          <n-form-item label="Bottom Left" class="half-slider">
-            <n-slider
-              :min="0"
-              :max="borders.bottomLeft.max"
-              v-model:value="borders.bottomLeft.value"
-              @update:value="updateCSSOutput"
-              :step="1"
-            />
-            <span>{{ borders.bottomLeft.value + unit }}</span>
-          </n-form-item>
-          <n-form-item label="Bottom Right" class="half-slider">
-            <n-slider
-              :min="0"
-              :max="borders.bottomRight.max"
-              v-model:value="borders.bottomRight.value"
-              @update:value="updateCSSOutput"
-              :step="1"
-            />
-            <span>{{ borders.bottomRight.value + unit }}</span>
-          </n-form-item>
-        </div>
-        <div class="border-controls">
-          <n-form-item label="Border Width" class="border-width-slider">
-            <n-slider :min="0" :max="100" v-model:value="borderWidth" @update:value="updateCSSOutput" :step="1" />
-            <span>{{ borderWidth + 'px' }}</span>
-          </n-form-item>
-          <n-form-item label="Border Style" class="border-style-select">
-            <n-select v-model:value="borderStyle" :options="borderStyles" @update:value="updateCSSOutput" />
-          </n-form-item>
-        </div>
-
-        <n-form-item label="Border Color">
-          <n-color-picker v-model:value="borderColor" @update:value="updateCSSOutput" />
-        </n-form-item>
-
-        <n-form-item label="CSS Properties">
-          <TextareaCopyable :value="cssOutput" language="css" />
-        </n-form-item>
-      </n-form>
-    </n-card>
-  </div>
-</template>
-
 <script lang="ts">
 import { defineComponent, ref, computed } from 'vue';
 import { NSlider, NForm, NFormItem, NSelect, NCard, NColorPicker } from 'naive-ui';
 import TextareaCopyable from '@/components/TextareaCopyable.vue';
 import { Borders } from './border-generator.service';
+import { generateCSSOutput } from './border-generator.service';
 
 export default defineComponent({
   name: 'BorderRadiusViewer',
@@ -117,7 +42,6 @@ export default defineComponent({
       { label: 'Outset', value: 'outset' },
       { label: 'None', value: 'none' },
     ];
-
     const styleObject = computed(() => ({
       border: `${borderWidth.value}px ${borderStyle.value} ${borderColor.value}`,
       borderRadius: `${borders.value.topLeft.value}${unit.value} ${borders.value.topRight.value}${unit.value} ${borders.value.bottomRight.value}${unit.value} ${borders.value.bottomLeft.value}${unit.value}`,
@@ -125,7 +49,8 @@ export default defineComponent({
 
     const cssOutput = computed(
       () =>
-        `border: ${borderWidth.value}px ${borderStyle.value} ${borderColor.value};\nborder-radius: ${borders.value.topLeft.value}${unit.value} ${borders.value.topRight.value}${unit.value} ${borders.value.bottomRight.value}${unit.value} ${borders.value.bottomLeft.value}${unit.value};`,
+        `border: ${borderWidth.value}px ${borderStyle.value} ${borderColor.value};
+border-radius: ${borders.value.topLeft.value}${unit.value} ${borders.value.topRight.value}${unit.value} ${borders.value.bottomRight.value}${unit.value} ${borders.value.bottomLeft.value}${unit.value};`,
     );
 
     function updateCSSOutput() {
@@ -211,3 +136,78 @@ n-color-picker {
   width: 100%;
 }
 </style>
+<template>
+  <div class="container">
+    <div class="square" :style="styleObject"></div>
+
+    <NCard title="Border Radius and Style Editor" class="controls">
+      <NForm>
+        <NFormItem label="Units">
+          <NSelect v-model:value="unit" :options="unitOptions" @update:value="updateCSSOutput" />
+        </NFormItem>
+
+        <div class="radius-controls">
+          <NFormItem label="Top Left" class="half-slider">
+            <NSlider
+              v-model:value="borders.topLeft.value"
+              :min="0"
+              :max="borders.topLeft.max"
+              :step="1"
+              @update:value="updateCSSOutput"
+            />
+            <span>{{ borders.topLeft.value + unit }}</span>
+          </NFormItem>
+          <NFormItem label="Top Right" class="half-slider">
+            <NSlider
+              v-model:value="borders.topRight.value"
+              :min="0"
+              :max="borders.topRight.max"
+              :step="1"
+              @update:value="updateCSSOutput"
+            />
+            <span>{{ borders.topRight.value + unit }}</span>
+          </NFormItem>
+        </div>
+        <div class="radius-controls">
+          <NFormItem label="Bottom Left" class="half-slider">
+            <NSlider
+              v-model:value="borders.bottomLeft.value"
+              :min="0"
+              :max="borders.bottomLeft.max"
+              :step="1"
+              @update:value="updateCSSOutput"
+            />
+            <span>{{ borders.bottomLeft.value + unit }}</span>
+          </NFormItem>
+          <NFormItem label="Bottom Right" class="half-slider">
+            <NSlider
+              v-model:value="borders.bottomRight.value"
+              :min="0"
+              :max="borders.bottomRight.max"
+              :step="1"
+              @update:value="updateCSSOutput"
+            />
+            <span>{{ borders.bottomRight.value + unit }}</span>
+          </NFormItem>
+        </div>
+        <div class="border-controls">
+          <NFormItem label="Border Width" class="border-width-slider">
+            <NSlider v-model:value="borderWidth" :min="0" :max="100" :step="1" @update:value="updateCSSOutput" />
+            <span>{{ borderWidth + 'px' }}</span>
+          </NFormItem>
+          <NFormItem label="Border Style" class="border-style-select">
+            <NSelect v-model:value="borderStyle" :options="borderStyles" @update:value="updateCSSOutput" />
+          </NFormItem>
+        </div>
+
+        <NFormItem label="Border Color">
+          <NColorPicker v-model:value="borderColor" @update:value="updateCSSOutput" />
+        </NFormItem>
+
+        <NFormItem label="CSS Properties">
+          <TextareaCopyable :value="cssOutput" language="css" />
+        </NFormItem>
+      </NForm>
+    </NCard>
+  </div>
+</template>

From 5ab8857b2600c057cacb424510eb7adf2ef72f5a Mon Sep 17 00:00:00 2001
From: Adrian Ortiz <desarrollador3@en-trega.com>
Date: Sat, 7 Sep 2024 12:42:00 -0600
Subject: [PATCH 05/12] fix

---
 .../border-generator.e2e.spec.ts              |   2 +-
 .../border-generator/border-generator.vue     | 278 +++++++++---------
 2 files changed, 141 insertions(+), 139 deletions(-)

diff --git a/src/tools/border-generator/border-generator.e2e.spec.ts b/src/tools/border-generator/border-generator.e2e.spec.ts
index 2e3bee70..ec0e5355 100644
--- a/src/tools/border-generator/border-generator.e2e.spec.ts
+++ b/src/tools/border-generator/border-generator.e2e.spec.ts
@@ -6,6 +6,6 @@ test.describe('Tool - Border generator', () => {
   });
 
   test('Has correct title', async ({ page }) => {
-    await expect(page).toHaveTitle('Border generator - IT Tools');
+    await expect(page).toHaveTitle('Border Generator - IT Tools');
   });
 });
diff --git a/src/tools/border-generator/border-generator.vue b/src/tools/border-generator/border-generator.vue
index c8181444..8294a205 100644
--- a/src/tools/border-generator/border-generator.vue
+++ b/src/tools/border-generator/border-generator.vue
@@ -1,141 +1,3 @@
-<script lang="ts">
-import { defineComponent, ref, computed } from 'vue';
-import { NSlider, NForm, NFormItem, NSelect, NCard, NColorPicker } from 'naive-ui';
-import TextareaCopyable from '@/components/TextareaCopyable.vue';
-import { Borders } from './border-generator.service';
-import { generateCSSOutput } from './border-generator.service';
-
-export default defineComponent({
-  name: 'BorderRadiusViewer',
-  components: {
-    NSlider,
-    NForm,
-    NFormItem,
-    NSelect,
-    NCard,
-    NColorPicker,
-    TextareaCopyable,
-  },
-  setup() {
-    const borders = ref<Borders>({
-      topLeft: { label: 'Top Left', value: 0, max: 100 },
-      topRight: { label: 'Top Right', value: 0, max: 100 },
-      bottomLeft: { label: 'Bottom Left', value: 0, max: 100 },
-      bottomRight: { label: 'Bottom Right', value: 0, max: 100 },
-    });
-    const unit = ref('px');
-    const borderWidth = ref<number>(0);
-    const borderStyle = ref('solid');
-    const borderColor = ref('#000000');
-    const unitOptions = [
-      { label: 'Pixels (px)', value: 'px' },
-      { label: 'Percentage (%)', value: '%' },
-    ];
-    const borderStyles = [
-      { label: 'Solid', value: 'solid' },
-      { label: 'Dashed', value: 'dashed' },
-      { label: 'Dotted', value: 'dotted' },
-      { label: 'Double', value: 'double' },
-      { label: 'Groove', value: 'groove' },
-      { label: 'Ridge', value: 'ridge' },
-      { label: 'Inset', value: 'inset' },
-      { label: 'Outset', value: 'outset' },
-      { label: 'None', value: 'none' },
-    ];
-    const styleObject = computed(() => ({
-      border: `${borderWidth.value}px ${borderStyle.value} ${borderColor.value}`,
-      borderRadius: `${borders.value.topLeft.value}${unit.value} ${borders.value.topRight.value}${unit.value} ${borders.value.bottomRight.value}${unit.value} ${borders.value.bottomLeft.value}${unit.value}`,
-    }));
-
-    const cssOutput = computed(
-      () =>
-        `border: ${borderWidth.value}px ${borderStyle.value} ${borderColor.value};
-border-radius: ${borders.value.topLeft.value}${unit.value} ${borders.value.topRight.value}${unit.value} ${borders.value.bottomRight.value}${unit.value} ${borders.value.bottomLeft.value}${unit.value};`,
-    );
-
-    function updateCSSOutput() {
-      // Forces update computed properties
-    }
-
-    return {
-      borders,
-      unit,
-      borderWidth,
-      borderStyle,
-      borderColor,
-      unitOptions,
-      borderStyles,
-      cssOutput,
-      updateCSSOutput,
-      styleObject,
-    };
-  },
-});
-</script>
-<style scoped>
-.container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-}
-
-.square {
-  width: 250px;
-  height: 250px;
-  background-color: #f3f3f3;
-}
-
-.controls {
-  width: 100%;
-}
-
-.radius-controls,
-.border-controls {
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  gap: 20px;
-}
-
-.half-slider,
-.border-width-slider {
-  position: relative;
-  padding: 10px 0;
-  width: 60%;
-}
-
-.half-slider span,
-.border-width-slider span {
-  position: absolute;
-  right: 0;
-  top: 30px;
-  background-color: #fff;
-  padding: 2px 6px;
-  border-radius: 5px;
-  font-size: 0.9em;
-  color: #333;
-}
-
-.border-style-select {
-  width: 30%;
-}
-
-n-slider {
-  width: calc(100% - 60px);
-}
-
-.controls .n-form-item__label {
-  min-width: 70px;
-  text-align: right;
-}
-
-n-select,
-n-color-picker {
-  width: 100%;
-}
-</style>
 <template>
   <div class="container">
     <div class="square" :style="styleObject"></div>
@@ -211,3 +73,143 @@ n-color-picker {
     </NCard>
   </div>
 </template>
+
+<script lang="ts">
+import { computed, defineComponent, ref } from 'vue';
+import { NCard, NColorPicker, NForm, NFormItem, NSlider, NSelect } from 'naive-ui';
+import type { Borders } from './border-generator.service';
+import TextareaCopyable from '@/components/TextareaCopyable.vue';
+import { generateCSSOutput } from './border-generator.service';
+
+export default defineComponent({
+  name: 'BorderRadiusViewer',
+  components: {
+    NSlider,
+    NForm,
+    NFormItem,
+    NSelect,
+    NCard,
+    NColorPicker,
+    TextareaCopyable,
+  },
+  setup() {
+    const borders = ref<Borders>({
+      topLeft: { label: 'Top Left', value: 0, max: 100 },
+      topRight: { label: 'Top Right', value: 0, max: 100 },
+      bottomLeft: { label: 'Bottom Left', value: 0, max: 100 },
+      bottomRight: { label: 'Bottom Right', value: 0, max: 100 },
+    });
+    const unit = ref('px');
+    const borderWidth = ref<number>(0);
+    const borderStyle = ref('solid');
+    const borderColor = ref('#000000');
+    const unitOptions = [
+      { label: 'Pixels (px)', value: 'px' },
+      { label: 'Percentage (%)', value: '%' },
+    ];
+    const borderStyles = [
+      { label: 'Solid', value: 'solid' },
+      { label: 'Dashed', value: 'dashed' },
+      { label: 'Dotted', value: 'dotted' },
+      { label: 'Double', value: 'double' },
+      { label: 'Groove', value: 'groove' },
+      { label: 'Ridge', value: 'ridge' },
+      { label: 'Inset', value: 'inset' },
+      { label: 'Outset', value: 'outset' },
+      { label: 'None', value: 'none' },
+    ];
+    const styleObject = computed(() => ({
+      border: `${borderWidth.value}px ${borderStyle.value} ${borderColor.value}`,
+      borderRadius: `${borders.value.topLeft.value}${unit.value} ${borders.value.topRight.value}${unit.value} ${borders.value.bottomRight.value}${unit.value} ${borders.value.bottomLeft.value}${unit.value}`,
+    }));
+
+    const cssOutput = computed(
+      () =>
+        `border: ${borderWidth.value}px ${borderStyle.value} ${borderColor.value};
+border-radius: ${borders.value.topLeft.value}${unit.value} ${borders.value.topRight.value}${unit.value} ${borders.value.bottomRight.value}${unit.value} ${borders.value.bottomLeft.value}${unit.value};`,
+    );
+
+    function updateCSSOutput() {
+      // Forces update computed properties
+    }
+
+    return {
+      borders,
+      unit,
+      borderWidth,
+      borderStyle,
+      borderColor,
+      unitOptions,
+      borderStyles,
+      cssOutput,
+      updateCSSOutput,
+      styleObject,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+}
+
+.square {
+  width: 250px;
+  height: 250px;
+  background-color: #f3f3f3;
+}
+
+.controls {
+  width: 100%;
+}
+
+.radius-controls,
+.border-controls {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  gap: 20px;
+}
+
+.half-slider,
+.border-width-slider {
+  position: relative;
+  padding: 10px 0;
+  width: 60%;
+}
+
+.half-slider span,
+.border-width-slider span {
+  position: absolute;
+  right: 0;
+  top: 30px;
+  background-color: #fff;
+  padding: 2px 6px;
+  border-radius: 5px;
+  font-size: 0.9em;
+  color: #333;
+}
+
+.border-style-select {
+  width: 30%;
+}
+
+n-slider {
+  width: calc(100% - 60px);
+}
+
+.controls .n-form-item__label {
+  min-width: 70px;
+  text-align: right;
+}
+
+n-select,
+n-color-picker {
+  width: 100%;
+}
+</style>

From be0302771d8b4cb554742ae1a6ade9541f4c743b Mon Sep 17 00:00:00 2001
From: Adrian Ortiz <desarrollador3@en-trega.com>
Date: Sat, 7 Sep 2024 12:49:26 -0600
Subject: [PATCH 06/12] fix

---
 .../border-generator.service.ts               |   8 +-
 .../border-generator/border-generator.vue     | 155 +++++++++---------
 2 files changed, 81 insertions(+), 82 deletions(-)

diff --git a/src/tools/border-generator/border-generator.service.ts b/src/tools/border-generator/border-generator.service.ts
index 2ab77ee2..56d6db67 100644
--- a/src/tools/border-generator/border-generator.service.ts
+++ b/src/tools/border-generator/border-generator.service.ts
@@ -1,11 +1,11 @@
 export interface Border {
-  label: string;
-  value: number;
-  max: number;
+  label: string
+  value: number
+  max: number
 }
 
 export interface Borders {
-  [key: string]: Border;
+  [key: string]: Border
 }
 
 // Asegúrate de que esta función esté correctamente exportada
diff --git a/src/tools/border-generator/border-generator.vue b/src/tools/border-generator/border-generator.vue
index 8294a205..4e227a8a 100644
--- a/src/tools/border-generator/border-generator.vue
+++ b/src/tools/border-generator/border-generator.vue
@@ -1,85 +1,8 @@
-<template>
-  <div class="container">
-    <div class="square" :style="styleObject"></div>
-
-    <NCard title="Border Radius and Style Editor" class="controls">
-      <NForm>
-        <NFormItem label="Units">
-          <NSelect v-model:value="unit" :options="unitOptions" @update:value="updateCSSOutput" />
-        </NFormItem>
-
-        <div class="radius-controls">
-          <NFormItem label="Top Left" class="half-slider">
-            <NSlider
-              v-model:value="borders.topLeft.value"
-              :min="0"
-              :max="borders.topLeft.max"
-              :step="1"
-              @update:value="updateCSSOutput"
-            />
-            <span>{{ borders.topLeft.value + unit }}</span>
-          </NFormItem>
-          <NFormItem label="Top Right" class="half-slider">
-            <NSlider
-              v-model:value="borders.topRight.value"
-              :min="0"
-              :max="borders.topRight.max"
-              :step="1"
-              @update:value="updateCSSOutput"
-            />
-            <span>{{ borders.topRight.value + unit }}</span>
-          </NFormItem>
-        </div>
-        <div class="radius-controls">
-          <NFormItem label="Bottom Left" class="half-slider">
-            <NSlider
-              v-model:value="borders.bottomLeft.value"
-              :min="0"
-              :max="borders.bottomLeft.max"
-              :step="1"
-              @update:value="updateCSSOutput"
-            />
-            <span>{{ borders.bottomLeft.value + unit }}</span>
-          </NFormItem>
-          <NFormItem label="Bottom Right" class="half-slider">
-            <NSlider
-              v-model:value="borders.bottomRight.value"
-              :min="0"
-              :max="borders.bottomRight.max"
-              :step="1"
-              @update:value="updateCSSOutput"
-            />
-            <span>{{ borders.bottomRight.value + unit }}</span>
-          </NFormItem>
-        </div>
-        <div class="border-controls">
-          <NFormItem label="Border Width" class="border-width-slider">
-            <NSlider v-model:value="borderWidth" :min="0" :max="100" :step="1" @update:value="updateCSSOutput" />
-            <span>{{ borderWidth + 'px' }}</span>
-          </NFormItem>
-          <NFormItem label="Border Style" class="border-style-select">
-            <NSelect v-model:value="borderStyle" :options="borderStyles" @update:value="updateCSSOutput" />
-          </NFormItem>
-        </div>
-
-        <NFormItem label="Border Color">
-          <NColorPicker v-model:value="borderColor" @update:value="updateCSSOutput" />
-        </NFormItem>
-
-        <NFormItem label="CSS Properties">
-          <TextareaCopyable :value="cssOutput" language="css" />
-        </NFormItem>
-      </NForm>
-    </NCard>
-  </div>
-</template>
-
 <script lang="ts">
 import { computed, defineComponent, ref } from 'vue';
-import { NCard, NColorPicker, NForm, NFormItem, NSlider, NSelect } from 'naive-ui';
+import { NCard, NColorPicker, NForm, NFormItem, NSelect, NSlider } from 'naive-ui';
 import type { Borders } from './border-generator.service';
 import TextareaCopyable from '@/components/TextareaCopyable.vue';
-import { generateCSSOutput } from './border-generator.service';
 
 export default defineComponent({
   name: 'BorderRadiusViewer',
@@ -213,3 +136,79 @@ n-color-picker {
   width: 100%;
 }
 </style>
+
+<template>
+  <div class="container">
+    <div class="square" :style="styleObject" />
+
+    <NCard title="Border Radius and Style Editor" class="controls">
+      <NForm>
+        <NFormItem label="Units">
+          <NSelect v-model:value="unit" :options="unitOptions" @update:value="updateCSSOutput" />
+        </NFormItem>
+
+        <div class="radius-controls">
+          <NFormItem label="Top Left" class="half-slider">
+            <NSlider
+              v-model:value="borders.topLeft.value"
+              :min="0"
+              :max="borders.topLeft.max"
+              :step="1"
+              @update:value="updateCSSOutput"
+            />
+            <span>{{ borders.topLeft.value + unit }}</span>
+          </NFormItem>
+          <NFormItem label="Top Right" class="half-slider">
+            <NSlider
+              v-model:value="borders.topRight.value"
+              :min="0"
+              :max="borders.topRight.max"
+              :step="1"
+              @update:value="updateCSSOutput"
+            />
+            <span>{{ borders.topRight.value + unit }}</span>
+          </NFormItem>
+        </div>
+        <div class="radius-controls">
+          <NFormItem label="Bottom Left" class="half-slider">
+            <NSlider
+              v-model:value="borders.bottomLeft.value"
+              :min="0"
+              :max="borders.bottomLeft.max"
+              :step="1"
+              @update:value="updateCSSOutput"
+            />
+            <span>{{ borders.bottomLeft.value + unit }}</span>
+          </NFormItem>
+          <NFormItem label="Bottom Right" class="half-slider">
+            <NSlider
+              v-model:value="borders.bottomRight.value"
+              :min="0"
+              :max="borders.bottomRight.max"
+              :step="1"
+              @update:value="updateCSSOutput"
+            />
+            <span>{{ borders.bottomRight.value + unit }}</span>
+          </NFormItem>
+        </div>
+        <div class="border-controls">
+          <NFormItem label="Border Width" class="border-width-slider">
+            <NSlider v-model:value="borderWidth" :min="0" :max="100" :step="1" @update:value="updateCSSOutput" />
+            <span>{{ `${borderWidth}px` }}</span>
+          </NFormItem>
+          <NFormItem label="Border Style" class="border-style-select">
+            <NSelect v-model:value="borderStyle" :options="borderStyles" @update:value="updateCSSOutput" />
+          </NFormItem>
+        </div>
+
+        <NFormItem label="Border Color">
+          <NColorPicker v-model:value="borderColor" @update:value="updateCSSOutput" />
+        </NFormItem>
+
+        <NFormItem label="CSS Properties">
+          <TextareaCopyable :value="cssOutput" language="css" />
+        </NFormItem>
+      </NForm>
+    </NCard>
+  </div>
+</template>

From 4886332ff595b3360b925369366620aff4c46ab6 Mon Sep 17 00:00:00 2001
From: Adrian Ortiz <desarrollador3@en-trega.com>
Date: Sat, 7 Sep 2024 12:57:00 -0600
Subject: [PATCH 07/12] fix

---
 .../border-generator/border-generator.vue     | 130 +++++++++---------
 src/tools/index.ts                            |   2 +-
 2 files changed, 66 insertions(+), 66 deletions(-)

diff --git a/src/tools/border-generator/border-generator.vue b/src/tools/border-generator/border-generator.vue
index 4e227a8a..e32bbae7 100644
--- a/src/tools/border-generator/border-generator.vue
+++ b/src/tools/border-generator/border-generator.vue
@@ -72,71 +72,6 @@ border-radius: ${borders.value.topLeft.value}${unit.value} ${borders.value.topRi
 });
 </script>
 
-<style scoped>
-.container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-}
-
-.square {
-  width: 250px;
-  height: 250px;
-  background-color: #f3f3f3;
-}
-
-.controls {
-  width: 100%;
-}
-
-.radius-controls,
-.border-controls {
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  gap: 20px;
-}
-
-.half-slider,
-.border-width-slider {
-  position: relative;
-  padding: 10px 0;
-  width: 60%;
-}
-
-.half-slider span,
-.border-width-slider span {
-  position: absolute;
-  right: 0;
-  top: 30px;
-  background-color: #fff;
-  padding: 2px 6px;
-  border-radius: 5px;
-  font-size: 0.9em;
-  color: #333;
-}
-
-.border-style-select {
-  width: 30%;
-}
-
-n-slider {
-  width: calc(100% - 60px);
-}
-
-.controls .n-form-item__label {
-  min-width: 70px;
-  text-align: right;
-}
-
-n-select,
-n-color-picker {
-  width: 100%;
-}
-</style>
-
 <template>
   <div class="container">
     <div class="square" :style="styleObject" />
@@ -212,3 +147,68 @@ n-color-picker {
     </NCard>
   </div>
 </template>
+
+<style scoped>
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+}
+
+.square {
+  width: 250px;
+  height: 250px;
+  background-color: #f3f3f3;
+}
+
+.controls {
+  width: 100%;
+}
+
+.radius-controls,
+.border-controls {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  gap: 20px;
+}
+
+.half-slider,
+.border-width-slider {
+  position: relative;
+  padding: 10px 0;
+  width: 60%;
+}
+
+.half-slider span,
+.border-width-slider span {
+  position: absolute;
+  right: 0;
+  top: 30px;
+  background-color: #fff;
+  padding: 2px 6px;
+  border-radius: 5px;
+  font-size: 0.9em;
+  color: #333;
+}
+
+.border-style-select {
+  width: 30%;
+}
+
+n-slider {
+  width: calc(100% - 60px);
+}
+
+.controls .n-form-item__label {
+  min-width: 70px;
+  text-align: right;
+}
+
+n-select,
+n-color-picker {
+  width: 100%;
+}
+</style>
diff --git a/src/tools/index.ts b/src/tools/index.ts
index c0de1f7c..1981c1c1 100644
--- a/src/tools/index.ts
+++ b/src/tools/index.ts
@@ -211,5 +211,5 @@ export const toolsByCategory: ToolCategory[] = [
 
 export const tools = toolsByCategory.flatMap(({ components }) => components);
 export const toolsWithCategory = toolsByCategory.flatMap(({ components, name }) =>
-  components.map((tool) => ({ category: name, ...tool })),
+  components.map(tool) => ({ category: name, ...tool }),
 );

From 8a723eb5c7bcc5b081236a5ddcd443a0f7da3742 Mon Sep 17 00:00:00 2001
From: Adrian Ortiz <desarrollador3@en-trega.com>
Date: Sat, 7 Sep 2024 12:59:22 -0600
Subject: [PATCH 08/12] fix

---
 src/tools/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/tools/index.ts b/src/tools/index.ts
index 1981c1c1..d9f0a482 100644
--- a/src/tools/index.ts
+++ b/src/tools/index.ts
@@ -211,5 +211,5 @@ export const toolsByCategory: ToolCategory[] = [
 
 export const tools = toolsByCategory.flatMap(({ components }) => components);
 export const toolsWithCategory = toolsByCategory.flatMap(({ components, name }) =>
-  components.map(tool) => ({ category: name, ...tool }),
+  components.map((tool) => ({ ...tool, category: name })),
 );

From 54b14e0f7ac4794a6f9b1067ef79ac17f0012bcc Mon Sep 17 00:00:00 2001
From: Adrian Ortiz <desarrollador3@en-trega.com>
Date: Sat, 7 Sep 2024 13:06:59 -0600
Subject: [PATCH 09/12] fix

---
 src/tools/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/tools/index.ts b/src/tools/index.ts
index d9f0a482..123320df 100644
--- a/src/tools/index.ts
+++ b/src/tools/index.ts
@@ -211,5 +211,5 @@ export const toolsByCategory: ToolCategory[] = [
 
 export const tools = toolsByCategory.flatMap(({ components }) => components);
 export const toolsWithCategory = toolsByCategory.flatMap(({ components, name }) =>
-  components.map((tool) => ({ ...tool, category: name })),
+  components.map(tool => ({ ...tool, category: name })),
 );

From 217a1af7cb97a02dd1772d715ea7590a5b846a49 Mon Sep 17 00:00:00 2001
From: Adrian Ortiz <desarrollador3@en-trega.com>
Date: Sat, 7 Sep 2024 13:12:00 -0600
Subject: [PATCH 10/12] fix

---
 .../border-generator.service.test.ts          | 45 ++++++++++++++++---
 1 file changed, 39 insertions(+), 6 deletions(-)

diff --git a/src/tools/border-generator/border-generator.service.test.ts b/src/tools/border-generator/border-generator.service.test.ts
index 20c54344..a085c23d 100644
--- a/src/tools/border-generator/border-generator.service.test.ts
+++ b/src/tools/border-generator/border-generator.service.test.ts
@@ -1,6 +1,39 @@
-// import { expect, describe, it } from 'vitest';
-// import { } from './border-generator.service';
-//
-// describe('border-generator', () => {
-//
-// })
+import { expect, describe, it } from 'vitest';
+import { generateCSSOutput } from './border-generator.service';
+import type { Borders } from './border-generator.service';
+
+describe('border-generator service', () => {
+  describe('generateCSSOutput', () => {
+    it('generates correct CSS with default values', () => {
+      const borders: Borders = {
+        topLeft: { label: 'Top Left', value: 10, max: 100 },
+        topRight: { label: 'Top Right', value: 10, max: 100 },
+        bottomRight: { label: 'Bottom Right', value: 10, max: 100 },
+        bottomLeft: { label: 'Bottom Left', value: 10, max: 100 },
+      };
+
+      const cssOutput = generateCSSOutput(borders, 1, 'solid', 'px');
+
+      expect(cssOutput).toEqual('border: 1px solid #000000; border-radius: 10px 10px 10px 10px;');
+    });
+
+    it('generates correct CSS with custom values', () => {
+      const borders: Borders = {
+        topLeft: { label: 'Top Left', value: 20, max: 100 },
+        topRight: { label: 'Top Right', value: 15, max: 100 },
+        bottomRight: { label: 'Bottom Right', value: 5, max: 100 },
+        bottomLeft: { label: 'Bottom Left', value: 25, max: 100 },
+      };
+
+      const cssOutput = generateCSSOutput(borders, 2, 'dashed', '%');
+
+      expect(cssOutput).toEqual('border: 2px dashed #000000; border-radius: 20% 15% 5% 25%;');
+    });
+
+    it('throws an error when borders are missing', () => {
+      const borders = {} as Borders;
+
+      expect(() => generateCSSOutput(borders, 1, 'solid', 'px')).toThrowError();
+    });
+  });
+});

From 416070a26498dd1493f32c6ac20df2828971c05d Mon Sep 17 00:00:00 2001
From: Adrian Ortiz <desarrollador3@en-trega.com>
Date: Sat, 7 Sep 2024 13:16:50 -0600
Subject: [PATCH 11/12] fix

---
 src/tools/border-generator/border-generator.service.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/tools/border-generator/border-generator.service.test.ts b/src/tools/border-generator/border-generator.service.test.ts
index a085c23d..3f9c125a 100644
--- a/src/tools/border-generator/border-generator.service.test.ts
+++ b/src/tools/border-generator/border-generator.service.test.ts
@@ -1,4 +1,4 @@
-import { expect, describe, it } from 'vitest';
+import { describe ,expect, it } from 'vitest';
 import { generateCSSOutput } from './border-generator.service';
 import type { Borders } from './border-generator.service';
 

From 94693e60509e24be98724e67561dcc1b1f866adf Mon Sep 17 00:00:00 2001
From: Adrian Ortiz <desarrollador3@en-trega.com>
Date: Sat, 7 Sep 2024 13:19:55 -0600
Subject: [PATCH 12/12] fix

---
 src/tools/border-generator/border-generator.service.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/tools/border-generator/border-generator.service.test.ts b/src/tools/border-generator/border-generator.service.test.ts
index 3f9c125a..ff1725d4 100644
--- a/src/tools/border-generator/border-generator.service.test.ts
+++ b/src/tools/border-generator/border-generator.service.test.ts
@@ -1,4 +1,4 @@
-import { describe ,expect, it } from 'vitest';
+import { describe, expect, it } from 'vitest';
 import { generateCSSOutput } from './border-generator.service';
 import type { Borders } from './border-generator.service';