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 modified 9mo ago