fix: Performance issues in development environment (#89)

packages/fuselage/.storybook/.babelrc

@@ -19,6 +19,5 @@
   ],
   "plugins": [
     "@babel/plugin-proposal-class-properties",
-    "babel-plugin-styled-components"
   ]
 }

packages/fuselage/babel.config.js

@@ -5,14 +5,5 @@ module.exports = {
   ],
   plugins: [
     '@babel/plugin-proposal-class-properties',
-    [
-      'babel-plugin-styled-components',
-      {
-        displayName: false,
-        fileName: false,
-        minify: false,
-        transpileTemplateLiterals: false,
-      },
-    ],
   ],
 };

packages/fuselage/package.json

@@ -36,8 +36,7 @@
   },
   "peerDependencies": {
     "@rocket.chat/fuselage-hooks": "^0.2.0-alpha.9",
-    "react": "^16.8.6",
-    "styled-components": "^4.4.0"
+    "react": "^16.8.6"
   },
   "devDependencies": {
     "@babel/core": "^7.4.5",
@@ -60,7 +59,6 @@
     "autoprefixer": "^9.6.1",
     "babel-eslint": "^10.0.2",
     "babel-loader": "^8.0.6",
-    "babel-plugin-styled-components": "^1.10.6",
     "cross-env": "^5.2.0",
     "css-vars-ponyfill": "^2.0.2",
     "cssnano": "^4.1.10",
@@ -82,7 +80,6 @@
     "postcss-loader": "^3.0.0",
     "react": "^16.8.6",
     "sass-loader": "^7.1.0",
-    "styled-components": "^4.4.0",
     "stylelint": "^10.0.1",
     "stylelint-order": "^3.0.0",
     "stylelint-scss": "^3.11.1",
@@ -116,7 +113,7 @@
   "dependencies": {
     "@rocket.chat/fuselage-tokens": "^0.2.0-alpha.14",
     "@rocket.chat/icons": "^0.2.0-alpha.14",
-    "invariant": "^2.2.4"
+    "nano-memoize": "^1.1.7"
   },
   "browserslist": {
     "production": [

packages/fuselage/src/components/Accordion/Item.js

@@ -5,12 +5,13 @@ import React from 'react';
 import { createStyledComponent } from '../../styles';
 import { Icon } from '../Icon';
 import { ToggleSwitch } from '../ToggleSwitch';
-import styles from './styles';
 
-const ItemContainer = createStyledComponent(styles, 'rcx-accordion-item', 'section');
-const ItemBar = createStyledComponent(styles, 'rcx-accordion-item__bar');
-const ItemTitle = createStyledComponent(styles, 'rcx-accordion-item__title', 'h1');
-const ItemPanel = createStyledComponent(styles, 'rcx-accordion-item__panel');
+const ItemContainer = createStyledComponent('rcx-accordion-item', 'section');
+const ItemBar = createStyledComponent('rcx-accordion-item__bar');
+const ItemTitle = createStyledComponent('rcx-accordion-item__title', 'h1');
+const ItemToggleSwitchContainer = createStyledComponent('rcx-accordion-item__toggle-switch');
+const ItemIconContainer = createStyledComponent('rcx-accordion-item__icon');
+const ItemPanel = createStyledComponent('rcx-accordion-item__panel');
 
 export const Item = React.forwardRef(function Item({
   children,
@@ -87,15 +88,19 @@ export const Item = React.forwardRef(function Item({
   const barProps = noncollapsible ? nonCollapsibleProps : collapsibleProps;
 
   return <ItemContainer className={className} {...props}>
-    {title && <ItemBar modifiers={{ disabled, expanded }} ref={ref} {...barProps}>
+    {title && <ItemBar mod-disabled={disabled} ref={ref} {...barProps}>
       <ItemTitle id={titleId}>{title}</ItemTitle>
       {!noncollapsible && <>
         {(disabled || onToggleEnabled)
-          && <ToggleSwitch checked={!disabled} onClick={handleToggleClick} onChange={onToggleEnabled} />}
-        <Icon name={'arrow-down'} />
+          && <ItemToggleSwitchContainer>
+            <ToggleSwitch checked={!disabled} onClick={handleToggleClick} onChange={onToggleEnabled} />
+          </ItemToggleSwitchContainer>}
+        <ItemIconContainer mod-flipped={expanded}>
+          <Icon name={'arrow-down'} x24 />
+        </ItemIconContainer>
       </>}
     </ItemBar>}
-    <ItemPanel id={panelId} modifiers={{ expanded: panelExpanded }} role='region'>
+    <ItemPanel id={panelId} mod-expanded={panelExpanded} role='region'>
       {children}
     </ItemPanel>
   </ItemContainer>;
@@ -119,5 +124,3 @@ Item.propTypes = {
   onToggle: PropTypes.func,
   onToggleEnabled: PropTypes.func,
 };
-
-Item.styled = ItemContainer;

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

@@ -3,9 +3,8 @@ import React from 'react';
 
 import { createStyledComponent } from '../../styles';
 import { Item } from './Item';
-import styles from './styles';
 
-const Container = createStyledComponent(styles, 'rcx-accordion');
+const Container = createStyledComponent('rcx-accordion');
 
 export const Accordion = React.forwardRef(function Accordion(props, ref) {
   return <Container ref={ref} {...props} />;
@@ -18,5 +17,3 @@ Accordion.propTypes = {
 };
 
 Accordion.Item = Item;
-
-Accordion.styled = Container;

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

@@ -53,22 +53,6 @@
     }
   }
 
-  & > .rcx-toggle-switch {
-    margin: 0 #{ $sizes-x24 };
-    margin-block: 0;
-    margin-inline: #{ $sizes-x24 };
-  }
-
-  & > .rcx-icon {
-    font-size: #{ $sizes-x24 };
-  }
-
-  &--expanded {
-    & > .rcx-icon {
-      transform: rotate(-180deg);
-    }
-  }
-
   &--disabled {
     cursor: not-allowed;
 
@@ -87,6 +71,22 @@
   @include truncate;
 }
 
+.rcx-accordion-item__toggle-switch {
+  @include box;
+
+  margin: 0 #{ $sizes-x24 };
+  margin-block: 0;
+  margin-inline: #{ $sizes-x24 };
+}
+
+.rcx-accordion-item__icon {
+  @include box;
+
+  &--flipped {
+    transform: rotate(-180deg);
+  }
+}
+
 .rcx-accordion-item__panel {
   @include box;
 

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

@@ -1,19 +1,16 @@
-import { useClassName } from '@rocket.chat/fuselage-hooks';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import { StyledBox } from './styles';
+import { createStyledComponent } from '../../styles';
+
+const Container = createStyledComponent('rcx-box', 'div');
 
-/** A primitive component with normalized styles. */
 export const Box = React.forwardRef(function Box({
-  className,
-  invisible = false,
-  is = 'div',
+  invisible,
+  is,
   ...props
 }, ref) {
-  const compoundClassName = useClassName('rcx-box', { invisible }, className);
-
-  return <StyledBox as={is} className={compoundClassName} invisible={invisible} ref={ref} {...props} />;
+  return <Container as={is} invisible={invisible} ref={ref} {...props} />;
 });
 
 Box.defaultProps = {
@@ -26,6 +23,5 @@ Box.displayName = 'Box';
 Box.propTypes = {
   /** Is this component visible? */
   invisible: PropTypes.bool,
-  /** The component which will render as a `Box` */
   is: PropTypes.elementType,
 };

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

@@ -0,0 +1,3 @@
+.rcx-box {
+  @include box;
+}