refactor: directory structure cleanup

docs/dev/cleanup.md

@@ -0,0 +1,14 @@
+Tracking code cleanup campaign progress
+
+To completely rewrite in TS:
+
+* utils.js
+* CharacterTab.jsx
+* CharacterPreview.jsx
+* RelicScorerTab.jsx
+* FormSetConditionals.jsx
+* OptimizerGrid.jsx
+* RelicsTab.jsx
+
+Files where a refactor is needed will be commented with priority, based on impact and severity
+// FIXME [HIGH | MED | LOW]

misc/i18n/generateTranslations.ts

@@ -4,7 +4,7 @@ import { writeFile } from "fs"
 import { readFile } from "fs/promises"
 //@ts-ignore
 import yaml from "js-yaml"
-import { TsUtils } from '../../src/lib/TsUtils'
+import { TsUtils } from 'src/lib/utils/TsUtils'
 import { betaInformation } from "./betaInformation"
 import pathConfig from './AvatarBaseType.json'
 import AvatarConfig from './AvatarConfig.json'

package.json

@@ -86,6 +86,7 @@
     "@types/json-stable-stringify": "^1.0.36",
     "@types/node": "^22.2.0",
     "@types/object-hash": "^3.0.6",
+    "@types/string-similarity": "^4.0.2",
     "@types/uuid": "^10.0.0",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "@webgpu/types": "^0.1.48",

src/App.tsx

@@ -1,11 +1,11 @@
 import { ConfigProvider, Layout, message, Modal, notification, theme } from 'antd'
-import { LayoutHeader } from 'components/LayoutHeader'
-import { LayoutSider } from 'components/LayoutSider'
-import { SettingsDrawer } from 'components/SettingsDrawer'
-import Tabs from 'components/Tabs'
-import DB from 'lib/db'
-import { Gradient } from 'lib/gradient'
-import { checkForUpdatesNotification } from 'lib/notifications'
+import { checkForUpdatesNotification } from 'lib/interactions/notifications'
+import { LayoutHeader } from 'lib/layout/LayoutHeader'
+import { LayoutSider } from 'lib/layout/LayoutSider'
+import { SettingsDrawer } from 'lib/overlays/drawers/SettingsDrawer'
+import { Gradient } from 'lib/rendering/gradient'
+import DB from 'lib/state/db'
+import Tabs from 'lib/tabs/Tabs'
 import React, { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 

src/hooks/usePublish.ts

@@ -1,7 +1,6 @@
 export const usePublish = () => {
-  return (event, data) => {
-    // emitter.emit(event, data);
-    console.log(`++++++++++ Publishing [${event}] with data: ${data}`)
+  return (event: string, data: string) => {
+    console.log(`Publishing [${event}] with data: ${data}`)
     document.dispatchEvent(new CustomEvent(event, { detail: data }))
   }
 }

src/hooks/useSubscribe.ts

@@ -1,15 +1,12 @@
 import { useEffect } from 'react'
 
-export const useSubscribe = (eventName: string, callback) => {
-  // console.log(`++++++++++ Subscribing to [${eventName}]`);
-
+export const useSubscribe = (eventName: string, callback: () => void) => {
   const unsubscribe = () => {
-    // console.log(`++++++++++ Unsubscribing from [${eventName}]`);
     document.removeEventListener(eventName, callback)
   }
 
   useEffect(() => {
     document.addEventListener(eventName, callback)
     return () => unsubscribe()
-  }, [eventName, callback]) // eslint-disable-line react-hooks/exhaustive-deps
+  }, [eventName, callback])
 }

src/icons/CoffeeIcon.tsx

@@ -1,14 +1,18 @@
 import Icon from '@ant-design/icons'
+import React from 'react'
 
 const IconSVG = () => (
   <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'>
-    <path fillRule='evenodd' d='M.5 6a.5.5 0 0 0-.488.608l1.652 7.434A2.5 2.5 0 0 0 4.104 16h5.792a2.5 2.5 0 0 0 2.44-1.958l.131-.59a3 3 0 0 0 1.3-5.854l.221-.99A.5.5 0 0 0 13.5 6zM13 12.5a2.01 2.01 0 0 1-.316-.025l.867-3.898A2.001 2.001 0 0 1 13 12.5'/>
+    <path
+      fillRule='evenodd'
+      d='M.5 6a.5.5 0 0 0-.488.608l1.652 7.434A2.5 2.5 0 0 0 4.104 16h5.792a2.5 2.5 0 0 0 2.44-1.958l.131-.59a3 3 0 0 0 1.3-5.854l.221-.99A.5.5 0 0 0 13.5 6zM13 12.5a2.01 2.01 0 0 1-.316-.025l.867-3.898A2.001 2.001 0 0 1 13 12.5'
+    />
     <path
       d='m4.4.8-.003.004-.014.019a4.167 4.167 0 0 0-.204.31 2.327 2.327 0 0 0-.141.267c-.026.06-.034.092-.037.103v.004a.593.593 0 0 0 .091.248c.075.133.178.272.308.445l.01.012c.118.158.26.347.37.543.112.2.22.455.22.745 0 .188-.065.368-.119.494a3.31 3.31 0 0 1-.202.388 5.444 5.444 0 0 1-.253.382l-.018.025-.005.008-.002.002A.5.5 0 0 1 3.6 4.2l.003-.004.014-.019a4.149 4.149 0 0 0 .204-.31 2.06 2.06 0 0 0 .141-.267c.026-.06.034-.092.037-.103a.593.593 0 0 0-.09-.252A4.334 4.334 0 0 0 3.6 2.8l-.01-.012a5.099 5.099 0 0 1-.37-.543A1.53 1.53 0 0 1 3 1.5c0-.188.065-.368.119-.494.059-.138.134-.274.202-.388a5.446 5.446 0 0 1 .253-.382l.025-.035A.5.5 0 0 1 4.4.8m3 0-.003.004-.014.019a4.167 4.167 0 0 0-.204.31 2.327 2.327 0 0 0-.141.267c-.026.06-.034.092-.037.103v.004a.593.593 0 0 0 .091.248c.075.133.178.272.308.445l.01.012c.118.158.26.347.37.543.112.2.22.455.22.745 0 .188-.065.368-.119.494a3.31 3.31 0 0 1-.202.388 5.444 5.444 0 0 1-.253.382l-.018.025-.005.008-.002.002A.5.5 0 0 1 6.6 4.2l.003-.004.014-.019a4.149 4.149 0 0 0 .204-.31 2.06 2.06 0 0 0 .141-.267c.026-.06.034-.092.037-.103a.593.593 0 0 0-.09-.252A4.334 4.334 0 0 0 6.6 2.8l-.01-.012a5.099 5.099 0 0 1-.37-.543A1.53 1.53 0 0 1 6 1.5c0-.188.065-.368.119-.494.059-.138.134-.274.202-.388a5.446 5.446 0 0 1 .253-.382l.025-.035A.5.5 0 0 1 7.4.8m3 0-.003.004-.014.019a4.077 4.077 0 0 0-.204.31 2.337 2.337 0 0 0-.141.267c-.026.06-.034.092-.037.103v.004a.593.593 0 0 0 .091.248c.075.133.178.272.308.445l.01.012c.118.158.26.347.37.543.112.2.22.455.22.745 0 .188-.065.368-.119.494a3.198 3.198 0 0 1-.202.388 5.385 5.385 0 0 1-.252.382l-.019.025-.005.008-.002.002A.5.5 0 0 1 9.6 4.2l.003-.004.014-.019a4.149 4.149 0 0 0 .204-.31 2.06 2.06 0 0 0 .141-.267c.026-.06.034-.092.037-.103a.593.593 0 0 0-.09-.252A4.334 4.334 0 0 0 9.6 2.8l-.01-.012a5.099 5.099 0 0 1-.37-.543A1.53 1.53 0 0 1 9 1.5c0-.188.065-.368.119-.494.059-.138.134-.274.202-.388a5.446 5.446 0 0 1 .253-.382l.025-.035A.5.5 0 0 1 10.4.8'
     />
   </svg>
 )
 
-export const CoffeeIcon = (props) => {
+export const CoffeeIcon = (props: React.ComponentProps<typeof Icon>) => {
   return <Icon component={IconSVG} {...props}/>
 }

src/icons/DiscordIcon.tsx

@@ -1,4 +1,5 @@
 import Icon from '@ant-design/icons'
+import React from 'react'
 
 const IconSVG = () => (
   <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 -1 16 16'>
@@ -8,6 +9,6 @@ const IconSVG = () => (
   </svg>
 )
 
-export const DiscordIcon = (props) => {
+export const DiscordIcon = (props: React.ComponentProps<typeof Icon>) => {
   return <Icon component={IconSVG} {...props}/>
 }

src/icons/GithubIcon.tsx

@@ -1,11 +1,12 @@
 import Icon from '@ant-design/icons'
+import React from 'react'
 
 const IconSVG = () => (
   <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'>
     <path d='M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8'/>
   </svg>
 )
 
-export const GithubIcon = (props) => {
+export const GithubIcon = (props: React.ComponentProps<typeof Icon>) => {
   return <Icon component={IconSVG} {...props}/>
 }

src/icons/RightIcon.tsx

@@ -1,4 +1,5 @@
 import Icon from '@ant-design/icons'
+import React from 'react'
 
 const IconSVG = () => (
   <svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24'>
@@ -8,6 +9,6 @@ const IconSVG = () => (
   </svg>
 )
 
-export const RightIcon = (props) => {
+export const RightIcon = (props: React.ComponentProps<typeof Icon>) => {
   return <Icon component={IconSVG} {...props}/>
 }

src/icons/UpArrow.tsx

@@ -1,11 +1,12 @@
 import Icon from '@ant-design/icons'
+import React from 'react'
 
 const IconSVG = () => (
   <svg className='w-6 h-6 text-gray-800 dark:text-white' aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' viewBox='0 1 20 20'>
     <path stroke='currentColor' strokeLinecap='round' strokeLinejoin='round' strokeWidth='2' d='M12 6v13m0-13 4 4m-4-4-4 4'/>
   </svg>
 )
 
-export const UpArrow = (props) => {
+export const UpArrow = (props: React.ComponentProps<typeof Icon>) => {
   return <Icon component={IconSVG} {...props}/>
 }

src/index.tsx

@@ -1,33 +1,33 @@
-import ReactDOM from 'react-dom/client'
-import { ErrorBoundary } from 'react-error-boundary'
-import 'style/style.css'
-import 'style/hsro.css'
-import WrappedApp from 'App'
-import 'lib/i18n'
-
-import { WorkerPool } from 'lib/workerPool'
-import { Constants } from 'lib/constants'
-import { DataParser } from 'lib/dataParser'
-import { DB } from 'lib/db'
-import { CharacterStats } from 'lib/characterStats'
-import { Assets } from 'lib/assets'
-import { RelicAugmenter } from 'lib/relicAugmenter'
-import { StatCalculator } from 'lib/statCalculator'
-import { Gradient } from 'lib/gradient'
-import { SaveState } from 'lib/saveState'
-import { RelicFilters } from 'lib/relicFilters'
-import { Renderer } from 'lib/renderer'
-import { Message } from 'lib/message'
-import { Hint } from 'lib/hint'
-import { CharacterConverter } from 'lib/characterConverter'
-import { RelicScorer } from 'lib/relicScorerPotential'
-import { BufferPacker } from 'lib/bufferPacker'
 import { Typography } from 'antd'
-import { RelicRollFixer } from 'lib/relicRollFixer'
-import { Themes } from 'lib/theme'
+import WrappedApp from 'App'
+import 'lib/i18n/i18n'
+import { Constants } from 'lib/constants/constants'
 import { verifyWebgpuSupport } from 'lib/gpu/webgpuDevice'
 import 'overlayscrollbars/overlayscrollbars.css'
+import { CharacterConverter } from 'lib/importer/characterConverter'
+import { Hint } from 'lib/interactions/hint'
+import { Message } from 'lib/interactions/message'
+import { BufferPacker } from 'lib/optimizer/bufferPacker'
+import { RelicAugmenter } from 'lib/relics/relicAugmenter'
+import { RelicFilters } from 'lib/relics/relicFilters'
+import { RelicRollFixer } from 'lib/relics/relicRollFixer'
+import { RelicScorer } from 'lib/relics/relicScorerPotential'
+import { StatCalculator } from 'lib/relics/statCalculator'
+import { Assets } from 'lib/rendering/assets'
+import { Gradient } from 'lib/rendering/gradient'
+import { Renderer } from 'lib/rendering/renderer'
+import { Themes } from 'lib/rendering/theme'
+import { CharacterStats } from 'lib/scoring/characterStats'
+import { DataParser } from 'lib/state/dataParser'
+import { DB } from 'lib/state/db'
+import { SaveState } from 'lib/state/saveState'
+
+import { WorkerPool } from 'lib/worker/workerPool'
 import { OverlayScrollbars } from 'overlayscrollbars'
+import ReactDOM from 'react-dom/client'
+import { ErrorBoundary } from 'react-error-boundary'
+import 'style/style.css'
+import 'style/hsro.css'
 
 window.WorkerPool = WorkerPool
 window.Constants = Constants