Skip to content

[8542] Fix NPM builds for studio-ui and guest#4789

Open
jvega190 wants to merge 6 commits intocraftercms:developfrom
jvega190:bugfix/8542
Open

[8542] Fix NPM builds for studio-ui and guest#4789
jvega190 wants to merge 6 commits intocraftercms:developfrom
jvega190:bugfix/8542

Conversation

@jvega190
Copy link
Member

@jvega190 jvega190 commented Feb 6, 2026

craftercms/craftercms#8542

Summary by CodeRabbit

  • Bug Fixes

    • Corrected embedded component path resolution to extract base repository paths from nested properties.
    • Improved real-time text editor initialization so editor configurations are recognized reliably for the correct setup.
  • Style

    • Refined tooltip styling for improved legibility (smaller, consistent font size).

@coderabbitai
Copy link

coderabbitai bot commented Feb 6, 2026

Walkthrough

Added explicit default React imports across many TSX modules for JSX/runtime compatibility and a small functional change in guest runtime: adjust how baseRepoPath is read from nested properties and cast rteConfiguration value to string when initializing FE RTT/TinyMCE setup.

Changes

Cohort / File(s) Summary
ContentTypeManagement
ui/app/src/components/ContentTypeManagement/components/MainSection.tsx, ui/app/src/components/ContentTypeManagement/components/SwapFieldDialog.tsx
Added explicit import React from 'react' to each file.
FormsEngine — components (bulk)
ui/app/src/components/FormsEngine/components/ContentPicker.tsx, ui/app/src/components/FormsEngine/components/FieldBox.tsx, ui/app/src/components/FormsEngine/components/FieldRequiredStateIndicator.tsx, ui/app/src/components/FormsEngine/components/SortableList.tsx, ui/app/src/components/FormsEngine/components/SortableListSkeleton.tsx, ui/app/src/components/FormsEngine/components/StickyBox.tsx, ui/app/src/components/FormsEngine/components/TouchSortableList.tsx
Added explicit React namespace import; some files now import React alongside existing named imports.
FormsEngine — controls
ui/app/src/components/FormsEngine/controls/ColorPicker.tsx, ui/app/src/components/FormsEngine/controls/NodeSelector.tsx, ui/app/src/components/FormsEngine/controls/Numeric.tsx
Added or adjusted React default import (now imported alongside named exports).
ImageEditorDialog
ui/app/src/components/ImageEditorDialog/ActionsBar.tsx, ui/app/src/components/ImageEditorDialog/AdjustableBackground.tsx, ui/app/src/components/ImageEditorDialog/ImageEditorDialog.tsx, ui/app/src/components/ImageEditorDialog/ImageEditorDialogContainer.tsx
Added explicit React import; AdjustableBackground.tsx changed from import { forwardRef } to import React, { forwardRef }.
Utilities
ui/app/src/utils/ui.tsx
Added explicit import React from 'react'.
Guest runtime — UI tweak
ui/guest/src/react/UltraStyledTooltip.tsx
Merged sx styling into tooltip slotProps (set fontSize: 12) and added a @ts-expect-error to silence a type complaint about sx.
Guest runtime — logic change
ui/guest/src/store/epics/root.ts
Resolve baseRepoPath from properties?.baseRepoPath on the found data source; cast field.properties?.rteConfiguration?.value to string when deriving setupId for FE RTT/TinyMCE initialization.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

Suggested reviewers

  • rart
  • sumerjabri
🚥 Pre-merge checks | ✅ 2 | ❌ 1
❌ Failed checks (1 inconclusive)
Check name Status Explanation Resolution
Description check ❓ Inconclusive The PR description only contains a link to the issue without providing context about changes, testing, or rationale as suggested by the template. Expand the description to explain what was fixed and why (e.g., React import requirements for JSX runtime, type casting issues, and build impacts).
✅ Passed checks (2 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly summarizes the main change: adding missing React imports and fixing build issues across multiple files to support NPM builds.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment

No actionable comments were generated in the recent review. 🎉


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Fix all issues with AI agents
In `@ui/guest/src/store/epics/root.ts`:
- Around line 582-583: The code casts field.properties?.rteConfiguration?.value
to string for the setupId lookup, which masks the declared union type (string |
boolean | number) and can break state.rteConfig[setupId]; update the lookup to
handle the union safely: validate or coerce
field.properties?.rteConfiguration?.value at runtime (e.g., check typeof value
=== 'string' and use fallback 'generic' otherwise) before assigning setupId and
then use setup = state.rteConfig[setupId] ?? Object.values(state.rteConfig)[0]
?? {}; ensure references to setupId and the rtcConfig lookup (state.rteConfig)
use the validated/coerced string so no type cast is needed.
🧹 Nitpick comments (3)
ui/app/src/components/FormsEngine/components/StickyBox.tsx (1)

17-20: Consider consolidating the two react imports into one.

Other files in this PR (e.g., FeaturedButton.tsx, SortableList.tsx) combine the React default import with named imports in a single statement. Keeping it consistent here avoids having two import lines from the same module.

♻️ Suggested consolidation
-import React from 'react';
 import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
-import { PropsWithChildren, useEffect, useRef, useState } from 'react';
+import React, { PropsWithChildren, useEffect, useRef, useState } from 'react';
ui/app/src/components/ImageEditorDialog/ImageEditorDialogContainer.tsx (1)

17-20: Consider consolidating the two react imports into one.

Same pattern as noted in StickyBox.tsx — the default and named imports from 'react' can be combined into a single statement for consistency with other files in this PR.

♻️ Suggested consolidation
-import React from 'react';
 import { DialogBody } from '../DialogBody';
 import { DialogFooter } from '../DialogFooter';
-import { useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
ui/app/src/components/FormsEngine/components/ContentPicker.tsx (1)

17-25: Consider consolidating the two react imports into one.

Same pattern as other files in this PR — the default and named imports can be combined.

♻️ Suggested consolidation
-import React from 'react';
 import FormControl from '@mui/material/FormControl';
 import FormLabel from '@mui/material/FormLabel';
 import RadioGroup from '@mui/material/RadioGroup';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Radio from '@mui/material/Radio';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
-import { ReactNode, SyntheticEvent } from 'react';
+import React, { ReactNode, SyntheticEvent } from 'react';

@jvega190 jvega190 marked this pull request as ready for review February 10, 2026 16:53
@jvega190 jvega190 requested a review from rart as a code owner February 10, 2026 16:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant

Comments