From 4378abd9bf18daa17dd7e0f6f84327bec3a4c79d Mon Sep 17 00:00:00 2001 From: Dmitry Lekomtsev Date: Wed, 16 Feb 2022 00:55:58 +0300 Subject: [PATCH 1/3] chore: add typescript-coverage workflow --- .github/workflows/typescript-coverage.yml | 33 +++++++++++++++++++++++ .gitignore | 1 + package.json | 3 ++- 3 files changed, 36 insertions(+), 1 deletion(-) create mode 100644 .github/workflows/typescript-coverage.yml diff --git a/.github/workflows/typescript-coverage.yml b/.github/workflows/typescript-coverage.yml new file mode 100644 index 000000000..7e85794b9 --- /dev/null +++ b/.github/workflows/typescript-coverage.yml @@ -0,0 +1,33 @@ +name: Typescript coverage + +on: push + +jobs: + typescript-coverage: + runs-on: ubuntu-latest + env: + NPM_REGISTRY_TOKEN: ${{ secrets.NPM_REGISTRY_TOKEN }} + steps: + - uses: actions/checkout@v2 + + - name: Use Node.js 12.x + uses: actions/setup-node@v1 + with: + node-version: 12.x + + - name: Setup packages + run: | + npm i + npx lerna bootstrap + + - name: Run Typescript Coverage + if: ${{ always() }} + run: | + npm run typescript-coverage + + - name: Save artifacts + if: ${{ always() }} + uses: actions/upload-artifact@v2 + with: + name: Typescript Coverage Report Artifacts + path: /home/runner/work/plasma/plasma/packages/**/coverage-ts/ diff --git a/.gitignore b/.gitignore index e8144c2a2..f9f130618 100644 --- a/.gitignore +++ b/.gitignore @@ -9,3 +9,4 @@ cypress/videos cypress/results .nyc_output coverage +coverage-ts diff --git a/package.json b/package.json index a4cc21338..ff81b8547 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,8 @@ "build-docz": "lerna bootstrap --scope=@sberdevices/ui && lerna run docz:build", "extract-docgen-info": "lerna run extract-docgen-info", "lint": "eslint --ext .js,.ts,.tsx .", - "test": "lerna run test" + "test": "lerna run test", + "typescript-coverage": "lerna run typescript-coverage --no-bail" }, "devDependencies": { "@actions/core": "1.2.7", From 1d22d5e9a5f7e0cb1a128d4f33117983efba9e04 Mon Sep 17 00:00:00 2001 From: Dmitry Lekomtsev Date: Wed, 16 Feb 2022 09:07:24 +0300 Subject: [PATCH 2/3] chore(plasma-web): add typecoverage script --- packages/plasma-web/package-lock.json | 257 ++++++++++++++++++++++++++ packages/plasma-web/package.json | 36 ++-- 2 files changed, 268 insertions(+), 25 deletions(-) diff --git a/packages/plasma-web/package-lock.json b/packages/plasma-web/package-lock.json index 74604dcc1..0121a5c2c 100644 --- a/packages/plasma-web/package-lock.json +++ b/packages/plasma-web/package-lock.json @@ -1591,6 +1591,16 @@ "@hapi/hoek": "^8.3.0" } }, + "@hypnosphi/create-react-context": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/@hypnosphi/create-react-context/-/create-react-context-0.3.1.tgz", + "integrity": "sha512-V1klUed202XahrWJLLOT3EXNeCpFHCcJntdFGI15ntCwau+jfT386w7OFTMaCqOgXUH1fa0w/I1oZs+i/Rfr0A==", + "dev": true, + "requires": { + "gud": "^1.0.0", + "warning": "^4.0.3" + } + }, "@istanbuljs/load-nyc-config": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz", @@ -3339,6 +3349,37 @@ "integrity": "sha512-0R8ZTtGsWq417NB7B+HQWn7bUlxeF83aqmSNkUwBXvfSVgl+GW+DAMe0u4BDpmonKdQCEQGYcbPcTgHu9BHfEA==", "dev": true }, + "@semantic-ui-react/event-stack": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/@semantic-ui-react/event-stack/-/event-stack-3.1.2.tgz", + "integrity": "sha512-Yd0Qf7lPCIjzJ9bZYfurlNu2RDXT6KKSyubHfYK3WjRauhxCsq6Fk2LMRI9DEvShoEU+AsLSv3NGkqXAcVp0zg==", + "dev": true, + "requires": { + "exenv": "^1.2.2", + "prop-types": "^15.6.2" + } + }, + "@stardust-ui/react-component-event-listener": { + "version": "0.38.0", + "resolved": "https://registry.npmjs.org/@stardust-ui/react-component-event-listener/-/react-component-event-listener-0.38.0.tgz", + "integrity": "sha512-sIP/e0dyOrrlb8K7KWumfMxj/gAifswTBC4o68Aa+C/GA73ccRp/6W1VlHvF/dlOR4KLsA+5SKnhjH36xzPsWg==", + "dev": true, + "requires": { + "@babel/runtime": "^7.1.2", + "prop-types": "^15.7.2" + } + }, + "@stardust-ui/react-component-ref": { + "version": "0.38.0", + "resolved": "https://registry.npmjs.org/@stardust-ui/react-component-ref/-/react-component-ref-0.38.0.tgz", + "integrity": "sha512-xjs6WnvJVueSIXMWw0C3oWIgAPpcD03qw43oGOjUXqFktvpNkB73JoKIhS4sCrtQxBdct75qqr4ZL6JiyPcESw==", + "dev": true, + "requires": { + "@babel/runtime": "^7.1.2", + "prop-types": "^15.7.2", + "react-is": "^16.6.3" + } + }, "@storybook/addon-actions": { "version": "6.3.8", "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-6.3.8.tgz", @@ -8395,6 +8436,12 @@ } } }, + "classnames": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz", + "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==", + "dev": true + }, "clean-css": { "version": "4.2.3", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz", @@ -11047,6 +11094,12 @@ "strip-eof": "^1.0.0" } }, + "exenv": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz", + "integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50=", + "dev": true + }, "exit": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz", @@ -15962,6 +16015,12 @@ "integrity": "sha512-pBxcB3LFc8QVgdggvZWyeys+hnrNWg4OcZIU/1X59k5jQdLBlCsYGRQaz234SqoRLTCgMH00fY0xRJH+F9METQ==", "dev": true }, + "keyboard-key": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/keyboard-key/-/keyboard-key-1.1.0.tgz", + "integrity": "sha512-qkBzPTi3rlAKvX7k0/ub44sqOfXeLc/jcnGGmj5c7BJpU8eDrEVPyhCvNYAaoubbsLm9uGWwQJO1ytQK1a9/dQ==", + "dev": true + }, "killable": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz", @@ -16867,6 +16926,12 @@ "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=", "dev": true }, + "ncp": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ncp/-/ncp-2.0.0.tgz", + "integrity": "sha1-GVoh1sRuNh0vsSgbo4uR6d9727M=", + "dev": true + }, "negotiator": { "version": "0.6.2", "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz", @@ -17812,6 +17877,12 @@ "@babel/runtime": "^7.14.0" } }, + "popper.js": { + "version": "1.16.1", + "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz", + "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==", + "dev": true + }, "portfinder": { "version": "1.0.28", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz", @@ -21753,6 +21824,42 @@ "node-forge": "^0.10.0" } }, + "semantic-ui-react": { + "version": "0.88.2", + "resolved": "https://registry.npmjs.org/semantic-ui-react/-/semantic-ui-react-0.88.2.tgz", + "integrity": "sha512-+02kN2z8PuA/cMdvDUsHhbJmBzxxgOXVHMFr9XK7zGb0wkW9A6OPQMFokWz7ozlVtKjN6r7zsb+Qvjk/qq1OWw==", + "dev": true, + "requires": { + "@babel/runtime": "^7.1.2", + "@semantic-ui-react/event-stack": "^3.1.0", + "@stardust-ui/react-component-event-listener": "~0.38.0", + "@stardust-ui/react-component-ref": "~0.38.0", + "classnames": "^2.2.6", + "keyboard-key": "^1.0.4", + "lodash": "^4.17.15", + "prop-types": "^15.7.2", + "react-is": "^16.8.6", + "react-popper": "^1.3.4", + "shallowequal": "^1.1.0" + }, + "dependencies": { + "react-popper": { + "version": "1.3.11", + "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.11.tgz", + "integrity": "sha512-VSA/bS+pSndSF2fiasHK/PTEEAyOpX60+H5EPAjoArr8JGm+oihu4UbrqcEBpQibJxBVCpYyjAX7abJ+7DoYVg==", + "dev": true, + "requires": { + "@babel/runtime": "^7.1.2", + "@hypnosphi/create-react-context": "^0.3.1", + "deep-equal": "^1.1.1", + "popper.js": "^1.14.4", + "prop-types": "^15.6.1", + "typed-styles": "^0.0.7", + "warning": "^4.0.2" + } + } + } + }, "semver": { "version": "5.7.1", "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", @@ -23449,6 +23556,19 @@ "prelude-ls": "~1.1.2" } }, + "type-coverage-core": { + "version": "2.21.0", + "resolved": "https://registry.npmjs.org/type-coverage-core/-/type-coverage-core-2.21.0.tgz", + "integrity": "sha512-VNC7Ig0KAzpYjWvxQ1SaMufEqSm4GPSsdVaCWA5fRHSjSvkXbPVK+C6H0lIq2t8brkrvnXk7iDs9g4sjux6JQw==", + "dev": true, + "requires": { + "fast-glob": "3", + "minimatch": "3", + "normalize-path": "3", + "tslib": "1 || 2", + "tsutils": "3" + } + }, "type-fest": { "version": "0.8.1", "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz", @@ -23465,6 +23585,12 @@ "mime-types": "~2.1.24" } }, + "typed-styles": { + "version": "0.0.7", + "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.7.tgz", + "integrity": "sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q==", + "dev": true + }, "typedarray": { "version": "0.0.6", "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz", @@ -23486,6 +23612,137 @@ "integrity": "sha512-w6fIxVE/H1PkLKcCPsFqKE7Kv7QUwhU8qQY2MueZXWx5cPZdwFupLgKK3vntcK98BtNHZtAF4LA/yl2a7k8R6Q==", "dev": true }, + "typescript-coverage-report": { + "version": "0.6.4", + "resolved": "https://registry.npmjs.org/typescript-coverage-report/-/typescript-coverage-report-0.6.4.tgz", + "integrity": "sha512-G+0OFYxwN5oRbORlU1nKYtO00G567lcl4+nbg3MU3Y9ayFnh677dMHmAL4JGP/4Cb1IBN5h/DUQDr/z9X+9lag==", + "dev": true, + "requires": { + "chalk": "^4.0.0", + "cli-table3": "^0.6.1", + "commander": "^5.0.0", + "ncp": "^2.0.0", + "react": "^16.13.1", + "react-dom": "^16.13.1", + "rimraf": "^3.0.2", + "semantic-ui-react": "^0.88.2", + "type-coverage-core": "^2.17.2" + }, + "dependencies": { + "ansi-regex": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", + "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", + "dev": true + }, + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "requires": { + "color-convert": "^2.0.1" + } + }, + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, + "cli-table3": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/cli-table3/-/cli-table3-0.6.1.tgz", + "integrity": "sha512-w0q/enDHhPLq44ovMGdQeeDLvwxwavsJX7oQGYt/LrBlYsyaxyDnp6z3QzFut/6kLLKnlcUVJLrpB7KBfgG/RA==", + "dev": true, + "requires": { + "colors": "1.4.0", + "string-width": "^4.2.0" + } + }, + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "requires": { + "color-name": "~1.1.4" + } + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "commander": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz", + "integrity": "sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==", + "dev": true + }, + "emoji-regex": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", + "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", + "dev": true + }, + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true + }, + "is-fullwidth-code-point": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", + "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==", + "dev": true + }, + "rimraf": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz", + "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==", + "dev": true, + "requires": { + "glob": "^7.1.3" + } + }, + "string-width": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", + "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", + "dev": true, + "requires": { + "emoji-regex": "^8.0.0", + "is-fullwidth-code-point": "^3.0.0", + "strip-ansi": "^6.0.1" + } + }, + "strip-ansi": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", + "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "dev": true, + "requires": { + "ansi-regex": "^5.0.1" + } + }, + "supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "requires": { + "has-flag": "^4.0.0" + } + } + } + }, "unbox-primitive": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz", diff --git a/packages/plasma-web/package.json b/packages/plasma-web/package.json index 635d4ef49..c1debe187 100644 --- a/packages/plasma-web/package.json +++ b/packages/plasma-web/package.json @@ -4,27 +4,11 @@ "description": "SberDevices Design System / React UI kit for web applications", "author": "SberDevices Frontend Team ", "license": "Sber Public License at-nc-sa v.2", - "keywords": [ - "design-system", - "react-components", - "ui-kit", - "react" - ], + "keywords": ["design-system", "react-components", "ui-kit", "react"], "main": "index.js", "module": "es/index.js", "types": "index.d.ts", - "files": [ - "components", - "es", - "hocs", - "hooks", - "mixins", - "tokens", - "types", - "utils", - "index.d.ts", - "index.js" - ], + "files": ["components", "es", "hocs", "hooks", "mixins", "tokens", "types", "utils", "index.d.ts", "index.js"], "repository": { "type": "git", "url": "ssh://git@github.com:sberdevices/plasma.git", @@ -72,7 +56,8 @@ "react-dom": "16.13.1", "react-scripts": "3.4.4", "styled-components": "5.3.1", - "typescript": "3.9.10" + "typescript": "3.9.10", + "typescript-coverage-report": "0.6.4" }, "publishConfig": { "access": "public" @@ -86,12 +71,13 @@ "build:esm": "BABEL_ENV=esm SC_NAMESPACE=plasma-web babel ./src --out-dir ./es --source-maps --extensions .ts,.tsx", "storybook": "start-storybook -s .storybook/public -p ${PORT:-7007} -c .storybook", "storybook:build": "build-storybook -s .storybook/public -c .storybook -o build-sb", - "storybook:build:docs": "DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs" + "storybook:build:docs": "DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs", + "typescript-coverage": "npx typescript-coverage-report || echo 'See artifacts'" }, - "contributors": [ - "Vasiliy Loginevskiy", - "Anton Vinogradov", - "Fanil Zubairov" - ], + "typeCoverage": { + "ignoreFiles": ["src/**/*component-test.tsx", "src/**/*stories.tsx"], + "atLeast": 100 + }, + "contributors": ["Vasiliy Loginevskiy", "Anton Vinogradov", "Fanil Zubairov"], "sideEffects": false } From de116b8f28750a8a8beebf66be475dc0c779e751 Mon Sep 17 00:00:00 2001 From: Dmitry Lekomtsev Date: Wed, 16 Feb 2022 09:08:36 +0300 Subject: [PATCH 3/3] feat(plasma-web): increase type coverage --- packages/plasma-web/package.json | 2 +- packages/plasma-web/src/components/Dropdown/Dropdown.tsx | 4 ++-- .../plasma-web/src/components/Dropdown/DropdownItem.tsx | 4 ++-- .../plasma-web/src/components/Select/SelectDropdown.tsx | 6 +++--- .../plasma-web/src/components/Select/withMultiSelect.tsx | 6 ++++-- .../plasma-web/src/components/Select/withSingleSelect.tsx | 6 ++++-- packages/plasma-web/src/tokens/typography.ts | 4 ++-- 7 files changed, 18 insertions(+), 14 deletions(-) diff --git a/packages/plasma-web/package.json b/packages/plasma-web/package.json index c1debe187..1a15440c5 100644 --- a/packages/plasma-web/package.json +++ b/packages/plasma-web/package.json @@ -72,7 +72,7 @@ "storybook": "start-storybook -s .storybook/public -p ${PORT:-7007} -c .storybook", "storybook:build": "build-storybook -s .storybook/public -c .storybook -o build-sb", "storybook:build:docs": "DOCS=true build-storybook --quiet -s .storybook/public -c .storybook -o build-sb-docs --docs", - "typescript-coverage": "npx typescript-coverage-report || echo 'See artifacts'" + "typescript-coverage": "npx typescript-coverage-report" }, "typeCoverage": { "ignoreFiles": ["src/**/*component-test.tsx", "src/**/*stories.tsx"], diff --git a/packages/plasma-web/src/components/Dropdown/Dropdown.tsx b/packages/plasma-web/src/components/Dropdown/Dropdown.tsx index 702171297..b30273435 100644 --- a/packages/plasma-web/src/components/Dropdown/Dropdown.tsx +++ b/packages/plasma-web/src/components/Dropdown/Dropdown.tsx @@ -55,7 +55,7 @@ export const Dropdown: FC = ({ const [isOpen, setIsOpen] = useState(false); const onItemClick = useCallback( - (item) => { + (item: DropdownItemType) => { setIsOpen(false); onItemClickExternal?.(item); }, @@ -63,7 +63,7 @@ export const Dropdown: FC = ({ ); const onToggle = useCallback( - (newIsOpen) => { + (newIsOpen: boolean) => { if (hasItems) { setIsOpen(newIsOpen); } diff --git a/packages/plasma-web/src/components/Dropdown/DropdownItem.tsx b/packages/plasma-web/src/components/Dropdown/DropdownItem.tsx index 730431e77..4ce35fe40 100644 --- a/packages/plasma-web/src/components/Dropdown/DropdownItem.tsx +++ b/packages/plasma-web/src/components/Dropdown/DropdownItem.tsx @@ -130,12 +130,12 @@ export const DropdownItem: FC = ({ return null; }, [isActive, isActiveNode, hasItems]); - const onClick = useCallback( + const onClick = useCallback>( (event) => { event.preventDefault(); const targetIsItem = event.target === itemRef.current; - const targetInItem = itemRef.current?.contains(event.target); + const targetInItem = itemRef.current?.contains(event.target as Node); if (value !== undefined && !isDisabled && (targetIsItem || targetInItem)) { onClickExternal?.({ value, label }); diff --git a/packages/plasma-web/src/components/Select/SelectDropdown.tsx b/packages/plasma-web/src/components/Select/SelectDropdown.tsx index 2af66abc7..9c54a21c6 100644 --- a/packages/plasma-web/src/components/Select/SelectDropdown.tsx +++ b/packages/plasma-web/src/components/Select/SelectDropdown.tsx @@ -1,7 +1,7 @@ import React, { FC, useState, useCallback } from 'react'; import styled, { css } from 'styled-components'; -import { DropdownList, DropdownItem } from '../Dropdown'; +import { DropdownList, DropdownItem, DropdownItemType } from '../Dropdown'; import { Popup } from '../Popup'; import { SelectArrow } from './SelectArrow'; @@ -44,7 +44,7 @@ export const SelectDropdown: FC = ({ const hasItems = Array.isArray(items) && items.length > 0; const onItemClick = useCallback( - (item) => { + (item: DropdownItemType) => { if (!multiselect) { setIsOpen(false); } @@ -53,7 +53,7 @@ export const SelectDropdown: FC = ({ [multiselect, onItemClickExternal], ); const onToggle = useCallback( - (newIsOpen) => { + (newIsOpen: boolean) => { if (newIsOpen && (!hasItems || disabled)) { return; } diff --git a/packages/plasma-web/src/components/Select/withMultiSelect.tsx b/packages/plasma-web/src/components/Select/withMultiSelect.tsx index ae40c7959..75d41a1ef 100644 --- a/packages/plasma-web/src/components/Select/withMultiSelect.tsx +++ b/packages/plasma-web/src/components/Select/withMultiSelect.tsx @@ -1,6 +1,8 @@ import React, { forwardRef, useCallback, useMemo } from 'react'; import type { ComponentType, RefAttributes } from 'react'; +import { DropdownItem, DropdownNode } from '../Dropdown/Dropdown.types'; + import { flattenItemsRecursive, setActiveRecursive } from './Select.utils'; import type { SelectRefElement, SelectViewProps } from './Select.types'; @@ -25,7 +27,7 @@ export interface MultiSelectProps extends Omit>) => forwardRef( ({ value, items = [], separator = ', ', onChange, ...rest }, ref) => { - const isActive = useCallback((item) => Boolean(value && value.includes(item.value)), [value]); + const isActive = useCallback((item: DropdownNode) => Boolean(value && value.includes(item.value)), [value]); const viewValue = useMemo( () => @@ -39,7 +41,7 @@ export const withMultiSelect = (View: ComponentType setActiveRecursive(items, isActive), [value, items, isActive]); const onItemClick = useCallback( - (item) => { + (item: DropdownItem) => { const set = new Set(value); if (set.has(item.value)) { diff --git a/packages/plasma-web/src/components/Select/withSingleSelect.tsx b/packages/plasma-web/src/components/Select/withSingleSelect.tsx index e25f5e65f..d305763c7 100644 --- a/packages/plasma-web/src/components/Select/withSingleSelect.tsx +++ b/packages/plasma-web/src/components/Select/withSingleSelect.tsx @@ -1,6 +1,8 @@ import React, { forwardRef, useCallback, useMemo } from 'react'; import type { ComponentType, RefAttributes } from 'react'; +import { DropdownItem, DropdownNode } from '../Dropdown/Dropdown.types'; + import { flattenItemsRecursive, setActiveRecursive } from './Select.utils'; import type { SelectRefElement, SelectViewProps } from './Select.types'; @@ -20,7 +22,7 @@ export interface SingleSelectProps extends Omit>) => forwardRef(({ value, items = [], onChange, ...rest }, ref) => { - const isActive = useCallback((item) => item.value === value, [value]); + const isActive = useCallback((item: DropdownNode) => item.value === value, [value]); const viewValue = useMemo(() => flattenItemsRecursive(items).find(isActive)?.label ?? '', [ value, @@ -30,7 +32,7 @@ export const withSingleSelect = (View: ComponentType setActiveRecursive(items, isActive), [value, items, isActive]); - const onItemClick = useCallback((item) => onChange?.(item.value), [onChange]); + const onItemClick = useCallback((item: DropdownItem) => onChange?.(item.value), [onChange]); return ; }); diff --git a/packages/plasma-web/src/tokens/typography.ts b/packages/plasma-web/src/tokens/typography.ts index 64a567426..72f0507c5 100644 --- a/packages/plasma-web/src/tokens/typography.ts +++ b/packages/plasma-web/src/tokens/typography.ts @@ -1,4 +1,4 @@ -export const headline5: any = { +export const headline5: Record = { fontFamily: "var(--plasma-typo-headline5-font-family, 'SB Sans Text',sans-serif)", fontWeight: 'var(--plasma-typo-headline5-font-weight, 600)', fontStyle: 'var(--plasma-typo-headline5-font-style, normal)', @@ -6,7 +6,7 @@ export const headline5: any = { letterSpacing: 'var(--plasma-typo-headline5-letter-spacing, -0.0190em)', lineHeight: 'var(--plasma-typo-headline5-line-height, 1.25rem)', }; -export const subtitle: any = { +export const subtitle: Record = { fontFamily: "var(--plasma-typo-subtitle-font-family, 'SB Sans Text',sans-serif)", fontWeight: 'var(--plasma-typo-subtitle-font-weight, 400)', fontStyle: 'var(--plasma-typo-subtitle-font-style, normal)',