86 Commits
Author SHA1 Message Date
Ivan Starkov 50be0047a1 feat: Add system.origin (#3254)
## Description

review per commit.

- Add system.url.origin to the props, rename publishedUrl ->
publishedOrigin
- Add system.url.origin to the published sites

Example on published site
https://saas-sitemapxml-x1g2n.wstd.work/

Example on builder
<img width="342" alt="image"
src="https://github.com/webstudio-is/webstudio/assets/5077042/bea3c9b4-c7dc-4936-a56a-fa33327ab6d0">

We use because as of now system is not available on canvas
<img width="448" alt="image"
src="https://github.com/webstudio-is/webstudio/assets/5077042/2eaa02b0-7566-492b-b98e-7af8a4f636e0">


## 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
2024-04-30 08:59:28 +03:00
Ivan Starkov cc72849a62 feat: Canvas drawing of xml element (#3245)
## Description

This is only for Canvas rendering.

<img width="829" alt="image"
src="https://github.com/webstudio-is/webstudio/assets/5077042/b63efe11-effd-4ed7-b9ff-a19d4a19a125">

<img width="244" alt="image"
src="https://github.com/webstudio-is/webstudio/assets/5077042/3f59819b-486a-4d75-8890-c5c14950393c">

Editable
<img width="269" alt="image"
src="https://github.com/webstudio-is/webstudio/assets/5077042/e25af3b0-0903-4390-aec8-1fc7383ec24b">

For generating it will change a little.

## Steps for reproduction

[Play Ref
https://xml-element.development.webstudio.is/builder/cab934af-8615-411a-99c1-5822a98eac74](https://xml-element.development.webstudio.is/builder/cab934af-8615-411a-99c1-5822a98eac74)

## 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
2024-04-29 14:08:27 +03:00
Oleg Isonen c478e65029 fix: Prevent editing Code Text component as text (#3246)
Code Text component is designed to render code and in the future also to
add syntax highlighting. With this PR it won't be possible to treat it
like a Box any more and code will be entered using code property.

Benefit is: better UX for editing code and no unintended side effects
later with highlighting.

## Steps for reproduction

1. click button
2. expect xyz

## 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
2024-04-27 21:33:57 +02:00
Ivan Starkov d411890d77 fix: Remove @see @link and @deprecated from html properties descriptions (#3244)
## Description

Format of descriptions has changed
```
Defines a human readable text alternative of aria-colindex.\n@see aria-rowindextext {@link .....}
```

Remove for now. 

## 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
2024-04-26 13:27:15 +03:00
Ivan Starkov 1b3032d4fe feat: Switch to single queue (#3239)
## 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.example`
and the `builder/env-check.js` if mandatory
2024-04-24 23:59:17 +03:00
Oleg Isonen 129aa5d826 experimental: New webhook form icon + update meta (#3208)
## Description

<img width="232" alt="image"
src="https://github.com/webstudio-is/webstudio/assets/52824/874d761a-f2d0-444a-a2e5-aba859b05b63">

## 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
2024-04-19 20:26:36 +02:00
Oleg Isonen 6019107d9a experimental: Webhook form icon and name (#3207)
## Description

- renamed the old form to Webhook Form
- added a special icon 

<img width="241" alt="image"
src="https://github.com/webstudio-is/webstudio/assets/52824/51de24dd-08aa-4ade-a0b3-f02f6146c635">


## 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
2024-04-19 15:39:09 +02:00
Oleg Isonen 1cbb1853f2 fix: Rewrite Vimeo component to fix a bug and make logic readable (#3177)
Closes https://github.com/webstudio-is/webstudio/issues/3097

## Description

1. rewrite logic, hopefully now its readable
2. ensure spinner showing right after click
3. ensure player works even if play button and/or spinner are hidden

## Steps for reproduction

1. @istarkov is aware

## 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/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
2024-04-15 17:50:32 +02:00
Oleg Isonen 11cb8f35ec refactor: Vertical layout hasn't been actually used (#3131)
## Description

Text is using responsive layout and doesn't need vertical one

## 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
2024-04-11 10:41:39 +02:00
Oleg Isonen c05aa077db fix: allow using script type="module" in html embed (#3107)
By removing the script type checks, we enable type="module", which is
useful to create a scope and use const without errors like this


![image](https://github.com/webstudio-is/webstudio/assets/52824/7a538fc0-c204-4a7a-a51f-63a9931b1ede)


## Steps for reproduction

1. add html embed script
2. assign const a = 123
3. navigate to the page twice or toggle to preview and there will be
error because const can't be redefined

## 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
2024-04-09 23:03:38 +02:00
Bogdan Chadkinandistarkov f5873f7738 refactor: upgrade to remix v2 (#3076)
Bumped remix to v2 everywhere in CLI, fixtures and builder. Caught a lot
of type stuff. Runtime seem to work without changes. Removed
@vercel/remix and had to upgrade `remix-auth` packages.

Unable to test netlify and vercel from monorepo and need to have sdk
remix with updated remix. So will test after packages release.

## 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

---------

Co-authored-by: istarkov <istarkov@gmail.com>
2024-04-02 17:26:45 +07:00
Ivan Starkov 634bd89412 fix: Use preset height auto for images instead of fit-content (#3052)
## Description

Set image height to "auto" to reduce layout shift, improving
compatibility across browsers like Safari.
Unlike "fit-content," "auto" preserves the aspect ratio when the width
exceeds max-width. (in Safari)
See
https://web.dev/articles/optimize-cls#best_practice_for_setting_image_dimensions


## 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
2024-03-26 22:39:56 +03:00
Oleg Isonenandistarkov 9fd6660712 fix: don't render HTML Embed server-side in production if clientOnly option is used (#3051)
## Code Review

Following tests are added
```
Published site
    ✓ clientOnly === false (30 ms)
    ✓ clientOnly === true (7 ms)
  Builder renderer= canvas | preview
    ✓ script processing are not applied when clientOnly=true executeScriptOnCanvas=false and renderer=canvas (4 ms)
    ✓ script processing are not applied when clientOnly=true executeScriptOnCanvas=undefined and renderer=canvas (2 ms)
    ✓ script processing are not applied when clientOnly=false executeScriptOnCanvas=false and renderer=canvas (4 ms)
    ✓ script processing are not applied when clientOnly=false executeScriptOnCanvas=undefined and renderer=canvas (5 ms)
    ✓ script processing are not applied when clientOnly=undefined executeScriptOnCanvas=false and renderer=canvas (7 ms)
    ✓ script processing are not applied when clientOnly=undefined executeScriptOnCanvas=undefined and renderer=canvas (2 ms)
    ✓ In preview mode, script processing are applied when clientOnly=true and renderer="preview" and executeScriptOnCanvas=true (3 ms)
    ✓ In preview mode, script processing are applied when clientOnly=true and renderer="preview" and executeScriptOnCanvas=false (2 ms)
    ✓ In preview mode, script processing are applied when clientOnly=true and renderer="preview" and executeScriptOnCanvas=undefined (2 ms)
    ✓ In preview mode, script processing are applied when clientOnly=false and renderer="preview" and executeScriptOnCanvas=true (2 ms)
    ✓ In preview mode, script processing are applied when clientOnly=false and renderer="preview" and executeScriptOnCanvas=false (2 ms)
    ✓ In preview mode, script processing are applied when clientOnly=false and renderer="preview" and executeScriptOnCanvas=undefined (2 ms)
    ✓ In preview mode, script processing are applied when clientOnly=undefined and renderer="preview" and executeScriptOnCanvas=true (2 ms)
    ✓ In preview mode, script processing are applied when clientOnly=undefined and renderer="preview" and executeScriptOnCanvas=false (2 ms)
    ✓ In preview mode, script processing are applied when clientOnly=undefined and renderer="preview" and executeScriptOnCanvas=undefined (2 ms)
    ✓ In preview mode, script processing are applied when clientOnly=true and renderer="canvas" and executeScriptOnCanvas=true (1 ms)
    ✓ In preview mode, script processing are applied when clientOnly=false and renderer="canvas" and executeScriptOnCanvas=true (3 ms)
    ✓ In preview mode, script processing are applied when clientOnly=undefined and renderer="canvas" and executeScriptOnCanvas=true (2 ms)
    ✓ Code change cause scripts to be updated (2 ms)
    ✓ Placeholder is shown if code is "" (1 ms)
    ✓ Placeholder is shown if code is "   "
```

- [ ] 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/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: istarkov <istarkov@gmail.com>
2024-03-26 20:38:09 +03:00
Oleg Isonen d9eb1e2941 fix: keep the execution order of scripts when executing HTML Embed on the client (#3046)
https://share.descript.com/view/q8jpNCbmOxP

## Description

Originally all remote scripts in html embed were executed async, no
matter if they have async attribute or not.
Now they respect the order and only execute async if there is async
attribute.

## Steps for reproduction

This should fail on first load because first script is loaded async and
second script depends on it
```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.3/gsap.min.js" async=""></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.3/ScrollTrigger.min.js"></script>
<script>
console.log('gsap', gsap)  
</script>
```

This should not fail
```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.3/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.3/ScrollTrigger.min.js"></script>
<script>
console.log('gsap', gsap)  
</script>
```

## 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
2024-03-25 13:47:21 +01:00
Oleg Isonen 92773cee40 feat: Added required, value, checked default checked to the initial props of checkbox and radio components (#3048)
## Description

Added to checkobox/radio
- required
- value
- checked
- default checked

## Steps for reproduction

1. click button
2. expect xyz

## 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
2024-03-25 13:24:41 +01:00
Ivan Starkov 6c2dd4fd5c refactor: Attempt to improve INP performance of Vimeo player (#3027)
## Description

Fixed few small bugs, start show loading indicator before any other
tasks

## 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
2024-03-19 16:15:26 +03:00
Oleg Isonen 9efc764898 feat: Add all input types (#2901)
## Description

With this pr we are enabling all input types



https://github.com/webstudio-is/webstudio/assets/52824/0a09928d-68b6-4e0d-964e-7c19e92dc61a


## Steps for reproduction

1. add text input
2. try different types

## 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
2024-02-13 12:19:51 +01:00
Oleg Isonen b3b1792eae fix: Image on canvas in latest chrome may not render when loading is lazy (#2902)
## Description

When on canvas inside builder we need to always eager load images to
avoid this bug in latest chrome with cache turned off

## Steps for reproduction

1. turn off cache
2. add image component on canvas
3. see it renders as expected (loading lazy in settings is default, but
on canvas it renders as loading eager)

## 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/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
2024-02-13 12:19:07 +01:00
Oleg Isonen 4f868c5a5f fix: Normalize border style (#2867)
## Description

We don't support inset/outset in the style panel which is the initial
for inputs/buttons

New defaults are:

- input, textarea, button - solid
- radio, checkbox - none (already was none, no change,but we didn't
reflect that in sp)

## Steps for reproduction

1. add those components to canvas
2. see that input, textarea, button - have solid border style in style
panel
3. see that radio, checkbox - show none

## 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/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
2024-02-05 18:34:04 +01:00
Oleg Isonen fb70166359 fix: Improve invalid ancestors config (#2870)
## Description

- prevent form and inputs/buttons addable to Link, Button
- button, form not addable to Link

## 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
2024-02-05 17:30:01 +01:00
Bogdan Chadkin 646ee81af6 feat: add class name to initial properties (#2868)
Fixes
https://discord.com/channels/955905230107738152/1203564257367695411
2024-02-05 19:29:59 +07:00
Oleg Isonen e7b6c752b7 feat: Add loading lazy/eager to vimeo (#2738)
## Description

When video is off-screen and needs to be autoplayed, you can now put it
to loading=lazy and it won't load until its in viewport.




https://github.com/webstudio-is/webstudio/assets/52824/3fa59ab8-1e19-44b4-969b-3eb99f12fccf


## Steps for reproduction

1. click button
2. expect xyz

## 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
2024-01-08 11:19:47 +02:00
Oleg Isonen 5930064678 feat: Rename Site to Project because we are not just building a site builder (#2718)
## Description

Site is too narrow name for things that are pssible with webstudio


## 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
2023-12-30 10:40:09 +01:00
Bogdan Chadkin 0688dfdab7 feat: switch to expression edtior for expressions (#2707)
Ref https://github.com/webstudio-is/webstudio/issues/2532

- switched to expression editor for expression field in variables panel
- removed legacy code editor
- preview actual (not initial) values in variable list
- show actual values in variable list for parameters
- render autocomplete tooltip in body to prevent variables popover
scroll overflow
- wrap lines expression editor to avoid horizontal scroll
- fix html embed failing when non string value is specified

<img width="503" alt="Screenshot 2023-12-20 at 11 17 22"
src="https://github.com/webstudio-is/webstudio/assets/5635476/09a4ae36-2b02-416f-b290-3a82cda79851">
<img width="493" alt="Screenshot 2023-12-20 at 11 15 14"
src="https://github.com/webstudio-is/webstudio/assets/5635476/409c08e5-200f-45aa-908c-be5d0a2ba520">
2023-12-21 12:14:00 +07:00
Bogdan Chadkin d361c9ecee feat: add collection component to builder (#2657)
Ref https://github.com/webstudio-is/webstudio/issues/2532

Here added a "core" collection component to support iterating over json
arrays.

There is a lot of room for unification of all this logic though would
require building reactive tree abstraction.

Canvas automatically renders stub component for collection to make it
droppable. We can do the same for slot component.

Slot and Fragment eventually will go to "core" components too.

Added json/parameter prop types to embed template to support collection.

Fixed loosing focus while typing in json prop.

## Steps for reproduction

1. Drop collection component
2. play with it
2023-11-29 17:07:28 +03:00
Oleg Isonen 560a34d064 feat: Add some default list items when creating a List instance (#2489)
When adding List component to canvas - its currently empty, but we
should have some items inside by default
2023-10-16 19:19:15 +04:00
Bogdan Chadkin 00826c636a fix: fix various text editor bugs (#2420)
- add missing placeholder to Text component
- fix wrapping buttons and links with span
- preserve node content when entering editing mode if instance has no
children
- hide "link" button in text toolbar when edit link component to prevent
nested links
2023-10-06 01:37:38 +04:00
Bogdan Chadkin 221c318715 fix: remove placeholders from data (#2399)
When we put placeholders into data ai may confuse them with actual
content. So here put placeholders into component and render when no
content present.

Though this bring one side effect in UX. When user start to edit text it
gets empty content without cursor. This will be fixed later.

For now just unblock ai changes.
2023-10-01 18:52:25 +04:00
Bogdan Chadkin 5f93ecb228 perf: generate page prop for links (#2357)
Moved links resolve into props normalizing which is called for whole
project before rendering converting page prop into string.

Remix links now check only if provided path matches any page. Ideally it
should be handled with navigation api to remove all complexity from
links components.

This will let us stop rendering props and assets data in generated
pages.

Also fixed links with hashes.
2023-09-24 20:07:15 +04:00
Bogdan Chadkin 45585c0565 perf: generate asset prop for links and images (#2356)
Before links and images required logic to traverse raw props data and
assets to resolve href and src. This can potentially affect rendering
performance and requires additional data to be stored in runtime.

Here pregenerated props with "asset" type as a first step. Images still
have to be aware of asset base url to trim it from resolved src but no
longer access to assets store. Links now interpret it as string url.

See fixtures for examples.
2023-09-22 17:48:12 +04:00
Ivan Starkov 03b03ecd26 fix: Allow client-only embeds to avoid hydration errors (#2348)
## Description

Some scripts cause hydration errors on execution and must be executed
only after hydration
https://discord.com/channels/955905230107738152/1136275535572516986

After release this
https://apps.webstudio.is/builder/12c30bde-73af-40f0-8fcf-bc3581f06fac?authToken=6c442116-66ce-4a45-8471-db1e9a667069&mode=preview
should work well after publish


## 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
2023-09-20 20:22:35 +03:00
Bogdan Chadkin 853dff3a5e fix: fix props meta generation (#2344)
- fixed incorrect jsdoc parsing in accordion collapsible
- fixed form default props by inlining destructuring
2023-09-20 18:41:57 +04:00
Bogdan Chadkin 2b52c53cbf Generate stories with new jsx component generator (#2322)
Here added "sdk-cli" package with "generate-stories" command which looks
for metas and generate stories from each one with template. This give us
more insight how component would look like on published sites.

Also removed old stories and added custom id support into embed template
to make stories ids stable.

Can be tested in local storybook
2023-09-17 17:59:54 +04:00
Ivan Starkov 53c97d8d18 Vercel image optimisation support (#2297)
## 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
2023-09-11 21:03:02 +03:00
Bogdan Chadkin b6c4911e41 Remove generate-arg-types from direct dependencies (#2218)
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
```
2023-08-31 15:59:45 +04:00
Oleg Isonen 28f104c80e Hide additional states, they should go into a submenu (#2217)
Closes https://github.com/webstudio-is/webstudio/issues/2029

## Description

Once we add a submenu, all advanced states will go there

## Steps for reproduction

1. see that button, input, textarea no longer have these states on style
source

disabled", 
enabled", 
read-only",
read-write"



## 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
2023-08-30 23:06:01 +02:00
2680ae0a13 Add tooltips for component properties in Settings tab (#2125)
## 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>
2023-08-27 20:46:36 +03:00
Oleg Isonen d2bb3dc0a3 Add component descriptions (#2196)
## Description

Now we are showing each component description in a tooltip

## Steps for reproduction

1. hover any component in components panel
2. see tooltip text

## 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
2023-08-27 14:36:48 +02:00
Bogdan Chadkin 4c6fe0bb23 Add more constraints to components (#2195)
Marked more components as non-detachable and non-self-nestable
2023-08-27 14:48:21 +04:00
Bogdan Chadkin e665a996ee Fix code text component (#2120)
Fixes
https://discord.com/channels/955905230107738152/1140570603372413039
https://discord.com/channels/955905230107738152/1140566358023745587

- dropped inline prop
- dropped meta prop
- replaced css custom property with local style
- added `white-space: pre-wrap` preset style to preserve indent
- fixed pasting of code in markdown
2023-08-14 22:05:14 +04:00
Oleg Isonen fabb1341b3 Added cite tag to Text component as well as cite prop in initial props to Blockquote component (#2119)
Closes https://github.com/webstudio-is/webstudio-builder/issues/2118

## Description

Added cite tag to Text component as well as cite prop in initial props
to Blockquote component

Now you can create same html structure as
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote

```html
<blockquote cite="https://www.huxley.net/bnw/four.html">
  <p>Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.</p>
  <footer>—Aldous Huxley, <cite>Brave New World</cite></footer>
</blockquote>
```


## 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
2023-08-14 12:55:33 +02:00
Bogdan Chadkin 5b4c33da69 Fix html embed (#2108)
- renamed "Execute script on canvas" to "Run script on canvas"
(https://github.com/webstudio-is/webstudio-builder/issues/2104)
- execute in preview
(https://github.com/webstudio-is/webstudio-builder/issues/2107)

## 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
2023-08-13 17:34:12 +04:00
Bogdan Chadkin 7f53be7b2d Add list item section to style panel (#2077)
Fix https://github.com/webstudio-is/webstudio-builder/pull/2063
https://github.com/webstudio-is/webstudio-builder/issues/2079
https://github.com/webstudio-is/webstudio-builder/issues/2060

Here added new "List Item" section specifically for List and ListItem
components. Now user can cutomize list item markers for whole list or
per each item.

Changed behavior of Select Control to put current value into the list of
options if not present. This way display shows "List Item" instead of
nothing.
2023-08-09 22:58:50 +04:00
Oleg Isonen ab70977a41 Add action to form's initial props (#2026)
## 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
2023-08-03 15:12:23 +02:00
Bogdan Chadkin 292dad7f2e Move radix components into dedicated package (#2011)
We agreed to have all radix components in separate package. Here moved
everything implemented earlier.
2023-07-31 18:56:16 +04:00
Ivan Starkov 80a72917cb Dialog (#2001)
## 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
2023-07-30 20:07:43 +03:00
Ivan Starkov e8760409d9 New build-args types (#1998)
## 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
2023-07-28 00:26:01 +03:00
Ivan Starkov 74092f66bf Add radix popover (#1997)
## 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
2023-07-27 23:35:00 +03:00
Bogdan Chadkin 9328961b87 Allow to disable components detaching (#1986)
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.
2023-07-27 20:43:46 +03:00
Ivan Starkov a9fefa2c64 Radix tooltip local styles (#1975)
## 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
2023-07-26 12:49:55 +03:00