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/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..39333af --- /dev/null +++ b/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(''); + const [result, setResult] = useState(''); + + const compute = (options: any, input: string) => { + const { valid, error } = validateJson(input); + + if (valid) { + setResult('✅ Valid JSON'); + } else { + setResult(`❌ ${error}`); + } + }; + + return ( + + } + 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 {}. + - 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} + /> + ); +} 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/service.ts b/src/pages/tools/json/validateJson/service.ts new file mode 100644 index 0000000..2d53367 --- /dev/null +++ b/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' }; + } +};