diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 86215bc2a..3745d5800 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -26,8 +26,9 @@ jobs: echo REACT_APP_SUPABASE_PUBLIC_ANON_KEY="${{ secrets.REACT_APP_SUPABASE_PUBLIC_ANON_KEY }}" >> .env echo REACT_APP_SENTRY_DSN="${{ vars.REACT_APP_SENTRY_DSN }}" >> .env echo SENTRY_AUTH_TOKEN="${{ secrets.SENTRY_AUTH_TOKEN }}" >> .env - echo REACT_APP_MIXPANEL_TOKEN="${{ vars.REACT_APP_MIXPANEL_TOKEN }}" >> .env - echo REACT_APP_WORKER_URL="${{ vars.REACT_APP_WORKER_URL }}" >> .env + echo REACT_APP_MIXPANEL_TOKEN="${{ secrets.REACT_APP_MIXPANEL_TOKEN }}" >> .env + echo REACT_APP_AUTH_WORKER_URL="${{ vars.REACT_APP_AUTH_WORKER_URL }}" >> .env + echo REACT_APP_ANNOUNCEMENTS_WORKER_URL="${{ vars.REACT_APP_ANNOUNCEMENTS_WORKER_URL }}" >> .env cat .env - name: Install and Build diff --git a/manifest.json b/manifest.json index 829b459a3..2997d04ac 100644 --- a/manifest.json +++ b/manifest.json @@ -30,11 +30,17 @@ "https://tally.so", "https://corsproxy.io", "https://zclweepgvqkrelyfwhma.supabase.co", - "https://hook.eu1.make.com", + "https://*.yelbolt.workers.dev", "https://www.colourlovers.com", "https://*.mixpanel.com", "https://asset.brandfetch.io", - "https://*.sentry.io" + "https://*.sentry.io", + "https://*.amazonaws.com" + ], + "devAllowedDomains": [ + "http://localhost:3000", + "http://localhost:8787", + "http://localhost:8888" ] }, "parameters": [ diff --git a/package-lock.json b/package-lock.json index b4e8927db..897a4e795 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,14 +1,14 @@ { "name": "figma-ui-color-palette", - "version": "4.0.4", + "version": "4.1.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "figma-ui-color-palette", - "version": "4.0.4", + "version": "4.1.0", "dependencies": { - "@a_ng_d/figmug-ui": "^0.65.0", + "@a_ng_d/figmug-ui": "^0.83.0", "@a-ng-d/figmug.modules.do-camel-case": "^0.0.4", "@a-ng-d/figmug.modules.do-kebab-case": "^0.0.4", "@a-ng-d/figmug.modules.do-map": "^0.0.3", @@ -64,9 +64,9 @@ } }, "node_modules/@a_ng_d/figmug-ui": { - "version": "0.65.0", - "resolved": "https://registry.npmjs.org/@a_ng_d/figmug-ui/-/figmug-ui-0.65.0.tgz", - "integrity": "sha512-Mgl5BhEErqazmNNbyabFbf7LTh33rKSVEKnvSQHv5T0cE28cpVc+lYxW3GOJjYXPrM0wylSd6hlgWKxk091isg==", + "version": "0.83.0", + "resolved": "https://registry.npmjs.org/@a_ng_d/figmug-ui/-/figmug-ui-0.83.0.tgz", + "integrity": "sha512-+Zcp8/HAdCww6A9NCRyyD3iFD3haRjK3KTGsJLelEd4pi3OqnDQtvMr4dV5x6ER17XgXP7VegNX/GafyHKMtag==", "dependencies": { "@storybook/client-api": "^7.6.17", "figma-plugin-ds": "^1.0.1" @@ -1626,24 +1626,6 @@ "@types/node": "*" } }, - "node_modules/@types/eslint": { - "version": "8.44.0", - "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.44.0.tgz", - "integrity": "sha512-gsF+c/0XOguWgaOgvFs+xnnRqt9GwgTvIks36WpE6ueeI4KCEHHd8K/CKHqhOqrJKsYH8m27kRzQEvWXAwXUTw==", - "dependencies": { - "@types/estree": "*", - "@types/json-schema": "*" - } - }, - "node_modules/@types/eslint-scope": { - "version": "3.7.4", - "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.4.tgz", - "integrity": "sha512-9K4zoImiZc3HlIp6AVUDE4CWYx22a+lhSZMYNpbjW04+YF0KWj4pJXnEMjdnFTiQibFFmElcsasJXDbdI/EPhA==", - "dependencies": { - "@types/eslint": "*", - "@types/estree": "*" - } - }, "node_modules/@types/estree": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz", @@ -1984,9 +1966,9 @@ "dev": true }, "node_modules/@webassemblyjs/ast": { - "version": "1.11.6", - "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.6.tgz", - "integrity": "sha512-IN1xI7PwOvLPgjcf180gC1bqn3q/QaOCwYUahIOhbYUu8KA/3tw2RT/T0Gidi1l7Hhj5D/INhJxiICObqpMu4Q==", + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.12.1.tgz", + "integrity": "sha512-EKfMUOPRRUTy5UII4qJDGPpqfwjOmZ5jeGFwid9mnoqIFK+e0vqoi1qH56JpmZSzEL53jKnNzScdmftJyG5xWg==", "dependencies": { "@webassemblyjs/helper-numbers": "1.11.6", "@webassemblyjs/helper-wasm-bytecode": "1.11.6" @@ -2003,9 +1985,9 @@ "integrity": "sha512-o0YkoP4pVu4rN8aTJgAyj9hC2Sv5UlkzCHhxqWj8butaLvnpdc2jOwh4ewE6CX0txSfLn/UYaV/pheS2Txg//Q==" }, "node_modules/@webassemblyjs/helper-buffer": { - "version": "1.11.6", - "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.6.tgz", - "integrity": "sha512-z3nFzdcp1mb8nEOFFk8DrYLpHvhKC3grJD2ardfKOzmbmJvEf/tPIqCY+sNcwZIY8ZD7IkB2l7/pqhUhqm7hLA==" + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.12.1.tgz", + "integrity": "sha512-nzJwQw99DNDKr9BVCOZcLuJJUlqkJh+kVzVl6Fmq/tI5ZtEyWT1KZMyOXltXLZJmDtvLCDgwsyrkohEtopTXCw==" }, "node_modules/@webassemblyjs/helper-numbers": { "version": "1.11.6", @@ -2023,14 +2005,14 @@ "integrity": "sha512-sFFHKwcmBprO9e7Icf0+gddyWYDViL8bpPjJJl0WHxCdETktXdmtWLGVzoHbqUcY4Be1LkNfwTmXOJUFZYSJdA==" }, "node_modules/@webassemblyjs/helper-wasm-section": { - "version": "1.11.6", - "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.6.tgz", - "integrity": "sha512-LPpZbSOwTpEC2cgn4hTydySy1Ke+XEu+ETXuoyvuyezHO3Kjdu90KK95Sh9xTbmjrCsUwvWwCOQQNta37VrS9g==", + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.12.1.tgz", + "integrity": "sha512-Jif4vfB6FJlUlSbgEMHUyk1j234GTNG9dBJ4XJdOySoj518Xj0oGsNi59cUQF4RRMS9ouBUxDDdyBVfPTypa5g==", "dependencies": { - "@webassemblyjs/ast": "1.11.6", - "@webassemblyjs/helper-buffer": "1.11.6", + "@webassemblyjs/ast": "1.12.1", + "@webassemblyjs/helper-buffer": "1.12.1", "@webassemblyjs/helper-wasm-bytecode": "1.11.6", - "@webassemblyjs/wasm-gen": "1.11.6" + "@webassemblyjs/wasm-gen": "1.12.1" } }, "node_modules/@webassemblyjs/ieee754": { @@ -2055,26 +2037,26 @@ "integrity": "sha512-vtXf2wTQ3+up9Zsg8sa2yWiQpzSsMyXj0qViVP6xKGCUT8p8YJ6HqI7l5eCnWx1T/FYdsv07HQs2wTFbbof/RA==" }, "node_modules/@webassemblyjs/wasm-edit": { - "version": "1.11.6", - "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.6.tgz", - "integrity": "sha512-Ybn2I6fnfIGuCR+Faaz7YcvtBKxvoLV3Lebn1tM4o/IAJzmi9AWYIPWpyBfU8cC+JxAO57bk4+zdsTjJR+VTOw==", + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.12.1.tgz", + "integrity": "sha512-1DuwbVvADvS5mGnXbE+c9NfA8QRcZ6iKquqjjmR10k6o+zzsRVesil54DKexiowcFCPdr/Q0qaMgB01+SQ1u6g==", "dependencies": { - "@webassemblyjs/ast": "1.11.6", - "@webassemblyjs/helper-buffer": "1.11.6", + "@webassemblyjs/ast": "1.12.1", + "@webassemblyjs/helper-buffer": "1.12.1", "@webassemblyjs/helper-wasm-bytecode": "1.11.6", - "@webassemblyjs/helper-wasm-section": "1.11.6", - "@webassemblyjs/wasm-gen": "1.11.6", - "@webassemblyjs/wasm-opt": "1.11.6", - "@webassemblyjs/wasm-parser": "1.11.6", - "@webassemblyjs/wast-printer": "1.11.6" + "@webassemblyjs/helper-wasm-section": "1.12.1", + "@webassemblyjs/wasm-gen": "1.12.1", + "@webassemblyjs/wasm-opt": "1.12.1", + "@webassemblyjs/wasm-parser": "1.12.1", + "@webassemblyjs/wast-printer": "1.12.1" } }, "node_modules/@webassemblyjs/wasm-gen": { - "version": "1.11.6", - "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.6.tgz", - "integrity": "sha512-3XOqkZP/y6B4F0PBAXvI1/bky7GryoogUtfwExeP/v7Nzwo1QLcq5oQmpKlftZLbT+ERUOAZVQjuNVak6UXjPA==", + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.12.1.tgz", + "integrity": "sha512-TDq4Ojh9fcohAw6OIMXqiIcTq5KUXTGRkVxbSo1hQnSy6lAM5GSdfwWeSxpAo0YzgsgF182E/U0mDNhuA0tW7w==", "dependencies": { - "@webassemblyjs/ast": "1.11.6", + "@webassemblyjs/ast": "1.12.1", "@webassemblyjs/helper-wasm-bytecode": "1.11.6", "@webassemblyjs/ieee754": "1.11.6", "@webassemblyjs/leb128": "1.11.6", @@ -2082,22 +2064,22 @@ } }, "node_modules/@webassemblyjs/wasm-opt": { - "version": "1.11.6", - "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.6.tgz", - "integrity": "sha512-cOrKuLRE7PCe6AsOVl7WasYf3wbSo4CeOk6PkrjS7g57MFfVUF9u6ysQBBODX0LdgSvQqRiGz3CXvIDKcPNy4g==", + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.12.1.tgz", + "integrity": "sha512-Jg99j/2gG2iaz3hijw857AVYekZe2SAskcqlWIZXjji5WStnOpVoat3gQfT/Q5tb2djnCjBtMocY/Su1GfxPBg==", "dependencies": { - "@webassemblyjs/ast": "1.11.6", - "@webassemblyjs/helper-buffer": "1.11.6", - "@webassemblyjs/wasm-gen": "1.11.6", - "@webassemblyjs/wasm-parser": "1.11.6" + "@webassemblyjs/ast": "1.12.1", + "@webassemblyjs/helper-buffer": "1.12.1", + "@webassemblyjs/wasm-gen": "1.12.1", + "@webassemblyjs/wasm-parser": "1.12.1" } }, "node_modules/@webassemblyjs/wasm-parser": { - "version": "1.11.6", - "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.6.tgz", - "integrity": "sha512-6ZwPeGzMJM3Dqp3hCsLgESxBGtT/OeCvCZ4TA1JUPYgmhAx38tTPR9JaKy0S5H3evQpO/h2uWs2j6Yc/fjkpTQ==", + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.12.1.tgz", + "integrity": "sha512-xikIi7c2FHXysxXe3COrVUPSheuBtpcfhbpFj4gmu7KRLYOzANztwUU0IbsqvMqzuNK2+glRGWCEqZo1WCLyAQ==", "dependencies": { - "@webassemblyjs/ast": "1.11.6", + "@webassemblyjs/ast": "1.12.1", "@webassemblyjs/helper-api-error": "1.11.6", "@webassemblyjs/helper-wasm-bytecode": "1.11.6", "@webassemblyjs/ieee754": "1.11.6", @@ -2106,11 +2088,11 @@ } }, "node_modules/@webassemblyjs/wast-printer": { - "version": "1.11.6", - "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.11.6.tgz", - "integrity": "sha512-JM7AhRcE+yW2GWYaKeHL5vt4xqee5N2WcezptmgyhNS+ScggqcT1OtXykhAb13Sn5Yas0j2uv9tHgrjwvzAP4A==", + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.12.1.tgz", + "integrity": "sha512-+X4WAlOisVWQMikjbcvY2e0rwPsKQ9F688lksZhBcPycBBuii3O7m8FACbDMWDojpAqvjIncrG8J0XHKyQfVeA==", "dependencies": { - "@webassemblyjs/ast": "1.11.6", + "@webassemblyjs/ast": "1.12.1", "@xtuc/long": "4.2.2" } }, @@ -2171,10 +2153,10 @@ "node": ">=0.4.0" } }, - "node_modules/acorn-import-assertions": { - "version": "1.9.0", - "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz", - "integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==", + "node_modules/acorn-import-attributes": { + "version": "1.9.5", + "resolved": "https://registry.npmjs.org/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz", + "integrity": "sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==", "peerDependencies": { "acorn": "^8" } @@ -2975,9 +2957,9 @@ } }, "node_modules/enhanced-resolve": { - "version": "5.15.0", - "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.15.0.tgz", - "integrity": "sha512-LXYT42KJ7lpIKECr2mAXIaMldcNCh/7E0KBKOu4KSfkHmP+mZmSs+8V5gBAqisWBy0OO4W5Oyys0GO1Y8KtdKg==", + "version": "5.17.1", + "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz", + "integrity": "sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==", "dependencies": { "graceful-fs": "^4.2.4", "tapable": "^2.2.0" @@ -4984,12 +4966,12 @@ } }, "node_modules/micromatch": { - "version": "4.0.5", - "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz", - "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==", + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz", + "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==", "dev": true, "dependencies": { - "braces": "^3.0.2", + "braces": "^3.0.3", "picomatch": "^2.3.1" }, "engines": { @@ -6107,9 +6089,9 @@ } }, "node_modules/serialize-javascript": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.1.tgz", - "integrity": "sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w==", + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz", + "integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==", "dependencies": { "randombytes": "^2.1.0" } @@ -6409,9 +6391,9 @@ } }, "node_modules/terser": { - "version": "5.18.2", - "resolved": "https://registry.npmjs.org/terser/-/terser-5.18.2.tgz", - "integrity": "sha512-Ah19JS86ypbJzTzvUCX7KOsEIhDaRONungA4aYBjEP3JZRf4ocuDzTg4QWZnPn9DEMiMYGJPiSOy7aykoCc70w==", + "version": "5.31.6", + "resolved": "https://registry.npmjs.org/terser/-/terser-5.31.6.tgz", + "integrity": "sha512-PQ4DAriWzKj+qgehQ7LK5bQqCFNMmlhjR2PFFLuqGCpuCAauxemVBWwWOxo3UIwWQx8+Pr61Df++r76wDmkQBg==", "dependencies": { "@jridgewell/source-map": "^0.3.3", "acorn": "^8.8.2", @@ -6426,15 +6408,15 @@ } }, "node_modules/terser-webpack-plugin": { - "version": "5.3.9", - "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.9.tgz", - "integrity": "sha512-ZuXsqE07EcggTWQjXUj+Aot/OMcD0bMKGgF63f7UxYcu5/AJF53aIpK1YoP5xR9l6s/Hy2b+t1AM0bLNPRuhwA==", + "version": "5.3.10", + "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.10.tgz", + "integrity": "sha512-BKFPWlPDndPs+NGGCr1U59t0XScL5317Y0UReNrHaw9/FwhPENlq6bfgs+4yPfyP51vqC1bQ4rp1EfXW5ZSH9w==", "dependencies": { - "@jridgewell/trace-mapping": "^0.3.17", + "@jridgewell/trace-mapping": "^0.3.20", "jest-worker": "^27.4.5", "schema-utils": "^3.1.1", "serialize-javascript": "^6.0.1", - "terser": "^5.16.8" + "terser": "^5.26.0" }, "engines": { "node": ">= 10.13.0" @@ -6760,9 +6742,9 @@ } }, "node_modules/watchpack": { - "version": "2.4.0", - "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz", - "integrity": "sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==", + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.2.tgz", + "integrity": "sha512-TnbFSbcOCcDgjZ4piURLCbJ3nJhznVh9kw6F6iokjiFPl8ONxe9A6nMDVXDiNbrSfLILs6vB07F7wLBrwPYzJw==", "dependencies": { "glob-to-regexp": "^0.4.1", "graceful-fs": "^4.1.2" @@ -6777,33 +6759,32 @@ "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==" }, "node_modules/webpack": { - "version": "5.89.0", - "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.89.0.tgz", - "integrity": "sha512-qyfIC10pOr70V+jkmud8tMfajraGCZMBWJtrmuBymQKCrLTRejBI8STDp1MCyZu/QTdZSeacCQYpYNQVOzX5kw==", - "dependencies": { - "@types/eslint-scope": "^3.7.3", - "@types/estree": "^1.0.0", - "@webassemblyjs/ast": "^1.11.5", - "@webassemblyjs/wasm-edit": "^1.11.5", - "@webassemblyjs/wasm-parser": "^1.11.5", + "version": "5.94.0", + "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.94.0.tgz", + "integrity": "sha512-KcsGn50VT+06JH/iunZJedYGUJS5FGjow8wb9c0v5n1Om8O1g4L6LjtfxwlXIATopoQu+vOXXa7gYisWxCoPyg==", + "dependencies": { + "@types/estree": "^1.0.5", + "@webassemblyjs/ast": "^1.12.1", + "@webassemblyjs/wasm-edit": "^1.12.1", + "@webassemblyjs/wasm-parser": "^1.12.1", "acorn": "^8.7.1", - "acorn-import-assertions": "^1.9.0", - "browserslist": "^4.14.5", + "acorn-import-attributes": "^1.9.5", + "browserslist": "^4.21.10", "chrome-trace-event": "^1.0.2", - "enhanced-resolve": "^5.15.0", + "enhanced-resolve": "^5.17.1", "es-module-lexer": "^1.2.1", "eslint-scope": "5.1.1", "events": "^3.2.0", "glob-to-regexp": "^0.4.1", - "graceful-fs": "^4.2.9", + "graceful-fs": "^4.2.11", "json-parse-even-better-errors": "^2.3.1", "loader-runner": "^4.2.0", "mime-types": "^2.1.27", "neo-async": "^2.6.2", "schema-utils": "^3.2.0", "tapable": "^2.1.1", - "terser-webpack-plugin": "^5.3.7", - "watchpack": "^2.4.0", + "terser-webpack-plugin": "^5.3.10", + "watchpack": "^2.4.1", "webpack-sources": "^3.2.3" }, "bin": { @@ -7015,9 +6996,9 @@ }, "dependencies": { "@a_ng_d/figmug-ui": { - "version": "0.65.0", - "resolved": "https://registry.npmjs.org/@a_ng_d/figmug-ui/-/figmug-ui-0.65.0.tgz", - "integrity": "sha512-Mgl5BhEErqazmNNbyabFbf7LTh33rKSVEKnvSQHv5T0cE28cpVc+lYxW3GOJjYXPrM0wylSd6hlgWKxk091isg==", + "version": "0.83.0", + "resolved": "https://registry.npmjs.org/@a_ng_d/figmug-ui/-/figmug-ui-0.83.0.tgz", + "integrity": "sha512-+Zcp8/HAdCww6A9NCRyyD3iFD3haRjK3KTGsJLelEd4pi3OqnDQtvMr4dV5x6ER17XgXP7VegNX/GafyHKMtag==", "requires": { "@storybook/client-api": "^7.6.17", "figma-plugin-ds": "^1.0.1" @@ -8167,24 +8148,6 @@ "@types/node": "*" } }, - "@types/eslint": { - "version": "8.44.0", - "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.44.0.tgz", - "integrity": "sha512-gsF+c/0XOguWgaOgvFs+xnnRqt9GwgTvIks36WpE6ueeI4KCEHHd8K/CKHqhOqrJKsYH8m27kRzQEvWXAwXUTw==", - "requires": { - "@types/estree": "*", - "@types/json-schema": "*" - } - }, - "@types/eslint-scope": { - "version": "3.7.4", - "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.4.tgz", - "integrity": "sha512-9K4zoImiZc3HlIp6AVUDE4CWYx22a+lhSZMYNpbjW04+YF0KWj4pJXnEMjdnFTiQibFFmElcsasJXDbdI/EPhA==", - "requires": { - "@types/eslint": "*", - "@types/estree": "*" - } - }, "@types/estree": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz", @@ -8436,9 +8399,9 @@ "dev": true }, "@webassemblyjs/ast": { - "version": "1.11.6", - "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.6.tgz", - "integrity": "sha512-IN1xI7PwOvLPgjcf180gC1bqn3q/QaOCwYUahIOhbYUu8KA/3tw2RT/T0Gidi1l7Hhj5D/INhJxiICObqpMu4Q==", + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.12.1.tgz", + "integrity": "sha512-EKfMUOPRRUTy5UII4qJDGPpqfwjOmZ5jeGFwid9mnoqIFK+e0vqoi1qH56JpmZSzEL53jKnNzScdmftJyG5xWg==", "requires": { "@webassemblyjs/helper-numbers": "1.11.6", "@webassemblyjs/helper-wasm-bytecode": "1.11.6" @@ -8455,9 +8418,9 @@ "integrity": "sha512-o0YkoP4pVu4rN8aTJgAyj9hC2Sv5UlkzCHhxqWj8butaLvnpdc2jOwh4ewE6CX0txSfLn/UYaV/pheS2Txg//Q==" }, "@webassemblyjs/helper-buffer": { - "version": "1.11.6", - "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.6.tgz", - "integrity": "sha512-z3nFzdcp1mb8nEOFFk8DrYLpHvhKC3grJD2ardfKOzmbmJvEf/tPIqCY+sNcwZIY8ZD7IkB2l7/pqhUhqm7hLA==" + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.12.1.tgz", + "integrity": "sha512-nzJwQw99DNDKr9BVCOZcLuJJUlqkJh+kVzVl6Fmq/tI5ZtEyWT1KZMyOXltXLZJmDtvLCDgwsyrkohEtopTXCw==" }, "@webassemblyjs/helper-numbers": { "version": "1.11.6", @@ -8475,14 +8438,14 @@ "integrity": "sha512-sFFHKwcmBprO9e7Icf0+gddyWYDViL8bpPjJJl0WHxCdETktXdmtWLGVzoHbqUcY4Be1LkNfwTmXOJUFZYSJdA==" }, "@webassemblyjs/helper-wasm-section": { - "version": "1.11.6", - "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.6.tgz", - "integrity": "sha512-LPpZbSOwTpEC2cgn4hTydySy1Ke+XEu+ETXuoyvuyezHO3Kjdu90KK95Sh9xTbmjrCsUwvWwCOQQNta37VrS9g==", + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.12.1.tgz", + "integrity": "sha512-Jif4vfB6FJlUlSbgEMHUyk1j234GTNG9dBJ4XJdOySoj518Xj0oGsNi59cUQF4RRMS9ouBUxDDdyBVfPTypa5g==", "requires": { - "@webassemblyjs/ast": "1.11.6", - "@webassemblyjs/helper-buffer": "1.11.6", + "@webassemblyjs/ast": "1.12.1", + "@webassemblyjs/helper-buffer": "1.12.1", "@webassemblyjs/helper-wasm-bytecode": "1.11.6", - "@webassemblyjs/wasm-gen": "1.11.6" + "@webassemblyjs/wasm-gen": "1.12.1" } }, "@webassemblyjs/ieee754": { @@ -8507,26 +8470,26 @@ "integrity": "sha512-vtXf2wTQ3+up9Zsg8sa2yWiQpzSsMyXj0qViVP6xKGCUT8p8YJ6HqI7l5eCnWx1T/FYdsv07HQs2wTFbbof/RA==" }, "@webassemblyjs/wasm-edit": { - "version": "1.11.6", - "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.6.tgz", - "integrity": "sha512-Ybn2I6fnfIGuCR+Faaz7YcvtBKxvoLV3Lebn1tM4o/IAJzmi9AWYIPWpyBfU8cC+JxAO57bk4+zdsTjJR+VTOw==", + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.12.1.tgz", + "integrity": "sha512-1DuwbVvADvS5mGnXbE+c9NfA8QRcZ6iKquqjjmR10k6o+zzsRVesil54DKexiowcFCPdr/Q0qaMgB01+SQ1u6g==", "requires": { - "@webassemblyjs/ast": "1.11.6", - "@webassemblyjs/helper-buffer": "1.11.6", + "@webassemblyjs/ast": "1.12.1", + "@webassemblyjs/helper-buffer": "1.12.1", "@webassemblyjs/helper-wasm-bytecode": "1.11.6", - "@webassemblyjs/helper-wasm-section": "1.11.6", - "@webassemblyjs/wasm-gen": "1.11.6", - "@webassemblyjs/wasm-opt": "1.11.6", - "@webassemblyjs/wasm-parser": "1.11.6", - "@webassemblyjs/wast-printer": "1.11.6" + "@webassemblyjs/helper-wasm-section": "1.12.1", + "@webassemblyjs/wasm-gen": "1.12.1", + "@webassemblyjs/wasm-opt": "1.12.1", + "@webassemblyjs/wasm-parser": "1.12.1", + "@webassemblyjs/wast-printer": "1.12.1" } }, "@webassemblyjs/wasm-gen": { - "version": "1.11.6", - "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.6.tgz", - "integrity": "sha512-3XOqkZP/y6B4F0PBAXvI1/bky7GryoogUtfwExeP/v7Nzwo1QLcq5oQmpKlftZLbT+ERUOAZVQjuNVak6UXjPA==", + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.12.1.tgz", + "integrity": "sha512-TDq4Ojh9fcohAw6OIMXqiIcTq5KUXTGRkVxbSo1hQnSy6lAM5GSdfwWeSxpAo0YzgsgF182E/U0mDNhuA0tW7w==", "requires": { - "@webassemblyjs/ast": "1.11.6", + "@webassemblyjs/ast": "1.12.1", "@webassemblyjs/helper-wasm-bytecode": "1.11.6", "@webassemblyjs/ieee754": "1.11.6", "@webassemblyjs/leb128": "1.11.6", @@ -8534,22 +8497,22 @@ } }, "@webassemblyjs/wasm-opt": { - "version": "1.11.6", - "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.6.tgz", - "integrity": "sha512-cOrKuLRE7PCe6AsOVl7WasYf3wbSo4CeOk6PkrjS7g57MFfVUF9u6ysQBBODX0LdgSvQqRiGz3CXvIDKcPNy4g==", + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.12.1.tgz", + "integrity": "sha512-Jg99j/2gG2iaz3hijw857AVYekZe2SAskcqlWIZXjji5WStnOpVoat3gQfT/Q5tb2djnCjBtMocY/Su1GfxPBg==", "requires": { - "@webassemblyjs/ast": "1.11.6", - "@webassemblyjs/helper-buffer": "1.11.6", - "@webassemblyjs/wasm-gen": "1.11.6", - "@webassemblyjs/wasm-parser": "1.11.6" + "@webassemblyjs/ast": "1.12.1", + "@webassemblyjs/helper-buffer": "1.12.1", + "@webassemblyjs/wasm-gen": "1.12.1", + "@webassemblyjs/wasm-parser": "1.12.1" } }, "@webassemblyjs/wasm-parser": { - "version": "1.11.6", - "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.6.tgz", - "integrity": "sha512-6ZwPeGzMJM3Dqp3hCsLgESxBGtT/OeCvCZ4TA1JUPYgmhAx38tTPR9JaKy0S5H3evQpO/h2uWs2j6Yc/fjkpTQ==", + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.12.1.tgz", + "integrity": "sha512-xikIi7c2FHXysxXe3COrVUPSheuBtpcfhbpFj4gmu7KRLYOzANztwUU0IbsqvMqzuNK2+glRGWCEqZo1WCLyAQ==", "requires": { - "@webassemblyjs/ast": "1.11.6", + "@webassemblyjs/ast": "1.12.1", "@webassemblyjs/helper-api-error": "1.11.6", "@webassemblyjs/helper-wasm-bytecode": "1.11.6", "@webassemblyjs/ieee754": "1.11.6", @@ -8558,11 +8521,11 @@ } }, "@webassemblyjs/wast-printer": { - "version": "1.11.6", - "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.11.6.tgz", - "integrity": "sha512-JM7AhRcE+yW2GWYaKeHL5vt4xqee5N2WcezptmgyhNS+ScggqcT1OtXykhAb13Sn5Yas0j2uv9tHgrjwvzAP4A==", + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.12.1.tgz", + "integrity": "sha512-+X4WAlOisVWQMikjbcvY2e0rwPsKQ9F688lksZhBcPycBBuii3O7m8FACbDMWDojpAqvjIncrG8J0XHKyQfVeA==", "requires": { - "@webassemblyjs/ast": "1.11.6", + "@webassemblyjs/ast": "1.12.1", "@xtuc/long": "4.2.2" } }, @@ -8604,10 +8567,10 @@ "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz", "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==" }, - "acorn-import-assertions": { - "version": "1.9.0", - "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz", - "integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==", + "acorn-import-attributes": { + "version": "1.9.5", + "resolved": "https://registry.npmjs.org/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz", + "integrity": "sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==", "requires": {} }, "acorn-jsx": { @@ -9178,9 +9141,9 @@ "dev": true }, "enhanced-resolve": { - "version": "5.15.0", - "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.15.0.tgz", - "integrity": "sha512-LXYT42KJ7lpIKECr2mAXIaMldcNCh/7E0KBKOu4KSfkHmP+mZmSs+8V5gBAqisWBy0OO4W5Oyys0GO1Y8KtdKg==", + "version": "5.17.1", + "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz", + "integrity": "sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==", "requires": { "graceful-fs": "^4.2.4", "tapable": "^2.2.0" @@ -10645,12 +10608,12 @@ "dev": true }, "micromatch": { - "version": "4.0.5", - "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz", - "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==", + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz", + "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==", "dev": true, "requires": { - "braces": "^3.0.2", + "braces": "^3.0.3", "picomatch": "^2.3.1" } }, @@ -11405,9 +11368,9 @@ } }, "serialize-javascript": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.1.tgz", - "integrity": "sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w==", + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz", + "integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==", "requires": { "randombytes": "^2.1.0" } @@ -11628,9 +11591,9 @@ } }, "terser": { - "version": "5.18.2", - "resolved": "https://registry.npmjs.org/terser/-/terser-5.18.2.tgz", - "integrity": "sha512-Ah19JS86ypbJzTzvUCX7KOsEIhDaRONungA4aYBjEP3JZRf4ocuDzTg4QWZnPn9DEMiMYGJPiSOy7aykoCc70w==", + "version": "5.31.6", + "resolved": "https://registry.npmjs.org/terser/-/terser-5.31.6.tgz", + "integrity": "sha512-PQ4DAriWzKj+qgehQ7LK5bQqCFNMmlhjR2PFFLuqGCpuCAauxemVBWwWOxo3UIwWQx8+Pr61Df++r76wDmkQBg==", "requires": { "@jridgewell/source-map": "^0.3.3", "acorn": "^8.8.2", @@ -11646,15 +11609,15 @@ } }, "terser-webpack-plugin": { - "version": "5.3.9", - "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.9.tgz", - "integrity": "sha512-ZuXsqE07EcggTWQjXUj+Aot/OMcD0bMKGgF63f7UxYcu5/AJF53aIpK1YoP5xR9l6s/Hy2b+t1AM0bLNPRuhwA==", + "version": "5.3.10", + "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.10.tgz", + "integrity": "sha512-BKFPWlPDndPs+NGGCr1U59t0XScL5317Y0UReNrHaw9/FwhPENlq6bfgs+4yPfyP51vqC1bQ4rp1EfXW5ZSH9w==", "requires": { - "@jridgewell/trace-mapping": "^0.3.17", + "@jridgewell/trace-mapping": "^0.3.20", "jest-worker": "^27.4.5", "schema-utils": "^3.1.1", "serialize-javascript": "^6.0.1", - "terser": "^5.16.8" + "terser": "^5.26.0" } }, "text-table": { @@ -11858,9 +11821,9 @@ "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==" }, "watchpack": { - "version": "2.4.0", - "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz", - "integrity": "sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==", + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.2.tgz", + "integrity": "sha512-TnbFSbcOCcDgjZ4piURLCbJ3nJhznVh9kw6F6iokjiFPl8ONxe9A6nMDVXDiNbrSfLILs6vB07F7wLBrwPYzJw==", "requires": { "glob-to-regexp": "^0.4.1", "graceful-fs": "^4.1.2" @@ -11872,33 +11835,32 @@ "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==" }, "webpack": { - "version": "5.89.0", - "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.89.0.tgz", - "integrity": "sha512-qyfIC10pOr70V+jkmud8tMfajraGCZMBWJtrmuBymQKCrLTRejBI8STDp1MCyZu/QTdZSeacCQYpYNQVOzX5kw==", - "requires": { - "@types/eslint-scope": "^3.7.3", - "@types/estree": "^1.0.0", - "@webassemblyjs/ast": "^1.11.5", - "@webassemblyjs/wasm-edit": "^1.11.5", - "@webassemblyjs/wasm-parser": "^1.11.5", + "version": "5.94.0", + "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.94.0.tgz", + "integrity": "sha512-KcsGn50VT+06JH/iunZJedYGUJS5FGjow8wb9c0v5n1Om8O1g4L6LjtfxwlXIATopoQu+vOXXa7gYisWxCoPyg==", + "requires": { + "@types/estree": "^1.0.5", + "@webassemblyjs/ast": "^1.12.1", + "@webassemblyjs/wasm-edit": "^1.12.1", + "@webassemblyjs/wasm-parser": "^1.12.1", "acorn": "^8.7.1", - "acorn-import-assertions": "^1.9.0", - "browserslist": "^4.14.5", + "acorn-import-attributes": "^1.9.5", + "browserslist": "^4.21.10", "chrome-trace-event": "^1.0.2", - "enhanced-resolve": "^5.15.0", + "enhanced-resolve": "^5.17.1", "es-module-lexer": "^1.2.1", "eslint-scope": "5.1.1", "events": "^3.2.0", "glob-to-regexp": "^0.4.1", - "graceful-fs": "^4.2.9", + "graceful-fs": "^4.2.11", "json-parse-even-better-errors": "^2.3.1", "loader-runner": "^4.2.0", "mime-types": "^2.1.27", "neo-async": "^2.6.2", "schema-utils": "^3.2.0", "tapable": "^2.1.1", - "terser-webpack-plugin": "^5.3.7", - "watchpack": "^2.4.0", + "terser-webpack-plugin": "^5.3.10", + "watchpack": "^2.4.1", "webpack-sources": "^3.2.3" } }, diff --git a/package.json b/package.json index 5a1df547f..429dc9be4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "figma-ui-color-palette", - "version": "4.0.4", + "version": "4.1.0", "description": "Create accessible UI color palettes with consistent lightness and contrast", "main": "code.js", "scripts": { @@ -59,7 +59,7 @@ "webpack-cli": "^4.9.1" }, "dependencies": { - "@a_ng_d/figmug-ui": "^0.65.0", + "@a_ng_d/figmug-ui": "^0.83.0", "@a-ng-d/figmug.modules.do-camel-case": "^0.0.4", "@a-ng-d/figmug.modules.do-kebab-case": "^0.0.4", "@a-ng-d/figmug.modules.do-map": "^0.0.3", diff --git a/src/bridges/checks/checkHighlightStatus.ts b/src/bridges/checks/checkHighlightStatus.ts index c7ef56a7f..772a316bb 100644 --- a/src/bridges/checks/checkHighlightStatus.ts +++ b/src/bridges/checks/checkHighlightStatus.ts @@ -1,26 +1,38 @@ -import { releaseNotesVersion } from '../../utils/config' +const checkHighlightStatus = async (remoteVersion: string) => { + // figma.clientStorage.deleteAsync('highlight_version') + // console.log('localVersion', localVersion) + // console.log('remoteVersion', remoteVersion) + const localVersion = await figma.clientStorage.getAsync('highlight_version') -const checkHighlightStatus = async () => { - // figma.clientStorage.deleteAsync(`${version}_isRead`) - const isRead = await figma.clientStorage.getAsync( - `${releaseNotesVersion}_isRead` - ) - - if (isRead === undefined || !isRead) - figma.ui.postMessage({ - type: 'CHECK_HIGHLIGHT_STATUS', + if (localVersion === undefined) + return figma.ui.postMessage({ + type: 'PUSH_HIGHLIGHT_STATUS', data: figma.payments !== undefined ? figma.payments.getUserFirstRanSecondsAgo() > 60 - ? 'UNREAD_RELEASE_NOTE' - : 'READ_RELEASE_NOTE' - : 'READ_RELEASE_NOTE', - }) - else - figma.ui.postMessage({ - type: 'CHECK_HIGHLIGHT_STATUS', - data: 'READ_RELEASE_NOTE', + ? 'DISPLAY_HIGHLIGHT_DIALOG' + : 'NO_HIGHLIGHT' + : 'NO_HIGHLIGHT', }) + else { + const remoteMajorVersion = remoteVersion.split('.')[0], + remoteMinorVersion = remoteVersion.split('.')[1] + + const localMajorVersion = localVersion.split('.')[0], + localMinorVersion = localVersion.split('.')[1] + + if (remoteMajorVersion !== localMajorVersion) + return figma.ui.postMessage({ + type: 'PUSH_HIGHLIGHT_STATUS', + data: 'DISPLAY_HIGHLIGHT_DIALOG', + }) + + if (remoteMinorVersion !== localMinorVersion) + return figma.ui.postMessage({ + type: 'PUSH_HIGHLIGHT_STATUS', + data: 'DISPLAY_HIGHLIGHT_NOTIFICATION', + }) + } } export default checkHighlightStatus diff --git a/src/bridges/loadUI.ts b/src/bridges/loadUI.ts index 694c128bb..e9cc7f993 100644 --- a/src/bridges/loadUI.ts +++ b/src/bridges/loadUI.ts @@ -44,9 +44,8 @@ const loadUI = async () => { themeColors: true, }) - checkUserConsent() - .then(() => checkEditorType()) - .then(() => checkHighlightStatus()) + checkUserConsent().then(() => checkEditorType()) + processSelection() await checkPlanStatus() @@ -81,6 +80,7 @@ const loadUI = async () => { figma.ui.resize(windowSize.w, windowSize.h) }, CHECK_USER_CONSENT: () => checkUserConsent(), + CHECK_HIGHLIGHT_STATUS: () => checkHighlightStatus(msg.version), CREATE_PALETTE: () => createPalette(msg), UPDATE_SCALE: () => updateScale(msg), UPDATE_VIEW: () => updateView(msg), diff --git a/src/bridges/publication/authentication.ts b/src/bridges/publication/authentication.ts index d8d513ee5..e1aa44005 100644 --- a/src/bridges/publication/authentication.ts +++ b/src/bridges/publication/authentication.ts @@ -1,7 +1,7 @@ import { createClient } from '@supabase/supabase-js' import { lang, locals } from '../../content/locals' -import { authUrl, databaseUrl, workerUrl } from '../../utils/config' +import { authUrl, authWorkerUrl, databaseUrl } from '../../utils/config' import checkConnectionStatus from '../checks/checkConnectionStatus' let isAuthenticated = false @@ -11,13 +11,15 @@ export const supabase = createClient( process.env.REACT_APP_SUPABASE_PUBLIC_ANON_KEY ?? '' ) -export const signIn = async () => { +export const signIn = async (disinctId: string) => { return new Promise((resolve, reject) => { - fetch(workerUrl, { + fetch(authWorkerUrl, { + method: 'GET', cache: 'no-cache', credentials: 'omit', headers: { type: 'GET_PASSKEY', + 'distinct-id': disinctId, }, }) .then((response) => { @@ -31,15 +33,18 @@ export const signIn = async () => { type: 'OPEN_IN_BROWSER', url: `${authUrl}/?passkey=${result.passkey}`, }, + pluginId: '1063959496693642315', }, - '*' + 'https://www.figma.com' ) const poll = setInterval(async () => { - fetch(workerUrl, { + fetch(authWorkerUrl, { + method: 'GET', cache: 'no-cache', credentials: 'omit', headers: { type: 'GET_TOKENS', + 'distinct-id': disinctId, passkey: result.passkey, }, }) @@ -58,18 +63,22 @@ export const signIn = async () => { items: [ { key: 'supabase_access_token', - value: result.access_token, + value: result.tokens.access_token, }, { key: 'supabase_refresh_token', - value: result.refresh_token, + value: result.tokens.refresh_token, }, ], }, + pluginId: '1063959496693642315', }, - '*' + 'https://www.figma.com' + ) + checkConnectionStatus( + result.tokens.access_token, + result.tokens.refresh_token ) - checkConnectionStatus(result.access_token, result.refresh_token) .then(() => { clearInterval(poll) resolve(result) @@ -102,29 +111,37 @@ export const signIn = async () => { } export const signOut = async () => { - const { error } = await supabase.auth.signOut({ - scope: 'others', - }) - - if (!error) { - parent.postMessage( - { - pluginMessage: { - type: 'DELETE_ITEMS', - items: ['supabase_access_token', 'supabase_refresh_token'], - }, + parent.postMessage( + { + pluginMessage: { + type: 'OPEN_IN_BROWSER', + url: `${authUrl}/?action=sign_out`, }, - '*' - ) - parent.postMessage( - { - pluginMessage: { - type: 'SIGN_OUT', - }, + pluginId: '1063959496693642315', + }, + 'https://www.figma.com' + ) + parent.postMessage( + { + pluginMessage: { + type: 'DELETE_ITEMS', + items: ['supabase_access_token'], }, - '*' - ) + }, + '*' + ) + parent.postMessage( + { + pluginMessage: { + type: 'SIGN_OUT', + }, + }, + '*' + ) - return - } else throw error + setTimeout(async () => { + await supabase.auth.signOut({ + scope: 'local', + }) + }, 2000) } diff --git a/src/bridges/publication/sharePalette.ts b/src/bridges/publication/sharePalette.ts new file mode 100644 index 000000000..b3b5920fc --- /dev/null +++ b/src/bridges/publication/sharePalette.ts @@ -0,0 +1,22 @@ +import { palettesDbTableName } from '../../utils/config' +import { supabase } from './authentication' + +const sharePalette = async (id: string, isShared: boolean): Promise => { + const now = new Date().toISOString() + + const { error } = await supabase + .from(palettesDbTableName) + .update([ + { + is_shared: isShared, + published_at: now, + updated_at: now, + }, + ]) + .match({ palette_id: id }) + + if (!error) return + else throw error +} + +export default sharePalette diff --git a/src/canvas/Colors.ts b/src/canvas/Colors.ts index 060cf360e..537dd119e 100644 --- a/src/canvas/Colors.ts +++ b/src/canvas/Colors.ts @@ -68,6 +68,7 @@ export default class Colors { sourceColor: [number, number, number], lightness: number, hueShifting: number, + chromaShifting: number, algorithmVersion: string ) => { const lch = chroma(sourceColor).lch(), @@ -75,8 +76,10 @@ export default class Colors { .lch( lightness, algorithmVersion === 'v2' - ? Math.sin((lightness / 100) * Math.PI) * lch[1] - : lch[1], + ? Math.sin((lightness / 100) * Math.PI) * + lch[1] * + (chromaShifting / 100) + : lch[1] * (chromaShifting / 100), lch[2] + hueShifting < 0 ? 0 : lch[2] + hueShifting > 360 @@ -92,6 +95,7 @@ export default class Colors { sourceColor: [number, number, number], lightness: number, hueShifting: number, + chromaShifting: number, algorithmVersion: string ) => { const oklch = chroma(sourceColor).oklch(), @@ -99,8 +103,10 @@ export default class Colors { .oklch( lightness / 100, algorithmVersion === 'v2' - ? Math.sin((lightness / 100) * Math.PI) * oklch[1] - : oklch[1], + ? Math.sin((lightness / 100) * Math.PI) * + oklch[1] * + (chromaShifting / 100) + : oklch[1] * (chromaShifting / 100), oklch[2] + hueShifting < 0 ? 0 : oklch[2] + hueShifting > 360 @@ -116,11 +122,12 @@ export default class Colors { sourceColor: [number, number, number], lightness: number, hueShifting: number, + chromaShifting: number, algorithmVersion: string ) => { const labA = chroma(sourceColor).get('lab.a'), labB = chroma(sourceColor).get('lab.b'), - chr = Math.sqrt(labA ** 2 + labB ** 2) + chr = Math.sqrt(labA ** 2 + labB ** 2) * (chromaShifting / 100) let h = Math.atan(labB / labA) + hueShifting * (Math.PI / 180) if (h > Math.PI) h = Math.PI @@ -157,11 +164,12 @@ export default class Colors { sourceColor: [number, number, number], lightness: number, hueShifting: number, + chromaShifting: number, algorithmVersion: string ) => { const labA = chroma(sourceColor).get('oklab.a'), labB = chroma(sourceColor).get('oklab.b'), - chr = Math.sqrt(labA ** 2 + labB ** 2) + chr = Math.sqrt(labA ** 2 + labB ** 2) * (chromaShifting / 100) let h = Math.atan(labB / labA) + hueShifting * (Math.PI / 180) if (h > Math.PI) h = Math.PI @@ -179,6 +187,9 @@ export default class Colors { newLabB *= -1 } + if (Number.isNaN(newLabA)) newLabA = 0 + if (Number.isNaN(newLabB)) newLabB = 0 + const newColor = chroma .oklab( lightness / 100, @@ -198,6 +209,7 @@ export default class Colors { sourceColor: [number, number, number], lightness: number, hueShifting: number, + chromaShifting: number, algorithmVersion: string ) => { const hsl = chroma(sourceColor).hsl(), @@ -209,8 +221,10 @@ export default class Colors { ? 360 : hsl[0] + hueShifting, algorithmVersion === 'v2' - ? Math.sin((lightness / 100) * Math.PI) * hsl[1] - : hsl[1], + ? Math.sin((lightness / 100) * Math.PI) * + hsl[1] * + (chromaShifting / 100) + : hsl[1] * (chromaShifting / 100), lightness / 100 ) .rgb() @@ -222,6 +236,7 @@ export default class Colors { sourceColor: [number, number, number], lightness: number, hueShifting: number, + chromaShifting: number, algorithmVersion: string ) => { const hsluv = new Hsluv() @@ -235,8 +250,10 @@ export default class Colors { hsluv.hsluv_l = lightness hsluv.hsluv_s = algorithmVersion === 'v2' - ? Math.sin((lightness / 100) * Math.PI) * hsluv.hsluv_s - : hsluv.hsluv_s + ? Math.sin((lightness / 100) * Math.PI) * + hsluv.hsluv_s * + (chromaShifting / 100) + : hsluv.hsluv_s * (chromaShifting / 100) hsluv.hsluv_h = hsluv.hsluv_h + hueShifting < 0 ? 0 @@ -448,6 +465,7 @@ export default class Colors { sourceColor, lightness, color.hueShifting, + color.chromaShifting, this.parent.algorithmVersion ) else if (this.parent.colorSpace === 'OKLCH') @@ -455,6 +473,7 @@ export default class Colors { sourceColor, lightness, color.hueShifting, + color.chromaShifting, this.parent.algorithmVersion ) else if (this.parent.colorSpace === 'LAB') @@ -462,6 +481,7 @@ export default class Colors { sourceColor, lightness, color.hueShifting, + color.chromaShifting, this.parent.algorithmVersion ) else if (this.parent.colorSpace === 'OKLAB') @@ -469,6 +489,7 @@ export default class Colors { sourceColor, lightness, color.hueShifting, + color.chromaShifting, this.parent.algorithmVersion ) else if (this.parent.colorSpace === 'HSL') @@ -476,6 +497,7 @@ export default class Colors { sourceColor, lightness, color.hueShifting, + color.chromaShifting, this.parent.algorithmVersion ) else if (this.parent.colorSpace === 'HSLUV') @@ -483,6 +505,7 @@ export default class Colors { sourceColor, lightness, color.hueShifting, + color.chromaShifting, this.parent.algorithmVersion ) @@ -642,6 +665,7 @@ export default class Colors { sourceColor, lightness, color.hueShifting, + color.chromaShifting, this.parent.algorithmVersion ) else if (this.parent.colorSpace === 'OKLCH') @@ -649,6 +673,7 @@ export default class Colors { sourceColor, lightness, color.hueShifting, + color.chromaShifting, this.parent.algorithmVersion ) else if (this.parent.colorSpace === 'LAB') @@ -656,6 +681,7 @@ export default class Colors { sourceColor, lightness, color.hueShifting, + color.chromaShifting, this.parent.algorithmVersion ) else if (this.parent.colorSpace === 'OKLAB') @@ -663,6 +689,7 @@ export default class Colors { sourceColor, lightness, color.hueShifting, + color.chromaShifting, this.parent.algorithmVersion ) else if (this.parent.colorSpace === 'HSL') @@ -670,6 +697,7 @@ export default class Colors { sourceColor, lightness, color.hueShifting, + color.chromaShifting, this.parent.algorithmVersion ) else if (this.parent.colorSpace === 'HSLUV') @@ -677,6 +705,7 @@ export default class Colors { sourceColor, lightness, color.hueShifting, + color.chromaShifting, this.parent.algorithmVersion ) diff --git a/src/canvas/Palette.ts b/src/canvas/Palette.ts index 68b797939..e87b606b0 100644 --- a/src/canvas/Palette.ts +++ b/src/canvas/Palette.ts @@ -169,7 +169,8 @@ export default class Palette { rgb: sourceColor.rgb, id: uid(), oklch: false, - hueShifting: 0, + hueShifting: sourceColor.hueShifting ?? 0, + chromaShifting: sourceColor.chromaShifting ?? 100, }) ) diff --git a/src/content/images/choose_plan.webp b/src/content/images/choose_plan.webp index 66d12a392..d01a163f7 100644 Binary files a/src/content/images/choose_plan.webp and b/src/content/images/choose_plan.webp differ diff --git a/src/content/images/release_note_v19.webp b/src/content/images/release_note_v19.webp deleted file mode 100644 index 93531a9df..000000000 Binary files a/src/content/images/release_note_v19.webp and /dev/null differ diff --git a/src/content/images/release_note_v20.webp b/src/content/images/release_note_v20.webp deleted file mode 100644 index 97ee6d0a0..000000000 Binary files a/src/content/images/release_note_v20.webp and /dev/null differ diff --git a/src/content/images/release_note_v21.webp b/src/content/images/release_note_v21.webp deleted file mode 100644 index d60141a0b..000000000 Binary files a/src/content/images/release_note_v21.webp and /dev/null differ diff --git a/src/content/images/release_note_v22.webp b/src/content/images/release_note_v22.webp deleted file mode 100644 index 8af987843..000000000 Binary files a/src/content/images/release_note_v22.webp and /dev/null differ diff --git a/src/content/images/release_note_v23.webp b/src/content/images/release_note_v23.webp deleted file mode 100644 index b5c180d11..000000000 Binary files a/src/content/images/release_note_v23.webp and /dev/null differ diff --git a/src/content/images/release_note_v24_1.webp b/src/content/images/release_note_v24_1.webp deleted file mode 100644 index fbd639753..000000000 Binary files a/src/content/images/release_note_v24_1.webp and /dev/null differ diff --git a/src/content/images/release_note_v24_2.webp b/src/content/images/release_note_v24_2.webp deleted file mode 100644 index 5942daa9d..000000000 Binary files a/src/content/images/release_note_v24_2.webp and /dev/null differ diff --git a/src/content/images/release_note_v25_1.webp b/src/content/images/release_note_v25_1.webp deleted file mode 100644 index a0de8fb25..000000000 Binary files a/src/content/images/release_note_v25_1.webp and /dev/null differ diff --git a/src/content/images/release_note_v25_2.webp b/src/content/images/release_note_v25_2.webp deleted file mode 100644 index 2e7dbe9c2..000000000 Binary files a/src/content/images/release_note_v25_2.webp and /dev/null differ diff --git a/src/content/images/release_note_v25_3.webp b/src/content/images/release_note_v25_3.webp deleted file mode 100644 index 98d34e119..000000000 Binary files a/src/content/images/release_note_v25_3.webp and /dev/null differ diff --git a/src/content/images/release_note_v28_1.webp b/src/content/images/release_note_v28_1.webp deleted file mode 100644 index c4fcc33a3..000000000 Binary files a/src/content/images/release_note_v28_1.webp and /dev/null differ diff --git a/src/content/images/release_note_v28_2.webp b/src/content/images/release_note_v28_2.webp deleted file mode 100644 index 1707db1d7..000000000 Binary files a/src/content/images/release_note_v28_2.webp and /dev/null differ diff --git a/src/content/images/release_note_v28_3.webp b/src/content/images/release_note_v28_3.webp deleted file mode 100644 index 74e2c6b9c..000000000 Binary files a/src/content/images/release_note_v28_3.webp and /dev/null differ diff --git a/src/content/images/release_note_v29_1.webp b/src/content/images/release_note_v29_1.webp deleted file mode 100644 index 5ae72e1ba..000000000 Binary files a/src/content/images/release_note_v29_1.webp and /dev/null differ diff --git a/src/content/images/release_note_v29_2.webp b/src/content/images/release_note_v29_2.webp deleted file mode 100644 index 346bc894b..000000000 Binary files a/src/content/images/release_note_v29_2.webp and /dev/null differ diff --git a/src/content/images/release_note_v30_1.webp b/src/content/images/release_note_v30_1.webp deleted file mode 100644 index be5544f21..000000000 Binary files a/src/content/images/release_note_v30_1.webp and /dev/null differ diff --git a/src/content/images/release_note_v30_2.webp b/src/content/images/release_note_v30_2.webp deleted file mode 100644 index a9881b21a..000000000 Binary files a/src/content/images/release_note_v30_2.webp and /dev/null differ diff --git a/src/content/images/release_note_v31_1.webp b/src/content/images/release_note_v31_1.webp deleted file mode 100644 index 940e8c746..000000000 Binary files a/src/content/images/release_note_v31_1.webp and /dev/null differ diff --git a/src/content/images/release_note_v31_2.webp b/src/content/images/release_note_v31_2.webp deleted file mode 100644 index 925fe78ad..000000000 Binary files a/src/content/images/release_note_v31_2.webp and /dev/null differ diff --git a/src/content/images/release_note_v31_3.webp b/src/content/images/release_note_v31_3.webp deleted file mode 100644 index 1a13f3314..000000000 Binary files a/src/content/images/release_note_v31_3.webp and /dev/null differ diff --git a/src/content/images/release_note_v32_1.webp b/src/content/images/release_note_v32_1.webp deleted file mode 100644 index fb5596b96..000000000 Binary files a/src/content/images/release_note_v32_1.webp and /dev/null differ diff --git a/src/content/images/release_note_v32_2.webp b/src/content/images/release_note_v32_2.webp deleted file mode 100644 index 32ab3ee2c..000000000 Binary files a/src/content/images/release_note_v32_2.webp and /dev/null differ diff --git a/src/content/images/release_note_v32_3.webp b/src/content/images/release_note_v32_3.webp deleted file mode 100644 index 7c5b4b83f..000000000 Binary files a/src/content/images/release_note_v32_3.webp and /dev/null differ diff --git a/src/content/images/release_note_v33_1.webp b/src/content/images/release_note_v33_1.webp deleted file mode 100644 index c465071e0..000000000 Binary files a/src/content/images/release_note_v33_1.webp and /dev/null differ diff --git a/src/content/images/release_note_v33_2.webp b/src/content/images/release_note_v33_2.webp deleted file mode 100644 index 47eace69d..000000000 Binary files a/src/content/images/release_note_v33_2.webp and /dev/null differ diff --git a/src/content/images/release_note_v33_3.webp b/src/content/images/release_note_v33_3.webp deleted file mode 100644 index 1880474ae..000000000 Binary files a/src/content/images/release_note_v33_3.webp and /dev/null differ diff --git a/src/content/images/release_note_v33_4.webp b/src/content/images/release_note_v33_4.webp deleted file mode 100644 index 4245fc4b1..000000000 Binary files a/src/content/images/release_note_v33_4.webp and /dev/null differ diff --git a/src/content/images/trial.webp b/src/content/images/trial.webp index 9ea3b64d2..c9ab275ff 100644 Binary files a/src/content/images/trial.webp and b/src/content/images/trial.webp differ diff --git a/src/content/locals.ts b/src/content/locals.ts index 806967e33..5019d9b16 100644 --- a/src/content/locals.ts +++ b/src/content/locals.ts @@ -1,3 +1,5 @@ +import { trialTime } from '../utils/config' + export const lang = 'en-US' const glossary: { @@ -18,8 +20,7 @@ const glossary: { export const locals: { [key: string]: any } = { 'en-US': { name: 'UI Color Palette', - tagline: - 'Create accessible color palettes for UI with consistent lightness and contrast', + tagline: 'Create, Manage, Deploy & Publish WCAG-compliant color palettes.', url: 'www.ui-color-palette.com', global: { description: { @@ -46,19 +47,20 @@ export const locals: { [key: string]: any } = { titleSignIn: 'Publish or Synchronize palette', message: 'Publish your palette as a single source of truth and reuse it in other Figma documents (like a component instance). You can also distribute your palettes by sharing them with the community.', - selectToShare: 'Share with the community', + share: 'Share with the community', + unshare: 'Remove from the community', + statusShared: 'Shared', statusLocalChanges: 'Local changes', statusUptoDate: 'No change', statusUnpublished: 'Unpublished', statusRemoteChanges: 'Remote changes', - statusWaiting: 'Waiting…', + statusWaiting: 'Pending…', statusNotFound: 'Not found', publish: 'Publish…', unpublish: 'Unpublish', synchronize: 'Synchronize…', revert: 'Revert', detach: 'Detach', - waiting: 'Waiting…', signIn: 'Sign in to publish', }, relaunch: { @@ -199,6 +201,9 @@ export const locals: { [key: string]: any } = { hueShifting: { label: 'Shift hue', }, + chromaShifting: { + label: 'Shift chroma', + }, }, themes: { title: 'Color themes', @@ -389,16 +394,14 @@ export const locals: { [key: string]: any } = { title: 'Welcome to UI Color Palette Pro!', message: 'This upgrade will unlock a range of tools that enable you to convert your color palette into a color system. We hope you will enjoy the benefits.', - trial: - 'This upgrade will unlock a range of tools that enable you to convert your color palette into a color system. We hope you will enjoy the benefits for the next 72 hours.', + trial: `This upgrade will unlock a range of tools that enable you to convert your color palette into a color system. We hope you will enjoy the benefits for the next ${trialTime} hours.`, cta: "Let's build", }, trial: { - title: - 'Would you like to upgrade to the Pro plan within the next 72 hours?', + title: `Would you like to upgrade to the Pro plan within the next ${trialTime} hours?`, message: 'Explore the potential of synchronizing your color palette with variables, exporting it as design tokens, app resources, or for Tokens Studio and simulating a vision impairment.', - cta: 'Enable the 72-hour trial', + cta: `Enable the ${trialTime}-hour trial`, option: 'Purchase', }, }, @@ -452,12 +455,19 @@ export const locals: { [key: string]: any } = { 'A top analytics platform for tracking and understanding user interactions', }, }, + pending: { + announcements: 'Pending announcements…', + primaryAction: '………', + secondaryAction: '………', + }, success: { publication: '✓ The palette has been published', nonPublication: '✓ The palette has been unpublished', synchronization: '✓ The palette has been synchronized', detachment: '✓ The palette has been detached', report: '✓ Thanks for your report', + share: '✓ The palette has been shared with the community', + unshare: '✓ The palette is no longer shared with community', }, info: { createdLocalStyle: 'local color style created', @@ -469,7 +479,7 @@ export const locals: { [key: string]: any } = { variableMode: 'variable mode', variableModes: 'variable modes', signOut: '☻ See you later', - noResult: 'No palette match your search', + noResult: 'No palette matches your search', }, warning: { tooManyThemesToCreateModes: @@ -499,10 +509,13 @@ export const locals: { [key: string]: any } = { publication: '✕ The palette cannot be published', nonPublication: '✕ The palette cannot be unpublished', synchronization: '✕ The palette has not been synchronized', + share: '✕ The palette has not been shared with the community', + unshare: '✕ The palette has not been removed from the community', fetchPalette: 'The palettes cannot be loaded', addToFile: '✕ The palette cannot be added', noInternetConnection: '✕ The connection with the remote palette is unlinked', + announcements: 'The announcements cannot be loaded', }, }, } diff --git a/src/content/releaseNotes.ts b/src/content/releaseNotes.ts deleted file mode 100644 index 8463eedeb..000000000 --- a/src/content/releaseNotes.ts +++ /dev/null @@ -1,231 +0,0 @@ -import { ReleaseNote } from '../types/content' -import rnv19 from './images/release_note_v19.webp' -import rnv20 from './images/release_note_v20.webp' -import rnv21 from './images/release_note_v21.webp' -import rnv22 from './images/release_note_v22.webp' -import rnv23 from './images/release_note_v23.webp' -import rnv241 from './images/release_note_v24_1.webp' -import rnv242 from './images/release_note_v24_2.webp' -import rnv251 from './images/release_note_v25_1.webp' -import rnv252 from './images/release_note_v25_2.webp' -import rnv281 from './images/release_note_v28_1.webp' -import rnv282 from './images/release_note_v28_2.webp' -import rnv283 from './images/release_note_v28_3.webp' -import rnv291 from './images/release_note_v29_1.webp' -import rnv292 from './images/release_note_v29_2.webp' -import rnv301 from './images/release_note_v30_1.webp' -import rnv302 from './images/release_note_v30_2.webp' -import rnv311 from './images/release_note_v31_1.webp' -import rnv312 from './images/release_note_v31_2.webp' -import rnv313 from './images/release_note_v31_3.webp' -import rnv321 from './images/release_note_v32_1.webp' -import rnv322 from './images/release_note_v32_2.webp' -import rnv323 from './images/release_note_v32_3.webp' -import rnv331 from './images/release_note_v33_1.webp' -import rnv332 from './images/release_note_v33_2.webp' -import rnv333 from './images/release_note_v33_3.webp' -import rnv334 from './images/release_note_v33_4.webp' - -const releaseNotes: Array = [ - { - version: '4.0.0', - isMostRecent: true, - title: [ - 'UI Color Palette at the Config!', - 'Let’s Celebrate with a Special Offer', - 'Publish and Share Palettes', - 'Score Indicator Enhancement', - ], - image: [rnv331, rnv332, rnv333, rnv334], - content: [ - 'We are happy to share with you this new: UI Color Palette will be exhibited in the Figma Config community showcase! During the next weeks, we would like to celebrate our current users and welcome our new comers!', - 'The celebration is followed with special offer! For a limited time, we are offering a discount on our service and a longer trial period to supercharge your palettes. Enjoy exploring and creating!', - 'You have the ability to publish color palettes for your personal use or for the wider community. This allows for the reuse of synchronized palettes in other documents and provides a source of inspiration drawn from the collective offerings of the UI Color Palette community!', - 'The score indicators offer precise and useful metrics (WCAG 2 and 3), enabling you to effectively assess the contrast ratio between text and background colors.', - ], - numberOfNotes: 4, - learnMore: [ - 'https://uicp.link/whats-new', - 'https://uicp.link/whats-new', - 'https://uicp.link/whats-new', - 'https://uicp.link/whats-new', - ], - }, - { - version: '3.2.0', - isMostRecent: false, - title: [ - 'Stops Distribution Easing', - 'Canny Forefront Integration', - 'Custom Naming Convention', - ], - image: [rnv321, rnv322, rnv323], - content: [ - 'You can distribute stops using pre-configured easing such as "ease" or "ease-in". This method provides a quick way to evenly distribute them across the range, thereby enhancing harmonized color scaling.', - 'Canny has been emphasized and prioritized. This promotes user feedback and increases the visibility of community discussions, creating a more interactive and communicative user experience.', - 'The naming convention within the Custom preset can be adjusted to either increase or decrease the stop number (from 1-10, 10-100, or 100-1000). This option is only available when creating a palette.', - ], - numberOfNotes: 3, - learnMore: [ - 'https://uicp.link/whats-new', - 'https://uicp.link/whats-new', - 'https://uicp.link/whats-new', - ], - }, - { - version: '3.1.0', - isMostRecent: false, - title: [ - 'Ready to Dev Mode', - 'Need More Trial Time?', - 'Import Colors from Realtime Colors', - ], - image: [rnv311, rnv312, rnv313], - content: [ - 'Dev Mode, after a six-month beta test, is now complete tool for handoffs, effectively connecting designers and developers. Code extraction from palettes is now possible with this mode.', - 'Trial periods are now seven days long, giving you an extra 96 hours to try out locked features, collaborate between roles, set up processes, etc. We believe you will find this extension beneficial.', - 'Realtime Colors is a practical tool that allows you to test and adjust color palettes using a template. This work can then be imported into Figma to convert these color variations into a color system.', - ], - numberOfNotes: 3, - learnMore: [ - 'https://uicp.link/whats-new', - 'https://uicp.link/whats-new', - 'https://uicp.link/whats-new', - ], - }, - { - version: '3.0.0', - isMostRecent: false, - title: [ - 'Simulate various visions for accessibility', - 'Exports more for Android and Apple apps', - ], - image: [rnv301, rnv302], - content: [ - 'You can simulate color perception and contrast for various types of color blindness. This is a step towards incorporating accessibility into the design process.', - 'Both Android and Apple offer numerous ways to apply color themes. Now, you can export your palette for use in Compose on Android and UIKit on Apple.', - ], - numberOfNotes: 2, - learnMore: ['https://uicp.link/whats-new', 'https://uicp.link/whats-new'], - }, - { - version: '2.9.0', - isMostRecent: false, - title: ['Use your palettes for Tailwind', 'Happy Xmas!'], - image: [rnv291, rnv292], - content: [ - 'You can now set your new palettes using the Tailwind color system and export all the shades and themes to a JSON file that complies with its configuration.', - "For Christmas, we're providing a special discount as an end-of-year gift.", - ], - numberOfNotes: 2, - learnMore: ['https://uicp.link/whats-new', 'https://uicp.link/whats-new'], - }, - { - version: '2.8.0', - isMostRecent: false, - title: [ - 'Black Friday Offer', - 'Import colors from Coolors', - 'Create a palette in fewer steps', - ], - image: [rnv283, rnv281, rnv282], - content: [ - 'The Pro plan for UI Color Palette is 90% off when billed yearly for the next two weeks. Happy Thanksgiving to our fellow Americans 🇺🇸!', - "In the Source context when creating, you can view the selected colors (from the document canvas). Additionally, you're able to paste a URL from a Coolors palette to supplement your color collection prior to scaling.", - 'You can create a color palette using the quick action feature in just a few steps. Simply select the colors, choose the preset, specify the color space, and finally, name it using a simple input field.', - ], - numberOfNotes: 3, - learnMore: [ - 'https://uicp.link/black-friday', - 'https://uicp.link/whats-new', - 'https://uicp.link/whats-new', - ], - }, - { - version: '2.5.0', - isMostRecent: false, - title: [ - '72-hour trial period to spread your palettes', - 'UI Color Palette is on LinkedIn', - ], - image: [rnv251, rnv252], - content: [ - 'Within 72 hours, all the tools will be available for you to test how you can distribute your color palettes among design and development teams. Our ambition is to make color palettes accessible, easy to handle, and publishable.', - 'Stay connected with our announcements and sharing, and help us spread good practices in building color palettes and systems.', - ], - numberOfNotes: 2, - learnMore: ['https://uicp.link/whats-new', 'https://uicp.link/network'], - }, - { - version: '2.4.0', - isMostRecent: false, - title: [ - 'UI Color palette 24: Create Color systems “like a Pro”', - 'UI Color palette 24: Color themes management “like a Pro”', - ], - image: [rnv241, rnv242], - content: [ - 'UI Color Palette allows you to create freely accessible color palettes. However, the Pro plan offers additional features such as color themes, more export options, and the ability to create variables that can transform your color palette into a color system. Are you ready to try it out?', - 'With the Pro plan, you can manage color themes within the same palette, enabling you to create as many variations of lightness scales as needed to build your color system. This feature is useful for managing both light and dark mode themes.', - ], - numberOfNotes: 2, - learnMore: ['https://uicp.link/whats-new', 'https://uicp.link/whats-new'], - }, - { - version: '2.3.0', - isMostRecent: false, - title: ['UI Color Palette 23 says welcome to Color spaces'], - image: [rnv23], - content: [ - 'Color spaces can be managed throughout the UI Color Palette. This allows you to select and switch between a variety of color spaces such as LCH, OKLCH, LAB, OKLAB, and HSL.', - ], - numberOfNotes: 1, - learnMore: ['https://uicp.link/whats-new'], - }, - { - version: '2.2.0', - isMostRecent: false, - title: ['UI Color Palette 22 update highlight'], - image: [rnv22], - content: [ - 'Newly extended to Figjam, the UI Color Palette plugin empowers designers to create and customize their UI color schemes at the start of the design process, providing greater flexibility to their workflow and enhancing their creative potential.', - ], - numberOfNotes: 1, - learnMore: ['https://uicp.link/whats-new'], - }, - { - version: '2.1.0', - isMostRecent: false, - title: ['UI Color Palette 21 update highlight'], - image: [rnv21], - content: [ - "Enhance your palette customization by editing the text colors used for the contrast score, surpassing the restrictions of using pure black and white. This ensures that your palette remains accessible, aligns with your brand's style, and complies with the WCAG and APCA standards.", - ], - numberOfNotes: 1, - learnMore: ['https://uicp.link/whats-new'], - }, - { - version: '2.0.0', - isMostRecent: false, - title: ['UI Color Palette 20 update highlight'], - image: [rnv20], - content: [ - "The color shades generation has been updated to improve the consistency of your palette's lightness and saturation. The new algorithm is automatically used for new palettes, and can be enabled for existing palettes in the settings.", - ], - numberOfNotes: 1, - learnMore: ['https://uicp.link/whats-new'], - }, - { - version: '1.9.0', - isMostRecent: false, - title: ['UI Color Palette 19 update highlight'], - image: [rnv19], - content: [ - 'Automatically identify the closest color shade to the source color when editing a palette. This feature aims to obtain the sRGB version of the source color that may not be natively within the gamut, making it easier to use in your UI.', - ], - numberOfNotes: 1, - learnMore: ['https://uicp.link/whats-new'], - }, -] - -export default releaseNotes diff --git a/src/types/app.ts b/src/types/app.ts index e01582e2f..10f88dbdc 100644 --- a/src/types/app.ts +++ b/src/types/app.ts @@ -24,15 +24,89 @@ export type Context = | 'EXPORT' | 'SETTINGS' +export type FilterOptions = + | 'ANY' + | 'YELLOW' + | 'ORANGE' + | 'RED' + | 'GREEN' + | 'VIOLET' + | 'BLUE' + export type EditorType = 'figma' | 'figjam' | 'dev' export type PlanStatus = 'UNPAID' | 'PAID' | 'NOT_SUPPORTED' export type TrialStatus = 'UNUSED' | 'PENDING' | 'EXPIRED' +export type FetchStatus = + | 'UNLOADED' + | 'LOADING' + | 'LOADED' + | 'ERROR' + | 'EMPTY' + | 'COMPLETE' + | 'SIGN_IN_FIRST' + | 'NO_RESULT' + +export type HighlightStatus = + | 'NO_HIGHLIGHT' + | 'DISPLAY_HIGHLIGHT_NOTIFICATION' + | 'DISPLAY_HIGHLIGHT_DIALOG' + export type Language = 'en-US' export interface windowSize { w: number h: number } + +export interface HighlightDigest { + version: string + status: HighlightStatus +} + +export interface SelectedColor { + id: string | undefined + position: number +} + +export interface HoveredColor extends SelectedColor { + hasGuideAbove: boolean + hasGuideBelow: boolean +} + +export type PriorityContext = + | 'EMPTY' + | 'FEEDBACK' + | 'TRIAL_FEEDBACK' + | 'HIGHLIGHT' + | 'WELCOME_TO_PRO' + | 'WELCOME_TO_TRIAL' + | 'TRY' + | 'ABOUT' + | 'PUBLICATION' + | 'REPORT' + +export type ThirdParty = 'COOLORS' | 'REALTIME_COLORS' | 'COLOUR_LOVERS' + +export type Easing = 'LINEAR' | 'EASE_IN' | 'EASE_OUT' | 'EASE_IN_OUT' + +export interface ImportUrl { + value: string + state: 'DEFAULT' | 'ERROR' | undefined + canBeSubmitted: boolean + helper: + | { + type: 'INFO' | 'ERROR' + message: string + } + | undefined +} + +export interface ContextItem { + label: string + id: Context + isUpdated: boolean + isActive: boolean +} diff --git a/src/types/configurations.ts b/src/types/configurations.ts index bda534f33..6eb1a9d14 100644 --- a/src/types/configurations.ts +++ b/src/types/configurations.ts @@ -1,6 +1,6 @@ import { HexModel } from '@a_ng_d/figmug-ui' -import { ThirdParty } from './management' +import { ThirdParty } from './app' import { RgbModel, TextColorsThemeHexModel } from './models' export interface SourceColorConfiguration { @@ -9,6 +9,8 @@ export interface SourceColorConfiguration { source: 'CANVAS' | 'REMOTE' | ThirdParty id: string isRemovable: boolean + hueShifting?: number + chromaShifting?: number } export interface PaletteConfiguration { @@ -60,6 +62,7 @@ export interface ColorConfiguration { } oklch: boolean hueShifting: number + chromaShifting: number id: string } diff --git a/src/types/content.ts b/src/types/content.ts deleted file mode 100644 index 2633293c1..000000000 --- a/src/types/content.ts +++ /dev/null @@ -1,9 +0,0 @@ -export interface ReleaseNote { - version: string - isMostRecent: boolean - title: Array - image: Array - content: Array - numberOfNotes: number - learnMore: Array<`https://${string}`> -} diff --git a/src/types/data.ts b/src/types/data.ts index 193c71ed7..024acb9f1 100644 --- a/src/types/data.ts +++ b/src/types/data.ts @@ -75,4 +75,6 @@ export interface ExternalPalettes { themes: Array creator_avatar: string creator_full_name: string + creator_id: string + is_shared: boolean } diff --git a/src/types/events.ts b/src/types/events.ts index 3a2e4cbe1..a0579cf53 100644 --- a/src/types/events.ts +++ b/src/types/events.ts @@ -1,9 +1,8 @@ -import { EditorType } from './app' +import { Easing, EditorType } from './app' import { ColorSpaceConfiguration, NamingConventionConfiguration, } from './configurations' -import { Easing } from './management' export interface EditorEvent { editor: EditorType @@ -25,6 +24,7 @@ export interface PublicationEvent { | 'REVERT_PALETTE' | 'DETACH_PALETTE' | 'ADD_PALETTE' + | 'SHARE_PALETTE' } export interface ImportEvent { @@ -55,6 +55,7 @@ export interface SourceColorEvent { | 'UPDATE_HEX' | 'UPDATE_LCH' | 'SHIFT_HUE' + | 'SHIFT_CHROMA' | 'DESCRIBE_COLOR' } @@ -69,7 +70,17 @@ export interface ColorThemeEvent { } export interface ExportEvent { - feature?: string + feature: + | 'TOKENS_GLOBAL' + | 'TOKENS_AMZN_STYLE_DICTIONARY' + | 'TOKENS_TOKENS_STUDIO' + | 'CSS' + | 'TAILWIND' + | 'APPLE_SWIFTUI' + | 'APPLE_UIKIT' + | 'ANDROID_COMPOSE' + | 'ANDROID_XML' + | 'CSV' colorSpace?: ColorSpaceConfiguration } @@ -83,3 +94,7 @@ export interface SettingEvent { | 'UPDATE_ALGORITHM' | 'UPDATE_TEXT_COLORS_THEME' } + +export interface ActionEvent { + feature: 'CREATE_PALETTE' | 'SYNC_STYLES' | 'SYNC_VARIABLES' +} diff --git a/src/types/management.ts b/src/types/management.ts deleted file mode 100644 index 019a41f6c..000000000 --- a/src/types/management.ts +++ /dev/null @@ -1,56 +0,0 @@ -import { Context } from './app' - -export interface SelectedColor { - id: string | undefined - position: number -} - -export interface HoveredColor extends SelectedColor { - hasGuideAbove: boolean - hasGuideBelow: boolean -} - -export type PriorityContext = - | 'EMPTY' - | 'FEEDBACK' - | 'TRIAL_FEEDBACK' - | 'HIGHLIGHT' - | 'WELCOME_TO_PRO' - | 'WELCOME_TO_TRIAL' - | 'TRY' - | 'ABOUT' - | 'PUBLICATION' - | 'REPORT' - -export type ThirdParty = 'COOLORS' | 'REALTIME_COLORS' | 'COLOUR_LOVERS' - -export type Easing = 'LINEAR' | 'EASE_IN' | 'EASE_OUT' | 'EASE_IN_OUT' - -export interface ImportUrl { - value: string - state: 'DEFAULT' | 'ERROR' | undefined - canBeSubmitted: boolean - helper: - | { - type: 'INFO' | 'ERROR' - message: string - } - | undefined -} - -export interface ContextItem { - label: string - id: Context - isUpdated: boolean - isActive: boolean -} - -export type FetchStatus = - | 'UNLOADED' - | 'LOADING' - | 'LOADED' - | 'ERROR' - | 'EMPTY' - | 'COMPLETE' - | 'SIGN_IN_FIRST' - | 'NO_RESULT' diff --git a/src/ui/App.tsx b/src/ui/App.tsx index 27c702e49..5d609d8e9 100644 --- a/src/ui/App.tsx +++ b/src/ui/App.tsx @@ -10,8 +10,10 @@ import { supabase } from '../bridges/publication/authentication' import { locals } from '../content/locals' import { EditorType, + HighlightDigest, Language, PlanStatus, + PriorityContext, Service, TrialStatus, } from '../types/app' @@ -32,15 +34,17 @@ import { ViewConfiguration, VisionSimulationModeConfiguration, } from '../types/configurations' -import { PriorityContext } from '../types/management' import { ActionsList, TextColorsThemeHexModel } from '../types/models' import { UserSession } from '../types/user' -import features, { trialTime, userConsentVersion } from '../utils/config' +import features, { + announcementsWorkerUrl, + trialTime, + userConsentVersion, +} from '../utils/config' import { trackEditorEvent, trackExportEvent, trackPurchaseEvent, - trackRunningEvent, trackTrialEnablementEvent, trackUserConsentEvent, } from '../utils/eventsTracker' @@ -87,6 +91,7 @@ export interface AppStates { lang: Language figmaUserId: string mustUserConsent: boolean + highlight: HighlightDigest isLoaded: boolean onGoingStep: string } @@ -181,13 +186,39 @@ class App extends React.Component, AppStates> { userConsent: userConsent, figmaUserId: '', mustUserConsent: true, + highlight: { + version: '', + status: 'NO_HIGHLIGHT', + }, isLoaded: false, onGoingStep: '', } } - componentDidMount = () => { + componentDidMount = async () => { setTimeout(() => this.setState({ isLoaded: true }), 1000) + fetch( + `${announcementsWorkerUrl}/?action=get_version&database_id=${process.env.REACT_APP_NOTION_ANNOUNCEMENTS_ID}` + ) + .then((response) => response.json()) + .then((data) => { + parent.postMessage( + { + pluginMessage: { + type: 'CHECK_HIGHLIGHT_STATUS', + version: data.version, + }, + }, + '*' + ) + this.setState({ + highlight: { + version: data.version, + status: 'NO_HIGHLIGHT', + }, + }) + }) + .catch((error) => console.error(error)) supabase.auth.onAuthStateChange((event, session) => { const actions: ActionsList = { SIGNED_IN: () => { @@ -240,8 +271,9 @@ class App extends React.Component, AppStates> { }, ], }, + pluginId: '1063959496693642315', }, - '*' + 'https://www.figma.com' ) }, } @@ -258,11 +290,6 @@ class App extends React.Component, AppStates> { this.setState({ figmaUserId: e.data.pluginMessage.id, }) - trackRunningEvent( - e.data.pluginMessage.id, - this.state.userConsent.find((consent) => consent.id === 'mixpanel') - ?.isConsented ?? false - ) } const checkUserConsent = () => @@ -288,13 +315,18 @@ class App extends React.Component, AppStates> { ) } - const checkHighlightStatus = () => + const handleHighlight = () => { this.setState({ priorityContainerContext: - e.data.pluginMessage.data === 'READ_RELEASE_NOTE' + e.data.pluginMessage.data !== 'DISPLAY_HIGHLIGHT_DIALOG' ? 'EMPTY' : 'HIGHLIGHT', + highlight: { + version: this.state.highlight.version, + status: e.data.pluginMessage.data, + }, }) + } const checkPlanStatus = () => this.setState({ @@ -742,7 +774,7 @@ class App extends React.Component, AppStates> { CHECK_USER_AUTHENTICATION: () => checkUserAuthentication(), CHECK_USER_CONSENT: () => checkUserConsent(), CHECK_EDITOR_TYPE: () => checkEditorType(), - CHECK_HIGHLIGHT_STATUS: () => checkHighlightStatus(), + PUSH_HIGHLIGHT_STATUS: () => handleHighlight(), CHECK_PLAN_STATUS: () => checkPlanStatus(), EMPTY_SELECTION: () => updateWhileEmptySelection(), COLOR_SELECTED: () => updateWhileColorSelected(), @@ -794,8 +826,9 @@ class App extends React.Component, AppStates> { }, ], }, + pluginId: '1063959496693642315', }, - '*' + 'https://www.figma.com' ) parent.postMessage( { @@ -875,7 +908,13 @@ class App extends React.Component, AppStates> { this.setState({ ...this.state, ...e }) } onClose={() => - this.setState({ priorityContainerContext: 'EMPTY' }) + this.setState({ + priorityContainerContext: 'EMPTY', + highlight: { + version: this.state.highlight.version, + status: 'NO_HIGHLIGHT', + }, + }) } /> diff --git a/src/ui/components/ColorItem.tsx b/src/ui/components/ColorItem.tsx index 034970b61..c4e708d1f 100644 --- a/src/ui/components/ColorItem.tsx +++ b/src/ui/components/ColorItem.tsx @@ -12,7 +12,8 @@ interface ColorItemProps { name: string hex: HexModel oklch: boolean - shift: number + hueShifting: number + chromaShifting: number description: string uuid: string index: number @@ -251,16 +252,66 @@ export default class ColorItem extends React.Component { >
feature.name === 'COLORS_CHROMA_SHIFTING' + )?.isPro + } > feature.name === 'COLORS_CHROMA_SHIFTING' + )?.isPro + } + onFocus={this.props.onCancellationSelection} + onBlur={this.props.onChangeColors} + onConfirm={this.props.onChangeColors} + /> + +
+ + feature.name === 'COLORS_CHROMA_SHIFTING' + )?.isActive + } + > +
+ feature.name === 'COLORS_CHROMA_SHIFTING' + )?.isPro + } + > + feature.name === 'COLORS_CHROMA_SHIFTING' + )?.isPro + } onFocus={this.props.onCancellationSelection} onBlur={this.props.onChangeColors} onConfirm={this.props.onChangeColors} @@ -288,6 +339,7 @@ export default class ColorItem extends React.Component { locals[this.props.lang].global.description.placeholder } feature="UPDATE_DESCRIPTION" + isGrowing={true} onFocus={this.props.onCancellationSelection} onBlur={this.props.onChangeColors} onConfirm={this.props.onChangeColors} diff --git a/src/ui/components/Knob.tsx b/src/ui/components/Knob.tsx index 3da4f496d..392445514 100644 --- a/src/ui/components/Knob.tsx +++ b/src/ui/components/Knob.tsx @@ -110,6 +110,7 @@ export default class Knob extends React.Component { step="0.1" feature="TYPE_STOP_VALUE" isAutoFocus={true} + isFlex={true} onFocus={() => this.setState({ stopInputValue: this.props.value, diff --git a/src/ui/components/Slider.tsx b/src/ui/components/Slider.tsx index 8a196220b..acc255db8 100644 --- a/src/ui/components/Slider.tsx +++ b/src/ui/components/Slider.tsx @@ -1,8 +1,8 @@ import { doMap } from '@a-ng-d/figmug.modules.do-map' import React from 'react' +import { Easing } from '../../types/app' import { ScaleConfiguration } from '../../types/configurations' -import { Easing } from '../../types/management' import doLightnessScale from '../../utils/doLightnessScale' import { palette } from '../../utils/palettePackage' import addStop from './../handlers/addStop' diff --git a/src/ui/components/ThemeItem.tsx b/src/ui/components/ThemeItem.tsx index a660f683c..93fe9c318 100644 --- a/src/ui/components/ThemeItem.tsx +++ b/src/ui/components/ThemeItem.tsx @@ -169,6 +169,7 @@ export default class ThemeItem extends React.Component< shouldFill={false} > { id: uid(), oklch: false, hueShifting: 0, + chromaShifting: 100, }) this.props.onChangeColors({ @@ -311,8 +317,15 @@ export default class Colors extends React.Component { } const setHueShifting = () => { + const max = parseFloat(currentElement.max), + min = parseFloat(currentElement.min) + let value = parseFloat(currentElement.value) + + if (value >= max) value = max + if (value <= min) value = min + this.colorsMessage.data = this.props.colors.map((item) => { - if (item.id === id) item.hueShifting = parseFloat(currentElement.value) + if (item.id === id) item.hueShifting = value return item }) @@ -332,6 +345,35 @@ export default class Colors extends React.Component { ) } + const setChromaShifting = () => { + const max = parseFloat(currentElement.max), + min = parseFloat(currentElement.min) + let value = parseFloat(currentElement.value) + + if (value >= max) value = max + if (value <= min) value = min + + this.colorsMessage.data = this.props.colors.map((item) => { + if (item.id === id) item.chromaShifting = value + return item + }) + + this.props.onChangeColors({ + colors: this.colorsMessage.data, + onGoingStep: 'colors changed', + }) + + parent.postMessage({ pluginMessage: this.colorsMessage }, '*') + trackSourceColorsManagementEvent( + this.props.figmaUserId, + this.props.userConsent.find((consent) => consent.id === 'mixpanel') + ?.isConsented ?? false, + { + feature: 'SHIFT_CHROMA', + } + ) + } + const updateColorDescription = () => { this.colorsMessage.data = this.props.colors.map((item) => { if (item.id === id) item.description = currentElement.value @@ -385,6 +427,7 @@ export default class Colors extends React.Component { UPDATE_CHROMA: () => updateChromaProp(), UPDATE_HUE: () => updateHueProp(), SHIFT_HUE: () => setHueShifting(), + SHIFT_CHROMA: () => setChromaShifting(), UPDATE_DESCRIPTION: () => updateColorDescription(), REMOVE_COLOR: () => removeColor(), NULL: () => null, @@ -526,7 +569,8 @@ export default class Colors extends React.Component { ).hex() as HexModel } oklch={color.oklch} - shift={color.hueShifting} + hueShifting={color.hueShifting} + chromaShifting={color.chromaShifting} description={color.description} uuid={color.id} selected={ diff --git a/src/ui/contexts/CommunityPalettes.tsx b/src/ui/contexts/CommunityPalettes.tsx index 68b60726e..db7a03680 100644 --- a/src/ui/contexts/CommunityPalettes.tsx +++ b/src/ui/contexts/CommunityPalettes.tsx @@ -10,7 +10,7 @@ import React from 'react' import { supabase } from '../../bridges/publication/authentication' import { locals } from '../../content/locals' -import { Context, Language, PlanStatus } from '../../types/app' +import { Context, FetchStatus, Language, PlanStatus } from '../../types/app' import { ColorConfiguration, MetaConfiguration, @@ -19,7 +19,6 @@ import { ThemeConfiguration, } from '../../types/configurations' import { ExternalPalettes } from '../../types/data' -import { FetchStatus } from '../../types/management' import { ActionsList } from '../../types/models' import { UserSession } from '../../types/user' import { pageSize, palettesDbTableName } from '../../utils/config' @@ -112,6 +111,7 @@ export default class CommunityPalettes extends React.Component< 'palette_id, screenshot, name, preset, colors, themes, creator_avatar, creator_full_name, is_shared' ) .eq('is_shared', true) + .order('published_at', { ascending: false }) .range(pageSize * (currentPage - 1), pageSize * currentPage - 1)) } else { // eslint-disable-next-line @typescript-eslint/no-extra-semi @@ -121,6 +121,7 @@ export default class CommunityPalettes extends React.Component< 'palette_id, screenshot, name, preset, colors, themes, creator_avatar, creator_full_name, is_shared' ) .eq('is_shared', true) + .order('published_at', { ascending: false }) .range(pageSize * (currentPage - 1), pageSize * currentPage - 1) .ilike('name', `%${searchQuery}%`)) } @@ -395,6 +396,8 @@ export default class CommunityPalettes extends React.Component< locals[this.props.lang].palettes.lazyLoad.search } value={this.props.searchQuery} + isClearable + isFramed={false} onChange={(e) => { this.props.onChangeSearchQuery( (e.target as HTMLInputElement).value @@ -407,6 +410,13 @@ export default class CommunityPalettes extends React.Component< (e.target as HTMLInputElement).value ) }} + onCleared={(e) => { + this.props.onChangeSearchQuery(e) + this.props.onChangeStatus('LOADING') + this.props.onChangeCurrentPage(1) + this.props.onLoadPalettesList([]) + this.callUICPAgent(1, e) + }} /> } border={['BOTTOM']} diff --git a/src/ui/contexts/Explore.tsx b/src/ui/contexts/Explore.tsx index fde01cdb4..5a00d2b7e 100644 --- a/src/ui/contexts/Explore.tsx +++ b/src/ui/contexts/Explore.tsx @@ -15,16 +15,21 @@ import React from 'react' import { uid } from 'uid' import { locals } from '../../content/locals' -import { Language } from '../../types/app' +import { + FetchStatus, + FilterOptions, + Language, + ThirdParty, +} from '../../types/app' import { SourceColorConfiguration } from '../../types/configurations' import { ColourLovers } from '../../types/data' -import { FetchStatus, ThirdParty } from '../../types/management' import { pageSize } from '../../utils/config' import { trackImportEvent } from '../../utils/eventsTracker' import PaletteItem from '../components/PaletteItem' interface ExploreProps { colourLoversPaletteList: Array + activeFilters: Array userConsent: Array lang: Language figmaUserId: string @@ -37,22 +42,13 @@ interface ExploreProps { palettes: Array, shouldBeEmpty: boolean ) => void + onChangeFilters: (filters: Array) => void } -type FilterOptions = - | 'ANY' - | 'YELLOW' - | 'ORANGE' - | 'RED' - | 'GREEN' - | 'VIOLET' - | 'BLUE' - interface ExploreStates { colourLoversPalettesListStatus: FetchStatus currentPage: number isLoadMoreActionLoading: boolean - activeFilters: Array } export default class Explore extends React.Component< @@ -76,7 +72,6 @@ export default class Explore extends React.Component< colourLoversPalettesListStatus: 'LOADING', currentPage: 1, isLoadMoreActionLoading: false, - activeFilters: ['ANY'], }) } @@ -102,7 +97,7 @@ export default class Explore extends React.Component< return } - if (this.state.activeFilters !== prevState.activeFilters) { + if (this.props.activeFilters !== prevProps.activeFilters) { this.setState({ currentPage: 1, colourLoversPalettesListStatus: 'LOADING', @@ -119,7 +114,7 @@ export default class Explore extends React.Component< encodeURIComponent( `https://www.colourlovers.com/api/palettes?format=json&numResults=${pageSize}&resultOffset=${ this.state.currentPage - 1 - }&hueOption=${this.state.activeFilters + }&hueOption=${this.props.activeFilters .filter((filter) => filter !== 'ANY') .map((filter) => filter.toLowerCase()) .join(',')}` @@ -172,22 +167,15 @@ export default class Explore extends React.Component< } onAddFilter = (value: FilterOptions) => { - if (value === 'ANY' || this.state.activeFilters.length === 0) - this.setState({ - activeFilters: this.state.activeFilters.filter( - (filter) => filter === 'ANY' - ), - }) - else if (this.state.activeFilters.includes(value)) - this.setState({ - activeFilters: this.state.activeFilters.filter( - (filter) => filter !== value - ), - }) - else - this.setState({ - activeFilters: this.state.activeFilters.concat(value), - }) + if (value === 'ANY' || this.props.activeFilters.length === 0) + this.props.onChangeFilters( + this.props.activeFilters.filter((filter) => filter === 'ANY') + ) + else if (this.props.activeFilters.includes(value)) + this.props.onChangeFilters( + this.props.activeFilters.filter((filter) => filter !== value) + ) + else this.props.onChangeFilters(this.props.activeFilters.concat(value)) } // Templates @@ -341,12 +329,12 @@ export default class Explore extends React.Component< id="explore__filters" options={this.setFilters()} selected={ - this.state.activeFilters.includes('ANY') && - this.state.activeFilters.length > 1 - ? this.state.activeFilters + this.props.activeFilters.includes('ANY') && + this.props.activeFilters.length > 1 + ? this.props.activeFilters .filter((filter) => filter !== 'ANY') .join(', ') - : this.state.activeFilters.join(', ') + : this.props.activeFilters.join(', ') } isDisabled={ this.state.colourLoversPalettesListStatus === 'LOADING' || diff --git a/src/ui/contexts/MyPalettes.tsx b/src/ui/contexts/MyPalettes.tsx index 49ff07b52..c120085e8 100644 --- a/src/ui/contexts/MyPalettes.tsx +++ b/src/ui/contexts/MyPalettes.tsx @@ -10,9 +10,10 @@ import { import React from 'react' import { signIn, supabase } from '../../bridges/publication/authentication' +import sharePalette from '../../bridges/publication/sharePalette' import unpublishPalette from '../../bridges/publication/unpublishPalette' import { locals } from '../../content/locals' -import { Context, Language, PlanStatus } from '../../types/app' +import { Context, FetchStatus, Language, PlanStatus } from '../../types/app' import { ColorConfiguration, MetaConfiguration, @@ -21,7 +22,6 @@ import { ThemeConfiguration, } from '../../types/configurations' import { ExternalPalettes } from '../../types/data' -import { FetchStatus } from '../../types/management' import { ActionsList } from '../../types/models' import { UserSession } from '../../types/user' import { pageSize, palettesDbTableName } from '../../utils/config' @@ -123,18 +123,20 @@ export default class MyPalettes extends React.Component< ;({ data, error } = await supabase .from(palettesDbTableName) .select( - 'palette_id, screenshot, name, preset, colors, themes, creator_avatar, creator_full_name, creator_id' + 'palette_id, screenshot, name, preset, colors, themes, creator_avatar, creator_full_name, creator_id, is_shared' ) .eq('creator_id', this.props.userSession.userId) + .order('published_at', { ascending: false }) .range(pageSize * (currentPage - 1), pageSize * currentPage - 1)) } else { // eslint-disable-next-line @typescript-eslint/no-extra-semi ;({ data, error } = await supabase .from(palettesDbTableName) .select( - 'palette_id, screenshot, name, preset, colors, themes, creator_avatar, creator_full_name, creator_id' + 'palette_id, screenshot, name, preset, colors, themes, creator_avatar, creator_full_name, creator_id, is_shared' ) .eq('creator_id', this.props.userSession.userId) + .order('published_at', { ascending: false }) .range(pageSize * (currentPage - 1), pageSize * currentPage - 1) .ilike('name', `%${searchQuery}%`)) } @@ -199,6 +201,8 @@ export default class MyPalettes extends React.Component< rgb: color.rgb, source: 'REMOTE', id: color.id, + hueShifting: color.hueShifting, + chromaShifting: color.chromaShifting, } } ) as Array, @@ -343,6 +347,14 @@ export default class MyPalettes extends React.Component< palette.colors ?? [], palette.themes ?? [] )} + indicator={ + palette.is_shared + ? { + status: 'ACTIVE', + label: locals[this.props.lang].publication.statusShared, + } + : undefined + } action={() => null} > { + this.setState({ + isContextActionLoading: + this.state.isContextActionLoading.map((loading, i) => + i === index ? true : loading + ), + }) + sharePalette(palette.palette_id, !palette.is_shared) + .then(() => { + parent.postMessage( + { + pluginMessage: { + type: 'SEND_MESSAGE', + message: !palette.is_shared + ? locals[this.props.lang].success.share + : locals[this.props.lang].success.unshare, + }, + }, + '*' + ) + + const currentPalettesList = + this.props.palettesList.map((pal) => + pal.palette_id === palette.palette_id + ? { + ...pal, + is_shared: !pal.is_shared, + } + : pal + ) + this.props.onLoadPalettesList(currentPalettesList) + + trackPublicationEvent( + this.props.figmaUserId, + this.props.userConsent.find( + (consent) => consent.id === 'mixpanel' + )?.isConsented ?? false, + { + feature: 'SHARE_PALETTE', + } + ) + }) + .finally(() => { + this.setState({ + isContextActionLoading: + this.state.isContextActionLoading.map( + (loading, i) => (i === index ? false : loading) + ), + }) + }) + .catch(() => { + parent.postMessage( + { + pluginMessage: { + type: 'SEND_MESSAGE', + message: !palette.is_shared + ? locals[this.props.lang].error.share + : locals[this.props.lang].error.unshare, }, }, '*' @@ -497,7 +585,7 @@ export default class MyPalettes extends React.Component< isLoading={this.state.isSignInActionLoading} action={async () => { this.setState({ isSignInActionLoading: true }) - signIn() + signIn(this.props.figmaUserId) .finally(() => { this.setState({ isSignInActionLoading: false }) }) @@ -539,6 +627,8 @@ export default class MyPalettes extends React.Component< locals[this.props.lang].palettes.lazyLoad.search } value={this.props.searchQuery} + isClearable + isFramed={false} onChange={(e) => { this.props.onChangeSearchQuery( (e.target as HTMLInputElement).value @@ -551,6 +641,13 @@ export default class MyPalettes extends React.Component< (e.target as HTMLInputElement).value ) }} + onCleared={(e) => { + this.props.onChangeSearchQuery(e) + this.props.onChangeStatus('LOADING') + this.props.onChangeCurrentPage(1) + this.props.onLoadPalettesList([]) + this.callUICPAgent(1, e) + }} /> } border={['BOTTOM']} diff --git a/src/ui/contexts/Overview.tsx b/src/ui/contexts/Overview.tsx index 2d3289ba8..2f6a0c9e6 100644 --- a/src/ui/contexts/Overview.tsx +++ b/src/ui/contexts/Overview.tsx @@ -12,9 +12,8 @@ import React from 'react' import { uid } from 'uid' import { locals } from '../../content/locals' -import { Language, PlanStatus } from '../../types/app' +import { ImportUrl, Language, PlanStatus, ThirdParty } from '../../types/app' import { SourceColorConfiguration } from '../../types/configurations' -import { ImportUrl, ThirdParty } from '../../types/management' import features from '../../utils/config' import { trackImportEvent } from '../../utils/eventsTracker' import isBlocked from '../../utils/isBlocked' @@ -335,7 +334,6 @@ export default class Overview extends React.Component< @@ -785,7 +785,7 @@ export default class Scale extends React.Component { { pluginMessage: { type: 'OPEN_IN_BROWSER', - url: 'https://uicp.link/v', + url: 'https://uicp.link/how-to-adjust', }, }, '*' @@ -817,6 +817,13 @@ export default class Scale extends React.Component { {...this.props} context="CREATE" /> + feature.name === 'PREVIEW')?.isActive + } + > + +
) } diff --git a/src/ui/contexts/Settings.tsx b/src/ui/contexts/Settings.tsx index 6955f9204..37a87ffc8 100644 --- a/src/ui/contexts/Settings.tsx +++ b/src/ui/contexts/Settings.tsx @@ -34,6 +34,7 @@ import type { AppStates } from '../App' import Feature from '../components/Feature' import Actions from '../modules/Actions' import Dispatcher from '../modules/Dispatcher' +import Preview from '../modules/Preview' interface SettingsProps { context: string @@ -442,6 +443,7 @@ export default class Settings extends React.Component { this.props.planStatus )} feature="UPDATE_DESCRIPTION" + isGrowing={true} onFocus={ isBlocked('SETTINGS_PALETTE_DESCRIPTION', this.props.planStatus) ? () => null @@ -1199,10 +1201,19 @@ export default class Settings extends React.Component { {this.props.context === 'CREATE' ? ( - + <> + + feature.name === 'PREVIEW')?.isActive + } + > + + + ) : ( + activeFilters: Array } export default class Source extends React.Component { @@ -38,6 +48,7 @@ export default class Source extends React.Component { this.state = { context: this.contexts[0] !== undefined ? this.contexts[0].id : '', colourLoversPaletteList: [], + activeFilters: ['ANY'], } } @@ -67,6 +78,7 @@ export default class Source extends React.Component { fragment = ( this.setState({ context: 'SOURCE_OVERVIEW' }) @@ -78,6 +90,7 @@ export default class Source extends React.Component { : [], }) } + onChangeFilters={(e) => this.setState({ activeFilters: e })} /> ) break @@ -107,6 +120,13 @@ export default class Source extends React.Component { : () => null } /> + feature.name === 'PREVIEW')?.isActive + } + > + + ) } diff --git a/src/ui/contexts/Themes.tsx b/src/ui/contexts/Themes.tsx index 188c94936..a328bab73 100644 --- a/src/ui/contexts/Themes.tsx +++ b/src/ui/contexts/Themes.tsx @@ -9,13 +9,18 @@ import React from 'react' import { uid } from 'uid' import { locals } from '../../content/locals' -import { EditorType, Language, PlanStatus } from '../../types/app' +import { + EditorType, + HoveredColor, + Language, + PlanStatus, + SelectedColor, +} from '../../types/app' import { PresetConfiguration, ScaleConfiguration, ThemeConfiguration, } from '../../types/configurations' -import { HoveredColor, SelectedColor } from '../../types/management' import { ThemesMessage } from '../../types/messages' import { ActionsList, DispatchProcess } from '../../types/models' import { Identity } from '../../types/user' diff --git a/src/ui/modules/Highlight.tsx b/src/ui/modules/Highlight.tsx index 86c84f0ae..f7a6806fa 100644 --- a/src/ui/modules/Highlight.tsx +++ b/src/ui/modules/Highlight.tsx @@ -1,18 +1,20 @@ -import { Dialog, texts } from '@a_ng_d/figmug-ui' +import { Dialog, Icon, Message, texts } from '@a_ng_d/figmug-ui' import React from 'react' import { locals } from '../../content/locals' -import releaseNotes from '../../content/releaseNotes' -import { Language } from '../../types/app' -import { ReleaseNote } from '../../types/content' +import { HighlightDigest, Language } from '../../types/app' +import { announcementsWorkerUrl } from '../../utils/config' interface HighlightProps { + highlight: HighlightDigest lang: Language onCloseHighlight: React.ReactEventHandler } interface HighlightStates { position: number + announcements: Array + status: 'LOADING' | 'LOADED' | 'ERROR' } export default class Highlight extends React.Component< @@ -23,14 +25,29 @@ export default class Highlight extends React.Component< super(props) this.state = { position: 0, + announcements: [], + status: 'LOADING', } } - goNextSlide = ( - e: React.SyntheticEvent, - currentNote: ReleaseNote - ) => { - if (this.state.position + 1 < currentNote['numberOfNotes']) + componentDidMount = () => { + fetch( + `${announcementsWorkerUrl}/?action=get_announcements&database_id=${process.env.REACT_APP_NOTION_ANNOUNCEMENTS_ID}` + ) + .then((response) => response.json()) + .then((data) => { + this.setState({ + announcements: data.announcements, + status: 'LOADED', + }) + }) + .catch(() => { + this.setState({ status: 'ERROR' }) + }) + } + + goNextSlide = (e: React.SyntheticEvent) => { + if (this.state.position + 1 < this.state.announcements.length) this.setState({ position: this.state.position + 1 }) else { this.props.onCloseHighlight(e) @@ -39,51 +56,112 @@ export default class Highlight extends React.Component< } render() { - const currentNote = releaseNotes.filter((note) => note['isMostRecent'])[0] - return ( - this.goNextSlide(e, currentNote), - }, - secondary: { - label: locals[this.props.lang].highlight.cta.learnMore, - action: () => - window.open( - currentNote['learnMore'][this.state.position], - '_blank' - ), - }, - }} - indicator={ - currentNote['numberOfNotes'] > 1 - ? `${this.state.position + 1} of ${currentNote['numberOfNotes']}` - : undefined - } - onClose={(e) => { - this.props.onCloseHighlight(e) - this.setState({ position: 0 }) - }} - > -
- -
-
-

- {currentNote['content'][this.state.position]} -

-
-
- ) + if (this.state.status === 'LOADING') + return ( + +
+ +
+
+ ) + else if (this.state.status === 'ERROR') + return ( + +
+ +
+
+ ) + else + return ( + this.goNextSlide(e), + }, + secondary: (() => { + if (this.state.announcements[this.state.position].properties.URL.url !== null) + return { + label: locals[this.props.lang].highlight.cta.learnMore, + action: () => + window.open( + this.state.announcements[this.state.position].properties.URL + .url, + '_blank' + ) + }; + else return undefined + })() + }} + indicator={ + this.state.announcements.length > 1 + ? `${this.state.position + 1} of ${this.state.announcements.length}` + : undefined + } + onClose={(e) => { + parent.postMessage( + { + pluginMessage: { + type: 'SET_ITEMS', + items: [ + { + key: 'highlight_version', + value: this.props.highlight.version, + }, + ], + }, + }, + '*' + ) + this.props.onCloseHighlight(e) + }} + > +
+ +
+
+

+ { + this.state.announcements[this.state.position].properties + .Description.rich_text[0].plain_text + } +

+
+
+ ) } } diff --git a/src/ui/modules/Preview.tsx b/src/ui/modules/Preview.tsx new file mode 100644 index 000000000..6d5fd7d51 --- /dev/null +++ b/src/ui/modules/Preview.tsx @@ -0,0 +1,100 @@ +import * as blinder from 'color-blind' +import chroma from 'chroma-js' +import { Hsluv } from 'hsluv' +import React from 'react' + +import { SourceColorConfiguration } from '../../types/configurations' +import { RgbModel } from '../../types/models' +import { palette } from '../../utils/palettePackage' + +interface PreviewProps { + sourceColors: Array | [] +} + +export default class Preview extends React.Component { + static defaultProps = { + sourceColors: [], + } + + // Direct actions + setColor = (rgb: RgbModel, scale: number) => { + scale = + palette.colorSpace.includes('OK') || palette.colorSpace === 'HSL' + ? scale / 100 + : scale + + if (palette.colorSpace === 'HSLUV') + return this.setVisionSimulation(this.setHsluv(rgb, scale)) + else + return this.setVisionSimulation( + chroma(Object.values(rgb).map((value) => value * 255)) + .set(`${palette.colorSpace.toLowerCase()}.l`, scale) + .hex() + ) + } + + setHsluv = (rgb: RgbModel, scale: number) => { + const hsluv = new Hsluv() + + hsluv.rgb_r = rgb.r + hsluv.rgb_g = rgb.g + hsluv.rgb_b = rgb.b + + hsluv.rgbToHsluv() + + hsluv.hsluv_l = scale + + if (Number.isNaN(hsluv.hsluv_s)) hsluv.hsluv_s = 0 + if (Number.isNaN(hsluv.hsluv_h)) hsluv.hsluv_h = 0 + + hsluv.hsluvToHex() + + return hsluv.hex + } + + setVisionSimulation = (hex: string) => { + if (palette.visionSimulationMode === 'PROTANOMALY') + return blinder.protanomaly(hex) + if (palette.visionSimulationMode === 'PROTANOPIA') + return blinder.protanopia(hex) + if (palette.visionSimulationMode === 'DEUTERANOMALY') + return blinder.deuteranomaly(hex) + if (palette.visionSimulationMode === 'DEUTERANOPIA') + return blinder.deuteranopia(hex) + if (palette.visionSimulationMode === 'TRITANOMALY') + return blinder.tritanomaly(hex) + if (palette.visionSimulationMode === 'TRITANOPIA') + return blinder.tritanopia(hex) + if (palette.visionSimulationMode === 'ACHROMATOMALY') + return blinder.achromatomaly(hex) + if (palette.visionSimulationMode === 'ACHROMATOPSIA') + return blinder.achromatopsia(hex) + return hex + } + + // Render + render() { + return ( +
+ {this.props.sourceColors.map((sourceColor, index) => ( +
+ {Object.values(palette.scale) + .reverse() + .map((scale, index) => ( +
+ ))} +
+ ))} +
+ ) + } +} diff --git a/src/ui/modules/PriorityContainer.tsx b/src/ui/modules/PriorityContainer.tsx index 11d981fb6..0d3d112ff 100644 --- a/src/ui/modules/PriorityContainer.tsx +++ b/src/ui/modules/PriorityContainer.tsx @@ -14,10 +14,15 @@ import pp from '../../content/images/pro_plan.webp' import p from '../../content/images/publication.webp' import t from '../../content/images/trial.webp' import { locals } from '../../content/locals' -import { Language, PlanStatus, TrialStatus } from '../../types/app' -import { PriorityContext } from '../../types/management' +import { + HighlightDigest, + Language, + PlanStatus, + PriorityContext, + TrialStatus, +} from '../../types/app' import { UserSession } from '../../types/user' -import features, { releaseNotesVersion } from '../../utils/config' +import features from '../../utils/config' import { trackSignInEvent } from '../../utils/eventsTracker' import type { AppStates } from '../App' import Feature from '../components/Feature' @@ -32,6 +37,7 @@ interface PriorityContainerProps { planStatus: PlanStatus trialStatus: TrialStatus userSession: UserSession + highlight: HighlightDigest lang: Language figmaUserId: string onChangePublication: React.Dispatch> @@ -289,24 +295,8 @@ export default class PriorityContainer extends React.Component< } > { - parent.postMessage( - { - pluginMessage: { - type: 'SET_ITEMS', - items: [ - { - key: `${releaseNotesVersion}_isRead`, - value: true, - }, - ], - }, - }, - '*' - ) - this.props.onClose() - }} + {...this.props} + onCloseHighlight={this.props.onClose} />
) @@ -353,7 +343,7 @@ export default class PriorityContainer extends React.Component< : 'DEFAULT', action: async () => { this.setState({ isPrimaryActionLoading: true }) - signIn() + signIn(this.props.figmaUserId) .then(() => { trackSignInEvent( this.props.figmaUserId, @@ -486,6 +476,7 @@ export default class PriorityContainer extends React.Component< locals[this.props.lang].report.message.placeholder } value={this.state.userMessage} + isGrowing onChange={(e) => this.setState({ userMessage: e.target.value }) } diff --git a/src/ui/modules/Publication.tsx b/src/ui/modules/Publication.tsx index a3f4f87b8..091e76db3 100644 --- a/src/ui/modules/Publication.tsx +++ b/src/ui/modules/Publication.tsx @@ -267,7 +267,7 @@ export default class Publication extends React.Component< (consent) => consent.id === 'mixpanel' )?.isConsented ?? false, { - feature: 'UNPUBLISH_PALETTE', + feature: 'PUBLISH_PALETTE', } ) }) @@ -779,12 +779,12 @@ export default class Publication extends React.Component< }, WAITING: { primary: { - label: locals[this.props.lang].publication.waiting, + label: locals[this.props.lang].pending.primaryAction, state: 'DISABLED', action: () => null, }, secondary: { - label: locals[this.props.lang].publication.waiting, + label: locals[this.props.lang].pending.secondaryAction, state: 'DISABLED', action: () => null, }, @@ -799,13 +799,13 @@ export default class Publication extends React.Component< ): PublicationOption | undefined => { const actions: Record = { UNPUBLISHED: { - label: locals[this.props.lang].publication.selectToShare, + label: locals[this.props.lang].publication.share, state: this.state.isPaletteShared, action: () => this.setState({ isPaletteShared: !this.state.isPaletteShared }), }, CAN_BE_PUSHED: { - label: locals[this.props.lang].publication.selectToShare, + label: locals[this.props.lang].publication.share, state: this.state.isPaletteShared, action: () => this.setState({ isPaletteShared: !this.state.isPaletteShared }), @@ -813,7 +813,7 @@ export default class Publication extends React.Component< MUST_BE_PULLED: undefined, MAY_BE_PULLED: undefined, PUBLISHED: { - label: locals[this.props.lang].publication.selectToShare, + label: locals[this.props.lang].publication.share, state: this.state.isPaletteShared, action: () => this.setState({ isPaletteShared: !this.state.isPaletteShared }), diff --git a/src/ui/modules/Shortcuts.tsx b/src/ui/modules/Shortcuts.tsx index ac1b196d6..150a324d5 100644 --- a/src/ui/modules/Shortcuts.tsx +++ b/src/ui/modules/Shortcuts.tsx @@ -11,7 +11,13 @@ import React from 'react' import { signIn, signOut } from '../../bridges/publication/authentication' import { locals } from '../../content/locals' -import { EditorType, Language, PlanStatus, TrialStatus } from '../../types/app' +import { + EditorType, + HighlightDigest, + Language, + PlanStatus, + TrialStatus, +} from '../../types/app' import { UserSession } from '../../types/user' import features from '../../utils/config' import { trackSignInEvent, trackSignOutEvent } from '../../utils/eventsTracker' @@ -25,6 +31,7 @@ interface ShortcutsProps { trialRemainingTime: number userSession: UserSession userConsent: Array + highlight: HighlightDigest lang: Language figmaUserId: string onReOpenFeedback: () => void @@ -239,7 +246,7 @@ export default class Shortcuts extends React.Component< children: [], action: async () => { this.setState({ isUserMenuLoading: true }) - signIn() + signIn(this.props.figmaUserId) .then(() => { trackSignInEvent( this.props.figmaUserId, @@ -309,9 +316,10 @@ export default class Shortcuts extends React.Component< this.props.planStatus ), isNew: - features.find( - (feature) => feature.name === 'SHORTCUTS_HIGHLIGHT' - )?.isNew ?? true, + this.props.highlight.status === + 'DISPLAY_HIGHLIGHT_NOTIFICATION' + ? true + : false, children: [], action: () => this.props.onReOpenHighlight(), }, @@ -508,6 +516,12 @@ export default class Shortcuts extends React.Component< }, ]} alignment="TOP_RIGHT" + isNew={ + this.props.highlight.status === + 'DISPLAY_HIGHLIGHT_NOTIFICATION' + ? true + : false + } /> {this.props.editorType !== 'dev' ? ( diff --git a/src/ui/services/CreatePalette.tsx b/src/ui/services/CreatePalette.tsx index 8900d4f5e..f7b3d2f29 100644 --- a/src/ui/services/CreatePalette.tsx +++ b/src/ui/services/CreatePalette.tsx @@ -3,7 +3,7 @@ import chroma from 'chroma-js' import React from 'react' import { uid } from 'uid' -import { Language, PlanStatus } from '../../types/app' +import { ContextItem, Language, PlanStatus, ThirdParty } from '../../types/app' import { ColorSpaceConfiguration, NamingConventionConfiguration, @@ -13,10 +13,10 @@ import { ViewConfiguration, VisionSimulationModeConfiguration, } from '../../types/configurations' -import { ContextItem, ThirdParty } from '../../types/management' import { TextColorsThemeHexModel } from '../../types/models' import { UserSession } from '../../types/user' import doLightnessScale from '../../utils/doLightnessScale' +import { trackActionEvent } from '../../utils/eventsTracker' import { palette } from '../../utils/palettePackage' import { setContexts } from '../../utils/setContexts' import type { AppStates } from '../App' @@ -94,7 +94,7 @@ export default class CreatePalette extends React.Component< }) // Direct actions - onCreatePalette = () => + onCreatePalette = () => { parent.postMessage( { pluginMessage: { @@ -110,6 +110,15 @@ export default class CreatePalette extends React.Component< }, '*' ) + trackActionEvent( + this.props.figmaUserId, + this.props.userConsent.find((consent) => consent.id === 'mixpanel') + ?.isConsented ?? false, + { + feature: 'CREATE_PALETTE', + } + ) + } onConfigureExternalSourceColors = (name: string, colors: Array) => { palette.name = name diff --git a/src/ui/services/EditPalette.tsx b/src/ui/services/EditPalette.tsx index 93eaf09c1..37fc96952 100644 --- a/src/ui/services/EditPalette.tsx +++ b/src/ui/services/EditPalette.tsx @@ -6,7 +6,7 @@ import JSZip from 'jszip' import React from 'react' import { locals } from '../../content/locals' -import { EditorType, Language, PlanStatus } from '../../types/app' +import { ContextItem, EditorType, Language, PlanStatus } from '../../types/app' import { AlgorithmVersionConfiguration, ColorConfiguration, @@ -18,12 +18,12 @@ import { ViewConfiguration, VisionSimulationModeConfiguration, } from '../../types/configurations' -import { ContextItem } from '../../types/management' import { ThemesMessage } from '../../types/messages' import { TextColorsThemeHexModel } from '../../types/models' import { Identity } from '../../types/user' import features from '../../utils/config' import doLightnessScale from '../../utils/doLightnessScale' +import { trackActionEvent } from '../../utils/eventsTracker' import isBlocked from '../../utils/isBlocked' import { palette } from '../../utils/palettePackage' import { setContexts } from '../../utils/setContexts' @@ -170,6 +170,14 @@ export default class EditPalette extends React.Component< position: null, }, }) + trackActionEvent( + this.props.figmaUserId, + this.props.userConsent.find((consent) => consent.id === 'mixpanel') + ?.isConsented ?? false, + { + feature: 'SYNC_STYLES', + } + ) } onSyncVariables = () => { @@ -180,6 +188,14 @@ export default class EditPalette extends React.Component< position: null, }, }) + trackActionEvent( + this.props.figmaUserId, + this.props.userConsent.find((consent) => consent.id === 'mixpanel') + ?.isConsented ?? false, + { + feature: 'SYNC_VARIABLES', + } + ) } onExport = () => { diff --git a/src/ui/stylesheets/app.css b/src/ui/stylesheets/app.css index 4338bdaa1..cb0c04846 100644 --- a/src/ui/stylesheets/app.css +++ b/src/ui/stylesheets/app.css @@ -159,7 +159,7 @@ div.export-palette__preview { } div.export-palette__preview textarea { - height: 100%; + height: 100% !important; margin: 0; } @@ -222,3 +222,22 @@ div.about__links { padding-bottom: var(--size-xxxsmall) !important; } } + +/* Preview */ +.preview { + display: flex; + flex-direction: column; + overflow: hidden; +} + +.preview__row { + display: flex; + flex: 1; + overflow: hidden; +} + +.preview__cell { + flex: 1; + overflow: hidden; + height: var(--size-xxxsmall); +} \ No newline at end of file diff --git a/src/utils/config.ts b/src/utils/config.ts index 0f93b3368..93b096ef6 100644 --- a/src/utils/config.ts +++ b/src/utils/config.ts @@ -1,14 +1,23 @@ import { Feature } from '../types/app'; -export const trialTime = 72 -export const oldTrialTime = 48 -export const releaseNotesVersion = '4.0.0' +export const trialTime = 48 +export const oldTrialTime = 72 export const pageSize = 20 -export const workerUrl = process.env.REACT_APP_WORKER_URL as string +export const authWorkerUrl = + process.env.NODE_ENV === 'development' + ? 'http://localhost:8787' + : (process.env.REACT_APP_AUTH_WORKER_URL as string) +export const announcementsWorkerUrl = + process.env.NODE_ENV === 'development' + ? 'http://localhost:8888' + : (process.env.REACT_APP_ANNOUNCEMENTS_WORKER_URL as string) export const databaseUrl = process.env.REACT_APP_SUPABASE_URL as string -export const authUrl = process.env.REACT_APP_AUTH_URL as string +export const authUrl = + process.env.NODE_ENV === 'development' + ? 'http://localhost:3000' + : (process.env.REACT_APP_AUTH_URL as string) export const palettesDbTableName = process.env.NODE_ENV === 'development' ? 'sandbox.palettes' : 'palettes' @@ -18,7 +27,7 @@ export const palettesStorageName = : 'palette.screenshots' export const userConsentVersion = '2024.01' -export const trialVersion = '2024.02' +export const trialVersion = '2024.03' export const features: Array = [ { @@ -367,7 +376,16 @@ export const features: Array = [ name: 'COLORS_HUE_SHIFTING', description: 'Source color hue shifting number', isActive: true, - isPro: false, + isPro: true, + isNew: false, + type: 'ACTION', + service: ['EDIT'], + }, + { + name: 'COLORS_CHROMA_SHIFTING', + description: 'Source color chroma shifting number', + isActive: false, + isPro: true, isNew: false, type: 'ACTION', service: ['EDIT'], @@ -736,7 +754,7 @@ export const features: Array = [ name: 'SETTINGS_VISION_SIMULATION_MODE_PROTANOMALY', description: 'Protanomaly vision simulation mode', isActive: true, - isPro: false, + isPro: true, isNew: false, type: 'ACTION', service: ['CREATE', 'EDIT'], @@ -745,7 +763,7 @@ export const features: Array = [ name: 'SETTINGS_VISION_SIMULATION_MODE_PROTANOPIA', description: 'Protanopia vision simulation mode', isActive: true, - isPro: false, + isPro: true, isNew: false, type: 'ACTION', service: ['CREATE', 'EDIT'], @@ -822,6 +840,15 @@ export const features: Array = [ type: 'ACTION', service: ['CREATE', 'EDIT'], }, + { + name: 'PREVIEW', + description: 'Take a quick glance at the palette', + isActive: true, + isPro: false, + isNew: false, + type: 'DIVISION', + service: ['CREATE'], + }, { name: 'SHORTCUTS', description: 'Quick useful links', diff --git a/src/utils/doLightnessScale.ts b/src/utils/doLightnessScale.ts index fea59fd70..93be1b8fa 100644 --- a/src/utils/doLightnessScale.ts +++ b/src/utils/doLightnessScale.ts @@ -1,7 +1,7 @@ import { doMap } from '@a-ng-d/figmug.modules.do-map' +import { Easing } from '../types/app' import { ScaleConfiguration } from '../types/configurations' -import { Easing } from '../types/management' const doLightnessScale = ( stops: Array, diff --git a/src/utils/eventsTracker.ts b/src/utils/eventsTracker.ts index 2a36c9869..dfb01be1a 100644 --- a/src/utils/eventsTracker.ts +++ b/src/utils/eventsTracker.ts @@ -2,6 +2,7 @@ import { ConsentConfiguration } from '@a_ng_d/figmug-ui' import mixpanel from 'mixpanel-figma' import { + ActionEvent, ColorThemeEvent, EditorEvent, ExportEvent, @@ -50,13 +51,13 @@ export const trackEditorEvent = ( export const trackSignInEvent = (id: string, consent: boolean) => { if (!consent) return mixpanel.identify(id) - mixpanel.track('Signed in', { ...eventsRecurringProperties }) + mixpanel.track('Signed In', { ...eventsRecurringProperties }) } export const trackSignOutEvent = (id: string, consent: boolean) => { if (!consent) return mixpanel.identify(id) - mixpanel.track('Signed out', { ...eventsRecurringProperties }) + mixpanel.track('Signed Out', { ...eventsRecurringProperties }) } export const trackTrialEnablementEvent = ( @@ -174,3 +175,16 @@ export const trackExportEvent = ( ...eventsRecurringProperties, }) } + +export const trackActionEvent = ( + id: string, + consent: boolean, + options: ActionEvent +) => { + if (!consent) return + mixpanel.identify(id) + mixpanel.track('Action Triggered', { + Feature: options.feature, + ...eventsRecurringProperties, + }) +} diff --git a/src/utils/palettePackage.ts b/src/utils/palettePackage.ts index 4cb09999c..3e9dec2e0 100644 --- a/src/utils/palettePackage.ts +++ b/src/utils/palettePackage.ts @@ -37,19 +37,16 @@ export const presets: Array = [ id: 'ANT', }, { - name: 'ADS Foundations, 50-500 (Atlassian)', - scale: [50, 75, 100, 200, 300, 400, 500], + name: 'ADS Foundations, 100-1000 (Atlassian)', + scale: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000], min: 24, max: 96, isDistributed: true, id: 'ADS', }, { - name: 'ADS Foundations, Neutral 50-500 (Atlassian)', - scale: [ - 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 200, 300, 400, 500, 600, 700, - 800, 900, - ], + name: 'ADS Foundations, Neutral 0-1100 (Atlassian)', + scale: [0, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100], min: 8, max: 100, isDistributed: true, diff --git a/src/utils/setPaletteMigration.ts b/src/utils/setPaletteMigration.ts index d855eabe8..b2dd5977e 100644 --- a/src/utils/setPaletteMigration.ts +++ b/src/utils/setPaletteMigration.ts @@ -70,6 +70,14 @@ const setPaletteMigration = async (palette: BaseNode) => { if (!Object.prototype.hasOwnProperty.call(colorsObject[0], 'hueShifting')) palette.setPluginData('colors', setData(colorsObject, 'hueShifting', 0)) + if ( + !Object.prototype.hasOwnProperty.call(colorsObject[0], 'chromaShifting') + ) + palette.setPluginData( + 'colors', + setData(colorsObject, 'chromaShifting', 100) + ) + if (!Object.prototype.hasOwnProperty.call(colorsObject[0], 'description')) palette.setPluginData('colors', setData(colorsObject, 'description', ''))