chore: updating dsrn to use named exports instead of default exports (#650)

## **Description**

This PR standardizes the export conventions across the design system by
converting all default exports to named exports in the
`design-system-react-native` package.

The primary goals of this change are:
1. Align export patterns between design-system-react and
design-system-react-native
2. Make component usage more consistent and predictable for developers
3. Adopt best practices for module exports in TypeScript

Key changes include:
- Converting component exports from default to named exports
- Updating all import statements to use named imports
- Standardizing barrel exports in index.ts files
- Ensuring the root index.ts re-exports everything from
components/index.ts

Allows us to do:

```jsx
import {
  AvatarToken,
  AvatarTokenSize,
  BadgeNetwork,
  ButtonSize,
  ButtonIcon,
  ButtonIconSize,
  IconName,
  Text,
  TextVariant,
  TextColor,
  AvatarAccount,
  AvatarAccountVariant,
  Icon,
} from '@metamask/design-system-react-native';
```

## **Related issues**

Fixes: #649

## **Manual testing steps**

1. Build the React Native package: `yarn workspace
@metamask/design-system-react-native build`
2. Verify that the build completes successfully
3. Run tests: `yarn workspace @metamask/design-system-react-native test`
4. Run storybook to check components render as necessary (storybook will
error out on incorrect imports)

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

```tsx
// Before - default export in component
const Component = () => { ... };
export default Component;

// Before - imports using default import
import Component from './Component';
```

### **After**

```tsx
// After - named export in component 
export const Component = () => { ... };

// After - imports using named import
import { Component } from './Component';
```

Manual storybook smoke test


https://github.com/user-attachments/assets/27a4d42e-cc14-4442-9830-b9b703d0c819

## **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 (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

Author: georgewrmarshall

packages/design-system-react-native/src/components/AvatarAccount/AvatarAccount.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-native';
 import { View } from 'react-native';
 
 import { AvatarAccountSize, AvatarAccountVariant } from '../../types';
-import AvatarAccount from './AvatarAccount';
+import { AvatarAccount } from './AvatarAccount';
 import { SAMPLE_AVATARACCOUNT_ADDRESSES } from './AvatarAccount.constants';
 import type { AvatarAccountProps } from './AvatarAccount.types';
 

packages/design-system-react-native/src/components/AvatarAccount/AvatarAccount.test.tsx

@@ -2,7 +2,7 @@ import { render } from '@testing-library/react-native';
 import React from 'react';
 
 import { AvatarAccountSize, AvatarAccountVariant } from '../../types';
-import AvatarAccount from './AvatarAccount';
+import { AvatarAccount } from './AvatarAccount';
 import { SAMPLE_AVATARACCOUNT_ADDRESSES } from './AvatarAccount.constants';
 
 jest.mock('react-native-svg', () => {

packages/design-system-react-native/src/components/AvatarAccount/AvatarAccount.tsx

@@ -6,13 +6,13 @@ import {
   AvatarBaseShape,
   AvatarAccountVariant,
 } from '../../types';
-import AvatarBase from '../AvatarBase';
-import Blockies from '../temp-components/Blockies';
-import Jazzicon from '../temp-components/Jazzicon';
-import Maskicon from '../temp-components/Maskicon';
+import { AvatarBase } from '../AvatarBase';
+import { Blockies } from '../temp-components/Blockies';
+import { Jazzicon } from '../temp-components/Jazzicon';
+import { Maskicon } from '../temp-components/Maskicon';
 import type { AvatarAccountProps } from './AvatarAccount.types';
 
-const AvatarAccount = ({
+export const AvatarAccount = ({
   address,
   variant = AvatarAccountVariant.Jazzicon,
   size = AvatarAccountSize.Md,
@@ -53,5 +53,3 @@ const AvatarAccount = ({
     </AvatarBase>
   );
 };
-
-export default AvatarAccount;

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

@@ -1,3 +1,3 @@
 export { AvatarAccountSize, AvatarAccountVariant } from '../../types';
-export { default } from './AvatarAccount';
+export { AvatarAccount } from './AvatarAccount';
 export type { AvatarAccountProps } from './AvatarAccount.types';

packages/design-system-react-native/src/components/AvatarBase/AvatarBase.stories.tsx

@@ -2,9 +2,9 @@ import type { Meta, StoryObj } from '@storybook/react-native';
 import { View } from 'react-native';
 
 import { AvatarBaseSize, AvatarBaseShape } from '../../types';
-import ImageOrSvg from '../temp-components/ImageOrSvg';
-import Icon, { IconName } from '../Icon';
-import AvatarBase from './AvatarBase';
+import { ImageOrSvg } from '../temp-components/ImageOrSvg';
+import { Icon, IconName } from '../Icon';
+import { AvatarBase } from './AvatarBase';
 import { SAMPLE_AVATARBASE_URIS } from './AvatarBase.dev';
 import type { AvatarBaseProps } from './AvatarBase.types';
 

packages/design-system-react-native/src/components/AvatarBase/AvatarBase.test.tsx

@@ -4,8 +4,8 @@ import { render } from '@testing-library/react-native';
 import React from 'react';
 
 import { AvatarBaseSize, AvatarBaseShape } from '../../types';
-import Text, { TextColor, TextVariant } from '../Text';
-import AvatarBase from './AvatarBase';
+import { Text, TextColor, TextVariant } from '../Text';
+import { AvatarBase } from './AvatarBase';
 import {
   TWCLASSMAP_AVATARBASE_SIZE_DIMENSION,
   TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION,

packages/design-system-react-native/src/components/AvatarBase/AvatarBase.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import { View } from 'react-native';
 
 import { AvatarBaseSize, AvatarBaseShape } from '../../types';
-import Text, { TextColor, TextVariant, FontWeight } from '../Text';
+import { Text, TextColor, TextVariant, FontWeight } from '../Text';
 import {
   TWCLASSMAP_AVATARBASE_SIZE_DIMENSION,
   TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION,
@@ -13,7 +13,7 @@ import {
 } from './AvatarBase.constants';
 import type { AvatarBaseProps } from './AvatarBase.types';
 
-const AvatarBase = ({
+export const AvatarBase = ({
   children,
   size = AvatarBaseSize.Md,
   shape = AvatarBaseShape.Circle,
@@ -55,5 +55,3 @@ const AvatarBase = ({
     </View>
   );
 };
-
-export default AvatarBase;

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

@@ -1,3 +1,3 @@
 export { AvatarBaseSize, AvatarBaseShape } from '../../types';
-export { default } from './AvatarBase';
+export { AvatarBase } from './AvatarBase';
 export type { AvatarBaseProps } from './AvatarBase.types';

packages/design-system-react-native/src/components/AvatarFavicon/AvatarFavicon.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-native';
 import { View } from 'react-native';
 
 import { AvatarFaviconSize } from '../../types';
-import AvatarFavicon from './AvatarFavicon';
+import { AvatarFavicon } from './AvatarFavicon';
 import { SAMPLE_AVATARFAVICON_URIS } from './AvatarFavicon.dev';
 import type { AvatarFaviconProps } from './AvatarFavicon.types';
 

packages/design-system-react-native/src/components/AvatarFavicon/AvatarFavicon.test.tsx

@@ -1,7 +1,7 @@
 import { render, fireEvent } from '@testing-library/react-native';
 import React from 'react';
 
-import AvatarFavicon from './AvatarFavicon';
+import { AvatarFavicon } from './AvatarFavicon';
 
 const remoteImageSrc = { uri: 'https://example.com/photo.png' };
 const remoteSvgSrc = { uri: 'https://example.com/logo.svg' };

packages/design-system-react-native/src/components/AvatarFavicon/AvatarFavicon.tsx

@@ -3,11 +3,11 @@ import React, { useState } from 'react';
 import { ImageErrorEventData, NativeSyntheticEvent } from 'react-native';
 
 import { AvatarFaviconSize, AvatarBaseShape } from '../../types';
-import AvatarBase from '../AvatarBase';
-import ImageOrSvg from '../temp-components/ImageOrSvg';
+import { AvatarBase } from '../AvatarBase';
+import { ImageOrSvg } from '../temp-components/ImageOrSvg';
 import type { AvatarFaviconProps } from './AvatarFavicon.types';
 
-const AvatarFavicon = ({
+export const AvatarFavicon = ({
   src,
   size = AvatarFaviconSize.Md,
   name,
@@ -58,5 +58,3 @@ const AvatarFavicon = ({
     </AvatarBase>
   );
 };
-
-export default AvatarFavicon;

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

@@ -1,3 +1,3 @@
 export { AvatarFaviconSize } from '../../types';
-export { default } from './AvatarFavicon';
+export { AvatarFavicon } from './AvatarFavicon';
 export type { AvatarFaviconProps } from './AvatarFavicon.types';

packages/design-system-react-native/src/components/AvatarGroup/AvatarGroup.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-native';
 import { ScrollView, View } from 'react-native';
 
 import { AvatarGroupSize, AvatarGroupVariant } from '../../types';
-import AvatarGroup from './AvatarGroup';
+import { AvatarGroup } from './AvatarGroup';
 import {
   SAMPLE_AVATARGROUP_AVATARACCOUNTPROPSARR,
   SAMPLE_AVATARGROUP_AVATARFAVICONPROPSARR,

packages/design-system-react-native/src/components/AvatarGroup/AvatarGroup.test.tsx

@@ -2,7 +2,7 @@ import { render } from '@testing-library/react-native';
 import React from 'react';
 
 import { AvatarGroupVariant, AvatarGroupSize } from '../../types';
-import AvatarGroup from './AvatarGroup';
+import { AvatarGroup } from './AvatarGroup';
 import {
   SAMPLE_AVATARGROUP_AVATARACCOUNTPROPSARR,
   SAMPLE_AVATARGROUP_AVATARFAVICONPROPSARR,

packages/design-system-react-native/src/components/AvatarGroup/AvatarGroup.tsx

@@ -3,19 +3,19 @@ import React, { useCallback } from 'react';
 import { View } from 'react-native';
 
 import { AvatarGroupSize, AvatarGroupVariant } from '../../types';
-import AvatarAccount, { AvatarAccountProps } from '../AvatarAccount';
-import AvatarBase, { AvatarBaseShape } from '../AvatarBase';
-import AvatarFavicon, { AvatarFaviconProps } from '../AvatarFavicon';
-import AvatarNetwork, { AvatarNetworkProps } from '../AvatarNetwork';
-import AvatarToken, { AvatarTokenProps } from '../AvatarToken';
-import Text, { TextColor } from '../Text';
+import { AvatarAccount, AvatarAccountProps } from '../AvatarAccount';
+import { AvatarBase, AvatarBaseShape } from '../AvatarBase';
+import { AvatarFavicon, AvatarFaviconProps } from '../AvatarFavicon';
+import { AvatarNetwork, AvatarNetworkProps } from '../AvatarNetwork';
+import { AvatarToken, AvatarTokenProps } from '../AvatarToken';
+import { Text, TextColor } from '../Text';
 import {
   MAP_AVATARGROUP_SIZE_OVERFLOWTEXT_TEXTVARIANT,
   TWCLASSMAP_AVATARGROUP_SIZE_SPACEBETWEENAVATARS,
 } from './AvatarGroup.constants';
 import { AvatarGroupProps } from './AvatarGroup.types';
 
-const AvatarGroup = ({
+export const AvatarGroup = ({
   variant,
   avatarPropsArr,
   size = AvatarGroupSize.Md,
@@ -107,5 +107,3 @@ const AvatarGroup = ({
     </View>
   );
 };
-
-export default AvatarGroup;

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

@@ -1,3 +1,3 @@
 export { AvatarGroupSize, AvatarGroupVariant } from '../../types';
-export { default } from './AvatarGroup';
+export { AvatarGroup } from './AvatarGroup';
 export type { AvatarGroupProps } from './AvatarGroup.types';

packages/design-system-react-native/src/components/AvatarIcon/AvatarIcon.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-native';
 import { View } from 'react-native';
 
 import { AvatarIconSize, AvatarIconSeverity } from '../../types';
-import AvatarIcon from './AvatarIcon';
+import { AvatarIcon } from './AvatarIcon';
 import type { AvatarIconProps } from './AvatarIcon.types';
 import { IconName } from '../Icon';
 

packages/design-system-react-native/src/components/AvatarIcon/AvatarIcon.test.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 
 import { AvatarIconSeverity, AvatarIconSize } from '../../types';
 import { IconName } from '../Icon';
-import AvatarIcon from './AvatarIcon';
+import { AvatarIcon } from './AvatarIcon';
 import {
   TWCLASSMAP_AVATARICON_SEVERITY_BACKGROUNDCOLOR,
   MAP_AVATARICON_SEVERITY_ICONCOLOR,

packages/design-system-react-native/src/components/AvatarIcon/AvatarIcon.tsx

@@ -7,16 +7,16 @@ import {
   AvatarBaseShape,
   AvatarIconSeverity,
 } from '../../types';
-import AvatarBase from '../AvatarBase';
-import Icon from '../Icon';
+import { AvatarBase } from '../AvatarBase';
+import { Icon } from '../Icon';
 import {
   MAP_AVATARICON_SIZE_ICONSIZE,
   MAP_AVATARICON_SEVERITY_ICONCOLOR,
   TWCLASSMAP_AVATARICON_SEVERITY_BACKGROUNDCOLOR,
 } from './AvatarIcon.constants';
 import type { AvatarIconProps } from './AvatarIcon.types';
 
-const AvatarIcon = ({
+export const AvatarIcon = ({
   size = AvatarIconSize.Md,
   shape = AvatarBaseShape.Circle,
   severity = AvatarIconSeverity.Neutral,
@@ -49,5 +49,3 @@ const AvatarIcon = ({
     </AvatarBase>
   );
 };
-
-export default AvatarIcon;

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

@@ -1,3 +1,3 @@
 export { AvatarIconSize, AvatarIconSeverity } from '../../types';
-export { default } from './AvatarIcon';
+export { AvatarIcon } from './AvatarIcon';
 export type { AvatarIconProps } from './AvatarIcon.types';

packages/design-system-react-native/src/components/AvatarNetwork/AvatarNetwork.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-native';
 import { View } from 'react-native';
 
 import { AvatarNetworkSize } from '../../types';
-import AvatarNetwork from './AvatarNetwork';
+import { AvatarNetwork } from './AvatarNetwork';
 import { SAMPLE_AVATARNETWORK_URIS } from './AvatarNetwork.dev';
 import type { AvatarNetworkProps } from './AvatarNetwork.types';
 

packages/design-system-react-native/src/components/AvatarNetwork/AvatarNetwork.test.tsx

@@ -1,7 +1,7 @@
 import { render, fireEvent } from '@testing-library/react-native';
 import React from 'react';
 
-import AvatarNetwork from './AvatarNetwork';
+import { AvatarNetwork } from './AvatarNetwork';
 
 const remoteImageSrc = { uri: 'https://example.com/photo.png' };
 const remoteSvgSrc = { uri: 'https://example.com/logo.svg' };

packages/design-system-react-native/src/components/AvatarNetwork/AvatarNetwork.tsx

@@ -3,11 +3,11 @@ import React, { useState } from 'react';
 import { ImageErrorEventData, NativeSyntheticEvent } from 'react-native';
 
 import { AvatarNetworkSize, AvatarBaseShape } from '../../types';
-import AvatarBase from '../AvatarBase';
-import ImageOrSvg from '../temp-components/ImageOrSvg';
+import { AvatarBase } from '../AvatarBase';
+import { ImageOrSvg } from '../temp-components/ImageOrSvg';
 import type { AvatarNetworkProps } from './AvatarNetwork.types';
 
-const AvatarNetwork = ({
+export const AvatarNetwork = ({
   src,
   size = AvatarNetworkSize.Md,
   name,
@@ -58,5 +58,3 @@ const AvatarNetwork = ({
     </AvatarBase>
   );
 };
-
-export default AvatarNetwork;

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

@@ -1,3 +1,3 @@
 export { AvatarNetworkSize } from '../../types';
-export { default } from './AvatarNetwork';
+export { AvatarNetwork } from './AvatarNetwork';
 export type { AvatarNetworkProps } from './AvatarNetwork.types';

packages/design-system-react-native/src/components/AvatarToken/AvatarToken.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-native';
 import { View } from 'react-native';
 
 import { AvatarTokenSize } from '../../types';
-import AvatarToken from './AvatarToken';
+import { AvatarToken } from './AvatarToken';
 import { SAMPLE_AVATARTOKEN_URIS } from './AvatarToken.dev';
 import type { AvatarTokenProps } from './AvatarToken.types';
 

packages/design-system-react-native/src/components/AvatarToken/AvatarToken.test.tsx

@@ -1,7 +1,7 @@
 import { render, fireEvent } from '@testing-library/react-native';
 import React from 'react';
 
-import AvatarToken from './AvatarToken';
+import { AvatarToken } from './AvatarToken';
 
 const remoteImageSrc = { uri: 'https://example.com/photo.png' };
 const remoteSvgSrc = { uri: 'https://example.com/logo.svg' };

packages/design-system-react-native/src/components/AvatarToken/AvatarToken.tsx

@@ -3,11 +3,11 @@ import React, { useState } from 'react';
 import { ImageErrorEventData, NativeSyntheticEvent } from 'react-native';
 
 import { AvatarTokenSize, AvatarBaseShape } from '../../types';
-import AvatarBase from '../AvatarBase';
-import ImageOrSvg from '../temp-components/ImageOrSvg';
+import { AvatarBase } from '../AvatarBase';
+import { ImageOrSvg } from '../temp-components/ImageOrSvg';
 import type { AvatarTokenProps } from './AvatarToken.types';
 
-const AvatarToken = ({
+export const AvatarToken = ({
   src,
   size = AvatarTokenSize.Md,
   name,
@@ -58,5 +58,3 @@ const AvatarToken = ({
     </AvatarBase>
   );
 };
-
-export default AvatarToken;

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

@@ -1,3 +1,3 @@
 export { AvatarTokenSize } from '../../types';
-export { default } from './AvatarToken';
+export { AvatarToken } from './AvatarToken';
 export type { AvatarTokenProps } from './AvatarToken.types';

packages/design-system-react-native/src/components/BadgeCount/BadgeCount.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-native';
 import { View } from 'react-native';
 
 import { BadgeCountSize } from '../../types';
-import BadgeCount from './BadgeCount';
+import { BadgeCount } from './BadgeCount';
 import type { BadgeCountProps } from './BadgeCount.types';
 
 const meta: Meta<BadgeCountProps> = {

packages/design-system-react-native/src/components/BadgeCount/BadgeCount.test.tsx

@@ -3,8 +3,8 @@ import { render } from '@testing-library/react-native';
 import React from 'react';
 
 import { BadgeCountSize } from '../../types';
-import Text, { TextColor, FontWeight } from '../Text';
-import BadgeCount from './BadgeCount';
+import { Text, TextColor, FontWeight } from '../Text';
+import { BadgeCount } from './BadgeCount';
 import {
   MAP_BADGECOUNT_SIZE_TEXTVARIANT,
   TWCLASSMAP_BADGECOUNT_SIZE_CONTAINER,

packages/design-system-react-native/src/components/BadgeCount/BadgeCount.tsx

@@ -4,15 +4,15 @@ import React from 'react';
 import { View } from 'react-native';
 
 import { BadgeCountSize } from '../../types';
-import Text, { TextColor, FontWeight } from '../Text';
+import { Text, TextColor, FontWeight } from '../Text';
 import {
   MAP_BADGECOUNT_SIZE_TEXTVARIANT,
   TWCLASSMAP_BADGECOUNT_SIZE_CONTAINER,
   MAP_BADGECOUNT_SIZE_LINEHEIGHT,
 } from './BadgeCount.constants';
 import type { BadgeCountProps } from './BadgeCount.types';
 
-const BadgeCount = ({
+export const BadgeCount = ({
   size = BadgeCountSize.Md,
   count,
   max = 99,
@@ -45,5 +45,3 @@ const BadgeCount = ({
     </View>
   );
 };
-
-export default BadgeCount;

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

@@ -1,3 +1,3 @@
 export { BadgeCountSize } from '../../types';
-export { default } from './BadgeCount';
+export { BadgeCount } from './BadgeCount';
 export type { BadgeCountProps } from './BadgeCount.types';

packages/design-system-react-native/src/components/BadgeIcon/BadgeIcon.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-native';
 
 import { IconName } from '../Icon';
-import BadgeIcon from './BadgeIcon';
+import { BadgeIcon } from './BadgeIcon';
 import type { BadgeIconProps } from './BadgeIcon.types';
 
 const meta: Meta<BadgeIconProps> = {