Add some type adjustments

RocketChat · Dec 27, 2024 · 61a9ddf · 61a9ddf
1 parent d9c1191
commit 61a9ddf
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 27 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/...ages/onboarding-ui/src/react-i18next.d.ts → packages/onboarding-ui/src/i18next.d.ts b/...ages/onboarding-ui/src/react-i18next.d.ts → 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;
   }