Skip to content

Commit

Permalink
docs(validations): Add Zod support and Adapter feature
Browse files Browse the repository at this point in the history
  • Loading branch information
JoseLion committed Aug 12, 2023
1 parent 4ebef58 commit 9f6e0cc
Show file tree
Hide file tree
Showing 4 changed files with 29 additions and 12 deletions.
6 changes: 3 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ TypeScript-first, lightning fast Forms for React.js and React Native.

Lynx.ts is a [React Context](https://react.dev/learn/passing-data-deeply-with-context) based Form Provider. However, thanks to the brilliant [use-context-selector](https://github.com/dai-shi/use-context-selector) the re-renders caused by changes in the context are drastically reduced. The `use-context-selector` hook implements [React's RFC context selector](https://github.com/reactjs/rfcs/pull/119) in user land, this way we can specifically select what we need from the context and avoid unnecessary re-renders when unused parts of the context change.

Being a TypeScript-first library, you'll find type-safety on every turn: validation, simple/array/nested fields, form submision, etc. The codebase also follows a [full memoization principle](https://attardi.org/why-we-memo-all-the-things/), which makes Lynx.ts fast and ready for small and big projects.
Being a TypeScript-first library, you'll find type-safety on every turn: validation, simple/array/nested fields, form submision, etc. The codebase also follows a [full memoization principle](https://attardi.org/why-we-memo-all-the-things/), which makes Lynx.ts fast and performant on small or big projects.

## Compatibility

Expand All @@ -34,9 +34,9 @@ Check each package documentation for more details on how to use them.

## Design and next steps

The intention is to keep this library small and simple. So initially, the validation only supports a [Yup](https://github.com/jquense/yup) schemas. However, the intention is to add support for [Zod](https://zod.dev/) moving forward and based user requests. A third option to add custom validators can be implememted if requested too.
Validation is a crutial part of forms in most cases. For Lynx.ts validation is always required, but because it can be a whole project out on its own, validation is supported through 3rd-party libraries. Both [Yup](https://github.com/jquense/yup) and [Zod](https://zod.dev/) schemas are supported out-of-the-box, but you can use any other library by just implementing an `Adapter<T>` which tells the form how to validate the schema. Check the Core package documentation for more details on [custom validation adapters](./packages/core/README.md#validation-adapters). In the remote case you don't need to validate your forms, we provide a `noValidate` adapter which you can use as well.

Same as with the schema, errors have a single behavior. They are present only if the **field is dirty or the form was submitted**. Adding other behaviors will be based on requests and their use cases.
Errors are present only if the **field was touched or the form submitted**. Adding other behaviors to how errors show will be based on requests and their use cases. Feel free to open an issue and share yours!

## Something's missing?

Expand Down
25 changes: 22 additions & 3 deletions packages/core/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,18 +16,17 @@ TypeScript-first, lightning fast Forms for React.js and React Native. The `@lynx
## Requirements

- **[React.js](https://react.dev/):** >=16.8.0
- **[Yup](https://github.com/jquense/yup):** >=1.0.0

## Install

Using Yarn:
```
yarn add @lynxts/core react yup
yarn add @lynxts/core
```

Using NPM:
```
npm i @lynxts/core react yup
npm i @lynxts/core
```

## Usage
Expand Down Expand Up @@ -255,6 +254,26 @@ const ArrayField = arrayFieldOf<User>();
</ArrayField>
```

### Validation adapters

Lynx.ts works out-of-the-box with both [Yup](https://github.com/jquense/yup) and [Zod](https://zod.dev/) schemas, but if you'd prefer to use a different library, you need only to implement an `Adapter<T>` which tells Lynx.ts how the validation should work.

```ts
interface Adapter<T extends Struct> {
required: (path: Path<T>) => boolean;
validate: (values: Partial<T>) => Promise<Result<T, Map<Path<T>, string>>>;
validateAt: <V>(path: Path<T>, value: V) => Promise<Result<true, string>>;
}
```

An `Adapter<T>` consist on implementing three function:

- **required:** A function that tells if a field in a path is required or not.
- **validate:** A function used to validate the Form values against a schema.
- **validateAt:** A function used to validate a single field value in a path.

The `validation` prop accepts either a Yup/Zod schema or a custom adapter. If you wish not use any validation at all, Lynx.ts provides a `noValidate` adapter you can use for this purpose.

## Something's missing?

Suggestions are always welcome! Please create an [issue](https://github.com/JoseLion/lynxts/issues/new) describing the request, feature, or bug. We'll try to look into it as soon as possible 🙂
Expand Down
5 changes: 2 additions & 3 deletions packages/native/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,18 +18,17 @@ TypeScript-first, lightning fast Forms for React.js and React Native. The `@lynx
- **[lynxts/core](../core/README.md):** Same as the `@lynxts/native` version used
- **[React.js](https://react.dev/):** >=16.8.0
- **[React Native](https://react.dev/):** >=0.59.0
- **[Yup](https://github.com/jquense/yup):** >=1.0.0

## Install

Using Yarn:
```
yarn add @lynxts/core @lynxts/native react react-native yup
yarn add @lynxts/core @lynxts/native
```

Using NPM:
```
npm i @lynxts/core @lynxts/native react react-native yup
npm i @lynxts/core @lynxts/native
```

## Usage
Expand Down
5 changes: 2 additions & 3 deletions packages/web/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,20 +13,19 @@ TypeScript-first, lightning fast Forms for React.js and React Native. The `@lynx
* [**lynxts/core**](../core/)**:** Same as the `@lynxts/web` version used
* [**React.js**](https://react.dev/)**:** >=16.8.0
* [**React DOM**](https://www.npmjs.com/package/react-dom)**:** >=16.8.0
* [**Yup**](https://github.com/jquense/yup)**:** >=1.0.0

### Install

Using Yarn:

```
yarn add @lynxts/core @lynxts/web react react-dom yup
yarn add @lynxts/core @lynxts/web
```

Using NPM:

```
npm i @lynxts/core @lynxts/web react react-dom yup
npm i @lynxts/core @lynxts/web
```

### Usage
Expand Down

0 comments on commit 9f6e0cc

Please sign in to comment.