jprdonnelly/pyscript
1
0
Fork 0
mirror of https://github.com/pyscript/pyscript.git synced 2026-02-18 04:01:10 -05:00
Code Issues Projects Releases Wiki Activity

improve demo

Browse Source
This commit is contained in:
Fabio Pliger
2024-02-02 15:15:07 -06:00
parent 844e3767d1
commit 3de622f44b
2 changed files with 34 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
pyscript.core/test/ui/demo.py
View File

@@ -51,24 +51,7 @@ def create_component_details(component_label, component):
markdown(details),
# Example section
h2("Example:"),
div(
[
example,
shoelace.Details(
div(
component["code"],
style=styles.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",
},
),
create_component_example(component["instance"], component["code"]),
],
style={"margin": "20px"},
)
@@ -114,11 +97,14 @@ def create_component_example(widget, code):
"""
# Create the grid that splits the window in two columns (25% and 75%)
grid_ = grid("25% 75%")
grid_ = grid("29% 2% 74%")
# Add the widget
grid_.append(div(widget))
grid_.append(div(widget, style=styles.STYLE_EXAMPLE_INSTANCE))
# Add the code div
widget_code = markdown(dedent(f"""```python\n{code}\n```"""))
grid_.append(shoelace.Divider(vertical=True))
grid_.append(div(widget_code, style=styles.STYLE_CODE_BLOCK))
return grid_
@@ -140,54 +126,16 @@ def create_main_area():
)
def create_markdown_components_page():
def create_basic_components_page(label, kit_name):
"""Create the basic components page.
Returns:
the main area
"""
div_ = div(h2("Markdown"))
div_ = div(h2(label))
# 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 = 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 = 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_ = div(h2("Base components:"))
for component_label, component in examples.kits["elements"].items():
for component_label, component in examples.kits[kit_name].items():
div_.append(h3(component_label))
div_.append(create_component_example(component["instance"], component["code"]))
@@ -212,13 +160,13 @@ def restore_home():
def basic_components():
write_to_main(create_basic_components_page())
write_to_main(create_basic_components_page(label="Basic Components", kit_name="elements"))
# Make sure we highlight the code
window.hljs.highlightAll()
def markdown_components():
write_to_main(create_markdown_components_page())
write_to_main(create_basic_components_page(label="", kit_name="markdown"))
def create_new_section(title, parent_div):

39
pyscript.core/test/ui/examples.py
View File

@@ -31,6 +31,8 @@ from pyweb.ui.shoelace import (
Rating,
)
from pyweb.ui.markdown import markdown
from pyscript import when, window
LOREM_IPSUM = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
@@ -83,23 +85,26 @@ for header in [h1, h2, h3, h4, h5, h6]:
headers_code.append(f"{header.tag}(\"{header.tag.upper()} header\")")
headers_code = "\n".join(headers_code)
MARKDOWN_EXAMPLE = """# This is a header
This is a ~~paragraph~~ text with **bold** and *italic* text in it!
"""
kits = {
"shoelace": {
"Alert": {
"instance": Alert(
"This is a standard alert. You can customize its content and even the icon."
),
"code": code(
"Alert('This is a standard alert. You can customize its content and even the icon.'"
),
"code": "Alert('This is a standard alert. You can customize its content and even the icon.'",
},
"Icon": {
"instance": Icon(name="heart"),
"code": code('Icon(name="heart")'),
"code": 'Icon(name="heart")',
},
"Button": {
"instance": Button("Try me"),
"code": code('Button("Try me")'),
"code": 'Button("Try me")',
},
"Card": {
"instance": Card(
@@ -107,33 +112,29 @@ kits = {
image="https://pyscript.net/assets/images/pyscript-sticker-black.svg",
footer=div([Button("More Info"), Rating()]),
),
"code": code(
"""
"code": """
Card(p("This is a cool card!"), image="https://pyscript.net/assets/images/pyscript-sticker-black.svg", footer=div([Button("More Info"), Rating()]))
"""
),
""",
},
"Details": {
"instance": Details(LOREM_IPSUM, summary="Try me"),
"code": code('Details(LOREM_IPSUM, summary="Try me")'),
"code": 'Details(LOREM_IPSUM, summary="Try me")',
},
"Dialog": {
"instance": example_dialog_btn,
"code": code(
'Dialog(div([p(LOREM_IPSUM), Button("Close")]), summary="Try me")'
),
"code": 'Dialog(div([p(LOREM_IPSUM), Button("Close")]), summary="Try me")',
},
"Divider": {
"instance": Divider(),
"code": code("Divider()"),
"code": "Divider()",
},
"Rating": {
"instance": Rating(),
"code": code("Rating()"),
"code": "Rating()",
},
"Radio": {
"instance": Radio(),
"code": code("Radio()"),
"code": "Radio()",
},
},
"elements": {
@@ -178,4 +179,10 @@ when('click', btn)(lambda: window.alert("Clicked!"))
"strong": {"instance": strong("This is a strong text"),
"code": 'strong("This is a strong text")'},
},
"markdown": {
"markdown": {
"instance": markdown(MARKDOWN_EXAMPLE),
"code": f'markdown("""{MARKDOWN_EXAMPLE}""")',
},
}
}