From 01d1e9590bef9f9fd01b2c3fd74210cd6b1c2ff0 Mon Sep 17 00:00:00 2001 From: Daniel Kostro Date: Fri, 24 Jan 2025 11:01:28 +0100 Subject: [PATCH 1/3] chore: move @blueprintjs/select to peer dependencies Closes: https://github.com/zakodium-oss/react-science/issues/853 --- package-lock.json | 37 ++++++++++++++++++++++++++++++++++--- package.json | 3 ++- 2 files changed, 36 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7b06f351..24a7a992 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,6 @@ "version": "12.1.0", "license": "MIT", "dependencies": { - "@blueprintjs/select": "^5.3.5", "@emotion/styled": "^11.13.5", "@tanstack/react-table": "^8.20.5", "@tanstack/react-virtual": "^3.10.9", @@ -24,6 +23,7 @@ "devDependencies": { "@blueprintjs/core": "^5.16.0", "@blueprintjs/icons": "^5.15.0", + "@blueprintjs/select": "^5.3.5", "@floating-ui/react": "^0.26.28", "@playwright/experimental-ct-react": "^1.49.0", "@playwright/test": "^1.49.0", @@ -80,6 +80,7 @@ "peerDependencies": { "@blueprintjs/core": "^5.16.0", "@blueprintjs/icons": "^5.15.0", + "@blueprintjs/select": "^5.3.5", "fifo-logger": "^1.0.0", "react": ">=18.0.0", "react-dom": ">=18.0.0" @@ -392,6 +393,7 @@ "version": "5.1.4", "resolved": "https://registry.npmjs.org/@blueprintjs/colors/-/colors-5.1.4.tgz", "integrity": "sha512-OBRswl1v/AQXtx8PLP6PhZX+xY+Q/LP/eQATQi/ZUCrNbE0ZkMXQRS9PK/7ZVllnQqcACkC4x/JVthkzkLoG2g==", + "dev": true, "license": "Apache-2.0", "dependencies": { "tslib": "~2.6.2" @@ -401,6 +403,7 @@ "version": "5.16.0", "resolved": "https://registry.npmjs.org/@blueprintjs/core/-/core-5.16.0.tgz", "integrity": "sha512-umWvCL9iHP01AO11fILCLK8ZT8mkOouSC+MFwk4cVx8HElxLoUFCf64lUFSQpQMPyNKICYJ4qBrN/hKsez11lQ==", + "dev": true, "license": "Apache-2.0", "dependencies": { "@blueprintjs/colors": "^5.1.4", @@ -433,6 +436,7 @@ "version": "5.15.0", "resolved": "https://registry.npmjs.org/@blueprintjs/icons/-/icons-5.15.0.tgz", "integrity": "sha512-5OiDY0hdQwfljfo9ynmmUBh3ibXTDuJ74WpwCakTr4hD9zGMhpzjnpEoZMfrMCsKZubGBiOFcT5riPljrDpdLw==", + "dev": true, "license": "Apache-2.0", "dependencies": { "change-case": "^4.1.2", @@ -454,6 +458,7 @@ "version": "5.3.5", "resolved": "https://registry.npmjs.org/@blueprintjs/select/-/select-5.3.5.tgz", "integrity": "sha512-oULOvtnFHiaXPWahyQg0XFc2YhZrY1FPOuHq3fDKyb1MukYEYshy+L4gHUA5gnVBxv6543Oi7m7ErxGE3bcJmQ==", + "dev": true, "license": "Apache-2.0", "dependencies": { "@blueprintjs/core": "^5.16.0", @@ -1679,6 +1684,7 @@ "version": "2.11.8", "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "dev": true, "license": "MIT", "funding": { "type": "opencollective", @@ -2717,14 +2723,14 @@ "version": "15.7.13", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz", "integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==", - "devOptional": true, + "dev": true, "license": "MIT" }, "node_modules/@types/react": { "version": "18.3.12", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.12.tgz", "integrity": "sha512-D2wOSq/d6Agt28q7rSI3jhU7G6aiuzljDGZ2hTZHIkrTLUI+AF3WMeKkEZ9nN2fkBAlcktT6vcZjDFiIhMYEQw==", - "devOptional": true, + "dev": true, "license": "MIT", "dependencies": { "@types/prop-types": "*", @@ -3692,6 +3698,7 @@ "version": "4.1.2", "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz", "integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==", + "dev": true, "license": "MIT", "dependencies": { "pascal-case": "^3.1.2", @@ -3723,6 +3730,7 @@ "version": "1.0.4", "resolved": "https://registry.npmjs.org/capital-case/-/capital-case-1.0.4.tgz", "integrity": "sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==", + "dev": true, "license": "MIT", "dependencies": { "no-case": "^3.0.4", @@ -3768,6 +3776,7 @@ "version": "4.1.2", "resolved": "https://registry.npmjs.org/change-case/-/change-case-4.1.2.tgz", "integrity": "sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A==", + "dev": true, "license": "MIT", "dependencies": { "camel-case": "^4.1.2", @@ -3842,6 +3851,7 @@ "version": "2.5.1", "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz", "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==", + "dev": true, "license": "MIT" }, "node_modules/clean-regexp": { @@ -3915,6 +3925,7 @@ "version": "3.0.4", "resolved": "https://registry.npmjs.org/constant-case/-/constant-case-3.0.4.tgz", "integrity": "sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ==", + "dev": true, "license": "MIT", "dependencies": { "no-case": "^3.0.4", @@ -4346,6 +4357,7 @@ "version": "5.2.1", "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", + "dev": true, "license": "MIT", "dependencies": { "@babel/runtime": "^7.8.7", @@ -4356,6 +4368,7 @@ "version": "3.0.4", "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz", "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==", + "dev": true, "license": "MIT", "dependencies": { "no-case": "^3.0.4", @@ -5919,6 +5932,7 @@ "version": "2.0.4", "resolved": "https://registry.npmjs.org/header-case/-/header-case-2.0.4.tgz", "integrity": "sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==", + "dev": true, "license": "MIT", "dependencies": { "capital-case": "^1.0.4", @@ -6921,6 +6935,7 @@ "version": "2.0.2", "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==", + "dev": true, "license": "MIT", "dependencies": { "tslib": "^2.0.3" @@ -7562,6 +7577,7 @@ "version": "3.0.4", "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz", "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==", + "dev": true, "license": "MIT", "dependencies": { "lower-case": "^2.0.2", @@ -7612,6 +7628,7 @@ "version": "8.0.1", "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz", "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==", + "dev": true, "license": "MIT" }, "node_modules/nucleotide": { @@ -7883,6 +7900,7 @@ "version": "3.0.4", "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz", "integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==", + "dev": true, "license": "MIT", "dependencies": { "dot-case": "^3.0.4", @@ -7937,6 +7955,7 @@ "version": "3.1.2", "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz", "integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==", + "dev": true, "license": "MIT", "dependencies": { "no-case": "^3.0.4", @@ -7947,6 +7966,7 @@ "version": "3.0.4", "resolved": "https://registry.npmjs.org/path-case/-/path-case-3.0.4.tgz", "integrity": "sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg==", + "dev": true, "license": "MIT", "dependencies": { "dot-case": "^3.0.4", @@ -8460,6 +8480,7 @@ "version": "3.2.2", "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz", "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==", + "dev": true, "license": "MIT" }, "node_modules/react-icons": { @@ -8541,6 +8562,7 @@ "version": "2.3.0", "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz", "integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==", + "dev": true, "license": "MIT", "dependencies": { "react-fast-compare": "^3.0.1", @@ -8566,6 +8588,7 @@ "version": "4.4.5", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", + "dev": true, "license": "BSD-3-Clause", "dependencies": { "@babel/runtime": "^7.5.5", @@ -8595,6 +8618,7 @@ "version": "2.3.3", "resolved": "https://registry.npmjs.org/react-uid/-/react-uid-2.3.3.tgz", "integrity": "sha512-iNpDovcb9qBpBTo8iUgqRSQOS8GV3bWoNaTaUptHkXtAooXSo0OWe7vN6TqqB8x3x0bNBbQx96kkmSltQ5h9kQ==", + "dev": true, "license": "MIT", "dependencies": { "tslib": "^2.0.0" @@ -9108,6 +9132,7 @@ "version": "3.0.4", "resolved": "https://registry.npmjs.org/sentence-case/-/sentence-case-3.0.4.tgz", "integrity": "sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg==", + "dev": true, "license": "MIT", "dependencies": { "no-case": "^3.0.4", @@ -9257,6 +9282,7 @@ "version": "3.0.4", "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz", "integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==", + "dev": true, "license": "MIT", "dependencies": { "dot-case": "^3.0.4", @@ -10279,6 +10305,7 @@ "version": "2.6.3", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz", "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==", + "dev": true, "license": "0BSD" }, "node_modules/type-check": { @@ -10505,6 +10532,7 @@ "version": "2.0.2", "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-2.0.2.tgz", "integrity": "sha512-KgdgDGJt2TpuwBUIjgG6lzw2GWFRCW9Qkfkiv0DxqHHLYJHmtmdUIKcZd8rHgFSjopVTlw6ggzCm1b8MFQwikg==", + "dev": true, "license": "MIT", "dependencies": { "tslib": "^2.0.3" @@ -10514,6 +10542,7 @@ "version": "2.0.2", "resolved": "https://registry.npmjs.org/upper-case-first/-/upper-case-first-2.0.2.tgz", "integrity": "sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==", + "dev": true, "license": "MIT", "dependencies": { "tslib": "^2.0.3" @@ -10546,6 +10575,7 @@ "version": "1.2.2", "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz", "integrity": "sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==", + "dev": true, "license": "MIT", "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0" @@ -11206,6 +11236,7 @@ "version": "4.0.3", "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "dev": true, "license": "MIT", "dependencies": { "loose-envify": "^1.0.0" diff --git a/package.json b/package.json index b5a146ba..e410a115 100644 --- a/package.json +++ b/package.json @@ -50,12 +50,12 @@ "peerDependencies": { "@blueprintjs/core": "^5.16.0", "@blueprintjs/icons": "^5.15.0", + "@blueprintjs/select": "^5.3.5", "fifo-logger": "^1.0.0", "react": ">=18.0.0", "react-dom": ">=18.0.0" }, "dependencies": { - "@blueprintjs/select": "^5.3.5", "@emotion/styled": "^11.13.5", "@tanstack/react-table": "^8.20.5", "@tanstack/react-virtual": "^3.10.9", @@ -70,6 +70,7 @@ "devDependencies": { "@blueprintjs/core": "^5.16.0", "@blueprintjs/icons": "^5.15.0", + "@blueprintjs/select": "^5.3.5", "@floating-ui/react": "^0.26.28", "@playwright/experimental-ct-react": "^1.49.0", "@playwright/test": "^1.49.0", From 49becb580f4046d614f640a56a718d493a2f9ac7 Mon Sep 17 00:00:00 2001 From: Daniel Kostro Date: Fri, 24 Jan 2025 11:13:46 +0100 Subject: [PATCH 2/3] chore: import blueprint-select css in storybook and app setups --- .storybook/preview.ts | 1 + src/pages/demo/App.tsx | 1 + stories/components/select.stories.tsx | 12 +++++++----- 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/.storybook/preview.ts b/.storybook/preview.ts index cd740325..de45b0f3 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -4,6 +4,7 @@ import { RootLayoutDecorator } from '../stories/utils.js'; import '../styles/storybook-globals.css'; import '../styles/preflight.css'; import '@blueprintjs/core/lib/css/blueprint.css'; +import '@blueprintjs/select/lib/css/blueprint-select.css'; import '@blueprintjs/icons/lib/css/blueprint-icons.css'; const preview: Preview = { diff --git a/src/pages/demo/App.tsx b/src/pages/demo/App.tsx index 61bc23af..4878b015 100644 --- a/src/pages/demo/App.tsx +++ b/src/pages/demo/App.tsx @@ -11,6 +11,7 @@ import { import MainLayout from './MainLayout.js'; import '@blueprintjs/core/lib/css/blueprint.css'; +import '@blueprintjs/select/lib/css/blueprint-select.css'; import '@blueprintjs/icons/lib/css/blueprint-icons.css'; import { queryClient } from './query_client.js'; diff --git a/stories/components/select.stories.tsx b/stories/components/select.stories.tsx index 201d806d..e409a304 100644 --- a/stories/components/select.stories.tsx +++ b/stories/components/select.stories.tsx @@ -387,10 +387,12 @@ export function WithCustomStyle() { ); } -const Row = styled.div({ - display: 'flex', - flexDirection: 'row', -}); +const Row = styled.div` + display: flex; + flex-direction: row; + align-items: center; + gap: 5px; +`; const Tag = styled.div({ borderRadius: '25px', @@ -417,7 +419,7 @@ export function WithCustomRenderItem() { > {label.charAt(0)} - {label} + {label} Date: Fri, 24 Jan 2025 11:25:14 +0100 Subject: [PATCH 3/3] docs: complete global css setup in readme --- README.md | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 1dad9657..59d98733 100644 --- a/README.md +++ b/README.md @@ -21,11 +21,19 @@ React components to build scientific applications UI. ### Global css -If you use tailwindcss and already you added `@tailwind base;` to your tailwind stylesheet, you can skip this step. +Import the preflight css stylesheet, unless you use tailwindcss and you already added `@tailwind base;` to your tailwind stylesheet: -Otherwise, import the global styles in your application: +```js +import 'react-science/styles/preflight.css'; +``` + +Then import the blueprint stylesheets: -`import 'react-science/styles/preflight.css';` +```js +import '@blueprintjs/core/lib/css/blueprint.css'; +import '@blueprintjs/select/lib/css/blueprint-select.css'; +import '@blueprintjs/icons/lib/css/blueprint-icons.css'; +``` ## Introduction