Repository navigation
docs: add "The State of React" — a dated, linkable component comparison - #397
Merged
Merged
Conversation
A dated, linkable comparison of bestax against Mantine, MUI, Chakra UI, shadcn/ui, React-Bootstrap, and react-bulma-components, published as a recurring monthly blog series. - src/data/componentComparison.js: the capability x library matrix with per-cell doc-link resolvers (bestax links are internal and build-validated; competitor links are best-effort with per-library fallbacks) plus lastReviewed. - src/components/ComponentComparison: theme-aware, linkable table (sticky header/first column, light + dark). - blog/2026-07-27-state-of-react-libs: the July 2026 edition, with admonitions framing it as a point-in-time snapshot and pointing to the latest edition. - blog/CLAUDE.md: runbook for future monthly editions. - Cross-link from the react-bulma-components migration guide to the series. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Pz9Bgf3T5is7nd3mynFtUC
The blog plugin globs every markdown file in blog/, so the new blog/CLAUDE.md runbook was being rendered as a post. Add a blog `exclude` (Docusaurus defaults + CLAUDE.md) so the runbook stays an agent-only file. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Pz9Bgf3T5is7nd3mynFtUC
Give the wide comparison table room by collapsing both menus on posts that render it: - hide_table_of_contents: true in the post frontmatter removes the right-hand table of contents (built-in, per-post). - A scoped :has(.sorl-comparison) rule in custom.css collapses the blog "Recent posts" sidebar and widens the content column to full width. It keys off the component's presence, so it is flash-free (present at SSR) and only affects posts that embed the comparison — no global blogSidebarCount change. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Pz9Bgf3T5is7nd3mynFtUC
Give the series an EDM/outrun cover (a nod to the "A State of Trance" namesake): a React-atom-meets-sunset over a neon grid with an equalizer skyline. - static/img/state-of-react-libs/2026-07.svg: the editable cover source, rendered full-width at the top of the post via an .sorl-cover <img>. - static/img/state-of-react-libs/2026-07.png: 1200x630 raster of the same, wired to `image:` (og / Medium link previews) and `cover_image:` (dev.to). - blog/CLAUDE.md: documents the cover workflow for future editions. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Pz9Bgf3T5is7nd3mynFtUC
react-bulma-components is a dead Bulma-0.9 subset, so it added little to the matrix. Remove its column and reindex, leaving bestax vs Mantine, MUI, Chakra, shadcn/ui, and React-Bootstrap. Also updates the post prose, the tip, the migration-guide cross-link, and the runbook to match. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Pz9Bgf3T5is7nd3mynFtUC
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
WalkthroughAdds a dated “State of React” blog series with a component-library capability matrix, documentation links, accessible table rendering, responsive styling, publication guidance, and related documentation cross-links. ChangesState of React comparison
Estimated code review effort: 3 (Moderate) | ~25 minutes Sequence Diagram(s)sequenceDiagram
participant Reader
participant StateOfReactBlog
participant ComponentComparison
participant componentComparisonData
participant LibraryDocs
Reader->>StateOfReactBlog: open July 2026 edition
StateOfReactBlog->>ComponentComparison: render comparison
ComponentComparison->>componentComparisonData: load matrix and library metadata
ComponentComparison->>LibraryDocs: navigate to component documentation
Possibly related issues
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches 💡 1📝 Generate docstrings 💡
🧪 Generate unit tests (beta)
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. Comment |
Contributor
Preview DeploymentPreview URL: https://ab2ac1fc.bestax.pages.dev |
Bring react-bulma-components back to the comparison, but de-emphasized: an abbreviated "r-bulma" header and icon-only cells (just the clickable ✓/◐, no component name), since its links all resolve to one homepage. Restores the seven-library prose in the post, migration cross-link, and runbook. The ComponentComparison table now honors a per-library `iconOnly` flag and a `title` (full name) tooltip on abbreviated headers. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Pz9Bgf3T5is7nd3mynFtUC
4 of 6 tasks
Contributor
Preview DeploymentPreview URL: https://43518fa2.bestax.pages.dev |
Drop the component-name values from every cell — each cell is now just the clickable ✓/◐/– glyph (the component name lives in its hover/aria label and the link target). Abbreviate every column header (Chakra, shadcn, R-Bootstrap, …) with the full name in a title tooltip, and center headers + glyphs. All seven libraries now fit comfortably without horizontal scrolling. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Pz9Bgf3T5is7nd3mynFtUC
Contributor
Preview DeploymentPreview URL: https://f41a4b56.bestax.pages.dev |
![claude[bot]](https://avatars.githubusercontent.com/in/1236702?s=60&v=4){kind=small}
There was a problem hiding this comment.
Deep review — 0 blocking · 2 advisory
| # | Severity | Area | Finding | Location |
|---|---|---|---|---|
| 1 | 🔵 Advisory | Robustness | Competitor deep-links are best-effort and not build-validated; some resolve to a library index rather than the exact component page. Acknowledged in the method note + runbook. | docs/src/data/componentComparison.js:118-278 |
| 2 | 🔵 Advisory | Accessibility | Column-header <th> cells omit scope="col" (only the row-header <th scope="row"> sets scope). Low impact — every data cell already carries a full aria-label naming library + component + status, so per-cell context is preserved regardless. |
docs/src/components/ComponentComparison/index.js:132-141 |
Overall: Sound, low-risk, docs-only change. I built the site locally (turbo run build --filter=@allxsmith/bestax-docs, exit 0) — onBrokenLinks: 'throw' validated every internal bestax cell link, the /docs/intro link, and the /blog/tags/state-of-react-libs "latest edition" pointer; the edition post and the tag archive both generate, and blog/CLAUDE.md is correctly excluded from the post glob. The riskiest surface is factual accuracy of ~150 hand-compiled matrix cells and the external competitor links, both of which the post itself frames as best-effort and invites corrections on — nothing a build or review can fully certify.
Residual risk (failure class = broken links / silently-wrong comparison):
- Internal bestax links silently drifting — refuted: the build passed with
onBrokenLinks: 'throw', and I confirmed/docs/api/(thebestaxHreffallback) does not resolve to a built route, so any future unmapped bestax name breaks the build loudly instead of degrading to a generic page. - CLAUDE.md leaking as a rendered post — refuted: the added blog
excludeglob works (no*claude*underbuild/blog), and the default exclusions were preserved, not replaced. - External competitor links — genuinely unvalidated (advisory #1); this is the one residual, and it is an accepted, documented trade-off rather than a regression.
🏄 Clean set, dude — paddled the whole lineup and every internal link caught the wave, build came in green first try. Only the competitor deep-links are still out past the break where the linter can't reach 'em, but the post owns that honestly. Send it.
Rebrand the recurring component-comparison blog series from "A State of React Libs" to the more generic "The State of React", leaving room to grow into broader React coverage while staying focused on component libraries for now. - Rename the edition folder, slug (state-of-react-2026-07), tag (state-of-react), and image paths (img/state-of-react/). - Update the synthwave cover art title to "THE STATE OF / REACT" and regenerate the 1200x630 PNG social image. - Refresh the series name across the post, the ComponentComparison component, the migration-guide cross-link, and the blog CLAUDE.md runbook; point "latest edition" links at /blog/tags/state-of-react. - Rename the internal --sorl-* status CSS variables to --sor-*. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Pz9Bgf3T5is7nd3mynFtUC
allxsmith
changed the title
Contributor
Preview DeploymentPreview URL: https://e1f8625c.bestax.pages.dev |
Owner
Author
|
@coderabbitai review Generated by Claude Code |
|
✅ Action performedReview finished.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@docs/src/components/ComponentComparison/styles.module.css`:
- Around line 157-158: Fix the Stylelint violations in the .cell styles and the
corresponding styles around the additionally referenced section: remove the
empty .cell rule, and replace the deprecated clip declaration with the supported
equivalent while preserving the existing visual behavior.
In `@docs/src/data/componentComparison.js`:
- Around line 196-199: Update the MUI URL mapping used by muiHref to add a
MenuList override pointing to the documented
https://mui.com/material-ui/api/menu-list/ page, while preserving the existing
fallback behavior for other component names.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: 60e1b5c3-2d82-454a-9de2-83ba731ba01e
⛔ Files ignored due to path filters (2)
docs/static/img/state-of-react/2026-07.pngis excluded by!**/*.pngdocs/static/img/state-of-react/2026-07.svgis excluded by!**/*.svg
📒 Files selected for processing (8)
docs/blog/2026-07-27-state-of-react/index.mddocs/blog/CLAUDE.mddocs/docs/guides/getting-started/migration/react-bulma-components.mddocs/docusaurus.config.jsdocs/src/components/ComponentComparison/index.jsdocs/src/components/ComponentComparison/styles.module.cssdocs/src/css/custom.cssdocs/src/data/componentComparison.js
- Remove the empty `.cell` rule (Stylelint block-no-empty); `.cell` stays defined via the `.table td.cell` centering selector, so `styles.cell` is unchanged. - Replace the deprecated `clip: rect(...)` in `.srOnly` with `clip-path: inset(50%)` (same visually-hidden behavior). - Map MUI `MenuList` to its documented API page (material-ui/api/menu-list) instead of the non-existent react-menu-list guide URL. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Pz9Bgf3T5is7nd3mynFtUC
Contributor
Preview DeploymentPreview URL: https://c988dd69.bestax.pages.dev |
Contributor
|
🎉 This PR is included in version 3.7.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
|
🎉 This PR is included in version 2.0.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
This was referenced Aug 2, 2026
|
🎉 This PR is included in version 5.8.1 🎉 The release is available on: Your semantic-release bot 📦🚀 |
|
🎉 This PR is included in version 1.0.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Adds "The State of React", a dated, linkable component comparison published as a recurring monthly blog series (first edition: July 2026). It compares bestax against react-bulma-components, Mantine, MUI, Chakra UI, shadcn/ui, and React-Bootstrap across ~150 capabilities as a compact icon matrix: each cell is a clickable ✓/◐/– that links to that library's own component docs (the component name is on hover). Column headers are abbreviated with the full name on hover. bestax links are internal and validated by the build; competitor links are best-effort with per-library fallbacks.
Package(s) affected:
@allxsmith/bestax-bulma)create-bestax)@allxsmith/bestax-docs)New / changed files:
docs/src/data/componentComparison.js— the capability × library matrix + per-cell doc-link resolvers +lastReviewed.docs/src/components/ComponentComparison/— theme-aware, linkable icon-matrix table (sticky header/first column, light + dark).docs/blog/2026-07-27-state-of-react/index.md— the July 2026 edition (synthwave cover, admonitions, full-width layout).docs/static/img/state-of-react/2026-07.{svg,png}— cover art (SVG source + 1200×630 social image).docs/blog/CLAUDE.md— runbook for future monthly editions.docs/src/css/custom.css,docs/docusaurus.config.js— full-width layout for the posts + excludeCLAUDE.mdfrom the blog glob.docs/docs/guides/getting-started/migration/react-bulma-components.md— cross-link to the series.Related Issue(s)
Closes #396
Type of Change
Checklist
onBrokenLinks: 'throw'validated every internal linkCLAUDE.mdfiles are updated — addeddocs/blog/CLAUDE.mdScreenshots / Demos
The cover art is committed at
docs/static/img/state-of-react/2026-07.png(1200×630). The post renders a full-width, sticky-header icon matrix in light and dark (blog "Recent posts" sidebar and right-hand TOC collapsed on comparison posts). Every cell is just the clickable status icon; hover shows the component name.Additional Context
◐= via prop/composition (treated as "absent" when judging uniqueness); official companion packages (Mantine@mantine/*, MUI@mui/lab&@mui/x-*) count as first-party. Competitor deep-links are best-effort with a per-library fallback and are not covered by the build's link check.includeBlog: false) — this is a dated snapshot, not canonical reference documentation. Future refreshes are new dated editions perdocs/blog/CLAUDE.md.react-bulma-componentsis included (abbreviatedr-bulma); the migration guide also covers it directly.🤖 Generated with Claude Code
https://claude.ai/code/session_01Pz9Bgf3T5is7nd3mynFtUC
Summary by CodeRabbit
blog/from being treated as posts.