feat: global improvement on code, dependencies and flow

.github/workflows/nodejs.yml

@@ -8,48 +8,64 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [14.x, 16.x, 18.x]
+        node-version: [18.x, 20.x, 22.x]
 
     steps:
-    - uses: actions/checkout@v1
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
-      with:
-        node-version: ${{ matrix.node-version }}
-    - name: yarn install and test
-      run: |
-        yarn
-        yarn test
-      env:
-        CI: "true"
+      - name: Check out code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 2
+
+      - uses: pnpm/action-setup@v3
+        with:
+          version: 10
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: "pnpm"
+
+      - name: Install dependencies
+        run: pnpm install
+        env:
+          CI: "true"
+
+      - name: Test
+        run: pnpm test
 
   release:
     needs: tests
     runs-on: ubuntu-latest
-    if: "!contains(github.event.head_commit.message, 'ci skip') && !contains(github.event.head_commit.message, 'skip ci')"
+    if: |
+      !contains(github.event.head_commit.message, 'ci skip') && !contains(github.event.head_commit.message, 'skip ci')
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
       - name: Prepare repository
         run: git fetch --unshallow --tags
 
-      - name: Use Node.js 16.x
-        uses: actions/setup-node@v1
+      - name: Use Node.js 20.x
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20.x
+
+      - uses: pnpm/action-setup@v3
         with:
-          node-version: 16.x
+          version: 10
 
       - name: Cache node modules
-        uses: actions/cache@v1
+        uses: actions/cache@v4
         with:
           path: node_modules
-          key: yarn-deps-${{ hashFiles('yarn.lock') }}
+          key: pnpm-deps-${{ hashFiles('pnpm-lock.yaml') }}
           restore-keys: |
-            yarn-deps-${{ hashFiles('yarn.lock') }}
+            pnpm-deps-${{ hashFiles('pnpm-lock.yaml') }}
 
       - name: Create Release
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
         run: |
-          yarn install --frozen-lockfile
+          pnpm install --frozen-lockfile
           npx auto shipit

.github/workflows/pkg-pr-new.yml

@@ -0,0 +1,39 @@
+# npx pkg-pr-new publish
+name: PR Preview
+on:
+  pull_request:
+    types: [opened, synchronize, labeled]
+  pull_request_review:
+    types: [submitted]
+
+jobs:
+  deploy-preview:
+    name: Deploy to pkg.pr.new
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v3
+        with:
+          version: 10
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build package
+        run: pnpm build
+
+      - name: Set package version
+        run: |
+          pnpm pkg set version=0.0.0-preview.${{ github.event.pull_request.head.sha }}
+          echo "::notice title=Install (PR)::pnpm add https://pkg.pr.new/react-use-disclosure@${{ github.event.pull_request.number }}"
+          echo "::notice title=Install (SHA)::pnpm add https://pkg.pr.new/react-use-disclosure@${{ github.event.pull_request.head.sha }}"
+          echo "::notice title=Version::0.0.0-preview.${{ github.event.pull_request.head.sha }}"
+        working-directory: .
+      - name: Publish to pkg.pr.new
+        run: pnpx pkg-pr-new publish --compact '.' --no-template --packageManager=pnpm --pnpm

.gitignore

@@ -1,3 +1,4 @@
 node_modules/
 .env
 .npmrc
+dist/

index.test.js

@@ -1,8 +1,10 @@
-import { renderHook, act } from "@testing-library/react-hooks";
+// @vitest-environment jsdom
+import { renderHook, act } from "@testing-library/react";
 import { useDisclosure } from "./index";
+import { test, expect } from "vitest";
 
 test("should open the state", () => {
-  const { result } = renderHook(() => useDisclosure());
+  const { result } = renderHook(useDisclosure);
 
   expect(result.current.isOpen).toBe(false);
 
@@ -14,7 +16,7 @@ test("should open the state", () => {
 });
 
 test("should close the state", () => {
-  const { result } = renderHook(() => useDisclosure());
+  const { result } = renderHook(useDisclosure);
 
   expect(result.current.isOpen).toBe(false);
 
@@ -26,7 +28,7 @@ test("should close the state", () => {
 });
 
 test("should toggle the state", () => {
-  const { result } = renderHook(() => useDisclosure());
+  const { result } = renderHook(useDisclosure);
 
   expect(result.current.isOpen).toBe(false);
 
@@ -44,7 +46,7 @@ test("should toggle the state", () => {
 });
 
 test("should toggle by given value", () => {
-  const { result } = renderHook(() => useDisclosure());
+  const { result } = renderHook(useDisclosure);
 
   expect(result.current.isOpen).toBe(false);
 

index.js → index.ts

@@ -1,12 +1,11 @@
-const { useCallback, useState } = require("react");
+import { useCallback, useState } from "react";
 
-module.exports = {
-  useDisclosure: (isOpenDefault = false) => {
+export const useDisclosure = (isOpenDefault: boolean = false) => {
     const [isOpen, setIsOpen] = useState(isOpenDefault);
 
     const open = useCallback(() => setIsOpen(true), []);
     const close = useCallback(() => setIsOpen(false), []);
-    const toggle = useCallback((toSet) => {
+    const toggle = useCallback((toSet?: boolean) => {
       if (typeof toSet === "undefined") {
         setIsOpen((state) => !state);
       } else {
@@ -15,5 +14,4 @@ module.exports = {
     }, []);
 
     return { isOpen, open, close, toggle };
-  },
-};
+  }

package.json

@@ -2,39 +2,55 @@
   "name": "react-use-disclosure",
   "version": "7.3.0",
   "description": "Simple React custom hook to handle simple open, close, toggle states",
-  "main": "index.js",
-  "repository": "https://github.com/yoannfleurydev/useDisclosure",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/yoannfleurydev/react-use-disclosure.git"
+  },
   "author": {
     "name": "Yoann Fleury",
     "email": "yoann.fleury@yahoo.com",
-    "url": "https://twitter.com/yoannfleurydev"
+    "url": "https://www.yoannfleury.dev"
   },
+  "type": "module",
   "license": "MIT",
   "files": [
-    "index.*"
+    "index.*",
+    "dist/"
   ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
   "scripts": {
-    "test": "jest"
+    "dev": "tsup index.ts --format esm,cjs --dts --watch",
+    "build": "tsup index.ts --format esm,cjs --dts --minify",
+    "test": "vitest --no-watch",
+    "test:watch": "vitest"
   },
   "peerDependencies": {
-    "react": ">=16.13.1 <19"
+    "react": ">=16.13.1"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.9.0",
-    "@babel/preset-react": "^7.9.4",
-    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/react": "16.2.0",
+    "@types/react": "19.0.11",
     "all-contributors-cli": "6.26.1",
     "auto": "11.3.0",
-    "babel-jest": "^29.0.1",
-    "jest": "^29.0.1",
-    "react": "^18.0.0",
-    "react-test-renderer": "^18.0.0"
+    "jsdom": "26.0.0",
+    "react": "19.0.0",
+    "react-test-renderer": "19.0.0",
+    "tsup": "8.4.0",
+    "typescript": "5.8.2",
+    "vitest": "3.0.9"
   },
   "auto": {
     "plugins": [
       "npm",
       "released"
     ],
     "onlyPublishWithReleaseLabel": true
+  },
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "esbuild"
+    ]
   }
 }