Package Exports

@umutu/collaborative-form
@umutu/collaborative-form/dist/collaborative-form.esm.js
@umutu/collaborative-form/dist/collaborative-form.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@umutu/collaborative-form) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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]