Modernize tools, migrate to TypeScript (#31)

* Migrate to ts

* Update tools

* Fix CI to use Corepack Yarn 4

Author: rtivital

.babelrc.js

@@ -0,0 +1,29 @@
+name: PR Test
+
+on:
+  pull_request:
+  workflow_dispatch:
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 24
+
+      - name: Enable Corepack
+        run: |
+          corepack enable
+          corepack prepare yarn@4.12.0 --activate
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Run tests
+        run: npm test

.eslintrc.js

@@ -2,3 +2,4 @@ node_modules
 *.log
 dist
 .DS_Store
+.yarn/install-state.gz

.github/workflows/pr-test.yml

@@ -1 +1,6 @@
-module.exports = require('@rtivital/eslint-config/.prettierrc');
+module.exports = {
+  singleQuote: true,
+  trailingComma: 'es5',
+  printWidth: 100,
+  semi: true,
+};

.gitignore

@@ -0,0 +1 @@
+nodeLinker: node-modules

.prettierrc.js

@@ -0,0 +1,22 @@
+import mantine from 'eslint-config-mantine';
+import { defineConfig } from 'eslint/config';
+import tseslint from 'typescript-eslint';
+
+// @ts-check
+export default defineConfig(
+  tseslint.configs.recommended,
+  ...mantine,
+  { ignores: ['**/*.{mjs,cjs,js,d.ts,d.mts}'] },
+  {
+    files: ['**/*.story.tsx'],
+    rules: { 'no-console': 'off' },
+  },
+  {
+    languageOptions: {
+      parserOptions: {
+        tsconfigRootDir: process.cwd(),
+        project: ['./tsconfig.json'],
+      },
+    },
+  }
+);

.yarnrc.yml

@@ -1,89 +1,85 @@
 {
-  "name": "Omatsuri",
+  "name": "omatsuri",
   "version": "1.0.0",
   "description": "Open source frontend focused tools",
   "repository": "https://github.com/rtivital/tools.git",
   "author": "Vitaly Rtishchev <rtivital@gmail.com>",
   "license": "MIT",
   "private": true,
+  "packageManager": "yarn@4.12.0",
+  "engines": {
+    "node": ">=24.0.0"
+  },
   "scripts": {
-    "start": "npm run clean && webpack-dev-server",
-    "build": "npm run clean && cross-env NODE_ENV=production webpack --progress",
+    "start": "yarn clean && webpack serve --mode development --open",
+    "build": "yarn clean && cross-env NODE_ENV=production webpack --mode production --progress",
     "clean": "rimraf ./dist",
-    "deploy": "npm run build && gh-pages -d dist",
-    "lint": "eslint src --ext jsx --ext js",
-    "serve": "npm run build && http-server dist -p 6002",
-    "analyze": "npm run build -- --analyze"
+    "deploy": "yarn build && gh-pages -d dist",
+    "test": "npm run lint && prettier --check . && npm run typecheck",
+    "lint": "eslint src --ext .js,.jsx,.ts,.tsx",
+    "typecheck": "tsc --noEmit",
+    "serve": "yarn build && http-server dist -p 6002",
+    "analyze": "yarn build -- --analyze"
   },
   "browserslist": [
     "> 1%",
     "last 2 versions"
   ],
   "devDependencies": {
-    "@babel/core": "^7.11.6",
-    "@babel/plugin-proposal-class-properties": "^7.10.4",
-    "@babel/plugin-proposal-export-default-from": "^7.10.4",
-    "@babel/plugin-proposal-export-namespace-from": "^7.10.4",
-    "@babel/preset-env": "^7.11.5",
-    "@babel/preset-react": "^7.10.4",
-    "@rtivital/eslint-config": "1.0.1",
-    "autoprefixer": "^9.8.6",
-    "babel-eslint": "^10.1.0",
-    "babel-loader": "^8.1.0",
+    "@eslint/js": "^9.39.1",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.6.1",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "autoprefixer": "^10.4.20",
     "cname-webpack-plugin": "^2.0.1",
-    "cross-env": "^7.0.2",
-    "css-loader": "^4.3.0",
-    "eslint": "^7.9.0",
-    "eslint-config-airbnb": "^18.2.0",
-    "eslint-import-resolver-webpack": "^0.12.2",
-    "eslint-plugin-import": "^2.22.0",
-    "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-react": "^7.20.6",
-    "eslint-plugin-react-hooks": "^4.1.2",
-    "favicons-webpack-plugin": "^4.2.0",
-    "file-loader": "^6.1.0",
-    "gh-pages": "^3.1.0",
-    "html-webpack-plugin": "^4.4.1",
-    "http-server": "^0.12.3",
-    "less": "^3.12.2",
-    "less-loader": "^7.0.1",
-    "mini-css-extract-plugin": "^0.11.2",
-    "open-browser-webpack-plugin": "^0.0.5",
-    "optimize-css-assets-webpack-plugin": "^5.0.4",
-    "postcss": "^7.0.32",
-    "postcss-loader": "^4.0.1",
-    "rimraf": "^3.0.2",
-    "style-loader": "^1.2.1",
-    "terser-webpack-plugin": "^4.2.0",
-    "webpack": "^4.44.1",
-    "webpack-bundle-analyzer": "^3.8.0",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.0",
-    "worker-loader": "^3.0.2",
-    "yargs": "^16.0.3"
+    "cross-env": "^7.0.3",
+    "css-loader": "^7.1.2",
+    "css-minimizer-webpack-plugin": "^7.0.2",
+    "eslint": "^9.39.1",
+    "eslint-config-mantine": "^4.0.2",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "favicons": "^7.2.0",
+    "favicons-webpack-plugin": "^6.0.1",
+    "gh-pages": "^6.3.0",
+    "html-webpack-plugin": "^5.6.3",
+    "http-server": "^14.1.1",
+    "less": "^4.2.2",
+    "less-loader": "^12.2.0",
+    "mini-css-extract-plugin": "^2.9.2",
+    "postcss": "^8.5.3",
+    "postcss-loader": "^8.1.1",
+    "prettier": "^3.5.3",
+    "react-refresh": "^0.16.0",
+    "rimraf": "^6.0.1",
+    "style-loader": "^4.0.0",
+    "terser-webpack-plugin": "^5.3.14",
+    "ts-loader": "^9.5.2",
+    "typescript": "^5.8.2",
+    "typescript-eslint": "^8.46.2",
+    "webpack": "^5.98.0",
+    "webpack-bundle-analyzer": "^4.10.2",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.0"
   },
   "dependencies": {
-    "classnames": "^2.2.6",
-    "color": "^3.1.2",
-    "faker": "^4.1.0",
+    "@faker-js/faker": "^9.5.0",
+    "@mantine/hooks": "^7.17.8",
+    "clsx": "^2.1.1",
+    "color": "^5.0.2",
     "fuse.js": "^6.4.1",
-    "lorem-ipsum": "^2.0.3",
+    "lorem-ipsum": "^2.0.8",
     "normalize.css": "^8.0.1",
-    "offline-plugin": "^5.0.7",
     "open-color": "^1.7.0",
     "pokeipsum": "^1.1.0",
-    "prettier": "^2.1.1",
     "prop-types": "^15.7.2",
-    "react": "^16.13.1",
-    "react-colorful": "^4.0.4",
-    "react-custom-scrollbars": "^4.2.1",
-    "react-dom": "^16.13.1",
-    "react-hot-loader": "^4.12.21",
-    "react-router-dom": "^5.2.0",
+    "react": "^18.3.1",
+    "react-colorful": "^5.6.1",
+    "react-custom-scrollbars-2": "^4.5.0",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.30.0",
     "samuel-ipsum": "^1.0.11",
-    "svg-to-jsx": "^1.0.2",
-    "svgo-browser": "^1.3.7",
-    "uuid": "^8.3.0",
-    "xooks": "^2.2.6"
+    "uuid": "^11.1.0"
   }
 }

eslint.config.mjs

@@ -0,0 +1,50 @@
+import type { ReactElement } from 'react';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+
+import ThemeProvider from './ThemeProvider';
+import AppContainer from './components/AppContainer/AppContainer';
+
+import Index from './pages/index/Index';
+import About from './pages/about/About';
+import NotFound from './pages/not-found/NotFound';
+
+import TriangleGenerator from './apps/triangle-generator/TriangleGenerator';
+import LoremIpsum from './apps/lorem-ipsum/LoremIpsum';
+import SvgCompressor from './apps/svg-compressor/SvgCompressor';
+import SvgToJsx from './apps/svg-to-jsx/SvgToJsx';
+import HtmlSymbols from './apps/html-symbols/HtmlSymbols';
+import Base64Encoding from './apps/b64-encoding/B64Encoding';
+import ColorShadesGenerator from './apps/color-shades-generator/ColorShadesGenerator';
+import PageDividers from './apps/page-dividers/PageDividers';
+import FakeDataGenerator from './apps/fake-data-generator/FakeDataGenerator';
+import CssCursors from './apps/css-cursors/CssCursors';
+import EventsKeycode from './apps/events-keycode/EventsKeycode';
+import GradientGenerator from './apps/gradient-generator/GradientGenerator';
+
+const withContainer = (component: ReactElement) => <AppContainer>{component}</AppContainer>;
+
+export default function App() {
+  return (
+    <ThemeProvider>
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<Index />} />
+          <Route path="/about" element={<About />} />
+          <Route path="/triangle-generator" element={withContainer(<TriangleGenerator />)} />
+          <Route path="/lorem-ipsum" element={withContainer(<LoremIpsum />)} />
+          <Route path="/svg-compressor" element={withContainer(<SvgCompressor />)} />
+          <Route path="/svg-to-jsx" element={withContainer(<SvgToJsx />)} />
+          <Route path="/html-symbols" element={withContainer(<HtmlSymbols />)} />
+          <Route path="/b64-encoding" element={withContainer(<Base64Encoding />)} />
+          <Route path="/color-shades-generator" element={withContainer(<ColorShadesGenerator />)} />
+          <Route path="/page-dividers" element={withContainer(<PageDividers />)} />
+          <Route path="/fake-data-generator" element={withContainer(<FakeDataGenerator />)} />
+          <Route path="/css-cursors" element={withContainer(<CssCursors />)} />
+          <Route path="/events-keycode" element={withContainer(<EventsKeycode />)} />
+          <Route path="/gradient-generator" element={withContainer(<GradientGenerator />)} />
+          <Route path="*" element={withContainer(<NotFound />)} />
+        </Routes>
+      </BrowserRouter>
+    </ThemeProvider>
+  );
+}