feat: add TransformItem close animation

src/Components/TextArea.tsx

@@ -1,11 +1,12 @@
 import styled from "styled-components";
 
 export const TextArea = styled.textarea`
-  flex: 1;
   border: none;
   resize: none;
   background-color: transparent;
   color: #fafafa;
+  width: 100%;
+  height: 100%;
   padding: 10px;
 
   &:focus {

src/Editor/index.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import { createRef, FC, useEffect, useRef } from "react";
 import { Editor as MonacoEditor } from "@monaco-editor/react";
 import { useRecoilState } from "recoil";
 import { EditorValueState } from "../GlobalStates/EditorValueState";
@@ -6,9 +6,26 @@ import { motion } from "framer-motion";
 
 export const Editor: FC = () => {
   const [value, setValue] = useRecoilState(EditorValueState)
+  const ref = useRef<any>()
+  const containerRef = createRef<HTMLDivElement>()
+
+  useEffect(() => {
+    window.addEventListener('resize', () => {
+      ref.current?.layout({ width: 0, height: 0 })
+
+      window.requestAnimationFrame(() => {
+        const rect = containerRef.current?.getBoundingClientRect()
+        ref.current?.layout({
+          width: rect?.width ?? 0,
+          height: rect?.height ?? 0
+        })
+      })
+    })
+  }, [])
 
   return (
     <motion.div
+      ref={containerRef}
       transition={{ delay: 1.5 }}
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}>
@@ -16,6 +33,7 @@ export const Editor: FC = () => {
         loading={<></>}
         value={value}
         language="yaml"
+        onMount={(v) => ref.current = v}
         onChange={(v) => setValue(v ?? '')}
         options={{
           automaticLayout: true,

src/TransformGridItem/index.tsx

@@ -15,6 +15,7 @@ import {
   WrappedTransformResult
 } from "../Transforms/Transform";
 import { useLocalStorage } from "@uidotdev/usehooks";
+import { AnimatePresence, motion } from "framer-motion";
 
 interface TransformGridItemProp {
   transform: WrappedTransform
@@ -169,13 +170,21 @@ export const TransformGridItem: FC<TransformGridItemProp> = ({ transform }) => {
         </div>
       </div>
 
-      {!closed &&
+      <AnimatePresence>
-        <TextArea
+        {!closed &&
-          readOnly
+          <motion.div
-          value={result.value}
+            initial={{ height: 0 }}
-          placeholder="(empty)"
+            animate={{ height: 200 }}
-          className={clsx(result.error && style.error)} />
+            exit={{ height: 0 }}
-      }
+            className={style.output}>
+            <TextArea
+              readOnly
+              value={result.value}
+              placeholder="(empty)"
+              className={clsx(result.error && style.error)} />
+          </motion.div>
+        }
+      </AnimatePresence>
     </div>
   )
 }

src/TransformGridItem/style.module.scss

@@ -4,11 +4,6 @@
   display: flex;
   padding: 10px;
   flex-direction: column;
-  min-height: 250px;
-
-  &.closed {
-    min-height: inherit;
-  }
 
   .toolbar {
     display: flex;
@@ -44,6 +39,11 @@
         gap: 6px;
       }
     }
+
+  }
+  
+  .output {
+    height: 200px;
   }
   
   .error {