refactor(ui): standardize organic border-radius with shared constants #93
Conversation
- Change social config from array to object format for Starlight compatibility - Fix find command to use docs-dist instead of dist in workflow Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Create centralized organic-styles.ts module with ViewStyle/TextStyle constants for the P3 "Warm Technical" design system. Update core UI components to use these constants instead of inline magic numbers. Components updated: - welcome.tsx: Use hero, card, cta organic radii - Card.tsx: Use card organic radius - Button.tsx: Use button organic radius, extract color constants - Modal.tsx: Use modal and button organic radii - Toast.tsx: Use toast organic radius - Badge.tsx: Use badge organic radius - Input.tsx: Use textInput organic radius Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Update chat screen to use centralized organic style constants for buttons and badge elements instead of inline values. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. 📝 WalkthroughWalkthroughAdds a new centralized styling module Changes
Sequence Diagram(s)(Skipped — changes are styling consolidation without new multi‑actor sequential control flow.) Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
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 |
Summary of ChangesHello @jbdevprimary, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request significantly refactors the application's UI styling by centralizing "organic" border-radius values into a dedicated Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
|
🚀 Expo preview is ready!
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This is an excellent refactoring effort to centralize the 'organic' border-radius values from your design system into a single organic-styles.ts module. This greatly improves code maintainability, consistency, and adherence to the design system. The changes across the various components are clean and effective. I have a couple of suggestions to further enhance the code quality.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@src/lib/organic-styles.ts`:
- Around line 50-56: The textInput style object in organic-styles.ts is
incorrectly asserted as TextStyle while it contains border radius properties
that belong to ViewStyle; change the type assertion on the textInput object from
TextStyle to ViewStyle (or remove the assertion and type it appropriately) and
update the comment to note this is a container/View style for TextInput
(reference the textInput object and TextInput component) so the
borderTopLeftRadius, borderTopRightRadius, borderBottomRightRadius, and
borderBottomLeftRadius are typed correctly.
🧹 Nitpick comments (4)
src/lib/index.ts (1)
73-74: Consider clarifying the export rationale.The comment mentions "native module dependency issues," but
organic-styles.tsonly usesimport type { TextStyle, ViewStyle }which are type-only imports and shouldn't cause native module issues. If the intent is to avoid pulling React Native types into non-RN contexts (e.g., Node.js scripts), consider updating the comment to reflect the actual reason.app/(tabs)/chat.tsx (1)
189-194: Consider migrating remaining inline border radii for consistency.This container's border radius pattern (
16, 14, 18, 12) closely resemblesorganicBorderRadius.card(16, 12, 20, 8). If exact values aren't critical here, consider using the centralized token for consistency.Similarly, inline radii remain at:
- Lines 263-268 (chat input wrapper)
- Lines 284-289 (send button — matches
organicBorderRadius.toast)These could be migrated in a follow-up to complete the standardization.
src/components/ui/Input.tsx (1)
25-26: Consider co-locating color constants in the design system module.
PLACEHOLDER_COLORis a design token that could live insrc/lib/organic-styles.tsalongside the border radius tokens for centralized management. This would allow other components to reuse it consistently.src/components/ui/Button.tsx (1)
67-67: Redundant type cast.The
styleprop inherited fromPressablePropsis already typed asStyleProp<ViewStyle>, so the cast is unnecessary.Suggested simplification
- style={[organicBorderRadius.button, style as StyleProp<ViewStyle>]} + style={[organicBorderRadius.button, style]}
- Standardize all 30 files to use organicBorderRadius constants - Fix Stack component to accept StyleProp<ViewStyle> for array styles - Remove 555 lines of inline border-radius code - Run lint:fix to fix import ordering - Add .expo/ to .gitignore - All 233 tests pass, TypeScript passes Files updated: - All app screens (onboarding, tabs, settings, project, agent) - All display components (Badge, EmptyState, Tooltip) - All feedback components (BottomSheet, Loading, Progress, Toast) - All form components (Checkbox, Select, TextArea) - Layout components (Stack with StyleProp fix) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Fix Button style prop to handle function-based styles (Gemini high) - Remove input/textInput duplication with shared constant (Gemini medium) - Keep textInput as TextStyle for TextInput compatibility (CodeRabbit) - All 233 tests pass, TypeScript passes Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
|
Summary
src/lib/organic-styles.tsmodule with ViewStyle/TextStyle constants for the P3 "Warm Technical" design systemComponents Updated
Card.tsxorganicBorderRadius.cardButton.tsxorganicBorderRadius.button, extract color constantsModal.tsxorganicBorderRadius.modaland.buttonToast.tsxorganicBorderRadius.toastBadge.tsxorganicBorderRadius.badgeInput.tsxorganicBorderRadius.textInputwelcome.tsx.hero,.card,.ctachat.tsx.badge,.buttonTest plan
npx expo export --platform web) succeeds🤖 Generated with Claude Code
Summary by CodeRabbit
New Features
Refactor
Chores
✏️ Tip: You can customize this high-level summary in your review settings.