reflex_copy/reflex/custom_components/custom_components.py

"""CLI for creating custom components."""

from __future__ import annotations

import os
import re
import subprocess
import sys
from collections import namedtuple
from contextlib import contextmanager
from pathlib import Path

import httpx
import typer

from reflex import constants
from reflex.config import get_config
from reflex.constants import CustomComponents
from reflex.utils import console

custom_components_cli = typer.Typer()


POST_CUSTOM_COMPONENTS_GALLERY_TIMEOUT = 15


@contextmanager
def set_directory(working_directory: str | Path):
    """Context manager that sets the working directory.

    Args:
        working_directory: The working directory to change to.

    Yields:
        Yield to the caller to perform operations in the working directory.
    """
    current_directory = Path.cwd()
    working_directory = Path(working_directory)
    try:
        os.chdir(working_directory)
        yield
    finally:
        os.chdir(current_directory)


def _create_package_config(module_name: str, package_name: str):
    """Create a package config pyproject.toml file.

    Args:
        module_name: The name of the module.
        package_name: The name of the package typically constructed with `reflex-` prefix and a meaningful library name.
    """
    from reflex.compiler import templates

    pyproject = Path(CustomComponents.PYPROJECT_TOML)
    pyproject.write_text(
        templates.CUSTOM_COMPONENTS_PYPROJECT_TOML.render(
            module_name=module_name,
            package_name=package_name,
            reflex_version=constants.Reflex.VERSION,
        )
    )


def _create_readme(module_name: str, package_name: str):
    """Create a package README file.

    Args:
        module_name: The name of the module.
        package_name: The name of the python package to be published.
    """
    from reflex.compiler import templates

    readme = Path(CustomComponents.PACKAGE_README)
    readme.write_text(
        templates.CUSTOM_COMPONENTS_README.render(
            module_name=module_name,
            package_name=package_name,
        )
    )


def _write_source_and_init_py(
    custom_component_src_dir: Path,
    component_class_name: str,
    module_name: str,
):
    """Write the source code and init file from templates for the custom component.

    Args:
        custom_component_src_dir: The name of the custom component source directory.
        component_class_name: The name of the component class.
        module_name: The name of the module.
    """
    from reflex.compiler import templates

    module_path = custom_component_src_dir / f"{module_name}.py"
    module_path.write_text(
        templates.CUSTOM_COMPONENTS_SOURCE.render(
            component_class_name=component_class_name, module_name=module_name
        )
    )

    init_path = custom_component_src_dir / CustomComponents.INIT_FILE
    init_path.write_text(
        templates.CUSTOM_COMPONENTS_INIT_FILE.render(module_name=module_name)
    )


def _populate_demo_app(name_variants: NameVariants):
    """Populate the demo app that imports the custom components.

    Args:
        name_variants: the tuple including various names such as package name, class name needed for the project.
    """
    from reflex import constants
    from reflex.compiler import templates
    from reflex.reflex import _init

    demo_app_dir = Path(name_variants.demo_app_dir)
    demo_app_name = name_variants.demo_app_name

    console.info(f"Creating app for testing: {demo_app_dir!s}")

    demo_app_dir.mkdir(exist_ok=True)

    with set_directory(demo_app_dir):
        # We start with the blank template as basis.
        _init(name=demo_app_name, template=constants.Templates.DEFAULT)
        # Then overwrite the app source file with the one we want for testing custom components.
        # This source file is rendered using jinja template file.
        demo_file = Path(f"{demo_app_name}/{demo_app_name}.py")
        demo_file.write_text(
            templates.CUSTOM_COMPONENTS_DEMO_APP.render(
                custom_component_module_dir=name_variants.custom_component_module_dir,
                module_name=name_variants.module_name,
            )
        )
        # Append the custom component package to the requirements.txt file.
        with Path(f"{constants.RequirementsTxt.FILE}").open(mode="a") as f:
            f.write(f"{name_variants.package_name}\n")


def _get_default_library_name_parts() -> list[str]:
    """Get the default library name. Based on the current directory name, remove any non-alphanumeric characters.

    Raises:
        Exit: If the current directory name is not suitable for python projects, and we cannot find a valid library name based off it.

    Returns:
        The parts of default library name.
    """
    current_dir_name = Path.cwd().name

    cleaned_dir_name = re.sub("[^0-9a-zA-Z-_]+", "", current_dir_name).lower()
    parts = [part for part in re.split("-|_", cleaned_dir_name) if part]
    if parts and parts[0] == constants.Reflex.MODULE_NAME:
        # If the directory name already starts with "reflex", remove it from the parts.
        parts = parts[1:]
        # If no parts left, cannot find a valid library name, exit.
        if not parts:
            # The folder likely has a name not suitable for python paths.
            console.error(
                f"Based on current directory name {current_dir_name}, the library name is {constants.Reflex.MODULE_NAME}. This package already exists. Please use --library-name to specify a different name."
            )
            raise typer.Exit(code=1)
    if not parts:
        # The folder likely has a name not suitable for python paths.
        console.error(
            f"Could not find a valid library name based on the current directory: got {current_dir_name}."
        )
        raise typer.Exit(code=1)
    return parts


NameVariants = namedtuple(
    "NameVariants",
    [
        "library_name",
        "component_class_name",
        "package_name",
        "module_name",
        "custom_component_module_dir",
        "demo_app_dir",
        "demo_app_name",
    ],
)


def _validate_library_name(library_name: str | None) -> NameVariants:
    """Validate the library name.

    Args:
        library_name: The name of the library if picked otherwise None.

    Raises:
        Exit: If the library name is not suitable for python projects.

    Returns:
        A tuple containing the various names such as package name, class name, etc., needed for the project.
    """
    if library_name is not None and not re.match(
        r"^[a-zA-Z-]+[a-zA-Z0-9-]*$", library_name
    ):
        console.error(
            f"Please use only alphanumeric characters or dashes: got {library_name}"
        )
        raise typer.Exit(code=1)

    # If not specified, use the current directory name to form the module name.
    name_parts = (
        [part.lower() for part in library_name.split("-")]
        if library_name
        else _get_default_library_name_parts()
    )
    if not library_name:
        library_name = "-".join(name_parts)

    # Component class name is the camel case.
    component_class_name = "".join([part.capitalize() for part in name_parts])
    console.debug(f"Component class name: {component_class_name}")

    # Package name is commonly kebab case.
    package_name = f"reflex-{library_name}"
    console.debug(f"Package name: {package_name}")

    # Module name is the snake case.
    module_name = "_".join(name_parts)

    custom_component_module_dir = Path(f"reflex_{module_name}")
    console.debug(f"Custom component source directory: {custom_component_module_dir}")

    # Use the same name for the directory and the app.
    demo_app_dir = demo_app_name = f"{module_name}_demo"
    console.debug(f"Demo app directory: {demo_app_dir}")

    return NameVariants(
        library_name=library_name,
        component_class_name=component_class_name,
        package_name=package_name,
        module_name=module_name,
        custom_component_module_dir=custom_component_module_dir,
        demo_app_dir=demo_app_dir,
        demo_app_name=demo_app_name,
    )


def _populate_custom_component_project(name_variants: NameVariants):
    """Populate the custom component source directory. This includes the pyproject.toml, README.md, and the code template for the custom component.

    Args:
        name_variants: the tuple including various names such as package name, class name needed for the project.
    """
    console.info(
        f"Populating pyproject.toml with package name: {name_variants.package_name}"
    )
    # write pyproject.toml, README.md, etc.
    _create_package_config(
        module_name=name_variants.library_name, package_name=name_variants.package_name
    )
    _create_readme(
        module_name=name_variants.library_name, package_name=name_variants.package_name
    )

    console.info(
        f"Initializing the component directory: {CustomComponents.SRC_DIR / name_variants.custom_component_module_dir}"
    )
    CustomComponents.SRC_DIR.mkdir(exist_ok=True)
    with set_directory(CustomComponents.SRC_DIR):
        module_dir = Path(name_variants.custom_component_module_dir)
        module_dir.mkdir(exist_ok=True, parents=True)
        _write_source_and_init_py(
            custom_component_src_dir=module_dir,
            component_class_name=name_variants.component_class_name,
            module_name=name_variants.module_name,
        )


@custom_components_cli.command(name="init")
def init(
    library_name: str | None = typer.Option(
        None,
        help="The name of your library. On PyPI, package will be published as `reflex-{library-name}`.",
    ),
    install: bool = typer.Option(
        True,
        help="Whether to install package from this local custom component in editable mode.",
    ),
    loglevel: constants.LogLevel | None = typer.Option(
        None, help="The log level to use."
    ),
):
    """Initialize a custom component.

    Args:
        library_name: The name of the library.
        install: Whether to install package from this local custom component in editable mode.
        loglevel: The log level to use.

    Raises:
        Exit: If the pyproject.toml already exists.
    """
    from reflex.utils import exec, prerequisites

    console.set_log_level(loglevel or get_config().loglevel)

    if CustomComponents.PYPROJECT_TOML.exists():
        console.error(f"A {CustomComponents.PYPROJECT_TOML} already exists. Aborting.")
        typer.Exit(code=1)

    # Show system info.
    exec.output_system_info()

    # Check the name follows the convention if picked.
    name_variants = _validate_library_name(library_name)

    console.rule(f"[bold]Initializing {name_variants.package_name} project")

    _populate_custom_component_project(name_variants)

    _populate_demo_app(name_variants)

    # Initialize the .gitignore.
    prerequisites.initialize_gitignore(
        gitignore_file=CustomComponents.FILE, files_to_ignore=CustomComponents.DEFAULTS
    )

    if install:
        package_name = name_variants.package_name
        console.rule(f"[bold]Installing {package_name} in editable mode.")
        if _pip_install_on_demand(package_name=".", install_args=["-e"]):
            console.info(f"Package {package_name} installed!")
        else:
            raise typer.Exit(code=1)

    console.print("[bold]Custom component initialized successfully!")
    console.rule("[bold]Project Summary")
    console.print(
        f"[ {CustomComponents.PACKAGE_README} ]: Package description. Please add usage examples."
    )
    console.print(
        f"[ {CustomComponents.PYPROJECT_TOML} ]: Project configuration file. Please fill in details such as your name, email, homepage URL."
    )
    console.print(
        f"[ {CustomComponents.SRC_DIR}/ ]: Custom component code template. Start by editing it with your component implementation."
    )
    console.print(
        f"[ {name_variants.demo_app_dir}/ ]: Demo App. Add more code to this app and test."
    )


def _pip_install_on_demand(
    package_name: str,
    install_args: list[str] | None = None,
) -> bool:
    """Install a package on demand.

    Args:
        package_name: The name of the package.
        install_args: The additional arguments for the pip install command.

    Returns:
        True if the package is installed successfully, False otherwise.
    """
    install_args = install_args or []

    install_cmds = [
        sys.executable,
        "-m",
        "pip",
        "install",
        *install_args,
        package_name,
    ]
    console.debug(f"Install package: {' '.join(install_cmds)}")
    return _run_commands_in_subprocess(install_cmds)


def _run_commands_in_subprocess(cmds: list[str]) -> bool:
    """Run commands in a subprocess.

    Args:
        cmds: The commands to run.

    Returns:
        True if the command runs successfully, False otherwise.
    """
    console.debug(f"Running command: {' '.join(cmds)}")
    try:
        result = subprocess.run(cmds, capture_output=True, text=True, check=True)
    except subprocess.CalledProcessError as cpe:
        console.error(cpe.stdout)
        console.error(cpe.stderr)
        return False
    else:
        console.debug(result.stdout)
        return True


def _make_pyi_files():
    """Create pyi files for the custom component."""
    from reflex.utils.pyi_generator import PyiGenerator

    for top_level_dir in Path.cwd().iterdir():
        if not top_level_dir.is_dir() or top_level_dir.name.startswith("."):
            continue
        for dir, _, _ in top_level_dir.walk():
            if "__pycache__" in dir.name:
                continue
            PyiGenerator().scan_all([dir])


def _run_build():
    """Run the build command.

    Raises:
        Exit: If the build fails.
    """
    console.print("Building custom component...")

    _make_pyi_files()

    cmds = [sys.executable, "-m", "build", "."]
    if _run_commands_in_subprocess(cmds):
        console.info("Custom component built successfully!")
    else:
        raise typer.Exit(code=1)


@custom_components_cli.command(name="build")
def build(
    loglevel: constants.LogLevel | None = typer.Option(
        None, help="The log level to use."
    ),
):
    """Build a custom component. Must be run from the project root directory where the pyproject.toml is.

    Args:
        loglevel: The log level to use.
    """
    console.set_log_level(loglevel or get_config().loglevel)
    _run_build()


@custom_components_cli.command(name="publish", deprecated=True)
def publish():
    """Publish a custom component. This command is deprecated and will be removed in future releases.

    Raises:
        Exit: If the publish command fails.
    """
    console.error(
        "The publish command is deprecated. You can use `reflex component build` followed by `twine upload` or a similar publishing command to publish your custom component."
        "\nIf you want to share your custom component with the Reflex community, please use `reflex component share`."
    )
    raise typer.Exit(code=1)


def _collect_details_for_gallery():
    """Helper to collect details on the custom component to be included in the gallery.

    Raises:
        Exit: If pyproject.toml file is ill-formed or the request to the backend services fails.
    """
    from reflex_cli.utils import hosting

    console.rule("[bold]Authentication with Reflex Services")
    console.print("First let's log in to Reflex backend services.")
    access_token, _ = hosting.authenticated_token()

    if not access_token:
        console.error(
            "Unable to authenticate with Reflex backend services. Make sure you are logged in."
        )
        raise typer.Exit(code=1)

    console.rule("[bold]Custom Component Information")
    params = {}

    package_name = console.ask("[ Published python package name ]")
    console.print(f"[ Custom component package name ] : {package_name}")
    params["package_name"] = package_name

    post_custom_components_gallery_endpoint = (
        "https://gallery-backend.reflex.dev/custom-components/gallery"
    )

    # Check the backend services if the user is allowed to update information of this package is already shared.
    try:
        console.debug(
            f"Checking if user has permission to upsert information for {package_name} by POST."
        )
        # Send a POST request to achieve two things at once:
        # 1. Check if the package is already shared by the user. If not, the backend will return 403.
        # 2. If this package is not shared before, this request records the package name in the backend.
        response = httpx.post(
            post_custom_components_gallery_endpoint,
            headers={"Authorization": f"Bearer {access_token}"},
            data=params,
        )
        if response.status_code == httpx.codes.FORBIDDEN:
            console.error(
                f"{package_name} is owned by another user. Unable to update the information for it."
            )
            raise typer.Exit(code=1)
        response.raise_for_status()
    except httpx.HTTPError as he:
        console.error(f"Unable to complete request due to {he}.")
        raise typer.Exit(code=1) from he

    files = []
    if (image_file_and_extension := _get_file_from_prompt_in_loop()) is not None:
        files.append(
            ("files", (image_file_and_extension[1], image_file_and_extension[0]))
        )

    demo_url = None
    while True:
        demo_url = (
            console.ask(
                "[ Full URL of deployed demo app, e.g. `https://my-app.reflex.run` ] (enter to skip)"
            )
            or None
        )
        if _validate_url_with_protocol_prefix(demo_url):
            break
    if demo_url:
        params["demo_url"] = demo_url

    # Now send the post request to Reflex backend services.
    try:
        console.debug(f"Sending custom component data: {params}")
        response = httpx.post(
            post_custom_components_gallery_endpoint,
            headers={"Authorization": f"Bearer {access_token}"},
            data=params,
            files=files,
            timeout=POST_CUSTOM_COMPONENTS_GALLERY_TIMEOUT,
        )
        response.raise_for_status()

    except httpx.HTTPError as he:
        console.error(f"Unable to complete request due to {he}.")
        raise typer.Exit(code=1) from he

    console.info("Custom component information successfully shared!")


def _validate_url_with_protocol_prefix(url: str | None) -> bool:
    """Validate the URL with protocol prefix. Empty string is acceptable.

    Args:
        url: the URL string to check.

    Returns:
        Whether the entered URL is acceptable.
    """
    return not url or (url.startswith("http://") or url.startswith("https://"))


def _get_file_from_prompt_in_loop() -> tuple[bytes, str] | None:
    image_file = file_extension = None
    while image_file is None:
        image_path_str = console.ask(
            "Upload a preview image of your demo app (enter to skip)"
        )
        if not image_path_str:
            break
        image_file_path = Path(image_path_str)
        if not image_file_path:
            break
        if not image_file_path.exists():
            console.error(f"File {image_file_path} does not exist.")
            continue
        file_extension = image_file_path.suffix
        try:
            image_file = image_file_path.read_bytes()
        except OSError as ose:
            console.error(f"Unable to read the {file_extension} file due to {ose}")
            raise typer.Exit(code=1) from ose
        else:
            return image_file, file_extension

    console.debug(f"File extension detected: {file_extension}")
    return None


@custom_components_cli.command(name="share")
def share_more_detail(
    loglevel: constants.LogLevel | None = typer.Option(
        None, help="The log level to use."
    ),
):
    """Collect more details on the published package for gallery.

    Args:
        loglevel: The log level to use.
    """
    console.set_log_level(loglevel or get_config().loglevel)

    _collect_details_for_gallery()


@custom_components_cli.command()
def install(
    loglevel: constants.LogLevel | None = typer.Option(
        None, help="The log level to use."
    ),
):
    """Install package from this local custom component in editable mode.

    Args:
        loglevel: The log level to use.

    Raises:
        Exit: If unable to install the current directory in editable mode.
    """
    console.set_log_level(loglevel or get_config().loglevel)

    if _pip_install_on_demand(package_name=".", install_args=["-e"]):
        console.info("Package installed successfully!")
    else:
        raise typer.Exit(code=1)