add Component.library str type annotation

reflex/components/base/document.py

@@ -8,7 +8,7 @@ from reflex.components.component import Component
 class NextDocumentLib(Component):
     """Root document components."""
 
-    library = "next/document"
+    library: str = "next/document"
 
 
 class Html(NextDocumentLib):

reflex/components/base/fragment.py

@@ -5,5 +5,5 @@ from reflex.components.component import Component
 class Fragment(Component):
     """A React fragment to return multiple components from a function without wrapping it in a container."""
 
-    library = "react"
+    library: str = "react"
     tag: str = "Fragment"

reflex/components/base/head.py

@@ -6,7 +6,7 @@ from reflex.components.component import Component, MemoizationLeaf
 class NextHeadLib(Component):
     """Header components."""
 
-    library = "next/head"
+    library: str = "next/head"
 
 
 class Head(NextHeadLib, MemoizationLeaf):

reflex/components/base/script.py

@@ -19,7 +19,7 @@ class Script(Component):
     HTML <script> tag which does not work when rendering a component.
     """
 
-    library = "next/script"
+    library: str = "next/script"
     tag: str = "Script"
     is_default: bool = True
 

reflex/components/chakra/base.py

@@ -12,7 +12,7 @@ from reflex.vars import Var
 class ChakraComponent(Component):
     """A component that wraps a Chakra component."""
 
-    library = "@chakra-ui/react@2.6.1"
+    library: str = "@chakra-ui/react@2.6.1"
     lib_dependencies: List[str] = [
         "@chakra-ui/system@2.5.7",
         "framer-motion@10.16.4",
@@ -92,7 +92,7 @@ chakra_provider = ChakraProvider.create()
 class ChakraColorModeProvider(Component):
     """Next-themes integration for chakra colorModeProvider."""
 
-    library = "/components/reflex/chakra_color_mode_provider.js"
+    library: str = "/components/reflex/chakra_color_mode_provider.js"
     tag: str = "ChakraColorModeProvider"
     is_default: bool = True
 

reflex/components/chakra/forms/iconbutton.py

@@ -10,7 +10,7 @@ class IconButton(Text):
     """A button with an icon."""
 
     tag: str = "IconButton"
-    library = "@chakra-ui/button@2.1.0"
+    library: str = "@chakra-ui/button@2.1.0"
 
     # The type of button.
     type: Optional[Var[str]] = None

reflex/components/chakra/forms/multiselect.py

@@ -46,7 +46,7 @@ class Select(Component):
     Props added by chakra-react-select are marked with "[chakra]".
     """
 
-    library = "chakra-react-select@4.7.5"
+    library: str = "chakra-react-select@4.7.5"
     tag: str = "Select"
     alias = "MultiSelect"
 

reflex/components/chakra/media/icon.py

@@ -8,7 +8,7 @@ from reflex.utils import format
 class ChakraIconComponent(ChakraComponent):
     """A component that wraps a Chakra icon component."""
 
-    library = "@chakra-ui/icons@2.0.19"
+    library: str = "@chakra-ui/icons@2.0.19"
 
 
 class Icon(ChakraIconComponent):

reflex/components/core/client_side_routing.py

@@ -20,7 +20,7 @@ route_not_found: Var = Var.create_safe(constants.ROUTE_NOT_FOUND)
 class ClientSideRouting(Component):
     """The client-side routing component."""
 
-    library = "/utils/client_side_routing"
+    library: str = "/utils/client_side_routing"
     tag: str = "useClientSideRouting"
 
     def _get_hooks(self) -> str:
@@ -61,7 +61,7 @@ def wait_for_client_redirect(component) -> Component:
 class Default404Page(Component):
     """The NextJS default 404 page."""
 
-    library = "next/error"
+    library: str = "next/error"
     tag: str = "Error"
     is_default: bool = True
 

reflex/components/core/debounce.py

@@ -18,7 +18,7 @@ class DebounceInput(Component):
     is experiencing high latency.
     """
 
-    library = "react-debounce-input@3.3.0"
+    library: str = "react-debounce-input@3.3.0"
     tag: str = "DebounceInput"
 
     # Minimum input characters before triggering the on_change event

reflex/components/core/upload.py

@@ -164,7 +164,7 @@ class UploadFilesProvider(Component):
 class Upload(MemoizationLeaf):
     """A file upload component."""
 
-    library = "react-dropzone@14.2.3"
+    library: str = "react-dropzone@14.2.3"
 
     tag: str = "ReactDropzone"
 

reflex/components/datadisplay/code.py

@@ -348,7 +348,7 @@ LiteralCodeLanguage = Literal[
 class CodeBlock(Component):
     """A code block."""
 
-    library = "react-syntax-highlighter@15.5.0"
+    library: str = "react-syntax-highlighter@15.5.0"
 
     tag: str = "PrismAsyncLight"
 

reflex/components/gridjs/datatable.py

@@ -13,7 +13,7 @@ from reflex.vars import BaseVar, ComputedVar, Var
 class Gridjs(Component):
     """A component that wraps a nivo bar component."""
 
-    library = "gridjs-react@6.0.1"
+    library: str = "gridjs-react@6.0.1"
 
     lib_dependencies: List[str] = ["gridjs@6.0.6"]
 

reflex/components/lucide/icon.py

@@ -11,7 +11,7 @@ from reflex.vars import Var
 class LucideIconComponent(Component):
     """Lucide Icon Component."""
 
-    library = "lucide-react@0.314.0"
+    library: str = "lucide-react@0.314.0"
 
 
 class Icon(LucideIconComponent):

reflex/components/markdown/markdown.py

@@ -75,7 +75,7 @@ def get_base_component_map() -> dict[str, Callable]:
 class Markdown(Component):
     """A markdown component."""
 
-    library = "react-markdown@8.0.7"
+    library: str = "react-markdown@8.0.7"
 
     tag: str = "ReactMarkdown"
 

reflex/components/next/image.py

@@ -11,7 +11,7 @@ class Image(NextComponent):
     """Display an image."""
 
     tag: str = "Image"
-    library = "next/image"
+    library: str = "next/image"
     is_default: bool = True
 
     # This can be either an absolute external URL, or an internal path

reflex/components/next/link.py

@@ -9,7 +9,7 @@ from reflex.vars import Var
 class NextLink(Component):
     """Links are accessible elements used primarily for navigation. This component is styled to resemble a hyperlink and semantically renders an <a>."""
 
-    library = "next/link"
+    library: str = "next/link"
 
     tag: str = "NextLink"
 

reflex/components/next/video.py

@@ -11,7 +11,7 @@ class Video(NextComponent):
     """A video component from NextJS."""
 
     tag: str = "Video"
-    library = "next-video"
+    library: str = "next-video"
     is_default: bool = True
     # the URL
     src: Optional[Var[str]] = None

reflex/components/plotly/plotly.py

@@ -13,7 +13,7 @@ except ImportError:
 class PlotlyLib(NoSSRComponent):
     """A component that wraps a plotly lib."""
 
-    library = "react-plotly.js@2.6.0"
+    library: str = "react-plotly.js@2.6.0"
 
     lib_dependencies: List[str] = ["plotly.js@2.22.0"]
 

reflex/components/radix/primitives/accordion.py

@@ -299,7 +299,7 @@ def get_theme_accordion_content(variant: str | Var, color_scheme: str | Var) ->
 class AccordionComponent(RadixPrimitiveComponent):
     """Base class for all @radix-ui/accordion components."""
 
-    library = "@radix-ui/react-accordion@^1.1.2"
+    library: str = "@radix-ui/react-accordion@^1.1.2"
 
 
 class AccordionRoot(AccordionComponent):

reflex/components/radix/primitives/drawer.py

@@ -16,7 +16,7 @@ from reflex.vars import Var
 class DrawerComponent(RadixPrimitiveComponent):
     """A Drawer component."""
 
-    library = "vaul"
+    library: str = "vaul"
 
     lib_dependencies: List[str] = ["@radix-ui/react-dialog@^1.0.5"]
 

reflex/components/radix/primitives/form.py

@@ -39,7 +39,7 @@ HANDLE_SUBMIT_JS_JINJA2 = Environment().from_string(
 class FormComponent(RadixPrimitiveComponentWithClassName):
     """Base class for all @radix-ui/react-form components."""
 
-    library = "@radix-ui/react-form@^0.0.3"
+    library: str = "@radix-ui/react-form@^0.0.3"
 
 
 class FormRoot(FormComponent):

reflex/components/radix/primitives/progress.py

@@ -15,7 +15,7 @@ from reflex.vars import Var
 class ProgressComponent(RadixPrimitiveComponentWithClassName):
     """A Progress component."""
 
-    library = "@radix-ui/react-progress@^1.0.3"
+    library: str = "@radix-ui/react-progress@^1.0.3"
 
 
 class ProgressRoot(ProgressComponent):

reflex/components/radix/primitives/slider.py

@@ -15,7 +15,7 @@ LiteralSliderDir = Literal["ltr", "rtl"]
 class SliderComponent(RadixPrimitiveComponentWithClassName):
     """Base class for all @radix-ui/react-slider components."""
 
-    library = "@radix-ui/react-slider@^1.1.2"
+    library: str = "@radix-ui/react-slider@^1.1.2"
 
 
 class SliderRoot(SliderComponent):

reflex/components/radix/themes/base.py

@@ -75,7 +75,7 @@ class CommonMarginProps(Component):
 class RadixThemesComponent(Component):
     """Base class for all @radix-ui/themes components."""
 
-    library = "@radix-ui/themes@^2.0.0"
+    library: str = "@radix-ui/themes@^2.0.0"
 
     # "Fake" prop color_scheme is used to avoid shadowing CSS prop "color".
     _rename_props: Dict[str, str] = {"colorScheme": "color"}
@@ -216,7 +216,7 @@ class ThemePanel(RadixThemesComponent):
 class RadixThemesColorModeProvider(Component):
     """Next-themes integration for radix themes components."""
 
-    library = "/components/reflex/radix_themes_color_mode_provider.js"
+    library: str = "/components/reflex/radix_themes_color_mode_provider.js"
     tag: str = "RadixThemesColorModeProvider"
     is_default: bool = True
 

reflex/components/react_player/react_player.py

@@ -12,7 +12,7 @@ class ReactPlayer(NoSSRComponent):
     reference: https://github.com/cookpete/react-player.
     """
 
-    library = "react-player@2.12.0"
+    library: str = "react-player@2.12.0"
 
     tag: str = "ReactPlayer"
 

reflex/components/recharts/recharts.py

@@ -7,13 +7,13 @@ from reflex.components.component import Component, MemoizationLeaf, NoSSRCompone
 class Recharts(Component):
     """A component that wraps a recharts lib."""
 
-    library = "recharts@2.8.0"
+    library: str = "recharts@2.8.0"
 
 
 class RechartsCharts(NoSSRComponent, MemoizationLeaf):
     """A component that wraps a recharts lib."""
 
-    library = "recharts@2.8.0"
+    library: str = "recharts@2.8.0"
 
 
 LiteralAnimationEasing = Literal["ease", "ease-in", "ease-out", "ease-in-out", "linear"]

reflex/components/suneditor/editor.py

@@ -73,7 +73,7 @@ class Editor(NoSSRComponent):
     refer to the library docs for a complete list.
     """
 
-    library = "suneditor-react"
+    library: str = "suneditor-react"
 
     tag: str = "SunEditor"
 

tests/components/test_component.py

@@ -437,7 +437,7 @@ def test_component_event_trigger_arbitrary_args():
         return [_e.target.value, bravo["nested"], charlie.custom + 42]
 
     class C1(Component):
-        library = "/local"
+        library: str = "/local"
         tag: str = "C1"
 
         def get_event_triggers(self) -> Dict[str, Any]: