## 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
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
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
- 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
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
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: []
}
```
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
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.
## Description
Seems like newer props released by mdn
I did nothing just executed build:args
## 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] - clicks not working
## 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 meta.detachable flag which allows when set to true disable
copying, dragging and deleting instances of this component without ts
parent instance.
This is necessary to constrain components based on external code and
prevent deleting hidden components user cannot add again.
Esbuild is not officially supported by jest
and all available packages do not fit all our need.
esbuild-jest we used for a long time have problems too.
The most important one is frigile heuristik to instrument any code with
`ock(` in text. And we have some `pointerLock(` in design-system.
The other problem is instrumentation converts to commonjs and result
goes to esbuild which tries to convert back to esm but with only default
export. So jest fails anywhere we try to import design-system in tests.
The other problem is lack of maintanance and very old packages inside.
Here refactored original package and removed everything we don't need
including mocks instrumentation.
This should fix the build in
https://github.com/webstudio-is/webstudio-builder/pull/1986
```diff
Packages:
- 1924
+ 1782
```
## Description
Local styles from
https://github.com/shadcn-ui/ui/blob/main/apps/www/registry/default/ui/tooltip.tsx
## Steps for reproduction
Add NEW tooltip, see styles
## 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
Closes https://github.com/webstudio-is/webstudio-builder/issues/1850
## Description
Just a new icon
## Steps for reproduction
1. open components panel
## 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
The main reason for this change is the realization that a product needs
some more protection than a typical library. With this change it is
still an Open Source Core, but now corporations can't build on top of it
without contributing back to the OSS community or without buying a
license.
Ivan Starkov
