[GTM-345]Define component props in class for doc discoverability (#4183)

* Define component props in class for doc discoverability * add other files * fix accordion typing * add more * pyright fix * pyi fix * pyi fix fr * resinstate connection banner api * precommit fix * fix reflex-web test for select * exclude props we don't need from compiling. use regular model fields where necessary * fix counter tests * list partial fix * list fix * list fix * precommit fix * Accept suggestions * Update reflex/components/radix/primitives/accordion.py Co-authored-by: Masen Furer <[email protected]> * address missed comment * pyright fix --------- Co-authored-by: Masen Furer <[email protected]>
reflex-dev · Nov 1, 2024 · bcd5177 · bcd5177
1 parent dbc9ab2
commit bcd5177
Show file tree

Hide file tree

Showing 12 changed files with 227 additions and 76 deletions.
diff --git a/reflex/components/datadisplay/code.py b/reflex/components/datadisplay/code.py
@@ -391,7 +391,7 @@ class CodeBlock(Component):
     theme: Var[Union[Theme, str]] = Theme.one_light
 
     # The language to use.
-    language: Var[LiteralCodeLanguage] = "python"  # type: ignore
+    language: Var[LiteralCodeLanguage] = Var.create("python")
 
     # The code to display.
     code: Var[str]
@@ -411,6 +411,12 @@ class CodeBlock(Component):
     # Props passed down to the code tag.
     code_tag_props: Var[Dict[str, str]]
 
+    # Whether a copy button should appear.
+    can_copy: Optional[bool] = False
+
+    # A custom copy button to override the default one.
+    copy_button: Optional[Union[bool, Component]] = None
+
     def add_imports(self) -> ImportDict:
         """Add imports for the CodeBlock component.
 
@@ -448,23 +454,21 @@ def _get_custom_code(self) -> Optional[str]:
     def create(
         cls,
         *children,
-        can_copy: Optional[bool] = False,
-        copy_button: Optional[Union[bool, Component]] = None,
         **props,
     ):
         """Create a text component.
 
         Args:
             *children: The children of the component.
-            can_copy: Whether a copy button should appears.
-            copy_button: A custom copy button to override the default one.
             **props: The props to pass to the component.
 
         Returns:
             The text component.
         """
         # This component handles style in a special prop.
         custom_style = props.pop("custom_style", {})
+        can_copy = props.pop("can_copy", False)
+        copy_button = props.pop("copy_button", None)
 
         if "theme" not in props:
             # Default color scheme responds to global color mode.
@@ -536,6 +540,9 @@ def _render(self):
 
         return out
 
+    def _exclude_props(self) -> list[str]:
+        return ["can_copy", "copy_button"]
+
 
 class CodeblockNamespace(ComponentNamespace):
     """Namespace for the CodeBlock component."""

diff --git a/reflex/components/datadisplay/code.pyi b/reflex/components/datadisplay/code.pyi
@@ -356,8 +356,6 @@ class CodeBlock(Component):
     def create(  # type: ignore
         cls,
         *children,
-        can_copy: Optional[bool] = False,
-        copy_button: Optional[Union[Component, bool]] = None,
         theme: Optional[Union[Theme, Var[Union[Theme, str]], str]] = None,
         language: Optional[
             Union[
@@ -933,6 +931,8 @@ class CodeBlock(Component):
         wrap_long_lines: Optional[Union[Var[bool], bool]] = None,
         custom_style: Optional[Dict[str, Union[str, Var, Color]]] = None,
         code_tag_props: Optional[Union[Dict[str, str], Var[Dict[str, str]]]] = None,
+        can_copy: Optional[bool] = None,
+        copy_button: Optional[Union[Component, bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -960,8 +960,6 @@ class CodeBlock(Component):
 
         Args:
             *children: The children of the component.
-            can_copy: Whether a copy button should appears.
-            copy_button: A custom copy button to override the default one.
             theme: The theme to use ("light" or "dark").
             language: The language to use.
             code: The code to display.
@@ -970,6 +968,8 @@ class CodeBlock(Component):
             wrap_long_lines: Whether to wrap long lines.
             custom_style: A custom style for the code block.
             code_tag_props: Props passed down to the code tag.
+            can_copy: Whether a copy button should appear.
+            copy_button: A custom copy button to override the default one.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -991,8 +991,6 @@ class CodeblockNamespace(ComponentNamespace):
     @staticmethod
     def __call__(
         *children,
-        can_copy: Optional[bool] = False,
-        copy_button: Optional[Union[Component, bool]] = None,
         theme: Optional[Union[Theme, Var[Union[Theme, str]], str]] = None,
         language: Optional[
             Union[
@@ -1568,6 +1566,8 @@ class CodeblockNamespace(ComponentNamespace):
         wrap_long_lines: Optional[Union[Var[bool], bool]] = None,
         custom_style: Optional[Dict[str, Union[str, Var, Color]]] = None,
         code_tag_props: Optional[Union[Dict[str, str], Var[Dict[str, str]]]] = None,
+        can_copy: Optional[bool] = None,
+        copy_button: Optional[Union[Component, bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -1595,8 +1595,6 @@ class CodeblockNamespace(ComponentNamespace):
 
         Args:
             *children: The children of the component.
-            can_copy: Whether a copy button should appears.
-            copy_button: A custom copy button to override the default one.
             theme: The theme to use ("light" or "dark").
             language: The language to use.
             code: The code to display.
@@ -1605,6 +1603,8 @@ class CodeblockNamespace(ComponentNamespace):
             wrap_long_lines: Whether to wrap long lines.
             custom_style: A custom style for the code block.
             code_tag_props: Props passed down to the code tag.
+            can_copy: Whether a copy button should appear.
+            copy_button: A custom copy button to override the default one.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.

diff --git a/reflex/components/radix/primitives/accordion.py b/reflex/components/radix/primitives/accordion.py
@@ -2,7 +2,7 @@
 
 from __future__ import annotations
 
-from typing import Any, List, Literal, Optional, Tuple, Union
+from typing import Any, List, Literal, Tuple, Union
 
 from reflex.components.component import Component, ComponentNamespace
 from reflex.components.core.colors import color
@@ -193,6 +193,11 @@ class AccordionItem(AccordionComponent):
     # When true, prevents the user from interacting with the item.
     disabled: Var[bool]
 
+    # The header of the accordion item.
+    header: Var[Union[Component, str]]
+    # The content of the accordion item.
+    content: Var[Union[Component, str]] = Var.create(None)
+
     _valid_children: List[str] = [
         "AccordionHeader",
         "AccordionTrigger",
@@ -205,21 +210,20 @@ class AccordionItem(AccordionComponent):
     def create(
         cls,
         *children,
-        header: Optional[Component | Var] = None,
-        content: Optional[Component | Var] = None,
         **props,
     ) -> Component:
         """Create an accordion item.
 
         Args:
             *children: The list of children to use if header and content are not provided.
-            header: The header of the accordion item.
-            content: The content of the accordion item.
             **props: Additional properties to apply to the accordion item.
 
         Returns:
             The accordion item.
         """
+        header = props.pop("header", None)
+        content = props.pop("content", None)
+
         # The item requires a value to toggle (use a random unique name if not provided).
         value = props.pop("value", get_uuid_string_var())
 
@@ -291,6 +295,9 @@ def add_style(self) -> dict[str, Any] | None:
             },
         }
 
+    def _exclude_props(self) -> list[str]:
+        return ["header", "content"]
+
 
 class AccordionHeader(AccordionComponent):
     """An accordion component."""

diff --git a/reflex/components/radix/primitives/accordion.pyi b/reflex/components/radix/primitives/accordion.pyi
@@ -303,10 +303,10 @@ class AccordionItem(AccordionComponent):
     def create(  # type: ignore
         cls,
         *children,
-        header: Optional[Union[Component, Var]] = None,
-        content: Optional[Union[Component, Var]] = None,
         value: Optional[Union[Var[str], str]] = None,
         disabled: Optional[Union[Var[bool], bool]] = None,
+        header: Optional[Union[Component, Var[Union[Component, str]], str]] = None,
+        content: Optional[Union[Component, Var[Union[Component, str]], str]] = None,
         color_scheme: Optional[
             Union[
                 Literal[
@@ -403,10 +403,10 @@ class AccordionItem(AccordionComponent):
 
         Args:
             *children: The list of children to use if header and content are not provided.
-            header: The header of the accordion item.
-            content: The content of the accordion item.
             value: A unique identifier for the item.
             disabled: When true, prevents the user from interacting with the item.
+            header: The header of the accordion item.
+            content: The content of the accordion item.
             color_scheme: The color scheme of the component.
             variant: The variant of the component.
             as_child: Change the default rendered element for the one passed as a child.

diff --git a/reflex/components/radix/themes/color_mode.py b/reflex/components/radix/themes/color_mode.py
@@ -17,7 +17,7 @@
 
 from __future__ import annotations
 
-from typing import Dict, List, Literal, get_args
+from typing import Dict, List, Literal, Optional, Union, get_args
 
 from reflex.components.component import BaseComponent
 from reflex.components.core.cond import Cond, color_mode_cond, cond
@@ -96,26 +96,31 @@ def _set_static_default(props, position, prop, default):
 class ColorModeIconButton(IconButton):
     """Icon Button for toggling light / dark mode via toggle_color_mode."""
 
+    # The position of the icon button. Follow document flow if None.
+    position: Optional[Union[LiteralPosition, Var[LiteralPosition]]] = None
+
+    # Allow picking the "system" value for the color mode.
+    allow_system: bool = False
+
     @classmethod
     def create(
         cls,
-        position: LiteralPosition | None = None,
-        allow_system: bool = False,
         **props,
     ):
-        """Create a icon button component that calls toggle_color_mode on click.
+        """Create an icon button component that calls toggle_color_mode on click.
 
         Args:
-            position: The position of the icon button. Follow document flow if None.
-            allow_system: Allow picking the "system" value for the color mode.
             **props: The props to pass to the component.
 
         Returns:
             The button component.
         """
+        position = props.pop("position", None)
+        allow_system = props.pop("allow_system", False)
+
         # position is used to set nice defaults for positioning the icon button
         if isinstance(position, Var):
-            _set_var_default(props, position, "position", "fixed", position)
+            _set_var_default(props, position, "position", "fixed", position)  # type: ignore
             _set_var_default(props, position, "bottom", "2rem")
             _set_var_default(props, position, "top", "2rem")
             _set_var_default(props, position, "left", "2rem")
@@ -155,12 +160,15 @@ def color_mode_item(_color_mode):
                     color_mode_item("system"),
                 ),
             )
-        return super().create(
+        return IconButton.create(
             ColorModeIcon.create(),
             on_click=toggle_color_mode,
             **props,
         )
 
+    def _exclude_props(self) -> list[str]:
+        return ["position", "allow_system"]
+
 
 class ColorModeSwitch(Switch):
     """Switch for toggling light / dark mode via toggle_color_mode."""

diff --git a/reflex/components/radix/themes/color_mode.pyi b/reflex/components/radix/themes/color_mode.pyi
@@ -75,6 +75,18 @@ class ColorModeIconButton(IconButton):
     def create(  # type: ignore
         cls,
         *children,
+        position: Optional[
+            Union[
+                Literal["bottom-left", "bottom-right", "top-left", "top-right"],
+                Union[
+                    Literal["bottom-left", "bottom-right", "top-left", "top-right"],
+                    Var[
+                        Literal["bottom-left", "bottom-right", "top-left", "top-right"]
+                    ],
+                ],
+            ]
+        ] = None,
+        allow_system: Optional[bool] = None,
         as_child: Optional[Union[Var[bool], bool]] = None,
         size: Optional[
             Union[
@@ -226,7 +238,7 @@ class ColorModeIconButton(IconButton):
         on_unmount: Optional[EventType[[]]] = None,
         **props,
     ) -> "ColorModeIconButton":
-        """Create a icon button component that calls toggle_color_mode on click.
+        """Create an icon button component that calls toggle_color_mode on click.
 
         Args:
             position: The position of the icon button. Follow document flow if None.

diff --git a/reflex/components/radix/themes/components/slider.py b/reflex/components/radix/themes/components/slider.py
@@ -53,6 +53,9 @@ class Slider(RadixThemesComponent):
     # The name of the slider. Submitted with its owning form as part of a name/value pair.
     name: Var[str]
 
+    # The width of the slider.
+    width: Var[Optional[str]] = Var.create("100%")
+
     # The minimum value of the slider.
     min: Var[Union[float, int]]
 
@@ -81,20 +84,19 @@ class Slider(RadixThemesComponent):
     def create(
         cls,
         *children,
-        width: Optional[str] = "100%",
         **props,
     ) -> Component:
         """Create a Slider component.
 
         Args:
             *children: The children of the component.
-            width: The width of the slider.
             **props: The properties of the component.
 
         Returns:
             The component.
         """
         default_value = props.pop("default_value", [50])
+        width = props.pop("width", "100%")
 
         if isinstance(default_value, Var):
             if issubclass(default_value._var_type, (int, float)):

diff --git a/reflex/components/radix/themes/components/slider.pyi b/reflex/components/radix/themes/components/slider.pyi
@@ -24,7 +24,6 @@ class Slider(RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        width: Optional[str] = "100%",
         as_child: Optional[Union[Var[bool], bool]] = None,
         size: Optional[
             Union[
@@ -123,6 +122,7 @@ class Slider(RadixThemesComponent):
             Union[List[Union[float, int]], Var[List[Union[float, int]]]]
         ] = None,
         name: Optional[Union[Var[str], str]] = None,
+        width: Optional[Union[Var[Optional[str]], str]] = None,
         min: Optional[Union[Var[Union[float, int]], float, int]] = None,
         max: Optional[Union[Var[Union[float, int]], float, int]] = None,
         step: Optional[Union[Var[Union[float, int]], float, int]] = None,
@@ -174,7 +174,6 @@ class Slider(RadixThemesComponent):
 
         Args:
             *children: The children of the component.
-            width: The width of the slider.
             as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
             size: Button size "1" - "3"
             variant: Variant of button
@@ -184,6 +183,7 @@ class Slider(RadixThemesComponent):
             default_value: The value of the slider when initially rendered. Use when you do not need to control the state of the slider.
             value: The controlled value of the slider. Must be used in conjunction with onValueChange.
             name: The name of the slider. Submitted with its owning form as part of a name/value pair.
+            width: The width of the slider.
             min: The minimum value of the slider.
             max: The maximum value of the slider.
             step: The step value of the slider.