Rio UI Framework

The Sales Dashboard template is a responsive and interactive dashboard designed to provide a comprehensive view of sales performance. It supports both mobile and desktop layouts and includes features for revenue tracking, top performer highlights, and KPI breakdowns (such as renewal and churn rates). Key capabilities demonstrated in this template include:

• Creating interactive dashboards.
• Passing data between components.
• Persistently loading data on app start.
• Defining and loading page layouts across sessions.
• Implementing responsive layouts for mobile and desktop.

The AI Chatbot project is composed of the following 5 components:

1. ChatMessage: Displays a single chat message with a colored background.
2. ChatSuggestionCard: A clickable component containing a suggested conversation starter.
3. EmptyChatPlaceholder: A placeholder displayed when there is no chat history.
4. GeneratingResponsePlaceholder: A placeholder displayed while the AI is generating its response.
5. ChatPage: The core of the app that combines the other components as necessary.

The Todo App project template is a reference implementation demonstrating how to build a task management application using Rio. It showcases two key patterns:

• Persistent Data Storage: How to save and load application data so it persists across different user sessions.
• Component Communication: How to facilitate interaction between different UI components using custom events.

The Crypto Dashboard template is built using the following four components:

• BalanceCard: Displays the balance of a cryptocurrency wallet.
• CryptoCard: Displays the details of a cryptocurrency.
• CryptoChart: Displays a chart of the price of a cryptocurrency.
• DashboardPage: The orchestrator component that combines BalanceCard, CryptoCard, and CryptoChart and implements the application logic.

The Tic-Tac-Toe example is structured using two primary components:

• Field: A component representing a single cell in the 3x3 grid. It manages the display of an X, an O, or an empty state.
• TicTacToePage: The top-level component representing the entire game board. It is responsible for:
  • Storing the state of the 3x3 board.
  • Implementing the logic for detecting a winner.
  • Managing the game flow.

To create a snippet that is offered as a template for new projects or presented as a tutorial on the Rio website, prefix the snippet name with project-template-.

Template requirements:

• Files must be located in assets, components, or pages subdirectories.
• Must contain a README.md file explaining the template.
• Each Python file must include a <component> section; this section is copied into new projects, while other code (like imports) is automatically generated.

The Authentication template provides a pattern for implementing user login and session management. It uses a Persistence class to abstract database operations (defaulting to SQLite) and manages user state via session tokens.

Key mechanisms include:

• Persistence Layer: A Persistence class handles all database access and is attached to the session for easy retrieval throughout the app.
• Session Management: Upon login, a session token is stored on the user's device, and user metadata (e.g., ID and username) is attached to the session to track the logged-in state.
• Route Protection: Use Rio's guard mechanism to protect specific pages that require an authenticated session.

The Crypto Dashboard template demonstrates how to build a simple interactive dashboard for cryptocurrency data. It serves as a reference for several core Rio patterns:

• Creating interactive dashboards.
• Passing data between different components.
• Populating applications with custom data.
• Fetching data from external APIs or Local Storage.

The rio/assets/hosted/ directory is used to host files that are publicly accessible without any access control. Use this directory to host assets such as JavaScript dependencies, fonts, or other static files that need to be served publicly.

Warning: Any file placed in this directory is accessible to anyone; do not place sensitive or private files here.

By studying this template, you can learn how to implement the following patterns in Rio:

• Creating simple interactive dashboards.
• Passing data between components.
• Persistently loading data on app start.
• Defining and loading page layouts across sessions.
• Building dashboards that support both mobile and desktop layouts.

The Tic-Tac-Toe project template serves as a learning example for two core Rio concepts:

1. Creating and using custom components: Building reusable UI elements like individual board fields.
2. Component communication via custom events: Enabling child components to signal actions (like a cell being clicked) back to parent components to trigger state updates and game logic.