From a5dbefade87792161870129279d019854f4a9fba Mon Sep 17 00:00:00 2001 From: Josh Black Date: Wed, 30 Jul 2025 10:07:07 -0500 Subject: [PATCH 01/12] feat: add @primer/styled-react package --- package-lock.json | 296 +++++++++++++++++----- packages/styled-react/README.md | 22 ++ packages/styled-react/package.json | 57 +++++ packages/styled-react/rollup.config.js | 32 +++ packages/styled-react/script/build | 3 + packages/styled-react/src/index.ts | 2 + packages/styled-react/tsconfig.build.json | 8 + packages/styled-react/tsconfig.json | 5 + 8 files changed, 365 insertions(+), 60 deletions(-) create mode 100644 packages/styled-react/README.md create mode 100644 packages/styled-react/package.json create mode 100644 packages/styled-react/rollup.config.js create mode 100755 packages/styled-react/script/build create mode 100644 packages/styled-react/src/index.ts create mode 100644 packages/styled-react/tsconfig.build.json create mode 100644 packages/styled-react/tsconfig.json diff --git a/package-lock.json b/package-lock.json index 272c4abfb2d..ea32af5af96 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7807,6 +7807,10 @@ "resolved": "packages/react", "link": true }, + "node_modules/@primer/styled-react": { + "resolved": "packages/styled-react", + "link": true + }, "node_modules/@primer/stylelint-config": { "version": "13.3.0", "resolved": "https://registry.npmjs.org/@primer/stylelint-config/-/stylelint-config-13.3.0.tgz", @@ -7893,6 +7897,8 @@ }, "node_modules/@rollup/plugin-babel": { "version": "6.0.4", + "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-6.0.4.tgz", + "integrity": "sha512-YF7Y52kFdFT/xVSuVdjkV5ZdX/3YtmX0QulG+x0taQOtJdHYzVU61aSSkAgVJ7NOv6qPkIYiJSgSWWN/DM5sGw==", "dev": true, "license": "MIT", "dependencies": { @@ -8540,6 +8546,47 @@ "storybook": "^9.0.17" } }, + "node_modules/@storybook/addon-docs": { + "version": "9.0.18", + "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-9.0.18.tgz", + "integrity": "sha512-1mLhaRDx8s1JAF51o56OmwMnIsg4BOQJ8cn+4wbMjh14pDFALrovlFl/BpAXnV1VaZqHjCB4ZWuP+y5CwXEpeQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@mdx-js/react": "^3.0.0", + "@storybook/csf-plugin": "9.0.18", + "@storybook/icons": "^1.2.12", + "@storybook/react-dom-shim": "9.0.18", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", + "ts-dedent": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "storybook": "^9.0.18" + } + }, + "node_modules/@storybook/addon-docs/node_modules/@mdx-js/react": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-3.1.0.tgz", + "integrity": "sha512-QjHtSaoameoalGnKDT3FoIl4+9RwyTmo9ZJGBdLOks/YOiWHoRDI3PUwEzOE7kEmGcV3AFcp9K6dYu9rEuKLAQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/mdx": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + }, + "peerDependencies": { + "@types/react": ">=16", + "react": ">=16" + } + }, "node_modules/@storybook/addon-links": { "version": "9.0.17", "resolved": "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-9.0.17.tgz", @@ -8610,9 +8657,9 @@ } }, "node_modules/@storybook/csf-plugin": { - "version": "9.0.12", - "resolved": "https://registry.npmjs.org/@storybook/csf-plugin/-/csf-plugin-9.0.12.tgz", - "integrity": "sha512-5EueJQJAu77Lh+EedG4Q/kEOZNlTY/g+fWsT7B5DTtLVy0ypnghsHY8X3KYT/0+NNgTtoO0if4F+ejVYaLnMzA==", + "version": "9.0.18", + "resolved": "https://registry.npmjs.org/@storybook/csf-plugin/-/csf-plugin-9.0.18.tgz", + "integrity": "sha512-MQ3WwXnMua5sX0uYyuO7dC5WOWuJCLqf8CsOn3zQ2ptNoH6hD7DFx5ZOa1uD6VxIuJ3LkA+YqfSRBncomJoRnA==", "dev": true, "license": "MIT", "dependencies": { @@ -8623,7 +8670,7 @@ "url": "https://opencollective.com/storybook" }, "peerDependencies": { - "storybook": "^9.0.12" + "storybook": "^9.0.18" } }, "node_modules/@storybook/csf/node_modules/type-fest": { @@ -8688,9 +8735,9 @@ } }, "node_modules/@storybook/react-dom-shim": { - "version": "9.0.12", - "resolved": "https://registry.npmjs.org/@storybook/react-dom-shim/-/react-dom-shim-9.0.12.tgz", - "integrity": "sha512-OMBitzkJRga/UJF1ScSnaxgBSlAVePCK8wzPkGDn0MmsjZ4oDWuNZeKnVO1+tb6n2rZHws7RmKGxHzHAZTY+zQ==", + "version": "9.0.18", + "resolved": "https://registry.npmjs.org/@storybook/react-dom-shim/-/react-dom-shim-9.0.18.tgz", + "integrity": "sha512-qGR/d9x9qWRRxITaBVQkMnb73kwOm+N8fkbZRxc7U4lxupXRvkMIDh247nn71SYVBnvbh6//AL7P6ghiPWZYjA==", "dev": true, "license": "MIT", "funding": { @@ -8700,7 +8747,7 @@ "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", - "storybook": "^9.0.12" + "storybook": "^9.0.18" } }, "node_modules/@storybook/react-vite": { @@ -9626,7 +9673,9 @@ } }, "node_modules/@types/react-dom": { - "version": "18.3.0", + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.1.tgz", + "integrity": "sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==", "dev": true, "license": "MIT", "dependencies": { @@ -26491,6 +26540,8 @@ }, "node_modules/rollup-plugin-typescript2": { "version": "0.36.0", + "resolved": "https://registry.npmjs.org/rollup-plugin-typescript2/-/rollup-plugin-typescript2-0.36.0.tgz", + "integrity": "sha512-NB2CSQDxSe9+Oe2ahZbf+B4bh7pHwjV5L+RSYpCu7Q5ROuN94F9b6ioWwKfz3ueL3KTtmX4o2MUH2cgHDIEUsw==", "dev": true, "license": "MIT", "dependencies": { @@ -31501,63 +31552,12 @@ } } }, - "packages/react/node_modules/@mdx-js/react": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-3.1.0.tgz", - "integrity": "sha512-QjHtSaoameoalGnKDT3FoIl4+9RwyTmo9ZJGBdLOks/YOiWHoRDI3PUwEzOE7kEmGcV3AFcp9K6dYu9rEuKLAQ==", - "dev": true, - "license": "MIT", - "dependencies": { - "@types/mdx": "^2.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/unified" - }, - "peerDependencies": { - "@types/react": ">=16", - "react": ">=16" - } - }, "packages/react/node_modules/@oddbird/popover-polyfill": { "version": "0.5.2", "resolved": "https://registry.npmjs.org/@oddbird/popover-polyfill/-/popover-polyfill-0.5.2.tgz", "integrity": "sha512-iFrvar5SOMtKFOSjYvs4z9UlLqDdJbMx0mgISLcPedv+g0ac5sgeETLGtipHCVIae6HJPclNEH5aCyD1RZaEHw==", "license": "BSD-3-Clause" }, - "packages/react/node_modules/@storybook/addon-docs": { - "version": "9.0.12", - "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-9.0.12.tgz", - "integrity": "sha512-bAuFy4BWGEBIC0EAS4N+V8mHj7NZiSdDnJUSr4Al3znEVzNHLpQAMRznkga2Ok8x+gwcyBG7W47dLbDXVqLZDg==", - "dev": true, - "license": "MIT", - "dependencies": { - "@mdx-js/react": "^3.0.0", - "@storybook/csf-plugin": "9.0.12", - "@storybook/icons": "^1.2.12", - "@storybook/react-dom-shim": "9.0.12", - "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", - "ts-dedent": "^2.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" - }, - "peerDependencies": { - "storybook": "^9.0.12" - } - }, - "packages/react/node_modules/@types/react-dom": { - "version": "18.3.1", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.1.tgz", - "integrity": "sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==", - "dev": true, - "license": "MIT", - "dependencies": { - "@types/react": "*" - } - }, "packages/react/node_modules/@types/react-test-renderer": { "version": "18.3.1", "resolved": "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-18.3.1.tgz", @@ -32008,6 +32008,182 @@ "funding": { "url": "https://github.com/sponsors/isaacs" } + }, + "packages/styled-react": { + "name": "@primer/styled-react", + "version": "0.0.0", + "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/node_modules/foreground-child": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz", + "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==", + "dev": true, + "license": "ISC", + "dependencies": { + "cross-spawn": "^7.0.6", + "signal-exit": "^4.0.1" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "packages/styled-react/node_modules/glob": { + "version": "11.0.3", + "resolved": "https://registry.npmjs.org/glob/-/glob-11.0.3.tgz", + "integrity": "sha512-2Nim7dha1KVkaiF4q6Dj+ngPPMdfvLJEOpZk/jKiUAkqKebpGAWQXAq9z1xu9HKu5lWfqw/FASuccEjyznjPaA==", + "dev": true, + "license": "ISC", + "dependencies": { + "foreground-child": "^3.3.1", + "jackspeak": "^4.1.1", + "minimatch": "^10.0.3", + "minipass": "^7.1.2", + "package-json-from-dist": "^1.0.0", + "path-scurry": "^2.0.0" + }, + "bin": { + "glob": "dist/esm/bin.mjs" + }, + "engines": { + "node": "20 || >=22" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "packages/styled-react/node_modules/jackspeak": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-4.1.1.tgz", + "integrity": "sha512-zptv57P3GpL+O0I7VdMJNBZCu+BPHVQUk55Ft8/QCJjTVxrnJHuVuX/0Bl2A6/+2oyR/ZMEuFKwmzqqZ/U5nPQ==", + "dev": true, + "license": "BlueOak-1.0.0", + "dependencies": { + "@isaacs/cliui": "^8.0.2" + }, + "engines": { + "node": "20 || >=22" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "packages/styled-react/node_modules/lru-cache": { + "version": "11.1.0", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.1.0.tgz", + "integrity": "sha512-QIXZUBJUx+2zHUdQujWejBkcD9+cs94tLn0+YL8UrCh+D5sCXZ4c7LaEH48pNwRY3MLDgqUFyhlCyjJPf1WP0A==", + "dev": true, + "license": "ISC", + "engines": { + "node": "20 || >=22" + } + }, + "packages/styled-react/node_modules/minimatch": { + "version": "10.0.3", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.0.3.tgz", + "integrity": "sha512-IPZ167aShDZZUMdRk66cyQAW3qr0WzbHkPdMYa8bzZhlHhO3jALbKdxcaak7W9FfT2rZNpQuUu4Od7ILEpXSaw==", + "dev": true, + "license": "ISC", + "dependencies": { + "@isaacs/brace-expansion": "^5.0.0" + }, + "engines": { + "node": "20 || >=22" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "packages/styled-react/node_modules/path-scurry": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-2.0.0.tgz", + "integrity": "sha512-ypGJsmGtdXUOeM5u93TyeIEfEhM6s+ljAhrk5vAvSx8uyY/02OvrZnA0YNGUrPXfpJMgI1ODd3nwz8Npx4O4cg==", + "dev": true, + "license": "BlueOak-1.0.0", + "dependencies": { + "lru-cache": "^11.0.0", + "minipass": "^7.1.2" + }, + "engines": { + "node": "20 || >=22" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "packages/styled-react/node_modules/rimraf": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-6.0.1.tgz", + "integrity": "sha512-9dkvaxAsk/xNXSJzMgFqqMCuFgt2+KsOFek3TMLfo8NCPfWpBmqwyNn5Y+NX56QUYfCtsyhF3ayiboEoUmJk/A==", + "dev": true, + "license": "ISC", + "dependencies": { + "glob": "^11.0.0", + "package-json-from-dist": "^1.0.0" + }, + "bin": { + "rimraf": "dist/esm/bin.mjs" + }, + "engines": { + "node": "20 || >=22" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "packages/styled-react/node_modules/signal-exit": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz", + "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==", + "dev": true, + "license": "ISC", + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } } } } diff --git a/packages/styled-react/README.md b/packages/styled-react/README.md new file mode 100644 index 00000000000..c7224896a0c --- /dev/null +++ b/packages/styled-react/README.md @@ -0,0 +1,22 @@ +# @primer/styled-react + +> A deprecated package for working with Primer 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 + +## 📖 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. diff --git a/packages/styled-react/package.json b/packages/styled-react/package.json new file mode 100644 index 00000000000..d1cf0b67b87 --- /dev/null +++ b/packages/styled-react/package.json @@ -0,0 +1,57 @@ +{ + "name": "@primer/styled-react", + "version": "0.0.0", + "type": "module", + "exports": { + "types": "dist/index.d.ts", + "default": "dist/index.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 + } + } +} diff --git a/packages/styled-react/rollup.config.js b/packages/styled-react/rollup.config.js new file mode 100644 index 00000000000..7528dd56f86 --- /dev/null +++ b/packages/styled-react/rollup.config.js @@ -0,0 +1,32 @@ +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', + external: dependencies.map(createPackageRegex), + plugins: [ + typescript({ + tsconfig: 'tsconfig.build.json', + }), + babel({ + presets: ['@babel/preset-typescript'], + extensions: ['.ts', '.tsx'], + }), + ], + output: { + dir: 'dist', + format: 'esm', + }, +}) diff --git a/packages/styled-react/script/build b/packages/styled-react/script/build new file mode 100755 index 00000000000..b2981e2b226 --- /dev/null +++ b/packages/styled-react/script/build @@ -0,0 +1,3 @@ +#!/bin/bash + +npx rollup -c diff --git a/packages/styled-react/src/index.ts b/packages/styled-react/src/index.ts new file mode 100644 index 00000000000..6029c6249aa --- /dev/null +++ b/packages/styled-react/src/index.ts @@ -0,0 +1,2 @@ +export {Box} from '@primer/react' +export type {BoxProps} from '@primer/react' diff --git a/packages/styled-react/tsconfig.build.json b/packages/styled-react/tsconfig.build.json new file mode 100644 index 00000000000..eab7b394200 --- /dev/null +++ b/packages/styled-react/tsconfig.build.json @@ -0,0 +1,8 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./dist", + "declaration": true, + "emitDeclarationOnly": true + } +} diff --git a/packages/styled-react/tsconfig.json b/packages/styled-react/tsconfig.json new file mode 100644 index 00000000000..c3dc902166e --- /dev/null +++ b/packages/styled-react/tsconfig.json @@ -0,0 +1,5 @@ +{ + "extends": "../../tsconfig.base.json", + "include": ["src"] +} + From ad4b7c9e3d43235e5b412bbc97e2620d4a2f2c1a Mon Sep 17 00:00:00 2001 From: Josh Black Date: Wed, 30 Jul 2025 16:26:56 -0500 Subject: [PATCH 02/12] docs: add package docs --- packages/styled-react/README.md | 13 ++++++++++++- packages/styled-react/package.json | 1 + 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/packages/styled-react/README.md b/packages/styled-react/README.md index c7224896a0c..f37f018c725 100644 --- a/packages/styled-react/README.md +++ b/packages/styled-react/README.md @@ -1,6 +1,6 @@ # @primer/styled-react -> A deprecated package for working with Primer and styled-components +> A temporary package that bridges the gap between Primer React and styled-components ## Getting started @@ -13,6 +13,17 @@ npm install -S @primer/styled-react ## Usage +This is an interim package designed to make it easy to interop between Primer +and existing styled-components usage. Over time, this component will stop +receiving updates. + +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. diff --git a/packages/styled-react/package.json b/packages/styled-react/package.json index d1cf0b67b87..ae565e6f67b 100644 --- a/packages/styled-react/package.json +++ b/packages/styled-react/package.json @@ -1,5 +1,6 @@ { "name": "@primer/styled-react", + "private": true, "version": "0.0.0", "type": "module", "exports": { From 165f271239e4372d1b55640fee71e6e31d4eabe0 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Thu, 31 Jul 2025 11:45:42 -0500 Subject: [PATCH 03/12] feat: add support for deprecated, experimental, and additional components --- packages/styled-react/package.json | 14 ++++++-- packages/styled-react/rollup.config.js | 2 +- packages/styled-react/src/deprecated.ts | 1 + packages/styled-react/src/experimental.ts | 1 + packages/styled-react/src/index.ts | 44 +++++++++++++++++++++-- 5 files changed, 57 insertions(+), 5 deletions(-) create mode 100644 packages/styled-react/src/deprecated.ts create mode 100644 packages/styled-react/src/experimental.ts diff --git a/packages/styled-react/package.json b/packages/styled-react/package.json index ae565e6f67b..b952b5a747b 100644 --- a/packages/styled-react/package.json +++ b/packages/styled-react/package.json @@ -4,8 +4,18 @@ "version": "0.0.0", "type": "module", "exports": { - "types": "dist/index.d.ts", - "default": "dist/index.js" + ".": { + "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", diff --git a/packages/styled-react/rollup.config.js b/packages/styled-react/rollup.config.js index 7528dd56f86..f0fe6176f36 100644 --- a/packages/styled-react/rollup.config.js +++ b/packages/styled-react/rollup.config.js @@ -14,7 +14,7 @@ function createPackageRegex(name) { } export default defineConfig({ - input: 'src/index.ts', + input: ['src/index.ts', 'src/experimental.ts', 'src/deprecated.ts'], external: dependencies.map(createPackageRegex), plugins: [ typescript({ diff --git a/packages/styled-react/src/deprecated.ts b/packages/styled-react/src/deprecated.ts new file mode 100644 index 00000000000..160ddb2179c --- /dev/null +++ b/packages/styled-react/src/deprecated.ts @@ -0,0 +1 @@ +export {UnderlineNav, TabNav, Octicon} from '@primer/react/deprecated' diff --git a/packages/styled-react/src/experimental.ts b/packages/styled-react/src/experimental.ts new file mode 100644 index 00000000000..e41fac524d7 --- /dev/null +++ b/packages/styled-react/src/experimental.ts @@ -0,0 +1 @@ +export {Tooltip} from '@primer/react/experimental' diff --git a/packages/styled-react/src/index.ts b/packages/styled-react/src/index.ts index 6029c6249aa..7646c8ed0ea 100644 --- a/packages/styled-react/src/index.ts +++ b/packages/styled-react/src/index.ts @@ -1,2 +1,42 @@ -export {Box} from '@primer/react' -export type {BoxProps} from '@primer/react' +export { + BranchName, + Box, + type BoxProps, + CircleBadge, + Header, + NavList, + CircleOcticon, + ProgressBar, + SegmentedControl, + StateLabel, + ToggleSwitch, + Overlay, + CheckboxGroup, + RelativeTime, + Tooltip, + CounterLabel, + Timeline, + Textarea, + LinkButton, + UnderlineNav, + PageHeader, + Spinner, + Breadcrumbs, + Popover, + Token, + PageLayout, + Label, + ActionMenu, + Truncate, + Flash, + Dialog, + TextInput, + IconButton, + ActionList, + FormControl, + Link, + Button, + Heading, + Text, + type TextProps, +} from '@primer/react' From 6d8842dbcaa45d5e3166ab41f06b7844d459ae3b Mon Sep 17 00:00:00 2001 From: Josh Black Date: Thu, 31 Jul 2025 11:47:32 -0500 Subject: [PATCH 04/12] chore: set explicit babel helpers option --- packages/styled-react/rollup.config.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/styled-react/rollup.config.js b/packages/styled-react/rollup.config.js index f0fe6176f36..0c5deb298b0 100644 --- a/packages/styled-react/rollup.config.js +++ b/packages/styled-react/rollup.config.js @@ -23,6 +23,7 @@ export default defineConfig({ babel({ presets: ['@babel/preset-typescript'], extensions: ['.ts', '.tsx'], + babelHelpers: 'bundled', }), ], output: { From 0d1e80132678ff2110f9352ba12ad37edc2ddfeb Mon Sep 17 00:00:00 2001 From: Josh Black Date: Thu, 31 Jul 2025 11:48:37 -0500 Subject: [PATCH 05/12] chore: remove TextProps export --- packages/styled-react/src/index.ts | 57 +++++++++++++++--------------- 1 file changed, 28 insertions(+), 29 deletions(-) diff --git a/packages/styled-react/src/index.ts b/packages/styled-react/src/index.ts index 7646c8ed0ea..531f9ff4e55 100644 --- a/packages/styled-react/src/index.ts +++ b/packages/styled-react/src/index.ts @@ -1,42 +1,41 @@ export { - BranchName, + ActionList, + ActionMenu, Box, type BoxProps, + BranchName, + Breadcrumbs, + Button, + CheckboxGroup, CircleBadge, + CircleOcticon, + CounterLabel, + Dialog, + Flash, + FormControl, Header, + Heading, + IconButton, + Label, + Link, + LinkButton, NavList, - CircleOcticon, + Overlay, + PageHeader, + PageLayout, + Popover, ProgressBar, + RelativeTime, SegmentedControl, + Spinner, StateLabel, - ToggleSwitch, - Overlay, - CheckboxGroup, - RelativeTime, - Tooltip, - CounterLabel, - Timeline, + Text, + TextInput, Textarea, - LinkButton, - UnderlineNav, - PageHeader, - Spinner, - Breadcrumbs, - Popover, + Timeline, + ToggleSwitch, Token, - PageLayout, - Label, - ActionMenu, + Tooltip, Truncate, - Flash, - Dialog, - TextInput, - IconButton, - ActionList, - FormControl, - Link, - Button, - Heading, - Text, - type TextProps, + UnderlineNav, } from '@primer/react' From fd9215643dbbbe0d14d0f4884e5cfee26b012b22 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Thu, 31 Jul 2025 11:52:06 -0500 Subject: [PATCH 06/12] test: add export tests for package --- .../__snapshots__/exports.test.ts.snap | 58 +++++++++++++++++++ .../src/__tests__/exports.test.ts | 16 +++++ packages/styled-react/vitest.config.ts | 7 +++ 3 files changed, 81 insertions(+) create mode 100644 packages/styled-react/src/__tests__/__snapshots__/exports.test.ts.snap create mode 100644 packages/styled-react/src/__tests__/exports.test.ts create mode 100644 packages/styled-react/vitest.config.ts diff --git a/packages/styled-react/src/__tests__/__snapshots__/exports.test.ts.snap b/packages/styled-react/src/__tests__/__snapshots__/exports.test.ts.snap new file mode 100644 index 00000000000..28c43cf4056 --- /dev/null +++ b/packages/styled-react/src/__tests__/__snapshots__/exports.test.ts.snap @@ -0,0 +1,58 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`@primer/styled-react exports 1`] = ` +[ + "ActionList", + "ActionMenu", + "Box", + "BranchName", + "Breadcrumbs", + "Button", + "CheckboxGroup", + "CircleBadge", + "CircleOcticon", + "CounterLabel", + "Dialog", + "Flash", + "FormControl", + "Header", + "Heading", + "IconButton", + "Label", + "Link", + "LinkButton", + "NavList", + "Overlay", + "PageHeader", + "PageLayout", + "Popover", + "ProgressBar", + "RelativeTime", + "SegmentedControl", + "Spinner", + "StateLabel", + "Text", + "TextInput", + "Textarea", + "Timeline", + "ToggleSwitch", + "Token", + "Tooltip", + "Truncate", + "UnderlineNav", +] +`; + +exports[`@primer/styled-react/deprecated exports 1`] = ` +[ + "UnderlineNav", + "TabNav", + "Octicon", +] +`; + +exports[`@primer/styled-react/experimental exports 1`] = ` +[ + "Tooltip", +] +`; diff --git a/packages/styled-react/src/__tests__/exports.test.ts b/packages/styled-react/src/__tests__/exports.test.ts new file mode 100644 index 00000000000..3c944d79cd7 --- /dev/null +++ b/packages/styled-react/src/__tests__/exports.test.ts @@ -0,0 +1,16 @@ +import {test, expect} from 'vitest' +import * as StyledReact from '../' +import * as StyledReactDeprecated from '../deprecated' +import * as StyledReactExperimental from '../experimental' + +test('@primer/styled-react exports', () => { + expect(Object.keys(StyledReact)).toMatchSnapshot() +}) + +test('@primer/styled-react/deprecated exports', () => { + expect(Object.keys(StyledReactDeprecated)).toMatchSnapshot() +}) + +test('@primer/styled-react/experimental exports', () => { + expect(Object.keys(StyledReactExperimental)).toMatchSnapshot() +}) diff --git a/packages/styled-react/vitest.config.ts b/packages/styled-react/vitest.config.ts new file mode 100644 index 00000000000..e28d08c4e78 --- /dev/null +++ b/packages/styled-react/vitest.config.ts @@ -0,0 +1,7 @@ +import {defineConfig} from 'vitest/config' + +export default defineConfig({ + test: { + environment: 'node', + }, +}) From 5c57d43b6cca06c030d4db9ca61928eef6809c9b Mon Sep 17 00:00:00 2001 From: Josh Black Date: Thu, 31 Jul 2025 11:55:59 -0500 Subject: [PATCH 07/12] chore: add lint disable --- packages/styled-react/src/__tests__/exports.test.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/styled-react/src/__tests__/exports.test.ts b/packages/styled-react/src/__tests__/exports.test.ts index 3c944d79cd7..1ef4ed8b05d 100644 --- a/packages/styled-react/src/__tests__/exports.test.ts +++ b/packages/styled-react/src/__tests__/exports.test.ts @@ -1,6 +1,9 @@ import {test, expect} from 'vitest' +// eslint-disable-next-line import/no-namespace import * as StyledReact from '../' +// eslint-disable-next-line import/no-namespace import * as StyledReactDeprecated from '../deprecated' +// eslint-disable-next-line import/no-namespace import * as StyledReactExperimental from '../experimental' test('@primer/styled-react exports', () => { From a4bf6ee7f16f34f1f639a1cd830130236ec44fbb Mon Sep 17 00:00:00 2001 From: Josh Black Date: Mon, 4 Aug 2025 16:44:30 -0500 Subject: [PATCH 08/12] feat: add initial batch of sx components --- packages/styled-react/package.json | 1 - .../__snapshots__/exports.test.ts.snap | 26 +------------------ packages/styled-react/src/deprecated.ts | 2 +- packages/styled-react/src/experimental.ts | 2 +- packages/styled-react/src/index.ts | 23 ---------------- 5 files changed, 3 insertions(+), 51 deletions(-) diff --git a/packages/styled-react/package.json b/packages/styled-react/package.json index b952b5a747b..fa466c40e0f 100644 --- a/packages/styled-react/package.json +++ b/packages/styled-react/package.json @@ -1,6 +1,5 @@ { "name": "@primer/styled-react", - "private": true, "version": "0.0.0", "type": "module", "exports": { diff --git a/packages/styled-react/src/__tests__/__snapshots__/exports.test.ts.snap b/packages/styled-react/src/__tests__/__snapshots__/exports.test.ts.snap index 28c43cf4056..dbc876e43dc 100644 --- a/packages/styled-react/src/__tests__/__snapshots__/exports.test.ts.snap +++ b/packages/styled-react/src/__tests__/__snapshots__/exports.test.ts.snap @@ -5,54 +5,30 @@ exports[`@primer/styled-react exports 1`] = ` "ActionList", "ActionMenu", "Box", - "BranchName", "Breadcrumbs", "Button", - "CheckboxGroup", - "CircleBadge", - "CircleOcticon", - "CounterLabel", - "Dialog", "Flash", "FormControl", - "Header", "Heading", "IconButton", "Label", "Link", "LinkButton", - "NavList", - "Overlay", - "PageHeader", "PageLayout", - "Popover", - "ProgressBar", - "RelativeTime", - "SegmentedControl", - "Spinner", - "StateLabel", "Text", "TextInput", - "Textarea", - "Timeline", - "ToggleSwitch", - "Token", - "Tooltip", "Truncate", - "UnderlineNav", ] `; exports[`@primer/styled-react/deprecated exports 1`] = ` [ - "UnderlineNav", - "TabNav", "Octicon", ] `; exports[`@primer/styled-react/experimental exports 1`] = ` [ - "Tooltip", + "Dialog", ] `; diff --git a/packages/styled-react/src/deprecated.ts b/packages/styled-react/src/deprecated.ts index 160ddb2179c..59f36ac26ef 100644 --- a/packages/styled-react/src/deprecated.ts +++ b/packages/styled-react/src/deprecated.ts @@ -1 +1 @@ -export {UnderlineNav, TabNav, Octicon} from '@primer/react/deprecated' +export {Octicon} from '@primer/react/deprecated' diff --git a/packages/styled-react/src/experimental.ts b/packages/styled-react/src/experimental.ts index e41fac524d7..75a2979faf2 100644 --- a/packages/styled-react/src/experimental.ts +++ b/packages/styled-react/src/experimental.ts @@ -1 +1 @@ -export {Tooltip} from '@primer/react/experimental' +export {Dialog} from '@primer/react/experimental' diff --git a/packages/styled-react/src/index.ts b/packages/styled-react/src/index.ts index 531f9ff4e55..7427ec668d9 100644 --- a/packages/styled-react/src/index.ts +++ b/packages/styled-react/src/index.ts @@ -2,40 +2,17 @@ export { ActionList, ActionMenu, Box, - type BoxProps, - BranchName, Breadcrumbs, Button, - CheckboxGroup, - CircleBadge, - CircleOcticon, - CounterLabel, - Dialog, Flash, FormControl, - Header, Heading, IconButton, Label, Link, LinkButton, - NavList, - Overlay, - PageHeader, PageLayout, - Popover, - ProgressBar, - RelativeTime, - SegmentedControl, - Spinner, - StateLabel, Text, TextInput, - Textarea, - Timeline, - ToggleSwitch, - Token, - Tooltip, Truncate, - UnderlineNav, } from '@primer/react' From 27fcb0dbb8ee658a921ddc602340e4f0612e6ece Mon Sep 17 00:00:00 2001 From: Josh Black Date: Mon, 4 Aug 2025 16:45:22 -0500 Subject: [PATCH 09/12] chore: add changeset --- .changeset/spotty-coats-post.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/spotty-coats-post.md diff --git a/.changeset/spotty-coats-post.md b/.changeset/spotty-coats-post.md new file mode 100644 index 00000000000..da5a61bbb5f --- /dev/null +++ b/.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 From 0faadadf60f4f050b095033ab29f09eff688f338 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Mon, 4 Aug 2025 16:57:42 -0500 Subject: [PATCH 10/12] chore: fix lint errors --- packages/styled-react/tsconfig.build.json | 3 ++- packages/styled-react/tsconfig.json | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/styled-react/tsconfig.build.json b/packages/styled-react/tsconfig.build.json index eab7b394200..32f0e2e8057 100644 --- a/packages/styled-react/tsconfig.build.json +++ b/packages/styled-react/tsconfig.build.json @@ -4,5 +4,6 @@ "outDir": "./dist", "declaration": true, "emitDeclarationOnly": true - } + }, + "exclude": ["vitest.config.ts"] } diff --git a/packages/styled-react/tsconfig.json b/packages/styled-react/tsconfig.json index c3dc902166e..9e42ce6a611 100644 --- a/packages/styled-react/tsconfig.json +++ b/packages/styled-react/tsconfig.json @@ -1,5 +1,5 @@ { "extends": "../../tsconfig.base.json", - "include": ["src"] + "include": ["src", "vitest.config.ts"] } From 6ce63e06bcb190d00a0e8ef44e03921d6ecfbefc Mon Sep 17 00:00:00 2001 From: Josh Black Date: Mon, 4 Aug 2025 17:06:29 -0500 Subject: [PATCH 11/12] docs: update readme --- packages/styled-react/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/styled-react/README.md b/packages/styled-react/README.md index f37f018c725..c69be89bf01 100644 --- a/packages/styled-react/README.md +++ b/packages/styled-react/README.md @@ -13,9 +13,9 @@ npm install -S @primer/styled-react ## Usage -This is an interim package designed to make it easy to interop between Primer -and existing styled-components usage. Over time, this component will stop -receiving updates. +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 From 0c786ce50dc836e3378fb4e27125b329929dac70 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Tue, 5 Aug 2025 12:39:14 -0500 Subject: [PATCH 12/12] feat: add sx helpers --- .../src/__tests__/__snapshots__/exports.test.ts.snap | 1 + packages/styled-react/src/index.ts | 6 ++++++ 2 files changed, 7 insertions(+) diff --git a/packages/styled-react/src/__tests__/__snapshots__/exports.test.ts.snap b/packages/styled-react/src/__tests__/__snapshots__/exports.test.ts.snap index dbc876e43dc..fd2e5a7925a 100644 --- a/packages/styled-react/src/__tests__/__snapshots__/exports.test.ts.snap +++ b/packages/styled-react/src/__tests__/__snapshots__/exports.test.ts.snap @@ -18,6 +18,7 @@ exports[`@primer/styled-react exports 1`] = ` "Text", "TextInput", "Truncate", + "sx", ] `; diff --git a/packages/styled-react/src/index.ts b/packages/styled-react/src/index.ts index 7427ec668d9..c41a1a9bded 100644 --- a/packages/styled-react/src/index.ts +++ b/packages/styled-react/src/index.ts @@ -2,6 +2,7 @@ export { ActionList, ActionMenu, Box, + type BoxProps, Breadcrumbs, Button, Flash, @@ -15,4 +16,9 @@ export { Text, TextInput, Truncate, + + // Utilities for working with the `sx` prop + sx, + type SxProp, + type BetterSystemStyleObject, } from '@primer/react'