Merge remote-tracking branch 'origin/main' into string-join

# Conflicts:
#	src/pages/string/join/index.tsx

src/components/options/ColorSelector.tsx

@@ -0,0 +1,54 @@
+import React, { useState, ChangeEvent, useRef } from 'react';
+import { Box, Stack, TextField } from '@mui/material';
+import PaletteIcon from '@mui/icons-material/Palette';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import { globalDescriptionFontSize } from '../../config/uiConfig';
+
+interface ColorSelectorProps {
+  value: string;
+  onChange: (val: string) => void;
+  description: string;
+}
+
+const ColorSelector: React.FC<ColorSelectorProps> = ({
+  value = '#ffffff',
+  onChange,
+  description
+}) => {
+  const [color, setColor] = useState<string>(value);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleColorChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const val = event.target.value;
+    setColor(val);
+    onChange(val);
+  };
+
+  return (
+    <Box mb={1}>
+      <Stack direction={'row'}>
+        <TextField
+          sx={{ backgroundColor: 'white' }}
+          value={color}
+          onChange={handleColorChange}
+        />
+        <IconButton onClick={() => inputRef.current?.click()}>
+          <PaletteIcon />
+        </IconButton>
+        <TextField
+          style={{ display: 'none' }}
+          inputRef={inputRef}
+          type="color"
+          value={color}
+          onChange={handleColorChange}
+        />
+      </Stack>
+      <Typography fontSize={globalDescriptionFontSize}>
+        {description}
+      </Typography>
+    </Box>
+  );
+};
+
+export default ColorSelector;

src/components/options/RadioWithTextField.tsx

@@ -4,37 +4,38 @@ import { Field } from 'formik';
 import Typography from '@mui/material/Typography';
 import React from 'react';
 import TextFieldWithDesc from './TextFieldWithDesc';
+import { globalDescriptionFontSize } from '../../config/uiConfig';
+import SimpleRadio from './SimpleRadio';
 
 const RadioWithTextField = <T,>({
   fieldName,
-  type,
+  radioValue,
   title,
-  onTypeChange,
+  onRadioChange,
   value,
   description,
-  onTextChange
+  onTextChange,
+  typeDescription
 }: {
   fieldName: string;
   title: string;
-  type: T;
-  onTypeChange: (val: T) => void;
+  radioValue: T;
+  onRadioChange: (val: T) => void;
   value: string;
   description: string;
   onTextChange: (value: string) => void;
+  typeDescription?: string;
 }) => {
-  const onChange = () => onTypeChange(type);
+  const onChange = () => onRadioChange(radioValue);
   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>
+      <SimpleRadio
+        value={radioValue}
+        onChange={onChange}
+        fieldName={fieldName}
+        title={title}
+        description={typeDescription}
+      />
       <TextFieldWithDesc
         value={value}
         onChange={onTextChange}

src/components/options/SimpleRadio.tsx

@@ -0,0 +1,46 @@
+import { Box, Stack } from '@mui/material';
+import { Field } from 'formik';
+import Typography from '@mui/material/Typography';
+import { globalDescriptionFontSize } from '../../config/uiConfig';
+import React from 'react';
+
+interface SimpleRadioProps {
+  onChange: () => void;
+  fieldName: string;
+  value: any;
+  title: string;
+  description?: string;
+}
+
+export default function SimpleRadio({
+  onChange,
+  fieldName,
+  value,
+  title,
+  description
+}: SimpleRadioProps) {
+  return (
+    <Box>
+      <Stack
+        direction={'row'}
+        sx={{ mt: 2, mb: 1, cursor: 'pointer' }}
+        onClick={onChange}
+        alignItems={'center'}
+        spacing={1}
+      >
+        <Field
+          type="radio"
+          name={fieldName}
+          value={value}
+          onChange={onChange}
+        />
+        <Typography>{title}</Typography>
+      </Stack>
+      {description && (
+        <Typography ml={2} fontSize={globalDescriptionFontSize}>
+          {description}
+        </Typography>
+      )}
+    </Box>
+  );
+}

src/components/options/ToolOptionGroups.tsx

@@ -0,0 +1,27 @@
+import Typography from '@mui/material/Typography';
+import React, { ReactNode } from 'react';
+import { Box, Stack } from '@mui/material';
+
+interface ToolOptionGroup {
+  title: string;
+  component: ReactNode;
+}
+
+export default function ToolOptionGroups({
+  groups
+}: {
+  groups: ToolOptionGroup[];
+}) {
+  return (
+    <Stack direction={'row'} spacing={2}>
+      {groups.map((group) => (
+        <Box key={group.title}>
+          <Typography mb={1} fontSize={22}>
+            {group.title}
+          </Typography>
+          {group.component}
+        </Box>
+      ))}
+    </Stack>
+  );
+}