reflex-jupyter-renderer-react 0.1.0__py3-none-any.whl

reflex_jupyter_renderer_react/__init__.py

@@ -0,0 +1,79 @@
+"""reflex-jupyter-renderer-react.
+
+A native Reflex component that wraps the ``jupyter-renderer-react`` library so you
+can render Jupyter notebooks (``.ipynb``) in a Reflex app — with syntax
+highlighting, markdown, rich outputs, themes and collapsible cells — in pure
+Python.
+
+Typical use::
+
+    import reflex as rx
+    from reflex_jupyter_renderer_react import jupyter_notebook_viewer, Notebook, CodeCell, MarkdownCell
+
+    nb = Notebook(cells=[
+        MarkdownCell("# Hello"),
+        CodeCell("print('hi')", execution_count=1),
+    ])
+
+    def index() -> rx.Component:
+        return jupyter_notebook_viewer(notebook=nb.to_dict(), theme="dark")
+
+You can also load from a URL::
+
+    from reflex_jupyter_renderer_react import JupyterNotebookViewer
+
+    JupyterNotebookViewer.from_url("https://example.com/notebook.ipynb")
+"""
+
+from .models import (
+    CodeCell,
+    MarkdownCell,
+    Notebook,
+    Output,
+    RawCell,
+    display_data_output,
+    error_output,
+    execute_result_output,
+    load_notebook,
+    notebook_from_url,
+    stream_output,
+)
+
+__version__ = "0.1.0"
+
+__all__ = [
+    # Data model (importable without Reflex)
+    "Notebook",
+    "CodeCell",
+    "MarkdownCell",
+    "RawCell",
+    "Output",
+    "stream_output",
+    "display_data_output",
+    "execute_result_output",
+    "error_output",
+    "load_notebook",
+    "notebook_from_url",
+    # Component (requires Reflex)
+    "JupyterNotebookViewer",
+    "jupyter_notebook_viewer",
+    "LIBRARY_NAME",
+    "COMPONENT_TAG",
+    "PREDEFINED_THEMES",
+]
+
+# Keep the data-model layer importable even when Reflex is not installed.
+try:
+    from .jupyter_renderer_react import (
+        COMPONENT_TAG,
+        LIBRARY_NAME,
+        PREDEFINED_THEMES,
+        JupyterNotebookViewer,
+        jupyter_notebook_viewer,
+    )
+except ModuleNotFoundError:  # pragma: no cover - only without reflex installed
+    JupyterNotebookViewer = None  # type: ignore[assignment]
+    jupyter_notebook_viewer = None  # type: ignore[assignment]
+    LIBRARY_NAME = "jupyter-renderer-react"
+    COMPONENT_TAG = "JupyterNotebookViewer"
+    PREDEFINED_THEMES = ("light", "dark")

reflex_jupyter_renderer_react/jupyter_renderer_react.py

@@ -0,0 +1,175 @@
+"""Native Reflex wrapper for the ``jupyter-renderer-react`` library.
+
+``jupyter-renderer-react`` (by IOMETE) is a *real* React component library: it
+exports a ``JupyterNotebookViewer`` React component that renders a Jupyter
+notebook (``.ipynb``) with syntax highlighting, markdown, and rich outputs.
+Because it ships an actual React component (and not an imperative class like some
+JS libraries), wrapping it in Reflex is straightforward: declare the ``library``
+and ``tag``, map each prop to an ``rx.Var``, and expose the callbacks as Reflex
+event handlers.
+
+The viewer accepts a notebook in three interchangeable shapes:
+
+1. A parsed notebook object (a Python ``dict`` following the nbformat schema).
+2. A JSON string of that object.
+3. A remote/local file reference: ``{"filePath": "https://.../nb.ipynb"}``.
+
+This module keeps the npm package name and component tag in module-level
+constants so they can be overridden in one place if the upstream package is
+published under a different name/registry (see the README "Naming" note).
+"""
+
+from __future__ import annotations
+
+from typing import Any, Union
+
+import reflex as rx
+from reflex.vars.object import ObjectVar
+
+__all__ = ["JupyterNotebookViewer", "jupyter_notebook_viewer", "LIBRARY_NAME"]
+
+# --------------------------------------------------------------------------- #
+# Package coordinates
+# --------------------------------------------------------------------------- #
+# The public README documents `npm install jupyter-renderer-react` and a
+# `JupyterNotebookViewer` named export. The repository's package.json publishes a
+# scoped name (`@iomete/jupyter-renderer-react`) to the GitHub registry, and the
+# source `index.ts` exports the symbol as `JupiterNotebookViewer` (sic). We default
+# to the public, documented contract and centralize both so a consumer can pin a
+# version or switch to the scoped package without touching the class body.
+LIBRARY_NAME = "@iomete/jupyter-renderer-react"
+LIBRARY_VERSION = "1.0.1"  # empty string installs the latest published version.
+LIBRARY = f"{LIBRARY_NAME}@{LIBRARY_VERSION}" if LIBRARY_VERSION else LIBRARY_NAME
+
+# Named export rendered as the React tag. The published package (@iomete) exports
+# the symbol as `JupiterNotebookViewer` (sic — "Jupiter", not "Jupyter").
+COMPONENT_TAG = "JupiterNotebookViewer"
+
+# Stylesheet shipped by the package (package.json `exports` maps `./dist/index.css`).
+CSS_IMPORT = f"{LIBRARY_NAME}/dist/index.css"
+
+# Themes recognized by the upstream `theme` prop when passed as a string.
+PREDEFINED_THEMES = ("light", "dark")
+
+
+def _error_event_spec(error: ObjectVar) -> tuple[rx.Var[str]]:
+    """Map a JS ``Error`` object to its serializable ``message`` string.
+
+    The upstream ``onError``/``onFileError`` callbacks receive a JS ``Error``
+    instance, which is not JSON-serializable. We forward only ``error.message``
+    so the Reflex event handler receives a plain ``str``.
+    """
+    return (error.message.to(str),)
+
+
+def _notebook_event_spec(notebook: ObjectVar) -> tuple[rx.Var[dict]]:
+    """Pass the loaded notebook object through to the backend as a dict."""
+    return (notebook.to(dict),)
+
+
+class JupyterNotebookViewer(rx.Component):
+    """Render a Jupyter notebook with the ``jupyter-renderer-react`` viewer."""
+
+    library = LIBRARY
+    tag = COMPONENT_TAG
+    # Named export (not `export default`), so disable default-import behavior.
+    is_default = False
+
+    # ---- Data ------------------------------------------------------------- #
+    # The notebook to render. Accepts a parsed object (dict), a JSON string, or a
+    # file reference dict such as {"filePath": "https://.../notebook.ipynb"}.
+    notebook: rx.Var[Union[dict, str]]
+
+    # ---- Presentation ----------------------------------------------------- #
+    # "light" | "dark" | a predefined theme name | a custom theme object (dict).
+    theme: rx.Var[Union[str, dict]]
+
+    # Show the execution count (e.g. `[1]`) next to code cells.
+    show_cell_numbers: rx.Var[bool]
+
+    # Render cell outputs (stream, display_data, execute_result, error).
+    show_outputs: rx.Var[bool]
+
+    # Allow cells to be collapsed/expanded.
+    collapsible: rx.Var[bool]
+
+    # Show a "copy to clipboard" button on code cells.
+    copyable: rx.Var[bool]
+
+    # Per-part class name overrides (maps to the `classNames` prop).
+    class_names: rx.Var[dict]
+
+    # Per-part inline style overrides (maps to the `styles` prop).
+    styles: rx.Var[dict]
+
+    # ---- File loading ----------------------------------------------------- #
+    # Fetch options used when `notebook` is a {"filePath": ...} reference, e.g.
+    # {"headers": {"Authorization": "Bearer ..."}, "timeout": 10000}.
+    fetch_options: rx.Var[dict]
+
+    # ---- Callbacks / events ---------------------------------------------- #
+    # Fired after a notebook is successfully loaded from a file path. The handler
+    # receives the parsed notebook object.
+    on_file_load: rx.EventHandler[_notebook_event_spec]
+
+    # Fired when loading a notebook from a file path fails (network/404/timeout).
+    on_file_error: rx.EventHandler[_error_event_spec]
+
+    # Fired when parsing/rendering a notebook fails.
+    on_error: rx.EventHandler[_error_event_spec]
+
+    def add_imports(self) -> dict[str, Any]:
+        """Side-effect import of the package stylesheet.
+
+        The empty key tells Reflex this is a bare ``import "..."`` for CSS; the
+        component's own ``library``/``tag`` import is added automatically.
+        """
+        return {"": CSS_IMPORT}
+
+    @classmethod
+    def create(  # type: ignore[override]
+        cls,
+        *children: Any,
+        notebook: Union[dict, str, None] = None,
+        **props: Any,
+    ) -> "JupyterNotebookViewer":
+        """Create a notebook viewer.
+
+        Args:
+            notebook: A parsed notebook ``dict`` (nbformat), a JSON ``str`` of the
+                same, or a file reference like ``{"filePath": "https://..."}``.
+                Use :func:`from_url` / :func:`from_json` for explicit intent.
+            **props: Standard Reflex props plus any of the typed props above
+                (``theme``, ``show_cell_numbers``, ``copyable``, event handlers...).
+        """
+        if notebook is not None:
+            props["notebook"] = notebook
+        return super().create(*children, **props)
+
+    @classmethod
+    def from_url(
+        cls,
+        url: str,
+        *,
+        fetch_options: dict | None = None,
+        **props: Any,
+    ) -> "JupyterNotebookViewer":
+        """Create a viewer that lazily fetches a ``.ipynb`` from ``url``.
+
+        Args:
+            url: HTTP(S) URL (or served path) of the notebook file.
+            fetch_options: Optional fetch options (``headers``, ``timeout``).
+            **props: Other component props / event handlers.
+        """
+        if fetch_options is not None:
+            props["fetch_options"] = fetch_options
+        return cls.create(notebook={"filePath": url}, **props)
+
+    @classmethod
+    def from_json(cls, raw: str, **props: Any) -> "JupyterNotebookViewer":
+        """Create a viewer from a raw notebook JSON ``str``."""
+        return cls.create(notebook=raw, **props)
+
+
+# Convenience alias matching the Reflex `rx.<component>` calling style.
+jupyter_notebook_viewer = JupyterNotebookViewer.create

reflex_jupyter_renderer_react/jupyter_renderer_react.pyi

@@ -0,0 +1,120 @@
+"""Stub file for custom_components/reflex_jupyter_renderer_react/jupyter_renderer_react.py"""
+
+# ------------------- DO NOT EDIT ----------------------
+# This file was generated by `reflex/utils/pyi_generator.py`!
+# ------------------------------------------------------
+from collections.abc import Mapping, Sequence
+from typing import Any, Optional
+from reflex_components_core.core.breakpoints import Breakpoints
+from reflex_base.event import (
+    EventType,
+    PointerEventInfo,
+)
+from reflex_base.vars.base import Var
+import reflex as rx
+
+__all__ = ["JupyterNotebookViewer", "jupyter_notebook_viewer", "LIBRARY_NAME"]
+LIBRARY_NAME = "@iomete/jupyter-renderer-react"
+LIBRARY_VERSION = "1.0.1"
+LIBRARY = f"{LIBRARY_NAME}@{LIBRARY_VERSION}" if LIBRARY_VERSION else LIBRARY_NAME
+COMPONENT_TAG = "JupiterNotebookViewer"
+CSS_IMPORT = f"{LIBRARY_NAME}/dist/index.css"
+PREDEFINED_THEMES = ("light", "dark")
+
+class JupyterNotebookViewer(rx.Component):
+    def add_imports(self) -> dict[str, Any]: ...
+    @classmethod
+    def create(
+        cls,
+        *children,
+        notebook: dict | str | None = None,
+        theme: Var[dict | str] | dict | str | None = None,
+        show_cell_numbers: Var[bool] | bool | None = None,
+        show_outputs: Var[bool] | bool | None = None,
+        collapsible: Var[bool] | bool | None = None,
+        copyable: Var[bool] | bool | None = None,
+        class_names: Var[dict] | dict | None = None,
+        styles: Var[dict] | dict | None = None,
+        fetch_options: Var[dict] | dict | None = None,
+        style: Sequence[Mapping[str, Any]]
+        | Mapping[str, Any]
+        | Var[Mapping[str, Any]]
+        | Breakpoints
+        | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        ref: Var | None = None,
+        class_name: Any | None = None,
+        custom_attrs: dict[str, Any | Var] | None = None,
+        on_blur: Optional[EventType[()]] = None,
+        on_click: Optional[EventType[()] | EventType[PointerEventInfo]] = None,
+        on_context_menu: Optional[EventType[()] | EventType[PointerEventInfo]] = None,
+        on_double_click: Optional[EventType[()] | EventType[PointerEventInfo]] = None,
+        on_error: Optional[EventType[()] | EventType[rx.Var[str]]] = None,
+        on_file_error: Optional[EventType[()] | EventType[rx.Var[str]]] = None,
+        on_file_load: Optional[EventType[()] | EventType[rx.Var[dict]]] = None,
+        on_focus: Optional[EventType[()]] = None,
+        on_mount: Optional[EventType[()]] = None,
+        on_mouse_down: Optional[EventType[()]] = None,
+        on_mouse_enter: Optional[EventType[()]] = None,
+        on_mouse_leave: Optional[EventType[()]] = None,
+        on_mouse_move: Optional[EventType[()]] = None,
+        on_mouse_out: Optional[EventType[()]] = None,
+        on_mouse_over: Optional[EventType[()]] = None,
+        on_mouse_up: Optional[EventType[()]] = None,
+        on_scroll: Optional[EventType[()]] = None,
+        on_scroll_end: Optional[EventType[()]] = None,
+        on_unmount: Optional[EventType[()]] = None,
+        **props,
+    ) -> "JupyterNotebookViewer":
+        """Create a notebook viewer.
+
+        Args:
+            notebook: A parsed notebook ``dict`` (nbformat), a JSON ``str`` of the
+                same, or a file reference like ``{"filePath": "https://..."}``.
+                Use :func:`from_url` / :func:`from_json` for explicit intent.
+            theme: ---- Presentation ----------------------------------------------------- # "light" | "dark" | a predefined theme name | a custom theme object (dict).
+            show_cell_numbers: Show the execution count (e.g. `[1]`) next to code cells.
+            show_outputs: Render cell outputs (stream, display_data, execute_result, error).
+            collapsible: Allow cells to be collapsed/expanded.
+            copyable: Show a "copy to clipboard" button on code cells.
+            class_names: Per-part class name overrides (maps to the `classNames` prop).
+            styles: Per-part inline style overrides (maps to the `styles` prop).
+            fetch_options: ---- File loading ----------------------------------------------------- # Fetch options used when `notebook` is a {"filePath": ...} reference, e.g. {"headers": {"Authorization": "Bearer ..."}, "timeout": 10000}.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            ref: The Var to pass as the ref to the component.
+            class_name: The class name for the component.
+            custom_attrs: Attributes passed directly to the component.
+            on_focus: Fired when the element (or some element inside of it) receives focus. For example, it is called when the user clicks on a text input.
+            on_blur: Fired when focus has left the element (or left some element inside of it). For example, it is called when the user clicks outside of a focused text input.
+            on_click: Fired when the user clicks on an element. For example, it's called when the user clicks on a button.
+            on_context_menu: Fired when the user right-clicks on an element.
+            on_double_click: Fired when the user double-clicks on an element.
+            on_mouse_down: Fired when the user presses a mouse button on an element.
+            on_mouse_enter: Fired when the mouse pointer enters the element.
+            on_mouse_leave: Fired when the mouse pointer leaves the element.
+            on_mouse_move: Fired when the mouse pointer moves over the element.
+            on_mouse_out: Fired when the mouse pointer moves out of the element.
+            on_mouse_over: Fired when the mouse pointer moves onto the element.
+            on_mouse_up: Fired when the user releases a mouse button on an element.
+            on_scroll: Fired when the user scrolls the element.
+            on_scroll_end: Fired when scrolling ends on the element.
+            on_mount: Fired when the component is mounted to the page.
+            on_unmount: Fired when the component is removed from the page. Only called during navigation, not on page refresh.
+            on_file_load: ---- Callbacks / events ---------------------------------------------- # Fired after a notebook is successfully loaded from a file path. The handler receives the parsed notebook object.
+            on_file_error: Fired when loading a notebook from a file path fails (network/404/timeout).
+            on_error: Fired when parsing/rendering a notebook fails.
+            **props: Standard Reflex props plus any of the typed props above
+                (``theme``, ``show_cell_numbers``, ``copyable``, event handlers...)."""
+        ...
+
+    @classmethod
+    def from_url(
+        cls, url: str, *, fetch_options: dict | None = None, **props: Any
+    ) -> "JupyterNotebookViewer": ...
+    @classmethod
+    def from_json(cls, raw: str, **props: Any) -> "JupyterNotebookViewer": ...
+
+jupyter_notebook_viewer = JupyterNotebookViewer.create

reflex_jupyter_renderer_react/models.py

@@ -0,0 +1,188 @@
+"""Typed, dependency-free builders for the Jupyter ``nbformat`` notebook shape.
+
+These helpers let you construct a notebook (or load one from disk) in pure Python
+and hand the resulting ``dict`` to :class:`JupyterNotebookViewer`. They mirror the
+relevant subset of the `nbformat v4 schema
+<https://nbformat.readthedocs.io/en/latest/format_description.html>`_ that the
+``jupyter-renderer-react`` viewer understands.
+
+This module deliberately imports nothing from Reflex so the data layer stays
+usable for tooling and unit tests even when Reflex is not installed.
+"""
+
+from __future__ import annotations
+
+import json
+from dataclasses import dataclass, field
+from pathlib import Path
+from typing import Any, Union
+
+__all__ = [
+    "Output",
+    "stream_output",
+    "display_data_output",
+    "execute_result_output",
+    "error_output",
+    "CodeCell",
+    "MarkdownCell",
+    "RawCell",
+    "Notebook",
+    "load_notebook",
+    "notebook_from_url",
+]
+
+# A source can be a single string or a list of lines (both are valid nbformat).
+Source = Union[str, list]
+
+
+def _norm_source(source: Source) -> Union[str, list]:
+    """Return source as-is (string or list of lines), both accepted by nbformat."""
+    return source
+
+
+# --------------------------------------------------------------------------- #
+# Outputs
+# --------------------------------------------------------------------------- #
+@dataclass
+class Output:
+    """A raw cell output already shaped as an nbformat output dict."""
+
+    data: dict
+
+    def to_dict(self) -> dict:
+        return dict(self.data)
+
+
+def stream_output(text: Source, name: str = "stdout") -> dict:
+    """A ``stream`` output (stdout/stderr text)."""
+    return {"output_type": "stream", "name": name, "text": _norm_source(text)}
+
+
+def display_data_output(data: dict, metadata: dict | None = None) -> dict:
+    """A ``display_data`` output, e.g. ``{"image/png": "<base64>"}``."""
+    return {
+        "output_type": "display_data",
+        "data": data,
+        "metadata": metadata or {},
+    }
+
+
+def execute_result_output(
+    data: dict, execution_count: int | None = None, metadata: dict | None = None
+) -> dict:
+    """An ``execute_result`` output (the value of the last expression)."""
+    return {
+        "output_type": "execute_result",
+        "data": data,
+        "execution_count": execution_count,
+        "metadata": metadata or {},
+    }
+
+
+def error_output(ename: str, evalue: str, traceback: list[str] | None = None) -> dict:
+    """An ``error`` output (an exception raised by a code cell)."""
+    return {
+        "output_type": "error",
+        "ename": ename,
+        "evalue": evalue,
+        "traceback": traceback or [],
+    }
+
+
+# --------------------------------------------------------------------------- #
+# Cells
+# --------------------------------------------------------------------------- #
+@dataclass
+class CodeCell:
+    """A code cell with optional outputs."""
+
+    source: Source
+    execution_count: int | None = None
+    outputs: list[dict] = field(default_factory=list)
+    metadata: dict = field(default_factory=dict)
+
+    def to_dict(self) -> dict:
+        return {
+            "cell_type": "code",
+            "execution_count": self.execution_count,
+            "metadata": dict(self.metadata),
+            "source": _norm_source(self.source),
+            "outputs": [dict(o) for o in self.outputs],
+        }
+
+
+@dataclass
+class MarkdownCell:
+    """A markdown cell."""
+
+    source: Source
+    metadata: dict = field(default_factory=dict)
+
+    def to_dict(self) -> dict:
+        return {
+            "cell_type": "markdown",
+            "metadata": dict(self.metadata),
+            "source": _norm_source(self.source),
+        }
+
+
+@dataclass
+class RawCell:
+    """A raw cell (rendered verbatim)."""
+
+    source: Source
+    metadata: dict = field(default_factory=dict)
+
+    def to_dict(self) -> dict:
+        return {
+            "cell_type": "raw",
+            "metadata": dict(self.metadata),
+            "source": _norm_source(self.source),
+        }
+
+
+Cell = Union[CodeCell, MarkdownCell, RawCell]
+
+
+# --------------------------------------------------------------------------- #
+# Notebook
+# --------------------------------------------------------------------------- #
+@dataclass
+class Notebook:
+    """A minimal nbformat v4 notebook builder."""
+
+    cells: list[Cell] = field(default_factory=list)
+    metadata: dict = field(default_factory=dict)
+    nbformat: int = 4
+    nbformat_minor: int = 4
+
+    def add(self, cell: Cell) -> "Notebook":
+        """Append a cell and return ``self`` for chaining."""
+        self.cells.append(cell)
+        return self
+
+    def to_dict(self) -> dict:
+        return {
+            "cells": [c.to_dict() for c in self.cells],
+            "metadata": dict(self.metadata),
+            "nbformat": self.nbformat,
+            "nbformat_minor": self.nbformat_minor,
+        }
+
+    def to_json(self, *, indent: int | None = None) -> str:
+        return json.dumps(self.to_dict(), indent=indent)
+
+
+def load_notebook(path: Union[str, Path]) -> dict:
+    """Read a ``.ipynb`` file from disk and return its parsed ``dict``."""
+    return json.loads(Path(path).read_text(encoding="utf-8"))
+
+
+def notebook_from_url(url: str, **fetch_options: Any) -> dict:
+    """Build the ``{"filePath": url}`` reference understood by the viewer.
+
+    Note: ``fetch_options`` are accepted for symmetry but should be passed to the
+    component's ``fetch_options`` prop, not embedded in the notebook reference.
+    """
+    ref: dict[str, Any] = {"filePath": url}
+    return ref

reflex_jupyter_renderer_react-0.1.0.dist-info/METADATA

@@ -0,0 +1,248 @@
+Metadata-Version: 2.4
+Name: reflex-jupyter-renderer-react
+Version: 0.1.0
+Summary: A native Reflex component wrapping jupyter-renderer-react to render Jupyter notebooks (.ipynb) in pure Python.
+Author-email: Ernesto Crespo <ecrespo@gmail.com>
+License: MIT
+Project-URL: Homepage, https://github.com/ecrespo/reflex-jupyter-renderer-react
+Project-URL: Repository, https://github.com/ecrespo/reflex-jupyter-renderer-react
+Project-URL: Issues, https://github.com/ecrespo/reflex-jupyter-renderer-react/issues
+Project-URL: Documentation, https://github.com/ecrespo/reflex-jupyter-renderer-react#readme
+Project-URL: Changelog, https://github.com/ecrespo/reflex-jupyter-renderer-react/releases
+Project-URL: PyPI, https://pypi.org/project/reflex-jupyter-renderer-react/
+Project-URL: Upstream, https://github.com/iomete/jupyter-renderer-react
+Keywords: reflex,reflex-custom-components,jupyter,notebook,ipynb,renderer,react,component,visualization
+Classifier: Development Status :: 4 - Beta
+Classifier: Programming Language :: Python :: 3
+Classifier: License :: OSI Approved :: MIT License
+Classifier: Operating System :: OS Independent
+Requires-Python: >=3.10
+Description-Content-Type: text/markdown
+License-File: LICENSE
+Requires-Dist: reflex>=0.8.0
+Provides-Extra: dev
+Requires-Dist: pytest>=8.0; extra == "dev"
+Requires-Dist: build; extra == "dev"
+Requires-Dist: ruff; extra == "dev"
+Dynamic: license-file
+
+# reflex-jupyter-renderer-react
+
+[![PyPI version](https://img.shields.io/pypi/v/reflex-jupyter-renderer-react.svg)](https://pypi.org/project/reflex-jupyter-renderer-react/)
+[![Python versions](https://img.shields.io/pypi/pyversions/reflex-jupyter-renderer-react.svg)](https://pypi.org/project/reflex-jupyter-renderer-react/)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/ecrespo/reflex-jupyter-renderer-react/blob/main/LICENSE)
+[![GitHub](https://img.shields.io/badge/GitHub-ecrespo%2Freflex--jupyter--renderer--react-181717?logo=github)](https://github.com/ecrespo/reflex-jupyter-renderer-react)
+
+- **Source:** https://github.com/ecrespo/reflex-jupyter-renderer-react
+- **PyPI:** https://pypi.org/project/reflex-jupyter-renderer-react/
+- **Issues:** https://github.com/ecrespo/reflex-jupyter-renderer-react/issues
+- **Upstream React library:** https://github.com/iomete/jupyter-renderer-react
+
+A native [Reflex](https://reflex.dev/) component that wraps the
+[`jupyter-renderer-react`](https://github.com/iomete/jupyter-renderer-react) React
+library, so you can render **Jupyter notebooks (`.ipynb`)** in a Reflex app —
+with syntax highlighting, markdown, rich outputs, theming, collapsible cells and
+copy-to-clipboard — in **pure Python**. No HTML, no `iframe`, no hand-written
+JavaScript.
+
+```python
+import reflex as rx
+from reflex_jupyter_renderer_react import (
+    jupyter_notebook_viewer, Notebook, MarkdownCell, CodeCell, stream_output,
+)
+
+nb = Notebook(cells=[
+    MarkdownCell("# Hello, notebook"),
+    CodeCell("print('hi')", execution_count=1, outputs=[stream_output("hi\n")]),
+])
+
+def index() -> rx.Component:
+    return jupyter_notebook_viewer(notebook=nb.to_dict(), theme="dark")
+
+app = rx.App()
+app.add_page(index)
+```
+
+## Why a native component?
+
+| iframe / pre-rendered HTML | native component (this package) |
+|---|---|
+| Isolated from app state | Wired into Reflex state via events (`on_file_load`, `on_error`, …) |
+| Tied to static files/routes | Reusable, `pip install`-able |
+| Untyped JSON edited by hand | Typed Python builders for notebooks |
+| External hosting / manual embedding | npm dependency resolved by Reflex automatically |
+
+## Install
+
+```bash
+pip install reflex-jupyter-renderer-react
+# or, with uv:
+uv add reflex-jupyter-renderer-react
+# or, from this repo (editable):
+uv pip install -e .
+```
+
+Reflex installs the underlying npm package (`jupyter-renderer-react`) into the
+compiled frontend automatically on the first `reflex run`.
+
+## Usage
+
+### Three ways to supply a notebook
+
+```python
+from reflex_jupyter_renderer_react import (
+    jupyter_notebook_viewer, JupyterNotebookViewer, Notebook, MarkdownCell, CodeCell,
+    load_notebook,
+)
+
+# 1) Typed Python builders
+nb = Notebook(cells=[MarkdownCell("# Title"), CodeCell("1 + 1", execution_count=1)])
+jupyter_notebook_viewer(notebook=nb.to_dict())
+
+# 2) A raw JSON string
+jupyter_notebook_viewer(notebook='{"cells": [], "nbformat": 4, "nbformat_minor": 4}')
+# or: JupyterNotebookViewer.from_json(json_str)
+
+# 3) Load from a URL or from disk
+JupyterNotebookViewer.from_url("https://example.com/notebook.ipynb")
+jupyter_notebook_viewer(notebook=load_notebook("assets/demo-example.ipynb"))
+```
+
+### Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `notebook` | `dict \| str` | required | Parsed dict, JSON string, or `{"filePath": "..."}`. |
+| `theme` | `str \| dict` | `"light"` | `"light"`, `"dark"`, or a custom theme object. |
+| `show_cell_numbers` | `bool` | `True` | Show execution count for code cells. |
+| `show_outputs` | `bool` | `True` | Render cell outputs. |
+| `collapsible` | `bool` | `False` | Allow cells to collapse. |
+| `copyable` | `bool` | `True` | Copy button on code cells. |
+| `class_names` | `dict` | `{}` | Per-part class names (`classNames`). |
+| `styles` | `dict` | `{}` | Per-part inline styles (`styles`). |
+| `fetch_options` | `dict` | `{}` | `{"headers": {...}, "timeout": 10000}` for URL loading. |
+
+> Reflex converts `snake_case` props to `camelCase` automatically
+> (`show_cell_numbers` → `showCellNumbers`).
+
+### Events → Python
+
+```python
+class State(rx.State):
+    status: str = "idle"
+
+    @rx.event
+    def loaded(self, notebook: dict):
+        self.status = f"{len(notebook.get('cells', []))} cells loaded"
+
+    @rx.event
+    def failed(self, message: str):
+        self.status = f"error: {message}"
+
+JupyterNotebookViewer.from_url(
+    "https://example.com/notebook.ipynb",
+    fetch_options={"timeout": 10000},
+    on_file_load=State.loaded,
+    on_file_error=State.failed,
+)
+```
+
+| Event | Payload | Fires when |
+|---|---|---|
+| `on_file_load` | `notebook: dict` | A notebook is fetched from a `filePath`. |
+| `on_file_error` | `message: str` | File loading fails (network / 404 / timeout). |
+| `on_error` | `message: str` | Parsing / rendering fails. |
+
+## Demo app
+
+A full demo lives in [`jupyter_renderer_react_demo/`](jupyter_renderer_react_demo)
+and exercises every feature (typed builders, JSON string, URL loading with events,
+custom styles, and live theme/prop toggles).
+
+```bash
+uv pip install -e .
+cd jupyter_renderer_react_demo
+uv run reflex run
+```
+
+## Building notebooks in Python
+
+```python
+from reflex_jupyter_renderer_react import (
+    Notebook, MarkdownCell, CodeCell,
+    stream_output, execute_result_output, error_output,
+)
+
+nb = Notebook(cells=[
+    MarkdownCell("# Report"),
+    CodeCell("print('hi')", execution_count=1, outputs=[stream_output("hi\n")]),
+    CodeCell("2 ** 10", execution_count=2,
+             outputs=[execute_result_output({"text/plain": "1024"}, execution_count=2)]),
+    CodeCell("1/0", execution_count=3,
+             outputs=[error_output("ZeroDivisionError", "division by zero")]),
+])
+data = nb.to_dict()
+```
+
+The data-model layer (`Notebook`, cells, output factories, `load_notebook`) imports
+**without Reflex installed**, so it is usable in plain scripts and unit tests.
+
+## Naming note
+
+The upstream project has some naming inconsistencies. This wrapper centralizes
+them in overridable constants and defaults to the **public, documented contract**:
+
+| Source | Name |
+|---|---|
+| Public README usage | `JupyterNotebookViewer` |
+| `src/index.ts` export | `JupiterNotebookViewer` (sic) |
+| `package.json` name | `@iomete/jupyter-renderer-react` (GitHub registry) |
+
+Defaults: `library = "jupyter-renderer-react"`, `tag = "JupyterNotebookViewer"`.
+To retarget the scoped package or the source-spelled tag:
+
+```python
+import reflex_jupyter_renderer_react.jupyter_renderer_react as j
+j.JupyterNotebookViewer.library = "@iomete/jupyter-renderer-react"
+j.JupyterNotebookViewer.tag = "JupiterNotebookViewer"
+```
+
+You can also pin a version via `LIBRARY_VERSION` in
+`custom_components/reflex_jupyter_renderer_react/jupyter_renderer_react.py`.
+
+## Development
+
+This project follows the Reflex **custom component** workflow and uses **`uv`**.
+
+```bash
+uv venv
+uv pip install -e ".[dev]"
+uv run pytest                 # run the tests
+
+# Publish (custom component flow)
+reflex component build        # -> dist/
+uv publish                    # or: twine upload dist/*
+reflex component share        # list in the Reflex gallery
+```
+
+See [`specs/`](specs) for the full Spec-Driven Design documentation: PRD,
+architecture, API, data-model schema, and the phased implementation plan & tasks.
+
+## Project structure
+
+```
+reflex-jupyter-renderer-react/
+├── custom_components/reflex_jupyter_renderer_react/
+│   ├── __init__.py
+│   ├── jupyter_renderer_react.py   # the Reflex component
+│   └── models.py                   # dependency-free notebook builders
+├── jupyter_renderer_react_demo/    # runnable demo app
+├── tests/                          # data-model + component contract tests
+├── specs/                          # SDD: prd / technical / api / data-model / plans
+├── pyproject.toml
+├── README.md · CHANGELOG.md · LICENSE
+```
+
+## License
+
+MIT © Ernesto Crespo. The upstream `jupyter-renderer-react` library is also MIT.

reflex_jupyter_renderer_react-0.1.0.dist-info/RECORD

@@ -0,0 +1,9 @@
+reflex_jupyter_renderer_react/__init__.py,sha256=ZRgk0_6LRFpB58H2SxRfXjkjDxS9Vy3hxvUVdFLWhDU,2123
+reflex_jupyter_renderer_react/jupyter_renderer_react.py,sha256=qyURfGUmzQjFmiI5E-b8xM9EOXQuJtUe-OznJBxYa_Y,7285
+reflex_jupyter_renderer_react/jupyter_renderer_react.pyi,sha256=n48503Ute65FmKsSaewHwDBg3cDan1Dn21WPB5FyA2c,6989
+reflex_jupyter_renderer_react/models.py,sha256=s30IyNZ3nJu4kgufX_jWmYai9TH6LBwqwpfZiexjDls,5558
+reflex_jupyter_renderer_react-0.1.0.dist-info/licenses/LICENSE,sha256=ikDZVzB6LJXytfIXkllDZj9ningVU9BduOAcL8jLKYI,1071
+reflex_jupyter_renderer_react-0.1.0.dist-info/METADATA,sha256=kA1HhYAnVflUkPc66DBP3mPJF7NMKobTHy4tMM96hJs,9424
+reflex_jupyter_renderer_react-0.1.0.dist-info/WHEEL,sha256=aeYiig01lYGDzBgS8HxWXOg3uV61G9ijOsup-k9o1sk,91
+reflex_jupyter_renderer_react-0.1.0.dist-info/top_level.txt,sha256=-2CTb1FYe7rQMBxmX9w38zKg3_PFVTk70dHMb0EWhfc,30
+reflex_jupyter_renderer_react-0.1.0.dist-info/RECORD,,

reflex_jupyter_renderer_react-0.1.0.dist-info/WHEEL

@@ -0,0 +1,5 @@
+Wheel-Version: 1.0
+Generator: setuptools (82.0.1)
+Root-Is-Purelib: true
+Tag: py3-none-any
+

reflex_jupyter_renderer_react-0.1.0.dist-info/licenses/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Ernesto Crespo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

reflex_jupyter_renderer_react-0.1.0.dist-info/top_level.txt

@@ -0,0 +1 @@
+reflex_jupyter_renderer_react