feat: add @primer/styled-react package (#6417)

Author: joshblack

.changeset/spotty-coats-post.md

@@ -0,0 +1,5 @@
+---
+'@primer/styled-react': minor
+---
+
+Create the `@primer/styled-react` package to help with bridging between styled-components and Primer React

package-lock.json

@@ -0,0 +1,33 @@
+# @primer/styled-react
+
+> A temporary package that bridges the gap between Primer React and styled-components
+
+## Getting started
+
+To install `@primer/styled-react` in your project, you will need to run the following
+command using [npm](https://www.npmjs.com/):
+
+```bash
+npm install -S @primer/styled-react
+```
+
+## Usage
+
+This is a pre-1.0 package designed to interop between Primer and existing
+styled-components usage. As a result, expect breaking changes between minor
+versions as components will be removed when their `sx` usage goes to zero.
+
+Each component that is imported from `@primer/styled-react` is a wrapper around
+the corresponding component in `@primer/react`. The notable difference is that
+these components support the `sx` prop and styled system props.
+
+By default, each component is deprecated. The intent is to transition code over
+to an alternative styling solution, such as CSS Modules.
+
+## 📖 Documentation
+
+The documentation for `@primer/react` lives at [primer.style](https://primer.style). There, you'll find detailed documentation on getting started, all of the components, our theme, our principles, and more.
+
+## 🙌 Contributing
+
+We love collaborating with folks inside and outside of GitHub and welcome contributions! If you're interested, check out our [contributing docs](contributor-docs/CONTRIBUTING.md) for more info on how to get started.

packages/styled-react/README.md

@@ -0,0 +1,67 @@
+{
+  "name": "@primer/styled-react",
+  "version": "0.0.0",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "dist/index.d.ts",
+      "default": "dist/index.js"
+    },
+    "./deprecated": {
+      "types": "dist/deprecated.d.ts",
+      "default": "dist/deprecated.js"
+    },
+    "./experimental": {
+      "types": "dist/experimental.d.ts",
+      "default": "dist/experimental.js"
+    }
+  },
+  "files": [
+    "README.md",
+    "dist"
+  ],
+  "scripts": {
+    "build": "script/build",
+    "clean": "rimraf dist",
+    "type-check": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "@babel/preset-typescript": "^7.27.1",
+    "@primer/react": "^37.29.1",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@types/react": "18.3.11",
+    "@types/react-dom": "18.3.1",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "rimraf": "^6.0.1",
+    "rollup": "4.45.1",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "styled-components": "5.3.11",
+    "typescript": "^5.8.2"
+  },
+  "peerDependencies": {
+    "@primer/react": "^37.29.1",
+    "@types/react": "18.x || 19.x",
+    "@types/react-dom": "18.x || 19.x",
+    "@types/react-is": "18.x || 19.x",
+    "@types/styled-components": "^5.1.11",
+    "react": "18.x || 19.x",
+    "react-dom": "18.x || 19.x",
+    "react-is": "18.x || 19.x",
+    "styled-components": "5.x"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    },
+    "@types/react-dom": {
+      "optional": true
+    },
+    "@types/react-is": {
+      "optional": true
+    },
+    "@types/styled-components": {
+      "optional": true
+    }
+  }
+}

packages/styled-react/package.json

@@ -0,0 +1,33 @@
+import babel from '@rollup/plugin-babel'
+import {defineConfig} from 'rollup'
+import typescript from 'rollup-plugin-typescript2'
+import packageJson from './package.json' with {type: 'json'}
+
+const dependencies = [
+  ...Object.keys(packageJson.peerDependencies ?? {}),
+  ...Object.keys(packageJson.dependencies ?? {}),
+  ...Object.keys(packageJson.devDependencies ?? {}),
+]
+
+function createPackageRegex(name) {
+  return new RegExp(`^${name}(/.*)?`)
+}
+
+export default defineConfig({
+  input: ['src/index.ts', 'src/experimental.ts', 'src/deprecated.ts'],
+  external: dependencies.map(createPackageRegex),
+  plugins: [
+    typescript({
+      tsconfig: 'tsconfig.build.json',
+    }),
+    babel({
+      presets: ['@babel/preset-typescript'],
+      extensions: ['.ts', '.tsx'],
+      babelHelpers: 'bundled',
+    }),
+  ],
+  output: {
+    dir: 'dist',
+    format: 'esm',
+  },
+})

packages/styled-react/rollup.config.js

@@ -0,0 +1,3 @@
+#!/bin/bash
+
+npx rollup -c