collaborative-form-zod

v1.0.0

Published

3 months ago

🚀 High-performance real-time collaborative form web component with WebSocket support. Perfect for multi-user forms, live editing, and instant synchronization.

Downloads

collaborative-realtime-form

🚀 High-Performance Real-time Collaborative Form Component

Multi-user real-time form editing with WebSocket synchronization. Perfect for collaborative applications, live surveys, and concurrent data entry.

Farklı kullanıcıların aynı anda aynı formu düzenleyebilmesini sağlayan, modern web teknolojileri ile geliştirilmiş bir web component paketi.

✨ Özellikler

🔄 Gerçek zamanlı senkronizasyon - WebSocket ile anlık güncelleme
👥 Çoklu kullanıcı desteği - Sınırsız sayıda eş zamanlı kullanıcı
🎯 Görsel göstergeler - Hangi alanın kim tarafından düzenlendiğini gösteren belirteçler
⚡ Optimistik güncellemeler - Gecikme olmadan yerel değişiklikler
🌐 Framework agnostic - Vanilla JS, React, Vue, Angular ile uyumlu
📱 Responsive tasarım - Mobil ve desktop uyumlu
♿ Erişilebilirlik - WCAG standartlarına uygun
🎨 Özelleştirilebilir - CSS ile kolayca stil verebilirsiniz

📦 Installation

npm install collaborative-realtime-form

CDN:

<script type="module" src="https://unpkg.com/collaborative-realtime-form"></script>

🚀 Hızlı Başlangıç

Vanilla HTML/JavaScript

<!DOCTYPE html>
<html>
<head>
    <title>Collaborative Form</title>
</head>
<body>
    <!-- İçerisine istediğiniz form elementlerini ekleyin -->
    <collaborative-form 
        server-url="http://localhost:4000"
        form-id="my-form">
        
        <input name="firstName" type="text" placeholder="Ad" />
        <input name="lastName" type="text" placeholder="Soyad" />
        <textarea name="bio" placeholder="Hakkınızda"></textarea>
        <select name="city">
            <option value="istanbul">İstanbul</option>
            <option value="ankara">Ankara</option>
        </select>
        <label>
            <input type="checkbox" name="terms" />
            Şartları kabul ediyorum
        </label>
        
    </collaborative-form>

    <script type="module">
        import 'collaborative-realtime-form';
    </script>
</body>
</html>

React

import '@umutu/collaborative-form';

function App() {
    return (
        <div>
            <h1>Ortak Form</h1>
            <collaborative-form 
                server-url="http://localhost:4000"
                form-id="react-form"
                namespace="/form">
                
                <input name="fullName" type="text" placeholder="Ad Soyad" />
                <input name="email" type="email" placeholder="E-posta" />
                <textarea name="message" placeholder="Mesajınız"></textarea>
                <select name="country">
                    <option value="tr">Türkiye</option>
                    <option value="us">ABD</option>
                </select>
                <label>
                    <input type="checkbox" name="newsletter" />
                    Haber bülteni
                </label>
                
            </collaborative-form>
        </div>
    );
}

Vue.js

<template>
    <div>
        <h1>Ortak Form</h1>
        <collaborative-form 
            :server-url="serverUrl"
            :form-id="formId">
            
            <input name="userName" type="text" placeholder="Kullanıcı Adı" />
            <input name="userEmail" type="email" placeholder="E-posta" />
            <textarea name="userBio" placeholder="Biyografi"></textarea>
            <label>
                <input type="checkbox" name="vueNewsletter" />
                Vue.js Newsletter
            </label>
            
        </collaborative-form>
    </div>
</template>

<script>
import '@umutu/collaborative-form';

export default {
    data() {
        return {
            serverUrl: 'http://localhost:4000',
            formId: 'vue-form'
        }
    }
}
</script>

Angular

// app.component.ts
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@umutu/collaborative-form';

@Component({
    selector: 'app-root',
    template: \`
        <h1>Ortak Form</h1>
        <collaborative-form 
            server-url="http://localhost:4000"
            form-id="angular-form">
            
            <input name="angularName" type="text" placeholder="İsim" />
            <input name="angularEmail" type="email" placeholder="E-posta" />
            <textarea name="angularFeedback" placeholder="Geri bildirim"></textarea>
            <select name="angularFramework">
                <option value="angular">Angular</option>
                <option value="react">React</option>
                <option value="vue">Vue.js</option>
            </select>
            
        </collaborative-form>
    \`,
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppComponent {}

⚙️ API Referansı

Attributes (Öznitelikler)

| Attribute | Tip | Varsayılan | Açıklama | |-----------|-----|------------|----------| | server-url | string | http://localhost:4000 | Socket.IO sunucu adresi | | form-id | string | default | Form odası kimliği | | namespace | string | /form | Socket.IO namespace |

Örnek Sunucu Kurulumu

Bu web component, Socket.IO tabanlı bir sunucu gerektirir. Örnek sunucu kodu:

// server.js
import express from 'express';
import http from 'http';
import { Server } from 'socket.io';

const app = express();
const server = http.createServer(app);
const io = new Server(server, {
    cors: { origin: "*" }
});

// Stateless server - no form state storage
// Client loads initial data from their own API

io.of('/form').on('connection', (socket) => {
    let currentFormId = null;
    
    socket.on('join', ({ formId }) => {
        currentFormId = formId;
        socket.join(formId);
        // No state to send - client loads from their API
    });
    
    socket.on('form:patch', (patch) => {
        if (!currentFormId) return;
        
        // Stateless broadcast - just relay to other clients
        socket.to(currentFormId).emit('form:patch', {
            ...patch,
            from: socket.id,
            ts: Date.now()
        });
    });
    
    // Cursor tracking
    socket.on('form:cursor', (payload) => {
        if (!currentFormId) return;
        socket.to(currentFormId).emit('form:cursor', {
            ...payload,
            from: socket.id
        });
    });
});

server.listen(4000, () => {
    console.log('Server running on http://localhost:4000');
});

🎨 Stil Özelleştirme

Web component Shadow DOM kullanmadığı için CSS ile kolayca özelleştirilebilir:

/* Form container */
collaborative-form .box {
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Düzenleme göstergeleri */
collaborative-form .editing {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16,185,129,0.15) !important;
}

/* Rozet rengi */
collaborative-form .badge-editing {
    background: #10b981;
}

/* Form alanları */
collaborative-form input, 
collaborative-form textarea, 
collaborative-form select {
    border-radius: 12px;
}

🔧 Geliştirme

Projeyi yerel ortamda geliştirmek için:

# Bağımlılıkları yükle
npm install

# Geliştirme modunda çalıştır (watch mode)
npm run dev

# Production build
npm run build

# Test sunucusunu çalıştır
npm run server

📝 Desteklenen Form Alanları

✅ Text inputs (text, email, password, tel, url, search)
✅ Numeric inputs (number, range)
✅ Date/time inputs (date, time, datetime-local, month, week)
✅ Choice inputs (radio, checkbox, select)
✅ File uploads (file names only)
✅ Color picker
✅ Progress/meter displays

🌍 Browser Desteği

✅ Chrome 70+
✅ Firefox 63+
✅ Safari 12+
✅ Edge 79+

🤝 Katkıda Bulunma

Fork yapın
Feature branch oluşturun (`git checkout -b feature/amazing-feature`)
Commit yapın (`git commit -m 'feat: Add amazing feature'`)
Branch'i push yapın (`git push origin feature/amazing-feature`)
Pull Request açın

📄 Lisans

Bu proje MIT lisansı altında lisanslanmıştır. Detaylar için LICENSE dosyasına bakın.

🔗 İlgili Projeler

Socket.IO - Real-time bidirectional event-based communication
Collaborative Editing - Wikipedia

⚠️ Notlar

Bu paket demo amaçlıdır, production kullanım için güvenlik önlemleri eklenmesi önerilir
Sunucu tarafında authentication ve rate limiting implementasyonu ekleyebilirsiniz
Büyük ölçekli kullanım için Redis gibi bir session store kullanılması önerilir

Sorularınız için Issues bölümünü kullanabilirsiniz.

Made with ❤️ by [Your Name]