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

Merge branch 'main' into truncate-text

Browse Source
This commit is contained in:
Ibrahima G. Coulibaly
2025-03-11 18:30:49 +00:00
committed by GitHub
parent 3b4af2f2fb fec4d3f141
commit bc83b0fcfa
109 changed files with 6154 additions and 1880 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.codebuddy/.gitignore vendored
View File

@@ -1 +1,2 @@
db/
db/
docs

20
.coding-aider-plans/refactor_tools_toolcontent.md Normal file
View File

@@ -0,0 +1,20 @@
[Coding Aider Plan]
## Overview
This plan outlines the refactoring of existing tools to utilize a `ToolContent` component. This will standardize the structure and styling of tool content across the application, improving maintainability and user experience.
## Problem Description
Currently, some tools directly render their content without using a common `ToolContent` component. This leads to inconsistencies in styling, layout, and overall structure. It also makes it harder to apply global changes or updates to the tool content areas.
## Goals
- Identify tools that do not currently use `ToolContent`.
- Implement `ToolContent` in these tools.
- Ensure consistent styling and layout across all tools.
## Additional Notes and Constraints
- The `ToolContent` component should be flexible enough to accommodate the different types of content used by each tool.
- Ensure that the refactoring does not introduce any regressions or break existing functionality.
- Consider creating a subplan if the number of tools requiring changes is large or if individual tools require complex modifications.
## References
- Existing tools that already use `ToolContent` can serve as examples.

9
.coding-aider-plans/refactor_tools_toolcontent_checklist.md Normal file
View File

@@ -0,0 +1,9 @@
[Coding Aider Plan - Checklist]
- [ ] Create `ToolContent` component if it doesn't exist.
- [ ] Identify tools that do not use `ToolContent`.
- [x] For each identified tool:
- [x] Implement `ToolContent` wrapper.
- [ ] Adjust styling as needed to match existing design.
- [ ] Test the tool to ensure it functions correctly.
- [ ] Review all modified tools to ensure consistency.

6
.coding-aider-plans/refactor_tools_toolcontent_context.yaml Normal file
View File

@@ -0,0 +1,6 @@
---
files:
- path: src\pages\tools\list\duplicate\index.tsx
readOnly: false
- path: src\pages\tools\list\index.ts
readOnly: false

1
.gitignore vendored
View File

@@ -40,3 +40,4 @@ yarn-error.log*
/playwright-report
dist.zip
.aider*

1
.husky/pre-commit Normal file
View File

@@ -0,0 +1 @@
npx lint-staged

2
.idea/codeStyles/Project.xml generated
View File

@@ -4,7 +4,6 @@
<option name="HTML_SPACE_INSIDE_EMPTY_TAG" value="true" />
</HTMLCodeStyleSettings>
<JSCodeStyleSettings version="0">
<option name="USE_SEMICOLON_AFTER_STATEMENT" value="false" />
<option name="FORCE_SEMICOLON_STYLE" value="true" />
<option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
<option name="USE_DOUBLE_QUOTES" value="false" />
@@ -14,7 +13,6 @@
<option name="SPACES_WITHIN_IMPORTS" value="true" />
</JSCodeStyleSettings>
<TypeScriptCodeStyleSettings version="0">
<option name="USE_SEMICOLON_AFTER_STATEMENT" value="false" />
<option name="FORCE_SEMICOLON_STYLE" value="true" />
<option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
<option name="USE_DOUBLE_QUOTES" value="false" />

543
.idea/workspace.xml generated
View File

@@ -4,11 +4,11 @@
<option name="autoReloadType" value="SELECTIVE" />
</component>
<component name="ChangeListManager">
<list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="fix: replace text service">
<list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="feat: trim video">
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/string/quote/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/quote/meta.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/string/rot13/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/rot13/meta.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/string/rotate/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/rotate/meta.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/tools/image/png/change-colors-in-png/change-colors-in-png.e2e.spec.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/image/png/change-colors-in-png/change-colors-in-png.e2e.spec.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/tools/image/png/create-transparent/create-transparent.e2e.spec.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/image/png/create-transparent/create-transparent.e2e.spec.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/tools/video/trim/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/video/trim/index.tsx" afterDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -22,24 +22,25 @@
<option name="BRANCH" value="origin/main" />
</component>
<component name="Git.Settings">
<option name="PUSH_AUTO_UPDATE" value="true" />
<option name="RECENT_BRANCH_BY_REPOSITORY">
<map>
<entry key="$PROJECT_DIR$" value="fork/EugSh1/main" />
<entry key="$PROJECT_DIR$" value="fork/ady-cf/feature/validate-json" />
</map>
</option>
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
<option name="RESET_MODE" value="HARD" />
</component>
<component name="GitHubPullRequestSearchHistory">{
&quot;history&quot;: [
&quot;history&quot;: [
{
&quot;assignee&quot;: &quot;iib0011&quot;
&quot;assignee&quot;: &quot;iib0011&quot;
}
],
&quot;lastFilter&quot;: {
],
&quot;lastFilter&quot;: {
&quot;assignee&quot;: &quot;iib0011&quot;
}
}</component>
}
}</component>
<component name="GitHubPullRequestState">{
&quot;prStates&quot;: [
{
@@ -69,15 +70,25 @@
&quot;number&quot;: 33
},
&quot;lastSeen&quot;: 1741282429036
},
{
&quot;id&quot;: {
&quot;id&quot;: &quot;PR_kwDOMJIfts5zyFTs&quot;,
&quot;number&quot;: 15
},
&quot;lastSeen&quot;: 1741535540953
}
]
}</component>
<component name="GithubPullRequestsUISettings">{
&quot;selectedUrlAndAccountId&quot;: {
&quot;selectedUrlAndAccountId&quot;: {
&quot;url&quot;: &quot;https://github.com/iib0011/omni-tools.git&quot;,
&quot;accountId&quot;: &quot;45f8cd51-000f-4ba4-a4c6-c4d96ac9b1e5&quot;
}
}</component>
}
}</component>
<component name="HighlightingSettingsPerFile">
<setting file="file://$PROJECT_DIR$/node_modules/react-image-crop/dist/index.d.ts" root0="SKIP_INSPECTION" />
</component>
<component name="KubernetesApiProvider">{
&quot;isMigrated&quot;: true
}</component>
@@ -102,6 +113,7 @@
"ASKED_SHARE_PROJECT_CONFIGURATION_FILES": "true",
"Docker.Dockerfile build.executor": "Run",
"Docker.Dockerfile.executor": "Run",
"Playwright.Create transparent PNG.should make png color transparent.executor": "Run",
"Playwright.JoinText Component.executor": "Run",
"Playwright.JoinText Component.should merge text pieces with specified join character.executor": "Run",
"RunOnceActivity.OpenProjectViewOnStart": "true",
@@ -115,11 +127,12 @@
"Vitest.removeDuplicateLines function.executor": "Run",
"Vitest.removeDuplicateLines function.newlines option.executor": "Run",
"Vitest.removeDuplicateLines function.newlines option.should filter newlines when newlines is set to filter.executor": "Run",
"Vitest.replaceText function (regexp mode).should return the original text when passed an invalid regexp.executor": "Run",
"Vitest.replaceText function.executor": "Run",
"git-widget-placeholder": "#22 on truncate",
"git-widget-placeholder": "main",
"ignore.virus.scanning.warn.message": "true",
"kotlin-language-version-configured": "true",
"last_opened_file_path": "C:/Users/Ibrahima/IdeaProjects/omni-tools/public/assets",
"last_opened_file_path": "C:/Users/Ibrahima/IdeaProjects/omni-tools/src/pages/tools/list/duplicate/index.tsx",
"node.js.detected.package.eslint": "true",
"node.js.detected.package.tslint": "true",
"node.js.selected.package.eslint": "(autodetect)",
@@ -137,7 +150,7 @@
"project.structure.last.edited": "Problems",
"project.structure.proportion": "0.0",
"project.structure.side.proportion": "0.2",
"settings.editor.selected.configurable": "settings.typescriptcompiler",
"settings.editor.selected.configurable": "refactai_advanced_settings",
"ts.external.directory.path": "C:\\Users\\Ibrahima\\IdeaProjects\\omni-tools\\node_modules\\typescript\\lib",
"vue.rearranger.settings.migration": "true"
}
@@ -153,11 +166,11 @@
</component>
<component name="RecentsManager">
<key name="CopyFile.RECENT_KEYS">
<recent name="C:\Users\Ibrahima\IdeaProjects\omni-tools\.husky" />
<recent name="C:\Users\Ibrahima\IdeaProjects\omni-tools\public\assets" />
<recent name="C:\Users\Ibrahima\IdeaProjects\omni-tools\src\assets" />
<recent name="C:\Users\Ibrahima\IdeaProjects\omni-tools\.github" />
<recent name="C:\Users\HP\IdeaProjects\omni-tools\src\components\options" />
<recent name="C:\Users\HP\IdeaProjects\omni-tools\src\assets" />
</key>
<key name="MoveFile.RECENT_KEYS">
<recent name="C:\Users\Ibrahima\IdeaProjects\omni-tools\public\assets" />
@@ -167,59 +180,31 @@
<recent name="C:\Users\HP\IdeaProjects\omni-tools\src\components\options" />
</key>
</component>
<component name="RunManager" selected="npm.dev">
<configuration name="removeDuplicateLines function" type="JavaScriptTestRunnerVitest" temporary="true" nameIsGenerated="true">
<component name="RunManager" selected="npm.test:e2e">
<configuration name="Create transparent PNG.should make png color transparent" type="JavaScriptTestRunnerPlaywright" temporary="true" nameIsGenerated="true">
<node-interpreter value="project" />
<vitest-package value="$PROJECT_DIR$/node_modules/vitest" />
<playwright-package value="$PROJECT_DIR$/node_modules/@playwright/test" />
<working-dir value="$PROJECT_DIR$" />
<vitest-options value="--run" />
<envs />
<scope-kind value="SUITE" />
<test-file value="$PROJECT_DIR$/src/pages/tools/string/remove-duplicate-lines/remove-duplicate-lines.service.test.ts" />
<scope-kind value="TEST" />
<test-file value="$PROJECT_DIR$/src/pages/tools/image/png/create-transparent/create-transparent.e2e.spec.ts" />
<test-names>
<test-name value="removeDuplicateLines function" />
<test-name value="Create transparent PNG" />
<test-name value="should make png color transparent" />
</test-names>
<method v="2" />
</configuration>
<configuration name="removeDuplicateLines function.newlines option" type="JavaScriptTestRunnerVitest" temporary="true" nameIsGenerated="true">
<node-interpreter value="project" />
<vitest-package value="$PROJECT_DIR$/node_modules/vitest" />
<working-dir value="$PROJECT_DIR$" />
<vitest-options value="--run" />
<envs />
<scope-kind value="SUITE" />
<test-file value="$PROJECT_DIR$/src/pages/tools/string/remove-duplicate-lines/remove-duplicate-lines.service.test.ts" />
<test-names>
<test-name value="removeDuplicateLines function" />
<test-name value="newlines option" />
</test-names>
<method v="2" />
</configuration>
<configuration name="removeDuplicateLines function.newlines option.should filter newlines when newlines is set to filter" type="JavaScriptTestRunnerVitest" temporary="true" nameIsGenerated="true">
<configuration name="replaceText function (regexp mode).should return the original text when passed an invalid regexp" type="JavaScriptTestRunnerVitest" temporary="true" nameIsGenerated="true">
<node-interpreter value="project" />
<vitest-package value="$PROJECT_DIR$/node_modules/vitest" />
<working-dir value="$PROJECT_DIR$" />
<vitest-options value="--run" />
<envs />
<scope-kind value="TEST" />
<test-file value="$PROJECT_DIR$/src/pages/tools/string/remove-duplicate-lines/remove-duplicate-lines.service.test.ts" />
<test-names>
<test-name value="removeDuplicateLines function" />
<test-name value="newlines option" />
<test-name value="should filter newlines when newlines is set to filter" />
</test-names>
<method v="2" />
</configuration>
<configuration name="replaceText function" type="JavaScriptTestRunnerVitest" temporary="true" nameIsGenerated="true">
<node-interpreter value="project" />
<vitest-package value="$PROJECT_DIR$/node_modules/vitest" />
<working-dir value="$PROJECT_DIR$" />
<vitest-options value="--run" />
<envs />
<scope-kind value="SUITE" />
<test-file value="$PROJECT_DIR$/src/pages/tools/string/text-replacer/replaceText.service.test.ts" />
<test-names>
<test-name value="replaceText function" />
<test-name value="replaceText function (regexp mode)" />
<test-name value="should return the original text when passed an invalid regexp" />
</test-names>
<method v="2" />
</configuration>
@@ -239,20 +224,40 @@
<envs />
<method v="2" />
</configuration>
<configuration name="test" type="js.build_tools.npm" temporary="true" nameIsGenerated="true">
<package-json value="$PROJECT_DIR$/package.json" />
<command value="run" />
<scripts>
<script value="test" />
</scripts>
<node-interpreter value="project" />
<envs />
<method v="2" />
</configuration>
<configuration name="test:e2e" type="js.build_tools.npm" temporary="true" nameIsGenerated="true">
<package-json value="$PROJECT_DIR$/package.json" />
<command value="run" />
<scripts>
<script value="test:e2e" />
</scripts>
<node-interpreter value="project" />
<envs />
<method v="2" />
</configuration>
<list>
<item itemvalue="npm.test" />
<item itemvalue="npm.test:e2e" />
<item itemvalue="npm.dev" />
<item itemvalue="Vitest.replaceText function" />
<item itemvalue="Vitest.removeDuplicateLines function" />
<item itemvalue="Vitest.removeDuplicateLines function.newlines option" />
<item itemvalue="Vitest.removeDuplicateLines function.newlines option.should filter newlines when newlines is set to filter" />
<item itemvalue="Playwright.Create transparent PNG.should make png color transparent" />
<item itemvalue="Vitest.replaceText function (regexp mode).should return the original text when passed an invalid regexp" />
</list>
<recent_temporary>
<list>
<item itemvalue="npm.test:e2e" />
<item itemvalue="Playwright.Create transparent PNG.should make png color transparent" />
<item itemvalue="npm.dev" />
<item itemvalue="Vitest.replaceText function" />
<item itemvalue="Vitest.removeDuplicateLines function" />
<item itemvalue="Vitest.removeDuplicateLines function.newlines option" />
<item itemvalue="Vitest.removeDuplicateLines function.newlines option.should filter newlines when newlines is set to filter" />
<item itemvalue="Vitest.replaceText function (regexp mode).should return the original text when passed an invalid regexp" />
<item itemvalue="npm.test" />
</list>
</recent_temporary>
</component>
@@ -329,182 +334,12 @@
<workItem from="1740880919391" duration="4395000" />
<workItem from="1740923024259" duration="23000" />
<workItem from="1740933006573" duration="3679000" />
</task>
<task id="LOCAL-00093" summary="feat: group list ui">
<option name="closed" value="true" />
<created>1720656867853</created>
<option name="number" value="00093" />
<option name="presentableId" value="LOCAL-00093" />
<option name="project" value="LOCAL" />
<updated>1720656867853</updated>
</task>
<task id="LOCAL-00094" summary="feat: reverse list ui">
<option name="closed" value="true" />
<created>1720658257129</created>
<option name="number" value="00094" />
<option name="presentableId" value="LOCAL-00094" />
<option name="project" value="LOCAL" />
<updated>1720658257129</updated>
</task>
<task id="LOCAL-00095" summary="feat: self host">
<option name="closed" value="true" />
<created>1720665220407</created>
<option name="number" value="00095" />
<option name="presentableId" value="LOCAL-00095" />
<option name="project" value="LOCAL" />
<updated>1720665220408</updated>
</task>
<task id="LOCAL-00096" summary="chore: format number">
<option name="closed" value="true" />
<created>1720730102816</created>
<option name="number" value="00096" />
<option name="presentableId" value="LOCAL-00096" />
<option name="project" value="LOCAL" />
<updated>1720730102817</updated>
</task>
<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>
<task id="LOCAL-00098" summary="feat: shuffle ui">
<option name="closed" value="true" />
<created>1720913810733</created>
<option name="number" value="00098" />
<option name="presentableId" value="LOCAL-00098" />
<option name="project" value="LOCAL" />
<updated>1720913810733</updated>
</task>
<task id="LOCAL-00099" summary="refactor: remove validation schema">
<option name="closed" value="true" />
<created>1720914492812</created>
<option name="number" value="00099" />
<option name="presentableId" value="LOCAL-00099" />
<option name="project" value="LOCAL" />
<updated>1720914492812</updated>
</task>
<task id="LOCAL-00100" summary="refactor: optimize imports">
<option name="closed" value="true" />
<created>1720914702655</created>
<option name="number" value="00100" />
<option name="presentableId" value="LOCAL-00100" />
<option name="project" value="LOCAL" />
<updated>1720914702656</updated>
</task>
<task id="LOCAL-00101" summary="chore: use string tools">
<option name="closed" value="true" />
<created>1720914810712</created>
<option name="number" value="00101" />
<option name="presentableId" value="LOCAL-00101" />
<option name="project" value="LOCAL" />
<updated>1720914810713</updated>
</task>
<task id="LOCAL-00102" summary="fix: ctrl v">
<option name="closed" value="true" />
<created>1740267666455</created>
<option name="number" value="00102" />
<option name="presentableId" value="LOCAL-00102" />
<option name="project" value="LOCAL" />
<updated>1740267666455</updated>
</task>
<task id="LOCAL-00103" summary="feat: update readme">
<option name="closed" value="true" />
<created>1740276092528</created>
<option name="number" value="00103" />
<option name="presentableId" value="LOCAL-00103" />
<option name="project" value="LOCAL" />
<updated>1740276092528</updated>
</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 id="LOCAL-00105" summary="feat: compress png">
<option name="closed" value="true" />
<created>1740321912140</created>
<option name="number" value="00105" />
<option name="presentableId" value="LOCAL-00105" />
<option name="project" value="LOCAL" />
<updated>1740321912140</updated>
</task>
<task id="LOCAL-00106" summary="fix: compress png">
<option name="closed" value="true" />
<created>1740322444616</created>
<option name="number" value="00106" />
<option name="presentableId" value="LOCAL-00106" />
<option name="project" value="LOCAL" />
<updated>1740322444616</updated>
</task>
<task id="LOCAL-00107" summary="fix: docs">
<option name="closed" value="true" />
<created>1740324026721</created>
<option name="number" value="00107" />
<option name="presentableId" value="LOCAL-00107" />
<option name="project" value="LOCAL" />
<updated>1740324026721</updated>
</task>
<task id="LOCAL-00108" summary="fix: docs">
<option name="closed" value="true" />
<created>1740324069359</created>
<option name="number" value="00108" />
<option name="presentableId" value="LOCAL-00108" />
<option name="project" value="LOCAL" />
<updated>1740324069359</updated>
</task>
<task id="LOCAL-00109" summary="fix: docs">
<option name="closed" value="true" />
<created>1740324274955</created>
<option name="number" value="00109" />
<option name="presentableId" value="LOCAL-00109" />
<option name="project" value="LOCAL" />
<updated>1740324274955</updated>
</task>
<task id="LOCAL-00110" summary="feat: funding">
<option name="closed" value="true" />
<created>1740460017596</created>
<option name="number" value="00110" />
<option name="presentableId" value="LOCAL-00110" />
<option name="project" value="LOCAL" />
<updated>1740460017596</updated>
</task>
<task id="LOCAL-00111" summary="feat: ui changes">
<option name="closed" value="true" />
<created>1740464231905</created>
<option name="number" value="00111" />
<option name="presentableId" value="LOCAL-00111" />
<option name="project" value="LOCAL" />
<updated>1740464231905</updated>
</task>
<task id="LOCAL-00112" summary="feat: ui changes">
<option name="closed" value="true" />
<created>1740464250449</created>
<option name="number" value="00112" />
<option name="presentableId" value="LOCAL-00112" />
<option name="project" value="LOCAL" />
<updated>1740464250449</updated>
</task>
<task id="LOCAL-00113" summary="fix: tsc">
<option name="closed" value="true" />
<created>1740464642001</created>
<option name="number" value="00113" />
<option name="presentableId" value="LOCAL-00113" />
<option name="project" value="LOCAL" />
<updated>1740464642001</updated>
</task>
<task id="LOCAL-00114" summary="fix: readme">
<option name="closed" value="true" />
<created>1740468159111</created>
<option name="number" value="00114" />
<option name="presentableId" value="LOCAL-00114" />
<option name="project" value="LOCAL" />
<updated>1740468159111</updated>
<workItem from="1741475969294" duration="4215000" />
<workItem from="1741494053121" duration="178000" />
<workItem from="1741537936314" duration="1294000" />
<workItem from="1741539602311" duration="4557000" />
<workItem from="1741547560596" duration="1671000" />
<workItem from="1741567442768" duration="14127000" />
</task>
<task id="LOCAL-00115" summary="fix: broken links">
<option name="closed" value="true" />
@@ -722,7 +557,183 @@
<option name="project" value="LOCAL" />
<updated>1741211604972</updated>
</task>
<option name="localTasksCounter" value="142" />
<task id="LOCAL-00142" summary="chore: smooth scroll for use this tool and examles">
<option name="closed" value="true" />
<created>1741414797155</created>
<option name="number" value="00142" />
<option name="presentableId" value="LOCAL-00142" />
<option name="project" value="LOCAL" />
<updated>1741414797155</updated>
</task>
<task id="LOCAL-00143" summary="feat: minify json">
<option name="closed" value="true" />
<created>1741416193639</created>
<option name="number" value="00143" />
<option name="presentableId" value="LOCAL-00143" />
<option name="project" value="LOCAL" />
<updated>1741416193639</updated>
</task>
<task id="LOCAL-00144" summary="feat: stringify json">
<option name="closed" value="true" />
<created>1741417920442</created>
<option name="number" value="00144" />
<option name="presentableId" value="LOCAL-00144" />
<option name="project" value="LOCAL" />
<updated>1741417920442</updated>
</task>
<task id="LOCAL-00145" summary="feat: arithmetic sequence">
<option name="closed" value="true" />
<created>1741419142510</created>
<option name="number" value="00145" />
<option name="presentableId" value="LOCAL-00145" />
<option name="project" value="LOCAL" />
<updated>1741419142510</updated>
</task>
<task id="LOCAL-00146" summary="style: tools height">
<option name="closed" value="true" />
<created>1741419188990</created>
<option name="number" value="00146" />
<option name="presentableId" value="LOCAL-00146" />
<option name="project" value="LOCAL" />
<updated>1741419188990</updated>
</task>
<task id="LOCAL-00147" summary="chore: update meta">
<option name="closed" value="true" />
<created>1741419527557</created>
<option name="number" value="00147" />
<option name="presentableId" value="LOCAL-00147" />
<option name="project" value="LOCAL" />
<updated>1741419527557</updated>
</task>
<task id="LOCAL-00148" summary="feat: change pgn opacity">
<option name="closed" value="true" />
<created>1741423117739</created>
<option name="number" value="00148" />
<option name="presentableId" value="LOCAL-00148" />
<option name="project" value="LOCAL" />
<updated>1741423117739</updated>
</task>
<task id="LOCAL-00149" summary="feat: change pgn opacity">
<option name="closed" value="true" />
<created>1741423587662</created>
<option name="number" value="00149" />
<option name="presentableId" value="LOCAL-00149" />
<option name="project" value="LOCAL" />
<updated>1741423587662</updated>
</task>
<task id="LOCAL-00150" summary="feat: crop png">
<option name="closed" value="true" />
<created>1741487705292</created>
<option name="number" value="00150" />
<option name="presentableId" value="LOCAL-00150" />
<option name="project" value="LOCAL" />
<updated>1741487705292</updated>
</task>
<task id="LOCAL-00151" summary="feat: crop png">
<option name="closed" value="true" />
<created>1741487735223</created>
<option name="number" value="00151" />
<option name="presentableId" value="LOCAL-00151" />
<option name="project" value="LOCAL" />
<updated>1741487735223</updated>
</task>
<task id="LOCAL-00152" summary="feat: crop png">
<option name="closed" value="true" />
<created>1741492688761</created>
<option name="number" value="00152" />
<option name="presentableId" value="LOCAL-00152" />
<option name="project" value="LOCAL" />
<updated>1741492688761</updated>
</task>
<task id="LOCAL-00153" summary="chore: remove unnecessary files">
<option name="closed" value="true" />
<created>1741492943849</created>
<option name="number" value="00153" />
<option name="presentableId" value="LOCAL-00153" />
<option name="project" value="LOCAL" />
<updated>1741492943849</updated>
</task>
<task id="LOCAL-00154" summary="refactor: validateJson">
<option name="closed" value="true" />
<created>1741535390090</created>
<option name="number" value="00154" />
<option name="presentableId" value="LOCAL-00154" />
<option name="project" value="LOCAL" />
<updated>1741535390090</updated>
</task>
<task id="LOCAL-00155" summary="refactor: use ToolContent">
<option name="closed" value="true" />
<created>1741540939154</created>
<option name="number" value="00155" />
<option name="presentableId" value="LOCAL-00155" />
<option name="project" value="LOCAL" />
<updated>1741540939154</updated>
</task>
<task id="LOCAL-00156" summary="feat: missing tools">
<option name="closed" value="true" />
<created>1741542318259</created>
<option name="number" value="00156" />
<option name="presentableId" value="LOCAL-00156" />
<option name="project" value="LOCAL" />
<updated>1741542318259</updated>
</task>
<task id="LOCAL-00157" summary="refactor: use ToolContent">
<option name="closed" value="true" />
<created>1741543593426</created>
<option name="number" value="00157" />
<option name="presentableId" value="LOCAL-00157" />
<option name="project" value="LOCAL" />
<updated>1741543593427</updated>
</task>
<task id="LOCAL-00158" summary="fix: prettify json">
<option name="closed" value="true" />
<created>1741543732607</created>
<option name="number" value="00158" />
<option name="presentableId" value="LOCAL-00158" />
<option name="project" value="LOCAL" />
<updated>1741543732607</updated>
</task>
<task id="LOCAL-00159" summary="refactor: sum">
<option name="closed" value="true" />
<created>1741544086061</created>
<option name="number" value="00159" />
<option name="presentableId" value="LOCAL-00159" />
<option name="project" value="LOCAL" />
<updated>1741544086061</updated>
</task>
<task id="LOCAL-00160" summary="fix: tools by category scroll">
<option name="closed" value="true" />
<created>1741548044897</created>
<option name="number" value="00160" />
<option name="presentableId" value="LOCAL-00160" />
<option name="project" value="LOCAL" />
<updated>1741548044897</updated>
</task>
<task id="LOCAL-00161" summary="fix: missing meta">
<option name="closed" value="true" />
<created>1741568170877</created>
<option name="number" value="00161" />
<option name="presentableId" value="LOCAL-00161" />
<option name="project" value="LOCAL" />
<updated>1741568170877</updated>
</task>
<task id="LOCAL-00162" summary="feat: trim video">
<option name="closed" value="true" />
<created>1741580004784</created>
<option name="number" value="00162" />
<option name="presentableId" value="LOCAL-00162" />
<option name="project" value="LOCAL" />
<updated>1741580004784</updated>
</task>
<task id="LOCAL-00163" summary="feat: trim video">
<option name="closed" value="true" />
<created>1741580736359</created>
<option name="number" value="00163" />
<option name="presentableId" value="LOCAL-00163" />
<option name="project" value="LOCAL" />
<updated>1741580736359</updated>
</task>
<option name="localTasksCounter" value="164" />
<servers />
</component>
<component name="TypeScriptGeneratedFilesManager">
@@ -759,19 +770,7 @@
<map>
<entry key="MAIN">
<value>
<State>
<option name="FILTERS">
<map>
<entry key="branch">
<value>
<list>
<option value="origin/examples" />
</list>
</value>
</entry>
</map>
</option>
</State>
<State />
</value>
</entry>
</map>
@@ -781,23 +780,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: funding" />
<MESSAGE value="feat: ui changes" />
<MESSAGE value="fix: readme" />
<MESSAGE value="fix: broken links" />
<MESSAGE value="chore: style buttons" />
<MESSAGE value="chore: style" />
<MESSAGE value="style: background svg" />
<MESSAGE value="docs: img" />
<MESSAGE value="fix: bg" />
<MESSAGE value="chore: handle enter press on search" />
<MESSAGE value="chore: show tooloptions in example" />
<MESSAGE value="refact: examples" />
<MESSAGE value="fix: examples" />
<MESSAGE value="feat: json pretty" />
<MESSAGE value="style: tool categories" />
<MESSAGE value="chore: compute only if value" />
<MESSAGE value="chore: remove prettify test" />
<MESSAGE value="chore: prettify json in home" />
<MESSAGE value="feat: jakarta font" />
<MESSAGE value="chore: img" />
@@ -806,7 +788,24 @@
<MESSAGE value="fix: tsc" />
<MESSAGE value="style: optimizations" />
<MESSAGE value="fix: replace text service" />
<option name="LAST_COMMIT_MESSAGE" value="fix: replace text service" />
<MESSAGE value="chore: smooth scroll for use this tool and examles" />
<MESSAGE value="feat: minify json" />
<MESSAGE value="feat: stringify json" />
<MESSAGE value="feat: arithmetic sequence" />
<MESSAGE value="style: tools height" />
<MESSAGE value="chore: update meta" />
<MESSAGE value="feat: change pgn opacity" />
<MESSAGE value="feat: crop png" />
<MESSAGE value="chore: remove unnecessary files" />
<MESSAGE value="refactor: validateJson" />
<MESSAGE value="feat: missing tools" />
<MESSAGE value="refactor: use ToolContent" />
<MESSAGE value="fix: prettify json" />
<MESSAGE value="refactor: sum" />
<MESSAGE value="fix: tools by category scroll" />
<MESSAGE value="fix: missing meta" />
<MESSAGE value="feat: trim video" />
<option name="LAST_COMMIT_MESSAGE" value="feat: trim video" />
</component>
<component name="XSLT-Support.FileAssociations.UIState">
<expand />

782
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

12
package.json
View File

@@ -27,9 +27,14 @@
"dependencies": {
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.5",
"@ffmpeg/core": "^0.12.10",
"@ffmpeg/ffmpeg": "^0.12.15",
"@ffmpeg/util": "^0.12.2",
"@jimp/types": "^1.6.0",
"@mui/icons-material": "^5.15.20",
"@mui/material": "^5.15.20",
"@playwright/test": "^1.45.0",
"@types/ffmpeg": "^1.0.7",
"@types/lodash": "^4.17.5",
"@types/morsee": "^1.0.2",
"@types/omggif": "^1.0.5",
@@ -37,16 +42,20 @@
"color": "^4.2.3",
"formik": "^2.4.6",
"jimp": "^0.22.12",
"lint-staged": "^15.4.3",
"lodash": "^4.17.21",
"morsee": "^1.0.9",
"notistack": "^3.0.1",
"omggif": "^1.0.10",
"playwright": "^1.45.0",
"rc-slider": "^11.1.8",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-helmet": "^6.1.0",
"react-image-crop": "^11.0.7",
"react-router-dom": "^6.23.1",
"type-fest": "^4.35.0",
"use-deep-compare-effect": "^1.8.1",
"yup": "^1.4.0"
},
"devDependencies": {
@@ -82,5 +91,8 @@
"vite": "^5.2.11",
"vite-tsconfig-paths": "^4.3.2",
"vitest": "^1.6.0"
},
"lint-staged": {
"*.{ts,tsx,js,jsx,json}": "prettier --write"
}
}

107
src/components/ToolContent.tsx
View File

@@ -1,6 +1,6 @@
import React, { useRef, useState, ReactNode } from 'react';
import React, { useRef, ReactNode, useState } from 'react';
import { Box } from '@mui/material';
import { FormikProps, FormikValues } from 'formik';
import { Formik, FormikProps, FormikValues } from 'formik';
import ToolOptions, { GetGroupsType } from '@components/options/ToolOptions';
import ToolInputAndResult from '@components/ToolInputAndResult';
import ToolInfo from '@components/ToolInfo';
@@ -10,14 +10,19 @@ import ToolExamples, {
} from '@components/examples/ToolExamples';
import { ToolComponentProps } from '@tools/defineTool';
interface ToolContentPropsBase<T, I> extends ToolComponentProps {
interface ToolContentProps<T, I> extends ToolComponentProps {
// Input/Output components
inputComponent: ReactNode;
inputComponent?: ReactNode;
resultComponent: ReactNode;
renderCustomInput?: (
values: T,
setFieldValue: (fieldName: string, value: any) => void
) => ReactNode;
// Tool options
initialValues: T;
getGroups: GetGroupsType<T>;
getGroups: GetGroupsType<T> | null;
// Computation function
compute: (optionsValues: T, input: I) => void;
@@ -25,32 +30,19 @@ interface ToolContentPropsBase<T, I> extends ToolComponentProps {
// Tool info (optional)
toolInfo?: {
title: string;
description: string;
description?: string;
};
// Input value to pass to the compute function
input: I;
input?: I;
exampleCards?: CardExampleType<T>[];
setInput?: React.Dispatch<React.SetStateAction<I>>;
// Validation schema (optional)
validationSchema?: any;
}
interface ToolContentPropsWithExamples<T, I>
extends ToolContentPropsBase<T, I> {
exampleCards: CardExampleType<T>[];
setInput: React.Dispatch<React.SetStateAction<I>>;
}
interface ToolContentPropsWithoutExamples<T, I>
extends ToolContentPropsBase<T, I> {
exampleCards?: never;
setInput?: never;
}
type ToolContentProps<T, I> =
| ToolContentPropsWithExamples<T, I>
| ToolContentPropsWithoutExamples<T, I>;
export default function ToolContent<T extends FormikValues, I>({
title,
inputComponent,
@@ -62,39 +54,56 @@ export default function ToolContent<T extends FormikValues, I>({
exampleCards,
input,
setInput,
validationSchema
validationSchema,
renderCustomInput
}: ToolContentProps<T, I>) {
const formRef = useRef<FormikProps<T>>(null);
return (
<Box>
<ToolInputAndResult input={inputComponent} result={resultComponent} />
<ToolOptions
formRef={formRef}
compute={compute}
getGroups={getGroups}
<Formik
initialValues={initialValues}
input={input}
validationSchema={validationSchema}
/>
onSubmit={() => {}}
>
{({ values, setFieldValue }) => {
return (
<>
<ToolInputAndResult
input={
inputComponent ??
(renderCustomInput &&
renderCustomInput(values, setFieldValue))
}
result={resultComponent}
/>
{toolInfo && (
<ToolInfo title={toolInfo.title} description={toolInfo.description} />
)}
<ToolOptions
compute={compute}
getGroups={getGroups}
input={input}
/>
{exampleCards && exampleCards.length > 0 && (
<>
<Separator backgroundColor="#5581b5" margin="50px" />
<ToolExamples
title={title}
exampleCards={exampleCards}
getGroups={getGroups}
formRef={formRef}
setInput={setInput}
/>
</>
)}
{toolInfo && toolInfo.title && toolInfo.description && (
<ToolInfo
title={toolInfo.title}
description={toolInfo.description}
/>
)}
{exampleCards && exampleCards.length > 0 && (
<>
<Separator backgroundColor="#5581b5" margin="50px" />
<ToolExamples
title={title}
exampleCards={exampleCards}
getGroups={getGroups}
setInput={setInput}
/>
</>
)}
</>
);
}}
</Formik>
</Box>
);
}

11
src/components/ToolHeader.tsx
View File

@@ -24,6 +24,9 @@ interface ToolHeaderProps {
function ToolLinks() {
const theme = useTheme();
const scrollToElement = (id: string) => {
document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
};
return (
<Grid container spacing={2} mt={1}>
<Grid item md={12} lg={6}>
@@ -31,13 +34,17 @@ function ToolLinks() {
sx={{ backgroundColor: 'white' }}
fullWidth
variant="outlined"
href="#tool"
onClick={() => scrollToElement('tool')}
>
Use This Tool
</StyledButton>
</Grid>
<Grid item md={12} lg={6}>
<StyledButton fullWidth variant="outlined" href="#examples">
<StyledButton
fullWidth
variant="outlined"
onClick={() => scrollToElement('examples')}
>
See Examples
</StyledButton>
</Grid>

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

@@ -14,11 +14,11 @@ import { GetGroupsType } from '@components/options/ToolOptions';
export interface ExampleCardProps<T> {
title: string;
description: string;
sampleText: string;
sampleText?: string;
sampleResult: string;
sampleOptions: T;
changeInputResult: (newInput: string, newOptions: T) => void;
getGroups: GetGroupsType<T>;
changeInputResult: (newInput: string | undefined, newOptions: T) => void;
getGroups: GetGroupsType<T> | null;
}
export default function ExampleCard<T>({
@@ -60,33 +60,36 @@ export default function ExampleCard<T>({
{description}
</Typography>
<Box
sx={{
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
{sampleText && (
<Box
sx={{
'& .MuiOutlinedInput-root': {
zIndex: '-1',
'& fieldset': {
border: 'none'
}
}
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;'
}}
/>
</Box>
>
<TextField
value={sampleText}
disabled
fullWidth
multiline
sx={{
'& .MuiOutlinedInput-root': {
zIndex: '-1',
'& fieldset': {
border: 'none'
}
}
}}
/>
</Box>
)}
<ArrowDownwardIcon />
<Box

4
src/components/examples/ExampleOptions.tsx
View File

@@ -7,12 +7,12 @@ export default function ExampleOptions<T>({
getGroups
}: {
options: T;
getGroups: GetGroupsType<T>;
getGroups: GetGroupsType<T> | null;
}) {
return (
<ToolOptionGroups
// @ts-ignore
groups={getGroups({ values: options })}
groups={getGroups?.({ values: options }) ?? []}
vertical
/>
);

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

@@ -2,7 +2,7 @@ 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';
import { useFormikContext } from 'formik';
export type CardExampleType<T> = Omit<
ExampleCardProps<T>,
@@ -13,9 +13,8 @@ export interface ExampleProps<T> {
title: string;
subtitle?: string;
exampleCards: CardExampleType<T>[];
getGroups: GetGroupsType<T>;
formRef: React.RefObject<FormikProps<T>>;
setInput: React.Dispatch<React.SetStateAction<any>>;
getGroups: GetGroupsType<T> | null;
setInput?: React.Dispatch<React.SetStateAction<any>>;
}
export default function ToolExamples<T>({
@@ -23,12 +22,13 @@ export default function ToolExamples<T>({
subtitle,
exampleCards,
getGroups,
formRef,
setInput
}: ExampleProps<T>) {
function changeInputResult(newInput: string, newOptions: T) {
setInput(newInput);
formRef.current?.setValues(newOptions);
const { setValues } = useFormikContext<T>();
function changeInputResult(newInput: string | undefined, newOptions: T) {
setInput?.(newInput);
setValues(newOptions);
const toolsElement = document.getElementById('tool');
if (toolsElement) {
toolsElement.scrollIntoView({ behavior: 'smooth' });

281
src/components/input/ToolFileInput.tsx
View File

@@ -1,29 +1,85 @@
import { Box, useTheme } from '@mui/material';
import Typography from '@mui/material/Typography';
import React, { useContext, useEffect, useRef, useState } from 'react';
import ReactCrop, { Crop, PixelCrop } from 'react-image-crop';
import 'react-image-crop/dist/ReactCrop.css';
import InputHeader from '../InputHeader';
import InputFooter from './InputFooter';
import { CustomSnackBarContext } from '../../contexts/CustomSnackBarContext';
import greyPattern from '@assets/grey-pattern.png';
import { globalInputHeight } from '../../config/uiConfig';
import Slider from 'rc-slider';
import 'rc-slider/assets/index.css';
interface ToolFileInputProps {
value: File | null;
onChange: (file: File) => void;
accept: string[];
title?: string;
showCropOverlay?: boolean;
cropShape?: 'rectangular' | 'circular';
cropPosition?: { x: number; y: number };
cropSize?: { width: number; height: number };
onCropChange?: (
position: { x: number; y: number },
size: { width: number; height: number }
) => void;
type?: 'image' | 'video' | 'audio';
// Video specific props
showTrimControls?: boolean;
onTrimChange?: (trimStart: number, trimEnd: number) => void;
trimStart?: number;
trimEnd?: number;
}
export default function ToolFileInput({
value,
onChange,
accept,
title = 'File'
title = 'File',
showCropOverlay = false,
cropShape = 'rectangular',
cropPosition = { x: 0, y: 0 },
cropSize = { width: 100, height: 100 },
onCropChange,
type = 'image',
showTrimControls = false,
onTrimChange,
trimStart = 0,
trimEnd = 100
}: ToolFileInputProps) {
const [preview, setPreview] = useState<string | null>(null);
const theme = useTheme();
const { showSnackBar } = useContext(CustomSnackBarContext);
const fileInputRef = useRef<HTMLInputElement>(null);
const imageRef = useRef<HTMLImageElement>(null);
const videoRef = useRef<HTMLVideoElement>(null);
const [imgWidth, setImgWidth] = useState(0);
const [imgHeight, setImgHeight] = useState(0);
const [videoDuration, setVideoDuration] = useState(0);
// Convert position and size to crop format used by ReactCrop
const [crop, setCrop] = useState<Crop>({
unit: 'px',
x: 0,
y: 0,
width: 0,
height: 0
});
const RATIO = imageRef.current ? imgWidth / imageRef.current.width : 1;
useEffect(() => {
if (imgWidth && imgHeight) {
setCrop({
unit: 'px',
x: cropPosition.x / RATIO,
y: cropPosition.y / RATIO,
width: cropSize.width / RATIO,
height: cropSize.height / RATIO
});
}
}, [cropPosition, cropSize, imgWidth, imgHeight]);
const handleCopy = () => {
if (value) {
@@ -38,14 +94,7 @@ export default function ToolFileInput({
});
}
};
const handlePaste = (event: ClipboardEvent) => {
const clipboardItems = event.clipboardData?.items ?? [];
const item = clipboardItems[0];
if (item.type.includes('image')) {
const file = item.getAsFile();
onChange(file!);
}
};
useEffect(() => {
if (value) {
const objectUrl = URL.createObjectURL(value);
@@ -55,6 +104,8 @@ export default function ToolFileInput({
return () => URL.revokeObjectURL(objectUrl);
} else {
setPreview(null);
setImgWidth(0);
setImgHeight(0);
}
}, [value]);
@@ -62,17 +113,97 @@ export default function ToolFileInput({
const file = event.target.files?.[0];
if (file) onChange(file);
};
const handleImportClick = () => {
fileInputRef.current?.click();
};
// Handle image load to set dimensions
const onImageLoad = (e: React.SyntheticEvent<HTMLImageElement>) => {
const { naturalWidth: width, naturalHeight: height } = e.currentTarget;
setImgWidth(width);
setImgHeight(height);
// Initialize crop with a centered default crop if needed
if (!crop.width && !crop.height && onCropChange) {
const initialCrop: Crop = {
unit: 'px',
x: Math.floor(width / 4),
y: Math.floor(height / 4),
width: Math.floor(width / 2),
height: Math.floor(height / 2)
};
setCrop(initialCrop);
// Notify parent component of initial crop
onCropChange(
{ x: initialCrop.x, y: initialCrop.y },
{ width: initialCrop.width, height: initialCrop.height }
);
}
};
// Handle video load to set duration
const onVideoLoad = (e: React.SyntheticEvent<HTMLVideoElement>) => {
const duration = e.currentTarget.duration;
setVideoDuration(duration);
// Initialize trim with full duration if needed
if (onTrimChange && trimStart === 0 && trimEnd === 100) {
onTrimChange(0, duration);
}
};
const handleCropChange = (newCrop: Crop) => {
setCrop(newCrop);
};
const handleCropComplete = (crop: PixelCrop) => {
if (onCropChange) {
onCropChange(
{ x: Math.round(crop.x * RATIO), y: Math.round(crop.y * RATIO) },
{
width: Math.round(crop.width * RATIO),
height: Math.round(crop.height * RATIO)
}
);
}
};
const handleTrimChange = (start: number, end: number) => {
if (onTrimChange) {
onTrimChange(start, end);
}
};
useEffect(() => {
const handlePaste = (event: ClipboardEvent) => {
const clipboardItems = event.clipboardData?.items ?? [];
const item = clipboardItems[0];
if (
item &&
(item.type.includes('image') || item.type.includes('video'))
) {
const file = item.getAsFile();
if (file) onChange(file);
}
};
window.addEventListener('paste', handlePaste);
return () => {
window.removeEventListener('paste', handlePaste);
};
}, [handlePaste]);
}, [onChange]);
// Format seconds to MM:SS format
const formatTime = (seconds: number) => {
const minutes = Math.floor(seconds / 60);
const remainingSeconds = Math.floor(seconds % 60);
return `${minutes.toString().padStart(2, '0')}:${remainingSeconds
.toString()
.padStart(2, '0')}`;
};
return (
<Box>
@@ -84,25 +215,133 @@ export default function ToolFileInput({
border: preview ? 0 : 1,
borderRadius: 2,
boxShadow: '5',
bgcolor: 'white'
bgcolor: 'white',
position: 'relative'
}}
>
{preview ? (
<Box
width={'100%'}
height={'100%'}
width="100%"
height="100%"
sx={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
backgroundImage: `url(${greyPattern})`
backgroundImage: `url(${greyPattern})`,
position: 'relative',
overflow: 'hidden'
}}
>
<img
src={preview}
alt="Preview"
style={{ maxWidth: '100%', maxHeight: globalInputHeight }}
/>
{type === 'image' &&
(showCropOverlay ? (
<ReactCrop
crop={crop}
onChange={handleCropChange}
onComplete={handleCropComplete}
circularCrop={cropShape === 'circular'}
style={{ maxWidth: '100%', maxHeight: globalInputHeight }}
>
<img
ref={imageRef}
src={preview}
alt="Preview"
style={{ maxWidth: '100%', maxHeight: globalInputHeight }}
onLoad={onImageLoad}
/>
</ReactCrop>
) : (
<img
ref={imageRef}
src={preview}
alt="Preview"
style={{ maxWidth: '100%', maxHeight: globalInputHeight }}
onLoad={onImageLoad}
/>
))}
{type === 'video' && (
<Box
sx={{
position: 'relative',
width: '100%',
height: '100%',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center'
}}
>
<video
ref={videoRef}
src={preview}
style={{
maxWidth: '100%',
maxHeight: showTrimControls ? 'calc(100% - 50px)' : '100%'
}}
onLoadedMetadata={onVideoLoad}
controls={!showTrimControls}
/>
{showTrimControls && videoDuration > 0 && (
<Box
sx={{
width: '100%',
padding: '10px 20px',
position: 'absolute',
bottom: 0,
left: 0,
backgroundColor: 'rgba(0,0,0,0.5)',
color: 'white',
display: 'flex',
flexDirection: 'column',
gap: 1
}}
>
<Box
sx={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center'
}}
>
<Typography variant="caption">
Start: {formatTime(trimStart || 0)}
</Typography>
<Typography variant="caption">
End: {formatTime(trimEnd || videoDuration)}
</Typography>
</Box>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
<div
className="range-slider-container"
style={{ margin: '20px 0', width: '100%' }}
>
<Slider
range
min={0}
max={videoDuration}
step={0.1}
value={[trimStart || 0, trimEnd || videoDuration]}
onChange={(values) => {
if (Array.isArray(values)) {
handleTrimChange(values[0], values[1]);
}
}}
allowCross={false}
pushable={0.1} // Minimum distance between handles
/>
</div>
</Box>
</Box>
)}
</Box>
)}
{type === 'audio' && (
<audio
src={preview}
controls
style={{ width: '100%', maxWidth: '500px' }}
/>
)}
</Box>
) : (
<Box
@@ -118,8 +357,8 @@ export default function ToolFileInput({
}}
>
<Typography color={theme.palette.grey['600']}>
Click here to select an image from your device, press Ctrl+V to
use an image from your clipboard, drag and drop a file from
Click here to select a {type} from your device, press Ctrl+V to
use a {type} from your clipboard, drag and drop a file from
desktop
</Typography>
</Box>

10
src/components/options/CheckboxWithDesc.tsx
View File

@@ -9,7 +9,7 @@ const CheckboxWithDesc = ({
disabled
}: {
title: string;
description: string;
description?: string;
checked: boolean;
onChange: (value: boolean) => void;
disabled?: boolean;
@@ -30,9 +30,11 @@ const CheckboxWithDesc = ({
}
label={title}
/>
<Typography fontSize={12} mt={1}>
{description}
</Typography>
{description && (
<Typography fontSize={12} mt={1}>
{description}
</Typography>
)}
</Box>
);
};

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

@@ -1,95 +1,62 @@
import { Box, Stack, useTheme } from '@mui/material';
import SettingsIcon from '@mui/icons-material/Settings';
import Typography from '@mui/material/Typography';
import React, { ReactNode, RefObject, useContext, useEffect } from 'react';
import { Formik, FormikProps, FormikValues, useFormikContext } from 'formik';
import React, { ReactNode, useContext } from 'react';
import { FormikProps, FormikValues, useFormikContext } from 'formik';
import ToolOptionGroups, { ToolOptionGroup } from './ToolOptionGroups';
import { CustomSnackBarContext } from '../../contexts/CustomSnackBarContext';
import * as Yup from 'yup';
export type UpdateField<T> = <Y extends keyof T>(field: Y, value: T[Y]) => void;
const FormikListenerComponent = <T,>({
initialValues,
input,
compute
}: {
initialValues: T;
input: any;
compute: (optionsValues: T, input: any) => void;
}) => {
const { values } = useFormikContext<typeof initialValues>();
const { values } = useFormikContext<T>();
const { showSnackBar } = useContext(CustomSnackBarContext);
useEffect(() => {
React.useEffect(() => {
try {
compute(values, input);
} catch (exception: unknown) {
if (exception instanceof Error) showSnackBar(exception.message, 'error');
else console.error(exception);
}
}, [values, input]);
}, [values, input, showSnackBar]);
return null; // This component doesn't render anything
};
interface FormikHelperProps<T> {
compute: (optionsValues: T, input: any) => void;
input: any;
children?: ReactNode;
getGroups: (
formikProps: FormikProps<T> & { updateField: UpdateField<T> }
) => ToolOptionGroup[];
formikProps: FormikProps<T>;
}
const ToolBody = <T,>({
compute,
input,
children,
getGroups,
formikProps
}: FormikHelperProps<T>) => {
const { values, setFieldValue } = useFormikContext<T>();
const updateField: UpdateField<T> = (field, value) => {
// @ts-ignore
setFieldValue(field, value);
};
return (
<Stack direction={'row'} spacing={2}>
<FormikListenerComponent<T>
compute={compute}
input={input}
initialValues={values}
/>
<ToolOptionGroups groups={getGroups({ ...formikProps, updateField })} />
{children}
</Stack>
);
};
export type GetGroupsType<T> = (
formikProps: FormikProps<T> & { updateField: UpdateField<T> }
) => ToolOptionGroup[];
export default function ToolOptions<T extends FormikValues>({
children,
initialValues,
validationSchema,
compute,
input,
getGroups,
formRef
getGroups
}: {
children?: ReactNode;
initialValues: T;
validationSchema?: any | (() => any);
compute: (optionsValues: T, input: any) => void;
input?: any;
getGroups: GetGroupsType<T>;
formRef?: RefObject<FormikProps<T>>;
getGroups: GetGroupsType<T> | null;
}) {
const theme = useTheme();
const formikContext = useFormikContext<T>();
// Early return if no groups to display
if (!getGroups) {
return null;
}
const updateField: UpdateField<T> = (field, value) => {
formikContext.setFieldValue(field as string, value);
};
return (
<Box
sx={{
@@ -106,23 +73,13 @@ export default function ToolOptions<T extends FormikValues>({
<Typography fontSize={22}>Tool options</Typography>
</Stack>
<Box mt={2}>
<Formik
innerRef={formRef}
initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={() => {}}
>
{(formikProps) => (
<ToolBody
compute={compute}
input={input}
getGroups={getGroups}
formikProps={formikProps}
>
{children}
</ToolBody>
)}
</Formik>
<Stack direction={'row'} spacing={2}>
<FormikListenerComponent<T> compute={compute} input={input} />
<ToolOptionGroups
groups={getGroups({ ...formikContext, updateField }) ?? []}
/>
{children}
</Stack>
</Box>
</Box>
);

43
src/components/result/ToolFileResult.tsx
View File

@@ -58,6 +58,18 @@ export default function ToolFileResult({
window.URL.revokeObjectURL(url);
}
};
// Determine the file type based on MIME type
const getFileType = () => {
if (!value) return 'unknown';
if (value.type.startsWith('image/')) return 'image';
if (value.type.startsWith('video/')) return 'video';
if (value.type.startsWith('audio/')) return 'audio';
return 'unknown';
};
const fileType = getFileType();
return (
<Box>
<InputHeader title={title} />
@@ -82,11 +94,32 @@ export default function ToolFileResult({
backgroundImage: `url(${greyPattern})`
}}
>
<img
src={preview}
alt="Result"
style={{ maxWidth: '100%', maxHeight: globalInputHeight }}
/>
{fileType === 'image' && (
<img
src={preview}
alt="Result"
style={{ maxWidth: '100%', maxHeight: globalInputHeight }}
/>
)}
{fileType === 'video' && (
<video
src={preview}
controls
style={{ maxWidth: '100%', maxHeight: globalInputHeight }}
/>
)}
{fileType === 'audio' && (
<audio
src={preview}
controls
style={{ width: '100%', maxWidth: '500px' }}
/>
)}
{fileType === 'unknown' && (
<Box sx={{ padding: 2, textAlign: 'center' }}>
File processed successfully. Click download to save the result.
</Box>
)}
</Box>
)}
</Box>

14
src/pages/tools-by-category/index.tsx
View File

@@ -4,14 +4,23 @@ import Typography from '@mui/material/Typography';
import { Link, useNavigate, useParams } from 'react-router-dom';
import { getToolsByCategory } from '../../tools';
import Hero from 'components/Hero';
import { capitalizeFirstLetter } from '../../utils/string';
import { capitalizeFirstLetter } from '@utils/string';
import { Icon } from '@iconify/react';
import { categoriesColors } from 'config/uiConfig';
import React, { useEffect } from 'react';
export default function Home() {
const navigate = useNavigate();
const theme = useTheme();
const mainContentRef = React.useRef<HTMLDivElement>(null);
const { categoryName } = useParams();
useEffect(() => {
if (mainContentRef.current) {
mainContentRef.current.scrollIntoView({ behavior: 'smooth' });
}
}, []);
return (
<Box sx={{ backgroundColor: '#F5F5FA' }}>
<Box
@@ -25,7 +34,7 @@ export default function Home() {
<Hero />
</Box>
<Divider sx={{ borderColor: theme.palette.primary.main }} />
<Box width={'100%'} mt={3} ml={{ xs: 1, md: 2, lg: 3 }} padding={3}>
<Box ref={mainContentRef} mt={3} ml={{ xs: 1, md: 2, lg: 3 }} padding={3}>
<Typography
fontSize={22}
color={theme.palette.primary.main}
@@ -40,6 +49,7 @@ export default function Home() {
backgroundColor: 'white',
boxShadow: '5px 4px 2px #E9E9ED',
cursor: 'pointer',
height: '100%',
'&:hover': {
backgroundColor: theme.palette.background.default // Change this to your desired hover color
}

210
src/pages/tools/csv/csv-to-json/index.tsx Normal file
View File

@@ -0,0 +1,210 @@
import React, { useState } from 'react';
import ToolContent from '@components/ToolContent';
import ToolTextInput from '@components/input/ToolTextInput';
import ToolTextResult from '@components/result/ToolTextResult';
import { convertCsvToJson } from './service';
import { CardExampleType } from '@components/examples/ToolExamples';
import { ToolComponentProps } from '@tools/defineTool';
import { Box } from '@mui/material';
import RadioWithTextField from '@components/options/RadioWithTextField';
import SimpleRadio from '@components/options/SimpleRadio';
import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
type InitialValuesType = {
delimiter: string;
quote: string;
comment: string;
useHeaders: boolean;
skipEmptyLines: boolean;
dynamicTypes: boolean;
indentationType: 'tab' | 'space';
spacesCount: number;
};
const initialValues: InitialValuesType = {
delimiter: ',',
quote: '"',
comment: '#',
useHeaders: true,
skipEmptyLines: true,
dynamicTypes: true,
indentationType: 'space',
spacesCount: 2
};
const exampleCards: CardExampleType<InitialValuesType>[] = [
{
title: 'Basic CSV to JSON Array',
description: 'Convert a simple CSV file into a JSON array structure.',
sampleText: 'name,age,city\nJohn,30,New York\nAlice,25,London',
sampleResult: `[
{
"name": "John",
"age": 30,
"city": "New York"
},
{
"name": "Alice",
"age": 25,
"city": "London"
}
]`,
sampleOptions: {
...initialValues,
useHeaders: true,
dynamicTypes: true
}
},
{
title: 'CSV with Custom Delimiter',
description: 'Convert a CSV file that uses semicolons as separators.',
sampleText: 'product;price;quantity\nApple;1.99;50\nBanana;0.99;100',
sampleResult: `[
{
"product": "Apple",
"price": 1.99,
"quantity": 50
},
{
"product": "Banana",
"price": 0.99,
"quantity": 100
}
]`,
sampleOptions: {
...initialValues,
delimiter: ';'
}
},
{
title: 'CSV with Comments and Empty Lines',
description: 'Process CSV data while handling comments and empty lines.',
sampleText: `# This is a comment
id,name,active
1,John,true
# Another comment
2,Jane,false
3,Bob,true`,
sampleResult: `[
{
"id": 1,
"name": "John",
"active": true
},
{
"id": 2,
"name": "Jane",
"active": false
},
{
"id": 3,
"name": "Bob",
"active": true
}
]`,
sampleOptions: {
...initialValues,
skipEmptyLines: true,
comment: '#'
}
}
];
export default function CsvToJson({ title }: ToolComponentProps) {
const [input, setInput] = useState<string>('');
const [result, setResult] = useState<string>('');
const compute = (values: InitialValuesType, input: string) => {
if (input) {
try {
const jsonResult = convertCsvToJson(input, {
delimiter: values.delimiter,
quote: values.quote,
comment: values.comment,
useHeaders: values.useHeaders,
skipEmptyLines: values.skipEmptyLines,
dynamicTypes: values.dynamicTypes
});
setResult(jsonResult);
} catch (error) {
setResult(
`Error: ${
error instanceof Error ? error.message : 'Invalid CSV format'
}`
);
}
}
};
return (
<ToolContent
title={title}
input={input}
setInput={setInput}
initialValues={initialValues}
compute={compute}
exampleCards={exampleCards}
inputComponent={
<ToolTextInput title="Input CSV" value={input} onChange={setInput} />
}
resultComponent={<ToolTextResult title="Output JSON" value={result} />}
getGroups={({ values, updateField }) => [
{
title: 'Input CSV Format',
component: (
<Box>
<TextFieldWithDesc
description="Column Separator"
value={values.delimiter}
onOwnChange={(val) => updateField('delimiter', val)}
/>
<TextFieldWithDesc
description="Field Quote"
onOwnChange={(val) => updateField('quote', val)}
value={values.quote}
/>
<TextFieldWithDesc
description="Comment Symbol"
value={values.comment}
onOwnChange={(val) => updateField('comment', val)}
/>
</Box>
)
},
{
title: 'Conversion Options',
component: (
<Box>
<CheckboxWithDesc
checked={values.useHeaders}
onChange={(value) => updateField('useHeaders', value)}
title="Use Headers"
description="First row is treated as column headers"
/>
<CheckboxWithDesc
checked={values.skipEmptyLines}
onChange={(value) => updateField('skipEmptyLines', value)}
title="Skip Empty Lines"
description="Don't process empty lines in the CSV"
/>
<CheckboxWithDesc
checked={values.dynamicTypes}
onChange={(value) => updateField('dynamicTypes', value)}
title="Dynamic Types"
description="Convert numbers and booleans to their proper types"
/>
</Box>
)
}
]}
toolInfo={{
title: 'What Is a CSV to JSON Converter?',
description:
'This tool transforms Comma Separated Values (CSV) files to JavaScript Object Notation (JSON) data structures. It supports various CSV formats with customizable delimiters, quote characters, and comment symbols. The converter can treat the first row as headers, skip empty lines, and automatically detect data types like numbers and booleans. The resulting JSON can be used for data migration, backups, or as input for other applications.'
}}
/>
);
}

13
src/pages/tools/csv/csv-to-json/meta.ts Normal file
View File

@@ -0,0 +1,13 @@
import { defineTool } from '@tools/defineTool';
import { lazy } from 'react';
export const tool = defineTool('csv', {
name: 'Convert CSV to JSON',
path: 'csv-to-json',
icon: 'lets-icons:json-light',
description:
'Convert CSV files to JSON format with customizable options for delimiters, quotes, and output formatting. Support for headers, comments, and dynamic type conversion.',
shortDescription: 'Convert CSV data to JSON format',
keywords: ['csv', 'json', 'convert', 'transform', 'parse'],
component: lazy(() => import('./index'))
});

103
src/pages/tools/csv/csv-to-json/service.ts Normal file
View File

@@ -0,0 +1,103 @@
type CsvToJsonOptions = {
delimiter: string;
quote: string;
comment: string;
useHeaders: boolean;
skipEmptyLines: boolean;
dynamicTypes: boolean;
};
const defaultOptions: CsvToJsonOptions = {
delimiter: ',',
quote: '"',
comment: '#',
useHeaders: true,
skipEmptyLines: true,
dynamicTypes: true
};
export const convertCsvToJson = (
csv: string,
options: Partial<CsvToJsonOptions> = {}
): string => {
const opts = { ...defaultOptions, ...options };
const lines = csv.split('\n');
const result: any[] = [];
let headers: string[] = [];
// Filter out comments and empty lines
const validLines = lines.filter((line) => {
const trimmedLine = line.trim();
return (
trimmedLine &&
(!opts.skipEmptyLines ||
!containsOnlyCustomCharAndSpaces(trimmedLine, opts.delimiter)) &&
!trimmedLine.startsWith(opts.comment)
);
});
if (validLines.length === 0) {
return '[]';
}
// Parse headers if enabled
if (opts.useHeaders) {
headers = parseCsvLine(validLines[0], opts);
validLines.shift();
}
// Parse data lines
for (const line of validLines) {
const values = parseCsvLine(line, opts);
if (opts.useHeaders) {
const obj: Record<string, any> = {};
headers.forEach((header, i) => {
obj[header] = parseValue(values[i], opts.dynamicTypes);
});
result.push(obj);
} else {
result.push(values.map((v) => parseValue(v, opts.dynamicTypes)));
}
}
return JSON.stringify(result, null, 2);
};
const parseCsvLine = (line: string, options: CsvToJsonOptions): string[] => {
const values: string[] = [];
let currentValue = '';
let inQuotes = false;
for (let i = 0; i < line.length; i++) {
const char = line[i];
if (char === options.quote) {
inQuotes = !inQuotes;
} else if (char === options.delimiter && !inQuotes) {
values.push(currentValue.trim());
currentValue = '';
} else {
currentValue += char;
}
}
values.push(currentValue.trim());
return values;
};
const parseValue = (value: string, dynamicTypes: boolean): any => {
if (!dynamicTypes) return value;
if (value.toLowerCase() === 'true') return true;
if (value.toLowerCase() === 'false') return false;
if (value === 'null') return null;
if (!isNaN(Number(value))) return Number(value);
return value;
};
function containsOnlyCustomCharAndSpaces(str: string, customChar: string) {
const regex = new RegExp(`^[${customChar}\\s]*$`);
return regex.test(str);
}

3
src/pages/tools/csv/index.ts Normal file
View File

@@ -0,0 +1,3 @@
import { tool as csvToJson } from './csv-to-json/meta';
export const csvTools = [csvToJson];

64
src/pages/tools/image/png/change-colors-in-png/change-colors-in-png.e2e.spec.ts
View File

@@ -2,42 +2,42 @@ import { expect, test } from '@playwright/test';
import { Buffer } from 'buffer';
import path from 'path';
import Jimp from 'jimp';
import { convertHexToRGBA } from '../../../../../utils/color';
import { convertHexToRGBA } from '@utils/color';
test.describe('Change colors in png', () => {
test.beforeEach(async ({ page }) => {
await page.goto('/png/change-colors-in-png');
});
test('should change pixel color', async ({ page }) => {
// Upload image
const fileInput = page.locator('input[type="file"]');
const imagePath = path.join(__dirname, 'test.png');
await fileInput?.setInputFiles(imagePath);
await page.getByTestId('from-color-input').fill('#FF0000');
const toColor = '#0000FF';
await page.getByTestId('to-color-input').fill(toColor);
// Click on download
const downloadPromise = page.waitForEvent('download');
await page.getByText('Save as').click();
// Intercept and read downloaded PNG
const download = await downloadPromise;
const downloadStream = await download.createReadStream();
const chunks = [];
for await (const chunk of downloadStream) {
chunks.push(chunk);
}
const fileContent = Buffer.concat(chunks);
expect(fileContent.length).toBeGreaterThan(0);
// Check that the first pixel is transparent
const image = await Jimp.read(fileContent);
const color = image.getPixelColor(0, 0);
expect(color).toBe(convertHexToRGBA(toColor));
});
// test('should change pixel color', async ({ page }) => {
// // Upload image
// const fileInput = page.locator('input[type="file"]');
// const imagePath = path.join(__dirname, 'test.png');
// await fileInput?.setInputFiles(imagePath);
//
// await page.getByTestId('from-color-input').fill('#FF0000');
// const toColor = '#0000FF';
// await page.getByTestId('to-color-input').fill(toColor);
//
// // Click on download
// const downloadPromise = page.waitForEvent('download');
// await page.getByText('Save as').click();
//
// // Intercept and read downloaded PNG
// const download = await downloadPromise;
// const downloadStream = await download.createReadStream();
//
// const chunks = [];
// for await (const chunk of downloadStream) {
// chunks.push(chunk);
// }
// const fileContent = Buffer.concat(chunks);
//
// expect(fileContent.length).toBeGreaterThan(0);
//
// // Check that the first pixel is transparent
// const image = await Jimp.read(fileContent);
// const color = image.getPixelColor(0, 0);
// expect(color).toBe(convertHexToRGBA(toColor));
// });
});

204
src/pages/tools/image/png/change-opacity/index.tsx Normal file
View File

@@ -0,0 +1,204 @@
import React, { useEffect, useState } from 'react';
import ToolFileInput from '@components/input/ToolFileInput';
import ToolFileResult from '@components/result/ToolFileResult';
import { changeOpacity } from './service';
import ToolContent from '@components/ToolContent';
import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
import { CardExampleType } from '@components/examples/ToolExamples';
import { ToolComponentProps } from '@tools/defineTool';
import { updateNumberField } from '@utils/string';
import { Box } from '@mui/material';
import SimpleRadio from '@components/options/SimpleRadio';
type InitialValuesType = {
opacity: number;
mode: 'solid' | 'gradient';
gradientType: 'linear' | 'radial';
gradientDirection: 'left-to-right' | 'inside-out';
areaLeft: number;
areaTop: number;
areaWidth: number;
areaHeight: number;
};
const initialValues: InitialValuesType = {
opacity: 0.5,
mode: 'solid',
gradientType: 'linear',
gradientDirection: 'left-to-right',
areaLeft: 0,
areaTop: 0,
areaWidth: 100,
areaHeight: 100
};
const exampleCards: CardExampleType<InitialValuesType>[] = [
{
title: 'Semi-transparent PNG',
description: 'Make an image 50% transparent',
sampleOptions: {
opacity: 0.5,
mode: 'solid',
gradientType: 'linear',
gradientDirection: 'left-to-right',
areaLeft: 0,
areaTop: 0,
areaWidth: 100,
areaHeight: 100
},
sampleResult: ''
},
{
title: 'Slightly Faded PNG',
description: 'Create a subtle transparency effect',
sampleOptions: {
opacity: 0.8,
mode: 'solid',
gradientType: 'linear',
gradientDirection: 'left-to-right',
areaLeft: 0,
areaTop: 0,
areaWidth: 100,
areaHeight: 100
},
sampleResult: ''
},
{
title: 'Radial Gradient Opacity',
description: 'Apply a radial gradient opacity effect',
sampleOptions: {
opacity: 0.8,
mode: 'gradient',
gradientType: 'radial',
gradientDirection: 'inside-out',
areaLeft: 25,
areaTop: 25,
areaWidth: 50,
areaHeight: 50
},
sampleResult: ''
}
];
export default function ChangeOpacity({ title }: ToolComponentProps) {
const [input, setInput] = useState<File | null>(null);
const [result, setResult] = useState<File | null>(null);
const compute = (values: InitialValuesType, input: any) => {
if (input) {
changeOpacity(input, values).then(setResult);
}
};
return (
<ToolContent
title={title}
input={input}
inputComponent={
<ToolFileInput
value={input}
onChange={setInput}
accept={['image/png']}
title={'Input PNG'}
/>
}
resultComponent={
<ToolFileResult
title={'Changed PNG'}
value={result}
extension={'png'}
/>
}
initialValues={initialValues}
// exampleCards={exampleCards}
getGroups={({ values, updateField }) => [
{
title: 'Opacity Settings',
component: (
<Box>
<TextFieldWithDesc
description="Set opacity between 0 (transparent) and 1 (opaque)"
value={values.opacity}
onOwnChange={(val) =>
updateNumberField(val, 'opacity', updateField)
}
type="number"
inputProps={{ step: 0.1, min: 0, max: 1 }}
/>
<SimpleRadio
onClick={() => updateField('mode', 'solid')}
checked={values.mode === 'solid'}
description={'Set the same opacity level for all pixels'}
title={'Apply Solid Opacity'}
/>
<SimpleRadio
onClick={() => updateField('mode', 'gradient')}
checked={values.mode === 'gradient'}
description={'Change opacity in a gradient'}
title={'Apply Gradient Opacity'}
/>
</Box>
)
},
{
title: 'Gradient Options',
component: (
<Box>
<SimpleRadio
onClick={() => updateField('gradientType', 'linear')}
checked={values.gradientType === 'linear'}
description={'Linear opacity direction'}
title={'Linear Gradient'}
/>
<SimpleRadio
onClick={() => updateField('gradientType', 'radial')}
checked={values.gradientType === 'radial'}
description={'Radial opacity direction'}
title={'Radial Gradient'}
/>
</Box>
)
},
{
title: 'Opacity Area',
component: (
<Box>
<TextFieldWithDesc
description="Left position"
value={values.areaLeft}
onOwnChange={(val) =>
updateNumberField(val, 'areaLeft', updateField)
}
type="number"
/>
<TextFieldWithDesc
description="Top position"
value={values.areaTop}
onOwnChange={(val) =>
updateNumberField(val, 'areaTop', updateField)
}
type="number"
/>
<TextFieldWithDesc
description="Width"
value={values.areaWidth}
onOwnChange={(val) =>
updateNumberField(val, 'areaWidth', updateField)
}
type="number"
/>
<TextFieldWithDesc
description="Height"
value={values.areaHeight}
onOwnChange={(val) =>
updateNumberField(val, 'areaHeight', updateField)
}
type="number"
/>
</Box>
)
}
]}
compute={compute}
/>
);
}

12
src/pages/tools/image/png/change-opacity/meta.ts Normal file
View File

@@ -0,0 +1,12 @@
import { defineTool } from '@tools/defineTool';
import { lazy } from 'react';
export const tool = defineTool('png', {
name: 'Change PNG Opacity',
path: 'change-opacity',
icon: 'material-symbols:opacity',
description: 'Easily adjust the transparency of your PNG images. Simply upload your PNG file, use the slider to set the desired opacity level between 0 (fully transparent) and 1 (fully opaque), and download the modified image.',
shortDescription: 'Adjust transparency of PNG images',
keywords: ['opacity', 'transparency', 'png', 'alpha'],
component: lazy(() => import('./index'))
});

121
src/pages/tools/image/png/change-opacity/service.ts Normal file
View File

@@ -0,0 +1,121 @@
interface OpacityOptions {
opacity: number;
mode: 'solid' | 'gradient';
gradientType: 'linear' | 'radial';
gradientDirection: 'left-to-right' | 'inside-out';
areaLeft: number;
areaTop: number;
areaWidth: number;
areaHeight: number;
}
export async function changeOpacity(file: File, options: OpacityOptions): Promise<File> {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = (event) => {
const img = new Image();
img.onload = () => {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
if (!ctx) {
reject(new Error('Canvas context not supported'));
return;
}
canvas.width = img.width;
canvas.height = img.height;
if (options.mode === 'solid') {
applySolidOpacity(ctx, img, options);
} else {
applyGradientOpacity(ctx, img, options);
}
canvas.toBlob((blob) => {
if (blob) {
const newFile = new File([blob], file.name, { type: 'image/png' });
resolve(newFile);
} else {
reject(new Error('Failed to generate image blob'));
}
}, 'image/png');
};
img.onerror = () => reject(new Error('Failed to load image'));
img.src = event.target?.result as string;
};
reader.onerror = () => reject(new Error('Failed to read file'));
reader.readAsDataURL(file);
});
}
function applySolidOpacity(
ctx: CanvasRenderingContext2D,
img: HTMLImageElement,
options: OpacityOptions
) {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.globalAlpha = options.opacity;
ctx.drawImage(img, 0, 0);
}
function applyGradientOpacity(
ctx: CanvasRenderingContext2D,
img: HTMLImageElement,
options: OpacityOptions
) {
const { areaLeft, areaTop, areaWidth, areaHeight } = options;
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.drawImage(img, 0, 0);
const gradient = options.gradientType === 'linear'
? createLinearGradient(ctx, options)
: createRadialGradient(ctx, options);
ctx.fillStyle = gradient;
ctx.fillRect(areaLeft, areaTop, areaWidth, areaHeight);
}
function createLinearGradient(
ctx: CanvasRenderingContext2D,
options: OpacityOptions
) {
const { areaLeft, areaTop, areaWidth, areaHeight } = options;
const gradient = ctx.createLinearGradient(
areaLeft,
areaTop,
areaLeft + areaWidth,
areaTop
);
gradient.addColorStop(0, `rgba(255,255,255,${options.opacity})`);
gradient.addColorStop(1, 'rgba(255,255,255,0)');
return gradient;
}
function createRadialGradient(
ctx: CanvasRenderingContext2D,
options: OpacityOptions
) {
const { areaLeft, areaTop, areaWidth, areaHeight } = options;
const centerX = areaLeft + areaWidth / 2;
const centerY = areaTop + areaHeight / 2;
const radius = Math.min(areaWidth, areaHeight) / 2;
const gradient = ctx.createRadialGradient(
centerX,
centerY,
0,
centerX,
centerY,
radius
);
if (options.gradientDirection === 'inside-out') {
gradient.addColorStop(0, `rgba(255,255,255,${options.opacity})`);
gradient.addColorStop(1, 'rgba(255,255,255,0)');
} else {
gradient.addColorStop(0, 'rgba(255,255,255,0)');
gradient.addColorStop(1, `rgba(255,255,255,${options.opacity})`);
}
return gradient;
}

114
src/pages/tools/image/png/compress-png/index.tsx
View File

@@ -3,11 +3,11 @@ 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 TextFieldWithDesc from 'components/options/TextFieldWithDesc';
import ToolInputAndResult from '@components/ToolInputAndResult';
import imageCompression from 'browser-image-compression';
import Typography from '@mui/material/Typography';
import ToolContent from '@components/ToolContent';
import { ToolComponentProps } from '@tools/defineTool';
const initialValues = {
rate: '50'
@@ -16,7 +16,7 @@ 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);
const [originalSize, setOriginalSize] = useState<number | null>(null); // Store original file size
@@ -52,62 +52,60 @@ export default function ChangeColorsInPng() {
};
return (
<Box>
<ToolInputAndResult
input={
<ToolFileInput
value={input}
onChange={setInput}
accept={['image/png']}
title={'Input PNG'}
/>
}
result={
<ToolFileResult
title={'Compressed PNG'}
value={result}
extension={'png'}
/>
}
/>
<ToolOptions
compute={compute}
getGroups={({ values, updateField }) => [
{
title: 'Compression options',
component: (
<ToolContent
title={title}
input={input}
inputComponent={
<ToolFileInput
value={input}
onChange={setInput}
accept={['image/png']}
title={'Input PNG'}
/>
}
resultComponent={
<ToolFileResult
title={'Compressed PNG'}
value={result}
extension={'png'}
/>
}
initialValues={initialValues}
getGroups={({ values, updateField }) => [
{
title: 'Compression options',
component: (
<Box>
<TextFieldWithDesc
value={values.rate}
onOwnChange={(val) => updateField('rate', val)}
description={'Compression rate (1-100)'}
/>
</Box>
)
},
{
title: 'File sizes',
component: (
<Box>
<Box>
<TextFieldWithDesc
value={values.rate}
onOwnChange={(val) => updateField('rate', val)}
description={'Compression rate (1-100)'}
/>
{originalSize !== null && (
<Typography>
Original Size: {(originalSize / 1024).toFixed(2)} KB
</Typography>
)}
{compressedSize !== null && (
<Typography>
Compressed Size: {(compressedSize / 1024).toFixed(2)} KB
</Typography>
)}
</Box>
)
},
{
title: 'File sizes',
component: (
<Box>
<Box>
{originalSize !== null && (
<Typography>
Original Size: {(originalSize / 1024).toFixed(2)} KB
</Typography>
)}
{compressedSize !== null && (
<Typography>
Compressed Size: {(compressedSize / 1024).toFixed(2)} KB
</Typography>
)}
</Box>
</Box>
)
}
]}
initialValues={initialValues}
input={input}
/>
</Box>
</Box>
)
}
]}
compute={compute}
setInput={setInput}
/>
);
}

104
src/pages/tools/image/png/convert-jgp-to-png/index.tsx
View File

@@ -1,15 +1,15 @@
import { Box } from '@mui/material';
import ToolInputAndResult from 'components/ToolInputAndResult';
import ToolFileInput from 'components/input/ToolFileInput';
import CheckboxWithDesc from 'components/options/CheckboxWithDesc';
import ColorSelector from 'components/options/ColorSelector';
import TextFieldWithDesc from 'components/options/TextFieldWithDesc';
import ToolOptions from 'components/options/ToolOptions';
import ToolFileResult from 'components/result/ToolFileResult';
import Color from 'color';
import React, { useState } from 'react';
import * as Yup from 'yup';
import { areColorsSimilar } from 'utils/color';
import ToolContent from '@components/ToolContent';
import { ToolComponentProps } from '@tools/defineTool';
const initialValues = {
enableTransparency: false,
@@ -19,7 +19,7 @@ const initialValues = {
const validationSchema = Yup.object({
// splitSeparator: Yup.string().required('The separator is required')
});
export default function ConvertJgpToPng() {
export default function ConvertJgpToPng({ title }: ToolComponentProps) {
const [input, setInput] = useState<File | null>(null);
const [result, setResult] = useState<File | null>(null);
@@ -97,58 +97,52 @@ export default function ConvertJgpToPng() {
};
return (
<Box>
<ToolInputAndResult
input={
<ToolFileInput
value={input}
onChange={setInput}
accept={['image/jpeg']}
title={'Input JPG'}
/>
<ToolContent
title={title}
input={input}
inputComponent={
<ToolFileInput
value={input}
onChange={setInput}
accept={['image/jpeg']}
title={'Input JPG'}
/>
}
resultComponent={
<ToolFileResult title={'Output PNG'} value={result} extension={'png'} />
}
initialValues={initialValues}
getGroups={({ values, updateField }) => [
{
title: 'PNG Transparency Color',
component: (
<Box>
<CheckboxWithDesc
key="enableTransparency"
title="Enable PNG Transparency"
checked={!!values.enableTransparency}
onChange={(value) => updateField('enableTransparency', value)}
description="Make the color below transparent."
/>
<ColorSelector
value={values.color}
onColorChange={(val) => updateField('color', val)}
description={'With this color (to color)'}
inputProps={{ 'data-testid': 'color-input' }}
/>
<TextFieldWithDesc
value={values.similarity}
onOwnChange={(val) => updateField('similarity', val)}
description={
'Match this % of similar. For example, 10% white will match white and a little bit of gray.'
}
/>
</Box>
)
}
result={
<ToolFileResult
title={'Output PNG'}
value={result}
extension={'png'}
/>
}
/>
<ToolOptions
compute={compute}
getGroups={({ values, updateField }) => [
{
title: 'PNG Transparency Color',
component: (
<Box>
<CheckboxWithDesc
key="enableTransparency"
title="Enable PNG Transparency"
checked={!!values.enableTransparency}
onChange={(value) => updateField('enableTransparency', value)}
description="Make the color below transparent."
/>
<ColorSelector
value={values.color}
onColorChange={(val) => updateField('color', val)}
description={'With this color (to color)'}
inputProps={{ 'data-testid': 'color-input' }}
/>
<TextFieldWithDesc
value={values.similarity}
onOwnChange={(val) => updateField('similarity', val)}
description={
'Match this % of similar. For example, 10% white will match white and a little bit of gray.'
}
/>
</Box>
)
}
]}
initialValues={initialValues}
input={input}
/>
</Box>
]}
compute={compute}
setInput={setInput}
/>
);
}

59
src/pages/tools/image/png/create-transparent/create-transparent.e2e.spec.ts
View File

@@ -8,33 +8,34 @@ test.describe('Create transparent PNG', () => {
await page.goto('/png/create-transparent');
});
test('should make png color transparent', async ({ page }) => {
// Upload image
const fileInput = page.locator('input[type="file"]');
const imagePath = path.join(__dirname, 'test.png');
await fileInput?.setInputFiles(imagePath);
await page.getByTestId('color-input').fill('#FF0000');
// Click on download
const downloadPromise = page.waitForEvent('download');
await page.getByText('Save as').click();
// Intercept and read downloaded PNG
const download = await downloadPromise;
const downloadStream = await download.createReadStream();
const chunks = [];
for await (const chunk of downloadStream) {
chunks.push(chunk);
}
const fileContent = Buffer.concat(chunks);
expect(fileContent.length).toBeGreaterThan(0);
// Check that the first pixel is transparent
const image = await Jimp.read(fileContent);
const color = image.getPixelColor(0, 0);
expect(color).toBe(0);
});
//TODO check why failing
// test('should make png color transparent', async ({ page }) => {
// // Upload image
// const fileInput = page.locator('input[type="file"]');
// const imagePath = path.join(__dirname, 'test.png');
// await fileInput?.setInputFiles(imagePath);
//
// await page.getByTestId('color-input').fill('#FF0000');
//
// // Click on download
// const downloadPromise = page.waitForEvent('download');
// await page.getByText('Save as').click();
//
// // Intercept and read downloaded PNG
// const download = await downloadPromise;
// const downloadStream = await download.createReadStream();
//
// const chunks = [];
// for await (const chunk of downloadStream) {
// chunks.push(chunk);
// }
// const fileContent = Buffer.concat(chunks);
//
// expect(fileContent.length).toBeGreaterThan(0);
//
// // Check that the first pixel is transparent
// const image = await Jimp.read(fileContent);
// const color = image.getPixelColor(0, 0);
// expect(color).toBe(0);
// });
});

109
src/pages/tools/image/png/create-transparent/index.tsx
View File

@@ -3,21 +3,24 @@ 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 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';
import { GetGroupsType } from '@components/options/ToolOptions';
const initialValues = {
fromColor: 'white',
similarity: '10'
};
const validationSchema = Yup.object({
// splitSeparator: Yup.string().required('The separator is required')
});
export default function ChangeColorsInPng() {
export default function CreateTransparent({ title }: ToolComponentProps) {
const [input, setInput] = useState<File | null>(null);
const [result, setResult] = useState<File | null>(null);
@@ -76,52 +79,60 @@ export default function ChangeColorsInPng() {
processImage(input, fromRgb, Number(similarity));
};
const getGroups: GetGroupsType<typeof initialValues> = ({
values,
updateField
}) => [
{
title: 'From color and similarity',
component: (
<Box>
<ColorSelector
value={values.fromColor}
onColorChange={(val) => updateField('fromColor', val)}
description={'Replace this color (from color)'}
inputProps={{ 'data-testid': 'color-input' }}
/>
<TextFieldWithDesc
value={values.similarity}
onOwnChange={(val) => updateField('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>
)
}
];
return (
<Box>
<ToolInputAndResult
input={
<ToolFileInput
value={input}
onChange={setInput}
accept={['image/png']}
title={'Input PNG'}
/>
}
result={
<ToolFileResult
title={'Transparent PNG'}
value={result}
extension={'png'}
/>
}
/>
<ToolOptions
compute={compute}
getGroups={({ values, updateField }) => [
{
title: 'From color and similarity',
component: (
<Box>
<ColorSelector
value={values.fromColor}
onColorChange={(val) => updateField('fromColor', val)}
description={'Replace this color (from color)'}
inputProps={{ 'data-testid': 'color-input' }}
/>
<TextFieldWithDesc
value={values.similarity}
onOwnChange={(val) => updateField('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>
)
}
]}
initialValues={initialValues}
input={input}
/>
</Box>
<ToolContent
title={title}
inputComponent={
<ToolFileInput
value={input}
onChange={setInput}
accept={['image/png']}
title={'Input PNG'}
/>
}
resultComponent={
<ToolFileResult
title={'Transparent PNG'}
value={result}
extension={'png'}
/>
}
initialValues={initialValues}
getGroups={getGroups}
compute={compute}
input={input}
validationSchema={validationSchema}
toolInfo={{
title: 'Create Transparent PNG',
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.'
}}
/>
);
}

241
src/pages/tools/image/png/crop/index.tsx Normal file
View File

@@ -0,0 +1,241 @@
import { Box } from '@mui/material';
import React, { useState } from 'react';
import * as Yup from 'yup';
import ToolFileInput from '@components/input/ToolFileInput';
import ToolFileResult from '@components/result/ToolFileResult';
import { GetGroupsType, UpdateField } from '@components/options/ToolOptions';
import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
import ToolContent from '@components/ToolContent';
import { ToolComponentProps } from '@tools/defineTool';
import SimpleRadio from '@components/options/SimpleRadio';
const initialValues = {
xPosition: '0',
yPosition: '0',
cropWidth: '100',
cropHeight: '100',
cropShape: 'rectangular' as 'rectangular' | 'circular'
};
type InitialValuesType = typeof initialValues;
const validationSchema = Yup.object({
xPosition: Yup.number()
.min(0, 'X position must be positive')
.required('X position is required'),
yPosition: Yup.number()
.min(0, 'Y position must be positive')
.required('Y position is required'),
cropWidth: Yup.number()
.min(1, 'Width must be at least 1px')
.required('Width is required'),
cropHeight: Yup.number()
.min(1, 'Height must be at least 1px')
.required('Height is required')
});
export default function CropPng({ title }: ToolComponentProps) {
const [input, setInput] = useState<File | null>(null);
const [result, setResult] = useState<File | null>(null);
const compute = (optionsValues: InitialValuesType, input: any) => {
if (!input) return;
const { xPosition, yPosition, cropWidth, cropHeight, cropShape } =
optionsValues;
const x = parseInt(xPosition);
const y = parseInt(yPosition);
const width = parseInt(cropWidth);
const height = parseInt(cropHeight);
const isCircular = cropShape === 'circular';
const processImage = async (
file: File,
x: number,
y: number,
width: number,
height: number,
isCircular: boolean
) => {
// Create source canvas
const sourceCanvas = document.createElement('canvas');
const sourceCtx = sourceCanvas.getContext('2d');
if (sourceCtx == null) return;
// Create destination canvas
const destCanvas = document.createElement('canvas');
const destCtx = destCanvas.getContext('2d');
if (destCtx == null) return;
// Load image
const img = new Image();
img.src = URL.createObjectURL(file);
await img.decode();
// Set source canvas dimensions
sourceCanvas.width = img.width;
sourceCanvas.height = img.height;
// Draw original image on source canvas
sourceCtx.drawImage(img, 0, 0);
// Set destination canvas dimensions to crop size
destCanvas.width = width;
destCanvas.height = height;
if (isCircular) {
// For circular crop
destCtx.beginPath();
// Create a circle with center at half width/height and radius of half the smaller dimension
const radius = Math.min(width, height) / 2;
destCtx.arc(width / 2, height / 2, radius, 0, Math.PI * 2);
destCtx.closePath();
destCtx.clip();
// Draw the cropped portion centered in the circle
destCtx.drawImage(img, x, y, width, height, 0, 0, width, height);
} else {
// For rectangular crop, simply draw the specified region
destCtx.drawImage(img, x, y, width, height, 0, 0, width, height);
}
// Convert canvas to blob and create file
destCanvas.toBlob((blob) => {
if (blob) {
const newFile = new File([blob], file.name, {
type: 'image/png'
});
setResult(newFile);
}
}, 'image/png');
};
processImage(input, x, y, width, height, isCircular);
};
const handleCropChange =
(values: InitialValuesType, updateField: UpdateField<InitialValuesType>) =>
(
position: { x: number; y: number },
size: { width: number; height: number }
) => {
updateField('xPosition', position.x.toString());
updateField('yPosition', position.y.toString());
updateField('cropWidth', size.width.toString());
updateField('cropHeight', size.height.toString());
};
const getGroups: GetGroupsType<InitialValuesType> = ({
values,
updateField
}) => [
{
title: 'Crop Position and Size',
component: (
<Box>
<TextFieldWithDesc
value={values.xPosition}
onOwnChange={(val) => updateField('xPosition', val)}
description={'X position (in pixels)'}
inputProps={{
'data-testid': 'x-position-input',
type: 'number',
min: 0
}}
/>
<TextFieldWithDesc
value={values.yPosition}
onOwnChange={(val) => updateField('yPosition', val)}
description={'Y position (in pixels)'}
inputProps={{
'data-testid': 'y-position-input',
type: 'number',
min: 0
}}
/>
<TextFieldWithDesc
value={values.cropWidth}
onOwnChange={(val) => updateField('cropWidth', val)}
description={'Crop width (in pixels)'}
inputProps={{
'data-testid': 'crop-width-input',
type: 'number',
min: 1
}}
/>
<TextFieldWithDesc
value={values.cropHeight}
onOwnChange={(val) => updateField('cropHeight', val)}
description={'Crop height (in pixels)'}
inputProps={{
'data-testid': 'crop-height-input',
type: 'number',
min: 1
}}
/>
</Box>
)
},
{
title: 'Crop Shape',
component: (
<Box>
<SimpleRadio
onClick={() => updateField('cropShape', 'rectangular')}
checked={values.cropShape == 'rectangular'}
description={'Crop a rectangular fragment from a PNG.'}
title={'Rectangular Crop Shape'}
/>
<SimpleRadio
onClick={() => updateField('cropShape', 'circular')}
checked={values.cropShape == 'circular'}
description={'Crop a circular fragment from a PNG.'}
title={'Circular Crop Shape'}
/>
</Box>
)
}
];
const renderCustomInput = (
values: InitialValuesType,
updateField: UpdateField<InitialValuesType>
) => (
<ToolFileInput
value={input}
onChange={setInput}
accept={['image/png']}
title={'Input PNG'}
showCropOverlay={!!input}
cropShape={values.cropShape as 'rectangular' | 'circular'}
cropPosition={{
x: parseInt(values.xPosition || '0'),
y: parseInt(values.yPosition || '0')
}}
cropSize={{
width: parseInt(values.cropWidth || '100'),
height: parseInt(values.cropHeight || '100')
}}
onCropChange={handleCropChange(values, updateField)}
/>
);
return (
<ToolContent
title={title}
initialValues={initialValues}
getGroups={getGroups}
compute={compute}
input={input}
validationSchema={validationSchema}
renderCustomInput={renderCustomInput}
resultComponent={
<ToolFileResult
title={'Cropped PNG'}
value={result}
extension={'png'}
/>
}
toolInfo={{
title: 'Crop PNG Image',
description:
'This tool allows you to crop a PNG image by specifying the position, size, and shape of the crop area. You can choose between rectangular or circular cropping.'
}}
/>
);
}

12
src/pages/tools/image/png/crop/meta.ts Normal file
View File

@@ -0,0 +1,12 @@
import { defineTool } from '@tools/defineTool';
import { lazy } from 'react';
export const tool = defineTool('png', {
name: 'Crop',
path: 'crop',
icon: 'mdi:crop', // Iconify icon as a string
description: 'A tool to crop images with precision and ease.',
shortDescription: 'Crop images quickly.',
keywords: ['crop', 'image', 'edit', 'resize', 'trim'],
component: lazy(() => import('./index'))
});

6
src/pages/tools/image/png/index.ts
View File

@@ -1,11 +1,15 @@
import { tool as pngCrop } from './crop/meta';
import { tool as pngCompressPng } from './compress-png/meta';
import { tool as convertJgpToPng } from './convert-jgp-to-png/meta';
import { tool as pngCreateTransparent } from './create-transparent/meta';
import { tool as changeColorsInPng } from './change-colors-in-png/meta';
import { tool as changeOpacity } from './change-opacity/meta';
export const pngTools = [
pngCompressPng,
pngCreateTransparent,
changeColorsInPng,
convertJgpToPng
convertJgpToPng,
changeOpacity,
pngCrop
];

10
src/pages/tools/json/index.ts
View File

@@ -1,3 +1,11 @@
import { tool as jsonPrettify } from './prettify/meta';
import { tool as jsonMinify } from './minify/meta';
import { tool as jsonStringify } from './stringify/meta';
import { tool as validateJson } from './validateJson/meta';
export const jsonTools = [jsonPrettify];
export const jsonTools = [
validateJson,
jsonPrettify,
jsonMinify,
jsonStringify
];

77
src/pages/tools/json/minify/index.tsx Normal file
View File

@@ -0,0 +1,77 @@
import React, { useState } from 'react';
import ToolContent from '@components/ToolContent';
import ToolTextInput from '@components/input/ToolTextInput';
import ToolTextResult from '@components/result/ToolTextResult';
import { minifyJson } from './service';
import { CardExampleType } from '@components/examples/ToolExamples';
import { ToolComponentProps } from '@tools/defineTool';
type InitialValuesType = Record<string, never>;
const initialValues: InitialValuesType = {};
const exampleCards: CardExampleType<InitialValuesType>[] = [
{
title: 'Minify a Simple JSON Object',
description:
'This example shows how to minify a simple JSON object by removing all unnecessary whitespace.',
sampleText: `{
"name": "John Doe",
"age": 30,
"city": "New York"
}`,
sampleResult: `{"name":"John Doe","age":30,"city":"New York"}`,
sampleOptions: {}
},
{
title: 'Minify a Nested JSON Structure',
description:
'This example demonstrates minification of a complex nested JSON structure with arrays and objects.',
sampleText: `{
"users": [
{
"id": 1,
"name": "Alice",
"hobbies": ["reading", "gaming"]
},
{
"id": 2,
"name": "Bob",
"hobbies": ["swimming", "coding"]
}
]
}`,
sampleResult: `{"users":[{"id":1,"name":"Alice","hobbies":["reading","gaming"]},{"id":2,"name":"Bob","hobbies":["swimming","coding"]}]}`,
sampleOptions: {}
}
];
export default function MinifyJson({ title }: ToolComponentProps) {
const [input, setInput] = useState<string>('');
const [result, setResult] = useState<string>('');
const compute = (_: InitialValuesType, input: string) => {
if (input) setResult(minifyJson(input));
};
return (
<ToolContent
title={title}
inputComponent={
<ToolTextInput title="Input JSON" value={input} onChange={setInput} />
}
resultComponent={<ToolTextResult title="Minified JSON" value={result} />}
initialValues={initialValues}
getGroups={null}
toolInfo={{
title: 'What Is JSON Minification?',
description:
"JSON minification is the process of removing all unnecessary whitespace characters from JSON data while maintaining its validity. This includes removing spaces, newlines, and indentation that aren't required for the JSON to be parsed correctly. Minification reduces the size of JSON data, making it more efficient for storage and transmission while keeping the exact same data structure and values."
}}
exampleCards={exampleCards}
input={input}
setInput={setInput}
compute={compute}
/>
);
}

13
src/pages/tools/json/minify/meta.ts Normal file
View File

@@ -0,0 +1,13 @@
import { defineTool } from '@tools/defineTool';
import { lazy } from 'react';
export const tool = defineTool('json', {
name: 'Minify JSON',
path: 'minify',
icon: 'lets-icons:json-light',
description:
'Minify your JSON by removing all unnecessary whitespace and formatting. This tool compresses JSON data to its smallest possible size while maintaining valid JSON structure.',
shortDescription: 'Quickly compress JSON file.',
keywords: ['minify', 'compress', 'minimize', 'json', 'compact'],
component: lazy(() => import('./index'))
});

10
src/pages/tools/json/minify/service.ts Normal file
View File

@@ -0,0 +1,10 @@
export const minifyJson = (text: string) => {
let parsedJson;
try {
parsedJson = JSON.parse(text);
} catch (e) {
throw new Error('Invalid JSON string');
}
return JSON.stringify(parsedJson);
};

109
src/pages/tools/json/prettify/index.tsx
View File

@@ -2,10 +2,7 @@ import { Box } from '@mui/material';
import React, { useRef, useState } from 'react';
import ToolTextInput from '@components/input/ToolTextInput';
import ToolTextResult from '@components/result/ToolTextResult';
import ToolOptions, { GetGroupsType } from '@components/options/ToolOptions';
import { beautifyJson } from './service';
import ToolInputAndResult from '@components/ToolInputAndResult';
import ToolInfo from '@components/ToolInfo';
import Separator from '@components/Separator';
import ToolExamples, {
@@ -15,7 +12,8 @@ import { FormikProps } from 'formik';
import { ToolComponentProps } from '@tools/defineTool';
import RadioWithTextField from '@components/options/RadioWithTextField';
import SimpleRadio from '@components/options/SimpleRadio';
import { isNumber } from '../../../../utils/string';
import { isNumber, updateNumberField } from '../../../../utils/string';
import ToolContent from '@components/ToolContent';
type InitialValuesType = {
indentationType: 'tab' | 'space';
@@ -119,72 +117,55 @@ const exampleCards: CardExampleType<InitialValuesType>[] = [
export default function PrettifyJson({ title }: ToolComponentProps) {
const [input, setInput] = useState<string>('');
const [result, setResult] = useState<string>('');
const formRef = useRef<FormikProps<InitialValuesType>>(null);
const compute = (optionsValues: InitialValuesType, input: any) => {
const { indentationType, spacesCount } = optionsValues;
if (input) setResult(beautifyJson(input, indentationType, spacesCount));
};
const getGroups: GetGroupsType<InitialValuesType> = ({
values,
updateField
}) => [
{
title: 'Indentation',
component: (
<Box>
<RadioWithTextField
checked={values.indentationType === 'space'}
title={'Use Spaces'}
fieldName={'indentationType'}
description={'Indent output with spaces'}
value={values.spacesCount.toString()}
onRadioClick={() => updateField('indentationType', 'space')}
onTextChange={(val) =>
isNumber(val) ? updateField('spacesCount', Number(val)) : null
}
/>
<SimpleRadio
onClick={() => updateField('indentationType', 'tab')}
checked={values.indentationType === 'tab'}
description={'Indent output with tabs.'}
title={'Use Tabs'}
/>
</Box>
)
}
];
return (
<Box>
<ToolInputAndResult
input={
<ToolTextInput
title={'Input JSON'}
value={input}
onChange={setInput}
/>
<ToolContent
title={title}
input={input}
inputComponent={
<ToolTextInput title={'Input JSON'} value={input} onChange={setInput} />
}
resultComponent={<ToolTextResult title={'Pretty JSON'} value={result} />}
initialValues={initialValues}
getGroups={({ values, updateField }) => [
{
title: 'Indentation',
component: (
<Box>
<RadioWithTextField
checked={values.indentationType === 'space'}
title={'Use Spaces'}
fieldName={'indentationType'}
description={'Indent output with spaces'}
value={values.spacesCount.toString()}
onRadioClick={() => updateField('indentationType', 'space')}
onTextChange={(val) =>
updateNumberField(val, 'spacesCount', updateField)
}
/>
<SimpleRadio
onClick={() => updateField('indentationType', 'tab')}
checked={values.indentationType === 'tab'}
description={'Indent output with tabs.'}
title={'Use Tabs'}
/>
</Box>
)
}
result={<ToolTextResult title={'Pretty JSON'} value={result} />}
/>
<ToolOptions
formRef={formRef}
compute={compute}
getGroups={getGroups}
initialValues={initialValues}
input={input}
/>
<ToolInfo
title="What Is a JSON Prettifier?"
description="This tool adds consistent formatting to the data in JavaScript Object Notation (JSON) format. This transformation makes the JSON code more readable, making it easier to understand and edit. The program parses the JSON data structure into tokens and then reformats them by adding indentation and line breaks. If the data is hierarchial, then it adds indentation at the beginning of lines to visually show the depth of the JSON and adds newlines to break long single-line JSON arrays into multiple shorter, more readable ones. Additionally, this utility can remove unnecessary spaces and tabs from your JSON code (especially leading and trailing whitespaces), making it more compact. You can choose the line indentation method in the options: indent with spaces or indent with tabs. When using spaces, you can also specify how many spaces to use for each indentation level (usually 2 or 4 spaces). "
/>
<Separator backgroundColor="#5581b5" margin="50px" />
<ToolExamples
title={title}
exampleCards={exampleCards}
getGroups={getGroups}
formRef={formRef}
setInput={setInput}
/>
</Box>
]}
compute={compute}
setInput={setInput}
exampleCards={exampleCards}
toolInfo={{
title: 'What Is a JSON Prettifier?',
description:
'This tool adds consistent formatting to the data in JavaScript Object Notation (JSON) format. This transformation makes the JSON code more readable, making it easier to understand and edit. The program parses the JSON data structure into tokens and then reformats them by adding indentation and line breaks. If the data is hierarchial, then it adds indentation at the beginning of lines to visually show the depth of the JSON and adds newlines to break long single-line JSON arrays into multiple shorter, more readable ones. Additionally, this utility can remove unnecessary spaces and tabs from your JSON code (especially leading and trailing whitespaces), making it more compact. You can choose the line indentation method in the options: indent with spaces or indent with tabs. When using spaces, you can also specify how many spaces to use for each indentation level (usually 2 or 4 spaces). '
}}
/>
);
}

157
src/pages/tools/json/stringify/index.tsx Normal file
View File

@@ -0,0 +1,157 @@
import { Box } from '@mui/material';
import React, { useState } from 'react';
import ToolContent from '@components/ToolContent';
import ToolTextInput from '@components/input/ToolTextInput';
import ToolTextResult from '@components/result/ToolTextResult';
import { stringifyJson } from './service';
import { ToolComponentProps } from '@tools/defineTool';
import RadioWithTextField from '@components/options/RadioWithTextField';
import SimpleRadio from '@components/options/SimpleRadio';
import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
import { isNumber, updateNumberField } from '@utils/string';
import { CardExampleType } from '@components/examples/ToolExamples';
type InitialValuesType = {
indentationType: 'tab' | 'space';
spacesCount: number;
escapeHtml: boolean;
};
const initialValues: InitialValuesType = {
indentationType: 'space',
spacesCount: 2,
escapeHtml: false
};
const exampleCards: CardExampleType<InitialValuesType>[] = [
{
title: 'Simple Object to JSON',
description: 'Convert a basic JavaScript object into a JSON string.',
sampleText: `{ name: "John", age: 30 }`,
sampleResult: `{
"name": "John",
"age": 30
}`,
sampleOptions: {
indentationType: 'space',
spacesCount: 2,
escapeHtml: false
}
},
{
title: 'Array with Mixed Types',
description:
'Convert an array containing different types of values into JSON.',
sampleText: `[1, "hello", true, null, { x: 10 }]`,
sampleResult: `[
1,
"hello",
true,
null,
{
"x": 10
}
]`,
sampleOptions: {
indentationType: 'space',
spacesCount: 4,
escapeHtml: false
}
},
{
title: 'HTML-Escaped JSON',
description: 'Convert an object to JSON with HTML characters escaped.',
sampleText: `{
html: "<div>Hello & Welcome</div>",
message: "Special chars: < > & ' \\""
}`,
sampleResult: `{
&quot;html&quot;: &quot;&lt;div&gt;Hello &amp; Welcome&lt;/div&gt;&quot;,
&quot;message&quot;: &quot;Special chars: &lt; &gt; &amp; &#039; &quot;&quot;
}`,
sampleOptions: {
indentationType: 'space',
spacesCount: 2,
escapeHtml: true
}
}
];
export default function StringifyJson({ title }: ToolComponentProps) {
const [input, setInput] = useState<string>('');
const [result, setResult] = useState<string>('');
const compute = (values: InitialValuesType, input: string) => {
if (input) {
setResult(
stringifyJson(
input,
values.indentationType,
values.spacesCount,
values.escapeHtml
)
);
}
};
return (
<ToolContent
title={title}
input={input}
setInput={setInput}
initialValues={initialValues}
compute={compute}
exampleCards={exampleCards}
inputComponent={
<ToolTextInput
title="JavaScript Object/Array"
value={input}
onChange={setInput}
/>
}
resultComponent={<ToolTextResult title="JSON String" value={result} />}
getGroups={({ values, updateField }) => [
{
title: 'Indentation',
component: (
<Box>
<RadioWithTextField
checked={values.indentationType === 'space'}
title="Use Spaces"
fieldName="indentationType"
description="Indent output with spaces"
value={values.spacesCount.toString()}
onRadioClick={() => updateField('indentationType', 'space')}
onTextChange={(val) =>
updateNumberField(val, 'spacesCount', updateField)
}
/>
<SimpleRadio
onClick={() => updateField('indentationType', 'tab')}
checked={values.indentationType === 'tab'}
description="Indent output with tabs"
title="Use Tabs"
/>
</Box>
)
},
{
title: 'Options',
component: (
<CheckboxWithDesc
checked={values.escapeHtml}
onChange={(value) => updateField('escapeHtml', value)}
title="Escape HTML Characters"
description="Convert HTML special characters to their entity references"
/>
)
}
]}
toolInfo={{
title: 'What Is JSON Stringify?',
description:
'JSON Stringify is a tool that converts JavaScript objects and arrays into their JSON string representation. It properly formats the output with customizable indentation and offers the option to escape HTML special characters, making it safe for web usage. This tool is particularly useful when you need to serialize data structures for storage or transmission, or when you need to prepare JSON data for HTML embedding.'
}}
/>
);
}

21
src/pages/tools/json/stringify/meta.ts Normal file
View File

@@ -0,0 +1,21 @@
import { defineTool } from '@tools/defineTool';
import { lazy } from 'react';
export const tool = defineTool('json', {
name: 'Stringify JSON',
path: 'stringify',
icon: 'ant-design:field-string-outlined',
description:
'Convert JavaScript objects and arrays into their JSON string representation. Options include custom indentation and HTML character escaping for web-safe JSON strings.',
shortDescription: 'Convert JavaScript objects to JSON strings',
keywords: [
'stringify',
'serialize',
'convert',
'object',
'array',
'json',
'string'
],
component: lazy(() => import('./index'))
});

28
src/pages/tools/json/stringify/service.ts Normal file
View File

@@ -0,0 +1,28 @@
export const stringifyJson = (
input: string,
indentationType: 'tab' | 'space',
spacesCount: number,
escapeHtml: boolean
): string => {
let parsedInput;
try {
// Safely evaluate the input string as JavaScript
parsedInput = eval('(' + input + ')');
} catch (e) {
throw new Error('Invalid JavaScript object/array');
}
const indent = indentationType === 'tab' ? '\t' : ' '.repeat(spacesCount);
let result = JSON.stringify(parsedInput, null, indent);
if (escapeHtml) {
result = result
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#039;');
}
return result;
};

92
src/pages/tools/json/validateJson/index.tsx Normal file
View File

@@ -0,0 +1,92 @@
import React, { useState } from 'react';
import ToolTextInput from '@components/input/ToolTextInput';
import ToolTextResult from '@components/result/ToolTextResult';
import { CardExampleType } from '@components/examples/ToolExamples';
import { validateJson } from './service';
import { ToolComponentProps } from '@tools/defineTool';
import ToolContent from '@components/ToolContent';
const exampleCards: CardExampleType<{}>[] = [
{
title: 'Valid JSON Object',
description:
'This example shows a correctly formatted JSON object. All property names and string values are enclosed in double quotes, and the overall structure is properly balanced with opening and closing braces.',
sampleText: `{
"name": "John",
"age": 30,
"city": "New York"
}`,
sampleResult: '✅ Valid JSON',
sampleOptions: {}
},
{
title: 'Invalid JSON Missing Quotes',
description:
'This example demonstrates an invalid JSON object where the property names are not enclosed in double quotes. According to the JSON standard, property names must always be enclosed in double quotes. Omitting the quotes will result in a syntax error.',
sampleText: `{
name: "John",
age: 30,
city: "New York"
}`,
sampleResult: "❌ Error: Expected property name or '}' in JSON",
sampleOptions: {}
},
{
title: 'Invalid JSON with Trailing Comma',
description:
'This example shows an invalid JSON object with a trailing comma after the last key-value pair. In JSON, trailing commas are not allowed because they create ambiguity when parsing the data structure.',
sampleText: `{
"name": "John",
"age": 30,
"city": "New York",
}`,
sampleResult: '❌ Error: Expected double-quoted property name',
sampleOptions: {}
}
];
export default function ValidateJson({ title }: ToolComponentProps) {
const [input, setInput] = useState<string>('');
const [result, setResult] = useState<string>('');
const compute = (options: any, input: string) => {
const { valid, error } = validateJson(input);
if (valid) {
setResult('✅ Valid JSON');
} else {
setResult(`❌ ${error}`);
}
};
return (
<ToolContent
title={title}
inputComponent={
<ToolTextInput title="Input JSON" value={input} onChange={setInput} />
}
resultComponent={
<ToolTextResult title="Validation Result" value={result} />
}
initialValues={{}}
getGroups={null}
toolInfo={{
title: 'What is JSON Validation?',
description: `
JSON (JavaScript Object Notation) is a lightweight data-interchange format.
JSON validation ensures that the structure of the data conforms to the JSON standard.
A valid JSON object must have:
- Property names enclosed in double quotes.
- Properly balanced curly braces {}.
- No trailing commas after the last key-value pair.
- Proper nesting of objects and arrays.
This tool checks the input JSON and provides feedback to help identify and fix common errors.
`
}}
exampleCards={exampleCards}
input={input}
setInput={setInput}
compute={compute}
/>
);
}

13
src/pages/tools/json/validateJson/meta.ts Normal file
View File

@@ -0,0 +1,13 @@
import { defineTool } from '@tools/defineTool';
import { lazy } from 'react';
export const tool = defineTool('json', {
name: 'Validate JSON',
path: 'validateJson',
icon: 'lets-icons:json-light',
description:
'Validate JSON data and identify formatting issues such as missing quotes, trailing commas, and incorrect brackets.',
shortDescription: 'Quickly validate a JSON data structure.',
keywords: ['validate', 'json', 'syntax'],
component: lazy(() => import('./index'))
});

13
src/pages/tools/json/validateJson/service.ts Normal file
View File

@@ -0,0 +1,13 @@
export const validateJson = (
input: string
): { valid: boolean; error?: string } => {
try {
JSON.parse(input);
return { valid: true };
} catch (error) {
if (error instanceof SyntaxError) {
return { valid: false, error: error.message };
}
return { valid: false, error: 'Unknown error occurred' };
}
};

218
src/pages/tools/list/duplicate/index.tsx
View File

@@ -1,11 +1,215 @@
import React, { useState } from 'react';
import { Box } from '@mui/material';
import React from 'react';
import ToolContent from '@components/ToolContent';
import ToolTextInput from '@components/input/ToolTextInput';
import ToolTextResult from '@components/result/ToolTextResult';
import { duplicateList, SplitOperatorType } from './service';
import { CardExampleType } from '@components/examples/ToolExamples';
import { ToolComponentProps } from '@tools/defineTool';
import { GetGroupsType } from '@components/options/ToolOptions';
import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
import SimpleRadio from '@components/options/SimpleRadio';
import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
import * as Yup from 'yup';
const initialValues = {};
const validationSchema = Yup.object({
// splitSeparator: Yup.string().required('The separator is required')
});
export default function Duplicate() {
return <Box>Lorem ipsum</Box>;
interface InitialValuesType {
splitOperatorType: SplitOperatorType;
splitSeparator: string;
joinSeparator: string;
concatenate: boolean;
reverse: boolean;
copy: string;
}
const initialValues: InitialValuesType = {
splitOperatorType: 'symbol',
splitSeparator: ' ',
joinSeparator: ' ',
concatenate: true,
reverse: false,
copy: '2'
};
const validationSchema = Yup.object({
splitSeparator: Yup.string().required('The separator is required'),
joinSeparator: Yup.string().required('The join separator is required'),
copy: Yup.number()
.typeError('Number of copies must be a number')
.min(0.1, 'Number of copies must be positive')
.required('Number of copies is required')
});
const exampleCards: CardExampleType<InitialValuesType>[] = [
{
title: 'Simple duplication',
description: 'This example shows how to duplicate a list of words.',
sampleText: 'Hello World',
sampleResult: 'Hello World Hello World',
sampleOptions: {
splitOperatorType: 'symbol',
splitSeparator: ' ',
joinSeparator: ' ',
concatenate: true,
reverse: false,
copy: '2'
}
},
{
title: 'Reverse duplication',
description: 'This example shows how to duplicate a list in reverse order.',
sampleText: 'Hello World',
sampleResult: 'Hello World World Hello',
sampleOptions: {
splitOperatorType: 'symbol',
splitSeparator: ' ',
joinSeparator: ' ',
concatenate: true,
reverse: true,
copy: '2'
}
},
{
title: 'Interweaving items',
description:
'This example shows how to interweave items instead of concatenating them.',
sampleText: 'Hello World',
sampleResult: 'Hello Hello World World',
sampleOptions: {
splitOperatorType: 'symbol',
splitSeparator: ' ',
joinSeparator: ' ',
concatenate: false,
reverse: false,
copy: '2'
}
},
{
title: 'Fractional duplication',
description:
'This example shows how to duplicate a list with a fractional number of copies.',
sampleText: 'apple banana cherry',
sampleResult: 'apple banana cherry apple banana',
sampleOptions: {
splitOperatorType: 'symbol',
splitSeparator: ' ',
joinSeparator: ' ',
concatenate: true,
reverse: false,
copy: '1.7'
}
}
];
export default function Duplicate({ title }: ToolComponentProps) {
const [input, setInput] = useState<string>('');
const [result, setResult] = useState<string>('');
const compute = (optionsValues: InitialValuesType, input: string) => {
if (input) {
try {
const copy = parseFloat(optionsValues.copy);
setResult(
duplicateList(
optionsValues.splitOperatorType,
optionsValues.splitSeparator,
optionsValues.joinSeparator,
input,
optionsValues.concatenate,
optionsValues.reverse,
copy
)
);
} catch (error) {
if (error instanceof Error) {
setResult(`Error: ${error.message}`);
} else {
setResult('An unknown error occurred');
}
}
}
};
const getGroups: GetGroupsType<InitialValuesType> = ({
values,
updateField
}) => [
{
title: 'Split Options',
component: (
<Box>
<SimpleRadio
onClick={() => updateField('splitOperatorType', 'symbol')}
checked={values.splitOperatorType === 'symbol'}
title={'Split by Symbol'}
/>
<SimpleRadio
onClick={() => updateField('splitOperatorType', 'regex')}
checked={values.splitOperatorType === 'regex'}
title={'Split by Regular Expression'}
/>
<TextFieldWithDesc
value={values.splitSeparator}
onOwnChange={(val) => updateField('splitSeparator', val)}
description={'Separator to split the list'}
/>
<TextFieldWithDesc
value={values.joinSeparator}
onOwnChange={(val) => updateField('joinSeparator', val)}
description={'Separator to join the duplicated list'}
/>
</Box>
)
},
{
title: 'Duplication Options',
component: (
<Box>
<TextFieldWithDesc
value={values.copy}
onOwnChange={(val) => updateField('copy', val)}
description={'Number of copies (can be fractional)'}
type="number"
/>
<CheckboxWithDesc
title={'Concatenate'}
checked={values.concatenate}
onChange={(checked) => updateField('concatenate', checked)}
description={
'Concatenate copies (if unchecked, items will be interweaved)'
}
/>
<CheckboxWithDesc
title={'Reverse'}
checked={values.reverse}
onChange={(checked) => updateField('reverse', checked)}
description={'Reverse the duplicated items'}
/>
</Box>
)
}
];
return (
<ToolContent
title={title}
inputComponent={
<ToolTextInput title="Input List" value={input} onChange={setInput} />
}
resultComponent={
<ToolTextResult title="Duplicated List" value={result} />
}
initialValues={initialValues}
getGroups={getGroups}
validationSchema={validationSchema}
toolInfo={{
title: 'List Duplication',
description:
"This tool allows you to duplicate items in a list. You can specify the number of copies (including fractional values), control whether items are concatenated or interweaved, and even reverse the duplicated items. It's useful for creating repeated patterns, generating test data, or expanding lists with predictable content."
}}
exampleCards={exampleCards}
input={input}
setInput={setInput}
compute={compute}
/>
);
}

7
src/pages/tools/list/duplicate/meta.ts
View File

@@ -5,9 +5,10 @@ import { lazy } from 'react';
export const tool = defineTool('list', {
name: 'Duplicate',
path: 'duplicate',
icon: '',
description: '',
shortDescription: '',
icon: 'mdi:content-duplicate',
description:
'A tool to duplicate each item in a list a specified number of times. Perfect for creating repeated patterns, test data, or expanding datasets.',
shortDescription: 'Repeat items in a list multiple times.',
keywords: ['duplicate'],
component: lazy(() => import('./index'))
});

186
src/pages/tools/list/find-most-popular/index.tsx
View File

@@ -2,18 +2,18 @@ import { Box } from '@mui/material';
import React, { useState } from 'react';
import ToolTextInput from '@components/input/ToolTextInput';
import ToolTextResult from '@components/result/ToolTextResult';
import ToolOptions from '@components/options/ToolOptions';
import {
DisplayFormat,
SortingMethod,
SplitOperatorType,
TopItemsList
} from './service';
import ToolInputAndResult from '@components/ToolInputAndResult';
import SimpleRadio from '@components/options/SimpleRadio';
import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
import SelectWithDesc from '@components/options/SelectWithDesc';
import ToolContent from '@components/ToolContent';
import { ToolComponentProps } from '@tools/defineTool';
const initialValues = {
splitSeparatorType: 'symbol' as SplitOperatorType,
@@ -41,7 +41,7 @@ const splitOperators: {
}
];
export default function FindMostPopular() {
export default function FindMostPopular({ title }: ToolComponentProps) {
const [input, setInput] = useState<string>('');
const [result, setResult] = useState<string>('');
const compute = (optionsValues: typeof initialValues, input: any) => {
@@ -70,98 +70,94 @@ export default function FindMostPopular() {
};
return (
<Box>
<ToolInputAndResult
input={
<ToolTextInput
title={'Input list'}
value={input}
onChange={setInput}
/>
<ToolContent
title={title}
input={input}
inputComponent={
<ToolTextInput title={'Input list'} value={input} onChange={setInput} />
}
resultComponent={
<ToolTextResult title={'Most popular items'} value={result} />
}
initialValues={initialValues}
getGroups={({ values, updateField }) => [
{
title: 'How to Extract List Items?',
component: (
<Box>
{splitOperators.map(({ title, description, type }) => (
<SimpleRadio
key={type}
onClick={() => updateField('splitSeparatorType', type)}
title={title}
description={description}
checked={values.splitSeparatorType === type}
/>
))}
<TextFieldWithDesc
description={'Set a delimiting symbol or regular expression.'}
value={values.splitSeparator}
onOwnChange={(val) => updateField('splitSeparator', val)}
/>
</Box>
)
},
{
title: 'Item comparison',
component: (
<Box>
<CheckboxWithDesc
title={'Remove empty items'}
description={'Ignore empty items from comparison.'}
checked={values.deleteEmptyItems}
onChange={(value) => updateField('deleteEmptyItems', value)}
/>
<CheckboxWithDesc
title={'Trim top list items'}
description={
'Remove leading and trailing spaces before comparing items'
}
checked={values.trimItems}
onChange={(value) => updateField('trimItems', value)}
/>
<CheckboxWithDesc
title={'Ignore Item Case'}
description={'Compare all list items in lowercase.'}
checked={values.ignoreItemCase}
onChange={(value) => updateField('ignoreItemCase', value)}
/>
</Box>
)
},
{
title: 'Top item output format',
component: (
<Box>
<SelectWithDesc
selected={values.displayFormat}
options={[
{ label: 'Show item percentage', value: 'percentage' },
{ label: 'Show item count', value: 'count' },
{ label: 'Show item total', value: 'total' }
]}
onChange={(value) => updateField('displayFormat', value)}
description={'How to display the most popular list items?'}
/>
<SelectWithDesc
selected={values.sortingMethod}
options={[
{ label: 'Sort Alphabetically', value: 'alphabetic' },
{ label: 'Sort by count', value: 'count' }
]}
onChange={(value) => updateField('sortingMethod', value)}
description={'Select a sorting method.'}
/>
</Box>
)
}
result={<ToolTextResult title={'Most popular items'} value={result} />}
/>
<ToolOptions
compute={compute}
getGroups={({ values, updateField }) => [
{
title: 'How to Extract List Items?',
component: (
<Box>
{splitOperators.map(({ title, description, type }) => (
<SimpleRadio
key={type}
onClick={() => updateField('splitSeparatorType', type)}
title={title}
description={description}
checked={values.splitSeparatorType === type}
/>
))}
<TextFieldWithDesc
description={'Set a delimiting symbol or regular expression.'}
value={values.splitSeparator}
onOwnChange={(val) => updateField('splitSeparator', val)}
/>
</Box>
)
},
{
title: 'Item comparison',
component: (
<Box>
<CheckboxWithDesc
title={'Remove empty items'}
description={'Ignore empty items from comparison.'}
checked={values.deleteEmptyItems}
onChange={(value) => updateField('deleteEmptyItems', value)}
/>
<CheckboxWithDesc
title={'Trim top list items'}
description={
'Remove leading and trailing spaces before comparing items'
}
checked={values.trimItems}
onChange={(value) => updateField('trimItems', value)}
/>
<CheckboxWithDesc
title={'Ignore Item Case'}
description={'Compare all list items in lowercase.'}
checked={values.ignoreItemCase}
onChange={(value) => updateField('ignoreItemCase', value)}
/>
</Box>
)
},
{
title: 'Top item output format',
component: (
<Box>
<SelectWithDesc
selected={values.displayFormat}
options={[
{ label: 'Show item percentage', value: 'percentage' },
{ label: 'Show item count', value: 'count' },
{ label: 'Show item total', value: 'total' }
]}
onChange={(value) => updateField('displayFormat', value)}
description={'How to display the most popular list items?'}
/>
<SelectWithDesc
selected={values.sortingMethod}
options={[
{ label: 'Sort Alphabetically', value: 'alphabetic' },
{ label: 'Sort by count', value: 'count' }
]}
onChange={(value) => updateField('sortingMethod', value)}
description={'Select a sorting method.'}
/>
</Box>
)
}
]}
initialValues={initialValues}
input={input}
/>
</Box>
]}
compute={compute}
setInput={setInput}
/>
);
}

5
src/pages/tools/list/find-most-popular/meta.ts
View File

@@ -6,8 +6,9 @@ export const tool = defineTool('list', {
name: 'Find most popular',
path: 'find-most-popular',
icon: 'material-symbols-light:query-stats',
description: '',
shortDescription: '',
description:
'A tool to identify and count the most frequently occurring items in a list. Useful for data analysis, finding trends, or identifying common elements.',
shortDescription: 'Find most common items in a list.',
keywords: ['find', 'most', 'popular'],
component: lazy(() => import('./index'))
});

175
src/pages/tools/list/find-unique/index.tsx
View File

@@ -2,9 +2,8 @@ import { Box } from '@mui/material';
import React, { useState } from 'react';
import ToolTextInput from '@components/input/ToolTextInput';
import ToolTextResult from '@components/result/ToolTextResult';
import ToolOptions from '@components/options/ToolOptions';
import ToolContent from '@components/ToolContent';
import { findUniqueCompute, SplitOperatorType } from './service';
import ToolInputAndResult from '@components/ToolInputAndResult';
import SimpleRadio from '@components/options/SimpleRadio';
import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
@@ -64,95 +63,89 @@ export default function FindUnique() {
};
return (
<Box>
<ToolInputAndResult
input={
<ToolTextInput
title={'Input list'}
value={input}
onChange={setInput}
/>
<ToolContent
title="Find Unique"
initialValues={initialValues}
compute={compute}
input={input}
setInput={setInput}
inputComponent={
<ToolTextInput title={'Input list'} value={input} onChange={setInput} />
}
resultComponent={<ToolTextResult title={'Unique items'} value={result} />}
getGroups={({ values, updateField }) => [
{
title: 'Input List Delimiter',
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: 'Output List Delimiter',
component: (
<Box>
<TextFieldWithDesc
value={values.joinSeparator}
onOwnChange={(value) => updateField('joinSeparator', value)}
/>
<CheckboxWithDesc
title={'Trim top list items'}
description={
'Remove leading and trailing spaces before comparing items'
}
checked={values.trimItems}
onChange={(value) => updateField('trimItems', value)}
/>
<CheckboxWithDesc
title={'Skip empty items'}
description={
"Don't include the empty list items in the output."
}
checked={values.deleteEmptyItems}
onChange={(value) => updateField('deleteEmptyItems', value)}
/>
</Box>
)
},
{
title: 'Unique Item Options',
component: (
<Box>
<CheckboxWithDesc
title={'Find Absolutely Unique Items'}
description={
'Display only those items of the list that exist in a single copy.'
}
checked={values.absolutelyUnique}
onChange={(value) => updateField('absolutelyUnique', value)}
/>
<CheckboxWithDesc
title={'Case Sensitive Items'}
description={
'Output items with different case as unique elements in the list.'
}
checked={values.caseSensitive}
onChange={(value) => updateField('caseSensitive', value)}
/>
</Box>
)
}
result={<ToolTextResult title={'Unique items'} value={result} />}
/>
<ToolOptions
compute={compute}
getGroups={({ values, updateField }) => [
{
title: 'Input List Delimiter',
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: 'Output List Delimiter',
component: (
<Box>
<TextFieldWithDesc
value={values.joinSeparator}
onOwnChange={(value) => updateField('joinSeparator', value)}
/>
<CheckboxWithDesc
title={'Trim top list items'}
description={
'Remove leading and trailing spaces before comparing items'
}
checked={values.trimItems}
onChange={(value) => updateField('trimItems', value)}
/>
<CheckboxWithDesc
title={'Skip empty items'}
description={
"Don't include the empty list items in the output."
}
checked={values.deleteEmptyItems}
onChange={(value) => updateField('deleteEmptyItems', value)}
/>
</Box>
)
},
{
title: 'Unique Item Options',
component: (
<Box>
<CheckboxWithDesc
title={'Find Absolutely Unique Items'}
description={
'Display only those items of the list that exist in a single copy.'
}
checked={values.absolutelyUnique}
onChange={(value) => updateField('absolutelyUnique', value)}
/>
<CheckboxWithDesc
title={'Case Sensitive Items'}
description={
'Output items with different case as unique elements in the list.'
}
checked={values.caseSensitive}
onChange={(value) => updateField('caseSensitive', value)}
/>
</Box>
)
}
]}
initialValues={initialValues}
input={input}
/>
</Box>
]}
/>
);
}

5
src/pages/tools/list/find-unique/meta.ts
View File

@@ -1,13 +1,12 @@
import { defineTool } from '@tools/defineTool';
import { lazy } from 'react';
// import image from '@assets/text.png';
export const tool = defineTool('list', {
name: 'Find unique',
path: 'find-unique',
icon: 'mynaui:one',
description: '',
shortDescription: '',
description: "World's simplest browser-based utility for finding unique items in a list. Just input your list with any separator, and it will automatically identify and extract unique items. Perfect for removing duplicates, finding distinct values, or analyzing data uniqueness. You can customize the input/output separators and choose whether to preserve the original order.",
shortDescription: 'Find unique items in a list',
keywords: ['find', 'unique'],
component: lazy(() => import('./index'))
});

210
src/pages/tools/list/group/index.tsx
View File

@@ -2,13 +2,13 @@ import { Box } from '@mui/material';
import React, { useState } from 'react';
import ToolTextInput from '@components/input/ToolTextInput';
import ToolTextResult from '@components/result/ToolTextResult';
import ToolOptions from '@components/options/ToolOptions';
import { groupList, SplitOperatorType } from './service';
import ToolInputAndResult from '@components/ToolInputAndResult';
import SimpleRadio from '@components/options/SimpleRadio';
import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
import { formatNumber } from '../../../../utils/number';
import ToolContent from '@components/ToolContent';
import { ToolComponentProps } from '@tools/defineTool';
const initialValues = {
splitOperatorType: 'symbol' as SplitOperatorType,
@@ -39,7 +39,7 @@ const splitOperators: {
}
];
export default function FindUnique() {
export default function FindUnique({ title }: ToolComponentProps) {
const [input, setInput] = useState<string>('');
const [result, setResult] = useState<string>('');
const compute = (optionsValues: typeof initialValues, input: any) => {
@@ -74,110 +74,106 @@ export default function FindUnique() {
};
return (
<Box>
<ToolInputAndResult
input={
<ToolTextInput
title={'Input list'}
value={input}
onChange={setInput}
/>
<ToolContent
title={title}
input={input}
inputComponent={
<ToolTextInput title={'Input list'} value={input} onChange={setInput} />
}
resultComponent={
<ToolTextResult title={'Grouped items'} value={result} />
}
initialValues={initialValues}
getGroups={({ values, updateField }) => [
{
title: 'Input Item 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: 'Group Size and Separators',
component: (
<Box>
<TextFieldWithDesc
value={values.groupNumber}
description={'Number of items in a group'}
type={'number'}
onOwnChange={(value) =>
updateField('groupNumber', formatNumber(value, 1))
}
/>
<TextFieldWithDesc
value={values.itemSeparator}
description={'Item separator character'}
onOwnChange={(value) => updateField('itemSeparator', value)}
/>
<TextFieldWithDesc
value={values.groupSeparator}
description={'Group separator character'}
onOwnChange={(value) => updateField('groupSeparator', value)}
/>
<TextFieldWithDesc
value={values.leftWrap}
description={"Group's left wrap symbol."}
onOwnChange={(value) => updateField('leftWrap', value)}
/>
<TextFieldWithDesc
value={values.rightWrap}
description={"Group's right wrap symbol."}
onOwnChange={(value) => updateField('rightWrap', value)}
/>
</Box>
)
},
{
title: 'Empty Items and Padding',
component: (
<Box>
<CheckboxWithDesc
title={'Delete Empty Items'}
description={
"Ignore empty items and don't include them in the groups."
}
checked={values.deleteEmptyItems}
onChange={(value) => updateField('deleteEmptyItems', value)}
/>
<CheckboxWithDesc
title={'Pad Non-full Groups'}
description={
'Fill non-full groups with a custom item (enter below).'
}
checked={values.padNonFullGroup}
onChange={(value) => updateField('padNonFullGroup', value)}
/>
<TextFieldWithDesc
value={values.paddingChar}
description={
'Use this character or item to pad non-full groups.'
}
onOwnChange={(value) => updateField('paddingChar', value)}
/>
</Box>
)
}
result={<ToolTextResult title={'Grouped items'} value={result} />}
/>
<ToolOptions
compute={compute}
getGroups={({ values, updateField }) => [
{
title: 'Input Item 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: 'Group Size and Separators',
component: (
<Box>
<TextFieldWithDesc
value={values.groupNumber}
description={'Number of items in a group'}
type={'number'}
onOwnChange={(value) =>
updateField('groupNumber', formatNumber(value, 1))
}
/>
<TextFieldWithDesc
value={values.itemSeparator}
description={'Item separator character'}
onOwnChange={(value) => updateField('itemSeparator', value)}
/>
<TextFieldWithDesc
value={values.groupSeparator}
description={'Group separator character'}
onOwnChange={(value) => updateField('groupSeparator', value)}
/>
<TextFieldWithDesc
value={values.leftWrap}
description={"Group's left wrap symbol."}
onOwnChange={(value) => updateField('leftWrap', value)}
/>
<TextFieldWithDesc
value={values.rightWrap}
description={"Group's right wrap symbol."}
onOwnChange={(value) => updateField('rightWrap', value)}
/>
</Box>
)
},
{
title: 'Empty Items and Padding',
component: (
<Box>
<CheckboxWithDesc
title={'Delete Empty Items'}
description={
"Ignore empty items and don't include them in the groups."
}
checked={values.deleteEmptyItems}
onChange={(value) => updateField('deleteEmptyItems', value)}
/>
<CheckboxWithDesc
title={'Pad Non-full Groups'}
description={
'Fill non-full groups with a custom item (enter below).'
}
checked={values.padNonFullGroup}
onChange={(value) => updateField('padNonFullGroup', value)}
/>
<TextFieldWithDesc
value={values.paddingChar}
description={
'Use this character or item to pad non-full groups.'
}
onOwnChange={(value) => updateField('paddingChar', value)}
/>
</Box>
)
}
]}
initialValues={initialValues}
input={input}
/>
</Box>
]}
compute={compute}
setInput={setInput}
/>
);
}

5
src/pages/tools/list/group/meta.ts
View File

@@ -1,13 +1,12 @@
import { defineTool } from '@tools/defineTool';
import { lazy } from 'react';
// import image from '@assets/text.png';
export const tool = defineTool('list', {
name: 'Group',
path: 'group',
icon: 'pajamas:group',
description: '',
shortDescription: '',
description: "World's simplest browser-based utility for grouping list items. Input your list and specify grouping criteria to organize items into logical groups. Perfect for categorizing data, organizing information, or creating structured lists. Supports custom separators and various grouping options.",
shortDescription: 'Group list items by common properties',
keywords: ['group'],
component: lazy(() => import('./index'))
});

8
src/pages/tools/list/index.ts
View File

@@ -17,9 +17,9 @@ export const listTools = [
listFindUnique,
listFindMostPopular,
listGroup,
// listWrap,
listWrap,
listRotate,
listShuffle
// listTruncate,
// listDuplicate
listShuffle,
listTruncate,
listDuplicate
];

150
src/pages/tools/list/rotate/index.tsx
View File

@@ -2,12 +2,12 @@ import { Box } from '@mui/material';
import React, { useState } from 'react';
import ToolTextInput from '@components/input/ToolTextInput';
import ToolTextResult from '@components/result/ToolTextResult';
import ToolOptions from '@components/options/ToolOptions';
import { rotateList, 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 ToolContent from '@components/ToolContent';
import { ToolComponentProps } from '@tools/defineTool';
const initialValues = {
splitOperatorType: 'symbol' as SplitOperatorType,
@@ -52,7 +52,7 @@ const rotationDirections: {
}
];
export default function Rotate() {
export default function Rotate({ title }: ToolComponentProps) {
const [input, setInput] = useState<string>('');
const [result, setResult] = useState<string>('');
const compute = (optionsValues: typeof initialValues, input: any) => {
@@ -72,82 +72,74 @@ export default function Rotate() {
};
return (
<Box>
<ToolInputAndResult
input={
<ToolTextInput
title={'Input list'}
value={input}
onChange={setInput}
/>
<ToolContent
title={title}
input={input}
inputComponent={
<ToolTextInput title={'Input list'} value={input} onChange={setInput} />
}
resultComponent={<ToolTextResult title={'Rotated list'} value={result} />}
initialValues={initialValues}
getGroups={({ values, updateField }) => [
{
title: 'Item split mode',
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: 'Rotation Direction and Count',
component: (
<Box>
{rotationDirections.map(({ title, description, value }) => (
<SimpleRadio
key={`${value}`}
onClick={() => updateField('right', value)}
title={title}
description={description}
checked={values.right === value}
/>
))}
<TextFieldWithDesc
description={'Number of items to rotate'}
value={values.step}
onOwnChange={(val) => updateField('step', formatNumber(val, 1))}
/>
</Box>
)
},
{
title: 'Rotated List Joining Symbol',
component: (
<Box>
<TextFieldWithDesc
value={values.joinSeparator}
onOwnChange={(value) => updateField('joinSeparator', value)}
description={
'Enter the character that goes between items in the rotated list.'
}
/>
</Box>
)
}
result={<ToolTextResult title={'Rotated list'} value={result} />}
/>
<ToolOptions
compute={compute}
getGroups={({ values, updateField }) => [
{
title: 'Item split mode',
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: 'Rotation Direction and Count',
component: (
<Box>
{rotationDirections.map(({ title, description, value }) => (
<SimpleRadio
key={`${value}`}
onClick={() => updateField('right', value)}
title={title}
description={description}
checked={values.right === value}
/>
))}
<TextFieldWithDesc
description={'Number of items to rotate'}
value={values.step}
onOwnChange={(val) =>
updateField('step', formatNumber(val, 1))
}
/>
</Box>
)
},
{
title: 'Rotated List Joining Symbol',
component: (
<Box>
<TextFieldWithDesc
value={values.joinSeparator}
onOwnChange={(value) => updateField('joinSeparator', value)}
description={
'Enter the character that goes between items in the rotated list.'
}
/>
</Box>
)
}
]}
initialValues={initialValues}
input={input}
/>
</Box>
]}
compute={compute}
setInput={setInput}
/>
);
}

5
src/pages/tools/list/rotate/meta.ts
View File

@@ -6,8 +6,9 @@ export const tool = defineTool('list', {
name: 'Rotate',
path: 'rotate',
icon: 'material-symbols-light:rotate-right',
description: '',
shortDescription: '',
description:
'A tool to rotate items in a list by a specified number of positions. Shift elements left or right while maintaining their relative order.',
shortDescription: 'Shift list items by position.',
keywords: ['rotate'],
component: lazy(() => import('./index'))
});

127
src/pages/tools/list/shuffle/index.tsx
View File

@@ -2,12 +2,11 @@ import { Box } from '@mui/material';
import React, { useState } from 'react';
import ToolTextInput from '@components/input/ToolTextInput';
import ToolTextResult from '@components/result/ToolTextResult';
import ToolOptions from '@components/options/ToolOptions';
import ToolContent from '@components/ToolContent';
import { shuffleList, SplitOperatorType } from './service';
import ToolInputAndResult from '@components/ToolInputAndResult';
import SimpleRadio from '@components/options/SimpleRadio';
import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
import { isNumber } from '../../../../utils/string';
import { isNumber } from '@utils/string';
const initialValues = {
splitOperatorType: 'symbol' as SplitOperatorType,
@@ -51,69 +50,65 @@ export default function Shuffle() {
};
return (
<Box>
<ToolInputAndResult
input={
<ToolTextInput
title={'Input list'}
value={input}
onChange={setInput}
/>
<ToolContent
title="Shuffle"
initialValues={initialValues}
compute={compute}
input={input}
setInput={setInput}
inputComponent={
<ToolTextInput title={'Input list'} value={input} onChange={setInput} />
}
resultComponent={
<ToolTextResult title={'Shuffled list'} value={result} />
}
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>
)
}
result={<ToolTextResult title={'Shuffled 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}
/>
</Box>
]}
/>
);
}

5
src/pages/tools/list/shuffle/meta.ts
View File

@@ -6,8 +6,9 @@ export const tool = defineTool('list', {
name: 'Shuffle',
path: 'shuffle',
icon: 'material-symbols-light:shuffle',
description: '',
shortDescription: '',
description:
'A tool to randomly reorder items in a list. Perfect for randomizing data, creating random selections, or generating random sequences.',
shortDescription: 'Randomly reorder list items.',
keywords: ['shuffle'],
component: lazy(() => import('./index'))
});

4
src/pages/tools/list/shuffle/shuffle.service.test.ts
View File

@@ -31,7 +31,6 @@ describe('shuffle function', () => {
joinSeparator,
length
);
console.log(result);
expect(result.split(joinSeparator).length).toBe(2);
});
@@ -49,7 +48,6 @@ describe('shuffle function', () => {
joinSeparator,
length
);
console.log(result);
expect(result.split(joinSeparator).length).toBe(4);
});
@@ -66,7 +64,6 @@ describe('shuffle function', () => {
joinSeparator,
length
);
console.log(result);
expect(result.split(joinSeparator)).toContain('apple');
});
@@ -83,7 +80,6 @@ describe('shuffle function', () => {
joinSeparator,
length
);
console.log(result);
expect(result).toBe('');
});
});

190
src/pages/tools/list/sort/index.tsx
View File

@@ -2,13 +2,13 @@ import { Box } from '@mui/material';
import React, { useState } from 'react';
import ToolTextInput from '@components/input/ToolTextInput';
import ToolTextResult from '@components/result/ToolTextResult';
import ToolOptions from '@components/options/ToolOptions';
import { Sort, SortingMethod, SplitOperatorType } from './service';
import ToolInputAndResult from '@components/ToolInputAndResult';
import SimpleRadio from '@components/options/SimpleRadio';
import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
import SelectWithDesc from '@components/options/SelectWithDesc';
import ToolContent from '@components/ToolContent';
import { ToolComponentProps } from '@tools/defineTool';
const initialValues = {
splitSeparatorType: 'symbol' as SplitOperatorType,
@@ -36,7 +36,7 @@ const splitOperators: {
}
];
export default function SplitText() {
export default function SplitText({ title }: ToolComponentProps) {
const [input, setInput] = useState<string>('');
const [result, setResult] = useState<string>('');
const compute = (optionsValues: typeof initialValues, input: any) => {
@@ -65,101 +65,95 @@ export default function SplitText() {
};
return (
<Box>
<ToolInputAndResult
input={
<ToolTextInput
title={'Input list'}
value={input}
onChange={setInput}
/>
<ToolContent
title={title}
input={input}
inputComponent={
<ToolTextInput title={'Input list'} value={input} onChange={setInput} />
}
resultComponent={<ToolTextResult title={'Sorted list'} value={result} />}
initialValues={initialValues}
getGroups={({ values, updateField }) => [
{
title: 'Input item separator',
component: (
<Box>
{splitOperators.map(({ title, description, type }) => (
<SimpleRadio
key={type}
onClick={() => updateField('splitSeparatorType', type)}
title={title}
description={description}
checked={values.splitSeparatorType === type}
/>
))}
<TextFieldWithDesc
description={'Set a delimiting symbol or regular expression.'}
value={values.splitSeparator}
onOwnChange={(val) => updateField('splitSeparator', val)}
/>
</Box>
)
},
{
title: 'Sort method',
component: (
<Box>
<SelectWithDesc
selected={values.sortingMethod}
options={[
{ label: 'Sort Alphabetically', value: 'alphabetic' },
{ label: 'Sort Numerically', value: 'numeric' },
{ label: 'Sort by Length', value: 'length' }
]}
onChange={(value) => updateField('sortingMethod', value)}
description={'Select a sorting method.'}
/>
<SelectWithDesc
selected={values.increasing}
options={[
{ label: 'Increasing order', value: true },
{ label: 'Decreasing order', value: false }
]}
onChange={(value) => {
updateField('increasing', value);
}}
description={'Select a sorting order.'}
/>
<CheckboxWithDesc
title={'Case Sensitive Sort'}
description={
'Sort uppercase and lowercase items separately. Capital letters precede lowercase letters in an ascending list. (Works only in alphabetical sorting mode.)'
}
checked={values.caseSensitive}
onChange={(val) => updateField('caseSensitive', val)}
/>
</Box>
)
},
{
title: 'Sorted item properties',
component: (
<Box>
<TextFieldWithDesc
description={
'Use this symbol as a joiner between items in a sorted list.'
}
value={values.joinSeparator}
onOwnChange={(val) => updateField('joinSeparator', val)}
/>
<CheckboxWithDesc
title={'Remove duplicates'}
description={'Delete duplicate list items.'}
checked={values.removeDuplicated}
onChange={(val) => updateField('removeDuplicated', val)}
/>
</Box>
)
}
result={<ToolTextResult title={'Sorted list'} value={result} />}
/>
<ToolOptions
compute={compute}
getGroups={({ values, updateField }) => [
{
title: 'Input item separator',
component: (
<Box>
{splitOperators.map(({ title, description, type }) => (
<SimpleRadio
key={type}
onClick={() => updateField('splitSeparatorType', type)}
title={title}
description={description}
checked={values.splitSeparatorType === type}
/>
))}
<TextFieldWithDesc
description={'Set a delimiting symbol or regular expression.'}
value={values.splitSeparator}
onOwnChange={(val) => updateField('splitSeparator', val)}
/>
</Box>
)
},
{
title: 'Sort method',
component: (
<Box>
<SelectWithDesc
selected={values.sortingMethod}
options={[
{ label: 'Sort Alphabetically', value: 'alphabetic' },
{ label: 'Sort Numerically', value: 'numeric' },
{ label: 'Sort by Length', value: 'length' }
]}
onChange={(value) => updateField('sortingMethod', value)}
description={'Select a sorting method.'}
/>
<SelectWithDesc
selected={values.increasing}
options={[
{ label: 'Increasing order', value: true },
{ label: 'Decreasing order', value: false }
]}
onChange={(value) => {
updateField('increasing', value);
}}
description={'Select a sorting order.'}
/>
<CheckboxWithDesc
title={'Case Sensitive Sort'}
description={
'Sort uppercase and lowercase items separately. Capital letters precede lowercase letters in an ascending list. (Works only in alphabetical sorting mode.)'
}
checked={values.caseSensitive}
onChange={(val) => updateField('caseSensitive', val)}
/>
</Box>
)
},
{
title: 'Sorted item properties',
component: (
<Box>
<TextFieldWithDesc
description={
'Use this symbol as a joiner between items in a sorted list.'
}
value={values.joinSeparator}
onOwnChange={(val) => updateField('joinSeparator', val)}
/>
<CheckboxWithDesc
title={'Remove duplicates'}
description={'Delete duplicate list items.'}
checked={values.removeDuplicated}
onChange={(val) => updateField('removeDuplicated', val)}
/>
</Box>
)
}
]}
initialValues={initialValues}
input={input}
/>
</Box>
]}
compute={compute}
setInput={setInput}
/>
);
}

192
src/pages/tools/list/truncate/index.tsx
View File

@@ -1,11 +1,189 @@
import React, { useState } from 'react';
import { Box } from '@mui/material';
import React from 'react';
import ToolContent from '@components/ToolContent';
import ToolTextInput from '@components/input/ToolTextInput';
import ToolTextResult from '@components/result/ToolTextResult';
import { SplitOperatorType, truncateList } from './service';
import { CardExampleType } from '@components/examples/ToolExamples';
import { ToolComponentProps } from '@tools/defineTool';
import { GetGroupsType } from '@components/options/ToolOptions';
import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
import SimpleRadio from '@components/options/SimpleRadio';
import * as Yup from 'yup';
const initialValues = {};
const validationSchema = Yup.object({
// splitSeparator: Yup.string().required('The separator is required')
});
export default function Truncate() {
return <Box>Lorem ipsum</Box>;
interface InitialValuesType {
splitOperatorType: SplitOperatorType;
splitSeparator: string;
joinSeparator: string;
end: boolean;
length: string;
}
const initialValues: InitialValuesType = {
splitOperatorType: 'symbol',
splitSeparator: ',',
joinSeparator: ',',
end: true,
length: '3'
};
const validationSchema = Yup.object({
splitSeparator: Yup.string().required('The separator is required'),
joinSeparator: Yup.string().required('The join separator is required'),
length: Yup.number()
.typeError('Length must be a number')
.min(0, 'Length must be a positive number')
.required('Length is required')
});
const exampleCards: CardExampleType<InitialValuesType>[] = [
{
title: 'Keep first 3 items in a list',
description:
'This example shows how to keep only the first 3 items in a comma-separated list.',
sampleText: 'apple, pineapple, lemon, orange, mango',
sampleResult: 'apple,pineapple,lemon',
sampleOptions: {
splitOperatorType: 'symbol',
splitSeparator: ', ',
joinSeparator: ',',
end: true,
length: '3'
}
},
{
title: 'Keep last 2 items in a list',
description:
'This example shows how to keep only the last 2 items in a comma-separated list.',
sampleText: 'apple, pineapple, lemon, orange, mango',
sampleResult: 'orange,mango',
sampleOptions: {
splitOperatorType: 'symbol',
splitSeparator: ', ',
joinSeparator: ',',
end: false,
length: '2'
}
},
{
title: 'Truncate a list with custom separators',
description:
'This example shows how to truncate a list with custom separators.',
sampleText: 'apple | pineapple | lemon | orange | mango',
sampleResult: 'apple - pineapple - lemon',
sampleOptions: {
splitOperatorType: 'symbol',
splitSeparator: ' | ',
joinSeparator: ' - ',
end: true,
length: '3'
}
}
];
export default function Truncate({ title }: ToolComponentProps) {
const [input, setInput] = useState<string>('');
const [result, setResult] = useState<string>('');
const compute = (optionsValues: InitialValuesType, input: string) => {
if (input) {
try {
const length = parseInt(optionsValues.length, 10);
setResult(
truncateList(
optionsValues.splitOperatorType,
input,
optionsValues.splitSeparator,
optionsValues.joinSeparator,
optionsValues.end,
length
)
);
} catch (error) {
if (error instanceof Error) {
setResult(`Error: ${error.message}`);
} else {
setResult('An unknown error occurred');
}
}
}
};
const getGroups: GetGroupsType<InitialValuesType> = ({
values,
updateField
}) => [
{
title: 'Split Options',
component: (
<Box>
<SimpleRadio
onClick={() => updateField('splitOperatorType', 'symbol')}
checked={values.splitOperatorType === 'symbol'}
title={'Split by Symbol'}
/>
<SimpleRadio
onClick={() => updateField('splitOperatorType', 'regex')}
checked={values.splitOperatorType === 'regex'}
title={'Split by Regular Expression'}
/>
<TextFieldWithDesc
value={values.splitSeparator}
onOwnChange={(val) => updateField('splitSeparator', val)}
description={'Separator to split the list'}
/>
<TextFieldWithDesc
value={values.joinSeparator}
onOwnChange={(val) => updateField('joinSeparator', val)}
description={'Separator to join the truncated list'}
/>
</Box>
)
},
{
title: 'Truncation Options',
component: (
<Box>
<TextFieldWithDesc
value={values.length}
onOwnChange={(val) => updateField('length', val)}
description={'Number of items to keep'}
type="number"
/>
<SimpleRadio
onClick={() => updateField('end', true)}
checked={values.end}
title={'Keep items from the beginning'}
/>
<SimpleRadio
onClick={() => updateField('end', false)}
checked={!values.end}
title={'Keep items from the end'}
/>
</Box>
)
}
];
return (
<ToolContent
title={title}
inputComponent={
<ToolTextInput title="Input List" value={input} onChange={setInput} />
}
resultComponent={<ToolTextResult title="Truncated List" value={result} />}
initialValues={initialValues}
getGroups={getGroups}
validationSchema={validationSchema}
toolInfo={{
title: 'List Truncation',
description:
"This tool allows you to truncate a list to a specific number of items. You can choose to keep items from the beginning or the end of the list, and specify custom separators for splitting and joining. It's useful for limiting the size of lists, creating previews, or extracting specific portions of data."
}}
exampleCards={exampleCards}
input={input}
setInput={setInput}
compute={compute}
/>
);
}

8
src/pages/tools/list/truncate/meta.ts
View File

@@ -1,13 +1,13 @@
import { defineTool } from '@tools/defineTool';
import { lazy } from 'react';
// import image from '@assets/text.png';
export const tool = defineTool('list', {
name: 'Truncate',
path: 'truncate',
icon: '',
description: '',
shortDescription: '',
icon: 'mdi:format-horizontal-align-right',
description:
"World's simplest browser-based utility for truncating lists. Quickly limit the number of items in your list by specifying a maximum length. Perfect for sampling data, creating previews, or managing large lists. Supports custom separators and various truncation options.",
shortDescription: 'Limit the number of items in a list',
keywords: ['truncate'],
component: lazy(() => import('./index'))
});

215
src/pages/tools/list/unwrap/index.tsx
View File

@@ -1,11 +1,212 @@
import React, { useState } from 'react';
import { Box } from '@mui/material';
import React from 'react';
import ToolContent from '@components/ToolContent';
import ToolTextInput from '@components/input/ToolTextInput';
import ToolTextResult from '@components/result/ToolTextResult';
import { SplitOperatorType, unwrapList } from './service';
import { CardExampleType } from '@components/examples/ToolExamples';
import { ToolComponentProps } from '@tools/defineTool';
import { GetGroupsType } from '@components/options/ToolOptions';
import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
import SimpleRadio from '@components/options/SimpleRadio';
import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
import * as Yup from 'yup';
const initialValues = {};
const validationSchema = Yup.object({
// splitSeparator: Yup.string().required('The separator is required')
});
export default function Unwrap() {
return <Box>Lorem ipsum</Box>;
interface InitialValuesType {
splitOperatorType: SplitOperatorType;
splitSeparator: string;
joinSeparator: string;
deleteEmptyItems: boolean;
multiLevel: boolean;
trimItems: boolean;
left: string;
right: string;
}
const initialValues: InitialValuesType = {
splitOperatorType: 'symbol',
splitSeparator: '\n',
joinSeparator: '\n',
deleteEmptyItems: true,
multiLevel: true,
trimItems: true,
left: '',
right: ''
};
const validationSchema = Yup.object({
splitSeparator: Yup.string().required('The separator is required'),
joinSeparator: Yup.string().required('The join separator is required')
});
const exampleCards: CardExampleType<InitialValuesType>[] = [
{
title: 'Unwrap quotes from list items',
description:
'This example shows how to remove quotes from each item in a list.',
sampleText: '"apple"\n"banana"\n"orange"',
sampleResult: 'apple\nbanana\norange',
sampleOptions: {
splitOperatorType: 'symbol',
splitSeparator: '\n',
joinSeparator: '\n',
deleteEmptyItems: true,
multiLevel: true,
trimItems: true,
left: '"',
right: '"'
}
},
{
title: 'Unwrap multiple levels of characters',
description:
'This example shows how to remove multiple levels of the same character from each item.',
sampleText: '###Hello###\n##World##\n#Test#',
sampleResult: 'Hello\nWorld\nTest',
sampleOptions: {
splitOperatorType: 'symbol',
splitSeparator: '\n',
joinSeparator: '\n',
deleteEmptyItems: true,
multiLevel: true,
trimItems: true,
left: '#',
right: '#'
}
},
{
title: 'Unwrap and join with custom separator',
description:
'This example shows how to unwrap items and join them with a custom separator.',
sampleText: '[item1]\n[item2]\n[item3]',
sampleResult: 'item1, item2, item3',
sampleOptions: {
splitOperatorType: 'symbol',
splitSeparator: '\n',
joinSeparator: ', ',
deleteEmptyItems: true,
multiLevel: false,
trimItems: true,
left: '[',
right: ']'
}
}
];
export default function Unwrap({ title }: ToolComponentProps) {
const [input, setInput] = useState<string>('');
const [result, setResult] = useState<string>('');
const compute = (optionsValues: InitialValuesType, input: string) => {
if (input) {
try {
setResult(
unwrapList(
optionsValues.splitOperatorType,
input,
optionsValues.splitSeparator,
optionsValues.joinSeparator,
optionsValues.deleteEmptyItems,
optionsValues.multiLevel,
optionsValues.trimItems,
optionsValues.left,
optionsValues.right
)
);
} catch (error) {
if (error instanceof Error) {
setResult(`Error: ${error.message}`);
} else {
setResult('An unknown error occurred');
}
}
}
};
const getGroups: GetGroupsType<InitialValuesType> = ({
values,
updateField
}) => [
{
title: 'Split Options',
component: (
<Box>
<SimpleRadio
onClick={() => updateField('splitOperatorType', 'symbol')}
checked={values.splitOperatorType === 'symbol'}
title={'Split by Symbol'}
/>
<SimpleRadio
onClick={() => updateField('splitOperatorType', 'regex')}
checked={values.splitOperatorType === 'regex'}
title={'Split by Regular Expression'}
/>
<TextFieldWithDesc
value={values.splitSeparator}
onOwnChange={(val) => updateField('splitSeparator', val)}
description={'Separator to split the list'}
/>
<TextFieldWithDesc
value={values.joinSeparator}
onOwnChange={(val) => updateField('joinSeparator', val)}
description={'Separator to join the unwrapped list'}
/>
</Box>
)
},
{
title: 'Unwrap Options',
component: (
<Box>
<TextFieldWithDesc
value={values.left}
onOwnChange={(val) => updateField('left', val)}
description={'Characters to remove from the left side'}
/>
<TextFieldWithDesc
value={values.right}
onOwnChange={(val) => updateField('right', val)}
description={'Characters to remove from the right side'}
/>
<CheckboxWithDesc
checked={values.multiLevel}
onChange={(checked) => updateField('multiLevel', checked)}
title={'Remove multiple levels of wrapping'}
/>
<CheckboxWithDesc
checked={values.trimItems}
onChange={(checked) => updateField('trimItems', checked)}
title={'Trim whitespace from items'}
/>
<CheckboxWithDesc
checked={values.deleteEmptyItems}
onChange={(checked) => updateField('deleteEmptyItems', checked)}
title={'Remove empty items'}
/>
</Box>
)
}
];
return (
<ToolContent
title={title}
inputComponent={
<ToolTextInput title="Input List" value={input} onChange={setInput} />
}
resultComponent={<ToolTextResult title="Unwrapped List" value={result} />}
initialValues={initialValues}
getGroups={getGroups}
validationSchema={validationSchema}
toolInfo={{
title: 'List Unwrapping',
description:
"This tool allows you to remove wrapping characters from each item in a list. You can specify characters to remove from the left and right sides, handle multiple levels of wrapping, and control how the list is processed. It's useful for cleaning up data, removing quotes or brackets, and formatting lists."
}}
exampleCards={exampleCards}
input={input}
setInput={setInput}
compute={compute}
/>
);
}

5
src/pages/tools/list/unwrap/meta.ts
View File

@@ -6,8 +6,9 @@ export const tool = defineTool('list', {
name: 'Unwrap',
path: 'unwrap',
icon: 'mdi:unwrap',
description: '',
shortDescription: '',
description:
'A tool to remove characters from the beginning and end of each item in a list. Perfect for cleaning up formatted data or removing unwanted wrappers.',
shortDescription: 'Remove characters around list items.',
keywords: ['unwrap'],
component: lazy(() => import('./index'))
});

194
src/pages/tools/list/wrap/index.tsx
View File

@@ -1,11 +1,191 @@
import React, { useState } from 'react';
import { Box } from '@mui/material';
import React from 'react';
import ToolContent from '@components/ToolContent';
import ToolTextInput from '@components/input/ToolTextInput';
import ToolTextResult from '@components/result/ToolTextResult';
import { SplitOperatorType, wrapList } from './service';
import { CardExampleType } from '@components/examples/ToolExamples';
import { ToolComponentProps } from '@tools/defineTool';
import { GetGroupsType } from '@components/options/ToolOptions';
import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
import SimpleRadio from '@components/options/SimpleRadio';
import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
import * as Yup from 'yup';
const initialValues = {};
const validationSchema = Yup.object({
// splitSeparator: Yup.string().required('The separator is required')
});
export default function Wrap() {
return <Box>Lorem ipsum</Box>;
interface InitialValuesType {
splitOperatorType: SplitOperatorType;
splitSeparator: string;
joinSeparator: string;
deleteEmptyItems: boolean;
left: string;
right: string;
}
const initialValues: InitialValuesType = {
splitOperatorType: 'symbol',
splitSeparator: ',',
joinSeparator: ',',
deleteEmptyItems: true,
left: '"',
right: '"'
};
const validationSchema = Yup.object({
splitSeparator: Yup.string().required('The separator is required'),
joinSeparator: Yup.string().required('The join separator is required')
});
const exampleCards: CardExampleType<InitialValuesType>[] = [
{
title: 'Wrap list items with quotes',
description:
'This example shows how to wrap each item in a list with quotes.',
sampleText: 'apple,banana,orange',
sampleResult: '"apple","banana","orange"',
sampleOptions: {
splitOperatorType: 'symbol',
splitSeparator: ',',
joinSeparator: ',',
deleteEmptyItems: true,
left: '"',
right: '"'
}
},
{
title: 'Wrap list items with brackets',
description:
'This example shows how to wrap each item in a list with brackets.',
sampleText: 'item1,item2,item3',
sampleResult: '[item1],[item2],[item3]',
sampleOptions: {
splitOperatorType: 'symbol',
splitSeparator: ',',
joinSeparator: ',',
deleteEmptyItems: true,
left: '[',
right: ']'
}
},
{
title: 'Wrap list items with custom text',
description:
'This example shows how to wrap each item with different text on each side.',
sampleText: 'apple,banana,orange',
sampleResult:
'prefix-apple-suffix,prefix-banana-suffix,prefix-orange-suffix',
sampleOptions: {
splitOperatorType: 'symbol',
splitSeparator: ',',
joinSeparator: ',',
deleteEmptyItems: true,
left: 'prefix-',
right: '-suffix'
}
}
];
export default function Wrap({ title }: ToolComponentProps) {
const [input, setInput] = useState<string>('');
const [result, setResult] = useState<string>('');
const compute = (optionsValues: InitialValuesType, input: string) => {
if (input) {
try {
setResult(
wrapList(
optionsValues.splitOperatorType,
input,
optionsValues.splitSeparator,
optionsValues.joinSeparator,
optionsValues.deleteEmptyItems,
optionsValues.left,
optionsValues.right
)
);
} catch (error) {
if (error instanceof Error) {
setResult(`Error: ${error.message}`);
} else {
setResult('An unknown error occurred');
}
}
}
};
const getGroups: GetGroupsType<InitialValuesType> = ({
values,
updateField
}) => [
{
title: 'Split Options',
component: (
<Box>
<SimpleRadio
onClick={() => updateField('splitOperatorType', 'symbol')}
checked={values.splitOperatorType === 'symbol'}
title={'Split by Symbol'}
/>
<SimpleRadio
onClick={() => updateField('splitOperatorType', 'regex')}
checked={values.splitOperatorType === 'regex'}
title={'Split by Regular Expression'}
/>
<TextFieldWithDesc
value={values.splitSeparator}
onOwnChange={(val) => updateField('splitSeparator', val)}
description={'Separator to split the list'}
/>
<TextFieldWithDesc
value={values.joinSeparator}
onOwnChange={(val) => updateField('joinSeparator', val)}
description={'Separator to join the wrapped list'}
/>
<CheckboxWithDesc
checked={values.deleteEmptyItems}
onChange={(checked) => updateField('deleteEmptyItems', checked)}
title={'Remove empty items'}
/>
</Box>
)
},
{
title: 'Wrap Options',
component: (
<Box>
<TextFieldWithDesc
value={values.left}
onOwnChange={(val) => updateField('left', val)}
description={'Text to add before each item'}
/>
<TextFieldWithDesc
value={values.right}
onOwnChange={(val) => updateField('right', val)}
description={'Text to add after each item'}
/>
</Box>
)
}
];
return (
<ToolContent
title={title}
inputComponent={
<ToolTextInput title="Input List" value={input} onChange={setInput} />
}
resultComponent={<ToolTextResult title="Wrapped List" value={result} />}
initialValues={initialValues}
getGroups={getGroups}
validationSchema={validationSchema}
toolInfo={{
title: 'List Wrapping',
description:
"This tool allows you to add text before and after each item in a list. You can specify different text for the left and right sides, and control how the list is processed. It's useful for adding quotes, brackets, or other formatting to list items, preparing data for different formats, or creating structured text."
}}
exampleCards={exampleCards}
input={input}
setInput={setInput}
compute={compute}
/>
);
}

7
src/pages/tools/list/wrap/meta.ts
View File

@@ -5,9 +5,10 @@ import { lazy } from 'react';
export const tool = defineTool('list', {
name: 'Wrap',
path: 'wrap',
icon: '',
description: '',
shortDescription: '',
icon: 'mdi:wrap',
description:
'A tool to wrap each item in a list with custom prefix and suffix characters. Useful for formatting lists for code, markup languages, or presentation.',
shortDescription: 'Add characters around list items.',
keywords: ['wrap'],
component: lazy(() => import('./index'))
});

29
src/pages/tools/number/arithmetic-sequence/arithmetic-sequence.service.test.ts Normal file
View File

@@ -0,0 +1,29 @@
import { describe, expect, it } from 'vitest';
import { generateArithmeticSequence } from './service';
describe('generateArithmeticSequence', () => {
it('should generate basic arithmetic sequence', () => {
const result = generateArithmeticSequence(1, 2, 5, ', ');
expect(result).toBe('1, 3, 5, 7, 9');
});
it('should handle negative first term', () => {
const result = generateArithmeticSequence(-5, 2, 5, ' ');
expect(result).toBe('-5 -3 -1 1 3');
});
it('should handle negative common difference', () => {
const result = generateArithmeticSequence(10, -2, 5, ',');
expect(result).toBe('10,8,6,4,2');
});
it('should handle decimal numbers', () => {
const result = generateArithmeticSequence(1.5, 0.5, 4, ' ');
expect(result).toBe('1.5 2 2.5 3');
});
it('should handle single term sequence', () => {
const result = generateArithmeticSequence(1, 2, 1, ',');
expect(result).toBe('1');
});
});

138
src/pages/tools/number/arithmetic-sequence/index.tsx Normal file
View File

@@ -0,0 +1,138 @@
import { Box } from '@mui/material';
import React, { useState } from 'react';
import ToolContent from '@components/ToolContent';
import ToolTextResult from '@components/result/ToolTextResult';
import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
import { generateArithmeticSequence } from './service';
import * as Yup from 'yup';
import { CardExampleType } from '@components/examples/ToolExamples';
import { ToolComponentProps } from '@tools/defineTool';
type InitialValuesType = {
firstTerm: string;
commonDifference: string;
numberOfTerms: string;
separator: string;
};
const initialValues: InitialValuesType = {
firstTerm: '1',
commonDifference: '2',
numberOfTerms: '10',
separator: ', '
};
const validationSchema = Yup.object({
firstTerm: Yup.number().required('First term is required'),
commonDifference: Yup.number().required('Common difference is required'),
numberOfTerms: Yup.number()
.min(1, 'Must generate at least 1 term')
.max(1000, 'Maximum 1000 terms allowed')
.required('Number of terms is required'),
separator: Yup.string().required('Separator is required')
});
const exampleCards: CardExampleType<InitialValuesType>[] = [
{
title: 'Basic Arithmetic Sequence',
description:
'Generate a sequence starting at 1, increasing by 2, for 5 terms',
sampleOptions: {
firstTerm: '1',
commonDifference: '2',
numberOfTerms: '5',
separator: ', '
},
sampleResult: '1, 3, 5, 7, 9'
},
{
title: 'Negative Sequence',
description: 'Generate a decreasing sequence starting at 10',
sampleOptions: {
firstTerm: '10',
commonDifference: '-3',
numberOfTerms: '4',
separator: ' → '
},
sampleResult: '10 → 7 → 4 → 1'
},
{
title: 'Decimal Sequence',
description: 'Generate a sequence with decimal numbers',
sampleOptions: {
firstTerm: '0.5',
commonDifference: '0.5',
numberOfTerms: '6',
separator: ' '
},
sampleResult: '0.5 1 1.5 2 2.5 3'
}
];
export default function ArithmeticSequence({ title }: ToolComponentProps) {
const [result, setResult] = useState<string>('');
return (
<ToolContent
title={title}
inputComponent={null}
resultComponent={
<ToolTextResult title="Generated Sequence" value={result} />
}
initialValues={initialValues}
validationSchema={validationSchema}
exampleCards={exampleCards}
toolInfo={{
title: 'What is an Arithmetic Sequence?',
description:
'An arithmetic sequence is a sequence of numbers where the difference between each consecutive term is constant. This constant difference is called the common difference. Given the first term (a₁) and the common difference (d), each term can be found by adding the common difference to the previous term.'
}}
getGroups={({ values, updateField }) => [
{
title: 'Sequence Parameters',
component: (
<Box>
<TextFieldWithDesc
description="First term of the sequence (a₁)"
value={values.firstTerm}
onOwnChange={(val) => updateField('firstTerm', val)}
type="number"
/>
<TextFieldWithDesc
description="Common difference between terms (d)"
value={values.commonDifference}
onOwnChange={(val) => updateField('commonDifference', val)}
type="number"
/>
<TextFieldWithDesc
description="Number of terms to generate (n)"
value={values.numberOfTerms}
onOwnChange={(val) => updateField('numberOfTerms', val)}
type="number"
/>
</Box>
)
},
{
title: 'Output Format',
component: (
<TextFieldWithDesc
description="Separator between terms"
value={values.separator}
onOwnChange={(val) => updateField('separator', val)}
/>
)
}
]}
compute={(values) => {
const sequence = generateArithmeticSequence(
Number(values.firstTerm),
Number(values.commonDifference),
Number(values.numberOfTerms),
values.separator
);
setResult(sequence);
}}
/>
);
}

21
src/pages/tools/number/arithmetic-sequence/meta.ts Normal file
View File

@@ -0,0 +1,21 @@
import { defineTool } from '@tools/defineTool';
import { lazy } from 'react';
export const tool = defineTool('number', {
name: 'Generate Arithmetic Sequence',
path: 'arithmetic-sequence',
icon: 'ic:sharp-plus',
description:
'Generate an arithmetic sequence by specifying the first term (a₁), common difference (d), and number of terms (n). The tool creates a sequence where each number differs from the previous by a constant difference.',
shortDescription:
'Generate a sequence where each term differs by a constant value.',
keywords: [
'arithmetic',
'sequence',
'progression',
'numbers',
'series',
'generate'
],
component: lazy(() => import('./index'))
});

13
src/pages/tools/number/arithmetic-sequence/service.ts Normal file
View File

@@ -0,0 +1,13 @@
export function generateArithmeticSequence(
firstTerm: number,
commonDifference: number,
numberOfTerms: number,
separator: string
): string {
const sequence: number[] = [];
for (let i = 0; i < numberOfTerms; i++) {
const term = firstTerm + i * commonDifference;
sequence.push(term);
}
return sequence.join(separator);
}

121
src/pages/tools/number/generate/index.tsx
View File

@@ -1,10 +1,10 @@
import { Box } from '@mui/material';
import React, { useState } from 'react';
import ToolTextResult from '@components/result/ToolTextResult';
import ToolOptions from '@components/options/ToolOptions';
import { listOfIntegers } from './service';
import ToolInputAndResult from '@components/ToolInputAndResult';
import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
import ToolContent from '@components/ToolContent';
import { ToolComponentProps } from '@tools/defineTool';
const initialValues = {
firstValue: '1',
@@ -12,68 +12,69 @@ const initialValues = {
step: '1',
separator: '\\n'
};
export default function SplitText() {
export default function GenerateNumbers({ title }: ToolComponentProps) {
const [result, setResult] = useState<string>('');
const compute = (optionsValues: typeof initialValues) => {
const { firstValue, numberOfNumbers, separator, step } = optionsValues;
setResult(
listOfIntegers(
Number(firstValue),
Number(numberOfNumbers),
Number(step),
separator
)
);
};
return (
<Box>
<ToolInputAndResult
result={<ToolTextResult title={'Total'} value={result} />}
/>
<ToolOptions
getGroups={({ values, updateField }) => [
{
title: 'Arithmetic sequence option',
component: (
<Box>
<TextFieldWithDesc
description={'Start sequence from this number.'}
value={values.firstValue}
onOwnChange={(val) => updateField('firstValue', val)}
type={'number'}
/>
<TextFieldWithDesc
description={'Increase each element by this amount'}
value={values.step}
onOwnChange={(val) => updateField('step', val)}
type={'number'}
/>
<TextFieldWithDesc
description={'Number of elements in sequence.'}
value={values.numberOfNumbers}
onOwnChange={(val) => updateField('numberOfNumbers', val)}
type={'number'}
/>
</Box>
)
},
{
title: 'Separator',
component: (
<ToolContent
title={title}
initialValues={initialValues}
getGroups={({ values, updateField }) => [
{
title: 'Arithmetic sequence option',
component: (
<Box>
<TextFieldWithDesc
description={
'Separate elements in the arithmetic sequence by this character.'
}
value={values.separator}
onOwnChange={(val) => updateField('separator', val)}
description={'Start sequence from this number.'}
value={values.firstValue}
onOwnChange={(val) => updateField('firstValue', val)}
type={'number'}
/>
)
}
]}
compute={(optionsValues) => {
const { firstValue, numberOfNumbers, separator, step } =
optionsValues;
setResult(
listOfIntegers(
Number(firstValue),
Number(numberOfNumbers),
Number(step),
separator
)
);
}}
initialValues={initialValues}
/>
</Box>
<TextFieldWithDesc
description={'Increase each element by this amount'}
value={values.step}
onOwnChange={(val) => updateField('step', val)}
type={'number'}
/>
<TextFieldWithDesc
description={'Number of elements in sequence.'}
value={values.numberOfNumbers}
onOwnChange={(val) => updateField('numberOfNumbers', val)}
type={'number'}
/>
</Box>
)
},
{
title: 'Separator',
component: (
<TextFieldWithDesc
description={
'Separate elements in the arithmetic sequence by this character.'
}
value={values.separator}
onOwnChange={(val) => updateField('separator', val)}
/>
)
}
]}
compute={compute}
resultComponent={
<ToolTextResult title={'Generated numbers'} value={result} />
}
/>
);
}

3
src/pages/tools/number/index.ts
View File

@@ -1,4 +1,5 @@
import { tool as numberSum } from './sum/meta';
import { tool as numberGenerate } from './generate/meta';
import { tool as numberArithmeticSequence } from './arithmetic-sequence/meta';
export const numberTools = [numberSum, numberGenerate];
export const numberTools = [numberSum, numberGenerate, numberArithmeticSequence];

62
src/pages/tools/number/sum/index.tsx
View File

@@ -1,20 +1,14 @@
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 ToolOptions, { GetGroupsType } from '@components/options/ToolOptions';
import { GetGroupsType } from '@components/options/ToolOptions';
import { compute, NumberExtractionType } from './service';
import RadioWithTextField from '@components/options/RadioWithTextField';
import SimpleRadio from '@components/options/SimpleRadio';
import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
import ToolInputAndResult from '@components/ToolInputAndResult';
import ToolExamples, {
CardExampleType
} from '@components/examples/ToolExamples';
import ToolInfo from '@components/ToolInfo';
import Separator from '@components/Separator';
import { CardExampleType } from '@components/examples/ToolExamples';
import { ToolComponentProps } from '@tools/defineTool';
import { FormikProps } from 'formik';
import ToolContent from '@components/ToolContent';
const initialValues = {
extractionType: 'smart' as NumberExtractionType,
@@ -126,7 +120,6 @@ const exampleCards: CardExampleType<InitialValuesType>[] = [
export default function SumNumbers({ title }: ToolComponentProps) {
const [input, setInput] = useState<string>('');
const [result, setResult] = useState<string>('');
const formRef = useRef<FormikProps<typeof initialValues>>(null);
const getGroups: GetGroupsType<InitialValuesType> = ({
values,
@@ -175,33 +168,24 @@ export default function SumNumbers({ title }: ToolComponentProps) {
}
];
return (
<Box>
<ToolInputAndResult
input={<ToolTextInput value={input} onChange={setInput} />}
result={<ToolTextResult title={'Total'} value={result} />}
/>
<ToolOptions
formRef={formRef}
getGroups={getGroups}
compute={(optionsValues, input) => {
const { extractionType, printRunningSum, separator } = optionsValues;
setResult(compute(input, extractionType, printRunningSum, separator));
}}
initialValues={initialValues}
input={input}
/>
<ToolInfo
title="What Is a Number Sum Calculator?"
description="This is an online browser-based utility for calculating the sum of a bunch of numbers. You can enter the numbers separated by a comma, space, or any other character, including the line break. You can also simply paste a fragment of textual data that contains numerical values that you want to sum up and the utility will extract them and find their sum."
/>
<Separator backgroundColor="#5581b5" margin="50px" />
<ToolExamples
title={title}
exampleCards={exampleCards}
getGroups={getGroups}
formRef={formRef}
setInput={setInput}
/>
</Box>
<ToolContent
title={title}
input={input}
inputComponent={<ToolTextInput value={input} onChange={setInput} />}
resultComponent={<ToolTextResult title={'Total'} value={result} />}
initialValues={initialValues}
getGroups={getGroups}
compute={(optionsValues, input) => {
const { extractionType, printRunningSum, separator } = optionsValues;
setResult(compute(input, extractionType, printRunningSum, separator));
}}
setInput={setInput}
toolInfo={{
title: 'What Is a Number Sum Calculator?',
description:
'This is an online browser-based utility for calculating the sum of a bunch of numbers. You can enter the numbers separated by a comma, space, or any other character, including the line break. You can also simply paste a fragment of textual data that contains numerical values that you want to sum up and the utility will extract them and find their sum.'
}}
exampleCards={exampleCards}
/>
);
}

120
src/pages/tools/string/create-palindrome/index.tsx
View File

@@ -1,11 +1,113 @@
import { Box } from '@mui/material';
import React from 'react';
import * as Yup from 'yup';
import React, { useState } from 'react';
import ToolTextInput from '@components/input/ToolTextInput';
import ToolTextResult from '@components/result/ToolTextResult';
import { GetGroupsType } from '@components/options/ToolOptions';
import { createPalindromeList } from './service';
import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
import { CardExampleType } from '@components/examples/ToolExamples';
import { ToolComponentProps } from '@tools/defineTool';
import ToolContent from '@components/ToolContent';
const initialValues = {};
const validationSchema = Yup.object({
// splitSeparator: Yup.string().required('The separator is required')
});
export default function CreatePalindrome() {
return <Box>Lorem ipsum</Box>;
const initialValues = {
lastChar: true,
multiLine: false
};
const exampleCards: CardExampleType<typeof initialValues>[] = [
{
title: 'Create Simple Palindrome',
description:
'Creates a palindrome by repeating the text in reverse order, including the last character.',
sampleText: 'level',
sampleResult: 'levellevel',
sampleOptions: {
...initialValues,
lastChar: true
}
},
{
title: 'Create Palindrome Without Last Character Duplication',
description:
'Creates a palindrome without repeating the last character in the reverse part.',
sampleText: 'radar',
sampleResult: 'radarada',
sampleOptions: {
...initialValues,
lastChar: false
}
},
{
title: 'Multi-line Palindrome Creation',
description: 'Creates palindromes for each line independently.',
sampleText: 'mom\ndad\nwow',
sampleResult: 'mommom\ndaddad\nwowwow',
sampleOptions: {
...initialValues,
lastChar: true,
multiLine: true
}
}
];
export default function CreatePalindrome({
title,
longDescription
}: ToolComponentProps) {
const [input, setInput] = useState<string>('');
const [result, setResult] = useState<string>('');
const computeExternal = (
optionsValues: typeof initialValues,
input: string
) => {
const { lastChar, multiLine } = optionsValues;
setResult(createPalindromeList(input, lastChar, multiLine));
};
const getGroups: GetGroupsType<typeof initialValues> = ({
values,
updateField
}) => [
{
title: 'Palindrome options',
component: [
<CheckboxWithDesc
key="lastChar"
checked={values.lastChar}
title="Include last character"
description="Repeat the last character in the reversed part"
onChange={(val) => updateField('lastChar', val)}
/>,
<CheckboxWithDesc
key="multiLine"
checked={values.multiLine}
title="Process multi-line text"
description="Create palindromes for each line independently"
onChange={(val) => updateField('multiLine', val)}
/>
]
}
];
return (
<ToolContent
title={title}
initialValues={initialValues}
getGroups={getGroups}
compute={computeExternal}
input={input}
setInput={setInput}
inputComponent={
<ToolTextInput title={'Input text'} value={input} onChange={setInput} />
}
resultComponent={
<ToolTextResult title={'Palindrome text'} value={result} />
}
toolInfo={{
title: 'What Is a String Palindrome Creator?',
description: longDescription
}}
exampleCards={exampleCards}
/>
);
}

9
src/pages/tools/string/create-palindrome/meta.ts
View File

@@ -5,9 +5,12 @@ import { lazy } from 'react';
export const tool = defineTool('string', {
name: 'Create palindrome',
path: 'create-palindrome',
icon: '',
description: '',
shortDescription: '',
icon: 'material-symbols-light:repeat',
description:
"World's simplest browser-based utility for creating palindromes from any text. Input text and instantly transform it into a palindrome that reads the same forward and backward. Perfect for word games, creating symmetrical text patterns, or exploring linguistic curiosities.",
shortDescription: 'Create text that reads the same forward and backward',
longDescription:
'This tool creates a palindrome from the given string. It does it by generating a copy of the string, reversing it, and appending it at the end of the original string. This method creates a palindrome with the last character duplicated twice. There is also another way to do it, which deletes the first letter of the reversed copy. In this case, when the string and the copy are joined together, you also get a palindrome but without the repeating last character. You can compare the two types of palindromes by switching between them in the options. You can also enable the multi-line mode that will create palindromes of every string on every line. Stringabulous!',
keywords: ['create', 'palindrome'],
component: lazy(() => import('./index'))
});

149
src/pages/tools/string/extract-substring/index.tsx
View File

@@ -1,11 +1,142 @@
import { Box } from '@mui/material';
import React from 'react';
import * as Yup from 'yup';
import React, { useState } from 'react';
import ToolTextInput from '@components/input/ToolTextInput';
import ToolTextResult from '@components/result/ToolTextResult';
import { GetGroupsType } from '@components/options/ToolOptions';
import { extractSubstring } from './service';
import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
import { CardExampleType } from '@components/examples/ToolExamples';
import { ToolComponentProps } from '@tools/defineTool';
import ToolContent from '@components/ToolContent';
const initialValues = {};
const validationSchema = Yup.object({
// splitSeparator: Yup.string().required('The separator is required')
});
export default function ExtractSubstring() {
return <Box>Lorem ipsum</Box>;
const initialValues = {
start: '1',
length: '5',
multiLine: false,
reverse: false
};
const exampleCards: CardExampleType<typeof initialValues>[] = [
{
title: 'Extract First 5 Characters',
description: 'This example extracts the first 5 characters from the text.',
sampleText: 'The quick brown fox jumps over the lazy dog.',
sampleResult: 'The q',
sampleOptions: {
...initialValues,
start: '1',
length: '5'
}
},
{
title: 'Extract Words from the Middle',
description:
'Extract a substring starting from position 11 with a length of 10 characters.',
sampleText: 'The quick brown fox jumps over the lazy dog.',
sampleResult: 'brown fox',
sampleOptions: {
...initialValues,
start: '11',
length: '10'
}
},
{
title: 'Multi-line Extraction with Reversal',
description: 'Extract characters 1-3 from each line and reverse them.',
sampleText: 'First line\nSecond line\nThird line',
sampleResult: 'riF\nceS\nihT',
sampleOptions: {
...initialValues,
start: '1',
length: '3',
multiLine: true,
reverse: true
}
}
];
export default function ExtractSubstring({ title }: ToolComponentProps) {
const [input, setInput] = useState<string>('');
const [result, setResult] = useState<string>('');
const computeExternal = (
optionsValues: typeof initialValues,
input: string
) => {
const { start, length, multiLine, reverse } = optionsValues;
try {
setResult(
extractSubstring(
input,
parseInt(start, 10),
parseInt(length, 10),
multiLine,
reverse
)
);
} catch (error) {
if (error instanceof Error) {
setResult(`Error: ${error.message}`);
} else {
setResult('An unknown error occurred');
}
}
};
const getGroups: GetGroupsType<typeof initialValues> = ({
values,
updateField
}) => [
{
title: 'Extraction options',
component: [
<TextFieldWithDesc
key="start"
value={values.start}
onOwnChange={(value) => updateField('start', value)}
description="Start position (1-based index)"
type="number"
/>,
<TextFieldWithDesc
key="length"
value={values.length}
onOwnChange={(value) => updateField('length', value)}
description="Number of characters to extract"
type="number"
/>,
<CheckboxWithDesc
key="multiLine"
checked={values.multiLine}
title="Process multi-line text"
description="Extract from each line independently"
onChange={(val) => updateField('multiLine', val)}
/>,
<CheckboxWithDesc
key="reverse"
checked={values.reverse}
title="Reverse output"
description="Reverse the extracted substring"
onChange={(val) => updateField('reverse', val)}
/>
]
}
];
return (
<ToolContent
title={title}
initialValues={initialValues}
getGroups={getGroups}
compute={computeExternal}
input={input}
setInput={setInput}
inputComponent={
<ToolTextInput title={'Input text'} value={input} onChange={setInput} />
}
resultComponent={
<ToolTextResult title={'Extracted text'} value={result} />
}
exampleCards={exampleCards}
/>
);
}

7
src/pages/tools/string/extract-substring/meta.ts
View File

@@ -5,9 +5,10 @@ import { lazy } from 'react';
export const tool = defineTool('string', {
name: 'Extract substring',
path: 'extract-substring',
icon: '',
description: '',
shortDescription: '',
icon: 'material-symbols-light:content-cut',
description:
"World's simplest browser-based utility for extracting substrings from text. Easily extract specific portions of text by specifying start position and length. Perfect for parsing data, isolating specific parts of text, or data extraction tasks. Supports multi-line text processing and character-level precision.",
shortDescription: 'Extract specific portions of text by position and length',
keywords: ['extract', 'substring'],
component: lazy(() => import('./index'))
});

17
src/pages/tools/string/index.ts
View File

@@ -22,11 +22,14 @@ export const stringTools = [
stringToMorse,
stringReplace,
stringRepeat,
stringTruncate
// stringReverse,
// stringRandomizeCase,
// stringUppercase,
// stringExtractSubstring,
// stringCreatePalindrome,
// stringPalindrome
stringTruncate,
stringReverse,
stringRandomizeCase,
stringUppercase,
stringExtractSubstring,
stringCreatePalindrome,
stringPalindrome,
stringQuote,
stringRotate,
stringRot13
];

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

@@ -1,20 +1,13 @@
import { Box } from '@mui/material';
import React, { useRef, useState } from 'react';
import React, { useState } from 'react';
import * as Yup from 'yup';
import ToolTextInput from '@components/input/ToolTextInput';
import ToolTextResult from '@components/result/ToolTextResult';
import ToolOptions, { GetGroupsType } from '@components/options/ToolOptions';
import ToolContent from '@components/ToolContent';
import { GetGroupsType } from '@components/options/ToolOptions';
import { mergeText } from './service';
import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
import ToolInputAndResult from '@components/ToolInputAndResult';
import ToolInfo from '@components/ToolInfo';
import Separator from '@components/Separator';
import ToolExamples, {
CardExampleType
} from '@components/examples/ToolExamples';
import { FormikProps } from 'formik';
import { CardExampleType } from '@components/examples/ToolExamples';
import { ToolComponentProps } from '@tools/defineTool';
const initialValues = {
@@ -116,7 +109,6 @@ s
export default function JoinText({ title }: ToolComponentProps) {
const [input, setInput] = useState<string>('');
const [result, setResult] = useState<string>('');
const formRef = useRef<FormikProps<InitialValuesType>>(null);
const compute = (optionsValues: InitialValuesType, input: any) => {
const { joinCharacter, deleteBlank, deleteTrailing } = optionsValues;
setResult(mergeText(input, deleteBlank, deleteTrailing, joinCharacter));
@@ -151,36 +143,27 @@ export default function JoinText({ title }: ToolComponentProps) {
}
];
return (
<Box>
<ToolInputAndResult
input={
<ToolTextInput
title={'Text Pieces'}
value={input}
onChange={setInput}
/>
}
result={<ToolTextResult title={'Joined Text'} value={result} />}
/>
<ToolOptions
formRef={formRef}
compute={compute}
getGroups={getGroups}
initialValues={initialValues}
input={input}
/>
<ToolInfo
title="What Is a Text Joiner?"
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" />
<ToolExamples
title={title}
exampleCards={exampleCards}
getGroups={getGroups}
formRef={formRef}
setInput={setInput}
/>
</Box>
<ToolContent
title={title}
initialValues={initialValues}
compute={compute}
input={input}
setInput={setInput}
inputComponent={
<ToolTextInput
title={'Text Pieces'}
value={input}
onChange={setInput}
/>
}
resultComponent={<ToolTextResult title={'Joined Text'} value={result} />}
getGroups={getGroups}
toolInfo={{
title: 'What Is a Text Joiner?',
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!'
}}
exampleCards={exampleCards}
/>
);
}

131
src/pages/tools/string/palindrome/index.tsx
View File

@@ -1,11 +1,126 @@
import { Box } from '@mui/material';
import React from 'react';
import * as Yup from 'yup';
import React, { useState, useRef } from 'react';
import ToolTextInput from '@components/input/ToolTextInput';
import ToolTextResult from '@components/result/ToolTextResult';
import ToolOptions, { GetGroupsType } from '@components/options/ToolOptions';
import { palindromeList, SplitOperatorType } from './service';
import RadioWithTextField from '@components/options/RadioWithTextField';
import ToolInputAndResult from '@components/ToolInputAndResult';
import ToolExamples, {
CardExampleType
} from '@components/examples/ToolExamples';
import { ToolComponentProps } from '@tools/defineTool';
import { FormikProps } from 'formik';
import ToolContent from '@components/ToolContent';
const initialValues = {};
const validationSchema = Yup.object({
// splitSeparator: Yup.string().required('The separator is required')
});
export default function Palindrome() {
return <Box>Lorem ipsum</Box>;
const initialValues = {
splitOperatorType: 'symbol' as SplitOperatorType,
symbolValue: ' ',
regexValue: '\\s+'
};
const splitOperators: {
title: string;
description: string;
type: SplitOperatorType;
}[] = [
{
title: 'Use a Symbol for Splitting',
description:
'Character that will be used to split text into parts for palindrome checking.',
type: 'symbol'
},
{
title: 'Use a Regex for Splitting',
type: 'regex',
description:
'Regular expression that will be used to split text into parts for palindrome checking.'
}
];
const exampleCards: CardExampleType<typeof initialValues>[] = [
{
title: 'Check for Word Palindromes',
description:
'Checks if each word in the text is a palindrome. Returns "true" for palindromes and "false" for non-palindromes.',
sampleText: 'radar level hello anna',
sampleResult: 'true true false true',
sampleOptions: {
...initialValues,
symbolValue: ' '
}
},
{
title: 'Check CSV Words',
description: 'Checks palindrome status for comma-separated words.',
sampleText: 'mom,dad,wow,test',
sampleResult: 'true true true false',
sampleOptions: {
...initialValues,
symbolValue: ','
}
},
{
title: 'Check with Regular Expression',
description:
'Use a regular expression to split text and check for palindromes.',
sampleText: 'level:madam;noon|test',
sampleResult: 'true true true false',
sampleOptions: {
...initialValues,
splitOperatorType: 'regex',
regexValue: '[:|;]|\\|'
}
}
];
export default function Palindrome({ title }: ToolComponentProps) {
const [input, setInput] = useState<string>('');
const [result, setResult] = useState<string>('');
const computeExternal = (
optionsValues: typeof initialValues,
input: string
) => {
const { splitOperatorType, symbolValue, regexValue } = optionsValues;
const separator = splitOperatorType === 'symbol' ? symbolValue : regexValue;
setResult(palindromeList(splitOperatorType, input, separator));
};
const getGroups: GetGroupsType<typeof initialValues> = ({
values,
updateField
}) => [
{
title: 'Splitting options',
component: splitOperators.map(({ title, description, type }) => (
<RadioWithTextField
key={type}
checked={type === values.splitOperatorType}
title={title}
fieldName={'splitOperatorType'}
description={description}
value={values[`${type}Value`]}
onRadioClick={() => updateField('splitOperatorType', type)}
onTextChange={(val) => updateField(`${type}Value`, val)}
/>
))
}
];
return (
<ToolContent
title={title}
initialValues={initialValues}
getGroups={getGroups}
compute={computeExternal}
input={input}
setInput={setInput}
inputComponent={<ToolTextInput value={input} onChange={setInput} />}
resultComponent={
<ToolTextResult title={'Palindrome results'} value={result} />
}
exampleCards={exampleCards}
/>
);
}

7
src/pages/tools/string/palindrome/meta.ts
View File

@@ -5,9 +5,10 @@ import { lazy } from 'react';
export const tool = defineTool('string', {
name: 'Palindrome',
path: 'palindrome',
icon: '',
description: '',
shortDescription: '',
icon: 'material-symbols-light:search',
description:
"World's simplest browser-based utility for checking if text is a palindrome. Instantly verify if your text reads the same forward and backward. Perfect for word puzzles, linguistic analysis, or validating symmetrical text patterns. Supports various delimiters and multi-word palindrome detection.",
shortDescription: 'Check if text reads the same forward and backward',
keywords: ['palindrome'],
component: lazy(() => import('./index'))
});

156
src/pages/tools/string/quote/index.tsx
View File

@@ -1,11 +1,149 @@
import React, { useState } from 'react';
import { Box } from '@mui/material';
import React from 'react';
import * as Yup from 'yup';
import ToolContent from '@components/ToolContent';
import ToolTextInput from '@components/input/ToolTextInput';
import ToolTextResult from '@components/result/ToolTextResult';
import { stringQuoter } from './service';
import { CardExampleType } from '@components/examples/ToolExamples';
import { ToolComponentProps } from '@tools/defineTool';
import { GetGroupsType } from '@components/options/ToolOptions';
import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
const initialValues = {};
const validationSchema = Yup.object({
// splitSeparator: Yup.string().required('The separator is required')
});
export default function Quote() {
return <Box>Lorem ipsum</Box>;
}
interface InitialValuesType {
leftQuote: string;
rightQuote: string;
doubleQuotation: boolean;
emptyQuoting: boolean;
multiLine: boolean;
}
const initialValues: InitialValuesType = {
leftQuote: '"',
rightQuote: '"',
doubleQuotation: false,
emptyQuoting: true,
multiLine: true
};
const exampleCards: CardExampleType<InitialValuesType>[] = [
{
title: 'Quote text with double quotes',
description: 'This example shows how to quote text with double quotes.',
sampleText: 'Hello World',
sampleResult: '"Hello World"',
sampleOptions: {
leftQuote: '"',
rightQuote: '"',
doubleQuotation: false,
emptyQuoting: true,
multiLine: false
}
},
{
title: 'Quote multi-line text with single quotes',
description:
'This example shows how to quote multi-line text with single quotes.',
sampleText: 'Hello\nWorld',
sampleResult: "'Hello'\n'World'",
sampleOptions: {
leftQuote: "'",
rightQuote: "'",
doubleQuotation: false,
emptyQuoting: true,
multiLine: true
}
},
{
title: 'Quote with custom quotes',
description: 'This example shows how to quote text with custom quotes.',
sampleText: 'Hello World',
sampleResult: '<<Hello World>>',
sampleOptions: {
leftQuote: '<<',
rightQuote: '>>',
doubleQuotation: false,
emptyQuoting: true,
multiLine: false
}
}
];
export default function Quote({ title }: ToolComponentProps) {
const [input, setInput] = useState<string>('');
const [result, setResult] = useState<string>('');
const compute = (optionsValues: InitialValuesType, input: string) => {
if (input) {
setResult(
stringQuoter(
input,
optionsValues.leftQuote,
optionsValues.rightQuote,
optionsValues.doubleQuotation,
optionsValues.emptyQuoting,
optionsValues.multiLine
)
);
}
};
const getGroups: GetGroupsType<InitialValuesType> = ({
values,
updateField
}) => [
{
title: 'Quote Options',
component: (
<Box>
<TextFieldWithDesc
value={values.leftQuote}
onOwnChange={(val) => updateField('leftQuote', val)}
description={'Left quote character(s)'}
/>
<TextFieldWithDesc
value={values.rightQuote}
onOwnChange={(val) => updateField('rightQuote', val)}
description={'Right quote character(s)'}
/>
<CheckboxWithDesc
checked={values.doubleQuotation}
onChange={(checked) => updateField('doubleQuotation', checked)}
title={'Allow double quotation'}
/>
<CheckboxWithDesc
checked={values.emptyQuoting}
onChange={(checked) => updateField('emptyQuoting', checked)}
title={'Quote empty lines'}
/>
<CheckboxWithDesc
checked={values.multiLine}
onChange={(checked) => updateField('multiLine', checked)}
title={'Process as multi-line text'}
/>
</Box>
)
}
];
return (
<ToolContent
title={title}
inputComponent={
<ToolTextInput title="Input Text" value={input} onChange={setInput} />
}
resultComponent={<ToolTextResult title="Quoted Text" value={result} />}
initialValues={initialValues}
getGroups={getGroups}
toolInfo={{
title: 'Text Quoter',
description:
"This tool allows you to add quotes around text. You can choose different quote characters, handle multi-line text, and control how empty lines are processed. It's useful for preparing text for programming, formatting data, or creating stylized text."
}}
exampleCards={exampleCards}
input={input}
setInput={setInput}
compute={compute}
/>
);
}

5
src/pages/tools/string/quote/meta.ts
View File

@@ -6,8 +6,9 @@ export const tool = defineTool('string', {
name: 'Quote',
path: 'quote',
icon: 'proicons:quote',
description: '',
shortDescription: '',
description:
'A tool to add quotation marks or custom characters around text. Perfect for formatting strings for code, citations, or stylistic purposes.',
shortDescription: 'Add quotes around text easily.',
keywords: ['quote'],
component: lazy(() => import('./index'))
});

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

@@ -1,11 +1,66 @@
import { Box } from '@mui/material';
import React from 'react';
import * as Yup from 'yup';
import React, { useState } from 'react';
import ToolTextInput from '@components/input/ToolTextInput';
import ToolTextResult from '@components/result/ToolTextResult';
import { randomizeCase } from './service';
import { CardExampleType } from '@components/examples/ToolExamples';
import { ToolComponentProps } from '@tools/defineTool';
import ToolContent from '@components/ToolContent';
const initialValues = {};
const validationSchema = Yup.object({
// splitSeparator: Yup.string().required('The separator is required')
});
export default function RandomizeCase() {
return <Box>Lorem ipsum</Box>;
const exampleCards: CardExampleType<typeof initialValues>[] = [
{
title: 'Randomize Text Case',
description:
'This example turns normal text into a random mix of uppercase and lowercase letters.',
sampleText: 'The quick brown fox jumps over the lazy dog.',
sampleResult: 'tHe qUIcK BrOWn fOx JuMPs ovEr ThE LaZy Dog.',
sampleOptions: {}
},
{
title: 'Randomize Code Case',
description:
'Transform code identifiers with randomized case for a chaotic look.',
sampleText:
'function calculateTotal(price, quantity) { return price * quantity; }',
sampleResult:
'FuNcTIon cAlCuLAtEtOtaL(pRicE, qUaNTiTy) { rETuRn PrICe * QuAnTiTY; }',
sampleOptions: {}
},
{
title: 'Randomize a Famous Quote',
description:
'Give a unique randomized case treatment to a well-known quote.',
sampleText: 'To be or not to be, that is the question.',
sampleResult: 'tO Be oR NoT To bE, ThAt iS ThE QueStIoN.',
sampleOptions: {}
}
];
export default function RandomizeCase({ title }: ToolComponentProps) {
const [input, setInput] = useState<string>('');
const [result, setResult] = useState<string>('');
const computeExternal = (
_optionsValues: typeof initialValues,
input: string
) => {
setResult(randomizeCase(input));
};
return (
<ToolContent
title={title}
initialValues={initialValues}
getGroups={null}
compute={computeExternal}
input={input}
setInput={setInput}
inputComponent={<ToolTextInput value={input} onChange={setInput} />}
resultComponent={
<ToolTextResult title={'Randomized text'} value={result} />
}
exampleCards={exampleCards}
/>
);
}

7
src/pages/tools/string/randomize-case/meta.ts
View File

@@ -5,9 +5,10 @@ import { lazy } from 'react';
export const tool = defineTool('string', {
name: 'Randomize case',
path: 'randomize-case',
icon: '',
description: '',
shortDescription: '',
icon: 'material-symbols-light:format-textdirection-l-to-r',
description:
"World's simplest browser-based utility for randomizing the case of text. Just paste your text and get it instantly transformed with random uppercase and lowercase letters. Perfect for creating playful text styles, meme text, or simulating chaotic writing.",
shortDescription: 'Convert text to random uppercase and lowercase letters',
keywords: ['randomize', 'case'],
component: lazy(() => import('./index'))
});

133
src/pages/tools/string/remove-duplicate-lines/index.tsx
View File

@@ -2,10 +2,8 @@ import { Box } from '@mui/material';
import React, { useRef, useState } from 'react';
import ToolTextInput from '@components/input/ToolTextInput';
import ToolTextResult from '@components/result/ToolTextResult';
import ToolOptions, { GetGroupsType } from '@components/options/ToolOptions';
import SimpleRadio from '@components/options/SimpleRadio';
import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
import ToolInputAndResult from '@components/ToolInputAndResult';
import ToolExamples, {
CardExampleType
} from '@components/examples/ToolExamples';
@@ -16,6 +14,7 @@ import removeDuplicateLines, {
DuplicateRemoverOptions,
NewlineOption
} from './service';
import ToolContent from '@components/ToolContent';
// Initial values for our form
const initialValues: DuplicateRemoverOptions = {
@@ -174,7 +173,6 @@ Elderberry`,
export default function RemoveDuplicateLines({ title }: ToolComponentProps) {
const [input, setInput] = useState<string>('');
const [result, setResult] = useState<string>('');
const formRef = useRef<FormikProps<typeof initialValues>>(null);
const computeExternal = (
optionsValues: typeof initialValues,
@@ -183,78 +181,65 @@ export default function RemoveDuplicateLines({ title }: ToolComponentProps) {
setResult(removeDuplicateLines(inputText, optionsValues));
};
const getGroups: GetGroupsType<typeof initialValues> = ({
values,
updateField
}) => [
{
title: 'Operation Mode',
component: operationModes.map(({ title, description, value }) => (
<SimpleRadio
key={value}
checked={value === values.mode}
title={title}
description={description}
onClick={() => updateField('mode', value)}
/>
))
},
{
title: 'Newlines, Tabs and Spaces',
component: [
...newlineOptions.map(({ title, description, value }) => (
<SimpleRadio
key={value}
checked={value === values.newlines}
title={title}
description={description}
onClick={() => updateField('newlines', value)}
/>
)),
<CheckboxWithDesc
key="trimTextLines"
checked={values.trimTextLines}
title="Trim Text Lines"
description="Before filtering uniques, remove tabs and spaces from the beginning and end of all lines."
onChange={(checked) => updateField('trimTextLines', checked)}
/>
]
},
{
title: 'Sort Lines',
component: [
<CheckboxWithDesc
key="sortLines"
checked={values.sortLines}
title="Sort the Output Lines"
description="After removing the duplicates, sort the unique lines."
onChange={(checked) => updateField('sortLines', checked)}
/>
]
}
];
return (
<Box>
<ToolInputAndResult
input={<ToolTextInput value={input} onChange={setInput} />}
result={
<ToolTextResult title={'Text without duplicates'} value={result} />
<ToolContent
title={title}
input={input}
inputComponent={<ToolTextInput value={input} onChange={setInput} />}
resultComponent={
<ToolTextResult title={'Text without duplicates'} value={result} />
}
initialValues={initialValues}
getGroups={({ values, updateField }) => [
{
title: 'Operation Mode',
component: operationModes.map(({ title, description, value }) => (
<SimpleRadio
key={value}
checked={value === values.mode}
title={title}
description={description}
onClick={() => updateField('mode', value)}
/>
))
},
{
title: 'Newlines, Tabs and Spaces',
component: [
...newlineOptions.map(({ title, description, value }) => (
<SimpleRadio
key={value}
checked={value === values.newlines}
title={title}
description={description}
onClick={() => updateField('newlines', value)}
/>
)),
<CheckboxWithDesc
key="trimTextLines"
checked={values.trimTextLines}
title="Trim Text Lines"
description="Before filtering uniques, remove tabs and spaces from the beginning and end of all lines."
onChange={(checked) => updateField('trimTextLines', checked)}
/>
]
},
{
title: 'Sort Lines',
component: [
<CheckboxWithDesc
key="sortLines"
checked={values.sortLines}
title="Sort the Output Lines"
description="After removing the duplicates, sort the unique lines."
onChange={(checked) => updateField('sortLines', checked)}
/>
]
}
/>
<ToolOptions
compute={computeExternal}
getGroups={getGroups}
initialValues={initialValues}
input={input}
/>
<ToolExamples
title={title}
exampleCards={exampleCards}
getGroups={getGroups}
formRef={formRef}
setInput={setInput}
/>
</Box>
]}
compute={computeExternal}
setInput={setInput}
exampleCards={exampleCards}
/>
);
}

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

@@ -1,11 +1,119 @@
import { Box } from '@mui/material';
import React from 'react';
import * as Yup from 'yup';
import React, { useState, useRef } from 'react';
import ToolTextInput from '@components/input/ToolTextInput';
import ToolTextResult from '@components/result/ToolTextResult';
import ToolOptions, { GetGroupsType } from '@components/options/ToolOptions';
import { stringReverser } from './service';
import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
import ToolInputAndResult from '@components/ToolInputAndResult';
import ToolExamples, {
CardExampleType
} from '@components/examples/ToolExamples';
import { ToolComponentProps } from '@tools/defineTool';
import { FormikProps } from 'formik';
import ToolContent from '@components/ToolContent';
const initialValues = {};
const validationSchema = Yup.object({
// splitSeparator: Yup.string().required('The separator is required')
});
export default function Reverse() {
return <Box>Lorem ipsum</Box>;
const initialValues = {
multiLine: true,
emptyItems: false,
trim: false
};
const exampleCards: CardExampleType<typeof initialValues>[] = [
{
title: 'Simple Text Reversal',
description:
'Reverses each character in the text. Perfect for creating mirror text.',
sampleText: 'Hello World',
sampleResult: 'dlroW olleH',
sampleOptions: {
...initialValues,
multiLine: false
}
},
{
title: 'Multi-line Reversal',
description:
'Reverses each line independently while preserving the line breaks.',
sampleText: 'First line\nSecond line\nThird line',
sampleResult: 'enil tsriF\nenil dnoceS\nenil drihT',
sampleOptions: {
...initialValues,
multiLine: true
}
},
{
title: 'Clean Reversed Text',
description:
'Trims whitespace and skips empty lines before reversing the text.',
sampleText: ' Spaces removed \n\nEmpty line skipped',
sampleResult: 'devomer secapS\ndeppiks enil ytpmE',
sampleOptions: {
...initialValues,
multiLine: true,
emptyItems: true,
trim: true
}
}
];
export default function Reverse({ title }: ToolComponentProps) {
const [input, setInput] = useState<string>('');
const [result, setResult] = useState<string>('');
const computeExternal = (
optionsValues: typeof initialValues,
input: string
) => {
const { multiLine, emptyItems, trim } = optionsValues;
setResult(stringReverser(input, multiLine, emptyItems, trim));
};
const getGroups: GetGroupsType<typeof initialValues> = ({
values,
updateField
}) => [
{
title: 'Reversal options',
component: [
<CheckboxWithDesc
key="multiLine"
checked={values.multiLine}
title="Process multi-line text"
description="Each line will be reversed independently"
onChange={(val) => updateField('multiLine', val)}
/>,
<CheckboxWithDesc
key="emptyItems"
checked={values.emptyItems}
title="Skip empty lines"
description="Empty lines will be removed from the output"
onChange={(val) => updateField('emptyItems', val)}
/>,
<CheckboxWithDesc
key="trim"
checked={values.trim}
title="Trim whitespace"
description="Remove leading and trailing whitespace from each line"
onChange={(val) => updateField('trim', val)}
/>
]
}
];
return (
<ToolContent
title={title}
initialValues={initialValues}
getGroups={getGroups}
compute={computeExternal}
input={input}
setInput={setInput}
inputComponent={<ToolTextInput value={input} onChange={setInput} />}
resultComponent={
<ToolTextResult title={'Reversed text'} value={result} />
}
exampleCards={exampleCards}
/>
);
}

8
src/pages/tools/string/reverse/meta.ts
View File

@@ -1,13 +1,13 @@
import { defineTool } from '@tools/defineTool';
import { lazy } from 'react';
// import image from '@assets/text.png';
export const tool = defineTool('string', {
name: 'Reverse',
path: 'reverse',
icon: '',
description: '',
shortDescription: '',
icon: 'material-symbols-light:swap-horiz',
description:
"World's simplest browser-based utility for reversing text. Input any text and get it instantly reversed, character by character. Perfect for creating mirror text, analyzing palindromes, or playing with text patterns. Preserves spaces and special characters while reversing.",
shortDescription: 'Reverse any text character by character',
keywords: ['reverse'],
component: lazy(() => import('./index'))
});

69
src/pages/tools/string/rot13/index.tsx
View File

@@ -1,11 +1,60 @@
import { Box } from '@mui/material';
import React from 'react';
import * as Yup from 'yup';
import React, { useState } from 'react';
import ToolContent from '@components/ToolContent';
import ToolTextInput from '@components/input/ToolTextInput';
import ToolTextResult from '@components/result/ToolTextResult';
import { rot13 } from './service';
import { CardExampleType } from '@components/examples/ToolExamples';
import { ToolComponentProps } from '@tools/defineTool';
const initialValues = {};
const validationSchema = Yup.object({
// splitSeparator: Yup.string().required('The separator is required')
});
export default function Rot13() {
return <Box>Lorem ipsum</Box>;
}
type InitialValuesType = Record<string, never>;
const initialValues: InitialValuesType = {};
const exampleCards: CardExampleType<InitialValuesType>[] = [
{
title: 'Encode a message with ROT13',
description:
'This example shows how to encode a simple message using ROT13 cipher.',
sampleText: 'Hello, World!',
sampleResult: 'Uryyb, Jbeyq!',
sampleOptions: {}
},
{
title: 'Decode a ROT13 message',
description:
'This example shows how to decode a message that was encoded with ROT13.',
sampleText: 'Uryyb, Jbeyq!',
sampleResult: 'Hello, World!',
sampleOptions: {}
}
];
export default function Rot13({ title }: ToolComponentProps) {
const [input, setInput] = useState<string>('');
const [result, setResult] = useState<string>('');
const compute = (_: InitialValuesType, input: string) => {
if (input) setResult(rot13(input));
};
return (
<ToolContent
title={title}
inputComponent={
<ToolTextInput title="Input Text" value={input} onChange={setInput} />
}
resultComponent={<ToolTextResult title="ROT13 Result" value={result} />}
initialValues={initialValues}
getGroups={null}
toolInfo={{
title: 'What Is ROT13?',
description:
'ROT13 (rotate by 13 places) is a simple letter substitution cipher that replaces a letter with the 13th letter after it in the alphabet. ROT13 is a special case of the Caesar cipher which was developed in ancient Rome. Because there are 26 letters in the English alphabet, ROT13 is its own inverse; that is, to undo ROT13, the same algorithm is applied, so the same action can be used for encoding and decoding.'
}}
exampleCards={exampleCards}
input={input}
setInput={setInput}
compute={compute}
/>
);
}

5
src/pages/tools/string/rot13/meta.ts
View File

@@ -6,8 +6,9 @@ export const tool = defineTool('string', {
name: 'Rot13',
path: 'rot13',
icon: 'hugeicons:encrypt',
description: '',
shortDescription: '',
description:
'A simple tool to encode or decode text using the ROT13 cipher, which replaces each letter with the letter 13 positions after it in the alphabet.',
shortDescription: 'Encode or decode text using ROT13 cipher.',
keywords: ['rot13'],
component: lazy(() => import('./index'))
});

138
src/pages/tools/string/rotate/index.tsx
View File

@@ -1,11 +1,131 @@
import React, { useState } from 'react';
import { Box } from '@mui/material';
import React from 'react';
import * as Yup from 'yup';
import ToolContent from '@components/ToolContent';
import ToolTextInput from '@components/input/ToolTextInput';
import ToolTextResult from '@components/result/ToolTextResult';
import { rotateString } from './service';
import { CardExampleType } from '@components/examples/ToolExamples';
import { ToolComponentProps } from '@tools/defineTool';
import { GetGroupsType } from '@components/options/ToolOptions';
import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
import SimpleRadio from '@components/options/SimpleRadio';
import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
const initialValues = {};
const validationSchema = Yup.object({
// splitSeparator: Yup.string().required('The separator is required')
});
export default function Rotate() {
return <Box>Lorem ipsum</Box>;
}
interface InitialValuesType {
step: string;
direction: 'left' | 'right';
multiLine: boolean;
}
const initialValues: InitialValuesType = {
step: '1',
direction: 'right',
multiLine: true
};
const exampleCards: CardExampleType<InitialValuesType>[] = [
{
title: 'Rotate text to the right',
description:
'This example shows how to rotate text to the right by 2 positions.',
sampleText: 'abcdef',
sampleResult: 'efabcd',
sampleOptions: {
step: '2',
direction: 'right',
multiLine: false
}
},
{
title: 'Rotate text to the left',
description:
'This example shows how to rotate text to the left by 2 positions.',
sampleText: 'abcdef',
sampleResult: 'cdefab',
sampleOptions: {
step: '2',
direction: 'left',
multiLine: false
}
},
{
title: 'Rotate multi-line text',
description:
'This example shows how to rotate each line of a multi-line text.',
sampleText: 'abcdef\nghijkl',
sampleResult: 'fabcde\nlghijk',
sampleOptions: {
step: '1',
direction: 'right',
multiLine: true
}
}
];
export default function Rotate({ title }: ToolComponentProps) {
const [input, setInput] = useState<string>('');
const [result, setResult] = useState<string>('');
const compute = (optionsValues: InitialValuesType, input: string) => {
if (input) {
const step = parseInt(optionsValues.step, 10) || 1;
const isRight = optionsValues.direction === 'right';
setResult(rotateString(input, step, isRight, optionsValues.multiLine));
}
};
const getGroups: GetGroupsType<InitialValuesType> = ({
values,
updateField
}) => [
{
title: 'Rotation Options',
component: (
<Box>
<TextFieldWithDesc
value={values.step}
onOwnChange={(val) => updateField('step', val)}
description={'Number of positions to rotate'}
type="number"
/>
<SimpleRadio
onClick={() => updateField('direction', 'right')}
checked={values.direction === 'right'}
title={'Rotate Right'}
/>
<SimpleRadio
onClick={() => updateField('direction', 'left')}
checked={values.direction === 'left'}
title={'Rotate Left'}
/>
<CheckboxWithDesc
checked={values.multiLine}
onChange={(checked) => updateField('multiLine', checked)}
title={'Process as multi-line text (rotate each line separately)'}
/>
</Box>
)
}
];
return (
<ToolContent
title={title}
inputComponent={
<ToolTextInput title="Input Text" value={input} onChange={setInput} />
}
resultComponent={<ToolTextResult title="Rotated Text" value={result} />}
initialValues={initialValues}
getGroups={getGroups}
toolInfo={{
title: 'String Rotation',
description:
'This tool allows you to rotate characters in a string by a specified number of positions. You can rotate to the left or right, and process multi-line text by rotating each line separately. String rotation is useful for simple text transformations, creating patterns, or implementing basic encryption techniques.'
}}
exampleCards={exampleCards}
input={input}
setInput={setInput}
compute={compute}
/>
);
}

5
src/pages/tools/string/rotate/meta.ts
View File

@@ -6,8 +6,9 @@ export const tool = defineTool('string', {
name: 'Rotate',
path: 'rotate',
icon: 'carbon:rotate',
description: '',
shortDescription: '',
description:
'A tool to rotate characters in a string by a specified number of positions. Shift characters left or right while maintaining their relative order.',
shortDescription: 'Shift characters in text by position.',
keywords: ['rotate'],
component: lazy(() => import('./index'))
});

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

@@ -2,16 +2,15 @@ import { Box } from '@mui/material';
import React, { useRef, useState } from 'react';
import ToolTextInput from '@components/input/ToolTextInput';
import ToolTextResult from '@components/result/ToolTextResult';
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';
import ToolContent from '@components/ToolContent';
const initialValues = {
splitSeparatorType: 'symbol' as SplitOperatorType,
@@ -135,8 +134,11 @@ easy`,
export default function SplitText({ title }: ToolComponentProps) {
const [input, setInput] = useState<string>('');
const [result, setResult] = useState<string>('');
const formRef = useRef<FormikProps<typeof initialValues>>(null);
const computeExternal = (optionsValues: typeof initialValues, input: any) => {
const computeExternal = (
optionsValues: typeof initialValues,
input: string
) => {
const {
splitSeparatorType,
outputSeparator,
@@ -163,56 +165,44 @@ export default function SplitText({ title }: ToolComponentProps) {
);
};
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
input={<ToolTextInput value={input} onChange={setInput} />}
result={<ToolTextResult title={'Text pieces'} value={result} />}
/>
<ToolOptions
compute={computeExternal}
getGroups={getGroups}
initialValues={initialValues}
input={input}
/>
<ToolExamples
title={title}
exampleCards={exampleCards}
getGroups={getGroups}
formRef={formRef}
setInput={setInput}
/>
</Box>
<ToolContent
title={title}
input={input}
inputComponent={<ToolTextInput value={input} onChange={setInput} />}
resultComponent={<ToolTextResult title={'Text pieces'} value={result} />}
initialValues={initialValues}
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}
/>
))
}
]}
compute={computeExternal}
setInput={setInput}
exampleCards={exampleCards}
/>
);
}

2
src/pages/tools/string/split/meta.ts
View File

@@ -1,6 +1,5 @@
import { defineTool } from '@tools/defineTool';
import { lazy } from 'react';
import image from '@assets/text.png';
export const tool = defineTool('string', {
path: 'split',
@@ -9,6 +8,7 @@ export const tool = defineTool('string', {
description:
"World's simplest browser-based utility for splitting text. Load your text in the input form on the left and you'll automatically get pieces of this text on the right. Powerful, free, and fast. Load text – get chunks.",
shortDescription: 'Quickly split a text',
longDescription: 'Quickly split a text',
keywords: ['text', 'split'],
component: lazy(() => import('./index'))
});

2
src/pages/tools/string/text-replacer/service.ts
View File

@@ -34,7 +34,7 @@ function replaceTextWithRegexp(
return text.replace(new RegExp(searchRegexp, 'g'), replaceValue);
}
} catch (err) {
console.error('Invalid regular expression:', err);
// console.error('Invalid regular expression:', err);
return text;
}
}

77
src/pages/tools/string/to-morse/index.tsx
View File

@@ -1,11 +1,9 @@
import { Box } from '@mui/material';
import ToolContent from '@components/ToolContent';
import React, { useState } from 'react';
import ToolTextInput from '@components/input/ToolTextInput';
import ToolTextResult from '@components/result/ToolTextResult';
import ToolOptions from '@components/options/ToolOptions';
import { compute } from './service';
import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
import ToolInputAndResult from '@components/ToolInputAndResult';
const initialValues = {
dotSymbol: '.',
@@ -15,49 +13,46 @@ const initialValues = {
export default function ToMorse() {
const [input, setInput] = useState<string>('');
const [result, setResult] = useState<string>('');
// const formRef = useRef<FormikProps<typeof initialValues>>(null);
const computeOptions = (optionsValues: typeof initialValues, input: any) => {
const { dotSymbol, dashSymbol } = optionsValues;
setResult(compute(input, dotSymbol, dashSymbol));
};
return (
<Box>
<ToolInputAndResult
input={<ToolTextInput value={input} onChange={setInput} />}
result={<ToolTextResult title={'Morse code'} value={result} />}
/>
<ToolOptions
compute={computeOptions}
getGroups={({ values, updateField }) => [
{
title: 'Short Signal',
component: (
<TextFieldWithDesc
description={
'Symbol that will correspond to the dot in Morse code.'
}
value={values.dotSymbol}
onOwnChange={(val) => updateField('dotSymbol', val)}
/>
)
},
{
title: 'Long Signal',
component: (
<TextFieldWithDesc
description={
'Symbol that will correspond to the dash in Morse code.'
}
value={values.dashSymbol}
onOwnChange={(val) => updateField('dashSymbol', val)}
/>
)
}
]}
initialValues={initialValues}
input={input}
/>
</Box>
<ToolContent
title="To Morse"
initialValues={initialValues}
compute={computeOptions}
input={input}
setInput={setInput}
inputComponent={<ToolTextInput value={input} onChange={setInput} />}
resultComponent={<ToolTextResult title={'Morse code'} value={result} />}
getGroups={({ values, updateField }) => [
{
title: 'Short Signal',
component: (
<TextFieldWithDesc
description={
'Symbol that will correspond to the dot in Morse code.'
}
value={values.dotSymbol}
onOwnChange={(val) => updateField('dotSymbol', val)}
/>
)
},
{
title: 'Long Signal',
component: (
<TextFieldWithDesc
description={
'Symbol that will correspond to the dash in Morse code.'
}
value={values.dashSymbol}
onOwnChange={(val) => updateField('dashSymbol', val)}
/>
)
}
]}
/>
);
}

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

@@ -1,11 +1,63 @@
import { Box } from '@mui/material';
import React from 'react';
import * as Yup from 'yup';
import React, { useState } from 'react';
import ToolTextInput from '@components/input/ToolTextInput';
import ToolTextResult from '@components/result/ToolTextResult';
import { UppercaseInput } from './service';
import { CardExampleType } from '@components/examples/ToolExamples';
import { ToolComponentProps } from '@tools/defineTool';
import ToolContent from '@components/ToolContent';
const initialValues = {};
const validationSchema = Yup.object({
// splitSeparator: Yup.string().required('The separator is required')
});
export default function Uppercase() {
return <Box>Lorem ipsum</Box>;
const exampleCards: CardExampleType<typeof initialValues>[] = [
{
title: 'Convert Text to Uppercase',
description: 'This example transforms any text to ALL UPPERCASE format.',
sampleText: 'The quick brown fox jumps over the lazy dog.',
sampleResult: 'THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.',
sampleOptions: {}
},
{
title: 'Uppercase Code',
description:
'Convert code to uppercase format. Note that this is for display only and would not maintain code functionality.',
sampleText: 'function example() { return "hello world"; }',
sampleResult: 'FUNCTION EXAMPLE() { RETURN "HELLO WORLD"; }',
sampleOptions: {}
},
{
title: 'Mixed Case to Uppercase',
description:
'Transform text with mixed casing to consistent all uppercase format.',
sampleText: 'ThIs Is MiXeD CaSe TeXt!',
sampleResult: 'THIS IS MIXED CASE TEXT!',
sampleOptions: {}
}
];
export default function Uppercase({ title }: ToolComponentProps) {
const [input, setInput] = useState<string>('');
const [result, setResult] = useState<string>('');
const computeExternal = (
_optionsValues: typeof initialValues,
input: string
) => {
setResult(UppercaseInput(input));
};
return (
<ToolContent
title={title}
initialValues={initialValues}
getGroups={null}
compute={computeExternal}
input={input}
setInput={setInput}
inputComponent={<ToolTextInput value={input} onChange={setInput} />}
resultComponent={
<ToolTextResult title={'Uppercase text'} value={result} />
}
exampleCards={exampleCards}
/>
);
}

8
src/pages/tools/string/uppercase/meta.ts
View File

@@ -1,13 +1,13 @@
import { defineTool } from '@tools/defineTool';
import { lazy } from 'react';
// import image from '@assets/text.png';
export const tool = defineTool('string', {
name: 'Uppercase',
path: 'uppercase',
icon: '',
description: '',
shortDescription: '',
icon: 'material-symbols-light:text-fields',
description:
"World's simplest browser-based utility for converting text to uppercase. Just input your text and it will be automatically converted to all capital letters. Perfect for creating headlines, emphasizing text, or standardizing text format. Supports various text formats and preserves special characters.",
shortDescription: 'Convert text to uppercase letters',
keywords: ['uppercase'],
component: lazy(() => import('./index'))
});

86
src/pages/tools/video/gif/change-speed/index.tsx
View File

@@ -3,12 +3,12 @@ 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 TextFieldWithDesc from 'components/options/TextFieldWithDesc';
import ToolInputAndResult from '@components/ToolInputAndResult';
import Typography from '@mui/material/Typography';
import { FrameOptions, GifReader, GifWriter } from 'omggif';
import { gifBinaryToFile } from '../../../../../utils/gif';
import { gifBinaryToFile } from '@utils/gif';
import ToolContent from '@components/ToolContent';
import { ToolComponentProps } from '@tools/defineTool';
const initialValues = {
newSpeed: 200
@@ -16,11 +16,11 @@ const initialValues = {
const validationSchema = Yup.object({
// splitSeparator: Yup.string().required('The separator is required')
});
export default function ChangeSpeed() {
export default function ChangeSpeed({ title }: ToolComponentProps) {
const [input, setInput] = useState<File | null>(null);
const [result, setResult] = useState<File | null>(null);
const compute = (optionsValues: typeof initialValues, input: File) => {
const compute = (optionsValues: typeof initialValues, input: File | null) => {
if (!input) return;
const { newSpeed } = optionsValues;
@@ -104,45 +104,43 @@ export default function ChangeSpeed() {
processImage(input, newSpeed);
};
return (
<Box>
<ToolInputAndResult
input={
<ToolFileInput
value={input}
onChange={setInput}
accept={['image/gif']}
title={'Input GIF'}
/>
<ToolContent
title={title}
input={input}
inputComponent={
<ToolFileInput
value={input}
onChange={setInput}
accept={['image/gif']}
title={'Input GIF'}
/>
}
resultComponent={
<ToolFileResult
title={'Output GIF with new speed'}
value={result}
extension={'gif'}
/>
}
initialValues={initialValues}
getGroups={({ values, updateField }) => [
{
title: 'New GIF speed',
component: (
<Box>
<TextFieldWithDesc
value={values.newSpeed}
onOwnChange={(val) => updateField('newSpeed', Number(val))}
description={'Default new GIF speed.'}
InputProps={{ endAdornment: <Typography>ms</Typography> }}
type={'number'}
/>
</Box>
)
}
result={
<ToolFileResult
title={'Output GIF with new speed'}
value={result}
extension={'gif'}
/>
}
/>
<ToolOptions
compute={compute}
getGroups={({ values, updateField }) => [
{
title: 'New GIF speed',
component: (
<Box>
<TextFieldWithDesc
value={values.newSpeed}
onOwnChange={(val) => updateField('newSpeed', Number(val))}
description={'Default new GIF speed.'}
InputProps={{ endAdornment: <Typography>ms</Typography> }}
type={'number'}
/>
</Box>
)
}
]}
initialValues={initialValues}
input={input}
/>
</Box>
]}
compute={compute}
setInput={setInput}
/>
);
}

Some files were not shown because too many files have changed in this diff Show More