chore: remove Box, BoxProps export (#7015)

Author: francinelucca

.changeset/rich-chefs-attend.md

@@ -0,0 +1,7 @@
+---
+"@primer/react": major
+"@primer/styled-react": patch
+---
+
+@primer/react: chore: remove Box, BoxProps export
+@primer/styled-react: add Box component

packages/react/src/__tests__/ThemeProvider.test.tsx

@@ -2,7 +2,8 @@ import {render, screen, waitFor} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import {describe, expect, it, vi} from 'vitest'
 import React from 'react'
-import {Box, ThemeProvider, useColorSchemeVar, useTheme} from '..'
+import {ThemeProvider, useColorSchemeVar, useTheme} from '../'
+import Box from '../Box'
 
 // window.matchMedia() is not implemented by JSDOM so we have to create a mock:
 // https://vijs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom

packages/react/src/__tests__/__snapshots__/exports.test.ts.snap

@@ -33,8 +33,6 @@ exports[`@primer/react > should not update exports without a semver change 1`] =
   "type BaseStylesProps",
   "type BetterCssProperties",
   "type BetterSystemStyleObject",
-  "Box",
-  "type BoxProps",
   "BranchName",
   "type BranchNameProps",
   "Breadcrumb",

packages/react/src/index.ts

@@ -8,8 +8,6 @@ export {default as ThemeProvider, useTheme, useColorSchemeVar} from './ThemeProv
 export type {ThemeProviderProps} from './ThemeProvider'
 
 // Layout
-export {default as Box} from './Box'
-export type {BoxProps} from './Box'
 export * from './Button'
 export {PageLayout} from './PageLayout'
 export type {

packages/styled-react/src/components/Box.tsx

@@ -1 +1,59 @@
-export {Box, type BoxProps} from '@primer/react'
+import styled from 'styled-components'
+import type {
+  BackgroundProps,
+  BorderProps,
+  ColorProps,
+  FlexboxProps,
+  GridProps,
+  LayoutProps,
+  PositionProps,
+  ShadowProps,
+  SpaceProps,
+  TypographyProps,
+} from 'styled-system'
+import {background, border, color, flexbox, grid, layout, position, shadow, space, typography} from 'styled-system'
+import type {SxProp} from '../sx'
+import {sx} from '../sx'
+
+type ComponentProps<T> =
+  T extends React.ComponentType<React.PropsWithChildren<infer Props>> ? (Props extends object ? Props : never) : never
+
+type StyledBoxProps = SxProp &
+  SpaceProps &
+  ColorProps &
+  TypographyProps &
+  LayoutProps &
+  FlexboxProps &
+  GridProps &
+  BackgroundProps &
+  BorderProps &
+  PositionProps &
+  ShadowProps
+
+/**
+ * @deprecated The Box component is deprecated. Replace with a `div` or
+ * appropriate HTML element instead, with CSS modules for styling.
+ * @see https://github.com/primer/react/blob/main/contributor-docs/migration-from-box.md
+ */
+const Box = styled.div<StyledBoxProps>(
+  space,
+  color,
+  typography,
+  layout,
+  flexbox,
+  grid,
+  background,
+  border,
+  position,
+  shadow,
+  sx,
+)
+
+/**
+ * @deprecated The Box component is deprecated. Replace with a `div` or
+ * appropriate HTML element instead, with CSS modules for styling.
+ * @see https://github.com/primer/react/blob/main/contributor-docs/migration-from-box.md
+ */
+export type BoxProps = ComponentProps<typeof Box>
+export default Box
+export {Box}

packages/styled-react/src/components/CheckboxGroup.tsx

@@ -1,10 +1,7 @@
-import {
-  Box,
-  CheckboxGroup as PrimerCheckboxGroup,
-  type CheckboxGroupProps as PrimerCheckboxGroupProps,
-} from '@primer/react'
+import {CheckboxGroup as PrimerCheckboxGroup, type CheckboxGroupProps as PrimerCheckboxGroupProps} from '@primer/react'
 import React, {type PropsWithChildren} from 'react'
 import type {SxProp} from '../sx'
+import Box from './Box'
 
 export type CheckboxGroupProps = PropsWithChildren<PrimerCheckboxGroupProps> & SxProp
 

packages/styled-react/src/components/NavList.tsx

@@ -1,4 +1,4 @@
-import {NavList as PrimerNavList, Box} from '@primer/react'
+import {NavList as PrimerNavList} from '@primer/react'
 import type {
   NavListProps as PrimerNavListProps,
   NavListItemProps as PrimerNavListItemProps,
@@ -8,6 +8,7 @@ import type {
 } from '@primer/react'
 import {forwardRef, type PropsWithChildren} from 'react'
 import {type SxProp} from '../sx'
+import Box from './Box'
 
 type RefComponent<E extends HTMLElement, P> = React.ForwardRefExoticComponent<P & React.RefAttributes<E>>
 

packages/styled-react/src/components/RadioGroup.tsx

@@ -1,6 +1,7 @@
-import {Box, RadioGroup as PrimerRadioGroup, type RadioGroupProps as PrimerRadioGroupProps} from '@primer/react'
+import {RadioGroup as PrimerRadioGroup, type RadioGroupProps as PrimerRadioGroupProps} from '@primer/react'
 import React, {type PropsWithChildren} from 'react'
 import type {SxProp} from '../sx'
+import Box from './Box'
 
 export type RadioGroupProps = PropsWithChildren<PrimerRadioGroupProps> & SxProp
 

packages/styled-react/src/components/RelativeTime.tsx

@@ -1,6 +1,7 @@
-import {Box, RelativeTime as PrimerRelativeTime, type RelativeTimeProps as PrimerRelativeTimeProps} from '@primer/react'
+import {RelativeTime as PrimerRelativeTime, type RelativeTimeProps as PrimerRelativeTimeProps} from '@primer/react'
 import React from 'react'
 import type {SxProp} from '../sx'
+import Box from './Box'
 
 export type RelativeTimeProps = PrimerRelativeTimeProps & SxProp