Merge branch 'feat/ip-cidr-to-range' into chore/all-my-stuffs

# Conflicts:
#	package.json
#	pnpm-lock.yaml
#	src/tools/index.ts

Author: sharevb

package.json

@@ -117,6 +117,7 @@
     "change-case": "^4.1.2",
     "chatgpt-prompt-splitter": "^1.0.5",
     "chinesegen": "^0.3.3",
+    "cidr-tools": "^7.0.4",
     "colord": "^2.9.3",
     "composerize": "^1.6.6",
     "composerize-ts": "^0.6.2",
@@ -198,6 +199,12 @@
     "js-beautify": "^1.15.1",
     "image-to-ascii-art": "^0.0.4",
     "jpeg-quality-estimator": "^1.0.1",
+    "ip-address": "^9.0.5",
+    "ip-bigint": "^8.0.2",
+    "ip-cidr": "^4.0.0",
+    "ip-matching": "^2.1.2",
+    "is-cidr": "^5.0.3",
+    "is-ip": "^5.0.1",
     "json5": "^2.2.3",
     "jsonpath": "^1.1.1",
     "jsonar-mod": "^1.9.0",

pnpm-lock.yaml

@@ -205,6 +205,7 @@ import { tool as barcodeReader } from './barcode-reader';
 import { tool as barcodeGenerator } from './barcode-generator';
 import { tool as htmlToMarkdown } from './html-to-markdown';
 import { tool as pdfUnlock } from './pdf-unlock';
+import { tool as ipCidrToRange } from './ip-cidr-to-range';
 
 export const toolsByCategory: ToolCategory[] = [
   {
@@ -417,6 +418,11 @@ export const toolsByCategory: ToolCategory[] = [
       punycodeConverter,
       sslCertConverter,
       websocketTester,
+      ipv4RangeExpander,
+      ipCidrToRange,
+      macAddressLookup,
+      macAddressGenerator,
+      ipv6UlaGenerator,
     ],
   },
   {

src/tools/index.ts

@@ -0,0 +1,12 @@
+import { Binary } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Ipv4/6 CIDR to IP Range Calculator',
+  path: '/ip-cidr-to-range',
+  description: 'Calculate IP Range from a CIDR (IPv4/6)',
+  keywords: ['ipv4', 'ipv6', 'cidr'],
+  component: () => import('./ip-cidr-to-range.vue'),
+  icon: Binary,
+  createdAt: new Date('2024-01-10'),
+});

src/tools/ip-cidr-to-range/index.ts

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import isCidr from 'is-cidr';
+import { expand } from 'cidr-tools';
+import { getIPNetworkType, parseAsCIDR } from '@/utils/ip';
+import { useValidation } from '@/composable/validation';
+
+const rawCIDR = useStorage('ip-cidr-to-range:cidr', '192.168.1.0/24'); // NOSONAR
+
+const result = computed(() => {
+  const parsedCIDR = parseAsCIDR(rawCIDR.value) || rawCIDR.value;
+  const ips = expand(parsedCIDR);
+  if (!ips || !ips.length) {
+    return undefined;
+  }
+
+  return {
+    startIpAddress: ips.slice(0, 1)[0],
+    endIpAddress: ips.slice(-1)[0],
+    parsedCIDR,
+    networkType: getIPNetworkType(ips.slice(0, 1)[0]) || 'Public',
+  };
+});
+
+const cidrValidation = useValidation({
+  source: rawCIDR,
+  rules: [{ message: 'Invalid ipv4/6 CIDR', validator: cidr => isCidr(parseAsCIDR(cidr) || cidr) }],
+});
+
+const showResult = computed(() => cidrValidation.isValid && result.value !== undefined);
+</script>
+
+<template>
+  <div>
+    <c-input-text
+      v-model:value="rawCIDR"
+      label="IPv4/6 CIDR (ie, 1.0.0.0/23 or 1.1.1.1/255.255.252.0 or 1.1.1.1-2.2.2.2 or 10.0.0.*)"
+      placeholder="IPv4/6 CIDR (ie, 1.0.0.0/23  or 1.1.1.1/255.255.252.0 or 1.1.1.1-2.2.2.2 or 10.0.0.*)"
+      :validation="cidrValidation"
+      clearable
+    />
+
+    <c-card v-if="showResult" title="Resulting CIDR" mt-4>
+      <input-copyable
+        label="CIDR"
+        label-position="left"
+        label-width="150px"
+        label-align="right"
+
+        :value="result?.parsedCIDR"
+        disabled mb-2
+      />
+    </c-card>
+
+    <c-card v-if="showResult" title="IPv4/6 range" mt-4>
+      <input-copyable
+        label="Start IP Address"
+        label-position="left"
+        label-width="150px"
+        label-align="right"
+
+        :value="result?.startIpAddress"
+        disabled mb-2
+      />
+      <input-copyable
+        label="End IP Address"
+        label-position="left"
+        label-width="150px"
+        label-align="right"
+
+        :value="result?.endIpAddress"
+        disabled mb-2
+      />
+
+      <input-copyable
+        label="Network type"
+        label-position="left"
+        label-width="150px"
+        label-align="right"
+
+        :value="result?.networkType"
+        disabled mb-2
+      />
+    </c-card>
+  </div>
+</template>