refactor: move hooks to packages (#6458)

* feat: add use-size hook

* chore: update lockfile

* chore: deprecate use dimensions

* chore: add storybook for use size

* fix: update hook deps

* refactor: move more hooks to specific package

.changeset/thirty-spiders-pay.md

@@ -0,0 +1,7 @@
+---
+"@chakra-ui/react-use-callback-ref": patch
+"@chakra-ui/react-use-controllable-state": patch
+"@chakra-ui/react-context": patch
+---
+
+Initial release

hooks/context/README.md

@@ -0,0 +1,24 @@
+# @chakra-ui/react-use-callback-ref
+
+A Quick description of the component
+
+> This is an internal utility, not intended for public usage.
+
+## Installation
+
+```sh
+yarn add @chakra-ui/react-use-callback-ref
+# or
+npm i @chakra-ui/react-use-callback-ref
+```
+
+## Contribution
+
+Yes please! See the
+[contributing guidelines](https://github.com/chakra-ui/chakra-ui/blob/master/CONTRIBUTING.md)
+for details.
+
+## Licence
+
+This project is licensed under the terms of the
+[MIT license](https://github.com/chakra-ui/chakra-ui/blob/master/LICENSE).

hooks/context/index.ts

@@ -0,0 +1 @@
+export * from "./src"

hooks/context/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@chakra-ui/react-context",
+  "version": "1.0.0",
+  "description": "",
+  "keywords": [
+    "react-use-callback-ref"
+  ],
+  "author": "Segun Adebayo <sage@adebayosegun.com>",
+  "homepage": "https://github.com/chakra-ui/chakra-ui#readme",
+  "license": "MIT",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/chakra-ui/chakra-ui.git",
+    "directory": "packages/react-use-callback-ref"
+  },
+  "bugs": {
+    "url": "https://github.com/chakra-ui/chakra-ui/issues"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format=esm,cjs --dts",
+    "dev": "pnpm build -- --watch",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit",
+    "build:fast": "tsup src/index.ts --format=esm,cjs"
+  }
+}

hooks/context/src/index.ts

@@ -0,0 +1,49 @@
+import {
+  createContext as createReactContext,
+  useContext as useReactContext,
+} from "react"
+
+export interface CreateContextOptions {
+  strict?: boolean
+  hookName?: string
+  providerName?: string
+  name?: string
+}
+
+export type CreateContextReturn<T> = [
+  React.Provider<T>,
+  () => T,
+  React.Context<T>,
+]
+
+function getErrorMessage(hook: string, provider: string) {
+  return `${hook} returned \`undefined\`. Seems you forgot to wrap component within the ${provider}`
+}
+
+export function createContext<T>(options: CreateContextOptions = {}) {
+  const {
+    strict = true,
+    hookName = "useContext",
+    providerName = "Provider",
+    name,
+  } = options
+
+  const Context = createReactContext<T | undefined>(undefined)
+
+  Context.displayName = name
+
+  function useContext() {
+    const context = useReactContext(Context)
+
+    if (!context && strict) {
+      const error = new Error(getErrorMessage(hookName, providerName))
+      error.name = "ContextError"
+      Error.captureStackTrace?.(error, useContext)
+      throw error
+    }
+
+    return context
+  }
+
+  return [Context.Provider, useContext, Context] as CreateContextReturn<T>
+}

hooks/use-callback-ref/README.md

@@ -0,0 +1,24 @@
+# @chakra-ui/react-use-callback-ref
+
+A Quick description of the component
+
+> This is an internal utility, not intended for public usage.
+
+## Installation
+
+```sh
+yarn add @chakra-ui/react-use-callback-ref
+# or
+npm i @chakra-ui/react-use-callback-ref
+```
+
+## Contribution
+
+Yes please! See the
+[contributing guidelines](https://github.com/chakra-ui/chakra-ui/blob/master/CONTRIBUTING.md)
+for details.
+
+## Licence
+
+This project is licensed under the terms of the
+[MIT license](https://github.com/chakra-ui/chakra-ui/blob/master/LICENSE).

hooks/use-callback-ref/index.ts

@@ -0,0 +1 @@
+export * from "./src"

hooks/use-callback-ref/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@chakra-ui/react-use-callback-ref",
+  "version": "1.0.0",
+  "description": "",
+  "keywords": [
+    "react-use-callback-ref"
+  ],
+  "author": "Segun Adebayo <sage@adebayosegun.com>",
+  "homepage": "https://github.com/chakra-ui/chakra-ui#readme",
+  "license": "MIT",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/chakra-ui/chakra-ui.git",
+    "directory": "packages/react-use-callback-ref"
+  },
+  "bugs": {
+    "url": "https://github.com/chakra-ui/chakra-ui/issues"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format=esm,cjs --dts",
+    "dev": "pnpm build -- --watch",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit",
+    "build:fast": "tsup src/index.ts --format=esm,cjs"
+  }
+}

hooks/use-callback-ref/src/index.ts

@@ -0,0 +1,13 @@
+import { useEffect, useMemo, useRef } from "react"
+
+export function useCallbackRef<T extends (...args: any[]) => any>(
+  callback: T | undefined,
+) {
+  const callbackRef = useRef(callback)
+
+  useEffect(() => {
+    callbackRef.current = callback
+  })
+
+  return useMemo<T>((...args) => callbackRef.current?.(...args), [])
+}

hooks/use-controllable-state/README.md

@@ -0,0 +1,24 @@
+# @chakra-ui/react-use-callback-ref
+
+A Quick description of the component
+
+> This is an internal utility, not intended for public usage.
+
+## Installation
+
+```sh
+yarn add @chakra-ui/react-use-callback-ref
+# or
+npm i @chakra-ui/react-use-callback-ref
+```
+
+## Contribution
+
+Yes please! See the
+[contributing guidelines](https://github.com/chakra-ui/chakra-ui/blob/master/CONTRIBUTING.md)
+for details.
+
+## Licence
+
+This project is licensed under the terms of the
+[MIT license](https://github.com/chakra-ui/chakra-ui/blob/master/LICENSE).

hooks/use-controllable-state/index.ts

@@ -0,0 +1 @@
+export * from "./src"

hooks/use-controllable-state/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@chakra-ui/react-use-controllable-state",
+  "version": "1.0.0",
+  "description": "",
+  "keywords": [
+    "react-use-callback-ref"
+  ],
+  "author": "Segun Adebayo <sage@adebayosegun.com>",
+  "homepage": "https://github.com/chakra-ui/chakra-ui#readme",
+  "license": "MIT",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/chakra-ui/chakra-ui.git",
+    "directory": "packages/react-use-callback-ref"
+  },
+  "bugs": {
+    "url": "https://github.com/chakra-ui/chakra-ui/issues"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format=esm,cjs --dts",
+    "dev": "pnpm build -- --watch",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit",
+    "build:fast": "tsup src/index.ts --format=esm,cjs"
+  },
+  "dependencies": {
+    "@chakra-ui/react-use-callback-ref": "workspace:*"
+  }
+}

hooks/use-controllable-state/src/index.ts

@@ -0,0 +1,52 @@
+import { useCallback, useMemo, useState } from "react"
+import { useCallbackRef } from "@chakra-ui/react-use-callback-ref"
+
+export function useControllableProp<T>(prop: T | undefined, state: T) {
+  const controlled = typeof prop !== "undefined"
+  const value = controlled ? prop : state
+  return useMemo<[boolean, T]>(() => [controlled, value], [controlled, value])
+}
+
+export interface UseControllableStateProps<T> {
+  value?: T
+  defaultValue?: T | (() => T)
+  onChange?: (value: T) => void
+  shouldUpdate?: (prev: T, next: T) => boolean
+}
+
+export function useControllableState<T>(props: UseControllableStateProps<T>) {
+  const {
+    value: valueProp,
+    defaultValue,
+    onChange,
+    shouldUpdate = (prev, next) => prev !== next,
+  } = props
+
+  const onChangeProp = useCallbackRef(onChange)
+  const shouldUpdateProp = useCallbackRef(shouldUpdate)
+
+  const [uncontrolledState, setUncontrolledState] = useState(defaultValue as T)
+
+  const controlled = valueProp !== undefined
+  const value = controlled ? valueProp : uncontrolledState
+
+  const setValue = useCallback(
+    (next: React.SetStateAction<T>) => {
+      const setter = next as (prevState?: T) => T
+      const nextValue = typeof next === "function" ? setter(value) : next
+
+      if (!shouldUpdateProp(value, nextValue)) {
+        return
+      }
+
+      if (!controlled) {
+        setUncontrolledState(nextValue)
+      }
+
+      onChangeProp(nextValue)
+    },
+    [controlled, onChangeProp, value, shouldUpdateProp],
+  )
+
+  return [value, setValue] as [T, React.Dispatch<React.SetStateAction<T>>]
+}