## Description
1. What is this PR about (link the issue and add a short description)
## Steps for reproduction
1. click button
2. expect xyz
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it on preview
## Before requesting a review
- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
Here migrated all left fields to native navigation. Got rid from legacy
useField hook.
Replaced number input with just text input as more reliable. And reused
expression linter for json value.
Check following forms
- string
- number
- boolean
- json
<img width="401" alt="image"
src="https://github.com/webstudio-is/webstudio/assets/5635476/001bde86-3b7c-472d-ad26-acad2f347712">
Here integrated native fields validation into our form utilities. It
will let us have more isolated validation complexity within each field.
The trick was to detect if any error are not shown. Solved by iterating
form.elements and checking its input.validity.valid and data-color=error
attribute.
<img width="417" alt="Screenshot 2024-05-16 at 01 08 37"
src="https://github.com/webstudio-is/webstudio/assets/5635476/ce112f00-aafd-4388-bb0b-a64baccaffac">
Ref https://github.com/webstudio-is/webstudio/issues/2532
Here changed variable popover UI
- removed save/cancel buttons - save is happening on close
- replaced value/resource tabs with type select
- support additional string, number and boolean values
- add validation to value and resource forms
Also added form utilities to manage and compose field validation.
Remix fetcher introduce constraints for own server implementation. For
example body can be FormData, object or string and FormData requires
custom stream parser (they provide one).
Though streaming blob much simpler task and can be done with native
streams.
Another constraint is request cancelation when component is unmounted.
We workaround this with global persistent fetcher. Though native fetch
does not require this workaround too.
We are moving pages logic to client side to support collaboration and do
less work on server. Here migrated validation to client side. Server
validation will be removed with endpoints in following PR.
Ivan Starkov