Issue while wrapping React components

[pritam-dey3]

Describe the bug
I am trying to use Mantine component in my application using the following code.

class Collapse(pc.Component):
    library = "@mantine/core"
    tag = "Collapse"

    # variables
    in_: pc.Var[bool]  # type: ignore
    animate_opacity: pc.Var[bool]  # type: ignore
    transition_duration: pc.Var[int]  # type: ignore

    def get_triggers(self) -> Set[str]:
        """Get the event triggers for the component.

        Returns:
            The event triggers.
        """
        return super().get_triggers() | set({"on_transition_end"})

But I am facing this error

I suspect this is due to the fact that Mantine wants me to wrap my App with MantineProvider like this

But the generated _app.js has only ChakraProvider wrapped around it

Note that, Collapse was working for me for some earlier versions (I did not document the exact versions of either pynecone or Mantine).

To Reproduce
Try to wrap Collapse Mantine component.

Expected behavior
Users should be able to wrap any react component from any library

Specifics (please complete the following information):

• Python Version: 3.11
• Pynecone Version: 0.1.33
• OS: Windows WSL
• Browser (Optional): Chrome

[masenf]

This use case can actually be handled now, via the use of _get_app_wrap_components API.

import reflex as rx
from reflex.components.component import Component


class MantineProvider(rx.Component):
    library = "@mantine/core"
    tag = "MantineProvider"


mantine_provider = MantineProvider.create()
mantine_provider.special_props.update({rx.Var.create("withGlobalStyles"), rx.Var.create("withNormalizeCSS")})


class MantineComponent(rx.Component):
    library = "@mantine/core"

    @staticmethod
    def _get_app_wrap_components() -> dict[tuple[int, str], Component]:
        return {
            (10, "MantineProvider"): mantine_provider,
        }


class Collapse(MantineComponent):
    tag = "Collapse"

    # variables
    in_: rx.Var[bool]  # type: ignore
    animate_opacity: rx.Var[bool]  # type: ignore
    transition_duration: rx.Var[int]  # type: ignore

    def get_event_triggers(self):
        """Get the event triggers for the component.

        Returns:
            The event triggers.
        """
        return super().get_event_triggers() | {
            "on_transition_end": lambda: [],
        }


class Button(MantineComponent):
    tag = "Button"


class State(rx.State):
    is_opened: bool = False


def index():
    return rx.vstack(
        Button.create("Toggle", on_click=lambda: State.set_is_opened(~State.is_opened)),
        Collapse.create("foo", in_=State.is_opened),
    )


# Add state and page to the app.
app = rx.App()
app.add_page(index)
app.compile()