marcel/omni-tools
1
0
Fork 0
mirror of https://github.com/iib0011/omni-tools.git synced 2025-09-20 22:49:33 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: stringify json

Browse Source
This commit is contained in:
Ibrahima G. Coulibaly
2025-03-08 07:11:57 +00:00
parent 90d3c0801e
commit f678c76200
9 changed files with 243 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
.idea/workspace.xml generated
View File

@@ -4,17 +4,17 @@
<option name="autoReloadType" value="SELECTIVE" />
</component>
<component name="ChangeListManager">
<list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="chore: smooth scroll for use this tool and examles">
<change afterPath="$PROJECT_DIR$/src/pages/tools/json/minify/index.tsx" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/pages/tools/json/minify/meta.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/pages/tools/json/minify/service.ts" afterDir="false" />
<list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="feat: minify json">
<change afterPath="$PROJECT_DIR$/.codebuddy/docs/Stringify JSON - Online JSON Tools.txt" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/pages/tools/json/stringify/index.tsx" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/pages/tools/json/stringify/meta.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/pages/tools/json/stringify/service.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/ToolContent.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ToolContent.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/examples/ExampleCard.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/examples/ExampleCard.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/examples/ExampleOptions.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/examples/ExampleOptions.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/examples/ToolExamples.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/examples/ToolExamples.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/options/ToolOptions.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/options/ToolOptions.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/tools/json/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/json/index.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/tools/json/minify/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/json/minify/meta.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/tools/json/prettify/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/json/prettify/index.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/utils/string.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/utils/string.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/tsconfig.json" beforeDir="false" afterPath="$PROJECT_DIR$/tsconfig.json" afterDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -337,14 +337,6 @@
<workItem from="1740923024259" duration="23000" />
<workItem from="1740933006573" duration="3679000" />
</task>
<task id="LOCAL-00094" summary="feat: reverse list ui">
<option name="closed" value="true" />
<created>1720658257129</created>
<option name="number" value="00094" />
<option name="presentableId" value="LOCAL-00094" />
<option name="project" value="LOCAL" />
<updated>1720658257129</updated>
</task>
<task id="LOCAL-00095" summary="feat: self host">
<option name="closed" value="true" />
<created>1720665220407</created>
@@ -729,7 +721,15 @@
<option name="project" value="LOCAL" />
<updated>1741414797155</updated>
</task>
<option name="localTasksCounter" value="143" />
<task id="LOCAL-00143" summary="feat: minify json">
<option name="closed" value="true" />
<created>1741416193639</created>
<option name="number" value="00143" />
<option name="presentableId" value="LOCAL-00143" />
<option name="project" value="LOCAL" />
<updated>1741416193639</updated>
</task>
<option name="localTasksCounter" value="144" />
<servers />
</component>
<component name="TypeScriptGeneratedFilesManager">
@@ -788,7 +788,6 @@
<option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" />
<option name="CHECK_NEW_TODO" value="false" />
<option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
<MESSAGE value="feat: ui changes" />
<MESSAGE value="fix: readme" />
<MESSAGE value="fix: broken links" />
<MESSAGE value="chore: style buttons" />
@@ -813,7 +812,8 @@
<MESSAGE value="style: optimizations" />
<MESSAGE value="fix: replace text service" />
<MESSAGE value="chore: smooth scroll for use this tool and examles" />
<option name="LAST_COMMIT_MESSAGE" value="chore: smooth scroll for use this tool and examles" />
<MESSAGE value="feat: minify json" />
<option name="LAST_COMMIT_MESSAGE" value="feat: minify json" />
</component>
<component name="XSLT-Support.FileAssociations.UIState">
<expand />

3
src/pages/tools/json/index.ts
View File

@@ -1,4 +1,5 @@
import { tool as jsonPrettify } from './prettify/meta';
import { tool as jsonMinify } from './minify/meta';
import { tool as jsonStringify } from './stringify/meta';
export const jsonTools = [jsonPrettify, jsonMinify];
export const jsonTools = [jsonPrettify, jsonMinify, jsonStringify];

5
src/pages/tools/json/minify/meta.ts
View File

@@ -5,8 +5,9 @@ export const tool = defineTool('json', {
name: 'Minify JSON',
path: 'minify',
icon: 'lets-icons:json-light',
description: 'Minify your JSON by removing all unnecessary whitespace and formatting. This tool compresses JSON data to its smallest possible size while maintaining valid JSON structure.',
shortDescription: 'Remove all unnecessary whitespace from JSON data.',
description:
'Minify your JSON by removing all unnecessary whitespace and formatting. This tool compresses JSON data to its smallest possible size while maintaining valid JSON structure.',
shortDescription: 'Quickly compress JSON file.',
keywords: ['minify', 'compress', 'minimize', 'json', 'compact'],
component: lazy(() => import('./index'))
});

4
src/pages/tools/json/prettify/index.tsx
View File

@@ -15,7 +15,7 @@ import { FormikProps } from 'formik';
import { ToolComponentProps } from '@tools/defineTool';
import RadioWithTextField from '@components/options/RadioWithTextField';
import SimpleRadio from '@components/options/SimpleRadio';
import { isNumber } from '../../../../utils/string';
import { isNumber, updateNumberField } from '../../../../utils/string';
type InitialValuesType = {
indentationType: 'tab' | 'space';
@@ -141,7 +141,7 @@ export default function PrettifyJson({ title }: ToolComponentProps) {
value={values.spacesCount.toString()}
onRadioClick={() => updateField('indentationType', 'space')}
onTextChange={(val) =>
isNumber(val) ? updateField('spacesCount', Number(val)) : null
updateNumberField(val, 'spacesCount', updateField)
}
/>
<SimpleRadio

157
src/pages/tools/json/stringify/index.tsx Normal file
View File

@@ -0,0 +1,157 @@
import { Box } from '@mui/material';
import React, { useState } from 'react';
import ToolContent from '@components/ToolContent';
import ToolTextInput from '@components/input/ToolTextInput';
import ToolTextResult from '@components/result/ToolTextResult';
import { stringifyJson } from './service';
import { ToolComponentProps } from '@tools/defineTool';
import RadioWithTextField from '@components/options/RadioWithTextField';
import SimpleRadio from '@components/options/SimpleRadio';
import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
import { isNumber, updateNumberField } from '@utils/string';
import { CardExampleType } from '@components/examples/ToolExamples';
type InitialValuesType = {
indentationType: 'tab' | 'space';
spacesCount: number;
escapeHtml: boolean;
};
const initialValues: InitialValuesType = {
indentationType: 'space',
spacesCount: 2,
escapeHtml: false
};
const exampleCards: CardExampleType<InitialValuesType>[] = [
{
title: 'Simple Object to JSON',
description: 'Convert a basic JavaScript object into a JSON string.',
sampleText: `{ name: "John", age: 30 }`,
sampleResult: `{
"name": "John",
"age": 30
}`,
sampleOptions: {
indentationType: 'space',
spacesCount: 2,
escapeHtml: false
}
},
{
title: 'Array with Mixed Types',
description:
'Convert an array containing different types of values into JSON.',
sampleText: `[1, "hello", true, null, { x: 10 }]`,
sampleResult: `[
1,
"hello",
true,
null,
{
"x": 10
}
]`,
sampleOptions: {
indentationType: 'space',
spacesCount: 4,
escapeHtml: false
}
},
{
title: 'HTML-Escaped JSON',
description: 'Convert an object to JSON with HTML characters escaped.',
sampleText: `{
html: "<div>Hello & Welcome</div>",
message: "Special chars: < > & ' \\""
}`,
sampleResult: `{
&quot;html&quot;: &quot;&lt;div&gt;Hello &amp; Welcome&lt;/div&gt;&quot;,
&quot;message&quot;: &quot;Special chars: &lt; &gt; &amp; &#039; &quot;&quot;
}`,
sampleOptions: {
indentationType: 'space',
spacesCount: 2,
escapeHtml: true
}
}
];
export default function StringifyJson({ title }: ToolComponentProps) {
const [input, setInput] = useState<string>('');
const [result, setResult] = useState<string>('');
const compute = (values: InitialValuesType, input: string) => {
if (input) {
setResult(
stringifyJson(
input,
values.indentationType,
values.spacesCount,
values.escapeHtml
)
);
}
};
return (
<ToolContent
title={title}
input={input}
setInput={setInput}
initialValues={initialValues}
compute={compute}
exampleCards={exampleCards}
inputComponent={
<ToolTextInput
title="JavaScript Object/Array"
value={input}
onChange={setInput}
/>
}
resultComponent={<ToolTextResult title="JSON String" value={result} />}
getGroups={({ values, updateField }) => [
{
title: 'Indentation',
component: (
<Box>
<RadioWithTextField
checked={values.indentationType === 'space'}
title="Use Spaces"
fieldName="indentationType"
description="Indent output with spaces"
value={values.spacesCount.toString()}
onRadioClick={() => updateField('indentationType', 'space')}
onTextChange={(val) =>
updateNumberField(val, 'spacesCount', updateField)
}
/>
<SimpleRadio
onClick={() => updateField('indentationType', 'tab')}
checked={values.indentationType === 'tab'}
description="Indent output with tabs"
title="Use Tabs"
/>
</Box>
)
},
{
title: 'Options',
component: (
<CheckboxWithDesc
checked={values.escapeHtml}
onChange={(value) => updateField('escapeHtml', value)}
title="Escape HTML Characters"
description="Convert HTML special characters to their entity references"
/>
)
}
]}
toolInfo={{
title: 'What Is JSON Stringify?',
description:
'JSON Stringify is a tool that converts JavaScript objects and arrays into their JSON string representation. It properly formats the output with customizable indentation and offers the option to escape HTML special characters, making it safe for web usage. This tool is particularly useful when you need to serialize data structures for storage or transmission, or when you need to prepare JSON data for HTML embedding.'
}}
/>
);
}

12
src/pages/tools/json/stringify/meta.ts Normal file
View File

@@ -0,0 +1,12 @@
import { defineTool } from '@tools/defineTool';
import { lazy } from 'react';
export const tool = defineTool('json', {
name: 'Stringify JSON',
path: 'stringify',
icon: 'lets-icons:json-format-light',
description: 'Convert JavaScript objects and arrays into their JSON string representation. Options include custom indentation and HTML character escaping for web-safe JSON strings.',
shortDescription: 'Convert JavaScript objects to JSON strings',
keywords: ['stringify', 'serialize', 'convert', 'object', 'array', 'json', 'string'],
component: lazy(() => import('./index'))
});

28
src/pages/tools/json/stringify/service.ts Normal file
View File

@@ -0,0 +1,28 @@
export const stringifyJson = (
input: string,
indentationType: 'tab' | 'space',
spacesCount: number,
escapeHtml: boolean
): string => {
let parsedInput;
try {
// Safely evaluate the input string as JavaScript
parsedInput = eval('(' + input + ')');
} catch (e) {
throw new Error('Invalid JavaScript object/array');
}
const indent = indentationType === 'tab' ? '\t' : ' '.repeat(spacesCount);
let result = JSON.stringify(parsedInput, null, indent);
if (escapeHtml) {
result = result
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#039;');
}
return result;
};

16
src/utils/string.ts
View File

@@ -1,3 +1,5 @@
import { UpdateField } from '@components/options/ToolOptions';
export function capitalizeFirstLetter(string: string | undefined) {
if (!string) return '';
return string.charAt(0).toUpperCase() + string.slice(1);
@@ -7,6 +9,20 @@ export function isNumber(number: any) {
return !isNaN(parseFloat(number)) && isFinite(number);
}
export const updateNumberField = <T>(
val: string,
key: keyof T,
updateField: UpdateField<T>
) => {
if (val === '') {
// @ts-ignore
updateField(key, '');
} else if (isNumber(val)) {
// @ts-ignore
updateField(key, Number(val));
}
};
export const replaceSpecialCharacters = (str: string) => {
return str
.replace(/\\"/g, '"')

3
tsconfig.json
View File

@@ -33,6 +33,9 @@
],
"@components/*": [
"./components/*"
],
"@utils/*": [
"./utils/*"
]
}
},