streamlit-react-components 0.1.0__tar.gz → 0.1.1__tar.gz

streamlit_react_components-0.1.1/PKG-INFO

@@ -0,0 +1,677 @@
+Metadata-Version: 2.4
+Name: streamlit-react-components
+Version: 0.1.1
+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
+
+# Streamlit React Components
+
+A collection of 11 reusable React-based Streamlit components with Tailwind CSS styling. All components support custom inline styles and Tailwind class names.
+
+## Installation
+
+```bash
+pip install streamlit-react-components
+```
+
+## Quick Start
+
+```python
+import streamlit as st
+from streamlit_react_components import (
+    panel, section_header, stat_card, metric_row,
+    data_table, step_indicator, button_group, chart_legend,
+    form_select, form_slider, checkbox_group
+)
+```
+
+---
+
+## Styling
+
+All components accept two styling parameters:
+
+| Parameter | Type | Description |
+|-----------|------|-------------|
+| `style` | `dict` | Inline CSS as Python dict (e.g., `{"background": "#1e293b", "padding": "16px"}`) |
+| `class_name` | `str` | Tailwind CSS classes (e.g., `"bg-slate-900 p-4 rounded-lg"`) |
+
+### Example
+
+```python
+stat_card(
+    label="Revenue",
+    value="$50K",
+    color="blue",
+    style={"minWidth": "200px", "boxShadow": "0 4px 6px rgba(0,0,0,0.3)"},
+    class_name="border border-blue-500"
+)
+```
+
+---
+
+## Components
+
+### 1. Panel
+
+A styled container/card wrapper.
+
+```python
+panel(
+    children: str = "",           # HTML content
+    style: dict = None,
+    class_name: str = "",
+    key: str = None
+) -> None
+```
+
+#### Example
+
+```python
+panel(
+    children="<h3 style='color: white;'>Title</h3><p style='color: #94a3b8;'>Content here</p>",
+    class_name="border border-blue-500"
+)
+```
+
+#### Default Styling
+- Background: `bg-slate-900`
+- Border radius: `rounded-lg`
+- Padding: `p-4`
+
+---
+
+### 2. Section Header
+
+A section title with optional action buttons.
+
+```python
+section_header(
+    title: str,                   # Header text
+    icon: str = "",               # Emoji or icon prefix
+    actions: list = None,         # List of action buttons
+    style: dict = None,
+    class_name: str = "",
+    key: str = None
+) -> str | None                   # Returns clicked action ID
+```
+
+#### Actions Format
+
+```python
+actions = [
+    {"id": "refresh", "label": "Refresh", "color": "blue"},
+    {"id": "export", "icon": "📥", "label": "Export", "color": "green"}
+]
+```
+
+| Action Key | Type | Description |
+|------------|------|-------------|
+| `id` | `str` | Unique identifier (returned on click) |
+| `label` | `str` | Button text (optional) |
+| `icon` | `str` | Emoji/icon (optional) |
+| `color` | `str` | `"blue"`, `"green"`, `"red"`, `"yellow"`, `"purple"` |
+
+#### Example
+
+```python
+clicked = section_header(
+    title="Executive Summary",
+    icon="📊",
+    actions=[
+        {"id": "refresh", "label": "Refresh", "color": "blue"},
+        {"id": "settings", "icon": "⚙️", "color": "slate"}
+    ]
+)
+
+if clicked == "refresh":
+    st.rerun()
+```
+
+---
+
+### 3. Stat Card
+
+A statistics display card with colored accent.
+
+```python
+stat_card(
+    label: str,                   # Description text
+    value: str | int | float,     # The statistic value
+    color: str = "blue",          # Accent color
+    icon: str = "",               # Optional icon
+    style: dict = None,
+    class_name: str = "",
+    key: str = None
+) -> None
+```
+
+#### Colors
+
+| Color | Border | Text |
+|-------|--------|------|
+| `"blue"` | `border-blue-500` | `text-blue-400` |
+| `"green"` | `border-green-500` | `text-green-400` |
+| `"red"` | `border-red-500` | `text-red-400` |
+| `"yellow"` | `border-yellow-500` | `text-yellow-400` |
+| `"purple"` | `border-purple-500` | `text-purple-400` |
+
+#### Example
+
+```python
+col1, col2, col3, col4 = st.columns(4)
+
+with col1:
+    stat_card(label="Within Threshold", value="4", color="green")
+with col2:
+    stat_card(label="Above (Risk)", value="2", color="red")
+with col3:
+    stat_card(label="Below (Underutil)", value="1", color="yellow")
+with col4:
+    stat_card(label="Avg OEE", value="78.4%", color="blue")
+```
+
+---
+
+### 4. Metric Row
+
+A key-value display row.
+
+```python
+metric_row(
+    label: str,                   # Left-side label
+    value: str,                   # Right-side value
+    value_color: str = "",        # Tailwind text color class
+    style: dict = None,
+    class_name: str = "",
+    key: str = None
+) -> None
+```
+
+#### Example
+
+```python
+metric_row(label="Mean", value="78.4%")
+metric_row(label="Median", value="79.0%")
+metric_row(label="Outliers", value="3", value_color="text-red-400")
+metric_row(label="Trend", value="↑ +0.4%/mo", value_color="text-green-400")
+```
+
+#### Common Value Colors
+
+| Color | Class |
+|-------|-------|
+| Green | `text-green-400` |
+| Red | `text-red-400` |
+| Yellow | `text-yellow-400` |
+| Blue | `text-blue-400` |
+| Gray | `text-slate-400` |
+
+---
+
+### 5. Data Table
+
+A styled data table with row click support.
+
+```python
+data_table(
+    columns: list,                # Column definitions
+    rows: list,                   # Row data
+    show_header: bool = True,
+    style: dict = None,
+    class_name: str = "",
+    key: str = None
+) -> dict | None                  # Returns {rowIndex, rowData} on click
+```
+
+#### Column Definition
+
+```python
+columns = [
+    {"key": "name", "label": "Name"},
+    {"key": "value", "label": "Value", "align": "right", "format": "number"},
+    {"key": "percent", "label": "%", "align": "center", "format": "percent"},
+    {"key": "status", "label": "Status", "colorByValue": True}
+]
+```
+
+| Column Key | Type | Description |
+|------------|------|-------------|
+| `key` | `str` | Data key in row dict |
+| `label` | `str` | Column header text |
+| `align` | `str` | `"left"`, `"center"`, `"right"` |
+| `format` | `str` | `"number"` (adds commas), `"percent"` (adds %) |
+| `colorByValue` | `bool` | Color based on status values |
+
+#### Auto-Colored Values
+
+When `colorByValue: True`, these values get automatic colors:
+
+| Value | Color |
+|-------|-------|
+| `"above"` | Red |
+| `"below"` | Yellow |
+| `"within"` | Green |
+| `"approved"` | Green |
+| `"rejected"` | Red |
+| `"submitted"` | Yellow |
+| `"draft"` | Gray |
+
+#### Example
+
+```python
+columns = [
+    {"key": "site", "label": "Site"},
+    {"key": "line", "label": "Line"},
+    {"key": "util", "label": "Utilization", "align": "right", "format": "percent"},
+    {"key": "volume", "label": "Volume", "align": "right", "format": "number"},
+    {"key": "status", "label": "Status", "align": "center", "colorByValue": True}
+]
+
+rows = [
+    {"site": "AML_14", "line": "L1", "util": 94, "volume": 125000, "status": "above"},
+    {"site": "ADL", "line": "L2", "util": 72, "volume": 98000, "status": "within"},
+    {"site": "Devens", "line": "L3", "util": 58, "volume": 45000, "status": "below"}
+]
+
+clicked = data_table(columns=columns, rows=rows)
+
+if clicked:
+    st.write(f"Selected row {clicked['rowIndex']}: {clicked['rowData']}")
+```
+
+---
+
+### 6. Step Indicator
+
+A multi-step wizard progress indicator.
+
+```python
+step_indicator(
+    steps: list,                  # List of step labels
+    current_step: int,            # Current step (1-indexed)
+    style: dict = None,
+    class_name: str = "",
+    key: str = None
+) -> int | None                   # Returns clicked step number
+```
+
+#### Example
+
+```python
+if "step" not in st.session_state:
+    st.session_state.step = 1
+
+clicked = step_indicator(
+    steps=["Supply Plan", "Configure Levers", "Review & Submit"],
+    current_step=st.session_state.step
+)
+
+if clicked:
+    st.session_state.step = clicked
+    st.rerun()
+```
+
+#### Visual States
+
+| State | Appearance |
+|-------|------------|
+| Completed (< current) | Green circle with ✓ |
+| Current | Blue circle with number |
+| Future (> current) | Gray circle with number |
+
+---
+
+### 7. Button Group
+
+A group of action buttons.
+
+```python
+button_group(
+    buttons: list,                # List of button configs
+    style: dict = None,
+    class_name: str = "",
+    key: str = None
+) -> str | None                   # Returns clicked button ID
+```
+
+#### Button Definition
+
+```python
+buttons = [
+    {"id": "view", "icon": "👁️"},
+    {"id": "edit", "icon": "✏️", "label": "Edit"},
+    {"id": "approve", "icon": "✓", "color": "green"},
+    {"id": "reject", "icon": "✕", "color": "red", "disabled": True}
+]
+```
+
+| Button Key | Type | Description |
+|------------|------|-------------|
+| `id` | `str` | Unique identifier (returned on click) |
+| `label` | `str` | Button text (optional) |
+| `icon` | `str` | Emoji/icon (optional) |
+| `color` | `str` | `"blue"`, `"green"`, `"red"`, `"yellow"`, `"purple"`, `"slate"` |
+| `disabled` | `bool` | Disable the button |
+
+#### Example
+
+```python
+clicked = button_group(
+    buttons=[
+        {"id": "view", "icon": "👁️", "label": "View"},
+        {"id": "edit", "icon": "✏️", "label": "Edit"},
+        {"id": "delete", "icon": "🗑️", "color": "red"}
+    ]
+)
+
+if clicked == "delete":
+    st.warning("Delete clicked!")
+```
+
+---
+
+### 8. Chart Legend
+
+A legend for charts with colored indicators.
+
+```python
+chart_legend(
+    items: list,                  # List of legend items
+    style: dict = None,
+    class_name: str = "",
+    key: str = None
+) -> None
+```
+
+#### Items Format
+
+```python
+items = [
+    {"color": "#94a3b8", "label": "Historical"},
+    {"color": "#ef4444", "label": "Outlier"},
+    {"color": "#8b5cf6", "label": "Prophet"},
+    {"color": "#10b981", "label": "ARIMA"}
+]
+```
+
+#### Example
+
+```python
+# Display a chart (using st.line_chart, plotly, etc.)
+st.line_chart(data)
+
+# Add legend below
+chart_legend(
+    items=[
+        {"color": "#3b82f6", "label": "Actual"},
+        {"color": "#ef4444", "label": "Upper Threshold"},
+        {"color": "#eab308", "label": "Lower Threshold"},
+        {"color": "#8b5cf6", "label": "Forecast"}
+    ]
+)
+```
+
+---
+
+### 9. Form Select
+
+A styled dropdown select input.
+
+```python
+form_select(
+    label: str,                   # Label text
+    options: list,                # Options list
+    value: str = "",              # Selected value
+    groups: list = None,          # Option groups (for optgroup)
+    style: dict = None,
+    class_name: str = "",
+    key: str = None
+) -> str                          # Returns selected value
+```
+
+#### Simple Options
+
+```python
+options = ["Option A", "Option B", "Option C"]
+```
+
+#### Options with Labels
+
+```python
+options = [
+    {"value": "a", "label": "Option A"},
+    {"value": "b", "label": "Option B"}
+]
+```
+
+#### Grouped Options
+
+```python
+groups = [
+    {"label": "Baselines", "options": ["Baseline v7", "Baseline v6"]},
+    {"label": "Scenarios", "options": ["Q2 Demand Surge", "OEE Initiative"]}
+]
+```
+
+#### Example
+
+```python
+# Simple
+site = form_select(
+    label="Site",
+    options=["AML_14", "ADL", "Devens"],
+    value="AML_14"
+)
+
+# With groups
+scenario = form_select(
+    label="Base On",
+    groups=[
+        {"label": "Baselines", "options": ["Baseline v7 (Current)", "Baseline v6"]},
+        {"label": "Scenarios", "options": ["Q2 Demand Surge", "OEE Initiative"]}
+    ],
+    class_name="max-w-xs"
+)
+```
+
+---
+
+### 10. Form Slider
+
+A styled range slider input.
+
+```python
+form_slider(
+    label: str,                   # Label text
+    value: float,                 # Current value
+    min_val: float,               # Minimum value
+    max_val: float,               # Maximum value
+    step: float = 1,              # Step increment
+    unit: str = "",               # Unit suffix (e.g., "%", "hrs")
+    color: str = "blue",          # Value display color
+    style: dict = None,
+    class_name: str = "",
+    key: str = None
+) -> float                        # Returns current value
+```
+
+#### Example
+
+```python
+# Percentage slider
+threshold = form_slider(
+    label="Upper Threshold",
+    value=90,
+    min_val=75,
+    max_val=100,
+    unit="%",
+    color="red"
+)
+
+# Time slider
+hold_time = form_slider(
+    label="VPHP Hold Time",
+    value=5.0,
+    min_val=2.0,
+    max_val=8.0,
+    step=0.5,
+    unit=" hrs",
+    color="blue"
+)
+
+# Batch size
+batch = form_slider(
+    label="Batch Size",
+    value=500,
+    min_val=200,
+    max_val=1000,
+    step=25,
+    color="green"
+)
+```
+
+---
+
+### 11. Checkbox Group
+
+A group of checkboxes.
+
+```python
+checkbox_group(
+    items: list,                  # List of checkbox items
+    label: str = "",              # Optional group label
+    style: dict = None,
+    class_name: str = "",
+    key: str = None
+) -> list                         # Returns list of checked item IDs
+```
+
+#### Items Format
+
+```python
+items = [
+    {"id": "opt1", "label": "Option 1", "checked": True},
+    {"id": "opt2", "label": "Option 2", "checked": True},
+    {"id": "opt3", "label": "Option 3"}  # checked defaults to False
+]
+```
+
+#### Example
+
+```python
+selected = checkbox_group(
+    label="Parameters to Optimize",
+    items=[
+        {"id": "vphp", "label": "VPHP Hold Time", "checked": True},
+        {"id": "lot_co", "label": "Lot Changeover", "checked": True},
+        {"id": "campaign_co", "label": "Campaign Changeover"},
+        {"id": "batch", "label": "Batch Size"}
+    ]
+)
+
+st.write(f"Selected parameters: {selected}")
+# Output: ['vphp', 'lot_co']
+```
+
+---
+
+## Complete Example App
+
+```python
+import streamlit as st
+from streamlit_react_components import (
+    section_header, stat_card, data_table,
+    form_select, form_slider, checkbox_group
+)
+
+st.set_page_config(page_title="Dashboard", layout="wide")
+
+# Header
+action = section_header(
+    title="Production Dashboard",
+    icon="🏭",
+    actions=[{"id": "refresh", "label": "Refresh", "color": "blue"}]
+)
+
+# Stats row
+col1, col2, col3 = st.columns(3)
+with col1:
+    stat_card(label="Lines Active", value="12", color="green")
+with col2:
+    stat_card(label="At Risk", value="3", color="red")
+with col3:
+    stat_card(label="Avg Utilization", value="82%", color="blue")
+
+# Filters
+st.markdown("### Filters")
+col1, col2 = st.columns(2)
+with col1:
+    site = form_select(label="Site", options=["All", "AML", "ADL", "Devens"])
+with col2:
+    threshold = form_slider(label="Risk Threshold", value=90, min_val=80, max_val=100, unit="%")
+
+# Data table
+st.markdown("### Lines Overview")
+clicked = data_table(
+    columns=[
+        {"key": "line", "label": "Line"},
+        {"key": "util", "label": "Utilization", "format": "percent", "align": "right"},
+        {"key": "status", "label": "Status", "colorByValue": True}
+    ],
+    rows=[
+        {"line": "L1", "util": 94, "status": "above"},
+        {"line": "L2", "util": 82, "status": "within"},
+        {"line": "L3", "util": 65, "status": "below"}
+    ]
+)
+
+if clicked:
+    st.info(f"Selected: {clicked['rowData']['line']}")
+```
+
+---
+
+## Tailwind CSS Classes Reference
+
+Since components use Tailwind CSS, here are commonly used classes:
+
+### Spacing
+- `p-1` to `p-8`: Padding
+- `m-1` to `m-8`: Margin
+- `mt-4`, `mb-4`, `ml-4`, `mr-4`: Directional margin
+
+### Layout
+- `w-full`: Full width
+- `max-w-xs`, `max-w-sm`, `max-w-md`: Max width
+- `flex`, `grid`: Display types
+- `gap-2`, `gap-4`: Gap between items
+
+### Colors (Dark Theme)
+- `bg-slate-900`, `bg-slate-800`: Backgrounds
+- `text-white`, `text-slate-400`: Text colors
+- `border-slate-700`: Border colors
+
+### Effects
+- `rounded`, `rounded-lg`: Border radius
+- `shadow`, `shadow-lg`: Box shadows
+- `opacity-50`: Transparency
+
+---
+
+## License
+
+MIT