217 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
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
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 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
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
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 bba102d857 Replace lodash string utilities with change-case (#1318)
Change case is a cool collection of string utilities. See
https://github.com/blakeembrey/change-case

Here replaced lodash snakecase and capitlize used for humanizeString
with single title-case from that collection.

Also dropped other unused lodash packages.
2023-03-29 15:10:08 +07:00
Bogdan Chadkin 1163d2c863 Remove scroll state from builder as not useful (#1315)
Scroll state in builder used only to hide select, hover and text toolbar
while scrolling. Though they all already track scrolling to do the same
and more importantly restore state after scroll. So there is no need to
have it builder.
2023-03-29 01:37:32 +07:00
Bogdan Chadkin 1d62927462 Refactor text toolbar state (#1314)
- refactored with synchronized client store
- recompute toolbar position on scroll end
2023-03-29 00:41:12 +07:00
Ivan Starkov 13db987237 Fix atoms leak (#1312)
## Description

Atom data leaked into the server canvas.
ref #1313 

## Steps for reproduction

Open Vercel app. Any project. Reload a few times not fast to avoid
scaling.
Get the iframe link, then open it. Should be empty.

New relic logs must contain:
```
{
    assetsStore: 0,
    pagesStore: 0,
    instancesStore: 0,
}
```

New relic query 
`"proxy.path":"*71f88d3e-9231-489e-8ba0-8adc10215335*"
"message":"*assetsStore*"`
where `71f88d3e-9231-489e-8ba0-8adc10215335` is your project id 
(add vercel host 


## 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
- [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-03-28 19:47:32 +04:00
Ivan Starkov daf932837c Update npm (#1311)
## 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-03-28 16:08:38 +04:00
Bogdan Chadkin 3edd4ea3cc Optimize canvas loading (#1310)
Ref https://github.com/webstudio-is/webstudio-builder/issues/1044
https://github.com/webstudio-is/webstudio-builder/issues/360

Canvas no longer need to load any data. No longer need pages. No longer
need auth token. No longer need static css.

Here I cleaned all unnecessary logic to load canvas. It may load much
faster now.
2023-03-28 19:02:02 +07:00