Refactor styles to import from specific theme files

package.json

@@ -48,7 +48,7 @@
         "core-dts": "0.0.3",
         "eslint": "8.40.0",
         "eslint-config-with-tsconfig": "1.4.8",
-        "rome": "12.1.0",
+        "rome": "12.1.1",
         "sass": "1.62.1",
         "ts-essentials": "9.3.2",
         "tsx": "3.12.7",

src/app.tsx

@@ -4,7 +4,8 @@ import { lazy, useMemo } from "react"
 import { match } from "ts-pattern"
 
 import { Router } from "./router"
-import { mantineThemetheme, styled } from "./theme"
+import { mantineThemetheme } from "./theme/mantine.config"
+import { styled } from "./theme/stitches.config"
 
 const Main = lazy(() => import("./pages/Main"))
 const About = lazy(() => import("./pages/About"))

src/components/Divider/index.tsx → src/components/Divider.tsx

@@ -1,6 +1,6 @@
 import { Divider as MTDivider } from "@mantine/core"
 
-import { styled } from "@/theme"
+import { styled } from "@/theme/stitches.config"
 
 export const Divider = styled(MTDivider, {
     margin: "4px 0",

src/components/Header/index.tsx → src/components/Header.tsx

@@ -1,6 +1,6 @@
 import { Title as MTTitle } from "@mantine/core"
 
-import { styled } from "@/theme"
+import { styled } from "@/theme/stitches.config"
 
 export const Header = styled(MTTitle, {
     margin: "0",

src/lib/config.ts

@@ -1,4 +1,4 @@
-/* eslint-disable promise/prefer-await-to-then */
+/* eslint-disable @typescript-eslint/no-invalid-void-type, promise/prefer-await-to-then */
 import { Option, Result } from "@swan-io/boxed"
 import { Store } from "tauri-plugin-store-api"
 
@@ -21,16 +21,16 @@ export class ConfigManager<T> {
         return new ConfigManager<T>(props)
     }
 
-    async loadConfig() {
-        return Result.fromPromise(this.#store.entries().then(Object.fromEntries).then(this.parse))
+    loadConfig() {
+        return Result.fromPromise<T, Error>(this.#store.entries().then(Object.fromEntries).then(this.parse))
     }
 
     resetConfig() {
-        return Result.fromPromise(this.#store.reset())
+        return Result.fromPromise<void, Error>(this.#store.reset())
     }
 
     setConfig<K extends Extract<keyof T, string>>(key: K, value: T[K]) {
-        return Result.fromPromise(this.#store.set(key, value).then(() => this.#store.save()))
+        return Result.fromPromise<void, Error>(this.#store.set(key, value).then(() => this.#store.save()))
     }
 
     async getConfig<K extends Extract<keyof T, string>>(key: K) {

src/lib/enum.ts

@@ -0,0 +1,24 @@
+import type { UnionFromTuple } from "./types"
+
+export const Enum: <T extends string[]>(...args: T) => Readonly<{ [P in UnionFromTuple<T>]: P }> = <T extends string[]>(
+    ...args: T
+) => {
+    type Ret = { [P in UnionFromTuple<typeof args>]: P }
+    return Object.freeze(
+        args.reduce((acc, next) => {
+            return {
+                ...acc,
+                [next]: next,
+            } as Ret
+        }, Object.create(null)) as Ret,
+    )
+}
+
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export type Enum<T extends object> = T[keyof T]
+
+export const isKeyOfEnum = <T extends object>(enumType: T) => {
+    return (key: unknown): key is keyof T => {
+        return !!Object.values(enumType).includes(key)
+    }
+}

src/lib/types.ts

@@ -3,26 +3,3 @@ export type UnknownObject = {
 }
 
 export type UnionFromTuple<T> = T extends (infer U)[] ? U : never
-
-export const Enum: <T extends string[]>(...args: T) => Readonly<{ [P in UnionFromTuple<T>]: P }> = <T extends string[]>(
-    ...args: T
-) => {
-    type Ret = { [P in UnionFromTuple<typeof args>]: P }
-    return Object.freeze(
-        args.reduce((acc, next) => {
-            return {
-                ...acc,
-                [next]: next,
-            } as Ret
-        }, Object.create(null)) as Ret,
-    )
-}
-
-// eslint-disable-next-line @typescript-eslint/no-redeclare
-export type Enum<T extends object> = T[keyof T]
-
-export const isKeyOfEnum = <T extends object>(enumType: T) => {
-    return (key: unknown): key is keyof T => {
-        return !!Object.values(enumType).includes(key)
-    }
-}

src/pages/About/index.tsx

@@ -2,7 +2,7 @@ import { Flex, Image, Text } from "@mantine/core"
 import { getName, getVersion } from "@tauri-apps/api/app"
 import { useAsync } from "react-use"
 
-import { styled } from "@/theme"
+import { styled } from "@/theme/stitches.config"
 
 const Container = styled(Flex, {
     padding: "16px",

src/pages/Main/styles.ts

@@ -1,6 +1,6 @@
 import { Flex, Slider, Switch, Title } from "@mantine/core"
 
-import { styled } from "@/theme"
+import { styled } from "@/theme/stitches.config"
 
 export const Container = styled(Flex, {
     padding: "8px 16px 6px 16px",

src/pages/Preferences/index.tsx

@@ -6,7 +6,7 @@ import { Header } from "@/components/Header"
 import { useTranslation } from "@/hooks/useTranslation"
 import { type Locales } from "@/i18n/i18n-types"
 import { isLocale } from "@/i18n/i18n-util"
-import { styled } from "@/theme"
+import { styled } from "@/theme/stitches.config"
 import { Theme } from "@/types"
 
 const themes: { label: string; value: Theme }[] = [

src/types/index.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-redeclare */
 import { z } from "zod"
 
-import { Enum, isKeyOfEnum } from "@/lib/types"
+import { Enum, isKeyOfEnum } from "@/lib/enum"
 
 export const Config = z.object({
     accEnabled: z.boolean().default(false).describe("Acceleration enabled"),