feat(new tool): Integers to IP

Fix #1187

src/tools/index.ts

@@ -2,6 +2,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 emailNormalizer } from './email-normalizer';
+import { tool as integersToIp } from './integers-to-ip';
 
 import { tool as asciiTextDrawer } from './ascii-text-drawer';
 
@@ -158,7 +159,15 @@ export const toolsByCategory: ToolCategory[] = [
   },
   {
     name: 'Network',
-    components: [ipv4SubnetCalculator, ipv4AddressConverter, ipv4RangeExpander, macAddressLookup, macAddressGenerator, ipv6UlaGenerator],
+    components: [
+      ipv4SubnetCalculator,
+      ipv4AddressConverter,
+      ipv4RangeExpander,
+      macAddressLookup,
+      macAddressGenerator,
+      ipv6UlaGenerator,
+      integersToIp,
+    ],
   },
   {
     name: 'Math',

src/tools/integer-base-converter/integer-base-converter.model.test.ts

@@ -11,9 +11,21 @@ describe('integer-base-converter', () => {
         expect(convertBase({ value: '10100101', fromBase: 2, toBase: 16 })).toEqual('a5');
         expect(convertBase({ value: '192654', fromBase: 10, toBase: 8 })).toEqual('570216');
         expect(convertBase({ value: 'zz', fromBase: 64, toBase: 10 })).toEqual('2275');
-        expect(convertBase({ value: '42540766411283223938465490632011909384', fromBase: 10, toBase: 10 })).toEqual('42540766411283223938465490632011909384');
-        expect(convertBase({ value: '42540766411283223938465490632011909384', fromBase: 10, toBase: 16 })).toEqual('20010db8000085a300000000ac1f8908');
-        expect(convertBase({ value: '20010db8000085a300000000ac1f8908', fromBase: 16, toBase: 10 })).toEqual('42540766411283223938465490632011909384');
+        expect(convertBase({ value: 'AA', fromBase: 16, toBase: 10 })).toEqual('170');
+        expect(convertBase({ value: 'aa', fromBase: 16, toBase: 10 })).toEqual('170');
+        expect(convertBase({ value: '0xAA', fromBase: -1, toBase: 10 })).toEqual('170');
+        expect(convertBase({ value: '&HAA', fromBase: -1, toBase: 10 })).toEqual('170');
+        expect(convertBase({ value: '0xAAUL', fromBase: -1, toBase: 10 })).toEqual('170');
+        expect(convertBase({ value: '0XAAUL', fromBase: -1, toBase: 10 })).toEqual('170');
+        expect(convertBase({ value: '10UL', fromBase: 10, toBase: 10 })).toEqual('10');
+        expect(convertBase({ value: '10n', fromBase: 10, toBase: 10 })).toEqual('10');
+        expect(convertBase({ value: '0o252', fromBase: -1, toBase: 10 })).toEqual('170');
+        expect(convertBase({ value: '&O252', fromBase: -1, toBase: 10 })).toEqual('170');
+        expect(convertBase({ value: '192 654', fromBase: 10, toBase: 8 })).toEqual('570216');
+        expect(convertBase({ value: '192.654', fromBase: 10, toBase: 8 })).toEqual('570216');
+        expect(convertBase({ value: '0b10101010', fromBase: -1, toBase: 10 })).toEqual('170');
+        expect(convertBase({ value: '0b_1010_1010', fromBase: -1, toBase: 10 })).toEqual('170');
+        expect(convertBase({ value: '192,654', fromBase: 10, toBase: 8 })).toEqual('570216');
       });
     });
   });

src/tools/integer-base-converter/integer-base-converter.model.ts

@@ -1,20 +1,61 @@
-export function convertBase({ value, fromBase, toBase }: { value: string; fromBase: number; toBase: number }) {
+export function hasNumberPrefix(value: string) {
+  return (value ?? '').trim().match(/^(0[xob].|&[hob].)/i);
+}
+
+export function convertBase(
+  {
+    value, fromBase, toBase,
+    ignorePunctuationsRegexChars = ' \u00A0_\.,-',
+    handlePrefixSuffix = true,
+    ignoreCase = true,
+  }: {
+    value: string
+    fromBase: number
+    toBase: number
+    ignorePunctuationsRegexChars?: string
+    handlePrefixSuffix?: boolean
+    ignoreCase?: boolean
+  }) {
+  let cleanedValue = (value ?? '0').trim();
+  if (ignorePunctuationsRegexChars) {
+    cleanedValue = cleanedValue.replace(new RegExp(`[${ignorePunctuationsRegexChars}]`, 'g'), '');
+  }
+  let finalFromBase = fromBase;
+  if (handlePrefixSuffix) {
+    for (const regBase of [
+      { base: 2, regex: /^(&b|0b)?([01]+)([IULZn]*)$/i },
+      { base: 8, regex: /^(&o|0o)?([0-7]+)([IULZn]*)$/i },
+      { base: 16, regex: /^(&h|0x)?([a-f0-9]+)([IULZn]*)$/i },
+    ]) {
+      const match = cleanedValue.match(regBase.regex);
+      if (match) {
+        if (match[1]) {
+          finalFromBase = regBase.base;
+        }
+        cleanedValue = match[2];
+        break;
+      }
+    }
+  }
+  if (ignoreCase && finalFromBase <= 36) {
+    cleanedValue = cleanedValue.toLowerCase();
+  }
   const range = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ+/'.split('');
-  const fromRange = range.slice(0, fromBase);
+  const fromRange = range.slice(0, finalFromBase);
   const toRange = range.slice(0, toBase);
-  let decValue = value
+  let decValue = cleanedValue
     .split('')
     .reverse()
-    .reduce((carry: bigint, digit: string, index: number) => {
+    .reduce((carry: number, digit: string, index: number) => {
       if (!fromRange.includes(digit)) {
-        throw new Error(`Invalid digit "${digit}" for base ${fromBase}.`);
+        throw new Error(`Invalid digit "${digit}" for base ${finalFromBase}.`);
       }
-      return (carry += BigInt(fromRange.indexOf(digit)) * BigInt(fromBase) ** BigInt(index));
-    }, 0n);
+      return (carry += fromRange.indexOf(digit) * finalFromBase ** index);
+    }, 0);
   let newValue = '';
   while (decValue > 0) {
-    newValue = toRange[Number(decValue % BigInt(toBase))] + newValue;
-    decValue = (decValue - (decValue % BigInt(toBase))) / BigInt(toBase);
+    newValue = toRange[decValue % toBase] + newValue;
+    decValue = (decValue - (decValue % toBase)) / toBase;
   }
   return newValue || '0';
 }

src/tools/integers-to-ip/index.ts

@@ -0,0 +1,12 @@
+import { Binary } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Integers to IPv4/IPv6',
+  path: '/integers-to-ip',
+  description: 'Convert integers to IP',
+  keywords: ['integers', 'ip', 'ipv4', 'ipv6'],
+  component: () => import('./integers-to-ip.vue'),
+  icon: Binary,
+  createdAt: new Date('2024-07-14'),
+});

src/tools/integers-to-ip/integers-to-ip.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { stringifyIp } from 'ip-bigint';
+import InputCopyable from '../../components/InputCopyable.vue';
+import { convertBase, hasNumberPrefix } from '../integer-base-converter/integer-base-converter.model';
+
+const input = ref('3232235777');
+const inputBase = ref(10);
+
+const hasInputNumberPrefix = computed(() => hasNumberPrefix(input.value));
+
+function convertToIP({ value, fromBase, version }: { value: string; fromBase: number; version: 6 | 4 }): string {
+  try {
+    return stringifyIp({
+      number: BigInt(convertBase({
+        value,
+        fromBase,
+        toBase: 10,
+      })),
+      version,
+    }) ?? 'Invalid IP';
+  }
+  catch (err) {
+    return err?.toString() ?? 'Invalid IP';
+  }
+}
+</script>
+
+<template>
+  <div>
+    <c-card>
+      <c-input-text v-model:value="input" label="Input number" placeholder="Put your number here (ex: 3232235777)" label-position="left" label-width="110px" mb-2 label-align="right" />
+
+      <n-form-item v-if="!hasInputNumberPrefix" label="Input base" label-placement="left" label-width="110" :show-feedback="false">
+        <c-select
+          v-model:value="inputBase"
+          :options="[{ value: 2, label: 'Binary' }, { value: 8, label: 'Octal' }, { value: 10, label: 'Decimal' }, { value: 16, label: 'Hexadecimal' }]"
+          placeholder="Select a base"
+          w-100px
+        />
+      </n-form-item>
+
+      <n-divider />
+
+      <InputCopyable
+        label="Formatted IPv4"
+        label-position="left" label-width="110px" mb-2 label-align="right"
+        :value="convertToIP({ value: input, fromBase: inputBase, version: 4 })"
+        placeholder="Formatted IPv4 will be here..."
+      />
+
+      <InputCopyable
+        label="Formatted IPv6"
+        label-position="left" label-width="110px" mb-2 label-align="right"
+        :value="convertToIP({ value: input, fromBase: inputBase, version: 6 })"
+        placeholder="Formatted IPv6 will be here..."
+      />
+    </c-card>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.n-input-group:not(:first-child) {
+  margin-top: 5px;
+}
+</style>