From fc6eff71041b122a049a03e7d90e8bc2ede34656 Mon Sep 17 00:00:00 2001 From: Masen Furer Date: Mon, 12 Feb 2024 13:32:23 -0800 Subject: [PATCH] Convert templates to use `rx.chakra` where needed (#2555) * Convert templates to use `rx.chakra` where needed * reflex_init_in_docker_test: run test on PR into reflex-0.4.0 This is why we didn't catch the template issues earlier --- .../workflows/reflex_init_in_docker_test.yml | 3 +- reflex/.templates/apps/demo/code/demo.py | 30 ++-- .../apps/demo/code/pages/chatapp.py | 4 +- .../apps/demo/code/pages/datatable.py | 54 ++++---- .../.templates/apps/demo/code/pages/forms.py | 128 +++++++++--------- .../apps/demo/code/pages/graphing.py | 70 +++++----- .../.templates/apps/demo/code/pages/home.py | 24 ++-- reflex/.templates/apps/demo/code/sidebar.py | 46 +++---- reflex/.templates/apps/demo/code/styles.py | 4 +- .../apps/demo/code/webui/components/chat.py | 38 +++--- .../apps/demo/code/webui/components/modal.py | 22 +-- .../apps/demo/code/webui/components/navbar.py | 46 ++++--- .../demo/code/webui/components/sidebar.py | 26 ++-- .../.templates/apps/demo/code/webui/styles.py | 18 +-- .../apps/sidebar/code/components/sidebar.py | 40 +++--- .../apps/sidebar/code/pages/dashboard.py | 10 +- .../apps/sidebar/code/pages/settings.py | 10 +- reflex/.templates/apps/sidebar/code/styles.py | 4 +- .../apps/sidebar/code/templates/template.py | 34 +++-- 19 files changed, 311 insertions(+), 300 deletions(-) diff --git a/.github/workflows/reflex_init_in_docker_test.yml b/.github/workflows/reflex_init_in_docker_test.yml index bbe45c6c1..0e458f233 100644 --- a/.github/workflows/reflex_init_in_docker_test.yml +++ b/.github/workflows/reflex_init_in_docker_test.yml @@ -6,8 +6,7 @@ on: paths-ignore: - '**/*.md' pull_request: - branches: - - main + branches: [ "main", "reflex-0.4.0" ] paths-ignore: - '**/*.md' diff --git a/reflex/.templates/apps/demo/code/demo.py b/reflex/.templates/apps/demo/code/demo.py index b502b2816..7031f09d0 100644 --- a/reflex/.templates/apps/demo/code/demo.py +++ b/reflex/.templates/apps/demo/code/demo.py @@ -25,23 +25,27 @@ def template(main_content: Callable[[], rx.Component]) -> rx.Component: Returns: rx.Component: The template for each page of the app. """ - menu_button = rx.box( - rx.menu( - rx.menu_button( - rx.icon( + menu_button = rx.chakra.box( + rx.chakra.menu( + rx.chakra.menu_button( + rx.chakra.icon( tag="hamburger", size="4em", color=text_color, ), ), - rx.menu_list( - rx.menu_item(rx.link("Home", href="/", width="100%")), - rx.menu_divider(), - rx.menu_item( - rx.link("About", href="https://github.com/reflex-dev", width="100%") + rx.chakra.menu_list( + rx.chakra.menu_item(rx.chakra.link("Home", href="/", width="100%")), + rx.chakra.menu_divider(), + rx.chakra.menu_item( + rx.chakra.link( + "About", href="https://github.com/reflex-dev", width="100%" + ) ), - rx.menu_item( - rx.link("Contact", href="mailto:founders@=reflex.dev", width="100%") + rx.chakra.menu_item( + rx.chakra.link( + "Contact", href="mailto:founders@=reflex.dev", width="100%" + ) ), ), ), @@ -51,10 +55,10 @@ def template(main_content: Callable[[], rx.Component]) -> rx.Component: z_index="500", ) - return rx.hstack( + return rx.chakra.hstack( sidebar(), main_content(), - rx.spacer(), + rx.chakra.spacer(), menu_button, align_items="flex-start", transition="left 0.5s, width 0.5s", diff --git a/reflex/.templates/apps/demo/code/pages/chatapp.py b/reflex/.templates/apps/demo/code/pages/chatapp.py index 5f06cc15d..acd11a599 100644 --- a/reflex/.templates/apps/demo/code/pages/chatapp.py +++ b/reflex/.templates/apps/demo/code/pages/chatapp.py @@ -13,8 +13,8 @@ def chatapp_page() -> rx.Component: Returns: The UI for the main app. """ - return rx.box( - rx.vstack( + return rx.chakra.box( + rx.chakra.vstack( navbar(), chat.chat(), chat.action_bar(), diff --git a/reflex/.templates/apps/demo/code/pages/datatable.py b/reflex/.templates/apps/demo/code/pages/datatable.py index 64bdea0eb..4cc9d39ea 100644 --- a/reflex/.templates/apps/demo/code/pages/datatable.py +++ b/reflex/.templates/apps/demo/code/pages/datatable.py @@ -129,10 +129,10 @@ class DataTableState(State): ] -code_show = """rx.hstack( - rx.divider(orientation="vertical", height="100vh", border="solid black 1px"), - rx.vstack( - rx.box( +code_show = """rx.chakra.hstack( + rx.chakra.divider(orientation="vertical", height="100vh", border="solid black 1px"), + rx.chakra.vstack( + rx.chakra.box( rx.data_editor( columns=DataTableState.cols, data=DataTableState.data, @@ -147,7 +147,7 @@ code_show = """rx.hstack( height="80vh", ), ), - rx.spacer(), + rx.chakra.spacer(), height="100vh", spacing="25", ), @@ -270,15 +270,15 @@ def datatable_page() -> rx.Component: Returns: rx.Component: The UI for the settings page. """ - return rx.box( - rx.vstack( - rx.heading( + return rx.chakra.box( + rx.chakra.vstack( + rx.chakra.heading( "Data Table Demo", font_size="3em", ), - rx.hstack( - rx.vstack( - rx.box( + rx.chakra.hstack( + rx.chakra.vstack( + rx.chakra.box( rx.data_editor( columns=DataTableState.cols, data=DataTableState.data, @@ -292,21 +292,21 @@ def datatable_page() -> rx.Component: width="80vw", ), ), - rx.spacer(), + rx.chakra.spacer(), spacing="25", ), ), - rx.tabs( - rx.tab_list( - rx.tab("Code", style=tab_style), - rx.tab("Data", style=tab_style), - rx.tab("State", style=tab_style), - rx.tab("Styling", style=tab_style), + rx.chakra.tabs( + rx.chakra.tab_list( + rx.chakra.tab("Code", style=tab_style), + rx.chakra.tab("Data", style=tab_style), + rx.chakra.tab("State", style=tab_style), + rx.chakra.tab("Styling", style=tab_style), padding_x=0, ), - rx.tab_panels( - rx.tab_panel( - rx.code_block( + rx.chakra.tab_panels( + rx.chakra.tab_panel( + rx.chakra.code_block( code_show, language="python", show_line_numbers=True, @@ -315,8 +315,8 @@ def datatable_page() -> rx.Component: padding_x=0, padding_y=".25em", ), - rx.tab_panel( - rx.code_block( + rx.chakra.tab_panel( + rx.chakra.code_block( data_show, language="python", show_line_numbers=True, @@ -325,8 +325,8 @@ def datatable_page() -> rx.Component: padding_x=0, padding_y=".25em", ), - rx.tab_panel( - rx.code_block( + rx.chakra.tab_panel( + rx.chakra.code_block( state_show, language="python", show_line_numbers=True, @@ -335,8 +335,8 @@ def datatable_page() -> rx.Component: padding_x=0, padding_y=".25em", ), - rx.tab_panel( - rx.code_block( + rx.chakra.tab_panel( + rx.chakra.code_block( darkTheme_show, language="python", show_line_numbers=True, diff --git a/reflex/.templates/apps/demo/code/pages/forms.py b/reflex/.templates/apps/demo/code/pages/forms.py index 904f003cd..5b39ba5c1 100644 --- a/reflex/.templates/apps/demo/code/pages/forms.py +++ b/reflex/.templates/apps/demo/code/pages/forms.py @@ -4,21 +4,21 @@ import reflex as rx from ..states.form_state import FormState, UploadState from ..styles import * -forms_1_code = """rx.vstack( - rx.form( - rx.vstack( - rx.input( +forms_1_code = """rx.chakra.vstack( + rx.chakra.form( + rx.chakra.vstack( + rx.chakra.input( placeholder="First Name", id="first_name", ), - rx.input( + rx.chakra.input( placeholder="Last Name", id="last_name" ), - rx.hstack( - rx.checkbox("Checked", id="check"), - rx.switch("Switched", id="switch"), + rx.chakra.hstack( + rx.chakra.checkbox("Checked", id="check"), + rx.chakra.switch("Switched", id="switch"), ), - rx.button("Submit", + rx.chakra.button("Submit", type_="submit", bg="#ecfdf5", color="#047857", @@ -27,9 +27,9 @@ forms_1_code = """rx.vstack( ), on_submit=FormState.handle_submit, ), - rx.divider(), - rx.heading("Results"), - rx.text(FormState.form_data.to_string()), + rx.chakra.divider(), + rx.chakra.heading("Results"), + rx.chakra.text(FormState.form_data.to_string()), width="100%", )""" @@ -44,35 +44,35 @@ forms_1_state = """class FormState(rx.State): self.form_data = form_data""" -forms_2_code = """rx.vstack( +forms_2_code = """rx.chakra.vstack( rx.upload( - rx.vstack( - rx.button( + rx.chakra.vstack( + rx.chakra.button( "Select File", color=color, bg="white", border=f"1px solid {color}", ), - rx.text( + rx.chakra.text( "Drag and drop files here or click to select files" ), ), border=f"1px dotted {color}", padding="5em", ), - rx.hstack(rx.foreach(rx.selected_files, rx.text)), - rx.button( + rx.chakra.hstack(rx.foreach(rx.selected_files, rx.chakra.text)), + rx.chakra.button( "Upload", on_click=lambda: UploadState.handle_upload( rx.upload_files() ), ), - rx.button( + rx.chakra.button( "Clear", on_click=rx.clear_selected_files, ), rx.foreach( - UploadState.img, lambda img: rx.image(src=img, width="20%", height="auto",) + UploadState.img, lambda img: rx.chakra.image(src=img, width="20%", height="auto",) ), padding="5em", width="100%", @@ -109,25 +109,25 @@ def forms_page() -> rx.Component: Returns: rx.Component: The UI for the settings page. """ - return rx.box( - rx.vstack( - rx.heading( + return rx.chakra.box( + rx.chakra.vstack( + rx.chakra.heading( "Forms Demo", font_size="3em", ), - rx.vstack( - rx.form( - rx.vstack( - rx.input( + rx.chakra.vstack( + rx.chakra.form( + rx.chakra.vstack( + rx.chakra.input( placeholder="First Name", id="first_name", ), - rx.input(placeholder="Last Name", id="last_name"), - rx.hstack( - rx.checkbox("Checked", id="check"), - rx.switch("Switched", id="switch"), + rx.chakra.input(placeholder="Last Name", id="last_name"), + rx.chakra.hstack( + rx.chakra.checkbox("Checked", id="check"), + rx.chakra.switch("Switched", id="switch"), ), - rx.button( + rx.chakra.button( "Submit", type_="submit", bg="#ecfdf5", @@ -137,20 +137,20 @@ def forms_page() -> rx.Component: ), on_submit=FormState.handle_submit, ), - rx.divider(), - rx.heading("Results"), - rx.text(FormState.form_data.to_string()), + rx.chakra.divider(), + rx.chakra.heading("Results"), + rx.chakra.text(FormState.form_data.to_string()), width="100%", ), - rx.tabs( - rx.tab_list( - rx.tab("Code", style=tab_style), - rx.tab("State", style=tab_style), + rx.chakra.tabs( + rx.chakra.tab_list( + rx.chakra.tab("Code", style=tab_style), + rx.chakra.tab("State", style=tab_style), padding_x=0, ), - rx.tab_panels( - rx.tab_panel( - rx.code_block( + rx.chakra.tab_panels( + rx.chakra.tab_panel( + rx.chakra.code_block( forms_1_code, language="python", show_line_numbers=True, @@ -159,8 +159,8 @@ def forms_page() -> rx.Component: padding_x=0, padding_y=".25em", ), - rx.tab_panel( - rx.code_block( + rx.chakra.tab_panel( + rx.chakra.code_block( forms_1_state, language="python", show_line_numbers=True, @@ -177,34 +177,36 @@ def forms_page() -> rx.Component: width="100%", padding_top=".5em", ), - rx.heading("Upload Example", font_size="3em"), - rx.text("Try uploading some images and see how they look."), - rx.vstack( + rx.chakra.heading("Upload Example", font_size="3em"), + rx.chakra.text("Try uploading some images and see how they look."), + rx.chakra.vstack( rx.upload( - rx.vstack( - rx.button( + rx.chakra.vstack( + rx.chakra.button( "Select File", color=color, bg="white", border=f"1px solid {color}", ), - rx.text("Drag and drop files here or click to select files"), + rx.chakra.text( + "Drag and drop files here or click to select files" + ), ), border=f"1px dotted {color}", padding="5em", ), - rx.hstack(rx.foreach(rx.selected_files, rx.text)), - rx.button( + rx.chakra.hstack(rx.foreach(rx.selected_files, rx.chakra.text)), + rx.chakra.button( "Upload", on_click=lambda: UploadState.handle_upload(rx.upload_files()), ), - rx.button( + rx.chakra.button( "Clear", on_click=rx.clear_selected_files, ), rx.foreach( UploadState.img, - lambda img: rx.image( + lambda img: rx.chakra.image( src=img, width="20%", height="auto", @@ -213,15 +215,15 @@ def forms_page() -> rx.Component: padding="5em", width="100%", ), - rx.tabs( - rx.tab_list( - rx.tab("Code", style=tab_style), - rx.tab("State", style=tab_style), + rx.chakra.tabs( + rx.chakra.tab_list( + rx.chakra.tab("Code", style=tab_style), + rx.chakra.tab("State", style=tab_style), padding_x=0, ), - rx.tab_panels( - rx.tab_panel( - rx.code_block( + rx.chakra.tab_panels( + rx.chakra.tab_panel( + rx.chakra.code_block( forms_2_code, language="python", show_line_numbers=True, @@ -230,8 +232,8 @@ def forms_page() -> rx.Component: padding_x=0, padding_y=".25em", ), - rx.tab_panel( - rx.code_block( + rx.chakra.tab_panel( + rx.chakra.code_block( forms_2_state, language="python", show_line_numbers=True, diff --git a/reflex/.templates/apps/demo/code/pages/graphing.py b/reflex/.templates/apps/demo/code/pages/graphing.py index 0accf81a0..6b5defb46 100644 --- a/reflex/.templates/apps/demo/code/pages/graphing.py +++ b/reflex/.templates/apps/demo/code/pages/graphing.py @@ -56,19 +56,19 @@ graph_2_code = """rx.recharts.pie_chart( ), rx.recharts.graphing_tooltip(), ), -rx.vstack( +rx.chakra.vstack( rx.foreach( PieChartState.resource_types, - lambda type_, i: rx.hstack( - rx.button( + lambda type_, i: rx.chakra.hstack( + rx.chakra.button( "-", on_click=PieChartState.decrement(type_), ), - rx.text( + rx.chakra.text( type_, PieChartState.resources[i]["count"], ), - rx.button( + rx.chakra.button( "+", on_click=PieChartState.increment(type_), ), @@ -111,17 +111,17 @@ def graphing_page() -> rx.Component: Returns: rx.Component: The UI for the dashboard page. """ - return rx.box( - rx.vstack( - rx.heading( + return rx.chakra.box( + rx.chakra.vstack( + rx.chakra.heading( "Graphing Demo", font_size="3em", ), - rx.heading( + rx.chakra.heading( "Composed Chart", font_size="2em", ), - rx.stack( + rx.chakra.stack( rx.recharts.composed_chart( rx.recharts.area(data_key="uv", stroke="#8884d8", fill="#8884d8"), rx.recharts.bar(data_key="amt", bar_size=20, fill="#413ea0"), @@ -136,15 +136,15 @@ def graphing_page() -> rx.Component: width="100%", height="20em", ), - rx.tabs( - rx.tab_list( - rx.tab("Code", style=tab_style), - rx.tab("Data", style=tab_style), + rx.chakra.tabs( + rx.chakra.tab_list( + rx.chakra.tab("Code", style=tab_style), + rx.chakra.tab("Data", style=tab_style), padding_x=0, ), - rx.tab_panels( - rx.tab_panel( - rx.code_block( + rx.chakra.tab_panels( + rx.chakra.tab_panel( + rx.chakra.code_block( graph_1_code, language="python", show_line_numbers=True, @@ -153,8 +153,8 @@ def graphing_page() -> rx.Component: padding_x=0, padding_y=".25em", ), - rx.tab_panel( - rx.code_block( + rx.chakra.tab_panel( + rx.chakra.code_block( data_1_show, language="python", show_line_numbers=True, @@ -171,8 +171,8 @@ def graphing_page() -> rx.Component: width="100%", padding_top=".5em", ), - rx.heading("Interactive Example", font_size="2em"), - rx.hstack( + rx.chakra.heading("Interactive Example", font_size="2em"), + rx.chakra.hstack( rx.recharts.pie_chart( rx.recharts.pie( data=PieChartState.resources, @@ -187,19 +187,19 @@ def graphing_page() -> rx.Component: ), rx.recharts.graphing_tooltip(), ), - rx.vstack( + rx.chakra.vstack( rx.foreach( PieChartState.resource_types, - lambda type_, i: rx.hstack( - rx.button( + lambda type_, i: rx.chakra.hstack( + rx.chakra.button( "-", on_click=PieChartState.decrement(type_), ), - rx.text( + rx.chakra.text( type_, PieChartState.resources[i]["count"], ), - rx.button( + rx.chakra.button( "+", on_click=PieChartState.increment(type_), ), @@ -209,15 +209,15 @@ def graphing_page() -> rx.Component: width="100%", height="15em", ), - rx.tabs( - rx.tab_list( - rx.tab("Code", style=tab_style), - rx.tab("State", style=tab_style), + rx.chakra.tabs( + rx.chakra.tab_list( + rx.chakra.tab("Code", style=tab_style), + rx.chakra.tab("State", style=tab_style), padding_x=0, ), - rx.tab_panels( - rx.tab_panel( - rx.code_block( + rx.chakra.tab_panels( + rx.chakra.tab_panel( + rx.chakra.code_block( graph_2_code, language="python", show_line_numbers=True, @@ -226,8 +226,8 @@ def graphing_page() -> rx.Component: padding_x=0, padding_y=".25em", ), - rx.tab_panel( - rx.code_block( + rx.chakra.tab_panel( + rx.chakra.code_block( graph_2_state, language="python", show_line_numbers=True, diff --git a/reflex/.templates/apps/demo/code/pages/home.py b/reflex/.templates/apps/demo/code/pages/home.py index 3b94dfe0a..d1a667783 100644 --- a/reflex/.templates/apps/demo/code/pages/home.py +++ b/reflex/.templates/apps/demo/code/pages/home.py @@ -10,39 +10,39 @@ def home_page() -> rx.Component: Returns: rx.Component: The UI for the home page. """ - return rx.box( - rx.vstack( - rx.heading( + return rx.chakra.box( + rx.chakra.vstack( + rx.chakra.heading( "Welcome to Reflex! 👋", font_size="3em", ), - rx.text( + rx.chakra.text( "Reflex is an open-source app framework built specifically to allow you to build web apps in pure python. 👈 Select a demo from the sidebar to see some examples of what Reflex can do!", ), - rx.heading( + rx.chakra.heading( "Things to check out:", font_size="2em", ), - rx.unordered_list( - rx.list_item( + rx.chakra.unordered_list( + rx.chakra.list_item( "Take a look at ", - rx.link( + rx.chakra.link( "reflex.dev", href="https://reflex.dev", color="rgb(107,99,246)", ), ), - rx.list_item( + rx.chakra.list_item( "Check out our ", - rx.link( + rx.chakra.link( "docs", href="https://reflex.dev/docs/getting-started/introduction/", color="rgb(107,99,246)", ), ), - rx.list_item( + rx.chakra.list_item( "Ask a question in our ", - rx.link( + rx.chakra.link( "community", href="https://discord.gg/T5WSbC2YtQ", color="rgb(107,99,246)", diff --git a/reflex/.templates/apps/demo/code/sidebar.py b/reflex/.templates/apps/demo/code/sidebar.py index 343da6e27..5f634402f 100644 --- a/reflex/.templates/apps/demo/code/sidebar.py +++ b/reflex/.templates/apps/demo/code/sidebar.py @@ -12,15 +12,15 @@ def sidebar_header() -> rx.Component: Returns: rx.Component: The sidebar header component. """ - return rx.hstack( - rx.image( + return rx.chakra.hstack( + rx.chakra.image( src="/icon.svg", height="2em", ), - rx.spacer(), - rx.link( - rx.center( - rx.image( + rx.chakra.spacer(), + rx.chakra.link( + rx.chakra.center( + rx.chakra.image( src="/github.svg", height="3em", padding="0.5em", @@ -46,10 +46,10 @@ def sidebar_footer() -> rx.Component: Returns: rx.Component: The sidebar footer component. """ - return rx.hstack( - rx.link( - rx.center( - rx.image( + return rx.chakra.hstack( + rx.chakra.link( + rx.chakra.center( + rx.chakra.image( src="/paneleft.svg", height="2em", padding="0.5em", @@ -65,15 +65,15 @@ def sidebar_footer() -> rx.Component: left=rx.cond(State.sidebar_displayed, "0px", "20.5em"), **overlapping_button_style, ), - rx.spacer(), - rx.link( - rx.text( + rx.chakra.spacer(), + rx.chakra.link( + rx.chakra.text( "Docs", ), href="https://reflex.dev/docs/getting-started/introduction/", ), - rx.link( - rx.text( + rx.chakra.link( + rx.chakra.text( "Blog", ), href="https://reflex.dev/blog/", @@ -95,14 +95,14 @@ def sidebar_item(text: str, icon: str, url: str) -> rx.Component: Returns: rx.Component: The sidebar item component. """ - return rx.link( - rx.hstack( - rx.image( + return rx.chakra.link( + rx.chakra.hstack( + rx.chakra.image( src=icon, height="2.5em", padding="0.5em", ), - rx.text( + rx.chakra.text( text, ), bg=rx.cond( @@ -131,10 +131,10 @@ def sidebar() -> rx.Component: Returns: rx.Component: The sidebar component. """ - return rx.box( - rx.vstack( + return rx.chakra.box( + rx.chakra.vstack( sidebar_header(), - rx.vstack( + rx.chakra.vstack( sidebar_item( "Welcome", "/github.svg", @@ -165,7 +165,7 @@ def sidebar() -> rx.Component: align_items="flex-start", padding="1em", ), - rx.spacer(), + rx.chakra.spacer(), sidebar_footer(), height="100dvh", ), diff --git a/reflex/.templates/apps/demo/code/styles.py b/reflex/.templates/apps/demo/code/styles.py index 934821ad6..e31913194 100644 --- a/reflex/.templates/apps/demo/code/styles.py +++ b/reflex/.templates/apps/demo/code/styles.py @@ -46,12 +46,12 @@ overlapping_button_style = { } base_style = { - rx.MenuButton: { + rx.chakra.MenuButton: { "width": "3em", "height": "3em", **overlapping_button_style, }, - rx.MenuItem: hover_accent_bg, + rx.chakra.MenuItem: hover_accent_bg, } tab_style = { diff --git a/reflex/.templates/apps/demo/code/webui/components/chat.py b/reflex/.templates/apps/demo/code/webui/components/chat.py index 9ac6ddf9e..fd9b6ba98 100644 --- a/reflex/.templates/apps/demo/code/webui/components/chat.py +++ b/reflex/.templates/apps/demo/code/webui/components/chat.py @@ -14,9 +14,9 @@ def message(qa: QA) -> rx.Component: Returns: A component displaying the question/answer pair. """ - return rx.box( - rx.box( - rx.text( + return rx.chakra.box( + rx.chakra.box( + rx.chakra.text( qa.question, bg=styles.border_color, shadow=styles.shadow_light, @@ -25,8 +25,8 @@ def message(qa: QA) -> rx.Component: text_align="right", margin_top="1em", ), - rx.box( - rx.text( + rx.chakra.box( + rx.chakra.text( qa.answer, bg=styles.accent_color, shadow=styles.shadow_light, @@ -45,8 +45,8 @@ def chat() -> rx.Component: Returns: A component displaying all the messages in a single conversation. """ - return rx.vstack( - rx.box(rx.foreach(State.chats[State.current_chat], message)), + return rx.chakra.vstack( + rx.chakra.box(rx.foreach(State.chats[State.current_chat], message)), py="8", flex="1", width="100%", @@ -55,7 +55,7 @@ def chat() -> rx.Component: align_self="center", overflow="hidden", padding_bottom="5em", - **styles.base_style[rx.Vstack], + **styles.base_style[rx.chakra.Vstack], ) @@ -65,12 +65,12 @@ def action_bar() -> rx.Component: Returns: The action bar to send a new message. """ - return rx.box( - rx.vstack( - rx.form( - rx.form_control( - rx.hstack( - rx.input( + return rx.chakra.box( + rx.chakra.vstack( + rx.chakra.form( + rx.chakra.form_control( + rx.chakra.hstack( + rx.chakra.input( placeholder="Type something...", value=State.question, on_change=State.set_question, @@ -78,24 +78,24 @@ def action_bar() -> rx.Component: _hover={"border_color": styles.accent_color}, style=styles.input_style, ), - rx.button( + rx.chakra.button( rx.cond( State.processing, loading_icon(height="1em"), - rx.text("Send"), + rx.chakra.text("Send"), ), type_="submit", _hover={"bg": styles.accent_color}, style=styles.input_style, ), - **styles.base_style[rx.Hstack], + **styles.base_style[rx.chakra.Hstack], ), is_disabled=State.processing, ), on_submit=State.process_question, width="100%", ), - rx.text( + rx.chakra.text( "ReflexGPT may return factually incorrect or misleading responses. Use discretion.", font_size="xs", color="#fff6", @@ -104,7 +104,7 @@ def action_bar() -> rx.Component: width="100%", max_w="3xl", mx="auto", - **styles.base_style[rx.Vstack], + **styles.base_style[rx.chakra.Vstack], ), position="sticky", bottom="0", diff --git a/reflex/.templates/apps/demo/code/webui/components/modal.py b/reflex/.templates/apps/demo/code/webui/components/modal.py index ce51b9b6b..c76b8dffd 100644 --- a/reflex/.templates/apps/demo/code/webui/components/modal.py +++ b/reflex/.templates/apps/demo/code/webui/components/modal.py @@ -9,13 +9,13 @@ def modal() -> rx.Component: Returns: The modal component. """ - return rx.modal( - rx.modal_overlay( - rx.modal_content( - rx.modal_header( - rx.hstack( - rx.text("Create new chat"), - rx.icon( + return rx.chakra.modal( + rx.chakra.modal_overlay( + rx.chakra.modal_content( + rx.chakra.modal_header( + rx.chakra.hstack( + rx.chakra.text("Create new chat"), + rx.chakra.icon( tag="close", font_size="sm", on_click=State.toggle_modal, @@ -27,8 +27,8 @@ def modal() -> rx.Component: justify_content="space-between", ) ), - rx.modal_body( - rx.input( + rx.chakra.modal_body( + rx.chakra.input( placeholder="Type something...", on_blur=State.set_new_chat_name, bg="#222", @@ -36,8 +36,8 @@ def modal() -> rx.Component: _placeholder={"color": "#fffa"}, ), ), - rx.modal_footer( - rx.button( + rx.chakra.modal_footer( + rx.chakra.button( "Create", bg="#5535d4", box_shadow="md", diff --git a/reflex/.templates/apps/demo/code/webui/components/navbar.py b/reflex/.templates/apps/demo/code/webui/components/navbar.py index 35c3e2522..e836f29ec 100644 --- a/reflex/.templates/apps/demo/code/webui/components/navbar.py +++ b/reflex/.templates/apps/demo/code/webui/components/navbar.py @@ -5,18 +5,18 @@ from ...webui.state import State def navbar(): - return rx.box( - rx.hstack( - rx.hstack( - rx.icon( + return rx.chakra.box( + rx.chakra.hstack( + rx.chakra.hstack( + rx.chakra.icon( tag="hamburger", mr=4, on_click=State.toggle_drawer, cursor="pointer", ), - rx.link( - rx.box( - rx.image(src="favicon.ico", width=30, height="auto"), + rx.chakra.link( + rx.chakra.box( + rx.chakra.image(src="favicon.ico", width=30, height="auto"), p="1", border_radius="6", bg="#F0F0F0", @@ -24,17 +24,19 @@ def navbar(): ), href="/", ), - rx.breadcrumb( - rx.breadcrumb_item( - rx.heading("ReflexGPT", size="sm"), + rx.chakra.breadcrumb( + rx.chakra.breadcrumb_item( + rx.chakra.heading("ReflexGPT", size="sm"), ), - rx.breadcrumb_item( - rx.text(State.current_chat, size="sm", font_weight="normal"), + rx.chakra.breadcrumb_item( + rx.chakra.text( + State.current_chat, size="sm", font_weight="normal" + ), ), ), ), - rx.hstack( - rx.button( + rx.chakra.hstack( + rx.chakra.button( "+ New chat", bg=styles.accent_color, px="4", @@ -42,15 +44,15 @@ def navbar(): h="auto", on_click=State.toggle_modal, ), - rx.menu( - rx.menu_button( - rx.avatar(name="User", size="md"), - rx.box(), + rx.chakra.menu( + rx.chakra.menu_button( + rx.chakra.avatar(name="User", size="md"), + rx.chakra.box(), ), - rx.menu_list( - rx.menu_item("Help"), - rx.menu_divider(), - rx.menu_item("Settings"), + rx.chakra.menu_list( + rx.chakra.menu_item("Help"), + rx.chakra.menu_divider(), + rx.chakra.menu_item("Settings"), ), ), spacing="8", diff --git a/reflex/.templates/apps/demo/code/webui/components/sidebar.py b/reflex/.templates/apps/demo/code/webui/components/sidebar.py index 91b7acd8d..b4ffdd41f 100644 --- a/reflex/.templates/apps/demo/code/webui/components/sidebar.py +++ b/reflex/.templates/apps/demo/code/webui/components/sidebar.py @@ -13,16 +13,16 @@ def sidebar_chat(chat: str) -> rx.Component: Returns: The sidebar chat item. """ - return rx.hstack( - rx.box( + return rx.chakra.hstack( + rx.chakra.box( chat, on_click=lambda: State.set_chat(chat), style=styles.sidebar_style, color=styles.icon_color, flex="1", ), - rx.box( - rx.icon( + rx.chakra.box( + rx.chakra.icon( tag="delete", style=styles.icon_style, on_click=State.delete_chat, @@ -40,21 +40,21 @@ def sidebar() -> rx.Component: Returns: The sidebar component. """ - return rx.drawer( - rx.drawer_overlay( - rx.drawer_content( - rx.drawer_header( - rx.hstack( - rx.text("Chats"), - rx.icon( + return rx.chakra.drawer( + rx.chakra.drawer_overlay( + rx.chakra.drawer_content( + rx.chakra.drawer_header( + rx.chakra.hstack( + rx.chakra.text("Chats"), + rx.chakra.icon( tag="close", on_click=State.toggle_drawer, style=styles.icon_style, ), ) ), - rx.drawer_body( - rx.vstack( + rx.chakra.drawer_body( + rx.chakra.vstack( rx.foreach(State.chat_titles, lambda chat: sidebar_chat(chat)), align_items="stretch", ) diff --git a/reflex/.templates/apps/demo/code/webui/styles.py b/reflex/.templates/apps/demo/code/webui/styles.py index 7abc579fb..62212ac1a 100644 --- a/reflex/.templates/apps/demo/code/webui/styles.py +++ b/reflex/.templates/apps/demo/code/webui/styles.py @@ -45,43 +45,43 @@ sidebar_style = dict( ) base_style = { - rx.Avatar: { + rx.chakra.Avatar: { "shadow": shadow, "color": text_light_color, # "bg": border_color, }, - rx.Button: { + rx.chakra.Button: { "shadow": shadow, "color": text_light_color, "_hover": { "bg": accent_dark, }, }, - rx.Menu: { + rx.chakra.Menu: { "bg": bg_dark_color, "border": f"red", }, - rx.MenuList: { + rx.chakra.MenuList: { "bg": bg_dark_color, "border": f"1.5px solid {bg_medium_color}", }, - rx.MenuDivider: { + rx.chakra.MenuDivider: { "border": f"1px solid {bg_medium_color}", }, - rx.MenuItem: { + rx.chakra.MenuItem: { "bg": bg_dark_color, "color": text_light_color, }, - rx.DrawerContent: { + rx.chakra.DrawerContent: { "bg": bg_dark_color, "color": text_light_color, "opacity": "0.9", }, - rx.Hstack: { + rx.chakra.Hstack: { "align_items": "center", "justify_content": "space-between", }, - rx.Vstack: { + rx.chakra.Vstack: { "align_items": "stretch", "justify_content": "space-between", }, diff --git a/reflex/.templates/apps/sidebar/code/components/sidebar.py b/reflex/.templates/apps/sidebar/code/components/sidebar.py index 26f2362e0..8e3d2f736 100644 --- a/reflex/.templates/apps/sidebar/code/components/sidebar.py +++ b/reflex/.templates/apps/sidebar/code/components/sidebar.py @@ -11,17 +11,17 @@ def sidebar_header() -> rx.Component: Returns: The sidebar header component. """ - return rx.hstack( + return rx.chakra.hstack( # The logo. - rx.image( + rx.chakra.image( src="/icon.svg", height="2em", ), - rx.spacer(), + rx.chakra.spacer(), # Link to Reflex GitHub repo. - rx.link( - rx.center( - rx.image( + rx.chakra.link( + rx.chakra.center( + rx.chakra.image( src="/github.svg", height="3em", padding="0.5em", @@ -47,14 +47,14 @@ def sidebar_footer() -> rx.Component: Returns: The sidebar footer component. """ - return rx.hstack( - rx.spacer(), - rx.link( - rx.text("Docs"), + return rx.chakra.hstack( + rx.chakra.spacer(), + rx.chakra.link( + rx.chakra.text("Docs"), href="https://reflex.dev/docs/getting-started/introduction/", ), - rx.link( - rx.text("Blog"), + rx.chakra.link( + rx.chakra.text("Blog"), href="https://reflex.dev/blog/", ), width="100%", @@ -79,14 +79,14 @@ def sidebar_item(text: str, icon: str, url: str) -> rx.Component: (rx.State.router.page.path == "/") & text == "Home" ) - return rx.link( - rx.hstack( - rx.image( + return rx.chakra.link( + rx.chakra.hstack( + rx.chakra.image( src=icon, height="2.5em", padding="0.5em", ), - rx.text( + rx.chakra.text( text, ), bg=rx.cond( @@ -118,10 +118,10 @@ def sidebar() -> rx.Component: # Get all the decorated pages and add them to the sidebar. from reflex.page import get_decorated_pages - return rx.box( - rx.vstack( + return rx.chakra.box( + rx.chakra.vstack( sidebar_header(), - rx.vstack( + rx.chakra.vstack( *[ sidebar_item( text=page.get("title", page["route"].strip("/").capitalize()), @@ -135,7 +135,7 @@ def sidebar() -> rx.Component: align_items="flex-start", padding="1em", ), - rx.spacer(), + rx.chakra.spacer(), sidebar_footer(), height="100dvh", ), diff --git a/reflex/.templates/apps/sidebar/code/pages/dashboard.py b/reflex/.templates/apps/sidebar/code/pages/dashboard.py index e0a895009..bfe29615c 100644 --- a/reflex/.templates/apps/sidebar/code/pages/dashboard.py +++ b/reflex/.templates/apps/sidebar/code/pages/dashboard.py @@ -11,11 +11,11 @@ def dashboard() -> rx.Component: Returns: The UI for the dashboard page. """ - return rx.vstack( - rx.heading("Dashboard", font_size="3em"), - rx.text("Welcome to Reflex!"), - rx.text( + return rx.chakra.vstack( + rx.chakra.heading("Dashboard", font_size="3em"), + rx.chakra.text("Welcome to Reflex!"), + rx.chakra.text( "You can edit this page in ", - rx.code("{your_app}/pages/dashboard.py"), + rx.chakra.code("{your_app}/pages/dashboard.py"), ), ) diff --git a/reflex/.templates/apps/sidebar/code/pages/settings.py b/reflex/.templates/apps/sidebar/code/pages/settings.py index 7bee3bf86..94b89d691 100644 --- a/reflex/.templates/apps/sidebar/code/pages/settings.py +++ b/reflex/.templates/apps/sidebar/code/pages/settings.py @@ -12,11 +12,11 @@ def settings() -> rx.Component: Returns: The UI for the settings page. """ - return rx.vstack( - rx.heading("Settings", font_size="3em"), - rx.text("Welcome to Reflex!"), - rx.text( + return rx.chakra.vstack( + rx.chakra.heading("Settings", font_size="3em"), + rx.chakra.text("Welcome to Reflex!"), + rx.chakra.text( "You can edit this page in ", - rx.code("{your_app}/pages/settings.py"), + rx.chakra.code("{your_app}/pages/settings.py"), ), ) diff --git a/reflex/.templates/apps/sidebar/code/styles.py b/reflex/.templates/apps/sidebar/code/styles.py index 15a144a78..d11a1e580 100644 --- a/reflex/.templates/apps/sidebar/code/styles.py +++ b/reflex/.templates/apps/sidebar/code/styles.py @@ -45,8 +45,8 @@ base_style = { } markdown_style = { - "code": lambda text: rx.code(text, color="#1F1944", bg="#EAE4FD"), - "a": lambda text, **props: rx.link( + "code": lambda text: rx.chakra.code(text, color="#1F1944", bg="#EAE4FD"), + "a": lambda text, **props: rx.chakra.link( text, **props, font_weight="bold", diff --git a/reflex/.templates/apps/sidebar/code/templates/template.py b/reflex/.templates/apps/sidebar/code/templates/template.py index 4664b6035..1ba46d309 100644 --- a/reflex/.templates/apps/sidebar/code/templates/template.py +++ b/reflex/.templates/apps/sidebar/code/templates/template.py @@ -25,19 +25,19 @@ def menu_button() -> rx.Component: """ from reflex.page import get_decorated_pages - return rx.box( - rx.menu( - rx.menu_button( - rx.icon( + return rx.chakra.box( + rx.chakra.menu( + rx.chakra.menu_button( + rx.chakra.icon( tag="hamburger", size="4em", color=styles.text_color, ), ), - rx.menu_list( + rx.chakra.menu_list( *[ - rx.menu_item( - rx.link( + rx.chakra.menu_item( + rx.chakra.link( page["title"], href=page["route"], width="100%", @@ -45,12 +45,16 @@ def menu_button() -> rx.Component: ) for page in get_decorated_pages() ], - rx.menu_divider(), - rx.menu_item( - rx.link("About", href="https://github.com/reflex-dev", width="100%") + rx.chakra.menu_divider(), + rx.chakra.menu_item( + rx.chakra.link( + "About", href="https://github.com/reflex-dev", width="100%" + ) ), - rx.menu_item( - rx.link("Contact", href="mailto:founders@=reflex.dev", width="100%") + rx.chakra.menu_item( + rx.chakra.link( + "Contact", href="mailto:founders@=reflex.dev", width="100%" + ) ), ), ), @@ -107,10 +111,10 @@ def template( on_load=on_load, ) def templated_page(): - return rx.hstack( + return rx.chakra.hstack( sidebar(), - rx.box( - rx.box( + rx.chakra.box( + rx.chakra.box( page_content(), **styles.template_content_style, ),