`, but may also occur with tables")),
- rx.el.li(markdown_error(text="Ensure there are no nested rx.text or layout components within `rx.text`")),
- rx.el.li(markdown_error(text="Ensure that all tables are using `rx.table.header` and `rx.table.body` to wrap the `rx.table.row` rows")),
- class_name="space-y-2 list-disc pl-4",
- ),
- rx.text.strong("No", class_name="text-red-10 font-smbold"),
- code_block_error(code=
-"""rx.text(
- rx.text("foo")
-)
-rx.text(
- rx.box("foo")
-)
-rx.text(
- rx.center("foo")
-)""",
- ),
- code_block_error(code=
-"""rx.table.root(
- rx.table.row(
- rx.table.column_header_cell("Full name"),
- ),
-)""",
- ),
- rx.text.strong("Yes", class_name="text-green-10 font-smbold"),
- code_block_error(code=
-"""rx.text("foo")
-rx.box(
- rx.text("foo")
-)
-rx.center(
- rx.text("foo")
-)""",
- ),
- code_block_error(code=
-"""rx.table.root(
- rx.table.header(
- rx.table.row(
- rx.table.column_header_cell("Full name"),
- ),
- ),
-)""",
- ),
- rx.text(
- "See upstream docs ",
- rx.link("here", href="https://nextjs.org/docs/messages/react-hydration-error", underline="always"),
- "."
- ),
- ],
- error_type="Unhandled Runtime Error",
-
-)
-```
-
-
-```python eval
-error_message(
- heading="Invalid var passed for prop",
- error_code="TypeError: Invalid var passed for prop href, expected type
, got value {state.my_list.at(i)} of type typing.Any.",
- solution=[
- h4_comp_error(text="Add a type annotation for list Vars"),
- rx.text("For certain props, reflex validates type correctness of the variable. Especially when de-referencing lists and dicts, it is important to supply the correct annotation."),
- code_block_error(code=
-"""class State(rx.State):
- # NO
- my_list = ["a", "b", "c"]
-
- # YES
- my_indexable_list: list[str] = ["a", "b", "c"]""",
- language="python",
- ),
- rx.el.ul(
- rx.el.li("Add type annotations to all state Vars."),
- class_name="list-disc pl-4",
- ),
- ],
-
-)
-```
-
-```python eval
-error_message(
- heading="TypeError: metaclass conflict (SQLModel)",
- error_code="TypeError: metaclass conflict: the metaclass of a derived class must be a (non-strict) subclass of the metaclasses of all its bases",
- solution=[
- h4_comp_error(text="This is caused by importing sqlmodel earlier than reflex."),
- rx.el.ul(
- rx.el.li("Ensure that reflex is imported before sqlmodel."),
- class_name="list-disc pl-4",
- ),
- ],
- error_type="Python Error",
-)
-```
-
-
-```python eval
-error_message(
- heading="ImportError: couldn't import psycopg",
- error_code="ImportError: couldn't import psycopg 'python' implementation: libpq library not found | couldn't import psycopg 'binary' implementation: No module named 'psycopg_binary' | couldn't import psycopg 'c' implementation: No module named 'psycopg_c'",
- solution=[
- h4_comp_error(text="This is caused by not installing the correct psycopg package. Solution is to add the `psycopg[binary]==3.2.3` package to your requirements.txt file."),
- ],
- error_type="Import Error",
-)
-```
-
diff --git a/pcweb/components/docpage/sidebar/sidebar.py b/pcweb/components/docpage/sidebar/sidebar.py
index a08b4d9ad..797d279b7 100644
--- a/pcweb/components/docpage/sidebar/sidebar.py
+++ b/pcweb/components/docpage/sidebar/sidebar.py
@@ -3,7 +3,6 @@
from __future__ import annotations
import reflex as rx
-import reflex_chakra as rc
from pcweb.components.docpage.navbar.state import NavbarState
from .state import SidebarState, SideBarItem, SideBarBase
@@ -28,14 +27,15 @@ def sidebar_link(*children, **props):
def sidebar_leaf(
+ item_index: str,
item: SideBarItem,
url: str,
) -> rx.Component:
"""Get the leaf node of the sidebar."""
item.link = item.link.replace("_", "-").rstrip("/") + "/"
return (
- rx.el.li(
- rc.accordion_item(
+ rx.accordion.item(
+ rx.accordion.header(
sidebar_link(
rx.flex(
rx.text(
@@ -55,13 +55,14 @@ def sidebar_leaf(
),
href=item.link,
),
- border="none",
- width="100%",
- )
+ ),
+ value=item_index,
+ border="none",
+ width="100%",
)
if item.outer
- else rx.el.li(
- rc.accordion_item(
+ else rx.accordion.item(
+ rx.accordion.header(
rx.cond(
item.link == url,
sidebar_link(
@@ -87,9 +88,10 @@ def sidebar_leaf(
href=item.link,
),
),
- border="none",
- width="100%",
- )
+ ),
+ border="none",
+ value=item_index,
+ width="100%",
)
)
@@ -128,42 +130,49 @@ def sidebar_icon(name):
def sidebar_item_comp(
+ item_index: str,
item: SideBarItem,
index: list[int],
url: str,
):
- # print(index)
- return rx.cond(
- not item.children,
- sidebar_leaf(item=item, url=url),
- rc.accordion_item(
- rc.accordion_button(
- sidebar_icon(item.names),
- rx.text(
- item.names,
- class_name="font-small",
+ index = rx.Var.create(index)
+ return (
+ sidebar_leaf(item_index=item_index, item=item, url=url)
+ if not item.children
+ else rx.accordion.item(
+ rx.accordion.header(
+ rx.accordion.trigger(
+ sidebar_icon(item.names),
+ rx.text(
+ item.names,
+ class_name="font-small",
+ ),
+ rx.box(class_name="flex-grow"),
+ rx.accordion.icon(class_name="size-4"),
+ class_name="flex items-center !bg-transparent !hover:bg-transparent !py-2 !pr-0 !pl-2 w-full text-slate-9 aria-expanded:text-slate-11 hover:text-slate-11 transition-color",
),
- rx.box(class_name="flex-grow"),
- rc.accordion_icon(class_name="size-4"),
- class_name="items-center !bg-transparent !hover:bg-transparent !py-2 !pr-0 !pl-2 w-full text-slate-9 aria-expanded:text-slate-11 hover:text-slate-11 transition-color",
),
- rc.accordion_panel(
- rc.accordion(
- rx.el.ul(
- *[
- sidebar_item_comp(child, index, url)
- for child in item.children
- ],
- class_name="flex flex-col items-start gap-4 !ml-[15px] list-none [box-shadow:inset_1.25px_0_0_0_var(--c-slate-4)]",
- ),
- allow_multiple=True,
- default_index=index[1:2] if index else [],
- class_name="!my-2",
+ rx.accordion.content(
+ rx.accordion.root(
+ *[
+ sidebar_item_comp(
+ item_index="index" + str(child_index),
+ item=child,
+ index=index[1:],
+ url=url,
+ )
+ for child_index, child in enumerate(item.children)
+ ],
+ type="multiple",
+ collapsible=True,
+ default_value=index[:1].foreach(lambda x: "index" + x.to_string()),
+ class_name="!my-2 flex flex-col items-start gap-4 !ml-[15px] list-none [box-shadow:inset_1.25px_0_0_0_var(--c-slate-4)]",
),
class_name="!p-0 w-full",
),
+ value=item_index,
class_name="border-none w-full",
- ),
+ )
)
@@ -304,17 +313,19 @@ def create_sidebar_section(
href=section_url,
class_name="py-3",
),
- rc.accordion(
+ rx.accordion.root(
*[
sidebar_item_comp(
+ item_index="index" + str(item_index),
item=item,
- index=index if nested else [-1],
+ index=index[1:] if nested else [],
url=url,
)
- for item in items
+ for item_index, item in enumerate(items)
],
- allow_multiple=True,
- default_index=rx.cond(index, index, []),
+ type="multiple",
+ collapsible=True,
+ default_value=index[:1].foreach(lambda x: "index" + x.to_string()),
class_name="ml-0 pl-0 w-full",
),
class_name="flex flex-col items-start ml-0 w-full",
diff --git a/pcweb/components/spline.py b/pcweb/components/spline.py
index 742c8c0f9..5e125151b 100644
--- a/pcweb/components/spline.py
+++ b/pcweb/components/spline.py
@@ -1,6 +1,5 @@
import reflex as rx
from reflex.vars import Var
-import reflex_chakra as rc
class Spline(rx.Component):
@@ -15,16 +14,3 @@ class Spline(rx.Component):
spline = Spline.create
-
-
-def spline_component():
- return rc.center(
- rx.center(
- spline(),
- overflow="hidden",
- width="42em",
- height="42em",
- ),
- width="100%",
- display=["none", "none", "none", "none", "flex", "flex"],
- )
diff --git a/pcweb/flexdown.py b/pcweb/flexdown.py
index 73b634685..76576c4fc 100644
--- a/pcweb/flexdown.py
+++ b/pcweb/flexdown.py
@@ -22,7 +22,6 @@
)
from pcweb.styles.fonts import base, code
-import reflex_chakra as rc
def get_code_style(color: str):
@@ -75,66 +74,71 @@ def render(self, env) -> rx.Component:
has_content = bool(content.strip())
if has_content:
- return rc.accordion(
- rc.accordion_item(
- rc.accordion_button(
- rx.hstack(
- rx.box(
- rx.match(
- status,
- (
- "info",
- rx.icon(
- tag="info", size=18, margin_right=".5em"
+ return rx.accordion.root(
+ rx.accordion.item(
+ rx.accordion.header(
+ rx.accordion.trigger(
+ rx.hstack(
+ rx.box(
+ rx.match(
+ status,
+ (
+ "info",
+ rx.icon(
+ tag="info", size=18, margin_right=".5em"
+ ),
),
- ),
- (
- "success",
- rx.icon(
- tag="circle_check",
- size=18,
- margin_right=".5em",
+ (
+ "success",
+ rx.icon(
+ tag="circle_check",
+ size=18,
+ margin_right=".5em",
+ ),
),
- ),
- (
- "warning",
- rx.icon(
- tag="triangle_alert",
- size=18,
- margin_right=".5em",
+ (
+ "warning",
+ rx.icon(
+ tag="triangle_alert",
+ size=18,
+ margin_right=".5em",
+ ),
),
- ),
- (
- "error",
- rx.icon(
- tag="ban", size=18, margin_right=".5em"
+ (
+ "error",
+ rx.icon(
+ tag="ban", size=18, margin_right=".5em"
+ ),
),
),
+ color=f"{rx.color(color, 11)}",
),
- color=f"{rx.color(color, 11)}",
- ),
- (
- markdown_with_shiki(
- title, margin_y="0px", style=get_code_style(color)
- )
- if title
- else self.render_fn(content=content)
+ (
+ markdown_with_shiki(
+ title,
+ margin_y="0px",
+ style=get_code_style(color),
+ )
+ if title
+ else self.render_fn(content=content)
+ ),
+ rx.spacer(),
+ rx.accordion.icon(color=f"{rx.color(color, 11)}"),
+ align_items="center",
+ justify_content="left",
+ text_align="left",
+ spacing="2",
+ width="100%",
),
- rx.spacer(),
- rc.accordion_icon(color=f"{rx.color(color, 11)}"),
- align_items="center",
- justify_content="left",
- text_align="left",
- spacing="2",
- width="100%",
+ padding="0px",
+ color=f"{rx.color(color, 11)} !important",
+ background_color="transparent !important",
+ border_radius="12px",
+ _hover={},
),
- padding="0px",
- color=f"{rx.color(color, 11)}",
- border_radius="12px",
- _hover={},
),
(
- rc.accordion_panel(
+ rx.accordion.content(
markdown(content), padding="0px", margin_top="16px"
)
if title
@@ -144,10 +148,11 @@ def render(self, env) -> rx.Component:
padding=["16px", "24px"],
background_color=f"{rx.color(color, 3)}",
border=f"1px solid {rx.color(color, 4)}",
- allow_toggle=True,
),
- is_disabled=True,
- allow_toggle=True,
+ background="none !important",
+ border_radius="0px",
+ box_shadow="unset !important",
+ collapsible=True,
width="100%",
margin_bottom="16px",
)
@@ -262,16 +267,13 @@ def render(self, env) -> rx.Component:
defs = [definition(title, content) for title, content in sections]
return rx.fragment(
- rx.mobile_only(rc.vstack(*defs)),
+ rx.mobile_only(rx.vstack(*defs)),
rx.tablet_and_desktop(
- rc.grid(
- *[
- rc.grid_item(d, row_span=1, col_span=1, width="100%")
- for d in defs
- ],
- template_columns="repeat(2, 1fr)",
+ rx.grid(
+ *[rx.box(d) for d in defs],
+ columns="2",
width="100%",
- gap=4,
+ gap="1rem",
margin_bottom="1em",
)
),
@@ -366,32 +368,36 @@ def render(self, env) -> rx.Component:
color = "blue"
- return rc.accordion(
- rc.accordion_item(
- rc.accordion_button(
- rx.hstack(
- (
- markdown_with_shiki(
- title,
- margin_y="0px",
- style=get_code_style(color),
- )
- if title
- else markdown_with_shiki("Video Description")
+ return rx.accordion.root(
+ rx.accordion.item(
+ rx.accordion.header(
+ rx.accordion.trigger(
+ rx.hstack(
+ (
+ markdown_with_shiki(
+ title,
+ margin_y="0px",
+ style=get_code_style(color),
+ )
+ if title
+ else markdown_with_shiki("Video Description")
+ ),
+ rx.spacer(),
+ rx.accordion.icon(color=f"{rx.color(color, 11)}"),
+ align_items="center",
+ justify_content="left",
+ text_align="left",
+ spacing="2",
+ width="100%",
),
- rx.spacer(),
- rc.accordion_icon(color=f"{rx.color(color, 11)}"),
- align_items="center",
- justify_content="left",
- text_align="left",
- spacing="2",
- width="100%",
+ padding="0px",
+ color=f"{rx.color(color, 11)} !important",
+ background_color="transparent !important",
+ border_radius="12px",
+ _hover={},
),
- padding="0px",
- color=f"{rx.color(color, 11)}",
- _hover={},
),
- rc.accordion_panel(
+ rx.accordion.content(
rx.video(
url=url,
width="100%",
@@ -405,12 +411,13 @@ def render(self, env) -> rx.Component:
border_radius="12px",
border=f"1px solid {rx.color(color, 4)}",
background_color=f"{rx.color(color, 3)}",
- allow_toggle=True,
padding=["16px", "24px"],
),
margin_bottom="16px",
- is_disabled=True,
- allow_toggle=True,
+ background="none !important",
+ border_radius="0px",
+ box_shadow="unset !important",
+ collapsible=True,
width="100%",
)
diff --git a/pcweb/pages/docs/custom_components.py b/pcweb/pages/docs/custom_components.py
index 534a4bfef..ff7cdefaa 100644
--- a/pcweb/pages/docs/custom_components.py
+++ b/pcweb/pages/docs/custom_components.py
@@ -2,7 +2,6 @@
import httpx
import json
import os
-import reflex_chakra as rc
from pcweb.templates.docpage import docpage, h1_comp, text_comp_2
from pcweb.styles.colors import c_color
from pcweb.styles.shadows import shadows
@@ -365,7 +364,7 @@ def add_item(category: dict) -> rx.Component:
def component_grid():
- return rc.box(
+ return rx.box(
rx.foreach(CustomComponentGalleryState.components_list, add_item),
class_name="gap-6 grid grid-cols-1 lg:grid-cols-1 2xl:grid-cols-3 [&>*]:min-w-[260px] w-full",
)
diff --git a/pcweb/pages/docs/recipes_overview.py b/pcweb/pages/docs/recipes_overview.py
index f5a8f992b..1b16ac7e6 100644
--- a/pcweb/pages/docs/recipes_overview.py
+++ b/pcweb/pages/docs/recipes_overview.py
@@ -6,7 +6,6 @@
h2_comp,
text_comp_2,
)
-import reflex_chakra as rc
def get_component_link(category, clist) -> str:
@@ -63,7 +62,7 @@ def component_grid():
)
return rx.box(
- rc.box(*sidebar, class_name="grid grid-cols-1 lg:grid-cols-3 gap-6"),
+ rx.box(*sidebar, class_name="grid grid-cols-1 lg:grid-cols-3 gap-6"),
)
@@ -83,7 +82,7 @@ def info_card(title, content):
def card_section():
return rx.box(
- rc.box(
+ rx.box(
info_card(
"Portable",
"Easy to copy and integrate into your next Reflex project.",
diff --git a/pcweb/pages/errors.py b/pcweb/pages/errors.py
index 6a3715483..e9e0dd007 100644
--- a/pcweb/pages/errors.py
+++ b/pcweb/pages/errors.py
@@ -1,13 +1,234 @@
import reflex as rx
from pcweb.templates.webpage import webpage
-from pcweb.flexdown import xd2 as xd
from pcweb import constants
from pcweb.components.webpage.comps import h1_title
+from pcweb.flexdown import markdown_with_shiki
+
+
+@rx.memo
+def h_comp_error(text: rx.Var[str]) -> rx.Component:
+ return rx.el.h3(
+ text,
+ class_name="font-smbold text-slate-12 text-start",
+ )
+
+
+@rx.memo
+def h4_comp_error(text: rx.Var[str]) -> rx.Component:
+ return rx.el.h4(
+ text,
+ class_name="font-smbold text-slate-12 text-start",
+ )
+
+
+@rx.memo
+def code_block_error(code: str):
+ return rx.box(
+ rx._x.code_block(
+ code,
+ language="python",
+ class_name="code-block !bg-slate-1",
+ ),
+ # class_name="!font-code",
+ )
+
+
+@rx.memo
+def markdown_error(text: str):
+ return markdown_with_shiki(
+ text,
+ class_name="font-small text-slate-11 text-start markdown-code",
+ )
+
+
+def error_message(
+ heading: str, error_code: str, solution: rx.Component, error_type: str = ""
+) -> rx.Component:
+ return rx.box(
+ rx.accordion.root(
+ rx.accordion.item(
+ rx.accordion.header(
+ rx.accordion.trigger(
+ rx.box(
+ rx.box(
+ h_comp_error(text=heading),
+ rx.code(error_type, class_name="code-error-style")
+ if error_type != ""
+ else rx.fragment(),
+ class_name="flex flex-row gap-2 items-center",
+ ),
+ rx.text(
+ error_code,
+ class_name="font-code text-violet-9 text-pretty font-medium",
+ ),
+ class_name="flex flex-col gap-2.5 text-start",
+ ),
+ rx.spacer(),
+ rx.accordion.icon(color="var(--c-slate-9)"),
+ class_name="!bg-transparent !hover:bg-transparent !p-4 lg:!p-6 gap-4 lg:gap-32",
+ ),
+ ),
+ rx.accordion.content(
+ rx.box(
+ *solution,
+ class_name="!p-[0rem_1rem_1rem_1rem] lg:!p-[0rem_1.5rem_1.5rem_1.5rem] font-small text-slate-11 text-start flex flex-col gap-3 [&>code]:!font-code",
+ )
+ ),
+ class_name="border-none",
+ ),
+ type="multiple",
+ collapsible=True,
+ class_name="border-slate-4 !bg-slate-2 p-0 border !rounded-xl w-full !shadow-none",
+ ),
+ class_name="w-full",
+ )
def errors_content() -> rx.Component:
- return rx.el.ul(
- xd.render_file("errors.md"),
+ return rx.box(
+ error_message(
+ heading="Object null is not iterable",
+ error_code="TypeError: object null is not iterable (cannot read property Symbol(Symbol.iterator))",
+ solution=[
+ h4_comp_error(
+ text="This is caused by using an older version of nodejs."
+ ),
+ rx.el.ul(
+ rx.el.li(
+ markdown_error(
+ text="Ensure the latest version of reflex is being used: `pip install reflex --upgrade`."
+ )
+ ),
+ rx.el.li(
+ markdown_error(
+ text="Remove the .web and ~/.reflex directories and re-run `reflex init`."
+ )
+ ),
+ class_name="list-disc pl-4 space-y-2",
+ ),
+ ],
+ error_type="Server Error",
+ ),
+ error_message(
+ heading="Hydration failed because the initial UI does not match",
+ error_code="Error: Hydration failed because the initial UI does not match what was rendered on the server.",
+ solution=[
+ h4_comp_error(text="Often caused by incorrect nesting of components"),
+ rx.el.ul(
+ rx.el.li(
+ markdown_error(
+ text="Particularly `` and `
`, but may also occur with tables"
+ )
+ ),
+ rx.el.li(
+ markdown_error(
+ text="Ensure there are no nested rx.text or layout components within `rx.text`"
+ )
+ ),
+ rx.el.li(
+ markdown_error(
+ text="Ensure that all tables are using `rx.table.header` and `rx.table.body` to wrap the `rx.table.row` rows"
+ )
+ ),
+ class_name="space-y-2 list-disc pl-4",
+ ),
+ rx.text.strong("No", class_name="text-red-10 font-smbold"),
+ code_block_error(
+ code="""rx.text(
+ rx.text("foo")
+)
+rx.text(
+ rx.box("foo")
+)
+rx.text(
+ rx.center("foo")
+)""",
+ ),
+ code_block_error(
+ code="""rx.table.root(
+ rx.table.row(
+ rx.table.column_header_cell("Full name"),
+ ),
+)""",
+ ),
+ rx.text.strong("Yes", class_name="text-green-10 font-smbold"),
+ code_block_error(
+ code="""rx.text("foo")
+rx.box(
+ rx.text("foo")
+)
+rx.center(
+ rx.text("foo")
+)""",
+ ),
+ code_block_error(
+ code="""rx.table.root(
+ rx.table.header(
+ rx.table.row(
+ rx.table.column_header_cell("Full name"),
+ ),
+ ),
+)""",
+ ),
+ rx.text(
+ "See upstream docs ",
+ rx.link(
+ "here",
+ href="https://nextjs.org/docs/messages/react-hydration-error",
+ underline="always",
+ ),
+ ".",
+ ),
+ ],
+ error_type="Unhandled Runtime Error",
+ ),
+ error_message(
+ heading="Invalid var passed for prop",
+ error_code="TypeError: Invalid var passed for prop href, expected type , got value {state.my_list.at(i)} of type typing.Any.",
+ solution=[
+ h4_comp_error(text="Add a type annotation for list Vars"),
+ rx.text(
+ "For certain props, reflex validates type correctness of the variable. Especially when de-referencing lists and dicts, it is important to supply the correct annotation."
+ ),
+ code_block_error(
+ code="""class State(rx.State):
+ # NO
+ my_list = ["a", "b", "c"]
+
+ # YES
+ my_indexable_list: list[str] = ["a", "b", "c"]""",
+ language="python",
+ ),
+ rx.el.ul(
+ rx.el.li("Add type annotations to all state Vars."),
+ class_name="list-disc pl-4",
+ ),
+ ],
+ ),
+ error_message(
+ heading="TypeError: metaclass conflict (SQLModel)",
+ error_code="TypeError: metaclass conflict: the metaclass of a derived class must be a (non-strict) subclass of the metaclasses of all its bases",
+ solution=[
+ h4_comp_error(
+ text="This is caused by importing sqlmodel earlier than reflex."
+ ),
+ rx.el.ul(
+ rx.el.li("Ensure that reflex is imported before sqlmodel."),
+ class_name="list-disc pl-4",
+ ),
+ ],
+ error_type="Python Error",
+ ),
+ error_message(
+ heading="ImportError: couldn't import psycopg",
+ error_code="ImportError: couldn't import psycopg 'python' implementation: libpq library not found | couldn't import psycopg 'binary' implementation: No module named 'psycopg_binary' | couldn't import psycopg 'c' implementation: No module named 'psycopg_c'",
+ solution=[
+ h4_comp_error(
+ text="This is caused by not installing the correct psycopg package. Solution is to add the `psycopg[binary]==3.2.3` package to your requirements.txt file."
+ ),
+ ],
+ error_type="Import Error",
+ ),
class_name="flex flex-col gap-6 w-full",
)
diff --git a/pcweb/pages/faq.py b/pcweb/pages/faq.py
index c52b99b51..b109c9ccf 100644
--- a/pcweb/pages/faq.py
+++ b/pcweb/pages/faq.py
@@ -6,7 +6,6 @@
from pcweb.constants import DISCORD_URL, CONTRIBUTING_URL
from pcweb.components.webpage.comps import h1_title
from pcweb.flexdown import markdown_with_shiki
-import reflex_chakra as rc
faq_items = [
{
@@ -128,24 +127,27 @@
def faq_item(question: str, answer: str, index: int):
return rx.el.li(
- rc.accordion(
- rc.accordion_item(
- rc.accordion_button(
- rx.el.h3(
- question, class_name="font-smbold text-slate-12 text-start"
+ rx.accordion.root(
+ rx.accordion.item(
+ rx.accordion.header(
+ rx.accordion.trigger(
+ rx.el.h3(
+ question, class_name="font-smbold text-slate-12 text-start"
+ ),
+ rx.spacer(),
+ rx.accordion.icon(color="var(--c-slate-9)"),
+ class_name="!bg-transparent hover:!bg-transparent !p-4 lg:!p-6",
),
- rc.spacer(),
- rc.accordion_icon(color="var(--c-slate-9)"),
- class_name="!bg-transparent hover:!bg-transparent !p-4 lg:!p-6",
),
- rc.accordion_panel(
+ rx.accordion.content(
answer,
class_name="!p-[0rem_1rem_1rem_1rem] lg:!p-[0rem_1.5rem_1.5rem_1.5rem] font-small text-slate-11 text-start [&>code]:!font-code",
),
class_name="border-none",
),
- allow_multiple=True,
- class_name="border-slate-4 bg-slate-2 p-0 border rounded-xl w-full",
+ type="multiple",
+ collapsible=True,
+ class_name="border-slate-4 !bg-slate-2 p-0 border rounded-xl w-full !shadow-none",
),
class_name="w-full",
)
diff --git a/pcweb/pages/index/demos/chatbot/chatbot.py b/pcweb/pages/index/demos/chatbot/chatbot.py
index a54dc7fd8..1f7635e4a 100644
--- a/pcweb/pages/index/demos/chatbot/chatbot.py
+++ b/pcweb/pages/index/demos/chatbot/chatbot.py
@@ -17,7 +17,6 @@ class TutorialState(rx.State):
@rx.event
async def submit(self, form_data: dict):
-
question = form_data["question"]
# Our chatbot has some brains now!
client = AsyncOpenAI(api_key=os.environ["OPENAI_API_KEY"])
diff --git a/pcweb/pages/pricing/header.py b/pcweb/pages/pricing/header.py
index 7fd23e83e..a984a359d 100644
--- a/pcweb/pages/pricing/header.py
+++ b/pcweb/pages/pricing/header.py
@@ -10,14 +10,23 @@ def header() -> rx.Component:
),
rx.hstack(
rx.el.a(
- rx.badge("Build with AI", class_name="text-lg text-center text-wrap rounded-md bg-[--violet-9] flex items-center justify-center text-[#FCFCFD]"),
+ rx.badge(
+ "Build with AI",
+ class_name="text-lg text-center text-wrap rounded-md bg-[--violet-9] flex items-center justify-center text-[#FCFCFD]",
+ ),
href="https://reflex.build",
),
rx.el.a(
- rx.badge("Deploy with Cloud", class_name="text-lg text-center text-wrap rounded-md bg-[--violet-9] flex items-center justify-center text-[#FCFCFD]"),
+ rx.badge(
+ "Deploy with Cloud",
+ class_name="text-lg text-center text-wrap rounded-md bg-[--violet-9] flex items-center justify-center text-[#FCFCFD]",
+ ),
href="https://cloud.reflex.dev",
),
- rx.badge("Scale with Enterprise", class_name="text-lg text-center text-wrap rounded-md bg-[--violet-9] flex items-center justify-center text-[#FCFCFD]"),
+ rx.badge(
+ "Scale with Enterprise",
+ class_name="text-lg text-center text-wrap rounded-md bg-[--violet-9] flex items-center justify-center text-[#FCFCFD]",
+ ),
gap="2rem",
),
class_name="flex flex-col gap-4 justify-center items-center max-w-[64.19rem] 2xl:border-x border-slate-4 w-full pb-16 "
diff --git a/pcweb/pages/pricing/plan_cards.py b/pcweb/pages/pricing/plan_cards.py
index 67dd3df8d..254b82dc9 100644
--- a/pcweb/pages/pricing/plan_cards.py
+++ b/pcweb/pages/pricing/plan_cards.py
@@ -1,6 +1,10 @@
import reflex as rx
from pcweb.components.new_button import button
-from pcweb.constants import REFLEX_DEV_WEB_LANDING_FORM_URL_GET_DEMO, REFLEX_CLOUD_URL, REFLEX_DOCS_URL
+from pcweb.constants import (
+ REFLEX_DEV_WEB_LANDING_FORM_URL_GET_DEMO,
+ REFLEX_CLOUD_URL,
+ REFLEX_DOCS_URL,
+)
def radial_circle(violet: bool = False) -> rx.Component:
@@ -139,7 +143,7 @@ def card(
features: list[tuple[str, str]],
button_text: str,
price: str = None,
- redirect_url: str = None
+ redirect_url: str = None,
) -> rx.Component:
return rx.box(
rx.el.div(
@@ -254,7 +258,7 @@ def plan_cards() -> rx.Component:
"Free users are limited to 20 hours of 1 vCPU, 1 GB RAM machines per month.",
),
("code", "Reflex Open Source"),
- ("heart-handshake", "Discord/Github Support")
+ ("heart-handshake", "Discord/Github Support"),
],
"Start building for free",
price="Free",
@@ -277,7 +281,11 @@ def plan_cards() -> rx.Component:
"For teams looking to scale their applications.",
[
("users", "Invite your team mates"),
- ("cable", "Connect AI Builder to your Data", "Integrations include Databricks, Snowflake, etc."),
+ (
+ "cable",
+ "Connect AI Builder to your Data",
+ "Integrations include Databricks, Snowflake, etc.",
+ ),
("lock-keyhole", "One Click Auth"),
("file-badge", "AG Grid with no Reflex Branding"),
("mail", "Email support"),
diff --git a/pcweb/pages/pricing/pricing.py b/pcweb/pages/pricing/pricing.py
index e56c9d1cc..2440f855b 100644
--- a/pcweb/pages/pricing/pricing.py
+++ b/pcweb/pages/pricing/pricing.py
@@ -4,7 +4,10 @@
from pcweb.pages.index.views.footer_index import footer_index
from pcweb.pages.pricing.header import header
from pcweb.pages.pricing.plan_cards import plan_cards
-from pcweb.pages.pricing.table import comparison_table_hosting, comparison_table_ai_and_oss
+from pcweb.pages.pricing.table import (
+ comparison_table_hosting,
+ comparison_table_ai_and_oss,
+)
from pcweb.pages.pricing.faq import faq
from pcweb.pages.pricing.calculator import calculator_section
from pcweb.meta.meta import hosting_meta_tags
diff --git a/pcweb/pages/pricing/table.py b/pcweb/pages/pricing/table.py
index 3bb31e5b2..f4aa79609 100644
--- a/pcweb/pages/pricing/table.py
+++ b/pcweb/pages/pricing/table.py
@@ -48,7 +48,13 @@
]
AI_TEXT_SECTION = [
- ("AI App Building", "Limited Access", "$20 credits/month", "$40 credits/user/month", "Custom"),
+ (
+ "AI App Building",
+ "Limited Access",
+ "$20 credits/month",
+ "$40 credits/user/month",
+ "Custom",
+ ),
]
AI_BOOLEAN_SECTION = [
@@ -64,10 +70,14 @@
]
-
-
HOSTING_TEXT_SECTION = [
- ("Compute", "20 hours/month", "$10 compute credits/month", "$20 compute credits/user/month", "Custom"),
+ (
+ "Compute",
+ "20 hours/month",
+ "$10 compute credits/month",
+ "$20 compute credits/user/month",
+ "Custom",
+ ),
("Regions", "Single", "Multiple", "Multiple", "Multiple"),
("Build Logs", "1 day", "30 days", "90 days", "Custom"),
("Runtime Logs", "1 hour", "1 day", "1 week", "Custom"),
@@ -221,8 +231,6 @@ def create_checkmark_row(feature: str, checks: tuple[bool, ...]) -> rx.Component
return create_table_row(cells)
-
-
def header_oss() -> rx.Component:
return rx.box(
rx.el.h3(
@@ -236,6 +244,7 @@ def header_oss() -> rx.Component:
class_name="flex items-center justify-between text-slate-11 flex-col py-[5rem] 2xl:border-x border-slate-4 max-w-[64.19rem] mx-auto w-full",
)
+
def table_body_oss() -> rx.Component:
return rx.table.root(
rx.table.header(
@@ -273,7 +282,6 @@ def table_body_oss() -> rx.Component:
)
-
def header_hosting() -> rx.Component:
return rx.box(
rx.el.h3(
@@ -287,6 +295,7 @@ def header_hosting() -> rx.Component:
class_name="flex items-center justify-between text-slate-11 flex-col py-[5rem] 2xl:border-x border-slate-4 max-w-[64.19rem] mx-auto w-full",
)
+
def table_body_hosting() -> rx.Component:
return rx.table.root(
rx.el.style(TABLE_STYLE),
@@ -327,8 +336,6 @@ def table_body_hosting() -> rx.Component:
)
-
-
def comparison_table_hosting() -> rx.Component:
return rx.box(
header_hosting(),
diff --git a/pcweb/styles/styles.py b/pcweb/styles/styles.py
index 233e5870b..8584079d4 100644
--- a/pcweb/styles/styles.py
+++ b/pcweb/styles/styles.py
@@ -2,7 +2,6 @@
from pcweb.styles.colors import c_color
import pcweb.styles.fonts as fonts
-import reflex_chakra as rc
import reflex as rx
@@ -54,22 +53,12 @@ def get_code_style_rdx(color: str):
"background_color": rx.color("accent", 5, True),
},
"font_family": SANS,
- rc.text: {
- "font_family": SANS,
- "font_size": 16,
- },
rx.heading: {
"font_family": SANS,
},
rx.divider: {"margin_bottom": "1em", "margin_top": "0.5em"},
rx.vstack: {"align_items": "center"},
rx.hstack: {"align_items": "center"},
- rc.divider: {"margin_bottom": "1em", "margin_top": "0.5em"},
- rc.code: {"color": "#1F1944", "bg": "#EAE4FD"},
- rc.alert: {
- "border_radius": "8px",
- },
- rc.link: {"text_decoration": "none", "_hover": {}},
rx.markdown: {
"background": "transparent",
},
diff --git a/requirements.txt b/requirements.txt
index d1f5a777b..994bb9e71 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -16,4 +16,3 @@ reflex_type_animation==0.0.1
reflex-ag-grid==0.0.10
replicate==0.32.1
reflex-pyplot==0.1.3
-reflex-chakra==0.6.2