Unverified Commit 8539ccf8 authored by Tasso Evangelista's avatar Tasso Evangelista Committed by GitHub
Browse files

fix: fuselage-hooks bundling (#258)

parent bef11933
<h1 align="center">Welcome to Fuselage 👋</h1>
![CircleCI](https://img.shields.io/circleci/build/github/RocketChat/Rocket.Chat.Fuselage/master?style=flat-square)
![LGTM Alerts](https://img.shields.io/lgtm/alerts/github/RocketChat/Rocket.Chat.Fuselage?style=flat-square)
![LGTM Grade](https://img.shields.io/lgtm/grade/javascript/github/RocketChat/Rocket.Chat.Fuselage?style=flat-square)
<p>
<a href="https://lerna.js.org/">
<img alt="Lerna" src="https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg" target="_blank" />
......
# Welcome to @rocket.chat/fuselage-hooks 👋
<p align="center">
<a href="https://rocket.chat" title="Rocket.Chat">
<img src="https://user-images.githubusercontent.com/2263066/87240777-f5b4f300-c3f2-11ea-8a01-cc58fdf9a99a.png" alt="Rocket.Chat" />
</a>
</p>
[![Documentation](https://img.shields.io/badge/documentation-yes-brightgreen.svg)](https://github.com/RocketChat/Rocket.Chat.Fuselage#readme)
[![Maintenance](https://img.shields.io/badge/Maintained%3F-yes-green.svg)](https://github.com/RocketChat/Rocket.Chat.Fuselage/graphs/commit-activity)
[![License: MIT](https://img.shields.io/github/license/RocketChat/@rocket.chat/fuselage-hooks)](https://github.com/RocketChat/Rocket.Chat.Fuselage/blob/master/LICENSE)
[![Twitter: RocketChat](https://img.shields.io/twitter/follow/RocketChat.svg?style=social)](https://twitter.com/RocketChat)
# @rocket.chat/fuselage-hooks
> React Hooks for Fuselage, Rocket.Chat's design system
> React hooks for Fuselage, Rocket.Chat's design system and UI toolkit.
### 🏠 [Homepage](https://rocket.chat/Rocket.Chat.Fuselage)
![React version](https://img.shields.io/npm/dependency-version/@rocket.chat/fuselage-hooks/peer/react?style=flat-square)
![License: MIT](https://img.shields.io/github/license/RocketChat/Rocket.Chat.Fuselage?style=flat-square)
## Install
![Issues](https://img.shields.io/github/issues/RocketChat/Rocket.Chat.Fuselage/%F0%9F%93%A6%20fuselage-hooks?style=flat-square)
![Pull requests](https://img.shields.io/github/issues-pr/RocketChat/Rocket.Chat.Fuselage/%F0%9F%93%A6%20fuselage-hooks?style=flat-square)
![GitHub commit activity](https://img.shields.io/github/commit-activity/m/RocketChat/Rocket.Chat.Fuselage?style=flat-square)
```sh
yarn add @rocket.chat/fuselage-hooks
```
![npm@latest](https://img.shields.io/npm/v/@rocket.chat/fuselage-hooks/latest?style=flat-square)
![npm@next](https://img.shields.io/npm/v/@rocket.chat/fuselage-hooks/next?style=flat-square)
![dev deps](https://img.shields.io/david/dev/RocketChat/Rocket.Chat.Fuselage?path=packages%2Ffuselage-hooks&style=flat-square)
![optional deps](https://img.shields.io/david/optional/RocketChat/Rocket.Chat.Fuselage?path=packages%2Ffuselage-hooks&style=flat-square)
![peer deps](https://img.shields.io/david/peer/RocketChat/Rocket.Chat.Fuselage?path=packages%2Ffuselage-hooks&style=flat-square)
![npm bundle size](https://img.shields.io/bundlephobia/min/@rocket.chat/fuselage-hooks?style=flat-square)
![npm downloads](https://img.shields.io/npm/dw/@rocket.chat/fuselage-hooks?style=flat-square)
![npm collaborators](https://img.shields.io/npm/collaborators/@rocket.chat/fuselage-hooks?style=flat-square)
## Run tests
<p align="center">
<img src="https://user-images.githubusercontent.com/2263066/87240832-6fe57780-c3f3-11ea-9985-4358c79af772.png" alt="Example" />
</p>
## Install
```sh
yarn test
yarn add @rocket.chat/fuselage-hooks
```
## API Reference
......@@ -40,6 +53,7 @@ yarn test
- [Parameters](#parameters-4)
- [useDebouncedValue](#usedebouncedvalue)
- [Parameters](#parameters-5)
- [useIsomorphicLayoutEffect](#useisomorphiclayouteffect)
- [useLazyRef](#uselazyref)
- [Parameters](#parameters-6)
- [useMediaQueries](#usemediaqueries)
......@@ -54,7 +68,6 @@ yarn test
- [Parameters](#parameters-11)
- [useSafely](#usesafely)
- [Parameters](#parameters-12)
- [Comparator](#comparator)
- [useStableArray](#usestablearray)
- [Parameters](#parameters-13)
- [useLocalStorage](#uselocalstorage)
......@@ -72,15 +85,15 @@ Hook to automatically request focus for an DOM element.
#### Parameters
- `isFocused` if true, the focus will be requested (optional, default `true`)
- `options` **Options?** options of the focus request
- `options` **FocusOptions?** options of the focus request
Returns **Ref&lt;{focus: function (options: Options): void}>** the ref which holds the element
Returns **Ref&lt;{focus: function (options: FocusOptions): void}>** the ref which holds the element
### useBreakpoints
Hook to catch which responsive design' breakpoints are active.
Returns **[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)&lt;[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)>** an array of the active breakpoint names.
Returns **[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)&lt;[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)>** an array of the active breakpoint names
### useDebouncedCallback
......@@ -126,8 +139,8 @@ Hook to debounce the state dispatcher function returned by hooks like `useState(
#### Parameters
- `pair` **\[S, DispatchWithoutAction]** the state and dispatcher pair which will be debounced
- `pair.0` the state value
- `pair.1` the state dispatcher function
- `pair.0`
- `pair.1`
- `delay` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** the number of milliseconds to delay the dispatcher
Returns **\[S, any]** a state value and debounced dispatcher pair
......@@ -143,6 +156,10 @@ Hook to keep a debounced reference of a value.
Returns **V** a debounced value
### useIsomorphicLayoutEffect
Replacement for the `useEffect` hook that is safely ignored on SSR.
### useLazyRef
Hook equivalent to useRef, but with a lazy initialization for computed value.
......@@ -200,8 +217,8 @@ Hook to track dimension changes in a DOM element using the ResizeObserver API.
#### Parameters
- `options` **Options** (optional, default `{}`)
- `options.debounceDelay` the number of milliseconds to delay updates
- `options` **UseResizeObserverOptions** (optional, default `{}`)
- `options.debounceDelay`
Returns **{ref: RefObject&lt;[Element](https://developer.mozilla.org/docs/Web/API/Element)>, contentBoxSize: ResizeObserverSize, borderBoxSize: ResizeObserverSize}** a triple containing the ref and the size information
......@@ -213,15 +230,11 @@ which can be safe and asynchronically called even after the component unmounted.
#### Parameters
- `pair` **\[S, (Dispatch&lt;A> | DispatchWithoutAction)]** the state and dispatcher pair which will be patched
- `pair.0` the state value
- `pair.1` the state dispatcher function
- `pair.0`
- `pair.1`
Returns **\[S, D]** a state value and safe dispatcher pair
### Comparator
Type: function (a: T, b: T): [boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)
### useStableArray
Hook to create an array with stable identity if its elements are equal.
......@@ -229,7 +242,7 @@ Hook to create an array with stable identity if its elements are equal.
#### Parameters
- `array` **T** the array
- `compare` **[Comparator](#comparator)** the equality function that checks if two array elements are
- `compare` **function (a: T, b: T): [boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** the equality function that checks if two array elements are
equal (optional, default `Object.is`)
Returns **T** the passed array if the elements are NOT equals; the previously
......@@ -241,8 +254,8 @@ Hook to deal with localStorage
#### Parameters
- `key`
- `initialValue`
- `key` the key associated to the value in the storage
- `initialValue` the value returned when the key is not found at the storage
Returns **any** a state and a setter function
......@@ -252,8 +265,8 @@ Hook to deal with sessionStorage
#### Parameters
- `key`
- `initialValue`
- `key` the key associated to the value in the storage
- `initialValue` the value returned when the key is not found at the storage
Returns **any** a state and a setter function
......@@ -272,61 +285,3 @@ Returns **\[[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Referenc
Hook to keep a unique ID string.
Returns **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** the unique ID string
# Returns **any** a state and a setter function
### Comparator
Type: function (a: T, b: T): [boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)
### useStableArray
Hook to create an array with stable identity if its elements are equal.
#### Parameters
- `array` **T** the array
- `compare` **[Comparator](#comparator)** the equality function that checks if two array elements are
equal (optional, default `Object.is`)
Returns **T** the passed array if the elements are NOT equals; the previously
stored array otherwise
> > > > > > > 09f95edd7f296de45bc62caa16a1f43848fe3027
### useToggle
Hook to create a toggleable boolean state.
#### Parameters
- `initialValue` **([boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean) | function (): [boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean))?** the initial value or the initial state generator function
Returns **\[[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean), D]** a state boolean value and a state toggler function
### useUniqueId
Hook to keep a unique ID string.
Returns **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** the unique ID string
## Author
👤 **Rocket.Chat**
- Twitter: [@RocketChat](https://twitter.com/RocketChat)
- Github: [@RocketChat](https://github.com/RocketChat)
## 🤝 Contributing
Contributions, issues and feature requests are welcome!
Feel free to check [issues page](https://github.com/RocketChat/Rocket.Chat.Fuselage/issues).
## Show your support
Give a ⭐️ if this project helped you!
* * *
_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_
{
"$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
"mainEntryPointFilePath": "<projectFolder>/dist/index.d.ts",
"bundledPackages": [],
"compiler": {},
"apiReport": {
"enabled": false
},
"docModel": {
"enabled": true
},
"dtsRollup": {
"enabled": false
},
"tsdocMetadata": {},
"messages": {
"compilerMessageReporting": {
"default": {
"logLevel": "warning"
}
},
"extractorMessageReporting": {
"default": {
"logLevel": "warning"
}
},
"tsdocMessageReporting": {
"default": {
"logLevel": "warning"
}
}
}
}
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
[Home](./index.md) &gt; [@rocket.chat/fuselage-hooks](./fuselage-hooks.md)
## fuselage-hooks package
## Functions
| Function | Description |
| --- | --- |
| [useDebouncedReducer(reducer, initialArg, init, delay)](./fuselage-hooks.usedebouncedreducer.md) | |
| [useDebouncedReducer(reducer, initialArg, init, delay)](./fuselage-hooks.usedebouncedreducer_1.md) | |
| [useDebouncedReducer(reducer, initialArg, init, delay)](./fuselage-hooks.usedebouncedreducer_2.md) | |
| [useDebouncedState(initialValue, delay)](./fuselage-hooks.usedebouncedstate.md) | Hook to create a state with a debounced setter function. |
| [useDebouncedUpdates(\[state, dispatch\], delay)](./fuselage-hooks.usedebouncedupdates.md) | Hook to debounce the state dispatcher function returned by hooks like <code>useState()</code> and <code>useReducer()</code>. |
| [useDebouncedUpdates(\[state, dispatch\], delay)](./fuselage-hooks.usedebouncedupdates_1.md) | |
## Variables
| Variable | Description |
| --- | --- |
| [useAutoFocus](./fuselage-hooks.useautofocus.md) | Hook to automatically request focus for an DOM element. |
| [useBreakpoints](./fuselage-hooks.usebreakpoints.md) | Hook to catch which responsive design' breakpoints are active. |
| [useDebouncedCallback](./fuselage-hooks.usedebouncedcallback.md) | Hook to memoize a debounced version of a callback. |
| [useDebouncedValue](./fuselage-hooks.usedebouncedvalue.md) | Hook to keep a debounced reference of a value. |
| [useIsomorphicLayoutEffect](./fuselage-hooks.useisomorphiclayouteffect.md) | Replacement for the <code>useEffect</code> hook that is safely ignored on SSR. |
| [useLazyRef](./fuselage-hooks.uselazyref.md) | Hook equivalent to useRef, but with a lazy initialization for computed value. |
| [useLocalStorage](./fuselage-hooks.uselocalstorage.md) | Hook to deal with localStorage |
| [useMediaQueries](./fuselage-hooks.usemediaqueries.md) | Hook to listen to a set of media queries. |
| [useMediaQuery](./fuselage-hooks.usemediaquery.md) | Hook to listen to a media query. |
| [useMergedRefs](./fuselage-hooks.usemergedrefs.md) | Hook to merge refs and callbacks refs into a single callback ref. Useful when your component need a internal ref while receiving a forwared ref. |
| [useMutableCallback](./fuselage-hooks.usemutablecallback.md) | Hook to create a stable callback from a mutable one. |
| [useResizeObserver](./fuselage-hooks.useresizeobserver.md) | Hook to track dimension changes in a DOM element using the ResizeObserver API. |
| [useSafely](./fuselage-hooks.usesafely.md) | Hook that wraps pairs of state and dispatcher to provide a new dispatcher which can be safe and asynchronically called even after the component unmounted. |
| [useSessionStorage](./fuselage-hooks.usesessionstorage.md) | Hook to deal with sessionStorage |
| [useStableArray](./fuselage-hooks.usestablearray.md) | Hook to create an array with stable identity if its elements are equal. |
| [useToggle](./fuselage-hooks.usetoggle.md) | Hook to create a toggleable boolean state. |
| [useUniqueId](./fuselage-hooks.useuniqueid.md) | Hook to keep a unique ID string. |
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
[Home](./index.md) &gt; [@rocket.chat/fuselage-hooks](./fuselage-hooks.md) &gt; [useAutoFocus](./fuselage-hooks.useautofocus.md)
## useAutoFocus variable
Hook to automatically request focus for an DOM element.
<b>Signature:</b>
```typescript
useAutoFocus: (isFocused?: boolean, options?: FocusOptions) => Ref<{
focus: (options?: FocusOptions) => void;
}>
```
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
[Home](./index.md) &gt; [@rocket.chat/fuselage-hooks](./fuselage-hooks.md) &gt; [useBreakpoints](./fuselage-hooks.usebreakpoints.md)
## useBreakpoints variable
Hook to catch which responsive design' breakpoints are active.
<b>Signature:</b>
```typescript
useBreakpoints: () => string[]
```
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
[Home](./index.md) &gt; [@rocket.chat/fuselage-hooks](./fuselage-hooks.md) &gt; [useDebouncedCallback](./fuselage-hooks.usedebouncedcallback.md)
## useDebouncedCallback variable
Hook to memoize a debounced version of a callback.
<b>Signature:</b>
```typescript
useDebouncedCallback: <P extends unknown[]>(callback: (...args: P) => unknown, delay: number, deps?: DependencyList) => ((...args: P) => unknown) & {
flush: () => void;
cancel: () => void;
}
```
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
[Home](./index.md) &gt; [@rocket.chat/fuselage-hooks](./fuselage-hooks.md) &gt; [useDebouncedReducer](./fuselage-hooks.usedebouncedreducer.md)
## useDebouncedReducer() function
<b>Signature:</b>
```typescript
export declare function useDebouncedReducer<S, R extends ReducerWithoutAction<S>>(reducer: R, initialArg: S, init: undefined, delay: number): [ReducerStateWithoutAction<R>, DispatchWithoutAction & {
flush: () => void;
cancel: () => void;
}];
```
## Parameters
| Parameter | Type | Description |
| --- | --- | --- |
| reducer | R | |
| initialArg | S | |
| init | undefined | |
| delay | number | |
<b>Returns:</b>
\[ReducerStateWithoutAction&lt;R&gt;, DispatchWithoutAction &amp; { flush: () =&gt; void; cancel: () =&gt; void; }\]
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
[Home](./index.md) &gt; [@rocket.chat/fuselage-hooks](./fuselage-hooks.md) &gt; [useDebouncedReducer](./fuselage-hooks.usedebouncedreducer_1.md)
## useDebouncedReducer() function
<b>Signature:</b>
```typescript
export declare function useDebouncedReducer<S, R extends ReducerWithoutAction<S>, I>(reducer: R, initialArg: I, init: (arg: I) => ReducerStateWithoutAction<R>, delay: number): [ReducerStateWithoutAction<R>, DispatchWithoutAction & {
flush: () => void;
cancel: () => void;
}];
```
## Parameters
| Parameter | Type | Description |
| --- | --- | --- |
| reducer | R | |
| initialArg | I | |
| init | (arg: I) =&gt; ReducerStateWithoutAction&lt;R&gt; | |
| delay | number | |
<b>Returns:</b>
\[ReducerStateWithoutAction&lt;R&gt;, DispatchWithoutAction &amp; { flush: () =&gt; void; cancel: () =&gt; void; }\]
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
[Home](./index.md) &gt; [@rocket.chat/fuselage-hooks](./fuselage-hooks.md) &gt; [useDebouncedReducer](./fuselage-hooks.usedebouncedreducer_2.md)
## useDebouncedReducer() function
<b>Signature:</b>
```typescript
export declare function useDebouncedReducer<S, A, R extends Reducer<S, A>>(reducer: R, initialArg: S, init: undefined, delay: number): [ReducerState<R>, Dispatch<A> & {
flush: () => void;
cancel: () => void;
}];
```
## Parameters
| Parameter | Type | Description |
| --- | --- | --- |
| reducer | R | |
| initialArg | S | |
| init | undefined | |
| delay | number | |
<b>Returns:</b>
\[ReducerState&lt;R&gt;, Dispatch&lt;A&gt; &amp; { flush: () =&gt; void; cancel: () =&gt; void; }\]
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
[Home](./index.md) &gt; [@rocket.chat/fuselage-hooks](./fuselage-hooks.md) &gt; [useDebouncedState](./fuselage-hooks.usedebouncedstate.md)
## useDebouncedState() function
Hook to create a state with a debounced setter function.
<b>Signature:</b>
```typescript
export declare function useDebouncedState<S>(initialValue: S | (() => S), delay: number): [S, Dispatch<SetStateAction<S>> & {
flush: () => void;
cancel: () => void;
}];
```
## Parameters
| Parameter | Type | Description |
| --- | --- | --- |
| initialValue | S \| (() =&gt; S) | the initial state value or the initial state generator function |
| delay | number | the number of milliseconds to delay the updater |
<b>Returns:</b>
\[S, Dispatch&lt;SetStateAction&lt;S&gt;&gt; &amp; { flush: () =&gt; void; cancel: () =&gt; void; }\]
a state and debounced setter function
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
[Home](./index.md) &gt; [@rocket.chat/fuselage-hooks](./fuselage-hooks.md) &gt; [useDebouncedUpdates](./fuselage-hooks.usedebouncedupdates.md)
## useDebouncedUpdates() function
Hook to debounce the state dispatcher function returned by hooks like `useState()` and `useReducer()`<!-- -->.
<b>Signature:</b>
```typescript
export declare function useDebouncedUpdates<S>([state, dispatch]: [S, DispatchWithoutAction], delay: number): [S, DispatchWithoutAction & {
flush: () => void;
cancel: () => void;
}];
```
## Parameters
| Parameter | Type | Description |
| --- | --- | --- |
| \[state, dispatch\] | \[S, DispatchWithoutAction\] | |
| delay | number | the number of milliseconds to delay the dispatcher |
<b>Returns:</b>
\[S, DispatchWithoutAction &amp; { flush: () =&gt; void; cancel: () =&gt; void; }\]
a state value and debounced dispatcher pair
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
[Home](./index.md) &gt; [@rocket.chat/fuselage-hooks](./fuselage-hooks.md) &gt; [useDebouncedUpdates](./fuselage-hooks.usedebouncedupdates_1.md)
## useDebouncedUpdates() function
<b>Signature:</b>
```typescript
export declare function useDebouncedUpdates<S, A>([state, dispatch]: [S, Dispatch<A>], delay: number): [S, Dispatch<A> & {
flush: () => void;
cancel: () => void;
}];
```
## Parameters
| Parameter | Type | Description |
| --- | --- | --- |
| \[state, dispatch\] | \[S, Dispatch&lt;A&gt;\] | |
| delay | number | |
<b>Returns:</b>
\[S, Dispatch&lt;A&gt; &amp; { flush: () =&gt; void; cancel: () =&gt; void; }\]
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
[Home](./index.md) &gt; [@rocket.chat/fuselage-hooks](./fuselage-hooks.md) &gt; [useDebouncedValue](./fuselage-hooks.usedebouncedvalue.md)
## useDebouncedValue variable
Hook to keep a debounced reference of a value.
<b>Signature:</b>
```typescript
useDebouncedValue: <V>(value: V, delay: number) => V
```
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
[Home](./index.md) &gt; [@rocket.chat/fuselage-hooks](./fuselage-hooks.md) &gt; [useIsomorphicLayoutEffect](./fuselage-hooks.useisomorphiclayouteffect.md)
## useIsomorphicLayoutEffect variable
Replacement for the `useEffect` hook that is safely ignored on SSR.
<b>Signature:</b>
```typescript
useIsomorphicLayoutEffect: typeof useEffect
```
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
[Home](./index.md) &gt; [@rocket.chat/fuselage-hooks](./fuselage-hooks.md) &gt; [useLazyRef](./fuselage-hooks.uselazyref.md)
## useLazyRef variable
Hook equivalent to useRef, but with a lazy initialization for computed value.
<b>Signature:</b>
```typescript
useLazyRef: <T>(init: () => T) => MutableRefObject<T>
```
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
[Home](./index.md) &gt; [@rocket.chat/fuselage-hooks](./fuselage-hooks.md) &gt; [useLocalStorage](./fuselage-hooks.uselocalstorage.md)
## useLocalStorage variable
Hook to deal with localStorage
<b>Signature:</b>
```typescript
useLocalStorage: <T>(key: string, initialValue: T) => [T, Dispatch<SetStateAction<T>>]
```
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
[Home](./index.md) &gt; [@rocket.chat/fuselage-hooks](./fuselage-hooks.md) &gt; [useMediaQueries](./fuselage-hooks.usemediaqueries.md)
## useMediaQueries variable
Hook to listen to a set of media queries.
<b>Signature:</b>