Merge branch 'new/dropdown' of github.com:RocketChat/Rocket.Chat.Fuse…

…lage into new/dropdown

* 'new/dropdown' of github.com:RocketChat/Rocket.Chat.Fuselage:
  feat: @rocket.chat/string-helpers (#431)
  Fix develop (#432)
  fix: Hollow shapes for status (#430)
  fix: Modal close button size (#420)
  new: Add shredder icon for OTR messages (#423)
  fix: Change highlighted style (#422)
  fix: Tabs design update (#427)
  chore(build): Remove CircleCI configuration
  fix: Prefer null over undefined on BoxTransforms (#426)
  fix: Add more props to Throbber type definition (#429)
  fix: Remove reference to inexistent interface (#424)

.vscode/settings.json

@@ -1,5 +1,13 @@
 {
   "eslint.workingDirectories": [
+    {
+      "directory": "packages/css-in-js",
+      "changeProcessCWD": true
+    },
+    {
+      "directory": "packages/emitter",
+      "changeProcessCWD": true
+    },
     {
       "directory": "packages/fuselage",
       "changeProcessCWD": true
@@ -16,6 +24,18 @@
       "directory": "packages/icons",
       "changeProcessCWD": true
     },
+    {
+      "directory": "packages/memo",
+      "changeProcessCWD": true
+    },
+    {
+      "directory": "packages/mp3-encoder",
+      "changeProcessCWD": true
+    },
+    {
+      "directory": "packages/string-helpers",
+      "changeProcessCWD": true
+    },
     {
       "directory": "packages/ui-kit",
       "changeProcessCWD": true

package.json

@@ -1,10 +1,8 @@
 {
   "private": true,
-  "workspaces": {
-    "packages": [
-      "packages/*"
-    ]
-  },
+  "workspaces": [
+    "packages/*"
+  ],
   "devDependencies": {
     "husky": "^5.1.1",
     "lerna": "^3.20.2"

packages/css-in-js/package.json

@@ -44,7 +44,7 @@
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^11.0.1",
     "@rollup/plugin-typescript": "^8.1.0",
-    "@types/jest": "^26.0.19",
+    "@types/jest": "^26.0.22",
     "@types/stylis": "^4.0.0",
     "@typescript-eslint/eslint-plugin": "^4.11.0",
     "@typescript-eslint/parser": "^4.11.0",

packages/emitter/package.json

@@ -51,7 +51,7 @@
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^11.0.1",
     "@rollup/plugin-typescript": "^8.1.0",
-    "@types/jest": "^26.0.19",
+    "@types/jest": "^26.0.22",
     "@typescript-eslint/eslint-plugin": "^4.11.1",
     "@typescript-eslint/parser": "^4.11.1",
     "documentation": "^13.1.0",

packages/fuselage-hooks/package.json

@@ -51,7 +51,7 @@
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^9.0.0",
     "@rollup/plugin-typescript": "^6.0.0",
-    "@types/jest": "^26.0.15",
+    "@types/jest": "^26.0.22",
     "@types/react-dom": "^16.9.8",
     "@types/resize-observer-browser": "^0.1.3",
     "@types/use-subscription": "^1.0.0",

packages/fuselage/fuselage.d.ts

@@ -232,7 +232,7 @@ declare module '@rocket.chat/fuselage' {
     variant?: 'neutral' | 'info' | 'success' | 'warning' | 'danger';
     onAction?: () => void;
     onClose?: () => void;
-  } & AllHTMLAttributes<HTMLSectionElement>;
+  } & AllHTMLAttributes<HTMLElement>;
   export const Banner: FC<BannerProps>;
 
   type ButtonProps = BoxProps & {
@@ -433,9 +433,11 @@ declare module '@rocket.chat/fuselage' {
   type TileProps = BoxProps;
   export const Tile: ForwardRefExoticComponent<TileProps>;
 
-  type ThrobberProps = Omit<BoxProps, 'size'> & {
-    size?: BoxProps['width'];
+  type ThrobberProps = Omit<BoxProps, 'disabled' | 'size'> & {
+    circleCount?: number;
+    disabled?: boolean;
     inheritColor?: boolean;
+    size?: BoxProps['width'];
   };
   export const Throbber: ForwardRefExoticComponent<ThrobberProps>;
 
@@ -470,6 +472,6 @@ declare module '@rocket.chat/fuselage' {
   type StatusBulletProps = {
     status?: 'loading' | 'online' | 'busy' | 'away' | 'offline';
     size?: 'small' | 'large';
-  } & Omit<AllHTMLAttributes<HTMLSpanElement>, 'size'>;
+  } & Omit<AllHTMLAttributes<HTMLElement>, 'size'>;
   export const StatusBullet: FC<StatusBulletProps>;
 }

packages/fuselage/package.json

@@ -75,7 +75,7 @@
     "@storybook/react": "^6.1.11",
     "@storybook/source-loader": "^6.1.11",
     "@storybook/theming": "^6.1.11",
-    "@types/jest": "^26.0.20",
+    "@types/jest": "^26.0.22",
     "autoprefixer": "^10.0.1",
     "babel-loader": "^8.1.0",
     "caniuse-lite": "^1.0.30001151",

packages/fuselage/src/components/Box/AnimatedVisibility/index.js

@@ -4,7 +4,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 
 import { appendClassName } from '../../../helpers/appendClassName';
 import { useStyle } from '../../../hooks/useStyle';
-import { BoxTransforms, useComposedBoxTransform } from '../transforms';
+import { BoxTransforms, useComposedBoxTransform } from '../BoxTransforms';
 
 function AnimatedVisibility({
   children,

packages/fuselage/src/components/Box/transforms.js → packages/fuselage/src/components/Box/BoxTransforms.ts

@@ -1,10 +1,10 @@
 import { createContext, useContext, useMemo } from 'react';
 
-export const BoxTransforms = createContext();
+export const BoxTransforms = createContext<null | ((props: any) => any)>(null);
 
 export const useBoxTransform = () => useContext(BoxTransforms);
 
-export const useComposedBoxTransform = (fn) => {
+export const useComposedBoxTransform = (fn: (props: any) => any) => {
   const parentFn = useContext(BoxTransforms);
 
   return useMemo(() => {
@@ -16,6 +16,6 @@ export const useComposedBoxTransform = (fn) => {
       return parentFn;
     }
 
-    return (...args) => fn(parentFn(...args));
+    return (props: any) => fn(parentFn(props));
   }, [fn, parentFn]);
 };

packages/fuselage/src/components/Box/Flex/index.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { useCallback } from 'react';
 
-import { BoxTransforms, useComposedBoxTransform } from '../transforms';
+import { BoxTransforms, useComposedBoxTransform } from '../BoxTransforms';
 
 function FlexContainer({
   inline = false,

packages/fuselage/src/components/Box/Scrollable/index.js

@@ -5,7 +5,7 @@ import React, { useRef, useCallback } from 'react';
 
 import { appendClassName } from '../../../helpers/appendClassName';
 import { useStyle } from '../../../hooks/useStyle';
-import { BoxTransforms, useComposedBoxTransform } from '../transforms';
+import { BoxTransforms, useComposedBoxTransform } from '../BoxTransforms';
 
 const getTouchingEdges = (element) => ({
   top: !element.scrollTop,

packages/fuselage/src/components/Box/index.js

@@ -6,10 +6,10 @@ import { appendClassName } from '../../helpers/appendClassName';
 import { prependClassName } from '../../helpers/prependClassName';
 import { useStyle } from '../../hooks/useStyle';
 import { useStyleSheet } from '../../hooks/useStyleSheet';
+import { useBoxTransform, BoxTransforms } from './BoxTransforms';
 import {
   /* propTypes as stylingPropsPropTypes,  */ useStylingProps,
 } from './stylingProps';
-import { useBoxTransform, BoxTransforms } from './transforms';
 
 export const useArrayLikeClassNameProp = (props) => {
   const classNames = [].concat(props.className);
@@ -98,7 +98,7 @@ export const Box = memo(
     const element = createElement(is, props, children);
 
     if (transformFn) {
-      return <BoxTransforms.Provider children={element} />;
+      return <BoxTransforms.Provider children={element} value={null} />;
     }
 
     return element;

packages/fuselage/src/components/Margins/index.js

@@ -6,7 +6,7 @@ import { createPropType } from '../../helpers/createPropType';
 import { patchChildren } from '../../helpers/patchChildren';
 import { useStyle } from '../../hooks/useStyle';
 import { margin } from '../../styleTokens';
-import { BoxTransforms, useComposedBoxTransform } from '../Box/transforms';
+import { BoxTransforms, useComposedBoxTransform } from '../Box/BoxTransforms';
 
 function Margins(props) {
   const {

packages/fuselage/src/components/Modal/ModalClose.js

@@ -1,10 +1,7 @@
 import React from 'react';
 
-import { Button } from '../Button';
-import { Icon } from '../Icon';
+import { ActionButton } from '../Button';
 
 export const ModalClose = (props) => (
-  <Button small ghost flexShrink={0} {...props}>
-    <Icon name='cross' size='x24' />
-  </Button>
+  <ActionButton small ghost flexShrink={0} {...props} icon='cross' />
 );

packages/fuselage/src/components/Sidebar/styles.scss

@@ -48,7 +48,6 @@ $sidebar-item-color-selected: theme(
 }
 
 %highlighted {
-  @include typography.use-font-scale(p2);
   color: $sidebar-item-color-highlighted;
 }