diff --git a/packages/components/.storybook/preview-head.html b/packages/components/.storybook/preview-head.html index 3ccd28d1..b43dc699 100644 --- a/packages/components/.storybook/preview-head.html +++ b/packages/components/.storybook/preview-head.html @@ -1,19 +1,10 @@ - - - - + diff --git a/packages/components/.storybook/preview.ts b/packages/components/.storybook/preview.ts index 45152b91..1ec353c5 100644 --- a/packages/components/.storybook/preview.ts +++ b/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 = { diff --git a/packages/components/package.json b/packages/components/package.json index c2ed05ec..4416c004 100644 --- a/packages/components/package.json +++ b/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", - "prepare": "npm run build" + "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", + "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", diff --git a/packages/components/postcss.config.js b/packages/components/postcss.config.js index 2e7af2b7..e24f213a 100644 --- a/packages/components/postcss.config.js +++ b/packages/components/postcss.config.js @@ -1,6 +1,9 @@ +console.log('PostCSS') + export default { plugins: { + 'postcss-import': {}, tailwindcss: {}, autoprefixer: {}, }, -} +}; diff --git a/packages/components/scripts/fix-leaflet.cjs b/packages/components/scripts/fix-leaflet.cjs new file mode 100644 index 00000000..4878a51b --- /dev/null +++ b/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 }); diff --git a/packages/components/src/components/Map.tsx b/packages/components/src/components/Map.tsx index 108c3eca..e55b2769 100644 --- a/packages/components/src/components/Map.tsx +++ b/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(false); - title; // By default, assumes data is an Array... const [geoJsonData, setGeoJsonData] = useState(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]" - whenReady={(map) => { + className="h-80 w-full" + // @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 = `

${title}

`; }; if (title) info.addTo(map.target); + + setTimeout(() => map.target.invalidateSize(), 5000); }} > { - return { color: geoJsonFeature.color }; + style={(geoJsonFeature: any) => { + return { color: geoJsonFeature?.color }; }} onEachFeature={onEachFeature} /> diff --git a/packages/components/src/include.css b/packages/components/src/include.css new file mode 100644 index 00000000..c9bc585e --- /dev/null +++ b/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; + } +} diff --git a/packages/components/src/index.css b/packages/components/src/index.css index c61c638e..7a21fb11 100644 --- a/packages/components/src/index.css +++ b/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 */ -@layer base { - svg[tw^='animate-pulse w-12'] { - max-width: 100px; - } -} +@import "tailwindcss/base"; +@import "tailwindcss/components"; +@import "leaflet"; +@import "include"; +@import "tailwindcss/utilities"; + diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts index b0e5e0b5..0c546556 100644 --- a/packages/components/src/index.ts +++ b/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"; diff --git a/packages/components/tailwind.config.js b/packages/components/tailwind.config.js index d21f1cda..98fd9860 100644 --- a/packages/components/tailwind.config.js +++ b/packages/components/tailwind.config.js @@ -1,8 +1,6 @@ /** @type {import('tailwindcss').Config} */ export default { content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], - theme: { - extend: {}, - }, + theme: {}, plugins: [], }; diff --git a/packages/components/vite.config.ts b/packages/components/vite.config.ts index ddc2109f..1f62d18c 100644 --- a/packages/components/vite.config.ts +++ b/packages/components/vite.config.ts @@ -41,12 +41,13 @@ const app = async (): Promise => { 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' }, }, },