marcel/omni-tools
1
0
Fork 0
mirror of https://github.com/iib0011/omni-tools.git synced 2025-09-19 22:19:36 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor: use ToolContent

Browse Source
This commit is contained in:
Ibrahima G. Coulibaly
2025-03-09 01:50:09 +00:00
parent b372692971
commit 0499673a03
6 changed files with 136 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
.idea/workspace.xml generated
View File

@@ -4,9 +4,13 @@
<option name="autoReloadType" value="SELECTIVE" /> <option name="autoReloadType" value="SELECTIVE" />
</component> </component>
<component name="ChangeListManager"> <component name="ChangeListManager">
<list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="refactor: use ToolContent in ExtractSubstring"> <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="refactor: use ToolContent in palindrome">
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" 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/tools/string/palindrome/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/string/palindrome/index.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/options/ToolOptions.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/options/ToolOptions.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/tools/string/randomize-case/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/string/randomize-case/index.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/tools/string/reverse/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/string/reverse/index.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/tools/string/uppercase/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/string/uppercase/index.tsx" afterDir="false" />
</list> </list>
<option name="SHOW_DIALOG" value="false" /> <option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" /> <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -333,15 +337,7 @@
<workItem from="1740880919391" duration="4395000" /> <workItem from="1740880919391" duration="4395000" />
<workItem from="1740923024259" duration="23000" /> <workItem from="1740923024259" duration="23000" />
<workItem from="1740933006573" duration="3679000" /> <workItem from="1740933006573" duration="3679000" />
<workItem from="1741475969294" duration="6986000" /> <workItem from="1741475969294" duration="8262000" />
</task>
<task id="LOCAL-00104" summary="feat: compress png">
<option name="closed" value="true" />
<created>1740321721526</created>
<option name="number" value="00104" />
<option name="presentableId" value="LOCAL-00104" />
<option name="project" value="LOCAL" />
<updated>1740321721526</updated>
</task> </task>
<task id="LOCAL-00105" summary="feat: compress png"> <task id="LOCAL-00105" summary="feat: compress png">
<option name="closed" value="true" /> <option name="closed" value="true" />
@@ -727,7 +723,15 @@
<option name="project" value="LOCAL" /> <option name="project" value="LOCAL" />
<updated>1741483603658</updated> <updated>1741483603658</updated>
</task> </task>
<option name="localTasksCounter" value="153" /> <task id="LOCAL-00153" summary="refactor: use ToolContent in palindrome">
<option name="closed" value="true" />
<created>1741483792562</created>
<option name="number" value="00153" />
<option name="presentableId" value="LOCAL-00153" />
<option name="project" value="LOCAL" />
<updated>1741483792562</updated>
</task>
<option name="localTasksCounter" value="154" />
<servers /> <servers />
</component> </component>
<component name="TypeScriptGeneratedFilesManager"> <component name="TypeScriptGeneratedFilesManager">
@@ -786,7 +790,6 @@
<option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" /> <option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" />
<option name="CHECK_NEW_TODO" value="false" /> <option name="CHECK_NEW_TODO" value="false" />
<option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" /> <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
<MESSAGE value="chore: show tooloptions in example" />
<MESSAGE value="refact: examples" /> <MESSAGE value="refact: examples" />
<MESSAGE value="fix: examples" /> <MESSAGE value="fix: examples" />
<MESSAGE value="feat: json pretty" /> <MESSAGE value="feat: json pretty" />
@@ -811,7 +814,8 @@
<MESSAGE value="feat: csv to json" /> <MESSAGE value="feat: csv to json" />
<MESSAGE value="refactor: use ToolContent" /> <MESSAGE value="refactor: use ToolContent" />
<MESSAGE value="refactor: use ToolContent in ExtractSubstring" /> <MESSAGE value="refactor: use ToolContent in ExtractSubstring" />
<option name="LAST_COMMIT_MESSAGE" value="refactor: use ToolContent in ExtractSubstring" /> <MESSAGE value="refactor: use ToolContent in palindrome" />
<option name="LAST_COMMIT_MESSAGE" value="refactor: use ToolContent in palindrome" />
</component> </component>
<component name="XSLT-Support.FileAssociations.UIState"> <component name="XSLT-Support.FileAssociations.UIState">
<expand /> <expand />

53
src/components/examples/ExampleCard.tsx
View File

@@ -60,33 +60,36 @@ export default function ExampleCard<T>({
{description} {description}
</Typography> </Typography>
<Box {sampleText && (
sx={{ <Box
display: 'flex',
zIndex: '2',
width: '100%',
height: '100%',
bgcolor: 'transparent',
padding: '5px 10px',
borderRadius: '5px',
boxShadow: 'inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #fff;'
}}
>
<TextField
value={sampleText}
disabled
fullWidth
multiline
sx={{ sx={{
'& .MuiOutlinedInput-root': { display: 'flex',
zIndex: '-1', zIndex: '2',
'& fieldset': { width: '100%',
border: 'none' height: '100%',
} bgcolor: 'transparent',
} padding: '5px 10px',
borderRadius: '5px',
boxShadow:
'inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #fff;'
}} }}
/> >
</Box> <TextField
value={sampleText}
disabled
fullWidth
multiline
sx={{
'& .MuiOutlinedInput-root': {
zIndex: '-1',
'& fieldset': {
border: 'none'
}
}
}}
/>
</Box>
)}
<ArrowDownwardIcon /> <ArrowDownwardIcon />
<Box <Box

84
src/components/options/ToolOptions.tsx
View File

@@ -36,9 +36,11 @@ interface FormikHelperProps<T> {
compute: (optionsValues: T, input: any) => void; compute: (optionsValues: T, input: any) => void;
input: any; input: any;
children?: ReactNode; children?: ReactNode;
getGroups: ( getGroups:
formikProps: FormikProps<T> & { updateField: UpdateField<T> } | null
) => ToolOptionGroup[]; | ((
formikProps: FormikProps<T> & { updateField: UpdateField<T> }
) => ToolOptionGroup[]);
formikProps: FormikProps<T>; formikProps: FormikProps<T>;
} }
@@ -63,7 +65,9 @@ const ToolBody = <T,>({
input={input} input={input}
initialValues={values} initialValues={values}
/> />
<ToolOptionGroups groups={getGroups({ ...formikProps, updateField })} /> <ToolOptionGroups
groups={getGroups?.({ ...formikProps, updateField }) ?? []}
/>
{children} {children}
</Stack> </Stack>
); );
@@ -90,41 +94,41 @@ export default function ToolOptions<T extends FormikValues>({
formRef?: RefObject<FormikProps<T>>; formRef?: RefObject<FormikProps<T>>;
}) { }) {
const theme = useTheme(); const theme = useTheme();
if (getGroups) return (
return ( <Box
<Box sx={{
sx={{ mb: 2,
mb: 2, borderRadius: 2,
borderRadius: 2, padding: 2,
padding: 2, backgroundColor: theme.palette.background.default,
backgroundColor: theme.palette.background.default, boxShadow: '2',
boxShadow: '2' display: getGroups ? 'block' : 'none'
}} }}
mt={2} mt={2}
> >
<Stack direction={'row'} spacing={1} alignItems={'center'}> <Stack direction={'row'} spacing={1} alignItems={'center'}>
<SettingsIcon /> <SettingsIcon />
<Typography fontSize={22}>Tool options</Typography> <Typography fontSize={22}>Tool options</Typography>
</Stack> </Stack>
<Box mt={2}> <Box mt={2}>
<Formik <Formik
innerRef={formRef} innerRef={formRef}
initialValues={initialValues} initialValues={initialValues}
validationSchema={validationSchema} validationSchema={validationSchema}
onSubmit={() => {}} onSubmit={() => {}}
> >
{(formikProps) => ( {(formikProps) => (
<ToolBody <ToolBody
compute={compute} compute={compute}
input={input} input={input}
getGroups={getGroups} getGroups={getGroups}
formikProps={formikProps} formikProps={formikProps}
> >
{children} {children}
</ToolBody> </ToolBody>
)} )}
</Formik> </Formik>
</Box>
</Box> </Box>
); </Box>
);
} }

46
src/pages/tools/string/randomize-case/index.tsx
View File

@@ -1,15 +1,10 @@
import { Box } from '@mui/material'; import React, { useState } from 'react';
import React, { useState, useRef } from 'react';
import ToolTextInput from '@components/input/ToolTextInput'; import ToolTextInput from '@components/input/ToolTextInput';
import ToolTextResult from '@components/result/ToolTextResult'; import ToolTextResult from '@components/result/ToolTextResult';
import ToolOptions from '@components/options/ToolOptions';
import { randomizeCase } from './service'; import { randomizeCase } from './service';
import ToolInputAndResult from '@components/ToolInputAndResult'; import { CardExampleType } from '@components/examples/ToolExamples';
import ToolExamples, {
CardExampleType
} from '@components/examples/ToolExamples';
import { ToolComponentProps } from '@tools/defineTool'; import { ToolComponentProps } from '@tools/defineTool';
import { FormikProps } from 'formik'; import ToolContent from '@components/ToolContent';
const initialValues = {}; const initialValues = {};
@@ -45,7 +40,6 @@ const exampleCards: CardExampleType<typeof initialValues>[] = [
export default function RandomizeCase({ title }: ToolComponentProps) { export default function RandomizeCase({ title }: ToolComponentProps) {
const [input, setInput] = useState<string>(''); const [input, setInput] = useState<string>('');
const [result, setResult] = useState<string>(''); const [result, setResult] = useState<string>('');
const formRef = useRef<FormikProps<typeof initialValues>>(null);
const computeExternal = ( const computeExternal = (
_optionsValues: typeof initialValues, _optionsValues: typeof initialValues,
@@ -54,27 +48,19 @@ export default function RandomizeCase({ title }: ToolComponentProps) {
setResult(randomizeCase(input)); setResult(randomizeCase(input));
}; };
const getGroups = () => [];
return ( return (
<Box> <ToolContent
<ToolInputAndResult title={title}
input={<ToolTextInput value={input} onChange={setInput} />} initialValues={initialValues}
result={<ToolTextResult title={'Randomized text'} value={result} />} getGroups={null}
/> compute={computeExternal}
<ToolOptions input={input}
compute={computeExternal} setInput={setInput}
getGroups={getGroups} inputComponent={<ToolTextInput value={input} onChange={setInput} />}
initialValues={initialValues} resultComponent={
input={input} <ToolTextResult title={'Randomized text'} value={result} />
/> }
<ToolExamples exampleCards={exampleCards}
title={title} />
exampleCards={exampleCards}
getGroups={getGroups}
formRef={formRef}
setInput={setInput}
/>
</Box>
); );
} }

34
src/pages/tools/string/reverse/index.tsx
View File

@@ -11,6 +11,7 @@ import ToolExamples, {
} from '@components/examples/ToolExamples'; } from '@components/examples/ToolExamples';
import { ToolComponentProps } from '@tools/defineTool'; import { ToolComponentProps } from '@tools/defineTool';
import { FormikProps } from 'formik'; import { FormikProps } from 'formik';
import ToolContent from '@components/ToolContent';
const initialValues = { const initialValues = {
multiLine: true, multiLine: true,
@@ -59,7 +60,6 @@ const exampleCards: CardExampleType<typeof initialValues>[] = [
export default function Reverse({ title }: ToolComponentProps) { export default function Reverse({ title }: ToolComponentProps) {
const [input, setInput] = useState<string>(''); const [input, setInput] = useState<string>('');
const [result, setResult] = useState<string>(''); const [result, setResult] = useState<string>('');
const formRef = useRef<FormikProps<typeof initialValues>>(null);
const computeExternal = ( const computeExternal = (
optionsValues: typeof initialValues, optionsValues: typeof initialValues,
@@ -102,24 +102,18 @@ export default function Reverse({ title }: ToolComponentProps) {
]; ];
return ( return (
<Box> <ToolContent
<ToolInputAndResult title={title}
input={<ToolTextInput value={input} onChange={setInput} />} initialValues={initialValues}
result={<ToolTextResult title={'Reversed text'} value={result} />} getGroups={getGroups}
/> compute={computeExternal}
<ToolOptions input={input}
compute={computeExternal} setInput={setInput}
getGroups={getGroups} inputComponent={<ToolTextInput value={input} onChange={setInput} />}
initialValues={initialValues} resultComponent={
input={input} <ToolTextResult title={'Reversed text'} value={result} />
/> }
<ToolExamples exampleCards={exampleCards}
title={title} />
exampleCards={exampleCards}
getGroups={getGroups}
formRef={formRef}
setInput={setInput}
/>
</Box>
); );
} }

46
src/pages/tools/string/uppercase/index.tsx
View File

@@ -1,15 +1,10 @@
import { Box } from '@mui/material'; import React, { useState } from 'react';
import React, { useState, useRef } from 'react';
import ToolTextInput from '@components/input/ToolTextInput'; import ToolTextInput from '@components/input/ToolTextInput';
import ToolTextResult from '@components/result/ToolTextResult'; import ToolTextResult from '@components/result/ToolTextResult';
import ToolOptions from '@components/options/ToolOptions';
import { UppercaseInput } from './service'; import { UppercaseInput } from './service';
import ToolInputAndResult from '@components/ToolInputAndResult'; import { CardExampleType } from '@components/examples/ToolExamples';
import ToolExamples, {
CardExampleType
} from '@components/examples/ToolExamples';
import { ToolComponentProps } from '@tools/defineTool'; import { ToolComponentProps } from '@tools/defineTool';
import { FormikProps } from 'formik'; import ToolContent from '@components/ToolContent';
const initialValues = {}; const initialValues = {};
@@ -42,7 +37,6 @@ const exampleCards: CardExampleType<typeof initialValues>[] = [
export default function Uppercase({ title }: ToolComponentProps) { export default function Uppercase({ title }: ToolComponentProps) {
const [input, setInput] = useState<string>(''); const [input, setInput] = useState<string>('');
const [result, setResult] = useState<string>(''); const [result, setResult] = useState<string>('');
const formRef = useRef<FormikProps<typeof initialValues>>(null);
const computeExternal = ( const computeExternal = (
_optionsValues: typeof initialValues, _optionsValues: typeof initialValues,
@@ -51,27 +45,19 @@ export default function Uppercase({ title }: ToolComponentProps) {
setResult(UppercaseInput(input)); setResult(UppercaseInput(input));
}; };
const getGroups = () => [];
return ( return (
<Box> <ToolContent
<ToolInputAndResult title={title}
input={<ToolTextInput value={input} onChange={setInput} />} initialValues={initialValues}
result={<ToolTextResult title={'Uppercase text'} value={result} />} getGroups={null}
/> compute={computeExternal}
<ToolOptions input={input}
compute={computeExternal} setInput={setInput}
getGroups={getGroups} inputComponent={<ToolTextInput value={input} onChange={setInput} />}
initialValues={initialValues} resultComponent={
input={input} <ToolTextResult title={'Uppercase text'} value={result} />
/> }
<ToolExamples exampleCards={exampleCards}
title={title} />
exampleCards={exampleCards}
getGroups={getGroups}
formRef={formRef}
setInput={setInput}
/>
</Box>
); );
} }