From 61a9ddf3af5614a7ab34bb9f8ac46a02be7a4e89 Mon Sep 17 00:00:00 2001
From: Tasso <tasso.evangelista@rocket.chat>
Date: Thu, 19 Dec 2024 16:45:36 -0300
Subject: [PATCH] Add some type adjustments

---
 packages/fuselage/src/components/Box/Box.tsx  | 21 ++++++++++---------
 packages/fuselage/src/components/Box/index.ts |  2 +-
 .../src/components/Box/useStylingProps.ts     |  4 ++--
 .../fuselage/src/hooks/useBoxOnlyProps.ts     |  2 --
 packages/layout/src/List/List.styles.tsx      |  2 +-
 packages/layout/src/List/List.tsx             | 12 +++--------
 .../src/{react-i18next.d.ts => i18next.d.ts}  |  4 ++--
 7 files changed, 20 insertions(+), 27 deletions(-)
 rename packages/onboarding-ui/src/{react-i18next.d.ts => i18next.d.ts} (57%)

diff --git a/packages/fuselage/src/components/Box/Box.tsx b/packages/fuselage/src/components/Box/Box.tsx
index d54d24fcbf..02b77dffa1 100644
--- a/packages/fuselage/src/components/Box/Box.tsx
+++ b/packages/fuselage/src/components/Box/Box.tsx
@@ -16,7 +16,16 @@ import { useBoxTransform, BoxTransforms } from './BoxTransforms';
 import type { StylingProps } from './stylingProps';
 import { useStylingProps } from './useStylingProps';
 
-type BoxProps = {
+export interface BoxProps
+  extends Partial<StylingProps>,
+    Omit<
+      AllHTMLAttributes<HTMLElement>,
+      'ref' | 'is' | 'className' | 'size' | 'elevation' | keyof StylingProps
+    >,
+    Omit<
+      SVGAttributes<SVGElement>,
+      keyof AllHTMLAttributes<HTMLElement> | 'elevation' | keyof StylingProps
+    > {
   /**
    * The `is` prop is used to render the Box as a different HTML tag. It can also be used to render a different fuselage component.
    */
@@ -25,15 +34,7 @@ type BoxProps = {
   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,
diff --git a/packages/fuselage/src/components/Box/index.ts b/packages/fuselage/src/components/Box/index.ts
index b2f4651178..69fc0d99a4 100644
--- a/packages/fuselage/src/components/Box/index.ts
+++ b/packages/fuselage/src/components/Box/index.ts
@@ -1,2 +1,2 @@
-export { default } from './Box';
+export { default, default as Box, BoxProps } from './Box';
 export { default as StylingBox, type StylingBoxProps } from './StylingBox';
diff --git a/packages/fuselage/src/components/Box/useStylingProps.ts b/packages/fuselage/src/components/Box/useStylingProps.ts
index add620a199..e93aa33820 100644
--- a/packages/fuselage/src/components/Box/useStylingProps.ts
+++ b/packages/fuselage/src/components/Box/useStylingProps.ts
@@ -5,8 +5,8 @@ import type { StylingProps } from './stylingProps';
 import { extractStylingProps } from './stylingProps';
 
 export const useStylingProps = <TProps extends { className?: string }>(
-  originalProps: TProps & Partial<StylingProps>,
-): TProps => {
+  originalProps: TProps,
+): Omit<TProps, keyof StylingProps> => {
   const [props, styles] = extractStylingProps(originalProps);
 
   const newClassName = useStyle(styles, undefined);
diff --git a/packages/fuselage/src/hooks/useBoxOnlyProps.ts b/packages/fuselage/src/hooks/useBoxOnlyProps.ts
index b016c60dee..1511993f4a 100644
--- a/packages/fuselage/src/hooks/useBoxOnlyProps.ts
+++ b/packages/fuselage/src/hooks/useBoxOnlyProps.ts
@@ -5,13 +5,11 @@ import { prependClassName } from '../helpers/prependClassName';
 export const useBoxOnlyProps = <
   T extends {
     className: string;
-    size?: AllHTMLAttributes<HTMLElement>['size'];
   },
 >(
   props: T & {
     animated?: boolean;
     withRichContent?: boolean | 'inlineWithoutBreaks';
-    elevation?: '0' | '1' | '2';
     htmlSize?: AllHTMLAttributes<HTMLElement>['size'];
     size?: AllHTMLAttributes<HTMLElement>['size'];
   },
diff --git a/packages/layout/src/List/List.styles.tsx b/packages/layout/src/List/List.styles.tsx
index b9a27f8635..4edd87d7de 100644
--- a/packages/layout/src/List/List.styles.tsx
+++ b/packages/layout/src/List/List.styles.tsx
@@ -2,7 +2,7 @@ import styled from '@rocket.chat/styled';
 import type { CSSProperties } from 'react';
 
 type ListComponentProps = {
-  color: string;
+  color: NonNullable<CSSProperties['color']>;
   icon?: string;
   listStyleType: CSSProperties['listStyleType'];
 };
diff --git a/packages/layout/src/List/List.tsx b/packages/layout/src/List/List.tsx
index 24d8a6a31f..e48fcd0332 100644
--- a/packages/layout/src/List/List.tsx
+++ b/packages/layout/src/List/List.tsx
@@ -1,12 +1,6 @@
-import type { Box } from '@rocket.chat/fuselage';
 import { Margins } from '@rocket.chat/fuselage';
 import colors from '@rocket.chat/fuselage-tokens/colors.json';
-import type {
-  ReactElement,
-  ReactNode,
-  ComponentProps,
-  CSSProperties,
-} from 'react';
+import type { ReactNode, ComponentProps, CSSProperties } from 'react';
 
 import { ListComponent } from './List.styles';
 import ListItem from './ListItem';
@@ -21,9 +15,9 @@ const List = ({
   children: ReactNode;
   spacing?: ComponentProps<typeof Margins>['block'];
   listStyleType?: CSSProperties['listStyleType'];
-  color?: ComponentProps<typeof Box>['color'];
+  color?: CSSProperties['color'];
   icon?: string;
-}): ReactElement => (
+}) => (
   <ListComponent icon={icon} listStyleType={listStyleType} color={color}>
     <Margins block={spacing}>{children}</Margins>
   </ListComponent>
diff --git a/packages/onboarding-ui/src/react-i18next.d.ts b/packages/onboarding-ui/src/i18next.d.ts
similarity index 57%
rename from packages/onboarding-ui/src/react-i18next.d.ts
rename to packages/onboarding-ui/src/i18next.d.ts
index 3337c4b683..8c0ca51929 100644
--- a/packages/onboarding-ui/src/react-i18next.d.ts
+++ b/packages/onboarding-ui/src/i18next.d.ts
@@ -1,6 +1,6 @@
-import 'react-i18next';
+import 'i18next';
 
-declare module 'react-i18next' {
+declare module 'i18next' {
   interface CustomTypeOptions {
     allowObjectInHTMLChildren: true;
   }