Add unicode encoder/decoder tool

src/pages/tools/string/index.ts

@@ -21,6 +21,7 @@ import { tool as stringCensor } from './censor/meta';
 import { tool as stringPasswordGenerator } from './password-generator/meta';
 import { tool as stringEncodeUrl } from './url-encode/meta';
 import { tool as StringDecodeUrl } from './url-decode/meta';
+import { tool as stringUnicode } from './unicode/meta';
 
 export const stringTools = [
   stringSplit,
@@ -45,5 +46,6 @@ export const stringTools = [
   stringPasswordGenerator,
   stringEncodeUrl,
   StringDecodeUrl,
+  stringUnicode,
   stringHiddenCharacterDetector
 ];

src/pages/tools/string/unicode/index.tsx

@@ -0,0 +1,131 @@
+import { Box, FormControlLabel, Switch } from '@mui/material';
+import { useState } from 'react';
+import ToolContent from '@components/ToolContent';
+import { ToolComponentProps } from '@tools/defineTool';
+import ToolTextInput from '@components/input/ToolTextInput';
+import ToolTextResult from '@components/result/ToolTextResult';
+import { GetGroupsType } from '@components/options/ToolOptions';
+import { CardExampleType } from '@components/examples/ToolExamples';
+import { unicode } from './service';
+import { InitialValuesType } from './types';
+import SimpleRadio from '@components/options/SimpleRadio';
+import { useTranslation } from 'react-i18next';
+
+const initialValues: InitialValuesType = {
+  mode: 'encode',
+  uppercase: false
+};
+
+const exampleCards: CardExampleType<InitialValuesType>[] = [
+  {
+    title: 'Encode to Unicode Escape',
+    description: 'Encode plain text to Unicode escape sequences.',
+    sampleText: 'Hello, World!',
+    sampleResult:
+      '\\u0048\\u0065\\u006c\\u006c\\u006f\\u002c\\u0020\\u0057\\u006f\\u0072\\u006c\\u0064\\u0021',
+    sampleOptions: {
+      mode: 'encode',
+      uppercase: false
+    }
+  },
+  {
+    title: 'Encode to Unicode Escape (Uppercase)',
+    description: 'Encode plain text to uppercase Unicode escape sequences.',
+    sampleText: 'Hello, World!',
+    sampleResult:
+      '\\u0048\\u0065\\u006c\\u006c\\u006f\\u002c\\u0020\\u0057\\u006f\\u0072\\u006c\\u0064\\u0021'.toUpperCase(),
+    sampleOptions: {
+      mode: 'encode',
+      uppercase: true
+    }
+  },
+  {
+    title: 'Decode Unicode Escape',
+    description: 'Decode Unicode escape sequences back to plain text.',
+    sampleText:
+      '\\u0048\\u0065\\u006c\\u006c\\u006f\\u002c\\u0020\\u0057\\u006f\\u0072\\u006c\\u0064\\u0021',
+    sampleResult: 'Hello, World!',
+    sampleOptions: {
+      mode: 'decode',
+      uppercase: false
+    }
+  }
+];
+export default function Unicode({
+  title,
+  longDescription
+}: ToolComponentProps) {
+  const { t } = useTranslation('string');
+  const [input, setInput] = useState<string>('');
+  const [result, setResult] = useState<string>('');
+
+  const compute = (values: InitialValuesType, input: string) => {
+    if (!input) return;
+    setResult(unicode(input, values.mode === 'encode', values.uppercase));
+  };
+
+  const getGroups: GetGroupsType<InitialValuesType> = ({
+    values,
+    updateField
+  }) => [
+    {
+      title: t('unicode.optionsTitle'),
+      component: (
+        <Box>
+          <SimpleRadio
+            onClick={() => updateField('mode', 'encode')}
+            checked={values.mode === 'encode'}
+            title={t('unicode.encode')}
+          />
+          <SimpleRadio
+            onClick={() => updateField('mode', 'decode')}
+            checked={values.mode === 'decode'}
+            title={t('unicode.decode')}
+          />
+        </Box>
+      )
+    },
+    {
+      title: t('unicode.caseOptionsTitle'),
+      component: (
+        <Box>
+          <FormControlLabel
+            control={
+              <Switch
+                checked={values.uppercase}
+                onChange={(e) => updateField('uppercase', e.target.checked)}
+                disabled={values.mode === 'decode'}
+              />
+            }
+            label={t('unicode.uppercase')}
+          />
+        </Box>
+      )
+    }
+  ];
+  return (
+    <ToolContent
+      title={title}
+      input={input}
+      inputComponent={
+        <ToolTextInput
+          value={input}
+          onChange={setInput}
+          title={t('unicode.inputTitle')}
+        />
+      }
+      resultComponent={
+        <ToolTextResult value={result} title={t('unicode.resultTitle')} />
+      }
+      initialValues={initialValues}
+      exampleCards={exampleCards}
+      getGroups={getGroups}
+      setInput={setInput}
+      compute={compute}
+      toolInfo={{
+        title: t('unicode.toolInfo.title'),
+        description: t('unicode.toolInfo.description')
+      }}
+    />
+  );
+}

src/pages/tools/string/unicode/meta.ts

@@ -0,0 +1,15 @@
+import { defineTool } from '@tools/defineTool';
+import { lazy } from 'react';
+
+export const tool = defineTool('string', {
+  i18n: {
+    name: 'string:unicode.title',
+    description: 'string:unicode.description',
+    shortDescription: 'string:unicode.shortDescription',
+    longDescription: 'string:unicode.longDescription'
+  },
+  path: 'unicode',
+  icon: 'mdi:unicode',
+  keywords: ['unicode'],
+  component: lazy(() => import('./index'))
+});

src/pages/tools/string/unicode/service.ts

@@ -0,0 +1,28 @@
+import { InitialValuesType } from './types';
+
+export function main(input: string, options: InitialValuesType): string {
+  return input;
+}
+
+export function unicode(
+  input: string,
+  encode: boolean,
+  uppercase: boolean
+): string {
+  if (encode) {
+    let result = '';
+    for (let i = 0; i < input.length; i++) {
+      let hex = input.charCodeAt(i).toString(16);
+      hex = ('0000' + hex).slice(-4);
+      if (uppercase) {
+        hex = hex.toUpperCase();
+      }
+      result += '\\u' + hex;
+    }
+    return result;
+  } else {
+    return input.replace(/\\u([\dA-Fa-f]{4})/g, (match, grp) => {
+      return String.fromCharCode(parseInt(grp, 16));
+    });
+  }
+}

src/pages/tools/string/unicode/types.ts

@@ -0,0 +1,4 @@
+export type InitialValuesType = {
+  mode: 'encode' | 'decode';
+  uppercase: boolean;
+};

src/pages/tools/string/unicode/unicode.service.test.ts

@@ -0,0 +1,178 @@
+import { expect, describe, it } from 'vitest';
+import { unicode } from './service';
+
+describe('unicode', () => {
+  it('should encode a English string to lowercase hex correctly', () => {
+    const input = 'Hello, World!';
+    const result = unicode(input, true, false);
+    expect(result).toBe(
+      '\\u0048\\u0065\\u006c\\u006c\\u006f\\u002c\\u0020\\u0057\\u006f\\u0072\\u006c\\u0064\\u0021'
+    );
+  });
+
+  it('should encode a English string to uppercase hex correctly', () => {
+    const input = 'Hello, World!';
+    const result = unicode(input, true, true);
+    expect(result).toBe(
+      '\\u0048\\u0065\\u006C\\u006C\\u006F\\u002C\\u0020\\u0057\\u006F\\u0072\\u006C\\u0064\\u0021'
+    );
+  });
+
+  it('should decode a English lowercase hex string correctly', () => {
+    const input =
+      '\\u0048\\u0065\\u006c\\u006c\\u006f\\u002c\\u0020\\u0057\\u006f\\u0072\\u006c\\u0064\\u0021';
+    const result = unicode(input, false, false);
+    expect(result).toBe('Hello, World!');
+  });
+
+  it('should decode a English uppercase hex string correctly', () => {
+    const input =
+      '\\u0048\\u0065\\u006C\\u006C\\u006F\\u002C\\u0020\\u0057\\u006F\\u0072\\u006C\\u0064\\u0021';
+    const result = unicode(input, false, false);
+    expect(result).toBe('Hello, World!');
+  });
+
+  it('should encode a Korean string to lowercase hex correctly', () => {
+    const input = '안녕하세요, 세계!';
+    const result = unicode(input, true, false);
+    expect(result).toBe(
+      '\\uc548\\ub155\\ud558\\uc138\\uc694\\u002c\\u0020\\uc138\\uacc4\\u0021'
+    );
+  });
+
+  it('should encode a Korean string to uppercase hex correctly', () => {
+    const input = '안녕하세요, 세계!';
+    const result = unicode(input, true, true);
+    expect(result).toBe(
+      '\\uC548\\uB155\\uD558\\uC138\\uC694\\u002C\\u0020\\uC138\\uACC4\\u0021'
+    );
+  });
+
+  it('should decode a Korean lowercase hex string correctly', () => {
+    const input =
+      '\\uc548\\ub155\\ud558\\uc138\\uc694\\u002c\\u0020\\uc138\\uacc4\\u0021';
+    const result = unicode(input, false, false);
+    expect(result).toBe('안녕하세요, 세계!');
+  });
+
+  it('should decode a Korean uppercase hex string correctly', () => {
+    const input =
+      '\\uC548\\uB155\\uD558\\uC138\\uC694\\u002C\\u0020\\uC138\\uACC4\\u0021';
+    const result = unicode(input, false, false);
+    expect(result).toBe('안녕하세요, 세계!');
+  });
+
+  it('should encode a Japanese string to lowercase hex correctly', () => {
+    const input = 'こんにちは、世界！';
+    const result = unicode(input, true, false);
+    expect(result).toBe(
+      '\\u3053\\u3093\\u306b\\u3061\\u306f\\u3001\\u4e16\\u754c\\uff01'
+    );
+  });
+
+  it('should encode a Japanese string to uppercase hex correctly', () => {
+    const input = 'こんにちは、世界！';
+    const result = unicode(input, true, true);
+    expect(result).toBe(
+      '\\u3053\\u3093\\u306B\\u3061\\u306F\\u3001\\u4E16\\u754C\\uFF01'
+    );
+  });
+
+  it('should decode a Japanese lowercase hex string correctly', () => {
+    const input =
+      '\\u3053\\u3093\\u306b\\u3061\\u306f\\u3001\\u4e16\\u754c\\uff01';
+    const result = unicode(input, false, false);
+    expect(result).toBe('こんにちは、世界！');
+  });
+
+  it('should decode a Japanese uppercase hex string correctly', () => {
+    const input =
+      '\\u3053\\u3093\\u306B\\u3061\\u306F\\u3001\\u4E16\\u754C\\uFF01';
+    const result = unicode(input, false, false);
+    expect(result).toBe('こんにちは、世界！');
+  });
+
+  it('should encode a Chinese string to lowercase hex correctly', () => {
+    const input = '你好，世界！';
+    const result = unicode(input, true, false);
+    expect(result).toBe('\\u4f60\\u597d\\uff0c\\u4e16\\u754c\\uff01');
+  });
+
+  it('should encode a Chinese string to uppercase hex correctly', () => {
+    const input = '你好，世界！';
+    const result = unicode(input, true, true);
+    expect(result).toBe('\\u4F60\\u597D\\uFF0C\\u4E16\\u754C\\uFF01');
+  });
+
+  it('should decode a Chinese lowercase hex string correctly', () => {
+    const input = '\\u4f60\\u597d\\uff0c\\u4e16\\u754c\\uff01';
+    const result = unicode(input, false, false);
+    expect(result).toBe('你好，世界！');
+  });
+
+  it('should decode a Chinese uppercase hex string correctly', () => {
+    const input = '\\u4F60\\u597D\\uFF0C\\u4E16\\u754C\\uFF01';
+    const result = unicode(input, false, false);
+    expect(result).toBe('你好，世界！');
+  });
+
+  it('should encode a Russian string to lowercase hex correctly', () => {
+    const input = 'Привет, мир!';
+    const result = unicode(input, true, false);
+    expect(result).toBe(
+      '\\u041f\\u0440\\u0438\\u0432\\u0435\\u0442\\u002c\\u0020\\u043c\\u0438\\u0440\\u0021'
+    );
+  });
+
+  it('should encode a Russian string to uppercase hex correctly', () => {
+    const input = 'Привет, мир!';
+    const result = unicode(input, true, true);
+    expect(result).toBe(
+      '\\u041F\\u0440\\u0438\\u0432\\u0435\\u0442\\u002C\\u0020\\u043C\\u0438\\u0440\\u0021'
+    );
+  });
+
+  it('should decode a Russian lowercase hex string correctly', () => {
+    const input =
+      '\\u041f\\u0440\\u0438\\u0432\\u0435\\u0442\\u002c\\u0020\\u043c\\u0438\\u0440\\u0021';
+    const result = unicode(input, false, false);
+    expect(result).toBe('Привет, мир!');
+  });
+
+  it('should decode a Russian uppercase hex string correctly', () => {
+    const input =
+      '\\u041F\\u0440\\u0438\\u0432\\u0435\\u0442\\u002C\\u0020\\u043C\\u0438\\u0440\\u0021';
+    const result = unicode(input, false, false);
+    expect(result).toBe('Привет, мир!');
+  });
+
+  it('should encode a Spanish string to lowercase hex correctly', () => {
+    const input = '¡Hola, Mundo!';
+    const result = unicode(input, true, false);
+    expect(result).toBe(
+      '\\u00a1\\u0048\\u006f\\u006c\\u0061\\u002c\\u0020\\u004d\\u0075\\u006e\\u0064\\u006f\\u0021'
+    );
+  });
+
+  it('should encode a Spanish string to uppercase hex correctly', () => {
+    const input = '¡Hola, Mundo!';
+    const result = unicode(input, true, true);
+    expect(result).toBe(
+      '\\u00A1\\u0048\\u006F\\u006C\\u0061\\u002C\\u0020\\u004D\\u0075\\u006E\\u0064\\u006F\\u0021'
+    );
+  });
+
+  it('should decode a Spanish lowercase hex string correctly', () => {
+    const input =
+      '\\u00a1\\u0048\\u006f\\u006c\\u0061\\u002c\\u0020\\u004d\\u0075\\u006e\\u0064\\u006f\\u0021';
+    const result = unicode(input, false, false);
+    expect(result).toBe('¡Hola, Mundo!');
+  });
+
+  it('should decode a Spanish uppercase hex string correctly', () => {
+    const input =
+      '\\u00A1\\u0048\\u006F\\u006C\\u0061\\u002C\\u0020\\u004D\\u0075\\u006E\\u0064\\u006F\\u0021';
+    const result = unicode(input, false, false);
+    expect(result).toBe('¡Hola, Mundo!');
+  });
+});