Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: support react 19 #95

Merged
merged 9 commits into from
Dec 15, 2024
Merged

feat: support react 19 #95

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
a28b814
feat: support react 19
manudeli Dec 12, 2024
2c04002
Create shiny-cars-compare.md
manudeli Dec 12, 2024
903d963
chore: update
manudeli Dec 12, 2024
2941002
Merge remote-tracking branch 'origin/main' into feat/support-react19
manudeli Dec 14, 2024
8279f50
chore: add ci for @overlay-kit/framer-motion-react-19
manudeli Dec 14, 2024
e85bcf2
chore: update
manudeli Dec 14, 2024
e351751
chore: update
manudeli Dec 14, 2024
534ab55
Merge branch 'main' into feat/support-react19
manudeli Dec 15, 2024
f798c79
Merge branch 'main' into feat/support-react19
manudeli Dec 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion .changeset/config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,10 @@
"access": "restricted",
"baseBranch": "main",
"updateInternalDependencies": "patch",
"ignore": []
"ignore": [
"@overlay-kit/framer-motion-react-16",
"@overlay-kit/framer-motion-react-17",
"@overlay-kit/framer-motion-react-18",
"@overlay-kit/framer-motion-react-19"
]
}
5 changes: 5 additions & 0 deletions .changeset/shiny-cars-compare.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"overlay-kit": minor
---

feat: support react 19
1 change: 1 addition & 0 deletions .github/workflows/ci.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ jobs:
'yarn workspace @overlay-kit/framer-motion-react-16 run build',
'yarn workspace @overlay-kit/framer-motion-react-17 run build',
'yarn workspace @overlay-kit/framer-motion-react-18 run build',
'yarn workspace @overlay-kit/framer-motion-react-19 run build',
]
steps:
- uses: actions/checkout@v4
Expand Down
16 changes: 0 additions & 16 deletions examples/react-16/framer-motion/CHANGELOG.md
View file
Open in desktop

This file was deleted.

24 changes: 11 additions & 13 deletions examples/react-16/framer-motion/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,14 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
</head>

<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
</head>

<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>

</html>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
2 changes: 1 addition & 1 deletion examples/react-16/framer-motion/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@overlay-kit/framer-motion-react-16",
"private": true,
"version": "0.0.7",
"version": "0.0.0",
"type": "module",
"scripts": {
"predev": "yarn workspace overlay-kit build",
Expand Down
16 changes: 0 additions & 16 deletions examples/react-17/framer-motion/CHANGELOG.md
View file
Open in desktop

This file was deleted.

24 changes: 11 additions & 13 deletions examples/react-17/framer-motion/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,14 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
</head>

<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
</head>

<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>

</html>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
2 changes: 1 addition & 1 deletion examples/react-17/framer-motion/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@overlay-kit/framer-motion-react-17",
"private": true,
"version": "0.0.7",
"version": "0.0.0",
"type": "module",
"scripts": {
"predev": "yarn workspace overlay-kit build",
Expand Down
50 changes: 0 additions & 50 deletions examples/react-18/framer-motion/CHANGELOG.md
View file
Open in desktop

This file was deleted.

24 changes: 11 additions & 13 deletions examples/react-18/framer-motion/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,14 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
</head>

<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
</head>

<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>

</html>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
2 changes: 1 addition & 1 deletion examples/react-18/framer-motion/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@overlay-kit/framer-motion-react-18",
"private": true,
"version": "0.0.7",
"version": "0.0.0",
"type": "module",
"scripts": {
"predev": "yarn workspace overlay-kit build",
Expand Down
24 changes: 24 additions & 0 deletions examples/react-19/framer-motion/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
14 changes: 14 additions & 0 deletions examples/react-19/framer-motion/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
</head>

<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
26 changes: 26 additions & 0 deletions examples/react-19/framer-motion/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
{
"name": "@overlay-kit/framer-motion-react-19",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"predev": "yarn workspace overlay-kit build",
"dev": "yarn predev && vite",
"build": "tsc && vite build",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"framer-motion": "^11.14.1",
"overlay-kit": "workspace:^",
"react": "^19.0.0",
"react-dom": "^19.0.0"
},
"devDependencies": {
"@types/react": "^19.0.1",
"@types/react-dom": "^19.0.2",
"@vitejs/plugin-react": "^4.3.4",
"typescript": "^5.4.5",
"vite": "^5.2.13"
}
}
62 changes: 62 additions & 0 deletions examples/react-19/framer-motion/src/components/modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
import { AnimatePresence, motion, type Variants } from 'framer-motion';
import { useRef, type PropsWithChildren } from 'react';

type ModalProps = {
isOpen?: boolean;
onExit?: () => void;
};

export function Modal({ children, isOpen = false, onExit }: PropsWithChildren<ModalProps>) {
const prevIsOpenRef = useRef(isOpen);

if (isOpen !== prevIsOpenRef.current) {
prevIsOpenRef.current = isOpen;

if (prevIsOpenRef.current === false) {
setTimeout(() => onExit?.(), 300);
}
}

return (
<AnimatePresence>{isOpen === true && <ModalContent isOpen={isOpen}>{children}</ModalContent>}</AnimatePresence>
);
}

const MODAL_CONTENT_VARIANTS: Variants = {
hidden: { opacity: 0, scale: 0.75 },
show: { opacity: 1, scale: 1 },
};

function ModalContent({ children, isOpen }: PropsWithChildren<ModalProps>) {
return (
<div
style={{
zIndex: 100,
position: 'fixed',
top: 0,
left: 0,
bottom: 0,
width: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
<motion.section
variants={MODAL_CONTENT_VARIANTS}
initial="hidden"
exit="hidden"
animate={isOpen ? 'show' : 'hidden'}
style={{
padding: 120,
borderWidth: 1,
borderStyle: 'solid',
borderColor: 'gray',
borderRadius: 12,
}}
>
{children}
</motion.section>
</div>
);
}
Loading
Loading