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

refactor: use of ToolContent.tsx

Browse Source
This commit is contained in:
Ibrahima G. Coulibaly
2025-03-05 22:05:10 +00:00
parent 6c326357d7
commit 6278ddf8f9
5 changed files with 95 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
.idea/workspace.xml generated
View File

@@ -4,9 +4,11 @@
<option name="autoReloadType" value="SELECTIVE" />
</component>
<component name="ChangeListManager">
<list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="style: optimizations">
<change afterPath="$PROJECT_DIR$/src/components/ToolContent.tsx" afterDir="false" />
<list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="feat: ToolContent.tsx">
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/ToolContent.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ToolContent.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/examples/ToolExamples.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/examples/ToolExamples.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/tools/image/png/change-colors-in-png/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/image/png/change-colors-in-png/index.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/tools/list/reverse/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/list/reverse/index.tsx" afterDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />
@@ -293,14 +295,6 @@
<workItem from="1740923024259" duration="23000" />
<workItem from="1740933006573" duration="3679000" />
</task>
<task id="LOCAL-00092" summary="feat: find unique ui">
<option name="closed" value="true" />
<created>1720565760853</created>
<option name="number" value="00092" />
<option name="presentableId" value="LOCAL-00092" />
<option name="project" value="LOCAL" />
<updated>1720565760853</updated>
</task>
<task id="LOCAL-00093" summary="feat: group list ui">
<option name="closed" value="true" />
<created>1720656867853</created>
@@ -685,7 +679,15 @@
<option name="project" value="LOCAL" />
<updated>1740936527951</updated>
</task>
<option name="localTasksCounter" value="141" />
<task id="LOCAL-00141" summary="feat: ToolContent.tsx">
<option name="closed" value="true" />
<created>1741211604972</created>
<option name="number" value="00141" />
<option name="presentableId" value="LOCAL-00141" />
<option name="project" value="LOCAL" />
<updated>1741211604972</updated>
</task>
<option name="localTasksCounter" value="142" />
<servers />
</component>
<component name="TypeScriptGeneratedFilesManager">
@@ -744,7 +746,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="fix: docs" />
<MESSAGE value="feat: funding" />
<MESSAGE value="feat: ui changes" />
<MESSAGE value="fix: readme" />
@@ -769,7 +770,8 @@
<MESSAGE value="feat: remove duplicate lines" />
<MESSAGE value="fix: tsc" />
<MESSAGE value="style: optimizations" />
<option name="LAST_COMMIT_MESSAGE" value="style: optimizations" />
<MESSAGE value="feat: ToolContent.tsx" />
<option name="LAST_COMMIT_MESSAGE" value="feat: ToolContent.tsx" />
</component>
<component name="XSLT-Support.FileAssociations.UIState">
<expand />

28
src/components/ToolContent.tsx
View File

@@ -10,7 +10,7 @@ import ToolExamples, {
} from '@components/examples/ToolExamples';
import { ToolComponentProps } from '@tools/defineTool';
interface ToolContentPropsBase<T> extends ToolComponentProps {
interface ToolContentPropsBase<T, I> extends ToolComponentProps {
// Input/Output components
inputComponent: ReactNode;
resultComponent: ReactNode;
@@ -20,7 +20,7 @@ interface ToolContentPropsBase<T> extends ToolComponentProps {
getGroups: GetGroupsType<T>;
// Computation function
compute: (optionsValues: T, input: any) => void;
compute: (optionsValues: T, input: I) => void;
// Tool info (optional)
toolInfo?: {
@@ -29,27 +29,29 @@ interface ToolContentPropsBase<T> extends ToolComponentProps {
};
// Input value to pass to the compute function
input: any;
input: I;
// Validation schema (optional)
validationSchema?: any;
}
interface ToolContentPropsWithExamples<T> extends ToolContentPropsBase<T> {
interface ToolContentPropsWithExamples<T, I>
extends ToolContentPropsBase<T, I> {
exampleCards: CardExampleType<T>[];
setInput: React.Dispatch<React.SetStateAction<string>>;
setInput: React.Dispatch<React.SetStateAction<I>>;
}
interface ToolContentPropsWithoutExamples<T> extends ToolContentPropsBase<T> {
exampleCards?: undefined;
setInput?: undefined;
interface ToolContentPropsWithoutExamples<T, I>
extends ToolContentPropsBase<T, I> {
exampleCards?: never;
setInput?: never;
}
type ToolContentProps<T> =
| ToolContentPropsWithExamples<T>
| ToolContentPropsWithoutExamples<T>;
type ToolContentProps<T, I> =
| ToolContentPropsWithExamples<T, I>
| ToolContentPropsWithoutExamples<T, I>;
export default function ToolContent<T extends FormikValues>({
export default function ToolContent<T extends FormikValues, I>({
title,
inputComponent,
resultComponent,
@@ -61,7 +63,7 @@ export default function ToolContent<T extends FormikValues>({
input,
setInput,
validationSchema
}: ToolContentProps<T>) {
}: ToolContentProps<T, I>) {
const formRef = useRef<FormikProps<T>>(null);
return (

2
src/components/examples/ToolExamples.tsx
View File

@@ -15,7 +15,7 @@ export interface ExampleProps<T> {
exampleCards: CardExampleType<T>[];
getGroups: GetGroupsType<T>;
formRef: React.RefObject<FormikProps<T>>;
setInput: React.Dispatch<React.SetStateAction<string>>;
setInput: React.Dispatch<React.SetStateAction<any>>;
}
export default function ToolExamples<T>({

61
src/pages/tools/image/png/change-colors-in-png/index.tsx
View File

@@ -3,12 +3,14 @@ import React, { useState } from 'react';
import * as Yup from 'yup';
import ToolFileInput from '@components/input/ToolFileInput';
import ToolFileResult from '@components/result/ToolFileResult';
import ToolOptions from '@components/options/ToolOptions';
import ToolOptions, { GetGroupsType } from '@components/options/ToolOptions';
import ColorSelector from '@components/options/ColorSelector';
import Color from 'color';
import TextFieldWithDesc from 'components/options/TextFieldWithDesc';
import ToolInputAndResult from '@components/ToolInputAndResult';
import { areColorsSimilar } from 'utils/color';
import ToolContent from '@components/ToolContent';
import { ToolComponentProps } from '@tools/defineTool';
const initialValues = {
fromColor: 'white',
@@ -18,7 +20,7 @@ const initialValues = {
const validationSchema = Yup.object({
// splitSeparator: Yup.string().required('The separator is required')
});
export default function ChangeColorsInPng() {
export default function ChangeColorsInPng({ title }: ToolComponentProps) {
const [input, setInput] = useState<File | null>(null);
const [result, setResult] = useState<File | null>(null);
@@ -83,28 +85,10 @@ export default function ChangeColorsInPng() {
processImage(input, fromRgb, toRgb, Number(similarity));
};
return (
<Box>
<ToolInputAndResult
input={
<ToolFileInput
value={input}
onChange={setInput}
accept={['image/png']}
title={'Input PNG'}
/>
}
result={
<ToolFileResult
title={'Output PNG with new colors'}
value={result}
extension={'png'}
/>
}
/>
<ToolOptions
compute={compute}
getGroups={({ values, updateField }) => [
const getGroups: GetGroupsType<typeof initialValues> = ({
values,
updateField
}) => [
{
title: 'From color and to color',
component: (
@@ -131,10 +115,35 @@ export default function ChangeColorsInPng() {
</Box>
)
}
]}
];
return (
<ToolContent
title={title}
initialValues={initialValues}
getGroups={getGroups}
compute={compute}
input={input}
validationSchema={validationSchema}
inputComponent={
<ToolFileInput
value={input}
onChange={setInput}
accept={['image/png']}
title={'Input PNG'}
/>
}
resultComponent={
<ToolFileResult
title={'Transparent PNG'}
value={result}
extension={'png'}
/>
}
toolInfo={{
title: 'Make Colors Transparent',
description:
'This tool allows you to make specific colors in a PNG image transparent. You can select the color to replace and adjust the similarity threshold to include similar colors.'
}}
/>
</Box>
);
}

3
src/pages/tools/list/reverse/index.tsx
View File

@@ -1,5 +1,5 @@
import { Box } from '@mui/material';
import React, { useRef, useState } from 'react';
import React, { useState } from 'react';
import ToolTextInput from '@components/input/ToolTextInput';
import ToolTextResult from '@components/result/ToolTextResult';
import { GetGroupsType } from '@components/options/ToolOptions';
@@ -7,7 +7,6 @@ import { reverseList, SplitOperatorType } from './service';
import SimpleRadio from '@components/options/SimpleRadio';
import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
import { CardExampleType } from '@components/examples/ToolExamples';
import { FormikProps } from 'formik';
import { ToolComponentProps } from '@tools/defineTool';
import ToolContent from '@components/ToolContent';