Design System & Common Components

  • Go through app and other apps in the org to implement a common component library with help of Design and PM * Style Guide - Typography (H1s, Paragraphs, etc)

    • Loading Fonts - preloading, Google Fonts or host/package, default fonts before font is loaded?

      • Causes reflow if we didn't load font

      • Try to limit amount and weights of fonts

    • CSS Handling

      • Styled Components

      • Reset CSS

      • Less?

    • Common Colors, padding, spacing, fonts for elements

      • Ideally very little variation on these values, so you don't have to worry about pixel perfect designs and everything looks super consistent, and if we decide to do a redesign it's very simple, don't have to change values everywhere

    • Buttons and Common Elements

      • Buttons - no double submits by default esp with finance operations, block onClicks if in Loading State, have a loading state

      • Selects

      • Autocompletes

    • Go through Google MUI and make sure we have relevant elements for our Style Guide

    • Forms, interaction, validation, submitting

    • Modals and Dialogues

    • Error Toasts or bars or error dialogues

    • Confirmation dialogue/flow for deleting, buying, and other dangerous/permanent operations should be consistent - important for financial

    • Infinite Scrolling components like transaction lists and search results

    • Loading spinners

    • AJAX search - debounce

    • Auth Wrapper - Allowing/disallowing access to pages

    • Autofills for address - Google Maps

    • Phone verification - Twilio

    • Packaging

      • Create React App?

      • Webpack?

      • And customizations needed?

    • Linting

      • ESLint

      • Airbnb rule set

    • Common approach for Charting warrants a whole discussion

      • HighCharts?

      • How do we deal with time series

      • How do we deal with candlesticks

      • How do we load data?

      • How do we deal with filtering for time segments? Reloading data? Caching Data?

      • Probably separate this into its own library eventually so that it can be used and developed independently from this app

Last updated