Repository navigation
refactor(form-numeric-input): unify help/error text into StatusText and update story - #257
Conversation
…nd update story Replace separate ErrorText/ExtraText usage with a single StatusText in FormNumericInput to centralize status-driven messaging and icon logic. Add showHelpTextIcon prop (defaults to true when status is not "default") and remove extraText prop and related IDs. Simplify container spacing class to use gap-form-field-gap and keep label/numeric input markup. Update storybook: add argTypes for validateStatus, helpText, showHelpTextIcon and size; replace WithExtraText story with a ValidationStates story that demonstrates default, error, success and warning examples using multiple FormNumericInput instances. These changes reduce duplicated components, simplify props/IDs, and make status rendering consistent across validation states.
|
Review changes with Changed Files
|
|
You do not have enough credits to review this pull request. Please purchase more credits to continue. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughFormNumericInput now consolidates help-text rendering into a single StatusText driven by Changes
Sequence Diagram(s)(Section omitted — changes are component-level rendering and Storybook updates; no multi-component sequential flow requiring a diagram.) Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related issues
Possibly related PRs
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro 📒 Files selected for processing (1)
🧰 Additional context used📓 Path-based instructions (4)libs/ui/**/*.{ts,tsx}📄 CodeRabbit inference engine (CLAUDE.md)
Files:
libs/ui/src/{atoms,molecules}/**/*.tsx📄 CodeRabbit inference engine (libs/ui/CLAUDE.md)
Files:
libs/ui/src/molecules/**/*.tsx📄 CodeRabbit inference engine (libs/ui/CLAUDE.md)
Files:
libs/ui/src/{atoms,molecules}/[a-z0-9-]*.tsx📄 CodeRabbit inference engine (libs/ui/CLAUDE.md)
Files:
🧠 Learnings (16)📓 Common learnings📚 Learning: 2025-12-29T13:43:28.258ZApplied to files:
📚 Learning: 2025-09-07T21:30:50.058ZApplied to files:
📚 Learning: 2025-09-07T21:30:50.058ZApplied to files:
📚 Learning: 2025-09-07T21:30:50.058ZApplied to files:
📚 Learning: 2025-09-07T21:30:50.058ZApplied to files:
📚 Learning: 2025-09-07T21:30:50.058ZApplied to files:
📚 Learning: 2025-09-07T21:30:50.058ZApplied to files:
📚 Learning: 2025-09-07T21:29:55.558ZApplied to files:
📚 Learning: 2025-09-07T21:30:50.058ZApplied to files:
📚 Learning: 2025-09-07T21:30:50.058ZApplied to files:
📚 Learning: 2025-09-07T21:29:55.558ZApplied to files:
📚 Learning: 2025-12-29T13:25:52.634ZApplied to files:
📚 Learning: 2025-10-03T08:38:48.431ZApplied to files:
📚 Learning: 2025-09-07T21:29:55.558ZApplied to files:
📚 Learning: 2025-12-16T19:45:17.746ZApplied to files:
🧬 Code graph analysis (1)libs/ui/src/molecules/form-numeric-input.tsx (1)
🪛 GitHub Actions: CIlibs/ui/src/molecules/form-numeric-input.tsx[error] 4-4: Cannot find module '../atoms/status-text' or its corresponding type declarations. This caused failure during declaration file generation for the UI library. [error] pnpm build && pnpm build:storybook failed due to TS error in form-numeric-input.tsx. Declaration file generation and overall build aborted. 🔇 Additional comments (1)
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 |
Mesa DescriptionTL;DRRefactored What changed?
Description generated by Mesa. Update settings |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
📜 Review details
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (2)
libs/ui/src/molecules/form-numeric-input.tsxlibs/ui/stories/molecules/form-numeric-input.stories.tsx
🧰 Additional context used
📓 Path-based instructions (5)
libs/ui/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Implement UI library components using Zag.js for React and Tailwind CSS for styling
Files:
libs/ui/stories/molecules/form-numeric-input.stories.tsxlibs/ui/src/molecules/form-numeric-input.tsx
libs/ui/stories/**/*.stories.tsx
📄 CodeRabbit inference engine (libs/ui/CLAUDE.md)
libs/ui/stories/**/*.stories.tsx: Storybook stories must exist for components and cover all variants and states
Use Storybook title hierarchy matching the layer (e.g., Atoms/ComponentName)
Files:
libs/ui/stories/molecules/form-numeric-input.stories.tsx
libs/ui/src/{atoms,molecules}/**/*.tsx
📄 CodeRabbit inference engine (libs/ui/CLAUDE.md)
libs/ui/src/{atoms,molecules}/**/*.tsx: React 19 components must not use forwardRef; pass ref as a prop instead
Do not use useCallback in components
Component implementations should use tv() with token-based classes (no raw Tailwind arbitrary values)
Use data attributes for state-based styling (e.g., data-[state=open], data-[disabled])
Do not use arbitrary Tailwind values in class names (e.g., bg-[#ff0000], bg-[var(--...)]); use token classes instead
Do not use direct semantic tokens like bg-primary; use component-specific token classes (e.g., bg-button-bg-primary)
Exported React components should be PascalCase (e.g., ComponentName)
Do not use abbreviations in component names (e.g., btn, pc)
When using Zag.js, derive styles from data attributes (e.g., data-state) rather than imperative styling
Files:
libs/ui/src/molecules/form-numeric-input.tsx
libs/ui/src/molecules/**/*.tsx
📄 CodeRabbit inference engine (libs/ui/CLAUDE.md)
Interactive components must use Zag.js patterns (machine, useMachine, normalizeProps, connect)
Files:
libs/ui/src/molecules/form-numeric-input.tsx
libs/ui/src/{atoms,molecules}/[a-z0-9-]*.tsx
📄 CodeRabbit inference engine (libs/ui/CLAUDE.md)
Component files must be placed under src/atoms or src/molecules and named in kebab-case (component-name.tsx)
Files:
libs/ui/src/molecules/form-numeric-input.tsx
🧠 Learnings (11)
📓 Common learnings
Learnt from: KaiUweCZE
Repo: NMIT-WR/new-engine PR: 151
File: libs/ui/stories/molecules/product-card.stories.tsx:214-227
Timestamp: 2025-10-03T08:38:48.431Z
Learning: Story files in libs/ui/stories/**/*.tsx can use semantic tokens (e.g., bg-accent, text-accent-fg, hover:bg-accent-hover) for demonstration purposes, unlike component implementation files which should use component-specific token classes.
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:30:50.058Z
Learning: Applies to libs/ui/stories/**/*.stories.tsx : Storybook stories must exist for components and cover all variants and states
📚 Learning: 2025-09-07T21:30:50.058Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:30:50.058Z
Learning: Applies to libs/ui/stories/**/*.stories.tsx : Storybook stories must exist for components and cover all variants and states
Applied to files:
libs/ui/stories/molecules/form-numeric-input.stories.tsx
📚 Learning: 2025-10-03T08:38:48.431Z
Learnt from: KaiUweCZE
Repo: NMIT-WR/new-engine PR: 151
File: libs/ui/stories/molecules/product-card.stories.tsx:214-227
Timestamp: 2025-10-03T08:38:48.431Z
Learning: Story files in libs/ui/stories/**/*.tsx can use semantic tokens (e.g., bg-accent, text-accent-fg, hover:bg-accent-hover) for demonstration purposes, unlike component implementation files which should use component-specific token classes.
Applied to files:
libs/ui/stories/molecules/form-numeric-input.stories.tsx
📚 Learning: 2025-09-07T21:30:50.058Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:30:50.058Z
Learning: Applies to libs/ui/stories/**/*.stories.tsx : Use Storybook title hierarchy matching the layer (e.g., Atoms/ComponentName)
Applied to files:
libs/ui/stories/molecules/form-numeric-input.stories.tsx
📚 Learning: 2025-09-07T21:30:50.058Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:30:50.058Z
Learning: Applies to libs/ui/src/{atoms,molecules}/**/*.tsx : Use data attributes for state-based styling (e.g., data-[state=open], data-[disabled])
Applied to files:
libs/ui/stories/molecules/form-numeric-input.stories.tsxlibs/ui/src/molecules/form-numeric-input.tsx
📚 Learning: 2025-12-16T19:45:17.746Z
Learnt from: BleedingDev
Repo: NMIT-WR/new-engine PR: 207
File: libs/ui/src/molecules/select.tsx:50-50
Timestamp: 2025-12-16T19:45:17.746Z
Learning: When reviewing Tailwind classes in TSX/TS files, prefer using square brackets for arbitrary CSS values and complex expressions. Specifically: - Do not use the parentheses syntax (z-(--z-index)) for anything beyond simple CSS variable references; this syntax auto-wraps in var() and cannot handle calc or complex functions. - Use the square brackets syntax (e.g., h-[calc(var(--available-height)-var(--spacing-content))]) for calc expressions, var with calc, and any complex CSS expressions. This rule applies broadly to Tailwind v4 usage in TSX code across the project.
Applied to files:
libs/ui/stories/molecules/form-numeric-input.stories.tsxlibs/ui/src/molecules/form-numeric-input.tsx
📚 Learning: 2025-09-07T21:30:50.058Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:30:50.058Z
Learning: Applies to libs/ui/src/{atoms,molecules}/**/*.tsx : Component implementations should use tv() with token-based classes (no raw Tailwind arbitrary values)
Applied to files:
libs/ui/src/molecules/form-numeric-input.tsx
📚 Learning: 2025-09-07T21:30:50.058Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:30:50.058Z
Learning: Applies to libs/ui/src/molecules/**/*.tsx : Interactive components must use Zag.js patterns (machine, useMachine, normalizeProps, connect)
Applied to files:
libs/ui/src/molecules/form-numeric-input.tsx
📚 Learning: 2025-09-07T21:30:50.058Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:30:50.058Z
Learning: Applies to libs/ui/src/{atoms,molecules}/**/*.tsx : Do not use direct semantic tokens like bg-primary; use component-specific token classes (e.g., bg-button-bg-primary)
Applied to files:
libs/ui/src/molecules/form-numeric-input.tsx
📚 Learning: 2025-09-07T21:29:55.558Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: apps/frontend-demo/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:29:55.558Z
Learning: Applies to apps/frontend-demo/src/components/@(atoms|molecules|organisms)/*.tsx : Define component props with TypeScript interfaces
Applied to files:
libs/ui/src/molecules/form-numeric-input.tsx
📚 Learning: 2025-09-07T21:30:50.058Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:30:50.058Z
Learning: Applies to libs/ui/src/{atoms,molecules}/**/*.tsx : React 19 components must not use forwardRef; pass ref as a prop instead
Applied to files:
libs/ui/src/molecules/form-numeric-input.tsx
🧬 Code graph analysis (2)
libs/ui/stories/molecules/form-numeric-input.stories.tsx (2)
libs/ui/src/molecules/form-numeric-input.tsx (1)
FormNumericInput(17-59)libs/ui/src/atoms/numeric-input.tsx (1)
NumericInput(111-192)
libs/ui/src/molecules/form-numeric-input.tsx (1)
libs/ui/src/atoms/numeric-input.tsx (1)
NumericInputProps(95-109)
🪛 GitHub Actions: CI
libs/ui/src/molecules/form-numeric-input.tsx
[error] 4-4: Cannot find module '../atoms/status-text' or its corresponding type declarations.
🔇 Additional comments (2)
libs/ui/stories/molecules/form-numeric-input.stories.tsx (2)
19-38: Excellent addition of Storybook controls.The argTypes configuration properly exposes the new props (
validateStatus,helpText,showHelpTextIcon,size) for interactive demonstration in Storybook. This follows best practices for component documentation.Based on coding guidelines, Storybook stories must exist for components and cover all variants and states.
133-228: Well-structured ValidationStates story demonstrating all states.The replacement of WithExtraText with ValidationStates effectively showcases all four validation states (default, error, success, warning) using independent state management for each example. This provides clear, isolated demonstrations of the StatusText integration across different validation scenarios.
Based on coding guidelines, stories must cover all variants and states, which this implementation satisfies.
|
@coderabbitai This PR depends on #249 which introduces the StatusText component. Review assuming #249 is merged first. |
|
Tip For best results, initiate chat on the files or code changes. 🧩 Analysis chain🏁 Script executed: Length of output: 101 🏁 Script executed: Length of output: 1394 🏁 Script executed: Length of output: 16143 🏁 Script executed: Length of output: 0 @KaiUweCZE, thank you for the heads-up about the dependency on PR #249! I've reviewed this PR assuming StatusText is available, and the refactoring looks excellent. Here are my observations: ✅ Positive AspectsClean Refactoring
Default Value Handling Comprehensive Storybook Coverage
Simplified Layout 🔍 Code QualityThe implementation is straightforward and maintainable: {helpText && (
<StatusText
status={validateStatus}
showIcon={showHelpTextIcon}
size={size}
>
{helpText}
</StatusText>
)}This conditional rendering pattern is clear and follows React best practices. 📝 Conventional CommitsThe PR title follows conventional commit guidelines correctly: The refactoring achieves its stated goals of reducing duplication, simplifying props, and making status rendering consistent. Once PR #249 is merged, this is ready to go! 🚀 🐰✨ 🧠 Learnings used |
Replace separate ErrorText/ExtraText usage with a single StatusText in
FormNumericInput to centralize status-driven messaging and icon logic.
Add showHelpTextIcon prop (defaults to true when status is not "default")
and remove extraText prop and related IDs. Simplify container spacing
class to use gap-form-field-gap and keep label/numeric input markup.
Update storybook: add argTypes for validateStatus, helpText,
showHelpTextIcon and size; replace WithExtraText story with a
ValidationStates story that demonstrates default, error, success and
warning examples using multiple FormNumericInput instances.
These changes reduce duplicated components, simplify props/IDs, and make
status rendering consistent across validation states.
Summary by CodeRabbit
New Features
Improvements
Breaking Changes
Documentation
✏️ Tip: You can customize this high-level summary in your review settings.