ordered & unordered lists (#2537)

reflex/__init__.py

@@ -4,6 +4,7 @@ Anything imported here will be available in the default Reflex import as `rx.*`.
 To signal to typecheckers that something should be reexported,
 we use the Flask "import name as name" syntax.
 """
+
 from __future__ import annotations
 
 import importlib
@@ -107,6 +108,9 @@ _ALL_COMPONENTS = [
     "EditorOptions",
     "icon",
     "markdown",
+    "list_item",
+    "unordered_list",
+    "ordered_list",
 ]
 
 _MAPPING = {

reflex/__init__.pyi

@@ -90,6 +90,9 @@ from reflex.components import EditorButtonList as EditorButtonList
 from reflex.components import EditorOptions as EditorOptions
 from reflex.components import icon as icon
 from reflex.components import markdown as markdown
+from reflex.components import list_item as list_item
+from reflex.components import unordered_list as unordered_list
+from reflex.components import ordered_list as ordered_list
 from reflex.components.component import Component as Component
 from reflex.components.component import NoSSRComponent as NoSSRComponent
 from reflex.components.component import memo as memo

reflex/components/radix/themes/layout/__init__.py

@@ -5,6 +5,7 @@ from .center import Center
 from .container import Container
 from .flex import Flex
 from .grid import Grid
+from .list import ListItem, OrderedList, UnorderedList
 from .section import Section
 from .spacer import Spacer
 from .stack import HStack, Stack, VStack
@@ -19,6 +20,9 @@ spacer = Spacer.create
 stack = Stack.create
 hstack = HStack.create
 vstack = VStack.create
+list_item = ListItem.create
+ordered_list = OrderedList.create
+unordered_list = UnorderedList.create
 
 __all__ = [
     "box",
@@ -31,4 +35,7 @@ __all__ = [
     "stack",
     "hstack",
     "vstack",
+    "list_item",
+    "ordered_list",
+    "unordered_list",
 ]

reflex/components/radix/themes/layout/list.py

@@ -0,0 +1,154 @@
+"""List components."""
+
+from types import SimpleNamespace
+from typing import Iterable, Literal, Optional, Union
+
+from reflex.components.component import Component
+from reflex.components.core.foreach import Foreach
+from reflex.components.el.elements.typography import Li
+from reflex.style import Style
+from reflex.vars import Var
+
+from .base import LayoutComponent
+from .flex import Flex
+
+# from reflex.vars import Var
+
+# from reflex.components.radix.themes.layout import LayoutComponent
+
+LiteralListStyleTypeUnordered = Literal[
+    "none",
+    "disc",
+    "circle",
+    "square",
+]
+
+LiteralListStyleTypeOrdered = Literal[
+    "none",
+    "decimal",
+    "decimal-leading-zero",
+    "lower-roman",
+    "upper-roman",
+    "lower-greek",
+    "lower-latin",
+    "upper-latin",
+    "armenian",
+    "georgian",
+    "lower-alpha",
+    "upper-alpha",
+    "hiragana",
+    "katakana",
+]
+
+
+class BaseList(Flex, LayoutComponent):
+    """Base class for ordered and unordered lists."""
+
+    @classmethod
+    def create(
+        cls,
+        *children,
+        items: Optional[Union[Var[Iterable], Iterable]] = None,
+        list_style_type: str = "",
+        **props,
+    ):
+        """Create a list component.
+
+        Args:
+            *children: The children of the component.
+            items: A list of items to add to the list.
+            list_style_type: The style of the list.
+            **props: The properties of the component.
+
+        Returns:
+            The list component.
+        """
+        if not children and items is not None:
+            if isinstance(items, Var):
+                children = [Foreach.create(items, ListItem.create)]
+            else:
+                children = [ListItem.create(item) for item in items]
+        props["list_style_type"] = list_style_type
+        props["direction"] = "column"
+        style = props.setdefault("style", {})
+        style["list_style_position"] = "outside"
+        if "gap" in props:
+            style["gap"] = props["gap"]
+        return super().create(*children, **props)
+
+    def _apply_theme(self, theme: Component):
+        self.style = Style(
+            {
+                "direction": "column",
+                "list_style_position": "outside",
+                **self.style,
+            }
+        )
+
+
+class UnorderedList(BaseList):
+    """Display an unordered list."""
+
+    @classmethod
+    def create(
+        cls,
+        *children,
+        items: Optional[Var[Iterable]] = None,
+        list_style_type: LiteralListStyleTypeUnordered = "disc",
+        **props,
+    ):
+        """Create a unordered list component.
+
+        Args:
+            *children: The children of the component.
+            items: A list of items to add to the list.
+            list_style_type: The style of the list.
+            **props: The properties of the component.
+
+        Returns:
+            The list component.
+        """
+        return super().create(
+            *children, items=items, list_style_type=list_style_type, **props
+        )
+
+
+class OrderedList(BaseList):
+    """Display an ordered list."""
+
+    @classmethod
+    def create(
+        cls,
+        *children,
+        items: Optional[Var[Iterable]] = None,
+        list_style_type: LiteralListStyleTypeOrdered = "decimal",
+        **props,
+    ):
+        """Create an ordered list component.
+
+        Args:
+            *children: The children of the component.
+            items: A list of items to add to the list.
+            list_style_type: The style of the list.
+            **props: The properties of the component.
+
+        Returns:
+            The list component.
+        """
+        return super().create(
+            *children, items=items, list_style_type=list_style_type, **props
+        )
+
+
+class ListItem(Li):
+    """Display an item of an ordered or unordered list."""
+
+    ...
+
+
+class List(SimpleNamespace):
+    """List components."""
+
+    item = ListItem.create
+    ordered = OrderedList.create
+    unordered = UnorderedList.create