Merge branch 'main' into feat/esm-first

.github/workflows/ci.yml

@@ -0,0 +1,47 @@
+name: CI
+
+on:
+  push:
+    branches: [main, beta]
+  pull_request:
+    types: [opened, synchronize, reopened]
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  ci:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        command:
+          [
+            'yarn workspace overlay-kit run test',
+            'yarn workspace overlay-kit run test:attw',
+            'yarn workspace overlay-kit run test:publint',
+            'yarn lint',
+            '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',
+          ]
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'yarn'
+
+      - name: Install Dependencies
+        run: yarn install
+
+      - name: Build Package
+        run: yarn workspace overlay-kit run build
+
+      - name: Run command
+        run: ${{ matrix.command }}
+      - if: matrix.command == 'yarn workspace overlay-kit run test'
+        uses: codecov/codecov-action@v4
+        env:
+          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}

README-ko_kr.md

@@ -1,6 +1,6 @@
 ![](./docs/public/og.png)
 
-# overlay-kit · [![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/toss/overlay-kit/blob/main/LICENSE)
+# overlay-kit · [![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/toss/overlay-kit/blob/main/LICENSE) [![codecov](https://codecov.io/gh/toss/overlay-kit/graph/badge.svg?token=JBEAQTL7XK)](https://codecov.io/gh/toss/overlay-kit)
 
 [English](https://github.com/toss/overlay-kit/blob/main/README.md) | 한국어
 
@@ -9,7 +9,7 @@ overlay-kit은 React에서 오버레이를 선언적으로 관리하기 위한 
 ```tsx
 import { overlay } from 'overlay-kit';
 
-<Button 
+<Button
   onClick={() => {
     overlay.open(({ isOpen, close }) => {
       return <Dialog open={isOpen} onClose={close} />;
@@ -27,7 +27,6 @@ overlay-kit은 다음과 같은 기능을 제공해요.
 - **Promise 통합**: overlay-kit과 Promise를 함께 사용하면 오버레이로부터 결괏값을 쉽게 가져올 수 있어요.
 - **견고한 내장 타입**: overlay-kit은 모든 함수에 대해서 견고한 타입을 제공해요. 타입 안정성이 높고, 개발자 경험도 좋죠.
 
-
 ## License
 
 MIT © Viva Republica, Inc. 자세한 내용은 [LICENSE](https://github.com/toss/overlay-kit/blob/main/LICENSE)를 참고하세요.

README.md

@@ -1,6 +1,6 @@
 ![](./docs/public/og.png)
 
-# overlay-kit · [![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/toss/overlay-kit/blob/main/LICENSE)
+# overlay-kit · [![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/toss/overlay-kit/blob/main/LICENSE) [![codecov](https://codecov.io/gh/toss/overlay-kit/graph/badge.svg?token=JBEAQTL7XK)](https://codecov.io/gh/toss/overlay-kit)
 
 English | [한국어](https://github.com/toss/overlay-kit/blob/main/README-ko_kr.md)
 
@@ -9,7 +9,7 @@ overlay-kit is a library that lets you manage overlays in a simple and declarati
 ```tsx
 import { overlay } from 'overlay-kit';
 
-<Button 
+<Button
   onClick={() => {
     overlay.open(({ isOpen, close }) => {
       return <Dialog open={isOpen} onClose={close} />;
@@ -27,7 +27,6 @@ Here are the features overlay-kit provides:
 - **Promise Integration**: overlay-kit is easy to use with promises when getting results from overlays.
 - **Robust Built-in Types**: overlay-kit offers robust types for all functions, ensuring type safety and enhancing the developer experience.
 
-
 ## License
 
 MIT © Viva Republica, Inc. See [LICENSE](https://github.com/toss/overlay-kit/blob/main/LICENSE) for details.

codecov.yml

@@ -0,0 +1,26 @@
+coverage:
+  status:
+    patch: off
+    project:
+      default:
+        target: 100%
+        threshold: 30%
+
+comment:
+  layout: "header, reach, diff, flags, components"
+  behavior: default
+  require_changes: false
+  require_base: false
+  require_head: true
+  hide_project_coverage: false
+
+ignore:
+  - "**/*.test-d.*"
+  - "**/test-utils/*"
+
+component_management:
+  individual_components:
+    - component_id: overlay-kit
+      name: "overlay-kit"
+      paths:
+        - packages/**

examples/react-16/framer-motion/package.json

@@ -12,15 +12,15 @@
   },
   "dependencies": {
     "framer-motion": "^6",
-    "overlay-kit": "npm:overlay-kit@1.4.0-canary.2407260853",
+    "overlay-kit": "workspace:*",
     "react": "^16.8",
     "react-dom": "^16.8"
   },
   "devDependencies": {
     "@types/react": "^16.8",
     "@types/react-dom": "^16.8",
-    "@vitejs/plugin-react": "^4.3.0",
+    "@vitejs/plugin-react": "^4.3.4",
     "typescript": "^5.4.5",
-    "vite": "^5.2.13"
+    "vite": "^6.0.3"
   }
 }

examples/react-16/framer-motion/src/demo.tsx

@@ -1,6 +1,6 @@
 import { overlay } from 'overlay-kit';
 import { useState } from 'react';
-import { Modal } from './components/modal';
+import { Modal } from './components/modal.tsx';
 
 export function Demo() {
   return (

examples/react-16/framer-motion/src/main.tsx

@@ -1,7 +1,7 @@
 import { OverlayProvider } from 'overlay-kit';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Demo } from './demo';
+import { Demo } from './demo.tsx';
 
 ReactDOM.render(
   <React.StrictMode>

examples/react-16/framer-motion/tsconfig.json

@@ -1,13 +1,24 @@
 {
   "compilerOptions": {
-    "lib": ["ESNext", "DOM"],
-    "target": "es2016",
-    "module": "commonjs",
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "strict": true,
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
     "skipLibCheck": true,
-    "jsx": "preserve"
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
   },
   "include": ["src"]
 }

examples/react-17/framer-motion/package.json

@@ -12,15 +12,15 @@
   },
   "dependencies": {
     "framer-motion": "^6",
-    "overlay-kit": "npm:overlay-kit@1.4.0-canary.2407260853",
+    "overlay-kit": "workspace:*",
     "react": "^17",
     "react-dom": "^17"
   },
   "devDependencies": {
     "@types/react": "^17",
     "@types/react-dom": "^17",
-    "@vitejs/plugin-react": "^4.3.0",
+    "@vitejs/plugin-react": "^4.3.4",
     "typescript": "^5.4.5",
-    "vite": "^5.2.13"
+    "vite": "^6.0.3"
   }
 }

examples/react-17/framer-motion/src/demo.tsx

@@ -1,6 +1,6 @@
 import { overlay } from 'overlay-kit';
 import { useState } from 'react';
-import { Modal } from './components/modal';
+import { Modal } from './components/modal.tsx';
 
 export function Demo() {
   return (

examples/react-17/framer-motion/src/main.tsx

@@ -1,7 +1,7 @@
 import { OverlayProvider } from 'overlay-kit';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Demo } from './demo';
+import { Demo } from './demo.tsx';
 
 ReactDOM.render(
   <React.StrictMode>

examples/react-17/framer-motion/tsconfig.json

@@ -1,13 +1,24 @@
 {
   "compilerOptions": {
-    "lib": ["ESNext", "DOM"],
-    "target": "es2016",
-    "module": "commonjs",
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "strict": true,
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
     "skipLibCheck": true,
-    "jsx": "preserve"
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
   },
   "include": ["src"]
 }

examples/react-18/framer-motion/package.json

@@ -12,15 +12,15 @@
   },
   "dependencies": {
     "framer-motion": "^11.2.10",
-    "overlay-kit": "workspace:^",
+    "overlay-kit": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
-    "@vitejs/plugin-react": "^4.3.0",
+    "@vitejs/plugin-react": "^4.3.4",
     "typescript": "^5.4.5",
-    "vite": "^5.2.13"
+    "vite": "^6.0.3"
   }
 }

examples/react-18/framer-motion/src/demo.tsx

@@ -1,6 +1,6 @@
 import { overlay } from 'overlay-kit';
 import { useState } from 'react';
-import { Modal } from './components/modal';
+import { Modal } from './components/modal.tsx';
 
 export function Demo() {
   return (

examples/react-18/framer-motion/src/main.tsx

@@ -1,7 +1,7 @@
 import { OverlayProvider } from 'overlay-kit';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { Demo } from './demo';
+import { Demo } from './demo.tsx';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>

examples/react-18/framer-motion/tsconfig.json

@@ -1,13 +1,24 @@
 {
   "compilerOptions": {
-    "lib": ["ESNext", "DOM"],
-    "target": "es2016",
-    "module": "commonjs",
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "strict": true,
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
     "skipLibCheck": true,
-    "jsx": "preserve"
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
   },
   "include": ["src"]
 }

packages/.gitignore

@@ -1 +1,2 @@
-dist
+dist
+coverage

packages/README.md

@@ -1,6 +1,6 @@
 ![](../docs/public/og.png)
 
-# overlay-kit · [![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/toss/overlay-kit/blob/main/LICENSE)
+# overlay-kit · [![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/toss/overlay-kit/blob/main/LICENSE) [![codecov](https://codecov.io/gh/toss/overlay-kit/graph/badge.svg?token=JBEAQTL7XK)](https://codecov.io/gh/toss/overlay-kit)
 
 English | [한국어](https://github.com/toss/overlay-kit/blob/main/README-ko_kr.md)
 
@@ -13,16 +13,16 @@ import { overlay } from 'overlay-kit';
   onClick={() => {
     overlay.open(({ isOpen, close }) => {
       return <Dialog open={isOpen} onClose={close} />;
-    });
+    })
   }}
 >
   Open
-</Button>;
+</Button>
 ```
 
 Here are the features overlay-kit provides:
 
-- **Hassle-free**: overlay-kit makes overlay management straightforward with a simple function call: just call `overlay.open(...)`. See [the overlay problem](https://overlay-kit.slash.page/motivation.html) for details.
+- **Hassle-free**: overlay-kit makes overlay management straightforward with a simple function call: just call `overlay.open(...)`. See [the code comparison](https://overlay-kit.slash.page/code-comparison.html) for details.
 - **Maximum Compatibility**: overlay-kit is compatible with the majority of overlay types. From Material UI to custom component libraries, overlay-kit can handle almost all types of overlays.
 - **Promise Integration**: overlay-kit is easy to use with promises when getting results from overlays.
 - **Robust Built-in Types**: overlay-kit offers robust types for all functions, ensuring type safety and enhancing the developer experience.