format all the files

Author: kettanaito

.prettierignore

@@ -2,6 +2,6 @@
 **/.cache/**
 **/build/**
 **/dist/**
-**/public/build/**
+**/public/**
 **/package-lock.json
 **/playwright-report/**

.vscode/extensions.json

@@ -1,10 +1,10 @@
 {
-  "recommendations": [
-    "dbaeumer.vscode-eslint",
-    "esbenp.prettier-vscode",
-    "bradlc.vscode-tailwindcss",
-    "neotan.vscode-auto-restart-typescript-eslint-servers",
-    "prisma.prisma",
-    "qwtel.sqlite-viewer"
-  ]
+	"recommendations": [
+		"dbaeumer.vscode-eslint",
+		"esbenp.prettier-vscode",
+		"bradlc.vscode-tailwindcss",
+		"neotan.vscode-auto-restart-typescript-eslint-servers",
+		"prisma.prisma",
+		"qwtel.sqlite-viewer"
+	]
 }

.vscode/settings.json

@@ -1,11 +1,11 @@
 {
-  "typescript.preferences.autoImportFileExcludePatterns": [
-    "@remix-run/server-runtime",
-    "@remix-run/router",
-    "react-router-dom",
-    "react-router"
-  ],
-  "workbench.editorAssociations": {
-    "*.db": "sqlite-viewer.view"
-  }
+	"typescript.preferences.autoImportFileExcludePatterns": [
+		"@remix-run/server-runtime",
+		"@remix-run/router",
+		"react-router-dom",
+		"react-router"
+	],
+	"workbench.editorAssociations": {
+		"*.db": "sqlite-viewer.view"
+	}
 }

epicshop/fix-watch.js

@@ -20,14 +20,14 @@ const debouncedRun = debounce(run, 200)
 
 // Add event listeners.
 watcher
-	.on('addDir', path => {
+	.on('addDir', (path) => {
 		debouncedRun()
 	})
-	.on('unlinkDir', path => {
+	.on('unlinkDir', (path) => {
 		// Only act if path contains two slashes (excluding the leading `./`)
 		debouncedRun()
 	})
-	.on('error', error => console.log(`Watcher error: ${error}`))
+	.on('error', (error) => console.log(`Watcher error: ${error}`))
 
 /**
  * Simple debounce implementation

epicshop/fix.js

@@ -12,29 +12,29 @@ const VERBOSE = false
 const logVerbose = (...args) => (VERBOSE ? console.log(...args) : undefined)
 
 const workshopRoot = here('..')
-const examples = (await readDir(here('../examples'))).map(dir =>
+const examples = (await readDir(here('../examples'))).map((dir) =>
 	here(`../examples/${dir}`),
 )
 const exercises = (await readDir(here('../exercises')))
-	.map(name => here(`../exercises/${name}`))
-	.filter(filepath => fs.statSync(filepath).isDirectory())
+	.map((name) => here(`../exercises/${name}`))
+	.filter((filepath) => fs.statSync(filepath).isDirectory())
 const exerciseApps = (
 	await Promise.all(
-		exercises.flatMap(async exercise => {
+		exercises.flatMap(async (exercise) => {
 			return (await readDir(exercise))
-				.filter(dir => {
+				.filter((dir) => {
 					return /(problem|solution)/.test(dir)
 				})
-				.map(dir => path.join(exercise, dir))
+				.map((dir) => path.join(exercise, dir))
 		}),
 	)
 ).flat()
-const exampleApps = (await readDir(here('../examples'))).map(dir =>
+const exampleApps = (await readDir(here('../examples'))).map((dir) =>
 	here(`../examples/${dir}`),
 )
 const apps = [...exampleApps, ...exerciseApps]
 
-const appsWithPkgJson = [...examples, ...apps].filter(app => {
+const appsWithPkgJson = [...examples, ...apps].filter((app) => {
 	const pkgjsonPath = path.join(app, 'package.json')
 	return exists(pkgjsonPath)
 })
@@ -70,7 +70,7 @@ async function updateTsconfig() {
 	const tsconfig = {
 		files: [],
 		exclude: ['node_modules'],
-		references: appsWithPkgJson.map(a => ({
+		references: appsWithPkgJson.map((a) => ({
 			path: relativeToWorkshopRoot(a).replace(/\\/g, '/'),
 		})),
 	}

exercises/04.debugging/01.problem.dom-snapshots/src/tic-tac-toe.tsx

@@ -3,15 +3,15 @@ import { useState } from 'react'
 export function TicTacToe() {
 	return (
 		<div className="grid grid-cols-3 grid-rows-3">
-			<Button aria-label="top left" className="border-l-0 border-t-0" />
+			<Button aria-label="top left" className="border-t-0 border-l-0" />
 			<Button aria-label="top middle" className="border-t-0" />
-			<Button aria-label="top right" className="border-r-0 border-t-0" />
+			<Button aria-label="top right" className="border-t-0 border-r-0" />
 			<Button aria-label="left middle" className="border-l-0" />
 			<Button aria-label="middle" />
 			<Button aria-label="bottom left" className="border-r-0" />
 			<Button aria-label="right middle" className="border-b-0 border-l-0" />
 			<Button aria-label="bottom middle" className="border-b-0" />
-			<Button aria-label="bottom right" className="border-b-0 border-r-0" />
+			<Button aria-label="bottom right" className="border-r-0 border-b-0" />
 		</div>
 	)
 }

exercises/04.debugging/01.solution.dom-snapshots/src/tic-tac-toe.tsx

@@ -3,15 +3,15 @@ import { useState } from 'react'
 export function TicTacToe() {
 	return (
 		<div className="grid grid-cols-3 grid-rows-3">
-			<Button aria-label="top left" className="border-l-0 border-t-0" />
+			<Button aria-label="top left" className="border-t-0 border-l-0" />
 			<Button aria-label="top middle" className="border-t-0" />
-			<Button aria-label="top right" className="border-r-0 border-t-0" />
+			<Button aria-label="top right" className="border-t-0 border-r-0" />
 			<Button aria-label="left middle" className="border-l-0" />
 			<Button aria-label="middle" />
 			<Button aria-label="right middle" className="border-b-0 border-l-0" />
 			<Button aria-label="bottom left" className="border-r-0" />
 			<Button aria-label="bottom middle" className="border-b-0" />
-			<Button aria-label="bottom right" className="border-b-0 border-r-0" />
+			<Button aria-label="bottom right" className="border-r-0 border-b-0" />
 		</div>
 	)
 }

exercises/04.debugging/02.problem.debugger/src/tic-tac-toe.tsx

@@ -3,15 +3,15 @@ import { useState } from 'react'
 export function TicTacToe() {
 	return (
 		<div className="grid grid-cols-3 grid-rows-3">
-			<Button aria-label="top left" className="border-l-0 border-t-0" />
+			<Button aria-label="top left" className="border-t-0 border-l-0" />
 			<Button aria-label="top middle" className="border-t-0" />
-			<Button aria-label="top right" className="border-r-0 border-t-0" />
+			<Button aria-label="top right" className="border-t-0 border-r-0" />
 			<Button aria-label="left middle" className="border-l-0" />
 			<Button aria-label="middle" />
 			<Button aria-label="bottom left" className="border-r-0" />
 			<Button aria-label="right middle" className="border-b-0 border-l-0" />
 			<Button aria-label="bottom middle" className="border-b-0" />
-			<Button aria-label="bottom right" className="border-b-0 border-r-0" />
+			<Button aria-label="bottom right" className="border-r-0 border-b-0" />
 		</div>
 	)
 }

exercises/04.debugging/02.solution.debugger/src/tic-tac-toe.tsx

@@ -3,15 +3,15 @@ import { useState } from 'react'
 export function TicTacToe() {
 	return (
 		<div className="grid grid-cols-3 grid-rows-3">
-			<Button aria-label="top left" className="border-l-0 border-t-0" />
+			<Button aria-label="top left" className="border-t-0 border-l-0" />
 			<Button aria-label="top middle" className="border-t-0" />
-			<Button aria-label="top right" className="border-r-0 border-t-0" />
+			<Button aria-label="top right" className="border-t-0 border-r-0" />
 			<Button aria-label="left middle" className="border-l-0" />
 			<Button aria-label="middle" />
 			<Button aria-label="bottom left" className="border-r-0" />
 			<Button aria-label="right middle" className="border-b-0 border-l-0" />
 			<Button aria-label="bottom middle" className="border-b-0" />
-			<Button aria-label="bottom right" className="border-b-0 border-r-0" />
+			<Button aria-label="bottom right" className="border-r-0 border-b-0" />
 		</div>
 	)
 }

exercises/04.debugging/03.problem.breakpoints/src/tic-tac-toe.tsx

@@ -3,15 +3,15 @@ import { useState } from 'react'
 export function TicTacToe() {
 	return (
 		<div className="grid grid-cols-3 grid-rows-3">
-			<Button aria-label="top left" className="border-l-0 border-t-0" />
+			<Button aria-label="top left" className="border-t-0 border-l-0" />
 			<Button aria-label="top middle" className="border-t-0" />
-			<Button aria-label="top right" className="border-r-0 border-t-0" />
+			<Button aria-label="top right" className="border-t-0 border-r-0" />
 			<Button aria-label="left middle" className="border-l-0" />
 			<Button aria-label="middle" />
 			<Button aria-label="bottom left" className="border-r-0" />
 			<Button aria-label="right middle" className="border-b-0 border-l-0" />
 			<Button aria-label="bottom middle" className="border-b-0" />
-			<Button aria-label="bottom right" className="border-b-0 border-r-0" />
+			<Button aria-label="bottom right" className="border-r-0 border-b-0" />
 		</div>
 	)
 }