diff --git a/integration/test_radix_themes.py b/integration/test_radix_themes.py new file mode 100644 index 000000000..2cfe86826 --- /dev/null +++ b/integration/test_radix_themes.py @@ -0,0 +1,155 @@ +"""Integration test for @radix-ui/themes integration.""" + +from __future__ import annotations + +import time +from typing import Generator + +import pytest +from selenium.webdriver.common.by import By +from selenium.webdriver.common.keys import Keys + +from reflex.testing import DEFAULT_TIMEOUT, AppHarness, WebDriver + + +def RadixThemesApp(): + """App using radix-themes components.""" + import reflex as rx + import reflex.components.radix.themes as rdxt + + class State(rx.State): + v: str = "" + checked: bool = False + + @rx.var + def token(self) -> str: + return self.get_token() + + def index() -> rx.Component: + return rdxt.box( + rdxt.text_field(id="token", value=State.token, read_only=True), + rdxt.text_field(id="tf-bare", value=State.v, on_change=State.set_v), # type: ignore + rdxt.text_field_root( + rdxt.text_field_slot("🧸"), + rdxt.text_field(id="tf-slotted", value=State.v, on_change=State.set_v), # type: ignore + ), + rdxt.flex( + rdxt.switch( + id="switch1", + checked=State.checked, + on_checked_change=State.set_checked, # type: ignore + ), + rx.cond( + State.checked, + rdxt.text("💡", id="bulb"), + rdxt.text("🌙", id="moon"), + ), + direction="row", + gap="2", + ), + p="5", + ) + + app = rx.App( + state=State, + theme=rdxt.theme(rdxt.theme_panel(), accent_color="grass"), + ) + app.add_page(index) + app.compile() + + +@pytest.fixture(scope="session") +def radix_themes_app( + tmp_path_factory, +) -> Generator[AppHarness, None, None]: + """Start BackgroundTask app at tmp_path via AppHarness. + + Args: + tmp_path_factory: pytest tmp_path_factory fixture + + Yields: + running AppHarness instance + """ + with AppHarness.create( + root=tmp_path_factory.mktemp(f"radix_themes_app"), + app_source=RadixThemesApp, # type: ignore + ) as harness: + yield harness + + +@pytest.fixture +def driver(radix_themes_app: AppHarness) -> Generator[WebDriver, None, None]: + """Get an instance of the browser open to the radix_themes_app app. + + Args: + radix_themes_app: harness for BackgroundTask app + + Yields: + WebDriver instance. + """ + assert radix_themes_app.app_instance is not None, "app is not running" + driver = radix_themes_app.frontend() + try: + yield driver + finally: + driver.quit() + + +@pytest.fixture() +def token(radix_themes_app: AppHarness, driver: WebDriver) -> str: + """Get a function that returns the active token. + + Args: + radix_themes_app: harness for BackgroundTask app. + driver: WebDriver instance. + + Returns: + The token for the connected client + """ + assert radix_themes_app.app_instance is not None + token_input = driver.find_element(By.ID, "token") + assert token_input + + # wait for the backend connection to send the token + token = radix_themes_app.poll_for_value(token_input, timeout=DEFAULT_TIMEOUT * 2) + assert token is not None + + return token + + +def test_radix_themes_app( + radix_themes_app: AppHarness, + driver: WebDriver, + token: str, +): + """Test that background tasks work as expected. + + Args: + radix_themes_app: harness for BackgroundTask app. + driver: WebDriver instance. + token: The token for the connected client. + """ + assert radix_themes_app.app_instance is not None + + tf_bare = driver.find_element(By.ID, "tf-bare") + tf_slotted = driver.find_element(By.ID, "tf-slotted") + switch = driver.find_element(By.ID, "switch1") + + tf_bare.send_keys("hello") + assert radix_themes_app.poll_for_value(tf_slotted) == "hello" + tf_slotted.send_keys(Keys.ARROW_LEFT, Keys.ARROW_LEFT, Keys.ARROW_LEFT, "y je") + assert ( + radix_themes_app.poll_for_value(tf_bare, exp_not_equal="hello") == "hey jello" + ) + + driver.find_element(By.ID, "moon") + switch.click() + time.sleep(0.5) + driver.find_element(By.ID, "bulb") + with pytest.raises(Exception): + driver.find_element(By.ID, "moon") + switch.click() + time.sleep(0.5) + driver.find_element(By.ID, "moon") + with pytest.raises(Exception): + driver.find_element(By.ID, "bulb") diff --git a/reflex/.templates/jinja/web/pages/_app.js.jinja2 b/reflex/.templates/jinja/web/pages/_app.js.jinja2 new file mode 100644 index 000000000..4d3dff89a --- /dev/null +++ b/reflex/.templates/jinja/web/pages/_app.js.jinja2 @@ -0,0 +1,36 @@ +{% extends "web/pages/base_page.js.jinja2" %} + +{% block declaration %} +import { EventLoopProvider } from "/utils/context.js"; +import { ThemeProvider } from 'next-themes' + +{% for custom_code in custom_codes %} +{{custom_code}} +{% endfor %} +{% endblock %} + +{% block export %} +function AppWrap({children}) { + + {% for hook in hooks %} + {{ hook }} + {% endfor %} + + return ( + {{utils.render(render, indent_width=0)}} + ) +} + +export default function MyApp({ Component, pageProps }) { + return ( + + + + + + + + ); +} + +{% endblock %} \ No newline at end of file diff --git a/reflex/.templates/jinja/web/pages/index.js.jinja2 b/reflex/.templates/jinja/web/pages/index.js.jinja2 index 92b4abd7f..7ac8bf269 100644 --- a/reflex/.templates/jinja/web/pages/index.js.jinja2 +++ b/reflex/.templates/jinja/web/pages/index.js.jinja2 @@ -10,7 +10,7 @@ export default function Component() { const {{state_name}} = useContext(StateContext) const {{const.router}} = useRouter() - const { {{const.color_mode}}, {{const.toggle_color_mode}} } = {{const.use_color_mode}}() + const [ {{const.color_mode}}, {{const.toggle_color_mode}} ] = useContext(ColorModeContext) const focusRef = useRef(); // Main event loop. diff --git a/reflex/.templates/jinja/web/utils/context.js.jinja2 b/reflex/.templates/jinja/web/utils/context.js.jinja2 index db34c41ae..b8831ec98 100644 --- a/reflex/.templates/jinja/web/utils/context.js.jinja2 +++ b/reflex/.templates/jinja/web/utils/context.js.jinja2 @@ -1,10 +1,27 @@ -import { createContext } from "react" -import { Event, hydrateClientStorage } from "/utils/state.js" +import { createContext, useState } from "react" +import { Event, hydrateClientStorage, useEventLoop } from "/utils/state.js" export const initialState = {{ initial_state|json_dumps }} +export const ColorModeContext = createContext(null); export const StateContext = createContext(null); export const EventLoopContext = createContext(null); export const clientStorage = {{ client_storage|json_dumps }} export const initialEvents = [ Event('{{state_name}}.{{const.hydrate}}', hydrateClientStorage(clientStorage)), -] \ No newline at end of file +] +export const isDevMode = {{ is_dev_mode|json_dumps }} + +export function EventLoopProvider({ children }) { + const [state, addEvents, connectError] = useEventLoop( + initialState, + initialEvents, + clientStorage, + ) + return ( + + + {children} + + + ) +} \ No newline at end of file diff --git a/reflex/.templates/jinja/web/utils/theme.js.jinja2 b/reflex/.templates/jinja/web/utils/theme.js.jinja2 index 74f861c5a..a647a35b3 100644 --- a/reflex/.templates/jinja/web/utils/theme.js.jinja2 +++ b/reflex/.templates/jinja/web/utils/theme.js.jinja2 @@ -1 +1 @@ -export default {{ theme|json_dumps }} +export default {{ theme|json_dumps }} \ No newline at end of file diff --git a/reflex/.templates/web/components/reflex/chakra_color_mode_provider.js b/reflex/.templates/web/components/reflex/chakra_color_mode_provider.js new file mode 100644 index 000000000..f897522dd --- /dev/null +++ b/reflex/.templates/web/components/reflex/chakra_color_mode_provider.js @@ -0,0 +1,21 @@ +import { useColorMode as chakraUseColorMode } from "@chakra-ui/react" +import { useTheme } from "next-themes" +import { useEffect } from "react" +import { ColorModeContext } from "/utils/context.js" + +export default function ChakraColorModeProvider({ children }) { + const {colorMode, toggleColorMode} = chakraUseColorMode() + const {theme, setTheme} = useTheme() + + useEffect(() => { + if (colorMode != theme) { + toggleColorMode() + } + }, [theme]) + + return ( + + {children} + + ) +} \ No newline at end of file diff --git a/reflex/.templates/web/components/reflex/radix_themes_color_mode_provider.js b/reflex/.templates/web/components/reflex/radix_themes_color_mode_provider.js new file mode 100644 index 000000000..3664e127c --- /dev/null +++ b/reflex/.templates/web/components/reflex/radix_themes_color_mode_provider.js @@ -0,0 +1,20 @@ +import { useTheme } from "next-themes" +import { useEffect, useState } from "react" +import { ColorModeContext } from "/utils/context.js" + + +export default function RadixThemesColorModeProvider({ children }) { + const {theme, setTheme} = useTheme() + const [colorMode, setColorMode] = useState("light") + + useEffect(() => setColorMode(theme), [theme]) + + const toggleColorMode = () => { + setTheme(theme === "light" ? "dark" : "light") + } + return ( + + {children} + + ) + } \ No newline at end of file diff --git a/reflex/.templates/web/pages/_app.js b/reflex/.templates/web/pages/_app.js deleted file mode 100644 index e158f5e2b..000000000 --- a/reflex/.templates/web/pages/_app.js +++ /dev/null @@ -1,43 +0,0 @@ -import { ChakraProvider, extendTheme } from "@chakra-ui/react"; -import { Global, css } from "@emotion/react"; -import theme from "/utils/theme"; -import { clientStorage, initialEvents, initialState, StateContext, EventLoopContext } from "/utils/context.js"; -import { useEventLoop } from "/utils/state"; - -import '/styles/styles.css' - -const GlobalStyles = css` - /* Hide the blue border around Chakra components. */ - .js-focus-visible :focus:not([data-focus-visible-added]) { - outline: none; - box-shadow: none; - } -`; - -function EventLoopProvider({ children }) { - const [state, addEvents, connectError] = useEventLoop( - initialState, - initialEvents, - clientStorage, - ) - return ( - - - {children} - - - ) -} - -function MyApp({ Component, pageProps }) { - return ( - - - - - - - ); -} - -export default MyApp; diff --git a/reflex/app.py b/reflex/app.py index de3eba566..bb74d862f 100644 --- a/reflex/app.py +++ b/reflex/app.py @@ -32,6 +32,7 @@ from reflex.base import Base from reflex.compiler import compiler from reflex.compiler import utils as compiler_utils from reflex.components import connection_modal +from reflex.components.base.app_wrap import AppWrap from reflex.components.component import Component, ComponentStyle from reflex.components.layout.fragment import Fragment from reflex.components.navigation.client_side_routing import ( @@ -125,6 +126,9 @@ class App(Base): # Background tasks that are currently running background_tasks: Set[asyncio.Task] = set() + # The radix theme for the entire app + theme: Optional[Component] = None + def __init__(self, *args, **kwargs): """Initialize the app. @@ -569,6 +573,15 @@ class App(Base): page_imports.update(_frontend_packages) prerequisites.install_frontend_packages(page_imports) + def _app_root(self, app_wrappers): + order = sorted(app_wrappers, key=lambda k: k[0], reverse=True) + root = parent = app_wrappers[order[0]] + for key in order[1:]: + child = app_wrappers[key] + parent.children.append(child) + parent = child + return root + def compile(self): """Compile the app and output it to the pages folder.""" if os.environ.get(constants.SKIP_COMPILE_ENV_VAR) == "yes": @@ -601,12 +614,21 @@ class App(Base): # TODO Anecdotally, processes=2 works 10% faster (cpu_count=12) thread_pool = ThreadPool() all_imports = {} + page_futures = [] + app_wrappers: Dict[tuple[int, str], Component] = { + # Default app wrap component renders {children} + (0, "AppWrap"): AppWrap.create() + } + if self.theme is not None: + # If a theme component was provided, wrap the app with it + app_wrappers[(20, "Theme")] = self.theme + with progress: for route, component in self.pages.items(): # TODO: this progress does not reflect actual threaded task completion progress.advance(task) component.add_style(self.style) - compile_results.append( + page_futures.append( thread_pool.apply_async( compiler.compile_page, args=( @@ -619,14 +641,22 @@ class App(Base): # add component.get_imports() to all_imports all_imports.update(component.get_imports()) + # add the app wrappers from this component + app_wrappers.update(component.get_app_wrap_components()) + # Add the custom components from the page to the set. custom_components |= component.get_custom_components() thread_pool.close() thread_pool.join() - # Get the results. - compile_results = [result.get() for result in compile_results] + # Compile the app wrapper. + app_root = self._app_root(app_wrappers=app_wrappers) + all_imports.update(app_root.get_imports()) + compile_results.append(compiler.compile_app(app_root)) + + # Get the compiled pages. + compile_results.extend(result.get() for result in page_futures) # TODO the compile tasks below may also benefit from parallelization too @@ -644,7 +674,7 @@ class App(Base): compile_results.append(compiler.compile_document_root(self.head_components)) # Compile the theme. - compile_results.append(compiler.compile_theme(self.style)) + compile_results.append(compiler.compile_theme(style=self.style)) # Compile the contexts. compile_results.append(compiler.compile_contexts(self.state)) diff --git a/reflex/compiler/compiler.py b/reflex/compiler/compiler.py index 2d35d3151..371908567 100644 --- a/reflex/compiler/compiler.py +++ b/reflex/compiler/compiler.py @@ -39,13 +39,9 @@ DEFAULT_IMPORTS: imports.ImportDict = { ImportVar(tag="EventLoopContext"), ImportVar(tag="initialEvents"), ImportVar(tag="StateContext"), + ImportVar(tag="ColorModeContext"), }, "": {ImportVar(tag="focus-visible/dist/focus-visible", install=False)}, - "@chakra-ui/react": { - ImportVar(tag=constants.ColorMode.USE), - ImportVar(tag="Box"), - ImportVar(tag="Text"), - }, } @@ -64,6 +60,23 @@ def _compile_document_root(root: Component) -> str: ) +def _compile_app(app_root: Component) -> str: + """Compile the app template component. + + Args: + app_root: The app root to compile. + + Returns: + The compiled app. + """ + return templates.APP_ROOT.render( + imports=utils.compile_imports(app_root.get_imports()), + custom_codes=app_root.get_custom_code(), + hooks=app_root.get_hooks(), + render=app_root.render(), + ) + + def _compile_theme(theme: dict) -> str: """Compile the theme. @@ -89,6 +102,7 @@ def _compile_contexts(state: Type[State]) -> str: initial_state=utils.compile_state(state), state_name=state.get_name(), client_storage=utils.compile_client_storage(state), + is_dev_mode=os.environ.get("REFLEX_ENV_MODE", "dev") == "dev", ) @@ -246,6 +260,23 @@ def compile_document_root(head_components: list[Component]) -> tuple[str, str]: return output_path, code +def compile_app(app_root: Component) -> tuple[str, str]: + """Compile the app root. + + Args: + app_root: The app root component to compile. + + Returns: + The path and code of the compiled app wrapper. + """ + # Get the path for the output file. + output_path = utils.get_page_path(constants.PageNames.APP_ROOT) + + # Compile the document root. + code = _compile_app(app_root) + return output_path, code + + def compile_theme(style: ComponentStyle) -> tuple[str, str]: """Compile the theme. diff --git a/reflex/compiler/templates.py b/reflex/compiler/templates.py index 6531dedf8..f2d1272aa 100644 --- a/reflex/compiler/templates.py +++ b/reflex/compiler/templates.py @@ -60,6 +60,9 @@ RXCONFIG = get_template("app/rxconfig.py.jinja2") # Code to render a NextJS Document root. DOCUMENT_ROOT = get_template("web/pages/_document.js.jinja2") +# Code to render NextJS App root. +APP_ROOT = get_template("web/pages/_app.js.jinja2") + # Template for the theme file. THEME = get_template("web/utils/theme.js.jinja2") diff --git a/reflex/compiler/utils.py b/reflex/compiler/utils.py index f8c894202..630eb9680 100644 --- a/reflex/compiler/utils.py +++ b/reflex/compiler/utils.py @@ -10,7 +10,6 @@ from pydantic.fields import ModelField from reflex import constants from reflex.components.base import ( Body, - ColorModeScript, Description, DocumentHead, Head, @@ -269,7 +268,6 @@ def create_document_root(head_components: list[Component] | None = None) -> Comp return Html.create( DocumentHead.create(*head_components), Body.create( - ColorModeScript.create(), Main.create(), NextScript.create(), ), diff --git a/reflex/components/base/app_wrap.py b/reflex/components/base/app_wrap.py new file mode 100644 index 000000000..e52831afa --- /dev/null +++ b/reflex/components/base/app_wrap.py @@ -0,0 +1,17 @@ +"""Top-level component that wraps the entire app.""" +from reflex.components.component import Component + +from .bare import Bare + + +class AppWrap(Bare): + """Top-level component that wraps the entire app.""" + + @classmethod + def create(cls) -> Component: + """Create a new AppWrap component. + + Returns: + A new AppWrap component containing {children}. + """ + return super().create(contents="{children}") diff --git a/reflex/components/base/app_wrap.pyi b/reflex/components/base/app_wrap.pyi new file mode 100644 index 000000000..b4eef3dc7 --- /dev/null +++ b/reflex/components/base/app_wrap.pyi @@ -0,0 +1,78 @@ +"""Stub file for app_wrap.py""" +# ------------------- DO NOT EDIT ---------------------- +# This file was generated by `scripts/pyi_generator.py`! +# ------------------------------------------------------ + +from typing import Any, Dict, List, Optional, Union, overload +from reflex.components.base.bare import Bare +from reflex.components.component import Component +from reflex.vars import Var, BaseVar, ComputedVar +from reflex.event import EventHandler, EventChain, EventSpec +from reflex.style import Style + +class AppWrap(Bare): + @overload + @classmethod + def create( # type: ignore + cls, + *children, + contents: Optional[Union[Var[str], str]] = None, + style: Optional[Style] = None, + key: Optional[Any] = None, + id: Optional[Any] = None, + class_name: Optional[Any] = None, + autofocus: Optional[bool] = None, + custom_attrs: Optional[Dict[str, str]] = None, + on_blur: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_click: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_context_menu: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_double_click: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_focus: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mount: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_down: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_enter: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_leave: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_move: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_out: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_over: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_up: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_scroll: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_unmount: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + **props + ) -> "AppWrap": + """Create a new AppWrap component. + + Returns: + A new AppWrap component containing {children}. + """ + ... diff --git a/reflex/components/component.py b/reflex/components/component.py index 93978045b..518fc2dc6 100644 --- a/reflex/components/component.py +++ b/reflex/components/component.py @@ -766,7 +766,37 @@ class Component(Base, ABC): Returns: An import var. """ - return ImportVar(tag=self.tag, is_default=self.is_default, alias=self.alias) + # If the tag is dot-qualified, only import the left-most name. + tag = self.tag.partition(".")[0] if self.tag else None + alias = self.alias.partition(".")[0] if self.alias else None + return ImportVar(tag=tag, is_default=self.is_default, alias=alias) + + def _get_app_wrap_components(self) -> dict[tuple[int, str], Component]: + """Get the app wrap components for the component. + + Returns: + The app wrap components. + """ + return {} + + def get_app_wrap_components(self) -> dict[tuple[int, str], Component]: + """Get the app wrap components for the component and its children. + + Returns: + The app wrap components. + """ + # Store the components in a set to avoid duplicates. + components = self._get_app_wrap_components() + + for component in tuple(components.values()): + components.update(component.get_app_wrap_components()) + + # Add the app wrap components for the children. + for child in self.children: + components.update(child.get_app_wrap_components()) + + # Return the components. + return components # Map from component to styling. diff --git a/reflex/components/forms/debounce.py b/reflex/components/forms/debounce.py index 5095fe405..da318a1cb 100644 --- a/reflex/components/forms/debounce.py +++ b/reflex/components/forms/debounce.py @@ -68,7 +68,9 @@ class DebounceInput(Component): id=child.id, class_name=child.class_name, element=Var.create( - "{%s}" % child.tag, _var_is_local=False, _var_is_string=False + "{%s}" % (child.alias or child.tag), + _var_is_local=False, + _var_is_string=False, ), ) # do NOT render the child, DebounceInput will create it diff --git a/reflex/components/libs/chakra.py b/reflex/components/libs/chakra.py index e0064c4c2..1834abf28 100644 --- a/reflex/components/libs/chakra.py +++ b/reflex/components/libs/chakra.py @@ -1,14 +1,99 @@ """Components that are based on Chakra-UI.""" +from __future__ import annotations -from typing import Literal +from typing import List, Literal from reflex.components.component import Component +from reflex.utils import imports +from reflex.vars import ImportVar, Var class ChakraComponent(Component): """A component that wraps a Chakra component.""" - library = "@chakra-ui/react" + library = "@chakra-ui/react@2.6.1" + lib_dependencies: List[str] = [ + "@chakra-ui/system@2.5.7", + "framer-motion@10.16.4", + ] + + def _get_app_wrap_components(self) -> dict[tuple[int, str], Component]: + return { + **super()._get_app_wrap_components(), + (60, "ChakraProvider"): ChakraProvider.create(), + } + + +class Global(Component): + """The emotion/react Global styling component.""" + + library = "@emotion/react@^11.11.0" + lib_dependencies: List[str] = [ + "@emotion/styled@^11.11.0", + ] + + tag = "Global" + + styles: Var[str] + + +class ChakraProvider(ChakraComponent): + """Top level Chakra provider must be included in any app using chakra components.""" + + tag = "ChakraProvider" + + theme: Var[str] + + @classmethod + def create(cls) -> Component: + """Create a new ChakraProvider component. + + Returns: + A new ChakraProvider component. + """ + return super().create( + Global.create(styles=Var.create("GlobalStyles", _var_is_local=False)), + theme=Var.create("extendTheme(theme)", _var_is_local=False), + ) + + def _get_imports(self) -> imports.ImportDict: + imports = super()._get_imports() + imports.setdefault(self.__fields__["library"].default, set()).add( + ImportVar(tag="extendTheme", is_default=False), + ) + imports.setdefault("/utils/theme.js", set()).add( + ImportVar(tag="theme", is_default=True), + ) + imports.setdefault(Global.__fields__["library"].default, set()).add( + ImportVar(tag="css", is_default=False), + ) + return imports + + def _get_custom_code(self) -> str | None: + return """ +import '/styles/styles.css' + +const GlobalStyles = css` + /* Hide the blue border around Chakra components. */ + .js-focus-visible :focus:not([data-focus-visible-added]) { + outline: none; + box-shadow: none; + } +`; +""" + + def _get_app_wrap_components(self) -> dict[tuple[int, str], Component]: + return { + (50, "ChakraColorModeProvider"): ChakraColorModeProvider.create(), + } + + +class ChakraColorModeProvider(Component): + """Next-themes integration for chakra colorModeProvider.""" + + library = "/components/reflex/chakra_color_mode_provider.js" + tag = "ChakraColorModeProvider" + is_default = True LiteralColorScheme = Literal[ diff --git a/reflex/components/radix/__init__.py b/reflex/components/radix/__init__.py new file mode 100644 index 000000000..9f204c074 --- /dev/null +++ b/reflex/components/radix/__init__.py @@ -0,0 +1 @@ +"""Namespace for components provided by @radix-ui packages.""" diff --git a/reflex/components/radix/themes/__init__.py b/reflex/components/radix/themes/__init__.py new file mode 100644 index 000000000..10aa73c6a --- /dev/null +++ b/reflex/components/radix/themes/__init__.py @@ -0,0 +1,42 @@ +"""Namespace for components provided by the @radix-ui/themes library.""" +from .base import ( + Theme, + ThemePanel, +) +from .components import ( + Button, + Switch, + TextField, + TextFieldRoot, + TextFieldSlot, +) +from .layout import ( + Box, + Container, + Flex, + Grid, + Section, +) +from .typography import Blockquote, Code, Em, Heading, Kbd, Link, Quote, Strong, Text + +blockquote = Blockquote.create +box = Box.create +button = Button.create +code = Code.create +container = Container.create +em = Em.create +flex = Flex.create +grid = Grid.create +heading = Heading.create +kbd = Kbd.create +link = Link.create +quote = Quote.create +section = Section.create +strong = Strong.create +switch = Switch.create +text = Text.create +text_field = TextField.create +text_field_root = TextFieldRoot.create +text_field_slot = TextFieldSlot.create +theme = Theme.create +theme_panel = ThemePanel.create diff --git a/reflex/components/radix/themes/base.py b/reflex/components/radix/themes/base.py new file mode 100644 index 000000000..07595fe19 --- /dev/null +++ b/reflex/components/radix/themes/base.py @@ -0,0 +1,125 @@ +"""Base classes for radix-themes components.""" + +from __future__ import annotations + +from reflex.components import Component +from reflex.utils import imports +from reflex.vars import ImportVar, Var + + +class CommonMarginProps(Component): + """Many radix-themes elements accept shorthand margin props.""" + + # Margin: "0" - "9" + m: Var[str] + + # Margin horizontal: "0" - "9" + mx: Var[str] + + # Margin vertical: "0" - "9" + my: Var[str] + + # Margin top: "0" - "9" + mt: Var[str] + + # Margin right: "0" - "9" + mr: Var[str] + + # Margin bottom: "0" - "9" + mb: Var[str] + + # Margin left: "0" - "9" + ml: Var[str] + + +class RadixThemesComponent(Component): + """Base class for all @radix-ui/themes components.""" + + library = "@radix-ui/themes@^2.0.0" + + @classmethod + def create(cls, *children, **props) -> Component: + """Create a new component instance. + + Will prepend "RadixThemes" to the component tag to avoid conflicts with + other UI libraries for common names, like Text and Button. + + Args: + *children: Child components. + **props: Component properties. + + Returns: + A new component instance. + """ + component = super().create(*children, **props) + if component.library is None: + component.library = RadixThemesComponent.__fields__["library"].default + component.alias = "RadixThemes" + ( + component.tag or component.__class__.__name__ + ) + return component + + def _get_app_wrap_components(self) -> dict[tuple[int, str], Component]: + return { + **super()._get_app_wrap_components(), + (45, "RadixThemesColorModeProvider"): RadixThemesColorModeProvider.create(), + } + + +class Theme(RadixThemesComponent): + """A theme provider for radix components. + + This should be applied as `App.theme` to apply the theme to all radix + components in the app with the given settings. + + It can also be used in a normal page to apply specified properties to all + child elements as an override of the main theme. + """ + + tag = "Theme" + + # Whether to apply the themes background color to the theme node. + has_background: Var[bool] + + # Override light or dark mode theme: "inherit" | "light" | "dark" + appearance: Var[str] + + # The color used for default buttons, typography, backgrounds, etc + accent_color: Var[str] + + # The shade of gray + gray_color: Var[str] + + # Whether panel backgrounds are transparent: "solid" | "transparent" (default) + panel_background: Var[str] + + # Element border radius: "none" | "small" | "medium" | "large" | "full" + radius: Var[str] + + # Scale of all theme items: "90%" | "95%" | "100%" | "105%" | "110%" + scaling: Var[str] + + def _get_imports(self) -> imports.ImportDict: + return { + **super()._get_imports(), + "": {ImportVar(tag="@radix-ui/themes/styles.css", install=False)}, + } + + +class ThemePanel(RadixThemesComponent): + """Visual editor for creating and editing themes. + + Include as a child component of Theme to use in your app. + """ + + tag = "ThemePanel" + + default_open: Var[bool] + + +class RadixThemesColorModeProvider(Component): + """Next-themes integration for radix themes components.""" + + library = "/components/reflex/radix_themes_color_mode_provider.js" + tag = "RadixThemesColorModeProvider" + is_default = True diff --git a/reflex/components/radix/themes/base.pyi b/reflex/components/radix/themes/base.pyi new file mode 100644 index 000000000..8b20133ea --- /dev/null +++ b/reflex/components/radix/themes/base.pyi @@ -0,0 +1,434 @@ +"""Stub file for base.py""" +# ------------------- DO NOT EDIT ---------------------- +# This file was generated by `scripts/pyi_generator.py`! +# ------------------------------------------------------ + +from typing import Any, Dict, List, Optional, Union, overload +from reflex.components.component import Component +from reflex.vars import Var, BaseVar, ComputedVar +from reflex.event import EventHandler, EventChain, EventSpec +from reflex.style import Style + +class CommonMarginProps(Component): + @overload + @classmethod + def create( # type: ignore + cls, + *children, + m: Optional[Union[Var[str], str]] = None, + mx: Optional[Union[Var[str], str]] = None, + my: Optional[Union[Var[str], str]] = None, + mt: Optional[Union[Var[str], str]] = None, + mr: Optional[Union[Var[str], str]] = None, + mb: Optional[Union[Var[str], str]] = None, + ml: Optional[Union[Var[str], str]] = None, + style: Optional[Style] = None, + key: Optional[Any] = None, + id: Optional[Any] = None, + class_name: Optional[Any] = None, + autofocus: Optional[bool] = None, + custom_attrs: Optional[Dict[str, str]] = None, + on_blur: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_click: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_context_menu: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_double_click: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_focus: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mount: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_down: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_enter: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_leave: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_move: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_out: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_over: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_up: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_scroll: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_unmount: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + **props + ) -> "CommonMarginProps": + """Create the component. + + Args: + *children: The children of the component. + m: Margin: "0" - "9" + mx: Margin horizontal: "0" - "9" + my: Margin vertical: "0" - "9" + mt: Margin top: "0" - "9" + mr: Margin right: "0" - "9" + mb: Margin bottom: "0" - "9" + ml: Margin left: "0" - "9" + style: The style of the component. + key: A unique key for the component. + id: The id for the component. + class_name: The class name for the component. + autofocus: Whether the component should take the focus once the page is loaded + custom_attrs: custom attribute + **props: The props of the component. + + Returns: + The component. + + Raises: + TypeError: If an invalid child is passed. + """ + ... + +class RadixThemesComponent(Component): + @overload + @classmethod + def create( # type: ignore + cls, + *children, + style: Optional[Style] = None, + key: Optional[Any] = None, + id: Optional[Any] = None, + class_name: Optional[Any] = None, + autofocus: Optional[bool] = None, + custom_attrs: Optional[Dict[str, str]] = None, + on_blur: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_click: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_context_menu: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_double_click: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_focus: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mount: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_down: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_enter: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_leave: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_move: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_out: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_over: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_up: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_scroll: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_unmount: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + **props + ) -> "RadixThemesComponent": + """Create a new component instance. + + Will prepend "RadixThemes" to the component tag to avoid conflicts with + other UI libraries for common names, like Text and Button. + + Args: + *children: Child components. + style: The style of the component. + key: A unique key for the component. + id: The id for the component. + class_name: The class name for the component. + autofocus: Whether the component should take the focus once the page is loaded + custom_attrs: custom attribute + **props: Component properties. + + Returns: + A new component instance. + """ + ... + +class Theme(RadixThemesComponent): + @overload + @classmethod + def create( # type: ignore + cls, + *children, + has_background: Optional[Union[Var[bool], bool]] = None, + appearance: Optional[Union[Var[str], str]] = None, + accent_color: Optional[Union[Var[str], str]] = None, + gray_color: Optional[Union[Var[str], str]] = None, + panel_background: Optional[Union[Var[str], str]] = None, + radius: Optional[Union[Var[str], str]] = None, + scaling: Optional[Union[Var[str], str]] = None, + style: Optional[Style] = None, + key: Optional[Any] = None, + id: Optional[Any] = None, + class_name: Optional[Any] = None, + autofocus: Optional[bool] = None, + custom_attrs: Optional[Dict[str, str]] = None, + on_blur: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_click: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_context_menu: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_double_click: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_focus: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mount: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_down: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_enter: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_leave: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_move: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_out: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_over: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_up: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_scroll: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_unmount: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + **props + ) -> "Theme": + """Create a new component instance. + + Will prepend "RadixThemes" to the component tag to avoid conflicts with + other UI libraries for common names, like Text and Button. + + Args: + *children: Child components. + has_background: Whether to apply the themes background color to the theme node. + appearance: Override light or dark mode theme: "inherit" | "light" | "dark" + accent_color: The color used for default buttons, typography, backgrounds, etc + gray_color: The shade of gray + panel_background: Whether panel backgrounds are transparent: "solid" | "transparent" (default) + radius: Element border radius: "none" | "small" | "medium" | "large" | "full" + scaling: Scale of all theme items: "90%" | "95%" | "100%" | "105%" | "110%" + style: The style of the component. + key: A unique key for the component. + id: The id for the component. + class_name: The class name for the component. + autofocus: Whether the component should take the focus once the page is loaded + custom_attrs: custom attribute + **props: Component properties. + + Returns: + A new component instance. + """ + ... + +class ThemePanel(RadixThemesComponent): + @overload + @classmethod + def create( # type: ignore + cls, + *children, + default_open: Optional[Union[Var[bool], bool]] = None, + style: Optional[Style] = None, + key: Optional[Any] = None, + id: Optional[Any] = None, + class_name: Optional[Any] = None, + autofocus: Optional[bool] = None, + custom_attrs: Optional[Dict[str, str]] = None, + on_blur: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_click: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_context_menu: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_double_click: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_focus: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mount: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_down: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_enter: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_leave: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_move: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_out: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_over: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_up: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_scroll: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_unmount: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + **props + ) -> "ThemePanel": + """Create a new component instance. + + Will prepend "RadixThemes" to the component tag to avoid conflicts with + other UI libraries for common names, like Text and Button. + + Args: + *children: Child components. + style: The style of the component. + key: A unique key for the component. + id: The id for the component. + class_name: The class name for the component. + autofocus: Whether the component should take the focus once the page is loaded + custom_attrs: custom attribute + **props: Component properties. + + Returns: + A new component instance. + """ + ... + +class RadixThemesColorModeProvider(Component): + @overload + @classmethod + def create( # type: ignore + cls, + *children, + style: Optional[Style] = None, + key: Optional[Any] = None, + id: Optional[Any] = None, + class_name: Optional[Any] = None, + autofocus: Optional[bool] = None, + custom_attrs: Optional[Dict[str, str]] = None, + on_blur: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_click: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_context_menu: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_double_click: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_focus: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mount: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_down: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_enter: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_leave: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_move: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_out: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_over: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_up: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_scroll: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_unmount: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + **props + ) -> "RadixThemesColorModeProvider": + """Create the component. + + Args: + *children: The children of the component. + style: The style of the component. + key: A unique key for the component. + id: The id for the component. + class_name: The class name for the component. + autofocus: Whether the component should take the focus once the page is loaded + custom_attrs: custom attribute + **props: The props of the component. + + Returns: + The component. + + Raises: + TypeError: If an invalid child is passed. + """ + ... diff --git a/reflex/components/radix/themes/components.py b/reflex/components/radix/themes/components.py new file mode 100644 index 000000000..d5bae823e --- /dev/null +++ b/reflex/components/radix/themes/components.py @@ -0,0 +1,160 @@ +"""Interactive components provided by @radix-ui/themes.""" +from typing import Any, Dict + +from reflex import el +from reflex.components.component import Component +from reflex.components.forms.debounce import DebounceInput +from reflex.constants import EventTriggers +from reflex.vars import Var + +from .base import CommonMarginProps, RadixThemesComponent + + +class Button(CommonMarginProps, RadixThemesComponent): + """Trigger an action or event, such as submitting a form or displaying a dialog.""" + + tag = "Button" + + # Change the default rendered element for the one passed as a child, merging their props and behavior. + as_child: Var[bool] + + # Button size "1" - "4" + size: Var[str] + + # Variant of button: "solid" | "soft" | "outline" | "ghost" + variant: Var[str] + + # Override theme color for button + color: Var[str] + + # Whether to render the button with higher contrast color against background + high_contrast: Var[bool] + + # Override theme radius for button: "none" | "small" | "medium" | "large" | "full" + radius: Var[str] + + +class Switch(CommonMarginProps, RadixThemesComponent): + """A toggle switch alternative to the checkbox.""" + + tag = "Switch" + + # Change the default rendered element for the one passed as a child, merging their props and behavior. + as_child: Var[bool] + + # Whether the switch is checked by default + default_checked: Var[bool] + + # Whether the switch is checked + checked: Var[bool] + + # If true, prevent the user from interacting with the switch + disabled: Var[bool] + + # If true, the user must interact with the switch to submit the form + required: Var[bool] + + # The name of the switch (when submitting a form) + name: Var[str] + + # The value associated with the "on" position + value: Var[str] + + # Switch size "1" - "4" + size: Var[str] + + # Variant of switch: "solid" | "soft" | "outline" | "ghost" + variant: Var[str] + + # Override theme color for switch + color: Var[str] + + # Whether to render the switch with higher contrast color against background + high_contrast: Var[bool] + + # Override theme radius for switch: "none" | "small" | "medium" | "large" | "full" + radius: Var[str] + + def get_event_triggers(self) -> Dict[str, Any]: + """Get the event triggers that pass the component's value to the handler. + + Returns: + A dict mapping the event trigger name to the argspec passed to the handler. + """ + return { + **super().get_event_triggers(), + EventTriggers.ON_CHECKED_CHANGE: lambda checked: [checked], + } + + +class TextFieldRoot(CommonMarginProps, RadixThemesComponent): + """Captures user input with an optional slot for buttons and icons.""" + + tag = "TextField.Root" + + # Button size "1" - "3" + size: Var[str] + + # Variant of text field: "classic" | "surface" | "soft" + variant: Var[str] + + # Override theme color for text field + color: Var[str] + + # Override theme radius for text field: "none" | "small" | "medium" | "large" | "full" + radius: Var[str] + + +class TextField(TextFieldRoot, el.Input): + """The input part of a TextField, may be used by itself.""" + + tag = "TextField.Input" + + @classmethod + def create(cls, *children, **props) -> Component: + """Create an Input component. + + Args: + *children: The children of the component. + **props: The properties of the component. + + Returns: + The component. + """ + if ( + isinstance(props.get("value"), Var) and props.get("on_change") + ) or "debounce_timeout" in props: + # Currently default to 50ms, which appears to be a good balance + debounce_timeout = props.pop("debounce_timeout", 50) + # create a debounced input if the user requests full control to avoid typing jank + return DebounceInput.create( + super().create(*children, **props), debounce_timeout=debounce_timeout + ) + return super().create(*children, **props) + + def get_event_triggers(self) -> Dict[str, Any]: + """Get the event triggers that pass the component's value to the handler. + + Returns: + A dict mapping the event trigger to the var that is passed to the handler. + """ + return { + **super().get_event_triggers(), + EventTriggers.ON_CHANGE: lambda e0: [e0.target.value], + EventTriggers.ON_FOCUS: lambda e0: [e0.target.value], + EventTriggers.ON_BLUR: lambda e0: [e0.target.value], + EventTriggers.ON_KEY_DOWN: lambda e0: [e0.key], + EventTriggers.ON_KEY_UP: lambda e0: [e0.key], + } + + +class TextFieldSlot(RadixThemesComponent): + """Contains icons or buttons associated with an Input.""" + + tag = "TextField.Slot" + + # Override theme color for text field slot + color: Var[str] + + # Override the gap spacing between slot and input: "1" - "9" + gap: Var[str] diff --git a/reflex/components/radix/themes/components.pyi b/reflex/components/radix/themes/components.pyi new file mode 100644 index 000000000..de03aac8a --- /dev/null +++ b/reflex/components/radix/themes/components.pyi @@ -0,0 +1,650 @@ +"""Stub file for components.py""" +# ------------------- DO NOT EDIT ---------------------- +# This file was generated by `scripts/pyi_generator.py`! +# ------------------------------------------------------ + +from typing import Any, Dict, List, Optional, Union, overload +from reflex.components.radix.themes.base import CommonMarginProps +from reflex.components.component import Component +from reflex.el.elements import Input +from reflex.components.radix.themes.base import RadixThemesComponent +from reflex.vars import Var, BaseVar, ComputedVar +from reflex.event import EventHandler, EventChain, EventSpec +from reflex.style import Style + +class Button(CommonMarginProps, RadixThemesComponent): + @overload + @classmethod + def create( # type: ignore + cls, + *children, + as_child: Optional[Union[Var[bool], bool]] = None, + size: Optional[Union[Var[str], str]] = None, + variant: Optional[Union[Var[str], str]] = None, + color: Optional[Union[Var[str], str]] = None, + high_contrast: Optional[Union[Var[bool], bool]] = None, + radius: Optional[Union[Var[str], str]] = None, + m: Optional[Union[Var[str], str]] = None, + mx: Optional[Union[Var[str], str]] = None, + my: Optional[Union[Var[str], str]] = None, + mt: Optional[Union[Var[str], str]] = None, + mr: Optional[Union[Var[str], str]] = None, + mb: Optional[Union[Var[str], str]] = None, + ml: Optional[Union[Var[str], str]] = None, + style: Optional[Style] = None, + key: Optional[Any] = None, + id: Optional[Any] = None, + class_name: Optional[Any] = None, + autofocus: Optional[bool] = None, + custom_attrs: Optional[Dict[str, str]] = None, + on_blur: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_click: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_context_menu: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_double_click: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_focus: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mount: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_down: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_enter: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_leave: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_move: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_out: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_over: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_up: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_scroll: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_unmount: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + **props + ) -> "Button": + """Create a new component instance. + + Will prepend "RadixThemes" to the component tag to avoid conflicts with + other UI libraries for common names, like Text and Button. + + Args: + *children: Child components. + as_child: Change the default rendered element for the one passed as a child, merging their props and behavior. + size: Button size "1" - "4" + variant: Variant of button: "solid" | "soft" | "outline" | "ghost" + color: Override theme color for button + high_contrast: Whether to render the button with higher contrast color against background + radius: Override theme radius for button: "none" | "small" | "medium" | "large" | "full" + m: Margin: "0" - "9" + mx: Margin horizontal: "0" - "9" + my: Margin vertical: "0" - "9" + mt: Margin top: "0" - "9" + mr: Margin right: "0" - "9" + mb: Margin bottom: "0" - "9" + ml: Margin left: "0" - "9" + style: The style of the component. + key: A unique key for the component. + id: The id for the component. + class_name: The class name for the component. + autofocus: Whether the component should take the focus once the page is loaded + custom_attrs: custom attribute + **props: Component properties. + + Returns: + A new component instance. + """ + ... + +class Switch(CommonMarginProps, RadixThemesComponent): + @overload + @classmethod + def create( # type: ignore + cls, + *children, + as_child: Optional[Union[Var[bool], bool]] = None, + default_checked: Optional[Union[Var[bool], bool]] = None, + checked: Optional[Union[Var[bool], bool]] = None, + disabled: Optional[Union[Var[bool], bool]] = None, + required: Optional[Union[Var[bool], bool]] = None, + name: Optional[Union[Var[str], str]] = None, + value: Optional[Union[Var[str], str]] = None, + size: Optional[Union[Var[str], str]] = None, + variant: Optional[Union[Var[str], str]] = None, + color: Optional[Union[Var[str], str]] = None, + high_contrast: Optional[Union[Var[bool], bool]] = None, + radius: Optional[Union[Var[str], str]] = None, + m: Optional[Union[Var[str], str]] = None, + mx: Optional[Union[Var[str], str]] = None, + my: Optional[Union[Var[str], str]] = None, + mt: Optional[Union[Var[str], str]] = None, + mr: Optional[Union[Var[str], str]] = None, + mb: Optional[Union[Var[str], str]] = None, + ml: Optional[Union[Var[str], str]] = None, + style: Optional[Style] = None, + key: Optional[Any] = None, + id: Optional[Any] = None, + class_name: Optional[Any] = None, + autofocus: Optional[bool] = None, + custom_attrs: Optional[Dict[str, str]] = None, + on_blur: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_checked_change: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_click: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_context_menu: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_double_click: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_focus: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mount: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_down: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_enter: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_leave: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_move: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_out: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_over: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_up: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_scroll: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_unmount: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + **props + ) -> "Switch": + """Create a new component instance. + + Will prepend "RadixThemes" to the component tag to avoid conflicts with + other UI libraries for common names, like Text and Button. + + Args: + *children: Child components. + as_child: Change the default rendered element for the one passed as a child, merging their props and behavior. + default_checked: Whether the switch is checked by default + checked: Whether the switch is checked + disabled: If true, prevent the user from interacting with the switch + required: If true, the user must interact with the switch to submit the form + name: The name of the switch (when submitting a form) + value: The value associated with the "on" position + size: Switch size "1" - "4" + variant: Variant of switch: "solid" | "soft" | "outline" | "ghost" + color: Override theme color for switch + high_contrast: Whether to render the switch with higher contrast color against background + radius: Override theme radius for switch: "none" | "small" | "medium" | "large" | "full" + m: Margin: "0" - "9" + mx: Margin horizontal: "0" - "9" + my: Margin vertical: "0" - "9" + mt: Margin top: "0" - "9" + mr: Margin right: "0" - "9" + mb: Margin bottom: "0" - "9" + ml: Margin left: "0" - "9" + style: The style of the component. + key: A unique key for the component. + id: The id for the component. + class_name: The class name for the component. + autofocus: Whether the component should take the focus once the page is loaded + custom_attrs: custom attribute + **props: Component properties. + + Returns: + A new component instance. + """ + ... + +class TextFieldRoot(CommonMarginProps, RadixThemesComponent): + @overload + @classmethod + def create( # type: ignore + cls, + *children, + size: Optional[Union[Var[str], str]] = None, + variant: Optional[Union[Var[str], str]] = None, + color: Optional[Union[Var[str], str]] = None, + radius: Optional[Union[Var[str], str]] = None, + m: Optional[Union[Var[str], str]] = None, + mx: Optional[Union[Var[str], str]] = None, + my: Optional[Union[Var[str], str]] = None, + mt: Optional[Union[Var[str], str]] = None, + mr: Optional[Union[Var[str], str]] = None, + mb: Optional[Union[Var[str], str]] = None, + ml: Optional[Union[Var[str], str]] = None, + style: Optional[Style] = None, + key: Optional[Any] = None, + id: Optional[Any] = None, + class_name: Optional[Any] = None, + autofocus: Optional[bool] = None, + custom_attrs: Optional[Dict[str, str]] = None, + on_blur: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_click: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_context_menu: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_double_click: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_focus: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mount: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_down: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_enter: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_leave: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_move: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_out: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_over: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_up: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_scroll: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_unmount: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + **props + ) -> "TextFieldRoot": + """Create a new component instance. + + Will prepend "RadixThemes" to the component tag to avoid conflicts with + other UI libraries for common names, like Text and Button. + + Args: + *children: Child components. + size: Button size "1" - "3" + variant: Variant of text field: "classic" | "surface" | "soft" + color: Override theme color for text field + radius: Override theme radius for text field: "none" | "small" | "medium" | "large" | "full" + m: Margin: "0" - "9" + mx: Margin horizontal: "0" - "9" + my: Margin vertical: "0" - "9" + mt: Margin top: "0" - "9" + mr: Margin right: "0" - "9" + mb: Margin bottom: "0" - "9" + ml: Margin left: "0" - "9" + style: The style of the component. + key: A unique key for the component. + id: The id for the component. + class_name: The class name for the component. + autofocus: Whether the component should take the focus once the page is loaded + custom_attrs: custom attribute + **props: Component properties. + + Returns: + A new component instance. + """ + ... + +class TextField(TextFieldRoot, Input): + @overload + @classmethod + def create( # type: ignore + cls, + *children, + size: Optional[Union[Var[str], str]] = None, + variant: Optional[Union[Var[str], str]] = None, + color: Optional[Union[Var[str], str]] = None, + radius: Optional[Union[Var[str], str]] = None, + m: Optional[Union[Var[str], str]] = None, + mx: Optional[Union[Var[str], str]] = None, + my: Optional[Union[Var[str], str]] = None, + mt: Optional[Union[Var[str], str]] = None, + mr: Optional[Union[Var[str], str]] = None, + mb: Optional[Union[Var[str], str]] = None, + ml: Optional[Union[Var[str], str]] = None, + accept: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + access_key: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + alt: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None, + auto_capitalize: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + auto_complete: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + auto_focus: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + capture: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + checked: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + content_editable: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + context_menu: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + dir: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None, + dirname: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + disabled: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + draggable: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + enter_key_hint: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + form: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None, + form_action: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + form_enc_type: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + form_method: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + form_no_validate: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + form_target: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + height: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + hidden: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + input_mode: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + item_prop: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + lang: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None, + list: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None, + max: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None, + max_length: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + min_length: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + min: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None, + multiple: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + name: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None, + pattern: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + placeholder: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + read_only: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + required: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + role: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None, + slot: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None, + spell_check: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + src: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None, + step: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None, + tab_index: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + title: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + translate: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + type: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None, + use_map: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + value: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + width: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + style: Optional[Style] = None, + key: Optional[Any] = None, + id: Optional[Any] = None, + class_name: Optional[Any] = None, + autofocus: Optional[bool] = None, + custom_attrs: Optional[Dict[str, str]] = None, + on_blur: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_change: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_click: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_context_menu: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_double_click: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_focus: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_key_down: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_key_up: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mount: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_down: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_enter: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_leave: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_move: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_out: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_over: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_up: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_scroll: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_unmount: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + **props + ) -> "TextField": + """Create an Input component. + + Args: + *children: The children of the component. + size: Button size "1" - "3" + variant: Variant of text field: "classic" | "surface" | "soft" + color: Override theme color for text field + radius: Override theme radius for text field: "none" | "small" | "medium" | "large" | "full" + m: Margin: "0" - "9" + mx: Margin horizontal: "0" - "9" + my: Margin vertical: "0" - "9" + mt: Margin top: "0" - "9" + mr: Margin right: "0" - "9" + mb: Margin bottom: "0" - "9" + ml: Margin left: "0" - "9" + style: The style of the component. + key: A unique key for the component. + id: The id for the component. + class_name: The class name for the component. + autofocus: Whether the component should take the focus once the page is loaded + custom_attrs: custom attribute + **props: The properties of the component. + + Returns: + The component. + """ + ... + +class TextFieldSlot(RadixThemesComponent): + @overload + @classmethod + def create( # type: ignore + cls, + *children, + color: Optional[Union[Var[str], str]] = None, + gap: Optional[Union[Var[str], str]] = None, + style: Optional[Style] = None, + key: Optional[Any] = None, + id: Optional[Any] = None, + class_name: Optional[Any] = None, + autofocus: Optional[bool] = None, + custom_attrs: Optional[Dict[str, str]] = None, + on_blur: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_click: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_context_menu: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_double_click: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_focus: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mount: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_down: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_enter: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_leave: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_move: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_out: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_over: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_up: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_scroll: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_unmount: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + **props + ) -> "TextFieldSlot": + """Create a new component instance. + + Will prepend "RadixThemes" to the component tag to avoid conflicts with + other UI libraries for common names, like Text and Button. + + Args: + *children: Child components. + color: Override theme color for text field slot + gap: Override the gap spacing between slot and input: "1" - "9" + style: The style of the component. + key: A unique key for the component. + id: The id for the component. + class_name: The class name for the component. + autofocus: Whether the component should take the focus once the page is loaded + custom_attrs: custom attribute + **props: Component properties. + + Returns: + A new component instance. + """ + ... diff --git a/reflex/components/radix/themes/layout.py b/reflex/components/radix/themes/layout.py new file mode 100644 index 000000000..fa9a22846 --- /dev/null +++ b/reflex/components/radix/themes/layout.py @@ -0,0 +1,124 @@ +"""Declarative layout and common spacing props.""" +from __future__ import annotations + +from reflex.vars import Var + +from .base import CommonMarginProps, RadixThemesComponent + + +class LayoutComponent(CommonMarginProps, RadixThemesComponent): + """Box, Flex and Grid are foundational elements you'll use to construct + layouts. Box provides block-level spacing and sizing, while Flex and Grid + let you create flexible columns, rows and grids. + """ + + # Padding: "0" - "9" + p: Var[str] + + # Padding horizontal: "0" - "9" + px: Var[str] + + # Padding vertical: "0" - "9" + py: Var[str] + + # Padding top: "0" - "9" + pt: Var[str] + + # Padding right: "0" - "9" + pr: Var[str] + + # Padding bottom: "0" - "9" + pb: Var[str] + + # Padding left: "0" - "9" + pl: Var[str] + + # Whether the element will take up the smallest possible space: "0" | "1" + shrink: Var[str] + + # Whether the element will take up the largest possible space: "0" | "1" + grow: Var[str] + + +class Box(LayoutComponent): + """A fundamental layout building block, based on
.""" + + tag = "Box" + + +class Flex(LayoutComponent): + """Component for creating flex layouts.""" + + tag = "Flex" + + # Change the default rendered element for the one passed as a child, merging their props and behavior. + as_child: Var[bool] + + # How to display the element: "none" | "inline-flex" | "flex" + display: Var[str] + + # How child items are layed out: "row" | "column" | "row-reverse" | "column-reverse" + direction: Var[str] + + # Alignment of children along the main axis: "start" | "center" | "end" | "baseline" | "stretch" + align: Var[str] + + # Alignment of children along the cross axis: "start" | "center" | "end" | "between" + justify: Var[str] + + # Whether children should wrap when they reach the end of their container: "nowrap" | "wrap" | "wrap-reverse" + wrap: Var[str] + + # Gap between children: "0" - "9" + gap: Var[str] + + +class Grid(RadixThemesComponent): + """Component for creating grid layouts.""" + + # Change the default rendered element for the one passed as a child, merging their props and behavior. + as_child: Var[bool] + + # How to display the element: "none" | "inline-grid" | "grid" + display: Var[str] + + # Number of columns + columns: Var[str] + + # Number of rows + rows: Var[str] + + # How the grid items are layed out: "row" | "column" | "dense" | "row-dense" | "column-dense" + flow: Var[str] + + # Alignment of children along the main axis: "start" | "center" | "end" | "baseline" | "stretch" + align: Var[str] + + # Alignment of children along the cross axis: "start" | "center" | "end" | "between" + justify: Var[str] + + # Gap between children: "0" - "9" + gap: Var[str] + + # Gap between children horizontal: "0" - "9" + gap_x: Var[str] + + # Gap between children vertical: "0" - "9" + gap_x: Var[str] + + +class Container(LayoutComponent): + """Constrains the maximum width of page content. + + See https://www.radix-ui.com/themes/docs/components/container + """ + + # The size of the container: "1" - "4" (default "4") + size: Var[str] + + +class Section(LayoutComponent): + """Denotes a section of page content.""" + + # The size of the section: "1" - "3" (default "3") + size: Var[str] diff --git a/reflex/components/radix/themes/layout.pyi b/reflex/components/radix/themes/layout.pyi new file mode 100644 index 000000000..ef1c9f945 --- /dev/null +++ b/reflex/components/radix/themes/layout.pyi @@ -0,0 +1,682 @@ +"""Stub file for layout.py""" +# ------------------- DO NOT EDIT ---------------------- +# This file was generated by `scripts/pyi_generator.py`! +# ------------------------------------------------------ + +from typing import Any, Dict, List, Optional, Union, overload +from reflex.components.radix.themes.base import CommonMarginProps +from reflex.components.component import Component +from reflex.components.radix.themes.base import RadixThemesComponent +from reflex.vars import Var, BaseVar, ComputedVar +from reflex.event import EventHandler, EventChain, EventSpec +from reflex.style import Style + +class LayoutComponent(CommonMarginProps, RadixThemesComponent): + @overload + @classmethod + def create( # type: ignore + cls, + *children, + p: Optional[Union[Var[str], str]] = None, + px: Optional[Union[Var[str], str]] = None, + py: Optional[Union[Var[str], str]] = None, + pt: Optional[Union[Var[str], str]] = None, + pr: Optional[Union[Var[str], str]] = None, + pb: Optional[Union[Var[str], str]] = None, + pl: Optional[Union[Var[str], str]] = None, + shrink: Optional[Union[Var[str], str]] = None, + grow: Optional[Union[Var[str], str]] = None, + m: Optional[Union[Var[str], str]] = None, + mx: Optional[Union[Var[str], str]] = None, + my: Optional[Union[Var[str], str]] = None, + mt: Optional[Union[Var[str], str]] = None, + mr: Optional[Union[Var[str], str]] = None, + mb: Optional[Union[Var[str], str]] = None, + ml: Optional[Union[Var[str], str]] = None, + style: Optional[Style] = None, + key: Optional[Any] = None, + id: Optional[Any] = None, + class_name: Optional[Any] = None, + autofocus: Optional[bool] = None, + custom_attrs: Optional[Dict[str, str]] = None, + on_blur: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_click: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_context_menu: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_double_click: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_focus: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mount: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_down: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_enter: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_leave: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_move: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_out: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_over: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_up: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_scroll: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_unmount: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + **props + ) -> "LayoutComponent": + """Create a new component instance. + + Will prepend "RadixThemes" to the component tag to avoid conflicts with + other UI libraries for common names, like Text and Button. + + Args: + *children: Child components. + p: Padding: "0" - "9" + px: Padding horizontal: "0" - "9" + py: Padding vertical: "0" - "9" + pt: Padding top: "0" - "9" + pr: Padding right: "0" - "9" + pb: Padding bottom: "0" - "9" + pl: Padding left: "0" - "9" + shrink: Whether the element will take up the smallest possible space: "0" | "1" + grow: Whether the element will take up the largest possible space: "0" | "1" + m: Margin: "0" - "9" + mx: Margin horizontal: "0" - "9" + my: Margin vertical: "0" - "9" + mt: Margin top: "0" - "9" + mr: Margin right: "0" - "9" + mb: Margin bottom: "0" - "9" + ml: Margin left: "0" - "9" + style: The style of the component. + key: A unique key for the component. + id: The id for the component. + class_name: The class name for the component. + autofocus: Whether the component should take the focus once the page is loaded + custom_attrs: custom attribute + **props: Component properties. + + Returns: + A new component instance. + """ + ... + +class Box(LayoutComponent): + @overload + @classmethod + def create( # type: ignore + cls, + *children, + p: Optional[Union[Var[str], str]] = None, + px: Optional[Union[Var[str], str]] = None, + py: Optional[Union[Var[str], str]] = None, + pt: Optional[Union[Var[str], str]] = None, + pr: Optional[Union[Var[str], str]] = None, + pb: Optional[Union[Var[str], str]] = None, + pl: Optional[Union[Var[str], str]] = None, + shrink: Optional[Union[Var[str], str]] = None, + grow: Optional[Union[Var[str], str]] = None, + m: Optional[Union[Var[str], str]] = None, + mx: Optional[Union[Var[str], str]] = None, + my: Optional[Union[Var[str], str]] = None, + mt: Optional[Union[Var[str], str]] = None, + mr: Optional[Union[Var[str], str]] = None, + mb: Optional[Union[Var[str], str]] = None, + ml: Optional[Union[Var[str], str]] = None, + style: Optional[Style] = None, + key: Optional[Any] = None, + id: Optional[Any] = None, + class_name: Optional[Any] = None, + autofocus: Optional[bool] = None, + custom_attrs: Optional[Dict[str, str]] = None, + on_blur: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_click: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_context_menu: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_double_click: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_focus: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mount: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_down: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_enter: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_leave: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_move: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_out: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_over: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_up: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_scroll: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_unmount: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + **props + ) -> "Box": + """Create a new component instance. + + Will prepend "RadixThemes" to the component tag to avoid conflicts with + other UI libraries for common names, like Text and Button. + + Args: + *children: Child components. + p: Padding: "0" - "9" + px: Padding horizontal: "0" - "9" + py: Padding vertical: "0" - "9" + pt: Padding top: "0" - "9" + pr: Padding right: "0" - "9" + pb: Padding bottom: "0" - "9" + pl: Padding left: "0" - "9" + shrink: Whether the element will take up the smallest possible space: "0" | "1" + grow: Whether the element will take up the largest possible space: "0" | "1" + m: Margin: "0" - "9" + mx: Margin horizontal: "0" - "9" + my: Margin vertical: "0" - "9" + mt: Margin top: "0" - "9" + mr: Margin right: "0" - "9" + mb: Margin bottom: "0" - "9" + ml: Margin left: "0" - "9" + style: The style of the component. + key: A unique key for the component. + id: The id for the component. + class_name: The class name for the component. + autofocus: Whether the component should take the focus once the page is loaded + custom_attrs: custom attribute + **props: Component properties. + + Returns: + A new component instance. + """ + ... + +class Flex(LayoutComponent): + @overload + @classmethod + def create( # type: ignore + cls, + *children, + as_child: Optional[Union[Var[bool], bool]] = None, + display: Optional[Union[Var[str], str]] = None, + direction: Optional[Union[Var[str], str]] = None, + align: Optional[Union[Var[str], str]] = None, + justify: Optional[Union[Var[str], str]] = None, + wrap: Optional[Union[Var[str], str]] = None, + gap: Optional[Union[Var[str], str]] = None, + p: Optional[Union[Var[str], str]] = None, + px: Optional[Union[Var[str], str]] = None, + py: Optional[Union[Var[str], str]] = None, + pt: Optional[Union[Var[str], str]] = None, + pr: Optional[Union[Var[str], str]] = None, + pb: Optional[Union[Var[str], str]] = None, + pl: Optional[Union[Var[str], str]] = None, + shrink: Optional[Union[Var[str], str]] = None, + grow: Optional[Union[Var[str], str]] = None, + m: Optional[Union[Var[str], str]] = None, + mx: Optional[Union[Var[str], str]] = None, + my: Optional[Union[Var[str], str]] = None, + mt: Optional[Union[Var[str], str]] = None, + mr: Optional[Union[Var[str], str]] = None, + mb: Optional[Union[Var[str], str]] = None, + ml: Optional[Union[Var[str], str]] = None, + style: Optional[Style] = None, + key: Optional[Any] = None, + id: Optional[Any] = None, + class_name: Optional[Any] = None, + autofocus: Optional[bool] = None, + custom_attrs: Optional[Dict[str, str]] = None, + on_blur: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_click: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_context_menu: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_double_click: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_focus: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mount: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_down: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_enter: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_leave: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_move: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_out: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_over: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_up: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_scroll: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_unmount: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + **props + ) -> "Flex": + """Create a new component instance. + + Will prepend "RadixThemes" to the component tag to avoid conflicts with + other UI libraries for common names, like Text and Button. + + Args: + *children: Child components. + as_child: Change the default rendered element for the one passed as a child, merging their props and behavior. + display: How to display the element: "none" | "inline-flex" | "flex" + direction: How child items are layed out: "row" | "column" | "row-reverse" | "column-reverse" + align: Alignment of children along the main axis: "start" | "center" | "end" | "baseline" | "stretch" + justify: Alignment of children along the cross axis: "start" | "center" | "end" | "between" + wrap: Whether children should wrap when they reach the end of their container: "nowrap" | "wrap" | "wrap-reverse" + gap: Gap between children: "0" - "9" + p: Padding: "0" - "9" + px: Padding horizontal: "0" - "9" + py: Padding vertical: "0" - "9" + pt: Padding top: "0" - "9" + pr: Padding right: "0" - "9" + pb: Padding bottom: "0" - "9" + pl: Padding left: "0" - "9" + shrink: Whether the element will take up the smallest possible space: "0" | "1" + grow: Whether the element will take up the largest possible space: "0" | "1" + m: Margin: "0" - "9" + mx: Margin horizontal: "0" - "9" + my: Margin vertical: "0" - "9" + mt: Margin top: "0" - "9" + mr: Margin right: "0" - "9" + mb: Margin bottom: "0" - "9" + ml: Margin left: "0" - "9" + style: The style of the component. + key: A unique key for the component. + id: The id for the component. + class_name: The class name for the component. + autofocus: Whether the component should take the focus once the page is loaded + custom_attrs: custom attribute + **props: Component properties. + + Returns: + A new component instance. + """ + ... + +class Grid(RadixThemesComponent): + @overload + @classmethod + def create( # type: ignore + cls, + *children, + as_child: Optional[Union[Var[bool], bool]] = None, + display: Optional[Union[Var[str], str]] = None, + columns: Optional[Union[Var[str], str]] = None, + rows: Optional[Union[Var[str], str]] = None, + flow: Optional[Union[Var[str], str]] = None, + align: Optional[Union[Var[str], str]] = None, + justify: Optional[Union[Var[str], str]] = None, + gap: Optional[Union[Var[str], str]] = None, + gap_x: Optional[Union[Var[str], str]] = None, + style: Optional[Style] = None, + key: Optional[Any] = None, + id: Optional[Any] = None, + class_name: Optional[Any] = None, + autofocus: Optional[bool] = None, + custom_attrs: Optional[Dict[str, str]] = None, + on_blur: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_click: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_context_menu: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_double_click: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_focus: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mount: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_down: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_enter: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_leave: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_move: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_out: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_over: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_up: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_scroll: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_unmount: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + **props + ) -> "Grid": + """Create a new component instance. + + Will prepend "RadixThemes" to the component tag to avoid conflicts with + other UI libraries for common names, like Text and Button. + + Args: + *children: Child components. + as_child: Change the default rendered element for the one passed as a child, merging their props and behavior. + display: How to display the element: "none" | "inline-grid" | "grid" + columns: Number of columns + rows: Number of rows + flow: How the grid items are layed out: "row" | "column" | "dense" | "row-dense" | "column-dense" + align: Alignment of children along the main axis: "start" | "center" | "end" | "baseline" | "stretch" + justify: Alignment of children along the cross axis: "start" | "center" | "end" | "between" + gap: Gap between children: "0" - "9" + gap_x: Gap between children vertical: "0" - "9" + style: The style of the component. + key: A unique key for the component. + id: The id for the component. + class_name: The class name for the component. + autofocus: Whether the component should take the focus once the page is loaded + custom_attrs: custom attribute + **props: Component properties. + + Returns: + A new component instance. + """ + ... + +class Container(LayoutComponent): + @overload + @classmethod + def create( # type: ignore + cls, + *children, + size: Optional[Union[Var[str], str]] = None, + p: Optional[Union[Var[str], str]] = None, + px: Optional[Union[Var[str], str]] = None, + py: Optional[Union[Var[str], str]] = None, + pt: Optional[Union[Var[str], str]] = None, + pr: Optional[Union[Var[str], str]] = None, + pb: Optional[Union[Var[str], str]] = None, + pl: Optional[Union[Var[str], str]] = None, + shrink: Optional[Union[Var[str], str]] = None, + grow: Optional[Union[Var[str], str]] = None, + m: Optional[Union[Var[str], str]] = None, + mx: Optional[Union[Var[str], str]] = None, + my: Optional[Union[Var[str], str]] = None, + mt: Optional[Union[Var[str], str]] = None, + mr: Optional[Union[Var[str], str]] = None, + mb: Optional[Union[Var[str], str]] = None, + ml: Optional[Union[Var[str], str]] = None, + style: Optional[Style] = None, + key: Optional[Any] = None, + id: Optional[Any] = None, + class_name: Optional[Any] = None, + autofocus: Optional[bool] = None, + custom_attrs: Optional[Dict[str, str]] = None, + on_blur: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_click: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_context_menu: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_double_click: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_focus: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mount: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_down: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_enter: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_leave: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_move: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_out: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_over: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_up: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_scroll: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_unmount: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + **props + ) -> "Container": + """Create a new component instance. + + Will prepend "RadixThemes" to the component tag to avoid conflicts with + other UI libraries for common names, like Text and Button. + + Args: + *children: Child components. + size: The size of the container: "1" - "4" (default "4") + p: Padding: "0" - "9" + px: Padding horizontal: "0" - "9" + py: Padding vertical: "0" - "9" + pt: Padding top: "0" - "9" + pr: Padding right: "0" - "9" + pb: Padding bottom: "0" - "9" + pl: Padding left: "0" - "9" + shrink: Whether the element will take up the smallest possible space: "0" | "1" + grow: Whether the element will take up the largest possible space: "0" | "1" + m: Margin: "0" - "9" + mx: Margin horizontal: "0" - "9" + my: Margin vertical: "0" - "9" + mt: Margin top: "0" - "9" + mr: Margin right: "0" - "9" + mb: Margin bottom: "0" - "9" + ml: Margin left: "0" - "9" + style: The style of the component. + key: A unique key for the component. + id: The id for the component. + class_name: The class name for the component. + autofocus: Whether the component should take the focus once the page is loaded + custom_attrs: custom attribute + **props: Component properties. + + Returns: + A new component instance. + """ + ... + +class Section(LayoutComponent): + @overload + @classmethod + def create( # type: ignore + cls, + *children, + size: Optional[Union[Var[str], str]] = None, + p: Optional[Union[Var[str], str]] = None, + px: Optional[Union[Var[str], str]] = None, + py: Optional[Union[Var[str], str]] = None, + pt: Optional[Union[Var[str], str]] = None, + pr: Optional[Union[Var[str], str]] = None, + pb: Optional[Union[Var[str], str]] = None, + pl: Optional[Union[Var[str], str]] = None, + shrink: Optional[Union[Var[str], str]] = None, + grow: Optional[Union[Var[str], str]] = None, + m: Optional[Union[Var[str], str]] = None, + mx: Optional[Union[Var[str], str]] = None, + my: Optional[Union[Var[str], str]] = None, + mt: Optional[Union[Var[str], str]] = None, + mr: Optional[Union[Var[str], str]] = None, + mb: Optional[Union[Var[str], str]] = None, + ml: Optional[Union[Var[str], str]] = None, + style: Optional[Style] = None, + key: Optional[Any] = None, + id: Optional[Any] = None, + class_name: Optional[Any] = None, + autofocus: Optional[bool] = None, + custom_attrs: Optional[Dict[str, str]] = None, + on_blur: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_click: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_context_menu: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_double_click: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_focus: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mount: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_down: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_enter: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_leave: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_move: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_out: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_over: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_up: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_scroll: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_unmount: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + **props + ) -> "Section": + """Create a new component instance. + + Will prepend "RadixThemes" to the component tag to avoid conflicts with + other UI libraries for common names, like Text and Button. + + Args: + *children: Child components. + size: The size of the section: "1" - "3" (default "3") + p: Padding: "0" - "9" + px: Padding horizontal: "0" - "9" + py: Padding vertical: "0" - "9" + pt: Padding top: "0" - "9" + pr: Padding right: "0" - "9" + pb: Padding bottom: "0" - "9" + pl: Padding left: "0" - "9" + shrink: Whether the element will take up the smallest possible space: "0" | "1" + grow: Whether the element will take up the largest possible space: "0" | "1" + m: Margin: "0" - "9" + mx: Margin horizontal: "0" - "9" + my: Margin vertical: "0" - "9" + mt: Margin top: "0" - "9" + mr: Margin right: "0" - "9" + mb: Margin bottom: "0" - "9" + ml: Margin left: "0" - "9" + style: The style of the component. + key: A unique key for the component. + id: The id for the component. + class_name: The class name for the component. + autofocus: Whether the component should take the focus once the page is loaded + custom_attrs: custom attribute + **props: Component properties. + + Returns: + A new component instance. + """ + ... diff --git a/reflex/components/radix/themes/typography.py b/reflex/components/radix/themes/typography.py new file mode 100644 index 000000000..d0ffe503b --- /dev/null +++ b/reflex/components/radix/themes/typography.py @@ -0,0 +1,126 @@ +"""Components for rendering text. + +https://www.radix-ui.com/themes/docs/theme/typography +""" +from __future__ import annotations + +from reflex.vars import Var + +from .base import CommonMarginProps, RadixThemesComponent + + +class Text(CommonMarginProps, RadixThemesComponent): + """A foundational text primitive based on the element.""" + + tag = "Text" + + # Change the default rendered element for the one passed as a child, merging their props and behavior. + as_child: Var[bool] + + # Change the default rendered element into a semantically appropriate alternative (cannot be used with asChild) + as_: Var[str] + + # Text size: "1" - "9" + size: Var[str] + + # Thickness of text: "light" | "regular" | "medium" | "bold" + weight: Var[str] + + # Alignment of text in element: "left" | "center" | "right" + align: Var[str] + + # Removes the leading trim space: "normal" | "start" | "end" | "both" + trim: Var[str] + + # Overrides the accent color inherited from the Theme. + color: Var[str] + + # Whether to render the text with higher contrast color + high_contrast: Var[bool] + + +class Heading(Text): + """A semantic heading element.""" + + tag = "Heading" + + +class Blockquote(CommonMarginProps, RadixThemesComponent): + """A block level extended quotation.""" + + tag = "Blockquote" + + # Text size: "1" - "9" + size: Var[str] + + # Thickness of text: "light" | "regular" | "medium" | "bold" + weight: Var[str] + + # Overrides the accent color inherited from the Theme. + color: Var[str] + + # Whether to render the text with higher contrast color + high_contrast: Var[bool] + + +class Code(Blockquote): + """Marks text to signify a short fragment of computer code.""" + + tag = "Code" + + # The visual variant to apply: "solid" | "soft" | "outline" | "ghost" + variant: Var[str] + + +class Em(CommonMarginProps, RadixThemesComponent): + """Marks text to stress emphasis.""" + + tag = "Em" + + +class Kbd(CommonMarginProps, RadixThemesComponent): + """Represents keyboard input or a hotkey.""" + + tag = "Kbd" + + # Text size: "1" - "9" + size: Var[str] + + +class Link(CommonMarginProps, RadixThemesComponent): + """A semantic element for navigation between pages.""" + + tag = "Link" + + # Change the default rendered element for the one passed as a child, merging their props and behavior. + as_child: Var[bool] + + # Text size: "1" - "9" + size: Var[str] + + # Thickness of text: "light" | "regular" | "medium" | "bold" + weight: Var[str] + + # Removes the leading trim space: "normal" | "start" | "end" | "both" + trim: Var[str] + + # Sets the visibility of the underline affordance: "auto" | "hover" | "always" + underline: Var[str] + + # Overrides the accent color inherited from the Theme. + color: Var[str] + + # Whether to render the text with higher contrast color + high_contrast: Var[bool] + + +class Quote(CommonMarginProps, RadixThemesComponent): + """A short inline quotation.""" + + tag = "Quote" + + +class Strong(CommonMarginProps, RadixThemesComponent): + """Marks text to signify strong importance.""" + + tag = "Strong" diff --git a/reflex/components/radix/themes/typography.pyi b/reflex/components/radix/themes/typography.pyi new file mode 100644 index 000000000..9c06dc2b4 --- /dev/null +++ b/reflex/components/radix/themes/typography.pyi @@ -0,0 +1,915 @@ +"""Stub file for typography.py""" +# ------------------- DO NOT EDIT ---------------------- +# This file was generated by `scripts/pyi_generator.py`! +# ------------------------------------------------------ + +from typing import Any, Dict, List, Optional, Union, overload +from reflex.components.radix.themes.base import CommonMarginProps +from reflex.components.component import Component +from reflex.components.radix.themes.base import RadixThemesComponent +from reflex.vars import Var, BaseVar, ComputedVar +from reflex.event import EventHandler, EventChain, EventSpec +from reflex.style import Style + +class Text(CommonMarginProps, RadixThemesComponent): + @overload + @classmethod + def create( # type: ignore + cls, + *children, + as_child: Optional[Union[Var[bool], bool]] = None, + as_: Optional[Union[Var[str], str]] = None, + size: Optional[Union[Var[str], str]] = None, + weight: Optional[Union[Var[str], str]] = None, + align: Optional[Union[Var[str], str]] = None, + trim: Optional[Union[Var[str], str]] = None, + color: Optional[Union[Var[str], str]] = None, + high_contrast: Optional[Union[Var[bool], bool]] = None, + m: Optional[Union[Var[str], str]] = None, + mx: Optional[Union[Var[str], str]] = None, + my: Optional[Union[Var[str], str]] = None, + mt: Optional[Union[Var[str], str]] = None, + mr: Optional[Union[Var[str], str]] = None, + mb: Optional[Union[Var[str], str]] = None, + ml: Optional[Union[Var[str], str]] = None, + style: Optional[Style] = None, + key: Optional[Any] = None, + id: Optional[Any] = None, + class_name: Optional[Any] = None, + autofocus: Optional[bool] = None, + custom_attrs: Optional[Dict[str, str]] = None, + on_blur: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_click: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_context_menu: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_double_click: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_focus: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mount: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_down: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_enter: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_leave: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_move: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_out: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_over: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_up: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_scroll: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_unmount: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + **props + ) -> "Text": + """Create a new component instance. + + Will prepend "RadixThemes" to the component tag to avoid conflicts with + other UI libraries for common names, like Text and Button. + + Args: + *children: Child components. + as_child: Change the default rendered element for the one passed as a child, merging their props and behavior. + as_: Change the default rendered element into a semantically appropriate alternative (cannot be used with asChild) + size: Text size: "1" - "9" + weight: Thickness of text: "light" | "regular" | "medium" | "bold" + align: Alignment of text in element: "left" | "center" | "right" + trim: Removes the leading trim space: "normal" | "start" | "end" | "both" + color: Overrides the accent color inherited from the Theme. + high_contrast: Whether to render the text with higher contrast color + m: Margin: "0" - "9" + mx: Margin horizontal: "0" - "9" + my: Margin vertical: "0" - "9" + mt: Margin top: "0" - "9" + mr: Margin right: "0" - "9" + mb: Margin bottom: "0" - "9" + ml: Margin left: "0" - "9" + style: The style of the component. + key: A unique key for the component. + id: The id for the component. + class_name: The class name for the component. + autofocus: Whether the component should take the focus once the page is loaded + custom_attrs: custom attribute + **props: Component properties. + + Returns: + A new component instance. + """ + ... + +class Heading(Text): + @overload + @classmethod + def create( # type: ignore + cls, + *children, + as_child: Optional[Union[Var[bool], bool]] = None, + as_: Optional[Union[Var[str], str]] = None, + size: Optional[Union[Var[str], str]] = None, + weight: Optional[Union[Var[str], str]] = None, + align: Optional[Union[Var[str], str]] = None, + trim: Optional[Union[Var[str], str]] = None, + color: Optional[Union[Var[str], str]] = None, + high_contrast: Optional[Union[Var[bool], bool]] = None, + m: Optional[Union[Var[str], str]] = None, + mx: Optional[Union[Var[str], str]] = None, + my: Optional[Union[Var[str], str]] = None, + mt: Optional[Union[Var[str], str]] = None, + mr: Optional[Union[Var[str], str]] = None, + mb: Optional[Union[Var[str], str]] = None, + ml: Optional[Union[Var[str], str]] = None, + style: Optional[Style] = None, + key: Optional[Any] = None, + id: Optional[Any] = None, + class_name: Optional[Any] = None, + autofocus: Optional[bool] = None, + custom_attrs: Optional[Dict[str, str]] = None, + on_blur: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_click: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_context_menu: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_double_click: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_focus: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mount: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_down: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_enter: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_leave: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_move: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_out: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_over: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_up: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_scroll: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_unmount: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + **props + ) -> "Heading": + """Create a new component instance. + + Will prepend "RadixThemes" to the component tag to avoid conflicts with + other UI libraries for common names, like Text and Button. + + Args: + *children: Child components. + as_child: Change the default rendered element for the one passed as a child, merging their props and behavior. + as_: Change the default rendered element into a semantically appropriate alternative (cannot be used with asChild) + size: Text size: "1" - "9" + weight: Thickness of text: "light" | "regular" | "medium" | "bold" + align: Alignment of text in element: "left" | "center" | "right" + trim: Removes the leading trim space: "normal" | "start" | "end" | "both" + color: Overrides the accent color inherited from the Theme. + high_contrast: Whether to render the text with higher contrast color + m: Margin: "0" - "9" + mx: Margin horizontal: "0" - "9" + my: Margin vertical: "0" - "9" + mt: Margin top: "0" - "9" + mr: Margin right: "0" - "9" + mb: Margin bottom: "0" - "9" + ml: Margin left: "0" - "9" + style: The style of the component. + key: A unique key for the component. + id: The id for the component. + class_name: The class name for the component. + autofocus: Whether the component should take the focus once the page is loaded + custom_attrs: custom attribute + **props: Component properties. + + Returns: + A new component instance. + """ + ... + +class Blockquote(CommonMarginProps, RadixThemesComponent): + @overload + @classmethod + def create( # type: ignore + cls, + *children, + size: Optional[Union[Var[str], str]] = None, + weight: Optional[Union[Var[str], str]] = None, + color: Optional[Union[Var[str], str]] = None, + high_contrast: Optional[Union[Var[bool], bool]] = None, + m: Optional[Union[Var[str], str]] = None, + mx: Optional[Union[Var[str], str]] = None, + my: Optional[Union[Var[str], str]] = None, + mt: Optional[Union[Var[str], str]] = None, + mr: Optional[Union[Var[str], str]] = None, + mb: Optional[Union[Var[str], str]] = None, + ml: Optional[Union[Var[str], str]] = None, + style: Optional[Style] = None, + key: Optional[Any] = None, + id: Optional[Any] = None, + class_name: Optional[Any] = None, + autofocus: Optional[bool] = None, + custom_attrs: Optional[Dict[str, str]] = None, + on_blur: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_click: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_context_menu: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_double_click: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_focus: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mount: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_down: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_enter: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_leave: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_move: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_out: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_over: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_up: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_scroll: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_unmount: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + **props + ) -> "Blockquote": + """Create a new component instance. + + Will prepend "RadixThemes" to the component tag to avoid conflicts with + other UI libraries for common names, like Text and Button. + + Args: + *children: Child components. + size: Text size: "1" - "9" + weight: Thickness of text: "light" | "regular" | "medium" | "bold" + color: Overrides the accent color inherited from the Theme. + high_contrast: Whether to render the text with higher contrast color + m: Margin: "0" - "9" + mx: Margin horizontal: "0" - "9" + my: Margin vertical: "0" - "9" + mt: Margin top: "0" - "9" + mr: Margin right: "0" - "9" + mb: Margin bottom: "0" - "9" + ml: Margin left: "0" - "9" + style: The style of the component. + key: A unique key for the component. + id: The id for the component. + class_name: The class name for the component. + autofocus: Whether the component should take the focus once the page is loaded + custom_attrs: custom attribute + **props: Component properties. + + Returns: + A new component instance. + """ + ... + +class Code(Blockquote): + @overload + @classmethod + def create( # type: ignore + cls, + *children, + variant: Optional[Union[Var[str], str]] = None, + size: Optional[Union[Var[str], str]] = None, + weight: Optional[Union[Var[str], str]] = None, + color: Optional[Union[Var[str], str]] = None, + high_contrast: Optional[Union[Var[bool], bool]] = None, + m: Optional[Union[Var[str], str]] = None, + mx: Optional[Union[Var[str], str]] = None, + my: Optional[Union[Var[str], str]] = None, + mt: Optional[Union[Var[str], str]] = None, + mr: Optional[Union[Var[str], str]] = None, + mb: Optional[Union[Var[str], str]] = None, + ml: Optional[Union[Var[str], str]] = None, + style: Optional[Style] = None, + key: Optional[Any] = None, + id: Optional[Any] = None, + class_name: Optional[Any] = None, + autofocus: Optional[bool] = None, + custom_attrs: Optional[Dict[str, str]] = None, + on_blur: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_click: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_context_menu: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_double_click: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_focus: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mount: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_down: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_enter: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_leave: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_move: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_out: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_over: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_up: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_scroll: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_unmount: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + **props + ) -> "Code": + """Create a new component instance. + + Will prepend "RadixThemes" to the component tag to avoid conflicts with + other UI libraries for common names, like Text and Button. + + Args: + *children: Child components. + variant: The visual variant to apply: "solid" | "soft" | "outline" | "ghost" + size: Text size: "1" - "9" + weight: Thickness of text: "light" | "regular" | "medium" | "bold" + color: Overrides the accent color inherited from the Theme. + high_contrast: Whether to render the text with higher contrast color + m: Margin: "0" - "9" + mx: Margin horizontal: "0" - "9" + my: Margin vertical: "0" - "9" + mt: Margin top: "0" - "9" + mr: Margin right: "0" - "9" + mb: Margin bottom: "0" - "9" + ml: Margin left: "0" - "9" + style: The style of the component. + key: A unique key for the component. + id: The id for the component. + class_name: The class name for the component. + autofocus: Whether the component should take the focus once the page is loaded + custom_attrs: custom attribute + **props: Component properties. + + Returns: + A new component instance. + """ + ... + +class Em(CommonMarginProps, RadixThemesComponent): + @overload + @classmethod + def create( # type: ignore + cls, + *children, + m: Optional[Union[Var[str], str]] = None, + mx: Optional[Union[Var[str], str]] = None, + my: Optional[Union[Var[str], str]] = None, + mt: Optional[Union[Var[str], str]] = None, + mr: Optional[Union[Var[str], str]] = None, + mb: Optional[Union[Var[str], str]] = None, + ml: Optional[Union[Var[str], str]] = None, + style: Optional[Style] = None, + key: Optional[Any] = None, + id: Optional[Any] = None, + class_name: Optional[Any] = None, + autofocus: Optional[bool] = None, + custom_attrs: Optional[Dict[str, str]] = None, + on_blur: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_click: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_context_menu: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_double_click: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_focus: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mount: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_down: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_enter: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_leave: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_move: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_out: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_over: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_up: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_scroll: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_unmount: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + **props + ) -> "Em": + """Create a new component instance. + + Will prepend "RadixThemes" to the component tag to avoid conflicts with + other UI libraries for common names, like Text and Button. + + Args: + *children: Child components. + m: Margin: "0" - "9" + mx: Margin horizontal: "0" - "9" + my: Margin vertical: "0" - "9" + mt: Margin top: "0" - "9" + mr: Margin right: "0" - "9" + mb: Margin bottom: "0" - "9" + ml: Margin left: "0" - "9" + style: The style of the component. + key: A unique key for the component. + id: The id for the component. + class_name: The class name for the component. + autofocus: Whether the component should take the focus once the page is loaded + custom_attrs: custom attribute + **props: Component properties. + + Returns: + A new component instance. + """ + ... + +class Kbd(CommonMarginProps, RadixThemesComponent): + @overload + @classmethod + def create( # type: ignore + cls, + *children, + size: Optional[Union[Var[str], str]] = None, + m: Optional[Union[Var[str], str]] = None, + mx: Optional[Union[Var[str], str]] = None, + my: Optional[Union[Var[str], str]] = None, + mt: Optional[Union[Var[str], str]] = None, + mr: Optional[Union[Var[str], str]] = None, + mb: Optional[Union[Var[str], str]] = None, + ml: Optional[Union[Var[str], str]] = None, + style: Optional[Style] = None, + key: Optional[Any] = None, + id: Optional[Any] = None, + class_name: Optional[Any] = None, + autofocus: Optional[bool] = None, + custom_attrs: Optional[Dict[str, str]] = None, + on_blur: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_click: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_context_menu: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_double_click: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_focus: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mount: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_down: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_enter: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_leave: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_move: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_out: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_over: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_up: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_scroll: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_unmount: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + **props + ) -> "Kbd": + """Create a new component instance. + + Will prepend "RadixThemes" to the component tag to avoid conflicts with + other UI libraries for common names, like Text and Button. + + Args: + *children: Child components. + size: Text size: "1" - "9" + m: Margin: "0" - "9" + mx: Margin horizontal: "0" - "9" + my: Margin vertical: "0" - "9" + mt: Margin top: "0" - "9" + mr: Margin right: "0" - "9" + mb: Margin bottom: "0" - "9" + ml: Margin left: "0" - "9" + style: The style of the component. + key: A unique key for the component. + id: The id for the component. + class_name: The class name for the component. + autofocus: Whether the component should take the focus once the page is loaded + custom_attrs: custom attribute + **props: Component properties. + + Returns: + A new component instance. + """ + ... + +class Link(CommonMarginProps, RadixThemesComponent): + @overload + @classmethod + def create( # type: ignore + cls, + *children, + as_child: Optional[Union[Var[bool], bool]] = None, + size: Optional[Union[Var[str], str]] = None, + weight: Optional[Union[Var[str], str]] = None, + trim: Optional[Union[Var[str], str]] = None, + underline: Optional[Union[Var[str], str]] = None, + color: Optional[Union[Var[str], str]] = None, + high_contrast: Optional[Union[Var[bool], bool]] = None, + m: Optional[Union[Var[str], str]] = None, + mx: Optional[Union[Var[str], str]] = None, + my: Optional[Union[Var[str], str]] = None, + mt: Optional[Union[Var[str], str]] = None, + mr: Optional[Union[Var[str], str]] = None, + mb: Optional[Union[Var[str], str]] = None, + ml: Optional[Union[Var[str], str]] = None, + style: Optional[Style] = None, + key: Optional[Any] = None, + id: Optional[Any] = None, + class_name: Optional[Any] = None, + autofocus: Optional[bool] = None, + custom_attrs: Optional[Dict[str, str]] = None, + on_blur: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_click: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_context_menu: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_double_click: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_focus: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mount: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_down: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_enter: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_leave: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_move: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_out: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_over: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_up: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_scroll: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_unmount: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + **props + ) -> "Link": + """Create a new component instance. + + Will prepend "RadixThemes" to the component tag to avoid conflicts with + other UI libraries for common names, like Text and Button. + + Args: + *children: Child components. + as_child: Change the default rendered element for the one passed as a child, merging their props and behavior. + size: Text size: "1" - "9" + weight: Thickness of text: "light" | "regular" | "medium" | "bold" + trim: Removes the leading trim space: "normal" | "start" | "end" | "both" + underline: Sets the visibility of the underline affordance: "auto" | "hover" | "always" + color: Overrides the accent color inherited from the Theme. + high_contrast: Whether to render the text with higher contrast color + m: Margin: "0" - "9" + mx: Margin horizontal: "0" - "9" + my: Margin vertical: "0" - "9" + mt: Margin top: "0" - "9" + mr: Margin right: "0" - "9" + mb: Margin bottom: "0" - "9" + ml: Margin left: "0" - "9" + style: The style of the component. + key: A unique key for the component. + id: The id for the component. + class_name: The class name for the component. + autofocus: Whether the component should take the focus once the page is loaded + custom_attrs: custom attribute + **props: Component properties. + + Returns: + A new component instance. + """ + ... + +class Quote(CommonMarginProps, RadixThemesComponent): + @overload + @classmethod + def create( # type: ignore + cls, + *children, + m: Optional[Union[Var[str], str]] = None, + mx: Optional[Union[Var[str], str]] = None, + my: Optional[Union[Var[str], str]] = None, + mt: Optional[Union[Var[str], str]] = None, + mr: Optional[Union[Var[str], str]] = None, + mb: Optional[Union[Var[str], str]] = None, + ml: Optional[Union[Var[str], str]] = None, + style: Optional[Style] = None, + key: Optional[Any] = None, + id: Optional[Any] = None, + class_name: Optional[Any] = None, + autofocus: Optional[bool] = None, + custom_attrs: Optional[Dict[str, str]] = None, + on_blur: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_click: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_context_menu: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_double_click: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_focus: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mount: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_down: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_enter: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_leave: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_move: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_out: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_over: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_up: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_scroll: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_unmount: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + **props + ) -> "Quote": + """Create a new component instance. + + Will prepend "RadixThemes" to the component tag to avoid conflicts with + other UI libraries for common names, like Text and Button. + + Args: + *children: Child components. + m: Margin: "0" - "9" + mx: Margin horizontal: "0" - "9" + my: Margin vertical: "0" - "9" + mt: Margin top: "0" - "9" + mr: Margin right: "0" - "9" + mb: Margin bottom: "0" - "9" + ml: Margin left: "0" - "9" + style: The style of the component. + key: A unique key for the component. + id: The id for the component. + class_name: The class name for the component. + autofocus: Whether the component should take the focus once the page is loaded + custom_attrs: custom attribute + **props: Component properties. + + Returns: + A new component instance. + """ + ... + +class Strong(CommonMarginProps, RadixThemesComponent): + @overload + @classmethod + def create( # type: ignore + cls, + *children, + m: Optional[Union[Var[str], str]] = None, + mx: Optional[Union[Var[str], str]] = None, + my: Optional[Union[Var[str], str]] = None, + mt: Optional[Union[Var[str], str]] = None, + mr: Optional[Union[Var[str], str]] = None, + mb: Optional[Union[Var[str], str]] = None, + ml: Optional[Union[Var[str], str]] = None, + style: Optional[Style] = None, + key: Optional[Any] = None, + id: Optional[Any] = None, + class_name: Optional[Any] = None, + autofocus: Optional[bool] = None, + custom_attrs: Optional[Dict[str, str]] = None, + on_blur: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_click: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_context_menu: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_double_click: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_focus: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mount: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_down: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_enter: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_leave: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_move: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_out: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_over: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_mouse_up: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_scroll: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + on_unmount: Optional[ + Union[EventHandler, EventSpec, List, function, BaseVar] + ] = None, + **props + ) -> "Strong": + """Create a new component instance. + + Will prepend "RadixThemes" to the component tag to avoid conflicts with + other UI libraries for common names, like Text and Button. + + Args: + *children: Child components. + m: Margin: "0" - "9" + mx: Margin horizontal: "0" - "9" + my: Margin vertical: "0" - "9" + mt: Margin top: "0" - "9" + mr: Margin right: "0" - "9" + mb: Margin bottom: "0" - "9" + ml: Margin left: "0" - "9" + style: The style of the component. + key: A unique key for the component. + id: The id for the component. + class_name: The class name for the component. + autofocus: Whether the component should take the focus once the page is loaded + custom_attrs: custom attribute + **props: Component properties. + + Returns: + A new component instance. + """ + ... diff --git a/reflex/constants/event.py b/reflex/constants/event.py index c880c93ff..b62bc0d9e 100644 --- a/reflex/constants/event.py +++ b/reflex/constants/event.py @@ -65,6 +65,7 @@ class EventTriggers(SimpleNamespace): ON_CHANGE = "on_change" ON_CHANGE_END = "on_change_end" ON_CHANGE_START = "on_change_start" + ON_CHECKED_CHANGE = "on_checked_change" ON_COMPLETE = "on_complete" ON_CONTEXT_MENU = "on_context_menu" ON_DOUBLE_CLICK = "on_double_click" diff --git a/reflex/constants/installer.py b/reflex/constants/installer.py index 1a9f3e5e9..87e453327 100644 --- a/reflex/constants/installer.py +++ b/reflex/constants/installer.py @@ -102,10 +102,6 @@ class PackageJson(SimpleNamespace): PATH = os.path.join(Dirs.WEB, "package.json") DEPENDENCIES = { - "@chakra-ui/react": "2.6.0", - "@chakra-ui/system": "2.5.6", - "@emotion/react": "11.10.6", - "@emotion/styled": "11.10.6", "axios": "1.4.0", "chakra-react-select": "4.6.0", "focus-visible": "5.2.0", @@ -113,6 +109,7 @@ class PackageJson(SimpleNamespace): "json5": "2.2.3", "next": "13.5.4", "next-sitemap": "4.1.8", + "next-themes": "0.2.0", "react": "18.2.0", "react-dom": "18.2.0", "socket.io-client": "4.6.1", diff --git a/reflex/reflex.py b/reflex/reflex.py index 3dc792d63..304785fa6 100644 --- a/reflex/reflex.py +++ b/reflex/reflex.py @@ -119,6 +119,9 @@ def run( # Set the log level. console.set_log_level(loglevel) + # Set env mode in the environment + os.environ["REFLEX_ENV_MODE"] = env.value + # Show system info exec.output_system_info() diff --git a/scripts/pyi_generator.py b/scripts/pyi_generator.py index e6e6aa335..51ff9a330 100644 --- a/scripts/pyi_generator.py +++ b/scripts/pyi_generator.py @@ -7,7 +7,7 @@ import re import sys from inspect import getfullargspec from pathlib import Path -from typing import Any, Dict, List, Literal, Optional, Union, get_args # NOQA +from typing import Any, Dict, List, Literal, Optional, Set, Union, get_args # NOQA import black @@ -50,6 +50,8 @@ from reflex.components.libs.chakra import ( ) # NOQA +from reflex.event import EventChain +from reflex.style import Style from reflex.utils import format from reflex.utils import types as rx_types from reflex.vars import Var @@ -59,6 +61,8 @@ ruff_dont_remove = [ Optional, Dict, List, + EventChain, + Style, LiteralInputVariant, LiteralColorScheme, LiteralChakraDirection, @@ -100,7 +104,21 @@ EXCLUDED_FILES = [ "multiselect.py", ] -DEFAULT_TYPING_IMPORTS = {"overload", "Optional", "Union"} +# These props exist on the base component, but should not be exposed in create methods. +EXCLUDED_PROPS = [ + "alias", + "children", + "event_triggers", + "invalid_children", + "library", + "lib_dependencies", + "tag", + "is_default", + "special_props", + "valid_children", +] + +DEFAULT_TYPING_IMPORTS = {"overload", "Any", "Dict", "List", "Optional", "Union"} def _get_type_hint(value, top_level=True, no_union=False): @@ -186,6 +204,7 @@ class PyiGenerator: *[f"from {base.__module__} import {base.__name__}" for base in bases], "from reflex.vars import Var, BaseVar, ComputedVar", "from reflex.event import EventHandler, EventChain, EventSpec", + "from reflex.style import Style", ] def _generate_pyi_class(self, _class: type[Component]): @@ -194,7 +213,7 @@ class PyiGenerator: "", f"class {_class.__name__}({', '.join([base.__name__ for base in _class.__bases__])}):", ] - definition = f" @overload\n @classmethod\n def create(cls, *children, " + definition = f" @overload\n @classmethod\n def create( # type: ignore\n cls, *children, " for kwarg in create_spec.kwonlyargs: if kwarg in create_spec.annotations: @@ -202,51 +221,64 @@ class PyiGenerator: else: definition += f"{kwarg}, " - for name, value in _class.__annotations__.items(): - if name in create_spec.kwonlyargs: - continue - definition += f"{name}: {_get_type_hint(value)} = None, " + all_classes = [c for c in _class.__mro__ if issubclass(c, Component)] + all_props = [] + for target_class in all_classes: + for name, value in target_class.__annotations__.items(): + if ( + name in create_spec.kwonlyargs + or name in EXCLUDED_PROPS + or name in all_props + ): + continue + all_props.append(name) + definition += f"{name}: {_get_type_hint(value)} = None, " for trigger in sorted(_class().get_event_triggers().keys()): definition += f"{trigger}: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, " definition = definition.rstrip(", ") - definition += f", **props) -> '{_class.__name__}': # type: ignore\n" + definition += f", **props) -> '{_class.__name__}':\n" - definition += self._generate_docstrings(_class, _class.__annotations__.keys()) + definition += self._generate_docstrings(all_classes, all_props) lines.append(definition) lines.append(" ...") return lines - def _generate_docstrings(self, _class, _props): + def _generate_docstrings(self, _classes, _props): props_comments = {} comments = [] - for _i, line in enumerate(inspect.getsource(_class).splitlines()): - reached_functions = re.search("def ", line) - if reached_functions: - # We've reached the functions, so stop. - break + for _class in _classes: + for _i, line in enumerate(inspect.getsource(_class).splitlines()): + reached_functions = re.search("def ", line) + if reached_functions: + # We've reached the functions, so stop. + break - # Get comments for prop - if line.strip().startswith("#"): - comments.append(line) - continue + # Get comments for prop + if line.strip().startswith("#"): + comments.append(line) + continue - # Check if this line has a prop. - match = re.search("\\w+:", line) - if match is None: - # This line doesn't have a var, so continue. - continue + # Check if this line has a prop. + match = re.search("\\w+:", line) + if match is None: + # This line doesn't have a var, so continue. + continue - # Get the prop. - prop = match.group(0).strip(":") - if prop in _props: - # This isn't a prop, so continue. - props_comments[prop] = "\n".join( - [comment.strip().strip("#") for comment in comments] - ) - comments.clear() - continue + # Get the prop. + prop = match.group(0).strip(":") + if prop in _props: + if not comments: # do not include undocumented props + continue + props_comments[prop] = "\n".join( + [comment.strip().strip("#") for comment in comments] + ) + comments.clear() + continue + if prop in EXCLUDED_PROPS: + comments.clear() # throw away comments for excluded props + _class = _classes[0] new_docstring = [] for i, line in enumerate(_class.create.__doc__.splitlines()): if i == 0: diff --git a/tests/test_app.py b/tests/test_app.py index 41e185e5e..5158b93e5 100644 --- a/tests/test_app.py +++ b/tests/test_app.py @@ -3,8 +3,10 @@ from __future__ import annotations import io import os.path import sys +import unittest.mock import uuid -from typing import List, Tuple, Type +from pathlib import Path +from typing import Generator, List, Tuple, Type if sys.version_info.major >= 3 and sys.version_info.minor > 7: from unittest.mock import AsyncMock # type: ignore @@ -18,6 +20,7 @@ from starlette_admin.auth import AuthProvider from starlette_admin.contrib.sqla.admin import Admin from starlette_admin.contrib.sqla.view import ModelView +import reflex.components.radix.themes as rdxt from reflex import AdminDash, constants from reflex.app import ( App, @@ -36,6 +39,7 @@ from reflex.style import Style from reflex.utils import format from reflex.vars import ComputedVar +from .conftest import chdir from .states import ( ChildFileUploadState, FileUploadState, @@ -1122,3 +1126,105 @@ def test_overlay_component( assert exp_page_child in children_types else: assert len(page.children) == 2 + + +@pytest.fixture +def compilable_app(tmp_path) -> Generator[tuple[App, Path], None, None]: + """Fixture for an app that can be compiled. + + Args: + tmp_path: Temporary path. + + Yields: + Tuple containing (app instance, Path to ".web" directory) + + The working directory is set to the app dir (parent of .web), + allowing app.compile() to be called. + """ + app_path = tmp_path / "app" + web_dir = app_path / ".web" + web_dir.mkdir(parents=True) + (web_dir / "package.json").touch() + app = App() + app.get_frontend_packages = unittest.mock.Mock() + with chdir(app_path): + yield app, web_dir + + +def test_app_wrap_compile_theme(compilable_app): + """Test that the radix theme component wraps the app. + + Args: + compilable_app: compilable_app fixture. + """ + app, web_dir = compilable_app + app.theme = rdxt.theme(accent_color="plum") + app.compile() + app_js_contents = (web_dir / "pages" / "_app.js").read_text() + app_js_lines = [ + line.strip() for line in app_js_contents.splitlines() if line.strip() + ] + assert ( + "function AppWrap({children}) {" + "return (" + "" + "{children}" + "" + ")" + "}" + ) in "".join(app_js_lines) + + +def test_app_wrap_priority(compilable_app): + """Test that the app wrap components are wrapped in the correct order. + + Args: + compilable_app: compilable_app fixture. + """ + app, web_dir = compilable_app + + class Fragment1(Component): + tag = "Fragment1" + + def _get_app_wrap_components(self) -> dict[tuple[int, str], Component]: + return {(99, "Box"): Box.create()} + + class Fragment2(Component): + tag = "Fragment2" + + def _get_app_wrap_components(self) -> dict[tuple[int, str], Component]: + return {(50, "Text"): Text.create()} + + class Fragment3(Component): + tag = "Fragment3" + + def _get_app_wrap_components(self) -> dict[tuple[int, str], Component]: + return {(10, "Fragment2"): Fragment2.create()} + + def page(): + return Fragment1.create(Fragment3.create()) + + app.add_page(page) + app.compile() + app_js_contents = (web_dir / "pages" / "_app.js").read_text() + app_js_lines = [ + line.strip() for line in app_js_contents.splitlines() if line.strip() + ] + assert ( + "function AppWrap({children}) {" + "return (" + "" + "" + "" + "" + "" + "" + "{children}" + "" + "" + "" + "" + "" + ")" + "}" + ) in "".join(app_js_lines)