ref(scraps): Move isolated core components into the package by TkDodo · Pull Request #127513 · getsentry/sentry

TkDodo · 2026-10-15T08:57:28Z

move theme and everything that’s already isolated from sentry/components/core to packages/scraps

with this, we get:

backdrop
emptyState
reveaOnHover
slider
slot
switch
datetime
renderToString
useScrollLock

most import changes concern the theme move:

- import type {StrictCSSObject, Theme} from 'sentry/utils/theme';
+ import type {StrictCSSObject, Theme} from '@sentry/scraps/theme';

You can use the scraps-review skill to mark over 100 of files that only touch imports as viewed, then use file-filters to hide them from the diff view.

Move isolated components, contexts, helpers, and their tests out of the app. Give Scraps the theme support and browser types needed to build without app code.

Merge master so the PR checkout includes the test workspace used by the current snapshot workflow. Fail browser setup if its workspace filter does not match.

github-actions · 2026-10-15T10:31:42Z

Story previews

Preview the stories changed in this PR on the Vercel deployment:

_{Preview deployment: https://sentry-ot64i56fy.sentry.dev}

TkDodo · 2026-10-15T11:32:36Z

+function ThemeWrapper({children}: {children: React.ReactNode}) {
+  return <ThemeProvider theme={lightTheme}>{children}</ThemeProvider>;
+}


note: I think it’s fine that we have an inline ThemeWrapper a bunch of times now in scraps but if you prefer I can move that to a shared test util

TkDodo · 2026-10-15T11:33:09Z


 import type {Responsive} from '@sentry/scraps/layout';
-
-import {render, screen} from '../../test/env';


there was a missing lint rule enabled here. This shouldn’t have been possible!

TkDodo · 2026-10-15T11:36:00Z

+ * reflected in `getComputedStyle` under jsdom. Read the generated rules for an
+ * element directly off `document.styleSheets` instead.
+ */
+function getEmotionRules(element: HTMLElement): string[] {


note: I’ll remove this abomination in a follow-up and replace those tests with snapshot tests

natemoo-re

Looks excellent, nice work!

natemoo-re · 2026-10-15T14:21:31Z

        'static/packages/icons/test/**/*.{ts,tsx,mjs}',
      ],
      rules: {
-        'import/no-relative-parent-imports': 'off',


TkDodo · 2026-10-15T16:07:42Z

bugbot run

cursor

Stale Bugbot comment from a previous run.

cursor

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 5e25215. Configure here.}

cursor · 2026-10-15T18:14:36Z

 // Disable transitions in acceptance tests or node testing environments.
-const IS_ACCEPTANCE_OR_TESTING = IS_ACCEPTANCE_TEST || NODE_ENV === 'test';
+const IS_ACCEPTANCE_OR_TESTING =
+  !!process.env.IS_ACCEPTANCE_TEST || process.env.NODE_ENV === 'test';


Theme reads process in the browser

Medium Severity

lightTheme and darkTheme now read process.env at module load. The published scraps build targets the browser and does not define process, so importing the documented theme entry can throw process is not defined for consumers without a Node polyfill. Acceptance-test motion disabling also stays tied to a runtime process lookup rather than a compile-time flag.

^{Reviewed by Cursor Bugbot for commit 5e25215. Configure here.}

Follow-up to #127513 and the [Bugbot comment](#127513 (comment)) on it. Scraps is built as browser ESM with rslib. In that format rslib leaves `process.env.*` untouched ([docs](https://rslib.rs/guide/advanced/env-vars)). The theme read `process.env.IS_ACCEPTANCE_TEST` when the module loaded. Vite and webpack 5 only replace `NODE_ENV`, so in apps built with them, importing `@sentry/scraps/theme` (or the root entry) from the published package could throw `process is not defined`. The Sentry app wasn't affected because `rsbuild.config.ts` defines both values. **Changes** - `theme.tsx`: removed `IS_ACCEPTANCE_OR_TESTING` and `EMPTY_TRANSITION`. Framer transitions are now the same in every environment. The app already turns off animations in acceptance and Jest runs with `MotionGlobalConfig.skipAnimations = true` (`static/app/bootstrap/commonInitialization.tsx`, `tests/js/setup.ts`). In framer-motion 12.38 that makes every animation instant with no delay, which covers everything the theme override did. Spring transitions already relied on it. - `theme.spec.tsx`: replaced the NODE_ENV/IS_ACCEPTANCE_TEST test matrix with a check that motion values don't depend on the environment. - `oxlint.config.ts`: moved the shared `no-restricted-syntax` selectors into a `restrictedSyntax` const, so the Scraps `src` override can add to them instead of replacing them. Added two Scraps-only selectors. They flag any use of `process` except `process.env.NODE_ENV`, which every bundler replaces and which `slot.tsx` uses for its dev warning. They also flag `globalThis`/`window`/`self.process`. **Verification** - A probe file showed the new rule flags `process.env.FOO`, `typeof process`, `process.env['NODE_ENV']`, `const {env} = process`, `globalThis.process` and `window.process`. It allows `process.env.NODE_ENV` and `{process: 1}.process`. Running it against the previous `theme.tsx` flagged the `IS_ACCEPTANCE_TEST` line. - The shared selectors still apply in the app (checked with a `forwardRef` probe). App files aren't affected by the Scraps-only rule. - oxlint on `static/packages/scraps`, `static/app/components/core` and `oxlint.config.ts`: no new problems (only existing fake-timer warnings). `oxfmt --check` passes. - Scraps `pnpm test` (240 tests) and `pnpm run verify` pass. The built `dist` now has only `process.env.NODE_ENV` (in `slot.js`). - App Jest for `views/authV2`, `core/modal` and `core/slideOverPanel` (155 tests) passes. `pnpm run typecheck` passes. - Not run: acceptance tests and the full app Jest suite.  via **nate**.    -- [View Junior Session](https://junior-prod.sentry.dev/conversations/slack%3AD0BA0V4G47K%3A1792089343.720259) [[Sentry]](https://sentry.sentry.io/explore/conversations/slack%3AD0BA0V4G47K%3A1792089343.720259/?project=4510944073809921)  Co-authored-by: sentry-junior[bot] <264270552+sentry-junior[bot]@users.noreply.github.com> Co-authored-by: Nate Moore <nate.moore@sentry.io>

linear-code · 2026-10-15T20:04:48Z

DE-919

Scraps now requires explicit React imports for type and runtime references. This prevents generated declarations such as `React.ReactNode` from depending on a consumer's global React namespace. The rule is enabled for Scraps source and colocated tests. Existing uses get type-only imports. Regression tests cover global references, explicit imports, local bindings, and configured globals. Targets the extraction branch in #127513.

ref(scraps): Move isolated core components into the package

89c1e37

Move isolated components, contexts, helpers, and their tests out of the app. Give Scraps the theme support and browser types needed to build without app code.

github-actions Bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Oct 15, 2026

vercel Bot deployed to Preview October 15, 2026 08:58

View deployment

fix(scraps): Remove unused dependency declarations

214a16f

vercel Bot deployed to Preview October 15, 2026 09:07

View deployment

fix(ci): Sync snapshot setup with the test tooling workspace

f4c4ea9

Merge master so the PR checkout includes the test workspace used by the current snapshot workflow. Fail browser setup if its workspace filter does not match.

vercel Bot deployed to Preview October 15, 2026 09:34

View deployment

undo partial moves

a8b02b0

vercel Bot had a problem deploying to Preview October 15, 2026 09:54 Failure

TkDodo added 2 commits October 15, 2026 11:54

undo partial moves

7a30331

Merge branch 'master' into tkdodo/ref/move-isolated-core-to-scraps

bde209e

vercel Bot deployed to Preview October 15, 2026 09:55

View deployment

TkDodo added 2 commits October 15, 2026 12:03

move more theme things

ba149ed

move more things

dbe7aee

vercel Bot deployed to Preview October 15, 2026 10:31

View deployment

TkDodo added 3 commits October 15, 2026 13:36

simplify lint overrides

9a71a4a

revert theme to its previous structure

c747eba

Merge branch 'master' into tkdodo/ref/move-isolated-core-to-scraps

4870fd1

vercel Bot deployed to Preview October 15, 2026 12:08

View deployment

TkDodo commented Oct 15, 2026

View reviewed changes

TkDodo added 2 commits October 15, 2026 14:16

fix scraps publishing

0b9dccb

Merge branch 'master' into tkdodo/ref/move-isolated-core-to-scraps

4eb7591

vercel Bot deployed to Preview October 15, 2026 12:17

View deployment

fix: verify

c9cccf6

vercel Bot deployed to Preview October 15, 2026 12:27

View deployment

TkDodo mentioned this pull request Oct 15, 2026

ref(scraps): Require explicit React imports #127532

Merged

TkDodo added this pull request to stack #127534 October 15, 2026 12:41

TkDodo added 2 commits October 15, 2026 14:44

Merge branch 'master' into tkdodo/ref/move-isolated-core-to-scraps

7acc3d1

fix: imports

19431b7

vercel Bot deployed to Preview October 15, 2026 12:46

View deployment

natemoo-re approved these changes Oct 15, 2026

View reviewed changes

cursor Bot reviewed Oct 15, 2026

View reviewed changes

Merge branch 'master' into tkdodo/ref/move-isolated-core-to-scraps

5e25215

vercel Bot deployed to Preview October 15, 2026 17:01

View deployment

TkDodo marked this pull request as ready for review October 15, 2026 18:08

TkDodo requested review from a team as code owners October 15, 2026 18:08

cursor Bot reviewed Oct 15, 2026

View reviewed changes

TkDodo merged commit 0ae1b32 into master Oct 15, 2026
81 checks passed

TkDodo deleted the tkdodo/ref/move-isolated-core-to-scraps branch October 15, 2026 18:16

sentry-junior Bot mentioned this pull request Oct 15, 2026

fix(scraps): Remove process env checks from theme #127595

Merged

Navigation Menu

Repository navigation

ref(scraps): Move isolated core components into the package - #127513

ref(scraps): Move isolated core components into the package#127513
TkDodo merged 17 commits into
masterfrom
tkdodo/ref/move-isolated-core-to-scraps

TkDodo commented Oct 15, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Oct 15, 2026 •

edited

Loading

Uh oh!

TkDodo Oct 15, 2026

Uh oh!

TkDodo Oct 15, 2026

Uh oh!

TkDodo Oct 15, 2026

Uh oh!

natemoo-re Oct 15, 2026

Uh oh!

natemoo-re left a comment

Uh oh!

natemoo-re Oct 15, 2026

Uh oh!

TkDodo commented Oct 15, 2026

Uh oh!

cursor Bot left a comment •

edited

Loading

Uh oh!

cursor Bot left a comment

Uh oh!

cursor Bot Oct 15, 2026

Uh oh!

Uh oh!

linear-code Bot commented Oct 15, 2026

Uh oh!

This branch was successfully deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants


		import type {Responsive} from '@sentry/scraps/layout';

		import {render, screen} from '../../test/env';

Conversation

TkDodo commented Oct 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Oct 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Story previews

Uh oh!

TkDodo Oct 15, 2026

Choose a reason for hiding this comment

Uh oh!

TkDodo Oct 15, 2026

Choose a reason for hiding this comment

Uh oh!

TkDodo Oct 15, 2026

Choose a reason for hiding this comment

Uh oh!

natemoo-re Oct 15, 2026

Choose a reason for hiding this comment

Uh oh!

natemoo-re left a comment

Choose a reason for hiding this comment

Uh oh!

natemoo-re Oct 15, 2026

Choose a reason for hiding this comment

Uh oh!

TkDodo commented Oct 15, 2026

Uh oh!

cursor Bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

cursor Bot Oct 15, 2026

Choose a reason for hiding this comment

Theme reads process in the browser

Uh oh!

Uh oh!

linear-code Bot commented Oct 15, 2026

Uh oh!

This branch was successfully deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

TkDodo commented Oct 15, 2026 •

edited

Loading

github-actions Bot commented Oct 15, 2026 •

edited

Loading

cursor Bot left a comment •

edited

Loading