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

Convert templates to use rx.chakra where needed ()

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

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

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

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

@ -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(),

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

@ -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,

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 ..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,

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.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,

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

@ -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)",

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

@ -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",
),

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

@ -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 = {

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

@ -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",

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

@ -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",

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

@ -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",

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

@ -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",
)

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

@ -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",
},

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

@ -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",
),

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

@ -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"),
),
)

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

@ -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"),
),
)

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

@ -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",

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
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,
),