## 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-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
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-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
Ref https://github.com/webstudio-is/webstudio-designer/issues/807
Styles are resolved based on style sources of every instance. Here
finally migrated whole logic to new variant.
For now the only local style source is used as default for style
updates. In the next PR will add support for tokens.
Ref https://github.com/webstudio-is/webstudio-designer/issues/807
Here added style sources and style source selections stores, added
updates along styles and covered with tests. Patch utilities for rest
endpoint are not used to avoid collision with temporary logic in styles.
Next step will be integration styles with style sources on client.
## 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-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. New `Text` component, existing is deprecated. Closes#825
2. Deprecated `Paragraph` component (the replacement is `<Text as="p">`)
3. Added `textVariants` that can be used like this `css({
...textVariants.regular })`
4. Removed `typography`, now `textVariants` or `textStyles` can be used
instead
5. Added `theme.fontSize`, `theme.lineHeight`, `theme.fontWeight`,
`theme.letterSpacing` that use values from Figma
6. Deprecated existing `theme.fontSize`, `theme.lineHeight`
7. Installed `Roboto Mono` font
## Description
1. Rename and delete dialogs + cleanup
## Steps for reproduction
1. click project item menu to rename
2. click project item menu to delete
## 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-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
Copy paste of instances was implemented closly coupled to our schema.
Here I make I implement it with simpler interface without dependency on
types. Type and version are instead passed as configuration.
Next step will be decoupling instance copy paste from react and
simplifying data management with nanostores.
## Description
1. What is this PR about (link the issue and add a short description)
Share list uses Collapsible instead of Framer motion
## Steps for reproduction
Click Share button, see expand of list items
## 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
ref #548
Add shared links with builder/viewer permissions.
`editor` permission is now disabled as we don't know a simple way to
allow editing images and text only cc @TrySound would need your opinion
on this.
createTrpcRemixProxy now wraps input in `JSON.stringify` and unwraps
before the TRPC call. Otherwise, all params are FormData string entries
and may cause errors.
createTrpcRemixProxy useQuery/useMutation now returns Remix useFetcher
state parameter.
**`patch` auth call added, we must do any Auth mutate operations in a
single call, otherwise if some call failed we are in troubles.**
Example on token relation update.
Remove viewer relation.
Add editor relation. <- If the call failed here user just loses all
permissions.
In case of patch both operations are completed in a single transaction -
(delete+insert)
## Steps for reproduction
Having migrations works locally only with
`isFeatureEnabled("share2")` flag.
Click the share button then add/rename/update/copy share links.
The previous Share button is removed.
**TODO In Next PR:**
Different UI for builder and viewer links i.e.
[this](https://github.com/webstudio-is/webstudio-designer/issues/548#issuecomment-1406947059).
## 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)
## 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
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `designer/env-check.js` if mandatory
Replaced manual array manipulations with array utils and reused styles
index to compute style info.
This will let to do less work when switch to build styles.
## Description
1. This PR implements a create project dialog
<img width="579" alt="Screenshot 2023-01-31 at 13 17 45"
src="https://user-images.githubusercontent.com/52824/215771142-7694a048-ba54-4d6e-94bf-befbdc94268c.png">
## Steps for reproduction
1. go to /dashboard
2. click create project
## 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-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
1. What is this PR about (link the issue and add a short description)
Seems like this killed my dev expierence
https://github.com/remix-run/remix/issues/3123
Fixed in 1.12 gonna try, as otherwise I have 100% cpu load, and need to
stop `pnpm dev` before any changes
## 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
Fixes https://github.com/webstudio-is/webstudio-designer/issues/863
## Description
Icon used is temporary, until we have a better one. We can merge this
because we only show it when offline, so most people won't see it
anyways.
- [x] check if the sync was successful, if not - don't remove it from
the queue (or put it back) . Right now we are optimistically removing
from the queue when syncing
- [x] after 3 unsuccessful attempts to sync - show the disconnected icon
- [x] add a tooltip (like in figma) that explains that we will sync as
soon as we are online again
- [x] use `addEventListener('offline'` event listener to explain in text
of the tooltip that internet is not available, otherwise assume by
default server is not available.
- [x] When there are unsaved changes and user tries to close the window
- use onbeforeunload to tell them about it and that they will loose the
unsynced changes otherwise (until we add offline capability to save
those and sync them once online)
https://user-images.githubusercontent.com/52824/215371856-2d76a364-3918-42b6-a4eb-9693c54d5690.mp4
## Steps for reproduction
1. go to chrome network and set connection to offline or go to the wifi
and turn it off (if you are not locally running the server)
## 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
## Description
```bash
pnpm up -r -L '@remix-run/*'
pnpm up -r -L 'react-router-dom'
```
`react-router-dom` removed.
## 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
Add authorization layer to a project.
1. It introduces AppContext type inside `trpc-interface` project. As
this type can be shared across all projects.
2. `createContext(request):AppContext` is placed inside the designer app
it creates context and passes all params known on `remix/server` side
into authorization context.
3. Depending on env variables or SAAS trpc can be used or local so
`authorizationRouter` is a small wrapper around Zanzibar Ory Keto at
SaaS, and implements some subset of ORY operations here.
4. Checks are done on `db` level scripts.
5. On the saas side trpc wrapper around ory is already implemented and
can be checked after this will be merged.
Not everything is checked right now. Should be added later with some
caching at least during single request.
Also not this for this PR.
UI should be different for users with read/edit permissions. Also non
owners can't share links etc
TODO:
- [ ] - Migration - preview token creation for existing projects.
OSS Permission emulates following ORY schema, but without implementing
adding viewers editors etc.
```ts
/**
* !!! THIS IS NOT typescript code !!!
* This is Ory permission language (small subset of typescript)
* https://www.ory.sh/docs/keto/guides/userset-rewrites
* https://www.ory.sh/docs/keto/reference/ory-permission-language
*
* See .prettierrc semicolons are disabled, as it breaks ory language parser (fixed but not in cloud)
**/
import { Namespace, SubjectSet, Context } from "@ory/keto-namespace-types"
class User implements Namespace {}
class Token implements Namespace {}
class Email implements Namespace {
related: {
owner: User[]
}
}
class Project implements Namespace {
related: {
owner: User[]
editors: (Token | User | SubjectSet<Email, "owner">)[]
viewers: (Token | User | SubjectSet<Email, "owner">)[]
}
/**
* Relation rewrites:
* For example if User:AliceUUID is owner of Project:AliceProjectUUID, then
* we return Allowed for all 3 checks
* `keto check User:"AliceUUID" own Project "AliceProjectUUID"`
* `keto check User:"AliceUUID" edit Project "AliceProjectUUID"`
* `keto check User:"AliceUUID" view Project "AliceProjectUUID"`
* But if User:"BobUUID" is viewers of Project:AliceProjectUUID, then
* `keto check User:"BobUUID" view Project "AliceProjectUUID"` returns Allowed
*
* `keto check User:"BobUUID" edit Project "AliceProjectUUID"` returns Denied
* `keto check User:"BobUUID" own Project "AliceProjectUUID"` returns Denied
**/
permits = {
view: (ctx: Context): boolean =>
this.related.viewers.includes(ctx.subject) ||
this.related.editors.includes(ctx.subject) ||
this.related.owner.includes(ctx.subject),
edit: (ctx: Context): boolean =>
this.related.editors.includes(ctx.subject) ||
this.related.owner.includes(ctx.subject),
own: (ctx: Context): boolean => this.related.owner.includes(ctx.subject),
}
}
```
## Steps for reproduction
1. click button
6. expect xyz
## 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
- [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
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `designer/env-check.js` if mandatory
Ref https://github.com/webstudio-is/webstudio-designer/issues/755
react-hotkeys by default prevents reacting when native elements are
focused. Here I globally enabled input, select and textarea for both
designer and canvas to catch undo/redo while focused.
## Description
1. With all the new ideas and directions we don't need that initial
implementation
## 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
Closes https://github.com/webstudio-is/webstudio-designer/issues/736
## Description
Before that you would have to tab through every knob from inside the
flex grid control to get to the next element. For now we are making it
just tabbable as a single thing. Later we can add arrow keys.
Also aligned colors with figma.
## Steps for reproduction
1. Make some element to flex container
2. Focus search on style panel
3. start tabbing, make sure you can tab through all controls in the flex
UI, like you would expect
## 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
Ref https://github.com/webstudio-is/webstudio-designer/issues/696
We use store to render props in sdk components. Though it's easier to
maintain actual store in designer and provide necessary data to sdk.
Here I added utilities to inject computed store on module level. Now we
can get rid of legacy store and rewrite rest api to use normalized
props.
## Description
Share UI implemented as a story
https://user-images.githubusercontent.com/52824/215069285-0ee7b214-8218-4ead-a468-07a22f65e433.mp4
## Steps for reproduction
1. open stories in designer
2. share project section
## Code Review
- [ ] hi @rpominov , I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it on preview
- [ ] hi @istarkov, please check if the interface I made fits the data
layer you built
## 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
We want to decouple schema stored in db from sdk which generates a list
of components. Components will be added dynamically later so better
avoid component name enum.
## Description
Styling in dashboard card
## Steps for reproduction
1. go to /dashboard
## 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
## Description
Styling tweaks
## Steps for reproduction
1. open /dashboard
## 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
This is not a complete dashboard implementation, but it can now list,
create and open projects, so it can be deployed to production and
replace the old version while we work on the remaining features.
In addition implemented: renaming, duplicating, deletion (mark as
deleted), keyboard accessibility
## Steps for reproduction
1. click on card to open the project in the designer
1. click on a link at the card bottom if project is published to open
published version
1. click on new project and create new project
2. click on rename over menu to rename
3. click on duplicate
4. click on delete
5. Use tab to switch between projects, use arrow keys to switch between
focusable elements inside the project card
## Code Review
- [ ] hi @rpominov , I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it on preview
- [ ] hi @istarkov, we need to discuss how we want to build the future
APIs with TRPC and probably rewrite what I did here right away
## 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: istarkov <istarkov@gmail.com>
After discussing with @kof figured we do not need to store preset styles
in db as after sdk upgrade components may still break.
Sdk versioning along with its hardcoded values will solve the problem
better.
Closes#798.
I've implemented "Menu" and "Menu item" from Figma and updated our
components that use menus.
TODO at some later point:
- Component: "Menu Item Large"
- Type of "Menu" component: "Dropdown w/large items"
- Type of "Menu" component: "Context menu"
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.
Ivan Starkov
