1689 Commits
Author SHA1 Message Date
Andras Bacsai 9fb3c54258 Release 0.42.0 (#1165)
## 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-02 11:05:44 +01:00
Bogdan Chadkin 22c13b8972 Migrate delete normalized instances (#1163)
We found a bug a bug after release. Any instances changes on the page
erase instances of other pages.

Recently I migrated to normalized instances though didn't have time to
migrate utilities and just added patchInstancesMutable utility to
synchronize changes from denormalized rootInstance to normalized
instances.

Though after merging instances of all pages into single list this
synchronization started to clear instances not found in rootInstance.

To solve this I stopped clearing instances in patchInstancesMutable and
migrate delete instances utility to mutating normalized instances
directly.
2023-03-02 11:47:00 +03:00
Oleg Isonen 0eaa57caae Scroll navigator into view when selecting instances on canvas/navigator (#1162)
Closes https://github.com/webstudio-is/webstudio-builder/issues/1157


## Description

When selecting in navigator - scroll into view on canvas and vice-versa

## Steps for reproduction

1. insert lots of elements to make navigator and canvas scroll
2. click in navigator last and first - see canvas scrolling
3. same as 2 but for canvas

## Code Review

- [ ] hi @TrySound , I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview
- [ ] 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-03-01 22:00:52 +01:00
Andras Bacsai 2e9f5fb5f7 Release new versions (#1156)
## 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-01 14:40:38 +01:00
Oleg Isonen dd7bcba787 Save changes in settings when unmounting (#1152)
## Description

Save changes in settings when unmounting e.g. when switiching to another
tab

## Steps for reproduction

1. change instance name in settings
2. switch to another tab
3. should save

## 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-03-01 13:57:56 +01:00
Ivan Starkov 42cbd5eabc Fix publish (#1151)
## 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-01 16:55:36 +04:00
Roman Pominov 60a0c04585 Props panel UI (#1134)
## Description

- Added `[Icon] Label` at the top. Closes #992
- Implemented Controls from #1010 . Underlying components like TextArea
or Select are still not aligned with Figma and will need to be updated
later
- Cleaned up props panel layout as much as possible without the new
Title (#1100)

## Steps for reproduction

1. Open props panel
2. Or:
https://props-panel-controls--6382151c8b47d4399fb9fc69.chromatic.com/?path=/story/builder-features-props-panel--story
2023-03-01 15:43:08 +03:00
Oleg Isonen 040d30778d Instance name setting (#1146)
## Description

Closes https://github.com/webstudio-is/webstudio-builder/issues/1143

Allows to select an instance and change name via settings > name

Used in navigator, outlines, props panel (design untouched, will be
updated soon)

## 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-01 13:19:06 +01:00
Bogdan Chadkin 7e80f18163 Drop tree table (#1147)
Ref https://github.com/webstudio-is/webstudio-builder/issues/1116

We moved all data to build and tree table no longer necessary.

- fixed writing instances on page creation (broke in my previous PRs)
- pages are no longer cloned on build cloning and preserve their ids
between builds
2023-03-01 12:13:33 +03:00
Ivan Starkov a82825bfe8 Make Image value not an Array (#1148)
## Description

ref #877

As a part of above I'm changing 
```
export const ImageValue = z.object({
  type: z.literal("image"),
  value: z.array(z.object({ type: z.literal("asset"), value: ImageAsset })),
});
```
to 
```
export const ImageValue = z.object({
  type: z.literal("image"),
  value: z.object({ type: z.literal("asset"), value: ImageAsset }),
});
```
In favour of using in next PRs 

```
const ArrayValue = z.object({
  type: z.literal("array"),
  value: z.array(z.union([UnitValue, KeywordValue, UnparsedValue, ImageValue])),
});
```

For now, to not break compatibility with existing code I'm not
converting to an array immediately.
Just style types simplification.

'array' type is not now supported on db level, parse/serialize will not
work. Will be done in following PRs





## 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-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-01 12:54:44 +04:00
Bogdan Chadkin 5d5172f846 Move instances to build (#1144)
Ref https://github.com/webstudio-is/webstudio-builder/issues/1116

We want to have freedom in manipulation and reusability of tree parts so
gonna merge tree data of all pages into build.

Here migrated instances. Tree no longer have any data. Will cleanup in
the next PR.
2023-02-28 21:58:50 +03:00
Bogdan Chadkin df4c2e0384 Add root instance id to page schema (#1142)
Ref https://github.com/webstudio-is/webstudio-builder/issues/1116

Before we assumed the first instance in the list of instances is the
root. Though we are gonna introduce slots and for this have to combine
instances of all pages into single array. So there can be many roots in
one list.

So now we gonna specify root instance id on page. treeId will be removed
once instances are migrated to Build table.
2023-02-28 19:41:20 +03:00
Oleg Isonen c50c39b0b7 Base breakpoint (#1140)
## Description

- rename default mobile to base
- set initial canvas width to the max size within the lowest breakpoint
boundary


## Steps for reproduction

1. create new project
2. see that by default you are on base breakpoint
3. see that the initial width is at max width in the before the first
next breakpoint begins (767px)

## 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-02-28 14:36:28 +01:00
Bogdan Chadkin 33b7b7d9de Drop tree id from style sources (#1141)
Ref https://github.com/webstudio-is/webstudio-builder/issues/1116

We are gonna get rid of trees and move all data to build. Local style
sources no need to be scoped to tree or page, they are scoped to single
instance.

Token scoping to page we can add later when style source manager is
ready.
2023-02-28 15:56:15 +03:00
Bogdan Chadkin 3239ae8587 Move props to build (#1136)
We want to have freedom in manipulation and reusability of tree parts so
gonna merge tree data of all pages into build.

Here migrated props. Left one todo to cleanup tree data of deleted
pages. Though easier to solve this when pages management is moved to
client.

May require to change code in sass.
2023-02-28 00:50:28 +03:00
Ivan Starkov 012e54e465 Fix sentry error (#1137)
## 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-02-27 22:11:45 +03:00
Oleg Isonen 431d1f9e60 Upgrade sentry to 7.38 (#1132)
## Description

Just upgrading in hope to get rid of some logs in sentry that seem
unrelated to our code base


https://webstudio.sentry.io/issues/3863782544/?project=6530661&query=is%3Aunresolved&referrer=issue-stream

## Code Review

- [ ] hi @TrySound , 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-02-27 16:31:26 +01:00
Bogdan Chadkin a794970409 Move style source selections to build (#1133)
We want to have freedom in manipulation and reusability of tree parts so
gonna merge tree data of all pages into build.

Here migrated style source selections. Left one todo to cleanup tree
data of deleted pages. Though easier to solve this when pages management
is moved to client.
2023-02-27 17:57:54 +03:00
Roman Pominov 4e9c790573 Radio and Checkbox components update (#1115)
## Description

Closes #963

## Steps for reproduction

1.
https://main--638245578b47d4399fba191a.chromatic.com/?path=/story/library-radio--demo
2.
https://main--638245578b47d4399fba191a.chromatic.com/?path=/story/library-checkbox--demo
2023-02-27 10:45:29 +03:00
Andras Bacsai bb3344c3a0 Bump versions (#1127)
## 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-02-25 10:46:22 +01:00
Oleg Isonen 77b8dab455 Support background-clip text (#1123)
## Description

There are multiple problems with clipping to text:
1. it is only supported with vendor prefixed -webkit-background-clip
2. it doesn't work with CSS vars (not using them on canvas for this)


## Steps for reproduction

1. add heading
4. set background image src to some image
5. set color to transparent
6. set background-clip to text
7. Background image should be clipped to text

<img width="294" alt="Screenshot 2023-02-24 at 13 49 22"
src="https://user-images.githubusercontent.com/52824/221194656-9e4591ed-5727-45f0-8560-eba35e278819.png">


## 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-02-24 18:21:10 +01:00
Oleg Isonen afa83c8d55 Add target and prefetch to a link (#1117)
## Description

Adding target and prefetch to initial properties of a Link component
along with the defaults

## Steps for reproduction

1. add a link
2. try target prop
3. try prefetch options

## 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-02-24 10:17:40 +01:00
Oleg Isonen 1f2475b9f4 consistent error naming in catch 2023-02-24 09:16:31 +00:00
Ivan StarkovandBogdan Chadkin 069f137253 Update npm packages to version 0.36 (#1114)
## 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

---------

Co-authored-by: Bogdan Chadkin <trysound@yandex.ru>
2023-02-23 17:46:48 +03:00
Bogdan Chadkin 83a44d9077 Patch normalized instances (#1112)
Ref https://github.com/webstudio-is/webstudio-designer/issues/696
https://github.com/webstudio-is/webstudio-builder/issues/924

Moved temporary denormalization from server to client. Denormalized tree
patches are converted to normalized patches. Now we can enable
collaboration and get minimal conflicts to resolve.
2023-02-23 16:42:42 +03:00
Ivan Starkov 967bf50448 Fix collapse (#1097)
## Description

closes #1087 

- [x] found bug we should not remove all collapsed
- [x] we need to detect edge-case if element explicitly has 0 width /
height

## Steps for reproduction

see #1087

## 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-02-23 16:39:23 +03:00
Oleg Isonen 4ace99eebd WrapperComponent > WebstudioComponent (#1109)
## Description

Renaming WrapperComponent > WebstudioComponent


## Code Review

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

## 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-02-23 11:36:09 +01:00
Roman Pominov aac93f3702 Props panel refactoring (#1048)
## Description

Closes #1013

1. Refactored `PropMeta` shape to be flat again instead of trying to be
the same as Storybook's `ArgType`
2. Changed `*.props.json` to `*.props.ts`. Fixes #1051
3. Prepared controls files structure, now just need to work on their UI
4. Refactored `usePropsLogic/PropsPanel` to the new logic where we
choose the prop before adding and then never change the name
5. A lot of cleanup / small fixes / better TS types

This PR basically completes architecture/logic and now only the work on
the controls UI is left. Although complicated controls like URL may
still require some work on the logic.

## Steps for reproduction

1. Open props panel
2. Interact with the props
2023-02-22 20:20:29 +03:00
Ivan Starkov e799dcb28e To reduce size of published apps pass getComponent to InstanceRoot, add size limit (#1098)
## Description

Now published apps during build can pregenerate imports of used
components

https://github.com/webstudio-is/webstudio-builder/blob/89688ee837b45f0877ebe32d3aefb1869a97c0a1/packages/sdk-size-test/app/page-components/page-main.ts#L1-L3

And pas getComponent to InstanceRoot
https://github.com/webstudio-is/webstudio-builder/blob/89688ee837b45f0877ebe32d3aefb1869a97c0a1/packages/sdk-size-test/app/routes/$.tsx#L23

Also size-limit is added
https://github.com/webstudio-is/webstudio-builder/blob/89688ee837b45f0877ebe32d3aefb1869a97c0a1/packages/sdk-size-test/package.json#L10-L19


## Steps for reproduction

### What I did

Create sample remix app with sdk
Build: 256K

Increase size of sup component
Build now 564K

After changes build now 256kB

## 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-02-22 18:31:48 +03:00
Oleg Isonen e4785959c0 Code component (#1102)
## Description

Introduces Code component, no syntax highlighting just block and inline
code

## Steps for reproduction

1. add code component, try toggle inline prop
2. try from markdown

block

```js
alert(123)
alert(123)
alert(123)
```

inline
```
test  test `alert(123)` test 
```

## 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-02-22 14:24:45 +01:00
Andras Bacsai 9d4db831d3 Rename origin to webstudioApi in publish request to the new deployment process (#1088)
## Description

1. What is this PR about (link the issue and add a short description)
Just renaming one of the payloads to our publisher API to be consistent.

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

- [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-02-22 12:55:12 +01:00
Bogdan Chadkin bfeda0ff08 Find closest rich text with instances index (#1093)
Ref https://github.com/webstudio-is/webstudio-designer/issues/696

Previous findClosestNonInlineParent required additional check to handle
drag of root instance or editing non rich text.

Now we can simplify logic because we know exact component type of
matched instance.
2023-02-21 15:22:52 +03:00
4f0d46d7f0 Figma tokens (#1068)
color tokens update - added gradient colors and adjusted success colors

---------

Co-authored-by: markxtang <122043657+markxtang@users.noreply.github.com>
Co-authored-by: Roman Pominov <rpominov+github@gmail.com>
Co-authored-by: Bot (build-figma-tokens.yml) <bot@localhost>
2023-02-21 09:16:52 +03:00
Ivan Starkov 1076d6efd0 Fix color input does not accept CSS color names (#1089)
## Description

1. What is this PR about (link the issue and add a short description)

Found few bugs.

- [x] - White color have border
- [x] - Fix transparent - all is parsed well its `react-color` feature
<img width="237" alt="image"
src="https://user-images.githubusercontent.com/5077042/220187124-fe8ddc9a-1cc0-4ad3-9979-4037e4a69b5a.png">

- [x] - Synchronize picker color and color shown in input



closes #1081

`+` Added transparent color (need be in design, looks better for most
inputs if anything is shown)

<img width="212" alt="image"
src="https://user-images.githubusercontent.com/5077042/220186642-8cc0bcad-ab35-4444-b773-da652cafb734.png">

<img width="217" alt="image"
src="https://user-images.githubusercontent.com/5077042/220186773-071e6176-066a-4d37-807d-cd6a2db70642.png">


Accessibility is not done fully for the color picker
https://github.com/webstudio-is/webstudio-builder/issues/1092


## Steps for reproduction

1. You are now able to select colors by name
<img width="243" alt="image"
src="https://user-images.githubusercontent.com/5077042/220174790-7e33219d-e955-4718-bad1-0c1ac79ebaf3.png">

2. Colors with non-1 alpha will be shown on chessboard

<img width="225" alt="image"
src="https://user-images.githubusercontent.com/5077042/220174949-2c0c4a45-d330-4a3c-a769-f30bd33b2154.png">


## Code Review

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

- [ ] hi @TrySound 
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)


## Before requesting a review

- [x] made a self-review
- [ ] 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
- [x] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
2023-02-21 02:48:49 +04:00
Bogdan Chadkin c916c2f7ca Reflect preset style in style panel ui (#1090)
Ref https://github.com/webstudio-is/webstudio-builder/issues/1082

Added preset styles to style info and considered while computing
inherited styles.
2023-02-20 20:13:03 +03:00
Roman Pominov 8259b42d35 Fix page settings (#1085)
## Description

Fixes #1061 .

## Steps for reproduction

- Try to rename page title or page name
- It should not revert back in few seconds
2023-02-20 20:11:44 +03:00
Oleg Isonen a7ad9a14ca Markdown paste (#1077)
## Description

Almost complete markdown support over "paste". 

Missing from parser: strikethrough and table.
Missing components (will add in the next pr): blockquote, list,
listItem, separator, code, inlineCode


## Steps for reproduction

Paste this:

```
# Hi this is title 1

This is  _italic_  __bold__ and [link](https://webstudio.is)

## Hi this is title 2

This is  _italic_  __bold__ and [link](https://webstudio.is)

![an image](https://user-images.githubusercontent.com/52824/219961575-cfbc96d6-91c3-4c48-a81e-9e166c001eec.png)

```



https://user-images.githubusercontent.com/52824/219961672-17e07d0c-8929-40c2-a94a-cdfd33a85d63.mp4


## 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-02-20 15:12:29 +01:00
Ivan Starkov 74f87ccada Fix flex children sections are showing on wrong elements (#1078)
## Description

1. What is this PR about (link the issue and add a short description)

Fix flex children sections are showing on wrong elements
closes #685
most used functions are imported from style-info and all has tests
there.




## Steps for reproduction

Create a few Boxes, and see that the Flex Child section is not shown.
Set `display: flex` for some Box. See that Flex Child section is not
shown on the element. See that Flex Child section is shown on block
children.


## Code Review

- [ ] hi @kof , @TrySound I want you to look namings, too much we have
with styles Style, StyleDecl, StyleInfo etc.
I used useInstanceStyleData instead of useInstanceStyle because we
already have similar useInstanceStyles

- [ ] 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-02-20 14:26:44 +03:00
Bogdan Chadkin 86178234ab Refactor getInstancePath with instances index (#1080)
Ref https://github.com/webstudio-is/webstudio-designer/issues/696

We no longer need to traverse tree to access parents. Index provide
precomputed map of instance to parent.

## Code Review

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

## 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-02-20 12:31:23 +03:00
Bogdan Chadkin c4dc48f96b Add "convert to token" for local style sources (#1079)
Ref https://github.com/webstudio-is/webstudio-builder/issues/807

User may not want to create necessary tokens but start styling right
after dropping component and later may want to create token from local
style source.
2023-02-19 15:49:37 +03:00
Oleg Isonen 3836e2d2cb Turn instance copy paste into a plugin for copy/paste (#1076)
## Description

This effectively is the beginning of copy/paste plugin system. Now
instance copy paste is a plugin that is fully encapsulated and we can
add more of them

## Steps for reproduction

1. copy/paste instances on the same page
2. copy/paste instances across pages
3. copy paste across projects

## 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-02-18 15:21:29 +01:00
Ivan Starkov d396142f2a Update npm packages (#1073)
## 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-02-18 12:34:33 +03:00
Ivan Starkov 3cc0977d82 Filter font assets for published apps (#1072)
## Description

1. What is this PR about (link the issue and add a short description)

ref #1065

`+` fixed useLayoutEffect server warning

## Steps for reproduction


## 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-02-18 13:21:49 +04:00
Ivan Starkov 7e76a1d408 Fix build permission not work on page change inside builder (#1064)
## Description

1. What is this PR about (link the issue and add a short description)

closes #1063


## 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-02-18 00:25:07 +04:00
Oleg Isonen 29f3839456 Make css helper tool for collapsing prevention on canvas really smart (#1059)
Closes https://github.com/webstudio-is/webstudio-builder/issues/604

## Description

-  User can now override helper definitions on canvas
- only boxes that would collapse without helper -  receive helper
- helper is removed when any CSS property is changed on that instance
that would prevent collapsing, so that helper can be removed
- Helper doesn't show on the preview or publish
- Helper goes away if an instance inserted as a child
- There is no need to set padding-right or padding-bottom if you just
need a small div with a defined or layout-based size, as soon as div is
not collapsing, helper is not applied

More: padding will be only added on the side that would collapse
otherwise.
For example when I add a div, it is a block element, it grows
automatically full width but has 0 height, in this case spacing heloper
with padidng-top: 50px will apply, so that it doesn't collapse.
If user sets height: 100px or does anything that would give it a height
- we remove the helper padding right away, so user can actually see the
height they set

In other words we prevent elements from collapsing when they have 0
height or width by making them non-zero on canvas, but then we remove
those padding universally without shortlists as soon as element doesn't
collapse.

## Steps for reproduction

1. add a box
2. set padding-top
3. see it applies on canvas

1. add a box
2. set width
3. see the exact width on canvas, no helper padding


1. add a box
2. set height
3. see the exact height on canvas, no helper padding

## Code Review

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

## 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-02-17 20:46:12 +01:00
Oleg Isonen 30e687e516 Better page name layout and correct variable (#1062)
## Description

Page name had too little space even though we had plenty in the title,
so I switched to min and max values and using name now instead of title,
title can be SEO optimized, its not useful for builder


## 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-02-17 19:56:16 +01:00
Bogdan Chadkin 0ab3c60659 Simplify text editor store updates (#1054)
Before we had to preserve instance data to not break styles. Now styles
are decoupled and editor can interop whole instances type.

So we no longer need updates with instance-like shape. Text editor can
output instances directly preserving only ids.

As a result got rid from children updates in both react-sdk and project
packages.
2023-02-17 21:10:35 +03:00
Ivan Starkov 4af2ab9e1b Typing "-" in unitless value types should select the unitless (#1060)
## Description

1. What is this PR about (link the issue and add a short description)

closes #1033
Also fixes that 0 for props like top, left etc showed as 

<img width="225" alt="image"
src="https://user-images.githubusercontent.com/5077042/219710181-a8e7ecf4-638f-459a-a8b7-0dcd879768a2.png">

Now 

<img width="219" alt="image"
src="https://user-images.githubusercontent.com/5077042/219710399-afa8af98-d8f9-4328-8bf5-083e6be2d6ba.png">

Also now if the property allows `unitless` we allow the selection of `-`
unit from UnitSelect _(top can be unitless if value is 0)_

<img width="230" alt="image"
src="https://user-images.githubusercontent.com/5077042/219710645-a91a05d3-0f2f-4fc8-b0b2-ede9a7c8e058.png">

And not if not _(top can't be unitless if value is not 0)_

<img width="141" alt="image"
src="https://user-images.githubusercontent.com/5077042/219710884-74af7cba-76d0-4e5e-a6e4-ab2c7f910c45.png">








## Steps for reproduction

See tests what's accepted, for unitless properties, it's allowed to
enter for lineHeight

`10-`
`20 -`
`10 + 20-`

All become unitless.


For `top` you can enter `0-` it becomes unitless 0
then for example `10` it becomes `10px` as `top does not support
unitless 10



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

- [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
- [x] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
2023-02-17 21:50:26 +04:00
Bogdan Chadkin 7a5666c965 Prevent instance cut in contenteditable (#1058)
Ref https://github.com/webstudio-is/webstudio-builder/issues/1057

Checks are now similar to those we use in shortcuts.
2023-02-17 20:49:21 +03:00
Bogdan Chadkin f6150c98da Move build db utils to project-build package (#1050)
We are moving all build related utils into separate package. Here moved
breakpoints, styles, style sources and build utils.
2023-02-16 21:30:50 +03:00