refactor(styled-react): update how we re-export components

.changeset/chubby-colts-nail.md

@@ -0,0 +1,5 @@
+---
+'@primer/styled-react': patch
+---
+
+Refactor ToggleSwitch export type to match original type from @primer/react

.changeset/nine-cobras-talk.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Add ToggleSwitchProps type to package exports

eslint.config.mjs

@@ -42,6 +42,7 @@ const config = defineConfig([
     'contributor-docs/adrs/*',
     'examples/codesandbox/**/*',
     'packages/react/src/utils/polymorphic.ts',
+    'packages/styled-react/src/polymorphic.d.ts',
     '**/storybook-static',
     '**/CHANGELOG.md',
     '**/node_modules/**/*',

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

@@ -177,6 +177,7 @@ exports[`@primer/react > should not update exports without a semver change 1`] =
   "type TimelineItemsProps",
   "type TimelineProps",
   "ToggleSwitch",
+  "type ToggleSwitchProps",
   "Token",
   "type TokenProps",
   "Tooltip",

packages/react/src/index.ts

@@ -151,6 +151,7 @@ export type {StateLabelProps} from './StateLabel'
 export {default as SubNav} from './SubNav'
 export type {SubNavProps, SubNavLinkProps, SubNavLinksProps} from './SubNav'
 export {default as ToggleSwitch} from './ToggleSwitch'
+export type {ToggleSwitchProps} from './ToggleSwitch'
 export {default as TextInput} from './TextInput'
 export type {TextInputProps} from './TextInput'
 export {default as TextInputWithTokens} from './TextInputWithTokens'

packages/styled-react/package.json

@@ -27,6 +27,7 @@
     "type-check": "tsc --noEmit"
   },
   "devDependencies": {
+    "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
     "@primer/react": "^38.0.0-rc.1",
     "@rollup/plugin-babel": "^6.0.4",

packages/styled-react/rollup.config.js

@@ -14,14 +14,14 @@ function createPackageRegex(name) {
 }
 
 export default defineConfig({
-  input: ['src/index.ts', 'src/experimental.ts', 'src/deprecated.ts'],
+  input: ['src/index.tsx', 'src/experimental.tsx', 'src/deprecated.tsx'],
   external: dependencies.map(createPackageRegex),
   plugins: [
     typescript({
       tsconfig: 'tsconfig.build.json',
     }),
     babel({
-      presets: ['@babel/preset-typescript'],
+      presets: ['@babel/preset-typescript', '@babel/preset-react'],
       extensions: ['.ts', '.tsx'],
       babelHelpers: 'bundled',
     }),

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

@@ -2,11 +2,11 @@
 
 exports[`@primer/styled-react exports 1`] = `
 [
-  "ToggleSwitch",
   "ActionList",
   "ActionMenu",
   "Autocomplete",
   "Avatar",
+  "Box",
   "BranchName",
   "Breadcrumbs",
   "Button",
@@ -25,6 +25,7 @@ exports[`@primer/styled-react exports 1`] = `
   "LabelGroup",
   "Link",
   "LinkButton",
+  "merge",
   "NavList",
   "Overlay",
   "PageHeader",
@@ -41,21 +42,20 @@ exports[`@primer/styled-react exports 1`] = `
   "Stack",
   "StateLabel",
   "SubNav",
+  "sx",
   "Text",
   "Textarea",
   "TextInput",
   "TextInputWithTokens",
+  "theme",
+  "themeGet",
+  "ThemeProvider",
   "Timeline",
+  "ToggleSwitch",
   "Token",
   "Tooltip",
   "Truncate",
   "UnderlineNav",
-  "Box",
-  "sx",
-  "ThemeProvider",
-  "merge",
-  "theme",
-  "themeGet",
   "useColorSchemeVar",
   "useTheme",
 ]

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

@@ -7,13 +7,25 @@ import * as StyledReactDeprecated from '../deprecated'
 import * as StyledReactExperimental from '../experimental'
 
 test('@primer/styled-react exports', () => {
-  expect(Object.keys(StyledReact)).toMatchSnapshot()
+  expect(
+    Object.keys(StyledReact).sort((a, b) => {
+      return a.localeCompare(b)
+    }),
+  ).toMatchSnapshot()
 })
 
 test('@primer/styled-react/deprecated exports', () => {
-  expect(Object.keys(StyledReactDeprecated)).toMatchSnapshot()
+  expect(
+    Object.keys(StyledReactDeprecated).sort((a, b) => {
+      return a.localeCompare(b)
+    }),
+  ).toMatchSnapshot()
 })
 
 test('@primer/styled-react/experimental exports', () => {
-  expect(Object.keys(StyledReactExperimental)).toMatchSnapshot()
+  expect(
+    Object.keys(StyledReactExperimental).sort((a, b) => {
+      return a.localeCompare(b)
+    }),
+  ).toMatchSnapshot()
 })

packages/styled-react/src/index.tsx

@@ -0,0 +1,105 @@
+import {
+  type BetterSystemStyleObject,
+  Box,
+  type BoxProps,
+  type SxProp,
+  ToggleSwitch as PrimerToggleSwitch,
+  type ToggleSwitchProps as PrimerToggleSwitchProps,
+} from '@primer/react'
+import {forwardRef} from 'react'
+import type {
+  BackgroundProps,
+  BorderProps,
+  ColorProps,
+  FlexboxProps,
+  GridProps,
+  LayoutProps,
+  PositionProps,
+  ShadowProps,
+  SpaceProps,
+  TypographyProps,
+} from 'styled-system'
+import type {ForwardRefComponent} from './polymorphic'
+
+type StyledProps = SxProp &
+  SpaceProps &
+  ColorProps &
+  TypographyProps &
+  LayoutProps &
+  FlexboxProps &
+  GridProps &
+  BackgroundProps &
+  BorderProps &
+  PositionProps &
+  ShadowProps
+
+const ToggleSwitch = forwardRef(function ToggleSwitch(props, ref) {
+  // @ts-expect-error there is an issue with polymorphic `as` with this
+  // component
+  return <Box as={PrimerToggleSwitch} ref={ref} {...props} />
+}) as ForwardRefComponent<'span', PrimerToggleSwitchProps & Omit<StyledProps, keyof PrimerToggleSwitchProps>>
+
+export {ToggleSwitch}
+
+export {
+  ActionList,
+  ActionMenu,
+  Autocomplete,
+  Avatar,
+  BranchName,
+  Breadcrumbs,
+  Button,
+  Checkbox,
+  CheckboxGroup,
+  CircleBadge,
+  CounterLabel,
+  Details,
+  Dialog,
+  Flash,
+  FormControl,
+  Header,
+  Heading,
+  IconButton,
+  Label,
+  LabelGroup,
+  Link,
+  LinkButton,
+  NavList,
+  Overlay,
+  PageHeader,
+  PageLayout,
+  Popover,
+  ProgressBar,
+  RadioGroup,
+  RelativeTime,
+  SegmentedControl,
+  Select,
+  SelectPanel,
+  SideNav,
+  Spinner,
+  Stack,
+  StateLabel,
+  SubNav,
+  Text,
+  Textarea,
+  TextInput,
+  TextInputWithTokens,
+  Timeline,
+  Token,
+  Tooltip,
+  Truncate,
+  UnderlineNav,
+
+  // styled-components components or types
+  Box,
+  sx,
+
+  // theming depends on styled-components
+  ThemeProvider,
+  merge,
+  theme,
+  themeGet,
+  useColorSchemeVar,
+  useTheme,
+} from '@primer/react'
+export type {BoxProps, SxProp, BetterSystemStyleObject}

packages/styled-react/src/polymorphic.d.ts

@@ -0,0 +1,60 @@
+/**
+ * This file is originally from `@radix-ui/react-polymorphic` before the package
+ * was deprecated. The original source for this lived in the URL below.
+ *
+ * @see https://github.com/radix-ui/primitives/blob/17ffcb7aaa42cbd36b3c210ba86d7d73d218e5be/packages/react/polymorphic/src/polymorphic.ts
+ */
+
+import * as React from 'react'
+
+/* -------------------------------------------------------------------------------------------------
+ * Utility types
+ * -----------------------------------------------------------------------------------------------*/
+type Merge<P1 = {}, P2 = {}> = Omit<P1, keyof P2> & P2
+
+/**
+ * Infers the OwnProps if E is a ForwardRefExoticComponentWithAs
+ */
+type OwnProps<E> = E extends ForwardRefComponent<any, infer P> ? P : {}
+
+/**
+ * Infers the JSX.IntrinsicElement if E is a ForwardRefExoticComponentWithAs
+ */
+type IntrinsicElement<E> = E extends ForwardRefComponent<infer I, any> ? I : never
+
+type ForwardRefExoticComponent<E, OwnProps> = React.ForwardRefExoticComponent<
+  Merge<E extends React.ElementType ? React.ComponentPropsWithRef<E> : never, OwnProps & {as?: E}>
+>
+
+/* -------------------------------------------------------------------------------------------------
+ * ForwardRefComponent
+ * -----------------------------------------------------------------------------------------------*/
+
+interface ForwardRefComponent<
+  IntrinsicElementString,
+  OwnProps = {},
+  /**
+   * Extends original type to ensure built in React types play nice
+   * with polymorphic components still e.g. `React.ElementRef` etc.
+   */
+> extends ForwardRefExoticComponent<IntrinsicElementString, OwnProps> {
+  /**
+   * When `as` prop is passed, use this overload.
+   * Merges original own props (without DOM props) and the inferred props
+   * from `as` element with the own props taking precedence.
+   *
+   * We explicitly avoid `React.ElementType` and manually narrow the prop types
+   * so that events are typed when using JSX.IntrinsicElements.
+   */
+  <As = IntrinsicElementString>(
+    props: As extends ''
+      ? {as: keyof JSX.IntrinsicElements}
+      : As extends React.ComponentType<infer P>
+        ? Merge<P, OwnProps & {as: As}>
+        : As extends keyof JSX.IntrinsicElements
+          ? Merge<JSX.IntrinsicElements[As], OwnProps & {as: As}>
+          : never,
+  ): React.ReactElement | null
+}
+
+export type {ForwardRefComponent, OwnProps, IntrinsicElement, Merge}