diff --git a/.changeset/shiny-parents-shop.md b/.changeset/shiny-parents-shop.md new file mode 100644 index 00000000..6e4cfdad --- /dev/null +++ b/.changeset/shiny-parents-shop.md @@ -0,0 +1,5 @@ +--- +'@portaljs/components': minor +--- + +Implement component diff --git a/package-lock.json b/package-lock.json index 621d10ba..005c75f4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13812,6 +13812,33 @@ "node": ">= 10.0.0" } }, + "node_modules/adler-32": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.3.1.tgz", + "integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==", + "engines": { + "node": ">=0.8" + } + }, + "node_modules/ag-grid-community": { + "version": "30.0.3", + "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-30.0.3.tgz", + "integrity": "sha512-agfRVHELQqhnMfRplmYEYdxMxw3c8l5Bu7lNaCfIVOasyRlSAvH4Na8qru0ORaOUN3ClulfvKIuLSWwgGSwJJQ==", + "peer": true + }, + "node_modules/ag-grid-react": { + "version": "30.0.4", + "resolved": "https://registry.npmjs.org/ag-grid-react/-/ag-grid-react-30.0.4.tgz", + "integrity": "sha512-6N3O0avco1BVt5jLe6tD3GepvsmoxV4gvqHQ4SguYwqkfvO9IzN8GEOiVScLlAn1zvWjhCeSpnIYRi44bP3wqQ==", + "dependencies": { + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "ag-grid-community": "~30.0.3", + "react": "^16.3.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.3.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/agent-base": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz", @@ -15480,6 +15507,18 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/cfb": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.2.tgz", + "integrity": "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==", + "dependencies": { + "adler-32": "~1.3.0", + "crc-32": "~1.2.0" + }, + "engines": { + "node": ">=0.8" + } + }, "node_modules/chai": { "version": "4.3.7", "resolved": "https://registry.npmjs.org/chai/-/chai-4.3.7.tgz", @@ -15803,6 +15842,14 @@ "integrity": "sha512-q4dMFMlXtKR3XNBHyMHt/3pwYNA69EDk00lloMOaaUMKPUXBw6lpXtbu3MMVG6/uOihGnRDOlkyqsONEUj60+w==", "dev": true }, + "node_modules/codepage": { + "version": "1.15.0", + "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz", + "integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==", + "engines": { + "node": ">=0.8" + } + }, "node_modules/collect-v8-coverage": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz", @@ -16291,6 +16338,17 @@ "node": ">=10" } }, + "node_modules/crc-32": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz", + "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==", + "bin": { + "crc32": "bin/crc32.njs" + }, + "engines": { + "node": ">=0.8" + } + }, "node_modules/create-require": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz", @@ -16621,6 +16679,11 @@ "integrity": "sha512-PjiQ659aQ+fUTQqSrd1XEDnOr52jh30RBurfzkscaE2tPaFsDH5wOAHJiw8XAHphRknCwMUE9KRayc4K/NbO8A==", "dev": true }, + "node_modules/cuint": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/cuint/-/cuint-0.2.2.tgz", + "integrity": "sha512-d4ZVpCW31eWwCMe1YT3ur7mUDnTXbgwyzaL320DrcRT45rfjYxkt5QWLrmOJ+/UEAI2+fQgKe/fCjR8l4TpRgw==" + }, "node_modules/cypress": { "version": "12.9.0", "resolved": "https://registry.npmjs.org/cypress/-/cypress-12.9.0.tgz", @@ -20129,6 +20192,14 @@ "node": ">= 0.6" } }, + "node_modules/frac": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz", + "integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==", + "engines": { + "node": ">=0.8" + } + }, "node_modules/fraction.js": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz", @@ -28238,7 +28309,6 @@ "version": "3.1.0", "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz", "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==", - "dev": true, "dependencies": { "semver": "^6.0.0" }, @@ -32166,6 +32236,34 @@ "postcss": "^8.2.15" } }, + "node_modules/postcss-url": { + "version": "10.1.3", + "resolved": "https://registry.npmjs.org/postcss-url/-/postcss-url-10.1.3.tgz", + "integrity": "sha512-FUzyxfI5l2tKmXdYc6VTu3TWZsInayEKPbiyW+P6vmmIrrb4I6CGX0BFoewgYHLK+oIL5FECEK02REYRpBvUCw==", + "dependencies": { + "make-dir": "~3.1.0", + "mime": "~2.5.2", + "minimatch": "~3.0.4", + "xxhashjs": "~0.2.2" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "postcss": "^8.0.0" + } + }, + "node_modules/postcss-url/node_modules/mime": { + "version": "2.5.2", + "resolved": "https://registry.npmjs.org/mime/-/mime-2.5.2.tgz", + "integrity": "sha512-tqkh47FzKeCPD2PUiPB6pkbMzsCasjxAfC62/Wap5qrUWcb+sFasXUC5I3gYM5iBM8v/Qpn4UK0x+j0iHyFPDg==", + "bin": { + "mime": "cli.js" + }, + "engines": { + "node": ">=4.0.0" + } + }, "node_modules/postcss-value-parser": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", @@ -34352,7 +34450,6 @@ "version": "6.3.0", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", - "dev": true, "bin": { "semver": "bin/semver.js" } @@ -34962,6 +35059,17 @@ "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==", "dev": true }, + "node_modules/ssf": { + "version": "0.11.2", + "resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz", + "integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==", + "dependencies": { + "frac": "~1.1.2" + }, + "engines": { + "node": ">=0.8" + } + }, "node_modules/sshpk": { "version": "1.17.0", "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.17.0.tgz", @@ -38957,6 +39065,22 @@ "integrity": "sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw==", "dev": true }, + "node_modules/wmf": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz", + "integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==", + "engines": { + "node": ">=0.8" + } + }, + "node_modules/word": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/word/-/word-0.3.0.tgz", + "integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==", + "engines": { + "node": ">=0.8" + } + }, "node_modules/word-wrap": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz", @@ -39063,6 +39187,26 @@ } } }, + "node_modules/xlsx": { + "version": "0.18.5", + "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.18.5.tgz", + "integrity": "sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==", + "dependencies": { + "adler-32": "~1.3.0", + "cfb": "~1.2.1", + "codepage": "~1.15.0", + "crc-32": "~1.2.1", + "ssf": "~0.11.2", + "wmf": "~1.0.1", + "word": "~0.3.0" + }, + "bin": { + "xlsx": "bin/xlsx.njs" + }, + "engines": { + "node": ">=0.8" + } + }, "node_modules/xml-name-validator": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz", @@ -39091,6 +39235,14 @@ "node": ">=0.4" } }, + "node_modules/xxhashjs": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/xxhashjs/-/xxhashjs-0.2.2.tgz", + "integrity": "sha512-AkTuIuVTET12tpsVIQo+ZU6f/qDmKuRUcjaqR+OIvm+aCBsZ95i7UVY5WJ9TMsSaZ0DA2WxoZ4acu0sPH+OKAw==", + "dependencies": { + "cuint": "^0.2.2" + } + }, "node_modules/y18n": { "version": "5.0.8", "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz", @@ -39635,18 +39787,20 @@ }, "packages/components": { "name": "@portaljs/components", - "version": "0.1.12", + "version": "0.2.0", "dependencies": { "@githubocto/flat-ui": "^0.14.1", "@heroicons/react": "^2.0.17", "@planet/maps": "^8.1.0", "@tanstack/react-table": "^8.8.5", + "ag-grid-react": "^30.0.4", "chroma-js": "^2.4.2", "flexsearch": "0.7.21", "leaflet": "^1.9.4", "next-mdx-remote": "^4.4.1", "ol": "^7.4.0", "papaparse": "^5.4.1", + "postcss-url": "^10.1.3", "react": "^18.2.0", "react-dom": "^18.2.0", "react-hook-form": "^7.43.9", @@ -39655,7 +39809,8 @@ "react-vega": "^7.6.0", "vega": "5.25.0", "vega-lite": "5.1.0", - "vitest": "^0.31.4" + "vitest": "^0.31.4", + "xlsx": "^0.18.5" }, "devDependencies": { "@storybook/addon-essentials": "^7.0.7", @@ -46867,6 +47022,7 @@ "@typescript-eslint/parser": "^5.57.1", "@vitejs/plugin-react": "^4.0.0", "@vitejs/plugin-react-swc": "^3.3.2", + "ag-grid-react": "^30.0.4", "autoprefixer": "^10.4.14", "chroma-js": "^2.4.2", "eslint": "^8.38.0", @@ -46882,6 +47038,7 @@ "postcss": "^8.4.23", "postcss-import": "^15.1.0", "postcss-import-url": "^7.2.0", + "postcss-url": "*", "prop-types": "^15.8.1", "react": "^18.2.0", "react-dom": "^18.2.0", @@ -46897,7 +47054,8 @@ "vite": "^4.3.2", "vite-plugin-dts": "^2.3.0", "vite-plugin-swc-only": "^0.1.18", - "vitest": "^0.31.4" + "vitest": "^0.31.4", + "xlsx": "^0.18.5" }, "dependencies": { "@eslint/eslintrc": { @@ -50929,6 +51087,25 @@ "integrity": "sha512-4B/qKCfeE/ODUaAUpSwfzazo5x29WD4r3vXiWsB7I2mSDAihwEqKO+g8GELZUQSSAo5e1XTYh3ZVfLyxBc12nA==", "dev": true }, + "adler-32": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.3.1.tgz", + "integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==" + }, + "ag-grid-community": { + "version": "30.0.3", + "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-30.0.3.tgz", + "integrity": "sha512-agfRVHELQqhnMfRplmYEYdxMxw3c8l5Bu7lNaCfIVOasyRlSAvH4Na8qru0ORaOUN3ClulfvKIuLSWwgGSwJJQ==", + "peer": true + }, + "ag-grid-react": { + "version": "30.0.4", + "resolved": "https://registry.npmjs.org/ag-grid-react/-/ag-grid-react-30.0.4.tgz", + "integrity": "sha512-6N3O0avco1BVt5jLe6tD3GepvsmoxV4gvqHQ4SguYwqkfvO9IzN8GEOiVScLlAn1zvWjhCeSpnIYRi44bP3wqQ==", + "requires": { + "prop-types": "^15.8.1" + } + }, "agent-base": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz", @@ -52180,6 +52357,15 @@ "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz", "integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==" }, + "cfb": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.2.tgz", + "integrity": "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==", + "requires": { + "adler-32": "~1.3.0", + "crc-32": "~1.2.0" + } + }, "chai": { "version": "4.3.7", "resolved": "https://registry.npmjs.org/chai/-/chai-4.3.7.tgz", @@ -52403,6 +52589,11 @@ "integrity": "sha512-q4dMFMlXtKR3XNBHyMHt/3pwYNA69EDk00lloMOaaUMKPUXBw6lpXtbu3MMVG6/uOihGnRDOlkyqsONEUj60+w==", "dev": true }, + "codepage": { + "version": "1.15.0", + "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz", + "integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==" + }, "collect-v8-coverage": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz", @@ -52804,6 +52995,11 @@ "yaml": "^1.10.0" } }, + "crc-32": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz", + "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==" + }, "create-require": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz", @@ -53065,6 +53261,11 @@ "integrity": "sha512-PjiQ659aQ+fUTQqSrd1XEDnOr52jh30RBurfzkscaE2tPaFsDH5wOAHJiw8XAHphRknCwMUE9KRayc4K/NbO8A==", "dev": true }, + "cuint": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/cuint/-/cuint-0.2.2.tgz", + "integrity": "sha512-d4ZVpCW31eWwCMe1YT3ur7mUDnTXbgwyzaL320DrcRT45rfjYxkt5QWLrmOJ+/UEAI2+fQgKe/fCjR8l4TpRgw==" + }, "cypress": { "version": "12.9.0", "resolved": "https://registry.npmjs.org/cypress/-/cypress-12.9.0.tgz", @@ -55765,6 +55966,11 @@ "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==", "dev": true }, + "frac": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz", + "integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==" + }, "fraction.js": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz", @@ -61973,7 +62179,6 @@ "version": "3.1.0", "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz", "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==", - "dev": true, "requires": { "semver": "^6.0.0" } @@ -64714,6 +64919,24 @@ "postcss-selector-parser": "^6.0.5" } }, + "postcss-url": { + "version": "10.1.3", + "resolved": "https://registry.npmjs.org/postcss-url/-/postcss-url-10.1.3.tgz", + "integrity": "sha512-FUzyxfI5l2tKmXdYc6VTu3TWZsInayEKPbiyW+P6vmmIrrb4I6CGX0BFoewgYHLK+oIL5FECEK02REYRpBvUCw==", + "requires": { + "make-dir": "~3.1.0", + "mime": "~2.5.2", + "minimatch": "~3.0.4", + "xxhashjs": "~0.2.2" + }, + "dependencies": { + "mime": { + "version": "2.5.2", + "resolved": "https://registry.npmjs.org/mime/-/mime-2.5.2.tgz", + "integrity": "sha512-tqkh47FzKeCPD2PUiPB6pkbMzsCasjxAfC62/Wap5qrUWcb+sFasXUC5I3gYM5iBM8v/Qpn4UK0x+j0iHyFPDg==" + } + } + }, "postcss-value-parser": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", @@ -66346,8 +66569,7 @@ "semver": { "version": "6.3.0", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", - "dev": true + "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==" }, "send": { "version": "0.18.0", @@ -66857,6 +67079,14 @@ "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==", "dev": true }, + "ssf": { + "version": "0.11.2", + "resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz", + "integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==", + "requires": { + "frac": "~1.1.2" + } + }, "sshpk": { "version": "1.17.0", "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.17.0.tgz", @@ -69873,6 +70103,16 @@ "integrity": "sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw==", "dev": true }, + "wmf": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz", + "integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==" + }, + "word": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/word/-/word-0.3.0.tgz", + "integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==" + }, "word-wrap": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz", @@ -69946,6 +70186,20 @@ "devOptional": true, "requires": {} }, + "xlsx": { + "version": "0.18.5", + "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.18.5.tgz", + "integrity": "sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==", + "requires": { + "adler-32": "~1.3.0", + "cfb": "~1.2.1", + "codepage": "~1.15.0", + "crc-32": "~1.2.1", + "ssf": "~0.11.2", + "wmf": "~1.0.1", + "word": "~0.3.0" + } + }, "xml-name-validator": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz", @@ -69968,6 +70222,14 @@ "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz", "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==" }, + "xxhashjs": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/xxhashjs/-/xxhashjs-0.2.2.tgz", + "integrity": "sha512-AkTuIuVTET12tpsVIQo+ZU6f/qDmKuRUcjaqR+OIvm+aCBsZ95i7UVY5WJ9TMsSaZ0DA2WxoZ4acu0sPH+OKAw==", + "requires": { + "cuint": "^0.2.2" + } + }, "y18n": { "version": "5.0.8", "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz", diff --git a/packages/components/.storybook/preview-head.html b/packages/components/.storybook/preview-head.html deleted file mode 100644 index b43dc699..00000000 --- a/packages/components/.storybook/preview-head.html +++ /dev/null @@ -1,10 +0,0 @@ - - - diff --git a/packages/components/package.json b/packages/components/package.json index 3b5d99b6..2c3ca1cb 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -17,7 +17,7 @@ "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0", "storybook": "storybook dev -p 6006", "build-storybook": "storybook build", - "build-tailwind": "NODE_ENV=production npx tailwindcss --postcss -c tailwind.config.js -i src/index.css -o ./dist/styles.css --minify", + "build-tailwind": "NODE_ENV=production npx tailwindcss --postcss -c tailwind.config.js -i src/index.css -o ./dist/style.css --minify", "prepare": "npm run build", "fix-leaflet": "node ./scripts/fix-leaflet.cjs" }, @@ -30,12 +30,14 @@ "@heroicons/react": "^2.0.17", "@planet/maps": "^8.1.0", "@tanstack/react-table": "^8.8.5", + "ag-grid-react": "^30.0.4", "chroma-js": "^2.4.2", "flexsearch": "0.7.21", "leaflet": "^1.9.4", "next-mdx-remote": "^4.4.1", "ol": "^7.4.0", "papaparse": "^5.4.1", + "postcss-url": "^10.1.3", "react": "^18.2.0", "react-dom": "^18.2.0", "react-hook-form": "^7.43.9", @@ -48,6 +50,7 @@ "@react-pdf-viewer/core": "3.6.0", "@react-pdf-viewer/default-layout": "3.6.0", "pdfjs-dist": "2.15.349" + "xlsx": "^0.18.5" }, "devDependencies": { "@storybook/addon-essentials": "^7.0.7", @@ -96,7 +99,7 @@ "require": "./dist/components.umd.js" }, "./styles.css": { - "import": "./dist/styles.css" + "import": "./dist/style.css" } }, "publishConfig": { diff --git a/packages/components/postcss.config.js b/packages/components/postcss.config.js index e24f213a..a3015434 100644 --- a/packages/components/postcss.config.js +++ b/packages/components/postcss.config.js @@ -1,8 +1,9 @@ -console.log('PostCSS') +console.log('PostCSS'); export default { plugins: { 'postcss-import': {}, + 'postcss-url': { url: 'inline' }, tailwindcss: {}, autoprefixer: {}, }, diff --git a/packages/components/src/components/Excel.tsx b/packages/components/src/components/Excel.tsx new file mode 100644 index 00000000..f49c320d --- /dev/null +++ b/packages/components/src/components/Excel.tsx @@ -0,0 +1,99 @@ +import { useEffect, useState } from 'react'; +import LoadingSpinner from './LoadingSpinner'; +import { read, utils } from 'xlsx'; +import { AgGridReact } from 'ag-grid-react'; +import 'ag-grid-community/styles/ag-grid.css'; +import 'ag-grid-community/styles/ag-theme-alpine.css'; + +export type ExcelProps = { + url: string; +}; + +export function Excel({ url }: ExcelProps) { + const [isLoading, setIsLoading] = useState(false); + const [activeSheetName, setActiveSheetName] = useState(); + const [workbook, setWorkbook] = useState(); + const [rows, setRows] = useState(); + const [cols, setCols] = useState(); + + const loadSpreadsheet = (wb: any, name: string) => { + setActiveSheetName(name); + const ws = wb.Sheets[name]; + + const range = utils.decode_range(ws['!ref'] || 'A1'); + const columns = Array.from({ length: range.e.c + 1 }, (_, i) => ({ + field: utils.encode_col(i), + })); + + const rowsAr = utils.sheet_to_json(ws, { header: 1 }); + const rows = rowsAr.map((row) => { + const obj = {}; + columns.forEach((col, i) => { + obj[col.field] = row[i]; + }); + return obj; + }); + + setRows(rows); + setCols(columns); + }; + + useEffect(() => { + setIsLoading(true); + + fetch(url) + .then((res) => res.arrayBuffer()) + .then((f) => { + const wb = read(f); + setWorkbook(wb); + loadSpreadsheet(wb, wb.SheetNames[0]); + setIsLoading(false); + }); + }, [url]); + + return isLoading ? ( +
+ +
+ ) : ( + <> + {cols && rows && ( +
+
+ +
+
+ {workbook.SheetNames.map((name: string, idx: number) => { + return ( + <> + + + ); + })} +
+
+ )} + + ); +} diff --git a/packages/components/src/components/Map.tsx b/packages/components/src/components/Map.tsx index 77e3c1de..d17fbd4c 100644 --- a/packages/components/src/components/Map.tsx +++ b/packages/components/src/components/Map.tsx @@ -6,9 +6,10 @@ import { MapContainer, TileLayer, GeoJSON as GeoJSONLayer, - LayersControl + LayersControl, } from 'react-leaflet'; +import 'leaflet/dist/leaflet.css'; import * as L from 'leaflet'; export type MapProps = { @@ -131,6 +132,27 @@ export function Map({ { + // This resolver an issue in which the bundled map was + // not finding the images + const leafletBase = + 'https://unpkg.com/leaflet@1.9.4/dist/images/'; + + const icon = new L.Icon({ + iconUrl: leafletBase + 'marker-icon.png', + iconRetinaUrl: leafletBase + 'marker-icon-2x.png', + shadowUrl: leafletBase + 'marker-shadow.png', + iconSize: [25, 41], + iconAnchor: [12, 41], + popupAnchor: [1, -34], + tooltipAnchor: [16, -28], + shadowSize: [41, 41], + }); + + const iconMarker = L.marker(latlng, { icon }); + return iconMarker; + }} style={(geoJsonFeature: any) => { // Set the fill color of each feature when appliable if ( diff --git a/packages/components/src/index.css b/packages/components/src/index.css index 7a21fb11..54adfe4a 100644 --- a/packages/components/src/index.css +++ b/packages/components/src/index.css @@ -1,7 +1,9 @@ @import "tailwindcss/base"; @import "tailwindcss/components"; -@import "leaflet"; @import "include"; +@import "leaflet"; +@import 'ag-grid-community/styles/ag-grid.css'; +@import 'ag-grid-community/styles/ag-theme-alpine.css'; @import "tailwindcss/utilities"; diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts index a066580d..60ac6345 100644 --- a/packages/components/src/index.ts +++ b/packages/components/src/index.ts @@ -7,3 +7,4 @@ export * from './components/FlatUiTable'; export * from './components/OpenLayers/OpenLayers'; export * from './components/Map'; export * from './components/PdfViewer'; +export * from "./components/Excel"; diff --git a/packages/components/stories/Excel.stories.ts b/packages/components/stories/Excel.stories.ts new file mode 100644 index 00000000..bda3ba97 --- /dev/null +++ b/packages/components/stories/Excel.stories.ts @@ -0,0 +1,34 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { Excel, ExcelProps } from '../src/components/Excel'; + +// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction +const meta: Meta = { + title: 'Components/Excel', + component: Excel, + tags: ['autodocs'], + argTypes: { + url: { + description: + 'Url of the file to be displayed e.g.: "https://url.to/data.csv"', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const SingleSheet: Story = { + name: 'Excel file with just one sheet', + args: { + url: 'https://sheetjs.com/pres.xlsx', + }, +}; + +export const MultipleSheet: Story = { + name: 'Excel file with multiple sheets', + args: { + url: 'https://storage.portaljs.org/IC-Gantt-Chart-Project-Template-8857.xlsx', + }, +};