elevate-ui

Docs + Demo

Elevate-UI is an opinionated toolkit of React components and patterns used for the rapid prototyping and development of web apps and sites for Elm Street Technology. It seeks to establish best practices around user-interface and user-experience design, for both the platform's users, as well as the developers.

Libraries

A number of open-source libraries have been used to build Elevate-UI:

• babel– A JavaScript compiler
• eslint– JavaScript linting utility
• eslint-config-react-app– ESLint configuration specifically for React components and apps
• prettier– Opinionated code formatting for js/json/css/md
• formik– Form state management and utilities
• yup– Client-side form schema validation
• react-jss– CSS-in-JS solution with theming and easy overrides
• react-table– a lightweight, fast and extendable datagrid
• react-datetime– a lightweight but complete datetime picker

Forms with Formik

The majority of functionality in our applications revolve around forms. In order to maintain organization and consistency– we'll want to use the library Formik.

"My goal with Formik was to create a scalable, performant, form helper with a minimal API that does the really really annoying stuff, and leaves the rest up to you." –Jared Palmer at ReactNYC

Anywhere we use a form in our apps, we'll want to make sure that we have accounted for the following:

• Proper input types for requested data
• Validation messaging at the form level
• Validation messaging at the individual field level
• Loading and disabled states for async data fetching and on submit

Styling with CSS-in-JS

We'll use CSS-in-JS to help guarantee that our components have all their markup, logic, and styling, together. CSS-in-JS helps prevent against any side effects that could occur from the cascading portion of CSS, while also giving us the ability to theme and customize our components with ease.

• Benefits of using JavaScript Style Sheets
• React: CSS in JS by vjeux (2014)

Code-splitting with Webpack's dynamic imports

We are also able to utilize our Loading component, which uses React-Loadable and Webpack's dynamic imports to split our application bundle into proper chunks. This helps ensure we are delivering optimized frontend assets to our users– saving them both time and data.