import Link from '../../components/Link';
import { linkTo } from '@storybook/addon-links';

<Meta
  title="Getting started/Recommended libraries"
  subTitle="Guidelines & Recommendations"
  parameters={{
    componentSubtitle: 'Getting started',
    previewTabs: {
      canvas: { hidden: true },
    },
  }}
/>

> Legacy libraries that we no longer recommend to use
>
> - Forms: [react-final-form](https://github.com/final-form/react-final-form), [redux-form](https://github.com/erikras/redux-form)
> - Charts: [Victory](https://formidable.com/open-source/victory/)

Below, you’ll find a list of recommended libraries that are commonly used inside WFP. t's up to you to exchange them with your choices.

## CSS

[scss/sass](https://sass-lang.com) is a CSS pre-processor with syntax advancements and variable, functions, etc. [Learn more](https://create-react-app.dev/docs/adding-a-sass-stylesheet) about how to use scss with create-react-app.

## Application state handling

[redux](https://redux.js.org) is a predictable state container for JavaScript apps. It helps you write
applications that behave consistently, run in different environments (client,
server, and native), and are easy to test.

[redux-toolkit](https://redux-toolkit.js.org/) it the official, opinionated toolset for efficient Redux development by providing a standardized implementation of common redux tasks.

[redux-saga](https://github.com/redux-saga/redux-saga) helps managing side effects when loading external data like link(asynchronous
things)

Please also have a look at the [React/Redux Style Guide](https://gist.github.com/datchley/4e0d05c526d532d1b05bf9b48b174faf)

## Maps

Please have a look at the [Map guidelines](Design|Guidelines).

[react-simple-maps](https://www.react-simple-maps.io) is a map component to generate simple political maps

[react-map-gl](https://github.com/uber/react-map-gl) for maps using mapbox.gl

[ArcGIS API for JavaScript](https://developers.arcgis.com/javascript) for complex maps with custom layers

## Forms

[react-hook-form](https://react-hook-form.com/) is a form library for react.

[react-phone-input-2](https://www.npmjs.com/package/react-phone-input-2) is a customizable phone input library with auto formatting.

## Microsoft Azure Authentication

[microsoft-authentication-library-for-js msal-react](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-react) is a library which provides Azure Active Directory Library (ADAL) support for React.

## Tables

[react-table](https://github.com/react-tools/react-table) is a lightweight and fully customizable library to provide complex data tables.

[ag-grid](https://ag-grid.com) is a grid library for complex tables with Excel-like features.

## Linting & naming

Airbnb provides a [useful styling guide](https://github.com/airbnb/javascriptuseful) on how to style JavaScript and react code.

## Charts

[Recharts](https://recharts.org/) is a set of modular charting components for React.

## Polyfills

Polyfills are needed for IE browsers. We recommend [babel-preset-env](https://babeljs.io/docs/en/babel-preset-env) for it.

## Next.js (for external apps only)

[Next.js](https://nextjs.org/) is a modern front-end development web framework that enables functionality such as server-side rendering and generating static websites for React based web applications.
The combination of server side rendering and client side hydration allows the creation of very performant websites. It can be easily connected to headless content management systems like Drupal or Wordpress.
