Commit Graph
659 Commits
Author SHA1 Message Date
Bogdan Chadkin ccba8d9581 feat: substitute variables in calc and box-shadow (#5049)
Ref https://github.com/webstudio-is/webstudio/issues/4939

Here improved style engine logic to substitute variables in unparsed
values which is essential in cases like box-shadow or calc with
variables.

<img width="334" alt="Screenshot 2025-03-26 at 02 03 03"
src="https://github.com/user-attachments/assets/7b002061-1e83-48d9-abad-70547d1cdfc0"
/>
<img width="554" alt="Screenshot 2025-03-26 at 01 59 40"
src="https://github.com/user-attachments/assets/85597b72-cc74-4be9-9c32-ddc1b6510131"
/>
2025-03-26 18:11:55 +07:00
Bogdan Chadkin 11bb528ed6 feat: support css variables in shadow properties (#5032)
Closes https://github.com/webstudio-is/webstudio/issues/4939

Added css variables support with autocomplete in text-shadow and
box-shadow properties.

Extended our ast with new "shadow" value to properly represent variables
in shadow properties. Though parser still cannot extract variables from
value with variables and falls back to "unparsed" value.

<img width="542" alt="Screenshot 2025-03-23 at 00 45 03"
src="https://github.com/user-attachments/assets/2493d925-3199-4257-b9e8-dc69daa27324"
/>
2025-03-25 23:10:03 +07:00
Ivan Starkov 9397f7af0c experimental: Add banner to Animate components (#5041)
## 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:
0000)
- [ ] 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
2025-03-25 13:59:17 +05:00
Bogdan Chadkin 5bfd37f413 refactor: drop embed template usages (#5040)
Dropped meta.template and copy paste plugin with embed template. The
only left usage is AI generation.
2025-03-25 10:58:20 +07:00
Bogdan Chadkin 5b3144d656 refactor: bump zod (#5035)
All three have minor feature updates

- zod
- zod-validation-error
- zod-to-json-schema
2025-03-25 00:17:05 +07:00
Bogdan Chadkin e730aa3c6b feat: navigate to pro features on publish dialog (#5036)
Users don't know where to find pro features accidentally created while
being on pro tier or added with marketplace.

Here wrapped items in used pro featured with links (buttons actually)
which navigate to instances.



https://github.com/user-attachments/assets/7dd879fa-4e1b-4f66-9dd3-18308cd62f58
2025-03-24 02:19:54 +07:00
Bogdan Chadkin 5c3a6e5fcd refactor: restrict publish count per account (#5030) 2025-03-22 19:29:22 +07:00
Bogdan Chadkin dbd4650bc5 refactor: drop old flags (#5028)
We are long released all these features and no longer need flags for
them.
2025-03-22 01:10:30 +07:00
Bogdan Chadkin 47d0517223 fix: reparent within another slot instance (#5021)
Ivan found a bug. Reparent slot child into another instance of the same
slot got this child removed.

Now refactored whole thing (almost). The main difference is same parent
move will not do delete/paste but will just update child position. This
fixes bug above and makes other logic slightly simpler.

Rewritten reparentInstance with reparentInstanceMutable to simplify
testing and make it composable (if ever need). Added more tests.
2025-03-20 21:21:09 +07:00
Ivan Starkov 00b815aeb2 experimental: Live animation setting update (#5005)
## 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
2025-03-17 14:23:57 +05:00
Bogdan Chadkin 32120c33dc refactor: hyphenate builder (#5007)
Switched all left overs to hyphenated css properties including animation
section.

StyleProperty is only stored in data.
2025-03-16 10:06:22 +07:00
Bogdan Chadkin b14676bfd6 refactor: simplify css value input sizes (#4997)
- removed non-unit values from browser styles
- merged browser styles and unit sizes into single store; both objects
used in cize conversion
- use typed cssom to parse units instead of custom parser (sorry
firefox)
2025-03-14 20:59:57 +07:00
Bogdan Chadkin a273abadb4 fix: navigate to home page when undo page creation (#4995)
Fixes https://github.com/webstudio-is/webstudio/issues/4993
2025-03-13 22:32:59 +07:00
Bogdan Chadkin d6f37ef359 fix: load resources when switch pages (#4994)
Fixes https://github.com/webstudio-is/webstudio/issues/4992
2025-03-13 22:15:19 +07:00
Oleg Isonen 62b0418476 experimental: Use css editor in keyframes (#4952)
## 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:
0000)
- [ ] 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
2025-03-13 15:20:14 +01:00
Bogdan Chadkin 8b526dc7e9 refactor: store webhook form action as resource (#4983)
Ref https://github.com/webstudio-is/webstudio/issues/4093

Here's refactoring to unlock resource UI in webhook form

Need to test in builder and on published site

1. Create webhook form in main and try to update it on this branch. So
legacy text prop should automatically migrate to resource.

2. New webhook form should create resource when type anything in action
prop
2025-03-13 11:02:44 +07:00
Bogdan Chadkin fcb4e25a9e feat: show unresolved inherited values in style panel (#4990)
Per user request we will not show computed value when inherited from
ancestor.
Chrome devtools seem to show unresolved values in "inherited" section.

<img width="252" alt="image"
src="https://github.com/user-attachments/assets/b7f22ec5-e2ea-47aa-9bad-80622d0aa5f9"
/>
2025-03-13 00:20:46 +07:00
Bogdan Chadkin 051c1ba226 refactor: hyphenate style engine (#4977)
Migrated style object model to hyphenated css properties. A lot of
conversions no longer necessary.
2025-03-11 01:01:37 +07:00
Bogdan Chadkin 3c8ac56c39 refactor: migrate properties data to hyphen case (#4970)
properties data are now more type safe and can accept any CssProperty
name though in case of custom properties (--string) will return
undefined.

This also removes a lot of `keyof typeof properties` castings.
2025-03-08 20:26:40 +07:00
Bogdan Chadkin 6a453b94dc refactor: migrate border and outline to hyphenated properties (#4960)
Migrated two more sections and made ComputedStyleDecl['property'] more
strict instead of just a string, now can get rid from `as StyleProperty`
casting all over the codebase.
2025-03-07 17:16:16 +07:00
Bogdan Chadkin bdf4463098 fix: set proper default value in radix with content block (#4937)
User reported in discord.

Radix components like accordion does not open first item by default when
use with content block. The reason was in our default detection.

We used indexes within ancestor and when put item inside of content
block template it gets 0 but not rendered.

Here improved the logic to reset index when render inside of block
template.

<img width="837" alt="Screenshot 2025-03-01 at 21 14 09"
src="https://github.com/user-attachments/assets/788df39a-b7c5-466b-a80e-09cc40de9e3f"
/>
2025-03-04 18:26:29 +07:00
Bogdan Chadkin 0889342c33 refactor: switch to hyphenated preset styles (#4930)
Replaced camel case with kebab in all presets
2025-03-04 17:26:32 +07:00
Bogdan Chadkin 8891748af7 fix: optimize saving global variables (#4936)
Reduced amount iterations over all instances
to optimize rebinding variables on save.
2025-03-01 10:37:37 +07:00
Bogdan Chadkin ea64f35ce8 fix: rebind variables within scope (#4927)
Found broken cases with rebinding variables
when they are renamed or just saved.
2025-02-28 01:42:40 +07:00
Bogdan Chadkin b8b4e68873 fix: pass system to resources in builder (#4926)
Closes https://github.com/webstudio-is/webstudio/issues/4925

Loading resources with system variables
broken while switching to global system.
2025-02-27 22:15:32 +07:00
Bogdan Chadkin 4e6a448d96 fix: insert marketplace sections after selected instance (#4918)
Closes https://github.com/webstudio-is/webstudio/issues/4902

Rapid prototyping requires slightly different logic for inserting from
marketplace so sections could be added one after another.
2025-02-27 01:44:21 +07:00
Bogdan Chadkin be2ae85854 feat: unset variables in page meta when deleted (#4907)
Another case I forgot. Variables should be unset in all page metas when
deleted.

- Test delete of body variable used in page title
- Test delete of global variable used in page title
- Bind all page meta values and delete the variable to make sure it was
unset from all fields
2025-02-24 21:27:07 +07:00
Ivan Starkov 62a6d939d8 experimental: Animate UI (#4851)
## 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:
0000)
- [ ] 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
2025-02-24 14:27:50 +05:00
Bogdan Chadkin 5cd30fe8b0 feat: unset global variables when delete (#4904)
Global variables will be replaced with "name" or unset when deleted from
data variables section.

There are few cases to test

1. variable is unset on a few pages when delete
2. variable is unset on inside of slots when delete
2025-02-23 23:34:45 +07:00
Bogdan Chadkin 23034dad25 feat: add global system variable in builder (#4896)
Closes https://github.com/webstudio-is/webstudio/issues/4166

Now system is global variable and can be accessed in slots.

Legacy one can be deleted

<img width="264" alt="image"
src="https://github.com/user-attachments/assets/1c1d60f5-6be2-4871-9970-3593e3e7c08a"
/>
2025-02-23 01:46:21 +07:00
Bogdan Chadkin 21271086f2 fix: prevent inserting into instance with placeholder (#4901)
Closes https://github.com/webstudio-is/webstudio/issues/4897

Added "placeholder" field to component meta to signal the instance
accepts should not be insertion target. This reverts us to previous
behavior even with empty instances.

Also slightly refactored placeholder rendering to use attr() instead of
extra css variable.
2025-02-22 23:56:30 +07:00
Bogdan Chadkin 78a0fa98c1 refactor: output hyphenated properties from css parser (#4900)
We are going to switch to hyphenated properties in styles. Here
refactored css parser to output hyphenated property instead of camel
case and added camelCaseProperty utility which does the opposite of
hyphenateProperty.
2025-02-22 18:11:57 +07:00
Bogdan Chadkin b798809870 refactor: decouple system store from variables (#4888)
We are moving away from binding system to variables and instead gonna
have one global variable.

Here moved system values into separate store coupled to pages instead of
variables.

Also fixed suggestions in address bar, probably broke while design
system refactorings.

Testing
- submit form with one named input
- check system value is rendered
- check system value can be inspected
2025-02-18 23:28:29 +07:00
Bogdan ChadkinandOleg Isonen 34e18b35ae fix: allow broken variables when validate updates (#4892)
Some templates have variables with missing scopeInstanceId on dialogs or
something else from broken embed template. Here allow it in validation
because migration would be more complex.

---------

Co-authored-by: Oleg Isonen <oleg008@gmail.com>
2025-02-18 23:20:02 +07:00
Bogdan Chadkin b7e1c86f68 experimental: generate global system variable with CLI (#4885)
Here added support for generating global system variable with CLI. It's
not available yet in builder though.

Global system not presented in data but instead can be referenced with
`$ws$system` in expression instead of encoded id like
`$ws$dataSource$id`. Legacy page system variable will continue to work.
2025-02-17 16:50:55 +07:00
Oleg Isonen 6eb989d225 feat: Backspace to reset the value in CSS Value Input (#4878)
## Description

1. improved composeEventHandlers implementation
2. delete value text, then hit backspace - same as reset
3. in advanced panel all property tooltips now show "Delete property"
wording instead of "Reset value"

<img width="363" alt="image"
src="https://github.com/user-attachments/assets/f4ad7ec4-892c-4774-9143-ac2b26c55cde"
/>


## 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:
0000)
- [ ] 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
2025-02-15 17:53:28 +01:00
Bogdan Chadkin c3ac4d6ec1 fix: preserve global variables when duplicate page (#4875)
Missed the case. Global variables were recreated and got invalid state.
Now global variables are reused or added without changes.
2025-02-15 02:53:09 +08:00
Bogdan Chadkin 8ed3fbb085 feat: support global data variables (#4870)
Ref https://github.com/webstudio-is/webstudio/issues/4166
https://github.com/webstudio-is/webstudio/issues/3686

Added "Settings" section to global root. Now users can create data
variables which are available for all pages and inside slots.



https://github.com/user-attachments/assets/be2cf862-08ec-427e-aea3-076fa03a4437
2025-02-15 01:23:16 +08:00
Bogdan Chadkin 13a4660391 fix: rebind variables after delete (#4865)
Ref https://github.com/webstudio-is/webstudio/issues/4768

Forgot to handle the case with rebinding with parent variables after
variable on child is deleted.

Also fixed the case with rebinding variables outside of slot scope.
2025-02-13 18:00:54 +08:00
Bogdan Chadkin ae864ef8b6 feat: allow deleting variables used in expressions (#4860)
Ref https://github.com/webstudio-is/webstudio/issues/4768

Before we disabled deleting variables which are used in expressions. Now
we will ask confirmation and unset this variable. This way user will not
be locked if variable is lost and we will show diagnostics (in the
future) where all unset variables are.

<img width="908" alt="Screenshot 2025-02-12 at 15 38 14"
src="https://github.com/user-attachments/assets/ea9eea58-c276-4251-8b95-1214e9380621"
/>
2025-02-13 10:37:53 +08:00
Bogdan Chadkin ba3c964095 fix: cleanup parent children when delete instances (#4859)
Was missed while refactoring. Wrong data was mutated.
2025-02-12 16:52:16 +08:00
Oleg Isonenandistarkov 4855ffdeb9 fix: Fix copy instance if no text is selected (#4858)
Closes https://github.com/webstudio-is/webstudio/issues/4856

## Description

Current logic broke in Chrome 133

1. Select instance in navigator
2. Copy
3. Paste
4. Should still allow selecting text and copying it

## 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:
0000)
- [ ] 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: istarkov <istarkov@gmail.com>
2025-02-12 15:43:25 +08:00
Bogdan Chadkin 9baa30f14d fix: remove masked duplicates in binding popover (#4855)
Here improved computing variables logic to exclude masked variables from
bindings popover list.

Also rewrote related tests with jsx template.

<img width="550" alt="Screenshot 2025-02-11 at 17 49 00"
src="https://github.com/user-attachments/assets/4a4995c6-90f2-4ec4-aa08-ff66e682e90d"
/>
2025-02-11 23:16:45 +08:00
Bogdan Chadkin 93334da114 feat: rebind masked variables (#4849)
Here improved creating variables to override deeper bindings when new
variable overrides ancestor variable similar to css variables behavior.

Here's a video with example



https://github.com/user-attachments/assets/41f93f5b-fd2d-4a3b-97d1-076f0ded5f01
2025-02-10 09:03:21 +07:00
Bogdan Chadkin aa527ae2e9 refactor: rewrite more copy paste tests with jsx template (#4845)
Ref https://github.com/webstudio-is/webstudio/issues/4093

1. rewrote tests with jsx template
2. fixed copying prop resources with slots
2025-02-08 22:06:22 +07:00
Bogdan Chadkin 453956bf83 refactor: delete prop resources (#4839)
Ref https://github.com/webstudio-is/webstudio/issues/4093

Here a few delete instance improvements

- fixed deleting resources bound to props (action in webhook form)
- rewrote all tests with jsx template
- switched from instance selector to instance path
- added slot test
2025-02-07 10:50:44 +07:00
Bogdan Chadkin 870de384e3 feat: restore variables by name when copy-pasting (#4824)
Ref https://github.com/webstudio-is/webstudio/issues/4768

Unset variables when copy and restore when paste.

Now you can copy instances with references to `system` variable and it
will be connected on another page as well when you paste.
2025-02-04 10:59:06 +07:00
Bogdan Chadkin 53ace3be3c feat: unset variables when create or rename data variables (#4808)
Ref https://github.com/webstudio-is/webstudio/issues/4768

Now user can write expressions with not existing variables and create
these variables later. Builder will automatically traverse all
expressions and bind to newly created variable by name.

Additionally user will see suggestions with all unset variables in
subtree.

<img width="504" alt="Screenshot 2025-01-30 at 12 35 21"
src="https://github.com/user-attachments/assets/6d042f45-ca4a-49b9-9259-7be2a3c74bdd"
/>
2025-01-31 13:21:00 +07:00
Bogdan Chadkin eb2a2750b8 refactor: support resources in jsx templates (#4800)
Added full resource configuration in templates.
Will be useful for testing.
2025-01-29 00:26:20 +07:00
Oleg Isonen 2fab4bae0e feat: Dashboards search (#4781)
## Description

- [ ] Search the projects
- [ ] Use arrow keys directly from the search or by focusing the project
- [ ] Hit enter to open
- [ ] Empty state when nothing found

## 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:
0000)
- [ ] 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
2025-01-28 16:36:15 +01:00