## 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
#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
## Description
I need this filed in the following PR, to count assets before upload.
And restrict the total number of assets per project.
## Steps for reproduction
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
## 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
As of now it's possible to directly upload via rest multiple files.
The issue is that to get files count in request we need to parse
request.
Here I restrict uploading to just 1 file on request.
Next PR: Restrict file count per project.
Use hide whitespaces for review.
<img width="331" alt="image"
src="https://user-images.githubusercontent.com/5077042/209684306-c1917dcb-7a57-4cb4-9a15-f0d06e0eca53.png">
## 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-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
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.
