From f4d5a08faf919c2af9222e71adeef4551b0734e5 Mon Sep 17 00:00:00 2001
From: TaiJuWu <33004323+TaiJuWu@users.noreply.github.com>
Date: Tue, 23 May 2023 05:00:38 +0800
Subject: [PATCH] feature: Add Chakra Transitions (#1058)

---
 pynecone/components/__init__.py              |  5 ++
 pynecone/components/disclosure/__init__.py   |  1 +
 pynecone/components/disclosure/transition.py | 70 ++++++++++++++++++++
 3 files changed, 76 insertions(+)
 create mode 100644 pynecone/components/disclosure/transition.py

diff --git a/pynecone/components/__init__.py b/pynecone/components/__init__.py
index 268dedbb3..c5d66c353 100644
--- a/pynecone/components/__init__.py
+++ b/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
diff --git a/pynecone/components/disclosure/__init__.py b/pynecone/components/disclosure/__init__.py
index 9c3c48f29..7a756c603 100644
--- a/pynecone/components/disclosure/__init__.py
+++ b/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
diff --git a/pynecone/components/disclosure/transition.py b/pynecone/components/disclosure/transition.py
new file mode 100644
index 000000000..d1d76c28f
--- /dev/null
+++ b/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