feat: minify json

src/components/ToolContent.tsx

@@ -17,7 +17,7 @@ interface ToolContentPropsBase<T, I> extends ToolComponentProps {
 
   // Tool options
   initialValues: T;
-  getGroups: GetGroupsType<T>;
+  getGroups: GetGroupsType<T> | null;
 
   // Computation function
   compute: (optionsValues: T, input: I) => void;

src/components/examples/ExampleCard.tsx

@@ -18,7 +18,7 @@ export interface ExampleCardProps<T> {
   sampleResult: string;
   sampleOptions: T;
   changeInputResult: (newInput: string, newOptions: T) => void;
-  getGroups: GetGroupsType<T>;
+  getGroups: GetGroupsType<T> | null;
 }
 
 export default function ExampleCard<T>({

src/components/examples/ExampleOptions.tsx

@@ -7,12 +7,12 @@ export default function ExampleOptions<T>({
   getGroups
 }: {
   options: T;
-  getGroups: GetGroupsType<T>;
+  getGroups: GetGroupsType<T> | null;
 }) {
   return (
     <ToolOptionGroups
       // @ts-ignore
-      groups={getGroups({ values: options })}
+      groups={getGroups?.({ values: options }) ?? []}
       vertical
     />
   );

src/components/examples/ToolExamples.tsx

@@ -13,7 +13,7 @@ export interface ExampleProps<T> {
   title: string;
   subtitle?: string;
   exampleCards: CardExampleType<T>[];
-  getGroups: GetGroupsType<T>;
+  getGroups: GetGroupsType<T> | null;
   formRef: React.RefObject<FormikProps<T>>;
   setInput: React.Dispatch<React.SetStateAction<any>>;
 }

src/components/options/ToolOptions.tsx

@@ -86,44 +86,45 @@ export default function ToolOptions<T extends FormikValues>({
   validationSchema?: any | (() => any);
   compute: (optionsValues: T, input: any) => void;
   input?: any;
-  getGroups: GetGroupsType<T>;
+  getGroups: GetGroupsType<T> | null;
   formRef?: RefObject<FormikProps<T>>;
 }) {
   const theme = useTheme();
-  return (
-    <Box
-      sx={{
-        mb: 2,
-        borderRadius: 2,
-        padding: 2,
-        backgroundColor: theme.palette.background.default,
-        boxShadow: '2'
-      }}
-      mt={2}
-    >
-      <Stack direction={'row'} spacing={1} alignItems={'center'}>
-        <SettingsIcon />
-        <Typography fontSize={22}>Tool options</Typography>
-      </Stack>
-      <Box mt={2}>
-        <Formik
-          innerRef={formRef}
-          initialValues={initialValues}
-          validationSchema={validationSchema}
-          onSubmit={() => {}}
-        >
-          {(formikProps) => (
-            <ToolBody
-              compute={compute}
-              input={input}
-              getGroups={getGroups}
-              formikProps={formikProps}
-            >
-              {children}
-            </ToolBody>
-          )}
-        </Formik>
+  if (getGroups)
+    return (
+      <Box
+        sx={{
+          mb: 2,
+          borderRadius: 2,
+          padding: 2,
+          backgroundColor: theme.palette.background.default,
+          boxShadow: '2'
+        }}
+        mt={2}
+      >
+        <Stack direction={'row'} spacing={1} alignItems={'center'}>
+          <SettingsIcon />
+          <Typography fontSize={22}>Tool options</Typography>
+        </Stack>
+        <Box mt={2}>
+          <Formik
+            innerRef={formRef}
+            initialValues={initialValues}
+            validationSchema={validationSchema}
+            onSubmit={() => {}}
+          >
+            {(formikProps) => (
+              <ToolBody
+                compute={compute}
+                input={input}
+                getGroups={getGroups}
+                formikProps={formikProps}
+              >
+                {children}
+              </ToolBody>
+            )}
+          </Formik>
+        </Box>
       </Box>
-    </Box>
-  );
+    );
 }

src/pages/tools/json/index.ts

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

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

@@ -0,0 +1,77 @@
+import React, { useState } from 'react';
+import ToolContent from '@components/ToolContent';
+import ToolTextInput from '@components/input/ToolTextInput';
+import ToolTextResult from '@components/result/ToolTextResult';
+import { minifyJson } from './service';
+import { CardExampleType } from '@components/examples/ToolExamples';
+import { ToolComponentProps } from '@tools/defineTool';
+
+type InitialValuesType = Record<string, never>;
+
+const initialValues: InitialValuesType = {};
+
+const exampleCards: CardExampleType<InitialValuesType>[] = [
+  {
+    title: 'Minify a Simple JSON Object',
+    description:
+      'This example shows how to minify a simple JSON object by removing all unnecessary whitespace.',
+    sampleText: `{
+  "name": "John Doe",
+  "age": 30,
+  "city": "New York"
+}`,
+    sampleResult: `{"name":"John Doe","age":30,"city":"New York"}`,
+    sampleOptions: {}
+  },
+  {
+    title: 'Minify a Nested JSON Structure',
+    description:
+      'This example demonstrates minification of a complex nested JSON structure with arrays and objects.',
+    sampleText: `{
+  "users": [
+    {
+      "id": 1,
+      "name": "Alice",
+      "hobbies": ["reading", "gaming"]
+    },
+    {
+      "id": 2,
+      "name": "Bob",
+      "hobbies": ["swimming", "coding"]
+    }
+  ]
+}`,
+    sampleResult: `{"users":[{"id":1,"name":"Alice","hobbies":["reading","gaming"]},{"id":2,"name":"Bob","hobbies":["swimming","coding"]}]}`,
+    sampleOptions: {}
+  }
+];
+
+export default function MinifyJson({ title }: ToolComponentProps) {
+  const [input, setInput] = useState<string>('');
+  const [result, setResult] = useState<string>('');
+
+  const compute = (_: InitialValuesType, input: string) => {
+    if (input) setResult(minifyJson(input));
+  };
+
+  return (
+    <ToolContent
+      title={title}
+      inputComponent={
+        <ToolTextInput title="Input JSON" value={input} onChange={setInput} />
+      }
+      resultComponent={<ToolTextResult title="Minified JSON" value={result} />}
+      initialValues={initialValues}
+      getGroups={null}
+      toolInfo={{
+        title: 'What Is JSON Minification?',
+        description:
+          "JSON minification is the process of removing all unnecessary whitespace characters from JSON data while maintaining its validity. This includes removing spaces, newlines, and indentation that aren't required for the JSON to be parsed correctly. Minification reduces the size of JSON data, making it more efficient for storage and transmission while keeping the exact same data structure and values."
+      }}
+      exampleCards={exampleCards}
+      input={input}
+      setInput={setInput}
+      compute={compute}
+    />
+  );
+}

src/pages/tools/json/minify/meta.ts

@@ -0,0 +1,12 @@
+import { defineTool } from '@tools/defineTool';
+import { lazy } from 'react';
+
+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.',
+  keywords: ['minify', 'compress', 'minimize', 'json', 'compact'],
+  component: lazy(() => import('./index'))
+});

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

@@ -0,0 +1,10 @@
+export const minifyJson = (text: string) => {
+  let parsedJson;
+  try {
+    parsedJson = JSON.parse(text);
+  } catch (e) {
+    throw new Error('Invalid JSON string');
+  }
+
+  return JSON.stringify(parsedJson);
+};