From 038dfdd9a57e6964ea7f508a7609871bf48c99cd Mon Sep 17 00:00:00 2001 From: Adithya Jagadeesh Date: Sun, 9 Mar 2025 15:38:46 +0530 Subject: [PATCH 1/3] 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(''); + const [result, setResult] = useState(''); + const formRef = useRef>(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 ( + + + } + result={} + /> + + + + + + []} + formRef={formRef} + setInput={setInput} + /> + + ); +} 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' }; + } +}; From d7587d526ad272af5d086fc27bfc290e83298f23 Mon Sep 17 00:00:00 2001 From: Adithya Jagadeesh Date: Sun, 9 Mar 2025 15:46:47 +0530 Subject: [PATCH 2/3] Feature: Added Json Validation #issue42 --- src/pages/tools/json/validateJson/index.tsx | 21 ++++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) diff --git a/src/pages/tools/json/validateJson/index.tsx b/src/pages/tools/json/validateJson/index.tsx index 66aa9e7..c3cdfc7 100644 --- a/src/pages/tools/json/validateJson/index.tsx +++ b/src/pages/tools/json/validateJson/index.tsx @@ -15,7 +15,8 @@ import { ToolComponentProps } from '@tools/defineTool'; const exampleCards: CardExampleType<{}>[] = [ { title: 'Valid JSON Object', - description: 'This example shows a correctly formatted 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, @@ -27,19 +28,19 @@ const exampleCards: CardExampleType<{}>[] = [ { title: 'Invalid JSON Missing Quotes', description: - 'This example shows an invalid JSON structure where property names are missing quotes.', + '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 ", + 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.', + '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, @@ -63,6 +64,7 @@ export default function ValidateJson({ title }: ToolComponentProps) { const compute = (input: string) => { const { valid, error } = validateJson(input); + if (valid) { setResult('✅ Valid JSON'); } else { @@ -81,7 +83,16 @@ export default function ValidateJson({ title }: ToolComponentProps) { From 84612700242077851fd2ace7672d5a79d8d987cf Mon Sep 17 00:00:00 2001 From: "Ibrahima G. Coulibaly" Date: Sun, 9 Mar 2025 15:49:44 +0000 Subject: [PATCH 3/3] refactor: validateJson --- .idea/workspace.xml | 24 ++++--- src/pages/tools/json/validateJson/index.tsx | 69 +++++++------------ .../validateJson/{servcie.ts => service.ts} | 27 ++++---- 3 files changed, 53 insertions(+), 67 deletions(-) rename src/pages/tools/json/validateJson/{servcie.ts => service.ts} (86%) diff --git a/.idea/workspace.xml b/.idea/workspace.xml index f9a3ff9..15b429f 100644 --- a/.idea/workspace.xml +++ b/.idea/workspace.xml @@ -6,7 +6,8 @@ - + + - { - "history": [ + +}]]> { "prStates": [ { @@ -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 @@ - + @@ -240,10 +244,10 @@ + - diff --git a/src/pages/tools/json/validateJson/index.tsx b/src/pages/tools/json/validateJson/index.tsx index c3cdfc7..39333af 100644 --- a/src/pages/tools/json/validateJson/index.tsx +++ b/src/pages/tools/json/validateJson/index.tsx @@ -1,16 +1,10 @@ -import { Box } from '@mui/material'; -import React, { useRef, useState, useEffect } from 'react'; +import React, { useState } 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 { CardExampleType } from '@components/examples/ToolExamples'; +import { validateJson } from './service'; import { ToolComponentProps } from '@tools/defineTool'; +import ToolContent from '@components/ToolContent'; const exampleCards: CardExampleType<{}>[] = [ { @@ -54,15 +48,8 @@ const exampleCards: CardExampleType<{}>[] = [ export default function ValidateJson({ title }: ToolComponentProps) { const [input, setInput] = useState(''); const [result, setResult] = useState(''); - const formRef = useRef>(null); - useEffect(() => { - if (input) { - compute(input); - } - }, [input]); - - const compute = (input: string) => { + const compute = (options: any, input: string) => { const { valid, error } = validateJson(input); if (valid) { @@ -73,37 +60,33 @@ export default function ValidateJson({ title }: ToolComponentProps) { }; return ( - - - } - result={} - /> - - + } + resultComponent={ + + } + 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 `{}`. + - 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. - " - /> - - - - []} - formRef={formRef} - setInput={setInput} - /> - + ` + }} + exampleCards={exampleCards} + input={input} + setInput={setInput} + compute={compute} + /> ); } diff --git a/src/pages/tools/json/validateJson/servcie.ts b/src/pages/tools/json/validateJson/service.ts similarity index 86% rename from src/pages/tools/json/validateJson/servcie.ts rename to src/pages/tools/json/validateJson/service.ts index 400c1bb..2d53367 100644 --- a/src/pages/tools/json/validateJson/servcie.ts +++ b/src/pages/tools/json/validateJson/service.ts @@ -1,14 +1,13 @@ -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' }; - } -}; +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' }; + } +};