# Common Libraries

List of commonly used libraries, grouped by category, you will encounter when working in our frontend applications

# HTTP & Asynchronous APIs

# Axios

Promise based HTTP client (uses XMLHttpRequests under the hood). Provides a nice API for making requests, including intercepting or transforming requests and responses.

NPM package: axios
Documentation: Axios Docs

# Tanstack Query

Asynchronous state management with an intuitive API and built in cache.

NPM package: @tanstack/react-query
Documentation: Tanstack Query Docs
Documentation: Incredibly Helpful blog article(s) from the package maintainer

# Components & Styling

# React Router

Components, hooks, and utilities to enable client side routing in a React Single Page Application.

NPM package: react-router
NPM package: react-router-dom
Documentation: React Router Docs

# Classnames

A simple JavaScript utility for conditionally joining classNames together.

NPM Package: classnames
Documentation: Github

# MFB Vinyl

Vinyl is a JavaScript library that provides React components, CSS styles, and utilities that can easily be reused across React web projects to implement the MidFirst Digital Banking internal tools design system.

NPM Package: mfb-vinyl
Documentation: Latest Storybook

# Testing

# Jest

JavaScript testing framework. Used to facilitate the running on automated unit and integration tests.

NPM package: jest
Documentation: Jest Docs

# Mock Service Worker

Mocking utility that intercepts requests on the network level. Seamlessly reuse the same mock definition for testing, development, and debugging.

NPM package: msw
Documentation: MSW Docs

# React Testing Library

Simple and complete testing utilities that encourage good testing practices

NPM package: @testing-library/react
NPM package: @testing-library/jest-dom
NPM package: @testing-library/user-event
Documentation: Testing Library Docs

# Build and Development

# Building and Testing Libraries Locally

If present, remove the library from the dependencies of the importing application and run npm i or run npm uninstall <packageName>.
Open the library that you wish to import locally run npm run build to populate the dist folder and then run npm link.
Go back to your application and run npm link <packageName> replacing the package name with the library you wished to test to link it locally.

If you need to make changes to the linked library, you can do so without repeating this process. You just need to make the changes, run npm run build, and then restart the vite server. Sometimes, the server will automatically restart with the updated code when you run the build command but other times it doesn't.

You can also run npm run watch or other watch commands specified in the package.json file which will cause the project to rebuild automatically when changes are made but this may be inconsistent.

Running npm i to install or remove any other dependencies will remove any linked libraries and they will need to be relinked. You will also need to reinstall any peer dependencies on the linked library manually.

Another option which may resolve some issues with npm's linking function is to pack the library into a tarball and install the library from the package. To do so run npm pack on the target library which will create a .tgz file in the project directory and you can install it into the importing application by running npm install <packagePath>.

# Vite

JavaScript build tool that provides a dev server for running the application locally, and a build command to bundle optimized assets for production.

NPM package: vite
Documentation: Vite Docs

# Honorable Mentions

Libraries that we have yet to find a use for, but are keen to.

# Zod

TypeScript-first schema validation with static type inference

NPM Package: zod
Documentation: Zod Docs

# Zustand

A small, fast and scalable bare bones state-management solution using simplified flux principles. Has a comfy API based on hooks, isn't too opinionated and doesn't involve too much boilerplate.

NPM Package: zustand
Documentation: Zod Docs