⬆️ Upgrade frontend-tooling and docs (#486)

* wip: fix tsc errors

* wip: add lerna, pre-start upgrading dev tooling

* wip: upgrade eslint

* wip: fix lints

* wip: so many

* wow

* lots of changes

* wip: more fixes

* fix components tsc checks

* fix lints!

* fix oopsie

* wow

* adjust ci

* ugh

* upgrade docs

* fix redirects, add sdk docs

* bump node version in ci

* fix docs lint

* bump docker node version

* sigh

* ignore transpiled tests

* small doc changes

.github/actions/setup-yarn/action.yml

@@ -13,7 +13,7 @@ runs:
     - name: Setup node
       uses: actions/setup-node@v4
       with:
-        node-version: '20.0.0'
+        node-version: '20.9.0'
 
     - name: Install yarn
       shell: bash
@@ -23,7 +23,7 @@ runs:
       if: ${{ inputs.cache-dependencies == 'true' }}
       uses: actions/setup-node@v4
       with:
-        node-version: '20.0.0'
+        node-version: '20.9.0'
         cache: 'yarn'
 
     - name: Install dependencies

.github/workflows/ci.yaml

@@ -100,9 +100,5 @@ jobs:
       - name: Run TypeScript lints
         run: yarn lint
 
-      # TODO: Figure out how to run tests in parallel, I don't really want to upgrade to berry which
-      # means perhaps lerna is the only option? It isn't a big deal now since there is really only one
-      # package that defines tests, but this will change over time
       - name: Run TypeScript tests
         run: yarn test
-        working-directory: ./packages/browser

.husky/pre-commit

@@ -1,4 +1,3 @@
 #!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
 
 npx lint-staged

apps/desktop/package.json

@@ -4,8 +4,7 @@
 	"description": "",
 	"license": "MIT",
 	"scripts": {
-		"lint": "cargo clippy --package stump_desktop -- -D warnings",
-		"format": "cargo fmt --package stump_desktop",
+		"lint": "eslint .",
 		"tauri": "tauri",
 		"start": "tauri dev --no-watch",
 		"start-bundled": "yarn tauri dev  --no-watch -- --features bundled-server",

apps/desktop/src/App.tsx

@@ -51,7 +51,6 @@ function App() {
 			try {
 				const currentServer = await store.get<SavedServer>('active_server')
 				if (token && currentServer) {
-					console.debug('Saving API token for', currentServer.name)
 					await tauriRPC.setApiToken(currentServer.name, token)
 				}
 			} catch (err) {

apps/expo/src/AppEntry.tsx

@@ -11,6 +11,7 @@ SplashScreen.preventAutoHideAsync()
 
 export function AppEntry() {
 	const [loaded, error] = useFonts({
+		// eslint-disable-next-line @typescript-eslint/no-require-imports
 		SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
 	})
 

apps/expo/src/components/reader/UnsupportedReader.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { ScreenRootView, Text } from '../primitives'
 
 export default function UnsupportedReader() {

apps/expo/src/components/reader/epub/EpubJSFooter.tsx

@@ -1,5 +1,4 @@
 import { useReader } from '@epubjs-react-native/core'
-import React from 'react'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 import { Text, View } from '@/components/primitives'

apps/expo/src/components/reader/epub/EpubJSReader.tsx

@@ -4,7 +4,7 @@ import { useSDK } from '@stump/client'
 import { isAxiosError } from '@stump/sdk'
 import { Media } from '@stump/sdk'
 import { useColorScheme } from 'nativewind'
-import React, { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { useWindowDimensions } from 'react-native'
 
 import EpubJSReaderContainer from './EpubJSReaderContainer'

apps/expo/src/components/reader/epub/EpubJSReaderContainer.tsx

@@ -1,5 +1,4 @@
 import { ReaderProvider } from '@epubjs-react-native/core'
-import React from 'react'
 
 import { ScreenRootView, View } from '@/components/primitives'
 

apps/expo/src/components/reader/epub/LoadingSpinner.tsx

@@ -1,5 +1,5 @@
 import { LoadingFileProps } from '@epubjs-react-native/core'
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 
 import { Text, View } from '@/components/primitives'
 

apps/expo/src/components/reader/image/ImageBasedReader.tsx

@@ -2,7 +2,7 @@ import { useSDK, useUpdateMediaProgress } from '@stump/client'
 import { isAxiosError } from '@stump/sdk'
 import { Media } from '@stump/sdk'
 import { useColorScheme } from 'nativewind'
-import React, { useCallback, useMemo, useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import { FlatList, TouchableWithoutFeedback, useWindowDimensions } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 

apps/expo/src/components/reader/image/ReaderContainer.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { ScreenRootView } from '@/components/primitives'
 
 type Props = {

apps/expo/src/constants/colors.ts

@@ -1,5 +1,3 @@
-/* eslint-disable sort-keys-fix/sort-keys-fix */
-
 export const gray = {
 	DEFAULT: '#292C30',
 	50: '#E2E4E6',

apps/expo/src/screens/LoginOrClaim.tsx

@@ -1,6 +1,6 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useLoginOrRegister } from '@stump/client'
-import React, { useCallback } from 'react'
+import { useCallback } from 'react'
 import { Controller, useForm } from 'react-hook-form'
 import { Image, Text, TouchableOpacity, View } from 'react-native'
 import { z } from 'zod'
@@ -41,7 +41,7 @@ export default function LoginOrClaim() {
 					await registerUser({ password, username })
 					await loginUser({ password, username })
 				}
-			} catch (error) {
+			} catch {
 				// TODO: alert error or set error somewhere
 			}
 		},
@@ -53,6 +53,7 @@ export default function LoginOrClaim() {
 			// just return a view with the icon.png:
 			return (
 				<View>
+					{/* eslint-disable-next-line @typescript-eslint/no-require-imports */}
 					<Image className="h-32 w-32" source={require('../../assets/images/icon.png')} />
 				</View>
 			)
@@ -63,6 +64,7 @@ export default function LoginOrClaim() {
 					<Text className="mb-3 text-center text-sm">
 						Enter a username and password to claim it
 					</Text>
+					{/* eslint-disable-next-line @typescript-eslint/no-require-imports */}
 					<Image className="h-24 w-24" source={require('../../assets/images/icon.png')} />
 				</View>
 			)

apps/expo/src/screens/ServerNotAccessible.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { ScreenRootView, Text } from '@/components'
 
 // TODO: This component needs to be aware:

apps/expo/src/screens/authenticated/AuthenticatedNavigator.tsx

@@ -1,5 +1,4 @@
 import { createNativeStackNavigator } from '@react-navigation/native-stack'
-import React from 'react'
 
 import { BookStackNavigator } from './book'
 import MainTabNavigator from './MainTabNavigator'

apps/expo/src/screens/authenticated/Home.tsx

@@ -1,5 +1,4 @@
 import { queryClient, useSDK } from '@stump/client'
-import React from 'react'
 import { Button } from 'react-native'
 
 import { ScreenRootView, Text } from '@/components'

apps/expo/src/screens/authenticated/MainTabNavigator.tsx

@@ -7,7 +7,6 @@ import {
 	Settings as SettingsIcon,
 } from 'lucide-react-native'
 import { useColorScheme } from 'nativewind'
-import React from 'react'
 
 import { gray } from '@/constants/colors'
 import { usePreferencesStore } from '@/stores'

apps/expo/src/screens/authenticated/book/BookReaderScreen.tsx

@@ -1,6 +1,5 @@
 import { RouteProp, useRoute } from '@react-navigation/native'
 import { ARCHIVE_EXTENSION, EBOOK_EXTENSION, PDF_EXTENSION, useMediaByIdQuery } from '@stump/client'
-import React from 'react'
 
 import { EpubJSReader, ImageBasedReader, UnsupportedReader } from '@/components/reader'
 

apps/expo/src/screens/authenticated/explore/Explore.tsx

@@ -1,6 +1,6 @@
 import { useNavigation } from '@react-navigation/native'
 import { useMediaCursorQuery } from '@stump/client'
-import React, { useCallback } from 'react'
+import { useCallback } from 'react'
 import { FlatList } from 'react-native'
 
 import { ScreenRootView, View } from '@/components'

apps/expo/src/screens/authenticated/libraries/LibrariesList.tsx

@@ -1,7 +1,7 @@
 import { useNavigation } from '@react-navigation/native'
 import { useLibraries } from '@stump/client'
 import { Library } from '@stump/sdk'
-import React, { useCallback } from 'react'
+import { useCallback } from 'react'
 import { FlatList, TouchableOpacity } from 'react-native'
 
 import { ScreenRootView, Text, View } from '@/components'

apps/expo/src/screens/authenticated/libraries/LibrarySeriesBooks.tsx

@@ -1,6 +1,6 @@
 import { type RouteProp, useNavigation, useRoute } from '@react-navigation/native'
 import { useMediaCursorQuery } from '@stump/client'
-import React, { useCallback } from 'react'
+import { useCallback } from 'react'
 import { FlatList } from 'react-native'
 
 import { ScreenRootView, View } from '@/components'

apps/expo/src/screens/authenticated/libraries/LibrarySeriesList.tsx

@@ -1,7 +1,7 @@
 import { type RouteProp, useNavigation, useRoute } from '@react-navigation/native'
 import { useSeriesCursorQuery } from '@stump/client'
 import { Series } from '@stump/sdk'
-import React, { useCallback } from 'react'
+import { useCallback } from 'react'
 import { FlatList, TouchableOpacity } from 'react-native'
 
 import { ScreenRootView, Text, View } from '@/components'

apps/expo/src/screens/authenticated/settings/SettingsListItem.tsx

@@ -1,6 +1,5 @@
 import { ChevronRight } from 'lucide-react-native'
 import { useColorScheme } from 'nativewind'
-import React from 'react'
 
 import { Link, Text, View } from '@/components'
 import { gray } from '@/constants/colors'

apps/expo/src/screens/authenticated/settings/SettingsNavigator.tsx

@@ -1,6 +1,5 @@
 import { NavigationProp } from '@react-navigation/native'
 import { createNativeStackNavigator } from '@react-navigation/native-stack'
-import React from 'react'
 
 import { AccountSettings, AppearanceSettings } from './app'
 import SettingsRoot from './SettingsRoot'

apps/expo/src/screens/authenticated/settings/SettingsRoot.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { ScreenRootView, Text, View } from '@/components'
 
 import SettingsListItem from './SettingsListItem'

apps/expo/src/screens/authenticated/settings/app/ColorSchemeToggle.tsx

@@ -1,5 +1,4 @@
 import { useColorScheme } from 'nativewind'
-import React from 'react'
 import { Switch } from 'react-native'
 
 import { Text, View } from '@/components'

apps/expo/src/screens/authenticated/settings/app/TabNameToggle.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Switch } from 'react-native'
 
 import { Text, View } from '@/components'

apps/expo/src/screens/offline/Downloads.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { ScreenRootView, Text } from '@/components'
 
 export default function Downloads() {

apps/expo/tailwind.config.js

@@ -1,5 +1,3 @@
-/* eslint-disable sort-keys-fix/sort-keys-fix */
-
 /** @type {import('tailwindcss').Config} */
 module.exports = {
 	content: ['./src/**/*.{js,jsx,ts,tsx}'],

apps/web/tsconfig.json

@@ -6,6 +6,10 @@
 		"jsx": "preserve",
 		"module": "es2022",
 		"moduleResolution": "Node",
+		"composite": true,
+		"declaration": true,
+		"emitDeclarationOnly": true,
+		"outDir": "dist",
 		"paths": {
 			"@stump/client": ["../../packages/client/src/index.ts"],
 			"@stump/client/*": ["../../packages/client/src/*"],

core/src/lib.rs

@@ -274,7 +274,6 @@ mod tests {
 
 		let mut file = File::create(path)?;
 
-		file.write_all(b"/* eslint-disable @typescript-eslint/ban-types */\n")?;
 		file.write_all(b"// DO NOT MODIFY THIS FILE, IT IS AUTOGENERATED\n\n")?;
 
 		file.write_all(b"// CORE TYPE GENERATION\n\n")?;

docker/Dockerfile

@@ -2,7 +2,7 @@
 # Frontend Build Stage
 # ------------------------------------------------------------------------------
 
-FROM node:20.0.0-alpine3.16 AS frontend
+FROM node:20.9.0-alpine3.18 AS frontend
 ARG TARGETARCH
 
 WORKDIR /app