fix: Add missing ref support (#43)

* Update code snippets * Fix eslint dependency error * Add ref support to Button and ButtonGroup * Add ref support for CheckBox, Icon, RadioButton, and ToggleSwitch * Update jest-results * Fix dependencies * Add empty CHANGELOG
RocketChat · Aug 15, 2019 · b62cbfc · b62cbfc
1 parent 42e123b
commit b62cbfc
Show file tree

Hide file tree

Showing 17 changed files with 296 additions and 1,766 deletions.
diff --git a/.vscode/fuselage.code-snippets b/.vscode/fuselage.code-snippets
@@ -13,12 +13,8 @@
       "  className,",
       "  ...props",
       "}) {",
-      "  return (",
-      "    <div",
-      "      className={useStyle(styles, '$1', {}, className)}",
-      "      {...props}",
-      "    />",
-      "  );",
+      "  const $3ClassName = useStyle(styles, '$2', {}, className);",
+      "  return <div className={$3ClassName} {...props} />;",
       "}"
     ],
   },
@@ -48,31 +44,40 @@
       "import { storiesOf } from '@storybook/react';",
       "import React from 'react';",
       "",
+      "import { createPropsFromKnobs } from '../../helpers/storybook';",
       "import { $1 } from './index';",
       "",
       "",
-      "const props = () => ({});",
+      "const props = createPropsFromKnobs({",
+      "  ",
+      "});",
       "",
       "storiesOf('$2|$1', module)",
       "  .addDecorator(withKnobs)",
       "  .addDecorator(centered)",
       "  .addParameters({ jest: ['spec'] })",
-      "  .add('default', () => (",
+      "  .add('default', () =>",
       "    <$1 {...props()} />",
-      "  ));"
+      "  );"
     ],
   },
   "New component styles.scss": {
     "scope": "scss",
     "prefix": "fuselage-styles",
     "body": [
-      ":root {",
-      "  --rcx-$2-color: var(--color-dark-900);",
-      "}",
+      "@import '../../helpers/mixins.scss';",
+      "@import '../../helpers/theme-var.scss';",
+      "@import '../../styles/color-palette.scss';",
+      "@import '../../styles/dimensions.scss';",
+      "@import '../../styles/typography.scss';",
+      "",
+      "\\$name: '$1';",
+      "",
+      "\\$default-theme: ();",
       "",
       ".$1 {",
-      "  color: var(--rcx-$2-color);",
-      "}"
+      "  @include reset;",
+      "}",
     ],
   },
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,20 +1,4 @@
 {
-	"workbench.colorCustomizations": {
-		"editorWarning.foreground": "#00ff0030",
-		"editorError.foreground": "#ff0000ff",
-		"activityBar.background": "#65c89b",
-		"activityBar.foreground": "#15202b",
-		"activityBar.inactiveForeground": "#15202b99",
-		"activityBarBadge.background": "#945bc4",
-		"activityBarBadge.foreground": "#e7e7e7",
-		"titleBar.activeBackground": "#42b883",
-		"titleBar.inactiveBackground": "#42b88399",
-		"titleBar.activeForeground": "#15202b",
-		"titleBar.inactiveForeground": "#15202b99",
-		"statusBar.background": "#42b883",
-		"statusBarItem.hoverBackground": "#359268",
-		"statusBar.foreground": "#15202b"
-  },
   "eslint.workingDirectories": [
     {
 			"directory": "packages/fuselage",

diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/package.json b/package.json
@@ -9,10 +9,8 @@
     "@babel/core": "^7.4.5",
     "@babel/preset-env": "^7.4.5",
     "@babel/preset-react": "^7.0.0",
-    "@rocket.chat/eslint-config": "^0.3.0",
     "babel-loader": "^8.0.6",
     "cross-env": "^5.2.0",
-    "eslint-plugin-react": "^7.13.0",
     "fs-extra": "^8.0.1",
     "gh-pages": "^2.0.1",
     "husky": "^2.3.0",

diff --git a/packages/fuselage/.storybook/jest-results.json b/packages/fuselage/.storybook/jest-results.json
diff --git a/packages/fuselage/package.json b/packages/fuselage/package.json
@@ -39,6 +39,7 @@
   },
   "devDependencies": {
     "@babel/plugin-transform-runtime": "^7.5.0",
+    "@rocket.chat/eslint-config": "^0.4.0",
     "@storybook/addon-a11y": "^5.0.11",
     "@storybook/addon-actions": "^5.0.11",
     "@storybook/addon-backgrounds": "^5.0.11",
@@ -57,8 +58,9 @@
     "babel-loader": "^8.0.6",
     "css-vars-ponyfill": "^2.0.2",
     "cssnano": "^4.1.10",
-    "eslint": "^6.0.1",
-    "eslint-plugin-react": "^7.13.0",
+    "eslint": "^6.1.0",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-react": "^7.14.3",
     "final-form": "^4.16.1",
     "husky": "^2.3.0",
     "identity-obj-proxy": "^3.0.0",

diff --git a/packages/fuselage/src/components/Button/index.js b/packages/fuselage/src/components/Button/index.js
@@ -4,7 +4,7 @@ import { useStyle } from '../../hooks/styles';
 import styles from './styles.scss';
 
 
-export function Button({
+export const Button = React.forwardRef(function Button({
   as: Component = 'button',
   className,
   danger,
@@ -14,7 +14,7 @@ export function Button({
   small,
   square,
   ...props
-}) {
+}, ref) {
   const buttonClassName = useStyle(styles, 'rcx-button', {
     danger,
     ghost,
@@ -24,5 +24,5 @@ export function Button({
     primary,
   }, className);
 
-  return <Component className={buttonClassName} {...props} />;
-}
+  return <Component className={buttonClassName} ref={ref} {...props} />;
+});
diff --git a/packages/fuselage/src/components/ButtonGroup/index.js b/packages/fuselage/src/components/ButtonGroup/index.js
@@ -4,20 +4,22 @@ import { useStyle } from '../../hooks/styles';
 import styles from './styles.scss';
 
 
-export function ButtonGroup({
+export const ButtonGroup = React.forwardRef(function ButtonGroup({
+  align,
   className,
   invisible,
   stretch,
   vertical,
   wrap,
   ...props
-}) {
+}, ref) {
   const buttonGroupClassName = useStyle(styles, 'rcx-button-group', {
+    align,
     invisible,
     stretch,
     vertical,
     wrap,
   }, className);
 
-  return <div className={buttonGroupClassName} role='group' {...props}/>;
-}
+  return <div className={buttonGroupClassName} role='group' ref={ref} {...props}/>;
+});
diff --git a/packages/fuselage/src/components/ButtonGroup/stories.js b/packages/fuselage/src/components/ButtonGroup/stories.js
@@ -27,12 +27,15 @@ storiesOf('Collections|ButtonGroup', module)
   </Document>);
 
 const props = createPropsFromKnobs({
-  blockStretch: false,
   hidden: false,
   invisible: false,
   stretch: false,
   vertical: false,
   wrap: false,
+  align: [null, {
+    start: 'start',
+    end: 'end',
+  }],
 });
 
 const Buttons = ({ count }) => new Array(count).fill(undefined).map((_, i) =>

diff --git a/packages/fuselage/src/components/ButtonGroup/styles.scss b/packages/fuselage/src/components/ButtonGroup/styles.scss
@@ -46,4 +46,12 @@ $default-theme: (
       align-items: stretch;
     }
   }
+
+  &--align-start {
+    justify-content: flex-start;
+  }
+
+  &--align-end {
+    justify-content: flex-end;
+  }
 }
diff --git a/packages/fuselage/src/components/CheckBox/index.js b/packages/fuselage/src/components/CheckBox/index.js
@@ -1,17 +1,20 @@
-import React, { useEffect, useRef } from 'react';
+import React, { forwardRef, useEffect, useRef } from 'react';
 
 import { useStyle } from '../../hooks/styles';
 import styles from './styles.scss';
+import { useMergedRefs } from '../../hooks/useMergedRefs';
 
 
-export function CheckBox({
+export const CheckBox = forwardRef(function CheckBox({
   className,
   indeterminate,
   invisible,
   label,
   ...props
-}) {
-  const ref = useRef();
+}, ref) {
+  const innerRef = useRef();
+  const mergedRef = useMergedRefs(ref, innerRef);
+
   const checkBoxWrapperClassName = useStyle(styles, 'rcx-check-box__wrapper', {
     disabled: props.disabled,
     invisible,
@@ -21,14 +24,14 @@ export function CheckBox({
   const checkBoxLabelClassName = useStyle(styles, 'rcx-check-box__label');
 
   useEffect(() => {
-    ref.current.indeterminate = indeterminate;
+    innerRef.current.indeterminate = indeterminate;
   }, [indeterminate]);
 
   return <label className={checkBoxWrapperClassName} hidden={props.hidden}>
-    <input type='checkbox' className={checkBoxInputClassName} ref={ref} {...props} />
+    <input type='checkbox' className={checkBoxInputClassName} ref={mergedRef} {...props} />
     <span className={checkBoxFakeClassName} />
     {label && <span className={checkBoxLabelClassName}>
       {label}
     </span>}
   </label>;
-}
+});
diff --git a/packages/fuselage/src/components/Icon/index.js b/packages/fuselage/src/components/Icon/index.js
@@ -9,12 +9,12 @@ import styles from './styles.scss';
 
 const mapNames = Object.entries(names).reduce((map, [symbol, name]) => Object.assign(map, { [name]: symbol }), {});
 
-export function Icon({
+export const Icon = React.forwardRef(function Icon({
   name,
   className,
   ...props
-}) {
+}, ref) {
   const iconClassName = useStyle(styles, 'rcx-icon');
 
-  return <i className={iconClassName} data-char={characters[mapNames[name]]} {...props} />;
-}
+  return <i className={iconClassName} data-char={characters[mapNames[name]]} ref={ref} {...props} />;
+});
diff --git a/packages/fuselage/src/components/RadioButton/index.js b/packages/fuselage/src/components/RadioButton/index.js
@@ -4,12 +4,12 @@ import { useStyle } from '../../hooks/styles';
 import styles from './styles.scss';
 
 
-export function RadioButton({
+export const RadioButton = React.forwardRef(function RadioButton({
   className,
   invisible,
   label,
   ...props
-}) {
+}, ref) {
   const radioButtonWrapperClassName = useStyle(styles, 'rcx-radio-button__wrapper', {
     disabled: props.disabled,
     invisible,
@@ -19,10 +19,10 @@ export function RadioButton({
   const radioButtonLabelClassName = useStyle(styles, 'rcx-radio-button__label');
 
   return <label className={radioButtonWrapperClassName} hidden={props.hidden}>
-    <input type='radio' className={radioButtonInputClassName} {...props} />
+    <input type='radio' className={radioButtonInputClassName} ref={ref} {...props} />
     <span className={radioButtonFakeClassName} />
     {label && <span className={radioButtonLabelClassName}>
       {label}
     </span>}
   </label>;
-}
+});
diff --git a/packages/fuselage/src/components/ToggleSwitch/index.js b/packages/fuselage/src/components/ToggleSwitch/index.js
@@ -4,11 +4,11 @@ import { useStyle } from '../../hooks/styles';
 import styles from './styles.scss';
 
 
-export function ToggleSwitch({
+export const ToggleSwitch = React.forwardRef(function ToggleSwitch({
   className,
   invisible,
   ...props
-}) {
+}, ref) {
   const toggleSwitchWrapperClassName = useStyle(styles, 'rcx-toggle-switch__wrapper', {
     disabled: props.disabled,
     invisible,
@@ -17,7 +17,7 @@ export function ToggleSwitch({
   const toggleSwitchFakeClassName = useStyle(styles, 'rcx-toggle-switch__fake');
 
   return <label className={toggleSwitchWrapperClassName} hidden={props.hidden}>
-    <input type='checkbox' className={toggleSwitchInputClassName} {...props} />
+    <input type='checkbox' className={toggleSwitchInputClassName} ref={ref} {...props} />
     <span className={toggleSwitchFakeClassName} />
   </label>;
-}
+});
diff --git a/packages/fuselage/src/hooks/useMergedRefs.js b/packages/fuselage/src/hooks/useMergedRefs.js
@@ -0,0 +1,10 @@
+export const useMergedRefs = (...refs) => (refValue) => {
+  refs.filter(Boolean).forEach((ref) => {
+    if (typeof ref === 'function') {
+      ref(refValue);
+      return;
+    }
+
+    ref.current = refValue;
+  });
+};
diff --git a/packages/icons/package.json b/packages/icons/package.json
@@ -22,6 +22,9 @@
     "lint": "eslint ."
   },
   "devDependencies": {
+    "@rocket.chat/eslint-config": "^0.4.0",
+    "eslint": "^6.1.0",
+    "eslint-plugin-import": "^2.18.2",
     "glob": "^7.1.4",
     "is-valid-identifier": "^2.0.2",
     "rimraf": "^2.6.3",