feat(new tool): ISBN Parser and Formatter

ISBN Parser and Formatter

Author: sharevb

components.d.ts

@@ -91,7 +91,6 @@ declare module '@vue/runtime-core' {
     'IconMdi:contentCopy': typeof import('~icons/mdi/content-copy')['default']
     'IconMdi:kettleSteamOutline': typeof import('~icons/mdi/kettle-steam-outline')['default']
     IconMdiArrowDown: typeof import('~icons/mdi/arrow-down')['default']
-    IconMdiArrowRight: typeof import('~icons/mdi/arrow-right')['default']
     IconMdiArrowRightBottom: typeof import('~icons/mdi/arrow-right-bottom')['default']
     IconMdiCamera: typeof import('~icons/mdi/camera')['default']
     IconMdiChevronDown: typeof import('~icons/mdi/chevron-down')['default']
@@ -117,6 +116,7 @@ declare module '@vue/runtime-core' {
     Ipv4RangeExpander: typeof import('./src/tools/ipv4-range-expander/ipv4-range-expander.vue')['default']
     Ipv4SubnetCalculator: typeof import('./src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue')['default']
     Ipv6UlaGenerator: typeof import('./src/tools/ipv6-ula-generator/ipv6-ula-generator.vue')['default']
+    IsbnValidatorAndParser: typeof import('./src/tools/isbn-validator-and-parser/isbn-validator-and-parser.vue')['default']
     JsonDiff: typeof import('./src/tools/json-diff/json-diff.vue')['default']
     JsonMinify: typeof import('./src/tools/json-minify/json-minify.vue')['default']
     JsonToCsv: typeof import('./src/tools/json-to-csv/json-to-csv.vue')['default']
@@ -171,8 +171,6 @@ declare module '@vue/runtime-core' {
     NTable: typeof import('naive-ui')['NTable']
     NTag: typeof import('naive-ui')['NTag']
     NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']
-    NUpload: typeof import('naive-ui')['NUpload']
-    NUploadDragger: typeof import('naive-ui')['NUploadDragger']
     OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default']
     PasswordStrengthAnalyser: typeof import('./src/tools/password-strength-analyser/password-strength-analyser.vue')['default']
     PdfSignatureChecker: typeof import('./src/tools/pdf-signature-checker/pdf-signature-checker.vue')['default']

package.json

@@ -62,6 +62,7 @@
     "highlight.js": "^11.7.0",
     "iarna-toml-esm": "^3.0.5",
     "ibantools": "^4.3.3",
+    "isbn3": "^1.1.44",
     "json5": "^2.2.3",
     "jwt-decode": "^3.1.2",
     "libphonenumber-js": "^1.10.28",

pnpm-lock.yaml

@@ -75,6 +75,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 isbnValidatorAndParser } from './isbn-validator-and-parser';
 
 export const toolsByCategory: ToolCategory[] = [
   {
@@ -159,7 +160,11 @@ export const toolsByCategory: ToolCategory[] = [
   },
   {
     name: 'Data',
-    components: [phoneParserAndFormatter, ibanValidatorAndParser],
+    components: [
+      phoneParserAndFormatter,
+      ibanValidatorAndParser,
+      isbnValidatorAndParser,
+    ],
   },
 ];
 

src/tools/index.ts

@@ -0,0 +1,12 @@
+import { Books } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'ISBN Validator and Parser',
+  path: '/isbn-validator-and-parser',
+  description: 'Parse, validate, format and get infos for an ISBN',
+  keywords: ['isbn', 'validator', 'parser', 'formatter'],
+  component: () => import('./isbn-validator-and-parser.vue'),
+  icon: Books,
+  createdAt: new Date('2024-01-10'),
+});

src/tools/isbn-validator-and-parser/index.ts

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import ISBN3 from 'isbn3';
+import type { CKeyValueListItems } from '@/ui/c-key-value-list/c-key-value-list.types';
+
+const rawIsbn = ref('9782021304534');
+
+const isbnInfos = computed<CKeyValueListItems>(() => {
+  const isbn = ISBN3.parse(rawIsbn.value);
+
+  if (isbn == null) {
+    return [];
+  }
+
+  return [
+    {
+      label: 'Is ISBN valid ?',
+      value: isbn.isValid,
+    },
+    {
+      label: 'Country',
+      value: isbn.groupname,
+    },
+    {
+      label: 'ISBN 13',
+      value: isbn.isbn13,
+    },
+    {
+      label: 'ISBN 13 Formatted',
+      value: isbn.isbn13h,
+    },
+    {
+      label: 'ISBN 10',
+      value: isbn.isbn10,
+    },
+    {
+      label: 'ISBN 10 Formatted',
+      value: isbn.isbn10h,
+    },
+  ];
+});
+
+function isbnChecksum(isbn: string) {
+  let check = 0;
+
+  if (isbn.length === 9) {
+    for (let n = 0; n < 9; n += 1) {
+      check += (10 - n) * Number(isbn.charAt(n));
+    }
+    check = (11 - check % 11) % 11;
+    return check === 10 ? 'X' : String(check);
+  }
+  else if (isbn.length === 12) {
+    for (let n = 0; n < 12; n += 2) {
+      check += Number(isbn.charAt(n)) + 3 * Number(isbn.charAt(n + 1));
+    }
+    return String((10 - check % 10) % 10);
+  }
+
+  return null;
+}
+
+const normalizedISBN = computed(() => {
+  let normalized = rawIsbn.value.replace(/[^\dX]/g, '');
+  if (normalized.length >= 13) {
+    normalized = normalized.substring(0, 12);
+  }
+  else if (normalized.length >= 10) {
+    normalized = normalized.substring(0, 9);
+  }
+  const checksum = isbnChecksum(normalized);
+  return ISBN3.parse(`${normalized}${checksum}`)?.isbn13h;
+});
+
+const isbnAuditInfos = computed<{ isValid: boolean; clues: CKeyValueListItems }>(() => {
+  const isbn = ISBN3.audit(rawIsbn.value);
+
+  const isValid = (isbn?.validIsbn ?? false);
+  return {
+    isValid,
+    clues: Array.from((isbn?.clues ?? []),
+      clue => ({ label: `${clue.message} (${clue.groupname})`, value: clue.candidate })),
+  };
+});
+</script>
+
+<template>
+  <div>
+    <c-input-text v-model:value="rawIsbn" placeholder="Enter an ISBN to check for validity..." test-id="isbn-input" />
+    <n-alert v-if="!isbnAuditInfos.isValid" type="error">
+      Invalid ISBN.
+      <input-copyable v-if="normalizedISBN" label="Probably correct" label-position="left" :value="normalizedISBN" disabled="true" />
+    </n-alert>
+
+    <c-card v-if="isbnInfos.length > 0" mt-5 title="ISBN Infos">
+      <c-key-value-list :items="isbnInfos" data-test-id="isbn-info" />
+    </c-card>
+    <c-card v-if="isbnAuditInfos.clues.length > 0" mt-5 title="ISBN Audit Infos">
+      <c-key-value-list :items="isbnAuditInfos" data-test-id="isbn-info" />
+    </c-card>
+  </div>
+</template>