chore: show tooloptions in example

src/components/examples/ExampleCard.tsx

@@ -11,24 +11,29 @@ import {
 import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
 import RequiredOptions from './RequiredOptions';
 
-export default function ExampleCard({
+export default function ExampleCard<T>({
   title,
   description,
   sampleText,
   sampleResult,
   requiredOptions,
-  changeInputResult
-}: ExampleCardProps) {
+  changeInputResult,
+  getGroups
+}: ExampleCardProps<T>) {
   const theme = useTheme();
   return (
     <Card
       raised
+      onClick={() => {
+        changeInputResult(sampleText, sampleResult);
+      }}
       sx={{
         bgcolor: theme.palette.background.default,
         height: '100%',
         overflow: 'hidden',
         borderRadius: 2,
         transition: 'background-color 0.3s ease',
+        cursor: 'pointer',
         '&:hover': {
           boxShadow: '12px 9px 11px 2px #b8b9be, -6px -6px 12px #fff'
         }
@@ -46,7 +51,6 @@ export default function ExampleCard({
           </Typography>
 
           <Box
-            onClick={() => changeInputResult(sampleText, sampleResult)}
             sx={{
               display: 'flex',
               zIndex: '2',
@@ -55,7 +59,6 @@ export default function ExampleCard({
               bgcolor: 'transparent',
               padding: '5px 10px',
               borderRadius: '5px',
-              cursor: 'pointer',
               boxShadow: 'inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #fff;'
             }}
           >
@@ -77,7 +80,6 @@ export default function ExampleCard({
 
           <ArrowDownwardIcon />
           <Box
-            onClick={() => changeInputResult(sampleText, sampleResult)}
             sx={{
               display: 'flex',
               zIndex: '2',
@@ -106,7 +108,7 @@ export default function ExampleCard({
             />
           </Box>
 
-          <RequiredOptions options={requiredOptions} />
+          <RequiredOptions options={requiredOptions} getGroups={getGroups} />
         </Stack>
       </CardContent>
     </Card>

src/components/examples/Examples.tsx

@@ -1,32 +1,33 @@
 import { Box, Grid, Stack, Typography } from '@mui/material';
 import ExampleCard from './ExampleCard';
+import React from 'react';
+import { GetGroupsType } from '@components/options/ToolOptions';
 
-export interface ExampleCardProps {
+export interface ExampleCardProps<T> {
   title: string;
   description: string;
   sampleText: string;
   sampleResult: string;
-  requiredOptions: RequiredOptionsProps;
+  requiredOptions: T;
+  changeInputResult: (input: string, result: string) => void;
+  getGroups: GetGroupsType<T>;
+}
+
+interface ExampleProps<T> {
+  title: string;
+  subtitle: string;
+  exampleCards: ExampleCardProps<T>[];
+  getGroups: GetGroupsType<T>;
   changeInputResult: (input: string, result: string) => void;
 }
 
-export interface RequiredOptionsProps {
-  joinCharacter: string;
-  deleteBlankLines: boolean;
-  deleteTrailingSpaces: boolean;
-}
-
-interface ExampleProps {
-  title: string;
-  subtitle: string;
-  exampleCards: ExampleCardProps[];
-}
-
-export default function Examples({
+export default function Examples<T>({
   title,
   subtitle,
-  exampleCards
-}: ExampleProps) {
+  exampleCards,
+  getGroups,
+  changeInputResult
+}: ExampleProps<T>) {
   return (
     <Box id={'examples'} mt={4}>
       <Box mt={4} display="flex" gap={1} alignItems="center">
@@ -48,7 +49,8 @@ export default function Examples({
                 sampleText={card.sampleText}
                 sampleResult={card.sampleResult}
                 requiredOptions={card.requiredOptions}
-                changeInputResult={card.changeInputResult}
+                getGroups={getGroups}
+                changeInputResult={changeInputResult}
               />
             </Grid>
           ))}

src/components/examples/RequiredOptions.tsx

@@ -1,78 +1,13 @@
-import { Box, Stack, TextField, Typography } from '@mui/material';
-import { RequiredOptionsProps } from './Examples';
-import CheckboxWithDesc from 'components/options/CheckboxWithDesc';
+import ToolOptionGroups from '@components/options/ToolOptionGroups';
+import { GetGroupsType } from '@components/options/ToolOptions';
+import React from 'react';
 
-export default function RequiredOptions({
-  options
+export default function RequiredOptions<T>({
+  options,
+  getGroups
 }: {
-  options: RequiredOptionsProps;
+  options: T;
+  getGroups: GetGroupsType<T>;
 }) {
-  const { joinCharacter, deleteBlankLines, deleteTrailingSpaces } = options;
-
-  const handleBoxClick = () => {
-    const toolsElement = document.getElementById('tool');
-    if (toolsElement) {
-      toolsElement.scrollIntoView({ behavior: 'smooth' });
-    }
-  };
-
-  return (
-    <Stack direction={'column'} alignItems={'left'} spacing={2}>
-      <Typography variant="h5" component="h3" sx={{ marginTop: '5px' }}>
-        Required options
-      </Typography>
-      <Typography variant="body2" component="p">
-        These options will be used automatically if you select this example.
-      </Typography>
-
-      <Box
-        onClick={handleBoxClick}
-        sx={{
-          zIndex: '2',
-          cursor: 'pointer',
-          bgcolor: 'transparent',
-          width: '100%',
-          height: '100%',
-          display: 'flex'
-        }}
-      >
-        <TextField
-          disabled
-          value={joinCharacter}
-          fullWidth
-          rows={1}
-          sx={{
-            '& .MuiOutlinedInput-root': {
-              zIndex: '-1'
-            }
-          }}
-        />
-      </Box>
-
-      {deleteBlankLines ? (
-        <Box onClick={handleBoxClick}>
-          <CheckboxWithDesc
-            title="Delete Blank Lines"
-            checked={deleteBlankLines}
-            onChange={() => {}}
-            description="Delete lines that don't have text symbols."
-          />
-        </Box>
-      ) : (
-        ''
-      )}
-      {deleteTrailingSpaces ? (
-        <Box onClick={handleBoxClick}>
-          <CheckboxWithDesc
-            title="Delete Training Spaces"
-            checked={deleteTrailingSpaces}
-            onChange={() => {}}
-            description="Remove spaces and tabs at the end of the lines."
-          />
-        </Box>
-      ) : (
-        ''
-      )}
-    </Stack>
-  );
+  return <ToolOptionGroups groups={getGroups({ values: options })} />;
 }

src/components/options/ToolOptions.tsx

@@ -7,7 +7,7 @@ import ToolOptionGroups, { ToolOptionGroup } from './ToolOptionGroups';
 import { CustomSnackBarContext } from '../../contexts/CustomSnackBarContext';
 import * as Yup from 'yup';
 
-type UpdateField<T> = <Y extends keyof T>(field: Y, value: T[Y]) => void;
+export type UpdateField<T> = <Y extends keyof T>(field: Y, value: T[Y]) => void;
 
 const FormikListenerComponent = <T,>({
   initialValues,
@@ -68,6 +68,10 @@ const ToolBody = <T,>({
     </Stack>
   );
 };
+
+export type GetGroupsType<T> = (
+  formikProps: FormikProps<T> & { updateField: UpdateField<T> }
+) => ToolOptionGroup[];
 export default function ToolOptions<T extends FormikValues>({
   children,
   initialValues,
@@ -82,9 +86,7 @@ export default function ToolOptions<T extends FormikValues>({
   validationSchema?: any | (() => any);
   compute: (optionsValues: T, input: any) => void;
   input?: any;
-  getGroups: (
-    formikProps: FormikProps<T> & { updateField: UpdateField<T> }
-  ) => ToolOptionGroup[];
+  getGroups: GetGroupsType<T>;
   formRef?: RefObject<FormikProps<T>>;
 }) {
   const theme = useTheme();