Merge pull request #106 from fosslife/master

.gitignore

@@ -11,4 +11,5 @@ yarn-error.log
 
 assets/vips/
 
-.yarn
+.yarn
+.eslintcache

.husky/pre-commit

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

.lintstagedrc.json

@@ -0,0 +1,6 @@
+{
+  "*.{js,ts,tsx,jsx}": [
+    "prettier  --loglevel warn --write \"./**/*.{js,jsx,ts,tsx,css,md,json}\"",
+    "eslint --cache ./src --ext .jsx,.js,.ts,.tsx --fix"
+  ]
+}

README.md

@@ -1,9 +1,9 @@
 # DEVTOOLS-X
 
 `devutils` is macOS-only, and `devtoys` is Windows-only.  
-So here's DevTools-X -- an x-platform collection of dev-tools that is lighter, safer, and full of feature rich (currenltly 32 modules and growing) development utilities.
+So here's DevTools-X -- an x-platform non-electron, collection of dev-tools that is lighter, safer, and feature rich (currenltly 41 modules and growing) development utilities.
 
-> Note: Application is under development, expect some bugs.
+> Note: Application is stable but there are too many modules and all are not well tested on all 3 OSes. Please report any bugs you find.
 
 > In any case if the app doesn't render/load anything, just delete the file if exists or create settings.json if doesn't exist at: https://docs.rs/tauri/latest/tauri/api/path/fn.data_dir.html
 
@@ -21,6 +21,17 @@ So here's DevTools-X -- an x-platform collection of dev-tools that is lighter, s
 
 ## Installation
 
+### Download prebuilt binaries
+
+This project runs a github CI to build binaries for all platforms. Head to [Releases](https://github.com/fosslife/devtools-x/releases)
+and download the binary as per your requirements.
+
+> NOTE FOR MACOS USERS, you need this to run the app as binaries are not signed yet:
+
+```sh
+xattr -r -c /Applications/dev-tools.app
+```
+
 ### Compile yourself
 
 Download the relevant package from Github Releases section, and start using it! :D
@@ -37,24 +48,6 @@ Then just clone and open the project in terminal and run
 yarn tauri build
 ```
 
-### Download prebuilt binaries
-
-This project runs a github CI to build binaries for all platforms. Head to [Releases](https://github.com/fosslife/devtools-x/releases)
-and download the binary as per your requirements.
-
-NOTE FOR MACOS USERS, you need this to run the app as binaries are not signed yet.
-
-```sh
-xattr -r -c /Applications/dev-tools.app
-```
-
-## Acknowledgements
-
-This project exists solely because I was fed up switching between different tools on different OSes. Please do star their github repositories, they have inspired many modules in devtools-x
-
-- [DevUtils](https://devutils.com/)
-- [DevToys](https://github.com/veler/DevToys)
-
 ## Features
 
 #### Checkout [features.md](features.md) for a short video demo on every feature.
@@ -160,6 +153,13 @@ or compressing image etc.
 - Regex Tester is kinda broken, monaco gives a headache
 - Fix ALL FIXME: s and TODO: s
 
+## Acknowledgements
+
+This project exists solely because I was fed up switching between different tools on different OSes. Please do star their github repositories, they have inspired many modules in devtools-x
+
+- [DevUtils](https://devutils.com/)
+- [DevToys](https://github.com/veler/DevToys)
+
 ## License
 
 [MIT](https://choosealicense.com/licenses/mit/)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dev-tools",
-  "version": "2.14.1",
+  "version": "2.15.0",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -14,28 +14,28 @@
     "lint": "yarn lint:format && yarn lint:fix ",
     "type-check": "tsc",
     "release": "node scripts/sign.mjs",
-    "prepare": "node scripts/prepare.mjs",
+    "lint-staged": "lint-staged",
+    "prepare": "husky",
     "bump": "node scripts/bumpVersion.mjs"
   },
   "dependencies": {
     "@aptabase/tauri": "^0.4.1",
     "@faker-js/faker": "^8.4.1",
     "@hello-pangea/dnd": "^16.6.0",
     "@loadable/component": "^5.16.3",
-    "@mantine/charts": "^7.7.1",
-    "@mantine/core": "^7.7.1",
-    "@mantine/dates": "^7.7.1",
-    "@mantine/hooks": "^7.7.1",
-    "@mantine/notifications": "^7.7.1",
-    "@mantine/spotlight": "^7.7.1",
+    "@mantine/charts": "^7.12.1",
+    "@mantine/core": "^7.12.1",
+    "@mantine/dates": "^7.12.1",
+    "@mantine/hooks": "^7.12.1",
+    "@mantine/notifications": "^7.12.1",
+    "@mantine/spotlight": "^7.12.1",
     "@monaco-editor/react": "^4.6.0",
     "@prettier/plugin-xml": "^3.4.1",
     "@rollup/plugin-alias": "^5.1.0",
     "@sqltools/formatter": "^1.2.5",
     "@tauri-apps/api": "^1.6.0",
     "@uiw/react-markdown-preview": "^5.1.1",
     "angular-html-parser": "^5.2.0",
-    "axios": "^1.6.8",
     "chroma-js": "^2.4.2",
     "clsx": "^2.1.0",
     "convert-units": "^2.3.4",
@@ -65,12 +65,16 @@
     "react-cropper": "^2.3.3",
     "react-dom": "^18.2.0",
     "react-icons": "^5.2.1",
+    "react-katex": "^3.0.1",
     "react-live": "^4.1.5",
     "react-pdf": "^7.7.3",
     "react-router-dom": "6.22.3",
     "react-shepherd": "^4.3.0",
     "react-sizeme": "^3.0.2",
     "recharts": "2.12.3",
+    "rehype-katex": "^7.0.0",
+    "rehype-raw": "^7.0.0",
+    "remark-math": "^6.0.0",
     "simple-base-converter": "^1.0.19",
     "tauri-plugin-store-api": "https://github.com/tauri-apps/tauri-plugin-store",
     "terser": "^5.30.0",
@@ -96,6 +100,7 @@
     "@types/react": "^18.2.73",
     "@types/react-color": "^3.0.12",
     "@types/react-dom": "^18.2.23",
+    "@types/react-katex": "^3.0.4",
     "@types/tinycolor2": "^1.4.6",
     "@types/uuid": "^9.0.8",
     "@typescript-eslint/eslint-plugin": "^7.4.0",
@@ -111,6 +116,8 @@
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-simple-import-sort": "^12.0.0",
     "fs-extra": "^11.2.0",
+    "husky": "^9.1.5",
+    "lint-staged": "^15.2.9",
     "monaco-editor": "^0.47.0",
     "postcss": "^8.4.38",
     "postcss-preset-mantine": "^1.13.0",

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "devtools-x"
-version = "2.14.1"
+version = "2.15.0"
 description = "Developer tools desktop application"
 authors = ["Sparkenstein"]
 license = "MIT"

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "package": {
     "productName": "dev-tools",
-    "version": "2.14.1"
+    "version": "2.15.0"
   },
   "build": {
     "distDir": "../dist",

src/App.tsx

@@ -48,17 +48,19 @@ const ColorTesting = loadable(() => import("./Features/colors/ColorTesting"));
 
 const RegexTester = loadable(() => import("./Features/regex/RegexTester"));
 const TextDiff = loadable(() => import("./Features/text/TextDiff"));
+const TextUtils = loadable(() => import("./Features/text/TextUtils"));
 const Markdown = loadable(() => import("./Features/markdown/Markdown"));
+const Readme = loadable(() => import("./Features/markdown/Readme"));
 const YamlJson = loadable(() => import("./Features/json-yaml/Yaml"));
 const Pastebin = loadable(() => import("./Features/pastebin/Pastebin"));
 const Repl = loadable(() => import("./Features/repl/Repl"));
 const Image = loadable(() => import("./Features/image/Image"));
 const Playground = loadable(
-  () => import("./Features/reactPlayground/Playground")
+  () => import("./Features/react-playground/Playground")
 );
 const Rest = loadable(() => import("./Features/rest/Rest"));
 const UnitConverter = loadable(
-  () => import("./Features/unitconverter/UnitConverter")
+  () => import("./Features/unit-converter/UnitConverter")
 );
 const Epoch = loadable(() => import("./Features/epoch/Epoch"));
 const Stateless = loadable(() => import("./Features/password"));
@@ -82,9 +84,7 @@ const Compress = loadable(() => import("./Features/text/TextCompress"));
 const Faker = loadable(() => import("./Features/faker/Faker"));
 const CssPlayground = loadable(() => import("./Features/css/CssPlayground"));
 const SvgPreview = loadable(() => import("./Features/svg/Svg"));
-const ColorGenerator = loadable(
-  () => import("./Features/colors/ColorGenerator")
-);
+
 const QrReadcer = loadable(() => import("./Features/qrcode/QrCodeReader"));
 const HmacGenerator = loadable(() => import("./Features/hash/HmacGenerator"));
 const ImageCrop = loadable(() => import("./Features/image/ImageCrop"));
@@ -232,8 +232,10 @@ function App() {
               <Route path="/harmonies" element={<ColorHarmonies />}></Route>
               <Route path="/color-testing" element={<ColorTesting />}></Route>
               <Route path="/regex" element={<RegexTester />}></Route>
-              <Route path="/text" element={<TextDiff />}></Route>
+              <Route path="/diff" element={<TextDiff />}></Route>
+              <Route path="/text" element={<TextUtils />}></Route>
               <Route path="/markdown" element={<Markdown />}></Route>
+              <Route path="/readme" element={<Readme />}></Route>
               <Route path="/yamljson" element={<YamlJson />}></Route>
               <Route path="/pastebin" element={<Pastebin />}></Route>
               <Route path="/repl" element={<Repl />}></Route>
@@ -264,10 +266,6 @@ function App() {
               <Route path="/qrcode-reader" element={<QrReadcer />}></Route>
               <Route path="/hmac-generator" element={<HmacGenerator />}></Route>
               <Route path="/image-crop" element={<ImageCrop />}></Route>
-              <Route
-                path="/colorgenerator"
-                element={<ColorGenerator />}
-              ></Route>
             </Routes>
           </Stack>
         </Group>

src/Components/OutputBox.tsx

@@ -7,21 +7,29 @@ import {
   MantineSize,
 } from "@mantine/core";
 import { clipboard } from "@tauri-apps/api";
-import { HTMLInputTypeAttribute, useState } from "react";
+import { CSSProperties, HTMLInputTypeAttribute, useState } from "react";
 import { FaCopy, FaEye } from "react-icons/fa";
 
 function OutputBox({
   label,
   value,
+  copyValue,
   type: propType,
   size,
   onCopy,
+  style,
+  onChange,
+  btnLabel = "Copy",
 }: {
-  label: string;
+  label?: string;
   value: string;
+  copyValue?: string;
   type?: HTMLInputTypeAttribute;
   size?: MantineSize;
   onCopy?: () => void;
+  style?: CSSProperties;
+  onChange?: (value: string) => void;
+  btnLabel?: string;
 }) {
   const [type, setType] = useState(propType);
 
@@ -46,23 +54,25 @@ function OutputBox({
             <CopyButton value={value}>
               {({ copied, copy }) => (
                 <Button
-                  leftSection={<FaCopy />}
+                  leftSection={btnLabel === "Copy" ? <FaCopy /> : null}
                   size={size || "xs"}
                   // fullWidth={true}
                   onClick={() => {
                     copy(); //  copy doesn't work but need this function for animation.
-                    clipboard.writeText(value);
+                    clipboard.writeText(copyValue ?? value);
                     onCopy?.();
                   }}
+                  style={style}
                 >
-                  {copied ? "Copied" : `Copy`}
+                  {copied ? "Copied" : btnLabel}
                 </Button>
               )}
             </CopyButton>
           </Group>
         }
         value={value}
-        readOnly
+        onChange={(e) => onChange?.(e.currentTarget.value)}
+        readOnly={!onChange}
       ></Input>
     </Input.Wrapper>
   );

src/Components/Welcome.tsx

@@ -27,6 +27,7 @@ const Welcome = ({ openSettings }: WelcomeProps) => {
   return (
     <Stack className={classes.root}>
       <img
+        alt="logo"
         src={"/main-logo.png"}
         style={{
           width: 40,

src/Features/colors/ColorEditableOutput.tsx

@@ -0,0 +1,35 @@
+import { Output } from "@/hooks/useColorState";
+import { OutputBox } from "@/Components/OutputBox";
+import { Group } from "@mantine/core";
+import classes from "./colorgenerator.module.css";
+
+export const EditableColorOutput = ({
+  conversions,
+  onCopy,
+}: {
+  conversions: Output[];
+  onCopy?: () => void;
+}) => {
+  return (
+    <Group
+      gap={20}
+      grow
+      className={classes.outputGroup}
+      style={{ marginBottom: 14 }}
+    >
+      {conversions.map((conv) => (
+        <OutputBox
+          key={conv.type}
+          value={conv.editableValue}
+          copyValue={conv.renderValue}
+          style={{
+            ["--hover-background" as string]: conv.renderValue,
+          }}
+          onCopy={onCopy}
+          onChange={conv?.onChange}
+          btnLabel={`Copy ${conv.type.toUpperCase()}`}
+        />
+      ))}
+    </Group>
+  );
+};