[openspending, maps][m]: fix build for leaflet map

packages/components/.storybook/preview-head.html

@@ -1,19 +1,10 @@
 <!--
-  This is necessary for maps to work.
+  This is necessary for Leaflet maps to work.
-  If we decide to distribute this component,
-  perhaps we could use a provider for  this,
-  e.g.
-  .../_app.tsx
-  <PortalJSProvider>
-    <Component />
-  </PortalJSProvider>
 -->
 
-<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+<link
+  rel="stylesheet"
+  href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
   integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
-     crossorigin=""/>
+  crossorigin=""
-
+/>
- <!-- Make sure you put this AFTER Leaflet's CSS -->
-<!--  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
-     integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
-     crossorigin=""></script> -->

packages/components/.storybook/preview.ts

@@ -1,6 +1,7 @@
 import 'tailwindcss/tailwind.css'
 import '../src/index.css'
 
+
 import type { Preview } from '@storybook/react';
 
 const preview: Preview = {

packages/components/package.json

@@ -12,12 +12,14 @@
   ],
   "scripts": {
     "dev": "npm run storybook",
-    "build": "tsc && vite build && npm run build-tailwind",
+    "example": "vite",
+    "build": "tsc && vite build && npm run build-tailwind && npm run fix-leaflet",
     "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 -o ./dist/styles.css --minify",
+    "build-tailwind": "NODE_ENV=production npx tailwindcss --postcss -c tailwind.config.js -i src/index.css -o ./dist/styles.css --minify",
-    "prepare": "npm run build"
+    "prepare": "npm run build",
+    "fix-leaflet": "node ./scripts/fix-leaflet.cjs"
   },
   "peerDependencies": {
     "react": "^18.2.0",
@@ -66,6 +68,8 @@
     "eslint-plugin-storybook": "^0.6.11",
     "json": "^11.0.0",
     "postcss": "^8.4.23",
+    "postcss-import": "^15.1.0",
+    "postcss-import-url": "^7.2.0",
     "prop-types": "^15.8.1",
     "storybook": "^7.0.7",
     "tailwindcss": "^3.3.2",

packages/components/postcss.config.js

@@ -1,6 +1,9 @@
+console.log('PostCSS')
+
 export default {
   plugins: {
+    'postcss-import': {},
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

packages/components/scripts/fix-leaflet.cjs

@@ -0,0 +1,6 @@
+const fs = require('fs');
+const path = require('path');
+
+const leafletPath = path.join(require.resolve('leaflet'), '../')
+
+fs.cpSync(`${leafletPath}images`,'./dist/images', { recursive: true });

packages/components/src/components/Map.tsx

@@ -6,7 +6,6 @@ import {
   MapContainer,
   TileLayer,
   GeoJSON as GeoJSONLayer,
-  useMap,
 } from 'react-leaflet';
 
 import * as L from 'leaflet';
@@ -37,7 +36,6 @@ export function Map({
 }: MapProps) {
   const [isLoading, setIsLoading] = useState<boolean>(false);
 
-  title;
   //  By default, assumes data is an Array...
   const [geoJsonData, setGeoJsonData] = useState<any>(null);
 
@@ -69,8 +67,6 @@ export function Map({
   }, []);
 
   const onEachFeature = (feature, layer) => {
-    const map = useMap();
-
     const geometryType = feature.type;
 
     if (tooltip.prop)
@@ -105,29 +101,32 @@ export function Map({
       center={[center.latitude, center.longitude]}
       zoom={zoom}
       scrollWheelZoom={false}
-      className="h-[500px]"
+      className="h-80 w-full"
-      whenReady={(map) => {
+      // @ts-ignore
+      whenReady={(map: any) => {
         map.target.scrollWheelZoom.enable();
 
-        var info = L.control();
+        var info = new L.Control() as any;
 
-        info.onAdd = function (map) {
+        info.onAdd = function () {
           this._div = L.DomUtil.create('div', 'info');
           this.update();
           return this._div;
         };
 
-        info.update = function (props) {
+        info.update = function () {
           this._div.innerHTML = `<h4 style="font-weight: 600; background: #f9f9f9; padding: 5px; border-radius: 5px; color: #464646;">${title}</h4>`;
         };
 
         if (title) info.addTo(map.target);
+
+        setTimeout(() => map.target.invalidateSize(), 5000);
       }}
     >
       <GeoJSONLayer
         data={geoJsonData}
-        style={(geoJsonFeature) => {
+        style={(geoJsonFeature: any) => {
-          return { color: geoJsonFeature.color };
+          return { color: geoJsonFeature?.color };
         }}
         onEachFeature={onEachFeature}
       />

packages/components/src/include.css

@@ -0,0 +1,6 @@
+/* Temporary fix for a size issue with FlatUiTable loading indicator on Firefox */
+@layer base {
+  svg[tw^='animate-pulse w-12'] {
+    max-width: 100px;
+  }
+}

packages/components/src/index.css

@@ -1,10 +1,7 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
 
-/* Temporary fix for a size issue with FlatUiTable loading indicator on Firefox */
+@import "tailwindcss/base";
-@layer base {
+@import "tailwindcss/components";
-  svg[tw^='animate-pulse w-12'] {
+@import "leaflet";
-    max-width: 100px;
+@import "include";
-  }
+@import "tailwindcss/utilities";
-}
+

packages/components/src/index.ts

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

packages/components/tailwind.config.js

@@ -1,8 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
-  theme: {
+  theme: {},
-    extend: {},
-  },
   plugins: [],
 };

packages/components/vite.config.ts

@@ -41,12 +41,13 @@ const app = async (): Promise<UserConfigExport> => {
         fileName: (format) => `components.${format}.js`,
       },
       rollupOptions: {
-        external: ['react', 'react-dom', 'tailwindcss', 'vega-lite', 'vega', 'react-vega'],
+        external: ['react', 'react-dom', 'tailwindcss', 'vega-lite', 'vega', 'react-vega', 'leaflet'],
         output: {
           globals: {
             react: 'React',
             'react-dom': 'ReactDOM',
             tailwindcss: 'tailwindcss',
+            leaflet: 'leaflet'
           },
         },
       },