- got rid of unused esbuild-node-externals package
- removed esbuild override/resolution to old version
- deduplicateed webpack 4 and 5 into single 4 instance
- upgraded esbuild to the latest version with "context" api instead of
incremental flag which potentially forces to fix the issue with remix
once they upgrade
Esbuild bump fixed the issue with remix going infinite watch loop after
any changes in packages and looks like esbuild in remix no longer blocks
parallel turbo run!!!
## Description
Implements all design changes and accessibility for components add panel
https://user-images.githubusercontent.com/52824/227720011-344b31f8-ce17-4d13-ad4d-2d506ca3bcce.mp4
## Code Review
- [ ] hi @rpominov , 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
The last piece to address instances by selectors
- the mode is represented as text editing instance selector
- reset editing mode along with selection on user input instead of
ssubscribing to selected store
- moved enter/esc shortcuts to shared between builder and canvas
- got rid of legacy subscriptions to stores
Here bit less straightfforward as lexical<>instances conversion is not
very straightfforward because lexical represents a few instances with
its formats.
To solve conversion complexity used almost same ancestor traverser as
before but finish once eiditing node is reached.
Pass instance selector for each webstudio-component ot identify selected
and editing instances.
- in many places root check can be replaced with selector.length === 1
- reparent and insert utilities now accept selectors
- findClosestDroppableTarget output end instead of last index and always
fallback to root
## Description
1. Replaces card component in the add component panel
This doesn't add all design changes yet
## 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-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
#1169
## 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
Ref https://github.com/webstudio-is/webstudio-builder/issues/248
We need to get rid of legacy preview to move forward with slots. Here
exposed drag item and drop target from tree component. Now we can
connect canvas and navigator.
Note: navigator changes are not yet reflected in canvas while dragging.
## Description
Closes#1100Closes#1271
1. Added `SectionTitle`
https://section-title--638245578b47d4399fba191a.chromatic.com/?path=/story/library-section-title--demo
2. Added basic `ArrowFocus` utility
3. Used the new `SectionTitle` in `CollapsibleSection`, so props and
style panels now use the new `SectionTitle`
4. Made `CollapsibleSection` open by default as specified in #1100
## Steps for reproduction
1. Open style panel
2. Open props panel
3. Check storybook demos by the links above
## Description
1. If you mouse over and then mouse out directly to the side, without
hovering other instances, the instance outline gets stuck
## 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-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
Ref https://github.com/webstudio-is/webstudio-builder/pull/1268
Now all builder UI rely on separate placement computing
- for background layers had to add default getValidChildren to exclude
placement indicator child
- fixed text selecting in safari while dragging with preventDefault on
move
## Description
ref #1169
<img width="230" alt="image"
src="https://user-images.githubusercontent.com/5077042/226687676-eba0e113-844d-44e6-9afa-81dff5746e73.png">
Based on this comment
https://github.com/webstudio-is/webstudio-builder/issues/1169#issuecomment-1478260843
Border Style section is added. As no section `+` button exists.
IconButton has changed to be in sync with design.
ToggleButten added.
To review start with borders.tsx
## Steps for reproduction
Open Borders section, change style, borders width, radius, individual
radius, individual borders
## Code Review
- [x] hi @rpominov , I need you to do
check that ToggleButton component and its stories are ok.
- [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
- [ ] made a self-review
- [ ] 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)
- [ ] 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
Update version 0.49.0 to publish npm
## Steps for reproduction
1. click button
2. expect xyz
## 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
- [ ] 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 need to render placement indicator on both tree and canvas at the
same time. To achieve this we need to be able to compute position from
drop target which should be universal for tree and canvas.
Here introduced computeaIndicatorPlacement utility which accepts info
inferred from cursor but universal for realms.
We finally able to use normalized data to render tree. A few last
improvements in tree drag and drop add support for slots with
duplicating ids within tree.
## Description
ref #877 - the ability to parse multiple gradient layers from Figma
closes#1255 - now background added at the top
fixes css value input invalid input now shows as invalid
## Steps for reproduction
Copy some background from figma like
```
background: linear-gradient(180deg, #11181C 0%, rgba(17, 24, 28, 0) 36.09%), none, linear-gradient(180deg, rgba(230, 60, 254, 0.33) 0%, rgba(255, 174, 60, 0) 100%), radial-gradient(54.1% 95.83% at 100% 100%, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(122.33deg, rgba(74, 78, 250, 0.2) 0%, rgba(0, 0, 0, 0) 69.38%), radial-gradient(92.26% 201.29% at 98.6% 10.65%, rgba(255, 174, 60, 0.3) 0%, rgba(227, 53, 255, 0) 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */, radial-gradient(84.64% 267.51% at 10.07% 81.45%, rgba(53, 255, 182, 0.2) 0%, rgba(74, 78, 250, 0.2) 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */, #EBFFFC;
```
Open any layer paste it into the code, and click enter or blur.
See layers added. BGColor has changed if set.
## 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")
## 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
- [x] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
Tree node is a renderer for pages and navigator instances. Selector of
nodes is build by passing parent selectors.
Select and hover callbacks are now provide selectors.
In many cases the logic in tree component rely only on ids and it's
additional complexity to resolve full instances.
Here I rewrite getItemChildren, canAcceptChild and canLeaveParent to
accept instance id instead of instance.
Closes https://github.com/webstudio-is/webstudio-builder/issues/1104
## Description
anything that uses position relative has higher stacking context, in
this case spacing uses position relative, so we always use portal to
prevent the need to use zIndex
## Steps for reproduction
1. open spacing
2. open style sources dropdown
3. it should not overlap
## 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-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
Now getIsExpanded and setIsExpanded accept selectors. Though still have
to use findItemById for getChildren utility. Later whole data will be
managed with ids.
and word "set" to "local" for parity with code
also changed background.canvas to background.workspace
---------
Co-authored-by: Bot (build-figma-tokens.yml) <bot@localhost>
Co-authored-by: Roman Pominov <rpominov+github@gmail.com>
Fixes https://github.com/webstudio-is/webstudio-builder/issues/1213
## Description
when user drags color picker thumb, they can move mouse over canvas,
with CORS canvas will hide the events and we loose control
## Steps for reproduction
1. see video in the issue
2. also affected dragging components onto canvas
## 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-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
Before supporting selector in callbacks need to upport selectors in
data. Here internal drag item and drop target supported as selectors.
In the future these states will be exposed so for drop target added
custom representation without element to allow sending it via pubsub
between realms.
## Description
Fixes https://github.com/webstudio-is/webstudio-builder/issues/1223
After handling settings update, I forgot to delete the update from the
list, but if the user doesn't unmount component, switches instance, then
unmounts, the same scheduled update is still there and applies to the
new instance
## Steps for reproduction
1. name an instance
2. select a diff instsance
3. switch from settings tab to styles tab
## 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-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
Selector is a list of ids from root to target to allow identify
instances even with duplicated ids.
Here is the first step to support selectors in navigator. Passing
selected instance selector already helped to get rid of one getItemPath
usage.
Fixes#198
## Description
1. disables builder in non-chromium browsers
2. disables builder when window is smaller than 900px
3. allows testing in unsupported browsers via feature flag
"unsupportedBrowsers" or "*"
## Steps for reproduction
1. open builder in safari
2. resize the window to < 900 and then return back to 900+
## 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-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
Got rid of getItemPathWithPositions. Horizontal shift can compute these
positions with getItemPath and getChildren. Refactored left shift with
for loop.
Label again started flickering because hovered instance and hovered
outline store changes have delay in between. Solution as before is to
provide all info with outline. Here I just passed both label and
component to get the shape for getInstanceLabel.
Removed react hook from instance hovering and refactored with instance
selectors.
## Description
- Removed Link wrapper that used to apply `preserveBuildParams` (part 1
of #1120)
- Removed `preserveBuildParams` completely, because we no longer need it
as we request page switch instead of letting link to navigate
- Removed `mode` parameter from BuildParams, because it's always "edit"
now
- Fixes#1231
## Steps for reproduction
1. Open preview mode
2. Click on some links
## Description
ref #877
- [x] - add storybook
<img width="305" alt="image"
src="https://user-images.githubusercontent.com/5077042/224958554-b414cf44-6978-4ae1-81e4-fde7403615b7.png">
- [x] - add drag'n'drop
## Steps for reproduction
Add few background layers, drag'n'drop them
## 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
- [ ] 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
"Click" based implemention had aa few important bugs. Selecting other
instance was not possible when some text was selected in editing mode.
This is consequence of a fix when other instance is selected user select
text and move cursor outside of editor while still selecting.
Here's how all solved. We track both mousedown and mouseup. When their
targets are different we do nothing because this is most likely text
selection or drag'n'drop.
Editing state a little simplified by just looing for closest
contenteditable instead of editing id comparison.
Instance address now computed by traversing dom.
With slots there can be same ids in one tree so we need new way to
address instances. Here I propose the list from target instance to the
root.
Now instead of computing parents by normalized tree (one instance of
slot can have many parents) we just access already computed list from
rendered tree.
This address can be computed when user click in dom which can be
traversed or it can be passed top-down with props.
The main con of this approach is collaboration. Reparanted instances on
by one user makes "selected address" stale. Though we have similar
situation with single id when instance is deleted.
Isolated mode for slots/components will make this problem less
noticable.
Newly created instance does not propagate to client because we no longer
reload on navigating to new page.
Here moved page and root instance creation to client with patches.
## 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
Bogdan Chadkin
