From 052eb889ee90cb8fcbcc533a892aaf42dd4617c3 Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Sat, 9 Jul 2022 13:43:39 +0200 Subject: [PATCH 01/12] removes progress logs from the output --- apps/designer/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/designer/package.json b/apps/designer/package.json index 8614ff88a7..fb9c8271c3 100644 --- a/apps/designer/package.json +++ b/apps/designer/package.json @@ -16,7 +16,7 @@ "watch:remix": "remix dev", "watch:sdk": "relative-deps && relative-deps watch", "prettier": "prettier \"*.{js,md,json,ts}\" \"{docs,app}/**/*.{js,md,json,ts}\"", - "storybook:run": "start-storybook -p 6006", + "storybook:run": "start-storybook -p 6006 --quiet", "storybook:build": "build-storybook" }, "dependencies": { From 9fe35b18b5c956f12e79f040721d36044158de05 Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Sat, 9 Jul 2022 13:45:03 +0200 Subject: [PATCH 02/12] removing builder options removes a lot of noice from the logs to be investigated how to keep the options and remove the logs --- apps/designer/.storybook/main.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/apps/designer/.storybook/main.js b/apps/designer/.storybook/main.js index 4991efd789..e6bd15742f 100644 --- a/apps/designer/.storybook/main.js +++ b/apps/designer/.storybook/main.js @@ -10,15 +10,15 @@ module.exports = { features: { storyStoreV7: true, }, - core: { - builder: { - name: "webpack5", - options: { - lazyCompilation: true, - fsCache: true, - }, - }, - }, + //core: { + // builder: { + // name: "webpack5", + // options: { + // lazyCompilation: true, + // fsCache: true, + // }, + // }, + //}, framework: "@storybook/react", webpackFinal: async (config) => { config.resolve.alias["~"] = path.resolve(__dirname, "../app"); From ba28d058cd5cf0feac3248bd61f020950e11c1d5 Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Sun, 10 Jul 2022 12:14:57 +0200 Subject: [PATCH 03/12] Revert "removes progress logs from the output" This reverts commit 052eb889ee90cb8fcbcc533a892aaf42dd4617c3. --- apps/designer/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/designer/package.json b/apps/designer/package.json index fb9c8271c3..8614ff88a7 100644 --- a/apps/designer/package.json +++ b/apps/designer/package.json @@ -16,7 +16,7 @@ "watch:remix": "remix dev", "watch:sdk": "relative-deps && relative-deps watch", "prettier": "prettier \"*.{js,md,json,ts}\" \"{docs,app}/**/*.{js,md,json,ts}\"", - "storybook:run": "start-storybook -p 6006 --quiet", + "storybook:run": "start-storybook -p 6006", "storybook:build": "build-storybook" }, "dependencies": { From 36d792f0c473dc76a2eb8912e43dbde98a8742ce Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Sun, 10 Jul 2022 12:15:01 +0200 Subject: [PATCH 04/12] Revert "removing builder options removes a lot of noice from the logs" This reverts commit 9fe35b18b5c956f12e79f040721d36044158de05. --- apps/designer/.storybook/main.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/apps/designer/.storybook/main.js b/apps/designer/.storybook/main.js index e6bd15742f..4991efd789 100644 --- a/apps/designer/.storybook/main.js +++ b/apps/designer/.storybook/main.js @@ -10,15 +10,15 @@ module.exports = { features: { storyStoreV7: true, }, - //core: { - // builder: { - // name: "webpack5", - // options: { - // lazyCompilation: true, - // fsCache: true, - // }, - // }, - //}, + core: { + builder: { + name: "webpack5", + options: { + lazyCompilation: true, + fsCache: true, + }, + }, + }, framework: "@storybook/react", webpackFinal: async (config) => { config.resolve.alias["~"] = path.resolve(__dirname, "../app"); From 359cb3190465db72011709c629574a0165c28bcc Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Sun, 10 Jul 2022 12:24:58 +0200 Subject: [PATCH 05/12] decouple storybook from yarn dev --- apps/designer/package.json | 3 +- package.json | 6 +- turbo.json | 3 + yarn.lock | 139 ++----------------------------------- 4 files changed, 11 insertions(+), 140 deletions(-) diff --git a/apps/designer/package.json b/apps/designer/package.json index 8614ff88a7..c37cd69faf 100644 --- a/apps/designer/package.json +++ b/apps/designer/package.json @@ -4,7 +4,7 @@ "description": "Webstudio Designer UI as a service", "scripts": { "build": "remix build", - "dev": "npm-run-all --parallel storybook:run watch:remix", + "dev": "remix dev", "start": "remix-serve build", "typecheck": "tsc -b", "lint": "eslint . --ext .ts,.tsx --max-warnings 0", @@ -13,7 +13,6 @@ "checks": "yarn lint && yarn typecheck && yarn prettier --check && yarn test", "migrate": "prisma migrate dev", "generate": "prisma generate", - "watch:remix": "remix dev", "watch:sdk": "relative-deps && relative-deps watch", "prettier": "prettier \"*.{js,md,json,ts}\" \"{docs,app}/**/*.{js,md,json,ts}\"", "storybook:run": "start-storybook -p 6006", diff --git a/package.json b/package.json index 8c23c58662..b4d25cef0b 100644 --- a/package.json +++ b/package.json @@ -17,15 +17,15 @@ "checks": "turbo run checks", "dev": "turbo run dev --parallel", "format": "prettier --write \"**/*.{ts,tsx,md}\"", - "prepare": "husky install" + "prepare": "husky install", + "storybook": "turbo run storybook:run" }, "devDependencies": { "eslint-config-custom": "*", "husky": ">=6", "lint-staged": "^13.0.2", "prettier": "latest", - "turbo": "latest", - "yarn-run-all": "^3.1.1" + "turbo": "latest" }, "engines": { "npm": ">=7.0.0", diff --git a/turbo.json b/turbo.json index 9334b29164..7c9bd87ce1 100644 --- a/turbo.json +++ b/turbo.json @@ -9,6 +9,9 @@ }, "dev": { "cache": false + }, + "storybook:run": { + "cache": false } } } diff --git a/yarn.lock b/yarn.lock index 169aed75fb..3483e3b356 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4803,11 +4803,6 @@ ansi-regex@^6.0.1: resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-6.0.1.tgz#3183e38fae9a65d7cb5e53945cd5897d0260a06a" integrity sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA== -ansi-styles@^2.2.1: - version "2.2.1" - resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe" - integrity sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA== - ansi-styles@^3.2.1: version "3.2.1" resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d" @@ -5814,17 +5809,6 @@ ccount@^1.0.0: resolved "https://registry.yarnpkg.com/ccount/-/ccount-1.1.0.tgz#246687debb6014735131be8abab2d93898f8d043" integrity sha512-vlNK021QdI7PNeiUh/lKkC/mNHHfV0m/Ad5JoI0TYtlBnJAslM/JIkm/tGC88bkLIwO6OQ5uV6ztS6kVAtCDlg== -chalk@^1.1.3: - version "1.1.3" - resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98" - integrity sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A== - dependencies: - ansi-styles "^2.2.1" - escape-string-regexp "^1.0.2" - has-ansi "^2.0.0" - strip-ansi "^3.0.0" - supports-color "^2.0.0" - chalk@^2.0.0, chalk@^2.4.1: version "2.4.2" resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424" @@ -6454,14 +6438,6 @@ create-hmac@^1.1.0, create-hmac@^1.1.4, create-hmac@^1.1.7: safe-buffer "^5.0.1" sha.js "^2.4.8" -cross-spawn@^4.0.0: - version "4.0.2" - resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-4.0.2.tgz#7b9247621c23adfdd3856004a823cbe397424d41" - integrity sha512-yAXz/pA1tD8Gtg2S98Ekf/sewp3Lcp3YoFKJ4Hkp5h5yLWnKVTDU0kwjKJ8NDCYcfTLfyGkzTikst+jWypT1iA== - dependencies: - lru-cache "^4.0.1" - which "^1.2.9" - cross-spawn@^6.0.0, cross-spawn@^6.0.5: version "6.0.5" resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4" @@ -6993,11 +6969,6 @@ dotenv@^8.0.0: resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.6.0.tgz#061af664d19f7f4d8fc6e4ff9b584ce237adcb8b" integrity sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g== -duplexer@~0.1.1: - version "0.1.2" - resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6" - integrity sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg== - duplexify@^3.4.2, duplexify@^3.5.0, duplexify@^3.6.0: version "3.7.1" resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-3.7.1.tgz#2a4df5317f6ccfd91f86d6fd25d8d8a103b88309" @@ -7622,7 +7593,7 @@ escape-html@~1.0.3: resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988" integrity sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow== -escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5: +escape-string-regexp@^1.0.5: version "1.0.5" resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4" integrity sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg== @@ -7898,19 +7869,6 @@ etag@~1.8.1: resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887" integrity sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg== -event-stream@=3.3.4: - version "3.3.4" - resolved "https://registry.yarnpkg.com/event-stream/-/event-stream-3.3.4.tgz#4ab4c9a0f5a54db9338b4c34d86bfce8f4b35571" - integrity sha512-QHpkERcGsR0T7Qm3HNJSyXKEEj8AHNxkY3PK8TS2KJvQ7NiSHe3DDpwVKKtoYprL/AreyzFBeIkBIWChAqn60g== - dependencies: - duplexer "~0.1.1" - from "~0" - map-stream "~0.1.0" - pause-stream "0.0.11" - split "0.3" - stream-combiner "~0.0.4" - through "~2.3.1" - event-target-shim@^5.0.0: version "5.0.1" resolved "https://registry.yarnpkg.com/event-target-shim/-/event-target-shim-5.0.1.tgz#5d4d3ebdf9583d63a5333ce2deb7480ab2b05789" @@ -8483,11 +8441,6 @@ from2@^2.1.0: inherits "^2.0.1" readable-stream "^2.0.0" -from@~0: - version "0.1.7" - resolved "https://registry.yarnpkg.com/from/-/from-0.1.7.tgz#83c60afc58b9c56997007ed1a768b3ab303a44fe" - integrity sha512-twe20eF1OxVxp/ML/kq2p1uc6KvFK/+vs8WjEbeKmV2He22MKm7YF2ANIt+EOqhJ5L3K/SuuPhk0hWQDjOM23g== - fs-constants@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad" @@ -8865,13 +8818,6 @@ handlebars@^4.7.7: optionalDependencies: uglify-js "^3.1.4" -has-ansi@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91" - integrity sha512-C8vBJ8DwUCx19vhm7urhTuUsr4/IyP6l4VzNQDv+ryHQObW3TTTp9yB68WpYgRe2bbaGuZ/se74IqFeVnMnLZg== - dependencies: - ansi-regex "^2.0.0" - has-bigints@^1.0.1, has-bigints@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.2.tgz#0871bd3e3d51626f6ca0966668ba35d5602d6eaa" @@ -10964,14 +10910,6 @@ lowlight@^1.17.0: fault "^1.0.0" highlight.js "~10.7.0" -lru-cache@^4.0.1: - version "4.1.5" - resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd" - integrity sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g== - dependencies: - pseudomap "^1.0.2" - yallist "^2.1.2" - lru-cache@^5.1.1: version "5.1.1" resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920" @@ -11052,11 +10990,6 @@ map-or-similar@^1.5.0: resolved "https://registry.yarnpkg.com/map-or-similar/-/map-or-similar-1.5.0.tgz#6de2653174adfb5d9edc33c69d3e92a1b76faf08" integrity sha512-0aF7ZmVon1igznGI4VS30yugpduQW3y3GkcgGJOp7d8x8QrizhigUxjI/m2UojsXXto+jLAH3KSz+xOJTiORjg== -map-stream@~0.1.0: - version "0.1.0" - resolved "https://registry.yarnpkg.com/map-stream/-/map-stream-0.1.0.tgz#e56aa94c4c8055a16404a0674b78f215f7c8e194" - integrity sha512-CkYQrPYZfWnu/DAmVCpTSX/xHpKZ80eKh2lAkyA6AJTef6bW+6JpbQZN5rofum7da+SyN1bi5ctTm+lTfcCW3g== - map-visit@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/map-visit/-/map-visit-1.0.0.tgz#ecdca8f13144e660f1b5bd41f12f3479d98dfb8f" @@ -12655,13 +12588,6 @@ path-type@^4.0.0: resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b" integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw== -pause-stream@0.0.11: - version "0.0.11" - resolved "https://registry.yarnpkg.com/pause-stream/-/pause-stream-0.0.11.tgz#fe5a34b0cbce12b5aa6a2b403ee2e73b602f1445" - integrity sha512-e3FBlXLmN/D1S+zHzanP4E/4Z60oFAa3O051qt1pxa7DEJWKAyil6upYVXCWadEnuoqa4Pkc9oUx9zsxYeRv8A== - dependencies: - through "~2.3" - pbkdf2@^3.0.3: version "3.1.2" resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.1.2.tgz#dd822aa0887580e52f1a039dc3eda108efae3075" @@ -12725,7 +12651,7 @@ pify@^4.0.1: resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231" integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g== -pinkie-promise@^2.0.0, pinkie-promise@^2.0.1: +pinkie-promise@^2.0.0: version "2.0.1" resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa" integrity sha512-0Gni6D4UcLTbv9c57DfxDGdr41XfgUjqWZu492f0cIGr16zDU06BWP/RAEvOuo7CQ0CNjHaLlM59YJJFm3NWlw== @@ -13068,18 +12994,6 @@ prr@~1.0.1: resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476" integrity sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw== -ps-tree@^1.0.1: - version "1.2.0" - resolved "https://registry.yarnpkg.com/ps-tree/-/ps-tree-1.2.0.tgz#5e7425b89508736cdd4f2224d028f7bb3f722ebd" - integrity sha512-0VnamPPYHl4uaU/nSFeZZpR21QAWRz+sRv4iW9+v/GS/J5U5iZB5BNN6J0RMoOvdx2gWM2+ZFMIm58q24e4UYA== - dependencies: - event-stream "=3.3.4" - -pseudomap@^1.0.2: - version "1.0.2" - resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3" - integrity sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ== - psl@^1.1.33: version "1.9.0" resolved "https://registry.yarnpkg.com/psl/-/psl-1.9.0.tgz#d0df2a137f00794565fcaf3b2c00cd09f8d5a5a7" @@ -13511,7 +13425,7 @@ read-pkg-up@^7.0.1: read-pkg "^5.2.0" type-fest "^0.8.1" -read-pkg@^1.0.0, read-pkg@^1.1.0: +read-pkg@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-1.1.0.tgz#f5ffaa5ecd29cb31c0474bca7d756b6bb29e3f28" integrity sha512-7BGwRHqt4s/uVbuyoeejRn4YmFnYZiFl4AuaeXHlgZf3sONF0SOGlxs2Pw8g6hCKupo08RafIO5YXFNOKTfwsQ== @@ -14386,11 +14300,6 @@ shebang-regex@^3.0.0: resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172" integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A== -shell-quote@^1.6.1: - version "1.7.3" - resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.7.3.tgz#aa40edac170445b9a431e17bb62c0b881b9c4123" - integrity sha512-Vpfqwm4EnqGdlsBFNmHhxhElJYrdfcxPThu+ryKS5J8L/fhAwLazFZtq+S+TWZ9ANj2piSQLGj6NQg+lKPmxrw== - side-channel@^1.0.4: version "1.0.4" resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf" @@ -14600,13 +14509,6 @@ split-string@^3.0.1, split-string@^3.0.2: dependencies: extend-shallow "^3.0.0" -split@0.3: - version "0.3.3" - resolved "https://registry.yarnpkg.com/split/-/split-0.3.3.tgz#cd0eea5e63a211dfff7eb0f091c4133e2d0dd28f" - integrity sha512-wD2AeVmxXRBoX44wAycgjVpMhvbwdI2aZjCkvfNcH1YqHQvJVa1duWc73OyVGJUc05fhFaTZeQ/PYsrmyH0JVA== - dependencies: - through "2" - sprintf-js@~1.0.2: version "1.0.3" resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c" @@ -14703,13 +14605,6 @@ stream-browserify@^2.0.1: inherits "~2.0.1" readable-stream "^2.0.2" -stream-combiner@~0.0.4: - version "0.0.4" - resolved "https://registry.yarnpkg.com/stream-combiner/-/stream-combiner-0.0.4.tgz#4d5e433c185261dde623ca3f44c586bcf5c4ad14" - integrity sha512-rT00SPnTVyRsaSz5zgSPma/aHSOic5U1prhYdRy5HS2kTZviFpmDgzilbtsJsxiroqACmayynDN/9VzIbX5DOw== - dependencies: - duplexer "~0.1.1" - stream-each@^1.1.0: version "1.2.3" resolved "https://registry.yarnpkg.com/stream-each/-/stream-each-1.2.3.tgz#ebe27a0c389b04fbcc233642952e10731afa9bae" @@ -14951,11 +14846,6 @@ stylis@^4.0.6: resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.1.1.tgz#e46c6a9bbf7c58db1e65bb730be157311ae1fe12" integrity sha512-lVrM/bNdhVX2OgBFNa2YJ9Lxj7kPzylieHd3TNjuGE0Re9JB7joL5VUKOVH1kdNNJTgGPpT8hmwIAPLaSyEVFQ== -supports-color@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7" - integrity sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g== - supports-color@^5.3.0: version "5.5.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f" @@ -15174,7 +15064,7 @@ through2@^2.0.0, through2@^2.0.3: readable-stream "~2.3.6" xtend "~4.0.1" -through@2, through@^2.3.6, through@^2.3.8, through@~2.3, through@~2.3.1: +through@^2.3.6, through@^2.3.8: version "2.3.8" resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5" integrity sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg== @@ -16474,11 +16364,6 @@ y18n@^5.0.5: resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55" integrity sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA== -yallist@^2.1.2: - version "2.1.2" - resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52" - integrity sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A== - yallist@^3.0.2: version "3.1.1" resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd" @@ -16550,22 +16435,6 @@ yarn-or-npm@^3.0.1: cross-spawn "^6.0.5" pkg-dir "^4.2.0" -yarn-run-all@^3.1.1: - version "3.1.1" - resolved "https://registry.yarnpkg.com/yarn-run-all/-/yarn-run-all-3.1.1.tgz#385053ee85c7156f87cec8949a0ffb6bfd0de0b0" - integrity sha512-DgTb6H2VV/HNyeksmAnuR3CLHSTiHCIeuNYrc58NfL6ev8hcTRDXRbBO2yvl1OXLep94eofwXsxCZiaiRo8lDA== - dependencies: - chalk "^1.1.3" - cross-spawn "^4.0.0" - minimatch "^3.0.2" - object-assign "^4.0.1" - pinkie-promise "^2.0.1" - ps-tree "^1.0.1" - read-pkg "^1.1.0" - read-pkg-up "^1.0.1" - shell-quote "^1.6.1" - string.prototype.padend "^3.0.0" - yn@3.1.1: version "3.1.1" resolved "https://registry.yarnpkg.com/yn/-/yn-3.1.1.tgz#1e87401a09d767c1d5eab26a6e4c185182d2eb50" From c22d35e8cec2b1f1fe33620973486b5582759289 Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Sun, 10 Jul 2022 12:37:40 +0200 Subject: [PATCH 06/12] we don't seem to need it --- package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/package.json b/package.json index b4d25cef0b..81030ff465 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,6 @@ }, "scripts": { "build": "turbo run build", - "build:designer": "turbo run build --scope=designer --include-dependencies --no-deps", "checks": "turbo run checks", "dev": "turbo run dev --parallel", "format": "prettier --write \"**/*.{ts,tsx,md}\"", From d6d58c8d93537e802723528031913530c9bbb321 Mon Sep 17 00:00:00 2001 From: Sultan <105234327+natlusyht@users.noreply.github.com> Date: Sun, 10 Jul 2022 18:39:58 +0300 Subject: [PATCH 07/12] designer theme update light/dark theme base structure style-panel theme base structure --- apps/designer/app/designer/designer.tsx | 39 ++++++++-- .../features/breadcrumbs/breadcrumbs.tsx | 32 +++++--- .../designer/features/inspector/inspector.tsx | 12 ++- .../features/sidebar-left/sidebar-left.tsx | 3 +- .../designer/features/style-panel/search.tsx | 14 +++- .../features/style-panel/settings.tsx | 2 +- .../features/style-panel/style-panel.tsx | 24 +++--- .../designer/features/topbar/menu/menu.tsx | 24 +++++- .../designer/features/topbar/sync-status.tsx | 11 +-- .../app/designer/features/topbar/topbar.tsx | 26 ++++++- .../designer/features/workspace/workspace.tsx | 5 +- .../shared/inspector/collapsible-section.tsx | 77 +++++++++++-------- .../shared/inspector/component-info.tsx | 10 ++- .../design-system/components/button.tsx | 2 +- .../design-system/components/sidebar-tabs.tsx | 2 +- .../shared/design-system/components/tabs.tsx | 30 ++++---- .../shared/design-system/components/text.tsx | 1 + .../shared/design-system/stitches.config.ts | 2 +- .../app/shared/documents/designer.tsx | 2 +- 19 files changed, 215 insertions(+), 103 deletions(-) diff --git a/apps/designer/app/designer/designer.tsx b/apps/designer/app/designer/designer.tsx index f2814f61fb..d41038b6c5 100644 --- a/apps/designer/app/designer/designer.tsx +++ b/apps/designer/app/designer/designer.tsx @@ -7,7 +7,7 @@ import type { HoveredInstanceData, SelectedInstanceData, } from "~/shared/canvas-components"; -import { Box, Flex, Grid, type CSS } from "~/shared/design-system"; +import { darkTheme, Box, Flex, Grid, type CSS } from "~/shared/design-system"; import interStyles from "~/shared/font-faces/inter.css"; import { SidebarLeft } from "./features/sidebar-left"; import { Inspector } from "./features/inspector"; @@ -108,7 +108,7 @@ const SidePanel = ({ ); }; -const Main = ({ children }: { children: Array }) => ( +const Main = ({ children }: { children: JSX.Element | Array }) => ( { const gridLayout = isPreviewMode ? { gridTemplateColumns: "auto 1fr", - gridTemplateRows: "auto 1fr", + gridTemplateRows: "auto 1fr auto", gridTemplateAreas: ` "header header" "sidebar main" + "footer footer" `, } : { gridTemplateColumns: "auto 1fr 240px", - gridTemplateRows: "auto 1fr", + gridTemplateRows: "auto 1fr auto", gridTemplateAreas: ` "header header header" "sidebar main inspector" + "footer footer footer" `, }; return ( {children} @@ -188,9 +209,6 @@ export const Designer = ({ config, project }: DesignerProps) => { return ( - - - { }} /> - + + + { > {isDragging ? : } + + + ); diff --git a/apps/designer/app/designer/features/breadcrumbs/breadcrumbs.tsx b/apps/designer/app/designer/features/breadcrumbs/breadcrumbs.tsx index de2f2251ba..f879b4d675 100644 --- a/apps/designer/app/designer/features/breadcrumbs/breadcrumbs.tsx +++ b/apps/designer/app/designer/features/breadcrumbs/breadcrumbs.tsx @@ -1,5 +1,5 @@ import { ChevronRightIcon } from "~/shared/icons"; -import { Button, Flex, Text } from "~/shared/design-system"; +import { Button, Flex, Text, darkTheme } from "~/shared/design-system"; import { useSelectedInstancePath } from "../../shared/instance/use-selected-instance-path"; import { type Publish, type Instance } from "@webstudio-is/sdk"; import { useSelectedInstanceData } from "~/designer/shared/nano-states"; @@ -11,20 +11,27 @@ type BreadcrumbProps = { const Breadcrumb = ({ component, onClick }: BreadcrumbProps) => { return ( - - {" "} + ); }; -const EmptyState = () => ( - - No instance selected - -); +const EmptyState = () => No instance selected; type BreadcrumbsProps = { publish: Publish; @@ -36,9 +43,14 @@ export const Breadcrumbs = ({ publish }: BreadcrumbsProps) => { ); return ( {selectedInstancePath.length === 0 ? ( diff --git a/apps/designer/app/designer/features/inspector/inspector.tsx b/apps/designer/app/designer/features/inspector/inspector.tsx index 4d374c8ecb..22cd7185b1 100644 --- a/apps/designer/app/designer/features/inspector/inspector.tsx +++ b/apps/designer/app/designer/features/inspector/inspector.tsx @@ -1,5 +1,6 @@ import type { Publish } from "@webstudio-is/sdk"; import { + Text, Tabs, TabsList, TabsTrigger, @@ -29,6 +30,7 @@ export const Inspector = ({ publish }: InspectorProps) => { if (selectedInstanceData === undefined) { return ( + {/* @todo: use this space for something more usefull: a-la figma's no instance selected sate */} Select an instance on the canvas @@ -37,13 +39,17 @@ export const Inspector = ({ publish }: InspectorProps) => { } return ( - + - + Style + {/* @note: events would be part of props */} - + Props + + + Inspect diff --git a/apps/designer/app/designer/features/sidebar-left/sidebar-left.tsx b/apps/designer/app/designer/features/sidebar-left/sidebar-left.tsx index 0102081d5d..c838d65590 100644 --- a/apps/designer/app/designer/features/sidebar-left/sidebar-left.tsx +++ b/apps/designer/app/designer/features/sidebar-left/sidebar-left.tsx @@ -17,7 +17,8 @@ const sidebarTabsContentStyle = { width: 250, height: "100%", bc: "$loContrast", - outline: "1px solid $slate6", + // @todo: focus state should be same as hover/active state + outline: "none", }; const none = { TabContent: () => null }; diff --git a/apps/designer/app/designer/features/style-panel/search.tsx b/apps/designer/app/designer/features/style-panel/search.tsx index f9670ed9b9..4853772cef 100644 --- a/apps/designer/app/designer/features/style-panel/search.tsx +++ b/apps/designer/app/designer/features/style-panel/search.tsx @@ -44,7 +44,15 @@ export const Search = ({ onSearch }: SearchProps) => { > { const { value } = event.target; @@ -56,6 +64,10 @@ export const Search = ({ onSearch }: SearchProps) => { type="reset" aria-label="Reset search" className={resetStyle()} + css={{ + transform: "scale(.75)", + "&:disabled path": { fill: "none" }, + }} > diff --git a/apps/designer/app/designer/features/style-panel/settings.tsx b/apps/designer/app/designer/features/style-panel/settings.tsx index fbe29866b2..b8e79436c3 100644 --- a/apps/designer/app/designer/features/style-panel/settings.tsx +++ b/apps/designer/app/designer/features/style-panel/settings.tsx @@ -160,5 +160,5 @@ export const VisualSettings = ({ ); } - return {all}; + return <>{all}; }; diff --git a/apps/designer/app/designer/features/style-panel/style-panel.tsx b/apps/designer/app/designer/features/style-panel/style-panel.tsx index 8cccc80c43..6f2b97550a 100644 --- a/apps/designer/app/designer/features/style-panel/style-panel.tsx +++ b/apps/designer/app/designer/features/style-panel/style-panel.tsx @@ -55,19 +55,21 @@ export const StylePanel = ({ return ( <> - + {/* + */} + + + + + - - - - ); }; diff --git a/apps/designer/app/designer/features/topbar/menu/menu.tsx b/apps/designer/app/designer/features/topbar/menu/menu.tsx index 2c5b030ece..2211c40951 100644 --- a/apps/designer/app/designer/features/topbar/menu/menu.tsx +++ b/apps/designer/app/designer/features/topbar/menu/menu.tsx @@ -9,6 +9,8 @@ import { DropdownMenuSeparator, IconButton, Text, + Box, + type CSS, } from "~/shared/design-system"; import { HamburgerMenuIcon } from "~/shared/icons"; import type { Config } from "~/config"; @@ -34,9 +36,10 @@ const textCss = { type MenuProps = { config: Config; publish: Publish; + css?: CSS; }; -export const Menu = ({ config, publish }: MenuProps) => { +export const Menu = ({ config, publish, css }: MenuProps) => { const navigate = useNavigate(); const [, setIsShareOpen] = useIsShareDialogOpen(); const [, setIsPublishOpen] = useIsPublishDialogOpen(); @@ -44,9 +47,22 @@ export const Menu = ({ config, publish }: MenuProps) => { return ( - - - + button": { + width: "inherit", + height: "inherit", + }, + }} + > + + + + { align="center" justify="center" css={{ - mx: "$1", - width: iconSize, - height: iconSize, - backgroundColor: "$green9", - borderRadius: "100%", + "& > svg": { + width: iconSize, + height: iconSize, + background: "$green9", + borderRadius: "$radii$round", + }, }} > diff --git a/apps/designer/app/designer/features/topbar/topbar.tsx b/apps/designer/app/designer/features/topbar/topbar.tsx index 24c13813fd..4bddac48ad 100644 --- a/apps/designer/app/designer/features/topbar/topbar.tsx +++ b/apps/designer/app/designer/features/topbar/topbar.tsx @@ -1,5 +1,5 @@ import type { Project, Publish } from "@webstudio-is/sdk"; -import { Flex, type CSS } from "~/shared/design-system"; +import { darkTheme, Flex, type CSS } from "~/shared/design-system"; import type { Config } from "~/config"; import { PreviewButton } from "./preview"; import { ShareButton } from "./share"; @@ -18,19 +18,37 @@ type TopbarProps = { export const Topbar = ({ config, css, project, publish }: TopbarProps) => { return ( *": { + height: "100%", + }, + "& button": { + borderRadius: "0", + }, ...css, }} > - + *": { + height: "inherit", + width: "auto", + padding: "0 $2", + }, + }} + > diff --git a/apps/designer/app/designer/features/workspace/workspace.tsx b/apps/designer/app/designer/features/workspace/workspace.tsx index fdfa7f3663..5193e1ebe9 100644 --- a/apps/designer/app/designer/features/workspace/workspace.tsx +++ b/apps/designer/app/designer/features/workspace/workspace.tsx @@ -5,8 +5,9 @@ import { type Publish } from "@webstudio-is/sdk"; const workspaceStyle = { flexGrow: 1, - background: "$gray8", - overflow: "auto", + background: "$gray3", + // scroll behaviour should be derived from the iframe + overflow: "hidden", scrollbarGutter: "stable", }; diff --git a/apps/designer/app/designer/shared/inspector/collapsible-section.tsx b/apps/designer/app/designer/shared/inspector/collapsible-section.tsx index dcbd788838..6804de9bd7 100644 --- a/apps/designer/app/designer/shared/inspector/collapsible-section.tsx +++ b/apps/designer/app/designer/shared/inspector/collapsible-section.tsx @@ -1,6 +1,11 @@ import { createValueContainer, useValue } from "react-nano-state"; -import { Flex, Text, Collapsible } from "~/shared/design-system"; -import { TriangleRightIcon, TriangleDownIcon } from "~/shared/icons"; +import { Box, Flex, Text, Collapsible } from "~/shared/design-system"; +import { + TriangleRightIcon, + TriangleDownIcon, + PlusIcon, + MinusIcon, +} from "~/shared/icons"; type CollapsibleSectionProps = { label: string; @@ -36,34 +41,46 @@ export const CollapsibleSection = ({ const isOpenFinal = isOpen === undefined ? isOpenByUser : isOpen; return ( - - - {isOpenFinal ? : } - - {label} - - {rightSlot} - - - - - {children} - - + + + + + {label} + + {/* @todo: props panel shows double plus icon when rightSlot is set */} + {isOpenFinal ? : } + {rightSlot} + + + + + {children} + + + ); }; diff --git a/apps/designer/app/designer/shared/inspector/component-info.tsx b/apps/designer/app/designer/shared/inspector/component-info.tsx index 72b2c9af15..2bad1ae179 100644 --- a/apps/designer/app/designer/shared/inspector/component-info.tsx +++ b/apps/designer/app/designer/shared/inspector/component-info.tsx @@ -9,9 +9,13 @@ export const ComponentInfo = ({ }) => { return ( - {`Selected: ${ - primitives[selectedInstanceData.component].label - }`} + {`Selected: ${primitives[selectedInstanceData.component].label}`} ); }; diff --git a/apps/designer/app/shared/design-system/components/button.tsx b/apps/designer/app/shared/design-system/components/button.tsx index e07009106c..fd384bbd87 100644 --- a/apps/designer/app/shared/design-system/components/button.tsx +++ b/apps/designer/app/shared/design-system/components/button.tsx @@ -40,7 +40,7 @@ export const Button = styled("button", { "1": { borderRadius: "$1", height: "$5", - px: "$2", + px: "$3", fontSize: "$1", lineHeight: "$sizes$5", }, diff --git a/apps/designer/app/shared/design-system/components/sidebar-tabs.tsx b/apps/designer/app/shared/design-system/components/sidebar-tabs.tsx index 66bfa3e450..20a1d34c78 100644 --- a/apps/designer/app/shared/design-system/components/sidebar-tabs.tsx +++ b/apps/designer/app/shared/design-system/components/sidebar-tabs.tsx @@ -12,7 +12,7 @@ export const SidebarTabs = styled(TabsPrimitive.Root, { export const SidebarTabsTrigger = styled(TabsPrimitive.Trigger, { flexShrink: 0, display: "flex", - size: "$6", + size: "$7", m: 0, userSelect: "none", outline: "none", diff --git a/apps/designer/app/shared/design-system/components/tabs.tsx b/apps/designer/app/shared/design-system/components/tabs.tsx index ebc47f62b7..2dbb6d7b1a 100644 --- a/apps/designer/app/shared/design-system/components/tabs.tsx +++ b/apps/designer/app/shared/design-system/components/tabs.tsx @@ -1,6 +1,7 @@ import React from "react"; import { styled, CSS } from "../stitches.config"; import * as TabsPrimitive from "@radix-ui/react-tabs"; +import { Text } from "./text"; export const Tabs = styled(TabsPrimitive.Root, { display: "flex", @@ -11,7 +12,7 @@ export const Tabs = styled(TabsPrimitive.Root, { export const TabsTrigger = styled(TabsPrimitive.Trigger, { flexShrink: 0, - size: "$6", + height: "$7", display: "inline-flex", lineHeight: 1, fontFamily: "inherit", @@ -21,14 +22,17 @@ export const TabsTrigger = styled(TabsPrimitive.Trigger, { outline: "none", alignItems: "center", justifyContent: "center", - color: "$slate11", border: "none", - borderBottom: "1px solid transparent", - borderTopLeftRadius: "$2", - borderTopRightRadius: "$2", zIndex: "10", backgroundColor: "transparent", - + ["&:first-child"]: { + paddingLeft: "$3", + }, + [`& > ${Text}`]: { + color: "$slate9", + fontSize: "$1", + fontWeight: "600", + }, "@hover": { "&:hover": { color: "$hiContrast", @@ -36,26 +40,20 @@ export const TabsTrigger = styled(TabsPrimitive.Trigger, { }, '&[data-state="active"]': { - color: "$hiContrast", - borderColor: "$slate6", + [`& > ${Text}`]: { + color: "$hiContrast", + }, }, '&[data-orientation="vertical"]': { justifyContent: "flex-start", - borderTopRightRadius: 0, - borderBottomLeftRadius: "$2", - borderBottomColor: "transparent", - - '&[data-state="active"]': { - borderBottomColor: "$slate6", - borderRightColor: "transparent", - }, }, }); const StyledTabsList = styled(TabsPrimitive.List, { flexShrink: 0, display: "flex", + borderBottom: "1px solid $colors$slate6", "&:focus": { outline: "none", boxShadow: "inset 0 0 0 1px $slate8, 0 0 0 1px $slate8", diff --git a/apps/designer/app/shared/design-system/components/text.tsx b/apps/designer/app/shared/design-system/components/text.tsx index 73fb4ea864..3663a0355d 100644 --- a/apps/designer/app/shared/design-system/components/text.tsx +++ b/apps/designer/app/shared/design-system/components/text.tsx @@ -7,6 +7,7 @@ export const Text = styled("div", { fontWeight: 400, fontVariantNumeric: "tabular-nums", display: "block", + userSelect: "none", variants: { size: { diff --git a/apps/designer/app/shared/design-system/stitches.config.ts b/apps/designer/app/shared/design-system/stitches.config.ts index 9b9daafa4d..c783e8f5a9 100644 --- a/apps/designer/app/shared/design-system/stitches.config.ts +++ b/apps/designer/app/shared/design-system/stitches.config.ts @@ -497,7 +497,7 @@ export const darkTheme = createTheme("dark-theme", { muted: "$slate8", primary: "$blue9", hiContrast: "$slate12", - loContrast: "$slate1", + loContrast: "hsl(0 0% 17%)", canvas: "hsl(0 0% 15%)", panel: "$slate3", transparentPanel: "hsl(0 100% 100% / 97%)", diff --git a/apps/designer/app/shared/documents/designer.tsx b/apps/designer/app/shared/documents/designer.tsx index 46ba3018f1..23dafb5f29 100644 --- a/apps/designer/app/shared/documents/designer.tsx +++ b/apps/designer/app/shared/documents/designer.tsx @@ -13,7 +13,7 @@ export const Designer = () => { - + From 4f7b26f7b5e98790fd94d4c191ffee33723764b3 Mon Sep 17 00:00:00 2001 From: Sultan <105234327+natlusyht@users.noreply.github.com> Date: Mon, 11 Jul 2022 18:42:06 +0300 Subject: [PATCH 08/12] nits on some colors used, add todos, eslint --- apps/designer/app/designer/designer.tsx | 19 ++++++++++--------- .../features/breadcrumbs/breadcrumbs.tsx | 2 ++ .../designer/features/inspector/inspector.tsx | 4 ++-- .../features/sidebar-left/sidebar-left.tsx | 2 +- .../designer/features/style-panel/search.tsx | 3 ++- .../features/style-panel/settings.tsx | 2 +- .../features/style-panel/style-panel.tsx | 3 +-- .../designer/features/topbar/menu/menu.tsx | 5 ++--- .../app/designer/features/topbar/topbar.tsx | 1 + .../shared/inspector/collapsible-section.tsx | 9 ++------- .../shared/design-system/components/tabs.tsx | 12 ++++++------ .../shared/design-system/stitches.config.ts | 1 + .../app/shared/documents/designer.tsx | 1 - 13 files changed, 31 insertions(+), 33 deletions(-) diff --git a/apps/designer/app/designer/designer.tsx b/apps/designer/app/designer/designer.tsx index d41038b6c5..3bd4979f22 100644 --- a/apps/designer/app/designer/designer.tsx +++ b/apps/designer/app/designer/designer.tsx @@ -7,7 +7,12 @@ import type { HoveredInstanceData, SelectedInstanceData, } from "~/shared/canvas-components"; -import { darkTheme, Box, Flex, Grid, type CSS } from "~/shared/design-system"; +import { + /* darkTheme, */ Box, + Flex, + Grid, + type CSS, +} from "~/shared/design-system"; import interStyles from "~/shared/font-faces/inter.css"; import { SidebarLeft } from "./features/sidebar-left"; import { Inspector } from "./features/inspector"; @@ -154,22 +159,18 @@ const ChromeWrapper = ({ children, isPreviewMode }: ChromeWrapperProps) => { overflow: "hidden", display: "grid", ...gridLayout, - "--outline": "$colors$slate6", - "&.dark-theme": { - "--outline": "rgba(255, 255, 255, 8%)", - }, "&.dark-theme header": { - boxShadow: "inset 0 -1px 0 0 var(--outline)", + boxShadow: "inset 0 -1px 0 0 $colors$gray7", }, "&.dark-theme footer": { - boxShadow: "inset 0 1px 0 0 var(--outline)", + boxShadow: "inset 0 1px 0 0 $colors$gray7", }, "& aside": { "&:first-of-type": { - boxShadow: "inset -1px 0 0 0 var(--outline)", + boxShadow: "inset -1px 0 0 0 $colors$gray7", }, "&:last-of-type": { - boxShadow: "inset 1px 0 0 0 var(--outline)", + boxShadow: "inset 1px 0 0 0 $colors$gray7", }, }, }} diff --git a/apps/designer/app/designer/features/breadcrumbs/breadcrumbs.tsx b/apps/designer/app/designer/features/breadcrumbs/breadcrumbs.tsx index f879b4d675..9928a12213 100644 --- a/apps/designer/app/designer/features/breadcrumbs/breadcrumbs.tsx +++ b/apps/designer/app/designer/features/breadcrumbs/breadcrumbs.tsx @@ -14,10 +14,12 @@ const Breadcrumb = ({ component, onClick }: BreadcrumbProps) => { { if (selectedInstanceData === undefined) { return ( - {/* @todo: use this space for something more usefull: a-la figma's no instance selected sate */} + {/* @todo: use this space for something more usefull: a-la figma's no instance selected sate, maybe create an issue with a more specific proposal? */} Select an instance on the canvas @@ -39,6 +38,7 @@ export const Inspector = ({ publish }: InspectorProps) => { } return ( + // @todo: Nit: I wonder if this width was supposed to be defined by the parent container layout diff --git a/apps/designer/app/designer/features/sidebar-left/sidebar-left.tsx b/apps/designer/app/designer/features/sidebar-left/sidebar-left.tsx index c838d65590..dd17e0af18 100644 --- a/apps/designer/app/designer/features/sidebar-left/sidebar-left.tsx +++ b/apps/designer/app/designer/features/sidebar-left/sidebar-left.tsx @@ -17,7 +17,7 @@ const sidebarTabsContentStyle = { width: 250, height: "100%", bc: "$loContrast", - // @todo: focus state should be same as hover/active state + // @todo: focus state should be same as hover/active state: hover and focus yes, probably same, active? not so sure. outline: "none", }; diff --git a/apps/designer/app/designer/features/style-panel/search.tsx b/apps/designer/app/designer/features/style-panel/search.tsx index 4853772cef..04d9898c38 100644 --- a/apps/designer/app/designer/features/style-panel/search.tsx +++ b/apps/designer/app/designer/features/style-panel/search.tsx @@ -45,7 +45,7 @@ export const Search = ({ onSearch }: SearchProps) => { { aria-label="Reset search" className={resetStyle()} css={{ + // @todo: feels wrong to use transform for this, would setting width/height on the icon directly be a better approach? transform: "scale(.75)", "&:disabled path": { fill: "none" }, }} diff --git a/apps/designer/app/designer/features/style-panel/settings.tsx b/apps/designer/app/designer/features/style-panel/settings.tsx index b8e79436c3..5e6c920ed6 100644 --- a/apps/designer/app/designer/features/style-panel/settings.tsx +++ b/apps/designer/app/designer/features/style-panel/settings.tsx @@ -6,7 +6,7 @@ import { type Category, type Style, } from "@webstudio-is/sdk"; -import { Box, Flex, Collapsible, Button } from "~/shared/design-system"; +import { Flex, Collapsible, Button } from "~/shared/design-system"; import { TriangleRightIcon, TriangleDownIcon } from "~/shared/icons"; import { styleConfigs, type StyleConfig } from "~/shared/style-panel-configs"; import { CollapsibleSection } from "~/designer/shared/inspector"; diff --git a/apps/designer/app/designer/features/style-panel/style-panel.tsx b/apps/designer/app/designer/features/style-panel/style-panel.tsx index 6f2b97550a..9851fd96ac 100644 --- a/apps/designer/app/designer/features/style-panel/style-panel.tsx +++ b/apps/designer/app/designer/features/style-panel/style-panel.tsx @@ -3,7 +3,6 @@ import { willRender } from "~/designer/shared/breakpoints"; import { Box, Card, Paragraph } from "~/shared/design-system"; import type { SelectedInstanceData } from "~/shared/canvas-components"; import { useStyleData } from "./use-style-data"; -import { ComponentInfo } from "../../shared/inspector"; import { VisualSettings } from "./settings"; import { Search } from "./search"; import { useState } from "react"; @@ -59,7 +58,7 @@ export const StylePanel = ({ */} - + { +export const Menu = ({ config, publish }: MenuProps) => { const navigate = useNavigate(); const [, setIsShareOpen] = useIsShareDialogOpen(); const [, setIsPublishOpen] = useIsPublishDialogOpen(); @@ -53,6 +51,7 @@ export const Menu = ({ config, publish, css }: MenuProps) => { height: "100%", borderRadius: "0", outline: "none", + // @todo: would set directly on the element "& > button": { width: "inherit", height: "inherit", diff --git a/apps/designer/app/designer/features/topbar/topbar.tsx b/apps/designer/app/designer/features/topbar/topbar.tsx index 4bddac48ad..17e10fc5f7 100644 --- a/apps/designer/app/designer/features/topbar/topbar.tsx +++ b/apps/designer/app/designer/features/topbar/topbar.tsx @@ -25,6 +25,7 @@ export const Topbar = ({ config, css, project, publish }: TopbarProps) => { css={{ bc: "$loContrast", height: "$sizes$7", + // @todo: uhh, setting this on any focused child element? lets see what's the use case and why its necessary to override vs. not having it in the first place "& :focus": { boxShadow: "none", }, diff --git a/apps/designer/app/designer/shared/inspector/collapsible-section.tsx b/apps/designer/app/designer/shared/inspector/collapsible-section.tsx index 6804de9bd7..beb9a2193b 100644 --- a/apps/designer/app/designer/shared/inspector/collapsible-section.tsx +++ b/apps/designer/app/designer/shared/inspector/collapsible-section.tsx @@ -1,11 +1,6 @@ import { createValueContainer, useValue } from "react-nano-state"; import { Box, Flex, Text, Collapsible } from "~/shared/design-system"; -import { - TriangleRightIcon, - TriangleDownIcon, - PlusIcon, - MinusIcon, -} from "~/shared/icons"; +import { PlusIcon, MinusIcon } from "~/shared/icons"; type CollapsibleSectionProps = { label: string; @@ -43,7 +38,7 @@ export const CollapsibleSection = ({ diff --git a/apps/designer/app/shared/design-system/components/tabs.tsx b/apps/designer/app/shared/design-system/components/tabs.tsx index 2dbb6d7b1a..6845bd1a56 100644 --- a/apps/designer/app/shared/design-system/components/tabs.tsx +++ b/apps/designer/app/shared/design-system/components/tabs.tsx @@ -29,8 +29,8 @@ export const TabsTrigger = styled(TabsPrimitive.Trigger, { paddingLeft: "$3", }, [`& > ${Text}`]: { - color: "$slate9", - fontSize: "$1", + color: "$gray9", + fontSize: "11px", fontWeight: "600", }, "@hover": { @@ -53,14 +53,14 @@ export const TabsTrigger = styled(TabsPrimitive.Trigger, { const StyledTabsList = styled(TabsPrimitive.List, { flexShrink: 0, display: "flex", - borderBottom: "1px solid $colors$slate6", + borderBottom: "1px solid $colors$gray6", "&:focus": { outline: "none", - boxShadow: "inset 0 0 0 1px $slate8, 0 0 0 1px $slate8", + boxShadow: "inset 0 0 0 1px $gray8, 0 0 0 1px $gray8", }, '&[data-orientation="vertical"]': { flexDirection: "column", - boxShadow: "inset -1px 0 0 $slate6", + boxShadow: "inset -1px 0 0 $gray6", }, }); @@ -82,7 +82,7 @@ export const TabsContent = styled(TabsPrimitive.Content, { flexGrow: 1, "&:focus": { outline: "none", - boxShadow: "inset 0 0 0 1px $slate8, 0 0 0 1px $slate8", + boxShadow: "inset 0 0 0 1px $gray8, 0 0 0 1px $gray8", }, '&[data-state="inactive"]': { display: "none", diff --git a/apps/designer/app/shared/design-system/stitches.config.ts b/apps/designer/app/shared/design-system/stitches.config.ts index c783e8f5a9..3d8a0e3dc0 100644 --- a/apps/designer/app/shared/design-system/stitches.config.ts +++ b/apps/designer/app/shared/design-system/stitches.config.ts @@ -497,6 +497,7 @@ export const darkTheme = createTheme("dark-theme", { muted: "$slate8", primary: "$blue9", hiContrast: "$slate12", + // radix colors in this range are either too dark/too light, nothing gray/black in the 16-17% luminosity range loContrast: "hsl(0 0% 17%)", canvas: "hsl(0 0% 15%)", panel: "$slate3", diff --git a/apps/designer/app/shared/documents/designer.tsx b/apps/designer/app/shared/documents/designer.tsx index 23dafb5f29..95605b1931 100644 --- a/apps/designer/app/shared/documents/designer.tsx +++ b/apps/designer/app/shared/documents/designer.tsx @@ -1,6 +1,5 @@ import { Links, LiveReload, Meta, Outlet, Scripts } from "@remix-run/react"; import { CriticalCss } from "@webstudio-is/sdk"; -import { darkTheme } from "~/shared/design-system"; import { Env } from "~/shared/env"; export const Designer = () => { From 142121561bcbf473b92fe21f3ed63fa40e0ef839 Mon Sep 17 00:00:00 2001 From: Sultan <105234327+natlusyht@users.noreply.github.com> Date: Mon, 11 Jul 2022 18:54:21 +0300 Subject: [PATCH 09/12] todo comment about dark-theme class --- apps/designer/app/designer/designer.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/designer/app/designer/designer.tsx b/apps/designer/app/designer/designer.tsx index 3bd4979f22..d44c658b43 100644 --- a/apps/designer/app/designer/designer.tsx +++ b/apps/designer/app/designer/designer.tsx @@ -159,6 +159,7 @@ const ChromeWrapper = ({ children, isPreviewMode }: ChromeWrapperProps) => { overflow: "hidden", display: "grid", ...gridLayout, + // @todo refactor: works for now since i'm manually setting it above on grid container "&.dark-theme header": { boxShadow: "inset 0 -1px 0 0 $colors$gray7", }, From af0272e5d4dfa9c7181d595149447ff319ac6a96 Mon Sep 17 00:00:00 2001 From: Sultan <105234327+natlusyht@users.noreply.github.com> Date: Mon, 11 Jul 2022 20:20:49 +0300 Subject: [PATCH 10/12] better handle dark mode selector --- apps/designer/app/designer/designer.tsx | 33 +++++-------------- .../features/breadcrumbs/breadcrumbs.tsx | 4 +++ .../app/designer/features/topbar/topbar.tsx | 4 ++- 3 files changed, 15 insertions(+), 26 deletions(-) diff --git a/apps/designer/app/designer/designer.tsx b/apps/designer/app/designer/designer.tsx index d44c658b43..9405d0bf0d 100644 --- a/apps/designer/app/designer/designer.tsx +++ b/apps/designer/app/designer/designer.tsx @@ -7,12 +7,7 @@ import type { HoveredInstanceData, SelectedInstanceData, } from "~/shared/canvas-components"; -import { - /* darkTheme, */ Box, - Flex, - Grid, - type CSS, -} from "~/shared/design-system"; +import { Box, Flex, Grid, type CSS } from "~/shared/design-system"; import interStyles from "~/shared/font-faces/inter.css"; import { SidebarLeft } from "./features/sidebar-left"; import { Inspector } from "./features/inspector"; @@ -106,6 +101,12 @@ const SidePanel = ({ bc: "$loContrast", height: "100%", ...css, + "&:first-of-type": { + boxShadow: "inset -1px 0 0 0 $colors$gray7", + }, + "&:last-of-type": { + boxShadow: "inset 1px 0 0 0 $colors$gray7", + }, }} > {children} @@ -153,27 +154,11 @@ const ChromeWrapper = ({ children, isPreviewMode }: ChromeWrapperProps) => { }; return ( {children} @@ -241,9 +226,7 @@ export const Designer = ({ config, project }: DesignerProps) => { > {isDragging ? : } - - - + ); diff --git a/apps/designer/app/designer/features/breadcrumbs/breadcrumbs.tsx b/apps/designer/app/designer/features/breadcrumbs/breadcrumbs.tsx index 9928a12213..d8ce35c7fb 100644 --- a/apps/designer/app/designer/features/breadcrumbs/breadcrumbs.tsx +++ b/apps/designer/app/designer/features/breadcrumbs/breadcrumbs.tsx @@ -49,9 +49,13 @@ export const Breadcrumbs = ({ publish }: BreadcrumbsProps) => { as="footer" align="center" css={{ + gridArea: "footer", height: "$5", background: "$loContrast", padding: "$2", + [`${darkTheme.selector}:root &`]: { + boxShadow: "inset 0 1px 0 0 $colors$gray7", + }, }} > {selectedInstancePath.length === 0 ? ( diff --git a/apps/designer/app/designer/features/topbar/topbar.tsx b/apps/designer/app/designer/features/topbar/topbar.tsx index 17e10fc5f7..3be0785981 100644 --- a/apps/designer/app/designer/features/topbar/topbar.tsx +++ b/apps/designer/app/designer/features/topbar/topbar.tsx @@ -14,7 +14,6 @@ type TopbarProps = { project: Project; publish: Publish; }; - export const Topbar = ({ config, css, project, publish }: TopbarProps) => { return ( { css={{ bc: "$loContrast", height: "$sizes$7", + [`${darkTheme.selector}:root &`]: { + boxShadow: "inset 0 -1px 0 0 $colors$gray7", + }, // @todo: uhh, setting this on any focused child element? lets see what's the use case and why its necessary to override vs. not having it in the first place "& :focus": { boxShadow: "none", From 1a704e7c97bfd4bfeb34c6cbfaea6b234ab559e6 Mon Sep 17 00:00:00 2001 From: Sultan <105234327+natlusyht@users.noreply.github.com> Date: Mon, 11 Jul 2022 20:31:30 +0300 Subject: [PATCH 11/12] use new dark-theme api --- apps/designer/app/designer/features/breadcrumbs/breadcrumbs.tsx | 2 +- apps/designer/app/designer/features/topbar/topbar.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/designer/app/designer/features/breadcrumbs/breadcrumbs.tsx b/apps/designer/app/designer/features/breadcrumbs/breadcrumbs.tsx index d8ce35c7fb..16e4fb1dd2 100644 --- a/apps/designer/app/designer/features/breadcrumbs/breadcrumbs.tsx +++ b/apps/designer/app/designer/features/breadcrumbs/breadcrumbs.tsx @@ -53,7 +53,7 @@ export const Breadcrumbs = ({ publish }: BreadcrumbsProps) => { height: "$5", background: "$loContrast", padding: "$2", - [`${darkTheme.selector}:root &`]: { + "[data-theme=dark] &": { boxShadow: "inset 0 1px 0 0 $colors$gray7", }, }} diff --git a/apps/designer/app/designer/features/topbar/topbar.tsx b/apps/designer/app/designer/features/topbar/topbar.tsx index 3be0785981..5712a2f21c 100644 --- a/apps/designer/app/designer/features/topbar/topbar.tsx +++ b/apps/designer/app/designer/features/topbar/topbar.tsx @@ -24,7 +24,7 @@ export const Topbar = ({ config, css, project, publish }: TopbarProps) => { css={{ bc: "$loContrast", height: "$sizes$7", - [`${darkTheme.selector}:root &`]: { + "[data-theme=dark] &": { boxShadow: "inset 0 -1px 0 0 $colors$gray7", }, // @todo: uhh, setting this on any focused child element? lets see what's the use case and why its necessary to override vs. not having it in the first place From 2d344f7d33f1b041fac000558fa85a5dff966187 Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Mon, 11 Jul 2022 20:07:50 +0200 Subject: [PATCH 12/12] Revert "we don't seem to need it" This reverts commit c22d35e8cec2b1f1fe33620973486b5582759289. --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 81030ff465..b4d25cef0b 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ }, "scripts": { "build": "turbo run build", + "build:designer": "turbo run build --scope=designer --include-dependencies --no-deps", "checks": "turbo run checks", "dev": "turbo run dev --parallel", "format": "prettier --write \"**/*.{ts,tsx,md}\"",