Here I allows to return undefined in swapDropTarget. This enables us to
reset drop target when move cursor out of droppable elements.
For example before Body was always selected as drop target. Though this
behavior prevent us from restricting parents for cases like Tabs>Tab and
List>ListItem.
Also got rid from emulatePointerAlwaysInRootBounds which was used to
workaround that fallback to Body. So now no longer necessary too.
https://user-images.githubusercontent.com/5635476/235142653-48b95ebe-9714-44c4-90d9-b69b930f2379.mov
Part of https://github.com/webstudio-is/webstudio-builder/issues/1407
## Description
Implements design changes from
https://www.figma.com/file/xCBegXEWxROLqA1Y31z2Xo/%F0%9F%93%96-Webstudio-Design-Docs?node-id=3719-47947&t=IyN7o4sC7xAxaPNG-4
- new List and ListItem primitive components just for keyboard
accessibility
- deprecated List and ListItem we had before because they are only
useful in asset manager and we already learned how we want to treat
keyboard differently
## 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
## Description
Release 0.61.0
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
Now embed templates can define simplified version of our styles which is
useful for radix components and as AI output.
```
styles: [
{
property: 'backgroundColor',
value: { type: 'keyword', value: 'red' }
}
]
```
Ref https://github.com/webstudio-is/webstudio-builder/issues/1067
We need to move away from getComputedStyle for not local styles in style
panel.
Here added default html style from browser sources. Now we can render it
and properties initial styles instead of computed styles.
Also fixed in properties data generation currentcolor -> currentColor
and removed same from border presets.
Before preset styles used `{ tag: { property: value } }` format. Now we
are switching to `{ tag: [{ state,property,value }] }` to support
specifying states in preset styles.
Same format will be used for embed template styles.
Here switched only format. States in preset styles not supported in
builder yet.
## Description
Ref. #1411 (Not everything is fixed yet, only what is checked. Will fix
the rest in a separate PR.)
1. Updated Icons
2. Fixed geometry of the grid control
3. (!) Removed ability to set certain values as specified in the issue
and in Figma:
- `display: inline-flex`
- `flex-direction: normal, *-reverse`
- `justify-content: normal`
- `align-items: normal`
- `align-content: normal`
- `flex-wrap: normal, wrap-reverse`
4. Replaced dropdown with a toggle button for `direction` and `wrap`
5. Used toggle button for the gap link control
6. Fixed layout of controls
## Steps for reproduction
1. Choose `display: flex` on the Layout section in style panel
3. See the changes from the list above
Ref https://github.com/webstudio-is/webstudio-builder/pull/1516
Here added new utility "tree template" to describe children in component
meta and generate instances from it while inserting.
Added simple template to form component as example.
Ref
https://remix.run/docs/en/1.15.0/guides/constraints#server-code-pruning
Remix use NAME.server.ts extension to enforce omitting module from
client bundles. Though we heavily used `/server` in packages which had
no affect and blocked us in using a few node apis which were not
polifilled with empty modules while bundling for client.
Here I replaced `/server` with `/index.server` and removed all legacy
server entry points which are not longer necessary with new typescript
resolution.
## Description
Npm update 0.60.0
## 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
Co-authored-by: Bogdan Chadkin <opensource@trysound.io>
## Description
remove white spaces to check diff
<img width="276" alt="image"
src="https://user-images.githubusercontent.com/5077042/233678799-1e57e74b-5aa9-4c9a-9a9c-bf210c5ba27a.png">
## Steps for reproduction
Select link component, add style source, select current page.
Should be Current Page and not the "Aria Current Page"
## 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
Outline calculated incorrectly for new elements in case if new element
has size and added into collapsed item
<img width="361" alt="image"
src="https://user-images.githubusercontent.com/5077042/233684755-27be5da9-9c6a-4fbf-b81a-481ec2abab60.png">
## Steps for reproduction
Create Box
Add Image inside
See outline now is on Image
## 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
https://discord.com/channels/955905230107738152/1098959267396059228
There were two bugs:
1. Same as in
https://github.com/webstudio-is/webstudio-builder/pull/1483 setState
didn't work correctly after React update
2. Scrub used to call `onStatusChange("idle")` at unmount (now fixed).
We use scrub for canvas resize, and restore pointer events when status
changes to "idle". But we also unmount scrub on DnD start. So on DnD
start we ended up with pointer events turned on.
## Steps for reproduction
1. DnD of components to canvas should work well now
when base breakpoint selected, always use a width between max and min
breakpoints at the lowest value
## 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-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 should not have any server specific functions in react-sdk. Any small
change can break client environment.
And moving to /server entry point still problematic because this entry
point is node specific while we want to support as many environments as
possible.
Recently remix added defaults for different environments so user do not
need to add any entry.client.tsx or entry.server.ts at all.
Defaults do not work for us in builder though doing great in size test
setup.
We have a bug that asset cannot be applied in background style section.
This is because image transformer was set only once on rule creation. We
need to reset it with actual assets on every styles updates.
## Description
Npm Release 0.59.0
## 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
they will be reintroduced with new design
## 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-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/807
Here added ability to extend states in style source menu list with a
list defined in component meta.
As an example added `[aria-current=page]` support to links. For now can
be statically set with props panel.
Note: review with hidden whitespaces
## Description
Merge after #1487
## 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. Made `href` always present (# is used when not set, similar to
Webflow). Fixes#1380
2. Added "Section" option in URL Control. Closes#993
3. Added "ID" prop that is visible in all components. Closes#991
4. Closes#1475
## Steps for reproduction
1. Add ID prop to an instance
2. Add a link that references that instance by ID
## Description
NPM 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
1. resize handles on canvas using css only (visibly faster)
2. initial breakpoint on first load when base breakpoint exists needs to
be selected in a way that the base breakpoint is activated, currently we
were landing on a smaller breakpoint when there was not enough space to
land on base
3. fix overflow for when instance on canvas is bigger than iframe size,
outline is rendered outside of iframe and may run outside of it unless
we hide the overflowing parts
## 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-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
Made handshake between canvas and builder.
Now publish actions are delayed in local array until handshake message
from destination is received
Switched on hydrateRoot to enable concurrent mode
unstable_batchedUpdates are removed
## Steps for reproduction
## 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
This PR "swaps" the guiding principle behind what options are in the
base `tsconfig.json`.
Previously TS was configured to *not* emit declarations and we were
forcing for them to be emitted with CLI flags. This had an unfortunate
result - errors about "not portable type definitions" were not displayed
in the IDE because to its best knowledge the type definitions were never
supposed to be emitted. So it wasn't worthwhile to surface this error.
With the adjusted options those errors will be raised in the IDE which
should improve the feedback loop for those errors.
## Code Review
- [ ] hi @TrySound, @istarkov, @kof - you need to recheck if you have
any doubts about this approach, if you see anything wrong with it in the
context of this project
## Before merging
- [ ] test IDE setup
- [ ] test build script
- [ ] test typechecking and dts emit
## Description
Now user can keep resizing outside of the window boundary
Also:
- fixes https://github.com/webstudio-is/webstudio-builder/issues/1465
## Steps for reproduction
1. start resizing, keep going outside of window
## 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-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
This fixed crossdomain development mode used in SaaS
## 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 https://github.com/webstudio-is/webstudio-builder/issues/1460
## 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-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://react.dev/blog/2022/03/29/react-v18https://react.dev/blog/2022/03/08/react-18-upgrade-guide
- bumped all deps to use react 18
- storybook still somehow enforces react 17 (but not react-dom) so
forces with overrides until bump of storybook
- both storybook and remix still use legacy api so concurrent features
are not yet enabled. Will do in separate PRs
- fixed weird react-hot-toast error which expose function as renderable
type
- fixed a few untyped useCallback which failed with new react types
- sdk size became a little bigger
## Description
1. Added an option to enter raw URL in the File control, and made sure
it looks like in Figma. Closes#1011
2. Added "Attachment" option in the URL control. Ref. #993
## Steps for reproduction
1. Try to set a Link's href to an asset
4. Try to set a Image's source to a raw URL
Bogdan Chadkin
