75 Commits
Author SHA1 Message Date
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
Oleg Isonen 574156c82f Use label icon for Label component instead of TextIcon (#1983)
Closes https://github.com/webstudio-is/webstudio-builder/issues/1850

## Description

Just a new icon

## Steps for reproduction

1. open components panel

## 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-07-26 09:57:13 +02:00
Oleg Isonen 9a52328d16 Change license from MIT to AGPL V3 (#1980)
The main reason for this change is the realization that a product needs
some more protection than a typical library. With this change it is
still an Open Source Core, but now corporations can't build on top of it
without contributing back to the OSS community or without buying a
license.
2023-07-26 01:06:21 +02:00
Oleg Isonen 57417c7a58 Add font smoothing by default to the body (#1972)
## Description

Adding font smoothing by default to the Body component


https://discord.com/channels/955905230107738152/955907787299360788/1132882679189229649

```
  -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
```

## Steps for reproduction

1. open any project, see in dev tools these 2 added (or check visually)

## 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-07-25 12:38:58 +02:00
Ivan Starkov f5cbd28962 Add tooltip (#1957)
## Description

Left
- [ ] - storybook (next PR)
- [ ] - default styles (next PR)
- [x] - Add property to edit tooltip
- [ ] - Contraints - do not allow delete Trigger and Content (next PRs)
- [ ] - Icons  (next PRs)

### Whats done to make tooltip to work.

1. Portals support through passing
[selectorIdAttribute](https://github.com/webstudio-is/webstudio-builder/blob/20c3b9fdea4a6f8e7a2cc00211b6e4ca95db13a5/apps/builder/app/canvas/features/webstudio-component/webstudio-component.tsx#L290)
2. [Hidden ScreenReader elements
detection](https://github.com/webstudio-is/webstudio-builder/blob/20c3b9fdea4a6f8e7a2cc00211b6e4ca95db13a5/apps/builder/app/canvas/features/webstudio-component/webstudio-component.tsx#L129)
3. [New elements on Canvas
detection]https://github.com/webstudio-is/webstudio-builder/blob/20c3b9fdea4a6f8e7a2cc00211b6e4ca95db13a5/apps/builder/app/canvas/features/webstudio-component/webstudio-component.tsx#L179



- [x] Collapsed
- [x] Do composeEventHandlers 
- [x] Radix add spans of tooltip content 
To support screen readers

https://github.com/twbs/bootstrap/blob/master/scss/mixins/_screen-reader.scss
Radix here

https://github.com/radix-ui/primitives/blob/main/packages/react/tooltip/src/Tooltip.tsx#L552-L556
Cloning our content

https://github.com/radix-ui/primitives/blob/main/packages/react/visually-hidden/src/VisuallyHidden.tsx

## Steps for reproduction

1. click button
3. 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-24 14:50:15 +03:00
Bogdan Chadkin 7a0d87dd7c Drop fs-extra (#1940)
Modern fs is quite reliable and has a lot of nice tools. No need in
additional wrapper without own types.

Also regenerated all props and found a few unused.
2023-07-19 17:44:14 +03:00
Bogdan Chadkin 14baeb5c85 Fix props bugs (#1955)
Fixes
https://discord.com/channels/955905230107738152/955907841070346300/1130819857403887616
and
https://discord.com/channels/955905230107738152/955907841070346300/1131197538112905348

- specified default in image wrapper to let our props generator find it
- fix added with ui props
- prevent setting defaults when no default value is available
2023-07-19 17:17:46 +03:00
Bogdan Chadkin a46156f96f Fix initial props (#1943)
Fixes
https://discord.com/channels/955905230107738152/955907841070346300/1130407072522059896

- replaced blocking error with console.error
- removed id from html embed initial props
2023-07-17 11:38:16 +03:00
50098fb5e9 Set input and textarea to display block (#1938)
## Description

Browser default is inline, but with most certainty this is not practical

PR is on top of
https://github.com/webstudio-is/webstudio-builder/pull/1937

## Steps for reproduction

1. add input, textarea
2. see they are rendered as display block on its own row

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

---------

Co-authored-by: istarkov <istarkov@gmail.com>
Co-authored-by: Bogdan Chadkin <trysound@yandex.ru>
2023-07-15 13:26:58 +02:00
Bogdan Chadkin b424f9fbde Fix invalid ancestors for deeply nested instances (#1932)
Fixed the issue with pasting checkbox into button
which is wrapped into label

Prevented inserting label, checkbox, radio button and input into
buttons.
2023-07-14 19:28:29 +03:00
Oleg IsonenandIvan Starkov 84c06569b9 Condense settings and properties tabs into one (#1902)
Closes #1880
Mostly also #1905

## Description

Merging Settings and properties


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

---------

Co-authored-by: Ivan Starkov <istarkov@gmail.com>
2023-07-11 22:50:26 +02:00
Bogdan Chadkin a8ecaf3a99 Migrate storybook to new format in sdk (#1924)
Here bumped storybook and migrated stories to Meta and StoryObj types
from deprecated ComponentMeta and ComponentStory.
2023-07-11 20:15:38 +03:00