chore: split string tools ui

2025-09-14 19:49:32 +02:00 · 2024-06-21 20:06:07 +01:00
parent a6bd9ddd78
commit 2d30028775
17 changed files with 443 additions and 72 deletions
--- a/.eslintrc
+++ b/.eslintrc
@@ -15,7 +15,7 @@
    "plugin:react/recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
-    "plugin:prettier/recommended",
+    //    "plugin:prettier/recommended",
    "plugin:tailwindcss/recommended"
  ],
  "parser": "@typescript-eslint/parser",
@@ -26,7 +26,12 @@
    "ecmaVersion": 11,
    "sourceType": "module"
  },
-  "plugins": ["react", "react-hooks", "@typescript-eslint", "tailwindcss"],
+  "plugins": [
+    "react",
+    "react-hooks",
+    "@typescript-eslint",
+    "tailwindcss"
+  ],
  "rules": {
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn",
--- a/.idea/codeStyles/Project.xml
+++ b/.idea/codeStyles/Project.xml
@@ -0,0 +1,61 @@
+<component name="ProjectCodeStyleConfiguration">
+  <code_scheme name="Project" version="173">
+    <HTMLCodeStyleSettings>
+      <option name="HTML_SPACE_INSIDE_EMPTY_TAG" value="true" />
+    </HTMLCodeStyleSettings>
+    <JSCodeStyleSettings version="0">
+      <option name="USE_SEMICOLON_AFTER_STATEMENT" value="false" />
+      <option name="FORCE_SEMICOLON_STYLE" value="true" />
+      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
+      <option name="USE_DOUBLE_QUOTES" value="false" />
+      <option name="FORCE_QUOTE_STYlE" value="true" />
+      <option name="ENFORCE_TRAILING_COMMA" value="Remove" />
+      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
+      <option name="SPACES_WITHIN_IMPORTS" value="true" />
+    </JSCodeStyleSettings>
+    <TypeScriptCodeStyleSettings version="0">
+      <option name="USE_SEMICOLON_AFTER_STATEMENT" value="false" />
+      <option name="FORCE_SEMICOLON_STYLE" value="true" />
+      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
+      <option name="USE_DOUBLE_QUOTES" value="false" />
+      <option name="FORCE_QUOTE_STYlE" value="true" />
+      <option name="ENFORCE_TRAILING_COMMA" value="Remove" />
+      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
+      <option name="SPACES_WITHIN_IMPORTS" value="true" />
+    </TypeScriptCodeStyleSettings>
+    <VueCodeStyleSettings>
+      <option name="INTERPOLATION_NEW_LINE_AFTER_START_DELIMITER" value="false" />
+      <option name="INTERPOLATION_NEW_LINE_BEFORE_END_DELIMITER" value="false" />
+    </VueCodeStyleSettings>
+    <codeStyleSettings language="HTML">
+      <option name="SOFT_MARGINS" value="80" />
+      <indentOptions>
+        <option name="INDENT_SIZE" value="2" />
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+        <option name="TAB_SIZE" value="2" />
+      </indentOptions>
+    </codeStyleSettings>
+    <codeStyleSettings language="JavaScript">
+      <option name="SOFT_MARGINS" value="80" />
+      <indentOptions>
+        <option name="INDENT_SIZE" value="2" />
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+        <option name="TAB_SIZE" value="2" />
+      </indentOptions>
+    </codeStyleSettings>
+    <codeStyleSettings language="TypeScript">
+      <option name="SOFT_MARGINS" value="80" />
+      <indentOptions>
+        <option name="INDENT_SIZE" value="2" />
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+        <option name="TAB_SIZE" value="2" />
+      </indentOptions>
+    </codeStyleSettings>
+    <codeStyleSettings language="Vue">
+      <option name="SOFT_MARGINS" value="80" />
+      <indentOptions>
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+      </indentOptions>
+    </codeStyleSettings>
+  </code_scheme>
+</component>
--- a/.idea/codeStyles/codeStyleConfig.xml
+++ b/.idea/codeStyles/codeStyleConfig.xml
@@ -0,0 +1,5 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="USE_PER_PROJECT_SETTINGS" value="true" />
+  </state>
+</component>
--- a/.idea/inspectionProfiles/Project_Default.xml
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+  </profile>
+</component>
--- a/.idea/modules.xml
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/omni-tools.iml" filepath="$PROJECT_DIR$/.idea/omni-tools.iml" />
+    </modules>
+  </component>
+</project>
--- a/.idea/omni-tools.iml
+++ b/.idea/omni-tools.iml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
--- a/.idea/vcs.xml
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,5 +1,4 @@
 {
  "trailingComma": "none",
-  "semi": false,
  "singleQuote": true
 }
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,10 +13,12 @@
        "@mui/icons-material": "^5.15.20",
        "@mui/material": "^5.15.20",
        "@types/lodash": "^4.17.5",
+        "formik": "^2.4.6",
        "lodash": "^4.17.21",
        "react": "^18.3.1",
        "react-dom": "^18.3.1",
-        "react-router-dom": "^6.23.1"
+        "react-router-dom": "^6.23.1",
+        "yup": "^1.4.0"
      },
      "devDependencies": {
        "@testing-library/jest-dom": "^6.4.5",
@@ -1972,6 +1974,15 @@
      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
      "dev": true
    },
+    "node_modules/@types/hoist-non-react-statics": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz",
+      "integrity": "sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==",
+      "dependencies": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
    "node_modules/@types/json-schema": {
      "version": "7.0.15",
      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -3222,6 +3233,14 @@
      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
      "dev": true
    },
+    "node_modules/deepmerge": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
+      "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/define-data-property": {
      "version": "1.1.4",
      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
@@ -4113,6 +4132,30 @@
        "url": "https://github.com/sponsors/isaacs"
      }
    },
+    "node_modules/formik": {
+      "version": "2.4.6",
+      "resolved": "https://registry.npmjs.org/formik/-/formik-2.4.6.tgz",
+      "integrity": "sha512-A+2EI7U7aG296q2TLGvNapDNTZp1khVt5Vk0Q/fyfSROss0V/V6+txt2aJnwEos44IxTCW/LYAi/zgWzlevj+g==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://opencollective.com/formik"
+        }
+      ],
+      "dependencies": {
+        "@types/hoist-non-react-statics": "^3.3.1",
+        "deepmerge": "^2.1.1",
+        "hoist-non-react-statics": "^3.3.0",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "react-fast-compare": "^2.0.1",
+        "tiny-warning": "^1.0.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
    "node_modules/fraction.js": {
      "version": "4.3.7",
      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
@@ -5158,6 +5201,11 @@
      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
    },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
    "node_modules/lodash.merge": {
      "version": "4.6.2",
      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -6005,6 +6053,11 @@
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
    },
+    "node_modules/property-expr": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.6.tgz",
+      "integrity": "sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA=="
+    },
    "node_modules/punycode": {
      "version": "2.3.1",
      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -6057,6 +6110,11 @@
        "react": "^18.3.1"
      }
    },
+    "node_modules/react-fast-compare": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
+      "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
+    },
    "node_modules/react-is": {
      "version": "17.0.2",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -6913,6 +6971,16 @@
        "node": ">=0.8"
      }
    },
+    "node_modules/tiny-case": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz",
+      "integrity": "sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q=="
+    },
+    "node_modules/tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+    },
    "node_modules/tinybench": {
      "version": "2.8.0",
      "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.8.0.tgz",
@@ -6957,6 +7025,11 @@
        "node": ">=8.0"
      }
    },
+    "node_modules/toposort": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
+      "integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg=="
+    },
    "node_modules/totalist": {
      "version": "3.0.1",
      "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
@@ -7007,8 +7080,7 @@
    "node_modules/tslib": {
      "version": "2.6.3",
      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz",
-      "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==",
-      "dev": true
+      "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ=="
    },
    "node_modules/type-check": {
      "version": "0.4.0",
@@ -7634,6 +7706,28 @@
      "funding": {
        "url": "https://github.com/sponsors/sindresorhus"
      }
+    },
+    "node_modules/yup": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/yup/-/yup-1.4.0.tgz",
+      "integrity": "sha512-wPbgkJRCqIf+OHyiTBQoJiP5PFuAXaWiJK6AmYkzQAh5/c2K9hzSApBZG5wV9KoKSePF7sAxmNSvh/13YHkFDg==",
+      "dependencies": {
+        "property-expr": "^2.0.5",
+        "tiny-case": "^1.0.3",
+        "toposort": "^2.0.2",
+        "type-fest": "^2.19.0"
+      }
+    },
+    "node_modules/yup/node_modules/type-fest": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
+      "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
+      "engines": {
+        "node": ">=12.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
    }
  }
 }
--- a/package.json
+++ b/package.json
@@ -27,10 +27,12 @@
    "@mui/icons-material": "^5.15.20",
    "@mui/material": "^5.15.20",
    "@types/lodash": "^4.17.5",
+    "formik": "^2.4.6",
    "lodash": "^4.17.21",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
-    "react-router-dom": "^6.23.1"
+    "react-router-dom": "^6.23.1",
+    "yup": "^1.4.0"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^6.4.5",
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -1,23 +1,22 @@
-import {BrowserRouter, useRoutes} from "react-router-dom";
-import routesConfig from "../config/routesConfig";
-import Navbar from "./Navbar";
-import {Suspense} from "react";
-import Loading from "./Loading";
-import {ThemeProvider} from "@mui/material";
-import theme from "../config/muiConfig";
+import { BrowserRouter, useRoutes } from 'react-router-dom'
+import routesConfig from '../config/routesConfig'
+import Navbar from './Navbar'
+import { Suspense } from 'react'
+import Loading from './Loading'
+import { ThemeProvider } from '@mui/material'
+import theme from '../config/muiConfig'

 const AppRoutes = () => {
-  return useRoutes(routesConfig);
-};
+  return useRoutes(routesConfig)
+}

 function App() {
-
  return (
    <ThemeProvider theme={theme}>
      <BrowserRouter>
-        <Navbar/>
-        <Suspense fallback={<Loading/>}>
-          <AppRoutes/>
+        <Navbar />
+        <Suspense fallback={<Loading />}>
+          <AppRoutes />
        </Suspense>
      </BrowserRouter>
    </ThemeProvider>
--- a/src/components/Loading.tsx
+++ b/src/components/Loading.tsx
@@ -1,7 +1,7 @@
-import Typography from "@mui/material/Typography";
-import {useState} from "react";
-import Box from "@mui/material/Box";
-import {useTimeout} from "../hooks";
+import Typography from '@mui/material/Typography'
+import { useState } from 'react'
+import Box from '@mui/material/Box'
+import { useTimeout } from '../hooks'

 export type FuseLoadingProps = {
  delay?: number;
@@ -12,12 +12,12 @@ export type FuseLoadingProps = {
 * FuseLoading displays a loading state with an optional delay
 */
 function FuseLoading(props: FuseLoadingProps) {
-  const {delay = 0, className} = props;
-  const [showLoading, setShowLoading] = useState(!delay);
+  const { delay = 0, className } = props
+  const [showLoading, setShowLoading] = useState(!delay)

  useTimeout(() => {
-    setShowLoading(true);
-  }, delay);
+    setShowLoading(true)
+  }, delay)

  return (
    <div
@@ -26,22 +26,22 @@ function FuseLoading(props: FuseLoadingProps) {
        className="-mb-16 text-13 font-medium sm:text-20"
        color="text.secondary"
      >
-        Chargement
+        Loading
      </Typography>
      <Box
        id="spinner"
        sx={{
-          "& > div": {
-            backgroundColor: "palette.secondary.main",
-          },
+          '& > div': {
+            backgroundColor: 'palette.secondary.main'
+          }
        }}
      >
-        <div className="bounce1"/>
-        <div className="bounce2"/>
-        <div className="bounce3"/>
+        <div className="bounce1" />
+        <div className="bounce2" />
+        <div className="bounce3" />
      </Box>
    </div>
-  );
+  )
 }

-export default FuseLoading;
+export default FuseLoading
--- a/src/components/input/ToolTextInput.tsx
+++ b/src/components/input/ToolTextInput.tsx
@@ -0,0 +1,31 @@
+import { Box, Stack, TextField } from '@mui/material'
+import Typography from '@mui/material/Typography'
+import Button from '@mui/material/Button'
+import PublishIcon from '@mui/icons-material/Publish'
+import ContentPasteIcon from '@mui/icons-material/ContentPaste'
+import React from 'react'
+
+export default function ToolTextInput({ value, onChange, title = 'Input text' }: {
+  title?: string;
+  value: string
+  onChange: (value: string) => void
+}) {
+  return (
+    <Box>
+      <Typography fontSize={30} color={'primary'}>
+        {title}
+      </Typography>
+      <TextField
+        value={value}
+        onChange={(event) => onChange(event.target.value)}
+        fullWidth
+        multiline
+        rows={10}
+      />
+      <Stack mt={1} direction={'row'} spacing={2}>
+        <Button startIcon={<PublishIcon />}>Import from file</Button>
+        <Button startIcon={<ContentPasteIcon />}>Copy to clipboard</Button>
+      </Stack>
+    </Box>
+  )
+}
--- a/src/components/result/ToolTextResult.tsx
+++ b/src/components/result/ToolTextResult.tsx
@@ -0,0 +1,21 @@
+import Typography from '@mui/material/Typography'
+import { Box, Stack, TextField } from '@mui/material'
+import Button from '@mui/material/Button'
+import DownloadIcon from '@mui/icons-material/Download'
+import ContentPasteIcon from '@mui/icons-material/ContentPaste'
+import React from 'react'
+
+export default function ToolTextResult({ title = 'Result', value }: { title?: string; value: string }) {
+  return (
+    <Box>
+      <Typography fontSize={30} color={'primary'}>
+        {title}
+      </Typography>
+      <TextField value={value} fullWidth multiline rows={10} />
+      <Stack mt={1} direction={'row'} spacing={2}>
+        <Button startIcon={<DownloadIcon />}>Save as</Button>
+        <Button startIcon={<ContentPasteIcon />}>Copy to clipboard</Button>
+      </Stack>
+    </Box>
+  )
+}
--- a/src/config/muiConfig.ts
+++ b/src/config/muiConfig.ts
@@ -1,11 +1,12 @@
-import {createTheme} from "@mui/material";
+import { createTheme } from '@mui/material'

 const theme = createTheme({
  typography: {
    button: {
      textTransform: 'none'
    }
-  }
-});
+  },
+  palette: { background: { default: '#ebf5ff' } }
+})

-export default theme;
+export default theme
--- a/src/pages/images/png/change-colors-in-png/index.tsx
+++ b/src/pages/images/png/change-colors-in-png/index.tsx
@@ -1,5 +1,5 @@
 import { Box } from "@mui/material";

-export default function ChangeColorsInPng(){
-  return(<Box></Box>)
+export default function ChangeColorsInPng() {
+  return <Box></Box>;
 }
--- a/src/pages/string/split/index.tsx
+++ b/src/pages/string/split/index.tsx
@@ -1,45 +1,169 @@
-import ToolHeader from "../../../components/ToolHeader";
-import ToolLayout from "../../../components/ToolLayout";
-import {Box, Stack, TextField} from "@mui/material";
-import Grid from "@mui/material/Grid";
-import Typography from "@mui/material/Typography";
-import Button from "@mui/material/Button";
-import PublishIcon from '@mui/icons-material/Publish';
-import ContentPasteIcon from '@mui/icons-material/ContentPaste';
-import DownloadIcon from '@mui/icons-material/Download';
-import React, {useEffect, useState} from "react";
+import ToolHeader from '../../../components/ToolHeader'
+import ToolLayout from '../../../components/ToolLayout'
+import { Box, Radio, Stack, TextField, useTheme } from '@mui/material'
+import Grid from '@mui/material/Grid'
+import Typography from '@mui/material/Typography'
+import Button from '@mui/material/Button'
+import PublishIcon from '@mui/icons-material/Publish'
+import ContentPasteIcon from '@mui/icons-material/ContentPaste'
+import DownloadIcon from '@mui/icons-material/Download'
+import React, { useEffect, useRef, useState } from 'react'
+import ToolTextInput from '../../../components/input/ToolTextInput'
+import ToolTextResult from '../../../components/result/ToolTextResult'
+import SettingsIcon from '@mui/icons-material/Settings'
+import { Field, Formik, FormikProps } from 'formik'
+import * as Yup from 'yup'

+type SplitOperatorType = 'symbol' | 'regex' | 'length' | 'chunks';
+const initialValues = {
+  splitSeparatorType: 'symbol',
+  splitSeparator: ' '
+}
+const initialSplitOperators: {
+  title: string;
+  description: string;
+  defaultValue: string;
+  type: SplitOperatorType
+}[] = [{
+  title: 'Use a Symbol for Splitting', description: 'Character that will be used to\n' +
+    'break text into parts.\n' +
+    '(Space by default.)',
+  defaultValue: ' ',
+  type: 'symbol'
+},
+  {
+    title: 'Use a Regex for Splitting',
+    defaultValue: '/\\s+/',
+    type: 'regex',
+    description: 'Regular expression that will be\n' +
+      'used to break text into parts.\n' +
+      '(Multiple spaces by default.)'
+  },
+  {
+    title: 'Use Length for Splitting', description: 'Number of symbols that will be\n' +
+      'put in each output chunk.',
+    defaultValue: '16',
+    type: 'length'
+  },
+  {
+    title: 'Use a Number of Chunks', description: 'Number of chunks of equal\n' +
+      'length in the output.',
+    defaultValue: '4',
+    type: 'chunks'
+  }]
+
+const CustomRadioButton = ({
+                             fieldName,
+                             type,
+                             title,
+                             setFieldValue,
+                             value,
+                             description,
+                             onTextChange
+                           }: {
+  fieldName: string;
+  title: string;
+  type: SplitOperatorType;
+  setFieldValue: (fieldName: string, val: string) => void;
+  value: string;
+  description: string;
+  onTextChange: (type: SplitOperatorType, value: string) => void;
+}) => {
+  const onChange = () => setFieldValue(fieldName, type)
+  return (<Box>
+      <Stack direction={'row'} sx={{ mt: 2, mb: 1, cursor: 'pointer' }} onClick={onChange} alignItems={'center'}
+             spacing={1}>
+        <Field
+          type="radio"
+          name={fieldName}
+          value={type}
+          onChange={onChange}
+        />
+        <Typography>{title}</Typography>
+      </Stack>
+      <TextField sx={{ backgroundColor: 'white' }} value={value}
+                 onChange={event => onTextChange(type, event.target.value)} />
+      <Typography fontSize={12} mt={1}>{description}</Typography>
+    </Box>
+  )
+}
 export default function SplitText() {
-  const [input, setInput] = useState<string>('');
+  const [input, setInput] = useState<string>('')
  const [result, setResult] = useState<string>('')
+  const formRef = useRef<FormikProps<typeof initialValues>>()
+  const theme = useTheme()
+  const [splitOperators, setSplitOperators] = useState<{
+    title: string;
+    description: string;
+    defaultValue: string;
+    type: SplitOperatorType;
+    value: string
+  }[]>(initialSplitOperators.map(operator => ({ ...operator, value: operator.defaultValue })))
  useEffect(() => {
    setResult(input.split(' ').join('\n'))
-  }, [input]);
+  }, [input])
+
+  const validationSchema = Yup.object({
+    splitSeparator: Yup.string().required('The separator is required')
+  })
+
+  const onSplitOperatorTextChange = (type: SplitOperatorType, value: string) => {
+    const splitOperatorsClone = [...splitOperators].map(splitOperator => {
+      if (splitOperator.type === type) {
+        splitOperator.value = value
+      }
+      return splitOperator
+    })
+    setSplitOperators(splitOperatorsClone)
+  }
  return (
    <ToolLayout>
-      <ToolHeader title={"Text Splitter"}
-                  description={"World's simplest browser-based utility for splitting text. Load your text in the input form on the left and you'll automatically get pieces of this text on the right. Powerful, free, and fast. Load text – get chunks."}/>
+      <ToolHeader
+        title={'Text Splitter'}
+        description={
+          'World\'s simplest browser-based utility for splitting text. Load your text in the input form on the left and you\'ll automatically get pieces of this text on the right. Powerful, free, and fast. Load text – get chunks.'
+        }
+      />

      <Grid container spacing={2}>
        <Grid item xs={6}>
-          <Typography fontSize={30} color={'primary'}>Input text</Typography>
-          <TextField value={input} onChange={event => setInput(event.target.value)} fullWidth multiline rows={10}/>
-          <Stack mt={1} direction={'row'} spacing={2}>
-            <Button startIcon={<PublishIcon/>}>Import from file</Button>
-            <Button startIcon={<ContentPasteIcon/>}>Copy to clipboard</Button>
-          </Stack>
+          <ToolTextInput value={input} onChange={setInput} />
        </Grid>
        <Grid item xs={6}>
-          <Typography fontSize={30} color={'primary'}>Text pieces</Typography>
-          <TextField value={result} fullWidth multiline rows={10}/>
-          <Stack mt={1} direction={'row'} spacing={2}>
-            <Button startIcon={<DownloadIcon/>}>Save as</Button>
-            <Button startIcon={<ContentPasteIcon/>}>Copy to clipboard</Button>
-          </Stack>
+          <ToolTextResult title={'Text pieces'} value={result} />
        </Grid>
      </Grid>
-      <Box mt={2}>
-
+      <Box sx={{ mb: 2, borderRadius: 2, padding: 2, backgroundColor: theme.palette.background.default }} mt={2}>
+        <Stack direction={'row'} spacing={1} alignItems={'center'}>
+          <SettingsIcon />
+          <Typography fontSize={22}>Tool options</Typography>
+        </Stack>
+        <Formik
+          initialValues={initialValues}
+          validationSchema={validationSchema}
+          innerRef={formRef}
+          onSubmit={() => {
+          }}
+        >
+          {({ setFieldValue }) => (
+            <Stack direction={'row'}>
+              <Box>
+                <Typography fontSize={22}>Split separator options</Typography>
+                {splitOperators.map(({ title, description, type, value }) => <CustomRadioButton
+                  type={type}
+                  title={title}
+                  fieldName={'splitSeparatorType'}
+                  description={description}
+                  value={value}
+                  setFieldValue={setFieldValue}
+                  onTextChange={onSplitOperatorTextChange}
+                />)}
+              </Box>
+              <Box></Box>
+            </Stack>
+          )}
+        </Formik>
      </Box>
-    </ToolLayout>)
+    </ToolLayout>
+  )
 }