laipeng/reflex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Convert templates to use rx.chakra where needed (#2555)

Browse Source 
* 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
This commit is contained in:
Masen Furer 2024-02-12 13:32:23 -08:00 committed by GitHub
parent 798b72825d
commit fc6eff7104
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
19 changed files with 311 additions and 300 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.github/workflows/reflex_init_in_docker_test.yml vendored
View File

@ -6,8 +6,7 @@ on:
paths-ignore: paths-ignore:
- '**/*.md' - '**/*.md'
pull_request: pull_request:
branches: branches: [ "main", "reflex-0.4.0" ]
- main
paths-ignore: paths-ignore:
- '**/*.md' - '**/*.md'

30
reflex/.templates/apps/demo/code/demo.py
View File

@ -25,23 +25,27 @@ def template(main_content: Callable[[], rx.Component]) -> rx.Component:
Returns: Returns:
rx.Component: The template for each page of the app. rx.Component: The template for each page of the app.
""" """
menu_button = rx.box( menu_button = rx.chakra.box(
rx.menu( rx.chakra.menu(
rx.menu_button( rx.chakra.menu_button(
rx.icon( rx.chakra.icon(
tag="hamburger", tag="hamburger",
size="4em", size="4em",
color=text_color, color=text_color,
), ),
), ),
rx.menu_list( rx.chakra.menu_list(
rx.menu_item(rx.link("Home", href="/", width="100%")), rx.chakra.menu_item(rx.chakra.link("Home", href="/", width="100%")),
rx.menu_divider(), rx.chakra.menu_divider(),
rx.menu_item( rx.chakra.menu_item(
rx.link("About", href="https://github.com/reflex-dev", width="100%") rx.chakra.link(
"About", href="https://github.com/reflex-dev", width="100%"
)
), ),
rx.menu_item( rx.chakra.menu_item(
rx.link("Contact", href="mailto:founders@=reflex.dev", width="100%") 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", z_index="500",
) )
return rx.hstack( return rx.chakra.hstack(
sidebar(), sidebar(),
main_content(), main_content(),
rx.spacer(), rx.chakra.spacer(),
menu_button, menu_button,
align_items="flex-start", align_items="flex-start",
transition="left 0.5s, width 0.5s", transition="left 0.5s, width 0.5s",

4
reflex/.templates/apps/demo/code/pages/chatapp.py
View File

@ -13,8 +13,8 @@ def chatapp_page() -> rx.Component:
Returns: Returns:
The UI for the main app. The UI for the main app.
""" """
return rx.box( return rx.chakra.box(
rx.vstack( rx.chakra.vstack(
navbar(), navbar(),
chat.chat(), chat.chat(),
chat.action_bar(), chat.action_bar(),

54
reflex/.templates/apps/demo/code/pages/datatable.py
View File

@ -129,10 +129,10 @@ class DataTableState(State):
] ]
code_show = """rx.hstack( code_show = """rx.chakra.hstack(
rx.divider(orientation="vertical", height="100vh", border="solid black 1px"), rx.chakra.divider(orientation="vertical", height="100vh", border="solid black 1px"),
rx.vstack( rx.chakra.vstack(
rx.box( rx.chakra.box(
rx.data_editor( rx.data_editor(
columns=DataTableState.cols, columns=DataTableState.cols,
data=DataTableState.data, data=DataTableState.data,
@ -147,7 +147,7 @@ code_show = """rx.hstack(
height="80vh", height="80vh",
), ),
), ),
rx.spacer(), rx.chakra.spacer(),
height="100vh", height="100vh",
spacing="25", spacing="25",
), ),
@ -270,15 +270,15 @@ def datatable_page() -> rx.Component:
Returns: Returns:
rx.Component: The UI for the settings page. rx.Component: The UI for the settings page.
""" """
return rx.box( return rx.chakra.box(
rx.vstack( rx.chakra.vstack(
rx.heading( rx.chakra.heading(
"Data Table Demo", "Data Table Demo",
font_size="3em", font_size="3em",
), ),
rx.hstack( rx.chakra.hstack(
rx.vstack( rx.chakra.vstack(
rx.box( rx.chakra.box(
rx.data_editor( rx.data_editor(
columns=DataTableState.cols, columns=DataTableState.cols,
data=DataTableState.data, data=DataTableState.data,
@ -292,21 +292,21 @@ def datatable_page() -> rx.Component:
width="80vw", width="80vw",
), ),
), ),
rx.spacer(), rx.chakra.spacer(),
spacing="25", spacing="25",
), ),
), ),
rx.tabs( rx.chakra.tabs(
rx.tab_list( rx.chakra.tab_list(
rx.tab("Code", style=tab_style), rx.chakra.tab("Code", style=tab_style),
rx.tab("Data", style=tab_style), rx.chakra.tab("Data", style=tab_style),
rx.tab("State", style=tab_style), rx.chakra.tab("State", style=tab_style),
rx.tab("Styling", style=tab_style), rx.chakra.tab("Styling", style=tab_style),
padding_x=0, padding_x=0,
), ),
rx.tab_panels( rx.chakra.tab_panels(
rx.tab_panel( rx.chakra.tab_panel(
rx.code_block( rx.chakra.code_block(
code_show, code_show,
language="python", language="python",
show_line_numbers=True, show_line_numbers=True,
@ -315,8 +315,8 @@ def datatable_page() -> rx.Component:
padding_x=0, padding_x=0,
padding_y=".25em", padding_y=".25em",
), ),
rx.tab_panel( rx.chakra.tab_panel(
rx.code_block( rx.chakra.code_block(
data_show, data_show,
language="python", language="python",
show_line_numbers=True, show_line_numbers=True,
@ -325,8 +325,8 @@ def datatable_page() -> rx.Component:
padding_x=0, padding_x=0,
padding_y=".25em", padding_y=".25em",
), ),
rx.tab_panel( rx.chakra.tab_panel(
rx.code_block( rx.chakra.code_block(
state_show, state_show,
language="python", language="python",
show_line_numbers=True, show_line_numbers=True,
@ -335,8 +335,8 @@ def datatable_page() -> rx.Component:
padding_x=0, padding_x=0,
padding_y=".25em", padding_y=".25em",
), ),
rx.tab_panel( rx.chakra.tab_panel(
rx.code_block( rx.chakra.code_block(
darkTheme_show, darkTheme_show,
language="python", language="python",
show_line_numbers=True, show_line_numbers=True,

128
reflex/.templates/apps/demo/code/pages/forms.py
View File

@ -4,21 +4,21 @@ import reflex as rx
from ..states.form_state import FormState, UploadState from ..states.form_state import FormState, UploadState
from ..styles import * from ..styles import *
forms_1_code = """rx.vstack( forms_1_code = """rx.chakra.vstack(
rx.form( rx.chakra.form(
rx.vstack( rx.chakra.vstack(
rx.input( rx.chakra.input(
placeholder="First Name", placeholder="First Name",
id="first_name", id="first_name",
), ),
rx.input( rx.chakra.input(
placeholder="Last Name", id="last_name" placeholder="Last Name", id="last_name"
), ),
rx.hstack( rx.chakra.hstack(
rx.checkbox("Checked", id="check"), rx.chakra.checkbox("Checked", id="check"),
rx.switch("Switched", id="switch"), rx.chakra.switch("Switched", id="switch"),
), ),
rx.button("Submit", rx.chakra.button("Submit",
type_="submit", type_="submit",
bg="#ecfdf5", bg="#ecfdf5",
color="#047857", color="#047857",
@ -27,9 +27,9 @@ forms_1_code = """rx.vstack(
), ),
on_submit=FormState.handle_submit, on_submit=FormState.handle_submit,
), ),
rx.divider(), rx.chakra.divider(),
rx.heading("Results"), rx.chakra.heading("Results"),
rx.text(FormState.form_data.to_string()), rx.chakra.text(FormState.form_data.to_string()),
width="100%", width="100%",
)""" )"""
@ -44,35 +44,35 @@ forms_1_state = """class FormState(rx.State):
self.form_data = form_data""" self.form_data = form_data"""
forms_2_code = """rx.vstack( forms_2_code = """rx.chakra.vstack(
rx.upload( rx.upload(
rx.vstack( rx.chakra.vstack(
rx.button( rx.chakra.button(
"Select File", "Select File",
color=color, color=color,
bg="white", bg="white",
border=f"1px solid {color}", border=f"1px solid {color}",
), ),
rx.text( rx.chakra.text(
"Drag and drop files here or click to select files" "Drag and drop files here or click to select files"
), ),
), ),
border=f"1px dotted {color}", border=f"1px dotted {color}",
padding="5em", padding="5em",
), ),
rx.hstack(rx.foreach(rx.selected_files, rx.text)), rx.chakra.hstack(rx.foreach(rx.selected_files, rx.chakra.text)),
rx.button( rx.chakra.button(
"Upload", "Upload",
on_click=lambda: UploadState.handle_upload( on_click=lambda: UploadState.handle_upload(
rx.upload_files() rx.upload_files()
), ),
), ),
rx.button( rx.chakra.button(
"Clear", "Clear",
on_click=rx.clear_selected_files, on_click=rx.clear_selected_files,
), ),
rx.foreach( 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", padding="5em",
width="100%", width="100%",
@ -109,25 +109,25 @@ def forms_page() -> rx.Component:
Returns: Returns:
rx.Component: The UI for the settings page. rx.Component: The UI for the settings page.
""" """
return rx.box( return rx.chakra.box(
rx.vstack( rx.chakra.vstack(
rx.heading( rx.chakra.heading(
"Forms Demo", "Forms Demo",
font_size="3em", font_size="3em",
), ),
rx.vstack( rx.chakra.vstack(
rx.form( rx.chakra.form(
rx.vstack( rx.chakra.vstack(
rx.input( rx.chakra.input(
placeholder="First Name", placeholder="First Name",
id="first_name", id="first_name",
), ),
rx.input(placeholder="Last Name", id="last_name"), rx.chakra.input(placeholder="Last Name", id="last_name"),
rx.hstack( rx.chakra.hstack(
rx.checkbox("Checked", id="check"), rx.chakra.checkbox("Checked", id="check"),
rx.switch("Switched", id="switch"), rx.chakra.switch("Switched", id="switch"),
), ),
rx.button( rx.chakra.button(
"Submit", "Submit",
type_="submit", type_="submit",
bg="#ecfdf5", bg="#ecfdf5",
@ -137,20 +137,20 @@ def forms_page() -> rx.Component:
), ),
on_submit=FormState.handle_submit, on_submit=FormState.handle_submit,
), ),
rx.divider(), rx.chakra.divider(),
rx.heading("Results"), rx.chakra.heading("Results"),
rx.text(FormState.form_data.to_string()), rx.chakra.text(FormState.form_data.to_string()),
width="100%", width="100%",
), ),
rx.tabs( rx.chakra.tabs(
rx.tab_list( rx.chakra.tab_list(
rx.tab("Code", style=tab_style), rx.chakra.tab("Code", style=tab_style),
rx.tab("State", style=tab_style), rx.chakra.tab("State", style=tab_style),
padding_x=0, padding_x=0,
), ),
rx.tab_panels( rx.chakra.tab_panels(
rx.tab_panel( rx.chakra.tab_panel(
rx.code_block( rx.chakra.code_block(
forms_1_code, forms_1_code,
language="python", language="python",
show_line_numbers=True, show_line_numbers=True,
@ -159,8 +159,8 @@ def forms_page() -> rx.Component:
padding_x=0, padding_x=0,
padding_y=".25em", padding_y=".25em",
), ),
rx.tab_panel( rx.chakra.tab_panel(
rx.code_block( rx.chakra.code_block(
forms_1_state, forms_1_state,
language="python", language="python",
show_line_numbers=True, show_line_numbers=True,
@ -177,34 +177,36 @@ def forms_page() -> rx.Component:
width="100%", width="100%",
padding_top=".5em", padding_top=".5em",
), ),
rx.heading("Upload Example", font_size="3em"), rx.chakra.heading("Upload Example", font_size="3em"),
rx.text("Try uploading some images and see how they look."), rx.chakra.text("Try uploading some images and see how they look."),
rx.vstack( rx.chakra.vstack(
rx.upload( rx.upload(
rx.vstack( rx.chakra.vstack(
rx.button( rx.chakra.button(
"Select File", "Select File",
color=color, color=color,
bg="white", bg="white",
border=f"1px solid {color}", 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}", border=f"1px dotted {color}",
padding="5em", padding="5em",
), ),
rx.hstack(rx.foreach(rx.selected_files, rx.text)), rx.chakra.hstack(rx.foreach(rx.selected_files, rx.chakra.text)),
rx.button( rx.chakra.button(
"Upload", "Upload",
on_click=lambda: UploadState.handle_upload(rx.upload_files()), on_click=lambda: UploadState.handle_upload(rx.upload_files()),
), ),
rx.button( rx.chakra.button(
"Clear", "Clear",
on_click=rx.clear_selected_files, on_click=rx.clear_selected_files,
), ),
rx.foreach( rx.foreach(
UploadState.img, UploadState.img,
lambda img: rx.image( lambda img: rx.chakra.image(
src=img, src=img,
width="20%", width="20%",
height="auto", height="auto",
@ -213,15 +215,15 @@ def forms_page() -> rx.Component:
padding="5em", padding="5em",
width="100%", width="100%",
), ),
rx.tabs( rx.chakra.tabs(
rx.tab_list( rx.chakra.tab_list(
rx.tab("Code", style=tab_style), rx.chakra.tab("Code", style=tab_style),
rx.tab("State", style=tab_style), rx.chakra.tab("State", style=tab_style),
padding_x=0, padding_x=0,
), ),
rx.tab_panels( rx.chakra.tab_panels(
rx.tab_panel( rx.chakra.tab_panel(
rx.code_block( rx.chakra.code_block(
forms_2_code, forms_2_code,
language="python", language="python",
show_line_numbers=True, show_line_numbers=True,
@ -230,8 +232,8 @@ def forms_page() -> rx.Component:
padding_x=0, padding_x=0,
padding_y=".25em", padding_y=".25em",
), ),
rx.tab_panel( rx.chakra.tab_panel(
rx.code_block( rx.chakra.code_block(
forms_2_state, forms_2_state,
language="python", language="python",
show_line_numbers=True, show_line_numbers=True,

70
reflex/.templates/apps/demo/code/pages/graphing.py
View File

@ -56,19 +56,19 @@ graph_2_code = """rx.recharts.pie_chart(
), ),
rx.recharts.graphing_tooltip(), rx.recharts.graphing_tooltip(),
), ),
rx.vstack( rx.chakra.vstack(
rx.foreach( rx.foreach(
PieChartState.resource_types, PieChartState.resource_types,
lambda type_, i: rx.hstack( lambda type_, i: rx.chakra.hstack(
rx.button( rx.chakra.button(
"-", "-",
on_click=PieChartState.decrement(type_), on_click=PieChartState.decrement(type_),
), ),
rx.text( rx.chakra.text(
type_, type_,
PieChartState.resources[i]["count"], PieChartState.resources[i]["count"],
), ),
rx.button( rx.chakra.button(
"+", "+",
on_click=PieChartState.increment(type_), on_click=PieChartState.increment(type_),
), ),
@ -111,17 +111,17 @@ def graphing_page() -> rx.Component:
Returns: Returns:
rx.Component: The UI for the dashboard page. rx.Component: The UI for the dashboard page.
""" """
return rx.box( return rx.chakra.box(
rx.vstack( rx.chakra.vstack(
rx.heading( rx.chakra.heading(
"Graphing Demo", "Graphing Demo",
font_size="3em", font_size="3em",
), ),
rx.heading( rx.chakra.heading(
"Composed Chart", "Composed Chart",
font_size="2em", font_size="2em",
), ),
rx.stack( rx.chakra.stack(
rx.recharts.composed_chart( rx.recharts.composed_chart(
rx.recharts.area(data_key="uv", stroke="#8884d8", fill="#8884d8"), rx.recharts.area(data_key="uv", stroke="#8884d8", fill="#8884d8"),
rx.recharts.bar(data_key="amt", bar_size=20, fill="#413ea0"), rx.recharts.bar(data_key="amt", bar_size=20, fill="#413ea0"),
@ -136,15 +136,15 @@ def graphing_page() -> rx.Component:
width="100%", width="100%",
height="20em", height="20em",
), ),
rx.tabs( rx.chakra.tabs(
rx.tab_list( rx.chakra.tab_list(
rx.tab("Code", style=tab_style), rx.chakra.tab("Code", style=tab_style),
rx.tab("Data", style=tab_style), rx.chakra.tab("Data", style=tab_style),
padding_x=0, padding_x=0,
), ),
rx.tab_panels( rx.chakra.tab_panels(
rx.tab_panel( rx.chakra.tab_panel(
rx.code_block( rx.chakra.code_block(
graph_1_code, graph_1_code,
language="python", language="python",
show_line_numbers=True, show_line_numbers=True,
@ -153,8 +153,8 @@ def graphing_page() -> rx.Component:
padding_x=0, padding_x=0,
padding_y=".25em", padding_y=".25em",
), ),
rx.tab_panel( rx.chakra.tab_panel(
rx.code_block( rx.chakra.code_block(
data_1_show, data_1_show,
language="python", language="python",
show_line_numbers=True, show_line_numbers=True,
@ -171,8 +171,8 @@ def graphing_page() -> rx.Component:
width="100%", width="100%",
padding_top=".5em", padding_top=".5em",
), ),
rx.heading("Interactive Example", font_size="2em"), rx.chakra.heading("Interactive Example", font_size="2em"),
rx.hstack( rx.chakra.hstack(
rx.recharts.pie_chart( rx.recharts.pie_chart(
rx.recharts.pie( rx.recharts.pie(
data=PieChartState.resources, data=PieChartState.resources,
@ -187,19 +187,19 @@ def graphing_page() -> rx.Component:
), ),
rx.recharts.graphing_tooltip(), rx.recharts.graphing_tooltip(),
), ),
rx.vstack( rx.chakra.vstack(
rx.foreach( rx.foreach(
PieChartState.resource_types, PieChartState.resource_types,
lambda type_, i: rx.hstack( lambda type_, i: rx.chakra.hstack(
rx.button( rx.chakra.button(
"-", "-",
on_click=PieChartState.decrement(type_), on_click=PieChartState.decrement(type_),
), ),
rx.text( rx.chakra.text(
type_, type_,
PieChartState.resources[i]["count"], PieChartState.resources[i]["count"],
), ),
rx.button( rx.chakra.button(
"+", "+",
on_click=PieChartState.increment(type_), on_click=PieChartState.increment(type_),
), ),
@ -209,15 +209,15 @@ def graphing_page() -> rx.Component:
width="100%", width="100%",
height="15em", height="15em",
), ),
rx.tabs( rx.chakra.tabs(
rx.tab_list( rx.chakra.tab_list(
rx.tab("Code", style=tab_style), rx.chakra.tab("Code", style=tab_style),
rx.tab("State", style=tab_style), rx.chakra.tab("State", style=tab_style),
padding_x=0, padding_x=0,
), ),
rx.tab_panels( rx.chakra.tab_panels(
rx.tab_panel( rx.chakra.tab_panel(
rx.code_block( rx.chakra.code_block(
graph_2_code, graph_2_code,
language="python", language="python",
show_line_numbers=True, show_line_numbers=True,
@ -226,8 +226,8 @@ def graphing_page() -> rx.Component:
padding_x=0, padding_x=0,
padding_y=".25em", padding_y=".25em",
), ),
rx.tab_panel( rx.chakra.tab_panel(
rx.code_block( rx.chakra.code_block(
graph_2_state, graph_2_state,
language="python", language="python",
show_line_numbers=True, show_line_numbers=True,

24
reflex/.templates/apps/demo/code/pages/home.py
View File

@ -10,39 +10,39 @@ def home_page() -> rx.Component:
Returns: Returns:
rx.Component: The UI for the home page. rx.Component: The UI for the home page.
""" """
return rx.box( return rx.chakra.box(
rx.vstack( rx.chakra.vstack(
rx.heading( rx.chakra.heading(
"Welcome to Reflex! 👋", "Welcome to Reflex! 👋",
font_size="3em", 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!", "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:", "Things to check out:",
font_size="2em", font_size="2em",
), ),
rx.unordered_list( rx.chakra.unordered_list(
rx.list_item( rx.chakra.list_item(
"Take a look at ", "Take a look at ",
rx.link( rx.chakra.link(
"reflex.dev", "reflex.dev",
href="https://reflex.dev", href="https://reflex.dev",
color="rgb(107,99,246)", color="rgb(107,99,246)",
), ),
), ),
rx.list_item( rx.chakra.list_item(
"Check out our ", "Check out our ",
rx.link( rx.chakra.link(
"docs", "docs",
href="https://reflex.dev/docs/getting-started/introduction/", href="https://reflex.dev/docs/getting-started/introduction/",
color="rgb(107,99,246)", color="rgb(107,99,246)",
), ),
), ),
rx.list_item( rx.chakra.list_item(
"Ask a question in our ", "Ask a question in our ",
rx.link( rx.chakra.link(
"community", "community",
href="https://discord.gg/T5WSbC2YtQ", href="https://discord.gg/T5WSbC2YtQ",
color="rgb(107,99,246)", color="rgb(107,99,246)",

46
reflex/.templates/apps/demo/code/sidebar.py
View File

@ -12,15 +12,15 @@ def sidebar_header() -> rx.Component:
Returns: Returns:
rx.Component: The sidebar header component. rx.Component: The sidebar header component.
""" """
return rx.hstack( return rx.chakra.hstack(
rx.image( rx.chakra.image(
src="/icon.svg", src="/icon.svg",
height="2em", height="2em",
), ),
rx.spacer(), rx.chakra.spacer(),
rx.link( rx.chakra.link(
rx.center( rx.chakra.center(
rx.image( rx.chakra.image(
src="/github.svg", src="/github.svg",
height="3em", height="3em",
padding="0.5em", padding="0.5em",
@ -46,10 +46,10 @@ def sidebar_footer() -> rx.Component:
Returns: Returns:
rx.Component: The sidebar footer component. rx.Component: The sidebar footer component.
""" """
return rx.hstack( return rx.chakra.hstack(
rx.link( rx.chakra.link(
rx.center( rx.chakra.center(
rx.image( rx.chakra.image(
src="/paneleft.svg", src="/paneleft.svg",
height="2em", height="2em",
padding="0.5em", padding="0.5em",
@ -65,15 +65,15 @@ def sidebar_footer() -> rx.Component:
left=rx.cond(State.sidebar_displayed, "0px", "20.5em"), left=rx.cond(State.sidebar_displayed, "0px", "20.5em"),
**overlapping_button_style, **overlapping_button_style,
), ),
rx.spacer(), rx.chakra.spacer(),
rx.link( rx.chakra.link(
rx.text( rx.chakra.text(
"Docs", "Docs",
), ),
href="https://reflex.dev/docs/getting-started/introduction/", href="https://reflex.dev/docs/getting-started/introduction/",
), ),
rx.link( rx.chakra.link(
rx.text( rx.chakra.text(
"Blog", "Blog",
), ),
href="https://reflex.dev/blog/", href="https://reflex.dev/blog/",
@ -95,14 +95,14 @@ def sidebar_item(text: str, icon: str, url: str) -> rx.Component:
Returns: Returns:
rx.Component: The sidebar item component. rx.Component: The sidebar item component.
""" """
return rx.link( return rx.chakra.link(
rx.hstack( rx.chakra.hstack(
rx.image( rx.chakra.image(
src=icon, src=icon,
height="2.5em", height="2.5em",
padding="0.5em", padding="0.5em",
), ),
rx.text( rx.chakra.text(
text, text,
), ),
bg=rx.cond( bg=rx.cond(
@ -131,10 +131,10 @@ def sidebar() -> rx.Component:
Returns: Returns:
rx.Component: The sidebar component. rx.Component: The sidebar component.
""" """
return rx.box( return rx.chakra.box(
rx.vstack( rx.chakra.vstack(
sidebar_header(), sidebar_header(),
rx.vstack( rx.chakra.vstack(
sidebar_item( sidebar_item(
"Welcome", "Welcome",
"/github.svg", "/github.svg",
@ -165,7 +165,7 @@ def sidebar() -> rx.Component:
align_items="flex-start", align_items="flex-start",
padding="1em", padding="1em",
), ),
rx.spacer(), rx.chakra.spacer(),
sidebar_footer(), sidebar_footer(),
height="100dvh", height="100dvh",
), ),

4
reflex/.templates/apps/demo/code/styles.py
View File

@ -46,12 +46,12 @@ overlapping_button_style = {
} }
base_style = { base_style = {
rx.MenuButton: { rx.chakra.MenuButton: {
"width": "3em", "width": "3em",
"height": "3em", "height": "3em",
**overlapping_button_style, **overlapping_button_style,
}, },
rx.MenuItem: hover_accent_bg, rx.chakra.MenuItem: hover_accent_bg,
} }
tab_style = { tab_style = {

38
reflex/.templates/apps/demo/code/webui/components/chat.py
View File

@ -14,9 +14,9 @@ def message(qa: QA) -> rx.Component:
Returns: Returns:
A component displaying the question/answer pair. A component displaying the question/answer pair.
""" """
return rx.box( return rx.chakra.box(
rx.box( rx.chakra.box(
rx.text( rx.chakra.text(
qa.question, qa.question,
bg=styles.border_color, bg=styles.border_color,
shadow=styles.shadow_light, shadow=styles.shadow_light,
@ -25,8 +25,8 @@ def message(qa: QA) -> rx.Component:
text_align="right", text_align="right",
margin_top="1em", margin_top="1em",
), ),
rx.box( rx.chakra.box(
rx.text( rx.chakra.text(
qa.answer, qa.answer,
bg=styles.accent_color, bg=styles.accent_color,
shadow=styles.shadow_light, shadow=styles.shadow_light,
@ -45,8 +45,8 @@ def chat() -> rx.Component:
Returns: Returns:
A component displaying all the messages in a single conversation. A component displaying all the messages in a single conversation.
""" """
return rx.vstack( return rx.chakra.vstack(
rx.box(rx.foreach(State.chats[State.current_chat], message)), rx.chakra.box(rx.foreach(State.chats[State.current_chat], message)),
py="8", py="8",
flex="1", flex="1",
width="100%", width="100%",
@ -55,7 +55,7 @@ def chat() -> rx.Component:
align_self="center", align_self="center",
overflow="hidden", overflow="hidden",
padding_bottom="5em", padding_bottom="5em",
**styles.base_style[rx.Vstack], **styles.base_style[rx.chakra.Vstack],
) )
@ -65,12 +65,12 @@ def action_bar() -> rx.Component:
Returns: Returns:
The action bar to send a new message. The action bar to send a new message.
""" """
return rx.box( return rx.chakra.box(
rx.vstack( rx.chakra.vstack(
rx.form( rx.chakra.form(
rx.form_control( rx.chakra.form_control(
rx.hstack( rx.chakra.hstack(
rx.input( rx.chakra.input(
placeholder="Type something...", placeholder="Type something...",
value=State.question, value=State.question,
on_change=State.set_question, on_change=State.set_question,
@ -78,24 +78,24 @@ def action_bar() -> rx.Component:
_hover={"border_color": styles.accent_color}, _hover={"border_color": styles.accent_color},
style=styles.input_style, style=styles.input_style,
), ),
rx.button( rx.chakra.button(
rx.cond( rx.cond(
State.processing, State.processing,
loading_icon(height="1em"), loading_icon(height="1em"),
rx.text("Send"), rx.chakra.text("Send"),
), ),
type_="submit", type_="submit",
_hover={"bg": styles.accent_color}, _hover={"bg": styles.accent_color},
style=styles.input_style, style=styles.input_style,
), ),
**styles.base_style[rx.Hstack], **styles.base_style[rx.chakra.Hstack],
), ),
is_disabled=State.processing, is_disabled=State.processing,
), ),
on_submit=State.process_question, on_submit=State.process_question,
width="100%", width="100%",
), ),
rx.text( rx.chakra.text(
"ReflexGPT may return factually incorrect or misleading responses. Use discretion.", "ReflexGPT may return factually incorrect or misleading responses. Use discretion.",
font_size="xs", font_size="xs",
color="#fff6", color="#fff6",
@ -104,7 +104,7 @@ def action_bar() -> rx.Component:
width="100%", width="100%",
max_w="3xl", max_w="3xl",
mx="auto", mx="auto",
**styles.base_style[rx.Vstack], **styles.base_style[rx.chakra.Vstack],
), ),
position="sticky", position="sticky",
bottom="0", bottom="0",

22
reflex/.templates/apps/demo/code/webui/components/modal.py
View File

@ -9,13 +9,13 @@ def modal() -> rx.Component:
Returns: Returns:
The modal component. The modal component.
""" """
return rx.modal( return rx.chakra.modal(
rx.modal_overlay( rx.chakra.modal_overlay(
rx.modal_content( rx.chakra.modal_content(
rx.modal_header( rx.chakra.modal_header(
rx.hstack( rx.chakra.hstack(
rx.text("Create new chat"), rx.chakra.text("Create new chat"),
rx.icon( rx.chakra.icon(
tag="close", tag="close",
font_size="sm", font_size="sm",
on_click=State.toggle_modal, on_click=State.toggle_modal,
@ -27,8 +27,8 @@ def modal() -> rx.Component:
justify_content="space-between", justify_content="space-between",
) )
), ),
rx.modal_body( rx.chakra.modal_body(
rx.input( rx.chakra.input(
placeholder="Type something...", placeholder="Type something...",
on_blur=State.set_new_chat_name, on_blur=State.set_new_chat_name,
bg="#222", bg="#222",
@ -36,8 +36,8 @@ def modal() -> rx.Component:
_placeholder={"color": "#fffa"}, _placeholder={"color": "#fffa"},
), ),
), ),
rx.modal_footer( rx.chakra.modal_footer(
rx.button( rx.chakra.button(
"Create", "Create",
bg="#5535d4", bg="#5535d4",
box_shadow="md", box_shadow="md",

46
reflex/.templates/apps/demo/code/webui/components/navbar.py
View File

@ -5,18 +5,18 @@ from ...webui.state import State
def navbar(): def navbar():
return rx.box( return rx.chakra.box(
rx.hstack( rx.chakra.hstack(
rx.hstack( rx.chakra.hstack(
rx.icon( rx.chakra.icon(
tag="hamburger", tag="hamburger",
mr=4, mr=4,
on_click=State.toggle_drawer, on_click=State.toggle_drawer,
cursor="pointer", cursor="pointer",
), ),
rx.link( rx.chakra.link(
rx.box( rx.chakra.box(
rx.image(src="favicon.ico", width=30, height="auto"), rx.chakra.image(src="favicon.ico", width=30, height="auto"),
p="1", p="1",
border_radius="6", border_radius="6",
bg="#F0F0F0", bg="#F0F0F0",
@ -24,17 +24,19 @@ def navbar():
), ),
href="/", href="/",
), ),
rx.breadcrumb( rx.chakra.breadcrumb(
rx.breadcrumb_item( rx.chakra.breadcrumb_item(
rx.heading("ReflexGPT", size="sm"), rx.chakra.heading("ReflexGPT", size="sm"),
), ),
rx.breadcrumb_item( rx.chakra.breadcrumb_item(
rx.text(State.current_chat, size="sm", font_weight="normal"), rx.chakra.text(
State.current_chat, size="sm", font_weight="normal"
),
), ),
), ),
), ),
rx.hstack( rx.chakra.hstack(
rx.button( rx.chakra.button(
"+ New chat", "+ New chat",
bg=styles.accent_color, bg=styles.accent_color,
px="4", px="4",
@ -42,15 +44,15 @@ def navbar():
h="auto", h="auto",
on_click=State.toggle_modal, on_click=State.toggle_modal,
), ),
rx.menu( rx.chakra.menu(
rx.menu_button( rx.chakra.menu_button(
rx.avatar(name="User", size="md"), rx.chakra.avatar(name="User", size="md"),
rx.box(), rx.chakra.box(),
), ),
rx.menu_list( rx.chakra.menu_list(
rx.menu_item("Help"), rx.chakra.menu_item("Help"),
rx.menu_divider(), rx.chakra.menu_divider(),
rx.menu_item("Settings"), rx.chakra.menu_item("Settings"),
), ),
), ),
spacing="8", spacing="8",

26
reflex/.templates/apps/demo/code/webui/components/sidebar.py
View File

@ -13,16 +13,16 @@ def sidebar_chat(chat: str) -> rx.Component:
Returns: Returns:
The sidebar chat item. The sidebar chat item.
""" """
return rx.hstack( return rx.chakra.hstack(
rx.box( rx.chakra.box(
chat, chat,
on_click=lambda: State.set_chat(chat), on_click=lambda: State.set_chat(chat),
style=styles.sidebar_style, style=styles.sidebar_style,
color=styles.icon_color, color=styles.icon_color,
flex="1", flex="1",
), ),
rx.box( rx.chakra.box(
rx.icon( rx.chakra.icon(
tag="delete", tag="delete",
style=styles.icon_style, style=styles.icon_style,
on_click=State.delete_chat, on_click=State.delete_chat,
@ -40,21 +40,21 @@ def sidebar() -> rx.Component:
Returns: Returns:
The sidebar component. The sidebar component.
""" """
return rx.drawer( return rx.chakra.drawer(
rx.drawer_overlay( rx.chakra.drawer_overlay(
rx.drawer_content( rx.chakra.drawer_content(
rx.drawer_header( rx.chakra.drawer_header(
rx.hstack( rx.chakra.hstack(
rx.text("Chats"), rx.chakra.text("Chats"),
rx.icon( rx.chakra.icon(
tag="close", tag="close",
on_click=State.toggle_drawer, on_click=State.toggle_drawer,
style=styles.icon_style, style=styles.icon_style,
), ),
) )
), ),
rx.drawer_body( rx.chakra.drawer_body(
rx.vstack( rx.chakra.vstack(
rx.foreach(State.chat_titles, lambda chat: sidebar_chat(chat)), rx.foreach(State.chat_titles, lambda chat: sidebar_chat(chat)),
align_items="stretch", align_items="stretch",
) )

18
reflex/.templates/apps/demo/code/webui/styles.py
View File

@ -45,43 +45,43 @@ sidebar_style = dict(
) )
base_style = { base_style = {
rx.Avatar: { rx.chakra.Avatar: {
"shadow": shadow, "shadow": shadow,
"color": text_light_color, "color": text_light_color,
# "bg": border_color, # "bg": border_color,
}, },
rx.Button: { rx.chakra.Button: {
"shadow": shadow, "shadow": shadow,
"color": text_light_color, "color": text_light_color,
"_hover": { "_hover": {
"bg": accent_dark, "bg": accent_dark,
}, },
}, },
rx.Menu: { rx.chakra.Menu: {
"bg": bg_dark_color, "bg": bg_dark_color,
"border": f"red", "border": f"red",
}, },
rx.MenuList: { rx.chakra.MenuList: {
"bg": bg_dark_color, "bg": bg_dark_color,
"border": f"1.5px solid {bg_medium_color}", "border": f"1.5px solid {bg_medium_color}",
}, },
rx.MenuDivider: { rx.chakra.MenuDivider: {
"border": f"1px solid {bg_medium_color}", "border": f"1px solid {bg_medium_color}",
}, },
rx.MenuItem: { rx.chakra.MenuItem: {
"bg": bg_dark_color, "bg": bg_dark_color,
"color": text_light_color, "color": text_light_color,
}, },
rx.DrawerContent: { rx.chakra.DrawerContent: {
"bg": bg_dark_color, "bg": bg_dark_color,
"color": text_light_color, "color": text_light_color,
"opacity": "0.9", "opacity": "0.9",
}, },
rx.Hstack: { rx.chakra.Hstack: {
"align_items": "center", "align_items": "center",
"justify_content": "space-between", "justify_content": "space-between",
}, },
rx.Vstack: { rx.chakra.Vstack: {
"align_items": "stretch", "align_items": "stretch",
"justify_content": "space-between", "justify_content": "space-between",
}, },

40
reflex/.templates/apps/sidebar/code/components/sidebar.py
View File

@ -11,17 +11,17 @@ def sidebar_header() -> rx.Component:
Returns: Returns:
The sidebar header component. The sidebar header component.
""" """
return rx.hstack( return rx.chakra.hstack(
# The logo. # The logo.
rx.image( rx.chakra.image(
src="/icon.svg", src="/icon.svg",
height="2em", height="2em",
), ),
rx.spacer(), rx.chakra.spacer(),
# Link to Reflex GitHub repo. # Link to Reflex GitHub repo.
rx.link( rx.chakra.link(
rx.center( rx.chakra.center(
rx.image( rx.chakra.image(
src="/github.svg", src="/github.svg",
height="3em", height="3em",
padding="0.5em", padding="0.5em",
@ -47,14 +47,14 @@ def sidebar_footer() -> rx.Component:
Returns: Returns:
The sidebar footer component. The sidebar footer component.
""" """
return rx.hstack( return rx.chakra.hstack(
rx.spacer(), rx.chakra.spacer(),
rx.link( rx.chakra.link(
rx.text("Docs"), rx.chakra.text("Docs"),
href="https://reflex.dev/docs/getting-started/introduction/", href="https://reflex.dev/docs/getting-started/introduction/",
), ),
rx.link( rx.chakra.link(
rx.text("Blog"), rx.chakra.text("Blog"),
href="https://reflex.dev/blog/", href="https://reflex.dev/blog/",
), ),
width="100%", width="100%",
@ -79,14 +79,14 @@ def sidebar_item(text: str, icon: str, url: str) -> rx.Component:
(rx.State.router.page.path == "/") & text == "Home" (rx.State.router.page.path == "/") & text == "Home"
) )
return rx.link( return rx.chakra.link(
rx.hstack( rx.chakra.hstack(
rx.image( rx.chakra.image(
src=icon, src=icon,
height="2.5em", height="2.5em",
padding="0.5em", padding="0.5em",
), ),
rx.text( rx.chakra.text(
text, text,
), ),
bg=rx.cond( bg=rx.cond(
@ -118,10 +118,10 @@ def sidebar() -> rx.Component:
# Get all the decorated pages and add them to the sidebar. # Get all the decorated pages and add them to the sidebar.
from reflex.page import get_decorated_pages from reflex.page import get_decorated_pages
return rx.box( return rx.chakra.box(
rx.vstack( rx.chakra.vstack(
sidebar_header(), sidebar_header(),
rx.vstack( rx.chakra.vstack(
*[ *[
sidebar_item( sidebar_item(
text=page.get("title", page["route"].strip("/").capitalize()), text=page.get("title", page["route"].strip("/").capitalize()),
@ -135,7 +135,7 @@ def sidebar() -> rx.Component:
align_items="flex-start", align_items="flex-start",
padding="1em", padding="1em",
), ),
rx.spacer(), rx.chakra.spacer(),
sidebar_footer(), sidebar_footer(),
height="100dvh", height="100dvh",
), ),

10
reflex/.templates/apps/sidebar/code/pages/dashboard.py
View File

@ -11,11 +11,11 @@ def dashboard() -> rx.Component:
Returns: Returns:
The UI for the dashboard page. The UI for the dashboard page.
""" """
return rx.vstack( return rx.chakra.vstack(
rx.heading("Dashboard", font_size="3em"), rx.chakra.heading("Dashboard", font_size="3em"),
rx.text("Welcome to Reflex!"), rx.chakra.text("Welcome to Reflex!"),
rx.text( rx.chakra.text(
"You can edit this page in ", "You can edit this page in ",
rx.code("{your_app}/pages/dashboard.py"), rx.chakra.code("{your_app}/pages/dashboard.py"),
), ),
) )

10
reflex/.templates/apps/sidebar/code/pages/settings.py
View File

@ -12,11 +12,11 @@ def settings() -> rx.Component:
Returns: Returns:
The UI for the settings page. The UI for the settings page.
""" """
return rx.vstack( return rx.chakra.vstack(
rx.heading("Settings", font_size="3em"), rx.chakra.heading("Settings", font_size="3em"),
rx.text("Welcome to Reflex!"), rx.chakra.text("Welcome to Reflex!"),
rx.text( rx.chakra.text(
"You can edit this page in ", "You can edit this page in ",
rx.code("{your_app}/pages/settings.py"), rx.chakra.code("{your_app}/pages/settings.py"),
), ),
) )

4
reflex/.templates/apps/sidebar/code/styles.py
View File

@ -45,8 +45,8 @@ base_style = {
} }
markdown_style = { markdown_style = {
"code": lambda text: rx.code(text, color="#1F1944", bg="#EAE4FD"), "code": lambda text: rx.chakra.code(text, color="#1F1944", bg="#EAE4FD"),
"a": lambda text, **props: rx.link( "a": lambda text, **props: rx.chakra.link(
text, text,
**props, **props,
font_weight="bold", font_weight="bold",

34
reflex/.templates/apps/sidebar/code/templates/template.py
View File

@ -25,19 +25,19 @@ def menu_button() -> rx.Component:
""" """
from reflex.page import get_decorated_pages from reflex.page import get_decorated_pages
return rx.box( return rx.chakra.box(
rx.menu( rx.chakra.menu(
rx.menu_button( rx.chakra.menu_button(
rx.icon( rx.chakra.icon(
tag="hamburger", tag="hamburger",
size="4em", size="4em",
color=styles.text_color, color=styles.text_color,
), ),
), ),
rx.menu_list( rx.chakra.menu_list(
*[ *[
rx.menu_item( rx.chakra.menu_item(
rx.link( rx.chakra.link(
page["title"], page["title"],
href=page["route"], href=page["route"],
width="100%", width="100%",
@ -45,12 +45,16 @@ def menu_button() -> rx.Component:
) )
for page in get_decorated_pages() for page in get_decorated_pages()
], ],
rx.menu_divider(), rx.chakra.menu_divider(),
rx.menu_item( rx.chakra.menu_item(
rx.link("About", href="https://github.com/reflex-dev", width="100%") rx.chakra.link(
"About", href="https://github.com/reflex-dev", width="100%"
)
), ),
rx.menu_item( rx.chakra.menu_item(
rx.link("Contact", href="mailto:founders@=reflex.dev", width="100%") rx.chakra.link(
"Contact", href="mailto:founders@=reflex.dev", width="100%"
)
), ),
), ),
), ),
@ -107,10 +111,10 @@ def template(
on_load=on_load, on_load=on_load,
) )
def templated_page(): def templated_page():
return rx.hstack( return rx.chakra.hstack(
sidebar(), sidebar(),
rx.box( rx.chakra.box(
rx.box( rx.chakra.box(
page_content(), page_content(),
**styles.template_content_style, **styles.template_content_style,
), ),