component_renderer.py•10.7 kB
# src/chuk_mcp_linkedin/preview/component_renderer.py
"""
Component Renderer - Converts components to HTML/CSS.
Renders visual elements, layouts, and other components as HTML for browser preview.
"""
from typing import Any, Dict, List
class ComponentRenderer:
"""Renders components as HTML/CSS"""
@staticmethod
def render_divider(divider: Dict[str, Any]) -> str:
"""Render divider component to HTML"""
variant = divider.get("variant", "horizontal_line")
if variant == "horizontal_line":
return f"""
<div style="
width: {divider["width"]}px;
height: {divider["height"]}px;
background-color: {divider["color"]};
margin-top: {divider["margin_top"]}px;
margin-bottom: {divider["margin_bottom"]}px;
{"border-style: dashed;" if divider["style"] == "dashed" else ""}
"></div>
"""
elif variant == "gradient_fade":
gradient = divider.get("gradient", {})
return f"""
<div style="
width: {divider["width"]}px;
height: {divider["height"]}px;
background: linear-gradient(to right, {gradient["start"]}, {gradient["mid"]}, {gradient["end"]});
margin-top: {divider["margin_top"]}px;
margin-bottom: {divider["margin_bottom"]}px;
"></div>
"""
elif variant == "decorative_accent":
return f"""
<div style="
width: {divider["width"]}px;
height: {divider["height"]}px;
background-color: {divider["color"]};
border-radius: {divider["border_radius"]}px;
margin: {divider["margin_top"]}px auto {divider["margin_bottom"]}px auto;
"></div>
"""
elif variant == "section_break":
return f"""
<div style="
text-align: {divider["align"]};
color: {divider["color"]};
font-size: {divider["font_size"]}px;
margin-top: {divider["margin_top"]}px;
margin-bottom: {divider["margin_bottom"]}px;
letter-spacing: 8px;
">{divider["symbols"]}</div>
"""
elif variant == "spacer":
return f"""<div style="height: {divider["height"]}px;"></div>"""
return ""
@staticmethod
def render_badge(badge: Dict[str, Any]) -> str:
"""Render badge component to HTML"""
variant = badge.get("variant", "pill")
common_style = f"""
display: inline-block;
padding: {badge.get("padding_y", 6)}px {badge.get("padding_x", 12)}px;
font-size: {badge.get("font_size", 18)}px;
font-weight: {badge.get("font_weight", "600")};
border-radius: {badge.get("border_radius", 999)}px;
"""
if variant == "pill":
return f"""
<span style="{common_style}
background-color: {badge["background_color"]};
color: {badge["text_color"]};
">{badge["text"]}</span>
"""
elif variant == "status":
return f"""
<span style="{common_style}
background-color: {badge["background_color"]};
color: {badge["text_color"]};
text-transform: uppercase;
letter-spacing: 0.5px;
">{badge["text"]}</span>
"""
elif variant == "status_outlined":
return f"""
<span style="{common_style}
background-color: {badge["background_color"]};
color: {badge["text_color"]};
border: {badge["border_width"]}px solid {badge["border_color"]};
text-transform: uppercase;
letter-spacing: 0.5px;
">{badge["text"]}</span>
"""
elif variant == "percentage_change":
return f"""
<span style="{common_style}
background-color: {badge["background_color"]};
color: {badge["text_color"]};
">{badge["text"]}</span>
"""
elif variant == "category_tag":
return f"""
<span style="{common_style}
background-color: {badge["background_color"]};
color: {badge["text_color"]};
">{badge["text"]}</span>
"""
return ""
@staticmethod
def render_shape(shape: Dict[str, Any]) -> str:
"""Render shape component to HTML"""
variant = shape.get("variant", "circle")
if variant == "circle":
return f"""
<div style="
width: {shape["size"]}px;
height: {shape["size"]}px;
border-radius: 50%;
{"background-color: " + shape["color"] + ";" if shape["fill"] else "border: " + str(shape.get("stroke_width", 2)) + "px solid " + shape["color"] + ";"}
display: inline-block;
"></div>
"""
elif variant == "icon_container":
return f"""
<div style="
width: {shape["size"]}px;
height: {shape["size"]}px;
border-radius: {shape["border_radius"]}px;
background-color: {shape["background_color"]};
color: {shape["icon_color"]};
display: inline-flex;
align-items: center;
justify-content: center;
font-size: {shape["icon_size"]}px;
">{shape["icon"]}</div>
"""
elif variant == "checkmark":
bg_style = ""
if shape.get("background"):
bg_style = f"background-color: {shape['color']}; color: white; border-radius: {shape['border_radius']}px; padding: 8px;"
return f"""
<div style="
width: {shape["size"]}px;
height: {shape["size"]}px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: {shape["size"] - 10}px;
font-weight: bold;
{bg_style}
{"color: " + shape["color"] + ";" if not shape.get("background") else ""}
">{shape["symbol"]}</div>
"""
elif variant == "progress_ring":
# Simple progress bar instead of ring for now
percentage = shape["percentage"]
return f"""
<div style="
width: {shape["size"]}px;
height: 20px;
background-color: {shape["background_color"]};
border-radius: 10px;
overflow: hidden;
position: relative;
">
<div style="
width: {percentage}%;
height: 100%;
background-color: {shape["progress_color"]};
transition: width 0.3s ease;
"></div>
<div style="
position: absolute;
top: 0;
left: 0;
right: 0;
text-align: center;
line-height: 20px;
font-size: 12px;
font-weight: bold;
color: #333;
">{percentage}%</div>
</div>
"""
return ""
@staticmethod
def render_border(border: Dict[str, Any], content: str = "Content") -> str:
"""Render border/container component to HTML"""
variant = border.get("variant", "simple")
padding = border.get("padding", 40)
if variant == "simple":
return f"""
<div style="
border: {border["width"]}px {border["style"]} {border["color"]};
border-radius: {border["radius"]}px;
padding: {padding}px;
">{content}</div>
"""
elif variant == "accent":
side = border.get("side", "left")
border_prop = {
"left": "border-left",
"right": "border-right",
"top": "border-top",
"bottom": "border-bottom",
}.get(side, "border-left")
return f"""
<div style="
{border_prop}: {border["width"]}px solid {border["color"]};
padding: {padding}px;
padding-{side}: {padding + border["width"]}px;
">{content}</div>
"""
elif variant == "callout":
return f"""
<div style="
border: {border["border_width"]}px solid {border["border_color"]};
background-color: {border["background_color"]};
border-radius: {border["border_radius"]}px;
padding: {padding}px;
">{content}</div>
"""
elif variant == "shadow_frame":
return f"""
<div style="
{"border: " + str(border["border_width"]) + "px solid " + border["border_color"] + ";" if border["border_width"] > 0 else ""}
border-radius: {border["border_radius"]}px;
padding: {padding}px;
box-shadow: {border["shadow"]};
">{content}</div>
"""
return f"<div>{content}</div>"
@staticmethod
def render_background(
background: Dict[str, Any], content: str = "Content", width: int = 400, height: int = 200
) -> str:
"""Render background component to HTML"""
variant = background.get("variant", "solid")
if variant == "solid":
return f"""
<div style="
background-color: {background["color"]};
width: {width}px;
height: {height}px;
padding: 20px;
">{content}</div>
"""
elif variant == "gradient":
direction_map = {
"vertical": "to bottom",
"horizontal": "to right",
"diagonal": "to bottom right",
}
direction = direction_map.get(background.get("direction", "vertical"), "to bottom")
return f"""
<div style="
background: linear-gradient({direction}, {background["start_color"]}, {background["end_color"]});
width: {width}px;
height: {height}px;
padding: 20px;
">{content}</div>
"""
elif variant == "card":
return f"""
<div style="
background-color: {background["color"]};
box-shadow: {background["shadow"]};
border-radius: {background["border_radius"]}px;
padding: {background["padding"]}px;
width: {width}px;
">{content}</div>
"""
elif variant == "highlight_box":
return f"""
<div style="
background-color: {background["background_color"]};
border: {background["border_width"]}px solid {background["border_color"]};
border-radius: {background["border_radius"]}px;
padding: {background["padding"]}px;
width: {width}px;
">{content}</div>
"""
return f"<div>{content}</div>"
@staticmethod
def render_components_grid(components: List[Dict[str, Any]], title: str = "") -> str:
"""Render multiple components in a grid"""
html = ""
if title:
html += (
f"<h2 style='margin-top: 40px; margin-bottom: 20px; color: #1a1a1a;'>{title}</h2>"
)
html += "<div style='display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 40px;'>"
for component in components:
comp_type = component.get("type", "unknown")
if comp_type == "divider":
html += f"<div>{ComponentRenderer.render_divider(component)}</div>"
elif comp_type == "badge":
html += f"<div>{ComponentRenderer.render_badge(component)}</div>"
elif comp_type == "shape":
html += f"<div>{ComponentRenderer.render_shape(component)}</div>"
elif comp_type == "border":
html += f"<div>{ComponentRenderer.render_border(component, 'Sample Content')}</div>"
elif comp_type == "background":
html += f"<div>{ComponentRenderer.render_background(component, 'Sample Content', 250, 150)}</div>"
html += "</div>"
return html