kokobeo-auto-dialog

🎯 Zero-Config Auto-Initializing Dialog Package with Firestore Integration

A magical npm package that works automatically when installed - no imports, no code changes needed! Just install it and control dialogs from Firestore.

✨ Features

• Zero Configuration: No code changes required in your React app
• Auto-Initialization: Starts working immediately after installation
• Firestore Integration: Control dialogs from your Firestore database
• Real-time Updates: Dialog appears/disappears based on Firestore changes
• Beautiful UI: Modern, responsive dialog with smooth animations
• Flexible Styling: Multiple dialog types (info, success, warning, error)
• Customizable: Configure collection/document paths and appearance

🚀 Installation

npm install kokobeo-auto-dialog

That's it! The package will automatically:

1. Inject itself into your public/index.html
2. Create a configuration template file
3. Start working when you run your React app

📋 Setup

Step 1: Configure Firebase

Edit the generated auto-dialog.config.js file in your project root:

window.AUTODIALOG_FIREBASE_CONFIG = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

Or add it directly in your public/index.html:

<script>
  window.AUTODIALOG_FIREBASE_CONFIG = {
    apiKey: "YOUR_API_KEY",
    // ... other config
  };
</script>

Step 2: Create Firestore Collection

In your Firestore database, create:

• Collection: autoDialog
• Document: config

Step 3: Add Dialog Configuration

In the autoDialog/config document, add these fields:

{
  showDialog: true,              // Set to true to show dialog
  title: "Welcome!",             // Dialog title
  message: "This is a test",     // Dialog message
  type: "info",                  // "info", "success", "warning", or "error"
  icon: "🎉",                    // Optional emoji icon
  buttonText: "Got it!",         // Optional button text
  closable: true,                // Allow closing with X button (default: true)
  closeOnOverlay: true           // Close when clicking outside (default: true)
}

Step 4: Run Your App

npm start

The dialog will appear automatically based on your Firestore configuration! 🎉

🎨 Dialog Types

The package supports different dialog types with color-coded styling:

• info: Blue (default)
• success: Green
• warning: Orange
• error: Red

⚙️ Advanced Configuration

Custom Collection/Document Path

// In auto-dialog.config.js or public/index.html
window.AUTODIALOG_COLLECTION = 'myCustomCollection';
window.AUTODIALOG_DOC = 'myCustomDocument';

Environment Variables

Alternatively, you can use environment variables in your .env file:

REACT_APP_FIREBASE_API_KEY=your_api_key
REACT_APP_FIREBASE_AUTH_DOMAIN=your_auth_domain
REACT_APP_FIREBASE_PROJECT_ID=your_project_id
REACT_APP_FIREBASE_STORAGE_BUCKET=your_storage_bucket
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
REACT_APP_FIREBASE_APP_ID=your_app_id

📦 How It Works

1. Installation: The postinstall script automatically injects a module import into public/index.html
2. Auto-Init: When your app loads, the package initializes automatically
3. Firestore Connection: Connects to your Firestore and listens to the config document
4. Real-time Updates: Any changes to the Firestore document instantly update the dialog
5. Clean Uninstall: The preuninstall script removes all injected code

🔧 Manual Control (Optional)

If you want programmatic control, you can import the package:

import { initializeAutoDialog } from 'kokobeo-auto-dialog';

// Manual initialization
initializeAutoDialog();

🎯 Use Cases

• Maintenance Notifications: Alert users about scheduled maintenance
• Feature Announcements: Show new feature highlights
• Emergency Alerts: Display critical system messages
• Promotional Messages: Show special offers or events
• System Status: Inform users about system updates
• A/B Testing: Show different messages to different users

🛠️ Troubleshooting

Dialog Not Showing

1. Check browser console for error messages
2. Verify Firebase configuration is correct
3. Ensure Firestore document exists at autoDialog/config
4. Confirm showDialog field is set to true
5. Check Firestore security rules allow reading the document

Script Not Loading

1. Verify the injection in public/index.html (look for AUTO-DIALOG-START comment)
2. Check browser console for module loading errors
3. Try reinstalling: npm uninstall @kokobeo/auto-dialog && npm install kokobeo-auto-dialog

📝 Example Firestore Document

// Firestore: autoDialog/config
{
  showDialog: true,
  title: "🎉 New Feature Available!",
  message: "Check out our brand new dashboard with real-time analytics and improved performance.",
  type: "success",
  icon: "✨",
  buttonText: "Explore Now",
  closable: true,
  closeOnOverlay: true
}

🔒 Security

Remember to configure Firestore security rules appropriately:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /autoDialog/{document=**} {
      allow read: if true;  // Public read for dialog config
      allow write: if request.auth != null;  // Only authenticated users can write
    }
  }
}

📄 License

MIT

🤝 Support

For issues or questions, please open an issue on GitHub.

Made with ❤️ by Kokobeo

No imports. No configuration. Just works. ✨