perf!: monorepo setup + fully static + webp images

BREAKING CHANGE: minimum supported Node.js >= 22.0.0 and pnpm >= 9.5.0

packages/react-hooks/.eslintrc.json

@@ -0,0 +1,14 @@
+{
+  "root": true,
+  "extends": ["@repo/eslint-config/nextjs/.eslintrc.json"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx"],
+      "plugins": ["@typescript-eslint"],
+      "parser": "@typescript-eslint/parser",
+      "parserOptions": {
+        "project": true
+      }
+    }
+  ]
+}

packages/react-hooks/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@repo/react-hooks",
+  "version": "3.3.2",
+  "private": true,
+  "type": "module",
+  "exports": {
+    "./useBoolean": "./src/useBoolean.ts",
+    "./useIsMounted": "./src/useIsMounted.ts"
+  },
+  "scripts": {
+    "lint:eslint": "eslint src --max-warnings 0 --report-unused-disable-directives",
+    "lint:typescript": "tsc --noEmit",
+    "test": "vitest run --browser.headless",
+    "test:ui": "vitest --ui --no-open"
+  },
+  "dependencies": {
+    "react": "catalog:",
+    "react-dom": "catalog:"
+  },
+  "devDependencies": {
+    "@repo/eslint-config": "workspace:*",
+    "@repo/config-typescript": "workspace:*",
+    "@testing-library/react": "catalog:",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "@total-typescript/ts-reset": "catalog:",
+    "@vitest/browser": "catalog:",
+    "@vitest/coverage-istanbul": "catalog:",
+    "@vitest/ui": "catalog:",
+    "eslint": "catalog:",
+    "playwright": "catalog:",
+    "typescript": "catalog:",
+    "vitest": "catalog:"
+  }
+}

packages/react-hooks/src/tests/useBoolean.test.ts

@@ -0,0 +1,83 @@
+import { act, renderHook } from "@testing-library/react"
+
+import { describe, expect, it } from "vitest"
+import { useBoolean } from "../useBoolean"
+
+describe("useBoolean", () => {
+  const initialValues = [true, false]
+
+  for (const initialValue of initialValues) {
+    it(`should set the initial value to ${initialValue}`, () => {
+      // Arrange - Given
+      const { result } = renderHook(() => {
+        return useBoolean({ initialValue })
+      })
+
+      // Assert - Then
+      expect(result.current.value).toBe(initialValue)
+    })
+  }
+
+  it("should by default set the initial value to false", () => {
+    // Arrange - Given
+    const { result } = renderHook(() => {
+      return useBoolean()
+    })
+
+    // Assert - Then
+    expect(result.current.value).toBe(false)
+  })
+
+  it("should toggle the value", () => {
+    // Arrange - Given
+    const { result } = renderHook(() => {
+      return useBoolean({ initialValue: false })
+    })
+
+    // Act - When
+    act(() => {
+      return result.current.toggle()
+    })
+
+    // Assert - Then
+    expect(result.current.value).toBe(true)
+
+    // Act - When
+    act(() => {
+      return result.current.toggle()
+    })
+
+    // Assert - Then
+    expect(result.current.value).toBe(false)
+  })
+
+  it("should set the value to true", () => {
+    // Arrange - Given
+    const { result } = renderHook(() => {
+      return useBoolean({ initialValue: false })
+    })
+
+    // Act - When
+    act(() => {
+      return result.current.setTrue()
+    })
+
+    // Assert - Then
+    expect(result.current.value).toBe(true)
+  })
+
+  it("should set the value to false", () => {
+    // Arrange - Given
+    const { result } = renderHook(() => {
+      return useBoolean({ initialValue: true })
+    })
+
+    // Act - When
+    act(() => {
+      return result.current.setFalse()
+    })
+
+    // Assert - Then
+    expect(result.current.value).toBe(false)
+  })
+})

packages/react-hooks/src/tests/useIsMounted.test.ts

@@ -0,0 +1,16 @@
+import { renderHook } from "@testing-library/react"
+
+import { describe, expect, it } from "vitest"
+import { useIsMounted } from "../useIsMounted"
+
+describe("useIsMounted", () => {
+  it("should return true", () => {
+    // Arrange - Given
+    const { result } = renderHook(() => {
+      return useIsMounted()
+    })
+
+    // Assert - Then
+    expect(result.current.isMounted).toBe(true)
+  })
+})

packages/react-hooks/src/useBoolean.ts

@@ -0,0 +1,50 @@
+import { useState } from "react"
+
+export interface UseBooleanOutput {
+  value: boolean
+  setValue: React.Dispatch<React.SetStateAction<boolean>>
+  setTrue: () => void
+  setFalse: () => void
+  toggle: () => void
+}
+
+export interface UseBooleanInput {
+  /**
+   * The initial value of the boolean.
+   * @default false
+   */
+  initialValue?: boolean
+}
+
+/**
+ * Hook to manage a boolean state.
+ * @param options
+ * @returns
+ */
+export const useBoolean = (options: UseBooleanInput = {}): UseBooleanOutput => {
+  const { initialValue = false } = options
+
+  const [value, setValue] = useState(initialValue)
+
+  const toggle = (): void => {
+    setValue((old) => {
+      return !old
+    })
+  }
+
+  const setTrue = (): void => {
+    setValue(true)
+  }
+
+  const setFalse = (): void => {
+    setValue(false)
+  }
+
+  return {
+    value,
+    setValue,
+    toggle,
+    setTrue,
+    setFalse,
+  }
+}

packages/react-hooks/src/useIsMounted.ts

@@ -0,0 +1,15 @@
+import { useEffect, useState } from "react"
+
+export interface UseIsMountedOutput {
+  isMounted: boolean
+}
+
+export const useIsMounted = (): UseIsMountedOutput => {
+  const [isMounted, setIsMounted] = useState(false)
+
+  useEffect(() => {
+    setIsMounted(true)
+  }, [])
+
+  return { isMounted }
+}

packages/react-hooks/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": "@repo/config-typescript/tsconfig.json",
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "types": [
+      "@total-typescript/ts-reset",
+      "@vitest/browser/providers/playwright"
+    ],
+    "jsx": "preserve",
+
+    "noEmit": true
+  }
+}

packages/react-hooks/vitest.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from "vitest/config"
+
+export default defineConfig({
+  test: {
+    browser: {
+      provider: "playwright",
+      enabled: true,
+      name: "chromium",
+    },
+    coverage: {
+      enabled: true,
+      provider: "istanbul",
+    },
+  },
+})