feature: Add Chakra Transitions (#1058)

pynecone/components/__init__.py

@@ -66,6 +66,11 @@ tab_panel = TabPanel.create
 tab_panels = TabPanels.create
 tabs = Tabs.create
 visually_hidden = VisuallyHidden.create
+fade = Fade.create
+scale_fade = ScaleFade.create
+slide = Slide.create
+slide_fade = SlideFade.create
+collapse = Collapse.create
 alert = Alert.create
 alert_description = AlertDescription.create
 alert_icon = AlertIcon.create

pynecone/components/disclosure/__init__.py

@@ -8,6 +8,7 @@ from .accordion import (
     AccordionPanel,
 )
 from .tabs import Tab, TabList, TabPanel, TabPanels, Tabs
+from .transition import Collapse, Fade, ScaleFade, Slide, SlideFade
 from .visuallyhidden import VisuallyHidden
 
 __all__ = [f for f in dir() if f[0].isupper()]  # type: ignore

pynecone/components/disclosure/transition.py

@@ -0,0 +1,70 @@
+"""A transition Component."""
+from typing import Union
+
+from pynecone.components.libs.chakra import ChakraComponent
+from pynecone.utils import imports
+from pynecone.vars import ImportVar, Var
+
+
+class Transition(ChakraComponent):
+    """Base componemt of all transitions."""
+
+    in_: Var[bool]
+
+    unmount_on_exit: Var[bool] = False  # type: ignore
+
+    def _get_imports(self) -> imports.ImportDict:
+        return imports.merge_imports(
+            super()._get_imports(),
+            {"@chakra-ui/react": {ImportVar(tag="useDisclosure")}},
+        )
+
+
+class Fade(Transition):
+    """Fade component cab be used show and hide content of your app."""
+
+    tag = "Fade"
+
+
+class ScaleFade(Transition):
+    """Fade component can be scaled and reverse your app."""
+
+    tag = "ScaleFade"
+
+    unmount_on_exit: Var[bool] = False  # type: ignore
+
+    initial_scale: Var[float] = 0.95  # type: ignore
+
+    reverse: Var[bool] = True  # type: ignore
+
+
+class Slide(Transition):
+    """Side can be used show content below your app."""
+
+    tag = "Slide"
+
+    direction: Var[str] = "right"  # type: ignore
+
+
+class SlideFade(Transition):
+    """SlideFade component."""
+
+    tag = "SlideFade"
+
+    offsetX: Var[Union[str, int]] = 0  # type: ignore
+
+    offsetY: Var[Union[str, int]] = 8  # type: ignore
+
+    reverse: Var[bool] = True  # type: ignore
+
+
+class Collapse(Transition):
+    """Collapse component can collapse some content."""
+
+    tag = "Collapse"
+
+    animateOpacity: Var[bool] = True  # type: ignore
+
+    endingHeight: Var[str] = "auto"  # type: ignore
+
+    startingHeight: Var[Union[str, int]] = 0  # type: ignore