https://github.com/webstudio-is/webstudio/issues/2324https://github.com/webstudio-is/webstudio/assets/52824/7489689f-92bb-4cd5-888b-748bcae2369c
## Description
With this PR all select controls get a preivew when user hovers with the
mouse or uses arrow keys.
We use select control in:
- position
- blend mode
- font-weight
- background size
- many others
In many cases preview won't be visible because cursor doesn't change
unless you actually have mouse over that element
## Steps for reproduction
1. hover over position value
2. when mouse out preview should be gone
3. arrow keys do the same
4. if value wasn't applied and select box closed - preview should reset
## 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
Now works
<img width="524" alt="image"
src="https://github.com/webstudio-is/webstudio/assets/5077042/7e5acfb3-3f3d-497f-86ee-b86a5aa47af0">
## 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
Scope utility give us a way to generate more readable data sources and
actions. Here variables, expressions and actions are output into the
same map.
In the future same utility can be used to produce framework specific
stores like React.useState.
See fixtures for example.
## Description
CLI support of vercel image optimisation
## 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
Pubsub is only used for builder/canvas communication while sdk is
responsible for rendering sites.
Here moved pubsub to builder. Now we can drop nanoevents from cli
dependencies.
Css-data now responsible for generated data and parsers which requires
heavy dependencies like csstree and openai.
Here moved style schema into css-engine which makes is responsible for
own input representation. So now schema and serialization are co-located
in single package.
Cli install size
```diff
du -ck node_modules
- 42680
+ 35516
```
## Description
ref #2226
<img width="379" alt="image"
src="https://github.com/webstudio-is/webstudio/assets/5077042/ee316434-07f7-470c-9bee-1db68f1a9afa">
Everything except Button aligned to the design, we don't have Button
with Menu Item style
## 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
closes#2225
## Steps for reproduction
Add/delete/update/load links see button has pending state
## 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/2233
Capture mode fixes unexpected submit of form when placed inside radix
dialog. Though didn't find a trace why this happen. There is
`form.method = 'dialog'` which has special behavior inside `<dialog>`
but it is not our case.
## Description
Add admin permissions to shared links
<img width="328" alt="image"
src="https://github.com/webstudio-is/webstudio/assets/5077042/972a46b9-154b-4426-9d8c-ab62ebf9a9e3">
<img width="283" alt="image"
src="https://github.com/webstudio-is/webstudio/assets/5077042/d187da84-4d49-4308-b6ea-f09cb7a09e8c">
Share links for now disabled for admin role. Will do in the next
iteration after releasing above.
## Steps for reproduction
Create admin token link.
Open in incognito, see Publish is working.
## 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
We had db data validation enabled before but it made api requests very
slow. We disabled this validation and seems like there is no need to
enable again.
Also dropped all zod list types of our data because validation was the
only use case.
We are planning to move all types necessary to represent generated site
into separate package. This way we will be able to make CLI as small as
possible.
Here moved only assets schema. Now we get rid of aws, sharp and one
prisma usage (project-build still use it)
```diff
- 99MB
+ 75MB
```
Here moved PropMeta to react-sdk package. It was the only reason to
install generate-arg-types cli as direct dependency in all component
libraries.
This is the resulting install size of webstudio CLI. TypeScript and
react-docgen-typescript no longer installed.
```diff
- 141MB
+ 99MB
```
We used to set undefined in assets map value to preserve the order
between uploading and uploaded states. Now we started sorting uploaded
assets by create time and stubbing no longer do anything useful.
Closes https://github.com/webstudio-is/webstudio/issues/1991
## Description
Updated new page icon to using Plus icon
## Steps for reproduction
1. open pages panel
2. see new icon
## 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
1. Chevron icon changed, color not set
## Steps for reproduction
1. open footer
2. see color of cheveron is white
## 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
Here addressed of some recent feedback
- removed cursor: pointer from all buttons
- added active states to accordion and tabs triggers
- replaced X with svg icon in dialog and sheet close button
- updated item icon for all components
- removed dir and orientation props from accordion initials
## Description
1. What is this PR about (link the issue and add a short description)
**Important** The PR adds tooltips only for HTML attributes.
Fixes https://github.com/webstudio-is/webstudio-builder/issues/2027
## Steps for reproduction
1. Add a few components to the canvas
3. Select one
4. Go to the Settings tab in the right sidebar
5. Hover over the labels
HTML attributes should show a tooltip with a description
## Code Review
- [ ] @taylornowotny please review the descriptions in the
props-descriptions.ts file
- test it on preview
- [ ] @istarkov check the first commit that is where the implementation
and integration are done. The idea behind this is that we have a central
file with HTML attributes descriptions and when generating components
props we pick the descriptions from there if the property doesn't have a
custom description. Essentially we use props-descriptions as a fallback.
Do we need tests for this feature?
## Before requesting a review
- [ ] made a self-review
## 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
---------
Co-authored-by: Giuseppe Gurgone <ggurgone@users.noreply.github.com>
Co-authored-by: istarkov <istarkov@gmail.com>
Before when start dragging we searched for closest rich editor under
cursor and did nothing when the instance is not detachable (for example
select value or switch indicator).
Here I changed the behavior to also look for closest detachable instance
and drag whole thing. This way we do not need toast like in navigator
and can canvas dnd just work.
Also fixed placeholder in "Select Value" component. Before was no way to
change it.
Here improved instance selection by using pointerdown and pointerup.
This solves issues with libraries like radix preventing firing mouse
events.
Though there is a problem. Pointer events do not support event.detail to
inform about double clicks. So here I implemented multiple clicks
detection. For this I track time between latest pointerup and next
pointerdown events.
## Description
On onmount outdated onSave were used. What cause creation of additional
href property on instance.
- [x] - Fix duplication on unmount (1st commit)
- [x] - Fix save, to validate if multiple properties with same name
exists. (2nd commit)
- [x] - Use latest prop in resolveUrlProp (3rd commit)
Use hide whitespaces.
<img width="303" alt="image"
src="https://github.com/webstudio-is/webstudio-builder/assets/5077042/156fc5a4-c697-4b05-8caf-7a3b7fa29264">
## 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
If the parent component has `meta.stylable = false`, we need to skip it
to get the correct style of the parent.
## Steps for reproduction
Create the Box and add the Sheet to it.
When you go to the sheet/trigger/button, you will notice that it does
not have a 'Flex Child' section or a 'zIndex' property.
To add these, add 'display: flex' to the box you created initially. When
you go back to the sheet/trigger/button, you will see that it now has a
'Flex Child' section and a 'zIndex' property.
## 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
Originally started in
https://github.com/webstudio-is/webstudio-builder/pull/2132
Closes https://github.com/webstudio-is/webstudio-builder/issues/2039
## Description
Help dialog in builder and dashboard
## Steps for reproduction
1. open builder
2. open help dialog in the left sidebar
3. open dashboard
4. click help button
## 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
---------
Co-authored-by: wasimTQ <wasimthoufiq21@gmail.com>
Ref https://github.com/webstudio-is/webstudio-builder/issues/2151
Here added new logic to intercept bubbled to html element events
- handle click on links in preview
- prevent forms submit
- prevent keydown on input and textarea in canvas
This allows to remove some props overrides from webstudio component and
fixes editing of radix input and textarea.
## Description
it was originally moved below because it was "unstyled" and took too
much space
## Steps for reproduction
1. open style panel
2. see position after size section
## 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
Here changed canvas rect subscription to read always in effect to not
get stale state.
This fixes the issue with drag'n'drop when switch to another breakpoint.
Here subscribed selected instance selector store instead of navigator
events. Now selection from canvas trigger hooks as well. Necessary to
support navigation menu component.
## Description
This adds inline-flex display option as requested here
https://github.com/webstudio-is/webstudio/discussions/50
The use case is having a button with icon and text, without turning it
into block element with full width.
## Steps for reproduction
1. select any element and set display: flex
## 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
https://discord.com/channels/955905230107738152/1140198766364860416
## 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
Oleg Isonen