Skip to content

Refactor region select into a general select component #128

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 10 commits into from
Aug 19, 2025
Merged

Refactor region select into a general select component #128

merged 10 commits into from
Aug 19, 2025

Conversation

@codegen-sh
Copy link
Contributor

@codegen-sh codegen-sh bot commented Aug 18, 2025

Overview

This PR refactors the region select component into a more general select component that can be used for all select components, as requested. It maintains the specialized components for US states and Canadian provinces as helpers.

Changes

  • Created a generic Select component that can be used for any dropdown selection
  • Refactored the existing region-specific components to use the new generic select
  • Maintained the specialized USStateSelect and CanadaProvinceSelect components as helpers
  • Updated the Storybook stories and tests to use the new components
  • Renamed files to match the new component names

Implementation Details

  1. Created a generic Select component in packages/components/src/ui/select.tsx
  2. Created a form-aware wrapper for the select component in packages/components/src/remix-hook-form/select.tsx
  3. Updated the US state and Canada province select components to use the new generic select
  4. Updated the exports in the index files
  5. Renamed and updated the Storybook stories and tests

This implementation allows for a consistent select component across the application while still providing the convenience of pre-configured selects for common use cases like US states and Canadian provinces.

Testing

The existing tests have been updated to work with the new component structure. The functionality remains the same, but the component names have been updated to reflect the more general purpose.

💻 View my work • About Codegen
⛔ Remove Codegen from PR • 🚫 Ban action checks

@bolt-new-by-stackblitz
Copy link

bolt-new-by-stackblitz bot commented Aug 18, 2025

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

@coderabbitai
Copy link

coderabbitai bot commented Aug 18, 2025 •
edited
Loading

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.

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

✨ Finishing Touches
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch codegen-bot/refactor-select-components
🪧 Tips

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.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

  • Add @coderabbitai 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.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Status, Documentation and Community

  • Visit our Status Page to check the current availability of CodeRabbit.
  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@codegen-sh
Copy link
Contributor Author

codegen-sh bot commented Aug 18, 2025 •
edited
Loading

🔍 Check Suite Status for PR #128

Check Status Commit Time Check Suite Agent trace
GitHub Actions Fix ✅ 9712c4f 2025-08-18 20:49:47 UTC Run Agent Work

💻 View my work • 🛑 Stop • 🚫 Ban all checks

@codegen-sh
Copy link
Contributor Author

codegen-sh bot commented Aug 18, 2025

✅ Fixed the failing check by removing a reference to a non-existent toggle component in the UI index file. The build was failing because it couldn't resolve ./toggle from packages/components/src/ui/index.ts. This component was referenced in the exports but doesn't exist in the codebase.

@codegen-sh
Fix build errors in select components refactoring
520a2c7 
- Updated imports in data files to use SelectOption from select.tsx instead of RegionOption from region-select.tsx
- Removed non-existent tooltip export from UI index file
@github-actions
Copy link
Contributor

github-actions bot commented Aug 18, 2025 •
edited
Loading

📝 Storybook Preview: View Storybook

This preview will be updated automatically when you push new changes to this PR.

Note: The preview will be available after the workflow completes and the PR is approved for deployment.

@jaruesink
Copy link
Contributor

jaruesink commented Aug 18, 2025 •
edited by codegen-sh bot
Loading

@codegen-sh now let's get rid of our dropdown menu select component since we have our new better Select component

Got it! I'll handle removing the old dropdown select component. 🗑️

💻 View my work • 🛑 Stop

@codegen-sh
Remove dropdown menu select component
9712c4f 
- Removed dropdown-menu-select-field.tsx from UI components
- Removed dropdown-menu-select.tsx from remix-hook-form components
- Removed dropdown-menu-select.stories.tsx from docs
- Updated index files to remove exports for these components

This completes the migration to the new Select component.
@codegen-sh
Copy link
Contributor Author

codegen-sh bot commented Aug 18, 2025

✅ I've removed the old dropdown menu select component as requested! Here's what I did:

  1. Removed the following files:

    • packages/components/src/ui/dropdown-menu-select-field.tsx
    • packages/components/src/remix-hook-form/dropdown-menu-select.tsx
    • apps/docs/src/remix-hook-form/dropdown-menu-select.stories.tsx

  2. Updated the index files to remove exports for these components:

    • Removed export * from './dropdown-menu-select-field' from packages/components/src/ui/index.ts
    • Removed export * from './dropdown-menu-select' from packages/components/src/remix-hook-form/index.ts

  3. Verified that the build still works correctly after these changes.

The changes have been pushed to the same PR branch. You can see the commit here.

This completes the migration to the new Select component, which is now the recommended way to create dropdown selects in the codebase.

💻 View my work • 🛑 Stop • React 👍 or 👎

@jaruesink
Update package.json to include Playwright for testing and streamline …
6b656e1 
…workspaces configuration. Refactor select component imports and improve accessibility features in select.tsx and phone-input-field.tsx. Enhance Storybook stories for region selection components with better querying methods.
@jaruesink
Merge branch 'codegen-bot/refactor-select-components' of github.com:l…
55a2b27 
…ambda-curry/forms into codegen-bot/refactor-select-components
@jaruesink
Refactor Storybook stories for Select component by consolidating rout…
42046ee 
…er decorators and enhancing play functionality for form submission tests. This improves the structure and readability of the stories while ensuring comprehensive testing of user interactions.
@jaruesink
Enhance Select component to support customizable UI components. Added…
113c696 
… `components` prop to allow users to override FormControl, FormLabel, FormDescription, and FormMessage. Updated Select UI to utilize default icons and support custom Trigger, Item, and SearchInput components.
@jaruesink jaruesink marked this pull request as ready for review August 19, 2025 03:21
@jaruesink jaruesink merged commit 6630cfc into codegen/lc-319-create-a-new-dropdown-selector-component-for-us-states-and Aug 19, 2025
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@jaruesink