feat: add @primer/styled-react package #6417
Conversation
🦋 Changeset detectedLatest commit: 8463b5e The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
size-limit report 📦
|
There was a problem hiding this comment.
Pull Request Overview
This PR introduces a new temporary package @primer/styled-react to help bridge between styled-components usage and @primer/react when styled-components support is removed.
- Creates a new npm workspace package that re-exports selected components from
@primer/react - Sets up build tooling and configuration for the new package
- Includes test coverage to verify component exports
Reviewed Changes
Copilot reviewed 13 out of 14 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| packages/styled-react/package.json | Package configuration with dependencies and peer dependencies for the bridge package |
| packages/styled-react/src/index.ts | Main entry point re-exporting 17 components from @primer/react |
| packages/styled-react/src/experimental.ts | Re-exports experimental Dialog component |
| packages/styled-react/src/deprecated.ts | Re-exports deprecated Octicon component |
| packages/styled-react/rollup.config.js | Rollup build configuration for ESM output |
| packages/styled-react/src/tests/exports.test.ts | Tests to verify component exports with snapshot testing |
| packages/styled-react/src/tests/snapshots/exports.test.ts.snap | Snapshot file capturing expected exports |
| packages/styled-react/tsconfig.json | TypeScript configuration extending base config |
| packages/styled-react/tsconfig.build.json | Build-specific TypeScript configuration |
| packages/styled-react/vitest.config.ts | Vitest test configuration |
| packages/styled-react/script/build | Build script using rollup |
| packages/styled-react/README.md | Documentation explaining the package purpose and usage |
| .changeset/spotty-coats-post.md | Changeset file for version tracking |
| @@ -0,0 +1,5 @@ | |||
| --- | |||
| '@primer/styled-react': minor | |||
There was a problem hiding this comment.
Just double checking we're defaulting minor for all releases of this project?
There was a problem hiding this comment.
That was my default but no preference on my end!
packages/styled-react/README.md
Outdated
|
|
||
| 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. |
There was a problem hiding this comment.
Wanting some wording in here about
- This is pre-major and will have breaking changes
- The components in here are temporary until we have determined they've been successfully migrated away.
Not married to the wording so whatever you want to fix here is 👍🏻 with me.
| receiving updates. | |
| receiving updates. And the components in here will be removed when we determine they are no longer in use without a major release. |
There was a problem hiding this comment.
Just pushed an update, let me know what you think!
|
|
||
| test('@primer/styled-react/experimental exports', () => { | ||
| expect(Object.keys(StyledReactExperimental)).toMatchSnapshot() | ||
| }) |
There was a problem hiding this comment.
Not sure if there's some kinda test we could write that would verify the component is the same? Not a blocker, and might be overkill.
There was a problem hiding this comment.
We could do a type test if that would be helpful, like make sure that every type matches the one from @primer/react. That wouldn't really be behavior/visual though if that's more so what you're looking for 👀
| @@ -0,0 +1,18 @@ | |||
| export { | |||
There was a problem hiding this comment.
when does the wrapping happen? 🤔 or as we remove the sx from @primer/react we'd come here and do that wrapping? 👀
There was a problem hiding this comment.
as we remove the sx from @primer/react we'd come here and do that wrapping?
Exactly 💯
…ct into feat/add-styled-react-package
Closes https://github.com/github/primer/issues/5584
Add support for temporary package to help bridge between styled-components usage and
@primer/reactChangelog
New
@primer/styled-reactthat will be the adapter between styled-components usage and@primer/reactwhen we remove support for styled-componentsChanged
Removed