Modernize tools, migrate to TypeScript

[rtivital]

No description provided.

[Copilot]

Pull request overview

This PR modernizes the Omatsuri application by migrating from JavaScript to TypeScript and updating the build toolchain. The changes include migrating from Babel to TypeScript, updating webpack from v4 to v5, upgrading React from v16 to v18, updating React Router from v5 to v6, replacing PropTypes with TypeScript interfaces, and modernizing dependencies.

Changes:

• Migration from JavaScript/JSX to TypeScript/TSX with proper type definitions
• Webpack 5 upgrade with modernized configuration and plugin updates
• React 18 and React Router v6 migration with updated routing patterns
• Replacement of PropTypes with TypeScript interfaces across all components
• Modernization of dependencies including updated hooks library, faker, and other tools

Reviewed changes

Copilot reviewed 106 out of 119 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
webpack.config.js	Updated to webpack 5 with modern plugins (CssMinimizerPlugin, ReactRefreshWebpackPlugin), ts-loader, and removed deprecated plugins
tsconfig.json	Added TypeScript configuration with modern settings for React 18
package.json	Updated dependencies to latest versions, added TypeScript and modern tooling
src/index.tsx	Migrated to React 18 createRoot API
src/App.tsx	Converted to TypeScript, migrated to React Router v6
src/hooks.ts	Created custom hooks file wrapping @mantine/hooks
src/ThemeProvider.tsx	Added TypeScript types and updated hook implementations
src/workers/*.worker.js	Simplified worker implementations, removed external dependencies
src/components/**/*.tsx	Migrated all components from PropTypes to TypeScript interfaces
src/apps/**/*.tsx	Migrated all app components to TypeScript
eslint.config.mjs	Added modern ESLint flat config with TypeScript support
.github/workflows/pr-test.yml	Added CI workflow for automated testing

Comments suppressed due to low confidence (11)

src/apps/svg-to-jsx/SvgToJsx.tsx:48

• The handleMessage function is defined inside the component but used as a dependency in useLayoutEffect cleanup. This creates a new function reference on every render, which will cause the effect to re-run unnecessarily. The handleMessage function should be wrapped in useCallback with appropriate dependencies, or the effect should have an empty dependency array if it's only meant to run once on mount.
  src/apps/b64-encoding/B64Encoding.tsx:67
• The handleMessage function is defined inside the component but used in useLayoutEffect cleanup. This creates a new function reference on every render, which will cause the effect to re-run unnecessarily. The handleMessage function should be wrapped in useCallback with appropriate dependencies, or the effect should have an empty dependency array if it's only meant to run once on mount.
  src/apps/b64-encoding/B64Encoding.tsx:81
• The 'accepts' prop was removed but the prop still exists in the interface definition. The interface should match the actual implementation. Either remove the 'accepts' prop from the interface or add it back to the component implementation.
  src/components/DropPlaceholder/DropPlaceholder.tsx:30
• The HTML attribute 'accepts' is incorrect and should be 'accept'. This will prevent the file input from properly filtering the accepted file types.
  src/components/SliderInput/Slider.tsx:76
• Using 'parseInt' with base 10 has been replaced with 'Math.round' which can produce different results. 'parseInt' truncates towards zero while 'Math.round' rounds to the nearest integer. For example, parseInt(2.9, 10) returns 2 while Math.round(2.9) returns 3. This may cause positioning issues with the gradient color stops. Consider using Math.floor() if truncation behavior was intended.
  src/apps/gradient-generator/GradientLine/GradientLine.tsx:36
• Using 'parseInt' with base 10 has been replaced with 'Math.round' which can produce different results. 'parseInt' truncates towards zero while 'Math.round' rounds to the nearest integer. For example, parseInt(2.9, 10) returns 2 while Math.round(2.9) returns 3. This may cause positioning issues with the gradient color stops. Consider using Math.floor() if truncation behavior was intended.
  src/apps/gradient-generator/GradientLine/ColorStop/ColorStop.tsx:51
• Using 'parseInt' with base 10 has been replaced with 'Math.round' which can produce different results. 'parseInt' truncates towards zero while 'Math.round' rounds to the nearest integer. For example, parseInt(2.9, 10) returns 2 while Math.round(2.9) returns 3. This may cause positioning issues with the gradient color stops. Consider using Math.floor() if truncation behavior was intended.
  src/apps/svg-to-jsx/SvgToJsx.tsx:47
• The worker is being terminated in the cleanup function on every component mount. This will cause the worker to be unusable after the first render. The worker.terminate() call should only happen when the component is actually unmounted, not on every useLayoutEffect execution. Consider removing the terminate call from the cleanup function or restructuring the effect to only run once.
  src/apps/svg-compressor/SvgCompressor.tsx:63
• The worker is being terminated in the cleanup function on every component mount. This will cause the worker to be unusable after the first render. The worker.terminate() call should only happen when the component is actually unmounted, not on every useLayoutEffect execution. Consider removing the terminate call from the cleanup function or restructuring the effect to only run once.
  src/apps/b64-encoding/B64Encoding.tsx:66
• The worker is being terminated in the cleanup function on every component mount. This will cause the worker to be unusable after the first render. The worker.terminate() call should only happen when the component is actually unmounted, not on every useLayoutEffect execution. Consider removing the terminate call from the cleanup function or restructuring the effect to only run once.
  src/apps/svg-compressor/SvgCompressor.tsx:64
• The handleMessage function is defined inside the component but used in useLayoutEffect cleanup. This creates a new function reference on every render, which will cause the effect to re-run unnecessarily. The handleMessage function should be wrapped in useCallback with appropriate dependencies, or the effect should have an empty dependency array if it's only meant to run once on mount.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.