chore: updating interface for type (#621)

## **Description**

This PR fixes several TypeScript-related issues:

1. Converts interfaces to type aliases throughout the codebase to comply
with our ESLint config that disallows interface types(which for some
reason isn't working at the moment [issue
here](#629))
2. Updates type exports to use the explicit `export type { X }` syntax

```
// Fixes
error TS1205: Re-exporting a type when 'isolatedModules' is enabled requires using 'export type'.
```
3. Adds `isolatedModules: true` to tsconfig.packages.json
```
// Fixes
ts-jest[ts-compiler] (WARN) Using hybrid module kind (Node16/18/Next) is only supported in "isolatedModules: true". Please set "isolatedModules: true" in your tsconfig.json.
```

## **Related issues**

Fixes: N/A

## **Manual testing steps**

1. Run the test suite to verify the ts-jest warning is resolved
2. Build the packages to ensure TypeScript compilation succeeds
3. Verify that the component exports work correctly in consuming
applications

## **Screenshots/Recordings**

N/A - Code changes only

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs)
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I've applied the right labels on the PR

Author: georgewrmarshall

packages/design-system-react-native/jest.config.js

@@ -32,6 +32,12 @@ module.exports = merge(baseConfig, {
     '!**/*.assets.{js,ts}', // Exclude .assets files
     '!**/*.types.{js,ts}', // Exclude .types files
   ],
+  // Add coverage ignore patterns
+  coveragePathIgnorePatterns: [
+    'index.ts', // Ignore all index.ts files
+    './src/index.ts', // Also keep the original pattern
+    '\\.stories\\.(ts|tsx)$',
+  ],
   preset: 'react-native',
   transform: {
     '^.+\\.(js|jsx|ts|tsx)$': 'babel-jest',

packages/design-system-react-native/src/components/BadgeWrapper/index.ts

@@ -1,7 +1,7 @@
 export {
   BadgeWrapperPosition,
-  BadgeWrapperCustomPosition,
   BadgeWrapperPositionAnchorShape,
 } from '../../types';
+export type { BadgeWrapperCustomPosition } from '../../types';
 export { default } from './BadgeWrapper';
 export type { BadgeWrapperProps } from './BadgeWrapper.types';

packages/design-system-react-native/src/components/temp-components/ButtonAnimated/index.ts

@@ -1,2 +1,2 @@
 export { default } from './ButtonAnimated';
-export { ButtonAnimatedProps } from './ButtonAnimated.types';
+export type { ButtonAnimatedProps } from './ButtonAnimated.types';

packages/design-system-react-native/src/components/temp-components/ImageOrSvg/ImageOrSvg.types.ts

@@ -11,7 +11,7 @@ import { SvgProps } from 'react-native-svg';
 /**
  * Base props common to all variations.
  */
-interface ImageOrSvgBaseProps {
+export type ImageOrSvgBaseProps = {
   /**
    * Optional prop to set the width of the image/SVG.
    * Accepts numbers (pixels) or string values (like percentages).
@@ -50,7 +50,7 @@ interface ImageOrSvgBaseProps {
    * the 'uri' prop (which is handled separately).
    */
   svgProps?: Omit<SvgProps, 'uri'>;
-}
+};
 
 /**
  * Defines the source type for an image or SVG.
@@ -65,11 +65,11 @@ export type ImageOrSvgSrc =
   | React.ComponentType<SvgProps> // For local imported svg
   | { uri?: string }; // For remote image or SVG (with a uri property)
 
-export interface ImageOrSvgProps extends ImageOrSvgBaseProps {
+export type ImageOrSvgProps = ImageOrSvgBaseProps & {
   /**
    * Required prop for the source of the image or SVG.
    * This prop determines whether a local image, a local SVG component,
    * or a remote image/SVG (via URI) is rendered.
    */
   src: ImageOrSvgSrc;
-}
+};

packages/design-system-react-native/src/components/temp-components/ImageOrSvg/index.ts

@@ -1,2 +1,2 @@
 export { default } from './ImageOrSvg';
-export { ImageOrSvgProps, ImageOrSvgSrc } from './ImageOrSvg.types';
+export type { ImageOrSvgProps, ImageOrSvgSrc } from './ImageOrSvg.types';

packages/design-system-react-native/src/index.ts

@@ -3,104 +3,98 @@ import { withThemeProvider } from '@metamask/design-system-twrnc-preset';
 import AvatarAccountComponent from './components/AvatarAccount';
 export const AvatarAccount = withThemeProvider(AvatarAccountComponent);
 export {
-  AvatarAccountProps,
   AvatarAccountVariant,
   AvatarAccountSize,
 } from './components/AvatarAccount';
+export type { AvatarAccountProps } from './components/AvatarAccount';
 
 import AvatarBaseComponent from './components/AvatarBase';
 export const AvatarBase = withThemeProvider(AvatarBaseComponent);
-export { AvatarBaseProps, AvatarBaseSize } from './components/AvatarBase';
+export { AvatarBaseSize } from './components/AvatarBase';
+export type { AvatarBaseProps } from './components/AvatarBase';
 
 import AvatarFaviconComponent from './components/AvatarFavicon';
 export const AvatarFavicon = withThemeProvider(AvatarFaviconComponent);
-export {
-  AvatarFaviconProps,
-  AvatarFaviconSize,
-} from './components/AvatarFavicon';
+export { AvatarFaviconSize } from './components/AvatarFavicon';
+export type { AvatarFaviconProps } from './components/AvatarFavicon';
 
 import AvatarGroupComponent from './components/AvatarGroup';
 export const AvatarGroup = withThemeProvider(AvatarGroupComponent);
-export {
-  AvatarGroupProps,
-  AvatarGroupSize,
-  AvatarGroupVariant,
-} from './components/AvatarGroup';
+export { AvatarGroupSize, AvatarGroupVariant } from './components/AvatarGroup';
+export type { AvatarGroupProps } from './components/AvatarGroup';
 
 import AvatarIconComponent from './components/AvatarIcon';
 export const AvatarIcon = withThemeProvider(AvatarIconComponent);
-export {
-  AvatarIconProps,
-  AvatarIconSeverity,
-  AvatarIconSize,
-} from './components/AvatarIcon';
+export { AvatarIconSeverity, AvatarIconSize } from './components/AvatarIcon';
+export type { AvatarIconProps } from './components/AvatarIcon';
 
 import AvatarNetworkComponent from './components/AvatarNetwork';
 export const AvatarNetwork = withThemeProvider(AvatarNetworkComponent);
-export {
-  AvatarNetworkProps,
-  AvatarNetworkSize,
-} from './components/AvatarNetwork';
+export { AvatarNetworkSize } from './components/AvatarNetwork';
+export type { AvatarNetworkProps } from './components/AvatarNetwork';
 
 import AvatarTokenComponent from './components/AvatarToken';
 export const AvatarToken = withThemeProvider(AvatarTokenComponent);
-export { AvatarTokenProps, AvatarTokenSize } from './components/AvatarToken';
+export { AvatarTokenSize } from './components/AvatarToken';
+export type { AvatarTokenProps } from './components/AvatarToken';
 
 import BadgeCountComponent from './components/BadgeCount';
 export const BadgeCount = withThemeProvider(BadgeCountComponent);
-export { BadgeCountProps, BadgeCountSize } from './components/BadgeCount';
+export { BadgeCountSize } from './components/BadgeCount';
+export type { BadgeCountProps } from './components/BadgeCount';
 
 import BadgeIconComponent from './components/BadgeIcon';
 export const BadgeIcon = withThemeProvider(BadgeIconComponent);
-export { BadgeIconProps } from './components/BadgeIcon';
+export type { BadgeIconProps } from './components/BadgeIcon';
 
 import BadgeNetworkComponent from './components/BadgeNetwork';
 export const BadgeNetwork = withThemeProvider(BadgeNetworkComponent);
-export { BadgeNetworkProps } from './components/BadgeNetwork';
+export type { BadgeNetworkProps } from './components/BadgeNetwork';
 
 import BadgeStatusComponent from './components/BadgeStatus';
 export const BadgeStatus = withThemeProvider(BadgeStatusComponent);
-export {
-  BadgeStatusProps,
-  BadgeStatusStatus,
-  BadgeStatusSize,
-} from './components/BadgeStatus';
+export { BadgeStatusStatus, BadgeStatusSize } from './components/BadgeStatus';
+export type { BadgeStatusProps } from './components/BadgeStatus';
 
 import BlockiesComponent from './components/temp-components/Blockies';
 export const Blockies = BlockiesComponent;
-export { BlockiesProps } from './components/temp-components/Blockies';
+export type { BlockiesProps } from './components/temp-components/Blockies';
 
 import ButtonAnimatedComponent from './components/temp-components/ButtonAnimated';
 export const ButtonAnimated = withThemeProvider(ButtonAnimatedComponent);
-export { ButtonAnimatedProps } from './components/temp-components/ButtonAnimated';
+export type { ButtonAnimatedProps } from './components/temp-components/ButtonAnimated';
 
 import ButtonBaseComponent from './components/ButtonBase';
 export const ButtonBase = withThemeProvider(ButtonBaseComponent);
-export { ButtonBaseProps, ButtonBaseSize } from './components/ButtonBase';
+export { ButtonBaseSize } from './components/ButtonBase';
+export type { ButtonBaseProps } from './components/ButtonBase';
 
 import ButtonComponent from './components/Button';
 export const Button = withThemeProvider(ButtonComponent);
-export { ButtonProps, ButtonSize, ButtonVariant } from './components/Button';
+export { ButtonSize, ButtonVariant } from './components/Button';
+export type { ButtonProps } from './components/Button';
 
 import ButtonIconComponent from './components/ButtonIcon';
 export const ButtonIcon = withThemeProvider(ButtonIconComponent);
-export { ButtonIconProps, ButtonIconSize } from './components/ButtonIcon';
+export { ButtonIconSize } from './components/ButtonIcon';
+export type { ButtonIconProps } from './components/ButtonIcon';
 
 import IconComponent from './components/Icon';
 export const Icon = withThemeProvider(IconComponent);
-export { IconColor, IconName, IconProps, IconSize } from './components/Icon';
+export { IconColor, IconName, IconSize } from './components/Icon';
+export type { IconProps } from './components/Icon';
 
 import JazziconComponent from './components/temp-components/Jazzicon';
 export const Jazzicon = JazziconComponent;
-export { JazziconProps } from './components/temp-components/Jazzicon';
+export type { JazziconProps } from './components/temp-components/Jazzicon';
 
 import MaskiconComponent from './components/temp-components/Maskicon';
 export const Maskicon = MaskiconComponent;
-export { MaskiconProps } from './components/temp-components/Maskicon';
+export type { MaskiconProps } from './components/temp-components/Maskicon';
 
 import TextButtonComponent from './components/TextButton';
 export const TextButton = withThemeProvider(TextButtonComponent);
-export { TextButtonProps } from './components/TextButton';
+export type { TextButtonProps } from './components/TextButton';
 
 import TextComponent from './components/Text';
 export const Text = withThemeProvider(TextComponent);
@@ -109,10 +103,10 @@ export {
   FontFamily,
   FontStyle,
   TextColor,
-  TextProps,
   TextVariant,
 } from './components/Text';
+export type { TextProps } from './components/Text';
 
 import TextOrChildrenComponent from './components/temp-components/TextOrChildren';
 export const TextOrChildren = withThemeProvider(TextOrChildrenComponent);
-export { TextOrChildrenProps } from './components/temp-components/TextOrChildren';
+export type { TextOrChildrenProps } from './components/temp-components/TextOrChildren';

packages/design-system-react-native/src/types/index.ts

@@ -135,12 +135,12 @@ export enum BadgeWrapperPosition {
 /**
  * BadgeWrapper - customPosition
  */
-export interface BadgeWrapperCustomPosition {
+export type BadgeWrapperCustomPosition = {
   top?: number | string | undefined;
   right?: number | string | undefined;
   bottom?: number | string | undefined;
   left?: number | string | undefined;
-}
+};
 
 /**
  * ButtonBase - size

packages/design-system-react/src/components/BadgeWrapper/index.ts

@@ -1,7 +1,7 @@
 export {
   BadgeWrapperPosition,
-  BadgeWrapperCustomPosition,
   BadgeWrapperPositionAnchorShape,
 } from '../../types';
+export type { BadgeWrapperCustomPosition } from '../../types';
 export { BadgeWrapper } from './BadgeWrapper';
 export type { BadgeWrapperProps } from './BadgeWrapper.types';

packages/design-system-react/src/components/index.ts

@@ -45,9 +45,9 @@ export { BadgeWrapper } from './BadgeWrapper';
 export type { BadgeWrapperProps } from './BadgeWrapper';
 export {
   BadgeWrapperPosition,
-  BadgeWrapperCustomPosition,
   BadgeWrapperPositionAnchorShape,
 } from './BadgeWrapper';
+export type { BadgeWrapperCustomPosition } from './BadgeWrapper';
 
 export { Blockies } from './temp-components/Blockies';
 export type { BlockiesProps } from './temp-components/Blockies';

packages/design-system-react/src/types/index.ts

@@ -135,12 +135,12 @@ export enum BadgeWrapperPosition {
 /**
  * BadgeWrapper - customPosition
  */
-export interface BadgeWrapperCustomPosition {
+export type BadgeWrapperCustomPosition = {
   top?: number | string | undefined;
   right?: number | string | undefined;
   bottom?: number | string | undefined;
   left?: number | string | undefined;
-}
+};
 
 /**
  * ButtonBase - size

tsconfig.packages.json

@@ -4,6 +4,7 @@
     "esModuleInterop": true,
     "lib": ["ES2020"],
     "module": "Node16",
+    "isolatedModules": true,
     "moduleResolution": "Node16",
     "baseUrl": ".",
     /**