fix lint errors and change character limit to 80

.prettierrc

@@ -3,7 +3,7 @@
 	"useTabs": true,
 	"singleQuote": true,
 	"trailingComma": "all",
-	"printWidth": 100,
+	"printWidth": 80,
 	"plugins": [],
 	"pluginSearchDirs": ["."],
 	"overrides": []

apps/code-not-found/pages/api/hello.ts

@@ -5,6 +5,9 @@ type Data = {
 	name: string
 }
 
-export default function handler(req: NextApiRequest, res: NextApiResponse<Data>) {
+export default function handler(
+	req: NextApiRequest,
+	res: NextApiResponse<Data>,
+) {
 	res.status(200).json({ name: 'John Doe' })
 }

apps/code-not-found/pages/index.tsx

@@ -34,7 +34,10 @@ const HomePage: NextPage = () => {
 
 					<div className={`wrap ${styles.grid}`}>
 						<a href="http://localhost:3004/page-a" className={styles.card}>
-							<iframe src="http://localhost:3004/page-a" frameBorder="0"></iframe>
+							<iframe
+								src="http://localhost:3004/page-a"
+								frameBorder="0"
+							></iframe>
 						</a>
 
 						<a href="https://nextjs.org/learn" className={styles.card}>
@@ -55,7 +58,9 @@ const HomePage: NextPage = () => {
 							className={styles.card}
 						>
 							<h2>Deploy &rarr;</h2>
-							<p>Instantly deploy your Next.js site to a public URL with Vercel.</p>
+							<p>
+								Instantly deploy your Next.js site to a public URL with Vercel.
+							</p>
 						</a>
 					</div>
 				</main>
@@ -68,7 +73,12 @@ const HomePage: NextPage = () => {
 					>
 						Powered by{' '}
 						<span className={styles.logo}>
-							<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
+							<Image
+								src="/vercel.svg"
+								alt="Vercel Logo"
+								width={72}
+								height={16}
+							/>
 						</span>
 					</a>
 				</footer>

apps/code-not-found/pages/page-a.tsx

@@ -16,7 +16,8 @@ const PageAPage: NextPage = () => {
 				<h1 className={styles.title}>Welcome to Page A</h1>
 
 				<p className={styles.description}>
-					Get started by editing <code className={styles.code}>pages/index.tsx</code>
+					Get started by editing{' '}
+					<code className={styles.code}>pages/index.tsx</code>
 				</p>
 
 				<div className={styles.grid}>
@@ -30,7 +31,10 @@ const PageAPage: NextPage = () => {
 						<p>Learn about Next.js in an interactive course with quizzes!</p>
 					</a>
 
-					<a href="https://github.com/vercel/next.js/tree/canary/examples" className={styles.card}>
+					<a
+						href="https://github.com/vercel/next.js/tree/canary/examples"
+						className={styles.card}
+					>
 						<h2>Examples &rarr;</h2>
 						<p>Discover and deploy boilerplate example Next.js projects.</p>
 					</a>
@@ -40,7 +44,9 @@ const PageAPage: NextPage = () => {
 						className={styles.card}
 					>
 						<h2>Deploy &rarr;</h2>
-						<p>Instantly deploy your Next.js site to a public URL with Vercel.</p>
+						<p>
+							Instantly deploy your Next.js site to a public URL with Vercel.
+						</p>
 					</a>
 				</div>
 			</main>

apps/code-not-found/styles/globals.css

@@ -2,8 +2,8 @@ html,
 body {
 	padding: 0;
 	margin: 0;
-	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell,
-		Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+		Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
 }
 
 a {

apps/design/pages/api/hello.ts

@@ -5,6 +5,9 @@ type Data = {
 	name: string
 }
 
-export default function handler(req: NextApiRequest, res: NextApiResponse<Data>) {
+export default function handler(
+	req: NextApiRequest,
+	res: NextApiResponse<Data>,
+) {
 	res.status(200).json({ name: 'John Doe' })
 }

apps/design/pages/index.tsx

@@ -6,7 +6,13 @@ import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
 import { BorderSolidIcon } from '@radix-ui/react-icons'
 import { Label } from '@radix-ui/react-label'
 import { motion } from 'framer-motion'
-import { Select, SelectGroup, SelectLabel, SelectItem, SelectSeparator } from 'shared/Select'
+import {
+	Select,
+	SelectGroup,
+	SelectLabel,
+	SelectItem,
+	SelectSeparator,
+} from 'shared/Select'
 import { Progress } from 'shared/Progress'
 import { ThemeToggle } from 'shared/ThemeToggle'
 import { Slider } from 'shared/Slider'
@@ -91,13 +97,14 @@ const Home: NextPage = () => {
 				<article>
 					<h1>Components / Design System</h1>
 					<p>
-						For years parents have espoused the health benefits of eating garlic bread with cheese
-						to their children, with the food earning such an iconic status in our culture that kids
-						will often dress up as warm, cheesy loaf for Halloween.
+						For years parents have espoused the health benefits of eating garlic
+						bread with cheese to their children, with the food earning such an
+						iconic status in our culture that kids will often dress up as warm,
+						cheesy loaf for Halloween.
 					</p>
 					<p>
-						But a recent study shows that the celebrated appetizer may be linked to a series of
-						rabies cases springing up around the country.
+						But a recent study shows that the celebrated appetizer may be linked
+						to a series of rabies cases springing up around the country.
 					</p>
 				</article>
 				<article>

apps/games/lib/deck.ts

@@ -12,5 +12,12 @@ export const createCard = (rank: Rank, suit: Suit, value: number): Card => ({
 	hidden: false,
 })
 
-export const createDeck = (suits: Suit[], getCardValue: (rank: Rank) => number) =>
-	ranks.map((rank) => suits.map((suit) => createCard(rank, suit, getCardValue(rank)))).flat()
+export const createDeck = (
+	suits: Suit[],
+	getCardValue: (rank: Rank) => number,
+) =>
+	ranks
+		.map((rank) =>
+			suits.map((suit) => createCard(rank, suit, getCardValue(rank))),
+		)
+		.flat()

apps/games/pages/api/hello.ts

@@ -5,6 +5,9 @@ type Data = {
 	name: string
 }
 
-export default function handler(req: NextApiRequest, res: NextApiResponse<Data>) {
+export default function handler(
+	req: NextApiRequest,
+	res: NextApiResponse<Data>,
+) {
 	res.status(200).json({ name: 'John Doe' })
 }

apps/games/pages/idiot.tsx

@@ -10,7 +10,12 @@ import Header from 'shared/Header'
 import HeaderAction from 'shared/HeaderAction'
 import type { Card, Deck, Piles, Rank, Suit } from '@/types/card-games'
 import { createDeck } from '@/lib/deck'
-import { deselectAll, moveCardsToPiles, removeEmptyLeadingCards, scaleGame } from '@/lib/game'
+import {
+	deselectAll,
+	moveCardsToPiles,
+	removeEmptyLeadingCards,
+	scaleGame,
+} from '@/lib/game'
 import { usePreloadCards } from '@/lib/hooks'
 
 enum RankValue {
@@ -21,12 +26,18 @@ enum RankValue {
 }
 
 const suits: Suit[] = ['C', 'D', 'H', 'S']
-const getCardValue = (rank: Rank) => (typeof rank === 'number' ? rank : RankValue[rank])
+const getCardValue = (rank: Rank) =>
+	typeof rank === 'number' ? rank : RankValue[rank]
 const baseDeck = createDeck(suits, getCardValue)
 
 export async function getServerSideProps() {
 	const deck = shuffle(baseDeck)
-	const initPiles = [deck.splice(0, 1), deck.splice(0, 1), deck.splice(0, 1), deck.splice(0, 1)]
+	const initPiles = [
+		deck.splice(0, 1),
+		deck.splice(0, 1),
+		deck.splice(0, 1),
+		deck.splice(0, 1),
+	]
 
 	return {
 		props: {
@@ -62,7 +73,9 @@ const IdiotPage: NextPage = ({
 		if (!current) {
 			const selectedIndex = getSelectedCardIndex()
 			if (isDefined(selectedIndex)) {
-				const moveCard = first(piles[selectedIndex].splice(lastIndex(piles[selectedIndex]), 1))
+				const moveCard = first(
+					piles[selectedIndex].splice(lastIndex(piles[selectedIndex]), 1),
+				)
 				piles[index].splice(lastIndex(piles[index]), 1, moveCard)
 				if (piles[selectedIndex].length < 1) {
 					piles[selectedIndex].push(undefined)
@@ -82,7 +95,9 @@ const IdiotPage: NextPage = ({
 		deselectAll(piles)
 		if (shouldBeRemoved) {
 			const pileIndex = currentCards
-				.map((card, index) => (card?.combined === current.combined ? index : undefined))
+				.map((card, index) =>
+					card?.combined === current.combined ? index : undefined,
+				)
 				.filter(isDefined)[0]
 			const newPiles = [...piles]
 			newPiles[pileIndex].splice(lastIndex(newPiles[pileIndex]), 1)
@@ -102,7 +117,12 @@ const IdiotPage: NextPage = ({
 			.filter(isDefined)[0]
 	}
 
-	const getCurrentCards = () => [last(piles[0]), last(piles[1]), last(piles[2]), last(piles[3])]
+	const getCurrentCards = () => [
+		last(piles[0]),
+		last(piles[1]),
+		last(piles[2]),
+		last(piles[3]),
+	]
 
 	return (
 		<>

apps/games/pages/index.tsx

@@ -17,7 +17,9 @@ const HomePage: NextPage = () => {
 						<Link href="/spider">Spider Solitaire</Link>
 					</li>
 					<li>
-						<Link href="/idiot">The Idiot Solitaire (from swedish "Idioten")</Link>
+						<Link href="/idiot">
+							The Idiot Solitaire (from swedish "Idioten")
+						</Link>
 					</li>
 					<li>
 						<Link href="/wordle">Bad Wordle "clone"</Link>

apps/games/pages/spider.tsx

@@ -10,7 +10,12 @@ import Header from 'shared/Header'
 import HeaderAction from 'shared/HeaderAction'
 import type { Card, Deck, Piles, Rank, Suit } from '@/types/card-games'
 import { createDeck } from '@/lib/deck'
-import { deselectAll, moveCardsToPiles, removeEmptyLeadingCards, scaleGame } from '@/lib/game'
+import {
+	deselectAll,
+	moveCardsToPiles,
+	removeEmptyLeadingCards,
+	scaleGame,
+} from '@/lib/game'
 import { usePreloadCards } from '@/lib/hooks'
 
 enum RankValue {
@@ -21,12 +26,18 @@ enum RankValue {
 }
 
 const suits: Suit[] = ['H', 'S']
-const getCardValue = (rank: Rank) => (typeof rank === 'number' ? rank : RankValue[rank])
+const getCardValue = (rank: Rank) =>
+	typeof rank === 'number' ? rank : RankValue[rank]
 const createBaseDeck = () => createDeck(suits, getCardValue)
 
 export async function getServerSideProps() {
 	const deck = shuffle(
-		[createBaseDeck(), createBaseDeck(), createBaseDeck(), createBaseDeck()].flat(),
+		[
+			createBaseDeck(),
+			createBaseDeck(),
+			createBaseDeck(),
+			createBaseDeck(),
+		].flat(),
 	)
 
 	const initPiles = [
@@ -107,12 +118,18 @@ const SpiderPage: NextPage = ({
 	function handleSelectedCard(current: Card, currentPileIndex: number) {
 		console.log(current)
 
-		const [selectedCard, selectedPileIndex, selectedCardIndex] = getSelectedCard()
+		const [selectedCard, selectedPileIndex, selectedCardIndex] =
+			getSelectedCard()
 		if (!current) {
 			if (!isDefined(selectedCard)) {
 				return
 			}
-			moveCard(selectedCard, selectedPileIndex, selectedCardIndex, currentPileIndex)
+			moveCard(
+				selectedCard,
+				selectedPileIndex,
+				selectedCardIndex,
+				currentPileIndex,
+			)
 			return
 		}
 		const shouldBeMoved =
@@ -123,7 +140,12 @@ const SpiderPage: NextPage = ({
 			current.id === last(piles[currentPileIndex]).id
 
 		if (shouldBeMoved) {
-			moveCard(selectedCard, selectedPileIndex, selectedCardIndex, currentPileIndex)
+			moveCard(
+				selectedCard,
+				selectedPileIndex,
+				selectedCardIndex,
+				currentPileIndex,
+			)
 			return
 		}
 		deselectAll(piles)
@@ -146,16 +168,24 @@ const SpiderPage: NextPage = ({
 		if (newPiles[selectedPileIndex].length < 1) {
 			newPiles[selectedPileIndex].push(undefined)
 		} else {
-			newPiles[selectedPileIndex][newPiles[selectedPileIndex].length - 1].hidden = false
+			newPiles[selectedPileIndex][
+				newPiles[selectedPileIndex].length - 1
+			].hidden = false
 		}
 		if (isDefined(first(newPiles[currentPileIndex]))) {
-			newPiles[currentPileIndex].splice(newPiles[currentPileIndex].length, 0, ...removedCards)
+			newPiles[currentPileIndex].splice(
+				newPiles[currentPileIndex].length,
+				0,
+				...removedCards,
+			)
 		} else {
 			newPiles[currentPileIndex] = removedCards
 		}
 
 		selectedCard.selected = false
-		const clickableIndexes = getClickableIndexesFromPile(newPiles[currentPileIndex]).reverse()
+		const clickableIndexes = getClickableIndexesFromPile(
+			newPiles[currentPileIndex],
+		).reverse()
 		if (clickableIndexes.length >= 13) {
 			newPiles[currentPileIndex].splice(
 				clickableIndexes[0],
@@ -195,7 +225,8 @@ const SpiderPage: NextPage = ({
 						<div key={pileIndex} className="w-full">
 							{pile.map((card, cardIndex) => {
 								const clickableIndexes = getClickableIndexesFromPile(pile)
-								const clickable = !isDefined(card) || clickableIndexes.indexOf(cardIndex) > -1
+								const clickable =
+									!isDefined(card) || clickableIndexes.indexOf(cardIndex) > -1
 								const cardImage = !isDefined(card)
 									? 'blank'
 									: !card.hidden

apps/games/pages/wordle.tsx

@@ -16,7 +16,8 @@ interface Guess {
 	colors: Color[]
 }
 
-const from = <T,>(length: number, value: T): T[] => Array.from({ length }, () => value)
+const from = <T,>(length: number, value: T): T[] =>
+	Array.from({ length }, () => value)
 
 const dictionary = [
 	faker.locales.en.word.adjective.filter((word) => word.length === 5),
@@ -80,7 +81,9 @@ const Field = ({ letters }: { letters: string[] }) => {
 			{fixedList.map((letter, index) => (
 				<div
 					key={index}
-					className={'flex items-center justify-center border-2 border-gray-400 ml-1 w-12 h-12'}
+					className={
+						'flex items-center justify-center border-2 border-gray-400 ml-1 w-12 h-12'
+					}
 				>
 					{letter}
 				</div>
@@ -98,7 +101,9 @@ const BlankRow = () => {
 				{fixedList.map((_, index) => (
 					<div
 						key={index}
-						className={'flex items-center justify-center border-2 border-gray-400 ml-1 w-12 h-12'}
+						className={
+							'flex items-center justify-center border-2 border-gray-400 ml-1 w-12 h-12'
+						}
 					/>
 				))}
 			</div>