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

fix: examples

Browse Source
This commit is contained in:
Ibrahima G. Coulibaly
2025-02-27 02:21:08 +00:00
parent f08bce84b0
commit a713690882
6 changed files with 164 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
.idea/workspace.xml generated
View File

@@ -4,13 +4,13 @@
<option name="autoReloadType" value="SELECTIVE" />
</component>
<component name="ChangeListManager">
<list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="chore: show tooloptions in example">
<list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="refact: examples">
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" 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/ExampleOptions.tsx" 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/components/ToolHeader.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ToolHeader.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/examples/Examples.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/examples/ToolExamples.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" />
<change beforePath="$PROJECT_DIR$/src/pages/tools/string/split/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/string/split/index.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/tools/defineTool.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/tools/defineTool.tsx" afterDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -265,15 +265,7 @@
<workItem from="1740490890760" duration="1889000" />
<workItem from="1740503199053" duration="4853000" />
<workItem from="1740584243965" duration="17000" />
<workItem from="1740613094492" duration="7661000" />
</task>
<task id="LOCAL-00079" summary="fix: ci">
<option name="closed" value="true" />
<created>1719588326608</created>
<option name="number" value="00079" />
<option name="presentableId" value="LOCAL-00079" />
<option name="project" value="LOCAL" />
<updated>1719588326608</updated>
<workItem from="1740613094492" duration="9615000" />
</task>
<task id="LOCAL-00080" summary="fix: ci">
<option name="closed" value="true" />
@@ -659,7 +651,15 @@
<option name="project" value="LOCAL" />
<updated>1740619610169</updated>
</task>
<option name="localTasksCounter" value="128" />
<task id="LOCAL-00128" summary="refact: examples">
<option name="closed" value="true" />
<created>1740620866551</created>
<option name="number" value="00128" />
<option name="presentableId" value="LOCAL-00128" />
<option name="project" value="LOCAL" />
<updated>1740620866551</updated>
</task>
<option name="localTasksCounter" value="129" />
<servers />
</component>
<component name="TypeScriptGeneratedFilesManager">
@@ -691,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: self host" />
<MESSAGE value="chore: format number" />
<MESSAGE value="feat: rotate ui" />
<MESSAGE value="feat: shuffle ui" />
@@ -716,7 +715,8 @@
<MESSAGE value="docs: readme" />
<MESSAGE value="chore: handle enter press on search" />
<MESSAGE value="chore: show tooloptions in example" />
<option name="LAST_COMMIT_MESSAGE" value="chore: show tooloptions in example" />
<MESSAGE value="refact: examples" />
<option name="LAST_COMMIT_MESSAGE" value="refact: examples" />
</component>
<component name="XSLT-Support.FileAssociations.UIState">
<expand />

14
src/components/ToolHeader.tsx
View File

@@ -26,7 +26,7 @@ function ToolLinks() {
return (
<Grid container spacing={2} mt={1}>
<Grid item md={12} lg={4}>
<Grid item md={12} lg={6}>
<StyledButton
sx={{ backgroundColor: 'white' }}
fullWidth
@@ -36,16 +36,16 @@ function ToolLinks() {
Use This Tool
</StyledButton>
</Grid>
<Grid item md={12} lg={4}>
<Grid item md={12} lg={6}>
<StyledButton fullWidth variant="outlined" href="#examples">
See Examples
</StyledButton>
</Grid>
<Grid item md={12} lg={4}>
<StyledButton fullWidth variant="outlined" href="#tour">
Learn How to Use
</StyledButton>
</Grid>
{/*<Grid item md={12} lg={4}>*/}
{/* <StyledButton fullWidth variant="outlined" href="#tour">*/}
{/* Learn How to Use*/}
{/* </StyledButton>*/}
{/*</Grid>*/}
</Grid>
);
}

30
src/components/examples/Examples.tsx → src/components/examples/ToolExamples.tsx
View File

@@ -2,30 +2,44 @@ import { Box, Grid, Stack, Typography } from '@mui/material';
import ExampleCard, { ExampleCardProps } from './ExampleCard';
import React from 'react';
import { GetGroupsType } from '@components/options/ToolOptions';
import { FormikProps } from 'formik';
interface ExampleProps<T> {
export type CardExampleType<T> = Omit<
ExampleCardProps<T>,
'getGroups' | 'changeInputResult'
>;
export interface ExampleProps<T> {
title: string;
subtitle: string;
exampleCards: Omit<ExampleCardProps<T>, 'getGroups' | 'changeInputResult'>[];
subtitle?: string;
exampleCards: CardExampleType<T>[];
getGroups: GetGroupsType<T>;
changeInputResult: (newOptions: T) => void;
formRef: React.RefObject<FormikProps<T>>;
}
export default function Examples<T>({
export default function ToolExamples<T>({
title,
subtitle,
exampleCards,
getGroups,
changeInputResult
formRef
}: ExampleProps<T>) {
function changeInputResult(newOptions: T) {
formRef.current?.setValues(newOptions);
const toolsElement = document.getElementById('tool');
if (toolsElement) {
toolsElement.scrollIntoView({ behavior: 'smooth' });
}
}
return (
<Box id={'examples'} mt={4}>
<Box mt={4} display="flex" gap={1} alignItems="center">
<Typography mb={2} fontSize={30} color={'primary'}>
{title}
{`${title} Examples`}
</Typography>
<Typography mb={2} fontSize={30} color={'secondary'}>
{subtitle}
{subtitle ?? 'Click to try!'}
</Typography>
</Box>

29
src/pages/tools/string/join/index.tsx
View File

@@ -11,8 +11,11 @@ import ToolInputAndResult from '@components/ToolInputAndResult';
import ToolInfo from '@components/ToolInfo';
import Separator from '@components/Separator';
import Examples from '@components/examples/Examples';
import ToolExamples, {
CardExampleType
} from '@components/examples/ToolExamples';
import { FormikProps } from 'formik';
import { ToolComponentProps } from '@tools/defineTool';
const initialValues = {
joinCharacter: '',
@@ -50,7 +53,7 @@ const blankTrailingOptions: {
}
];
const exampleCards = [
const exampleCards: CardExampleType<InitialValuesType>[] = [
{
title: 'Merge a To-Do List',
description:
@@ -110,24 +113,15 @@ s
}
];
export default function JoinText() {
export default function JoinText({ title }: ToolComponentProps) {
const [input, setInput] = useState<string>('');
const [result, setResult] = useState<string>('');
const optionsFormRef = useRef<FormikProps<InitialValuesType>>(null);
const formRef = useRef<FormikProps<InitialValuesType>>(null);
const compute = (optionsValues: InitialValuesType, input: any) => {
const { joinCharacter, deleteBlank, deleteTrailing } = optionsValues;
setResult(mergeText(input, deleteBlank, deleteTrailing, joinCharacter));
};
function changeInputResult(newOptions: InitialValuesType) {
optionsFormRef.current?.setValues(newOptions);
const toolsElement = document.getElementById('tool');
if (toolsElement) {
toolsElement.scrollIntoView({ behavior: 'smooth' });
}
}
const getGroups: GetGroupsType<InitialValuesType> = ({
values,
updateField
@@ -169,7 +163,7 @@ export default function JoinText() {
result={<ToolTextResult title={'Joined Text'} value={result} />}
/>
<ToolOptions
formRef={optionsFormRef}
formRef={formRef}
compute={compute}
getGroups={getGroups}
initialValues={initialValues}
@@ -180,12 +174,11 @@ export default function JoinText() {
description="With this tool you can join parts of the text together. It takes a list of text values, separated by newlines, and merges them together. You can set the character that will be placed between the parts of the combined text. Also, you can ignore all empty lines and remove spaces and tabs at the end of all lines. Textabulous!"
/>
<Separator backgroundColor="#5581b5" margin="50px" />
<Examples
title="Text Joiner Examples"
subtitle="Click to try!"
<ToolExamples
title={title}
exampleCards={exampleCards}
getGroups={getGroups}
changeInputResult={changeInputResult}
formRef={formRef}
/>
</Box>
);

133
src/pages/tools/string/split/index.tsx
View File

@@ -1,12 +1,17 @@
import { Box } from '@mui/material';
import React, { useState } from 'react';
import React, { useRef, useState } from 'react';
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 { compute, SplitOperatorType } from './service';
import RadioWithTextField from '@components/options/RadioWithTextField';
import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
import ToolInputAndResult from '@components/ToolInputAndResult';
import ToolExamples, {
CardExampleType
} from '@components/examples/ToolExamples';
import { ToolComponentProps } from '@tools/defineTool';
import { FormikProps } from 'formik';
const initialValues = {
splitSeparatorType: 'symbol' as SplitOperatorType,
@@ -73,10 +78,64 @@ const outputOptions: {
}
];
export default function SplitText() {
const exampleCards: CardExampleType<typeof initialValues>[] = [
{
title: 'Split German Numbers',
description:
'In this example, we break the text into pieces by two characters – a comma and space. As a result, we get a column of numbers from 1 to 10 in German.',
sampleText: `1 - eins, 2 - zwei, 3 - drei, 4 - vier, 5 - fünf, 6 - sechs, 7 - sieben, 8 - acht, 9 - neun, 10 - zehn`,
sampleResult: `1 - eins
2 - zwei
3 - drei
4 - vier
5 - fünf
6 - sechs
7 - sieben
8 - acht
9 - neun
10 - zehn`,
sampleOptions: {
...initialValues,
symbolValue: ',',
splitSeparatorType: 'symbol',
outputSeparator: '\n'
}
},
{
title: 'Text Cleanup via a Regular Expression',
description:
'In this example, we use a super smart regular expression trick to clean-up the text. This regexp finds all non-alphabetic characters and splits the text into pieces by these non-alphabetic chars. As a result, we extract only those parts of the text that contain Latin letters and words.',
sampleText: `Finding%№1.65*;?words()is'12#easy_`,
sampleResult: `Finding
words
is
easy`,
sampleOptions: {
...initialValues,
regexValue: '[^a-zA-Z]+',
splitSeparatorType: 'regex',
outputSeparator: '\n'
}
},
{
title: 'Three-dot Output Separator',
description:
'This example splits the text by spaces and then places three dots between the words.',
sampleText: `If you started with $0.01 and doubled your money every day, it would take 27 days to become a millionaire.`,
sampleResult: `If...you...started...with...$0.01...and...doubled...your...money...every...day,...it...would...take...27...days...to...become...a...millionaire.!`,
sampleOptions: {
...initialValues,
symbolValue: '',
splitSeparatorType: 'symbol',
outputSeparator: '...'
}
}
];
export default function SplitText({ title }: ToolComponentProps) {
const [input, setInput] = useState<string>('');
const [result, setResult] = useState<string>('');
// const formRef = useRef<FormikProps<typeof initialValues>>(null);
const formRef = useRef<FormikProps<typeof initialValues>>(null);
const computeExternal = (optionsValues: typeof initialValues, input: any) => {
const {
splitSeparatorType,
@@ -104,6 +163,37 @@ export default function SplitText() {
);
};
const getGroups: GetGroupsType<typeof initialValues> = ({
values,
updateField
}) => [
{
title: 'Split separator options',
component: splitOperators.map(({ title, description, type }) => (
<RadioWithTextField
key={type}
checked={type === values.splitSeparatorType}
title={title}
fieldName={'splitSeparatorType'}
description={description}
value={values[`${type}Value`]}
onRadioClick={() => updateField('splitSeparatorType', type)}
onTextChange={(val) => updateField(`${type}Value`, val)}
/>
))
},
{
title: 'Output separator options',
component: outputOptions.map((option) => (
<TextFieldWithDesc
key={option.accessor}
value={values[option.accessor]}
onOwnChange={(value) => updateField(option.accessor, value)}
description={option.description}
/>
))
}
];
return (
<Box>
<ToolInputAndResult
@@ -112,37 +202,16 @@ export default function SplitText() {
/>
<ToolOptions
compute={computeExternal}
getGroups={({ values, updateField }) => [
{
title: 'Split separator options',
component: splitOperators.map(({ title, description, type }) => (
<RadioWithTextField
key={type}
checked={type === values.splitSeparatorType}
title={title}
fieldName={'splitSeparatorType'}
description={description}
value={values[`${type}Value`]}
onRadioClick={() => updateField('splitSeparatorType', type)}
onTextChange={(val) => updateField(`${type}Value`, val)}
/>
))
},
{
title: 'Output separator options',
component: outputOptions.map((option) => (
<TextFieldWithDesc
key={option.accessor}
value={values[option.accessor]}
onOwnChange={(value) => updateField(option.accessor, value)}
description={option.description}
/>
))
}
]}
getGroups={getGroups}
initialValues={initialValues}
input={input}
/>
<ToolExamples
title={title}
exampleCards={exampleCards}
getGroups={getGroups}
formRef={formRef}
/>
</Box>
);
}

8
src/tools/defineTool.tsx
View File

@@ -4,7 +4,7 @@ import { IconifyIcon } from '@iconify/react';
interface ToolOptions {
path: string;
component: LazyExoticComponent<JSXElementConstructor<NonNullable<unknown>>>;
component: LazyExoticComponent<JSXElementConstructor<ToolComponentProps>>;
keywords: string[];
icon?: IconifyIcon | string;
name: string;
@@ -25,6 +25,10 @@ export interface DefinedTool {
component: () => JSX.Element;
}
export interface ToolComponentProps {
title?: any;
}
export const defineTool = (
basePath: ToolCategory,
options: ToolOptions
@@ -55,7 +59,7 @@ export const defineTool = (
icon={icon}
type={basePath}
>
<Component />
<Component title={name} />
</ToolLayout>
);
}