Skip to content

Latest commit

 

History

History
271 lines (230 loc) · 15.9 KB

Components.md

File metadata and controls

271 lines (230 loc) · 15.9 KB

Global Web UI Components:

Sentry repository uses shared components for 2 projects now:

UI Libraries/Frameworks

We minimized the usage of UI libraries/frameworks, so most of the shared/non-shared components are written without any UI libraries/frameworks.

Duplicated Components

All components in web-staking which are also in shared ui folder are duplicated because web-staking is not integrated into the monorepo. Therefore, for further updates, you need to update both versions of the components to avoid merge conflicts or integrate web-staking into the monorepo.

Deprecated Components

Most of the components in web-staking which are not in the ui folder are deprecated and not used, either in whole or in part. They should be deleted.

Buttons:

  • PrimaryButton:
    • Description: Primary button.
    • UI Library: NextUI. Library that has good support from NextJS.
    • Defined in: File
  • SecondaryButton:
    • Description: Secondary button.
    • UI Library: NextUI. Library that has good support from NextJS.
    • Defined in: File
  • ConnectButton:
    • Description: Button that allows users connect their wallet.
    • UI Library: NextUI. Library that has good support from NextJS.
    • Defined in: File
  • ButtonBack:
    • Description: Button that redirects the user to the previous page.
    • UI Library: NextUI. Library that has good support from NextJS.
    • Defined in: File

Wrappers:

  • BorderWrapperComponent.tsx:
    • Description: Wrapper that added border and border radius.
    • Defined in: File

Inputs:

  • CustomInput:
    • Description: Primary input for user information.
    • UI Library: NextUI. Library that has good support from NextJS.
    • Defined in: File
  • StakingInput:
    • Description: Primary input for operations with user wallet's balance (stake/unstake/redeem).
    • UI Library: NextUI. Library that has good support from NextJS.
    • Defined in: File
  • PoolInput:
    • Description: Special input for pool pages.
    • UI Library: NextUI. Library that has good support from NextJS.
    • Defined in: File

Links:

  • LinkComponent:
    • Description: Primary link.
    • Defined in: File
  • LinkLogoComponent:
    • Description: Link with logo.
    • Defined in: File
  • ExternalLinkComponent:
    • Description: Secondary link.
    • Defined in: File
  • LegalLink:
    • Description: Tertiary link.
    • Defined in: File

Modals:

  • ModalComponent:
    • Description: Primary modal.
    • UI Library: NextUI. Library that has good support from NextJS.
    • Defined in: File
  • ModalTermsAndConditions:
    • Description: Special component with additional styles for terms/conditions.
    • UI Library: NextUI. Library that has good support from NextJS.
    • Defined in: File

Notifications:

  • toastMarkUp:
    • Description: Mark up for notification.
    • UI Library: ReactToastify. The best/most popular solution for such kind of components.
    • Defined in: File
  • successNotification:
    • Description: Success Notification.
    • UI Library: ReactToastify. The best/most popular solution for such kind of components.
    • Defined in: File
  • errorNotification:
    • Description: Error Notification.
    • UI Library: ReactToastify. The best/most popular solution for such kind of components.
    • Defined in: File
  • loadingNotification:
    • Description: Loading Notification.
    • UI Library: ReactToastify. The best/most popular solution for such kind of components.
    • Defined in: File
  • updateNotification:
    • Description: Function for updating notifications.
    • UI Library: ReactToastify. The best/most popular solution for such kind of components.
    • Defined in: File

Pagination:

  • PaginationComponent:
    • Description: Pagination.
    • UI Library: NextUI. Library that has good support from NextJS.
    • Defined in: File

Popovers:

  • CustomPopover:
    • Description: Popover.
    • UI Library: NextUI. Library that has good support from NextJS.
    • Defined in: File

Radios:

  • RadioCard:
    • Description: Radio button.
    • UI Library: NextUI. Library that has good support from NextJS.
    • Defined in: File
  • RadioGroupWrapper:
    • Description: Radio group for correct value handling.
    • UI Library: NextUI. Library that has good support from NextJS.
    • Defined in: File

Shared components

Next there will be a list of components, in which we will add a comment about whether it is using any ui library/framework or not. Here is a list of the shared components:

Buttons

  • ConnectButton.tsx:
    • Description: Button that allows users connect their wallet.
    • Defined in: File
  • PrimaryButton.tsx:
    • Description: Primary button.
    • Defined in: File
  • TextButton.tsx:
    • Description: Secondary button.
    • Defined in: File

Callouts

  • BaseCallout.tsx:
    • Description: Wrapper for other components/elements.
    • Defined in: File

Checkboxes

  • MainCheckbox.tsx:
    • Description: Checkbox.
    • Defined in: File

Dropdowns

  • Dropdown.tsx:
    • Description: Dropdown.
    • Defined in: File

Inputs

  • BaseInput.tsx:
    • Description: Primary input for user information.
    • Defined in: File

Links

  • ExternalLink.tsx:
    • Description: Primary link.
    • Defined in: File

Notifications

  • WarningNotification.tsx:
    • Description: Primary warning notification.
    • Defined in: File

Steppers

  • MainStepper.tsx:
    • Description: Counter with increase/decrease buttons.
    • Defined in: File

Tooltips

  • Tooltips.tsx:
    • Description: Tooltip.
    • Defined in: File
  • SideBarTooltip.tsx:
    • Description: Tooltip for sidebars.
    • UI Library: RadixUI. We encountered a problem with display and positioning when opening/closing sidebars, so we decided to use the library in some places.
    • Defined in: File

Non-shared Components:

Non-shared components are those utilized on the Staking Website but have not yet been migrated from the web-staking repository to the monorepo UI folder:

Buttons

  • CTAButton.tsx:
    • Description: Similar to primary button. Has another clip-path.
    • Defined in: File
  • IconButton.tsx:
    • Description: Button that has only icon as child element.
    • Defined in: File
  • ButtonBack.tsx:
    • Description: Button that redirects the user to the previous page.
    • Defined in: File

Radio

  • Radio.tsx:
    • Description: Radio group/button. Uses ReactContext for correct value handling.
    • Defined in: File

Inputs

  • StakingInput.tsx:
    • Description: Primary input for operations with user wallet's balance (stake/unstake/redeem).
    • Defined in: File

Modals

  • BaseModal.tsx:
    • Description: Modal.
    • Defined in: File

Notifications

  • LoadingNotification.tsx:
    • Description: Loading notification.
    • UI Library: ReactToastify. The best/most popular solution for such kind of components.
    • Defined in: File
  • UpdateNotification.tsx:
    • Description: Allows update state of notification.
    • UI Library: ReactToastify. The best/most popular solution for such kind of components.
    • Defined in: File

Pagination

  • BasePagination.tsx:
    • Description: Pagination.
    • Defined in: File
  • BasePaginationItem.tsx:
    • Description: Pagination page.
    • Defined in: File

Spinners

  • BaseSpinner.tsx:
    • Description: Svg spinner.
    • Defined in: File

Toggles

  • MainToggle.tsx:
    • Description: Styled switcher between two states.
    • Defined in: File

Progress bars

  • Progress.tsx:
    • Description: Styled switcher between two states.
    • UI Library: NextUI. Library that has good support from NextJS. Non-shared because it uses NextUI lib.
    • Defined in: File

Textareas

  • Textareas.tsx:
    • Description: Styled switcher between two states.
    • UI Library: NextUI. Library that has good support from NextJS. Non-shared because it uses NextUI lib.
    • Defined in: File

Titles

  • MainTitle.tsx:
    • Description: Styled title.
    • Defined in: File

Dropdowns

  • SearchableDropdown.tsx:
    • Description: For correct application of custom dropdown styles with search the best solution is to apply styles via global css, as other ways do not give the desired result due to non simple custom styles
    • Defined in: File

React Cookie Consent

  • ReactCookieConsent.tsx:
    • Description: Cookies consent component.
    • UI Library: ReactCookieConsent The best/most popular solution for such kind of components.
    • Defined in: File

Removing duplicated components:

When removing duplicate components, you should be cautious about ensuring that the functionality remains intact. First, check the props and styles of the components to see if they are identical. Secondly, some components might have divergent functionality due to differences in specific tasks and goals, which means you need to carefully assess if they can truly be merged. The new consolidated component might become overly complex if it needs to handle many different use cases. Additionally, consider any side effects or dependencies each component might have, as these could impact the overall behavior of your application. Lastly, thoroughly test the unified component to ensure it meets all necessary requirements without introducing new bugs.