ts-maps 0.0.0 → 0.1.1

package/README.md

@@ -1,248 +1,206 @@
-<p align="center"><img src="https://github.com/stacksjs/mail-server/blob/main/.github/art/cover.jpg?raw=true" alt="Social Card of this repo"></p>
+<p align="center"><img src="https://github.com/stacksjs/ts-maps/blob/main/.github/art/cover.jpg?raw=true" alt="Social Card of ts-maps"></p>
 
 [![npm version][npm-version-src]][npm-version-href]
 [![GitHub Actions][github-actions-src]][github-actions-href]
 [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
-<!-- [![npm downloads][npm-downloads-src]][npm-downloads-href] -->
-<!-- [![Codecov][codecov-src]][codecov-href] -->
 
-# The Post
+# ts-maps
 
-> Finally a mail server that can be managed.
-
-Perfect for local development and testing environments. _Production-ready release coming soon!_
+> Modern TypeScript library for creating stunning vector maps
 
 ## Features
 
-- 📨 **Mail Server** _lightweight, configurable, and extensible_
-- 🛠️ **Mail Utilities** _send, receive, and manage emails_
-- 📦 **Mail UI** _web interfaces for managing emails, including a component library_
-- 🤖 **CLI** _command-line interface for managing emails_
-- 🔒 **Security** _TLS support, authentication, and spam protection_
-- 🚀 **Performance** _optimized for high-throughput environments_
-- 🎯 **Modern** _built with TypeScript, zero dependencies_
-- 📝 **Logging** _detailed logging and monitoring capabilities_
+- 🗺️ **Vector Maps**
+  - High-quality SVG-based interactive maps
+  - Multiple projection types (Mercator, Equal Earth)
+  - Built-in world maps and custom regions
 
-## Install
+- 📊 **Data Visualization**
+  - Choropleth maps with customizable scales
+  - Heat maps and bubble charts
+  - Interactive legends and tooltips
 
-```bash
-bun install -d @stacksjs/post
-```
+- 🎯 **Framework Agnostic**
+  - Zero dependencies
+  - Works with any framework
+  - Official React and Vue bindings
 
-<!-- _Alternatively, you can install:_
+- 🔒 **Type Safety**
+  - Full TypeScript support
+  - Strict types for better DX
+  - Comprehensive type definitions
+
+## Installation
 
 ```bash
-brew install post # wip
-pkgx install post # wip
-``` -->
+# Using npm
+npm install ts-maps
 
-## Get Started
+# Using pnpm
+pnpm add ts-maps
 
-There are two ways of using the mail server: _as a library or as a CLI._
+# Using yarn
+yarn add ts-maps
 
-### Library Usage
+# Using bun
+bun add ts-maps
+```
 
-```ts
-import { SMTPServer } from '@stacksjs/post'
+### Framework Bindings
 
-// Basic SMTP Server
-const server = new SMTPServer({
-  secure: true,
-  name: 'mail.example.com',
-  banner: 'Welcome to My Mail Server',
-})
+```bash
+# React
+npm install ts-maps ts-maps-react
 
-server.listen(25)
-
-// Advanced Configuration
-const secureServer = new SMTPServer({
-  // TLS Configuration
-  secure: true,
-  needsUpgrade: false,
-  sniOptions: new Map([
-    ['example.com', {
-      key: fs.readFileSync('certs/example.com.key'),
-      cert: fs.readFileSync('certs/example.com.cert')
-    }]
-  ]),
-
-  // Authentication
-  authMethods: ['PLAIN', 'LOGIN'],
-  onAuth: (auth, session, callback) => {
-    if (auth.username === 'user' && auth.password === 'pass')
-      callback(null, { user: 'user' })
-    else
-      callback(new Error('Invalid credentials'))
-  },
+# Vue
+npm install ts-maps ts-maps-vue
+```
 
-  // Message Handling
-  size: 1024 * 1024, // 1MB limit
-  onData: (stream, session, callback) => {
-    stream.pipe(process.stdout) // Echo message to console
-    stream.on('end', callback)
+## Quick Start
+
+```typescript
+import type { VectorMapOptions } from 'ts-maps'
+import { VectorMap } from 'ts-maps'
+
+// Create a map instance
+const map = new VectorMap({
+  container: 'map',
+  map: 'world',
+  theme: 'light',
+  style: {
+    regions: {
+      fill: '#e4e4e4',
+      stroke: '#ffffff',
+      strokeWidth: 1,
+    },
+    hover: {
+      fill: '#2ca25f',
+    },
   },
-
-  // Logging
-  logger: {
-    info: console.log,
-    debug: console.debug,
-    error: console.error
-  }
 })
 
-secureServer.listen(465) // SMTPS port
+// Add interactivity
+map.on('regionClick', (event, region) => {
+  console.log(`Clicked: ${region.id}`)
+})
 ```
 
-### Event Handling
+### Data Visualization
 
-```ts
-server.on('connect', (session) => {
-  console.log('New connection from', session.remoteAddress)
-})
+```typescript
+import type { DataVisualizationOptions } from 'ts-maps'
+import { VectorMap } from 'ts-maps'
 
-server.on('error', (err) => {
-  console.error('Server error:', err)
+const map = new VectorMap({
+  container: 'map',
+  map: 'world',
 })
 
-server.on('close', () => {
-  console.log('Server shutting down')
-})
+// Add data visualization
+const options: DataVisualizationOptions = {
+  scale: ['#e5f5f9', '#2ca25f'], // Color gradient from light blue to green
+  values: {
+    US: 100,
+    CA: 80,
+    GB: 65,
+  },
+}
+
+map.visualizeData(options)
 ```
 
-### CLI Usage
+### React Component
+
+```tsx
+import type { VectorMapProps } from 'ts-maps-react'
+import { useVectorMap } from 'ts-maps-react'
+
+function WorldMap() {
+  const { map, isLoading } = useVectorMap({
+    map: 'world',
+    theme: 'light',
+  })
+
+  return (
+    <div className="map-container">
+      {isLoading
+        ? (
+            <div>Loading...</div>
+          )
+        : (
+            <div id="map" />
+          )}
+    </div>
+  )
+}
+```
 
-The Post CLI provides a comprehensive set of commands for managing your mail server:
+### Vue Component
 
-```bash
-# Start the server
-post start                   # Start with default config
-post start --config custom   # Use custom config file
-post start --port 25         # Specify port
-post start --secure          # Start in TLS mode
-
-# Configuration
-post init                   # Create default config file
-post config show            # Display current configuration
-post config set key=value   # Update configuration
-
-# Monitoring
-post status                 # Show server status
-post logs                   # View server logs
-post logs --live            # Live log streaming
-post stats                  # Show server statistics
-
-# User Management
-post users list            # List all users
-post users add <email>     # Add new user
-post users remove <email>  # Remove user
-post users quota <email>   # Show/set user quota
-
-# Queue Management
-post queue list            # List queued messages
-post queue flush           # Process all queued messages
-post queue remove <id>     # Remove message from queue
-
-# Security
-post tls setup            # Configure TLS certificates
-post tls renew            # Renew certificates
-post blacklist add <ip>   # Add IP to blacklist
-post whitelist add <ip>   # Add IP to whitelist
-
-# Maintenance
-post backup              # Create server backup
-post restore <file>      # Restore from backup
-post cleanup             # Clean old logs/messages
-
-# Advanced
-post test             # Run server tests
-post benchmark        # Run performance tests
-post debug            # Start in debug mode
-```
+```vue
+<script setup lang="ts">
+import type { VectorMapOptions } from 'ts-maps'
+import { useVectorMap } from 'ts-maps-vue'
 
-## Configuration
-
-The Mail Server can be configured using a `post.config.ts` _(or `post.config.js`)_ file:
-
-```ts
-// post.config.ts
-export default {
-  // Server Configuration
-  server: {
-    name: 'mail.example.com',
-    secure: true,
-    ports: {
-      smtp: 25,
-      smtps: 465,
-      submission: 587
-    }
-  },
+const { map, isLoading } = useVectorMap({
+  map: 'world',
+  theme: 'light',
+})
+</script>
+
+<template>
+  <div class="map-container">
+    <div v-if="isLoading">
+      Loading...
+    </div>
+    <div v-else id="map" />
+  </div>
+</template>
+```
 
-  // TLS Configuration
-  tls: {
-    cert: '/path/to/cert.pem',
-    key: '/path/to/key.pem',
-    domains: ['example.com', 'mail.example.com']
-  },
+## Documentation
 
-  // Authentication
-  auth: {
-    methods: ['PLAIN', 'LOGIN'],
-    database: 'sqlite://users.db'
-  },
+- [Introduction](https://ts-maps.dev/intro)
+- [Installation](https://ts-maps.dev/install)
+- [Usage Guide](https://ts-maps.dev/usage)
+- [API Reference](https://ts-maps.dev/api)
+- [Examples](https://ts-maps.dev/examples)
+- [Playground](https://ts-maps.dev/playground)
 
-  // Storage
-  storage: {
-    type: 'disk',
-    path: '/var/mail',
-    quota: '1GB'
-  },
+## Development
 
-  // Security
-  security: {
-    rateLimit: {
-      window: '1h',
-      max: 1000
-    },
-    spamProtection: true,
-    dnsbl: ['zen.spamhaus.org']
-  },
+1. Clone the repository:
 
-  // Logging
-  logging: {
-    level: 'info',
-    file: '/var/log/post.log',
-    format: 'json'
-  }
-}
+```bash
+git clone https://github.com/stacksjs/ts-maps.git
+cd ts-maps
 ```
 
-_Then run:_
+2. Install dependencies:
 
 ```bash
-post start
+pnpm install
 ```
 
-To learn more, head over to the [documentation](https://the-post.sh/).
-
-## Testing
+3. Start development:
 
 ```bash
-bun test
+pnpm dev
 ```
 
 ## Changelog
 
-Please see our [releases](https://github.com/stacksjs/stacks/releases) page for more information on what has changed recently.
+Please see our [releases](https://github.com/stacksjs/ts-maps/releases) page for more information on what has changed recently.
 
 ## Contributing
 
-Please review the [Contributing Guide](https://github.com/stacksjs/contributing) for details.
+Please see [CONTRIBUTING](https://github.com/stacksjs/stacks/blob/main/.github/CONTRIBUTING.md) for details.
 
 ## Community
 
 For help, discussion about best practices, or any other conversation that would benefit from being searchable:
 
-[Discussions on GitHub](https://github.com/stacksjs/stacks/discussions)
+[Discussions on GitHub](https://github.com/stacksjs/ts-maps/discussions)
 
 For casual chit-chat with others using this package:
 
@@ -250,9 +208,9 @@ For casual chit-chat with others using this package:
 
 ## Postcardware
 
-Two things are true: Stacks OSS will always stay open-source, and we do love to receive postcards from wherever Stacks is used! _We also publish them on our website. And thank you, Spatie_
+“Software that is free, but hopes for a postcard.” We love receiving postcards from around the world showing where `ts-maps` is being used! We showcase them on our website too.
 
-Our address: Stacks.js, 12665 Village Ln #2306, Playa Vista, CA 90094 🌎
+Our address: Stacks.js, 12665 Village Ln #2306, Playa Vista, CA 90094, United States 🌎
 
 ## Sponsors
 
@@ -263,22 +221,21 @@ We would like to extend our thanks to the following sponsors for funding Stacks
 
 ## Credits
 
-- [Andris Reinman](https://github.com/andris9) _(Author of `nodemailer` & `smtp-server`)_
-- [Ralph Slooten](https://avatars.githubusercontent.com/u/1463435?s=64&v=4) _(Author of `mailtrap`)_
+- [jsvectormap](https://github.com/themustafaomar/jsvectormap)
 - [Chris Breuer](https://github.com/chrisbbreuer)
-- [All Contributors](../../contributors)
+- [All Contributors](https://github.com/stacksjs/ts-maps/contributors)
 
 ## License
 
-The MIT License (MIT). Please see [LICENSE](https://github.com/stacksjs/stacks/tree/main/LICENSE.md) for more information.
+The MIT License (MIT). Please see [LICENSE](https://github.com/stacksjs/clarity/blob/main/LICENSE.md) for more information.
 
 Made with 💙
 
 <!-- Badges -->
-[npm-version-src]: https://img.shields.io/npm/v/@stacksjs/mail-server?style=flat-square
-[npm-version-href]: https://npmjs.com/package/@stacksjs/mail-server
-[github-actions-src]: https://img.shields.io/github/actions/workflow/status/stacksjs/mail-server/ci.yml?style=flat-square&branch=main
-[github-actions-href]: https://github.com/stacksjs/mail-server/actions?query=workflow%3Aci
+[npm-version-src]: https://img.shields.io/npm/v/@stacksjs/clarity?style=flat-square
+[npm-version-href]: https://npmjs.com/package/@stacksjs/clarity
+[github-actions-src]: https://img.shields.io/github/actions/workflow/status/stacksjs/clarity/ci.yml?style=flat-square&branch=main
+[github-actions-href]: https://github.com/stacksjs/clarity/actions?query=workflow%3Aci
 
-<!-- [codecov-src]: https://img.shields.io/codecov/c/gh/stacksjs/mail-server/main?style=flat-square
-[codecov-href]: https://codecov.io/gh/stacksjs/mail-server -->
+<!-- [codecov-src]: https://img.shields.io/codecov/c/gh/stacksjs/clarity/main?style=flat-square
+[codecov-href]: https://codecov.io/gh/stacksjs/clarity -->

package/dist/{coords-to-point.d.ts → core/coords-to-point.d.ts}

@@ -16,11 +16,13 @@ export default function coordsToPoint(this: MapInterface, lat: number, lng: numb
     return false
   }
 
-  const x = inset.leftLng + ((coords.x - inset.leftLng) / (inset.rightLng - inset.leftLng)) * inset.width
-  const y = inset.topLat + ((coords.y - inset.topLat) / (inset.bottomLat - inset.topLat)) * inset.height
+  const { bbox } = inset
+
+  const x = (coords.x - bbox[0].x) / (bbox[1].x - bbox[0].x) * inset.width * this.scale
+  const y = (coords.y - bbox[0].y) / (bbox[1].y - bbox[0].y) * inset.height * this.scale
 
   return {
-    x,
-    y,
+    x: x + this.transX * this.scale + inset.left * this.scale,
+    y: y + this.transY * this.scale + inset.top * this.scale,
   }
 };

package/dist/{create-markers.d.ts → core/create-markers.d.ts}

@@ -26,7 +26,7 @@ export default function createMarkers(
       {
         index,
         map: this,
-        label: this.params.labels?.markers ? {} : undefined,
+        label: this.params.labels?.markers,
         labelsGroup: this._markerLabelsGroup,
         cx: point.x,
         cy: point.y,
@@ -34,14 +34,13 @@ export default function createMarkers(
         config,
         isRecentlyCreated,
       },
-      merge(this.params.markerStyle || {}, { ...(config.style || {}) }, true),
+      merge({ initial: {} }, merge(this.params.markerStyle || {}, { ...(config.style || {}) }, true)),
     )
 
     if (this._markers?.[index]) {
       this.removeMarkers([index])
     }
 
-    this._markers = this._markers || {}
     this._markers[index] = {
       _uid: uid,
       config,

package/dist/{create-regions.d.ts → core/create-regions.d.ts}

@@ -6,14 +6,17 @@ export default function createRegions(this: MapInterface): void {
       map: this,
       code,
       path: this._mapData.paths[code].path,
-      style: merge({}, this.params.regionStyle || {}),
+      style: merge({ initial: {} }, this.params.regionStyle || {}),
       labelStyle: this.params.regionLabelStyle,
       labelsGroup: this._regionLabelsGroup,
       label: this.params.labels?.regions ? {} : undefined,
     })
 
     this.regions[code] = {
+      config: this._mapData.paths[code],
       element: region,
+      path: this._mapData.paths[code].path,
+      name: code,
     } as RegionType
   }
 };

package/dist/{get-inset-for-point.d.ts → core/get-inset-for-point.d.ts}

@@ -14,11 +14,27 @@ declare interface Inset {
 export default function getInsetForPoint(this: MapInterface, x: number, y: number): Inset | undefined {
   const insets = Map.maps[this.params.map.name].insets
 
+  if (!insets || insets.length === 0) {
+    return undefined
+  }
+
   for (let index = 0; index < insets.length; index++) {
-    const [start, end] = insets[index].bbox
+    const inset = insets[index]
+
+    if (!inset || !inset.bbox || inset.bbox.length < 2) {
+      continue
+    }
+
+    const [start, end] = inset.bbox
+
+    if (!start || !end) {
+      continue
+    }
 
     if (x > start.x && x < end.x && y > start.y && y < end.y) {
-      return insets[index]
+      return inset
     }
   }
+
+  return undefined
 };

package/dist/core/index.d.ts

@@ -0,0 +1,24 @@
+declare interface CoreModule {
+  _setupContainerEvents: typeof _setupContainerEvents
+  _setupElementEvents: typeof _setupElementEvents
+  _setupZoomButtons: typeof _setupZoomButtons
+  _setupContainerTouchEvents: typeof _setupContainerTouchEvents
+  _createRegions: typeof _createRegions
+  _createLines: typeof _createLines
+  _createMarkers: typeof _createMarkers
+  _createSeries: typeof _createSeries
+  _applyTransform: typeof _applyTransform
+  _resize: typeof _resize
+  _setScale: typeof _setScale
+  setFocus: typeof setFocus
+  updateSize: typeof updateSize
+  coordsToPoint: typeof coordsToPoint
+  getInsetForPoint: typeof getInsetForPoint
+  getMarkerPosition: typeof getMarkerPosition
+  _repositionLines: typeof _repositionLines
+  _repositionMarkers: typeof _repositionMarkers
+  _repositionLabels: typeof _repositionLabels
+}
+declare const core: CoreModule;
+
+export default core;

package/dist/core/reposition-labels.d.ts

@@ -0,0 +1,23 @@
+export default function repositionLabels(this: MapInterface): void {
+  const labels = this.params.labels || {}
+
+  if (labels.regions) {
+    for (const code in this.regions) {
+      const region = this.regions[code] as any
+
+      if (!region || !region.element || !region.element.label) {
+        continue
+      }
+      region.element.updateLabelPosition()
+    }
+  }
+
+  if (labels.markers) {
+    for (const index in this._markers) {
+      const marker = this._markers[index] as any
+      if (marker.element && typeof marker.element.updateLabelPosition === 'function') {
+        marker.element.updateLabelPosition()
+      }
+    }
+  }
+};

package/dist/{reposition-markers.d.ts → core/reposition-markers.d.ts}

@@ -4,7 +4,8 @@ export default function repositionMarkers(this: MapInterface): void {
 
   for (const index in this._markers) {
     const marker = this._markers[index] as any
-    if (!marker || !marker.shape)
+
+    if (!marker || !marker.element || !marker.element.shape)
       continue
 
     const point = this.getMarkerPosition(marker.config)
@@ -13,14 +14,10 @@ export default function repositionMarkers(this: MapInterface): void {
       const cx = Number.isNaN(point.x) ? 0 : point.x
       const cy = Number.isNaN(point.y) ? 0 : point.y
 
-      marker.shape.set({
+      marker.element.shape.set({
         cx,
         cy,
       })
-
-      if (marker.label) {
-        marker.updateLabelPosition()
-      }
     }
   }
 };

package/dist/{set-scale.d.ts → core/set-scale.d.ts}

@@ -16,8 +16,8 @@ export default function setScale(
   let transXDiff: number
   let transYStart: number
   let transYDiff: number
-  let transX = this.transX
-  let transY = this.transY
+  let transX: number = this.transX
+  let transY: number = this.transY
 
   const zoomMax = this.params.zoomMax ?? 8
   const zoomMin = this.params.zoomMin ?? 1

package/dist/{setup-container-events.d.ts → core/setup-container-events.d.ts}

@@ -13,7 +13,8 @@ export default function setupContainerEvents(this: MapInterface): void {
       if (oldPageX !== undefined && oldPageY !== undefined) {
         this.transX -= (oldPageX - mouseEvent.pageX) / this.scale
         this.transY -= (oldPageY - mouseEvent.pageY) / this.scale
-        this.canvas.applyTransformParams(this.scale, this.transX, this.transY)
+
+        this._applyTransform()
       }
       oldPageX = mouseEvent.pageX
       oldPageY = mouseEvent.pageY

package/dist/{setup-element-events.d.ts → core/setup-element-events.d.ts}

@@ -39,6 +39,7 @@ export default function setupElementEvents(this: MapInterface): void {
   EventHandler.delegate(container, 'mouseover mouseout', '.jvm-element', ((e: Event) => {
     try {
       const data = parseEvent(this, (e.target as Element), true)
+
       const { showTooltip } = this.params
       const tooltip = this._tooltip
 
@@ -48,9 +49,10 @@ export default function setupElementEvents(this: MapInterface): void {
         }
 
         if (showTooltip && tooltip) {
-          tooltip.text(data.tooltipText)
-          tooltip.show(data.tooltipText)
-          this._emit(data.event, [e, tooltip.getElement(), data.code])
+          this._emit(data.event, [data.event, tooltip, data.code])
+          if (!e.defaultPrevented) {
+            tooltip.show(data.tooltipText)
+          }
         }
       }
       else {
@@ -64,7 +66,11 @@ export default function setupElementEvents(this: MapInterface): void {
       }
     }
     catch (error) {
-      console.error('Error in mouseover/mouseout handler:', error)
+      const errorMessage = error instanceof Error ? error.message : String(error)
+      console.warn('Skipping mouseover/mouseout event due to error:', errorMessage)
+      if (e.type === 'mouseout' && this._tooltip) {
+        this._tooltip.hide()
+      }
     }
   }) as EventListener)
 
@@ -95,6 +101,7 @@ export default function setupElementEvents(this: MapInterface): void {
           }
 
           this._emit(data.event, [
+            data.event,
             data.code,
             element.isSelected,
             data.type === 'region'