feat(fuselage): Box rewritten in TypeScript (#670)

packages/fuselage/src/.storybook/PropsVariation.tsx

@@ -1,5 +1,5 @@
 import React, { ComponentType } from 'react';
-import { Box } from '../components/Box';
+import Box from '../components/Box';
 
 function PropsVariation({
   component: Component,

packages/fuselage/src/components/Accordion/Accordion.tsx

@@ -1,7 +1,7 @@
 import type { ComponentProps, ReactElement, ReactNode } from 'react';
 import React from 'react';
 
-import { Box } from '../Box';
+import Box from '../Box';
 import { AccordionItem } from './AccordionItem';
 
 type AccordionProps = ComponentProps<typeof Box> & {

packages/fuselage/src/components/Accordion/AccordionItem.tsx

@@ -2,7 +2,7 @@ import { useToggle, useUniqueId } from '@rocket.chat/fuselage-hooks';
 import type { FormEvent, KeyboardEvent, MouseEvent, ReactNode } from 'react';
 import React from 'react';
 
-import { Box } from '../Box';
+import Box from '../Box';
 import { Chevron } from '../Chevron';
 import { ToggleSwitch } from '../ToggleSwitch';
 

packages/fuselage/src/components/AutoComplete/AutoComplete.js

@@ -5,7 +5,7 @@ import {
 import React, { useEffect, useRef, useMemo, useState } from 'react';
 
 import AnimatedVisibility from '../AnimatedVisibility';
-import { Box } from '../Box';
+import Box from '../Box';
 import Chip from '../Chip';
 import { Icon } from '../Icon';
 import { InputBox } from '../InputBox';

packages/fuselage/src/components/Box/Box.spec.tsx

@@ -2,7 +2,7 @@ import { css } from '@rocket.chat/css-in-js';
 import { render } from '@testing-library/react';
 import React from 'react';
 
-import { Box } from '../..';
+import Box from '.';
 
 it('renders without crashing', () => {
   render(<Box />);

packages/fuselage/src/components/Box/Box.tsx

@@ -0,0 +1,66 @@
+import type { cssFn } from '@rocket.chat/css-in-js';
+import React, { createElement, forwardRef, memo } from 'react';
+import type {
+  AllHTMLAttributes,
+  ElementType,
+  RefAttributes,
+  SVGAttributes,
+  Ref,
+} from 'react';
+
+import { useArrayLikeClassNameProp } from '../../hooks/useArrayLikeClassNameProp';
+import { useBoxOnlyProps } from '../../hooks/useBoxOnlyProps';
+import { useStyleSheet } from '../../hooks/useStyleSheet';
+import type { Falsy } from '../../types/Falsy';
+import { useBoxTransform, BoxTransforms } from './BoxTransforms';
+import type { StylingProps } from './stylingProps';
+import { useStylingProps } from './useStylingProps';
+
+type BoxProps = {
+  is?: ElementType;
+  className?: string | cssFn | (string | cssFn | Falsy)[];
+  animated?: boolean;
+  withRichContent?: boolean | 'inlineWithoutBreaks';
+  htmlSize?: AllHTMLAttributes<HTMLElement>['size'];
+} & Partial<StylingProps> &
+  Omit<
+    AllHTMLAttributes<HTMLElement>,
+    'ref' | 'is' | 'className' | 'size' | 'elevation'
+  > &
+  Omit<
+    SVGAttributes<SVGElement>,
+    keyof AllHTMLAttributes<HTMLElement> | 'elevation'
+  >;
+
+export const Box = forwardRef(function Box(
+  { is = 'div', children, ...props }: BoxProps,
+  ref: Ref<any>
+) {
+  useStyleSheet();
+
+  const propsWithRef: BoxProps & RefAttributes<any> = props;
+
+  if (ref) {
+    propsWithRef.ref = ref;
+  }
+
+  let propsWithStringClassName = useArrayLikeClassNameProp(propsWithRef);
+
+  const transformFn = useBoxTransform();
+  if (transformFn) {
+    propsWithStringClassName = transformFn(propsWithStringClassName);
+  }
+
+  const propsWithoutStylingProps = useStylingProps(propsWithStringClassName);
+  const propsWithoutBoxOnlyProps = useBoxOnlyProps(propsWithoutStylingProps);
+
+  const element = createElement(is, propsWithoutBoxOnlyProps, children);
+
+  if (transformFn) {
+    return <BoxTransforms.Provider children={element} value={null} />;
+  }
+
+  return element;
+});
+
+export default memo(Box);

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

@@ -0,0 +1 @@
+export { default } from './Box';