simplify base elements demo by moving all the examples to the examples module

pyscript.core/test/ui/demo.py

@@ -149,8 +149,7 @@ def create_markdown_components_page():
         the main area
 
     """
-    div_ = div()
+    div_ = div(h2("Markdown"))
-    div_.append(h2("Markdown"))
 
     # Buttons
     markdown_txt_area = shoelace.TextArea(
@@ -188,66 +187,18 @@ def create_basic_components_page():
         the main area
 
     """
-    div_ = div()
+    div_ = div(h2("Base components:"))
-    div_.append(h2("Base components:"))
 
     for component_label, component in examples.kits["elements"].items():
-        # div.append(create_component_details(component_label, component))
         div_.append(h3(component_label))
         div_.append(create_component_example(component['instance'], component['code']))
 
-    # Buttons
-    div_.append(h3("Buttons"))
-    btn = 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 = div()
-    div_.append(h3("Inputs"))
-    inputs_code = []
-    for input_type in [
-        "text",
-        "password",
-        "email",
-        "number",
-        "date",
-        "time",
-        "color",
-        "range",
-    ]:
-        inputs_div.append(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(h3("Div"))
-    _div = 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 = Grid("minmax(150px, 200px) 20px auto", style={"min-height": "100%"})
+grid = Grid("140px 20px auto", style={"min-height": "100%"})
 
 # ********** MAIN PANEL **********
 main_area = create_main_area()
@@ -264,6 +215,7 @@ def restore_home():
 
 def basic_components():
     write_to_main(create_basic_components_page())
+    # Make sure we highlight the code
     window.hljs.highlightAll()
 
 

pyscript.core/test/ui/examples.py

@@ -1,5 +1,5 @@
 from pyweb import pydom
-from pyweb.ui import elements as el
+from pyweb.ui.elements import a, button, code, div, Grid, h1, h2, h3, input_, p
 from pyweb.ui.shoelace import (
     Alert,
     Button,
@@ -21,7 +21,7 @@ Details(LOREM_IPSUM, summary="Try me")
 """
 example_dialog_close_btn = Button("Close")
 example_dialog = Dialog(
-    el.div([el.p(LOREM_IPSUM), example_dialog_close_btn]), label="Try me"
+    div([p(LOREM_IPSUM), example_dialog_close_btn]), label="Try me"
 )
 example_dialog_btn = Button("Open Dialog")
 
@@ -36,61 +36,80 @@ when("click", example_dialog_close_btn)(toggle_dialog)
 pydom.body.append(example_dialog)
 
 
+# ELEMENTS
 
-btn = el.button("Click me!")
+# Button
+btn = button("Click me!")
 when("click", btn)(lambda: window.alert("Clicked!"))
 
+# Inputs
+inputs_div = div()
+inputs_code = []
+for input_type in [
+    "text",
+    "password",
+    "email",
+    "number",
+    "date",
+    "time",
+    "color",
+    "range",
+]:
+    inputs_div.append(input_(type=input_type, style={"display": "block"}))
+    inputs_code.append(f"input_(type='{input_type}')")
+inputs_code = "\n".join(inputs_code)
+
 kits = {
     "shoelace": {
         "Alert": {
             "instance": Alert(
                 "This is a standard alert. You can customize its content and even the icon."
             ),
-            "code": el.code(
+            "code": code(
                 "Alert('This is a standard alert. You can customize its content and even the icon.'"
             ),
         },
         "Icon": {
             "instance": Icon(name="heart"),
-            "code": el.code('Icon(name="heart")'),
+            "code": code('Icon(name="heart")'),
         },
         "Button": {
             "instance": Button("Try me"),
-            "code": el.code('Button("Try me")'),
+            "code": code('Button("Try me")'),
         },
         "Card": {
             "instance": Card(
-                el.p("This is a cool card!"),
+                p("This is a cool card!"),
                 image="https://pyscript.net/assets/images/pyscript-sticker-black.svg",
-                footer=el.div([Button("More Info"), Rating()]),
+                footer=div([Button("More Info"), Rating()]),
             ),
-            "code": el.code(
+            "code": code(
                 """
-Card(el.p("This is a cool card!"), image="https://pyscript.net/assets/images/pyscript-sticker-black.svg", footer=el.div([Button("More Info"), Rating()]))
+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": el.code('Details(LOREM_IPSUM, summary="Try me")'),
+            "code": code('Details(LOREM_IPSUM, summary="Try me")'),
         },
         "Dialog": {
             "instance": example_dialog_btn,
-            "code": el.code(
+            "code": code(
                 'Dialog(div([p(LOREM_IPSUM), Button("Close")]), summary="Try me")'
             ),
         },
         "Divider": {
             "instance": Divider(),
-            "code": el.code("Divider()"),
+            "code": code("Divider()"),
         },
         "Rating": {
             "instance": Rating(),
-            "code": el.code("Rating()"),
+            "code": code("Rating()"),
         },
         "Radio": {
             "instance": Radio(),
-            "code": el.code("Radio()"),
+            "code": code("Radio()"),
         },
     },
     'elements':{
@@ -101,8 +120,12 @@ when('click', btn)(lambda: window.alert("Clicked!"))
 '''
         },
         'div': {
-            'instance': el.div("This is a div"),
+            'instance': div("This is a div", style={'text-align': 'center', 'margin': '0 auto', 'background-color': 'cornsilk'}),
-            'code': 'div("This is a div")'
+            'code': 'div("This is a div", style={"text-align": "center", "margin": "0 auto", "background-color": "cornsilk"})'
-        }
+        },
+        'input':{
+            'instance': inputs_div,
+            'code': inputs_code
+        },
     }
 }