🚀 V3 (#514)

* 🏗️ Move the full workspace to ES Module (#502)

* 🔥 Remove deprecated hooks and co (#503)

* ♻️ Prefer type over interface (#515)

* ♻️ Generate documentation from JSDoc using typedoc (#519)

* 📝 Fix documentation build with some little improvements

* 👷 Add "DOM.Iterable" as the code runs in the DOM

* 📝 Add Algolia doc search command menu (#513)

.changeset/clean-lies-laugh.md

@@ -0,0 +1,6 @@
+---
+"usehooks-ts": major
+"www": major
+---
+
+Remove previously deprecated hooks and hooks' signatures (#503)

.changeset/gentle-trees-carry.md

@@ -0,0 +1,5 @@
+---
+"usehooks-ts": major
+---
+
+Improve JSDoc comments and rename or make private some type aliases

.changeset/giant-moles-double.md

@@ -0,0 +1,7 @@
+---
+"www": minor
+"eslint-config-custom": minor
+"usehooks-ts": major
+---
+
+Prefer type over interface (#515)

.changeset/tame-news-live.md

@@ -0,0 +1,7 @@
+---
+"eslint-config-custom": major
+"usehooks-ts": major
+"www": major
+---
+
+Move the full workspace into ES Module

.github/workflows/update-algolia-index.yml

@@ -0,0 +1,47 @@
+name: Update Algolia index
+
+on:
+  push:
+    branches:
+      - master
+
+env:
+  NODE_VERSION: 20
+  PNPM_VERSION: 8
+
+jobs:
+  run:
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 2
+
+      - name: Setup Pnpm
+        uses: pnpm/action-setup@v3
+        with:
+          version: ${{ env.PNPM_VERSION }}
+
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: 'pnpm'
+          cache-dependency-path: '**/pnpm-lock.yaml'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build
+        run: pnpm build
+
+      - name: Generate documentation from JSDoc
+        run: pnpm generate-doc
+
+      - name: Update Algolia index
+        env:
+          ALGOLIA_APP_ID: ${{ secrets.ALGOLIA_APP_ID }}
+          ALGOLIA_ADMIN_KEY: ${{ secrets.ALGOLIA_ADMIN_KEY }}
+        run: pnpm update-algolia-index

.gitignore

@@ -17,6 +17,7 @@ npm-debug.log*
 
 # Compiled stuff
 dist
+generated
 
 # Coverage
 coverage

.prettierignore

@@ -8,4 +8,3 @@ pnpm-lock.yaml
 .changeset
 .github
 apps/www/.next
-apps/www/generated

.vscode/settings.json

@@ -71,5 +71,6 @@
   },
   "[typescriptreact]": {
     "editor.defaultFormatter": "dbaeumer.vscode-eslint"
-  }
+  },
+  "files.associations": { "*.json": "jsonc" }
 }

README.md

@@ -18,6 +18,7 @@
 ![npm bundle size](https://img.shields.io/bundlephobia/minzip/usehooks-ts)
 ![npm](https://img.shields.io/npm/v/usehooks-ts)<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
 [![All Contributors](https://img.shields.io/badge/all_contributors-241-orange.svg?style=flat-square)](#contributors-)
+
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 <br />
@@ -54,41 +55,39 @@ function Component() {
 
 <!-- HOOKS:START -->
 
-- [`useBoolean()`](https://usehooks-ts.com/react-hook/use-boolean)
-- [`useClickAnyWhere()`](https://usehooks-ts.com/react-hook/use-click-any-where)
-- [`useCopyToClipboard()`](https://usehooks-ts.com/react-hook/use-copy-to-clipboard)
-- [`useCountdown()`](https://usehooks-ts.com/react-hook/use-countdown)
-- [`useCounter()`](https://usehooks-ts.com/react-hook/use-counter)
-- [`useDarkMode()`](https://usehooks-ts.com/react-hook/use-dark-mode)
-- [`useDebounce()`](https://usehooks-ts.com/react-hook/use-debounce)
-- [`useDebounceCallback()`](https://usehooks-ts.com/react-hook/use-debounce-callback)
-- [`useDebounceValue()`](https://usehooks-ts.com/react-hook/use-debounce-value)
-- [`useDocumentTitle()`](https://usehooks-ts.com/react-hook/use-document-title)
-- [`useEventCallback()`](https://usehooks-ts.com/react-hook/use-event-callback)
-- [`useEventListener()`](https://usehooks-ts.com/react-hook/use-event-listener)
-- [`useHover()`](https://usehooks-ts.com/react-hook/use-hover)
-- [`useIntersectionObserver()`](https://usehooks-ts.com/react-hook/use-intersection-observer)
-- [`useInterval()`](https://usehooks-ts.com/react-hook/use-interval)
-- [`useIsClient()`](https://usehooks-ts.com/react-hook/use-is-client)
-- [`useIsMounted()`](https://usehooks-ts.com/react-hook/use-is-mounted)
-- [`useIsomorphicLayoutEffect()`](https://usehooks-ts.com/react-hook/use-isomorphic-layout-effect)
-- [`useLocalStorage()`](https://usehooks-ts.com/react-hook/use-local-storage)
-- [`useMap()`](https://usehooks-ts.com/react-hook/use-map)
-- [`useMediaQuery()`](https://usehooks-ts.com/react-hook/use-media-query)
-- [`useOnClickOutside()`](https://usehooks-ts.com/react-hook/use-on-click-outside)
-- [`useReadLocalStorage()`](https://usehooks-ts.com/react-hook/use-read-local-storage)
-- [`useResizeObserver()`](https://usehooks-ts.com/react-hook/use-resize-observer)
-- [`useScreen()`](https://usehooks-ts.com/react-hook/use-screen)
-- [`useScript()`](https://usehooks-ts.com/react-hook/use-script)
-- [`useScrollLock()`](https://usehooks-ts.com/react-hook/use-scroll-lock)
-- [`useSessionStorage()`](https://usehooks-ts.com/react-hook/use-session-storage)
-- [`useStep()`](https://usehooks-ts.com/react-hook/use-step)
-- [`useTernaryDarkMode()`](https://usehooks-ts.com/react-hook/use-ternary-dark-mode)
-- [`useTimeout()`](https://usehooks-ts.com/react-hook/use-timeout)
-- [`useToggle()`](https://usehooks-ts.com/react-hook/use-toggle)
-- [`useUnmount()`](https://usehooks-ts.com/react-hook/use-unmount)
-- [`useWindowSize()`](https://usehooks-ts.com/react-hook/use-window-size)
-
+- [`useBoolean`](https://usehooks-ts.com/react-hook/use-boolean) — handles boolean state with useful utility functions.
+- [`useClickAnyWhere`](https://usehooks-ts.com/react-hook/use-click-any-where) — handles click events anywhere on the document.
+- [`useCopyToClipboard`](https://usehooks-ts.com/react-hook/use-copy-to-clipboard) — copies text to the clipboard.
+- [`useCountdown`](https://usehooks-ts.com/react-hook/use-countdown) — manages countdown.
+- [`useCounter`](https://usehooks-ts.com/react-hook/use-counter) — manages a counter with increment, decrement, reset, and setCount functionalities.
+- [`useDarkMode`](https://usehooks-ts.com/react-hook/use-dark-mode) — returns the current state of the dark mode.
+- [`useDebounceCallback`](https://usehooks-ts.com/react-hook/use-debounce-callback) — creates a debounced version of a callback function.
+- [`useDebounceValue`](https://usehooks-ts.com/react-hook/use-debounce-value) — returns a debounced version of the provided value, along with a function to update it.
+- [`useDocumentTitle`](https://usehooks-ts.com/react-hook/use-document-title) — sets the document title.
+- [`useEventCallback`](https://usehooks-ts.com/react-hook/use-event-callback) — creates a memoized event callback.
+- [`useEventListener`](https://usehooks-ts.com/react-hook/use-event-listener) — attaches event listeners to DOM elements, the window, or media query lists.
+- [`useHover`](https://usehooks-ts.com/react-hook/use-hover) — tracks whether a DOM element is being hovered over.
+- [`useIntersectionObserver`](https://usehooks-ts.com/react-hook/use-intersection-observer) — tracks the intersection of a DOM element with its containing element or the viewport.
+- [`useInterval`](https://usehooks-ts.com/react-hook/use-interval) — creates an interval that invokes a callback function at a specified delay.
+- [`useIsClient`](https://usehooks-ts.com/react-hook/use-is-client) — determines if the code is running on the client side (in the browser).
+- [`useIsMounted`](https://usehooks-ts.com/react-hook/use-is-mounted) — determines if the component is currently mounted.
+- [`useIsomorphicLayoutEffect`](https://usehooks-ts.com/react-hook/use-isomorphic-layout-effect) — uses either
+- [`useLocalStorage`](https://usehooks-ts.com/react-hook/use-local-storage) — uses local storage to persist state across page reloads.
+- [`useMap`](https://usehooks-ts.com/react-hook/use-map) — manages a key-value map state with setter actions.
+- [`useMediaQuery`](https://usehooks-ts.com/react-hook/use-media-query) — tracks the state of a media query.
+- [`useOnClickOutside`](https://usehooks-ts.com/react-hook/use-on-click-outside) — handles clicks outside a specified element.
+- [`useReadLocalStorage`](https://usehooks-ts.com/react-hook/use-read-local-storage) — reads a value from local storage, closely related to useLocalStorage().
+- [`useResizeObserver`](https://usehooks-ts.com/react-hook/use-resize-observer) — observes the size of an element using the ResizeObserver API.
+- [`useScreen`](https://usehooks-ts.com/react-hook/use-screen) — tracks the screen dimensions and properties.
+- [`useScript`](https://usehooks-ts.com/react-hook/use-script) — dynamically loads scripts and tracking their loading status.
+- [`useScrollLock`](https://usehooks-ts.com/react-hook/use-scroll-lock) — A custom hook that locks and unlocks scroll.
+- [`useSessionStorage`](https://usehooks-ts.com/react-hook/use-session-storage) — uses session storage to persist state across page reloads.
+- [`useStep`](https://usehooks-ts.com/react-hook/use-step) — manages and navigates between steps in a multi-step process.
+- [`useTernaryDarkMode`](https://usehooks-ts.com/react-hook/use-ternary-dark-mode) — manages ternary (system, dark, light) dark mode with local storage support.
+- [`useTimeout`](https://usehooks-ts.com/react-hook/use-timeout) — handles timeouts in React components.
+- [`useToggle`](https://usehooks-ts.com/react-hook/use-toggle) — manages a boolean toggle state in React components.
+- [`useUnmount`](https://usehooks-ts.com/react-hook/use-unmount) — runs a cleanup function when the component is unmounted.
+- [`useWindowSize`](https://usehooks-ts.com/react-hook/use-window-size) — tracks the size of the window.
 <!-- HOOKS:END -->
 
 ## 💚 Backers

apps/www/env.mjs → apps/www/env.js

@@ -1,10 +1,14 @@
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
 import { createEnv } from '@t3-oss/env-nextjs'
 import { z } from 'zod'
 
 export const env = createEnv({
   server: {},
   client: {
     NEXT_PUBLIC_GA_MEASUREMENT_ID: z.string().optional().default(''),
+    NEXT_PUBLIC_ALGOLIA_APP_ID: z.string().optional().default(''),
+    NEXT_PUBLIC_ALGOLIA_SEARCH_KEY: z.string().optional().default(''),
   },
   runtimeEnv: {
     NEXT_PUBLIC_GA_MEASUREMENT_ID: process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID,

apps/www/next.config.mjs → apps/www/next.config.js

@@ -1,4 +1,4 @@
-import './env.mjs'
+import './env.js'
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {}

apps/www/package.json

@@ -2,22 +2,27 @@
   "name": "www",
   "version": "0.2.4",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "next dev",
-    "build": "pnpm generate && next build && pnpm generate-sitemap",
-    "generate-sitemap": "rimraf public/sitemap.xml public/robots.txt && next-sitemap --config ./next-sitemap.config.mjs",
+    "build": "pnpm generate-doc && next build && pnpm generate-sitemap",
+    "generate-sitemap": "rimraf public/sitemap.xml public/robots.txt && next-sitemap --config ./next-sitemap.config.js",
     "start": "next start",
     "lint": "next lint && tsc --noEmit",
-    "clean": "rimraf *.tsbuildinfo .next generated .turbo",
-    "generate": "cd ../.. && pnpm copy-hooks && cd -"
+    "clean": "rimraf *.tsbuildinfo .next .turbo",
+    "generate-doc": "cd ../.. && pnpm generate-doc && cd -"
   },
   "dependencies": {
     "@next/third-parties": "^14.1.0",
+    "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-slot": "^1.0.2",
     "@t3-oss/env-nextjs": "^0.9.2",
+    "@types/voca": "^1.4.1",
+    "algoliasearch": "^4.22.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
+    "cmdk": "^0.2.1",
     "date-fns": "^3.3.1",
     "gray-matter": "^4.0.3",
     "highlight.js": "^11.9.0",
@@ -26,12 +31,15 @@
     "next-mdx-remote": "^4.4.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-instantsearch": "^7.6.0",
     "rehype-highlight": "^7.0.0",
     "remark-code-import": "^1.2.0",
+    "remark-gfm": "^3.0.1",
     "tailwind-merge": "^2.2.1",
     "tailwindcss": "3.4.1",
     "tailwindcss-animate": "^1.0.7",
     "usehooks-ts": "workspace:*",
+    "voca": "^1.4.1",
     "zod": "^3.22.4"
   },
   "devDependencies": {

apps/www/src/app/(docs)/introduction/page.tsx

@@ -1,6 +1,7 @@
 import { CarbonAds } from '@/components/carbon-ads'
 import { CommandCopy } from '@/components/command-copy'
 import { DocsPageHeader } from '@/components/docs-page-header'
+import { DashboardTableOfContents } from '@/components/table-of-content'
 import { components } from '@/components/ui/components'
 import { siteConfig } from '@/config/site'
 
@@ -49,6 +50,14 @@ export default async function IntroductionPage() {
       </div>
       <aside className="hidden text-sm xl:block">
         <div className="sticky top-16 -mt-10 max-h-[calc(var(--vh)-4rem)] overflow-y-auto pt-10">
+          <DashboardTableOfContents
+            toc={{
+              items: [
+                { title: 'Introduction', url: '#introduction' },
+                { title: 'Install', url: '#install' },
+              ],
+            }}
+          />
           <div className="my-10">
             <CarbonAds />
           </div>

apps/www/src/app/(docs)/layout.tsx

@@ -2,28 +2,31 @@ import '../globals.css'
 
 import Link from 'next/link'
 
+import { DocSearch } from '@/components/doc-search'
 import { GitHub } from '@/components/icons'
 import { MainNav } from '@/components/main-nav'
-// import { DocsSearch } from "@/components/search"
 import { DocsSidebarNav } from '@/components/sidebar-nav'
 import { docsConfig } from '@/config/docs'
 import { siteConfig } from '@/config/site'
+import { getHookList } from '@/lib/api'
 
-interface DocsLayoutProps {
+type DocsLayoutProps = {
   children: React.ReactNode
 }
 
-export default function DocsLayout({ children }: DocsLayoutProps) {
+export default async function DocsLayout({ children }: DocsLayoutProps) {
+  const hooks = await getHookList()
+
   return (
     <div className="flex min-h-screen flex-col">
       <header className="sticky top-0 z-40 w-full border-b bg-background">
         <div className="container flex h-16 items-center space-x-4 sm:justify-between sm:space-x-0">
           <MainNav items={docsConfig.mainNav}>
-            <DocsSidebarNav items={docsConfig.sidebarNav} />
+            <DocsSidebarNav items={docsConfig.sidebarNav} hooks={hooks} />
           </MainNav>
           <div className="flex flex-1 items-center space-x-4 sm:justify-end">
-            <div className="flex-1 sm:grow-0">{/* <DocsSearch /> */}</div>
             <nav className="flex space-x-4">
+              <DocSearch />
               <Link
                 href={siteConfig.links.github}
                 target="_blank"
@@ -37,14 +40,16 @@ export default function DocsLayout({ children }: DocsLayoutProps) {
           </div>
         </div>
       </header>
+
       <div className="container flex-1">
         <div className="flex-1 md:grid md:grid-cols-[220px_1fr] md:gap-6 lg:grid-cols-[240px_1fr] lg:gap-10">
           <aside className="fixed top-16 z-30 hidden h-[calc(100vh-4rem-1px)] w-full shrink-0 overflow-y-auto border-r py-6 pr-2 md:sticky md:block lg:py-10">
-            <DocsSidebarNav items={docsConfig.sidebarNav} />
+            <DocsSidebarNav items={docsConfig.sidebarNav} hooks={hooks} />
           </aside>
           {children}
         </div>
       </div>
+
       {/* <SiteFooter className="border-t" /> */}
     </div>
   )