Skip to content
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.

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

Add select input with a search box #13

Open
5 tasks
Ahd-Kabeer-Hadi opened this issue Feb 8, 2024 · 9 comments · May be fixed by #28
Open
5 tasks

Add select input with a search box #13

Ahd-Kabeer-Hadi opened this issue Feb 8, 2024 · 9 comments · May be fixed by #28
Assignees
Labels
enhancement New feature or request

Comments

@Ahd-Kabeer-Hadi
Copy link
Contributor

Ahd-Kabeer-Hadi commented Feb 8, 2024

Issue Description

In the file app\join-waiting-list\page.tsx, we are currently using a selectbox. However, we need to implement a more responsive solution similar to the responsive combobox from Shadcn. This requires refactoring to integrate it as a standard UI component, consistent with our existing form components and in harmony with our theme.

Acceptance Criteria

  • The component should be reusable like existing form inputs and must accept dynamic values and style classes.
  • The component should adhere to the website's theme colours and styles.
  • The component should include filtering, searching, and an optional input field if the given list is not available.
  • If a user types something that's not in the enum list, the 'other' option should be filtered and selectable.
  • If the user selects 'other', another input field should become visible to enter the value.

Expected UI sample (sample only needs necessary changes as in AC)

image

Current UI

image

Instructions

Before starting development, please follow these steps:

  1. Create a branch on your local machine with the name of the token.
  2. Ensure that you're working on this branch for the duration of the development process.

Best Practices for Open Source Contribution:

  1. Read the Contribution Guidelines: Familiarise yourself with the project's contribution guidelines. These guidelines usually outline how to contribute, coding standards, and other important information.

  2. Understand the Project: Take the time to understand the project's goals, architecture, and existing codebase before making any contributions. This ensures that your contributions align with the project's objectives.

  3. Follow Coding Standards: Adhere to the coding style and standards established by the project. Consistent coding style makes it easier for others to read and maintain the code.

  4. Document Your Code: Provide clear and concise comments within your code to explain its purpose, functionality, and any important considerations. Good documentation makes it easier for other developers to understand and use your code.

  5. Test Your Changes: Thoroughly test your changes to ensure they work as intended and do not introduce any regressions. Write unit tests whenever possible to automate the testing process and increase confidence in your changes.

  6. Keep Your Pull Requests Small and Focused: Break your changes into smaller, focused pull requests rather than large, monolithic ones. This makes it easier for maintainers to review your code and for other contributors to understand the changes.

  7. Be Responsive to Feedback: Be open to feedback and constructive criticism from maintainers and other contributors. Address any feedback promptly and be willing to make necessary adjustments to your code.

  8. Be Patient and Respectful: Open source projects often have diverse communities with different perspectives and priorities. Be patient and respectful when discussing ideas or providing feedback, and always assume good intentions from other contributors.

  9. Contribute Positively: Contribute to a positive and inclusive community by being supportive of others, encouraging collaboration, and fostering a welcoming environment for all contributors.

  10. Celebrate Your Contributions: Your contributions, no matter how small, are valuable to the project. Celebrate your achievements and the contributions of others to build a positive and thriving open source community.

@Ahd-Kabeer-Hadi Ahd-Kabeer-Hadi added the enhancement New feature or request label Feb 8, 2024
@Ahd-Kabeer-Hadi
Copy link
Contributor Author

@firoz3130 what's the update?

@nithin9000
Copy link

@Ahd.Kabeer Hadi can i start working on this

@Ahd-Kabeer-Hadi
Copy link
Contributor Author

@nithin6x9 have you setup the repo? if then please collaborate with @firoz3130 , I think he has already done some progress by now

@nithin9000
Copy link

@Ahd-Kabeer-Hadi yeah i have the repo locally and will connect with firoz

@Ahd-Kabeer-Hadi
Copy link
Contributor Author

Ahd-Kabeer-Hadi commented Feb 12, 2024

@firoz3130 @nithin6x9 both of you can refer the SelectInput.tsx from components/ui for a kick start,

and please keep the acceptance Criteria in mind working on it

@itsOmSarraf
Copy link

@Ahd-Kabeer-Hadi can i take up from here, will get it done

@Ahd-Kabeer-Hadi
Copy link
Contributor Author

@itsOmSarraf, @firoz3130 has brought up a solution for now, we need to optimize the form submitting behaviour can you do that?

@Ahd-Kabeer-Hadi
Copy link
Contributor Author

@firoz3130 hope you are doing it otherwise @itsOmSarraf you can take this now

@firoz3130
Copy link

image
I was able to achieve this much. I was not satisfied with the colors schemes here , Thats what I was trying to change these days
I think it would be better for the 2nd person to take up this now.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants