mapwhizz 1.1.1 → 2.0.0

package/package.json

@@ -1,19 +1,44 @@
 {
   "name": "mapwhizz",
-  "version": "1.1.1",
-  "description": "\"# mapwhizz\"",
-  "main": "index.js",
+  "version": "2.0.0",
+  "description": "A reusable and customizable SVG world map React component",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "rollup -c rollup.config.js",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.22.0",
+    "@babel/preset-env": "^7.22.0",
+    "@babel/preset-react": "^7.22.0",
+    "@rollup/plugin-babel": "^6.0.0",
+    "@rollup/plugin-commonjs": "^25.0.0",
+    "@rollup/plugin-node-resolve": "^15.0.0",
+    "rollup": "^3.28.0",
+    "rollup-plugin-terser": "^7.0.2"
   },
   "keywords": [
-    "map",
     "map",
     "geomap",
     "geo",
-    "geo map",
-    ""
+    "world map",
+    "react",
+    "svg map",
+    "choropleth"
   ],
   "author": "samer-goda",
-  "license": "ISC"
+  "license": "ISC",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/samer-goda/mapwhizz"
+  }
 }

package/dist/main.cjs

@@ -1,22 +0,0 @@
-import resolve from '@rollup/plugin-node-resolve';
-import commonjs from '@rollup/plugin-commonjs';
-import { babel } from '@rollup/plugin-babel';
-
-export default {
-  input: 'src/index.js', // Entry point of your library
-  output: [
-    {
-      file: 'dist/main.cjs', // CommonJS build
-      format: 'cjs',
-    },
-    {
-      file: 'dist/module.js', // ES module build
-      format: 'es',
-    },
-  ],
-  plugins: [
-    resolve(), // Resolves node_modules
-    commonjs(), // Converts CommonJS to ES modules
-    babel({ babelHelpers: 'bundled' }), // Transpiles modern JS
-  ],
-};

package/src/index.js

@@ -1,139 +0,0 @@
-
-// Start Class MapWhizz
-class MapWhizz {
-  constructor(container, data) {
-    if (!(container instanceof HTMLElement)) {
-      console.error('Invalid container element');
-      return;
-    }
-
-    this.container = container;
-    this.data = data;
-   //  this.mapData = mapData;
-
-    this.svgElement = null;
-  }
-
-  mount() {
-    try {
-      const parser = new DOMParser();
-      const svgDoc = parser.parseFromString(this.mapData, 'image/svg+xml');
-      this.svgElement = svgDoc.documentElement;
-
-      this.container.innerHTML = ''; // Clear previous content
-      this.container.appendChild(this.svgElement);
-
-      this.calculateValueRange();
-      this.addStyles();
-      this.applyColorsAndInteractions();
-    } catch (error) {
-      console.error('Error loading SVG:', error);
-    }
-  }
-
-  calculateValueRange() {
-    this.minValue = Infinity;
-    this.maxValue = -Infinity;
-
-    this.data.forEach(({ value }) => {
-      this.minValue = Math.min(this.minValue, value);
-      this.maxValue = Math.max(this.maxValue, value);
-    });
-  }
-
-  getColorForValue(value) {
-    const percentage =
-      (value - this.minValue) / (this.maxValue - this.minValue);
-    const startColor = [240, 249, 255]; // Light blue
-    const endColor = [24, 72, 176]; // Dark blue
-
-    const r = Math.round(
-      startColor[0] + percentage * (endColor[0] - startColor[0])
-    );
-    const g = Math.round(
-      startColor[1] + percentage * (endColor[1] - startColor[1])
-    );
-    const b = Math.round(
-      startColor[2] + percentage * (endColor[2] - startColor[2])
-    );
-
-    return `rgb(${r}, ${g}, ${b})`;
-  }
-
-  addStyles() {
-    const style = document.createElement('style');
-    style.textContent = `
-       path {
-         transition: all 0.3s ease;
-         stroke: #fff;
-         stroke-width: 1;
-         fill: #ccc;
-       }
-       path:hover {
-         fill: rgb(0, 0, 255) !important;
-         stroke-width: 2;
-         cursor: pointer;
-       }
-     `;
-    document.head.appendChild(style);
-  }
-
-  applyColorsAndInteractions() {
-    const countryDataMap = new Map(
-      this.data.map((item) => [item.country, item])
-    );
-
-    this.svgElement.querySelectorAll('path').forEach((path) => {
-      const country = path.getAttribute('title');
-      const countryData = countryDataMap.get(country);
-
-      if (countryData) {
-        path.style.fill = this.getColorForValue(countryData.value);
-        this.addHoverInteraction(path, country, countryData);
-      }
-    });
-  }
-
-  addHoverInteraction(path, country, countryData) {
-    path.addEventListener('mouseover', (event) => {
-      const tooltip = this.createTooltip(`${country}: ${countryData.value}`);
-      document.body.appendChild(tooltip);
-
-      const moveTooltip = (e) => {
-        tooltip.style.left = `${e.pageX + 10}px`;
-        tooltip.style.top = `${e.pageY + 10}px`;
-      };
-
-      document.addEventListener('mousemove', moveTooltip);
-
-      path.addEventListener('mouseout', () => {
-        tooltip.remove();
-        document.removeEventListener('mousemove', moveTooltip);
-      });
-    });
-  }
-
-  createTooltip(text) {
-    const tooltip = document.createElement('div');
-    tooltip.style.position = 'absolute';
-    tooltip.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
-    tooltip.style.color = '#fff';
-    tooltip.style.padding = '5px 10px';
-    tooltip.style.borderRadius = '4px';
-    tooltip.style.pointerEvents = 'none';
-    tooltip.style.fontSize = '12px';
-    tooltip.style.zIndex = '1000';
-    tooltip.textContent = text;
-
-    return tooltip;
-  }
-}
-
-// UMD Export (Works with ES6, CommonJS, and <script> tag)
-if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
-  module.exports = MapWhizz;
-} else {
-  window.MapWhizz = MapWhizz;
-}
-
-// export default MapWhizz;