From 038dfdd9a57e6964ea7f508a7609871bf48c99cd Mon Sep 17 00:00:00 2001
From: Adithya Jagadeesh <selfdev1603@gmail.com>
Date: Sun, 9 Mar 2025 15:38:46 +0530
Subject: [PATCH] feat: add JSON validation utility with detailed error
 messages

---
 src/pages/tools/json/index.ts                |  8 +-
 src/pages/tools/json/validateJson/index.tsx  | 98 ++++++++++++++++++++
 src/pages/tools/json/validateJson/meta.ts    | 13 +++
 src/pages/tools/json/validateJson/servcie.ts | 14 +++
 4 files changed, 132 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/tools/json/validateJson/index.tsx
 create mode 100644 src/pages/tools/json/validateJson/meta.ts
 create mode 100644 src/pages/tools/json/validateJson/servcie.ts

diff --git a/src/pages/tools/json/index.ts b/src/pages/tools/json/index.ts
index cb3e84f..e1f0c67 100644
--- a/src/pages/tools/json/index.ts
+++ b/src/pages/tools/json/index.ts
@@ -1,5 +1,11 @@
 import { tool as jsonPrettify } from './prettify/meta';
 import { tool as jsonMinify } from './minify/meta';
 import { tool as jsonStringify } from './stringify/meta';
+import { tool as validateJson } from './validateJson/meta';
 
-export const jsonTools = [jsonPrettify, jsonMinify, jsonStringify];
+export const jsonTools = [
+  validateJson,
+  jsonPrettify,
+  jsonMinify,
+  jsonStringify
+];
diff --git a/src/pages/tools/json/validateJson/index.tsx b/src/pages/tools/json/validateJson/index.tsx
new file mode 100644
index 0000000..66aa9e7
--- /dev/null
+++ b/src/pages/tools/json/validateJson/index.tsx
@@ -0,0 +1,98 @@
+import { Box } from '@mui/material';
+import React, { useRef, useState, useEffect } from 'react';
+import ToolTextInput from '@components/input/ToolTextInput';
+import ToolTextResult from '@components/result/ToolTextResult';
+import ToolInputAndResult from '@components/ToolInputAndResult';
+import ToolInfo from '@components/ToolInfo';
+import Separator from '@components/Separator';
+import ToolExamples, {
+  CardExampleType
+} from '@components/examples/ToolExamples';
+import { FormikProps } from 'formik';
+import { validateJson } from './servcie';
+import { ToolComponentProps } from '@tools/defineTool';
+
+const exampleCards: CardExampleType<{}>[] = [
+  {
+    title: 'Valid JSON Object',
+    description: 'This example shows a correctly formatted JSON object.',
+    sampleText: `{
+  "name": "John",
+  "age": 30,
+  "city": "New York"
+}`,
+    sampleResult: '✅ Valid JSON',
+    sampleOptions: {}
+  },
+  {
+    title: 'Invalid JSON Missing Quotes',
+    description:
+      'This example shows an invalid JSON structure where property names are missing quotes.',
+    sampleText: `{
+  name: "John",
+  age: 30,
+  city: "New York"
+}`,
+    sampleResult: "❌ Error: Expected property name or '}' in JSON ",
+    sampleOptions: {}
+  },
+  {
+    title: 'Invalid JSON with Trailing Comma',
+    description:
+      'This example shows an invalid JSON with a trailing comma at the end of the object.',
+    sampleText: `{
+  "name": "John",
+  "age": 30,
+  "city": "New York",
+}`,
+    sampleResult: '❌ Error: Expected double-quoted property name',
+    sampleOptions: {}
+  }
+];
+
+export default function ValidateJson({ title }: ToolComponentProps) {
+  const [input, setInput] = useState<string>('');
+  const [result, setResult] = useState<string>('');
+  const formRef = useRef<FormikProps<{}>>(null);
+
+  useEffect(() => {
+    if (input) {
+      compute(input);
+    }
+  }, [input]);
+
+  const compute = (input: string) => {
+    const { valid, error } = validateJson(input);
+    if (valid) {
+      setResult('✅ Valid JSON');
+    } else {
+      setResult(`❌ ${error}`);
+    }
+  };
+
+  return (
+    <Box>
+      <ToolInputAndResult
+        input={
+          <ToolTextInput title="Input JSON" value={input} onChange={setInput} />
+        }
+        result={<ToolTextResult title="Validation Result" value={result} />}
+      />
+
+      <ToolInfo
+        title="What is JSON Validation?"
+        description="JSON validation checks the syntax and structure of a JSON file to ensure it follows proper JSON format."
+      />
+
+      <Separator backgroundColor="#5581b5" margin="50px" />
+
+      <ToolExamples
+        title={title}
+        exampleCards={exampleCards}
+        getGroups={() => []}
+        formRef={formRef}
+        setInput={setInput}
+      />
+    </Box>
+  );
+}
diff --git a/src/pages/tools/json/validateJson/meta.ts b/src/pages/tools/json/validateJson/meta.ts
new file mode 100644
index 0000000..379bb11
--- /dev/null
+++ b/src/pages/tools/json/validateJson/meta.ts
@@ -0,0 +1,13 @@
+import { defineTool } from '@tools/defineTool';
+import { lazy } from 'react';
+
+export const tool = defineTool('json', {
+  name: 'Validate JSON',
+  path: 'validateJson',
+  icon: 'lets-icons:json-light',
+  description:
+    'Validate JSON data and identify formatting issues such as missing quotes, trailing commas, and incorrect brackets.',
+  shortDescription: 'Quickly validate a JSON data structure.',
+  keywords: ['validate', 'json', 'syntax'],
+  component: lazy(() => import('./index'))
+});
diff --git a/src/pages/tools/json/validateJson/servcie.ts b/src/pages/tools/json/validateJson/servcie.ts
new file mode 100644
index 0000000..400c1bb
--- /dev/null
+++ b/src/pages/tools/json/validateJson/servcie.ts
@@ -0,0 +1,14 @@
+export const validateJson = (
+  input: string
+): { valid: boolean; error?: string } => {
+  try {
+    JSON.parse(input);
+    return { valid: true };
+  } catch (error) {
+    if (error instanceof SyntaxError) {
+      const message = error.message;
+      return { valid: false, error: error.message };
+    }
+    return { valid: false, error: 'Unknown error occurred' };
+  }
+};