This page includes a listing and short description of all the dependencies currently in Manifold. When you are thinking about adding  a new feature to Manifold, be it a graph or something else, please consult this list to see if we already have a package that fulfills your purposes. If you are an app developer, this list is an excellent resource for all the tools that come pre-built into Manifold. That will help us reduce redundant packages and make the Manifold installation smaller and a little faster. All of our direct dependencies are located under package.json at our project root. Our dependency dependencies are located under package-lock.json, which is created on npm install, and should not be modified. To update a dependency, you may use npm update (this also includes meanings for npm version numbers, like ^ and *), or directly modify the version number in package.json. Be careful though, as major version changes could have breaking changes.

React Component Libraries

These are some dependencies that we generally apply directly in our React components, and are often React components themselves. They could be anything from graphs to modals and styling.

chart.js 2

chart.js 2 is a required dependency for react-chartjs-2. We have not yet directly used it in our project, although if you find a use for it, you are welcome to. It is not a react component, however.

prop-types

prop-types is an extremely useful package that allows us to enforce prop types in react components. If your child component is receiving a prop from a parent, you will want to make sure it is of a certain type before actually using it. That is where prop-types comes in. If an incorrect type prop is sent to the child, it will log an error in the terminal, and whoever is using your component can quickly identify the problem.

react-autosuggest

react-autosuggest is a dropdown that offers search suggestions as you type in a search bar. Think about when you type something into google and the dropdown with autocomplete suggestions appear.

react-chartjs-2

react-chartjs-2 is a chart/graph tool that wraps chart.js 2 linked to above. It provides react components that accept props to configure and display nice charts for you.

react-google-charts

react-google-charts is essentially the same as react-chartjs-2. It is the preferred chart library for our code, as google charts has more variety than react-chartjs-2.

react-grid-layout

react-grid-layout provides a nice way to drag Thing cards around. After configuring it, it provides a box where anything we pass to it can be dragged around.

react-input-enhancements

react-input-enhancements is useful for forms, because we can add new functionality and different effects to html input tags.

reactstrap

reactstrap provides many components, and also uses bootstrap styling on them. Check out their docs for a full list of components and examples, but ultimately this library contains many React components that you may find helpful. Check this first when making new components.

redux-form

redux-form allows a form in any react component to use the redux store as it's storage location for input values. We use it during OAuth.

react-dnd

This package allows us to declare a component as draggable or as a drop target (or both!). This is different from react-grid-layout because the dragging functionality is not restricted to a grid. 

react-dnd-html5-backend

react-dnd can interface with a couple of different drag-n-drop api's. This is needed for the difference between using a laptop and using a touch device (like a phone or tablet). This particular backend is for laptops/desktops, and should not be expected to work reliably with touch devices. If we want to include support for that, this backend can be substituted for a different appropriate backend that supports touch.

Middleware

redux-saga

redux-saga allows complex, async dispatches. It can be used to intercept actions before they hit reducers, perform async actions, and dispatch even more actions depending on the results.

Useful Tools

These are some tools that aren't unique to React, but may make processing things/doing work easier.

axios

axios is a library that makes it easy to call api's via HTTP. We use this to make HTTP requests when communicating with the pico engine.

query-string

query-string is used primarily in our OAuth implementation. It is useful for parsing strings of the form "?someKey=someVal&anotherKey=anotherValue".

uuid

uuid generates long random strings according to a standard. We can use it in testing when we want random identifiers, or wherever you just want some random string.

Developer Only Dependencies

There are some dependencies that are only installed for developers, such as the testing dependencies.

enzyme

enzyme is used to render and test React components

enzyme-adapter-react-16

enzyme-adapter-react-16 is required by enzyme. Search their docs for a description of why this is necessary.

gulp

gulp is used largely for file transformations. We use gulp when compiling Sass files into pure css.

gulp-concat

gulp-concat takes files and concatenates them into a single file, which is also used with gulp in the compiling process described above.

gulp-sass

gulp-sass does the actual compiling of Sass files into css.

react-scripts

react-scripts is a remnant of create-react-app, Facebook's boilerplate project for React apps. It contains scripts and configurations for our app.

redux-mock-store

redux-mock-store is used to mock a redux store when creating test cases. Essentially, we render a component using Enzyme, and if that component relied/was connected to the redux store, we can mock the store with this package and provide the mocked store to the Enzyme render function.

redux-saga-tester

redux-saga-tester is extremely useful for testing redux-saga sagas. Look up their documentation and ours for examples. 

Project Setup

history

history is depended on by react-router-dom, and is used to keep track of the browser navigation within the SPA.

react

react is the framework for Manifold. 

react-dom

react-dom is used to render our root component to the browser's DOM.

Redux

The following are used by Redux and don't offer direct use for us:

• react-redux
• react-router-dom
• redux