Merge branch 'develop' of github.com:RocketChat/Rocket.Chat.Fuselage …

…into table * 'develop' of github.com:RocketChat/Rocket.Chat.Fuselage: fix: Avatar sizes (#202) v0.8.0 refactor!: Remove unused components (#206) fix: Selection button props split between container and input elements (#207) fix: Badge and Tag rendering a span (#208) feat: New hooks and server-side compatibility (#203) fix: Add missing Box prop types (#204)
RocketChat · Apr 23, 2020 · 68f9bcb · 68f9bcb
2 parents 84dcf48 + 7ff3fd9
commit 68f9bcb
Show file tree

Hide file tree

Showing 178 changed files with 1,006 additions and 1,523 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,27 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.8.0](https://github.com/RocketChat/Rocket.Chat.Fuselage/compare/v0.7.1...v0.8.0) (2020-04-22)
+
+
+### Bug Fixes
+
+* Add missing Box prop types ([#204](https://github.com/RocketChat/Rocket.Chat.Fuselage/issues/204)) ([5ab9f6a](https://github.com/RocketChat/Rocket.Chat.Fuselage/commit/5ab9f6a001738ae6eedd9f593ff52ac58f23a4df))
+* Badge and Tag rendering a span ([#208](https://github.com/RocketChat/Rocket.Chat.Fuselage/issues/208)) ([d8a5ed2](https://github.com/RocketChat/Rocket.Chat.Fuselage/commit/d8a5ed2a1afaa9e58bea307dab7d42b1593bab2b))
+* Center Throbber circles ([#198](https://github.com/RocketChat/Rocket.Chat.Fuselage/issues/198)) ([be0aa60](https://github.com/RocketChat/Rocket.Chat.Fuselage/commit/be0aa603e209c96029d2232ad7d2b79c13ba628d))
+* Selection button props split between container and input elements ([#207](https://github.com/RocketChat/Rocket.Chat.Fuselage/issues/207)) ([19cc1df](https://github.com/RocketChat/Rocket.Chat.Fuselage/commit/19cc1dfc9d58a539f6bb6b98e67c933378e07bfd))
+* Update Callout to allow empty children ([#200](https://github.com/RocketChat/Rocket.Chat.Fuselage/issues/200)) ([58bdc4e](https://github.com/RocketChat/Rocket.Chat.Fuselage/commit/58bdc4ecdab445709b62e16917b922eeebb74d98))
+
+
+### Features
+
+* New hooks and server-side compatibility ([#203](https://github.com/RocketChat/Rocket.Chat.Fuselage/issues/203)) ([ca620a0](https://github.com/RocketChat/Rocket.Chat.Fuselage/commit/ca620a0436dbbb89290e60ed1658985ece54f110))
+* Refactor static styles ([#201](https://github.com/RocketChat/Rocket.Chat.Fuselage/issues/201)) ([e1bdc65](https://github.com/RocketChat/Rocket.Chat.Fuselage/commit/e1bdc655a0dfe0f88261d3fab84c2e42c2ad581e))
+
+
+
+
+
 ## [0.7.1](https://github.com/RocketChat/Rocket.Chat.Fuselage/compare/v0.7.0...v0.7.1) (2020-04-01)
 
 

diff --git a/lerna.json b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.7.1",
+  "version": "0.8.0",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "packages": [

diff --git a/packages/css-in-js/CHANGELOG.md b/packages/css-in-js/CHANGELOG.md
@@ -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.8.0](https://github.com/RocketChat/Rocket.Chat.Fuselage/compare/v0.7.1...v0.8.0) (2020-04-22)
+
+**Note:** Version bump only for package @rocket.chat/css-in-js
+
+
+
+
+
 ## [0.7.1](https://github.com/RocketChat/Rocket.Chat.Fuselage/compare/v0.7.0...v0.7.1) (2020-04-01)
 
 **Note:** Version bump only for package @rocket.chat/css-in-js

diff --git a/packages/css-in-js/package.json b/packages/css-in-js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@rocket.chat/css-in-js",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "description": "Toolset to transpile and use CSS on runtime",
   "homepage": "https://rocket.chat/Rocket.Chat.Fuselage",
   "author": {

diff --git a/packages/fuselage-hooks/.flowconfig b/packages/fuselage-hooks/.flowconfig
@@ -8,5 +8,6 @@ flow-typed
 [lints]
 
 [options]
+esproposal.optional_chaining=enable
 
 [strict]
diff --git a/packages/fuselage-hooks/.jest/helpers.js b/packages/fuselage-hooks/.jest/helpers.js
@@ -1,5 +1,6 @@
 import React, { useReducer, Component, createElement } from 'react';
 import ReactDOM, { render, unmountComponentAtNode } from 'react-dom';
+import { renderToString } from 'react-dom/server';
 import { act } from 'react-dom/test-utils';
 
 export const runHooks = (fn, mutations = []) => {
@@ -55,3 +56,16 @@ export const runHooks = (fn, mutations = []) => {
 
   return values;
 };
+
+export const runHooksOnServer = (fn) => {
+  let returnedValue;
+
+  function FunctionalComponent() {
+    returnedValue = fn();
+    return null;
+  }
+
+  renderToString(<FunctionalComponent />);
+
+  return returnedValue;
+};
diff --git a/packages/fuselage-hooks/CHANGELOG.md b/packages/fuselage-hooks/CHANGELOG.md
@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.8.0](https://github.com/RocketChat/Rocket.Chat.Fuselage/compare/v0.7.1...v0.8.0) (2020-04-22)
+
+
+### Features
+
+* New hooks and server-side compatibility ([#203](https://github.com/RocketChat/Rocket.Chat.Fuselage/issues/203)) ([ca620a0](https://github.com/RocketChat/Rocket.Chat.Fuselage/commit/ca620a0436dbbb89290e60ed1658985ece54f110))
+
+
+
+
+
 ## [0.7.1](https://github.com/RocketChat/Rocket.Chat.Fuselage/compare/v0.7.0...v0.7.1) (2020-04-01)
 
 **Note:** Version bump only for package @rocket.chat/fuselage-hooks

diff --git a/packages/fuselage-hooks/README.md b/packages/fuselage-hooks/README.md
@@ -27,7 +27,7 @@ yarn test
 
 #### Table of Contents
 
--   [useClassName](#useclassname)
+-   [useAutoFocus](#useautofocus)
     -   [Parameters](#parameters)
 -   [useDebouncedUpdates](#usedebouncedupdates)
     -   [Parameters](#parameters-1)
@@ -37,29 +37,31 @@ yarn test
     -   [Parameters](#parameters-3)
 -   [useDebouncedCallback](#usedebouncedcallback)
     -   [Parameters](#parameters-4)
--   [useExclusiveBooleanProps](#useexclusivebooleanprops)
+-   [useDebouncedValue](#usedebouncedvalue)
     -   [Parameters](#parameters-5)
--   [useMediaQuery](#usemediaquery)
+-   [useLazyRef](#uselazyref)
     -   [Parameters](#parameters-6)
--   [useMergedRefs](#usemergedrefs)
+-   [useMediaQuery](#usemediaquery)
     -   [Parameters](#parameters-7)
--   [useMutableCallback](#usemutablecallback)
+-   [useMergedRefs](#usemergedrefs)
     -   [Parameters](#parameters-8)
--   [useToggle](#usetoggle)
+-   [useMutableCallback](#usemutablecallback)
     -   [Parameters](#parameters-9)
+-   [useSafely](#usesafely)
+    -   [Parameters](#parameters-10)
+-   [useToggle](#usetoggle)
+    -   [Parameters](#parameters-11)
 
-### useClassName
+### useAutoFocus
 
-Hook to generate a BEM-compatible `className` value for a component.
+Hook to automatically request focus for an DOM element.
 
 #### Parameters
 
--   `componentClassName` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** the style class which identifies the component
--   `modifiers` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** the modifiers applied to the style class (optional, default `{}`)
--   `classNames` **...[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)>** the additional style classes appended to the `className`
+-   `isFocused` **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** if true, the focus will be requested (optional, default `true`)
+-   `options` **FocusOptions** options of the focus request
 
-Returns **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** a BEM-compatible `className` in the format
- `(<block>|<block>__<element>) [...(<block>--<modifier>|<block>__<element>--<modifier>)] [...classNames]`
+Returns **any** the ref which holds the element
 
 ### useDebouncedUpdates
 
@@ -110,17 +112,26 @@ Hook to memoize a debounced version of a callback.
 
 Returns **function (): any** a memoized and debounced callback
 
-### useExclusiveBooleanProps
+### useDebouncedValue
 
-Hook for asserting mutually exclusive boolean props. Useful for components that use boolean props
-to choose styling variants.
+Hook to keep a debounced reference of a value.
 
 #### Parameters
 
--   `props` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** the mutually exclusive boolean props
+-   `value` **any** the value to be debounced
+-   `delay` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** the number of milliseconds to delay
+
+Returns **any** a debounced value
+
+### useLazyRef
 
+Hook equivalent to useRef, but with a lazy initialization for computed value.
 
--   Throws **any** if two or more booleans props are set as true
+#### Parameters
+
+-   `initializer` **function (): T** the function the computes the ref value
+
+Returns **any** the ref
 
 ### useMediaQuery
 
@@ -153,6 +164,19 @@ Hook to create a stable callback from a mutable one.
 
 Returns **any** a stable callback
 
+### useSafely
+
+Hook that wraps pairs of state and updater to provide a new updater which
+can be safe and asynchronically called even after the component unmounted.
+
+#### Parameters
+
+-   `pair` **\[any, function (): any]** the state and updater pair which will be patched
+    -   `pair.0`  the state value
+    -   `pair.1`  the state updater function
+
+Returns **any** a state value and safe updater pair
+
 ### useToggle
 
 Hook to create a toggleable boolean state.

diff --git a/packages/fuselage-hooks/package.json b/packages/fuselage-hooks/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@rocket.chat/fuselage-hooks",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "description": "React Hooks for Fuselage, Rocket.Chat's design system",
   "homepage": "https://rocket.chat/Rocket.Chat.Fuselage",
   "author": {

diff --git a/packages/fuselage-hooks/src/helpers.js b/packages/fuselage-hooks/src/helpers.js
@@ -1,8 +1,5 @@
 // @flow
 
-export const fromCamelToKebabCase = (camelCaseString: string) =>
-  camelCaseString.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
-
 export const debounce = (fn: (...Array<any>) => any, delay: number) => {
   let timer;
   let callback;
@@ -24,3 +21,5 @@ export const debounce = (fn: (...Array<any>) => any, delay: number) => {
 
   return f;
 };
+
+export const isRunningOnBrowser = typeof window !== 'undefined' && window.document;
diff --git a/packages/fuselage-hooks/src/index.js b/packages/fuselage-hooks/src/index.js
@@ -1,11 +1,13 @@
 // @flow
 
-export * from './useClassName';
+export * from './useAutoFocus';
 export * from './useDebouncedUpdates';
 export * from './useDebouncedCallback';
-export * from './useExclusiveBooleanProps';
+export * from './useDebouncedValue';
+export * from './useLazyRef';
 export * from './useMediaQuery';
 export * from './useMergedRefs';
 export * from './useMutableCallback';
+export * from './useSafely';
 export * from './useToggle';
 export * from './useUniqueId';
diff --git a/packages/fuselage-hooks/src/useAutoFocus.js b/packages/fuselage-hooks/src/useAutoFocus.js
@@ -0,0 +1,26 @@
+// @flow
+
+import { useEffect, useRef } from 'react';
+
+type FocusOptions = {
+  preventScroll?: boolean,
+} | typeof undefined;
+
+/**
+ * Hook to automatically request focus for an DOM element.
+ *
+ * @param isFocused if true, the focus will be requested
+ * @param options options of the focus request
+ * @return the ref which holds the element
+ */
+export const useAutoFocus = (isFocused: boolean = true, options: FocusOptions) => {
+  const elementRef = useRef<?HTMLElement>();
+
+  useEffect(() => {
+    if (isFocused && elementRef.current) {
+      elementRef.current.focus(options);
+    }
+  }, [elementRef, isFocused]);
+
+  return elementRef;
+};
diff --git a/packages/fuselage-hooks/src/useClassName.js b/packages/fuselage-hooks/src/useClassName.js
diff --git a/packages/fuselage-hooks/src/useDebouncedValue.js b/packages/fuselage-hooks/src/useDebouncedValue.js
@@ -0,0 +1,26 @@
+// @flow
+
+import { useEffect, useState } from 'react';
+
+/**
+ * Hook to keep a debounced reference of a value.
+ *
+ * @param value the value to be debounced
+ * @param delay the number of milliseconds to delay
+ * @return a debounced value
+ */
+export const useDebouncedValue = (value: any, delay: number) => {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+};
diff --git a/packages/fuselage-hooks/src/useExclusiveBooleanProps.js b/packages/fuselage-hooks/src/useExclusiveBooleanProps.js
diff --git a/packages/fuselage-hooks/src/useLazyRef.js b/packages/fuselage-hooks/src/useLazyRef.js
@@ -0,0 +1,16 @@
+// @flow
+
+import { createRef, useState } from 'react';
+
+/**
+ * Hook equivalent to useRef, but with a lazy initialization for computed value.
+ *
+ * @param initializer the function the computes the ref value
+ * @return the ref
+ */
+export const useLazyRef = <T>(initializer: () => T) =>
+  useState(() => {
+    const ref = createRef<T>();
+    ref.current = initializer();
+    return ref;
+  })[0];