reflex-site-shared 0.0.1__py3-none-any.whl

reflex_site_shared/__init__.py

@@ -0,0 +1 @@
+"""Reflex Site Shared module."""

reflex_site_shared/backend/__init__.py

@@ -0,0 +1 @@
+"""Backend module."""

reflex_site_shared/backend/get_blogs.py

@@ -0,0 +1,44 @@
+"""Get Blogs module."""
+
+from typing import TypedDict
+
+import httpx
+
+import reflex as rx
+from reflex_site_shared.constants import RECENT_BLOGS_API_URL
+
+
+class BlogPostDict(TypedDict):
+    """BlogPostDict."""
+
+    title: str
+    description: str
+    author: str
+    date: str
+    image: str
+    tag: str
+    url: str
+
+
+class RecentBlogsState(rx.State):
+    """RecentBlogsState."""
+
+    posts: rx.Field[list[BlogPostDict]] = rx.field(default_factory=list)
+    _fetched: bool = False
+
+    @rx.event(background=True, temporal=True)
+    async def fetch_recent_blogs(self):
+        """Fetch recent blogs."""
+        if self._fetched:
+            return
+        try:
+            async with httpx.AsyncClient() as client:
+                resp = await client.get(RECENT_BLOGS_API_URL, timeout=10)
+                resp.raise_for_status()
+                data = resp.json()
+            async with self:
+                self.posts = data.get("posts", [])
+                self._fetched = True
+        except Exception:
+            async with self:
+                self.posts = []

reflex_site_shared/backend/signup.py

@@ -0,0 +1,112 @@
+"""Signup module."""
+
+import contextlib
+import os
+from typing import Any
+
+import httpx
+from email_validator import EmailNotValidError, ValidatedEmail, validate_email
+
+import reflex as rx
+from reflex_site_shared.constants import (
+    API_BASE_URL_LOOPS,
+    REFLEX_DEV_WEB_NEWSLETTER_FORM_WEBHOOK_URL,
+)
+
+
+class IndexState(rx.State):
+    """Hold the state for the home page."""
+
+    # Whether the user signed up for the newsletter.
+    signed_up: bool = False
+
+    # Whether to show the confetti.
+    show_confetti: bool = False
+
+    @rx.event(background=True)
+    async def send_contact_to_webhook(
+        self,
+        email: str | None,
+    ) -> None:
+        """Send contact to webhook."""
+        with contextlib.suppress(httpx.HTTPError):
+            async with httpx.AsyncClient() as client:
+                response = await client.post(
+                    REFLEX_DEV_WEB_NEWSLETTER_FORM_WEBHOOK_URL,
+                    json={
+                        "email": email,
+                    },
+                )
+            response.raise_for_status()
+
+    @rx.event(background=True)
+    async def add_contact_to_loops(
+        self,
+        email: str | None,
+    ):
+        """Add contact to loops."""
+        url: str = f"{API_BASE_URL_LOOPS}/contacts/create"
+        loops_api_key: str | None = os.getenv("LOOPS_API_KEY")
+        if loops_api_key is None:
+            return
+
+        headers = {
+            "Accept": "application/json",
+            "Authorization": f"Bearer {loops_api_key}",
+        }
+        try:
+            async with httpx.AsyncClient() as client:
+                response = await client.post(
+                    url,
+                    headers=headers,
+                    json={
+                        "email": email,
+                    },
+                )
+                response.raise_for_status()  # Raise an exception for HTTP errors (4xx and 5xx)
+
+        except httpx.HTTPError:
+            pass
+
+    @rx.event
+    def signup_for_another_user(self):
+        """Signup for another user."""
+        self.signed_up = False
+
+    @rx.event(background=True)
+    async def signup(
+        self,
+        form_data: dict[str, Any],
+    ):
+        """Sign the user up for the newsletter.
+
+        Yields:
+            The event actions.
+        """
+        email: str | None = None
+        if email_to_validate := form_data.get("input_email"):
+            try:
+                validated_email: ValidatedEmail = validate_email(
+                    email_to_validate,
+                    check_deliverability=True,
+                )
+                email = validated_email.normalized
+
+            except EmailNotValidError as e:
+                # Alert the error message.
+                yield rx.toast.warning(
+                    str(e),
+                    style={
+                        "border": "1px solid #3C3646",
+                        "background": "linear-gradient(218deg, #1D1B23 -35.66%, #131217 100.84%)",
+                    },
+                )
+                return
+        yield IndexState.send_contact_to_webhook(email)
+        yield IndexState.add_contact_to_loops(email)
+        async with self:
+            self.signed_up = True
+            yield
+        yield [
+            rx.toast.success("Thanks for signing up to the Newsletter!"),
+        ]

reflex_site_shared/components/__init__.py

@@ -0,0 +1 @@
+"""Components module."""

reflex_site_shared/components/blocks/__init__.py

@@ -0,0 +1,6 @@
+"""Blocks module."""
+
+from .code import *
+from .demo import *
+from .headings import *
+from .typography import *

reflex_site_shared/components/blocks/code.py

@@ -0,0 +1,111 @@
+"""Code block components for documentation pages."""
+
+import reflex as rx
+import reflex_site_shared.styles.fonts as fonts
+from reflex_site_shared import styles
+
+
+@rx.memo
+def code_block(code: str, language: str):
+    """Code block.
+
+    Returns:
+        The component.
+    """
+    return rx.box(
+        rx._x.code_block(
+            code,
+            language=language,
+            class_name="code-block",
+            can_copy=True,
+        ),
+        class_name="relative mb-4",
+    )
+
+
+@rx.memo
+def code_block_dark(code: str, language: str):
+    """Code block dark.
+
+    Returns:
+        The component.
+    """
+    return rx.box(
+        rx._x.code_block(
+            code,
+            language=language,
+            class_name="code-block",
+            can_copy=True,
+        ),
+        class_name="relative mb-4",
+    )
+
+
+def code_block_markdown(*children, **props):
+    """Code block markdown.
+
+    Returns:
+        The component.
+    """
+    language = props.get("language", "plain")
+    return code_block(code=children[0], language=language)
+
+
+def code_block_markdown_dark(*children, **props):
+    """Code block markdown dark.
+
+    Returns:
+        The component.
+    """
+    language = props.get("language", "plain")
+    return code_block_dark(code=children[0], language=language)
+
+
+def doccmdoutput(
+    command: str,
+    output: str,
+) -> rx.Component:
+    """Create a documentation code snippet.
+
+    Args:
+        command: The command to display.
+        output: The output of the command.
+
+    Returns:
+        The styled command and its example output.
+    """
+    return rx.vstack(
+        rx._x.code_block(
+            command,
+            can_copy=True,
+            border_radius=styles.DOC_BORDER_RADIUS,
+            background="transparent",
+            theme="ayu-dark",
+            language="bash",
+            code_tag_props={
+                "style": {
+                    "fontFamily": "inherit",
+                }
+            },
+            style=fonts.code,
+            font_family="JetBrains Mono",
+            width="100%",
+        ),
+        rx._x.code_block(
+            output,
+            can_copy=False,
+            border_radius="12px",
+            background="transparent",
+            theme="ayu-dark",
+            language="log",
+            code_tag_props={
+                "style": {
+                    "fontFamily": "inherit",
+                }
+            },
+            style=fonts.code,
+            font_family="JetBrains Mono",
+            width="100%",
+        ),
+        padding_y="1em",
+    )

reflex_site_shared/components/blocks/collapsible.py

@@ -0,0 +1,63 @@
+"""Collapsible accordion box used by alert and video blocks."""
+
+from collections.abc import Sequence
+
+from reflex_base.constants.colors import ColorType
+
+import reflex as rx
+
+
+def collapsible_box(
+    trigger_children: Sequence[rx.Component],
+    body: rx.Component,
+    color: ColorType,
+    *,
+    item_border_radius: str = "12px",
+) -> rx.Component:
+    """Collapsible accordion wrapper shared by alert and video directives.
+
+    Returns:
+        The component.
+    """
+    return rx.box(
+        rx.accordion.root(
+            rx.accordion.item(
+                rx.accordion.header(
+                    rx.accordion.trigger(
+                        rx.hstack(
+                            *trigger_children,
+                            rx.spacer(),
+                            rx.accordion.icon(color=f"{rx.color(color, 11)}"),
+                            align_items="center",
+                            justify_content="left",
+                            text_align="left",
+                            spacing="2",
+                            width="100%",
+                        ),
+                        padding="0px",
+                        color=f"{rx.color(color, 11)} !important",
+                        background_color="transparent !important",
+                        border_radius="12px",
+                        _hover={},
+                    ),
+                ),
+                body,
+                border_radius=item_border_radius,
+                padding=["16px", "24px"],
+                background_color=f"{rx.color(color, 3)}",
+                border="none",
+            ),
+            background="transparent !important",
+            border_radius="12px",
+            box_shadow="none !important",
+            collapsible=True,
+            width="100%",
+        ),
+        border=f"1px solid {rx.color(color, 4)}",
+        border_radius="12px",
+        background_color=f"{rx.color(color, 3)} !important",
+        width="100%",
+        margin_bottom="16px",
+        margin_top="16px",
+        overflow="hidden",
+    )

reflex_site_shared/components/blocks/demo.py

@@ -0,0 +1,173 @@
+"""Components for rendering code demos in the documentation."""
+
+import textwrap
+from typing import Any
+
+import ruff_format
+
+import reflex as rx
+
+from .code import code_block, code_block_dark
+
+
+def docdemobox(*children, **props) -> rx.Component:
+    """Create a documentation demo box with the output of the code.
+
+    Args:
+        children: The children to display.
+        props: Additional props to apply to the box.
+
+    Returns:
+        The styled demo box.
+    """
+    return rx.box(
+        *children,
+        **props,
+        class_name="flex flex-col p-6 rounded-xl overflow-x-auto border border-slate-4 bg-slate-2 items-center justify-center w-full",
+    )
+
+
+def doccode(
+    code: str,
+    language: str = "python",
+    lines: tuple[int, int] | None = None,
+    theme: str = "light",
+) -> rx.Component:
+    """Create a documentation code snippet.
+
+    Args:
+        code: The code to display.
+        language: The language of the code.
+        lines: The start/end lines to display.
+        theme: The theme for the code snippet.
+
+    Returns:
+        The styled code snippet.
+    """
+    # For Python snippets, lint the code with black.
+    if language == "python":
+        code = ruff_format.format_string(textwrap.dedent(code)).strip()
+
+    # If needed, only display a subset of the lines.
+    if lines is not None:
+        code = textwrap.dedent(
+            "\n".join(code.strip().splitlines()[lines[0] : lines[1]])
+        ).strip()
+
+    # Create the code snippet.
+    cb = code_block_dark if theme == "dark" else code_block
+    return cb(
+        code=code,
+        language=language,
+    )
+
+
+def docdemo(
+    code: str,
+    state: str | None = None,
+    comp: rx.Component | None = None,
+    context: bool = False,
+    demobox_props: dict[str, Any] | None = None,
+    theme: str | None = None,
+    **props,
+) -> rx.Component:
+    """Create a documentation demo with code and output.
+
+    Args:
+        code: The code to render the component.
+        state: Code for any state needed for the component.
+        comp: The pre-rendered component.
+        context: Whether to wrap the render code in a function.
+        demobox_props: Props to apply to the demo box.
+        theme: The theme for the code snippet.
+        props: Additional props to apply to the component.
+
+    Returns:
+        The styled demo.
+    """
+    demobox_props = demobox_props or {}
+    # Render the component if necessary.
+    if comp is None:
+        comp = eval(code)
+
+    # Wrap the render code in a function if needed.
+    if context:
+        code = f"""def index():
+        return {code}
+        """
+
+    # Add the state code
+    if state is not None:
+        code = state + code
+
+    if demobox_props.pop("toggle", False):
+        return rx.tabs.root(
+            rx.tabs.list(
+                rx.tabs.trigger(
+                    rx.box(
+                        "UI",
+                    ),
+                    value="tab1",
+                    class_name="tab-style",
+                ),
+                rx.tabs.trigger(
+                    rx.box(
+                        "Code",
+                    ),
+                    value="tab2",
+                    class_name="tab-style",
+                ),
+                class_name="justify-end",
+            ),
+            rx.tabs.content(
+                rx.box(docdemobox(comp, **(demobox_props or {})), class_name="my-4"),
+                value="tab1",
+            ),
+            rx.tabs.content(
+                rx.box(doccode(code, theme=theme or "light"), class_name="my-4"),
+                value="tab2",
+            ),
+            default_value="tab1",
+        )
+    # Create the demo.
+    return rx.box(
+        docdemobox(comp, **(demobox_props or {})),
+        doccode(code, theme=theme or "light"),
+        class_name="py-4 gap-4 flex flex-col w-full",
+        **props,
+    )
+
+
+def docgraphing(
+    code: str,
+    comp: rx.Component | None = None,
+    data: str | None = None,
+):
+    """Docgraphing.
+
+    Returns:
+        The component.
+    """
+    return rx.box(
+        rx.flex(
+            comp,
+            class_name="w-full flex flex-col p-6 rounded-xl overflow-x-auto border border-slate-4 bg-slate-2 items-center justify-center",
+        ),
+        rx.tabs.root(
+            rx.tabs.list(
+                rx.tabs.trigger("Code", value="code", class_name="tab-style"),
+                rx.tabs.trigger("Data", value="data", class_name="tab-style"),
+                justify_content="end",
+            ),
+            rx.box(
+                rx.tabs.content(doccode(code), value="code", class_name="w-full px-0"),
+                rx.tabs.content(
+                    doccode(data or ""), value="data", class_name="w-full px-0"
+                ),
+                class_name="w-full my-4",
+            ),
+            default_value="code",
+            class_name="w-full mt-6 justify-end",
+        ),
+        class_name="w-full py-4 flex flex-col",
+    )

reflex_site_shared/components/blocks/flexdown.py

@@ -0,0 +1,170 @@
+"""Flexdown module — component maps and markdown helpers."""
+
+# pyright: reportAttributeAccessIssue=false
+from reflex_base.constants.colors import ColorType
+
+import reflex as rx
+from reflex_site_shared.components.blocks.code import (
+    code_block_markdown,
+    code_block_markdown_dark,
+)
+from reflex_site_shared.components.blocks.headings import (
+    h1_comp_xd,
+    h2_comp_xd,
+    h3_comp_xd,
+    h4_comp_xd,
+    img_comp_xd,
+)
+from reflex_site_shared.components.blocks.typography import (
+    code_comp,
+    doclink2,
+    list_comp,
+    ordered_list_comp,
+    text_comp,
+    unordered_list_comp,
+)
+from reflex_site_shared.styles.fonts import base, code
+
+
+def get_code_style(color: ColorType):
+    """Get code style.
+
+    Returns:
+        The component.
+    """
+    return {
+        "p": {"margin_y": "0px"},
+        "code": {
+            "color": rx.color(color, 11),
+            "border_radius": "4px",
+            "border": f"1px solid {rx.color(color, 5)}",
+            "background": rx.color(color, 4),
+            **code,
+        },
+        **base,
+    }
+
+
+def _markdown_table(*children, **props) -> rx.Component:
+    return rx.box(
+        rx.el.table(
+            *children,
+            class_name="w-full border-collapse text-sm border border-secondary-4 rounded-lg overflow-hidden bg-white-1 ",
+            **props,
+        ),
+        class_name="w-full rounded-xl border border-secondary-a4 my-6 max-w-full overflow-hidden",
+    )
+
+
+def _markdown_thead(*children, **props) -> rx.Component:
+    return rx.el.thead(
+        *children,
+        class_name="bg-secondary-1 border-b border-secondary-4",
+        **props,
+    )
+
+
+def _markdown_tbody(*children, **props) -> rx.Component:
+    return rx.el.tbody(
+        *children,
+        class_name="[&_tr:nth-child(even)]:bg-secondary-1",
+        **props,
+    )
+
+
+def _markdown_tr(*children, **props) -> rx.Component:
+    return rx.el.tr(
+        *children,
+        class_name="border-b border-secondary-4 last:border-b-0",
+        **props,
+    )
+
+
+def _markdown_th(*children, **props) -> rx.Component:
+    return rx.el.th(
+        *children,
+        class_name="px-3 py-2.5 text-left text-xs font-[575] text-secondary-12 align-top",
+        **props,
+    )
+
+
+def _markdown_td(*children, **props) -> rx.Component:
+    return rx.el.td(
+        *children,
+        class_name="px-3 py-2.5 text-xs font-medium first:font-[575] text-secondary-11 align-top",
+        **props,
+    )
+
+
+_markdown_table_component_map: dict[str, object] = {
+    "table": _markdown_table,
+    "thead": _markdown_thead,
+    "tbody": _markdown_tbody,
+    "tr": _markdown_tr,
+    "th": _markdown_th,
+    "td": _markdown_td,
+}
+
+component_map = {
+    "h1": lambda text: h1_comp_xd(text=text),
+    "h2": lambda text: h2_comp_xd(text=text),
+    "h3": lambda text: h3_comp_xd(text=text),
+    "h4": lambda text: h4_comp_xd(text=text),
+    "p": lambda text: text_comp(text=text),
+    "li": lambda text: list_comp(text=text),
+    "a": doclink2,
+    "code": lambda text: code_comp(text=text),
+    "pre": code_block_markdown,
+    "img": lambda src: img_comp_xd(src=src),
+    **_markdown_table_component_map,
+}
+comp2 = component_map.copy()
+comp2["pre"] = code_block_markdown_dark
+comp2["ul"] = lambda items: unordered_list_comp(items=items)
+comp2["ol"] = lambda items: ordered_list_comp(items=items)
+
+
+def markdown(text: str):
+    """Markdown.
+
+    Returns:
+        The component.
+    """
+    return rx.markdown(text, component_map=component_map)
+
+
+def markdown_codeblock(value: str, **props: object) -> rx.Component:
+    """Render a code block using the Shiki-based code block component.
+
+    Returns:
+        The component.
+    """
+    return rx._x.code_block(value, **props)
+
+
+def markdown_with_shiki(*args, **kwargs):
+    """Wrapper for the markdown component with a customized component map.
+    Uses the experimental Shiki-based code block (rx._x.code_block)
+    instead of the default CodeBlock component for code blocks.
+
+    Note: This wrapper should be removed once the default codeblock
+    in rx.markdown component map is updated to the Shiki-based code block.
+
+    Returns:
+            The component.
+    """
+    return rx.markdown(
+        *args,
+        component_map={
+            "h1": lambda text: h1_comp_xd(text=text),
+            "h2": lambda text: h2_comp_xd(text=text),
+            "h3": lambda text: h3_comp_xd(text=text),
+            "h4": lambda text: h4_comp_xd(text=text),
+            "p": lambda text: text_comp(text=text),
+            "li": lambda text: list_comp(text=text),
+            "a": doclink2,
+            "pre": markdown_codeblock,
+            "img": lambda src: img_comp_xd(src=src),
+        },
+        **kwargs,
+    )