Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[WIP] Upgrade conform version #2

Merged
merged 8 commits into from
Jul 20, 2023
Merged

[WIP] Upgrade conform version #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
3b03f5f
update package
edmundhung Jul 19, 2023
145772b
updates
edmundhung Jul 19, 2023
8f50a60
remove min check
edmundhung Jul 20, 2023
940eca4
form errors are always array now
edmundhung Jul 20, 2023
7f9fbe2
fix typo
edmundhung Jul 20, 2023
de262d8
conform coerce empty file now
edmundhung Jul 20, 2023
5f6fe61
upgrade to v0.8.0-pre.1
edmundhung Jul 20, 2023
7ef165b
update schema setup
edmundhung Jul 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions exercises/01.form-validation/01.problem.form-validation/README.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,11 @@ validation. It's about a better user experience!

Here are the requirements:

- `title` is required, minimum length of 1, maximum length of 100
- `content` is required, minimum length of 1, maximum length of 10000
- `title` is required, maximum length of 100
- `content` is required, maximum length of 10000

You can use native HTML form validation attributes on the `input` and `textarea`
to accomplish this. `required`, `minlength`, and `maxlength` are the attributes
to accomplish this. `required`, and `maxlength` are the attributes
you'll need.

- [📜 Form Validation on MDN](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)
4 changes: 2 additions & 2 deletions exercises/01.form-validation/01.problem.form-validation/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@
"typecheck": "tsc"
},
"dependencies": {
"@conform-to/react": "^0.7.3",
"@conform-to/zod": "^0.7.3",
"@conform-to/react": "0.8.0-pre.1",
"@conform-to/zod": "0.8.0-pre.1",
"@mswjs/data": "^0.13.0",
"@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-slot": "^1.0.2",
Expand Down
2 changes: 0 additions & 2 deletions ...idation/01.solution.form-validation/app/routes/users+/$username_+/notes.$noteId_.edit.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,6 @@ export default function NoteEdit() {
name="title"
defaultValue={data.note.title}
required
minLength={1}
maxLength={100}
/>
</div>
Expand All @@ -69,7 +68,6 @@ export default function NoteEdit() {
name="content"
defaultValue={data.note.content}
required
minLength={1}
maxLength={10000}
/>
</div>
Expand Down
4 changes: 2 additions & 2 deletions exercises/01.form-validation/01.solution.form-validation/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@
"typecheck": "tsc"
},
"dependencies": {
"@conform-to/react": "^0.7.3",
"@conform-to/zod": "^0.7.3",
"@conform-to/react": "0.8.0-pre.1",
"@conform-to/zod": "0.8.0-pre.1",
"@mswjs/data": "^0.13.0",
"@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-slot": "^1.0.2",
Expand Down
2 changes: 0 additions & 2 deletions ...dation/02.problem.server-validation/app/routes/users+/$username_+/notes.$noteId_.edit.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,6 @@ export default function NoteEdit() {
name="title"
defaultValue={data.note.title}
required
minLength={1}
maxLength={100}
/>
{/* 🐨 add the title error messages here */}
Expand All @@ -84,7 +83,6 @@ export default function NoteEdit() {
name="content"
defaultValue={data.note.content}
required
minLength={1}
maxLength={10000}
/>
{/* 🐨 add content the error messages here */}
Expand Down
4 changes: 2 additions & 2 deletions exercises/01.form-validation/02.problem.server-validation/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@
"typecheck": "tsc"
},
"dependencies": {
"@conform-to/react": "^0.7.3",
"@conform-to/zod": "^0.7.3",
"@conform-to/react": "0.8.0-pre.1",
"@conform-to/zod": "0.8.0-pre.1",
"@mswjs/data": "^0.13.0",
"@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-slot": "^1.0.2",
Expand Down
12 changes: 4 additions & 8 deletions ...ation/02.solution.server-validation/app/routes/users+/$username_+/notes.$noteId_.edit.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,7 @@ type ActionErrors = {
}
}

const titleMinLength = 1
const titleMaxLength = 100
const contentMinLength = 1
const contentMaxLength = 10000

export async function action({ request, params }: DataFunctionArgs) {
Expand All @@ -56,14 +54,14 @@ export async function action({ request, params }: DataFunctionArgs) {
},
}

if (title.length < titleMinLength) {
errors.fieldErrors.title.push('Title must be at least 1 character')
if (title === '') {
errors.fieldErrors.title.push('Title is required')
}
if (title.length > titleMaxLength) {
errors.fieldErrors.title.push('Title must be at most 100 characters')
}
if (content.length < contentMinLength) {
errors.fieldErrors.content.push('Content must be at least 1 character')
if (content === '') {
errors.fieldErrors.content.push('Content is required')
}
if (content.length > contentMaxLength) {
errors.fieldErrors.content.push('Content must be at most 10000 characters')
Expand Down Expand Up @@ -117,7 +115,6 @@ export default function NoteEdit() {
name="title"
defaultValue={data.note.title}
required
minLength={titleMinLength}
maxLength={titleMaxLength}
/>
<div className="min-h-[32px] px-4 pb-3 pt-1">
Expand All @@ -131,7 +128,6 @@ export default function NoteEdit() {
name="content"
defaultValue={data.note.content}
required
minLength={contentMinLength}
maxLength={contentMaxLength}
/>
<div className="min-h-[32px] px-4 pb-3 pt-1">
Expand Down
4 changes: 2 additions & 2 deletions exercises/01.form-validation/02.solution.server-validation/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@
"typecheck": "tsc"
},
"dependencies": {
"@conform-to/react": "^0.7.3",
"@conform-to/zod": "^0.7.3",
"@conform-to/react": "0.8.0-pre.1",
"@conform-to/zod": "0.8.0-pre.1",
"@mswjs/data": "^0.13.0",
"@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-slot": "^1.0.2",
Expand Down
12 changes: 4 additions & 8 deletions ...m-validation/03.problem.no-validate/app/routes/users+/$username_+/notes.$noteId_.edit.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,7 @@ type ActionErrors = {
}
}

const titleMinLength = 1
const titleMaxLength = 100
const contentMinLength = 1
const contentMaxLength = 10000

export async function action({ request, params }: DataFunctionArgs) {
Expand All @@ -56,14 +54,14 @@ export async function action({ request, params }: DataFunctionArgs) {
},
}

if (title.length < titleMinLength) {
errors.fieldErrors.title.push('Title must be at least 1 character')
if (title === '') {
errors.fieldErrors.title.push('Title is required')
}
if (title.length > titleMaxLength) {
errors.fieldErrors.title.push('Title must be at most 100 characters')
}
if (content.length < contentMinLength) {
errors.fieldErrors.content.push('Content must be at least 1 character')
if (content === '') {
errors.fieldErrors.content.push('Content is required')
}
if (content.length > contentMaxLength) {
errors.fieldErrors.content.push('Content must be at most 10000 characters')
Expand Down Expand Up @@ -122,7 +120,6 @@ export default function NoteEdit() {
name="title"
defaultValue={data.note.title}
required
minLength={titleMinLength}
maxLength={titleMaxLength}
/>
<div className="min-h-[32px] px-4 pb-3 pt-1">
Expand All @@ -136,7 +133,6 @@ export default function NoteEdit() {
name="content"
defaultValue={data.note.content}
required
minLength={contentMinLength}
maxLength={contentMaxLength}
/>
<div className="min-h-[32px] px-4 pb-3 pt-1">
Expand Down
4 changes: 2 additions & 2 deletions exercises/01.form-validation/03.problem.no-validate/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@
"typecheck": "tsc"
},
"dependencies": {
"@conform-to/react": "^0.7.3",
"@conform-to/zod": "^0.7.3",
"@conform-to/react": "0.8.0-pre.1",
"@conform-to/zod": "0.8.0-pre.1",
"@mswjs/data": "^0.13.0",
"@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-slot": "^1.0.2",
Expand Down
12 changes: 4 additions & 8 deletions ...-validation/03.solution.no-validate/app/routes/users+/$username_+/notes.$noteId_.edit.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,9 +35,7 @@ type ActionErrors = {
}
}

const titleMinLength = 1
const titleMaxLength = 100
const contentMinLength = 1
const contentMaxLength = 10000

export async function action({ request, params }: DataFunctionArgs) {
Expand All @@ -57,14 +55,14 @@ export async function action({ request, params }: DataFunctionArgs) {
},
}

if (title.length < titleMinLength) {
errors.fieldErrors.title.push('Title must be at least 1 character')
if (title === '') {
errors.fieldErrors.title.push('Title is required')
}
if (title.length > titleMaxLength) {
errors.fieldErrors.title.push('Title must be at most 100 characters')
}
if (content.length < contentMinLength) {
errors.fieldErrors.content.push('Content must be at least 1 character')
if (content === '') {
errors.fieldErrors.content.push('Content is required')
}
if (content.length > contentMaxLength) {
errors.fieldErrors.content.push('Content must be at most 10000 characters')
Expand Down Expand Up @@ -126,7 +124,6 @@ export default function NoteEdit() {
name="title"
defaultValue={data.note.title}
required
minLength={titleMinLength}
maxLength={titleMaxLength}
/>
<div className="min-h-[32px] px-4 pb-3 pt-1">
Expand All @@ -140,7 +137,6 @@ export default function NoteEdit() {
name="content"
defaultValue={data.note.content}
required
minLength={contentMinLength}
maxLength={contentMaxLength}
/>
<div className="min-h-[32px] px-4 pb-3 pt-1">
Expand Down
4 changes: 2 additions & 2 deletions exercises/01.form-validation/03.solution.no-validate/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@
"typecheck": "tsc"
},
"dependencies": {
"@conform-to/react": "^0.7.3",
"@conform-to/zod": "^0.7.3",
"@conform-to/react": "0.8.0-pre.1",
"@conform-to/zod": "0.8.0-pre.1",
"@mswjs/data": "^0.13.0",
"@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-slot": "^1.0.2",
Expand Down
12 changes: 4 additions & 8 deletions .../02.accessibility/01.problem.labels/app/routes/users+/$username_+/notes.$noteId_.edit.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,9 +35,7 @@ type ActionErrors = {
}
}

const titleMinLength = 1
const titleMaxLength = 100
const contentMinLength = 1
const contentMaxLength = 10000

export async function action({ request, params }: DataFunctionArgs) {
Expand All @@ -57,14 +55,14 @@ export async function action({ request, params }: DataFunctionArgs) {
},
}

if (title.length < titleMinLength) {
errors.fieldErrors.title.push('Title must be at least 1 character')
if (title === '') {
errors.fieldErrors.title.push('Title is required')
}
if (title.length > titleMaxLength) {
errors.fieldErrors.title.push('Title must be at most 100 characters')
}
if (content.length < contentMinLength) {
errors.fieldErrors.content.push('Content must be at least 1 character')
if (content === '') {
errors.fieldErrors.content.push('Content is required')
}
if (content.length > contentMaxLength) {
errors.fieldErrors.content.push('Content must be at most 10000 characters')
Expand Down Expand Up @@ -133,7 +131,6 @@ export default function NoteEdit() {
name="title"
defaultValue={data.note.title}
required
minLength={titleMinLength}
maxLength={titleMaxLength}
/>
<div className="min-h-[32px] px-4 pb-3 pt-1">
Expand All @@ -148,7 +145,6 @@ export default function NoteEdit() {
name="content"
defaultValue={data.note.content}
required
minLength={contentMinLength}
maxLength={contentMaxLength}
/>
<div className="min-h-[32px] px-4 pb-3 pt-1">
Expand Down
4 changes: 2 additions & 2 deletions exercises/02.accessibility/01.problem.labels/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@
"typecheck": "tsc"
},
"dependencies": {
"@conform-to/react": "^0.7.3",
"@conform-to/zod": "^0.7.3",
"@conform-to/react": "0.8.0-pre.1",
"@conform-to/zod": "0.8.0-pre.1",
"@mswjs/data": "^0.13.0",
"@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-slot": "^1.0.2",
Expand Down
12 changes: 4 additions & 8 deletions ...02.accessibility/01.solution.labels/app/routes/users+/$username_+/notes.$noteId_.edit.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,9 +35,7 @@ type ActionErrors = {
}
}

const titleMinLength = 1
const titleMaxLength = 100
const contentMinLength = 1
const contentMaxLength = 10000

export async function action({ request, params }: DataFunctionArgs) {
Expand All @@ -57,14 +55,14 @@ export async function action({ request, params }: DataFunctionArgs) {
},
}

if (title.length < titleMinLength) {
errors.fieldErrors.title.push('Title must be at least 1 character')
if (title === '') {
errors.fieldErrors.title.push('Title is required')
}
if (title.length > titleMaxLength) {
errors.fieldErrors.title.push('Title must be at most 100 characters')
}
if (content.length < contentMinLength) {
errors.fieldErrors.content.push('Content must be at least 1 character')
if (content === '') {
errors.fieldErrors.content.push('Content is required')
}
if (content.length > contentMaxLength) {
errors.fieldErrors.content.push('Content must be at most 10000 characters')
Expand Down Expand Up @@ -128,7 +126,6 @@ export default function NoteEdit() {
name="title"
defaultValue={data.note.title}
required
minLength={titleMinLength}
maxLength={titleMaxLength}
/>
<div className="min-h-[32px] px-4 pb-3 pt-1">
Expand All @@ -142,7 +139,6 @@ export default function NoteEdit() {
name="content"
defaultValue={data.note.content}
required
minLength={contentMinLength}
maxLength={contentMaxLength}
/>
<div className="min-h-[32px] px-4 pb-3 pt-1">
Expand Down
4 changes: 2 additions & 2 deletions exercises/02.accessibility/01.solution.labels/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@
"typecheck": "tsc"
},
"dependencies": {
"@conform-to/react": "^0.7.3",
"@conform-to/zod": "^0.7.3",
"@conform-to/react": "0.8.0-pre.1",
"@conform-to/zod": "0.8.0-pre.1",
"@mswjs/data": "^0.13.0",
"@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-slot": "^1.0.2",
Expand Down
4 changes: 1 addition & 3 deletions exercises/02.accessibility/02.problem.aria/README.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ case). So when the `title` looks good, it should render HTML like this:
id="note-title"
name="title"
required=""
minlength="1"
maxlength="100"
value="Basic Koala Facts"
/>
Expand All @@ -26,15 +25,14 @@ case). So when the `title` looks good, it should render HTML like this:

And when the `title` has an error, it should render HTML like this:

```html lines=11,12
```html lines=10,11
<div>
<label class="..." for="note-title">Title</label>
<input
class="..."
id="note-title"
name="title"
required=""
minlength="1"
maxlength="100"
value="Basic Koala Facts"
aria-invalid="true"
Expand Down
Loading