Skip to content

Commit

Permalink
Merge branch 'develop' into refactor/chip
Browse files Browse the repository at this point in the history
  • Loading branch information
tassoevan committed Jul 13, 2020
2 parents f542153 + 8539ccf commit 3642867
Show file tree
Hide file tree
Showing 73 changed files with 1,183 additions and 140 deletions.
17 changes: 17 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,23 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

# [0.11.0](https://github.com/RocketChat/Rocket.Chat.Fuselage/compare/v0.10.0...v0.11.0) (2020-07-11)


### Bug Fixes

* Box className prop ([#254](https://github.com/RocketChat/Rocket.Chat.Fuselage/issues/254)) ([5adc7b8](https://github.com/RocketChat/Rocket.Chat.Fuselage/commit/5adc7b8a907eca67bef5e26309c92561f6d8020a))


### Features

* Hooks useLocalStorage and useSessionStorage ([#248](https://github.com/RocketChat/Rocket.Chat.Fuselage/issues/248)) ([7c9a920](https://github.com/RocketChat/Rocket.Chat.Fuselage/commit/7c9a92046f5d7bd01ea9f421470333785ba97ee2))
* useStableArray, useBreakpoints, useMediaQueries ([#253](https://github.com/RocketChat/Rocket.Chat.Fuselage/issues/253)) ([09f95ed](https://github.com/RocketChat/Rocket.Chat.Fuselage/commit/09f95edd7f296de45bc62caa16a1f43848fe3027))





# [0.10.0](https://github.com/RocketChat/Rocket.Chat.Fuselage/compare/v0.9.0...v0.10.0) (2020-06-20)


Expand Down
5 changes: 5 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,9 @@
<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" />
Expand Down
2 changes: 1 addition & 1 deletion lerna.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"version": "0.10.0",
"version": "0.11.0",
"npmClient": "yarn",
"useWorkspaces": true,
"packages": [
Expand Down
8 changes: 8 additions & 0 deletions packages/css-in-js/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

# [0.11.0](https://github.com/RocketChat/Rocket.Chat.Fuselage/compare/v0.10.0...v0.11.0) (2020-07-11)

**Note:** Version bump only for package @rocket.chat/css-in-js





# [0.10.0](https://github.com/RocketChat/Rocket.Chat.Fuselage/compare/v0.9.0...v0.10.0) (2020-06-20)


Expand Down
2 changes: 1 addition & 1 deletion packages/css-in-js/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@rocket.chat/css-in-js",
"version": "0.10.0",
"version": "0.11.0",
"description": "Toolset to transpile and use CSS on runtime",
"homepage": "https://rocket.chat/Rocket.Chat.Fuselage",
"author": {
Expand Down
12 changes: 12 additions & 0 deletions packages/fuselage-hooks/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,18 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

# [0.11.0](https://github.com/RocketChat/Rocket.Chat.Fuselage/compare/v0.10.0...v0.11.0) (2020-07-11)


### Features

* Hooks useLocalStorage and useSessionStorage ([#248](https://github.com/RocketChat/Rocket.Chat.Fuselage/issues/248)) ([7c9a920](https://github.com/RocketChat/Rocket.Chat.Fuselage/commit/7c9a92046f5d7bd01ea9f421470333785ba97ee2))
* useStableArray, useBreakpoints, useMediaQueries ([#253](https://github.com/RocketChat/Rocket.Chat.Fuselage/issues/253)) ([09f95ed](https://github.com/RocketChat/Rocket.Chat.Fuselage/commit/09f95edd7f296de45bc62caa16a1f43848fe3027))





# [0.10.0](https://github.com/RocketChat/Rocket.Chat.Fuselage/compare/v0.9.0...v0.10.0) (2020-06-20)

**Note:** Version bump only for package @rocket.chat/fuselage-hooks
Expand Down
112 changes: 65 additions & 47 deletions packages/fuselage-hooks/README.md
Original file line number Diff line number Diff line change
@@ -1,24 +1,37 @@
# 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
Expand All @@ -40,6 +53,7 @@ yarn test
- [Parameters](#parameters-4)
- [useDebouncedValue](#usedebouncedvalue)
- [Parameters](#parameters-5)
- [useIsomorphicLayoutEffect](#useisomorphiclayouteffect)
- [useLazyRef](#uselazyref)
- [Parameters](#parameters-6)
- [useMediaQueries](#usemediaqueries)
Expand All @@ -54,11 +68,14 @@ yarn test
- [Parameters](#parameters-11)
- [useSafely](#usesafely)
- [Parameters](#parameters-12)
- [Comparator](#comparator)
- [useStableArray](#usestablearray)
- [Parameters](#parameters-13)
- [useToggle](#usetoggle)
- [useLocalStorage](#uselocalstorage)
- [Parameters](#parameters-14)
- [useSessionStorage](#usesessionstorage)
- [Parameters](#parameters-15)
- [useToggle](#usetoggle)
- [Parameters](#parameters-16)
- [useUniqueId](#useuniqueid)

### useAutoFocus
Expand All @@ -68,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

Expand Down Expand Up @@ -122,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
Expand All @@ -139,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.
Expand Down Expand Up @@ -196,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

Expand All @@ -209,61 +230,58 @@ 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.

#### 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
stored array otherwise

### useToggle
### useLocalStorage

Hook to create a toggleable boolean state.
Hook to deal with localStorage

#### 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
- `key` the key associated to the value in the storage
- `initialValue` the value returned when the key is not found at the storage

Returns **\[[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean), D]** a state boolean value and a state toggler function
Returns **any** a state and a setter function

### useUniqueId
### useSessionStorage

Hook to keep a unique ID string.
Hook to deal with sessionStorage

Returns **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** the unique ID string
#### Parameters

## Author
- `key` the key associated to the value in the storage
- `initialValue` the value returned when the key is not found at the storage

👤 **Rocket.Chat**
Returns **any** a state and a setter function

- Twitter: [@RocketChat](https://twitter.com/RocketChat)
- Github: [@RocketChat](https://github.com/RocketChat)
### useToggle

## 🤝 Contributing
Hook to create a toggleable boolean state.

Contributions, issues and feature requests are welcome!
#### Parameters

Feel free to check [issues page](https://github.com/RocketChat/Rocket.Chat.Fuselage/issues).
- `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

## Show your support
Returns **\[[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean), D]** a state boolean value and a state toggler function

Give a ⭐️ if this project helped you!
### useUniqueId

* * *
Hook to keep a unique ID string.

_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_
Returns **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** the unique ID string
33 changes: 33 additions & 0 deletions packages/fuselage-hooks/api-extractor.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
{
"$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"
}
}
}
}
39 changes: 39 additions & 0 deletions packages/fuselage-hooks/docs/fuselage-hooks.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
<!-- 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. |

15 changes: 15 additions & 0 deletions packages/fuselage-hooks/docs/fuselage-hooks.useautofocus.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<!-- 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;
}>
```
13 changes: 13 additions & 0 deletions packages/fuselage-hooks/docs/fuselage-hooks.usebreakpoints.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!-- 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[]
```
Loading

0 comments on commit 3642867

Please sign in to comment.