Tasks:

• [x] Refactor render-property logic to support rendering categories in 2d space.
• [x] Layout section > select.
• [x] Layout section > Flex > icon control.
• [x] Layout section > Flex > grid control.
• [x] Layout section > Flex > dropdown.
• [x] Layout section > Flex > row/column-gap control.
• [x] add row/column gap input icons.
• [x] Layout section > Flex > icon control |=> grid control (unidirectional)
• [x] Layout section > Flex > grid control <=> icon control (bidirectional)

bidirectional: make grid control sync bi-directionally(changes to the grid should affect the icons just as changes to the icons currently affect the grid, the plumbing is already there).

Before requesting a review

• [x] if the PR is WIP - use draft mode
• [x] made a self-review
• [x] added inline comments where things may be not obvious (the "why", not "what")
• [x] what kind of review is needed?
  • [x] conceptual
  • [x] detailed
  • [x] with testing

Test cases

• [x] step by step interaction description and what is expected to happen

Before merging

• [ ] tested locally and on preview environment
• [x] updated test cases document
• [ ] added tests
• [ ] if any new env variables are added, added them to .env.example and the designer/env-check.js if mandatory

Common:

• Free text editing
• Enter or blur calls onChangeComplete
• Value prop can be of type "invalid" and render invalid mode of the input (red outline)

Unit mode:

• When entire text is a number we automatically switch to unit mode on keydown
• Unit selection on unit button click or focus+enter
• When selecting unit arrow keys are used to navigate unit items
• When selecting unit Enter key or click is used to select item
• When selecting unit Escape key is used to close list
• Key up and down on focused input increment/decrement the value
  • shift key modifier increases/decreases value by 10
  • option/alt key modifier increases/decreases value by 0.1
  • no modifier increases/decreases value by 1
• Scrub interaction

Keywords mode:

• When any character in the input is not a number we automatically switch to keywords mode on keydown
• Filterable keywords list (click on chevron or arrow down to show the list)
• Arrow keys are used to navigate keyword items
• Enter key or click is used to select item when list is open
• Escape key is used to close list
• When hovering over keywords list, onItemHighlight is called Features outside of this input (non standard):
• Typing number + unit (e.g. "12px") in unit mode will change the selected unit on blur/enter
• Evaluated math expression: "2px + 3em" (like CSS calc())

Before requesting a review

• [ ] if the PR is WIP - use draft mode
• [ ] made a self-review
• [ ] added inline comments where things may be not obvious (the "why", not "what")
• [ ] what kind of review is needed?
  • [ ] conceptual
  • [ ] detailed
  • [ ] with testing

Test cases

• [ ] step by step interaction description and what is expected to happen

Before merging

• [ ] tested locally and on preview environment (preview dev login: 5de6)
• [ ] updated test cases document
• [ ] added tests
• [ ] if any new env variables are added, added them to .env.example and the designer/env-check.js if mandatory

This issue is to discuss all details of the Navigator panel that are not already covered in Issue #131

Suggestions: Make it pinnable - As a user I want the ability to pin the navigator panel so it's always open on the left side (I have this permanently enabled in Webflow). I use the Navigator in Webflow frequently so it saves me a lot of clicks to have it always open. Having the Navigator always pinned is like having the layers panel always open in figma.

There's also the issue of naming elements. In Figma you can name layers directly (and most users don't). In Webflow the element name in the navigator is the name of the class. What do you think our approach should be here?

Implementation of new spacing UI. Closes #421

Not in this PR

• https://github.com/webstudio-is/webstudio-designer/issues/665
• https://github.com/webstudio-is/webstudio-designer/issues/666
• https://github.com/webstudio-is/webstudio-designer/issues/667
• https://github.com/webstudio-is/webstudio-designer/issues/668

Code Review

(Please ignore behaviour when you hit esc in input, will fix it here after we merge https://github.com/webstudio-is/webstudio-designer/pull/661)

• [ ] hi @kof, I need you to do
  • conceptual review (architecture, feature-correctness)
  • test it on preview
• [ ] hi @taylornowotny, I need you to do
  • test it on preview (everything should work unless listed in "Not in this PR" above)
• [ ] hi @istarkov, I need you to do
  • have a look at code where CSSInputValue is used or changed (just in case)
  • do a detailed review if you have time

Before requesting a review

• [x] if the PR is WIP - use draft mode
• [x] made a self-review
• [x] added inline comments where things may be not obvious (the "why", not "what")
• [ ] what kind of review is needed?
  • [ ] conceptual
  • [ ] detailed
  • [ ] with testing

Test cases

• [ ] step by step interaction description and what is expected to happen

Before merging

• [ ] tested locally and on preview environment (preview dev login: 5de6)
• [ ] updated test cases document
• [ ] added tests
• [ ] if any new env variables are added, added them to .env.example and the designer/env-check.js if mandatory

• [x] Add placeholders to fields "/home" for Path, "My awesome site" for Title etc.
• [x] When opening page settings the Name field should gain focus
• [x] When creating a new page, Name should be pre-filled with some value, and text in Name should be selected so it's easy to delete the pre-filled value
• [x] When creating a new page, Path and Title should be generated automatically from Name, unless user have edited them
• [x] The close button tooltip should be aligned normally (centred like other tooltips)
• [x] Better design for the "Create" button
• [x] Better settings panel animation ( #376 )
• [x] Home page should not have a path field

Use cases

• As a Webstudio hosted service, I need a scalable and cheap alternative to MongoDB.
• As an OSS contributor to Webstudio, I want an easy way to install the Designer and work with it locally
• As a Webstudio user I want run webstudio locally (offline in some future).

Options

• SQLite for a local app
• supabase (PostgreSQL) for hosted service, deno workers in the same cluster would be also 🔥
• planetscale (MySQL)
• D1 cloudflare
• Others?

Todo

• [ ] weigh in pros and cons of each database
• [ ] do we care if its MySQL vs PostgreSQL when using prisma?
• [ ] how hard is it to stay compatible with any of them, including SQLite?
• [ ] who offers the best scalable pricing?
• [ ] who offers hosting at the edge?
• [ ] who works with workers well? Problem with workers is they will create a lot of socket connections. Postgress has pgbouncer what is planetscale using for MySQL to scale it?

https://github.com/webstudio-is/webstudio-designer/issues/56

Instance outline is now rendered in the parent document and position/size is detected from canvas iframe.

This means it can't be broken by doing something unexpected on the canvas. It now also finds the best possible placement on top, inside or at the bottom of the instance, depending on the position and size of the instance.

See https://nodejs.org/api/corepack.html

Corepack is a way to setup specific yarn/pnpm version on the fly. Builtin with Node 16.9+

Requires to run corepack enable

Replaces https://github.com/webstudio-is/webstudio-designer/pull/370

Keeping track of progress:

• [x] Create user and login with GitHub
• [x] Create pretty login page
• [x] Create logout
• [ ] Login with Google
• [x] Block pages to unauthenticated users
• [x] Transfer old projects

Related #39

Ref https://github.com/webstudio-is/webstudio-designer/issues/579

Looks like current version of radix-ui select do not handle escape press but gives us event. Hard to say if this is fixed as they have poor versioning and no way to see previous version.

So in the fix I removed open and onOpenChange props from select in design system and used them to react on escape keydown event.

On unit select there is already external open state which I used the same way.

Before requesting a review

• [ ] if the PR is WIP - use draft mode
• [ ] made a self-review
• [ ] added inline comments where things may be not obvious (the "why", not "what")
• [ ] what kind of review is needed?
  • [ ] conceptual
  • [x] detailed
  • [x] with testing

Test cases

• [ ] step by step interaction description and what is expected to happen

Before merging

• [ ] tested locally and on preview environment (preview dev login: 5de6)
• [ ] updated test cases document
• [ ] added tests
• [ ] if any new env variables are added, added them to .env.example and the designer/env-check.js if mandatory

1. Add a Link component
2. Double-click to start editing the text
3. Delete all text
4. Start entering new text

After you enter the first letter, it doesn't allow you to enter the rest

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.

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 document
• [ ] added tests
• [ ] if any new env variables are added, added them to .env.example and the designer/env-check.js if mandatory

Per this discussion: https://discord.com/channels/955905230107738152/990718051785769050/1059935300249456690

We've decided to rename the Spacing section to "Space" to be consistent with the other section titles.

Please change the name of the component and any styles from Spacing to "Space". This has already been done in the design.

Draft Example of implementing access rights using prisma, and acl list view

select id from "User" where email='[email protected]';


-- Create 2 workspaces

INSERT INTO "public"."Workspace"("id","name","workspaceId","createdById")
VALUES
(E'91b71e9f-af2b-4c97-a5c8-a8ce5f824f1f',E'Main',E'91b71e9f-af2b-4c97-a5c8-a8ce5f824f1f',(select id from "User" where email='[email protected]'));


INSERT INTO "public"."Workspace"("id","name","workspaceId","createdById")
VALUES
(E'22271e9f-af2b-4c97-a5c8-a8ce5f824f1f',E'Secondary',E'22271e9f-af2b-4c97-a5c8-a8ce5f824f1f',(select id from "User" where email='[email protected]'));


-- Move 3 Projects into main workspace and all others into "Secondary"

update "Project" set 
"workspaceId" = '22271e9f-af2b-4c97-a5c8-a8ce5f824f1f' WHERE id in 
(select id from "Project" where "userId" in (select id from "User" where email='[email protected]') order by id);

update "Project" set 
"workspaceId" = '91b71e9f-af2b-4c97-a5c8-a8ce5f824f1f' WHERE id in 
(select id from "Project" where "userId" in (select id from "User" where email='[email protected]') order by id limit 3);

select * from "Project" where "workspaceId" = '91b71e9f-af2b-4c97-a5c8-a8ce5f824f1f';


-- Add users 
INSERT INTO "public"."User"("id","createdAt","email","image","provider","username")
VALUES (E'00011111-f7ca-472d-8872-c2119b9eb861',E'2022-09-20 07:20:11.197',E'[email protected]',E'blbla',E'google',E'Ava Ava');

INSERT INTO "public"."User"("id","createdAt","email","image","provider","username")
VALUES (E'00022222-f7ca-472d-8872-c2119b9eb861',E'2022-09-20 07:20:11.197',E'[email protected]',E'blbla',E'google',E'Biba Biba');

INSERT INTO "public"."User"("id","createdAt","email","image","provider","username")
VALUES (E'00033333-f7ca-472d-8872-c2119b9eb861',E'2022-09-20 07:20:11.197',E'[email protected]',E'blbla',E'google',E'Cena Cena');

INSERT INTO "public"."User"("id","createdAt","email","image","provider","username")
VALUES (E'00044444-f7ca-472d-8872-c2119b9eb861',E'2022-09-20 07:20:11.197',E'[email protected]',E'blbla',E'google',E'Deca Deca');

-- Add groups

INSERT INTO "public"."Group"("id","name","createdById","workspaceId")
VALUES
(E'dc8661be-1aa3-4d07-a038-108f0ac1e0ed',E'main-ws-editors',E'3e4c13e7-adfc-47d4-be8e-b29c9f1bb9e7',E'91b71e9f-af2b-4c97-a5c8-a8ce5f824f1f');


INSERT INTO "public"."Group"("id","name","createdById","workspaceId")
VALUES
(E'82dd2c43-b1a2-4d96-a250-541aeac1d4bd',E'main-ws-readers',E'3e4c13e7-adfc-47d4-be8e-b29c9f1bb9e7',E'91b71e9f-af2b-4c97-a5c8-a8ce5f824f1f');


INSERT INTO "public"."Group"("id","name","createdById","workspaceId")
VALUES
(E'7ee80f33-f7cf-4c16-887d-b9700ed608ed',E'project-ivan-readers',E'3e4c13e7-adfc-47d4-be8e-b29c9f1bb9e7',E'91b71e9f-af2b-4c97-a5c8-a8ce5f824f1f');



-- Add users to groups
-- Add Ava to main-ws-editors
INSERT INTO "public"."UserGroup"("userId", "groupId") VALUES('00011111-f7ca-472d-8872-c2119b9eb861', 'dc8661be-1aa3-4d07-a038-108f0ac1e0ed') RETURNING "userId", "groupId";
-- Add Ava to main-ws-readers
INSERT INTO "public"."UserGroup"("userId", "groupId") VALUES('00011111-f7ca-472d-8872-c2119b9eb861', '82dd2c43-b1a2-4d96-a250-541aeac1d4bd') RETURNING "userId", "groupId";
-- Add Biba to main-ws-readers 
INSERT INTO "public"."UserGroup"("userId", "groupId") VALUES('00022222-f7ca-472d-8872-c2119b9eb861', '82dd2c43-b1a2-4d96-a250-541aeac1d4bd') RETURNING "userId", "groupId";
-- Add Ava to project-ivan-readers
INSERT INTO "public"."UserGroup"("userId", "groupId") VALUES('00011111-f7ca-472d-8872-c2119b9eb861', '7ee80f33-f7cf-4c16-887d-b9700ed608ed') RETURNING "userId", "groupId";


-- Now lets add GROUP permissions.

-- Add main-ws-readers READ Main
-- Add main-ws-editors WRITE Main
INSERT INTO "public"."WorkspaceGroupPermission"("access", "workspaceId", "groupId", "createdById") VALUES('READ', '91b71e9f-af2b-4c97-a5c8-a8ce5f824f1f', '82dd2c43-b1a2-4d96-a250-541aeac1d4bd', '3e4c13e7-adfc-47d4-be8e-b29c9f1bb9e7') RETURNING "access", "workspaceId", "groupId", "createdById";
INSERT INTO "public"."WorkspaceGroupPermission"("access", "workspaceId", "groupId", "createdById") VALUES('WRITE', '91b71e9f-af2b-4c97-a5c8-a8ce5f824f1f', 'dc8661be-1aa3-4d07-a038-108f0ac1e0ed', '3e4c13e7-adfc-47d4-be8e-b29c9f1bb9e7') RETURNING "access", "workspaceId", "groupId", "createdById";

-- Add project-ivan-readers to ivan project
INSERT INTO "public"."ProjectGroupPermission"("access","projectId","groupId","createdById")
VALUES
(E'READ',E'56fa4b91-2fdb-4c78-8040-a243e6f43039',E'7ee80f33-f7cf-4c16-887d-b9700ed608ed',E'3e4c13e7-adfc-47d4-be8e-b29c9f1bb9e7');

-- Allow Cena comment workspace Main
INSERT INTO "public"."WorkspaceUserPermission"("access", "workspaceId", "userId", "createdById") VALUES('COMMENT', '91b71e9f-af2b-4c97-a5c8-a8ce5f824f1f', '00033333-f7ca-472d-8872-c2119b9eb861', '3e4c13e7-adfc-47d4-be8e-b29c9f1bb9e7') RETURNING "access", "workspaceId", "userId", "createdById";
-- Allow Biba Write to Ivan Project
INSERT INTO "public"."ProjectUserPermission"("access", "projectId", "userId", "createdById") VALUES('WRITE', '56fa4b91-2fdb-4c78-8040-a243e6f43039', '00022222-f7ca-472d-8872-c2119b9eb861', '3e4c13e7-adfc-47d4-be8e-b29c9f1bb9e7') RETURNING "access", "projectId", "userId", "createdById";

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 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 document
• [ ] added tests
• [ ] if any new env variables are added, added them to .env.example and the designer/env-check.js if mandatory

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.

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 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 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
5. Mouse navigation should still work when control is focused

Code Review

• [ ] hi @kof, I need you to do
  • conceptual review (architecture, feature-correctness)
  • 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

• [ ] tested locally and on preview environment (preview dev login: 5de6)
• [ ] updated test cases document
• [ ] added tests
• [ ] if any new env variables are added, added them to .env.example and the designer/env-check.js if mandatory