styled-react: Add ThemeProvider and BaseStyles (#6958)

Author: siddharthkp

.changeset/styled-react-themeprovider.md

@@ -0,0 +1,7 @@
+---
+"@primer/react": patch
+"@primer/styled-react": minor
+---
+
+@primer/react: Export `useId` and `useSyncedState`
+@primer/styled-react: Add `ThemeProvider` and `BaseStyles`

e2e/components/IconButton.test.ts

@@ -45,9 +45,9 @@ const stories = [
     disableAnimations: true,
     async setup(page: Page) {
       await page.keyboard.press('Tab') // focus on icon button
-      await page.getByText('Bold').waitFor({
-        state: 'visible',
-      })
+      await page.getByText('Bold').waitFor({state: 'visible'})
+      // eslint-disable-next-line playwright/no-wait-for-timeout
+      await page.waitForTimeout(1000) // wait until after "tooltip delay" for a stable screenshot
     },
   },
   {

examples/nextjs/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@primer/react": "38.0.0-rc.6",
+    "@primer/styled-react": "1.0.0-rc.7",
     "next": "^15.2.3",
     "react": "18.3.1",
     "react-dom": "18.3.1",

examples/nextjs/src/app/layout.tsx

@@ -1,5 +1,5 @@
 import './global.css'
-import {BaseStyles, ThemeProvider} from '@primer/react'
+import {ThemeProvider, BaseStyles} from '@primer/styled-react'
 import {StyledComponentsRegistry} from './registry'
 
 export const metadata = {

examples/nextjs/src/app/page.tsx

@@ -1,5 +1,39 @@
-import {Button} from '@primer/react'
+'use client'
+
+import {Button, Stack, Box} from '@primer/react'
+import {useTheme} from '@primer/styled-react'
+import styled from 'styled-components'
+
+const StyledDiv = styled.div(({theme}) => {
+  return {
+    padding: theme.space[5],
+    backgroundColor: theme.colors.btn.primary.bg,
+  }
+})
+
+const ThemeUser = () => {
+  const {theme} = useTheme()
+  return (
+    <div
+      style={{
+        padding: theme?.space[5],
+        backgroundColor: theme?.colors.btn.primary.bg,
+      }}
+    >
+      Hello world
+    </div>
+  )
+}
 
 export default function IndexPage() {
-  return <Button>Hello world</Button>
+  return (
+    <Stack direction="horizontal">
+      <Button variant="primary" sx={{padding: 5}}>
+        Hello world
+      </Button>
+      <Box sx={{padding: 5, backgroundColor: 'btn.primary.bg'}}>Hello world</Box>
+      <StyledDiv>Hello world</StyledDiv>
+      <ThemeUser />
+    </Stack>
+  )
 }

package-lock.json

@@ -8,4 +8,5 @@ export const DefaultFeatureFlags = FeatureFlagScope.create({
   primer_react_select_panel_fullscreen_on_narrow: false,
   primer_react_select_panel_order_selected_at_top: false,
   primer_react_select_panel_remove_active_descendant: false,
+  primer_react_use_styled_react_theming: false,
 })

packages/react/src/FeatureFlags/DefaultFeatureFlags.ts

@@ -214,6 +214,7 @@ exports[`@primer/react > should not update exports without a semver change 1`] =
   "useFocusTrap",
   "useFocusZone",
   "useFormControlForwardedProps",
+  "useId",
   "useIsomorphicLayoutEffect",
   "useOnEscapePress",
   "useOnOutsideClick",
@@ -224,6 +225,7 @@ exports[`@primer/react > should not update exports without a semver change 1`] =
   "useResizeObserver",
   "useResponsiveValue",
   "useSafeTimeout",
+  "useSyncedState",
   "useTheme",
   "VisuallyHidden",
   "type VisuallyHiddenProps",

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

@@ -46,6 +46,8 @@ export {useResizeObserver} from './hooks/useResizeObserver'
 export {useResponsiveValue, type ResponsiveValue} from './hooks/useResponsiveValue'
 export {default as useIsomorphicLayoutEffect} from './utils/useIsomorphicLayoutEffect'
 export {useProvidedRefOrCreate} from './hooks/useProvidedRefOrCreate'
+export {useId} from './hooks/useId'
+export {useSyncedState} from './hooks/useSyncedState'
 
 // Utils
 export {createComponent} from './utils/create-component'

packages/react/src/index.ts

@@ -2,6 +2,7 @@ import babel from '@rollup/plugin-babel'
 import {defineConfig} from 'rollup'
 import typescript from 'rollup-plugin-typescript2'
 import packageJson from './package.json' with {type: 'json'}
+import MagicString from 'magic-string'
 
 const dependencies = [
   ...Object.keys(packageJson.peerDependencies ?? {}),
@@ -26,9 +27,111 @@ export default defineConfig({
       extensions: ['.ts', '.tsx'],
       babelHelpers: 'bundled',
     }),
+    /**
+     * This custom rollup plugin allows us to preserve directives in source
+     * code, such as "use client", in order to support React Server Components.
+     *
+     * The source for this plugin is inspired by:
+     * https://github.com/Ephem/rollup-plugin-preserve-directives
+     */
+    {
+      name: 'preserve-directives',
+      transform(code) {
+        const ast = this.parse(code)
+        if (ast.type !== 'Program' || !ast.body) {
+          return {
+            code,
+            ast,
+            map: null,
+          }
+        }
+
+        let hasClientDirective = false
+
+        for (const node of ast.body) {
+          if (!node) {
+            continue
+          }
+
+          if (node.type !== 'ExpressionStatement') {
+            continue
+          }
+
+          if (node.directive === 'use client') {
+            hasClientDirective = true
+            break
+          }
+        }
+
+        if (hasClientDirective) {
+          return {
+            code,
+            ast,
+            map: null,
+            meta: {
+              hasClientDirective: true,
+            },
+          }
+        }
+
+        return {
+          code,
+          ast,
+          map: null,
+        }
+      },
+      renderChunk: {
+        order: 'post',
+        handler(code, chunk, options) {
+          // If `preserveModules` is not set to true, we can't be sure if the client
+          // directive corresponds to the whole chunk or just a part of it.
+          if (!options.preserveModules) {
+            return undefined
+          }
+
+          let chunkHasClientDirective = false
+
+          for (const moduleId of Object.keys(chunk.modules)) {
+            const hasClientDirective = this.getModuleInfo(moduleId)?.meta?.hasClientDirective
+            if (hasClientDirective) {
+              chunkHasClientDirective = true
+              break
+            }
+          }
+
+          if (chunkHasClientDirective) {
+            const transformed = new MagicString(code)
+            transformed.prepend(`"use client";\n`)
+            const sourcemap = transformed.generateMap({
+              includeContent: true,
+            })
+            return {
+              code: transformed.toString(),
+              map: sourcemap,
+            }
+          }
+
+          return null
+        },
+      },
+    },
   ],
+  onwarn(warning, defaultHandler) {
+    // Dependencies or modules may use "use client" as an indicator for React
+    // Server Components that this module should only be loaded on the client.
+    if (warning.code === 'MODULE_LEVEL_DIRECTIVE' && warning.message.includes('use client')) {
+      return
+    }
+
+    if (warning.code === 'CIRCULAR_DEPENDENCY') {
+      throw warning
+    }
+
+    defaultHandler(warning)
+  },
   output: {
     dir: 'dist',
     format: 'esm',
+    preserveModules: true,
   },
 })