Implementation of Essential Reusable Components

[Alina-Khmilevska]

Overview

In order to enhance the maintainability and consistency of our React-based codebase for the UPSA Pharmaceutical Organization website, we aim to develop a set of essential reusable components. These components should encapsulate common UI patterns and functionalities that are prevalent across different parts of our application, promoting a DRY (Don't Repeat Yourself) coding approach.

Objectives

• Consistency: Ensure that the UI maintains a consistent look and feel across all sections of the website.
• Efficiency: Reduce development time by reusing components in different parts of the application.
• Maintainability: Make the codebase easier to maintain and update.

Components to be Created

1. Button: A customizable button component that can be reused for different actions across the site.
2. Input Field: A generic input field component with integrated validation and error messaging.
3. Card: A card component to display information in a structured format, which could be used for product listings, articles, etc.
4. Modal: A modal component for displaying additional information or forms without navigating away from the current page.
5. Navbar: A navigation bar component that can be customized and reused across different pages.
6. Footer: A footer component with customizable links and information.

Acceptance Criteria

• All components should be fully functional and tested.
• Components should be customizable and adaptable to different use cases.
• Code should follow best practices and coding standards.
• Documentation for each component should be provided, explaining how to use and customize them.

How to Contribute

1. Choose a component from the list above that you would like to work on.
2. Comment on this issue, stating which component you are working on to avoid duplication of work.
3. Fork the repository and create a new branch for your component.
4. Once the component is implemented and tested, submit a pull request for review.

We appreciate your contributions and are excited to see the positive impact this will have on our project’s development efficiency and consistency!

[Alina-Khmilevska]

I have started working on the Button component. After reviewing the entire layout, I noticed several variations of buttons throughout the design. My goal is to create a comprehensive and reusable Button component that can accommodate all these variations.

[Alina-Khmilevska]

Started working on the Input Field and MembershipForm

[Alina-Khmilevska]

Added Button, Input Field and Card. Other components were already available on the site