chore: migrate RN component default exports to named exports#1032
Conversation
📖 Storybook Preview |
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
Bugbot Autofix prepared a fix for the issue found in the latest run.
- ✅ Fixed: KeyValueRow stories still import removed default export
- Updated KeyValueRow.stories.tsx to import the named KeyValueRow export as KeyValueRowComponent, removing the invalid default import.
Or push these changes by commenting:
@cursor push f3b45ade76
Preview (f3b45ade76)
diff --git a/packages/design-system-react-native/src/components/KeyValueRow/KeyValueRow.stories.tsx b/packages/design-system-react-native/src/components/KeyValueRow/KeyValueRow.stories.tsx
--- a/packages/design-system-react-native/src/components/KeyValueRow/KeyValueRow.stories.tsx
+++ b/packages/design-system-react-native/src/components/KeyValueRow/KeyValueRow.stories.tsx
@@ -5,7 +5,8 @@
import { IconColor, IconName, IconSize } from '../Icon';
import { Text, TextColor, TextVariant } from '../Text';
-import KeyValueRowComponent, {
+import {
+ KeyValueRow as KeyValueRowComponent,
KeyValueRowFieldIconSides,
TooltipSizes,
} from '.';You can send follow-ups to this agent here.
📖 Storybook Preview |
645e4cb to
7c166c0
Compare
📖 Storybook Preview |
| onOpen?.(); | ||
| callback?.(); | ||
| return { | ||
| BottomSheetDialog: forwardRef( |
There was a problem hiding this comment.
This mock now exports BottomSheetDialog as a named symbol so tests match the runtime import contract after the default-to-named export migration; without this shape, BottomSheet would render an undefined component in test runs.
| 'packages/design-system-react/src/components/**/*.{ts,tsx}', | ||
| 'packages/design-system-react-native/src/components/**/*.{ts,tsx}', | ||
| ], | ||
| ignores: ['**/*.stories.tsx', '**/*.test.tsx', '**/*.d.ts'], |
There was a problem hiding this comment.
This rule is scoped to component source files and explicitly excludes stories/tests so we enforce named exports in shipped component modules without conflicting with Storybook meta defaults or test ergonomics.
| capturedDialogOnClose = onClose; | ||
| capturedDialogOnOpen = onOpen; | ||
| capturedPanGestureHandlerProps = panGestureHandlerProps; | ||
| useImperativeHandle(ref, () => ({ |
There was a problem hiding this comment.
Keeping callback capture and imperative-handle behavior in the mock preserves the original test intent: verify BottomSheet wiring and lifecycle delegation instead of animation internals, which keeps these tests stable through export refactors.
## Release 29.0.0 This release includes new React Native header and layout primitives, BottomSheet API updates, shared type migrations, and documentation/runtime dependency alignment across core design-system packages. ### 📦 Package Versions - @metamask/design-system-shared: 0.7.0 - @metamask/design-system-react: 0.14.0 - @metamask/design-system-react-native: 0.14.0 ### 🔄 Shared Type Updates (0.7.0) #### Added - Added shared types used by new React Native header components, including HeaderRoot contracts consumed by @metamask/design-system-react-native (#1029). - Added shared BoxHorizontal and BoxVertical utility component contracts for cross-platform layout primitives (#1003). #### Changed - Migrated AvatarBase type exports from enum-based definitions to shared const-object + string-union types, aligned with ADR-0003/ADR-0004 (#1005). - Updated @metamask/utils dependency to ^11.11.0 (#1033). ### 🌐 React Web Updates (0.14.0) #### Changed - BREAKING: Updated AvatarBase exports to consume shared const-object + string-union types rather than local enums (#1005). - No migration required for typical usage; continue importing from @metamask/design-system-react as before. - Runtime values remain stable while type definitions follow ADR-0003/ADR-0004. - Updated @metamask/utils peer dependency to ^11.11.0 (#1033). - Expanded BannerBase migration documentation to improve upgrade guidance for recent releases (#1011). ### 📱 React Native Updates (0.14.0) #### Added - Added HeaderRoot as a new root primitive for React Native header composition (#1029). - Added HeaderStandard for standardized title + action header layouts in mobile screens (#1028, #1030). - Added TextFieldSearch for search-style text input flows on mobile (#1027). - Added BoxHorizontal and BoxVertical utility components for directional layout composition (#1003). #### Changed - BREAKING: Replaced BottomSheet shouldNavigateBack with an optional goBack callback for explicit navigation handling in host apps (#1024). - Remove shouldNavigateBack usage and pass goBack when sheet close should navigate back. - See migration guide: packages/design-system-react-native/MIGRATION.md#from-version-0130-to-0140. - Added panGestureHandlerProps support to BottomSheet for gesture-handler customization (#1016). - Migrated React Native package exports from default exports to named exports for consistent import ergonomics (#1032). - BREAKING: Updated AvatarBase exports to use shared const-object + string-union types instead of local enums (#1005). - No migration required for typical usage; continue importing from @metamask/design-system-react-native as before. - Runtime values remain stable while type definitions follow ADR-0003/ADR-0004. - Updated @metamask/utils peer dependency to ^11.11.0 (#1033). - Expanded BannerBase migration documentation to improve upgrade guidance for consumers (#1011). #### Fixed - Updated BottomSheetHeader action button size to md for consistent sizing and visual alignment (#1012). ###⚠️ Breaking Changes - BottomSheet (React Native): replaced shouldNavigateBack with optional goBack callback (#1024). - Migration required where shouldNavigateBack was used; see packages/design-system-react-native/MIGRATION.md#from-version-0130-to-0140. - AvatarBase export type migration (React + React Native): moved from local enums to shared const-object + string-union types (#1005). - Marked breaking for type contract changes, but no migration is expected for typical consumer imports/usage. ### ✅ Checklist - [x] Changelogs updated with human-readable descriptions - [x] Changelog validation passed (yarn changelog:validate) - [x] Version bumps follow semantic versioning - [x] design-system-shared: minor (0.6.0 to 0.7.0) - shared types and dependency alignment - [x] design-system-react: minor (0.13.0 to 0.14.0) - shared type migration and docs/dependency updates - [x] design-system-react-native: minor (0.13.0 to 0.14.0) - new components and API enhancements - [x] Breaking changes documented with migration guidance - [x] Migration guides updated with before/after examples (if breaking changes) - [x] PR references included in changelog entries ## **Pre-merge author checklist** - [x] I have followed MetaMask Contributor Docs - [x] I have reviewed the Release Workflow cursor rule - [ ] All tests pass (yarn build && yarn test && yarn lint) - [x] Changelog validation passes (yarn changelog:validate) ## **Pre-merge reviewer checklist** - [x] I have reviewed the Reviewing Release PRs guide - [x] Package versions follow semantic versioning - [x] Changelog entries are consumer-facing (not commit message regurgitation) - [x] Breaking changes are documented in MIGRATION.md with examples - [x] All unreleased changes are accounted for in changelogs <!-- CURSOR_SUMMARY --> --- > [!NOTE] > <sup>[Cursor Bugbot](https://cursor.com/bugbot) is generating a summary for commit 87c05a5. Configure [here](https://www.cursor.com/dashboard/bugbot).</sup> <!-- /CURSOR_SUMMARY -->
## **Description** This PR migrates React Native component modules away from default exports to named exports and updates all affected local imports/re-exports. It also adds an ESLint guard (`import-x/no-default-export`) for component source files to prevent regressions. The migration covers `BottomSheetDialog`, `Toast`, `Skeleton`, and `KeyValueRow` (including its internal subcomponents), plus related stories/tests/barrels. ## **Related issues** Fixes: ## **Manual testing steps** 1. Check out `chore/named-component-exports`. 2. Run `yarn lint`. 3. Run `yarn test`. 4. Run `yarn build`. 5. Verify RN stories/components still import and render the migrated components: - `BottomSheetDialog` - `HeaderStandard` - `Toast` - `Skeleton` - `KeyValueRow` ## **Screenshots/Recordings** N/A (export/import refactor only). ### **Before** N/A ### **After** N/A ## **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 - [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [ ] 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. ## **Validation notes** - `yarn lint`: pass - `yarn build`: pass - `yarn test`: fails in `@metamask/design-system-react` on existing `BadgeWrapper` type-export errors (`BadgeWrapperPosition` and `BadgeWrapperPositionAnchorShape` missing from `@metamask/design-system-shared`). <!-- CURSOR_SUMMARY --> --- > [!NOTE] > **Medium Risk** > Mostly a mechanical export/import refactor, but it changes public module export shape for multiple React Native components and can break downstream imports if any were missed. > > **Overview** > Migrates several `design-system-react-native` components from **default exports to named exports** (notably `BottomSheetDialog`, `Toast`, `Skeleton`, and `KeyValueRow` plus its internal stubs), and updates all local imports, barrel re-exports, stories, tests, and Jest mocks accordingly. > > Adds an ESLint guard (`import-x/no-default-export`) for `design-system-react` and `design-system-react-native` component source files (excluding stories/tests/`.d.ts`) to prevent reintroducing default exports. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit 7c166c0. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup> <!-- /CURSOR_SUMMARY -->
## Release 29.0.0 This release includes new React Native header and layout primitives, BottomSheet API updates, shared type migrations, and documentation/runtime dependency alignment across core design-system packages. ### 📦 Package Versions - @metamask/design-system-shared: 0.7.0 - @metamask/design-system-react: 0.14.0 - @metamask/design-system-react-native: 0.14.0 ### 🔄 Shared Type Updates (0.7.0) #### Added - Added shared types used by new React Native header components, including HeaderRoot contracts consumed by @metamask/design-system-react-native (#1029). - Added shared BoxHorizontal and BoxVertical utility component contracts for cross-platform layout primitives (#1003). #### Changed - Migrated AvatarBase type exports from enum-based definitions to shared const-object + string-union types, aligned with ADR-0003/ADR-0004 (#1005). - Updated @metamask/utils dependency to ^11.11.0 (#1033). ### 🌐 React Web Updates (0.14.0) #### Changed - BREAKING: Updated AvatarBase exports to consume shared const-object + string-union types rather than local enums (#1005). - No migration required for typical usage; continue importing from @metamask/design-system-react as before. - Runtime values remain stable while type definitions follow ADR-0003/ADR-0004. - Updated @metamask/utils peer dependency to ^11.11.0 (#1033). - Expanded BannerBase migration documentation to improve upgrade guidance for recent releases (#1011). ### 📱 React Native Updates (0.14.0) #### Added - Added HeaderRoot as a new root primitive for React Native header composition (#1029). - Added HeaderStandard for standardized title + action header layouts in mobile screens (#1028, #1030). - Added TextFieldSearch for search-style text input flows on mobile (#1027). - Added BoxHorizontal and BoxVertical utility components for directional layout composition (#1003). #### Changed - BREAKING: Replaced BottomSheet shouldNavigateBack with an optional goBack callback for explicit navigation handling in host apps (#1024). - Remove shouldNavigateBack usage and pass goBack when sheet close should navigate back. - See migration guide: packages/design-system-react-native/MIGRATION.md#from-version-0130-to-0140. - Added panGestureHandlerProps support to BottomSheet for gesture-handler customization (#1016). - Migrated React Native package exports from default exports to named exports for consistent import ergonomics (#1032). - BREAKING: Updated AvatarBase exports to use shared const-object + string-union types instead of local enums (#1005). - No migration required for typical usage; continue importing from @metamask/design-system-react-native as before. - Runtime values remain stable while type definitions follow ADR-0003/ADR-0004. - Updated @metamask/utils peer dependency to ^11.11.0 (#1033). - Expanded BannerBase migration documentation to improve upgrade guidance for consumers (#1011). #### Fixed - Updated BottomSheetHeader action button size to md for consistent sizing and visual alignment (#1012). ###⚠️ Breaking Changes - BottomSheet (React Native): replaced shouldNavigateBack with optional goBack callback (#1024). - Migration required where shouldNavigateBack was used; see packages/design-system-react-native/MIGRATION.md#from-version-0130-to-0140. - AvatarBase export type migration (React + React Native): moved from local enums to shared const-object + string-union types (#1005). - Marked breaking for type contract changes, but no migration is expected for typical consumer imports/usage. ### ✅ Checklist - [x] Changelogs updated with human-readable descriptions - [x] Changelog validation passed (yarn changelog:validate) - [x] Version bumps follow semantic versioning - [x] design-system-shared: minor (0.6.0 to 0.7.0) - shared types and dependency alignment - [x] design-system-react: minor (0.13.0 to 0.14.0) - shared type migration and docs/dependency updates - [x] design-system-react-native: minor (0.13.0 to 0.14.0) - new components and API enhancements - [x] Breaking changes documented with migration guidance - [x] Migration guides updated with before/after examples (if breaking changes) - [x] PR references included in changelog entries ## **Pre-merge author checklist** - [x] I have followed MetaMask Contributor Docs - [x] I have reviewed the Release Workflow cursor rule - [ ] All tests pass (yarn build && yarn test && yarn lint) - [x] Changelog validation passes (yarn changelog:validate) ## **Pre-merge reviewer checklist** - [x] I have reviewed the Reviewing Release PRs guide - [x] Package versions follow semantic versioning - [x] Changelog entries are consumer-facing (not commit message regurgitation) - [x] Breaking changes are documented in MIGRATION.md with examples - [x] All unreleased changes are accounted for in changelogs <!-- CURSOR_SUMMARY --> --- > [!NOTE] > <sup>[Cursor Bugbot](https://cursor.com/bugbot) is generating a summary for commit 87c05a5. Configure [here](https://www.cursor.com/dashboard/bugbot).</sup> <!-- /CURSOR_SUMMARY -->
## **Description** This PR migrates React Native component modules away from default exports to named exports and updates all affected local imports/re-exports. It also adds an ESLint guard (`import-x/no-default-export`) for component source files to prevent regressions. The migration covers `BottomSheetDialog`, `Toast`, `Skeleton`, and `KeyValueRow` (including its internal subcomponents), plus related stories/tests/barrels. ## **Related issues** Fixes: ## **Manual testing steps** 1. Check out `chore/named-component-exports`. 2. Run `yarn lint`. 3. Run `yarn test`. 4. Run `yarn build`. 5. Verify RN stories/components still import and render the migrated components: - `BottomSheetDialog` - `HeaderStandard` - `Toast` - `Skeleton` - `KeyValueRow` ## **Screenshots/Recordings** N/A (export/import refactor only). ### **Before** N/A ### **After** N/A ## **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 - [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [ ] 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. ## **Validation notes** - `yarn lint`: pass - `yarn build`: pass - `yarn test`: fails in `@metamask/design-system-react` on existing `BadgeWrapper` type-export errors (`BadgeWrapperPosition` and `BadgeWrapperPositionAnchorShape` missing from `@metamask/design-system-shared`). <!-- CURSOR_SUMMARY --> --- > [!NOTE] > **Medium Risk** > Mostly a mechanical export/import refactor, but it changes public module export shape for multiple React Native components and can break downstream imports if any were missed. > > **Overview** > Migrates several `design-system-react-native` components from **default exports to named exports** (notably `BottomSheetDialog`, `Toast`, `Skeleton`, and `KeyValueRow` plus its internal stubs), and updates all local imports, barrel re-exports, stories, tests, and Jest mocks accordingly. > > Adds an ESLint guard (`import-x/no-default-export`) for `design-system-react` and `design-system-react-native` component source files (excluding stories/tests/`.d.ts`) to prevent reintroducing default exports. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit 7c166c0. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup> <!-- /CURSOR_SUMMARY -->
## Release 29.0.0 This release includes new React Native header and layout primitives, BottomSheet API updates, shared type migrations, and documentation/runtime dependency alignment across core design-system packages. ### 📦 Package Versions - @metamask/design-system-shared: 0.7.0 - @metamask/design-system-react: 0.14.0 - @metamask/design-system-react-native: 0.14.0 ### 🔄 Shared Type Updates (0.7.0) #### Added - Added shared types used by new React Native header components, including HeaderRoot contracts consumed by @metamask/design-system-react-native (#1029). - Added shared BoxHorizontal and BoxVertical utility component contracts for cross-platform layout primitives (#1003). #### Changed - Migrated AvatarBase type exports from enum-based definitions to shared const-object + string-union types, aligned with ADR-0003/ADR-0004 (#1005). - Updated @metamask/utils dependency to ^11.11.0 (#1033). ### 🌐 React Web Updates (0.14.0) #### Changed - BREAKING: Updated AvatarBase exports to consume shared const-object + string-union types rather than local enums (#1005). - No migration required for typical usage; continue importing from @metamask/design-system-react as before. - Runtime values remain stable while type definitions follow ADR-0003/ADR-0004. - Updated @metamask/utils peer dependency to ^11.11.0 (#1033). - Expanded BannerBase migration documentation to improve upgrade guidance for recent releases (#1011). ### 📱 React Native Updates (0.14.0) #### Added - Added HeaderRoot as a new root primitive for React Native header composition (#1029). - Added HeaderStandard for standardized title + action header layouts in mobile screens (#1028, #1030). - Added TextFieldSearch for search-style text input flows on mobile (#1027). - Added BoxHorizontal and BoxVertical utility components for directional layout composition (#1003). #### Changed - BREAKING: Replaced BottomSheet shouldNavigateBack with an optional goBack callback for explicit navigation handling in host apps (#1024). - Remove shouldNavigateBack usage and pass goBack when sheet close should navigate back. - See migration guide: packages/design-system-react-native/MIGRATION.md#from-version-0130-to-0140. - Added panGestureHandlerProps support to BottomSheet for gesture-handler customization (#1016). - Migrated React Native package exports from default exports to named exports for consistent import ergonomics (#1032). - BREAKING: Updated AvatarBase exports to use shared const-object + string-union types instead of local enums (#1005). - No migration required for typical usage; continue importing from @metamask/design-system-react-native as before. - Runtime values remain stable while type definitions follow ADR-0003/ADR-0004. - Updated @metamask/utils peer dependency to ^11.11.0 (#1033). - Expanded BannerBase migration documentation to improve upgrade guidance for consumers (#1011). #### Fixed - Updated BottomSheetHeader action button size to md for consistent sizing and visual alignment (#1012). ###⚠️ Breaking Changes - BottomSheet (React Native): replaced shouldNavigateBack with optional goBack callback (#1024). - Migration required where shouldNavigateBack was used; see packages/design-system-react-native/MIGRATION.md#from-version-0130-to-0140. - AvatarBase export type migration (React + React Native): moved from local enums to shared const-object + string-union types (#1005). - Marked breaking for type contract changes, but no migration is expected for typical consumer imports/usage. ### ✅ Checklist - [x] Changelogs updated with human-readable descriptions - [x] Changelog validation passed (yarn changelog:validate) - [x] Version bumps follow semantic versioning - [x] design-system-shared: minor (0.6.0 to 0.7.0) - shared types and dependency alignment - [x] design-system-react: minor (0.13.0 to 0.14.0) - shared type migration and docs/dependency updates - [x] design-system-react-native: minor (0.13.0 to 0.14.0) - new components and API enhancements - [x] Breaking changes documented with migration guidance - [x] Migration guides updated with before/after examples (if breaking changes) - [x] PR references included in changelog entries ## **Pre-merge author checklist** - [x] I have followed MetaMask Contributor Docs - [x] I have reviewed the Release Workflow cursor rule - [ ] All tests pass (yarn build && yarn test && yarn lint) - [x] Changelog validation passes (yarn changelog:validate) ## **Pre-merge reviewer checklist** - [x] I have reviewed the Reviewing Release PRs guide - [x] Package versions follow semantic versioning - [x] Changelog entries are consumer-facing (not commit message regurgitation) - [x] Breaking changes are documented in MIGRATION.md with examples - [x] All unreleased changes are accounted for in changelogs <!-- CURSOR_SUMMARY --> --- > [!NOTE] > <sup>[Cursor Bugbot](https://cursor.com/bugbot) is generating a summary for commit 87c05a5. Configure [here](https://www.cursor.com/dashboard/bugbot).</sup> <!-- /CURSOR_SUMMARY -->
## Release 29.0.0 This release includes new React Native header and layout primitives, BottomSheet API updates, shared type migrations, and documentation/runtime dependency alignment across core design-system packages. ### 📦 Package Versions - @metamask/design-system-shared: 0.7.0 - @metamask/design-system-react: 0.14.0 - @metamask/design-system-react-native: 0.14.0 ### 🔄 Shared Type Updates (0.7.0) #### Added - Added shared types used by new React Native header components, including HeaderRoot contracts consumed by @metamask/design-system-react-native (#1029). - Added shared BoxHorizontal and BoxVertical utility component contracts for cross-platform layout primitives (#1003). #### Changed - Migrated AvatarBase type exports from enum-based definitions to shared const-object + string-union types, aligned with ADR-0003/ADR-0004 (#1005). - Updated @metamask/utils dependency to ^11.11.0 (#1033). ### 🌐 React Web Updates (0.14.0) #### Changed - BREAKING: Updated AvatarBase exports to consume shared const-object + string-union types rather than local enums (#1005). - No migration required for typical usage; continue importing from @metamask/design-system-react as before. - Runtime values remain stable while type definitions follow ADR-0003/ADR-0004. - Updated @metamask/utils peer dependency to ^11.11.0 (#1033). - Expanded BannerBase migration documentation to improve upgrade guidance for recent releases (#1011). ### 📱 React Native Updates (0.14.0) #### Added - Added HeaderRoot as a new root primitive for React Native header composition (#1029). - Added HeaderStandard for standardized title + action header layouts in mobile screens (#1028, #1030). - Added TextFieldSearch for search-style text input flows on mobile (#1027). - Added BoxHorizontal and BoxVertical utility components for directional layout composition (#1003). #### Changed - BREAKING: Replaced BottomSheet shouldNavigateBack with an optional goBack callback for explicit navigation handling in host apps (#1024). - Remove shouldNavigateBack usage and pass goBack when sheet close should navigate back. - See migration guide: packages/design-system-react-native/MIGRATION.md#from-version-0130-to-0140. - Added panGestureHandlerProps support to BottomSheet for gesture-handler customization (#1016). - Migrated React Native package exports from default exports to named exports for consistent import ergonomics (#1032). - BREAKING: Updated AvatarBase exports to use shared const-object + string-union types instead of local enums (#1005). - No migration required for typical usage; continue importing from @metamask/design-system-react-native as before. - Runtime values remain stable while type definitions follow ADR-0003/ADR-0004. - Updated @metamask/utils peer dependency to ^11.11.0 (#1033). - Expanded BannerBase migration documentation to improve upgrade guidance for consumers (#1011). #### Fixed - Updated BottomSheetHeader action button size to md for consistent sizing and visual alignment (#1012). ###⚠️ Breaking Changes - BottomSheet (React Native): replaced shouldNavigateBack with optional goBack callback (#1024). - Migration required where shouldNavigateBack was used; see packages/design-system-react-native/MIGRATION.md#from-version-0130-to-0140. - AvatarBase export type migration (React + React Native): moved from local enums to shared const-object + string-union types (#1005). - Marked breaking for type contract changes, but no migration is expected for typical consumer imports/usage. ### ✅ Checklist - [x] Changelogs updated with human-readable descriptions - [x] Changelog validation passed (yarn changelog:validate) - [x] Version bumps follow semantic versioning - [x] design-system-shared: minor (0.6.0 to 0.7.0) - shared types and dependency alignment - [x] design-system-react: minor (0.13.0 to 0.14.0) - shared type migration and docs/dependency updates - [x] design-system-react-native: minor (0.13.0 to 0.14.0) - new components and API enhancements - [x] Breaking changes documented with migration guidance - [x] Migration guides updated with before/after examples (if breaking changes) - [x] PR references included in changelog entries ## **Pre-merge author checklist** - [x] I have followed MetaMask Contributor Docs - [x] I have reviewed the Release Workflow cursor rule - [ ] All tests pass (yarn build && yarn test && yarn lint) - [x] Changelog validation passes (yarn changelog:validate) ## **Pre-merge reviewer checklist** - [x] I have reviewed the Reviewing Release PRs guide - [x] Package versions follow semantic versioning - [x] Changelog entries are consumer-facing (not commit message regurgitation) - [x] Breaking changes are documented in MIGRATION.md with examples - [x] All unreleased changes are accounted for in changelogs <!-- CURSOR_SUMMARY --> --- > [!NOTE] > <sup>[Cursor Bugbot](https://cursor.com/bugbot) is generating a summary for commit 87c05a5. Configure [here](https://www.cursor.com/dashboard/bugbot).</sup> <!-- /CURSOR_SUMMARY -->


Description
This PR migrates React Native component modules away from default exports to named exports and updates all affected local imports/re-exports. It also adds an ESLint guard (
import-x/no-default-export) for component source files to prevent regressions.The migration covers
BottomSheetDialog,Toast,Skeleton, andKeyValueRow(including its internal subcomponents), plus related stories/tests/barrels.Related issues
Fixes:
Manual testing steps
chore/named-component-exports.yarn lint.yarn test.yarn build.BottomSheetDialogHeaderStandardToastSkeletonKeyValueRowScreenshots/Recordings
N/A (export/import refactor only).
Before
N/A
After
N/A
Pre-merge author checklist
Pre-merge reviewer checklist
Validation notes
yarn lint: passyarn build: passyarn test: fails in@metamask/design-system-reacton existingBadgeWrappertype-export errors (BadgeWrapperPositionandBadgeWrapperPositionAnchorShapemissing from@metamask/design-system-shared).Note
Medium Risk
Mostly a mechanical export/import refactor, but it changes public module export shape for multiple React Native components and can break downstream imports if any were missed.
Overview
Migrates several
design-system-react-nativecomponents from default exports to named exports (notablyBottomSheetDialog,Toast,Skeleton, andKeyValueRowplus its internal stubs), and updates all local imports, barrel re-exports, stories, tests, and Jest mocks accordingly.Adds an ESLint guard (
import-x/no-default-export) fordesign-system-reactanddesign-system-react-nativecomponent source files (excluding stories/tests/.d.ts) to prevent reintroducing default exports.Written by Cursor Bugbot for commit 7c166c0. This will update automatically on new commits. Configure here.