refactor: tool options components

src/components/input/ToolTextInput.tsx

@@ -23,7 +23,7 @@ export default function ToolTextInput({
       .writeText(value)
       .then(() => showSnackBar('Text copied', 'success'))
       .catch((err) => {
-        showSnackBar('Failed to copy: ', err);
+        showSnackBar('Failed to copy: ' + err, 'error');
       });
   };
   const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {

src/components/options/CheckboxWithDesc.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Box, Checkbox, FormControlLabel, Typography } from '@mui/material';
+
+const CheckboxWithDesc = ({
+  title,
+  description,
+  checked,
+  onChange
+}: {
+  title: string;
+  description: string;
+  checked: boolean;
+  onChange: (value: boolean) => void;
+}) => {
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    onChange(event.target.checked);
+  };
+
+  return (
+    <Box>
+      <FormControlLabel
+        control={
+          <Checkbox defaultChecked checked={checked} onChange={handleChange} />
+        }
+        label={title}
+      />
+      <Typography fontSize={12} mt={1}>
+        {description}
+      </Typography>
+    </Box>
+  );
+};
+
+export default CheckboxWithDesc;

src/components/options/RadioWithTextField.tsx

@@ -0,0 +1,46 @@
+import { SplitOperatorType } from '../../pages/string/split/service';
+import { Box, Stack } from '@mui/material';
+import { Field } from 'formik';
+import Typography from '@mui/material/Typography';
+import React from 'react';
+import TextFieldWithDesc from './TextFieldWithDesc';
+
+const RadioWithTextField = <T,>({
+  fieldName,
+  type,
+  title,
+  onTypeChange,
+  value,
+  description,
+  onTextChange
+}: {
+  fieldName: string;
+  title: string;
+  type: T;
+  onTypeChange: (val: T) => void;
+  value: string;
+  description: string;
+  onTextChange: (value: string) => void;
+}) => {
+  const onChange = () => onTypeChange(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>
+      <TextFieldWithDesc
+        value={value}
+        onChange={onTextChange}
+        description={description}
+      />
+    </Box>
+  );
+};
+export default RadioWithTextField;

src/components/options/TextFieldWithDesc.tsx

@@ -0,0 +1,31 @@
+import { Box, TextField } from '@mui/material';
+import Typography from '@mui/material/Typography';
+import React from 'react';
+
+const TextFieldWithDesc = ({
+  description,
+  value,
+  onChange,
+  placeholder
+}: {
+  description: string;
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+}) => {
+  return (
+    <Box>
+      <TextField
+        placeholder={placeholder}
+        sx={{ backgroundColor: 'white' }}
+        value={value}
+        onChange={(event) => onChange(event.target.value)}
+      />
+      <Typography fontSize={12} mt={1}>
+        {description}
+      </Typography>
+    </Box>
+  );
+};
+
+export default TextFieldWithDesc;

src/pages/string/join/index.tsx

@@ -12,9 +12,11 @@ import { Formik, FormikProps, useFormikContext } from 'formik';
 import * as Yup from 'yup';
 import ToolTextInput from '../../../components/input/ToolTextInput';
 import ToolTextResult from '../../../components/result/ToolTextResult';
-import ToolOptions from '../../../components/ToolOptions';
+import ToolOptions from '../../../components/options/ToolOptions';
 import { mergeText } from './service';
 import { CustomSnackBarContext } from '../../../contexts/CustomSnackBarContext';
+import TextFieldWithDesc from '../../../components/options/TextFieldWithDesc';
+import CheckboxWithDesc from '../../../components/options/CheckboxWithDesc';
 
 const initialValues = {
   joinCharacter: '',
@@ -52,66 +54,8 @@ const blankTrailingOptions: {
   }
 ];
 
-const InputWithDesc = ({
-  placeholder,
-  description,
-  value,
-  onChange
-}: {
-  placeholder: string;
-  description: string;
-  value: string;
-  onChange: (value: string) => void;
-}) => {
-  return (
-    <Box width={240}>
-      <TextField
-        sx={{ backgroundColor: 'white', padding: 0 }}
-        size="small"
-        placeholder={placeholder}
-        value={value}
-        onChange={(event) => onChange(event.target.value)}
-      />
-      <Typography fontSize={12} mt={1}>
-        {description}
-      </Typography>
-    </Box>
-  );
-};
-
-const CheckboxWithDesc = ({
-  title,
-  description,
-  checked,
-  onChange
-}: {
-  title: string;
-  description: string;
-  checked: boolean;
-  onChange: (value: boolean) => void;
-}) => {
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    onChange(event.target.checked);
-  };
-
-  return (
-    <Box>
-      <FormControlLabel
-        control={
-          <Checkbox defaultChecked checked={checked} onChange={handleChange} />
-        }
-        label={title}
-      />
-      <Typography fontSize={12} mt={1}>
-        {description}
-      </Typography>
-    </Box>
-  );
-};
-
 export default function JoinText() {
   const [input, setInput] = useState<string>('');
-  const formRef = useRef<FormikProps<typeof initialValues>>(null);
   const { showSnackBar } = useContext(CustomSnackBarContext);
   const [result, setResult] = useState<string>('');
 
@@ -121,7 +65,6 @@ export default function JoinText() {
 
     useEffect(() => {
       try {
-        console.log('Form values:', values['joinCharacter']);
         setResult(mergeText(input, deleteBlank, deleteTrailing, joinCharacter));
       } catch (exception: unknown) {
         if (exception instanceof Error)
@@ -129,7 +72,6 @@ export default function JoinText() {
       }
     }, [values, input]);
 
-    console.log('deleteBlank', deleteBlank);
     return null;
   };
 
@@ -151,7 +93,6 @@ export default function JoinText() {
         <Formik
           initialValues={initialValues}
           validationSchema={validationSchema}
-          innerRef={formRef}
           onSubmit={() => {}}
         >
           {({ setFieldValue, values }) => (
@@ -159,7 +100,7 @@ export default function JoinText() {
               <FormikListenerComponent input={input} />
               <Box>
                 <Typography fontSize={22}>Text Merged Options</Typography>
-                <InputWithDesc
+                <TextFieldWithDesc
                   placeholder={mergeOptions.placeholder}
                   value={values['joinCharacter']}
                   onChange={(value) =>

src/pages/string/split/index.tsx

@@ -6,9 +6,11 @@ import ToolTextInput from '../../../components/input/ToolTextInput';
 import ToolTextResult from '../../../components/result/ToolTextResult';
 import { Field, Formik, FormikProps, useFormikContext } from 'formik';
 import * as Yup from 'yup';
-import ToolOptions from '../../../components/ToolOptions';
+import ToolOptions from '../../../components/options/ToolOptions';
 import { compute, SplitOperatorType } from './service';
 import { CustomSnackBarContext } from '../../../contexts/CustomSnackBarContext';
+import RadioWithTextField from '../../../components/options/RadioWithTextField';
+import TextFieldWithDesc from '../../../components/options/TextFieldWithDesc';
 
 const initialValues = {
   splitSeparatorType: 'symbol' as SplitOperatorType,
@@ -74,72 +76,11 @@ const outputOptions: {
     accessor: 'charAfterChunk'
   }
 ];
-const CustomRadioButton = ({
-  fieldName,
-  type,
-  title,
-  onTypeChange,
-  value,
-  description,
-  onTextChange
-}: {
-  fieldName: string;
-  title: string;
-  type: SplitOperatorType;
-  onTypeChange: (val: string) => void;
-  value: string;
-  description: string;
-  onTextChange: (value: string) => void;
-}) => {
-  const onChange = () => onTypeChange(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>
-      <InputWithDesc
-        value={value}
-        onChange={onTextChange}
-        description={description}
-      />
-    </Box>
-  );
-};
-
-const InputWithDesc = ({
-  description,
-  value,
-  onChange
-}: {
-  description: string;
-  value: string;
-  onChange: (value: string) => void;
-}) => {
-  return (
-    <Box>
-      <TextField
-        sx={{ backgroundColor: 'white' }}
-        value={value}
-        onChange={(event) => onChange(event.target.value)}
-      />
-      <Typography fontSize={12} mt={1}>
-        {description}
-      </Typography>
-    </Box>
-  );
-};
 
 export default function SplitText() {
   const [input, setInput] = useState<string>('');
   const [result, setResult] = useState<string>('');
-  const formRef = useRef<FormikProps<typeof initialValues>>(null);
+  // const formRef = useRef<FormikProps<typeof initialValues>>(null);
   const { showSnackBar } = useContext(CustomSnackBarContext);
 
   const FormikListenerComponent = () => {
@@ -197,7 +138,6 @@ export default function SplitText() {
         <Formik
           initialValues={initialValues}
           validationSchema={validationSchema}
-          innerRef={formRef}
           onSubmit={() => {}}
         >
           {({ setFieldValue, values }) => (
@@ -206,7 +146,7 @@ export default function SplitText() {
               <Box>
                 <Typography fontSize={22}>Split separator options</Typography>
                 {splitOperators.map(({ title, description, type }) => (
-                  <CustomRadioButton
+                  <RadioWithTextField
                     key={type}
                     type={type}
                     title={title}
@@ -223,7 +163,7 @@ export default function SplitText() {
               <Box>
                 <Typography fontSize={22}>Output separator options</Typography>
                 {outputOptions.map((option) => (
-                  <InputWithDesc
+                  <TextFieldWithDesc
                     key={option.accessor}
                     value={values[option.accessor]}
                     onChange={(value) => setFieldValue(option.accessor, value)}