feat(new-tool): json minify (#265)

Co-authored-by: Corentin THOMASSET <corentin.thomasset74@gmail.com>

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 jsonMinify } from './json-minify';
 import { tool as bcrypt } from './bcrypt';
 import { tool as bip39 } from './bip39-generator';
 import { tool as caseConverter } from './case-converter';
@@ -74,7 +75,7 @@ export const toolsByCategory: ToolCategory[] = [
   },
   {
     name: 'Development',
-    components: [gitMemo, randomPortGenerator, crontabGenerator, jsonViewer, sqlPrettify, chmodCalculator],
+    components: [gitMemo, randomPortGenerator, crontabGenerator, jsonViewer, jsonMinify, sqlPrettify, chmodCalculator],
   },
   {
     name: 'Math',

src/tools/json-minify/index.ts

@@ -0,0 +1,11 @@
+import { Braces } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'JSON minify',
+  path: '/json-minify',
+  description: 'Minify and compress your JSON by removing unnecessary white spaces.',
+  keywords: ['json', 'minify', 'format'],
+  component: () => import('./json-minify.vue'),
+  icon: Braces,
+});

src/tools/json-minify/json-minify.vue

@@ -0,0 +1,57 @@
+<template>
+  <n-form-item
+    label="Your raw json"
+    :feedback="rawJsonValidation.message"
+    :validation-status="rawJsonValidation.status"
+  >
+    <n-input
+      ref="inputElement"
+      v-model:value="rawJson"
+      placeholder="Paste your raw json here..."
+      type="textarea"
+      rows="20"
+      autocomplete="off"
+      autocorrect="off"
+      autocapitalize="off"
+      spellcheck="false"
+    />
+  </n-form-item>
+  <n-form-item label="Minify version of your JSON">
+    <textarea-copyable :value="cleanJson" language="json" :follow-height-of="inputElement" />
+  </n-form-item>
+</template>
+
+<script setup lang="ts">
+import TextareaCopyable from '@/components/TextareaCopyable.vue';
+import { useValidation } from '@/composable/validation';
+import { withDefaultOnError } from '@/utils/defaults';
+import JSON5 from 'json5';
+import { computed, ref } from 'vue';
+
+const inputElement = ref<HTMLElement>();
+
+const rawJson = ref('{\n\t"hello": [\n\t\t"world"\n\t]\n}');
+const cleanJson = computed(() => withDefaultOnError(() => JSON.stringify(JSON5.parse(rawJson.value), null, 0), ''));
+
+const rawJsonValidation = useValidation({
+  source: rawJson,
+  rules: [
+    {
+      validator: (v) => v === '' || JSON5.parse(v),
+      message: 'Provided JSON is not valid.',
+    },
+  ],
+});
+</script>
+
+<style lang="less" scoped>
+.result-card {
+  position: relative;
+
+  .copy-button {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+  }
+}
+</style>