mirror of
https://github.com/iib0011/omni-tools.git
synced 2025-09-18 05:29:33 +02:00
refactor: tool input and result
This commit is contained in:
Ibrahima G. Coulibaly
120
.idea/workspace.xml
generated
120
.idea/workspace.xml
generated
@@ -4,9 +4,15 @@
|
||||
<option name="autoReloadType" value="SELECTIVE" />
|
||||
</component>
|
||||
<component name="ChangeListManager">
|
||||
<list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="chore: printRunningSum">
|
||||
<list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="fix: readme">
|
||||
<change afterPath="$PROJECT_DIR$/src/components/ToolInputAndResult.tsx" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/pages/number/sum/sum.service.test.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/number/sum/sum.service.test.ts" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/components/options/ToolOptionGroups.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/options/ToolOptionGroups.tsx" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/pages/image/png/change-colors-in-png/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/image/png/change-colors-in-png/index.tsx" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/pages/number/sum/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/number/sum/index.tsx" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/pages/string/join/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/join/index.tsx" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/pages/string/split/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/split/index.tsx" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/pages/string/to-morse/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/to-morse/index.tsx" afterDir="false" />
|
||||
</list>
|
||||
<option name="SHOW_DIALOG" value="false" />
|
||||
<option name="HIGHLIGHT_CONFLICTS" value="true" />
|
||||
@@ -35,38 +41,39 @@
|
||||
<option name="hideEmptyMiddlePackages" value="true" />
|
||||
<option name="showLibraryContents" value="true" />
|
||||
</component>
|
||||
<component name="PropertiesComponent"><![CDATA[{
|
||||
"keyToString": {
|
||||
"ASKED_ADD_EXTERNAL_FILES": "true",
|
||||
"ASKED_SHARE_PROJECT_CONFIGURATION_FILES": "true",
|
||||
"RunOnceActivity.OpenProjectViewOnStart": "true",
|
||||
"RunOnceActivity.ShowReadmeOnStart": "true",
|
||||
"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": "main",
|
||||
"ignore.virus.scanning.warn.message": "true",
|
||||
"kotlin-language-version-configured": "true",
|
||||
"last_opened_file_path": "C:/Users/HP/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.prebuild.executor": "Run",
|
||||
"npm.script:create:tool.executor": "Run",
|
||||
"npm.test.executor": "Run",
|
||||
"prettierjs.PrettierConfiguration.Package": "C:\\Users\\HP\\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\\HP\\IdeaProjects\\omni-tools\\node_modules\\typescript\\lib",
|
||||
"vue.rearranger.settings.migration": "true"
|
||||
<component name="PropertiesComponent">{
|
||||
"keyToString": {
|
||||
"ASKED_ADD_EXTERNAL_FILES": "true",
|
||||
"ASKED_SHARE_PROJECT_CONFIGURATION_FILES": "true",
|
||||
"RunOnceActivity.OpenProjectViewOnStart": "true",
|
||||
"RunOnceActivity.ShowReadmeOnStart": "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": "main",
|
||||
"ignore.virus.scanning.warn.message": "true",
|
||||
"kotlin-language-version-configured": "true",
|
||||
"last_opened_file_path": "C:/Users/HP/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.prebuild.executor": "Run",
|
||||
"npm.script:create:tool.executor": "Run",
|
||||
"npm.test.executor": "Run",
|
||||
"prettierjs.PrettierConfiguration.Package": "C:\\Users\\HP\\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\\HP\\IdeaProjects\\omni-tools\\node_modules\\typescript\\lib",
|
||||
"vue.rearranger.settings.migration": "true"
|
||||
}
|
||||
}]]></component>
|
||||
}</component>
|
||||
<component name="ReactDesignerToolWindowState">
|
||||
<option name="myId2Visible">
|
||||
<map>
|
||||
@@ -90,7 +97,7 @@
|
||||
<recent name="C:\Users\HP\IdeaProjects\omni-tools\src\tools" />
|
||||
</key>
|
||||
</component>
|
||||
<component name="RunManager" selected="Vitest.compute function (1)">
|
||||
<component name="RunManager" selected="npm.dev">
|
||||
<configuration name="compute function (1)" type="JavaScriptTestRunnerVitest" temporary="true" nameIsGenerated="true">
|
||||
<node-interpreter value="project" />
|
||||
<vitest-package value="$PROJECT_DIR$/node_modules/vitest" />
|
||||
@@ -149,9 +156,9 @@
|
||||
</configuration>
|
||||
<recent_temporary>
|
||||
<list>
|
||||
<item itemvalue="npm.dev" />
|
||||
<item itemvalue="Vitest.compute function (1)" />
|
||||
<item itemvalue="Vitest.compute function" />
|
||||
<item itemvalue="npm.dev" />
|
||||
<item itemvalue="npm.test" />
|
||||
<item itemvalue="npm.script:create:tool" />
|
||||
</list>
|
||||
@@ -179,23 +186,8 @@
|
||||
<workItem from="1719166718305" duration="1783000" />
|
||||
<workItem from="1719168519203" duration="17675000" />
|
||||
<workItem from="1719197816332" duration="1453000" />
|
||||
<workItem from="1719273044735" duration="9001000" />
|
||||
</task>
|
||||
<task id="LOCAL-00005" summary="feat: Split string">
|
||||
<option name="closed" value="true" />
|
||||
<created>1718828318468</created>
|
||||
<option name="number" value="00005" />
|
||||
<option name="presentableId" value="LOCAL-00005" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1718828318468</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00006" summary="fix: netlify">
|
||||
<option name="closed" value="true" />
|
||||
<created>1718831745853</created>
|
||||
<option name="number" value="00006" />
|
||||
<option name="presentableId" value="LOCAL-00006" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1718831745853</updated>
|
||||
<workItem from="1719273044735" duration="9847000" />
|
||||
<workItem from="1719294110005" duration="1967000" />
|
||||
</task>
|
||||
<task id="LOCAL-00007" summary="fix: netlify">
|
||||
<option name="closed" value="true" />
|
||||
@@ -573,7 +565,23 @@
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1719282009150</updated>
|
||||
</task>
|
||||
<option name="localTasksCounter" value="54" />
|
||||
<task id="LOCAL-00054" summary="chore: sum tests">
|
||||
<option name="closed" value="true" />
|
||||
<created>1719282131977</created>
|
||||
<option name="number" value="00054" />
|
||||
<option name="presentableId" value="LOCAL-00054" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1719282131977</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00055" summary="fix: readme">
|
||||
<option name="closed" value="true" />
|
||||
<created>1719283122691</created>
|
||||
<option name="number" value="00055" />
|
||||
<option name="presentableId" value="LOCAL-00055" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1719283122691</updated>
|
||||
</task>
|
||||
<option name="localTasksCounter" value="56" />
|
||||
<servers />
|
||||
</component>
|
||||
<component name="TypeScriptGeneratedFilesManager">
|
||||
@@ -594,7 +602,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: search tools" />
|
||||
<MESSAGE value="fix: deploy message" />
|
||||
<MESSAGE value="chore: tools by category" />
|
||||
<MESSAGE value="feat: copy and import file" />
|
||||
@@ -609,7 +616,6 @@
|
||||
<MESSAGE value="fix: build" />
|
||||
<MESSAGE value="chore: CODEOWNERS" />
|
||||
<MESSAGE value="ci: fix" />
|
||||
<MESSAGE value="fix: readme" />
|
||||
<MESSAGE value="fix: create-tool.mjs" />
|
||||
<MESSAGE value="feat: change colors in png init" />
|
||||
<MESSAGE value="feat: change colors in png" />
|
||||
@@ -619,7 +625,9 @@
|
||||
<MESSAGE value="feat: sum numbers init" />
|
||||
<MESSAGE value="fix: compilation" />
|
||||
<MESSAGE value="chore: printRunningSum" />
|
||||
<option name="LAST_COMMIT_MESSAGE" value="chore: printRunningSum" />
|
||||
<MESSAGE value="chore: sum tests" />
|
||||
<MESSAGE value="fix: readme" />
|
||||
<option name="LAST_COMMIT_MESSAGE" value="fix: readme" />
|
||||
</component>
|
||||
<component name="XSLT-Support.FileAssociations.UIState">
|
||||
<expand />
|
||||
|
||||
21
src/components/ToolInputAndResult.tsx
Normal file
21
src/components/ToolInputAndResult.tsx
Normal file
@@ -0,0 +1,21 @@
|
||||
import React, { ReactNode } from 'react';
|
||||
import Grid from '@mui/material/Grid';
|
||||
|
||||
export default function ToolInputAndResult({
|
||||
input,
|
||||
result
|
||||
}: {
|
||||
input: ReactNode;
|
||||
result: ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={6}>
|
||||
{input}
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
{result}
|
||||
</Grid>
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
@@ -2,10 +2,15 @@ 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: { title: string; component: ReactNode }[];
|
||||
groups: ToolOptionGroup[];
|
||||
}) {
|
||||
return (
|
||||
<Stack direction={'row'} spacing={2}>
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
import { Box, Stack } from '@mui/material';
|
||||
import { Box } from '@mui/material';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import * as Yup from 'yup';
|
||||
import Grid from '@mui/material/Grid';
|
||||
import ToolFileInput from '../../../../components/input/ToolFileInput';
|
||||
import ToolFileResult from '../../../../components/result/ToolFileResult';
|
||||
import ToolOptions from '../../../../components/options/ToolOptions';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import { Formik, useFormikContext } from 'formik';
|
||||
import ColorSelector from '../../../../components/options/ColorSelector';
|
||||
import Color from 'color';
|
||||
import TextFieldWithDesc from 'components/options/TextFieldWithDesc';
|
||||
import ToolInputAndResult from '../../../../components/ToolInputAndResult';
|
||||
import ToolOptionGroups from '../../../../components/options/ToolOptionGroups';
|
||||
|
||||
const initialValues = {
|
||||
fromColor: 'white',
|
||||
@@ -105,23 +105,23 @@ export default function ChangeColorsInPng() {
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={6}>
|
||||
<ToolInputAndResult
|
||||
input={
|
||||
<ToolFileInput
|
||||
value={input}
|
||||
onChange={setInput}
|
||||
accept={['image/png']}
|
||||
title={'Input PNG'}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
}
|
||||
result={
|
||||
<ToolFileResult
|
||||
title={'Output PNG with new colors'}
|
||||
value={result}
|
||||
extension={'png'}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
}
|
||||
/>
|
||||
<ToolOptions>
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
@@ -129,30 +129,37 @@ export default function ChangeColorsInPng() {
|
||||
onSubmit={() => {}}
|
||||
>
|
||||
{({ setFieldValue, values }) => (
|
||||
<Stack direction={'row'} spacing={2}>
|
||||
<Box>
|
||||
{input && <FormikListenerComponent input={input} />}
|
||||
<Box>
|
||||
<Typography fontSize={22}>From color and to color</Typography>
|
||||
<ColorSelector
|
||||
value={values.fromColor}
|
||||
onChange={(val) => setFieldValue('fromColor', val)}
|
||||
description={'Replace this color (from color)'}
|
||||
/>
|
||||
<ColorSelector
|
||||
value={values.toColor}
|
||||
onChange={(val) => setFieldValue('toColor', val)}
|
||||
description={'With this color (to color)'}
|
||||
/>
|
||||
<TextFieldWithDesc
|
||||
value={values.similarity}
|
||||
onChange={(val) => setFieldValue('similarity', val)}
|
||||
description={
|
||||
'Match this % of similar colors of the from color. For example, 10% white will match white and a little bit of gray.'
|
||||
<ToolOptionGroups
|
||||
groups={[
|
||||
{
|
||||
title: 'From color and to color',
|
||||
component: (
|
||||
<Box>
|
||||
<ColorSelector
|
||||
value={values.fromColor}
|
||||
onChange={(val) => setFieldValue('fromColor', val)}
|
||||
description={'Replace this color (from color)'}
|
||||
/>
|
||||
<ColorSelector
|
||||
value={values.toColor}
|
||||
onChange={(val) => setFieldValue('toColor', val)}
|
||||
description={'With this color (to color)'}
|
||||
/>
|
||||
<TextFieldWithDesc
|
||||
value={values.similarity}
|
||||
onChange={(val) => setFieldValue('similarity', val)}
|
||||
description={
|
||||
'Match this % of similar colors of the from color. For example, 10% white will match white and a little bit of gray.'
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
<Box></Box>
|
||||
</Stack>
|
||||
]}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
</Formik>
|
||||
</ToolOptions>
|
||||
|
||||
@@ -12,6 +12,7 @@ import RadioWithTextField from '../../../components/options/RadioWithTextField';
|
||||
import ToolOptionGroups from '../../../components/options/ToolOptionGroups';
|
||||
import SimpleRadio from '../../../components/options/SimpleRadio';
|
||||
import CheckboxWithDesc from '../../../components/options/CheckboxWithDesc';
|
||||
import ToolInputAndResult from '../../../components/ToolInputAndResult';
|
||||
|
||||
const initialValues = {
|
||||
extractionType: 'smart' as NumberExtractionType,
|
||||
@@ -69,14 +70,10 @@ export default function SplitText() {
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={6}>
|
||||
<ToolTextInput value={input} onChange={setInput} />
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<ToolTextResult title={'Text pieces'} value={result} />
|
||||
</Grid>
|
||||
</Grid>
|
||||
<ToolInputAndResult
|
||||
input={<ToolTextInput value={input} onChange={setInput} />}
|
||||
result={<ToolTextResult title={'Total'} value={result} />}
|
||||
/>
|
||||
<ToolOptions>
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
|
||||
@@ -10,6 +10,7 @@ import { CustomSnackBarContext } from '../../../contexts/CustomSnackBarContext';
|
||||
import TextFieldWithDesc from '../../../components/options/TextFieldWithDesc';
|
||||
import CheckboxWithDesc from '../../../components/options/CheckboxWithDesc';
|
||||
import ToolOptionGroups from '../../../components/options/ToolOptionGroups';
|
||||
import ToolInputAndResult from '../../../components/ToolInputAndResult';
|
||||
|
||||
const initialValues = {
|
||||
joinCharacter: '',
|
||||
@@ -70,18 +71,16 @@ export default function JoinText() {
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={6}>
|
||||
<ToolInputAndResult
|
||||
input={
|
||||
<ToolTextInput
|
||||
title={'Text Pieces'}
|
||||
value={input}
|
||||
onChange={setInput}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<ToolTextResult title={'Joined Text'} value={result} />
|
||||
</Grid>
|
||||
</Grid>
|
||||
}
|
||||
result={<ToolTextResult title={'Joined Text'} value={result} />}
|
||||
/>
|
||||
<ToolOptions>
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
|
||||
@@ -11,6 +11,7 @@ import { CustomSnackBarContext } from '../../../contexts/CustomSnackBarContext';
|
||||
import RadioWithTextField from '../../../components/options/RadioWithTextField';
|
||||
import TextFieldWithDesc from '../../../components/options/TextFieldWithDesc';
|
||||
import ToolOptionGroups from '../../../components/options/ToolOptionGroups';
|
||||
import ToolInputAndResult from '../../../components/ToolInputAndResult';
|
||||
|
||||
const initialValues = {
|
||||
splitSeparatorType: 'symbol' as SplitOperatorType,
|
||||
@@ -126,14 +127,10 @@ export default function SplitText() {
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={6}>
|
||||
<ToolTextInput value={input} onChange={setInput} />
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<ToolTextResult title={'Text pieces'} value={result} />
|
||||
</Grid>
|
||||
</Grid>
|
||||
<ToolInputAndResult
|
||||
input={<ToolTextInput value={input} onChange={setInput} />}
|
||||
result={<ToolTextResult title={'Text pieces'} value={result} />}
|
||||
/>
|
||||
<ToolOptions>
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
|
||||
@@ -10,6 +10,7 @@ import { compute } from './service';
|
||||
import { CustomSnackBarContext } from '../../../contexts/CustomSnackBarContext';
|
||||
import TextFieldWithDesc from '../../../components/options/TextFieldWithDesc';
|
||||
import ToolOptionGroups from '../../../components/options/ToolOptionGroups';
|
||||
import ToolInputAndResult from '../../../components/ToolInputAndResult';
|
||||
|
||||
const initialValues = {
|
||||
dotSymbol: '.',
|
||||
@@ -44,14 +45,10 @@ export default function ToMorse() {
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={6}>
|
||||
<ToolTextInput value={input} onChange={setInput} />
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<ToolTextResult title={'Morse code'} value={result} />
|
||||
</Grid>
|
||||
</Grid>
|
||||
<ToolInputAndResult
|
||||
input={<ToolTextInput value={input} onChange={setInput} />}
|
||||
result={<ToolTextResult title={'Morse code'} value={result} />}
|
||||
/>
|
||||
<ToolOptions>
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
|
||||
Reference in New Issue
Block a user