feat: Support for React versions 16.8 and 17 (#72)

* chore: Add use-sync-external-store * fix: correct import path for useSyncExternalStore * chore: publish [email protected] * fix: update import path for useSyncExternalStore to use shim * chore: publish [email protected] * feat: add example for React versions 16.8 and 17 * chore: changeset * docs: update support version * Update late-forks-sneeze.md
toss · Jul 27, 2024 · 9776fff · 9776fff
1 parent ef551b1
commit 9776fff
Show file tree

Hide file tree

Showing 35 changed files with 798 additions and 18 deletions.
diff --git a/.changeset/late-forks-sneeze.md b/.changeset/late-forks-sneeze.md
@@ -0,0 +1,7 @@
+---
+'overlay-kit': minor
+---
+
+Support for React versions 16.8 and 17
+
+**Related Issue:** Fixes #43
diff --git a/docs/installation.md b/docs/installation.md
@@ -14,7 +14,7 @@ overlay-kit is available on [npm](https://npmjs.com/package/overlay-kit) for Nod
 
 ## Prerequisites
 
-- [React](https://react.dev/) version ^18
+- [React](https://react.dev/) version >=16.8
 
 Install overlay-kit with the following command:
 

diff --git a/docs/ko/installation.md b/docs/ko/installation.md
@@ -14,7 +14,7 @@ Node.js나 [Bun](https://bun.sh/)을 사용한다면, [npm](https://npmjs.com/pa
 
 ## 전제 조건
 
-- [React](https://react.dev/) 18 버전 이상이 설치되어 있어야 해요.
+- [React](https://react.dev/) 16.8 버전 이상이 설치되어 있어야 해요.
 
 ## 설치 방법
 

diff --git a/examples/framer-motion/.gitignore → examples/react-16/framer-motion/.gitignore b/examples/framer-motion/.gitignore → examples/react-16/framer-motion/.gitignore
diff --git a/examples/framer-motion/index.html → examples/react-16/framer-motion/index.html b/examples/framer-motion/index.html → examples/react-16/framer-motion/index.html
diff --git a/examples/react-16/framer-motion/package.json b/examples/react-16/framer-motion/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "@overlay-kit/framer-motion-react-16",
+  "private": true,
+  "version": "0.0.5",
+  "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": "^6",
+    "overlay-kit": "1.4.0-canary.2407260853",
+    "react": "^16.8",
+    "react-dom": "^16.8"
+  },
+  "devDependencies": {
+    "@types/react": "^16.8",
+    "@types/react-dom": "^16.8",
+    "@vitejs/plugin-react": "^4.3.0",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.13"
+  }
+}
diff --git a/...es/framer-motion/src/components/modal.tsx → ...16/framer-motion/src/components/modal.tsx b/...es/framer-motion/src/components/modal.tsx → ...16/framer-motion/src/components/modal.tsx
diff --git a/examples/framer-motion/src/demo.tsx → examples/react-16/framer-motion/src/demo.tsx b/examples/framer-motion/src/demo.tsx → examples/react-16/framer-motion/src/demo.tsx
diff --git a/examples/react-16/framer-motion/src/main.tsx b/examples/react-16/framer-motion/src/main.tsx
@@ -0,0 +1,13 @@
+import { OverlayProvider } from 'overlay-kit';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Demo } from './demo';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <OverlayProvider>
+      <Demo />
+    </OverlayProvider>
+  </React.StrictMode>,
+  document.getElementById('root')!
+);
diff --git a/examples/framer-motion/src/vite-env.d.ts → .../react-16/framer-motion/src/vite-env.d.ts b/examples/framer-motion/src/vite-env.d.ts → .../react-16/framer-motion/src/vite-env.d.ts
diff --git a/examples/framer-motion/tsconfig.json → ...ples/react-16/framer-motion/tsconfig.json b/examples/framer-motion/tsconfig.json → ...ples/react-16/framer-motion/tsconfig.json
diff --git a/examples/framer-motion/vite.config.ts → ...les/react-16/framer-motion/vite.config.ts b/examples/framer-motion/vite.config.ts → ...les/react-16/framer-motion/vite.config.ts
diff --git a/examples/react-17/framer-motion/.gitignore b/examples/react-17/framer-motion/.gitignore
@@ -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?
diff --git a/examples/react-17/framer-motion/index.html b/examples/react-17/framer-motion/index.html
@@ -0,0 +1,16 @@
+<!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>
diff --git a/examples/react-17/framer-motion/package.json b/examples/react-17/framer-motion/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "@overlay-kit/framer-motion-react-17",
+  "private": true,
+  "version": "0.0.5",
+  "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": "^6",
+    "overlay-kit": "1.4.0-canary.2407260853",
+    "react": "^17",
+    "react-dom": "^17"
+  },
+  "devDependencies": {
+    "@types/react": "^17",
+    "@types/react-dom": "^17",
+    "@vitejs/plugin-react": "^4.3.0",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.13"
+  }
+}
diff --git a/examples/react-17/framer-motion/src/components/modal.tsx b/examples/react-17/framer-motion/src/components/modal.tsx
@@ -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>
+  );
+}
diff --git a/examples/react-17/framer-motion/src/demo.tsx b/examples/react-17/framer-motion/src/demo.tsx
@@ -0,0 +1,55 @@
+import { overlay } from 'overlay-kit';
+import { useState } from 'react';
+import { Modal } from './components/modal';
+
+export function Demo() {
+  return (
+    <div>
+      <DemoWithState />
+      <DemoWithEsOverlay />
+    </div>
+  );
+}
+
+function DemoWithState() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div>
+      <p>Demo with useState</p>
+      <button onClick={() => setIsOpen(true)}>open modal</button>
+      <Modal isOpen={isOpen}>
+        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
+          <p>MODAL CONTENT</p>
+          <button onClick={() => setIsOpen(false)}>close modal</button>
+        </div>
+      </Modal>
+    </div>
+  );
+}
+
+function DemoWithEsOverlay() {
+  return (
+    <div>
+      <p>Demo with overlay-kit</p>
+      <button
+        onClick={() => {
+          overlay.open(({ isOpen, close, unmount }) => {
+            return (
+              <Modal isOpen={isOpen} onExit={unmount}>
+                <div
+                  style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}
+                >
+                  <p>MODAL CONTENT</p>
+                  <button onClick={close}>close modal</button>
+                </div>
+              </Modal>
+            );
+          });
+        }}
+      >
+        open modal
+      </button>
+    </div>
+  );
+}
diff --git a/examples/react-17/framer-motion/src/main.tsx b/examples/react-17/framer-motion/src/main.tsx
@@ -0,0 +1,13 @@
+import { OverlayProvider } from 'overlay-kit';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Demo } from './demo';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <OverlayProvider>
+      <Demo />
+    </OverlayProvider>
+  </React.StrictMode>,
+  document.getElementById('root')!
+);
diff --git a/examples/react-17/framer-motion/src/vite-env.d.ts b/examples/react-17/framer-motion/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/examples/react-17/framer-motion/tsconfig.json b/examples/react-17/framer-motion/tsconfig.json
@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "lib": ["ESNext", "DOM"],
+    "target": "es2016",
+    "module": "commonjs",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "jsx": "preserve"
+  },
+  "include": ["src"]
+}
diff --git a/examples/react-17/framer-motion/vite.config.ts b/examples/react-17/framer-motion/vite.config.ts
@@ -0,0 +1,7 @@
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+});
diff --git a/examples/react-18/framer-motion/.gitignore b/examples/react-18/framer-motion/.gitignore
@@ -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?
diff --git a/examples/framer-motion/CHANGELOG.md → examples/react-18/framer-motion/CHANGELOG.md b/examples/framer-motion/CHANGELOG.md → examples/react-18/framer-motion/CHANGELOG.md
diff --git a/examples/react-18/framer-motion/index.html b/examples/react-18/framer-motion/index.html
@@ -0,0 +1,16 @@
+<!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>
diff --git a/examples/framer-motion/package.json → examples/react-18/framer-motion/package.json b/examples/framer-motion/package.json → examples/react-18/framer-motion/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@overlay-kit/framer-motion",
+  "name": "@overlay-kit/framer-motion-react-18",
   "private": true,
   "version": "0.0.5",
   "type": "module",