streamlit-react-components 1.0.0__py3-none-any.whl

streamlit_react_components/common/__init__.py

@@ -0,0 +1,23 @@
+"""Common display components."""
+
+from .panel import panel
+from .section_header import section_header
+from .stat_card import stat_card
+from .metric_row import metric_row
+from .data_table import data_table
+from .step_indicator import step_indicator
+from .button_group import button_group
+from .chart_legend import chart_legend
+from .plotly_chart import plotly_chart
+
+__all__ = [
+    "panel",
+    "section_header",
+    "stat_card",
+    "metric_row",
+    "data_table",
+    "step_indicator",
+    "button_group",
+    "chart_legend",
+    "plotly_chart",
+]

streamlit_react_components/common/button_group.py

@@ -0,0 +1,69 @@
+"""ButtonGroup component - A group of action buttons."""
+
+import streamlit.components.v1 as components
+from pathlib import Path
+from typing import Dict, Any, List, Optional
+
+_FRONTEND_DIR = Path(__file__).parent.parent / "_frontend"
+
+_component = components.declare_component(
+    "streamlit_react_components",
+    path=str(_FRONTEND_DIR),
+)
+
+
+def button_group(
+    buttons: List[Dict[str, Any]],
+    style: Optional[Dict[str, Any]] = None,
+    class_name: str = "",
+    key: Optional[str] = None,
+) -> Optional[str]:
+    """
+    Display a group of action buttons.
+
+    Args:
+        buttons: List of button configs, each with:
+                 - id: Unique identifier
+                 - label: Button text (optional)
+                 - icon: Button icon/emoji (optional)
+                 - color: Preset name ("blue", "green", "red", "yellow", "purple",
+                   "slate") or hex value like "#94a3b8" (optional)
+                 - disabled: Whether button is disabled (optional)
+                 - style: Inline CSS styles dict for this button (optional)
+                 - className: Tailwind CSS classes for this button (optional)
+        style: Inline CSS styles as a dictionary
+        class_name: Tailwind CSS classes
+        key: Unique key for the component
+
+    Returns:
+        The ID of the clicked button, or None if no click
+
+    Example:
+        # Using preset colors
+        clicked = button_group(
+            buttons=[
+                {"id": "view", "icon": "👁️"},
+                {"id": "edit", "icon": "✏️"},
+                {"id": "approve", "icon": "✓", "color": "green"},
+                {"id": "reject", "icon": "✕", "color": "red"}
+            ]
+        )
+
+        # Using hex colors and custom styling
+        clicked = button_group(
+            buttons=[
+                {"id": "custom", "icon": "🎨", "color": "#ff5733"},
+                {"id": "styled", "label": "Styled", "style": {"padding": "12px"}}
+            ]
+        )
+        if clicked == "approve":
+            approve_item()
+    """
+    return _component(
+        component="button_group",
+        buttons=buttons,
+        style=style,
+        className=class_name,
+        key=key,
+        default=None,
+    )

streamlit_react_components/common/chart_legend.py

@@ -0,0 +1,49 @@
+"""ChartLegend component - A chart legend with colored indicators."""
+
+import streamlit.components.v1 as components
+from pathlib import Path
+from typing import Dict, Any, List, Optional
+
+_FRONTEND_DIR = Path(__file__).parent.parent / "_frontend"
+
+_component = components.declare_component(
+    "streamlit_react_components",
+    path=str(_FRONTEND_DIR),
+)
+
+
+def chart_legend(
+    items: List[Dict[str, str]],
+    style: Optional[Dict[str, Any]] = None,
+    class_name: str = "",
+    key: Optional[str] = None,
+) -> None:
+    """
+    Display a chart legend with colored indicators.
+
+    Args:
+        items: List of legend items, each with:
+               - color: CSS color value (e.g., "#3b82f6", "rgb(59,130,246)")
+               - label: Legend label text
+        style: Inline CSS styles as a dictionary
+        class_name: Tailwind CSS classes
+        key: Unique key for the component
+
+    Example:
+        chart_legend(
+            items=[
+                {"color": "#94a3b8", "label": "Historical"},
+                {"color": "#ef4444", "label": "Outlier"},
+                {"color": "#8b5cf6", "label": "Prophet"},
+                {"color": "#10b981", "label": "ARIMA"}
+            ]
+        )
+    """
+    _component(
+        component="chart_legend",
+        items=items,
+        style=style,
+        className=class_name,
+        key=key,
+        default=None,
+    )

streamlit_react_components/common/data_table.py

@@ -0,0 +1,65 @@
+"""DataTable component - A styled data table with click support."""
+
+import streamlit.components.v1 as components
+from pathlib import Path
+from typing import Dict, Any, List, Optional
+
+_FRONTEND_DIR = Path(__file__).parent.parent / "_frontend"
+
+_component = components.declare_component(
+    "streamlit_react_components",
+    path=str(_FRONTEND_DIR),
+)
+
+
+def data_table(
+    columns: List[Dict[str, Any]],
+    rows: List[Dict[str, Any]],
+    show_header: bool = True,
+    style: Optional[Dict[str, Any]] = None,
+    class_name: str = "",
+    key: Optional[str] = None,
+) -> Optional[Dict[str, Any]]:
+    """
+    Display a styled data table with row click support.
+
+    Args:
+        columns: List of column definitions, each with:
+                 - key: Data key in each row
+                 - label: Column header text
+                 - align: "left", "center", or "right" (optional)
+                 - format: "number" or "percent" (optional)
+                 - colorByValue: True to color based on status values (optional)
+        rows: List of row data dictionaries
+        show_header: Whether to show the header row (default True)
+        style: Inline CSS styles as a dictionary
+        class_name: Tailwind CSS classes
+        key: Unique key for the component
+
+    Returns:
+        Dictionary with rowIndex and rowData when a row is clicked, None otherwise
+
+    Example:
+        columns = [
+            {"key": "site", "label": "Site"},
+            {"key": "util", "label": "Utilization", "align": "right", "format": "percent"},
+            {"key": "status", "label": "Status", "colorByValue": True}
+        ]
+        rows = [
+            {"site": "AML_14", "util": 94, "status": "above"},
+            {"site": "ADL", "util": 72, "status": "within"}
+        ]
+        clicked = data_table(columns=columns, rows=rows)
+        if clicked:
+            st.write(f"Clicked row: {clicked['rowData']}")
+    """
+    return _component(
+        component="data_table",
+        columns=columns,
+        rows=rows,
+        showHeader=show_header,
+        style=style,
+        className=class_name,
+        key=key,
+        default=None,
+    )

streamlit_react_components/common/metric_row.py

@@ -0,0 +1,47 @@
+"""MetricRow component - A key-value display row."""
+
+import streamlit.components.v1 as components
+from pathlib import Path
+from typing import Dict, Any, Optional
+
+_FRONTEND_DIR = Path(__file__).parent.parent / "_frontend"
+
+_component = components.declare_component(
+    "streamlit_react_components",
+    path=str(_FRONTEND_DIR),
+)
+
+
+def metric_row(
+    label: str,
+    value: str,
+    value_color: str = "",
+    style: Optional[Dict[str, Any]] = None,
+    class_name: str = "",
+    key: Optional[str] = None,
+) -> None:
+    """
+    Display a key-value metric row.
+
+    Args:
+        label: The metric label (left side)
+        value: The metric value (right side)
+        value_color: Tailwind text color class for the value (e.g., "text-green-400")
+        style: Inline CSS styles as a dictionary
+        class_name: Tailwind CSS classes
+        key: Unique key for the component
+
+    Example:
+        metric_row(label="Mean", value="78.4%")
+        metric_row(label="Trend", value="↑ +0.4%/mo", value_color="text-green-400")
+    """
+    _component(
+        component="metric_row",
+        label=label,
+        value=value,
+        valueColor=value_color,
+        style=style,
+        className=class_name,
+        key=key,
+        default=None,
+    )

streamlit_react_components/common/panel.py

@@ -0,0 +1,43 @@
+"""Panel component - A styled container wrapper."""
+
+import streamlit.components.v1 as components
+from pathlib import Path
+from typing import Dict, Any, Optional
+
+_FRONTEND_DIR = Path(__file__).parent.parent / "_frontend"
+
+_component = components.declare_component(
+    "streamlit_react_components",
+    path=str(_FRONTEND_DIR),
+)
+
+
+def panel(
+    children: str = "",
+    style: Optional[Dict[str, Any]] = None,
+    class_name: str = "",
+    key: Optional[str] = None,
+) -> None:
+    """
+    Display a styled panel/card container.
+
+    Args:
+        children: HTML content to render inside the panel
+        style: Inline CSS styles as a dictionary (e.g., {"background": "#1e293b"})
+        class_name: Tailwind CSS classes (e.g., "bg-slate-900 p-4")
+        key: Unique key for the component
+
+    Example:
+        panel(
+            children="<h3>Title</h3><p>Content here</p>",
+            class_name="mt-4"
+        )
+    """
+    _component(
+        component="panel",
+        children=children,
+        style=style,
+        className=class_name,
+        key=key,
+        default=None,
+    )

streamlit_react_components/common/plotly_chart.py

@@ -0,0 +1,216 @@
+"""PlotlyChart component - Render Plotly charts with full interactivity."""
+
+import streamlit.components.v1 as components
+from pathlib import Path
+from typing import Dict, Any, Optional, List, Union
+
+_FRONTEND_DIR = Path(__file__).parent.parent / "_frontend"
+
+_component = components.declare_component(
+    "streamlit_react_components",
+    path=str(_FRONTEND_DIR),
+)
+
+
+def _dataframe_to_figure(
+    data: Any,
+    x: Optional[str],
+    y: Optional[Union[str, List[str]]],
+    color: Optional[str],
+    chart_type: str,
+    title: Optional[str],
+) -> Dict[str, Any]:
+    """Convert a DataFrame to a Plotly figure dict."""
+    traces = []
+    layout: Dict[str, Any] = {}
+
+    if title:
+        layout["title"] = title
+
+    # Determine y columns
+    y_cols = [y] if isinstance(y, str) else (y or [])
+
+    # Color grouping
+    if color and color in data.columns:
+        groups = data[color].unique()
+        for group in groups:
+            group_data = data[data[color] == group]
+            for y_col in y_cols:
+                trace = _create_trace(
+                    chart_type,
+                    group_data[x].tolist() if x else list(range(len(group_data))),
+                    group_data[y_col].tolist(),
+                    f"{group}" if len(y_cols) == 1 else f"{group} - {y_col}",
+                )
+                traces.append(trace)
+    else:
+        # No color grouping
+        x_data = data[x].tolist() if x else list(range(len(data)))
+        for y_col in y_cols:
+            trace = _create_trace(
+                chart_type,
+                x_data,
+                data[y_col].tolist(),
+                y_col if len(y_cols) > 1 else None,
+            )
+            traces.append(trace)
+
+    return {"data": traces, "layout": layout}
+
+
+def _create_trace(
+    chart_type: str,
+    x_data: List[Any],
+    y_data: List[Any],
+    name: Optional[str],
+) -> Dict[str, Any]:
+    """Create a single Plotly trace based on chart type."""
+    base: Dict[str, Any] = {"x": x_data, "y": y_data}
+    if name:
+        base["name"] = name
+
+    if chart_type == "line":
+        return {"type": "scatter", "mode": "lines", **base}
+    elif chart_type == "scatter":
+        return {"type": "scatter", "mode": "markers", **base}
+    elif chart_type == "bar":
+        return {"type": "bar", **base}
+    elif chart_type == "area":
+        return {"type": "scatter", "mode": "lines", "fill": "tozeroy", **base}
+    elif chart_type == "histogram":
+        return {"type": "histogram", "x": x_data}
+    elif chart_type == "pie":
+        return {"type": "pie", "labels": x_data, "values": y_data}
+    else:
+        # Default to scatter with lines
+        return {"type": "scatter", "mode": "lines", **base}
+
+
+def plotly_chart(
+    figure: Optional[Any] = None,
+    data: Optional[Any] = None,
+    x: Optional[str] = None,
+    y: Optional[Union[str, List[str]]] = None,
+    color: Optional[str] = None,
+    chart_type: str = "line",
+    title: Optional[str] = None,
+    config: Optional[Dict[str, Any]] = None,
+    on_click: bool = False,
+    on_select: bool = False,
+    on_hover: bool = False,
+    on_relayout: bool = False,
+    style: Optional[Dict[str, Any]] = None,
+    class_name: str = "",
+    key: Optional[str] = None,
+) -> Optional[Dict[str, Any]]:
+    """
+    Render a Plotly chart with full interactivity and custom styling.
+
+    Supports two modes:
+    1. Pass a Plotly figure object directly
+    2. Pass a pandas DataFrame with chart configuration
+
+    Args:
+        figure: Plotly figure object (go.Figure) or dict with 'data' and 'layout'.
+                Takes precedence over `data` parameter.
+        data: pandas DataFrame for quick chart creation
+        x: Column name for x-axis (when using DataFrame)
+        y: Column name(s) for y-axis - string or list of strings (when using DataFrame)
+        color: Column name for color grouping (when using DataFrame)
+        chart_type: Chart type when using DataFrame - "line", "bar", "scatter",
+                   "area", "pie", or "histogram" (default "line")
+        title: Chart title (when using DataFrame)
+        config: Plotly config options (displayModeBar, scrollZoom, etc.)
+        on_click: Enable click events (returns clicked points)
+        on_select: Enable selection events (box/lasso selection)
+        on_hover: Enable hover events (returns hovered points)
+        on_relayout: Enable relayout events (zoom/pan state)
+        style: Inline CSS styles as a dictionary
+        class_name: Tailwind CSS classes
+        key: Unique key for the component
+
+    Returns:
+        Event dict with 'type' and event data, or None if no event.
+        Event types: 'click', 'select', 'hover', 'relayout'
+
+    Example using Plotly figure:
+        import plotly.graph_objects as go
+
+        fig = go.Figure(
+            data=[go.Scatter(x=[1,2,3], y=[4,5,6], mode='lines+markers')],
+            layout=go.Layout(title='My Chart')
+        )
+
+        event = plotly_chart(
+            figure=fig,
+            on_click=True,
+            on_select=True,
+            style={"height": "400px"}
+        )
+
+        if event and event['type'] == 'click':
+            st.write(f"Clicked: {event['points']}")
+
+    Example using DataFrame:
+        import pandas as pd
+
+        df = pd.DataFrame({
+            'month': ['Jan', 'Feb', 'Mar', 'Apr'],
+            'sales': [100, 150, 120, 180],
+            'orders': [50, 75, 60, 90]
+        })
+
+        # Simple line chart
+        event = plotly_chart(
+            data=df,
+            x='month',
+            y='sales',
+            chart_type='line',
+            title='Monthly Sales',
+            on_click=True
+        )
+
+        # Multiple y columns as bar chart
+        event = plotly_chart(
+            data=df,
+            x='month',
+            y=['sales', 'orders'],
+            chart_type='bar',
+            title='Sales vs Orders'
+        )
+
+        # Scatter with color grouping
+        event = plotly_chart(
+            data=df,
+            x='sales',
+            y='orders',
+            color='month',
+            chart_type='scatter'
+        )
+    """
+    # Determine figure dict
+    if figure is not None:
+        # Convert Plotly figure to dict if needed
+        if hasattr(figure, "to_dict"):
+            figure_dict = figure.to_dict()
+        else:
+            figure_dict = figure
+    elif data is not None:
+        # Create figure from DataFrame
+        figure_dict = _dataframe_to_figure(data, x, y, color, chart_type, title)
+    else:
+        raise ValueError("Either 'figure' or 'data' parameter is required")
+
+    return _component(
+        component="plotly_chart",
+        figure=figure_dict,
+        config=config,
+        onClickEnabled=on_click,
+        onSelectEnabled=on_select,
+        onHoverEnabled=on_hover,
+        onRelayoutEnabled=on_relayout,
+        style=style,
+        className=class_name,
+        key=key,
+        default=None,
+    )

streamlit_react_components/common/section_header.py

@@ -0,0 +1,89 @@
+"""SectionHeader component - A styled section title with optional actions."""
+
+import streamlit.components.v1 as components
+from pathlib import Path
+from typing import Dict, Any, List, Optional
+
+_FRONTEND_DIR = Path(__file__).parent.parent / "_frontend"
+
+_component = components.declare_component(
+    "streamlit_react_components",
+    path=str(_FRONTEND_DIR),
+)
+
+
+def section_header(
+    title: str,
+    icon: str = "",
+    actions: Optional[List[Dict[str, Any]]] = None,
+    style: Optional[Dict[str, Any]] = None,
+    class_name: str = "",
+    key: Optional[str] = None,
+) -> Optional[str]:
+    """
+    Display a section header with optional action buttons.
+
+    Args:
+        title: The header title text
+        icon: Optional emoji or icon to display before the title
+        actions: List of action button configs, each with:
+                 - id: Unique identifier for the action
+                 - label: Button text (optional)
+                 - icon: Button icon (optional)
+                 - color: Preset name ("blue", "green", "red", "yellow", "purple",
+                   "slate") or hex value like "#94a3b8" (optional)
+                 - style: Inline CSS styles dict for this button (optional)
+                 - className: Tailwind CSS classes for this button (optional)
+                 - href: URL for link actions. External URLs (http/https) open
+                   in a new tab. Internal paths return the ID for use with
+                   st.switch_page() (optional)
+        style: Inline CSS styles as a dictionary
+        class_name: Tailwind CSS classes
+        key: Unique key for the component
+
+    Returns:
+        The ID of the clicked action button, or None if no click
+
+    Example:
+        # Using preset colors
+        clicked = section_header(
+            title="Dashboard",
+            icon="📊",
+            actions=[{"id": "refresh", "label": "Refresh", "color": "blue"}]
+        )
+
+        # Using hex colors and custom styling
+        clicked = section_header(
+            title="Dashboard",
+            actions=[
+                {"id": "custom", "label": "Custom", "color": "#94a3b8"},
+                {"id": "styled", "label": "Styled", "style": {"padding": "12px"}}
+            ]
+        )
+
+        # External link (opens in new tab)
+        clicked = section_header(
+            title="Resources",
+            actions=[
+                {"id": "docs", "label": "Documentation", "href": "https://docs.example.com", "icon": "📚"}
+            ]
+        )
+
+        # Internal navigation
+        clicked = section_header(
+            title="Settings",
+            actions=[{"id": "home", "label": "Home", "icon": "🏠"}]
+        )
+        if clicked == "home":
+            st.switch_page("pages/home.py")
+    """
+    return _component(
+        component="section_header",
+        title=title,
+        icon=icon,
+        actions=actions or [],
+        style=style,
+        className=class_name,
+        key=key,
+        default=None,
+    )

streamlit_react_components/common/stat_card.py

@@ -0,0 +1,63 @@
+"""StatCard component - A styled statistics display card."""
+
+import streamlit.components.v1 as components
+from pathlib import Path
+from typing import Dict, Any, Optional, Union
+
+_FRONTEND_DIR = Path(__file__).parent.parent / "_frontend"
+
+_component = components.declare_component(
+    "streamlit_react_components",
+    path=str(_FRONTEND_DIR),
+)
+
+
+def stat_card(
+    label: str,
+    value: Union[str, int, float],
+    color: str = "blue",
+    icon: str = "",
+    style: Optional[Dict[str, Any]] = None,
+    class_name: str = "",
+    key: Optional[str] = None,
+) -> None:
+    """
+    Display a styled statistics card with a label and value.
+
+    Args:
+        label: The description label (e.g., "Total Users")
+        value: The statistic value to display
+        color: Accent color - preset name ("blue", "green", "red", "yellow",
+               "purple", "slate") or hex value (e.g., "#94a3b8")
+        icon: Optional emoji or icon to display with the label
+        style: Inline CSS styles as a dictionary
+        class_name: Tailwind CSS classes
+        key: Unique key for the component
+
+    Example:
+        # Using preset color
+        stat_card(
+            label="Within Threshold",
+            value="4",
+            color="green",
+            style={"minWidth": "150px"}
+        )
+
+        # Using hex color
+        stat_card(
+            label="Custom Color",
+            value="42",
+            color="#ff5733"
+        )
+    """
+    _component(
+        component="stat_card",
+        label=label,
+        value=str(value),
+        color=color,
+        icon=icon,
+        style=style,
+        className=class_name,
+        key=key,
+        default=None,
+    )