chore: react 19

lerte · lerte · commit 77bcb3b9dae3 · 2024-12-08T00:37:32.000+08:00
diff --git a/packages/actify/package.json b/packages/actify/package.json
@@ -32,8 +32,7 @@
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@types/lodash": "^4.17.7",
-    "@types/node": "^20.12.7",
+    "@types/node": "^22.10.1",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
     "@typescript-eslint/eslint-plugin": "^8.12.2",
@@ -57,9 +56,9 @@
   },
   "dependencies": {
     "clsx": "^2.1.1",
-    "date-fns": "^3.6.0",
-    "framer-motion": "^11.11.17",
-    "lodash": "^4.17.21",
+    "date-fns": "^4.1.0",
+    "es-toolkit": "^1.29.0",
+    "motion": "12.0.0-alpha.2",
     "popmotion": "^11.0.5",
     "react-aria": "^3.36.0",
     "react-aria-components": "^1.5.0",
diff --git a/packages/actify/src/components/Accordion/AccordionContext.tsx b/packages/actify/src/components/Accordion/AccordionContext.tsx
@@ -1,4 +1,5 @@
 'use client'
+
 import React, { createContext, useContext } from 'react'
 
 export type AccordionProps = {
@@ -17,9 +18,9 @@ export const AccordionProvider = ({
   ...props
 }: AccordionProviderProps) => {
   return (
-    <AccordionContext.Provider value={{ ...props }}>
+    <AccordionContext value={{ ...props }}>
       {children}
-    </AccordionContext.Provider>
+    </AccordionContext>
   )
 }
 
diff --git a/packages/actify/src/components/BottomSheets/BottomSheetsContent.tsx b/packages/actify/src/components/BottomSheets/BottomSheetsContent.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { AnimatePresence, motion } from 'framer-motion'
+import { AnimatePresence, motion } from 'motion/react'
 import React, { useEffect, useState } from 'react'
 
 import clsx from 'clsx'
@@ -65,8 +65,8 @@ const BottomSheetsContent = ({
             exit={{
               transform: 'translateY(100%)'
             }}
-            // @ts-ignore
             className={styles['inner']}
+            // @ts-expect-error
             onClick={(e: Event) => e.stopPropagation()}
           >
             <div className={styles['grab']}>
diff --git a/packages/actify/src/components/BottomSheets/BottomSheetsContext.tsx b/packages/actify/src/components/BottomSheets/BottomSheetsContext.tsx
@@ -29,9 +29,9 @@ export const BottomSheetsProvider = ({
   })
 
   return (
-    <BottomSheetsContext.Provider value={{ open: value, setOpen: setValue }}>
+    <BottomSheetsContext value={{ open: value, setOpen: setValue }}>
       {children}
-    </BottomSheetsContext.Provider>
+    </BottomSheetsContext>
   )
 }
 
diff --git a/packages/actify/src/components/Carousel/CarouselContext.tsx b/packages/actify/src/components/Carousel/CarouselContext.tsx
@@ -44,7 +44,7 @@ export const CarouselProvider = ({
   const [intervalValue, setIntervalValue] = useState(interval)
 
   return (
-    <CarouselContext.Provider
+    <CarouselContext
       value={{
         control,
         infinite,
@@ -61,7 +61,7 @@ export const CarouselProvider = ({
       }}
     >
       {children}
-    </CarouselContext.Provider>
+    </CarouselContext>
   )
 }
 
diff --git a/packages/actify/src/components/Lists/List.tsx b/packages/actify/src/components/Lists/List.tsx
@@ -16,11 +16,11 @@ const List = (props: ListProps) => {
   const layoutId = useId()
 
   return (
-    <ListContext.Provider value={{ layoutId, transition }}>
+    <ListContext value={{ layoutId, transition }}>
       <ul {...rest} className={clsx(styles['ul'], className)}>
         {children}
       </ul>
-    </ListContext.Provider>
+    </ListContext>
   )
 }
 
diff --git a/packages/actify/src/components/NavigationDrawer/DrawerContext.tsx b/packages/actify/src/components/NavigationDrawer/DrawerContext.tsx
@@ -28,11 +28,11 @@ export const DrawerProvider = ({ children, ...props }: DrawerProviderProps) => {
   })
 
   return (
-    <DrawerContext.Provider
+    <DrawerContext
       value={{ placement, open: value, setOpen: setValue }}
     >
       {children}
-    </DrawerContext.Provider>
+    </DrawerContext>
   )
 }
 
diff --git a/packages/actify/src/components/Popover/Popover.tsx b/packages/actify/src/components/Popover/Popover.tsx
@@ -1,6 +1,6 @@
 import styles from './popover.module.css'
 
-import { motion } from 'framer-motion'
+import { motion } from 'motion/react'
 import {
   DismissButton,
   Overlay,
@@ -86,9 +86,9 @@ const Popover = (props: PopoverProps & React.RefAttributes<HTMLElement>) => {
   return (
     <Overlay>
       <div {...underlayProps} className={styles['underlay']} />
+      {/* @ts-expect-error */}
       <motion.div
         {...popoverProps}
-        // @ts-expect-error
         className={styles['popover']}
         initial={{
           height: 0
diff --git a/packages/actify/src/components/PopoverMenu/PopoverMenu.tsx b/packages/actify/src/components/PopoverMenu/PopoverMenu.tsx
@@ -143,13 +143,13 @@ export const PopoverMenu = (props: PopoverMenuProps) => {
   return (
     <div {...rest} ref={menuRef} style={style} className={classes}>
       <Elevation style={{ '--md-elevation-level': 2 } as React.CSSProperties} />
-      <PopoverMenuContext.Provider value={{ open, setOpen }}>
+      <PopoverMenuContext value={{ open, setOpen }}>
         <div className={styles['items']}>
           <div className={styles['item-padding']} ref={slotRef}>
             {children}
           </div>
         </div>
-      </PopoverMenuContext.Provider>
+      </PopoverMenuContext>
     </div>
   )
 }
diff --git a/packages/actify/src/components/SideSheets/SideSheetsContent.tsx b/packages/actify/src/components/SideSheets/SideSheetsContent.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { AnimatePresence, motion } from 'framer-motion'
+import { AnimatePresence, motion } from 'motion/react'
 import React, { useEffect, useState } from 'react'
 
 import clsx from 'clsx'
@@ -65,8 +65,8 @@ const SideSheetsContent = (props: ContentProps) => {
             exit={{
               transform: 'translateX(100%)'
             }}
-            // @ts-ignore
             className={styles['content-inner']}
+            // @ts-expect-error
             onClick={(e: Event) => e.stopPropagation()}
           >
             {children}
diff --git a/packages/actify/src/components/SideSheets/SideSheetsContext.tsx b/packages/actify/src/components/SideSheets/SideSheetsContext.tsx
@@ -28,11 +28,11 @@ export const SideSheetsProvider = ({
   })
 
   return (
-    <SideSheetsContext.Provider
+    <SideSheetsContext
       value={{ divider, open: value, setOpen: setValue }}
     >
       {children}
-    </SideSheetsContext.Provider>
+    </SideSheetsContext>
   )
 }
 
diff --git a/packages/actify/src/components/Tooltips/TooltipGroup.tsx b/packages/actify/src/components/Tooltips/TooltipGroup.tsx
@@ -23,9 +23,9 @@ const TooltipGroup = (props: TooltipGroupProps) => {
   const { children, placement } = props
 
   return (
-    <TooltipGroupContext.Provider value={{ groupId, placement }}>
+    <TooltipGroupContext value={{ groupId, placement }}>
       <LayoutGroup>{children}</LayoutGroup>
-    </TooltipGroupContext.Provider>
+    </TooltipGroupContext>
   )
 }
 
diff --git a/packages/actify/src/components/Tooltips/TooltipInner.tsx b/packages/actify/src/components/Tooltips/TooltipInner.tsx
@@ -67,11 +67,11 @@ const TooltipInner = (
       data-exiting={props.isExiting || undefined}
       style={{ ...overlayProps.style, ...renderProps.style }}
     >
-      <OverlayArrowContext.Provider
+      <OverlayArrowContext
         value={{ ...arrowProps, placement, ref: arrowRef }}
       >
         {renderProps.children}
-      </OverlayArrowContext.Provider>
+      </OverlayArrowContext>
     </div>
   )
 }
diff --git a/packages/actify/src/utils/utils.tsx b/packages/actify/src/utils/utils.tsx
@@ -123,8 +123,8 @@ export function Provider<A, B, C, D, E, F, G, H, I, J, K>({
   children
 }: ProviderProps<A, B, C, D, E, F, G, H, I, J, K>): JSX.Element {
   for (let [Context, value] of values) {
-    // @ts-ignore
-    children = <Context.Provider value={value}>{children}</Context.Provider>
+    // @ts-expect-error
+    children = <Context value={value}>{children}</Context>
   }
 
   return children as JSX.Element
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -29,9 +29,9 @@ export const BottomSheetsProvider = ({`
`29`	`29`	`})`
`30`	`30`
`31`	`31`	`return (`
`32`		`- <BottomSheetsContext.Provider value={{ open: value, setOpen: setValue }}>`
	`32`	`+ <BottomSheetsContext value={{ open: value, setOpen: setValue }}>`
`33`	`33`	`{children}`
`34`		`- </BottomSheetsContext.Provider>`
	`34`	`+ </BottomSheetsContext>`
`35`	`35`	`)`
`36`	`36`	`}`
`37`	`37`
Original file line number	Diff line number	Diff line change
`@@ -44,7 +44,7 @@ export const CarouselProvider = ({`
`44`	`44`	`const [intervalValue, setIntervalValue] = useState(interval)`
`45`	`45`
`46`	`46`	`return (`
`47`		`- <CarouselContext.Provider`
	`47`	`+ <CarouselContext`
`48`	`48`	`value={{`
`49`	`49`	`control,`
`50`	`50`	`infinite,`
`@@ -61,7 +61,7 @@ export const CarouselProvider = ({`
`61`	`61`	`}}`
`62`	`62`	`>`
`63`	`63`	`{children}`
`64`		`- </CarouselContext.Provider>`
	`64`	`+ </CarouselContext>`
`65`	`65`	`)`
`66`	`66`	`}`
`67`	`67`
Original file line number	Diff line number	Diff line change
`@@ -16,11 +16,11 @@ const List = (props: ListProps) => {`
`16`	`16`	`const layoutId = useId()`
`17`	`17`
`18`	`18`	`return (`
`19`		`- <ListContext.Provider value={{ layoutId, transition }}>`
	`19`	`+ <ListContext value={{ layoutId, transition }}>`
`20`	`20`	`<ul {...rest} className={clsx(styles['ul'], className)}>`
`21`	`21`	`{children}`
`22`	`22`	`</ul>`
`23`		`- </ListContext.Provider>`
	`23`	`+ </ListContext>`
`24`	`24`	`)`
`25`	`25`	`}`
`26`	`26`
Original file line number	Diff line number	Diff line change
`@@ -28,11 +28,11 @@ export const DrawerProvider = ({ children, ...props }: DrawerProviderProps) => {`
`28`	`28`	`})`
`29`	`29`
`30`	`30`	`return (`
`31`		`- <DrawerContext.Provider`
	`31`	`+ <DrawerContext`
`32`	`32`	`value={{ placement, open: value, setOpen: setValue }}`
`33`	`33`	`>`
`34`	`34`	`{children}`
`35`		`- </DrawerContext.Provider>`
	`35`	`+ </DrawerContext>`
`36`	`36`	`)`
`37`	`37`	`}`
`38`	`38`