Merge branch 'CorentinTh:main' into main

src/modules/i18n/components/locale-selector.vue

@@ -7,6 +7,7 @@ const localesLong: Record<string, string> = {
   fr: 'Français',
   pt: 'Português',
   ru: 'Русский',
+  uk: 'Українська',
   zh: '中文',
 };
 

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 textToUnicode } from './text-to-unicode';
 import { tool as pdfSignatureChecker } from './pdf-signature-checker';
 import { tool as numeronymGenerator } from './numeronym-generator';
 import { tool as macAddressGenerator } from './mac-address-generator';
@@ -75,6 +76,7 @@ import { tool as urlParser } from './url-parser';
 import { tool as uuidGenerator } from './uuid-generator';
 import { tool as macAddressLookup } from './mac-address-lookup';
 import { tool as xmlFormatter } from './xml-formatter';
+import { tool as yamlViewer } from './yaml-viewer';
 
 export const toolsByCategory: ToolCategory[] = [
   {
@@ -93,6 +95,7 @@ export const toolsByCategory: ToolCategory[] = [
       caseConverter,
       textToNatoAlphabet,
       textToBinary,
+      textToUnicode,
       yamlToJson,
       yamlToToml,
       jsonToYaml,
@@ -139,6 +142,7 @@ export const toolsByCategory: ToolCategory[] = [
       chmodCalculator,
       dockerRunToDockerComposeConverter,
       xmlFormatter,
+      yamlViewer,
     ],
   },
   {

src/tools/text-to-unicode/index.ts

@@ -0,0 +1,12 @@
+import { TextWrap } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Text to Unicode',
+  path: '/text-to-unicode',
+  description: 'Parse and convert text to unicode and vice-versa',
+  keywords: ['text', 'to', 'unicode'],
+  component: () => import('./text-to-unicode.vue'),
+  icon: TextWrap,
+  createdAt: new Date('2024-01-31'),
+});

src/tools/text-to-unicode/text-to-unicode.e2e.spec.ts

@@ -0,0 +1,25 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('Tool - Text to Unicode', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/text-to-unicode');
+  });
+
+  test('Has correct title', async ({ page }) => {
+    await expect(page).toHaveTitle('Text to Unicode - IT Tools');
+  });
+
+  test('Text to unicode conversion', async ({ page }) => {
+    await page.getByTestId('text-to-unicode-input').fill('it-tools');
+    const unicode = await page.getByTestId('text-to-unicode-output').inputValue();
+
+    expect(unicode).toEqual('it-tools');
+  });
+
+  test('Unicode to text conversion', async ({ page }) => {
+    await page.getByTestId('unicode-to-text-input').fill('it-tools');
+    const text = await page.getByTestId('unicode-to-text-output').inputValue();
+
+    expect(text).toEqual('it-tools');
+  });
+});

src/tools/text-to-unicode/text-to-unicode.service.test.ts

@@ -0,0 +1,20 @@
+import { describe, expect, it } from 'vitest';
+import { convertTextToUnicode, convertUnicodeToText } from './text-to-unicode.service';
+
+describe('text-to-unicode', () => {
+  describe('convertTextToUnicode', () => {
+    it('a text string is converted to unicode representation', () => {
+      expect(convertTextToUnicode('A')).toBe('A');
+      expect(convertTextToUnicode('linke the string convert to unicode')).toBe('linke the string convert to unicode');
+      expect(convertTextToUnicode('')).toBe('');
+    });
+  });
+
+  describe('convertUnicodeToText', () => {
+    it('an unicode string is converted to its text representation', () => {
+      expect(convertUnicodeToText('A')).toBe('A');
+      expect(convertUnicodeToText('linke the string convert to unicode')).toBe('linke the string convert to unicode');
+      expect(convertUnicodeToText('')).toBe('');
+    });
+  });
+});

src/tools/text-to-unicode/text-to-unicode.service.ts

@@ -0,0 +1,9 @@
+function convertTextToUnicode(text: string): string {
+  return text.split('').map(value => `&#${value.charCodeAt(0)};`).join('');
+}
+
+function convertUnicodeToText(unicodeStr: string): string {
+  return unicodeStr.replace(/&#(\d+);/g, (match, dec) => String.fromCharCode(dec));
+}
+
+export { convertTextToUnicode, convertUnicodeToText };

src/tools/text-to-unicode/text-to-unicode.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { convertTextToUnicode, convertUnicodeToText } from './text-to-unicode.service';
+import { useCopy } from '@/composable/copy';
+
+const inputText = ref('');
+const unicodeFromText = computed(() => inputText.value.trim() === '' ? '' : convertTextToUnicode(inputText.value));
+const { copy: copyUnicode } = useCopy({ source: unicodeFromText });
+
+const inputUnicode = ref('');
+const textFromUnicode = computed(() => inputUnicode.value.trim() === '' ? '' : convertUnicodeToText(inputUnicode.value));
+const { copy: copyText } = useCopy({ source: textFromUnicode });
+</script>
+
+<template>
+  <c-card title="Text to Unicode">
+    <c-input-text v-model:value="inputText" multiline placeholder="e.g. 'Hello Avengers'" label="Enter text to convert to binary" autosize autofocus raw-text test-id="text-to-unicode-input" />
+    <c-input-text v-model:value="unicodeFromText" label="Unicode from your text" multiline raw-text readonly mt-2 placeholder="The unicode representation of your text will be here" test-id="text-to-unicode-output" />
+    <div mt-2 flex justify-center>
+      <c-button :disabled="!unicodeFromText" @click="copyUnicode()">
+        Copy binary to clipboard
+      </c-button>
+    </div>
+  </c-card>
+
+  <c-card title="Unicode to Text">
+    <c-input-text v-model:value="inputUnicode" multiline placeholder="Input Unicode" label="Enter unicode to convert to text" autosize raw-text test-id="unicode-to-text-input" />
+    <c-input-text v-model:value="textFromUnicode" label="Text from your Unicode" multiline raw-text readonly mt-2 placeholder="The text representation of your unicode will be here" test-id="unicode-to-text-output" />
+    <div mt-2 flex justify-center>
+      <c-button :disabled="!textFromUnicode" @click="copyText()">
+        Copy text to clipboard
+      </c-button>
+    </div>
+  </c-card>
+</template>

src/tools/token-generator/locales/es.yaml

@@ -0,0 +1,15 @@
+tools:
+  token-generator:
+    title: Token generator
+    description: Genera una cadena aleatoria con los caracteres que desees, letras mayúsculas o minúsculas, números y/o símbolos.
+
+    uppercase: Mayúsculas (ABC...)
+    lowercase: Minúsculas (abc...)
+    numbers: Números (123...)
+    symbols: Símbolos (!-;...)
+    length: Longitud
+    tokenPlaceholder: 'The token...'
+    copied: Token copiado al portapapeles
+    button:
+      copy: Copiar
+      refresh: Actualizar

src/tools/yaml-viewer/index.ts

@@ -0,0 +1,12 @@
+import { AlignJustified } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'YAML prettify and format',
+  path: '/yaml-prettify',
+  description: 'Prettify your YAML string to a human friendly readable format.',
+  keywords: ['yaml', 'viewer', 'prettify', 'format'],
+  component: () => import('./yaml-viewer.vue'),
+  icon: AlignJustified,
+  createdAt: new Date('2024-01-31'),
+});

src/tools/yaml-viewer/yaml-models.ts

@@ -0,0 +1,24 @@
+import { type MaybeRef, get } from '@vueuse/core';
+
+import yaml from 'yaml';
+
+export { formatYaml };
+
+function formatYaml({
+  rawYaml,
+  sortKeys = false,
+  indentSize = 2,
+}: {
+  rawYaml: MaybeRef<string>
+  sortKeys?: MaybeRef<boolean>
+  indentSize?: MaybeRef<number>
+}) {
+  const parsedYaml = yaml.parse(get(rawYaml));
+
+  const formattedYAML = yaml.stringify(parsedYaml, {
+    sortMapEntries: get(sortKeys),
+    indent: get(indentSize),
+  });
+
+  return formattedYAML;
+}

src/tools/yaml-viewer/yaml-viewer.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import yaml from 'yaml';
+import { useStorage } from '@vueuse/core';
+import { formatYaml } from './yaml-models';
+import { withDefaultOnError } from '@/utils/defaults';
+import { useValidation } from '@/composable/validation';
+import TextareaCopyable from '@/components/TextareaCopyable.vue';
+
+const inputElement = ref<HTMLElement>();
+
+const rawYaml = useStorage('yaml-prettify:raw-yaml', '');
+const indentSize = useStorage('yaml-prettify:indent-size', 2);
+const sortKeys = useStorage('yaml-prettify:sort-keys', false);
+
+const cleanYaml = computed(() => withDefaultOnError(() => formatYaml({ rawYaml, indentSize, sortKeys }), ''));
+
+const rawYamlValidation = useValidation({
+  source: rawYaml,
+  rules: [
+    {
+      validator: v => v === '' || yaml.parse(v),
+      message: 'Provided YAML is not valid.',
+    },
+  ],
+});
+</script>
+
+<template>
+  <div style="flex: 0 0 100%">
+    <div style="margin: 0 auto; max-width: 600px" flex justify-center gap-3>
+      <n-form-item label="Sort keys :" label-placement="left" label-width="100">
+        <n-switch v-model:value="sortKeys" />
+      </n-form-item>
+      <n-form-item label="Indent size :" label-placement="left" label-width="100" :show-feedback="false">
+        <n-input-number v-model:value="indentSize" min="1" max="10" style="width: 100px" />
+      </n-form-item>
+    </div>
+  </div>
+
+  <n-form-item
+    label="Your raw YAML"
+    :feedback="rawYamlValidation.message"
+    :validation-status="rawYamlValidation.status"
+  >
+    <c-input-text
+      ref="inputElement"
+      v-model:value="rawYaml"
+      placeholder="Paste your raw YAML here..."
+      rows="20"
+      multiline
+      autocomplete="off"
+      autocorrect="off"
+      autocapitalize="off"
+      spellcheck="false"
+      monospace
+    />
+  </n-form-item>
+  <n-form-item label="Prettified version of your YAML">
+    <TextareaCopyable :value="cleanYaml" language="yaml" :follow-height-of="inputElement" />
+  </n-form-item>
+</template>
+
+<style lang="less" scoped>
+.result-card {
+  position: relative;
+  .copy-button {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+  }
+}
+</style>