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

packages/design-system-react-native/src/components/BannerAlert/BannerAlert.constants.ts

@@ -1,11 +1,10 @@
-import { BannerAlertSeverity } from '@metamask/design-system-shared';
-
 import {
+  BannerAlertSeverity,
   BoxBackgroundColor,
   BoxBorderColor,
-  IconColor,
-  IconName,
-} from '../../types';
+} from '@metamask/design-system-shared';
+
+import { IconColor, IconName } from '../../types';
 
 export const MAP_BANNER_ALERT_SEVERITY_ICON_NAME: Record<
   (typeof BannerAlertSeverity)[keyof typeof BannerAlertSeverity],

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

@@ -1,8 +1,9 @@
+import { BoxBackgroundColor } from '@metamask/design-system-shared';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import { render } from '@testing-library/react-native';
 import React from 'react';
 
-import { BoxBackgroundColor, IconColor, IconName } from '../../types';
+import { IconColor, IconName } from '../../types';
 import { BannerBase } from '../BannerBase';
 
 import { BannerAlert } from './BannerAlert';

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

@@ -1,13 +1,15 @@
+import {
+  BoxAlignItems,
+  BoxBackgroundColor,
+  BoxFlexDirection,
+} from '@metamask/design-system-shared';
 import React from 'react';
 import { GestureResponderEvent } from 'react-native';
 
 import {
-  BoxAlignItems,
-  BoxBackgroundColor,
   ButtonIconSize,
   ButtonSize,
   FontWeight,
-  BoxFlexDirection,
   IconName,
   TextVariant,
 } from '../../types';

packages/design-system-react-native/src/components/Box/Box.constants.ts

@@ -1,4 +1,7 @@
-import type { BoxSpacing, BoxBorderWidth } from '../../types';
+import type {
+  BoxSpacing,
+  BoxBorderWidth,
+} from '@metamask/design-system-shared';
 
 export const TWCLASSMAP_BOX_GAP: Record<BoxSpacing, string> = {
   0: 'gap-0',

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

@@ -1,16 +1,16 @@
-import type { Meta, StoryObj } from '@storybook/react-native';
-import React from 'react';
-import { ScrollView } from 'react-native';
-
 import {
   BoxFlexDirection,
   BoxFlexWrap,
   BoxAlignItems,
   BoxJustifyContent,
   BoxBackgroundColor,
   BoxBorderColor,
-  TextColor,
-} from '../../types';
+} from '@metamask/design-system-shared';
+import type { Meta, StoryObj } from '@storybook/react-native';
+import React from 'react';
+import { ScrollView } from 'react-native';
+
+import { TextColor } from '../../types';
 import { Text } from '../Text';
 
 import { Box } from './Box';

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

@@ -1,18 +1,17 @@
-import { useTailwind } from '@metamask/design-system-twrnc-preset';
-import { renderHook } from '@testing-library/react-hooks';
-import { render } from '@testing-library/react-native';
-import React from 'react';
-import { Text } from 'react-native';
-import type { StyleProp, ViewStyle } from 'react-native';
-
 import {
   BoxFlexDirection,
   BoxFlexWrap,
   BoxAlignItems,
   BoxJustifyContent,
   BoxBackgroundColor,
   BoxBorderColor,
-} from '../../types';
+} from '@metamask/design-system-shared';
+import { useTailwind } from '@metamask/design-system-twrnc-preset';
+import { renderHook } from '@testing-library/react-hooks';
+import { render } from '@testing-library/react-native';
+import React from 'react';
+import { Text } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
 
 import { Box } from './Box';
 import {

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

@@ -1,123 +1,10 @@
+import type { BoxPropsShared } from '@metamask/design-system-shared';
 import type { ViewProps } from 'react-native';
 
-import type {
-  BoxFlexDirection,
-  BoxFlexWrap,
-  BoxSpacing,
-  BoxBorderWidth,
-  BoxAlignItems,
-  BoxJustifyContent,
-  BoxBackgroundColor,
-  BoxBorderColor,
-} from '../../types';
-
-export type BoxProps = {
-  /**
-   * The flexDirection style of the component.
-   */
-  flexDirection?: BoxFlexDirection;
-  /**
-   * The flexWrap style of the component.
-   */
-  flexWrap?: BoxFlexWrap;
-  /**
-   * The gap between the component's children.
-   * Use 1-12 for a gap of 4px-48px.
-   */
-  gap?: BoxSpacing;
-  /**
-   * The alignItems style of the component.
-   */
-  alignItems?: BoxAlignItems;
-  /**
-   * The justifyContent style of the component.
-   */
-  justifyContent?: BoxJustifyContent;
-  /**
-   * The margin of the component.
-   * Use 1-12 for margin of 4px-48px.
-   */
-  margin?: BoxSpacing;
-  /**
-   * The top margin of the component.
-   * Use 1-12 for margin of 4px-48px.
-   */
-  marginTop?: BoxSpacing;
-  /**
-   * The right margin of the component.
-   * Use 1-12 for margin of 4px-48px.
-   */
-  marginRight?: BoxSpacing;
-  /**
-   * The bottom margin of the component.
-   * Use 1-12 for margin of 4px-48px.
-   */
-  marginBottom?: BoxSpacing;
-  /**
-   * The left margin of the component.
-   * Use 1-12 for margin of 4px-48px.
-   */
-  marginLeft?: BoxSpacing;
-  /**
-   * The horizontal margin of the component.
-   * Use 1-12 for margin of 4px-48px.
-   */
-  marginHorizontal?: BoxSpacing;
-  /**
-   * The vertical margin of the component.
-   * Use 1-12 for margin of 4px-48px.
-   */
-  marginVertical?: BoxSpacing;
-  /**
-   * The padding of the component.
-   * Use 1-12 for padding of 4px-48px.
-   */
-  padding?: BoxSpacing;
-  /**
-   * The top padding of the component.
-   * Use 1-12 for padding of 4px-48px.
-   */
-  paddingTop?: BoxSpacing;
-  /**
-   * The right padding of the component.
-   * Use 1-12 for padding of 4px-48px.
-   */
-  paddingRight?: BoxSpacing;
-  /**
-   * The bottom padding of the component.
-   * Use 1-12 for padding of 4px-48px.
-   */
-  paddingBottom?: BoxSpacing;
-  /**
-   * The left padding of the component.
-   * Use 1-12 for padding of 4px-48px.
-   */
-  paddingLeft?: BoxSpacing;
-  /**
-   * The horizontal padding of the component.
-   * Use 1-12 for padding of 4px-48px.
-   */
-  paddingHorizontal?: BoxSpacing;
-  /**
-   * The vertical padding of the component.
-   * Use 1-12 for padding of 4px-48px.
-   */
-  paddingVertical?: BoxSpacing;
-  /**
-   * The border width of the component.
-   * Use 0, 1, 2, 4, or 8 for border width of 0px, 1px, 2px, 4px, or 8px.
-   */
-  borderWidth?: BoxBorderWidth;
-  /**
-   * The border color of the component.
-   */
-  borderColor?: BoxBorderColor;
-  /**
-   * The background color of the component.
-   */
-  backgroundColor?: BoxBackgroundColor;
-  /**
-   * Optional prop to add twrnc overriding classNames.
-   */
-  twClassName?: string;
-} & ViewProps;
+export type BoxProps = BoxPropsShared &
+  ViewProps & {
+    /**
+     * Optional prop to add twrnc overriding classNames.
+     */
+    twClassName?: string;
+  };

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

@@ -5,7 +5,8 @@ export {
   BoxJustifyContent,
   BoxBackgroundColor,
   BoxBorderColor,
-} from '../../types';
-export type { BoxSpacing, BoxBorderWidth } from '../../types';
+  type BoxSpacing,
+  type BoxBorderWidth,
+} from '@metamask/design-system-shared';
 export { Box } from './Box';
 export type { BoxProps } from './Box.types';

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

@@ -1,6 +1,9 @@
+import {
+  BoxAlignItems,
+  BoxFlexDirection,
+} from '@metamask/design-system-shared';
 import React from 'react';
 
-import { BoxAlignItems, BoxFlexDirection } from '../../types';
 import { Box } from '../Box';
 import { TextOrChildren } from '../temp-components/TextOrChildren';
 

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

@@ -1,6 +1,6 @@
+import { BoxFlexDirection } from '@metamask/design-system-shared';
 import React from 'react';
 
-import { BoxFlexDirection } from '../../types';
 import { Box } from '../Box';
 import { TextOrChildren } from '../temp-components/TextOrChildren';
 

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

@@ -1,6 +1,7 @@
+import { BoxFlexDirection } from '@metamask/design-system-shared';
 import type { Meta, StoryObj } from '@storybook/react-native';
 
-import { BoxFlexDirection, ButtonBaseSize } from '../../types';
+import { ButtonBaseSize } from '../../types';
 import { Box } from '../Box';
 import { IconName } from '../Icon';
 

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

@@ -1,7 +1,7 @@
+import { BoxBackgroundColor } from '@metamask/design-system-shared';
 import type { Meta, StoryObj } from '@storybook/react-native';
 import React from 'react';
 
-import { BoxBackgroundColor } from '../../types';
 import { Box } from '../Box';
 import { Text } from '../Text';
 

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

@@ -1,6 +1,6 @@
+import { BoxFlexDirection } from '@metamask/design-system-shared';
 import type { Meta, StoryObj } from '@storybook/react-native';
 
-import { BoxFlexDirection } from '../../types';
 import { Box } from '../Box';
 import { IconName } from '../Icon';
 

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

@@ -1,7 +1,7 @@
+import { BoxBackgroundColor } from '@metamask/design-system-shared';
 import type { Meta, StoryObj } from '@storybook/react-native';
 import React from 'react';
 
-import { BoxBackgroundColor } from '../../types';
 import { Box } from '../Box';
 import { Icon, IconName, IconSize } from '../Icon';
 import { Text } from '../Text';

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

@@ -1,14 +1,12 @@
-import type { Meta, StoryObj } from '@storybook/react-native';
-import { ScrollView } from 'react-native';
-
 import {
-  TextVariant,
-  TextColor,
-  FontWeight,
   BoxFlexDirection,
   BoxFlexWrap,
   BoxAlignItems,
-} from '../../../types';
+} from '@metamask/design-system-shared';
+import type { Meta, StoryObj } from '@storybook/react-native';
+import { ScrollView } from 'react-native';
+
+import { TextVariant, TextColor, FontWeight } from '../../../types';
 import { Box } from '../../Box';
 import { Text } from '../../Text';
 

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

@@ -1,14 +1,12 @@
-import type { Meta, StoryObj } from '@storybook/react-native';
-import { ScrollView } from 'react-native';
-
 import {
-  TextVariant,
-  TextColor,
-  FontWeight,
   BoxFlexDirection,
   BoxFlexWrap,
   BoxAlignItems,
-} from '../../../types';
+} from '@metamask/design-system-shared';
+import type { Meta, StoryObj } from '@storybook/react-native';
+import { ScrollView } from 'react-native';
+
+import { TextVariant, TextColor, FontWeight } from '../../../types';
 import { Box } from '../../Box';
 import { Text } from '../../Text';
 

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

@@ -1,14 +1,12 @@
-import type { Meta, StoryObj } from '@storybook/react-native';
-import { ScrollView } from 'react-native';
-
 import {
-  TextVariant,
-  TextColor,
-  FontWeight,
   BoxFlexDirection,
   BoxFlexWrap,
   BoxAlignItems,
-} from '../../../types';
+} from '@metamask/design-system-shared';
+import type { Meta, StoryObj } from '@storybook/react-native';
+import { ScrollView } from 'react-native';
+
+import { TextVariant, TextColor, FontWeight } from '../../../types';
 import { Box } from '../../Box';
 import { Text } from '../../Text';