chore: replace

packages/app/src/components/collapse.tsx

@@ -1,7 +1,7 @@
-import type { Transition } from "./transition";
+import type { ReactTransition } from "@hiogawa/tiny-transition/dist/react";
 
 export function getCollapseProps(): Partial<
-  React.ComponentProps<typeof Transition>
+  React.ComponentProps<typeof ReactTransition>
 > {
   function uncollapse(el: HTMLElement) {
     if (el.firstElementChild) {

packages/app/src/components/drawer.tsx

@@ -5,10 +5,10 @@ import {
   useId,
   useInteractions,
 } from "@floating-ui/react";
+import { ReactTransition } from "@hiogawa/tiny-transition/dist/react";
 import { tinyassert } from "@hiogawa/utils";
 import type React from "react";
 import { RemoveScroll } from "react-remove-scroll";
-import { Transition } from "./transition";
 
 export function Drawer(props: {
   open: boolean;
@@ -27,12 +27,12 @@ export function Drawer(props: {
 
   return (
     <FloatingPortal id={id}>
-      <Transition
+      <ReactTransition
         show={props.open}
         className="fixed inset-0 duration-300 z-[100]"
       >
         {/* backdrop */}
-        <Transition
+        <ReactTransition
           appear
           show={props.open}
           className="transition duration-300 fixed inset-0 bg-black"
@@ -43,7 +43,7 @@ export function Drawer(props: {
         />
         {/* content */}
         <RemoveScroll className="fixed inset-0 overflow-hidden">
-          <Transition
+          <ReactTransition
             appear
             show={props.open}
             className="transition duration-300 transform inline-block h-full bg-colorBgContainer shadow-lg"
@@ -60,9 +60,9 @@ export function Drawer(props: {
             >
               {props.children}
             </div>
-          </Transition>
+          </ReactTransition>
         </RemoveScroll>
-      </Transition>
+      </ReactTransition>
     </FloatingPortal>
   );
 }

packages/app/src/components/modal.tsx

@@ -5,11 +5,11 @@ import {
   useId,
   useInteractions,
 } from "@floating-ui/react";
+import { ReactTransition } from "@hiogawa/tiny-transition/dist/react";
 import { tinyassert } from "@hiogawa/utils";
 import React from "react";
 import { RemoveScroll } from "react-remove-scroll";
 import { cls } from "../utils/misc";
-import { Transition } from "./transition";
 
 // copied from https://github.com/hi-ogawa/web-ext-tab-manager/blame/81710dead04859525b9c8be3a73a71926cae6da4/src/components/modal.tsx
 
@@ -31,13 +31,13 @@ export function Modal(props: {
 
   return (
     <FloatingPortal id={id}>
-      <Transition
+      <ReactTransition
         appear
         show={props.open}
         className="fixed inset-0 duration-300 z-100"
       >
         {/* backdrop */}
-        <Transition
+        <ReactTransition
           appear
           show={props.open}
           className="transition duration-300 fixed inset-0 bg-black"
@@ -48,7 +48,7 @@ export function Modal(props: {
         />
         {/* content */}
         <RemoveScroll className="fixed inset-0 overflow-hidden flex justify-center items-center">
-          <Transition
+          <ReactTransition
             appear
             show={props.open}
             className={cls(
@@ -68,9 +68,9 @@ export function Modal(props: {
             >
               {props.children}
             </div>
-          </Transition>
+          </ReactTransition>
         </RemoveScroll>
-      </Transition>
+      </ReactTransition>
     </FloatingPortal>
   );
 }

packages/app/src/components/popover.tsx

@@ -13,9 +13,9 @@ import {
   useId,
   useInteractions,
 } from "@floating-ui/react";
+import { ReactTransition } from "@hiogawa/tiny-transition/dist/react";
 import React from "react";
 import { cls } from "../utils/misc";
-import { Transition } from "./transition";
 
 interface PopoverRenderProps {
   open: boolean;
@@ -112,7 +112,7 @@ export function PopoverSimple({
         React.cloneElement(maybeCall(reference, [context]), props)
       }
       floating={({ props, open, arrowProps, context }) => (
-        <Transition
+        <ReactTransition
           show={open}
           className="transition duration-150"
           enterFrom="scale-80 opacity-0"
@@ -127,7 +127,7 @@ export function PopoverSimple({
             )}
             {maybeCall(floating, [context])}
           </div>
-        </Transition>
+        </ReactTransition>
       )}
     />
   );

packages/app/src/components/snackbar.tsx

@@ -1,3 +1,4 @@
+import { ReactTransition } from "@hiogawa/tiny-transition/dist/react";
 import { tw } from "../styles/tw";
 import { cls } from "../utils/misc";
 import { getCollapseProps } from "./collapse";
@@ -6,7 +7,6 @@ import {
   SnackbarItemState,
   useSnackbar,
 } from "./snackbar-hook";
-import { Transition } from "./transition";
 
 export function SnackbarConainer(props: {
   animationType: string;
@@ -55,7 +55,7 @@ function SnackbarAnimation1(
       {/*  */}
       {/* collpase transition */}
       {/*  */}
-      <Transition
+      <ReactTransition
         show={item.state === "show" || item.state === "dismiss-slide"}
         className="duration-300"
         onLeft={() => props.onDismiss3()}
@@ -64,7 +64,7 @@ function SnackbarAnimation1(
         {/*  */}
         {/* slide transtion */}
         {/*  */}
-        <Transition
+        <ReactTransition
           appear
           show={item.state === "show"}
           className="inline-block duration-500 transform py-1"
@@ -75,19 +75,19 @@ function SnackbarAnimation1(
           onLeft={() => props.onDismiss2()}
         >
           {props.children}
-        </Transition>
+        </ReactTransition>
         {/*  */}
         {/* dummy transition to auto trigger slide-out after timeout */}
         {/*  */}
-        <Transition
+        <ReactTransition
           appear
           show={item.state === "show"}
           className={props.durationClassName}
           enterFrom="opacity-0"
           enterTo="opacity-100"
           onEntered={() => props.onDismiss()}
         />
-      </Transition>
+      </ReactTransition>
     </>
   );
 }
@@ -109,11 +109,15 @@ function SnackbarAnimation2(
       {/*  */}
       {/* collpase transition */}
       {/*  */}
-      <Transition show={show} className="duration-300" {...getCollapseProps()}>
+      <ReactTransition
+        show={show}
+        className="duration-300"
+        {...getCollapseProps()}
+      >
         {/*  */}
         {/* slide/scale transtion */}
         {/*  */}
-        <Transition
+        <ReactTransition
           appear
           show={show}
           className="inline-block duration-300 transform py-1"
@@ -123,19 +127,19 @@ function SnackbarAnimation2(
           leaveTo="translate-y-[120%] scale-0 opacity-10"
         >
           {props.children}
-        </Transition>
+        </ReactTransition>
         {/*  */}
         {/* dummy transition to auto dismiss on timeout */}
         {/*  */}
-        <Transition
+        <ReactTransition
           appear
           show={show}
           className={props.durationClassName}
           enterFrom="opacity-0"
           enterTo="opacity-100"
           onEntered={() => props.onDismiss()}
         />
-      </Transition>
+      </ReactTransition>
     </>
   );
 }

packages/app/src/components/stories.tsx

@@ -1,3 +1,4 @@
+import { ReactTransition } from "@hiogawa/tiny-transition/dist/react";
 import { ANTD_VERS } from "@hiogawa/unocss-preset-antd";
 import { objectPickBy, range } from "@hiogawa/utils";
 import { Debug, toSetSetState, useDelay } from "@hiogawa/utils-react";
@@ -12,7 +13,6 @@ import { PopoverSimple } from "./popover";
 import { SnackbarConainer } from "./snackbar";
 import { useSnackbar } from "./snackbar-hook";
 import { TopProgressBar, useProgress } from "./top-progress-bar";
-import { Transition } from "./transition";
 
 export function StoryButton() {
   const [fab, setFabInner] = React.useState(new Set([0, 1]));
@@ -58,7 +58,7 @@ export function StoryButton() {
           </span>
         </h2>
         <div className="flex w-28">
-          <Transition
+          <ReactTransition
             appear
             show={fab.has(0)}
             className="transition duration-500"
@@ -73,9 +73,9 @@ export function StoryButton() {
             >
               <span className="i-ri-check-line w-6 h-6" />
             </button>
-          </Transition>
+          </ReactTransition>
           <div className="flex-1"></div>
-          <Transition
+          <ReactTransition
             // appear
             show={fab.has(1)}
             className="transition duration-500"
@@ -90,7 +90,7 @@ export function StoryButton() {
             >
               <span className="i-ri-close-line w-6 h-6" />
             </button>
-          </Transition>
+          </ReactTransition>
         </div>
         <pre>fab = {JSON.stringify([...fab])}</pre>
       </section>
@@ -327,7 +327,7 @@ export function StorySlide() {
           {show ? "Hide" : "Show"}
         </button>
         <div className="border h-[100px] overflow-hidden relative">
-          <Transition
+          <ReactTransition
             appear
             show={show}
             className="absolute top-2 right-2 inline-block duration-500 transform"
@@ -337,8 +337,8 @@ export function StorySlide() {
             leaveTo="translate-y-[-200%]"
           >
             <span className="border px-2 py-1">hello from top/right</span>
-          </Transition>
-          <Transition
+          </ReactTransition>
+          <ReactTransition
             appear
             show={show}
             className="absolute bottom-2 left-2 inline-block duration-500 transform"
@@ -348,7 +348,7 @@ export function StorySlide() {
             leaveTo="translate-x-[-200%]"
           >
             <span className="border px-2 py-1">hello from bottom/left</span>
-          </Transition>
+          </ReactTransition>
         </div>
       </section>
     </div>
@@ -370,14 +370,14 @@ export function StoryCollapse() {
         </button>
         <div className="flex flex-col p-3 border">
           <div>Fixed Div</div>
-          <Transition
+          <ReactTransition
             appear
             show={show}
             className="duration-500 overflow-hidden"
             {...getCollapseProps()}
           >
             <div className="pt-3">Collapsable Div</div>
-          </Transition>
+          </ReactTransition>
         </div>
       </section>
     </div>

packages/app/src/components/top-progress-bar.tsx

@@ -1,9 +1,9 @@
 import { FloatingPortal } from "@floating-ui/react";
+import { ReactTransition } from "@hiogawa/tiny-transition/dist/react";
 import { useDelay, usePrevious, useRafTime } from "@hiogawa/utils-react";
 import React from "react";
 import { tw } from "../styles/tw";
 import { cls } from "../utils/misc";
-import { Transition } from "./transition";
 
 // based on https://github.com/hi-ogawa/ytsub-v3/blob/859264f683e8d1c6331ca1c630101c037a78dd94/app/components/top-progress-bar.tsx#L1-L2
 
@@ -12,7 +12,7 @@ export function TopProgressBar({ loading }: { loading: boolean }) {
 
   return (
     <FloatingPortal>
-      <Transition
+      <ReactTransition
         show={typeof progress.value === "number"}
         className={cls(tw.fixed.left_0.top_0.w_full.$)}
         leave="transition-opacity duration-250"
@@ -38,7 +38,7 @@ export function TopProgressBar({ loading }: { loading: boolean }) {
             transitionDuration: progress.finishing ? "500" : "0",
           }}
         />
-      </Transition>
+      </ReactTransition>
     </FloatingPortal>
   );
 }