diff --git a/docs/components/conditional_props.md b/docs/components/conditional_props.md deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs/tutorial/frontend.md b/docs/tutorial/frontend.md deleted file mode 100644 index baea1c769a..0000000000 --- a/docs/tutorial/frontend.md +++ /dev/null @@ -1,267 +0,0 @@ -```python exec -import reflex as rx -from pcweb.pages.docs import components -from pcweb.pages.docs import styling -from pcweb.pages.docs import library -import docs.tutorial.tutorial_style as style -``` - -# Basic Frontend - -Let's start with defining the frontend for our chat app. In Reflex, the frontend can be broken down into independent, reusable components. See the [components docs]({components.props.path}) for more information. - -## Display A Question And Answer - -We will modify the `index` function in `chatapp/chatapp.py` file to return a component that displays a single question and answer. - -```python demo box -rx.container( - rx.box( - "What is Reflex?", - # The user's question is on the right. - text_align="right", - ), - rx.box( - "A way to build web apps in pure Python!", - # The answer is on the left. - text_align="left", - ), -) -``` - -```python -# chatapp.py - -import reflex as rx - -def index() -> rx.Component: - return rx.container( - rx.box( - "What is Reflex?", - # The user's question is on the right. - text_align="right", - ), - rx.box( - "A way to build web apps in pure Python!", - # The answer is on the left. - text_align="left", - ), - ) - - -# Add state and page to the app. -app = rx.App() -app.add_page(index) -``` - -Components can be nested inside each other to create complex layouts. Here we create a parent container that contains two boxes for the question and answer. - -We also add some basic styling to the components. Components take in keyword arguments, called [props]({components.props.path}), that modify the appearance and functionality of the component. We use the `text_align` prop to align the text to the left and right. - -## Reusing Components - -Now that we have a component that displays a single question and answer, we can reuse it to display multiple questions and answers. We will move the component to a separate function `question_answer` and call it from the `index` function. - -```python exec -def qa(question: str, answer: str) -> rx.Component: - return rx.box( - rx.box(question, text_align="right"), - rx.box(answer, text_align="left"), - margin_y="1em", - ) - - -qa_pairs = [ - ("What is Reflex?", "A way to build web apps in pure Python!"), - ( - "What can I make with it?", - "Anything from a simple website to a complex web app!", - ), -] - - -def chat() -> rx.Component: - qa_pairs = [ - ("What is Reflex?", "A way to build web apps in pure Python!"), - ( - "What can I make with it?", - "Anything from a simple website to a complex web app!", - ), - ] - return rx.box(*[qa(question, answer) for question, answer in qa_pairs]) -``` - -```python demo box -rx.container(chat()) -``` - -```python -def qa(question: str, answer: str) -> rx.Component: - return rx.box( - rx.box(question, text_align="right"), - rx.box(answer, text_align="left"), - margin_y="1em", - ) - - -def chat() -> rx.Component: - qa_pairs = [ - ("What is Reflex?", "A way to build web apps in pure Python!"), - ("What can I make with it?", "Anything from a simple website to a complex web app!"), - ] - return rx.box(*[qa(question, answer) for question, answer in qa_pairs]) - - -def index() -> rx.Component: - return rx.container(chat()) -``` - -## Chat Input - -Now we want a way for the user to input a question. For this, we will use the [input]({library.forms.input.path}) component to have the user add text and a [button]({library.forms.button.path}) component to submit the question. - -```python exec -def action_bar() -> rx.Component: - return rx.hstack( - rx.input(placeholder="Ask a question"), - rx.button("Ask"), - ) -``` - -```python demo box -rx.container( - chat(), - action_bar(), -) -``` - -```python -def action_bar() -> rx.Component: - return rx.hstack( - rx.input(placeholder="Ask a question"), - rx.button("Ask"), - ) - -def index() -> rx.Component: - return rx.container( - chat(), - action_bar(), - ) -``` - -## Styling - -Let's add some styling to the app. More information on styling can be found in the [styling docs]({styling.overview.path}). To keep our code clean, we will move the styling to a separate file `chatapp/style.py`. - -```python -# style.py -import reflex as rx - -# Common styles for questions and answers. -shadow = "rgba(0, 0, 0, 0.15) 0px 2px 8px" -chat_margin = "20%" -message_style = dict( - padding="1em", - border_radius="5px", - margin_y="0.5em", - box_shadow=shadow, - max_width="30em", - display="inline-block", -) - -# Set specific styles for questions and answers. -question_style = message_style | dict(margin_left=chat_margin, background_color=rx.color("gray", 4)) -answer_style = message_style | dict(margin_right=chat_margin, background_color=rx.color("accent", 8)) - -# Styles for the action bar. -input_style = dict( - border_width="1px", padding="1em", box_shadow=shadow,width="350px" -) -button_style = dict(background_color=rx.color("accent", 10), box_shadow=shadow) -``` - -We will import the styles in `chatapp.py` and use them in the components. At this point, the app should look like this: - -```python exec -def qa4(question: str, answer: str) -> rx.Component: - return rx.box( - rx.box(rx.text(question, style=style.question_style), text_align="right"), - rx.box(rx.text(answer, style=style.answer_style), text_align="left"), - margin_y="1em", - width="100%", - ) - - -def chat4() -> rx.Component: - qa_pairs = [ - ("What is Reflex?", "A way to build web apps in pure Python!"), - ( - "What can I make with it?", - "Anything from a simple website to a complex web app!", - ), - ] - return rx.box(*[qa4(question, answer) for question, answer in qa_pairs]) - - -def action_bar4() -> rx.Component: - return rx.hstack( - rx.input(placeholder="Ask a question", style=style.input_style), - rx.button("Ask", style=style.button_style), - ) -``` - -```python demo box -rx.center( - rx.vstack( - chat4(), - action_bar4(), - align="center", - ) -) -``` - -```python -# chatapp.py -import reflex as rx - -from chatapp import style - - -def qa(question: str, answer: str) -> rx.Component: - return rx.box( - rx.box(rx.text(question, style=style.question_style), text_align="right"), - rx.box(rx.text(answer, style=style.answer_style), text_align="left"), - margin_y="1em", - width="100%", - ) - -def chat() -> rx.Component: - qa_pairs = [ - ("What is Reflex?", "A way to build web apps in pure Python!"), - ("What can I make with it?", "Anything from a simple website to a complex web app!"), - ] - return rx.box(*[qa(question, answer) for question, answer in qa_pairs]) - - -def action_bar() -> rx.Component: - return rx.hstack( - rx.input(placeholder="Ask a question", style=style.input_style), - rx.button("Ask", style=style.button_style), - ) - - -def index() -> rx.Component: - return rx.center( - rx.vstack( - chat(), - action_bar(), - align="center", - ) - ) - - -app = rx.App() -app.add_page(index) -``` - -The app is looking good, but it's not very useful yet! In the next section, we will add some functionality to the app. diff --git a/pcweb/pages/docs/__init__.py b/pcweb/pages/docs/__init__.py index 0965c12016..e22ecf02c7 100644 --- a/pcweb/pages/docs/__init__.py +++ b/pcweb/pages/docs/__init__.py @@ -1,5 +1,6 @@ import os from collections import defaultdict +from pathlib import Path from types import SimpleNamespace import reflex as rx @@ -14,8 +15,6 @@ from pcweb.route import Route from pcweb.templates.docpage import docpage, get_toc from pcweb.whitelist import _check_whitelisted_path -from reflex.components.radix.primitives.base import RadixPrimitiveComponent -from reflex.components.radix.themes.base import RadixThemesComponent from .library import library from .recipes_overview import overview @@ -177,9 +176,18 @@ def get_component(doc: str, title: str): outblocks.append((d, route)) return - return docpage(set_path=route, t=title2)( - lambda d=d, doc=doc: (get_toc(d, doc), xd.render(d, doc)) - ) + def comp(): + return (get_toc(d, doc), xd.render(d, doc)) + + doc_path = Path(doc) + doc_module = ".".join(doc_path.parts[:-1]) + doc_file = doc_path.stem + + comp.__module__ = doc_module + comp.__name__ = doc_file + comp.__qualname__ = doc_file + + return docpage(set_path=route, t=title2)(comp) doc_routes = ( diff --git a/pcweb/pages/docs/cloud_cliref.py b/pcweb/pages/docs/cloud_cliref.py index 36538b0ff1..27fe4d8df3 100644 --- a/pcweb/pages/docs/cloud_cliref.py +++ b/pcweb/pages/docs/cloud_cliref.py @@ -145,6 +145,6 @@ def generate_docs(source: str): for module_name, module_value in modules.items(): docs = generate_docs(module_value) title = module_name.replace("_", " ").title() - page_data = docpage(f"/docs/hosting/{module_name}/", title)(docs) + page_data = docpage(f"/docs/hosting/cli/{module_name}/", title)(docs) page_data.title = page_data.title.split("ยท")[0].strip() pages.append(page_data) diff --git a/pcweb/pcweb.py b/pcweb/pcweb.py index 6d5b038bf3..a1c5a5040d 100644 --- a/pcweb/pcweb.py +++ b/pcweb/pcweb.py @@ -86,7 +86,6 @@ redirects = [ ("/docs", "/docs/getting-started/introduction"), ("/docs/getting-started", "/docs/getting-started/introduction"), - ("/docs/components", "/docs/components/overview"), ("/docs/state", "/docs/state/overview"), ("/docs/styling", "/docs/styling/overview"), ("/docs/database", "/docs/database/overview"), @@ -97,7 +96,6 @@ ("/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"), - ("/docs/tutorial", "/docs/tutorial/intro"), ("/docs/components", "/docs/components/props"), ("/docs/pages", "/docs/pages/routes"), ("/docs/assets", "/docs/assets/referencing-assets"), @@ -112,6 +110,7 @@ ("/docs/utility-methods", "/docs/utility-methods/router-attributes"), ("/docs/datatable-tutorial", "/docs/datatable-tutorial/simple-table"), ("/docs/library/graphing", "/docs/library/graphing/charts"), + ("/docs/tutorial", "/docs/getting-started/chatapp-tutorial"), ("/docs/tutorial/intro", "/docs/getting-started/chatapp-tutorial"), ("/docs/tutorial/setup", "/docs/getting-started/chatapp-tutorial"), ("/docs/tutorial/frontend", "/docs/getting-started/chatapp-tutorial"), @@ -124,7 +123,6 @@ ), # Recipes ("/docs/recipes/auth", "/docs/recipes"), - ("/docs/recipes/auth", "/docs/recipes"), ("/docs/recipes/layout", "/docs/recipes"), ("/docs/recipes/others", "/docs/recipes"), ("/docs/recipes/content", "/docs/recipes"), diff --git a/pcweb/templates/docpage/docpage.py b/pcweb/templates/docpage/docpage.py index 46ef6a1609..c76a9b12de 100644 --- a/pcweb/templates/docpage/docpage.py +++ b/pcweb/templates/docpage/docpage.py @@ -1,6 +1,7 @@ """Template for documentation pages.""" from datetime import datetime +import functools from typing import Callable import reflex as rx @@ -407,6 +408,7 @@ def docpage(contents: Callable[[], Route]) -> Route: # Set the page title. title = contents.__name__.replace("_", " ").title() if t is None else t + @functools.wraps(contents) def wrapper(*args, **kwargs) -> rx.Component: """The actual function wrapper. diff --git a/pcweb/templates/gallery_app_page.py b/pcweb/templates/gallery_app_page.py index 77f5043ce3..53b6993cad 100644 --- a/pcweb/templates/gallery_app_page.py +++ b/pcweb/templates/gallery_app_page.py @@ -1,3 +1,4 @@ +import functools from typing import Callable import reflex as rx from pcweb.route import Route @@ -39,6 +40,7 @@ def webpage(contents: Callable[[], Route]) -> Route: The templated route. """ + @functools.wraps(contents) def wrapper(*children, **props) -> rx.Component: """The template component. diff --git a/pcweb/templates/storypage.py b/pcweb/templates/storypage.py index e79454a364..c20382183f 100644 --- a/pcweb/templates/storypage.py +++ b/pcweb/templates/storypage.py @@ -1,3 +1,4 @@ +import functools from typing import Callable import reflex as rx @@ -232,6 +233,7 @@ def webpage(contents: Callable[[], Route]) -> Route: The templated route. """ + @functools.wraps(contents) def wrapper(*children, **props) -> rx.Component: """The template component. diff --git a/pcweb/templates/webpage.py b/pcweb/templates/webpage.py index c977fcaa79..61b54a81f3 100644 --- a/pcweb/templates/webpage.py +++ b/pcweb/templates/webpage.py @@ -1,3 +1,4 @@ +import functools from typing import Callable import reflex as rx @@ -40,6 +41,7 @@ def webpage(contents: Callable[[], Route]) -> Route: The templated route. """ + @functools.wraps(contents) def wrapper(*children, **props) -> rx.Component: """The template component.