Recently added support for synchronization of non-immerhin stores. Here
refactored instance hovering from pubsub to such stores.
Designer and canvas can both set hovered instance id and instance
connector subscribes to these changes and sends to designer outline
rect.
selectedInstanceData update is sent from canvas after every render in
effect. The latency can be avoided by subscribing to selectedInstanceId
directly. For styles added new store selectedInstanceBrowserStyle and
synchronized it the same way. Works without flashing in UI even without
reset.
We often need to sync states between canvas and designer without sending
to server. Here added logic to synchronize whole states between frames.
Almost same as immerhin logic.
Here synchronized selectedInstanceId store.
Because we tracked the tree and selected instance, traversed and updated
the value on every change which usually lead to running same code twice
in a row.
Here I added computed index for instances which can be reused in other
parts. It is generated by traversing tree. Later will be replaced with
for loop.
This allows us to store only selected id and compute instance with
`instancesById.get(selectedInstanceId)`.
This store need to be synchronized with designer to use it instead of
selected instance data in almost all cases.
Here is migration to new props type with more safe conversion to db
format. Added two versions StoredPropsItem for and PropsItem for client
and got rid of "as" casting.
The new utility allows us to subscribe to filtered array and give the
same reference when all items are the same. This prevents unnecessary
rerenders in react because getSnapshot considers value unchanged.
This is necessary for styles and we'll need same for props.
The downside is filter and shallow compare will be called on every
change for every instance. We will see if this give us performance
issues.
## Description
Not complete, everything that needs adjustments supposed to have a todo
comment
1. Added project cards
2. Variable Inter font
3. Flex space-between
https://user-images.githubusercontent.com/52824/213592204-ffb2ee3b-b613-4561-a808-31b05889bf39.mp4
## Steps for reproduction
1. open /dashboard2
## Code Review
- [ ] hi @rpominov , 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
1. Added `@font-face`s to `designer` and `design-system` storybooks
2. Shadow tokens are now available via `theme.shadows.somthing`
3. Typography tokens are now available like this:
```ts
import { typography, styled } from '@webstudio-is/design-system';
const Something = styled("div", typography.something)
<div className={typography.something()} />
```
## Description
The first piece of the new dashboard - empty state for the projects
section.
Lots of design system values are not coming from Figma yet because Mark
is still on it.
Its not live, only visible over /dashboard2
<img width="960" alt="Screenshot 2023-01-19 at 00 33 19"
src="https://user-images.githubusercontent.com/52824/213328060-c84a18d5-3dd2-43d6-a70d-cdf8cd504108.png">
## Steps for reproduction
1. go to /dashboard2
## Code Review
- [ ] hi @rpominov , 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
For security reasons it's important to prevent canvas from having write
access to db.
Here I moved old sync logic to designer folder and got rid of one more
event in pubsub, used atom directly.
2 Issues.
- Absense of unique index caused huge update times like 100ms.
- updateMany creates implicit transaction which in prisma has very small
timeouts
## Description
1. Styling all states
<img width="353" alt="Screenshot 2023-01-14 at 15 40 54"
src="https://user-images.githubusercontent.com/52824/212480260-b37ba7c4-7fde-45c7-beba-5e79980aadd7.png">
2. Functionality overview
- Type a new input with autocomplete
- Select an existing source from a list
- Enter a new source
- Hover the source to see the menu
- Menu provides: Remove, Duplicate, Disable, Edit name
- Drag and drop to reorder
- Click to toggle select/unselect
- Double click to edit name
- Local source can only be disabled, nothing else should be possible
- Hit Backspace to delete the last Source item when you are in the input
https://user-images.githubusercontent.com/52824/212717241-eb694803-ee50-4054-bdd6-faaa6ffb197b.mp4
## Steps for reproduction
1. open stories in the designer
3. check all possible states are according to
[figma](https://www.figma.com/file/sfCE7iLS0k25qCxiifQNLE/%F0%9F%93%9A-Webstudio-Library?node-id=947%3A3701&t=GviFHhyBu6zfoxRk-4)
## Code Review
- [ ] hi @rpominov , I need you to do
- conceptual review (architecture, feature-correctness)
- check how I exposed buttonStyle from design system
- [ ] hi @taylornowotny
- please try in storybook and see if you find mistakes. Autocomplete
list/menu is not done, only the style sources.
## 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>
Extracted from
https://github.com/webstudio-is/webstudio-designer/pull/797 for upcoming
dashboard split into separate app
## Code Review
- [ ] hi @kof, 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
I've replaced all `"$something$something"` CSS variables with
`variables.something.something`. Now we have autocomplete and
type-safety: if a variable is removed or renamed w/o fixing the usage
the build will fail.
This will allow designers to change design tokens and either make sure
nothing is broken or if something is broken we'll know exactly what and
it will be easy to fix.
Discussed here:
https://discord.com/channels/955905230107738152/1061992022665334837
We no longer need to use pubsub to notify canvas to change something and
duplicate logic in designer.
Here updated syncrhonized state directly and replaced tokens utils with
generic array utils.
## Description
Cleanup unused rest endpoints
## 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-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#790
1. This PR adds `returnTo` search parameter to `/login` page _now we can
return logged user to the page he visited initially_
2. This PR enforces user to login in case of project clone
`/rest/project/clone/webstudiois`
_returnTo is in cookie because no way I found to put it into oauth state
etc parameter, and seems like its recommended way for remix auth_
## Steps for reproduction
### Test A
Visit any of your projects.
Copy pathname.
Logout.
Create URL `https://{SITE_URL}/login?returnTo={YOUR_PROJECT_PATH}`
Visit it.
After login you will be redirected to
`https://{SITE_URL}/login?returnTo={YOUR_PROJECT_PATH}`
### Test B
Delete all projects you have.
Logout.
Visit `http://{SITE_URL}/rest/project/clone/webstudiois`
You will be asked to login, and then redirected to cloned project.
## Code Review
- [ ] hi @TrySound , I need you to do
- 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-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
ref #548
New `trpc-interface` package.
It's intended to implement various TRPC services we are going to use.
But it can act as a proxy for TRPC services implemented at SAAS and at
open source.
Exposes: `createTRPCProxyServiceClient` method, and `SharedRouter` type.
`createTRPCProxyServiceClient` creates
[createTRPCProxyClient](https://trpc.io/docs/vanilla#initialize-a-trpc-client)
for the local TRCP router, or for a remote TRPC server.
`SharedRouter` type information would be used at SAAS to check that SAAS
services have the same API interface as open-source TRPC.
The current implementation has just an example call `authorize.check`,
without any logic. And used just to check that everything works.
## Steps for reproduction
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- [ ] 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-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
Login looks terrible, we need a proper design, so I just removed
unnecessary elements and made the buttons neutral
<img width="506" alt="Screenshot 2023-01-16 at 14 38 25"
src="https://user-images.githubusercontent.com/52824/212703640-af16ad13-e8b4-4a8e-aca0-ff735d0f4d79.png">
## Steps for reproduction
1. open login
## Code Review
- [ ] hi @rpominov , 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-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
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
Bogdan Chadkin
