## Description
npm packages update
## 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-builder/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
When the mouse leaves Tooltip.Content and moves over an iframe, the
Radix Tooltip stays open.
This happens because Radix's internal grace area relies on the
pointermove event, which isn't triggered over iframes.
The current workaround is to set pointer-events: none on the canvas when
the tooltip is open.
Here are:
- [x] Tooltip component sets `--canvas-pointer-events` on the
documentElement if any tooltip is open
- [x] Iframe uses `--canvas-pointer-events`
- [x] `isCanvasPointerEventsEnabledStore` in order to use above css
variable
- [x] Color picker hack fully removed. Now just intercepts `open` state
change, as it's dialog and canvas is not interactive when it's open
already so it's safe to disable pointer-events too.
## 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-builder/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 sync bugs
https://discord.com/channels/955905230107738152/1138073603036954664
- There is no sense to retry `fatal` errors, we can stop sync.
- Fatal errors state, show fatal error message.
- If user cancel confirmation goto fatal state too, as sync will never
be fixed.
- Intercept error if project is loaded during synchronisation.
- Errors logged, as during investigation there were no way to get why
`patch` requests are in failed state.
- rest.patch are now wrapped with try/catch so we can distinguish api
errors.
- toasts added too (and made infinite in case of fatal errors)
- exponential backoff + jitter added
- improved connectivity messages
Use for review:
<img width="328" alt="image"
src="https://github.com/webstudio-is/webstudio-builder/assets/5077042/c9bff25b-4e50-44ed-b4b9-1d3460c13ee1">
### Todo,
- [ ] - test well.
## 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-builder/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
- [x] - Fixes that {mix|max}Width was used instead of label at
Breakpoints edit
- [x] - Fixes that form parts wasn't exists partially on useEffect
unmount already, and wrong comment that `Should never be not successful
because the html validator should catch it` - as it was not successfull
;-) having mount/unmount cases before.
## Steps for reproduction
Open breakpoints dialog
See now labels used
<img width="307" alt="image"
src="https://github.com/webstudio-is/webstudio-builder/assets/5077042/ee4a64fa-caa4-43e0-b058-8008a472574f">
Click Edit, see same
<img width="482" alt="image"
src="https://github.com/webstudio-is/webstudio-builder/assets/5077042/bbf38d79-0776-4e0c-92e7-2ef267674d30">
Try edit, see everything saved and changed
2. expect xy
## 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-builder/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 prefetch viewport for as a link prefetch option
- Prevent leaking prefetch property and other remix props to the dom
## Steps for reproduction
1. add a link
2. set prefetch to viewport
3. see that it prefetches a linked page (internal page only) as the link
scrolls into view
## 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-builder/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
We want to control some builder behavior specific to some components.
For example set open state on dialog, collapsible etc when select in
navigator.
Here I added hooks to be called from builder and executed in canvas. For
now added 2 hooks onNavigatorSelect and onNavigatorDeselect.
Ref https://github.com/webstudio-is/webstudio-builder/issues/1825
## Description
PR adds the `sync` command to the `cli`. This can run in two modes.
```sh
webstudio sync <projectId>
```
which will create a new project folder and loads the build data into
`<project>/webstudio.json` file.
```sh
webstudio sync
```
This mode is to sync the existing project with the latest build data.
## Code Review
- [x] 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")
## Description
Double click on button cause text duplication
https://discord.com/channels/955905230107738152/1138065267549818880
## 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-builder/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
closes#2040
## 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-builder/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
Seems like duplication were broken like 3+ months
https://discord.com/channels/955905230107738152/1137586643130396762
## 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-builder/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 3
https://discord.com/channels/955905230107738152/1137452246876033114
Toolbar selection is not working inside tooltip content text.
## Steps for reproduction
Open tooltip, start editing tooltip content text. Select some text with
mouse. Mouse is now visible
## 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-builder/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 Toolbar positioning if canvas has zoomed
https://discord.com/channels/955905230107738152/1137141681007886388
## 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-builder/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
Removes `div style="display:contents"` arount Radix etc Components.
Below in Implementation is written why SelectedInstanceConnector was
moved into standalone root level hook.
In short
- [x] - No issues with visually hidden components.
- [x] - Allows us to not use refs for the builder support. (Now our
components can be without refs)
- [ ] - cc @TrySound ContentEditable could also use
getAllElementsBoundingBox from domUtils to get element ref this will
allow to remove useRef from WebstudioDevComponent
Changes from previous behavior:
- Now on preview elements are not selected (now is like in webflow).
- On changing marign etc we do not hide outline as before
## Implementation:
having `instanceSelector` we can
- Find all elements with attribute `data-ws-selector` which ends with
`instanceSelector`
- Then find "root/parent" elements of found elements. _(We can find few
subtrees)_
- Then use that elements instead of wrapper element.
This works fine with tree hovering and selections.
This allows us to not use `refs` inside our WebstudioDevComponent at
all.
### Below is why SelectedInstanceConnector was rewritten
The issue arises when such element is duplicated by radix into
VisuallyHidden element.
There is no way to detect now inside `WebstudioComponentDev` does
current Component is inside VisuallyHidden
(We have no reference element to detect that.)
So current approach makes any additional changes useless.
I'm going to close this. And leave just for example
## 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-builder/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
- [x] - Side selection through properties
- [x] - `nav role="navigation"` as default Content element
- [x] - ability to change nav and role
- [x] - shadcdn styles
- [x] - can have overflow content and be scrollable
Content props:
<img width="292" alt="image"
src="https://github.com/webstudio-is/webstudio-builder/assets/5077042/b26f7d82-bfc3-4ec7-8b60-7f2168ef9e7c">
## 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-builder/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
Action is used for hooks, so should be there by default
## Steps for reproduction
1. open form settings
2. see there is Action property
## Code Review
- [ ] hi @istarkov , I need you to do
- conceptual review (architecture, feature-correctness)
## 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-builder/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
Fix presets in case of namespaeces added `"` to selector
<img width="605" alt="image"
src="https://github.com/webstudio-is/webstudio-builder/assets/5077042/9b367c73-466e-4592-b45f-0b84660e423f">
Added presets to radix components
## 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-builder/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 dedicated field to meta to simplify computing and using
indexes.
```
{
type: 'container',
label: 'Tab Trigger',
// this one
indexWithinAncestor: 'Tabs'
}
```
Since it's single value, we no longer need to provide ancestor name in
runtime and no longer have bug with namespaces. Index now provided with
props.
```
getIndexWithinAncestorFromComponentProps(props): string | undefined
```
Here changed the way we define data sources in embed templates. Now they
have separate section on instance. This way we will be able to use data
sources on styles or instances without binding them to props.
Also it's not more clear where data source is created vs where it is
only referenced.
```js
{
type: 'instance',
component: 'Form',
dataSources: {
state: { type: 'variable', initialValue: 'initial' },
stateInitial: { type: 'expression', code: `state === 'initial'` }
},
props: [
{
type: 'dataSource',
name: 'data-state',
dataSourceName: 'state'
}
],
children: []
}
```
Here fixed paste of bare links which render empty paragraph now because
of missing mdast extension. micromark extension is responsible only for
parsing but do not produce ast.
With this change you can paste links and get Paragraph>Link.
Radix provider in canvas couples too tight with radix we should go the
other way. Here wrapped each
tooltip sdk component with provider and wrapped
with provider in builder instead of root.
## 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-builder/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
Removing mentioning Entri, there is no value in it, nobody knows them
## 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-builder/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 support for namespacing external libraries. Need this for
radix components to not prefix manually and have isolation in names in
case a few client libs are added an have collission in names or we add
native components with same names.
## Description
Initial dialog implementation
Additionally:
`backdropFilter` property added to support dialog backdrop css
<img width="250" alt="image"
src="https://github.com/webstudio-is/webstudio-builder/assets/5077042/4f0e5b88-2b3b-42e6-bfd9-34dd36dc08f3">
Not detachables are Overlay, Trigger and Content
Header, Close can be removed
Next PRS:
- [ ] - Move to radix components repo
- [ ] - Add Right Icons
## Steps for reproduction
Create new project, add Radix/Dialog component
## 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-builder/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
getBrowserStyle is used only inside of builder and should not be part of
sdk importable by all component libraries. It also depends on global
types which need to be included in every package dependent on react-sdk.
Ivan Starkov
