Fixes https://github.com/webstudio-is/webstudio/issues/3680
And fixes " Marketplace lets people access gated features (resource
settings need to be disabled on free)" in
https://github.com/webstudio-is/webstudio/issues/3700
## Description
- Allow user see resources from marketplace but no changes if not on pro
- When not on pro, you can fully see hints and even select Resources,
but you can't change them, changes won't be saved and user will see a
banner
## 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` file
## Description
This PR moves the `transforms` section behind a feature flag. The
section needs to add tooltips for all properties and scale need to have
a `lock` behaviour between the `scaleX` and `scaleY` properties.
## 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
- [x] made a self-review
## Before merging
- [x] tested locally and on preview environment (preview dev login:
5de6)
Ref https://github.com/webstudio-is/webstudio/issues/3789
Here changed a few things
- replace WebhookForm action prop with resource, which is sent with
hidden field instead of instance id
- prevented generating method and action in client side code
- generate "action" resource instead of form properties for server
action prop is replaced only inside cli to not require support in
builder yet, in the future this can be part of client migrations
## Description
Adds the primary `translate`, `scale`, `rotate`, skew` properties under
transform section. Related to #3411
## Steps for reproduction
- Add multiple properties under the transform section.
- Update values of each property from the UI.
- Hide/Delete each individual property
## Todo
- [x] Need to discuss if the `isExperiemental` flag need to be removed
before merging the branch.
## 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
- [x] tested locally and on preview environment (preview dev login:
5de6)
- [x] added tests
- [ ] if any new env variables are added, added them to `.env` file
---------
Co-authored-by: Oleg Isonen <oleg008@gmail.com>
Fixes
https://discord.com/channels/955905230107738152/1265688229529784320
wf embed is display block by default, but we have nothing that would set
this because our own preset sets display to content
## Description
1. What is this PR about (link the issue and add a short description)
## Steps for reproduction
1 copy code embed/html embed from webflow
2.paste it and see the display is block, not contents
## 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` file
## 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/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
## Description
Decided to move bug report into the help menu, because that's the most
likely place people will go anyways
## 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` file
## Description
Previous pr introduced a bug
## 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` file
## Description
- [x] name category with Properties & attributes for clarity
- [x] adapt humanizeString from prop/attribute names
- [x] add description to the combobox
- [x] Class Name > Class
- [x] add validation for custom attributes
## Steps for reproduction
1. click button
4. 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` file
## Description
Recorded a new video series and added them to a playlist. Changed intro
vid in dashboard to open the playlist.
## 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` file
## Description
1. when show was not set before, its undefined and needs to be treated
as false
2. when instance has no properties at all, show prop needs to be created
## Steps for reproduction
1. test with a new instance that has no properties e.g. body
2. test with an instance that had never set show to true or false, so
its undefined
## 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` file
Closes https://github.com/webstudio-is/webstudio/issues/237
## Description
Now you can show/hide directly from navigator
## Steps for reproduction
1. focus/hover any navigator item
2. show/hide item works as expected
3. in sync with show/hide in settings
## 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` file
## Description
[Big Project
Example](https://postgrest.development.webstudio.is/builder/be939bf2-9095-4e17-b175-69de2bbf9597)
Reduces time of big projects loading:
✓ { scenario:new_o }...........: avg=2.58s min=1.99s med=2.54s max=3.53s
p(90)=2.95s p(95)=3.15s p(99)=3.44s count=31
✓ { scenario:old_o }...........: avg=5.5s min=4.55s med=5.12s max=15.58s
p(90)=5.44s p(95)=6.02s p(99)=12.87s count=31
2 times faster. (but highly depends on test times, project size etc
sometimes it's 6x difference)
Reduces patch time 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/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
Fixes https://github.com/webstudio-is/webstudio/issues/3750
## Description
Indicate show=false in the navigator
## Steps for reproduction
1. toggle show switch
2. see item in the navigator opacity changed including it's children
## 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` file
## Description
We were currently not setting the tag that comes from webflow properties
## 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` file
## Description
Skipping unnecessary combo class
## Steps for reproduction
1. in webflow, add element with class .a, define color
2. add element with class .b, define font size
3. add element with class .a.b don't define anything
4. paste .a.b into webstudio - see .a .b tokens are added, but no .a.b
## 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` file
Fixes https://github.com/webstudio-is/webstudio/issues/3751
## Description
Clicking on a label that toggles the switch is not necessary and leads
to accidental changes.
## 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` file
## Description
Now can be pasted
https://www.relume.io/components/gallery-7
## 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` file
## Description
https://discord.com/channels/955905230107738152/1262723546669645865/1262723682032287838
## 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` file
This error happened because we assumed local styles to be strings but
for example order can be number. Relaxed validation to unknown. Value is
used only in template literal.
Here fixed the issue with pasting gradients from webflow. Their css
engine output -webkit-fill-color: transparent along with background-clip
property. This is very implicit behavior from css point of view.
Here I instead added logic to add color: transparent from paste from
webflow overriding previously set color. It will not work in 100% but
should cover relume templates.
## 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/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
Our repeated sections like background or transitions are too repetetive
and require logic to store multiple properties as single style value.
Here added new control which covers more use cases out of the box and
allows to avoid repetition for shorthand properties.
Switched only transitions for now.
## Description
Source order specificity in webflow is completely unpredictable. I am
just trying to do a wild guess based on testing with relume what would
be the right order.
## 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` file
## Description
When webflow has a combo class out of .a.b.c we need to check .a, .b,
.c, .a.b, .a.c etc all combinations because in webflow they can apply as
it does with regular css
## 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` file
Here added new utility for builder to support parsing css fragments in
style controls like background, transition, shadows etc.
The idea is to use regular parseCss where possible and fallback to
specified property parsing.
This way we do not need to strip property name manually and can always
have shorthands expanded in result.
Also user can paste multiple properties at once like background-color
and background-image when describe gradient.
<img width="266" alt="Screenshot 2024-07-11 at 16 38 06"
src="https://github.com/webstudio-is/webstudio/assets/5635476/8d3b8454-0f8a-48b2-adbd-389a28993e3a">
## Description
Parse `transform` value into tuples. We need to use shorthand transform
property for `skew` and `rotate` to support the UX.
- **skew** doesn't have individual property yet. So need to use this as
backup.
- **rotate** doesn support setting individual `x, y, z` properties on
the long hand property like in the design. So, we are can use transforms
as backup and allow to set individual `rotateX`, `rotateY` and `rotateZ`
values.
## Code Review
- [ ] hi @TrySound , I need you to do
- detailed review (read every line)
## Before requesting a review
- [x] made a self-review
## Before merging
- [x] tested locally and on preview environment (preview dev login:
5de6)
- [x] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [x] added tests
## Description
Added missing transition section title label indicator for style-source.
<img width="239" alt="Screenshot 2024-07-10 at 12 41 10 PM"
src="https://github.com/webstudio-is/webstudio/assets/11075561/036ecd90-9b3f-45cb-812f-5bfef56410ab">
## Code Review
- [ ] hi @TrySound , I need you to do
- conceptual review (architecture, feature-correctness)
## Before requesting a review
- [x] made a self-review
## Before merging
- [x] tested locally and on preview environment (preview dev login:
5de6)
- [x] added tests
Webflow wraps its custom properties (which are not actually custom
properties) with `@raw<|value|>` which our parser just skips because
unable to parse.
Here simply stripped with regex all such wrappers.
## Description
This
<img width="856" alt="image"
src="https://github.com/webstudio-is/webstudio/assets/5077042/f8894380-0dbb-45c7-a1a5-410dbcb01fc8">
To this
<img width="1049" alt="image"
src="https://github.com/webstudio-is/webstudio/assets/5077042/bf618095-08be-4c6f-850f-56354e74e738">
## Known issues:
### All
- w-nav-link preset colors do not match
### Mobile
Mobile burger is not shown
- w-nav-button does not have breakpoint style i.e. display: none->block
for mobile
- w-nav-menu does not have breakpoint related style i.e display: block
-> none for mobile
- we don't have widget icons like burger i.e. `"data": { "widget": {
"type": "icon", "icon": "nav-menu" } }` _having breakpoint issues and
that user in any case need to use Sheet on mobile this is ok_
## Steps for reproduction
Copypaste Navbar from webflow 2 webstudio
## 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` file
---------
Co-authored-by: Oleg Isonen <oleg008@gmail.com>
## Description
Instead of adding all wf breakpoints at once, we now will add them
incrementally if there are styles on a particular breakpoint
## 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` file
## Description
- support combo classes
## Steps for reproduction
1. create project A, create class .a and set some style A
2. copy element with class .a
3. create a project B with also class .a, set some other style B
4. create a class .b, set some style C
5. create a combo class .a.b, set some style D
6. copy first project element with class .a into ws
7. copy second project element with combo class .a.b into webstudio
8. expect the element to have 3 tokens: `.a .b .a.b`, expect .a to have
style A, .b to have style B and .a.b to have style D defined on them
## 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` file
All value parsers can be generalized at some point to make adding new
feature easier. Here moved timing-function parser into value parser and
reused it in builder.
## Description
Canvas crash.
When store.subscribe callback can be called sync and unsubscribe
function isn't yet defined, it will crash
## Steps for reproduction
1. open project
2. go back to dashboard
3. open project again
4. should not crash
## 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` file
## Description
That schema is currently too string, and throws an error
## 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` file
Ref https://github.com/webstudio-is/webstudio/issues/2647
Here added additional `breakpoint` property to parsed style declaration.
It basically a sanitized media query like `(min-width:768px)` which is
easy to parse. Styles inside unsupported conditions are just stripped
away.
Close https://github.com/webstudio-is/webstudio/issues/3682
## Description
1. on initial load resize handes were not visible because initial width
was not set
## 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` file
Ivan Starkov