mirror of
https://github.com/pyscript/pyscript.git
synced 2025-12-20 02:37:41 -05:00
339 lines
9.0 KiB
Python
339 lines
9.0 KiB
Python
from textwrap import dedent
|
|
|
|
import examples
|
|
from pyweb import pydom
|
|
from pyweb.ui import elements as el
|
|
from pyweb.ui import shoelace
|
|
from pyweb.ui.markdown import markdown
|
|
|
|
from pyscript import when, window
|
|
|
|
# Style dictionary for code blocks
|
|
STYLE_CODE_BLOCK = {"text-align": "left", "background-color": "#eee", "padding": "20px"}
|
|
|
|
|
|
# First thing we do is to load all the external resources we need
|
|
shoelace.load_resources()
|
|
|
|
|
|
# Let's define some convenience functions first
|
|
def create_component_details(component):
|
|
"""Create a component details card.
|
|
|
|
Args:
|
|
component (str): The name of the component to create.
|
|
|
|
Returns:
|
|
the component created
|
|
|
|
"""
|
|
# Get the example from the examples catalog
|
|
examples_gallery = examples.kits["shoelace"]
|
|
example = examples_gallery[component]["instance"]
|
|
details = example.__doc__ or f"Details missing for component {component}"
|
|
|
|
div = el.div(
|
|
[
|
|
# Title and description (description is picked from the class docstring)
|
|
el.h1(component),
|
|
markdown(details),
|
|
# Example section
|
|
el.h2("Example:"),
|
|
el.div(
|
|
[
|
|
example,
|
|
shoelace.Details(
|
|
el.div(
|
|
examples_gallery[component]["code"], style=STYLE_CODE_BLOCK
|
|
),
|
|
summary="View Code",
|
|
style={"background-color": "gainsboro"},
|
|
),
|
|
],
|
|
style={
|
|
"border-radius": "3px",
|
|
"background-color": "var(--sl-color-neutral-50)",
|
|
"margin-bottom": "1.5rem",
|
|
},
|
|
),
|
|
],
|
|
style={"margin": "20px"},
|
|
)
|
|
return div
|
|
|
|
|
|
def add_component_section(component, parent_div):
|
|
"""Create a link to a component and add it to the left panel.
|
|
|
|
Args:
|
|
component (str): The name of the component to add.
|
|
|
|
Returns:
|
|
the component created
|
|
|
|
"""
|
|
# Create the component link element
|
|
div = el.div(
|
|
el.a(component, href="#"),
|
|
style={"display": "block", "text-align": "center", "margin": "auto"},
|
|
)
|
|
|
|
# Create a handler that opens the component details when the link is clicked
|
|
@when("click", div)
|
|
def _change():
|
|
new_main = create_component_details(component)
|
|
main_area.html = ""
|
|
main_area.append(new_main)
|
|
|
|
# Add the new link element to the parent div (left panel)
|
|
parent_div.append(div)
|
|
return div
|
|
|
|
|
|
def create_component_example(widget, code):
|
|
"""Create a grid div with the widget on the left side and the relate code
|
|
on the right side.
|
|
|
|
Args:
|
|
widget (ElementBase): The widget to add to the grid.
|
|
code (str): The code to add to the grid.
|
|
|
|
Returns:
|
|
the grid created
|
|
|
|
"""
|
|
# Create the grid that splits the window in two columns (25% and 75%)
|
|
grid = el.Grid("25% 75%")
|
|
# Add the widget
|
|
grid.append(el.div(widget))
|
|
# Add the code div
|
|
widget_code = markdown(dedent(f"""```python\n{code}\n```"""))
|
|
grid.append(el.div(widget_code, style=STYLE_CODE_BLOCK))
|
|
|
|
return grid
|
|
|
|
|
|
def create_main_area():
|
|
"""Create the main area of the page.
|
|
|
|
Returns:
|
|
the main area
|
|
|
|
"""
|
|
div = el.div()
|
|
div.append(
|
|
el.h1(
|
|
"Welcome to PyDom UI!",
|
|
style={"text-align": "center", "margin": "20px auto 30px"},
|
|
)
|
|
)
|
|
|
|
div.append(el.h2("What is PyShoes?"))
|
|
div.append(
|
|
markdown(
|
|
dedent(
|
|
"""\
|
|
PyDom UI is a totally immagnary exercise atm but..... imagine it is a Python library that allows you to create
|
|
web applications using Python only.
|
|
|
|
It is based on base HTML/JS components but is extensible, for instance, it can have a [Shoelace](https://shoelace.style/) backend...
|
|
|
|
PyWeb is a Python library that allows you to create web applications using Python only.
|
|
"""
|
|
)
|
|
)
|
|
)
|
|
div.append(el.h2("What can I do with PyShoes?"))
|
|
|
|
div.append(
|
|
markdown(
|
|
dedent(
|
|
"""\
|
|
You can create web applications using Python only.
|
|
"""
|
|
)
|
|
)
|
|
)
|
|
|
|
return div
|
|
|
|
|
|
def create_markdown_components_page():
|
|
"""Create the basic components page.
|
|
|
|
Returns:
|
|
the main area
|
|
|
|
"""
|
|
div = el.div()
|
|
div.append(el.h2("Markdown"))
|
|
|
|
# Buttons
|
|
markdown_txt_area = shoelace.TextArea(
|
|
label="Markdown",
|
|
help_text="Write your Mardown here and press convert to see the result",
|
|
)
|
|
translate_button = shoelace.Button("Convert", variant="primary")
|
|
result_div = el.div(
|
|
style={
|
|
"margin-top": "20px",
|
|
"min-height": "200px",
|
|
"background-color": "cornsilk",
|
|
}
|
|
)
|
|
|
|
@when("click", translate_button)
|
|
def translate_markdown():
|
|
result_div.html = markdown(markdown_txt_area.value).html
|
|
|
|
main_section = el.div(
|
|
[
|
|
markdown_txt_area,
|
|
translate_button,
|
|
result_div,
|
|
]
|
|
)
|
|
div.append(main_section)
|
|
return div
|
|
|
|
|
|
def create_basic_components_page():
|
|
"""Create the basic components page.
|
|
|
|
Returns:
|
|
the main area
|
|
|
|
"""
|
|
div = el.div()
|
|
div.append(el.h2("Base components:"))
|
|
|
|
# Buttons
|
|
div.append(el.h3("Buttons"))
|
|
btn = el.button("Click me!")
|
|
when("click", btn)(lambda: window.alert("Clicked!"))
|
|
|
|
btn_code = dedent(
|
|
"""btn = button("Click me!"})
|
|
when('click', btn)(lambda: window.alert("Clicked!"))"""
|
|
)
|
|
|
|
div.append(create_component_example(btn, btn_code))
|
|
|
|
# Inputs
|
|
inputs_div = el.div()
|
|
div.append(el.h3("Inputs"))
|
|
inputs_code = []
|
|
for input_type in [
|
|
"text",
|
|
"password",
|
|
"email",
|
|
"number",
|
|
"date",
|
|
"time",
|
|
"color",
|
|
"range",
|
|
]:
|
|
inputs_div.append(el.input(type=input_type, style={"display": "block"}))
|
|
inputs_code.append(f"input(type='{input_type}')")
|
|
inputs_code = "\n".join(inputs_code)
|
|
|
|
div.append(create_component_example(inputs_div, inputs_code))
|
|
|
|
# DIV
|
|
div.append(el.h3("Div"))
|
|
_div = el.div(
|
|
"This is a div",
|
|
style={
|
|
"text-align": "center",
|
|
"width": "100%",
|
|
"margin": "0 auto 0",
|
|
"background-color": "cornsilk",
|
|
},
|
|
)
|
|
code = "div = div('This is a div', style={'text-align': 'center', 'margin': '0 auto 0', 'background-color': 'cornsilk'})"
|
|
div.append(create_component_example(_div, code))
|
|
|
|
return div
|
|
|
|
|
|
# ********** CREATE ALL THE LAYOUT **********
|
|
|
|
grid = el.Grid("minmax(100px, 200px) 20px auto", style={"min-height": "100%"})
|
|
|
|
# ********** MAIN PANEL **********
|
|
main_area = create_main_area()
|
|
|
|
|
|
def write_to_main(content):
|
|
main_area.html = ""
|
|
main_area.append(content)
|
|
|
|
|
|
def restore_home():
|
|
write_to_main(create_main_area())
|
|
|
|
|
|
def basic_components():
|
|
write_to_main(create_basic_components_page())
|
|
|
|
|
|
def markdown_components():
|
|
write_to_main(create_markdown_components_page())
|
|
|
|
|
|
def create_new_section(title, parent_div):
|
|
basic_components_text = el.h3(
|
|
title, style={"text-align": "left", "margin": "20px auto 0"}
|
|
)
|
|
parent_div.append(basic_components_text)
|
|
parent_div.append(
|
|
shoelace.Divider(style={"margin-top": "5px", "margin-bottom": "30px"})
|
|
)
|
|
return basic_components_text
|
|
|
|
|
|
# ********** LEFT PANEL **********
|
|
left_div = el.div()
|
|
left_panel_title = el.h1(
|
|
"PyWeb.UI", style={"text-align": "center", "margin": "20px auto 30px"}
|
|
)
|
|
left_div.append(left_panel_title)
|
|
left_div.append(shoelace.Divider(style={"margin-bottom": "30px"}))
|
|
# Let's map the creation of the main area to when the user clocks on "Components"
|
|
when("click", left_panel_title)(restore_home)
|
|
|
|
# BASIC COMPONENTS
|
|
basic_components_text = el.h3(
|
|
"Basic Components", style={"text-align": "left", "margin": "20px auto 0"}
|
|
)
|
|
left_div.append(basic_components_text)
|
|
left_div.append(shoelace.Divider(style={"margin-top": "5px", "margin-bottom": "30px"}))
|
|
# Let's map the creation of the main area to when the user clocks on "Components"
|
|
when("click", basic_components_text)(basic_components)
|
|
|
|
# MARKDOWN COMPONENTS
|
|
markdown_title = create_new_section("Markdown", left_div)
|
|
when("click", markdown_title)(markdown_components)
|
|
|
|
|
|
# SHOELACE COMPONENTS
|
|
shoe_components_text = el.h3(
|
|
"Shoe Components", style={"text-align": "left", "margin": "20px auto 0"}
|
|
)
|
|
left_div.append(shoe_components_text)
|
|
left_div.append(shoelace.Divider(style={"margin-top": "5px", "margin-bottom": "30px"}))
|
|
|
|
# Create the links to the components on th left panel
|
|
print("SHOELACE EXAMPLES", examples.kits["shoelace"])
|
|
for component in examples.kits["shoelace"]:
|
|
add_component_section(component, left_div)
|
|
|
|
|
|
# ********** ADD LEFT AND MAIN PANEL TO MAIN **********
|
|
grid.append(left_div)
|
|
grid.append(shoelace.Divider(vertical=True))
|
|
grid.append(main_area)
|
|
|
|
|
|
pydom.body.append(grid)
|