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

streamlit_react_components/common/__init__.py

@@ -0,0 +1,21 @@
+"""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
+
+__all__ = [
+    "panel",
+    "section_header",
+    "stat_card",
+    "metric_row",
+    "data_table",
+    "step_indicator",
+    "button_group",
+    "chart_legend",
+]

streamlit_react_components/common/button_group.py

@@ -0,0 +1,57 @@
+"""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: Button color: "blue", "green", "red", "yellow" (optional)
+                 - disabled: Whether button is disabled (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:
+        clicked = button_group(
+            buttons=[
+                {"id": "view", "icon": "👁️"},
+                {"id": "edit", "icon": "✏️"},
+                {"id": "approve", "icon": "✓", "color": "green"},
+                {"id": "reject", "icon": "✕", "color": "red"}
+            ]
+        )
+        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/section_header.py

@@ -0,0 +1,59 @@
+"""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: Button color: "blue", "green", "red", "yellow" (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:
+        clicked = section_header(
+            title="Dashboard",
+            icon="📊",
+            actions=[{"id": "refresh", "label": "Refresh", "color": "blue"}]
+        )
+        if clicked == "refresh":
+            st.rerun()
+    """
+    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,54 @@
+"""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: "blue", "green", "red", "yellow", "purple"
+        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:
+        stat_card(
+            label="Within Threshold",
+            value="4",
+            color="green",
+            style={"minWidth": "150px"}
+        )
+    """
+    _component(
+        component="stat_card",
+        label=label,
+        value=str(value),
+        color=color,
+        icon=icon,
+        style=style,
+        className=class_name,
+        key=key,
+        default=None,
+    )

streamlit_react_components/common/step_indicator.py

@@ -0,0 +1,51 @@
+"""StepIndicator component - A multi-step wizard progress indicator."""
+
+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 step_indicator(
+    steps: List[str],
+    current_step: int,
+    style: Optional[Dict[str, Any]] = None,
+    class_name: str = "",
+    key: Optional[str] = None,
+) -> Optional[int]:
+    """
+    Display a multi-step wizard progress indicator.
+
+    Args:
+        steps: List of step labels (e.g., ["Supply Plan", "Levers", "Review"])
+        current_step: Current active step (1-indexed)
+        style: Inline CSS styles as a dictionary
+        class_name: Tailwind CSS classes
+        key: Unique key for the component
+
+    Returns:
+        The step number that was clicked, or None if no click
+
+    Example:
+        step = step_indicator(
+            steps=["Supply Plan", "Levers", "Review"],
+            current_step=2
+        )
+        if step:
+            st.session_state.step = step
+    """
+    return _component(
+        component="step_indicator",
+        steps=steps,
+        currentStep=current_step,
+        style=style,
+        className=class_name,
+        key=key,
+        default=None,
+    )

streamlit_react_components/form/__init__.py

@@ -0,0 +1,11 @@
+"""Form input components."""
+
+from .form_select import form_select
+from .form_slider import form_slider
+from .checkbox_group import checkbox_group
+
+__all__ = [
+    "form_select",
+    "form_slider",
+    "checkbox_group",
+]

streamlit_react_components/form/checkbox_group.py

@@ -0,0 +1,61 @@
+"""CheckboxGroup component - A group of checkboxes."""
+
+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 checkbox_group(
+    items: List[Dict[str, Any]],
+    label: str = "",
+    style: Optional[Dict[str, Any]] = None,
+    class_name: str = "",
+    key: Optional[str] = None,
+) -> List[str]:
+    """
+    Display a group of checkboxes.
+
+    Args:
+        items: List of checkbox items, each with:
+               - id: Unique identifier
+               - label: Display label
+               - checked: Initial checked state (optional, default False)
+        label: Optional group label
+        style: Inline CSS styles as a dictionary
+        class_name: Tailwind CSS classes
+        key: Unique key for the component
+
+    Returns:
+        List of checked item IDs
+
+    Example:
+        selected = checkbox_group(
+            label="Parameters",
+            items=[
+                {"id": "vphp", "label": "VPHP Hold", "checked": True},
+                {"id": "lot_co", "label": "Lot C/O", "checked": True},
+                {"id": "batch", "label": "Batch Size"}
+            ]
+        )
+        # Returns: ["vphp", "lot_co"] if those are checked
+    """
+    # Get default checked items
+    default_checked = [item["id"] for item in items if item.get("checked", False)]
+
+    result = _component(
+        component="checkbox_group",
+        label=label,
+        items=items,
+        style=style,
+        className=class_name,
+        key=key,
+        default=default_checked,
+    )
+    return result if result is not None else default_checked

streamlit_react_components/form/form_select.py

@@ -0,0 +1,69 @@
+"""FormSelect component - A styled dropdown select input."""
+
+import streamlit.components.v1 as components
+from pathlib import Path
+from typing import Dict, Any, List, Optional, Union
+
+_FRONTEND_DIR = Path(__file__).parent.parent / "_frontend"
+
+_component = components.declare_component(
+    "streamlit_react_components",
+    path=str(_FRONTEND_DIR),
+)
+
+
+def form_select(
+    label: str,
+    options: List[Union[str, Dict[str, str]]],
+    value: str = "",
+    groups: Optional[List[Dict[str, Any]]] = None,
+    style: Optional[Dict[str, Any]] = None,
+    class_name: str = "",
+    key: Optional[str] = None,
+) -> str:
+    """
+    Display a styled dropdown select input.
+
+    Args:
+        label: Label text for the select
+        options: List of options, either strings or dicts with {value, label}
+        value: Currently selected value
+        groups: Optional list of option groups, each with:
+                - label: Group header text
+                - options: List of options in this group
+        style: Inline CSS styles as a dictionary
+        class_name: Tailwind CSS classes
+        key: Unique key for the component
+
+    Returns:
+        The currently selected value
+
+    Example:
+        # Simple string options
+        site = form_select(
+            label="Site",
+            options=["AML_14", "ADL", "Devens"],
+            value="AML_14"
+        )
+
+        # With option groups
+        version = form_select(
+            label="Base On",
+            groups=[
+                {"label": "Baselines", "options": ["Baseline v7"]},
+                {"label": "Scenarios", "options": ["Q2 Demand Surge"]}
+            ]
+        )
+    """
+    result = _component(
+        component="form_select",
+        label=label,
+        options=options,
+        value=value,
+        groups=groups,
+        style=style,
+        className=class_name,
+        key=key,
+        default=value,
+    )
+    return result if result is not None else value

streamlit_react_components/form/form_slider.py

@@ -0,0 +1,69 @@
+"""FormSlider component - A styled range slider input."""
+
+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 form_slider(
+    label: str,
+    value: float,
+    min_val: float,
+    max_val: float,
+    step: float = 1,
+    unit: str = "",
+    color: str = "blue",
+    style: Optional[Dict[str, Any]] = None,
+    class_name: str = "",
+    key: Optional[str] = None,
+) -> float:
+    """
+    Display a styled range slider input.
+
+    Args:
+        label: Label text for the slider
+        value: Current value
+        min_val: Minimum value
+        max_val: Maximum value
+        step: Step increment (default 1)
+        unit: Unit suffix to display (e.g., "%", "hrs")
+        color: Accent color: "blue", "green", "red", "yellow", "purple"
+        style: Inline CSS styles as a dictionary
+        class_name: Tailwind CSS classes
+        key: Unique key for the component
+
+    Returns:
+        The current slider value
+
+    Example:
+        threshold = form_slider(
+            label="Upper Threshold",
+            value=90,
+            min_val=75,
+            max_val=100,
+            unit="%",
+            color="red"
+        )
+    """
+    result = _component(
+        component="form_slider",
+        label=label,
+        value=value,
+        minVal=min_val,
+        maxVal=max_val,
+        step=step,
+        unit=unit,
+        color=color,
+        style=style,
+        className=class_name,
+        key=key,
+        default=value,
+    )
+    return float(result) if result is not None else value

streamlit_react_components-0.1.0.dist-info/METADATA

@@ -0,0 +1,18 @@
+Metadata-Version: 2.4
+Name: streamlit-react-components
+Version: 0.1.0
+Summary: Reusable React-based Streamlit components with Tailwind CSS styling
+License: MIT
+Project-URL: Homepage, https://github.com/your-org/streamlit-react-components
+Classifier: Development Status :: 3 - Alpha
+Classifier: Intended Audience :: Developers
+Classifier: License :: OSI Approved :: MIT License
+Classifier: Programming Language :: Python :: 3
+Classifier: Programming Language :: Python :: 3.8
+Classifier: Programming Language :: Python :: 3.9
+Classifier: Programming Language :: Python :: 3.10
+Classifier: Programming Language :: Python :: 3.11
+Classifier: Programming Language :: Python :: 3.12
+Requires-Python: >=3.8
+Description-Content-Type: text/markdown
+Requires-Dist: streamlit>=1.24.0