[storybook][xs] - fix build

* [maps][xl] - working with swc equals to minify

* [maps][xs] - fixing height

examples/learn/next.config.js

@@ -0,0 +1,5 @@
+const nextConfig = {
+  swcMinify: false
+}
+
+module.exports = nextConfig

examples/openspending/components/DataRichDocument.tsx

@@ -7,13 +7,21 @@ import { Mermaid } from '@portaljs/core';
 // to handle import statements. Instead, you must include components in scope
 // here.
 const components = {
-  Table: dynamic(() => import('@portaljs/components').then(mod => mod.Table)),
-  Catalog: dynamic(() => import('@portaljs/components').then(mod => mod.Catalog)),
+  Table: dynamic(() => import('@portaljs/components').then((mod) => mod.Table)),
+  Catalog: dynamic(() =>
+    import('@portaljs/components').then((mod) => mod.Catalog)
+  ),
   mermaid: Mermaid,
-  Vega: dynamic(() => import('@portaljs/components').then(mod => mod.Vega)),
-  VegaLite: dynamic(() => import('@portaljs/components').then(mod => mod.VegaLite)),
-  LineChart: dynamic(() => import('@portaljs/components').then(mod => mod.LineChart)),
-  FlatUiTable: dynamic(() => import('@portaljs/components').then(mod => mod.FlatUiTable)),
+  Vega: dynamic(() => import('@portaljs/components').then((mod) => mod.Vega)),
+  VegaLite: dynamic(() =>
+    import('@portaljs/components').then((mod) => mod.VegaLite)
+  ),
+  LineChart: dynamic(() =>
+    import('@portaljs/components').then((mod) => mod.LineChart)
+  ),
+  FlatUiTable: dynamic(() =>
+    import('@portaljs/components').then((mod) => mod.FlatUiTable)
+  ),
 } as any;
 
 export default function DRD({ source }: { source: any }) {

examples/openspending/content/stories/frankfurt-is-investing-in-education-and-your-city-should-too.mdx

@@ -15,6 +15,17 @@ helps to bring this data to life. It maps out the city's annual spending across
 the education slice has grown noticeably over the years, indicating Frankfurt's intention to prioritize this space.
 The city's commitment to education is abundantly clear.
 
+<Map data="https://openlayers.org/data/vector/ecoregions.json" />
+
+<OpenLayers
+  layers={[
+    {
+      url: 'https://openlayers.org/data/vector/ecoregions.json',
+      name: 'Teste',
+    },
+  ]}
+/>
+
 <VegaLite
   spec={{
     $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
@@ -156,8 +167,8 @@ the key to a prosperous future.
         title: '',
         field: 'label',
         scale: {
-          domain: ["Education"],
-          range: ['#64b5f6']
+          domain: ['Education'],
+          range: ['#64b5f6'],
         },
       },
       tooltip: [
@@ -189,4 +200,3 @@ Frankfurt is a city that's recognized the power of education, and it's using tha
 One can only hope that more cities follow suit.
 
 [^1]: https://worldpopulationreview.com/world-cities/frankfurt-population
-

examples/openspending/package-lock.json

@@ -1971,6 +1971,40 @@
         "@lit-labs/ssr-dom-shim": "^1.0.0"
       }
     },
+    "node_modules/@mapbox/jsonlint-lines-primitives": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
+      "integrity": "sha512-rY0o9A5ECsTQRVhv7tL/OyDpGAoUB4tTvLiW1DSzQGq4bvTPhNw1VpSNjDJc5GFZ2XuyOtSWSVN05qOtcD71qQ==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/@mapbox/mapbox-gl-style-spec": {
+      "version": "13.28.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-style-spec/-/mapbox-gl-style-spec-13.28.0.tgz",
+      "integrity": "sha512-B8xM7Fp1nh5kejfIl4SWeY0gtIeewbuRencqO3cJDrCHZpaPg7uY+V8abuR+esMeuOjRl5cLhVTP40v+1ywxbg==",
+      "dependencies": {
+        "@mapbox/jsonlint-lines-primitives": "~2.0.2",
+        "@mapbox/point-geometry": "^0.1.0",
+        "@mapbox/unitbezier": "^0.0.0",
+        "csscolorparser": "~1.0.2",
+        "json-stringify-pretty-compact": "^2.0.0",
+        "minimist": "^1.2.6",
+        "rw": "^1.3.3",
+        "sort-object": "^0.3.2"
+      },
+      "bin": {
+        "gl-style-composite": "bin/gl-style-composite.js",
+        "gl-style-format": "bin/gl-style-format.js",
+        "gl-style-migrate": "bin/gl-style-migrate.js",
+        "gl-style-validate": "bin/gl-style-validate.js"
+      }
+    },
+    "node_modules/@mapbox/mapbox-gl-style-spec/node_modules/json-stringify-pretty-compact": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/json-stringify-pretty-compact/-/json-stringify-pretty-compact-2.0.0.tgz",
+      "integrity": "sha512-WRitRfs6BGq4q8gTgOy4ek7iPFXjbra0H3PmDLKm2xnZ+Gh1HUhiKGgCZkSPNULlP7mvfu6FV/mOLhCarspADQ=="
+    },
     "node_modules/@mapbox/node-pre-gyp": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.10.tgz",
@@ -2020,6 +2054,16 @@
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
     },
+    "node_modules/@mapbox/point-geometry": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
+      "integrity": "sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ=="
+    },
+    "node_modules/@mapbox/unitbezier": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.0.tgz",
+      "integrity": "sha512-HPnRdYO0WjFjRTSwO3frz1wKaU649OBFPX3Zo/2WZvuRi6zMiRGui8SnPQiQABgqCf8YikDe5t3HViTVw1WUzA=="
+    },
     "node_modules/@mdx-js/mdx": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/@mdx-js/mdx/-/mdx-2.3.0.tgz",
@@ -2657,6 +2701,11 @@
       "resolved": "https://registry.npmjs.org/@octokit/webhooks-types/-/webhooks-types-6.11.0.tgz",
       "integrity": "sha512-AanzbulOHljrku1NGfafxdpTCfw2ENaWzH01N2vqQM+cUFbk868Cgh0xylz0JIM9BoKbfI++bdD6EYX0Q/UTEw=="
     },
+    "node_modules/@petamoriken/float16": {
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/@petamoriken/float16/-/float16-3.8.1.tgz",
+      "integrity": "sha512-oj3dU9kuMy8AqrreIboVh3KCJGSQO5T+dJ8JQFl369961jTWvPLP1GIlLy0FVoWehXLoI9BXygu/yzuNiIHBlg=="
+    },
     "node_modules/@pkgr/utils": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/@pkgr/utils/-/utils-2.4.1.tgz",
@@ -2676,6 +2725,14 @@
         "url": "https://opencollective.com/unts"
       }
     },
+    "node_modules/@planet/maps": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@planet/maps/-/maps-8.1.0.tgz",
+      "integrity": "sha512-THvbooWXFZYyjSdoqi6MFNqnjrfnO5Oev1tKh6ORjxFru0N69gZwUfEduRjg99VNklmaAk2BPaCatgKs5qr0XA==",
+      "dependencies": {
+        "react-reconciler": "^0.29.0"
+      }
+    },
     "node_modules/@portaljs/ckan": {
       "version": "0.0.2",
       "resolved": "https://registry.npmjs.org/@portaljs/ckan/-/ckan-0.0.2.tgz",
@@ -2692,21 +2749,25 @@
     },
     "node_modules/@portaljs/components": {
       "version": "0.1.12",
-      "resolved": "https://registry.npmjs.org/@portaljs/components/-/components-0.1.12.tgz",
-      "integrity": "sha512-p7I7uOJYXo+jZgVJfgGW2RtjT02wpjsSiGb+QgQCdIdh7E1e9LKIWMx7wnaRqB1eS3Z+yxaYtG3+0tQEqyxNoQ==",
+      "resolved": "file:../../packages/components/portaljs-components-0.1.12.tgz",
+      "integrity": "sha512-Cr+RQ7tkbIqtBNq5D8zeZEB2dOejxD0V78l/I4AbdjYI8jvQ4Evx6APEfhPs3im6LDEGrT28LslVTZJ6luslnw==",
       "dependencies": {
         "@githubocto/flat-ui": "^0.14.1",
         "@heroicons/react": "^2.0.17",
+        "@planet/maps": "^8.1.0",
         "@tanstack/react-table": "^8.8.5",
+        "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",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-hook-form": "^7.43.9",
+        "react-leaflet": "^4.2.1",
         "react-query": "^3.39.3",
         "react-vega": "^7.6.0",
-        "rollup-plugin-re": "^1.0.7",
         "vega": "5.25.0",
         "vega-lite": "5.1.0",
         "vitest": "^0.31.4"
@@ -2909,6 +2970,16 @@
       "resolved": "https://registry.npmjs.org/@reach/observe-rect/-/observe-rect-1.2.0.tgz",
       "integrity": "sha512-Ba7HmkFgfQxZqqaeIWWkNK0rEhpxVQHIoVyW1YDSkGsGIXzcaW4deC8B0pZrNSSyLTdIk7y+5olKt5+g0GmFIQ=="
     },
+    "node_modules/@react-leaflet/core": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-2.1.0.tgz",
+      "integrity": "sha512-Qk7Pfu8BSarKGqILj4x7bCSZ1pjuAPZ+qmRwH5S7mDS91VSbVVsJSrW4qA+GPrro8t69gFYVMWb1Zc4yFmPiVg==",
+      "peerDependencies": {
+        "leaflet": "^1.9.0",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
     "node_modules/@rushstack/eslint-patch": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.3.2.tgz",
@@ -4424,6 +4495,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/chroma-js": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.4.2.tgz",
+      "integrity": "sha512-U9eDw6+wt7V8z5NncY2jJfZa+hUH8XEj8FQHgFJTrUFnJfXYf4Ml4adI2vXZOjqRDpFWtYVWypDfZwnJ+HIR4A=="
+    },
     "node_modules/clean-set": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/clean-set/-/clean-set-1.1.2.tgz",
@@ -4735,6 +4811,11 @@
       "resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.2.tgz",
       "integrity": "sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA=="
     },
+    "node_modules/csscolorparser": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/csscolorparser/-/csscolorparser-1.0.3.tgz",
+      "integrity": "sha512-umPSgYwZkdFoUrH5hIq5kf0wPSXiro51nPw0j2K/c83KflkPSTBGMz6NJvMB+07VlL0y7VPo6QJcDjcgKTTm3w=="
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -5858,6 +5939,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/earcut": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.4.tgz",
+      "integrity": "sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ=="
+    },
     "node_modules/ecdsa-sig-formatter": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
@@ -7155,6 +7241,39 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/geotiff": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/geotiff/-/geotiff-2.0.7.tgz",
+      "integrity": "sha512-FKvFTNowMU5K6lHYY2f83d4lS2rsCNdpUC28AX61x9ZzzqPNaWFElWv93xj0eJFaNyOYA63ic5OzJ88dHpoA5Q==",
+      "dependencies": {
+        "@petamoriken/float16": "^3.4.7",
+        "lerc": "^3.0.0",
+        "pako": "^2.0.4",
+        "parse-headers": "^2.0.2",
+        "quick-lru": "^6.1.1",
+        "web-worker": "^1.2.0",
+        "xml-utils": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=10.19"
+      }
+    },
+    "node_modules/geotiff/node_modules/pako": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz",
+      "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug=="
+    },
+    "node_modules/geotiff/node_modules/quick-lru": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-6.1.1.tgz",
+      "integrity": "sha512-S27GBT+F0NTRiehtbrgaSE1idUAJ5bX8dPAQTdylEyNlrdcH5X4Lz7Edz3DYzecbsCluD5zO8ZNEe04z3D3u6Q==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/get-caller-file": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
@@ -7831,9 +7950,7 @@
           "type": "consulting",
           "url": "https://feross.org/support"
         }
-      ],
-      "optional": true,
-      "peer": true
+      ]
     },
     "node_modules/ignore": {
       "version": "5.2.4",
@@ -8784,6 +8901,16 @@
       "resolved": "https://registry.npmjs.org/layout-base/-/layout-base-1.0.2.tgz",
       "integrity": "sha512-8h2oVEZNktL4BH2JCOI90iD1yXwL6iNW7KcCKT2QZgQJR2vbqDsldCTPRU9NifTCqHZci57XvQQ15YTu+sTYPg=="
     },
+    "node_modules/leaflet": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
+      "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA=="
+    },
+    "node_modules/lerc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/lerc/-/lerc-3.0.0.tgz",
+      "integrity": "sha512-Rm4J/WaHhRa93nCN2mwWDZFoRVF18G1f47C+kvQWyHGEZxFpTUi73p7lMVSAndyxGt6lJ2/CFbOcf9ra5p8aww=="
+    },
     "node_modules/levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -8956,14 +9083,6 @@
         "yallist": "^3.0.2"
       }
     },
-    "node_modules/magic-string": {
-      "version": "0.16.0",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.16.0.tgz",
-      "integrity": "sha512-c4BEos3y6G2qO0B9X7K0FVLOPT9uGrjYwYRLFmDqyl5YMboUviyecnXWp94fJTSMwPw2/sf+CEYt5AGpmklkkQ==",
-      "dependencies": {
-        "vlq": "^0.2.1"
-      }
-    },
     "node_modules/make-dir": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
@@ -9023,6 +9142,11 @@
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
       "optional": true
     },
+    "node_modules/mapbox-to-css-font": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/mapbox-to-css-font/-/mapbox-to-css-font-2.4.2.tgz",
+      "integrity": "sha512-f+NBjJJY4T3dHtlEz1wCG7YFlkODEjFIYlxDdLIDMNpkSksqTt+l/d4rjuwItxuzkuMFvPyrjzV2lxRM4ePcIA=="
+    },
     "node_modules/markdown-extensions": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/markdown-extensions/-/markdown-extensions-1.1.1.tgz",
@@ -11492,6 +11616,32 @@
         "node": ">= 14"
       }
     },
+    "node_modules/ol": {
+      "version": "7.4.0",
+      "resolved": "https://registry.npmjs.org/ol/-/ol-7.4.0.tgz",
+      "integrity": "sha512-bgBbiah694HhC0jt8ptEFNRXwgO8d6xWH3G97PCg4bmn9Li5nLLbi59oSrvqUI6VPVwonPQF1YcqJymxxyMC6A==",
+      "dependencies": {
+        "earcut": "^2.2.3",
+        "geotiff": "^2.0.7",
+        "ol-mapbox-style": "^10.1.0",
+        "pbf": "3.2.1",
+        "rbush": "^3.0.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/openlayers"
+      }
+    },
+    "node_modules/ol-mapbox-style": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-10.6.0.tgz",
+      "integrity": "sha512-s86QhCoyyKVRsYkvPzzdWd///bhYh3onWrBq4lNXnCd9G/hS6AoK023kn4zlDESVlTBDTWLz8vhOistp0M3TXA==",
+      "dependencies": {
+        "@mapbox/mapbox-gl-style-spec": "^13.23.1",
+        "mapbox-to-css-font": "^2.4.1",
+        "ol": "^7.3.0"
+      }
+    },
     "node_modules/once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -11638,6 +11788,11 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/parse-headers": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/parse-headers/-/parse-headers-2.0.5.tgz",
+      "integrity": "sha512-ft3iAoLOB/MlwbNXgzy43SWGP6sQki2jQvAyBg/zDFAgr9bfNWZIUj42Kw2eJIl8kEi4PbgE6U1Zau/HwI75HA=="
+    },
     "node_modules/parse-json": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
@@ -11735,6 +11890,18 @@
         "node": "*"
       }
     },
+    "node_modules/pbf": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.2.1.tgz",
+      "integrity": "sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ==",
+      "dependencies": {
+        "ieee754": "^1.1.12",
+        "resolve-protobuf-schema": "^2.1.0"
+      },
+      "bin": {
+        "pbf": "bin/pbf"
+      }
+    },
     "node_modules/pend": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
@@ -12055,6 +12222,11 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/protocol-buffers-schema": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.0.tgz",
+      "integrity": "sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw=="
+    },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -12173,6 +12345,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/quickselect": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
+      "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw=="
+    },
+    "node_modules/rbush": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/rbush/-/rbush-3.0.1.tgz",
+      "integrity": "sha512-XRaVO0YecOpEuIvbhbpTrZgoiI6xBlz6hnlr6EHhd+0x9ase6EmeN+hdwwUaJvLcsFFQ8iWVF1GAK1yB0BWi0w==",
+      "dependencies": {
+        "quickselect": "^2.0.0"
+      }
+    },
     "node_modules/react": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
@@ -12221,6 +12406,19 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-leaflet": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-4.2.1.tgz",
+      "integrity": "sha512-p9chkvhcKrWn/H/1FFeVSqLdReGwn2qmiobOQGO3BifX+/vV/39qhY8dGqbdcPh1e6jxh/QHriLXr7a4eLFK4Q==",
+      "dependencies": {
+        "@react-leaflet/core": "^2.1.0"
+      },
+      "peerDependencies": {
+        "leaflet": "^1.9.0",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
     "node_modules/react-markdown": {
       "version": "8.0.7",
       "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-8.0.7.tgz",
@@ -12290,6 +12488,21 @@
         "react-dom": "^16.8.0-0 || ^17.0.0-0 || ^18.0.0-0"
       }
     },
+    "node_modules/react-reconciler": {
+      "version": "0.29.0",
+      "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.29.0.tgz",
+      "integrity": "sha512-wa0fGj7Zht1EYMRhKWwoo1H9GApxYLBuhoAuXN0TlltESAjDssB+Apf0T/DngVqaMyPypDmabL37vw/2aRM98Q==",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      },
+      "peerDependencies": {
+        "react": "^18.2.0"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.14.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz",
@@ -12828,6 +13041,14 @@
         "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
       }
     },
+    "node_modules/resolve-protobuf-schema": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz",
+      "integrity": "sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==",
+      "dependencies": {
+        "protocol-buffers-schema": "^3.3.1"
+      }
+    },
     "node_modules/retext": {
       "version": "8.1.0",
       "resolved": "https://registry.npmjs.org/retext/-/retext-8.1.0.tgz",
@@ -12949,28 +13170,6 @@
         "fsevents": "~2.3.2"
       }
     },
-    "node_modules/rollup-plugin-re": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/rollup-plugin-re/-/rollup-plugin-re-1.0.7.tgz",
-      "integrity": "sha512-TyFf3QaV/eJ/50k4wp5BM0SodGy0Idq0uOgvA1q3gHRwgXLPVX5y3CRKkBuHzKTZPC9CTZX7igKw5UvgjDls8w==",
-      "dependencies": {
-        "magic-string": "^0.16.0",
-        "rollup-pluginutils": "^2.0.1"
-      }
-    },
-    "node_modules/rollup-pluginutils": {
-      "version": "2.8.2",
-      "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz",
-      "integrity": "sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==",
-      "dependencies": {
-        "estree-walker": "^0.6.1"
-      }
-    },
-    "node_modules/rollup-pluginutils/node_modules/estree-walker": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz",
-      "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w=="
-    },
     "node_modules/rtl-css-js": {
       "version": "1.16.1",
       "resolved": "https://registry.npmjs.org/rtl-css-js/-/rtl-css-js-1.16.1.tgz",
@@ -13314,6 +13513,34 @@
         "node": ">= 10"
       }
     },
+    "node_modules/sort-asc": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/sort-asc/-/sort-asc-0.1.0.tgz",
+      "integrity": "sha512-jBgdDd+rQ+HkZF2/OHCmace5dvpos/aWQpcxuyRs9QUbPRnkEJmYVo81PIGpjIdpOcsnJ4rGjStfDHsbn+UVyw==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/sort-desc": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/sort-desc/-/sort-desc-0.1.1.tgz",
+      "integrity": "sha512-jfZacW5SKOP97BF5rX5kQfJmRVZP5/adDUTY8fCSPvNcXDVpUEe2pr/iKGlcyZzchRJZrswnp68fgk3qBXgkJw==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/sort-object": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/sort-object/-/sort-object-0.3.2.tgz",
+      "integrity": "sha512-aAQiEdqFTTdsvUFxXm3umdo04J7MRljoVGbBlkH7BgNsMvVNAJyGj7C/wV1A8wHWAJj/YikeZbfuCKqhggNWGA==",
+      "dependencies": {
+        "sort-asc": "^0.1.0",
+        "sort-desc": "^0.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map": {
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
@@ -15964,11 +16191,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/vlq": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/vlq/-/vlq-0.2.3.tgz",
-      "integrity": "sha512-DRibZL6DsNhIgYQ+wNdWDL2SL3bKPlVrRiBqV5yuMm++op8W4kGFtaQfCs4KEJn0wBZcHVHJ3eoywX8983k1ow=="
-    },
     "node_modules/warning": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
@@ -16173,6 +16395,11 @@
         }
       }
     },
+    "node_modules/xml-utils": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/xml-utils/-/xml-utils-1.7.0.tgz",
+      "integrity": "sha512-bWB489+RQQclC7A9OW8e5BzbT8Tu//jtAOvkYwewFr+Q9T9KDGvfzC1lp0pYPEQPEoPQLDkmxkepSC/2gIAZGw=="
+    },
     "node_modules/xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",

examples/openspending/pages/_app.tsx

@@ -1,5 +1,6 @@
 import { AppProps } from 'next/app';
 import './styles.css';
+import '@portaljs/components/styles.css';
 import { NextSeo } from 'next-seo';
 
 import { useEffect } from 'react';

examples/openspending/pages/stories/[fileName].tsx

@@ -4,7 +4,12 @@ import { GetStaticProps } from 'next';
 import Layout from '../../components/_shared/Layout';
 import { formatDate } from '@/utils/formatDate';
 import parse from '../../lib/markdown';
-import DataRichDocument from '../../components/DataRichDocument';
+import dynamic from 'next/dynamic';
+
+const DataRichDocument = dynamic(
+  () => import('../../components/DataRichDocument'),
+  { ssr: false }
+);
 
 export default function Page({ source, meta }) {
   return (
@@ -46,7 +51,10 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
 
 export async function getStaticPaths() {
   const mddb = await clientPromise;
-  let allDocuments = await mddb.getFiles({ extensions: ['mdx'], folder: 'stories' });
+  let allDocuments = await mddb.getFiles({
+    extensions: ['mdx'],
+    folder: 'stories',
+  });
 
   const paths = allDocuments
     .filter((page) => page.metadata?.isDraft !== true)

packages/components/package.json

@@ -28,11 +28,13 @@
   "dependencies": {
     "@githubocto/flat-ui": "^0.14.1",
     "@heroicons/react": "^2.0.17",
+    "@planet/maps": "^8.1.0",
     "@tanstack/react-table": "^8.8.5",
     "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",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -40,7 +42,6 @@
     "react-leaflet": "^4.2.1",
     "react-query": "^3.39.3",
     "react-vega": "^7.6.0",
-    "rollup-plugin-re": "^1.0.7",
     "vega": "5.25.0",
     "vega-lite": "5.1.0",
     "vitest": "^0.31.4"
@@ -53,6 +54,7 @@
     "@storybook/react": "^7.0.7",
     "@storybook/react-vite": "^7.0.7",
     "@storybook/testing-library": "^0.0.14-next.2",
+    "@swc/core": "^1.3.68",
     "@types/flexsearch": "^0.7.3",
     "@types/leaflet": "^1.9.3",
     "@types/papaparse": "^5.3.7",
@@ -61,6 +63,7 @@
     "@typescript-eslint/eslint-plugin": "^5.57.1",
     "@typescript-eslint/parser": "^5.57.1",
     "@vitejs/plugin-react": "^4.0.0",
+    "@vitejs/plugin-react-swc": "^3.3.2",
     "autoprefixer": "^10.4.14",
     "eslint": "^8.38.0",
     "eslint-plugin-react-hooks": "^4.6.0",
@@ -75,7 +78,8 @@
     "tailwindcss": "^3.3.2",
     "typescript": "^5.0.2",
     "vite": "^4.3.2",
-    "vite-plugin-dts": "^2.3.0"
+    "vite-plugin-dts": "^2.3.0",
+    "vite-plugin-swc-only": "^0.1.18"
   },
   "files": [
     "dist"

packages/components/src/components/OpenLayers/Controls.jsx

@@ -0,0 +1,84 @@
+import React, { useContext, useEffect, useState } from 'react';
+export const Controls = ({ children }) => {
+  return <div>{children}</div>;
+};
+
+import { FullScreen, Zoom } from 'ol/control';
+import { MapContext } from './Map';
+
+export const FullScreenControl = () => {
+  const { map } = useContext(MapContext);
+  useEffect(() => {
+    if (!map) return;
+    let fullScreenControl = new FullScreen({
+      className: 'ml-1 flex flex-col w-8 items-center mt-2',
+      activeClassName:
+        'w-full inline-flex justify-center items-center rounded-t-md bg-white px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10 text-sm',
+      inactiveClassName:
+        'inline-flex w-full justify-center items-center rounded-t-md bg-white px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10 text-sm',
+    });
+    let zoomControl = new Zoom({
+      className: 'ml-1 flex flex-col w-8 items-center',
+      zoomInClassName:
+        'inline-flex w-full justify-center items-center bg-white px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10 text-sm',
+      zoomOutClassName:
+        'inline-flex w-full justify-center items-center rounded-b-md bg-white px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10 text-sm',
+    });
+    map.controls.push(fullScreenControl);
+    map.controls.push(zoomControl);
+
+    return () => {
+      map.controls.remove(zoomControl);
+      map.controls.remove(fullScreenControl);
+    };
+  }, [map]);
+  return null;
+};
+
+//build a list of checkboxes in react
+
+export const ListOfCheckboxes = ({ layers, shownLayers, setShownLayers }) => {
+  //layers is an array of url and name
+  function addLayer(layer) {
+    setShownLayers([...shownLayers, layer.url]);
+  }
+
+  function removeLayer(layer) {
+    setShownLayers(shownLayers.filter((l) => l !== layer.url));
+  }
+
+  return (
+    <div>
+      <h3 className="mb-4 font-semibold text-gray-900 ">Layers</h3>
+      <ul className="w-48 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg ">
+        {layers.map((layer, index) => (
+          <li
+            key={index}
+            className="w-full border-b border-gray-200 rounded-t-lg "
+          >
+            <div className="flex items-center pl-3">
+              <input
+                id={layer.name}
+                type="checkbox"
+                defaultChecked={shownLayers.includes(layer.url)}
+                onClick={() =>
+                  shownLayers.includes(layer.url)
+                    ? removeLayer(layer)
+                    : addLayer(layer)
+                }
+                value={true}
+                className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2 "
+              ></input>
+              <label
+                htmlFor={layer.name}
+                className="w-full py-3 ml-2 text-sm font-medium text-gray-90"
+              >
+                {layer.name}
+              </label>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};

packages/components/src/components/OpenLayers/HeatMapLayer.jsx

@@ -0,0 +1,29 @@
+import { useContext, useEffect, useState } from 'react';
+import HeatMap from 'ol/layer/Heatmap';
+import { MapContext } from './Map';
+const HeatMapLayer = ({ source, style, zIndex = 0 }) => {
+  const { map } = useContext(MapContext);
+  const [heatMapLayer, setHeatMapLayer] = useState(null);
+  useEffect(() => {
+    if (!map) return;
+    let heatMapLayer = new HeatMap({
+      source,
+      style,
+      blur: parseInt(5, 10),
+      radius: parseInt(5, 10),
+    });
+    map.addLayer(heatMapLayer);
+    setHeatMapLayer(heatMapLayer);
+    heatMapLayer.setZIndex(zIndex);
+    return () => {
+      if (map) {
+        map.removeLayer(heatMapLayer);
+      }
+    };
+  }, [map]);
+  useEffect(() => {
+    heatMapLayer && heatMapLayer.setZIndex(zIndex);
+  }, [zIndex]);
+  return null;
+};
+export default HeatMapLayer;

packages/components/src/components/OpenLayers/Layers.jsx

@@ -0,0 +1,4 @@
+import React from 'react';
+export const Layers = ({ children }) => {
+  return <div>{children}</div>;
+};

packages/components/src/components/OpenLayers/Map.jsx

@@ -0,0 +1,50 @@
+import React, { useRef, useState, useEffect } from 'react';
+import * as ol from 'ol';
+
+export const MapContext = new React.createContext();
+
+const Map = ({ children, zoom, center, setSelected }) => {
+  const mapRef = useRef();
+  const [map, setMap] = useState(null);
+  // on component mount
+  useEffect(() => {
+    let options = {
+      view: new ol.View({ zoom, center }),
+      layers: [],
+      controls: [],
+      overlays: [],
+    };
+    let mapObject = new ol.Map(options);
+    mapObject.setTarget(mapRef.current);
+    setMap(mapObject);
+    return () => mapObject.setTarget(undefined);
+  }, []);
+
+  useEffect(() => {
+    if (map) {
+      if (setSelected !== null) {
+        let selected = null;
+        map.on('pointermove', function (e) {
+          map.forEachFeatureAtPixel(e.pixel, function (f) {
+            selected = f;
+            return true;
+          });
+          if (selected) {
+            setSelected(selected);
+          } else {
+            setSelected(null);
+          }
+        });
+      }
+    }
+  }, [map]);
+  return (
+    <MapContext.Provider value={{ map }}>
+      <div ref={mapRef} className="w-full" style={{height: '500px'}}>
+        {children}
+      </div>
+    </MapContext.Provider>
+  );
+};
+
+export default Map;

packages/components/src/components/OpenLayers/OpenLayers.tsx

@@ -0,0 +1,136 @@
+import { useEffect, useState } from 'react';
+import Map from './Map';
+import { Layers } from './Layers';
+import { Fill, Icon, Style } from 'ol/style';
+import * as olSource from 'ol/source';
+import TileLayer from './TileLayer';
+import { fromLonLat } from 'ol/proj';
+import VectorLayer from './VectorLayer';
+import { Vector as VectorSource } from 'ol/source';
+import GeoJSON from 'ol/format/GeoJSON';
+import KML from 'ol/format/KML';
+import { colors } from './colors';
+import { FullScreenControl, Controls, ListOfCheckboxes } from './Controls';
+import HeatMapLayer from './HeatMapLayer';
+
+function osm() {
+  return new olSource.OSM();
+}
+
+const formats = {
+  geojson: new GeoJSON(),
+  kml: new KML(),
+};
+
+interface OpenLayersProps {
+  layers: {
+    url: string;
+    name?: string;
+    format?: string;
+    heatmap?: boolean;
+  }[];
+  center?: [number, number];
+  zoom?: number;
+  popup?: (selected: any) => JSX.Element;
+}
+
+export default function OpenLayers({
+  layers,
+  center = [0, 0],
+  zoom = 1,
+  popup,
+}: OpenLayersProps) {
+  const [shownLayers, setShownLayers] = useState(
+    layers.map((layer) => layer.url)
+  );
+  const [selected, setSelected] = useState(null);
+  const [style, setStyle] = useState(null);
+
+  useEffect(() => {
+    const style = new Style({
+      fill: new Fill({
+        color: '#eeeeee',
+      }),
+      image: new Icon({
+        anchor: [0.5, 46],
+        anchorXUnits: 'fraction',
+        anchorYUnits: 'pixels',
+        width: 18,
+        height: 28,
+        src: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Google_Maps_icon_%282020%29.svg/418px-Google_Maps_icon_%282020%29.svg.png?20200218211225',
+      }),
+    });
+    setStyle(style);
+  }, []);
+
+  return (
+    <div className="relative">
+      <Map
+        center={fromLonLat(center)}
+        zoom={zoom}
+        setSelected={popup ? setSelected : null}
+      >
+        <Layers>
+          <TileLayer source={osm()} zIndex={0} />
+          {layers.map((layer, index) =>
+            !layer.heatmap ? (
+              <VectorLayer
+                key={index}
+                zIndex={shownLayers.includes(layer.url) ? 1 : -1}
+                source={
+                  new VectorSource({
+                    url: layer.url,
+                    format: layer.format
+                      ? formats[layer.format]
+                      : new GeoJSON(),
+                  })
+                }
+                style={function (feature) {
+                  const id = feature.getId();
+                  const color = feature.get('COLOR') || colors[id % 1302].hex;
+                  style.getFill().setColor(color);
+                  return style;
+                }}
+              />
+            ) : (
+              <HeatMapLayer
+                key={index}
+                zIndex={shownLayers.includes(layer.url) ? 1 : -1}
+                source={
+                  new VectorSource({
+                    url: layer.url,
+                    format: layer.format
+                      ? formats[layer.format]
+                      : new GeoJSON(),
+                  })
+                }
+                style={function (feature) {
+                  const color =
+                    feature.get('COLOR') || colors[feature.ol_uid % 1302].hex;
+                  style.getFill().setColor(color);
+                  return style;
+                }}
+              />
+            )
+          )}
+        </Layers>
+        {/* add a floating pane that will output the ListOfCheckboxes component using tailwind*/}
+        <div className="absolute bottom-0 right-0 m-4 p-4 z-50 bg-white rounded-lg shadow-xl">
+          <ListOfCheckboxes
+            layers={layers}
+            shownLayers={shownLayers}
+            setShownLayers={setShownLayers}
+          />
+        </div>
+        {popup && selected && (
+          <div className="absolute bottom-0 left-0 m-4 p-4 z-50 bg-white rounded-lg shadow-xl">
+            {popup(selected)}
+          </div>
+        )}
+        <Controls>
+          <FullScreenControl />
+        </Controls>
+      </Map>
+    </div>
+  );
+}

packages/components/src/components/OpenLayers/TileLayer.jsx

@@ -0,0 +1,23 @@
+import { useContext, useEffect } from 'react';
+import OLTileLayer from 'ol/layer/Tile';
+import { MapContext } from './Map';
+const TileLayer = ({ source, zIndex = 0 }) => {
+  const { map } = useContext(MapContext);
+  useEffect(() => {
+    if (!map) return;
+
+    let tileLayer = new OLTileLayer({
+      source,
+      zIndex,
+    });
+    map.addLayer(tileLayer);
+    tileLayer.setZIndex(zIndex);
+    return () => {
+      if (map) {
+        map.removeLayer(tileLayer);
+      }
+    };
+  }, [map]);
+  return null;
+};
+export default TileLayer;

packages/components/src/components/OpenLayers/VectorLayer.jsx

@@ -0,0 +1,33 @@
+import { useContext, useEffect, useState } from 'react';
+import OLVectorLayer from 'ol/layer/Vector';
+import { MapContext } from './Map';
+const VectorLayer = ({ source, style, zIndex = 0 }) => {
+  const { map } = useContext(MapContext);
+  const [vectorLayer, setVectorLayer] = useState(null);
+  useEffect(() => {
+    if (!map) return;
+    let vectorLayer = new OLVectorLayer({
+      source,
+      style,
+    });
+    const vectorSource = vectorLayer.getSource();
+    vectorSource.on('featuresloadend', function () {
+      vectorSource.getFeatures().forEach((feature, index) => {
+        feature.setId(index);
+      });
+    });
+    map.addLayer(vectorLayer);
+    setVectorLayer(vectorLayer);
+    vectorLayer.setZIndex(zIndex);
+    return () => {
+      if (map) {
+        map.removeLayer(vectorLayer);
+      }
+    };
+  }, [map]);
+  useEffect(() => {
+    vectorLayer && vectorLayer.setZIndex(zIndex);
+  }, [zIndex]);
+  return null;
+};
+export default VectorLayer;

packages/components/src/index.ts

@@ -4,4 +4,5 @@ export * from "./components/LineChart";
 export * from "./components/Vega";
 export * from "./components/VegaLite";
 export * from "./components/FlatUiTable";
+export * from './components/OpenLayers/OpenLayers';
 export * from "./components/Map";

packages/components/stories/OpenLayers.stories.tsx

@@ -0,0 +1,136 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import OpenLayers from '../src/components/OpenLayers/OpenLayers';
+
+const meta: Meta = {
+  title: 'Components/OpenLayers',
+  component: OpenLayers,
+  argTypes: {
+    layers: {
+      description: 'Layers to be added to the map',
+      control: {
+        type: 'array',
+      },
+    },
+    center: {
+      description: 'Center of the map',
+      defaultValue: [0, 0],
+      control: {
+        type: 'array',
+      },
+    },
+    zoom: {
+      description: 'Zoom level of the map',
+      defaultValue: 1,
+      control: {
+        type: 'number',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<any>;
+
+export const Secondary: Story = {
+  name: 'Map with OpenLayers',
+  args: {
+    layers: [
+      {
+        url: 'https://openlayers.org/data/vector/ecoregions.json',
+        name: 'Ecoregions',
+      },
+    ],
+  },
+};
+
+export const Primary: Story = {
+  name: 'Map with OpenLayers 2',
+  args: {
+    layers: [
+      {
+        url: 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_geography_marine_polys.geojson',
+        name: 'Marine regions',
+      },
+    ],
+  },
+};
+
+export const MapWithPopover: Story = {
+  name: 'Map with popup',
+  args: {
+    layers: [
+      {
+        url: 'https://openlayers.org/data/vector/ecoregions.json',
+        name: 'Ecoregions',
+      },
+    ],
+    popup: (feature: any) => {
+      return (
+        <div className="flex flex-col gap-y-1" style={{ color: 'red' }}>
+          <span className="font-bold">Biome name</span>
+          <span className="text-sm">{feature.values_.BIOME_NAME}</span>
+        </div>
+      );
+    },
+  },
+};
+
+export const Third: Story = {
+  name: 'Map with two layers',
+  args: {
+    layers: [
+      {
+        url: 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_geography_marine_polys.geojson',
+        name: 'Marine regions',
+      },
+      {
+        url: 'https://openlayers.org/data/vector/ecoregions.json',
+        name: 'Ecoregions',
+      },
+    ],
+  },
+};
+
+export const CustomCenter: Story = {
+  name: 'Map with custom center and zoom',
+  args: {
+    layers: [
+      {
+        url: 'https://openlayers.org/data/vector/ecoregions.json',
+        name: 'Ecoregions',
+      },
+    ],
+    center: [-15, 20],
+    zoom: 4,
+  },
+};
+
+export const PointsOnMap: Story = {
+  name: 'Map with points on',
+  args: {
+    layers: [
+      {
+        url: 'https://opendata.arcgis.com/datasets/9c58741995174fbcb017cf46c8a42f4b_25.geojson',
+        name: 'E-Scooter Parking Bays',
+      },
+    ],
+    center: [-1.055429957881787, 53.963900188025301],
+    zoom: 12,
+  },
+};
+
+export const KMLFile: Story = {
+  name: 'Map with KML File',
+  args: {
+    layers: [
+      {
+        url: 'https://openlayers.org/en/latest/examples/data/kml/2012_Earthquakes_Mag5.kml',
+        name: '2012 Earthquakes M5+',
+        format: 'kml',
+        heatmap: true,
+      },
+    ],
+  },
+};

packages/components/vite.config.ts

@@ -1,29 +1,15 @@
-import react from '@vitejs/plugin-react'
-import path from 'node:path'
-import { defineConfig } from 'vitest/config'
-import dts from 'vite-plugin-dts'
-import tailwindcss from 'tailwindcss'
-import { UserConfigExport } from 'vite'
-import replace from "rollup-plugin-re"
+import react from '@vitejs/plugin-react-swc';
+import path from 'node:path';
+import { defineConfig } from 'vitest/config';
+import dts from 'vite-plugin-dts';
+import tailwindcss from 'tailwindcss';
+import { UserConfigExport } from 'vite';
+import replace from 'rollup-plugin-re';
 
 const app = async (): Promise<UserConfigExport> => {
   return defineConfig({
     plugins: [
       react(),
-      replace({
-          patterns: [
-            {
-              match: /js-sha256/,
-              test: `eval("require('crypto')")`,
-              replace: `require('crypto')`,
-            },
-            {
-              match: /js-sha256/,
-              test: `eval("require('buffer').Buffer")`,
-              replace: `require('buffer').Buffer`,
-            },
-          ],
-        }),
       dts({
         insertTypesEntry: true,
       }),
@@ -34,6 +20,7 @@ const app = async (): Promise<UserConfigExport> => {
       },
     },
     build: {
+      target: 'es2020',
       lib: {
         entry: path.resolve(__dirname, 'src/index.ts'),
         name: 'components',
@@ -41,10 +28,24 @@ const app = async (): Promise<UserConfigExport> => {
         fileName: (format) => `components.${format}.js`,
       },
       rollupOptions: {
-        external: ['react', 'react-dom', 'tailwindcss', 'vega-lite', 'vega', 'react-vega', 'leaflet'],
+        external: [
+          'react',
+          'ol-mapbox-style',
+          'react-dom',
+          'tailwindcss',
+          'vega-lite',
+          'vega',
+          'react-vega',
+          'ol',
+          'leaflet'
+        ],
         output: {
+          manualChunks: undefined,
           globals: {
             react: 'React',
+            ol: 'ol',
+            'ol-mapbox-style': 'ol-mapbox-style',
+            'react-vega': 'react-vega',
             'react-dom': 'ReactDOM',
             tailwindcss: 'tailwindcss',
             leaflet: 'leaflet'
@@ -56,7 +57,7 @@ const app = async (): Promise<UserConfigExport> => {
       globals: true,
       environment: 'jsdom',
     },
-  })
-}
+  });
+};
 // https://vitejs.dev/config/
-export default app
+export default app;

packages/components/vite.config.ts.timestamp-1688577409260-11eb314b205fb.mjs

@@ -0,0 +1,64 @@
+// vite.config.ts
+import react from "file:///home/urutu-branco/Projetos/portaljs/node_modules/@vitejs/plugin-react-swc/index.mjs";
+import path from "node:path";
+import { defineConfig } from "file:///home/urutu-branco/Projetos/portaljs/node_modules/vitest/dist/config.js";
+import dts from "file:///home/urutu-branco/Projetos/portaljs/node_modules/vite-plugin-dts/dist/index.mjs";
+import tailwindcss from "file:///home/urutu-branco/Projetos/portaljs/node_modules/tailwindcss/lib/index.js";
+var __vite_injected_original_dirname = "/home/urutu-branco/Projetos/portaljs/packages/components";
+var app = async () => {
+  return defineConfig({
+    plugins: [
+      react(),
+      dts({
+        insertTypesEntry: true
+      })
+    ],
+    css: {
+      postcss: {
+        plugins: [tailwindcss]
+      }
+    },
+    build: {
+      target: "es2020",
+      lib: {
+        entry: path.resolve(__vite_injected_original_dirname, "src/index.ts"),
+        name: "components",
+        formats: ["es", "umd"],
+        fileName: (format) => `components.${format}.js`
+      },
+      rollupOptions: {
+        external: [
+          "react",
+          "ol-mapbox-style",
+          "react-dom",
+          "tailwindcss",
+          "vega-lite",
+          "vega",
+          "react-vega",
+          "ol",
+          "ol/dom.js"
+        ],
+        output: {
+          manualChunks: void 0,
+          globals: {
+            react: "React",
+            ol: "ol",
+            "ol/dom.js": "ol/dom.js",
+            "react-vega": "react-vega",
+            "react-dom": "ReactDOM",
+            tailwindcss: "tailwindcss"
+          }
+        }
+      }
+    },
+    test: {
+      globals: true,
+      environment: "jsdom"
+    }
+  });
+};
+var vite_config_default = app;
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvaG9tZS91cnV0dS1icmFuY28vUHJvamV0b3MvcG9ydGFsanMvcGFja2FnZXMvY29tcG9uZW50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9maWxlbmFtZSA9IFwiL2hvbWUvdXJ1dHUtYnJhbmNvL1Byb2pldG9zL3BvcnRhbGpzL3BhY2thZ2VzL2NvbXBvbmVudHMvdml0ZS5jb25maWcudHNcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfaW1wb3J0X21ldGFfdXJsID0gXCJmaWxlOi8vL2hvbWUvdXJ1dHUtYnJhbmNvL1Byb2pldG9zL3BvcnRhbGpzL3BhY2thZ2VzL2NvbXBvbmVudHMvdml0ZS5jb25maWcudHNcIjtpbXBvcnQgcmVhY3QgZnJvbSAnQHZpdGVqcy9wbHVnaW4tcmVhY3Qtc3djJztcbmltcG9ydCBwYXRoIGZyb20gJ25vZGU6cGF0aCc7XG5pbXBvcnQgeyBkZWZpbmVDb25maWcgfSBmcm9tICd2aXRlc3QvY29uZmlnJztcbmltcG9ydCBkdHMgZnJvbSAndml0ZS1wbHVnaW4tZHRzJztcbmltcG9ydCB0YWlsd2luZGNzcyBmcm9tICd0YWlsd2luZGNzcyc7XG5pbXBvcnQgeyBVc2VyQ29uZmlnRXhwb3J0IH0gZnJvbSAndml0ZSc7XG5pbXBvcnQgcmVwbGFjZSBmcm9tICdyb2xsdXAtcGx1Z2luLXJlJztcblxuY29uc3QgYXBwID0gYXN5bmMgKCk6IFByb21pc2U8VXNlckNvbmZpZ0V4cG9ydD4gPT4ge1xuICByZXR1cm4gZGVmaW5lQ29uZmlnKHtcbiAgICBwbHVnaW5zOiBbXG4gICAgICByZWFjdCgpLFxuICAgICAgZHRzKHtcbiAgICAgICAgaW5zZXJ0VHlwZXNFbnRyeTogdHJ1ZSxcbiAgICAgIH0pLFxuICAgIF0sXG4gICAgY3NzOiB7XG4gICAgICBwb3N0Y3NzOiB7XG4gICAgICAgIHBsdWdpbnM6IFt0YWlsd2luZGNzc10sXG4gICAgICB9LFxuICAgIH0sXG4gICAgYnVpbGQ6IHtcbiAgICAgIHRhcmdldDogJ2VzMjAyMCcsXG4gICAgICBsaWI6IHtcbiAgICAgICAgZW50cnk6IHBhdGgucmVzb2x2ZShfX2Rpcm5hbWUsICdzcmMvaW5kZXgudHMnKSxcbiAgICAgICAgbmFtZTogJ2NvbXBvbmVudHMnLFxuICAgICAgICBmb3JtYXRzOiBbJ2VzJywgJ3VtZCddLFxuICAgICAgICBmaWxlTmFtZTogKGZvcm1hdCkgPT4gYGNvbXBvbmVudHMuJHtmb3JtYXR9LmpzYCxcbiAgICAgIH0sXG4gICAgICByb2xsdXBPcHRpb25zOiB7XG4gICAgICAgIGV4dGVybmFsOiBbXG4gICAgICAgICAgJ3JlYWN0JyxcbiAgICAgICAgICAnb2wtbWFwYm94LXN0eWxlJyxcbiAgICAgICAgICAncmVhY3QtZG9tJyxcbiAgICAgICAgICAndGFpbHdpbmRjc3MnLFxuICAgICAgICAgICd2ZWdhLWxpdGUnLFxuICAgICAgICAgICd2ZWdhJyxcbiAgICAgICAgICAncmVhY3QtdmVnYScsXG4gICAgICAgICAgJ29sJyxcbiAgICAgICAgICAnb2wvZG9tLmpzJyxcbiAgICAgICAgXSxcbiAgICAgICAgb3V0cHV0OiB7XG4gICAgICAgICAgbWFudWFsQ2h1bmtzOiB1bmRlZmluZWQsXG4gICAgICAgICAgZ2xvYmFsczoge1xuICAgICAgICAgICAgcmVhY3Q6ICdSZWFjdCcsXG4gICAgICAgICAgICBvbDogJ29sJyxcbiAgICAgICAgICAgICdvbC9kb20uanMnOiAnb2wvZG9tLmpzJyxcbiAgICAgICAgICAgICdyZWFjdC12ZWdhJzogJ3JlYWN0LXZlZ2EnLFxuICAgICAgICAgICAgJ3JlYWN0LWRvbSc6ICdSZWFjdERPTScsXG4gICAgICAgICAgICB0YWlsd2luZGNzczogJ3RhaWx3aW5kY3NzJyxcbiAgICAgICAgICB9LFxuICAgICAgICB9LFxuICAgICAgfSxcbiAgICB9LFxuICAgIHRlc3Q6IHtcbiAgICAgIGdsb2JhbHM6IHRydWUsXG4gICAgICBlbnZpcm9ubWVudDogJ2pzZG9tJyxcbiAgICB9LFxuICB9KTtcbn07XG4vLyBodHRwczovL3ZpdGVqcy5kZXYvY29uZmlnL1xuZXhwb3J0IGRlZmF1bHQgYXBwO1xuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUEwVixPQUFPLFdBQVc7QUFDNVcsT0FBTyxVQUFVO0FBQ2pCLFNBQVMsb0JBQW9CO0FBQzdCLE9BQU8sU0FBUztBQUNoQixPQUFPLGlCQUFpQjtBQUp4QixJQUFNLG1DQUFtQztBQVF6QyxJQUFNLE1BQU0sWUFBdUM7QUFDakQsU0FBTyxhQUFhO0FBQUEsSUFDbEIsU0FBUztBQUFBLE1BQ1AsTUFBTTtBQUFBLE1BQ04sSUFBSTtBQUFBLFFBQ0Ysa0JBQWtCO0FBQUEsTUFDcEIsQ0FBQztBQUFBLElBQ0g7QUFBQSxJQUNBLEtBQUs7QUFBQSxNQUNILFNBQVM7QUFBQSxRQUNQLFNBQVMsQ0FBQyxXQUFXO0FBQUEsTUFDdkI7QUFBQSxJQUNGO0FBQUEsSUFDQSxPQUFPO0FBQUEsTUFDTCxRQUFRO0FBQUEsTUFDUixLQUFLO0FBQUEsUUFDSCxPQUFPLEtBQUssUUFBUSxrQ0FBVyxjQUFjO0FBQUEsUUFDN0MsTUFBTTtBQUFBLFFBQ04sU0FBUyxDQUFDLE1BQU0sS0FBSztBQUFBLFFBQ3JCLFVBQVUsQ0FBQyxXQUFXLGNBQWM7QUFBQSxNQUN0QztBQUFBLE1BQ0EsZUFBZTtBQUFBLFFBQ2IsVUFBVTtBQUFBLFVBQ1I7QUFBQSxVQUNBO0FBQUEsVUFDQTtBQUFBLFVBQ0E7QUFBQSxVQUNBO0FBQUEsVUFDQTtBQUFBLFVBQ0E7QUFBQSxVQUNBO0FBQUEsVUFDQTtBQUFBLFFBQ0Y7QUFBQSxRQUNBLFFBQVE7QUFBQSxVQUNOLGNBQWM7QUFBQSxVQUNkLFNBQVM7QUFBQSxZQUNQLE9BQU87QUFBQSxZQUNQLElBQUk7QUFBQSxZQUNKLGFBQWE7QUFBQSxZQUNiLGNBQWM7QUFBQSxZQUNkLGFBQWE7QUFBQSxZQUNiLGFBQWE7QUFBQSxVQUNmO0FBQUEsUUFDRjtBQUFBLE1BQ0Y7QUFBQSxJQUNGO0FBQUEsSUFDQSxNQUFNO0FBQUEsTUFDSixTQUFTO0FBQUEsTUFDVCxhQUFhO0FBQUEsSUFDZjtBQUFBLEVBQ0YsQ0FBQztBQUNIO0FBRUEsSUFBTyxzQkFBUTsiLAogICJuYW1lcyI6IFtdCn0K