Upgrade conform version (#2)

epicweb-dev · Jul 20, 2023 · 7110162 · 7110162
1 parent 92fe28b
commit 7110162
Show file tree

Hide file tree

Showing 65 changed files with 466 additions and 644 deletions.
diff --git a/exercises/01.form-validation/01.problem.form-validation/README.mdx b/exercises/01.form-validation/01.problem.form-validation/README.mdx
@@ -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)
diff --git a/exercises/01.form-validation/01.problem.form-validation/package.json b/exercises/01.form-validation/01.problem.form-validation/package.json
@@ -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",

diff --git a/...idation/01.solution.form-validation/app/routes/users+/$username_+/notes.$noteId_.edit.tsx b/...idation/01.solution.form-validation/app/routes/users+/$username_+/notes.$noteId_.edit.tsx
@@ -58,7 +58,6 @@ export default function NoteEdit() {
 							name="title"
 							defaultValue={data.note.title}
 							required
-							minLength={1}
 							maxLength={100}
 						/>
 					</div>
@@ -69,7 +68,6 @@ export default function NoteEdit() {
 							name="content"
 							defaultValue={data.note.content}
 							required
-							minLength={1}
 							maxLength={10000}
 						/>
 					</div>

diff --git a/exercises/01.form-validation/01.solution.form-validation/package.json b/exercises/01.form-validation/01.solution.form-validation/package.json
@@ -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",

diff --git a/...dation/02.problem.server-validation/app/routes/users+/$username_+/notes.$noteId_.edit.tsx b/...dation/02.problem.server-validation/app/routes/users+/$username_+/notes.$noteId_.edit.tsx
@@ -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 */}
@@ -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 */}

diff --git a/exercises/01.form-validation/02.problem.server-validation/package.json b/exercises/01.form-validation/02.problem.server-validation/package.json
@@ -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",

diff --git a/...ation/02.solution.server-validation/app/routes/users+/$username_+/notes.$noteId_.edit.tsx b/...ation/02.solution.server-validation/app/routes/users+/$username_+/notes.$noteId_.edit.tsx
@@ -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) {
@@ -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')
@@ -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">
@@ -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">

diff --git a/exercises/01.form-validation/02.solution.server-validation/package.json b/exercises/01.form-validation/02.solution.server-validation/package.json
@@ -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",

diff --git a/...m-validation/03.problem.no-validate/app/routes/users+/$username_+/notes.$noteId_.edit.tsx b/...m-validation/03.problem.no-validate/app/routes/users+/$username_+/notes.$noteId_.edit.tsx
@@ -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) {
@@ -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')
@@ -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">
@@ -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">

diff --git a/exercises/01.form-validation/03.problem.no-validate/package.json b/exercises/01.form-validation/03.problem.no-validate/package.json
@@ -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",

diff --git a/...-validation/03.solution.no-validate/app/routes/users+/$username_+/notes.$noteId_.edit.tsx b/...-validation/03.solution.no-validate/app/routes/users+/$username_+/notes.$noteId_.edit.tsx
@@ -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) {
@@ -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')
@@ -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">
@@ -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">

diff --git a/exercises/01.form-validation/03.solution.no-validate/package.json b/exercises/01.form-validation/03.solution.no-validate/package.json
@@ -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",

diff --git a/.../02.accessibility/01.problem.labels/app/routes/users+/$username_+/notes.$noteId_.edit.tsx b/.../02.accessibility/01.problem.labels/app/routes/users+/$username_+/notes.$noteId_.edit.tsx
@@ -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) {
@@ -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')
@@ -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">
@@ -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">

diff --git a/exercises/02.accessibility/01.problem.labels/package.json b/exercises/02.accessibility/01.problem.labels/package.json
@@ -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",

diff --git a/...02.accessibility/01.solution.labels/app/routes/users+/$username_+/notes.$noteId_.edit.tsx b/...02.accessibility/01.solution.labels/app/routes/users+/$username_+/notes.$noteId_.edit.tsx
@@ -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) {
@@ -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')
@@ -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">
@@ -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">

diff --git a/exercises/02.accessibility/01.solution.labels/package.json b/exercises/02.accessibility/01.solution.labels/package.json
@@ -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",

diff --git a/exercises/02.accessibility/02.problem.aria/README.mdx b/exercises/02.accessibility/02.problem.aria/README.mdx
@@ -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"
 	/>
@@ -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"