From 297e7a5d794ce2f1cf071535a52ef3166d08b0dc Mon Sep 17 00:00:00 2001 From: Elijah Date: Thu, 22 Aug 2024 09:44:47 +0000 Subject: [PATCH 1/2] Chakra components out --- blog/2024-02-16-reflex-v0.4.0.md | 2 +- docs/library/chakra/datadisplay/badge.md | 44 -- docs/library/chakra/datadisplay/divider.md | 34 -- docs/library/chakra/datadisplay/list.md | 68 ---- docs/library/chakra/datadisplay/stat.md | 41 -- docs/library/chakra/datadisplay/table.md | 142 ------- docs/library/chakra/disclosure/accordion.md | 103 ----- docs/library/chakra/disclosure/tabs.md | 48 --- docs/library/chakra/feedback/alert.md | 70 ---- .../chakra/feedback/circularprogress.md | 26 -- docs/library/chakra/feedback/progress.md | 24 -- docs/library/chakra/feedback/skeleton.md | 54 --- docs/library/chakra/feedback/spinner.md | 38 -- docs/library/chakra/forms/button.md | 375 ------------------ docs/library/chakra/forms/buttongroup.md | 150 ------- docs/library/chakra/forms/checkbox.md | 69 ---- docs/library/chakra/forms/editable.md | 48 --- docs/library/chakra/forms/form.md | 110 ----- docs/library/chakra/forms/formcontrol.md | 51 --- docs/library/chakra/forms/input.md | 110 ----- docs/library/chakra/forms/numberinput.md | 28 -- docs/library/chakra/forms/pininput.md | 45 --- docs/library/chakra/forms/radiogroup.md | 74 ---- docs/library/chakra/forms/rangeslider.md | 45 --- docs/library/chakra/forms/select.md | 86 ---- docs/library/chakra/forms/slider.md | 100 ----- docs/library/chakra/forms/switch.md | 48 --- docs/library/chakra/forms/textarea.md | 30 -- docs/library/chakra/layout/aspectratio.md | 27 -- docs/library/chakra/layout/box.md | 46 --- docs/library/chakra/layout/card.md | 25 -- docs/library/chakra/layout/center.md | 43 -- docs/library/chakra/layout/container.md | 20 - docs/library/chakra/layout/flex.md | 33 -- docs/library/chakra/layout/grid.md | 43 -- docs/library/chakra/layout/responsivegrid.md | 39 -- docs/library/chakra/layout/spacer.md | 23 -- docs/library/chakra/layout/stack.md | 36 -- docs/library/chakra/layout/wrap.md | 27 -- docs/library/chakra/media/avatar.md | 62 --- docs/library/chakra/media/icon.md | 43 -- docs/library/chakra/media/image.md | 54 --- docs/library/chakra/navigation/breadcrumb.md | 36 -- docs/library/chakra/navigation/link.md | 41 -- docs/library/chakra/navigation/linkoverlay.md | 18 - docs/library/chakra/overlay/alertdialog.md | 45 --- docs/library/chakra/overlay/drawer.md | 70 ---- docs/library/chakra/overlay/menu.md | 31 -- docs/library/chakra/overlay/modal.md | 42 -- docs/library/chakra/overlay/popover.md | 32 -- docs/library/chakra/overlay/tooltip.md | 20 - docs/library/chakra/typography/heading.md | 36 -- docs/library/chakra/typography/highlight.md | 20 - docs/library/chakra/typography/span.md | 21 - docs/library/chakra/typography/text.md | 27 -- docs/library/other/html.md | 2 +- pcweb/components/docpage/sidebar/sidebar.py | 18 +- .../sidebar/sidebar_items/component_lib.py | 22 +- pcweb/pages/docs/__init__.py | 13 - pcweb/pages/docs/component.py | 2 - 60 files changed, 4 insertions(+), 3076 deletions(-) delete mode 100644 docs/library/chakra/datadisplay/badge.md delete mode 100644 docs/library/chakra/datadisplay/divider.md delete mode 100644 docs/library/chakra/datadisplay/list.md delete mode 100644 docs/library/chakra/datadisplay/stat.md delete mode 100644 docs/library/chakra/datadisplay/table.md delete mode 100644 docs/library/chakra/disclosure/accordion.md delete mode 100644 docs/library/chakra/disclosure/tabs.md delete mode 100644 docs/library/chakra/feedback/alert.md delete mode 100644 docs/library/chakra/feedback/circularprogress.md delete mode 100644 docs/library/chakra/feedback/progress.md delete mode 100644 docs/library/chakra/feedback/skeleton.md delete mode 100644 docs/library/chakra/feedback/spinner.md delete mode 100644 docs/library/chakra/forms/button.md delete mode 100644 docs/library/chakra/forms/buttongroup.md delete mode 100644 docs/library/chakra/forms/checkbox.md delete mode 100644 docs/library/chakra/forms/editable.md delete mode 100644 docs/library/chakra/forms/form.md delete mode 100644 docs/library/chakra/forms/formcontrol.md delete mode 100644 docs/library/chakra/forms/input.md delete mode 100644 docs/library/chakra/forms/numberinput.md delete mode 100644 docs/library/chakra/forms/pininput.md delete mode 100644 docs/library/chakra/forms/radiogroup.md delete mode 100644 docs/library/chakra/forms/rangeslider.md delete mode 100644 docs/library/chakra/forms/select.md delete mode 100644 docs/library/chakra/forms/slider.md delete mode 100644 docs/library/chakra/forms/switch.md delete mode 100644 docs/library/chakra/forms/textarea.md delete mode 100644 docs/library/chakra/layout/aspectratio.md delete mode 100644 docs/library/chakra/layout/box.md delete mode 100644 docs/library/chakra/layout/card.md delete mode 100644 docs/library/chakra/layout/center.md delete mode 100644 docs/library/chakra/layout/container.md delete mode 100644 docs/library/chakra/layout/flex.md delete mode 100644 docs/library/chakra/layout/grid.md delete mode 100644 docs/library/chakra/layout/responsivegrid.md delete mode 100644 docs/library/chakra/layout/spacer.md delete mode 100644 docs/library/chakra/layout/stack.md delete mode 100644 docs/library/chakra/layout/wrap.md delete mode 100644 docs/library/chakra/media/avatar.md delete mode 100644 docs/library/chakra/media/icon.md delete mode 100644 docs/library/chakra/media/image.md delete mode 100644 docs/library/chakra/navigation/breadcrumb.md delete mode 100644 docs/library/chakra/navigation/link.md delete mode 100644 docs/library/chakra/navigation/linkoverlay.md delete mode 100644 docs/library/chakra/overlay/alertdialog.md delete mode 100644 docs/library/chakra/overlay/drawer.md delete mode 100644 docs/library/chakra/overlay/menu.md delete mode 100644 docs/library/chakra/overlay/modal.md delete mode 100644 docs/library/chakra/overlay/popover.md delete mode 100644 docs/library/chakra/overlay/tooltip.md delete mode 100644 docs/library/chakra/typography/heading.md delete mode 100644 docs/library/chakra/typography/highlight.md delete mode 100644 docs/library/chakra/typography/span.md delete mode 100644 docs/library/chakra/typography/text.md diff --git a/blog/2024-02-16-reflex-v0.4.0.md b/blog/2024-02-16-reflex-v0.4.0.md index 9a5b2cb75..56cba0792 100644 --- a/blog/2024-02-16-reflex-v0.4.0.md +++ b/blog/2024-02-16-reflex-v0.4.0.md @@ -54,7 +54,7 @@ This will convert all components in your app to the new namespace. For example, if you used an `rx.box` in your app, it will be converted to an `rx.chakra.box`. You will still be able to use any Chakra component through the `rx.chakra` namespace. -The [Chakra Docs]({lib.chakra.datadisplay.badge.path}) have been moved and updated to reflect the new namespace. +The [Chakra Docs](https://chakra.reflex.run) have been moved and updated to reflect the new namespace. ## New Core Components diff --git a/docs/library/chakra/datadisplay/badge.md b/docs/library/chakra/datadisplay/badge.md deleted file mode 100644 index 8a8a0f2a8..000000000 --- a/docs/library/chakra/datadisplay/badge.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -components: - - rx.chakra.Badge ---- - -```python exec -import reflex as rx -``` - -# Badge - -Badges are used to highlight an item's status for quick recognition. - -There are 3 variants of badges: `solid`, `subtle`, and `outline`. - -```python demo -rx.chakra.hstack( - rx.chakra.badge("Example", variant="solid", color_scheme="green"), - rx.chakra.badge("Example", variant="subtle", color_scheme="green"), - rx.chakra.badge("Example", variant="outline", color_scheme="green"), -) -``` - -Color schemes are an easy way to change the color of a badge. - -```python demo -rx.chakra.hstack( - rx.chakra.badge("Example", variant="subtle", color_scheme="green"), - rx.chakra.badge("Example", variant="subtle", color_scheme="red"), - rx.chakra.badge("Example", variant="subtle", color_scheme="yellow"), -) -``` - -You can also customize the badge through traditional style args. - -```python demo -rx.chakra.badge( - "Custom Badge", - bg="#90EE90", - color="#3B7A57", - border_color="#29AB87", - border_width=2 -) -``` diff --git a/docs/library/chakra/datadisplay/divider.md b/docs/library/chakra/datadisplay/divider.md deleted file mode 100644 index 8fb0404c1..000000000 --- a/docs/library/chakra/datadisplay/divider.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -components: - - rx.chakra.Divider ---- - -```python exec -import reflex as rx -``` - -# Divider - -Dividers are a quick built in way to separate sections of content. - -```python demo -rx.chakra.vstack( - rx.chakra.text("Example"), - rx.chakra.divider(border_color="black"), - rx.chakra.text("Example"), - rx.chakra.divider(variant="dashed", border_color="black"), - width="100%", -) -``` - -If the vertical orientation is used, make sure that the parent component is assigned a height. - -```python demo -rx.chakra.center( - rx.chakra.divider( - orientation="vertical", - border_color = "black" - ), - height = "4em" -) -``` diff --git a/docs/library/chakra/datadisplay/list.md b/docs/library/chakra/datadisplay/list.md deleted file mode 100644 index dc12a66c9..000000000 --- a/docs/library/chakra/datadisplay/list.md +++ /dev/null @@ -1,68 +0,0 @@ ---- -components: - - rx.chakra.List - - rx.chakra.ListItem - - rx.chakra.UnorderedList - - rx.chakra.OrderedList ---- - -```python exec -import reflex as rx -``` - -# List - -There are three types of lists: regular lists, ordered, unordered. - -The shorthand syntax used to create a list is by passing in a list of items. -These items can be components or Python primitives. - -```python demo -rx.chakra.list( - items=["Example 1", "Example 2", "Example 3"], - spacing=".25em" -) -``` - -The examples below have the explicit syntax of list and list_items. -Regular lists are used to display a list of items. -They have no bullet points or numbers and stack the list items vertically. - -```python demo -rx.chakra.list( - rx.chakra.list_item("Example 1"), - rx.chakra.list_item("Example 2"), - rx.chakra.list_item("Example 3"), -) -``` - -Unordered have bullet points to display the list items. - -```python demo -rx.chakra.unordered_list( - rx.chakra.list_item("Example 1"), - rx.chakra.list_item("Example 2"), - rx.chakra.list_item("Example 3"), -) -``` - -Ordered lists have numbers to display the list items. - -```python demo -rx.chakra.ordered_list( - rx.chakra.list_item("Example 1"), - rx.chakra.list_item("Example 2"), - rx.chakra.list_item("Example 3"), -) -``` - -Lists can also be used with icons. - -```python demo -rx.chakra.list( - rx.chakra.list_item(rx.chakra.icon(tag="check_circle", color = "green"), "Allowed"), - rx.chakra.list_item(rx.chakra.icon(tag="not_allowed", color = "red"), "Not"), - rx.chakra.list_item(rx.chakra.icon(tag="settings", color = "grey"), "Settings"), - spacing = ".25em" -) -``` diff --git a/docs/library/chakra/datadisplay/stat.md b/docs/library/chakra/datadisplay/stat.md deleted file mode 100644 index 7e85e978c..000000000 --- a/docs/library/chakra/datadisplay/stat.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -components: - - rx.chakra.Stat - - rx.chakra.StatLabel - - rx.chakra.StatNumber - - rx.chakra.StatHelpText - - rx.chakra.StatArrow - - rx.chakra.StatGroup ---- - -```python exec -import reflex as rx -``` - -# Stat - -The stat component is a great way to visualize statistics in a clean and concise way. - -```python demo -rx.chakra.stat( - rx.chakra.stat_label("Example Price"), - rx.chakra.stat_number("$25"), - rx.chakra.stat_help_text("The price of the item."), -) -``` - -Example of a stats in a group with arrow. - -```python demo -rx.chakra.stat_group( - rx.chakra.stat( - rx.chakra.stat_number("$250"), - rx.chakra.stat_help_text("%50", rx.chakra.stat_arrow(type_="increase")), - ), - rx.chakra.stat( - rx.chakra.stat_number("£100"), - rx.chakra.stat_help_text("%50", rx.chakra.stat_arrow(type_="decrease")), - ), - width="100%", -) -``` diff --git a/docs/library/chakra/datadisplay/table.md b/docs/library/chakra/datadisplay/table.md deleted file mode 100644 index 1c44de59a..000000000 --- a/docs/library/chakra/datadisplay/table.md +++ /dev/null @@ -1,142 +0,0 @@ ---- -components: - - rx.chakra.Table - - rx.chakra.TableCaption - - rx.chakra.Thead - - rx.chakra.Tbody - - rx.chakra.Tfoot - - rx.chakra.Tr - - rx.chakra.Th - - rx.chakra.Td - - rx.chakra.TableContainer ---- - -```python exec -import reflex as rx -``` - -# Table - -Tables are used to organize and display data efficiently. -The table component differs from the `data_table`` component in that it is not meant to display large amounts of data. -It is meant to display data in a more organized way. - -Tables can be created with a shorthand syntax or by explicitly creating the table components. -The shorthand syntax is great for simple tables, but if you need more control over the table you can use the explicit syntax. - -Let's start with the shorthand syntax. -The shorthand syntax has `headers`, `rows`, and `footers` props. - -```python demo -rx.chakra.table_container( - rx.chakra.table( - headers=["Name", "Age", "Location"], - rows=[ - ("John", 30, "New York"), - ("Jane", 31, "San Francisco"), - ("Joe", 32, "Los Angeles") - ], - footers=["Footer 1", "Footer 2", "Footer 3"], - variant='striped' - ) -) -``` - -Let's create a simple table explicitly. In this example we will make a table with 2 columns: `Name` and `Age`. - -```python demo -rx.chakra.table( - rx.chakra.thead( - rx.chakra.tr( - rx.chakra.th("Name"), - rx.chakra.th("Age"), - ) - ), - rx.chakra.tbody( - rx.chakra.tr( - rx.chakra.td("John"), - rx.chakra.td(30), - ) - ), -) -``` - -In the examples we will be using this data to display in a table. - -```python exec -columns = ["Name", "Age", "Location"] -data = [ - ["John", 30, "New York"], - ["Jane", 25, "San Francisco"], -] -footer = ["Footer 1", "Footer 2", "Footer 3"] -``` - -```python -columns = ["Name", "Age", "Location"] -data = [ - ["John", 30, "New York"], - ["Jane", 25, "San Francisco"], -] -footer = ["Footer 1", "Footer 2", "Footer 3"] -``` - -Now lets create a table with the data we created. - -```python eval -rx.chakra.center( - rx.chakra.table_container( - rx.chakra.table( - rx.chakra.table_caption("Example Table"), - rx.chakra.thead( - rx.chakra.tr( - *[rx.chakra.th(column) for column in columns] - ) - ), - rx.chakra.tbody( - *[rx.chakra.tr(*[rx.chakra.td(item) for item in row]) for row in data] - ), - rx.chakra.tfoot( - rx.chakra.tr( - *[rx.chakra.th(item) for item in footer] - ) - ), - ) - ) -) -``` - -Tables can also be styled with the variant and color_scheme arguments. - -```python demo -rx.chakra.table_container( - rx.chakra.table( - rx.chakra.thead( - rx.chakra.tr( - rx.chakra.th("Name"), - rx.chakra.th("Age"), - rx.chakra.th("Location"), - ) - ), - rx.chakra.tbody( - rx.chakra.tr( - rx.chakra.td("John"), - rx.chakra.td(30), - rx.chakra.td("New York"), - ), - rx.chakra.tr( - rx.chakra.td("Jane"), - rx.chakra.td(31), - rx.chakra.td("San Francisco"), - ), - rx.chakra.tr( - rx.chakra.td("Joe"), - rx.chakra.td(32), - rx.chakra.td("Los Angeles"), - ) - ), - variant='striped', - color_scheme='teal' - ) -) -``` diff --git a/docs/library/chakra/disclosure/accordion.md b/docs/library/chakra/disclosure/accordion.md deleted file mode 100644 index a70e6efed..000000000 --- a/docs/library/chakra/disclosure/accordion.md +++ /dev/null @@ -1,103 +0,0 @@ ---- -components: - - rx.chakra.Accordion - - rx.chakra.AccordionItem - - rx.chakra.AccordionButton - - rx.chakra.AccordionPanel - - rx.chakra.AccordionIcon ---- - -```python exec -import reflex as rx -``` - -# Accordion - -Accordions allow you to hide and show content in a container under a header. - -Accordion consist of an outer accordion component and inner accordion items. -Each item has a optional button and panel. The button is used to toggle the panel's visibility. - -```python demo -rx.chakra.accordion( - rx.chakra.accordion_item( - rx.chakra.accordion_button( - rx.chakra.heading("Example"), - rx.chakra.accordion_icon(), - ), - rx.chakra.accordion_panel( - rx.chakra.text("This is an example of an accordion component.") - ) - ), - allow_toggle = True, - width = "100%" -) -``` - -An accordion can have multiple items. - -```python demo -rx.chakra.accordion( - rx.chakra.accordion_item( - rx.chakra.accordion_button( - rx.chakra.heading("Example 1"), - rx.chakra.accordion_icon(), - ), - rx.chakra.accordion_panel( - rx.chakra.text("This is an example of an accordion component.") - ), - ), - rx.chakra.accordion_item( - rx.chakra.accordion_button( - rx.chakra.heading("Example 2"), - rx.chakra.accordion_icon(), - ), - rx.chakra.accordion_panel( - rx.chakra.text("This is an example of an accordion component.") - ), - ), - allow_multiple = True, - bg="black", - color="white", - width = "100%" -) -``` - -You can create multilevel accordions by nesting accordions within the outer accordion panel. - -```python demo -rx.chakra.accordion( - rx.chakra.accordion_item( - rx.chakra.accordion_button( - rx.chakra.accordion_icon(), - rx.chakra.heading("Outer"), - - ), - rx.chakra.accordion_panel( - rx.chakra.accordion( - rx.chakra.accordion_item( - rx.chakra.accordion_button( - rx.chakra.accordion_icon(), - rx.chakra.heading("Inner"), - ), - rx.chakra.accordion_panel( - rx.chakra.badge("Inner Panel", variant="solid", color_scheme="green"), - ) - ) - ), - ) - ), - width = "100%" -) -``` - -You can also create an accordion using the shorthand syntax. -Pass a list of tuples to the `items` prop. -Each tuple should contain a label and a panel. - -```python demo -rx.chakra.accordion( - items=[("Label 1", rx.chakra.center("Panel 1")), ("Label 2", rx.chakra.center("Panel 2"))], - width="100%" -) -``` diff --git a/docs/library/chakra/disclosure/tabs.md b/docs/library/chakra/disclosure/tabs.md deleted file mode 100644 index 103844656..000000000 --- a/docs/library/chakra/disclosure/tabs.md +++ /dev/null @@ -1,48 +0,0 @@ ---- -components: - - rx.chakra.Tabs - - rx.chakra.TabList - - rx.chakra.Tab - - rx.chakra.TabPanel - - rx.chakra.TabPanels ---- - -```python exec -import reflex as rx -``` - -# Tabs - -Tab components allow you display content in multiple pages within a container. -These page are organized by a tab list and the corresponding tab panel can take in children components if needed. - -```python demo -rx.chakra.tabs( - rx.chakra.tab_list( - rx.chakra.tab("Tab 1"), - rx.chakra.tab("Tab 2"), - rx.chakra.tab("Tab 3"), - ), - rx.chakra.tab_panels( - rx.chakra.tab_panel(rx.chakra.text("Text from tab 1.")), - rx.chakra.tab_panel(rx.chakra.checkbox("Text from tab 2.")), - rx.chakra.tab_panel(rx.chakra.button("Text from tab 3.", color="black")), - ), - bg="black", - color="white", - shadow="lg", -) -``` - -You can create a tab component using the shorthand syntax. -Pass a list of tuples to the `items` prop. -Each tuple should contain a label and a panel. - -```python demo -rx.chakra.tabs( - items = [("Tab 1", rx.chakra.text("Text from tab 1.")), ("Tab 2", rx.chakra.checkbox("Text from tab 2.")), ("Tab 3", rx.chakra.button("Text from tab 3.", color="black"))], - bg="black", - color="white", - shadow="lg", -) -``` diff --git a/docs/library/chakra/feedback/alert.md b/docs/library/chakra/feedback/alert.md deleted file mode 100644 index b293dbc87..000000000 --- a/docs/library/chakra/feedback/alert.md +++ /dev/null @@ -1,70 +0,0 @@ ---- -components: - - rx.chakra.Alert - - rx.chakra.AlertIcon - - rx.chakra.AlertTitle - - rx.chakra.AlertDescription ---- - -```python exec -import reflex as rx -``` - -# Alert - -Alerts are used to communicate a state that affects a system, feature or page. -An example of the different alert statuses is shown below. - -```python demo -rx.chakra.vstack( - rx.chakra.alert( - rx.chakra.alert_icon(), - rx.chakra.alert_title("Error Reflex version is out of date."), - status="error", - ), - rx.chakra.alert( - rx.chakra.alert_icon(), - rx.chakra.alert_title("Warning Reflex version is out of date."), - status="warning", - ), - rx.chakra.alert( - rx.chakra.alert_icon(), - rx.chakra.alert_title("Reflex version is up to date."), - status="success", - ), - rx.chakra.alert( - rx.chakra.alert_icon(), - rx.chakra.alert_title("Reflex version is 0.1.32."), - status="info", - ), - width="100%", -) -``` - -Along with different status types, alerts can also have different style variants and an optional description. -By default the variant is 'subtle'. - -```python demo -rx.chakra.vstack( - rx.chakra.alert( - rx.chakra.alert_icon(), - rx.chakra.alert_title("Reflex version is up to date."), - rx.chakra.alert_description("No need to update."), - status="success", - variant="subtle", - ), - rx.chakra.alert( - rx.chakra.alert_icon(), - rx.chakra.alert_title("Reflex version is up to date."), - status="success", - variant="solid", - ), - rx.chakra.alert( - rx.chakra.alert_icon(), - rx.chakra.alert_title("Reflex version is up to date."), - status="success", - variant="top-accent", - ), - width="100%", -) -``` diff --git a/docs/library/chakra/feedback/circularprogress.md b/docs/library/chakra/feedback/circularprogress.md deleted file mode 100644 index ca6f56326..000000000 --- a/docs/library/chakra/feedback/circularprogress.md +++ /dev/null @@ -1,26 +0,0 @@ ---- -components: - - rx.chakra.CircularProgress - - rx.chakra.CircularProgressLabel ---- - -```python exec -import reflex as rx -``` - -# CircularProgress - -The CircularProgress component is used to indicate the progress for determinate and indeterminate processes. -Determinate progress: fills the circular track with color, as the indicator moves from 0 to 360 degrees. -Indeterminate progress: grows and shrinks the indicator while moving along the circular track. - -```python demo -rx.chakra.hstack( - rx.chakra.circular_progress(value=0), - rx.chakra.circular_progress(value=25), - rx.chakra.circular_progress(rx.chakra.circular_progress_label(50), value=50), - rx.chakra.circular_progress(value=75), - rx.chakra.circular_progress(value=100), - rx.chakra.circular_progress(is_indeterminate=True), -) -``` diff --git a/docs/library/chakra/feedback/progress.md b/docs/library/chakra/feedback/progress.md deleted file mode 100644 index 4aa42f88d..000000000 --- a/docs/library/chakra/feedback/progress.md +++ /dev/null @@ -1,24 +0,0 @@ ---- -components: - - rx.chakra.Progress ---- - -```python exec -import reflex as rx -``` - -# Progress - -Progress is used to display the progress status for a task that takes a long time or consists of several steps. - -```python demo -rx.chakra.vstack( - rx.chakra.progress(value=0, width="100%"), - rx.chakra.progress(value=50, width="100%"), - rx.chakra.progress(value=75, width="100%"), - rx.chakra.progress(value=100, width="100%"), - rx.chakra.progress(is_indeterminate=True, width="100%"), - spacing="1em", - min_width=["10em", "20em"], -) -``` diff --git a/docs/library/chakra/feedback/skeleton.md b/docs/library/chakra/feedback/skeleton.md deleted file mode 100644 index 46f1d4e3f..000000000 --- a/docs/library/chakra/feedback/skeleton.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -components: - - rx.chakra.Skeleton - - rx.chakra.SkeletonCircle - - rx.chakra.SkeletonText ---- - -```python exec -import reflex as rx -``` - -# Skeleton - -Skeleton is used to display the loading state of some components. - -```python demo -rx.chakra.stack( - rx.chakra.skeleton(height="10px", speed=1.5), - rx.chakra.skeleton(height="15px", speed=1.5), - rx.chakra.skeleton(height="20px", speed=1.5), - width="50%", -) -``` - -Along with the basic skeleton box there are also a skeleton circle and text for ease of use. - -```python demo -rx.chakra.stack( - rx.chakra.skeleton_circle(size="30px"), - rx.chakra.skeleton_text(no_of_lines=8), - width="50%", -) -``` - -Another feature of skeleton is the ability to animate colors. -We provide the args start_color and end_color to animate the color of the skeleton component(s). - -```python demo -rx.chakra.stack( - rx.chakra.skeleton_text( - no_of_lines=5, start_color="pink.500", end_color="orange.500" - ), - width="50%", -) -``` - -You can prevent the skeleton from loading by using the `is_loaded` prop. - -```python demo -rx.chakra.vstack( - rx.chakra.skeleton(rx.chakra.text("Text is already loaded."), is_loaded=True), - rx.chakra.skeleton(rx.chakra.text("Text is already loaded."), is_loaded=False), -) -``` diff --git a/docs/library/chakra/feedback/spinner.md b/docs/library/chakra/feedback/spinner.md deleted file mode 100644 index 79602f6fc..000000000 --- a/docs/library/chakra/feedback/spinner.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -components: - - rx.chakra.Spinner ---- - -```python exec -import reflex as rx -``` - -# Spinner - -Spinners provide a visual cue that an event is either processing, awaiting a course of change or a result. - -```python demo -rx.chakra.hstack( - rx.chakra.spinner(color="red", size="xs"), - rx.chakra.spinner(color="orange", size="sm"), - rx.chakra.spinner(color="green", size="md"), - rx.chakra.spinner(color="blue", size="lg"), - rx.chakra.spinner(color="purple", size="xl"), -) -``` - -Along with the color you can style further with props such as speed, empty color, and thickness. - -```python demo -rx.chakra.hstack( - rx.chakra.spinner(color="lightgreen", thickness=1, speed="1s", size="xl"), - rx.chakra.spinner(color="lightgreen", thickness=5, speed="1.5s", size="xl"), - rx.chakra.spinner( - color="lightgreen", - thickness=10, - speed="2s", - empty_color="red", - size="xl", - ), -) -``` diff --git a/docs/library/chakra/forms/button.md b/docs/library/chakra/forms/button.md deleted file mode 100644 index cfa117b1c..000000000 --- a/docs/library/chakra/forms/button.md +++ /dev/null @@ -1,375 +0,0 @@ ---- -components: - - rx.chakra.Button - - rx.chakra.IconButton ---- - -```python exec -import reflex as rx -from pcweb.templates.docpage import docdemo - - -basic_button = """rx.chakra.button("Click Me!") -""" -button_style = """rx.chakra.button_group( - rx.chakra.button("Example", bg="lightblue", color="black", size = 'sm'), - rx.chakra.button("Example", bg="orange", color="white", size = 'md'), - rx.chakra.button("Example", color_scheme="red", size = 'lg'), - space = "1em", -) -""" -button_visual_states = """rx.chakra.button_group( - rx.chakra.button("Example", bg="lightgreen", color="black", is_loading = True), - rx.chakra.button("Example", bg="lightgreen", color="black", is_disabled = True), - rx.chakra.button("Example", bg="lightgreen", color="black", is_active = True), - space = '1em', -) -""" - -button_group_example = """rx.chakra.button_group( - rx.chakra.button(rx.chakra.icon(tag="minus"), color_scheme="red"), - rx.chakra.button(rx.chakra.icon(tag="add"), color_scheme="green"), - is_attached=True, -) -""" - -button_state = """class ButtonState(rx.State): - count: int = 0 - - def increment(self): - self.count += 1 - - def decrement(self): - self.count -= 1 -""" -exec(button_state) -button_state_example = """rx.chakra.hstack( - rx.chakra.button( - "Decrement", - bg="#fef2f2", - color="#b91c1c", - border_radius="lg", - on_click=ButtonState.decrement, - ), - rx.chakra.heading(ButtonState.count, font_size="2em", padding_x="0.5em"), - rx.chakra.button( - "Increment", - bg="#ecfdf5", - color="#047857", - border_radius="lg", - on_click=ButtonState.increment, - ), -) -""" - - -button_state_code = f""" -import reflex as rx - -{button_state} - -def index(): - return {button_state_example} - -app = rx.chakra.App() -app.add_page(index)""" - -button_state2 = """class ExampleButtonState(rx.State): - text_value: str = "Random value" -""" -exec(button_state2) - -button_state2_render_code = """rx.chakra.vstack( - rx.chakra.text(ExampleButtonState.text_value), - rx.chakra.button( - "Change Value", - on_click=ExampleButtonState.set_text_value("Modified value")) - ) -""" - -button_state2_code = f""" -import reflex as rx - -{button_state2} - -def index(): - return {button_state2_render_code} - -app = rx.chakra.App() -app.add_page(index)""" - - -button_sizes = ( -"""rx.chakra.button_group( - rx.chakra.button( - 'Example', bg='lightblue', color='black', size='sm' - ), - rx.chakra.button( - 'Example', bg='orange', color='white', size='md' - ), - rx.chakra.button('Example', color_scheme='red', size='lg'), -) -""" -) - -button_colors = ( -"""rx.chakra.button_group( - rx.chakra.button('White Alpha', color_scheme='whiteAlpha', min_width='unset'), - rx.chakra.button('Black Alpha', color_scheme='blackAlpha', min_width='unset'), - rx.chakra.button('Gray', color_scheme='gray', min_width='unset'), - rx.chakra.button('Red', color_scheme='red', min_width='unset'), - rx.chakra.button('Orange', color_scheme='orange', min_width='unset'), - rx.chakra.button('Yellow', color_scheme='yellow', min_width='unset'), - rx.chakra.button('Green', color_scheme='green', min_width='unset'), - rx.chakra.button('Teal', color_scheme='teal', min_width='unset'), - rx.chakra.button('Blue', color_scheme='blue', min_width='unset'), - rx.chakra.button('Cyan', color_scheme='cyan', min_width='unset'), - rx.chakra.button('Purple', color_scheme='purple', min_width='unset'), - rx.chakra.button('Pink', color_scheme='pink', min_width='unset'), - rx.chakra.button('LinkedIn', color_scheme='linkedin', min_width='unset'), - rx.chakra.button('Facebook', color_scheme='facebook', min_width='unset'), - rx.chakra.button('Messenger', color_scheme='messenger', min_width='unset'), - rx.chakra.button('WhatsApp', color_scheme='whatsapp', min_width='unset'), - rx.chakra.button('Twitter', color_scheme='twitter', min_width='unset'), - rx.chakra.button('Telegram', color_scheme='telegram', min_width='unset'), - width='100%', -) - -""" -) - -button_colors_render_code = ( -"""rx.chakra.button_group( - rx.chakra.button('White Alpha', color_scheme='whiteAlpha'), - rx.chakra.button('Black Alpha', color_scheme='blackAlpha'), - rx.chakra.button('Gray', color_scheme='gray'), - rx.chakra.button('Red', color_scheme='red'), - rx.chakra.button('Orange', color_scheme='orange'), - rx.chakra.button('Yellow', color_scheme='yellow'), - rx.chakra.button('Green', color_scheme='green'), - rx.chakra.button('Teal', color_scheme='teal'), - rx.chakra.button('Blue', color_scheme='blue'), - rx.chakra.button('Cyan', color_scheme='cyan'), - rx.chakra.button('Purple', color_scheme='purple'), - rx.chakra.button('Pink', color_scheme='pink'), - rx.chakra.button('LinkedIn', color_scheme='linkedin'), - rx.chakra.button('Facebook', color_scheme='facebook'), - rx.chakra.button('Messenger', color_scheme='messenger'), - rx.chakra.button('WhatsApp', color_scheme='whatsapp'), - rx.chakra.button('Twitter', color_scheme='twitter'), - rx.chakra.button('Telegram', color_scheme='telegram'), -) - -""" -) - -button_variants = ( -"""rx.chakra.button_group( - rx.chakra.button('Ghost Button', variant='ghost'), - rx.chakra.button('Outline Button', variant='outline'), - rx.chakra.button('Solid Button', variant='solid'), - rx.chakra.button('Link Button', variant='link'), - rx.chakra.button('Unstyled Button', variant='unstyled'), - ) -""" - -) - -button_disable = ( -"""rx.chakra.button('Inactive button', is_disabled=True)""" -) - -loading_states = ( -"""rx.chakra.button( - 'Random button', - is_loading=True, - loading_text='Loading...', - spinner_placement='start' - ) -""" -) - -stack_buttons_vertical = ( -"""rx.chakra.stack( - rx.chakra.button('Button 1'), - rx.chakra.button('Button 2'), - rx.chakra.button('Button 3'), - direction='column', -) - -""" -) - -stack_buttons_horizontal = ( -"""rx.chakra.stack( - rx.chakra.button('Button 1'), - rx.chakra.button('Button 2'), - rx.chakra.button('Button 3'), - direction='row', -) -""" -) - -button_group = ( -"""rx.chakra.button_group( - rx.chakra.button('Option 1'), - rx.chakra.button('Option 2'), - rx.chakra.button('Option 3'), - variant='outline', - is_attached=True, - ) -""" - -) - -``` - -# Button - -Buttons are essential elements in your application's user interface that users can click to trigger events. -This documentation will help you understand how to use button components effectively in your Reflex application. - -## Basic Usage - -A basic button component is created using the `rx.chakra.button` method: - -```python eval -docdemo(basic_button) -``` - -## Button Sizing - -You can change the size of a button by setting the size prop to one of the following -values: `xs`,`sm`,`md`, or `lg`. - -```python eval -docdemo(button_sizes) -``` - -## Button colors - -Customize the appearance of buttons by adjusting their color scheme through the color_scheme prop. -You have the flexibility to choose from a range of color scales provided by your design -system, such as whiteAlpha, blackAlpha, gray, red, blue, or even utilize your own custom color scale. - -```python demo box -eval(button_colors) -``` - -```python -{button_colors_render_code.strip()} -``` - -## Button Variants - -You can customize the visual style of your buttons using the variant prop. Here are the available button variants: - -- `ghost`: A button with a transparent background and visible text. -- `outline`: A button with no background color but with a border. -- `solid`: The default button style with a solid background color. -- `link`: A button that resembles a text link. -- `unstyled`: A button with no specific styling. - -```python eval -docdemo(button_variants) -``` - -## Disabling Buttons - -Make buttons inactive by setting the `is_disabled` prop to `True`. - -```python eval -docdemo(button_disable) -``` - -## Handling Loading States - -To indicate a loading state for a button after it's clicked, you can use the following properties: - -- `is_loading`: Set this property to `True` to display a loading spinner. -- `loading_text`: Optionally, you can provide loading text to display alongside the spinner. -- `spinner_placement`: You can specify the placement of the spinner element, which is 'start' by default. - -```python eval -docdemo(loading_states) -``` - -## Handling Click Events - -You can define what happens when a button is clicked using the `on_click` event argument. -For example, to change a value in your application state when a button is clicked: - -```python demo box -eval(button_state2_render_code) -``` - -```python -{button_state2_code.strip()} -``` - -In the code above, The value of `text_value` is changed through the `set_text_value` event handler upon clicking the button. -Reflex provides a default setter event_handler for every base var which can be accessed by prefixing the base var with the `set_` keyword. - -Here’s another example that creates two buttons to increase and decrease a count value: - -```python demo box -eval(button_state_example) -``` - -```python -{button_state_code.strip()} -``` - -In this example, we have a `ButtonState` state class that maintains a count base var. -When the "Increment" button is clicked, it triggers the `ButtonState.increment` event handler, and when the "Decrement" -button is clicked, it triggers the `ButtonState.decrement` event handler. - -## Special Events and Server-Side Actions - -Buttons in Reflex can trigger special events and server-side actions, -allowing you to create dynamic and interactive user experiences. -You can bind these events to buttons using the `on_click` prop. -For a comprehensive list of -available special events and server-side actions, please refer to the -[Special Events Documentation](/docs/api-reference/special-events) for detailed information and usage examples. - -## Grouping Buttons - -In your Reflex application, you can group buttons effectively using the `Stack` component and -the `ButtonGroup` component. Each of these options offers unique capabilities to help you structure -and style your buttons. - -## Using the `Stack` Component - -The `Stack` component allows you to stack buttons both vertically and horizontally, providing a flexible -layout for your button arrangements. - -## Stack Buttons Vertically - -```python eval -docdemo(stack_buttons_vertical) -``` - -## Stack Buttons Horizontally - -```python eval -docdemo(stack_buttons_horizontal) -``` - -With the `stack` component, you can easily create both vertical and horizontal button arrangements. - -## Using the `rx.chakra.button_group` Component - -The `ButtonGroup` component is designed specifically for grouping buttons. It allows you to: - -- Set the `size` and `variant` of all buttons within it. -- Add `spacing` between the buttons. -- Flush the buttons together by removing the border radius of their children as needed. - -```python eval -docdemo(button_group) -``` - -```md alert -# The `ButtonGroup` component stacks buttons horizontally, whereas the `Stack` component allows stacking buttons both vertically and horizontally. -``` diff --git a/docs/library/chakra/forms/buttongroup.md b/docs/library/chakra/forms/buttongroup.md deleted file mode 100644 index e3fdb0610..000000000 --- a/docs/library/chakra/forms/buttongroup.md +++ /dev/null @@ -1,150 +0,0 @@ ---- -components: - - rx.chakra.ButtonGroup ---- - -```python exec -import reflex as rx -from pcweb.templates.docpage import docdemo - - -basic_button_group = ( -"""rx.chakra.button_group( - rx.chakra.button('Option 1'), - rx.chakra.button('Option 2'), - rx.chakra.button('Option 3'), - ) -""" -) - -button_group_attached = ( -"""rx.chakra.button_group( - rx.chakra.button('Option 1'), - rx.chakra.button('Option 2'), - rx.chakra.button('Option 3'), - is_attached=True, - ) - -""" -) - -button_group_variant = ( -"""rx.chakra.button_group( - rx.chakra.button('Option 1'), - rx.chakra.button('Option 2'), - rx.chakra.button('Option 3'), - variant='ghost', - ) - -""" -) - -button_group_sizes = ( -"""rx.chakra.button_group( - rx.chakra.button('Large Button', size='lg'), - rx.chakra.button('Medium Button', size='md'), - rx.chakra.button('Small Button', size='sm'), - ) - -""" -) - -button_group_disable = ( -"""rx.chakra.button_group( - rx.chakra.button('Option 1'), - rx.chakra.button('Option 2'), - rx.chakra.button('Option 3'), - is_disabled=True, - ) - -""" -) - -button_group_spacing = ( -"""rx.chakra.button_group( - rx.chakra.button('Option 1'), - rx.chakra.button('Option 2'), - rx.chakra.button('Option 3'), - spacing=8, - ) - -""" - -) -``` - -# Button Group - -The `rx.chakra.button_group` component allows you to create a group of buttons that are visually connected and styled together. -This is commonly used to group related actions or options in your application's user interface. - -## Basic Usage - -Here's an example of how to use the `rx.chakra.button_group` component to create a simple group of buttons: - -```python eval -docdemo(basic_button_group) -``` - -In this example, a button group is created with three buttons. The buttons are visually connected, and there -is a default spacing of `2` pixels between them. - -## Adjusting ButtonGroup Properties - -You can customize the appearance and behavior of the `rx.chakra.button_group` component by adjusting -its properties. For instance, you can set `is_attached` prop to `True` to make the buttons -appear flushed together: - -```python eval -docdemo(button_group_attached) -``` - -In this example, the `is_attached` property is set to `True`, resulting in the buttons having a seamless appearance. - -## ButtonGroup Variants - -Just like the `button` component, you can customize the visual style of your buttons using the `variant` prop. -This will apply to all buttons in the group. - -```python eval -docdemo(button_group_variant) -``` - -In this example, the `variant` prop is set to `ghost`, applying the variant style to all buttons in the group. - -## ButtonGroup Sizes - -Similarly, you can adjust the size of buttons within a button group using the `size` prop. -This prop allows you to choose from different size options, affecting all buttons within the group. - -```python eval -docdemo(button_group_sizes) -``` - -In this example, the `size` prop is used to set the size of all buttons within the group, with options such as `"lg"` (large), `"md"` (medium), and `"sm"` (small). - -## Disabling ButtonGroup - -You can also disable all the buttons within a button group by setting the `is_disabled` prop to `True`: - -```python eval -docdemo(button_group_disable) -``` - -In this case, all the buttons within the group will be disabled and unclickable. - -## Customizing Spacing - -The `spacing` prop allows you to control the gap between buttons within the group. Here's an example of setting a custom spacing of `8` pixels: - -```python eval -docdemo(button_group_spacing) -``` - -By setting `spacing` to `8`, the buttons will have a larger gap between them. - -```md alert info -- You can nest other components or elements within the button group to create more complex layouts. -- Button groups are a useful way to visually organize related actions or options in your application, providing a consistent and cohesive user interface. -- Experiment with different combinations of props to achieve the desired styling and behavior for your button groups in Reflex-based applications. -``` diff --git a/docs/library/chakra/forms/checkbox.md b/docs/library/chakra/forms/checkbox.md deleted file mode 100644 index 00ab81fb9..000000000 --- a/docs/library/chakra/forms/checkbox.md +++ /dev/null @@ -1,69 +0,0 @@ ---- -components: - - rx.chakra.Checkbox ---- - -# Checkbox - -A checkbox is a common way to toggle boolean value. -The checkbox component can be used on its own or in a group. - -```python exec -import reflex as rx -``` - -```python demo -rx.chakra.checkbox("Check Me!") -``` - -Checkboxes can range in size and styles. - -```python demo -rx.chakra.hstack( - rx.chakra.checkbox("Example", color_scheme="green", size="sm"), - rx.chakra.checkbox("Example", color_scheme="blue", size="sm"), - rx.chakra.checkbox("Example", color_scheme="yellow", size="md"), - rx.chakra.checkbox("Example", color_scheme="orange", size="md"), - rx.chakra.checkbox("Example", color_scheme="red", size="lg"), -) -``` - -Checkboxes can also have different visual states. - -```python demo -rx.chakra.hstack( - rx.chakra.checkbox( - "Example", color_scheme="green", size="lg", is_invalid=True - ), - rx.chakra.checkbox( - "Example", color_scheme="green", size="lg", is_disabled=True - ), -) -``` - -Checkboxes can be hooked up to a state using the `on_change` prop. - -```python demo exec -import reflex as rx - - -class CheckboxState(rx.State): - checked: bool = False - - def toggle(self): - self.checked = not self.checked - - -def checkbox_state_example(): - return rx.chakra.hstack( - rx.cond( - CheckboxState.checked, - rx.chakra.text("Checked", color="green"), - rx.chakra.text("Unchecked", color="red"), - ), - rx.chakra.checkbox( - "Example", - on_change=CheckboxState.set_checked, - ) - ) -``` diff --git a/docs/library/chakra/forms/editable.md b/docs/library/chakra/forms/editable.md deleted file mode 100644 index 91c115c1c..000000000 --- a/docs/library/chakra/forms/editable.md +++ /dev/null @@ -1,48 +0,0 @@ ---- -components: - - rx.chakra.Editable - - rx.chakra.EditablePreview - - rx.chakra.EditableInput - - rx.chakra.EditableTextarea ---- - -```python exec -import reflex as rx -``` - -# Editable - -Editable is used for inline renaming of some text. -It appears as normal UI text but transforms into a text input field when the user clicks on or focuses it. - -```python demo exec -class EditableState(rx.State): - example_input: str - example_textarea: str - example_state: str - - def set_uppertext(self, example_state: str): - self.example_state = example_state.upper() - - -def editable_example(): - return rx.chakra.editable( - rx.chakra.editable_preview(), - rx.chakra.editable_input(), - placeholder="An input example...", - on_submit=EditableState.set_uppertext, - width="100%", - ) -``` - -Another variant of editable can be made with a textarea instead of an input. - -```python demo -rx.chakra.editable( - rx.chakra.editable_preview(), - rx.chakra.editable_textarea(), - placeholder="A textarea example...", - on_submit=EditableState.set_example_textarea, - width="100%", -) -``` diff --git a/docs/library/chakra/forms/form.md b/docs/library/chakra/forms/form.md deleted file mode 100644 index 80be7c4f8..000000000 --- a/docs/library/chakra/forms/form.md +++ /dev/null @@ -1,110 +0,0 @@ ---- -components: - - rx.chakra.Form ---- - -```python exec -import reflex as rx -``` - -# Form - -Forms are used to collect user input. The `rx.chakra.form` component is used to group inputs and submit them together. - -The form component's children can be form controls such as `rx.chakra.input`, `rx.chakra.checkbox`, or `rx.chakra.switch`. The controls should have an `name` attribute that is used to identify the control in the form data. The `on_submit` event trigger submits the form data as a dictionary to the `handle_submit` event handler. - -The form is submitted when the user clicks the submit button or presses enter on the form controls. - -```python demo exec -class FormState(rx.State): - form_data: dict = {} - - def handle_submit(self, form_data: dict): - """Handle the form submit.""" - self.form_data = form_data - - -def form_example(): - return rx.chakra.vstack( - rx.chakra.form( - rx.chakra.vstack( - rx.chakra.input(placeholder="First Name", name="first_name"), - rx.chakra.input(placeholder="Last Name", name="last_name"), - rx.chakra.hstack( - rx.chakra.checkbox("Checked", name="check"), - rx.chakra.switch("Switched", name="switch"), - ), - rx.chakra.button("Submit", type_="submit"), - ), - on_submit=FormState.handle_submit, - reset_on_submit=True, - ), - rx.chakra.divider(), - rx.chakra.heading("Results"), - rx.chakra.text(FormState.form_data.to_string()), - ) -``` - -```md alert warning -# When using the form you must include a button or input with `type_='submit'`. -``` - -## Dynamic Forms - -Forms can be dynamically created by iterating through state vars using `rx.foreach`. - -This example allows the user to add new fields to the form prior to submit, and all -fields will be included in the form data passed to the `handle_submit` function. - -```python demo exec -class DynamicFormState(rx.State): - form_data: dict = {} - form_fields: list[str] = ["first_name", "last_name", "email"] - - @rx.var(cache=True) - def form_field_placeholders(self) -> list[str]: - return [ - " ".join(w.capitalize() for w in field.split("_")) - for field in self.form_fields - ] - - def add_field(self, form_data: dict): - new_field = form_data.get("new_field") - if not new_field: - return - field_name = new_field.strip().lower().replace(" ", "_") - self.form_fields.append(field_name) - - def handle_submit(self, form_data: dict): - self.form_data = form_data - - -def dynamic_form(): - return rx.chakra.vstack( - rx.chakra.form( - rx.chakra.vstack( - rx.foreach( - DynamicFormState.form_fields, - lambda field, idx: rx.chakra.input( - placeholder=DynamicFormState.form_field_placeholders[idx], - name=field, - ), - ), - rx.chakra.button("Submit", type_="submit"), - ), - on_submit=DynamicFormState.handle_submit, - reset_on_submit=True, - ), - rx.chakra.form( - rx.chakra.hstack( - rx.chakra.input(placeholder="New Field", name="new_field"), - rx.chakra.button("+", type_="submit"), - ), - on_submit=DynamicFormState.add_field, - reset_on_submit=True, - ), - rx.chakra.divider(), - rx.chakra.heading("Results"), - rx.chakra.text(DynamicFormState.form_data.to_string()), - ) -``` diff --git a/docs/library/chakra/forms/formcontrol.md b/docs/library/chakra/forms/formcontrol.md deleted file mode 100644 index 9f7aab129..000000000 --- a/docs/library/chakra/forms/formcontrol.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -components: - - rx.chakra.FormControl - - rx.chakra.FormLabel - - rx.chakra.FormErrorMessage - - rx.chakra.FormHelperText ---- - -# Form Control - -Form control provides context such as filled/focused/error/required for form inputs. - -```python exec -import reflex as rx -``` - -```python demo -rx.chakra.form_control( - rx.chakra.form_label("First Name", html_for="email"), - rx.chakra.checkbox("Example"), - rx.chakra.form_helper_text("This is a help text"), - is_required=True, -) -``` - -The example below shows a form error when then name length is 3 or less. - -```python demo exec -import reflex as rx - -class FormErrorState(rx.State): - name: str - - @rx.var - def is_error(self) -> bool: - return len(self.name) <= 3 - -def form_state_example(): - return rx.chakra.vstack( - rx.chakra.form_control( - rx.chakra.input(placeholder="name", on_blur=FormErrorState.set_name), - rx.cond( - FormErrorState.is_error, - rx.chakra.form_error_message("Name should be more than four characters"), - rx.chakra.form_helper_text("Enter name"), - ), - is_invalid=FormErrorState.is_error, - is_required=True, - ) - ) -``` diff --git a/docs/library/chakra/forms/input.md b/docs/library/chakra/forms/input.md deleted file mode 100644 index 558905413..000000000 --- a/docs/library/chakra/forms/input.md +++ /dev/null @@ -1,110 +0,0 @@ ---- -components: - - rx.chakra.Input ---- - -```python exec -import reflex as rx -from pcweb.pages.docs import library -``` - -# Input - -The input component is used to receive text input from the user. - -```python demo exec -class InputState(rx.State): - text: str = "Type something..." - -def basic_input_example(): - return rx.chakra.vstack( - rx.chakra.text(InputState.text, color_scheme="green"), - rx.chakra.input(value=InputState.text, on_change=InputState.set_text) - ) -``` - -"Behind the scene, the input component is implemented using debounced input to avoid sending individual state updates per character to the backend while the user is still typing. -This allows a state var to directly control the `value` prop from the backend without the user experiencing input lag. -For advanced use cases, you can tune the debounce delay by setting the `debounce_timeout` when creating the Input component. -You can find examples of how it is used in the [DebouncedInput]({library.forms.debounce.path}) component. - -```python demo exec -class ClearInputState(rx.State): - text: str - - def clear_text(self): - self.text = "" - - -def clear_input_example(): - return rx.chakra.vstack( - rx.chakra.text(ClearInputState.text), - rx.chakra.input( - on_change=ClearInputState.set_text, - value=ClearInputState.text, - ), - rx.chakra.button("Clear", on_click=ClearInputState.clear_text), - ) -``` - -The input component can also use the `on_blur` event handler to only change the state when the user clicks away from the input. -This is useful for performance reasons, as the state will only be updated when the user is done typing. - -```python demo exec -class InputBlurState(rx.State): - text: str = "Type something..." - - def set_text(self, text: str): - self.text = text.upper() - - -def input_blur_example(): - return rx.chakra.vstack( - rx.chakra.text(InputBlurState.text), - rx.chakra.input(placeholder="Type something...", on_blur=InputBlurState.set_text) - ) -``` - -You can change the type of input by using the `type_` prop. -For example you can create a password input or a date picker. - -```python demo -rx.chakra.vstack( - rx.chakra.input(type_="password"), - rx.chakra.input(type_="date"), -) -``` - -We also provide a `rx.chakra.password` component as a shorthand for the password input. - -```python demo -rx.chakra.password() -``` - -You can also use forms in combination with inputs. -This is useful for collecting multiple values with a single event handler and automatically supporting `Enter` key submit functionality that desktop users expect. - -```python demo exec -class InputFormState(rx.State): - form_data: dict = {} - - def handle_submit(self, form_data: dict): - """Handle the form submit.""" - self.form_data = form_data - -def input_form_example(): - return rx.chakra.vstack( - rx.chakra.form( - rx.chakra.vstack( - rx.chakra.input(placeholder="First Name", id="first_name"), - rx.chakra.input(placeholder="Last Name", id="last_name"), - rx.chakra.button("Submit", type_="submit"), - ), - on_submit=InputFormState.handle_submit, - ), - rx.chakra.divider(), - rx.chakra.heading("Results"), - rx.chakra.text(InputFormState.form_data.to_string()), - ) -``` - diff --git a/docs/library/chakra/forms/numberinput.md b/docs/library/chakra/forms/numberinput.md deleted file mode 100644 index 5d0d33a96..000000000 --- a/docs/library/chakra/forms/numberinput.md +++ /dev/null @@ -1,28 +0,0 @@ ---- -components: - - rx.chakra.NumberInput - - rx.chakra.NumberInputField - - rx.chakra.NumberInputStepper - - rx.chakra.NumberIncrementStepper - - rx.chakra.NumberDecrementStepper ---- - -```python exec -import reflex as rx -``` - -# NumberInput - -The NumberInput component is similar to the Input component, but it has controls for incrementing or decrementing numeric values. - -```python demo exec -class NumberInputState(rx.State): - number: int - - -def number_input_example(): - return rx.chakra.number_input( - value=NumberInputState.number, - on_change=NumberInputState.set_number, - ) -``` diff --git a/docs/library/chakra/forms/pininput.md b/docs/library/chakra/forms/pininput.md deleted file mode 100644 index 9aaeaddfa..000000000 --- a/docs/library/chakra/forms/pininput.md +++ /dev/null @@ -1,45 +0,0 @@ ---- -components: - - rx.chakra.PinInput ---- - -```python exec -import reflex as rx -``` - -# PinInput - -The PinInput component is similar to the Input component, but it is optimized for entering sequences of digits - -```python demo exec -class PinInputState(rx.State): - pin: str - - -def basic_pininput_example(): - return rx.chakra.vstack( - rx.chakra.heading(PinInputState.pin), - rx.chakra.box( - rx.chakra.pin_input( - length=4, - on_change=PinInputState.set_pin, - mask=True, - ), - ), - ) -``` - -The PinInput component can also be customized as seen below. - -```python demo -rx.chakra.center( - rx.chakra.pin_input( - rx.chakra.pin_input_field(color="red"), - rx.chakra.pin_input_field(border_color="green"), - rx.chakra.pin_input_field(shadow="md"), - rx.chakra.pin_input_field(color="blue"), - rx.chakra.pin_input_field(border_radius="md"), - on_change=PinInputState.set_pin, - ) -) -``` diff --git a/docs/library/chakra/forms/radiogroup.md b/docs/library/chakra/forms/radiogroup.md deleted file mode 100644 index 431a1f266..000000000 --- a/docs/library/chakra/forms/radiogroup.md +++ /dev/null @@ -1,74 +0,0 @@ ---- -components: - - rx.chakra.RadioGroup - - rx.chakra.Radio ---- - -```python exec -import reflex as rx -``` - -# Radio - -Radios are used when only one choice may be selected in a series of options. - -```python demo exec -from typing import List -options: List[str] = ["Option 1", "Option 2", "Option 3"] - -class RadioState(rx.State): - text: str = "No Selection" - - -def basic_radio_example(): - return rx.chakra.vstack( - rx.chakra.badge(RadioState.text, color_scheme="green"), - rx.chakra.radio_group( - options, - on_change=RadioState.set_text, - ), - ) -``` - -The `default_value` and `default_checked` arguments can be used to set the default value of the radio group. - -```python demo -rx.chakra.vstack( - rx.chakra.radio_group( - options, - default_value="Option 2", - default_checked=True, - ), -) -``` - -A hstack with the `spacing` argument can be used to set the spacing between the radio buttons. - -```python demo -rx.chakra.radio_group( - rx.chakra.radio_group( - rx.chakra.hstack( - rx.foreach( - options, - lambda option: rx.chakra.radio(option), - ), - spacing="2em", - ), - ), -) -``` - -A vstack can be used to stack the radio buttons vertically. - -```python demo -rx.chakra.radio_group( - rx.chakra.radio_group( - rx.chakra.vstack( - rx.foreach( - options, - lambda option: rx.chakra.radio(option), - ), - ), - ), -) -``` diff --git a/docs/library/chakra/forms/rangeslider.md b/docs/library/chakra/forms/rangeslider.md deleted file mode 100644 index 7868a61f5..000000000 --- a/docs/library/chakra/forms/rangeslider.md +++ /dev/null @@ -1,45 +0,0 @@ ---- -components: - - rx.chakra.RangeSlider - - rx.chakra.RangeSliderTrack - - rx.chakra.RangeSliderFilledTrack - - rx.chakra.RangeSliderThumb ---- - -```python exec -import reflex as rx -``` - -# RangeSlider - -The range slider is used to allow users to make selections from a range of values. - -```python demo exec -from typing import List - -class RangeSliderState(rx.State): - value: List[int] = [0, 100] - - -def range_slider_example(): - return rx.chakra.vstack( - rx.chakra.heading(f"{RangeSliderState.value[0]} : {RangeSliderState.value[1]}"), - rx.chakra.range_slider( - on_change_end=RangeSliderState.set_value - ), - width="100%", - ) -``` - -If you want to trigger state change on every slider movement, you can use the `on_change` event handler. -This is not recommended for performance reasons and should only be used if you need to perform an event on every slider movement. - -```python demo -rx.chakra.vstack( - rx.chakra.heading(f"{RangeSliderState.value[0]} : {RangeSliderState.value[1]}"), - rx.chakra.range_slider( - on_change=RangeSliderState.set_value - ), - width="100%", -) -``` diff --git a/docs/library/chakra/forms/select.md b/docs/library/chakra/forms/select.md deleted file mode 100644 index 7795b52f3..000000000 --- a/docs/library/chakra/forms/select.md +++ /dev/null @@ -1,86 +0,0 @@ ---- -components: - - rx.chakra.Select ---- - -```python exec -import reflex as rx -``` - -# Select - -The Select component is used to create a list of options, which allows a user to select one or more options from it. - -```python demo exec -from typing import List -options: List[str] = ["Option 1", "Option 2", "Option 3"] - -class SelectState(rx.State): - option: str = "No selection yet." - - -def basic_select_example(): - return rx.chakra.vstack( - rx.chakra.heading(SelectState.option), - rx.chakra.select( - options, - placeholder="Select an example.", - on_change=SelectState.set_option, - color_schemes="twitter", - ), - ) -``` - -Select can also have multiple options selected at once. - -```python demo exec -from typing import List -options: List[str] = ["Option 1", "Option 2", "Option 3"] - -class MultiSelectState(rx.State): - option: List[str] = [] - - -def multiselect_example(): - return rx.chakra.vstack( - rx.chakra.heading(MultiSelectState.option), - rx.chakra.select( - options, - placeholder="Select examples", - is_multi=True, - on_change=MultiSelectState.set_option, - close_menu_on_select=False, - color_schemes="twitter", - ), - ) -``` - -The component can also be customized and styled as seen in the next examples. - -```python demo -rx.chakra.vstack( - rx.chakra.select(options, placeholder="Select an example.", size="xs"), - rx.chakra.select(options, placeholder="Select an example.", size="sm"), - rx.chakra.select(options, placeholder="Select an example.", size="md"), - rx.chakra.select(options, placeholder="Select an example.", size="lg"), -) -``` - -```python demo -rx.chakra.vstack( - rx.chakra.select(options, placeholder="Select an example.", variant="outline"), - rx.chakra.select(options, placeholder="Select an example.", variant="filled"), - rx.chakra.select(options, placeholder="Select an example.", variant="flushed"), - rx.chakra.select(options, placeholder="Select an example.", variant="unstyled"), -) -``` - -```python demo -rx.chakra.select( - options, - placeholder="Select an example.", - color="white", - bg="#68D391", - border_color="#38A169", -) -``` diff --git a/docs/library/chakra/forms/slider.md b/docs/library/chakra/forms/slider.md deleted file mode 100644 index df7a9d90c..000000000 --- a/docs/library/chakra/forms/slider.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -components: - - rx.chakra.Slider - - rx.chakra.SliderTrack - - rx.chakra.SliderFilledTrack - - rx.chakra.SliderThumb - - rx.chakra.SliderMark ---- - -```python exec -import reflex as rx -``` - -# Slider - -The Slider is used to allow users to make selections from a range of values. - -```python demo exec -class SliderState(rx.State): - value: int = 50 - - -def slider_example(): - return rx.chakra.vstack( - rx.chakra.heading(SliderState.value), - rx.chakra.slider( - on_change=SliderState.set_value - ), - width="100%", - ) -``` - -You can also combine all three event handlers: `on_change`, `on_change_start`, and `on_change_end`. - -```python demo exec -class SliderCombo(rx.State): - value: int = 50 - color: str = "black" - - def set_start(self, value): - self.color = "#68D391" - - def set_end(self, value): - self.color = "#F56565" - - -def slider_combo_example(): - return rx.chakra.vstack( - rx.chakra.heading(SliderCombo.value, color=SliderCombo.color), - rx.chakra.slider( - on_change_start=SliderCombo.set_start, - on_change=SliderCombo.set_value, - on_change_end=SliderCombo.set_end, - ), - width="100%", - ) -``` - -You can also customize the appearance of the slider by passing in custom components for the track and thumb. - -```python demo exec -class SliderManual(rx.State): - value: int = 50 - - def set_end(self, value: int): - self.value = value - - -def slider_manual_example(): - return rx.chakra.vstack( - rx.chakra.heading(f"Weather is {SliderManual.value} degrees"), - rx.chakra.slider( - rx.chakra.slider_track( - rx.chakra.slider_filled_track(bg="tomato"), - bg='red.100' - ), - rx.chakra.slider_thumb( - rx.chakra.icon(tag="sun", color="white"), - box_size="1.5em", - bg="tomato", - ), - on_change_end=SliderManual.set_end, - ), - width="100%", - ) -``` - -If you want to trigger state change on every slider movement, you can use the `on_change` event handler. - -For performance reasons, you may want to trigger state change only when the user releases the slider by using the `on_change_end` event handler, but if you need perform an event on every slider movement, you can use the `on_change` event handler. - -```python demo -rx.chakra.vstack( - rx.chakra.heading(SliderState.value), - rx.chakra.slider( - on_change=SliderState.set_value - ), - width="100%", -) -``` diff --git a/docs/library/chakra/forms/switch.md b/docs/library/chakra/forms/switch.md deleted file mode 100644 index 441a3f12d..000000000 --- a/docs/library/chakra/forms/switch.md +++ /dev/null @@ -1,48 +0,0 @@ ---- -components: - - rx.chakra.Switch ---- - -```python exec -import reflex as rx -``` - -# Switch - -The Switch component is used as an alternative for the Checkbox component. -You can switch between enabled or disabled states. - -```python demo exec -class SwitchState1(rx.State): - checked: bool = False - is_checked: bool = "Switch off!" - - def change_check(self, checked: bool): - self.checked = checked - if self.checked: - self.is_checked = "Switch on!" - else: - self.is_checked = "Switch off!" - - -def switch_example(): - return rx.chakra.vstack( - rx.chakra.heading(SwitchState1.is_checked), - rx.chakra.switch( - is_checked=SwitchState1.checked, on_change=SwitchState1.change_check - ), - ) -``` - -You can also change the color scheme of the Switch component by passing the `color_scheme` argument. -The default color scheme is blue. - -```python demo -rx.chakra.hstack( - rx.chakra.switch(color_scheme="red"), - rx.chakra.switch(color_scheme="green"), - rx.chakra.switch(color_scheme="yellow"), - rx.chakra.switch(color_scheme="blue"), - rx.chakra.switch(color_scheme="purple"), -) -``` diff --git a/docs/library/chakra/forms/textarea.md b/docs/library/chakra/forms/textarea.md deleted file mode 100644 index 2fbc8cd47..000000000 --- a/docs/library/chakra/forms/textarea.md +++ /dev/null @@ -1,30 +0,0 @@ ---- -components: - - rx.chakra.TextArea ---- - -```python exec -import reflex as rx -from pcweb.pages.docs import library -``` - -# Textarea - -The TextArea component allows you to easily create multi-line text inputs. - -```python demo exec -class TextareaState(rx.State): - text: str = "Hello World!" - -def textarea_example(): - return rx.chakra.vstack( - rx.chakra.heading(TextareaState.text), - rx.chakra.text_area(value=TextareaState.text, on_change=TextareaState.set_text) - ) -``` - -Alternatively, you can use the `on_blur` event handler to only update the state when the user clicks away. - -Similar to the Input component, the TextArea is also implemented using debounced input when it is fully controlled. -You can tune the debounce delay by setting the `debounce_timeout` prop. -You can find examples of how it is used in the [DebouncedInput]({library.forms.debounce.path}) component. diff --git a/docs/library/chakra/layout/aspectratio.md b/docs/library/chakra/layout/aspectratio.md deleted file mode 100644 index 5eb2c7d52..000000000 --- a/docs/library/chakra/layout/aspectratio.md +++ /dev/null @@ -1,27 +0,0 @@ ---- -components: - - rx.chakra.AspectRatio ---- - -# Aspect Ratio - -```python exec -import reflex as rx -``` - -Preserve the ratio of the components contained within a region. - -```python demo -rx.chakra.box(element="iframe", src="https://bit.ly/naruto-sage", border_color="red") -``` - -```python demo -rx.chakra.aspect_ratio( - rx.chakra.box( - element="iframe", - src="https://bit.ly/naruto-sage", - border_color="red" - ), - ratio=4/3 -) -``` diff --git a/docs/library/chakra/layout/box.md b/docs/library/chakra/layout/box.md deleted file mode 100644 index 14d52aac1..000000000 --- a/docs/library/chakra/layout/box.md +++ /dev/null @@ -1,46 +0,0 @@ ---- -components: - - rx.chakra.Box ---- - -# Box - -```python exec -import reflex as rx -``` - -Box is a generic container component that can be used to group other components. - -```python demo -rx.chakra.vstack( - rx.chakra.box("Example", bg="yellow", border_radius="sm", width="20%"), - rx.chakra.box("Example", bg="orange", border_radius="md", width="40%"), - rx.chakra.box("Example", bg="red", border_radius="md", width="60%"), - rx.chakra.box("Example", bg="lightblue", border_radius="lg", width="80%"), - rx.chakra.box("Example", bg="lightgreen", border_radius="xl", width="100%"), - width="100%", -) -``` - -Below is an example of how a box component can contain other components. - -```python demo -rx.chakra.box( - rx.chakra.button("Click Me"), - bg="lightgreen", - border_radius="15px", - border_color="green", - border_width="thick", - padding=5, -) -``` - -Box can also compose videos and iframe elements. - -```python demo -rx.chakra.box( - element= "iframe", - src="https://www.youtube.com/embed/9bZkp7q19f0", - width = "100%", -) -``` diff --git a/docs/library/chakra/layout/card.md b/docs/library/chakra/layout/card.md deleted file mode 100644 index 8fe1e5f0e..000000000 --- a/docs/library/chakra/layout/card.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -components: - - rx.chakra.Card - - rx.chakra.CardHeader - - rx.chakra.CardBody - - rx.chakra.CardFooter ---- - -```python exec -import reflex as rx -``` - -# Card - -Card is a flexible component used to group and display content in a clear and concise format. - -```python demo -rx.chakra.card( - rx.chakra.text("Body of the Card Component"), - header=rx.chakra.heading("Header", size="lg"), - footer=rx.chakra.heading("Footer",size="sm"), -) -``` - -You can pass a header with `header=` and/or a footer with `footer=`. diff --git a/docs/library/chakra/layout/center.md b/docs/library/chakra/layout/center.md deleted file mode 100644 index aa315a16f..000000000 --- a/docs/library/chakra/layout/center.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -components: - - rx.chakra.Center - - rx.chakra.Circle - - rx.chakra.Square ---- - -# Center - -```python exec -import reflex as rx -``` - -Center, Square, and Circle are components that center its children within itself. - -```python demo -rx.chakra.center( - rx.chakra.text("Hello World!"), - border_radius="15px", - border_width="thick", - width="50%", -) -``` - -Below are examples of circle and square. - -```python demo -rx.chakra.hstack( - rx.chakra.square( - rx.chakra.vstack(rx.chakra.text("Square")), - border_width="thick", - border_color="purple", - padding="1em", - ), - rx.chakra.circle( - rx.chakra.vstack(rx.chakra.text("Circle")), - border_width="thick", - border_color="orange", - padding="1em", - ), - spacing="2em", -) -``` diff --git a/docs/library/chakra/layout/container.md b/docs/library/chakra/layout/container.md deleted file mode 100644 index ad8dcaabe..000000000 --- a/docs/library/chakra/layout/container.md +++ /dev/null @@ -1,20 +0,0 @@ ---- -components: - - rx.chakra.Container ---- - -# Container - -```python exec -import reflex as rx -``` - -Containers are used to constrain a content's width to the current breakpoint, while keeping it fluid. - -```python demo -rx.chakra.container( - rx.chakra.box("Example", bg="blue", color="white", width="50%"), - center_content=True, - bg="lightblue", -) -``` diff --git a/docs/library/chakra/layout/flex.md b/docs/library/chakra/layout/flex.md deleted file mode 100644 index 79c1ac020..000000000 --- a/docs/library/chakra/layout/flex.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -components: - - rx.chakra.Flex ---- - -# Flex - -```python exec -import reflex as rx -``` - -Flexbox is a layout model that allows elements to align and distribute space within a container. Using flexible widths and heights, elements can be aligned to fill a space or distribute space between elements, which makes it a great tool to use for responsive design systems. - -```python demo -rx.chakra.flex( - rx.chakra.center("Center", bg="lightblue"), - rx.chakra.square("Square", bg="lightgreen", padding=10), - rx.chakra.box("Box", bg="salmon", width="150px"), -) -``` - -Combining flex with spacer allows for stackable and responsive components. - -```python demo -rx.chakra.flex( - rx.chakra.center("Center", bg="lightblue"), - rx.chakra.spacer(), - rx.chakra.square("Square", bg="lightgreen", padding=10), - rx.chakra.spacer(), - rx.chakra.box("Box", bg="salmon", width="150px"), - width = "100%", -) -``` diff --git a/docs/library/chakra/layout/grid.md b/docs/library/chakra/layout/grid.md deleted file mode 100644 index 634a57b15..000000000 --- a/docs/library/chakra/layout/grid.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -components: - - rx.chakra.Grid - - rx.chakra.GridItem ---- - -# Grid - -```python exec -import reflex as rx -``` - -A primitive useful for grid layouts. Grid is Box with display, grid and it comes with helpful style shorthand. It renders a div element. - -```python demo -rx.chakra.grid( - rx.chakra.grid_item(row_span=1, col_span=1, bg="lightgreen"), - rx.chakra.grid_item(row_span=1, col_span=1, bg="lightblue"), - rx.chakra.grid_item(row_span=1, col_span=1, bg="purple"), - rx.chakra.grid_item(row_span=1, col_span=1, bg="orange"), - rx.chakra.grid_item(row_span=1, col_span=1, bg="yellow"), - template_columns="repeat(5, 1fr)", - h="10em", - width="100%", - gap=4, -) -``` - -In some layouts, you may need certain grid items to span specific amount of columns or rows instead of an even distribution. To achieve this, you need to pass the col_span prop to the GridItem component to span across columns and also pass the row_span component to span across rows. You also need to specify the template_columns and template_rows. - -```python demo -rx.chakra.grid( - rx.chakra.grid_item(row_span=2, col_span=1, bg="lightblue"), - rx.chakra.grid_item(col_span=2, bg="lightgreen"), - rx.chakra.grid_item(col_span=2, bg="yellow"), - rx.chakra.grid_item(col_span=4, bg="orange"), - template_rows="repeat(2, 1fr)", - template_columns="repeat(5, 1fr)", - h="200px", - width="100%", - gap=4, -) -``` diff --git a/docs/library/chakra/layout/responsivegrid.md b/docs/library/chakra/layout/responsivegrid.md deleted file mode 100644 index 006eb53d3..000000000 --- a/docs/library/chakra/layout/responsivegrid.md +++ /dev/null @@ -1,39 +0,0 @@ ---- -components: - - rx.chakra.ResponsiveGrid ---- - -# Responsive Grid - -```python exec -import reflex as rx -``` - -ResponsiveGrid provides a friendly interface to create responsive grid layouts with ease. SimpleGrid composes Box so you can pass all the Box props and css grid props with addition to the ones below. - -Specify a fixed number of columns for the grid layout. - -```python demo -rx.chakra.responsive_grid( - rx.chakra.box(height="5em", width="5em", bg="lightgreen"), - rx.chakra.box(height="5em", width="5em", bg="lightblue"), - rx.chakra.box(height="5em", width="5em", bg="purple"), - rx.chakra.box(height="5em", width="5em", bg="tomato"), - rx.chakra.box(height="5em", width="5em", bg="orange"), - rx.chakra.box(height="5em", width="5em", bg="yellow"), - columns=[3], - spacing="4", -) -``` - -```python demo -rx.chakra.responsive_grid( - rx.chakra.box(height="5em", width="5em", bg="lightgreen"), - rx.chakra.box(height="5em", width="5em", bg="lightblue"), - rx.chakra.box(height="5em", width="5em", bg="purple"), - rx.chakra.box(height="5em", width="5em", bg="tomato"), - rx.chakra.box(height="5em", width="5em", bg="orange"), - rx.chakra.box(height="5em", width="5em", bg="yellow"), - columns=[1, 2, 3, 4, 5, 6], -) -``` diff --git a/docs/library/chakra/layout/spacer.md b/docs/library/chakra/layout/spacer.md deleted file mode 100644 index b95792fbe..000000000 --- a/docs/library/chakra/layout/spacer.md +++ /dev/null @@ -1,23 +0,0 @@ ---- -components: - - rx.chakra.Spacer ---- - -# Spacer - -```python exec -import reflex as rx -``` - -Creates an adjustable, empty space that can be used to tune the spacing between child elements within Flex. - -```python demo -rx.chakra.flex( - rx.chakra.center(rx.chakra.text("Example"), bg="lightblue"), - rx.chakra.spacer(), - rx.chakra.center(rx.chakra.text("Example"), bg="lightgreen"), - rx.chakra.spacer(), - rx.chakra.center(rx.chakra.text("Example"), bg="salmon"), - width="100%", -) -``` diff --git a/docs/library/chakra/layout/stack.md b/docs/library/chakra/layout/stack.md deleted file mode 100644 index e78a9f0d2..000000000 --- a/docs/library/chakra/layout/stack.md +++ /dev/null @@ -1,36 +0,0 @@ ---- -components: - - rx.chakra.Stack - - rx.chakra.Hstack - - rx.chakra.Vstack ---- - -# Stack - -```python exec -import reflex as rx -``` - -Below are two examples the different types of stack components vstack and hstack for ordering items on a page. - -```python demo -rx.chakra.hstack( - rx.chakra.box("Example", bg="red", border_radius="md", width="10%"), - rx.chakra.box("Example", bg="orange", border_radius="md", width="10%"), - rx.chakra.box("Example", bg="yellow", border_radius="md", width="10%"), - rx.chakra.box("Example", bg="lightblue", border_radius="md", width="10%"), - rx.chakra.box("Example", bg="lightgreen", border_radius="md", width="60%"), - width="100%", -) -``` - -```python demo -rx.chakra.vstack( - rx.chakra.box("Example", bg="red", border_radius="md", width="20%"), - rx.chakra.box("Example", bg="orange", border_radius="md", width="40%"), - rx.chakra.box("Example", bg="yellow", border_radius="md", width="60%"), - rx.chakra.box("Example", bg="lightblue", border_radius="md", width="80%"), - rx.chakra.box("Example", bg="lightgreen", border_radius="md", width="100%"), - width="100%", -) -``` diff --git a/docs/library/chakra/layout/wrap.md b/docs/library/chakra/layout/wrap.md deleted file mode 100644 index 87e5d2150..000000000 --- a/docs/library/chakra/layout/wrap.md +++ /dev/null @@ -1,27 +0,0 @@ ---- -components: - - rx.chakra.Wrap - - rx.chakra.WrapItem ---- - -# Wrap - -```python exec -import reflex as rx -``` - -Wrap is a layout component that adds a defined space between its children. - -It wraps its children automatically if there isn't enough space to fit any more in the same row. Think of it as a smarter flex-wrap with spacing support. - -```python demo -rx.chakra.wrap( - rx.chakra.wrap_item(rx.chakra.box("Example", bg="lightgreen", w="100px", h="80px")), - rx.chakra.wrap_item(rx.chakra.box("Example", bg="lightblue", w="200px", h="80px")), - rx.chakra.wrap_item(rx.chakra.box("Example", bg="red", w="300px", h="80px")), - rx.chakra.wrap_item(rx.chakra.box("Example", bg="orange", w="400px", h="80px")), - width="100%", - spacing="2em", - align="center", -) -``` diff --git a/docs/library/chakra/media/avatar.md b/docs/library/chakra/media/avatar.md deleted file mode 100644 index cd2e3e052..000000000 --- a/docs/library/chakra/media/avatar.md +++ /dev/null @@ -1,62 +0,0 @@ ---- -components: - - rx.chakra.Avatar - - rx.chakra.AvatarBadge - - rx.chakra.AvatarGroup ---- - -```python exec -import reflex as rx -``` - -# Avatar - -The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon. - -```python demo -rx.chakra.hstack( - rx.chakra.avatar(size="sm"), - rx.chakra.avatar(name="Barack Obama", size="md"), - rx.chakra.avatar(name="Donald Trump", size="lg"), - rx.chakra.avatar(name="Joe Biden", size="xl"), -) -``` - -Avatar components can be grouped into avatar groups for easier display. - -```python demo -rx.chakra.avatar_group( - rx.chakra.avatar(name="Barack Obama"), - rx.chakra.avatar(name="Donald Trump"), - rx.chakra.avatar(name="Joe Biden"), -) -``` - -Badges can also be applied to show elements about the avatar such as activity. - -```python demo -rx.chakra.avatar_group( - rx.chakra.avatar( - rx.chakra.avatar_badge( - box_size="1.25em", bg="green.500", border_color="green.500" - ), - name="Barack Obama", - ), - rx.chakra.avatar( - rx.chakra.avatar_badge( - box_size="1.25em", bg="yellow.500", border_color="red.500" - ), - name="Donald Trump", - ), -) -``` - -If there are too many avatar to display a limit can be set using the `max_` prop. - -```python demo -rx.chakra.avatar_group( - *([rx.chakra.avatar(name="Barack Obama")] * 5), - size="md", - max_=3, -) -``` diff --git a/docs/library/chakra/media/icon.md b/docs/library/chakra/media/icon.md deleted file mode 100644 index 93a65ca91..000000000 --- a/docs/library/chakra/media/icon.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -components: - - rx.chakra.Icon ---- - -```python exec -import reflex as rx -``` - -# Icon - -The Icon component is used to display an icon from a library of icons. - -```python demo -rx.chakra.icon(tag="calendar") -``` - -Use the tag prop to specify the icon to display. - -```md alert success -Below is a list of all available icons. -``` - -```python eval -rx.chakra.box( - rx.chakra.divider(), - rx.chakra.responsive_grid( - *[ - rx.chakra.vstack( - rx.chakra.icon(tag=icon), - rx.chakra.text(icon), - bg="white", - border="1px solid #EAEAEA", - border_radius="0.5em", - padding=".75em", - ) - for icon in rx.chakra.media.icon.ICON_LIST - ], - columns=[2, 2, 3, 3, 4], - spacing="1em", - ) -) -``` diff --git a/docs/library/chakra/media/image.md b/docs/library/chakra/media/image.md deleted file mode 100644 index 0210cc0bb..000000000 --- a/docs/library/chakra/media/image.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -components: - - rx.chakra.Image ---- - -```python exec -import reflex as rx -``` - -# Image - -The Image component can display an image given a `src` path as an argument. -This could either be a local path from the assets folder or an external link. - -```python demo -rx.chakra.image(src="/reflex_banner.png", width="100px", height="auto") -``` - -Image composes a box and can be styled simlarly. - -```python demo -rx.chakra.image( - src="/reflex_banner.png", - width="100px", - height="auto", - border_radius="15px 50px", - border="5px solid #555", - box_shadow="lg", -) -``` - -You can also pass a `PIL` image object as the `src`. - -```python demo box -rx.chakra.vstack( - rx.chakra.image(src="https://picsum.photos/id/1/200/300", alt="An Unsplash Image") -) -``` - -```python -from PIL import Image -import requests - - -class ImageState(rx.State): - url = f"https://picsum.photos/id/1/200/300" - image = Image.open(requests.get(url, stream=True).raw) - - -def image_pil_example(): - return rx.chakra.vstack( - rx.chakra.image(src=ImageState.image) - ) -``` diff --git a/docs/library/chakra/navigation/breadcrumb.md b/docs/library/chakra/navigation/breadcrumb.md deleted file mode 100644 index e60bb739f..000000000 --- a/docs/library/chakra/navigation/breadcrumb.md +++ /dev/null @@ -1,36 +0,0 @@ ---- -components: - - rx.chakra.Breadcrumb - - rx.chakra.BreadcrumbItem - - rx.chakra.BreadcrumbLink ---- - -```python exec -import reflex as rx -``` - -# Breadcrumb - -Breadcrumbs, or a breadcrumb navigation, can help enhance how users navigate to previous page levels of a website. - -This is userful for websites with a lot of pages. - -```python demo -rx.chakra.breadcrumb( - rx.chakra.breadcrumb_item(rx.chakra.breadcrumb_link("Home", href="#")), - rx.chakra.breadcrumb_item(rx.chakra.breadcrumb_link("Docs", href="#")), - rx.chakra.breadcrumb_item(rx.chakra.breadcrumb_link("Breadcrumb", href="#")), -) -``` - -The separator prop can be used to change the default separator. - -```python demo -rx.chakra.breadcrumb( - rx.chakra.breadcrumb_item(rx.chakra.breadcrumb_link("Home", href="#")), - rx.chakra.breadcrumb_item(rx.chakra.breadcrumb_link("Docs", href="#")), - rx.chakra.breadcrumb_item(rx.chakra.breadcrumb_link("Breadcrumb", href="#")), - separator=">", - color="rgb(107,99,246)" -) -``` diff --git a/docs/library/chakra/navigation/link.md b/docs/library/chakra/navigation/link.md deleted file mode 100644 index 837e1cde1..000000000 --- a/docs/library/chakra/navigation/link.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -components: - - rx.chakra.Link ---- - -```python exec -import reflex as rx -``` - -# Link - -Links are accessible elements used primarily for navigation. - -```python demo -rx.chakra.link("Example", href="https://reflex.dev/", color="rgb(107,99,246)") -``` - -You can also provide local links to other pages in your project without writing the full url. - -```python demo -rx.chakra.link("Example", href="/docs/library", color="rgb(107,99,246)") -``` - -The link component can be used to wrap other components to make them link to other pages. - -```python demo -rx.chakra.link(rx.chakra.button("Example"), href="https://reflex.dev/", color="rgb(107,99,246)", button=True) -``` - -You can also create anchors to link to specific parts of a page using the id prop. - -```python demo -rx.chakra.box("Example", id="example") -``` - -To reference an anchor, you can use the href prop of the link component. -The `href` should be in the format of the page you want to link to followed by a `#` and the `id` of the anchor. - -```python demo -rx.chakra.link("Example", href="/docs/library/navigation/link#example", color="rgb(107,99,246)") -``` diff --git a/docs/library/chakra/navigation/linkoverlay.md b/docs/library/chakra/navigation/linkoverlay.md deleted file mode 100644 index 35a5c56f8..000000000 --- a/docs/library/chakra/navigation/linkoverlay.md +++ /dev/null @@ -1,18 +0,0 @@ ---- -components: - - rx.chakra.LinkOverlay ---- - -```python exec -import reflex as rx -``` - -# LinkOverlay - -Link overlay provides a semantic way to wrap elements (cards, blog post, articles, etc.) in a link. - -```python -rx.chakra.link_overlay( - rx.chakra.box("Example", bg="black", color="white", font_size=30), -) -``` diff --git a/docs/library/chakra/overlay/alertdialog.md b/docs/library/chakra/overlay/alertdialog.md deleted file mode 100644 index d21a57da1..000000000 --- a/docs/library/chakra/overlay/alertdialog.md +++ /dev/null @@ -1,45 +0,0 @@ ---- -components: - - rx.chakra.AlertDialog - - rx.chakra.AlertDialogOverlay - - rx.chakra.AlertDialogContent - - rx.chakra.AlertDialogHeader - - rx.chakra.AlertDialogBody - - rx.chakra.AlertDialogFooter ---- - -```python exec -import reflex as rx -``` - -# AlertDialog - -AlertDialog component is used to interrupt the user with a mandatory confirmation or event. -The component will appear in front of the page prompting the user to conplete an event. - -```python demo exec -class AlertDialogState(rx.State): - show: bool = False - - def change(self): - self.show = not (self.show) - - -def alertdialog_example(): - return rx.chakra.vstack( - rx.chakra.button("Show Alert Dialog", on_click=AlertDialogState.change), - rx.chakra.alert_dialog( - rx.chakra.alert_dialog_overlay( - rx.chakra.alert_dialog_content( - rx.chakra.alert_dialog_header("Confirm"), - rx.chakra.alert_dialog_body("Do you want to confirm example?"), - rx.chakra.alert_dialog_footer( - rx.chakra.button("Close", on_click=AlertDialogState.change) - ), - ) - ), - is_open=AlertDialogState.show, - ), - width="100%", - ) -``` diff --git a/docs/library/chakra/overlay/drawer.md b/docs/library/chakra/overlay/drawer.md deleted file mode 100644 index b77ef4d71..000000000 --- a/docs/library/chakra/overlay/drawer.md +++ /dev/null @@ -1,70 +0,0 @@ ---- -components: - - rx.chakra.Drawer - - rx.chakra.DrawerOverlay - - rx.chakra.DrawerContent - - rx.chakra.DrawerHeader - - rx.chakra.DrawerBody - - rx.chakra.DrawerFooter ---- - -```python exec -import reflex as rx -``` - -# Drawer - -The Drawer component is a panel that slides out from the edge of the screen. -It can be useful when you need users to complete a task or view some details without leaving the current page. - -```python demo exec -class DrawerState(rx.State): - show_right: bool = False - show_top: bool = False - - def top(self): - self.show_top = not (self.show_top) - - def right(self): - self.show_right = not (self.show_right) - -def drawer_example(): - return rx.chakra.vstack( - rx.chakra.button("Show Right Drawer", on_click=DrawerState.right), - rx.chakra.drawer( - rx.chakra.drawer_overlay( - rx.chakra.drawer_content( - rx.chakra.drawer_header("Confirm"), - rx.chakra.drawer_body("Do you want to confirm example?"), - rx.chakra.drawer_footer( - rx.chakra.button("Close", on_click=DrawerState.right) - ), - bg = "rgba(0, 0, 0, 0.3)" - ) - ), - is_open=DrawerState.show_right, - ) - ) -``` - -Drawer can display from the top, bottom, left, or right. -By defualt it displays to the right as seen above - -```python demo -rx.chakra.vstack( - rx.chakra.button("Show Top Drawer", on_click=DrawerState.top), - rx.chakra.drawer( - rx.chakra.drawer_overlay( - rx.chakra.drawer_content( - rx.chakra.drawer_header("Confirm"), - rx.chakra.drawer_body("Do you want to confirm example?"), - rx.chakra.drawer_footer( - rx.chakra.button("Close", on_click=DrawerState.top) - ), - ) - ), - placement="top", - is_open=DrawerState.show_top, - ) -) -``` diff --git a/docs/library/chakra/overlay/menu.md b/docs/library/chakra/overlay/menu.md deleted file mode 100644 index 94c2e7032..000000000 --- a/docs/library/chakra/overlay/menu.md +++ /dev/null @@ -1,31 +0,0 @@ ---- -components: - - rx.chakra.Menu - - rx.chakra.MenuButton - - rx.chakra.MenuList - - rx.chakra.MenuItem - - rx.chakra.MenuDivider - - rx.chakra.MenuGroup - - rx.chakra.MenuOptionGroup - - rx.chakra.MenuItemOption ---- - -```python exec -import reflex as rx -``` - -# Menu - -An accessible dropdown menu for the common dropdown menu button design pattern. - -```python demo -rx.chakra.menu( - rx.chakra.menu_button("Menu"), - rx.chakra.menu_list( - rx.chakra.menu_item("Example"), - rx.chakra.menu_divider(), - rx.chakra.menu_item("Example"), - rx.chakra.menu_item("Example"), - ), -) -``` diff --git a/docs/library/chakra/overlay/modal.md b/docs/library/chakra/overlay/modal.md deleted file mode 100644 index 065b36854..000000000 --- a/docs/library/chakra/overlay/modal.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -components: - - rx.chakra.Modal - - rx.chakra.ModalOverlay - - rx.chakra.ModalContent - - rx.chakra.ModalHeader - - rx.chakra.ModalBody - - rx.chakra.ModalFooter ---- - -```python exec -import reflex as rx -``` - -# Modal - -A modal dialog is a window overlaid on either the primary window or another dialog window. -Content behind a modal dialog is inert, meaning that users cannot interact with it. - -```python demo exec -class ModalState(rx.State): - show: bool = False - - def change(self): - self.show = not (self.show) - - -def modal_example(): - return rx.chakra.vstack( - rx.chakra.button("Confirm", on_click=ModalState.change), - rx.chakra.modal( - rx.chakra.modal_overlay( - rx.chakra.modal_content( - rx.chakra.modal_header("Confirm"), - rx.chakra.modal_body("Do you want to confirm example?"), - rx.chakra.modal_footer(rx.chakra.button("Close", on_click=ModalState.change)), - ) - ), - is_open=ModalState.show, - ), -) -``` diff --git a/docs/library/chakra/overlay/popover.md b/docs/library/chakra/overlay/popover.md deleted file mode 100644 index 95a30da4e..000000000 --- a/docs/library/chakra/overlay/popover.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -components: - - rx.chakra.Popover - - rx.chakra.PopoverTrigger - - rx.chakra.PopoverContent - - rx.chakra.PopoverHeader - - rx.chakra.PopoverBody - - rx.chakra.PopoverFooter - - rx.chakra.PopoverArrow - - rx.chakra.PopoverAnchor ---- - -```python exec -import reflex as rx -``` - -# Popover - -Popover is a non-modal dialog that floats around a trigger. -It is used to display contextual information to the user, and should be paired with a clickable trigger element. - -```python demo -rx.chakra.popover( - rx.chakra.popover_trigger(rx.chakra.button("Popover Example")), - rx.chakra.popover_content( - rx.chakra.popover_header("Confirm"), - rx.chakra.popover_body("Do you want to confirm example?"), - rx.chakra.popover_footer(rx.chakra.text("Footer text.")), - rx.chakra.popover_close_button(), - ), -) -``` diff --git a/docs/library/chakra/overlay/tooltip.md b/docs/library/chakra/overlay/tooltip.md deleted file mode 100644 index 49db81068..000000000 --- a/docs/library/chakra/overlay/tooltip.md +++ /dev/null @@ -1,20 +0,0 @@ ---- -components: - - rx.chakra.Tooltip ---- - -```python exec -import reflex as rx -``` - -# Tooltip - -A tooltip is a brief, informative message that appears when a user interacts with an element. -Tooltips are usually initiated in one of two ways: through a mouse-hover gesture or through a keyboard-hover gesture. - -```python demo -rx.chakra.tooltip( - rx.chakra.text("Example", font_size=30), - label="Tooltip helper.", -) -``` diff --git a/docs/library/chakra/typography/heading.md b/docs/library/chakra/typography/heading.md deleted file mode 100644 index 4c5fb8663..000000000 --- a/docs/library/chakra/typography/heading.md +++ /dev/null @@ -1,36 +0,0 @@ ---- -components: - - rx.chakra.Heading ---- - -```python exec -import reflex as rx -``` - -# Heading - -The Heading component takes in a string and displays it as a heading. - -```python demo -rx.chakra.heading("Hello World!") -``` - -The size can be changed using the `size` prop. - -```python demo -rx.chakra.vstack( - rx.chakra.heading("Hello World!", size= "sm", color="red"), - rx.chakra.heading("Hello World!", size= "md", color="blue"), - rx.chakra.heading("Hello World!", size= "lg", color="green"), - rx.chakra.heading("Hello World!", size= "xl", color="blue"), - rx.chakra.heading("Hello World!", size= "2xl", color="red"), - rx.chakra.heading("Hello World!", size= "3xl", color="blue"), - rx.chakra.heading("Hello World!", size= "4xl", color="green"), -) -``` - -It can also be styled using regular CSS styles. - -```python demo -rx.chakra.heading("Hello World!", font_size="2em") -``` diff --git a/docs/library/chakra/typography/highlight.md b/docs/library/chakra/typography/highlight.md deleted file mode 100644 index d37c43c3a..000000000 --- a/docs/library/chakra/typography/highlight.md +++ /dev/null @@ -1,20 +0,0 @@ ---- -components: - - rx.chakra.Highlight ---- - -```python exec -import reflex as rx -``` - -# Highlight - -The highlight component take in a string and display some of the words as highlighted text. - -The words to highlight can be selected using the `query` prop. - -You can also customize how the hightlight will be rendered with the `styles` prop. - -```python demo -rx.chakra.highlight("Hello World, we have some highlight", query=['World','some'], styles={ 'px': '2', 'py': '1', 'rounded': 'full', 'bg': 'grey' }) -``` diff --git a/docs/library/chakra/typography/span.md b/docs/library/chakra/typography/span.md deleted file mode 100644 index 55108e4c8..000000000 --- a/docs/library/chakra/typography/span.md +++ /dev/null @@ -1,21 +0,0 @@ ---- -components: - - rx.chakra.span ---- - -```python exec -import reflex as rx -``` - -# Span - -The span component can be used to style inline text without creating a new line. - -```python demo -rx.chakra.box( - "Write some ", - rx.chakra.span("stylized ", color="red"), - rx.chakra.span("text ", color="blue"), - rx.chakra.span("using spans.", font_weight="bold") -) -``` diff --git a/docs/library/chakra/typography/text.md b/docs/library/chakra/typography/text.md deleted file mode 100644 index 1de0b95dd..000000000 --- a/docs/library/chakra/typography/text.md +++ /dev/null @@ -1,27 +0,0 @@ ---- -components: - - rx.chakra.Text ---- - -```python exec -import reflex as rx -``` - -# Text - -The text component displays a paragraph of text. - -```python demo -rx.chakra.text("Hello World!", font_size="2em") -``` - -The text element can be visually modified using the `as_` prop. - -```python demo -rx.chakra.vstack( - rx.chakra.text("Hello World!", as_="i"), - rx.chakra.text("Hello World!", as_="s"), - rx.chakra.text("Hello World!", as_="mark"), - rx.chakra.text("Hello World!", as_="sub"), -) -``` diff --git a/docs/library/other/html.md b/docs/library/other/html.md index 074d740f7..ba3fe1e31 100644 --- a/docs/library/other/html.md +++ b/docs/library/other/html.md @@ -27,7 +27,7 @@ rx.vstack( ```md alert # Missing Styles? -Reflex uses Chakra-UI and tailwind for styling, both of which reset default styles for headings. +Reflex uses Radix-UI and tailwind for styling, both of which reset default styles for headings. If you are using the html component and want pretty default styles, consider setting `class_name='prose'`, adding `@tailwindcss/typography` package to `frontend_packages` and enabling it via `tailwind` config in `rxconfig.py`. See the [Tailwind docs]({styling.overview.path}) for an example of adding this plugin. ``` diff --git a/pcweb/components/docpage/sidebar/sidebar.py b/pcweb/components/docpage/sidebar/sidebar.py index 96cf65820..6c208522a 100644 --- a/pcweb/components/docpage/sidebar/sidebar.py +++ b/pcweb/components/docpage/sidebar/sidebar.py @@ -13,7 +13,6 @@ get_component_link, component_lib, graphing_libs, - other_libs, ) from .sidebar_items.reference import api_reference, tutorials from .sidebar_items.recipes import recipes @@ -174,11 +173,7 @@ def sidebar_item_comp(item: SidebarItem, index: list[int], url: str): gap="16px", display="flex", margin_left="15px !important", - box_shadow=rx.cond( - item in other_libs, - "none", - f"inset 1px 0 0 0 {c_color('slate', 4)}", - ), + box_shadow=f"inset 1px 0 0 0 {c_color('slate', 4)}", list_style_type="none", ), margin_y="8px", @@ -234,7 +229,6 @@ def append_to_items(items, flat_items): + hosting + component_lib + graphing_libs - + other_libs + recipes + api_reference + tutorials, @@ -381,7 +375,6 @@ def sidebar_comp( backend_index: list[int], hosting_index: list[int], graphing_libs_index: list[int], - other_libs_index: list[int], api_reference_index: list[int], recipes_index: list[int], tutorials_index: list[int], @@ -468,13 +461,6 @@ def sidebar_comp( graphing_libs_index, url, ), - create_sidebar_section( - "Other Libraries", - library.path, - other_libs, - other_libs_index, - url, - ), rx.link( rx.vstack( rx.hstack( @@ -590,7 +576,6 @@ def sidebar(url=None, width: str = "100%") -> rx.Component: backend_index = calculate_index(backend, url) hosting_index = calculate_index(hosting, url) graphing_libs_index = calculate_index(graphing_libs, url) - other_libs_index = calculate_index(other_libs, url) api_reference_index = calculate_index(api_reference, url) recipes_index = calculate_index(recipes, url) tutorials_index = calculate_index(tutorials, url) @@ -604,7 +589,6 @@ def sidebar(url=None, width: str = "100%") -> rx.Component: backend_index=backend_index, hosting_index=hosting_index, graphing_libs_index=graphing_libs_index, - other_libs_index=other_libs_index, api_reference_index=api_reference_index, recipes_index=recipes_index, tutorials_index=tutorials_index, diff --git a/pcweb/components/docpage/sidebar/sidebar_items/component_lib.py b/pcweb/components/docpage/sidebar/sidebar_items/component_lib.py index a6a735440..be556f1d6 100644 --- a/pcweb/components/docpage/sidebar/sidebar_items/component_lib.py +++ b/pcweb/components/docpage/sidebar/sidebar_items/component_lib.py @@ -3,8 +3,6 @@ def get_component_link(category, clist, prefix="") -> str: - if issubclass(clist[1][0], rx.chakra.ChakraComponent): - prefix = "chakra/" component_name = rx.utils.format.to_kebab_case(clist[0]) # construct the component link. The component name points to the name of the md file. return f"/docs/library/{prefix}{category.lower().replace(' ', '-')}/{component_name.lower()}" @@ -60,23 +58,5 @@ def get_sidebar_items_graphings(): *graphing_children ] -def get_sidebar_items_other_libraries(): - from pcweb.pages.docs import chakra_components - from pcweb.pages.docs.custom_components import custom_components - - chakra_children = [] - for category in chakra_components: - category_item = get_category_children( - category, chakra_components[category], prefix="chakra/" - ) - chakra_children.append(category_item) - - chakra_item = SidebarItem(names="Chakra", children=chakra_children) - - return [ - chakra_item - ] - component_lib = get_sidebar_items_component_lib() -graphing_libs = get_sidebar_items_graphings() -other_libs = get_sidebar_items_other_libraries() +graphing_libs = get_sidebar_items_graphings() \ No newline at end of file diff --git a/pcweb/pages/docs/__init__.py b/pcweb/pages/docs/__init__.py index 00dca8903..4a4bb600c 100644 --- a/pcweb/pages/docs/__init__.py +++ b/pcweb/pages/docs/__init__.py @@ -90,7 +90,6 @@ def get_components_from_metadata(current_doc): doc.replace("\\", "/") for doc in flexdown.utils.get_flexdown_files("docs/") ] -chakra_components = defaultdict(list) graphing_components = defaultdict(list) component_list = defaultdict(list) recipes_list = defaultdict(list) @@ -152,14 +151,6 @@ def get_component(doc: str, title: str): d = flexdown.parse_file(doc) - if doc.startswith("docs/library/chakra"): - if should_skip_compile(doc): - outblocks.append((d, route)) - return - clist = [title, *get_components_from_metadata(d)] - chakra_components[category].append(clist) - title2 = "Chakra " + title2 - return multi_docs(path=route, comp=d, component_list=clist, title=title2) if doc.startswith("docs/library/graphing"): if should_skip_compile(doc): outblocks.append((d, route)) @@ -174,10 +165,6 @@ def get_component(doc: str, title: str): (RadixThemesComponent, RadixPrimitiveComponent), ): component_list[category].append(clist) - elif issubclass(clist[1][0], rx.chakra.ChakraComponent): - # Workaround for Chakra components outside of chakra directory (like Html). - component_list[category].append(clist) - route = route.replace("library/", "library/chakra/") else: component_list[category].append(clist) if should_skip_compile(doc): diff --git a/pcweb/pages/docs/component.py b/pcweb/pages/docs/component.py index fc41e60da..59e00a20f 100644 --- a/pcweb/pages/docs/component.py +++ b/pcweb/pages/docs/component.py @@ -828,8 +828,6 @@ def prop_docs( } -from reflex.components.radix import themes as rdxt - def generate_props(src, component, comp): if len(src.get_props()) == 0: From e0a77461b7162a626c100a7123f183ebc476e03f Mon Sep 17 00:00:00 2001 From: Elijah Date: Thu, 22 Aug 2024 18:43:44 +0000 Subject: [PATCH 2/2] add redirect to chakra --- pcweb/pcweb.py | 2 ++ 1 file changed, 2 insertions(+) diff --git a/pcweb/pcweb.py b/pcweb/pcweb.py index e9be61bcf..f08e1d9c7 100644 --- a/pcweb/pcweb.py +++ b/pcweb/pcweb.py @@ -97,6 +97,8 @@ ("/docs/library/layout/foreach", "/docs/library/dynamic-rendering/foreach"), ("/docs/library/layout/match", "/docs/library/dynamic-rendering/match"), ("/docs/library/layout/cond", "/docs/library/dynamic-rendering/cond"), + # redirect previous chakra links to the new chakra docs + ("/docs/library/chakra/[...component]", "https://chakra.reflex.run/introduction/") ]