feat: add createStyledComponent helper to styled-react package (#6588)

Co-authored-by: Jon Rohan <[email protected]>

Author: joshblack

package-lock.json

@@ -0,0 +1,7 @@
+import {beforeEach} from 'vitest'
+import {cleanup} from '@testing-library/react'
+import '@testing-library/jest-dom/vitest'
+
+beforeEach(() => {
+  cleanup()
+})

packages/styled-react/config/vitest/browser/setup.ts

@@ -31,6 +31,7 @@
     "@rollup/plugin-babel": "^6.0.4",
     "@types/react": "18.3.11",
     "@types/react-dom": "18.3.1",
+    "@vitejs/plugin-react": "^4.3.3",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "rimraf": "^6.0.1",

packages/styled-react/package.json

@@ -0,0 +1,45 @@
+import {render, screen} from '@testing-library/react'
+import {describe, test, expect} from 'vitest'
+import {createStyledComponent} from '../createStyledComponent'
+
+describe('createStyledComponent', () => {
+  test('supports the sx prop', () => {
+    const Wrapper = createStyledComponent(function Test(props: React.ComponentPropsWithoutRef<'div'>) {
+      return <div {...props} data-testid="wrapper" />
+    })
+
+    render(<Wrapper sx={{display: 'flex'}} />)
+
+    const wrapper = screen.getByTestId('wrapper')
+    const style = window.getComputedStyle(wrapper)
+    expect(style.display).toBe('flex')
+  })
+
+  test('supports the as prop', () => {
+    const Wrapper = createStyledComponent(function Test({
+      as: BaseComponent,
+      ...rest
+    }: {
+      as: React.ElementType
+      className?: string
+    }) {
+      return <BaseComponent {...rest} />
+    })
+
+    render(<Wrapper as="section" data-testid="wrapper" sx={{display: 'flex'}} />)
+    const wrapper = screen.getByTestId('wrapper')
+    expect(wrapper.tagName).toBe('SECTION')
+
+    const style = window.getComputedStyle(wrapper)
+    expect(style.display).toBe('flex')
+  })
+
+  test('supports original component props on wrapper', () => {
+    const Wrapper = createStyledComponent(function Test(props: {variant: 'a' | 'b'}) {
+      return <div data-testid="wrapper" data-variant={props.variant} />
+    })
+
+    render(<Wrapper variant="a" />)
+    expect(screen.getByTestId('wrapper')).toHaveAttribute('data-variant', 'a')
+  })
+})

packages/styled-react/src/utils/__tests__/createStyledComponent.browser.test.tsx

@@ -0,0 +1,58 @@
+import {sx} from '@primer/react'
+import type {SxProp} from '@primer/react'
+import type React from 'react'
+import styled from 'styled-components'
+import {background, border, color, flexbox, grid, layout, position, shadow, space, typography} from 'styled-system'
+import type {
+  BackgroundProps,
+  BorderProps,
+  ColorProps,
+  FlexboxProps,
+  GridProps,
+  LayoutProps,
+  PositionProps,
+  ShadowProps,
+  SpaceProps,
+  TypographyProps,
+} from 'styled-system'
+
+type StyledBoxProps = SxProp &
+  SpaceProps &
+  ColorProps &
+  TypographyProps &
+  LayoutProps &
+  FlexboxProps &
+  GridProps &
+  BackgroundProps &
+  BorderProps &
+  PositionProps &
+  ShadowProps
+
+/**
+ * Utility that mirrors the functionality of the `Box` component from
+ * `@primer/react`. Used to create a styled component variant of a component
+ * from `@primer/react` that no longer supports `sx` or other styled-system
+ * props.
+ *
+ * Note: make sure to include #__PURE__ when using this function to create a
+ * component. For example:
+ *
+ * ```tsx
+ * const Link = \/*#__PURE__*\/ createStyledComponent(PrimerLink)
+ * ```
+ */
+export function createStyledComponent<P>(Component: React.ComponentType<P>) {
+  return styled(Component)<StyledBoxProps>(
+    space,
+    color,
+    typography,
+    layout,
+    flexbox,
+    grid,
+    background,
+    border,
+    position,
+    shadow,
+    sx,
+  )
+}

packages/styled-react/src/utils/createStyledComponent.ts

@@ -5,5 +5,5 @@
     "declaration": true,
     "emitDeclarationOnly": true
   },
-  "exclude": ["vitest.config.ts"]
+  "exclude": ["vitest.config.ts", "vitest.config.browser.ts"]
 }

packages/styled-react/tsconfig.build.json

@@ -1,5 +1,5 @@
 {
   "extends": "../../tsconfig.base.json",
-  "include": ["src", "vitest.config.ts"]
+  "include": ["src", "vitest.config.ts", "vitest.config.browser.ts", "config/vitest"]
 }
 

packages/styled-react/tsconfig.json

@@ -0,0 +1,21 @@
+import react from '@vitejs/plugin-react'
+import {defineConfig} from 'vitest/config'
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    include: ['src/**/*.browser.test.?(c|m)[jt]s?(x)'],
+    setupFiles: ['config/vitest/browser/setup.ts'],
+    browser: {
+      provider: 'playwright',
+      enabled: true,
+      headless: process.env.DEBUG_BROWSER_TESTS === 'true' ? false : true,
+      instances: [
+        {
+          browser: 'chromium',
+        },
+      ],
+      screenshotFailures: false,
+    },
+  },
+})

packages/styled-react/vitest.config.browser.ts

@@ -3,5 +3,6 @@ import {defineConfig} from 'vitest/config'
 export default defineConfig({
   test: {
     environment: 'node',
+    exclude: ['src/**/*.browser.test.?(c|m)[jt]s?(x)'],
   },
 })