From c30a1737a635b52839effda5b2015ab8dd417d35 Mon Sep 17 00:00:00 2001
From: Jonghyeon Ko <jonghyeon@toss.im>
Date: Mon, 18 Nov 2024 18:06:04 +0900
Subject: [PATCH] feat(react-dom): add FadeIn

---
 examples/visualization/src/app/layout.tsx     |  3 ++
 .../src/app/react-dom/FadeIn/page.tsx         | 25 ++++++++++++++
 .../src/app/react-dom/InView/page.tsx         |  1 -
 packages/react-dom/src/FadeIn.tsx             | 34 +++++++++++++++++++
 packages/react-dom/src/index.ts               |  1 +
 5 files changed, 63 insertions(+), 1 deletion(-)
 create mode 100644 examples/visualization/src/app/react-dom/FadeIn/page.tsx
 create mode 100644 packages/react-dom/src/FadeIn.tsx

diff --git a/examples/visualization/src/app/layout.tsx b/examples/visualization/src/app/layout.tsx
index 649e13e50..4d891f734 100644
--- a/examples/visualization/src/app/layout.tsx
+++ b/examples/visualization/src/app/layout.tsx
@@ -51,6 +51,9 @@ export default function RootLayout({ children }: { children: React.ReactNode })
                 <li>
                   <Link href="/react-dom/InView">{`<InView/>`}</Link>
                 </li>
+                <li>
+                  <Link href="/react-dom/FadeIn">{`<FadeIn/>`}</Link>
+                </li>
               </details>
             </li>
             <li>
diff --git a/examples/visualization/src/app/react-dom/FadeIn/page.tsx b/examples/visualization/src/app/react-dom/FadeIn/page.tsx
new file mode 100644
index 000000000..6aa9973c2
--- /dev/null
+++ b/examples/visualization/src/app/react-dom/FadeIn/page.tsx
@@ -0,0 +1,25 @@
+'use client'
+
+import { Delay } from '@suspensive/react'
+import { FadeIn } from '@suspensive/react-dom'
+import { Spinner } from '~/components/uis'
+
+export default function Page() {
+  return (
+    <>
+      <Delay
+        ms={3000}
+        fallback={
+          <FadeIn delay={300} duration={1000}>
+            <Spinner />
+          </FadeIn>
+        }
+      >
+        Head:{' '}
+        <FadeIn as="span" duration={300}>
+          <h1>hello</h1>
+        </FadeIn>
+      </Delay>
+    </>
+  )
+}
diff --git a/examples/visualization/src/app/react-dom/InView/page.tsx b/examples/visualization/src/app/react-dom/InView/page.tsx
index 85ed5a92d..2667aecfc 100644
--- a/examples/visualization/src/app/react-dom/InView/page.tsx
+++ b/examples/visualization/src/app/react-dom/InView/page.tsx
@@ -6,7 +6,6 @@ export default function Page() {
   return (
     <div>
       {Array.from({ length: 200 }).map((_, i) => (
-        // eslint-disable-next-line @eslint-react/no-duplicate-key
         <InView key={i} threshold={0.8} delay={200} triggerOnce initialInView>
           {({ inView, ref }) => (
             <div ref={ref}>
diff --git a/packages/react-dom/src/FadeIn.tsx b/packages/react-dom/src/FadeIn.tsx
new file mode 100644
index 000000000..6ae68d989
--- /dev/null
+++ b/packages/react-dom/src/FadeIn.tsx
@@ -0,0 +1,34 @@
+import { type CSSProperties, type ComponentPropsWithoutRef, type ElementType } from 'react'
+import { useInView } from './useInView'
+
+type FadInBaseProps = {
+  delay?: number
+  duration?: number
+  timingFunction: CSSProperties['animationTimingFunction']
+}
+type FadeInProps<TAs extends ElementType> = {
+  as?: TAs
+} & Omit<ComponentPropsWithoutRef<TAs>, 'as' | keyof FadInBaseProps> &
+  FadInBaseProps
+
+export function FadeIn<TAs extends ElementType = 'div'>({
+  as,
+  delay = 0,
+  duration = 200,
+  timingFunction = 'linear',
+  ...rest
+}: FadeInProps<TAs>) {
+  const Component = as || 'div'
+  const { inView, ref } = useInView()
+  return (
+    <Component
+      {...rest}
+      ref={ref}
+      style={{
+        opacity: inView ? 1 : 0,
+        willChange: 'opacity',
+        transition: `opacity ${duration}ms ${timingFunction} ${delay}ms`,
+      }}
+    />
+  )
+}
diff --git a/packages/react-dom/src/index.ts b/packages/react-dom/src/index.ts
index 4ceebec90..0e0c494a3 100644
--- a/packages/react-dom/src/index.ts
+++ b/packages/react-dom/src/index.ts
@@ -1,2 +1,3 @@
 export { InView } from './InView'
 export { useInView } from './useInView'
+export { FadeIn } from './FadeIn'