chore: show tooloptions in example

2025-09-19 14:09:31 +02:00 · 2025-02-27 01:26:48 +00:00
parent a03df0a4e8
commit ff05de4ab6
6 changed files with 143 additions and 194 deletions
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,10 +4,13 @@
    <option name="autoReloadType" value="SELECTIVE" />
  </component>
  <component name="ChangeListManager">
-    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="docs: readme">
+    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="chore: handle enter press on search">
      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/README.md" beforeDir="false" afterPath="$PROJECT_DIR$/README.md" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/Hero.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Hero.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/examples/ExampleCard.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/examples/ExampleCard.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/examples/Examples.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/examples/Examples.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/examples/RequiredOptions.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/examples/RequiredOptions.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/options/ToolOptions.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/options/ToolOptions.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/string/join/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/string/join/index.tsx" afterDir="false" />
    </list>
    <option name="SHOW_DIALOG" value="false" />
    <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -23,7 +26,7 @@
  <component name="Git.Settings">
    <option name="RECENT_BRANCH_BY_REPOSITORY">
      <map>
-        <entry key="$PROJECT_DIR$" value="4-convert-jpg-to-png" />
+        <entry key="$PROJECT_DIR$" value="main" />
      </map>
    </option>
    <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
@@ -59,47 +62,47 @@
    <option name="hideEmptyMiddlePackages" value="true" />
    <option name="showLibraryContents" value="true" />
  </component>
-  <component name="PropertiesComponent">{
-  &quot;keyToString&quot;: {
-    &quot;ASKED_ADD_EXTERNAL_FILES&quot;: &quot;true&quot;,
-    &quot;ASKED_SHARE_PROJECT_CONFIGURATION_FILES&quot;: &quot;true&quot;,
-    &quot;Docker.Dockerfile build.executor&quot;: &quot;Run&quot;,
-    &quot;Docker.Dockerfile.executor&quot;: &quot;Run&quot;,
-    &quot;Playwright.JoinText Component.executor&quot;: &quot;Run&quot;,
-    &quot;Playwright.JoinText Component.should merge text pieces with specified join character.executor&quot;: &quot;Run&quot;,
-    &quot;RunOnceActivity.OpenProjectViewOnStart&quot;: &quot;true&quot;,
-    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
-    &quot;RunOnceActivity.git.unshallow&quot;: &quot;true&quot;,
-    &quot;Vitest.compute function (1).executor&quot;: &quot;Run&quot;,
-    &quot;Vitest.compute function.executor&quot;: &quot;Run&quot;,
-    &quot;Vitest.mergeText.executor&quot;: &quot;Run&quot;,
-    &quot;Vitest.mergeText.should merge lines and preserve blank lines when deleteBlankLines is false.executor&quot;: &quot;Run&quot;,
-    &quot;Vitest.mergeText.should merge lines, preserve blank lines and trailing spaces when both deleteBlankLines and deleteTrailingSpaces are false.executor&quot;: &quot;Run&quot;,
-    &quot;git-widget-placeholder&quot;: &quot;main&quot;,
-    &quot;ignore.virus.scanning.warn.message&quot;: &quot;true&quot;,
-    &quot;kotlin-language-version-configured&quot;: &quot;true&quot;,
-    &quot;last_opened_file_path&quot;: &quot;C:/Users/Ibrahima/IdeaProjects/omni-tools/src/assets&quot;,
-    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
-    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
-    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
-    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
-    &quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
-    &quot;npm.dev.executor&quot;: &quot;Run&quot;,
-    &quot;npm.lint.executor&quot;: &quot;Run&quot;,
-    &quot;npm.prebuild.executor&quot;: &quot;Run&quot;,
-    &quot;npm.script:create:tool.executor&quot;: &quot;Run&quot;,
-    &quot;npm.test.executor&quot;: &quot;Run&quot;,
-    &quot;npm.test:e2e.executor&quot;: &quot;Run&quot;,
-    &quot;npm.test:e2e:run.executor&quot;: &quot;Run&quot;,
-    &quot;prettierjs.PrettierConfiguration.Package&quot;: &quot;C:\\Users\\Ibrahima\\IdeaProjects\\omni-tools\\node_modules\\prettier&quot;,
-    &quot;project.structure.last.edited&quot;: &quot;Problems&quot;,
-    &quot;project.structure.proportion&quot;: &quot;0.0&quot;,
-    &quot;project.structure.side.proportion&quot;: &quot;0.2&quot;,
-    &quot;settings.editor.selected.configurable&quot;: &quot;settings.typescriptcompiler&quot;,
-    &quot;ts.external.directory.path&quot;: &quot;C:\\Users\\Ibrahima\\IdeaProjects\\omni-tools\\node_modules\\typescript\\lib&quot;,
-    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
+  <component name="PropertiesComponent"><![CDATA[{
+  "keyToString": {
+    "ASKED_ADD_EXTERNAL_FILES": "true",
+    "ASKED_SHARE_PROJECT_CONFIGURATION_FILES": "true",
+    "Docker.Dockerfile build.executor": "Run",
+    "Docker.Dockerfile.executor": "Run",
+    "Playwright.JoinText Component.executor": "Run",
+    "Playwright.JoinText Component.should merge text pieces with specified join character.executor": "Run",
+    "RunOnceActivity.OpenProjectViewOnStart": "true",
+    "RunOnceActivity.ShowReadmeOnStart": "true",
+    "RunOnceActivity.git.unshallow": "true",
+    "Vitest.compute function (1).executor": "Run",
+    "Vitest.compute function.executor": "Run",
+    "Vitest.mergeText.executor": "Run",
+    "Vitest.mergeText.should merge lines and preserve blank lines when deleteBlankLines is false.executor": "Run",
+    "Vitest.mergeText.should merge lines, preserve blank lines and trailing spaces when both deleteBlankLines and deleteTrailingSpaces are false.executor": "Run",
+    "git-widget-placeholder": "examples",
+    "ignore.virus.scanning.warn.message": "true",
+    "kotlin-language-version-configured": "true",
+    "last_opened_file_path": "C:/Users/Ibrahima/IdeaProjects/omni-tools/src/assets",
+    "node.js.detected.package.eslint": "true",
+    "node.js.detected.package.tslint": "true",
+    "node.js.selected.package.eslint": "(autodetect)",
+    "node.js.selected.package.tslint": "(autodetect)",
+    "nodejs_package_manager_path": "npm",
+    "npm.dev.executor": "Run",
+    "npm.lint.executor": "Run",
+    "npm.prebuild.executor": "Run",
+    "npm.script:create:tool.executor": "Run",
+    "npm.test.executor": "Run",
+    "npm.test:e2e.executor": "Run",
+    "npm.test:e2e:run.executor": "Run",
+    "prettierjs.PrettierConfiguration.Package": "C:\\Users\\Ibrahima\\IdeaProjects\\omni-tools\\node_modules\\prettier",
+    "project.structure.last.edited": "Problems",
+    "project.structure.proportion": "0.0",
+    "project.structure.side.proportion": "0.2",
+    "settings.editor.selected.configurable": "settings.typescriptcompiler",
+    "ts.external.directory.path": "C:\\Users\\Ibrahima\\IdeaProjects\\omni-tools\\node_modules\\typescript\\lib",
+    "vue.rearranger.settings.migration": "true"
  }
-}</component>
+}]]></component>
  <component name="ReactDesignerToolWindowState">
    <option name="myId2Visible">
      <map>
@@ -262,15 +265,7 @@
      <workItem from="1740490890760" duration="1889000" />
      <workItem from="1740503199053" duration="4853000" />
      <workItem from="1740584243965" duration="17000" />
-      <workItem from="1740613094492" duration="1804000" />
-    </task>
-    <task id="LOCAL-00077" summary="ci: run e2e tests">
-      <option name="closed" value="true" />
-      <created>1719587132558</created>
-      <option name="number" value="00077" />
-      <option name="presentableId" value="LOCAL-00077" />
-      <option name="project" value="LOCAL" />
-      <updated>1719587132558</updated>
+      <workItem from="1740613094492" duration="6422000" />
    </task>
    <task id="LOCAL-00078" summary="ci: run e2e tests">
      <option name="closed" value="true" />
@@ -656,7 +651,15 @@
      <option name="project" value="LOCAL" />
      <updated>1740614185980</updated>
    </task>
-    <option name="localTasksCounter" value="126" />
+    <task id="LOCAL-00126" summary="chore: handle enter press on search">
+      <option name="closed" value="true" />
+      <created>1740614957672</created>
+      <option name="number" value="00126" />
+      <option name="presentableId" value="LOCAL-00126" />
+      <option name="project" value="LOCAL" />
+      <updated>1740614957672</updated>
+    </task>
+    <option name="localTasksCounter" value="127" />
    <servers />
  </component>
  <component name="TypeScriptGeneratedFilesManager">
@@ -688,7 +691,6 @@
    <option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" />
    <option name="CHECK_NEW_TODO" value="false" />
    <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
-    <MESSAGE value="feat: group list ui" />
    <MESSAGE value="feat: reverse list ui" />
    <MESSAGE value="feat: self host" />
    <MESSAGE value="chore: format number" />
@@ -713,7 +715,8 @@
    <MESSAGE value="docs: img" />
    <MESSAGE value="fix: bg" />
    <MESSAGE value="docs: readme" />
-    <option name="LAST_COMMIT_MESSAGE" value="docs: readme" />
+    <MESSAGE value="chore: handle enter press on search" />
+    <option name="LAST_COMMIT_MESSAGE" value="chore: handle enter press on search" />
  </component>
  <component name="XSLT-Support.FileAssociations.UIState">
    <expand />
--- a/src/components/examples/ExampleCard.tsx
+++ b/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>
--- a/src/components/examples/Examples.tsx
+++ b/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>
          ))}
--- a/src/components/examples/RequiredOptions.tsx
+++ b/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 })} />;
 }
--- a/src/components/options/ToolOptions.tsx
+++ b/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();
--- a/src/pages/tools/string/join/index.tsx
+++ b/src/pages/tools/string/join/index.tsx
@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import * as Yup from 'yup';
 import ToolTextInput from '@components/input/ToolTextInput';
 import ToolTextResult from '@components/result/ToolTextResult';
-import ToolOptions from '@components/options/ToolOptions';
+import ToolOptions, { GetGroupsType } from '@components/options/ToolOptions';
 import { mergeText } from './service';
 import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
 import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
@@ -64,8 +64,8 @@ build a rocket ship and fly away`,
    sampleResult: `clean the house and go shopping and feed the cat and make dinner and build a rocket ship and fly away`,
    requiredOptions: {
      joinCharacter: 'and',
-      deleteBlankLines: true,
-      deleteTrailingSpaces: true
+      deleteBlank: true,
+      deleteTrailing: true
    }
  },
  {
@@ -80,8 +80,8 @@ keyboard`,
    sampleResult: `computer, memory, processor, mouse, keyboard`,
    requiredOptions: {
      joinCharacter: ',',
-      deleteBlankLines: false,
-      deleteTrailingSpaces: false
+      deleteBlank: false,
+      deleteTrailing: false
    }
  },
  {
@@ -103,8 +103,8 @@ s
    sampleResult: `Textabulous!`,
    requiredOptions: {
      joinCharacter: '',
-      deleteBlankLines: false,
-      deleteTrailingSpaces: false
+      deleteBlank: false,
+      deleteTrailing: false
    }
  }
 ];
@@ -128,6 +128,34 @@ export default function JoinText() {
    }
  }

+  const getGroups: GetGroupsType<typeof initialValues> = ({
+    values,
+    updateField
+  }) => [
+    {
+      title: 'Text Merged Options',
+      component: (
+        <TextFieldWithDesc
+          placeholder={mergeOptions.placeholder}
+          value={values['joinCharacter']}
+          onOwnChange={(value) => updateField(mergeOptions.accessor, value)}
+          description={mergeOptions.description}
+        />
+      )
+    },
+    {
+      title: 'Blank Lines and Trailing Spaces',
+      component: blankTrailingOptions.map((option) => (
+        <CheckboxWithDesc
+          key={option.accessor}
+          title={option.title}
+          checked={!!values[option.accessor]}
+          onChange={(value) => updateField(option.accessor, value)}
+          description={option.description}
+        />
+      ))
+    }
+  ];
  return (
    <Box>
      <ToolInputAndResult
@@ -142,33 +170,7 @@ export default function JoinText() {
      />
      <ToolOptions
        compute={compute}
-        getGroups={({ values, updateField }) => [
-          {
-            title: 'Text Merged Options',
-            component: (
-              <TextFieldWithDesc
-                placeholder={mergeOptions.placeholder}
-                value={values['joinCharacter']}
-                onOwnChange={(value) =>
-                  updateField(mergeOptions.accessor, value)
-                }
-                description={mergeOptions.description}
-              />
-            )
-          },
-          {
-            title: 'Blank Lines and Trailing Spaces',
-            component: blankTrailingOptions.map((option) => (
-              <CheckboxWithDesc
-                key={option.accessor}
-                title={option.title}
-                checked={!!values[option.accessor]}
-                onChange={(value) => updateField(option.accessor, value)}
-                description={option.description}
-              />
-            ))
-          }
-        ]}
+        getGroups={getGroups}
        initialValues={initialValues}
        input={input}
      />
@@ -182,8 +184,11 @@ export default function JoinText() {
        subtitle="Click to try!"
        exampleCards={exampleCards.map((card) => ({
          ...card,
-          changeInputResult
+          changeInputResult,
+          getGroups
        }))}
+        getGroups={getGroups}
+        changeInputResult={changeInputResult}
      />
    </Box>
  );