From ced3a73becde69efb7c77f3a7e40987cc397ffd7 Mon Sep 17 00:00:00 2001 From: Andras Bacsai Date: Fri, 22 Jul 2022 12:28:17 +0000 Subject: [PATCH 01/57] renaming all packages to @webstudio-is/* --- apps/designer/package.json | 4 ++-- apps/designer/tsconfig.json | 16 +++++++++++++--- package.json | 2 +- packages/asset-uploader/package.json | 2 +- packages/asset-uploader/tsconfig.json | 2 +- packages/eslint-config-custom/package.json | 4 ++-- packages/jest-config/package.json | 4 ++-- packages/react-sdk/package.json | 4 ++-- packages/react-sdk/tsconfig.json | 2 +- packages/tsconfig/package.json | 4 ++-- 10 files changed, 27 insertions(+), 17 deletions(-) diff --git a/apps/designer/package.json b/apps/designer/package.json index beb1fdbabe..9455775165 100644 --- a/apps/designer/package.json +++ b/apps/designer/package.json @@ -127,13 +127,13 @@ "esbuild-jest": "^0.5.0", "esbuild-node-externals": "^1.4.1", "esbuild-node-loader": "^0.8.0", - "eslint-config-custom": "*", "jest": "^27.5.1", "prettier": "^2.6.2", "prisma": "^3.14.0", "react-test-renderer": "^17.0.2", "relative-deps": "^1.0.7", - "tsconfig": "*", + "@webstudio-is/eslint-config-custom": "*", + "@webstudio-is/tsconfig": "*", "typescript": "4.6.4" }, "sideEffects": false, diff --git a/apps/designer/tsconfig.json b/apps/designer/tsconfig.json index fbf716785d..f30c095e48 100644 --- a/apps/designer/tsconfig.json +++ b/apps/designer/tsconfig.json @@ -1,11 +1,21 @@ { - // Extends can't use node's resolution rn https://github.com/dividab/tsconfig-paths/issues/209#issuecomment-1177261091 - "extends": "../../node_modules/tsconfig/remix.json", + "extends": "../../node_modules/@webstudio-is/tsconfig/remix.json", "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"], "compilerOptions": { "paths": { "~/*": ["app/*"] }, - "baseUrl": "." + "baseUrl": ".", + "allowJs": true, + "forceConsistentCasingInFileNames": true, + "lib": ["DOM", "DOM.Iterable", "ES2019"], + "strict": true, + "target": "ES2019", + "esModuleInterop": true, + "isolatedModules": true, + "jsx": "react-jsx", + "moduleResolution": "node", + "noEmit": true, + "resolveJsonModule": true } } diff --git a/package.json b/package.json index 504f3f4a01..cbcd14529f 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ "storybook": "turbo run storybook:run" }, "devDependencies": { - "eslint-config-custom": "*", + "@webstudio-is/eslint-config-custom": "*", "husky": ">=6", "lint-staged": "^13.0.2", "prettier": "latest", diff --git a/packages/asset-uploader/package.json b/packages/asset-uploader/package.json index 8f2767ca55..48f9d6e376 100644 --- a/packages/asset-uploader/package.json +++ b/packages/asset-uploader/package.json @@ -19,7 +19,7 @@ "devDependencies": { "@types/node": "^17.0.21", "@types/sharp": "^0.30.4", - "jest-config": "*", + "@webstudio-is/jest-config": "*", "tsup": "^6.1.3", "typescript": "^4.6.2", "zod": "^3.17.3" diff --git a/packages/asset-uploader/tsconfig.json b/packages/asset-uploader/tsconfig.json index fe21c2ae7b..654f479a30 100644 --- a/packages/asset-uploader/tsconfig.json +++ b/packages/asset-uploader/tsconfig.json @@ -1,6 +1,6 @@ // Extends can't use node's resolution rn https://github.com/dividab/tsconfig-paths/issues/209#issuecomment-1177261091 { - "extends": "../../node_modules/tsconfig/base.json", + "extends": "../../node_modules/@webstudio-is/tsconfig/base.json", "include": ["./src/**/*.ts"], "compilerOptions": { "module": "commonjs", diff --git a/packages/eslint-config-custom/package.json b/packages/eslint-config-custom/package.json index 158b766152..0cf8f85421 100644 --- a/packages/eslint-config-custom/package.json +++ b/packages/eslint-config-custom/package.json @@ -1,6 +1,6 @@ { - "name": "eslint-config-custom", - "version": "0.0.0", + "name": "@webstudio-is/eslint-config-custom", + "version": "0.1.0", "main": "index.js", "license": "MIT", "dependencies": { diff --git a/packages/jest-config/package.json b/packages/jest-config/package.json index ef615bcf82..4cb8210ce8 100644 --- a/packages/jest-config/package.json +++ b/packages/jest-config/package.json @@ -1,6 +1,6 @@ { - "name": "jest-config", - "version": "0.0.0", + "name": "@webstudio-is/jest-config", + "version": "0.1.0", "license": "MIT", "dependencies": { "@types/jest": "^27.4.1", diff --git a/packages/react-sdk/package.json b/packages/react-sdk/package.json index c3ebae90af..32cd0000b4 100644 --- a/packages/react-sdk/package.json +++ b/packages/react-sdk/package.json @@ -40,7 +40,7 @@ "esbuild": "^0.14.25", "esbuild-node-externals": "^1.4.1", "esbuild-node-loader": "^0.8.0", - "jest-config": "*", + "@webstudio-is/jest-config": "*", "mdn-data": "2.0.23", "react": "^17.0.2", "react-docgen-typescript": "^2.2.2", @@ -62,7 +62,7 @@ "mitt": "^3.0.0", "prisma": "^3.10.0", "react-nano-state": "^0.4.0", - "jest-config": "*", + "@webstudio-is/jest-config": "*", "zod": "^3.17.3" }, "main": "lib/index.js", diff --git a/packages/react-sdk/tsconfig.json b/packages/react-sdk/tsconfig.json index 329cf3ea13..e599e806b6 100644 --- a/packages/react-sdk/tsconfig.json +++ b/packages/react-sdk/tsconfig.json @@ -1,6 +1,6 @@ // Extends can't use node's resolution rn https://github.com/dividab/tsconfig-paths/issues/209#issuecomment-1177261091 { - "extends": "../../node_modules/tsconfig/base.json", + "extends": "../../node_modules/@webstudio-is/tsconfig/base.json", "include": ["./src/**/*.ts", "./src/**/*.tsx"], "compilerOptions": { "lib": ["DOM", "DOM.Iterable", "ES2019"], diff --git a/packages/tsconfig/package.json b/packages/tsconfig/package.json index a32fc41922..020b259d05 100644 --- a/packages/tsconfig/package.json +++ b/packages/tsconfig/package.json @@ -1,6 +1,6 @@ { - "name": "tsconfig", - "version": "0.0.0", + "name": "@webstudio-is/tsconfig", + "version": "0.1.0", "private": true, "main": "index.js", "files": [ From 78c9d59290468ad10fa100ce28c6cc0c034bb69f Mon Sep 17 00:00:00 2001 From: Andras Bacsai Date: Fri, 22 Jul 2022 12:33:47 +0000 Subject: [PATCH 02/57] fix --- packages/react-sdk/jest.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-sdk/jest.config.js b/packages/react-sdk/jest.config.js index 03c0db11ea..8d742b1b6c 100644 --- a/packages/react-sdk/jest.config.js +++ b/packages/react-sdk/jest.config.js @@ -1,5 +1,5 @@ // eslint-disable-next-line -const base = require("jest-config/jest.config.js"); +const base = require("@webstudio-is/jest-config/jest.config.js"); module.exports = { ...base, From c4915922df509f67f53695cfa8a259131f771529 Mon Sep 17 00:00:00 2001 From: Andras Bacsai Date: Fri, 22 Jul 2022 12:34:00 +0000 Subject: [PATCH 03/57] GH Action for eslint-config-custom --- .../eslint-config-custom-publish.yml | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 .github/workflows/eslint-config-custom-publish.yml diff --git a/.github/workflows/eslint-config-custom-publish.yml b/.github/workflows/eslint-config-custom-publish.yml new file mode 100644 index 0000000000..6d98459a35 --- /dev/null +++ b/.github/workflows/eslint-config-custom-publish.yml @@ -0,0 +1,22 @@ +name: Eslint Config Publish +on: + push: + paths: + - 'packages/eslint-config-custom/**/*' + - '.github/workflows/eslint-config-custom-publish.yml' +jobs: + publish: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + - uses: actions/setup-node@v3 + with: + node-version: 16 + - name: Install Dependencies + run: yarn install + - uses: JS-DevTools/npm-publish@v1 + with: + token: ${{ secrets.NPM_TOKEN }} + dry-run: false + check-version: true + package: './packages/eslint-config-custom/package.json' \ No newline at end of file From 3b3fc964af70da929b57c8aaa3856135df1899ce Mon Sep 17 00:00:00 2001 From: Andras Bacsai Date: Fri, 22 Jul 2022 12:40:38 +0000 Subject: [PATCH 04/57] GH Action for jest-config --- .github/workflows/jest-config-publish.yml | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 .github/workflows/jest-config-publish.yml diff --git a/.github/workflows/jest-config-publish.yml b/.github/workflows/jest-config-publish.yml new file mode 100644 index 0000000000..b70d4a51f6 --- /dev/null +++ b/.github/workflows/jest-config-publish.yml @@ -0,0 +1,22 @@ +name: Jest Config Publish +on: + push: + paths: + - 'packages/jest-config/**/*' + - '.github/workflows/jest-config-publish.yml' +jobs: + publish: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + - uses: actions/setup-node@v3 + with: + node-version: 16 + - name: Install Dependencies + run: yarn install + - uses: JS-DevTools/npm-publish@v1 + with: + token: ${{ secrets.NPM_TOKEN }} + dry-run: false + check-version: true + package: './packages/jest-config/package.json' \ No newline at end of file From 633669d69aaa23b543bf6f0e45cd1bb638abc827 Mon Sep 17 00:00:00 2001 From: Andras Bacsai Date: Fri, 22 Jul 2022 12:49:54 +0000 Subject: [PATCH 05/57] GH Action for tsconfig --- .github/workflows/tsconfig-publish.yml | 22 ++++++++++++++++++++++ packages/tsconfig/package.json | 2 +- 2 files changed, 23 insertions(+), 1 deletion(-) create mode 100644 .github/workflows/tsconfig-publish.yml diff --git a/.github/workflows/tsconfig-publish.yml b/.github/workflows/tsconfig-publish.yml new file mode 100644 index 0000000000..1f325079e3 --- /dev/null +++ b/.github/workflows/tsconfig-publish.yml @@ -0,0 +1,22 @@ +name: Tsconfig Publish +on: + push: + paths: + - 'packages/tsconfig/**/*' + - '.github/workflows/tsconfig-publish.yml' +jobs: + publish: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + - uses: actions/setup-node@v3 + with: + node-version: 16 + - name: Install Dependencies + run: yarn install + - uses: JS-DevTools/npm-publish@v1 + with: + token: ${{ secrets.NPM_TOKEN }} + dry-run: false + check-version: true + package: './packages/tsconfig/package.json' \ No newline at end of file diff --git a/packages/tsconfig/package.json b/packages/tsconfig/package.json index 020b259d05..f68ef3fdd2 100644 --- a/packages/tsconfig/package.json +++ b/packages/tsconfig/package.json @@ -1,7 +1,7 @@ { "name": "@webstudio-is/tsconfig", "version": "0.1.0", - "private": true, + "private": false, "main": "index.js", "files": [ "base.json", From 6495901956c61ab2173921d7fbb58854ef4c119a Mon Sep 17 00:00:00 2001 From: Andras Bacsai Date: Fri, 22 Jul 2022 13:32:16 +0000 Subject: [PATCH 06/57] fix --- .github/workflows/tsconfig-publish.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/tsconfig-publish.yml b/.github/workflows/tsconfig-publish.yml index 1f325079e3..a50c55fc71 100644 --- a/.github/workflows/tsconfig-publish.yml +++ b/.github/workflows/tsconfig-publish.yml @@ -19,4 +19,5 @@ jobs: token: ${{ secrets.NPM_TOKEN }} dry-run: false check-version: true + access: 'public' package: './packages/tsconfig/package.json' \ No newline at end of file From 85a674cc02f7ed46a8446960c90e74eb0e881986 Mon Sep 17 00:00:00 2001 From: Andras Bacsai Date: Fri, 22 Jul 2022 13:50:23 +0000 Subject: [PATCH 07/57] packages should be public --- .github/workflows/eslint-config-custom-publish.yml | 1 + .github/workflows/jest-config-publish.yml | 1 + .github/workflows/react-sdk-publish.yml | 1 + 3 files changed, 3 insertions(+) diff --git a/.github/workflows/eslint-config-custom-publish.yml b/.github/workflows/eslint-config-custom-publish.yml index 6d98459a35..1c35ddc517 100644 --- a/.github/workflows/eslint-config-custom-publish.yml +++ b/.github/workflows/eslint-config-custom-publish.yml @@ -19,4 +19,5 @@ jobs: token: ${{ secrets.NPM_TOKEN }} dry-run: false check-version: true + access: 'public' package: './packages/eslint-config-custom/package.json' \ No newline at end of file diff --git a/.github/workflows/jest-config-publish.yml b/.github/workflows/jest-config-publish.yml index b70d4a51f6..ddc06c6b19 100644 --- a/.github/workflows/jest-config-publish.yml +++ b/.github/workflows/jest-config-publish.yml @@ -19,4 +19,5 @@ jobs: token: ${{ secrets.NPM_TOKEN }} dry-run: false check-version: true + access: 'public' package: './packages/jest-config/package.json' \ No newline at end of file diff --git a/.github/workflows/react-sdk-publish.yml b/.github/workflows/react-sdk-publish.yml index ff7d173cff..4f4e55cfad 100644 --- a/.github/workflows/react-sdk-publish.yml +++ b/.github/workflows/react-sdk-publish.yml @@ -19,4 +19,5 @@ jobs: token: ${{ secrets.NPM_TOKEN }} dry-run: false check-version: true + access: 'public' package: './packages/react-sdk/package.json' \ No newline at end of file From aba8046a95535815d59f603386d48faadd51b0d2 Mon Sep 17 00:00:00 2001 From: Andras Bacsai Date: Fri, 22 Jul 2022 14:38:38 +0000 Subject: [PATCH 08/57] bumping version of eslint-config-custom --- packages/eslint-config-custom/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/eslint-config-custom/package.json b/packages/eslint-config-custom/package.json index 0cf8f85421..30efd8e4c4 100644 --- a/packages/eslint-config-custom/package.json +++ b/packages/eslint-config-custom/package.json @@ -1,6 +1,6 @@ { "name": "@webstudio-is/eslint-config-custom", - "version": "0.1.0", + "version": "1.0.0", "main": "index.js", "license": "MIT", "dependencies": { From 3760aa18abf0de743812d9329656e3a75d4098f6 Mon Sep 17 00:00:00 2001 From: Andras Bacsai Date: Fri, 22 Jul 2022 14:54:18 +0000 Subject: [PATCH 09/57] bump packages version --- packages/jest-config/package.json | 2 +- packages/tsconfig/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/jest-config/package.json b/packages/jest-config/package.json index 4cb8210ce8..2e710e9dfc 100644 --- a/packages/jest-config/package.json +++ b/packages/jest-config/package.json @@ -1,6 +1,6 @@ { "name": "@webstudio-is/jest-config", - "version": "0.1.0", + "version": "1.0.0", "license": "MIT", "dependencies": { "@types/jest": "^27.4.1", diff --git a/packages/tsconfig/package.json b/packages/tsconfig/package.json index f68ef3fdd2..56f2bd444d 100644 --- a/packages/tsconfig/package.json +++ b/packages/tsconfig/package.json @@ -1,6 +1,6 @@ { "name": "@webstudio-is/tsconfig", - "version": "0.1.0", + "version": "1.0.0", "private": false, "main": "index.js", "files": [ From 90030e3b35ce8cd5e54d42221237b063f2b91b2a Mon Sep 17 00:00:00 2001 From: Andras Bacsai Date: Fri, 22 Jul 2022 19:18:21 +0000 Subject: [PATCH 10/57] fix: eslint --- .eslintrc.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.eslintrc.js b/.eslintrc.js index 46722ae2da..92f30898c7 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,5 +1,5 @@ module.exports = { root: true, // This tells ESLint to load the config from the package `eslint-config-custom` - extends: ["custom"], + extends: ["@webstudio-is/eslint-config-custom"], }; From e90fb68ca745993483b8e061cbbece869869fe86 Mon Sep 17 00:00:00 2001 From: Andras Bacsai Date: Fri, 22 Jul 2022 19:21:43 +0000 Subject: [PATCH 11/57] fix: jest for asset-uploader --- packages/asset-uploader/jest.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/asset-uploader/jest.config.js b/packages/asset-uploader/jest.config.js index 03c0db11ea..8d742b1b6c 100644 --- a/packages/asset-uploader/jest.config.js +++ b/packages/asset-uploader/jest.config.js @@ -1,5 +1,5 @@ // eslint-disable-next-line -const base = require("jest-config/jest.config.js"); +const base = require("@webstudio-is/jest-config/jest.config.js"); module.exports = { ...base, From 5df30b348962a193a7a031bec55fa0e0e699d1db Mon Sep 17 00:00:00 2001 From: Andras Bacsai Date: Fri, 22 Jul 2022 19:32:23 +0000 Subject: [PATCH 12/57] fix: tsconfig for prisma-client --- packages/prisma-client/tsconfig.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/prisma-client/tsconfig.json b/packages/prisma-client/tsconfig.json index e895781976..ff828da22f 100644 --- a/packages/prisma-client/tsconfig.json +++ b/packages/prisma-client/tsconfig.json @@ -1,6 +1,6 @@ // Extends can't use node's resolution rn https://github.com/dividab/tsconfig-paths/issues/209#issuecomment-1177261091 { - "extends": "../../node_modules/tsconfig/base.json", + "extends": "../../node_modules/@webstudio-is/tsconfig/base.json", "include": ["./src/**/*.ts"], "compilerOptions": { "module": "commonjs", From 2e959ed1d845423857c7e732a3c11683424900f6 Mon Sep 17 00:00:00 2001 From: Andras Bacsai Date: Fri, 22 Jul 2022 21:05:36 +0000 Subject: [PATCH 13/57] fix mistake --- apps/designer/tsconfig.json | 13 +------------ 1 file changed, 1 insertion(+), 12 deletions(-) diff --git a/apps/designer/tsconfig.json b/apps/designer/tsconfig.json index f30c095e48..4ce92c95f5 100644 --- a/apps/designer/tsconfig.json +++ b/apps/designer/tsconfig.json @@ -5,17 +5,6 @@ "paths": { "~/*": ["app/*"] }, - "baseUrl": ".", - "allowJs": true, - "forceConsistentCasingInFileNames": true, - "lib": ["DOM", "DOM.Iterable", "ES2019"], - "strict": true, - "target": "ES2019", - "esModuleInterop": true, - "isolatedModules": true, - "jsx": "react-jsx", - "moduleResolution": "node", - "noEmit": true, - "resolveJsonModule": true + "baseUrl": "." } } From 4466e747a84949b1b0bfb41965ea7f04e885567a Mon Sep 17 00:00:00 2001 From: Andras Bacsai Date: Fri, 22 Jul 2022 21:07:32 +0000 Subject: [PATCH 14/57] rename jest.config.js to index.js in packages --- packages/asset-uploader/jest.config.js | 2 +- packages/jest-config/{jest.config.js => index.js} | 0 packages/jest-config/package.json | 2 +- packages/react-sdk/jest.config.js | 2 +- 4 files changed, 3 insertions(+), 3 deletions(-) rename packages/jest-config/{jest.config.js => index.js} (100%) diff --git a/packages/asset-uploader/jest.config.js b/packages/asset-uploader/jest.config.js index 8d742b1b6c..9eae0843c6 100644 --- a/packages/asset-uploader/jest.config.js +++ b/packages/asset-uploader/jest.config.js @@ -1,5 +1,5 @@ // eslint-disable-next-line -const base = require("@webstudio-is/jest-config/jest.config.js"); +const base = require("@webstudio-is/jest-config"); module.exports = { ...base, diff --git a/packages/jest-config/jest.config.js b/packages/jest-config/index.js similarity index 100% rename from packages/jest-config/jest.config.js rename to packages/jest-config/index.js diff --git a/packages/jest-config/package.json b/packages/jest-config/package.json index 2e710e9dfc..001d6d9a39 100644 --- a/packages/jest-config/package.json +++ b/packages/jest-config/package.json @@ -1,6 +1,6 @@ { "name": "@webstudio-is/jest-config", - "version": "1.0.0", + "version": "1.0.1", "license": "MIT", "dependencies": { "@types/jest": "^27.4.1", diff --git a/packages/react-sdk/jest.config.js b/packages/react-sdk/jest.config.js index 8d742b1b6c..9eae0843c6 100644 --- a/packages/react-sdk/jest.config.js +++ b/packages/react-sdk/jest.config.js @@ -1,5 +1,5 @@ // eslint-disable-next-line -const base = require("@webstudio-is/jest-config/jest.config.js"); +const base = require("@webstudio-is/jest-config"); module.exports = { ...base, From 40a95650a72056ca884407177343429775692d16 Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Tue, 26 Jul 2022 14:40:19 +0200 Subject: [PATCH 15/57] start work --- .../sidebar-left/panels/asset-manager.tsx | 46 ++++++++++++------- .../sidebar-left/panels/components/image.tsx | 14 +++++- apps/designer/app/routes/designer/$id.tsx | 26 +++++++++-- packages/asset-uploader/src/db/delete.ts | 12 +++++ packages/asset-uploader/src/db/index.ts | 1 + packages/asset-uploader/src/upload.ts | 3 +- 6 files changed, 79 insertions(+), 23 deletions(-) create mode 100644 packages/asset-uploader/src/db/delete.ts diff --git a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx index 80db7345aa..667bb3d680 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx @@ -2,39 +2,52 @@ import { ImageIcon } from "~/shared/icons"; import { Flex, Grid, Heading } from "~/shared/design-system"; import { useEffect, useState } from "react"; import { useActionData } from "@remix-run/react"; -import { Asset } from "@webstudio-is/prisma-client"; +import { Asset as BaseAsset } from "@webstudio-is/prisma-client"; import { AssetManagerImage } from "./components/image"; import { AddAnAssetForm } from "./components/add-an-asset-form"; import { UploadingAsset } from "../types"; -export const TabContent = ({ - assets: baseAssets, -}: { - assets: Array; -}) => { - const newImages = useActionData(); +type Asset = BaseAsset | UploadingAsset; - const [assets, setAssets] = useState(baseAssets); +export const useAssetsState = (baseAssets: Array) => { + const imageChanges = useActionData(); + + const [assets, setAssets] = useState(baseAssets); useEffect(() => { - if (newImages?.length) { + if (imageChanges?.uploadAssets?.length) { setAssets((currentAssets) => [ - ...newImages, + ...imageChanges.uploadAsset, ...currentAssets.filter((asset) => asset.status !== "uploading"), ]); } - }, [newImages]); + if (imageChanges?.deletedAsset?.id) { + setAssets((currentAssets) => [ + ...currentAssets.filter( + (asset) => asset.id !== imageChanges.deletedAsset.id + ), + ]); + } + }, [imageChanges]); + const onUploadAsset = (uploadedAssets: Array) => + setAssets((assets) => [...uploadedAssets, ...assets]); + + return { assets, onUploadAsset }; +}; + +export const TabContent = ({ + assets: baseAssets, +}: { + assets: Array; +}) => { + const { assets, onUploadAsset } = useAssetsState(baseAssets); return ( Assets - ) => - setAssets((assets) => [...uploadedAssets, ...assets]) - } - /> + {assets.map((asset) => ( @@ -43,6 +56,7 @@ export const TabContent = ({ path={asset.path} alt={asset.alt || asset.name} status={asset.status} + id={asset.id} /> ))} diff --git a/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx b/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx index 369b850e82..159fd648b7 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx @@ -1,9 +1,10 @@ import { useEffect, useState } from "react"; -import { Box, ProgressBar } from "~/shared/design-system"; +import { Box, Button, ProgressBar } from "~/shared/design-system"; import { useInterval } from "react-use"; import placeholderImage from "~/shared/images/image-placeholder.svg"; import brokenImage from "~/shared/images/broken-image-placeholder.svg"; import { Asset } from "@webstudio-is/prisma-client"; +import { useSubmit } from "@remix-run/react"; const useImageWithFallback = ({ path }: { path: string }) => { const [src, setSrc] = useState(placeholderImage); @@ -22,11 +23,14 @@ export const AssetManagerImage = ({ path, alt, status, + id, }: { + id: string; path: string; alt?: string; status?: Asset["status"]; }) => { + const submit = useSubmit(); const isUploading = status === "uploading"; const src = useImageWithFallback({ path }); const [progressBarPercentage, setProgressBarPercentage] = useState(0); @@ -41,6 +45,11 @@ export const AssetManagerImage = ({ isUploading ? 100 : null ); + const deleteAsset = () => { + const formData = new FormData(); + formData.append("assetId", id); + submit(formData, { method: "delete" }); + }; return ( + {isUploading && ( { if (params.id === undefined) throw new Error("Project id undefined"); + if (request.method === "DELETE") { + const formData = await request.formData(); + if (formData.get("assetId")) { + const id = formData.get("assetId") as string; + const deletedAsset = await deleteAsset(id); + + return { deletedAsset }; + } + + return {}; + } if (request.method === "POST") { try { const assets = await uploadAssets({ @@ -42,10 +56,12 @@ export const action: ActionFunction = async ({ request, params }) => { projectId: params.id, dirname: __dirname, }); - return assets.map((asset: Asset) => ({ - ...asset, - status: "uploaded", - })); + return { + uploadedAssets: assets.map((asset: Asset) => ({ + ...asset, + status: "uploaded", + })), + }; } catch (error) { if (error instanceof Error) { return { diff --git a/packages/asset-uploader/src/db/delete.ts b/packages/asset-uploader/src/db/delete.ts new file mode 100644 index 0000000000..ae237a4edc --- /dev/null +++ b/packages/asset-uploader/src/db/delete.ts @@ -0,0 +1,12 @@ +import { prisma, Asset } from "@webstudio-is/prisma-client"; +import { getAssetPath } from "../helpers/get-asset-path"; + +export const deleteAsset = async (assetId: Asset["id"]): Promise => { + if (typeof assetId !== "string") { + throw new Error("Asset ID required"); + } + + const removedAsset = await prisma.asset.delete({ where: { id: assetId } }); + + return { ...removedAsset, path: getAssetPath(removedAsset) }; +}; diff --git a/packages/asset-uploader/src/db/index.ts b/packages/asset-uploader/src/db/index.ts index 52122ec551..7a4923ced3 100644 --- a/packages/asset-uploader/src/db/index.ts +++ b/packages/asset-uploader/src/db/index.ts @@ -1,2 +1,3 @@ export * from "./create"; export * from "./load"; +export * from "./delete"; diff --git a/packages/asset-uploader/src/upload.ts b/packages/asset-uploader/src/upload.ts index 34fcf6075e..42afd7c58a 100644 --- a/packages/asset-uploader/src/upload.ts +++ b/packages/asset-uploader/src/upload.ts @@ -7,6 +7,7 @@ import { s3UploadHandler } from "./targets/s3/handler"; import { uploadToS3 } from "./targets/s3/uploader"; import { uploadToDisk } from "./targets/disk/upload"; import { assetEnvVariables, fsEnvVariables, s3EnvVariables } from "./schema"; +import { Asset } from "@webstudio-is/prisma-client"; const isS3Upload = s3EnvVariables.safeParse(process.env).success; const fsUploadVars = fsEnvVariables.parse(process.env); @@ -23,7 +24,7 @@ export const uploadAssets = async ({ request: Request; projectId: string; dirname: string; -}) => { +}): Promise => { const uploads = path.join(dirname, "../public"); const directory = path.join(uploads, fsUploadVars.FILE_UPLOAD_PATH); const formData = await unstable_parseMultipartFormData( From 066c83d836329e88895c0c9f45e48570df66871f Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Tue, 26 Jul 2022 14:53:03 +0200 Subject: [PATCH 16/57] remove file from aws --- apps/designer/app/routes/designer/$id.tsx | 2 +- packages/asset-uploader/src/db/delete.ts | 2 +- packages/asset-uploader/src/delete.ts | 25 +++++++++++++++++++ packages/asset-uploader/src/index.ts | 1 + .../asset-uploader/src/targets/s3/client.ts | 12 +++++++++ .../asset-uploader/src/targets/s3/handler.ts | 14 +++-------- 6 files changed, 43 insertions(+), 13 deletions(-) create mode 100644 packages/asset-uploader/src/delete.ts create mode 100644 packages/asset-uploader/src/targets/s3/client.ts diff --git a/apps/designer/app/routes/designer/$id.tsx b/apps/designer/app/routes/designer/$id.tsx index a765f6e8eb..6a3c60aad9 100644 --- a/apps/designer/app/routes/designer/$id.tsx +++ b/apps/designer/app/routes/designer/$id.tsx @@ -42,7 +42,7 @@ export const action: ActionFunction = async ({ request, params }) => { const formData = await request.formData(); if (formData.get("assetId")) { const id = formData.get("assetId") as string; - const deletedAsset = await deleteAsset(id); + const deletedAsset = await deleteAsset({ id }); return { deletedAsset }; } diff --git a/packages/asset-uploader/src/db/delete.ts b/packages/asset-uploader/src/db/delete.ts index ae237a4edc..9898fbe420 100644 --- a/packages/asset-uploader/src/db/delete.ts +++ b/packages/asset-uploader/src/db/delete.ts @@ -1,7 +1,7 @@ import { prisma, Asset } from "@webstudio-is/prisma-client"; import { getAssetPath } from "../helpers/get-asset-path"; -export const deleteAsset = async (assetId: Asset["id"]): Promise => { +export const deleteAssetInDb = async (assetId: Asset["id"]): Promise => { if (typeof assetId !== "string") { throw new Error("Asset ID required"); } diff --git a/packages/asset-uploader/src/delete.ts b/packages/asset-uploader/src/delete.ts new file mode 100644 index 0000000000..72deede99c --- /dev/null +++ b/packages/asset-uploader/src/delete.ts @@ -0,0 +1,25 @@ +import { DeleteObjectCommand } from "@aws-sdk/client-s3"; +import { prisma, Asset } from "@webstudio-is/prisma-client"; +import { deleteAssetInDb } from "./db"; +import { s3EnvVariables } from "./schema"; +import { s3Client } from "./targets/s3/client"; + +export const deleteAsset = async ({ id }: { id: string }): Promise => { + const s3Envs = s3EnvVariables.parse(process.env); + const currentAsset = await prisma?.asset.findUnique({ + where: { id }, + }); + if (currentAsset && currentAsset.name) { + if (currentAsset.location === "REMOTE") { + await s3Client.send( + new DeleteObjectCommand({ + Bucket: s3Envs.S3_BUCKET, + Key: currentAsset?.name, + }) + ); + + return await deleteAssetInDb(id); + } + } + throw new Error("Asset does not exist"); +}; diff --git a/packages/asset-uploader/src/index.ts b/packages/asset-uploader/src/index.ts index 22321d4d77..25948908ae 100644 --- a/packages/asset-uploader/src/index.ts +++ b/packages/asset-uploader/src/index.ts @@ -1,2 +1,3 @@ export * from "./upload"; +export * from "./delete"; export * from "./db"; diff --git a/packages/asset-uploader/src/targets/s3/client.ts b/packages/asset-uploader/src/targets/s3/client.ts new file mode 100644 index 0000000000..db35152445 --- /dev/null +++ b/packages/asset-uploader/src/targets/s3/client.ts @@ -0,0 +1,12 @@ +import { S3Client } from "@aws-sdk/client-s3"; +import { s3EnvVariables } from "../../schema"; + +const s3Envs = s3EnvVariables.parse(process.env); +export const s3Client = new S3Client({ + endpoint: s3Envs.S3_ENDPOINT, + region: s3Envs.S3_REGION, + credentials: { + accessKeyId: s3Envs.S3_ACCESS_KEY_ID, + secretAccessKey: s3Envs.S3_SECRET_ACCESS_KEY, + }, +}); diff --git a/packages/asset-uploader/src/targets/s3/handler.ts b/packages/asset-uploader/src/targets/s3/handler.ts index a2573ff9c1..624463fe9c 100644 --- a/packages/asset-uploader/src/targets/s3/handler.ts +++ b/packages/asset-uploader/src/targets/s3/handler.ts @@ -1,5 +1,5 @@ import { UploadHandlerPart } from "@remix-run/node"; -import { PutObjectCommandInput, S3Client } from "@aws-sdk/client-s3"; +import { PutObjectCommandInput } from "@aws-sdk/client-s3"; import { Upload } from "@aws-sdk/lib-storage"; import ObjectID from "bson-objectid"; @@ -14,6 +14,7 @@ import { getFilenameAndExtension, } from "../../helpers/array-buffer-helpers"; import { Location } from "@webstudio-is/prisma-client"; +import { s3Client } from "./client"; type S3UploadHandler = ({ file, @@ -57,16 +58,7 @@ export const s3UploadHandler: S3UploadHandler = async ({ }, }; - const client = new S3Client({ - endpoint: s3Envs.S3_ENDPOINT, - region: s3Envs.S3_REGION, - credentials: { - accessKeyId: s3Envs.S3_ACCESS_KEY_ID, - secretAccessKey: s3Envs.S3_SECRET_ACCESS_KEY, - }, - }); - - const upload = new Upload({ client, params }); + const upload = new Upload({ client: s3Client, params }); ImagesUploadedSuccess.parse(await upload.done()); const image = sharp(uint8Array); From fc20b05da80719a2a66783d1030671b0da524ea1 Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Tue, 26 Jul 2022 18:08:36 +0200 Subject: [PATCH 17/57] add tests --- .../sidebar-left/panels/asset-manager.tsx | 8 +--- .../sidebar-left/panels/components/image.tsx | 10 ++--- apps/designer/app/routes/designer/$id.tsx | 3 +- packages/asset-uploader/src/delete.ts | 26 ++++++++++--- .../src/helpers/get-image-local-path.test.ts | 39 +++++++++++++++++++ .../src/helpers/get-image-local-path.ts | 10 +++++ .../asset-uploader/src/targets/s3/client.ts | 20 +++++----- .../asset-uploader/src/targets/s3/handler.ts | 4 +- packages/asset-uploader/src/upload.ts | 9 ++--- 9 files changed, 94 insertions(+), 35 deletions(-) create mode 100644 packages/asset-uploader/src/helpers/get-image-local-path.test.ts create mode 100644 packages/asset-uploader/src/helpers/get-image-local-path.ts diff --git a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx index 667bb3d680..483c0f413e 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx @@ -51,13 +51,7 @@ export const TabContent = ({ {assets.map((asset) => ( - + ))} diff --git a/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx b/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx index 159fd648b7..de7754426d 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx @@ -5,6 +5,7 @@ import placeholderImage from "~/shared/images/image-placeholder.svg"; import brokenImage from "~/shared/images/broken-image-placeholder.svg"; import { Asset } from "@webstudio-is/prisma-client"; import { useSubmit } from "@remix-run/react"; +import { UploadingAsset } from "../../types"; const useImageWithFallback = ({ path }: { path: string }) => { const [src, setSrc] = useState(placeholderImage); @@ -23,13 +24,9 @@ export const AssetManagerImage = ({ path, alt, status, + name, id, -}: { - id: string; - path: string; - alt?: string; - status?: Asset["status"]; -}) => { +}: Asset | UploadingAsset) => { const submit = useSubmit(); const isUploading = status === "uploading"; const src = useImageWithFallback({ path }); @@ -48,6 +45,7 @@ export const AssetManagerImage = ({ const deleteAsset = () => { const formData = new FormData(); formData.append("assetId", id); + formData.append("assetName", name); submit(formData, { method: "delete" }); }; return ( diff --git a/apps/designer/app/routes/designer/$id.tsx b/apps/designer/app/routes/designer/$id.tsx index 6a3c60aad9..4f8b4cf215 100644 --- a/apps/designer/app/routes/designer/$id.tsx +++ b/apps/designer/app/routes/designer/$id.tsx @@ -42,7 +42,8 @@ export const action: ActionFunction = async ({ request, params }) => { const formData = await request.formData(); if (formData.get("assetId")) { const id = formData.get("assetId") as string; - const deletedAsset = await deleteAsset({ id }); + const name = formData.get("assetName") as string; + const deletedAsset = await deleteAsset({ id, name, dirname: __dirname }); return { deletedAsset }; } diff --git a/packages/asset-uploader/src/delete.ts b/packages/asset-uploader/src/delete.ts index 72deede99c..57ed93130f 100644 --- a/packages/asset-uploader/src/delete.ts +++ b/packages/asset-uploader/src/delete.ts @@ -1,23 +1,39 @@ import { DeleteObjectCommand } from "@aws-sdk/client-s3"; import { prisma, Asset } from "@webstudio-is/prisma-client"; +import { unlink } from "fs/promises"; +import path from "path"; import { deleteAssetInDb } from "./db"; +import { getImageLocalDirectory } from "./helpers/get-image-local-path"; import { s3EnvVariables } from "./schema"; -import { s3Client } from "./targets/s3/client"; +import { getS3Client } from "./targets/s3/client"; -export const deleteAsset = async ({ id }: { id: string }): Promise => { - const s3Envs = s3EnvVariables.parse(process.env); +export const deleteAsset = async ({ + id, + name, + dirname, +}: { + id: string; + dirname: string; + name: string; +}): Promise => { const currentAsset = await prisma?.asset.findUnique({ where: { id }, }); if (currentAsset && currentAsset.name) { if (currentAsset.location === "REMOTE") { - await s3Client.send( + const s3Envs = s3EnvVariables.parse(process.env); + await getS3Client().send( new DeleteObjectCommand({ Bucket: s3Envs.S3_BUCKET, - Key: currentAsset?.name, + Key: name, }) ); + return await deleteAssetInDb(id); + } else { + const directory = await getImageLocalDirectory(dirname); + await unlink(path.join(directory, name)); + return await deleteAssetInDb(id); } } diff --git a/packages/asset-uploader/src/helpers/get-image-local-path.test.ts b/packages/asset-uploader/src/helpers/get-image-local-path.test.ts new file mode 100644 index 0000000000..b1c712a6e1 --- /dev/null +++ b/packages/asset-uploader/src/helpers/get-image-local-path.test.ts @@ -0,0 +1,39 @@ +/* eslint-disable @typescript-eslint/no-var-requires */ +import { Decimal } from "@prisma/client/runtime"; +import { Location } from "@webstudio-is/prisma-client"; +import { getImageLocalDirectory } from "./get-image-local-path"; + +const commonAsset = { + id: "sa-546", + width: new Decimal(200), + height: new Decimal(200), + projectId: "id", + size: 2135, + format: "png", + createdAt: new Date(), + alt: "", +}; + +describe("getAssetPath", () => { + const OLD_ENV = process.env; + + beforeEach(() => { + jest.resetModules(); + process.env = OLD_ENV; + }); + + afterAll(() => { + process.env = OLD_ENV; + }); + + describe("getImageLocalDirectory", () => { + test("creates path", () => { + expect(getImageLocalDirectory("uploads")).toBe("public/uploads"); + }); + test("changes path with env", () => { + process.env.FILE_UPLOAD_PATH = "test"; + const { getImageLocalDirectory } = require("./get-image-local-path"); + expect(getImageLocalDirectory("uploads")).toBe("public/test"); + }); + }); +}); diff --git a/packages/asset-uploader/src/helpers/get-image-local-path.ts b/packages/asset-uploader/src/helpers/get-image-local-path.ts new file mode 100644 index 0000000000..71d68909f0 --- /dev/null +++ b/packages/asset-uploader/src/helpers/get-image-local-path.ts @@ -0,0 +1,10 @@ +import path from "path"; +import { fsEnvVariables } from "../schema"; +const fsUploadVars = fsEnvVariables.parse(process.env); + +export const getImageLocalDirectory = (dirname: string) => { + const uploads = path.join(dirname, "../public"); + const directory = path.join(uploads, fsUploadVars.FILE_UPLOAD_PATH); + + return directory; +}; diff --git a/packages/asset-uploader/src/targets/s3/client.ts b/packages/asset-uploader/src/targets/s3/client.ts index db35152445..0532597bcb 100644 --- a/packages/asset-uploader/src/targets/s3/client.ts +++ b/packages/asset-uploader/src/targets/s3/client.ts @@ -1,12 +1,14 @@ import { S3Client } from "@aws-sdk/client-s3"; import { s3EnvVariables } from "../../schema"; -const s3Envs = s3EnvVariables.parse(process.env); -export const s3Client = new S3Client({ - endpoint: s3Envs.S3_ENDPOINT, - region: s3Envs.S3_REGION, - credentials: { - accessKeyId: s3Envs.S3_ACCESS_KEY_ID, - secretAccessKey: s3Envs.S3_SECRET_ACCESS_KEY, - }, -}); +export const getS3Client = () => { + const s3Envs = s3EnvVariables.parse(process.env); + return new S3Client({ + endpoint: s3Envs.S3_ENDPOINT, + region: s3Envs.S3_REGION, + credentials: { + accessKeyId: s3Envs.S3_ACCESS_KEY_ID, + secretAccessKey: s3Envs.S3_SECRET_ACCESS_KEY, + }, + }); +}; diff --git a/packages/asset-uploader/src/targets/s3/handler.ts b/packages/asset-uploader/src/targets/s3/handler.ts index 624463fe9c..24440b0050 100644 --- a/packages/asset-uploader/src/targets/s3/handler.ts +++ b/packages/asset-uploader/src/targets/s3/handler.ts @@ -14,7 +14,7 @@ import { getFilenameAndExtension, } from "../../helpers/array-buffer-helpers"; import { Location } from "@webstudio-is/prisma-client"; -import { s3Client } from "./client"; +import { getS3Client } from "./client"; type S3UploadHandler = ({ file, @@ -58,7 +58,7 @@ export const s3UploadHandler: S3UploadHandler = async ({ }, }; - const upload = new Upload({ client: s3Client, params }); + const upload = new Upload({ client: getS3Client(), params }); ImagesUploadedSuccess.parse(await upload.done()); const image = sharp(uint8Array); diff --git a/packages/asset-uploader/src/upload.ts b/packages/asset-uploader/src/upload.ts index 42afd7c58a..1b57199ccd 100644 --- a/packages/asset-uploader/src/upload.ts +++ b/packages/asset-uploader/src/upload.ts @@ -1,4 +1,3 @@ -import path from "path"; import { unstable_createFileUploadHandler, unstable_parseMultipartFormData, @@ -6,11 +5,12 @@ import { import { s3UploadHandler } from "./targets/s3/handler"; import { uploadToS3 } from "./targets/s3/uploader"; import { uploadToDisk } from "./targets/disk/upload"; -import { assetEnvVariables, fsEnvVariables, s3EnvVariables } from "./schema"; +import { assetEnvVariables, s3EnvVariables } from "./schema"; import { Asset } from "@webstudio-is/prisma-client"; +import { getImageLocalDirectory } from "./helpers/get-image-local-path"; const isS3Upload = s3EnvVariables.safeParse(process.env).success; -const fsUploadVars = fsEnvVariables.parse(process.env); + const commonUploadVars = assetEnvVariables.parse(process.env); // user inputs the max value in mb and we transform it to bytes @@ -25,8 +25,7 @@ export const uploadAssets = async ({ projectId: string; dirname: string; }): Promise => { - const uploads = path.join(dirname, "../public"); - const directory = path.join(uploads, fsUploadVars.FILE_UPLOAD_PATH); + const directory = await getImageLocalDirectory(dirname); const formData = await unstable_parseMultipartFormData( request, isS3Upload From 0c643bacdcd9e3fa813983465c396afcfe8d50b8 Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Tue, 26 Jul 2022 18:28:48 +0200 Subject: [PATCH 18/57] add tooltip --- .../sidebar-left/panels/components/image.tsx | 41 +++++++++++++++++-- .../design-system/components/tooltip.tsx | 18 ++++---- .../shared/design-system/stitches.config.ts | 2 + 3 files changed, 49 insertions(+), 12 deletions(-) diff --git a/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx b/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx index de7754426d..1a270b9c65 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx @@ -1,11 +1,18 @@ import { useEffect, useState } from "react"; -import { Box, Button, ProgressBar } from "~/shared/design-system"; +import { + Box, + Button, + Flex, + ProgressBar, + Tooltip, +} from "~/shared/design-system"; import { useInterval } from "react-use"; import placeholderImage from "~/shared/images/image-placeholder.svg"; import brokenImage from "~/shared/images/broken-image-placeholder.svg"; import { Asset } from "@webstudio-is/prisma-client"; import { useSubmit } from "@remix-run/react"; import { UploadingAsset } from "../../types"; +import { Cross2Icon } from "@radix-ui/react-icons"; const useImageWithFallback = ({ path }: { path: string }) => { const [src, setSrc] = useState(placeholderImage); @@ -30,6 +37,7 @@ export const AssetManagerImage = ({ const submit = useSubmit(); const isUploading = status === "uploading"; const src = useImageWithFallback({ path }); + const [isToolTipOpen, setTolltipOpen] = useState(false); const [progressBarPercentage, setProgressBarPercentage] = useState(0); // @todo rewrite this fake indication to show real progress @@ -46,6 +54,7 @@ export const AssetManagerImage = ({ const formData = new FormData(); formData.append("assetId", id); formData.append("assetName", name); + setTolltipOpen(false); submit(formData, { method: "delete" }); }; return ( @@ -74,9 +83,33 @@ export const AssetManagerImage = ({ ...(isUploading ? { filter: "blur(1px)", opacity: 0.7 } : {}), }} > - + + Are you sure you want to delete this asset? + + + } + > + + {isUploading && ( & React.ComponentProps & { @@ -10,6 +11,7 @@ type TooltipProps = React.ComponentProps & content: React.ReactNode; multiline?: boolean; delayDuration?: number; + css?: CSS; }; const Content = styled(TooltipPrimitive.Content, { @@ -29,6 +31,13 @@ const Content = styled(TooltipPrimitive.Content, { }, }); +const Arrow = styled(TooltipPrimitive.Arrow, { + fill: "$loContrast", + stroke: "$slate7", + strokeWidth: "$1", + marginTop: -0.5, +}); + export const Tooltip = ({ children, content, @@ -66,14 +75,7 @@ export const Tooltip = ({ {content} - + diff --git a/apps/designer/app/shared/design-system/stitches.config.ts b/apps/designer/app/shared/design-system/stitches.config.ts index 9f5d9140fa..9947714ec4 100644 --- a/apps/designer/app/shared/design-system/stitches.config.ts +++ b/apps/designer/app/shared/design-system/stitches.config.ts @@ -219,6 +219,7 @@ export const { 7: "45px", 8: "65px", 9: "80px", + 10: "105px", }, sizes: { 1: "5px", @@ -230,6 +231,7 @@ export const { 7: "45px", 8: "65px", 9: "80px", + 10: "105px", }, // space: { // 1: '4px', From 048c5ddb307654ec2f35aed52cb6f34c59313e6c Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Tue, 26 Jul 2022 18:31:36 +0200 Subject: [PATCH 19/57] small renames --- .../sidebar-left/panels/asset-manager.tsx | 4 +- .../sidebar-left/panels/components/image.tsx | 54 ++++++++++--------- 2 files changed, 30 insertions(+), 28 deletions(-) diff --git a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx index 483c0f413e..75105ca579 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx @@ -16,9 +16,9 @@ export const useAssetsState = (baseAssets: Array) => { const [assets, setAssets] = useState(baseAssets); useEffect(() => { - if (imageChanges?.uploadAssets?.length) { + if (imageChanges?.uploadedAssets?.length) { setAssets((currentAssets) => [ - ...imageChanges.uploadAsset, + ...imageChanges.uploadedAssets, ...currentAssets.filter((asset) => asset.status !== "uploading"), ]); } diff --git a/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx b/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx index 1a270b9c65..84bf91b0eb 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx @@ -83,33 +83,35 @@ export const AssetManagerImage = ({ ...(isUploading ? { filter: "blur(1px)", opacity: 0.7 } : {}), }} > - - Are you sure you want to delete this asset? - - - } - > - + + } > - - - + + + )} {isUploading && ( Date: Tue, 26 Jul 2022 18:48:42 +0200 Subject: [PATCH 20/57] clarity fixes --- .../sidebar-left/panels/asset-manager.tsx | 5 +--- .../sidebar-left/panels/components/image.tsx | 11 ++----- .../designer/features/sidebar-left/types.ts | 5 ++-- apps/designer/app/routes/designer/$id.tsx | 29 +++++++++++++------ packages/asset-uploader/src/db/load.ts | 2 +- .../src/helpers/get-image-local-path.test.ts | 13 --------- 6 files changed, 27 insertions(+), 38 deletions(-) diff --git a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx index 75105ca579..f7919c18ca 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx @@ -2,13 +2,10 @@ import { ImageIcon } from "~/shared/icons"; import { Flex, Grid, Heading } from "~/shared/design-system"; import { useEffect, useState } from "react"; import { useActionData } from "@remix-run/react"; -import { Asset as BaseAsset } from "@webstudio-is/prisma-client"; import { AssetManagerImage } from "./components/image"; import { AddAnAssetForm } from "./components/add-an-asset-form"; -import { UploadingAsset } from "../types"; - -type Asset = BaseAsset | UploadingAsset; +import { Asset } from "../types"; export const useAssetsState = (baseAssets: Array) => { const imageChanges = useActionData(); diff --git a/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx b/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx index 84bf91b0eb..4df97f776b 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx @@ -9,9 +9,8 @@ import { import { useInterval } from "react-use"; import placeholderImage from "~/shared/images/image-placeholder.svg"; import brokenImage from "~/shared/images/broken-image-placeholder.svg"; -import { Asset } from "@webstudio-is/prisma-client"; import { useSubmit } from "@remix-run/react"; -import { UploadingAsset } from "../../types"; +import { Asset } from "~/designer/features/sidebar-left/types"; import { Cross2Icon } from "@radix-ui/react-icons"; const useImageWithFallback = ({ path }: { path: string }) => { @@ -27,13 +26,7 @@ const useImageWithFallback = ({ path }: { path: string }) => { return src; }; -export const AssetManagerImage = ({ - path, - alt, - status, - name, - id, -}: Asset | UploadingAsset) => { +export const AssetManagerImage = ({ path, alt, status, name, id }: Asset) => { const submit = useSubmit(); const isUploading = status === "uploading"; const src = useImageWithFallback({ path }); diff --git a/apps/designer/app/designer/features/sidebar-left/types.ts b/apps/designer/app/designer/features/sidebar-left/types.ts index 29fd62a28d..4783a96849 100644 --- a/apps/designer/app/designer/features/sidebar-left/types.ts +++ b/apps/designer/app/designer/features/sidebar-left/types.ts @@ -1,9 +1,10 @@ -import { Asset } from "@webstudio-is/prisma-client"; +import { Asset as BaseAsset } from "@webstudio-is/prisma-client"; import { panels } from "./panels"; export type TabName = keyof typeof panels | "none"; export type UploadingAsset = Pick< - Asset, + BaseAsset, "id" | "status" | "name" | "path" | "alt" >; +export type Asset = BaseAsset | UploadingAsset; diff --git a/apps/designer/app/routes/designer/$id.tsx b/apps/designer/app/routes/designer/$id.tsx index 4f8b4cf215..4c4e8262ec 100644 --- a/apps/designer/app/routes/designer/$id.tsx +++ b/apps/designer/app/routes/designer/$id.tsx @@ -38,17 +38,28 @@ type Error = { export const action: ActionFunction = async ({ request, params }) => { if (params.id === undefined) throw new Error("Project id undefined"); - if (request.method === "DELETE") { - const formData = await request.formData(); - if (formData.get("assetId")) { - const id = formData.get("assetId") as string; - const name = formData.get("assetName") as string; - const deletedAsset = await deleteAsset({ id, name, dirname: __dirname }); + try { + if (request.method === "DELETE") { + const formData = await request.formData(); + if (formData.get("assetId")) { + const id = formData.get("assetId") as string; + const name = formData.get("assetName") as string; + const deletedAsset = await deleteAsset({ + id, + name, + dirname: __dirname, + }); - return { deletedAsset }; + return { deletedAsset }; + } + } + return { errors: "No asset was passed" }; + } catch (error) { + if (error instanceof Error) { + return { + errors: error.message, + }; } - - return {}; } if (request.method === "POST") { try { diff --git a/packages/asset-uploader/src/db/load.ts b/packages/asset-uploader/src/db/load.ts index 25cfa43872..9fde8948d2 100644 --- a/packages/asset-uploader/src/db/load.ts +++ b/packages/asset-uploader/src/db/load.ts @@ -5,7 +5,7 @@ export const loadByProject = async ( projectId?: Project["id"] ): Promise => { if (typeof projectId !== "string") { - throw new Error("Tree ID required"); + throw new Error("Project ID required"); } const assets = await prisma.asset.findMany({ diff --git a/packages/asset-uploader/src/helpers/get-image-local-path.test.ts b/packages/asset-uploader/src/helpers/get-image-local-path.test.ts index b1c712a6e1..6217a15ed9 100644 --- a/packages/asset-uploader/src/helpers/get-image-local-path.test.ts +++ b/packages/asset-uploader/src/helpers/get-image-local-path.test.ts @@ -1,19 +1,6 @@ /* eslint-disable @typescript-eslint/no-var-requires */ -import { Decimal } from "@prisma/client/runtime"; -import { Location } from "@webstudio-is/prisma-client"; import { getImageLocalDirectory } from "./get-image-local-path"; -const commonAsset = { - id: "sa-546", - width: new Decimal(200), - height: new Decimal(200), - projectId: "id", - size: 2135, - format: "png", - createdAt: new Date(), - alt: "", -}; - describe("getAssetPath", () => { const OLD_ENV = process.env; From e9ced8c2fa5a0b195bdce6e7896a0a2bac73f5ff Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Tue, 26 Jul 2022 18:51:30 +0200 Subject: [PATCH 21/57] add test cases --- apps/designer/docs/test-cases.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/apps/designer/docs/test-cases.md b/apps/designer/docs/test-cases.md index b991c78e17..224ee60065 100644 --- a/apps/designer/docs/test-cases.md +++ b/apps/designer/docs/test-cases.md @@ -74,3 +74,10 @@ - Add a Box component to the canvas - Open Props panel - See the default tag is provided and can be modified + +1. Asset manager + + - Open assets panel + - Upload an image + - Check it loads and shows a progress bar + - Delete an asset by clicking on the `x` icon and then the delete button in the tooltip From 5e1a0c1572a96aba9e39fdf5e4c3b73eaafb018f Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Tue, 26 Jul 2022 19:14:07 +0200 Subject: [PATCH 22/57] PR comments --- .github/pull_request_template.md | 2 +- apps/designer/app/routes/designer/$id.tsx | 26 +++++++++++-------- apps/designer/package.json | 5 ++-- packages/asset-uploader/src/delete.ts | 31 +++++++++++------------ yarn.lock | 5 ++++ 5 files changed, 39 insertions(+), 30 deletions(-) diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index cef4574ccc..9436f72f4e 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -14,7 +14,7 @@ ## Before merging -- [ ] tested locally and on preview environment (preview dev login: 5de6e) +- [ ] 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 diff --git a/apps/designer/app/routes/designer/$id.tsx b/apps/designer/app/routes/designer/$id.tsx index 4c4e8262ec..a81c8b573d 100644 --- a/apps/designer/app/routes/designer/$id.tsx +++ b/apps/designer/app/routes/designer/$id.tsx @@ -13,6 +13,7 @@ import { deleteAsset, loadByProject, } from "@webstudio-is/asset-uploader/index.server"; +import { zfd } from "zod-form-data"; export { links }; @@ -36,22 +37,25 @@ type Error = { errors: "string"; }; +const deleteAssetSchema = zfd.formData({ + assetId: zfd.text(), + assetName: zfd.text(), +}); + export const action: ActionFunction = async ({ request, params }) => { if (params.id === undefined) throw new Error("Project id undefined"); try { if (request.method === "DELETE") { - const formData = await request.formData(); - if (formData.get("assetId")) { - const id = formData.get("assetId") as string; - const name = formData.get("assetName") as string; - const deletedAsset = await deleteAsset({ - id, - name, - dirname: __dirname, - }); + const { assetId, assetName } = deleteAssetSchema.parse( + await request.formData() + ); + const deletedAsset = await deleteAsset({ + id: assetId, + name: assetName, + dirname: __dirname, + }); - return { deletedAsset }; - } + return { deletedAsset }; } return { errors: "No asset was passed" }; } catch (error) { diff --git a/apps/designer/package.json b/apps/designer/package.json index 928940c399..01afbb17cc 100644 --- a/apps/designer/package.json +++ b/apps/designer/package.json @@ -54,8 +54,8 @@ "@stitches/react": "^1.2.7", "@vercel/node": "^2.4.1", "@webstudio-is/asset-uploader": "*", - "@webstudio-is/react-sdk": "*", "@webstudio-is/prisma-client": "*", + "@webstudio-is/react-sdk": "*", "bson-objectid": "^2.0.2", "camelcase": "^6.3.0", "debug": "^4.3.4", @@ -89,7 +89,8 @@ "remix-auth-github": "^1.1.1", "remix-auth-google": "^1.1.0", "sharp": "^0.30.7", - "slugify": "^1.6.5" + "slugify": "^1.6.5", + "zod-form-data": "^1.2.1" }, "devDependencies": { "@babel/core": "^7.18.5", diff --git a/packages/asset-uploader/src/delete.ts b/packages/asset-uploader/src/delete.ts index 57ed93130f..716d355c75 100644 --- a/packages/asset-uploader/src/delete.ts +++ b/packages/asset-uploader/src/delete.ts @@ -19,23 +19,22 @@ export const deleteAsset = async ({ const currentAsset = await prisma?.asset.findUnique({ where: { id }, }); - if (currentAsset && currentAsset.name) { - if (currentAsset.location === "REMOTE") { - const s3Envs = s3EnvVariables.parse(process.env); - await getS3Client().send( - new DeleteObjectCommand({ - Bucket: s3Envs.S3_BUCKET, - Key: name, - }) - ); + if (!currentAsset) throw new Error("Asset does not exist"); - return await deleteAssetInDb(id); - } else { - const directory = await getImageLocalDirectory(dirname); - await unlink(path.join(directory, name)); + if (currentAsset.location === "REMOTE") { + const s3Envs = s3EnvVariables.parse(process.env); + await getS3Client().send( + new DeleteObjectCommand({ + Bucket: s3Envs.S3_BUCKET, + Key: name, + }) + ); - return await deleteAssetInDb(id); - } + return await deleteAssetInDb(id); + } else { + const directory = await getImageLocalDirectory(dirname); + await unlink(path.join(directory, name)); + + return await deleteAssetInDb(id); } - throw new Error("Asset does not exist"); }; diff --git a/yarn.lock b/yarn.lock index f89a7fbd79..d923059999 100644 --- a/yarn.lock +++ b/yarn.lock @@ -17989,6 +17989,11 @@ yocto-queue@^0.1.0: resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b" integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q== +zod-form-data@^1.2.1: + version "1.2.1" + resolved "https://registry.yarnpkg.com/zod-form-data/-/zod-form-data-1.2.1.tgz#6da07d7964765b464e959a75f0d797690ee477f7" + integrity sha512-L4zocmlzikYB9A2uVVj3OUKX/t3spOZTzQLOhoCXECn9w+eN3bw0D/KYGX4J72iLdCIwDP6YJyYwVXkx3WTu7A== + zod@^3.17.3: version "3.17.3" resolved "https://registry.yarnpkg.com/zod/-/zod-3.17.3.tgz#86abbc670ff0063a4588d85a4dcc917d6e4af2ba" From 140a93fb68aecec52fa975a213695080f81c2336 Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Tue, 26 Jul 2022 19:17:58 +0200 Subject: [PATCH 23/57] use zfd in other places --- apps/designer/app/routes/dashboard/index.tsx | 10 +++++++--- apps/designer/app/routes/rest/publish.ts | 10 +++++++--- 2 files changed, 14 insertions(+), 6 deletions(-) diff --git a/apps/designer/app/routes/dashboard/index.tsx b/apps/designer/app/routes/dashboard/index.tsx index 6dfbbf0ef8..92d903e1bf 100644 --- a/apps/designer/app/routes/dashboard/index.tsx +++ b/apps/designer/app/routes/dashboard/index.tsx @@ -10,12 +10,16 @@ import * as db from "~/shared/db"; import config from "~/config"; import { ensureUserCookie } from "~/shared/session"; import { authenticator } from "~/services/auth.server"; +import { zfd } from "zod-form-data"; export { links }; +const schema = zfd.formData({ + project: zfd.text(), +}); + export const action: ActionFunction = async ({ request }) => { - const formData = await request.formData(); - const title = formData.get("project"); - if (typeof title !== "string") return { errors: "Title required" }; + const { project: title } = schema.parse(await request.formData()); + const { userId, headers } = await ensureUserCookie(request); const authenticatedUser = await authenticator.isAuthenticated(request); try { diff --git a/apps/designer/app/routes/rest/publish.ts b/apps/designer/app/routes/rest/publish.ts index 04f5bdeb34..29fa2dd5cf 100644 --- a/apps/designer/app/routes/rest/publish.ts +++ b/apps/designer/app/routes/rest/publish.ts @@ -1,10 +1,14 @@ import { type ActionFunction } from "@remix-run/node"; +import { zfd } from "zod-form-data"; import * as db from "~/shared/db"; +const schema = zfd.formData({ + domain: zfd.text(), + projectId: zfd.text(), +}); + export const action: ActionFunction = async ({ request }) => { - const formData = await request.formData(); - const domain = formData.get("domain") as string | null; - const projectId = formData.get("projectId") as string | null; + const { domain, projectId } = schema.parse(await request.formData()); try { const project = await db.misc.publish({ projectId, domain }); return { domain: project.domain }; From 814202c09ef181668a3956a6eb0643cd996e2255 Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Tue, 26 Jul 2022 19:32:12 +0200 Subject: [PATCH 24/57] update grid & make sure we close tooltip on esc and click outside --- .../designer/features/inspector/inspector.tsx | 4 +- .../sidebar-left/panels/asset-manager.tsx | 2 +- .../sidebar-left/panels/components/image.tsx | 63 ++++++++++--------- .../shared/design-system/stitches.config.ts | 38 ++++++----- 4 files changed, 56 insertions(+), 51 deletions(-) diff --git a/apps/designer/app/designer/features/inspector/inspector.tsx b/apps/designer/app/designer/features/inspector/inspector.tsx index 02973722b9..8ad637b2b4 100644 --- a/apps/designer/app/designer/features/inspector/inspector.tsx +++ b/apps/designer/app/designer/features/inspector/inspector.tsx @@ -28,9 +28,9 @@ 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, maybe create an issue with a more specific proposal? */} - + Select an instance on the canvas diff --git a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx index f7919c18ca..aed969acd6 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx @@ -42,7 +42,7 @@ export const TabContent = ({ const { assets, onUploadAsset } = useAssetsState(baseAssets); return ( - + Assets diff --git a/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx b/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx index 4df97f776b..ccafb32e4f 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from "react"; +import { useEffect, useRef, useState } from "react"; import { Box, Button, @@ -6,7 +6,7 @@ import { ProgressBar, Tooltip, } from "~/shared/design-system"; -import { useInterval } from "react-use"; +import { useClickAway, useInterval, useKey } from "react-use"; import placeholderImage from "~/shared/images/image-placeholder.svg"; import brokenImage from "~/shared/images/broken-image-placeholder.svg"; import { useSubmit } from "@remix-run/react"; @@ -32,6 +32,11 @@ export const AssetManagerImage = ({ path, alt, status, name, id }: Asset) => { const src = useImageWithFallback({ path }); const [isToolTipOpen, setTolltipOpen] = useState(false); const [progressBarPercentage, setProgressBarPercentage] = useState(0); + const tooltipRef = useRef(null); + useClickAway(tooltipRef, () => { + setTolltipOpen(false); + }); + useKey("Escape", () => setTolltipOpen(false)); // @todo rewrite this fake indication to show real progress useInterval( @@ -77,33 +82,35 @@ export const AssetManagerImage = ({ path, alt, status, name, id }: Asset) => { }} > {!isUploading && ( - - Are you sure you want to delete this asset? - - - } - > - + + } > - - - + + + )} {isUploading && ( Date: Tue, 26 Jul 2022 20:33:02 +0200 Subject: [PATCH 25/57] some mr fixes --- .../sidebar-left/panels/components/image.tsx | 1 + .../design-system/components/tooltip.tsx | 3 +- .../shared/design-system/stitches.config.ts | 36 +++++++++---------- 3 files changed, 21 insertions(+), 19 deletions(-) diff --git a/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx b/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx index ccafb32e4f..a59726e89e 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/components/image.tsx @@ -98,6 +98,7 @@ export const AssetManagerImage = ({ path, alt, status, name, id }: Asset) => { > - - } + + Are you sure you want to delete this asset? + + + } + > + - - + + + )} - {isUploading && ( + {(isUploading || isDeleting) && ( { +export const Tooltip = React.forwardRef(function TooltipWrapper( + { + children, + content, + open, + defaultOpen, + onOpenChange, + multiline, + delayDuration, + ...props + }: TooltipProps, + ref: Ref +) { return ( {children} ); -}; +}); From 0fe906ae733c65830b32862054e2959f21b5cfbb Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Wed, 27 Jul 2022 01:52:12 +0200 Subject: [PATCH 29/57] update radiz tooltip --- .../panels/components/thumbnail.tsx | 17 +-- apps/designer/app/root.tsx | 5 +- .../design-system/components/tooltip.tsx | 2 + apps/designer/package.json | 2 +- yarn.lock | 111 +++++++++++++++--- 5 files changed, 105 insertions(+), 32 deletions(-) diff --git a/apps/designer/app/designer/features/sidebar-left/panels/components/thumbnail.tsx b/apps/designer/app/designer/features/sidebar-left/panels/components/thumbnail.tsx index e826a4a86c..3fba23a610 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/components/thumbnail.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/components/thumbnail.tsx @@ -1,4 +1,4 @@ -import { useEffect, useRef, useState } from "react"; +import { useEffect, useState } from "react"; import { Box, Button, @@ -6,14 +6,12 @@ import { ProgressBar, Tooltip, } from "~/shared/design-system"; -import { useClickAway, useInterval } from "react-use"; +import { useInterval } from "react-use"; import placeholderImage from "~/shared/images/image-placeholder.svg"; import brokenImage from "~/shared/images/broken-image-placeholder.svg"; import { useSubmit } from "@remix-run/react"; import { Asset } from "~/designer/features/sidebar-left/types"; import { Cross2Icon } from "@radix-ui/react-icons"; -import { useHotkeys } from "react-hotkeys-hook"; -import { shortcuts } from "~/shared/shortcuts"; const useImageWithFallback = ({ path }: { path: string }) => { const [src, setSrc] = useState(placeholderImage); @@ -38,16 +36,12 @@ export const AssetManagerThumbnail = ({ const submit = useSubmit(); const isUploading = status === "uploading"; const src = useImageWithFallback({ path }); - const [isToolTipOpen, setTolltipOpen] = useState(false); + const [isTooltipOpen, setTolltipOpen] = useState(false); const [isDeleting, setIsDeleting] = useState(false); const [progressBarPercentage, setProgressBarPercentage] = useState(0); const closeTooltip = () => setTolltipOpen(false); - const tooltipRef = useRef(null); - useClickAway(tooltipRef, closeTooltip); - useHotkeys(shortcuts["escape"], closeTooltip); - // @todo rewrite this fake indication to show real progress useInterval( () => { @@ -95,9 +89,10 @@ export const AssetManagerThumbnail = ({ > {!isUploading && ( Are you sure you want to delete this asset? diff --git a/apps/designer/app/root.tsx b/apps/designer/app/root.tsx index a73cf3cffd..9013b2cf39 100644 --- a/apps/designer/app/root.tsx +++ b/apps/designer/app/root.tsx @@ -1,4 +1,5 @@ // Our root outlet doesn't contain a layout because we have 2 types of documents: canvas and designer and we need to decide down the line which one to render, thre is no single root document. +import { TooltipProvider } from "@radix-ui/react-tooltip"; import { Outlet } from "@remix-run/react"; import { withSentryRouteTracing } from "@sentry/remix"; import { ErrorBoundary } from "@sentry/remix"; @@ -7,7 +8,9 @@ import { OutletProps } from "react-router-dom"; const RootWithErrorBoundary = (props: OutletProps) => ( // @ts-expect-error 'ErrorBoundary' cannot be used as a JSX component. - + + + ); diff --git a/apps/designer/app/shared/design-system/components/tooltip.tsx b/apps/designer/app/shared/design-system/components/tooltip.tsx index 84214d4ae7..0cb9d347ee 100644 --- a/apps/designer/app/shared/design-system/components/tooltip.tsx +++ b/apps/designer/app/shared/design-system/components/tooltip.tsx @@ -20,6 +20,8 @@ const Content = styled(TooltipPrimitive.Content, { color: "$hiContrast", borderRadius: "$1", padding: "$1 $2", + zIndex: "$max", + position: "relative", variants: { multiline: { diff --git a/apps/designer/package.json b/apps/designer/package.json index 01afbb17cc..5ed6e196e5 100644 --- a/apps/designer/package.json +++ b/apps/designer/package.json @@ -43,7 +43,7 @@ "@radix-ui/react-tabs": "^0.1.5", "@radix-ui/react-toggle": "^0.1.4", "@radix-ui/react-toggle-group": "^0.1.5", - "@radix-ui/react-tooltip": "^0.1.7", + "@radix-ui/react-tooltip": "^1.0.0", "@radix-ui/react-use-layout-effect": "^0.1.0", "@react-aria/utils": "^3.13.1", "@remix-run/node": "^1.6.4", diff --git a/yarn.lock b/yarn.lock index d923059999..56af41745b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2752,6 +2752,13 @@ dependencies: "@babel/runtime" "^7.13.10" +"@radix-ui/primitive@1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.0.0.tgz#e1d8ef30b10ea10e69c76e896f608d9276352253" + integrity sha512-3e7rn8FDMin4CgeL7Z/49smCA3rFYY3Ha2rUQ7HRWFadS5iCRw08ZgVT1LaNTCNqgvrUiyczLflrVrF0SRQtNA== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-accessible-icon@^0.1.4": version "0.1.4" resolved "https://registry.yarnpkg.com/@radix-ui/react-accessible-icon/-/react-accessible-icon-0.1.4.tgz#bdbf1e3226a0e9e7778b68728b175bdc532b720c" @@ -2931,6 +2938,18 @@ "@radix-ui/react-use-callback-ref" "0.1.0" "@radix-ui/react-use-escape-keydown" "0.1.0" +"@radix-ui/react-dismissable-layer@1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.0.tgz#35b7826fa262fd84370faef310e627161dffa76b" + integrity sha512-n7kDRfx+LB1zLueRDvZ1Pd0bxdJWDUZNQ/GWoxDn2prnuJKRdxsjulejX/ePkOsLi2tTm6P24mDqlMSgQpsT6g== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/primitive" "1.0.0" + "@radix-ui/react-compose-refs" "1.0.0" + "@radix-ui/react-primitive" "1.0.0" + "@radix-ui/react-use-callback-ref" "1.0.0" + "@radix-ui/react-use-escape-keydown" "1.0.0" + "@radix-ui/react-dropdown-menu@^0.1.6": version "0.1.6" resolved "https://registry.yarnpkg.com/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-0.1.6.tgz#3203229788cd57e552c9f19dcc7008e2b545919c" @@ -2975,6 +2994,14 @@ "@babel/runtime" "^7.13.10" "@radix-ui/react-use-layout-effect" "0.1.0" +"@radix-ui/react-id@1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-1.0.0.tgz#8d43224910741870a45a8c9d092f25887bb6d11e" + integrity sha512-Q6iAB/U7Tq3NTolBBQbHTgclPmGWE3OlktGGqrClPozSw4vkQ1DfQAOtzgRPecKsMdJINE05iaoDUG8tRzCBjw== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-use-layout-effect" "1.0.0" + "@radix-ui/react-label@0.1.5", "@radix-ui/react-label@^0.1.5": version "0.1.5" resolved "https://registry.yarnpkg.com/@radix-ui/react-label/-/react-label-0.1.5.tgz#12cd965bfc983e0148121d4c99fb8e27a917c45c" @@ -3046,7 +3073,7 @@ "@radix-ui/react-use-size" "0.1.1" "@radix-ui/rect" "0.1.1" -"@radix-ui/react-popper@^1.0.0": +"@radix-ui/react-popper@1.0.0", "@radix-ui/react-popper@^1.0.0": version "1.0.0" resolved "https://registry.yarnpkg.com/@radix-ui/react-popper/-/react-popper-1.0.0.tgz#fb4f937864bf39c48f27f55beee61fa9f2bef93c" integrity sha512-k2dDd+1Wl0XWAMs9ZvAxxYsB9sOsEhrFQV4CINd7IUZf0wfdye4OHen9siwxvZImbzhgVeKTJi68OQmPRvVdMg== @@ -3071,6 +3098,14 @@ "@radix-ui/react-primitive" "0.1.4" "@radix-ui/react-use-layout-effect" "0.1.0" +"@radix-ui/react-portal@1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.0.0.tgz#7220b66743394fabb50c55cb32381395cc4a276b" + integrity sha512-a8qyFO/Xb99d8wQdu4o7qnigNjTPG123uADNecz0eX4usnQEj7o+cG4ZX4zkqq98NYekT7UoEQIjxBNWIFuqTA== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-primitive" "1.0.0" + "@radix-ui/react-presence@0.1.2": version "0.1.2" resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-0.1.2.tgz#9f11cce3df73cf65bc348e8b76d891f0d54c1fe3" @@ -3080,6 +3115,15 @@ "@radix-ui/react-compose-refs" "0.1.0" "@radix-ui/react-use-layout-effect" "0.1.0" +"@radix-ui/react-presence@1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.0.0.tgz#814fe46df11f9a468808a6010e3f3ca7e0b2e84a" + integrity sha512-A+6XEvN01NfVWiKu38ybawfHsBjWum42MRPnEuqPsBZ4eV7e/7K321B5VgYMPv3Xx5An6o1/l9ZuDBgmcmWK3w== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-compose-refs" "1.0.0" + "@radix-ui/react-use-layout-effect" "1.0.0" + "@radix-ui/react-primitive@0.1.4": version "0.1.4" resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-0.1.4.tgz#6c233cf08b0cb87fecd107e9efecb3f21861edc1" @@ -3255,26 +3299,24 @@ "@radix-ui/react-primitive" "0.1.4" "@radix-ui/react-use-controllable-state" "0.1.0" -"@radix-ui/react-tooltip@^0.1.7": - version "0.1.7" - resolved "https://registry.yarnpkg.com/@radix-ui/react-tooltip/-/react-tooltip-0.1.7.tgz#6f8c00d6e489565d14abf209ce0fb8853c8c8ee3" - integrity sha512-eiBUsVOHenZ0JR16tl970bB0DafJBz6mFgSGfIGIVpflFj0LIsIDiLMsYyvYdx1KwwsIUDTEZtxcPm/sWjPzqA== +"@radix-ui/react-tooltip@^1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-tooltip/-/react-tooltip-1.0.0.tgz#f7fcecf2bac5c31cd14666b5acd056015fc21646" + integrity sha512-RB06pov+O4Npy10ei1C6fsyB9QoOjz7Ubo8Sl3qdKtLgkL9iI96925DYtH0bxx6MH6YB2FuzLU6B75qn3AQQQw== dependencies: "@babel/runtime" "^7.13.10" - "@radix-ui/primitive" "0.1.0" - "@radix-ui/react-compose-refs" "0.1.0" - "@radix-ui/react-context" "0.1.1" - "@radix-ui/react-id" "0.1.5" - "@radix-ui/react-popper" "0.1.4" - "@radix-ui/react-portal" "0.1.4" - "@radix-ui/react-presence" "0.1.2" - "@radix-ui/react-primitive" "0.1.4" - "@radix-ui/react-slot" "0.1.2" - "@radix-ui/react-use-controllable-state" "0.1.0" - "@radix-ui/react-use-escape-keydown" "0.1.0" - "@radix-ui/react-use-previous" "0.1.1" - "@radix-ui/react-use-rect" "0.1.1" - "@radix-ui/react-visually-hidden" "0.1.4" + "@radix-ui/primitive" "1.0.0" + "@radix-ui/react-compose-refs" "1.0.0" + "@radix-ui/react-context" "1.0.0" + "@radix-ui/react-dismissable-layer" "1.0.0" + "@radix-ui/react-id" "1.0.0" + "@radix-ui/react-popper" "1.0.0" + "@radix-ui/react-portal" "1.0.0" + "@radix-ui/react-presence" "1.0.0" + "@radix-ui/react-primitive" "1.0.0" + "@radix-ui/react-slot" "1.0.0" + "@radix-ui/react-use-controllable-state" "1.0.0" + "@radix-ui/react-visually-hidden" "1.0.0" "@radix-ui/react-use-body-pointer-events@0.1.1": version "0.1.1" @@ -3291,6 +3333,13 @@ dependencies: "@babel/runtime" "^7.13.10" +"@radix-ui/react-use-callback-ref@1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.0.tgz#9e7b8b6b4946fe3cbe8f748c82a2cce54e7b6a90" + integrity sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-use-controllable-state@0.1.0": version "0.1.0" resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-0.1.0.tgz#4fced164acfc69a4e34fb9d193afdab973a55de1" @@ -3299,6 +3348,14 @@ "@babel/runtime" "^7.13.10" "@radix-ui/react-use-callback-ref" "0.1.0" +"@radix-ui/react-use-controllable-state@1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.0.tgz#a64deaafbbc52d5d407afaa22d493d687c538b7f" + integrity sha512-FohDoZvk3mEXh9AWAVyRTYR4Sq7/gavuofglmiXB2g1aKyboUD4YtgWxKj8O5n+Uak52gXQ4wKz5IFST4vtJHg== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-use-callback-ref" "1.0.0" + "@radix-ui/react-use-direction@0.1.0": version "0.1.0" resolved "https://registry.yarnpkg.com/@radix-ui/react-use-direction/-/react-use-direction-0.1.0.tgz#97ac1d52e497c974389e7988f809238ed72e7df7" @@ -3314,6 +3371,14 @@ "@babel/runtime" "^7.13.10" "@radix-ui/react-use-callback-ref" "0.1.0" +"@radix-ui/react-use-escape-keydown@1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.0.tgz#aef375db4736b9de38a5a679f6f49b45a060e5d1" + integrity sha512-JwfBCUIfhXRxKExgIqGa4CQsiMemo1Xt0W/B4ei3fpzpvPENKpMKQ8mZSB6Acj3ebrAEgi2xiQvcI1PAAodvyg== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-use-callback-ref" "1.0.0" + "@radix-ui/react-use-layout-effect@0.1.0", "@radix-ui/react-use-layout-effect@^0.1.0": version "0.1.0" resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-0.1.0.tgz#ebf71bd6d2825de8f1fbb984abf2293823f0f223" @@ -3374,6 +3439,14 @@ "@babel/runtime" "^7.13.10" "@radix-ui/react-primitive" "0.1.4" +"@radix-ui/react-visually-hidden@1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.0.tgz#4d69d7e3b6d21ee4678ed6de5215dcd068394401" + integrity sha512-MwAhMdX+n6S4InwRKSnpUsp+lLkYG6izQF56ul6guSX2mBBLOMV9Frx7xJlkEe2GjKLzbNuHhaCS6e5gopmZNA== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-primitive" "1.0.0" + "@radix-ui/rect@0.1.1": version "0.1.1" resolved "https://registry.yarnpkg.com/@radix-ui/rect/-/rect-0.1.1.tgz#95b5ba51f469bea6b1b841e2d427e17e37d38419" From 28c60179da917ce6b5d6799abd5b7e22ccf5593b Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Wed, 27 Jul 2022 01:54:42 +0200 Subject: [PATCH 30/57] remove unsed shortcut --- apps/designer/app/shared/shortcuts/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/designer/app/shared/shortcuts/index.ts b/apps/designer/app/shared/shortcuts/index.ts index 26da0759a8..63c9010a6c 100644 --- a/apps/designer/app/shared/shortcuts/index.ts +++ b/apps/designer/app/shared/shortcuts/index.ts @@ -9,7 +9,6 @@ export const shortcuts = { .map((_, index) => `cmd+${index + 1}, ctrl+${index + 1}`) .join(", "), zoom: "cmd+=, ctrl+=, cmd+-, ctrl+-", - escape: "escape", } as const; export const options = { splitKey: "+", keydown: true }; From b3f6c145ef4aa0b98b72ff8c4a1919e6b10e98ae Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Wed, 27 Jul 2022 11:41:19 +0200 Subject: [PATCH 31/57] create useFakeProgressHook --- .../panels/components/thumbnail.tsx | 40 ++++++++++++------- 1 file changed, 26 insertions(+), 14 deletions(-) diff --git a/apps/designer/app/designer/features/sidebar-left/panels/components/thumbnail.tsx b/apps/designer/app/designer/features/sidebar-left/panels/components/thumbnail.tsx index 3fba23a610..e823778ce5 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/components/thumbnail.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/components/thumbnail.tsx @@ -26,22 +26,15 @@ const useImageWithFallback = ({ path }: { path: string }) => { return src; }; -export const AssetManagerThumbnail = ({ - path, - alt, - status, - name, - id, -}: Asset) => { - const submit = useSubmit(); - const isUploading = status === "uploading"; - const src = useImageWithFallback({ path }); - const [isTooltipOpen, setTolltipOpen] = useState(false); - const [isDeleting, setIsDeleting] = useState(false); +export const useFakeProgress = ({ + isUploading, + isDeleting, +}: { + isUploading: boolean; + isDeleting: boolean; +}) => { const [progressBarPercentage, setProgressBarPercentage] = useState(0); - const closeTooltip = () => setTolltipOpen(false); - // @todo rewrite this fake indication to show real progress useInterval( () => { @@ -52,6 +45,25 @@ export const AssetManagerThumbnail = ({ isUploading || isDeleting ? 100 : null ); + return progressBarPercentage; +}; + +export const AssetManagerThumbnail = ({ + path, + alt, + status, + name, + id, +}: Asset) => { + const submit = useSubmit(); + const [isDeleting, setIsDeleting] = useState(false); + const isUploading = status === "uploading"; + const src = useImageWithFallback({ path }); + const [isTooltipOpen, setTolltipOpen] = useState(false); + const progressBarPercentage = useFakeProgress({ isUploading, isDeleting }); + + const closeTooltip = () => setTolltipOpen(false); + const deleteAsset = () => { const formData = new FormData(); formData.append("assetId", id); From ad4a50db4a9215320972828af07d808298a40f5c Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Wed, 27 Jul 2022 12:03:12 +0200 Subject: [PATCH 32/57] remove export --- .../features/sidebar-left/panels/components/thumbnail.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/designer/app/designer/features/sidebar-left/panels/components/thumbnail.tsx b/apps/designer/app/designer/features/sidebar-left/panels/components/thumbnail.tsx index e823778ce5..c64c7f4f14 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/components/thumbnail.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/components/thumbnail.tsx @@ -26,7 +26,7 @@ const useImageWithFallback = ({ path }: { path: string }) => { return src; }; -export const useFakeProgress = ({ +const useFakeProgress = ({ isUploading, isDeleting, }: { From fe717d037a94c4d1bac1c0326eb15fba34fa1b9a Mon Sep 17 00:00:00 2001 From: Andras Bacsai Date: Wed, 27 Jul 2022 18:29:05 +0000 Subject: [PATCH 33/57] Checking shared github actions --- .github/actions/publish/base.yaml | 20 +++++++++++++++++++ .../eslint-config-custom-publish.yml | 16 +++------------ 2 files changed, 23 insertions(+), 13 deletions(-) create mode 100644 .github/actions/publish/base.yaml diff --git a/.github/actions/publish/base.yaml b/.github/actions/publish/base.yaml new file mode 100644 index 0000000000..2a03c0edf4 --- /dev/null +++ b/.github/actions/publish/base.yaml @@ -0,0 +1,20 @@ +inputs: + package: + description: 'Package.json location (relative)' + default: null +runs: + using: "composite" + steps: + - uses: actions/checkout@v3 + - uses: actions/setup-node@v3 + with: + node-version: 16 + - name: Install Dependencies + run: yarn install + - uses: JS-DevTools/npm-publish@v1 + with: + token: ${{ secrets.NPM_TOKEN }} + dry-run: false + check-version: true + access: 'public' + package: $ {{ inputs.package }} \ No newline at end of file diff --git a/.github/workflows/eslint-config-custom-publish.yml b/.github/workflows/eslint-config-custom-publish.yml index 1c35ddc517..5ef6940ba5 100644 --- a/.github/workflows/eslint-config-custom-publish.yml +++ b/.github/workflows/eslint-config-custom-publish.yml @@ -8,16 +8,6 @@ jobs: publish: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v3 - - uses: actions/setup-node@v3 - with: - node-version: 16 - - name: Install Dependencies - run: yarn install - - uses: JS-DevTools/npm-publish@v1 - with: - token: ${{ secrets.NPM_TOKEN }} - dry-run: false - check-version: true - access: 'public' - package: './packages/eslint-config-custom/package.json' \ No newline at end of file + - uses: ./.github/actions/publish/base + with: + package: './packages/eslint-config-custom/package.json' \ No newline at end of file From 11fae1cbbb0dd79da9a38b7e4714a18572b6734d Mon Sep 17 00:00:00 2001 From: Andras Bacsai Date: Wed, 27 Jul 2022 18:30:47 +0000 Subject: [PATCH 34/57] fix --- .github/actions/publish/{base.yaml => action.yaml} | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename .github/actions/publish/{base.yaml => action.yaml} (96%) diff --git a/.github/actions/publish/base.yaml b/.github/actions/publish/action.yaml similarity index 96% rename from .github/actions/publish/base.yaml rename to .github/actions/publish/action.yaml index 2a03c0edf4..0b0da43bfa 100644 --- a/.github/actions/publish/base.yaml +++ b/.github/actions/publish/action.yaml @@ -1,7 +1,7 @@ inputs: package: description: 'Package.json location (relative)' - default: null + default: '' runs: using: "composite" steps: From bb3a23a3b499c7d9db21056dc4d336efd1db3ea0 Mon Sep 17 00:00:00 2001 From: Andras Bacsai Date: Wed, 27 Jul 2022 18:33:36 +0000 Subject: [PATCH 35/57] fix --- .github/workflows/eslint-config-custom-publish.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/eslint-config-custom-publish.yml b/.github/workflows/eslint-config-custom-publish.yml index 5ef6940ba5..56bcee848a 100644 --- a/.github/workflows/eslint-config-custom-publish.yml +++ b/.github/workflows/eslint-config-custom-publish.yml @@ -8,6 +8,6 @@ jobs: publish: runs-on: ubuntu-latest steps: - - uses: ./.github/actions/publish/base + - uses: ./.github/actions/publish with: package: './packages/eslint-config-custom/package.json' \ No newline at end of file From 5815649d1cc491b4266ec379dc7e387f693a2190 Mon Sep 17 00:00:00 2001 From: Andras Bacsai Date: Wed, 27 Jul 2022 18:35:45 +0000 Subject: [PATCH 36/57] fix --- .github/workflows/eslint-config-custom-publish.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/eslint-config-custom-publish.yml b/.github/workflows/eslint-config-custom-publish.yml index 56bcee848a..0cb4edea42 100644 --- a/.github/workflows/eslint-config-custom-publish.yml +++ b/.github/workflows/eslint-config-custom-publish.yml @@ -8,6 +8,7 @@ jobs: publish: runs-on: ubuntu-latest steps: + - uses: actions/checkout@v3 - uses: ./.github/actions/publish with: package: './packages/eslint-config-custom/package.json' \ No newline at end of file From 437f59c9e3073812de12e03b87e01872a83f9335 Mon Sep 17 00:00:00 2001 From: Andras Bacsai Date: Wed, 27 Jul 2022 18:45:34 +0000 Subject: [PATCH 37/57] fix --- .github/actions/publish/action.yaml | 12 ++++++++++-- .github/workflows/eslint-config-custom-publish.yml | 3 ++- 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/.github/actions/publish/action.yaml b/.github/actions/publish/action.yaml index 0b0da43bfa..ec6ecc7e70 100644 --- a/.github/actions/publish/action.yaml +++ b/.github/actions/publish/action.yaml @@ -1,7 +1,14 @@ +name: 'Release NPM package' +description: 'Release NPM package' inputs: package: description: 'Package.json location (relative)' - default: '' + default: 'package.json' + required: true + token: + description: 'NPM Token' + default: 'null' + required: true runs: using: "composite" steps: @@ -11,9 +18,10 @@ runs: node-version: 16 - name: Install Dependencies run: yarn install + shell: bash - uses: JS-DevTools/npm-publish@v1 with: - token: ${{ secrets.NPM_TOKEN }} + token: ${{ inputs.token }} dry-run: false check-version: true access: 'public' diff --git a/.github/workflows/eslint-config-custom-publish.yml b/.github/workflows/eslint-config-custom-publish.yml index 0cb4edea42..92e2b95d72 100644 --- a/.github/workflows/eslint-config-custom-publish.yml +++ b/.github/workflows/eslint-config-custom-publish.yml @@ -11,4 +11,5 @@ jobs: - uses: actions/checkout@v3 - uses: ./.github/actions/publish with: - package: './packages/eslint-config-custom/package.json' \ No newline at end of file + package: './packages/eslint-config-custom/package.json' + token: $ {{ secrets.NPM_TOKEN }} \ No newline at end of file From dd646190e44daf6feb4b06283f8b85d27e8e7135 Mon Sep 17 00:00:00 2001 From: Andras Bacsai Date: Wed, 27 Jul 2022 18:48:58 +0000 Subject: [PATCH 38/57] fix --- .github/actions/publish/action.yaml | 2 +- .github/workflows/eslint-config-custom-publish.yml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/actions/publish/action.yaml b/.github/actions/publish/action.yaml index ec6ecc7e70..24a129d324 100644 --- a/.github/actions/publish/action.yaml +++ b/.github/actions/publish/action.yaml @@ -25,4 +25,4 @@ runs: dry-run: false check-version: true access: 'public' - package: $ {{ inputs.package }} \ No newline at end of file + package: ${{ inputs.package }} \ No newline at end of file diff --git a/.github/workflows/eslint-config-custom-publish.yml b/.github/workflows/eslint-config-custom-publish.yml index 92e2b95d72..ca8b6890d2 100644 --- a/.github/workflows/eslint-config-custom-publish.yml +++ b/.github/workflows/eslint-config-custom-publish.yml @@ -12,4 +12,4 @@ jobs: - uses: ./.github/actions/publish with: package: './packages/eslint-config-custom/package.json' - token: $ {{ secrets.NPM_TOKEN }} \ No newline at end of file + token: ${{ secrets.NPM_TOKEN }} \ No newline at end of file From 6691253e96ccbf28fcd7e9fbd38f87b03aa5b8f6 Mon Sep 17 00:00:00 2001 From: Andras Bacsai Date: Wed, 27 Jul 2022 18:56:40 +0000 Subject: [PATCH 39/57] fix --- .../eslint-config-custom-publish.yml | 20 ++++++++--------- .github/workflows/jest-config-publish.yml | 22 ++++++------------- .github/workflows/react-sdk-publish.yml | 22 ++++++------------- .github/workflows/tsconfig-publish.yml | 22 ++++++------------- 4 files changed, 31 insertions(+), 55 deletions(-) diff --git a/.github/workflows/eslint-config-custom-publish.yml b/.github/workflows/eslint-config-custom-publish.yml index ca8b6890d2..05077cd08b 100644 --- a/.github/workflows/eslint-config-custom-publish.yml +++ b/.github/workflows/eslint-config-custom-publish.yml @@ -1,15 +1,15 @@ name: Eslint Config Publish -on: - push: - paths: - - 'packages/eslint-config-custom/**/*' - - '.github/workflows/eslint-config-custom-publish.yml' +on: + push: + paths: + - "packages/eslint-config-custom/**/*" + - ".github/workflows/eslint-config-custom-publish.yml" jobs: publish: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v3 - - uses: ./.github/actions/publish - with: - package: './packages/eslint-config-custom/package.json' - token: ${{ secrets.NPM_TOKEN }} \ No newline at end of file + - uses: actions/checkout@v3 + - uses: ./.github/actions/publish + with: + package: "./packages/eslint-config-custom/package.json" + token: ${{ secrets.NPM_TOKEN }} diff --git a/.github/workflows/jest-config-publish.yml b/.github/workflows/jest-config-publish.yml index ddc06c6b19..4725fcd647 100644 --- a/.github/workflows/jest-config-publish.yml +++ b/.github/workflows/jest-config-publish.yml @@ -1,23 +1,15 @@ name: Jest Config Publish -on: - push: - paths: - - 'packages/jest-config/**/*' - - '.github/workflows/jest-config-publish.yml' +on: + push: + paths: + - "packages/jest-config/**/*" + - ".github/workflows/jest-config-publish.yml" jobs: publish: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - - uses: actions/setup-node@v3 - with: - node-version: 16 - - name: Install Dependencies - run: yarn install - - uses: JS-DevTools/npm-publish@v1 + - uses: ./.github/actions/publish with: + package: "./packages/jest-config/package.json" token: ${{ secrets.NPM_TOKEN }} - dry-run: false - check-version: true - access: 'public' - package: './packages/jest-config/package.json' \ No newline at end of file diff --git a/.github/workflows/react-sdk-publish.yml b/.github/workflows/react-sdk-publish.yml index 4f4e55cfad..9fbddae4c3 100644 --- a/.github/workflows/react-sdk-publish.yml +++ b/.github/workflows/react-sdk-publish.yml @@ -1,23 +1,15 @@ name: SDK publish -on: - push: - paths: - - 'packages/react-sdk/**/*' - - '.github/workflows/react-sdk-publish.yml' +on: + push: + paths: + - "packages/react-sdk/**/*" + - ".github/workflows/react-sdk-publish.yml" jobs: publish: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - - uses: actions/setup-node@v3 - with: - node-version: 16 - - name: Install Dependencies - run: yarn install - - uses: JS-DevTools/npm-publish@v1 + - uses: ./.github/actions/publish with: + package: "./packages/react-sdk/package.json" token: ${{ secrets.NPM_TOKEN }} - dry-run: false - check-version: true - access: 'public' - package: './packages/react-sdk/package.json' \ No newline at end of file diff --git a/.github/workflows/tsconfig-publish.yml b/.github/workflows/tsconfig-publish.yml index a50c55fc71..498b61a5fa 100644 --- a/.github/workflows/tsconfig-publish.yml +++ b/.github/workflows/tsconfig-publish.yml @@ -1,23 +1,15 @@ name: Tsconfig Publish -on: - push: - paths: - - 'packages/tsconfig/**/*' - - '.github/workflows/tsconfig-publish.yml' +on: + push: + paths: + - "packages/tsconfig/**/*" + - ".github/workflows/tsconfig-publish.yml" jobs: publish: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - - uses: actions/setup-node@v3 - with: - node-version: 16 - - name: Install Dependencies - run: yarn install - - uses: JS-DevTools/npm-publish@v1 + - uses: ./.github/actions/publish with: + package: "./packages/tsconfig/package.json" token: ${{ secrets.NPM_TOKEN }} - dry-run: false - check-version: true - access: 'public' - package: './packages/tsconfig/package.json' \ No newline at end of file From 51712a969c7afce5c8766267b09b817da4c7fe49 Mon Sep 17 00:00:00 2001 From: Andras Bacsai Date: Wed, 27 Jul 2022 19:09:55 +0000 Subject: [PATCH 40/57] add icons + paths to watch --- .github/workflows/eslint-config-custom-publish.yml | 1 + .github/workflows/jest-config-publish.yml | 1 + .github/workflows/react-sdk-publish.yml | 1 + .github/workflows/tsconfig-publish.yml | 1 + packages/icons/package.json | 4 ++-- 5 files changed, 6 insertions(+), 2 deletions(-) diff --git a/.github/workflows/eslint-config-custom-publish.yml b/.github/workflows/eslint-config-custom-publish.yml index 05077cd08b..9e9539d719 100644 --- a/.github/workflows/eslint-config-custom-publish.yml +++ b/.github/workflows/eslint-config-custom-publish.yml @@ -4,6 +4,7 @@ on: paths: - "packages/eslint-config-custom/**/*" - ".github/workflows/eslint-config-custom-publish.yml" + - ".github/workflows/publish/action.yaml" jobs: publish: runs-on: ubuntu-latest diff --git a/.github/workflows/jest-config-publish.yml b/.github/workflows/jest-config-publish.yml index 4725fcd647..5862fca017 100644 --- a/.github/workflows/jest-config-publish.yml +++ b/.github/workflows/jest-config-publish.yml @@ -4,6 +4,7 @@ on: paths: - "packages/jest-config/**/*" - ".github/workflows/jest-config-publish.yml" + - ".github/workflows/publish/action.yaml" jobs: publish: runs-on: ubuntu-latest diff --git a/.github/workflows/react-sdk-publish.yml b/.github/workflows/react-sdk-publish.yml index 9fbddae4c3..263dad4a1b 100644 --- a/.github/workflows/react-sdk-publish.yml +++ b/.github/workflows/react-sdk-publish.yml @@ -4,6 +4,7 @@ on: paths: - "packages/react-sdk/**/*" - ".github/workflows/react-sdk-publish.yml" + - ".github/workflows/publish/action.yaml" jobs: publish: runs-on: ubuntu-latest diff --git a/.github/workflows/tsconfig-publish.yml b/.github/workflows/tsconfig-publish.yml index 498b61a5fa..789d001966 100644 --- a/.github/workflows/tsconfig-publish.yml +++ b/.github/workflows/tsconfig-publish.yml @@ -4,6 +4,7 @@ on: paths: - "packages/tsconfig/**/*" - ".github/workflows/tsconfig-publish.yml" + - ".github/workflows/publish/action.yaml" jobs: publish: runs-on: ubuntu-latest diff --git a/packages/icons/package.json b/packages/icons/package.json index 5584e18c9d..841e772a60 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -1,7 +1,7 @@ { "name": "@webstudio-is/icons", - "version": "0.5.0", - "description": "Webstudio JavaScript / TypeScript API", + "version": "0.1.0", + "description": "Webstudio Icons", "author": "Webstudio ", "homepage": "https://webstudio.is", "scripts": { From 9a50ec5d66755c7f0584b0edb3d7b182936c2257 Mon Sep 17 00:00:00 2001 From: Andras Bacsai Date: Wed, 27 Jul 2022 19:12:45 +0000 Subject: [PATCH 41/57] add icons --- .github/workflows/icons.yml | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 .github/workflows/icons.yml diff --git a/.github/workflows/icons.yml b/.github/workflows/icons.yml new file mode 100644 index 0000000000..1809e3f16b --- /dev/null +++ b/.github/workflows/icons.yml @@ -0,0 +1,16 @@ +name: Icons Publish +on: + push: + paths: + - "packages/icons/**/*" + - ".github/workflows/icons.yml" + - ".github/workflows/publish/action.yaml" +jobs: + publish: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + - uses: ./.github/actions/publish + with: + package: "./packages/icons/package.json" + token: ${{ secrets.NPM_TOKEN }} From b004a4b0fa6be54699e72e244a6f5f4414cc3445 Mon Sep 17 00:00:00 2001 From: Andras Bacsai Date: Wed, 27 Jul 2022 19:17:43 +0000 Subject: [PATCH 42/57] Reorder/rename/etc --- .../eslint-config-custom.yml} | 4 ++-- .github/workflows/{ => publish}/icons.yml | 4 ++-- .../{jest-config-publish.yml => publish/jest-config.yml} | 4 ++-- .../{react-sdk-publish.yml => publish/react-sdk.yml} | 4 ++-- .../workflows/{tsconfig-publish.yml => publish/tsconfig.yml} | 4 ++-- 5 files changed, 10 insertions(+), 10 deletions(-) rename .github/workflows/{eslint-config-custom-publish.yml => publish/eslint-config-custom.yml} (76%) rename .github/workflows/{ => publish}/icons.yml (75%) rename .github/workflows/{jest-config-publish.yml => publish/jest-config.yml} (76%) rename .github/workflows/{react-sdk-publish.yml => publish/react-sdk.yml} (76%) rename .github/workflows/{tsconfig-publish.yml => publish/tsconfig.yml} (76%) diff --git a/.github/workflows/eslint-config-custom-publish.yml b/.github/workflows/publish/eslint-config-custom.yml similarity index 76% rename from .github/workflows/eslint-config-custom-publish.yml rename to .github/workflows/publish/eslint-config-custom.yml index 9e9539d719..69fa606bbc 100644 --- a/.github/workflows/eslint-config-custom-publish.yml +++ b/.github/workflows/publish/eslint-config-custom.yml @@ -3,8 +3,8 @@ on: push: paths: - "packages/eslint-config-custom/**/*" - - ".github/workflows/eslint-config-custom-publish.yml" - - ".github/workflows/publish/action.yaml" + - ".github/workflows/publish/eslint-config-custom.yml" + - ".github/actions/publish/action.yaml" jobs: publish: runs-on: ubuntu-latest diff --git a/.github/workflows/icons.yml b/.github/workflows/publish/icons.yml similarity index 75% rename from .github/workflows/icons.yml rename to .github/workflows/publish/icons.yml index 1809e3f16b..1409096cd8 100644 --- a/.github/workflows/icons.yml +++ b/.github/workflows/publish/icons.yml @@ -3,8 +3,8 @@ on: push: paths: - "packages/icons/**/*" - - ".github/workflows/icons.yml" - - ".github/workflows/publish/action.yaml" + - ".github/workflows/publish/icons-publish.yml" + - ".github/actions/publish/action.yaml" jobs: publish: runs-on: ubuntu-latest diff --git a/.github/workflows/jest-config-publish.yml b/.github/workflows/publish/jest-config.yml similarity index 76% rename from .github/workflows/jest-config-publish.yml rename to .github/workflows/publish/jest-config.yml index 5862fca017..5f3f0b93b5 100644 --- a/.github/workflows/jest-config-publish.yml +++ b/.github/workflows/publish/jest-config.yml @@ -3,8 +3,8 @@ on: push: paths: - "packages/jest-config/**/*" - - ".github/workflows/jest-config-publish.yml" - - ".github/workflows/publish/action.yaml" + - ".github/workflows/publish/jest-config.yml" + - ".github/actions/publish/action.yaml" jobs: publish: runs-on: ubuntu-latest diff --git a/.github/workflows/react-sdk-publish.yml b/.github/workflows/publish/react-sdk.yml similarity index 76% rename from .github/workflows/react-sdk-publish.yml rename to .github/workflows/publish/react-sdk.yml index 263dad4a1b..00ba8d85fc 100644 --- a/.github/workflows/react-sdk-publish.yml +++ b/.github/workflows/publish/react-sdk.yml @@ -3,8 +3,8 @@ on: push: paths: - "packages/react-sdk/**/*" - - ".github/workflows/react-sdk-publish.yml" - - ".github/workflows/publish/action.yaml" + - ".github/workflows/publish/react-sdk.yml" + - ".github/actions/publish/action.yaml" jobs: publish: runs-on: ubuntu-latest diff --git a/.github/workflows/tsconfig-publish.yml b/.github/workflows/publish/tsconfig.yml similarity index 76% rename from .github/workflows/tsconfig-publish.yml rename to .github/workflows/publish/tsconfig.yml index 789d001966..08d7b2ea80 100644 --- a/.github/workflows/tsconfig-publish.yml +++ b/.github/workflows/publish/tsconfig.yml @@ -3,8 +3,8 @@ on: push: paths: - "packages/tsconfig/**/*" - - ".github/workflows/tsconfig-publish.yml" - - ".github/workflows/publish/action.yaml" + - ".github/workflows/publish/tsconfig.yml" + - ".github/actions/publish/action.yaml" jobs: publish: runs-on: ubuntu-latest From 7e495df2b3c13bdc8d8c7b9284a1328396a29279 Mon Sep 17 00:00:00 2001 From: Andras Bacsai Date: Wed, 27 Jul 2022 19:20:28 +0000 Subject: [PATCH 43/57] grr cannot structure like this.. --- .github/workflows/{publish => }/eslint-config-custom.yml | 2 +- .github/workflows/{publish => }/icons.yml | 2 +- .github/workflows/{publish => }/jest-config.yml | 2 +- .github/workflows/{publish => }/react-sdk.yml | 2 +- .github/workflows/{publish => }/tsconfig.yml | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) rename .github/workflows/{publish => }/eslint-config-custom.yml (86%) rename .github/workflows/{publish => }/icons.yml (86%) rename .github/workflows/{publish => }/jest-config.yml (87%) rename .github/workflows/{publish => }/react-sdk.yml (87%) rename .github/workflows/{publish => }/tsconfig.yml (88%) diff --git a/.github/workflows/publish/eslint-config-custom.yml b/.github/workflows/eslint-config-custom.yml similarity index 86% rename from .github/workflows/publish/eslint-config-custom.yml rename to .github/workflows/eslint-config-custom.yml index 69fa606bbc..3effb53420 100644 --- a/.github/workflows/publish/eslint-config-custom.yml +++ b/.github/workflows/eslint-config-custom.yml @@ -3,7 +3,7 @@ on: push: paths: - "packages/eslint-config-custom/**/*" - - ".github/workflows/publish/eslint-config-custom.yml" + - ".github/workflows/eslint-config-custom.yml" - ".github/actions/publish/action.yaml" jobs: publish: diff --git a/.github/workflows/publish/icons.yml b/.github/workflows/icons.yml similarity index 86% rename from .github/workflows/publish/icons.yml rename to .github/workflows/icons.yml index 1409096cd8..3deb808f0b 100644 --- a/.github/workflows/publish/icons.yml +++ b/.github/workflows/icons.yml @@ -3,7 +3,7 @@ on: push: paths: - "packages/icons/**/*" - - ".github/workflows/publish/icons-publish.yml" + - ".github/workflows/icons-publish.yml" - ".github/actions/publish/action.yaml" jobs: publish: diff --git a/.github/workflows/publish/jest-config.yml b/.github/workflows/jest-config.yml similarity index 87% rename from .github/workflows/publish/jest-config.yml rename to .github/workflows/jest-config.yml index 5f3f0b93b5..2d5a1079cb 100644 --- a/.github/workflows/publish/jest-config.yml +++ b/.github/workflows/jest-config.yml @@ -3,7 +3,7 @@ on: push: paths: - "packages/jest-config/**/*" - - ".github/workflows/publish/jest-config.yml" + - ".github/workflows/jest-config.yml" - ".github/actions/publish/action.yaml" jobs: publish: diff --git a/.github/workflows/publish/react-sdk.yml b/.github/workflows/react-sdk.yml similarity index 87% rename from .github/workflows/publish/react-sdk.yml rename to .github/workflows/react-sdk.yml index 00ba8d85fc..9a122a632b 100644 --- a/.github/workflows/publish/react-sdk.yml +++ b/.github/workflows/react-sdk.yml @@ -3,7 +3,7 @@ on: push: paths: - "packages/react-sdk/**/*" - - ".github/workflows/publish/react-sdk.yml" + - ".github/workflows/react-sdk.yml" - ".github/actions/publish/action.yaml" jobs: publish: diff --git a/.github/workflows/publish/tsconfig.yml b/.github/workflows/tsconfig.yml similarity index 88% rename from .github/workflows/publish/tsconfig.yml rename to .github/workflows/tsconfig.yml index 08d7b2ea80..f9b6ed774e 100644 --- a/.github/workflows/publish/tsconfig.yml +++ b/.github/workflows/tsconfig.yml @@ -3,7 +3,7 @@ on: push: paths: - "packages/tsconfig/**/*" - - ".github/workflows/publish/tsconfig.yml" + - ".github/workflows/tsconfig.yml" - ".github/actions/publish/action.yaml" jobs: publish: From f341ae554bf9372dca8fc92b3cb51bc26dea4605 Mon Sep 17 00:00:00 2001 From: Andras Bacsai Date: Wed, 27 Jul 2022 19:22:00 +0000 Subject: [PATCH 44/57] fix pr template --- .github/pull_request_template.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index cef4574ccc..9436f72f4e 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -14,7 +14,7 @@ ## Before merging -- [ ] tested locally and on preview environment (preview dev login: 5de6e) +- [ ] 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 From e23f19fd9e307333f61113d305755c21c6e1454b Mon Sep 17 00:00:00 2001 From: Andras Bacsai Date: Thu, 28 Jul 2022 09:55:46 +0000 Subject: [PATCH 45/57] add design-system package --- .github/workflows/design-system.yml | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 .github/workflows/design-system.yml diff --git a/.github/workflows/design-system.yml b/.github/workflows/design-system.yml new file mode 100644 index 0000000000..109456bc75 --- /dev/null +++ b/.github/workflows/design-system.yml @@ -0,0 +1,16 @@ +name: Design System Publish +on: + push: + paths: + - "packages/design-system/**/*" + - ".github/workflows/design-system.yml" + - ".github/actions/publish/action.yaml" +jobs: + publish: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + - uses: ./.github/actions/publish + with: + package: "./packages/design-system/package.json" + token: ${{ secrets.NPM_TOKEN }} From d56d9d423f8b91e30643cdaf147dabc25c979837 Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Thu, 28 Jul 2022 14:47:11 +0200 Subject: [PATCH 46/57] stop using dirname --- apps/designer/app/routes/designer/$id.tsx | 2 -- packages/asset-uploader/package.json | 6 +++-- packages/asset-uploader/src/constants.ts | 2 +- packages/asset-uploader/src/delete.ts | 6 ++--- .../src/helpers/get-image-local-path.test.ts | 26 ------------------- .../src/helpers/get-image-local-path.ts | 10 ------- .../src/helpers/image-fs-path.ts | 18 +++++++++++++ packages/asset-uploader/src/upload.ts | 6 ++--- yarn.lock | 10 +++++++ 9 files changed, 37 insertions(+), 49 deletions(-) delete mode 100644 packages/asset-uploader/src/helpers/get-image-local-path.test.ts delete mode 100644 packages/asset-uploader/src/helpers/get-image-local-path.ts create mode 100644 packages/asset-uploader/src/helpers/image-fs-path.ts diff --git a/apps/designer/app/routes/designer/$id.tsx b/apps/designer/app/routes/designer/$id.tsx index a29372937b..40fb5a4597 100644 --- a/apps/designer/app/routes/designer/$id.tsx +++ b/apps/designer/app/routes/designer/$id.tsx @@ -52,7 +52,6 @@ export const action: ActionFunction = async ({ request, params }) => { const deletedAsset = await deleteAsset({ id: assetId, name: assetName, - dirname: __dirname, }); return { deletedAsset }; @@ -69,7 +68,6 @@ export const action: ActionFunction = async ({ request, params }) => { const assets = await uploadAssets({ request, projectId: params.id, - dirname: __dirname, }); return { uploadedAssets: assets.map((asset: Asset) => ({ diff --git a/packages/asset-uploader/package.json b/packages/asset-uploader/package.json index 75a872e23c..a98b007862 100644 --- a/packages/asset-uploader/package.json +++ b/packages/asset-uploader/package.json @@ -14,10 +14,12 @@ "dependencies": { "@aws-sdk/client-s3": "^3.131.0", "@aws-sdk/lib-storage": "^3.131.0", - "sharp": "^0.30.7", - "@webstudio-is/prisma-client": "*" + "@webstudio-is/prisma-client": "*", + "app-root-path": "^3.0.0", + "sharp": "^0.30.7" }, "devDependencies": { + "@types/app-root-path": "^1.2.4", "@types/node": "^17.0.21", "@types/sharp": "^0.30.4", "jest-config": "*", diff --git a/packages/asset-uploader/src/constants.ts b/packages/asset-uploader/src/constants.ts index 6750073003..2e191ab557 100644 --- a/packages/asset-uploader/src/constants.ts +++ b/packages/asset-uploader/src/constants.ts @@ -1 +1 @@ -export const DEFAULT_UPLPOAD_PATH = "uploads"; +export const DEFAULT_UPLPOAD_PATH = "pub lic/uploads"; diff --git a/packages/asset-uploader/src/delete.ts b/packages/asset-uploader/src/delete.ts index 716d355c75..b02c9049ec 100644 --- a/packages/asset-uploader/src/delete.ts +++ b/packages/asset-uploader/src/delete.ts @@ -3,17 +3,15 @@ import { prisma, Asset } from "@webstudio-is/prisma-client"; import { unlink } from "fs/promises"; import path from "path"; import { deleteAssetInDb } from "./db"; -import { getImageLocalDirectory } from "./helpers/get-image-local-path"; +import { imageFSDirectory } from "./helpers/image-fs-path"; import { s3EnvVariables } from "./schema"; import { getS3Client } from "./targets/s3/client"; export const deleteAsset = async ({ id, name, - dirname, }: { id: string; - dirname: string; name: string; }): Promise => { const currentAsset = await prisma?.asset.findUnique({ @@ -32,7 +30,7 @@ export const deleteAsset = async ({ return await deleteAssetInDb(id); } else { - const directory = await getImageLocalDirectory(dirname); + const directory = await imageFSDirectory(); await unlink(path.join(directory, name)); return await deleteAssetInDb(id); diff --git a/packages/asset-uploader/src/helpers/get-image-local-path.test.ts b/packages/asset-uploader/src/helpers/get-image-local-path.test.ts deleted file mode 100644 index 6217a15ed9..0000000000 --- a/packages/asset-uploader/src/helpers/get-image-local-path.test.ts +++ /dev/null @@ -1,26 +0,0 @@ -/* eslint-disable @typescript-eslint/no-var-requires */ -import { getImageLocalDirectory } from "./get-image-local-path"; - -describe("getAssetPath", () => { - const OLD_ENV = process.env; - - beforeEach(() => { - jest.resetModules(); - process.env = OLD_ENV; - }); - - afterAll(() => { - process.env = OLD_ENV; - }); - - describe("getImageLocalDirectory", () => { - test("creates path", () => { - expect(getImageLocalDirectory("uploads")).toBe("public/uploads"); - }); - test("changes path with env", () => { - process.env.FILE_UPLOAD_PATH = "test"; - const { getImageLocalDirectory } = require("./get-image-local-path"); - expect(getImageLocalDirectory("uploads")).toBe("public/test"); - }); - }); -}); diff --git a/packages/asset-uploader/src/helpers/get-image-local-path.ts b/packages/asset-uploader/src/helpers/get-image-local-path.ts deleted file mode 100644 index 71d68909f0..0000000000 --- a/packages/asset-uploader/src/helpers/get-image-local-path.ts +++ /dev/null @@ -1,10 +0,0 @@ -import path from "path"; -import { fsEnvVariables } from "../schema"; -const fsUploadVars = fsEnvVariables.parse(process.env); - -export const getImageLocalDirectory = (dirname: string) => { - const uploads = path.join(dirname, "../public"); - const directory = path.join(uploads, fsUploadVars.FILE_UPLOAD_PATH); - - return directory; -}; diff --git a/packages/asset-uploader/src/helpers/image-fs-path.ts b/packages/asset-uploader/src/helpers/image-fs-path.ts new file mode 100644 index 0000000000..ce0e01f5d9 --- /dev/null +++ b/packages/asset-uploader/src/helpers/image-fs-path.ts @@ -0,0 +1,18 @@ +import path from "path"; +import appRoot from "app-root-path"; +import { fsEnvVariables } from "../schema"; +const fsUploadVars = fsEnvVariables.parse(process.env); + +export const imageFSDirectory = () => { + const basePath = + process.env.NODE_ENV === "development" + ? path.join( + appRoot.path, + "apps", + "designer", + fsUploadVars.FILE_UPLOAD_PATH + ) + : ""; + + return basePath; +}; diff --git a/packages/asset-uploader/src/upload.ts b/packages/asset-uploader/src/upload.ts index 1b57199ccd..c97a34ca26 100644 --- a/packages/asset-uploader/src/upload.ts +++ b/packages/asset-uploader/src/upload.ts @@ -7,7 +7,7 @@ import { uploadToS3 } from "./targets/s3/uploader"; import { uploadToDisk } from "./targets/disk/upload"; import { assetEnvVariables, s3EnvVariables } from "./schema"; import { Asset } from "@webstudio-is/prisma-client"; -import { getImageLocalDirectory } from "./helpers/get-image-local-path"; +import { imageFSDirectory } from "./helpers/image-fs-path"; const isS3Upload = s3EnvVariables.safeParse(process.env).success; @@ -19,13 +19,11 @@ export const MAX_UPLOAD_SIZE = parseInt(commonUploadVars.MAX_UPLOAD_SIZE) * 1e6; export const uploadAssets = async ({ request, projectId, - dirname, }: { request: Request; projectId: string; - dirname: string; }): Promise => { - const directory = await getImageLocalDirectory(dirname); + const directory = await imageFSDirectory(); const formData = await unstable_parseMultipartFormData( request, isS3Upload diff --git a/yarn.lock b/yarn.lock index 56af41745b..c28c4e3666 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4855,6 +4855,11 @@ dependencies: "@types/estree" "*" +"@types/app-root-path@^1.2.4": + version "1.2.4" + resolved "https://registry.yarnpkg.com/@types/app-root-path/-/app-root-path-1.2.4.tgz#a78b703282b32ac54de768f5512ecc3569919dc7" + integrity sha512-yhURoXmWN/zfw2MXXcOdUTwe5CWhzRWtb4Rs2+JwGpuhm2hxLCzjASi/aIuyVeJB3Iyks1teaHyOEfNNmltdvQ== + "@types/aria-query@^4.2.0": version "4.2.2" resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-4.2.2.tgz#ed4e0ad92306a704f9fb132a0cfcf77486dbe2bc" @@ -5986,6 +5991,11 @@ app-root-dir@^1.0.2: resolved "https://registry.yarnpkg.com/app-root-dir/-/app-root-dir-1.0.2.tgz#38187ec2dea7577fff033ffcb12172692ff6e118" integrity sha512-jlpIfsOoNoafl92Sz//64uQHGSyMrD2vYG5d8o2a4qGvyNCvXur7bzIsWtAC/6flI2RYAp3kv8rsfBtaLm7w0g== +app-root-path@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/app-root-path/-/app-root-path-3.0.0.tgz#210b6f43873227e18a4b810a032283311555d5ad" + integrity sha512-qMcx+Gy2UZynHjOHOIXPNvpf+9cjvk3cWrBBK7zg4gH9+clobJRb9NGzcT7mQTcV/6Gm/1WelUtqxVXnNlrwcw== + aproba@^1.0.3, aproba@^1.1.1: version "1.2.0" resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a" From 775d5f40df344b17b352880a419b6a3a42427ee4 Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Thu, 28 Jul 2022 14:51:03 +0200 Subject: [PATCH 47/57] fixtypo --- packages/asset-uploader/src/constants.ts | 2 +- packages/asset-uploader/src/schema.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/asset-uploader/src/constants.ts b/packages/asset-uploader/src/constants.ts index 2e191ab557..6616fc8004 100644 --- a/packages/asset-uploader/src/constants.ts +++ b/packages/asset-uploader/src/constants.ts @@ -1 +1 @@ -export const DEFAULT_UPLPOAD_PATH = "pub lic/uploads"; +export const DEFAULT_UPLOAD_PATH = "public/uploads"; diff --git a/packages/asset-uploader/src/schema.ts b/packages/asset-uploader/src/schema.ts index 45399df529..12205c9724 100644 --- a/packages/asset-uploader/src/schema.ts +++ b/packages/asset-uploader/src/schema.ts @@ -1,6 +1,6 @@ import { z } from "zod"; import { NodeOnDiskFile } from "@remix-run/node"; -import { DEFAULT_UPLPOAD_PATH } from "./constants"; +import { DEFAULT_UPLOAD_PATH } from "./constants"; const SingleImageInUpload = z.instanceof(NodeOnDiskFile); @@ -25,7 +25,7 @@ export const s3EnvVariables = z.object({ }); export const fsEnvVariables = z.object({ - FILE_UPLOAD_PATH: z.string().optional().default(DEFAULT_UPLPOAD_PATH), + FILE_UPLOAD_PATH: z.string().optional().default(DEFAULT_UPLOAD_PATH), }); export const assetEnvVariables = z.object({ From 85b901edd820d483a17a676d317a719b126fece0 Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Thu, 28 Jul 2022 15:06:28 +0200 Subject: [PATCH 48/57] add prod --- .../src/helpers/image-fs-path.ts | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/packages/asset-uploader/src/helpers/image-fs-path.ts b/packages/asset-uploader/src/helpers/image-fs-path.ts index ce0e01f5d9..e8f1f2210b 100644 --- a/packages/asset-uploader/src/helpers/image-fs-path.ts +++ b/packages/asset-uploader/src/helpers/image-fs-path.ts @@ -4,15 +4,14 @@ import { fsEnvVariables } from "../schema"; const fsUploadVars = fsEnvVariables.parse(process.env); export const imageFSDirectory = () => { - const basePath = - process.env.NODE_ENV === "development" - ? path.join( - appRoot.path, - "apps", - "designer", - fsUploadVars.FILE_UPLOAD_PATH - ) - : ""; + const isProd = process.env.NODE_ENV === "production"; - return basePath; + if (isProd) return path.join(appRoot.path, fsUploadVars.FILE_UPLOAD_PATH); + + return path.join( + appRoot.path, + "apps", + "designer", + fsUploadVars.FILE_UPLOAD_PATH + ); }; From 486b2740c0ff5c464c3f6fb56579f252450b7237 Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Thu, 28 Jul 2022 15:09:00 +0200 Subject: [PATCH 49/57] PR fixes --- .../features/sidebar-left/panels/components/thumbnail.tsx | 2 +- packages/asset-uploader/src/delete.ts | 6 +++--- packages/asset-uploader/src/helpers/image-fs-path.ts | 2 +- packages/asset-uploader/src/upload.ts | 4 ++-- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/apps/designer/app/designer/features/sidebar-left/panels/components/thumbnail.tsx b/apps/designer/app/designer/features/sidebar-left/panels/components/thumbnail.tsx index c64c7f4f14..e4109c2cce 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/components/thumbnail.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/components/thumbnail.tsx @@ -75,7 +75,7 @@ export const AssetManagerThumbnail = ({ return ( => { - const currentAsset = await prisma?.asset.findUnique({ + const currentAsset = await prisma.asset.findUnique({ where: { id }, }); if (!currentAsset) throw new Error("Asset does not exist"); @@ -30,7 +30,7 @@ export const deleteAsset = async ({ return await deleteAssetInDb(id); } else { - const directory = await imageFSDirectory(); + const directory = await imageFsDirectory(); await unlink(path.join(directory, name)); return await deleteAssetInDb(id); diff --git a/packages/asset-uploader/src/helpers/image-fs-path.ts b/packages/asset-uploader/src/helpers/image-fs-path.ts index e8f1f2210b..6889eb1d61 100644 --- a/packages/asset-uploader/src/helpers/image-fs-path.ts +++ b/packages/asset-uploader/src/helpers/image-fs-path.ts @@ -3,7 +3,7 @@ import appRoot from "app-root-path"; import { fsEnvVariables } from "../schema"; const fsUploadVars = fsEnvVariables.parse(process.env); -export const imageFSDirectory = () => { +export const imageFsDirectory = () => { const isProd = process.env.NODE_ENV === "production"; if (isProd) return path.join(appRoot.path, fsUploadVars.FILE_UPLOAD_PATH); diff --git a/packages/asset-uploader/src/upload.ts b/packages/asset-uploader/src/upload.ts index c97a34ca26..cd1c26af61 100644 --- a/packages/asset-uploader/src/upload.ts +++ b/packages/asset-uploader/src/upload.ts @@ -7,7 +7,7 @@ import { uploadToS3 } from "./targets/s3/uploader"; import { uploadToDisk } from "./targets/disk/upload"; import { assetEnvVariables, s3EnvVariables } from "./schema"; import { Asset } from "@webstudio-is/prisma-client"; -import { imageFSDirectory } from "./helpers/image-fs-path"; +import { imageFsDirectory } from "./helpers/image-fs-path"; const isS3Upload = s3EnvVariables.safeParse(process.env).success; @@ -23,7 +23,7 @@ export const uploadAssets = async ({ request: Request; projectId: string; }): Promise => { - const directory = await imageFSDirectory(); + const directory = await imageFsDirectory(); const formData = await unstable_parseMultipartFormData( request, isS3Upload From 7f2681b61e0fa7570433926ee24eb8322aadcc92 Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Thu, 28 Jul 2022 15:11:43 +0200 Subject: [PATCH 50/57] fix test --- packages/asset-uploader/src/helpers/get-asset-path.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/asset-uploader/src/helpers/get-asset-path.test.ts b/packages/asset-uploader/src/helpers/get-asset-path.test.ts index 0701701e96..8dc50db554 100644 --- a/packages/asset-uploader/src/helpers/get-asset-path.test.ts +++ b/packages/asset-uploader/src/helpers/get-asset-path.test.ts @@ -39,7 +39,7 @@ describe("getAssetPath", () => { name: "test.png", location: Location.FS, }) - ).toBe("/uploads/test.png"); + ).toBe("/public/uploads/test.png"); }); test("return local path with custom path", () => { From 4c08b537a729d1275986fde315faf1bae7368490 Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Thu, 28 Jul 2022 15:25:27 +0200 Subject: [PATCH 51/57] fix path --- packages/asset-uploader/src/helpers/get-asset-path.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/asset-uploader/src/helpers/get-asset-path.ts b/packages/asset-uploader/src/helpers/get-asset-path.ts index 168fdc6c52..986682e8d0 100644 --- a/packages/asset-uploader/src/helpers/get-asset-path.ts +++ b/packages/asset-uploader/src/helpers/get-asset-path.ts @@ -7,7 +7,11 @@ const fsEnvs = fsEnvVariables.parse(process.env); export const getAssetPath = (asset: DbAsset) => { if (asset.location === Location.FS) { - return path.join("/", fsEnvs.FILE_UPLOAD_PATH, asset.name); + return path.join( + "/", + fsEnvs.FILE_UPLOAD_PATH.split("public")[1], + asset.name + ); } if (asset.location === Location.REMOTE && s3Envs.success) { From fd980ce9516b8464e5e19669d24a6acfcf4d868c Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Thu, 28 Jul 2022 15:28:45 +0200 Subject: [PATCH 52/57] fix build --- packages/design-system/package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/design-system/package.json b/packages/design-system/package.json index 3fe1bc1d18..2037a8182d 100644 --- a/packages/design-system/package.json +++ b/packages/design-system/package.json @@ -47,7 +47,8 @@ "@radix-ui/react-toggle-group": "^0.1.5", "@radix-ui/react-tooltip": "^0.1.7", "@radix-ui/react-use-layout-effect": "^0.1.0", - "@webstudio-is/icons": "*" + "@webstudio-is/icons": "*", + "@webstudio-is/react-sdk": "*" }, "main": "lib/index.js", "types": "lib/index.d.ts", From bd3ef146f5f254a8c8b8ffcbea059823ff7b904f Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Thu, 28 Jul 2022 15:36:39 +0200 Subject: [PATCH 53/57] fix test --- packages/asset-uploader/src/helpers/get-asset-path.test.ts | 2 +- packages/asset-uploader/src/helpers/get-asset-path.ts | 7 ++----- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/packages/asset-uploader/src/helpers/get-asset-path.test.ts b/packages/asset-uploader/src/helpers/get-asset-path.test.ts index 8dc50db554..0701701e96 100644 --- a/packages/asset-uploader/src/helpers/get-asset-path.test.ts +++ b/packages/asset-uploader/src/helpers/get-asset-path.test.ts @@ -39,7 +39,7 @@ describe("getAssetPath", () => { name: "test.png", location: Location.FS, }) - ).toBe("/public/uploads/test.png"); + ).toBe("/uploads/test.png"); }); test("return local path with custom path", () => { diff --git a/packages/asset-uploader/src/helpers/get-asset-path.ts b/packages/asset-uploader/src/helpers/get-asset-path.ts index 986682e8d0..1403f9790b 100644 --- a/packages/asset-uploader/src/helpers/get-asset-path.ts +++ b/packages/asset-uploader/src/helpers/get-asset-path.ts @@ -7,11 +7,8 @@ const fsEnvs = fsEnvVariables.parse(process.env); export const getAssetPath = (asset: DbAsset) => { if (asset.location === Location.FS) { - return path.join( - "/", - fsEnvs.FILE_UPLOAD_PATH.split("public")[1], - asset.name - ); + const splitPath = fsEnvs.FILE_UPLOAD_PATH.split("public"); + return path.join("/", splitPath[splitPath.length - 1], asset.name); } if (asset.location === Location.REMOTE && s3Envs.success) { From f1382244e976aa1b42616b139240298328b18040 Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Thu, 28 Jul 2022 15:47:49 +0200 Subject: [PATCH 54/57] update pkg --- packages/design-system/package.json | 2 +- yarn.lock | 111 +++++++++++++++++++++++----- 2 files changed, 93 insertions(+), 20 deletions(-) diff --git a/packages/design-system/package.json b/packages/design-system/package.json index 2037a8182d..6465ddcc26 100644 --- a/packages/design-system/package.json +++ b/packages/design-system/package.json @@ -45,7 +45,7 @@ "@radix-ui/react-tabs": "^0.1.5", "@radix-ui/react-toggle": "^0.1.4", "@radix-ui/react-toggle-group": "^0.1.5", - "@radix-ui/react-tooltip": "^0.1.7", + "@radix-ui/react-tooltip": "^1.0.0", "@radix-ui/react-use-layout-effect": "^0.1.0", "@webstudio-is/icons": "*", "@webstudio-is/react-sdk": "*" diff --git a/yarn.lock b/yarn.lock index c9c0bcb435..c28c4e3666 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2752,6 +2752,13 @@ dependencies: "@babel/runtime" "^7.13.10" +"@radix-ui/primitive@1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.0.0.tgz#e1d8ef30b10ea10e69c76e896f608d9276352253" + integrity sha512-3e7rn8FDMin4CgeL7Z/49smCA3rFYY3Ha2rUQ7HRWFadS5iCRw08ZgVT1LaNTCNqgvrUiyczLflrVrF0SRQtNA== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-accessible-icon@^0.1.4": version "0.1.4" resolved "https://registry.yarnpkg.com/@radix-ui/react-accessible-icon/-/react-accessible-icon-0.1.4.tgz#bdbf1e3226a0e9e7778b68728b175bdc532b720c" @@ -2931,6 +2938,18 @@ "@radix-ui/react-use-callback-ref" "0.1.0" "@radix-ui/react-use-escape-keydown" "0.1.0" +"@radix-ui/react-dismissable-layer@1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.0.tgz#35b7826fa262fd84370faef310e627161dffa76b" + integrity sha512-n7kDRfx+LB1zLueRDvZ1Pd0bxdJWDUZNQ/GWoxDn2prnuJKRdxsjulejX/ePkOsLi2tTm6P24mDqlMSgQpsT6g== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/primitive" "1.0.0" + "@radix-ui/react-compose-refs" "1.0.0" + "@radix-ui/react-primitive" "1.0.0" + "@radix-ui/react-use-callback-ref" "1.0.0" + "@radix-ui/react-use-escape-keydown" "1.0.0" + "@radix-ui/react-dropdown-menu@^0.1.6": version "0.1.6" resolved "https://registry.yarnpkg.com/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-0.1.6.tgz#3203229788cd57e552c9f19dcc7008e2b545919c" @@ -2975,6 +2994,14 @@ "@babel/runtime" "^7.13.10" "@radix-ui/react-use-layout-effect" "0.1.0" +"@radix-ui/react-id@1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-1.0.0.tgz#8d43224910741870a45a8c9d092f25887bb6d11e" + integrity sha512-Q6iAB/U7Tq3NTolBBQbHTgclPmGWE3OlktGGqrClPozSw4vkQ1DfQAOtzgRPecKsMdJINE05iaoDUG8tRzCBjw== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-use-layout-effect" "1.0.0" + "@radix-ui/react-label@0.1.5", "@radix-ui/react-label@^0.1.5": version "0.1.5" resolved "https://registry.yarnpkg.com/@radix-ui/react-label/-/react-label-0.1.5.tgz#12cd965bfc983e0148121d4c99fb8e27a917c45c" @@ -3046,7 +3073,7 @@ "@radix-ui/react-use-size" "0.1.1" "@radix-ui/rect" "0.1.1" -"@radix-ui/react-popper@^1.0.0": +"@radix-ui/react-popper@1.0.0", "@radix-ui/react-popper@^1.0.0": version "1.0.0" resolved "https://registry.yarnpkg.com/@radix-ui/react-popper/-/react-popper-1.0.0.tgz#fb4f937864bf39c48f27f55beee61fa9f2bef93c" integrity sha512-k2dDd+1Wl0XWAMs9ZvAxxYsB9sOsEhrFQV4CINd7IUZf0wfdye4OHen9siwxvZImbzhgVeKTJi68OQmPRvVdMg== @@ -3071,6 +3098,14 @@ "@radix-ui/react-primitive" "0.1.4" "@radix-ui/react-use-layout-effect" "0.1.0" +"@radix-ui/react-portal@1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.0.0.tgz#7220b66743394fabb50c55cb32381395cc4a276b" + integrity sha512-a8qyFO/Xb99d8wQdu4o7qnigNjTPG123uADNecz0eX4usnQEj7o+cG4ZX4zkqq98NYekT7UoEQIjxBNWIFuqTA== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-primitive" "1.0.0" + "@radix-ui/react-presence@0.1.2": version "0.1.2" resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-0.1.2.tgz#9f11cce3df73cf65bc348e8b76d891f0d54c1fe3" @@ -3080,6 +3115,15 @@ "@radix-ui/react-compose-refs" "0.1.0" "@radix-ui/react-use-layout-effect" "0.1.0" +"@radix-ui/react-presence@1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.0.0.tgz#814fe46df11f9a468808a6010e3f3ca7e0b2e84a" + integrity sha512-A+6XEvN01NfVWiKu38ybawfHsBjWum42MRPnEuqPsBZ4eV7e/7K321B5VgYMPv3Xx5An6o1/l9ZuDBgmcmWK3w== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-compose-refs" "1.0.0" + "@radix-ui/react-use-layout-effect" "1.0.0" + "@radix-ui/react-primitive@0.1.4": version "0.1.4" resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-0.1.4.tgz#6c233cf08b0cb87fecd107e9efecb3f21861edc1" @@ -3255,26 +3299,24 @@ "@radix-ui/react-primitive" "0.1.4" "@radix-ui/react-use-controllable-state" "0.1.0" -"@radix-ui/react-tooltip@^0.1.7": - version "0.1.7" - resolved "https://registry.yarnpkg.com/@radix-ui/react-tooltip/-/react-tooltip-0.1.7.tgz#6f8c00d6e489565d14abf209ce0fb8853c8c8ee3" - integrity sha512-eiBUsVOHenZ0JR16tl970bB0DafJBz6mFgSGfIGIVpflFj0LIsIDiLMsYyvYdx1KwwsIUDTEZtxcPm/sWjPzqA== +"@radix-ui/react-tooltip@^1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-tooltip/-/react-tooltip-1.0.0.tgz#f7fcecf2bac5c31cd14666b5acd056015fc21646" + integrity sha512-RB06pov+O4Npy10ei1C6fsyB9QoOjz7Ubo8Sl3qdKtLgkL9iI96925DYtH0bxx6MH6YB2FuzLU6B75qn3AQQQw== dependencies: "@babel/runtime" "^7.13.10" - "@radix-ui/primitive" "0.1.0" - "@radix-ui/react-compose-refs" "0.1.0" - "@radix-ui/react-context" "0.1.1" - "@radix-ui/react-id" "0.1.5" - "@radix-ui/react-popper" "0.1.4" - "@radix-ui/react-portal" "0.1.4" - "@radix-ui/react-presence" "0.1.2" - "@radix-ui/react-primitive" "0.1.4" - "@radix-ui/react-slot" "0.1.2" - "@radix-ui/react-use-controllable-state" "0.1.0" - "@radix-ui/react-use-escape-keydown" "0.1.0" - "@radix-ui/react-use-previous" "0.1.1" - "@radix-ui/react-use-rect" "0.1.1" - "@radix-ui/react-visually-hidden" "0.1.4" + "@radix-ui/primitive" "1.0.0" + "@radix-ui/react-compose-refs" "1.0.0" + "@radix-ui/react-context" "1.0.0" + "@radix-ui/react-dismissable-layer" "1.0.0" + "@radix-ui/react-id" "1.0.0" + "@radix-ui/react-popper" "1.0.0" + "@radix-ui/react-portal" "1.0.0" + "@radix-ui/react-presence" "1.0.0" + "@radix-ui/react-primitive" "1.0.0" + "@radix-ui/react-slot" "1.0.0" + "@radix-ui/react-use-controllable-state" "1.0.0" + "@radix-ui/react-visually-hidden" "1.0.0" "@radix-ui/react-use-body-pointer-events@0.1.1": version "0.1.1" @@ -3291,6 +3333,13 @@ dependencies: "@babel/runtime" "^7.13.10" +"@radix-ui/react-use-callback-ref@1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.0.tgz#9e7b8b6b4946fe3cbe8f748c82a2cce54e7b6a90" + integrity sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-use-controllable-state@0.1.0": version "0.1.0" resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-0.1.0.tgz#4fced164acfc69a4e34fb9d193afdab973a55de1" @@ -3299,6 +3348,14 @@ "@babel/runtime" "^7.13.10" "@radix-ui/react-use-callback-ref" "0.1.0" +"@radix-ui/react-use-controllable-state@1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.0.tgz#a64deaafbbc52d5d407afaa22d493d687c538b7f" + integrity sha512-FohDoZvk3mEXh9AWAVyRTYR4Sq7/gavuofglmiXB2g1aKyboUD4YtgWxKj8O5n+Uak52gXQ4wKz5IFST4vtJHg== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-use-callback-ref" "1.0.0" + "@radix-ui/react-use-direction@0.1.0": version "0.1.0" resolved "https://registry.yarnpkg.com/@radix-ui/react-use-direction/-/react-use-direction-0.1.0.tgz#97ac1d52e497c974389e7988f809238ed72e7df7" @@ -3314,6 +3371,14 @@ "@babel/runtime" "^7.13.10" "@radix-ui/react-use-callback-ref" "0.1.0" +"@radix-ui/react-use-escape-keydown@1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.0.tgz#aef375db4736b9de38a5a679f6f49b45a060e5d1" + integrity sha512-JwfBCUIfhXRxKExgIqGa4CQsiMemo1Xt0W/B4ei3fpzpvPENKpMKQ8mZSB6Acj3ebrAEgi2xiQvcI1PAAodvyg== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-use-callback-ref" "1.0.0" + "@radix-ui/react-use-layout-effect@0.1.0", "@radix-ui/react-use-layout-effect@^0.1.0": version "0.1.0" resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-0.1.0.tgz#ebf71bd6d2825de8f1fbb984abf2293823f0f223" @@ -3374,6 +3439,14 @@ "@babel/runtime" "^7.13.10" "@radix-ui/react-primitive" "0.1.4" +"@radix-ui/react-visually-hidden@1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.0.tgz#4d69d7e3b6d21ee4678ed6de5215dcd068394401" + integrity sha512-MwAhMdX+n6S4InwRKSnpUsp+lLkYG6izQF56ul6guSX2mBBLOMV9Frx7xJlkEe2GjKLzbNuHhaCS6e5gopmZNA== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-primitive" "1.0.0" + "@radix-ui/rect@0.1.1": version "0.1.1" resolved "https://registry.yarnpkg.com/@radix-ui/rect/-/rect-0.1.1.tgz#95b5ba51f469bea6b1b841e2d427e17e37d38419" From 3ce9b7952f999ab99731e7598bfd724aa43c0052 Mon Sep 17 00:00:00 2001 From: Roman Pominov Date: Thu, 28 Jul 2022 14:55:21 +0300 Subject: [PATCH 55/57] add storybook support ot design-system --- packages/design-system/.storybook/main.js | 9 +++++++++ packages/design-system/.storybook/preview.js | 9 +++++++++ packages/design-system/package.json | 14 ++++++++++++-- 3 files changed, 30 insertions(+), 2 deletions(-) create mode 100644 packages/design-system/.storybook/main.js create mode 100644 packages/design-system/.storybook/preview.js diff --git a/packages/design-system/.storybook/main.js b/packages/design-system/.storybook/main.js new file mode 100644 index 0000000000..f16eac6b1f --- /dev/null +++ b/packages/design-system/.storybook/main.js @@ -0,0 +1,9 @@ +module.exports = { + stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"], + addons: [ + "@storybook/addon-links", + "@storybook/addon-essentials", + "@storybook/addon-interactions", + ], + framework: "@storybook/react", +}; diff --git a/packages/design-system/.storybook/preview.js b/packages/design-system/.storybook/preview.js new file mode 100644 index 0000000000..f089c7f9d5 --- /dev/null +++ b/packages/design-system/.storybook/preview.js @@ -0,0 +1,9 @@ +export const parameters = { + actions: { argTypesRegex: "^on[A-Z].*" }, + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/, + }, + }, +}; diff --git a/packages/design-system/package.json b/packages/design-system/package.json index 6465ddcc26..d181546931 100644 --- a/packages/design-system/package.json +++ b/packages/design-system/package.json @@ -9,11 +9,21 @@ "build": "rm -fr lib && tsc", "typecheck": "tsc --noEmit", "lint": "eslint ./src --ext .ts,.tsx --max-warnings 0", - "checks": "yarn typecheck && yarn lint" + "checks": "yarn typecheck && yarn lint", + "storybook:run": "start-storybook -p 6006", + "storybook:build": "build-storybook" }, "devDependencies": { "tsup": "^6.1.3", - "typescript": "^4.6.2" + "typescript": "^4.6.2", + "@storybook/addon-actions": "^6.5.6", + "@storybook/addon-essentials": "^6.5.6", + "@storybook/addon-interactions": "^6.5.6", + "@storybook/addon-links": "^6.5.6", + "@storybook/builder-webpack4": "^6.5.6", + "@storybook/manager-webpack4": "^6.5.6", + "@storybook/react": "^6.5.6", + "@storybook/testing-library": "^0.0.11" }, "peerDependencies": { "react": "^17.0.2", From e54c96110f142b311bbeb7b4858a315c8ee88d42 Mon Sep 17 00:00:00 2001 From: Andras Bacsai Date: Thu, 28 Jul 2022 16:15:12 +0000 Subject: [PATCH 56/57] fix: package.json --- packages/react-sdk/package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react-sdk/package.json b/packages/react-sdk/package.json index 57126b695b..5bf5020e21 100644 --- a/packages/react-sdk/package.json +++ b/packages/react-sdk/package.json @@ -59,7 +59,6 @@ "@stitches/core": "^1.2.7", "@webstudio-is/icons": "*", "immer": "^9.0.12", - "jest-config": "*", "mitt": "^3.0.0", "react-nano-state": "^0.4.0", "@webstudio-is/jest-config": "*", From dd0014fd2947b58d8b4dc55bda7d3ef45b29f9e3 Mon Sep 17 00:00:00 2001 From: Andras Bacsai Date: Thu, 28 Jul 2022 16:29:33 +0000 Subject: [PATCH 57/57] fix: build errors --- packages/design-system/tsconfig.json | 2 +- packages/icons/tsconfig.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/design-system/tsconfig.json b/packages/design-system/tsconfig.json index 329cf3ea13..e599e806b6 100644 --- a/packages/design-system/tsconfig.json +++ b/packages/design-system/tsconfig.json @@ -1,6 +1,6 @@ // Extends can't use node's resolution rn https://github.com/dividab/tsconfig-paths/issues/209#issuecomment-1177261091 { - "extends": "../../node_modules/tsconfig/base.json", + "extends": "../../node_modules/@webstudio-is/tsconfig/base.json", "include": ["./src/**/*.ts", "./src/**/*.tsx"], "compilerOptions": { "lib": ["DOM", "DOM.Iterable", "ES2019"], diff --git a/packages/icons/tsconfig.json b/packages/icons/tsconfig.json index 329cf3ea13..e599e806b6 100644 --- a/packages/icons/tsconfig.json +++ b/packages/icons/tsconfig.json @@ -1,6 +1,6 @@ // Extends can't use node's resolution rn https://github.com/dividab/tsconfig-paths/issues/209#issuecomment-1177261091 { - "extends": "../../node_modules/tsconfig/base.json", + "extends": "../../node_modules/@webstudio-is/tsconfig/base.json", "include": ["./src/**/*.ts", "./src/**/*.tsx"], "compilerOptions": { "lib": ["DOM", "DOM.Iterable", "ES2019"],