diff --git a/package-lock.json b/package-lock.json index 82c5d903..005c75f4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13820,6 +13820,25 @@ "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", @@ -16660,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", @@ -28285,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" }, @@ -32213,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", @@ -32842,18 +32893,6 @@ "react-dom": ">=16.8.0" } }, - "node_modules/react-data-grid": { - "version": "7.0.0-beta.34", - "resolved": "https://registry.npmjs.org/react-data-grid/-/react-data-grid-7.0.0-beta.34.tgz", - "integrity": "sha512-OwOP77vabb47xhbvHCXJ2QwFHsfduoLJhgXncGe0gIjrrwJ9xr2SdfEe/U6KAfHnLuBDxCDoY0SOgfJiOQtd+Q==", - "dependencies": { - "clsx": "^1.1.1" - }, - "peerDependencies": { - "react": "^18.0", - "react-dom": "^18.0" - } - }, "node_modules/react-docgen": { "version": "6.0.0-alpha.3", "resolved": "https://registry.npmjs.org/react-docgen/-/react-docgen-6.0.0-alpha.3.tgz", @@ -34411,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" } @@ -39197,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", @@ -39747,14 +39793,15 @@ "@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-data-grid": "^7.0.0-beta.34", "react-dom": "^18.2.0", "react-hook-form": "^7.43.9", "react-leaflet": "^4.2.1", @@ -46975,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", @@ -46990,9 +47038,9 @@ "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-data-grid": "*", "react-dom": "^18.2.0", "react-hook-form": "^7.43.9", "react-leaflet": "^4.2.1", @@ -51044,6 +51092,20 @@ "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", @@ -53199,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", @@ -62112,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" } @@ -64853,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", @@ -65326,14 +65410,6 @@ "dev": true, "requires": {} }, - "react-data-grid": { - "version": "7.0.0-beta.34", - "resolved": "https://registry.npmjs.org/react-data-grid/-/react-data-grid-7.0.0-beta.34.tgz", - "integrity": "sha512-OwOP77vabb47xhbvHCXJ2QwFHsfduoLJhgXncGe0gIjrrwJ9xr2SdfEe/U6KAfHnLuBDxCDoY0SOgfJiOQtd+Q==", - "requires": { - "clsx": "^1.1.1" - } - }, "react-docgen": { "version": "6.0.0-alpha.3", "resolved": "https://registry.npmjs.org/react-docgen/-/react-docgen-6.0.0-alpha.3.tgz", @@ -66493,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", @@ -70147,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 a88b8671..05fc19a1 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,14 +30,15 @@ "@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-data-grid": "^7.0.0-beta.34", "react-dom": "^18.2.0", "react-hook-form": "^7.43.9", "react-leaflet": "^4.2.1", @@ -95,7 +96,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 index b94a56c0..f49c320d 100644 --- a/packages/components/src/components/Excel.tsx +++ b/packages/components/src/components/Excel.tsx @@ -1,8 +1,9 @@ import { useEffect, useState } from 'react'; import LoadingSpinner from './LoadingSpinner'; import { read, utils } from 'xlsx'; -import DataGrid, { Column, textEditor } from 'react-data-grid'; -import 'react-data-grid/lib/styles.css'; +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; @@ -16,17 +17,23 @@ export function Excel({ url }: ExcelProps) { const [cols, setCols] = useState(); const loadSpreadsheet = (wb: any, name: string) => { - console.log(name) setActiveSheetName(name); const ws = wb.Sheets[name]; - const rows = utils.sheet_to_json(ws, { header: 1 }); const range = utils.decode_range(ws['!ref'] || 'A1'); const columns = Array.from({ length: range.e.c + 1 }, (_, i) => ({ - key: String(i), - name: utils.encode_col(i), - editor: textEditor, + 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); }; @@ -52,18 +59,36 @@ export function Excel({ url }: ExcelProps) { <> {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 1302d7e7..922776a5 100644 --- a/packages/components/src/index.ts +++ b/packages/components/src/index.ts @@ -6,3 +6,4 @@ export * from "./components/VegaLite"; export * from "./components/FlatUiTable"; export * from './components/OpenLayers/OpenLayers'; export * from "./components/Map"; +export * from "./components/Excel"; diff --git a/packages/components/stories/Excel.stories.ts b/packages/components/stories/Excel.stories.ts index 9ef67d1a..6c0939c5 100644 --- a/packages/components/stories/Excel.stories.ts +++ b/packages/components/stories/Excel.stories.ts @@ -10,7 +10,7 @@ const meta: Meta = { argTypes: { url: { description: - 'Data to be displayed.\n\n E.g.: [["1990", 1], ["1991", 2]] \n\nOR\n\n "https://url.to/data.csv"', + 'Url of the file to be displayed e.g.: "https://url.to/data.csv"', }, }, }; @@ -19,9 +19,16 @@ export default meta; type Story = StoryObj; -export const FromURL: Story = { - name: 'Excel spreadsheet from URL', +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://www.smartsheet.com/sites/default/files/IC-Gantt-Chart-Project-Template-8857.xlsx', + }, +};