@alisaitteke/seatmap-canvas 2.7.0 → 2.7.1

package/README.md

@@ -1,9 +1,9 @@
 # Seatmap Canvas
 Seatmap Canvas is an advanced, open-source library for interactive seat selection in various settings such as stadiums, theaters, and event spaces. Designed with d3.js, this code version is optimized for developers looking for a customizable and efficient solution to handle seat arrangements and user interactions.
 
-[![LIVE DEMO](assets/banner_ui.png)](https://alisaitteke.github.io/seatmap-canvas)
+[![LIVE DEMO](assets/banner_ui.png)](https://seatmap.io/demo)
 
-**[📖 Documentation](https://alisaitteke.github.io/seatmap-canvas/docs)** | **[🎯 Live Demo](https://alisaitteke.github.io/seatmap-canvas)**
+**[📖 Documentation](https://seatmap.io)** | **[🎯 Live Demo](https://seatmap.io/demo)**
 
 ## Features
 
@@ -16,7 +16,7 @@ Seatmap Canvas is an advanced, open-source library for interactive seat selectio
 - **Event System** - Simplified event listeners for seat interactions
 
 ## Screenshot
-[![LIVE DEMO](assets/screenshot_1.png)](https://alisaitteke.github.io/seatmap-canvas)
+[![LIVE DEMO](assets/screenshot_1.png)](https://seatmap.io/demo)
 
 ## 🚀 Framework Plugins & Integrations
 
@@ -31,7 +31,9 @@ Seatmap Canvas is an advanced, open-source library for interactive seat selectio
     <img src="https://img.shields.io/badge/React-⚠️_Testing-orange?style=for-the-badge&logo=react&logoColor=white" alt="React"/>
   </a>
   &nbsp;&nbsp;
-  <img src="https://img.shields.io/badge/Next.js-Coming_Soon-000000?style=for-the-badge&logo=next.js&logoColor=white&color=gray" alt="Next.js"/>
+  <a href="src/nextjs/README.md">
+    <img src="https://img.shields.io/badge/Next.js-⚠️_Testing-orange?style=for-the-badge&logo=next.js&logoColor=white" alt="Next.js"/>
+  </a>
   &nbsp;&nbsp;
   <img src="https://img.shields.io/badge/Svelte-Coming_Soon-FF3E00?style=for-the-badge&logo=svelte&logoColor=white&color=gray" alt="Svelte"/>
   &nbsp;&nbsp;
@@ -71,7 +73,7 @@ Seatmap Canvas is an advanced, open-source library for interactive seat selectio
 | **Vanilla JS** | ✅ Available | `@alisaitteke/seatmap-canvas` | [📖 Documentation](#vanilla-javascript) | [🎯 Example](examples/) |
 | **Vue.js 3** | ⚠️ Testing | `@alisaitteke/seatmap-canvas/vue` | [📖 Documentation](src/vue/README.md) | [🎯 Example](examples/vue/) |
 | **React** | ⚠️ Testing | `@alisaitteke/seatmap-canvas/react` | [📖 Documentation](src/react/README.md) | [🎯 Example](examples/react/) |
-| **Next.js** | 🔜 Coming Soon | - | - | - |
+| **Next.js** | ⚠️ Testing | `@alisaitteke/seatmap-canvas/nextjs` | [📖 Documentation](src/nextjs/README.md) | [🎯 App Router](examples/nextjs-app/) • [Pages Router](examples/nextjs-pages/) |
 | **Svelte** | 🔜 Coming Soon | - | - | - |
 | **Angular** | 🔜 Coming Soon | - | - | - |
 | **Nuxt** | 🔜 Coming Soon | - | - | - |
@@ -97,7 +99,7 @@ Seatmap Canvas is an advanced, open-source library for interactive seat selectio
 
 ---
 
-[LIVE DEMO](https://alisaitteke.github.io/seatmap-canvas/)
+[LIVE DEMO](https://seatmap.io/demo)
 
 
 
@@ -184,7 +186,7 @@ const onSeatClick = (seat) => {
 </table>
 
 <p align="center">
-  <a href="src/vue/README.md"><img src="https://img.shields.io/badge/📖_Full_Documentation-4FC08D?style=for-the-badge&logoColor=white" alt="Documentation"/></a>
+  <a href="https://seatmap.io/frameworks/vue"><img src="https://img.shields.io/badge/📖_Full_Documentation-4FC08D?style=for-the-badge&logoColor=white" alt="Documentation"/></a>
   &nbsp;
   <a href="examples/vue/"><img src="https://img.shields.io/badge/🎯_Examples-35495E?style=for-the-badge&logoColor=white" alt="Examples"/></a>
 </p>
@@ -240,13 +242,95 @@ function App() {
 </table>
 
 <p align="center">
-  <a href="src/react/README.md"><img src="https://img.shields.io/badge/📖_Full_Documentation-61DAFB?style=for-the-badge&logoColor=black" alt="Documentation"/></a>
+  <a href="https://seatmap.io/frameworks/react"><img src="https://img.shields.io/badge/📖_Full_Documentation-61DAFB?style=for-the-badge&logoColor=black" alt="Documentation"/></a>
   &nbsp;
   <a href="examples/react/"><img src="https://img.shields.io/badge/🎯_Examples-20232A?style=for-the-badge&logoColor=white" alt="Examples"/></a>
 </p>
 
 ---
 
+<h3>
+  <img src="https://api.iconify.design/logos:nextjs-icon.svg" width="24" height="24" alt="Next.js" style="vertical-align: middle;" />
+  &nbsp;Next.js
+</h3>
+
+<table>
+<tr>
+<td width="50%">
+
+**Installation**
+
+```bash
+npm install @alisaitteke/seatmap-canvas next react react-dom
+```
+
+**App Router (Client Component)**
+
+```tsx
+'use client';
+
+import { SeatmapCanvas } from '@alisaitteke/seatmap-canvas/nextjs';
+import '@alisaitteke/seatmap-canvas/dist/seatmap.canvas.css';
+
+export default function VenuePage() {
+  const handleSeatClick = (seat) => {
+    seat.isSelected() ? seat.unSelect() : seat.select();
+  };
+
+  return (
+    <SeatmapCanvas
+      data={blocks}
+      options={{ legend: true }}
+      onSeatClick={handleSeatClick}
+    />
+  );
+}
+```
+
+</td>
+<td width="50%">
+
+**Server Component + Data Fetching**
+
+```tsx
+import { SeatmapServerWrapper } from '@alisaitteke/seatmap-canvas/nextjs/app-router';
+import '@alisaitteke/seatmap-canvas/dist/seatmap.canvas.css';
+
+export default async function VenuePage({ params }) {
+  return (
+    <SeatmapServerWrapper
+      dataSource={`/api/venues/${params.id}/seatmap`}
+      options={{ legend: true }}
+      revalidate={3600}
+    />
+  );
+}
+```
+
+**Pages Router (Dynamic Import)**
+
+```tsx
+import { SeatmapCanvas } from '@alisaitteke/seatmap-canvas/nextjs/pages-router';
+
+export default function VenuePage({ data }) {
+  return <SeatmapCanvas data={data} />;
+}
+```
+
+</td>
+</tr>
+</table>
+
+<p align="center">
+  <a href="https://seatmap.io/frameworks/nextjs"><img src="https://img.shields.io/badge/📖_Full_Documentation-000000?style=for-the-badge&logoColor=white" alt="Documentation"/></a>
+  &nbsp;
+  <a href="examples/nextjs-app/"><img src="https://img.shields.io/badge/🎯_App_Router-000000?style=for-the-badge&logoColor=white" alt="App Router"/></a>
+  &nbsp;
+  <a href="examples/nextjs-pages/"><img src="https://img.shields.io/badge/🎯_Pages_Router-000000?style=for-the-badge&logoColor=white" alt="Pages Router"/></a>
+</p>
+
+---
+
 <h3>
   <img src="https://api.iconify.design/logos:javascript.svg" width="24" height="24" alt="JavaScript" style="vertical-align: middle;" />
   &nbsp;Vanilla JavaScript
@@ -474,90 +558,8 @@ background_fit: "contain"
 
 </details>
 
-<details>
-<summary><strong>📝 Complete Example</strong></summary>
-```javascript
-
-var config = {
-    "resizable": true,
-    "seat_style": {
-        "radius": 12,
-        "color": "#6796ff",
-        "hover": "#5671ff",
-        "not_salable": "#424747",
-        "selected": "#56aa45",
-        "focus": "#435fa4",
-        "focus_out": "#56aa45"
-    },
-    "block_style": {
-        "fill": "#e2e2e2",
-        "stroke": "#e2e2e2"
-    },
-    "label_style": {
-        "color": "#000",
-        "radius": 12,
-        "font-size": "12px",
-        "bg": "#ffffff"
-    }
-}
-
-var seatmap = new SeatmapCanvas(".seats_container",config);
-seatmap.addEventListener("seat_click", (seat) => {
-    console.log(seat);
-    if (seat.selected) {
-        seatmap.seatUnselect(seat);
-    } else {
-        seatmap.seatSelect(seat);
-    }
-});
-var data = {
-    "blocks": [
-        {
-            "id": 1,
-            "title": "Test Block 1",
-            "color": "#2c2828",
-            "labels": [
-                {
-                    "title": "A",
-                    "x": -30,
-                    "y": 0
-                },
-                {
-                    "title": "B",
-                    "x": 120,
-                    "y": 30
-                }
-            ],
-            "seats": [
-                {
-                    "id": 1,
-                    "x": 0,
-                    "y": 0,
-                    "salable": true,
-                    "note": "note test",
-                    "title": "49"
-                },
-                {
-                    "id": 2,
-                    "x": 30,
-                    "y": 0,
-                    "salable": true,
-                    "note": "note test",
-                    "title": "47"
-                }
-            ]
-        }
-    ]
-}
-
-// SET SEATS DATA
-seatmap.setData(data);
-```
-
-</details>
-
 <p align="center">
-  <a href="examples/"><img src="https://img.shields.io/badge/📖_Documentation-F7DF1E?style=for-the-badge&logoColor=black" alt="Documentation"/></a>
+  <a href="https://seatmap.io/frameworks/vanilla-js"><img src="https://img.shields.io/badge/📖_Full_Documentation-F7DF1E?style=for-the-badge&logoColor=black" alt="Documentation"/></a>
   &nbsp;
   <a href="examples/"><img src="https://img.shields.io/badge/🎯_Examples-333333?style=for-the-badge&logoColor=white" alt="Examples"/></a>
 </p>
@@ -566,13 +568,35 @@ seatmap.setData(data);
 
 ## Links
 
-- 📖 [Documentation](https://alisaitteke.github.io/seatmap-canvas/docs)
-- 🎯 [Live Demo](https://alisaitteke.github.io/seatmap-canvas)
+- 📖 [Full Documentation](https://seatmap.io)
+- 🎯 [Live Demo](https://seatmap.io/demo)
 - 📦 [NPM Package](https://www.npmjs.com/package/@alisaitteke/seatmap-canvas)
 - 🐛 [Report Issues](https://github.com/alisaitteke/seatmap-canvas/issues)
 
+## Author
+
+<div align="center">
+  <a href="https://github.com/alisaitteke">
+    <img src="https://github.com/alisaitteke.png" width="100" height="100" style="border-radius: 50%;" alt="Ali Sait Teke"/>
+  </a>
+  
+  <h3>Ali Sait Teke</h3>
+  
+  <p>
+    <a href="https://github.com/alisaitteke">
+      <img src="https://img.shields.io/badge/GitHub-181717?style=for-the-badge&logo=github&logoColor=white" alt="GitHub"/>
+    </a>
+    &nbsp;
+    <a href="https://www.linkedin.com/in/alisaitteke">
+      <img src="https://img.shields.io/badge/LinkedIn-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white" alt="LinkedIn"/>
+    </a>
+    &nbsp;
+    <a href="https://twitter.com/alisaitteke">
+      <img src="https://img.shields.io/badge/Twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white" alt="Twitter"/>
+    </a>
+  </p>
+</div>
+
 ## Contributors
 
-<a href="https://github.com/alisaitteke">
-  <img src="https://img.shields.io/badge/Ali_Sait_Teke-Maintainer-blue?style=flat-square&logo=github" alt="Ali Sait Teke"/>
-</a>
+Contributions are welcome! Feel free to submit issues and pull requests.