Address bar need to fill every time user want to test the page. Here
added history suggestions which let users reuse peviously entered
params.
Had to implement own combobox-like behavior to support syggestions
universally on all inputs.
<img width="384" alt="Screenshot 2024-05-18 at 17 35 54"
src="https://github.com/webstudio-is/webstudio/assets/5635476/4f5add04-cfe9-4ba0-a824-821011bbdd81">
## Description
1. Zoom detector that warns user next to breakpoints selector had bugs
## 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's 2 major changes
- switched to native body validation without json auto-formatting while
editing
- automatially add Content-Type: application/json header when object is
set from binding expression
This refactoring opens room for more improvements.
<img width="478" alt="image"
src="https://github.com/webstudio-is/webstudio/assets/5635476/5559a6ab-7e08-4b47-b0a1-924818c006b4">
To keep in history only consistent paths and avoid overfetching
resources I changed address bar saving logic. Before each type in
address bar params triggered save. Now only "enter" while param is
focused or address bar popover is closed triggers saving.
Can be tested with new story.
Here refactored name field with native validation
and accessed it with form data in on submit.
Basic zod validation will wllow to avoid issues with missings fields.
Note: review with hidden whitespaces
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
5de6)
Closes https://github.com/webstudio-is/webstudio/issues/2324
Explanation https://share.descript.com/view/8NayOadrxo8
Biggest problem it addresses is that users on base breakpoint want to
see the site in a full width without having to resize each time.
Additionally user doesn't want it to resize when switching between
preview and canvas on a custom selected size.
1. removed remaining hook wrappers from nanostores
2. moved the resize handles to the outside of the canvas and gave them
some space - fixes the problem with dragging to the edge and then not
being able to get them back because mouse grabs the browser itself
3. On base breakpoint and higher when there is no min-width breakpoint
and user switches to preview, we use the entire workspace, then going
back, we calculate based on base breakpoint start.
4. On all other breakpoints we keep the size user has chosen between the
preview and canvas, we don't reset it.
## Steps for reproduction
1. without min breakpoints on canvas
- on base, switch to preview, see maximum canvas size, switch back to
canvas, see base canvas width
- on every breakpoint and in between see that it keeps the size
1. add min-width breakpoint, on base, switch to preview, see the same
size
## Code Review
- [ ] hi @istarkov , 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 switched resource headers to native validation. Now it finally
blocks closing variable popover and shows errors. Works even for
multiple headers with the same input.name.
Had to workaround InputField cases like ref -> inputRef and
event.currentTarget -> inputRef.current.
<img width="393" alt="Screenshot 2024-05-16 at 02 07 12"
src="https://github.com/webstudio-is/webstudio/assets/5635476/49d172ca-a87b-4b41-8fe8-a2d7b3079b59">
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">
Closes https://github.com/webstudio-is/webstudio/issues/3277
## Description
As a user I want to be able to see what email my login is using
## 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 added utilities to update expressions partially for example in
graphql json body we need to update separately query and variables
expressions but store as single body expression.
Fixes https://github.com/webstudio-is/webstudio/issues/3295
<img width="401" alt="image"
src="https://github.com/webstudio-is/webstudio/assets/52824/f12226e2-45ea-4cf6-85ac-05a1a6d4b3ce">
## Description
User may be accidentally on a zoom and this will result in unpredictable
media query application.
We show warning only when user has non 1 zoom level
## Steps for reproduction
1. click button
2. expect xyz
## Code Review
- [ ] hi @TrySound , 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
## Description
ref #3343
Overlay or hidden support for headers etc to make it look more disabled
<img width="479" alt="image"
src="https://github.com/webstudio-is/webstudio/assets/5077042/b390ff27-ad49-490b-bf22-d8acb15b792a">
## Steps for reproduction
Create/Edit Page, change type on XML
## 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 simplified detecting system resource control with explicit resource
field. Without it ui falls back to http ui.
Will be useful for graphql ui later.
Also disabled system resource option for non-paid users
## Testing
- create sitemap resource
- close variable popover
- open again and see system control instead of default http control
## Description
Update edited element on blur
https://fast-canvas-edit.development.webstudio.is/builder/ab3439dc-8eab-4050-a5b4-71247fba7d4c
## 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
## Description
Add simple protection against non js and jsdom bots
Idea is to add hidden js generated field on submit, and check that
matchMedia is working.
## Steps for reproduction
Go here
https://saas-form-rdlrc.wstd.work/
then check via curl
```bash
curl 'https://saas-form-rdlrc.wstd.work/?index=&_data=routes%2F_index' \
-H 'content-type: application/x-www-form-urlencoded;charset=UTF-8' \
-H 'referer: https://saas-form-rdlrc.wstd.work/' \
--data-raw 'ws--form-id=2TIgyB2vQViDMitiYiGSK&name=wewe&email=wewe&ws--form-bot=18f72a6'
curl 'https://saas-form-rdlrc.wstd.work/?index=&_data=routes%2F_index' \
-H 'content-type: application/x-www-form-urlencoded;charset=UTF-8' \
-H 'referer: https://saas-form-rdlrc.wstd.work/' \
--data-raw 'ws--form-id=2TIgyB2vQViDMitiYiGSK&name=wewe&email=wewe'
curl 'https://saas-form-rdlrc.wstd.work/?index=&_data=routes%2F_index' \
-H 'content-type: application/x-www-form-urlencoded;charset=UTF-8' \
-H 'referer: https://saas-form-rdlrc.wstd.work/' \
--data-raw 'ws--form-id=2TIgyB2vQViDMitiYiGSK&name=wewe&email=wewe&ws--form-bot=jsdom'
```
## 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
## Description
fixes#3355
Allows filter parser to parse `rgba` and `hex` values when copy pasted.
I added some tests for filters too, we added initiall before as the css
filters parser returns false positives. But now, i added all the valid
tests, so at least we can catch things like this in future.
## Steps for reproduction
- Use the following filter values to test them.
```
drop-shadow(10px 10px 25px blue)
drop-shadow(10px 10px 25px rgba(0, 0, 255, 1))
drop-shadow(10px 10px 25px #0000FF)
```
## 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
- [x] made a self-review
## Before merging
- [x] tested locally and on preview environment (preview dev login:
5de6)
- [x] added tests
## 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
Ref https://github.com/webstudio-is/webstudio/issues/2798
Here fixed failing whole canvas when object is passed to image src or
link href. Both src and href are casted to string same way html does
with its props. It does not solve the issue universally but at least
covers most popular ones.
## Description
This PR refactors the values in style-panel that handles complex values.
Properties like `box-shadow`, `text-shadow`, `filter`,
`backdrop-filter`, `transition` handles multiples values which needs to
be displayed as list. And then allow users to edit them using a content
panel. This PR removes all the individual layers of each property and
created a common layer list item.
## Steps for reproduction
1. Add values to all the sections,
2. Re-order the layers between the values of each property.
3. Deploy / Export the project.
## 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
- [x] made a self-review
- [x] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [x] tested locally and on preview environment (preview dev login:
5de6)
---------
Co-authored-by: Oleg Isonen <oleg008@gmail.com>
I forgot to add a link in the first revision. Will an href with "#"
work?
## 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
## Description
Do not show styles at all on non html page
## Steps for reproduction
Open any page with document type xml, see no style panel is present
## 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
## Description
#3337 related
## 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
Turns out no-internal-imports did not forbid anything out of the box but
requires specifying specific folders to forbid. This does not scale well
and this rule mostly harms because requires either excluding each
package with submodules or suppressing it with comment.
Most rules protect from legacy and class component apis.
Many rules are checked by typescript.
A few rules just do not bring much value.
The package brings too many dependencies.
## Description
We should not check user auth on trpc,
context security is enough
## Steps for reproduction
Open in Incognito
https://trpc-auth.staging.webstudio.is/builder/95821bd9-040a-4294-aa7f-edf26d7f1ebe?authToken=137726f9-7914-4807-8d62-091eea59296b&mode=edit
Click publish
## 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
## Description
Close the dialog when a navigable link within it is clicked
Fixes the issue when we have anchor links inside Sheet
## Steps for reproduction
### Project Example:
https://href.staging.webstudio.is/builder/95821bd9-040a-4294-aa7f-edf26d7f1ebe
### Published:
https://link-inside-sheet-saas-sk7pk.wstd.work/
Open sheet
Click links, links should work
## 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
## Description
This PR adds support for using backdrop-filter property in the
style-panel. Here are more details on the property to test it around.
https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow
## Steps for reproduction
1. Add an element to the canvas.
2. Click on the "+" icon in the style panel next to the `Text Shadows`
section.
3. Edit the default filter that is added.
4. Swap the layers and publish the project.
## 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
- [x] made a self-review
- [x] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [x] tested locally and on preview environment (preview dev login:
5de6)
## Description
This PR adds support for using `backdrop-filter` property in the
style-panel. Here are more details on the property to test it around.
https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter
## Steps for reproduction
1. Add an element to the canvas.
2. Click on the "+" icon in the style panel next to the `Backdrop
Filters` section.
3. Edit the default filter that is added.
4. Swap the layers and publish the project.
## 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
- [x] made a self-review
- [x] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [x] tested locally and on preview environment (preview dev login:
5de6)
## Description
Form action in case of undefined should use Remix Form to avoid page
reload
## 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
## Description
Do not show bind button inside `<fieldset disabled`
That will mean that button itself is disabled and don't need to be shown
## 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
## 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
## Description
Vite uses `webstudio` exports see resolve.conditions
## 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
Closes https://github.com/webstudio-is/webstudio/issues/3322
## Description
Users want to test in prod before including in sitemap
## Steps for reproduction
1. click button
2. expect xyz
## Code Review
- [ ] hi @istarkov , 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
## Description
See storybook, buttons inside disabled fieldset should be disabled. As
of now buttons didn't support native disabled style
See pixel comparison
## 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
Ref https://github.com/webstudio-is/webstudio/issues/2903
Here added support for new `<ws:descendent />` component. It allows to
style any children or descendents of components. Primary usage is for
embed content which renders html and need to style tags.
Descendent component accepts "selector" prop which can be suffix like `
img`, ` .image` or `::first-child` pseudo-element.
Potentially it could be used as tag styling for any element.
Can be tested in any element by dropping "Descendent" component from
"internal" category.
Bogdan Chadkin