refactor(styled-react): update structure to reduce merge conflicts (#6861)

Co-authored-by: Marie Lucca <francinelucca@github.com>

Author: joshblack

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

@@ -28,6 +28,7 @@ exports[`@primer/styled-react exports 1`] = `
   "Overlay",
   "PageHeader",
   "PageLayout",
+  "ProgressBar",
   "RadioGroup",
   "RelativeTime",
   "SegmentedControl",

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

@@ -0,0 +1,10 @@
+import {Checkbox as PrimerCheckbox, type CheckboxProps as PrimerCheckboxProps} from '@primer/react'
+import {Box} from './Box'
+import {forwardRef} from 'react'
+import {type SxProp} from '../sx'
+
+export type CheckboxProps = PrimerCheckboxProps & SxProp
+
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(props, ref) {
+  return <Box as={PrimerCheckbox} ref={ref} {...props} />
+})

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

@@ -0,0 +1,10 @@
+import {CounterLabel as PrimerCounterLabel, type CounterLabelProps as PrimerCounterLabelProps} from '@primer/react'
+import {Box} from './Box'
+import {forwardRef} from 'react'
+import {type SxProp} from '../sx'
+
+export type CounterLabelProps = PrimerCounterLabelProps & SxProp
+
+export const CounterLabel = forwardRef<HTMLSpanElement, CounterLabelProps>(function CounterLabel(props, ref) {
+  return <Box as={PrimerCounterLabel} ref={ref} {...props} />
+})

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

@@ -75,18 +75,35 @@ const PageHeaderTitleArea: ForwardRefComponent<'div', PageHeaderTitleAreaProps>
   ${sx}
 `
 
-const PageHeader = Object.assign(PageHeaderImpl, {
+type PageHeaderComponent = ForwardRefComponent<'div', PageHeaderProps> & {
+  Actions: typeof PageHeaderActions
+  ContextArea: typeof PrimerPageHeader.ContextArea
+  ParentLink: typeof PrimerPageHeader.ParentLink
+  ContextBar: typeof PrimerPageHeader.ContextBar
+  TitleArea: typeof PageHeaderTitleArea
+  ContextAreaActions: typeof PrimerPageHeader.ContextAreaActions
+  LeadingAction: typeof PrimerPageHeader.LeadingAction
+  Breadcrumbs: typeof PrimerPageHeader.Breadcrumbs
+  LeadingVisual: typeof PrimerPageHeader.LeadingVisual
+  Title: typeof PageHeaderTitle
+  TrailingVisual: typeof PrimerPageHeader.TrailingVisual
+  Description: typeof PrimerPageHeader.Description
+  TrailingAction: typeof PrimerPageHeader.TrailingAction
+}
+
+const PageHeader: PageHeaderComponent = Object.assign(PageHeaderImpl, {
   Actions: PageHeaderActions,
-  Title: PageHeaderTitle,
-  TitleArea: PageHeaderTitleArea,
   ContextArea: PrimerPageHeader.ContextArea,
-  ContextAreaActions: PrimerPageHeader.ContextAreaActions,
-  TrailingVisual: PrimerPageHeader.TrailingVisual,
-  Description: PrimerPageHeader.Description,
+  ParentLink: PrimerPageHeader.ParentLink,
   ContextBar: PrimerPageHeader.ContextBar,
+  TitleArea: PageHeaderTitleArea,
+  ContextAreaActions: PrimerPageHeader.ContextAreaActions,
   LeadingAction: PrimerPageHeader.LeadingAction,
   Breadcrumbs: PrimerPageHeader.Breadcrumbs,
   LeadingVisual: PrimerPageHeader.LeadingVisual,
+  Title: PageHeaderTitle,
+  TrailingVisual: PrimerPageHeader.TrailingVisual,
+  Description: PrimerPageHeader.Description,
   TrailingAction: PrimerPageHeader.TrailingAction,
 })
 

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

@@ -0,0 +1,45 @@
+import {Box, RadioGroup as PrimerRadioGroup, type RadioGroupProps as PrimerRadioGroupProps} from '@primer/react'
+import React, {type PropsWithChildren} from 'react'
+import type {SxProp} from '../sx'
+
+export type RadioGroupProps = PropsWithChildren<PrimerRadioGroupProps> & SxProp
+
+const RadioGroupImpl = (props: RadioGroupProps) => {
+  return <Box as={PrimerRadioGroup} {...props} />
+}
+
+// Define local types based on the internal component props
+type CheckboxOrRadioGroupLabelProps = PropsWithChildren<
+  {
+    className?: string
+    visuallyHidden?: boolean
+  } & SxProp
+>
+const CheckboxOrRadioGroupLabel = (props: CheckboxOrRadioGroupLabelProps) => {
+  return <Box as={PrimerRadioGroup.Label} {...props} />
+}
+
+type CheckboxOrRadioGroupCaptionProps = PropsWithChildren<
+  {
+    className?: string
+  } & SxProp
+>
+const CheckboxOrRadioGroupCaption = (props: CheckboxOrRadioGroupCaptionProps) => {
+  return <Box as={PrimerRadioGroup.Caption} {...props} />
+}
+
+type CheckboxOrRadioGroupValidationProps = PropsWithChildren<
+  {
+    className?: string
+    variant: 'error' | 'success'
+  } & SxProp
+>
+const CheckboxOrRadioGroupValidation = (props: CheckboxOrRadioGroupValidationProps) => {
+  return <Box as={PrimerRadioGroup.Validation} {...props} />
+}
+
+export const RadioGroup = Object.assign(RadioGroupImpl, {
+  Label: CheckboxOrRadioGroupLabel,
+  Caption: CheckboxOrRadioGroupCaption,
+  Validation: CheckboxOrRadioGroupValidation,
+})

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

@@ -0,0 +1,10 @@
+import {Box, RelativeTime as PrimerRelativeTime, type RelativeTimeProps as PrimerRelativeTimeProps} from '@primer/react'
+import React from 'react'
+import type {SxProp} from '../sx'
+
+export type RelativeTimeProps = PrimerRelativeTimeProps & SxProp
+
+export function RelativeTime(props: RelativeTimeProps) {
+  // @ts-expect-error the types for Box are not correctly inferred here
+  return <Box as={PrimerRelativeTime} {...props} />
+}

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

@@ -0,0 +1,37 @@
+import {
+  type SegmentedControlProps as PrimerSegmentedControlProps,
+  SegmentedControl as PrimerSegmentedControl,
+  type SegmentedControlButtonProps as PrimerSegmentedControlButtonProps,
+  type SegmentedControlIconButtonProps as PrimerSegmentedControlIconButtonProps,
+} from '@primer/react'
+import type {PropsWithChildren} from 'react'
+import type {SxProp} from '../sx'
+import {Box} from './Box'
+
+type SegmentedControlProps = PropsWithChildren<PrimerSegmentedControlProps> & SxProp
+type SegmentedControlButtonProps = PropsWithChildren<PrimerSegmentedControlButtonProps> & SxProp
+type SegmentedControlIconButtonProps = PropsWithChildren<PrimerSegmentedControlIconButtonProps> & SxProp
+
+const SegmentedControlButton = (props: SegmentedControlButtonProps) => {
+  return <Box as={PrimerSegmentedControl.Button} {...props} />
+}
+
+const SegmentedControlIconButton = (props: SegmentedControlIconButtonProps) => {
+  return <Box as={PrimerSegmentedControl.IconButton} {...props} />
+}
+
+const SegmentedControlImpl = (props: SegmentedControlProps) => {
+  return <Box as={PrimerSegmentedControl} {...props} />
+}
+
+const SegmentedControl = Object.assign(SegmentedControlImpl, {
+  Button: SegmentedControlButton,
+  IconButton: SegmentedControlIconButton,
+})
+
+export {
+  SegmentedControl,
+  type SegmentedControlProps,
+  type SegmentedControlButtonProps,
+  type SegmentedControlIconButtonProps,
+}

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

@@ -0,0 +1,9 @@
+import {Box, Spinner as PrimerSpinner, type SpinnerProps as PrimerSpinnerProps} from '@primer/react'
+import React from 'react'
+import type {SxProp} from '../sx'
+
+export type SpinnerProps = PrimerSpinnerProps & SxProp
+
+export function Spinner(props: SpinnerProps) {
+  return <Box as={PrimerSpinner} {...props} />
+}

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

@@ -0,0 +1,12 @@
+import {StateLabel as PrimerStateLabel, type StateLabelProps as PrimerStateLabelProps} from '@primer/react'
+import {forwardRef} from 'react'
+import {Box} from './Box'
+import type {SxProp} from '../sx'
+
+type StateLabelProps = PrimerStateLabelProps & SxProp
+
+const StateLabel = forwardRef<HTMLSpanElement, StateLabelProps>(function StateLabel(props, ref) {
+  return <Box as={PrimerStateLabel} ref={ref} {...props} />
+})
+
+export {StateLabel, type StateLabelProps}

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

@@ -0,0 +1,10 @@
+import {StateLabel as PrimerStateLabel, type StateLabelProps as PrimerStateLabelProps} from '@primer/react'
+import {Box} from './Box'
+import {forwardRef} from 'react'
+import {type SxProp} from '../sx'
+
+export type StateLabelProps = PrimerStateLabelProps & SxProp
+
+export const StateLabel = forwardRef<HTMLSpanElement, StateLabelProps>(function StateLabel(props, ref) {
+  return <Box as={PrimerStateLabel} ref={ref} {...props} />
+})