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.
## Description
Just another PR to sync tokens, but also I've added a GitHub action that
will automatically keep `figma-design-tokens.ts` up to date in the
`figma-tokens` branch
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- [ ] hi @TrySound, I need you to do
- detailed review
## 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: Oleg Isonen <oleg008@gmail.com>
Co-authored-by: Taylor Nowotny <86495896+taylornowotny@users.noreply.github.com>
Co-authored-by: markxtang <122043657+markxtang@users.noreply.github.com>
Co-authored-by: Bot (build-figma-tokens.yml) <bot@localhost>
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.
Ref https://github.com/webstudio-is/webstudio-designer/issues/696
Here only migration and transforms for load and patch. Styles have the
following type and stored in Tree.styles column.
```
Array<{
breakpointId: string,
instanceId: string,
property: StyleProperty,
value: StyleValue
}>
```
Did migration with cursor pagination with 1000 trees per transaction.
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
Ref https://github.com/webstudio-is/webstudio-designer/issues/366
There were many unitless initial values with "px" unit. Here I extracted
all possible unit types from properties syntaxes. csstree provides a
list of unit groups which in the future will let us provide correct list
of units for css value input.
## 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
While fixing units found a lot of keywords appear from css functions
which are complex values and should be ignored. So here I changed
traversing of properties syntaxes to support only top level values and
keywords.
Mostly gone color words
```diff
-6639 lines 116 KB
+4808 lines 85.8 KB
```
See diff for more info
Ref https://github.com/webstudio-is/webstudio-designer/issues/366
Parsed initial values to get correct unit instead of px for some
properties. There is still edge case with unitless values I'm gonna fix
in another PR.
Also bumped mdn-data and removed overrides fixed on mdn side.
## 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
because we removed width:100% from input it seems like ideal strategy is
to always have minWidth: 0 defined since it just fixes flexbox
everywhere
## Steps for reproduction
1. open style panel
## Code Review
- [ ] hi @istarkov , 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-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
Bogdan Chadkin
