feat(shared): migrate Box to ADR-0003 and ADR-0004 shared types (DSYS-482)#1026
feat(shared): migrate Box to ADR-0003 and ADR-0004 shared types (DSYS-482)#1026cursor[bot] wants to merge 1 commit intomainfrom
Conversation
📖 Storybook Preview |
|
@metamaskbot publish-preview |
|
Preview builds have been published. See these instructions for more information about preview builds. Expand for full list of packages and versions. |
…-482)
- Create 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 primitive types)
- BoxPropsShared new shared props type with platform-independent properties (ADR-0004)
- Export Box types from @metamask/design-system-shared index
- Update React package Box.types.ts to extend BoxPropsShared from shared
- Update React package Box/index.ts to export const objects from shared
- Update React Native package Box.types.ts to extend BoxPropsShared from shared
- Update React Native package Box/index.ts to export const objects from shared
- Remove old Box enums from both platform type indices
- Update all files importing Box types to import from @metamask/design-system-shared
Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>
georgewrmarshall
force-pushed
the
cursor/enum-shared-type-migration-8196
branch
from
69c659c to
a73a010
Compare
|
@metamaskbot publish-preview |
| */ | ||
| export const BoxBorderColor = { | ||
| /** Background default for cut out effect */ | ||
| BackgroundDefault: 'border-background-default', |
There was a problem hiding this comment.
ADR-0003: const objects are runtime backwards-compatible with the old enums.
The old enum BoxFlexDirection { Row = 'flex-row' } and the new const BoxFlexDirection = { Row: 'flex-row' } as const produce identical runtime values — BoxFlexDirection.Row === 'flex-row' in both. Consumers who access members by name (BoxFlexDirection.Row) require no code changes. The only behavioral difference is TypeScript narrows the derived union type ('flex-row' | 'flex-row-reverse' | ...) instead of treating it as an opaque enum — which is strictly more permissive for string literal assignments.
📖 Storybook Preview |
| * The background color of the component. | ||
| */ | ||
| backgroundColor?: BoxBackgroundColor; | ||
| }; |
There was a problem hiding this comment.
Why are className, twClassName, and asChild absent from BoxPropsShared?
These are platform-specific concerns: className is web-only CSS, twClassName is React Native TWRNC, and asChild is the Radix UI polymorphic pattern used only in React web. Per ADR-0004, shared props must be platform-independent — only layout/spacing/color props that map to the same Tailwind class names on both platforms belong here. Each platform's BoxProps adds its own extension props on top.
| * @default false | ||
| */ | ||
| asChild?: boolean; | ||
| }; |
There was a problem hiding this comment.
~130 lines collapsed to ~17: the full reduction enabled by ADR-0004.
All spacing/layout/color prop declarations now live in BoxPropsShared in the shared package. The React BoxProps only needs to add the two web-specific props: className (Tailwind CSS override) and asChild (Radix UI slot pattern for polymorphic rendering). This is the intended outcome of the centralized types architecture — platform files become thin extension layers.
| type BoxBorderWidth, | ||
| } from '@metamask/design-system-shared'; | ||
| export { Box } from './Box'; | ||
| export type { BoxProps } from './Box.types'; |
There was a problem hiding this comment.
Why BoxBorderWidth is now exported from index.ts when it wasn't before.
The React package previously only re-exported BoxSpacing (not BoxBorderWidth) from its index.ts. Now that both types live in the shared package, both are exported here to maintain a complete public API from the component barrel. This brings React into parity with React Native, which already needed BoxBorderWidth for its constants file.
| } from '../../types'; | ||
| } from '@metamask/design-system-shared'; | ||
|
|
||
| import { IconColor, IconName } from '../../types'; |
There was a problem hiding this comment.
This split-import pattern is the correct ADR-0004 boundary in practice.
BannerAlertSeverity, BoxBackgroundColor, and BoxBorderColor are cross-platform design system tokens → imported from @metamask/design-system-shared. IconColor and IconName are still platform-specific (React Native Icon enum values differ from React) → stay in ../../types. This file is a good example of where the shared/platform boundary sits for a real consuming component.
|
Preview builds have been published. See these instructions for more information about preview builds. Expand for full list of packages and versions. |
2 participants
Description
Migrates the
Boxcomponent to follow ADR-0003 (String Unions) and ADR-0004 (Centralized Types Architecture) as part of the DSYS-468 epic.What changed:
packages/design-system-shared/src/types/Box/Box.types.tswith:BoxFlexDirection,BoxFlexWrap,BoxAlignItems,BoxJustifyContent,BoxBackgroundColor,BoxBorderColorconverted from enums to const objects (ADR-0003)BoxSpacing,BoxBorderWidthtype aliases (unchanged — already primitive literal types)BoxPropsSharednew shared props type with all platform-independent properties (ADR-0004)@metamask/design-system-sharedindexBox.types.tsto extendBoxPropsSharedfrom sharedBox/index.tsto export const objects from shared (single source of truth)Box.types.tsto extendBoxPropsSharedfrom sharedBox/index.tsto export const objects from sharedsrc/types/index.tsfiles../../typesto 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
yarn buildfrom repo root — should succeedyarn testfrom repo root — all Box tests should pass with 100% coverageyarn lintfrom repo root — no new lint errorsScreenshots/Recordings
Before
BoxFlexDirection,BoxFlexWrap,BoxAlignItems,BoxJustifyContent,BoxBackgroundColor,BoxBorderColorwere enums duplicated in bothdesign-system-react/src/types/index.tsanddesign-system-react-native/src/types/index.tswith no shared source.After
All Box enums are now const objects in
@metamask/design-system-shared, with a singleBoxPropsSharedtype containing all platform-independent props. Both React and React Native packages extendBoxPropsSharedand add their platform-specific props (className/asChildfor React,twClassNamefor React Native).Pre-merge author checklist
Pre-merge reviewer checklist
Note
Medium Risk
Medium risk because it replaces duplicated
Boxenums/types across React and React Native with new shared exports and updates many imports, which can cause downstream type/Storybook breakage if any consumer relied on the old enum shapes.Overview
Migrates
Boxtype definitions to@metamask/design-system-sharedby introducing new sharedBoxexports (includingBoxPropsShared) and converting severalBox*enums to const object + string-union types.Updates React and React Native
Boxcomponent types to extendBoxPropsShared, re-exportsBoxtypes from shared in each package, and removes the legacyBox*types from each platform’ssrc/types/index.ts. Related components/tests/stories (e.g.,BannerBase,BannerAlert,BoxHorizontal/Vertical, and Storybook stories) are adjusted to importBoxtypes/colors from shared instead of localtypes.Reviewed by Cursor Bugbot for commit a73a010. Bugbot is set up for automated code reviews on this repo. Configure here.