Skip to content

Commit 3ca9eea

Browse files
kentcdoddskentcdodds
committed
let's gooooo
0 parents  commit 3ca9eea

File tree

897 files changed

+46297
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

897 files changed

+46297
-0
lines changed

‎.eslintignore

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
node_modules
2+
build
3+
public/build
4+
playwright-report
5+
test-results
6+
server-build
7+
scripts

‎.github/workflows/validate.yml

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
name: validate
2+
on:
3+
push:
4+
branches:
5+
- 'main'
6+
pull_request:
7+
branches:
8+
- 'main'
9+
jobs:
10+
setup:
11+
strategy:
12+
matrix:
13+
os: [ubuntu-latest, windows-latest, macos-latest]
14+
runs-on: ${{ matrix.os }}
15+
steps:
16+
- name: ⬇️ Checkout repo
17+
uses: actions/checkout@v3
18+
19+
- name: ⎔ Setup node
20+
uses: actions/setup-node@v3
21+
with:
22+
node-version: 18
23+
24+
- name: ▶️ Run setup script
25+
run: npm run setup
26+
27+
- name: ʦ TypeScript
28+
run: npm run typecheck
29+
30+
- name: ⬣ ESLint
31+
run: npm run lint

‎.gitignore

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
node_modules
2+
3+
workspace/
4+
**/.cache/
5+
**/build/
6+
**/public/build
7+
**/playwright-report
8+
data.db
9+
/playground
10+
**/tsconfig.tsbuildinfo
11+
12+
# in a real app you'd want to not commit the .env
13+
# file as well, but since this is for a workshop
14+
# we're going to keep them around.
15+
# .env

‎.npmrc

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
legacy-peer-deps=true
2+
registry=https://registry.npmjs.org/

‎.prettierignore

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
node_modules
2+
3+
**/build/**
4+
**/public/build/**
5+
.env
6+
7+
**/package.json
8+
**/tsconfig.json
9+
10+
**/package-lock.json

‎.prettierrc

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"arrowParens": "avoid",
3+
"bracketSameLine": false,
4+
"bracketSpacing": true,
5+
"embeddedLanguageFormatting": "auto",
6+
"endOfLine": "lf",
7+
"htmlWhitespaceSensitivity": "css",
8+
"insertPragma": false,
9+
"jsxSingleQuote": false,
10+
"printWidth": 80,
11+
"proseWrap": "preserve",
12+
"quoteProps": "as-needed",
13+
"requirePragma": false,
14+
"semi": false,
15+
"singleAttributePerLine": false,
16+
"singleQuote": true,
17+
"tabWidth": 2,
18+
"trailingComma": "all",
19+
"useTabs": true
20+
}

‎LICENSE.md

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
This material is available for private, non-commercial use under the
2+
[GPL version 3](http://www.gnu.org/licenses/gpl-3.0-standalone.html). If you
3+
would like to use this material to conduct your own workshop, please contact us
4+
at [email protected]

‎README.md

+169
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
<div>
2+
<h1 align="center"><a href="https://epicweb.dev">Professional Web Forms</a></h1>
3+
<strong>
4+
Learn the primary mechanism for interactivity on the web.
5+
</strong>
6+
<p>
7+
In this workshop, we'll learn how to use forms on the web to create highly dynamic and interactive experiences for our users.
8+
</p>
9+
</div>
10+
11+
<hr />
12+
13+
<!-- prettier-ignore-start -->
14+
[![Build Status][build-badge]][build]
15+
[![GPL 3.0 License][license-badge]][license]
16+
[![Code of Conduct][coc-badge]][coc]
17+
<!-- prettier-ignore-end -->
18+
19+
## Prerequisites
20+
21+
- Some
22+
[experience with JavaScript](https://kentcdodds.com/blog/javascript-to-know-for-react)
23+
- Some [experience with React](https://kcd.im/beginner-react)
24+
- Some [experience with Node.js](https://nodejs.dev/en/learn)
25+
- [Full Stack Foundations workshop](https://github.com/epicweb-dev/full-stack-foundations) (or similar experience)
26+
27+
## System Requirements
28+
29+
- [git][git] v2.13 or greater
30+
- [NodeJS][node] v18 or greater
31+
- [npm][npm] v8 or greater
32+
33+
All of these must be available in your `PATH`. To verify things are set up
34+
properly, you can run this:
35+
36+
```shell
37+
git --version
38+
node --version
39+
npm --version
40+
```
41+
42+
If you have trouble with any of these, learn more about the PATH environment
43+
variable and how to fix it here for [windows][win-path] or
44+
[mac/linux][mac-path].
45+
46+
## Setup
47+
48+
This is a pretty large project (it's actually many apps in one) so it can take
49+
several minutes to get everything set up the first time. Please have a strong
50+
network connection before running the setup and grab a snack.
51+
52+
Follow these steps to get this set up:
53+
54+
```sh
55+
git clone https://github.com/epicweb-dev/web-forms.git
56+
cd web-forms
57+
npm run setup
58+
```
59+
60+
If you experience errors here, please open [an issue][issue] with as many
61+
details as you can offer.
62+
63+
## Exercises
64+
65+
You'll find all the exercises in the `exercises` directory. The structure of the
66+
workshop apps is described below, but most of the time you should be able to
67+
simply run the app and navigate around the different exercises using the
68+
application (there are even buttons to open the right exercise file right in
69+
your editor).
70+
71+
The purpose of the exercise is **not** for you to work through all the material.
72+
It's intended to get your brain thinking about the right questions to ask me as
73+
_I_ walk through the material.
74+
75+
## Running the app
76+
77+
To get the app up and running (and really see if it worked), run:
78+
79+
```shell
80+
npm start
81+
```
82+
83+
Now open your browser to the address that's logged out for you and you're good
84+
to get started!
85+
86+
## Running the tests
87+
88+
The test script in the `package.json` runs the tests on the solutions (these
89+
should all pass). To run the tests against your own work, you simply open the
90+
problem page and click the "Test" tab.
91+
92+
## Launching your editor
93+
94+
The application has several buttons which will launch your editor to the right
95+
file. There are a lot of files in this workshop so you'll be using this feature
96+
a lot to get to the right place at the right time.
97+
98+
This should just work™️, but if it doesn't it could be that our editor guessing
99+
isn't working for you. If that's the case, create a `.env` file in the root of
100+
this project and add an environment variable called `KCDSHOP_EDITOR` with the
101+
value being set to the path to your editor's executable. For example, if you're
102+
using VS Code on Windows, you'd add this to your `.env` file:
103+
104+
```
105+
KCDSHOP_EDITOR="C:\Program Files\Microsoft VS Code\bin\code.cmd"
106+
```
107+
108+
Make certain that if the path includes spaces that you wrap the path in quotes
109+
as above.
110+
111+
## Exercises
112+
113+
- `exercises/*.*/README.md`: Exercise background information
114+
- `exercises/*.*/*.problem.*/README.*.md`: Problem Instructions
115+
- `exercises/*.*/*.problem.*/*.tsx`: Exercise with Emoji helpers 👈 You spend
116+
most of your time here.
117+
- `exercises/*.*/*.solution.*/*.tsx`: Solved version
118+
119+
The purpose of the exercise is **not** for you to work through all the material.
120+
It's intended to get your brain thinking about the right questions to ask me as
121+
_I_ walk through the material.
122+
123+
## Helpful Emoji 🐨 🦺 💰 📝 🦉 📜 💣 💪 🏁 👨‍💼 🚨
124+
125+
Each exercise has comments in it to help you get through the exercise. These fun
126+
emoji characters are here to help you.
127+
128+
- **Kody the Koala** 🐨 will tell you when there's something specific you should
129+
do
130+
- **Lily the Life Jacket** 🦺 will help you with any TypeScript-specific parts
131+
of the exercises
132+
- **Marty the Money Bag** 💰 will give you specific tips (and sometimes code)
133+
along the way
134+
- **Nancy the Notepad** 📝 will encourage you to take notes on what you're
135+
learning
136+
- **Olivia the Owl** 🦉 will give you useful tidbits/best practice notes
137+
- **Dominic the Document** 📜 will give you links to useful documentation
138+
- **Barry the Bomb** 💣 will be hanging around anywhere you need to blow stuff
139+
up (delete code)
140+
- **Matthew the Muscle** 💪 will indicate that you're working with an exercise
141+
- **Chuck the Checkered Flag** 🏁 will indicate that you're working with a final
142+
- **Peter the Product Manager** 👨‍💼 helps us know what our users want
143+
- **Alfred the Alert** 🚨 will occasionally show up in the test failures with
144+
potential explanations for why the tests are failing
145+
- **Kellie the Co-worker** 🧝‍♀️ your co-worker who sometimes does work ahead of
146+
your exercises
147+
148+
## Workshop Feedback
149+
150+
Each exercise has an Elaboration and Feedback link. Please fill that out after
151+
the exercise and instruction.
152+
153+
At the end of the workshop, please go
154+
[here to give overall feedback](https://docs.google.com/forms/d/e/1FAIpQLSdRmj9p8-5zyoqRzxp3UpqSbC3aFkweXvvJIKes0a5s894gzg/viewform).
155+
156+
<!-- prettier-ignore-start -->
157+
[npm]: https://www.npmjs.com/
158+
[node]: https://nodejs.org
159+
[git]: https://git-scm.com/
160+
[build-badge]: https://img.shields.io/github/actions/workflow/status/epicweb-dev/web-forms/validate.yml?branch=main&logo=github&style=flat-square
161+
[build]: https://github.com/epicweb-dev/web-forms/actions?query=workflow%3Avalidate
162+
[license-badge]: https://img.shields.io/badge/license-GPL%203.0%20License-blue.svg?style=flat-square
163+
[license]: https://github.com/epicweb-dev/web-forms/blob/main/LICENSE
164+
[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square
165+
[coc]: https://kentcdodds.com/conduct
166+
[win-path]: https://www.howtogeek.com/118594/how-to-edit-your-system-path-for-easy-command-line-access/
167+
[mac-path]: http://stackoverflow.com/a/24322978/971592
168+
[issue]: https://github.com/epicweb-dev/web-forms/issues/new
169+
<!-- prettier-ignore-end -->

‎exercises/01.form-validation/01.problem.form-validation/.eslintrc.cjs

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
const vitestFiles = ['app/**/__tests__/**/*', 'app/**/*.{spec,test}.*']
2+
const testFiles = ['**/tests/**', ...vitestFiles]
3+
const appFiles = ['app/**']
4+
5+
/** @type {import('@types/eslint').Linter.BaseConfig} */
6+
module.exports = {
7+
extends: [
8+
'@remix-run/eslint-config',
9+
'@remix-run/eslint-config/node',
10+
'prettier',
11+
],
12+
rules: {
13+
'@typescript-eslint/consistent-type-imports': [
14+
'warn',
15+
{
16+
prefer: 'type-imports',
17+
disallowTypeAnnotations: true,
18+
fixStyle: 'inline-type-imports',
19+
},
20+
],
21+
'@typescript-eslint/ban-ts-comment': 'off',
22+
'@typescript-eslint/no-explicit-any': 'off',
23+
'import/no-duplicates': 'warn',
24+
},
25+
overrides: [
26+
{
27+
files: appFiles,
28+
excludedFiles: testFiles,
29+
rules: {
30+
'no-restricted-imports': [
31+
'error',
32+
{
33+
patterns: [
34+
{
35+
group: testFiles,
36+
message: 'Do not import test files in app files',
37+
},
38+
],
39+
},
40+
],
41+
},
42+
},
43+
{
44+
extends: ['@remix-run/eslint-config/jest-testing-library'],
45+
files: vitestFiles,
46+
rules: {
47+
'testing-library/no-await-sync-events': 'off',
48+
'jest-dom/prefer-in-document': 'off',
49+
},
50+
// we're using vitest which has a very similar API to jest
51+
// (so the linting plugins work nicely), but it means we have to explicitly
52+
// set the jest version.
53+
settings: {
54+
jest: {
55+
version: 28,
56+
},
57+
},
58+
},
59+
],
60+
}

‎exercises/01.form-validation/01.problem.form-validation/.gitignore

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
node_modules
2+
3+
/.cache
4+
/build
5+
/public/build
6+
.env
7+
/server-build
8+
tsconfig.tsbuildinfo

‎exercises/01.form-validation/01.problem.form-validation/.prettierignore

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
node_modules
2+
3+
/build
4+
/public/build
5+
/server-build
6+
.env
7+
8+
/test-results/
9+
/playwright-report/
10+
/playwright/.cache/
11+
/tests/fixtures/email/*.json
12+
/coverage
13+
14+
package-lock.json

‎exercises/01.form-validation/01.problem.form-validation/.prettierrc.cjs

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
module.exports = {
2+
arrowParens: 'avoid',
3+
bracketSameLine: false,
4+
bracketSpacing: true,
5+
embeddedLanguageFormatting: 'auto',
6+
endOfLine: 'lf',
7+
htmlWhitespaceSensitivity: 'css',
8+
insertPragma: false,
9+
jsxSingleQuote: false,
10+
printWidth: 80,
11+
proseWrap: 'always',
12+
quoteProps: 'as-needed',
13+
requirePragma: false,
14+
semi: false,
15+
singleAttributePerLine: false,
16+
singleQuote: true,
17+
tabWidth: 2,
18+
trailingComma: 'all',
19+
useTabs: true,
20+
overrides: [
21+
{
22+
files: ['**/*.json'],
23+
options: {
24+
useTabs: false,
25+
},
26+
},
27+
{
28+
files: ['**/*.mdx'],
29+
options: {
30+
proseWrap: 'preserve',
31+
htmlWhitespaceSensitivity: 'ignore',
32+
},
33+
},
34+
],
35+
}

0 commit comments

Comments
 (0)