scaffolded

Author: kentcdodds

.prettierignore

@@ -0,0 +1,7 @@
+**/node_modules/**
+**/.cache/**
+**/build/**
+**/dist/**
+**/public/build/**
+**/package-lock.json
+**/playwright-report/**

eslint.config.js

@@ -1,44 +1,13 @@
-/** @type {import('@types/eslint').Linter.Config} */
-export default {
-	languageOptions: { parser: await import('@typescript-eslint/parser') },
-	plugins: {
-		'@typescript-eslint': (await import('@typescript-eslint/eslint-plugin'))
-			.default,
-		import: (await import('eslint-plugin-import')).default,
+import defaultConfig from '@epic-web/config/eslint'
+
+/** @type {import("eslint").Linter.Config} */
+export default [
+	...defaultConfig,
+	{
+		rules: {
+			// we leave unused vars around for the exercises
+			'no-unused-vars': 'off',
+			'@typescript-eslint/no-unused-vars': 'off',
+		},
 	},
-	ignores: [
-		'node_modules',
-		'build',
-		'public/build',
-		'playwright-report',
-		'test-results',
-	],
-	rules: {
-		// playwright requires destructuring in fixtures even if you don't use anything 🤷‍♂️
-		'no-empty-pattern': 'off',
-		'@typescript-eslint/consistent-type-imports': [
-			'warn',
-			{
-				prefer: 'type-imports',
-				disallowTypeAnnotations: true,
-				fixStyle: 'inline-type-imports',
-			},
-		],
-		'import/no-duplicates': ['warn', { 'prefer-inline': true }],
-		'import/consistent-type-specifier-style': ['warn', 'prefer-inline'],
-		'import/order': [
-			'warn',
-			{
-				alphabetize: { order: 'asc', caseInsensitive: true },
-				groups: [
-					'builtin',
-					'external',
-					'internal',
-					'parent',
-					'sibling',
-					'index',
-				],
-			},
-		],
-	},
-}
+]

exercises/01.example/01.problem.hello/README.mdx

@@ -0,0 +1 @@
+# Initial State

exercises/01.example/01.problem.hello/index.js

@@ -0,0 +1,42 @@
+body {
+	margin: 0;
+	padding: 0;
+	height: 100vh;
+}
+
+* {
+	box-sizing: border-box;
+}
+
+div:has(.counter) {
+	height: 100%;
+}
+
+.counter {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	padding: 20px;
+	height: 100%;
+
+	button {
+		padding: 6px 12px;
+		font-size: 20px;
+		font-weight: 500;
+		background-color: lch(30% 100 220);
+		color: white;
+		border: 4px solid lch(10% 100 200);
+		border-radius: 3px;
+		cursor: pointer;
+
+		&:hover,
+		&:focus {
+			background-color: lch(40% 100 220);
+			border-color: lch(20% 100 200);
+		}
+		&:active {
+			background-color: lch(50% 100 220);
+			border-color: lch(30% 100 220);
+		}
+	}
+}

exercises/01.example/01.problem.hello/package.json

@@ -0,0 +1,22 @@
+import { createRoot } from 'react-dom/client'
+
+// 🐨 create a `useState` function which accepts the initial state and returns
+// an array of the state and a function to update it.
+// 🦺 note you may need to ignore some typescript errors here. We'll fix them later.
+// Feel free to make the `useState` a generic though!
+
+function Counter() {
+	// @ts-expect-error 💣 delete this comment
+	const [count, setCount] = useState(0)
+	const increment = () => setCount(count + 1)
+	return (
+		<div className="counter">
+			<button onClick={increment}>{count}</button>
+		</div>
+	)
+}
+
+const rootEl = document.createElement('div')
+document.body.append(rootEl)
+const appRoot = createRoot(rootEl)
+appRoot.render(<Counter />)

exercises/01.example/01.problem.hello/tsconfig.json

@@ -0,0 +1 @@
+# Initial State

exercises/01.example/01.solution.goodbye/README.mdx

@@ -0,0 +1,42 @@
+body {
+	margin: 0;
+	padding: 0;
+	height: 100vh;
+}
+
+* {
+	box-sizing: border-box;
+}
+
+div:has(.counter) {
+	height: 100%;
+}
+
+.counter {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	padding: 20px;
+	height: 100%;
+
+	button {
+		padding: 6px 12px;
+		font-size: 20px;
+		font-weight: 500;
+		background-color: lch(30% 100 220);
+		color: white;
+		border: 4px solid lch(10% 100 200);
+		border-radius: 3px;
+		cursor: pointer;
+
+		&:hover,
+		&:focus {
+			background-color: lch(40% 100 220);
+			border-color: lch(20% 100 200);
+		}
+		&:active {
+			background-color: lch(50% 100 220);
+			border-color: lch(30% 100 220);
+		}
+	}
+}

exercises/01.example/01.solution.goodbye/index.js

@@ -0,0 +1,22 @@
+import { createRoot } from 'react-dom/client'
+
+function useState<State>(initialState: State) {
+	let state = initialState
+	const setState = (newState: State) => (state = newState)
+	return [state, setState] as const
+}
+
+function Counter() {
+	const [count, setCount] = useState(0)
+	const increment = () => setCount(count + 1)
+	return (
+		<div className="counter">
+			<button onClick={increment}>{count}</button>
+		</div>
+	)
+}
+
+const rootEl = document.createElement('div')
+document.body.append(rootEl)
+const appRoot = createRoot(rootEl)
+appRoot.render(<Counter />)

exercises/01.example/01.solution.goodbye/package.json

@@ -0,0 +1 @@
+# Update State

exercises/01.example/01.solution.goodbye/tsconfig.json

@@ -0,0 +1,42 @@
+body {
+	margin: 0;
+	padding: 0;
+	height: 100vh;
+}
+
+* {
+	box-sizing: border-box;
+}
+
+div:has(.counter) {
+	height: 100%;
+}
+
+.counter {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	padding: 20px;
+	height: 100%;
+
+	button {
+		padding: 6px 12px;
+		font-size: 20px;
+		font-weight: 500;
+		background-color: lch(30% 100 220);
+		color: white;
+		border: 4px solid lch(10% 100 200);
+		border-radius: 3px;
+		cursor: pointer;
+
+		&:hover,
+		&:focus {
+			background-color: lch(40% 100 220);
+			border-color: lch(20% 100 200);
+		}
+		&:active {
+			background-color: lch(50% 100 220);
+			border-color: lch(30% 100 220);
+		}
+	}
+}

exercises/01.example/FINISHED.mdx

@@ -0,0 +1,22 @@
+import { createRoot } from 'react-dom/client'
+
+function useState<State>(initialState: State) {
+	let state = initialState
+	const setState = (newState: State) => (state = newState)
+	return [state, setState] as const
+}
+
+function Counter() {
+	const [count, setCount] = useState(0)
+	const increment = () => setCount(count + 1)
+	return (
+		<div className="counter">
+			<button onClick={increment}>{count}</button>
+		</div>
+	)
+}
+
+const rootEl = document.createElement('div')
+document.body.append(rootEl)
+const appRoot = createRoot(rootEl)
+appRoot.render(<Counter />)

exercises/01.example/README.mdx

@@ -0,0 +1 @@
+# Update State