Since we have synchronization of props state. Local one can be replaced
so the logic will not longer be duplicated.
Here also fixed the issue with showing all stored props right after copy
paste. Before only required once were shown.
Props have a lot of logic to synchronize values. And after moving
updates into designer we get fresh state instantly and can simplify the
logic even more.
Turns out we store whole db representation in each props each per
instance item. This is wasteful and increase complexity of code.
```
{
[InstanceId]: {
id: UUID,
instanceId: InstanceId,
treeId: TreeId,
props: UserProp[]
}
}
```
Where instance id is duplicated and tree id is provided as patch
context. Id can be replaced with combination of instance id and tree id.
```
{
[InstanceId]: UserProp[]
}
```
We have stores synchronization and can move the logic from canvas to
designer.
Here refactored this way breakpoints, got rid from direct atom changes
without store and removed breakpoints pub sub events.
## Description
1. color coding of style sources, handling DoubleClick and ESC
<img width="376" alt="Screenshot 2023-01-13 at 00 20 18"
src="https://user-images.githubusercontent.com/52824/212208704-df1aa071-7f67-43b8-9e1a-c4986b2c80d5.png">
## Steps for reproduction
1. open storybook
3. double click to edit name
4. esc to revert editing
5. new colors and states
## 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-designer/blob/main/apps/designer/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `designer/env-check.js` if mandatory
Co-authored-by: Roman Pominov <rpominov+github@gmail.com>
Ref https://github.com/nanostores/nanostores
Nanostores is another open source implementation of reactive states.
Supports a lot of frameworks and provides useful utilities like computed
stores. Api is slightly different
```
store.get(): Value
store.set(value: Value)
```
`useStore` resolves only value so I temporary added custom `useValue` to
not rewrite whole project. Since we gonna use computed atoms it makes
more sense to invoke useStore where atom value is used instead of
reusable hook.
## Description
1. Now we can pass currentIndex and user can click on an item to make it
current.
## Steps for reproduction
1. open style source UI in stories
2. click item to make it current
## 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-designer/blob/main/apps/designer/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `designer/env-check.js` if mandatory
Co-authored-by: Roman Pominov <rpominov+github@gmail.com>
Before we sent messages from designer to canvas, patched data and sent
whole data back to designner.
This created latency so we had to keep local state and synchronize it
with effects.
Here I patched store and used its state in designer which is same as
local state. So we no longer need effect synchronization (and bugs
because of it).
## Description
1. This adds ability to drag&drop style source items
## Steps for reproduction
1. open stories
2. get 2+ items
3. start dragging
## Code Review
- [ ] hi @rpominov , I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- help finish the sortable implementation: restrict drop targets, maybe
add a preview item to the draggable, can go without it though for now
## 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-designer/blob/main/apps/designer/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `designer/env-check.js` if mandatory
Co-authored-by: Roman Pominov <rpominov+github@gmail.com>
We finally can change states connected to immerhin from designer. Here I
added subscription to designer changes and fixed cyclic events with new
"source" parameter provided on transaction creation.
## Description
1. Added a way to disable/enable style source item
## Steps for reproduction
1. source item menu > disable
2. source item menu > enable
## Code Review
- [ ] hi @TrySound , I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it in the story
## 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-designer/blob/main/apps/designer/docs/test-cases.md)
document
- [ ] added tests
- [x] if any new env variables are added, added them to `.env.example`
and the `designer/env-check.js` if mandatory
Here used immerhin subscribe method to send patches from canvas to
desiger instead of uploading full states when their value is changed.
Syncrhonization is still one-way. Need more changes in immerhin to make
two-way patches work.
Ref https://github.com/webstudio-is/webstudio-designer/issues/696
Migrated updating and rendering to normalized styles. There are still a
few cases to migrate so left legacy root instance updates.
Styles are updated with immerhin consistently with whole project.
Can be tested changing styles and deleting breakpoints.
Ref https://github.com/webstudio-is/webstudio-designer/issues/696
Gradually starting to migrate to new styles format. Here replaced
getCssRules and getPresetStylesMap with getStyleRules and
getPresetStyleRules utilities.
Will reuse both at once on release.
Before we populated preset style on instance creation. This does not let
us to distinct preset style from local one.
As an option we could use preset style hardcoded in meta though this may
affect user when we change defaults.
Here I added presetStyle column in Tree table with the list of styles
for component.
```
Array<{
component: string,
property: string,
value: StyleValue
}>
```
Will style controls as grey for such styles.
## Description
Adds keyboard support to the Spacing control. Closes#666
## Steps for reproduction
1. Focus spacing control using TAB
2. Blue outline should appear and "Margin Top" should get highlighted
3. Arrow keys should change highlighted item
4. `Enter` should open popover for the highlighted item
6. Mouse navigation should still work when control is focused
## Description
Multiple style elements are easier to differentiate when they have some
hint on the purpose
## Steps for reproduction
1. select style element on canvas, see data-webstudio attribute with a
name
## Code Review
- [ ] hi @TrySound , I need you to do
- conceptual review (architecture, feature-correctness)
## 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-designer/blob/main/apps/designer/docs/test-cases.md)
document
- [x] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `designer/env-check.js` if mandatory
## Description
1. What is this PR about (link the issue and add a short description)
Do not show flex properties in the style panel when a layout is not flex
closes#687
<img width="272" alt="image"
src="https://user-images.githubusercontent.com/5077042/210067036-4571be1d-4745-48a3-be7f-45f91791a6a9.png">
Here I patched `appliesTo` of properties `alignItems`, `justifyItems`
see https://github.com/mdn/data/issues/585
## Steps for reproduction
Opens designer panel, check no flex props in display: block layout
## 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-designer/blob/main/apps/designer/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `designer/env-check.js` if mandatory
## Description
closes#465
Select option names are now "Pascal Cased"
`+` now `Select` sets `StyleValue` instead of deprecated `string` in
`setParams`
## Steps for reproduction
see #465
## Code Review
- [x] 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-designer/blob/main/apps/designer/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `designer/env-check.js` if mandatory
## Description
Adds option / shift support to scrub in spacing. Closes#668
## Steps for reproduction
- Try to scrub in spacing while holding SHIFT or OPTION (ALT in Windows)
- Try to press and release SHIFT / OPTION multiple times during scrub
- Try to press SHIFT / OPTION while hovering over a property (other
properties will highlight even without scrub)
Issue:
Breakpoints panel suggests delete currently selected instead of specific
breakpoint #691
## Description
1. What is this PR about (link the issue and add a short description)
## Steps for reproduction
1. click edit breakpoint in top bar
2. delete other breakpoint than the currently selected
3. expect to show the message to delete the breakpoint and not the
currently selected in the confirm message
## 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
## Before merging
- [x] tested locally
- [x] tested on preview link
Set at VERCEL env
<img width="930" alt="image"
src="https://user-images.githubusercontent.com/5077042/209917100-86d1f7e9-a5ca-4aaa-a877-456850fa5153.png">
## Description
Restrict assets by MAX_ASSETS_PER_PROJECT env variable.
## Steps for reproduction
- [x] - set MAX_ASSETS_PER_PROJECT = 4 as env variable for Vercel
Try upload more than 4 files.
Get Error: "`Max ${count} assets per project reached`"
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- test it on preview
- [ ] hi @TrySound plz check code
## 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-designer/blob/main/apps/designer/docs/test-cases.md)
document
- [ ] added tests
- [x] if any new env variables are added, added them to `.env.example`
and the `designer/env-check.js` if mandatory
## Description
ref #465 for css-value-input
Add beauty names to keywords, a little bit better search for keywords.
+ Fixes non-working scrub.
+ Fixes jumping cursor.
## Steps for reproduction
1.
Write `min-content` inside `width` field - All options you see must have
`Pascal Case`
Select value through menu - inputValue must be also in `Pascal Case`
2.
Edit width input, write `Min Content`, and click Enter - must be saved
with `Min Content` value.
(internally must be keyword with value=`min-content`)
3.
Edit width input, write `min-content`, and click Enter - must be saved
with `Min Content` value.
(internally must be keyword with value=`min-content`)
4.
Write `min content`, click tab - must be saved with `Min Content` value.
(internally must be keyword with value=`min-content`)
5. Edit input in any place of cursor it must not jump to the end.
## Code Review
- [ ] hi @kof, I need you to do
- 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)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio-designer/blob/main/apps/designer/docs/test-cases.md)
document
- [x] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `designer/env-check.js` if mandatory
#422
## Description
This PR adds the StyleSourceInput component. It's not complete yet and
when we are finished we might move a lot of this logic to combobox, not
sure yet, because it depends on how much custom stuff we are going to
need in this input. MUI implements it using combobox and `multiple`
property but we may need some stuff that won't fit.
- [x] Add new items
- [x] Delete items with backspace
- [x] Truncate too long items
- [x] Autocomplete
Follow up PR will include
- [ ] Use color coding for background color
- [ ] Create a token from style panel
- [ ] Select an existing token from style panel
- [ ] Delete Token from style panel with backspace
- [ ] Sort tokens
- [ ] Enable/disable a source
- [ ] Rename using menu
- [ ] Delete using menu
- [ ] Disable deleting local source
- [ ] Sort the sources using d&d
## Steps for reproduction
1. Go to
https://www.chromatic.com/component?appId=6382151c8b47d4399fb9fc69&csfId=designer-features-style-panel-style-source-input--initial&buildNumber=532&k=63ab0f47f9dfa67d6ee09558-1200-interactive-true&h=17&b=-4
## 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
- [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-designer/blob/main/apps/designer/docs/test-cases.md)
document
- [x] added tests
- [x] if any new env variables are added, added them to `.env.example`
and the `designer/env-check.js` if mandatory
This is a simplification. Since we already pass style info everywhere it
can be used to color labels, buttons and icons in blue instead of
recomputing local state with hook.
## Description
ref #534
PR atop of #701
Next PR: image-set support
Ability to select background image from asset
<img width="496" alt="image"
src="https://user-images.githubusercontent.com/5077042/209625480-f0b4b5a0-8ca7-438d-bbd8-3b4874f9428d.png">
## Steps for reproduction
Create a div, and select an asset for the background image.
## 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
- [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-designer/blob/main/apps/designer/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `designer/env-check.js` if mandatory
The logic does not work correctly and not really used because we never
set values to "inherit".
Later new logic will be added to show the source of values.
## Description
1. What is this PR about (link the issue and add a short description)
## Steps for reproduction
Click into css-input, delete everything - menu occured
Click tab - must show red rectangle instead of just tabbing into new
control
## 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-designer/blob/main/apps/designer/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `designer/env-check.js` if mandatory
Found an issue when hover a few elements fast and then move cursor out
of iframe hover gets stuck on some element. This is because we use
combination of mouseover and mouseout events.
So when we move out of one instance to another it looks like this
over
out
over
out
Which may lead to race conditions. So here out is canceled by every
hover and delayed a little to always emit last.
Bogdan Chadkin
