feat(shared): migrate Box to ADR-0003 and ADR-0004 shared types (DSYS-482)

[cursor]

Description

Migrates the Box component to follow ADR-0003 (String Unions) and ADR-0004 (Centralized Types Architecture) as part of the DSYS-468 epic.

What changed:

• Created packages/design-system-shared/src/types/Box/Box.types.ts with:
  • BoxFlexDirection, BoxFlexWrap, BoxAlignItems, BoxJustifyContent, BoxBackgroundColor, BoxBorderColor converted from enums to const objects (ADR-0003)
  • BoxSpacing, BoxBorderWidth type aliases (unchanged — already primitive literal types)
  • BoxPropsShared new shared props type with all platform-independent properties (ADR-0004)
• Exported all Box types from @metamask/design-system-shared index
• Updated React package Box.types.ts to extend BoxPropsShared from shared
• Updated React package Box/index.ts to export const objects from shared (single source of truth)
• Updated React Native package Box.types.ts to extend BoxPropsShared from shared
• Updated React Native package Box/index.ts to export const objects from shared
• Removed old Box enums from both platform src/types/index.ts files
• Updated all files importing Box types directly from ../../types to import from @metamask/design-system-shared (BannerBase, BannerAlert, BoxHorizontal, BoxVertical, and various story files)

All enum values are identical across React and React Native (both use Tailwind class strings), so all enums qualify for ADR-0003 migration.

Related issues

Fixes: DSYS-482

Manual testing steps

1. Run yarn build from repo root — should succeed
2. Run yarn test from repo root — all Box tests should pass with 100% coverage
3. Run yarn lint from repo root — no new lint errors

Screenshots/Recordings

Before

BoxFlexDirection, BoxFlexWrap, BoxAlignItems, BoxJustifyContent, BoxBackgroundColor, BoxBorderColor were enums duplicated in both design-system-react/src/types/index.ts and design-system-react-native/src/types/index.ts with no shared source.

After

All Box enums are now const objects in @metamask/design-system-shared, with a single BoxPropsShared type containing all platform-independent props. Both React and React Native packages extend BoxPropsShared and add their platform-specific props (className/asChild for React, twClassName for React Native).

Pre-merge author checklist

• I've followed MetaMask Contributor Docs
• I've completed the PR template to the best of my ability
• I've included tests if applicable
• I've documented my code using JSDoc format if applicable
• I've applied the right labels on the PR (see labeling guidelines). 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.

  

[github-actions]

📖 Storybook Preview

• View PR Storybook

[georgewrmarshall]

@metamaskbot publish-preview

[github-actions]

Preview builds have been published. See these instructions for more information about preview builds.

Expand for full list of packages and versions.

{
  "@metamask-previews/design-system-react": "0.13.0-preview.69c659c",
  "@metamask-previews/design-system-react-native": "0.13.0-preview.69c659c",
  "@metamask-previews/design-system-shared": "0.6.0-preview.69c659c",
  "@metamask-previews/design-system-tailwind-preset": "0.6.1-preview.69c659c",
  "@metamask-previews/design-system-twrnc-preset": "0.4.0-preview.69c659c",
  "@metamask-previews/design-tokens": "8.3.0-preview.69c659c"
}