feat: create tool script

.idea/workspace.xml

@@ -4,10 +4,23 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="feat: contributors graph">
+    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="fix: readme">
+      <change afterPath="$PROJECT_DIR$/scripts/create-tool.mjs" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/pages/image/png/change-colors-in-png/change-colors-in-png.service.test.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/pages/image/png/change-colors-in-png/index.tsx" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/pages/image/png/change-colors-in-png/meta.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/pages/image/png/change-colors-in-png/service.ts" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/Readme.md" beforeDir="false" afterPath="$PROJECT_DIR$/Readme.md" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/string/join/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/join/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/images/imageTools.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/images/png/change-colors-in-png/index.tsx" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/images/png/change-colors-in-png/meta.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/images/png/pngTools.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/string/join/string-join.test.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/join/string-join.service.test.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/string/split/string-split.test.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/split/string-split.service.test.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/string/stringTools.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/index.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/tools/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/tools/index.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/tsconfig.json" beforeDir="false" afterPath="$PROJECT_DIR$/tsconfig.json" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -48,7 +61,7 @@
     &quot;git-widget-placeholder&quot;: &quot;main&quot;,
     &quot;ignore.virus.scanning.warn.message&quot;: &quot;true&quot;,
     &quot;kotlin-language-version-configured&quot;: &quot;true&quot;,
-    &quot;last_opened_file_path&quot;: &quot;C:/Users/HP/IdeaProjects/omni-tools/src/pages/string/split&quot;,
+    &quot;last_opened_file_path&quot;: &quot;C:/Users/HP/IdeaProjects/omni-tools/src/pages/string&quot;,
     &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
     &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
     &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
@@ -56,6 +69,7 @@
     &quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
     &quot;npm.dev.executor&quot;: &quot;Run&quot;,
     &quot;npm.prebuild.executor&quot;: &quot;Run&quot;,
+    &quot;npm.script:create:tool.executor&quot;: &quot;Run&quot;,
     &quot;prettierjs.PrettierConfiguration.Package&quot;: &quot;C:\\Users\\HP\\IdeaProjects\\omni-tools\\node_modules\\prettier&quot;,
     &quot;project.structure.last.edited&quot;: &quot;Problems&quot;,
     &quot;project.structure.proportion&quot;: &quot;0.0&quot;,
@@ -76,11 +90,11 @@
   </component>
   <component name="RecentsManager">
     <key name="CopyFile.RECENT_KEYS">
+      <recent name="C:\Users\HP\IdeaProjects\omni-tools\src\pages\string" />
       <recent name="C:\Users\HP\IdeaProjects\omni-tools\src\pages\string\split" />
       <recent name="C:\Users\HP\IdeaProjects\omni-tools\src\pages\images" />
       <recent name="C:\Users\HP\IdeaProjects\omni-tools\public" />
       <recent name="C:\Users\HP\IdeaProjects\omni-tools\src\assets" />
-      <recent name="C:\Users\HP\IdeaProjects\omni-tools\src" />
     </key>
     <key name="MoveFile.RECENT_KEYS">
       <recent name="C:\Users\HP\IdeaProjects\omni-tools\src\components\options" />
@@ -88,7 +102,7 @@
       <recent name="C:\Users\HP\IdeaProjects\omni-tools\src\tools" />
     </key>
   </component>
-  <component name="RunManager" selected="npm.dev">
+  <component name="RunManager" selected="npm.script:create:tool">
     <configuration name="dev" type="js.build_tools.npm" temporary="true" nameIsGenerated="true">
       <package-json value="$PROJECT_DIR$/package.json" />
       <command value="run" />
@@ -109,8 +123,19 @@
       <envs />
       <method v="2" />
     </configuration>
+    <configuration name="script:create:tool" type="js.build_tools.npm" temporary="true" nameIsGenerated="true">
+      <package-json value="$PROJECT_DIR$/package.json" />
+      <command value="run" />
+      <scripts>
+        <script value="script:create:tool" />
+      </scripts>
+      <node-interpreter value="project" />
+      <envs />
+      <method v="2" />
+    </configuration>
     <recent_temporary>
       <list>
+        <item itemvalue="npm.script:create:tool" />
         <item itemvalue="npm.dev" />
         <item itemvalue="npm.prebuild" />
       </list>
@@ -134,7 +159,9 @@
       <workItem from="1719021128819" duration="3239000" />
       <workItem from="1719083989394" duration="7971000" />
       <workItem from="1719092003308" duration="14856000" />
-      <workItem from="1719164664347" duration="918000" />
+      <workItem from="1719164664347" duration="2033000" />
+      <workItem from="1719166718305" duration="1783000" />
+      <workItem from="1719168519203" duration="179000" />
     </task>
     <task id="LOCAL-00001" summary="feat: use vite and ts">
       <option name="closed" value="true" />
@@ -400,7 +427,15 @@
       <option name="project" value="LOCAL" />
       <updated>1719165093734</updated>
     </task>
-    <option name="localTasksCounter" value="34" />
+    <task id="LOCAL-00034" summary="fix: readme">
+      <option name="closed" value="true" />
+      <created>1719165600245</created>
+      <option name="number" value="00034" />
+      <option name="presentableId" value="LOCAL-00034" />
+      <option name="project" value="LOCAL" />
+      <updated>1719165600245</updated>
+    </task>
+    <option name="localTasksCounter" value="35" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -428,7 +463,6 @@
     <MESSAGE value="chore: output selector" />
     <MESSAGE value="feat: text split" />
     <MESSAGE value="fix: text split try catch" />
-    <MESSAGE value="fix: readme" />
     <MESSAGE value="ubf" />
     <MESSAGE value="ubf jn" />
     <MESSAGE value="feat: conventional commit" />
@@ -446,7 +480,8 @@
     <MESSAGE value="test: join service" />
     <MESSAGE value="feat: result copy and download" />
     <MESSAGE value="feat: contributors graph" />
-    <option name="LAST_COMMIT_MESSAGE" value="feat: contributors graph" />
+    <MESSAGE value="fix: readme" />
+    <option name="LAST_COMMIT_MESSAGE" value="fix: readme" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />

Readme.md

@@ -46,6 +46,10 @@ npm i
 npm run dev
 ```
 
+### Create a new tool
+
+`npm run script:create:tool my-tool-name folder1/folder2`
+
 ## Contributors
 
 <a href="https://github.com/iib0011/omni-tools/graphs/contributors">

package.json

@@ -18,6 +18,7 @@
     "serve": "vite preview",
     "test": "vitest",
     "test:ui": "vitest --ui",
+    "script:create:tool": "node scripts/create-tool.mjs",
     "lint": "eslint src --max-warnings=0",
     "typecheck": "tsc --project tsconfig.json --noEmit",
     "prepare": "husky install"

scripts/create-tool.mjs

@@ -0,0 +1,115 @@
+import { mkdir, readFile, writeFile } from 'fs/promises'
+import { dirname, join } from 'path'
+import { fileURLToPath } from 'url'
+
+const currentDirname = dirname(fileURLToPath(import.meta.url))
+
+const toolName = process.argv[2]
+const folder = process.argv[3]
+
+const toolsDir = join(currentDirname, '..', 'src', 'pages', folder ?? '')
+
+if (!toolName) {
+  throw new Error('Please specify a toolname.')
+}
+
+function capitalizeFirstLetter(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1)
+}
+
+const toolNameCamelCase = toolName.replace(/-./g, (x) => x[1].toUpperCase())
+const toolNameTitleCase =
+  toolName[0].toUpperCase() + toolName.slice(1).replace(/-/g, ' ')
+const toolDir = join(toolsDir, toolName)
+
+await mkdir(toolDir)
+console.log(`Directory created: ${toolDir}`)
+
+const createToolFile = async (name, content) => {
+  const filePath = join(toolDir, name)
+  await writeFile(filePath, content.trim())
+  console.log(`File created: ${filePath}`)
+}
+
+createToolFile(
+  `index.tsx`,
+  `
+import { Box } from '@mui/material';
+import React from 'react';
+import * as Yup from 'yup';
+
+const initialValues = {};
+const validationSchema = Yup.object({
+  // splitSeparator: Yup.string().required('The separator is required')
+});
+export default function ${capitalizeFirstLetter(toolNameCamelCase)}() {
+  return <Box>Lorem ipsum</Box>;
+}
+`
+)
+
+createToolFile(
+  `meta.ts`,
+  `
+import { defineTool } from '@tools/defineTool';
+import { lazy } from 'react';
+import image from '../../../assets/text.png';
+
+export const tool = defineTool('${folder}', {
+  name: '${toolNameTitleCase}',
+  path: '/${toolName}',
+  image,
+  description: '',
+  keywords: ['${toolName.split('-').join('\', \'')}'],
+  component: lazy(() => import('./index'))
+});
+`
+)
+
+createToolFile(`service.ts`, ``)
+createToolFile(
+  `${toolName}.service.test.ts`,
+  `
+import { expect, describe, it } from 'vitest';
+// import { } from './service';
+//
+// describe('${toolName}', () => {
+//
+// })
+`
+)
+
+// createToolFile(
+//   `${toolName}.e2e.spec.ts`,
+//   `
+// import { test, expect } from '@playwright/test';
+//
+// test.describe('Tool - ${toolNameTitleCase}', () => {
+//   test.beforeEach(async ({ page }) => {
+//     await page.goto('/${toolName}');
+//   });
+//
+//   test('Has correct title', async ({ page }) => {
+//     await expect(page).toHaveTitle('${toolNameTitleCase} - IT Tools');
+//   });
+//
+//   test('', async ({ page }) => {
+//
+//   });
+// });
+//
+// `
+// )
+
+const toolsIndex = join(toolsDir, 'index.ts')
+const indexContent = await readFile(toolsIndex, { encoding: 'utf-8' }).then(
+  (r) => r.split('\n')
+)
+
+indexContent.splice(
+  0,
+  0,
+  `import { tool as ${toolNameCamelCase} } from './${toolName}/meta';`
+)
+writeFile(toolsIndex, indexContent.join('\n'))
+console.log(`Added import in: ${toolsIndex}`)

src/pages/image/png/change-colors-in-png/change-colors-in-png.service.test.ts

@@ -0,0 +1,6 @@
+import { expect, describe, it } from 'vitest';
+// import { } from './service';
+//
+// describe('change-colors-in-png', () => {
+//
+// })

src/pages/image/png/change-colors-in-png/index.tsx

@@ -0,0 +1,11 @@
+import { Box } from '@mui/material';
+import React from 'react';
+import * as Yup from 'yup';
+
+const initialValues = {};
+const validationSchema = Yup.object({
+  // splitSeparator: Yup.string().required('The separator is required')
+});
+export default function ChangeColorsInPng() {
+  return <Box>Lorem ipsum</Box>;
+}

src/pages/image/png/change-colors-in-png/meta.ts

@@ -0,0 +1,12 @@
+import { defineTool } from '@tools/defineTool';
+import { lazy } from 'react';
+import image from '../../../assets/text.png';
+
+export const tool = defineTool('image/png', {
+  name: 'Change colors in png',
+  path: '/change-colors-in-png',
+  image,
+  description: '',
+  keywords: ['change', 'colors', 'in', 'png'],
+  component: lazy(() => import('./index'))
+});

src/pages/images/imageTools.ts

@@ -1,3 +0,0 @@
-import { pngTools } from './png/pngTools';
-
-export const imageTools = [...pngTools];

src/pages/images/png/change-colors-in-png/index.tsx

@@ -1,5 +0,0 @@
-import { Box } from '@mui/material';
-
-export default function ChangeColorsInPng() {
-  return <Box></Box>;
-}

src/pages/images/png/change-colors-in-png/meta.ts

@@ -1,11 +0,0 @@
-import { defineTool } from '../../../../tools/defineTool';
-import { lazy } from 'react';
-
-export const tool = defineTool('png', {
-  path: 'change-colors',
-  name: 'PNG color replacer',
-  description:
-    "World's simplest online Portable Network Graphics (PNG) color changer. Just import your PNG image in the editor on the left, select which colors to change, and you'll instantly get a new PNG with the new colors on the right. Free, quick, and very powerful. Import a PNG – replace its colors",
-  keywords: ['png', 'color'],
-  component: lazy(() => import('./index'))
-});

src/pages/images/png/pngTools.ts

@@ -1,3 +0,0 @@
-import { tool as changeColorsInPng } from './change-colors-in-png/meta';
-
-export const pngTools = [changeColorsInPng];

src/tools/index.ts

@@ -1,5 +1,5 @@
-import { stringTools } from '../pages/string/stringTools';
-import { imageTools } from '../pages/images/imageTools';
+import { stringTools } from '../pages/string';
+import { imageTools } from '../pages/image';
 import { DefinedTool } from './defineTool';
 import { capitalizeFirstLetter } from '../utils/string';
 

tsconfig.json

@@ -2,7 +2,11 @@
   "compilerOptions": {
     "baseUrl": "./src",
     "target": "esnext",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -15,8 +19,21 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
-    "types": ["vite/client", "vitest/globals", "@testing-library/jest-dom"]
+    "types": [
+      "vite/client",
+      "vitest/globals",
+      "@testing-library/jest-dom"
+    ],
+    "paths": {
+      "@tools/*": [
+        "./tools/*"
+      ]
+    }
   },
-  "include": ["src"],
-  "exclude": ["node_modules"]
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }