Merge branch 'poc_ui_blocks' of github.com:pyscript/pyscript into poc_ui_blocks

pyscript.core/src/stdlib/pyweb/ui/__init__.py

@@ -1 +1 @@
-from . import elements, shoelace, markdown
+from . import elements, markdown, shoelace

pyscript.core/src/stdlib/pyweb/ui/markdown.py

@@ -5,10 +5,10 @@ from pyweb.ui.elements import TextElementBase
 
 class markdown(TextElementBase):
     """Markdown component to render HTML from Markdown code"""
-    tag = 'div'
 
-    def __init__(self, content, style = None, **kwargs):
+    tag = "div"
+
+    def __init__(self, content, style=None, **kwargs):
         # TODO: We should sanitize the content!!!!!
         html = window.marked.parse(content)
         super().__init__(html, style=style, **kwargs)
-

pyscript.core/src/stdlib/pyweb/ui/shoelace.py

@@ -373,6 +373,7 @@ class Icon(ShoeBase):
             name=name, src=src, label=label, library=library, style=style, **kwargs
         )
 
+
 # Load resources...
 # <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.12.0/cdn/themes/light.css" />
 # <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.12.0/cdn/shoelace-autoloader.js"></script>

pyscript.core/test/ui/demo.py

@@ -1,14 +1,12 @@
 from textwrap import dedent
 
+import examples
 from pyscript import when, window
 from pyweb import pydom
 from pyweb.ui import elements as el
 from pyweb.ui import shoelace
-
 from pyweb.ui.markdown import markdown
 
-import examples
-
 # Style dictionary for code blocks
 STYLE_CODE_BLOCK = {"text-align": "left", "background-color": "#eee", "padding": "20px"}
 
@@ -16,6 +14,7 @@ STYLE_CODE_BLOCK = {"text-align": "left", "background-color": "#eee", "padding":
 # 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.
@@ -314,8 +313,8 @@ 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']:
+print("SHOELACE EXAMPLES", examples.kits["shoelace"])
+for component in examples.kits["shoelace"]:
     add_component_section(component, left_div)
 
 

pyscript.core/test/ui/examples.py

@@ -1,7 +1,16 @@
 from pyscript import when
 from pyweb import pydom
-from pyweb.ui.shoelace import (Alert, Button, Card, Details, Dialog, Divider, Icon, Rating)
 from pyweb.ui import elements as el
+from pyweb.ui.shoelace import (
+    Alert,
+    Button,
+    Card,
+    Details,
+    Dialog,
+    Divider,
+    Icon,
+    Rating,
+)
 
 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."
 details_code = """
@@ -25,52 +34,53 @@ when("click", example_dialog_close_btn)(toggle_dialog)
 pydom.body.append(example_dialog)
 
 
-kits = {"shoelace": {
-    "Alert": {
-        "instance": Alert(
-            "This is a standard alert. You can customize its content and even the icon."
-        ),
-        "code": el.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")'),
-    },
-    "Button": {
-        "instance": Button("Try me"),
-        "code": el.code('Button("Try me")'),
-    },
-    "Card": {
-        "instance": 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()]),
-        ),
-        "code": el.code(
-            """
+kits = {
+    "shoelace": {
+        "Alert": {
+            "instance": Alert(
+                "This is a standard alert. You can customize its content and even the icon."
+            ),
+            "code": el.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")'),
+        },
+        "Button": {
+            "instance": Button("Try me"),
+            "code": el.code('Button("Try me")'),
+        },
+        "Card": {
+            "instance": 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()]),
+            ),
+            "code": el.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()]))
 """
-        ),
-    },
-    "Details": {
-        "instance": Details(LOREM_IPSUM, summary="Try me"),
-        "code": el.code('Details(LOREM_IPSUM, summary="Try me")'),
-    },
-    "Dialog": {
-        "instance": example_dialog_btn,
-        "code": el.code(
-            'Dialog(div([p(LOREM_IPSUM), Button("Close")]), summary="Try me")'
-        ),
-    },
-    "Divider": {
-        "instance": Divider(),
-        "code": el.code("Divider()"),
-    },
-    "Rating": {
-        "instance": Rating(),
-        "code": el.code("Rating()"),
-    },
+            ),
+        },
+        "Details": {
+            "instance": Details(LOREM_IPSUM, summary="Try me"),
+            "code": el.code('Details(LOREM_IPSUM, summary="Try me")'),
+        },
+        "Dialog": {
+            "instance": example_dialog_btn,
+            "code": el.code(
+                'Dialog(div([p(LOREM_IPSUM), Button("Close")]), summary="Try me")'
+            ),
+        },
+        "Divider": {
+            "instance": Divider(),
+            "code": el.code("Divider()"),
+        },
+        "Rating": {
+            "instance": Rating(),
+            "code": el.code("Rating()"),
+        },
     }
 }

pyscript.core/test/ui/pyscript.toml

@@ -1,4 +1,4 @@
 packages = []
 
 [files]
-"./examples.py" = "./examples.py"
+"./examples.py" = "./examples.py"