fix import and type errors

apps/games/package.json

@@ -11,6 +11,7 @@
 	"dependencies": {
 		"@faker-js/faker": "7.4.0",
 		"@nanostores/react": "0.7.1",
+		"@repo/ui": "workspace:*",
 		"just-shuffle": "4.1.1",
 		"lib": "workspace:*",
 		"lz-string": "1.5.0",
@@ -24,7 +25,13 @@
 		"ui": "workspace:*"
 	},
 	"devDependencies": {
+		"@repo/eslint-config": "workspace:*",
+		"@repo/tailwind-config": "workspace:*",
+		"@repo/typescript-config": "workspace:*",
+		"autoprefixer": "10.4.20",
 		"config": "workspace:*",
+		"postcss": "8.4.49",
+		"tailwindcss": "3.4.17",
 		"tsconfig": "workspace:*"
 	}
 }

apps/games/src/app/idiot/Game.tsx

@@ -1,19 +1,19 @@
 'use client'
 
-import type { Card, Deck, Piles } from 'src/types/card-games'
+import type { Card, Deck, Piles } from '@/types/card-games'
 
 import { useRef, useState } from 'react'
 import { FiRefreshCw } from 'react-icons/fi'
-import { Header, HeaderAction } from 'ui'
+import { Header, HeaderAction } from '@repo/ui'
 import { isDefined, isEmpty } from 'lib/utils/lang'
 import { classNames } from 'lib/utils/string'
 import { first, last, lastIndex, chunk } from 'lib/utils/array'
 import {
 	deselectAll,
 	moveCardsToPiles,
 	removeEmptyLeadingCards,
-} from 'src/lib/game'
-import { usePreloadCards } from 'src/lib/hooks'
+} from '@/lib/game'
+import { usePreloadCards } from '@/lib/hooks'
 
 const Image = ({ card }: { card: Card }) => (
 	<img
@@ -65,7 +65,7 @@ export function Game({
 				)
 				piles[index].splice(lastIndex(piles[index]), 1, moveCard)
 				if (piles[selectedIndex].length < 1) {
-					piles[selectedIndex].push(undefined)
+					piles[selectedIndex].push(undefined as unknown as Card)
 				}
 			}
 			deselectAll(piles)
@@ -85,11 +85,11 @@ export function Game({
 				.map((card, index) =>
 					card?.combined === current.combined ? index : undefined,
 				)
-				.filter(isDefined)[0]
+				.filter(isDefined)[0]!
 			const newPiles = [...piles]
 			newPiles[pileIndex].splice(lastIndex(newPiles[pileIndex]), 1)
 			if (piles[pileIndex].length < 1) {
-				piles[pileIndex].push(undefined)
+				piles[pileIndex].push(undefined as unknown as Card)
 			}
 			setPiles(newPiles)
 			return

apps/games/src/app/idiot/page.tsx

@@ -1,6 +1,6 @@
-import type { Rank, Suit } from 'src/types/card-games'
+import type { Rank, Suit } from '@/types/card-games'
 import shuffle from 'just-shuffle'
-import { createDeck } from 'src/lib/deck'
+import { createDeck } from '@/lib/deck'
 import { Game } from './Game'
 
 enum RankValue {

apps/games/src/app/ms/MineSweaper.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { MuseoModerno } from 'next/font/google'
-import { Header, Select, SelectItem } from 'ui'
+import { Header, Select, SelectItem } from '@repo/ui'
 import { useStore } from '@nanostores/react'
 import { Board } from './Board'
 import { $selectedDifficulty } from './store'

apps/games/src/app/spider/Game.tsx

@@ -1,20 +1,20 @@
 'use client'
 
-import type { Card, Deck, Piles } from 'src/types/card-games'
+import type { Card, Deck, Piles } from '@/types/card-games'
 
+import { useRouter } from 'next/navigation'
 import { useRef, useState } from 'react'
 import { FiRefreshCw, FiRotateCcw } from 'react-icons/fi'
 import { isDefined, isEmpty } from 'lib/utils/lang'
 import { chunk, first, last } from 'lib/utils/array'
-import { Header, HeaderAction } from 'ui'
+import { Header, HeaderAction } from '@repo/ui'
 import {
 	deselectAll,
 	moveCardsToPiles,
 	removeEmptyLeadingCards,
-} from 'src/lib/game'
-import { usePreloadCards } from 'src/lib/hooks'
+} from '@/lib/game'
+import { usePreloadCards } from '@/lib/hooks'
 import { createBaseDeck } from './createBaseDeck'
-import { useRouter } from 'next/navigation'
 import { Image } from './Image'
 import { restoreGameFromHash, saveGameToHash } from './state'
 
@@ -121,7 +121,7 @@ export function Game({
 		)
 
 		if (newPiles[selectedPileIndex].length < 1) {
-			newPiles[selectedPileIndex].push(undefined)
+			newPiles[selectedPileIndex].push(undefined as unknown as Card)
 		} else {
 			newPiles[selectedPileIndex][
 				newPiles[selectedPileIndex].length - 1
@@ -147,7 +147,7 @@ export function Game({
 				clickableIndexes[clickableIndexes.length - 1] + 1,
 			)
 			if (newPiles[currentPileIndex].length < 1) {
-				newPiles[currentPileIndex].push(undefined)
+				newPiles[currentPileIndex].push(undefined as unknown as Card)
 			} else {
 				last(newPiles[currentPileIndex]).hidden = false
 			}

apps/games/src/app/spider/Image.tsx

@@ -1,4 +1,4 @@
-import type { Card } from 'src/types/card-games'
+import type { Card } from '@/types/card-games'
 import { classNames } from 'lib/utils/string'
 
 export const Image = ({

apps/games/src/app/spider/createBaseDeck.ts

@@ -1,6 +1,6 @@
-import type { Rank, Suit } from 'src/types/card-games'
+import type { Rank, Suit } from '@/types/card-games'
 
-import { createDeck } from 'src/lib/deck'
+import { createDeck } from '@/lib/deck'
 
 enum RankValue {
 	'J' = 11,

apps/games/src/app/wordle/Game.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from 'react'
 import { motion } from 'motion/react'
-import { Header } from 'ui'
+import { Header } from '@repo/ui'
 
 enum Color {
 	Green = 'green',

apps/games/src/app/wordle/page.tsx

@@ -9,11 +9,11 @@ const wordMethods = [
 	faker.word.verb,
 ]
 const dictionary = [
-	faker.locales.en.word.adjective.filter((word) => word.length === 5),
-	faker.locales.en.word.adverb.filter((word) => word.length === 5),
-	faker.locales.en.word.conjunction.filter((word) => word.length === 5),
-	faker.locales.en.word.noun.filter((word) => word.length === 5),
-	faker.locales.en.word.verb.filter((word) => word.length === 5),
+	faker.locales.en!.word!.adjective!.filter((word) => word.length === 5),
+	faker.locales.en!.word!.adverb!.filter((word) => word.length === 5),
+	faker.locales.en!.word!.conjunction!.filter((word) => word.length === 5),
+	faker.locales.en!.word!.noun!.filter((word) => word.length === 5),
+	faker.locales.en!.word!.verb!.filter((word) => word.length === 5),
 ]
 	.flat()
 	.reduce((r, w) => {

apps/games/src/lib/deck.ts

@@ -1,5 +1,5 @@
 import { uniqueId } from 'lib/utils/string'
-import type { Card, Rank, Suit } from 'src/types/card-games'
+import type { Card, Rank, Suit } from '@/types/card-games'
 
 export const ranks: Rank[] = ['A', 2, 3, 4, 5, 6, 7, 8, 9, 10, 'J', 'Q', 'K']
 

apps/games/src/lib/game.ts

@@ -1,4 +1,4 @@
-import type { Card, Deck, Piles } from 'src/types/card-games'
+import type { Card, Deck, Piles } from '@/types/card-games'
 
 export function scaleGame(gameEl: HTMLElement) {
 	const visibleHeight = gameEl.offsetHeight

apps/games/src/lib/hooks.ts

@@ -1,5 +1,5 @@
 import { useEffect } from 'react'
-import { Deck } from 'src/types/card-games'
+import { Deck } from '@/types/card-games'
 
 export const usePreloadCards = (deck: Deck) => {
 	useEffect(() => {

apps/games/tsconfig.json

@@ -1,30 +1,11 @@
 {
-	"extends": "tsconfig/nextjs.json",
+	"extends": "@repo/typescript-config/nextjs.json",
 	"compilerOptions": {
-		"baseUrl": ".",
-		"target": "es5",
-		"lib": ["dom", "dom.iterable", "esnext"],
-		"allowJs": true,
-		"skipLibCheck": true,
-		"strict": false,
-		"forceConsistentCasingInFileNames": true,
-		"noEmit": true,
-		"esModuleInterop": true,
-		"module": "esnext",
-		"moduleResolution": "node",
-		"resolveJsonModule": true,
-		"isolatedModules": true,
-		"jsx": "preserve",
-		"incremental": true,
+		"plugins": [{ "name": "next" }],
 		"paths": {
 			"@/*": ["./src/*"]
-		},
-		"plugins": [
-			{
-				"name": "next"
-			}
-		]
+		}
 	},
-	"include": ["*.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-	"exclude": ["node_modules", "cypress"]
+	"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+	"exclude": ["node_modules"]
 }

apps/next/src/app/password-generator/page.tsx

@@ -3,8 +3,7 @@
 import { type PropsWithChildren, useState } from 'react'
 import * as Tabs from '@radix-ui/react-tabs'
 import useSWR from 'swr'
-import { Slider } from '@repo/ui'
-import { CheckboxWithLabel } from 'ui/CheckboxWithLabel'
+import { Slider, CheckboxWithLabel } from '@repo/ui'
 import { randomString } from 'lib/utils/string'
 
 interface Selection {

apps/next/src/components/ProgressBar.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react'
-import { Progress } from 'ui/Progress'
+import { Progress } from '@repo/ui'
 
 const useIncrementalProgress = () => {
 	const [progress, setProgress] = useState(0)

packages/ui-new/src/CheckboxWithLabel.tsx

@@ -10,18 +10,18 @@ export const CheckboxWithLabel = ({ labelText, ...props }: Props) => {
 	const id = useUniqueId()
 
 	return (
-		<div className="flex items-center">
+		<div className="ui-flex ui-items-center">
 			<Root
-				className="bg-white cursor-default w-6 h-6 rounded flex items-center justify-center shadow hover:bg-gray-50"
+				className="ui-bg-white ui-cursor-default ui-w-6 ui-h-6 ui-rounded ui-flex ui-items-center ui-justify-center ui-shadow hover:ui-bg-gray-50"
 				defaultChecked
 				id={id}
 				{...props}
 			>
 				<Indicator>
-					<CheckIcon className="text-primary" />
+					<CheckIcon className="ui-text-primary" />
 				</Indicator>
 			</Root>
-			<label className="pl-3" htmlFor={id}>
+			<label className="ui-pl-3" htmlFor={id}>
 				{labelText}
 			</label>
 		</div>

packages/ui-new/src/Progress.tsx

@@ -3,21 +3,21 @@ import { motion } from 'motion/react'
 import { classNames } from 'lib/utils/string'
 
 export const Progress = ({ progress }: { progress: number }) => {
-	let colorClass = 'bg-green-400'
+	let colorClass = 'ui-bg-green-400'
 	if (progress <= 25) {
-		colorClass = 'bg-red-400'
+		colorClass = 'ui-bg-red-400'
 	} else if (progress <= 50) {
-		colorClass = 'bg-yellow-200'
+		colorClass = 'ui-bg-yellow-200'
 	}
 	return (
 		<Root
 			value={progress}
-			className="relative overflow-hidden bg-black-rich/50 rounded-full w-96 h-6"
+			className="ui-relative ui-overflow-hidden ui-bg-black-rich/50 ui-rounded-full ui-w-96 ui-h-6"
 			title="Progress"
 		>
-			<Indicator asChild className="h-full">
+			<Indicator asChild className="ui-h-full">
 				<motion.div
-					className={classNames('h-full w-0', colorClass)}
+					className={classNames('ui-h-full ui-w-0', colorClass)}
 					animate={{
 						width: progress + '%',
 					}}