feat: Add YAML to JSON converter and enhance JSON to YAML converter

- Updated JSON to YAML converter with property case transformation options.
- Introduced YAML to JSON converter with similar property case transformation features.
- Enhanced UI to support converter options in the conversion view.
- Updated styles for better UI consistency and responsiveness.
- Updated sitemap to include new converter routes.
- Bumped version number to 2.4 in the sidebar.

Author: timothydodd

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "utilplex",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -13,64 +13,63 @@
   },
   "private": true,
   "dependencies": {
-    "@acrodata/code-editor": "^0.5.1",
-    "@angular/animations": "^20.3.10",
-    "@angular/common": "^20.3.10",
-    "@angular/compiler": "^20.3.10",
-    "@angular/core": "^20.3.10",
-    "@angular/forms": "^20.3.10",
-    "@angular/platform-browser": "^20.3.10",
-    "@angular/platform-browser-dynamic": "^20.3.10",
-    "@angular/platform-server": "^20.3.10",
-    "@angular/router": "^20.3.10",
-    "@angular/ssr": "^20.3.9",
-    "@codemirror/commands": "^6.10.0",
+    "@acrodata/code-editor": "^0.6.0",
+    "@angular/animations": "^21.1.1",
+    "@angular/common": "^21.1.1",
+    "@angular/compiler": "^21.1.1",
+    "@angular/core": "^21.1.1",
+    "@angular/forms": "^21.1.1",
+    "@angular/platform-browser": "^21.1.1",
+    "@angular/platform-browser-dynamic": "^21.1.1",
+    "@angular/platform-server": "^21.1.1",
+    "@angular/router": "^21.1.1",
+    "@angular/ssr": "^21.1.1",
+    "@codemirror/commands": "^6.10.1",
     "@codemirror/lang-css": "^6.3.1",
     "@codemirror/lang-javascript": "^6.2.4",
     "@codemirror/lang-json": "^6.0.2",
     "@codemirror/lang-sql": "^6.10.0",
     "@codemirror/lang-xml": "^6.1.0",
     "@codemirror/lang-yaml": "^6.1.2",
-    "@codemirror/language": "^6.11.3",
-    "@codemirror/state": "^6.5.2",
-    "@codemirror/view": "^6.38.6",
+    "@codemirror/language": "^6.12.1",
+    "@codemirror/state": "^6.5.4",
+    "@codemirror/view": "^6.39.11",
     "@lezer/highlight": "^1.2.3",
-    "@ng-select/ng-select": "^20.7.0",
-    "@stedi/prettier-plugin-jsonata": "^2.1.6",
+    "@ng-select/ng-select": "^21.2.0",
+    "@stedi/prettier-plugin-jsonata": "^2.1.8",
     "codemirror": "^6.0.2",
-    "express": "~5.1.0",
-    "js-yaml": "^4.1.0",
-    "prettier": "^3.6.2",
+    "express": "~5.2.1",
+    "js-yaml": "^4.1.1",
+    "prettier": "^3.8.1",
     "rxjs": "~7.8.2",
-    "sql-formatter": "^15.6.10",
+    "sql-formatter": "^15.7.0",
     "tslib": "^2.8.1",
-    "zone.js": "~0.15.1"
+    "zone.js": "~0.16.0"
   },
   "devDependencies": {
-    "@angular-eslint/builder": "20.5.1",
-    "@angular-eslint/schematics": "20.5.1",
-    "@angular-eslint/template-parser": "20.5.1",
-    "@angular/build": "^20.3.9",
-    "@angular/cli": "~20.3.9",
-    "@angular/compiler-cli": "^20.3.10",
-    "@types/express": "~5.0.5",
-    "@types/jasmine": "~5.1.12",
+    "@angular-eslint/builder": "21.1.0",
+    "@angular-eslint/schematics": "21.1.0",
+    "@angular-eslint/template-parser": "21.1.0",
+    "@angular/build": "^21.1.1",
+    "@angular/cli": "~21.1.1",
+    "@angular/compiler-cli": "^21.1.1",
+    "@types/express": "~5.0.6",
+    "@types/jasmine": "~6.0.0",
     "@types/js-yaml": "^4.0.9",
-    "@types/node": "^24.10.0",
-    "angular-eslint": "^20.5.1",
-    "eslint": "^9.39.1",
+    "@types/node": "^25.0.10",
+    "angular-eslint": "^21.1.0",
+    "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-prettier": "^5.5.4",
-    "jasmine-core": "~5.12.1",
+    "eslint-plugin-prettier": "^5.5.5",
+    "jasmine-core": "~6.0.1",
     "karma": "~6.4.4",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.1",
     "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "~2.1.0",
-    "prettier": "^3.6.2",
+    "prettier": "^3.8.1",
     "prettier-eslint": "^16.4.2",
     "style-loader": "^4.0.0",
     "typescript": "~5.9.3",
-    "typescript-eslint": "^8.46.3"
+    "typescript-eslint": "^8.53.1"
   }
 }

package.json

@@ -101,12 +101,22 @@ export class RouteService {
       routes: [
         {
           name: 'Json To Yaml',
-          title: 'Json To Yaml',
+          title: 'JSON to YAML Converter',
           url: '/convert/json-yaml',
-          description: 'Convert JSON data to YAML format with ease, preserving structure and readability.',
+          description:
+            'Convert JSON data to YAML format with property case transformation options including camelCase, snake_case, and more.',
           loadComponent: () =>
             import('../converters/c-json-yaml/c-json-yaml.component').then((mod) => mod.CJsonYamlComponent),
         },
+        {
+          name: 'Yaml To Json',
+          title: 'YAML to JSON Converter',
+          url: '/convert/yaml-json',
+          description:
+            'Convert YAML data to JSON format with property case transformation options including camelCase, snake_case, and more.',
+          loadComponent: () =>
+            import('../converters/c-yaml-json/c-yaml-json.component').then((mod) => mod.CYamlJsonComponent),
+        },
       ],
     },
     {

src/app/_services/route.service.ts

@@ -1,9 +1,21 @@
 import { Observable } from 'rxjs';
+import { signal, WritableSignal } from '@angular/core';
+
+export interface ConverterOption {
+  key: string;
+  label: string;
+  type: 'select' | 'checkbox';
+  options?: { value: string; label: string }[];
+  value: WritableSignal<string | boolean>;
+}
 
 export abstract class ConverterServiceBase {
   abstract title: string;
   abstract languageFrom: string;
   abstract languageTo: string;
   abstract routeName: string;
   abstract convert(input: string): Observable<string>;
+
+  /** Optional configuration options for this converter */
+  converterOptions: ConverterOption[] = [];
 }

src/app/converters/_services/converter.service.ts

@@ -1,18 +1,88 @@
-import { Injectable } from '@angular/core';
+import { Injectable, signal } from '@angular/core';
 
 import * as yaml from 'js-yaml';
 import { Observable, of } from 'rxjs';
-import { ConverterServiceBase } from './converter.service';
+import { ConverterOption, ConverterServiceBase } from './converter.service';
+
+export type PropertyCaseFormat = 'original' | 'camelCase' | 'PascalCase' | 'snake_case' | 'kebab-case' | 'CONSTANT_CASE';
 
 @Injectable()
 export class JsonToYamlConverter extends ConverterServiceBase {
   override title = 'Json to Yaml';
   override languageFrom = 'json';
   override languageTo = 'yaml';
   override routeName = 'Json To Yaml';
+
+  private propertyCaseFormat = signal<string>('original');
+
+  override converterOptions: ConverterOption[] = [
+    {
+      key: 'propertyCase',
+      label: 'Property Case',
+      type: 'select',
+      options: [
+        { value: 'original', label: 'Original' },
+        { value: 'camelCase', label: 'camelCase' },
+        { value: 'PascalCase', label: 'PascalCase' },
+        { value: 'snake_case', label: 'snake_case' },
+        { value: 'kebab-case', label: 'kebab-case' },
+        { value: 'CONSTANT_CASE', label: 'CONSTANT_CASE' },
+      ],
+      value: this.propertyCaseFormat,
+    },
+  ];
+
   override convert(input: string): Observable<string> {
     if (!input) return of('');
-    const json = JSON.parse(input);
+    let json = JSON.parse(input);
+    const caseFormat = this.propertyCaseFormat() as PropertyCaseFormat;
+    if (caseFormat !== 'original') {
+      json = this.transformKeys(json, caseFormat);
+    }
     return of(yaml.dump(json));
   }
+
+  private transformKeys(obj: unknown, format: PropertyCaseFormat): unknown {
+    if (Array.isArray(obj)) {
+      return obj.map((item) => this.transformKeys(item, format));
+    }
+    if (obj !== null && typeof obj === 'object') {
+      const result: Record<string, unknown> = {};
+      for (const [key, value] of Object.entries(obj)) {
+        const newKey = this.convertCase(key, format);
+        result[newKey] = this.transformKeys(value, format);
+      }
+      return result;
+    }
+    return obj;
+  }
+
+  private convertCase(str: string, format: PropertyCaseFormat): string {
+    // Split by common separators (camelCase, PascalCase, snake_case, kebab-case, spaces)
+    const words = str
+      .replace(/([a-z])([A-Z])/g, '$1 $2') // camelCase/PascalCase split
+      .replace(/[_\-\s]+/g, ' ') // normalize separators
+      .toLowerCase()
+      .split(' ')
+      .filter((w) => w.length > 0);
+
+    switch (format) {
+      case 'camelCase':
+        return words.map((w, i) => (i === 0 ? w : this.capitalize(w))).join('');
+      case 'PascalCase':
+        return words.map((w) => this.capitalize(w)).join('');
+      case 'snake_case':
+        return words.join('_');
+      case 'kebab-case':
+        return words.join('-');
+      case 'CONSTANT_CASE':
+        return words.join('_').toUpperCase();
+      default:
+        return str;
+    }
+  }
+
+  private capitalize(str: string): string {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+  }
 }

src/app/converters/_services/json-to-yaml.service.ts

@@ -0,0 +1,87 @@
+import { Injectable, signal } from '@angular/core';
+
+import * as yaml from 'js-yaml';
+import { Observable, of } from 'rxjs';
+import { ConverterOption, ConverterServiceBase } from './converter.service';
+
+export type PropertyCaseFormat = 'original' | 'camelCase' | 'PascalCase' | 'snake_case' | 'kebab-case' | 'CONSTANT_CASE';
+
+@Injectable()
+export class YamlToJsonConverter extends ConverterServiceBase {
+  override title = 'Yaml to Json';
+  override languageFrom = 'yaml';
+  override languageTo = 'json';
+  override routeName = 'Yaml To Json';
+
+  private propertyCaseFormat = signal<string>('original');
+
+  override converterOptions: ConverterOption[] = [
+    {
+      key: 'propertyCase',
+      label: 'Property Case',
+      type: 'select',
+      options: [
+        { value: 'original', label: 'Original' },
+        { value: 'camelCase', label: 'camelCase' },
+        { value: 'PascalCase', label: 'PascalCase' },
+        { value: 'snake_case', label: 'snake_case' },
+        { value: 'kebab-case', label: 'kebab-case' },
+        { value: 'CONSTANT_CASE', label: 'CONSTANT_CASE' },
+      ],
+      value: this.propertyCaseFormat,
+    },
+  ];
+
+  override convert(input: string): Observable<string> {
+    if (!input) return of('');
+    let parsed = yaml.load(input);
+    const caseFormat = this.propertyCaseFormat() as PropertyCaseFormat;
+    if (caseFormat !== 'original') {
+      parsed = this.transformKeys(parsed, caseFormat);
+    }
+    return of(JSON.stringify(parsed, null, 2));
+  }
+
+  private transformKeys(obj: unknown, format: PropertyCaseFormat): unknown {
+    if (Array.isArray(obj)) {
+      return obj.map((item) => this.transformKeys(item, format));
+    }
+    if (obj !== null && typeof obj === 'object') {
+      const result: Record<string, unknown> = {};
+      for (const [key, value] of Object.entries(obj)) {
+        const newKey = this.convertCase(key, format);
+        result[newKey] = this.transformKeys(value, format);
+      }
+      return result;
+    }
+    return obj;
+  }
+
+  private convertCase(str: string, format: PropertyCaseFormat): string {
+    const words = str
+      .replace(/([a-z])([A-Z])/g, '$1 $2')
+      .replace(/[_\-\s]+/g, ' ')
+      .toLowerCase()
+      .split(' ')
+      .filter((w) => w.length > 0);
+
+    switch (format) {
+      case 'camelCase':
+        return words.map((w, i) => (i === 0 ? w : this.capitalize(w))).join('');
+      case 'PascalCase':
+        return words.map((w) => this.capitalize(w)).join('');
+      case 'snake_case':
+        return words.join('_');
+      case 'kebab-case':
+        return words.join('-');
+      case 'CONSTANT_CASE':
+        return words.join('_').toUpperCase();
+      default:
+        return str;
+    }
+  }
+
+  private capitalize(str: string): string {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+  }
+}

src/app/converters/_services/yaml-to-json.service.ts

@@ -0,0 +1 @@
+<app-convert-view></app-convert-view>

src/app/converters/c-yaml-json/c-yaml-json.component.html

@@ -0,0 +1 @@
+/* No component-specific styles needed */

src/app/converters/c-yaml-json/c-yaml-json.component.scss

@@ -0,0 +1,16 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { ConverterServiceBase } from '../_services/converter.service';
+import { YamlToJsonConverter } from '../_services/yaml-to-json.service';
+import { ConvertViewComponent } from '../convert-view/convert-view.component';
+
+@Component({
+  selector: 'app-c-yaml-json',
+  templateUrl: './c-yaml-json.component.html',
+  styleUrls: ['./c-yaml-json.component.scss'],
+  providers: [{ provide: ConverterServiceBase, useClass: YamlToJsonConverter }],
+  imports: [CommonModule, FormsModule, ConvertViewComponent],
+  host: { class: 'host-flex-container' }
+})
+export class CYamlJsonComponent {}