Component Examples

# app/components/todo_list.py
from djust import LiveComponent
from typing import List, Dict

class TodoListComponent(LiveComponent):
    """
    Todo list with filtering and completion tracking.

    Demonstrates:
    - State management
    - Event handling
    - Parent communication
    - Computed properties
    """

    template_string = """
        <div class="todo-list card">
            <div class="card-header">
                <h3>My Todos ({{ active_count }}/{{ total_count }})</h3>
            </div>

            <div class="card-body">
                <!-- Add todo form -->
                <div class="input-group mb-3">
                    <input type="text"
                           class="form-control"
                           placeholder="Add new todo..."
                           id="new-todo-{{ component_id }}"
                           @keyup.enter="add_todo">
                    <button class="btn btn-primary" dj-click="add_todo">
                        Add
                    </button>
                </div>

                <!-- Filter tabs -->
                <ul class="nav nav-pills mb-3">
                    <li class="nav-item">
                        <button class="nav-link {% if filter == 'all' %}active{% endif %}"
                                dj-click="set_filter" data-filter="all">
                            All ({{ total_count }})
                        </button>
                    </li>
                    <li class="nav-item">
                        <button class="nav-link {% if filter == 'active' %}active{% endif %}"
                                dj-click="set_filter" data-filter="active">
                            Active ({{ active_count }})
                        </button>
                    </li>
                    <li class="nav-item">
                        <button class="nav-link {% if filter == 'completed' %}active{% endif %}"
                                dj-click="set_filter" data-filter="completed">
                            Completed ({{ completed_count }})
                        </button>
                    </li>
                </ul>

                <!-- Todo items -->
                <ul class="list-group">
                    {% for item in filtered_items %}
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <div class="form-check">
                            <input class="form-check-input"
                                   type="checkbox"
                                   {% if item.completed %}checked{% endif %}
                                   dj-change="toggle_todo"
                                   data-id="{{ item.id }}">
                            <label class="form-check-label {% if item.completed %}text-decoration-line-through text-muted{% endif %}">
                                {{ item.text }}
                            </label>
                        </div>
                        <button class="btn btn-sm btn-danger"
                                dj-click="delete_todo"
                                data-id="{{ item.id }}">
                            ×
                        </button>
                    </li>
                    {% empty %}
                    <li class="list-group-item text-muted text-center">
                        No todos yet. Add one above!
                    </li>
                    {% endfor %}
                </ul>

                <!-- Clear completed button -->
                {% if completed_count > 0 %}
                <div class="mt-3">
                    <button class="btn btn-outline-danger btn-sm" dj-click="clear_completed">
                        Clear Completed ({{ completed_count }})
                    </button>
                </div>
                {% endif %}
            </div>
        </div>
    """

    def mount(self, items: List[Dict] = None):
        """Initialize todo list"""
        self.items = items or []
        self.filter = "all"
        self.next_id = max([item['id'] for item in self.items], default=0) + 1

    def get_context_data(self):
        return {
            'items': self.items,
            'filter': self.filter,
            'filtered_items': self._filtered_items,
            'total_count': len(self.items),
            'active_count': sum(1 for item in self.items if not item['completed']),
            'completed_count': sum(1 for item in self.items if item['completed']),
        }

    @property
    def _filtered_items(self):
        """Filter items based on current filter"""
        if self.filter == "active":
            return [item for item in self.items if not item['completed']]
        elif self.filter == "completed":
            return [item for item in self.items if item['completed']]
        return self.items

    def add_todo(self, **kwargs):
        """Add new todo item"""
        # In real app, would get value from JavaScript
        # For demo, generate placeholder
        import random
        todos = [
            "Buy groceries",
            "Walk the dog",
            "Write documentation",
            "Review pull requests",
            "Learn djust components"
        ]

        text = random.choice(todos)

        new_item = {
            'id': self.next_id,
            'text': text,
            'completed': False
        }

        self.items.append(new_item)
        self.next_id += 1

        # Notify parent
        self.send_parent("todo_added", {"item": new_item})

    def toggle_todo(self, id: str = None, **kwargs):
        """Toggle todo completion status"""
        if id:
            todo_id = int(id)
            for item in self.items:
                if item['id'] == todo_id:
                    item['completed'] = not item['completed']

                    # Notify parent
                    self.send_parent("todo_toggled", {
                        "id": todo_id,
                        "completed": item['completed']
                    })
                    break

    def delete_todo(self, id: str = None, **kwargs):
        """Delete todo item"""
        if id:
            todo_id = int(id)
            self.items = [item for item in self.items if item['id'] != todo_id]

            # Notify parent
            self.send_parent("todo_deleted", {"id": todo_id})

    def set_filter(self, filter: str = None, **kwargs):
        """Change filter"""
        if filter:
            self.filter = filter

    def clear_completed(self, **kwargs):
        """Remove all completed items"""
        deleted_ids = [item['id'] for item in self.items if item['completed']]
        self.items = [item for item in self.items if not item['completed']]

        # Notify parent
        self.send_parent("todos_cleared", {"count": len(deleted_ids)})

# app/views.py
from djust import LiveView
from .components.todo_list import TodoListComponent

class TodoAppView(LiveView):
    """
    Simple todo application.

    Demonstrates:
    - LiveComponent integration
    - Event handling
    - Minimal parent coordination
    """

    template_string = """
        <!DOCTYPE html>
        <html>
        <head>
            <title>Todo App - djust</title>
            <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
        </head>
        <body>
            <div class="container my-5">
                <div class="row">
                    <div class="col-md-8 offset-md-2">
                        <h1 class="mb-4">Todo App</h1>

                        {% if last_action %}
                        <div class="alert alert-success alert-dismissible fade show">
                            {{ last_action }}
                            <button type="button" class="btn-close" dj-click="dismiss_alert"></button>
                        </div>
                        {% endif %}

                        <TodoListComponent id="todo_list" />
                    </div>
                </div>
            </div>
        </body>
        </html>
    """

    def mount(self, request):
        """Initialize view"""
        self.last_action = None

        # Sample todos
        initial_todos = [
            {'id': 1, 'text': 'Learn djust', 'completed': True},
            {'id': 2, 'text': 'Build awesome app', 'completed': False},
            {'id': 3, 'text': 'Deploy to production', 'completed': False},
        ]

        self.todo_list = TodoListComponent(items=initial_todos)

    def handle_component_event(self, component_id, event, data):
        """Handle events from components"""
        if event == "todo_added":
            self.last_action = f"Added: {data['item']['text']}"

        elif event == "todo_toggled":
            status = "completed" if data['completed'] else "active"
            self.last_action = f"Todo marked as {status}"

        elif event == "todo_deleted":
            self.last_action = "Todo deleted"

        elif event == "todos_cleared":
            self.last_action = f"Cleared {data['count']} completed todos"

    def dismiss_alert(self):
        """Dismiss success message"""
        self.last_action = None

    def get_context_data(self):
        return {
            'todo_list': self.todo_list,
            'last_action': self.last_action
        }

# app/components/user_list.py
from djust import LiveComponent

class UserListComponent(LiveComponent):
    """
    Filterable user list with selection.

    Demonstrates:
    - List rendering
    - Search/filter
    - Selection state
    - Props reactivity
    """

    template_string = """
        <div class="card">
            <div class="card-header">
                <h5>Users</h5>
            </div>
            <div class="card-body">
                <!-- Search -->
                <input type="text"
                       class="form-control mb-3"
                       placeholder="Search users..."
                       value="{{ search_term }}"
                       dj-input="search">

                <!-- User list -->
                <div class="list-group">
                    {% for user in filtered_users %}
                    <button class="list-group-item list-group-item-action {% if user.id == selected_id %}active{% endif %}"
                            dj-click="select_user"
                            data-user-id="{{ user.id }}">
                        <div class="d-flex w-100 justify-content-between">
                            <h6 class="mb-1">{{ user.name }}</h6>
                            <small>{{ user.role }}</small>
                        </div>
                        <small class="text-muted">{{ user.email }}</small>
                    </button>
                    {% empty %}
                    <div class="text-muted text-center py-3">
                        No users found
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    """

    def mount(self, users, selected_id=None):
        self.users = users
        self.selected_id = selected_id
        self.search_term = ""

    def update(self, **props):
        """React to prop changes"""
        if 'selected_id' in props:
            self.selected_id = props['selected_id']

    def get_context_data(self):
        return {
            'users': self.users,
            'selected_id': self.selected_id,
            'search_term': self.search_term,
            'filtered_users': self._filter_users()
        }

    def _filter_users(self):
        """Filter users based on search term"""
        if not self.search_term:
            return self.users

        term = self.search_term.lower()
        return [
            user for user in self.users
            if term in user['name'].lower() or term in user['email'].lower()
        ]

    def search(self, value: str = None, **kwargs):
        """Update search term"""
        self.search_term = value or ""

    def select_user(self, user_id: str = None, **kwargs):
        """Select a user"""
        if user_id:
            self.selected_id = int(user_id)
            self.send_parent("user_selected", {"user_id": self.selected_id})

# app/components/user_detail.py
from djust import LiveComponent

class UserDetailComponent(LiveComponent):
    """
    User detail panel with actions.

    Demonstrates:
    - Reactive props (user)
    - Data loading on prop change
    - Action buttons
    """

    template_string = """
        <div class="card">
            <div class="card-header">
                <h5>User Details</h5>
            </div>
            <div class="card-body">
                {% if user %}
                <div class="row mb-3">
                    <div class="col-sm-3 fw-bold">Name:</div>
                    <div class="col-sm-9">{{ user.name }}</div>
                </div>
                <div class="row mb-3">
                    <div class="col-sm-3 fw-bold">Email:</div>
                    <div class="col-sm-9">{{ user.email }}</div>
                </div>
                <div class="row mb-3">
                    <div class="col-sm-3 fw-bold">Role:</div>
                    <div class="col-sm-9">
                        <span class="badge bg-primary">{{ user.role }}</span>
                    </div>
                </div>

                {% if stats %}
                <hr>
                <h6>Statistics</h6>
                <div class="row">
                    <div class="col-6">
                        <div class="text-center">
                            <h4>{{ stats.login_count }}</h4>
                            <small class="text-muted">Logins</small>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="text-center">
                            <h4>{{ stats.post_count }}</h4>
                            <small class="text-muted">Posts</small>
                        </div>
                    </div>
                </div>
                {% endif %}

                <hr>
                <div class="d-flex gap-2">
                    <button class="btn btn-primary" dj-click="edit_user">
                        Edit
                    </button>
                    <button class="btn btn-danger" dj-click="delete_user">
                        Delete
                    </button>
                </div>
                {% else %}
                <div class="text-muted text-center py-5">
                    Select a user to view details
                </div>
                {% endif %}
            </div>
        </div>
    """

    def mount(self, user=None):
        self.user = user
        self.stats = None

        if user:
            self._load_stats()

    def update(self, **props):
        """React to user prop changes"""
        if 'user' in props and props['user'] != self.user:
            self.user = props['user']
            self.stats = None

            if self.user:
                self._load_stats()

    def _load_stats(self):
        """Load user statistics"""
        # In real app, query database
        import random
        self.stats = {
            'login_count': random.randint(10, 100),
            'post_count': random.randint(5, 50)
        }

    def get_context_data(self):
        return {
            'user': self.user,
            'stats': self.stats
        }

    def edit_user(self):
        """Request edit"""
        if self.user:
            self.send_parent("edit_requested", {"user_id": self.user['id']})

    def delete_user(self):
        """Request delete"""
        if self.user:
            self.send_parent("delete_requested", {"user_id": self.user['id']})

# app/views.py
from djust import LiveView
from .components.user_list import UserListComponent
from .components.user_detail import UserDetailComponent

class UserDashboardView(LiveView):
    """
    User management dashboard.

    Demonstrates:
    - Multiple component coordination
    - Computed properties
    - Event-based communication
    """

    template_string = """
        <div class="container-fluid my-4">
            <h1 class="mb-4">User Management</h1>

            <div class="row">
                <div class="col-md-4">
                    <UserListComponent id="user_list"
                                      :selected_id="selected_user_id" />
                </div>
                <div class="col-md-8">
                    <UserDetailComponent id="user_detail"
                                        :user="selected_user" />
                </div>
            </div>
        </div>
    """

    def mount(self, request):
        # Sample data
        self.users = [
            {'id': 1, 'name': 'Alice Johnson', 'email': 'alice@example.com', 'role': 'Admin'},
            {'id': 2, 'name': 'Bob Smith', 'email': 'bob@example.com', 'role': 'Editor'},
            {'id': 3, 'name': 'Carol White', 'email': 'carol@example.com', 'role': 'Viewer'},
        ]

        self.selected_user_id = None

        # Create components
        self.user_list = UserListComponent(users=self.users)
        self.user_detail = UserDetailComponent()

    @property
    def selected_user(self):
        """Computed property - updates detail automatically"""
        if self.selected_user_id:
            return next((u for u in self.users if u['id'] == self.selected_user_id), None)
        return None

    def handle_component_event(self, component_id, event, data):
        """Coordinate components"""
        if event == "user_selected":
            self.selected_user_id = data["user_id"]
            # Both components update automatically via props!

        elif event == "edit_requested":
            # Navigate to edit page or open modal
            print(f"Edit user {data['user_id']}")

        elif event == "delete_requested":
            # Confirm and delete
            user_id = data['user_id']
            self.users = [u for u in self.users if u['id'] != user_id]
            self.selected_user_id = None

    def get_context_data(self):
        return {
            'users': self.users,
            'selected_user_id': self.selected_user_id,
            'selected_user': self.selected_user,
            'user_list': self.user_list,
            'user_detail': self.user_detail
        }

# app/components/product_grid.py
from djust import LiveComponent

class ProductGridComponent(LiveComponent):
    """
    Product grid with filtering.

    Demonstrates:
    - Grid layout
    - Multiple filters
    - Add to cart action
    """

    template_string = """
        <div class="products">
            <!-- Filters -->
            <div class="card mb-4">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4">
                            <label>Category</label>
                            <select class="form-select" dj-change="filter_category">
                                <option value="">All Categories</option>
                                {% for cat in categories %}
                                <option value="{{ cat }}" {% if cat == category_filter %}selected{% endif %}>
                                    {{ cat }}
                                </option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label>Price Range</label>
                            <select class="form-select" dj-change="filter_price">
                                <option value="">Any Price</option>
                                <option value="0-50">Under $50</option>
                                <option value="50-100">$50-$100</option>
                                <option value="100+">Over $100</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label>Search</label>
                            <input type="text"
                                   class="form-control"
                                   placeholder="Search products..."
                                   dj-input="search">
                        </div>
                    </div>
                </div>
            </div>

            <!-- Products grid -->
            <div class="row">
                {% for product in filtered_products %}
                <div class="col-md-3 mb-4">
                    <div class="card h-100">
                        <div class="card-body">
                            <h5 class="card-title">{{ product.name }}</h5>
                            <p class="card-text text-muted">{{ product.category }}</p>
                            <h4 class="text-primary">${{ product.price }}</h4>
                            <button class="btn btn-primary w-100"
                                    dj-click="add_to_cart"
                                    data-product-id="{{ product.id }}">
                                Add to Cart
                            </button>
                        </div>
                    </div>
                </div>
                {% empty %}
                <div class="col-12">
                    <div class="alert alert-info">
                        No products match your filters
                    </div>
                </div>
                {% endfor %}
            </div>

            <div class="text-muted">
                Showing {{ filtered_products|length }} of {{ products|length }} products
            </div>
        </div>
    """

    def mount(self, products):
        self.products = products
        self.category_filter = ""
        self.price_filter = ""
        self.search_term = ""

    @property
    def categories(self):
        """Get unique categories"""
        return list(set(p['category'] for p in self.products))

    @property
    def filtered_products(self):
        """Apply all filters"""
        result = self.products

        # Category filter
        if self.category_filter:
            result = [p for p in result if p['category'] == self.category_filter]

        # Price filter
        if self.price_filter:
            if self.price_filter == "0-50":
                result = [p for p in result if p['price'] < 50]
            elif self.price_filter == "50-100":
                result = [p for p in result if 50 <= p['price'] <= 100]
            elif self.price_filter == "100+":
                result = [p for p in result if p['price'] > 100]

        # Search filter
        if self.search_term:
            term = self.search_term.lower()
            result = [p for p in result if term in p['name'].lower()]

        return result

    def get_context_data(self):
        return {
            'products': self.products,
            'categories': self.categories,
            'filtered_products': self.filtered_products,
            'category_filter': self.category_filter,
            'price_filter': self.price_filter,
            'search_term': self.search_term
        }

    def filter_category(self, value: str = None, **kwargs):
        self.category_filter = value or ""

    def filter_price(self, value: str = None, **kwargs):
        self.price_filter = value or ""

    def search(self, value: str = None, **kwargs):
        self.search_term = value or ""

    def add_to_cart(self, product_id: str = None, **kwargs):
        if product_id:
            product = next((p for p in self.products if p['id'] == int(product_id)), None)
            if product:
                self.send_parent("add_to_cart", {"product": product})