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

{streamlit_react_components-0.1.1/src/streamlit_react_components.egg-info → streamlit_react_components-1.0.1}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: streamlit-react-components
-Version: 0.1.1
+Version: 1.0.1
 Summary: Reusable React-based Streamlit components with Tailwind CSS styling
 License: MIT
 Project-URL: Homepage, https://github.com/your-org/streamlit-react-components
@@ -19,7 +19,7 @@ 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.
+A collection of 12 reusable React-based Streamlit components with Tailwind CSS styling. All components support custom inline styles and Tailwind class names.
 
 ## Installation
 
@@ -34,7 +34,7 @@ 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
+    plotly_chart, form_select, form_slider, checkbox_group
 )
 ```
 
@@ -123,11 +123,15 @@ actions = [
 | `id` | `str` | Unique identifier (returned on click) |
 | `label` | `str` | Button text (optional) |
 | `icon` | `str` | Emoji/icon (optional) |
-| `color` | `str` | `"blue"`, `"green"`, `"red"`, `"yellow"`, `"purple"` |
+| `color` | `str` | Preset (`"blue"`, `"green"`, `"red"`, `"yellow"`, `"purple"`, `"slate"`) or hex (e.g., `"#94a3b8"`) |
+| `style` | `dict` | Inline CSS styles for this button (optional) |
+| `className` | `str` | Tailwind classes for this button (optional) |
+| `href` | `str` | URL for link actions. External URLs (http/https) open in new tab (optional) |
 
 #### Example
 
 ```python
+# Using preset colors
 clicked = section_header(
     title="Executive Summary",
     icon="📊",
@@ -137,8 +141,31 @@ clicked = section_header(
     ]
 )
 
-if clicked == "refresh":
-    st.rerun()
+# Using hex colors and custom styling
+clicked = section_header(
+    title="Custom Actions",
+    actions=[
+        {"id": "custom", "label": "Custom", "color": "#ff5733"},
+        {"id": "styled", "label": "Styled", "style": {"padding": "12px", "borderRadius": "20px"}}
+    ]
+)
+
+# External link (opens in new tab)
+section_header(
+    title="Resources",
+    actions=[
+        {"id": "docs", "label": "Documentation", "href": "https://docs.example.com", "icon": "📚"},
+        {"id": "github", "label": "GitHub", "href": "https://github.com", "color": "slate"}
+    ]
+)
+
+# Internal page navigation
+clicked = section_header(
+    title="Settings",
+    actions=[{"id": "home", "label": "Home", "icon": "🏠"}]
+)
+if clicked == "home":
+    st.switch_page("pages/home.py")
 ```
 
 ---
@@ -161,13 +188,17 @@ stat_card(
 
 #### Colors
 
-| Color | Border | Text |
-|-------|--------|------|
+Supports preset color names or hex values:
+
+| Preset | 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` |
+| `"slate"` | `border-slate-500` | `text-slate-400` |
+| `"#xxxxxx"` | Custom hex color | Custom hex color |
 
 #### Example
 
@@ -182,6 +213,9 @@ with col3:
     stat_card(label="Below (Underutil)", value="1", color="yellow")
 with col4:
     stat_card(label="Avg OEE", value="78.4%", color="blue")
+
+# Using hex color
+stat_card(label="Custom Color", value="42", color="#ff5733")
 ```
 
 ---
@@ -364,12 +398,15 @@ buttons = [
 | `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"` |
+| `color` | `str` | Preset (`"blue"`, `"green"`, `"red"`, `"yellow"`, `"purple"`, `"slate"`) or hex (e.g., `"#94a3b8"`) |
 | `disabled` | `bool` | Disable the button |
+| `style` | `dict` | Inline CSS styles for this button (optional) |
+| `className` | `str` | Tailwind classes for this button (optional) |
 
 #### Example
 
 ```python
+# Using preset colors
 clicked = button_group(
     buttons=[
         {"id": "view", "icon": "👁️", "label": "View"},
@@ -378,6 +415,14 @@ clicked = button_group(
     ]
 )
 
+# Using hex colors and custom styling
+clicked = button_group(
+    buttons=[
+        {"id": "custom", "icon": "🎨", "color": "#ff5733"},
+        {"id": "styled", "label": "Styled", "style": {"padding": "12px"}}
+    ]
+)
+
 if clicked == "delete":
     st.warning("Delete clicked!")
 ```
@@ -427,7 +472,163 @@ chart_legend(
 
 ---
 
-### 9. Form Select
+### 9. Plotly Chart
+
+Render Plotly charts with full interactivity and event callbacks.
+
+```python
+plotly_chart(
+    # Data source (one required)
+    figure: Any = None,            # Plotly figure or dict
+    data: DataFrame = None,        # pandas DataFrame
+
+    # DataFrame options (when using data=)
+    x: str = None,                 # Column name for x-axis
+    y: str | list = None,          # Column name(s) for y-axis
+    color: str = None,             # Column name for color grouping
+    chart_type: str = "line",      # "line", "bar", "scatter", "area", "pie", "histogram"
+    title: str = None,             # Chart title
+
+    # Plotly config
+    config: dict = None,           # Plotly config options
+
+    # Event callbacks
+    on_click: bool = False,        # Enable click events
+    on_select: bool = False,       # Enable selection events
+    on_hover: bool = False,        # Enable hover events
+    on_relayout: bool = False,     # Enable zoom/pan events
+
+    # Expandable dialog
+    expandable: bool = False,      # Show expand button
+    modal_title: str = "",         # Dialog header title
+
+    # Styling
+    style: dict = None,
+    class_name: str = "",
+    key: str = None
+) -> dict | None                   # Returns event dict or None
+```
+
+#### Using Plotly Figure
+
+```python
+import plotly.graph_objects as go
+
+fig = go.Figure(
+    data=[
+        go.Scatter(x=[1,2,3,4,5], y=[10,15,13,17,20], mode='lines+markers', name='Sales'),
+        go.Bar(x=[1,2,3,4,5], y=[5,8,6,9,12], name='Orders')
+    ],
+    layout=go.Layout(title='Sales Dashboard')
+)
+
+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']}")
+```
+
+#### Using DataFrame
+
+```python
+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'
+)
+
+# 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'
+)
+```
+
+#### Chart Types (DataFrame mode)
+
+| Type | Description |
+|------|-------------|
+| `"line"` | Line chart with connected points |
+| `"scatter"` | Scatter plot with markers only |
+| `"bar"` | Vertical bar chart |
+| `"area"` | Area chart (filled line) |
+| `"pie"` | Pie chart (x=labels, y=values) |
+| `"histogram"` | Histogram of x values |
+
+#### Event Types
+
+| Event | When Triggered | Data Returned |
+|-------|----------------|---------------|
+| `click` | User clicks a data point | `{type: 'click', points: [...]}` |
+| `select` | User box/lasso selects points | `{type: 'select', points: [...]}` |
+| `hover` | User hovers over a point | `{type: 'hover', points: [...]}` |
+| `relayout` | User zooms/pans the chart | `{type: 'relayout', relayout: {...}}` |
+
+#### Point Data Structure
+
+Each point in the `points` array contains:
+
+```python
+{
+    "curveNumber": 0,      # Index of the trace
+    "pointNumber": 2,      # Index of the point in the trace
+    "pointIndex": 2,       # Same as pointNumber
+    "x": "Mar",            # X value
+    "y": 120,              # Y value
+    "customdata": None     # Custom data if provided
+}
+```
+
+#### Expandable Dialog
+
+Charts can be expanded into a full-page dialog using Streamlit's native `st.dialog()`:
+
+```python
+event = plotly_chart(
+    figure=fig,
+    expandable=True,                    # Show expand button in corner
+    modal_title="Sales Dashboard",      # Title in dialog header
+    style={"height": "300px"}
+)
+```
+
+**Dialog Features:**
+- Click the expand icon (⛶) in the top-right corner to open
+- Dialog uses Streamlit's native full-width dialog overlay
+- Click outside the dialog or press Escape to close
+- Chart renders at full dialog width for better visibility
+
+---
+
+### 10. Form Select
 
 A styled dropdown select input.
 
@@ -490,7 +691,7 @@ scenario = form_select(
 
 ---
 
-### 10. Form Slider
+### 11. Form Slider
 
 A styled range slider input.
 
@@ -502,7 +703,7 @@ form_slider(
     max_val: float,               # Maximum value
     step: float = 1,              # Step increment
     unit: str = "",               # Unit suffix (e.g., "%", "hrs")
-    color: str = "blue",          # Value display color
+    color: str = "blue",          # Preset or hex color (e.g., "#94a3b8")
     style: dict = None,
     class_name: str = "",
     key: str = None
@@ -512,7 +713,7 @@ form_slider(
 #### Example
 
 ```python
-# Percentage slider
+# Percentage slider with preset color
 threshold = form_slider(
     label="Upper Threshold",
     value=90,
@@ -533,20 +734,19 @@ hold_time = form_slider(
     color="blue"
 )
 
-# Batch size
-batch = form_slider(
-    label="Batch Size",
-    value=500,
-    min_val=200,
-    max_val=1000,
-    step=25,
-    color="green"
+# Slider with hex color
+custom_slider = form_slider(
+    label="Custom Color",
+    value=50,
+    min_val=0,
+    max_val=100,
+    color="#ff5733"
 )
 ```
 
 ---
 
-### 11. Checkbox Group
+### 12. Checkbox Group
 
 A group of checkboxes.
 

{streamlit_react_components-0.1.1 → streamlit_react_components-1.0.1}/README.md

@@ -1,6 +1,6 @@
 # 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.
+A collection of 12 reusable React-based Streamlit components with Tailwind CSS styling. All components support custom inline styles and Tailwind class names.
 
 ## Installation
 
@@ -15,7 +15,7 @@ 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
+    plotly_chart, form_select, form_slider, checkbox_group
 )
 ```
 
@@ -104,11 +104,15 @@ actions = [
 | `id` | `str` | Unique identifier (returned on click) |
 | `label` | `str` | Button text (optional) |
 | `icon` | `str` | Emoji/icon (optional) |
-| `color` | `str` | `"blue"`, `"green"`, `"red"`, `"yellow"`, `"purple"` |
+| `color` | `str` | Preset (`"blue"`, `"green"`, `"red"`, `"yellow"`, `"purple"`, `"slate"`) or hex (e.g., `"#94a3b8"`) |
+| `style` | `dict` | Inline CSS styles for this button (optional) |
+| `className` | `str` | Tailwind classes for this button (optional) |
+| `href` | `str` | URL for link actions. External URLs (http/https) open in new tab (optional) |
 
 #### Example
 
 ```python
+# Using preset colors
 clicked = section_header(
     title="Executive Summary",
     icon="📊",
@@ -118,8 +122,31 @@ clicked = section_header(
     ]
 )
 
-if clicked == "refresh":
-    st.rerun()
+# Using hex colors and custom styling
+clicked = section_header(
+    title="Custom Actions",
+    actions=[
+        {"id": "custom", "label": "Custom", "color": "#ff5733"},
+        {"id": "styled", "label": "Styled", "style": {"padding": "12px", "borderRadius": "20px"}}
+    ]
+)
+
+# External link (opens in new tab)
+section_header(
+    title="Resources",
+    actions=[
+        {"id": "docs", "label": "Documentation", "href": "https://docs.example.com", "icon": "📚"},
+        {"id": "github", "label": "GitHub", "href": "https://github.com", "color": "slate"}
+    ]
+)
+
+# Internal page navigation
+clicked = section_header(
+    title="Settings",
+    actions=[{"id": "home", "label": "Home", "icon": "🏠"}]
+)
+if clicked == "home":
+    st.switch_page("pages/home.py")
 ```
 
 ---
@@ -142,13 +169,17 @@ stat_card(
 
 #### Colors
 
-| Color | Border | Text |
-|-------|--------|------|
+Supports preset color names or hex values:
+
+| Preset | 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` |
+| `"slate"` | `border-slate-500` | `text-slate-400` |
+| `"#xxxxxx"` | Custom hex color | Custom hex color |
 
 #### Example
 
@@ -163,6 +194,9 @@ with col3:
     stat_card(label="Below (Underutil)", value="1", color="yellow")
 with col4:
     stat_card(label="Avg OEE", value="78.4%", color="blue")
+
+# Using hex color
+stat_card(label="Custom Color", value="42", color="#ff5733")
 ```
 
 ---
@@ -345,12 +379,15 @@ buttons = [
 | `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"` |
+| `color` | `str` | Preset (`"blue"`, `"green"`, `"red"`, `"yellow"`, `"purple"`, `"slate"`) or hex (e.g., `"#94a3b8"`) |
 | `disabled` | `bool` | Disable the button |
+| `style` | `dict` | Inline CSS styles for this button (optional) |
+| `className` | `str` | Tailwind classes for this button (optional) |
 
 #### Example
 
 ```python
+# Using preset colors
 clicked = button_group(
     buttons=[
         {"id": "view", "icon": "👁️", "label": "View"},
@@ -359,6 +396,14 @@ clicked = button_group(
     ]
 )
 
+# Using hex colors and custom styling
+clicked = button_group(
+    buttons=[
+        {"id": "custom", "icon": "🎨", "color": "#ff5733"},
+        {"id": "styled", "label": "Styled", "style": {"padding": "12px"}}
+    ]
+)
+
 if clicked == "delete":
     st.warning("Delete clicked!")
 ```
@@ -408,7 +453,163 @@ chart_legend(
 
 ---
 
-### 9. Form Select
+### 9. Plotly Chart
+
+Render Plotly charts with full interactivity and event callbacks.
+
+```python
+plotly_chart(
+    # Data source (one required)
+    figure: Any = None,            # Plotly figure or dict
+    data: DataFrame = None,        # pandas DataFrame
+
+    # DataFrame options (when using data=)
+    x: str = None,                 # Column name for x-axis
+    y: str | list = None,          # Column name(s) for y-axis
+    color: str = None,             # Column name for color grouping
+    chart_type: str = "line",      # "line", "bar", "scatter", "area", "pie", "histogram"
+    title: str = None,             # Chart title
+
+    # Plotly config
+    config: dict = None,           # Plotly config options
+
+    # Event callbacks
+    on_click: bool = False,        # Enable click events
+    on_select: bool = False,       # Enable selection events
+    on_hover: bool = False,        # Enable hover events
+    on_relayout: bool = False,     # Enable zoom/pan events
+
+    # Expandable dialog
+    expandable: bool = False,      # Show expand button
+    modal_title: str = "",         # Dialog header title
+
+    # Styling
+    style: dict = None,
+    class_name: str = "",
+    key: str = None
+) -> dict | None                   # Returns event dict or None
+```
+
+#### Using Plotly Figure
+
+```python
+import plotly.graph_objects as go
+
+fig = go.Figure(
+    data=[
+        go.Scatter(x=[1,2,3,4,5], y=[10,15,13,17,20], mode='lines+markers', name='Sales'),
+        go.Bar(x=[1,2,3,4,5], y=[5,8,6,9,12], name='Orders')
+    ],
+    layout=go.Layout(title='Sales Dashboard')
+)
+
+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']}")
+```
+
+#### Using DataFrame
+
+```python
+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'
+)
+
+# 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'
+)
+```
+
+#### Chart Types (DataFrame mode)
+
+| Type | Description |
+|------|-------------|
+| `"line"` | Line chart with connected points |
+| `"scatter"` | Scatter plot with markers only |
+| `"bar"` | Vertical bar chart |
+| `"area"` | Area chart (filled line) |
+| `"pie"` | Pie chart (x=labels, y=values) |
+| `"histogram"` | Histogram of x values |
+
+#### Event Types
+
+| Event | When Triggered | Data Returned |
+|-------|----------------|---------------|
+| `click` | User clicks a data point | `{type: 'click', points: [...]}` |
+| `select` | User box/lasso selects points | `{type: 'select', points: [...]}` |
+| `hover` | User hovers over a point | `{type: 'hover', points: [...]}` |
+| `relayout` | User zooms/pans the chart | `{type: 'relayout', relayout: {...}}` |
+
+#### Point Data Structure
+
+Each point in the `points` array contains:
+
+```python
+{
+    "curveNumber": 0,      # Index of the trace
+    "pointNumber": 2,      # Index of the point in the trace
+    "pointIndex": 2,       # Same as pointNumber
+    "x": "Mar",            # X value
+    "y": 120,              # Y value
+    "customdata": None     # Custom data if provided
+}
+```
+
+#### Expandable Dialog
+
+Charts can be expanded into a full-page dialog using Streamlit's native `st.dialog()`:
+
+```python
+event = plotly_chart(
+    figure=fig,
+    expandable=True,                    # Show expand button in corner
+    modal_title="Sales Dashboard",      # Title in dialog header
+    style={"height": "300px"}
+)
+```
+
+**Dialog Features:**
+- Click the expand icon (⛶) in the top-right corner to open
+- Dialog uses Streamlit's native full-width dialog overlay
+- Click outside the dialog or press Escape to close
+- Chart renders at full dialog width for better visibility
+
+---
+
+### 10. Form Select
 
 A styled dropdown select input.
 
@@ -471,7 +672,7 @@ scenario = form_select(
 
 ---
 
-### 10. Form Slider
+### 11. Form Slider
 
 A styled range slider input.
 
@@ -483,7 +684,7 @@ form_slider(
     max_val: float,               # Maximum value
     step: float = 1,              # Step increment
     unit: str = "",               # Unit suffix (e.g., "%", "hrs")
-    color: str = "blue",          # Value display color
+    color: str = "blue",          # Preset or hex color (e.g., "#94a3b8")
     style: dict = None,
     class_name: str = "",
     key: str = None
@@ -493,7 +694,7 @@ form_slider(
 #### Example
 
 ```python
-# Percentage slider
+# Percentage slider with preset color
 threshold = form_slider(
     label="Upper Threshold",
     value=90,
@@ -514,20 +715,19 @@ hold_time = form_slider(
     color="blue"
 )
 
-# Batch size
-batch = form_slider(
-    label="Batch Size",
-    value=500,
-    min_val=200,
-    max_val=1000,
-    step=25,
-    color="green"
+# Slider with hex color
+custom_slider = form_slider(
+    label="Custom Color",
+    value=50,
+    min_val=0,
+    max_val=100,
+    color="#ff5733"
 )
 ```
 
 ---
 
-### 11. Checkbox Group
+### 12. Checkbox Group
 
 A group of checkboxes.