feat(new-tool): yaml formater (#779)

* validating if yaml is correct and collecting format options

* Formatting yaml, sorting keys and changing indent size.

* Removed unused format options

* Fixed lint errors

* Installed types for js-yaml

* Removed legacy routing and added tool creation date

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

* Using existing yaml package instead of js-yaml

* Update src/tools/yaml-viewer/index.ts

---------

Co-authored-by: Isaiah <66272034+isaiah-j@users.noreply.github.com>
Co-authored-by: Corentin THOMASSET <corentin.thomasset74@gmail.com>

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']
@@ -171,8 +170,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']
@@ -214,5 +211,6 @@ declare module '@vue/runtime-core' {
     XmlFormatter: typeof import('./src/tools/xml-formatter/xml-formatter.vue')['default']
     YamlToJson: typeof import('./src/tools/yaml-to-json-converter/yaml-to-json.vue')['default']
     YamlToToml: typeof import('./src/tools/yaml-to-toml/yaml-to-toml.vue')['default']
+    YamlViewer: typeof import('./src/tools/yaml-viewer/yaml-viewer.vue')['default']
   }
 }

src/tools/index.ts

@@ -76,6 +76,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 yamlViewer } from './yaml-viewer';
 
 export const toolsByCategory: ToolCategory[] = [
   {
@@ -141,6 +142,7 @@ export const toolsByCategory: ToolCategory[] = [
       chmodCalculator,
       dockerRunToDockerComposeConverter,
       xmlFormatter,
+      yamlViewer,
     ],
   },
   {

src/tools/yaml-viewer/index.ts

@@ -0,0 +1,12 @@
+import { AlignJustified } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'YAML prettify and format',
+  path: '/yaml-prettify',
+  description: 'Prettify your YAML string to a human friendly readable format.',
+  keywords: ['yaml', 'viewer', 'prettify', 'format'],
+  component: () => import('./yaml-viewer.vue'),
+  icon: AlignJustified,
+  createdAt: new Date('2024-01-31'),
+});

src/tools/yaml-viewer/yaml-models.ts

@@ -0,0 +1,24 @@
+import { type MaybeRef, get } from '@vueuse/core';
+
+import yaml from 'yaml';
+
+export { formatYaml };
+
+function formatYaml({
+  rawYaml,
+  sortKeys = false,
+  indentSize = 2,
+}: {
+  rawYaml: MaybeRef<string>
+  sortKeys?: MaybeRef<boolean>
+  indentSize?: MaybeRef<number>
+}) {
+  const parsedYaml = yaml.parse(get(rawYaml));
+
+  const formattedYAML = yaml.stringify(parsedYaml, {
+    sortMapEntries: get(sortKeys),
+    indent: get(indentSize),
+  });
+
+  return formattedYAML;
+}

src/tools/yaml-viewer/yaml-viewer.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import yaml from 'yaml';
+import { useStorage } from '@vueuse/core';
+import { formatYaml } from './yaml-models';
+import { withDefaultOnError } from '@/utils/defaults';
+import { useValidation } from '@/composable/validation';
+import TextareaCopyable from '@/components/TextareaCopyable.vue';
+
+const inputElement = ref<HTMLElement>();
+
+const rawYaml = useStorage('yaml-prettify:raw-yaml', '');
+const indentSize = useStorage('yaml-prettify:indent-size', 2);
+const sortKeys = useStorage('yaml-prettify:sort-keys', false);
+
+const cleanYaml = computed(() => withDefaultOnError(() => formatYaml({ rawYaml, indentSize, sortKeys }), ''));
+
+const rawYamlValidation = useValidation({
+  source: rawYaml,
+  rules: [
+    {
+      validator: v => v === '' || yaml.parse(v),
+      message: 'Provided YAML is not valid.',
+    },
+  ],
+});
+</script>
+
+<template>
+  <div style="flex: 0 0 100%">
+    <div style="margin: 0 auto; max-width: 600px" flex justify-center gap-3>
+      <n-form-item label="Sort keys :" label-placement="left" label-width="100">
+        <n-switch v-model:value="sortKeys" />
+      </n-form-item>
+      <n-form-item label="Indent size :" label-placement="left" label-width="100" :show-feedback="false">
+        <n-input-number v-model:value="indentSize" min="1" max="10" style="width: 100px" />
+      </n-form-item>
+    </div>
+  </div>
+
+  <n-form-item
+    label="Your raw YAML"
+    :feedback="rawYamlValidation.message"
+    :validation-status="rawYamlValidation.status"
+  >
+    <c-input-text
+      ref="inputElement"
+      v-model:value="rawYaml"
+      placeholder="Paste your raw YAML here..."
+      rows="20"
+      multiline
+      autocomplete="off"
+      autocorrect="off"
+      autocapitalize="off"
+      spellcheck="false"
+      monospace
+    />
+  </n-form-item>
+  <n-form-item label="Prettified version of your YAML">
+    <TextareaCopyable :value="cleanYaml" language="yaml" :follow-height-of="inputElement" />
+  </n-form-item>
+</template>
+
+<style lang="less" scoped>
+.result-card {
+  position: relative;
+  .copy-button {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+  }
+}
+</style>