From 05d1be21823c620d0bfc20d28cd541d53faf3ab0 Mon Sep 17 00:00:00 2001 From: Nikhil Rao Date: Sat, 3 Feb 2024 05:26:46 +0700 Subject: [PATCH] Move core components to radix namespace (#2506) --- .coveragerc | 4 +- integration/test_background_task.py | 4 +- integration/test_call_script.py | 6 +- integration/test_client_storage.py | 6 +- integration/test_dynamic_routes.py | 12 +- integration/test_event_actions.py | 6 +- integration/test_event_chain.py | 6 +- integration/test_form_submit.py | 62 +-- integration/test_input.py | 8 +- integration/test_login_flow.py | 2 +- integration/test_server_side_event.py | 8 +- integration/test_state_inheritance.py | 2 +- integration/test_table.py | 52 +- integration/test_tailwind.py | 2 +- integration/test_upload.py | 6 +- integration/test_var_operations.py | 9 +- reflex/.templates/web/utils/state.js | 7 +- reflex/__init__.py | 310 ++++-------- reflex/__init__.pyi | 445 ++---------------- reflex/components/__init__.py | 5 +- reflex/components/chakra/__init__.py | 1 - reflex/components/chakra/layout/__init__.py | 1 - reflex/components/core/__init__.py | 2 + .../{chakra/layout => core}/html.py | 4 +- .../{chakra/layout => core}/html.pyi | 72 ++- tests/components/forms/test_debounce.py | 6 +- tests/components/forms/test_uploads.py | 4 +- tests/components/layout/test_match.py | 22 +- tests/components/test_component.py | 12 +- tests/components/typography/test_markdown.py | 2 +- tests/test_app.py | 17 +- 31 files changed, 337 insertions(+), 768 deletions(-) rename reflex/components/{chakra/layout => core}/html.py (92%) rename reflex/components/{chakra/layout => core}/html.pyi (50%) diff --git a/.coveragerc b/.coveragerc index afd851874b5..8c3df0fa48e 100644 --- a/.coveragerc +++ b/.coveragerc @@ -5,7 +5,7 @@ branch = true [report] show_missing = true # TODO bump back to 79 -fail_under = 70 +fail_under = 69 precision = 2 # Regexes for lines to exclude from consideration @@ -28,4 +28,4 @@ exclude_also = ignore_errors = True [html] -directory = coverage_html_report \ No newline at end of file +directory = coverage_html_report diff --git a/integration/test_background_task.py b/integration/test_background_task.py index 799d68c2f67..619efa6cf74 100644 --- a/integration/test_background_task.py +++ b/integration/test_background_task.py @@ -59,11 +59,11 @@ async def non_blocking_pause(self): def index() -> rx.Component: return rx.vstack( - rx.input( + rx.chakra.input( id="token", value=State.router.session.client_token, is_read_only=True ), rx.heading(State.counter, id="counter"), - rx.input( + rx.chakra.input( id="iterations", placeholder="Iterations", value=State.iterations.to_string(), # type: ignore diff --git a/integration/test_call_script.py b/integration/test_call_script.py index c3a36430668..97f99548734 100644 --- a/integration/test_call_script.py +++ b/integration/test_call_script.py @@ -142,17 +142,17 @@ def reset_(self): @app.add_page def index(): return rx.vstack( - rx.input( + rx.chakra.input( value=CallScriptState.router.session.client_token, is_read_only=True, id="token", ), - rx.input( + rx.chakra.input( value=CallScriptState.inline_counter.to(str), # type: ignore id="inline_counter", is_read_only=True, ), - rx.input( + rx.chakra.input( value=CallScriptState.external_counter.to(str), # type: ignore id="external_counter", is_read_only=True, diff --git a/integration/test_client_storage.py b/integration/test_client_storage.py index 2678f3d52cf..0452e7cabae 100644 --- a/integration/test_client_storage.py +++ b/integration/test_client_storage.py @@ -55,18 +55,18 @@ def set_var(self): def index(): return rx.fragment( - rx.input( + rx.chakra.input( value=ClientSideState.router.session.client_token, is_read_only=True, id="token", ), - rx.input( + rx.chakra.input( placeholder="state var", value=ClientSideState.state_var, on_change=ClientSideState.set_state_var, # type: ignore id="state_var", ), - rx.input( + rx.chakra.input( placeholder="input value", value=ClientSideState.input_value, on_change=ClientSideState.set_input_value, # type: ignore diff --git a/integration/test_dynamic_routes.py b/integration/test_dynamic_routes.py index 7cb64754f88..9fa597d2be0 100644 --- a/integration/test_dynamic_routes.py +++ b/integration/test_dynamic_routes.py @@ -35,13 +35,15 @@ def next_page(self) -> str: def index(): return rx.fragment( - rx.input( + rx.chakra.input( value=DynamicState.router.session.client_token, is_read_only=True, id="token", ), - rx.input(value=DynamicState.page_id, is_read_only=True, id="page_id"), - rx.input( + rx.chakra.input( + value=DynamicState.page_id, is_read_only=True, id="page_id" + ), + rx.chakra.input( value=DynamicState.router.page.raw_path, is_read_only=True, id="raw_path", @@ -52,8 +54,8 @@ def index(): "next", href="/page/" + DynamicState.next_page, id="link_page_next" # type: ignore ), rx.link("missing", href="/missing", id="link_missing"), - rx.list( - rx.foreach(DynamicState.order, lambda i: rx.list_item(rx.text(i))), # type: ignore + rx.chakra.list( + rx.foreach(DynamicState.order, lambda i: rx.chakra.list_item(rx.text(i))), # type: ignore ), ) diff --git a/integration/test_event_actions.py b/integration/test_event_actions.py index 89c8ece22d6..05e333f3c98 100644 --- a/integration/test_event_actions.py +++ b/integration/test_event_actions.py @@ -42,7 +42,7 @@ def get_event_triggers(self): def index(): return rx.vstack( - rx.input( + rx.chakra.input( value=EventActionState.router.session.client_token, is_read_only=True, id="token", @@ -121,10 +121,10 @@ def index(): "custom-prevent-default" ).prevent_default, ), - rx.list( + rx.chakra.list( rx.foreach( EventActionState.order, # type: ignore - rx.list_item, + rx.chakra.list_item, ), ), on_click=EventActionState.on_click("outer"), # type: ignore diff --git a/integration/test_event_chain.py b/integration/test_event_chain.py index ec3f125b428..587e0f63dcc 100644 --- a/integration/test_event_chain.py +++ b/integration/test_event_chain.py @@ -124,7 +124,7 @@ def click_yield_interim_value(self): app = rx.App(state=rx.State) - token_input = rx.input( + token_input = rx.chakra.input( value=State.router.session.client_token, is_read_only=True, id="token" ) @@ -132,7 +132,9 @@ def click_yield_interim_value(self): def index(): return rx.fragment( token_input, - rx.input(value=State.interim_value, is_read_only=True, id="interim_value"), + rx.chakra.input( + value=State.interim_value, is_read_only=True, id="interim_value" + ), rx.button( "Return Event", id="return_event", diff --git a/integration/test_form_submit.py b/integration/test_form_submit.py index b64846c1b12..8f7792effdf 100644 --- a/integration/test_form_submit.py +++ b/integration/test_form_submit.py @@ -27,28 +27,28 @@ def form_submit(self, form_data: dict): @app.add_page def index(): return rx.vstack( - rx.input( + rx.chakra.input( value=FormState.router.session.client_token, is_read_only=True, id="token", ), - rx.form( + rx.form.root( rx.vstack( - rx.input(id="name_input"), - rx.hstack(rx.pin_input(length=4, id="pin_input")), - rx.number_input(id="number_input"), + rx.chakra.input(id="name_input"), + rx.hstack(rx.chakra.pin_input(length=4, id="pin_input")), + rx.chakra.number_input(id="number_input"), rx.checkbox(id="bool_input"), rx.switch(id="bool_input2"), rx.checkbox(id="bool_input3"), rx.switch(id="bool_input4"), - rx.slider(id="slider_input"), - rx.range_slider(id="range_input"), + rx.slider(id="slider_input", default_value=[50], width="100%"), + rx.chakra.range_slider(id="range_input"), rx.radio_group(["option1", "option2"], id="radio_input"), rx.radio_group(FormState.var_options, id="radio_input_var"), - rx.select(["option1", "option2"], id="select_input"), - rx.select(FormState.var_options, id="select_input_var"), + rx.chakra.select(["option1", "option2"], id="select_input"), + rx.chakra.select(FormState.var_options, id="select_input_var"), rx.text_area(id="text_area_input"), - rx.input( + rx.chakra.input( id="debounce_input", debounce_timeout=0, on_change=rx.console_log, @@ -80,37 +80,41 @@ def form_submit(self, form_data: dict): @app.add_page def index(): return rx.vstack( - rx.input( + rx.chakra.input( value=FormState.router.session.client_token, is_read_only=True, id="token", ), - rx.form( + rx.form.root( rx.vstack( - rx.input(name="name_input"), - rx.hstack(rx.pin_input(length=4, name="pin_input")), - rx.number_input(name="number_input"), + rx.chakra.input(name="name_input"), + rx.hstack(rx.chakra.pin_input(length=4, name="pin_input")), + rx.chakra.number_input(name="number_input"), rx.checkbox(name="bool_input"), rx.switch(name="bool_input2"), rx.checkbox(name="bool_input3"), rx.switch(name="bool_input4"), - rx.slider(name="slider_input"), - rx.range_slider(name="range_input"), + rx.slider(name="slider_input", default_value=[50], width="100%"), + rx.chakra.range_slider(name="range_input"), rx.radio_group(FormState.options, name="radio_input"), - rx.select(FormState.options, name="select_input"), + rx.select( + FormState.options, + name="select_input", + default_value=FormState.options[0], + ), rx.text_area(name="text_area_input"), - rx.input_group( - rx.input_left_element(rx.icon(tag="chevron_right")), - rx.input( + rx.chakra.input_group( + rx.chakra.input_left_element(rx.icon(tag="chevron_right")), + rx.chakra.input( name="debounce_input", debounce_timeout=0, on_change=rx.console_log, ), - rx.input_right_element(rx.icon(tag="chevron_left")), + rx.chakra.input_right_element(rx.icon(tag="chevron_left")), ), - rx.button_group( + rx.chakra.button_group( rx.button("Submit", type_="submit"), - rx.icon_button(FormState.val, icon=rx.icon(tag="add")), + rx.icon_button(FormState.val, icon=rx.icon(tag="plus")), variant="outline", is_attached=True, ), @@ -194,16 +198,16 @@ async def test_submit(driver, form_submit: AppHarness): for _ in range(3): buttons[1].click() - checkbox_input = driver.find_element(By.CLASS_NAME, "chakra-checkbox__control") + checkbox_input = driver.find_element(By.XPATH, "//button[@role='checkbox']") checkbox_input.click() - switch_input = driver.find_element(By.CLASS_NAME, "chakra-switch__track") + switch_input = driver.find_element(By.XPATH, "//button[@role='switch']") switch_input.click() - radio_buttons = driver.find_elements(By.CLASS_NAME, "chakra-radio__control") + radio_buttons = driver.find_elements(By.XPATH, "//button[@role='radio']") radio_buttons[1].click() - textarea_input = driver.find_element(By.CLASS_NAME, "chakra-textarea") + textarea_input = driver.find_element(By.TAG_NAME, "textarea") textarea_input.send_keys("Some", Keys.ENTER, "Text") debounce_input = driver.find_element(by, "debounce_input") @@ -213,7 +217,7 @@ async def test_submit(driver, form_submit: AppHarness): prev_url = driver.current_url - submit_input = driver.find_element(By.CLASS_NAME, "chakra-button") + submit_input = driver.find_element(By.CLASS_NAME, "rt-Button") submit_input.click() async def get_form_data(): diff --git a/integration/test_input.py b/integration/test_input.py index 111124349db..cbb12de242a 100644 --- a/integration/test_input.py +++ b/integration/test_input.py @@ -21,16 +21,16 @@ class State(rx.State): @app.add_page def index(): return rx.fragment( - rx.input( + rx.chakra.input( value=State.router.session.client_token, is_read_only=True, id="token" ), - rx.input( + rx.chakra.input( id="debounce_input_input", on_change=State.set_text, # type: ignore value=State.text, ), - rx.input(value=State.text, id="value_input", is_read_only=True), - rx.input(on_change=State.set_text, id="on_change_input"), # type: ignore + rx.chakra.input(value=State.text, id="value_input", is_read_only=True), + rx.chakra.input(on_change=State.set_text, id="on_change_input"), # type: ignore rx.el.input( value=State.text, id="plain_value_input", diff --git a/integration/test_login_flow.py b/integration/test_login_flow.py index a4272fe39c3..2094593221f 100644 --- a/integration/test_login_flow.py +++ b/integration/test_login_flow.py @@ -28,7 +28,7 @@ def login(self): yield rx.redirect("/") def index(): - return rx.Cond.create( + return rx.cond( State.is_hydrated & State.auth_token, # type: ignore rx.vstack( rx.heading(State.auth_token, id="auth-token"), diff --git a/integration/test_server_side_event.py b/integration/test_server_side_event.py index b8e8d21c00c..f461131a0c7 100644 --- a/integration/test_server_side_event.py +++ b/integration/test_server_side_event.py @@ -38,12 +38,12 @@ def set_value_return_c(self): @app.add_page def index(): return rx.fragment( - rx.input( + rx.chakra.input( id="token", value=SSState.router.session.client_token, is_read_only=True ), - rx.input(default_value="a", id="a"), - rx.input(default_value="b", id="b"), - rx.input(default_value="c", id="c"), + rx.chakra.input(default_value="a", id="a"), + rx.chakra.input(default_value="b", id="b"), + rx.chakra.input(default_value="c", id="c"), rx.button( "Clear Immediate", id="clear_immediate", diff --git a/integration/test_state_inheritance.py b/integration/test_state_inheritance.py index 9ceafa228ea..5aed07ae274 100644 --- a/integration/test_state_inheritance.py +++ b/integration/test_state_inheritance.py @@ -62,7 +62,7 @@ def computed_childvar(self) -> str: def index() -> rx.Component: return rx.vstack( - rx.input( + rx.chakra.input( id="token", value=Base1.router.session.client_token, is_read_only=True ), rx.heading(Base1.computed_mixin, id="base1-computed_mixin"), diff --git a/integration/test_table.py b/integration/test_table.py index 560d70b9413..0a6153c2b89 100644 --- a/integration/test_table.py +++ b/integration/test_table.py @@ -31,13 +31,13 @@ class TableState(rx.State): @app.add_page def index(): return rx.center( - rx.input( + rx.chakra.input( id="token", value=TableState.router.session.client_token, is_read_only=True, ), - rx.table_container( - rx.table( + rx.chakra.table_container( + rx.chakra.table( headers=TableState.headers, rows=TableState.rows, footers=TableState.footers, @@ -52,36 +52,36 @@ def index(): @app.add_page def another(): return rx.center( - rx.table_container( - rx.table( # type: ignore - rx.thead( # type: ignore - rx.tr( # type: ignore - rx.th("Name"), - rx.th("Age"), - rx.th("Location"), + rx.chakra.table_container( + rx.chakra.table( # type: ignore + rx.chakra.thead( # type: ignore + rx.chakra.tr( # type: ignore + rx.chakra.th("Name"), + rx.chakra.th("Age"), + rx.chakra.th("Location"), ) ), - rx.tbody( # type: ignore - rx.tr( # type: ignore - rx.td("John"), - rx.td(30), - rx.td("New York"), + rx.chakra.tbody( # type: ignore + rx.chakra.tr( # type: ignore + rx.chakra.td("John"), + rx.chakra.td(30), + rx.chakra.td("New York"), ), - rx.tr( # type: ignore - rx.td("Jane"), - rx.td(31), - rx.td("San Francisco"), + rx.chakra.tr( # type: ignore + rx.chakra.td("Jane"), + rx.chakra.td(31), + rx.chakra.td("San Francisco"), ), - rx.tr( # type: ignore - rx.td("Joe"), - rx.td(32), - rx.td("Los Angeles"), + rx.chakra.tr( # type: ignore + rx.chakra.td("Joe"), + rx.chakra.td(32), + rx.chakra.td("Los Angeles"), ), ), - rx.tfoot( # type: ignore - rx.tr(rx.td("footer1"), rx.td("footer2"), rx.td("footer3")) # type: ignore + rx.chakra.tfoot( # type: ignore + rx.chakra.tr(rx.chakra.td("footer1"), rx.chakra.td("footer2"), rx.chakra.td("footer3")) # type: ignore ), - rx.table_caption("random caption"), + rx.chakra.table_caption("random caption"), variant="striped", color_scheme="teal", ) diff --git a/integration/test_tailwind.py b/integration/test_tailwind.py index 71079fc0ec8..d5fe764d1d9 100644 --- a/integration/test_tailwind.py +++ b/integration/test_tailwind.py @@ -30,7 +30,7 @@ def TailwindApp( def index(): return rx.el.div( - rx.text(paragraph_text, class_name=paragraph_class_name), + rx.chakra.text(paragraph_text, class_name=paragraph_class_name), rx.el.p(paragraph_text, class_name=paragraph_class_name), rdxt.text(paragraph_text, as_="p", class_name=paragraph_class_name), id="p-content", diff --git a/integration/test_upload.py b/integration/test_upload.py index c832f5acf95..f498c6dd4f4 100644 --- a/integration/test_upload.py +++ b/integration/test_upload.py @@ -41,7 +41,7 @@ def chain_event(self): def index(): return rx.vstack( - rx.input( + rx.chakra.input( value=UploadState.router.session.client_token, is_read_only=True, id="token", @@ -61,7 +61,7 @@ def index(): rx.box( rx.foreach( rx.selected_files, - lambda f: rx.text(f), + lambda f: rx.text(f, as_="p"), ), id="selected_files", ), @@ -91,7 +91,7 @@ def index(): rx.box( rx.foreach( rx.selected_files("secondary"), - lambda f: rx.text(f), + lambda f: rx.text(f, as_="p"), ), id="selected_files_secondary", ), diff --git a/integration/test_var_operations.py b/integration/test_var_operations.py index 4c56c01f507..f0f53ab83eb 100644 --- a/integration/test_var_operations.py +++ b/integration/test_var_operations.py @@ -532,7 +532,7 @@ def index(): VarOperationState.html_str, id="html_str", ), - rx.highlight( + rx.chakra.highlight( "second", query=[VarOperationState.str_var2], ), @@ -542,14 +542,15 @@ def index(): rx.text(rx.Var.range(0, 3).join(","), id="list_join_range4"), rx.box( rx.foreach( - rx.Var.range(0, 2), lambda x: rx.text(VarOperationState.list1[x]) + rx.Var.range(0, 2), + lambda x: rx.text(VarOperationState.list1[x], as_="p"), ), id="foreach_list_arg", ), rx.box( rx.foreach( rx.Var.range(0, 2), - lambda x, ix: rx.text(VarOperationState.list1[ix]), + lambda x, ix: rx.text(VarOperationState.list1[ix], as_="p"), ), id="foreach_list_ix", ), @@ -558,7 +559,7 @@ def index(): rx.Var.create_safe(list(range(0, 3))).to(list[int]), lambda x: rx.foreach( rx.Var.range(x), - lambda y: rx.text(VarOperationState.list1[y]), + lambda y: rx.text(VarOperationState.list1[y], as_="p"), ), ), id="foreach_list_nested", diff --git a/reflex/.templates/web/utils/state.js b/reflex/.templates/web/utils/state.js index 8015bbc1b9a..c4411864e58 100644 --- a/reflex/.templates/web/utils/state.js +++ b/reflex/.templates/web/utils/state.js @@ -594,7 +594,12 @@ export const getRefValue = (ref) => { return; } if (ref.current.type == "checkbox") { - return ref.current.checked; + return ref.current.checked; // chakra + } else if (ref.current.className.includes("rt-CheckboxButton") || ref.current.className.includes("rt-SwitchButton")) { + return ref.current.ariaChecked == "true"; // radix + } else if (ref.current.className.includes("rt-SliderRoot")) { + // find the actual slider + return ref.current.querySelector(".rt-SliderThumb").ariaValueNow; } else { //querySelector(":checked") is needed to get value from radio_group return ref.current.value || (ref.current.querySelector(':checked') && ref.current.querySelector(':checked').value); diff --git a/reflex/__init__.py b/reflex/__init__.py index 87280b13047..d9f638c3488 100644 --- a/reflex/__init__.py +++ b/reflex/__init__.py @@ -15,235 +15,93 @@ from reflex.utils.format import to_snake_case _ALL_COMPONENTS = [ - "Accordion", - "AccordionButton", - "AccordionIcon", - "AccordionItem", - "AccordionPanel", - "Alert", - "AlertDescription", - "AlertDialog", - "AlertDialogBody", - "AlertDialogContent", - "AlertDialogFooter", - "AlertDialogHeader", - "AlertDialogOverlay", - "AlertIcon", - "AlertTitle", - "AspectRatio", - "Audio", - "Avatar", - "AvatarBadge", - "AvatarGroup", - "Badge", - "Box", - "Breadcrumb", - "BreadcrumbItem", - "BreadcrumbLink", - "BreadcrumbSeparator", - "Button", - "ButtonGroup", - "Card", - "CardBody", - "CardFooter", - "CardHeader", - "Center", - "Checkbox", - "CheckboxGroup", - "CircularProgress", - "CircularProgressLabel", - "Circle", - "Code", - "CodeBlock", - "Collapse", - "ColorModeButton", - "ColorModeIcon", - "ColorModeSwitch", - "Component", - "Cond", - "ConnectionBanner", - "ConnectionModal", - "Container", - "DataTable", - "DataEditor", - "DataEditorTheme", - "DatePicker", - "DateTimePicker", - "DebounceInput", - "Divider", - "Drawer", - "DrawerBody", - "DrawerCloseButton", - "DrawerContent", - "DrawerFooter", - "DrawerHeader", - "DrawerOverlay", - "Editable", - "EditableInput", - "EditablePreview", - "EditableTextarea", - "Editor", - "Email", - "Fade", - "Flex", - "Foreach", - "Form", - "FormControl", - "FormErrorMessage", - "FormHelperText", - "FormLabel", - "Fragment", - "Grid", - "GridItem", - "Heading", - "Highlight", - "Hstack", - "Html", - "Icon", - "IconButton", - "Image", - "Input", - "InputGroup", - "InputLeftAddon", - "InputLeftElement", - "InputRightAddon", - "InputRightElement", - "Kbd", - "Link", - "LinkBox", - "LinkOverlay", - "List", - "ListItem", - "Markdown", - "Match", - "Menu", - "MenuButton", - "MenuDivider", - "MenuGroup", - "MenuItem", - "MenuItemOption", - "MenuList", - "MenuOptionGroup", - "Modal", - "ModalBody", - "ModalCloseButton", - "ModalContent", - "ModalFooter", - "ModalHeader", - "ModalOverlay", - "Moment", - "MultiSelect", - "MultiSelectOption", - "NextLink", - "NumberDecrementStepper", - "NumberIncrementStepper", - "NumberInput", - "NumberInputField", - "NumberInputStepper", - "Option", - "OrderedList", - "Password", - "PinInput", - "PinInputField", - "Plotly", - "Popover", - "PopoverAnchor", - "PopoverArrow", - "PopoverBody", - "PopoverCloseButton", - "PopoverContent", - "PopoverFooter", - "PopoverHeader", - "PopoverTrigger", - "Progress", - "Radio", - "RadioGroup", - "RangeSlider", - "RangeSliderFilledTrack", - "RangeSliderThumb", - "RangeSliderTrack", - "ResponsiveGrid", - "ScaleFade", - "Script", - "Select", - "Skeleton", - "SkeletonCircle", - "SkeletonText", - "Slide", - "SlideFade", - "Slider", - "SliderFilledTrack", - "SliderMark", - "SliderThumb", - "SliderTrack", - "Spacer", - "Span", - "Spinner", - "Square", - "Stack", - "Stat", - "StatArrow", - "StatGroup", - "StatHelpText", - "StatLabel", - "StatNumber", - "Step", - "StepDescription", - "StepIcon", - "StepIndicator", - "StepNumber", - "StepSeparator", - "StepStatus", - "StepTitle", - "Stepper", - "Switch", - "Tab", - "TabList", - "TabPanel", - "TabPanels", - "Table", - "TableCaption", - "TableContainer", - "Tabs", - "Tag", - "TagCloseButton", - "TagLabel", - "TagLeftIcon", - "TagRightIcon", - "Tbody", - "Td", - "Text", - "TextArea", - "Tfoot", - "Th", - "Thead", - "TimePicker", - "Tooltip", - "Tr", - "UnorderedList", - "Upload", - "Video", - "VisuallyHidden", - "Vstack", - "Wrap", - "WrapItem", -] - -_ALL_COMPONENTS += [to_snake_case(component) for component in _ALL_COMPONENTS] -_ALL_COMPONENTS += [ - "cancel_upload", - "components", - "color_mode_cond", + # Core + "cond", + "foreach", + "html", + "match", + # "color_mode_cond", + "connection_banner", + "connection_modal", + "debounce_input", + # Base + "fragment", + "image", + "script", + # Responsive "desktop_only", - "mobile_only", - "tablet_only", "mobile_and_tablet", + "mobile_only", "tablet_and_desktop", - "selected_files", + "tablet_only", + # Upload + "cancel_upload", "clear_selected_files", + "selected_files", + "upload", + # Radix + "accordion", + "alert_dialog", + "aspect_ratio", + "avatar", + "badge", + "blockquote", + "box", + "button", + "callout", + "card", + "center", + "checkbox", + "code", + "container", + "context_menu", + "dialog", + "drawer", + "dropdown_menu", + # "bold" (em) + "flex", + "form", + "grid", + "heading", + "hover_card", + "hstack", + # "icon" (lucide) + "icon_button", + "inset", + "kbd", + "link", + "popover", + "progress", + # "quote", + "radio_group", + "scroll_area", + "section", + "select", + "separator", + # "separator" (divider?), + "slider", + "spacer", + # "strong" (bold?) + "switch", + "table", + "tabs", + "text", + "text_area", + # "text_field" (input) + "theme", + "theme_panel", + "tooltip", + "vstack", + # Other + "data_editor", + "data_editor_theme", + "plotly", + "audio", + "video", + "editor", "EditorButtonList", "EditorOptions", - "NoSSRComponent", + "icon", ] _MAPPING = { @@ -252,10 +110,10 @@ "reflex.base": ["base", "Base"], "reflex.compiler": ["compiler"], "reflex.compiler.utils": ["get_asset_path"], - "reflex.components": _ALL_COMPONENTS + ["chakra", "next"], - "reflex.components.component": ["memo"], + "reflex.components": _ALL_COMPONENTS, + "reflex.components.component": ["Component", "NoSSRComponent", "memo"], + "reflex.components.chakra": ["chakra"], "reflex.components.el": ["el"], - "reflex.components.lucide": ["lucide"], "reflex.components.radix": ["radix"], "reflex.components.recharts": ["recharts"], "reflex.components.moment.moment": ["MomentDelta"], diff --git a/reflex/__init__.pyi b/reflex/__init__.pyi index 251e8d34f64..d69fe5012bf 100644 --- a/reflex/__init__.pyi +++ b/reflex/__init__.pyi @@ -7,448 +7,85 @@ from reflex import base as base from reflex.base import Base as Base from reflex import compiler as compiler from reflex.compiler.utils import get_asset_path as get_asset_path -from reflex.components import Accordion as Accordion -from reflex.components import AccordionButton as AccordionButton -from reflex.components import AccordionIcon as AccordionIcon -from reflex.components import AccordionItem as AccordionItem -from reflex.components import AccordionPanel as AccordionPanel -from reflex.components import Alert as Alert -from reflex.components import AlertDescription as AlertDescription -from reflex.components import AlertDialog as AlertDialog -from reflex.components import AlertDialogBody as AlertDialogBody -from reflex.components import AlertDialogContent as AlertDialogContent -from reflex.components import AlertDialogFooter as AlertDialogFooter -from reflex.components import AlertDialogHeader as AlertDialogHeader -from reflex.components import AlertDialogOverlay as AlertDialogOverlay -from reflex.components import AlertIcon as AlertIcon -from reflex.components import AlertTitle as AlertTitle -from reflex.components import AspectRatio as AspectRatio -from reflex.components import Audio as Audio -from reflex.components import Avatar as Avatar -from reflex.components import AvatarBadge as AvatarBadge -from reflex.components import AvatarGroup as AvatarGroup -from reflex.components import Badge as Badge -from reflex.components import Box as Box -from reflex.components import Breadcrumb as Breadcrumb -from reflex.components import BreadcrumbItem as BreadcrumbItem -from reflex.components import BreadcrumbLink as BreadcrumbLink -from reflex.components import BreadcrumbSeparator as BreadcrumbSeparator -from reflex.components import Button as Button -from reflex.components import ButtonGroup as ButtonGroup -from reflex.components import Card as Card -from reflex.components import CardBody as CardBody -from reflex.components import CardFooter as CardFooter -from reflex.components import CardHeader as CardHeader -from reflex.components import Center as Center -from reflex.components import Checkbox as Checkbox -from reflex.components import CheckboxGroup as CheckboxGroup -from reflex.components import CircularProgress as CircularProgress -from reflex.components import CircularProgressLabel as CircularProgressLabel -from reflex.components import Circle as Circle -from reflex.components import Code as Code -from reflex.components import CodeBlock as CodeBlock -from reflex.components import Collapse as Collapse -from reflex.components import ColorModeButton as ColorModeButton -from reflex.components import ColorModeIcon as ColorModeIcon -from reflex.components import ColorModeSwitch as ColorModeSwitch -from reflex.components import Component as Component -from reflex.components import Cond as Cond -from reflex.components import ConnectionBanner as ConnectionBanner -from reflex.components import ConnectionModal as ConnectionModal -from reflex.components import Container as Container -from reflex.components import DataTable as DataTable -from reflex.components import DataEditor as DataEditor -from reflex.components import DataEditorTheme as DataEditorTheme -from reflex.components import DatePicker as DatePicker -from reflex.components import DateTimePicker as DateTimePicker -from reflex.components import DebounceInput as DebounceInput -from reflex.components import Divider as Divider -from reflex.components import Drawer as Drawer -from reflex.components import DrawerBody as DrawerBody -from reflex.components import DrawerCloseButton as DrawerCloseButton -from reflex.components import DrawerContent as DrawerContent -from reflex.components import DrawerFooter as DrawerFooter -from reflex.components import DrawerHeader as DrawerHeader -from reflex.components import DrawerOverlay as DrawerOverlay -from reflex.components import Editable as Editable -from reflex.components import EditableInput as EditableInput -from reflex.components import EditablePreview as EditablePreview -from reflex.components import EditableTextarea as EditableTextarea -from reflex.components import Editor as Editor -from reflex.components import Email as Email -from reflex.components import Fade as Fade -from reflex.components import Flex as Flex -from reflex.components import Foreach as Foreach -from reflex.components import Form as Form -from reflex.components import FormControl as FormControl -from reflex.components import FormErrorMessage as FormErrorMessage -from reflex.components import FormHelperText as FormHelperText -from reflex.components import FormLabel as FormLabel -from reflex.components import Fragment as Fragment -from reflex.components import Grid as Grid -from reflex.components import GridItem as GridItem -from reflex.components import Heading as Heading -from reflex.components import Highlight as Highlight -from reflex.components import Hstack as Hstack -from reflex.components import Html as Html -from reflex.components import Icon as Icon -from reflex.components import IconButton as IconButton -from reflex.components import Image as Image -from reflex.components import Input as Input -from reflex.components import InputGroup as InputGroup -from reflex.components import InputLeftAddon as InputLeftAddon -from reflex.components import InputLeftElement as InputLeftElement -from reflex.components import InputRightAddon as InputRightAddon -from reflex.components import InputRightElement as InputRightElement -from reflex.components import Kbd as Kbd -from reflex.components import Link as Link -from reflex.components import LinkBox as LinkBox -from reflex.components import LinkOverlay as LinkOverlay -from reflex.components import List as List -from reflex.components import ListItem as ListItem -from reflex.components import Markdown as Markdown -from reflex.components import Match as Match -from reflex.components import Menu as Menu -from reflex.components import MenuButton as MenuButton -from reflex.components import MenuDivider as MenuDivider -from reflex.components import MenuGroup as MenuGroup -from reflex.components import MenuItem as MenuItem -from reflex.components import MenuItemOption as MenuItemOption -from reflex.components import MenuList as MenuList -from reflex.components import MenuOptionGroup as MenuOptionGroup -from reflex.components import Modal as Modal -from reflex.components import ModalBody as ModalBody -from reflex.components import ModalCloseButton as ModalCloseButton -from reflex.components import ModalContent as ModalContent -from reflex.components import ModalFooter as ModalFooter -from reflex.components import ModalHeader as ModalHeader -from reflex.components import ModalOverlay as ModalOverlay -from reflex.components import Moment as Moment -from reflex.components import MultiSelect as MultiSelect -from reflex.components import MultiSelectOption as MultiSelectOption -from reflex.components import NextLink as NextLink -from reflex.components import NumberDecrementStepper as NumberDecrementStepper -from reflex.components import NumberIncrementStepper as NumberIncrementStepper -from reflex.components import NumberInput as NumberInput -from reflex.components import NumberInputField as NumberInputField -from reflex.components import NumberInputStepper as NumberInputStepper -from reflex.components import Option as Option -from reflex.components import OrderedList as OrderedList -from reflex.components import Password as Password -from reflex.components import PinInput as PinInput -from reflex.components import PinInputField as PinInputField -from reflex.components import Plotly as Plotly -from reflex.components import Popover as Popover -from reflex.components import PopoverAnchor as PopoverAnchor -from reflex.components import PopoverArrow as PopoverArrow -from reflex.components import PopoverBody as PopoverBody -from reflex.components import PopoverCloseButton as PopoverCloseButton -from reflex.components import PopoverContent as PopoverContent -from reflex.components import PopoverFooter as PopoverFooter -from reflex.components import PopoverHeader as PopoverHeader -from reflex.components import PopoverTrigger as PopoverTrigger -from reflex.components import Progress as Progress -from reflex.components import Radio as Radio -from reflex.components import RadioGroup as RadioGroup -from reflex.components import RangeSlider as RangeSlider -from reflex.components import RangeSliderFilledTrack as RangeSliderFilledTrack -from reflex.components import RangeSliderThumb as RangeSliderThumb -from reflex.components import RangeSliderTrack as RangeSliderTrack -from reflex.components import ResponsiveGrid as ResponsiveGrid -from reflex.components import ScaleFade as ScaleFade -from reflex.components import Script as Script -from reflex.components import Select as Select -from reflex.components import Skeleton as Skeleton -from reflex.components import SkeletonCircle as SkeletonCircle -from reflex.components import SkeletonText as SkeletonText -from reflex.components import Slide as Slide -from reflex.components import SlideFade as SlideFade -from reflex.components import Slider as Slider -from reflex.components import SliderFilledTrack as SliderFilledTrack -from reflex.components import SliderMark as SliderMark -from reflex.components import SliderThumb as SliderThumb -from reflex.components import SliderTrack as SliderTrack -from reflex.components import Spacer as Spacer -from reflex.components import Span as Span -from reflex.components import Spinner as Spinner -from reflex.components import Square as Square -from reflex.components import Stack as Stack -from reflex.components import Stat as Stat -from reflex.components import StatArrow as StatArrow -from reflex.components import StatGroup as StatGroup -from reflex.components import StatHelpText as StatHelpText -from reflex.components import StatLabel as StatLabel -from reflex.components import StatNumber as StatNumber -from reflex.components import Step as Step -from reflex.components import StepDescription as StepDescription -from reflex.components import StepIcon as StepIcon -from reflex.components import StepIndicator as StepIndicator -from reflex.components import StepNumber as StepNumber -from reflex.components import StepSeparator as StepSeparator -from reflex.components import StepStatus as StepStatus -from reflex.components import StepTitle as StepTitle -from reflex.components import Stepper as Stepper -from reflex.components import Switch as Switch -from reflex.components import Tab as Tab -from reflex.components import TabList as TabList -from reflex.components import TabPanel as TabPanel -from reflex.components import TabPanels as TabPanels -from reflex.components import Table as Table -from reflex.components import TableCaption as TableCaption -from reflex.components import TableContainer as TableContainer -from reflex.components import Tabs as Tabs -from reflex.components import Tag as Tag -from reflex.components import TagCloseButton as TagCloseButton -from reflex.components import TagLabel as TagLabel -from reflex.components import TagLeftIcon as TagLeftIcon -from reflex.components import TagRightIcon as TagRightIcon -from reflex.components import Tbody as Tbody -from reflex.components import Td as Td -from reflex.components import Text as Text -from reflex.components import TextArea as TextArea -from reflex.components import Tfoot as Tfoot -from reflex.components import Th as Th -from reflex.components import Thead as Thead -from reflex.components import TimePicker as TimePicker -from reflex.components import Tooltip as Tooltip -from reflex.components import Tr as Tr -from reflex.components import UnorderedList as UnorderedList -from reflex.components import Upload as Upload -from reflex.components import Video as Video -from reflex.components import VisuallyHidden as VisuallyHidden -from reflex.components import Vstack as Vstack -from reflex.components import Wrap as Wrap -from reflex.components import WrapItem as WrapItem +from reflex.components import cond as cond +from reflex.components import foreach as foreach +from reflex.components import html as html +from reflex.components import match as match +from reflex.components import connection_banner as connection_banner +from reflex.components import connection_modal as connection_modal +from reflex.components import debounce_input as debounce_input +from reflex.components import fragment as fragment +from reflex.components import image as image +from reflex.components import script as script +from reflex.components import desktop_only as desktop_only +from reflex.components import mobile_and_tablet as mobile_and_tablet +from reflex.components import mobile_only as mobile_only +from reflex.components import tablet_and_desktop as tablet_and_desktop +from reflex.components import tablet_only as tablet_only +from reflex.components import cancel_upload as cancel_upload +from reflex.components import clear_selected_files as clear_selected_files +from reflex.components import selected_files as selected_files +from reflex.components import upload as upload from reflex.components import accordion as accordion -from reflex.components import accordion_button as accordion_button -from reflex.components import accordion_icon as accordion_icon -from reflex.components import accordion_item as accordion_item -from reflex.components import accordion_panel as accordion_panel -from reflex.components import alert as alert -from reflex.components import alert_description as alert_description from reflex.components import alert_dialog as alert_dialog -from reflex.components import alert_dialog_body as alert_dialog_body -from reflex.components import alert_dialog_content as alert_dialog_content -from reflex.components import alert_dialog_footer as alert_dialog_footer -from reflex.components import alert_dialog_header as alert_dialog_header -from reflex.components import alert_dialog_overlay as alert_dialog_overlay -from reflex.components import alert_icon as alert_icon -from reflex.components import alert_title as alert_title from reflex.components import aspect_ratio as aspect_ratio -from reflex.components import audio as audio from reflex.components import avatar as avatar -from reflex.components import avatar_badge as avatar_badge -from reflex.components import avatar_group as avatar_group from reflex.components import badge as badge +from reflex.components import blockquote as blockquote from reflex.components import box as box -from reflex.components import breadcrumb as breadcrumb -from reflex.components import breadcrumb_item as breadcrumb_item -from reflex.components import breadcrumb_link as breadcrumb_link -from reflex.components import breadcrumb_separator as breadcrumb_separator from reflex.components import button as button -from reflex.components import button_group as button_group +from reflex.components import callout as callout from reflex.components import card as card -from reflex.components import card_body as card_body -from reflex.components import card_footer as card_footer -from reflex.components import card_header as card_header from reflex.components import center as center from reflex.components import checkbox as checkbox -from reflex.components import checkbox_group as checkbox_group -from reflex.components import circular_progress as circular_progress -from reflex.components import circular_progress_label as circular_progress_label -from reflex.components import circle as circle from reflex.components import code as code -from reflex.components import code_block as code_block -from reflex.components import collapse as collapse -from reflex.components import color_mode_button as color_mode_button -from reflex.components import color_mode_icon as color_mode_icon -from reflex.components import color_mode_switch as color_mode_switch -from reflex.components import component as component -from reflex.components import cond as cond -from reflex.components import connection_banner as connection_banner -from reflex.components import connection_modal as connection_modal from reflex.components import container as container -from reflex.components import data_table as data_table -from reflex.components import data_editor as data_editor -from reflex.components import data_editor_theme as data_editor_theme -from reflex.components import date_picker as date_picker -from reflex.components import date_time_picker as date_time_picker -from reflex.components import debounce_input as debounce_input -from reflex.components import divider as divider +from reflex.components import context_menu as context_menu +from reflex.components import dialog as dialog from reflex.components import drawer as drawer -from reflex.components import drawer_body as drawer_body -from reflex.components import drawer_close_button as drawer_close_button -from reflex.components import drawer_content as drawer_content -from reflex.components import drawer_footer as drawer_footer -from reflex.components import drawer_header as drawer_header -from reflex.components import drawer_overlay as drawer_overlay -from reflex.components import editable as editable -from reflex.components import editable_input as editable_input -from reflex.components import editable_preview as editable_preview -from reflex.components import editable_textarea as editable_textarea -from reflex.components import editor as editor -from reflex.components import email as email -from reflex.components import fade as fade +from reflex.components import dropdown_menu as dropdown_menu from reflex.components import flex as flex -from reflex.components import foreach as foreach from reflex.components import form as form -from reflex.components import form_control as form_control -from reflex.components import form_error_message as form_error_message -from reflex.components import form_helper_text as form_helper_text -from reflex.components import form_label as form_label -from reflex.components import fragment as fragment from reflex.components import grid as grid -from reflex.components import grid_item as grid_item from reflex.components import heading as heading -from reflex.components import highlight as highlight +from reflex.components import hover_card as hover_card from reflex.components import hstack as hstack -from reflex.components import html as html -from reflex.components import icon as icon from reflex.components import icon_button as icon_button -from reflex.components import image as image -from reflex.components import input as input -from reflex.components import input_group as input_group -from reflex.components import input_left_addon as input_left_addon -from reflex.components import input_left_element as input_left_element -from reflex.components import input_right_addon as input_right_addon -from reflex.components import input_right_element as input_right_element +from reflex.components import inset as inset from reflex.components import kbd as kbd from reflex.components import link as link -from reflex.components import link_box as link_box -from reflex.components import link_overlay as link_overlay -from reflex.components import list as list -from reflex.components import list_item as list_item -from reflex.components import markdown as markdown -from reflex.components import match as match -from reflex.components import menu as menu -from reflex.components import menu_button as menu_button -from reflex.components import menu_divider as menu_divider -from reflex.components import menu_group as menu_group -from reflex.components import menu_item as menu_item -from reflex.components import menu_item_option as menu_item_option -from reflex.components import menu_list as menu_list -from reflex.components import menu_option_group as menu_option_group -from reflex.components import modal as modal -from reflex.components import modal_body as modal_body -from reflex.components import modal_close_button as modal_close_button -from reflex.components import modal_content as modal_content -from reflex.components import modal_footer as modal_footer -from reflex.components import modal_header as modal_header -from reflex.components import modal_overlay as modal_overlay -from reflex.components import moment as moment -from reflex.components import multi_select as multi_select -from reflex.components import multi_select_option as multi_select_option -from reflex.components import next_link as next_link -from reflex.components import number_decrement_stepper as number_decrement_stepper -from reflex.components import number_increment_stepper as number_increment_stepper -from reflex.components import number_input as number_input -from reflex.components import number_input_field as number_input_field -from reflex.components import number_input_stepper as number_input_stepper -from reflex.components import option as option -from reflex.components import ordered_list as ordered_list -from reflex.components import password as password -from reflex.components import pin_input as pin_input -from reflex.components import pin_input_field as pin_input_field -from reflex.components import plotly as plotly from reflex.components import popover as popover -from reflex.components import popover_anchor as popover_anchor -from reflex.components import popover_arrow as popover_arrow -from reflex.components import popover_body as popover_body -from reflex.components import popover_close_button as popover_close_button -from reflex.components import popover_content as popover_content -from reflex.components import popover_footer as popover_footer -from reflex.components import popover_header as popover_header -from reflex.components import popover_trigger as popover_trigger from reflex.components import progress as progress -from reflex.components import radio as radio from reflex.components import radio_group as radio_group -from reflex.components import range_slider as range_slider -from reflex.components import range_slider_filled_track as range_slider_filled_track -from reflex.components import range_slider_thumb as range_slider_thumb -from reflex.components import range_slider_track as range_slider_track -from reflex.components import responsive_grid as responsive_grid -from reflex.components import scale_fade as scale_fade -from reflex.components import script as script +from reflex.components import scroll_area as scroll_area +from reflex.components import section as section from reflex.components import select as select -from reflex.components import skeleton as skeleton -from reflex.components import skeleton_circle as skeleton_circle -from reflex.components import skeleton_text as skeleton_text -from reflex.components import slide as slide -from reflex.components import slide_fade as slide_fade +from reflex.components import separator as separator from reflex.components import slider as slider -from reflex.components import slider_filled_track as slider_filled_track -from reflex.components import slider_mark as slider_mark -from reflex.components import slider_thumb as slider_thumb -from reflex.components import slider_track as slider_track from reflex.components import spacer as spacer -from reflex.components import span as span -from reflex.components import spinner as spinner -from reflex.components import square as square -from reflex.components import stack as stack -from reflex.components import stat as stat -from reflex.components import stat_arrow as stat_arrow -from reflex.components import stat_group as stat_group -from reflex.components import stat_help_text as stat_help_text -from reflex.components import stat_label as stat_label -from reflex.components import stat_number as stat_number -from reflex.components import step as step -from reflex.components import step_description as step_description -from reflex.components import step_icon as step_icon -from reflex.components import step_indicator as step_indicator -from reflex.components import step_number as step_number -from reflex.components import step_separator as step_separator -from reflex.components import step_status as step_status -from reflex.components import step_title as step_title -from reflex.components import stepper as stepper from reflex.components import switch as switch -from reflex.components import tab as tab -from reflex.components import tab_list as tab_list -from reflex.components import tab_panel as tab_panel -from reflex.components import tab_panels as tab_panels from reflex.components import table as table -from reflex.components import table_caption as table_caption -from reflex.components import table_container as table_container from reflex.components import tabs as tabs -from reflex.components import tag as tag -from reflex.components import tag_close_button as tag_close_button -from reflex.components import tag_label as tag_label -from reflex.components import tag_left_icon as tag_left_icon -from reflex.components import tag_right_icon as tag_right_icon -from reflex.components import tbody as tbody -from reflex.components import td as td from reflex.components import text as text from reflex.components import text_area as text_area -from reflex.components import tfoot as tfoot -from reflex.components import th as th -from reflex.components import thead as thead -from reflex.components import time_picker as time_picker +from reflex.components import theme as theme +from reflex.components import theme_panel as theme_panel from reflex.components import tooltip as tooltip -from reflex.components import tr as tr -from reflex.components import unordered_list as unordered_list -from reflex.components import upload as upload -from reflex.components import video as video -from reflex.components import visually_hidden as visually_hidden from reflex.components import vstack as vstack -from reflex.components import wrap as wrap -from reflex.components import wrap_item as wrap_item -from reflex.components import cancel_upload as cancel_upload -from reflex import components as components -from reflex.components import color_mode_cond as color_mode_cond -from reflex.components import desktop_only as desktop_only -from reflex.components import mobile_only as mobile_only -from reflex.components import tablet_only as tablet_only -from reflex.components import mobile_and_tablet as mobile_and_tablet -from reflex.components import tablet_and_desktop as tablet_and_desktop -from reflex.components import selected_files as selected_files -from reflex.components import clear_selected_files as clear_selected_files +from reflex.components import data_editor as data_editor +from reflex.components import data_editor_theme as data_editor_theme +from reflex.components import plotly as plotly +from reflex.components import audio as audio +from reflex.components import video as video +from reflex.components import editor as editor from reflex.components import EditorButtonList as EditorButtonList from reflex.components import EditorOptions as EditorOptions -from reflex.components import NoSSRComponent as NoSSRComponent -from reflex.components import chakra as chakra -from reflex.components import next as next +from reflex.components import icon as icon +from reflex.components.component import Component as Component +from reflex.components.component import NoSSRComponent as NoSSRComponent from reflex.components.component import memo as memo +from reflex.components import chakra as chakra from reflex.components import el as el -from reflex.components import lucide as lucide from reflex.components import radix as radix from reflex.components import recharts as recharts from reflex.components.moment.moment import MomentDelta as MomentDelta diff --git a/reflex/components/__init__.py b/reflex/components/__init__.py index 8dbf5c40696..872a267d37d 100644 --- a/reflex/components/__init__.py +++ b/reflex/components/__init__.py @@ -2,15 +2,16 @@ from __future__ import annotations from .base import Fragment, Script, fragment, script -from .chakra import * from .component import Component from .component import NoSSRComponent as NoSSRComponent from .core import * from .datadisplay import * from .gridjs import * +from .lucide import icon from .markdown import * from .moment import * -from .next import NextLink, next_link +from .next import NextLink, image, next_link from .plotly import * +from .radix import * from .react_player import * from .suneditor import * diff --git a/reflex/components/chakra/__init__.py b/reflex/components/chakra/__init__.py index 69712685449..f1b2e74406e 100644 --- a/reflex/components/chakra/__init__.py +++ b/reflex/components/chakra/__init__.py @@ -83,7 +83,6 @@ heading = Heading.create highlight = Highlight.create hstack = Hstack.create -html = Html.create icon = Icon.create icon_button = IconButton.create image = Image.create diff --git a/reflex/components/chakra/layout/__init__.py b/reflex/components/chakra/layout/__init__.py index 1f49d98eac8..13c28fdd49e 100644 --- a/reflex/components/chakra/layout/__init__.py +++ b/reflex/components/chakra/layout/__init__.py @@ -7,7 +7,6 @@ from .container import Container from .flex import Flex from .grid import Grid, GridItem, ResponsiveGrid -from .html import Html from .spacer import Spacer from .stack import Hstack, Stack, Vstack from .wrap import Wrap, WrapItem diff --git a/reflex/components/core/__init__.py b/reflex/components/core/__init__.py index 4df12bef48b..122eeacfe0c 100644 --- a/reflex/components/core/__init__.py +++ b/reflex/components/core/__init__.py @@ -5,6 +5,7 @@ from .cond import Cond, cond from .debounce import DebounceInput from .foreach import Foreach +from .html import Html from .match import Match from .responsive import ( desktop_only, @@ -19,5 +20,6 @@ connection_modal = ConnectionModal.create debounce_input = DebounceInput.create foreach = Foreach.create +html = Html.create match = Match.create upload = Upload.create diff --git a/reflex/components/chakra/layout/html.py b/reflex/components/core/html.py similarity index 92% rename from reflex/components/chakra/layout/html.py rename to reflex/components/core/html.py index 1069bc7e542..987d216a3d8 100644 --- a/reflex/components/chakra/layout/html.py +++ b/reflex/components/core/html.py @@ -1,11 +1,11 @@ """A html component.""" from typing import Dict -from reflex.components.chakra.layout.box import Box +from reflex.components.el.elements.typography import Div from reflex.vars import Var -class Html(Box): +class Html(Div): """Render the html. Returns: diff --git a/reflex/components/chakra/layout/html.pyi b/reflex/components/core/html.pyi similarity index 50% rename from reflex/components/chakra/layout/html.pyi rename to reflex/components/core/html.pyi index ba501630763..48d6e37ed5b 100644 --- a/reflex/components/chakra/layout/html.pyi +++ b/reflex/components/core/html.pyi @@ -1,4 +1,4 @@ -"""Stub file for reflex/components/chakra/layout/html.py""" +"""Stub file for reflex/components/core/html.py""" # ------------------- DO NOT EDIT ---------------------- # This file was generated by `scripts/pyi_generator.py`! # ------------------------------------------------------ @@ -8,10 +8,10 @@ from reflex.vars import Var, BaseVar, ComputedVar from reflex.event import EventChain, EventHandler, EventSpec from reflex.style import Style from typing import Dict -from reflex.components.chakra.layout.box import Box +from reflex.components.el.elements.typography import Div from reflex.vars import Var -class Html(Box): +class Html(Div): @overload @classmethod def create( # type: ignore @@ -20,9 +20,49 @@ class Html(Box): dangerouslySetInnerHTML: Optional[ Union[Var[Dict[str, str]], Dict[str, str]] ] = None, - element: Optional[Union[Var[str], str]] = None, - src: Optional[Union[Var[str], str]] = None, - alt: Optional[Union[Var[str], str]] = None, + access_key: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + auto_capitalize: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + content_editable: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + context_menu: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + dir: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None, + draggable: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + enter_key_hint: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + hidden: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + input_mode: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + item_prop: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + lang: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None, + role: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None, + slot: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None, + spell_check: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + tab_index: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + title: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + translate: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, style: Optional[Style] = None, key: Optional[Any] = None, id: Optional[Any] = None, @@ -82,9 +122,23 @@ class Html(Box): Args: *children: The children of the component. dangerouslySetInnerHTML: The HTML to render. - element: The type element to render. You can specify an image, video, or any other HTML element such as iframe. - src: The source of the content. - alt: The alt text of the content. + access_key: Provides a hint for generating a keyboard shortcut for the current element. + auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user. + content_editable: Indicates whether the element's content is editable. + context_menu: Defines the ID of a element which will serve as the element's context menu. + dir: Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left) + draggable: Defines whether the element can be dragged. + enter_key_hint: Hints what media types the media element is able to play. + hidden: Defines whether the element is hidden. + input_mode: Defines the type of the element. + item_prop: Defines the name of the element for metadata purposes. + lang: Defines the language used in the element. + role: Defines the role of the element. + slot: Assigns a slot in a shadow DOM shadow tree to an element. + spell_check: Defines whether the element may be checked for spelling errors. + tab_index: Defines the position of the current element in the tabbing order. + title: Defines a tooltip for the element. + translate: Specifies whether the content of an element should be translated or not. style: The style of the component. key: A unique key for the component. id: The id for the component. diff --git a/tests/components/forms/test_debounce.py b/tests/components/forms/test_debounce.py index 97cfa86484e..b4fca6566f5 100644 --- a/tests/components/forms/test_debounce.py +++ b/tests/components/forms/test_debounce.py @@ -43,7 +43,7 @@ def on_change(self, v: str): def test_render_child_props(): """DebounceInput should render props from child component.""" tag = rx.debounce_input( - rx.input( + rx.chakra.input( foo="bar", baz="quuc", value="real", @@ -71,7 +71,7 @@ def test_render_child_props_recursive(): rx.debounce_input( rx.debounce_input( rx.debounce_input( - rx.input( + rx.chakra.input( foo="bar", baz="quuc", value="real", @@ -103,7 +103,7 @@ def test_render_child_props_recursive(): def test_full_control_implicit_debounce(): """DebounceInput is used when value and on_change are used together.""" - tag = rx.input( + tag = rx.chakra.input( value=S.value, on_change=S.on_change, )._render() diff --git a/tests/components/forms/test_uploads.py b/tests/components/forms/test_uploads.py index c3ca14cfb9f..5bf21221927 100644 --- a/tests/components/forms/test_uploads.py +++ b/tests/components/forms/test_uploads.py @@ -72,10 +72,10 @@ def test_upload_component_render(upload_component): assert input["name"] == "Input" assert input["props"] == ["type={`file`}", "{...getInputProps()}"] - assert button["name"] == "Button" + assert button["name"] == "RadixThemesButton" assert button["children"][0]["contents"] == "{`select file`}" - assert text["name"] == "Text" + assert text["name"] == "RadixThemesText" assert ( text["children"][0]["contents"] == "{`Drag and drop files here or click to select files`}" diff --git a/tests/components/layout/test_match.py b/tests/components/layout/test_match.py index 233e9c64368..4a1783024bd 100644 --- a/tests/components/layout/test_match.py +++ b/tests/components/layout/test_match.py @@ -43,7 +43,7 @@ def test_match_components(): assert match_cases[0][0]._var_name == "1" assert match_cases[0][0]._var_type == int first_return_value_render = match_cases[0][1].render() - assert first_return_value_render["name"] == "Text" + assert first_return_value_render["name"] == "RadixThemesText" assert first_return_value_render["children"][0]["contents"] == "{`first value`}" assert match_cases[1][0]._var_name == "2" @@ -51,36 +51,36 @@ def test_match_components(): assert match_cases[1][1]._var_name == "3" assert match_cases[1][1]._var_type == int second_return_value_render = match_cases[1][2].render() - assert second_return_value_render["name"] == "Text" + assert second_return_value_render["name"] == "RadixThemesText" assert second_return_value_render["children"][0]["contents"] == "{`second value`}" assert match_cases[2][0]._var_name == "[1, 2]" assert match_cases[2][0]._var_type == list third_return_value_render = match_cases[2][1].render() - assert third_return_value_render["name"] == "Text" + assert third_return_value_render["name"] == "RadixThemesText" assert third_return_value_render["children"][0]["contents"] == "{`third value`}" assert match_cases[3][0]._var_name == "random" assert match_cases[3][0]._var_type == str fourth_return_value_render = match_cases[3][1].render() - assert fourth_return_value_render["name"] == "Text" + assert fourth_return_value_render["name"] == "RadixThemesText" assert fourth_return_value_render["children"][0]["contents"] == "{`fourth value`}" assert match_cases[4][0]._var_name == '{"foo": "bar"}' assert match_cases[4][0]._var_type == dict fifth_return_value_render = match_cases[4][1].render() - assert fifth_return_value_render["name"] == "Text" + assert fifth_return_value_render["name"] == "RadixThemesText" assert fifth_return_value_render["children"][0]["contents"] == "{`fifth value`}" assert match_cases[5][0]._var_name == "(match_state.num + 1)" assert match_cases[5][0]._var_type == int fifth_return_value_render = match_cases[5][1].render() - assert fifth_return_value_render["name"] == "Text" + assert fifth_return_value_render["name"] == "RadixThemesText" assert fifth_return_value_render["children"][0]["contents"] == "{`sixth value`}" default = match_child["default"].render() - assert default["name"] == "Text" + assert default["name"] == "RadixThemesText" assert default["children"][0]["contents"] == "{`default value`}" @@ -143,6 +143,8 @@ def test_match_on_component_without_default(): """Test that matching cases with return values as components returns a Fragment as the default case if not provided. """ + from reflex.components.base.fragment import Fragment + match_case_tuples = ( (1, rx.text("first value")), (2, 3, rx.text("second value")), @@ -151,7 +153,7 @@ def test_match_on_component_without_default(): match_comp = Match.create(MatchState.value, *match_case_tuples) default = match_comp.render()["children"][0]["default"] # type: ignore - assert isinstance(default, rx.Fragment) + assert isinstance(default, Fragment) def test_match_on_var_no_default(): @@ -258,8 +260,8 @@ def test_match_case_tuple_elements(match_case): ([1, 2], rx.text("third value")), rx.text("default value"), ), - "Match cases should have the same return types. Case 3 with return value ` {`first value`} ` " - "of type is not ", + "Match cases should have the same return types. Case 3 with return value ` {`first value`} ` " + "of type is not ", ), ], ) diff --git a/tests/components/test_component.py b/tests/components/test_component.py index fb94799793f..50243e51be7 100644 --- a/tests/components/test_component.py +++ b/tests/components/test_component.py @@ -488,12 +488,14 @@ def my_component(width: Var[int], color: Var[str]): color=color, ) + from reflex.components.radix.themes.typography.text import Text + ccomponent = my_component( rx.text("child"), width=Var.create(1), color=Var.create("red") ) assert isinstance(ccomponent, CustomComponent) assert len(ccomponent.children) == 1 - assert isinstance(ccomponent.children[0], rx.Text) + assert isinstance(ccomponent.children[0], Text) component = ccomponent.get_component(ccomponent) assert isinstance(component, Box) @@ -595,7 +597,7 @@ def test_unsupported_parent_components(component5): component5: component with valid parent of "Text" only """ with pytest.raises(ValueError) as err: - rx.Box(children=[component5.create()]) + rx.box(component5.create()) assert ( err.value.args[0] == f"The component `{component5.__name__}` can only be a child of the components: `{component5._valid_parents[0]}`. Got `Box` instead." @@ -625,10 +627,10 @@ def test_component_with_only_valid_children(fixture, request): @pytest.mark.parametrize( "component,rendered", [ - (rx.text("hi"), "\n {`hi`}\n"), + (rx.text("hi"), "\n {`hi`}\n"), ( - rx.box(rx.heading("test", size="md")), - "\n \n {`test`}\n\n", + rx.box(rx.chakra.heading("test", size="md")), + "\n \n {`test`}\n\n", ), ], ) diff --git a/tests/components/typography/test_markdown.py b/tests/components/typography/test_markdown.py index 69c8e4a0c9c..3ce9a830c6a 100644 --- a/tests/components/typography/test_markdown.py +++ b/tests/components/typography/test_markdown.py @@ -37,7 +37,7 @@ def test_set_component_map(): """Test setting the component map.""" component_map = { "h1": lambda value: rx.box( - rx.heading(value, as_="h1", size="2xl"), padding="1em" + rx.chakra.heading(value, as_="h1", size="2xl"), padding="1em" ), "p": lambda value: rx.box(rx.text(value), padding="1em"), } diff --git a/tests/test_app.py b/tests/test_app.py index b9a0184343d..f6581e62615 100644 --- a/tests/test_app.py +++ b/tests/test_app.py @@ -15,7 +15,7 @@ from starlette_admin.contrib.sqla.admin import Admin from starlette_admin.contrib.sqla.view import ModelView -import reflex.components.radix.themes as rdxt +import reflex as rx from reflex import AdminDash, constants from reflex.app import ( App, @@ -24,7 +24,8 @@ process, upload, ) -from reflex.components import Box, Component, Cond, Fragment, Text +from reflex.components import Component, Cond, Fragment +from reflex.components.radix.themes.typography.text import Text from reflex.event import Event from reflex.middleware import HydrateMiddleware from reflex.model import Model @@ -58,7 +59,7 @@ def index_page(): """ def index(): - return Box.create("Index") + return rx.box("Index") return index @@ -72,7 +73,7 @@ def about_page(): """ def about(): - return Box.create("About") + return rx.box("About") return about @@ -1172,7 +1173,7 @@ def test_overlay_component( exp_page_child, ) - app.add_page(Box.create("Index"), route="/test") + app.add_page(rx.box("Index"), route="/test") page = app.pages["test"] if exp_page_child is not None: assert len(page.children) == 3 @@ -1212,7 +1213,7 @@ def test_app_wrap_compile_theme(compilable_app): compilable_app: compilable_app fixture. """ app, web_dir = compilable_app - app.theme = rdxt.theme(accent_color="plum") + app.theme = rx.theme(accent_color="plum") app.compile_() app_js_contents = (web_dir / "pages" / "_app.js").read_text() app_js_lines = [ @@ -1245,13 +1246,13 @@ class Fragment1(Component): tag = "Fragment1" def _get_app_wrap_components(self) -> dict[tuple[int, str], Component]: - return {(99, "Box"): Box.create()} + return {(99, "Box"): rx.chakra.box()} class Fragment2(Component): tag = "Fragment2" def _get_app_wrap_components(self) -> dict[tuple[int, str], Component]: - return {(50, "Text"): Text.create()} + return {(50, "Text"): rx.chakra.text()} class Fragment3(Component): tag = "Fragment3"