Skip to content

Replace HeroUI with owned components and migrate to Tailwind 4 - #1933

Merged
toxsick merged 103 commits into
nextfrom
review/remove-heroui
Oct 25, 2026
Merged

toxsick merged 103 commits into
nextfrom
review/remove-heroui

Conversation

@toxsick

@toxsick toxsick commented Oct 24, 2026

Copy link
Copy Markdown
Contributor

Summary

Removes HeroUI across Pixels, Uniform and their consumers. Components now use owned styling and React Aria where appropriate, with shared field layouts and smaller control subcomponents.

Moves Tailwind configuration to CSS-first Tailwind 4, including owned semantic tokens, explicit source discovery and consumer styling support.

Breaking changes

  • Removes legacy Uniform hooks and inherited HeroUI APIs
  • Removes the pixel-utils heroui export
  • Consumers must import @fuf-stack/pixel-utils/tokens.css, configure package source scanning and replace --heroui-* overrides with --pixel-*
  • The external Markdown editor must replace its legacy useInput usage before upgrading

Migration instructions are in docs/uniform/migration.md and docs/styling.md.

Validation

  • All six repository checks passed
  • 1,992 unit tests passed, one skipped
  • 588 browser stories passed
  • All seven published packages verified
  • React 18 AvatarGroup rendering verified against the packed package
  • HeroUI independence and Tailwind 4 consumer compilation verified

Follow-up

Previously documented color-contrast issues remain separate theme work.

Add a Pixels styling provider, owned semantic merge rules, and packed consumer type checks. Record the HeroUI migration inventory while preserving legacy cn behavior during coexistence.
Package light and dark tokens with Tailwind utilities and verify CSS exports and built-source discovery in a plugin-free tarball consumer.
Add explicit label, description, and error IDs without changing RHF validation timing. Cover custom controls and packaged inference, and capture light/dark field baselines.
Treat nullish display values as empty and use the supported NaN sentinel for the legacy number renderer. Add a null/zero/clear regression story without changing empty-field submission normalization.
Preserve autosizing, controlled values, focus refs, slot types and RHF/Veto timing with React Aria and the existing autosizing engine. Move label spacing onto both owned text-field labels to retain the original control-to-error spacing.
BREAKING CHANGE: Remove uniform/hooks/useInput, uniform/hooks/useUniformField,
and uniform/hooks/useUniformFieldArray with their public helper types and
presentation getters. Custom controls must use useController/useFormContext
and own their presentation. RadioBox no longer inherits HeroUI-only props.
- introduce shared field layout, label and description partials
- clarify Input subcomponent ownership and centralize clear behavior
- reorganize radio controls and segmented field styling
- expand styling slots and consolidate validation message rendering
- update consumers, tests, stories and migration documentation
- add component READMEs and code style guidelines
@coderabbitai

coderabbitai Bot commented Oct 24, 2026 •

Copy link
Copy Markdown

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

Run configuration

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
Walkthrough

[!WARNING]
Review details and warnings were omitted to fit the comment limit.

  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

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.

@toxsick

toxsick commented Oct 24, 2026

Copy link
Copy Markdown
Contributor Author

@coderabbitai help

@coderabbitai

coderabbitai Bot commented Oct 24, 2026

Copy link
Copy Markdown

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

CodeRabbit commands

These commands are invoked using PR/Issue comments.

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai review --preview-config to test the unmerged CodeRabbit configuration on a draft PR. The requester must have repository write access; preview results are non-authoritative.
  • @coderabbitai rate limit to show your current review rate limit status.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai track in a human-authored review thread to track the original finding until CodeRabbit verifies it is fixed.
  • @coderabbitai fixed in a tracked review thread to verify the current code against the original finding.
  • @coderabbitai evaluate custom pre-merge check --instructions <custom-checks-instructions> --name <custom-checks-title> [--mode <error|warning>] to validate the custom pre-merge checks instructions. Defaults to error when --mode is omitted.
  • @coderabbitai ignore pre-merge checks to override pre-merge checks and get an approval on PR.
  • @coderabbitai run pre-merge checks to run pre-merge checks on the pull request.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai generate unit tests to generate unit tests for this PR.
  • @coderabbitai emit path instructions to emit generated path-specific review instructions for this repository.
  • @coderabbitai generate project vocabulary to list vocabulary that is specific to this repository (requires an active subscription).
  • @coderabbitai resolve merge conflict to automatically resolve merge conflicts.
  • @coderabbitai fix comments to automatically fix issues in the current review thread, or all unresolved review comments when used in the PR conversation.
  • @coderabbitai autofix (alias: @coderabbitai autopilot) to enable Autofix to fix CodeRabbit findings and required CI, and resolve merge conflicts.
  • @coderabbitai autofix resume to resume Autofix for this PR.
  • @coderabbitai autofix stop to stop Autofix for this PR.
  • @coderabbitai resolve to resolve all the CodeRabbit review comments.
  • @coderabbitai approve as a new top-level PR comment to resolve CodeRabbit review threads; also requests approval when reviews.auto_approvals.enabled is enabled.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai generate configuration to create a PR that adds the current resolved configuration as .coderabbit.yaml (or show it if already present).
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore or @coderabbit ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

Status, support, documentation and community

  • Visit our status page to check the current availability of CodeRabbit.
  • Create a ticket on our support page for assistance with any issues or questions.
  • Visit our documentation site for detailed information on how to use CodeRabbit.
  • Join our Discord community to connect with other users and get help from the community.
  • Follow us on X/Twitter for updates and announcements.

@toxsick

toxsick commented Oct 24, 2026

Copy link
Copy Markdown
Contributor Author

@coderabbitai full review

@coderabbitai

coderabbitai Bot commented Oct 24, 2026 •

Copy link
Copy Markdown
⚠️ Action not completed

Review skipped: 621 files exceed the limit of 100.

@toxsick
toxsick merged commit df27899 into next Oct 25, 2026
17 checks passed
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