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

feat: shuffle ui

Browse Source
This commit is contained in:
Ibrahima G. Coulibaly
2024-07-14 00:36:49 +01:00
parent 46859592cf
commit 31f0ad9f32
3 changed files with 135 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
.idea/workspace.xml generated
View File

@@ -4,37 +4,10 @@
<option name="autoReloadType" value="SELECTIVE" />
</component>
<component name="ChangeListManager">
<list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="chore: format number">
<list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="feat: rotate ui">
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/list/duplicate/duplicate.service.test.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/list/duplicate/duplicate.service.test.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/list/duplicate/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/list/duplicate/index.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/list/duplicate/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/list/duplicate/meta.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/list/duplicate/service.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/list/duplicate/service.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/list/rotate/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/list/rotate/index.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/string/create-palindrome/create-palindrome.service.test.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/create-palindrome/create-palindrome.service.test.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/string/create-palindrome/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/create-palindrome/index.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/string/create-palindrome/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/create-palindrome/meta.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/string/create-palindrome/service.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/create-palindrome/service.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/string/extract-substring/extract-substring.service.test.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/extract-substring/extract-substring.service.test.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/string/extract-substring/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/extract-substring/index.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/string/extract-substring/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/extract-substring/meta.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/string/extract-substring/service.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/extract-substring/service.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/string/palindrome/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/palindrome/index.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/string/palindrome/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/palindrome/meta.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/string/palindrome/palindrome.service.test.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/palindrome/palindrome.service.test.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/string/palindrome/service.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/palindrome/service.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/string/randomize-case/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/randomize-case/index.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/string/randomize-case/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/randomize-case/meta.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/string/randomize-case/randomize-case.service.test.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/randomize-case/randomize-case.service.test.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/string/randomize-case/service.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/randomize-case/service.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/string/reverse/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/reverse/index.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/string/reverse/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/reverse/meta.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/string/reverse/reverse.service.test.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/reverse/reverse.service.test.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/string/reverse/service.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/reverse/service.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/string/uppercase/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/uppercase/index.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/string/uppercase/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/uppercase/meta.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/string/uppercase/service.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/uppercase/service.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/string/uppercase/uppercase.service.test.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/uppercase/uppercase.service.test.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/list/shuffle/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/list/shuffle/index.tsx" afterDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -272,15 +245,7 @@
<workItem from="1720661825389" duration="4305000" />
<workItem from="1720729165596" duration="3258000" />
<workItem from="1720911748039" duration="331000" />
<workItem from="1720912096050" duration="810000" />
</task>
<task id="LOCAL-00048" summary="chore: ResultFooter">
<option name="closed" value="true" />
<created>1719274243788</created>
<option name="number" value="00048" />
<option name="presentableId" value="LOCAL-00048" />
<option name="project" value="LOCAL" />
<updated>1719274243788</updated>
<workItem from="1720912096050" duration="1586000" />
</task>
<task id="LOCAL-00049" summary="feat: change color in png finished">
<option name="closed" value="true" />
@@ -666,7 +631,15 @@
<option name="project" value="LOCAL" />
<updated>1720730102817</updated>
</task>
<option name="localTasksCounter" value="97" />
<task id="LOCAL-00097" summary="feat: rotate ui">
<option name="closed" value="true" />
<created>1720913013183</created>
<option name="number" value="00097" />
<option name="presentableId" value="LOCAL-00097" />
<option name="project" value="LOCAL" />
<updated>1720913013183</updated>
</task>
<option name="localTasksCounter" value="98" />
<servers />
</component>
<component name="TypeScriptGeneratedFilesManager">
@@ -710,7 +683,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="chore: loading screen" />
<MESSAGE value="chore: shuffle tools search" />
<MESSAGE value="refactor: toolOptions" />
<MESSAGE value="feat: playwright" />
@@ -735,7 +707,8 @@
<MESSAGE value="feat: reverse list ui" />
<MESSAGE value="feat: self host" />
<MESSAGE value="chore: format number" />
<option name="LAST_COMMIT_MESSAGE" value="chore: format number" />
<MESSAGE value="feat: rotate ui" />
<option name="LAST_COMMIT_MESSAGE" value="feat: rotate ui" />
</component>
<component name="XSLT-Support.FileAssociations.UIState">
<expand />

2
src/pages/list/rotate/index.tsx
View File

@@ -118,7 +118,7 @@ export default function Rotate() {
{rotationDirections.map(({ title, description, value }) => (
<SimpleRadio
key={`${value}`}
onClick={() => updateField('right', Boolean(value))}
onClick={() => updateField('right', value)}
title={title}
description={description}
checked={values.right === value}

122
src/pages/list/shuffle/index.tsx
View File

@@ -1,11 +1,125 @@
import { Box } from '@mui/material';
import React from 'react';
import React, { useState } from 'react';
import ToolTextInput from '../../../components/input/ToolTextInput';
import ToolTextResult from '../../../components/result/ToolTextResult';
import * as Yup from 'yup';
import ToolOptions from '../../../components/options/ToolOptions';
import { shuffleList, SplitOperatorType } from './service';
import ToolInputAndResult from '../../../components/ToolInputAndResult';
import SimpleRadio from '../../../components/options/SimpleRadio';
import TextFieldWithDesc from '../../../components/options/TextFieldWithDesc';
import { formatNumber } from '../../../utils/number';
import { isNumber } from '../../../utils/string';
const initialValues = {};
const initialValues = {
splitOperatorType: 'symbol' as SplitOperatorType,
splitSeparator: ',',
joinSeparator: ',',
length: ''
};
const splitOperators: {
title: string;
description: string;
type: SplitOperatorType;
}[] = [
{
title: 'Use a Symbol for Splitting',
description: 'Delimit input list items with a character.',
type: 'symbol'
},
{
title: 'Use a Regex for Splitting',
type: 'regex',
description: 'Delimit input list items with a regular expression.'
}
];
export default function Shuffle() {
const [input, setInput] = useState<string>('');
const [result, setResult] = useState<string>('');
const compute = (optionsValues: typeof initialValues, input: any) => {
const { splitOperatorType, splitSeparator, joinSeparator, length } =
optionsValues;
setResult(
shuffleList(
splitOperatorType,
input,
splitSeparator,
joinSeparator,
isNumber(length) ? Number(length) : undefined
)
);
};
const validationSchema = Yup.object({
// splitSeparator: Yup.string().required('The separator is required')
});
export default function Shuffle() {
return <Box>Lorem ipsum</Box>;
return (
<Box>
<ToolInputAndResult
input={
<ToolTextInput
title={'Input list'}
value={input}
onChange={setInput}
/>
}
result={<ToolTextResult title={'Rotated list'} value={result} />}
/>
<ToolOptions
compute={compute}
getGroups={({ values, updateField }) => [
{
title: 'Input list separator',
component: (
<Box>
{splitOperators.map(({ title, description, type }) => (
<SimpleRadio
key={type}
onClick={() => updateField('splitOperatorType', type)}
title={title}
description={description}
checked={values.splitOperatorType === type}
/>
))}
<TextFieldWithDesc
description={'Set a delimiting symbol or regular expression.'}
value={values.splitSeparator}
onOwnChange={(val) => updateField('splitSeparator', val)}
/>
</Box>
)
},
{
title: 'Shuffled List Length',
component: (
<Box>
<TextFieldWithDesc
description={'Output this many random items'}
value={values.length}
onOwnChange={(val) => updateField('length', val)}
/>
</Box>
)
},
{
title: 'Shuffled List Separator',
component: (
<Box>
<TextFieldWithDesc
value={values.joinSeparator}
onOwnChange={(value) => updateField('joinSeparator', value)}
description={'Use this separator in the randomized list.'}
/>
</Box>
)
}
]}
initialValues={initialValues}
input={input}
validationSchema={validationSchema}
/>
</Box>
);
}