3444 Commits
Author SHA1 Message Date
Ivan Starkov eaecc6ac54 packages update 0.52.0 (#1387)
## 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-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
0.52.0
2023-04-07 09:51:03 +04:00
Ivan Starkov a6fb118ca3 Preserve border sub sections state (#1383)
## Description

closes #1381

## Steps for reproduction

Expand border width or border radius at style panel, switch on other
instance, return see expanded state is preserved


## 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-04-07 09:36:22 +04:00
Mateusz Burzyński 678c9a273f Generate declaration files before publishing packages (#1351) 2023-04-07 07:14:18 +02:00
Ivan Starkov 8bf079d821 Add common keywords (#1385)
## Description

closes #1378

## Steps for reproduction

Take any css property, see it contains 
initial, inherit, unset

## 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-04-06 22:21:52 +04:00
Roman Pominov 7297544198 Add phone and email links support in URL control (#1375)
Ref. #993 

## Description

1. Added phone and email options in the URL control

## Steps for reproduction

1. Open a Link's props
3. See new options in the "Href" control
2023-04-06 10:37:25 +03:00
Ivan Starkov 2328f37fd2 Fix Escape and Enter issues (#1374)
## Description

closes #1359

The only Esc event that needed to be passed into Canvas from the builder
is cancelCurrentDrag (don't know why)

- [x] - Todo reset/notshow outline on canvas Escape click too to have
visual response
- [x] - Fix Enter to work only in Navigator

## Steps for reproduction

See corresponding issue #1359 . 

## Code Review
- [x] hi @kof , I need you to do
  - test it on preview

- [x] hi @TrySound , I need you to do
  - detailed review (read every line)

## Before requesting a review

- [x] made a self-review
- [x] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [x] tested locally and on preview environment (preview dev login:
5de6)
- [ ] 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-04-05 23:38:07 +04:00
Bogdan Chadkin 3a16cb1821 Upgrade to remix 1.15 (#1373)
Ref https://github.com/remix-run/remix/releases/tag/remix%401.15.0 and
https://remix.run/docs/en/1.15.0/pages/v2

- bumped to remix 1.15
- switched to v2 meta
- replaced serverBuildTarget with fields from examples
- dropped unused remix-utils
2023-04-05 19:18:25 +07:00
Bogdan Chadkin 85473f8e57 Simplify assets uploading (#1372)
Ref https://github.com/webstudio-is/webstudio-builder/issues/1335

- with persistent fetcher there is no need in assets provider
- replaced async FileReader api with sync URL.createObjectURL for
preview while uploading
2023-04-05 15:11:43 +07:00
Ivan Starkov 6fbc97b2f5 Reduce renders from 5 to 1 (#1371)
## 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-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-04-05 10:25:43 +04:00
Bogdan Chadkin d0f5146cef Drop chromatic from dependencies (#1370)
We probably don't need to have chromatic in dependencies.
Especially since the latest version is getting 20MB bigger

https://packagephobia.com/result?p=chromatic

Also removed builds from chromatic workflows, "source" export condition
allows to avoid it.
2023-04-05 12:19:09 +07:00
Bogdan Chadkin 0095f47fbc Migrate to remix v2 route convention (#1367)
Ref
https://remix.run/docs/en/1.15.0/pages/v2#file-system-route-convention
and https://remix.run/docs/en/1.15.0/file-conventions/route-files-v2

New route convention enforces flat structure.
2023-04-05 01:54:17 +07:00
Bogdan Chadkin 417b39833e Delete assets with patches (#1368)
Ref https://github.com/webstudio-is/webstudio-builder/issues/1335

Here moved assets store to immerhin. Patches manage only delete
operation by diffing previous and patched list of assets.
2023-04-05 01:32:14 +07:00
Ivan Starkov c037417cde Fix enter (#1369)
## Description

Currently when you click Enter inside the builder when focused on Rich
Text nothing happens.
Here I forward enter event into the Canvas and focus RT element before
Editing mode

ref #1359

## Steps for reproduction

Click RT node in Navigator, press Enter, edit text
<img width="820" alt="image"
src="https://user-images.githubusercontent.com/5077042/229862820-62bc3f50-1290-49e3-856e-1fab2fb50eae.png">



## Code Review

- [x] 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

- [x] 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-04-04 21:17:01 +04:00
Roman Pominov 8c27c75f93 Input Field (#954)
## Description

1. Added `InputField` aligned with Figma.
[Demo](https://input-field--638245578b47d4399fba191a.chromatic.com/?path=/story/library-input-field--demo).
Closes #614
2. Added `NestedSelectButton` that should be used as `InputField`'s
suffix.
[Demo](https://input-field--638245578b47d4399fba191a.chromatic.com/?path=/story/library-nested-select-button--demo)
3. Deprecated `TextField`
4. Used `InputField` instead of `TextField` in `CssValueInput`
5. Added support for `<input>` in `ArrowFocus`. Closes #1364

## Steps for reproduction

1. Open style panel
6. Test `CssValueInput`'s
2023-04-04 16:12:10 +03:00
Bogdan Chadkin 17fb9a7213 Migrate to remix v2 error boundary (#1363)
Ref
https://remix.run/docs/en/1.15.0/pages/v2#catchboundary-and-errorboundary

Since 1.15 remix will force to switch with warnings.
2023-04-04 17:53:59 +07:00
Bogdan Chadkin f0c8681a2d Replace mitt with nanoevents (#1365)
nanoevents doesn't have `*` we stopped using recently, have simpler api
with unsubscribe function and allows to avoid patch upcoming changes
https://github.com/webstudio-is/webstudio-builder/pull/1351.
2023-04-04 17:36:01 +07:00
Oleg Isonen ebbdb71ced Scroll area (#1360)
## Description

1. Add scroll area to the to ds
2. Add scroll area to add components panel

## 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-04-04 12:08:12 +02:00
Bogdan Chadkin 362cced071 Add assets store (#1361)
Ref https://github.com/webstudio-is/webstudio-builder/issues/1335

Here I replaced assetContainersStore with assetsStore. Now deleting and
uploading states are maintained locally in assets provider. To preserve
the order of uploading assets assetsStore map has value as undefined.
This way assets.get(id) provides the same value. Though when iterating
we see missing asset.
2023-04-04 16:42:10 +07:00
Mateusz Burzyński d42d8dcc18 Locally-generated Prisma client (#1290) 2023-04-04 07:25:12 +02:00
Bogdan Chadkin a3beb9f810 Add style source states UI (#1349)
Ref https://github.com/webstudio-is/webstudio-builder/issues/807

Here added support for states in style source input under feature flag.
Styles editing and rendering still doesn't work. Here only UI.

<img width="326" alt="image"
src="https://user-images.githubusercontent.com/5635476/229406413-d7704dd7-2122-4747-888a-630aef08a902.png">
2023-04-04 00:22:38 +07:00
Bogdan Chadkin 58f3b3f3d5 Cleanup project package (#1358)
Here removed from project package everything not related to project
mannagement.

- project no longer depends on sdk
- style updates types moved to builder
- CanvasData no longer necessary, Data from react-sdk is same
2023-04-04 00:11:37 +07:00
Ivan Starkov d58c9aa73b Background list focus management (#1356)
## Description

closes #877

- [x] - Seems like Esc when layer window is open broken, probably this
PR (not this, just broken will create an issue)

added `focusManagerOptions` to ArrowFocus handleKeyDown
what allows us to create nested focus navigation.


## Steps for reproduction

Create a few background layers and use arrows to navigate.

## Code Review

- [ ] hi @rpominov , 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-04-03 17:14:51 +04:00
Bogdan Chadkin e7e52a941e Remove assets data reloading (#1355)
Ref https://github.com/webstudio-is/webstudio-builder/issues/1335

We load initial assets in builder and can stop load it additionally from
rest api. And after all mutations client store can be updated directly.
2023-04-03 19:59:25 +07:00
Bogdan Chadkin 7e440df235 Move css generation from project to sdk (#1354)
Generation of css text relies on components and not related to project
management so better move to sdk.

Also need to fix in saas
(https://github.com/webstudio-is/webstudio-saas/issues/126)
2023-04-03 19:30:45 +07:00
Bogdan Chadkin b4d21aadff Run global prettier check (#1353)
Here add check to have formatting always applied in case git hook was
ignored or not run for some reason.

Cached prettier for whole project is run within 2-3 seconds.
2023-04-03 16:48:10 +07:00
Ivan Starkov 8c27c5c86b Show currentcolor value in picker (#1339)
## Description

closes #1304 

To not expose computed style or do hard currentColor recalculation. I
added currentColor: StyleValue to the styleInfo color property.

## Steps for reproduction

Set currentColor on border or background or color, see in color picker
it works

## 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-04-03 12:32:15 +04:00
c1ad6c89e6 two new color tokens: (#1352)
background/topbar-hover
background/gradient/horizontal-reverse

and some misc updates

---------

Co-authored-by: Bot (build-figma-tokens.yml) <bot@localhost>
Co-authored-by: Roman Pominov <rpominov+github@gmail.com>
2023-04-03 10:11:39 +03:00
Bogdan Chadkin c5c90f6644 Drop radix icons (#1350)
We have all icons in figma. Here replaced with alternatives or exported
from figma. See diff.
2023-04-03 10:13:46 +07:00
Bogdan Chadkin 98b92c1b34 Update components icons (#1348)
Added icons from figma for components panel

See diff for new icons
2023-04-02 19:05:12 +07:00
Bogdan Chadkin 5f8344b2c4 Drop item state from style sources (#1346)
Ref https://github.com/webstudio-is/webstudio-builder/issues/807

We gonna have more complicated selected state with style source "states"
so better split it into separate prop and simplify disabled state with
boolean.

Also dropped "state" style source.
2023-04-02 18:44:09 +07:00
Bogdan Chadkin 56a071dde3 Update text toolbar icons (#1347)
Added icons from figma for text toolbar. And reused same in props and
component panels.

See diff for new icons
2023-04-02 18:38:37 +07:00
Oleg Isonen 172a6da635 Webflow breakpoints (#1340)
## Description

To enable copy-pasting instances from webflow without creating new
breakpoints, we decided to switch by default to the breakpoints webflow
uses.

User can still switch to mobile-first breakpoints like we had before
once we have a new breakpoints editor, but then when copy/pasting from
webflow they will get the missing breakpoints added if the copied styles
are using those.

I had to temporarily hide the breakpoints editor behind a feature flag
because we need the new editor to allow editing min or max width, so
instead of adjusting this current UI, we need a new one.

I think its not a big deal right now to not have the breakpoints editor,
webflow never had one.

## 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-04-02 12:15:52 +02:00
Bogdan Chadkin 0dd4869f51 Remove isEditable option from style source (#1344)
Ref https://github.com/webstudio-is/webstudio-builder/issues/807

isEditable is inferrable from the local "source" of style source. And no
need to be passed into every item.
2023-04-01 23:51:51 +07:00
Mateusz Burzyński 051cddfea4 Upgrade to TypeScript 5 (#1345) 2023-04-01 16:09:27 +02:00
Bogdan Chadkin 72b23e45e5 Support style source deletion (#1343)
Ref https://github.com/webstudio-is/webstudio-builder/issues/807

Added "delete" item to style source menu and select last style source by
default in input.
2023-04-01 19:50:27 +07:00
Bogdan Chadkin f8a8115359 Refactor style source menu (#1342)
Ref https://github.com/webstudio-is/webstudio-builder/issues/807

Moved style source menu up to style source input. This way we will not
need to drill a lot of callbacks and only pass menu element.

Later we will add even more callbacks. So this just simplifies further
development.
2023-04-01 18:10:03 +07:00
Bogdan Chadkin 9c316b0499 Enable typescript preserveValueImports (#1341)
This option forces all type imports to have "type" specifier even though
there are other value imports.

TS 5 forces it when new verbatimModuleSyntax is enabled.
2023-04-01 17:47:55 +07:00
Bogdan Chadkin 0d30e1c419 Support cross-project breakpoints copy paste (#1332)
Here added utility to merge pasted breakpoints into existing ones or add
new one if breakpoint does not match any.
2023-04-01 15:06:28 +07:00
Oleg Isonen d29f3b7232 Use alt/option as a modifier for quick reset of properties 2023-03-31 19:34:53 +02:00
Oleg Isonen d1c7a8e28e Remove unnecessary span 2023-03-31 18:55:00 +02:00
Oleg Isonen 94bd88627d Enable reset, add cmd+click shortcut on property names (#1337)
## Description

1. Enabling the popover by default now, users need it asap (still
unstyled)
2. Adding cmd+click for quick access to reset


## Code Review

- [ ] hi @TrySound , I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio-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-03-31 18:52:19 +02:00
Ivan Starkov 11e73390c2 Normalize css (#1333)
## Description

closes #473 

`${tag}:where([${componentAttribute}=${component}])` where is used to
not increase specificity

- [ ] todo remove from getInheritedInfo, as we don't know ancestor
tagName

## Steps for reproduction

See box-sizing etc props for newly created items

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)

- [ ] hi @TrySound , I need you to do
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [x] 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-03-31 18:31:20 +04:00
Roman Pominov d8af510c0c Fix panel color (#1324)
## Description

1. Fixed panel color. Closes #1245 
2. Also fixed backgrounds in TextField and ToggleGroup

## Steps for reproduction

1. Check a panel with controls like Style Panel
2. Background of the panel have changed and all controls have white
background
2023-03-31 11:27:07 +03:00
Bogdan Chadkin 59b9c6fedc Support cross-project instance copy paste (#1326)
Here a little refactored copy paste instance plugin.

Now we copy all data including slots and tokens though paste write them
as is or do not write at all if already exist.

This let us to not do unnecessary patches for copy paste within project
while still have whole UI pasted in different project.

There is still a problem with pasting styles which always have different
breakpoint ids in each project. We will need to implement merging in
other PR.
2023-03-31 11:38:19 +07:00
Lokeswaran AruljothiandOleg Isonen fbc401c4d4 Add gradient color to Button Component (#1316)
## Description

1. What is this PR about (link the issue and add a short description)
This PR contains the changes for the Gradient color for the button
component

Here is an example of share button with `gradient` color:


https://user-images.githubusercontent.com/74011196/228329202-54f1b143-cc99-47d5-bd17-decf170fbe82.mov


## Steps for reproduction

1. Create a Button component
2. set `color="gradient"` in Button 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

- [x] made a self-review
- [x] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [x] tested locally and on preview environment (preview dev login:
5de6)
- [x] updated [test
cases](https://github.com/webstudio-is/webstudio-builder/blob/main/apps/builder/docs/test-cases.md)
document
- [x] added tests
- [x] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory

---------

Co-authored-by: Oleg Isonen <oleg008@gmail.com>
2023-03-30 17:39:02 +02:00
Bogdan Chadkin 2731bfb6f9 Fix instance selector leaking into prod (#1322)
Spread caught us here. instanceselector was spread into components.
2023-03-30 16:36:20 +07:00
Bogdan Chadkin 21c5261529 Fix drop target when sort navigator tree (#1323)
Element was not swapped because slice was not reasigned so
canAcceptChild didn't really work.
2023-03-30 16:35:11 +07:00
Roman Pominov 1cf864c428 Dots that represent items inside closed sections; Fix pages scroll (#1309)
## Description

1. Fixes #1308
2. Closes #1262

## Steps for reproduction

1. Modify some styles
2. Close section, notice the dots
2023-03-30 11:50:52 +03:00
Bogdan Chadkin 2c7184c069 Refactor selected outline with store (#1317)
One less pubsub event replaced with store. Now hovered and selected
logic is similar.
2023-03-30 11:39:36 +07:00
Bogdan Chadkin 73c812a4f4 Upgrade to pnpm 8 (#1320)
Ref https://github.com/pnpm/pnpm/releases/tag/v8.0.0

The new version got a lot of stuff enabled by default including the one
I didn't enabled before "dedupe-peer-dependents" which will make
packages upgrade so much easier.
2023-03-29 18:59:46 +07:00