feat: json pretty

Author: iib0011

.idea/workspace.xml

@@ -27,8 +27,6 @@
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
-    "@hugeicons/core-free-icons": "^1.0.10",
-    "@hugeicons/react": "^1.0.3",
     "@mui/icons-material": "^5.15.20",
     "@mui/material": "^5.15.20",
     "@playwright/test": "^1.45.0",

package-lock.json

@@ -79,6 +79,7 @@ import React from 'react';
 import * as Yup from 'yup';
 
 const initialValues = {};
+type InitialValuesType = typeof initialValues;
 const validationSchema = Yup.object({
   // splitSeparator: Yup.string().required('The separator is required')
 });

package.json

@@ -17,7 +17,7 @@ export interface ExampleCardProps<T> {
   sampleText: string;
   sampleResult: string;
   sampleOptions: T;
-  changeInputResult: (newOptions: T) => void;
+  changeInputResult: (newInput: string, newOptions: T) => void;
   getGroups: GetGroupsType<T>;
 }
 
@@ -35,7 +35,7 @@ export default function ExampleCard<T>({
     <Card
       raised
       onClick={() => {
-        changeInputResult(sampleOptions);
+        changeInputResult(sampleText, sampleOptions);
       }}
       sx={{
         bgcolor: theme.palette.background.default,

scripts/create-tool.mjs

@@ -15,16 +15,19 @@ export interface ExampleProps<T> {
   exampleCards: CardExampleType<T>[];
   getGroups: GetGroupsType<T>;
   formRef: React.RefObject<FormikProps<T>>;
+  setInput: React.Dispatch<React.SetStateAction<string>>;
 }
 
 export default function ToolExamples<T>({
   title,
   subtitle,
   exampleCards,
   getGroups,
-  formRef
+  formRef,
+  setInput
 }: ExampleProps<T>) {
-  function changeInputResult(newOptions: T) {
+  function changeInputResult(newInput: string, newOptions: T) {
+    setInput(newInput);
     formRef.current?.setValues(newOptions);
     const toolsElement = document.getElementById('tool');
     if (toolsElement) {

src/components/examples/ExampleCard.tsx

@@ -1,12 +1,12 @@
 import { getToolsByCategory } from '@tools/index';
 import Grid from '@mui/material/Grid';
 import { Card, CardContent, Stack } from '@mui/material';
-import { HugeiconsIcon } from '@hugeicons/react';
 import { Link, useNavigate } from 'react-router-dom';
 import Typography from '@mui/material/Typography';
 import Button from '@mui/material/Button';
 import { useState } from 'react';
 import { categoriesColors } from 'config/uiConfig';
+import { Icon } from '@iconify/react';
 
 type ArrayElement<ArrayType extends readonly unknown[]> =
   ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
@@ -20,7 +20,6 @@ const SingleCategory = function ({
 }) {
   const navigate = useNavigate();
   const [hovered, setHovered] = useState<boolean>(false);
-  const Icon = category.icon;
   const toggleHover = () => setHovered((prevState) => !prevState);
   return (
     <Grid
@@ -38,8 +37,9 @@ const SingleCategory = function ({
       >
         <CardContent>
           <Stack direction={'row'} spacing={2} alignItems={'center'}>
-            <HugeiconsIcon
-              icon={Icon}
+            <Icon
+              icon={category.icon}
+              fontSize={'60px'}
               style={{
                 transform: `scale(${hovered ? 1.1 : 1}`
               }}

src/components/examples/ToolExamples.tsx

@@ -179,6 +179,7 @@ export default function JoinText({ title }: ToolComponentProps) {
         exampleCards={exampleCards}
         getGroups={getGroups}
         formRef={formRef}
+        setInput={setInput}
       />
     </Box>
   );

src/pages/home/Categories.tsx

@@ -211,6 +211,7 @@ export default function SplitText({ title }: ToolComponentProps) {
         exampleCards={exampleCards}
         getGroups={getGroups}
         formRef={formRef}
+        setInput={setInput}
       />
     </Box>
   );

src/pages/tools/string/join/index.tsx

@@ -12,7 +12,13 @@ interface ToolOptions {
   shortDescription: string;
 }
 
-export type ToolCategory = 'string' | 'png' | 'number' | 'gif' | 'list';
+export type ToolCategory =
+  | 'string'
+  | 'png'
+  | 'number'
+  | 'gif'
+  | 'list'
+  | 'json';
 
 export interface DefinedTool {
   type: ToolCategory;