Misc/config updates (#125)

* update node version

* add new config packages

* use new tw and ts config in next-app

* impl new typescript-config into next-app

* add a new ui package and use it for Slider

* fix type issues

* fix import and type errors

.nvmrc

@@ -1 +1 @@
-18.16.0
+22.12.0

apps/code-not-found/package.json

@@ -3,10 +3,10 @@
 	"version": "0.1.0",
 	"private": true,
 	"scripts": {
-		"dev": "PORT=3004 next dev",
 		"build": "next build",
-		"start": "PORT=3004 next start",
-		"lint": "next lint"
+		"dev": "PORT=3004 next dev",
+		"lint": "next lint",
+		"start": "PORT=3004 next start"
 	},
 	"dependencies": {
 		"next": "15.1.2",

apps/design/package.json

@@ -2,11 +2,11 @@
 	"name": "design-app",
 	"private": true,
 	"scripts": {
-		"dev": "PORT=3001 next dev",
 		"build": "next build",
+		"dev": "PORT=3001 next dev",
 		"export": "next export",
-		"start": "PORT=3001 next start",
-		"lint": "next lint"
+		"lint": "next lint",
+		"start": "PORT=3001 next start"
 	},
 	"dependencies": {
 		"@radix-ui/react-icons": "1.3.2",

apps/games/package.json

@@ -3,14 +3,15 @@
 	"version": "0.1.0",
 	"private": true,
 	"scripts": {
-		"dev": "PORT=3002 next dev",
 		"build": "next build",
-		"start": "PORT=3002 next start",
-		"lint": "next lint"
+		"dev": "PORT=3002 next dev",
+		"lint": "next lint",
+		"start": "PORT=3002 next start"
 	},
 	"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/package.json

@@ -1,18 +1,18 @@
 {
 	"name": "next-app",
-	"description": "Playground for Emil Johansson",
 	"version": "1.2.1",
-	"author": "[email protected]",
+	"description": "Playground for Emil Johansson",
 	"keywords": [
 		"emil",
 		"johansson"
 	],
 	"license": "MIT",
+	"author": "[email protected]",
 	"scripts": {
-		"dev": "next dev",
 		"build": "next build",
-		"start": "next start",
-		"lint": "next lint"
+		"dev": "next dev",
+		"lint": "next lint",
+		"start": "next start"
 	},
 	"dependencies": {
 		"@emiljohansson/random-string": "1.1.2",
@@ -25,6 +25,7 @@
 		"@radix-ui/react-progress": "1.1.1",
 		"@radix-ui/react-select": "2.1.4",
 		"@radix-ui/react-tabs": "1.1.2",
+		"@repo/ui": "workspace:*",
 		"@supabase/ssr": "0.0.10",
 		"@vercel/analytics": "1.1.1",
 		"@vercel/kv": "1.0.0",
@@ -43,11 +44,17 @@
 		"ui": "workspace:*"
 	},
 	"devDependencies": {
+		"@repo/eslint-config": "workspace:*",
+		"@repo/tailwind-config": "workspace:*",
+		"@repo/typescript-config": "workspace:*",
 		"@types/crypto-js": "4.1.1",
 		"@types/jsonwebtoken": "9.0.1",
 		"@types/use-sync-external-store": "0.0.6",
+		"autoprefixer": "10.4.20",
 		"config": "workspace:*",
 		"next-transpile-modules": "9.0.0",
+		"postcss": "8.4.49",
+		"tailwindcss": "3.4.17",
 		"tsconfig": "workspace:*"
 	}
 }

apps/next/src/app/api/calculate/route.ts

@@ -4,8 +4,7 @@ import { add } from 'lib/utils/math'
 const toNumber = (value: string): number => parseFloat(value)
 
 export async function POST(request: Request) {
-	const response = await request
-	const data = await response.json()
+	const data = await request.json()
 	const query = data.query
 	const sum = query.split('+').map(toNumber).reduce(add)
 

apps/next/src/app/layout.tsx

@@ -1,7 +1,7 @@
 import type { PropsWithChildren } from 'react'
 import type { Metadata } from 'next'
 
-// import 'ui/globals.css'
+import '@repo/ui/styles.css'
 import './styles.css'
 
 import { headers } from 'next/headers'