Merge pull request #44 from ady-cf/feature/validate-json

feat: added Json Validation

.idea/workspace.xml

@@ -6,7 +6,8 @@
   <component name="ChangeListManager">
     <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="chore: remove unnecessary files">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/tools/string/text-replacer/service.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/string/text-replacer/service.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/json/validateJson/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/json/validateJson/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/json/validateJson/servcie.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/json/validateJson/service.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -29,16 +30,19 @@
     <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
     <option name="RESET_MODE" value="HARD" />
   </component>
-  <component name="GitHubPullRequestSearchHistory">{
-  &quot;history&quot;: [
+  <component name="GitHubPullRequestSearchHistory"><![CDATA[{
+  "history": [
     {
-      &quot;assignee&quot;: &quot;iib0011&quot;
+      "assignee": "iib0011"
+    },
+    {
+      "state": "OPEN"
     }
   ],
-  &quot;lastFilter&quot;: {
-    &quot;assignee&quot;: &quot;iib0011&quot;
+  "lastFilter": {
+    "assignee": "iib0011"
   }
-}</component>
+}]]></component>
   <component name="GitHubPullRequestState">{
   &quot;prStates&quot;: [
     {
@@ -116,7 +120,7 @@
     "Vitest.removeDuplicateLines function.newlines option.should filter newlines when newlines is set to filter.executor": "Run",
     "Vitest.replaceText function (regexp mode).should return the original text when passed an invalid regexp.executor": "Run",
     "Vitest.replaceText function.executor": "Run",
-    "git-widget-placeholder": "main",
+    "git-widget-placeholder": "#44 on fork/ady-cf/feature/validate-json",
     "ignore.virus.scanning.warn.message": "true",
     "kotlin-language-version-configured": "true",
     "last_opened_file_path": "C:/Users/Ibrahima/IdeaProjects/omni-tools/.husky",
@@ -167,7 +171,7 @@
       <recent name="C:\Users\HP\IdeaProjects\omni-tools\src\components\options" />
     </key>
   </component>
-  <component name="RunManager" selected="Vitest.replaceText function (regexp mode).should return the original text when passed an invalid regexp">
+  <component name="RunManager" selected="npm.dev">
     <configuration name="replaceText function (regexp mode).should return the original text when passed an invalid regexp" type="JavaScriptTestRunnerVitest" temporary="true" nameIsGenerated="true">
       <node-interpreter value="project" />
       <vitest-package value="$PROJECT_DIR$/node_modules/vitest" />
@@ -240,10 +244,10 @@
     </list>
     <recent_temporary>
       <list>
+        <item itemvalue="npm.dev" />
         <item itemvalue="Vitest.replaceText function (regexp mode).should return the original text when passed an invalid regexp" />
         <item itemvalue="npm.test" />
         <item itemvalue="npm.test:e2e" />
-        <item itemvalue="npm.dev" />
         <item itemvalue="Vitest.replaceText function" />
       </list>
     </recent_temporary>

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
+];

src/pages/tools/json/validateJson/index.tsx

@@ -0,0 +1,92 @@
+import React, { useState } from 'react';
+import ToolTextInput from '@components/input/ToolTextInput';
+import ToolTextResult from '@components/result/ToolTextResult';
+import { CardExampleType } from '@components/examples/ToolExamples';
+import { validateJson } from './service';
+import { ToolComponentProps } from '@tools/defineTool';
+import ToolContent from '@components/ToolContent';
+
+const exampleCards: CardExampleType<{}>[] = [
+  {
+    title: 'Valid JSON Object',
+    description:
+      'This example shows a correctly formatted JSON object. All property names and string values are enclosed in double quotes, and the overall structure is properly balanced with opening and closing braces.',
+    sampleText: `{
+  "name": "John",
+  "age": 30,
+  "city": "New York"
+}`,
+    sampleResult: '✅ Valid JSON',
+    sampleOptions: {}
+  },
+  {
+    title: 'Invalid JSON Missing Quotes',
+    description:
+      'This example demonstrates an invalid JSON object where the property names are not enclosed in double quotes. According to the JSON standard, property names must always be enclosed in double quotes. Omitting the quotes will result in a syntax error.',
+    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 object with a trailing comma after the last key-value pair. In JSON, trailing commas are not allowed because they create ambiguity when parsing the data structure.',
+    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 compute = (options: any, input: string) => {
+    const { valid, error } = validateJson(input);
+
+    if (valid) {
+      setResult('✅ Valid JSON');
+    } else {
+      setResult(`❌ ${error}`);
+    }
+  };
+
+  return (
+    <ToolContent
+      title={title}
+      inputComponent={
+        <ToolTextInput title="Input JSON" value={input} onChange={setInput} />
+      }
+      resultComponent={
+        <ToolTextResult title="Validation Result" value={result} />
+      }
+      initialValues={{}}
+      getGroups={null}
+      toolInfo={{
+        title: 'What is JSON Validation?',
+        description: `
+          JSON (JavaScript Object Notation) is a lightweight data-interchange format.
+          JSON validation ensures that the structure of the data conforms to the JSON standard.
+          A valid JSON object must have:
+          - Property names enclosed in double quotes.
+          - Properly balanced curly braces {}.
+          - No trailing commas after the last key-value pair.
+          - Proper nesting of objects and arrays.
+          This tool checks the input JSON and provides feedback to help identify and fix common errors.
+          `
+      }}
+      exampleCards={exampleCards}
+      input={input}
+      setInput={setInput}
+      compute={compute}
+    />
+  );
+}

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'))
+});

src/pages/tools/json/validateJson/service.ts

@@ -0,0 +1,13 @@
+export const validateJson = (
+  input: string
+): { valid: boolean; error?: string } => {
+  try {
+    JSON.parse(input);
+    return { valid: true };
+  } catch (error) {
+    if (error instanceof SyntaxError) {
+      return { valid: false, error: error.message };
+    }
+    return { valid: false, error: 'Unknown error occurred' };
+  }
+};