RVF v6 rewrite

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -22,17 +22,19 @@ body:
     attributes:
       label: Which packages are impacted?
       options:
-        - label: "`remix-validated-form`"
-        - label: "`@remix-validated-form/with-zod`"
-        - label: "`@remix-validated-form/with-yup`"
+        - label: "`@rvf/react`"
+        - label: "`@rvf/remix`"
+        - label: "`@rvf/zod`"
+        - label: "`@rvf/yup`"
         - label: "`zod-form-data`"
   - type: textarea
     attributes:
       label: What version of these packages are you using?
       placeholder: |
-        - `remix-validated-form`: ^0.0.0
-        - `@remix-validated-form/with-zod`: ^0.0.0
-        - `@remix-validated-form/with-yup`: ^0.0.0
+        - `@rvf/react`: ^0.0.0
+        - `@rvf/remix`: ^0.0.0
+        - `@rvf/zod`: ^0.0.0
+        - `@rvf/yup`: ^0.0.0
         - `zod-form-data`: ^0.0.0
     validations:
       required: true

.github/workflows/test.yml

@@ -14,30 +14,49 @@ jobs:
 
     steps:
       - uses: actions/checkout@v3
-
-      - uses: actions/setup-node@v3
+      - uses: oven-sh/setup-bun@v1
+      - uses: actions/setup-node@v4
         with:
           node-version: 20
-          cache: "yarn"
 
       - name: Install Deps
-        run: yarn install --frozen-lockfile
+        run: bun install
 
       - name: Lint
-        run: yarn run lint
-
-      - name: Typecheck
-        run: yarn run typecheck
+        run: bun run lint
 
       - name: Build
-        run: yarn run build
+        run: bun run build
 
-      - name: Vitest
-        run: yarn run vitest:run
+      - name: Typecheck
+        run: bun run typecheck
 
-      - name: Cypress Tests
-        uses: cypress-io/github-action@v2
+      - name: Vitest
+        run: bun run vitest:run
+
+      - name: Verify Cypress
+        env:
+          CI: 1
+        run: |
+          bunx cypress verify
+          bunx cypress info
+          bunx cypress version
+          bunx cypress version --component package
+          bunx cypress version --component binary
+          bunx cypress version --component electron
+          bunx cypress version --component node
+
+      - name: Cypress tests
+        run: |
+          cd apps/test-app
+          bun run test
+        env:
+          TERM: xterm
+
+      # Save screenshots as test artifacts
+      # https://github.com/actions/upload-artifact
+      - uses: actions/upload-artifact@v4
+        if: failure()
         with:
-          working-directory: ./apps/test-app
-          start: yarn dev
-          wait-on: http://localhost:3000
+          name: screenshots
+          path: cypress/screenshots

.gitignore

@@ -16,4 +16,5 @@ dist
 stats.html
 .idea
 apps/docs/api/index.js
-apps/docs/api/index.js.map
+apps/docs/api/index.js.map
+metafile.*.json

README.md

@@ -45,11 +45,11 @@ npm install remix-validated-form
 There are official adapters available for `zod` and `yup`.
 If you're using a different library, see the [Validation library support](#validation-library-support) section below.
 
-- @remix-validated-form/with-zod
-- @remix-validated-form/with-yup
+- @rvf/zod
+- @rvf/yup
 
 ```bash
-npm install @remix-validated-form/with-zod
+npm install @rvf/zod
 ```
 
 If you're using zod, you might also find `zod-form-data` helpful.
@@ -59,7 +59,7 @@ If you're using zod, you might also find `zod-form-data` helpful.
 In order to display field errors or do field-by-field validation, it's recommended to incorporate this library into an input component using `useField`.
 
 ```tsx
-import { useField } from "remix-validated-form";
+import { useField } from "@rvf/remix";
 
 type MyInputProps = {
   name: string;
@@ -83,7 +83,7 @@ export const MyInput = ({ name, label }: MyInputProps) => {
 To best take advantage of the per-form submission detection, we can create a submit button component.
 
 ```tsx
-import { useFormContext, useIsSubmitting } from "remix-validated-form";
+import { useFormContext, useIsSubmitting } from "@rvf/remix";
 
 export const MySubmitButton = () => {
   const isSubmitting = useIsSubmitting();
@@ -110,7 +110,7 @@ Now that we have our components, making a form is easy.
 import { DataFunctionArgs, json, redirect } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import * as yup from "yup";
-import { validationError, ValidatedForm, withYup } from "remix-validated-form";
+import { validationError, ValidatedForm, withYup } from "@rvf/remix";
 import { MyInput, MySubmitButton } from "~/components/Input";
 
 // Using yup in this example, but you can use anything
@@ -119,7 +119,7 @@ const validator = withYup(
     firstName: yup.string().label("First Name").required(),
     lastName: yup.string().label("Last Name").required(),
     email: yup.string().email().label("Email").required(),
-  })
+  }),
 );
 
 export const action = async ({ request }: DataFunctionArgs) => {
@@ -209,7 +209,7 @@ type Validator<DataType> = {
   validate: (unvalidatedData: unknown) => ValidationResult<DataType>;
   validateField: (
     unvalidatedData: unknown,
-    field: string
+    field: string,
   ) => ValidateFieldResult;
 };
 ```
@@ -224,7 +224,7 @@ The out-of-the-box support for `yup` in this library works as the following:
 
 ```ts
 export const withYup = <Schema extends AnyObjectSchema>(
-  validationSchema: Schema
+  validationSchema: Schema,
   // For best result with Typescript, we should type the `Validator` we return based on the provided schema
 ): Validator<InferType<Schema>> =>
   createValidator({

TODO.md

@@ -0,0 +1,16 @@
+- Consider adding a `beforeSubmit` callback
+
+// follows
+
+- Globally setting some settings with a context or something.
+- turn on hydrateRoot to test that mode
+
+- Add a new bug repro template
+
+- Maybe add a `validatePlainObject` method to `createValidator` to be more efficient
+
+# Some breaking change notes
+
+- Unmounting controlled fields no longer clears the value.
+- `defaultValues` configured via `"path.fields"` no longer works. The default values object should be in the expected shape.
+- `validate` helper returns an object of errors instead of a validation result.